/* Keygrid — keycaps in the dark. Matte black with per-key RGB glow; Chakra Petch for the
   panel legends, Onest for reading. Motif: a lit keycap beside each heading. */

:root {
  --page-bg: #101214;
  --page-text: #e1e5ea;
  --page-muted: #9aa3ad;
  --page-line: #23282e;
  --page-accent: #7cf08e;
  --page-ui: "Onest", system-ui, sans-serif;
  --display: "Chakra Petch", "Onest", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --surface: #15181b;
  --raise: #1c2024;
  --code-bg: #15181b;
  --code-text: #c9f7d1;
  --strong: #f4f7fa;
  --k-ink: #d6dbe1; --k-accent: #ffd36b; --k-a: #3a4048; --k-b: #6ab8ff; --k-c: #ff7ad9;
  --k-d: #b39cff; --k-ok: var(--page-accent); --k-err: #ff6b6b; --k-muted: #6f7883; --k-file: #9aa3ad;
  color-scheme: dark;
}

.hero h1 { font: 600 clamp(40px, 6vw, 80px)/1.02 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }
.hero h1 span { color: var(--page-accent); text-shadow: 0 0 22px #7cf08e66; }
.part > h2 { display: flex; align-items: center; gap: 14px; font: 600 clamp(26px, 3.2vw, 38px)/1.1 var(--display); text-transform: uppercase; }
.part > h2::before { content: ""; flex: none; width: 26px; height: 26px; border-radius: 6px; background: #1c2024; box-shadow: inset 0 -3px 0 #0a0b0c, 0 0 0 1px #2c3238, 0 0 16px #7cf08e88; border-top: 3px solid var(--page-accent); }
.term code { font-size: 12.5px; }
.term .o, .term .e { white-space: pre-wrap; overflow-wrap: anywhere; }
.shot img { border: 0; border-radius: 10px; box-shadow: 0 0 0 1px #2c3238, 0 24px 60px -30px #000; }
.fig { padding: 18px; background: var(--surface); border: 1px solid var(--page-line); border-radius: 10px; }
.dg .lab-bg { fill: var(--surface); }
.dg .halo { stroke: var(--surface); }
.dg .cap { fill: #1c2024; stroke: #2c3238; stroke-width: 1; }
.dg .cap.lit { fill: color-mix(in srgb, var(--k) 30%, #1c2024); stroke: var(--k); filter: drop-shadow(0 0 4px var(--k)); }
.dg .cap.type { fill: #171a1d; stroke: color-mix(in srgb, var(--k) 55%, #2c3238); }
.dg .cap-n { fill: #8b949e; }
.dg .cap-t { fill: #cfe3ff; }
.facts li { border-left-color: var(--page-accent); }