.practice-shell{max-width:760px;margin:18px auto}.practice-top{display:flex;justify-content:space-between;align-items:center}.practice-top>span{font-weight:900;color:#16845a}.progress{height:10px;background:#dfe9e2;border-radius:999px;overflow:hidden;margin:12px 0 20px}.progress i{display:block;height:100%;background:#21a36f;border-radius:inherit}.practice-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:16px}.practice-steps span{padding:8px 5px;border-radius:10px;text-align:center;background:#e8efea;color:#748079;font-size:11px;font-weight:800}.practice-steps span.active{background:#153d30;color:#fff}.practice-steps span.done{background:#daf6e7;color:#087047}.focus-word{text-align:center;min-height:390px;display:flex;flex-direction:column;justify-content:center;align-items:center}.focus-word h2{font-size:clamp(32px,7vw,58px);margin:12px}.focus-word .meaning{font-size:22px;max-width:620px}.focus-word form{width:min(420px,100%)}.focus-word input{text-align:center;font-size:22px}.listen-symbol{font-size:60px}.example-box{background:#edf5ef;border-radius:18px;padding:20px;width:100%;margin:12px 0 22px}.example-box p{font-size:24px;margin:8px}.example-box small{color:#69756f}.practice-lock{text-align:center;color:#69756f;font-size:12px}.route-finished{max-width:650px;text-align:center;margin:40px auto}.route-finished button{margin:5px}.finish-mark{display:grid;place-items:center;width:72px;height:72px;margin:auto;border-radius:50%;background:#daf6e7;color:#087047;font-size:38px;font-weight:900}@media(max-width:600px){.practice-steps{grid-template-columns:repeat(5,100px);overflow-x:auto}.focus-word{min-height:350px;padding:20px}}
.unit-celebration{position:relative;isolation:isolate;overflow:hidden;max-width:680px;margin:40px auto;padding:48px 28px;text-align:center;background:linear-gradient(145deg,#fff 0%,#effcf5 100%);border:2px solid #bdebd2}.celebration-medal{display:grid;place-items:center;width:92px;height:92px;margin:0 auto 18px;border-radius:50%;color:#fff;background:linear-gradient(135deg,#ffbd2e,#ff7a1a);font-size:50px;box-shadow:0 14px 35px #f7a52655;animation:celebration-pop .7s cubic-bezier(.2,.9,.3,1.35)}.unit-celebration h1{font-size:clamp(28px,6vw,46px);margin:10px 0}.unit-celebration>p{font-size:18px}.celebration-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:24px}.confetti{position:absolute;inset:0;z-index:-1;pointer-events:none}.confetti i{position:absolute;left:calc(var(--x) * 1%);top:-18px;width:9px;height:18px;border-radius:3px;background:hsl(calc(var(--i) * 47),80%,58%);animation:confetti-fall 2.6s calc(var(--i) * -0.11s) ease-in infinite;transform:rotate(calc(var(--i) * 23deg))}@keyframes celebration-pop{0%{opacity:0;transform:scale(.25) rotate(-18deg)}70%{transform:scale(1.12) rotate(5deg)}100%{opacity:1;transform:scale(1)}}@keyframes confetti-fall{0%{transform:translateY(-20px) rotate(0);opacity:0}12%{opacity:1}100%{transform:translateY(620px) rotate(620deg);opacity:0}}@media(max-width:600px){.unit-celebration{margin:18px auto;padding:36px 18px}.celebration-medal{width:78px;height:78px;font-size:42px}.celebration-actions{display:grid}.celebration-actions button{width:100%}.focus-word .meaning{font-size:19px;line-height:1.45;overflow-wrap:anywhere}}@media(prefers-reduced-motion:reduce){.celebration-medal,.confetti i{animation:none}.confetti{display:none}}
.optional-listening{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;margin:24px 0 4px;padding:20px;text-align:left;border:1px solid #b9ddce;border-radius:18px;background:#f3fbf7}.optional-listening-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#d8f2e5;font-size:27px}.optional-listening h2{margin:4px 0 8px;font-size:20px}.optional-listening p{margin:6px 0;line-height:1.5}.optional-video-link{display:inline-block;margin-top:10px;text-decoration:none}@media(max-width:600px){.optional-listening{grid-template-columns:1fr;text-align:center;padding:17px}.optional-listening-icon{margin:auto}.optional-video-link{display:block;width:100%}}
.pronunciation-guide{margin:0 0 14px;padding:10px 16px;border-radius:12px;background:#fff7dc;color:#70520b;font-size:15px;text-align:left}.pronunciation-guide>strong{display:block;margin-bottom:6px;font-size:18px;color:#513900}.pronunciation-guide ol{margin:4px 0 0;padding-left:22px}.pronunciation-guide li{margin:5px 0;line-height:1.4}.pronunciation-guide b{font-size:18px;color:#513900}.story-pronunciations{margin:18px 0;padding:14px;border:1px solid #efd78a;border-radius:16px;background:#fffaf0;text-align:left}.story-pronunciations>strong{display:block;margin-bottom:10px;color:#604b13}.story-pronunciations>div{display:flex;flex-wrap:wrap;gap:8px}.story-pronunciations span{display:inline-flex;align-items:baseline;gap:6px;padding:7px 10px;border-radius:999px;background:#fff;border:1px solid #eadcae;font-weight:800}.story-pronunciations small{color:#765f20;font-weight:600}.story-pronunciations small::before{content:"("}.story-pronunciations small::after{content:")"}@media(max-width:600px){.story-pronunciations>div{display:grid;grid-template-columns:1fr 1fr}.story-pronunciations span{border-radius:12px;overflow-wrap:anywhere}}
.microphone-fallback-note{margin:12px 0;color:#66736d;font-size:13px;line-height:1.45}