/* Named color themes. Tokens keep the same names so existing components
   repaint. Contrast is tuned for WCAG AA body text (4.5:1) and UI (3:1). */

html[data-palette='cobalt2'],
html[data-palette='cobalt2'] .theme-paper {
  color-scheme: dark;

  --color-bg: #193549;
  --color-bg-glow: rgb(255 198 0 / 16%);
  --color-surface: #1f4662;
  --color-surface-muted: #1c3f59;
  --color-surface-sunken: #122536;
  --color-surface-raised: #255066;
  --color-chip: #255066;
  --color-header: #122536;
  --color-header-fg: #f4fbff;
  --color-header-muted: #c5dceb;
  --color-header-kicker: #ffc600;
  --color-nav-bg: rgb(18 37 54 / 96%);
  --color-text: #f4fbff;
  --color-text-secondary: #d7ebf6;
  --color-text-muted: #c5dceb;
  --color-text-faint: #a9c6d8;
  --color-text-faint-2: #8fb0c4;
  --color-contrast: #193549;
  --color-on-dark: #f4fbff;
  --color-on-ink: #d7ebf6;
  --color-border: #2f5f7a;
  --color-border-strong: #3d7391;
  --color-border-faint: #1c3f59;
  --color-accent: #ffc600;
  --color-accent-fill: #ffc600;
  --color-accent-hover: #ffd34d;
  --color-accent-press: #e6b200;
  --color-accent-contrast: #193549;
  --color-accent-soft: #2a4a22;
  --color-accent-softer: #243d1e;
  --color-accent-wash: #1e3a48;
  --color-accent-text: #ffc600;
  --color-accent-text-strong: #ffd34d;
  --color-accent-border: #8a6a00;
  --color-accent-border-strong: #ffc600;
  --color-accent-mid: #ffe18a;
  --color-sky-solid: #4db4e8;
  --color-ink: #122536;
  --color-ink-soft: #1c3f59;
  --color-heading: #f4fbff;
  --color-info-soft: #16324a;
  --color-info-border: #2f5f7a;
  --color-info-text: #b8e0f5;
  --color-info-text-strong: #d7ebf6;
  --color-info-wash: #16324a;
  --color-success: #b6f56e;
  --color-success-strong: #d0ff9a;
  --color-success-text: #b6f56e;
  --color-success-soft: #1d3b18;
  --color-success-softer: #173214;
  --color-success-fill: #1d3b18;
  --color-success-border: #3f7a28;
  --color-success-border-2: #3f7a28;
  --color-success-ink: #d0ff9a;
  --color-success-on-ink: #b6f56e;
  --color-live: #9be36b;
  --color-danger: #ff8aa4;
  --color-danger-strong: #ffb0c0;
  --color-danger-text: #ffb0c0;
  --color-danger-soft: #4a1d2c;
  --color-danger-soft-2: #4a1d2c;
  --color-danger-border: #8a3048;
  --color-danger-hot: #5a2434;
  --color-problem: #ff8aa4;
  --color-solution: #b6f56e;
  --color-warning: #ffc600;
  --color-warning-soft: #3d3208;
  --color-warning-text: #ffd34d;
  --color-violet-soft: #2a2450;
  --color-violet-border: #5a4d9a;
  --color-violet-text: #ddd6fe;
  --color-measure: #c4b5fd;
  --color-orange-soft: #3a2a10;
  --color-orange-border: #8a6a00;
  --color-orange-text: #ffd34d;
  --color-highlight: #ffc600;
  --color-code-bg: #122536;
  --color-code-fg: #f4fbff;
  --color-code-inline: #1c3f59;
  --color-overlay: rgb(8 18 28 / 72%);
  --color-shadow: rgb(0 0 0 / 45%);
  --color-menu-hover: #255066;
  --color-focus: #ffc600;
  --color-focus-ink: #193549;
  --color-focus-ring: rgb(255 198 0 / 55%);
  --color-a11y-frame: #193549;
  --color-badge-danger: #ffb0c0;
  --color-badge-success: #b6f56e;
  --color-badge-accent: #ffc600;
  --color-hero-border: #2f5f7a;
  --color-hero-end: #122536;
  --color-stat-bg: #1c3f59;
  --color-stat-text: #d7ebf6;
  --color-stat-strong: #ffc600;
  --color-selected-border: #ffc600;
  --color-selected-bg: #1c3f59;
  --color-selected-kicker: #ffc600;
  --color-selected-title: #f4fbff;
  --color-switch: #3d7391;
  --color-quest: #ffc600;
  --color-quest-hover: #ffd34d;
  --color-quest-ink: #193549;
}

html[data-palette='cobalt3'],
html[data-palette='cobalt3'] .theme-paper {
  color-scheme: dark;

  --color-bg: #0f1c2e;
  --color-bg-glow: rgb(79 209 197 / 16%);
  --color-surface: #17324a;
  --color-surface-muted: #142c42;
  --color-surface-sunken: #0b1624;
  --color-surface-raised: #1d3d59;
  --color-chip: #1d3d59;
  --color-header: #0b1624;
  --color-header-fg: #eaf6fb;
  --color-header-muted: #b7d0dc;
  --color-header-kicker: #7eeae0;
  --color-nav-bg: rgb(11 22 36 / 96%);
  --color-text: #eaf6fb;
  --color-text-secondary: #d2e6ef;
  --color-text-muted: #b7d0dc;
  --color-text-faint: #9bb8c6;
  --color-text-faint-2: #7f9eae;
  --color-contrast: #0f1c2e;
  --color-on-dark: #eaf6fb;
  --color-on-ink: #d2e6ef;
  --color-border: #2a4d66;
  --color-border-strong: #3a6582;
  --color-border-faint: #17324a;
  --color-accent: #7eeae0;
  --color-accent-fill: #1f8f86;
  --color-accent-hover: #a6f3ec;
  --color-accent-press: #157a73;
  --color-accent-contrast: #041014;
  --color-accent-soft: #123832;
  --color-accent-softer: #0f2c28;
  --color-accent-wash: #102830;
  --color-accent-text: #7eeae0;
  --color-accent-text-strong: #a6f3ec;
  --color-accent-border: #1f8f86;
  --color-accent-border-strong: #7eeae0;
  --color-accent-mid: #a6f3ec;
  --color-sky-solid: #7eeae0;
  --color-ink: #0b1624;
  --color-ink-soft: #17324a;
  --color-heading: #eaf6fb;
  --color-info-soft: #142c42;
  --color-info-border: #2a4d66;
  --color-info-text: #c5e4ef;
  --color-info-text-strong: #eaf6fb;
  --color-info-wash: #142c42;
  --color-success: #9be7b5;
  --color-success-strong: #c5f4d4;
  --color-success-text: #9be7b5;
  --color-success-soft: #143326;
  --color-success-softer: #10281e;
  --color-success-fill: #143326;
  --color-success-border: #2d6b4a;
  --color-success-border-2: #2d6b4a;
  --color-success-ink: #c5f4d4;
  --color-success-on-ink: #9be7b5;
  --color-live: #9be7b5;
  --color-danger: #ff8b9a;
  --color-danger-strong: #ffb3bd;
  --color-danger-text: #ffb3bd;
  --color-danger-soft: #3f1c24;
  --color-danger-soft-2: #3f1c24;
  --color-danger-border: #8a3040;
  --color-danger-hot: #4c2430;
  --color-problem: #ff8b9a;
  --color-solution: #9be7b5;
  --color-warning: #ffd166;
  --color-warning-soft: #3a3010;
  --color-warning-text: #ffe08a;
  --color-violet-soft: #241c40;
  --color-violet-border: #4c3a78;
  --color-violet-text: #ddd6fe;
  --color-measure: #c4b5fd;
  --color-orange-soft: #3a2a10;
  --color-orange-border: #8a6a20;
  --color-orange-text: #ffd166;
  --color-highlight: #ffd166;
  --color-code-bg: #0b1624;
  --color-code-fg: #eaf6fb;
  --color-code-inline: #17324a;
  --color-overlay: rgb(4 10 18 / 72%);
  --color-shadow: rgb(0 0 0 / 50%);
  --color-menu-hover: #1d3d59;
  --color-focus: #ffd166;
  --color-focus-ink: #0f1c2e;
  --color-focus-ring: rgb(255 209 102 / 55%);
  --color-a11y-frame: #0f1c2e;
  --color-badge-danger: #ffb3bd;
  --color-badge-success: #9be7b5;
  --color-badge-accent: #7eeae0;
  --color-hero-border: #2a4d66;
  --color-hero-end: #0b1624;
  --color-stat-bg: #17324a;
  --color-stat-text: #d2e6ef;
  --color-stat-strong: #7eeae0;
  --color-selected-border: #7eeae0;
  --color-selected-bg: #17324a;
  --color-selected-kicker: #7eeae0;
  --color-selected-title: #eaf6fb;
  --color-switch: #3a6582;
  --color-quest: #7eeae0;
  --color-quest-hover: #a6f3ec;
  --color-quest-ink: #041014;
}

html[data-palette='material'],
html[data-palette='material'] .theme-paper {
  color-scheme: dark;

  --color-bg: #263238;
  --color-bg-glow: rgb(128 203 196 / 16%);
  --color-surface: #2e3c43;
  --color-surface-muted: #314249;
  --color-surface-sunken: #1e272c;
  --color-surface-raised: #37474f;
  --color-chip: #37474f;
  --color-header: #1e272c;
  --color-header-fg: #eeffff;
  --color-header-muted: #c5d4d8;
  --color-header-kicker: #80cbc4;
  --color-nav-bg: rgb(30 39 44 / 96%);
  --color-text: #eeffff;
  --color-text-secondary: #d7e6ea;
  --color-text-muted: #c5d4d8;
  --color-text-faint: #a7b8bd;
  --color-text-faint-2: #8ea0a6;
  --color-contrast: #1e272c;
  --color-on-dark: #eeffff;
  --color-on-ink: #d7e6ea;
  --color-border: #455a64;
  --color-border-strong: #546e7a;
  --color-border-faint: #314249;
  --color-accent: #80cbc4;
  --color-accent-fill: #00695c;
  --color-accent-hover: #a7ffeb;
  --color-accent-press: #004d40;
  --color-accent-contrast: #eeffff;
  --color-accent-soft: #1d3b38;
  --color-accent-softer: #17302e;
  --color-accent-wash: #1a3330;
  --color-accent-text: #a7ffeb;
  --color-accent-text-strong: #b9f6ca;
  --color-accent-border: #00897b;
  --color-accent-border-strong: #80cbc4;
  --color-accent-mid: #a7ffeb;
  --color-sky-solid: #82aaff;
  --color-ink: #1e272c;
  --color-ink-soft: #2e3c43;
  --color-heading: #eeffff;
  --color-info-soft: #243038;
  --color-info-border: #455a64;
  --color-info-text: #c5d4d8;
  --color-info-text-strong: #eeffff;
  --color-info-wash: #243038;
  --color-success: #c3e88d;
  --color-success-strong: #d9f2b0;
  --color-success-text: #c3e88d;
  --color-success-soft: #2a3b1c;
  --color-success-softer: #223016;
  --color-success-fill: #2a3b1c;
  --color-success-border: #5b7a32;
  --color-success-border-2: #5b7a32;
  --color-success-ink: #d9f2b0;
  --color-success-on-ink: #c3e88d;
  --color-live: #c3e88d;
  --color-danger: #f07178;
  --color-danger-strong: #ff9aa0;
  --color-danger-text: #ff9aa0;
  --color-danger-soft: #3f1e22;
  --color-danger-soft-2: #3f1e22;
  --color-danger-border: #8a3a40;
  --color-danger-hot: #4c262a;
  --color-problem: #f07178;
  --color-solution: #c3e88d;
  --color-warning: #ffcb6b;
  --color-warning-soft: #3a3014;
  --color-warning-text: #ffd78a;
  --color-violet-soft: #2a2440;
  --color-violet-border: #5c6bc0;
  --color-violet-text: #c5cae9;
  --color-measure: #c5cae9;
  --color-orange-soft: #3a2a14;
  --color-orange-border: #8a6a20;
  --color-orange-text: #ffcb6b;
  --color-highlight: #ffcb6b;
  --color-code-bg: #1e272c;
  --color-code-fg: #eeffff;
  --color-code-inline: #314249;
  --color-overlay: rgb(12 16 18 / 72%);
  --color-shadow: rgb(0 0 0 / 45%);
  --color-menu-hover: #37474f;
  --color-focus: #ffcb6b;
  --color-focus-ink: #1e272c;
  --color-focus-ring: rgb(255 203 107 / 55%);
  --color-a11y-frame: #263238;
  --color-badge-danger: #ff9aa0;
  --color-badge-success: #c3e88d;
  --color-badge-accent: #a7ffeb;
  --color-hero-border: #455a64;
  --color-hero-end: #1e272c;
  --color-stat-bg: #2e3c43;
  --color-stat-text: #d7e6ea;
  --color-stat-strong: #a7ffeb;
  --color-selected-border: #80cbc4;
  --color-selected-bg: #2e3c43;
  --color-selected-kicker: #a7ffeb;
  --color-selected-title: #eeffff;
  --color-switch: #546e7a;
  --color-quest: #80cbc4;
  --color-quest-hover: #a7ffeb;
  --color-quest-ink: #041412;
}

html[data-palette='aura'],
html[data-palette='aura'] .theme-paper {
  color-scheme: dark;

  --color-bg: #15141b;
  --color-bg-glow: rgb(162 119 255 / 18%);
  --color-surface: #1f1d27;
  --color-surface-muted: #23212c;
  --color-surface-sunken: #110f16;
  --color-surface-raised: #2a2734;
  --color-chip: #2a2734;
  --color-header: #110f16;
  --color-header-fg: #edecee;
  --color-header-muted: #c8c5d0;
  --color-header-kicker: #cbb2ff;
  --color-nav-bg: rgb(17 15 22 / 96%);
  --color-text: #edecee;
  --color-text-secondary: #dddbe3;
  --color-text-muted: #c8c5d0;
  --color-text-faint: #ada8b8;
  --color-text-faint-2: #948ea0;
  --color-contrast: #15141b;
  --color-on-dark: #edecee;
  --color-on-ink: #dddbe3;
  --color-border: #3a3648;
  --color-border-strong: #4d4860;
  --color-border-faint: #23212c;
  --color-accent: #cbb2ff;
  --color-accent-fill: #5b35c5;
  --color-accent-hover: #ddd0ff;
  --color-accent-press: #4a28b0;
  --color-accent-contrast: #edecee;
  --color-accent-soft: #2a2144;
  --color-accent-softer: #221b38;
  --color-accent-wash: #1e1830;
  --color-accent-text: #cbb2ff;
  --color-accent-text-strong: #ddd0ff;
  --color-accent-border: #7a4fe0;
  --color-accent-border-strong: #cbb2ff;
  --color-accent-mid: #ddd0ff;
  --color-sky-solid: #61ffca;
  --color-ink: #110f16;
  --color-ink-soft: #1f1d27;
  --color-heading: #edecee;
  --color-info-soft: #1f1d27;
  --color-info-border: #3a3648;
  --color-info-text: #dddbe3;
  --color-info-text-strong: #edecee;
  --color-info-wash: #1f1d27;
  --color-success: #61ffca;
  --color-success-strong: #9bffdd;
  --color-success-text: #9bffdd;
  --color-success-soft: #14332a;
  --color-success-softer: #102820;
  --color-success-fill: #14332a;
  --color-success-border: #2d6b58;
  --color-success-border-2: #2d6b58;
  --color-success-ink: #9bffdd;
  --color-success-on-ink: #61ffca;
  --color-live: #61ffca;
  --color-danger: #ff8ea0;
  --color-danger-strong: #ffb3be;
  --color-danger-text: #ffb3be;
  --color-danger-soft: #3f1c24;
  --color-danger-soft-2: #3f1c24;
  --color-danger-border: #8a3040;
  --color-danger-hot: #4c2430;
  --color-problem: #ff8ea0;
  --color-solution: #61ffca;
  --color-warning: #ffca85;
  --color-warning-soft: #3a2c14;
  --color-warning-text: #ffd7a8;
  --color-violet-soft: #2a2144;
  --color-violet-border: #7a4fe0;
  --color-violet-text: #ddd0ff;
  --color-measure: #cbb2ff;
  --color-orange-soft: #3a2c14;
  --color-orange-border: #8a6a30;
  --color-orange-text: #ffca85;
  --color-highlight: #ffca85;
  --color-code-bg: #110f16;
  --color-code-fg: #edecee;
  --color-code-inline: #23212c;
  --color-overlay: rgb(8 6 12 / 76%);
  --color-shadow: rgb(0 0 0 / 50%);
  --color-menu-hover: #2a2734;
  --color-focus: #ffca85;
  --color-focus-ink: #15141b;
  --color-focus-ring: rgb(255 202 133 / 55%);
  --color-a11y-frame: #15141b;
  --color-badge-danger: #ffb3be;
  --color-badge-success: #9bffdd;
  --color-badge-accent: #cbb2ff;
  --color-hero-border: #3a3648;
  --color-hero-end: #110f16;
  --color-stat-bg: #1f1d27;
  --color-stat-text: #dddbe3;
  --color-stat-strong: #cbb2ff;
  --color-selected-border: #cbb2ff;
  --color-selected-bg: #1f1d27;
  --color-selected-kicker: #cbb2ff;
  --color-selected-title: #edecee;
  --color-switch: #4d4860;
  --color-quest: #cbb2ff;
  --color-quest-hover: #ddd0ff;
  --color-quest-ink: #15141b;
}

html[data-palette='shades-purple'],
html[data-palette='shades-purple'] .theme-paper {
  color-scheme: dark;

  --color-bg: #2d2b55;
  --color-bg-glow: rgb(250 208 0 / 14%);
  --color-surface: #3b3868;
  --color-surface-muted: #353265;
  --color-surface-sunken: #1e1e3f;
  --color-surface-raised: #4a4780;
  --color-chip: #4a4780;
  --color-header: #1e1e3f;
  --color-header-fg: #f6f4ff;
  --color-header-muted: #d4cff0;
  --color-header-kicker: #fad000;
  --color-nav-bg: rgb(30 30 63 / 96%);
  --color-text: #f6f4ff;
  --color-text-secondary: #e6e2fb;
  --color-text-muted: #d4cff0;
  --color-text-faint: #b9b3dc;
  --color-text-faint-2: #9e97c6;
  --color-contrast: #1e1e3f;
  --color-on-dark: #f6f4ff;
  --color-on-ink: #e6e2fb;
  --color-border: #5c58a0;
  --color-border-strong: #6e69b4;
  --color-border-faint: #3b3868;
  --color-accent: #fad000;
  --color-accent-fill: #fad000;
  --color-accent-hover: #ffe566;
  --color-accent-press: #e0bb00;
  --color-accent-contrast: #2d2b55;
  --color-accent-soft: #3d3510;
  --color-accent-softer: #322c0e;
  --color-accent-wash: #322c4a;
  --color-accent-text: #fad000;
  --color-accent-text-strong: #ffe566;
  --color-accent-border: #a38a00;
  --color-accent-border-strong: #fad000;
  --color-accent-mid: #ffe566;
  --color-sky-solid: #a599e9;
  --color-ink: #1e1e3f;
  --color-ink-soft: #2d2b55;
  --color-heading: #f6f4ff;
  --color-info-soft: #353265;
  --color-info-border: #5c58a0;
  --color-info-text: #e6e2fb;
  --color-info-text-strong: #f6f4ff;
  --color-info-wash: #353265;
  --color-success: #a5ea8a;
  --color-success-strong: #c6f4b4;
  --color-success-text: #c6f4b4;
  --color-success-soft: #1d3b22;
  --color-success-softer: #17301c;
  --color-success-fill: #1d3b22;
  --color-success-border: #3f7a48;
  --color-success-border-2: #3f7a48;
  --color-success-ink: #c6f4b4;
  --color-success-on-ink: #a5ea8a;
  --color-live: #a5ea8a;
  --color-danger: #ff8aa4;
  --color-danger-strong: #ffb0c0;
  --color-danger-text: #ffb0c0;
  --color-danger-soft: #4a1d2c;
  --color-danger-soft-2: #4a1d2c;
  --color-danger-border: #8a3048;
  --color-danger-hot: #5a2434;
  --color-problem: #ff8aa4;
  --color-solution: #a5ea8a;
  --color-warning: #fad000;
  --color-warning-soft: #3d3208;
  --color-warning-text: #ffe566;
  --color-violet-soft: #3b3868;
  --color-violet-border: #a599e9;
  --color-violet-text: #e6e2fb;
  --color-measure: #d4cff0;
  --color-orange-soft: #3d3208;
  --color-orange-border: #a38a00;
  --color-orange-text: #ffe566;
  --color-highlight: #fad000;
  --color-code-bg: #1e1e3f;
  --color-code-fg: #f6f4ff;
  --color-code-inline: #3b3868;
  --color-overlay: rgb(16 16 36 / 76%);
  --color-shadow: rgb(0 0 0 / 50%);
  --color-menu-hover: #4a4780;
  --color-focus: #fad000;
  --color-focus-ink: #2d2b55;
  --color-focus-ring: rgb(250 208 0 / 55%);
  --color-a11y-frame: #2d2b55;
  --color-badge-danger: #ffb0c0;
  --color-badge-success: #c6f4b4;
  --color-badge-accent: #fad000;
  --color-hero-border: #5c58a0;
  --color-hero-end: #1e1e3f;
  --color-stat-bg: #3b3868;
  --color-stat-text: #e6e2fb;
  --color-stat-strong: #fad000;
  --color-selected-border: #fad000;
  --color-selected-bg: #3b3868;
  --color-selected-kicker: #fad000;
  --color-selected-title: #f6f4ff;
  --color-switch: #6e69b4;
  --color-quest: #fad000;
  --color-quest-hover: #ffe566;
  --color-quest-ink: #2d2b55;
}

html[data-palette='night-owl'],
html[data-palette='night-owl'] .theme-paper {
  color-scheme: dark;

  --color-bg: #011627;
  --color-bg-glow: rgb(127 219 202 / 16%);
  --color-surface: #0b2942;
  --color-surface-muted: #0a2339;
  --color-surface-sunken: #010e1a;
  --color-surface-raised: #1d3b53;
  --color-chip: #1d3b53;
  --color-header: #01111d;
  --color-header-fg: #d6deeb;
  --color-header-muted: #b4c7d8;
  --color-header-kicker: #7fdbca;
  --color-nav-bg: rgb(1 17 29 / 96%);
  --color-text: #d6deeb;
  --color-text-secondary: #c5d4e4;
  --color-text-muted: #b4c7d8;
  --color-text-faint: #8badc1;
  --color-text-faint-2: #7a9bb0;
  --color-contrast: #011627;
  --color-on-dark: #d6deeb;
  --color-on-ink: #c5d4e4;
  --color-border: #1d3b53;
  --color-border-strong: #234d70;
  --color-border-faint: #0a2339;
  --color-accent: #82aaff;
  --color-accent-fill: #7e57c2;
  --color-accent-hover: #9dbfff;
  --color-accent-press: #6a48a8;
  --color-accent-contrast: #ffffff;
  --color-accent-soft: #16344c;
  --color-accent-softer: #102c44;
  --color-accent-wash: #0d2a42;
  --color-accent-text: #82aaff;
  --color-accent-text-strong: #9dbfff;
  --color-accent-border: #4d6eb8;
  --color-accent-border-strong: #82aaff;
  --color-accent-mid: #9dbfff;
  --color-sky-solid: #82aaff;
  --color-ink: #01111d;
  --color-ink-soft: #0b2942;
  --color-heading: #d6deeb;
  --color-info-soft: #0b2942;
  --color-info-border: #1d3b53;
  --color-info-text: #c5d4e4;
  --color-info-text-strong: #d6deeb;
  --color-info-wash: #0b2942;
  --color-success: #addb67;
  --color-success-strong: #c5e478;
  --color-success-text: #c5e478;
  --color-success-soft: #143326;
  --color-success-softer: #10281e;
  --color-success-fill: #143326;
  --color-success-border: #2d6b48;
  --color-success-border-2: #2d6b48;
  --color-success-ink: #c5e478;
  --color-success-on-ink: #addb67;
  --color-live: #22da6e;
  --color-danger: #ff869a;
  --color-danger-strong: #ffb0c0;
  --color-danger-text: #ffb0c0;
  --color-danger-soft: #3f1c28;
  --color-danger-soft-2: #3f1c28;
  --color-danger-border: #8a3048;
  --color-danger-hot: #4c2430;
  --color-problem: #ff5874;
  --color-solution: #addb67;
  --color-warning: #ffeb95;
  --color-warning-soft: #3a3010;
  --color-warning-text: #ffeb95;
  --color-violet-soft: #2a2144;
  --color-violet-border: #7e57c2;
  --color-violet-text: #c792ea;
  --color-measure: #c792ea;
  --color-orange-soft: #3a2c14;
  --color-orange-border: #8a6a30;
  --color-orange-text: #ecc48d;
  --color-highlight: #7fdbca;
  --color-code-bg: #01111d;
  --color-code-fg: #d6deeb;
  --color-code-inline: #0b2942;
  --color-overlay: rgb(1 14 26 / 76%);
  --color-shadow: rgb(0 0 0 / 50%);
  --color-menu-hover: #1d3b53;
  --color-focus: #7fdbca;
  --color-focus-ink: #011627;
  --color-focus-ring: rgb(127 219 202 / 55%);
  --color-a11y-frame: #011627;
  --color-badge-danger: #ff869a;
  --color-badge-success: #addb67;
  --color-badge-accent: #82aaff;
  --color-hero-border: #1d3b53;
  --color-hero-end: #01111d;
  --color-stat-bg: #0b2942;
  --color-stat-text: #c5d4e4;
  --color-stat-strong: #7fdbca;
  --color-selected-border: #82aaff;
  --color-selected-bg: #0b2942;
  --color-selected-kicker: #7fdbca;
  --color-selected-title: #d6deeb;
  --color-switch: #234d70;
  --color-quest: #7fdbca;
  --color-quest-hover: #a8f0e2;
  --color-quest-ink: #011627;
}

html[data-palette='one-dark'],
html[data-palette='one-dark'] .theme-paper {
  color-scheme: dark;

  --color-bg: #282c34;
  --color-bg-glow: rgb(97 175 239 / 14%);
  --color-surface: #21252b;
  --color-surface-muted: #2c313a;
  --color-surface-sunken: #1b1d23;
  --color-surface-raised: #333842;
  --color-chip: #333842;
  --color-header: #21252b;
  --color-header-fg: #d7dae0;
  --color-header-muted: #b4bcc8;
  --color-header-kicker: #61afef;
  --color-nav-bg: rgb(33 37 43 / 96%);
  --color-text: #d7dae0;
  --color-text-secondary: #c8ccd4;
  --color-text-muted: #b4bcc8;
  --color-text-faint: #9da5b4;
  --color-text-faint-2: #828997;
  --color-contrast: #282c34;
  --color-on-dark: #d7dae0;
  --color-on-ink: #c8ccd4;
  --color-border: #3a3f4b;
  --color-border-strong: #4b5263;
  --color-border-faint: #2c313a;
  --color-accent: #61afef;
  --color-accent-fill: #3870c9;
  --color-accent-hover: #7ec0f5;
  --color-accent-press: #2f62c0;
  --color-accent-contrast: #ffffff;
  --color-accent-soft: #243044;
  --color-accent-softer: #1e2838;
  --color-accent-wash: #1c2736;
  --color-accent-text: #61afef;
  --color-accent-text-strong: #7ec0f5;
  --color-accent-border: #3870c9;
  --color-accent-border-strong: #61afef;
  --color-accent-mid: #7ec0f5;
  --color-sky-solid: #61afef;
  --color-ink: #1b1d23;
  --color-ink-soft: #21252b;
  --color-heading: #d7dae0;
  --color-info-soft: #2c313a;
  --color-info-border: #3a3f4b;
  --color-info-text: #c8ccd4;
  --color-info-text-strong: #d7dae0;
  --color-info-wash: #2c313a;
  --color-success: #98c379;
  --color-success-strong: #b5d99a;
  --color-success-text: #b5d99a;
  --color-success-soft: #24331c;
  --color-success-softer: #1c2816;
  --color-success-fill: #24331c;
  --color-success-border: #4b7a38;
  --color-success-border-2: #4b7a38;
  --color-success-ink: #b5d99a;
  --color-success-on-ink: #98c379;
  --color-live: #98c379;
  --color-danger: #ff8b93;
  --color-danger-strong: #ffb0b5;
  --color-danger-text: #ffb0b5;
  --color-danger-soft: #3f1e22;
  --color-danger-soft-2: #3f1e22;
  --color-danger-border: #8a3a40;
  --color-danger-hot: #4c262a;
  --color-problem: #e06c75;
  --color-solution: #98c379;
  --color-warning: #e5c07b;
  --color-warning-soft: #3a3014;
  --color-warning-text: #e5c07b;
  --color-violet-soft: #2e2440;
  --color-violet-border: #c678dd;
  --color-violet-text: #d4a0ea;
  --color-measure: #c678dd;
  --color-orange-soft: #3a2c14;
  --color-orange-border: #8a6a30;
  --color-orange-text: #d19a66;
  --color-highlight: #e5c07b;
  --color-code-bg: #1b1d23;
  --color-code-fg: #d7dae0;
  --color-code-inline: #2c313a;
  --color-overlay: rgb(12 14 18 / 72%);
  --color-shadow: rgb(0 0 0 / 45%);
  --color-menu-hover: #2c313a;
  --color-focus: #e5c07b;
  --color-focus-ink: #282c34;
  --color-focus-ring: rgb(229 192 123 / 55%);
  --color-a11y-frame: #282c34;
  --color-badge-danger: #ff8b93;
  --color-badge-success: #98c379;
  --color-badge-accent: #61afef;
  --color-hero-border: #3a3f4b;
  --color-hero-end: #1b1d23;
  --color-stat-bg: #21252b;
  --color-stat-text: #c8ccd4;
  --color-stat-strong: #61afef;
  --color-selected-border: #61afef;
  --color-selected-bg: #2c313a;
  --color-selected-kicker: #61afef;
  --color-selected-title: #d7dae0;
  --color-switch: #4b5263;
  --color-quest: #61afef;
  --color-quest-hover: #7ec0f5;
  --color-quest-ink: #1b1d23;
}

html[data-palette='github-dark'],
html[data-palette='github-dark'] .theme-paper {
  color-scheme: dark;

  --color-bg: #0d1117;
  --color-bg-glow: rgb(47 129 247 / 14%);
  --color-surface: #161b22;
  --color-surface-muted: #1c2128;
  --color-surface-sunken: #010409;
  --color-surface-raised: #21262d;
  --color-chip: #21262d;
  --color-header: #010409;
  --color-header-fg: #e6edf3;
  --color-header-muted: #b1bac4;
  --color-header-kicker: #2f81f7;
  --color-nav-bg: rgb(1 4 9 / 96%);
  --color-text: #e6edf3;
  --color-text-secondary: #d0d7de;
  --color-text-muted: #b1bac4;
  --color-text-faint: #8b949e;
  --color-text-faint-2: #7d8590;
  --color-contrast: #0d1117;
  --color-on-dark: #e6edf3;
  --color-on-ink: #d0d7de;
  --color-border: #30363d;
  --color-border-strong: #484f58;
  --color-border-faint: #21262d;
  --color-accent: #2f81f7;
  --color-accent-fill: #1f6feb;
  --color-accent-hover: #58a6ff;
  --color-accent-press: #1a62d0;
  --color-accent-contrast: #ffffff;
  --color-accent-soft: #132f55;
  --color-accent-softer: #102844;
  --color-accent-wash: #0d2038;
  --color-accent-text: #58a6ff;
  --color-accent-text-strong: #79b8ff;
  --color-accent-border: #1f6feb;
  --color-accent-border-strong: #2f81f7;
  --color-accent-mid: #58a6ff;
  --color-sky-solid: #2f81f7;
  --color-ink: #010409;
  --color-ink-soft: #161b22;
  --color-heading: #e6edf3;
  --color-info-soft: #161b22;
  --color-info-border: #30363d;
  --color-info-text: #d0d7de;
  --color-info-text-strong: #e6edf3;
  --color-info-wash: #161b22;
  --color-success: #3fb950;
  --color-success-strong: #56d364;
  --color-success-text: #56d364;
  --color-success-soft: #12261a;
  --color-success-softer: #0e1e14;
  --color-success-fill: #12261a;
  --color-success-border: #238636;
  --color-success-border-2: #238636;
  --color-success-ink: #56d364;
  --color-success-on-ink: #3fb950;
  --color-live: #3fb950;
  --color-danger: #f85149;
  --color-danger-strong: #ff7b72;
  --color-danger-text: #ff7b72;
  --color-danger-soft: #3d1618;
  --color-danger-soft-2: #3d1618;
  --color-danger-border: #8a3030;
  --color-danger-hot: #4c1c1e;
  --color-problem: #f85149;
  --color-solution: #3fb950;
  --color-warning: #d29922;
  --color-warning-soft: #3a2c10;
  --color-warning-text: #e3b341;
  --color-violet-soft: #2a2144;
  --color-violet-border: #a371f7;
  --color-violet-text: #d2a8ff;
  --color-measure: #a371f7;
  --color-orange-soft: #3a2c14;
  --color-orange-border: #9e6a03;
  --color-orange-text: #d29922;
  --color-highlight: #d29922;
  --color-code-bg: #010409;
  --color-code-fg: #e6edf3;
  --color-code-inline: #161b22;
  --color-overlay: rgb(1 4 9 / 76%);
  --color-shadow: rgb(0 0 0 / 50%);
  --color-menu-hover: #21262d;
  --color-focus: #e3b341;
  --color-focus-ink: #0d1117;
  --color-focus-ring: rgb(227 179 65 / 55%);
  --color-a11y-frame: #0d1117;
  --color-badge-danger: #ff7b72;
  --color-badge-success: #56d364;
  --color-badge-accent: #58a6ff;
  --color-hero-border: #30363d;
  --color-hero-end: #010409;
  --color-stat-bg: #161b22;
  --color-stat-text: #d0d7de;
  --color-stat-strong: #58a6ff;
  --color-selected-border: #2f81f7;
  --color-selected-bg: #161b22;
  --color-selected-kicker: #58a6ff;
  --color-selected-title: #e6edf3;
  --color-switch: #484f58;
  --color-quest: #2f81f7;
  --color-quest-hover: #58a6ff;
  --color-quest-ink: #ffffff;
}

html[data-palette='github-light'],
html[data-palette='github-light'] .theme-paper {
  color-scheme: light;

  --color-bg: #ffffff;
  --color-bg-glow: rgb(9 105 218 / 10%);
  --color-surface: #f6f8fa;
  --color-surface-muted: #f6f8fa;
  --color-surface-sunken: #eaeef2;
  --color-surface-raised: #ffffff;
  --color-chip: #eaeef2;
  --color-header: #f6f8fa;
  --color-header-fg: #1f2328;
  --color-header-muted: #656d76;
  --color-header-kicker: #0969da;
  --color-nav-bg: rgb(246 248 250 / 96%);
  --color-text: #1f2328;
  --color-text-secondary: #32383f;
  --color-text-muted: #656d76;
  --color-text-faint: #656d76;
  --color-text-faint-2: #656d76;
  --color-contrast: #ffffff;
  --color-on-dark: #e6edf3;
  --color-on-ink: #d0d7de;
  --color-border: #d0d7de;
  --color-border-strong: #afb8c1;
  --color-border-faint: #eaeef2;
  --color-accent: #0969da;
  --color-accent-fill: #1f6feb;
  --color-accent-hover: #0550ae;
  --color-accent-press: #033d8b;
  --color-accent-contrast: #ffffff;
  --color-accent-soft: #ddf4ff;
  --color-accent-softer: #f0f7fc;
  --color-accent-wash: #f6f8fa;
  --color-accent-text: #0969da;
  --color-accent-text-strong: #0550ae;
  --color-accent-border: #54aeff;
  --color-accent-border-strong: #0969da;
  --color-accent-mid: #0550ae;
  --color-sky-solid: #0969da;
  --color-ink: #1f2328;
  --color-ink-soft: #32383f;
  --color-heading: #1f2328;
  --color-info-soft: #ddf4ff;
  --color-info-border: #54aeff;
  --color-info-text: #0550ae;
  --color-info-text-strong: #0969da;
  --color-info-wash: #f0f7fc;
  --color-success: #1a7f37;
  --color-success-strong: #1a7f37;
  --color-success-text: #1a7f37;
  --color-success-soft: #dafbe1;
  --color-success-softer: #e6ffec;
  --color-success-fill: #dafbe1;
  --color-success-border: #4ac26b;
  --color-success-border-2: #4ac26b;
  --color-success-ink: #1a7f37;
  --color-success-on-ink: #1a7f37;
  --color-live: #1a7f37;
  --color-danger: #d1242f;
  --color-danger-strong: #a40e26;
  --color-danger-text: #a40e26;
  --color-danger-soft: #ffebe9;
  --color-danger-soft-2: #ffebe9;
  --color-danger-border: #ff8182;
  --color-danger-hot: #ffcecb;
  --color-problem: #d1242f;
  --color-solution: #1a7f37;
  --color-warning: #9a6700;
  --color-warning-soft: #fff8c5;
  --color-warning-text: #7d4e00;
  --color-violet-soft: #fbefff;
  --color-violet-border: #c297ff;
  --color-violet-text: #8250df;
  --color-measure: #8250df;
  --color-orange-soft: #fff1e5;
  --color-orange-border: #fb8f44;
  --color-orange-text: #bc4c00;
  --color-highlight: #0969da;
  --color-code-bg: #f6f8fa;
  --color-code-fg: #1f2328;
  --color-code-inline: #eaeef2;
  --color-overlay: rgb(31 35 40 / 48%);
  --color-shadow: rgb(31 35 40 / 18%);
  --color-menu-hover: #eaeef2;
  --color-focus: #0969da;
  --color-focus-ink: #ffffff;
  --color-focus-ring: rgb(9 105 218 / 45%);
  --color-a11y-frame: #ffffff;
  --color-badge-danger: #d1242f;
  --color-badge-success: #1a7f37;
  --color-badge-accent: #0969da;
  --color-hero-border: #d0d7de;
  --color-hero-end: #f6f8fa;
  --color-stat-bg: #f6f8fa;
  --color-stat-text: #32383f;
  --color-stat-strong: #0969da;
  --color-selected-border: #0969da;
  --color-selected-bg: #ddf4ff;
  --color-selected-kicker: #0969da;
  --color-selected-title: #1f2328;
  --color-switch: #afb8c1;
  --color-quest: #1f6feb;
  --color-quest-hover: #0969da;
  --color-quest-ink: #ffffff;
}

/* X light, from the public post layout: white page, near-black type,
   gray secondary text, and a black primary button. The link blue is
   darkened so small text still clears 4.5:1. */
html[data-palette='x'],
html[data-palette='x'] .theme-paper {
  color-scheme: light;

  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --color-bg: #ffffff;
  --color-bg-glow: rgb(29 155 240 / 8%);
  --color-surface: #ffffff;
  --color-surface-muted: #f7f9f9;
  --color-surface-sunken: #eff3f4;
  --color-surface-raised: #f7f9f9;
  --color-chip: #eff3f4;
  --color-header: #ffffff;
  --color-header-fg: #0f1419;
  --color-header-muted: #536471;
  --color-header-kicker: #536471;
  --color-nav-bg: rgb(255 255 255 / 96%);
  --color-text: #0f1419;
  --color-text-secondary: #0f1419;
  --color-text-muted: #536471;
  --color-text-faint: #536471;
  --color-text-faint-2: #536471;
  --color-contrast: #ffffff;
  --color-on-dark: #0f1419;
  --color-on-ink: #ffffff;
  --color-border: #eff3f4;
  --color-border-strong: #cfd9de;
  --color-border-faint: #eff3f4;
  --color-hero: #ffffff;
  --color-hero-end: #f7f9f9;
  --color-hero-border: #eff3f4;
  --color-accent: #0f1419;
  --color-accent-fill: #0f1419;
  --color-accent-hover: #272c30;
  --color-accent-press: #000000;
  --color-accent-contrast: #ffffff;
  --color-accent-soft: #e8f5fd;
  --color-accent-softer: #f5fbfe;
  --color-accent-wash: #f7f9f9;
  --color-accent-text: #0c5f9a;
  --color-accent-text-strong: #0a5589;
  --color-accent-border: #c5e6f8;
  --color-accent-border-strong: #1d9bf0;
  --color-accent-mid: #1d9bf0;
  --color-sky-solid: #1d9bf0;
  --color-ink: #0f1419;
  --color-ink-soft: #272c30;
  --color-heading: #0f1419;
  --color-info-soft: #e8f5fd;
  --color-info-border: #c5e6f8;
  --color-info-text: #0c5f9a;
  --color-info-text-strong: #0a5589;
  --color-info-wash: #f5fbfe;
  --color-success: #007a4d;
  --color-success-strong: #00663f;
  --color-success-text: #007a4d;
  --color-success-soft: #e6f8f1;
  --color-success-softer: #f3fbf8;
  --color-success-fill: #e6f8f1;
  --color-success-border: #8ed4b8;
  --color-success-border-2: #8ed4b8;
  --color-success-ink: #007a4d;
  --color-success-on-ink: #007a4d;
  --color-live: #007a4d;
  --color-danger: #c4101f;
  --color-danger-strong: #9e0d19;
  --color-danger-text: #c4101f;
  --color-danger-soft: #fde8ea;
  --color-danger-soft-2: #fde8ea;
  --color-danger-border: #f5a3aa;
  --color-danger-hot: #f8c5c9;
  --color-problem: #c4101f;
  --color-solution: #007a4d;
  --color-warning: #7a4e00;
  --color-warning-soft: #fff6d8;
  --color-warning-text: #7a4e00;
  --color-violet-soft: #f3e8ff;
  --color-violet-border: #d0b4f5;
  --color-violet-text: #6b3fa0;
  --color-measure: #6b3fa0;
  --color-orange-soft: #fff1e5;
  --color-orange-border: #f0b27a;
  --color-orange-text: #9a4d00;
  --color-highlight: #1d9bf0;
  --color-code-bg: #0f1419;
  --color-code-fg: #e7e9ea;
  --color-code-inline: #eff3f4;
  --color-overlay: rgb(15 20 25 / 40%);
  --color-shadow: rgb(15 20 25 / 12%);
  --color-menu-hover: #f7f9f9;
  --color-focus: #1d9bf0;
  --color-focus-ink: #ffffff;
  --color-focus-ring: rgb(29 155 240 / 45%);
  --color-a11y-frame: #ffffff;
  --color-badge-danger: #c4101f;
  --color-badge-success: #007a4d;
  --color-badge-accent: #0c5f9a;
  --color-stat-bg: #f7f9f9;
  --color-stat-text: #536471;
  --color-stat-strong: #0f1419;
  --color-selected-border: #0f1419;
  --color-selected-bg: #e8f5fd;
  --color-selected-kicker: #0c5f9a;
  --color-selected-title: #0f1419;
  --color-switch: #cfd9de;
  --color-quest: #0f1419;
  --color-quest-hover: #272c30;
  --color-quest-ink: #ffffff;
  --color-proof: #f7f9f9;
  --color-meter: #eff3f4;
}

/* X lights out: black page, off-white type, white primary button. */
html[data-palette='x-dark'],
html[data-palette='x-dark'] .theme-paper {
  color-scheme: dark;

  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --color-bg: #000000;
  --color-bg-glow: rgb(29 155 240 / 12%);
  --color-surface: #000000;
  --color-surface-muted: #16181c;
  --color-surface-sunken: #16181c;
  --color-surface-raised: #1d1f23;
  --color-chip: #1d1f23;
  --color-header: #000000;
  --color-header-fg: #e7e9ea;
  --color-header-muted: #8b98a5;
  --color-header-kicker: #8b98a5;
  --color-nav-bg: rgb(0 0 0 / 96%);
  --color-text: #e7e9ea;
  --color-text-secondary: #e7e9ea;
  --color-text-muted: #8b98a5;
  --color-text-faint: #8b98a5;
  --color-text-faint-2: #8b98a5;
  --color-contrast: #0f1419;
  --color-on-dark: #e7e9ea;
  --color-on-ink: #0f1419;
  --color-border: #2f3336;
  --color-border-strong: #536471;
  --color-border-faint: #2f3336;
  --color-hero: #000000;
  --color-hero-end: #000000;
  --color-hero-border: #2f3336;
  --color-accent: #eff3f4;
  --color-accent-fill: #eff3f4;
  --color-accent-hover: #d7dbdc;
  --color-accent-press: #ffffff;
  --color-accent-contrast: #0f1419;
  --color-accent-soft: #06283c;
  --color-accent-softer: #041824;
  --color-accent-wash: #16181c;
  --color-accent-text: #1d9bf0;
  --color-accent-text-strong: #8ecdf8;
  --color-accent-border: #0c4f78;
  --color-accent-border-strong: #1d9bf0;
  --color-accent-mid: #1d9bf0;
  --color-sky-solid: #1d9bf0;
  --color-ink: #eff3f4;
  --color-ink-soft: #d7dbdc;
  --color-heading: #e7e9ea;
  --color-info-soft: #06283c;
  --color-info-border: #0c4f78;
  --color-info-text: #1d9bf0;
  --color-info-text-strong: #8ecdf8;
  --color-info-wash: #041824;
  --color-success: #00ba7c;
  --color-success-strong: #7ee2b8;
  --color-success-text: #7ee2b8;
  --color-success-soft: #04281c;
  --color-success-softer: #031a12;
  --color-success-fill: #04281c;
  --color-success-border: #0d6b4a;
  --color-success-border-2: #0d6b4a;
  --color-success-ink: #7ee2b8;
  --color-success-on-ink: #7ee2b8;
  --color-live: #00ba7c;
  --color-danger: #f4212e;
  --color-danger-strong: #ff8a93;
  --color-danger-text: #ff8a93;
  --color-danger-soft: #3a0d12;
  --color-danger-soft-2: #3a0d12;
  --color-danger-border: #8a1c26;
  --color-danger-hot: #5c1219;
  --color-problem: #ff8a93;
  --color-solution: #7ee2b8;
  --color-warning: #ffd400;
  --color-warning-soft: #2a2200;
  --color-warning-text: #ffd400;
  --color-violet-soft: #241433;
  --color-violet-border: #6b3fa0;
  --color-violet-text: #d0b4f5;
  --color-measure: #d0b4f5;
  --color-orange-soft: #2a1608;
  --color-orange-border: #9a4d00;
  --color-orange-text: #ffb066;
  --color-highlight: #1d9bf0;
  --color-code-bg: #16181c;
  --color-code-fg: #e7e9ea;
  --color-code-inline: #1d1f23;
  --color-overlay: rgb(0 0 0 / 70%);
  --color-shadow: rgb(0 0 0 / 55%);
  --color-menu-hover: #16181c;
  --color-focus: #1d9bf0;
  --color-focus-ink: #000000;
  --color-focus-ring: rgb(29 155 240 / 55%);
  --color-a11y-frame: #000000;
  --color-badge-danger: #ff8a93;
  --color-badge-success: #7ee2b8;
  --color-badge-accent: #1d9bf0;
  --color-stat-bg: #16181c;
  --color-stat-text: #8b98a5;
  --color-stat-strong: #e7e9ea;
  --color-selected-border: #e7e9ea;
  --color-selected-bg: #06283c;
  --color-selected-kicker: #1d9bf0;
  --color-selected-title: #e7e9ea;
  --color-switch: #536471;
  --color-quest: #eff3f4;
  --color-quest-hover: #d7dbdc;
  --color-quest-ink: #0f1419;
  --color-proof: #16181c;
  --color-meter: #2f3336;
}

html[data-palette='x'] :is(.site, .theme-paper) :is(h1, h2, h3, h4),
html[data-palette='x-dark'] :is(.site, .theme-paper) :is(h1, h2, h3, h4) {
  font-family: var(--font-display);
}

/* ---------- Reading themes ----------
   Tuned for long sessions, after Kindle and Medium: no pure white or pure
   black, warm low-glare pages, body text 10-13:1 (strong but not harsh),
   and the system UI font instead of Verdana. */

/* Reader paper: Medium / Kindle white on a screen. Warm off-white page
   instead of pure white to cut glare, soft charcoal ink, calm ink-blue links. */
html[data-palette='reader-paper'],
html[data-palette='reader-paper'] .theme-paper {
  color-scheme: light;

  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --color-bg: #f9f8f5;
  --color-bg-glow: rgb(43 90 158 / 8%);
  --color-surface: #fffefb;
  --color-surface-muted: #f3f1ec;
  --color-surface-sunken: #ecE9e2;
  --color-surface-raised: #fffefb;
  --color-chip: #ecE9e2;
  --color-header: #f9f8f5;
  --color-header-fg: #242424;
  --color-header-muted: #666462;
  --color-header-kicker: #2b5a9e;
  --color-nav-bg: rgb(249 248 245 / 96%);
  --color-text: #242424;
  --color-text-secondary: #3b3b3b;
  --color-text-muted: #666462;
  --color-text-faint: #666462;
  --color-text-faint-2: #666462;
  --color-contrast: #ffffff;
  --color-on-dark: #fffefb;
  --color-on-ink: #ffffff;
  --color-border: #e4e0d8;
  --color-border-strong: #c9c4ba;
  --color-border-faint: #eceae4;
  --color-hero: #f3f1ec;
  --color-hero-end: #f9f8f5;
  --color-hero-border: #e4e0d8;
  --color-accent: #2b5a9e;
  --color-accent-fill: #2b5a9e;
  --color-accent-hover: #214a85;
  --color-accent-press: #1a3c6d;
  --color-accent-contrast: #ffffff;
  --color-accent-soft: #e2e7eb;
  --color-accent-softer: #edeff0;
  --color-accent-wash: #f3f1ec;
  --color-accent-text: #2b5a9e;
  --color-accent-text-strong: #214a85;
  --color-accent-border: #abbcd4;
  --color-accent-border-strong: #2b5a9e;
  --color-accent-mid: #214a85;
  --color-sky-solid: #2b5a9e;
  --color-ink: #242424;
  --color-ink-soft: #3b3b3b;
  --color-heading: #191919;
  --color-info-soft: #e2e7eb;
  --color-info-border: #abbcd4;
  --color-info-text: #254c86;
  --color-info-text-strong: #2b5a9e;
  --color-info-wash: #edeff0;
  --color-success: #2d6a3e;
  --color-success-strong: #265a35;
  --color-success-text: #2d6a3e;
  --color-success-soft: #e3e8e1;
  --color-success-border: #abc2af;
  --color-danger: #a3352c;
  --color-danger-strong: #8b2d25;
  --color-danger-text: #a3352c;
  --color-danger-soft: #f0e3df;
  --color-danger-border: #d8aea9;
  --color-success-softer: #edefea;
  --color-success-fill: #e3e8e1;
  --color-success-border-2: #abc2af;
  --color-success-ink: #2d6a3e;
  --color-success-on-ink: #2d6a3e;
  --color-live: #2d6a3e;
  --color-danger-soft-2: #f0e3df;
  --color-danger-hot: #dfbeb9;
  --color-problem: #a3352c;
  --color-solution: #2d6a3e;
  --color-warning: #7c5a0e;
  --color-warning-soft: #e6e0d2;
  --color-warning-text: #7c5a0e;
  --color-violet-soft: #e8e4ea;
  --color-violet-border: #beb2ce;
  --color-violet-text: #5e3f8f;
  --color-measure: #5e3f8f;
  --color-orange-soft: #ede5dc;
  --color-orange-border: #d1b69f;
  --color-orange-text: #8f4a12;
  --color-highlight: #2b5a9e;
  --color-code-bg: #f3f1ec;
  --color-code-fg: #242424;
  --color-code-inline: #ecE9e2;
  --color-overlay: rgb(36 36 36 / 38%);
  --color-shadow: rgb(36 36 36 / 10%);
  --color-menu-hover: #e7eaed;
  --color-focus: #2b5a9e;
  --color-focus-ink: #ffffff;
  --color-focus-ring: rgb(43 90 158 / 45%);
  --color-a11y-frame: #fffefb;
  --color-badge-danger: #a3352c;
  --color-badge-success: #2d6a3e;
  --color-badge-accent: #2b5a9e;
  --color-stat-bg: #f3f1ec;
  --color-stat-text: #3b3b3b;
  --color-stat-strong: #2b5a9e;
  --color-selected-border: #2b5a9e;
  --color-selected-bg: #e2e7eb;
  --color-selected-kicker: #2b5a9e;
  --color-selected-title: #191919;
  --color-switch: #c9c4ba;
  --color-quest: #2b5a9e;
  --color-quest-hover: #214a85;
  --color-quest-ink: #ffffff;
  --color-proof: #e3e8e1;
  --color-meter: #e4e0d8;
  --color-lab-ink: #242424;
  --color-lab-fg: #fffefb;
  --color-motion-shadow: rgb(43 90 158 / 30%);
}

/* Reader sepia: the Kindle sepia page. Cream paper, brown ink. Lowest
   blue light of the light themes, good for long evening sessions. */
html[data-palette='reader-sepia'],
html[data-palette='reader-sepia'] .theme-paper {
  color-scheme: light;

  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --color-bg: #f6eedc;
  --color-bg-glow: rgb(138 74 31 / 8%);
  --color-surface: #fbf4e4;
  --color-surface-muted: #f0e6d0;
  --color-surface-sunken: #e9dec5;
  --color-surface-raised: #fbf4e4;
  --color-chip: #e9dec5;
  --color-header: #f6eedc;
  --color-header-fg: #3d3020;
  --color-header-muted: #6e5d48;
  --color-header-kicker: #8a4a1f;
  --color-nav-bg: rgb(246 238 220 / 96%);
  --color-text: #3d3020;
  --color-text-secondary: #4f4030;
  --color-text-muted: #6e5d48;
  --color-text-faint: #6e5d48;
  --color-text-faint-2: #6e5d48;
  --color-contrast: #fbf4e4;
  --color-on-dark: #fbf4e4;
  --color-on-ink: #fbf4e4;
  --color-border: #e2d5b9;
  --color-border-strong: #cbb995;
  --color-border-faint: #eadfc7;
  --color-hero: #f0e6d0;
  --color-hero-end: #f6eedc;
  --color-hero-border: #e2d5b9;
  --color-accent: #8a4a1f;
  --color-accent-fill: #8a4a1f;
  --color-accent-hover: #713c18;
  --color-accent-press: #5c3013;
  --color-accent-contrast: #fbf4e4;
  --color-accent-soft: #eadcc7;
  --color-accent-softer: #f0e4d1;
  --color-accent-wash: #f0e6d0;
  --color-accent-text: #8a4a1f;
  --color-accent-text-strong: #713c18;
  --color-accent-border: #cdb094;
  --color-accent-border-strong: #8a4a1f;
  --color-accent-mid: #713c18;
  --color-sky-solid: #8a4a1f;
  --color-ink: #3d3020;
  --color-ink-soft: #4f4030;
  --color-heading: #2f2416;
  --color-info-soft: #eadcc7;
  --color-info-border: #cdb094;
  --color-info-text: #753f1a;
  --color-info-text-strong: #8a4a1f;
  --color-info-wash: #f0e4d1;
  --color-success: #4b6a2a;
  --color-success-strong: #405a24;
  --color-success-text: #4b6a2a;
  --color-success-soft: #e3dfc8;
  --color-success-border: #b5bc98;
  --color-danger: #a03a26;
  --color-danger-strong: #883120;
  --color-danger-text: #a03a26;
  --color-danger-soft: #eddac8;
  --color-danger-border: #d5aa97;
  --color-success-softer: #ece6d1;
  --color-success-fill: #e3dfc8;
  --color-success-border-2: #b5bc98;
  --color-success-ink: #4b6a2a;
  --color-success-on-ink: #4b6a2a;
  --color-live: #4b6a2a;
  --color-danger-soft-2: #eddac8;
  --color-danger-hot: #dcb8a5;
  --color-problem: #a03a26;
  --color-solution: #4b6a2a;
  --color-warning: #7a5a10;
  --color-warning-soft: #e3d8bd;
  --color-warning-text: #7a5a10;
  --color-violet-soft: #e7dbd1;
  --color-violet-border: #c2adb6;
  --color-violet-text: #6c4277;
  --color-measure: #6c4277;
  --color-orange-soft: #ebddc7;
  --color-orange-border: #d1b292;
  --color-orange-text: #94501a;
  --color-highlight: #8a4a1f;
  --color-code-bg: #f0e6d0;
  --color-code-fg: #3d3020;
  --color-code-inline: #e9dec5;
  --color-overlay: rgb(61 48 32 / 38%);
  --color-shadow: rgb(61 48 32 / 10%);
  --color-menu-hover: #ece0cb;
  --color-focus: #8a4a1f;
  --color-focus-ink: #fbf4e4;
  --color-focus-ring: rgb(138 74 31 / 45%);
  --color-a11y-frame: #fbf4e4;
  --color-badge-danger: #a03a26;
  --color-badge-success: #4b6a2a;
  --color-badge-accent: #8a4a1f;
  --color-stat-bg: #f0e6d0;
  --color-stat-text: #4f4030;
  --color-stat-strong: #8a4a1f;
  --color-selected-border: #8a4a1f;
  --color-selected-bg: #eadcc7;
  --color-selected-kicker: #8a4a1f;
  --color-selected-title: #2f2416;
  --color-switch: #cbb995;
  --color-quest: #8a4a1f;
  --color-quest-hover: #713c18;
  --color-quest-ink: #fbf4e4;
  --color-proof: #e3dfc8;
  --color-meter: #e2d5b9;
  --color-lab-ink: #3d3020;
  --color-lab-fg: #fbf4e4;
  --color-motion-shadow: rgb(138 74 31 / 30%);
}

/* Reader sage: the Kindle green page, desaturated so it rests the eye
   without tinting everything mint. */
html[data-palette='reader-sage'],
html[data-palette='reader-sage'] .theme-paper {
  color-scheme: light;

  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --color-bg: #e9efe4;
  --color-bg-glow: rgb(47 100 71 / 8%);
  --color-surface: #f1f5ec;
  --color-surface-muted: #e2e9dc;
  --color-surface-sunken: #d9e2d2;
  --color-surface-raised: #f1f5ec;
  --color-chip: #d9e2d2;
  --color-header: #e9efe4;
  --color-header-fg: #25302a;
  --color-header-muted: #55635a;
  --color-header-kicker: #2f6447;
  --color-nav-bg: rgb(233 239 228 / 96%);
  --color-text: #25302a;
  --color-text-secondary: #36423a;
  --color-text-muted: #55635a;
  --color-text-faint: #55635a;
  --color-text-faint-2: #55635a;
  --color-contrast: #f1f5ec;
  --color-on-dark: #f1f5ec;
  --color-on-ink: #f1f5ec;
  --color-border: #cfd9c8;
  --color-border-strong: #b1bfa9;
  --color-border-faint: #d9e2d3;
  --color-hero: #e2e9dc;
  --color-hero-end: #e9efe4;
  --color-hero-border: #cfd9c8;
  --color-accent: #2f6447;
  --color-accent-fill: #2f6447;
  --color-accent-hover: #25523a;
  --color-accent-press: #1d422f;
  --color-accent-contrast: #f1f5ec;
  --color-accent-soft: #d5e0d3;
  --color-accent-softer: #dee7db;
  --color-accent-wash: #e2e9dc;
  --color-accent-text: #2f6447;
  --color-accent-text-strong: #25523a;
  --color-accent-border: #a2baa8;
  --color-accent-border-strong: #2f6447;
  --color-accent-mid: #25523a;
  --color-sky-solid: #2f6447;
  --color-ink: #25302a;
  --color-ink-soft: #36423a;
  --color-heading: #1b241f;
  --color-info-soft: #d5e0d3;
  --color-info-border: #a2baa8;
  --color-info-text: #28553c;
  --color-info-text-strong: #2f6447;
  --color-info-wash: #dee7db;
  --color-success: #2f6447;
  --color-success-strong: #28553c;
  --color-success-text: #2f6447;
  --color-success-soft: #d5e0d3;
  --color-success-border: #a2baa8;
  --color-danger: #9b3a2e;
  --color-danger-strong: #843127;
  --color-danger-text: #9b3a2e;
  --color-danger-soft: #e0dbd0;
  --color-danger-border: #cbaa9f;
  --color-success-softer: #dee7db;
  --color-success-fill: #d5e0d3;
  --color-success-border-2: #a2baa8;
  --color-success-ink: #2f6447;
  --color-success-on-ink: #2f6447;
  --color-live: #2f6447;
  --color-danger-soft-2: #e0dbd0;
  --color-danger-hot: #d2b9ad;
  --color-problem: #9b3a2e;
  --color-solution: #2f6447;
  --color-warning: #73570f;
  --color-warning-soft: #d7d8c4;
  --color-warning-text: #73570f;
  --color-violet-soft: #d9dcda;
  --color-violet-border: #b3aec0;
  --color-violet-text: #5b4585;
  --color-measure: #5b4585;
  --color-orange-soft: #dfddcd;
  --color-orange-border: #c5b196;
  --color-orange-text: #8a4c16;
  --color-highlight: #2f6447;
  --color-code-bg: #e2e9dc;
  --color-code-fg: #25302a;
  --color-code-inline: #d9e2d2;
  --color-overlay: rgb(37 48 42 / 38%);
  --color-shadow: rgb(37 48 42 / 10%);
  --color-menu-hover: #d9e3d6;
  --color-focus: #2f6447;
  --color-focus-ink: #f1f5ec;
  --color-focus-ring: rgb(47 100 71 / 45%);
  --color-a11y-frame: #f1f5ec;
  --color-badge-danger: #9b3a2e;
  --color-badge-success: #2f6447;
  --color-badge-accent: #2f6447;
  --color-stat-bg: #e2e9dc;
  --color-stat-text: #36423a;
  --color-stat-strong: #2f6447;
  --color-selected-border: #2f6447;
  --color-selected-bg: #d5e0d3;
  --color-selected-kicker: #2f6447;
  --color-selected-title: #1b241f;
  --color-switch: #b1bfa9;
  --color-quest: #2f6447;
  --color-quest-hover: #25523a;
  --color-quest-ink: #f1f5ec;
  --color-proof: #d5e0d3;
  --color-meter: #cfd9c8;
  --color-lab-ink: #25302a;
  --color-lab-fg: #f1f5ec;
  --color-motion-shadow: rgb(47 100 71 / 30%);
}

/* Reader dusk: Kindle dark sepia. Warm brown-black page and parchment
   text, so night reading never feels like staring at a lamp. */
html[data-palette='reader-dusk'],
html[data-palette='reader-dusk'] .theme-paper {
  color-scheme: dark;

  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --color-bg: #1f1b16;
  --color-bg-glow: rgb(224 180 122 / 8%);
  --color-surface: #27221c;
  --color-surface-muted: #2d2720;
  --color-surface-sunken: #171410;
  --color-surface-raised: #2d2720;
  --color-chip: #2d2720;
  --color-header: #1f1b16;
  --color-header-fg: #e3d8c3;
  --color-header-muted: #a89c87;
  --color-header-kicker: #e0b47a;
  --color-nav-bg: rgb(31 27 22 / 96%);
  --color-text: #e3d8c3;
  --color-text-secondary: #d4c8b1;
  --color-text-muted: #a89c87;
  --color-text-faint: #a89c87;
  --color-text-faint-2: #a89c87;
  --color-contrast: #1f1b16;
  --color-on-dark: #e3d8c3;
  --color-on-ink: #1f1b16;
  --color-border: #3a332a;
  --color-border-strong: #544a3d;
  --color-border-faint: #2f2922;
  --color-hero: #2d2720;
  --color-hero-end: #1f1b16;
  --color-hero-border: #3a332a;
  --color-accent: #e0b47a;
  --color-accent-fill: #e0b47a;
  --color-accent-hover: #ecc797;
  --color-accent-press: #d19f5e;
  --color-accent-contrast: #1f1b16;
  --color-accent-soft: #463a2a;
  --color-accent-softer: #362d22;
  --color-accent-wash: #2d2720;
  --color-accent-text: #e0b47a;
  --color-accent-text-strong: #ecc797;
  --color-accent-border: #766043;
  --color-accent-border-strong: #e0b47a;
  --color-accent-mid: #ecc797;
  --color-sky-solid: #e0b47a;
  --color-ink: #e3d8c3;
  --color-ink-soft: #d4c8b1;
  --color-heading: #efe5d1;
  --color-info-soft: #463a2a;
  --color-info-border: #766043;
  --color-info-text: #e9c99f;
  --color-info-text-strong: #e0b47a;
  --color-info-wash: #362d22;
  --color-success: #a9c98a;
  --color-success-strong: #c1d8ab;
  --color-success-text: #a9c98a;
  --color-success-soft: #3b3e2d;
  --color-success-border: #5d694a;
  --color-danger: #f0a08c;
  --color-danger-strong: #f4bbac;
  --color-danger-text: #f0a08c;
  --color-danger-soft: #49362e;
  --color-danger-border: #7d574b;
  --color-success-softer: #303024;
  --color-success-fill: #3b3e2d;
  --color-success-border-2: #5d694a;
  --color-success-ink: #a9c98a;
  --color-success-on-ink: #a9c98a;
  --color-live: #a9c98a;
  --color-danger-soft-2: #49362e;
  --color-danger-hot: #5e4339;
  --color-problem: #f0a08c;
  --color-solution: #a9c98a;
  --color-warning: #e8c46a;
  --color-warning-soft: #4f442a;
  --color-warning-text: #e8c46a;
  --color-violet-soft: #42393e;
  --color-violet-border: #6d5f71;
  --color-violet-text: #cdb3e0;
  --color-measure: #cdb3e0;
  --color-orange-soft: #49382a;
  --color-orange-border: #7d5d42;
  --color-orange-text: #f0ae78;
  --color-highlight: #e0b47a;
  --color-code-bg: #171410;
  --color-code-fg: #e3d8c3;
  --color-code-inline: #2d2720;
  --color-overlay: rgb(0 0 0 / 62%);
  --color-shadow: rgb(0 0 0 / 45%);
  --color-menu-hover: #3e3326;
  --color-focus: #e0b47a;
  --color-focus-ink: #1f1b16;
  --color-focus-ring: rgb(224 180 122 / 45%);
  --color-a11y-frame: #27221c;
  --color-badge-danger: #f0a08c;
  --color-badge-success: #a9c98a;
  --color-badge-accent: #e0b47a;
  --color-stat-bg: #2d2720;
  --color-stat-text: #d4c8b1;
  --color-stat-strong: #e0b47a;
  --color-selected-border: #e0b47a;
  --color-selected-bg: #463a2a;
  --color-selected-kicker: #e0b47a;
  --color-selected-title: #efe5d1;
  --color-switch: #544a3d;
  --color-quest: #e0b47a;
  --color-quest-hover: #ecc797;
  --color-quest-ink: #1f1b16;
  --color-proof: #3b3e2d;
  --color-meter: #3a332a;
  --color-lab-ink: #e3d8c3;
  --color-lab-fg: #27221c;
  --color-motion-shadow: rgb(224 180 122 / 30%);
}

/* Reader night: Medium / Kindle dark. Soft charcoal, not pure black, and
   off-white text (not #fff) so letters do not halo or bloom. */
html[data-palette='reader-night'],
html[data-palette='reader-night'] .theme-paper {
  color-scheme: dark;

  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --color-bg: #191a1c;
  --color-bg-glow: rgb(143 180 227 / 8%);
  --color-surface: #202124;
  --color-surface-muted: #25272a;
  --color-surface-sunken: #141517;
  --color-surface-raised: #25272a;
  --color-chip: #25272a;
  --color-header: #191a1c;
  --color-header-fg: #d9d7d2;
  --color-header-muted: #9a9893;
  --color-header-kicker: #8fb4e3;
  --color-nav-bg: rgb(25 26 28 / 96%);
  --color-text: #d9d7d2;
  --color-text-secondary: #c7c5bf;
  --color-text-muted: #9a9893;
  --color-text-faint: #9a9893;
  --color-text-faint-2: #9a9893;
  --color-contrast: #141517;
  --color-on-dark: #d9d7d2;
  --color-on-ink: #141517;
  --color-border: #2f3134;
  --color-border-strong: #46494d;
  --color-border-faint: #26282a;
  --color-hero: #25272a;
  --color-hero-end: #191a1c;
  --color-hero-border: #2f3134;
  --color-accent: #8fb4e3;
  --color-accent-fill: #8fb4e3;
  --color-accent-hover: #a9c6eb;
  --color-accent-press: #7aa3d8;
  --color-accent-contrast: #141517;
  --color-accent-soft: #313944;
  --color-accent-softer: #272c34;
  --color-accent-wash: #25272a;
  --color-accent-text: #8fb4e3;
  --color-accent-text-strong: #a9c6eb;
  --color-accent-border: #4e5f76;
  --color-accent-border-strong: #8fb4e3;
  --color-accent-mid: #a9c6eb;
  --color-sky-solid: #8fb4e3;
  --color-ink: #d9d7d2;
  --color-ink-soft: #c7c5bf;
  --color-heading: #ebe9e4;
  --color-info-soft: #313944;
  --color-info-border: #4e5f76;
  --color-info-text: #aec9eb;
  --color-info-text-strong: #8fb4e3;
  --color-info-wash: #272c34;
  --color-success: #93c9a0;
  --color-success-strong: #b1d8bb;
  --color-success-text: #93c9a0;
  --color-success-soft: #313d36;
  --color-success-border: #506957;
  --color-danger: #ee9a90;
  --color-danger-strong: #f3b6af;
  --color-danger-text: #ee9a90;
  --color-danger-soft: #443433;
  --color-danger-border: #795450;
  --color-success-softer: #282f2c;
  --color-success-fill: #313d36;
  --color-success-border-2: #506957;
  --color-success-ink: #93c9a0;
  --color-success-on-ink: #93c9a0;
  --color-live: #93c9a0;
  --color-danger-soft-2: #443433;
  --color-danger-hot: #59403f;
  --color-problem: #ee9a90;
  --color-solution: #93c9a0;
  --color-warning: #e2c26e;
  --color-warning-soft: #494230;
  --color-warning-text: #e2c26e;
  --color-violet-soft: #3b3844;
  --color-violet-border: #665e77;
  --color-violet-text: #c3b2e6;
  --color-measure: #c3b2e6;
  --color-orange-soft: #43362e;
  --color-orange-border: #785a45;
  --color-orange-text: #eba878;
  --color-highlight: #8fb4e3;
  --color-code-bg: #141517;
  --color-code-fg: #d9d7d2;
  --color-code-inline: #25272a;
  --color-overlay: rgb(0 0 0 / 62%);
  --color-shadow: rgb(0 0 0 / 45%);
  --color-menu-hover: #2c333c;
  --color-focus: #8fb4e3;
  --color-focus-ink: #141517;
  --color-focus-ring: rgb(143 180 227 / 45%);
  --color-a11y-frame: #202124;
  --color-badge-danger: #ee9a90;
  --color-badge-success: #93c9a0;
  --color-badge-accent: #8fb4e3;
  --color-stat-bg: #25272a;
  --color-stat-text: #c7c5bf;
  --color-stat-strong: #8fb4e3;
  --color-selected-border: #8fb4e3;
  --color-selected-bg: #313944;
  --color-selected-kicker: #8fb4e3;
  --color-selected-title: #ebe9e4;
  --color-switch: #46494d;
  --color-quest: #8fb4e3;
  --color-quest-hover: #a9c6eb;
  --color-quest-ink: #141517;
  --color-proof: #313d36;
  --color-meter: #2f3134;
  --color-lab-ink: #d9d7d2;
  --color-lab-fg: #202124;
  --color-motion-shadow: rgb(143 180 227 / 30%);
}