:root{
  --paper:#fbf9f5;--card:#fff;--card-2:#fffefb;--ink:#2e2a25;--text-2:#4a433b;--muted:#6b6258;--line:#ece7df;--soft:#f3efe8;
  --red:#b5302a;--red-d:#8f241f;--red-t:#fdf0ee;
  --green:#2f6b47;--green-d:#1f4a31;--green-t:#ebf4ee;
  --gold:#6e5112;--gold-t:#faf2df;
  --blue:#1d3f8a;--blue-t:#eef4fe;
  --tone1:#c2281f;--tone2:#15803d;--tone3:#1d4ed8;--tone4:#7e22ce;
  --r-s:12px;--r-m:16px;--r-l:22px;--r-xl:24px;
  /* design-canvas colours with no older token: quiz selected, gold/green tiles, lesson glyph, writing-grid guides */
  --orange:#7a4510;--orange-t:#fde9d4;--sel:#fffcf7;--gold-s:#fcf7ec;--green-s:#e8f5e9;--brown:#3d2a12;--wg-frame:#e9b9b3;--wg-cross:#f0cfca;--wg-diag:#f5dfdb;
  --on-ink:#fff;--on-red:#fff;--shadow:15,12,8;--scrim:0,0,0;--stroke-out:#ddd5c8;--stroke-ghost:#e4dccf;--stroke-rad:#b8892e;--cs:1;--pad:20px;--gap:44px;
  --font-ui:'Outfit',system-ui,sans-serif;--font-zh:'Noto Serif SC',serif;
}
@media (min-width:761px){:root{--pad:40px}}

/* Dark theme (E1). Basic palette only; full polish deferred to beta. Contrast of text on --paper/--card >= 4.5:1. */
:root[data-theme=dark]{
  --paper:#14110d;--card:#1d1914;--card-2:#221d17;--ink:#f4efe7;--text-2:#d6cdc0;--muted:#aca295;--line:#37312a;--soft:#2a251e;--on-ink:#14110d;--on-red:#14110d;--shadow:0,0,0;--stroke-out:#4a4237;--stroke-ghost:#4a4237;--stroke-rad:#e6bd5c;
  --red:#e8736c;--red-d:#ffb4ae;--red-t:#3b1f1d;
  --green:#6fcf97;--green-d:#a4e3bc;--green-t:#1c3025;
  --gold:#e6bd5c;--gold-t:#352b10;
  --blue:#93b4ff;--blue-t:#1b2639;
  --tone1:#ff7a70;--tone2:#4ade80;--tone3:#86a8ff;--tone4:#c995ff;
  --orange:#f0bd8a;--orange-t:#403121;--sel:#24211e;--gold-s:#3d3524;--green-s:#2a372b;--brown:#e1c199;--wg-frame:#d88379;--wg-cross:#3a2927;--wg-diag:#3a2a27;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root[data-theme=system]{
    --paper:#14110d;--card:#1d1914;--card-2:#221d17;--ink:#f4efe7;--text-2:#d6cdc0;--muted:#aca295;--line:#37312a;--soft:#2a251e;--on-ink:#14110d;--on-red:#14110d;--shadow:0,0,0;--stroke-out:#4a4237;--stroke-ghost:#4a4237;--stroke-rad:#e6bd5c;
    --red:#e8736c;--red-d:#ffb4ae;--red-t:#3b1f1d;
    --green:#6fcf97;--green-d:#a4e3bc;--green-t:#1c3025;
    --gold:#e6bd5c;--gold-t:#352b10;
    --blue:#93b4ff;--blue-t:#1b2639;
    --tone1:#ff7a70;--tone2:#4ade80;--tone3:#86a8ff;--tone4:#c995ff;
  --orange:#f0bd8a;--orange-t:#403121;--sel:#24211e;--gold-s:#3d3524;--green-s:#2a372b;--brown:#e1c199;--wg-frame:#d88379;--wg-cross:#3a2927;--wg-diag:#3a2a27;
    color-scheme:dark;
  }
}

/* Display settings applied by apply-settings.js */
:root[data-char-size=sm]{--cs:.85}:root[data-char-size=lg]{--cs:1.25}
:root[data-pinyin=hide] :is(.ct-p,.wr-py,.vocab-pinyin,ruby rt){display:none}
:root[data-pinyin-pos=below] ruby{ruby-position:under}
:root[data-tone-colors=off] :is(.tone-1,.tone-2,.tone-3,.tone-4,[class*=tone-]){color:inherit}
:root[data-tone-colors=off] ruby rt *{color:inherit!important}