@font-face{font-family:Roobert;src:url(../fonts/roobert.woff2)format("woff2"),url(../fonts/roobert.woff)format("woff");font-display:swap}:root{--fg:#fff;--dim:#ffffff80;--gutter:clamp(16px, 2.2vw, 32px);--top:max(var(--gutter), env(safe-area-inset-top));--right:max(var(--gutter), env(safe-area-inset-right));--bottom:max(var(--gutter), env(safe-area-inset-bottom));--left:max(var(--gutter), env(safe-area-inset-left));--badge:137px}*{box-sizing:border-box;margin:0;padding:0}html,body{overscroll-behavior:none;height:100%;color:var(--fg);letter-spacing:.04em;text-transform:uppercase;-webkit-font-smoothing:antialiased;background:#000;font:11px/1.3 Roobert,system-ui,sans-serif;overflow:hidden}.canvas{touch-action:none;width:100%;height:100%;position:fixed;inset:0}.app{z-index:1;pointer-events:none;position:fixed;inset:0}.now{z-index:1;mix-blend-mode:difference;pointer-events:none;left:var(--left);right:var(--right);bottom:var(--bottom);justify-content:center;gap:1.2em;transition:opacity .4s;display:flex;position:fixed}.now .count{color:var(--dim);font-variant-numeric:tabular-nums}.now .artist{color:var(--dim)}.now:empty,.now.off{opacity:0}.listen{top:var(--top);font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--fg);cursor:pointer;pointer-events:auto;background:0 0;border:0;padding:.6em 1em;transition:opacity .4s;position:absolute;left:50%;transform:translate(-50%)}.listen[hidden]{opacity:0;pointer-events:none;display:block}.about{top:var(--top);right:var(--right);z-index:4;mix-blend-mode:difference;pointer-events:none;position:fixed}.info{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--fg);cursor:pointer;pointer-events:auto;background:0 0;border:0;padding:.6em 0}.credits{width:min(100vw, calc(28em + var(--left) + var(--right)));z-index:3;max-height:100%;padding:calc(var(--top) + 4em) var(--right) var(--bottom) var(--left);overscroll-behavior:contain;color:var(--dim);clip-path:inset(0);background:#000;align-content:start;gap:.8em;transition:clip-path .6s cubic-bezier(.77,0,.175,1),visibility;display:grid;position:fixed;top:0;right:0;overflow-y:auto}.credits p{max-width:28em}.credits[hidden]{clip-path:inset(0 0 100% 100%);visibility:hidden;transition:clip-path .6s cubic-bezier(.77,0,.175,1),visibility 0s .6s;display:grid}@media (prefers-reduced-motion:reduce){.credits,.credits[hidden]{transition:none}}.badge{right:var(--right);bottom:var(--bottom);z-index:2;line-height:0;position:fixed}.badge[hidden]{display:none}.badge img{width:auto;height:40px}.credits a{color:var(--fg);text-decoration:none}.credits .apple{gap:.8em;display:grid}.credits .apple[hidden]{display:none}.sign-out{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--fg);cursor:pointer;background:0 0;border:0}.sign-out[hidden]{display:none}@media (width<=640px){html,body{font-size:12px}.listen{left:var(--left);padding:1em 0;transform:none}.info{padding:1em 0}.now{right:calc(var(--right) + var(--badge) + 16px);flex-direction:column;align-items:flex-start;gap:.35em}.now .song{flex-direction:column;gap:.35em;display:flex}}