/* azstt — an instrument for listening. Dark azure glass, cyan traces, Chakra Petch for
   panel labels. Motif: a waveform trace that turns into a text cursor. */

:root {
  --page-bg: #0b1520;
  --page-text: #dce8f4;
  --page-muted: #93a8bf;
  --page-line: #1f3045;
  --page-accent: #58a6ff;
  --page-ui: "Onest", system-ui, sans-serif;
  --display: "Chakra Petch", "Onest", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --surface: #0f1c2a;
  --raise: #152536;
  --code-bg: #0f1c2a;
  --code-text: #bfe0ff;
  --strong: #f2f8ff;
  --k-ink: #d0e0f0; --k-accent: var(--page-accent); --k-a: #7ee0d2; --k-b: #a98bff; --k-c: #ffc36b;
  --k-d: #ff8fb0; --k-ok: #8be3a4; --k-err: #ff7b72; --k-muted: #6d859e; --k-file: #93a8bf;
  color-scheme: dark;
}

.hero h1 { font: 600 clamp(46px, 7vw, 92px)/0.98 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }
.hero h1::after { content: ""; display: block; width: 220px; height: 22px; margin-top: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 22'%3E%3Cpath d='M0 11h20l4-8 5 16 5-12 4 8 4-6 5 10 4-8h20' fill='none' stroke='%2358a6ff' stroke-width='2'/%3E%3Crect x='96' y='3' width='9' height='16' fill='%2358a6ff'/%3E%3C/svg%3E") no-repeat; }
.part > h2 { font: 600 clamp(26px, 3.2vw, 38px)/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.term .o { white-space: pre-wrap; overflow-wrap: anywhere; }
.fig { padding: 18px; background: var(--surface); border: 1px solid var(--page-line); border-radius: 6px; }
.dg .lab-bg { fill: var(--surface); }
.dg .halo { stroke: var(--surface); }
.facts li { border-left-color: var(--page-accent); }