.card{--accent:var(--track-accent,var(--coral));--disc:248px;--pad:24px;grid-template-columns:var(--disc) minmax(0, 1fr);padding:var(--pad);color:var(--color-bone);text-align:left;isolation:isolate;-webkit-tap-highlight-color:transparent;background:#0c0a09;border:1px solid #ffffff14;border-radius:24px;align-items:center;gap:32px;display:grid;position:relative;container-type:inline-size}.card:before{content:"";z-index:-1;left:calc(var(--pad) + var(--disc) / 2);width:calc(var(--disc) * 1.5);aspect-ratio:1;background:radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--lilac) 14%, transparent) 45%, transparent 70%);opacity:.25;pointer-events:none;border-radius:50%;transition:opacity .8s,scale .8s;position:absolute;top:50%;translate:-50% -50%;scale:.85}.card.is-playing:before{opacity:.9;scale:1}.mask{width:var(--disc);aspect-ratio:1;clip-path:circle(50%);cursor:zoom-in;background:var(--color-surface);z-index:2;border-radius:50%;outline:none;transition:transform .7s cubic-bezier(.2,.9,.2,1),filter .4s;position:relative;transform:translateZ(0)scale(1)}.mask:focus-visible{clip-path:none;box-shadow:0 0 0 3px var(--fg)}.mask:after{content:"";mix-blend-mode:screen;pointer-events:none;background:conic-gradient(from 210deg,#0000 0deg,#ffffff29 30deg,#0000 70deg 180deg,#ffffff1a 215deg,#0000 250deg),radial-gradient(circle,#0000 60%,#00000073 100%);border-radius:50%;position:absolute;inset:0}.mask.is-zoomed{cursor:zoom-out}.card.is-zoomed .mask{transform:translateZ(0)scale(1.22)}.spin{will-change:transform;position:absolute;inset:0}.spin:after{content:"";pointer-events:none;background:repeating-radial-gradient(circle,#0000 0 2px,#00000029 2px 3px);border-radius:50%;position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle,#0000 23%,#000 24% 70%,#0000 71%);mask-image:radial-gradient(circle,#0000 23%,#000 24% 70%,#0000 71%)}.cover{object-fit:cover;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;border-radius:50%;width:100%;height:100%;position:absolute;inset:0}.cover-enter{animation:.72s cubic-bezier(.2,.9,.2,1) both sg-cover-in}.cover-exit{animation:.72s both sg-cover-out}@keyframes sg-cover-in{0%{opacity:0;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@keyframes sg-cover-out{to{opacity:0;transform:scale(.92)}}.hole{aspect-ratio:1;background:radial-gradient(circle, var(--color-surface) 0%, var(--color-ink) 70%);pointer-events:none;z-index:1;border-radius:50%;place-items:center;width:24%;display:grid;position:absolute;top:50%;left:50%;translate:-50% -50%;box-shadow:0 0 0 1px #ffffff59,0 0 0 6px #0c0a09b3}.hole-inner{aspect-ratio:1;background:var(--color-bone);border-radius:50%;width:26%;box-shadow:inset 0 1px 2px #0009}.info{flex-direction:column;gap:14px;min-width:0;transition:opacity .5s,transform .7s cubic-bezier(.2,.9,.2,1);display:flex;position:relative}.card.is-zoomed .info{opacity:.3;transform:translate(28px)}.scales{opacity:.5;pointer-events:none;width:58px;height:auto;transition:opacity .6s;position:absolute;top:-4px;right:0;overflow:visible}.card.is-playing .scales{opacity:1}.scales circle{fill:var(--accent);will-change:transform}.scales>g:nth-of-type(odd) circle{fill:var(--lilac)}.scales>g:nth-of-type(3n) circle{fill:var(--amber)}.track-info{min-height:68px;padding-right:76px;position:relative}.ti-layer{flex-direction:column;gap:4px;display:flex}.ti-abs{pointer-events:none;position:absolute;inset:0 76px 0 0}.artist{color:var(--color-mute);white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:13px;overflow:hidden}.track{font-family:var(--font-display);letter-spacing:-.02em;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:clamp(1.4rem,5.4cqi,2.2rem);font-weight:700;line-height:1.05;overflow:hidden}.ti-enter{animation:.6s cubic-bezier(.2,.9,.2,1) both sg-ti-in}.track.ti-enter{animation-delay:60ms}.ti-exit{animation:.42s both sg-ti-out}@keyframes sg-ti-in{0%{opacity:0;transform:translateX(var(--dx,14px))}to{opacity:1;transform:none}}@keyframes sg-ti-out{to{opacity:0;transform:translateX(var(--dx,-14px))}}.bar{cursor:pointer;touch-action:none;background:#ffffff1f;border-radius:99px;outline:none;height:3px;position:relative}.bar:before{content:"";position:absolute;inset:-10px 0}.bar:focus-visible{box-shadow:0 0 0 2px var(--color-ink), 0 0 0 4px var(--coral)}.bar-fill{border-radius:inherit;background:var(--grad);height:100%;box-shadow:0 0 12px -2px rgb(var(--coral-rgb) / .6);transition:width .25s linear;position:relative}.bar-fill:after{content:"";background:var(--color-bone);border-radius:50%;width:10px;height:10px;transition:scale .25s;position:absolute;top:50%;right:-5px;translate:0 -50%;scale:0}.bar:hover .bar-fill:after,.bar:focus-visible .bar-fill:after,.card.is-playing .bar-fill:after{scale:1}.time{color:var(--color-mute);font-variant-numeric:tabular-nums;gap:6px;margin-top:-6px;font-size:12px;display:flex}.time .sep{opacity:.5}.controls{align-items:center;gap:8px;display:flex}.ctrl{color:#e7e5e4;cursor:pointer;background:#d6d3d11f;border:none;border-radius:50%;place-items:center;width:40px;height:40px;transition:transform .2s,background-color .2s,border-color .2s,color .2s,box-shadow .3s;display:grid;position:relative}.ctrl:hover{background:#d6d3d133}.ctrl:active{transform:scale(.9)}.ctrl:focus-visible{outline:2px solid var(--fg);outline-offset:2px}.ctrl-play{background:var(--coral);color:#0c0a09;width:56px;height:56px;box-shadow:0 8px 22px -8px rgb(var(--coral-rgb) / .8);border:none;margin:0 4px}.ctrl-play:hover{background:var(--amber)}.ctrl-toggle{color:#a8a29e;background:0 0}.ctrl-toggle.is-active{color:var(--coral);background:rgb(var(--coral-rgb) / .14)}.ctrl-loop .loop-one{background:var(--amber);color:#0c0a09;width:13px;height:13px;font:700 8px/1 var(--font-sans);border-radius:50%;place-items:center;transition:scale .25s cubic-bezier(.3,1.6,.5,1);display:grid;position:absolute;top:3px;right:3px;scale:0}.ctrl-loop.mode-one .loop-one{scale:1}@media (max-width:720px){.card{--disc:min(64vw, 240px);--pad:20px;grid-template-columns:1fr;justify-items:center;gap:24px}.card:before{left:50%;top:calc(var(--pad) + var(--disc) / 2)}.info{width:100%}.card.is-zoomed .info{transform:translateY(24px)}.controls{justify-content:center}}.dock{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;pointer-events:none;transition:transform .7s cubic-bezier(.2,.9,.2,1);position:fixed;transform:translateY(calc(100% + 24px))}.dock.is-visible{transform:none}.dock.is-visible .card{pointer-events:auto}.dock-expand{color:#e7e5e4;cursor:pointer;background:#d6d3d11f;border:none;border-radius:50%;place-items:center;width:36px;height:36px;transition:background-color .2s;display:grid;position:absolute;top:50%;right:12px;translate:0 -50%}.dock-expand:hover{background:#d6d3d133}.dock-expand:focus-visible{outline:2px solid var(--coral);outline-offset:2px}.card.card--dock{--disc:52px;--pad:10px;grid-template-columns:var(--disc) minmax(0, 1fr);border-color:color-mix(in srgb, var(--accent) 35%, transparent);max-width:1120px;box-shadow:0 18px 40px -18px color-mix(in srgb, var(--accent) 60%, transparent), 0 10px 30px #00000080;background:#0c0a09;border-radius:9999px;justify-items:stretch;gap:14px;margin:0 auto;padding:10px 64px 10px 10px}.card--dock:before{width:160px;left:36px}.card--dock .mask{cursor:pointer}.card--dock.is-zoomed .mask{transform:scale(1.12)}.card--dock .hole{box-shadow:0 0 0 1px #fff6}.card--dock .info{grid-template-columns:minmax(0,1.2fr) minmax(100px,2fr) auto auto;grid-template-areas:"ti bar time ctrls";align-items:center;gap:18px;width:auto;display:grid}.card--dock.is-zoomed .info{opacity:1;transform:none}.card--dock .scales{display:none}.card--dock .track-info{grid-area:ti;min-height:38px;padding-right:0}.card--dock .ti-abs{inset:0}.card--dock .ti-layer{gap:2px}.card--dock .artist{font-size:12px}.card--dock .track{font-family:var(--font-sans);letter-spacing:0;font-size:15px;font-weight:500}.card--dock .bar{grid-area:bar}.card--dock .time{grid-area:time;margin:0}.card--dock .controls{grid-area:ctrls;justify-content:flex-end;gap:4px}.card--dock .ctrl{width:34px;height:34px}.card--dock .ctrl-play{width:44px;height:44px}@media (max-width:860px){.card.card--dock{border-radius:22px}.card--dock .info{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ti ctrls""bar bar";row-gap:8px}.card--dock .time,.card--dock .controls .ctrl:first-child,.card--dock .controls .ctrl:nth-child(5){display:none}.card--dock .bar{height:4px}}@media (max-width:480px){.card--dock .controls .ctrl:nth-child(2){display:none}}.card.card--expanded{--disc:230px;--pad:22px;max-width:360px;padding:var(--pad);background:#0c0a09;border-radius:24px;grid-template-columns:1fr;justify-items:center;gap:22px;margin-left:auto;animation:.5s cubic-bezier(.2,.9,.2,1) both sg-pop}.card--expanded:before{left:50%;top:calc(var(--pad) + var(--disc) / 2)}.card--expanded .info{width:100%}.card--expanded.is-zoomed .info{transform:translateY(24px)}.card--expanded .controls{justify-content:center}.card--expanded .dock-expand{z-index:3;top:14px;right:14px;translate:none}@keyframes sg-pop{0%{opacity:0;transform:translateY(24px)scale(.96)}}@media (pointer:coarse){.ctrl,.card--dock .ctrl{width:44px;height:44px}.card--dock .ctrl-play{width:48px;height:48px}.dock-expand{width:44px;height:44px}}.dock-handle{display:none}@media (max-width:767px){.dock.is-expanded{pointer-events:auto;padding:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));touch-action:none;background:#1c1917;align-items:stretch;display:flex;inset:0}.dock.is-expanded .card.card--expanded{--disc:min(72vw, 42svh, 320px);border-radius:24px;align-content:center;width:100%;max-width:none;margin:0;padding-top:44px}.dock.is-expanded .dock-handle{cursor:grab;touch-action:none;height:44px;display:block;position:absolute;top:0;left:0;right:0}.dock.is-expanded .dock-handle:after{content:"";background:rgb(var(--bone-rgb) / .3);border-radius:99px;width:44px;height:5px;position:absolute;top:14px;left:50%;translate:-50%}}@media (prefers-reduced-motion:reduce){.cover-enter,.cover-exit,.ti-enter,.ti-exit,.card--expanded{animation-duration:.01ms!important;animation-delay:0s!important}.mask,.info,.dock{transition-duration:.01ms!important}}