/* Background palettes, 12 in three groups (owner, 2026-10-12): calm くすみ (和纸白 washi default, 奶茶米 cream, 豆沙粉 pink,
   抹茶绿 sage, 雾霾蓝 ocean, 丁香紫 lavender: each hue clearly apart, key chroma ≈ .06–.065 OKLCH), lively soft-dopamine
   (柠檬黄 lemon, 珊瑚橘 coral = id terracotta, 薄荷绿 mint, 汽水蓝 soda: brighter keys, the paper still light) and deep
   (鸽子灰 dove grey = id sumi, a near-neutral grey that replaced 水墨黑; 星夜蓝 navy). 月光灰 (mist) and 燕麦灰 (sand) were folded into lavender and cream (assets/appearance.js maps the
   old ids). The nine calm/lively palettes are generated from one OKLCH spec per palette (hue, page chroma, link L/C, selected
   chroma, band partner hue) and checked against the rules below; washi and navy are unchanged. 鸽子灰 keeps every paper,
   tint, band and selected note at OKLCH C ≤ .006 (a breath of cool, H ≈ 250); only its tag fill keeps a faint warm paper hint
   (C ≈ .012, H 70) so tags stay friendly next to Sandy's apricot, which it shares with the others.
   Each palette is complete for light AND dark: paper, ink, hairlines, links, filled controls and the warm accent.
   Legacy --blue-* names are aliases (link / secondary / chip roles), not fixed blue; the semantic --color-* layer in
   tokens.css points at them. Warning (--warm-bg) stays semantic.
   Answer states (--ok / --bad, their -bg tints and -line edges, --color-on-status) are set per palette from one spec
   (2026-10-11): correct = a deepened くすみ sage (from #94a89c / #a8baaa, hue 142°), wrong = a deepened dusty rose (from
   #a08382 / #e9c1cf, hue 354°), never mint or bright pink. The tints are the palette's paper mixed 32% with the pale mood-board
   tone (dark: 22% with a mid tone). Text and answer edges (--ok / --bad) ≥4.5:1 on their tint, the surface, the page and
   chips; --ok-line / --bad-line (hairline edges of tinted boxes, and --color-done, Today's finished progress line) ≥3:1 on
   the tint, surface, page and --tint-3 track; the ✓ / ✕ glyph (--color-on-status) ≥4.5:1 on the
   --ok / --bad disc. The hue never changes between palettes, so correct and wrong read the same everywhere.
   Every palette keeps a warm accent (--color-accent for text, --color-accent-deco for dots and ⭐) so Sandy's orange holds.
   --color-reading (readings under headwords) is a muted cocoa brown; --color-selected / -on-selected / -selected-line make the
   selected chip and current tab a pale note in the palette's own tint with dark text and a ≥3:1 edge.
   Each palette also looks like itself (2026-10-12): its own selected note in its own hue (washi apricot; navy pale gold / navy
   fill with gold text in dark; dove grey a neutral grey note with a slate edge), its own --note-cream tag fill (sage an oat
   tag, navy cool mist, dove grey warm paper) and, for navy only, its own accent and primary button (gold). The other palettes
   keep Sandy's apricot.
   Menu band (--color-menu-band / -band-line, 2026-10-12 "A + C"): the menu itself is the page's paper; only a top band behind the
   brand (and, on phones, the scrim behind the open panel) carries a quiet partner colour: washi + sage, cream + matcha (+40°),
   pink + mauve (−30°), sage + oat (−60°), ocean + sea glass (−35°), lavender + periwinkle (−40°), lemon + lime (+45°, a
   yellow-green band kept quiet), coral + apricot (+45°), mint + sky (+40°), soda + aqua (−40°), navy + navy mist, dove grey + a neutral grey (C ≈ 1.5 Lab; the hue rule doesn't apply to a neutral page). One spec: light = the page's Lab L − 5 at C 8–10 (sumi 2.5) in the partner hue, line = L − 12; dark = page L − 2
   at C ≤ 5.5, line = page L + 9. Hues neighbour the page (or the page is near-neutral); yellows stay at C ≤ 10.
   Text tokens are ≥4.5:1 on --surface, the page and --blue-100 chips; white on --button-*; control lines ≥3:1.
   Key colour (--color-key / --color-key-soft, 2026-10-12, the 更多 pages' colour blocks): --color-key = the palette's mood-board
   `key` in appearance.js (dark mode: 18% toward the dark paper; 星夜蓝 keeps its gold); --color-key-soft = that key mixed into
   the page in OKLab until it reads as a block (ΔE_ok ≈ .065 light, .07 dark/night). Decorative fills; the only text on
   --color-key-soft is --ink / --ink-2 / --muted, all ≥4.5:1 (appearance.test.cjs). Nothing sits ON --color-key.
   appearance.js sets data-background / data-theme before the first paint on every page.
   Values are generated from one spec; ratios are checked in assets/appearance.test.cjs. */
:root { --study-background: var(--page-1); }
:root[data-background="washi"][data-theme="light"] {
  --study-background: #faf6ef; --page-1: #faf6ef; --page-2: #faf6ef; --page-3: #faf6ef;
  --surface: #fffdf9; --surface-rgb: 255 253 249;
  --tint-1: #fcf8f1; --tint-2: #f5eee3; --tint-3: #f0e6d6;
  --blue-50: #fcf8f1; --blue-100: #f0e6d6; --blue-200: #e4d6c0;
  --border: #e8dfd2; --line: #e2d6c4; --line-rgb: 200 182 158; --glow-rgb: 240 230 214; --shadow-rgb: 74 58 44;
  --ink: #2e2925; --ink-2: #4d443d; --muted: #6b5f55;
  --blue-400: #c2a98a; --blue-500: #4c6378; --blue-600: #3d5f7c;
  --control-line: #978a7c; --accent-hover: #2c4a63;
  --button-start: #3a332e; --button-end: #2e2925;
  --color-accent: #a14f26; --color-accent-deco: #e39a63;
  --color-reading: #7e5f55; --color-selected: #f8d0b4; --color-on-selected: #5a3823; --color-selected-line: #9a6039;
  --ok: #4d6d59; --ok-bg: #e3e8e0; --ok-line: #658a72; --bad: #8e575d; --bad-bg: #f8eaec; --bad-line: #a6757a; --color-on-status: #ffffff;
  --note-cream: #f4e8d4;
  --color-menu-band: #e3ebd8; --color-menu-band-line: #cfd7c5;
  --color-key: #e39a63; --color-key-soft: #f5decb;
}
:root[data-background="cream"][data-theme="light"] {
  --study-background: #fbf3e9; --page-1: #fbf3e9; --page-2: #fbf3e9; --page-3: #fbf3e9;
  --surface: #fffcf9; --surface-rgb: 255 252 249;
  --tint-1: #fdf8f2; --tint-2: #f3e9da; --tint-3: #eddec8;
  --blue-50: #fdf8f2; --blue-100: #eddec8; --blue-200: #e2ceb1;
  --border: #e7dccc; --line: #e0d3bf; --line-rgb: 189 167 134; --glow-rgb: 237 222 200; --shadow-rgb: 71 59 40;
  --ink: #332d23; --ink-2: #504637; --muted: #685c49;
  --blue-400: #bda786; --blue-500: #695433; --blue-600: #654b1e;
  --control-line: #94846b; --accent-hover: #4f3911;
  --button-start: #624f33; --button-end: #534228;
  --color-accent: #9a4c25; --color-accent-deco: #e39a63;
  --color-reading: #795c52; --color-selected: #ecd4af; --color-on-selected: #4b3612; --color-selected-line: #86693b;
  --ok: #4b6a57; --ok-bg: #e4e6dc; --ok-line: #638770; --bad: #8a545a; --bad-bg: #f9e8e8; --bad-line: #a37176; --color-on-status: #ffffff;
  --note-cream: #f2e4d1;
  --color-menu-band: #e4e8d7; --color-menu-band-line: #d0d4c3;
  --color-key: #e2c69b; --color-key-soft: #efddc4;
}
:root[data-background="pink"][data-theme="light"] {
  --study-background: #fef1f2; --page-1: #fef1f2; --page-2: #fef1f2; --page-3: #fef1f2;
  --surface: #fffcfc; --surface-rgb: 255 252 252;
  --tint-1: #fff7f7; --tint-2: #f8e5e7; --tint-3: #f3d8db;
  --blue-50: #fff7f7; --blue-100: #f3d8db; --blue-200: #e9c7ca;
  --border: #ebd8d9; --line: #e6ced0; --line-rgb: 204 157 161; --glow-rgb: 243 216 219; --shadow-rgb: 78 54 56;
  --ink: #372a2b; --ink-2: #564244; --muted: #6e5659;
  --blue-400: #cc9da1; --blue-500: #764a4f; --blue-600: #733d45;
  --control-line: #9d7d80; --accent-hover: #5b2d34;
  --button-start: #6c464b; --button-end: #5c3a3e;
  --color-accent: #9a4c25; --color-accent-deco: #e39a63;
  --color-reading: #795c52; --color-selected: #f7cbcf; --color-on-selected: #572c32; --color-selected-line: #975b62;
  --ok: #486754; --ok-bg: #e6e5e2; --ok-line: #60846d; --bad: #875157; --bad-bg: #fbe7ee; --bad-line: #a37176; --color-on-status: #ffffff;
  --note-cream: #fadfe1;
  --color-menu-band: #f4e1ec; --color-menu-band-line: #e0cdd8;
  --color-key: #e1aeb3; --color-key-soft: #f4d8da;
}
:root[data-background="sage"][data-theme="light"] {
  --study-background: #eff7ef; --page-1: #eff7ef; --page-2: #eff7ef; --page-3: #eff7ef;
  --surface: #fafefa; --surface-rgb: 250 254 250;
  --tint-1: #f6fbf6; --tint-2: #e3eee2; --tint-3: #d5e6d4;
  --blue-50: #f6fbf6; --blue-100: #d5e6d4; --blue-200: #c2d8c2;
  --border: #d5e1d5; --line: #cadaca; --line-rgb: 152 179 152; --glow-rgb: 213 230 212; --shadow-rgb: 50 66 50;
  --ink: #283128; --ink-2: #3f4c3e; --muted: #536353;
  --blue-400: #98b398; --blue-500: #466046; --blue-600: #365637;
  --control-line: #788d78; --accent-hover: #264327;
  --button-start: #435943; --button-end: #374b37;
  --color-accent: #9a4c25; --color-accent-deco: #e39a63;
  --color-reading: #795c52; --color-selected: #c4e1c4; --color-on-selected: #274228; --color-selected-line: #557956;
  --ok: #4b6a57; --ok-bg: #dbe9e0; --ok-line: #638770; --bad: #8a545a; --bad-bg: #f1ebec; --bad-line: #a37176; --color-on-status: #ffffff;
  --note-cream: #efe5d0;
  --color-menu-band: #eee6d5; --color-menu-band-line: #dad2c2;
  --color-key: #9ec39e; --color-key-soft: #d3e5d3;
}
:root[data-background="ocean"][data-theme="light"] {
  --study-background: #ecf6fb; --page-1: #ecf6fb; --page-2: #ecf6fb; --page-3: #ecf6fb;
  --surface: #fafdff; --surface-rgb: 250 253 255;
  --tint-1: #f4fafd; --tint-2: #dfedf3; --tint-3: #cfe4ed;
  --blue-50: #f4fafd; --blue-100: #cfe4ed; --blue-200: #bbd6e2;
  --border: #d1e0e7; --line: #c5d9e1; --line-rgb: 135 178 196; --glow-rgb: 207 228 237; --shadow-rgb: 40 65 75;
  --ink: #233035; --ink-2: #374b53; --muted: #4a626b;
  --blue-400: #87b2c4; --blue-500: #335f70; --blue-600: #16556a;
  --control-line: #6d8c99; --accent-hover: #064153;
  --button-start: #335867; --button-end: #284a57;
  --color-accent: #9a4c25; --color-accent-deco: #e39a63;
  --color-reading: #795c52; --color-selected: #bcdeec; --color-on-selected: #0d4152; --color-selected-line: #39788f;
  --ok: #4b6a57; --ok-bg: #d9e8e8; --ok-line: #638770; --bad: #8a545a; --bad-bg: #efeaf4; --bad-line: #a37176; --color-on-status: #ffffff;
  --note-cream: #d2ebf6;
  --color-menu-band: #d2ebe8; --color-menu-band-line: #bed8d6;
  --color-key: #94c7db; --color-key-soft: #cbe4ef;
}
:root[data-background="lavender"][data-theme="light"] {
  --study-background: #f6f2fd; --page-1: #f6f2fd; --page-2: #f6f2fd; --page-3: #f6f2fd;
  --surface: #fdfcff; --surface-rgb: 253 252 255;
  --tint-1: #faf8fe; --tint-2: #ece8f6; --tint-3: #e3dcf1;
  --blue-50: #faf8fe; --blue-100: #e3dcf1; --blue-200: #d5cce8;
  --border: #dfdaea; --line: #d7d1e5; --line-rgb: 176 163 204; --glow-rgb: 227 220 241; --shadow-rgb: 64 57 77;
  --ink: #2f2c37; --ink-2: #4a4455; --muted: #605a6d;
  --blue-400: #b0a3cc; --blue-500: #5d5077; --blue-600: #544272;
  --control-line: #8a819b; --accent-hover: #40315a;
  --button-start: #574b6d; --button-end: #493f5d;
  --color-accent: #9a4c25; --color-accent-deco: #e39a63;
  --color-reading: #795c52; --color-selected: #dcd1f4; --color-on-selected: #403259; --color-selected-line: #766398;
  --ok: #4b6a57; --ok-bg: #e0e5e9; --ok-line: #638770; --bad: #8a545a; --bad-bg: #f5e7f6; --bad-line: #a37176; --color-on-status: #ffffff;
  --note-cream: #e9e2f8;
  --color-menu-band: #dce6f6; --color-menu-band-line: #c9d2e2;
  --color-key: #b7a8d5; --color-key-soft: #e2dbf1;
}
:root[data-background="lemon"][data-theme="light"] {
  --study-background: #f8f5e5; --page-1: #f8f5e5; --page-2: #f8f5e5; --page-3: #f8f5e5;
  --surface: #fefdf6; --surface-rgb: 254 253 246;
  --tint-1: #fbfaf0; --tint-2: #efebd3; --tint-3: #e7e1bf;
  --blue-50: #fbfaf0; --blue-100: #e7e1bf; --blue-200: #dad3a4;
  --border: #e2dec5; --line: #dbd6b6; --line-rgb: 179 172 128; --glow-rgb: 231 225 191; --shadow-rgb: 65 62 40;
  --ink: #302e23; --ink-2: #4b4837; --muted: #625e4a;
  --blue-400: #b3ac80; --blue-500: #60592d; --blue-600: #524806;
  --control-line: #8b876c; --accent-hover: #3e3601;
  --button-start: #5a532e; --button-end: #4b4623;
  --color-accent: #9a4c25; --color-accent-deco: #e39a63;
  --color-reading: #795c52; --color-selected: #e4d998; --color-on-selected: #433b07; --color-selected-line: #7a7031;
  --ok: #4b6a57; --ok-bg: #e2e7d9; --ok-line: #638770; --bad: #8a545a; --bad-bg: #f7e9e5; --bad-line: #a37176; --color-on-status: #ffffff;
  --note-cream: #eae7d1;
  --color-menu-band: #dceadc; --color-menu-band-line: #c8d6c8;
  --color-key: #ebd96e; --color-key-soft: #f2e8b1;
}
:root[data-background="terracotta"][data-theme="light"] {
  --study-background: #fef1ef; --page-1: #fef1ef; --page-2: #fef1ef; --page-3: #fef1ef;
  --surface: #fffcfb; --surface-rgb: 255 252 251;
  --tint-1: #fff7f6; --tint-2: #fce5e0; --tint-3: #f8d7d1;
  --blue-50: #fff7f6; --blue-100: #f8d7d1; --blue-200: #f0c5be;
  --border: #efd7d3; --line: #ebcdc7; --line-rgb: 222 149 137; --glow-rgb: 248 215 209; --shadow-rgb: 78 54 50;
  --ink: #372a28; --ink-2: #56423f; --muted: #6f5753;
  --blue-400: #de9589; --blue-500: #854137; --blue-600: #883327;
  --control-line: #9d7e78; --accent-hover: #6e231a;
  --button-start: #7a3f36; --button-end: #69332b;
  --color-accent: #8c3d1c; --color-accent-deco: #e39a63;
  --color-reading: #765a50; --color-selected: #fec9bf; --color-on-selected: #652017; --color-selected-line: #ac4e41;
  --ok: #486754; --ok-bg: #e6e5e0; --ok-line: #60846d; --bad: #875157; --bad-bg: #fbe7ec; --bad-line: #a37176; --color-on-status: #ffffff;
  --note-cream: #fadfdb;
  --color-menu-band: #f0e4d5; --color-menu-band-line: #dcd0c1;
  --color-key: #fd8c7b; --color-key-soft: #ffd7cf;
}
:root[data-background="mint"][data-theme="light"] {
  --study-background: #e9f9f3; --page-1: #e9f9f3; --page-2: #e9f9f3; --page-3: #e9f9f3;
  --surface: #f8fffc; --surface-rgb: 248 255 252;
  --tint-1: #f2fcf8; --tint-2: #daf1e8; --tint-3: #c8e9dd;
  --blue-50: #f2fcf8; --blue-100: #c8e9dd; --blue-200: #b0dccd;
  --border: #cce4db; --line: #bfddd2; --line-rgb: 137 182 167; --glow-rgb: 200 233 221; --shadow-rgb: 41 67 59;
  --ink: #24312d; --ink-2: #384d46; --muted: #4b645b;
  --blue-400: #89b6a7; --blue-500: #356254; --blue-600: #125443;
  --control-line: #6e8e83; --accent-hover: #024032;
  --button-start: #355b4f; --button-end: #2a4d42;
  --color-accent: #9a4c25; --color-accent-deco: #e39a63;
  --color-reading: #795c52; --color-selected: #a8e7d2; --color-on-selected: #104437; --color-selected-line: #3c7d6a;
  --ok: #4b6a57; --ok-bg: #d7eae3; --ok-line: #638770; --bad: #8a545a; --bad-bg: #edecef; --bad-line: #a37176; --color-on-status: #ffffff;
  --note-cream: #d3ede4;
  --color-menu-band: #d2ecf1; --color-menu-band-line: #bfd8de;
  --color-key: #81e0c3; --color-key-soft: #bfefde;
}
:root[data-background="soda"][data-theme="light"] {
  --study-background: #ecf6ff; --page-1: #ecf6ff; --page-2: #ecf6ff; --page-3: #ecf6ff;
  --surface: #fbfdff; --surface-rgb: 251 253 255;
  --tint-1: #f4faff; --tint-2: #ddedfb; --tint-3: #cce3f8;
  --blue-50: #f4faff; --blue-100: #cce3f8; --blue-200: #b6d5f1;
  --border: #cfe0ef; --line: #c2d8eb; --line-rgb: 126 177 220; --glow-rgb: 204 227 248; --shadow-rgb: 46 63 79;
  --ink: #262f37; --ink-2: #3b4a56; --muted: #4f606f;
  --blue-400: #7eb1dc; --blue-500: #275c86; --blue-600: #015182;
  --control-line: #72899d; --accent-hover: #003e65;
  --button-start: #2a567a; --button-end: #204869;
  --color-accent: #9a4c25; --color-accent-deco: #e39a63;
  --color-reading: #795c52; --color-selected: #b7dcfd; --color-on-selected: #013e65; --color-selected-line: #2774ad;
  --ok: #4b6a57; --ok-bg: #d9e8eb; --ok-line: #638770; --bad: #8a545a; --bad-bg: #efeaf7; --bad-line: #a37176; --color-on-status: #ffffff;
  --note-cream: #d6e9f9;
  --color-menu-band: #d1ebee; --color-menu-band-line: #bed8db;
  --color-key: #5db2f7; --color-key-soft: #c9e5fe;
}
:root[data-background="sumi"][data-theme="light"] {
  --study-background: #f0f1f3; --page-1: #f0f1f3; --page-2: #f0f1f3; --page-3: #f0f1f3;
  --surface: #fcfdfe; --surface-rgb: 252 253 254;
  --tint-1: #f8f9fa; --tint-2: #e5e7ea; --tint-3: #dadde1;
  --blue-50: #f8f9fa; --blue-100: #dadde1; --blue-200: #caced3;
  --border: #d8dadd; --line: #cfd2d5; --line-rgb: 162 172 183; --glow-rgb: 218 221 225; --shadow-rgb: 47 63 79;
  --ink: #2c2e31; --ink-2: #44484c; --muted: #5a5e63;
  --blue-400: #a2acb7; --blue-500: #505963; --blue-600: #3e4955;
  --control-line: #83878b; --accent-hover: #2d3641;
  --button-start: #4b535c; --button-end: #3f464e;
  --color-accent: #974922; --color-accent-deco: #e39a63;
  --color-reading: #76594f; --color-selected: #ced1d4; --color-on-selected: #323c45; --color-selected-line: #63707e;
  --ok: #486754; --ok-bg: #dce5e3; --ok-line: #60846d; --bad: #875157; --bad-bg: #f1e7ef; --bad-line: #a06e73; --color-on-status: #ffffff;
  --note-cream: #ece5de;
  --color-menu-band: #e1e3e5; --color-menu-band-line: #cccfd1;
  --color-key: #9c9fa1; --color-key-soft: #dadbdd;
}
:root[data-background="navy"][data-theme="light"] {
  --study-background: #162644; --page-1: #162644; --page-2: #162644; --page-3: #162644;
  --surface: #20304d; --surface-rgb: 32 48 77;
  --tint-1: #233250; --tint-2: #283854; --tint-3: #33425e;
  --blue-50: #233250; --blue-100: #33425e; --blue-200: #4e5b73;
  --border: #394862; --line: #425069; --line-rgb: 127 141 165; --glow-rgb: 51 66 94; --shadow-rgb: 0 0 0;
  --ink: #f4ecdd; --ink-2: #dfd5c0; --muted: #a8b5cb;
  --blue-400: #c1a057; --blue-500: #b9cbec; --blue-600: #bacff3;
  --control-line: #7f8da5; --accent-hover: #d2e2ff;
  --button-start: #445d8b; --button-end: #374f7c;
  --color-accent: #e6c77c; --color-accent-deco: #d7b355;
  --color-reading: #c1aca0; --color-selected: #524228; --color-on-selected: #f4dca1; --color-selected-line: #caa653;
  --ok: #8dbb9c; --ok-bg: #2c3931; --ok-line: #669a78; --bad: #d1a3a9; --bad-bg: #403133; --bad-line: #b87c83; --color-on-status: #162644;
  --color-primary: #d9b86e; --color-primary-hover: #e2c47f; --color-primary-line: #d9b86e; --color-on-primary: #162644;
  --note-cream: #3a4559;
  --color-menu-band: #12203a; --color-menu-band-line: #2d3b54;
  --color-key: #d7b355; --color-key-soft: #2c384b;
}
:root[data-background="washi"][data-theme="dark"] {
  --study-background: #1d1a17; --page-1: #1d1a17; --page-2: #1d1a17; --page-3: #1d1a17;
  --surface: #26221e; --surface-rgb: 38 34 30;
  --tint-1: #29251f; --tint-2: #2f2a24; --tint-3: #38312a;
  --blue-50: #29251f; --blue-100: #38312a; --blue-200: #4e453b;
  --border: #3a332c; --line: #433b33; --line-rgb: 160 140 118; --glow-rgb: 56 49 42; --shadow-rgb: 0 0 0;
  --ink: #f2ece3; --ink-2: #dad0c3; --muted: #b5a898;
  --blue-400: #8f7d69; --blue-500: #aac0d4; --blue-600: #a6c2dc;
  --control-line: #85786a; --accent-hover: #c8dbec;
  --button-start: #6e5f52; --button-end: #5f5146;
  --color-accent: #eca877; --color-accent-deco: #e39a63;
  --color-reading: #b2968d; --color-selected: #4a3426; --color-on-selected: #f6d8bd; --color-selected-line: #c0875c;
  --ok: #7ba98c; --ok-bg: #30372e; --ok-line: #598b6b; --bad: #c08f94; --bad-bg: #3a2d2b; --bad-line: #ae6b72; --color-on-status: #1d1a17;
  --note-cream: #3b3328;
  --color-menu-band: #151810; --color-menu-band-line: #2b2e27;
  --color-key: #bb8155; --color-key-soft: #332920;
}
:root[data-background="cream"][data-theme="dark"] {
  --study-background: #231d15; --page-1: #231d15; --page-2: #231d15; --page-3: #231d15;
  --surface: #2b251b; --surface-rgb: 43 37 27;
  --tint-1: #2d271e; --tint-2: #342d22; --tint-3: #3e3527;
  --blue-50: #2d271e; --blue-100: #3e3527; --blue-200: #594c3a;
  --border: #443b2d; --line: #4b4132; --line-rgb: 176 155 124; --glow-rgb: 62 53 39; --shadow-rgb: 0 0 0;
  --ink: #f3ece1; --ink-2: #ddd1bf; --muted: #baac97;
  --blue-400: #b09b7c; --blue-500: #dcc5a3; --blue-600: #e0c69f;
  --control-line: #98866b; --accent-hover: #f0d9b6;
  --button-start: #76654a; --button-end: #67573f;
  --color-accent: #eca877; --color-accent-deco: #e39a63;
  --color-reading: #b59a92; --color-selected: #4a3a22; --color-on-selected: #eedbc0; --color-selected-line: #b2976c;
  --ok: #80ac90; --ok-bg: #35392d; --ok-line: #5b8e6d; --bad: #c39499; --bad-bg: #3f2f29; --bad-line: #b07076; --color-on-status: #231d15;
  --note-cream: #3e3529;
  --color-menu-band: #191a15; --color-menu-band-line: #30312b;
  --color-key: #bca480; --color-key-soft: #372e23;
}
:root[data-background="pink"][data-theme="dark"] {
  --study-background: #251b1c; --page-1: #251b1c; --page-2: #251b1c; --page-3: #251b1c;
  --surface: #2e2324; --surface-rgb: 46 35 36;
  --tint-1: #302526; --tint-2: #362a2b; --tint-3: #413233;
  --blue-50: #302526; --blue-100: #413233; --blue-200: #5d484a;
  --border: #483839; --line: #4f3e3f; --line-rgb: 189 145 150; --glow-rgb: 65 50 51; --shadow-rgb: 0 0 0;
  --ink: #f7e9ea; --ink-2: #e4ccce; --muted: #c2a6a8;
  --blue-400: #bd9196; --blue-500: #ebbbbf; --blue-600: #f1babf;
  --control-line: #a27e82; --accent-hover: #ffced3;
  --button-start: #815c60; --button-end: #704f53;
  --color-accent: #eca877; --color-accent-deco: #e39a63;
  --color-reading: #b59a92; --color-selected: #503437; --color-on-selected: #fad2d6; --color-selected-line: #c38990;
  --ok: #80ac90; --ok-bg: #363832; --ok-line: #5b8e6d; --bad: #c39499; --bad-bg: #402e2f; --bad-line: #b07076; --color-on-status: #251b1c;
  --note-cream: #423233;
  --color-menu-band: #1e181b; --color-menu-band-line: #352f33;
  --color-key: #bb9195; --color-key-soft: #3a2b2d;
}
:root[data-background="sage"][data-theme="dark"] {
  --study-background: #1a201a; --page-1: #1a201a; --page-2: #1a201a; --page-3: #1a201a;
  --surface: #212821; --surface-rgb: 33 40 33;
  --tint-1: #232a23; --tint-2: #283028; --tint-3: #2f392f;
  --blue-50: #232a23; --blue-100: #2f392f; --blue-200: #455345;
  --border: #354035; --line: #3b473b; --line-rgb: 141 166 141; --glow-rgb: 47 57 47; --shadow-rgb: 0 0 0;
  --ink: #e7f0e6; --ink-2: #c8d8c8; --muted: #a1b4a1;
  --blue-400: #8da68d; --blue-500: #b6d2b6; --blue-600: #b5d5b5;
  --control-line: #799179; --accent-hover: #c9e6c9;
  --button-start: #596e59; --button-end: #4c5f4c;
  --color-accent: #eca877; --color-accent-deco: #e39a63;
  --color-reading: #b59a92; --color-selected: #304330; --color-on-selected: #cfe5cf; --color-selected-line: #84a684;
  --ok: #80ac90; --ok-bg: #2e3c30; --ok-line: #5b8e6d; --bad: #c39499; --bad-bg: #38322d; --bad-line: #b07076; --color-on-status: #1a201a;
  --note-cream: #3c3629;
  --color-menu-band: #1d1a15; --color-menu-band-line: #34312c;
  --color-key: #84a384; --color-key-soft: #293229;
}
:root[data-background="ocean"][data-theme="dark"] {
  --study-background: #181f23; --page-1: #181f23; --page-2: #181f23; --page-3: #181f23;
  --surface: #1f282b; --surface-rgb: 31 40 43;
  --tint-1: #212a2e; --tint-2: #263034; --tint-3: #2c383e;
  --blue-50: #212a2e; --blue-100: #2c383e; --blue-200: #405259;
  --border: #313f44; --line: #37464c; --line-rgb: 126 165 182; --glow-rgb: 44 56 62; --shadow-rgb: 0 0 0;
  --ink: #e2eff5; --ink-2: #c0d7e1; --muted: #98b3be;
  --blue-400: #7ea5b6; --blue-500: #a5d1e3; --blue-600: #a1d3e8;
  --control-line: #6c8f9e; --accent-hover: #b8e4f7;
  --button-start: #4b6d7b; --button-end: #3f5f6b;
  --color-accent: #eca877; --color-accent-deco: #e39a63;
  --color-reading: #b59a92; --color-selected: #2a414a; --color-on-selected: #c1e5f3; --color-selected-line: #6da5bb;
  --ok: #80ac90; --ok-bg: #2c3b37; --ok-line: #5b8e6d; --bad: #c39499; --bad-bg: #363134; --bad-line: #b07076; --color-on-status: #181f23;
  --note-cream: #293940;
  --color-menu-band: #141c1b; --color-menu-band-line: #2a3332;
  --color-key: #7ba5b6; --color-key-soft: #263237;
}
:root[data-background="lavender"][data-theme="dark"] {
  --study-background: #1f1d24; --page-1: #1f1d24; --page-2: #1f1d24; --page-3: #1f1d24;
  --surface: #27242d; --surface-rgb: 39 36 45;
  --tint-1: #29262f; --tint-2: #2f2c36; --tint-3: #383440;
  --blue-50: #29262f; --blue-100: #383440; --blue-200: #514b5c;
  --border: #3e3a47; --line: #45404f; --line-rgb: 163 151 189; --glow-rgb: 56 52 64; --shadow-rgb: 0 0 0;
  --ink: #eeebf6; --ink-2: #d5cfe3; --muted: #b1aac1;
  --blue-400: #a397bd; --blue-500: #cec1eb; --blue-600: #d1c1f1;
  --control-line: #8d83a1; --accent-hover: #e2d4fe;
  --button-start: #6c6181; --button-end: #5d5471;
  --color-accent: #eca877; --color-accent-deco: #e39a63;
  --color-reading: #b59a92; --color-selected: #40384f; --color-on-selected: #e2d7fa; --color-selected-line: #a291c4;
  --ok: #80ac90; --ok-bg: #313938; --ok-line: #5b8e6d; --bad: #c39499; --bad-bg: #3c2f35; --bad-line: #b07076; --color-on-status: #1f1d24;
  --note-cream: #383441;
  --color-menu-band: #171a1f; --color-menu-band-line: #2e3137;
  --color-key: #998cb2; --color-key-soft: #312e39;
}
:root[data-background="lemon"][data-theme="dark"] {
  --study-background: #211e11; --page-1: #211e11; --page-2: #211e11; --page-3: #211e11;
  --surface: #292617; --surface-rgb: 41 38 23;
  --tint-1: #2b2919; --tint-2: #312e1d; --tint-3: #3a3721;
  --blue-50: #2b2919; --blue-100: #3a3721; --blue-200: #544f31;
  --border: #413d26; --line: #48442b; --line-rgb: 166 160 119; --glow-rgb: 58 55 33; --shadow-rgb: 0 0 0;
  --ink: #efede1; --ink-2: #d6d3bf; --muted: #b3af97;
  --blue-400: #a6a077; --blue-500: #d2ca9e; --blue-600: #d4cc99;
  --control-line: #8f8a6b; --accent-hover: #e5deb1;
  --button-start: #6e6845; --button-end: #605a3a;
  --color-accent: #eca877; --color-accent-deco: #e39a63;
  --color-reading: #b59a92; --color-selected: #463e0a; --color-on-selected: #e5dfbb; --color-selected-line: #a69d65;
  --ok: #80ac90; --ok-bg: #333a29; --ok-line: #5b8e6d; --bad: #c39499; --bad-bg: #3d3026; --bad-line: #b07076; --color-on-status: #211e11;
  --note-cream: #393729;
  --color-menu-band: #171b17; --color-menu-band-line: #2d322d;
  --color-key: #c2b35c; --color-key-soft: #342f1a;
}
:root[data-background="terracotta"][data-theme="dark"] {
  --study-background: #271b19; --page-1: #271b19; --page-2: #271b19; --page-3: #271b19;
  --surface: #302220; --surface-rgb: 48 34 32;
  --tint-1: #322422; --tint-2: #392a27; --tint-3: #44312d;
  --blue-50: #322422; --blue-100: #44312d; --blue-200: #624742;
  --border: #4b3733; --line: #533d39; --line-rgb: 205 139 127; --glow-rgb: 68 49 45; --shadow-rgb: 0 0 0;
  --ink: #f7e9e7; --ink-2: #e5ccc8; --muted: #c2a7a2;
  --blue-400: #cd8b7f; --blue-500: #feb3a6; --blue-600: #ffb5a9;
  --control-line: #a37f79; --accent-hover: #ffd0c7;
  --button-start: #8f564c; --button-end: #7d4941;
  --color-accent: #eca877; --color-accent-deco: #e39a63;
  --color-reading: #b59a92; --color-selected: #57312b; --color-on-selected: #ffd2ca; --color-selected-line: #d97f71;
  --ok: #80ac90; --ok-bg: #383830; --ok-line: #5b8e6d; --bad: #c39499; --bad-bg: #422e2d; --bad-line: #b07076; --color-on-status: #271b19;
  --note-cream: #42322f;
  --color-menu-band: #1d1914; --color-menu-band-line: #34302b;
  --color-key: #d27668; --color-key-soft: #412925;
}
:root[data-background="mint"][data-theme="dark"] {
  --study-background: #14211d; --page-1: #14211d; --page-2: #14211d; --page-3: #14211d;
  --surface: #1b2925; --surface-rgb: 27 41 37;
  --tint-1: #1d2c27; --tint-2: #22322c; --tint-3: #273b34;
  --blue-50: #1d2c27; --blue-100: #273b34; --blue-200: #39554c;
  --border: #2c423a; --line: #314941; --line-rgb: 128 169 155; --glow-rgb: 39 59 52; --shadow-rgb: 0 0 0;
  --ink: #e3f1eb; --ink-2: #c1d9d0; --muted: #99b5ab;
  --blue-400: #80a99b; --blue-500: #a7d5c5; --blue-600: #a3d8c6;
  --control-line: #6e9286; --accent-hover: #bae8d8;
  --button-start: #4c7064; --button-end: #416157;
  --color-accent: #eca877; --color-accent-deco: #e39a63;
  --color-reading: #b59a92; --color-selected: #17473a; --color-on-selected: #c3e8db; --color-selected-line: #70a997;
  --ok: #80ac90; --ok-bg: #293d33; --ok-line: #5b8e6d; --bad: #c39499; --bad-bg: #333230; --bad-line: #b07076; --color-on-status: #14211d;
  --note-cream: #2a3b35;
  --color-menu-band: #141c1e; --color-menu-band-line: #2a3334;
  --color-key: #6cbaa2; --color-key-soft: #20342e;
}
:root[data-background="soda"][data-theme="dark"] {
  --study-background: #161f27; --page-1: #161f27; --page-2: #161f27; --page-3: #161f27;
  --surface: #1d2730; --surface-rgb: 29 39 48;
  --tint-1: #1f2932; --tint-2: #242f39; --tint-3: #2a3844;
  --blue-50: #1f2932; --blue-100: #2a3844; --blue-200: #3d5162;
  --border: #2f3e4b; --line: #344553; --line-rgb: 117 164 204; --glow-rgb: 42 56 68; --shadow-rgb: 0 0 0;
  --ink: #e4eef7; --ink-2: #c4d5e4; --muted: #9db1c2;
  --blue-400: #75a4cc; --blue-500: #9ccffc; --blue-600: #9cd1ff;
  --control-line: #738da3; --accent-hover: #bfe1ff;
  --button-start: #436c8e; --button-end: #385d7c;
  --color-accent: #eca877; --color-accent-deco: #e39a63;
  --color-reading: #b59a92; --color-selected: #274055; --color-on-selected: #c2e2ff; --color-selected-line: #60a2d8;
  --ok: #80ac90; --ok-bg: #2a3b3b; --ok-line: #5b8e6d; --bad: #c39499; --bad-bg: #353138; --bad-line: #b07076; --color-on-status: #161f27;
  --note-cream: #2c3842;
  --color-menu-band: #131b1c; --color-menu-band-line: #2a3334;
  --color-key: #5095cd; --color-key-soft: #203140;
}
:root[data-background="sumi"][data-theme="dark"] {
  --study-background: #1d1e20; --page-1: #1d1e20; --page-2: #1d1e20; --page-3: #1d1e20;
  --surface: #252628; --surface-rgb: 37 38 40;
  --tint-1: #27282a; --tint-2: #2c2e30; --tint-3: #343639;
  --blue-50: #27282a; --blue-100: #343639; --blue-200: #4c4f52;
  --border: #3a3d3f; --line: #414346; --line-rgb: 151 160 169; --glow-rgb: 52 54 57; --shadow-rgb: 0 0 0;
  --ink: #ebedef; --ink-2: #cfd3d7; --muted: #aaaeb3;
  --blue-400: #97a0a9; --blue-500: #c0cad5; --blue-600: #c1ccd8;
  --control-line: #868a8e; --accent-hover: #d3dee9;
  --button-start: #616871; --button-end: #535a62;
  --color-accent: #eca877; --color-accent-deco: #e39a63;
  --color-reading: #b59a92; --color-selected: #46484a; --color-on-selected: #d7dfe8; --color-selected-line: #919daa;
  --ok: #80ac90; --ok-bg: #303a35; --ok-line: #5b8e6d; --bad: #c39499; --bad-bg: #3a3032; --bad-line: #b07076; --color-on-status: #1d1e20;
  --note-cream: #3a3631;
  --color-menu-band: #191a1b; --color-menu-band-line: #303132;
  --color-key: #838588; --color-key-soft: #2e2f31;
}
:root[data-background="navy"][data-theme="dark"] {
  --study-background: #0d182d; --page-1: #0d182d; --page-2: #0d182d; --page-3: #0d182d;
  --surface: #162136; --surface-rgb: 22 33 54;
  --tint-1: #182439; --tint-2: #1e293d; --tint-3: #283347;
  --blue-50: #182439; --blue-100: #283347; --blue-200: #414b5c;
  --border: #2e384b; --line: #364052; --line-rgb: 127 141 165; --glow-rgb: 40 51 71; --shadow-rgb: 0 0 0;
  --ink: #f4ecdd; --ink-2: #dfd5c0; --muted: #a8b5cb;
  --blue-400: #c1a057; --blue-500: #b9cbec; --blue-600: #bacff3;
  --control-line: #7f8da5; --accent-hover: #d2e2ff;
  --button-start: #445d8b; --button-end: #374f7c;
  --color-accent: #e6c77c; --color-accent-deco: #d7b355;
  --color-reading: #bea99d; --color-selected: #423319; --color-on-selected: #f4dca1; --color-selected-line: #caa653;
  --ok: #8dbb9c; --ok-bg: #1d2a23; --ok-line: #669a78; --bad: #cea0a6; --bad-bg: #302224; --bad-line: #b57980; --color-on-status: #0d182d;
  --color-primary: #d9b86e; --color-primary-hover: #e2c47f; --color-primary-line: #d9b86e; --color-on-primary: #0d182d;
  --note-cream: #2e3644;
  --color-menu-band: #081225; --color-menu-band-line: #212b3d;
  --color-key: #d7b355; --color-key-soft: #212935;
}