:root { color-scheme: dark; --ink: #f1f5ff; --muted: #abb8d4; --soft: #7787a9; --panel: #131c31; --line: #2a3859; --canvas: #090e1b; --blue: #7ca6ff; --violet: #a491ff; --amber: #ffbf75; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: radial-gradient(circle at 75% -15%, #202e59 0, transparent 31rem), var(--canvas); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
a { color: inherit; } button { font: inherit; } .shell { width: min(1120px, calc(100% - 42px)); margin: 0 auto; } .skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 10; padding: .6rem .8rem; background: white; color: #111; border-radius: .3rem; } .skip-link:focus { top: 1rem; }
.site-header { border-bottom: 1px solid rgb(167 186 235 / 12%); background: rgb(9 14 27 / 72%); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 5; } .nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .brand img { display: block; width: 188px; height: auto; } .nav-links { display: flex; gap: 1.3rem; color: var(--muted); font-size: .9rem; } .nav-links a { text-decoration: none; } .nav-links a:hover, .nav-links a:focus-visible { color: white; }
.hero { padding: clamp(5rem, 13vw, 9.6rem) 0 clamp(5rem, 11vw, 8rem); } .eyebrow, .kicker { margin: 0; color: var(--blue); font-size: .78rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; } .eyebrow { display: flex; align-items: center; gap: .6rem; } .eyebrow span { display: inline-block; height: .55rem; width: .55rem; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--amber)); box-shadow: 0 0 1.1rem var(--blue); } h1, h2, h3, p { margin-top: 0; } h1 { max-width: 900px; margin: 1.2rem 0 1.5rem; font-size: clamp(3rem, 7vw, 6.5rem); line-height: .98; letter-spacing: -.07em; } h1 em { font-style: normal; background: linear-gradient(100deg, var(--blue), var(--violet), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-copy { max-width: 720px; margin-bottom: 2rem; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.25rem); } .actions { display: flex; flex-wrap: wrap; gap: .8rem; } .button { border: 1px solid transparent; border-radius: .55rem; cursor: pointer; padding: .75rem 1rem; text-decoration: none; font-weight: 700; } .primary { color: #071022; background: linear-gradient(135deg, #90b6ff, #b0a1ff); } .secondary { color: var(--ink); border-color: #485b88; background: #141f38; } .button:hover { filter: brightness(1.1); } .button:focus-visible, a:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; } .hero-note { margin-top: 1.2rem; color: var(--soft); font-size: .9rem; }
.signal-band { border-block: 1px solid var(--line); background: rgb(19 28 49 / 68%); } .signal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: 1.4rem 0; } .signal-grid p { margin: 0; } .signal-grid b { display: block; margin-bottom: .25rem; } .signal-grid span { color: var(--muted); font-size: .9rem; }
.section { padding: clamp(4.5rem, 8vw, 7rem) 0; } .section-heading { max-width: 760px; margin-bottom: 2.4rem; } .section-heading h2, .limits h2 { margin: .5rem 0 .8rem; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.045em; line-height: 1.08; } .section-heading > p:last-child { color: var(--muted); font-size: 1.05rem; } .steps { display: grid; gap: 1px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: .9rem; list-style: none; background: var(--line); } .steps li { display: grid; grid-template-columns: 74px 1fr; gap: 1.2rem; padding: 1.5rem; background: #10182b; } .steps li > span { color: var(--violet); font-weight: 800; letter-spacing: .06em; } .steps h3 { margin-bottom: .8rem; font-size: 1.1rem; } pre { overflow-x: auto; margin: 0; padding: 1rem; border: 1px solid #304269; border-radius: .55rem; background: #090f1e; color: #dce8ff; font-size: .84rem; white-space: pre-wrap; } .callout { margin: 1.2rem 0 0; padding-left: 1rem; border-left: 3px solid var(--amber); color: var(--muted); }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } article { min-height: 240px; padding: 1.4rem; border: 1px solid var(--line); border-radius: .75rem; background: linear-gradient(155deg, #151f37, #101729); } article .index { color: var(--blue); font-weight: 800; } article h3 { margin-bottom: .55rem; } article p:not(.index) { color: var(--muted); font-size: .93rem; } article code { color: #c7d5ff; font-size: .8rem; } .limits { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 7vw, 8rem); border-top: 1px solid var(--line); } .limit-copy { color: var(--muted); font-size: 1.06rem; } .limit-copy strong { color: var(--amber); } .docs { border-top: 1px solid var(--line); } .doc-list { border-top: 1px solid var(--line); } .doc-list p { display: grid; grid-template-columns: minmax(260px, .9fr) 1.4fr; gap: 1rem; margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--line); } .doc-list code { color: #cad7ff; } .doc-list span { color: var(--muted); }
.site-footer { padding: 2.4rem 0; border-top: 1px solid var(--line); background: #070b15; } .site-footer .shell { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--soft); font-size: .85rem; } .site-footer img { width: 150px; height: auto; } .site-footer p { margin: 0; } .toast { position: fixed; right: 1rem; bottom: 1rem; transform: translateY(7rem); padding: .7rem 1rem; border: 1px solid #4d6294; border-radius: .5rem; background: #17233e; color: white; box-shadow: 0 .5rem 2rem rgb(0 0 0 / 35%); transition: transform .2s ease; } .toast.visible { transform: translateY(0); }
@media (max-width: 760px) { .nav-links { display: none; } .signal-grid, .capability-grid { grid-template-columns: 1fr; } .limits { grid-template-columns: 1fr; gap: 1.5rem; } .doc-list p { grid-template-columns: 1fr; gap: .25rem; } .site-footer .shell { align-items: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .toast { transition: none; } }