/* EngineWire site styles: one sheet for every page. Dark only; the brand colour is Volt. */

@font-face { font-family: "Geist"; src: url("/assets/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #060607;
  --bg-1: #0a0a0c;
  --bg-2: #0f0f12;
  --bg-3: #15161a;
  --line: rgba(232, 255, 208, .075);
  --line-2: rgba(232, 255, 208, .13);
  --line-3: rgba(232, 255, 208, .22);
  --text: #f3f7ea;
  --text-2: #c8cebc;
  --muted: #979e8c;
  --dim: #7d8374;
  --volt: #d4ff3a;
  --lime: #9dff2e;
  --green: #3dff7a;
  --pale: #f3ffc2;
  --red: #ff6b5e;
  --cyan: #6be4ff;
  --grad: linear-gradient(100deg, #3dff7a 0%, #9dff2e 40%, #d6ff3a 76%, #f3ffc2 100%);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --max: 1240px;
  --gut: clamp(18px, 4vw, 44px);
  --nav-h: 68px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); }
body { min-height: 100vh; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; font-feature-settings: "ss01", "cv11"; }
/* Section glows hang past the screen's edges. A body's overflow passes to the viewport, which phones still pan and
   zoom out to, so the page clips them here; clip, not hidden, keeps the pinned stages sticky. */
main, footer { overflow-x: clip; }
/* the landing page backdrop (src/gl/backdrop.js): a fixed canvas under every section, faded in once the hero has gone */
.backdrop { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.backdrop.on { opacity: 1; }
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--volt); color: #0a0c05; }
:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; border-radius: 6px; }
@view-transition { navigation: auto; }
/* page to page: the nav stays put, the page underneath lifts out and the next one settles in */
.nav { view-transition-name: nav; }
::view-transition-old(root) { animation: vtOut .22s var(--ease) both; }
::view-transition-new(root) { animation: vtIn .45s var(--ease-out) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(14px); } }
html { scrollbar-color: #2b2f25 var(--bg); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2b2f25; border: 3px solid var(--bg); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #454b3c; }

body::after { /* film grain over everything, very light */
  content: ""; position: fixed; inset: 0; z-index: 95; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip { position: absolute; left: 12px; top: -80px; z-index: 200; background: var(--volt); color: #0a0c05; padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); position: relative; }
.mono { font-family: var(--mono); }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; }
code { font-family: var(--mono); font-size: .9em; }

/* ---------- type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.eyebrow .dot, .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--volt); box-shadow: 0 0 0 0 rgba(212, 255, 58, .6), 0 0 12px var(--volt); animation: ping 2.4s var(--ease) infinite; flex: none; }
.eyebrow b { color: var(--volt); font-weight: 500; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(212, 255, 58, .55), 0 0 12px var(--volt); } 70%, 100% { box-shadow: 0 0 0 10px rgba(212, 255, 58, 0), 0 0 12px var(--volt); } }
.h2 { font: 600 clamp(36px, 5.4vw, 72px)/.98 var(--sans); letter-spacing: -.045em; text-wrap: balance; }
.h2 em { font-style: normal; color: var(--dim); }
.lede { color: var(--text-2); font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; max-width: 60ch; text-wrap: pretty; }
.sec { position: relative; padding: clamp(96px, 12vw, 168px) 0 0; }
.sec__head { display: grid; gap: 22px; margin-bottom: clamp(40px, 5vw, 68px); max-width: 860px; }
.sec__head--center { margin-inline: auto; text-align: center; justify-items: center; }

/* ---------- reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ---------- first-visit intro: the logo draws itself, then the page opens ---------- */
.intro { display: none; }
.intro-on .intro { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--bg); transition: opacity .8s var(--ease), visibility 0s .8s; }
.intro-on .intro::before { content: ""; position: absolute; width: 70vmin; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(157, 255, 46, .2), transparent 70%); opacity: 0; animation: introGlow 1.4s .35s var(--ease) forwards; }
html.intro-on:not(.intro-done) { overflow: hidden; }
.intro__mark { position: relative; width: clamp(120px, 19vmin, 200px); overflow: visible; transition: transform 1s var(--ease-out); }
.intro__mark .i-ring, .intro__mark .i-wire, .intro__mark .i-far, .intro__mark .i-near { stroke-dasharray: 1 2; stroke-dashoffset: 1.02; animation: drawIn .8s var(--ease) forwards; }
.intro__mark .i-ring { animation-duration: .5s; }
.intro__mark .i-wire { animation-delay: .3s; }
.intro__mark .i-far { animation-delay: .5s; }
.intro__mark .i-near { animation-delay: .62s; }
.intro__mark .i-tip { transform-box: fill-box; transform-origin: center; opacity: 0; animation: tipPop .6s 1.05s var(--ease-out) forwards; }
@keyframes drawIn { to { stroke-dashoffset: 0; } }
@keyframes tipPop { 0% { opacity: 0; transform: scale(0) rotate(-30deg); } 60% { opacity: 1; transform: scale(1.9) rotate(8deg); } 100% { opacity: 1; transform: none; } }
@keyframes introGlow { to { opacity: 1; } }
.intro-done .intro { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-done .intro__mark { transform: scale(2.4); }
.intro-on .hero .pill { animation-delay: 1.45s; }
.intro-on .hero__title .ln > span { animation-delay: 1.35s; }
.intro-on .hero__title .ln:nth-child(2) > span { animation-delay: 1.45s; }
.intro-on .hero__sub { animation-delay: 1.65s; }
.intro-on .hero__cta { animation-delay: 1.8s; }
.intro-on .hero__ticker { animation-delay: 1.9s; }
.intro-on .hero__meta { animation-delay: 1.95s; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 80; border-bottom: 1px solid transparent; transition: background .35s, border-color .35s, transform .5s var(--ease-out); }
.nav.tucked { transform: translateY(-100%); }
.nav.tucked:focus-within { transform: none; }
.nav.scrolled, .menu-open .nav { background: rgba(6, 6, 7, .72); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border-bottom-color: var(--line); }
.nav__in { display: flex; align-items: center; gap: 22px; height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; min-height: 44px; }
.brand__mark { width: 32px; height: 32px; overflow: visible; }
.brand__word { height: 19px; width: auto; }
.brand .ew-pulse { stroke-dasharray: 0 100; opacity: 0; }
.brand:hover .ew-pulse { animation: wirePulse 1.1s var(--ease) forwards; }
.brand:hover .ew-tip { animation: tipFlare 1.1s var(--ease) forwards; }
@keyframes wirePulse { 0% { stroke-dasharray: 0 100; stroke-dashoffset: 0; opacity: 1; } 60% { stroke-dasharray: 14 100; stroke-dashoffset: -80; opacity: 1; } 100% { stroke-dasharray: 0 100; stroke-dashoffset: -100; opacity: 0; } }
@keyframes tipFlare { 0%, 55% { transform: scale(1); } 75% { transform: scale(1.45) rotate(8deg); } 100% { transform: scale(1); } }
.ew-tip { transform-box: fill-box; transform-origin: center; }
.nav__links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav__links a { font: 500 14px/1 var(--sans); color: var(--muted); padding: 11px 12px; border-radius: 9px; transition: color .2s, background .2s; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--text); background: rgba(255, 255, 255, .045); }
.nav__gh { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); font: 500 13px/1 var(--sans); color: var(--text-2); transition: border-color .2s, color .2s, background .2s; }
.nav__gh:hover { color: var(--text); border-color: var(--line-3); background: rgba(255, 255, 255, .04); }
.nav__gh svg { width: 16px; height: 16px; }
.nav__gh span { font: 500 12px/1 var(--mono); color: var(--muted); }
.nav__mob { display: none; }
.nav__toggle { display: none; width: 44px; height: 44px; margin-left: auto; border-radius: 12px; border: 1px solid var(--line-2); align-items: center; justify-content: center; }
.nav__toggle i { position: relative; width: 16px; height: 1.5px; background: var(--text); transition: background .2s; }
.nav__toggle i::before, .nav__toggle i::after { content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--text); transition: transform .3s var(--ease-out); }
.nav__toggle i::before { transform: translateY(-5px); }
.nav__toggle i::after { transform: translateY(5px); }
.nav__toggle[aria-expanded="true"] i { background: transparent; }
.nav__toggle[aria-expanded="true"] i::before { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] i::after { transform: rotate(-45deg); }

/* ---------- buttons, pills ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 22px; border-radius: 13px; font: 600 15px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; isolation: isolate; transition: transform .35s var(--ease-out), box-shadow .3s, background .3s, border-color .3s, color .3s; will-change: transform; }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn .arrow { transition: transform .35s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--volt { color: #0a0c05; background: var(--volt); box-shadow: 0 0 0 1px rgba(212, 255, 58, .45), 0 12px 40px -12px rgba(157, 255, 46, .75), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn--volt::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--grad); opacity: 0; transition: opacity .35s; }
.btn--volt:hover { box-shadow: 0 0 0 1px rgba(212, 255, 58, .7), 0 16px 56px -10px rgba(157, 255, 46, .9), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn--volt:hover::before { opacity: 1; }
.btn--volt { overflow: hidden; }
.btn--volt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .6) 46%, transparent 62%); transform: translateX(-130%); transition: transform .8s var(--ease); pointer-events: none; }
.btn--volt:hover::after { transform: translateX(130%); }
.btn--ghost { color: var(--text); background: rgba(255, 255, 255, .035); border: 1px solid var(--line-2); }
.btn--ghost:hover { background: rgba(255, 255, 255, .07); border-color: var(--line-3); }
.btn--sm { height: 40px; padding: 0 15px; font-size: 14px; border-radius: 11px; }
.btn__count { font: 500 12px/1 var(--mono); color: var(--muted); padding: 5px 7px; border-radius: 7px; background: rgba(255, 255, 255, .06); }
.pill { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 15px 6px 13px; border-radius: 999px; font: 500 12.5px/1.3 var(--mono); letter-spacing: .03em; color: var(--text-2); background: rgba(212, 255, 58, .055); border: 1px solid rgba(212, 255, 58, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .3s, background .3s; }
.pill:hover { border-color: rgba(212, 255, 58, .45); background: rgba(212, 255, 58, .09); }
.pill b { color: var(--volt); font-weight: 500; }
.pill .sep { color: var(--dim); }
.pill__more { display: contents; }
@media (max-width: 480px) { .pill__more { display: none; } .hero3d .hero__meta { display: none; } }
.link { color: var(--text); border-bottom: 1px solid rgba(212, 255, 58, .45); transition: color .2s, border-color .2s; }
.link:hover { color: var(--volt); border-color: var(--volt); }
.kbd { font: 500 11px/1 var(--mono); color: var(--muted); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; padding: 4px 6px; }

/* ---------- hero ---------- */
.hero { position: relative; padding: calc(var(--nav-h) + clamp(56px, 9vw, 110px)) 0 0; overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__bg::before { content: ""; position: absolute; left: 50%; top: -18%; width: min(1400px, 140vw); aspect-ratio: 1.6; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(157, 255, 46, .16), rgba(61, 255, 122, .05) 45%, transparent 72%); filter: blur(10px); animation: breathe 9s ease-in-out infinite; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 72px 72px; background-position: center top; -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, #000 20%, transparent 75%); opacity: .55; }
@keyframes breathe { 0%, 100% { opacity: .85; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.06); } }
.hero__copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__title { margin-top: 28px; font: 600 clamp(46px, 8.6vw, 132px)/.9 var(--sans); letter-spacing: -.058em; }
.hero__title .ln { display: block; overflow: hidden; padding: .02em .08em .1em; margin-bottom: -.06em; }
.hero__title .ln > span { display: inline-block; animation: rise 1.15s var(--ease-out) both; }
.hero__title .ln:nth-child(2) > span { animation-delay: .1s; }
@keyframes rise { from { transform: translateY(110%) rotate(2deg); } to { transform: none; } }
.hero__sub { max-width: 660px; margin-top: 28px; animation: fadeUp 1s .35s var(--ease-out) both; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; animation: fadeUp 1s .5s var(--ease-out) both; }
.hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 26px; font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); animation: fadeUp 1s .65s var(--ease-out) both; }
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta svg { width: 13px; height: 13px; color: var(--lime); }
.hero .pill { animation: fadeUp 1s .1s var(--ease-out) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.stage { position: relative; height: clamp(330px, 40vw, 580px); margin-top: clamp(30px, 5vw, 70px); }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.stage__caption { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2; font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }

/* ---------- 3D hero ---------- */
.hero3d { position: relative; min-height: 100vh; min-height: 100svh; }
.gl .hero3d { height: 210vh; height: 210svh; }
.hero3d__sticky { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
.gl .hero3d__sticky { position: sticky; inset: auto; top: 0; height: 100vh; height: 100svh; }
.hero3d__fallback { position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 78%, rgba(157, 255, 46, .2), transparent 70%), radial-gradient(40% 40% at 50% 80%, rgba(61, 255, 122, .12), transparent 70%); }
.hero3d__fallback::after { content: ""; position: absolute; inset: 40% -20% -10%; background-image: linear-gradient(rgba(212, 255, 58, .2) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 255, 58, .2) 1px, transparent 1px); background-size: 60px 60px; transform: perspective(500px) rotateX(62deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(0deg, #000, transparent 80%); mask-image: linear-gradient(0deg, #000, transparent 80%); }
.hero3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s var(--ease-out); }
.gl-on .hero3d__canvas { opacity: 1; }
.gl-on .hero3d__fallback { opacity: 0; transition: opacity 1.4s; }
.hero3d__labels { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; }
.hl { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 10px; font: 500 12px/1 var(--mono); color: var(--muted); background: rgba(8, 8, 10, .62); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); white-space: nowrap; will-change: transform; transition: color .35s, border-color .35s, box-shadow .35s, background .35s; }
.hl--prompt { font-family: var(--sans); font-size: 13px; color: var(--text-2); }
.hl--prompt i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.hl--cap { flex-direction: column; align-items: flex-start; gap: 4px; padding: 7px 10px; }
.hl--cap b { font-weight: 500; font-size: 10.5px; color: var(--dim); }
.hl.hot { color: var(--text); border-color: rgba(212, 255, 58, .6); background: rgba(22, 28, 8, .8); box-shadow: 0 0 28px -6px rgba(212, 255, 58, .7); }
.hl--prompt.hot { border-color: rgba(107, 228, 255, .6); background: rgba(8, 22, 28, .8); box-shadow: 0 0 28px -6px rgba(107, 228, 255, .7); }
.hl--cap.hot b { color: var(--lime); }
.hero3d__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(6, 6, 7, .95) 0%, rgba(6, 6, 7, .84) 30%, rgba(6, 6, 7, .3) 48%, transparent 60%), linear-gradient(180deg, rgba(6, 6, 7, .6), transparent 18%, transparent 82%, rgba(6, 6, 7, .85)); }
.hero3d__copy { position: absolute; inset: 0 0 auto; z-index: 2; height: 100vh; height: 100svh; display: flex; align-items: center; padding-top: var(--nav-h); pointer-events: none; }
.hero3d .hero__copy { align-items: flex-start; text-align: left; }
.hero3d .hero__copy > * { max-width: 600px; }
.hero3d .hero__copy > .hero__title { max-width: 800px; margin-top: 26px; font-size: clamp(44px, 5.9vw, 94px); }
.hero3d .hero__sub { margin-top: 24px; max-width: 540px; }
.hero3d .hero__cta, .hero3d .hero__meta { justify-content: flex-start; }
.hero__ticker { pointer-events: auto; transition: border-color .3s, background .3s; }
.hero__ticker:hover { border-color: rgba(107, 228, 255, .5); background: rgba(107, 228, 255, .08); }
.hero__ticker { display: flex; align-items: center; gap: 12px; margin-top: 30px; max-width: 520px; min-height: 40px; padding: 9px 14px; border-radius: 12px; border: 1px solid rgba(107, 228, 255, .22); background: rgba(107, 228, 255, .045); font: 500 13px/1.3 var(--mono); color: var(--text-2); animation: fadeUp 1s .6s var(--ease-out) both; }
.hero__ticker-k { flex: none; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.hero__ticker .caret { display: inline-block; width: 7px; height: 1.05em; margin-left: -8px; background: var(--cyan); animation: blink 1s steps(1) infinite; }
.hero3d .hero__meta { margin-top: 22px; }
@media (max-width: 1023px) {
  .hero3d__copy { align-items: flex-start; padding-top: calc(var(--nav-h) + clamp(24px, 6vh, 56px)); }
  .hero3d .hero__copy { align-items: center; text-align: center; }
  .hero3d .hero__cta, .hero3d .hero__meta { justify-content: center; }
  .hero__ticker { display: none; }
  .hero3d__shade { background: linear-gradient(180deg, rgba(6, 6, 7, .92) 0%, rgba(6, 6, 7, .78) 46%, rgba(6, 6, 7, .1) 66%, transparent 76%, rgba(6, 6, 7, .8)); }
}
.hero3d__copy a, .hero3d__copy button { pointer-events: auto; }
.hero3d__hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: none; align-items: center; gap: 10px; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.gl .hero3d__hint { display: inline-flex; }
.hero3d__hint span { width: 18px; height: 28px; border-radius: 10px; border: 1.5px solid var(--line-3); position: relative; }
.hero3d__hint span::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: var(--volt); animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(8px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- marquee ---------- */
.marquee { position: relative; padding: 26px 0 34px; border-block: 1px solid var(--line); background: linear-gradient(180deg, rgba(6, 6, 7, .5), rgba(10, 10, 12, .72)); overflow: hidden; }
.marquee__label { text-align: center; font: 500 11.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-bottom: 18px; }
.marquee__row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__row + .marquee__row { margin-top: 14px; }
.marquee__track { display: flex; gap: 14px; width: max-content; animation: marquee var(--dur, 46s) linear infinite; }
.marquee__row--rev .marquee__track { animation-direction: reverse; --dur: 70s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 7px)); } }
.client { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); font: 600 16px/1 var(--sans); letter-spacing: -.02em; color: var(--text-2); white-space: nowrap; }
.client i { width: 8px; height: 8px; border-radius: 3px; background: var(--grad); }
.cap { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 13px; border-radius: 9px; font: 500 12.5px/1 var(--mono); color: var(--muted); background: rgba(255, 255, 255, .02); border: 1px solid var(--line); white-space: nowrap; }
.cap i, .fx { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--volt); }
.cap i.r, .fx.r { background: var(--cyan); }
.cap i.d, .fx.d { background: var(--red); }

/* ---------- stats ---------- */
.stats { border-bottom: 1px solid var(--line); }
.stats__grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.stat { position: relative; padding: 42px 22px 38px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat__fig { display: block; font: 600 clamp(40px, 4.6vw, 68px)/1 var(--sans); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.stat__fig sup { font-size: .42em; vertical-align: top; position: relative; top: .3em; margin-left: 2px; color: var(--volt); }
.stat__label { display: block; margin-top: 14px; font: 400 13px/1.45 var(--mono); color: var(--muted); max-width: 24ch; }
.stat::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 1px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-out); }
.stat:first-child::before { left: 0; }
.stats.in .stat::before { transform: scaleX(1); }

/* ---------- how it works ---------- */
.how__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.how__steps { display: grid; gap: 10px; }
.how__step { position: relative; display: block; width: 100%; text-align: left; padding: 22px 24px 24px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, .015); overflow: hidden; transition: border-color .4s, background .4s; }
.how__step:hover { border-color: var(--line-2); }
.how__step.is-active { border-color: rgba(212, 255, 58, .32); background: linear-gradient(180deg, rgba(212, 255, 58, .06), rgba(212, 255, 58, .015)); }
.how__top { display: flex; align-items: baseline; gap: 14px; }
.how__n { font: 500 12px/1 var(--mono); color: var(--dim); }
.how__step.is-active .how__n { color: var(--volt); }
.how__name { font: 600 24px/1.1 var(--mono); letter-spacing: -.03em; }
.how__text { display: block; margin-top: 10px; color: var(--muted); font-size: 15px; max-width: 46ch; }
.how__step .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--grad); transform: scaleX(0); transform-origin: left; }
.how__step.is-active .bar { animation: fill var(--t, 7s) linear forwards; }
.how.paused .how__step.is-active .bar { animation-play-state: paused; }
.how--scroll .how__step .bar, .how--scroll .how__step.is-active .bar { animation: none; transform: scaleX(var(--b, 0)); }
@keyframes fill { to { transform: scaleX(1); } }

.term { position: relative; border-radius: 18px; border: 1px solid var(--line-2); background: linear-gradient(180deg, #0d0e11, #08080a); box-shadow: 0 40px 120px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .5), 0 0 90px -40px rgba(157, 255, 46, .28); overflow: hidden; }
.term__bar { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); font: 500 12px/1 var(--mono); color: var(--muted); }
.dots { display: flex; gap: 7px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: #23242a; border: 1px solid #2f3037; }
.term__bar .copy { height: 26px; padding: 0 9px; font-size: 11px; }
.term__bar .tag { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--dim); }
.term__bar .tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.term__body { padding: 22px 22px 26px; min-height: 452px; font: 400 13.5px/1.7 var(--mono); color: var(--text-2); }
.term__label { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.term__label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.term pre { white-space: pre-wrap; word-break: break-word; font: inherit; }
.term__req { color: var(--text); min-height: 3.4em; }
.term__req .caret { display: inline-block; width: 8px; height: 1.15em; vertical-align: -3px; margin-left: 2px; background: var(--volt); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.term__res { margin-top: 22px; display: grid; gap: 10px; }
.j-k { color: #8fe6b4; } .j-s { color: #e9ffb0; } .j-n { color: #ffd88a; } .j-p { color: var(--dim); }
.c-cmd { color: var(--volt); } .c-flag { color: #8fe6b4; }
.row { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); opacity: 0; transform: translateY(8px); animation: rowIn .5s var(--ease-out) forwards; animation-delay: calc(var(--i) * 110ms); }
.row:first-child { border-color: rgba(212, 255, 58, .3); background: rgba(212, 255, 58, .04); }
.row b { font-weight: 500; color: var(--text); }
.row .fx { margin-top: 7px; }
.row .s { grid-column: 2; color: var(--muted); font-size: 12.5px; line-height: 1.5; font-family: var(--sans); }
.row .n { grid-column: 2; font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }
.row .n em { font-style: normal; color: var(--lime); }
@keyframes rowIn { to { opacity: 1; transform: none; } }

/* ---------- demo editor ---------- */
.editor { position: relative; border-radius: 20px; border: 1px solid var(--line-2); background: #09090b; overflow: hidden; box-shadow: 0 60px 160px -50px rgba(0, 0, 0, .95), 0 0 120px -50px rgba(157, 255, 46, .3); }
.editor__bar { display: flex; align-items: center; gap: 16px; height: 46px; padding: 0 16px; border-bottom: 1px solid var(--line); background: #0c0c0f; font: 500 12px/1 var(--mono); color: var(--muted); }
.editor__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.editor__status { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(61, 255, 122, .07); border: 1px solid rgba(61, 255, 122, .25); color: #b9ffcf; white-space: nowrap; }
.editor__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.editor__body { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); height: 600px; }
.chat__calls { overflow: hidden; }
.chat { display: flex; flex-direction: column; border-right: 1px solid var(--line); padding: 20px; min-width: 0; background: linear-gradient(180deg, #0b0b0e, #08080a); }
.chat__who { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.chat__prompt { padding-bottom: 18px; border-bottom: 1px dashed var(--line-2); }
.chat__prompt p { margin-top: 10px; font-size: 15.5px; line-height: 1.5; min-height: 4.5em; color: var(--text); }
.chat__prompt .caret { display: inline-block; width: 8px; height: 1.1em; vertical-align: -3px; margin-left: 2px; background: var(--volt); animation: blink 1s steps(1) infinite; }
.chat__calls { margin-top: 16px; display: grid; gap: 8px; font: 400 12.5px/1.45 var(--mono); }
.call { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.call.new { animation: rowIn .45s var(--ease-out) both; }
.call .ic { width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--dim); border-top-color: var(--volt); animation: spin .8s linear infinite; }
.call.done .ic { border: 0; animation: none; background: var(--green); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
@keyframes spin { to { transform: rotate(360deg); } }
.call .c { color: var(--text-2); overflow-wrap: anywhere; }
.call .c b { color: var(--volt); font-weight: 500; }
.call .c small { display: block; color: var(--dim); font-size: 11.5px; margin-top: 3px; }
.call .t { color: var(--dim); font-size: 11px; white-space: nowrap; }
.chat__foot { margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; gap: 12px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); border-top: 1px solid var(--line); }
.chat__foot b { color: var(--text-2); font-weight: 500; }
.viewport { position: relative; min-height: 360px; background: radial-gradient(120% 90% at 50% 0%, #0e1410 0%, #060607 70%); overflow: hidden; }
.viewport canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.viewport__hud { position: absolute; left: 14px; top: 12px; z-index: 2; display: flex; gap: 6px; font: 500 11px/1 var(--mono); color: var(--muted); }
.viewport__hud span { padding: 6px 8px; border-radius: 7px; background: rgba(0, 0, 0, .45); border: 1px solid var(--line); }
.viewport__stats { position: absolute; right: 14px; top: 12px; z-index: 2; font: 500 11px/1.6 var(--mono); color: var(--dim); text-align: right; }
.viewport__stats b { color: var(--text-2); font-weight: 500; }
.viewport__flash { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }
.viewport__flash.go { animation: flash .7s ease-out; }
@keyframes flash { 0% { opacity: .7; } 100% { opacity: 0; } }
.viewport__toast { position: absolute; left: 50%; bottom: 18px; z-index: 4; transform: translate(-50%, 12px); opacity: 0; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(10, 10, 12, .85); border: 1px solid rgba(212, 255, 58, .35); font: 500 12px/1 var(--mono); color: var(--text); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: opacity .4s, transform .5s var(--ease-out); white-space: nowrap; }
.viewport__toast.on { opacity: 1; transform: translate(-50%, 0); }
.viewport__toast i { width: 30px; height: 20px; border-radius: 4px; background: linear-gradient(135deg, #1d2a12, #3a5a10 60%, #d4ff3a); }
.demo__replay { position: absolute; right: 14px; bottom: 14px; z-index: 4; }
.demo__note { margin-top: 18px; font: 400 12.5px/1.6 var(--mono); color: var(--dim); text-align: center; }

/* ---------- explorer ---------- */
.explorer { position: relative; margin-top: 18px; border-radius: 22px; border: 1px solid var(--line-2); background: linear-gradient(180deg, #0c0c0f, #08080a); padding: 18px; }
.explorer__bar { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 18px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); transition: border-color .25s, box-shadow .25s; }
.explorer__bar:focus-within { border-color: rgba(212, 255, 58, .5); box-shadow: 0 0 0 4px rgba(212, 255, 58, .08); }
.explorer__bar svg { width: 18px; height: 18px; color: var(--volt); flex: none; }
.explorer__bar input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; font: 500 16px/1 var(--sans); color: var(--text); }
.explorer__bar input::placeholder { color: var(--dim); }
.explorer__bar input::-webkit-search-cancel-button { filter: grayscale(1) brightness(1.6); }
.explorer__count { font: 500 12px/1 var(--mono); color: var(--dim); white-space: nowrap; }
.explorer__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .02); font: 500 12.5px/1 var(--mono); color: var(--muted); transition: color .2s, border-color .2s, background .2s; white-space: nowrap; }
.chip:hover { color: var(--text); border-color: var(--line-3); }
.chip[aria-pressed="true"] { color: #0a0c05; background: var(--volt); border-color: var(--volt); }
.chip[aria-pressed="true"] .fx { background: #0a0c05 !important; }
.chip small { font-size: 11px; opacity: .65; }
.explorer__domains { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; max-height: 0; overflow: hidden; transition: max-height .5s var(--ease-out); }
.explorer__domains.open { max-height: 640px; }
.explorer__domains .chip { height: 30px; font-size: 12px; }
.explorer__list { margin-top: 16px; display: grid; gap: 8px; }
.res { border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .015); transition: border-color .25s, background .25s; animation: rowIn .4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 30ms); }
.res:hover, .res:focus-within { border-color: var(--line-2); background: rgba(255, 255, 255, .03); }
.res > button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; width: 100%; padding: 15px 16px; text-align: left; align-items: start; }
.res .fx { margin-top: 7px; }
.res__id { font: 500 14px/1.4 var(--mono); color: var(--text); overflow-wrap: anywhere; }
.res__id mark { background: rgba(212, 255, 58, .2); color: var(--volt); border-radius: 3px; }
.res__sum { grid-column: 2; color: var(--muted); font-size: 14px; line-height: 1.5; }
.res__tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; font: 500 11px/1 var(--mono); color: var(--dim); }
.res__tags span { padding: 5px 7px; border-radius: 6px; border: 1px solid var(--line); white-space: nowrap; }
.res__tags .consent { color: #ffd2cc; border-color: rgba(255, 107, 94, .35); background: rgba(255, 107, 94, .07); }
.res__more { display: none; padding: 0 16px 16px 37px; }
.res.open .res__more { display: block; }
.res__more p { color: var(--text-2); font-size: 13.5px; line-height: 1.55; margin-bottom: 10px; }
.res__more ul { margin: 0 0 12px; display: grid; gap: 4px; }
.res__more li { color: var(--muted); font-size: 13.5px; padding-left: 16px; position: relative; }
.res__more li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 1.5px; background: var(--lime); }
.res__call { position: relative; margin-top: 4px; padding: 12px 14px; border-radius: 10px; background: #060607; border: 1px solid var(--line); font: 400 12.5px/1.6 var(--mono); color: var(--text-2); overflow-x: auto; white-space: pre; }
.res__call .copy { position: absolute; right: 8px; top: 8px; }
.explorer__empty { padding: 34px 10px; text-align: center; color: var(--muted); }
.explorer__more { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; height: 50px; border-radius: 14px; border: 1px dashed var(--line-2); font: 500 14px/1 var(--sans); color: var(--text-2); transition: border-color .25s, color .25s, background .25s; }
.explorer__more:hover { color: var(--volt); border-color: rgba(212, 255, 58, .45); background: rgba(212, 255, 58, .04); }
.copy { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-3); font: 500 11.5px/1 var(--mono); color: var(--text-2); transition: color .2s, border-color .2s; }
.copy:hover { color: var(--volt); border-color: rgba(212, 255, 58, .5); }
.copy.ok { color: var(--green); border-color: rgba(61, 255, 122, .5); }
.copy svg { width: 13px; height: 13px; }

/* ---------- fab ---------- */
.fab__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.fab__copy .h2 { margin-top: 20px; }
.fab__copy .lede { margin-top: 22px; }
.vers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 32px; }
.vers li { position: relative; display: grid; place-items: center; width: 54px; height: 46px; border-radius: 12px; border: 1px solid var(--line-2); font: 600 15px/1 var(--mono); color: var(--dim); background: rgba(255, 255, 255, .02); transition: color .4s, border-color .4s, background .4s, box-shadow .4s; }
.vers li.lit { color: #0a0c05; background: var(--volt); border-color: var(--volt); box-shadow: 0 0 30px -6px rgba(212, 255, 58, .8); }
.vers li.on { color: var(--text); border-color: rgba(212, 255, 58, .35); background: rgba(212, 255, 58, .06); }
.fab__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.fab__note { margin-top: 18px; font: 400 12.5px/1.6 var(--mono); color: var(--dim); }
.fab__stage { position: relative; perspective: 1200px; display: grid; place-items: center; min-height: 520px; }
.fab__stage::before { content: ""; position: absolute; inset: 8% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(157, 255, 46, .2), transparent 70%); filter: blur(20px); animation: breathe2 6s ease-in-out infinite; }
@keyframes breathe2 { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.listing { position: relative; width: min(430px, 100%); border-radius: 22px; border: 1px solid var(--line-2); background: #0d0d10; overflow: hidden; transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -10deg)); transform-style: preserve-3d; transition: transform .6s var(--ease-out); box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .4); }
.listing::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .09) 45%, transparent 60%); transform: translateX(-120%); animation: sheen 6s var(--ease) infinite; }
@keyframes sheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.listing__media { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; background: radial-gradient(70% 90% at 50% 60%, rgba(157, 255, 46, .2), transparent 70%), linear-gradient(180deg, #0b0e08, #060607); border-bottom: 1px solid var(--line); overflow: hidden; }
.listing__media::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(212, 255, 58, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 255, 58, .07) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
.listing__media svg { position: relative; }
.ribbon { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 999px; font: 600 12px/1 var(--sans); color: #0a0c05; background: var(--volt); box-shadow: 0 0 24px -4px rgba(212, 255, 58, .8); }
.ribbon i { width: 6px; height: 6px; border-radius: 50%; background: #0a0c05; animation: blink 1.4s steps(1) infinite; }
.listing__body { padding: 20px 22px 22px; }
.listing__kind { font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.listing__title { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.listing__title b { font: 600 22px/1.1 var(--sans); letter-spacing: -.025em; }
.listing__title span { font: 500 12px/1 var(--mono); color: var(--muted); }
.listing__body p { margin-top: 8px; color: var(--muted); font-size: 14px; }
.listing__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.listing__meta span { font: 500 11px/1 var(--mono); color: var(--text-2); border: 1px solid var(--line-2); border-radius: 7px; padding: 6px 8px; }
.listing__btn { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; border-radius: 12px; border: 1px dashed rgba(212, 255, 58, .4); font: 600 14px/1 var(--sans); color: var(--volt); background: rgba(212, 255, 58, .05); }

/* ---------- section moods: a faint light in each section's own colour ---------- */
.routes, .security, .start, .how { isolation: isolate; }
.routes::before, .security::before, .start::before, .how::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: min(900px, 90vw); aspect-ratio: 1.4; border-radius: 50%; filter: blur(30px); opacity: .9; }
.routes::before { right: -10%; top: 20%; background: radial-gradient(closest-side, rgba(107, 228, 255, .09), transparent 70%); }
.security::before { right: -6%; top: 28%; background: radial-gradient(closest-side, rgba(255, 107, 94, .07), transparent 70%); }
.start::before { left: -12%; top: 30%; background: radial-gradient(closest-side, rgba(61, 255, 122, .07), transparent 70%); }
.how::before { left: -14%; top: 10%; background: radial-gradient(closest-side, rgba(157, 255, 46, .07), transparent 70%); }

/* ---------- routes ---------- */
.routes__diagram { position: relative; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent); padding: clamp(18px, 3vw, 36px); overflow: hidden; }
.routes__diagram svg { width: 100%; height: auto; overflow: visible; }
.r-box { fill: #0d0d10; stroke: var(--line-3); stroke-width: 1.2; }
.r-box--hot { fill: rgba(212, 255, 58, .06); stroke: rgba(212, 255, 58, .55); }
.r-t { font: 600 16px var(--sans); fill: var(--text); letter-spacing: -.01em; }
.r-s { font: 500 12px var(--mono); fill: var(--muted); }
.r-l { font: 500 11.5px var(--mono); fill: var(--lime); }
.r-wire { fill: none; stroke: rgba(212, 255, 58, .35); stroke-width: 1.6; }
.r-wire--b { stroke: rgba(107, 228, 255, .35); }
.r-dash { fill: none; stroke: var(--volt); stroke-width: 2; stroke-dasharray: 2 14; stroke-linecap: round; animation: dashflow 1.2s linear infinite; }
.r-dash--b { stroke: var(--cyan); }
@keyframes dashflow { to { stroke-dashoffset: -16; } }
.r-pkt { fill: var(--pale); filter: drop-shadow(0 0 6px var(--volt)); }
.routes__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.route { padding: 26px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255, 255, 255, .015); }
.route__k { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--volt); }
.route--b .route__k { color: var(--cyan); }
.route h3 { margin-top: 14px; font: 600 24px/1.15 var(--sans); letter-spacing: -.03em; }
.route dl { margin-top: 18px; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: 14.5px; }
.route dt { color: var(--dim); font: 500 12px/1.7 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.route dd { color: var(--text-2); }
.route code { color: var(--pale); }

/* ---------- security ---------- */
.sec-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 14px; }
.sec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.guard { position: relative; padding: 24px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255, 255, 255, .015); overflow: hidden; }
.guard svg { width: 26px; height: 26px; color: var(--volt); }
.guard h3 { margin-top: 18px; font: 600 18px/1.2 var(--sans); letter-spacing: -.02em; }
.guard p { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.guard--big { grid-column: span 2; display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: center; }
.guard__fig { grid-row: span 2; font: 600 clamp(56px, 7vw, 92px)/.9 var(--sans); letter-spacing: -.06em; }
.guard--big h3 { margin-top: 0; }
.guard--big p { margin-top: 0; }
.refusals { display: flex; flex-direction: column; border-radius: 20px; border: 1px solid var(--line-2); background: #08080a; overflow: hidden; }
.refusals__body { flex: 1; padding: 20px 20px 22px; font: 400 13px/1.7 var(--mono); color: var(--text-2); min-height: 380px; }
.ref { padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255, 107, 94, .25); background: rgba(255, 107, 94, .05); animation: rowIn .45s var(--ease-out) both; }
.ref + .ref { margin-top: 10px; }
.ref b { color: #ffb4aa; font-weight: 500; }
.ref p { color: var(--muted); font-family: var(--sans); font-size: 13.5px; margin-top: 6px; line-height: 1.5; }
.ref .call-line { color: var(--dim); font-size: 12px; overflow-wrap: anywhere; }
.ref--ok { border-color: rgba(61, 255, 122, .3); background: rgba(61, 255, 122, .05); }
.ref--ok b { color: #a6ffc4; }

/* ---------- quick start ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: step; }
.step { position: relative; padding: 26px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255, 255, 255, .015); }
.step__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(212, 255, 58, .4); background: rgba(212, 255, 58, .06); font: 600 14px/1 var(--mono); color: var(--volt); }
.step h3 { margin-top: 18px; font: 600 21px/1.2 var(--sans); letter-spacing: -.025em; }
.step p { margin-top: 10px; color: var(--muted); font-size: 14.5px; }
.step code { color: var(--text-2); background: rgba(255, 255, 255, .05); border: 1px solid var(--line); padding: 2px 6px; border-radius: 6px; font-size: 12.5px; }
.prompts { display: grid; gap: 8px; margin-top: 16px; }
.prompts button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); font-size: 14px; color: var(--text-2); text-align: left; transition: border-color .2s, color .2s; }
.prompts button:hover { border-color: rgba(212, 255, 58, .4); color: var(--text); }
.prompts button span { font: 500 11px/1 var(--mono); color: var(--dim); }
.prompts button.ok span { color: var(--green); }
.codebox { margin-top: 14px; border-radius: 20px; border: 1px solid var(--line-2); background: #08080a; overflow: hidden; }
.tabs { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; height: 38px; padding: 0 14px; border-radius: 10px; font: 500 13px/1 var(--sans); color: var(--muted); transition: color .2s, background .2s; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); background: rgba(255, 255, 255, .06); box-shadow: inset 0 -2px 0 var(--volt); }
.panel[hidden] { display: none; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 0; font: 500 12px/1.5 var(--mono); color: var(--dim); }
.panel__head b { color: var(--text-2); font-weight: 500; }
.panel pre { margin: 0; padding: 16px 18px 22px; overflow-x: auto; font: 400 13.5px/1.75 var(--mono); color: var(--text-2); }
.panel__note { padding: 0 18px 20px; color: var(--muted); font-size: 14px; }
.panel__note code { color: var(--text-2); }

/* ---------- faq ---------- */
.faq__list { display: grid; gap: 10px; max-width: 900px; margin: 0 auto; }
.faq__list details { border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .015); transition: border-color .3s, background .3s; }
.faq__list details[open] { border-color: var(--line-2); background: rgba(255, 255, 255, .03); }
.faq__list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; font: 600 17px/1.35 var(--sans); letter-spacing: -.015em; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: translateY(-3px) rotate(45deg); transition: transform .35s var(--ease-out), border-color .3s; }
.faq__list details[open] summary::after { transform: translateY(2px) rotate(-135deg); border-color: var(--volt); }
:root { interpolate-size: allow-keywords; }
.faq__list details::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ease-out), content-visibility .45s allow-discrete; }
.faq__list details[open]::details-content { block-size: auto; }
.faq__list .ans { padding: 0 22px 22px; color: var(--muted); font-size: 15.5px; line-height: 1.65; }
.faq__list .ans a { color: var(--text); border-bottom: 1px solid rgba(212, 255, 58, .45); }

/* ---------- final call to action ---------- */
.cta { position: relative; margin-top: clamp(110px, 14vw, 190px); padding: clamp(100px, 13vw, 170px) 0 clamp(130px, 16vw, 210px); text-align: center; overflow: hidden; isolation: isolate; border-top: 1px solid var(--line); }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(55% 70% at 50% 105%, rgba(157, 255, 46, .32), rgba(61, 255, 122, .07) 45%, transparent 72%); }
.cta__floor { position: absolute; left: -50%; right: -50%; bottom: -12%; height: 70%; z-index: -1; transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%; background-image: linear-gradient(rgba(212, 255, 58, .32) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 255, 58, .32) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(0deg, #000 8%, transparent 80%); mask-image: linear-gradient(0deg, #000 8%, transparent 80%); animation: floor 5s linear infinite; }
@keyframes floor { to { background-position: 0 64px; } }
.cta__stage { position: relative; width: clamp(220px, 26vw, 340px); aspect-ratio: 1; margin: 0 auto; }
.cta__stage canvas { position: absolute; inset: -30%; width: 160%; max-width: none; height: 160%; -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); opacity: 0; transition: opacity 1.2s; mix-blend-mode: screen; }
.cta__stage.gl-on canvas { opacity: 1; }
.cta__mark { position: absolute; inset: 18%; width: 64%; height: 64%; overflow: visible; transition: opacity .8s; }
.cta__stage.gl-on .cta__mark { opacity: 0; }
.listing__mark { width: 46%; height: auto; overflow: visible; }
.cta h2 { margin: 30px auto 0; font: 600 clamp(44px, 7.6vw, 116px)/.92 var(--sans); letter-spacing: -.058em; max-width: 13ch; text-wrap: balance; }
.cta .lede { margin: 24px auto 0; }
.cta .hero__cta { animation: none; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 64px 0 40px; background: linear-gradient(180deg, rgba(10, 10, 12, .55), var(--bg) 70%); }
.foot__grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 36px; }
.foot__about p { margin-top: 16px; color: var(--muted); font-size: 14px; max-width: 36ch; }
.foot h2 { font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; }
.foot li a { display: inline-flex; align-items: center; min-height: 34px; color: var(--muted); font-size: 14.5px; transition: color .2s; }
.foot li a:hover { color: var(--volt); }
.foot__giant { position: relative; margin-top: 64px; }
.foot__giant svg { display: block; width: 100%; height: auto; overflow: visible; }
.fw-line path { fill: none; stroke: rgba(232, 255, 208, .14); stroke-width: .7; }
.fw-fill { position: absolute; inset: 0; clip-path: inset(calc(100% - var(--e, 1) * 100%) 0 0 0); filter: drop-shadow(0 0 30px rgba(157, 255, 46, .25)); }
.foot__legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between; font: 400 12px/1.7 var(--mono); color: var(--dim); }
.foot__legal a { color: var(--muted); }
.foot__top { order: 3; width: 100%; text-align: right; }
@media (min-width: 900px) { .foot__top { order: 0; width: auto; } }
.foot__legal a:hover { color: var(--volt); }

/* ---------- inner pages ---------- */
.phead { position: relative; padding: calc(var(--nav-h) + clamp(56px, 8vw, 104px)) 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.phead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 15% 0%, rgba(157, 255, 46, .12), transparent 70%); }
.phead::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); opacity: .5; }
.phead__art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: .5; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 55%); mask-image: linear-gradient(90deg, transparent 10%, #000 55%); }
.phead__far { opacity: .35; }
.phead__near { opacity: .8; filter: drop-shadow(0 0 8px rgba(212, 255, 58, .5)); }
.phead__wire { stroke-dasharray: 2200; stroke-dashoffset: 2200; animation: wireIn 2.2s .2s var(--ease-out) forwards; }
.phead__flow { opacity: .5; animation: dashflow 1.6s linear infinite; }
@keyframes wireIn { to { stroke-dashoffset: 0; } }
@media (max-width: 900px) { .phead__art { opacity: .22; } }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 12.5px/1 var(--mono); color: var(--dim); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--volt); }
.phead__eyebrow { display: flex; margin-top: 26px; }
.phead h1 { margin-top: 18px; font: 600 clamp(38px, 6vw, 80px)/.98 var(--sans); letter-spacing: -.05em; max-width: 18ch; text-wrap: balance; animation: fadeUp .9s var(--ease-out) both; }
.phead .lede { margin-top: 22px; animation: fadeUp .9s .1s var(--ease-out) both; }
.phead__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 26px; font: 500 12px/1 var(--mono); color: var(--dim); }
.doc { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: clamp(32px, 5vw, 80px); padding-top: clamp(40px, 5vw, 64px); }
.toc { position: sticky; top: calc(var(--nav-h) + 28px); align-self: start; font-size: 13.5px; }
.toc h2 { font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; }
.toc ol { display: grid; gap: 2px; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 1px solid transparent; color: var(--muted); transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--text); }
.toc a.on { color: var(--volt); border-color: var(--volt); }
.prose { max-width: 760px; font-size: 16.5px; line-height: 1.72; color: var(--text-2); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.4em; font: 600 clamp(26px, 3vw, 34px)/1.15 var(--sans); letter-spacing: -.035em; color: var(--text); scroll-margin-top: calc(var(--nav-h) + 24px); }
.prose h3 { margin-top: 1.9em; font: 600 20px/1.3 var(--sans); letter-spacing: -.02em; color: var(--text); }
.prose h2 + *, .prose h3 + * { margin-top: .8em; }
.prose a { color: var(--text); border-bottom: 1px solid rgba(212, 255, 58, .3); background: linear-gradient(var(--volt), var(--volt)) 0 100% / 0 1px no-repeat; transition: color .2s, border-color .2s, background-size .4s var(--ease-out); }
.prose a:hover { background-size: 100% 1px; }
.prose a:hover { color: var(--volt); border-color: var(--volt); }
.prose strong { color: var(--text); font-weight: 600; }
.prose ul, .prose ol { display: grid; gap: .5em; }
.prose ul > li { position: relative; padding-left: 22px; }
.prose ul > li::before { content: ""; position: absolute; left: 4px; top: .78em; width: 7px; height: 1.6px; background: var(--lime); }
.prose ol { counter-reset: li; }
.prose ol > li { position: relative; padding-left: 34px; counter-increment: li; }
.prose ol > li::before { content: counter(li); position: absolute; left: 0; top: .15em; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; border: 1px solid rgba(212, 255, 58, .35); font: 600 11.5px/1 var(--mono); color: var(--volt); }
.prose :not(pre) > code { color: var(--pale); background: rgba(255, 255, 255, .05); border: 1px solid var(--line); padding: 2px 6px; border-radius: 6px; font-size: .85em; overflow-wrap: anywhere; }
.prose pre { position: relative; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line-2); background: #08080a; overflow-x: auto; font: 400 13.5px/1.7 var(--mono); color: var(--text-2); }
.prose pre .copy { position: absolute; right: 10px; top: 10px; }
.prose pre[data-lang]::before { content: attr(data-lang); position: absolute; right: 78px; top: 17px; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.prose pre { padding-right: 130px; }
.faq__list--doc { margin-top: 1em; }
.prose blockquote, .note { padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(212, 255, 58, .25); background: rgba(212, 255, 58, .04); color: var(--text-2); }
.note--warn { border-color: rgba(255, 107, 94, .3); background: rgba(255, 107, 94, .05); }
.note b:first-child { color: var(--text); }
.tbl { width: 100%; overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); }
.tbl table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tbl th, .tbl td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tbl th { font: 500 11.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); background: rgba(255, 255, 255, .02); white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td:first-child { color: var(--text); font-weight: 500; }
.yes { color: var(--green); } .no { color: var(--red); } .part { color: #ffd88a; }
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini { display: block; padding: 18px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .015); transition: border-color .25s, background .25s; }
.prose a.mini { border-bottom: 1px solid var(--line); }
.mini:hover, .prose a.mini:hover { border-color: rgba(212, 255, 58, .4); background: rgba(212, 255, 58, .03); color: inherit; }
.mini b { display: block; color: var(--text); font-weight: 600; }
.mini span { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.band { margin-top: clamp(72px, 9vw, 120px); }
.band__in { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(28px, 4vw, 48px); border-radius: 24px; border: 1px solid rgba(212, 255, 58, .25); background: radial-gradient(80% 140% at 100% 0%, rgba(157, 255, 46, .14), transparent 60%), #0b0b0d; overflow: hidden; }
.band h2 { font: 600 clamp(26px, 3.4vw, 40px)/1.05 var(--sans); letter-spacing: -.04em; max-width: 20ch; }
.band p { margin-top: 10px; color: var(--muted); }

/* ---------- brand page ---------- */
.brandkit { padding-top: clamp(32px, 4vw, 56px); }
.brandkit__h { margin: clamp(48px, 6vw, 80px) 0 20px; font: 600 clamp(26px, 3vw, 36px)/1.1 var(--sans); letter-spacing: -.035em; }
.brandkit__h:first-child { margin-top: 0; }
.kit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kit__item { margin: 0; border-radius: 20px; border: 1px solid var(--line); background: rgba(255, 255, 255, .015); overflow: hidden; }
.kit__item--wide { grid-column: span 2; }
.kit__art { display: grid; place-items: center; min-height: 220px; padding: 34px; background: radial-gradient(70% 90% at 50% 50%, rgba(157, 255, 46, .07), transparent 70%); }
.kit__art img { max-height: 120px; width: auto; }
.kit__item--wide .kit__art img { max-height: 76px; }
.kit__item--light .kit__art { background: #f4f5ef; }
.kit__art--black { background: #000; }
.kit__art--og { padding: 18px; }
.kit__art--og img { max-height: none; width: 100%; height: auto; border-radius: 12px; }
.kit__item figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); font-size: 14px; }
.kit__item figcaption b { font-weight: 500; color: var(--text-2); }
.kit__item figcaption span { flex: none; font: 500 12.5px/1.6 var(--mono); color: var(--dim); }
.kit__item figcaption a { color: var(--volt); }
.kit__item figcaption a:hover { text-decoration: underline; }
.swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.swatch { display: grid; gap: 4px; padding: 0 0 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .015); text-align: left; overflow: hidden; transition: border-color .25s, transform .4s var(--ease-out); }
.swatch:hover { border-color: var(--line-3); transform: translateY(-3px); }
.swatch i { height: 96px; margin-bottom: 10px; background: var(--c); border-bottom: 1px solid var(--line); }
.swatch b, .swatch span { padding: 0 14px; }
.swatch b { font-weight: 600; }
.swatch span { font: 500 12.5px/1 var(--mono); color: var(--muted); }
.swatch.ok span { color: var(--green); }
.swatch-grad { margin-top: 12px; height: 84px; border-radius: 16px; background: var(--grad); display: flex; align-items: flex-end; padding: 14px 16px; }
.swatch-grad span { font: 500 12.5px/1.4 var(--mono); color: #0a0c05; }
.types { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.type { display: flex; align-items: center; gap: 22px; padding: 26px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255, 255, 255, .015); }
.type__big { font: 600 72px/1 var(--sans); letter-spacing: -.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.type--mono .type__big { font-family: var(--mono); font-weight: 500; }
.type b:not(.type__big) { display: block; font-weight: 600; font-size: 18px; }
.type span { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.rules { display: grid; gap: 10px; max-width: 900px; }
.rules li { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .015); color: var(--text-2); }
.rules b { color: var(--volt); font-weight: 600; margin-right: 6px; }
@media (max-width: 1080px) { .kit { grid-template-columns: 1fr 1fr; } .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .kit { grid-template-columns: 1fr; } .kit__item--wide { grid-column: auto; } .types { grid-template-columns: 1fr; } .swatches { grid-template-columns: 1fr 1fr; } }

/* ---------- capabilities page ---------- */
.cat { padding-top: clamp(32px, 4vw, 48px); }
.cat .explorer { margin-top: 0; }
.cat__stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.cat__stats span { font: 500 12.5px/1 var(--mono); color: var(--muted); padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); }
.cat__stats b { color: var(--text); font-weight: 600; }

/* ---------- 404 ---------- */
.lost { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: calc(var(--nav-h) + 40px) var(--gut) 80px; }
.lost__stage { width: clamp(180px, 22vw, 260px); margin-bottom: 8px; }
.lost .eyebrow { justify-content: center; }
.lost__code { margin-top: 18px; font: 600 clamp(40px, 6.4vw, 88px)/.95 var(--sans); letter-spacing: -.05em; text-wrap: balance; }
.lost__links { max-width: 640px; margin: 30px auto 0; text-align: left; }
.lost p { margin: 22px auto 0; color: var(--muted); max-width: 46ch; }
.lost .hero__cta { animation: none; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 120; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; padding: 11px 16px; border-radius: 999px; background: var(--text); color: var(--bg); font: 600 13px/1 var(--sans); transition: opacity .3s, transform .4s var(--ease-out); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- scroll choreography (motion.js sets --p, --e, --pp, --f; reversible both ways) ---------- */
.scrollbar { position: fixed; left: 0; right: 0; top: 0; z-index: 90; height: 2px; transform-origin: left; transform: scaleX(0); background: var(--grad); box-shadow: 0 0 14px rgba(212, 255, 58, .7); pointer-events: none; }
.js.motion-on [data-reveal], .js.motion-on [data-reveal].in { --k: clamp(0, var(--e, 0) * 1.25 - var(--d, 0) * .09, 1); opacity: var(--k); transform: translate3d(0, calc((1 - var(--k)) * 60px), 0) scale(calc(.965 + var(--k) * .035)); transition: none; }
.motion-on .hero3d__copy { opacity: calc(1 - var(--pp, 0) * 2.8); transform: translate3d(0, calc(var(--pp, 0) * -22vh), 0); filter: blur(calc(var(--pp, 0) * 14px)); }
.motion-on .hero3d__hint { opacity: calc(1 - var(--pp, 0) * 6); }
.motion-on .marquee__row { transform: skewX(calc(var(--v, 0) * -10deg)); }

.manifesto { position: relative; }
.motion-on .manifesto { height: 260vh; }
.manifesto__stage { position: relative; display: flex; align-items: center; padding: 140px 0; overflow: hidden; }
.motion-on .manifesto__stage { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; }
.manifesto__stage::before { content: ""; position: absolute; inset: -10%; pointer-events: none; background: radial-gradient(38% 46% at calc(18% + var(--pp, 0) * 64%) calc(65% - var(--pp, 0) * 30%), rgba(157, 255, 46, .15), transparent 70%); }
.manifesto .eyebrow { margin-bottom: 30px; }
.manifesto__text { position: relative; font: 600 clamp(30px, 4.7vw, 76px)/1.06 var(--sans); letter-spacing: -.045em; max-width: 24ch; text-wrap: balance; }
.manifesto__text em { font-style: normal; }
.manifesto__text em .w { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.motion-on .manifesto .w { opacity: calc(.12 + .88 * clamp(0, var(--pp, 0) * (var(--n) + 8) - var(--i) - 2, 1)); filter: blur(calc((1 - clamp(0, var(--pp, 0) * (var(--n) + 8) - var(--i) - 2, 1)) * 3px)); }

@media (min-width: 1081px) {
  .motion-on .how__pin { height: 320vh; }
  .motion-on .how__stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: var(--nav-h); }
  .motion-on .demo__pin { height: 460vh; }
  .motion-on .demo__stage { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: var(--nav-h); }
  .motion-on .demo .editor__body { height: min(600px, calc(100vh - var(--nav-h) - 150px)); }
}
.demo__rail { display: none; align-items: center; gap: 14px; margin-top: 16px; font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.motion-on .demo__rail { display: flex; }
.demo__rail i { position: relative; flex: 1; height: 2px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.demo__rail b { position: absolute; inset: 0; background: var(--grad); transform-origin: left; transform: scaleX(var(--pp, 0)); }
.demo__rail span:last-child { color: var(--volt); min-width: 16ch; text-align: right; }
@media (max-width: 1080px) { .motion-on .demo__rail { display: none; } }

/* ---------- capability films ----------
   Each card is a short film (src/gl/reel.js): its canvas, an overlay of editor panels and labels sized in container
   units so it scales with the card, the copy, and the call log. With motion on, the stage pins and the scroll plays
   one film at a time; without it the cards sit in a row you can swipe. */
.caps__pin { position: relative; margin-top: 10px; }
.caps__stage { position: relative; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 10px 0 24px; }
.caps__stage::-webkit-scrollbar { display: none; }
.caps__track { position: relative; display: flex; gap: 22px; width: max-content; padding: 0 var(--gut); }
.film { --cw: min(88vw, 1100px); position: relative; flex: none; width: var(--cw); height: min(76svh, max(calc(var(--cw) * .62), 480px)); border-radius: 24px; overflow: hidden; isolation: isolate; container-type: size; scroll-snap-align: center; border: 1px solid var(--line-2); background: radial-gradient(90% 80% at 66% 40%, rgba(157, 255, 46, .1), transparent 62%), #050706; box-shadow: 0 40px 120px -40px rgba(0, 0, 0, .9); }
.motion-on .caps__stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(12px, 2vh, 20px); overflow: hidden; padding: var(--nav-h) 0 0; scroll-snap-type: none; }
.motion-on .caps__track { padding: 0; transform: translate3d(calc(var(--x, 0) * 1px), 0, 0); will-change: transform; }
.motion-on .film { --avail: calc(100svh - var(--nav-h) - 84px); --cw: min(86vw, calc(var(--avail) * 1.62), 1560px); height: min(var(--avail), calc(var(--cw) * 1.45)); transform: scale(calc(.86 + var(--f, 1) * .14)); opacity: calc(.28 + var(--f, 1) * .72); }
.film__gl { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.film::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(10deg, rgba(4, 5, 5, .94) 0%, rgba(4, 5, 5, .6) 24%, transparent 52%), radial-gradient(150% 120% at 55% 40%, transparent 55%, rgba(0, 0, 0, .5)); }
.film__copy { position: absolute; z-index: 3; left: clamp(18px, 4.4cqh, 46px); bottom: clamp(20px, 4.8cqh, 48px); width: min(42cqw, 560px); }
.film__no { display: block; font: 500 clamp(10px, 1.3cqh, 12.5px)/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--volt); }
.film h3 { margin-top: clamp(8px, 1.3cqh, 14px); font: 600 clamp(26px, 6cqh, 60px)/1 var(--sans); letter-spacing: -.04em; text-wrap: balance; }
.film p { margin-top: clamp(8px, 1.5cqh, 16px); color: var(--text-2); font-size: clamp(13px, 1.85cqh, 17px); line-height: 1.5; text-wrap: pretty; }
.film__n { display: inline-block; margin-top: clamp(10px, 1.9cqh, 20px); font: 500 clamp(11px, 1.4cqh, 13px)/1 var(--mono); color: var(--dim); }
.film__n b { color: var(--volt); font-weight: 500; }
.film__calls { position: absolute; z-index: 3; top: clamp(14px, 3.4cqh, 34px); right: clamp(14px, 3.4cqh, 34px); width: min(38cqw, 430px); list-style: none; display: grid; gap: clamp(5px, .8cqh, 8px); }
.film__calls li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: clamp(8px, 1.2cqh, 12px) clamp(10px, 1.5cqh, 15px); border-radius: clamp(9px, 1.3cqh, 13px); background: rgba(6, 8, 7, .84); border: 1px solid rgba(232, 255, 208, .1); font: 500 clamp(10.5px, 1.35cqh, 13px)/1.3 var(--mono); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.film__calls li:not(:last-child) { opacity: .5; }
.film__calls li > i { width: 8px; height: 8px; border-radius: 50%; background: var(--volt); box-shadow: 0 0 10px var(--volt); }
.film__calls .is-run > i { animation: blink 1s steps(2) infinite; }
.film__calls .is-done > i { background: var(--green); box-shadow: 0 0 8px var(--green); }
.film__calls b { font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.film__calls u { text-decoration: none; padding: 2px 6px; border-radius: 6px; font-size: .8em; color: var(--volt); background: rgba(212, 255, 58, .1); border: 1px solid rgba(212, 255, 58, .28); }
.film__calls small { grid-column: 2 / -1; color: var(--muted); font-size: .92em; }
.film__calls .is-done small { color: var(--lime); }
.film__calls .is-new { animation: callIn .5s var(--ease-out) both; }
@keyframes callIn { from { opacity: 0; transform: translateY(-10px) scale(.97); } }
.film__prog { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(232, 255, 208, .06); }
.film__prog::after { content: ""; position: absolute; inset: 0; background: var(--grad); transform-origin: left; transform: scaleX(var(--q, 0)); box-shadow: 0 0 14px rgba(212, 255, 58, .7); }
html:not(.motion-on) .film__prog { display: none; }
.film__cue { position: absolute; z-index: 3; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 14px; border-radius: 999px; background: rgba(6, 8, 7, .78); border: 1px solid rgba(212, 255, 58, .3); color: var(--text); font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; pointer-events: none; transform: translate(-50%, -50%) scale(calc(.94 + var(--f, 1) * .06)); opacity: clamp(0, (1 - var(--q, 0) * 30) * (var(--f, 1) * 2 - 1), 1); }
.film__cue i { width: 16px; height: 22px; border-radius: 9px; border: 1.5px solid var(--volt); position: relative; }
.film__cue i::after { content: ""; position: absolute; left: 50%; top: 4px; width: 2px; height: 5px; margin-left: -1px; border-radius: 2px; background: var(--volt); animation: wheel 1.6s var(--ease) infinite; }

/* the overlay: editor panels, node graphs, rows, labels and HUD pieces */
.film__ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; font-family: var(--mono); transition: box-shadow .5s; }
.film__ui > * { z-index: 1; }
.film__ui.is-pie { box-shadow: inset 0 0 0 2px rgba(212, 255, 58, .55), inset 0 0 50px rgba(212, 255, 58, .12); }
.fp { --P: 44cqh; position: absolute; top: clamp(14px, 3.4cqh, 34px); left: clamp(14px, 3.4cqh, 34px); width: calc(var(--P) * 1.54); border-radius: calc(var(--P) * .04); background: rgba(7, 9, 8, .86); border: 1px solid rgba(232, 255, 208, .1); box-shadow: 0 24px 70px rgba(0, 0, 0, .5); overflow: hidden; }
.fp__bar { display: flex; align-items: center; gap: calc(var(--P) * .014); height: calc(var(--P) * .085); padding: 0 calc(var(--P) * .032); border-bottom: 1px solid rgba(232, 255, 208, .07); font: 500 calc(var(--P) * .03)/1 var(--mono); color: var(--muted); white-space: nowrap; }
.fp__bar i { width: calc(var(--P) * .016); aspect-ratio: 1; border-radius: 50%; background: rgba(232, 255, 208, .18); }
.fp__bar span { margin-left: calc(var(--P) * .02); color: var(--text-2); }
.fp__bar em { margin-left: auto; font-style: normal; color: var(--dim); }
.fp.is-ok .fp__bar em, .fp.is-play .fp__bar em { color: var(--green); }
.fp__body { position: relative; height: var(--P); }
.fp--late { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .45s, transform .6s var(--ease-out); }
.fp--late.on { opacity: 1; transform: none; }
.fg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.fg path { fill: none; stroke: var(--text-2); stroke-width: .7; stroke-linecap: round; transition: opacity .3s; }
.fg path.is-data { stroke: var(--volt); }
.fg circle { fill: var(--pale); transition: opacity .2s; }
.fg__node { position: absolute; border-radius: calc(var(--P) * .025); background: rgba(16, 19, 17, .96); border: 1px solid rgba(232, 255, 208, .14); overflow: hidden; font-size: calc(var(--P) * .034); line-height: 1; opacity: 0; transform: scale(.82); transform-origin: 30% 50%; transition: opacity .35s, transform .5s var(--ease-out); }
.fg__node.on { opacity: 1; transform: none; }
.fg__node b { display: flex; align-items: center; height: calc(var(--P) * .09); padding: 0 .8em; font-weight: 600; color: var(--text); white-space: nowrap; background: linear-gradient(90deg, rgba(107, 228, 255, .26), rgba(107, 228, 255, .05)); }
.fg__node.ev b { background: linear-gradient(90deg, rgba(255, 107, 94, .34), rgba(255, 107, 94, .06)); }
.fg__node.tl b, .fg__node.par b { background: linear-gradient(90deg, rgba(212, 255, 58, .26), rgba(212, 255, 58, .05)); }
.fg__node.res b { background: linear-gradient(90deg, rgba(61, 255, 122, .28), rgba(61, 255, 122, .05)); }
.fg__node span { display: flex; align-items: center; height: calc(var(--P) * .068); padding: 0 .8em; color: var(--muted); white-space: nowrap; }
.fr { display: flex; align-items: center; gap: .8em; height: calc(var(--P) * .1); padding: 0 calc(var(--P) * .045); font-size: calc(var(--P) * .036); color: var(--muted); border-bottom: 1px solid rgba(232, 255, 208, .04); opacity: .14; white-space: nowrap; transition: opacity .3s, background .3s, color .3s; }
.fr.on { opacity: 1; }
.fr em { margin-left: auto; font-style: normal; color: var(--dim); }
.fr.hot { color: var(--text); background: linear-gradient(90deg, rgba(212, 255, 58, .14), transparent 75%); box-shadow: inset 2px 0 0 var(--volt); }
.fr.hot em { color: var(--volt); }
.fr.d1 { padding-left: calc(var(--P) * .085); }
.fr.d2 { padding-left: calc(var(--P) * .125); }
.fr.d3 { padding-left: calc(var(--P) * .165); }
.fp--log { --P: 26cqh; top: auto; left: auto; right: clamp(14px, 3.4cqh, 34px); bottom: clamp(20px, 4.8cqh, 48px); width: min(46cqw, 560px); }
.fp--log .fr { height: calc(var(--P) * .19); font-size: calc(var(--P) * .065); }
.fp--log .fr em { margin-left: 0; color: var(--text-2); }
.fp--log .fr.warn em { color: #ffb547; }
.flab { position: absolute; left: 0; top: 0; padding: 5px 9px; border-radius: 8px; background: rgba(7, 9, 8, .82); border: 1px solid rgba(232, 255, 208, .16); color: var(--text-2); font: 500 clamp(10px, 1.3cqh, 12.5px)/1 var(--mono); white-space: nowrap; opacity: 0; transition: opacity .3s, background .3s, border-color .3s, color .3s; }
.flab.on { opacity: 1; }
.flab.bad { background: rgba(255, 107, 94, .18); border-color: rgba(255, 107, 94, .65); color: #ffd2cc; }
.flab.ok { background: rgba(61, 255, 122, .14); border-color: rgba(61, 255, 122, .6); color: #cfffe0; }
.flab u { text-decoration: none; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--volt); color: #0a0c05; }
.flab.bump u { animation: tipPop .5s var(--ease-out); }
.fw-clock { position: absolute; left: clamp(18px, 4.4cqh, 46px); top: clamp(14px, 3.4cqh, 34px); opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s var(--ease-out); }
.fw-clock.on { opacity: 1; transform: none; }
.fw-clock small { display: block; font: 500 clamp(10px, 1.3cqh, 12px)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.fw-clock b { display: block; margin-top: 6px; font: 600 clamp(30px, 7.5cqh, 76px)/1 var(--mono); letter-spacing: -.04em; color: var(--text); font-variant-numeric: tabular-nums; text-shadow: 0 0 30px rgba(255, 200, 120, .35); }
.fhud, .fslot, .fkeys, .frender, .fperf { position: absolute; right: clamp(14px, 3.4cqh, 34px); bottom: clamp(20px, 4.8cqh, 48px); opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .6s var(--ease-out), box-shadow .3s; }
.fhud.on, .fslot.on, .fkeys.on, .frender.on, .fperf.on { opacity: 1; transform: none; }
.fhud { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(7, 9, 8, .82); border: 1px solid rgba(232, 255, 208, .12); font: 600 clamp(11px, 1.5cqh, 14px)/1 var(--mono); color: var(--text); }
.fhud i { position: relative; width: clamp(110px, 18cqh, 200px); height: 10px; border-radius: 6px; background: rgba(232, 255, 208, .1); overflow: hidden; }
.fhud b { position: absolute; inset: 0; background: linear-gradient(90deg, var(--green), var(--volt)); transform-origin: left; transform: scaleX(var(--hp, 1)); }
.fhud em { font-style: normal; color: var(--volt); }
.fslot { display: grid; place-content: center; gap: 4px; width: clamp(64px, 10cqh, 96px); aspect-ratio: 1; border-radius: 14px; background: rgba(7, 9, 8, .84); border: 1px solid rgba(107, 228, 255, .3); color: var(--text); font: 600 clamp(10px, 1.3cqh, 12px)/1.2 var(--mono); text-align: center; overflow: hidden; }
.fslot.hot { box-shadow: 0 0 0 2px var(--cyan), 0 0 30px rgba(107, 228, 255, .55); }
.fslot b { color: var(--cyan); font-weight: 600; }
.fslot i { position: absolute; inset: 0; background: conic-gradient(rgba(0, 0, 0, .62) calc(var(--cd, 0) * 360deg), transparent 0); }
.fkeys { display: flex; gap: 8px; }
.fkeys b { display: grid; place-items: center; min-width: clamp(40px, 6.4cqh, 62px); height: clamp(40px, 6.4cqh, 62px); padding: 0 12px; border-radius: 10px; background: rgba(12, 14, 13, .9); border: 1px solid rgba(232, 255, 208, .16); border-bottom-width: 4px; color: var(--muted); font: 600 clamp(11px, 1.5cqh, 14px)/1 var(--mono); transition: transform .08s, background .15s, color .15s, border-color .15s, box-shadow .15s; }
.fkeys b.wide { min-width: clamp(90px, 15cqh, 150px); }
.fkeys b.on { transform: translateY(2px); border-bottom-width: 2px; background: rgba(212, 255, 58, .18); border-color: var(--volt); color: var(--volt); box-shadow: 0 0 24px rgba(212, 255, 58, .35); }
.frender, .fperf { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 16px; width: min(40cqw, 420px); padding: 12px 14px; border-radius: 12px; background: rgba(7, 9, 8, .86); border: 1px solid rgba(232, 255, 208, .12); font: 500 clamp(10.5px, 1.35cqh, 13px)/1 var(--mono); color: var(--text-2); }
.frender { bottom: calc(11.5cqh + 12px); }
.frender b, .fperf b { color: var(--volt); font-weight: 500; }
.frender i { grid-column: 1 / -1; position: relative; height: 4px; border-radius: 3px; background: rgba(232, 255, 208, .1); overflow: hidden; }
.frender em { position: absolute; inset: 0; background: var(--grad); transform-origin: left; transform: scaleX(var(--r, 0)); }
.fperf { bottom: calc(clamp(20px, 4.8cqh, 48px) + 30cqh); width: min(46cqw, 560px); }
.fperf svg { grid-column: 1 / -1; width: 100%; height: clamp(26px, 5cqh, 46px); max-width: none; }
.fperf polyline { fill: none; stroke: var(--volt); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.fpill { position: absolute; left: clamp(14px, 3.4cqh, 34px); top: clamp(14px, 3.4cqh, 34px); display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(7, 9, 8, .86); border: 1px solid rgba(212, 255, 58, .35); color: var(--text); font: 500 clamp(10.5px, 1.35cqh, 13px)/1 var(--mono); opacity: 0; transition: opacity .4s; }
.fpill.on { opacity: 1; }
.fpill i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blink 1.2s steps(2) infinite; }
.fthumb { position: absolute; left: clamp(14px, 3.4cqh, 34px); top: calc(clamp(14px, 3.4cqh, 34px) + 46px); width: min(30cqw, 340px); padding: 8px; border-radius: 12px; background: rgba(7, 9, 8, .88); border: 1px solid rgba(232, 255, 208, .14); opacity: 0; transform: translate(60%, 40%) scale(1.7); transform-origin: top left; transition: opacity .5s, transform .9s var(--ease-out); }
.fthumb.on { opacity: 1; transform: none; }
.fthumb canvas { width: 100%; height: auto; border-radius: 6px; }
.fthumb span { display: block; margin-top: 8px; font: 500 clamp(10px, 1.3cqh, 12.5px)/1.35 var(--mono); color: var(--lime); white-space: normal; }
.fthumb span::before { content: "✓ "; }
.fflash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.fbars i { position: absolute; left: 0; right: 0; height: 11.5cqh; background: #000; transition: transform .6s var(--ease-out); }
.fbars i:first-child { top: 0; transform: translateY(-100%); }
.fbars i:last-child { bottom: 0; transform: translateY(100%); }
.fbars.on i { transform: none; }
.fbars, .fflash { z-index: 0 !important; }
.fbars { position: absolute; inset: 0; }
.fstamp, .fshot { position: absolute; left: 70%; top: 46%; width: 46cqh; height: 56cqh; transform: translate(-50%, -50%) scale(1.08); opacity: 0; transition: opacity .3s, transform .5s var(--ease-out); }
.fshot { left: 50%; top: 50%; width: 62%; height: 64%; }
.fstamp.on, .fshot.on { opacity: 1; transform: translate(-50%, -50%); }
.fstamp i, .fshot i { position: absolute; width: 24px; height: 24px; border: 2px solid var(--pale); filter: drop-shadow(0 0 6px rgba(212, 255, 58, .7)); }
.fstamp i:nth-child(1), .fshot i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.fstamp i:nth-child(2), .fshot i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.fstamp i:nth-child(3), .fshot i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.fstamp i:nth-child(4), .fshot i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.fstamp b { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); padding: 5px 10px; border-radius: 8px; background: var(--pale); color: #0a0c05; font: 600 12px/1 var(--mono); white-space: nowrap; }
.fseq { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(4, 1fr); padding: calc(var(--P) * .04) 0; }
.fseq__row { display: grid; grid-template-columns: 34% 1fr; align-items: center; border-bottom: 1px solid rgba(232, 255, 208, .05); font-size: calc(var(--P) * .036); color: var(--text-2); }
.fseq__row span { padding-left: calc(var(--P) * .05); white-space: nowrap; }
.fseq__row > i { position: relative; height: 54%; margin-right: calc(var(--P) * .06); border-radius: 4px; background: rgba(232, 255, 208, .04); }
.fseq__row b { position: absolute; top: 50%; width: calc(var(--P) * .05); aspect-ratio: 1; background: var(--volt); box-shadow: 0 0 10px rgba(212, 255, 58, .7); transform: translate(-50%, -50%) rotate(45deg) scale(0); transition: transform .35s var(--ease-out); }
.fseq__row b.on { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
.fseq__wave { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; fill: var(--cyan); opacity: .85; clip-path: inset(0 calc((1 - var(--w, 0)) * 100%) 0 0); }
.fseq__head { position: absolute; top: 0; bottom: 0; left: calc(34% + (66% - var(--P) * .06) * var(--s, 0)); width: 2px; background: var(--red); box-shadow: 0 0 10px var(--red); }
.ftab { position: absolute; inset: 0; padding: calc(var(--P) * .03) calc(var(--P) * .045); font-size: calc(var(--P) * .036); }
.ftab__row { display: grid; grid-template-columns: 1.5fr .8fr .8fr 0fr; align-items: center; height: calc(var(--P) * .14); border-bottom: 1px solid rgba(232, 255, 208, .05); color: var(--text-2); white-space: nowrap; opacity: 0; transform: translateX(-10px); transition: opacity .35s, transform .45s var(--ease-out), grid-template-columns .7s var(--ease-out); }
.ftab__row.on, .ftab__head { opacity: 1; transform: none; }
.ftab__head { color: var(--dim); font-size: .88em; letter-spacing: .06em; text-transform: uppercase; }
.ftab .rar { overflow: hidden; }
.ftab.has-rarity .ftab__row { grid-template-columns: 1.5fr .7fr .7fr 1fr; }
.ftab u { text-decoration: none; padding: 3px 8px; border-radius: 6px; font-size: .9em; }
.r-common { background: rgba(232, 255, 208, .08); color: var(--text-2); }
.r-rare { background: rgba(107, 228, 255, .14); color: var(--cyan); }
.r-epic { background: rgba(212, 255, 58, .16); color: var(--volt); }
/* a portrait card keeps the film, the copy and the newest call, and drops the side panels */
@container (max-aspect-ratio: 1/1) {
  .film__copy { width: auto; right: clamp(18px, 4.4cqh, 46px); }
  .film__calls { left: 14px; width: auto; }
  .film__calls li:not(:last-child) { display: none; }
  .fp, .fthumb, .fperf, .fslot, .fkeys, .fhud, .fw-clock, .frender { display: none; }
  .fstamp { left: 50%; }
}

/* the bar under the reel: the film at the centre, and a segment per film that fills as it plays */
.caps__bar { display: flex; align-items: center; gap: clamp(12px, 2vw, 22px); font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.caps__at b { color: var(--text); font-weight: 500; }
.caps__name { min-width: 22ch; color: var(--text-2); }
.caps__ticks { flex: 1; display: flex; gap: 6px; }
.caps__ticks button { position: relative; flex: 1; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; }
.caps__ticks i { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: var(--line-2); overflow: hidden; transition: background .3s; }
.caps__ticks i::after { content: ""; position: absolute; inset: 0; background: var(--grad); transform-origin: left; transform: scaleX(var(--q, 0)); }
.caps__ticks button:hover i, .caps__ticks .on i { background: var(--line-3); }
.caps__ticks button:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; border-radius: 4px; }
html:not(.motion-on) .caps__bar { display: none; }
@media (max-width: 680px) { .caps__name, .caps__hint { display: none; } }

.motion-on .fab__stage .listing { transform: translate3d(0, calc((1 - var(--e, 1)) * 90px), 0) rotateX(calc(var(--rx, 6deg) + (1 - var(--e, 1)) * 34deg)) rotateY(calc(var(--ry, -10deg) - (1 - var(--e, 1)) * 26deg)) scale(calc(.82 + var(--e, 1) * .18)); transition: none; }
.motion-on .fab__stage::before { opacity: var(--e, 1); }
.motion-on .routes__diagram .r-wire { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--e, 1)); }
.motion-on .routes__diagram .r-dash, .motion-on .routes__diagram .r-pkt { opacity: clamp(0, var(--e, 1) * 2 - 1, 1); }
.motion-on .routes__diagram .r-box, .motion-on .routes__diagram text { opacity: clamp(.2, var(--e, 1) * 1.6, 1); }
.motion-on .guard--big .guard__fig { display: inline-block; transform: scale(calc(.55 + var(--e, 1) * .45)); transform-origin: left center; }
.motion-on .cta .cta__stage { transform: scale(calc(.5 + var(--e, 1) * .5)) rotate(calc((1 - var(--e, 1)) * -14deg)); }
.motion-on .cta h2 { letter-spacing: calc(-.058em + (1 - var(--e, 1)) * .08em); }
.motion-on .cta__floor { opacity: var(--e, 1); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .stats__grid { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(4) { border-left: 0; }
  .stat:nth-child(n+4) { border-top: 1px solid var(--line); }
  .how__grid { grid-template-columns: 1fr; }
  .editor__body { grid-template-columns: 1fr; }
  .chat { border-right: 0; border-bottom: 1px solid var(--line); min-height: 300px; }
  .viewport { min-height: 380px; }
  .fab__grid { grid-template-columns: 1fr; }
  .fab__stage { min-height: 440px; }
  .sec-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .doc { grid-template-columns: 1fr; }
  .toc { display: none; }
}
@media (max-width: 960px) {
  .nav__links { position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gut) 20px; background: rgba(6, 6, 7, .96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); display: none; }
  .nav__links.open { display: flex; }
  .nav__links a { padding: 16px 4px; border-radius: 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .nav__toggle { display: inline-flex; }
  .nav__links .nav__mob { display: block; }
  .nav__in > .nav__gh { display: none; }
  .routes__cards { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .stat { padding: 30px 16px 28px; }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:nth-child(4) { border-left: 1px solid var(--line); }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .stat:last-child { grid-column: span 2; }
  .stat::before { left: 16px; right: 16px; }
  .sec-list { grid-template-columns: 1fr; }
  .guard--big { grid-column: auto; grid-template-columns: 1fr; }
  .guard__fig { grid-row: auto; }
  .hero__cta .btn { flex: 1 1 100%; }
  .res > button { grid-template-columns: auto minmax(0, 1fr); }
  .res__tags { grid-column: 2; justify-content: flex-start; }
  .res__more { padding-left: 16px; }
  .term__body { padding: 18px 16px 20px; min-height: 0; font-size: 12.5px; }
  .cards2 { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .explorer { padding: 12px; }
  .explorer__count { display: none; }
  .editor__title { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js.motion-on [data-reveal], .js.motion-on [data-reveal].in { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}