/* ==========================================================================
   汉字小岛 · 样式（UX V3 设计系统，2026-11-08 合并）
   - 颜色、字号、圆角令牌在 :root（“岛屿纸本”主题：--paper / --card / --ink / --muted / --line / --sea / --leaf / --sun）。
   - 同一媒体条件下，每个选择器只定义一次；同一媒体条件的规则在同一个 @media 块里。
   - 例外（合并会改变层叠结果，保留两处定义，改动时两处一起看）：
     .nav-item  main  .text-button  .card  .char-card .hanzi  .choice  .today  .today .greet  .today-art  .offline-note
     以及 @media (max-width:650px) 里的 main。
   - 合并方法与验证：docs/产品美学与用户体验全面审计及重构报告.md 11.4.2（196 份 DOM 快照逐元素比较，渲染不变）。
   - 文件顺序就是层叠顺序：新规则请加到对应组件已有的规则里，不要在文件末尾再追加一层覆盖。
   ========================================================================== */
*{box-sizing:border-box}
button,input,select{font:inherit}
button,a,input,select{-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default;opacity:.5}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:0;background:none;color:inherit;touch-action:manipulation}
h1,h2,h3,p{margin:0}
h2{font-size:1.25rem;line-height:1.5}
h3{font-size:1.0625rem}
p{line-height:1.85}
.muted{color:var(--muted)}
/* ---- Child palette: warm ground,vivid accents,one bright start button ---- */
.topbar{height:90px;display:flex;align-items:center;justify-content:space-between;padding:0 max(32px,calc((100vw - 1260px)/2));gap:30px;border-bottom-color:#efe9dc;position:relative;background:rgba(255,253,248,.94);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:12px;align-items:center;white-space:nowrap;font-size:1.25rem;font-weight:750;letter-spacing:1px}
.topbar nav{display:flex;gap:10px}
/* Contrast and touch fixes from the review: grey nav labels reach 4.5:1, the licence link gets a 44 px target, the offline line is 14 px. */
.nav-item{padding:12px 16px;border-radius:12px;display:flex;align-items:center;gap:8px;color:#6e6453}
.ico{width:20px;height:20px;display:inline-block;vertical-align:middle;flex-shrink:0}
.top-actions{display:flex;align-items:center;gap:14px}
.icon-button{width:44px;height:44px;border-radius:50%;background:#f7f5f0;font-size:1.4375rem;display:inline-grid;place-items:center}
.icon-button.on{background:#e5f1e8;color:var(--green)}
main{margin:0 auto;padding:38px 0 48px}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;gap:20px}
.page-head p{color:var(--muted);font-size:0.875rem;margin-top:7px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 302px;gap:24px}
.hero{position:relative;background:var(--sea-soft);border-radius:24px;min-height:300px;overflow:hidden;display:flex;align-items:center;padding:35px}
.hero h1{font-size:2.125rem;line-height:1.55;margin:14px 0 12px}
.hero p{color:var(--muted);font-size:0.875rem}
.button.wide{width:100%}
.hero .button{margin-top:23px}
.section-head{display:flex;justify-content:space-between;align-items:center;margin:28px 0 16px}
.text-button{color:var(--blue)}
.card{background:var(--card);border-radius:20px;padding:23px;border-color:#ece7dc;box-shadow:var(--shadow)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.round-icon{width:43px;height:43px;border-radius:14px;display:inline-grid;place-items:center;background:var(--blue-soft);font-size:1.375rem;color:var(--blue)}
.tasks{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.task-card{padding:21px;text-align:left;min-height:168px;position:relative;transition:transform .1s}
.task-card:hover{transform:translateY(-3px)}
.task-card h3{margin:17px 0 7px}
.task-card p{font-size:.8125rem;color:var(--muted)}
.task-card .arrow{position:absolute;right:20px;top:29px;color:var(--muted)}
.week{display:flex;justify-content:space-between;margin:20px 0 6px;gap:5px}
.day{text-align:center;font-size:.8125rem;color:var(--muted)}
.day i{display:grid;place-items:center;font-style:normal;width:28px;height:28px;border-radius:50%;background:#f8f6f2;margin-bottom:8px;font-size:.8125rem}
.day.done i{background:#e3f0e4;color:var(--green)}
.day.today i{outline:1px solid #9cc8bf;background:var(--blue-soft);color:var(--blue)}
.mini-stats{display:flex;gap:28px;margin-top:22px}
.mini-stats b{font-size:1.5rem;display:block}
#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);max-width:90vw;padding:14px 23px;border-radius:14px;background:#3d372c;color:white;font-size:0.875rem;z-index:50;box-shadow:0 7px 24px #0002;opacity:0;pointer-events:none;transition:opacity .2s}
#toast.visible{opacity:1}
/* UA-02：孩子页（焦点模式）的 toast 放到顶部，不再压住页脚的主按钮和“听一句话”；限宽避开手机右上角的“听”按钮。 */
body.focus #toast{top:calc(60px + env(safe-area-inset-top,0px));bottom:auto;max-width:min(60vw,520px)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.theme-card{text-align:left;position:relative;overflow:hidden;padding:22px;min-height:175px}
.theme-card .theme-icon{font-size:2rem;display:block;margin-bottom:18px}
.theme-card h3{margin-bottom:8px}
.theme-card p{font-size:.8125rem;color:var(--muted)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.char-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.char-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 10px;background:#fff;border:1px solid var(--line);border-radius:17px}
.char-card .hanzi{font-family:"Kaiti SC",KaiTi,"STKaiti",serif}
.char-card.known{border-color:#c8dfcc}
.empty{padding:45px 25px;text-align:center;color:var(--muted)}
.empty b{display:block;margin:16px;color:var(--ink)}
.practice-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.study-card{padding:32px;text-align:center;min-height:480px;border-top:6px solid #c6e0d8;position:relative}
.big-char{font-family:"Kaiti SC",KaiTi,"STKaiti",serif;font-size:6.75rem;line-height:1.3;margin:9px 0;color:var(--ink);text-shadow:none}
.pinyin{font-size:1.4375rem;letter-spacing:2px;margin-top:18px;color:var(--sea-ink)}
.sentence{font-size:1.1875rem;line-height:2;margin:20px auto;max-width:650px}
.mentor{display:flex;align-items:center;gap:12px;text-align:left;font-size:0.8125rem;color:var(--muted);line-height:1.8}
.mentor i{font-size:1.6875rem;font-style:normal}
.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;max-width:520px;margin:28px auto}
/* The character is the hero: bigger glyphs,clearer contrast when it is found. */
/* 答案卡：像一张放在桌上的字卡；选对是叶绿，选错只变成暖黄（不是红色）。 */
.choice{padding:17px;min-height:104px;border:2px solid #f1ece3;background:var(--card);border-radius:17px;transition:background .15s,transform .1s;box-shadow:var(--press);border-color:var(--line)}
.feedback.success{color:#2f7d4c}
.writer-box{width:min(100%,400px);aspect-ratio:1;position:relative;margin:auto;border:2px solid #e5e2dc;background:linear-gradient(45deg,transparent 49.8%,#f1ece4 50%,transparent 50.3%),linear-gradient(-45deg,transparent 49.8%,#f1ece4 50%,transparent 50.3%),#fffdf9;border-radius:14px;touch-action:none;overflow:hidden;border-color:#d9cdb6;box-shadow:var(--shadow)}
.writer-box:before,.writer-box:after{content:'';position:absolute;pointer-events:none;z-index:0}
.writer-box:before{width:100%;top:50%;border-top:1px dashed #dfdbd3}
.writer-box:after{height:100%;left:50%;border-left:1px dashed #dfdbd3}
.writer-box svg{position:relative;touch-action:none;z-index:1;display:block}
.completion{text-align:center;padding:42px 30px}
.completion h1{margin:16px 0}
.garden{border-radius:23px;position:relative;background:linear-gradient(180deg,#eef6f2,#f6f0e2);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:16px 0;margin-bottom:24px;box-shadow:inset 0 0 0 1px #fff,var(--shadow)}
/* The decorations and the island live in one box,so a dragged decoration really lands on the island. */
.garden-art{position:relative;width:100%;max-width:420px}
.garden-art img{width:100%;height:auto;display:block}
.garden img{height:auto;max-width:100%}
.shop-item{text-align:center}
.shop-item .item-art{font-size:3rem;margin:8px 0 20px}
.shop-item h3{margin-bottom:10px}
.shop-item p{font-size:.8125rem;color:var(--muted);margin-bottom:17px}
.leaderboard td{border-top:1px solid var(--line);padding:20px 15px}
.leaderboard .rank{font-size:1.25rem;color:var(--blue);font-weight:700}
.leaderboard tr:first-child td{background:#fafbff}
.parent-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.form-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:20px 0}
.form-row select,.form-row input{border:1px solid #e6e2dc;background:#fff;border-radius:10px;padding:11px;color:var(--ink);max-width:155px;min-height:48px;font-size:1rem}
.parent-note{padding:16px;background:var(--paper);border-radius:13px;line-height:1.9;font-size:0.8125rem;color:#756a57;overflow-wrap:anywhere}
.report-list{padding:0;list-style:none}
.report-list b{color:var(--blue)}
dialog{border:0;border-radius:var(--ds-r-lg);padding:35px;width:min(590px,calc(100vw - 32px));max-height:90vh;color:var(--ink);box-shadow:0 20px 80px #1b2b442a;overflow:auto}
dialog::backdrop{background:#20304755;backdrop-filter:blur(4px)}
.modal-close{position:absolute;right:15px;top:15px}
.modal-title{margin:10px 35px 15px 0}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}
.story-text{font-size:1.375rem;line-height:2.3;padding:25px;background:var(--paper);border-radius:17px;margin-top:20px}
.info-banner{padding:17px 20px;margin-bottom:22px;background:var(--sun-soft);border:1px solid #f0dfb0;color:#95866c;border-radius:14px;font-size:0.8125rem;line-height:1.9}
.matching{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}
.matching button.matched{border-color:#9cc9a6;background:#edf7ef;color:#4d8862}
.sparkles{pointer-events:none;position:fixed;inset:0;overflow:hidden;z-index:90}
.sparkles span{position:absolute;top:-20px;animation:fall 1.8s ease-in forwards;font-size:1.4375rem;line-height:0}
@keyframes fall{to{transform:translateY(90vh) rotate(220deg);opacity:0}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (min-width:1400px){
  main{padding-top:44px}
  .hero{min-height:315px}
  .today.is-done .today-art{max-width:min(330px,30vh)}
}
@media (max-width:1340px){
  main,footer{margin-left:32px;margin-right:32px}
  .topbar{padding:0 32px}
}
@media (max-width:1100px){
  .topbar{gap:10px}
  .nav-item{padding:12px}
  .nav-item .ico{display:none}
  .layout{grid-template-columns:minmax(0,1fr) 265px;gap:18px}
  .hero{padding:26px;min-height:300px}
  .hero h1{font-size:1.75rem}
  .task-card{padding:17px}
  .card{padding:20px}
  .char-grid{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:900px){
  .topbar{height:78px}
  .brand{font-size:1.125rem}
  .brand small{font-size:.8125rem}
  .topbar nav{gap:0}
  .nav-item{font-size:.8125rem;padding:12px 10px}
  .top-actions{gap:8px}
  .layout{grid-template-columns:1fr}
  .hero{min-height:290px}
  .hero h1{font-size:2.0625rem}
  .char-grid{grid-template-columns:repeat(5,1fr)}
  .grid{grid-template-columns:repeat(3,1fr)}
  .parent-grid{grid-template-columns:1fr}
  .study-card{padding:25px}
}
@media (max-width:650px){
  .nav-item .ico{display:block;width:19px;height:19px}
  .brand img{width:36px;height:36px}
  main{margin:0;padding:25px 20px 30px;min-height:calc(100vh - 170px)}
  footer{margin:0 20px 85px;display:block;text-align:center;font-size:.8125rem}
  .page-head{margin-bottom:22px}
  .page-head h1{font-size:1.625rem}
  .page-head p{font-size:.8125rem}
  .hero h1{font-size:1.8125rem;margin:12px 0 8px}
  .hero p{max-width:220px;font-size:.8125rem}
  .hero .button{margin-top:20px;position:relative;z-index:2}
  .task-card h3{margin:0 0 5px;font-size:0.9375rem}
  .task-card p{font-size:.8125rem}
  .section-head h2{font-size:1.125rem}
  .theme-card h3{font-size:0.9375rem}
  .char-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .practice-top .pill{font-size:.8125rem}
  .study-card{padding:22px 16px;min-height:440px}
  .study-card h2{font-size:1.3125rem}
  .study-sub{font-size:.8125rem}
  .sentence{font-size:1.0625rem}
  .study-footer .button{width:100%}
  .leaderboard th,.leaderboard td{padding:14px 8px;font-size:.8125rem}
  .completion{padding:30px 18px}
  .completion h1{font-size:1.625rem}
}
.learn-layout{display:grid;grid-template-columns:1fr 270px;gap:25px;align-items:center;margin:20px 0}
.scene-card svg{width:100%;max-width:300px}
.motion-float{animation:float 2.5s ease-in-out 2}
.motion-rain{animation:raindrop 1.6s ease-in-out 3}
.motion-sway{animation:sway 2s ease-in-out 3}
.motion-grow{animation:grow 2.8s ease-in-out 2}
.motion-run{animation:run 2s ease-in-out 3}
.motion-glow{animation:glow 2.5s ease-in-out 2}
@keyframes float{50%{transform:translateY(-8px)}}
@keyframes raindrop{0%{transform:translateY(-10px);opacity:.5}70%{opacity:1}100%{transform:translateY(7px)}}
@keyframes sway{50%{transform:rotate(9deg)}}
@keyframes grow{0%{transform:scale(.7) translateY(12px)}100%{transform:scale(1)}}
@keyframes run{0%{transform:translateX(-20px)}100%{transform:translateX(20px)}}
@keyframes glow{50%{opacity:.65;transform:scale(1.08)}}
@media (max-width:650px){
  .learn-layout{grid-template-columns:1fr 125px;gap:5px}
  .big-char{font-size:5.375rem}
  .scene-card .text-button{font-size:.8125rem}
}
.scene-stage{position:relative;display:grid;place-items:center;aspect-ratio:300/190;background:#eef4f6;border-radius:22px;overflow:hidden}
.scene-stage:after{content:'';position:absolute;bottom:12%;width:72%;height:13%;border-radius:50%;background:#dce8d9}
.scene-stage img{position:relative;z-index:1;width:40%;height:auto;max-height:120px;object-fit:contain}
.context-scene{background:#f5f2eb;border-radius:20px;padding:17px 15px 0;text-align:left}
.context-label{font-size:.8125rem;letter-spacing:1px;color:#9f917a}
.context-bubble strong{color:#1f6f68;font-weight:600}
.context-scene>svg{width:100px;height:70px;display:block;margin:7px auto 0}
.scene-stage .scene-symbol{transform-origin:50% 70%}
@media (max-width:650px){
  .learn-layout:has(.context-scene){grid-template-columns:1fr}
  .context-bubble{margin:0;font-size:0.875rem;flex:1}
  .context-scene>svg{width:60px;flex-shrink:0}
  .scene-card small{display:block;font-size:.8125rem}
  .scene-stage img{width:48%}
  .visual-purpose{display:none}
}
.passport{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;margin-bottom:12px}
.stamp{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;border:2px dashed #e0dcd5;border-radius:18px;opacity:.55;text-align:center}
.stamp span{font-size:1.75rem}
.stamp.got{opacity:1;border-style:solid;border-color:#c9b27a;background:#fdf8ec}
.stamp small{color:var(--muted,#888072)}
.today{margin:1.6vh auto 0}
.today .greet{margin:0 0 6px}
.today-art{position:relative;max-width:420px;margin:0 auto;aspect-ratio:540/360}
.today-art img{width:100%;display:block}
.today .family-card{margin-top:28px;text-align:left}
body.focus .topbar nav,body.focus footer,body.focus #music{display:none}
body.focus .parent-link{visibility:hidden}
.parent-link{font-size:0.9375rem;color:var(--muted);padding:8px 12px}
.write-actions .button{margin:0}
.study-card .study-sub{font-size:1.0625rem}
.study-card h2{font-size:1.625rem;margin:12px 0}
.done-lines{margin:16px auto 20px;max-width:440px;text-align:center}
.done-lines p{font-size:1.1875rem;line-height:1.7;margin:4px 0}
.mini-stats.growth{flex-wrap:wrap;gap:16px}
.mini-stats.growth>div{flex:1 1 40%}
@media (max-width:650px){
  .today-summary{font-size:1.25rem}
}
[hidden]{display:none!important}
.study-footer:has(>.text-button:only-child),.study-footer:has(>.help-button:only-child){justify-content:center}
.feedback.success,.feedback.hint{font-size:1.5rem;font-weight:650;display:flex;align-items:center;justify-content:center}
button,.choice,.writer-box,.nav-item{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.small{font-size:0.875rem}
.chip{padding:10px 18px;min-height:48px;border-radius:24px;border:1px solid var(--line);background:#fff;font-size:0.9375rem}
.pill{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;background:#fff;border:1px solid var(--line);border-radius:30px;font-size:0.8125rem;white-space:nowrap;min-height:36px}
.practice-top .pill{font-size:0.875rem}
.study-sub{font-size:1.0625rem;color:var(--muted)}
.task-card p,.theme-card p,.shop-item p,.scene-card small{font-size:0.875rem}
.scene-card small{display:block;font-size:.8125rem;margin-top:9px;line-height:1.7;color:#877c68}
.tiny-label{font-size:.8125rem;letter-spacing:1px;color:#9a8b6b;margin-bottom:10px}
.form-row label{font-size:1rem}
.form-row label small{display:block;color:var(--muted);font-size:0.8125rem;margin-top:6px}
.parent-note,.info-banner{font-size:0.875rem}
.report-list li{padding:15px 0;border-bottom:1px solid var(--line);font-size:0.9375rem;line-height:1.8}
.leaderboard th{text-align:left;font-weight:500;color:var(--muted);padding:15px;font-size:0.8125rem}
.char-card small{color:var(--muted);font-size:.8125rem}
.mini-stats span{font-size:.8125rem;color:var(--muted)}
.context-bubble{margin-top:10px;position:relative;background:white;padding:14px;border-radius:12px;font-size:1rem;line-height:1.9;color:#7f725c}
.choice:active:not(:disabled),.task-card:active,.chip:active,.word-tag:active,.char-card:active,.matching button:active,.theme-card:active{transform:scale(.97)}
@media (hover:none){
  .task-card:hover{transform:none}
}
.completion .pill{display:flex;width:max-content}
@media (min-width:700px) and (orientation:portrait){
  .today-summary{font-size:1.625rem}
}
@media (orientation:landscape) and (max-height:840px){
  main{padding-top:22px}
  .today{margin-top:1vh}
  .today .greet{font-size:1.25rem;margin-bottom:0}
  .today-summary{font-size:1.375rem;margin:10px 0 16px}
  .choices{margin:16px auto}
  .choice{min-height:84px}
  .big-char{font-size:5.75rem}
  .learn-layout{margin:10px 0}
}
@media (max-width:650px){
  .text-button{font-size:0.9375rem}
  .choice{min-height:88px;font-size:2.5rem}
  .button{font-size:1rem}
  .nav-item{display:flex;flex-direction:column;gap:5px;font-size:.8125rem;padding:8px 13px;min-height:0}
}
@media (orientation:landscape) and (max-height:840px){
  body.focus main{min-height:0;padding:16px 0 20px}
  body.focus .study-card{padding:18px 32px}
}
.choice.selected{border-color:var(--blue);background:var(--blue-soft)}
/* ---- Typography pass ---- */
h1{font-size:2rem;line-height:1.45;letter-spacing:0}
footer{max-width:1260px;margin:auto;padding:20px 0;border-top:1px solid var(--line);color:#968972;display:flex;justify-content:space-between;font-size:.8125rem}
.brand small{display:block;letter-spacing:1.8px;color:#9c8f77;margin-top:5px;font-size:.8125rem}
.eyebrow{font-size:.8125rem;letter-spacing:2px;font-weight:700;color:#877b66;margin-bottom:9px}
.feedback.hint{color:#8a6a2a}
.today-theme+.today-summary{margin-top:4px}
@font-face{font-family:"Island Kai";src:url(assets/fonts/island-kai.woff2) format("woff2");font-display:swap;unicode-range:U+4E00-9FFF,U+FF1F}
.big-char,.char-card .hanzi{font-family:"Island Kai","Kaiti SC",KaiTi,STKaiti,serif}
@keyframes glow-box{0%{box-shadow:0 0 0 0 #8bbb9700}40%{box-shadow:0 0 0 10px #8bbb9766}100%{box-shadow:0 0 0 0 #8bbb9700}}
.writer-box.done{animation:glow-box .8s ease-out;border-color:#8bbb97}
.feedback .mark{display:inline-flex;width:46px;height:46px;border-radius:50%;align-items:center;justify-content:center;font-size:1.75rem;font-weight:700;margin-right:12px;vertical-align:middle;animation:pop .35s ease-out}
.quiz-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.quiz-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;background:#f7f9fc;border-radius:14px}
.quiz-item .hanzi{font-size:2.25rem;font-family:"Island Kai","Kaiti SC",KaiTi,STKaiti,serif;line-height:1.2}
.quiz-item small{font-size:.8125rem;color:var(--muted);text-align:center}
/* ---- Apple-style pass A: motion,type scale ---- */
html{overscroll-behavior-y:contain;font-size:100%}
@keyframes fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sentence em.filled.ok{background:#e4f3e7;color:var(--green)}
.sentence em.filled.no{background:#fff1dc;color:#8a6a2a;text-decoration:line-through}
.brand span{font-size:1.25rem}
.item-art .emoji{width:56px;height:56px}
.decoration .emoji{width:1em;height:1em;vertical-align:baseline}
.stamp span .emoji{width:34px;height:34px}
.theme-icon .emoji{width:36px;height:36px}
.mentor i .emoji{width:32px;height:32px}
/* ---- Apple-style pass C ---- */
.stroke-dots{display:flex;gap:7px;justify-content:center;margin:4px 0 10px;min-height:10px}
.stroke-dots i{width:10px;height:10px;border-radius:50%;background:#ebe4d7;transition:background .2s}
.grid-label{position:absolute;left:10px;right:10px;top:10px;z-index:2;text-align:center;font-size:.95rem;line-height:1.5;color:#7d715c;pointer-events:none;background:#fffdf9d9;border-radius:10px;padding:5px 10px}
.grid-label button{pointer-events:auto}
/* The small island on the home page stays calm: only what grows from learning, nothing spilling over the frame. */
.hero-island{max-width:300px;margin:0 auto 6px;animation:grow-in .5s ease-out;overflow:hidden}
@keyframes stamp-in{0%{transform:scale(1.5) rotate(-12deg);opacity:0}60%{transform:scale(.95) rotate(2deg);opacity:1}100%{transform:none}}
.stamp.fresh{animation:stamp-in .5s ease-out}
.garden .decoration.dragging{transform:scale(1.15);cursor:grabbing;filter:drop-shadow(0 10px 8px #0002)}
.segmented{display:inline-flex;flex-wrap:wrap;max-width:100%;background:#f4f0ea;border-radius:12px;padding:3px;gap:2px}
/* 家长设置在窄屏不被选项撑宽（审查 UI-01：390 宽时页面被撑到 463 宽、整页缩小） */
.parent-grid>*,.form-row>*{min-width:0}
.segmented button{min-width:44px;min-height:44px;padding:8px 14px;border-radius:10px;font-size:1rem;color:var(--muted)}
.segmented button.on{background:#fff;box-shadow:0 1px 4px #0002;font-weight:650;color:var(--blue)}
.form-row:has(.segmented){flex-wrap:wrap}
/* ---- Stable layout while answering: nothing below the choices moves ---- */
.feedback{min-height:68px;padding:10px;color:#7d715c;font-size:1rem;line-height:1.7;display:flex;align-items:center;justify-content:center}
.study-footer{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-top:24px;min-height:64px}
.sentence em{font-style:normal;color:var(--blue);background:var(--sea-soft);padding:3px 5px;border-radius:6px;display:inline-block;min-width:3.4em;text-align:center}
.choice.correct:disabled,.choice.selected:disabled{opacity:1}
.write-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;margin:8px 0 4px;min-height:52px;align-items:center}
.write-actions.done{visibility:hidden}
.learn-more{animation:fade-in .25s ease-out}
.words-line{display:flex;justify-content:center;gap:12px;margin:19px 0;min-height:48px}
.hint-inline{font-size:1.25rem;font-weight:500}
.hint-inline b{font-family:"Island Kai","Kaiti SC",KaiTi,STKaiti,serif;font-size:1.6rem;font-weight:400;margin:0 2px}
/* ---- Audit pass: spacing and hierarchy ---- */
.study-card.compact{min-height:0}
.visual-purpose{display:none;font-size:.8125rem;color:#b3aa98;margin-top:9px}
.write-actions .help{visibility:visible;display:none}
.write-actions.show-help .help{visibility:visible;display:inline-flex}
.today .greet{font-size:1.5rem;color:var(--ink);font-weight:600}
.today-theme{font-size:1.1rem;color:var(--muted);margin:12px 0 0;margin-top:16px}
.today-theme .emoji{width:26px;height:26px}
.today-summary{font-size:1.65rem;line-height:1.6;margin:8px 0 26px;color:var(--ink);text-wrap:balance}
@media (min-width:700px) and (orientation:portrait){
  .today{margin-top:0;min-height:calc(100dvh - 260px);display:flex;flex-direction:column;justify-content:center}
  .today-art{max-width:480px}
}
.leaderboard{width:100%;border-collapse:collapse;font-size:1rem}
/* ---- Apple-style pass B: one icon set everywhere ---- */
/* ---- Icon consistency + purposeful motion ---- */
.emoji{width:1.2em;height:1.2em;vertical-align:-.22em;display:inline-block;object-fit:contain;filter:saturate(.82)}
.text-button .ico,.word-tag .ico{width:18px;height:18px}
.mark .ico{width:26px;height:26px;stroke-width:2.4}
.task-card .arrow .ico{width:18px;height:18px}
.today-art .decoration:nth-child(odd){animation-duration:5s;animation-delay:-2s}
@keyframes tile-pop{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes dot-pop{0%{transform:scale(1)}50%{transform:scale(1.6)}100%{transform:scale(1)}}
.stroke-dots i.done{background:#8bbb97;animation:dot-pop .3s ease-out}
.garden .decoration.new{animation:pop .5s ease-out}
/* Content sits a little higher so the day starts at the greeting,not under an empty band. */
.today{max-width:560px;text-align:center;padding:0 8px;align-items:center}
.today .button.big{width:auto}
/* A text link next to the main button always sits under it, centred, in every orientation. */
.today>.text-button{display:block;margin:10px auto 0}
.button.big{min-height:64px;padding:16px 48px;font-size:1.25rem;border-radius:18px;background:var(--sea);box-shadow:0 4px 0 #134b46,0 10px 22px rgba(31,111,104,.2)}
.button.big:active{transform:scale(.97)}
.mark.ok{background:#2f7d4c;color:#fff}
.mark.no{background:#ffe3a6;color:#8a5f0a}
.today-art,.hero-island,.garden{border-radius:28px}
.round-icon.big{width:68px;height:68px;border-radius:22px;font-size:30px}
.round-icon.big .ico{width:30px;height:30px}
/* welcome flow */
.welcome{max-width:560px;margin:3vh auto 0;text-align:center;padding:0 8px;display:flex;flex-direction:column;align-items:center;position:relative}
/* UX-011: undo a mistaken age tap; a small last line under the buttons, so the page keeps one main button. */
.welcome .age-change{order:10;font-size:.875rem;min-height:44px;padding:4px 10px;color:var(--muted)}
.welcome-skip{align-self:flex-end}
.welcome h1{margin:14px 0 6px;font-size:2rem}
.welcome .today-summary{margin:0 0 18px}
.welcome-art{max-width:420px;width:100%}
.three{display:flex;gap:18px;justify-content:center;margin:26px 0 10px;flex-wrap:wrap}
.three b{font-size:1.15rem}
.three small{color:var(--muted);font-size:.9rem}
.three>div:nth-child(1) .round-icon{background:#e3f0ec;color:var(--blue)}
.three>div:nth-child(2) .round-icon{background:#eaf5ec;color:var(--green)}
.three>div:nth-child(3) .round-icon{background:#fff1c2;color:#b07d12}
.welcome-form{display:flex;flex-direction:column;align-items:center;gap:14px;margin:24px 0 8px;width:100%}
.welcome-form input{font-size:1.6rem;text-align:center;padding:12px 18px;border:2px solid var(--line);border-radius:16px;width:min(100%,320px);background:#fff}
.dots{display:flex;gap:8px;justify-content:center;margin:14px 0 20px}
.dots i{width:9px;height:9px;border-radius:50%;background:#dcd6c8}
.dots i.on{background:var(--blue);width:22px;border-radius:6px}
.choices.gate{grid-template-columns:repeat(4,1fr);max-width:none;gap:10px;margin:20px 0 0}
.choices.gate .choice{font-size:1.6rem;min-height:64px}
.completion .pill.yellow{animation:fade-in .4s ease-out 1.15s both}
.badge-won{animation:fade-in .5s ease-out both;margin:4px 0 14px;display:flex;flex-direction:column;align-items:center;gap:6px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:30px;background:#fff1c2;color:#8a5f0a;font-weight:650;font-size:1.05rem}
.badge .ico{width:20px;height:20px}
.badge-won small{color:var(--muted)}
.goal{display:flex;align-items:center;gap:18px;margin-bottom:20px;padding:18px 22px}
.goal-art .emoji{width:56px;height:56px}
.goal-text{flex:1}
.goal-text b{font-size:1.15rem}
.goal-text .progress{margin:10px 0 6px}
.goal-text small{color:var(--muted)}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:8px}
.badge-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border:2px dashed #ddd7c8;border-radius:20px;text-align:center;opacity:.6}
.badge-card .round-icon{background:#f3efe4;color:#b9b19d}
.badge-card.got{opacity:1;border-style:solid;border-color:#f0d98a;background:#fffbea}
.badge-card.got .round-icon{background:#fff1c2;color:#c08a12}
.badge-card b{font-size:1rem}
.badge-card small{color:var(--muted);font-size:.85rem}
.today-note{font-size:1.1rem;color:var(--green);margin:12px 0 0;font-weight:600}
/* ---- Asset & motion pass ---- */
.scene-symbol{transform-box:fill-box;transform-origin:center;filter:saturate(.82)}
.text-button .ico,.button .ico{flex-shrink:0}
/* ambient motion stops after a few cycles so it never competes with the start button or the result lines */
.today-art .decoration,.hero-island .decoration{animation:bob 4s ease-in-out infinite;animation-iteration-count:3}
.welcome-art img{animation:grow-in .6s ease-out both}
.three>div{display:flex;flex-direction:column;align-items:center;gap:8px;width:150px;padding:18px 10px;background:#fff;border:1px solid var(--line);border-radius:22px;animation:fade-in .35s ease-out both}
.three>div:nth-child(2){animation-delay:.08s}
.three>div:nth-child(3){animation-delay:.16s}
.motion-float,.motion-sway,.motion-run,.motion-rain,.motion-glow,.motion-grow{animation-iteration-count:2}
.garden .decoration{touch-action:none;cursor:grab;transition:transform .15s;font-size:48px}
.hero-island .decoration{font-size:34px}
.decoration.plant{pointer-events:none;font-size:34px;position:absolute}
.garden .decoration.plant{font-size:40px}
.decoration.plant .emoji{filter:saturate(.9)}
.grow-note{text-align:center;margin:-12px 0 18px}
@media (min-width:700px){
  .today-art{max-width:560px}
}
@media (orientation:landscape) and (max-height:840px){
  .today-art{max-width:min(520px,44vh)}
}
.buddy.happy{animation:hop .5s ease-out}
.buddy.think{animation:tilt .6s ease-in-out}
@keyframes hop{0%,100%{transform:translateY(0)}35%{transform:translateY(-12px) scale(1.05)}65%{transform:translateY(0) scale(.97,1.03)}}
@keyframes tilt{0%,100%{transform:rotate(0)}40%{transform:rotate(-12deg)}75%{transform:rotate(6deg)}}
.feedback:not(.success):not(.hint) .buddy{opacity:.75}
.write-top{display:flex;align-items:center;justify-content:center;gap:4px;min-height:44px}
.write-top .stroke-dots{margin:0}
.study-card.stage-learn,.study-card.stage-quiz{border-top-color:#c6e0d8}
.study-card.stage-write{border-top-color:#bfe3c9}
.study-card.stage-transfer{border-top-color:#f6dd9a}
.stage-pill.stage-learn,.stage-pill.stage-quiz{background:var(--sea-soft);border-color:#c6e0d8;color:var(--sea-ink)}
.stage-pill.stage-write{background:#eaf6ee;border-color:#cfe9d7;color:#2f7d4c}
.stage-pill.stage-transfer{background:#fff4d6;border-color:#f3e0a6;color:#8a5f0a}
.today .today-art{width:100%}
.buddy{width:44px;height:58px;margin-right:10px;flex-shrink:0;transform-origin:50% 100%;object-fit:contain}
.write-top .buddy{width:36px;height:48px}
/* ---- Island sky,sign,island choice,letters ---- */
.sky{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit;z-index:1}
.sky .moon{position:absolute;right:16%;top:10%;width:9%;aspect-ratio:1;border-radius:50%;box-shadow:inset -.6em -.2em 0 0 #fff3c4;transform:rotate(-20deg)}
.sky .star{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff6cf;animation:twinkle 2.4s ease-in-out 4 both}
@keyframes twinkle{50%{opacity:.25}}
.sky .p{position:absolute;top:-8%;display:block;animation:drift linear 2 both}
.sky.rain .p{width:2px;height:14px;background:#9fbde0;border-radius:2px;animation-name:rainfall;animation-iteration-count:6}
.sky.snow .p{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 2px #d9d4cb}
.sky.leaves .p{width:10px;height:7px;border-radius:70% 0;background:#e8a65a}
.sky.petals .p{width:9px;height:7px;border-radius:60% 40%;background:#f6b8c8}
@keyframes drift{to{transform:translate(18px,110cqh) rotate(320deg);opacity:.2}}
@keyframes rainfall{to{transform:translateY(110cqh);opacity:.3}}
.today-art,.hero-island{container-type:size}
.sign{position:absolute;left:7%;top:44%;z-index:2;display:flex;flex-direction:column;align-items:center;background:#e9c58c;border:2px solid #c99b5b;border-radius:8px;padding:4px 10px 6px;box-shadow:0 3px 0 #b5844a}
.sign:after{content:'';position:absolute;bottom:-26px;left:50%;width:5px;height:24px;background:#b5844a;transform:translateX(-50%);z-index:-1}
.sign small{font-size:.8125rem;color:#7a5326;line-height:1.2}
.sign span{font-family:"Island Kai","Kaiti SC",KaiTi,STKaiti,serif;font-size:1.5rem;color:#5a3a16;letter-spacing:2px;line-height:1.2}
.hero-island .sign span{font-size:1.1rem}
.decoration,.decoration.plant{z-index:2}
.today-ask{font-size:1.15rem;font-weight:650;margin:16px 0 8px}
.island-pick{display:flex;gap:12px;justify-content:center;margin-bottom:6px;width:100%}
.pick{flex:1;max-width:240px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;border:2px solid var(--line);border-radius:20px;background:#fff;transition:transform .1s,border-color .15s}
.pick .emoji{width:40px;height:40px}
.pick b{font-size:1.05rem}
.pick small{font-size:.8125rem;color:var(--muted);line-height:1.4}
.pick.on{border-color:var(--blue);background:var(--sea-soft);box-shadow:0 6px 16px #1f6f6822}
.pick:active{transform:scale(.97)}
.letter-card{display:flex;align-items:center;gap:14px;width:100%;max-width:560px;margin:18px auto 0;text-align:left;padding:16px 20px}
.letter-card .ico{width:30px;height:30px;color:#c08a12}
.letter-card span{display:flex;flex-direction:column}
.letter-card b{font-size:1.1rem}
.letter-card small{color:var(--muted)}
.letter-card.new{border-color:#f0d98a;background:#fffbea;animation:pop .5s ease-out}
.letter-hint{color:#8a5f0a;margin:0 0 14px;display:flex;align-items:center;justify-content:center;gap:6px}
.letter{background:linear-gradient(#fffdf6,#fff8e8);border-radius:16px;padding:18px 20px;font-size:1.2rem;line-height:1.9}
.letter-head{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.9rem;margin-bottom:8px}
.letter p{margin:4px 0}
.letter .to{font-weight:650}
.letter .from{text-align:right;color:var(--muted)}
.mailbox{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-bottom:8px}
.mail{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 6px;border:1px solid var(--line);border-radius:14px;background:#fffdf6;position:relative}
.mail b{font-family:"Island Kai","Kaiti SC",KaiTi,STKaiti,serif;font-size:1.4rem;font-weight:400}
.mail small{color:var(--muted)}
.mail.new:after{content:'';position:absolute;top:8px;right:8px;width:9px;height:9px;border-radius:50%;background:var(--coral)}
.decoration.visitor{font-size:34px;pointer-events:none;animation:bob 5s ease-in-out 2}
.garden .decoration.visitor{font-size:40px}
.visitor-line{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;color:#2f7d4c;font-weight:650;margin:4px 0 10px}
.visitor-line .emoji{width:32px;height:32px}
.dialog-fallback[open]{display:block;position:fixed;top:10vh;left:0;right:0;margin:0 auto;z-index:100;box-shadow:0 0 0 100vmax #20304766}
@media (orientation:landscape) and (max-height:960px){
  /* ---- Landscape tablets (≈700–820px tall) and laptops up to 960px tall (1440×900, UX-003): every study screen fits without scrolling ---- */
  body.focus .topbar{display:none}
  body.focus main{padding:10px 0 12px;min-height:0}
  body.focus .practice-top{margin-bottom:6px}
  body.focus .progress{margin:4px 0 10px!important}
  .study-card h2{font-size:1.4rem;margin:4px 0}
  .choice{min-height:68px;font-size:2.3rem;padding:8px}
  .choice.word-choice{min-height:60px;font-size:1.5rem}
  .study-footer .button{min-height:48px}
  .learn-more .text-button{min-height:40px}
  .done-lines p{font-size:1.05rem;line-height:1.6;margin:2px 0}
  .today:has(.island-pick) .today-art{max-width:min(420px,30vh)}
  .pick .emoji{width:32px;height:32px}
}
.feedback .neutral{font-size:1.15rem;color:var(--muted);font-weight:500}
.choice{font-size:2.75rem}
.choice.word-choice{font-size:1.75rem;min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.opt-word em{font-style:normal;color:var(--blue);background:#e3f0ec;border-radius:7px;padding:0 5px}
.opt-py{font-size:.8125rem;color:var(--muted);letter-spacing:.5px}
.choice.wrong{box-shadow:0 0 0 4px #fbeeda;border-color:#f3c77e;background:var(--sun-soft)}
@keyframes pop{0%{transform:scale(.94)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
/* Days in a row,small but impossible to miss. */
.streak{display:inline-flex;align-items:center;gap:7px;margin:4px auto 0;padding:6px 15px;border-radius:999px;background:#fff6e4;color:#8a5f0a;font-weight:600;font-size:.875rem;border:1px solid #f2e2c4}
.streak .emoji{width:1.05em;height:1.05em}
/* The word garden can be searched and is grouped by island. */
.search-row{display:flex;align-items:center;gap:12px;margin:0 0 20px}
.search-input::placeholder{color:#afa490}
.search-input:focus{outline:3px solid #9cc8bf;outline-offset:2px}
.search-hint{font-size:.8125rem;color:var(--muted);white-space:nowrap}
.char-group{margin-bottom:34px}
.char-group h3{display:flex;align-items:center;gap:9px;font-size:1.0625rem;margin:0 0 14px;color:var(--ink)}
.char-group h3 .emoji{width:22px;height:22px}
.char-group h3 small{margin-left:auto;font-weight:500;color:var(--muted);font-size:.8125rem}
/* Today's card: the small paper she can show her family. */
.day-card{position:relative;margin:20px auto;max-width:520px;padding:18px 22px;background:linear-gradient(180deg,#fffdf7,#fff);border:1px solid #eee3cd;border-radius:20px;box-shadow:0 10px 26px #2332510d;animation:card-in .7s .25s both cubic-bezier(.2,1,.3,1);text-align:left}
@keyframes card-in{from{opacity:0;transform:translateY(16px) rotateX(16deg)}to{opacity:1;transform:none}}
.day-card-head{display:flex;align-items:baseline;justify-content:space-between;color:#8a5f0a}
.day-card-head b{font-size:1rem}
.day-card-head small{font-size:.8125rem;color:var(--muted)}
.day-card-chars{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.dc-char{font-family:"Kaiti SC",KaiTi,"STKaiti",serif;font-size:2.25rem;line-height:1.2;min-width:56px;height:64px;display:grid;place-items:center;background:#fff;border:1px solid #eee3cd;border-radius:12px;color:#4c4537}
.day-card-note{font-size:.8125rem;color:var(--muted)}
.day-card-stamp{position:absolute;right:18px;bottom:14px;width:38px;height:38px;border-radius:50%;background:#f7e8d4;color:#c08b4d;display:grid;place-items:center;transform:rotate(-12deg)}
.day-card-stamp svg{width:20px;height:20px}
/* Radical cards look different from character cards,so a beginner can tell them apart. */
/* Radicals are drawn where they sit inside a character (宀 at the top, 冫 at the left), so they look tiny. Draw them big and name them. */
.matching button.rad{border-style:solid;border-color:rgba(31,111,104,.3);background:var(--sea-soft);color:var(--sea-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:2.6rem;line-height:1}
.matching button.rad.selected{border-color:var(--blue);border-style:solid;background:var(--blue-soft)}
.matching button.rad.matched{border-color:#9cc9a6;border-style:solid;background:#edf7ef;color:#4d8862}
/* ---- Living island,companion,step colours ---- */
/* A gift grows when it arrives,and the island keeps breathing a little. */
.decoration{position:absolute;font-size:44px;filter:drop-shadow(0 5px 3px #0001);animation:breathe 5.5s ease-in-out infinite}
.decoration.new{animation:grow-in .9s cubic-bezier(.2,1.2,.4,1),breathe 5.5s ease-in-out .9s infinite}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.03)}}
@keyframes grow-in{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
/* The island is where learning happens: a soft,out-of-focus copy sits behind every study screen. */
.practice{max-width:880px;margin:auto;position:relative}
.practice>*:not(.study-island){position:relative;z-index:1}
/* When she struggles,the bunny offers its hand instead of a small line of text. */
.bunny-help{display:flex;gap:13px;align-items:flex-start;flex:0 0 100%;margin:0 0 10px;padding:14px 16px;border-radius:16px;background:#fff6e6;border:1px solid #f2dfba;text-align:left}
.bunny-help .buddy{width:52px;height:52px;flex:0 0 auto}
.bunny-help b{display:block;font-size:.9375rem;color:#7a5a22;margin-bottom:3px}
.bunny-help p{font-size:.8125rem;color:#8a7038;line-height:1.6;margin-bottom:9px}
.bunny-help-actions{display:flex;gap:10px;flex-wrap:wrap}
.bunny-help-actions .button{min-height:40px;padding:9px 17px;font-size:.8125rem}
.write-actions.done .bunny-help{display:none}
/* Writing a character changes the island. */
.magic-layer{position:absolute;inset:0;pointer-events:none}
.magic-effect{position:absolute;transform:translate(-50%,-50%);font-size:2.8rem;animation:magic-in .8s cubic-bezier(.2,1.3,.4,1) both;filter:drop-shadow(0 4px 6px #0002)}
.magic-effect .emoji{width:2.8rem;height:2.8rem}
/* A character without a picture still leaves a mark: a small wooden sign with the character on it. */
.magic-sign{display:inline-flex;align-items:center;justify-content:center;min-width:2.6rem;height:2.6rem;padding:0 .34rem;border-radius:9px;background:linear-gradient(#e9c79a,#d9ae7c);border:2px solid #b98d5c;color:#5c3d1c;font-weight:700;font-size:1.5rem;line-height:1;box-shadow:0 3px 5px #0003}
@keyframes magic-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}60%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.magic-line{font-size:.9375rem;color:#8a5f0a;font-weight:600;margin:-4px auto 6px;max-width:520px}
/* The map is a voyage: a progress rail on top and numbered stops below. */
.voyage{margin:0 0 22px;padding:18px 22px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.voyage-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.voyage-head b{font-size:1.0625rem;color:var(--ink)}
.voyage-head span{font-size:.8125rem;color:var(--muted)}
.voyage-rail{display:flex;align-items:center;gap:5px;margin-top:14px}
.voyage-rail i{flex:1;height:8px;border-radius:6px;background:#f3efe9;border:1px dashed #e4e0da}
.voyage-rail i.part{background:#fff6dd;border-color:#f0dca8}
.voyage-rail i.done{background:#8cab8a;border:1px solid #7d9e7b}
.theme-top{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.theme-top .theme-icon{margin-bottom:0}
/* RC-004：走完的主题序号在浅绿底上要够 4.5:1（原 #3f8a55 只有 3.59:1） */
.theme-card.arrived .station{background:#e3f0e4;color:#2c6b40}
.theme-card.arrived{border-color:#c8dfcc;background:#fbfdfb}
.theme-card.arrived .theme-icon{filter:saturate(1.05)}
.theme-card.sailing .station{background:#fff6dd;color:#8a5f0a}
.arrived-mark{display:inline-flex;align-items:center;gap:5px;color:var(--green);font-weight:600}
.arrived-mark svg{width:15px;height:15px}
/* "Later" is a real choice now,not a tiny link she taps by accident. */
.welcome-skip .skip-later{padding:9px 17px;border-radius:12px;background:#fff;border:1px solid var(--line);color:#726855;font-size:.875rem;font-weight:600}
@media (orientation:landscape) and (max-height:820px){
  .day-card-chars .hanzi,.day-card-chars span{font-size:1.4rem}
}
/* Parent page: two cards up front, the rest folded */
.parent-more{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.parent-more details{background:#fff;border:1px solid var(--line);border-radius:18px;padding:0 18px}
.parent-more summary{list-style:none;cursor:pointer;min-height:56px;display:flex;align-items:center;justify-content:space-between;font-size:1.05rem;font-weight:650}
.parent-more summary::-webkit-details-marker{display:none}
.parent-more summary:after{content:'展开';font-size:.9rem;font-weight:500;color:var(--blue)}
.parent-more details[open] summary:after{content:'收起'}
.parent-more details[open]{padding-bottom:18px}
.parent-more .parent-grid .card{box-shadow:none}
.completion .highlight{font-size:1.15rem;color:#2f7d4c;font-weight:650;margin:4px 0 10px}
.home-extras{display:grid;gap:14px;margin-top:14px}
.home-extras>.card{margin:0}
.home-extras:empty{display:none}
@media (min-width:900px){
  .home-extras{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:stretch}
}
@media (min-width:900px) and (max-height:820px){
  .today.is-done .today-art{max-width:min(380px,30vh)}
  .home-extras{margin-top:6px}
  .home-extras .family-card{padding:12px 18px}
  .home-extras .family-card p{margin:4px 0}
  .home-extras .family-card>div[style]{margin-top:8px!important}
}
@media (min-width:700px) and (orientation:portrait){
  .study-card{min-height:520px}
  .today.is-done{min-height:0;margin-top:2vh}
  .today.is-done .today-art{max-width:420px}
}
/* ---- Keyboard island: one screen, prompt above, keyboard below; real-keyboard and finger layouts share it ---- */
.kb-stations{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:6px}
.kb-station{position:relative;text-align:left;padding:18px 18px 16px;min-height:170px;display:flex;flex-direction:column;gap:4px;border:2px solid transparent}
.kb-station h3{font-size:1.15rem;margin:2px 0 0}
.kb-station p{margin:0;color:var(--muted);font-size:.95rem}
.kb-station small{margin-top:auto;color:var(--muted);font-size:.85rem;line-height:1.4}
.kb-station.next{border-color:#9cc8bf;box-shadow:0 0 0 4px #e3f0ec}
.kb-station em{position:absolute;top:12px;right:12px;font-style:normal;font-size:.8125rem;background:var(--blue-soft);color:var(--blue);padding:3px 10px;border-radius:12px}
.kb-station:disabled{opacity:.55}
.kb-st-icon .emoji{width:40px;height:40px}
@media (min-width:1000px){
  .kb-stations{grid-template-columns:repeat(5,1fr)}
}
.kb-step{width:26px;height:26px;border-radius:50%;background:#f1efe9;display:grid;place-items:center;font-size:.85rem;font-weight:600;color:var(--muted)}
.kb-st-icon{font-size:1.9rem;line-height:1.2}
.kb-rest{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;color:var(--muted)}
.kb-page{display:flex;flex-direction:column;min-height:calc(100dvh - 166px)}
.kb-page .practice-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kb-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1;justify-content:center}
.kb-dots{display:flex;gap:6px;margin-left:auto}
.kb-dots i{width:10px;height:10px;border-radius:50%;background:#e4e1da}
.kb-dots i.done{background:#8fc79f}
.kb-dots i.now{background:var(--blue)}
.kb-prompt{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px 20px;margin:10px 0 12px;min-height:0}
.kb-ask{font-size:1.2rem;margin:0 0 6px;color:var(--ink)}
.kb-big{font-size:clamp(64px,14vh,128px);line-height:1;font-weight:600;font-family:ui-rounded,"SF Pro Rounded",system-ui,sans-serif;color:var(--blue);display:flex;flex-direction:column;align-items:center}
.kb-big small{font-size:1rem;font-weight:400;color:var(--muted);margin-top:6px}
.kb-finger{margin:8px 0 0;padding:4px 14px;border-radius:14px;font-size:1rem}
.kb-good{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:1.15rem;color:var(--green)}
.kb-good .buddy{width:34px;height:34px;opacity:1}
.kb-tip{margin:6px 0 0;font-size:.95rem;color:#a06a3a}
.kb-tools{margin-top:6px}
.kb-unit{display:flex;align-items:baseline;gap:14px;margin:2px 0 4px}
.kb-py{font-size:clamp(52px,11vh,96px);font-weight:600;color:var(--blue);font-family:ui-rounded,system-ui,sans-serif;line-height:1}
.kb-py.hidden-py{color:#d4cec4}
.kb-say{font-size:1.4rem;color:var(--muted);font-family:"Island Kai","Kaiti SC",KaiTi,serif}
.kb-letters{display:flex;gap:8px;justify-content:center;margin:8px 0 2px;min-height:58px}
.kb-letters b{min-width:46px;height:56px;border-bottom:3px solid #dad5cc;display:grid;place-items:center;font-size:2.2rem;font-weight:600;font-family:ui-rounded,system-ui,sans-serif}
.kb-letters b.ok{color:var(--ink);border-color:#8fc79f}
.kb-letters b.bad{color:#d0864f;border-color:#f3c39d;animation:kb-wiggle .35s}
.kb-letters b.empty span{color:#d0c9be;font-weight:400}
.kb-word{display:flex;gap:6px;font-family:"Island Kai","Kaiti SC",KaiTi,serif;font-size:clamp(48px,10vh,84px);line-height:1.15}
.kb-word span.target{color:var(--blue)}
.kb-word .blank,.kb-bubble .blank{display:inline-block;width:1em;height:1em;border:3px dashed #cac2b5;border-radius:12px;vertical-align:middle}
.kb-word .blank.filled{border:0;width:auto;height:auto;color:var(--green)}
.kb-plain{font-size:1.6rem;margin:2px 0;color:var(--muted);font-family:ui-rounded,system-ui,sans-serif}
.kb-plain b{color:var(--blue)}
.kb-cands{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0 0}
.kb-cand{min-width:72px;height:72px;border-radius:16px;border:2px solid #ebe3d6;background:#fff;font-family:"Island Kai","Kaiti SC",KaiTi,serif;font-size:2.4rem;position:relative;padding:0 10px}
.kb-cand small{position:absolute;top:3px;left:7px;font:600 .8rem system-ui,sans-serif;color:var(--muted)}
.kb-cand.oops{opacity:.45;animation:kb-wiggle .35s}
.kb-cand.glow{border-color:var(--sun);box-shadow:0 0 0 4px #fff2c4}
.kb-bubble{max-width:min(92%,620px);background:#f6f1e6;border-radius:22px 22px 22px 6px;padding:14px 20px 16px;font-family:"Island Kai","Kaiti SC",KaiTi,serif;font-size:clamp(28px,5.2vh,44px);line-height:1.5;text-align:left;transition:transform .5s,background .5s}
.kb-bubble .kb-to{display:block;font:500 .85rem system-ui,sans-serif;color:var(--muted);margin-bottom:4px}
.kb-bubble .filled{color:var(--blue)}
.kb-bubble .blank{width:.9em;height:.9em}
.kb-bubble .blank.now{border-color:var(--blue);background:#fff}
.kb-bubble.sent{background:#e3f4e6;border-radius:22px 22px 6px 22px;transform:translateX(30px)}
.kb-tones{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 auto;width:min(100%,760px)}
.kb-tone{background:#fff;border:2px solid #ebe3d6;border-radius:18px;padding:10px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:118px}
.kb-tone svg{width:60px;height:30px;fill:none;stroke:#8aa0e4;stroke-width:4;stroke-linecap:round}
.kb-tone b{font-size:1.9rem;font-family:ui-rounded,system-ui,sans-serif}
.kb-tone small{color:var(--muted)}
.kb-tone.oops{opacity:.45;animation:kb-wiggle .35s}
.kb-tone.right{border-color:#8fc79f;background:#eef8f0}
/* Keys: big on a tablet, keyboard-shaped on a computer, with the home-row bumps on F and J. */
/* Keyboard island: when a letter key glows, a small note above the keyboard says it is the bunny's help, so finding it that way reads as practice. */
.kb-board{background:var(--paper-2);border-radius:18px;padding:10px 10px 8px;margin:0 auto;width:min(100%,860px);user-select:none;-webkit-user-select:none;touch-action:manipulation;box-shadow:inset 0 1px 0 #fff,var(--shadow);position:relative}
.kb-row{display:flex;justify-content:center;gap:6px;margin-bottom:6px}
.kb-row.r1{padding-left:3%}
.kb-row.r2{padding-left:8%}
.kb-key{flex:0 0 auto;width:calc((100% - 54px)/10);max-width:78px;height:clamp(46px,7.6vh,68px);border-radius:10px;border:0;background:var(--card);box-shadow:0 3px 0 #d9cdb6;font-size:1.45rem;font-weight:600;color:var(--ink);position:relative;font-family:ui-rounded,system-ui,sans-serif;padding:0}
.kb-key.wide{width:calc((100% - 54px)/10*1.6);max-width:120px;font-size:1.1rem}
.kb-key small{font-size:.8125rem;font-weight:500}
.kb-key.space{width:min(56%,420px);max-width:none;font-size:1rem;font-weight:500;color:var(--muted)}
.kb-key.bump::after{content:"";position:absolute;bottom:8px;left:50%;width:14px;height:3px;margin-left:-7px;border-radius:2px;background:#b7b2a6}
.kb-key.glow{background:var(--sun);box-shadow:0 2px 0 #d9b443;animation:kb-pulse 1.4s ease-in-out infinite}
.kb-key.oops{animation:kb-wiggle .35s}
.phys .kb-key{font-size:1.2rem}
.phys .kb-key:not(.wide):not(.space){border-bottom:5px solid var(--finger,#fff)}
.phys .f0,.phys .f7{--finger:#f4c6d4}
.phys .f1,.phys .f6{--finger:#f8d2a8}
.phys .f2,.phys .f5{--finger:#f5e08e}
.phys .f3{--finger:#a9dcb2}
.phys .f4{--finger:#a9cdf0}
.kb-finger.f0,.kb-finger.f7{background:#fbe3ea}
.kb-finger.f1,.kb-finger.f6{background:#fde9d4}
.kb-finger.f2,.kb-finger.f5{background:#fbf0c7}
.kb-finger.f3{background:#dff1e3}
.kb-finger.f4{background:#ddebf9}
.touch .kb-key:not(.space):not(.wide){font-size:1.65rem;max-width:84px}
.kb-end-art .buddy{width:84px;height:84px;margin:0 auto;opacity:1}
.kb-end .actions{display:flex;gap:12px;justify-content:center;margin-top:14px;flex-wrap:wrap}
@keyframes kb-pulse{50%{box-shadow:0 2px 0 #d9b443,0 0 0 6px #fff1bf}}
@keyframes kb-wiggle{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (orientation:landscape) and (max-height:820px){
  /* Short landscape screens (tablet held sideways, small laptops): tighter prompt so the whole keyboard stays visible. */
  .kb-letters b{height:46px;min-width:40px;font-size:1.8rem}
}
@media (max-width:620px){
  .kb-row{gap:4px}
  .kb-key{width:calc((100% - 36px)/10);font-size:1.2rem}
  .kb-row.r1{padding-left:0}
  .kb-row.r2{padding-left:4%}
  .kb-tones{grid-template-columns:repeat(2,1fr)}
}
/* ---- Where to start: four big picture cards, one screen ---- */
.start-page{display:flex;flex-direction:column;justify-content:center;min-height:calc(100dvh - 166px)}
.start-head{display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap;text-align:left;margin-bottom:20px}
.start-head .buddy{width:64px;height:64px;opacity:1}
.start-head h1{margin:0;font-size:1.8rem}
.start-head p{margin:4px 0 0;color:var(--muted)}
.start-picks{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;width:min(100%,1040px);margin:0 auto}
.start-pick{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 14px;min-height:200px;text-align:center;border:2px solid transparent}
.start-pick .emoji{width:72px;height:72px}
.start-pick b{font-size:1.25rem}
.start-pick small{color:var(--muted);font-size:.95rem}
.start-pick:active{border-color:#9cc8bf;transform:scale(.98)}
@media (max-width:820px){
  .start-picks{grid-template-columns:repeat(2,1fr)}
  .start-pick{min-height:170px}
}
.kb-sound{font-size:.9rem;color:var(--muted)}
.kb-sound.on{color:var(--blue)}
/* Daily practice, island and family evidence: one clear action at a time. */
.welcome>.text-button{margin-top:12px}
.today-purpose{font-size:1.2rem;color:var(--green);margin:10px 0 0}
.contrast-tip{font-size:1.1rem;line-height:1.5;max-width:430px}
.island-home{max-width:1000px;margin:auto;text-align:center}
.island-home .page-head{text-align:left;margin-bottom:14px}
.island-home .garden{padding:0;margin-bottom:12px}
.island-home .garden-art{max-width:680px;width:min(100%,680px,calc((100dvh - 440px)*1.5))}
.island-home .garden-art>img{display:block;aspect-ratio:540/360;object-fit:contain}
.island-tools{display:flex;justify-content:center;gap:12px}
.island-tools .button{min-width:120px}
.island-home .grow-note{margin:10px 0 2px}
.gift-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}
.gift-options .shop-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;background:#f8f6f0;border-radius:18px;padding:18px 8px}
.gift-options h3{font-size:1.05rem;margin:0}
.gift-options .button{font-size:.9rem;padding:10px 12px;width:100%;margin-top:auto}
.gift-pages{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gift-pages .button{padding:10px 18px}
.explore-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.explore-options .card{display:flex;flex-direction:column;gap:5px;padding:18px;text-align:left;min-height:88px}
.explore-options b{font-size:1.1rem}
.explore-options small{color:var(--muted);font-size:.9rem}
.note-chars{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:12px auto;max-width:600px}
.note-chars span{font-family:'Island Kai',KaiTi,serif;font-size:2rem;min-width:52px;padding:4px 8px;background:#fff8e8;border:1px solid #e7d5ac;border-radius:12px}
/* ---- Milestones,next goal,staged completion ---- */
.completion .done-lines p{font-size:1.25rem;animation:none}
.completion-actions>div{margin-top:12px}
.evidence-row{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--line);align-items:baseline}
.evidence-row span{color:var(--muted)}
.evidence-row strong{font-size:1.25rem;text-align:right;overflow-wrap:anywhere}
.parent-tip{font-size:1.15rem;line-height:1.8;margin:16px 0 24px}
.parent-note .button{display:block;margin-top:10px}
.reading-line{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.reading-line strong{font-family:'Island Kai',KaiTi,serif;font-size:1.6rem}
.story-page .tabs{justify-content:center;margin:10px 0 16px}
.story-card>h3{margin:16px 0 8px}
.story-card .choices{grid-template-columns:repeat(3,minmax(0,1fr));margin:12px auto}
.story-card .feedback{min-height:44px;font-size:1rem}
.story-card .choice.word-choice{font-size:1.3rem;min-height:76px}
.story-card .story-text{font-size:1.2rem;line-height:1.8}
@media (orientation:landscape) and (max-height:820px){
  .note-chars span{font-size:1.5rem;min-width:42px}
}
@media (max-width:650px){
  .island-tools .button{min-width:0;flex:1;padding:10px 8px;font-size:.95rem}
  .gift-options .item-art .emoji{width:36px;height:36px}
  .gift-options .button{font-size:.85rem;padding:8px}
  .explore-options .card{padding:12px;min-height:82px}
}
.completion .completion-actions{animation:none}
.write-actions .help[data-act="skipWrite"]{display:inline-flex;visibility:visible}
.study-card:has(.bunny-help) .writer-box{width:min(100%,320px,calc(100dvh - 520px))!important}
.story-option{display:flex;flex-direction:column;gap:4px}
.story-option .choice{width:100%}
.story-option .text-button{min-height:40px;padding:4px 8px;font-size:.9rem}
.story-card>h3 .text-button{font-size:.9rem}
.story-card .story-option .choice{flex:1}
.offline-note{margin:8px auto 0}
.write-together.offered{border-color:#d8b467;background:#fff5dc}
.writing-reward{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#fffdf5f5;border-radius:inherit;pointer-events:none;overflow:hidden}
.writing-reward .reward-island{width:88%;height:auto}
.writing-reward .reward-mark{position:absolute;left:64%;top:54%;animation:writing-arrives .8s ease-out both}
.writing-reward .reward-mark .emoji{width:44px;height:44px}
.writing-reward p{font-size:.85rem;line-height:1.5;color:#41654a;text-align:center;margin:4px 8px}
@keyframes writing-arrives{from{transform:translate(-70px,-40px) scale(1.4);opacity:0}40%{opacity:1}to{transform:none;opacity:1}}
.reader-page{padding:24px 32px;text-align:center}
.reader-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.reader-head h2{font-size:1.5rem;margin:0}
.reader-head>span{color:var(--muted);white-space:nowrap}
.reader-sentence{font-family:'Island Kai',KaiTi,serif;font-size:clamp(30px,4.3vw,48px);line-height:1.8;min-height:180px;display:flex;align-items:center;justify-content:center;margin:18px auto;max-width:800px;overflow-wrap:anywhere}
.reader-audio,.reader-controls{display:flex;justify-content:space-between;gap:12px}
.reader-audio{justify-content:center;margin:10px 0 22px}
.reader-controls .button{min-width:130px}
.reader-page>.text-button{margin-top:8px}
.reader-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0}
.reader-options .card{display:flex;flex-direction:column;gap:7px;min-height:85px;padding:14px;font-size:1.2rem}
.reader-options small{font-size:.85rem;color:var(--muted)}
.reader-finish{padding:30px 10px;font-size:1.4rem;line-height:1.8}
.reader-finish p{font-size:1rem;margin:10px 0 18px}
@media (max-width:650px){
  .reader-audio .button,.reader-controls .button{min-width:0;flex:1;padding:10px 12px}
  .writing-reward .reward-mark .emoji{width:32px;height:32px}
}
.mission-scene>img{display:block;width:100%;height:100%;object-fit:contain;border-radius:24px}
.mission-sign{position:absolute;top:48%;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%)}
.mission-sign.left{left:25%}
.mission-sign.right{left:74%}
.mission-today .mission-scene{width:min(100%,460px,calc((100dvh - 400px)*2.13))}
.mission-today .today-summary{font-size:1.2rem;margin:10px 0 16px}
.mission-today .today-purpose{font-size:1.5rem;color:var(--ink)}
.mission-switch{display:flex;gap:8px;justify-content:center}
.mission-options{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
.mission-options .card{padding:12px;text-align:left;display:flex;flex-direction:column;gap:12px}
.mission-options img{width:100%;border-radius:16px}
.mission-options b{font-size:1.15rem}
.mission-options span{align-self:flex-end;color:var(--blue)}
.mission-reading .mission-scene{width:min(100%,420px);margin:0 auto}
.mission-read-head{display:flex;flex-direction:column;align-items:center;gap:2px}
.mission-read-head h2{font-size:1.5rem}
.mission-read-head span{color:var(--muted)}
.mission-sentence{font-family:'Island Kai',KaiTi,serif;font-size:clamp(28px,3.5vw,40px);line-height:1.6;min-height:64px;margin:10px auto 14px;max-width:720px;overflow-wrap:anywhere}
.mission-sentence.is-label{font-size:48px}
.mission-read-note{font-size:.85rem;color:var(--muted);min-height:1.5em;margin-top:10px}
.mission-places{display:flex;justify-content:center;gap:14px}
.mission-places .button{min-width:140px}
.mission-placement-copy{font-size:1.2rem;min-height:1.5em;margin:12px 0 18px}
.parent-mission{padding:16px 18px;background:#f3f6ed;border-radius:16px;margin:16px 0;color:#455345;line-height:1.7}
.parent-mission p{font-size:.9rem;margin:8px 0 0}
.completion>.mission-scene{width:min(100%,360px)}
@media (orientation:landscape) and (max-height:820px){
  .mission-today .mission-scene{width:min(100%,420px,calc((100dvh - 355px)*2.13))}
  .mission-reading .mission-scene{width:min(100%,300px)}
  .study-card.stage-missionPlace>.mission-scene{width:min(100%,420px,calc((100dvh - 330px)*2.13))}
}
@media (max-width:650px){
  .mission-today .mission-scene{width:100%}
  .mission-switch .text-button{font-size:.85rem}
}
@media (orientation:portrait){
  /* Fit portrait child pages within the viewport. */
  body.focus main{min-height:0;padding:16px 0 12px}
  body.focus #writer{width:min(100%,320px,calc(100dvh - 488px))!important}
}
.mission-island-sign{position:absolute;left:77%;top:54%;display:flex;flex-direction:column;align-items:center;z-index:3;transform:translateX(-50%);pointer-events:none}
.mission-island-sign span{font-family:"Island Kai",KaiTi,serif;font-size:clamp(18px,2.5vw,30px);line-height:1.1;min-width:1.5em;padding:3px 7px;text-align:center;border:2px solid #b79a70;border-radius:6px;background:#fff4d8;color:#394237;box-shadow:0 2px 0 #7d694a22}
.mission-island-sign i{height:22px;width:5px;background:#b79a70}
.page-turn{display:flex;align-items:center;justify-content:center;gap:18px;margin:18px auto 0;font-size:.9rem;color:var(--muted)}
.page-turn .button{min-height:44px}
.page-turn span{min-width:115px;text-align:center}
@media (max-width:650px){
  .page-turn .button{padding:9px 12px;font-size:.8125rem}
  .page-turn span{min-width:85px;font-size:.8125rem}
}
main:has(.page-turn[aria-label="字库分页"]){padding-bottom:24px}
main{max-width:1260px;min-height:calc(100dvh - 120px);padding-bottom:24px}
.scene-card small,.info-banner{color:var(--muted)}
/* Reading is an optional exit from the classic completion page. */
.completion-reading{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:8px}
.completion-reading .text-button{padding:8px 14px;color:var(--blue);font-weight:700}
.completion-reading small{font-size:.8125rem;color:var(--muted)}
@media (orientation:portrait) and (max-height:700px){
  body.focus .topbar{display:none}
  body.focus main{padding:8px 0}
  body.focus .practice-top{margin-bottom:8px}
  body.focus .progress{margin:6px 0 10px!important}
  body.focus .study-card{padding:16px}
  body.focus .study-card h2{margin:6px 0}
  body.focus .study-footer{margin-top:12px;min-height:48px}
  body.focus .mission-sentence{min-height:64px;margin:6px auto 10px}
  body.focus .mission-read-note{margin-top:4px}
  body.focus #writer{width:min(100%,280px,calc(100dvh - 350px))!important}
  body.focus .choices{margin:14px auto}
  body.focus .sentence{margin:8px auto}
  .completion.has-reading{padding:16px 16px}
  .completion.has-reading .hero-island img{max-height:135px}
  .completion.has-reading h1{margin:8px 0}
  .completion.has-reading .completion-reading{margin-top:2px}
}
/* The family summary exists only while the parent opens the print dialog. */
#print-report{display:none}
@media print{
  @page{size:auto;margin:14mm}
  body{background:#fff!important;color:#1d2a3a!important}
  body>*:not(#print-report){display:none!important}
  #print-report{display:block!important;font:12pt/1.5 "PingFang SC","Microsoft YaHei",sans-serif;max-width:180mm;margin:0 auto;color:#1d2a3a}
  #print-report h1{font-size:21pt;margin:0 0 5mm}
  #print-report h2{font-size:13pt;margin:6mm 0 2mm;border-bottom:1px solid #c9c2b5;padding-bottom:1mm}
  #print-report p{margin:2mm 0;break-inside:avoid}
  #print-report .print-dates{font-weight:700}
  #print-report .print-note,#print-report .print-foot{font-size:10pt;color:#5d5443}
  #print-report .print-foot{margin-top:9mm;border-top:1px solid #c9c2b5;padding-top:3mm}
}
@media (orientation:landscape) and (max-height:820px){
  .story-page .practice-top{margin-bottom:4px}
  .story-page .tabs{margin:0 0 10px}
  .story-card{padding:18px 24px}
  .reader-page{padding:18px 26px}
  .reader-sentence{min-height:130px;margin:10px auto}
  .reader-finish{padding:20px 10px}
  /* Short landscape screens (tablet held sideways): the map, the character library and a finished day must fit one screen too. */
  body.focus .practice-top .text-button{min-height:40px}
  .study-card{padding:14px 28px 12px!important;border-top-width:5px}
  .study-card .study-sub{font-size:1rem;margin:0}
  .study-card .button.soft{margin-top:8px!important;min-height:44px;padding:8px 20px}
  .choices{margin:10px auto;gap:10px;max-width:560px}
  .feedback{min-height:52px;padding:4px}
  .feedback.success,.feedback.hint{font-size:1.25rem}
  .buddy{width:36px;height:46px}
  .feedback .mark{width:38px;height:38px}
  .study-footer{min-height:50px;margin-top:4px}
  .sentence{margin:8px auto;font-size:1.1rem;line-height:1.8}
  .learn-layout{margin:4px 0;grid-template-columns:1fr 240px;gap:16px}
  .big-char{font-size:84px;line-height:1.1;margin:2px 0}
  .pinyin{margin-top:4px;font-size:1.2rem}
  .scene-stage{max-height:150px}
  .words-line{margin:8px 0;min-height:44px}
  .write-top{min-height:36px}
  .writer-box{width:min(100%,400px,calc(100vh - 360px))!important}
  .write-actions{min-height:44px;margin:4px 0}
  .hero-island{max-width:min(300px,30vh)}
  .completion-actions>div{margin-top:4px!important}
  .today{margin-top:0}
  .today .greet{font-size:1.25rem}
  .today-note{margin:4px 0 0}
  .today-ask{margin:6px 0 4px;font-size:1.05rem}
  .island-pick{gap:10px}
  .pick{padding:8px 10px;flex-direction:row;gap:10px;text-align:left;max-width:260px}
  .pick small{display:none}
  .today-summary{margin:6px 0 12px;font-size:1.35rem}
  .completion .day-card{margin:6px auto;padding:8px 14px}
  .day-card-chars{margin:6px 0 2px;gap:6px}
  .day-card-stamp{width:30px;height:30px;bottom:8px;right:12px}
  .completion .muted{margin:0}
  .completion{padding:10px 28px!important}
  .completion .hero-island{max-width:min(320px,32vh)}
  .completion h1{font-size:1.45rem;margin:2px 0}
  .badge-won{margin:0 0 4px;gap:2px}
  .badge{padding:6px 14px;font-size:.95rem}
  .done-lines{margin:4px auto 4px}
  .completion .pill.yellow{margin:2px auto 6px!important;min-height:32px}
  .letter-hint{margin:0 0 4px;font-size:.9rem}
  .completion-actions .button.big{min-height:50px;padding:10px 36px}
  .kb-page{min-height:calc(100dvh - 30px)}
  .kb-prompt{padding:10px 16px;margin:6px 0 8px}
  .kb-ask{font-size:1.05rem;margin-bottom:2px}
  .kb-letters{min-height:48px;margin:4px 0 0}
  .kb-cand{height:60px;min-width:60px;font-size:2rem}
  .kb-tone{min-height:96px}
  .kb-row{margin-bottom:5px}
  .kb-board{padding:8px 8px 4px}
  .kb-stations{gap:10px}
  .kb-station{min-height:150px;padding:14px}
  .start-page{min-height:calc(100dvh - 40px)}
  .start-pick{min-height:170px;padding:18px 12px}
  .start-pick .emoji{width:60px;height:60px}
  .island-home .page-head h1{font-size:1.5rem}
  .island-home .page-head p{font-size:.95rem}
  .island-home .page-head{margin-bottom:10px}
  .island-tools .button{min-height:48px}
  .island-home>.text-button{min-height:40px;padding:4px 12px}
  .island-home .grow-note{font-size:.85rem}
  .note-chars{margin:6px auto;gap:8px}
  .story-card .card-header h2{font-size:1.3rem}
  .reader-audio{margin:8px 0 14px}
  .mission-reading .mission-sentence{font-size:32px;min-height:48px;margin:6px auto}
  .mission-reading .mission-sentence.is-label{font-size:40px}
  .mission-read-note{margin-top:6px}
  .mission-placement-copy{margin:8px 0 12px}
  main[data-page="map"] .page-head,main[data-page="book"] .page-head{margin-bottom:6px}
  main[data-page="map"] .page-head h1,main[data-page="book"] .page-head h1{font-size:1.5rem;margin:0}
  main[data-page="map"] .page-head p,main[data-page="book"] .page-head p{display:none}
  main[data-page="map"] .voyage{margin:0 0 10px;padding:10px 18px}
  main[data-page="map"] .voyage-rail{margin-top:8px}
  main[data-page="map"] .tabs,main[data-page="book"] .tabs{margin:0 0 10px}
  main[data-page="map"] .page-turn,main[data-page="book"] .page-turn{margin-top:10px}
  main[data-page="book"] .search-row{margin:0 0 10px}
  main[data-page="book"] .char-card{padding:12px 8px;gap:4px}
  main[data-page="book"] .char-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
  main[data-page="book"] .char-card .hanzi{font-size:2rem}
  .today.is-done .mission-scene{width:min(100%,280px,calc((100dvh - 500px)*2.13));margin:4px auto 8px}
  .today.is-done .greet{margin-bottom:2px}
  .offline-note{margin:4px 0 0;font-size:.85rem}
  .today.is-done~.home-extras{margin-top:4px}
  .today.is-done~.home-extras .card{padding-top:12px;padding-bottom:12px}
}
/* Parent paper check */
.paper-marks{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin:12px 0}
.paper-mark{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:72px;padding:6px;border:2px solid #e0dcd4;border-radius:12px;background:#fff;color:inherit;font:inherit;cursor:pointer}
.paper-mark .paper-char{font:600 30px/1.1 "Island Kai","Kaiti SC","STKaiti",serif}
.paper-mark small{font-size:.8125rem;color:#6f6655}
.paper-mark.is-ok{border-color:#5f9e6e;background:#eef7f0}
.paper-mark.is-miss{border-color:#b9a27a;background:#faf5ea}
.paper-h{font-size:16px;margin:16px 0 6px}
.paper-history{margin:0 0 8px;padding-left:20px;line-height:1.7}
#print-report .paper-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4mm;margin:6mm 0}
#print-report .paper-cell{display:flex;align-items:center;justify-content:center;height:30mm;border:1px solid #c9c2b5;border-radius:3mm;font:44pt/1 "Island Kai","Kaiti SC","STKaiti",serif}
/* ---- 2026-11-07 page-by-page visual pass ---- */
/* A finished write no longer offers "write later". */
.write-actions.done .help[data-act="skipWrite"]{display:none}
/* A small, finite purpose for today's practice. */
/* Word-card sign: sized from the scene so it never spills out, and placed beside (not on) the flowers or the bridge. */
.mission-scene{position:relative;width:min(100%,540px);margin:8px auto 16px;aspect-ratio:640/300;container-type:inline-size;overflow:hidden;border-radius:24px}
.mission-sign span{font-family:'Island Kai',KaiTi,serif;line-height:1.2;min-width:1.8em;text-align:center;border:2px solid #b79a70;border-radius:8px;background:#fff4d8;color:#394237;box-shadow:0 3px 0 #7d694a14;font-size:clamp(14px,7.5cqw,40px);padding:.12em .35em;border-width:2px}
.mission-sign i{background:#b79a70;height:clamp(10px,5cqw,30px);width:clamp(3px,1.1cqw,7px)}
.mission-scene[data-scene="garden"] .mission-sign.left{left:45%;top:44%}
.mission-scene[data-scene="river"] .mission-sign.left{left:45%;top:16%}
.mission-scene[data-scene="river"] .mission-sign.right{left:74%;top:44%}
/* The blurred island behind study cards peeked out between the top bar and the card. */
.study-island{position:absolute;left:50%;top:-70px;width:min(760px,96%);aspect-ratio:540/360;transform:translateX(-50%);background:url(assets/island.svg) no-repeat center/contain;opacity:.16;filter:blur(2px);pointer-events:none;z-index:0;display:none}
.home-extras .letter-card{max-width:none;margin:0}
.matching button.rad small{font-size:.8125rem;color:#5f5545;font-weight:500;letter-spacing:0}
@media (orientation:landscape) and (min-height:700px){
  /* Study and placement content sits in the middle of a tall landscape screen instead of hugging the top. */
  main[data-page="study"] .practice,main[data-page="placement"] .practice{min-height:calc(100dvh - 140px);display:flex;flex-direction:column;justify-content:center}
}
/* Arriving on a page or the next step: a soft settle, never a blank frame (starting from opacity 0 read as a blink). */
@keyframes page-in{from{opacity:.55;transform:translateY(4px)}to{opacity:1;transform:none}}
#app.enter>*{animation:page-in .16s ease-out}
/* ---- Small celebrations, only for something she just did right ---- */
.sparkle{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:5}
.sparkle i{position:absolute;left:0;top:0;font-style:normal;font-size:18px;line-height:1;color:#f2be45;text-shadow:0 1px 0 #fff;transform:translate(-50%,-50%) scale(.3);opacity:0;animation:spark .75s ease-out forwards}
.sparkle i:nth-child(even){color:#8fb0f0;font-size:14px}
@keyframes spark{25%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.05)}}
/* The finished character glows once. */
.writer-box.celebrate{animation:write-glow 1.1s ease-out}
@keyframes write-glow{0%{box-shadow:0 0 0 0 #f6d46c00}35%{box-shadow:0 0 0 10px #f6d46c88}100%{box-shadow:0 0 0 0 #f6d46c00}}
/* The word card drops onto the scene. */
.mission-sign.drop{animation:sign-drop .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes sign-drop{0%{transform:translate(-50%,-40%) scale(.6);opacity:0}60%{opacity:1}100%{transform:translateX(-50%)}}
/* A freshly matched radical pair gives a little bounce. */
.matching button.just{animation:match-pop .45s ease-out}
@keyframes match-pop{50%{transform:scale(1.08)}}
/* Learning pictures breathe gently so the card feels alive (pictures with their own motion keep it). */
.stage-learn .scene-symbol:not([class*="motion-"]){animation:none}
@keyframes bob{50%{transform:translateY(-5px)}}
body{margin:0;background:transparent;min-height:100vh}
.nav-item.active{background:var(--sea-soft);color:var(--sea-ink);font-weight:650;box-shadow:none}
.card{border:1px solid var(--line)}
.button:active{transform:translateY(2px);box-shadow:0 1px 0 #134b46}
.button.green{background:var(--leaf);box-shadow:0 3px 0 #2c6640}
.button.secondary{background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:var(--press)}
.button.soft{background:var(--sea-soft);color:var(--sea-ink);box-shadow:inset 0 0 0 1px rgba(31,111,104,.16)}
.choice:active{transform:translateY(2px);box-shadow:none}
.choice.reveal{border-color:var(--leaf);box-shadow:0 0 0 4px rgba(63,138,85,.22);background:var(--leaf-soft)}
.choice.correct{animation:pop .35s cubic-bezier(.2,1.3,.4,1);border-color:var(--leaf);background:var(--leaf-soft);color:var(--green);box-shadow:0 0 0 4px rgba(63,138,85,.16)}
.word-tag{padding:10px 22px;border-radius:12px;background:var(--sea-soft);font-size:1.25rem;min-height:48px;display:inline-flex;align-items:center;box-shadow:inset 0 0 0 1px rgba(31,111,104,.14)}
.progress{height:7px;border-radius:10px;background:var(--paper-2);overflow:hidden;margin:13px 0}
.progress>span{height:100%;display:block;border-radius:10px;background:var(--sea)!important;transition:width .3s;box-shadow:none}
.pill,.chip{background:var(--card);border-color:var(--line)}
.chip.selected{background:var(--sea);color:#fff;border-color:transparent;box-shadow:none}
.kb-key:active{transform:translateY(2px);box-shadow:0 1px 0 #d9cdb6,0 0 0 4px rgba(31,111,104,.15)}
.kb-big,.kb-py{color:var(--ink)}
@media (orientation:landscape) and (max-height:760px){
  .matching{gap:10px;margin:14px 0}
  .matching button{min-height:64px;padding:8px}
  .matching button.rad{font-size:2.1rem}
}
.mission-scene>img,.scene-card .scene-stage{box-shadow:0 0 0 3px #fff,var(--shadow)}
.note-chars span,.note-chars b,.note-chars button{background:var(--card)!important;border-color:var(--line)!important;color:var(--ink)!important;box-shadow:var(--press)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.card:focus-visible{outline:none;box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(31,111,104,.55)!important;border-radius:14px}
.matching button{padding:20px;border:2px solid var(--line);border-radius:15px;background:white;font-size:1.875rem;min-height:80px;border-color:var(--line);box-shadow:var(--press)}
.matching button.selected{border-color:var(--blue);background:var(--blue-soft);box-shadow:0 0 0 4px rgba(31,111,104,.2)}
.completion-actions{animation:fade-in .4s ease-out 1.2s both;gap:14px;display:flex;flex-direction:column;align-items:center}
/* Quick check of secure characters: six tiles in a 3 × 2 grid. */
.quick-grid{grid-template-columns:repeat(3,1fr);max-width:600px}
.choice.hint-glow{border-color:#f2be45;box-shadow:0 0 0 4px rgba(242,190,69,.35)}
.age-pick{width:76px;height:76px;border-radius:50%;background:linear-gradient(160deg,#fff,#eef5f1);border:2px solid rgba(31,111,104,.3);font-size:2rem;font-weight:750;color:#175a54;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;box-shadow:0 6px 16px rgba(80,62,24,.12)}
.age-pick small{font-size:.8125rem;font-weight:500;margin-top:2px}
.age-pick:active{transform:scale(.95)}
/* Replay the spoken instruction from anywhere. */
/* The read-aloud button says what it does, so a child who cannot read yet still finds it by the word 听. */
/* UX-004: phones held sideways get one gentle request to turn upright (writing and the keyboard island excepted). */
#rotate-hint{display:none}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  html:not(.rotate-ok) body:not(:has(#writer,main[data-page="kb"],main[data-page="keys"],main[data-page="parent"])) #rotate-hint{display:flex;position:fixed;inset:0;z-index:200;background:var(--paper);flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:16px}
  html:not(.rotate-ok) body:not(:has(#writer,main[data-page="kb"],main[data-page="keys"],main[data-page="parent"])){overflow:hidden}
  #rotate-hint img{width:84px;height:84px}
  #rotate-hint p{font-size:1.35rem;line-height:1.5;margin:0;color:var(--ink)}
}
.voice-help{position:fixed;left:18px;bottom:18px;z-index:40;width:auto;height:56px;border-radius:28px;background:var(--sea);color:#fff;display:grid;place-items:center;box-shadow:0 8px 20px rgba(31,111,104,.35);min-width:56px;padding:0 16px 0 12px;grid-auto-flow:column;gap:6px;font-family:inherit;font-weight:700}
.voice-help .ico{width:26px;height:26px}
.voice-help[hidden]{display:none}
.voice-help.is-playing{background:var(--leaf);animation:voice-ring 1.2s ease-in-out infinite}
@keyframes voice-ring{0%,100%{box-shadow:0 0 0 0 rgba(63,138,85,.45)}50%{box-shadow:0 0 0 10px rgba(63,138,85,0)}}
@media (prefers-reduced-motion:reduce){.voice-help.is-playing{animation:none;box-shadow:0 0 0 4px rgba(63,138,85,.35)}}
.gate-note{margin:8px 0 0;color:var(--muted)}
/* 5–6 岁欢迎页只留标题和按钮：说明会自动读出来，屏幕上少一行字 */
/* 5–6 岁把说明交给朗读；家长关掉自动朗读时，说明文字恢复（SIM-004、SIM-012） */
body.little.narrating .welcome .today-summary{display:none}
.welcome .listen-once{display:inline-flex;align-items:center;gap:6px}
.button .nw{white-space:nowrap}
/* Older children: no bunny faces in feedback, a calmer page. */
body.mature .buddy,body.mature .buddy-wrap{display:none!important}
/* The youngest: bigger answer tiles and characters. */
body.little .choice{font-size:3rem}
body.little .big-char{font-size:7.5rem}
.shop-item.locked .item-art{filter:grayscale(1);opacity:.45}
.plant-fruit{position:absolute;right:-6px;top:-4px;width:45%}
.plant-fruit img{width:100%}
a.brand{min-height:44px}
.char-card .stage{font-size:.8125rem;padding:4px 8px;border-radius:15px;background:#f3efe4;color:#726855}
.char-card.known .stage{background:#ebf4ec;color:#3a7046}
.pill.yellow{background:#fff1c2;border-color:#f6dd8a;color:#7a5a17}
.station{font-size:.8125rem}
.label{font-size:.8125rem;letter-spacing:1px;font-weight:650;color:#4f7d76;display:flex;gap:6px;align-items:center}
#modal-body:focus{outline:none}
.hero-island .decoration.visitor,.hero-island .magic-layer{display:none}
/* Night: a soft dusk above the island instead of a grey veil over the bunny and the flowers. */
.sky.night{background:radial-gradient(120% 70% at 50% 0%,rgba(60,50,30,.38),rgba(60,50,30,.12) 55%,transparent 75%)}
.garden-art>img,.today-art>img{position:relative;z-index:1}
.garden-art .sky,.today-art .sky{z-index:0}
.garden-art .decoration,.today-art .decoration,.garden-art .magic-layer{z-index:2}
/* Question cards: keep the steady height, but centre the content so the space is shared above and below. */
.study-card.stage-quiz,.study-card.stage-transfer,.study-card.stage-quick{display:flex;flex-direction:column;justify-content:center}
/* QA pass, round 2: the earlier, more specific rules that kept targets at 40 px, the map's tiny stop numbers,
   and the home island (class today-art) that still showed every visitor. */
body.focus .practice-top .text-button,.learn-more .text-button,.island-home>.text-button,.story-option .text-button{min-height:44px}
.theme-card .station{display:grid;place-items:center;flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:#f7f3ee;color:#726855;font-size:.8125rem;font-weight:700}
.theme-card .preview-chars{position:absolute;right:20px;top:22px;color:#736957;letter-spacing:4px;font-size:0.9375rem}
.streak span{color:#6b4e12}
.today-art{overflow:hidden}
.today-art .decoration.visitor,.today-art .magic-layer{display:none}
@media (orientation:portrait) and (min-width:700px) and (min-height:1000px){
  /* Review fixes, 2026-11-07: tall portrait tablets left a third to half of the screen empty under child pages.
   Centre the one thing on the page in the space below the header, and let the art and cards use some of the height. */
  html body main:is([data-page="study"],[data-page="placement"],[data-page="story"])>.practice>.card{margin-top:auto}
  html body main:is([data-page="welcome"],[data-page="study"],[data-page="placement"],[data-page="story"],[data-page="garden"],[data-page="start"]){min-height:calc(100dvh - 120px);display:flex;flex-direction:column;justify-content:center}
  html body main:is([data-page="welcome"],[data-page="study"],[data-page="placement"],[data-page="story"],[data-page="garden"],[data-page="start"])>*{width:100%}
  html body main:is([data-page="study"],[data-page="placement"],[data-page="story"])>.practice{flex:1;display:flex;flex-direction:column}
  html body main:is([data-page="study"],[data-page="placement"],[data-page="story"])>.practice>:last-child{margin-bottom:auto}
  main[data-page="welcome"] .welcome-art{max-width:560px}
  main[data-page="welcome"] .welcome h1{font-size:2.5rem}
  main[data-page="study"] .study-card,main[data-page="placement"] .study-card{min-height:600px;display:flex;flex-direction:column;justify-content:center}
  main[data-page="story"] .story-card{min-height:640px}
}
/* ---- Ages 5–11 ---- */
/* Age picker: seven ages wrap as 4 + 3 instead of leaving 11 alone on a second row. */
.age-picks{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:22px auto 0;max-width:calc(4 * 76px + 3 * 14px)}
@media (max-width:400px){.age-picks{gap:10px;max-width:calc(4 * 66px + 3 * 10px)}.age-pick{width:66px;height:66px;font-size:1.75rem}}
/* Story page: a small picture band for each story, made from the same illustrations as the word cards. */
.story-scene{display:flex;justify-content:center;align-items:flex-end;gap:clamp(18px,4vw,44px);margin:-6px -6px 14px;padding:16px 12px 12px;border-radius:20px;background:linear-gradient(180deg,#eef6f2,#f6f0e2)}
.story-scene .emoji{width:clamp(56px,9vh,96px);height:auto;animation:float-y 4.5s ease-in-out infinite}
.story-scene .emoji:nth-child(2){width:clamp(72px,12vh,124px);animation-delay:-1.5s}
.story-scene .emoji:nth-child(3){animation-delay:-3s}
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){
  .story-scene .emoji{animation:none}
}
@media (orientation:landscape) and (max-height:840px){
  .study-card{min-height:0;padding:22px 32px}
  .writer-box{width:min(100%,400px,46vh)}
  .practice-top{margin-bottom:12px}
  .completion{padding:28px 30px}
  .story-scene{padding:10px 12px 8px;margin-bottom:8px}
  .story-scene .emoji{width:56px}
  .story-scene .emoji:nth-child(2){width:72px}
}
.licenses-link{color:var(--blue);display:inline-flex;align-items:center;min-height:44px;padding:0 10px;margin:0 -10px}
/* Connected readers, stable writing help and an immediate writing consequence. */
/* Home notes stay centred and the letter card matches the card beside or below it. */
.offline-note{max-width:560px;text-align:center;font-size:.875rem;color:var(--muted);min-height:1.5em;margin-left:auto!important;margin-right:auto!important}
/* Shop: say where stars come from when a gift is still out of reach. Mailbox: a friendly empty state. */
.shop-earn{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:4px auto 14px;padding:10px 16px;border-radius:16px;background:#fff8e6;color:#6b4e12;max-width:520px}
.shop-earn .emoji{width:28px;height:28px}
.shop-earn .button{min-height:44px;padding:8px 18px}
.mail-empty{text-align:center;padding:8px 0}
.mail-empty .emoji{width:96px;height:96px;margin:0 auto 8px;display:block;animation:float-y 4.5s ease-in-out infinite}
.mail-empty p{color:var(--muted);margin:0 0 18px}
.kb-help-note{position:absolute;right:8px;bottom:calc(100% + 6px);margin:0;font-size:.8125rem;font-weight:600;background:#fff8e6;color:#6b4e12;padding:3px 10px;border-radius:10px;pointer-events:none}
/* Keyboard island: lesson chips and the "拼音里读" button are full-size touch targets (44px). */
.kb-chips .chip{min-height:44px;padding:6px 14px;font-size:.9rem}
.kb-reading{margin-top:8px;border:0;background:#f6f1e6;border-radius:14px;padding:6px 14px;font-size:1rem;color:var(--blue);font-family:inherit;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.voice-help .voice-help-label{font-size:1.05rem}
/* A letter in the mailbox shows it can be opened. */
.mail small.mail-open{display:block;color:var(--blue);font-weight:700;margin-top:2px}
@media (max-width:650px){
  /* On a phone the label would cover answer buttons near the bottom edge: keep the round button there. */
}
/* ---- Tablet pass: larger text,48px touch targets,press feedback,landscape fit ---- */
/* Opt out of the browser's forced dark mode (Huawei/Chrome "darken websites"); the island is designed for a light page. */
/* ---------- 2026-10-25 儿童视角体验修复 ---------- */
/* Softer,darker secondary text so small notes stay readable for a seven-year-old. */
/* Keep ordinary text legible on white and the warm page background. */
/* ===================================================================
   UX V3「岛屿纸本」主题（2026-11-08，替换 11-07 的“明亮科技感”主题；问题 UX-V-01/02/03）。
   颜色取自插画本身：暖纸底、海湾青为主操作、叶绿表示做到了、太阳黄表示提示和星星；
   不再有紫蓝渐变、玻璃、漂浮光点、按钮流光和无限循环的装饰动画。只改颜色、阴影和动效，不改尺寸。
   =================================================================== */
/* ==========================================================================
   V4 设计系统层 — 2026-11-08 世界级美学与 UX 审计改造
   本层是改造后唯一的事实来源：后续规则置于文件末尾，覆盖前面 10 余轮历史叠加样式。
   关联问题：VIS-001 宽屏失衡 / VIS-002 小字 / VIS-003 令牌碎片化 / VIS-004 高龄幼稚感
             VIS-005 悬浮按钮遮挡 / VIS-006 弹窗留白 / UX-001 首屏多起点 / UX-002 完成态多出口
   原则：一屏一事、一屏一个强调色、正文 ≥13px、触控 ≥44px、内容在视口中保持平衡。
   ========================================================================== */
/* ---- 1. 令牌：颜色 / 圆角 / 间距 / 字号（把散落的 :root 覆盖收敛到一处） ---- VIS-003 */
:root{color:var(--ink);--ink:#2b3442;--muted:var(--ds-muted);--blue:var(--ds-accent);--blue-soft:var(--sea-soft);--green:var(--leaf);--line:#e6dccb;--bg:var(--paper);--sun:#f2b84b;--coral:#d9775c;--shadow:0 1px 0 rgba(120,95,50,.06),0 8px 22px rgba(80,62,24,.06);font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:linear-gradient(180deg,#f9f5ec 0%,var(--paper) 62%,#e9f1ec 100%);font-synthesis:none;color-scheme:only light;--paper:#f7f2e7;--paper-2:#efe7d6;--card:#fffdf8;--sea:#1f6f68;--sea-ink:#175a54;--sea-soft:#e3f0ec;--leaf:#3f8a55;--leaf-soft:#e6f2e5;--sun-soft:#fff3d6;--coral-soft:#fdece5;--press:0 3px 0 var(--line);background-attachment:fixed;min-height:100%;--ds-ink:#3a342a;--ds-muted:#6d624f;--ds-accent:#1f6f68;--ds-accent-deep:#3b57b8;--ds-surface:#ffffff;--ds-surface-soft:#f6f0e4;--ds-line:#ede7de;--ds-r-sm:12px;--ds-r-md:18px;--ds-r-lg:26px;--ds-s1:8px;--ds-s2:16px;--ds-s3:24px;--ds-s4:40px;--ds-t-xs:13px;--ds-t-sm:15px;--ds-t-md:17px;--ds-t-lg:22px;--ds-t-xl:32px}
/* 卡片圆角统一为三级刻度，消除 10/12/13/14/15/16/17/18/20/22/24/28/30px 并存。 */
.card,.study-card,.char-card,.choice,.kb-station,.shop-item,.theme-card,.task-card,.pick,.badge-card,.quiz-item{border-radius:var(--ds-r-md)}
.today-art,.welcome-art,.hero-island,.garden{border-radius:var(--ds-r-lg)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--ds-accent);outline-offset:3px}
/* ---- 2. 阅读字号下限 13px：字库、家长页、地图、卡片徽标 ---- VIS-002 */
main :is(.char-card small,.char-card .stage,.opt-py,.mini-stats span,.scene-card small,.shop-item p,.day-card-head small,.day-card-note,.mail small,.mail-open,.page-turn span,.tiny-label,.leaderboard th,.kb-step,.grow-note,.form-row label small,.parent-note,.info-banner,.report-list li){font-size:var(--ds-t-xs);color:var(--ds-muted)}
main :is(.context-label,.visual-purpose,.sign small,.brand small){font-size:var(--ds-t-xs)}
/* 字库卡片正文层级：汉字本身保持最大，拼音与状态不再挤成 11px。 */
.char-card .hanzi{font-size:2.75rem}
.search-input{flex:1;min-width:0;padding:14px 18px;border:1px solid var(--line);border-radius:15px;background:#fff;font-size:var(--ds-t-md);color:var(--ink)}
@media (min-width:700px) and (max-width:1099px) and (min-height:501px){
  /* UA-01：左下角固定的“听”按钮可见时，学习页页脚左侧留出它的位置，“也可以换个位置”不再被压住。
     只在 700–1099 宽、且不是手机横屏（≤500 高时“听”按钮在右上角）时需要；更宽的屏幕页脚离按钮很远。 */
  body.has-voice.focus .study-footer{padding-left:76px}
}
@media (orientation:landscape) and (max-height:960px){
  /* 横屏平板专注模式没有顶栏：提示条贴到最上面那一行（“休息一下”旁边多是空白），不盖住题目卡的标题 */
  body.focus #toast{top:calc(8px + env(safe-area-inset-top,0px))}
}
@media (min-width:700px){
  /* ---- 3. 宽屏布局：内容放大 + 短页面垂直居中，消除顶部贴边、底部大空洞 ---- VIS-001 */
}
@media (min-width:1100px){
  .today-art,.welcome-art{max-width:540px}
  main{max-width:1360px}
  .hero-island{max-width:340px}
  /* 保持 6 列：一页 12 个字正好两行整齐；改成 7 列会出现 7+5 的不对称尾行。 */
  .char-grid{grid-template-columns:repeat(6,1fr);gap:16px;width:100%}
  .char-card{padding:20px 12px}
  .kb-stations{max-width:1120px;margin-left:auto;margin-right:auto;gap:18px}
  .kb-station{min-height:200px;padding:22px 16px}
  .kb-st-icon{font-size:2.4rem}
  .page-head{margin-bottom:var(--ds-s3)}
}
/* 空状态不再是「顶部一行 + 47% 空白」。 */
main[data-page="book"] .empty,main[data-page="rank"] .empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;gap:10px;font-size:var(--ds-t-md)}
@media (max-width:650px){
  /* ---- 4. 小屏：把悬浮「听」按钮停进底部导航条的空白区，不再压住正文 ---- VIS-005 */
}
/* ---- 5. 分龄：5–6 岁首屏只留一个动作；9–11 岁换成克制的成熟视觉语言 ---- UX-001 / VIS-004 */
body.little .welcome .button.big{min-height:72px;font-size:1.375rem}
/* UA-08（AJ-120）：5–6 岁还不识字，说明句交给自动朗读（家长页可关），学习卡只留大字、图和按钮；左上“休息一下”放大到 48px 并放大图标，让不识字的孩子也能找到退出。 */
body.little.narrating .study-card .study-sub,body.little.narrating .mission-read-note{display:none}
body.little .practice-top .text-button{min-height:48px;font-size:1.05rem;padding:8px 14px}
body.little .practice-top .text-button .ico{width:26px;height:26px}
body.mature .welcome-art img,body.mature .today-art img,body.mature .hero-island img,body.mature .garden-art>img{filter:saturate(.72) contrast(1.03)}
body.mature .welcome-art,body.mature .today-art{max-width:400px}
body.mature .decoration{animation:none;filter:saturate(.6)}
body.mature .welcome h1{font-size:2.25rem;letter-spacing:.5px}
body.mature .welcome .today-summary{font-size:1.15rem;line-height:1.75;max-width:28em}
body.mature .card,body.mature .choice{border-color:var(--ds-line)}
/* ---- 6. 完成态：一个明确的「今天到这里」，其余退为次级 ---- UX-002 */
.completion .completion-actions>div .button{background:var(--ds-surface-soft);color:#5d5443;border:1px solid var(--ds-line);box-shadow:none;font-size:var(--ds-t-sm)}
.completion .completion-reading{margin-top:4px}
.completion .completion-reading .text-button{color:var(--ds-muted);font-size:var(--ds-t-sm)}
.completion .completion-reading small{font-size:var(--ds-t-xs);color:var(--ds-muted)}
/* ---- 7. 弹窗：信箱只有一封时不再用 590px 宽的空白对话框 ---- VIS-006 */
#modal:has(.mailbox),#modal:has(.mail-empty){width:min(440px,calc(100vw - 32px))}
#modal:has(.mailbox) .mailbox{grid-template-columns:repeat(auto-fit,minmax(96px,114px));justify-content:center;gap:14px}
@media (prefers-reduced-motion:reduce){
  /* ---- 8. 动效降级：新加入的插画变换同样尊重系统设置 ---- */
  *{animation:none!important;transition:none!important}
  .sparkles{display:none}
  .decoration,.decoration.new{animation:none}
  .day-card{animation:none}
  .choice.correct{animation:none}
  .kb-key.glow,.kb-letters b.bad,.kb-cand.oops,.kb-tone.oops,.kb-key.oops{animation:none}
  .writing-reward .reward-mark{animation:none}
  .sparkle,.writer-box.celebrate,.mission-sign.drop,.matching button.just,.stage-learn .scene-symbol{animation:none!important}
  .sparkle{display:none}
  .mail-empty .emoji{animation:none}
  .today-art img,.welcome-art img,.hero-island img,.garden-art>img{animation:none!important}
}
/* 主按钮：一块实心的“鹅卵石”，按下去会沉一点；没有渐变和流光。 */
/* ==========================================================================
   UX V3 布局层（2026-11-08）。只管尺寸、位置和动效；颜色在上面的「岛屿纸本」主题里。
   问题编号见 docs/产品美学与用户体验全面审计及重构报告.md 第八章。
   ========================================================================== */
/* L1 孩子能点的字：按钮和链接正文不低于 15–16px（UX-T-01） */
.button{font-weight:650;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:14px;background:var(--sea);color:#fff;font-size:1rem;transition:transform .15s,background .15s;box-shadow:0 3px 0 #134b46,0 8px 18px rgba(31,111,104,.18);position:relative;text-wrap:balance}
/* ---- Launch QA pass ---- */
/* Touch targets at least 44 px; readable small text; enough contrast. */
.text-button{font-size:.9375rem;min-height:44px;padding:8px 12px}
.nav-item{font-size:1rem;min-height:48px}
/* L3 听音选字的四张字卡跟着屏幕长大：横屏平板约 130–150px 一张，手机竖屏约 130px（UX-L-02） */
main:is([data-page="study"],[data-page="placement"]) .choices:not(.gate):not(.quick-grid){width:100%;max-width:min(620px,92%,64vh);gap:clamp(10px,2vh,18px);margin-top:clamp(10px,2.4vh,26px);margin-bottom:clamp(10px,2.4vh,26px)}
main:is([data-page="study"],[data-page="placement"]) .choices:not(.gate) .choice{min-height:clamp(84px,min(16.5vh,27vw),160px);font-size:clamp(2.5rem,9vh,4.75rem);font-family:"Island Kai","Kaiti SC",KaiTi,STKaiti,serif;line-height:1.1}
main[data-page="study"] .stage-transfer .choices .word-choice{min-height:clamp(68px,10dvh,100px);font-size:clamp(1.5rem,5vw,2.25rem);padding:8px}
.mission-goal{font-size:1rem;color:var(--sea-ink);margin:0 0 12px;font-weight:650}
main[data-page="study"] .quick-grid{width:100%;max-width:min(660px,94%,90vh)}
main[data-page="study"] .quick-grid .choice{min-height:clamp(80px,14vh,140px)}
/* L4 学新字：目标字是一屏里最大的东西（UX-L-03） */
.stage-learn .big-char{font-size:clamp(5.25rem,19vh,10rem);line-height:1.08}
@media (orientation:landscape){
  /* L2 学习与摸底：横屏把一屏填满，题目卡片占满剩余高度，内容在卡片里居中（UX-L-01） */
  html body.focus main:is([data-page="study"],[data-page="placement"]) .practice{min-height:calc(100dvh - 36px);display:flex;flex-direction:column}
  /* L5 首次使用的三页（年龄、欢迎、起点）在横屏垂直居中，不再上半屏挤、下半屏空（UX-L-04） */
  html body.focus main:is([data-page="study"],[data-page="placement"]) .practice>.study-card{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
  .stage-learn .learn-layout{grid-template-columns:minmax(0,1fr) minmax(0,clamp(200px,30vw,360px));gap:clamp(16px,3vw,40px)}
  html body main:is([data-page="welcome"],[data-page="start"]){min-height:calc(100dvh - 40px);display:flex;flex-direction:column;justify-content:center}
  html body main[data-page="start"] .start-page{min-height:0}
}
/* 孩子的单列页面在可用高度里上下居中，留白不再全堆在底部（核查 WorkBuddy 报告 VIS-001，实测首页底部空 27–50%、顶部只有 3–6%） */
main:is([data-page="home"],[data-page="welcome"],[data-page="start"],[data-page="garden"]){display:flex;flex-direction:column;justify-content:safe center}
/* UA-03：字库、地图、键盘岛、偏旁、详细记录是“桌面”式的列表页，顶对齐，和“我的小岛”同一起点；只有单件事的页面才上下居中。 */
main:is([data-page="map"],[data-page="book"],[data-page="game"],[data-page="keys"],[data-page="rank"]){display:flex;flex-direction:column;justify-content:flex-start}
main:is([data-page="map"],[data-page="book"],[data-page="game"],[data-page="keys"],[data-page="rank"])>.practice{margin-top:0;margin-bottom:0}
main:is([data-page="home"],[data-page="welcome"],[data-page="start"],[data-page="garden"],[data-page="map"],[data-page="book"],[data-page="game"],[data-page="keys"],[data-page="rank"])>*{width:100%}
@media (min-width:700px){
  /* L6 我的小岛：小岛本身是主角，按屏幕高度放大（UX-L-05） */
  html body .island-home{width:100%}
  html body .island-home .garden-art{max-width:820px;width:min(100%,820px,calc((100dvh - 330px)*1.5))}
}
@media (max-width:650px){
  body.focus .info-banner{margin-right:60px}
  /* L7 手机：孩子页左右留 16px，卡片和按钮不贴屏幕边（UX-L-06） */
  /* L8 手机上的「听」按钮：学习、故事等没有底部导航的页面，停在右上角标题栏里，不再压住选项和“听一句话”（UX-I-01） */
  .topbar nav{position:fixed;bottom:0;left:0;right:0;z-index:30;background:#fff;border-top:1px solid var(--line);padding:6px 8px max(6px,env(safe-area-inset-bottom));justify-content:space-around}
  .brand{font-size:1.0625rem}
  .top-actions .icon-button{width:38px;height:38px}
  footer span{display:none}
  .page-head .pill{font-size:.8125rem;padding:8px}
  .hero{padding:25px;min-height:365px;align-items:flex-start}
  .tasks{grid-template-columns:1fr;gap:12px}
  .task-card{min-height:90px;padding:18px 20px;display:grid;grid-template-columns:48px 1fr;column-gap:15px;align-items:center}
  .task-card .round-icon{grid-row:1/3}
  .task-card .arrow{top:33px}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .theme-card{padding:18px;min-height:165px}
  .theme-card .preview-chars{display:none}
  .practice-top{gap:10px}
  .study-footer{flex-direction:column-reverse}
  .mentor{font-size:.8125rem}
  .writer-box{max-width:310px}
  .leaderboard th:last-child,.leaderboard td:last-child{display:none}
  .matching{grid-template-columns:repeat(2,1fr)}
  .form-row{gap:10px}
  .form-row select{max-width:135px}
  .story-text{font-size:1.1875rem;padding:20px}
  #toast{bottom:100px}
  dialog{padding:28px 22px}
  .context-scene{display:flex;align-items:center;gap:10px;padding:14px}
  .context-label{display:none}
  .mini-stats.growth>div{flex:1 1 40%}
  .island-home .garden-art{width:min(100%,calc((100dvh - 450px)*1.5))}
  .island-tools{gap:8px}
  .gift-options{grid-template-columns:1fr;gap:8px;margin:12px 0}
  .gift-options .shop-item{display:grid;grid-template-columns:40px 1fr 130px;padding:12px;gap:10px}
  .gift-options h3{font-size:.95rem;text-align:left}
  .explore-options{gap:8px}
  .story-card .choices{grid-template-columns:1fr;gap:8px}
  .story-card .choice.word-choice{min-height:52px;font-size:1.15rem}
  .reading-line strong{font-size:1.3rem}
  .reading-line{padding:14px 0;gap:8px}
  .story-option{display:grid;grid-template-columns:1fr 92px;align-items:center}
  .story-page .practice-top{margin-bottom:4px}
  .story-page .tabs{margin:4px 0 8px}
  .story-card{padding:18px}
  .reader-page{padding:18px 16px}
  .reader-sentence{min-height:190px;margin:12px auto;font-size:30px}
  .reader-finish{padding:24px 0;font-size:1.2rem}
  .mission-today .today-purpose{font-size:1.3rem}
  .mission-options{gap:10px}
  .mission-options .card{padding:10px;gap:8px}
  .mission-options b{font-size:1rem}
  .mission-places{gap:10px}
  .mission-places .button{min-width:0;flex:1}
  .mission-sentence{font-size:28px;min-height:100px}
  .mission-reading .mission-scene{width:100%}
  .mission-placement-copy{font-size:1rem}
  .page-turn{gap:8px}
  .topbar{padding:0 20px;height:76px;background:var(--card)}
  .voice-help{bottom:calc(7px + env(safe-area-inset-bottom,0px));width:44px;min-width:0;padding:0;left:8px;right:auto;height:44px;border-radius:22px;z-index:60}
  .voice-help .voice-help-label{display:none}
  .voice-help .ico{width:22px;height:22px}
  main{padding-bottom:92px}
  html body.focus main{padding-left:16px;padding-right:16px;padding-bottom:16px}
  .today-art{max-width:min(300px,30vh)}
  /* 学习时顶部品牌栏没有用处，手机上收起它（横屏平板早已如此），把 76px 还给题目。 */
  body.focus .topbar{display:none}
  body.focus .stage-pill{display:none}
  body.focus .voice-help{top:calc(14px + env(safe-area-inset-top,0px));bottom:auto;right:16px;left:auto}
  /* UA-02 手机：toast 再往下一点，避开左上角的“休息一下”。 */
  body.focus #toast{top:calc(76px + env(safe-area-inset-top,0px))}
}
/* L9 动效：装饰和插图只在出现时动一次，不再无限漂浮；键盘岛提示键的闪光是功能，保留（UX-M-01） */
.today-art .decoration,.hero-island .decoration,.decoration,.decoration.new,.story-scene .emoji,.mail-empty .emoji{animation-iteration-count:1}
/* L10 9–11 岁：同一套颜色里更沉稳——实心深海色按钮、更小的圆角，不用渐变（UX-A-02） */
body.mature .button.big{background:#1d4f5a;box-shadow:0 3px 0 #123540,0 8px 18px rgba(29,79,90,.18)}
body.mature :is(.card,.choice,.study-card,.kb-station,.char-card){border-radius:12px}
body.mature .pill.yellow{background:var(--paper-2);border-color:var(--line);color:var(--ink)}
@media (max-width:650px) and (orientation:portrait){
  /* 手机竖屏的学习、摸底页也像横屏一样让题目卡填满高度；欢迎和起点页在整屏里居中（核查 VIS-001：390/430 宽底部空 18–26%、欢迎页空 38–44%） */
  html body.focus main:is([data-page="study"],[data-page="placement"]) .practice:not(:has(.stage-write)):not(:has(.completion)){min-height:calc(100dvh - 32px);display:flex;flex-direction:column}
  html body.focus .study-card.stage-write .study-footer{margin-top:8px}
  html body.focus main[data-page="study"]:has(.completion){min-height:100dvh;display:flex;flex-direction:column;justify-content:safe center}
  html body.focus main:is([data-page="study"],[data-page="placement"]) .practice>.study-card{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
  html body.focus main:is([data-page="welcome"],[data-page="start"]){min-height:100dvh}
  /* 学新字页在手机竖屏要一屏放下：情境卡的小兔和说明行收起（例句留着，“听一句话”会读它），大字略小 */
  html body.focus .stage-learn .scene-card :is(small,.visual-purpose),html body.focus .stage-learn .context-scene>svg{display:none}
  html body.focus .stage-learn .big-char{font-size:clamp(4.5rem,15vh,7rem)}
  /* 键盘岛：四个“排”按钮在返回和读音开关之间被挤成一列（390 宽滚动 45px）；改成单独一行 */
  html body .kb-page .kb-chips{order:5;flex:1 1 100%;flex-wrap:nowrap;gap:6px}
  html body .kb-page .kb-chips .chip{padding:6px 10px;font-size:.875rem;flex:1 1 0;white-space:nowrap}
  /* 右上角的“听”按钮（44px）不要压住“按键读拼音”开关 */
  html body.has-voice .kb-page .practice-top{padding-right:56px}
  /* 完成页：360 宽时 5 个字排不下一行，折成两行后页面要滑 77px；字卡收窄一点，5 个字一行放下 */
  html body .completion .note-chars{gap:6px}
  html body .completion .note-chars span{min-width:40px;padding:4px 5px}
  html body .completion .hero-island{max-width:min(100%,25vh)}
  /* 点了“听一句话”后下面已经有这句话，情境卡里的同一句收起 */
  html body.focus .stage-learn:has(.learn-more) .scene-card:has(.context-scene){display:none}
  /* L11 手机首页：原来要往下滑 200px 才看得到「开始」以下的内容（违反原则 8）。
   小岛卡片改成一行图标加名字，说明文字收进朗读；今天的计划一行写完；离线状态手机上不占位（家长页仍可看）（UX-L-07） */
}
@media (min-width:651px) and (orientation:portrait){
  html body .today-art{max-width:min(460px,32vh)}
}
@media (max-width:650px) and (orientation:portrait){
  /* 自由探索页的筛选需要一眼看全，内容靠分页保持在一屏内。 */
  html body main[data-page="home"]{padding-top:12px}
  .today .greet{margin-bottom:4px}
  .island-pick{gap:10px}
  .island-pick .pick{flex-direction:row;min-height:60px;padding:8px 12px;gap:8px;justify-content:center;align-items:center}
  .island-pick .pick small{display:none}
  .island-pick .pick .emoji,.island-pick .pick img{width:30px;height:30px}
  .today .today-summary{font-size:1.15rem;line-height:1.5}
  .today.is-done :is(.greet,.streak){display:none}
  .today.is-done .mission-scene{width:min(100%,240px);margin:4px auto}
  .today.is-done .today-art{max-width:min(240px,26vh)}
  .today.is-done .today-summary{margin:4px 0 10px}
  .today.is-done .button.big{min-height:52px;padding:10px 28px}
  .today.is-done>.text-button{margin-top:4px}
  .today.is-done~.home-extras{gap:8px;margin-top:8px}
  .today.is-done~.home-extras>.card{padding:12px 16px}
  .today .today-purpose{font-size:1.05rem;margin:8px 0 2px}
  main[data-page="home"] .offline-note{display:none}
  html body main:is([data-page="map"],[data-page="book"],[data-page="keys"],[data-page="game"]){padding-top:10px}
  main:is([data-page="map"],[data-page="book"]) .tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0}
  main[data-page="map"] .tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
  main:is([data-page="map"],[data-page="book"]) .tabs .chip{min-width:0;min-height:44px;padding:6px 4px;font-size:.8125rem;white-space:normal}
  main:is([data-page="map"],[data-page="book"],[data-page="keys"]) .page-head{margin-bottom:8px}
  main:is([data-page="map"],[data-page="book"],[data-page="keys"]) .page-head p{display:none}
  main[data-page="book"] .char-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  main[data-page="book"] .char-card{padding:10px 8px;min-height:0}
  main[data-page="book"] .char-card .hanzi{font-size:2.4rem}
  main[data-page="map"] .voyage{padding:10px 14px;margin-bottom:8px}
  main[data-page="map"] .theme-card{min-height:0;padding:14px}
  main[data-page="map"] .theme-card h3+p{display:none}
  main[data-page="map"] .grid{gap:10px}
  .kb-hub .kb-stations{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kb-hub .kb-station{min-height:0;padding:12px 10px}
  .kb-hub .kb-station p{font-size:.8125rem;line-height:1.4}
  .story-page .story-scene{padding:6px 10px;margin-bottom:6px}
  .story-page .story-scene .emoji,.story-page .story-scene img{width:52px;height:52px}
  .story-page .story-card h3{font-size:1.05rem;line-height:1.5}
  .kb-hub .practice-top{gap:4px 10px;align-items:center;flex-wrap:wrap}
  .kb-hub .practice-top>*{white-space:nowrap;font-size:.875rem;min-width:0}
  .kb-hub .kb-st-icon{display:none}
  main[data-page="game"] .page-head{margin-bottom:8px}
  main[data-page="game"] .page-head p{display:none}
  main[data-page="game"] .study-card{min-height:0;padding:14px 12px}
  main[data-page="game"] .matching{gap:8px;margin:10px 0}
  main[data-page="game"] .matching button{min-height:76px;padding:6px}
  main[data-page="game"] .feedback{min-height:0;margin-top:6px}
}
@media (orientation:landscape) and (min-height:961px){
  /* 高于 960px 的横屏保留顶栏（90px；第 511 行起 ≤960px 的横屏在专注模式下隐藏顶栏，两处断点要一致），首次三页的居中高度要扣掉它（UX-L-10） */
  html body.focus main:is([data-page="study"],[data-page="placement"]) .practice{min-height:calc(100dvh - 170px)}
  html body main:is([data-page="welcome"],[data-page="start"]){min-height:calc(100dvh - 190px)}
}
@media (min-width:700px) and (orientation:landscape) and (max-height:820px){
  html body .island-home .garden-art{width:min(100%,820px,calc((100dvh - 362px)*1.5))}
}
/* ---- 方案 B 第二步 ---- */
/* 首页“换一换”：一个安静的文字按钮，不和“开始”抢（UX-I-03） */
.today .change-link{display:flex;align-items:center;justify-content:center;gap:6px;margin:6px auto 0}
.today .change-link .ico{width:18px;height:18px}
.today.is-fresh~.offline-note{display:none}
.change-sub{margin:10px 0 8px}
#modal .island-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 6px}
#modal .mission-options .card.on{border-color:var(--sea);background:var(--sea-soft)}
.grownup-options{display:grid;gap:12px;margin-top:16px}
.grownup-options .button{width:100%}
/* 种子木牌：正在学的字立在下一株芽的位置旁（UX-G-01） */
.seed-bed{position:absolute;inset:0;pointer-events:none;z-index:5}
/* Seed signs scale with the island picture, not the window (container units). */
.garden .garden-art{container-type:inline-size}
.seed-sign{position:absolute;transform:translate(-50%,-100%);min-width:1.9em;padding:.2em .45em .25em;border-radius:6px;background:#f3dfb8;border:1px solid #c9a46a;box-shadow:0 2px 0 #b98d52;color:#5a4120;font:600 clamp(.8125rem,2.7cqw,1.15rem)/1.1 "Island Kai","Kaiti SC",KaiTi,serif;text-align:center}
.seed-sign::after{content:'';position:absolute;left:50%;bottom:-9px;width:3px;height:9px;margin-left:-1.5px;background:#a77c45;border-radius:2px}
.seed-more{position:absolute;left:50%;top:88%;transform:translate(-50%,0);font-size:.8125rem;color:var(--muted);background:rgba(255,253,248,.88);padding:2px 8px;border-radius:10px;white-space:nowrap}

/* 手机横屏（高度 ≤500px）写字：写字格在左、说明和按钮在右，写字格按屏幕高度定尺寸，不再缩成 0（审查 FUNC-03：800×360 时写字格为 0×0） */
@media (orientation:landscape) and (max-height:500px){
  html body.focus .study-card:has(> #writer){display:grid!important;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"w h" "w s" "w t" "w a" "w f";column-gap:24px;row-gap:2px;align-content:center;align-items:center;justify-items:center;padding:8px 16px;min-height:0}
  html body.focus .study-card:has(> #writer)>h2{grid-area:h;margin:0;font-size:1.15rem}
  html body.focus .study-card:has(> #writer)>.study-sub{grid-area:s;margin:0}
  html body.focus .study-card:has(> #writer)>.write-top{grid-area:t;min-height:0}
  html body.focus .study-card:has(> #writer)>.write-actions{grid-area:a}
  html body.focus .study-card:has(> #writer)>.study-footer{grid-area:f;margin-top:0;min-height:0}
  html body.focus .study-card > #writer{grid-area:w;width:min(320px,calc(100dvh - 124px))!important;margin:0}
  /* 矮横屏时“听”按钮放到右上角，不压住左边的写字格；阶段标签让位 */
  body.focus .voice-help{top:8px;bottom:auto;right:12px;left:auto;width:44px;height:44px;min-width:0;padding:0}
  body.focus .voice-help .voice-help-label{display:none}
  body.focus .stage-pill{display:none}
}
/* 手机横屏（高度 ≤500px）键盘岛：题目在左、键盘在右，键高按屏幕高度算，26 个字母键都在首屏（审查 UI-02：800×360 时只有 10/26 个键在首屏） */
@media (orientation:landscape) and (max-height:500px){
  html body .kb-page{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto minmax(0,1fr);column-gap:14px;min-height:calc(100dvh - 26px)}
  html body .kb-page>.practice-top{grid-column:1/-1;margin-bottom:4px}
  html body .kb-page>.kb-prompt{grid-column:1;margin:0;padding:8px 10px}
  html body .kb-page>.kb-board,html body .kb-page>.kb-tones{grid-column:2;align-self:center;width:100%}
  html body .kb-page .kb-key{height:clamp(34px,calc((100dvh - 132px)/4),50px)}
  html body .kb-page .kb-row{margin-bottom:4px}
  html body .kb-page .kb-tones{grid-template-columns:repeat(2,1fr)}
  html body .kb-page .kb-tone{min-height:0}
}
/* 键盘操作后焦点交给主区域（ACCESS-02）：主区域本身不画焦点框 */
#app:focus{outline:none}
/* 年龄页最下方给家长的一句说明（11-10 使用记录：一半家长在年龄页没有任何操作就离开） */
.welcome .parent-blurb{order:20;margin:14px auto 0;max-width:34em;font-size:.8125rem;line-height:1.6;color:var(--muted);text-align:center}
.welcome .parent-blurb span{white-space:nowrap}
/* 小屏手机竖屏（高 ≤700，如 360×640）写字页：还没写完时“下一个字”藏着，页脚不再空占 60px；写字框略小一点（11-10 测得滚动 65px） */
@media (orientation:portrait) and (max-height:700px){
  html body.focus .study-card.stage-write .study-footer:has(#writing-next[hidden]){min-height:0;margin-top:0}
  /* svh：按地址栏展开时最小的可视高度算，地址栏伸缩时写字框不跟着变（画布在创建时就定了大小） */
  html body.focus .study-card.stage-write #writer{width:min(100%,280px,calc(100svh - 380px))!important}
  /* 写完后上面那排按钮本来就隐藏了（visibility），小屏上连位置也让出来，“下一个字”不被挤出屏幕 */
  html body.focus .study-card.stage-write .write-actions.done{display:none}
  /* 同样是小屏：答题页选项上下少留一点；完成页和首页的小岛图缩小，主按钮和信件留在一屏里 */
  html body.focus .choices{margin:10px auto}
  html body.focus main[data-page="study"]{padding-bottom:4px}
  html body .completion .hero-island{max-width:min(100%,17vh)}
  html body .completion h1{margin:8px 0}
  html body .today .today-art,html body .today.is-done .today-art{max-width:min(100%,12svh)}
  html body main[data-page="home"] .family-card .mentor p{display:none}
  /* 信件卡片整张可点，“点开读一读”只是提示，小屏上收起，把位置让给小岛图 */
  html body main[data-page="home"] .letter-card small{display:none}
  html body main[data-page="home"] .family-card>div[style]{margin-top:8px!important}
  html body main[data-page="home"] .home-extras{gap:8px}
  html body main[data-page="home"] .home-extras .card{padding:10px 14px}
}