:root{
  --paper:#eef1f0;
  --paper-raised:#e4e9e7;
  --ink:#131c22;
  --ink-soft:#51636b;
  --rule:#c7d2d0;
  --cold:#2a5c88;
  --cold-soft:#a9c7dd;
  --warm:#c1531f;
  --warm-soft:#e8b190;
  --band:rgba(42,92,136,0.08);
  --focus:#a8631a;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --sans:"Inter","Space Grotesk",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#101619;
    --paper-raised:#161e22;
    --ink:#e7edea;
    --ink-soft:#a7b6bb;
    --rule:#2b3a3f;
    --cold:#8fc0e8;
    --cold-soft:#2f4d63;
    --warm:#e88a52;
    --warm-soft:#6b3d24;
    --band:rgba(143,192,232,0.09);
    --focus:#e0a94a;
  }
}
:root[data-theme="dark"]{
  --paper:#101619;
  --paper-raised:#161e22;
  --ink:#e7edea;
  --ink-soft:#a7b6bb;
  --rule:#2b3a3f;
  --cold:#8fc0e8;
  --cold-soft:#2f4d63;
  --warm:#e88a52;
  --warm-soft:#6b3d24;
  --band:rgba(143,192,232,0.09);
  --focus:#e0a94a;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
}
.wrap{max-width:44rem;margin:0 auto;padding:0 1.25rem}
.top{padding-top:1.25rem;font-size:0.85rem}
.top a{color:var(--ink-soft);text-decoration:none}
.top a:hover{color:var(--ink)}
.langbar{font-size:0.85rem;margin:1.5rem 0 0;color:var(--ink-soft)}
.langbar a{color:var(--ink-soft)}
.langbar .current{color:var(--ink);font-weight:600}
.masthead{margin:1.5rem 0 2rem}
.kicker{
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:0.78rem;
  color:var(--ink-soft);
  margin:0 0 0.6rem;
}
h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2.1rem,6vw,3.1rem);
  line-height:1.08;
  margin:0 0 0.9rem;
  letter-spacing:-0.01em;
}
.deck{
  font-size:1.15rem;
  line-height:1.5;
  color:var(--ink-soft);
  margin:0;
  max-width:38rem;
}
article p, article li{max-width:36rem}
.lede{font-size:1.08rem;color:var(--ink)}
h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.55rem;
  margin:2.6rem 0 0.9rem;
  letter-spacing:-0.005em;
}
a{color:var(--cold)}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.stat-row{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule);margin:1.8rem 0;border:1px solid var(--rule)}
.stat{flex:1 1 10rem;background:var(--paper-raised);padding:1rem 1.1rem}
.stat .num{font-family:var(--mono);font-size:1.3rem;font-weight:700;color:var(--ink)}
.stat .lbl{font-size:0.85rem;color:var(--ink-soft);margin-top:0.3rem}

.dial{
  margin:2rem 0;
  border:1px solid var(--rule);
  background:var(--paper-raised);
  padding:1.25rem 1.1rem 1.5rem;
}
.dial-head{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:0.8rem;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--ink-soft);margin-bottom:0.8rem;
}
.window-stage{display:flex;justify-content:center;margin:0.4rem 0 1rem}
svg.window-svg{width:100%;max-width:22rem;height:auto;display:block}
.window-frame{fill:none;stroke:var(--ink-soft);stroke-width:3}
.window-sash{fill:var(--band);stroke:var(--ink-soft);stroke-width:2}
.window-mullion{stroke:var(--ink-soft);stroke-width:3}
.window-muntin{stroke:var(--ink-soft);stroke-width:1.4;opacity:0.55}
.window-gap{fill:var(--paper)}

.dial-readout{text-align:center;margin:0.2rem 0 1rem}
.dial-readout .pct{font-family:var(--mono);font-size:2.1rem;font-weight:700;color:var(--ink)}
.dial-readout .pct-lbl{font-size:0.9rem;color:var(--ink-soft);margin-top:0.1rem}
.dial-readout .point-flag{font-size:0.8rem;color:var(--warm);font-weight:600;margin-top:0.35rem;min-height:1.1em}

.dial-control{margin:0 auto;max-width:26rem}
.dial-slider{width:100%;accent-color:var(--warm);height:1.6rem;cursor:pointer}
.dial-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:0.78rem;color:var(--ink-soft);margin-top:0.2rem}
.dial-marks{position:relative;height:1.1rem;margin-top:0.1rem}
.dial-mark{position:absolute;top:0;transform:translateX(-50%);font-family:var(--mono);font-size:0.68rem;color:var(--ink-soft);white-space:nowrap}
.dial-mark::before{content:"";position:absolute;left:50%;top:-0.35rem;width:1px;height:0.3rem;background:var(--ink-soft)}
.dial-caption{font-size:0.82rem;color:var(--ink-soft);margin:1rem 0 0}

.lab-bars{margin:1.4rem 0 0;display:flex;flex-direction:column;gap:0.6rem}
.lab-bar-row{display:flex;align-items:center;gap:0.7rem;font-size:0.85rem}
.lab-bar-name{width:11rem;flex:0 0 auto;color:var(--ink-soft)}
.lab-bar-track{flex:1;height:0.7rem;background:var(--rule);position:relative;border-radius:2px;overflow:hidden}
.lab-bar-fill{position:absolute;inset:0 auto 0 0;border-radius:2px}
.lab-bar-fill.warm{background:var(--warm)}
.lab-bar-fill.cold{background:var(--cold)}
.lab-bar-val{font-family:var(--mono);width:3.4rem;flex:0 0 auto;text-align:right}

.method{
  font-size:0.92rem;color:var(--ink-soft);
  border-top:1px solid var(--rule);margin-top:2.6rem;padding-top:1.4rem;
}
.method h2{font-size:1.15rem;margin-top:0}
.sources-list{font-size:0.88rem;color:var(--ink-soft);padding-left:1.1rem}
.sources-list li{margin-bottom:0.5rem}

footer{
  font-size:0.82rem;color:var(--ink-soft);
  margin:3rem 0 2.5rem;padding-top:1.2rem;border-top:1px solid var(--rule);
}
footer a{color:var(--ink-soft)}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media (max-width:480px){
  body{font-size:16.5px}
  .stat{flex:1 1 100%}
  .lab-bar-name{width:7.6rem;font-size:0.8rem}
}

@media (prefers-reduced-motion: reduce){
  .window-sash, .window-gap, .lab-bar-fill{transition:none}
}