:root {color-scheme:dark;--bg:#101512;--surface:#17201b;--raised:#202b25;--line:#3e4e43;--text:#edf6ef;--muted:#b1bfb5;--accent:#80e8b7;--accent-ink:#0d2418;--complement:#edb2d1;--glow:#183d2b;--active-bg:#1c5940;--active-text:#fff;--danger:#ffacb6;--han-size:42px;--han-font:"Microsoft JhengHei","Noto Sans CJK TC",sans-serif;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.6}
* {box-sizing:border-box} body {margin:0;background:var(--bg);color:var(--text);padding-bottom:125px} button,input,textarea,select {font:inherit;color:inherit} button,a,input,select,textarea {touch-action:manipulation} button,select,.file-button {cursor:pointer} button {border:1px solid var(--line);background:var(--raised);border-radius:10px;padding:9px 14px;line-height:1.4;transition:background .12s,border-color .12s} button:hover:not(:disabled),.file-button:hover {border-color:var(--accent);background:var(--glow)} button:disabled {opacity:.4;cursor:not-allowed} button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible {outline:3px solid var(--complement);outline-offset:3px} a {color:var(--accent)} h1,h2,h3,p {margin-top:0} h1 {font-size:clamp(25px,2.3vw,35px);letter-spacing:-.035em;line-height:1.22;font-weight:620;margin-bottom:10px} h2 {font-size:24px;line-height:1.3;letter-spacing:-.025em;font-weight:580;margin-bottom:8px} h3 {font-size:15px;font-weight:620;margin-bottom:9px} p {margin-bottom:14px}.muted {color:var(--muted)} .small {font-size:12px}.micro {font-size:11px;line-height:1.6;margin-bottom:0}.accent {color:var(--accent)}.eyebrow {font-size:10px;letter-spacing:.18em;font-weight:700;color:var(--muted);margin:0 0 10px}.primary {background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:650}.primary:hover:not(:disabled) {background:var(--complement);border-color:var(--complement);color:var(--accent-ink)}.quiet {background:transparent}.text-button {border:0;background:none;color:var(--accent);padding:3px 0;font-size:12px;text-align:left}.text-button:hover:not(:disabled) {background:transparent;text-decoration:underline}.icon-button {width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:22px;flex:none}.danger {color:var(--danger)}.skip {position:fixed;top:-100px;left:12px;z-index:100;background:var(--surface);padding:10px}.skip:focus {top:10px}.topbar {height:90px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(30px,calc((100vw - 1400px)/2));gap:20px}.brand {display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;font-size:28px;letter-spacing:-.06em;font-weight:650;line-height:1.2}.brand-mark {border:1px solid var(--accent);border-radius:14px 14px 14px 3px;width:44px;height:46px;display:grid;place-items:center;color:var(--accent);font-family:serif;font-size:30px;background:var(--glow)}.brand-sub {display:block;font-size:8px;letter-spacing:.2em;color:var(--muted);font-weight:600;margin-top:5px}.header-actions {display:flex;align-items:center;gap:10px}.private-pill {font-size:11px;color:var(--muted);margin-right:14px;white-space:nowrap}.dot {display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:7px}.count {font-size:10px;border-radius:6px;background:var(--raised);padding:2px 5px;margin-left:5px}.shell {max-width:1460px;margin:auto;padding:34px 30px 0}.intro {display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;gap:20px}.intro-copy {color:var(--muted);font-size:13px;margin-bottom:0}.intro-seal {color:var(--complement);border:1px solid var(--complement);padding:7px 11px;border-radius:8px;font-size:13px;letter-spacing:.22em;line-height:1.8;transform:rotate(5deg);font-family:serif;margin:0 5px}.notice {border:1px solid var(--line);background:var(--raised);padding:10px 14px;border-radius:10px;font-size:12px;margin-bottom:20px;line-height:1.7}.notice:empty {display:none}.notice.warning {border-color:var(--complement)}.workspace {display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:24px;align-items:start}.book-panel {min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 14px 50px #00000010}.book-top {padding:28px 30px 16px;display:flex;justify-content:space-between;gap:16px;align-items:start}.book-top .eyebrow {font-size:9px}.book-top .quiet {font-size:11px;white-space:nowrap}.book-top p:last-child {margin:0}.reading-toolbar {display:flex;flex-wrap:wrap;gap:16px;padding:14px 30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--raised)}.inline-label {display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}.inline-label select {font-size:11px;min-height:34px;width:auto}.legend {display:flex;flex-wrap:wrap;gap:12px;padding:15px 30px 4px;color:var(--muted);min-height:39px;font-size:10px}.legend-item {display:flex;align-items:center;gap:5px}.legend-dot {width:7px;height:7px;border-radius:50%;background:var(--legend-color,var(--accent));display:inline-block}.reader {padding:20px 30px 40px;min-height:420px;font-size:var(--han-size);font-family:var(--han-font);font-weight:400;line-height:1.95;white-space:pre-wrap;overflow-wrap:anywhere;line-break:strict;word-break:normal}.reader[aria-busy=true] {opacity:.5}.reader .word {max-width:100%;font:inherit;display:inline;padding:0;margin:0 .035em;border:0;border-radius:.14em;background:transparent;line-height:inherit;vertical-align:baseline;color:var(--text);position:relative;white-space:normal;text-align:inherit;transition:none;box-decoration-break:clone;-webkit-box-decoration-break:clone}.reader .word:hover {background:var(--raised);color:var(--text)}.reader .word:focus-visible {outline-offset:2px;outline-width:2px}.glyph {display:inline-block;text-align:center;vertical-align:baseline;line-height:1.4;min-width:max(1em,calc(var(--annotation-length,1) * clamp(11px,calc(var(--han-size) * .25),25px) * .64));position:relative;border-bottom:2px solid transparent;margin:0 .065em .15em;padding:.56em .015em .035em;scroll-margin:80px 20px 130px}.annotation {display:block;position:absolute;top:0;left:50%;transform:translateX(-50%);font-family:ui-sans-serif,system-ui,sans-serif;font-size:clamp(11px,calc(var(--han-size) * .25),25px);font-weight:450;line-height:1.5;min-height:1.5em;color:var(--muted);white-space:nowrap;letter-spacing:0;user-select:none}.hanzi {line-height:1.4}.reader[data-annotation=none] .annotation {display:none}.reader[data-annotation=none] .glyph {padding-top:0;min-width:1em}.reader[data-annotation=tones] .annotation {font-size:clamp(15px,calc(var(--han-size) * .37),40px);color:var(--muted);min-height:1.1em;line-height:1.1}.reader[data-annotation=zhuyin] .annotation {font-family:var(--han-font)}.reader[data-annotation=zhuyin] .glyph {min-width:max(1em,calc(var(--annotation-length,1) * clamp(11px,calc(var(--han-size) * .25),25px)))}.reader[data-color=tone] .glyph {border-color:var(--tone-colour,var(--line))}.reader[data-color=level] .glyph {border-color:var(--word-level,var(--line))}.level-badge {display:inline-block;font:10px ui-sans-serif,system-ui,sans-serif;color:var(--word-level,var(--muted));vertical-align:top;margin:1em 1px 0 0;line-height:1;border:1px solid currentColor;border-radius:4px;padding:2px}.glyph.is-active {color:var(--active-text);background:var(--glow);border-radius:6px;outline:2px solid var(--accent);outline-offset:2px}.glyph.is-active .annotation {color:var(--active-text)}.glyph.is-phrase {background:var(--raised);border-radius:5px}.plain-run {font-size:.87em;color:var(--text);line-height:inherit;white-space:pre-wrap}.page-bar {display:flex;align-items:center;justify-content:space-between;padding:12px 30px;border-top:1px solid var(--line);color:var(--muted)}.page-bar button {font-size:12px}.book-bottom {border-top:1px solid var(--line);padding:13px 30px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:10px}.book-bottom .text-button {font-size:10px}kbd {font:10px ui-monospace,monospace;border:1px solid var(--line);border-radius:4px;padding:2px 4px;background:var(--raised)}.settings-panel {border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:22px}.panel-heading {display:flex;justify-content:space-between;color:var(--complement);align-items:start}.panel-heading .eyebrow {font-size:9px}.settings-panel section {border-bottom:1px solid var(--line);padding:14px 0 20px;margin-bottom:6px}.settings-panel section:first-of-type {padding-top:8px}.tint-grid {display:grid;grid-template-columns:repeat(8,1fr);gap:7px}.tint {height:25px;min-width:0;padding:0;border-radius:50%;border:3px solid var(--surface);background:var(--chip);outline:1px solid transparent}.tint:hover:not(:disabled) {background:var(--chip)}.tint[aria-pressed=true] {outline-color:var(--text)}.harmony-label {font-size:11px;display:flex;flex-direction:column;gap:2px;margin:13px 0 7px}.harmony-label .small {font-size:9px}.harmony {display:flex;gap:4px;height:7px;margin:8px 0 10px}.harmony span {flex:1;background:var(--chip);border-radius:3px}.field-label {display:block;font-size:12px;font-weight:550;margin:10px 0 7px}select,input:not([type=checkbox]):not([type=range]):not([type=file]),textarea {border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:9px 10px;min-height:40px;font-size:12px;max-width:100%}select {width:100%;text-overflow:ellipsis}option {background:var(--bg);color:var(--text)}input.full {width:100%;margin:9px 0}textarea {width:100%;resize:vertical;line-height:1.8;font-size:18px}input[type=range] {width:100%;accent-color:var(--accent);cursor:pointer}input[type=checkbox] {accent-color:var(--accent);width:16px;height:16px;flex:none}.check {display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);margin:12px 0 0;cursor:pointer}.range-label {display:flex;justify-content:space-between;align-items:center;font-size:11px;margin:14px 0 4px;color:var(--muted)}.settings-panel .text-button {font-size:10px;margin-top:9px}.word-pocket {display:flex;align-items:center;justify-content:space-between;gap:8px}.word-pocket h3 {font-size:13px;margin-bottom:3px}.pocket-button {padding:7px 11px;color:var(--accent);display:flex;flex-direction:column;align-items:center;min-width:80px}.pocket-button>span:first-child {font-size:26px;font-weight:400;line-height:1.3}.pocket-button .micro {font-size:9px}.site-footer {display:flex;justify-content:space-between;color:var(--muted);font-size:10px;padding:25px 4px}.site-footer .text-button {font-size:10px}.dock {position:fixed;z-index:15;left:50%;transform:translateX(-50%);bottom:max(20px,env(safe-area-inset-bottom));width:min(700px,calc(100% - 32px));height:70px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:18px;display:flex;gap:9px;align-items:center;box-shadow:0 8px 40px #0007;font-size:13px}.dock .play {height:46px;min-width:104px;display:flex;align-items:center;gap:9px;justify-content:center}.dock .icon-button {font-size:14px;width:32px}.dock-progress {flex:1;min-width:0;padding:0 8px}.dock-progress span {font-size:10px;color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:6px}progress {appearance:none;border:0;border-radius:20px;width:100%;height:3px;background:var(--line);display:block}progress::-webkit-progress-bar {background:var(--line);border-radius:20px}progress::-webkit-progress-value {background:var(--accent);border-radius:20px}progress::-moz-progress-bar {background:var(--accent);border-radius:20px}.zoom {display:flex;align-items:center;gap:3px;flex:0 0 147px;border-left:1px solid var(--line);padding-left:10px;height:44px}.zoom button {width:37px;height:39px;padding:0;font-size:20px;flex:none}.zoom output {width:48px;flex:none;text-align:center;font:12px ui-monospace,monospace;font-variant-numeric:tabular-nums}.toast {position:fixed;z-index:100;bottom:105px;left:50%;transform:translateX(-50%);max-width:min(580px,calc(100vw - 30px));width:max-content;padding:12px 20px;background:var(--raised);color:var(--text);border:1px solid var(--accent);border-radius:12px;box-shadow:0 5px 30px #0006;font-size:13px}dialog {width:min(660px,calc(100vw - 28px));max-height:calc(100dvh - 48px);overflow:auto;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--text);padding:26px;box-shadow:0 30px 120px #0009;font-size:14px}dialog::backdrop {background:#050c0bbb;backdrop-filter:blur(4px)}.dialog-top {display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.dialog-top h2 {margin:0}.dialog-top .eyebrow {margin:0}.close-dialog {border:0;font-size:28px;background:transparent}.word-dialog {width:min(500px,calc(100vw - 28px))}.word-title {font-family:var(--han-font);font-size:48px;letter-spacing:.05em;line-height:1.4;margin:0}.word-reading {font-size:20px;color:var(--accent);margin:5px 0 16px}.word-forms {font-family:var(--han-font);font-size:18px;color:var(--muted)}.definition {border-top:1px solid var(--line);padding:12px 0}.definition p {margin:4px 0}.definition .reading {color:var(--complement);font-size:13px}.definition ol {padding-left:22px;margin:4px 0}.word-actions {display:flex;flex-wrap:wrap;gap:9px;margin:18px 0}.character-links {display:flex;flex-wrap:wrap;gap:7px}.character-links button {font-family:var(--han-font);font-size:25px;padding:5px 12px}.word-meta {font-size:11px;color:var(--muted);margin:8px 0 12px}.correction {border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:20px}.correction summary {cursor:pointer;font-size:12px}.correction .row {display:flex;gap:8px;align-items:center}.correction input {flex:1;min-width:0}.file-button {display:inline-flex;position:relative;align-items:center;justify-content:center;border:1px dashed var(--line);border-radius:10px;padding:11px 15px;font-size:12px;overflow:hidden;color:var(--accent)}.file-button input {position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.file-button:focus-within {outline:3px solid var(--complement);outline-offset:3px}.upload-line {display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;margin:12px 0}.tool-grid {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}.tool-grid button {font-size:12px}.error {color:var(--danger);font-size:13px}.item-list {margin:20px 0}.item-row {display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 0;border-bottom:1px solid var(--line)}.item-row .item-open {text-align:left;border:0;background:none;padding:5px 0;min-width:0;flex:1}.item-title {font-size:17px;display:block;overflow-wrap:anywhere}.item-detail {font-size:11px;display:block;color:var(--muted)}.item-row .delete {font-size:11px;color:var(--danger)}hr {border:0;border-top:1px solid var(--line);margin:24px 0}[hidden] {display:none!important}
@media (max-width:1100px) {.workspace {grid-template-columns:minmax(0,1fr) 265px;gap:18px}.settings-panel {padding:18px}.book-top,.reading-toolbar,.page-bar {padding-left:22px;padding-right:22px}.reader {padding-left:22px;padding-right:22px}.private-pill {display:none}.tint-grid {gap:5px}.topbar {padding:0 24px}.shell {padding:28px 24px 0}.intro-seal {display:none}}
@media (max-width:820px) {.workspace {grid-template-columns:1fr}.settings-panel {display:grid;grid-template-columns:1fr 1fr;gap:8px 25px}.settings-panel>.panel-heading,.settings-panel>.text-button {grid-column:1/-1}.book-panel {border-radius:16px}.reader {min-height:360px}.intro h1 {font-size:28px}.intro-copy {font-size:12px}}
@media (max-width:560px) {.topbar {height:74px;padding:0 14px;gap:10px}.brand {font-size:23px;gap:8px}.brand-mark {width:35px;height:38px;font-size:25px;border-radius:10px 10px 10px 2px}.brand-sub {font-size:6px}.header-actions {gap:6px}.header-actions>.quiet {font-size:11px;padding:8px}.header-actions>.primary {font-size:11px;padding:9px}.header-actions .icon-button {width:31px;height:35px}.count {display:none}.shell {padding:23px 12px 0}.intro {margin-bottom:22px}.intro h1 {font-size:25px}.intro .eyebrow {font-size:8px}.notice {font-size:11px}.book-top {padding:22px 18px 16px}.book-top h2 {font-size:21px}.book-top .quiet {font-size:10px;padding:7px}.reading-toolbar {padding:12px 18px;gap:10px;display:grid;grid-template-columns:1fr}.reading-toolbar .inline-label {justify-content:space-between}.legend {padding:13px 18px 3px;gap:9px}.reader {padding:18px 17px 30px}.book-bottom {padding:12px 18px;flex-direction:column;align-items:start}.settings-panel {grid-template-columns:1fr;padding:22px}.dock {width:calc(100% - 20px);bottom:12px;padding:9px;gap:5px;border-radius:14px}.dock-progress {display:none}.dock .play {flex:1;min-width:98px}.zoom {flex-basis:147px;margin-left:auto}.dock .icon-button {width:28px}.site-footer {font-size:9px}.site-footer>span:nth-child(2) {display:none}dialog {padding:21px;max-height:calc(100dvh - 26px)}.tool-grid {grid-template-columns:1fr}.word-title {font-size:42px}.page-bar {padding:12px 18px}.toast {bottom:94px}.reader .word {margin:0 .01em}.glyph {margin-left:.015em;margin-right:.015em}.annotation {max-width:none}}
@media (prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* 1.1: independent pronunciation sizing. Each hint participates in layout, so
   larger pinyin gets real width/height rather than overlapping a neighbour. */
:root { --pinyin-size:22px }
.reader { line-height:1.65 }
.reader .glyph { display:inline-flex;flex-direction:column;align-items:center;vertical-align:bottom;min-width:1em;max-width:calc(100% - .13em);padding:0 .015em .035em;margin-bottom:.22em }
.reader .annotation { display:block;position:static;transform:none;max-width:100%;font-size:var(--pinyin-size);line-height:1.55;min-height:1.55em;white-space:normal;overflow-wrap:anywhere;word-break:normal;flex:none }
.reader[data-annotation=tones] .annotation { font-size:var(--pinyin-size);line-height:1.55;min-height:1.55em }
.reader[data-annotation=zhuyin] .glyph { min-width:1em }
.reader[data-annotation=none] .annotation { display:none }
.reader[data-annotation=none] .glyph { min-width:1em }
.script-note { padding:10px 30px 0;margin-bottom:0;line-height:1.6 }
body { padding-bottom:160px }
.dock { width:min(950px,calc(100% - 32px));height:90px;display:grid;grid-template-columns:144px minmax(20px,1fr) 142px 142px 108px;gap:12px;padding:12px }
.playback-controls { display:flex;align-items:center;gap:6px;min-width:0 }
.dock .play { min-width:100px;width:100px;flex:none }
.dock .icon-button { width:32px;height:42px;flex:none }
.size-control { width:142px;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0 }
.size-label { font:11px/1.3 ui-sans-serif,system-ui,sans-serif;color:var(--muted);white-space:nowrap }
.dock .zoom { display:grid;grid-template-columns:38px 54px 38px;gap:3px;flex:none;width:142px;align-items:center;justify-content:center;height:40px;padding:0 }
.dock .zoom button { width:38px;height:38px;min-height:38px;padding:0;font-size:22px;line-height:1;display:grid;place-items:center }
.dock .zoom output { width:54px;min-width:54px;text-align:center;font:12px/1.2 ui-sans-serif,system-ui,sans-serif;font-variant-numeric:tabular-nums }
.dock .pinyin-toggle { width:108px;min-width:108px;height:44px;padding:5px;font-size:12px;line-height:1.3 }
.dock .dock-progress { padding:0;min-width:0 }
.pdf-options { border:1px solid var(--line);background:var(--raised);border-radius:12px;padding:16px;margin-top:14px }
.pdf-fields { display:grid;grid-template-columns:1fr 1fr;gap:12px }
.pdf-fields input,.pdf-fields select { display:block;width:100%;margin-top:7px }
.pdf-options details { margin:8px 0 16px;font-size:13px }
.pdf-options .row { margin-top:12px;display:flex;flex-wrap:wrap;gap:10px }
.pdf-options progress { height:6px;margin:10px 0 }
#pdf-status { margin:14px 0 8px }
#import-count { text-align:right;font-variant-numeric:tabular-nums }
#start-reading { width:100%;margin-top:8px;min-height:48px }
#text-input,#original-text { font:20px/1.8 var(--han-font);min-height:180px }
[hidden] { display:none !important }
@media(max-width:760px) {
  body { padding-bottom:185px }
  .dock { grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:60px 60px;gap:4px 12px;width:min(450px,calc(100% - 24px));height:148px;bottom:max(12px,env(safe-area-inset-bottom));padding:10px 12px }
  .dock .dock-progress { display:none }
  .playback-controls { grid-column:1;grid-row:1;justify-content:center }
  .dock .play { width:88px;min-width:88px;padding:8px }
  .character-size { grid-column:2;grid-row:1 }
  .pinyin-size { grid-column:2;grid-row:2 }
  .dock .pinyin-toggle { grid-column:1;grid-row:2;justify-self:center;width:126px;min-width:0 }
  .size-control { justify-self:center;width:130px }
  .dock .zoom { width:130px;grid-template-columns:34px 50px 34px;gap:3px;height:36px }
  .dock .zoom button { width:34px;height:34px;min-height:34px }
  .dock .zoom output { width:50px;min-width:50px }
  .script-note { padding-left:18px;padding-right:18px }
  .toast { bottom:178px }
}
@media(max-width:400px) {
  .dock { gap:4px 6px;padding-left:8px;padding-right:8px }
  .pdf-fields { grid-template-columns:1fr }
}
@media print { .dock,.script-note { display:none } body { padding-bottom:0 } }
/* Never break a pinyin syllable merely to fit a narrower Hanzi. At extreme
   magnification a very narrow reader may scroll locally, without moving its dock. */
.reader { overflow-x:auto }
.reader .glyph { width:max-content;max-width:none;min-width:1em }
.reader .annotation { max-width:none;white-space:nowrap;overflow-wrap:normal }
.reader[data-annotation=none] .glyph { width:auto;min-width:1em }
/* v1.2: Two orthogonal colour channels. Never repurpose the underline for tone. */
.reader[data-color=tone] .glyph { border-color:transparent }
.reader[data-levels]:not([data-levels=none]) .glyph { border-bottom:3px solid var(--word-level,var(--line)) }
.reader[data-levels=none] .glyph { border-bottom-color:transparent }
.reader[data-color=tone] .hanzi { color:var(--tone-colour,var(--text)) }
.reader[data-color=none] .hanzi { color:var(--text) }
.reader .glyph[data-tone="5"] .annotation { color:var(--tone-5) }
.reader .glyph.is-active,.reader .glyph.is-phrase { background:var(--surface);box-shadow:0 0 0 2px var(--accent);border-radius:6px }
.reader .glyph.is-phrase { box-shadow:0 0 0 1px var(--line) }
/* A ring marks narration, leaving the study tone and level colours unchanged. */
.reader .glyph.is-active .annotation { color:var(--muted) }
.reader .glyph.is-active[data-tone="5"] .annotation { color:var(--tone-5) }
.legend { display:block;padding-top:12px;padding-bottom:8px }
.legend-group { display:flex;flex-wrap:wrap;gap:7px 14px;align-items:center;margin:6px 0 }
.legend-heading { font-size:9px;letter-spacing:.10em;color:var(--muted);width:100% }
.legend-underline { display:inline-block;width:16px;height:3px;background:var(--legend-color);border-radius:2px }
.colour-tip { margin-top:13px }
.full-button { width:100%;margin-top:10px }
.font-live-preview { font:30px/1.65 var(--han-font);background:var(--raised);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:12px 0 8px;overflow-wrap:anywhere }
.font-live-preview[data-state=missing],.font-live-preview[data-state=error] { border-style:dashed }
.fonts-dialog { width:min(890px,calc(100vw - 28px));max-width:890px }
.font-gallery { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px }
.font-card { display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;gap:6px;min-width:0;padding:18px;border-radius:16px;background:var(--surface);border:1px solid var(--line);transition:background .12s,border-color .12s }
.font-card[aria-pressed=true] { border:2px solid var(--accent);padding:17px;background:var(--glow) }
.font-card[aria-pressed=true] .font-card-label:after { content:' ✓';color:var(--accent) }
.font-card-label { font-size:14px;font-weight:650 }
.font-card-region { font-size:11px;color:var(--complement) }
.font-card-preview { display:block;font-size:30px;line-height:1.6;min-height:100px;word-break:normal;overflow-wrap:anywhere;font-weight:400;font-synthesis:none }
.font-card-note { color:var(--muted);font-size:12px;line-height:1.6 }
.font-card-status { font-size:11px;color:var(--muted);margin-top:auto;padding-top:8px }
.font-card[data-state=missing],.font-card[data-state=error] { border-style:dashed }
.level-inventory { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 18px }
.level-inventory p { border:1px solid var(--line);border-radius:8px;padding:10px }
@media(max-width:600px){.font-gallery,.level-inventory { grid-template-columns:1fr }.font-card-preview { min-height:0;font-size:32px }}
@media(forced-colors:active){.reader[data-color=tone] .hanzi { color:CanvasText }.reader .glyph.is-active { outline:2px solid Highlight;box-shadow:none }}

/* Practice Story: fixed controls, two independent study channels, large Chinese targets. */
.practice-dialog {width:min(1120px,calc(100vw - 28px));max-width:1120px;padding:clamp(18px,3vw,32px);}
.practice-dialog h2 {font-size:clamp(25px,3vw,36px);margin:.25rem 0;}
.practice-layout {display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;}
.practice-layout section {min-width:0;}
.practice-dialog h3 {margin:1rem 0 .8rem;}
.practice-dialog label {display:block;margin:.6rem 0 .3rem;}
.practice-dialog label.check {display:flex;align-items:flex-start;gap:10px;}
.practice-dialog textarea {display:block;width:100%;resize:vertical;min-height:100px;font-family:var(--han-font);font-size:22px;line-height:1.8;}
.practice-dialog select,.practice-dialog input[type=password] {max-width:100%;width:100%;min-height:42px;}
.practice-dialog input[type=range] {width:100%;margin:8px 0;}
.practice-dialog output {float:right;min-width:4ch;text-align:right;color:var(--accent);}
.practice-row {display:flex;gap:12px;align-items:end;flex-wrap:wrap;}
.practice-row>label {flex:1;min-width:145px;}
.practice-row>button {flex:0 0 auto;min-height:42px;margin-bottom:0;}
.practice-scale,.practice-list-head {display:flex;justify-content:space-between;gap:12px;align-items:center;}
.practice-scale {font-size:13px;opacity:.75;margin-top:-4px;}
.practice-candidates {max-height:288px;overflow:auto;border:1px solid var(--line);border-radius:14px;padding:8px;margin:10px 0 16px;}
.practice-word {display:flex;gap:6px;align-items:center;padding:8px 3px;border-bottom:1px solid var(--line);min-width:0;}
.practice-word:last-child {border-bottom:0;}
.practice-word-pick {display:flex!important;align-items:center;gap:8px;flex:1;min-width:0;margin:0!important;}
.practice-word-pick input {flex-shrink:0;width:20px;height:20px;}
.practice-word-text {font-family:var(--han-font);font-size:clamp(24px,var(--han-size),36px);line-height:1.35;overflow-wrap:anywhere;}
.practice-word-detail {display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;}
.practice-word-detail .micro {font-size:12px;line-height:1.4;}
.practice-reading {font-size:18px;}
.practice-word>select {width:100px;flex:0 0 100px;font-size:12px;padding:4px;}
.practice-connect,.practice-result {margin-top:20px;padding-top:10px;border-top:1px solid var(--line);}
.practice-history {display:grid;gap:8px;margin-top:10px;}
.practice-history>button {text-align:left;white-space:normal;}
.practice-table-scroll {overflow-x:auto;}
.practice-dialog table {border-collapse:collapse;width:100%;margin-top:12px;}
.practice-dialog td,.practice-dialog th {padding:8px;text-align:left;border-bottom:1px solid var(--line);}
.practice-dialog td:first-child {font-family:var(--han-font);font-size:26px;}
.practice-dialog #story-preview {font-size:28px;min-height:210px;}
.practice-dialog #story-status {white-space:normal;overflow-wrap:anywhere;}
.practice-dialog [hidden] {display:none!important;}
@media(max-width:760px){.practice-layout{grid-template-columns:1fr;gap:4px;}.practice-dialog{padding:18px;}.practice-word-text{font-size:28px;}.practice-word{flex-wrap:wrap;}.practice-word-detail{min-width:55px;}.practice-word>select{width:92px;flex-basis:92px;}.practice-reading{font-size:16px;}.book-top{flex-wrap:wrap;}.practice-row{gap:8px;}}

.practice-dialog .dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.practice-dialog .dialog-head .icon-button{flex:0 0 40px}.practice-dialog .dialog-head h2{margin-bottom:8px}

/* ToneWick 1.4: the pointer is above the word; level underlines remain untouched. */
.reader .word.is-speaking {position:relative;background:var(--glow);border-radius:10px;outline:2px solid var(--accent);outline-offset:4px;}
.reader[data-guide=strong] .word.is-speaking {outline-width:3px;box-shadow:0 0 0 7px var(--glow);}
.reader[data-guide=strong] .word.is-speaking::before {content:"";position:absolute;top:-15px;left:50%;margin-left:-6px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--accent);pointer-events:none;}
.reader .word.is-speaking .glyph {background:transparent;}
.reader .word.is-speaking .glyph.is-active {background:transparent;box-shadow:none;outline:none;}
.reader .hanzi {display:inline-block;transform-origin:center;backface-visibility:hidden;}
.reader .annotation {z-index:1;}
.guide-panel select {width:100%;}
.guide-panel input[type=range] {width:100%;accent-color:var(--accent);}
.experiment-badge {font-size:9px;letter-spacing:.08em;border:1px solid var(--line);border-radius:6px;padding:2px 4px;color:var(--complement);}
.motion-demo {display:flex;justify-content:space-between;gap:7px;padding:22px 10px 18px;font-family:var(--han-font);font-size:34px;}
.motion-demo span {display:inline-block;}
.motion-demo [data-tone="1"] {color:var(--tone-1);}.motion-demo [data-tone="2"] {color:var(--tone-2);}.motion-demo [data-tone="3"] {color:var(--tone-3);}.motion-demo [data-tone="4"] {color:var(--tone-4);}.motion-demo [data-tone="5"] {color:var(--tone-5);}
#motion-value {float:right;font-size:12px;color:var(--muted);}
.neural-text {white-space:pre-wrap;max-height:220px;overflow:auto;font-family:var(--han-font);font-size:21px;padding:12px;background:var(--raised);border-radius:8px;}
#neural-dialog {max-width:640px;}#neural-dialog select {width:100%;}
@media(prefers-reduced-motion:reduce){.reader .hanzi,.motion-demo span {transform:none!important;transition:none!important;animation:none!important;}}
@media(forced-colors:active){.reader .word.is-speaking {outline:3px solid Highlight;box-shadow:none;}.reader .word.is-speaking::before {border-top-color:Highlight;}}

/* ToneWick launch: keep learning ink readable and stable in every room. */
:root { font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI","Noto Sans TC","Noto Sans SC",sans-serif }
.brand-mark,.intro-seal { font-family:var(--han-font) }
.reader .word:hover, .reader .word:focus-visible,
.reader .glyph.is-active, .reader .glyph.is-phrase,
.reader .word.is-reading, .reader .word.is-speaking,
.reader .level-badge { background:var(--surface) }
.motion-demo { background:var(--surface) }
html { scrollbar-gutter:stable }
/* The dock belongs to the viewport; only the reader receives font-size variables. */
.dock { font-size:15px; contain:layout style }
.dock .zoom button { flex:0 0 40px;width:40px;height:40px }
@media(max-width:420px) {
  .topbar { height:auto;min-height:112px;flex-wrap:wrap;gap:12px;padding:14px 16px }
  .header-actions { width:100%;justify-content:space-between;gap:8px }
  .header-actions .icon-button { width:40px;height:40px;flex:0 0 40px }
}

select,option,.size-label { font-family:Inter,ui-sans-serif,system-ui,"Noto Sans TC","Noto Sans SC",sans-serif }