alix 0.7.0 - Docs.rs

/* alix web themes — the palette, as switchable CSS variables.
 *
 * Applied via a `data-theme` attribute on <html> (set by theme.js from
 * localStorage). The default (no attribute, or `dark`) is the original
 * "electric terminal" look, so existing users see no change. Each page keeps
 * its own layout CSS and its per-screen `--card-w`/`--card-h`; only the colour
 * palette + fonts live here, so all three screens theme together.
 *
 * Every themeable value is a variable. The five colours that used to be
 * hardcoded in the pages — the body halo, the menu background, the note trio,
 * and the trace excerpt background — are variables now too (--halo, --menu-bg,
 * --note-*, --excerpt-bg). */

/* ── IBM Plex — self-hosted webfonts (served from `/fonts/`, see src/serve.rs)
 * so the app works fully offline. Latin + Latin-Ext subset for now (see
 * web/shared/fonts/OFL.txt); Cyrillic/Greek can drop in later as extra
 * @font-face rules + files. One rule per weight per family. ────────────── */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+1E00-1EFF, U+2000-206F, U+2020, U+2074, U+20A0-20AB, U+20AC, U+20AD-20CF, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+1E00-1EFF, U+2000-206F, U+2020, U+2074, U+20A0-20AB, U+20AC, U+20AD-20CF, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+1E00-1EFF, U+2000-206F, U+2020, U+2074, U+20A0-20AB, U+20AC, U+20AD-20CF, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+1E00-1EFF, U+2000-206F, U+2020, U+2074, U+20A0-20AB, U+20AC, U+20AD-20CF, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+1E00-1EFF, U+2000-206F, U+2020, U+2074, U+20A0-20AB, U+20AC, U+20AD-20CF, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+1E00-1EFF, U+2000-206F, U+2020, U+2074, U+20A0-20AB, U+20AC, U+20AD-20CF, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+1E00-1EFF, U+2000-206F, U+2020, U+2074, U+20A0-20AB, U+20AC, U+20AD-20CF, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+1E00-1EFF, U+2000-206F, U+2020, U+2074, U+20A0-20AB, U+20AC, U+20AD-20CF, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}

/* ── Base tokens: shape, motion, and the Alix Adult token vocabulary ───
 * Radii/motion are shared across every theme. The brand mark + its
 * primary-action fill are fixed across every theme too (brand identity
 * doesn't reskin with the palette). Tokens with the same default visual role
 * share a value here; theme blocks override them when their roles diverge. */
:root {
  --radius-btn: 10px;
  --radius-chip-sm: 6px;
  --radius-chip-lg: 12px;
  --radius-row: 12px;

  --transition-fast: 0.12s ease;
  --transition-med: 0.17s ease;

  --brand: #f0883c;
  --brand-ink: #1a1206;

  --bg: var(--void);
  --text: var(--ink);
  --faint: var(--dim);
  --accent-ink: var(--void);
  --brand-text: var(--bolt);

  /* retired heatmap cells: deliberately purple, apart from every theme's
     good/warn/again trio and accent; a mid value that reads on dark and
     light grounds (themes may override). */
  --retired: #9a7bd0;
}
@media (prefers-reduced-motion: reduce) {
  :root { --transition-fast: 0s; --transition-med: 0s; }
}

/* tiny bordered-mono key-hint chip (space / esc / j / k / l / ?) */
.key-hint {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip-sm);
  padding: 2px 7px;
}

/* ── alix — the default (Alix Adult palette) ────────────────────────── */
:root,
[data-theme="dark"] {
  --void: #0f1016;
  --panel-top: #171a24;
  --panel-bot: #0f1016;
  --ink: #eef0f5;
  --dim: #9096a8;
  --line: rgba(255, 255, 255, .09);
  --bolt: #5fd7e0;
  --bolt-hi: #8ce9ef;
  --good: #86c986;
  --warn: #e6b45c;
  --again: #e88f8f;
  --halo: #0f1016;
  --menu-bg: #171a24;
  --note-border: #e6b45c;
  --note-ink: #f0dcae;
  --note-code: #c9cdd8;
  --code: #78b9d6;
  /* note wash + border — derived from --note-border so every theme adapts */
  --note-bg: color-mix(in srgb, var(--note-border) 12%, transparent);
  --note-line: color-mix(in srgb, var(--note-border) 24%, transparent);
  --excerpt-bg: #171a24;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --text: #c9cdd8;
  --faint: #6b7085;
  --accent-ink: #08131a;
  --brand-text: #f5a35f;
}

/* ── alix Light — paper & ink, Alix Adult palette ────────────────────── */
[data-theme="light"] {
  --void: #f4f4fa;
  --panel-top: #ffffff;
  --panel-bot: #f4f4fa;
  --ink: #17171f;
  --dim: #6b6b7a;
  --line: rgba(20, 18, 40, .13);
  --bolt: #0e7c86;
  --bolt-hi: #129aa6;
  --good: #138a5b;
  --warn: #b9790c;
  --again: #d23b34;
  --halo: #f4f4fa;
  --menu-bg: #ffffff;
  --note-border: #c98a12;
  --note-ink: #6a5117;
  --note-code: #2b3a40;
  --code: #176b8a;
  --excerpt-bg: #ffffff;
  --text: #3b3b48;
  --faint: #9696a5;
  --accent-ink: #ffffff;
  --brand-text: #c2410c;
}

/* ── Sunrise / Ocean / Berry — the kids app's own three themes, carried into
 * the adult gallery so a kid moving up keeps the look they grew attached to.
 * Grounded in the kids app's `THEMES` tuple (web/alix-kids/kids.html) —
 * bgTop/bgBot become --void/--panel-bot, the kid accent/shade become
 * --bolt-hi/--bolt — but re-derived, not transcribed: the kids app only ever
 * puts its accent on big buttons or large headings, while the adult UI uses
 * --bolt as small-caps label text ~30 places over, so the raw kid accents
 * (contrast ~2.2–2.9 on white) are darkened here to clear AA text contrast;
 * --bolt-hi keeps closer to the original brighter hue for hover/decorative
 * use only. --good/--warn/--again are an independent green/amber/red set
 * (kept apart from each theme's own accent hue) tuned to ~4.3–5.5 against
 * both the flat ground and the panel-bot gradient stop. No --sans override —
 * these keep the adult app's own IBM Plex, unlike Kid's rounded font. */
[data-theme="sunrise"] {
  --void: #fff5ec;
  --panel-top: #ffffff;
  --panel-bot: #ffe7d4;
  --ink: #3f2612;
  --dim: #8a5527;
  --line: #ffd9b8;
  --bolt: #a84400;
  --bolt-hi: #f05f00;
  --good: #177b47;
  --warn: #90630d;
  --again: #ce2a1f;
  --halo: #fff5ec;
  --menu-bg: #ffffff;
  --note-border: #90630d;
  --note-ink: #613b1b;
  --note-code: #3f2612;
  --code: #426f9f;
  --excerpt-bg: #ffe7d4;
  --text: #613b1b;
  --faint: #a1632d;
  --accent-ink: #ffffff;
  --brand-text: #c2410c;
}

[data-theme="ocean"] {
  --void: #eafaf7;
  --panel-top: #ffffff;
  --panel-bot: #cdeeff;
  --ink: #11312d;
  --dim: #256c65;
  --line: #b7e6ef;
  --bolt: #0a6f77;
  --bolt-hi: #0e9ca8;
  --good: #0f7a55;
  --warn: #90630d;
  --again: #c83427;
  --halo: #eafaf7;
  --menu-bg: #ffffff;
  --note-border: #90630d;
  --note-ink: #1a4c46;
  --note-code: #11312d;
  --code: #147482;
  --excerpt-bg: #cdeeff;
  --text: #1a4c46;
  --faint: #2b7d74;
  --accent-ink: #ffffff;
  --brand-text: #c2410c;
}

[data-theme="berry"] {
  --void: #fdeefb;
  --panel-top: #ffffff;
  --panel-bot: #f1dbff;
  --ink: #3a1f3e;
  --dim: #85478f;
  --line: #e9c8f5;
  --bolt: #a02fae;
  --bolt-hi: #c04bd0;
  --good: #167846;
  --warn: #945d0c;
  --again: #c52956;
  --halo: #fdeefb;
  --menu-bg: #ffffff;
  --note-border: #945d0c;
  --note-ink: #5c3163;
  --note-code: #3a1f3e;
  --code: #6f62ad;
  --excerpt-bg: #f1dbff;
  --text: #5c3163;
  --faint: #94579e;
  --accent-ink: #ffffff;
  --brand-text: #c2410c;
}

/* ─────────────────────────────────────────────────────────────────────
 * Library: beloved editor/terminal palettes, replicated by name (MIT-
 * equivalent, credited). Each maps its background / surface / foreground /
 * muted / border / accent / green / yellow / red to our vars.
 * ───────────────────────────────────────────────────────────────────── */

/* ── GitHub Dark ── */
[data-theme="github-dark"] {
  --void: #0d1117; --panel-top: #161b22; --panel-bot: #161b22;
  --ink: #e6edf3; --dim: #7d8590; --line: #30363d;
  --bolt: #2f81f7; --bolt-hi: #2f81f7;
  --good: #3fb950; --warn: #d29922; --again: #f85149;
  --halo: #161b22; --menu-bg: #161b22;
  --note-border: #d29922; --note-ink: #e6edf3; --note-code: #e6edf3;
  --code: #58a6ff;
  --excerpt-bg: #161b22;
}

/* ── GitHub Light — aligned to the Alix Adult palette ── */
[data-theme="github-light"] {
  --void: #ffffff; --panel-top: #f6f8fa; --panel-bot: #ffffff;
  --ink: #1f2328; --dim: #656d76; --line: rgba(20, 20, 30, .12);
  --bolt: #0969da; --bolt-hi: #0969da;
  --good: #1a7f37; --warn: #9a6700; --again: #d1242f;
  --halo: #ffffff; --menu-bg: #f6f8fa;
  --note-border: #9a6700; --note-ink: #1f2328; --note-code: #1f2328;
  --code: #0969da;
  --excerpt-bg: #f6f8fa;
  --text: #3d444d; --faint: #8c959f; --accent-ink: #ffffff; --brand-text: #c2410c;
}

/* ── One Dark — aligned to the Alix Adult palette ── */
[data-theme="one-dark"] {
  --void: #282c34; --panel-top: #31363f; --panel-bot: #282c34;
  --ink: #dcdfe4; --dim: #9aa0ab; --line: rgba(255, 255, 255, .10);
  --bolt: #61afef; --bolt-hi: #61afef;
  --good: #98c379; --warn: #e5c07b; --again: #e06c75;
  --halo: #282c34; --menu-bg: #31363f;
  --note-border: #e5c07b; --note-ink: #dcdfe4; --note-code: #dcdfe4;
  --code: #61afef;
  --excerpt-bg: #31363f;
  --text: #c8ccd4; --faint: #6b727d; --accent-ink: #081a2a; --brand-text: #f5a35f;
}

/* ── Dracula — aligned to the Alix Adult palette ── */
[data-theme="dracula"] {
  --void: #282a36; --panel-top: #343746; --panel-bot: #282a36;
  --ink: #f8f8f2; --dim: #9a9ab5; --line: rgba(255, 255, 255, .10);
  --bolt: #bd93f9; --bolt-hi: #bd93f9;
  --good: #50fa7b; --warn: #f1fa8c; --again: #ff5555;
  --halo: #282a36; --menu-bg: #343746;
  --note-border: #f1fa8c; --note-ink: #f8f8f2; --note-code: #f8f8f2;
  --code: #8be9fd;
  --excerpt-bg: #343746;
  --text: #d4d4e0; --faint: #6d6d8a; --accent-ink: #1c142b; --brand-text: #f5a35f;
}

/* ── Monokai ── */
[data-theme="monokai"] {
  --void: #272822; --panel-top: #1e1f1c; --panel-bot: #1e1f1c;
  --ink: #f8f8f2; --dim: #88846f; --line: #1e1f1c;
  --bolt: #f92672; --bolt-hi: #f92672;
  --good: #a6e22e; --warn: #e6db74; --again: #f92672;
  --halo: #1e1f1c; --menu-bg: #1e1f1c;
  --note-border: #e6db74; --note-ink: #f8f8f2; --note-code: #f8f8f2;
  --code: #66d9ef;
  --excerpt-bg: #1e1f1c;
}

/* ── Catppuccin Mocha ── */
[data-theme="catppuccin-mocha"] {
  --void: #1e1e2e; --panel-top: #181825; --panel-bot: #181825;
  --ink: #cdd6f4; --dim: #a6adc8; --line: #45475a;
  --bolt: #cba6f7; --bolt-hi: #cba6f7;
  --good: #a6e3a1; --warn: #f9e2af; --again: #f38ba8;
  --halo: #181825; --menu-bg: #181825;
  --note-border: #f9e2af; --note-ink: #cdd6f4; --note-code: #cdd6f4;
  --code: #89b4fa;
  --excerpt-bg: #181825;
}

/* ── Catppuccin Latte ── */
[data-theme="catppuccin-latte"] {
  --void: #eff1f5; --panel-top: #e6e9ef; --panel-bot: #e6e9ef;
  --ink: #4c4f69; --dim: #6c6f85; --line: #bcc0cc;
  --bolt: #8839ef; --bolt-hi: #8839ef;
  --good: #40a02b; --warn: #df8e1d; --again: #d20f39;
  --halo: #e6e9ef; --menu-bg: #e6e9ef;
  --note-border: #df8e1d; --note-ink: #4c4f69; --note-code: #4c4f69;
  --code: #1e66f5;
  --excerpt-bg: #e6e9ef;
}

/* ── Tokyo Night ── */
[data-theme="tokyo-night"] {
  --void: #1a1b26; --panel-top: #16161e; --panel-bot: #16161e;
  --ink: #c0caf5; --dim: #565f89; --line: #15161e;
  --bolt: #7aa2f7; --bolt-hi: #7aa2f7;
  --good: #9ece6a; --warn: #e0af68; --again: #f7768e;
  --halo: #16161e; --menu-bg: #16161e;
  --note-border: #e0af68; --note-ink: #c0caf5; --note-code: #c0caf5;
  --code: #7aa2f7;
  --excerpt-bg: #16161e;
}

/* ── Solarized Dark ── */
[data-theme="solarized-dark"] {
  --void: #002b36; --panel-top: #073642; --panel-bot: #073642;
  --ink: #839496; --dim: #586e75; --line: #073642;
  --bolt: #268bd2; --bolt-hi: #268bd2;
  --good: #859900; --warn: #b58900; --again: #dc322f;
  --halo: #073642; --menu-bg: #073642;
  --note-border: #b58900; --note-ink: #839496; --note-code: #839496;
  --code: #268bd2;
  --excerpt-bg: #073642;
}

/* ── Solarized Light — aligned to the Alix Adult palette ── */
[data-theme="solarized-light"] {
  --void: #fdf6e3; --panel-top: #eee8d5; --panel-bot: #fdf6e3;
  --ink: #073642; --dim: #839496; --line: rgba(80, 70, 40, .20);
  --bolt: #268bd2; --bolt-hi: #268bd2;
  --good: #859900; --warn: #b58900; --again: #dc322f;
  --halo: #fdf6e3; --menu-bg: #eee8d5;
  --note-border: #b58900; --note-ink: #073642; --note-code: #073642;
  --code: #176f9c;
  --excerpt-bg: #eee8d5;
  --text: #586e75; --faint: #93a1a1; --accent-ink: #ffffff; --brand-text: #c2410c;
}

/* ── Gruvbox Dark — aligned to the Alix Adult palette ── */
[data-theme="gruvbox-dark"] {
  --void: #282828; --panel-top: #3c3836; --panel-bot: #282828;
  --ink: #fbf1c7; --dim: #a89984; --line: rgba(255, 255, 255, .10);
  --bolt: #fabd2f; --bolt-hi: #fabd2f;
  --good: #b8bb26; --warn: #fabd2f; --again: #fb4934;
  --halo: #282828; --menu-bg: #3c3836;
  --note-border: #fabd2f; --note-ink: #fbf1c7; --note-code: #fbf1c7;
  --code: #83a598;
  --excerpt-bg: #3c3836;
  --text: #ebdbb2; --faint: #7c6f64; --accent-ink: #2a2000; --brand-text: #fe8019;
}

/* ── Gruvbox Light ── */
[data-theme="gruvbox-light"] {
  --void: #fbf1c7; --panel-top: #ebdbb2; --panel-bot: #ebdbb2;
  --ink: #3c3836; --dim: #7c6f64; --line: #d5c4a1;
  --bolt: #458588; --bolt-hi: #458588;
  --good: #98971a; --warn: #d79921; --again: #cc241d;
  --halo: #ebdbb2; --menu-bg: #ebdbb2;
  --note-border: #d79921; --note-ink: #3c3836; --note-code: #3c3836;
  --code: #076678;
  --excerpt-bg: #ebdbb2;
}

/* ── Nord — aligned to the Alix Adult palette ── */
[data-theme="nord"] {
  --void: #2e3440; --panel-top: #3b4252; --panel-bot: #2e3440;
  --ink: #eceff4; --dim: #a3adba; --line: rgba(255, 255, 255, .10);
  --bolt: #88c0d0; --bolt-hi: #88c0d0;
  --good: #a3be8c; --warn: #ebcb8b; --again: #bf616a;
  --halo: #2e3440; --menu-bg: #3b4252;
  --note-border: #ebcb8b; --note-ink: #eceff4; --note-code: #eceff4;
  --code: #88c0d0;
  --excerpt-bg: #3b4252;
  --text: #d8dee9; --faint: #7b869c; --accent-ink: #10202a; --brand-text: #f5a35f;
}

/* ── Ayu Dark ── */
[data-theme="ayu-dark"] {
  --void: #0d1017; --panel-top: #10141c; --panel-bot: #10141c;
  --ink: #bfbdb6; --dim: #5c6773; --line: #1b1f29;
  --bolt: #e6b450; --bolt-hi: #e6b450;
  --good: #aad94c; --warn: #ffb454; --again: #f07178;
  --halo: #10141c; --menu-bg: #10141c;
  --note-border: #ffb454; --note-ink: #bfbdb6; --note-code: #bfbdb6;
  --code: #59c2ff;
  --excerpt-bg: #10141c;
}

/* ── Rosé Pine ── */
[data-theme="rose-pine"] {
  --void: #191724; --panel-top: #1f1d2e; --panel-bot: #1f1d2e;
  --ink: #e0def4; --dim: #6e6a86; --line: #26233a;
  --bolt: #c4a7e7; --bolt-hi: #c4a7e7;
  --good: #31748f; --warn: #f6c177; --again: #eb6f92;
  --halo: #1f1d2e; --menu-bg: #1f1d2e;
  --note-border: #f6c177; --note-ink: #e0def4; --note-code: #e0def4;
  --code: #9ccfd8;
  --excerpt-bg: #1f1d2e;
}

/* ── Everforest Dark ── */
[data-theme="everforest-dark"] {
  --void: #2d353b; --panel-top: #343f44; --panel-bot: #343f44;
  --ink: #d3c6aa; --dim: #859289; --line: #3d484d;
  --bolt: #a7c080; --bolt-hi: #a7c080;
  --good: #a7c080; --warn: #dbbc7f; --again: #e67e80;
  --halo: #343f44; --menu-bg: #343f44;
  --note-border: #dbbc7f; --note-ink: #d3c6aa; --note-code: #d3c6aa;
  --code: #7fbbb3;
  --excerpt-bg: #343f44;
}

/* ── theme picker (popover gallery, built by theme.js) ─────────────────
   Opened from each page's `#theme-open` trigger. The panel uses the live theme
   variables, so hovering a swatch previews the whole UI — panel included. */

.theme-backdrop {
  position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
.theme-backdrop.show { opacity: 1; pointer-events: auto; }

.theme-panel {
  position: fixed; z-index: 41; top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(0.98);
  width: min(92vw, 470px); max-height: 80vh; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  background: var(--menu-bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.6); padding: 15px 18px 20px;
  opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s;
}
.theme-panel.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .theme-backdrop, .theme-panel { transition: none; }
}
.theme-panel::-webkit-scrollbar { width: 8px; }
.theme-panel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.theme-panel::-webkit-scrollbar-thumb:hover { background: var(--dim); }
.theme-panel::-webkit-scrollbar-track { background: transparent; }

.theme-head { display: flex; align-items: center; justify-content: space-between; }
.theme-head span { font-weight: 600; font-size: 1rem; }
.theme-x { background: none; border: 0; color: var(--dim); font-size: 0.9rem; cursor: pointer; padding: 4px 7px; border-radius: 6px; }
.theme-x:hover { color: var(--ink); background: rgba(127,127,127,0.14); }

/* The live preview: a mini card themed by the hovered swatch. Scoped via
   data-theme on .theme-sample (not <html>), so only this card re-themes. */
.theme-sample {
  background: var(--void); border: 1px solid var(--line); border-radius: 13px;
  padding: 12px; margin-top: 13px;
}
.ts-card {
  background: linear-gradient(160deg, var(--panel-top), var(--panel-bot));
  border: 1px solid var(--line); border-radius: 11px; padding: 12px 13px;
}
.ts-q { color: var(--ink); font-weight: 600; font-size: 0.84rem; margin-bottom: 9px; }
.ts-a { color: var(--good); font-size: 0.82rem; margin-bottom: 9px; }
.ts-note {
  color: var(--note-ink); background: var(--note-bg);
  border-left: 2px solid var(--note-border); border-radius: 6px;
  padding: 5px 9px; font-size: 0.72rem;
}

.theme-group-label {
  font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--dim); margin: 14px 0 8px;
}
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }

.theme-cell {
  display: flex; flex-direction: column; gap: 6px;
  background: none; border: 1px solid transparent; border-radius: 11px;
  padding: 6px; cursor: pointer; text-align: left;
}
.theme-cell:hover { border-color: var(--line); }
.theme-cell.on { border-color: var(--bolt); }
.theme-prev {
  height: 40px; border-radius: 8px; border: 1px solid rgba(127,127,127,0.25);
  display: flex; align-items: flex-end; gap: 5px; padding: 6px;
}
.theme-dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,0.18); }
.theme-name { font-size: 0.8rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-cell.on .theme-name { color: var(--bolt); }