:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:#0a0a0a;color:#fafafa}.karaoke-shell{min-height:100vh;display:grid;place-items:center;padding:2rem;background:radial-gradient(ellipse at 50% 30%,#1a1040,#0a0a0a 70%)}.karaoke-container{max-width:36rem;width:100%;text-align:center}.karaoke-header h1{margin:0 0 .25rem;font-size:2rem;font-weight:700;background:linear-gradient(135deg,#a78bfa,#60a5fa,#34d399);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{margin:0 0 2rem;color:#fff6;font-size:.85rem}.lyrics-area{min-height:280px;display:flex;flex-direction:column;justify-content:center;gap:.5rem;margin-bottom:2rem}.lyric-line{font-size:1.1rem;padding:.4rem .6rem;border-radius:.5rem;transition:all .35s ease;line-height:1.7}.lyric-line.past{color:#fff3;transform:scale(.95)}.lyric-line.future{color:#ffffff26;transform:scale(.95)}.lyric-line.active{color:#fffffff2;transform:scale(1.05);background:#ffffff0a}.word{display:inline-block;transition:color .15s ease,transform .15s ease}.word.past{color:#34d399}.word.future{color:inherit}.word.current{color:#facc15;font-weight:700}.word.bounce{animation:wordBounce .3s ease}@keyframes wordBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.lyric-spacer{height:1.2rem}.progress-bar{height:6px;background:#ffffff14;border-radius:3px;overflow:hidden;margin-bottom:1.5rem}.progress-fill{height:100%;background:linear-gradient(90deg,#a78bfa,#60a5fa);border-radius:3px;transition:width .1s linear}.controls{display:flex;gap:.75rem;justify-content:center}.btn{font-family:inherit;font-size:.9rem;font-weight:600;padding:.65rem 1.75rem;border-radius:9999px;border:none;cursor:pointer;transition:all .2s ease}.btn-play{background:linear-gradient(135deg,#a78bfa,#60a5fa);color:#fff}.btn-play:hover{transform:scale(1.05);box-shadow:0 0 20px #a78bfa66}.btn-pause{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.15)}.btn-pause:hover{background:#ffffff26}.btn-restart{background:transparent;color:#ffffff80;border:1px solid rgba(255,255,255,.1)}.btn-restart:hover{color:#fffc;border-color:#fff3}.bouncing-notes{position:relative;height:40px;margin-top:1.5rem}.note{position:absolute;font-size:1.2rem;opacity:.6;animation:noteFloat 2s ease-in-out infinite}.n1{left:15%;animation-delay:0s;color:#a78bfa}.n2{left:30%;animation-delay:.3s;color:#60a5fa}.n3{left:50%;animation-delay:.6s;color:#34d399}.n4{left:70%;animation-delay:.9s;color:#f472b6}.n5{left:85%;animation-delay:1.2s;color:#facc15}@keyframes noteFloat{0%,to{transform:translateY(0) rotate(0);opacity:.6}50%{transform:translateY(-20px) rotate(15deg);opacity:1}}