/* tts — on air. A broadcast booth at night: deep green-black, a teal level meter beside
   every heading, one red ON AIR lamp. Display: Big Shoulders Display (signage). Text:
   Onest. Commands: JetBrains Mono. */

:root {
  --page-bg: #0e1615;
  --page-text: #dfe9e6;
  --page-muted: #97ada8;
  --page-line: #213230;
  --page-accent: #5fd3c6;
  --page-ui: "Onest", system-ui, sans-serif;
  --display: "Big Shoulders Display", "Onest", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --surface: #13201e;
  --raise: #1a2a28;
  --code-bg: #13201e;
  --code-text: #c9f1ea;
  --strong: #f2f8f6;
  --onair: #d2382a;
  --k-ink: #cfe1dd; --k-accent: var(--page-accent); --k-a: #ffb347; --k-b: var(--page-accent); --k-c: #9fb7ff;
  --k-d: #e58cc9; --k-ok: #7fdc8f; --k-err: var(--onair); --k-muted: #6f8783; --k-file: #a9bdb8;
  color-scheme: dark;
}

.kicker { display: flex; align-items: center; gap: 12px; }
.onair {
  font: 800 12px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
  background: var(--onair); padding: 5px 8px 4px; border-radius: 3px; box-shadow: 0 0 18px #ff5a4a88;
}
.hero h1 { font: 800 clamp(56px, 9vw, 128px)/0.9 var(--display); text-transform: uppercase; letter-spacing: 0.005em; }
.hero pre { margin-top: 28px; }
.part > h2 { display: flex; align-items: center; gap: 14px; font: 800 clamp(32px, 4vw, 52px)/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }
.meter { flex: none; display: inline-block; width: 30px; height: 26px;
  background:
    linear-gradient(var(--page-accent), var(--page-accent)) 0 100% / 4px 40% no-repeat,
    linear-gradient(var(--page-accent), var(--page-accent)) 6px 100% / 4px 70% no-repeat,
    linear-gradient(var(--page-accent), var(--page-accent)) 12px 100% / 4px 100% no-repeat,
    linear-gradient(#ffb347, #ffb347) 18px 100% / 4px 55% no-repeat,
    linear-gradient(var(--onair), var(--onair)) 24px 100% / 4px 25% no-repeat; }
.fig { padding: 18px; background: var(--surface); border: 1px solid var(--page-line); border-radius: 8px; }
.dg .curve { fill: none; stroke: var(--k); stroke-width: 2.5; }
.facts li { border-left-color: var(--page-accent); }