:root{--bg:#fbf8f3;--surface:#fff;--text:#2a2522;--muted:#7b716a;--border:#e8e1d8;--accent:#c8102e;--right:#2e9e5b;--wrong:#d9534f;--heard:#f3c969;--warn-bg:#fff3cd;--warn-text:#664d03;--warn-border:#ffe69c;color:var(--text);background:var(--bg);font-family:system-ui,Microsoft YaHei,PingFang SC,sans-serif}@media (prefers-color-scheme:dark){:root{--bg:#1b1917;--surface:#262320;--text:#f1ebe4;--muted:#a69c93;--border:#3a3531;--heard:#8a6d23;--warn-bg:#3a3017;--warn-text:#f5dc8e;--warn-border:#6b5a22}}*{box-sizing:border-box}body{background:var(--bg);margin:0}button{font:inherit;color:inherit;cursor:pointer}.app{max-width:900px;margin:0 auto;padding:16px}header{flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:12px;display:flex}h1{color:var(--accent);margin:0;font-size:32px}h3{margin:20px 0 8px;font-weight:600}.pinyin{color:var(--muted);font-size:.75em;font-weight:400}nav,.scenes{flex-wrap:wrap;gap:6px;display:flex}nav button,.scenes button{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 14px}nav button.active,.scenes button.active{background:var(--accent);border-color:var(--accent);color:#fff}.scenes{margin-bottom:16px}.toggles{color:var(--muted);gap:14px;margin-left:auto;font-size:14px;display:flex}.warn{background:var(--warn-bg);color:var(--warn-text);border:1px solid var(--warn-border);border-radius:8px;margin-bottom:12px;padding:10px 14px;font-size:14px}.grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;display:grid}.grid.game{grid-template-columns:repeat(2,minmax(0,220px));justify-content:center;margin-top:16px}.card{aspect-ratio:1;background:var(--surface);border:2px solid var(--border);border-radius:18px;flex-direction:column;justify-content:center;align-items:center;gap:6px;transition:transform .1s,border-color .2s,opacity .2s;display:flex}.card:hover:not(:disabled){transform:scale(1.04)}.card:active:not(:disabled){transform:scale(.96)}.card.right{border-color:var(--right);box-shadow:0 0 0 4px color-mix(in srgb, var(--right) 30%, transparent)}.card.wrong{border-color:var(--wrong);opacity:.35;cursor:default}.emoji{font-size:56px;line-height:1}.grid.game .emoji{font-size:84px}.label{flex-direction:column;align-items:center;display:flex}.hanzi{font-size:20px}.center{flex-direction:column;align-items:center;gap:12px;margin-top:8px;display:flex}.hint{color:var(--muted)}.primary,.secondary,.danger{border:1px solid var(--border);border-radius:10px;padding:10px 22px}.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-size:18px}.secondary{background:var(--surface)}.danger{color:var(--wrong);border-color:var(--wrong);background:0 0;margin-top:24px}.stats{gap:24px;font-size:18px;display:flex}.stats b{color:var(--accent);font-size:24px}.progress-list{flex-wrap:wrap;gap:6px;display:flex}.chip{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:4px 10px;font-size:15px}.chip small{color:var(--muted)}.chip.heard{background:var(--heard);border-color:var(--heard)}.chip.known{background:var(--right);border-color:var(--right);color:#fff}.chip.known .pinyin,.chip.known small{color:#e6f5ec}.legend{flex-wrap:wrap;gap:6px;margin-top:20px;display:flex}@media (width<=600px){.toggles{margin-left:0}.grid{grid-template-columns:repeat(3,1fr);gap:8px}.emoji{font-size:40px}.grid.game{grid-template-columns:repeat(2,1fr)}.grid.game .emoji{font-size:64px}}.story-list{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;display:grid}.story-card{background:var(--surface);border:2px solid var(--border);border-radius:18px;flex-direction:column;align-items:center;gap:6px;padding:18px 10px;display:flex}.story-card small{color:var(--muted)}.story-head{align-items:center;gap:14px;margin-bottom:12px;display:flex}.story-head .hanzi{font-size:22px}.pic{align-items:center;gap:.15em;font-size:48px;line-height:1.1;display:inline-flex}.pic .big{font-size:1.8em}.pic .small{font-size:.6em}.pic .sep{width:.6em}.stage{background:var(--surface);border:2px solid var(--border);border-radius:24px;flex-wrap:wrap;justify-content:center;width:100%;min-height:220px;padding:20px;font-size:88px}.small-stage{min-height:120px;font-size:56px}.caption{text-align:center}.caption .hanzi{font-size:26px}.player{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.dots{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.dots button{background:var(--border);border:none;border-radius:50%;width:12px;height:12px;padding:0}.dots button.on{background:var(--accent)}.options{grid-template-columns:repeat(auto-fit,minmax(140px,180px));justify-content:center;gap:12px;margin-top:16px;display:grid}.stars{font-size:48px}@media (width<=600px){.stage{min-height:160px;font-size:56px}.pic{font-size:40px}.options{grid-template-columns:repeat(2,1fr)}}.pic>span{transition:transform .15s,filter .15s;display:inline-block}.pic .hl{filter:drop-shadow(0 0 10px var(--heard));transform:scale(1.25)}.pic .big.hl{transform:scale(1.12)}.echo{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.echo .rec{border-color:var(--wrong);color:var(--wrong);animation:1s infinite pulse}.order-slots{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.slot{border:2px dashed var(--border);background:var(--surface);border-radius:14px;justify-content:center;align-items:center;min-width:72px;min-height:72px;padding:6px;display:flex}.slot .pic{font-size:28px}.slot-num{color:var(--muted);font-size:22px}.options .card{aspect-ratio:auto;min-height:110px;padding:10px}.story-card.next{border-color:var(--accent)}.shake{border-color:var(--wrong);animation:.4s shake}.steps{flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:16px;font-size:14px;display:flex}.steps>span{border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:4px 10px}.steps .on{border-color:var(--accent);color:var(--text);font-weight:600}.steps .done{color:var(--right);border-color:var(--right)}.steps .today-time{border:none;margin-left:auto}.link{color:var(--muted);background:0 0;border:none;margin-top:20px;text-decoration:underline}.card{overflow:hidden}.card.demo{width:200px}.card.demo .emoji{font-size:110px}.anim-jump{animation:.7s ease-in-out infinite jump}.anim-run{animation:1s ease-in-out infinite run}.anim-spin{animation:1.2s linear infinite spin}.anim-sleep{animation:2.4s ease-in-out infinite breathe}.anim-laugh{animation:.35s ease-in-out infinite wiggle}.anim-cry{animation:.15s linear infinite shiver}.anim-clap{animation:.45s ease-in-out infinite clap}.anim-wave{transform-origin:70% 80%;animation:.6s ease-in-out infinite wave}@keyframes jump{0%,to{transform:translateY(15%)}50%{transform:translateY(-25%)}}@keyframes run{0%,to{transform:translate(25%)}50%{transform:translate(-25%)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes breathe{0%,to{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}@keyframes wiggle{0%,to{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}@keyframes shiver{0%,to{transform:translate(-3px)}50%{transform:translate(3px)}}@keyframes clap{0%,to{transform:scale(1)}50%{transform:scale(.75)}}@keyframes wave{0%,to{transform:rotate(-15deg)}50%{transform:rotate(25deg)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}@keyframes pulse{50%{opacity:.5}}.people,.items{grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px;display:grid}.items{margin-top:28px}.card.person{position:relative}.card.person.target{border-style:dashed;border-color:var(--accent)}.card.item{touch-action:none;-webkit-user-select:none;user-select:none;position:relative}.card.item.selected{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent)}.received{font-size:32px;position:absolute;bottom:8%;right:8%}.item-gone{aspect-ratio:1}@media (width<=600px){.people,.items{gap:6px}.card.person .emoji,.card.item .emoji{font-size:36px}.received{font-size:22px}.steps .today-time{margin-left:0}}.ear-options{gap:12px;width:100%;max-width:520px;margin-top:8px;display:grid}.ear-options.tone{grid-template-columns:repeat(4,1fr)}.ear-options.sound{grid-template-columns:repeat(2,1fr)}.card.ear{aspect-ratio:auto;min-height:110px}.card.ear .mark{font-size:44px;font-weight:700;line-height:1}.ear-options.sound .mark{font-size:30px}.ask{flex-direction:column;align-items:center;gap:8px;width:100%;display:flex}.ask .options{width:100%;margin-top:4px}.ask .link{margin-top:4px}.note{text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:12px;max-width:520px;padding:10px 14px}.note summary{cursor:pointer;color:var(--muted)}.note p{margin:8px 0 0;line-height:1.6}.tone-chart{width:100%;max-width:420px;margin:4px 0 0}.tone-chart svg{background:var(--surface);border:1px solid var(--border);border-radius:12px;width:100%;height:auto}.tone-chart polyline{fill:none;stroke-linecap:round;stroke-linejoin:round}.tone-chart .expected{stroke:var(--muted);stroke-width:5px;opacity:.45}.tone-chart .yours{stroke:var(--accent);stroke-width:2.5px}.tone-chart text{fill:var(--muted);font-size:10px}.tone-chart figcaption{color:var(--muted);text-align:center;margin-top:4px;font-size:12px}.yours-key{color:var(--accent)}.char-row{flex-wrap:wrap;gap:6px;display:flex}.char{border:2px solid var(--border);background:var(--surface);border-radius:12px;justify-content:center;align-items:center;width:52px;height:52px;padding:0;font-size:30px;display:flex}.char.locked{opacity:.35}.char.ready{border-color:var(--right)}.char.on{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);opacity:1}.comp{font-size:1.2em}.char-detail{background:var(--surface);border:1px solid var(--border);z-index:5;border-radius:16px;align-items:flex-start;gap:16px;margin:8px 0 12px;padding:14px;display:flex;position:sticky;top:8px}.big-char{text-align:center;min-width:80px;font-size:72px;line-height:1}.big-pinyin{font-size:20px}.char-detail .hint{margin:6px 0}.read-info{z-index:5;background:var(--surface);border:1px solid var(--border);border-radius:12px;min-height:44px;margin-bottom:10px;padding:8px 14px;font-size:20px;position:sticky;top:8px}.read-line{border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:8px;padding:6px 0;display:flex}.read-text{flex:1;min-width:0;margin:0;font-size:28px;line-height:1.6}.rw{font-size:inherit;background:0 0;border:none;border-radius:6px;padding:0}.rw:hover{background:color-mix(in srgb, var(--heard) 45%, transparent)}.read-actions{gap:6px;display:flex}.read-actions .secondary{padding:6px 10px}.read-pic{justify-content:center;width:100%;font-size:36px}@media (width<=600px){.read-text{font-size:24px}.big-char{min-width:60px;font-size:56px}.char{width:46px;height:46px;font-size:26px}nav{scrollbar-width:none;flex-wrap:nowrap;width:100%;overflow-x:auto}nav::-webkit-scrollbar{display:none}nav button{flex:none}header{gap:8px 12px}}