:root {
  --paper: #fff8ea;
  --paper-2: #f7edd7;
  --ink: #17334b;
  --ink-soft: #566878;
  --pond: #173c56;
  --pond-deep: #0d283c;
  --gold: #f2ad3f;
  --gold-light: #ffd97a;
  --red: #c93b31;
  --red-dark: #9f2d2a;
  --leaf: #4f8065;
  --white: #fffdf8;
  --line: rgba(23, 51, 75, .14);
  --shadow: 0 16px 48px rgba(65, 42, 17, .10);
  --radius-lg: 28px;
  --radius-md: 18px;
  --font-body: "Noto Sans TC", sans-serif;
  --font-story: "LXGW WenKai TC", serif;
}

[data-theme="dark"] {
  --paper: #102636;
  --paper-2: #17364a;
  --ink: #f8edda;
  --ink-soft: #b8c4ca;
  --white: #173145;
  --line: rgba(255, 255, 255, .14);
  --shadow: 0 16px 48px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  min-width: 320px;
}
button, a { -webkit-tap-highlight-color: transparent; }
button {
  color: inherit;
  font: inherit;
}
button:focus-visible, a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.skip-link {
  position: fixed;
  top: -80px;
  left: 16px;
  z-index: 99;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  border-radius: 10px;
}
.skip-link:focus { top: 12px; }
.topbar {
  min-height: 76px;
  padding: 10px clamp(16px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand {
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
}
.brand-logo { width: 206px; height: 56px; object-fit: contain; object-position: left center; }
.brand span { display: flex; flex-direction: column; line-height: 1.1; }
.brand strong { font-family: var(--font-story); font-size: 19px; }
.brand small { margin-top: 4px; color: var(--ink-soft); font-size: 10px; letter-spacing: .08em; }
.mode-switcher {
  padding: 4px;
  display: flex;
  gap: 3px;
  background: var(--paper-2);
  border-radius: 999px;
}
.mode-btn {
  min-height: 42px;
  min-width: 72px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-weight: 600;
}
.mode-btn.active { color: #fff; background: var(--ink); }
.icon-btn {
  justify-self: end;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
}
.mode-panel { display: none; }
.mode-panel.active { display: block; animation: reveal .35s ease both; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } }
.eyebrow {
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.child-shell {
  width: min(1440px, 100%);
  min-height: calc(100vh - 77px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
}
.lesson-rail {
  padding: clamp(30px, 5vw, 64px) 28px;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 77px);
}
.book-chip {
  width: max-content;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  color: var(--gold-light);
  font-size: 11px;
  letter-spacing: .08em;
}
.lesson-rail h1 { margin: 22px 0 8px; font-family: var(--font-story); font-size: 34px; }
.lesson-rail > p { margin: 0; color: rgba(255,255,255,.68); font-size: 14px; line-height: 1.8; }
.progress-track { height: 5px; background: rgba(255,255,255,.14); border-radius: 9px; margin: 28px 0; overflow: hidden; }
.progress-track span { display: block; width: 8.33%; height: 100%; background: var(--gold); transition: width .3s ease; }
.rail-steps { display: grid; gap: 6px; }
.rail-step {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: rgba(255,255,255,.7);
  text-align: left;
  cursor: pointer;
}
.rail-step span { color: var(--gold-light); font-size: 11px; }
.rail-step.active { padding-inline: 14px; background: rgba(255,255,255,.11); color: #fff; }
.reward-card {
  margin-top: auto;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.08);
  border-radius: 18px;
}
.reward-drop {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--leaf);
  color: #fff;
  border-radius: 50% 50% 50% 10%;
  transform: rotate(-45deg);
  font-size: 11px;
}
.reward-drop::first-letter { transform: rotate(45deg); }
.reward-card div { display: grid; gap: 2px; }
.reward-card strong { font-size: 13px; }
.reward-card small { color: rgba(255,255,255,.55); font-size: 10px; }
.child-content { padding: clamp(22px, 4vw, 56px); min-width: 0; }
.child-view { display: none; max-width: 980px; margin: 0 auto; }
.child-view.active { display: block; animation: reveal .35s ease both; }
.reader-toolbar, .teacher-heading {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.reader-toolbar > div:first-child { display: flex; align-items: center; gap: 14px; }
#pageLabel { color: var(--ink-soft); font-size: 13px; }
.audio-badge {
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--leaf) 16%, transparent);
  color: var(--leaf);
  font-size: 10px;
  font-weight: 700;
}
.audio-badge.device { background: var(--paper-2); color: var(--ink-soft); }
.toolbar-actions { display: flex; gap: 8px; }
.script-switch {
  display: flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-2);
}
.script-switch button {
  width: 38px;
  min-height: 36px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-weight: 700;
}
.script-switch button.active {
  background: var(--ink);
  color: var(--paper);
}
#pinyinToggle.active {
  border-color: color-mix(in srgb, var(--leaf) 45%, var(--line));
  background: color-mix(in srgb, var(--leaf) 12%, var(--white));
  color: var(--leaf);
}
.soft-btn, .outline-btn {
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
}
.story-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.story-scene {
  position: relative;
  min-height: clamp(330px, 48vh, 500px);
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 18%, rgba(255,240,170,.14) 0 9%, transparent 10%),
    linear-gradient(#f7e5c2 0 62%, #1f5870 62% 100%);
}
.story-scene::before {
  content: "";
  position: absolute;
  inset: 62% 0 0;
  background: repeating-radial-gradient(ellipse at center, rgba(255,255,255,.11) 0 1px, transparent 2px 18px);
  opacity: .5;
}
.story-scene::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 180px;
  height: 58px;
  left: 5%;
  top: 13%;
  border-top: 3px solid rgba(23,58,84,.18);
  border-radius: 50%;
  box-shadow: 42px 13px 0 -1px rgba(23,58,84,.08), 88px -6px 0 -1px rgba(23,58,84,.07);
}
.moon {
  position: absolute;
  width: 62px;
  height: 62px;
  top: 36px;
  right: 9%;
  background: #ffe9a5;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 42px rgba(255,224,122,.4);
  transition: .5s;
}
.lantern {
  position: absolute;
  width: 84px;
  height: 106px;
  left: 64%;
  top: 24%;
  border-radius: 42% 42% 38% 38%;
  background: repeating-linear-gradient(90deg, var(--red-dark) 0 4px, var(--red) 4px 17px);
  border: 4px solid #8e2c25;
  opacity: 0;
  transition: all .6s ease;
}
.lantern::before, .lantern::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 54%;
  height: 7px;
  background: var(--gold);
  border-radius: 4px;
}
.lantern::before { top: -10px; }
.lantern::after { bottom: -10px; }
.lantern i {
  position: absolute;
  width: 2px;
  height: 34px;
  background: var(--gold);
  top: -42px;
  left: 50%;
}
.lantern-small { width: 48px; height: 62px; left: 78%; top: 42%; }
.character {
  position: absolute;
  z-index: 3;
  width: clamp(190px, 27vw, 330px);
  left: 11%;
  bottom: 7%;
  filter: drop-shadow(0 14px 12px rgba(5, 23, 38, .22));
}
.character img { width: 100%; display: block; }
.baby-character { display: block; }
.mama-character {
  display: none;
  width: clamp(240px, 34vw, 400px);
  left: 52%;
  bottom: 9%;
  transform: scaleX(-1) scaleY(.88);
}
.scene-2 .mama-character,
.scene-10 .mama-character,
.scene-12 .mama-character { display: block; }
.jade-tag {
  position: absolute;
  width: 8%;
  aspect-ratio: 1;
  border-radius: 50%;
  right: 20%;
  bottom: 25%;
  background: #3e8879;
  border: 3px solid #e9c86a;
}
.plum-flower {
  position: absolute;
  width: 11%;
  aspect-ratio: 1;
  right: 19%;
  top: 17%;
  border-radius: 50%;
  background: #b52e3b;
  box-shadow:
    0 -12px 0 -3px #b52e3b,
    11px -4px 0 -3px #b52e3b,
    7px 10px 0 -3px #b52e3b,
    -7px 10px 0 -3px #b52e3b,
    -11px -4px 0 -3px #b52e3b;
}
.plum-flower::after {
  content: "";
  position: absolute;
  width: 36%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  left: 32%;
  top: 32%;
}
.red-jade {
  position: absolute;
  width: 9%;
  aspect-ratio: 1;
  border-radius: 50%;
  right: 18%;
  bottom: 23%;
  background: #a82731;
  border: 3px solid #f2c969;
}
.red-jade::after {
  content: "";
  position: absolute;
  width: 25%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  inset: 37.5%;
}
.pearl-strand {
  position: absolute;
  right: 21%;
  bottom: 26%;
  width: 5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff4d6;
  box-shadow: -14px 1px 0 #fff4d6, -28px 3px 0 #fff4d6;
}
.bubbles { position: absolute; left: 32%; bottom: 35%; opacity: 0; }
.bubbles b { display: block; width: 12px; height: 12px; margin: 9px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; }
.scene-2 .baby-character { left: 8%; }
.scene-3 .lantern-big, .scene-4 .lantern-big, .scene-5 .lantern-small, .scene-6 .lantern-small, .scene-7 .lantern-small, .scene-8 .lantern, .scene-9 .lantern, .scene-10 .lantern, .scene-11 .lantern, .scene-12 .lantern { opacity: 1; }
.scene-4 .lantern-big { width: 170px; height: 210px; left: 56%; top: 14%; }
.scene-4 .baby-character { transform: scale(.72); transform-origin: bottom left; }
.scene-5 .lantern-small { left: 69%; top: 44%; }
.scene-6 .lantern-big { opacity: .14; }
.scene-6 .lantern-small { left: 61%; top: 43%; }
.scene-7 .lantern-small { left: 66%; top: 18%; }
.scene-8 .lantern-big { top: 8%; left: 56%; }
.scene-8 .lantern-small { top: 15%; }
.scene-9, .scene-10, .scene-11, .scene-12 { background: linear-gradient(#302c50 0 62%, #2f6675 62% 100%); }
.scene-9 .moon, .scene-10 .moon, .scene-11 .moon, .scene-12 .moon { opacity: 1; }
.scene-9 .lantern, .scene-10 .lantern, .scene-11 .lantern, .scene-12 .lantern { filter: drop-shadow(0 0 26px rgba(255,186,61,.72)); background: repeating-linear-gradient(90deg, #d13b2e 0 4px, #ef6550 4px 17px); }
.scene-10 .baby-character { left: 5%; width: clamp(150px, 22vw, 250px); }
.scene-10 .mama-character { left: 27%; bottom: 8%; transform: scaleY(.88); }
.scene-11 .baby-character, .scene-12 .baby-character { left: 42%; }
.scene-12 .mama-character { left: 9%; }
.scene-11 .bubbles, .scene-12 .bubbles { opacity: 1; }
.story-copy { padding: 20px clamp(22px, 5vw, 54px) 24px; text-align: center; border-top: 4px solid var(--gold); }
.story-copy h2 { margin: 0; font-family: var(--font-story); font-size: clamp(34px, 5.4vw, 52px); line-height: 1.25; }
.story-pinyin {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: clamp(14px, 2vw, 18px);
  letter-spacing: .025em;
  transition: opacity .2s ease;
}
.story-pinyin.hidden { display: none; }
.reader-controls { margin-top: 18px; display: flex; justify-content: center; align-items: center; gap: 18px; }
.round-btn {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  font-size: 22px;
}
.round-btn.primary { background: var(--red); color: #fff; border-color: var(--red); }
.round-btn:disabled { opacity: .3; cursor: not-allowed; }
.page-dots { display: flex; align-items: center; gap: 6px; }
.page-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 22%, transparent); cursor: pointer; transition: .2s; }
.page-dots button.active { width: 24px; border-radius: 8px; background: var(--red); }
.section-heading { margin-bottom: 24px; }
.section-heading h2, .teacher-heading h2, .dashboard-intro h1, .parent-note h2 { font-family: var(--font-story); }
.section-heading h2 { margin: 8px 0; font-size: clamp(32px, 5vw, 48px); }
.section-heading p { margin: 0; color: var(--ink-soft); }
.word-challenge { max-width: 700px; margin: 0 auto; text-align: center; }
.challenge-scene { height: 240px; display: flex; align-items: flex-end; justify-content: center; gap: 80px; padding: 30px; background: var(--pond); border-radius: var(--radius-lg); }
.challenge-scene.pinyin-scene::before {
  content: "看";
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--red);
  font: 700 82px/1 var(--font-story);
  border: 6px solid var(--gold);
}
.challenge-scene.pinyin-scene .choice-lantern { display: none; }
.choice-lantern { position: relative; width: 130px; height: 160px; border-radius: 44%; background: repeating-linear-gradient(90deg, var(--red-dark) 0 6px, var(--red) 6px 26px); border: 5px solid var(--gold); }
.choice-lantern.small { width: 62px; height: 78px; }
.choice-lantern::before { content: ""; position: absolute; left: 50%; top: -25px; width: 2px; height: 25px; background: var(--gold); }
.word-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0 12px; }
.word-tile { min-height: 118px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); cursor: pointer; }
.word-tile span { display: block; font-family: var(--font-story); font-size: 58px; line-height: 1; }
.word-tile small { color: var(--ink-soft); }
.word-tile.pinyin-tile span { font: 700 clamp(32px, 5vw, 48px)/1.1 var(--font-body); color: var(--red); }
.word-tile.pinyin-tile small { display: block; margin-top: 8px; font-family: var(--font-story); font-size: 22px; }
.word-tile.correct { background: #dfeee3; border-color: var(--leaf); color: #295840; }
.word-tile.wrong { animation: shake .3s ease; border-color: var(--red); }
@keyframes shake { 33% { transform: translateX(-8px); } 66% { transform: translateX(8px); } }
.feedback { min-height: 24px; color: var(--ink-soft); }
.primary-btn {
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.primary-btn:disabled { opacity: .38; cursor: not-allowed; }
.writing-layout { display: grid; grid-template-columns: minmax(280px, 560px) 220px; gap: 30px; align-items: center; }
.trace-wrap { aspect-ratio: 1; position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.trace-wrap::before, .trace-wrap::after { content: ""; position: absolute; background: var(--line); pointer-events: none; }
.trace-wrap::before { width: 1px; height: 100%; left: 50%; }
.trace-wrap::after { width: 100%; height: 1px; top: 50%; }
.trace-guide { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-story); font-size: clamp(240px, 38vw, 420px); line-height: 1; color: color-mix(in srgb, var(--ink) 12%, transparent); pointer-events: none; }
#traceCanvas { width: 100%; height: 100%; position: relative; z-index: 2; touch-action: none; }
.writing-tools { display: grid; gap: 12px; }
.pinyin-practice { max-width: 720px; margin: 0 auto; text-align: center; }
.pinyin-picture {
  position: relative;
  height: 260px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(#f7e5c2 0 62%, var(--pond) 62%);
}
.pinyin-picture img { position: absolute; left: 6%; bottom: 4%; width: min(45%, 290px); }
.pinyin-picture .choice-lantern { position: absolute; right: 16%; top: 28%; width: 92px; height: 116px; }
.target-character { display: flex; align-items: baseline; justify-content: center; gap: 16px; margin: 18px 0 12px; }
.target-character strong { color: var(--red); font: 700 68px/1 var(--font-story); }
.target-character span { color: var(--ink-soft); font-size: 16px; }
.pinyin-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pinyin-options button { min-height: 96px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); cursor: pointer; }
.pinyin-options b { display: block; color: var(--ink); font-size: 34px; }
.pinyin-options small { color: var(--ink-soft); }
.pinyin-options button.correct { background: #dfeee3; border-color: var(--leaf); }
.pinyin-options button.wrong { border-color: var(--red); animation: shake .3s ease; }
.stroke-card { padding: 22px; background: var(--paper-2); border-radius: var(--radius-md); display: grid; gap: 6px; }
.stroke-card span, .stroke-card small { color: var(--ink-soft); font-size: 12px; }
.stroke-card strong { font-family: var(--font-story); font-size: 24px; }
.dashboard-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: clamp(40px, 7vw, 84px) 0; }
.dashboard-intro { max-width: 720px; margin-bottom: 38px; }
.dashboard-intro h1 { margin: 8px 0 12px; font-size: clamp(42px, 7vw, 72px); line-height: 1.05; }
.dashboard-intro p { color: var(--ink-soft); line-height: 1.8; font-size: 17px; }
.family-overview { display: grid; grid-template-columns: 1fr 300px; gap: 18px; }
.today-card, .home-progress { background: var(--ink); color: var(--paper); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 38px); }
.today-top { display: flex; justify-content: space-between; color: var(--gold-light); }
.today-card h2 { max-width: 620px; margin: 24px 0; font-family: var(--font-story); font-size: clamp(28px, 4vw, 42px); }
.action-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.action-strip span { padding: 7px 11px; background: rgba(255,255,255,.09); border-radius: 999px; font-size: 12px; }
.action-strip b { color: var(--gold-light); margin-right: 5px; }
.home-progress { background: var(--paper-2); color: var(--ink); text-align: center; }
.ring {
  --value: 40;
  width: 150px; height: 150px; margin: 22px auto;
  display: grid; place-content: center;
  background: radial-gradient(closest-side, var(--paper-2) 76%, transparent 77% 99%), conic-gradient(var(--red) calc(var(--value)*1%), color-mix(in srgb, var(--ink) 10%, transparent) 0);
  border-radius: 50%;
}
.ring strong { font-size: 42px; line-height: 1; }
.ring small { color: var(--ink-soft); }
.home-progress p { color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.reading-plan { position: relative; max-width: 820px; margin: 54px auto; }
.plan-line { position: absolute; left: 23px; top: 24px; bottom: 24px; width: 1px; background: var(--line); }
.plan-item { position: relative; display: grid; grid-template-columns: 48px 1fr auto; gap: 18px; align-items: center; min-height: 105px; padding: 15px 0; }
.plan-item > b { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); z-index: 1; }
.plan-item h3 { margin: 0 0 5px; font-family: var(--font-story); font-size: 22px; }
.plan-item p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.plan-item > span { padding: 5px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink-soft); font-size: 11px; }
.plan-item.done > b { background: var(--leaf); color: #fff; }
.plan-item.current > b { background: var(--red); color: #fff; }
.plan-item.current > span { background: var(--red); color: #fff; }
.parent-note { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: clamp(28px, 5vw, 48px); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.parent-note h2 { margin: 10px 0 0; font-size: 35px; }
.parent-note p { margin: 0; color: var(--ink-soft); line-height: 1.9; }
.teacher-shell { width: min(1440px, 100%); min-height: calc(100vh - 77px); margin: auto; display: grid; grid-template-columns: 280px 1fr; }
.teacher-nav { padding: 44px 28px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.teacher-nav h1 { font-family: var(--font-story); margin: 10px 0 5px; font-size: 28px; }
.teacher-nav p { margin: 0; color: var(--ink-soft); font-size: 13px; }
.teacher-nav nav { display: grid; gap: 5px; margin-top: 36px; }
.teacher-tab { min-height: 48px; padding: 0 14px; text-align: left; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.teacher-tab.active { background: var(--ink); color: var(--paper); }
.teacher-nav .outline-btn { margin-top: auto; }
.teacher-content { padding: clamp(30px, 5vw, 64px); min-width: 0; }
.teacher-page { display: none; max-width: 1000px; margin: 0 auto; }
.teacher-page.active { display: block; animation: reveal .3s ease both; }
.teacher-heading h2 { margin: 6px 0 0; font-size: clamp(30px, 4vw, 46px); }
.duration { padding: 7px 11px; border-radius: 999px; background: var(--paper-2); font-size: 12px; }
.objective-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0; }
.objective-board article { min-height: 210px; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); }
.objective-board small { color: var(--red); font-weight: 700; }
.objective-board strong { display: block; margin: 24px 0 12px; font-family: var(--font-story); font-size: 23px; line-height: 1.5; }
.objective-board p { color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.core-characters { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 24px 0; }
.core-characters button { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2); font-family: var(--font-story); font-size: 34px; cursor: pointer; }
.core-characters small { display: block; color: var(--ink-soft); font: 10px var(--font-body); }
.teacher-callout { padding: 22px 26px; border-left: 4px solid var(--gold); background: var(--paper-2); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.teacher-callout p { margin: 5px 0 0; color: var(--ink-soft); line-height: 1.7; }
.lesson-selector { display: flex; gap: 8px; margin: 24px 0; }
.lesson-select { min-width: 120px; min-height: 64px; border: 1px solid var(--line); background: var(--white); border-radius: 14px; cursor: pointer; }
.lesson-select.active { background: var(--red); border-color: var(--red); color: #fff; }
.lesson-select small { opacity: .7; }
.lesson-detail { padding: 8px 0; }
.lesson-block { display: grid; grid-template-columns: 90px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.lesson-time { color: var(--red); font-weight: 700; }
.lesson-block h3 { margin: 0 0 8px; font-family: var(--font-story); font-size: 22px; }
.lesson-block p { margin: 0; color: var(--ink-soft); line-height: 1.8; }
.teacher-script { margin-top: 10px; padding: 12px 15px; background: var(--paper-2); border-radius: 10px; color: var(--ink); font-family: var(--font-story); }
.assessment-table { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; margin-top: 26px; }
.assessment-row { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); min-height: 58px; align-items: center; border-bottom: 1px solid var(--line); }
.assessment-row:last-child { border: 0; }
.assessment-row.header { background: var(--ink); color: var(--paper); font-size: 12px; }
.assessment-row > span { padding: 12px 15px; }
.assessment-row label { height: 100%; display: grid; place-items: center; cursor: pointer; border-left: 1px solid var(--line); }
.assessment-row input { width: 20px; height: 20px; accent-color: var(--red); }
.char-label { font-family: var(--font-story); font-size: 27px; }
.evidence-summary { margin-top: 14px; padding: 14px; background: var(--paper-2); border-radius: 12px; text-align: center; }
.resource-list { display: grid; gap: 10px; margin-top: 26px; }
.resource-list article { display: grid; grid-template-columns: 52px 1fr auto; gap: 20px; align-items: center; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); }
.resource-list article > span { font-family: var(--font-story); font-size: 26px; color: var(--red); }
.resource-list h3 { margin: 0 0 4px; font-family: var(--font-story); font-size: 22px; }
.resource-list p { margin: 0; color: var(--ink-soft); font-size: 13px; }
.resource-list button { min-height: 42px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--paper-2); cursor: pointer; }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 24px; transform: translate(-50%, 20px); padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); opacity: 0; pointer-events: none; transition: .25s; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 850px) {
  .topbar { grid-template-columns: auto 1fr; }
  .mode-switcher { justify-self: end; }
  .icon-btn { display: none; }
  .child-shell, .teacher-shell { display: block; }
  .lesson-rail { min-height: auto; padding: 24px 18px 14px; display: block; }
  .lesson-rail h1 { font-size: 28px; margin-top: 14px; }
  .lesson-rail > p, .lesson-rail .reward-card, .progress-track { display: none; }
  .rail-steps { margin-top: 18px; grid-template-columns: repeat(4, 1fr); }
  .rail-step { justify-content: center; min-height: 46px; padding: 0 8px; font-size: 12px; }
  .rail-step span { display: none; }
  .child-content { padding: 20px 14px 90px; }
  .teacher-nav { border-right: 0; border-bottom: 1px solid var(--line); padding: 24px 16px 15px; }
  .teacher-nav nav { display: flex; overflow-x: auto; margin-top: 18px; }
  .teacher-tab { min-width: max-content; }
  .teacher-nav .outline-btn { position: absolute; right: 16px; top: 102px; }
  .teacher-content { padding: 28px 16px 100px; }
  .objective-board { grid-template-columns: 1fr; }
  .objective-board article { min-height: auto; }
  .core-characters { grid-template-columns: repeat(4, 1fr); }
  .family-overview, .parent-note { grid-template-columns: 1fr; }
  .dashboard-shell { padding-bottom: 100px; }
}

@media (max-width: 560px) {
  .topbar { min-height: 66px; padding: 8px 14px; }
  .brand-logo { width: 48px; height: 48px; object-fit: cover; object-position: left; }
  .brand span { display: none; }
  .mode-btn { min-width: 60px; padding: 0 10px; }
  .reader-toolbar { align-items: flex-start; }
  .reader-toolbar > div:first-child { display: grid; gap: 4px; }
  .audio-badge { width: max-content; }
  .toolbar-actions .soft-btn { width: 48px; padding: 0; overflow: hidden; font-size: 0; }
  .toolbar-actions { flex-wrap: wrap; justify-content: flex-end; }
  .script-switch button { width: 34px; }
  #pinyinToggle::before { content: "P"; font-size: 15px; font-weight: 700; }
  #fullAudioButton::before { content: "♫"; font-size: 18px; }
  #speakButton { width: auto; padding: 0 12px; font-size: 12px; }
  .story-scene { min-height: 330px; }
  .lantern { left: 60%; }
  .koi-art { width: 220px; left: 1%; bottom: 8%; }
  .story-copy { padding: 20px 16px 24px; }
  .page-dots { gap: 4px; }
  .page-dots button:nth-child(even) { display: none; }
  .challenge-scene { height: 210px; gap: 35px; }
  .word-tile { min-height: 100px; }
  .word-tile span { font-size: 48px; }
  .writing-layout { grid-template-columns: 1fr; }
  .pinyin-picture { height: 220px; }
  .writing-tools { grid-template-columns: 1fr 1fr; }
  .stroke-card { grid-column: 1/-1; }
  .dashboard-intro h1 { font-size: 44px; }
  .today-card, .home-progress { padding: 24px; }
  .plan-item { grid-template-columns: 44px 1fr; gap: 13px; }
  .plan-item > span { display: none; }
  .parent-note { gap: 15px; }
  .lesson-selector { overflow-x: auto; }
  .lesson-block { grid-template-columns: 1fr; gap: 4px; }
  .assessment-row { grid-template-columns: .8fr repeat(3, 1fr); font-size: 11px; }
  .assessment-row > span { padding: 8px 6px; }
  .resource-list article { grid-template-columns: 40px 1fr; gap: 10px; }
  .resource-list article button { grid-column: 2; width: max-content; }
  .teacher-heading { align-items: flex-start; }
  .duration { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

@media print {
  .topbar, .mode-switcher, .teacher-nav, .toast { display: none !important; }
  body { background: #fff; color: #111; }
  .mode-panel { display: none !important; }
  #teacherMode { display: block !important; }
  .teacher-shell { display: block; }
  .teacher-content { padding: 0; }
  .teacher-page { display: block !important; break-after: page; }
  .objective-board { grid-template-columns: repeat(3, 1fr); }
}