:root{--bg:#0f1115;--fg:#e5e7eb;--muted:#9aa0a6;--accent:#8b5cf6;--tile:#171923;--active:#22263a}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:radial-gradient(1200px 800px at 20% 0%,#111526,#0b0d14 30%,#090a10 70%),var(--bg);color:var(--fg);font-family:LXGW Bright SemiLight,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Noto Sans,sans-serif}.app{display:flex;flex-direction:column;min-height:100vh}.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:linear-gradient(0deg,#090a10e6,#090a10a6);-webkit-backdrop-filter:saturate(1.6) blur(6px);backdrop-filter:saturate(1.6) blur(6px);position:sticky;top:0;z-index:20}.brand{font-weight:600;letter-spacing:.5px}.controls{display:flex;gap:8px}.controls button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:10px;padding:8px 12px;background:linear-gradient(180deg,#2a2f45,#222538);color:var(--fg);box-shadow:0 1px #ffffff0f inset,0 8px 20px #00000059;cursor:pointer}.controls button:active{transform:translateY(1px)}.grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,180px);gap:14px;padding:16px;flex:1;grid-auto-flow:dense}.tile{position:relative;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#2a2f45,#1d2033);box-shadow:0 6px 18px #00000059;transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}.tile:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(110% 90% at 65% 10%,#ffffff0f,#fff0),linear-gradient(180deg,#0000,#00000059)}.tile .surface{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;filter:brightness(.82) saturate(1.05)}.tile .meta{position:absolute;left:12px;bottom:12px;right:12px;display:flex;flex-direction:column;gap:4px;z-index:2}.meta .title{font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.45)}.meta .artist{font-size:12px;color:var(--muted)}.tile.active{transform:scale(1.06);box-shadow:0 14px 36px #0000008c;z-index:10}.tile.shrink{filter:brightness(.7) blur(.2px)}.tile.collapsed{opacity:0;pointer-events:none}.lyrics{position:absolute;top:var(--top,auto);bottom:var(--bottom,54px);left:var(--left,10px);right:var(--right,10px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;z-index:3}.tile.active .lyrics{top:0;bottom:0;left:0;right:0;justify-content:center;align-items:center}.lyrics .line{font-size:16px;line-height:1.35;padding:6px 14px;border-radius:10px;--deg:180deg;--c1:rgba(139,92,246,.18);--c2:rgba(236,72,153,.12);--pulse:1;--rot:0deg;background:linear-gradient(var(--deg),var(--c1),var(--c2));color:#fafafa;text-shadow:0 2px 14px rgba(139,92,246,.55);opacity:0;transform:translateY(6px) scale(var(--pulse)) rotate(var(--rot));transition:opacity .35s ease,transform .15s ease;max-width:78%;margin:0 auto;will-change:transform}.lyrics .line.animate{background-size:200% 200%;animation:gradientRoll 10s linear infinite}.lyrics .line.show{opacity:1;transform:translateY(0)}@keyframes gradientRoll{0%{background-position:0% 0%}to{background-position:120% 120%}}@keyframes fadeScaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes slideLeftIn{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:translate(0)}}@keyframes slideTopIn{0%{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDiagIn{0%{opacity:0;transform:translate(-24px,-18px)}to{opacity:1;transform:translate(0)}}.lyrics .line.fx-fade{animation:fadeScaleIn .45s ease both}.lyrics .line.fx-left{animation:slideLeftIn .45s ease both}.lyrics .line.fx-top{animation:slideTopIn .45s ease both}.lyrics .line.fx-diag{animation:slideDiagIn .45s ease both}.lyrics .line.fx-type{background:none}.lyrics .line.fx-type span{display:inline-block;opacity:0;transform:translateY(8px)}.lyrics .line.fx-type.show span{opacity:1;transform:translateY(0)}.lyrics .line.fx-charburst span{display:inline-block;transition:transform .4s ease}.lyrics .line.fx-charburst span.big{transform:scale(1.35) rotate(-2deg);filter:drop-shadow(0 1px 6px rgba(0,0,0,.35))}.overlay-char{position:absolute;pointer-events:none;z-index:4;font-weight:800;filter:drop-shadow(0 2px 10px rgba(0,0,0,.45));transform:translate(-50%,-50%)}.viz{position:absolute;right:18px;bottom:16px;width:260px;height:88px;opacity:.9}.viz.hidden{opacity:0}.viz{filter:drop-shadow(0 2px 12px rgba(0,0,0,.5))}.beat-glow{position:absolute;inset:auto 0 0 auto;margin:0 22px 22px 0;width:140px;height:140px;border-radius:50%;background:radial-gradient(closest-side,#ffffff2e,#fff0);animation:beatPop .45s ease-out forwards;pointer-events:none;z-index:3}@keyframes beatPop{0%{transform:scale(.8);opacity:0}30%{transform:scale(1.15);opacity:.9}to{transform:scale(1.6);opacity:0}}.progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,#ffffff14,#ffffff05);overflow:hidden}.progress .bar{height:100%;width:0;background:linear-gradient(90deg,#8b5cf640,#ec489940);transition:width .15s linear}@media (max-width:900px){.grid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,160px)}}@media (max-width:640px){.grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(6,150px)}.lyrics .line{font-size:15px}}