@font-face{font-family:"Archivo";src:url("../fonts/archivo-var.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
html,body{margin:0}
/* Layout: full-bleed 3D stage; brand header + rack figures on the left, compare / explain / proof tabs
   on the right, caption + controls bottom-centre. Stacks to one column under 980px. */
:root{
  --paper:#F5F6FA; --night:#0A0C3D; --proof:#2E2BFF; --signal:#FFD23F;
  --mist:#DFE2EE; --steel:#50566F; --haze:#B9BDF7;

  --bg:var(--paper);
  --panel:rgba(255,255,255,.86);
  --panel-line:rgba(10,12,61,.08);
  --ink:var(--night);
  --muted:var(--steel);
  --rule:var(--mist);
  --accent:var(--proof);
  --accent-ink:#FFFFFF;
  --accent-soft:rgba(46,43,255,.16);
  --track:#E7E9F2;
  --other:#A6ABC4;
  --chip:#FFFFFF;
  --chip-line:#D6D9E6;
  --signal-line:rgba(10,12,61,.55);
  --grid:rgba(10,12,61,.09);
  --flag:#B4541A;
  --shadow:0 1px 2px rgba(10,12,61,.05),0 8px 24px rgba(10,12,61,.06);
  --m-frame:#111327;
  --m-floor:rgba(10,12,61,.10);
  --f:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:var(--night); --panel:rgba(18,21,84,.82); --panel-line:rgba(185,189,247,.14);
    --ink:#FFFFFF; --muted:var(--haze); --rule:rgba(185,189,247,.16);
    --accent:#8F8DFF; --accent-ink:#0A0C3D; --accent-soft:rgba(143,141,255,.24);
    --track:rgba(185,189,247,.12); --other:rgba(185,189,247,.42);
    --chip:rgba(255,255,255,.04); --chip-line:rgba(185,189,247,.22);
    --signal-line:rgba(10,12,61,.9); --grid:rgba(185,189,247,.12); --flag:#FFB27A;
    --shadow:0 1px 2px rgba(0,0,0,.25),0 10px 30px rgba(0,0,0,.25);
    --m-frame:#2C3070; --m-floor:rgba(185,189,247,.12);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:var(--night); --panel:rgba(18,21,84,.82); --panel-line:rgba(185,189,247,.14);
  --ink:#FFFFFF; --muted:var(--haze); --rule:rgba(185,189,247,.16);
  --accent:#8F8DFF; --accent-ink:#0A0C3D; --accent-soft:rgba(143,141,255,.24);
  --track:rgba(185,189,247,.12); --other:rgba(185,189,247,.42);
  --chip:rgba(255,255,255,.04); --chip-line:rgba(185,189,247,.22);
  --signal-line:rgba(10,12,61,.9); --grid:rgba(185,189,247,.12); --flag:#FFB27A;
  --shadow:0 1px 2px rgba(0,0,0,.25),0 10px 30px rgba(0,0,0,.25);
  --m-frame:#2C3070; --m-floor:rgba(185,189,247,.12);
  color-scheme:dark;
}

html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
*{box-sizing:border-box}
[hidden]{display:none!important}
button{font:inherit;color:inherit}

.app{position:relative;height:100%;overflow:hidden;display:grid;
  grid-template-columns:304px minmax(0,1fr) 316px;
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"head . right" "specs . right" "specs bottom right";
  column-gap:24px;
  padding-left:max(24px,env(safe-area-inset-left,0px));
  padding-right:max(24px,env(safe-area-inset-right,0px));
  padding-block:20px 34px;
  pointer-events:none}
.app > *{pointer-events:auto;min-width:0}
.stage{position:absolute;inset:0;pointer-events:auto;z-index:0}
.stage canvas{display:block;width:100%;height:100%;outline:none;cursor:grab;transition:opacity .22s ease}
.stage canvas:active{cursor:grabbing}
.stage canvas.fading{opacity:0}
.head{grid-area:head;z-index:2;align-self:start}
.specs{grid-area:specs;z-index:2;align-self:start;display:flex;flex-direction:column;gap:12px;margin-top:18px}
.right{grid-area:right;z-index:2;align-self:start;display:flex;flex-direction:column;gap:10px;max-height:100%;overflow:auto;scrollbar-width:thin;padding-bottom:4px}
.bottom{grid-area:bottom;z-index:2;align-self:end;justify-self:center;width:min(780px,100%);display:flex;flex-direction:column;gap:12px}

.brand{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.wordmark{font-stretch:125%;font-weight:750;font-size:21px;letter-spacing:-.01em;line-height:1;display:inline-flex;align-items:baseline}
.wordmark i{display:inline-block;width:.52em;height:.52em;background:var(--accent);margin-left:.06em}
.brand .lab{font-stretch:88%;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow{font-stretch:88%;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
h1{font-stretch:125%;font-weight:760;font-size:27px;line-height:1.06;letter-spacing:-.015em;margin:0;text-wrap:balance}
h1 .end{display:inline-block;width:.42em;height:.42em;background:var(--accent);margin-left:.18em}
.live{display:flex;align-items:baseline;gap:8px;margin-top:16px;flex-wrap:wrap}
.live b{font-stretch:125%;font-weight:780;font-size:56px;line-height:.9;letter-spacing:-.03em;color:var(--accent)}
.live span{font-stretch:125%;font-weight:700;font-size:18px}
.live em{font-style:normal;font-stretch:88%;font-size:13px;color:var(--muted)}
.live-sub{display:flex;align-items:center;gap:8px;font-stretch:88%;font-size:12px;color:var(--muted);margin-top:5px}
.pulse{width:8px;height:8px;flex:none;background:var(--signal);outline:1px solid var(--signal-line);outline-offset:-1px;animation:blink 1.1s steps(2,end) infinite}
@keyframes blink{50%{opacity:.35}}

.card{background:var(--panel);border:1px solid var(--panel-line);border-radius:4px;box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.card-h{font-stretch:88%;font-size:11px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
.spec{padding:6px 14px}
.spec dl{margin:0;display:grid;grid-template-columns:auto 1fr;column-gap:10px;font-size:13px}
.spec dt,.spec dd{margin:0;padding:6px 0;border-bottom:1px solid var(--rule)}
.spec dt{color:var(--muted);font-stretch:88%}
.spec dd{text-align:right;font-weight:600}
.spec dd small{display:block;font-weight:450;font-stretch:88%;color:var(--muted);font-size:11.5px}
.spec dt:last-of-type,.spec dd:last-of-type{border-bottom:0}
.topo{padding:12px 14px 10px}
.topo canvas{display:block;width:100%;height:150px;margin-top:8px}
.topo-legend{display:flex;justify-content:space-between;font-stretch:88%;font-size:11px;color:var(--muted);margin-top:4px}
.topo p{margin:8px 0 0;font-size:12px;color:var(--muted);line-height:1.4}

.tabs{display:flex;gap:3px;padding:4px}
.tabs button{flex:1;border:0;background:transparent;padding:7px 4px;border-radius:3px;font-weight:600;font-size:12.5px;cursor:pointer;color:var(--muted);white-space:nowrap}
.tabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
.pane{display:flex;flex-direction:column;gap:10px}
.metric{padding:12px 14px}
.metric .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ratio{font-stretch:125%;font-weight:760;font-size:13px;color:var(--accent)}
.metric .row{display:flex;justify-content:space-between;font-size:12px;margin-top:9px}
.metric .row span:last-child{font-weight:650}
.metric .row.off{color:var(--muted)}
.metric .row.off span:last-child{font-weight:500}
.bar{position:relative;height:10px;background:var(--track);margin-top:4px;overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--other);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.bar.on i{background:var(--accent)}
.note{font-size:11.5px;color:var(--muted);line-height:1.45;margin:0;padding:10px 14px}
.note b{color:var(--ink);font-weight:650}
.how{padding:14px}
.how h3,.proof h3{font-stretch:125%;font-weight:740;font-size:16px;line-height:1.2;margin:0 0 10px}
.how ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.how li{display:grid;grid-template-columns:18px 1fr;gap:8px;font-size:13px;line-height:1.45}
.how li::before{content:"";width:10px;height:10px;margin-top:4px;background:var(--accent)}
.how .sum{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--rule);font-size:13px}
.how .sum b{font-stretch:125%;font-weight:760;color:var(--accent);font-size:15px}
.how .sub{font-size:12px;color:var(--muted);margin:10px 0 0}
.proof{padding:14px}
.proof ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.proof li{display:grid;grid-template-columns:12px 1fr;gap:10px;padding:8px 0;border-top:1px solid var(--rule);font-size:12.5px;line-height:1.4}
.proof li:first-child{border-top:0}
.proof li::before{content:"";width:9px;height:9px;margin-top:4px;background:var(--accent)}
.proof li.flag::before{background:transparent;outline:2px solid var(--flag);outline-offset:-2px}
.proof .eq{font-weight:650}
.proof .why{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.proof li.flag .why{color:var(--flag)}
.sources{padding:12px 14px}
.sources ul{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;font-size:12px}
.sources a{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:2px}
.sources a:hover{color:var(--accent)}

.caption{margin:0;text-align:center;font-stretch:112%;font-weight:700;font-size:20px;line-height:1.25;text-wrap:balance;
  min-height:2.5em;display:flex;align-items:flex-end;justify-content:center;text-shadow:0 0 18px var(--bg),0 0 6px var(--bg),0 0 2px var(--bg)}
.controls{padding:12px 16px;display:grid;grid-template-columns:96px 1fr;row-gap:8px;column-gap:10px;align-items:center}
.controls .lbl{font-stretch:88%;font-size:11px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{border:1px solid var(--chip-line);background:var(--chip);padding:5px 10px;border-radius:3px;font-size:13px;font-weight:550;cursor:pointer;line-height:1.2;white-space:nowrap}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chip:focus-visible,.tabs button:focus-visible,.tour:focus-visible,.steps button:focus-visible,input[type=range]:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.traffic{display:flex;align-items:center;gap:12px}
.traffic output{font-weight:650;min-width:7.6em;text-align:right;font-size:12.5px;white-space:nowrap}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:22px;background:transparent;cursor:pointer;min-width:0}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:linear-gradient(to right,var(--accent) var(--p,35%),var(--track) var(--p,35%))}
input[type=range]::-moz-range-track{height:4px;background:var(--track)}
input[type=range]::-moz-range-progress{height:4px;background:var(--accent)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;background:var(--bg);border:2px solid var(--ink);border-radius:0}
input[type=range]::-moz-range-thumb{width:13px;height:13px;background:var(--bg);border:2px solid var(--ink);border-radius:0}
.tourbar{display:flex;align-items:center;gap:12px}
.tour{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--accent);color:var(--accent-ink);padding:6px 12px;border-radius:3px;font-weight:650;font-size:13px;cursor:pointer;white-space:nowrap}
.tour svg{width:10px;height:10px;fill:currentColor}
.steps{display:flex;gap:4px;flex-wrap:wrap}
.steps button{width:12px;height:12px;border:1px solid var(--chip-line);background:transparent;padding:0;cursor:pointer;border-radius:0}
.steps button.done{background:var(--other);border-color:var(--other)}
.steps button.cur{background:var(--accent);border-color:var(--accent)}
.hint{font-stretch:88%;font-size:11px;color:var(--muted);margin-left:auto;white-space:nowrap}

.callouts{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.callouts svg{position:absolute;inset:0;width:100%;height:100%}
.callouts polyline{stroke:var(--ink);stroke-width:1;fill:none;opacity:.7}
.callouts rect.a{fill:var(--accent);stroke:var(--bg);stroke-width:1.5}
.tag{position:absolute;left:0;top:0;background:var(--panel);border:1px solid var(--ink);color:var(--ink);font-size:12.5px;font-weight:650;
  padding:3px 8px;white-space:nowrap;border-radius:2px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .2s}
.tag small{font-weight:500;color:var(--muted);margin-left:6px;font-size:11.5px}

.foot{position:absolute;left:max(24px,env(safe-area-inset-left,0px));right:max(24px,env(safe-area-inset-right,0px));bottom:7px;z-index:2;
  display:flex;justify-content:space-between;gap:16px;font-stretch:88%;font-size:11px;color:var(--muted);pointer-events:none}
.foot b{color:var(--ink);font-weight:650}
.foot .end{display:inline-block;width:7px;height:7px;background:var(--accent);margin-left:4px}
.fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:var(--muted)}

@media (max-width:980px){
  html,body{height:auto}
  .app{height:auto;overflow:visible;grid-template-columns:minmax(0,1fr);
    grid-template-areas:"head" "stage" "bottom" "right" "specs" "foot";grid-template-rows:none;row-gap:14px;
    padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px 24px}
  .stage{position:relative;inset:auto;grid-area:stage;height:clamp(340px,58vh,560px);margin-inline:-16px}
  .specs{margin-top:0}
  .right{max-height:none;overflow:visible}
  .bottom{width:100%}
  .caption{font-size:18px;min-height:0}
  .controls{grid-template-columns:1fr;row-gap:4px;padding:12px}
  .controls .lbl{margin-top:6px}
  .hint{display:none}
  .live b{font-size:46px}
  h1{font-size:24px}
  .foot{position:static;grid-area:foot;flex-direction:column;gap:4px;pointer-events:auto}
  .tag{font-size:11.5px;padding:2px 6px}
  .tag small{display:none}
}
@media (max-width:980px) and (min-width:640px){
  .app{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head head" "stage stage" "bottom bottom" "right specs" "foot foot"}
}
@media (min-width:981px) and (max-height:900px){ .topo canvas{height:118px} .spec dt,.spec dd{padding:4px 0} .live b{font-size:48px} .brand{margin-bottom:10px} .specs{margin-top:12px;gap:10px} }
@media (prefers-reduced-motion: reduce){ .pulse{animation:none} .bar i{transition:none} .stage canvas{transition:none} }

.brand{display:inline-block;text-decoration:none;color:inherit;margin-bottom:14px}
.brand .lockup{display:block;height:40px;width:auto}
.lockup--white{display:none!important}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .lockup--night{display:none!important} :root:not([data-theme="light"]) .lockup--white{display:block!important} }
:root[data-theme="dark"] .lockup--night{display:none!important}
:root[data-theme="dark"] .lockup--white{display:block!important}