@font-face{font-family:Manrope;src:url(manrope.woff2) format("woff2");font-weight:200 800;font-display:block}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#140f16;color:#fff;font-family:Manrope,sans-serif;-webkit-font-smoothing:antialiased}
#bg{position:fixed;inset:0;overflow:hidden;background:radial-gradient(120% 120% at 20% 10%,#5b2a6e 0%,#26152e 45%,#100b12 100%)}
.glow{position:absolute;inset:-12%;background-size:cover;background-position:center;filter:blur(110px) saturate(1.7) brightness(.8);opacity:0;transition:opacity 1s ease;transform:scale(1.1)}
.glow.on{opacity:.85}
#shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.1) 35%,rgba(0,0,0,.55) 100%)}
#brand{position:fixed;left:80px;top:64px;display:flex;align-items:center;gap:14px;font-weight:700;font-size:30px;opacity:.9;transition:opacity .6s}
#brand img{width:44px;height:44px}
body.idle #brand{opacity:0}
#idle{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;font-weight:700;font-size:64px;opacity:0;transition:opacity .8s}
#idle img{width:180px;height:180px;filter:drop-shadow(0 20px 50px rgba(0,0,0,.5))}
body.idle #idle{opacity:1}
#now{position:fixed;inset:0;opacity:1;transition:opacity .8s}
body.idle #now{opacity:0}
#art{position:absolute;left:140px;top:190px;width:680px;height:680px;border-radius:28px;overflow:hidden;box-shadow:12px 30px 70px rgba(0,0,0,.55);background:linear-gradient(135deg,#7b3fa0,#2b1838 60%,#1b2a4a)}
#fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
#fallback img{width:220px;height:220px;opacity:.9}
.cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.cv.on{opacity:1}
#pause{position:absolute;right:26px;bottom:26px;width:72px;height:72px;border-radius:50%;background:rgba(0,0,0,.45);display:flex;gap:12px;align-items:center;justify-content:center;opacity:0;transition:opacity .4s}
#pause i{display:block;width:10px;height:30px;border-radius:3px;background:#fff}
body.paused #pause{opacity:1}
#meta{position:absolute;left:920px;right:140px;top:50%;transform:translateY(-50%);transition:opacity .4s}
#meta.fade{opacity:0}
#title{font-weight:700;font-size:92px;line-height:1.12;letter-spacing:-.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;text-shadow:0 4px 30px rgba(0,0,0,.25)}
#artist{font-weight:600;font-size:46px;margin-top:22px;opacity:.95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#album{font-weight:400;font-size:32px;margin-top:20px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#album:empty{display:none}
#bar{position:relative;height:6px;border-radius:3px;background:rgba(255,255,255,.28);margin-top:80px}
#fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:#fff}
#knob{position:absolute;top:50%;left:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff}
#times{display:flex;justify-content:space-between;margin-top:16px;font-weight:500;font-size:28px;opacity:.8;font-variant-numeric:tabular-nums}
#state{font-size:24px;opacity:.85}
body.nodur #bar,body.nodur #dur{visibility:hidden}