:root{color-scheme:dark;--accent:#b7a1f1;--radius:28px;--glass:rgba(255,255,255,.065)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{background:#0b0b13;color:#faf8ff;font-family:Inter,system-ui,-apple-system,sans-serif}
#ambience{position:absolute;inset:-8%;background:radial-gradient(ellipse at 20% 40%,#493d6f,transparent 70%),#151321;background-size:cover;background-position:center;filter:blur(80px) brightness(.42);transform:scale(1.08)}
body:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 60%);pointer-events:none}
header,footer,main{position:relative;z-index:2}header{position:absolute;top:5vh;left:5vw;right:5vw;display:flex;align-items:center;justify-content:space-between;gap:3vw}
.brand{font-size:clamp(24px,3vw,58px);font-weight:800;letter-spacing:-.08em;color:var(--accent)}.brand-name{font-size:.6em;letter-spacing:.08em;margin-left:.7em;color:#fff;font-weight:500}
#status{font-size:clamp(12px,1.2vw,24px);color:#ffffff99}#presentation{height:100%;padding:15vh 8vw 12vh;display:flex;gap:8vw;align-items:center;justify-content:center}
#record{width:min(41vw,54vh);flex:none;text-align:center}.cover-frame{width:100%;aspect-ratio:1;position:relative;border-radius:var(--radius);overflow:hidden;background:var(--glass);box-shadow:0 24px 90px #0005;border:1px solid #ffffff20}
#cover{width:100%;height:100%;object-fit:contain;display:none}#placeholder{height:100%;display:grid;place-content:center;font-size:22vh;font-weight:700;color:var(--accent)}
.metadata{margin-top:2.5vh}h1,p{margin:0}h1{font-size:clamp(18px,2.1vw,48px);font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#artist{font-size:clamp(14px,1.45vw,32px);color:#ffffffa8;margin-top:.6vh;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timeline{margin-top:2.4vh}progress{appearance:none;width:100%;height:5px;border:0;border-radius:9px;overflow:hidden;background:#ffffff25}progress::-webkit-progress-bar{background:#ffffff25}progress::-webkit-progress-value{background:var(--accent);border-radius:9px}.timeline>div{display:flex;justify-content:space-between;margin-top:.9vh;font-size:clamp(11px,1vw,22px);color:#ffffff80;font-variant-numeric:tabular-nums}
#lyrics{display:none;flex:1;min-width:0;max-width:48vw;line-height:1.25}#lyrics p{overflow-wrap:anywhere}#lyric-current{font-size:clamp(24px,3.4vw,74px);font-weight:700;text-wrap:balance;margin:3vh 0;color:#fff}#lyric-before,#lyric-after{font-size:clamp(18px,2.4vw,52px);font-weight:600;color:#ffffff4d;max-height:18vh;overflow:hidden}
footer{position:absolute;bottom:4vh;left:5vw;right:5vw;text-align:center;font-size:clamp(11px,1vw,22px);color:#ffffff66}
#media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;background:#000}
[data-mode="COVER_LYRICS"] #lyrics{display:block}[data-mode="COVER_LYRICS"] #record{width:min(34vw,49vh);text-align:left}
[data-mode="VIDEO"] #media{opacity:1}[data-mode="VIDEO"] #presentation,[data-mode="VIDEO"] #ambience,[data-mode="VIDEO"] header,[data-mode="VIDEO"] footer{display:none}[data-mode="VIDEO"]:after{display:none}
[data-mode="VIDEO"][data-error="true"] header{display:flex;background:#000c;padding:1rem;border-radius:12px}
[data-material="CLASSIC"] #ambience{opacity:.15}[data-material="CLASSIC"] .cover-frame{border-radius:8px;border:0}
[data-material="APPLE"] .cover-frame{border-radius:12px;border:0}[data-material="APPLE"] #ambience{filter:blur(65px) brightness(.6)}
[data-material="GRADIENT"]{background:linear-gradient(125deg,#22223d,#151021)}[data-material="GRADIENT"] #ambience{opacity:.45}
[data-material="GLOW"] .cover-frame{box-shadow:0 0 100px color-mix(in srgb,var(--accent) 25%,transparent)}
[data-material="AURORA"] #ambience{filter:blur(60px) brightness(.7) saturate(1.5)}
[data-material="LIQUID_GLASS"] .metadata{padding:1.5vh 1vw;border-radius:var(--radius);background:var(--glass);border:1px solid #ffffff15}
[data-solid="true"] .metadata{background:#181820}[data-motion="reduced"] *{transition:none!important}
#preview{position:absolute;z-index:5;bottom:1vh;right:1vw;display:flex;gap:5px}#preview[hidden]{display:none}#preview button,#preview select{background:#20202de6;color:white;border:1px solid #ffffff40;border-radius:8px;padding:8px;cursor:pointer}
@media(max-aspect-ratio:1/1){#presentation{flex-direction:column;gap:4vh;padding-top:12vh}#record,[data-mode="COVER_LYRICS"] #record{width:min(65vw,38vh)}#lyrics{max-width:85vw;text-align:center}#lyric-current{font-size:5vw}#lyric-before,#lyric-after{font-size:3.5vw}}