:root{
  --bg:#0b1020;
  --bg-raised:#121935;
  --ink:#e8ecf7;
  --ink-dim:#9aa4c4;
  --rule:#26305a;
  --accent-cold:#5fb4ff;
  --accent-hot:#ff8a5b;
  --accent-mid:#c9d3ff;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --max:760px;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.top{padding:22px 24px}
.top a{color:var(--ink-dim);text-decoration:none;font-family:var(--mono);font-size:14px;letter-spacing:.02em}
.top a:hover{color:var(--ink)}
.langbar{font-family:var(--mono);font-size:13px;color:var(--ink-dim);margin:0 0 28px}
.langbar .current{color:var(--ink)}
.langbar a{color:var(--accent-cold);text-decoration:none}
.langbar a:hover{text-decoration:underline}
.masthead{margin-bottom:8px}
.kicker{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-hot);margin:0 0 14px}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,6vw,52px);line-height:1.08;margin:0 0 20px;color:var(--ink)}
.deck{font-size:20px;line-height:1.55;color:var(--ink-dim);margin:0 0 36px;max-width:62ch}
h2{font-family:var(--serif);font-weight:600;font-size:26px;margin:44px 0 14px;color:var(--ink)}
p{margin:0 0 18px}
.lede{font-size:20px;color:var(--ink)}
em{color:var(--ink);font-style:italic}
strong{color:var(--ink);font-weight:600}
a{color:var(--accent-cold)}

.wave-panel{
  background:var(--bg-raised);
  border:1px solid var(--rule);
  border-radius:14px;
  padding:24px;
  margin:32px 0;
}
.wave-head{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:13px;color:var(--ink-dim);margin-bottom:16px;flex-wrap:wrap;gap:6px}
.wave-stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:radial-gradient(ellipse at center, #0e1530 0%, #080b17 100%);
  border-radius:10px;
  overflow:hidden;
}
.wave-stage svg{width:100%;height:100%;display:block}
.wave-source{fill:var(--ink)}
.wave-ring{fill:none;stroke-width:2.2}
.wave-readout{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-top:16px;
  gap:16px;
  flex-wrap:wrap;
}
.wave-time{font-family:var(--mono);font-size:clamp(32px,7vw,48px);font-weight:700;color:var(--ink);line-height:1}
.wave-time .unit{font-size:18px;color:var(--ink-dim);font-weight:400;margin-left:6px}
.wave-sub{font-family:var(--mono);font-size:13px;color:var(--ink-dim);text-align:right}
.city-picker{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}
.city-btn{
  font-family:var(--mono);
  font-size:13px;
  background:transparent;
  border:1px solid var(--rule);
  color:var(--ink-dim);
  padding:7px 12px;
  border-radius:999px;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.city-btn:hover{border-color:var(--accent-cold);color:var(--ink)}
.city-btn[aria-pressed="true"]{background:var(--accent-cold);color:#08101f;border-color:var(--accent-cold);font-weight:600}
.city-btn .t{opacity:.75;margin-left:4px}

.race-panel{margin:32px 0}
.race-row{display:grid;grid-template-columns:120px 1fr 90px;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule)}
.race-row:last-child{border-bottom:none}
.race-name{font-family:var(--mono);font-size:13px;color:var(--ink-dim)}
.race-track{position:relative;height:10px;background:#141c3c;border-radius:6px;overflow:hidden}
.race-fill{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,var(--accent-cold),var(--accent-hot))}
.race-time{font-family:var(--mono);font-size:13px;color:var(--ink);text-align:right}

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:32px 0}
.stat{background:var(--bg-raised);border:1px solid var(--rule);border-radius:12px;padding:18px}
.stat .num{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--ink)}
.stat .lbl{font-size:14px;color:var(--ink-dim);margin-top:6px}

.method{background:var(--bg-raised);border:1px solid var(--rule);border-radius:12px;padding:22px 24px;margin:28px 0}
.method h2{margin-top:0}
.sources-list{padding-left:20px;margin:0}
.sources-list li{margin-bottom:10px;color:var(--ink-dim);font-size:15px}
.sources-list a{color:var(--accent-cold)}

footer{margin:56px 0 40px;padding-top:24px;border-top:1px solid var(--rule);color:var(--ink-dim);font-size:14px}
footer a{color:var(--accent-cold)}
.author-credit{display:inline-block;margin-top:6px}

.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:560px){
  body{font-size:16px}
  .race-row{grid-template-columns:90px 1fr 70px;gap:8px}
  .wave-panel,.method{padding:18px}
}

@media (prefers-reduced-motion: reduce){
  .wave-ring, .race-fill{transition:none !important;animation:none !important}
}