:root{--bg:#000;--fg:#fff;--muted:#555;--accent-theme:#fff;--hover:#111;--active:#1a1a1a;--border:#222;--progress-bg:#222;--progress-fill:#fff;--player-bg:#0a0a0a;--site-name-color:rgba(255,255,255,.28);--accent:var(--accent-theme);--accent-soft:var(--muted);--player-bar-height:84px}:root[data-theme=light]{--bg:#fff;--fg:#000;--muted:#888;--accent-theme:#000;--hover:#f0f0f0;--active:#e8e8e8;--border:#d0d0d0;--progress-bg:#c0c0c0;--progress-fill:#000;--player-bg:#f5f5f5;--site-name-color:rgba(0,0,0,.32)}html,body,#masthead,#player-bar,.tile,.btn,.btn-play,.time,.player-track-name,.site-name,.tile-label{transition:background-color .4s,color .4s,border-color .4s}*{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);color:var(--fg);font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}:focus-visible{outline:1px solid var(--fg);outline-offset:2px}#ambient{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0;transition:opacity .6s}#ambient.active{opacity:1}.ambient-cover{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;filter:blur(60px) saturate(1.4);transform:scale(1.3);opacity:0;transition:opacity .6s;will-change:opacity}.ambient-blobs{position:absolute;top:0;right:0;bottom:0;left:0;will-change:opacity;transform:translateZ(0)}.ambient-scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:#0000008c}#masthead{padding-block:40px 16px;display:flex;flex-direction:column;align-items:center}.logo{width:clamp(150px,20vw,220px);aspect-ratio:880.64 / 491.52;transform-origin:center;will-change:transform;display:block;transition:transform 60ms ease-out}@keyframes heartbeat{0%{transform:scale(1)}14%{transform:scale(1.05)}28%{transform:scale(1)}42%{transform:scale(1.08)}70%{transform:scale(1)}}.logo-idle{animation:heartbeat 4s ease-in-out infinite}.site-name{margin:16px 0 0;font-size:9px;font-weight:400;letter-spacing:.55em;padding-left:.55em;text-transform:uppercase;color:var(--site-name-color)}main{max-width:1080px;margin-inline:auto;padding-inline:24px;padding-bottom:calc(var(--player-bar-height) + 32px + env(safe-area-inset-bottom))}#grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;grid-auto-flow:row}.grid-empty{grid-column:1 / -1;padding:48px 0;text-align:center;font-size:13px;color:var(--muted);letter-spacing:.05em}.tile{position:relative;aspect-ratio:1;border-radius:3px;overflow:hidden;padding:0;border:1px solid var(--border);background:var(--border);cursor:pointer;user-select:none;-webkit-user-select:none;font:inherit;color:inherit}.tile-cover{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}.tile-cover.loaded{opacity:1}.tile:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#00000059;opacity:0;transition:opacity .15s;pointer-events:none;z-index:1}.tile:before{content:"▶";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:28px;color:#fff;opacity:0;transition:opacity .15s;pointer-events:none;z-index:2}@media (hover: hover){.tile:not(.playing):hover:after,.tile:not(.playing):hover:before,.tile:not(.playing):hover .tile-label{opacity:1}}.tile:not(.playing):focus-visible:after,.tile:not(.playing):focus-visible:before,.tile:not(.playing):focus-visible .tile-label{opacity:1}.tile-label{position:absolute;left:0;right:0;bottom:0;padding:8px 32px 8px 10px;font-size:12px;text-transform:capitalize;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;background:linear-gradient(transparent,#000000a6);opacity:0;transition:opacity .15s;z-index:3}.tile.playing .tile-label{opacity:1}.tile.no-cover .tile-label{top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:10px;white-space:normal;background:none;color:var(--fg);opacity:1}.tile.playing{grid-column:span 2;grid-row:span 2}#grid.has-playing .tile:not(.playing){opacity:.75;filter:saturate(.6)}.tile-eq{position:absolute;right:10px;bottom:10px;display:none;align-items:flex-end;gap:2px;height:16px;z-index:3;pointer-events:none}.tile.playing .tile-eq{display:flex}@keyframes eqbar{0%{transform:scaleY(.3)}to{transform:scaleY(1)}}.tile-eq i{width:3px;background:var(--accent);transform-origin:bottom;animation:eqbar ease-in-out alternate infinite}.tile-eq i:nth-child(1){height:12px;animation-duration:.5s}.tile-eq i:nth-child(2){height:16px;animation-duration:.7s}.tile-eq i:nth-child(3){height:9px;animation-duration:.4s}.tile-eq i:nth-child(4){height:14px;animation-duration:.6s}.tile.paused .tile-eq i{animation-play-state:paused}.tile-ring{position:absolute;top:0;right:0;bottom:0;left:0;display:none;z-index:3;pointer-events:none;background:conic-gradient(var(--accent) calc(var(--p, 0) * 1turn),transparent 0);padding:3px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.tile.playing .tile-ring{display:block}#player-bar{position:fixed;inset:auto 0 0 0;background:var(--player-bg);border-top:1px solid var(--border);padding:10px 32px calc(14px + env(safe-area-inset-bottom));z-index:10}.pb-seek-row,.pb-main-row{max-width:1080px;margin-inline:auto;display:flex;align-items:center}.pb-seek-row{gap:12px}.pb-main-row{gap:16px;margin-top:8px}.time{font-size:11px;color:var(--muted);min-width:36px;font-variant-numeric:tabular-nums}#pb-cur{text-align:right}#pb-thumb{width:40px;height:40px;border-radius:3px;object-fit:cover;background:var(--border);flex-shrink:0;cursor:pointer;visibility:hidden}.player-track-name{font-size:13px;letter-spacing:.05em;color:var(--muted);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-track-name.loaded{color:var(--fg)}.pb-transport{display:flex;align-items:center;gap:24px}.btn{background:none;border:none;color:var(--fg);font-size:18px;padding:4px;opacity:.6;cursor:pointer;transition:opacity .15s,background-color .4s,color .4s,border-color .4s}.btn:hover{opacity:1}.btn:disabled{opacity:.2;cursor:default}.btn-play{width:40px;height:40px;padding:0;border:1px solid var(--border);border-radius:50%;font-size:14px;opacity:1;display:grid;place-items:center;transition:opacity .15s,border-color .15s,background-color .4s,color .4s}.btn-play:hover{border-color:var(--fg);opacity:1}.btn-play:disabled{border-color:var(--border)}.pb-vol{display:flex;align-items:center;gap:8px}.vol-icon{font-size:12px;color:var(--muted)}input[type=range]{-moz-appearance:none;appearance:none;-webkit-appearance:none;height:22px;background:linear-gradient(var(--progress-bg) 0 0) left center / 100% 2px no-repeat;margin:0;cursor:pointer}input[type=range]:disabled{cursor:default}#pb-seek{flex:1;min-width:0;background:linear-gradient(var(--accent) 0 0) left center / var(--fill, 0%) 2px no-repeat,linear-gradient(var(--progress-bg) 0 0) left center / 100% 2px no-repeat}#pb-volume{width:80px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:50%}input[type=range]::-moz-range-thumb{border:none;border-radius:50%}#pb-seek::-webkit-slider-thumb{width:12px;height:12px;background:var(--accent)}#pb-seek::-moz-range-thumb{width:12px;height:12px;background:var(--accent)}#pb-volume::-webkit-slider-thumb{width:10px;height:10px;background:var(--fg)}#pb-volume::-moz-range-thumb{width:10px;height:10px;background:var(--fg)}@media (max-width: 640px){#grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tile.playing{grid-column:1 / -1;grid-row:auto}}@media (max-width: 520px){:root{--player-bar-height: 112px}.pb-vol{display:none}#player-bar{padding-inline:16px}main{padding-inline:16px}.btn{min-width:44px;min-height:44px}.btn-play{width:44px;height:44px}.pb-transport{gap:8px}}@media (prefers-reduced-motion: reduce){.logo-idle{animation:none}.tile-eq i{animation:none;transform:scaleY(.6)}}