:root{--ink:#2a3946;--soft:#2a39468c}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{overscroll-behavior:none;background:#eef5fa;height:100%;overflow:hidden}body{color:var(--ink);-webkit-font-smoothing:antialiased;font-family:ui-sans-serif,system-ui,-apple-system,Helvetica Neue,Arial,sans-serif;font-weight:300}#bg{position:fixed;inset:0}#bg canvas{display:block;width:100%!important;height:100%!important}#stage{padding:env(safe-area-inset-top) 24px env(safe-area-inset-bottom);flex-direction:column;justify-content:center;align-items:center;gap:clamp(22px,4.5vh,44px);display:flex;position:fixed;inset:0}#cover{cursor:pointer;aspect-ratio:1;opacity:0;background:0 0;border:0;width:min(68vw,44vh,460px);padding:0;transition:opacity 1.6s,transform 1.2s cubic-bezier(.2,.7,.2,1);display:block;position:relative}body.ready #cover{opacity:1}#cover img{object-fit:cover;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;display:block}body.playing #cover{transform:scale(1.015)}#cover:focus-visible{outline:1px solid var(--ink);outline-offset:6px}#meta{opacity:0;flex-direction:column;gap:12px;width:min(68vw,44vh,460px);transition:opacity 2s .4s;display:flex}body.ready #meta{opacity:1}#album{letter-spacing:.28em;text-transform:uppercase;color:var(--soft);font-size:11px}#now{letter-spacing:.04em;align-items:baseline;gap:.9em;min-height:1.4em;font-size:15px;display:flex}#num{color:var(--soft);font-variant-numeric:tabular-nums;min-width:1.4em}#title{transition:opacity .9s}#title.out{opacity:0}#line{background:#2a394633;height:1px;position:relative}#fill{background:var(--ink);width:0;height:2px;position:absolute;top:-.5px;left:0}#clock{letter-spacing:.14em;color:var(--soft);font-variant-numeric:tabular-nums;justify-content:space-between;font-size:11px;display:flex}@media (prefers-reduced-motion:reduce){#cover{transition:opacity 1s}}
