/* aztts — a markup specimen. Cool paper and Azure ink; Literata for the voice of the page,
   JetBrains Mono for every tag; angle brackets mark each section. */

:root {
  --page-bg: #f3f6fa;
  --page-text: #1b2a3c;
  --page-muted: #4f6278;
  --page-line: #d3dde9;
  --page-accent: #1f68b8;
  --page-ui: "Onest", system-ui, sans-serif;
  --display: "Literata", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --surface: #fbfcfe;
  --raise: #e8eef6;
  --code-bg: #e8eef6;
  --code-text: #12355e;
  --strong: #0f2138;
  --k-ink: #1b2a3c; --k-accent: #1f68b8; --k-a: #0f7b8a; --k-b: #7a4fc0; --k-c: #b8541f;
  --k-d: #3b7a3b; --k-ok: #2f7d4a; --k-err: #c0392b; --k-muted: #7b8ca2; --k-file: #5c6f86;
  color-scheme: light;
}

.hero h1 { font: 700 clamp(40px, 5.8vw, 76px)/1.04 var(--display); letter-spacing: -0.02em; }
.part > h2 { display: flex; align-items: baseline; gap: 12px; font: 700 clamp(28px, 3.3vw, 40px)/1.1 var(--display); }
.ab { font: 600 0.6em var(--mono); color: var(--page-accent); }
.term { background: #0f2138; }
.term code { color: #d6e6fb; }
.term .p { color: #ffffff; }
.term .p::before { color: #7fb5f0; }
.term .o { color: #a9c4e6; white-space: pre-wrap; overflow-wrap: anywhere; }
.term .c { color: #7f98b8; }
.fig { padding: 18px; background: var(--surface); border: 1px solid var(--page-line); border-radius: 8px; }
.dg .lab-bg { fill: var(--surface); }
.dg .halo { stroke: var(--surface); }
.dg .xbox { fill: color-mix(in srgb, var(--k) 6%, transparent); stroke: var(--k); stroke-width: 1.4; }
.dg .xtag { fill: var(--k); font-weight: 600; }
.dg .xattr { fill: var(--page-muted); }
.dg .xval { fill: var(--k); }
.dg .xtext { fill: var(--strong); font-family: var(--display); font-weight: 600; }
.facts li { border-left-color: var(--page-accent); }