/* DevCapsule website design system.
   Everything is a token: type, spacing, radius, and two palettes drawn from
   the same names. Components below use tokens only. */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: light;
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-xl: 1.375rem;
  --fs-h3: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-h1: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  --fs-hero: clamp(2.5rem, 1.6rem + 4vw, 5rem);
  --lh-body: 1.6;
  --lh-tight: 1.12;
  --fw-body: 400;
  --fw-strong: 700;
  --fw-display: 600;
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 6rem;
  --w-prose: 70ch;
  --w-reading: 46rem;
  --w-wide: 76rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --r-sm: 0.375rem;
  --r-md: 0.75rem;
  --r-lg: 1.25rem;
  --tap: 44px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Default palette: Catppuccin latte. The DevCapsule day and night palettes
     and the others follow, selected by data-palette on the root. */
  --c-paper: #eff1f5;
  --c-paper-2: #e6e9ef;
  --c-surface: #ffffff;
  --c-ink: #4c4f69;
  --c-muted: #5c5f77;
  --c-lead: #5c5f77;
  --c-line: #ccd0da;
  --c-line-strong: #9ca0b0;
  --c-brand: #303446;
  --c-brand-text: #1a56d6;
  --c-brand-soft: #dce0e8;
  --c-accent: #b04104;
  --c-link: #1a56d6;
  --c-link-underline: #9ca0b0;
  --c-band: #303446;
  --c-band-2: #414559;
  --c-band-text: #eff1f5;
  --c-band-muted: #c6d0f5;
  --c-band-line: rgba(239, 241, 245, 0.16);
  --c-button-bg: #1e66f5;
  --c-button-bg-hover: #1a56d6;
  --c-button-fg: #ffffff;
  --c-button-band-bg: #f9a66a;
  --c-button-band-bg-hover: #fbb98a;
  --c-button-band-fg: #1e1e2e;
  --c-code-bg: #e6e9ef;
  --c-code-fg: #4c4f69;
  --c-pre-bg: #303446;
  --c-pre-fg: #cdd6f4;
  --c-pre-line: #45475a;
  --c-th-bg: #e6e9ef;
  --c-th-fg: #5c5f77;
  --c-notice-bg: #fbe8d5;
  --c-notice-border: #df8e1d;
  --c-notice-fg: #6b4004;
  --c-status: #40a02b;
  --c-figure-bg: #e6e9ef;
  --c-figure-border: #ccd0da;
  --c-figure-muted: #5c5f77;
  --c-figure-chip: #ffffff;
  --c-figure-shadow: #ccd0da;
  --c-selection: #dce0e8;
  --shadow-card: 0 1px 0 rgba(76, 79, 105, 0.05), 0 12px 30px -24px rgba(76, 79, 105, 0.5);
}
/* Colour schemes. Catppuccin latte is the default; "system" follows the
   preference between the DevCapsule day and night palettes; a chosen scheme
   sets data-palette on the root and overrides every token. Each scheme is an open-source palette:
   Solarized (Ethan Schoonover, MIT), Gruvbox (morhetz, MIT), Nord (Arctic
   Ice Studio, MIT), Catppuccin (MIT). */
:root[data-palette="devcapsule-day"],
:root[data-palette="system"] {
  color-scheme: light;
  --c-paper: #f7f7ef;
  --c-paper-2: #eef0e4;
  --c-surface: #fffef8;
  --c-ink: #202e28;
  --c-muted: #5d665f;
  --c-lead: #4f5e53;
  --c-line: #d9ddd0;
  --c-line-strong: #b9c2b3;
  --c-brand: #173f35;
  --c-brand-text: #1d4a3e;
  --c-brand-soft: #e5edc7;
  --c-accent: #b8472c;
  --c-link: #28604a;
  --c-link-underline: #9db99c;
  --c-band: #173f35;
  --c-band-2: #1f4a3e;
  --c-band-text: #f1f5ea;
  --c-band-muted: #b9cfc0;
  --c-band-line: rgba(241, 245, 234, 0.16);
  --c-button-bg: #173f35;
  --c-button-bg-hover: #285447;
  --c-button-fg: #fffef8;
  --c-button-band-bg: #cfe7a8;
  --c-button-band-bg-hover: #dff0c0;
  --c-button-band-fg: #10201a;
  --c-code-bg: #e9ecdf;
  --c-code-fg: #2a503c;
  --c-pre-bg: #1f342e;
  --c-pre-fg: #e2e9de;
  --c-pre-line: #3d5547;
  --c-th-bg: #e9edde;
  --c-th-fg: #3f513f;
  --c-notice-bg: #f2e9d9;
  --c-notice-border: #b9894b;
  --c-notice-fg: #624b2b;
  --c-status: #76a27a;
  --c-figure-bg: #edf0e2;
  --c-figure-border: #d4dbca;
  --c-figure-muted: #52684f;
  --c-figure-chip: #f7f8ef;
  --c-figure-shadow: #d7deca;
  --c-selection: #e5edc7;
  --shadow-card: 0 1px 0 rgba(32, 46, 40, 0.04), 0 12px 30px -24px rgba(32, 46, 40, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="system"] {
    color-scheme: dark;
    --c-paper: #121a17;
    --c-paper-2: #182320;
    --c-surface: #1b2622;
    --c-ink: #e6ebe3;
    --c-muted: #a3ada5;
    --c-lead: #c2ccc4;
    --c-line: #2b3833;
    --c-line-strong: #43534b;
    --c-brand: #a9d5bf;
    --c-brand-text: #a9d5bf;
    --c-brand-soft: #22332b;
    --c-accent: #e8825f;
    --c-link: #9dd0b6;
    --c-link-underline: #4d6f5f;
    --c-band: #0f1a16;
    --c-band-2: #15241e;
    --c-band-text: #eef3ea;
    --c-band-muted: #a7bcae;
    --c-band-line: rgba(238, 243, 234, 0.14);
    --c-button-bg: #cfe7a8;
    --c-button-bg-hover: #dff0c0;
    --c-button-fg: #10201a;
    --c-button-band-bg: #cfe7a8;
    --c-button-band-bg-hover: #dff0c0;
    --c-button-band-fg: #10201a;
    --c-code-bg: #22302a;
    --c-code-fg: #cfe3d6;
    --c-pre-bg: #0f1a16;
    --c-pre-fg: #dfe7de;
    --c-pre-line: #2b3833;
    --c-th-bg: #1f2c27;
    --c-th-fg: #cbd7cd;
    --c-notice-bg: #2a2418;
    --c-notice-border: #b9894b;
    --c-notice-fg: #e7d3b4;
    --c-status: #8fc494;
    --c-figure-bg: #1a2622;
    --c-figure-border: #2c3b34;
    --c-figure-muted: #9fb0a3;
    --c-figure-chip: #182320;
    --c-figure-shadow: #0b110e;
    --c-selection: #35503f;
    --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.2), 0 12px 30px -24px rgba(0, 0, 0, 0.9);
  }
}
:root[data-palette="devcapsule-night"] {
  color-scheme: dark;
  --c-paper: #121a17;
  --c-paper-2: #182320;
  --c-surface: #1b2622;
  --c-ink: #e6ebe3;
  --c-muted: #a3ada5;
  --c-lead: #c2ccc4;
  --c-line: #2b3833;
  --c-line-strong: #43534b;
  --c-brand: #a9d5bf;
  --c-brand-text: #a9d5bf;
  --c-brand-soft: #22332b;
  --c-accent: #e8825f;
  --c-link: #9dd0b6;
  --c-link-underline: #4d6f5f;
  --c-band: #0f1a16;
  --c-band-2: #15241e;
  --c-band-text: #eef3ea;
  --c-band-muted: #a7bcae;
  --c-band-line: rgba(238, 243, 234, 0.14);
  --c-button-bg: #cfe7a8;
  --c-button-bg-hover: #dff0c0;
  --c-button-fg: #10201a;
  --c-button-band-bg: #cfe7a8;
  --c-button-band-bg-hover: #dff0c0;
  --c-button-band-fg: #10201a;
  --c-code-bg: #22302a;
  --c-code-fg: #cfe3d6;
  --c-pre-bg: #0f1a16;
  --c-pre-fg: #dfe7de;
  --c-pre-line: #2b3833;
  --c-th-bg: #1f2c27;
  --c-th-fg: #cbd7cd;
  --c-notice-bg: #2a2418;
  --c-notice-border: #b9894b;
  --c-notice-fg: #e7d3b4;
  --c-status: #8fc494;
  --c-figure-bg: #1a2622;
  --c-figure-border: #2c3b34;
  --c-figure-muted: #9fb0a3;
  --c-figure-chip: #182320;
  --c-figure-shadow: #0b110e;
  --c-selection: #35503f;
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.2), 0 12px 30px -24px rgba(0, 0, 0, 0.9);
}
:root[data-palette="solarized-light"] {
  color-scheme: light;
  --c-paper: #fdf6e3;
  --c-paper-2: #eee8d5;
  --c-surface: #fffdf6;
  --c-ink: #073642;
  --c-muted: #4f636a;
  --c-lead: #4f636a;
  --c-line: #d9d2bd;
  --c-line-strong: #93a1a1;
  --c-brand: #073642;
  --c-brand-text: #1f6f8b;
  --c-brand-soft: #f5e9bd;
  --c-accent: #b4400f;
  --c-link: #17609c;
  --c-link-underline: #93a1a1;
  --c-band: #073642;
  --c-band-2: #0d4452;
  --c-band-text: #fdf6e3;
  --c-band-muted: #c9d3cf;
  --c-band-line: rgba(253, 246, 227, 0.16);
  --c-button-bg: #073642;
  --c-button-bg-hover: #0d4452;
  --c-button-fg: #fdf6e3;
  --c-button-band-bg: #e6b422;
  --c-button-band-bg-hover: #f0c545;
  --c-button-band-fg: #002b36;
  --c-code-bg: #eee8d5;
  --c-code-fg: #073642;
  --c-pre-bg: #002b36;
  --c-pre-fg: #eee8d5;
  --c-pre-line: #1f4c58;
  --c-th-bg: #eee8d5;
  --c-th-fg: #4f636a;
  --c-notice-bg: #f5e9bd;
  --c-notice-border: #b58900;
  --c-notice-fg: #5e4700;
  --c-status: #859900;
  --c-figure-bg: #eee8d5;
  --c-figure-border: #d9d2bd;
  --c-figure-muted: #4f636a;
  --c-figure-chip: #fdf6e3;
  --c-figure-shadow: #d9d2bd;
  --c-selection: #f1e4b3;
  --shadow-card: 0 1px 0 rgba(7, 54, 66, 0.05), 0 12px 30px -24px rgba(7, 54, 66, 0.5);
}
:root[data-palette="solarized-dark"] {
  color-scheme: dark;
  --c-paper: #002b36;
  --c-paper-2: #073642;
  --c-surface: #073642;
  --c-ink: #e4ecea;
  --c-muted: #a9b8b4;
  --c-lead: #c6d2ce;
  --c-line: #1f4c58;
  --c-line-strong: #5a8a96;
  --c-brand: #7fc1e0;
  --c-brand-text: #7fc1e0;
  --c-brand-soft: #0b4350;
  --c-accent: #f0a04b;
  --c-link: #7fc1e0;
  --c-link-underline: #3f7a8c;
  --c-band: #00212a;
  --c-band-2: #073642;
  --c-band-text: #fdf6e3;
  --c-band-muted: #b9c8c4;
  --c-band-line: rgba(253, 246, 227, 0.14);
  --c-button-bg: #e8bb3e;
  --c-button-bg-hover: #f0c545;
  --c-button-fg: #002b36;
  --c-button-band-bg: #e8bb3e;
  --c-button-band-bg-hover: #f0c545;
  --c-button-band-fg: #002b36;
  --c-code-bg: #0b4350;
  --c-code-fg: #d9e6e2;
  --c-pre-bg: #00212a;
  --c-pre-fg: #e4ecea;
  --c-pre-line: #1f4c58;
  --c-th-bg: #0b4350;
  --c-th-fg: #c9d3cf;
  --c-notice-bg: #2f2a14;
  --c-notice-border: #b58900;
  --c-notice-fg: #eddcae;
  --c-status: #859900;
  --c-figure-bg: #073642;
  --c-figure-border: #1f4c58;
  --c-figure-muted: #a9b8b4;
  --c-figure-chip: #0b4350;
  --c-figure-shadow: #00161c;
  --c-selection: #2f5a6b;
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.3), 0 12px 30px -24px rgba(0, 0, 0, 0.9);
}
:root[data-palette="gruvbox-light"] {
  color-scheme: light;
  --c-paper: #fbf1c7;
  --c-paper-2: #ebdbb2;
  --c-surface: #fffbe6;
  --c-ink: #3c3836;
  --c-muted: #665c54;
  --c-lead: #504945;
  --c-line: #d5c4a1;
  --c-line-strong: #a89984;
  --c-brand: #3c3836;
  --c-brand-text: #076678;
  --c-brand-soft: #e6dcae;
  --c-accent: #af3a03;
  --c-link: #076678;
  --c-link-underline: #a89984;
  --c-band: #3c3836;
  --c-band-2: #504945;
  --c-band-text: #fbf1c7;
  --c-band-muted: #d5c4a1;
  --c-band-line: rgba(251, 241, 199, 0.16);
  --c-button-bg: #3c3836;
  --c-button-bg-hover: #504945;
  --c-button-fg: #fbf1c7;
  --c-button-band-bg: #fabd2f;
  --c-button-band-bg-hover: #fcc84f;
  --c-button-band-fg: #282828;
  --c-code-bg: #ebdbb2;
  --c-code-fg: #3c3836;
  --c-pre-bg: #282828;
  --c-pre-fg: #ebdbb2;
  --c-pre-line: #504945;
  --c-th-bg: #ebdbb2;
  --c-th-fg: #504945;
  --c-notice-bg: #f2e5bc;
  --c-notice-border: #b57614;
  --c-notice-fg: #5c3d0a;
  --c-status: #79740e;
  --c-figure-bg: #ebdbb2;
  --c-figure-border: #d5c4a1;
  --c-figure-muted: #665c54;
  --c-figure-chip: #fbf1c7;
  --c-figure-shadow: #d5c4a1;
  --c-selection: #e8dfa8;
  --shadow-card: 0 1px 0 rgba(60, 56, 54, 0.05), 0 12px 30px -24px rgba(60, 56, 54, 0.5);
}
:root[data-palette="gruvbox-dark"] {
  color-scheme: dark;
  --c-paper: #282828;
  --c-paper-2: #32302f;
  --c-surface: #3c3836;
  --c-ink: #ebdbb2;
  --c-muted: #bdae93;
  --c-lead: #d5c4a1;
  --c-line: #504945;
  --c-line-strong: #7c6f64;
  --c-brand: #83a598;
  --c-brand-text: #83a598;
  --c-brand-soft: #504945;
  --c-accent: #fe8019;
  --c-link: #8ec07c;
  --c-link-underline: #665c54;
  --c-band: #1d2021;
  --c-band-2: #282828;
  --c-band-text: #ebdbb2;
  --c-band-muted: #bdae93;
  --c-band-line: rgba(235, 219, 178, 0.14);
  --c-button-bg: #fabd2f;
  --c-button-bg-hover: #fcc84f;
  --c-button-fg: #282828;
  --c-button-band-bg: #fabd2f;
  --c-button-band-bg-hover: #fcc84f;
  --c-button-band-fg: #282828;
  --c-code-bg: #3c3836;
  --c-code-fg: #ebdbb2;
  --c-pre-bg: #1d2021;
  --c-pre-fg: #ebdbb2;
  --c-pre-line: #3c3836;
  --c-th-bg: #3c3836;
  --c-th-fg: #d5c4a1;
  --c-notice-bg: #3a3120;
  --c-notice-border: #fabd2f;
  --c-notice-fg: #f2e5bc;
  --c-status: #b8bb26;
  --c-figure-bg: #32302f;
  --c-figure-border: #504945;
  --c-figure-muted: #bdae93;
  --c-figure-chip: #3c3836;
  --c-figure-shadow: #141617;
  --c-selection: #504945;
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.3), 0 12px 30px -24px rgba(0, 0, 0, 0.9);
}
:root[data-palette="nord"] {
  color-scheme: dark;
  --c-paper: #2e3440;
  --c-paper-2: #3b4252;
  --c-surface: #3b4252;
  --c-ink: #eceff4;
  --c-muted: #c9d0dc;
  --c-lead: #d8dee9;
  --c-line: #4c566a;
  --c-line-strong: #8b96ad;
  --c-brand: #88c0d0;
  --c-brand-text: #88c0d0;
  --c-brand-soft: #434c5e;
  --c-accent: #ebcb8b;
  --c-link: #a5d2e0;
  --c-link-underline: #5e81ac;
  --c-band: #242933;
  --c-band-2: #2e3440;
  --c-band-text: #eceff4;
  --c-band-muted: #d0d6df;
  --c-band-line: rgba(236, 239, 244, 0.14);
  --c-button-bg: #88c0d0;
  --c-button-bg-hover: #a3d0dd;
  --c-button-fg: #2e3440;
  --c-button-band-bg: #88c0d0;
  --c-button-band-bg-hover: #a3d0dd;
  --c-button-band-fg: #2e3440;
  --c-code-bg: #434c5e;
  --c-code-fg: #eceff4;
  --c-pre-bg: #242933;
  --c-pre-fg: #eceff4;
  --c-pre-line: #3b4252;
  --c-th-bg: #434c5e;
  --c-th-fg: #d8dee9;
  --c-notice-bg: #3b3a2e;
  --c-notice-border: #ebcb8b;
  --c-notice-fg: #ebe1c2;
  --c-status: #a3be8c;
  --c-figure-bg: #3b4252;
  --c-figure-border: #4c566a;
  --c-figure-muted: #c9d0dc;
  --c-figure-chip: #434c5e;
  --c-figure-shadow: #1c2027;
  --c-selection: #434c5e;
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.3), 0 12px 30px -24px rgba(0, 0, 0, 0.9);
}
:root[data-palette="catppuccin-latte"] {
  color-scheme: light;
  --c-paper: #eff1f5;
  --c-paper-2: #e6e9ef;
  --c-surface: #ffffff;
  --c-ink: #4c4f69;
  --c-muted: #5c5f77;
  --c-lead: #5c5f77;
  --c-line: #ccd0da;
  --c-line-strong: #9ca0b0;
  --c-brand: #303446;
  --c-brand-text: #1a56d6;
  --c-brand-soft: #dce0e8;
  --c-accent: #b04104;
  --c-link: #1a56d6;
  --c-link-underline: #9ca0b0;
  --c-band: #303446;
  --c-band-2: #414559;
  --c-band-text: #eff1f5;
  --c-band-muted: #c6d0f5;
  --c-band-line: rgba(239, 241, 245, 0.16);
  --c-button-bg: #1e66f5;
  --c-button-bg-hover: #1a56d6;
  --c-button-fg: #ffffff;
  --c-button-band-bg: #f9a66a;
  --c-button-band-bg-hover: #fbb98a;
  --c-button-band-fg: #1e1e2e;
  --c-code-bg: #e6e9ef;
  --c-code-fg: #4c4f69;
  --c-pre-bg: #303446;
  --c-pre-fg: #cdd6f4;
  --c-pre-line: #45475a;
  --c-th-bg: #e6e9ef;
  --c-th-fg: #5c5f77;
  --c-notice-bg: #fbe8d5;
  --c-notice-border: #df8e1d;
  --c-notice-fg: #6b4004;
  --c-status: #40a02b;
  --c-figure-bg: #e6e9ef;
  --c-figure-border: #ccd0da;
  --c-figure-muted: #5c5f77;
  --c-figure-chip: #ffffff;
  --c-figure-shadow: #ccd0da;
  --c-selection: #dce0e8;
  --shadow-card: 0 1px 0 rgba(76, 79, 105, 0.05), 0 12px 30px -24px rgba(76, 79, 105, 0.5);
}
:root[data-palette="catppuccin-mocha"] {
  color-scheme: dark;
  --c-paper: #1e1e2e;
  --c-paper-2: #181825;
  --c-surface: #313244;
  --c-ink: #cdd6f4;
  --c-muted: #bac2de;
  --c-lead: #bac2de;
  --c-line: #45475a;
  --c-line-strong: #7f849c;
  --c-brand: #89b4fa;
  --c-brand-text: #89b4fa;
  --c-brand-soft: #45475a;
  --c-accent: #fab387;
  --c-link: #89dceb;
  --c-link-underline: #585b70;
  --c-band: #11111b;
  --c-band-2: #181825;
  --c-band-text: #cdd6f4;
  --c-band-muted: #bac2de;
  --c-band-line: rgba(205, 214, 244, 0.14);
  --c-button-bg: #89b4fa;
  --c-button-bg-hover: #a6c8ff;
  --c-button-fg: #1e1e2e;
  --c-button-band-bg: #89b4fa;
  --c-button-band-bg-hover: #a6c8ff;
  --c-button-band-fg: #1e1e2e;
  --c-code-bg: #313244;
  --c-code-fg: #cdd6f4;
  --c-pre-bg: #11111b;
  --c-pre-fg: #cdd6f4;
  --c-pre-line: #313244;
  --c-th-bg: #313244;
  --c-th-fg: #bac2de;
  --c-notice-bg: #2e2a1f;
  --c-notice-border: #f9e2af;
  --c-notice-fg: #f5e9c8;
  --c-status: #a6e3a1;
  --c-figure-bg: #181825;
  --c-figure-border: #313244;
  --c-figure-muted: #a6adc8;
  --c-figure-chip: #313244;
  --c-figure-shadow: #0b0b12;
  --c-selection: #585b70;
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.3), 0 12px 30px -24px rgba(0, 0, 0, 0.9);
}

/* ---------- 2. Fonts, self-hosted (SIL Open Font License, see fonts/) ---------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/fraunces-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/fraunces-latin-wght-italic.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url("fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-display: swap;
  font-weight: 700;
  src: url("fonts/atkinson-hyperlegible-latin-700-italic.woff2") format("woff2");
}

/* ---------- 3. Base ---------- */
* {
  box-sizing: border-box;
}
html {
  scroll-padding-top: var(--s-7);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--c-accent);
}
button {
  font: inherit;
}
button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
}
:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 4px;
}
::selection {
  background: var(--c-selection);
  color: var(--c-ink);
}
img {
  max-width: 100%;
  height: auto;
}
h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 {
  font-size: var(--fs-h1);
}
h2 {
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
}
p {
  margin-bottom: 1.1em;
}
code,
pre,
kbd {
  font-family: var(--font-mono);
}
summary {
  cursor: pointer;
  line-height: var(--lh-body);
}
main:focus {
  outline: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ---------- 4. Layout primitives ---------- */
.wrap {
  width: min(100% - 2 * var(--gutter), var(--w-wide));
  margin-inline: auto;
}
.section {
  padding-block: var(--s-8);
}
.section--alt {
  background: var(--c-paper-2);
}
.section--tight {
  padding-block: var(--s-7);
}
.band {
  background: var(--c-band);
  color: var(--c-band-text);
}
.band a:hover {
  color: var(--c-band-text);
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.section-heading h2 {
  margin: var(--s-2) 0 0;
}
.section-heading .text-link {
  white-space: nowrap;
}
.eyebrow,
.tiny-caps {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 500;
  line-height: 1.7;
}
.eyebrow {
  display: block;
  color: var(--c-muted);
}
.band .eyebrow {
  color: var(--c-band-muted);
}
.status-dot {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 50%;
  background: var(--c-status);
  margin-right: 7px;
  vertical-align: middle;
}
.brand-dot {
  color: var(--c-accent);
  margin-left: -0.15em;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-6);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.card h3 {
  margin: 0;
  font-size: var(--fs-xl);
}
.card p {
  margin: 0;
  color: var(--c-muted);
  font-size: var(--fs-sm);
}
.card > a:last-child,
.card .card-link {
  margin-top: auto;
  font-weight: var(--fw-strong);
  font-size: var(--fs-sm);
  color: var(--c-link);
  text-decoration: none;
}
.card > a:last-child:hover,
.card .card-link:hover {
  color: var(--c-accent);
}

/* ---------- 5. Buttons and links ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  min-height: var(--tap);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--c-button-bg);
  border-radius: var(--r-sm);
  background: var(--c-button-bg);
  color: var(--c-button-fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-strong);
  line-height: 1.3;
  text-decoration: none;
}
.button:hover {
  background: var(--c-button-bg-hover);
  border-color: var(--c-button-bg-hover);
  color: var(--c-button-fg);
}
.button.secondary {
  background: transparent;
  border-color: var(--c-ink);
  color: var(--c-ink);
}
.button.secondary:hover {
  background: var(--c-paper-2);
  color: var(--c-ink);
}
.band .button {
  background: var(--c-button-band-bg);
  border-color: var(--c-button-band-bg);
  color: var(--c-button-band-fg);
}
.band .button:hover {
  background: var(--c-button-band-bg-hover);
  border-color: var(--c-button-band-bg-hover);
  color: var(--c-button-band-fg);
}
.band .button.secondary {
  background: transparent;
  border-color: var(--c-band-muted);
  color: var(--c-band-text);
}
.band .button.secondary:hover {
  background: var(--c-band-2);
  border-color: var(--c-band-text);
  color: var(--c-band-text);
}
.text-link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-strong);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.band .text-link {
  color: var(--c-band-text);
}
.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 10;
  background: var(--c-button-bg);
  color: var(--c-button-fg);
  padding: var(--s-3);
  border-radius: var(--r-sm);
}
.skip-link:focus {
  top: var(--s-2);
}

/* ---------- 6. Header and footer ---------- */
.site-header {
  background: var(--c-band);
  color: var(--c-band-text);
}
.site-header .wrap {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-strong);
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.brand-mark {
  display: inline-block;
  width: 20px;
  height: 30px;
  border: 3px solid currentColor;
  border-radius: 15px;
  transform: rotate(35deg);
  position: relative;
  margin-right: var(--s-1);
  overflow: hidden;
  opacity: 0.9;
}
.brand-mark:after {
  content: "";
  position: absolute;
  left: -2px;
  top: 10px;
  width: 24px;
  border-top: 3px solid currentColor;
}
.site-header nav {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-strong);
}
.site-header nav a {
  text-decoration: none;
  color: var(--c-band-text);
}
.site-header nav a:hover {
  color: var(--c-band-muted);
}
.site-header nav a[aria-current] {
  text-decoration: underline;
  text-decoration-color: var(--c-button-band-bg);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5em;
}
.nav-cta {
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--c-button-band-bg);
  color: var(--c-button-band-fg) !important;
}
.nav-cta:hover {
  background: var(--c-button-band-bg-hover);
}
.nav-cta span {
  margin-left: var(--s-2);
}
.palette-picker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.palette-picker[hidden] {
  display: none;
}
.palette-picker select {
  appearance: none;
  min-height: 2rem;
  padding: var(--s-1) var(--s-6) var(--s-1) var(--s-3);
  border: 1px solid var(--c-band-line);
  border-radius: 20px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right var(--s-3) center;
  color: var(--c-band-text);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-strong);
  cursor: pointer;
  max-width: 11rem;
}
.palette-picker select:hover {
  border-color: var(--c-band-muted);
}
.palette-picker select {
  color-scheme: light;
}
.palette-picker option {
  color: #1e1e2e;
  background: #ffffff;
}
.site-footer {
  margin-top: var(--s-8);
  border-top: 1px solid var(--c-line);
  padding-block: var(--s-7) var(--s-5);
}
.site-footer .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
}
.site-footer .brand {
  font-size: 1.25rem;
}
.site-footer p {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  margin: var(--s-2) 0 0;
}
.site-footer nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2) var(--s-5);
  font-size: var(--fs-sm);
  align-content: start;
}
.site-footer nav a {
  text-decoration: none;
}
.footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-4);
  font: 0.75rem/1.7 var(--font-mono);
  color: var(--c-muted);
}
.build-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-1) var(--s-4);
}

/* ---------- 7. Home page ---------- */
.hero {
  background: var(--c-band);
  color: var(--c-band-text);
}
.hero .wrap {
  padding-block: var(--s-6) var(--s-7);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: var(--s-7);
}
.hero h1 {
  font-size: clamp(2rem, 1.35rem + 2.2vw, 3.25rem);
  font-weight: 500;
  margin: var(--s-3) 0 var(--s-4);
  max-width: 20ch;
}
.hero-lead {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--c-band-muted);
  max-width: var(--w-prose);
}
.hero-lead p {
  margin: 0;
}
.hero-lead p + p {
  margin-top: var(--s-3);
}
.hero-lead strong {
  color: var(--c-band-text);
  font-weight: var(--fw-strong);
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin: var(--s-5) 0 var(--s-3);
}
.hero-platform {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-band-muted);
}
.hero-platform span {
  padding: 0 var(--s-1);
}
.workspace-figure {
  background: var(--c-figure-bg);
  color: var(--c-ink);
  border: 1px solid var(--c-figure-border);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-5) var(--s-4);
  transform: rotate(-1deg);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.6);
}
.workspace-figure--video {
  transform: none;
  padding: var(--s-4);
}
.workspace-figure--video a {
  color: var(--c-link);
  text-decoration-color: var(--c-link-underline);
}
.workspace-figure--video a:hover {
  color: var(--c-accent);
  text-decoration-color: var(--c-accent);
}
.workspace-figure--video code {
  background: var(--c-code-bg);
  color: var(--c-code-fg);
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 0.88em;
}
.figure-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-6);
}
.figure-top--video {
  margin-bottom: var(--s-3);
  gap: var(--s-3);
}
.figure-expand {
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--c-figure-border);
  border-radius: var(--r-sm);
  background: var(--c-figure-chip);
  color: var(--c-ink);
  font: 0.6875rem/1.4 var(--font-mono);
  font-weight: var(--fw-strong);
  cursor: pointer;
  white-space: nowrap;
}
.figure-expand:hover {
  border-color: var(--c-ink);
  background: var(--c-surface);
}
.workspace-video-frame {
  border: 1px solid var(--c-figure-border);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #11161d;
}
.workspace-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  background: #11161d;
}
.workspace-video-caption {
  margin-top: var(--s-3);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--c-ink);
}
.workspace-video-caption p {
  margin: 0 0 var(--s-2);
}
.workspace-video-caption p:last-child {
  margin-bottom: 0;
}
.workspace-video-steps {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--c-figure-border);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--c-ink);
}
.workspace-video-steps summary {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: var(--fw-strong);
  color: var(--c-ink);
}
.workspace-video-steps ol,
.workspace-video-steps ul {
  margin: var(--s-2) 0 0;
  padding-left: var(--s-5);
}
.workspace-video-steps li {
  margin-bottom: var(--s-1);
}
.workspace-video-steps p {
  margin: var(--s-2) 0 0;
}
.video-modal {
  width: min(94vw, 76rem);
  max-height: 92vh;
  margin: auto;
  padding: 0;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
.video-modal::backdrop {
  background: rgba(10, 14, 18, 0.78);
}
.video-modal-inner {
  padding: var(--s-5);
  overflow-y: auto;
  max-height: 92vh;
}
.video-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
}
.video-modal-video {
  display: block;
  width: 100%;
  max-height: 70vh;
  height: auto;
  border-radius: var(--r-sm);
  background: #11161d;
}
.video-modal-caption {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--c-ink);
}
.video-modal-caption a {
  color: var(--c-link);
}
.video-modal-caption a:hover {
  color: var(--c-accent);
}
.tiny-caps {
  font-size: 0.5625rem;
  color: var(--c-figure-muted);
}
.figure-dots {
  font-size: 0.5rem;
  letter-spacing: 3px;
  color: var(--c-figure-muted);
}
/* The scene is a picture of an IDE at night: its colours are part of the
   illustration and stay the same in both palettes. */
.workspace-scene {
  border: 1px solid #496053;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #1d362f;
  color: #e9eee2;
  box-shadow: 7px 9px 0 var(--c-figure-shadow);
}
.project-tab {
  padding: var(--s-3) var(--s-4);
  background: #29473c;
  font: 0.6875rem var(--font-mono);
  display: flex;
  gap: var(--s-3);
  align-items: center;
}
.project-tab > span:first-child {
  color: #c7dda2;
  font-size: 1rem;
}
.tab-branch {
  margin-left: auto;
  color: #ced9c8;
  border: 1px solid #58705f;
  border-radius: 3px;
  padding: 2px 7px;
  font-size: 0.5625rem;
}
.scene-body {
  display: flex;
  min-height: 12rem;
}
.file-tree {
  padding: var(--s-5) var(--s-3);
  font: 0.5625rem/2.3 var(--font-mono);
  border-right: 1px solid #3d5547;
  min-width: 35%;
  color: #becdc1;
}
.file-tree > span {
  display: block;
  font-size: 0.5rem;
  letter-spacing: 1px;
  color: #9ab39e;
  margin-bottom: var(--s-3);
}
.file-indent {
  padding-left: var(--s-3);
}
.selected {
  background: #324f40;
  border-radius: 3px;
  color: #e3f0ce;
}
.scene-editor {
  padding: var(--s-5) var(--s-4);
  flex: 1;
  overflow: hidden;
}
.editor-label {
  font: 0.5625rem var(--font-mono);
  color: #9ab39e;
  margin-bottom: var(--s-5);
  white-space: nowrap;
}
.code-line {
  font: 0.625rem/2.4 var(--font-mono);
  white-space: nowrap;
}
.code-line i {
  font-style: normal;
  font-size: 0.5625rem;
  color: #a7b9aa;
  margin-right: var(--s-3);
}
.code-line b {
  font-weight: 500;
  color: #e4c993;
}
.code-line > span {
  color: #c9dfb1;
}
.editor-rule {
  margin-top: var(--s-5);
  border-top: 1px solid #3d5547;
}
.terminal-prompt {
  margin-top: var(--s-3);
  font: 0.5rem/1.8 var(--font-mono);
  white-space: nowrap;
}
.terminal-prompt > span:first-child {
  color: #b3cf91;
  margin-right: var(--s-2);
}
.cursor {
  display: inline-block;
  width: 5px;
  height: 10px;
  background: #cbddaf;
  margin-left: 4px;
  vertical-align: middle;
}
.scene-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-2) var(--s-3);
  background: #29473c;
  font: 0.5rem var(--font-mono);
  color: #d2ddcc;
}
.scene-status .status-dot {
  width: 5px;
  height: 5px;
}
.capsule-parts {
  display: flex;
  justify-content: center;
  gap: var(--s-2);
  margin: var(--s-6) 0 var(--s-5);
}
.capsule-parts > span {
  font: 0.5625rem var(--font-mono);
  border: 1px solid var(--c-figure-border);
  border-radius: 20px;
  padding: 5px 9px;
  background: var(--c-figure-chip);
  color: var(--c-ink);
}
.boundary-line {
  border-top: 1px dashed var(--c-figure-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-4) 0 var(--s-2);
  font: 0.625rem var(--font-mono);
  color: var(--c-figure-muted);
}
.boundary-line strong {
  font-weight: 500;
  color: var(--c-brand-text);
}
.boundary-switch {
  height: 13px;
  width: 25px;
  border: 1px solid var(--c-figure-muted);
  border-radius: 12px;
  position: relative;
}
.boundary-switch:before {
  content: "";
  position: absolute;
  left: 3px;
  top: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-figure-muted);
}
.figure-caption {
  font: 0.5rem var(--font-mono);
  color: var(--c-figure-muted);
  text-align: center;
  margin-top: var(--s-2);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.health-strip {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--c-line);
}
.health-strip > a {
  margin-left: auto;
  font-size: var(--fs-xs);
}
.badges {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
}
.badges a {
  height: 20px;
}
.badges img {
  height: 20px;
  max-width: none;
}
.intro-section .wrap,
.philosophy .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
}
.intro-section h2 {
  margin-top: var(--s-3);
}
.motto {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-style: italic;
  max-width: 24ch;
  color: var(--c-muted);
  line-height: 1.4;
}
.intro-prose h3 {
  font-size: var(--fs-xl);
}
.pillars,
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--s-5);
}
.feature {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-6);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.feature-number {
  font: 0.625rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--c-muted);
}
.feature-content {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  position: relative;
  z-index: 1;
  margin-top: var(--s-5);
}
.feature-content strong:first-child {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  margin-bottom: var(--s-4);
  color: var(--c-ink);
  max-width: 20ch;
}
.feature-content p {
  margin-bottom: 0;
}
.feature-symbol {
  position: absolute;
  right: var(--s-4);
  top: var(--s-2);
  color: var(--c-line);
  font-size: 4.5rem;
  line-height: 1;
}
.boundary-section {
  margin-top: var(--s-5);
  padding: var(--s-5) var(--s-6);
  display: grid;
  grid-template-columns: 1fr 2.4fr;
  gap: var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.boundary-section > .eyebrow {
  color: var(--c-brand-text);
  padding-top: var(--s-1);
}
.boundary-section .prose {
  font-size: var(--fs-sm);
}
.boundary-section .prose p:last-child {
  margin-bottom: 0;
}
.philosophy h2 {
  margin-top: var(--s-3);
  max-width: 14ch;
}
.philosophy .prose {
  font-size: var(--fs-lg);
}
.comparison .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
}
.comparison h2 {
  font-size: var(--fs-xl);
  margin: 0;
}
.comparison .prose {
  font-size: var(--fs-sm);
}
.comparison .prose p:last-child {
  margin-bottom: 0;
}
.post-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}
.post-card {
  position: relative;
  border-top: 2px solid var(--c-line-strong);
  padding: var(--s-5) 0 0;
  display: flex;
  flex-direction: column;
  align-items: start;
}
.post-card .eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
}
.post-card h3 {
  font-size: var(--fs-xl);
  margin: var(--s-4) 0 var(--s-3);
}
.post-card h3 a {
  text-decoration: none;
}
.post-card h3 span {
  font-size: 0.8em;
  font-weight: 400;
  white-space: nowrap;
}
.post-card p {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  margin-bottom: var(--s-5);
}
.post-read {
  font: 0.6875rem var(--font-mono);
  margin-top: auto;
  text-decoration: none;
}
.post-read span {
  margin-left: var(--s-4);
}
.closing {
  background: var(--c-band);
  color: var(--c-band-text);
  text-align: center;
}
.closing .wrap {
  padding-block: var(--s-8);
}
.closing h2 {
  margin: var(--s-3) auto var(--s-6);
  max-width: 20ch;
}

.button-version {
  font: 0.6875rem var(--font-mono);
  padding: 2px var(--s-2);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.12);
}
.nav-start {
  display: none;
  white-space: nowrap;
}
.pillars {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
}
.pillar:hover {
  border-color: var(--c-line-strong);
  color: inherit;
}
.pillar h2 {
  font-size: var(--fs-xl);
  margin: 0;
}
.pillar p {
  margin: 0;
  color: var(--c-muted);
  font-size: var(--fs-sm);
}
.pillar-action {
  margin-top: auto;
  font-weight: var(--fw-strong);
  font-size: var(--fs-sm);
  color: var(--c-link);
}
.pillar:hover .pillar-action {
  color: var(--c-accent);
}
.cards--4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cards--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card-body {
  color: var(--c-muted);
  font-size: var(--fs-sm);
}
.card-body p:last-child {
  margin-bottom: 0;
}
.continuity-section {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--s-7);
  padding: var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
}
.continuity-header h2 {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-h3);
}
.continuity-prose {
  font-size: var(--fs-sm);
  max-width: none;
}
.continuity-prose > p:first-child {
  font-size: var(--fs-md);
}
.continuity-prose p:last-child {
  margin-bottom: 0;
}
.fit-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
}
.fit-column h3 {
  font-size: var(--fs-xl);
  margin: 0 0 var(--s-4);
}
.fit-column ul {
  padding-left: var(--s-5);
}
.dogfood {
  margin-top: var(--s-3);
  font-size: var(--fs-md);
  color: var(--c-muted);
}
.dogfood p:last-child {
  margin-bottom: 0;
}
.closing-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-7);
  align-items: center;
  text-align: left;
}
.closing-aside {
  border-left: 1px solid var(--c-band-line);
  padding-left: var(--s-6);
  color: var(--c-band-muted);
  font-size: var(--fs-sm);
}
.closing-aside .prose,
.closing-aside .prose > p:first-child {
  font-size: var(--fs-sm);
  color: var(--c-band-muted);
}
.closing-aside .prose a {
  color: var(--c-band-text);
  text-decoration-color: var(--c-band-muted);
}
.closing-aside .text-link {
  color: var(--c-band-text);
}
.footer-bottom .badges {
  display: inline-flex;
  vertical-align: middle;
  margin-left: var(--s-3);
}
.footer-bottom .badges img {
  height: 18px;
}

.strip {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.strip-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-display);
  margin: var(--s-1) 0 var(--s-2);
}
.strip-text {
  margin: 0;
  color: var(--c-muted);
  font-size: var(--fs-sm);
}
.strip-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}
.release-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
  margin-bottom: var(--s-6);
}
.releases-list .version-status {
  margin-left: var(--s-3);
}

/* ---------- 8. Reading layout: docs and journal ---------- */
.reading-layout {
  width: min(100% - 2 * var(--gutter), var(--w-wide));
  margin-inline: auto;
  padding-top: var(--s-7);
  display: grid;
  grid-template-columns: 14rem minmax(0, var(--w-reading)) 12rem;
  gap: var(--s-7);
  justify-content: center;
}
.reading-main {
  min-width: 0;
}
.docs-sidebar {
  font-size: var(--fs-xs);
}
.docs-sidebar nav {
  position: sticky;
  top: var(--s-5);
  max-height: calc(100vh - var(--s-6));
  overflow: auto;
  padding-right: var(--s-2);
}
.docs-sidebar .eyebrow {
  margin-bottom: var(--s-3);
  font-size: 0.625rem;
}
.docs-sidebar a {
  display: block;
  padding: var(--s-2) var(--s-3);
  margin: 2px calc(-1 * var(--s-3));
  border-radius: var(--r-sm);
  text-decoration: none;
  line-height: 1.45;
}
.docs-sidebar a[aria-current] {
  background: var(--c-brand-soft);
  color: var(--c-ink);
  font-weight: var(--fw-strong);
}
.docs-sidebar details {
  margin: var(--s-3) 0 0;
  padding-top: var(--s-2);
  border-top: 1px solid var(--c-line);
}
.docs-sidebar details.sidebar-area a {
  margin-left: 0;
  padding-left: var(--s-3);
}
.sidebar-area summary {
  font-weight: var(--fw-strong);
  padding: var(--s-2) 0;
}
.docs-sidebar a.planned,
.docs-sidebar a.planned:hover {
  color: var(--c-muted);
}
.docs-sidebar .soon {
  font: 0.5625rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  padding: 1px 6px;
  margin-left: var(--s-1);
  vertical-align: middle;
}
.docs-sidebar .sidebar-source {
  border-top: 1px solid var(--c-line);
  border-radius: 0;
  padding: var(--s-4) 0 0;
  margin: var(--s-5) 0 0;
  color: var(--c-muted);
}
.version-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin: 0 0 var(--s-5);
  padding: 0 0 var(--s-4);
  border-bottom: 1px solid var(--c-line);
}
.version-switcher .eyebrow {
  display: inline;
  font-size: 0.625rem;
}
.version-switcher ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.version-switcher a {
  display: inline-block;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: 20px;
  font: 0.6875rem var(--font-mono);
  text-decoration: none;
  color: var(--c-muted);
}
.version-switcher a[aria-current] {
  background: var(--c-brand-soft);
  border-color: var(--c-brand-soft);
  color: var(--c-ink);
  font-weight: var(--fw-strong);
}
.version-switcher a:hover {
  border-color: var(--c-ink);
  color: var(--c-ink);
}
.switcher-current {
  margin-left: var(--s-1);
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: inherit;
}
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  font: 0.6875rem var(--font-mono);
  color: var(--c-muted);
  margin: 0 0 var(--s-6);
}
.breadcrumbs a {
  text-decoration: none;
}
.reading-main > h1 {
  margin: var(--s-3) 0 var(--s-6);
}
.reading-main > .eyebrow {
  color: var(--c-accent);
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
}
.label-draft {
  color: var(--c-accent);
  font-weight: var(--fw-strong);
}
.version-banner,
.notice {
  border-left: 3px solid var(--c-link-underline);
  background: var(--c-paper-2);
  padding: var(--s-3) var(--s-4);
  margin: 0 0 var(--s-6);
  font-size: var(--fs-sm);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.version-banner a,
.notice a {
  color: var(--c-link);
}
.banner-development {
  border-left-color: var(--c-notice-border);
}
.banner-unsupported {
  border-left-color: var(--c-accent);
}
.notice {
  background: var(--c-notice-bg);
  border-left-color: var(--c-notice-border);
  color: var(--c-notice-fg);
}
.notice a {
  color: inherit;
}
.notice-planned {
  background: var(--c-paper-2);
  border-left-color: var(--c-link-underline);
  color: var(--c-ink);
}
.toc-desktop {
  font-size: var(--fs-xs);
  align-self: start;
  position: sticky;
  top: var(--s-6);
  border-left: 1px solid var(--c-line);
  padding-left: var(--s-4);
  margin-top: var(--s-3);
  max-height: 85vh;
  overflow: auto;
}
.toc-desktop .eyebrow {
  font-size: 0.5625rem;
}
.toc-list {
  list-style: none;
  padding: 0;
  margin: var(--s-4) 0 0;
  line-height: 1.5;
}
.toc-list li {
  margin: 0 0 var(--s-3);
}
.toc-list a {
  text-decoration: none;
  color: var(--c-muted);
}
.toc-list a:hover,
.toc-list a[aria-current] {
  color: var(--c-accent);
}
.toc-sub {
  padding-left: var(--s-3);
}
.mobile-toc {
  display: none;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding: var(--s-4) 0;
  margin-bottom: var(--s-5);
  font-size: var(--fs-sm);
}
.article-end {
  border-top: 1px solid var(--c-line);
  padding: var(--s-5) 0;
  margin-top: var(--s-7);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  font: 0.6875rem/1.6 var(--font-mono);
}
.article-end a {
  text-decoration: none;
}
.doc-next {
  background: var(--c-paper-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  margin-top: var(--s-3);
}
.doc-next a {
  display: block;
  text-decoration: none;
  font-size: var(--fs-sm);
  padding-top: var(--s-3);
}
.doc-next a span {
  float: right;
}
.journal-layout {
  grid-template-columns: minmax(0, var(--w-reading));
}
.journal-layout .toc-desktop {
  display: none;
}
.journal-layout .mobile-toc {
  display: block;
}
.journal-layout .prose {
  font-size: var(--fs-lg);
  line-height: 1.75;
}
.journal-layout .prose > p:first-child {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-style: italic;
  border-bottom: 1px solid var(--c-line);
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-6);
}
.journal-layout .prose strong {
  color: var(--c-brand-text);
}

/* ---------- 9. Prose ---------- */
.prose {
  font-size: var(--fs-md);
  line-height: 1.7;
  max-width: var(--w-prose);
  overflow-wrap: anywhere;
}
.prose h2 {
  font-size: var(--fs-h3);
  margin: var(--s-7) 0 var(--s-4);
}
.prose h3 {
  font-size: var(--fs-xl);
  margin: var(--s-6) 0 var(--s-3);
}
.prose h4 {
  margin-top: var(--s-5);
}
.prose > p:first-child {
  font-size: var(--fs-lg);
  color: var(--c-lead);
}
.prose ul,
.prose ol {
  padding-left: var(--s-5);
}
.prose li {
  margin-bottom: var(--s-2);
}
.prose a {
  color: var(--c-link);
  text-decoration-color: var(--c-link-underline);
}
.prose a:hover {
  color: var(--c-accent);
  text-decoration-color: var(--c-accent);
}
.prose strong {
  font-weight: var(--fw-strong);
}
.prose code {
  background: var(--c-code-bg);
  border-radius: 3px;
  padding: 2px 5px;
  font-size: 0.86em;
  color: var(--c-code-fg);
}
.prose pre {
  position: relative;
  background: var(--c-pre-bg);
  color: var(--c-pre-fg);
  border: 1px solid var(--c-pre-line);
  border-radius: var(--r-sm);
  padding: var(--s-5);
  overflow: auto;
  font-size: 0.8125rem;
  line-height: 1.75;
  margin: var(--s-5) 0;
  tab-size: 2;
}
.prose pre:has(.copy-button) {
  padding-top: var(--s-7);
}
.prose pre code {
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  border-radius: 0;
  white-space: pre;
}
.copy-button {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: 1px solid #597160;
  background: #304c3f;
  color: #e6eddf;
  font: 0.625rem var(--font-mono);
  border-radius: 3px;
  cursor: pointer;
}
.copy-button:hover {
  background: #42614f;
}
.table-scroll {
  overflow-x: auto;
  margin: var(--s-5) 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
  line-height: 1.55;
}
.prose th {
  text-align: left;
  background: var(--c-th-bg);
  color: var(--c-th-fg);
  font-size: 0.6875rem;
  font-weight: var(--fw-strong);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.prose th,
.prose td {
  padding: var(--s-3) var(--s-4);
  min-width: 8rem;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}
.prose tr:last-child td {
  border-bottom: 0;
}
.prose blockquote {
  border-left: 3px solid var(--c-link-underline);
  margin: var(--s-6) 0;
  padding: var(--s-1) 0 var(--s-1) var(--s-5);
  color: var(--c-muted);
}
.prose blockquote p:last-child {
  margin-bottom: 0;
}
.prose hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: var(--s-6) 0;
}
.prose img {
  border-radius: var(--r-sm);
}
.hljs-string,
.hljs-attr {
  color: #cee6a9;
}
.hljs-keyword,
.hljs-built_in {
  color: #efc791;
}
.hljs-comment {
  color: #a5bca9;
}
.hljs-number,
.hljs-literal {
  color: #d6c1ec;
}
.hljs-title {
  color: #b0dcd6;
}

/* ---------- 10. Journal index, versions index, 404 ---------- */
.journal-index {
  width: min(100% - 2 * var(--gutter), var(--w-wide));
  margin-inline: auto;
  padding-block: var(--s-8) var(--s-7);
}
.journal-intro {
  margin-bottom: var(--s-7);
}
.journal-intro h1 {
  font-size: var(--fs-hero);
  font-weight: 500;
  margin: var(--s-4) 0 var(--s-5);
}
.journal-intro p {
  font-size: var(--fs-xl);
  color: var(--c-muted);
  max-width: var(--w-prose);
}
.journal-footnote {
  margin-top: var(--s-7);
  font-size: var(--fs-xs);
  color: var(--c-muted);
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-5);
}
.versions-index {
  width: min(100% - 2 * var(--gutter), 52rem);
  margin-inline: auto;
  padding-block: var(--s-8) var(--s-7);
}
.versions-index h1 {
  margin: var(--s-4) 0 var(--s-6);
}
.versions-notice {
  font-size: var(--fs-lg);
  color: var(--c-lead);
  border-left: 3px solid var(--c-link-underline);
  padding-left: var(--s-5);
  margin-bottom: var(--s-7);
}
.versions-current {
  margin-bottom: var(--s-7);
}
.versions-index h2 {
  font-size: var(--fs-xl);
  margin: 0 0 var(--s-4);
}
.versions-hint {
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.versions-hint code {
  font-size: 0.9em;
}
.versions-group {
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-5);
  margin-bottom: var(--s-6);
}
.versions-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.versions-list li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-line);
}
.versions-list li:last-child {
  border-bottom: 0;
}
.versions-list a {
  font-weight: var(--fw-strong);
  text-decoration: none;
  color: var(--c-link);
}
.versions-list p {
  margin: var(--s-1) 0 0;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.version-status {
  font: 0.6875rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-muted);
  margin-left: var(--s-2);
}
.not-found {
  width: min(100% - 2 * var(--gutter), 52rem);
  margin: var(--s-9) auto;
}
.not-found h1 {
  margin: var(--s-4) 0;
}
.not-found .text-link {
  margin-left: var(--s-5);
}

/* ---------- 11. Responsive ---------- */
@media (max-width: 1180px) {
  .reading-layout {
    grid-template-columns: 12rem minmax(0, var(--w-reading));
    gap: var(--s-6);
  }
  .toc-desktop {
    display: none;
  }
  .mobile-toc {
    display: block;
  }
  .journal-layout {
    grid-template-columns: minmax(0, var(--w-reading));
  }
  .hero .wrap {
    gap: var(--s-6);
  }
  .workspace-figure {
    padding: var(--s-4);
  }
  .code-line {
    font-size: 0.5625rem;
  }
  .editor-label {
    font-size: 0.5rem;
  }
  .capsule-parts > span {
    font-size: 0.5rem;
    padding: 5px 6px;
  }
  .intro-section .wrap,
  .philosophy .wrap,
  .comparison .wrap {
    gap: var(--s-7);
  }
}
@media (max-width: 850px) {
  .site-header nav {
    gap: var(--s-4);
  }
  .github-link {
    display: none;
  }
  .palette-picker select {
    max-width: 7.5rem;
    font-size: 0.75rem;
  }
  .hero .wrap {
    grid-template-columns: 1fr;
    gap: var(--s-7);
    padding-block: var(--s-7);
  }
  .hero h1 {
    max-width: 16ch;
  }
  .workspace-figure {
    width: 100%;
    max-width: 36rem;
    margin: auto;
    padding: var(--s-5);
  }
  .scene-body {
    min-height: 12.5rem;
  }
  .code-line {
    font-size: 0.75rem;
  }
  .editor-label,
  .terminal-prompt {
    font-size: 0.625rem;
  }
  .file-tree {
    font-size: 0.6875rem;
  }
  .capsule-parts > span {
    font-size: 0.625rem;
    padding: 5px 10px;
  }
  .reading-layout {
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: var(--s-5);
  }
  .journal-layout {
    grid-template-columns: minmax(0, var(--w-reading));
  }
  .cards,
  .cards--4,
  .cards--2,
  .pillars,
  .post-cards,
  .fit-columns {
    grid-template-columns: 1fr;
  }
  .closing-grid,
  .strip {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
  .closing-aside {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--c-band-line);
    padding-top: var(--s-5);
  }
  .post-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--s-6);
    padding: var(--s-5) 0;
  }
  .post-card > .eyebrow {
    grid-column: 1 / -1;
  }
  .post-card h3 {
    grid-column: 1;
    margin-top: var(--s-4);
  }
  .post-card p {
    grid-column: 2;
    grid-row: 2 / 4;
    margin-top: var(--s-4);
    margin-bottom: 0;
  }
  .post-read {
    grid-column: 1;
    margin-top: var(--s-1);
  }
  .boundary-section,
  .continuity-section {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .section-heading {
    flex-direction: column;
    align-items: start;
    gap: var(--s-3);
  }
}
@media (max-width: 620px) {
  .section {
    padding-block: var(--s-7);
  }
  .site-header .wrap {
    min-height: 4rem;
    gap: var(--s-2) var(--s-3);
    flex-wrap: wrap;
    padding-block: var(--s-3);
  }
  .brand {
    font-size: 1.25rem;
  }
  .brand-mark {
    width: 16px;
    height: 24px;
    border-width: 2px;
  }
  .brand-mark:after {
    top: 9px;
    border-width: 2px;
  }
  .site-header nav {
    gap: var(--s-2) var(--s-3);
    font-size: var(--fs-xs);
    flex-wrap: wrap;
  }
  .nav-cta {
    display: none;
  }
  .nav-start {
    display: inline;
  }
  .hero .wrap {
    padding-block: var(--s-6);
    gap: var(--s-6);
  }
  .hero-actions {
    align-items: flex-start;
    gap: var(--s-4);
  }
  .workspace-figure {
    transform: none;
    padding: var(--s-4) var(--s-3);
  }
  .scene-body {
    min-height: 11rem;
  }
  .file-tree {
    font-size: 0.5rem;
    padding: var(--s-4) var(--s-2);
    min-width: 32%;
  }
  .file-indent {
    padding-left: var(--s-2);
  }
  .scene-editor {
    padding: var(--s-4) var(--s-2);
  }
  .editor-label {
    font-size: 0.4375rem;
    margin-bottom: var(--s-5);
  }
  .code-line {
    font-size: 0.5625rem;
  }
  .code-line i {
    font-size: 0.5rem;
    margin-right: var(--s-2);
  }
  .terminal-prompt,
  .scene-status {
    font-size: 0.4375rem;
  }
  .capsule-parts {
    gap: var(--s-1);
  }
  .capsule-parts > span {
    font-size: 0.5rem;
    padding: 4px 7px;
  }
  .health-strip {
    gap: var(--s-3);
    flex-wrap: wrap;
  }
  .intro-section .wrap,
  .philosophy .wrap,
  .comparison .wrap {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .motto {
    max-width: none;
  }
  .features {
    gap: var(--s-4);
  }
  .feature {
    padding: var(--s-5);
  }
  .boundary-section {
    padding: var(--s-5);
  }
  .post-cards {
    gap: var(--s-2);
  }
  .post-card {
    display: flex;
    padding: var(--s-5) 0;
    gap: 0;
  }
  .post-card p {
    margin: 0 0 var(--s-4);
  }
  .post-read {
    margin-top: 0;
  }
  .site-footer .wrap {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
  .site-footer nav {
    gap: var(--s-3);
  }
  .footer-bottom {
    flex-direction: column;
    gap: var(--s-2);
  }
  .build-details {
    justify-content: flex-start;
  }
  .reading-layout {
    display: block;
    padding-top: var(--s-5);
  }
  .docs-sidebar {
    margin-bottom: var(--s-6);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--c-line);
  }
  .docs-sidebar nav {
    position: static;
    max-height: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-2);
    padding-right: 0;
  }
  .docs-sidebar .eyebrow {
    flex-basis: 100%;
    margin-bottom: var(--s-1);
  }
  .docs-sidebar a {
    margin: 0;
    padding: var(--s-1) var(--s-2);
  }
  .docs-sidebar details {
    flex-basis: 100%;
    margin: var(--s-2) 0 0;
    padding-top: var(--s-2);
  }
  .docs-sidebar .sidebar-source {
    display: none;
  }
  .breadcrumbs {
    margin-bottom: var(--s-5);
  }
  .prose {
    font-size: 1rem;
  }
  .prose pre {
    padding: var(--s-4);
    margin: var(--s-4) 0;
  }
  .prose th,
  .prose td {
    padding: var(--s-3);
    min-width: 9rem;
  }
  .article-end {
    margin-top: var(--s-6);
  }
  .journal-layout .prose {
    font-size: var(--fs-md);
  }
  .journal-index {
    padding-block: var(--s-7) var(--s-5);
  }
  .journal-intro {
    margin-bottom: var(--s-6);
  }
  .versions-index {
    padding-block: var(--s-7) var(--s-5);
  }
  .not-found {
    margin: var(--s-8) auto;
  }
}
@media (prefers-reduced-motion: no-preference) {
  a,
  button {
    transition:
      color 0.15s var(--ease),
      background 0.15s var(--ease),
      border-color 0.15s var(--ease);
  }
  .workspace-figure {
    transition: transform 0.3s var(--ease);
  }
  .workspace-figure:hover {
    transform: rotate(0deg);
  }
}
@media print {
  .site-header,
  .site-footer,
  .docs-sidebar,
  .toc-desktop,
  .mobile-toc,
  .copy-button,
  .article-end,
  .doc-next,
  .version-switcher,
  .palette-picker {
    display: none;
  }
  .reading-layout {
    display: block;
    padding: 0;
  }
  .prose pre {
    white-space: pre-wrap;
    background: #eee;
    color: #111;
  }
  .prose pre code {
    white-space: pre-wrap;
  }
  body {
    background: white;
    color: black;
  }
}