:root{--green: #58cc02;--green-dark: #46a302;--green-light: #d7ffb8;--blue: #1cb0f6;--blue-dark: #1899d6;--red: #ff4b4b;--red-dark: #ea2b2b;--gold: #ffc800;--purple: #ce82ff;--ink: #3c3c3c;--ink-soft: #777;--line: #e5e5e5;--bg: #ffffff;--bg-soft: #f7f7fb;--card: #ffffff;--tone1: #e0342f;--tone2: #e8a114;--tone3: #2ba52e;--tone4: #2b7de0;--tone0: #9aa0a6;--topbar-bg: rgba(255, 255, 255, .92);--tint-red: #fff3f3;--tint-gold: #fff6d8;--tint-green: #eaffd8;--tint-blue: #eaf7ff;--tint-purple: #f3ecff;--tint-red-line: #ffd2c2;--tint-gold-line: #ffe9a3;--tint-green-line: #b8e894;font-size:16px}html[data-theme=dark]{--bg: #171a21;--bg-soft: #101218;--card: #232833;--line: #3a4050;--ink: #eef1f4;--ink-soft: #9aa4b0;--tone1: #ff6f6a;--tone2: #ffb84d;--tone3: #52c957;--tone4: #5c9dff;--tone0: #8b929c;--topbar-bg: rgba(16, 18, 24, .92);--tint-red: #382327;--tint-gold: #37301f;--tint-green: #22371f;--tint-blue: #1c3038;--tint-purple: #2c2440;--tint-red-line: #6b3a35;--tint-gold-line: #6b5a26;--tint-green-line: #3f6b34;--green-dark: #86e054;--red-dark: #ff8177;--blue-dark: #6cc7ff}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;font-family:Nunito,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg-soft);color:var(--ink)}.hanzi{font-family:Noto Sans SC,PingFang SC,Hiragino Sans GB,sans-serif}.tone-1{color:var(--tone1)}.tone-2{color:var(--tone2)}.tone-3{color:var(--tone3)}.tone-4{color:var(--tone4)}.tone-0{color:var(--tone0)}.tone-1-bg{background:var(--tone1)}.tone-2-bg{background:var(--tone2)}.tone-3-bg{background:var(--tone3)}.tone-4-bg{background:var(--tone4)}.tone-0-bg{background:var(--tone0)}button{font-family:inherit;cursor:pointer}.page{min-height:100vh;display:flex;flex-direction:column}.btn{border:none;border-radius:14px;font-weight:800;font-size:.95rem;padding:10px 18px;letter-spacing:.4px;transition:transform .05s,filter .15s}.btn:active:not(:disabled){transform:translateY(2px)}.btn:disabled{cursor:default}.btn-primary{background:var(--green);color:#fff;box-shadow:0 4px 0 var(--green-dark);text-transform:uppercase}.btn-primary:hover:not(:disabled){filter:brightness(1.06)}.btn-primary:active:not(:disabled){box-shadow:0 2px 0 var(--green-dark)}.btn-primary:disabled{background:var(--line);color:#afafaf;box-shadow:0 4px #d8d8d8}.btn-danger{background:var(--red);color:#fff;box-shadow:0 4px 0 var(--red-dark);text-transform:uppercase}.btn-ghost{background:transparent;color:var(--ink-soft);border:2px solid var(--line);box-shadow:0 3px 0 var(--line)}.btn-big{font-size:1.05rem;padding:14px 40px;border-radius:16px}.btn-recap{background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;box-shadow:0 4px #55219f;border:none;display:inline-flex;align-items:center;gap:4px;font-weight:800;border-radius:14px;padding:10px 16px;font-size:.95rem;white-space:nowrap}.btn-recap:disabled{background:var(--line);color:var(--ink-soft);box-shadow:none;cursor:not-allowed;transform:none}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--topbar-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:2px solid var(--line)}.brand{font-size:1.35rem;font-weight:900;color:var(--green);letter-spacing:.5px;display:flex;align-items:center;gap:8px}.brand-panda{font-size:1.5rem}.stats{display:flex;align-items:center;gap:14px}.stat{font-weight:800;font-size:1rem;color:var(--ink)}.stat-streak{color:#ff9600}.stat-xp{color:var(--blue-dark)}.path-main{width:min(560px,94vw);margin:0 auto;padding:24px 0 80px}.song-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;--song-color: #e52d27;background:linear-gradient(135deg,color-mix(in srgb,var(--song-color) 72%,#000),var(--song-color));color:#fff;border-radius:20px;padding:22px 24px;box-shadow:0 6px color-mix(in srgb,var(--song-color) 55%,#000);margin-bottom:34px}.song-hero h1{margin:2px 0 4px;font-size:2rem;font-family:Noto Sans SC,sans-serif}.song-hero-eyebrow{text-transform:uppercase;font-size:.72rem;letter-spacing:1.5px;opacity:.85;font-weight:800}.song-hero-pinyin{font-size:1rem;font-weight:700;opacity:.9;font-family:Nunito,sans-serif}.song-hero-sub{opacity:.92;font-weight:700;font-size:.95rem}.song-hero-play{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;box-shadow:none;padding:0}.song-hero-play-icon{width:58px;height:58px;border-radius:50%;background:var(--card);color:var(--song-color);display:flex;align-items:center;justify-content:center;font-size:1.5rem;box-shadow:0 4px #00000040}.song-hero-play-label{font-size:.68rem;font-weight:900;letter-spacing:.6px;text-transform:uppercase;color:#fff;opacity:.9}.word-progress{display:flex;align-items:center;gap:10px;margin-top:12px}.word-progress-bar{flex:1;height:12px;border-radius:8px;background:#ffffff4d;overflow:hidden}.word-progress-fill{height:100%;border-radius:8px;background:var(--gold);transition:width .4s}.word-progress-label{font-weight:800;font-size:.85rem}.review-card{display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;border-radius:18px;padding:16px 20px;box-shadow:0 5px #55219f;margin-bottom:26px}.review-card-title{font-weight:900;font-size:1.05rem}.review-card-sub{font-size:.82rem;opacity:.9;font-weight:700;margin-top:2px}.btn-review{background:var(--card);color:#6d28d9;box-shadow:0 4px #d8c7f5;text-transform:uppercase;flex:none}.review-done{background:var(--tint-green);border:2px solid var(--tint-green-line);color:#4a6b28;font-weight:800;border-radius:14px;padding:10px 16px;text-align:center;margin-bottom:26px;font-size:.9rem}.all-done-banner{background:var(--green-light);border:2px solid var(--green);color:#2c6a01;font-weight:800;border-radius:16px;padding:14px 18px;text-align:center;margin-bottom:26px}.unit{margin-bottom:18px}.unit-banner{color:#fff;border-radius:18px;padding:16px 20px;box-shadow:0 5px #0000002e;margin-bottom:26px}.unit-title{font-size:1.15rem;font-weight:900;letter-spacing:.3px}.unit-chinese{font-family:Noto Sans SC,sans-serif;opacity:.9;margin-left:6px}.unit-blurb{font-size:.85rem;opacity:.92;font-weight:700;margin-top:3px}.nodes{display:flex;flex-direction:column;align-items:center;gap:22px;padding:6px 0 26px}.node-row{display:flex;flex-direction:column;align-items:center;gap:6px}.node{position:relative;width:74px;height:74px;border-radius:50%;border:none;background:var(--node-color, var(--line));box-shadow:0 7px #00000038,inset 0 -5px #00000026;color:#fff;font-size:1.7rem;display:flex;align-items:center;justify-content:center;transition:transform .08s}.node:hover:not(:disabled){transform:scale(1.06)}.node:active:not(:disabled){transform:translateY(3px);box-shadow:0 4px #00000038,inset 0 -5px #00000026}.node-locked{background:#e5e5e5;color:#b5b5b5;cursor:default;box-shadow:0 7px #d0d0d0,inset 0 -5px #0000000f}.node-current{animation:pulse-ring 1.8s ease-out infinite}@keyframes pulse-ring{0%{outline:4px solid color-mix(in srgb,var(--node-color) 55%,transparent);outline-offset:3px}70%{outline:4px solid transparent;outline-offset:12px}to{outline:4px solid transparent;outline-offset:12px}}.node-start-tip{position:absolute;top:-34px;left:50%;transform:translate(-50%);background:var(--card);color:var(--node-color);border:2px solid var(--line);font-size:.72rem;font-weight:900;letter-spacing:1px;padding:5px 12px;border-radius:10px;animation:bob 1.2s ease-in-out infinite;white-space:nowrap}@keyframes bob{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-5px)}}.node-label{text-align:center}.node-label-title{font-weight:800;font-size:.85rem;color:var(--ink)}.node-label-locked .node-label-title{color:#b5b5b5}.node-label-done{font-size:.72rem;color:var(--ink-soft);font-weight:700}.path-footer{text-align:center;margin-top:30px}.btn-reset{background:none;border:none;color:silver;font-weight:700;font-size:.8rem;text-decoration:underline}.lesson-page{background:var(--bg)}.lesson-topbar{display:flex;align-items:center;gap:16px;padding:16px 20px;width:min(760px,96vw);margin:0 auto}.lesson-quit{background:none;border:none;font-size:1.3rem;color:#b5b5b5;font-weight:900}.lesson-quit:hover{color:var(--ink-soft)}.lesson-progress{flex:1;height:16px;background:var(--line);border-radius:10px;overflow:hidden}.lesson-progress-fill{height:100%;border-radius:10px;transition:width .35s ease;position:relative}.lesson-progress-fill:after{content:"";position:absolute;top:3px;left:8px;right:8px;height:4px;border-radius:4px;background:#ffffff59}.lesson-hearts{display:flex;gap:2px;font-size:1.05rem}.heart-empty{opacity:.5}.lesson-main{flex:1;width:min(680px,94vw);margin:0 auto;padding:12px 0 24px;display:flex;flex-direction:column;animation:slide-in .25s ease}@keyframes slide-in{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}.requeue-tag{align-self:flex-start;background:var(--tint-red);color:var(--red);border:2px solid #ffd6d6;font-size:.75rem;font-weight:900;letter-spacing:.5px;border-radius:10px;padding:4px 10px;margin-bottom:8px}.exercise-prompt{font-size:1.35rem;font-weight:900;margin:10px 0 18px}.exercise.new-word,.exercise.line-intro{text-align:center;padding-top:12px}.new-word-tag{display:inline-block;background:#e6f7ff;color:var(--blue-dark);font-weight:900;font-size:.75rem;letter-spacing:1.5px;border-radius:10px;padding:6px 14px;margin-bottom:18px}.new-word-hanzi{display:block;margin:0 auto;background:none;border:none;font-size:5.2rem;line-height:1.15;font-weight:700}.new-word-hanzi:hover{transform:scale(1.04)}.new-word-pinyin{font-size:1.5rem;color:var(--ink-soft);font-weight:800;margin-top:6px}.new-word-meaning{font-size:1.25rem;font-weight:800;margin:8px 0 14px}.mnemonic{display:flex;gap:12px;align-items:flex-start;text-align:left;background:var(--tint-green);border:2px solid var(--tint-green-line);border-radius:16px;padding:14px 16px;margin:22px auto 0;max-width:460px;font-weight:700;color:#4a6b28;font-family:Nunito,Noto Sans SC,sans-serif}.mnemonic-panda{font-size:1.5rem}.line-intro-hanzi{display:block;margin:0 auto;background:none;border:none;font-size:2.6rem;line-height:1.3;font-weight:700}.line-intro-pinyin{font-size:1.15rem;color:var(--ink-soft);font-weight:800;margin-top:6px}.line-intro-english{font-size:1.05rem;font-weight:700;color:var(--ink);margin:8px 0 12px}.gloss-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:20px}.gloss-chip{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:8px 12px;display:flex;flex-direction:column;align-items:center;gap:1px;box-shadow:0 3px 0 var(--line)}.gloss-chip:hover{border-color:var(--blue)}.gloss-hanzi{font-size:1.25rem;font-weight:700;font-family:Noto Sans SC,sans-serif}.gloss-pinyin{font-size:.78rem;color:var(--ink-soft);font-weight:800}.gloss-meaning{font-size:.72rem;color:var(--ink-soft);font-weight:700}.speaker-group{display:inline-flex;gap:10px;margin-top:6px}.btn-speaker{background:var(--blue);border:none;color:#fff;width:46px;height:46px;border-radius:14px;font-size:1.2rem;box-shadow:0 4px 0 var(--blue-dark)}.btn-speaker:active{transform:translateY(2px);box-shadow:0 2px 0 var(--blue-dark)}.btn-speaker-slow{background:#8ee000;box-shadow:0 4px #6cb000}.listen-block{display:flex;gap:14px;justify-content:center;margin:10px 0 20px}.listen-inline{margin:0;justify-content:flex-start}.listen-btn{width:74px;height:74px;border-radius:22px;border:none;background:var(--blue);color:#fff;font-size:2rem;box-shadow:0 5px 0 var(--blue-dark)}.listen-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--blue-dark)}.listen-btn-slow{background:#8ee000;box-shadow:0 5px #6cb000;font-size:1.7rem}.choice-big{background:none;border:none;font-size:3.4rem;font-weight:700;margin:4px 0 18px;align-self:flex-start}.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.options-lines{grid-template-columns:1fr}.option{position:relative;background:var(--card);border:2px solid var(--line);border-radius:16px;box-shadow:0 4px 0 var(--line);padding:34px 14px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:border-color .12s,background .12s;font-size:1rem}.option:hover:not(:disabled){background:#fafafa}.option-picked{border-color:var(--blue);box-shadow:0 4px 0 var(--blue);background:#eaf7ff!important}.option-right{border-color:var(--green)!important;box-shadow:0 4px 0 var(--green)!important;background:#eaffd8!important}.option-wrong{border-color:var(--red)!important;box-shadow:0 4px 0 var(--red)!important;background:#ffefef!important;animation:shake .35s}.option-num{position:absolute;top:8px;left:10px;font-size:.7rem;font-weight:900;color:#c9c9c9;border:2px solid var(--line);border-radius:6px;padding:1px 6px}.option-hanzi{font-size:1.9rem;font-weight:700;font-family:Noto Sans SC,sans-serif}.option-text{font-weight:800}.option-sub{font-size:.85rem;color:var(--ink-soft);font-weight:700}.option-sub-veiled{visibility:hidden}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.shake{animation:shake .35s}.order-target{display:flex;align-items:center;gap:16px;margin-bottom:14px}.order-english{font-weight:800;font-size:1.05rem;color:var(--ink)}.order-slots{min-height:74px;border-bottom:2px solid var(--line);border-top:2px solid var(--line);padding:12px 4px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:22px}.order-placeholder{color:#c5c5c5;font-weight:700}.order-bank{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.tile{background:var(--card);border:2px solid var(--line);border-radius:14px;box-shadow:0 4px 0 var(--line);padding:8px 14px;display:flex;flex-direction:column;align-items:center;font-size:1.35rem;font-weight:700;font-family:Noto Sans SC,sans-serif;transition:transform .08s}.tile:hover:not(:disabled){transform:translateY(-2px)}.tile-pinyin{font-size:.72rem;color:var(--ink-soft);font-weight:800;font-family:Nunito,sans-serif}.tile-used{background:var(--bg-soft);color:transparent;border-color:var(--bg-soft);box-shadow:0 4px 0 var(--bg-soft);cursor:default}.tile-used .hanzi span,.tile-used .tile-pinyin{color:transparent}.tile-placed{background:var(--tint-blue);border-color:#bfe6ff;box-shadow:0 4px #bfe6ff}.tile-choice{min-width:92px;position:relative;padding-top:26px}.tile-picked{border-color:var(--blue);box-shadow:0 4px 0 var(--blue);background:var(--tint-blue)}.tile-right{border-color:var(--green)!important;box-shadow:0 4px 0 var(--green)!important;background:#eaffd8!important}.tile-wrong{border-color:var(--red)!important;box-shadow:0 4px 0 var(--red)!important;background:#ffefef!important}.blank-line{font-size:2rem;font-weight:700;font-family:Noto Sans SC,sans-serif;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;margin:6px 0 8px}.blank-slot{display:inline-block;min-width:84px;border-bottom:3px dashed #bbb;text-align:center;padding:0 6px}.blank-filled{border-bottom-color:var(--blue)}.blank-english{color:var(--ink-soft);font-weight:700;margin-bottom:22px}.options-tiles{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.typein-ex .choice-big{cursor:default}.typein-ex .choice-big:hover{opacity:1}.typein-input{width:100%;max-width:420px;font-family:Nunito,sans-serif;font-size:1.35rem;font-weight:800;color:var(--ink);padding:14px 18px;border:2px solid var(--line);border-radius:16px;background:var(--bg-soft);outline:none;transition:border-color .15s,background .15s}.typein-input:focus{border-color:var(--blue);background:var(--card)}.typein-locked{opacity:.7}.typein-hint{margin-top:10px;font-size:.85rem;font-weight:700;color:var(--ink-soft)}.typein-retype{width:100%;max-width:420px;margin-top:16px;padding-top:14px;border-top:2px dashed var(--line);text-align:left}.typein-retype-label{font-size:.9rem;font-weight:800;color:var(--ink-soft);margin-bottom:8px}.typein-retype-target{color:var(--ink);font-size:1.05rem;letter-spacing:.02em}.typein-retype .typein-retype-input{margin-top:0;border-color:var(--red);background:var(--card)}.typein-retype .typein-retype-input:focus{border-color:var(--red)}.typein-retype-done .typein-retype-label{color:var(--green)}.typein-retype-done .typein-retype-input{border-color:var(--green);background:var(--tint-green);opacity:1}.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.match-col{display:flex;flex-direction:column;gap:10px}.match-card{background:var(--card);border:2px solid var(--line);border-radius:14px;box-shadow:0 4px 0 var(--line);padding:14px;font-size:1.15rem;font-weight:800;font-family:Noto Sans SC,Nunito,sans-serif;min-height:58px}.match-sel{border-color:var(--blue);box-shadow:0 4px 0 var(--blue);background:var(--tint-blue)}.match-done{border-color:#d8f0bd;background:var(--tint-green);color:#b7d99a;box-shadow:0 4px #d8f0bd;cursor:default}.match-done .hanzi span{color:#b7d99a}.match-wrong{border-color:var(--red);box-shadow:0 4px 0 var(--red);background:#ffefef;animation:shake .35s}.lesson-footer{border-top:2px solid var(--line);padding:18px 20px calc(18px + env(safe-area-inset-bottom));background:var(--bg)}.lesson-footer>.btn,.lesson-footer .feedback-row,.lesson-footer .footer-hint{width:min(680px,94vw);margin:0 auto;display:flex}.lesson-footer>.btn{display:block;margin-left:auto;margin-right:auto}.footer-correct{background:#d7ffb8;border-top-color:#b8e894}.footer-wrong{background:#ffdfe0;border-top-color:#ffc1c1}.feedback-row{align-items:center;justify-content:space-between;gap:20px}.feedback-title{font-weight:900;font-size:1.15rem}.footer-correct .feedback-title{color:#459c0b}.footer-wrong .feedback-title{color:var(--red-dark)}.feedback-detail{font-weight:700;color:var(--ink);margin-top:2px;font-family:Nunito,Noto Sans SC,sans-serif}.footer-hint{justify-content:center;color:var(--ink-soft);font-weight:800;padding:12px 0}.dead-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:40px 20px}.dead-emoji{font-size:4rem}.dead-screen h2{margin:0;font-size:1.6rem}.dead-screen p{color:var(--ink-soft);font-weight:700;margin:0 0 14px}.complete-page{align-items:center;justify-content:center;background:var(--bg)}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5}.complete-card{text-align:center;padding:40px 24px;animation:pop-in .4s cubic-bezier(.2,1.6,.45,1);z-index:6}@keyframes pop-in{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.complete-panda{font-size:4rem;margin-bottom:8px}.complete-card h1{margin:0 0 4px;color:var(--gold);font-size:2.1rem}.complete-lesson{color:var(--ink-soft);font-weight:800;margin-bottom:26px}.complete-stats{display:flex;gap:14px;justify-content:center;margin-bottom:22px}.cstat{border:2px solid var(--line);border-radius:16px;padding:12px 20px;min-width:110px}.cstat-xp{border-color:var(--gold)}.cstat-acc{border-color:var(--green)}.cstat-streak{border-color:#ff9600}.cstat-label{font-size:.7rem;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft)}.cstat-value{font-size:1.25rem;font-weight:900;margin-top:4px}.perfect-badge{display:block;width:fit-content;margin-left:auto;margin-right:auto;background:var(--tint-gold);border:2px solid var(--gold);color:#a07800;font-weight:800;border-radius:12px;padding:8px 16px;margin-bottom:22px}.songbook-main{width:min(720px,94vw);margin:0 auto;padding:24px 0 80px}.songbook-head h1{font-family:Noto Sans SC,sans-serif;margin:0 0 4px;font-size:2.2rem}.songbook-head{margin-bottom:14px}.tone-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:.78rem;font-weight:800;color:var(--ink-soft);margin-bottom:16px}.tone-legend-item{display:inline-flex;align-items:center;gap:5px}.tone-dot{width:10px;height:10px;border-radius:50%;display:inline-block}.ap{--ap-color: var(--green);background:var(--card);border:2px solid var(--line);border-radius:20px;box-shadow:0 4px 0 var(--line);padding:16px 18px 14px;margin-bottom:20px}.scrub{--scrub-color: var(--ap-color, var(--song-color, var(--green)));padding:14px 0;cursor:pointer;touch-action:none}.scrub-track{position:relative;height:8px;border-radius:99px;background:var(--line)}.scrub-fill{height:100%;border-radius:99px;background:var(--scrub-color)}.scrub-knob{position:absolute;top:50%;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--card);border:3px solid var(--scrub-color);transform:translateY(-50%);box-shadow:0 1px 4px #00000040;pointer-events:none}.scrub-tick{position:absolute;top:-3px;width:2px;margin-left:-1px;height:14px;border-radius:2px;background:color-mix(in srgb,var(--scrub-color) 45%,#000);opacity:.45;pointer-events:none}.ap-times{display:flex;justify-content:space-between;font-size:.78rem;font-weight:800;color:var(--ink-soft);font-variant-numeric:tabular-nums;margin-top:-6px}.ap-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin:10px 0 12px}.ap-play{width:64px;height:64px;border-radius:50%;border:none;background:var(--ap-color);color:#fff;font-size:1.35rem;line-height:1;box-shadow:0 4px color-mix(in srgb,var(--ap-color) 60%,#000);transition:transform .08s}.ap-play:active{transform:translateY(2px);box-shadow:0 2px color-mix(in srgb,var(--ap-color) 60%,#000)}.ap-btn{min-width:48px;min-height:48px;border-radius:14px;border:2px solid var(--line);background:var(--bg-soft);color:var(--ink);font-size:1.2rem;font-weight:800;display:flex;align-items:center;justify-content:center;gap:1px}.ap-btn:hover{border-color:var(--ap-color)}.ap-nudge-n{font-size:.7rem;font-weight:900}.ap-extras{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.ap-speeds{display:flex;gap:6px}.ap-speed{min-height:40px;padding:0 14px;border-radius:12px;border:2px solid var(--line);background:var(--bg-soft);font-weight:900;font-size:.85rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}.ap-speed-on{border-color:var(--ap-color);background:color-mix(in srgb,var(--ap-color) 12%,var(--card));color:var(--ink)}.ap-loop{min-height:40px;padding:0 14px;border-radius:12px;border:2px solid var(--line);background:var(--bg-soft);font-weight:800;font-size:.82rem;color:var(--ink-soft)}.ap-loop-on{border-color:var(--ap-color);background:color-mix(in srgb,var(--ap-color) 12%,var(--card));color:var(--ink)}.ap-note{margin-top:12px;font-size:.8rem;font-weight:700;color:var(--ink-soft);line-height:1.4}.ap-error,.ap-missing{font-size:.85rem;font-weight:700;color:var(--ink-soft)}.ap-error code,.ap-missing code{background:var(--bg-soft);border-radius:5px;padding:1px 5px;font-size:.9em}@media (max-width: 560px){.ap{padding:14px 14px 12px}.ap-controls{gap:16px}.ap-extras{justify-content:center}}.songbook-controls{display:flex;flex-wrap:wrap;align-items:center;gap:16px;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:12px 16px;margin-bottom:22px}.toggle{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.9rem;color:var(--ink);cursor:pointer}.toggle input{accent-color:var(--green);width:17px;height:17px}.song-lines{display:flex;flex-direction:column;gap:10px}.song-line{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:14px 16px;transition:border-color .2s,background .2s}.song-line-active{border-color:var(--gold);background:var(--tint-gold);box-shadow:0 0 0 3px #ffe9a3}.song-line-btns{display:flex;flex-direction:column;gap:8px}.song-line-hanzi{display:flex;flex-wrap:wrap;gap:2px;font-size:1.6rem;font-weight:700}.song-word{position:relative;background:none;border:none;border-radius:8px;padding:2px 3px;font-size:inherit;font-weight:inherit}.song-word:hover,.song-word:focus-visible{background:var(--tint-blue);box-shadow:0 0 0 2px #bfe6ff}.song-word:after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(4px);background:var(--ink);color:#fff;font-family:Nunito,sans-serif;font-size:.78rem;font-weight:800;white-space:nowrap;padding:6px 10px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;z-index:30}.song-word:before{content:"";position:absolute;bottom:calc(100% + 2px);left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:var(--ink);opacity:0;transition:opacity .12s;z-index:30}.song-word:hover:after,.song-word:focus:after{opacity:1;transform:translate(-50%) translateY(0)}.song-word:hover:before,.song-word:focus:before{opacity:1}.song-line-pinyin{color:var(--ink-soft);font-weight:700;margin-top:2px}.song-line-english{color:var(--ink-soft);font-weight:700;font-size:.9rem;margin-top:2px;font-style:italic}.songbook-tip{margin-top:26px;background:var(--tint-green);border:2px solid var(--tint-green-line);border-radius:16px;padding:14px 18px;font-weight:700;color:#4a6b28}.songbook-tip a{color:#2c6a01}@media (max-width: 560px){.topbar{padding:10px 12px}.brand{font-size:1.05rem;gap:5px}.brand-panda{font-size:1.15rem}.stats{gap:8px}.stat{font-size:.85rem;white-space:nowrap}.btn-recap{padding:12px;font-size:.82rem}.btn-recap-long{display:none}.node-row{transform:none!important}.options{grid-template-columns:1fr 1fr}.options-lines{grid-template-columns:1fr}.complete-stats{flex-direction:column;align-items:center}.song-hero h1{font-size:1.5rem}.feedback-row{flex-direction:column;align-items:stretch;text-align:center}.nav-cards{grid-template-columns:1fr}}.nav-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:26px}.nav-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:var(--card);border:2px solid var(--line);border-radius:16px;box-shadow:0 4px 0 var(--line);padding:14px 16px;text-align:left;transition:transform .08s}.nav-card:hover:not(:disabled){transform:translateY(-2px)}.nav-card-title{font-weight:900;font-size:1rem}.nav-card-sub{font-size:.78rem;color:var(--ink-soft);font-weight:700}.nav-card-families{border-color:#bfe6ff;box-shadow:0 4px #bfe6ff}.nav-card-exam{border-color:var(--gold);box-shadow:0 4px #e6c76e}.nav-card-locked{border-color:var(--line)!important;box-shadow:0 4px 0 var(--line)!important;opacity:.65;cursor:default}.guess-hint{color:var(--ink-soft);font-weight:700;font-size:.92rem;margin:6px auto 18px;max-width:420px}.guess-options{max-width:560px;margin:0 auto}.guess-result{display:inline-block;font-weight:800;border-radius:12px;padding:7px 14px;margin-bottom:12px;font-size:.95rem}.guess-right{background:var(--tint-green);color:#459c0b;border:2px solid var(--tint-green-line)}.guess-wrong{background:var(--tint-gold);color:#a07800;border:2px solid var(--tint-gold-line)}.gap-listen{align-items:center;margin-bottom:14px;display:flex;gap:12px}.gap-listen-label{font-weight:800;color:var(--ink-soft)}.order-exam-tag{color:#b8860b;font-weight:800}.exam-grade{margin:4px 0 18px}.exam-grade-letter{font-size:3.6rem;font-weight:900;color:var(--gold);text-shadow:0 3px 0 #d9aa00;line-height:1.1}.exam-grade-note{font-weight:800;color:var(--ink-soft)}.vanish-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#f6f0ff;border:2px solid #e3d1ff;border-radius:16px;padding:10px 14px;margin-bottom:18px}.vanish-label{font-weight:900;font-size:.9rem;color:#6d28d9}.vanish-btn{background:var(--card);border:2px solid #e3d1ff;border-radius:10px;font-weight:800;font-size:.82rem;padding:5px 12px;color:#6d28d9}.vanish-active{background:#6d28d9;border-color:#6d28d9;color:#fff}.vanish-hint{flex-basis:100%;font-size:.78rem;font-weight:700;color:#8b5cf6}.masked-word{color:#c9bfe0!important;letter-spacing:2px;background:#f6f0ff;border-radius:8px;border:2px dashed #d8c7f5!important;padding:0 6px!important}.masked-word:hover{background:var(--tint-purple)}.song-word-peeked{background:var(--tint-gold);border-radius:8px}.families-main{width:min(760px,94vw);margin:0 auto;padding:24px 0 80px}.families-intro{font-weight:700;color:var(--ink-soft);margin:0 0 22px}.fam-grid{display:grid;grid-template-columns:1fr;gap:16px}.fam-card{background:var(--card);border:2px solid var(--line);border-top:6px solid var(--fam-color, var(--line));border-radius:16px;padding:16px 18px}.fam-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}.fam-radical{font-size:2rem;font-weight:700;color:var(--fam-color);flex:none;min-width:64px}.fam-name{font-weight:900;font-size:1.1rem}.fam-tagline{font-size:.85rem;color:var(--ink-soft);font-weight:700}.fam-members{display:flex;flex-wrap:wrap;gap:10px}.fam-chip{background:var(--bg-soft);border:2px solid var(--line);border-radius:14px;box-shadow:0 3px 0 var(--line);padding:10px 14px;display:flex;flex-direction:column;align-items:center;gap:2px;max-width:190px}.fam-chip:hover{border-color:var(--fam-color)}.fam-chip-hanzi{font-size:1.5rem;font-weight:700}.fam-focus{background:color-mix(in srgb,var(--fam-color) 18%,transparent);border-radius:6px;padding:0 2px;box-shadow:inset 0 -3px 0 var(--fam-color)}.fam-chip-pinyin{font-size:.8rem;font-weight:800;color:var(--ink-soft)}.fam-chip-meaning{font-size:.75rem;font-weight:700;color:var(--ink)}.fam-chip-note{font-size:.68rem;font-weight:700;color:var(--ink-soft);font-family:Nunito,Noto Sans SC,sans-serif}.fam-chip-strength{font-size:.6rem;color:var(--green);letter-spacing:1px}.nav-cards{grid-template-columns:repeat(3,1fr)}.nav-card-words{border-color:#d8f0bd;box-shadow:0 4px #d8f0bd}.feedback-mnemonic{margin-top:6px;font-size:.85rem;font-weight:700;color:var(--ink-soft);font-family:Nunito,Noto Sans SC,sans-serif;max-width:480px}.btn-weak-practice{display:block;margin:8px auto 0;background:none;border:none;color:#459c0b;font-weight:800;font-size:.85rem;cursor:pointer;text-decoration:underline;font-family:inherit}.btn-weak-practice:hover{color:#2c6a01}.words-main{width:min(760px,94vw);margin:0 auto;padding:20px 0 60px}.words-intro{color:var(--ink-soft);font-weight:700;font-size:.92rem;margin:0 0 16px;font-family:Nunito,Noto Sans SC,sans-serif}.words-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}.btn-tricky{background:#ff9600;color:#fff;box-shadow:0 4px #c97400}.btn-tricky:hover{filter:brightness(1.05)}.words-list{display:flex;flex-direction:column;gap:8px}.word-row{background:var(--card);border:2px solid var(--line);border-radius:14px;overflow:hidden}.word-row-open{border-color:var(--green)}.word-row-main{display:flex;align-items:center;gap:14px;width:100%;padding:10px 14px;background:none;border:none;cursor:pointer;text-align:left;font-family:inherit}.word-row-locked .word-row-main{cursor:default;opacity:.55}.word-strength{font-size:.6rem;color:var(--green);letter-spacing:1px;flex:none;width:52px}.word-hanzi{font-size:1.35rem;font-weight:700;flex:none;min-width:64px}.word-pinyin{font-weight:800;color:var(--ink-soft);font-size:.85rem;flex:none;min-width:90px}.word-meaning{font-weight:700;color:var(--ink);font-size:.85rem;flex:1;font-family:Nunito,Noto Sans SC,sans-serif}.word-tricky{flex:none}.word-detail{padding:4px 14px 12px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:8px}.word-mnemonic{font-size:.85rem;font-weight:700;color:var(--ink-soft);font-family:Nunito,Noto Sans SC,sans-serif;padding-top:8px}.word-home{background:var(--bg-soft);border:2px solid var(--line);border-radius:10px;padding:8px 12px;text-align:left;cursor:pointer;font-size:1rem;font-weight:700;font-family:inherit}.word-home:hover{border-color:var(--gold)}.word-home-english{font-size:.78rem;color:var(--ink-soft);font-family:Nunito,Noto Sans SC,sans-serif}.word-home-song{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--line);color:var(--ink-soft);font-size:.68rem;font-weight:900;font-family:Nunito,Noto Sans SC,sans-serif;vertical-align:middle}.words-upcoming-title{margin:24px 0 10px;font-size:.95rem;color:var(--ink-soft)}@media (max-width: 560px){.nav-cards{grid-template-columns:1fr}.word-pinyin{min-width:0}.word-row-main{flex-wrap:wrap;gap:8px}}.options-many{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.options-many .option{padding:26px 8px 12px}.options-many .option-hanzi{font-size:1.6rem}@media (max-width: 560px){.options-many{grid-template-columns:repeat(3,minmax(0,1fr))}}.song-picker{--song-color: var(--green);position:relative;margin-bottom:18px}.song-picker-trigger{display:flex;align-items:center;gap:12px;width:100%;background:var(--card);border:2px solid var(--line);border-radius:14px;box-shadow:0 3px 0 var(--line);padding:10px 16px;text-align:left;font-family:inherit}.song-picker-trigger:hover{border-color:var(--song-color)}.song-picker-trigger-open{border-color:var(--song-color);box-shadow:0 3px 0 var(--song-color)}.song-picker-icon{font-size:1.4rem;flex:none}.song-picker-text{display:flex;flex-direction:column;min-width:0;flex:1}.song-picker-title{font-weight:900;font-size:1rem;font-family:Nunito,Noto Sans SC,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-picker-sub{font-size:.72rem;font-weight:700;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-picker-switch{flex:none;font-size:.68rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}.song-picker-caret{flex:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--bg-soft);color:var(--ink);font-size:.85rem;font-weight:900;line-height:1;transition:transform .15s}.song-picker-trigger-open .song-picker-caret{transform:rotate(180deg);background:color-mix(in srgb,var(--song-color) 16%,#fff);color:var(--song-color)}.song-picker-panel{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;max-height:min(60vh,420px);overflow-y:auto;background:var(--card);border:2px solid var(--line);border-radius:16px;box-shadow:0 10px 26px #00000029;padding:6px}.song-picker-panel-head{font-size:.68rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);padding:8px 10px 6px}.song-picker-item{--song-color: var(--green);display:flex;align-items:center;gap:12px;width:100%;background:none;border:2px solid transparent;border-radius:12px;box-shadow:none;padding:10px;text-align:left;font-family:inherit}.song-picker-item:hover{background:var(--bg-soft)}.song-picker-item-active{border-color:var(--song-color);background:color-mix(in srgb,var(--song-color) 8%,transparent)}.song-picker-item-icon{font-size:1.5rem;flex:none}.song-picker-item-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.song-picker-item-title{display:flex;align-items:baseline;gap:6px;font-weight:900;font-size:.98rem;font-family:Nunito,Noto Sans SC,sans-serif}.song-picker-item-pinyin{font-size:.72rem;font-weight:700;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-picker-crown{font-size:.8rem}.song-picker-item-sub{font-size:.7rem;font-weight:700;color:var(--ink-soft)}.song-picker-item-bar{height:6px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:2px}.song-picker-item-fill{display:block;height:100%;border-radius:4px;background:var(--song-color)}.song-picker-check{flex:none;font-weight:900;color:var(--song-color);font-size:1.1rem}.word-progress-global{opacity:.75;font-weight:700}.songbook-kind{font-size:.78rem;font-weight:800;color:var(--ink-soft);white-space:nowrap}.typein-english{font-size:1.9rem;font-weight:900;color:var(--ink);text-align:center;line-height:1.2;margin:6px 0;font-family:Nunito,Noto Sans SC,sans-serif}.mode-tabs{--song-color: var(--green);display:flex;gap:8px;margin-bottom:16px}.mode-tab{flex:1;background:var(--card);border:2px solid var(--line);border-radius:12px;box-shadow:0 3px 0 var(--line);padding:11px 8px;font-family:inherit;font-weight:900;font-size:.88rem;color:var(--ink-soft);white-space:nowrap}.mode-tab-on{border-color:var(--song-color);box-shadow:0 3px 0 var(--song-color);background:color-mix(in srgb,var(--song-color) 10%,#fff);color:var(--ink)}.mode-tab-lock{font-size:.75rem;opacity:.7}.kar{--song-color: var(--green);display:flex;flex-direction:column;gap:14px}.kar-stage{height:min(56vh,460px);overflow-y:auto;padding:40% 0;scrollbar-width:none}.kar-stage::-webkit-scrollbar{display:none}.kar-line{display:block;width:100%;background:none;border:none;box-shadow:none;padding:9px 8px;text-align:center;font-family:inherit;transition:opacity .25s,transform .25s}.kar-line-past{opacity:.28}.kar-line-next{opacity:.5}.kar-line-now{opacity:1;transform:scale(1.06)}.kar-row{position:relative;display:block;line-height:1.5}.kar-row-lead{display:inline-block;white-space:nowrap;max-width:100%}.kar-row-hanzi{font-family:Noto Sans SC,sans-serif;font-size:1.35rem;font-weight:800}.kar-line-now .kar-row-hanzi{font-size:1.75rem}.kar-line-now .kar-row-lead.kar-row-pinyin{font-size:1.25rem;font-weight:900}.kar-line-now .kar-row-lead.kar-row-english{font-size:1.1rem;font-style:normal;font-weight:900}.kar-base{opacity:.42;filter:grayscale(.55)}.kar-fill{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;width:0;text-align:left}.kar-row-pinyin{font-size:.8rem;font-weight:700;color:var(--ink-soft)}.kar-row-english{font-size:.78rem;font-style:italic;color:var(--ink-soft);opacity:.85}.kar-bar{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:12px;box-shadow:0 3px 0 var(--line)}.kar-leadin{margin-bottom:10px}.kar-leadin-label{display:block;font-size:.75rem;font-weight:900;color:var(--song-color);margin-bottom:4px}.kar-leadin-track{display:block;height:6px;border-radius:4px;background:var(--line);overflow:hidden}.kar-leadin-fill{display:block;height:100%;background:var(--song-color)}.kar-controls{display:flex;align-items:center;justify-content:center;gap:14px}.kar-play{flex:none;width:58px;height:58px;border-radius:50%;border:none;background:var(--song-color);color:#fff;font-size:1.3rem;box-shadow:0 4px color-mix(in srgb,var(--song-color) 55%,#000)}.kar-btn{flex:none;width:46px;height:46px;border-radius:50%;border:2px solid var(--line);background:var(--card);box-shadow:0 3px 0 var(--line);font-size:1.05rem;font-weight:900;color:var(--ink)}.kar-btn-n{font-size:.62rem;vertical-align:super}.kar-time{font-size:.8rem;font-weight:800;color:var(--ink-soft);font-variant-numeric:tabular-nums}.kar-extras{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:12px}.kar-speeds,.kar-offset{display:flex;align-items:center;gap:4px;background:var(--bg-soft);border-radius:999px;padding:3px}.kar-speed,.kar-offset-btn{border:none;background:none;box-shadow:none;border-radius:999px;padding:7px 11px;font-family:inherit;font-weight:900;font-size:.8rem;color:var(--ink-soft)}.kar-speed-on{background:var(--song-color);color:#fff}.kar-offset-val{font-size:.75rem;font-weight:900;color:var(--ink-soft);font-variant-numeric:tabular-nums;min-width:44px;text-align:center}.kar-shows{display:flex;align-items:center;gap:10px;background:var(--bg-soft);border-radius:999px;padding:6px 12px}.kar-toggle{display:flex;align-items:center;gap:5px;font-size:.8rem;font-weight:800;color:var(--ink-soft);cursor:pointer}.kar-toggle input{accent-color:var(--song-color)}.kar-toggle-locked{opacity:.5;cursor:not-allowed}.sync{--song-color: var(--green);display:flex;flex-direction:column;gap:14px}.sync-intro{background:var(--bg-soft);border-radius:12px;padding:12px 14px;font-size:.85rem;font-weight:700;color:var(--ink-soft);line-height:1.5}.sync-progress{display:flex;align-items:center;gap:10px}.sync-progress-bar{flex:1;height:10px;border-radius:6px;background:var(--line);overflow:hidden}.sync-progress-fill{height:100%;background:var(--song-color);transition:width .15s}.sync-progress-label{font-size:.78rem;font-weight:900;color:var(--ink-soft);font-variant-numeric:tabular-nums}.sync-tap{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;min-height:150px;justify-content:center;background:color-mix(in srgb,var(--song-color) 10%,#fff);border:3px dashed var(--song-color);border-radius:18px;box-shadow:none;padding:18px;font-family:inherit}.sync-tap:active{background:color-mix(in srgb,var(--song-color) 26%,#fff)}.sync-tap-label{font-size:.7rem;font-weight:900;letter-spacing:.1em;color:var(--song-color)}.sync-tap-line{font-family:Noto Sans SC,sans-serif;font-size:1.9rem;font-weight:900;line-height:1.4}.sync-tap-pinyin{font-size:.85rem;font-weight:700;color:var(--ink-soft)}.sync-next{text-align:center;color:var(--ink-soft)}.sync-next-line{font-family:Noto Sans SC,sans-serif;font-size:.95rem;font-weight:700;opacity:.55}.sync-done{background:var(--tint-green);border:2px solid var(--tint-green-line);border-radius:14px;padding:14px 16px}.sync-done-title{font-weight:900;color:#4a6b28}.sync-done-sub{font-size:.82rem;font-weight:700;color:#4a6b28;opacity:.85;margin-top:4px}.sync-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.sync-btn{background:var(--card);border:2px solid var(--line);box-shadow:0 3px 0 var(--line);border-radius:12px;padding:10px 14px;font-family:inherit;font-weight:800;font-size:.85rem;color:var(--ink)}.sync-btn:disabled{opacity:.45;box-shadow:none}.sync-speeds{display:flex;gap:4px;background:var(--bg-soft);border-radius:999px;padding:3px;margin-left:auto}.sync-speed{border:none;background:none;box-shadow:none;border-radius:999px;padding:7px 11px;font-family:inherit;font-weight:900;font-size:.8rem;color:var(--ink-soft)}.sync-speed-on{background:var(--song-color);color:#fff}.sync-offset{display:flex;flex-direction:column;gap:6px;background:var(--bg-soft);border-radius:12px;padding:12px 14px;font-size:.85rem;font-weight:800;color:var(--ink-soft)}.sync-offset input[type=range]{width:100%;accent-color:var(--song-color)}.sync-offset-hint{font-size:.75rem;font-weight:700;opacity:.8;line-height:1.45}.sync-save{width:100%}@media (max-width: 560px){.mode-tab{font-size:.78rem;padding:11px 4px}.kar-row-hanzi{font-size:1.15rem}.kar-line-now .kar-row-hanzi{font-size:1.45rem}.kar-line-now .kar-row-lead.kar-row-pinyin{font-size:1.05rem}.kar-line-now .kar-row-lead.kar-row-english{font-size:.95rem}.kar-shows{gap:8px;padding:6px 10px}.kar-toggle{font-size:.75rem}.kar-stage{height:52vh}.kar-time{width:100%;text-align:center;order:3}.sync-speeds{margin-left:0}}.sync-transport{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:4px 14px 12px;box-shadow:0 3px 0 var(--line)}.sync-transport .scrub{--scrub-color: var(--song-color)}.sync-times{display:flex;justify-content:space-between;font-size:.75rem;font-weight:800;color:var(--ink-soft);font-variant-numeric:tabular-nums;margin-top:-6px}.sync-transport-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px}.sync-nudge{flex:none;min-width:52px;height:44px;border-radius:12px;border:2px solid var(--line);background:var(--card);box-shadow:0 3px 0 var(--line);font-family:inherit;font-weight:900;font-size:.82rem;color:var(--ink);font-variant-numeric:tabular-nums}.sync-play{flex:none;width:56px;height:56px;border-radius:50%;border:none;background:var(--song-color);color:#fff;font-size:1.15rem;box-shadow:0 4px color-mix(in srgb,var(--song-color) 55%,#000)}.sync-dropped{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--tint-gold);border:2px solid var(--tint-gold-line);border-radius:12px;padding:10px 14px;font-size:.82rem;font-weight:800;color:#8a5a00}.sync-dropped-undo{margin-left:auto;background:var(--card);border:2px solid var(--tint-gold-line);box-shadow:0 2px #ffd699;border-radius:10px;padding:7px 12px;font-family:inherit;font-weight:900;font-size:.78rem;color:#8a5a00}.kar-bar .scrub{--scrub-color: var(--song-color)}@media (max-width: 560px){.sync-nudge{min-width:46px;font-size:.76rem}.sync-dropped-undo{margin-left:0}}.sync-note{border-radius:12px;padding:11px 14px;font-size:.8rem;font-weight:700;line-height:1.5}.sync-note code{background:#0000000f;border-radius:5px;padding:1px 5px;font-size:.95em;word-break:break-all}.sync-note-ok{background:var(--tint-green);border:2px solid var(--tint-green-line);color:#4a6b28}.sync-note-warn{background:var(--tint-gold);border:2px solid var(--tint-gold-line);color:#8a5a00}.sync-file{display:flex;flex-wrap:wrap;gap:8px}.sync-file-label{display:inline-flex;align-items:center;cursor:pointer}.sync-file-label input{display:none}.lesson-page{height:100vh;height:100dvh;min-height:0;overflow:hidden}.lesson-page .lesson-main{min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.lesson-page .lesson-topbar,.lesson-page .lesson-footer{flex-shrink:0}.lesson-page .dead-screen{min-height:0;overflow-y:auto}.songbook-page.songbook-karaoke{height:100vh;height:100dvh;min-height:0;overflow:hidden}.songbook-karaoke .songbook-main{flex:1;min-height:0;display:flex;flex-direction:column;padding-bottom:0}.songbook-karaoke .kar{flex:1;min-height:0}.songbook-karaoke .kar-stage{height:auto;flex:1;min-height:0;padding:12vh 0}.songbook-karaoke .kar-bar{flex-shrink:0}@media (max-height: 720px){.songbook-karaoke .songbook-head{margin-bottom:6px}.songbook-karaoke .songbook-head h1{font-size:1.35rem}.songbook-karaoke .songbook-head .song-hero-sub{display:none}.songbook-karaoke .kar-bar{padding:8px 10px calc(8px + env(safe-area-inset-bottom))}.songbook-karaoke .kar-extras{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:8px;padding-bottom:2px;scrollbar-width:none}.songbook-karaoke .kar-extras::-webkit-scrollbar{display:none}.songbook-karaoke .kar-extras>*{flex:none}.songbook-karaoke .kar-controls{gap:10px}.songbook-karaoke .kar-play{width:46px;height:46px;font-size:1rem}.songbook-karaoke .kar-btn{width:38px;height:38px}}.nav-card-grammar{border-color:#e2ccff;box-shadow:0 4px #e2ccff}.nav-card-pinyin{border-color:#cdeeff;box-shadow:0 4px #cdeeff}.quests{background:var(--card);border:2px solid var(--line);border-radius:18px;box-shadow:0 4px 0 var(--line);padding:16px 18px;margin-bottom:26px}.quests-done{border-color:#ffe08a;box-shadow:0 4px #ffe08a;background:var(--tint-gold)}.quests-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.quests-title{font-weight:900;font-size:1.05rem}.quests-goal{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:800;color:var(--ink-soft)}.quests-goal select{font-family:inherit;font-weight:800;border:2px solid var(--line);border-radius:10px;padding:4px 8px;background:var(--bg-soft);color:var(--ink)}.quests-row{display:flex;align-items:center;gap:18px}.goal-ring{position:relative;width:72px;height:72px;flex-shrink:0}.goal-ring svg{display:block}.goal-ring-track{fill:none;stroke:var(--line);stroke-width:7}.goal-ring-fill{fill:none;stroke:var(--green);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .6s ease}.goal-ring-done .goal-ring-fill{stroke:var(--gold)}.goal-ring-label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}.goal-ring-value{font-weight:900;font-size:1.15rem;color:var(--ink)}.goal-ring-goal{font-size:.68rem;font-weight:800;color:var(--ink-soft)}.quest-list{flex:1;display:flex;flex-direction:column;gap:10px}.quest{display:flex;align-items:center;gap:10px}.quest-done .quest-label{color:var(--green-dark)}.quest-icon{font-size:1.15rem;width:26px;text-align:center}.quest-text{flex:1;min-width:0}.quest-label{font-size:.82rem;font-weight:800;margin-bottom:4px}.quest-bar{height:10px;background:var(--bg-soft);border:1.5px solid var(--line);border-radius:6px;overflow:hidden}.quest-fill{height:100%;background:var(--green);border-radius:6px;transition:width .5s ease}.quest-done .quest-fill{background:var(--gold)}.quest-count{font-size:.78rem;font-weight:900;color:var(--ink-soft);white-space:nowrap}.tip-ex{max-width:620px;margin:0 auto;width:100%}.tip-tag{background:#efe7ff;color:#7d3cf0}.tip-title{font-size:1.35rem;font-weight:900;margin:14px 0 8px}.tip-body{font-size:.98rem;line-height:1.55;color:var(--ink);margin:6px 0}.tip-examples{display:flex;flex-direction:column;gap:8px;margin:14px 0 4px}.tip-example{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;background:var(--bg-soft);border:2px solid var(--line);border-radius:12px;padding:10px 14px;text-align:left;transition:border-color .15s}.tip-example:hover{border-color:var(--green)}.tip-example-hanzi{font-size:1.15rem;font-weight:800}.tip-example-pinyin{color:var(--ink-soft);font-weight:700;font-size:.85rem}.tip-example-english{font-size:.85rem;color:var(--ink-soft);font-style:italic}.tip-hint{margin-top:12px;font-size:.78rem;color:var(--ink-soft);font-weight:700}.grammar-main,.pinyin-main{max-width:720px;width:100%;margin:0 auto;padding:20px 16px 80px}.grammar-tabs{display:flex;gap:8px;margin:12px 0 18px;flex-wrap:wrap}.grammar-tab{border:2px solid var(--line);background:var(--card);border-radius:999px;padding:7px 16px;font-weight:800;font-size:.85rem;color:var(--ink-soft)}.grammar-tab-active{border-color:var(--green);color:var(--green-dark);background:var(--green-light)}.grammar-card{background:var(--card);border:2px solid var(--line);border-radius:16px;box-shadow:0 4px 0 var(--line);padding:16px 18px;margin-bottom:16px}.grammar-card-title{font-weight:900;font-size:1.05rem;margin-bottom:6px}.pinyin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.pinyin-cell{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--card);border:2px solid var(--line);border-radius:12px;padding:10px 12px;text-align:left;box-shadow:0 3px 0 var(--line);transition:transform .08s,border-color .15s}.pinyin-cell:hover{border-color:var(--blue)}.pinyin-cell:active{transform:translateY(2px);box-shadow:none}.pinyin-cell-p{font-weight:900;font-size:1.15rem}.pinyin-cell-ex{color:var(--blue-dark);font-weight:800;font-size:.95rem}.pinyin-cell-hint{font-size:.72rem;color:var(--ink-soft);font-weight:600;line-height:1.3}.tone-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:8px 0 4px}.tone-cell{display:flex;flex-direction:column;align-items:flex-start;gap:3px;border-radius:12px;border:2px solid var(--line);background:var(--bg-soft);padding:10px 12px;text-align:left}.tone-cell:active{transform:translateY(2px)}.tone-cell-pinyin{font-weight:900;font-size:1.3rem}.tone-chip-1 .tone-cell-pinyin{color:var(--tone1)}.tone-chip-2 .tone-cell-pinyin{color:var(--tone2)}.tone-chip-3 .tone-cell-pinyin{color:var(--tone3)}.tone-chip-4 .tone-cell-pinyin{color:var(--tone4)}.tone-cell-word{font-size:.85rem;font-weight:800}.tone-cell-desc{font-size:.75rem;color:var(--ink-soft);line-height:1.3}.speak-ex{display:flex;flex-direction:column;align-items:center;width:100%;max-width:560px;margin:0 auto}.speak-pinyin{margin-top:8px;font-size:1.15rem;font-weight:800;color:var(--ink-soft)}.speak-meaning{margin-top:2px;font-size:1rem;color:var(--ink-soft)}.speak-mic{margin-top:18px;border:2px solid var(--blue);color:var(--blue-dark);background:var(--tint-blue);border-radius:999px;font-weight:900;font-size:1rem;padding:12px 26px;display:inline-flex;align-items:center;gap:8px;transition:transform .08s}.speak-mic:active:not(:disabled){transform:scale(.97)}.speak-mic-ok{border-color:var(--green);background:var(--green-light);color:var(--green-dark)}.speak-mic-live{border-style:dashed;color:var(--red-dark);background:var(--tint-red);animation:speak-pulse 1.1s ease-in-out infinite}@keyframes speak-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}.speak-dot{width:10px;height:10px;border-radius:50%;background:var(--red);animation:speak-blink .9s ease-in-out infinite}@keyframes speak-blink{50%{opacity:.25}}.speak-result{margin-top:16px;width:100%;border-radius:14px;border:2px solid var(--line);background:var(--bg-soft);padding:12px 16px}.speak-result-ok{border-color:#bfe6a9;background:var(--tint-green)}.speak-result-no{border-color:#ffd2c2;background:var(--tint-red)}.speak-verdict{font-weight:900;font-size:.95rem}.speak-result-ok .speak-verdict{color:var(--green-dark)}.speak-result-no .speak-verdict{color:var(--red-dark)}.speak-heard{margin-top:4px;font-size:.85rem;color:var(--ink-soft);font-weight:700;overflow-wrap:anywhere}.speak-scorebar{margin-top:8px;height:8px;background:var(--card);border:1.5px solid var(--line);border-radius:6px;overflow:hidden}.speak-scorefill{height:100%;background:var(--blue);border-radius:6px;transition:width .4s ease}.speak-result-ok .speak-scorefill{background:var(--green)}.speak-result-no .speak-scorefill{background:var(--red)}.speak-err{margin-top:12px;font-size:.85rem;color:var(--red-dark);font-weight:700}.speak-skip{margin-top:16px;border:none;background:none;color:var(--ink-soft);font-weight:700;font-size:.82rem;text-decoration:underline}.write-ex{display:flex;flex-direction:column;align-items:center;width:100%;max-width:560px;margin:0 auto}.write-cue{display:flex;align-items:baseline;gap:12px;margin-top:4px}.write-word{font-size:1.6rem;font-weight:800}.write-meaning{color:var(--ink-soft);font-weight:700;font-size:1rem}.write-stage{position:relative;margin-top:14px;width:var(--write-size, 260px);height:var(--write-size, 260px);background:var(--card);border:2px solid var(--line);border-radius:16px;box-shadow:0 4px 0 var(--line);touch-action:none}.write-target{width:100%;height:100%}.write-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:var(--ink-soft)}.write-hint{position:absolute;left:0;right:0;bottom:-48px;text-align:center;font-size:.8rem;font-weight:700;color:var(--ink-soft);line-height:1.35}.write-ex .speak-skip{margin-top:56px}.write-done{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:900;color:var(--green-dark);background:#ffffffd1;border-radius:14px}.listen-row{display:flex;justify-content:center;margin-bottom:26px}.btn-listen{border:2px solid var(--blue);color:var(--blue-dark);background:var(--tint-blue);border-radius:999px;font-weight:900;font-size:.9rem;padding:10px 22px;letter-spacing:.3px;box-shadow:0 3px #bfe4f7;transition:transform .08s}.btn-listen:active{transform:translateY(2px);box-shadow:none}.placement-row{display:flex;justify-content:center;margin-bottom:26px}.placement-link{border:none;background:none;color:var(--ink-soft);font-weight:700;font-size:.85rem;text-decoration:underline;padding:4px 8px}.placement-link:hover{color:var(--ink)}.placement-main{max-width:620px;width:100%;margin:0 auto;padding:24px 16px 80px}.placement-card{background:var(--card);border:2px solid var(--line);border-radius:18px;box-shadow:0 4px 0 var(--line);padding:24px 22px}.placement-step{font-size:.8rem;font-weight:800;color:var(--ink-soft);letter-spacing:.5px;text-transform:uppercase;margin-bottom:10px}.placement-hearts{font-size:1rem;letter-spacing:2px}.placement-result{text-align:center}.placement-result-emoji{font-size:3rem;margin-bottom:6px}.placement-title{font-size:1.4rem;font-weight:900;margin:4px 0 10px}.placement-result .btn-primary{margin:14px 0 8px}.placement-result .btn-ghost{margin-top:4px}.theme-toggle{border:none;background:none;font-size:1.15rem;padding:4px 6px;border-radius:10px;transition:background .15s}.theme-toggle:hover{background:var(--tint-gold)}.speak-chars{display:flex;justify-content:center;gap:6px;margin-bottom:8px;flex-wrap:wrap}.speak-char{font-size:1.5rem;font-weight:900;line-height:1.2;min-width:34px;padding:4px 6px;border-radius:10px}.speak-char-hit{color:var(--green-dark);background:var(--tint-green)}.speak-char-miss{color:var(--ink-soft);background:var(--bg-soft);text-decoration:line-through;text-decoration-thickness:2px}.speak-attempts{margin-top:8px;font-size:.78rem;font-weight:800;color:var(--ink-soft);text-align:center}.speak-model{margin-top:10px;font-size:.85rem;font-weight:800;color:var(--blue-dark)}.speak-engine{margin-top:14px;display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;color:var(--ink-soft)}.speak-engine select{font-family:inherit;font-weight:800;font-size:.78rem;border:2px solid var(--line);border-radius:10px;padding:4px 8px;background:var(--bg-soft);color:var(--ink)}.speak-mic-stop{border-style:solid;border-color:var(--red);background:var(--tint-red);color:var(--red-dark);animation:speak-pulse 1.4s ease-in-out infinite}.speak-stop-square{width:11px;height:11px;border-radius:3px;background:var(--red);display:inline-block}.speak-char{display:inline-flex;flex-direction:column;align-items:center;gap:1px;min-width:40px}.speak-char-pin{font-size:.7rem;font-weight:800;line-height:1;text-decoration:none}.speak-mic-grading{border-style:dashed;border-color:var(--ink-soft);color:var(--ink-soft);background:var(--bg-soft)}.speak-char-near{color:var(--tone2);background:var(--tint-gold)}.speak-tonenote{margin-top:8px;font-size:.75rem;font-weight:700;color:var(--ink-soft);text-align:center}.speak-err-detail{margin-top:6px;font-size:.72rem;font-weight:700;color:var(--ink-soft);font-family:ui-monospace,SF Mono,Menlo,monospace;overflow-wrap:anywhere;text-align:center}.tutor-page{height:100dvh;display:flex;flex-direction:column}.tutor-topbar{display:flex;align-items:center;gap:12px}.tutor-back,.tutor-sessions-btn{border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;width:40px;height:40px;font-size:1.2rem;font-weight:800;flex-shrink:0}.tutor-title{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.tutor-title-panda{font-size:1.5rem}.tutor-title-main{font-weight:800;font-size:1rem;line-height:1.1}.tutor-title-sub{font-size:.72rem;font-weight:700;color:var(--ink-soft)}.tutor-banner{background:var(--tint-gold);border-bottom:2px solid var(--tint-gold-line);padding:8px 14px;font-size:.8rem;font-weight:800;color:var(--ink);text-align:center}.tutor-log{flex:1;overflow-y:auto;padding:16px 12px 8px;width:min(680px,100%);margin:0 auto}.tutor-msg{display:flex;margin-bottom:12px}.tutor-msg-user{justify-content:flex-end}.tutor-msg-tutor{justify-content:flex-start}.tutor-bubble{max-width:88%;border-radius:16px;padding:12px 14px;font-size:1.5rem;line-height:1.85;font-weight:600;overflow-wrap:anywhere}.tutor-bubble-user{background:var(--tint-green);border:2px solid var(--tint-green-line);border-bottom-right-radius:6px}.tutor-bubble-tutor{background:var(--card);border:2px solid var(--line);border-bottom-left-radius:6px}.tutor-bubble-streaming{color:var(--ink-soft)}.chat-word:after,.chat-word:before{display:none}.chat-word{font-size:inherit;line-height:1.9}.tutor-tip{position:fixed;z-index:100;pointer-events:none;background:var(--ink);color:#fff;font-family:Nunito,sans-serif;font-size:.78rem;font-weight:800;white-space:normal;width:max-content;max-width:min(80vw,300px);text-align:center;padding:6px 10px;border-radius:10px;transition:opacity .12s;box-shadow:0 6px 20px #00000040}.tutor-bubble-bar{display:flex;align-items:center;gap:8px;margin-top:8px}.tutor-play{border:2px solid var(--line);background:var(--bg-soft);color:var(--ink);border-radius:999px;width:30px;height:30px;font-size:.8rem;flex-shrink:0}.tutor-play-hint{font-size:.68rem;font-weight:700;color:var(--ink-soft)}.tutor-sent{cursor:pointer;border-radius:6px}.tutor-sent:hover{background:var(--bg-soft)}.tutor-tr{border:2px solid var(--line);background:var(--bg-soft);color:var(--ink);border-radius:999px;height:30px;padding:0 10px;font-size:.8rem;font-weight:800;font-family:Noto Sans SC,Nunito,sans-serif}.tutor-tr-on{border-color:var(--blue);background:var(--tint-blue)}.tutor-translation{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);color:var(--ink-soft);font-weight:700;font-size:.92rem;font-style:italic}.tutor-gloss{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.tutor-chip{border:2px solid var(--tint-green-line);background:var(--tint-green);color:var(--ink);border-radius:999px;padding:4px 10px;font-size:.78rem;font-weight:800}.tutor-chip-gloss{color:var(--ink-soft);font-weight:700}.tutor-chip-added{opacity:.65}.tutor-typing{display:inline-flex;gap:4px;padding:4px 0}.tutor-typing i{width:8px;height:8px;border-radius:50%;background:var(--ink-soft);animation:tutor-bounce 1s infinite}.tutor-typing i:nth-child(2){animation-delay:.15s}.tutor-typing i:nth-child(3){animation-delay:.3s}@keyframes tutor-bounce{0%,60%,to{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}.tutor-err{background:var(--tint-red);border:2px solid var(--tint-red-line);border-radius:12px;padding:10px 12px;font-size:.85rem;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}.tutor-err-retry{margin-left:auto;border:none;background:none;color:var(--ink-soft);font-size:.9rem}.tutor-empty{text-align:center;padding:8vh 10px 20px}.tutor-empty-panda{font-size:3rem}.tutor-empty-hi{margin-top:10px;font-size:1.25rem;font-weight:800}.tutor-empty-sub{margin:10px auto 0;max-width:420px;color:var(--ink-soft);font-weight:700;font-size:.88rem;line-height:1.5}.tutor-suggests{margin-top:18px;display:flex;flex-direction:column;gap:8px;align-items:center}.tutor-suggest{background:var(--card);border:2px solid var(--line);color:var(--ink);border-radius:14px;padding:10px 16px;font-size:.9rem;font-weight:700;width:min(360px,88vw)}.tutor-suggest:active{transform:translateY(1px)}.tutor-composer{display:flex;align-items:flex-end;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--topbar-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:2px solid var(--line);width:min(680px,100%);margin:0 auto}.tutor-mic{border:2px solid var(--line);background:var(--card);border-radius:14px;width:44px;height:44px;font-size:1.15rem;flex-shrink:0}.tutor-mic-on{border-color:var(--red);background:var(--tint-red);animation:tutor-pulse 1.2s infinite}@keyframes tutor-pulse{0%,to{box-shadow:0 0 #ff4b4b66}50%{box-shadow:0 0 0 8px #ff4b4b00}}.tutor-input{flex:1;resize:none;border:2px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);font-family:inherit;font-size:1rem;font-weight:600;padding:10px 12px;max-height:120px;outline:none}.tutor-input:focus{border-color:var(--green)}.tutor-send{border-radius:14px;padding:10px 14px;flex-shrink:0}.tutor-send:disabled{opacity:.45}.tutor-drawer{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;z-index:60}.tutor-drawer-panel{position:absolute;top:0;left:0;bottom:0;width:min(360px,88vw);background:var(--bg);border-right:2px solid var(--line);display:flex;flex-direction:column}.tutor-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:2px solid var(--line)}.tutor-drawer-title{font-weight:800}.tutor-new{padding:8px 12px;font-size:.85rem}.tutor-drawer-list{flex:1;overflow-y:auto;padding:8px}.tutor-drawer-empty{color:var(--ink-soft);font-weight:700;text-align:center;padding:24px 0}.tutor-session{display:flex;align-items:center;gap:6px;border-radius:12px;padding:10px;cursor:pointer}.tutor-session:hover{background:var(--bg-soft)}.tutor-session-on{background:var(--tint-blue)}.tutor-session-main{flex:1;min-width:0}.tutor-session-title{font-weight:800;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tutor-session-preview{font-size:.75rem;font-weight:700;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tutor-session-del{border:none;background:none;opacity:.55;font-size:.95rem;padding:4px}.tutor-session-del:hover{opacity:1}@media (max-width: 560px){.tutor-bubble{max-width:92%;font-size:1.35rem}.tutor-log{padding:12px 8px 6px}}