/* ssml — a specimen sheet. White stock, syntax colours as the only ornament; Martian Mono
   for display, IBM Plex Sans for reading. Headings are opened as tags. */

:root {
  --page-bg: #fbfaf7;
  --page-text: #23211d;
  --page-muted: #5f5a52;
  --page-line: #e2ddd2;
  --page-accent: #a8441a;
  --page-ui: "IBM Plex Sans", system-ui, sans-serif;
  --display: "Martian Mono", ui-monospace, monospace;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --surface: #ffffff;
  --raise: #f1ede4;
  --code-bg: #f1ede4;
  --code-text: #7a3510;
  --strong: #14120f;
  --k-ink: #23211d; --k-accent: #c4561c; --k-a: #1f6fb2; --k-b: #2f7d55; --k-c: #8a3fb8;
  --k-d: #a87d12; --k-ok: #2f7d55; --k-err: #c0392b; --k-muted: #8f897d; --k-file: #6b655a;
  color-scheme: light;
}

.hero h1 { font: 600 clamp(56px, 9vw, 120px)/1 var(--display); letter-spacing: -0.04em; color: var(--page-accent); }
.part > h2 { font: 500 clamp(22px, 2.8vw, 32px)/1.2 var(--display); letter-spacing: -0.02em; }
.part > h2::before { content: "<"; color: var(--page-accent); }
.part > h2::after { content: ">"; color: var(--page-accent); }
.term { background: #1b1915; }
.term code { color: #efe6d6; }
.term .p { color: #fff; }
.term .p::before { color: #f0a070; }
.term .o { color: #e8c9a8; white-space: pre-wrap; overflow-wrap: anywhere; }
.term .e { color: #ff9b8f; }
.fig { padding: 18px; background: var(--surface); border: 1px solid var(--page-line); border-radius: 4px; }
.dg .xbox { fill: color-mix(in srgb, var(--k) 5%, transparent); stroke: var(--k); stroke-width: 1.3; }
.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-weight: 600; }
table { background: var(--surface); border: 1px solid var(--page-line); }