:root{color-scheme:dark;--idle:#fff;--sung:#ffd54a;--outline:#05070b;--shade:.44}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#05070b;color:#fff;font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif}body{display:grid;place-items:center}.shell{width:min(100vw,1280px);aspect-ratio:16/9;background:#0c111b;border:1px solid #263550;overflow:hidden;display:grid;grid-template-rows:minmax(0,4fr) minmax(92px,1fr)}.visual{position:relative;overflow:hidden;background:radial-gradient(circle at 70% 24%,#34213f,#0b1120 56%,#06090f)}.shade{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,var(--shade)));pointer-events:none}.visual header{position:absolute;z-index:2;left:3%;right:3%;top:4%;display:flex;justify-content:space-between;gap:12px;font-size:clamp(11px,1.5vw,20px);opacity:.9}.lyrics{position:absolute;z-index:2;left:4%;right:4%;bottom:12%;text-align:center;text-shadow:0 2px 4px var(--outline),0 0 11px var(--outline)}.line{min-height:1.25em;font-size:clamp(22px,4vw,58px);font-weight:850;line-height:1.24;color:var(--idle)}.next{margin-top:.24em}.word.sung{color:var(--sung)}.panel{background:#111927;border-top:1px solid #30415d;padding:8px 12px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:1fr auto;gap:7px 12px}nav,.transport{display:flex;align-items:center;gap:7px}button{min-width:52px;min-height:44px;border:1px solid #3b4e6d;border-radius:10px;background:#19263a;color:#fff;padding:0 12px;font:inherit;font-weight:750;cursor:pointer}button.active{border-color:#ffd166;box-shadow:0 0 0 2px rgba(255,209,102,.2) inset}button:focus-visible{outline:3px solid #ffd166;outline-offset:2px}.clock{min-width:80px;flex:1;display:grid;gap:2px}progress{width:100%;height:7px;accent-color:#ffd166}small{font-variant-numeric:tabular-nums;color:#afbdd1;text-align:center}.transport button{flex:0 0 auto}#status{grid-column:1/-1;color:#93a6c2;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shell:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border:0}@media(max-width:620px){.shell{grid-template-rows:minmax(0,3.6fr) minmax(88px,1.4fr)}.panel{padding:5px 6px;gap:4px;grid-template-columns:1fr 1fr}nav,.transport{gap:4px}button{min-width:38px;min-height:40px;padding:0 7px;font-size:13px}button span{display:none}.line{font-size:clamp(18px,5.7vw,34px)}#status{font-size:9px}}