: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}.level{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;opacity:.55}.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-size:clamp(90px,22vw,190px);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}.hint{text-align:center;font-size:12px;opacity:.45}@media(max-width:520px){.settings{grid-template-columns:1fr}}