:root{--nav-h:57px;--bg:#050605;--surface:#121512;--surface-2:#0c0e0c;--text:#f4f6f3;--muted:#a3aaa2;--line:rgba(255,255,255,.08);--accent:#7CF03C;--btn-fg:#0a1a04;--est:#e0a93b;--bad:#ff8a7a;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Segoe UI",Roboto,Arial,system-ui,sans-serif;font-size:16px;line-height:1.55;letter-spacing:-.011em;overflow-x:hidden}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.narrow{max-width:640px}
a{color:var(--accent)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--surface);padding:8px;z-index:10}
.top{position:sticky;top:0;z-index:20;height:var(--nav-h);background:rgba(5,6,5,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);transition:background-color .2s,border-color .2s}
/* over the hero the nav sits on the video's own top scrim: no fill, no blur (hero.js toggles .on-hero) */
.top.on-hero{background:transparent;border-color:transparent;backdrop-filter:none}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.brand{font-weight:850;letter-spacing:-.03em;color:var(--text);text-decoration:none}.brand span{color:var(--accent)}
.top nav{display:flex;gap:16px;align-items:center}
.top nav a{color:var(--muted);text-decoration:none;font-size:14px}
.top nav a:not(.pill){display:none}
.pill{background:var(--accent);color:var(--btn-fg)!important;padding:7px 14px;border-radius:999px;font-weight:700}
@media(min-width:760px){.top nav a:not(.pill){display:inline}}
section{padding:56px 0;border-top:1px solid var(--line)}
h1,h2,h3{font-weight:850;letter-spacing:-.035em;line-height:1.1;margin:0 0 14px}
h1{font-size:clamp(30px,6vw,56px);max-width:20ch}
h2{font-size:clamp(24px,4vw,36px)}
h3{font-size:18px;letter-spacing:-.02em}
.kick{color:var(--accent);font-weight:700;margin:0 0 12px;font-size:14px}
.lead{color:var(--muted);font-size:18px;max-width:60ch}
.sec-lead{color:var(--muted);max-width:62ch;margin:0 0 24px}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-block;background:var(--accent);color:var(--btn-fg);border:0;border-radius:999px;padding:12px 22px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.btn:hover{box-shadow:0 0 24px rgba(124,240,60,.3)}
.btn.ghost{background:rgba(255,255,255,.04);color:var(--text);border:1px solid rgba(255,255,255,.1)}
.btn.small{padding:8px 16px}
.btn[disabled]{opacity:.5;cursor:default;box-shadow:none}
.grid{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,1fr)}}
.cards li{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px}
.cards p{margin:0;color:var(--muted)}
.plain{padding-left:20px;color:var(--muted);max-width:68ch}.plain li{margin-bottom:10px}
.cols{display:grid;gap:28px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fields{padding-left:20px;color:var(--muted)}
code{font-family:Consolas,Menlo,monospace;font-size:.9em;color:var(--text);background:var(--surface-2);padding:1px 5px;border-radius:5px;overflow-wrap:anywhere}
pre{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px;overflow-x:auto;max-width:100%}
pre code{background:none;padding:0;font-size:13px;overflow-wrap:normal}
/* demo */
.demo{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.pane{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;overflow:hidden;min-width:0}
.pane-video,.pane-scene{aspect-ratio:16/9}
.pane-video img,.pane-video video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.pane-graph{display:flex;flex-direction:column}
.graph{height:220px;overflow:hidden}
.graph-key{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted);padding:6px 12px 0}
.graph-key i{display:inline-block;width:10px;height:3px;margin-right:5px;vertical-align:middle}
.readout{font-family:Consolas,Menlo,monospace;font-size:12px;color:var(--muted);padding:8px 12px;min-height:5em}
.pane-scene canvas{display:block;touch-action:none}
.controls{display:flex;gap:10px;align-items:center;order:1}
#demo-play{min-width:5.5em;text-align:center} /* Play and Pause the same width: the label flips when the explorer starts on screen, and a width change shifted the scrub bar (CLS) */
.pane-graph,.pane-scene{order:2}
.controls input[type=range]{flex:1;min-width:0;accent-color:var(--accent)}
select,input,textarea{font:inherit}
.controls select{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:6px}
.demo [hidden]{display:none!important}
.demo-note{color:var(--muted);font-size:14px;margin:10px 0 0}
@media(min-width:900px){
  .demo{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"video scene" "graph graph" "controls controls"}
  .pane-video{grid-area:video}.pane-scene{grid-area:scene}.controls{grid-area:controls}
  .pane-graph{grid-area:graph;display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto 1fr}
  .graph{grid-row:1/3;height:250px}
  .graph-key,.readout{grid-column:2;border-left:1px solid var(--line)}
  .demo.no-webgl{grid-template-areas:"video video" "graph graph" "controls controls"}
  .demo.no-webgl .pane-video{justify-self:center;width:100%;max-width:720px}
}
.legend{color:var(--muted);font-size:14px;margin-top:14px}
.sw{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 6px 0 12px;vertical-align:middle}
.sw:first-child{margin-left:0}
.sw.head+.sw,.sw.left+.sw{margin-left:-3px}
/* device colours match DEVICES in js/demo.js */
.sw.head{background:#7CF03C}.sw.left{background:#4cc9f0}.sw.right{background:#f472b6}.sw.est{background:var(--est)}
/* stats */
.stats{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
@media(min-width:700px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stats div{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:18px}
.stats dt{color:var(--muted);font-size:13px}
.stats dd{margin:4px 0 0;font-size:20px;font-weight:800;letter-spacing:-.03em}
#catalog:has(#stats[hidden]){display:none}
/* form */
form label{display:block;margin-bottom:16px;font-weight:600}
form input:not([type=checkbox]),form select,form textarea{display:block;width:100%;margin-top:6px;background:var(--surface);color:var(--text);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:10px 12px}
form input:focus,form select:focus,form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
fieldset{border:1px solid var(--line);border-radius:12px;margin:0 0 16px;padding:10px 14px}
legend{font-weight:600;padding:0 6px}
label.check{font-weight:400;display:flex;gap:8px;align-items:flex-start;margin-bottom:8px}
label.check input{margin-top:5px}
.err{display:block;color:var(--bad);font-size:14px;font-weight:400}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.privacy{color:var(--muted);font-size:14px}
#request-status{margin-top:12px;color:var(--muted)}
.thanks{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px}
footer{border-top:1px solid var(--line);padding:32px 0;color:var(--muted);font-size:14px}
.foot p{margin:4px 0}
/* ---------- fonts (self-hosted, OFL; see fonts/LICENSE.txt) ---------- */
@font-face{font-family:"Inter";src:url(fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-display:optional}
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107.4%;ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%}
@font-face{font-family:"HUD Mono";src:url(fonts/hud-mono.woff) format("woff");font-weight:400;font-display:swap}
:root{--void:#050605;--ink:#f4f6f3;--dim:#6d756c;--hair:rgba(244,246,243,.10);--head:#7CF03C;--left:#4cc9f0;--right:#f472b6;
  --sans:"Inter","Inter Fallback","Segoe UI",Roboto,Arial,system-ui,sans-serif;--mono:"HUD Mono","Cascadia Mono",Consolas,ui-monospace,monospace}
body{font-family:var(--sans)}

/* ---------- hero: sticky stage in a 240svh track (motion spec v2) ----------
   Only transform and opacity change at runtime (js/hero.js). Phones and reduced motion don't pin. */
.hero-track{position:relative;height:240svh;margin-top:calc(-1 * var(--nav-h))}
.stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;background:var(--void);isolation:isolate;padding:0;border:0;color:var(--ink)}
.h-screen,.h-band{position:absolute;inset:0}
.h-vwrap{position:absolute;inset:0;overflow:hidden;transform-origin:50% 50%;border-radius:16px;box-shadow:0 0 0 1px var(--hair);background:var(--void)}
.h-poster img,.h-video video,.h-still{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.h-video video{opacity:0;transition:opacity .4s cubic-bezier(.4,0,.2,1)}
.h-video video.on{opacity:1}
/* held on the strike frame under the still (js/hero.js): visible at once, so rVFC reports it */
.h-video video.cut{transition:none}
.h-still{transition:opacity .4s cubic-bezier(.4,0,.2,1)}.h-still.gone{opacity:0}
.h-scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(5,6,5,.88) 0%,rgba(5,6,5,.84) 30%,rgba(5,6,5,.40) 44%,rgba(5,6,5,.15) 53%,rgba(5,6,5,.15) 70%,rgba(5,6,5,.30) 100%),
  linear-gradient(180deg,rgba(5,6,5,.62) 0%,rgba(5,6,5,0) 13%,rgba(5,6,5,0) 76%,rgba(5,6,5,.80) 100%)}
.h-dark{position:absolute;inset:0;background:#000;opacity:0}
.h-figscrim{position:absolute;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;z-index:2;opacity:0;
  background:radial-gradient(closest-side,rgba(5,6,5,.55),rgba(5,6,5,.35) 55%,rgba(5,6,5,0))}
.h-figure,.h-stream{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.h-figure{z-index:3}.h-stream{z-index:5}
.h-leaders{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible;opacity:0}
.h-leaders line{stroke-width:1;stroke-linecap:round}
.h-leaders line.k{stroke:rgba(5,6,5,.7);stroke-width:4}
.h-leaders .lh{stroke:var(--head)}.h-leaders .ll{stroke:var(--left)}.h-leaders .lr{stroke:var(--right)}
.h-legend{position:absolute;left:0;top:0;z-index:5;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);opacity:0;white-space:nowrap}
.h-legend span{display:flex;align-items:center;gap:8px}
.h-legend .trio{display:inline-flex;gap:4px}
.h-legend .dot{width:8px;height:8px;border-radius:50%}
.h-legend .dot.head{background:var(--head)}.h-legend .dot.left{background:var(--left)}.h-legend .dot.right{background:var(--right)}
.h-legend .dash{width:20px;height:0;border-top:1px dashed var(--est);opacity:.6}
.h-clip{display:none}
/* copy column */
.h-copy{position:absolute;z-index:6;left:72px;top:clamp(84px,20.5svh,184px);width:min(690px,54vw)}
.stage .kick{font-size:15px;font-weight:600;color:var(--accent);margin:0 0 18px;display:flex;align-items:center;gap:10px}
.stage .kick i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.h-h1,.h-closeline{font-weight:850;letter-spacing:-.04em;line-height:.98;margin:0;text-wrap:balance;max-width:none}
.h-h1{font-size:clamp(40px,min(4.3vw,6.9svh),62px)}
.stage .lead{color:#c3c9c2;margin:22px 0 0;line-height:1.5;font-size:18px;max-width:52ch;text-wrap:pretty}
.stage .ctas{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.stage .btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 24px;font-size:16px;letter-spacing:-.01em;white-space:nowrap}
.stage .btn.pri{box-shadow:0 0 0 1px rgba(124,240,60,.5),0 10px 40px -8px rgba(124,240,60,.45)}
.stage .btn.sec{background:rgba(5,6,5,.5);color:var(--ink);border:0;box-shadow:inset 0 0 0 1px rgba(244,246,243,.22)}
.stage .btn.small{height:auto;padding:8px 16px;font-size:14px}
.segs{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:7px;font-size:13px;font-weight:500;color:var(--muted)}
.segs em{font-style:normal;color:var(--ink)}
.cred{margin:18px 0 0;font-size:12.5px;color:#858d84} /* B5: --dim gave 4.26:1 on the phone void (axe); this is 5.5:1 */
.cred .short{display:none}
/* rail, cue, beat titles, facts */
.h-rail{position:absolute;z-index:6;left:72px;right:360px;bottom:24px;display:flex;gap:28px;align-items:center;font-size:12px;color:var(--muted);white-space:nowrap}
.h-rail .h-cliplabel{color:#c3c9c2}
.h-rail .k span{font:400 12px var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);margin-left:6px}
/* fixed number boxes: '—' to '1033' / '14.497' (and the HUD Mono swap) must not move the bar (CLS 0) */
.h-rail .h-fr{display:inline-block;width:2.6em}.h-rail .h-t{display:inline-block;width:3.8em;text-align:right}
.h-rail .h-bar{flex:1;min-width:60px;height:1px;background:rgba(244,246,243,.18);position:relative}
.h-rail .h-bar i{position:absolute;left:0;top:0;bottom:0;width:100%;background:rgba(124,240,60,.45);transform-origin:0 0;transform:scaleX(0)}
.h-cue{position:absolute;z-index:6;left:calc(100% - 328px);bottom:22px;margin:0;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
.h-cue i{width:1px;height:14px;background:linear-gradient(var(--accent),transparent)}
.h-beat{position:absolute;z-index:6;left:72px;top:96px;margin:0;font-size:15px;font-weight:700;color:var(--muted);letter-spacing:-.015em;opacity:0}
.h-facts{position:absolute;z-index:6;right:72px;top:104px;width:390px;opacity:0}
.h-facts p{margin:0;font-size:20px;font-weight:700;letter-spacing:-.025em;line-height:1.28}
.h-facts p span{color:var(--muted);font-weight:500}
/* beat 3 title card */
.h-close{position:absolute;z-index:6;left:72px;top:clamp(110px,21.8svh,196px);width:min(780px,60vw);pointer-events:none}
/* it overlaps the copy column: only a shown closing lead takes clicks (h-sub ships data-off + inert) */
.h-sub:not([data-off]){pointer-events:auto}
.h-closeline{font-size:clamp(52px,min(5.6vw,8.9svh),80px);line-height:.96}
.h-closeline span{display:block;opacity:0}
.h-live{margin:22px 0 0;font:400 13px var(--mono);font-variant-numeric:tabular-nums;white-space:pre;color:rgba(244,246,243,.72);opacity:0}
.h-live .fr,.h-live .t{color:var(--muted)}
.h-live .head{color:var(--head)}.h-live .left{color:var(--left)}.h-live .right{color:var(--right)}
.h-sub{opacity:0}
.h-sub .lead{max-width:46ch;margin-top:20px}
.h-play{position:absolute;z-index:7;right:48px;bottom:18px;min-width:8.6em;visibility:hidden}
/* the clip autoplays for everyone (WCAG 2.2.2): Pause shows from first paint once JS runs */
.js .h-play{visibility:visible}
.h-play[hidden]{display:none}

/* ---------- page-load intro "143 Rows" (js/intro-gate.js sets html.intro; js/hero-intro.js) ----------
   First paint shows the void over the poster and the replay label; the copy column, nav and CTAs
   sit above it at full ink and nothing here takes pointer events. If hero JS never runs, the
   void and label go by themselves at 5.5 s (after the latest intro start, 2.5 s, and its run;
   page.js lifts the void at 2.6 s if no intro has begun). */
.h-void{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;display:none;pointer-events:none;background:var(--void)}
html.intro .h-void{display:block;opacity:.94;animation:h-reveal .4s linear 5.5s forwards}
html.intro-run .h-void{animation:none;opacity:1;background:transparent}
html.intro-fade .h-void{animation:none;opacity:0;transition:opacity .5s cubic-bezier(.4,0,.2,1)}
html.intro-skip .h-void,html.intro-skip .h-introlabel{display:none}
@keyframes h-reveal{to{opacity:0;visibility:hidden}}
.h-introlabel{position:absolute;z-index:6;right:6.25%;top:13svh;margin:0;display:none;font:400 12px var(--mono);color:rgba(244,246,243,.62);white-space:nowrap;pointer-events:none}
html.intro:not(.intro-rm) .h-introlabel{display:block;animation:h-reveal .4s linear 5.5s forwards}
html.intro-run .h-introlabel{animation:none;transition:opacity .3s}
.h-introlabel span{display:block;transition:opacity .1s}
.h-introlabel .b{position:absolute;right:0;top:0;opacity:0}
.h-introlabel.at .a{opacity:0}.h-introlabel.at .b{opacity:1;transition-delay:.1s}
.h-introlabel.out{opacity:0}
.stage [data-off]{visibility:hidden}
/* B5: the scroll beats change these every frame; own layers halve GPU raster work while scrolling. */
@media (min-width:768px){
  .hero-track:not(.rm) :is(.h-vwrap,.h-dark,.h-figscrim,.h-leaders,.h-legend,.h-copy,.h-beat,.h-facts,.h-closeline span,.h-live,.h-sub){will-change:transform,opacity}
}
/* short desktop viewports: keep the CTA row above the fold */
@media (min-width:768px) and (max-height:780px){
  .stage .lead{font-size:16px;margin-top:14px}.stage .ctas{margin-top:18px}
  .segs{margin-top:18px;gap:4px}.cred{margin-top:10px}.stage .kick{margin-bottom:12px}
}
@media (min-width:768px) and (max-height:660px){.segs,.cred{display:none}}
/* narrow desktop and portrait tablets: the rail is wider than the space left of the stream
   panel, so the clip label takes its own line instead of running under the scroll cue */
@media (min-width:768px) and (max-width:1199px){
  .h-rail{flex-wrap:wrap;row-gap:6px;column-gap:20px}
  .h-rail .h-cliplabel{flex-basis:100%}
}

/* reduced motion: hero.js sets .rm from matchMedia (no pin, no beats). Without JS nothing moves,
   so the stage stays pinned; the shrink when .rm lands happens below the fold (no layout shift). */
.hero-track.rm{height:auto}
.rm .stage{position:relative;height:auto;min-height:0;overflow:visible}
.rm .h-screen{position:relative;height:100svh;min-height:560px;overflow:hidden}
.rm .h-cue,.rm .h-beat,.rm .h-facts,.rm .h-live{display:none}
.rm .h-close{position:relative;left:auto;top:auto;width:auto;max-width:1080px;margin:0 auto;padding:56px 72px 8px}
.rm .h-closeline span,.rm .h-sub{opacity:1}
.rm .h-close{pointer-events:auto}
.rm .h-sub .ctas{display:none}
.rm .h-video video{transition:none}

/* phones: one static stacked hero, no pinning */
@media (max-width:767px){
  .hero-track,.hero-track.rm{height:auto}
  .stage,.rm .stage{position:relative;height:auto;min-height:0;overflow:visible}
  .h-screen,.rm .h-screen{position:relative;height:auto;min-height:0}
  .h-band{position:relative;height:300px;overflow:hidden}
  .h-vwrap{border-radius:0;box-shadow:none}
  .h-poster img,.h-video video{object-position:50% 60%}
  .h-scrim{background:linear-gradient(180deg,rgba(5,6,5,.70) 0%,rgba(5,6,5,.05) 22%,rgba(5,6,5,.10) 70%,rgba(5,6,5,.92) 100%),linear-gradient(90deg,rgba(5,6,5,.05) 40%,rgba(5,6,5,.45) 100%)}
  .h-figscrim,.h-leaders,.h-rail,.h-cue,.h-beat,.h-facts,.h-live{display:none}
  .h-legend{left:auto;right:16px;top:226px;font-size:11px;gap:4px}
  .h-clip{display:block;position:absolute;z-index:6;left:16px;top:274px;margin:0;font-size:11px;color:#c3c9c2}
  .h-stream{position:relative;inset:auto;width:calc(100% - 32px);height:66px;margin:6px 16px 0}
  .h-copy{position:relative;left:auto;top:auto;width:auto;padding:16px 16px 0}
  .stage .kick{font-size:13px;margin-bottom:10px}
  .h-h1{font-size:30px;line-height:1;letter-spacing:-.035em}
  .stage .lead{font-size:14.5px;margin-top:12px;line-height:1.45}
  .h-copy .ctas{display:block;margin-top:18px}
  .h-copy .btn.pri{display:flex;width:100%;height:48px;font-size:15px}
  .h-copy .btn.sec{display:block;height:auto;margin-top:12px;padding:0;background:none;box-shadow:none;text-align:center;font-size:14px;font-weight:600;text-decoration:underline;text-decoration-color:rgba(244,246,243,.35);text-underline-offset:3px}
  .segs{margin-top:22px;font-size:12.5px;gap:6px;line-height:1.35}
  .cred{margin-top:12px;font-size:12px}.cred .long{display:none}.cred .short{display:inline}
  .h-close,.rm .h-close{position:relative;left:auto;top:auto;width:auto;margin:0;padding:48px 16px 8px}
  .h-closeline{font-size:40px}
  .h-closeline span,.h-sub{opacity:1}
  .h-close{pointer-events:auto}
  .stage .h-sub[data-off]{visibility:visible} /* the lead shows before hero.js (its CTAs stay hidden) */
  .h-sub .ctas{display:none}
  .h-play{left:16px;right:auto;bottom:40px}
  .h-still{object-position:50% 60%}
  .h-introlabel{left:16px;right:auto;top:66px;font-size:11px}
  .h-introlabel .b{left:0;right:auto}
}