#p{--brand:#5b6cf5;--bass:0;--mid:0;--treb:0;
position:fixed;inset:0;z-index:99999;display:none;color:#fff;overflow:hidden;
font:15px/1.55 -apple-system,"SF Pro Text","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
-webkit-font-smoothing:antialiased;background:#07080b}
#p.on{display:block}

#p-art{position:absolute;inset:-6%;background-position:center;background-repeat:no-repeat;
background-size:cover;opacity:0;z-index:0;pointer-events:none;
transition:opacity .8s ease,filter .5s ease;
animation:artDrift 60s ease-in-out infinite alternate}
@keyframes artDrift{
from{transform:scale(1) translate3d(-.8%,-.5%,0)}
to{transform:scale(1.04) translate3d(.8%,.5%,0)}}
#p-artVeil{position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;
transition:opacity .6s ease;
background:linear-gradient(180deg,rgba(4,5,8,.92) 0%,rgba(4,5,8,.45) 22%,
rgba(4,5,8,.10) 50%,rgba(4,5,8,.55) 78%,rgba(4,5,8,.94) 100%),
radial-gradient(90% 70% at 50% 46%,transparent 20%,rgba(0,0,0,.55) 100%)}
#p-bg{position:absolute;inset:-16%;background-size:cover;background-position:center;
filter:blur(80px) saturate(1.4) brightness(.32);
transform:scale(calc(1.12 + var(--mid)*.06));
transition:transform .4s ease-out,background-image .6s ease,opacity .6s ease;
will-change:transform}
#p-tint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
background:radial-gradient(120% 85% at 18% -8%,color-mix(in oklab,var(--brand) 62%,transparent) 0%,transparent 58%),
radial-gradient(95% 70% at 86% 108%,color-mix(in oklab,var(--brand) 38%,transparent) 0%,transparent 62%)}
#p-vig{position:absolute;inset:0;pointer-events:none;
background:radial-gradient(88% 66% at 50% 42%,transparent 20%,rgba(0,0,0,.88) 100%)}
#p-glow{position:absolute;left:50%;top:34%;width:70vmin;height:70vmin;margin:-35vmin 0 0 -35vmin;
border-radius:50%;pointer-events:none;
background:radial-gradient(circle,var(--brand) 0%,transparent 62%);filter:blur(50px);
opacity:calc(.10 + var(--bass)*.42);transform:scale(calc(1 + var(--bass)*.30));
transition:opacity .07s linear,transform .07s linear;will-change:opacity,transform}
#p.has-art #p-bg{filter:blur(90px) saturate(1.2) brightness(.28);opacity:.55}
#p.has-art #p-tint{opacity:.55}
#p.has-art #p-vig{opacity:.72}
#p.has-art #p-glow{opacity:calc(.06 + var(--bass)*.30)}

#p-wrap{position:relative;height:100%;display:grid;
grid-template-columns:280px minmax(0,1fr);grid-template-rows:auto auto auto;
gap:36px 56px;align-content:center;align-items:center;
max-width:980px;margin:0 auto;
padding:clamp(28px,6vh,80px) clamp(24px,5vw,64px)}

#p-cov{grid-column:1;grid-row:1;position:relative;width:280px;height:280px}
#p-covph{position:absolute;inset:0;border-radius:20px;overflow:hidden;
display:grid;place-items:center;font-size:104px;font-weight:700;line-height:1;
letter-spacing:-.05em;color:rgba(255,255,255,.95);
text-shadow:0 8px 40px rgba(0,0,0,.6);
background:radial-gradient(72% 72% at 26% 18%,color-mix(in oklab,var(--brand) 80%,#fff) 0%,transparent 62%),
linear-gradient(156deg,color-mix(in oklab,var(--brand) 50%,#171a21) 0%,#0a0c11 76%);
box-shadow:0 34px 70px -22px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.07);
transform:scale(calc(1 + var(--bass)*.012));transition:transform .1s linear}
#p-covimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
border-radius:20px;display:block;opacity:0;transition:opacity .5s ease;
box-shadow:0 34px 70px -22px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.07)}
#p-covimg.on{opacity:1}
#p-ring{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);
pointer-events:none;opacity:0;transition:opacity .5s ease;
filter:drop-shadow(0 0 8px color-mix(in oklab,var(--brand) 55%,transparent))}
#p-ring.on{opacity:1}

#p-info{grid-column:2;grid-row:1;display:flex;flex-direction:column;
justify-content:center;min-width:0;max-height:280px}
#p-name{font-size:26px;font-weight:700;line-height:1.28;letter-spacing:-.02em;
color:rgba(255,255,255,.97);display:-webkit-box;-webkit-line-clamp:2;
-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
#p-art{margin-top:5px;font-size:13px;color:rgba(255,255,255,.48);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#p-lrc{flex:none;max-height:150px;margin-top:20px;overflow:hidden;
-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 80%,transparent);
mask-image:linear-gradient(180deg,transparent,#000 18%,#000 80%,transparent)}
#p-lrcin{transition:transform .5s cubic-bezier(.22,1,.36,1)}
#p-lrcin .ln{padding:5px 0;font-size:17px;font-weight:600;line-height:1.5;
color:rgba(255,255,255,.28);transition:color .3s,font-size .3s,text-shadow .3s;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#p-lrcin .ln.on{color:#fff;font-size:19px;
text-shadow:0 0 28px color-mix(in oklab,var(--brand) 70%,transparent)}
#p-lrcin .empty{padding:16px 0;font-size:12px;color:rgba(255,255,255,.24);
letter-spacing:.16em;text-transform:uppercase}
#p-lrc.no-lrc{flex:none;height:auto;margin-top:14px;overflow:visible;
-webkit-mask-image:none;mask-image:none}

#p-wave{grid-column:1/-1;grid-row:2;position:relative;width:100%;height:52px;cursor:pointer}
#p-wv1,#p-wv2{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#p-wv2{clip-path:inset(0 100% 0 0);will-change:clip-path;
filter:drop-shadow(0 0 5px color-mix(in oklab,var(--brand) 70%,transparent))}
#p-hit{position:absolute;inset:0;z-index:2;cursor:pointer}

#p-bottom{grid-column:1/-1;grid-row:3;display:flex;align-items:center;gap:24px;width:100%}
#p-time{font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.03em;
color:rgba(255,255,255,.42);white-space:nowrap}
#p-ctl{display:flex;align-items:center;gap:12px;flex:1;justify-content:center}
#p-ctl button{border:0;cursor:pointer;display:grid;place-items:center;
background:rgba(255,255,255,.08);color:rgba(255,255,255,.86);font:inherit;font-size:13px;
transition:background .18s,transform .18s,color .18s}
#p-ctl button:hover{background:rgba(255,255,255,.16);transform:translateY(-1px);color:#fff}
#p-prev,#p-next{width:42px;height:42px;padding:0;border-radius:50%}
#p-play{width:58px;height:58px;padding:0;border-radius:50%;
background:rgba(255,255,255,.96);color:#0a0b0d;font-size:17px;
box-shadow:0 14px 34px -10px rgba(0,0,0,.9)}
#p-play:hover{background:#fff;transform:scale(1.04) translateY(-1px)}
#p-queue,#p-lyrbtn,#p-abbtn,#p-simbtn,#p-eqbtn,#p-artbtn,#p-sleep{
padding:10px 15px;border-radius:999px;font-size:13px}
#p-abbtn.act,#p-eqbtn.act{background:color-mix(in oklab,var(--brand) 60%,transparent);color:#fff}
#p-meta{font-size:11px;color:rgba(255,255,255,.38);
font-variant-numeric:tabular-nums;white-space:nowrap}
#p-count{font-size:11px;color:rgba(255,255,255,.38);
font-variant-numeric:tabular-nums;letter-spacing:.04em}

#p-vol{display:flex;align-items:center;gap:7px;padding:0 4px}
#p-mute{width:30px;height:30px;padding:0;border:0;border-radius:50%;
background:rgba(255,255,255,.07);color:rgba(255,255,255,.75);
display:grid;place-items:center;cursor:pointer;transition:background .18s}
#p-mute:hover{background:rgba(255,255,255,.16);color:#fff}
#p-volin{-webkit-appearance:none;appearance:none;width:76px;height:3px;
border-radius:2px;outline:0;cursor:pointer;
background:linear-gradient(90deg,rgba(255,255,255,.8) var(--v,100%),
rgba(255,255,255,.16) var(--v,100%))}
#p-volin::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;
border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.12)}

#p-x{position:absolute;top:20px;right:20px;z-index:6;width:38px;height:38px;
border:0;border-radius:50%;background:rgba(255,255,255,.09);color:#fff;font-size:13px;
display:grid;place-items:center;cursor:pointer;transition:background .18s,transform .18s}
#p-x:hover{background:rgba(255,255,255,.2);transform:scale(1.06)}
#p.lyr-open #p-x{opacity:0;pointer-events:none}

#p-panel{position:absolute;top:0;right:0;bottom:0;width:min(370px,88vw);z-index:4;
display:flex;flex-direction:column;background:rgba(9,10,14,.92);
backdrop-filter:blur(26px) saturate(1.3);border-left:1px solid rgba(255,255,255,.06);
transform:translateX(101%);transition:transform .46s cubic-bezier(.22,1,.36,1)}
#p-panel.on{transform:none}
#p-ph{display:flex;align-items:center;justify-content:space-between;
padding:20px 18px 12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:rgba(255,255,255,.4)}
#p-pclose{border:0;background:0;color:rgba(255,255,255,.5);font-size:15px;cursor:pointer}
#p-plist{flex:1;overflow-y:auto;padding:4px 8px 14px}
#p-plist::-webkit-scrollbar{width:5px}
#p-plist::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:3px}
#p-plist .row{display:flex;align-items:center;gap:11px;padding:10px 11px;
border-radius:9px;cursor:pointer;transition:background .16s}
#p-plist .row:hover{background:rgba(255,255,255,.05)}
#p-plist .row.on{background:rgba(255,255,255,.1)}
#p-plist .idx{width:18px;flex:none;text-align:center;font-size:11px;
color:rgba(255,255,255,.32);font-variant-numeric:tabular-nums}
#p-plist .row.on .idx{color:var(--brand);filter:brightness(1.7)}
#p-plist .txt{flex:1;min-width:0}
#p-plist .n{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.84);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#p-plist .row.on .n{color:#fff}
#p-plist .a{font-size:11px;color:rgba(255,255,255,.34);margin-top:1px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#p-peekTip{position:absolute;top:-24px;transform:translateX(-50%);
padding:3px 9px;border-radius:6px;background:rgba(14,16,22,.96);color:#fff;
font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;
opacity:0;pointer-events:none;transition:opacity .12s;z-index:6;
box-shadow:0 6px 18px rgba(0,0,0,.7)}
#p-wave.peeking #p-peekTip{color:var(--brand);font-weight:600}
#p-abSel{position:absolute;top:0;bottom:0;left:0;width:0;
background:color-mix(in oklab,var(--brand) 32%,transparent);
border-left:2px solid var(--brand);border-right:2px solid var(--brand);
border-radius:3px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:1}

#p-lyrSheet{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;
background:rgba(8,9,13,.96);backdrop-filter:blur(26px) saturate(1.3);
transform:translateY(100%);transition:transform .42s cubic-bezier(.22,1,.36,1);
will-change:transform}
#p-lyrSheet.on{transform:none}
.ls-handle{width:42px;height:4px;margin:14px auto 8px;border-radius:2px;
background:rgba(255,255,255,.22);flex:none;cursor:pointer}
.ls-body{flex:1;overflow:hidden;padding:0 28px 28px;display:flex;
flex-direction:column;justify-content:center;gap:4px;
transition:transform .45s cubic-bezier(.22,1,.36,1);
-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
.ls-body .ln{padding:8px 0;font-size:20px;font-weight:600;line-height:1.45;
color:rgba(255,255,255,.26);text-align:center;transition:color .3s,font-size .3s;
cursor:pointer;white-space:normal}
.ls-body .ln.on{color:#fff;font-size:23px;
text-shadow:0 0 32px color-mix(in oklab,var(--brand) 70%,transparent)}
.ls-empty{text-align:center;font-size:13px;color:rgba(255,255,255,.3);padding:40px 0}

@media (max-width:760px){
#p-wrap{grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto;
justify-items:center;gap:18px;padding:22px 20px 28px}
#p-cov{grid-column:1;grid-row:1;width:min(46vw,180px);height:auto;aspect-ratio:1}
#p-covph{font-size:72px}
#p-ring{inset:-16px;width:calc(100% + 32px);height:calc(100% + 32px)}
#p-info{grid-column:1;grid-row:2;text-align:center;align-items:center;
width:100%;max-height:none}
#p-name{font-size:19px}
#p-lrc{grid-column:1;grid-row:1;position:absolute;left:0;right:0;bottom:190px;
width:100%;text-align:center;margin:0;max-height:110px}
#p-lrcin .ln{white-space:normal;font-size:15px}
#p-lrcin .ln.on{font-size:16px}
#p-wave{grid-column:1;grid-row:3;height:38px;align-self:end;width:100%}
#p-bottom{grid-column:1;grid-row:4;flex-direction:column;gap:12px;width:100%}
#p-ctl{gap:8px;flex-wrap:wrap}
#p-ctl button{padding:8px 11px;font-size:12px}
#p-play{width:48px;height:48px}
#p-vol,#p-meta{display:none}
#p-panel,#p-eqPanel,#p-artPanel{width:100%}
.ls-body .ln{font-size:17px}
.ls-body .ln.on{font-size:19px}}

@media (prefers-reduced-motion:reduce){
#p-glow{transform:none;opacity:.16}
#p-bg{transform:none}
#p-art{animation:none}
#p-lrcin,#p-panel,#p-eqPanel,#p-artPanel,#p-lyrSheet{transition:none}}