/* One big idea per slide, readable across a room. Same colors as /live. */
:root {
  --bg: #081f3d; --panel: #0d2c54; --line: #1f4170; --ink: #ffffff; --muted: #a9bdd8;
  --today: #3987e5; --today-now: #9ec5f4; --compare1: #c3c2b7; --compare2: #8a93a0; --early: #d95926;
  --rep: #e0605a; --dem: #3987e5; --una: #c9a227; --oth: #a17fd6; --good: #5cc28f;
  --ui: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--ui); overflow: hidden; }
body { display: flex; flex-direction: column; padding: clamp(14px, 2vw, 40px); gap: clamp(10px, 1.4vw, 28px); font-size: clamp(14px, 1.15vw, 26px); cursor: none; }
header { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.kicker { color: var(--muted); font-size: clamp(14px, 1.3vw, 28px); font-weight: 600; letter-spacing: .02em; }
h1 { margin: .1em 0 0; font-size: clamp(26px, 3.2vw, 70px); font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.clock { text-align: right; font-size: clamp(22px, 2.6vw, 56px); font-weight: 600; font-variant-numeric: tabular-nums; }
.clock small { display: block; color: var(--muted); font-size: clamp(12px, .9vw, 20px); font-weight: 400; }
.stage { flex: 1; min-height: 0; position: relative; }
.slide { position: absolute; inset: 0; display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 24px); opacity: 0; transition: opacity .6s; }
.slide.on { opacity: 1; }
.chart { flex: 1; min-height: 0; position: relative; }
.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
svg text { font-family: var(--ui); }
.legend { display: flex; gap: 8px 26px; flex-wrap: wrap; color: var(--muted); font-size: clamp(13px, 1.1vw, 24px); }
.legend span { display: inline-flex; align-items: center; gap: 9px; }
.key { width: 18px; height: 18px; border-radius: 4px; display: inline-block; }
.key.line { height: 4px; width: 26px; border-radius: 2px; }
.hero { flex: 1; display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(14px, 2vw, 40px); align-items: center; }
.big { font-size: clamp(80px, 13vw, 300px); font-weight: 700; line-height: .95; letter-spacing: -.03em; }
.big-note { color: var(--muted); font-size: clamp(16px, 1.6vw, 34px); margin-top: .4em; }
.stats { display: grid; gap: clamp(10px, 1.2vw, 24px); }
.stat { background: var(--panel); border-radius: 12px; padding: clamp(12px, 1.2vw, 26px) clamp(14px, 1.5vw, 30px); }
.stat .label { color: var(--muted); font-size: clamp(13px, 1.05vw, 23px); }
.stat .value { font-size: clamp(30px, 3.6vw, 80px); font-weight: 650; line-height: 1.05; }
.stat .note { color: var(--muted); font-size: clamp(12px, .95vw, 21px); }
.parties { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 28px); align-items: stretch; }
.party { background: var(--panel); border-radius: 12px; padding: clamp(14px, 1.6vw, 32px); display: flex; flex-direction: column; justify-content: space-between; border-top: 8px solid; }
.party .name { font-size: clamp(18px, 1.8vw, 40px); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.party .pct { font-size: clamp(40px, 5.2vw, 120px); font-weight: 700; line-height: 1; }
.party .meter { height: clamp(10px, 1vw, 20px); background: var(--line); border-radius: 99px; overflow: hidden; }
.party .meter i { display: block; height: 100%; border-radius: 99px; }
.party .note { color: var(--muted); font-size: clamp(13px, 1.1vw, 24px); }
.sub { color: var(--muted); font-size: clamp(14px, 1.3vw, 28px); }
footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--muted); font-size: clamp(12px, .9vw, 19px); }
body.pointer { cursor: auto; }
.dots { display: flex; gap: 10px; }
.dots button { display: block; padding: 12px 0; margin: -12px 0; border: 0; background: none; cursor: pointer; }
.dots button:hover i { filter: brightness(1.8); }
.dots button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.dots i { display: block; width: clamp(30px, 3vw, 64px); height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; position: relative; }
.dots i.on::after { content: ""; position: absolute; inset: 0; background: var(--muted); transform-origin: left; animation: fill var(--dur) linear forwards; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.banner { background: #5a3a0a; color: #ffe6b0; border-radius: 8px; padding: 6px 12px; font-size: clamp(12px, .9vw, 19px); }
.center { flex: 1; display: grid; place-content: center; text-align: center; gap: .6em; }
.center .big { font-size: clamp(50px, 7vw, 160px); }
@media (max-width: 800px) {
  html, body { overflow: auto; height: auto; } body { cursor: auto; }
  .stage { min-height: 80vh; } .hero, .parties { grid-template-columns: 1fr 1fr; } .hero { grid-template-columns: 1fr; }
}