/* Hero, no-WebGL fallback, #problem and the footage-wall marks */
#gl{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:0;pointer-events:none}
#gl.is-off{visibility:hidden}
#gl.is-static{position:absolute;width:100%;height:100%}
html.no-webgl #gl{display:none}
main{position:relative;z-index:1}

.hero{position:relative;height:100vh;height:100svh;min-height:540px;overflow:hidden}
.hero-copy{position:absolute;z-index:2;left:var(--edge);bottom:max(21vh,88px);width:min(56vw,920px)}
.hero .tagline{display:block;margin-bottom:clamp(18px,2.4vh,26px)}
.hero-h1{font-size:clamp(40px,4.75vw,92px);line-height:1;letter-spacing:-.04em;max-width:none;white-space:nowrap}
.hero-h1 .ln-mask{display:block;overflow:hidden}   /* one hand-built mask per sentence: no SplitText, no font race */
.hero-h1 .ln{display:block}
.hero-sub{margin-top:clamp(16px,2.4vh,24px);max-width:30.5em;color:var(--silver)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,3.4vh,32px)}
.cue{position:absolute;z-index:2;right:var(--edge);bottom:22px;display:flex;flex-direction:column;align-items:center;gap:10px;
  font:500 12px/1 var(--font-ui);color:var(--silver)}
.cue .trk{position:relative;width:1px;height:28px;background:var(--line-2);overflow:hidden}
.cue .trk::after{content:"";position:absolute;left:0;top:-8px;width:1px;height:8px;background:var(--mist);animation:cue 2s var(--ease-inout) infinite}
@keyframes cue{to{transform:translateY(36px)}}

/* R5 sheen on split headline lines (hero H1, #access H2): Mist base + one light pass */
.sheen-ln,.chrome-pass .ln{background-image:var(--sheen-layer),linear-gradient(var(--mist),var(--mist));background-size:260% 100%,100% 100%;
  background-repeat:no-repeat;background-position:130% 0,0 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
html.og .hud,html.og .cue{display:none!important}
html.still body > *:not(#gl){visibility:hidden!important}
html.still #gl{visibility:visible!important}

/* Portrait: ring on top, horizon in the middle, copy on the planet body */
@media (max-aspect-ratio:11/10),(max-width:767px){
  .hero-copy{left:var(--margin);right:var(--margin);width:auto;bottom:calc(26px + env(safe-area-inset-bottom))}
  .hero-h1{white-space:normal;font-size:clamp(38px,10.6vw,64px);line-height:1.02}
  .hero-sub{max-width:34em;font-size:16px}
  .cue{display:none}
}
@media (max-width:767px){
  .hero-ctas .btn{flex:1 1 auto;padding:0 16px}
}

/* No-WebGL / reduced-motion stills: CSS horizon + rendered ring still */
.gl-fb{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  --apex-x:66%;--apex-y:80%;--R:240vw;--ring-x:66%;--ring-y:42%;--ring-w:35vw}   /* still crop = 0.972 × ring diameter */
.gl-fb::before{content:"";position:absolute;left:var(--ring-x);top:var(--ring-y);width:calc(var(--ring-w) * 1.3);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(205,218,255,.06),transparent)}
html.no-webgl .gl-fb,html.gl-static .finale .gl-fb{display:block}
.horizon-css{position:absolute;left:calc(var(--apex-x) - var(--R));top:var(--apex-y);width:calc(var(--R) * 2);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,#0B0C0F 97%,#14171C 99.4%,#1A1D23);
  box-shadow:0 0 0 1px rgba(255,255,255,.85),0 -2px 16px 1px rgba(205,218,255,.45),0 -24px 120px 10px rgba(205,218,255,.16);
  clip-path:inset(-40vh 50% 0 50%);animation:ignite 1.6s cubic-bezier(.87,0,.13,1) .1s forwards}
@keyframes ignite{to{clip-path:inset(-40vh 0 0 0)}}
.ring-still{position:absolute;left:var(--ring-x);top:var(--ring-y);width:var(--ring-w);height:auto;transform:translate(-50%,-50%);max-width:none;
  mix-blend-mode:lighten}   /* the still is rendered on Jet: lighten drops its background into the page, no visible box */
@media (max-aspect-ratio:11/10),(max-width:767px){
  .hero .gl-fb{--apex-x:50%;--apex-y:46%;--R:220vw;--ring-x:50%;--ring-y:25%;--ring-w:81.6vw}
}

/* #problem: pinned, wall behind a static scrim */
.problem{position:relative;isolation:isolate;height:100vh;height:100svh;min-height:600px;display:flex;align-items:center}
.problem::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 80% at 22% 55%,rgba(11,12,15,.9),rgba(11,12,15,.6) 45%,transparent 75%)}
.wall2d{position:absolute;inset:0;z-index:-2;width:100%;height:100%;display:none}
html.no-webgl .wall2d,html.gl-static .wall2d{display:block}
.problem-copy{width:min(600px,48%);padding-top:calc(var(--nav-h) * .5)}
.problem .display{margin-top:18px;font-size:clamp(40px,4.9vw,84px);max-width:9.6em;line-height:1}
.problem .lead{margin-top:18px;max-width:40ch}
.term{margin-top:26px;padding:14px 18px 15px;border-radius:12px;background:rgba(9,10,12,.78);border:1px solid var(--line-2);
  font:400 13.5px/1.75 var(--font-mono);color:var(--silver);white-space:pre;overflow:hidden;max-width:440px}
.term .cmd{color:var(--platinum)}
.term .pr{color:var(--silver);user-select:none}
.term .cursor{display:inline-block;width:.62em;height:1.15em;vertical-align:-.22em;background:var(--platinum);animation:blink 1.06s steps(2,jump-none) infinite}
@keyframes blink{50%{opacity:0}}
.term-cap{margin-top:12px;font-size:14px;line-height:1.5;color:var(--silver)}
.term-cap .tc{color:var(--platinum)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);margin-top:26px}
.pair div{padding-top:14px;border-top:1px solid var(--line-2)}
.pair dt{font:600 15px/1.3 var(--font-ui);color:var(--mist)}
.pair dd{margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--silver)}
@media (max-aspect-ratio:11/10),(max-width:767px){
  .problem{align-items:flex-end}
  .problem::before{background:radial-gradient(120% 70% at 50% 80%,rgba(11,12,15,.94),rgba(11,12,15,.7) 50%,transparent 85%)}
  .problem-copy{width:100%;padding:0 0 calc(28px + env(safe-area-inset-bottom))}
  .problem .display{font-size:clamp(34px,9.4vw,60px);margin-top:12px}
  .problem .lead{margin-top:12px;font-size:16px}
  .term{margin-top:16px;font-size:12.5px;padding:10px 14px}
  .term-cap{font-size:13px;margin-top:8px}
  .pair{margin-top:16px;gap:14px}
  .pair div{padding-top:10px}
  .pair dt{font-size:14px} .pair dd{font-size:13px}
}

/* Winner tile brackets (DOM, not shader). Fixed over the WebGL wall; absolute in the static wall. */
.wallmarks{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0}
.problem .wallmarks{position:absolute;z-index:-1}
.wm-box{position:absolute;left:0;top:0;width:72px;height:40.5px;transform:translate(var(--wx,0),var(--wy,0))}
.wm-c{position:absolute;width:14px;height:14px;border:0 solid var(--mist)}
.wm-c.tl{left:-6px;top:-6px;border-top-width:1.5px;border-left-width:1.5px;transform-origin:0 0}
.wm-c.tr{right:-6px;top:-6px;border-top-width:1.5px;border-right-width:1.5px;transform-origin:100% 0}
.wm-c.bl{left:-6px;bottom:-6px;border-bottom-width:1.5px;border-left-width:1.5px;transform-origin:0 100%}
.wm-c.br{right:-6px;bottom:-6px;border-bottom-width:1.5px;border-right-width:1.5px;transform-origin:100% 100%}
.wm-label{position:absolute;left:50%;top:calc(100% + 14px);transform:translateX(-50%);font:500 12px/1 var(--font-mono);color:var(--mist);
  white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.8)}