/* ============ TOKENS - three colours only ============ */
:root{
  --ink:#0a0a0a;
  --ink-2:#141414;
  --paper:#f1f1ec;
  --acid:#c6ff00;
  --dim:rgba(241,241,236,.56);
  --faint:rgba(241,241,236,.14);
  --hair:rgba(241,241,236,.09);
  --display:"Anton","Bebas Neue","League Gothic","Oswald",Impact,"Arial Narrow Bold",sans-serif;
  --mono:"JetBrains Mono","SF Mono","IBM Plex Mono",Menlo,Consolas,monospace;
  --sans:"Helvetica Neue",Arial,"Nimbus Sans","Liberation Sans",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gx:clamp(16px,4vw,64px);
  --rail:56px;
  --fat:4px solid var(--paper);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);color:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
main{overflow-x:clip}
::selection{background:var(--acid);color:var(--ink)}
:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
a{color:inherit}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:60;background:var(--acid);color:var(--ink);font:600 13px/1 var(--mono);padding:12px 14px;text-decoration:none;letter-spacing:.06em}
.skip:focus{top:12px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.6}
.dsp{font-family:var(--display);font-weight:400;font-synthesis:none;text-transform:uppercase;line-height:.86;letter-spacing:.004em;margin:0}
.acc{color:var(--acid)}
.ch,.c{display:inline-block}
.gap{display:inline-block;width:.24em}

/* ============ TOP BAR ============ */
.topbar{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--gx) 0;pointer-events:none;color:var(--paper);transition:color .4s}
.topbar>*{pointer-events:auto}
.topbar::before{content:"";position:absolute;inset:0 0 -26px 0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,10,.94) 0,rgba(10,10,10,.8) 55%,rgba(10,10,10,0));transition:opacity .4s}
body.on-acid .topbar::before{background:linear-gradient(180deg,rgba(198,255,0,.96) 0,rgba(198,255,0,.82) 55%,rgba(198,255,0,0))}
body.at-top .topbar::before{opacity:0}
.brand{display:flex;align-items:baseline;gap:12px;font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:inherit;text-decoration:none}
.brand b{font:400 22px/1 var(--display);letter-spacing:.03em}
.brand b i{font-style:normal;color:var(--acid);transition:color .4s}
.brand span{opacity:.62}
.tb-nav{display:flex;gap:4px}
.tb-nav a{text-decoration:none;padding:7px 9px;opacity:.72;transition:opacity .2s,background .2s,color .2s}
.tb-nav a:hover{opacity:1;background:var(--acid);color:var(--ink)}
.tb-right{display:flex;align-items:center;gap:22px}
.toggle{appearance:none;border:1px solid var(--faint);background:rgba(10,10,10,.5);color:inherit;font:600 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:9px 12px 9px 10px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:border-color .25s,background .25s,color .4s}
.toggle:hover{border-color:var(--acid)}
.toggle .dot{width:8px;height:8px;border-radius:50%;background:var(--acid);box-shadow:0 0 0 3px rgba(198,255,0,.16)}
.toggle[aria-pressed="false"] .dot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--dim)}
body.on-acid .topbar{color:var(--ink)}
body.on-acid .brand b i{color:var(--ink)}
body.on-acid .tb-nav a:hover{background:var(--ink);color:var(--acid)}
body.on-acid .toggle{border-color:rgba(10,10,10,.35);background:rgba(198,255,0,.6)}
body.on-acid .toggle .dot{background:var(--ink);box-shadow:none}
@media (max-width:960px){.tb-nav{display:none}}

/* ============ RAIL ============ */
.rail{position:fixed;z-index:30;right:calc(var(--gx) - 4px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:14px;transition:opacity .5s,color .4s;color:var(--paper)}
.rail-label{writing-mode:vertical-rl;transform:rotate(180deg);font:600 10px/1 var(--mono);letter-spacing:.2em;white-space:nowrap;font-variant-numeric:tabular-nums}
.rail-label b{color:var(--acid);font-weight:600;transition:color .4s}
.rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rail li{display:block}
.seg{appearance:none;background:none;border:0;padding:0 8px;margin:0;cursor:pointer;display:flex;align-items:center;color:inherit;position:relative;height:calc(56vh / 5 - 6px);min-height:26px}
.seg .trk{position:relative;display:block;width:2px;height:100%;background:var(--faint);overflow:hidden}
.seg .fil{position:absolute;inset:0;background:var(--acid);transform-origin:50% 0;transform:scaleY(0)}
.seg .num{position:absolute;right:22px;top:50%;transform:translate(6px,-50%);opacity:0;font:600 10px/1 var(--mono);letter-spacing:.16em;white-space:nowrap;transition:opacity .25s,transform .25s;pointer-events:none;background:var(--ink);color:var(--paper);padding:5px 7px}
.seg:hover .num,.seg:focus-visible .num{opacity:1;transform:translate(0,-50%)}
.seg.on .trk{width:4px}
body.on-acid .rail{color:var(--ink)}
body.on-acid .seg .trk{background:rgba(10,10,10,.2)}
body.on-acid .seg .fil{background:var(--ink)}
body.on-acid .rail-label b{color:var(--ink)}
body.at-top .rail{opacity:.35}

/* ============ INTRO / HERO ============ */
.intro{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding:78px calc(var(--gx) + var(--rail)) 0 var(--gx);border-bottom:1px solid var(--hair)}
.intro-grid{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(var(--hair) 1px,transparent 1px) 0 0/100% 25%,
  linear-gradient(90deg,var(--hair) 1px,transparent 1px) 0 0/12.5% 100%;opacity:.55;mask-image:linear-gradient(180deg,#000 30%,transparent 92%);-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 92%)}
.slate{position:relative;display:flex;justify-content:space-between;gap:12px;color:var(--dim);padding-bottom:14px;border-bottom:1px solid var(--faint)}
.slate span{color:var(--acid)}
.title{position:relative;margin:clamp(18px,3.4vh,40px) 0 0;font-size:96px}
.hl{display:block;overflow:hidden;white-space:nowrap;line-height:.9;padding:.05em 0 .01em;transform-origin:0 100%}
.hlt{position:relative;display:inline-block;isolation:isolate}
.hl .c{transform:translateY(112%);animation:rise 1s var(--ease) forwards;animation-delay:calc(.1s + var(--i) * 28ms)}
.mark::before{content:"";position:absolute;inset:0 -.08em;background:var(--acid);transform:scaleX(0);transform-origin:0 50%;animation:wipe .7s cubic-bezier(.7,0,.2,1) 1.05s forwards;z-index:-1}
.mark .c{animation:rise 1s var(--ease) forwards,toink .25s ease 1.3s forwards;animation-delay:calc(.1s + var(--i) * 28ms),1.3s}
@keyframes rise{to{transform:translateY(0)}}
@keyframes wipe{to{transform:scaleX(1)}}
@keyframes toink{to{color:var(--ink)}}
.intro-meta{position:relative;display:grid;grid-template-columns:1.5fr 1fr auto;gap:clamp(18px,3vw,48px);align-items:end;padding:clamp(20px,3.4vh,38px) 0 clamp(20px,3vh,32px);opacity:0;animation:fadein .9s ease .7s forwards}
@keyframes fadein{to{opacity:1}}
.lede{margin:0 0 22px;max-width:52ch;font:400 clamp(15px,1.25vw,18px)/1.55 var(--sans);color:var(--paper)}
.lede b{color:var(--acid);font-weight:600}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.btn{appearance:none;display:inline-flex;align-items:center;gap:12px;text-decoration:none;cursor:pointer;font:600 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;padding:15px 18px;border:2px solid var(--acid);background:var(--acid);color:var(--ink);transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:transparent;color:var(--acid)}
.btn.alt{background:transparent;color:var(--paper);border-color:var(--faint)}
.btn.alt:hover{border-color:var(--acid);color:var(--acid)}
.tags{list-style:none;margin:0;padding:0;border-top:1px solid var(--faint)}
.tags li{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--faint)}
.tags li::before{content:"";width:9px;height:9px;background:var(--acid);flex:0 0 auto}
.tags li span{margin-left:auto;color:var(--dim)}
.cue{display:flex;flex-direction:column;align-items:flex-end;gap:10px;color:var(--paper);text-decoration:none;font:600 10px/1 var(--mono);letter-spacing:.2em}
.cue .shaft{position:relative;width:1px;height:64px;background:var(--faint);overflow:hidden}
.cue .shaft::after{content:"";position:absolute;left:0;top:0;width:1px;height:22px;background:var(--acid);animation:drip 1.8s cubic-bezier(.6,0,.3,1) infinite}
@keyframes drip{from{transform:translateY(-24px)}to{transform:translateY(66px)}}
.ticker{position:relative;margin:auto calc(-1 * (var(--gx) + var(--rail))) 0 calc(-1 * var(--gx));background:var(--acid);color:var(--ink);overflow:hidden;white-space:nowrap;height:46px;display:flex;align-items:center}
.ticker-in{display:inline-flex;align-items:center;animation:tick 26s linear infinite;will-change:transform}
.ticker span{font:400 23px/1 var(--display);text-transform:uppercase;letter-spacing:.04em;padding:0 18px}
.ticker span.m{font:600 11px/1 var(--mono);letter-spacing:.2em;padding:0 6px}
@keyframes tick{to{transform:translateX(-50%)}}

/* ============ SCENES (sticky, scroll-played) ============ */
.scene{position:relative;height:calc(var(--len,300) * 1vh)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;padding:0 calc(var(--gx) + var(--rail)) 0 var(--gx);display:flex;flex-direction:column;contain:paint}
.hud{display:flex;align-items:baseline;gap:18px;padding-top:66px;color:var(--dim);position:relative;z-index:3}
.hud .no{color:var(--acid);font-weight:600}
.hud .bar{flex:1;height:1px;background:var(--faint);align-self:center;position:relative;overflow:hidden;max-width:220px}
.hud .bar i{position:absolute;inset:0;background:var(--acid);transform-origin:0 50%;transform:scaleX(0)}
.ghost{position:absolute;right:calc(var(--gx) + var(--rail) - .04em);bottom:-.12em;font:400 min(62vh,48vw)/.8 var(--display);color:transparent;-webkit-text-stroke:1px rgba(241,241,236,.07);pointer-events:none;user-select:none;z-index:0;letter-spacing:-.02em}
.play{flex:1;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.foot{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-bottom:clamp(20px,4vh,40px)}
.foot .body{margin:0;max-width:44ch;font:400 clamp(14px,1.15vw,17px)/1.55 var(--sans);color:var(--paper);opacity:0;transform:translateY(12px)}
.foot .body b{color:var(--acid);font-weight:600}

/* SC 01 - assembly + shuttle pipeline */
.s1 .ln{display:block;white-space:nowrap}
.s1 .block{position:relative;align-self:flex-start}
.s1 .reg{position:absolute;width:18px;height:18px;opacity:.5}
.s1 .reg::before,.s1 .reg::after{content:"";position:absolute;background:var(--acid)}
.s1 .reg::before{left:8px;top:0;width:1px;height:18px}
.s1 .reg::after{top:8px;left:0;height:1px;width:18px}
.s1 .r1{left:-26px;top:-24px}.s1 .r2{right:-26px;top:-24px}.s1 .r3{left:-26px;bottom:-18px}.s1 .r4{right:-26px;bottom:-18px}
.pipe{margin-top:clamp(26px,5vh,54px);position:relative}
.pipe-track{position:relative;height:2px;background:var(--faint)}
.pipe-fill{position:absolute;inset:0;background:var(--acid);transform-origin:0 50%;transform:scaleX(0)}
.shuttle{position:absolute;left:0;top:50%;width:34px;height:16px;margin:-8px 0 0 -17px;background:var(--acid);box-shadow:-14px 0 0 -5px rgba(198,255,0,.45),-26px 0 0 -6px rgba(198,255,0,.2)}
.stations{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.stations li{position:relative;padding:22px 12px 0 0;color:var(--dim);transition:color .25s}
.stations li::before{content:"";position:absolute;left:0;top:-7px;width:12px;height:12px;background:var(--ink);border:2px solid var(--faint);transition:background .2s,border-color .2s}
.stations li b{display:block;font:400 clamp(18px,2.2vw,34px)/1 var(--display);text-transform:uppercase;letter-spacing:.02em;margin-top:6px}
.stations li.on{color:var(--paper)}
.stations li.on::before{background:var(--acid);border-color:var(--acid)}

/* SC 02 - stretch */
.s2{display:flex;flex-direction:column;gap:clamp(4px,1vh,12px)}
.sl{position:relative;display:block;white-space:nowrap;border-top:1px solid var(--faint);padding-top:14px}
.sl:last-child{border-bottom:1px solid var(--hair)}
.sw{display:inline-block;transform-origin:0 50%;padding-top:.04em}

/* SC 03 - prism of rules */
.s3{align-items:center}
.prism-wrap{position:relative;perspective:1600px;margin:0 auto}
.prism{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.face{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.face .dsp{display:block;white-space:nowrap;padding-top:.06em}
.face .shade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.face .fm{position:absolute;left:14px;top:12px;font:600 10px/1 var(--mono);letter-spacing:.2em;opacity:.7}
.f0{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 4px var(--paper)}
.f1{background:var(--acid);color:var(--ink)}
.f2{background:var(--paper);color:var(--ink)}
.f3{background:var(--ink-2);color:var(--acid);box-shadow:inset 0 0 0 4px var(--acid)}
.faceidx{margin:clamp(14px,3vh,28px) 0 0;color:var(--dim);text-align:center;font-variant-numeric:tabular-nums}
.faceidx b{color:var(--acid);font-weight:600}
.rule-desc{margin:14px auto 0;max-width:56ch;text-align:center;font:400 clamp(15px,1.25vw,19px)/1.5 var(--sans);transition:opacity .25s,transform .25s}
.rule-desc.swap{opacity:0;transform:translateY(8px);transition:none}
.pr-list{width:100%;border:var(--fat)}
body:not(.static) .pr-list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pr-row{display:grid;grid-template-columns:80px 1fr 1.4fr;align-items:stretch;border-bottom:var(--fat);transition:background .2s,color .2s}
.pr-row:last-child{border-bottom:none}
.pr-row:hover{background:var(--acid);color:var(--ink)}
.pr-num{font:400 34px/1 var(--display);display:flex;align-items:center;justify-content:center;background:var(--acid);color:var(--ink);border-right:var(--fat)}
.pr-row:hover .pr-num{background:var(--ink);color:var(--acid)}
.pr-title{font:400 clamp(20px,2.4vw,32px)/1 var(--display);text-transform:uppercase;padding:22px}
.pr-desc{padding:22px;font-size:15px;border-left:2px solid currentColor}

/* SC 04 - split */
.s4 .cut{position:relative;width:100%;white-space:nowrap;--cut:50%}
.s4 .half{position:relative;display:block;text-align:center}
.s4 .half.bot{position:absolute;left:0;right:0;top:0}
.s4 .half.top{clip-path:polygon(-20% -60%,120% -60%,120% var(--cut),-20% var(--cut))}
.s4 .half.bot{clip-path:polygon(-20% var(--cut),120% var(--cut),120% 160%,-20% 160%)}
.s4 .band{position:absolute;left:calc(-1 * var(--gx));right:calc(-1 * (var(--gx) + var(--rail)));top:var(--cut);background:var(--acid);color:var(--ink);display:flex;align-items:center;justify-content:center;overflow:hidden;transform:translateY(-50%) scaleY(0)}
.s4 .band-in{display:block;white-space:nowrap}
.s4 .blade{position:absolute;left:calc(-1 * var(--gx));right:calc(-1 * (var(--gx) + var(--rail)));top:var(--cut);height:2px;margin-top:-1px;background:var(--acid);transform-origin:0 50%;transform:scaleX(0)}

/* SC 05 - typed */
.prompt{color:var(--dim);margin:0 0 clamp(10px,2vh,22px)}
.prompt b{color:var(--acid);font-weight:600}
.typed{font-size:clamp(44px,min(8.6vw,14vh),150px);max-width:14ch;min-height:3.5em}
.typed .tb{color:var(--dim)}
.typed .tb.flag{text-decoration:line-through;text-decoration-color:var(--acid);text-decoration-thickness:.07em}
.caret{display:inline-block;width:.09em;height:.74em;margin-left:.04em;background:var(--acid);vertical-align:-.02em;animation:blink 1.05s steps(1) infinite}
.typed.busy .caret{animation:none}
@keyframes blink{50%{opacity:0}}
.reply{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:clamp(14px,3vh,32px);opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s var(--ease)}
.reply.on{opacity:1;transform:none}
.reply .btn{font-size:12px;padding:17px 20px}
.more{display:inline-flex;align-items:center;gap:12px;color:var(--dim)}
.more .shaft{position:relative;width:1px;height:34px;background:var(--faint);overflow:hidden}
.more .shaft::after{content:"";position:absolute;left:0;top:0;width:1px;height:14px;background:var(--acid);animation:drip2 1.6s cubic-bezier(.6,0,.3,1) infinite}
@keyframes drip2{from{transform:translateY(-16px)}to{transform:translateY(36px)}}
.flood{position:absolute;inset:0;background:var(--acid);transform:scaleY(0);transform-origin:50% 100%;pointer-events:none;z-index:4}

/* ============ FLOW SECTIONS (content, scroll-linked) ============ */
.flow{position:relative;padding:clamp(40px,7vh,90px) calc(var(--gx) + var(--rail)) clamp(80px,14vh,160px) var(--gx)}
.flow-head{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;color:var(--dim);padding-bottom:14px;border-bottom:1px solid var(--faint);margin-bottom:clamp(28px,5vh,56px)}
.flow-head .no{color:var(--acid);font-weight:600}
.flow-head .r{margin-left:auto}

/* 01 - what we do: fat paper blocks */
.do-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--paper);border:var(--fat)}
.do-cell{background:var(--paper);color:var(--ink);padding:28px 22px 32px;position:relative;outline:4px solid var(--ink);outline-offset:-2px;transition:background .2s}
.do-cell:hover{background:var(--acid)}
.do-cell svg{display:block;margin-bottom:22px}
.do-cell svg .ac{fill:var(--acid);transition:fill .2s}
.do-cell:hover svg .ac{fill:var(--paper)}
.idx{display:inline-block;font:700 11px/1 var(--mono);letter-spacing:.12em;border:2px solid var(--ink);padding:4px 8px;margin-bottom:16px}
.do-cell:hover .idx{background:var(--ink);color:var(--acid)}
.do-cell h3{margin:0 0 12px;font:400 clamp(24px,2.3vw,34px)/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.do-cell p{margin:0;font-size:15px;line-height:1.55}
.big-n{position:absolute;right:16px;top:10px;font:400 64px/1 var(--display);color:transparent;-webkit-text-stroke:1.5px rgba(10,10,10,.22)}
@media (max-width:1100px){.do-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.do-grid{grid-template-columns:1fr}}

/* 02 - engineering quality: the big fat blocks */
.eng-grid{display:grid;grid-template-columns:repeat(6,1fr);perspective:1800px;perspective-origin:50% 0}
.eng-card{position:relative;border:var(--fat);margin:-2px;padding:28px 24px 30px;background:var(--ink);color:var(--paper);transform-origin:50% 100%;transition:background .2s,color .2s}
.eng-card:nth-child(1),.eng-card:nth-child(2){grid-column:span 3}
.eng-card:nth-child(n+3){grid-column:span 2}
.eng-card:nth-child(odd):hover{background:var(--acid);color:var(--ink);z-index:2}
.eng-card:nth-child(even):hover{background:var(--paper);color:var(--ink);z-index:2}
.eng-no{position:absolute;right:18px;top:8px;font:400 clamp(64px,7vw,110px)/1 var(--display);color:transparent;-webkit-text-stroke:1.5px currentColor;opacity:.22;pointer-events:none}
.eng-tag{display:inline-block;font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;border:2px solid currentColor;padding:5px 10px;margin-bottom:18px}
.eng-card h3{margin:0 0 14px;font:400 clamp(30px,3.4vw,54px)/.95 var(--display);text-transform:uppercase;letter-spacing:.005em;max-width:14ch}
.eng-card:nth-child(n+3) h3{font-size:clamp(28px,2.6vw,40px)}
.eng-card p{margin:0;font-size:15.5px;max-width:52ch}
.eng-card ul{list-style:none;margin:18px 0 0;padding:0}
.eng-card li{position:relative;font:500 12px/1.4 var(--mono);letter-spacing:.04em;padding:8px 0 8px 22px;border-top:1px dashed currentColor}
.eng-card li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:9px;background:var(--acid)}
.eng-card:hover li::before{background:var(--ink)}
.eng-card .tick{position:absolute;left:18%;right:18%;bottom:-4px;height:4px;background:var(--acid);opacity:0}
@media (max-width:960px){.eng-card{grid-column:span 6!important}}

/* 04 - products */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.prod-card{position:relative;border:var(--fat);padding:30px 24px 30px;background:var(--ink);transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.prod-card:hover{background:var(--acid);color:var(--ink);transform:translate(-6px,-6px);box-shadow:6px 6px 0 var(--paper)}
.prod-badge{position:absolute;top:-15px;right:14px;display:inline-flex;align-items:center;gap:8px;font:700 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;background:var(--acid);color:var(--ink);padding:7px 10px;border:2px solid var(--ink)}
.prod-badge::before{content:"";width:7px;height:7px;background:var(--ink);animation:blink 1.05s steps(1) infinite}
.prod-badge.beta{background:var(--paper)}
.prod-card:hover .prod-badge{background:var(--ink);color:var(--acid);border-color:var(--ink)}
.prod-card:hover .prod-badge::before{background:var(--acid)}
.pname{margin:0 0 14px;font:400 clamp(44px,4.8vw,78px)/.9 var(--display);text-transform:uppercase;overflow:hidden;padding-top:.05em;white-space:nowrap}
.prod-kind{display:inline-block;font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;border:2px solid currentColor;padding:5px 10px;margin-bottom:16px}
.prod-card p{margin:0;font-size:15.5px}
@media (max-width:960px){.prod-grid{grid-template-columns:1fr;max-width:560px;gap:34px}}

/* ============ OUTRO (acid) ============ */
.outro{position:relative;background:var(--acid);color:var(--ink);padding:110px calc(var(--gx) + var(--rail)) 48px var(--gx)}
.outro .mono{color:rgba(10,10,10,.72)}
.outro-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.yours{font-size:clamp(96px,22vw,360px);line-height:.8;margin:.2em 0 0;letter-spacing:-.005em}
.yours span{display:block}
.stats{margin:0;min-width:240px;border-top:2px solid var(--ink)}
.stats div{display:flex;justify-content:space-between;gap:24px;padding:9px 0;border-bottom:1px solid rgba(10,10,10,.25)}
.stats dt{opacity:.72}
.stats dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
/* contact form */
.write{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(24px,5vw,80px);margin-top:clamp(40px,8vh,90px);border-top:2px solid var(--ink);padding-top:22px}
.write h3{margin:0 0 12px;font:600 11px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.write-lead{font-size:clamp(44px,5.4vw,92px);margin:0 0 18px}
.alt-mail{margin-top:22px}
.alt-mail a{text-decoration:none;border-bottom:2px solid var(--ink)}
.alt-mail a:hover{background:var(--ink);color:var(--acid)}
.form{display:flex;flex-direction:column;gap:14px}
.hp{display:none!important}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:8px}
.field>span{color:rgba(10,10,10,.72)}
.field input,.field textarea{appearance:none;width:100%;border:4px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font:500 18px/1.4 var(--sans);padding:14px 16px;outline:none;transition:background .15s,color .15s}
.field textarea{resize:vertical;min-height:150px}
.field input::placeholder,.field textarea::placeholder{color:rgba(10,10,10,.45)}
.field input:focus,.field textarea:focus{background:var(--ink);color:var(--acid)}
.field input:focus::placeholder,.field textarea:focus::placeholder{color:rgba(198,255,0,.45)}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:6px}
.send{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5em;border:4px solid var(--ink);background:var(--ink);color:var(--acid);font:400 clamp(28px,3vw,44px)/1 var(--display);text-transform:uppercase;letter-spacing:.02em;padding:.3em .6em .26em;transition:background .2s,color .2s}
.send:hover{background:transparent;color:var(--ink)}
.send .arr{font-family:var(--sans);font-weight:700;font-size:.7em;transition:transform .25s var(--ease)}
.send:hover .arr{transform:translateX(.2em)}
.send[disabled]{opacity:.6;cursor:progress}
.status{margin:0;min-height:1.6em}
.status.err{color:var(--ink);font-weight:700}
.sent{display:none;border:4px solid var(--ink);background:var(--ink);color:var(--acid);padding:clamp(24px,4vw,48px)}
.sent .dsp{font-size:clamp(56px,8vw,140px)}
.sent p:not(.dsp){margin:16px 0 0;color:var(--paper);font:400 16px/1.55 var(--sans);max-width:44ch}
.write.done .form{display:none}
.write.done .sent{display:block}
@media (max-width:760px){.write{grid-template-columns:1fr}.row2{grid-template-columns:1fr}}
.outro-cols{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(24px,5vw,80px);margin-top:clamp(36px,7vh,80px);border-top:2px solid var(--ink);padding-top:22px}
.outro-cols h3{margin:0 0 12px;font:600 11px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.outro p.small{margin:0 0 14px;font:400 15px/1.6 var(--sans);max-width:42ch}
.index{list-style:none;margin:0;padding:0}
.index li{display:grid;grid-template-columns:4.5ch 12ch 1fr;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid rgba(10,10,10,.22)}
.index li:first-child{border-top:1px solid rgba(10,10,10,.22)}
.index .n{font:600 11px/1 var(--mono);letter-spacing:.14em}
.index .k{font:600 10px/1 var(--mono);letter-spacing:.16em;opacity:.72}
.index button{appearance:none;background:none;border:0;padding:0;margin:0;color:inherit;text-align:left;cursor:pointer;font:400 clamp(20px,2.4vw,34px)/.95 var(--display);text-transform:uppercase;transition:transform .25s cubic-bezier(.2,.9,.3,1.2)}
.index button:hover{transform:translateX(8px)}
.outro :focus-visible{outline-color:var(--ink)}
.replay{appearance:none;margin-top:22px;border:2px solid var(--ink);background:var(--ink);color:var(--acid);font:600 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;padding:14px 18px;cursor:pointer;display:inline-flex;gap:12px;align-items:center;transition:background .2s,color .2s}
.replay:hover{background:transparent;color:var(--ink)}
.colophon{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:clamp(40px,8vh,90px);padding-top:16px;border-top:1px solid rgba(10,10,10,.3)}
.colophon a{text-decoration:none;border-bottom:2px solid var(--ink)}
.colophon a:hover{background:var(--ink);color:var(--acid)}


/* ============ STATIC (reduced motion / motion off) ============ */
body.static .scene{height:auto}
body.static .stage{position:relative;height:auto;min-height:100vh;min-height:100svh}
body.static .play{padding:6vh 0}
body.static .foot .body{opacity:1;transform:none}
body.static .prism-wrap,body.static .faceidx,body.static .rule-desc{display:none}
body.static .flood{display:none}
body.static .reply{opacity:1;transform:none}
body.static .typed{min-height:0}
body.static .ticker-in,body.static .cue .shaft::after,body.static .caret,body.static .prod-badge::before{animation-play-state:paused}

@media (max-width:760px){
  :root{--rail:0px}
  .brand span{display:none}
  .rail{top:auto;bottom:10px;right:var(--gx);left:var(--gx);transform:none;flex-direction:row;gap:10px;align-items:center}
  .rail-label{writing-mode:horizontal-tb;transform:none;font-size:9px}
  .rail ol{flex-direction:row;flex:1;gap:4px}
  .rail li{flex:1}
  .seg{height:22px;min-height:0;width:100%;padding:0}
  .seg .trk{width:100%;height:2px}
  .seg.on .trk{width:100%;height:4px}
  .seg .fil{transform-origin:0 50%;transform:scaleX(0)}
  .seg .num{display:none}
  body.at-top .rail,body.on-acid .rail{opacity:0;pointer-events:none}
  .intro-meta{grid-template-columns:1fr;gap:20px}
  .cue{flex-direction:row;align-items:center;justify-content:flex-start}
  .cue .shaft{width:48px;height:1px}
  .cue .shaft::after{width:18px;height:1px;animation-name:dripx}
  .hud{gap:12px;padding-top:58px}
  .hud .bar{display:none}
  .face .fm{display:none}
  .stations{grid-template-columns:repeat(2,1fr);row-gap:22px}
  .stations li:nth-child(n+3)::before{top:12px}
  .stations li:nth-child(n+3){padding-top:40px}
  .foot{flex-direction:column;align-items:flex-start;gap:10px;padding-bottom:52px}
  .pr-row{grid-template-columns:56px 1fr}
  .pr-desc{grid-column:2;border-left:none;border-top:2px solid currentColor;padding-top:14px}
  .outro-cols{grid-template-columns:1fr}
  .outro-head{flex-direction:column;align-items:stretch}
  .stats{min-width:0}
  .index li{grid-template-columns:4ch 1fr}
  .index .k{display:none}
}
@keyframes dripx{from{transform:translateX(-20px)}to{transform:translateX(50px)}}
@media (prefers-reduced-motion:reduce){
  .hl .c,.mark .c{animation:none;transform:none}
  .mark .c{color:var(--ink)}
  .mark::before{animation:none;transform:none}
  .intro-meta{animation:none;opacity:1}
  .ticker-in,.cue .shaft::after,.prod-badge::before{animation:none}
}