/* gfx-replacer — a swap. Dark slate, a faint pixel mosaic, the demo's red and blue as the two accents;
   Instrument Sans for prose, JetBrains Mono for rules and code. */
:root {
  --page-bg: #111216; --page-text: #e8e6e1; --page-muted: #a3a29c; --page-line: #2a2c33; --page-accent: #6fa8e8;
  --strong: #ffffff; --surface: #181a20; --raise: #20232b; --code-bg: #0c0d10; --code-text: #e6e2d8;
  --page-ui: "Instrument Sans", system-ui, sans-serif; --display: var(--page-ui); --mono: "JetBrains Mono", ui-monospace, monospace;
  --red: #d6453f; --blue: #3478c4;
  --k-ink: #e8e6e1; --k-accent: #6fa8e8; --k-a: #e8a46f; --k-b: #8fb0e8; --k-c: #c79bf0; --k-d: #f09ac2;
  --k-ok: #86d3a5; --k-warn: #e6c46a; --k-err: #f29e8c; --k-muted: #7d8190; --k-file: #a3a29c;
  color-scheme: dark;
}
html, body { background:
  conic-gradient(from 90deg at 1px 1px, #ffffff06 90deg, transparent 0) 0 0 / 16px 16px, var(--page-bg); }
h1 { font: 700 clamp(44px, 7vw, 80px)/1 var(--mono); letter-spacing: -0.04em; }
h1::before { content: ""; display: inline-block; width: 0.42em; height: 0.42em; margin-right: 0.18em; vertical-align: 0.1em;
  background: linear-gradient(135deg, var(--red) 0 50%, var(--blue) 50%); border-radius: 3px; }
h2 { font: 700 clamp(26px, 3.2vw, 36px)/1.1 var(--page-ui); }
.lede { font-size: 20px; }
.fig { padding: 14px 10px; background: var(--surface); border: 1px solid var(--page-line); border-radius: 10px; }
.dg .lab-bg { fill: var(--surface); } .dg .halo { stroke: var(--surface); }
pre.rule { background: var(--code-bg); color: var(--code-text); border: 1px solid var(--page-line); border-radius: 10px; padding: 14px 16px; font: 13px/1.55 var(--mono); overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.swap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 18px 0; }
.swap figure { margin: 0; text-align: center; }
.swap img { width: 96px; height: 96px; image-rendering: pixelated; border-radius: 6px; border: 1px solid var(--page-line); }
.swap figcaption { font-size: 12.5px; color: var(--page-muted); max-width: 150px; margin-top: 6px; }
.swap .arrow { font: 600 30px var(--mono); color: var(--page-muted); }
table.stats { width: auto; border-collapse: collapse; font: 13.5px var(--mono); margin: 6px 0 12px; }
table.stats th, table.stats td { padding: 4px 14px 4px 0; border-bottom: 1px solid var(--page-line); text-align: left; font-weight: 400; color: var(--page-muted); }
table.stats td.num { color: var(--strong); text-align: right; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 32px; }
:not(pre) > code { background: var(--raise); color: var(--page-text); padding: 1px 5px; border-radius: 4px; font-size: 0.88em; }