/* Reading pages and the Word Board: dark (default) or dimmed paper, switched from the top bar.
   Only the colour variables change, so the pages keep their layout. */
html[data-rt="dark"]{color-scheme:dark;
  --bg:#06110C; --soft:#0F2219; --card:#0B1A13; --fg:#DCEDE4; --ink:#E4F2EA; --muted:#86A595; --line:#173327;
  --now:#4FE0A0; --now-soft:#12352A; --past:#2E6B52;
  --twice:#FF9C70; --stop:#82B0FF; --stretch:#C59EFF; --silent:#4D675B; --wrong:#FF8A80; --link:#E5B85C}
html[data-rt="dim"]{color-scheme:light;
  --bg:#E6ECE9; --soft:#D9E3DE; --card:#DFE7E3; --fg:#2B4440; --ink:#2F4C45; --muted:#6B7F79; --line:#CDD9D3;
  --now:#13875F; --now-soft:#CFE5DA; --past:#88B6A2;
  --twice:#D06C43; --stop:#3F72C9; --stretch:#8957C4; --silent:#A3B2AD; --wrong:#D0605A; --link:#B2841F}
html[data-rt="dark"] body{background:radial-gradient(120% 60% at 50% -10%,#0B2519 0%,#06110C 55%) fixed}
html[data-rt="dark"] .ctx-text .c:not(.cur):not(.good):not(.review):not(.hid){color:#5E7A6D}
html[data-rt="dim"] .ctx-text .c:not(.cur):not(.good):not(.review):not(.hid){color:#859892}
html[data-rt="dark"] .m:not(.twice):not(.stop):not(.stretch):not(.silent):not(.on){background:#3B5247}
html[data-rt="dim"] .m:not(.twice):not(.stop):not(.stretch):not(.silent):not(.on){background:#B4C1BC}
html[data-rt="dark"] .word.wrong,html[data-rt="dark"] .mag.bad{background:rgba(255,138,128,.14)}
html[data-rt="dim"] .word.wrong,html[data-rt="dim"] .mag.bad{background:#F0DAD6}
/* text on the green buttons: dark on the bright green of the dark theme */
html[data-rt="dark"] .main,html[data-rt="dark"] .playbtn,html[data-rt="dark"] .btn2.go,html[data-rt="dark"] .split .b.go,html[data-rt="dark"] .testlink,
html[data-rt="dark"] .bar button.go,html[data-rt="dark"] .hear.playing,html[data-rt="dark"] .tick{color:#04140C}
html[data-rt="dark"] .g.on{text-shadow:0 0 .2em rgba(79,224,160,.55)}
.rtbtn{all:unset;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;border-radius:8px;color:var(--now);flex:none}
.rtbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rtbtn:focus-visible{outline:2px solid var(--now)}
/* the three ways to read, side by side and named: Read, Fade, Recite */
.rtbtn.mode{width:auto;padding:0 10px;gap:6px;display:inline-flex;align-items:center;font:600 .82rem/1 Manrope,system-ui,sans-serif;color:var(--muted)}
.rtbtn.mode[aria-current]{color:var(--now)}
.rtbtn.mode svg{width:18px;height:18px}
@media (max-width:720px){.rtbtn.mode .rtl{display:none}.rtbtn.mode{width:36px;padding:0;justify-content:center}}