body.focus .rail,body.focus .mini,body.focus .quick,body.focus .foot,body.focus .side,body.focus .top .kicker,body.focus .disc{display:none}
body.focus.fx-open .side{display:grid;position:fixed;left:50%;bottom:24px;translate:-50% 0;width:min(420px,92vw);z-index:8;animation:pop .35s var(--ease)}
body.focus .side .fx{max-height:68vh;overflow:auto}
body.focus .view{padding-top:18px;padding-bottom:18px}
body.focus .deck{grid-template-columns:minmax(0,min(720px,100%))}
body.focus #fxBtn{display:grid;place-items:center}
body.focus .card{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"art info" "seek seek" "ctrl ctrl";column-gap:clamp(18px,3vw,28px);row-gap:18px;padding:clamp(18px,3vw,28px);border-radius:24px;border:1px solid var(--line);background:linear-gradient(to top,rgb(var(--accent-rgb)/.34),transparent 46%),var(--panel);box-shadow:0 24px 60px -34px rgb(var(--accent-rgb)/.7)}
body.focus .card::after{content:"";position:absolute;left:14%;right:14%;bottom:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent-hi),transparent)}
body.focus .sleeve{grid-area:art;justify-self:start;width:clamp(88px,min(20vw,24dvh),148px);margin:0}
body.focus .art{border-radius:12px;box-shadow:none}
body.focus .art::after{display:none}
body.focus .info{grid-area:info;align-self:center;padding-right:84px}
body.focus h1{font-size:clamp(22px,3.6vw,34px);font-weight:600;letter-spacing:-.025em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.focus .artist{font-size:clamp(14px,1.8vw,17px);margin-top:2px}
body.focus .top{position:absolute;top:14px;right:14px;z-index:3}
body.focus .round{width:36px;height:36px;font-size:18px;background:none;color:var(--mute)}
body.focus .round:hover{color:#fff;background:#181818;transform:none}
body.focus .seek{grid-area:seek;grid-template-columns:1fr 1fr;grid-template-areas:"bar bar" "cur dur";row-gap:2px}
body.focus #seek{grid-area:bar}
body.focus #cur{grid-area:cur}
body.focus #dur{grid-area:dur;justify-self:end}
body.focus #seek::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,var(--accent-hi) var(--p,0%),#262626 0)}
body.focus #seek::-moz-range-track{height:3px;background:linear-gradient(90deg,var(--accent-hi) var(--p,0%),#262626 0)}
body.focus #seek::-webkit-slider-thumb{width:0;height:0;margin-top:0;transition:width .2s,height .2s,margin .2s}
body.focus #seek:hover::-webkit-slider-thumb{width:12px;height:12px;margin-top:-4.5px}
body.focus #seek::-moz-range-thumb{width:0;height:0}
body.focus #seek:hover::-moz-range-thumb{width:12px;height:12px}
body.focus .ctrl{grid-area:ctrl;justify-content:center;gap:clamp(10px,3vw,28px)}
body.focus .ctrl .big{width:60px;height:60px;font-size:28px;background:var(--accent);color:var(--on-accent);box-shadow:none;margin:0}
body.focus .ctrl .big:hover{background:var(--accent-hi)}