/* Reading surfaces share a palette; the welcome scene and printed certificate keep their own styles. */
@media screen {
  :root {
    color-scheme: light;
    --ink:#25382e; --muted:#4b5f53; --canvas:#f4f1e8; --paper:#fffdf6; --surface:#eeeedf; --control:#fffef9; --rail:#e6ecdc;
    --leaf:#28543c; --action:#28543c; --on-action:#ffffff; --gold:#71521b; --violet:#654480; --line:#73826f; --lavender:#eee7f5; --plum-ink:#594071;
    --success:#dfedd8; --success-line:#315b32; --warning:#fff0ce; --warning-ink:#674e1f; --warning-line:#876520; --wrong:#eee9dd; --wrong-ink:#544937;
    --focus:#704393; --track:#b5c1aa;
    font-size:106.25%; background:var(--canvas); color:var(--ink);
  }
  :root[data-reading-size=larger] { font-size:132.8125%; }
  :root[data-reading-size=largest] { font-size:159.375%; }
  :root[data-reading-theme=dark] {
    color-scheme:dark;
    --ink:#f1f4eb; --muted:#c2ccbf; --canvas:#14221b; --paper:#1c2c22; --surface:#293a2e; --control:#23372a; --rail:#233227;
    --leaf:#bde2b0; --action:#b6d9a7; --on-action:#132213; --gold:#f0d493; --violet:#d9bfee; --line:#91a48b; --lavender:#3d3149; --plum-ink:#e2c8f6;
    --success:#294630; --success-line:#b3d0a4; --warning:#473d24; --warning-ink:#f0e1c3; --warning-line:#eed49b; --wrong:#3d392a; --wrong-ink:#f0e1c3;
    --focus:#e6c4ff; --track:#64735d;
  }
  @media (prefers-color-scheme:dark) {
    :root:not([data-reading-theme]) { color-scheme:dark; --ink:#f1f4eb; --muted:#c2ccbf; --canvas:#14221b; --paper:#1c2c22; --surface:#293a2e; --control:#23372a; --rail:#233227; --leaf:#bde2b0; --action:#b6d9a7; --on-action:#132213; --gold:#f0d493; --violet:#d9bfee; --line:#91a48b; --lavender:#3d3149; --plum-ink:#e2c8f6; --success:#294630; --success-line:#b3d0a4; --warning:#473d24; --warning-ink:#f0e1c3; --warning-line:#eed49b; --wrong:#3d392a; --wrong-ink:#f0e1c3; --focus:#e6c4ff; --track:#64735d; }
  }
  :root[data-reading-contrast=strong][data-reading-theme=light] {
    --ink:#000; --muted:#202020; --canvas:#fff; --paper:#fff; --surface:#fff; --control:#fff; --rail:#fff;
    --leaf:#123a24; --action:#123a24; --gold:#493107; --violet:#462455; --line:#111; --lavender:#fff; --plum-ink:#462455;
    --success:#fff; --success-line:#123a24; --warning:#fff; --warning-ink:#493107; --warning-line:#493107; --wrong:#fff; --wrong-ink:#202020; --focus:#462455;
  }
  :root[data-reading-contrast=strong][data-reading-theme=dark] {
    --ink:#fff; --muted:#ededed; --canvas:#000; --paper:#000; --surface:#000; --control:#000; --rail:#000;
    --leaf:#d5ffb9; --action:#d5ffb9; --gold:#ffe6a6; --violet:#ecd4ff; --line:#fff; --lavender:#000; --plum-ink:#ecd4ff;
    --success:#000; --success-line:#d5ffb9; --warning:#000; --warning-ink:#ffe6a6; --warning-line:#ffe6a6; --wrong:#000; --wrong-ink:#ededed; --focus:#ffe6a6;
  }
  body { background:var(--canvas); overflow-wrap:anywhere; }
  :where(button,input,select,textarea) { max-width:100%; }
  :where(button,a,input,select,textarea,summary):focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
  :lang(th) { letter-spacing:normal; word-spacing:normal; }
  :root[data-reading-spacing=roomy] body { line-height:1.85; }
  :root[data-reading-spacing=roomy] :is(p,li,label,legend,button,summary,.quote-card,.definition,.feedback,.start-card) { line-height:1.85; }
  :root[data-reading-spacing=roomy] p { margin-block-end:1.2em; }
  :root[data-reading-spacing=roomy] :is(p,li,label,legend,button,summary):lang(en) { letter-spacing:.035em; word-spacing:.1em; }
  :root[data-reading-spacing=roomy] :lang(th) { letter-spacing:normal; word-spacing:normal; }
  .reading-comfort { margin:0 0 1.25rem; border:1px solid var(--line); border-radius:1rem; background:var(--paper); color:var(--ink); font-size:.9rem; }
  .reading-comfort summary { cursor:pointer; padding:.75rem 1rem; min-height:44px; font-weight:650; }
  .reading-comfort[open] summary { border-bottom:1px solid var(--line); }
  .reading-inner { padding:1rem; }
  .reading-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1rem 0; }
  .reading-fields label { min-width:0; display:flex; flex-direction:column; gap:.4rem; margin:0; font-weight:600; }
  .reading-fields select,.reading-reset { font:inherit; min-height:44px; border:1px solid var(--line); background:var(--control); color:var(--ink); padding:.6rem .7rem; border-radius:.6rem; }
  .reading-fields select { width:100%; }
  .reading-status { font-size:.9em; color:var(--muted); margin-top:.75rem; min-height:1.7em; }
  .reading-reset { cursor:pointer; white-space:normal; overflow-wrap:anywhere; }
  :root[data-reading-size]:not([data-reading-size=default]) .stage-inner { grid-template-columns:1fr; }
  :root[data-reading-size]:not([data-reading-size=default]) .character-rail { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
  :root[data-reading-size]:not([data-reading-size=default]) .character-card { display:flex; align-items:center; gap:1rem; text-align:start; min-width:0; }
  :root[data-reading-size]:not([data-reading-size=default]) .character-mark { width:4rem; height:4rem; margin:0; flex-shrink:0; }
  :root[data-reading-size]:not([data-reading-size=default]) .word-rack { margin:0; }
  .character-card>div { min-width:0; }
  .progress-wrap { flex-wrap:wrap; }
  .progress-track { min-width:4rem; }
  @media(max-width:38rem) { .reading-fields { grid-template-columns:1fr; } .character-rail { grid-template-columns:1fr; } .word-rack { justify-content:flex-start; } }
}
@media print { [data-reading-comfort] { display:none!important; } }
@media (forced-colors:active) { .reading-comfort,.reading-fields select,.reading-reset { border-color:ButtonText; } }