/* gfxsh — glass over a night sky. A deep indigo gradient with soft colour pools, glass panels
   with backdrop blur, Silkscreen pixel headings, IBM Plex Sans for reading and Recursive's
   monospace for the shell. */

:root {
  --page-bg: #0b0d1a;
  --page-text: #e4e6f5;
  --page-muted: #a5a9c6;
  --page-line: #ffffff1c;
  --page-accent: #ff7ad9;
  --page-ui: "IBM Plex Sans", system-ui, sans-serif;
  --display: "Silkscreen", ui-monospace, monospace;
  --mono: "Recursive", ui-monospace, monospace;
  --surface: #ffffff0d;
  --raise: #ffffff14;
  --code-bg: #ffffff0f;
  --code-text: #f3d8ff;
  --strong: #ffffff;
  --k-ink: #e4e6f5; --k-accent: var(--page-accent); --k-a: #ffc06b; --k-b: #6fd6ff; --k-c: #9c8bff;
  --k-d: #7cf0a0; --k-ok: #7cf0a0; --k-err: #ff6b81; --k-muted: #7b80a3; --k-file: #a5a9c6;
  color-scheme: dark;
}

html { background:
  radial-gradient(60vw 40vw at 85% -5%, #7a2f8a55, transparent 70%),
  radial-gradient(50vw 40vw at -10% 30%, #1f4f9a55, transparent 70%),
  radial-gradient(60vw 50vw at 50% 110%, #0f6b6b44, transparent 70%),
  #0b0d1a; background-attachment: fixed; }
code, pre code { font-variation-settings: "MONO" 1; }
.hero h1 { font: 700 clamp(48px, 8vw, 104px)/1 var(--display); letter-spacing: 0; color: #fff; text-shadow: 0 0 24px #ff7ad966; }
.part > h2 { font: 400 clamp(24px, 3vw, 36px)/1.15 var(--display); color: #fff; }
.part > h2::before { content: "❯ "; color: var(--page-accent); }
pre, .fig, table { background: #ffffff0b; border: 1px solid #ffffff1c; border-radius: 12px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.fig { padding: 18px; }
.looks { display: grid; gap: 14px; }
.looks .shot { margin: 0; }
.looks img { border-radius: 10px; border: 1px solid #ffffff1c; }
.dg .lab-bg { fill: #141730; }
.dg .halo { stroke: #141730; }
.dg .node { fill: #151935; }
.dg .tape { stroke: #ffffff2a; stroke-width: 1; }
.dg .mark { fill: color-mix(in srgb, var(--k) 20%, #151935); stroke: var(--k); }
.dg .mark-t { fill: var(--k); font-weight: 700; }
.dg .tape-t { fill: #e4e6f5; }
.dg .pane { fill: #ffffff10; stroke: #ffffff30; }
.dg .stripe { fill: #7cf0a0; }
.dg .header { fill: #ffffff10; }
.dg .badge-ok { fill: #7cf0a0; }
.dg .out-t { fill: #c9cbe0; }
td { color: #d6d8ec; }
.facts li { border-left-color: var(--page-accent); }