@font-face{font-family:Andika;src:url(/pinyin/assets/Andika-Regular-B-0TUju0.woff2)format("woff2");font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Andika;src:url(/pinyin/assets/Andika-Bold-DU9TL9lB.woff2)format("woff2");font-style:normal;font-weight:700;font-display:swap}:root{--color-canvas:#fbfaf4;--color-surface:#fff;--color-surface-soft:#def2e6;--color-text:#16352a;--color-text-muted:#4e665c;--color-border:#a8c7b8;--color-control-border:#8fb7a4;--color-primary:#087b5a;--color-primary-hover:#066c4f;--color-primary-pressed:#05513e;--color-primary-soft:#def2e6;--color-focus:#e68a00;--color-initial:#056b50;--color-initial-border:#4f907e;--color-initial-soft:#d7f1e3;--color-final:#7c4d00;--color-final-border:#b2740b;--color-final-soft:#ffe5a0;--color-syllable:#9e371f;--color-syllable-border:#c75838;--color-syllable-soft:#ffd8c9;--color-hint:#754900;--color-hint-border:#a96c08;--color-hint-soft:#ffe08f;--color-disabled:#b8c5bf;--color-disabled-text:#39453f;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--radius-surface:28px;--radius-card:22px;--radius-control:18px;--radius-compact:14px;--radius-round:9999px;--control-height:56px;--touch-target:48px;--play-size:56px;--play-size-hero:72px;--shadow-raised:0 5px 0 var(--color-primary-pressed), 0 10px 20px #05513e24;--shadow-surface:0 12px 30px #1f48391c;--shadow-card:0 8px 20px #1f48391a;--shadow-control:0 5px 12px #1f483921;--shadow-selected:0 7px 16px #1f48392b;--shadow-overlay:0 14px 34px #1c4b3733;--motion-fast:.16s;--motion-standard:.24s;color:var(--color-text);background:var(--color-canvas);font-synthesis:none;letter-spacing:0;font-family:Andika,Noto Sans SC,Microsoft YaHei,system-ui,sans-serif}*{box-sizing:border-box}html{background:var(--color-canvas);min-width:0}body{min-width:0;min-height:100vh;margin:0}button,input,textarea,select{font:inherit}button{letter-spacing:0}button:focus-visible,a:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}h1,h2,p,dl,dd{margin:0}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app-shell{background:var(--color-canvas);flex-direction:column;min-height:100vh;display:flex}.app-header{border-bottom:1px solid var(--color-border);background:var(--color-surface);justify-content:space-between;align-items:center;gap:20px;width:100%;min-height:64px;padding:0 max(20px,50% - 460px);display:flex}.brand{align-items:center;gap:var(--space-3);color:var(--color-primary-pressed);font-size:18px;font-weight:800;text-decoration:none;display:inline-flex}.brand-mark{object-fit:contain;width:42px;height:42px;display:block}.storage-warning{color:#573f00;text-align:center;background:#fff0b8;padding:10px 18px;font-size:14px}.learning-main{background:var(--color-canvas);flex-direction:column;flex:1;width:100%;display:flex;position:relative}.screen{justify-content:center;align-items:center;gap:var(--space-5);text-align:center;flex-direction:column;width:min(100% - 40px,760px);min-height:calc(100vh - 160px);margin:0 auto;padding:44px 0 48px;display:flex}.kicker{color:var(--color-primary);font-size:15px;font-weight:750}.screen h1{font-size:34px;font-weight:850;line-height:1.2}.screen-title{font-size:30px!important}.lead{max-width:440px;color:var(--color-text-muted);font-size:18px;line-height:1.7}.ui-button,.audio-button,.audio-recovery button{min-height:var(--control-height);border-radius:var(--radius-control);cursor:pointer;transition:transform var(--motion-fast) ease, background var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;border:0;font-weight:760}.ui-button--primary{color:#fff;background:var(--color-primary);min-width:220px;box-shadow:var(--shadow-raised);padding:0 28px}.ui-button--primary:hover{background:var(--color-primary-hover)}.ui-button--primary:active{box-shadow:0 2px 0 var(--color-primary-pressed);transform:translateY(2px)}.ui-button:disabled{color:var(--color-disabled-text);border-color:var(--color-control-border);background:var(--color-disabled);box-shadow:none;cursor:not-allowed}.ui-button--secondary{color:var(--color-primary-pressed);border:2px solid var(--color-initial-border);background:var(--color-surface);padding:0 22px}.ui-button--secondary:hover{background:var(--color-primary-soft)}.ui-button--hint{min-height:var(--touch-target);color:var(--color-text-muted);box-shadow:none;background:0 0;padding:0 18px;font-weight:700}.ui-button--hint:hover{color:var(--color-primary-pressed);background:var(--color-surface-soft)}.completion-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;width:100%;display:flex}.complete-screen{position:relative}.pause-button{top:var(--space-4);min-width:0;min-height:var(--touch-target);box-shadow:none;padding:0 12px;font-size:13px;position:absolute;right:0}.welcome-screen{background:var(--color-canvas)}.welcome-mark{object-fit:contain;width:144px;height:144px;display:block}.welcome-screen .backpack{max-width:560px}.task-card{width:min(100%,660px);min-height:min(540px,100vh - 210px);padding:var(--space-5) var(--space-7);justify-content:center;align-items:center;gap:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface);box-shadow:var(--shadow-card);flex-direction:column;display:flex;position:relative;overflow:hidden}.task-card:before,.task-card:after{content:none}.task-card--knowledge{min-height:520px}.character-introduction-screen{padding-top:20px;padding-bottom:24px}.character-introduction-screen .task-card .big-hanzi{font-size:144px!important}.page-guide{width:min(100% - 40px,660px);min-height:60px;margin:var(--space-5) auto 0;border:1px solid var(--color-border);border-radius:var(--radius-card);color:var(--color-text-muted);background:var(--color-surface-soft);flex:none;align-items:center;display:flex;box-shadow:0 6px 18px #182b240a}.page-guide-content{width:100%;padding:4px var(--space-4);align-items:center;gap:var(--space-3);grid-template-columns:minmax(0,1fr) auto;display:grid}.page-guide+.screen{min-height:auto;padding-top:var(--space-6);justify-content:flex-start}.page-guide p{text-align:left;font-size:15px;line-height:1.45}.page-guide-replay{min-width:0;min-height:var(--touch-target);padding:0 var(--space-3);border-radius:var(--radius-control);color:var(--color-primary);cursor:pointer;background:0 0;border:1px solid #0000;justify-content:center;align-items:center;gap:5px;font-size:14px;font-weight:700;display:inline-flex}.page-guide-replay:hover{border-color:var(--color-border);background:var(--color-surface)}.page-guide-replay:disabled{color:var(--color-disabled-text);opacity:.7;cursor:not-allowed}.page-guide-replay-icon{font-size:18px;line-height:1}.big-hanzi{color:var(--color-text);font-family:KaiTi,STKaiti,Microsoft YaHei,sans-serif;line-height:1;font-size:168px!important}.gloss{color:var(--color-text-muted);font-size:19px}.reading-display{color:var(--color-syllable);font-size:38px;font-weight:820}.character-introduction-screen .gloss,.three-part-intro .gloss,.spelling-derivation-intro .gloss{font-family:KaiTi,STKaiti,Microsoft YaHei,sans-serif;font-size:30px;line-height:1.35}.character-introduction-screen .reading-display{font-size:52px;line-height:1.15}.reading-audio-trigger{cursor:pointer;background:0 0;border:0;padding:0}.reading-audio-trigger:focus-visible{outline:3px solid var(--color-focus);outline-offset:5px}.reading-display span{transform-origin:50%;display:inline-block}.initial-symbol{line-height:1}.big-hanzi,.gloss,.spelling-derivation-intro .reading-display,.whole-syllable-reading,.reading-display span,.sound-part strong,.whole-sound strong,.pronunciation-focus strong,.sound-chip>span,.prompt-hanzi,.part-button>span,.complete-equation em{transition:transform .18s,color .18s}.big-hanzi.is-speaking{transform:scale(1.06)}.gloss.is-speaking{color:#244e42;transform:scale(1.35)}.spelling-derivation-intro .reading-display.is-speaking,.whole-syllable-reading.is-speaking{z-index:2;position:relative;transform:scale(1.12)}.reading-display span.is-speaking{z-index:2;color:var(--color-syllable);position:relative;transform:scale(1.18)}.audio-button{width:var(--play-size);min-width:var(--play-size);height:var(--play-size);min-height:var(--play-size);border:2px solid var(--color-control-border);border-radius:var(--radius-round);color:var(--color-primary);background:#f8fcfa;justify-content:center;align-items:center;padding:0;display:inline-flex;position:relative;box-shadow:0 3px #dcebe4}.audio-button:before,.audio-button:after{content:"";opacity:0;pointer-events:none;border:2px solid #0000;border-color:#0000 currentColor;border-radius:50%;width:9px;height:20px;position:absolute;top:50%}.audio-button:before{border-right:0;left:-13px;transform:translateY(-50%)}.audio-button:after{border-left:0;right:-13px;transform:translateY(-50%)}.audio-button--hero{width:var(--play-size-hero);min-width:var(--play-size-hero);height:var(--play-size-hero);min-height:var(--play-size-hero)}.audio-button:hover{border-color:var(--color-primary);background:var(--color-primary-soft)}.audio-button:active{transform:translateY(2px);box-shadow:0 1px #dcebe4}.audio-button:disabled{color:var(--color-disabled-text);border-color:var(--color-control-border);background:var(--color-disabled);box-shadow:none;opacity:1;cursor:not-allowed}.audio-button.is-heard{border-color:var(--color-initial-border);color:var(--color-primary-pressed);background:var(--color-initial-soft)}.audio-button.is-playing,.audio-button.is-playing:disabled{color:#fff;border-color:var(--color-primary);background:var(--color-primary);opacity:1;cursor:wait}.audio-button.is-playing:before,.audio-button.is-playing:after{opacity:.55;animation:.9s ease-in-out infinite audio-wave}.audio-button-placeholder{visibility:hidden;width:56px;min-width:56px;height:56px;min-height:56px;display:block}.play-symbol{font-size:18px;display:inline-block;transform:translate(2px)}.audio-button--hero .play-symbol{font-size:23px}.heard-mark{color:#fff;background:var(--color-primary);border:2px solid #fff;border-radius:50%;place-items:center;width:22px;height:22px;font-size:12px;display:grid;position:absolute;top:-7px;right:-7px}.sound-equation{grid-template-columns:repeat(3,minmax(100px,184px));justify-content:center;align-items:center;gap:16px;width:min(100%,584px);display:grid}.sound-equation--decomposition{grid-template-columns:minmax(100px,184px) 24px minmax(100px,184px) 32px minmax(100px,184px);grid-template-areas:"initial plus final result whole";gap:8px;width:min(100%,680px)}.sound-equation--decomposition .sound-part--initial{grid-area:initial}.sound-equation--decomposition .equation-symbol--plus{grid-area:plus}.sound-equation--decomposition .sound-part--final{grid-area:final}.sound-equation--decomposition .equation-symbol--result{grid-area:result}.sound-equation--decomposition .whole-sound{grid-area:whole}@keyframes audio-wave{0%,to{opacity:.25}50%{opacity:.75}}.sound-equation--zero-initial{grid-template-columns:minmax(100px,184px);grid-template-areas:"final"}.sound-part,.whole-sound{background:#fff;border:2px solid;border-radius:8px;grid-template-rows:22px minmax(0,1fr) 56px;place-items:center;height:208px;padding:18px 14px;display:grid;position:relative}.sound-part--initial{background:#edf8f4;border-color:#5a9d8d}.sound-part--final{background:#fff7dc;border-color:#e5a642}.whole-sound{background:#fff1eb;border-color:#d77a60}.sound-part strong,.whole-sound strong{justify-content:center;align-items:center;height:1em;font-size:52px;line-height:1;display:inline-flex}.sound-part--initial strong{color:#1c6756}.sound-part--final strong{color:#8b5b08}.part-kind{color:#5d6b65;font-size:14px;font-weight:700}.equation-symbol{color:#68736e;font-size:30px;font-weight:800}.sound-part.is-collecting{z-index:2}.sound-part strong.is-speaking,.whole-sound strong.is-speaking{z-index:2;position:relative;transform:scale(1.16)}.fly-chip{z-index:3;color:#fff;background:#287b68;border-radius:4px;width:max-content;max-width:calc(100% - 12px);padding:8px 12px;font-size:15px;font-weight:760;animation:2.35s ease-in-out both fly-to-backpack;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}@keyframes fly-to-backpack{0%{opacity:0;transform:translate(-50%,-28px)scale(.88)}14%{opacity:1;transform:translate(-50%,-48px)scale(1)}68%{opacity:1;transform:translate(-50%,-52px)scale(1)}to{opacity:0;transform:translate(-50%,84px)scale(.82)}}.pronunciation-screen{gap:18px}.pronunciation-focus{border:2px solid;border-radius:8px;flex-direction:column;justify-content:space-between;align-items:center;gap:10px;width:210px;min-height:224px;padding:18px;display:flex;position:relative}.pronunciation-focus.is-collecting{z-index:2}.pronunciation-focus--initial{background:#edf8f4;border-color:#5a9d8d}.pronunciation-focus--final{background:#fff7dc;border-color:#e5a642}.pronunciation-focus>span{color:#52625b;font-size:14px;font-weight:750}.pronunciation-focus .fly-chip{color:#fff}.pronunciation-focus strong{font-size:76px;line-height:1;display:inline-block}.pronunciation-focus--initial strong{color:#1c6756}.pronunciation-focus--final strong{color:#8b5b08}.pronunciation-focus strong.is-speaking{z-index:2;position:relative;transform:scale(1.13)}.pronunciation-focus .audio-button{margin-top:12px}.pronunciation-focus.is-ready-to-read{box-shadow:0 0 0 5px #35816f24}.pronunciation-focus.is-ready-to-read strong{animation:1.15s ease-in-out infinite pronunciation-ready-pulse}@keyframes pronunciation-ready-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}.pronunciation-target-progress{gap:7px;display:flex}.pronunciation-target-progress span{background:#cbd5d0;border-radius:2px;width:26px;height:4px}.pronunciation-target-progress span.is-active{background:#607e74}.tone-drill-screen{gap:18px}.tone-drill-focus{background:#fff;border:2px solid #d99a3d;border-radius:8px;grid-template-rows:auto 1fr auto;grid-template-columns:1fr auto;align-items:center;gap:12px 18px;width:min(100%,300px);min-height:270px;padding:24px;display:grid}.tone-drill-focus>span:first-child{color:#69531f;text-align:left;font-size:17px;font-weight:800}.tone-drill-focus>strong{color:#a5482f;grid-column:1/-1;font-size:84px;line-height:1;transition:transform .18s}.tone-drill-focus>strong.is-speaking{transform:scale(1.08)}.tone-drill-focus>.tone-marker{justify-self:start}.tone-drill-focus>.audio-button{justify-self:end}.tone-drill-progress{grid-template-columns:repeat(4,42px);gap:8px;display:grid}.tone-drill-progress>span{color:#0000;background:#d8dfdb;border-radius:5px;width:42px;height:10px;overflow:hidden}.backpack{border-top:1px solid #cfd9d4;border-bottom:1px solid #cfd9d4;grid-template-columns:1fr 1fr;width:100%;display:grid}.backpack-group{text-align:left;min-height:108px;padding:16px 20px}.mini-parts{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.sound-chip{cursor:pointer;background:#fff;border:1px solid #b6c5be;border-radius:6px;place-items:center;width:44px;height:44px;font-size:20px;font-weight:800;display:grid}.sound-chip:hover{background:#f2f7f5;box-shadow:0 0 0 2px #dce8e3}.sound-chip>span{display:inline-block}.sound-chip>span.is-speaking{z-index:2;position:relative;transform:scale(1.18)}.assembly-screen{justify-content:flex-start}.assembly-prompt{align-items:center;gap:14px;display:flex;position:relative}.prompt-hanzi{font-family:KaiTi,STKaiti,sans-serif;font-size:72px;line-height:1;display:inline-block}.prompt-hanzi.is-speaking{z-index:2;position:relative;transform:scale(1.1)}.assembly-slots{justify-content:center;align-items:center;gap:16px;display:flex}.guided-assembly-slots{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;width:100%;display:grid;position:relative}.guided-assembly-slots .assembly-slot{justify-self:center}.guided-assembly-slots .equation-symbol{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.guided-assembly-slots.is-zero-initial{grid-template-columns:1fr}.assembly-flow-arrows{grid-template-columns:repeat(2,minmax(0,1fr));place-items:center;column-gap:16px;width:100%;min-height:42px;font-size:34px;font-weight:850;line-height:1;display:grid}.assembly-flow-arrows span:first-child{color:var(--color-initial)}.assembly-flow-arrows span:last-child{color:var(--color-final)}.assembly-flow-arrows.is-zero-initial,.guided-choice-area.is-zero-initial{grid-template-columns:1fr}.assembly-slot{background:#fff;border:2px dashed #87968f;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:116px;height:106px;display:flex}.assembly-slot:first-child.is-filled{background:#edf8f4;border-color:#3b8977}.assembly-slot:last-child.is-filled{background:#fff7dc;border-color:#d59a39}.assembly-slot span{color:#68756f;font-size:13px}.assembly-slot strong{font-size:38px;line-height:1}.assembly-slot.is-playable{color:inherit;cursor:pointer;font-family:inherit}.assembly-slot.is-playable:hover:not(:disabled){box-shadow:0 0 0 3px #1c675624}.assembly-slot.is-playable:disabled{cursor:default;opacity:.72}.assembly-slot.is-playable strong{display:inline-block}.assembly-slot.is-playable strong.is-speaking{z-index:2;position:relative;transform:scale(1.16)}.assembly-feedback{color:#5b6661;min-height:24px;font-size:15px}.assembly-feedback.is-error{color:#9a4b1f;font-weight:760}.choice-area{grid-template-columns:1fr 1fr;gap:16px;width:100%;display:grid}.choice-group{text-align:left;background:#fff;border-top:4px solid;min-height:126px;padding:16px}.choice-group--initials{border-color:#5a9d8d}.choice-group--finals{border-color:#e5a642}.choice-group h2{color:#4f5d57;margin-bottom:12px;font-size:15px}.part-buttons{flex-wrap:wrap;gap:10px;display:flex}.part-button{color:#28352f;cursor:grab;background:#fff;border:2px solid #aab8b1;border-radius:8px;width:60px;height:60px;font-size:25px;font-weight:820;position:relative}.part-button.is-selected{color:#fff;box-shadow:none;background:#267461;border-color:#1f6252}.part-button>span{display:inline-block}.part-button>span.is-speaking{z-index:2;position:relative;transform:scale(1.18)}.assembly-actions{align-items:center;row-gap:var(--space-2);grid-template-columns:minmax(0,1fr);width:100%;display:grid}.assembly-actions .primary-button{grid-column:1;justify-self:center}.hint-feedback-row{grid-column:1;justify-content:space-between;align-items:center;gap:8px;width:100%;min-width:0;display:flex}.hint-feedback-row .assembly-feedback{min-width:0;margin:0;line-height:1.45}.hint-button{min-height:var(--touch-target);color:var(--color-text-muted);background:0 0;flex:none;grid-column:1;justify-self:end;padding:0 12px;font-size:14px}.knowledge-screen{width:min(100% - 40px,680px)}.knowledge-screen .big-hanzi{overflow-wrap:anywhere;max-width:100%;font-size:112px!important}.whole-syllable-reading{color:var(--color-syllable);font-weight:850;line-height:1;font-size:104px!important}.whole-syllable-reading--intro{font-size:88px!important}.whole-association-intro{align-items:center;gap:var(--space-3);flex-direction:column;width:min(100%,360px);display:flex}.whole-association-pair{justify-content:center;align-items:center;gap:var(--space-5);display:flex}.whole-association-intro .big-hanzi,.whole-association-intro .whole-syllable-reading{margin:0}.three-part-intro{align-items:center;gap:var(--space-3);flex-direction:column;width:100%;display:flex}.three-part-intro .big-hanzi,.three-part-intro .gloss,.three-part-intro .reading-display{margin:0}.three-part-reading-display{display:inline-flex}.whole-association-anchor-word{width:min(100%,360px);padding-top:var(--space-4);border-top:1px solid var(--color-control-border)}.whole-association-anchor-word .word-pinyin-syllable{font-size:28px}.whole-association-anchor-word .word-pinyin-column strong{font-size:56px}.whole-tone-choice-buttons{grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,620px);display:grid}.whole-tone-choice-buttons .part-button{width:100%;min-width:0}.whole-syllable-examples-screen{gap:var(--space-6)}.whole-syllable-example-list{gap:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,600px);display:grid}.whole-syllable-example{min-width:0;min-height:176px;padding:var(--space-4);border:2px solid var(--color-control-border);border-radius:var(--radius-card);background:var(--color-surface);justify-content:center;align-items:center;display:flex}.whole-syllable-example-word{gap:var(--space-3);width:100%}.whole-syllable-example-word .word-pinyin-syllable{font-size:27px}.whole-syllable-example-word .word-pinyin-column strong{font-size:58px}.word-pinyin-display{justify-content:center;align-items:end;gap:var(--space-5);width:min(100%,430px);color:var(--color-text);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.word-pinyin-column{align-items:center;gap:var(--space-3);flex-direction:column;min-width:0;display:flex}.word-pinyin-syllable{color:var(--color-syllable);font-size:42px;font-weight:820;line-height:1}.word-pinyin-column strong{font-family:KaiTi,STKaiti,Microsoft YaHei,sans-serif;font-size:112px;font-weight:700;line-height:1}.word-pinyin-display--intro{margin:var(--space-5) 0}.word-pinyin-display--review-cue{gap:var(--space-3);width:min(100%,320px)}.word-pinyin-display--review-cue .word-pinyin-syllable{font-size:28px}.word-pinyin-display--review-cue .word-pinyin-column strong{font-size:48px}.neutral-tone-practice-screen{gap:var(--space-6)}.word-component-match{gap:var(--space-5);grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,560px);display:grid}.word-component-column{align-items:center;gap:var(--space-3);border:2px solid var(--color-border);background:var(--color-surface);border-radius:8px;flex-direction:column;min-width:0;padding:16px 12px;display:flex}.word-component-column>strong{font-family:KaiTi,STKaiti,Microsoft YaHei,sans-serif;font-size:72px;line-height:1}.syllable-assembly{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;width:100%;display:grid}.syllable-assembly .assembly-slot{justify-self:center;width:min(100%,100px);height:88px}.three-part-sound-equation{gap:var(--space-2);grid-template-columns:minmax(72px,1fr) auto minmax(72px,1fr) auto minmax(72px,1fr) auto minmax(88px,1.15fr);width:min(100%,740px)}.three-part-sound-card{grid-template-rows:22px minmax(0,1fr) 56px;width:100%;min-width:0;height:184px;padding:14px 8px}.three-part-sound-card strong{font-size:42px}.three-part-sound-card .part-kind{white-space:nowrap}.three-part-sound-card .audio-button{width:var(--touch-target);min-width:var(--touch-target);height:var(--touch-target);min-height:var(--touch-target)}.three-part-decomposition-screen{gap:var(--space-4)}.three-part-decomposition-screen .equation-symbol--result{line-height:1}.three-part-choice-area{gap:var(--space-3);grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr);align-items:start;width:100%;display:grid}.three-part-choice-flow{grid-template-rows:106px 52px auto;grid-template-areas:"slot""arrow""backpack";place-items:start center;width:100%;min-width:0;display:grid}.three-part-choice-flow .choice-group{grid-area:backpack;width:100%;min-width:0}.three-part-choice-flow .part-buttons{place-content:flex-start center}.three-part-choice-flow--medial .part-buttons{flex-flow:column;align-items:center}.three-part-flow-arrow{color:var(--color-final);grid-area:arrow;align-self:center;font-size:36px;font-weight:850;line-height:1}.three-part-choice-flow--initial .three-part-flow-arrow{color:var(--color-initial)}.three-part-choice-flow .three-part-drop-slot{z-index:3;background:var(--color-surface-soft);box-shadow:var(--shadow-card);grid-area:slot;place-self:start center}.three-part-drop-slot--initial.is-filled{border-color:var(--color-initial-border);background:var(--color-initial-soft)}.three-part-drop-slot--medial.is-filled,.three-part-drop-slot--final.is-filled{border-color:var(--color-final-border);background:var(--color-final-soft)}.three-part-drop-slot.is-guided-target{border-color:var(--color-hint-border);box-shadow:0 0 0 3px var(--color-hint-soft)}.word-final-slot{font:inherit;cursor:pointer}.word-final-slot[aria-disabled=true]{color:inherit;cursor:default;opacity:1}.word-final-choice{width:min(100%,560px);min-height:112px}.word-final-choice .part-buttons{justify-content:center}.word-final-candidate:disabled{cursor:default}.word-pinyin-match{gap:var(--space-5);grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,430px);display:grid}.word-pinyin-match-column{place-items:center;gap:var(--space-3);grid-template-rows:78px auto;min-width:0;display:grid}.word-pinyin-match-column>strong{font-family:KaiTi,STKaiti,Microsoft YaHei,sans-serif;font-size:88px;line-height:1}.word-pinyin-slot{border:3px dashed var(--color-control-border);width:min(100%,150px);height:78px;color:var(--color-syllable);background:var(--color-surface);cursor:pointer;border-radius:8px;place-items:center;font-size:36px;font-weight:820;display:grid}.word-pinyin-slot:disabled{color:var(--color-text-muted);background:var(--color-surface);cursor:default}.word-pinyin-slot.is-filled{border-style:solid;border-color:var(--color-syllable-border);background:var(--color-syllable-soft);box-shadow:var(--shadow-control)}.word-pinyin-candidates{justify-content:center;align-items:stretch;gap:var(--space-3);flex-wrap:wrap;width:min(100%,560px);min-height:68px;display:flex}.word-pinyin-candidate{border:2px solid var(--color-control-border);min-width:92px;min-height:64px;color:var(--color-text);background:var(--color-surface);cursor:pointer;border-radius:8px;padding:8px 18px;font-size:30px;font-weight:820}.word-pinyin-candidate:hover{border-color:var(--color-primary);background:var(--color-primary-soft)}.word-pinyin-candidate.is-selected{color:var(--color-disabled-text);background:var(--color-disabled);box-shadow:none;border-color:#0000}.word-pinyin-candidate.is-guided-target{border-color:var(--color-hint-border);background:var(--color-hint-soft);box-shadow:0 0 0 3px #e68a0033}.knowledge-discovery-explanation{max-width:520px;color:var(--color-text-muted);text-align:center;font-size:17px;line-height:1.65}.learning-path-cue{color:var(--color-text-muted);text-align:center;margin:0;font-size:18px;font-weight:760;line-height:1.4}.learning-path-cue--decodable{color:var(--color-primary-pressed)}.learning-path-cue--whole_association{color:var(--color-syllable)}.spelling-derivation-screen{gap:var(--space-5)}.spelling-derivation-intro{align-items:center;gap:var(--space-5);flex-direction:column;display:flex}.spelling-derivation-intro .reading-display{margin:0}.spelling-derivation-intro-word{gap:var(--space-3);width:min(100%,380px)}.spelling-derivation-intro-word.is-speaking{transform:scale(1.04)}.spelling-derivation-intro-word .word-pinyin-syllable{font-size:30px}.spelling-derivation-intro-word .word-pinyin-column strong{font-size:64px}.spelling-derivation-transfer-word{gap:var(--space-3);width:min(100%,340px)}.spelling-derivation-transfer-word .word-pinyin-syllable{font-size:28px}.spelling-derivation-transfer-word .word-pinyin-column strong{font-size:56px}.spelling-derivation-equation{border:2px solid var(--color-border);background:var(--color-surface);border-radius:8px;grid-template-columns:minmax(0,auto) auto minmax(0,auto);justify-content:center;align-items:center;gap:14px;width:min(100%,640px);min-height:132px;padding:18px;display:grid}.spelling-source-parts{flex-wrap:nowrap;justify-content:center;align-items:center;gap:8px;min-width:0;display:flex}.spelling-sound-card{border:2px solid var(--color-final-border);width:max-content;min-width:96px;max-width:180px;min-height:88px;color:var(--color-final);background:var(--color-final-soft);border-radius:8px;place-items:center;gap:10px;padding:12px;display:grid}.spelling-sound-card>strong{font-size:42px;font-weight:820;line-height:1}.spelling-sound-card .audio-button{width:var(--touch-target);min-width:var(--touch-target);height:var(--touch-target);min-height:var(--touch-target)}.spelling-derivation-equation.is-playable .spelling-sound-card{min-height:150px}.spelling-source-item{align-items:center;gap:8px;display:flex}.spelling-source-item>b{color:var(--color-text-muted);font-size:24px}.spelling-derivation-equation>b{color:var(--color-text-muted);font-size:30px}.spelling-sound-card--result{color:var(--color-syllable);border-color:var(--color-syllable-border);background:var(--color-syllable-soft)}.spelling-sound-card--hidden{color:var(--color-text-muted);border-color:var(--color-syllable-border);background:var(--color-surface-soft);border-style:dashed}.spelling-derivation-choices{justify-content:center;width:min(100%,560px);min-height:72px}.knowledge-targets{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;width:min(100%,520px);display:grid}.knowledge-targets .sound-part{background:#edf8f4;border-color:#4c8879;height:auto;min-height:132px}.knowledge-targets .sound-part strong,.knowledge-targets.is-guided strong{overflow-wrap:anywhere;font-size:36px;line-height:1.25}.knowledge-targets--neutral-tone .sound-part{grid-template-rows:auto auto;align-content:center;gap:8px;min-height:104px;padding:18px}.knowledge-targets--neutral-tone .sound-part strong{height:auto}.knowledge-targets.is-guided{color:#174f42;background:#edf8f4;border:2px solid #4c8879;border-radius:8px;place-items:center;min-height:120px;padding:20px}.knowledge-choice-buttons{justify-content:center;width:min(100%,620px)}.knowledge-choice-buttons .part-button{overflow-wrap:anywhere;width:auto;min-width:84px;max-width:100%;height:auto;min-height:60px;padding:10px 14px;font-size:20px;line-height:1.25}.tone-overview-screen,.tone-follow-screen,.tone-quiz-screen{gap:22px}.tone-study-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:min(100%,560px);display:grid}.tone-study-card{color:#9a432d;background:#fffaf0;border:2px solid #d3a448;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-width:0;min-height:142px;padding:18px 10px;display:flex}.tone-study-card strong{font-size:56px;line-height:1;transition:transform .18s;display:inline-block}.tone-study-card.is-speaking,.tone-study-card strong.is-speaking{transform:scale(1.08)}.tone-study-grid.is-interactive .tone-study-card{min-height:178px}.tone-choice-buttons{gap:14px;width:min(100%,520px)}.tone-choice-buttons .tone-symbol-button{flex:88px;min-width:88px;min-height:88px;padding:8px;font-family:Arial,sans-serif;font-size:48px;line-height:1}.tone-marker{grid-template-rows:auto 24px;place-items:center;gap:5px;min-width:62px;min-height:52px;display:inline-grid}.tone-marker-label{color:inherit;font-size:30px;font-weight:800;line-height:1}.tone-contour{justify-content:center;align-items:flex-end;gap:3px;width:46px;height:24px;display:flex}.tone-contour>span{background:#bd5a38;border-radius:2px 2px 0 0;width:6px;max-height:20px}.tone-marker--5 .tone-contour{align-items:center;height:18px}.tone-marker--5 .tone-contour>span{background:#62756d;border-radius:50%;width:7px;height:7px!important}.success-mark{color:#fff;background:#287b68;border-radius:50%;place-items:center;width:82px;height:82px;font-size:46px;font-weight:800;display:grid}.retry-mark{color:#8a4a18;background:#fff3dc;border:3px solid #c9823e;border-radius:50%;place-items:center;width:82px;height:82px;font-size:44px;font-weight:800;display:grid}.complete-equation{align-items:center;gap:10px;display:flex}.complete-equation span,.complete-equation strong{background:#fff;border-radius:8px;place-items:center;min-width:92px;min-height:96px;font-size:44px;font-weight:800;display:grid}.complete-equation span:first-child{color:#1c6756;border:2px solid #5a9d8d}.complete-equation span:nth-of-type(2){color:#8b5b08;border:2px solid #e5a642}.complete-equation strong{color:#ad482d;border:2px solid #d77a60}.complete-equation b{color:#68736e;font-size:24px}.complete-equation em{font-style:normal;display:inline-block}.complete-equation em.is-speaking{z-index:2;position:relative;transform:scale(1.18)}.course-progress{border-radius:var(--radius-card);background:var(--color-surface);width:min(100%,520px);box-shadow:var(--shadow-card);border:0;padding:24px 28px}.course-progress-row{min-width:0}.course-progress-heading,.course-progress-row>p{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.course-progress-heading h2{font-size:18px}.course-progress-heading strong{color:#174c3f;font-size:28px}.course-progress-heading strong span{color:#65716c;font-size:16px}.course-progress-track{background:#dce6e1;border-radius:7px;height:14px;margin:12px 0 8px;overflow:hidden}.course-progress-track>span{border-radius:inherit;background:#19866d;height:100%;transition:width .24s ease-out;display:block}.course-progress-row>p{color:#65716c;font-size:14px}.audio-recovery{left:50%;bottom:calc(56px + env(safe-area-inset-bottom,0px));z-index:10;background:#fff;border:1px solid #b8c8c0;border-radius:8px;width:min(100% - 32px,420px);padding:16px;position:fixed;transform:translate(-50%);box-shadow:0 10px 30px #1c2b242e}.audio-recovery strong{margin-bottom:12px;display:block}.audio-recovery div{grid-template-columns:1fr 1fr;gap:10px;display:grid}.audio-recovery button{color:#25493f;background:#e7f3ef;min-height:48px}.audio-recovery button:last-child{color:#5a4b1d;background:#fff4c9}.test-scenario-toolbar{z-index:20;color:#20332d;background:#f3f6f5;border-bottom:1px solid #c9d3cf;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:48px;padding:8px 16px;display:grid;position:sticky;top:0;box-shadow:0 2px 8px #18272114}.test-scenario-toolbar>strong{font-size:13px}.test-scenario-toolbar>span{color:#52615b;text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.test-scenario-toolbar>div{gap:8px;display:flex}.test-scenario-toolbar button{color:#264e43;cursor:pointer;background:#fff;border:1px solid #aebdb7;border-radius:6px;min-height:32px;padding:4px 10px}.test-scenario-toolbar button:hover{background:#e8f1ee}.test-footer{color:#77827d;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;min-height:40px;padding:8px 20px;font-size:12px;display:flex}.screen .knowledge-complete-pinyin{justify-content:center;align-items:baseline;gap:4px;font-size:88px;line-height:1;display:inline-flex}.knowledge-complete-pinyin span{color:var(--color-initial)}.knowledge-complete-pinyin strong{border-radius:var(--radius-compact);color:var(--color-final);background:var(--color-final-soft);box-shadow:var(--shadow-control);padding:8px 14px 12px;transition:transform .18s,color .18s}.knowledge-complete-pinyin strong.is-speaking{color:var(--color-syllable);transform:scale(1.12)}.test-footer-actions{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.test-footer button,.test-footer .feedback-button{cursor:pointer;background:0 0;border-radius:4px;justify-content:center;align-items:center;min-height:44px;padding:3px 7px;font-size:12px;display:inline-flex}.test-complete-button{color:#28594c;border:1px solid #95b9ad}.test-complete-button:hover{background:#e7f3ef}.delete-progress-button{color:#713a2b;border:1px solid #caa79c}.delete-progress-button:hover{background:#f8e9e5}.test-footer-actions:empty{display:none}.footer-progress-actions{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;width:100%;display:grid}.footer-progress-actions .delete-progress-button{justify-self:start}.feedback-button{color:#28594c;border:1px solid #95b9ad;text-decoration:none}.feedback-button:hover{background:#e7f3ef}.reset-progress-dialog{box-sizing:border-box;border:1px solid var(--color-border);background:var(--color-surface);width:min(420px,100% - 32px);max-height:calc(100dvh - 32px);color:var(--color-text);border-radius:8px;padding:24px}.reset-progress-dialog::backdrop{background:#0006}.reset-progress-dialog h2{margin:0 0 16px;font-size:22px}.reset-progress-dialog p{margin:0 0 24px;font-size:16px;line-height:1.6}.reset-progress-actions{gap:12px;display:flex}.reset-progress-actions button{flex:1;min-width:0;min-height:48px;font-size:16px}.confirm-delete-button{color:#fff;cursor:pointer;background:#a63b32;border:1px solid #a63b32;border-radius:6px}.confirm-delete-button:hover{background:#872e27}.loading-screen{color:#52625b;place-items:center;min-height:100vh;display:grid}body[data-site-mode=integrated]{flex-direction:column;min-height:100dvh;display:flex}body[data-site-mode=integrated] #root{flex-direction:column;flex:1;display:flex}body[data-site-mode=integrated] .app-shell,body[data-site-mode=integrated] .screen{flex:1;min-height:0}body[data-site-mode=integrated] .loading-screen{min-height:50dvh}body[data-site-mode=integrated] .task-card{min-height:0}@media (width<=560px){.test-scenario-toolbar{grid-template-columns:auto minmax(0,1fr)}.test-scenario-toolbar>div{grid-column:1/-1}.test-scenario-toolbar button{flex:1}.three-part-choice-flow{grid-template-rows:92px 44px auto}.three-part-choice-area{grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);gap:6px}.three-part-choice-flow .three-part-drop-slot{width:min(100%,100px);position:sticky;top:92px}.three-part-choice-flow .choice-group{padding:13px 6px}.three-part-choice-flow .choice-group h2{text-align:center;min-height:42px;margin-bottom:8px;line-height:1.35}.three-part-choice-flow .part-buttons{gap:8px}.three-part-choice-flow .part-button{width:52px;height:52px}}.sound-part,.whole-sound,.pronunciation-focus,.tone-drill-focus,.assembly-slot,.choice-group,.knowledge-targets.is-guided,.tone-study-card,.complete-equation span,.complete-equation strong{border-radius:var(--radius-card)}.sound-part--initial,.pronunciation-focus--initial{color:var(--color-initial);border-color:var(--color-initial-border);background:var(--color-initial-soft)}.sound-part--final,.pronunciation-focus--final{color:var(--color-final);border-color:var(--color-final-border);background:var(--color-final-soft)}.whole-sound{color:var(--color-syllable);border-color:var(--color-syllable-border);background:var(--color-syllable-soft)}.sound-part--initial strong,.pronunciation-focus--initial strong{color:var(--color-initial)}.sound-part--final strong,.pronunciation-focus--final strong{color:var(--color-final)}.whole-sound strong{color:var(--color-syllable)}.part-kind,.equation-symbol,.pronunciation-focus>span,.assembly-slot span,.assembly-feedback{color:var(--color-text-muted)}.fly-chip{border-radius:var(--radius-control);background:var(--color-primary)}.pronunciation-focus{box-shadow:var(--shadow-card)}.tone-drill-focus,.tone-study-card{border-color:var(--color-final-border);background:var(--color-final-soft)}.tone-drill-focus>span:first-child{color:var(--color-final)}.tone-drill-focus>strong,.tone-study-card{color:var(--color-syllable)}.tone-drill-progress>span.is-active{background:var(--color-final-border)}.tone-drill-progress>span.is-complete{background:var(--color-primary)}.backpack{gap:var(--space-3);border:0}.backpack-group{border-radius:var(--radius-card);border:1px solid}.backpack-group--initials{border-color:var(--color-initial-border);background:var(--color-initial-soft)}.backpack-group--finals{border-color:var(--color-final-border);background:var(--color-final-soft)}.backpack-group h2{color:var(--color-text);font-size:15px}.sound-chip{width:var(--touch-target);height:var(--touch-target);border:2px solid var(--color-control-border);border-radius:var(--radius-card);background:var(--color-surface);transition:transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background var(--motion-fast) ease}.sound-chip:hover{background:var(--color-surface);transform:translateY(-1px);box-shadow:0 0 0 2px #5a9d8d38}.backpack-group--initials .sound-chip{color:var(--color-initial)}.backpack-group--finals .sound-chip{color:var(--color-final)}.assembly-prompt{min-height:92px;padding:0 var(--space-4)}.assembly-slot{border-color:var(--color-control-border);background:var(--color-surface)}.assembly-slot:first-child.is-filled{border-color:var(--color-initial-border);background:var(--color-initial-soft)}.assembly-slot:last-child.is-filled{border-color:var(--color-final-border);background:var(--color-final-soft)}.assembly-feedback.is-error{color:var(--color-syllable)}.choice-group{border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-surface);border-top-width:4px}.choice-group--initials{border-color:var(--color-initial-border);background:var(--color-initial-soft)}.choice-group--finals{border-color:var(--color-final-border);background:var(--color-final-soft)}.choice-group h2{color:var(--color-text)}.part-button{border-color:var(--color-control-border);border-radius:var(--radius-card);color:var(--color-text);background:var(--color-surface);transition:transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background var(--motion-fast) ease}.part-button:hover{transform:translateY(-1px)}.part-button.is-guided-target{border-color:var(--color-hint-border);box-shadow:0 0 0 3px var(--color-hint-soft)}.hint-button{color:var(--color-text-muted);box-shadow:none;background:0 0}.knowledge-targets .sound-part,.knowledge-targets.is-guided{border-color:var(--color-initial-border);color:var(--color-initial);background:var(--color-initial-soft)}.tone-marker .tone-contour>span{background:var(--color-syllable-border)}.success-mark{background:var(--color-primary);box-shadow:0 5px #124b3d33}.complete-equation span:first-child{color:var(--color-initial);border-color:var(--color-initial-border);background:var(--color-initial-soft)}.complete-equation span:nth-of-type(2){color:var(--color-final);border-color:var(--color-final-border);background:var(--color-final-soft)}.complete-equation strong{color:var(--color-syllable);border-color:var(--color-syllable-border);background:var(--color-syllable-soft)}.audio-recovery{border-color:var(--color-border);border-radius:var(--radius-card);background:var(--color-surface);box-shadow:var(--shadow-overlay)}.audio-recovery button{border:2px solid var(--color-initial-border);background:var(--color-primary-soft)}.audio-recovery button:last-child{border-color:var(--color-hint-border);background:var(--color-hint-soft)}@media (width<=600px){.app-header{min-height:58px;padding:0 16px}.brand{gap:10px;font-size:16px}.brand-mark{width:38px;height:38px}.completion-actions{flex-direction:column}.completion-actions .primary-button{width:min(100%,280px)}.completion-actions .pause-button{width:auto}.screen{gap:18px;width:min(100% - 28px,760px);min-height:calc(100vh - 150px);padding:28px 0 34px}.task-card{gap:16px;min-height:540px;padding:28px 20px}.task-card--knowledge{min-height:500px}.page-guide{width:min(100% - 28px,660px);margin-top:var(--space-4)}.page-guide-content{gap:10px;padding:4px 12px}.page-guide+.screen{padding-top:var(--space-5)}.page-guide p{font-size:14px}.page-guide-replay{padding:0 5px}.screen h1{font-size:29px}.screen-title{font-size:25px!important}.welcome-mark{width:122px;height:122px;font-size:39px}.lead{font-size:16px}.big-hanzi{font-size:132px!important}.reading-display{font-size:34px}.character-introduction-screen .gloss,.three-part-intro .gloss,.spelling-derivation-intro .gloss{font-size:28px}.character-introduction-screen .reading-display{font-size:48px}.sound-equation{grid-template-columns:repeat(3,minmax(72px,1fr));gap:8px}.sound-equation--decomposition{grid-template-columns:minmax(72px,1fr) 22px minmax(72px,1fr) 26px minmax(72px,1fr);grid-template-areas:"initial plus final result whole";gap:6px}.sound-equation--zero-initial{grid-template-columns:minmax(72px,184px)}.sound-part,.whole-sound{height:176px;padding:14px 6px}.sound-part strong,.whole-sound strong{font-size:38px}.three-part-sound-equation{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.15fr);gap:4px}.three-part-sound-card{height:164px;padding:10px 4px}.three-part-sound-card strong{font-size:34px}.three-part-sound-card .part-kind{font-size:12px}.sound-part .audio-button,.whole-sound .audio-button,.sound-part .audio-button-placeholder{width:var(--play-size);min-width:var(--play-size)}.equation-symbol{font-size:22px}.pronunciation-focus{width:180px;min-height:204px;padding:14px}.pronunciation-focus strong{font-size:64px}.tone-drill-focus{min-height:238px;padding:20px}.tone-drill-focus>strong{font-size:72px}.backpack-group{min-height:96px;padding:13px 10px}.sound-chip{width:var(--touch-target);height:var(--touch-target)}.prompt-hanzi{font-size:58px}.assembly-slot{width:100px;height:92px}.choice-area{gap:10px}.assembly-flow-arrows{column-gap:10px}.choice-group{padding:13px 10px}.assembly-actions .hint-button{grid-area:1/1;width:auto}.assembly-actions .primary-button{grid-area:2/1;justify-self:center;width:min(100%,300px)}.knowledge-screen{width:min(100% - 28px,680px)}.knowledge-screen .big-hanzi{font-size:78px!important}.spelling-derivation-equation{gap:8px;min-height:118px;padding:12px}.spelling-sound-card{min-width:72px;min-height:76px;padding:8px}.spelling-sound-card>strong{font-size:34px}.spelling-derivation-equation.is-playable .spelling-sound-card{min-height:136px}.spelling-source-item{gap:4px}.spelling-source-item>b{font-size:20px}.spelling-source-parts{gap:6px}.spelling-derivation-intro-word .word-pinyin-syllable{font-size:25px}.spelling-derivation-intro-word .word-pinyin-column strong{font-size:52px}.whole-syllable-reading{font-size:76px!important}.whole-syllable-reading--intro{font-size:68px!important}.whole-association-intro{gap:10px;width:min(100%,330px)}.whole-association-pair{gap:var(--space-3)}.whole-association-anchor-word{padding-top:12px}.whole-association-anchor-word .word-pinyin-syllable{font-size:23px}.whole-association-anchor-word .word-pinyin-column strong{font-size:44px}.whole-tone-choice-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}.whole-syllable-examples-screen{gap:var(--space-5)}.whole-syllable-example-list{grid-template-columns:1fr;gap:10px;width:min(100%,340px)}.whole-syllable-example{min-height:118px;padding:12px}.whole-syllable-example-word{width:min(100%,280px)}.whole-syllable-example-word .word-pinyin-syllable{font-size:24px}.whole-syllable-example-word .word-pinyin-column strong{font-size:48px}.word-pinyin-display,.word-pinyin-match{gap:var(--space-3);width:min(100%,330px)}.word-component-match{gap:10px;width:min(100%,350px)}.word-component-column{padding:12px 6px}.syllable-assembly{gap:4px}.syllable-assembly .assembly-slot{width:min(100%,82px);height:78px}.syllable-assembly .assembly-slot strong{font-size:30px}.word-component-column>strong{font-size:62px}.word-pinyin-syllable{font-size:34px}.word-pinyin-column strong{font-size:82px}.word-pinyin-match-column{grid-template-rows:66px auto;gap:10px}.word-pinyin-match-column>strong{font-size:70px}.word-pinyin-slot{height:66px;font-size:30px}.word-pinyin-candidates{gap:10px}.word-pinyin-candidate{flex:88px;min-width:76px;min-height:58px;padding:8px 12px;font-size:26px}.knowledge-targets{grid-template-columns:1fr}.knowledge-targets .sound-part{min-height:112px}.knowledge-targets .sound-part strong,.knowledge-targets.is-guided strong{font-size:30px}.knowledge-choice-buttons .part-button{flex:120px;font-size:22px}.tone-marker-label{font-size:28px}.tone-study-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tone-study-card{min-height:116px}.tone-study-grid.is-interactive .tone-study-card{min-height:152px}.tone-study-card strong{font-size:48px}.tone-choice-buttons .tone-symbol-button{flex-basis:calc(50% - 7px);min-width:0;min-height:76px;font-size:42px}.complete-equation{gap:5px}.complete-equation span,.complete-equation strong{min-width:70px;min-height:78px;font-size:36px}.complete-equation b{font-size:20px}.screen .knowledge-complete-pinyin{font-size:72px}.course-progress-heading strong{font-size:24px}}@media (width<=360px){.page-guide-content{grid-template-columns:minmax(0,1fr) auto;gap:8px}.page-guide-replay span:last-child{display:none}.page-guide-replay{width:var(--touch-target);padding:0}.sound-equation{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.sound-equation .whole-sound{grid-column:1/-1;height:176px}.sound-equation--decomposition{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);grid-template-areas:"initial plus final"".result.""whole whole whole"}.sound-equation--decomposition .whole-sound{grid-column:1/-1}.sound-equation--zero-initial{grid-template-columns:minmax(0,184px)}.sound-equation--decomposition.sound-equation--zero-initial{grid-template-areas:"final"}.sound-equation--zero-initial .whole-sound{grid-column:auto}.three-part-sound-equation{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.15fr);gap:3px}.three-part-sound-equation .whole-sound{grid-column:auto;height:164px}.choice-area{grid-template-columns:1fr}.guided-choice-area{grid-template-columns:repeat(2,minmax(0,1fr))}.guided-choice-area.is-zero-initial,.backpack{grid-template-columns:1fr}.backpack-group:first-child{border-right:0}}.app-header{border-bottom:0;box-shadow:0 2px 12px #1f483912}.brand-mark{border-radius:var(--radius-compact)}.task-card{border-radius:var(--radius-surface);box-shadow:var(--shadow-surface);border:0}.page-guide,.audio-recovery{border-radius:var(--radius-card);box-shadow:var(--shadow-card);border:0}.sound-part,.whole-sound,.pronunciation-focus,.tone-drill-focus,.choice-group,.knowledge-targets.is-guided,.tone-study-card,.complete-equation span,.complete-equation strong,.backpack-group{border:0}.sound-part,.whole-sound,.pronunciation-focus,.tone-drill-focus,.knowledge-targets.is-guided,.tone-study-card{box-shadow:var(--shadow-card)}.choice-group--initials,.backpack-group--initials{box-shadow:inset 0 4px 0 var(--color-initial-border), var(--shadow-card)}.choice-group--finals,.backpack-group--finals{box-shadow:inset 0 4px 0 var(--color-final-border), var(--shadow-card)}.backpack-group:first-child{border-right:0}.ui-button--primary{border-radius:var(--radius-card)}.ui-button--secondary,.audio-button,.audio-recovery button{box-shadow:var(--shadow-control);border:0}.ui-button--secondary:active,.audio-recovery button:active{transform:translateY(2px);box-shadow:0 2px 6px #1f483924}.ui-button:disabled,.audio-button:disabled,.audio-recovery button:disabled{box-shadow:none;border:0}.audio-button{background:var(--color-surface)}.audio-button:active{box-shadow:0 2px 6px #1f483924}.audio-button.is-visually-stable,.audio-button.is-visually-stable:disabled,.audio-button.is-visually-stable.is-playing,.audio-button.is-visually-stable.is-playing:disabled{color:var(--color-primary);background:var(--color-surface);box-shadow:var(--shadow-control);opacity:1}.audio-button.is-visually-stable:disabled{cursor:wait}.audio-button.is-visually-stable:before,.audio-button.is-visually-stable:after{opacity:0;animation:none}.sound-chip,.part-button{border:2px solid var(--color-border);border-radius:var(--radius-compact);box-shadow:var(--shadow-control)}@media (width<=430px){.spelling-derivation-equation{grid-template-columns:minmax(0,1fr) auto}.spelling-derivation-equation .spelling-source-parts{grid-column:1/-1}.spelling-derivation-equation>b{grid-column:1;justify-self:end}.spelling-derivation-equation>.spelling-sound-card{grid-column:2}}.part-button{--selection-color:var(--color-primary);--selection-surface:var(--color-primary-soft)}.choice-group--initials .part-button{--selection-color:var(--color-initial);--selection-surface:var(--color-initial-soft)}.choice-group--finals .part-button{--selection-color:var(--color-final);--selection-surface:var(--color-final-soft)}.part-button.is-selected{color:var(--color-primary-pressed);border-color:var(--selection-color);background:var(--selection-surface);box-shadow:0 0 0 3px var(--selection-color), var(--shadow-selected)}.choice-group--initials .part-button.is-selected{color:var(--color-initial)}.choice-group--finals .part-button.is-selected{color:var(--color-final)}.part-button.is-selected:after{content:"✓";border:2px solid var(--color-surface);border-radius:var(--radius-round);width:22px;height:22px;color:var(--color-surface);background:var(--selection-color);pointer-events:none;place-items:center;font-family:Arial,sans-serif;font-size:14px;font-weight:800;line-height:1;display:grid;position:absolute;top:-8px;right:-8px}.assembly-slot{border-color:var(--color-control-border);border-radius:var(--radius-control);background:var(--color-surface-soft);box-shadow:none}.complete-equation span,.complete-equation strong{border-radius:var(--radius-compact);box-shadow:var(--shadow-control);border:0}.complete-equation span:first-child,.complete-equation span:nth-of-type(2){border:0}@media (prefers-reduced-motion:reduce){.pronunciation-focus.is-ready-to-read strong,.audio-button.is-playing:before,.audio-button.is-playing:after{animation:none}*,:before,:after{scroll-behavior:auto!important;transition:none!important}}