*{box-sizing:border-box} :root{font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:#304d42;background:#f6faf7;font-synthesis:none;letter-spacing:0}body{margin:0}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{cursor:pointer;transition:background .16s,transform .16s}button:active:not(:disabled){transform:translateY(2px)}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #dca749;outline-offset:4px}button{border:0}a{color:inherit;text-decoration:none}.topbar{height:90px;max-width:1200px;padding:0 38px;margin:auto;display:flex;align-items:center;gap:24px;border-bottom:1px solid #e1e9e2}.brand{display:flex;align-items:center;gap:12px;font-weight:750;font-size:20px}.brand-icon{font-size:42px;color:#4e916d}.brand small{display:block;font-size:9px;letter-spacing:3px;margin-top:4px;color:#789082}.top-note{margin-left:auto;color:#8a9b90;font-size:12px}.icon-button{background:transparent;font-size:24px;color:#6c8375;width:40px;height:40px;border-radius:8px}.icon-button:hover{background:#e7eee8}main{max-width:1120px;padding:38px 32px 15px;margin:auto}.page-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.eyebrow{font-size:10px;letter-spacing:2px;color:#789583;font-weight:700}h1{font-size:28px;margin:10px 0 9px;font-weight:750}h1 span{color:#d5a64e}p{line-height:1.7}.page-heading p{font-size:13px;color:#82958a;margin:0}.session-badge{display:flex;align-items:center;gap:14px}.session-badge>span{color:#daa848;font-size:44px}.session-badge strong{font-size:24px}.session-badge small{display:block;color:#8b9a90;font-size:11px;margin-top:3px}.workspace{display:grid;grid-template-columns:220px minmax(0,1fr);gap:34px}aside{padding-top:8px}.aside-heading{font-size:14px;font-weight:700;display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.aside-heading span{font-size:10px;font-weight:400;color:#91a095}#groups{display:grid;gap:10px}.group{display:flex;width:100%;text-align:left;align-items:center;gap:13px;padding:13px 14px;border-radius:8px;border:1px solid #e1e9e3;background:#fff;color:#5f7468;min-height:72px}.group.active{background:#e7f1e8;border-color:#87b496;color:#355e47}.group:hover{border-color:#87b496}.vowel{display:grid;place-items:center;width:39px;height:39px;border-radius:8px;background:var(--tint);color:var(--ink);font-size:25px;font-weight:700;flex-shrink:0}.group-info strong{display:block;font-size:13px}.group-info small{display:block;font-size:10px;margin-top:5px;color:#8c9b91}.group-state{margin-left:auto;font-size:15px;color:#88a591}.garden-note{text-align:center;margin-top:30px;color:#89998b}.garden-note>span{font-size:35px;color:#d7aa75}.garden-note p{font-size:12px}.garden-note #flowers{font-size:21px;letter-spacing:6px;color:#d4a44f;min-height:35px}.practice{background:#fff;border:1px solid #e0e9e1;border-radius:8px;overflow:hidden;box-shadow:0 8px 30px #3c654609}.practice-top{display:flex;justify-content:space-between;padding:22px 27px 15px;font-size:12px;color:#698273}.practice-top span:first-child{font-weight:700}.progress-track{height:4px;background:#edf2ed;margin:0 27px;border-radius:4px;overflow:hidden}#progress{height:100%;background:#82b48c;transition:width .4s;width:0}.play-area{padding:15px 34px 22px;text-align:center}.mascot-scene{position:relative;width:270px;height:155px;margin:0 auto}.mascot{width:186px;height:152px;position:absolute;left:42px;bottom:0;animation:breathe 3s ease-in-out infinite}.spark{position:absolute;color:#d7b565;font-size:22px}.s1{left:28px;top:67px}.s2{right:18px;top:98px}.speech-bubble{position:absolute;right:-53px;top:17px;background:#f5f8f2;color:#829279;font-size:10px;padding:8px 10px;border-radius:8px}.play-area h2{font-size:21px;margin:7px 0 16px}.audio-actions{display:flex;align-items:center;justify-content:center;gap:14px}.listen-button{background:#548c69;color:#fff;padding:12px 24px;border-radius:7px;display:flex;gap:12px;align-items:center;min-width:138px;justify-content:center;font-size:14px;box-shadow:0 3px 0 #3c7050}.listen-button:hover{background:#467d5b}.slow-button{background:#f0f4ed;border:1px solid #e4ebdf;color:#74816a;padding:11px 15px;border-radius:7px;font-size:12px}.slow-button span{margin-left:8px;font-size:10px;color:#98a18e}.slots{display:flex;gap:9px;justify-content:center;margin:25px auto 0;min-height:53px}.slot{width:49px;height:53px;border-radius:7px;border:1px solid #dce5dc;background:#f8faf6;display:grid;place-items:center;font-size:27px;font-weight:650;color:#4c7454;border-bottom:3px solid #d6e1d4}.slot.current{border-color:#80aa87;background:#f1f7ee}.slot.correct{background:#e3f1e2;border-color:#85b68b}.slot.wrong{background:#fcf0ed;border-color:#dfaaa2}.feedback{font-size:12px;color:#8a9b8c;min-height:23px;margin:13px 0 17px}.feedback.error{color:#b57467}.feedback.success{color:#4c8c5b}.keyboard{max-width:520px;margin:0 auto;min-height:155px}.keyboard[hidden]{display:none}.key-row{display:flex;gap:7px;justify-content:center;margin-bottom:8px}.key{min-width:0;width:43px;height:43px;background:#fff;color:#65776a;border:1px solid #dfe7dc;border-bottom:3px solid #d8e2d3;border-radius:6px;font-size:17px;font-weight:600}.key:hover{background:#eaf2e5}.key.backspace{width:61px;color:#8a917d;background:#f4f5ef}.bottom-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:21px auto 0;max-width:510px}.text-button{background:transparent;color:#8a9680;padding:10px 0;font-size:12px}.check-button{background:#e6eedf;color:#54704a;border:1px solid #d6e3cc;border-bottom:3px solid #c6d6b9;border-radius:7px;padding:11px 20px;font-weight:600;font-size:12px}.check-button:hover{background:#d9e7ce}.check-button span{margin-left:25px}.practice-footer{border-top:1px dashed #e3eae0;padding:14px 26px;display:flex;justify-content:space-between;color:#a0ad9f;font-size:10px}.practice-footer i{display:inline-block;width:6px;height:6px;background:#8bb48e;border-radius:50%;margin-right:6px}.page-footer{text-align:center;color:#9ca99e;font-size:10px;margin-top:28px}.page-footer span{margin-left:14px;font-size:8px;letter-spacing:1px}dialog{border:1px solid #dde7dc;border-radius:8px;max-width:420px;width:calc(100% - 32px);padding:28px;color:#3e5d4a;box-shadow:0 15px 80px #253c4529}dialog::backdrop{background:#23423255;backdrop-filter:blur(3px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center}.dialog-heading h2{font-size:20px}dialog label{font-size:13px}dialog select{width:100%;margin-top:12px;padding:10px;border:1px solid #cbdaca;border-radius:6px;color:#50674e;background:white}dialog p{font-size:13px;color:#84927f}.completion-art{color:#d3a345;font-size:38px;text-align:center}#complete{text-align:center}#complete h2{font-size:24px}.completion-actions{display:flex;flex-direction:column;gap:12px}.speaking .mascot{animation:breathe .5s infinite}.celebrate .spark{animation:pop .6s infinite alternate}.shake{animation:shake .3s}@keyframes breathe{50%{transform:translateY(-5px)}}@keyframes pop{to{transform:scale(1.4) rotate(20deg)}}@keyframes shake{25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}@media(min-width:1000px){.play-area{min-height:515px}}@media(max-width:760px){.topbar{height:74px;padding:0 20px}.top-note{display:none}.topbar .icon-button{margin-left:auto}.brand{font-size:17px}main{padding:25px 16px 20px}.page-heading{margin-bottom:22px}h1{font-size:21px}.eyebrow{font-size:8px}.page-heading p{font-size:11px}.session-badge{gap:5px}.session-badge>span{font-size:30px}.session-badge strong{font-size:21px}.session-badge small{font-size:9px}.workspace{display:block}aside{padding:0}.aside-heading,.garden-note{display:none}#groups{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:17px}.group{min-height:65px;padding:7px 2px;display:flex;flex-direction:column;gap:3px}.vowel{width:31px;height:31px;font-size:21px}.group-info strong{font-size:9px}.group-info small,.group-state{display:none}.practice-top{padding:17px 18px 12px}.progress-track{margin:0 18px}.play-area{padding:12px 14px 21px}.speech-bubble{right:-12px;top:8px;font-size:9px}.mascot-scene{height:145px}.key-row{gap:4px}.key{height:40px;width:9%;font-size:15px}.key.backspace{width:14%}.slot{width:39px;height:47px;font-size:23px}.slots{gap:6px}.bottom-actions{margin-top:16px}.practice-footer{padding:13px 17px;font-size:9px}.page-footer span{display:block;margin:7px 0 0}.keyboard{min-height:145px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}