:root{--rose:#eb4763;--rose-deep:#bd2841;--rose-soft:#fedde2}.panel{gap:clamp(16px,3vh,24px);padding:clamp(18px,4vw,32px)}.panel h1{font-size:clamp(1.9rem,5vw,2.6rem)}.info{margin-top:10px}.grades{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;display:grid}.grades .chip{flex-direction:column;align-items:center;gap:2px;padding:10px 0 8px;font-size:clamp(1.3rem,4vw,1.7rem);line-height:1;display:flex}.grades .chip small{font-family:var(--f-body);text-transform:uppercase;letter-spacing:.04em;opacity:.8;font-size:.62rem;font-weight:800}@media (width<=480px){.grades{grid-template-columns:repeat(4,minmax(0,1fr))}}.examples{flex-wrap:wrap;gap:6px;margin-top:10px;display:flex}.examples span{background:var(--rose-soft);color:var(--rose-deep);border-radius:10px;padding:3px 10px;font-weight:800}.big-btn{font-size:clamp(1.6rem,5vw,2.1rem)}.listen{flex-direction:column;align-items:center;gap:12px;display:flex}.speaker{cursor:pointer;aspect-ratio:1;background:linear-gradient(#ffd451, var(--sun));width:clamp(120px,30vw,160px);box-shadow:inset 0 -8px 0 var(--sun-deep), 0 10px 24px var(--shade);touch-action:manipulation;border:0;border-radius:50%;place-items:center;display:grid;position:relative}.speaker svg{width:48%;height:48%;color:var(--jungle-deep)}.speaker:active{box-shadow:inset 0 -4px 0 var(--sun-deep);transform:translateY(3px)}.speaker.talking:before,.speaker.talking:after{content:"";border:4px solid var(--sun);border-radius:50%;animation:1.2s ease-out infinite ripple;position:absolute;inset:0}.speaker.talking:after{animation-delay:.6s}.listen .hint{color:var(--ink-soft);text-align:center;margin:0;font-weight:800}.sentence-btn{cursor:pointer;background:var(--rose-soft);color:var(--rose-deep);touch-action:manipulation;border:0;border-radius:999px;align-items:center;gap:8px;padding:8px 16px;font-weight:800;display:inline-flex}.sentence-btn.talking{background:var(--rose);color:#fff}.listen-btns{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.answer{width:100%;font-family:var(--f-display);text-align:center;letter-spacing:.06em;color:var(--ink);background:linear-gradient(transparent calc(100% - 16px), #f0a8b4 calc(100% - 16px), #f0a8b4 calc(100% - 13px), transparent calc(100% - 13px)), var(--slot);box-shadow:inset 0 0 0 3px var(--slot);border:0;border-radius:18px;outline:none;padding:14px 16px 8px;font-size:clamp(2rem,9vw,3.2rem);font-weight:700;line-height:1.2;transition:box-shadow .15s,background-color .2s}.answer:focus{box-shadow:inset 0 0 0 3px var(--jungle)}.answer::placeholder{color:#5c686273;letter-spacing:0;font-size:.6em}.answer.ok{background-color:var(--good-soft);box-shadow:inset 0 0 0 3px var(--good)}.answer.no{background-color:var(--bad-soft);box-shadow:inset 0 0 0 3px var(--bad);animation:.4s shake}.keys{justify-content:center;gap:8px;display:flex}.keys .chip{min-width:56px;padding:4px 14px;font-size:1.5rem}.feedback{text-align:center;border-radius:20px;flex-direction:column;gap:6px;padding:14px 16px;animation:.25s ease-out pop;display:flex}.feedback.ok{background:var(--good-soft)}.feedback.no{background:var(--bad-soft)}.feedback .title{font-family:var(--f-display);font-size:1.6rem;font-weight:800;line-height:1.1}.feedback.ok .title{color:#0f8a50}.feedback.no .title{color:#c81d39}.feedback .row{color:var(--ink-soft);font-weight:700}.word{font-family:var(--f-display);letter-spacing:.06em;color:var(--ink);word-break:break-word;font-size:clamp(1.8rem,7vw,2.4rem);font-weight:800;line-height:1.1}.word.typed{color:var(--ink-soft);font-size:clamp(1.3rem,5vw,1.7rem)}.word .miss{color:#c81d39;text-underline-offset:6px;text-decoration:underline 3px}.word .extra{color:#c81d39;text-decoration:line-through 3px}@media (width<=600px){.app{gap:10px;padding-block:8px 16px}#play{border-radius:22px;gap:10px;padding:12px 14px}.listen{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 14px;display:grid}.speaker{width:92px;box-shadow:inset 0 -6px 0 var(--sun-deep);grid-row:span 2}.listen .hint{display:none}.listen-btns{display:contents}.sentence-btn{justify-content:center;padding:10px 12px}.answer{padding:10px 12px 6px;font-size:2rem}.keys .chip{flex:1;min-width:0;padding:4px 0;font-size:1.3rem}.feedback{gap:2px;padding:10px 12px}.feedback .title{font-size:1.35rem}#checkBtn{padding-block:12px;font-size:1.5rem}}@media (pointer:coarse){.keys{display:none}}.missed{text-align:left;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.missed li{background:var(--slot);border-radius:12px;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 12px;display:flex}.missed b{font-family:var(--f-display);letter-spacing:.04em;font-size:1.3rem}.missed s{color:#c81d39;overflow-wrap:anywhere;font-weight:700}@keyframes ripple{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.45)}}