:root {
  color-scheme: dark;
  font-family: "Segoe UI", Arial, sans-serif;
  color: #e1e5e3;
  background: #0d1112;
  font-synthesis: none;
  --muted: #a6b3ae;
  --line: #34413d;
  --accent: #b2cbbb;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; }
.broadcast {
  width: min(100vw, 177.777778vh);
  aspect-ratio: 16 / 9;
  padding: 2.2%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 1.7em;
  font-size: min(1.04vw, 1.8489vh);
  background: #151b1a;
  border: 1px solid var(--line);
}
p, h1, h2, h3, dl { margin: 0; }
.masthead, .panel-heading, .footer, .event-row { display: flex; align-items: center; }
.masthead, .footer { justify-content: space-between; gap: 1em; }
.eyebrow { font-size: .7em; text-transform: uppercase; letter-spacing: .17em; color: var(--accent); }
h1 { font-size: 2.5em; line-height: 1.15; font-weight: 500; margin: .2em 0; letter-spacing: -.025em; }
.subtitle, .muted { color: var(--muted); font-size: .85em; line-height: 1.55; }
.mode { display: grid; justify-items: end; gap: .7em; font-size: .8em; color: var(--muted); }
.badge { border: 1px solid #869e8f; padding: .7em 1em; color: #d4e7d9; letter-spacing: .12em; font-weight: 600; }
.panels { min-height: 0; display: grid; grid-template-columns: 1fr 1.6fr 1.1fr; grid-template-rows: 1fr 1fr; gap: 1em; }
.panel { min-width: 0; min-height: 0; padding: 1.25em; border: 1px solid var(--line); background: #1b2320; }
.panel-heading { gap: .65em; padding-bottom: 1em; border-bottom: 1px solid var(--line); }
h2 { font-size: .95em; font-weight: 500; }
h3 { font-size: 1em; font-weight: 500; line-height: 1.5; }
.index { color: var(--muted); font-size: .65em; letter-spacing: .1em; }
.tag { margin-left: auto; font-size: .65em; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.clock { grid-area: 1 / 1; }
.weather { grid-area: 2 / 1; }
.events { grid-area: 1 / 2 / 3 / 3; display: flex; flex-direction: column; }
.population { grid-area: 1 / 3; }
.ranking { grid-area: 2 / 3; }
.clock-face { margin: 1em auto .7em; width: 6em; height: 6em; border: 1px dashed #748a7c; border-radius: 50%; display: grid; place-items: center; }
.clock-face span { font-size: 1.7em; font-variant-numeric: tabular-nums; color: var(--accent); }
.clock > p { text-align: center; }
.placeholder-value { font-size: .9em; margin-bottom: .35em; }
.event-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .75em; padding: 1.3em 0; }
.orbit { display: grid; place-items: center; width: 8em; height: 8em; border: 1px solid #62786b; border-radius: 50%; outline: 1px dashed #344d40; outline-offset: .65em; margin: .5em 0 1em; }
.orbit span { font-size: .65em; letter-spacing: .25em; color: var(--accent); }
.event-stage h3 { font-size: 1.35em; }
.event-row { padding: 1em 0; border-top: 1px solid var(--line); gap: 1em; }
.event-row:last-child { padding-bottom: 0; }
.event-number { border: 1px solid #526659; color: var(--accent); width: 2.2em; height: 2.2em; display: grid; place-items: center; font-size: .8em; }
.dash { margin-left: auto; color: var(--muted); }
.stats { display: grid; gap: .8em; margin: 1.1em 0; }
.stats div { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
dt { font-size: .85em; color: var(--muted); }
dd { margin: 0; font-size: 1.3em; }
.weather-lines { display: grid; gap: .55em; margin: 1.8em 0; width: 5em; }
.weather-lines span { border-top: 1px dashed #97b29f; }
.weather-lines span:nth-child(2) { width: 70%; }
.weather .state { margin-top: 1.5em; }
.state { display: flex; align-items: center; gap: .6em; font-size: .75em; color: var(--muted); }
.state-dot { width: .5em; height: .5em; border-radius: 50%; background: #adc4b5; flex-shrink: 0; }
.state-dot.offline { background: #c8ab84; }
.ranking-list { margin: 1em 0; padding-left: 1.8em; color: var(--muted); }
.ranking-list li { padding: .55em 0 .55em .5em; font-size: .85em; border-bottom: 1px solid var(--line); }
.ranking-list li span:last-child { float: right; }
.footer { padding-top: 1em; border-top: 1px solid var(--line); color: var(--muted); }
.footer > p:last-child { font-size: .75em; letter-spacing: .04em; }
@media (max-width: 700px) {
  body { display: block; }
  .broadcast { width: 100%; aspect-ratio: auto; font-size: 14px; padding: 20px; }
  .masthead { align-items: flex-start; flex-direction: column; }
  .mode { justify-items: start; }
  .panels { grid-template-columns: 1fr; grid-template-rows: auto; }
  .panel { grid-area: auto; }
  .events { min-height: 440px; }
  .footer { align-items: flex-start; flex-direction: column; }
  .footer-detail { display: none; }
}