:root{
  --ink:#000; --txt:#eef1f6; --dim:#8a93a6; --faint:#4a5163;
  --amber:#f2b441; --amber-hi:#ffd98a; --amber-lo:#c7781a;
  --good:#5fe39a; --warn:#ffc24d; --bad:#ff5d62;
  --line:rgba(255,255,255,.14);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --barh:0px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ink);color:var(--txt);font-family:var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
#scene{position:fixed;inset:0;z-index:0}
#scene canvas{display:block;width:100%;height:100%}

/* ---------- film chrome ---------- */
.bars{position:fixed;inset:0;z-index:5;pointer-events:none}
.bar{position:absolute;left:0;right:0;height:var(--barh);background:#000;transition:height 1.6s cubic-bezier(.7,0,.2,1)}
.bar.top{top:0}.bar.bot{bottom:0}
.flash{position:fixed;inset:0;z-index:6;pointer-events:none;background:#fff;opacity:0}

.captions{position:fixed;left:0;right:0;bottom:calc(var(--barh) + 6vh);z-index:7;pointer-events:none;height:0}
.captions .cap{position:absolute;left:16px;right:16px;bottom:0;text-align:center}
.cap{display:flex;flex-direction:column;align-items:center;gap:14px;opacity:0;will-change:opacity;transition:opacity 1.4s ease}
.cap.on{opacity:1}
.cap.on .t{animation:capIn 7s cubic-bezier(.2,.6,.2,1) both}
@keyframes capIn{from{letter-spacing:.5em}to{letter-spacing:.62em}}
.cap .t{text-shadow:0 0 2px rgba(0,0,0,.6),0 0 14px rgba(0,0,0,.6),0 0 40px rgba(0,0,0,.55);font-weight:200;font-size:clamp(20px,3.4vw,46px);letter-spacing:.62em;text-transform:uppercase;padding-left:.55em}
.cap .s{font:400 clamp(10px,1.05vw,13px)/1.7 var(--mono);color:#d4d9e3;text-shadow:0 0 2px rgba(0,0,0,.8),0 0 12px rgba(0,0,0,.7);letter-spacing:.22em;text-transform:uppercase}
.cap .s b{color:#fff;font-weight:500}
.cap.center{position:fixed;left:0;right:0;top:50%;transform:translateY(-50%)}
.cap.hero .t{text-shadow:none;font-weight:800;font-size:clamp(30px,6.4vw,92px);letter-spacing:.22em;padding-left:.22em;
  background:linear-gradient(180deg,#fff 0%,var(--amber-hi) 55%,var(--amber) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 30px rgba(255,190,80,.35))}
.cap.hero .t{letter-spacing:.26em}
.cap.hero.on .t{animation:capInHero 7s cubic-bezier(.2,.6,.2,1) both}
@keyframes capInHero{from{letter-spacing:.2em}to{letter-spacing:.26em}}
.cap.quiet .t{font-weight:300;font-size:clamp(16px,2vw,26px);letter-spacing:.3em;font-style:italic;text-transform:none}

/* ---------- gate ---------- */
.gate{position:fixed;inset:0;z-index:10;display:grid;place-items:center;text-align:center;padding:24px;
  background:radial-gradient(ellipse at 50% 60%,rgba(20,26,40,.35),rgba(0,0,0,.2) 60%,transparent);transition:opacity 1.2s ease}
.gate.out{opacity:0;pointer-events:none}
.gate-inner{display:flex;flex-direction:column;align-items:center;gap:22px;max-width:640px}
.gate-kicker{font:500 11px/1.4 var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--dim)}
.gate-title{margin:0;font-weight:200;font-size:clamp(26px,5.2vw,58px);letter-spacing:.5em;padding-left:.5em;white-space:nowrap}
.begin{position:relative;width:132px;height:132px;display:grid;place-items:center;margin-top:10px}
.begin .ring{position:absolute;inset:0}
.begin svg{width:100%;height:100%;transform:rotate(-90deg)}
.begin circle{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1.2}
.begin #loadArc{stroke:var(--amber-hi);stroke-width:1.6;stroke-dasharray:0 400;transition:stroke-dasharray .4s ease}
.begin-label{font:500 10.5px/1.4 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--dim);max-width:96px}
.begin:not(:disabled) .begin-label{color:#fff}
.begin:not(:disabled):hover .ring{filter:drop-shadow(0 0 12px rgba(255,210,130,.6))}
.begin:not(:disabled) .ring{animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.05)}}
.gate-note{font:400 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.gate-teaser{font:400 12.5px/1.5 var(--mono);color:#aeb6c7;letter-spacing:.06em;min-height:1.5em}
.gate-teaser b{color:var(--amber-hi);font-weight:500}
.linkish{font:400 11px/1 var(--mono);letter-spacing:.18em;color:var(--dim);text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:4px}
.linkish:hover{color:#fff}

.skip{position:fixed;right:18px;bottom:calc(var(--barh) + 14px);z-index:11;font:500 11px/1 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.45);padding:10px 12px}
.skip:hover{color:#fff}

/* ---------- live HUD ---------- */
.hud{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity 2.4s ease}
.hud.on{opacity:1}
.hud a,.hud button{pointer-events:auto}
.topbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:22px 26px;gap:16px}
.brand-title{font-weight:300;font-size:14px;letter-spacing:.5em}
.brand-sub{font:400 10.5px/1.6 var(--mono);color:var(--dim);letter-spacing:.12em;margin-top:6px;text-transform:uppercase}
.topright{display:flex;align-items:center;gap:18px;font:500 11px/1 var(--mono);letter-spacing:.14em}
.clock .k{color:var(--faint)}
.status{display:flex;align-items:center;gap:8px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--warn)}
.dot.live{background:var(--good);box-shadow:0 0 10px var(--good);animation:pulse 2s infinite}
.dot.dead{background:var(--bad)}
@keyframes pulse{50%{opacity:.35}}

.readout{position:absolute;right:30px;top:50%;transform:translateY(-54%);text-align:right;width:min(34vw,340px)}
.r-label{font:500 10.5px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
.r-pct{font-weight:200;font-size:clamp(64px,9vw,128px);line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:10px;
  background:linear-gradient(180deg,#fff 10%,var(--amber-hi) 70%,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.r-unit{font-size:.36em;font-weight:300;margin-left:4px;vertical-align:.95em;letter-spacing:0}
.r-bar{height:1px;background:var(--line);margin:16px 0 14px;position:relative}
.r-fill{position:absolute;right:0;top:-1px;height:3px;width:0;background:linear-gradient(90deg,var(--amber-lo),var(--amber-hi));box-shadow:0 0 12px rgba(255,200,100,.6);transition:width 1s ease}
.r-litres{font:400 13px/1.4 var(--mono);letter-spacing:.08em;color:#d6dbe6}
.r-litres span:first-child{font-weight:700;color:#fff}
.est{font:700 8.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#000;background:var(--amber);padding:2px 4px;border-radius:3px;margin-left:4px;vertical-align:1px;pointer-events:auto;cursor:help}
.r-conv{margin-top:14px;font:400 11.5px/1.9 var(--mono);color:var(--dim);letter-spacing:.04em}
.r-conv b{color:#e8ecf3;font-weight:500}

.log{position:absolute;left:26px;top:50%;transform:translateY(-50%);width:230px;font:400 11px/1.75 var(--mono);color:var(--dim)}
.log-h{display:flex;justify-content:space-between;letter-spacing:.2em;text-transform:uppercase;font-size:9.5px;color:var(--faint);border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:8px}
.log ul{list-style:none;margin:0;padding:0}
.log li{display:flex;gap:10px;animation:logIn .6s ease}
.log li .ts{color:var(--faint)} .log li .vv{color:var(--amber-hi)}
@keyframes logIn{from{opacity:0;transform:translateX(-6px)}}

.footer{position:absolute;left:0;right:0;bottom:0;padding:90px 26px 18px;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.45) 55%,transparent);display:flex;flex-direction:column;align-items:center;gap:14px}
.fact{max-width:620px;text-align:center;font-weight:400;font-size:13.5px;line-height:1.6;color:#e2e7ef;text-shadow:0 1px 10px rgba(0,0,0,.8);min-height:3.2em;transition:opacity .8s}
.fact b{color:var(--amber-hi);font-weight:600}
.scale{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.scale i{font-style:normal;opacity:.6}
.scale .here{color:var(--amber-hi);text-shadow:0 0 12px rgba(255,200,100,.5)}
.footbar{align-self:stretch;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.controls{display:flex;gap:16px}
.controls button{font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);padding:6px 0;border-bottom:1px solid transparent}
.controls button:hover{color:#fff;border-color:var(--line)}
.credit{font:400 10px/1.6 var(--mono);color:var(--faint);text-align:right;max-width:560px}
.credit a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--line)}
.credit a:hover{color:#fff}
.credit b{color:var(--dim);font-weight:500}

@media (max-width:760px){
  .topbar{padding:16px}
  .brand-title{font-size:12px;letter-spacing:.36em}
  .brand-sub,.clock{display:none}
  .log{display:none}
  .readout{left:16px;right:16px;top:58px;bottom:auto;transform:none;width:auto;text-align:left}
  .r-label{display:none}
  .r-bar{margin:10px 0 8px}
  .r-fill{left:0;right:auto}
  .r-pct{font-size:58px;margin-top:4px}
  .r-conv{display:none}
  .footer{padding:0 16px 14px;gap:10px}
  .fact{font-size:12.5px;text-align:left;align-self:stretch}
  .scale{justify-content:flex-start;align-self:stretch;font-size:9px;letter-spacing:.12em}
  .footbar{flex-direction:column;align-items:flex-start}
  .credit{text-align:left}
  .gate-title{letter-spacing:.3em;padding-left:.3em}
}
@media (prefers-reduced-motion:reduce){
  .cap,.bar,.hud{transition-duration:.01s}
}