/* meat — through the glass. A dim room-at-night page: warm peach accent from the tab badge,
   cool screen glow, a mirrored wordmark, Chakra Petch for display, IBM Plex Sans for
   reading and JetBrains Mono for the terminal. */

:root {
  --page-bg: #0c0d12;
  --page-text: #e6e6ec;
  --page-muted: #a0a3b4;
  --page-line: #ffffff1a;
  --page-accent: #ff9678;
  --page-ui: "IBM Plex Sans", system-ui, sans-serif;
  --display: "Chakra Petch", "IBM Plex Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --surface: #14161e;
  --raise: #1b1e28;
  --code-bg: #12141b;
  --code-text: #ffd9cc;
  --strong: #ffffff;
  --k-ink: #e6e6ec; --k-accent: var(--page-accent); --k-a: #a596d7; --k-b: #78cde1; --k-c: #8fe3ff;
  --k-d: #e8b65c; --k-ok: #7ad692; --k-err: #eb6868; --k-muted: #707688; --k-file: #a0a3b4;
  color-scheme: dark;
}

html { background:
  radial-gradient(55vw 40vw at 90% -10%, #ff967822, transparent 70%),
  radial-gradient(45vw 35vw at -10% 40%, #78cde118, transparent 70%),
  #0c0d12; background-attachment: fixed; }
.hero h1 { font: 600 clamp(56px, 9vw, 120px)/0.95 var(--display); letter-spacing: -0.02em; color: #fff; }
.hero h1 .mirror { display: inline-block; transform: scaleX(-1); color: var(--page-accent); opacity: .55; text-shadow: 0 0 18px #8fe3ff88; margin-left: .12em; }
.part > h2 { font: 600 clamp(26px, 3.2vw, 40px)/1.1 var(--display); letter-spacing: -0.01em; }
.part > h2::before { content: "◆ "; color: var(--page-accent); }
.shot { margin: 0 0 18px; }
.shot img, .shot video { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--page-line); box-shadow: 0 18px 60px #0008; }
.shot video { background: var(--page-bg); }
.shot figcaption { color: var(--page-muted); font-size: 14px; margin-top: 6px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .pair { grid-template-columns: 1fr; } }
.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); }
.facts li { border-left-color: var(--page-accent); }
table.keys td:first-child { font-family: var(--mono); color: var(--code-text); white-space: nowrap; }