:root{font-family:Inter,Avenir,Helvetica,Arial,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:radial-gradient(1200px 800px at 50% -10%,#1b2440,#0d1020 55%,#080a14);color:#e8ecf5}.app{max-width:720px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;gap:22px;padding:22px 24px 30px}.topbar{display:flex;align-items:baseline;justify-content:space-between}.brand{font-size:22px;font-weight:700;letter-spacing:.5px}.brand span{font-size:13px;font-weight:500;opacity:.6;margin-left:8px}.levels{display:flex;gap:6px}.lvl{padding:7px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:transparent;color:#e8ecf5;font-size:12.5px;cursor:pointer;transition:background .15s ease,border-color .15s ease}.lvl:hover{background:#ffffff0f}.lvl.on{background:#4a6bff40;border-color:#4a6bff}.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;min-height:320px;border:1px solid rgba(255,255,255,.07);border-radius:24px;background:#ffffff05}.stage-syllable{font-weight:700;line-height:1;color:#fff;text-shadow:0 8px 40px rgba(0,0,0,.5)}.stage-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}.chip{font-size:14px;padding:5px 12px;border-radius:999px;background:#ffffff0f;border:1px solid rgba(255,255,255,.08)}.plus{opacity:.4}.buffering{font-size:12px;letter-spacing:1px;text-transform:uppercase;opacity:0;transition:opacity .2s ease}.buffering.on{opacity:.5}.transport{display:flex;gap:12px;justify-content:center;align-items:center}.ctrl{font-size:18px;padding:12px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;color:#e8ecf5;cursor:pointer;transition:background .15s ease,transform .1s ease}.ctrl:hover{background:#ffffff1a}.ctrl:active{transform:scale(.96)}.ctrl.play{min-width:150px;font-weight:600;background:#3556d4;border-color:#4a6bff}.ctrl.play:hover{background:#4a6bff}.scrubber{display:flex;align-items:center;gap:14px}.scrubber input[type=range]{flex:1}.counter{font-variant-numeric:tabular-nums;font-size:13px;opacity:.7;min-width:82px;text-align:right}.settings{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 24px}.setting{display:flex;flex-direction:column;gap:6px}.setting label{font-size:12px;opacity:.65}.segmented{display:flex;gap:6px}.seg{flex:1;padding:8px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:transparent;color:#e8ecf5;cursor:pointer;font-size:13px}.seg.on{background:#4a6bff40;border-color:#4a6bff}input[type=range]{width:100%;accent-color:#4a6bff}.ctrl:disabled{opacity:.35;cursor:default}.stage.drill{gap:24px}.drill-transport .ctrl{font-size:15px;padding:9px 16px}.drill-transport .ctrl.play{min-width:0}.drill-prompt{display:flex;align-items:center;justify-content:center;min-height:150px}.listen{font-size:54px;line-height:1;padding:26px 34px;border-radius:28px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;cursor:pointer;transition:background .15s ease,transform .1s ease}.listen:hover{background:#ffffff17}.listen:active{transform:scale(.96)}.drill-answer{display:flex;flex-direction:column;align-items:center;gap:8px}.drill-typed{font-size:15px;letter-spacing:2px;opacity:.55;font-variant-numeric:tabular-nums}.drill-input{width:min(340px,100%);text-align:center;font-size:30px;font-weight:600;letter-spacing:2px;padding:14px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:#00000040;color:#fff;outline:none;transition:border-color .15s ease,background .15s ease}.drill-input:focus{border-color:#4a6bff;background:#00000059}.drill-input.correct{border-color:#3da35d;background:#3da35d29}.drill-input.shake{border-color:#e0533d;animation:shake .32s cubic-bezier(.36,.07,.19,.97)}@keyframes shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-7px)}40%,60%{transform:translate(7px)}}@media(prefers-reduced-motion:reduce){.drill-input.shake{animation:none}}.drill-status{font-size:12.5px;letter-spacing:1px;text-transform:uppercase;min-height:18px}.ok{color:#6ddc92}.bad{color:#ff8f7a}.shown{color:#e0a13d}.hint{text-align:center;font-size:12px;opacity:.45}@media(max-width:520px){.settings{grid-template-columns:1fr}}