:root { --bg: #f7f9fb; --fg: #15202b; --muted: #5b6875; --line: #d7dee5; --accent: #0b5cad; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f1419; --fg: #e7ecf0; --muted: #94a3b2; --line: #26313b; --accent: #6cb0f5; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 640px; margin: 0 auto; padding: 32px 16px 48px; }
h1 { font-size: 28px; margin: 0 0 8px; letter-spacing: -0.01em; }
h2 { font-size: 16px; margin: 32px 0 8px; color: var(--muted); font-weight: 600; }
a { color: var(--accent); }
.lead { margin: 0; color: var(--muted); }
.muted { color: var(--muted); font-size: 14px; }
.stations { list-style: none; padding: 0; margin: 0; }
.stations li { display: grid; grid-template-columns: 1fr auto; gap: 0 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.stations .name { font-weight: 600; }
.stations .value { grid-row: span 2; align-self: center; font-size: 24px; font-variant-numeric: tabular-nums; }
.notice { margin-top: 24px; padding: 8px 12px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.credit { font-size: 13px; color: var(--muted); }