/* All six appearances share semantic colors; mobile keeps child-friendly type sizes. */
:root {
  color-scheme: light;
  --page:#f5f7f2; --paper:#fff; --ink:#283d32; --body:#42534a; --muted:#66766c;
  --accent:#386b51; --accent-hover:#29553e; --on-accent:#fff;
  --surface:#edf3ec; --surface-strong:#deebdd; --accent-line:#b5ceb8; --line:#dfe7de;
  --shadow:0 12px 40px #293f2d07; --backdrop:#213b2c66;
  --warm:#805b2d; --warm-soft:#fff5df; --warm-line:#e2c38a; --focus:#b37b35;
  --green:var(--accent); --green-dark:var(--accent-hover); --mint:var(--surface); --mint-line:var(--accent-line);
  --orange:var(--warm); --orange-soft:var(--warm-soft); --radius:24px;
  --art-ink:#40584d; --art-line:#6b8577; --art-paper:#fffdf6;
  --art-leaf:#739974; --art-leaf-soft:#dce9cf; --art-blue:#7b9eae; --art-blue-soft:#dcebf0;
  --art-peach:#d59c7c; --art-peach-soft:#f5ddce; --art-yellow:#e4c378; --art-red:#d77970;
  font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",system-ui,sans-serif;
  font-synthesis:none; -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
html[data-palette="ocean"] {
  --page:#f2f6f9; --paper:#fff; --ink:#293f51; --body:#405569; --muted:#61768a;
  --accent:#356b93; --accent-hover:#285578; --on-accent:#fff;
  --surface:#eaf2f8; --surface-strong:#dae9f3; --accent-line:#abc8dd; --line:#dce6ee;
  --shadow:0 12px 40px #293e5507; --backdrop:#233b5266;
}
html[data-palette="apricot"] {
  --page:#faf6f0; --paper:#fffefd; --ink:#4e392d; --body:#675144; --muted:#7e6959;
  --accent:#975b35; --accent-hover:#794528; --on-accent:#fff;
  --surface:#fbefe3; --surface-strong:#f3dfca; --accent-line:#dcb99a; --line:#eddfd2;
  --shadow:0 12px 40px #523f2c07; --backdrop:#4d382866;
}
html[data-theme="dark"] {
  color-scheme:dark;
  --page:#1c2823; --paper:#26362d; --ink:#e5eee2; --body:#d1ddce; --muted:#acbca7;
  --accent:#b7d3a9; --accent-hover:#cce3c0; --on-accent:#263e29;
  --surface:#2f4434; --surface-strong:#3c5540; --accent-line:#597451; --line:#41513f;
  --warm:#efcf95; --warm-soft:#3d3829; --warm-line:#79663d; --focus:#edc482;
  --backdrop:#09120db3; --shadow:0 12px 40px #07130b1a;
  --art-ink:#d8e6d3; --art-line:#9eaf98; --art-paper:#344b3c;
  --art-leaf:#a9c39b; --art-leaf-soft:#405b42; --art-blue:#a3c2d2; --art-blue-soft:#3b5360;
  --art-peach:#dbaf93; --art-peach-soft:#695244; --art-yellow:#d4b979; --art-red:#e69a90;
}
html[data-theme="dark"][data-palette="ocean"] {
  --page:#1b2630; --paper:#253442; --ink:#e4edf4; --body:#ccdae5; --muted:#a2b7c9;
  --accent:#a9d1ef; --accent-hover:#c1e3fb; --on-accent:#203c52;
  --surface:#2d4355; --surface-strong:#38566d; --accent-line:#52758e; --line:#3e5263;
  --backdrop:#09131db3; --shadow:0 12px 40px #06101a1a;
}
html[data-theme="dark"][data-palette="apricot"] {
  --page:#2b241f; --paper:#383028; --ink:#f3e8dc; --body:#e0d1c1; --muted:#c1ac98;
  --accent:#ebbe92; --accent-hover:#f8d3af; --on-accent:#49311f;
  --surface:#473a2d; --surface-strong:#5a4531; --accent-line:#806145; --line:#574b3e;
  --backdrop:#1b110ab3; --shadow:0 12px 40px #170d061a;
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { min-width:320px; background:var(--page); }
body { margin:0; color:var(--body); font-size:18px; line-height:1.7; overflow-wrap:break-word; }
button,select { font:inherit; }
button,a,select { -webkit-tap-highlight-color:transparent; }
button { touch-action:manipulation; cursor:pointer; }
button,dialog { color:inherit; }
button:disabled,select:disabled { opacity:.55; cursor:not-allowed; }
button:focus-visible,a:focus-visible,select:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
button,a { -webkit-user-select:none; user-select:none; }
h1,h2,h3,p { margin:0; }
svg { display:block; width:100%; height:100%; }
.page-grain,.brand-caption,.eyebrow { display:none; }
.app-shell { max-width:1328px; min-height:100svh; margin:0 auto; padding:max(32px,env(safe-area-inset-top)) max(44px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(44px,env(safe-area-inset-left)); }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:38px; position:relative; }
.brand { display:inline-flex; gap:12px; align-items:center; color:var(--ink); text-decoration:none; white-space:nowrap; font-size:26px; font-weight:750; line-height:1.3; letter-spacing:1px; }
.brand-mark { width:46px; height:46px; padding:5px; color:var(--accent); background:var(--surface-strong); border-radius:13px; }
.header-tools { display:flex; align-items:center; gap:16px; }
.theme-switch { display:inline-flex; align-items:center; gap:4px; padding:4px; border-radius:14px; background:var(--surface); border:1px solid var(--line); margin-left:auto; flex:0 0 auto; }
.theme-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 14px; min-height:52px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--muted); font-size:18px; line-height:1.5; white-space:nowrap; }
.theme-button svg { width:19px; height:19px; flex:0 0 auto; }
.theme-button:hover { color:var(--accent); background:var(--surface-strong); }
.theme-button[aria-pressed="true"] { color:var(--accent); background:var(--paper); border-color:var(--accent-line); box-shadow:var(--shadow); font-weight:600; }
.network-status { position:absolute; bottom:9px; right:0; color:var(--muted); font-size:16px; max-width:100%; text-align:right; }
.network-status:empty { display:none; }
.text-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 0; color:var(--muted); background:transparent; border:0; font-size:16px; white-space:nowrap; min-height:52px; }
.text-button:hover { color:var(--accent); }
.text-button svg { width:20px; height:20px; }
.settings-button { padding:11px 20px; border:1px solid var(--accent-line); border-radius:12px; color:var(--accent); background:var(--paper); font-size:18px; font-weight:600; }
.settings-button:hover { background:var(--surface); }
.workspace { display:grid; grid-template-columns:235px minmax(0,1fr); gap:48px; align-items:start; }
.learning-sidebar { padding-top:12px; }
.sidebar-intro h1 { color:var(--ink); font-size:30px; line-height:1.65; letter-spacing:.5px; font-weight:650; margin-bottom:16px; }
.sidebar-intro>p { font-size:18px; color:var(--muted); line-height:1.9; }
.today-card { margin-top:32px; padding:24px; background:var(--surface); border-radius:20px; border:1px solid var(--line); }
.today-heading { color:var(--body); font-size:18px; }
.today-number { display:flex; align-items:baseline; gap:10px; margin:2px 0 18px; }
.today-number strong { color:var(--accent); font-size:48px; line-height:1.45; font-weight:650; font-variant-numeric:tabular-nums; }
.today-number>span { font-size:18px; color:var(--muted); }
.progress-caption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 10px; font-size:16px; color:var(--muted); margin-bottom:10px; }
.progress-caption>span:last-child { font-variant-numeric:tabular-nums; }
.overall-progress { background:var(--surface-strong); height:7px; overflow:hidden; border-radius:10px; }
.overall-progress-bar { width:0; height:100%; border-radius:inherit; background:var(--accent); transition:width .45s ease; }
.progress-note { font-size:16px; color:var(--muted); margin-top:17px; }
.paper-reminder { margin-top:24px; padding:0 3px; color:var(--muted); }
.paper-reminder p { font-size:16px; line-height:1.9; }
.paper-reminder strong { font-size:18px; font-weight:600; color:var(--body); }
.main-content { min-width:0; }
.main-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 20px; margin:7px 0 22px; }
.main-heading h2 { color:var(--ink); font-size:24px; line-height:1.6; font-weight:600; }
.level-badge { color:var(--muted); border:1px solid var(--line); border-radius:30px; padding:6px 13px; font-size:16px; white-space:nowrap; }
.question-card { background:var(--paper); border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow); padding:32px 36px; position:relative; }
.question-card-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:26px; }
.question-index { color:var(--muted); font-size:16px; font-variant-numeric:tabular-nums; }
.question-index strong { font-size:22px; color:var(--accent); padding:0 3px; font-weight:600; }
.question-index-divider { color:var(--accent-line); margin:0 9px 0 12px; }
.knowledge-badge { background:var(--surface); color:var(--accent); font-size:16px; padding:5px 12px; border-radius:9px; }
.knowledge-badge:empty { display:none; }
.section-heading,.step-heading { display:flex; align-items:center; gap:9px; }
.section-heading h3,.step-heading h3 { font-weight:600; color:var(--accent); font-size:22px; line-height:1.6; }
.section-icon { display:inline-block; width:24px; height:24px; flex:0 0 auto; color:var(--accent); }
.question-stem { font-size:26px; color:var(--ink); line-height:2.05; letter-spacing:.5px; margin-top:18px; font-weight:500; }
.vocab-tip { color:var(--muted); font-size:16px; line-height:1.9; margin-top:18px; }
.question-illustration { margin:24px 0 0; padding:16px 20px 18px; border:1px solid var(--line); background:var(--surface); border-radius:18px; }
.question-diagram { margin:24px 0 0; min-width:0; }
.diagram-caption { color:var(--ink); font-size:22px; line-height:1.8; margin-bottom:14px; font-weight:600; }
.illustration-art { max-width:720px; margin:0 auto; }
.illustration-art>svg { display:block; width:100%; height:auto; max-height:240px; }
.illustration-caption { color:var(--ink); font-size:20px; line-height:1.8; margin-top:6px; font-weight:600; }
.illustration-note { font-size:16px; color:var(--muted); line-height:1.8; margin-top:5px; }
.vocab-example { color:var(--accent); background:var(--surface); border-bottom:1px dashed var(--accent); border-radius:4px; padding:2px 4px; margin-right:4px; }
.vocab-word,.vocab-trigger,.vocab-term { display:inline; border:0; padding:2px 3px 3px; background:var(--surface); border-radius:5px; color:inherit; font:inherit; letter-spacing:inherit; line-height:inherit; border-bottom:2px dashed var(--accent); cursor:pointer; touch-action:manipulation; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.vocab-word:hover,.vocab-trigger:hover,.vocab-term:hover { background:var(--surface-strong); color:var(--accent); }
.vocab-word:focus-visible,.vocab-trigger:focus-visible,.vocab-term:focus-visible { outline-offset:2px; }
.clue-highlight,mark.clue { background:var(--warm-soft); color:var(--warm); border-bottom:2px solid var(--warm-line); border-radius:4px; padding:2px 3px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.clue-highlight :is(.vocab-word,.vocab-trigger,.vocab-term),mark.clue .vocab-word { background:transparent; color:inherit; border-bottom-color:var(--warm); }
.step-section { border-top:1px solid var(--line); margin-top:30px; padding-top:27px; }
.step-heading-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.step-progress { display:flex; align-items:center; gap:8px; }
.step-progress:empty { display:none; }
.step-dot { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:30px; height:30px; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:50%; font-size:16px; line-height:1; font-weight:600; }
.step-dot.is-active,.step-dot.active,.step-dot[aria-current="step"] { background:var(--accent); border-color:var(--accent); color:var(--on-accent); box-shadow:0 0 0 3px var(--surface); }
.step-dot.is-complete,.step-dot.completed { background:var(--surface-strong); border-color:var(--accent-line); color:var(--accent); }
.step-connector { width:12px; height:1px; background:var(--accent-line); }
.step-prompt { font-size:24px; font-weight:550; color:var(--ink); line-height:1.9; margin-top:18px; }
.question-stem { white-space:pre-line; }
.notebook-note { margin-top:18px; display:flex; align-items:center; gap:8px; font-size:16px; line-height:1.9; color:var(--muted); }
.notebook-note>span { color:var(--accent); font-size:24px; line-height:1; }
.current-step-summary { margin-top:20px; color:var(--body); font-size:22px; line-height:1.9; padding:15px 18px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.current-step-summary strong { color:var(--accent); }
.hint-panel { display:flex; align-items:flex-start; gap:12px; background:var(--warm-soft); border:1px solid var(--warm-line); border-left-width:4px; border-radius:15px; padding:22px; margin-top:24px; color:var(--warm); }
.hint-bulb { display:block; width:27px; height:27px; color:var(--warm); flex:0 0 auto; margin-top:2px; }
.hint-content { min-width:0; }
.panel-eyebrow { font-size:18px; font-weight:600; margin-bottom:9px; color:inherit; }
#hint-text { font-size:22px; line-height:1.95; font-weight:500; }
.clue-list { padding-left:25px; margin:14px 0 0; font-size:22px; line-height:1.95; }
.clue-list li+li { margin-top:7px; }
.clue-list li::marker { color:var(--warm); }
.answer-panel { background:var(--surface); border:1px solid var(--accent-line); border-radius:15px; margin-top:24px; padding:22px; }
.answer-panel-heading { display:flex; align-items:center; gap:9px; font-size:18px; color:var(--accent); }
.answer-check { display:inline-flex; align-items:center; justify-content:center; width:25px; height:25px; border-radius:50%; color:var(--accent); background:var(--surface-strong); font-size:18px; line-height:1; }
.answer-equation { color:var(--accent); margin-top:12px; font-size:28px; line-height:1.8; letter-spacing:1px; font-weight:600; }
.answer-value { color:var(--accent); font-size:26px; line-height:1.8; font-weight:600; margin-top:5px; }
.answer-equation:empty,.answer-value:empty { display:none; }
.answer-explanation { font-size:22px; line-height:1.95; margin-top:10px; color:var(--body); }
.final-panel { display:flex; align-items:flex-start; gap:13px; border:1px solid var(--accent-line); background:var(--surface); border-radius:14px; padding:22px; margin-top:18px; color:var(--accent); }
.final-spark { display:none; }
#final-answer { font-size:24px; line-height:1.9; color:var(--ink); font-weight:600; }
.action-area { margin-top:29px; }
.primary-actions { display:flex; flex-wrap:wrap; align-items:center; gap:13px; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:10px; min-height:56px; padding:14px 25px; border:1px solid transparent; border-radius:13px; font-weight:550; font-size:18px; line-height:1.6; transition:background .18s,box-shadow .18s,transform .18s; }
.button:active { transform:translateY(1px); }
.button-primary { color:var(--on-accent); background:var(--accent); box-shadow:var(--shadow); }
.button-primary:hover { background:var(--accent-hover); }
.button-primary::after { content:"→"; font-size:22px; font-weight:400; line-height:1; margin-left:5px; }
#check-button::after { content:"✓"; }
.button-secondary { color:var(--accent); background:var(--surface); border-color:var(--accent-line); }
.button-secondary:hover { background:var(--surface-strong); }
.button-help { color:var(--warm); background:var(--warm-soft); border-color:var(--warm-line); font-weight:600; }
.button-help>span { display:inline-flex; align-items:center; justify-content:center; border:1.5px solid currentColor; width:24px; height:24px; border-radius:50%; line-height:1; font-size:17px; }
.button-help:hover { box-shadow:inset 0 0 0 1px var(--warm-line); }
.action-note { color:var(--muted); font-size:16px; line-height:1.9; margin-top:16px; }
.site-footer { text-align:center; padding:25px 0 8px; color:var(--muted); font-size:16px; line-height:1.9; }
.completion-panel { display:flex; align-items:center; flex-direction:column; justify-content:center; text-align:center; min-height:530px; padding:52px 30px; }
.completion-symbol { width:96px; height:96px; margin-bottom:20px; }
.completion-symbol svg circle { fill:var(--surface-strong); }
.completion-symbol svg path { stroke:var(--accent); }
.completion-symbol svg path[fill] { fill:var(--accent); stroke:none; }
.completion-panel h2 { color:var(--ink); font-size:30px; line-height:1.7; margin:13px 0 18px; }
#completion-message { color:var(--body); font-size:22px; line-height:1.9; max-width:500px; }
.completion-panel .button { margin-top:30px; }
.completion-note { font-size:16px; color:var(--muted); margin-top:20px; }
.loading-state { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100svh; padding:40px max(24px,env(safe-area-inset-right)) 40px max(24px,env(safe-area-inset-left)); text-align:center; }
.loading-mark { width:80px; height:80px; border-radius:24px; padding:16px; background:var(--surface); color:var(--accent); margin-bottom:18px; }
.loading-brand { color:var(--accent); font-size:30px; font-weight:650; letter-spacing:2px; }
#loading-message { margin-top:15px; color:var(--muted); font-size:18px; max-width:540px; }
#loading-retry { margin-top:26px; }
.noscript-message { font-size:18px; margin-top:15px; color:var(--warm); }
dialog { border:1px solid var(--line); padding:30px 34px; background:var(--paper); box-shadow:0 20px 90px #10201629; max-height:calc(100svh - 40px); overflow-y:auto; overscroll-behavior:contain; }
dialog::backdrop { background:var(--backdrop); backdrop-filter:blur(4px); }
.vocab-dialog { width:min(640px,calc(100% - 30px)); margin:auto auto max(18px,env(safe-area-inset-bottom)); border-radius:26px; padding-top:15px; }
.sheet-handle { width:38px; height:5px; border-radius:5px; background:var(--accent-line); margin:0 auto 13px; }
.dialog-heading { display:flex; align-items:center; justify-content:flex-end; gap:16px; }
.icon-button { border:1px solid var(--line); background:var(--surface); width:52px; height:52px; border-radius:50%; padding:14px; flex:0 0 auto; color:var(--accent); }
.icon-button:hover { background:var(--surface-strong); }
.vocab-word-title { color:var(--accent); font-size:38px; line-height:1.5; margin-top:4px; margin-bottom:18px; letter-spacing:2px; }
.simple-meaning-heading { margin-top:28px; font-size:18px; font-weight:600; color:var(--accent); }
.vocab-explanation { color:var(--ink); font-size:24px; line-height:1.95; margin-top:10px; margin-bottom:22px; }
.vocab-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:4px; }
.explanation-speak-button svg { width:23px; height:23px; flex:0 0 auto; }
.explanation-speak-button[aria-busy="true"],.speak-button[aria-busy="true"] { box-shadow:0 0 0 3px var(--surface-strong); }
.pinyin-section { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:17px 20px; border-radius:14px; border:1px solid var(--accent-line); background:var(--surface); }
.vocab-pinyin { font-size:28px; line-height:1.8; color:var(--accent); letter-spacing:.5px; }
.speak-button { display:inline-flex; gap:9px; align-items:center; justify-content:center; background:var(--surface-strong); color:var(--accent); border:1px solid var(--accent-line); border-radius:11px; padding:12px 16px; min-height:54px; font-size:18px; font-weight:600; margin-left:auto; white-space:nowrap; }
.speak-button svg { width:23px; height:23px; }
.speak-button:hover { background:var(--paper); }
.word-reading-hint,.voice-status { margin-top:15px; font-size:16px; color:var(--muted); line-height:1.9; }
.voice-status:empty { display:none; }
.guide-dialog,.settings-dialog { width:min(680px,calc(100% - 30px)); border-radius:25px; }
.guide-dialog>h2,.settings-dialog>h2 { color:var(--ink); font-size:30px; margin:8px 0 27px; line-height:1.7; }
.guide-steps { list-style:none; padding:0; margin:0; }
.guide-steps li { display:flex; align-items:flex-start; gap:15px; margin-bottom:27px; }
.guide-number { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:11px; background:var(--surface); flex:0 0 auto; color:var(--accent); font-size:18px; margin-top:1px; }
.guide-steps h3 { color:var(--accent); font-weight:600; font-size:22px; }
.guide-steps p { color:var(--body); font-size:18px; line-height:1.95; margin-top:7px; }
.guide-parent-note { background:var(--surface); padding:20px; border-radius:13px; color:var(--body); }
.guide-display-note { margin:2px 0 25px; color:var(--muted); font-size:16px; line-height:1.95; }
.guide-parent-note strong { font-size:18px; font-weight:600; color:var(--accent); }
.guide-parent-note p { font-size:16px; line-height:1.95; margin-top:9px; }
.guide-footnote { color:var(--muted); font-size:16px; line-height:1.95; margin-top:20px; }
.settings-dialog>h2 { margin-bottom:7px; }
.settings-intro { font-size:16px; color:var(--muted); margin-bottom:28px; line-height:1.9; }
.settings-section { border:0; padding:0; margin:0; min-width:0; }
.settings-section+.settings-section { border-top:1px solid var(--line); margin-top:28px; padding-top:24px; }
.settings-section legend { font-size:22px; font-weight:600; color:var(--ink); padding:0; margin-bottom:17px; }
.settings-section+.settings-section legend { float:left; width:100%; }
.palette-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.palette-button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:118px; padding:17px 7px; border:1px solid var(--line); border-radius:14px; color:var(--body); background:var(--paper); font-size:18px; }
.palette-button:hover { background:var(--surface); }
.palette-button[aria-pressed="true"] { color:var(--accent); background:var(--surface); border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); font-weight:600; }
.palette-swatch { width:32px; height:32px; border-radius:50%; box-shadow:inset 0 0 0 1px #0000000d; }
.forest-swatch { background:#527c5f; }
.ocean-swatch { background:#568bb3; }
.apricot-swatch { background:#ca9368; }
.palette-check { position:absolute; top:8px; right:10px; color:var(--accent); font-size:18px; visibility:hidden; }
.palette-button[aria-pressed="true"] .palette-check { visibility:visible; }
.settings-note { font-size:16px; color:var(--muted); line-height:1.95; margin-top:13px; }
.setting-field { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; margin-top:20px; font-size:18px; color:var(--body); clear:both; }
.setting-field>span { flex:0 0 auto; }
.setting-field select { min-width:0; width:57%; min-height:54px; padding:11px 30px 11px 14px; color:var(--ink); background-color:var(--surface); border:1px solid var(--accent-line); border-radius:11px; font-size:18px; line-height:1.6; }
.voice-test-button { margin-top:22px; }
.settings-dialog .guide-button { margin-top:28px; width:100%; }
.toast { position:fixed; left:50%; bottom:max(25px,env(safe-area-inset-bottom)); transform:translateX(-50%); max-width:min(580px,calc(100% - 32px)); background:var(--accent); color:var(--on-accent); padding:15px 22px; border:1px solid var(--accent-line); border-radius:14px; box-shadow:var(--shadow); font-size:18px; line-height:1.9; z-index:100; text-align:center; }
@media(min-width:1320px) {
  .site-header { padding-bottom:46px; }
  .workspace { gap:60px; grid-template-columns:245px minmax(0,1fr); }
  .question-card { padding:35px 42px; }
  .sidebar-intro h1 { font-size:32px; }
}
@media(max-width:1060px) {
  .app-shell { padding-left:max(28px,env(safe-area-inset-left)); padding-right:max(28px,env(safe-area-inset-right)); }
  .workspace { grid-template-columns:210px minmax(0,1fr); gap:30px; }
  .sidebar-intro h1 { font-size:28px; }
  .today-card { padding:21px; }
  .question-card { padding:28px; }
  .level-badge,.install-button { display:none; }
}
@media(max-width:800px) {
  .app-shell { padding-top:max(24px,env(safe-area-inset-top)); padding-left:max(24px,env(safe-area-inset-left)); padding-right:max(24px,env(safe-area-inset-right)); }
  .site-header { display:grid; grid-template-columns:1fr auto; gap:16px; padding-bottom:42px; }
  .brand { grid-column:1; grid-row:1; }
  .header-tools { grid-column:2; grid-row:1; }
  .theme-switch { grid-column:1/-1; grid-row:2; display:grid; grid-template-columns:repeat(3,1fr); width:100%; margin-left:0; }
  .theme-button { min-height:52px; font-size:18px; }
  .network-status { bottom:7px; }
  .workspace { display:block; }
  .learning-sidebar { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:18px 25px; padding-top:0; margin-bottom:28px; align-items:center; }
  .sidebar-intro { grid-column:1; grid-row:1; }
  .sidebar-intro h1 { font-size:28px; margin:0; }
  .sidebar-intro>p { display:none; }
  .today-card { grid-column:2; grid-row:1/3; padding:18px 20px; border-radius:17px; margin-top:0; }
  .today-number { margin-bottom:10px; }
  .today-number strong { font-size:40px; }
  .progress-note { display:none; }
  .paper-reminder { grid-column:1; grid-row:2; margin:0; padding:0; }
  .main-heading { margin:0 0 18px; }
}
@media(max-width:540px) {
  .question-illustration { padding:14px 12px 16px; margin-top:22px; }
  .app-shell { padding-top:max(18px,env(safe-area-inset-top)); padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); }
  .brand { gap:9px; font-size:25px; }
  .brand-mark { width:41px; height:41px; border-radius:11px; }
  .settings-button { padding:12px 18px; }
  .theme-button { padding:10px 5px; gap:7px; }
  .theme-button svg { width:20px; height:20px; }
  .learning-sidebar { display:block; margin-bottom:25px; }
  .sidebar-intro { display:none; }
  .today-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 20px; align-items:center; padding:18px 20px; }
  .today-heading { font-size:18px; }
  .today-number { margin:0; gap:8px; }
  .today-number strong { font-size:34px; line-height:1.3; }
  .progress-caption { grid-column:1/-1; margin:0; }
  .overall-progress { grid-column:1/-1; margin-top:2px; }
  .paper-reminder { margin-top:15px; }
  .paper-reminder br { display:none; }
  .paper-reminder strong { font-size:16px; }
  .paper-reminder strong::after { content:" · "; }
  .main-heading h2 { font-size:22px; }
  .question-card { padding:23px 21px; border-radius:21px; }
  .question-card-top { margin-bottom:25px; gap:10px; }
  .question-stem { font-size:24px; line-height:2.05; }
  .step-section { margin-top:27px; padding-top:25px; }
  .step-prompt { font-size:23px; line-height:1.95; margin-top:19px; }
  .step-progress { gap:7px; }
  .step-connector { width:8px; }
  .action-area { margin-top:27px; }
  .primary-actions { gap:13px; }
  .button { min-height:56px; padding:14px 18px; font-size:18px; border-radius:12px; }
  .primary-actions>.button { flex:1 1 100%; }
  .action-note { margin-top:17px; }
  .current-step-summary { padding:16px; }
  .hint-panel,.answer-panel { padding:18px 16px; border-radius:13px; margin-top:22px; }
  .hint-panel { display:block; }
  .hint-bulb { display:none; }
  .clue-list { padding-left:23px; }
  .answer-equation { font-size:26px; }
  .answer-value { font-size:24px; }
  .final-panel { padding:18px 16px; }
  #final-answer { font-size:23px; }
  .completion-panel { min-height:470px; padding:40px 23px; }
  .completion-panel h2 { font-size:27px; }
  dialog { padding:24px; max-height:calc(100svh - 26px); }
  .vocab-dialog { width:calc(100% - 20px); padding:15px 22px max(26px,env(safe-area-inset-bottom)); border-radius:24px; margin-bottom:max(10px,env(safe-area-inset-bottom)); }
  .vocab-word-title { font-size:36px; }
  .vocab-pinyin { font-size:26px; }
  .pinyin-section { padding:15px; gap:13px; }
  .speak-button { padding:12px 15px; }
  .guide-dialog>h2,.settings-dialog>h2 { font-size:28px; }
  .guide-steps li { gap:12px; }
  .guide-parent-note { padding:17px; }
  .settings-dialog { padding:23px 21px; }
  .palette-options { gap:9px; }
  .palette-button { min-height:116px; padding:17px 4px; }
  .palette-check { top:6px; right:7px; }
  .setting-field { display:block; }
  .setting-field>span { display:block; margin-bottom:9px; }
  .setting-field select { width:100%; padding-left:13px; }
  .voice-test-button { width:100%; }
  .toast { padding:14px 18px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}
@media print {
  body { background:#fff; }
  .site-header,.learning-sidebar,.main-heading,.site-footer,.action-area,.vocab-tip,dialog,.toast,.notebook-note,.step-progress { display:none!important; }
  .app-shell { padding:0; max-width:none; }
  .workspace { display:block; }
  .question-card { border:0; box-shadow:none; padding:24px; }
}