@font-face{font-family:Bricolage;src:url('fonts/bricolage.woff2') format('woff2');font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@property --accent{syntax:"<color>";inherits:true;initial-value:#e2bdd0}
:root{color-scheme:dark;--bg:#11120f;--surface:#1b1c18;--text:#eeeade;--muted:#999b90;--accent:#e2bdd0;--line:#eeeade12;--fill:0%;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;transition:--accent .65s ease}
*{box-sizing:border-box}
body{margin:0;min-width:300px;min-height:100vh;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}
button{color:inherit;cursor:pointer;transition:background .2s,color .2s,transform .2s}
button:active:not(:disabled){transform:scale(.95)}button:disabled{cursor:default;opacity:.3}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
a{color:inherit}[hidden]{display:none!important}
main{position:relative;max-width:1180px;margin:0 auto;padding:44px 40px 48px;opacity:1;transform:translateY(0);transition:opacity .75s .08s ease,transform .85s .08s cubic-bezier(.22,1,.36,1)}
.starting main{opacity:0;transform:translateY(10px);transition:none}.starting body{overflow:hidden}
.album-backdrop{position:fixed;inset:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1s ease}
.album-backdrop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(80px) saturate(.7) brightness(.65);transform:scale(1.2);opacity:0;transition:opacity .85s ease}
.album-backdrop img.active{opacity:1}.playing .album-backdrop{opacity:.2}
.page-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.wordmark{display:inline-flex;align-items:center;gap:12px;font-family:Bricolage,sans-serif;font-size:30px;font-weight:750;font-stretch:90%;letter-spacing:-1.4px;text-decoration:none;white-space:nowrap}
.brand-name>span{color:var(--accent)}.brand-mark{width:38px;height:38px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.1}.brand-mark path{fill:var(--text);stroke:none}.brand-groove{opacity:.2}
.brand-beatz{--fire:color-mix(in srgb,var(--accent) 72%,#ff9b54);position:relative;display:inline-block;isolation:isolate}
.brand-beatz>span{position:relative;color:var(--fire);text-shadow:0 0 12px color-mix(in srgb,var(--fire) 22%,transparent);animation:brand-heat 5s ease-in-out infinite}
#brand-fire{position:absolute;left:-14px;top:calc(-1em - 14px);width:calc(100% + 28px);height:calc(1em + 40px);pointer-events:none;z-index:-1}
.rain-layer{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;image-rendering:pixelated;opacity:1;transition:opacity 1s ease}
.starting .rain-layer{opacity:0}.weather-resting .brand-beatz>span{animation-play-state:paused}
@keyframes brand-heat{0%,100%{text-shadow:0 0 10px color-mix(in srgb,var(--fire) 18%,transparent)}45%{text-shadow:0 -2px 14px color-mix(in srgb,var(--fire) 30%,transparent),0 1px 3px color-mix(in srgb,var(--fire) 12%,transparent)}}
.header-actions{display:flex;align-items:center;gap:12px}.share-button{display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--line);border-radius:5px;padding:11px 15px;background:#ffffff03;font-size:12px;min-width:98px;min-height:44px}
.share-button:hover{background:#ffffff08;border-color:color-mix(in srgb,var(--accent) 35%,transparent)}.share-button svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;fill:none}
.share-button.copied{color:var(--accent)}
.header-actions{position:relative}
.rotation-control{--rotation-progress:0;z-index:6}
.rotation-toggle{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 12px;border:1px solid var(--line);border-radius:5px;background:#ffffff03;font-size:12px;white-space:nowrap}.rotation-toggle:hover,.rotation-control.is-open .rotation-toggle{border-color:color-mix(in srgb,var(--accent) 35%,transparent);background:#ffffff08}
.rotation-ring{width:22px;height:22px;overflow:visible;flex:none;fill:none;stroke-width:1.4}.ring-track{stroke:#eeeade24}.ring-progress{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:56.549;stroke-dashoffset:calc(56.549 * (1 - var(--rotation-progress)));transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset 1s ease}.ring-center{fill:color-mix(in srgb,var(--accent) 25%,var(--surface));stroke:var(--accent)}
.rotation-panel{position:absolute;top:calc(100% + 12px);right:0;z-index:6;width:min(350px,calc(100vw - 36px));max-height:calc(100dvh - 150px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:22px;background:radial-gradient(ellipse at 20% 0,color-mix(in srgb,var(--accent) 7%,transparent),transparent 65%),#1b1c18;border:1px solid #eeeade24;border-radius:12px;box-shadow:0 20px 70px #00000080,0 2px 8px #00000030;opacity:0;visibility:hidden;transform:translateY(-7px) scale(.975);transform-origin:top right;pointer-events:none;transition:opacity .22s ease,transform .35s cubic-bezier(.22,1,.36,1),visibility 0s .35s}.rotation-control.is-open .rotation-panel{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto;transition-delay:0s}
.rotation-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.rotation-heading h2{font-size:20px}.rotation-heading>span{font-size:12px;color:var(--accent);font-variant-numeric:tabular-nums;padding:4px 9px;border-radius:20px;background:color-mix(in srgb,var(--accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--accent) 16%,transparent)}
.rotation-identity{display:flex;align-items:center;gap:14px;margin-bottom:20px}.rotation-identity>div:last-child{min-width:0}.rotation-eyebrow{font-size:9px;letter-spacing:.65px;color:var(--muted);text-transform:uppercase}.rotation-identity h3{font:650 21px/1.1 Bricolage,sans-serif;letter-spacing:-.4px;margin:5px 0 0}
.listener-record{position:relative;flex:none;width:65px;height:65px;display:grid;place-items:center;isolation:isolate;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 2px,#ffffff0b 2.3px 2.8px,transparent 3px 4px),conic-gradient(from -40deg,#181a16,#33362e 20deg,#10120e 85deg,#151813 180deg,#3b4035 220deg,#141611 280deg,#181a16);box-shadow:0 4px 10px #00000050,inset 0 0 0 1px #eeeade22,inset 0 0 0 3px #00000080}
.listener-record i{position:absolute;width:31px;height:31px;border-radius:50%;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 90%,white),color-mix(in srgb,var(--accent) 45%,#171811));box-shadow:0 0 0 1px #000,0 0 0 3px #ffffff08}.listener-record svg{position:relative;width:26px;height:26px;fill:#141611}.rotation-control.is-open .listener-record{animation:record-arrive .65s cubic-bezier(.22,1,.36,1) both}
.rotation-progress{height:3px;border-radius:2px;background:#eeeade18;overflow:hidden}.rotation-progress i{display:block;height:100%;width:calc(var(--rotation-progress) * 100%);background:var(--accent);border-radius:inherit;transition:width 1s ease}.rotation-next{font-size:11px;color:var(--muted);margin:8px 0 18px}
.rotation-badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:20px}.rotation-badge{text-align:center;padding:12px 3px 9px;border:1px solid #eeeade08;border-radius:8px;background:#ffffff02}.rotation-badge b{display:block;font-size:10px;font-weight:500;line-height:1.3;min-height:26px;margin-top:9px;color:#b6b8ab}.badge-state{font-size:9px;letter-spacing:.2px;color:#85897c}
.record-medal{position:relative;display:grid;place-items:center;width:43px;height:43px;margin:auto;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 2px,#ffffff10 2.2px 2.7px,transparent 3px 4px),conic-gradient(from 20deg,#3d4037,#1d201a,#565a4b,#1d201a,#3d4037);box-shadow:0 3px 8px #00000030,inset 0 0 0 1px #eeeade30,inset 0 0 0 3px #151811,inset 0 0 0 4px #eeeade15;opacity:.45;transition:opacity .5s,box-shadow .5s}.record-medal:before{content:"";position:absolute;inset:11px;border-radius:50%;background:#21241b;box-shadow:inset 0 0 0 1px #eeeade20}.record-medal svg{position:relative;width:16px;height:16px;fill:none;stroke:#a3aa95;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.is-earned .record-medal{opacity:1;background:repeating-radial-gradient(circle,transparent 0 2px,#ffffff20 2.2px 2.7px,transparent 3px 4px),conic-gradient(from 20deg,color-mix(in srgb,var(--accent) 65%,#373b2e),color-mix(in srgb,var(--accent) 25%,#151811),color-mix(in srgb,var(--accent) 80%,white),color-mix(in srgb,var(--accent) 28%,#151811),color-mix(in srgb,var(--accent) 65%,#373b2e));box-shadow:0 3px 10px #00000040,0 0 15px color-mix(in srgb,var(--accent) 10%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--accent) 70%,white),inset 0 0 0 3px #151811,inset 0 0 0 4px color-mix(in srgb,var(--accent) 50%,transparent)}.is-earned .record-medal svg,.is-earned .badge-state{color:var(--accent);stroke:var(--accent)}.is-earned b{color:var(--text)}.rotation-control.is-open .rotation-badge.is-earned .record-medal{animation:medal-arrive .65s .1s cubic-bezier(.22,1,.36,1) both}
.rotation-play{display:flex;align-items:center;gap:11px;width:100%;padding:10px;border:1px solid #eeeade14;border-radius:7px;background:#ffffff03;text-align:left}.rotation-play:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);border-color:color-mix(in srgb,var(--accent) 25%,transparent)}.rotation-play img{width:36px;height:36px;flex:none;object-fit:cover;border-radius:3px}.rotation-play>span{min-width:0;flex:1}.rotation-play small{display:block;font-size:10px;color:var(--muted)}.rotation-play b{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rotation-play svg{width:18px;height:18px;fill:var(--accent)}
.rotation-details{margin-top:16px;font-size:12px}.rotation-details summary{padding:7px 0;color:#b6b8ab;cursor:pointer}.rotation-details summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}.rotation-details dl{margin:12px 0}.rotation-details dl>div{display:flex;justify-content:space-between;padding:5px 0;gap:10px}.rotation-details dt,.rotation-details p{color:var(--muted)}.rotation-details dd{margin:0;font-variant-numeric:tabular-nums}.rotation-details p{font-size:11px;line-height:1.6;margin:12px 0 0}
.history-setting{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;min-height:44px;border-top:1px solid var(--line);margin-top:14px;cursor:pointer}.history-setting input{position:absolute;right:0;width:38px;height:30px;opacity:0;cursor:pointer}.history-setting i{pointer-events:none;position:relative;width:30px;height:18px;border-radius:12px;background:#eeeade22;transition:background .2s}.history-setting i:before{content:"";position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--text);transition:transform .2s}.history-setting input:checked+i{background:color-mix(in srgb,var(--accent) 70%,#171811)}.history-setting input:checked+i:before{transform:translateX(12px)}.history-setting input:focus-visible+i{outline:2px solid var(--accent);outline-offset:4px}
@keyframes record-arrive{from{transform:rotate(-18deg) scale(.92)}to{transform:rotate(0) scale(1)}}@keyframes medal-arrive{from{transform:translateY(5px) rotate(-12deg);filter:brightness(1.4)}to{transform:translateY(0) rotate(0);filter:brightness(1)}}
.share-feedback{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:12;max-width:calc(100vw - 32px);padding:11px 18px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));border-radius:24px;background:#22231ff2;box-shadow:0 6px 30px #00000040;color:var(--text);font-size:12px;pointer-events:none;opacity:0;transform:translate(-50%,8px) scale(.97);transition:opacity .2s ease,transform .3s cubic-bezier(.22,1,.36,1)}.share-feedback.is-visible{opacity:1;transform:translate(-50%,0) scale(1)}
.social-links{position:relative;flex:none;z-index:4}.social-toggle{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:5px;background:#ffffff03;font-size:12px}.social-toggle:hover,.social-links.is-open .social-toggle{border-color:color-mix(in srgb,var(--accent) 35%,transparent);background:#ffffff08}.social-toggle svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.social-orbit{width:16px;height:16px;color:var(--muted)}.social-chevron{width:12px;height:12px;color:var(--muted);transition:transform .35s cubic-bezier(.22,1,.36,1),color .2s}.is-open .social-chevron{transform:rotate(180deg);color:var(--accent)}
.social-panel{position:absolute;top:calc(100% + 12px);right:0;width:226px;padding:7px;background:linear-gradient(140deg,#ffffff04,transparent),#1b1c18;border:1px solid #eeeade20;border-radius:9px;box-shadow:0 18px 48px #00000060,0 2px 8px #00000030;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.975);transform-origin:top right;pointer-events:none;transition:opacity .22s ease,transform .32s cubic-bezier(.22,1,.36,1),visibility 0s .32s}.is-open .social-panel{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto;transition-delay:0s}
.social-panel a{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px;border-radius:5px;text-decoration:none;font-size:13px;font-weight:500;opacity:0;transform:translateY(-4px);transition:background .18s,color .18s,opacity .16s ease,transform .16s ease}.is-open .social-panel a{opacity:1;transform:translateY(0);transition:background .18s,color .18s,opacity .3s .05s ease,transform .38s .05s cubic-bezier(.22,1,.36,1)}.is-open .social-panel a:nth-child(2){transition-delay:0s,0s,.09s,.09s}.social-panel a:hover{background:#eeeade08;color:var(--accent)}.social-panel a:focus-visible{outline-offset:-2px}.platform-icon{width:22px;height:22px;flex:none}.youtube-icon{fill:#ff6c65}.platform-cutout{fill:#1b1c18}.soundcloud-icon{fill:none;stroke:#ffb16d;stroke-width:1.6;stroke-linecap:round}.cloud-fill{fill:#ffb16d;stroke:none}.social-arrow{width:14px;height:14px;margin-left:auto;fill:none;stroke:var(--muted);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s,color .25s}.social-panel a:hover .social-arrow{transform:translate(2px,-2px);stroke:var(--accent)}
.share-fallback{margin-bottom:24px}.share-fallback label{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px}.share-fallback input{width:100%;padding:12px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:4px}
.player-shell{position:relative;border:1px solid var(--line);border-radius:6px;background:linear-gradient(135deg,#ffffff02,transparent 50%),var(--surface);overflow:hidden;box-shadow:0 16px 60px #00000015}
.hero{display:grid;grid-template-columns:360px minmax(0,1fr);gap:64px;padding:32px;align-items:center}
.art-wrap{position:relative;aspect-ratio:1;border-radius:3px;background:#2b2428;overflow:hidden;isolation:isolate;box-shadow:0 8px 28px #00000035,0 0 0 1px #eeeade0a}
.cover{width:100%;height:100%;display:block;object-fit:cover;opacity:0;transform:scale(1.015);transition:opacity .35s ease,transform .6s cubic-bezier(.22,1,.36,1)}.loaded .cover{opacity:1;transform:scale(1)}
.cover-fallback{height:100%;background:linear-gradient(140deg,#40303a,#221d22)}
.vinyl-inset{position:absolute;inset:12%;border-radius:50%;background:#070708;box-shadow:0 0 0 1px #00000090,0 0 0 2px #ffffff16,0 5px 16px #00000060,inset 0 2px 4px #000;pointer-events:none}
.vinyl-pulse{position:absolute;inset:1.2%;border-radius:50%;transform:scale(var(--beat-scale,1));transition:transform .3s ease;will-change:transform}.playing .vinyl-pulse{transition:none}
.vinyl{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 50%,#111113 0 20%,#09090a 21% 66%,#161618 69%,#080809 70%);box-shadow:inset 0 0 0 1px #ffffff16,inset 0 0 0 3px #00000080;overflow:hidden;will-change:transform}
.vinyl-grooves{position:absolute;inset:4%;border-radius:50%;background:repeating-radial-gradient(circle at center,transparent 0 1px,#ffffff0b 1.2px 1.7px,transparent 2px 3px);opacity:.65}
.vinyl-sheen{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from -28deg,transparent 0deg,#ffffff12 35deg,transparent 65deg,transparent 170deg,#ffffff0b 215deg,transparent 245deg);opacity:var(--sheen,.7)}
.vinyl-label{position:absolute;inset:32%;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#67505e,#352a32);box-shadow:0 0 0 1px #000,0 0 0 3px #ffffff06,inset 0 0 15px #00000025}
.vinyl-label img{width:100%;height:100%;display:block;object-fit:cover;filter:brightness(.78) saturate(.8)}
.vinyl-spindle{position:absolute;inset:48.1%;border-radius:50%;background:#080809;box-shadow:0 0 0 1px #ffffff30,0 1px 2px #00000090}
.pixel-art .cover,.pixel-art .vinyl-label img,.song-row.pixel-art .song-cover{image-rendering:pixelated}
.player-details{min-width:0}.track-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
#track-index{letter-spacing:2px}#playback-status{display:flex;align-items:center;gap:7px;white-space:nowrap}
.status-dot{display:inline-block;position:relative;width:5px;height:5px;border-radius:50%;background:#686b60;transition:background .2s}.playing .status-dot{background:var(--accent);animation:status-breathe 2.4s ease-in-out infinite}.status-dot:after{content:"";position:absolute;inset:-3px;border:1px solid var(--accent);border-radius:50%;opacity:0}.playing .status-dot:after{animation:status-halo 2.4s ease-out infinite}
@keyframes status-breathe{50%{opacity:.65;transform:scale(.9)}}@keyframes status-halo{0%{opacity:.35;transform:scale(.5)}70%,100%{opacity:0;transform:scale(1.45)}}
h1{font-family:Bricolage,sans-serif;font-size:clamp(52px,5.8vw,76px);line-height:1.06;font-weight:750;font-stretch:90%;letter-spacing:-2.8px;margin:0 0 12px;overflow-wrap:anywhere}
.play-counts{display:flex;align-items:center;gap:7px;margin:0 0 24px;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}.play-counts svg{width:13px;height:13px;fill:currentColor;opacity:.7}.play-counts b{color:#eeeadec0;font-weight:500}.count-separator{margin:0 2px;opacity:.5}
.timeline{width:100%}.time-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:7px}
input[type=range]{appearance:none;-webkit-appearance:none;display:block;background:transparent;height:32px;cursor:pointer;touch-action:pan-y;margin:0;width:100%}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--accent) var(--fill),#eeeade25 var(--fill))}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--accent) var(--fill),#eeeade25 var(--fill))}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border-radius:50%;background:var(--text);border:0;box-shadow:0 0 0 4px #eeeade00;transition:box-shadow .2s}
input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 4px #eeeade12}input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--text);border:0}input[type=range]:disabled{opacity:.4}
.transport{display:flex;gap:16px;align-items:center;margin-top:26px}
.play-button{flex:none;width:64px;height:64px;display:grid;place-items:center;border:0;border-radius:50%;color:#171811;background:var(--accent);box-shadow:0 4px 20px #00000015}
.play-button:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 78%,white);transform:scale(1.045)}.play-button svg{width:25px;height:25px;grid-area:1/1;fill:currentColor;transition:opacity .18s,transform .18s}.play-icon{margin-left:3px}.pause-icon{opacity:0;transform:scale(.8)}.playing .pause-icon{opacity:1;transform:scale(1)}.playing .play-icon{opacity:0;transform:scale(.8)}
.icon-button{position:relative;display:grid;place-items:center;width:44px;height:44px;flex:none;padding:12px;background:none;border:0;border-radius:50%;color:var(--muted)}.icon-button:hover{color:var(--text);background:#eeeade08}
.icon-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.skip-button svg{fill:currentColor;stroke-width:1.2}.shuffle-button{margin-left:auto}
.repeat-button[aria-pressed=true],.shuffle-button[aria-pressed=true]{color:var(--accent)}.repeat-button[aria-pressed=true]:after,.shuffle-button[aria-pressed=true]:after{content:"";position:absolute;bottom:1px;width:3px;height:3px;background:currentColor;border-radius:50%}
.repeat-one{position:absolute;left:19px;top:13px;font-size:9px;line-height:1;font-weight:700;opacity:0}.repeat-button[data-mode=one] .repeat-one{opacity:1}
.player-footer{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.volume-control{display:flex;align-items:center;gap:3px;width:148px}.volume-control input{width:100px}.volume-waves,.volume-cross{transition:opacity .18s}.volume-cross{opacity:0}#mute[aria-pressed=true] .volume-waves{opacity:0}#mute[aria-pressed=true] .volume-cross{opacity:1}#mute[aria-pressed=true]{color:var(--text)}
.favorite-button svg{fill:transparent;transition:fill .18s,stroke .18s}.favorite-button[aria-pressed=true]{color:var(--accent)}.favorite-button[aria-pressed=true] svg{fill:var(--accent);stroke:var(--accent);animation:favorite-pop .25s ease}
.visualizer-panel{padding:0 32px 24px;min-width:0}.visualizer-wrap{height:66px;overflow:hidden}canvas{display:block;width:100%;height:100%}
.collection{margin-top:36px}.collection-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}h2{font-family:Bricolage,sans-serif;font-size:20px;line-height:1.2;font-weight:650;letter-spacing:-.5px;margin:0}
#track-count{font:11px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--muted);margin-left:8px;letter-spacing:0}
.collection-filters{position:relative;display:flex;gap:3px;background:#ffffff04;padding:3px;border:1px solid var(--line);border-radius:6px}.collection-filters:before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:var(--filter-width,0px);transform:translateX(var(--filter-x,3px));border-radius:3px;background:#eeeade0c;pointer-events:none;transition:transform .32s cubic-bezier(.22,1,.36,1),width .32s cubic-bezier(.22,1,.36,1)}.collection-filters button{position:relative;padding:8px 12px;border:0;border-radius:3px;background:none;color:var(--muted);font-size:11px;min-height:34px}.collection-filters button[aria-pressed=true]{color:var(--text)}.collection-filters button:hover{color:var(--text)}#favorite-count{display:inline-block;min-width:12px;margin-left:4px;font-size:10px;color:var(--accent)}
.song-list{display:grid;gap:4px}.song-row{position:relative;display:flex;align-items:center;gap:12px;padding-right:12px;border-radius:4px;background:transparent;transition:background .2s}
.song-row:hover{background:#eeeade05}.song-row.is-current{background:color-mix(in srgb,var(--accent) 5%,transparent)}.song-row:before{content:"";position:absolute;left:0;top:17px;bottom:17px;width:2px;border-radius:2px;background:var(--accent);opacity:0;transition:opacity .3s}.song-row.is-current:before{opacity:1}
.song-select{display:flex;align-items:center;gap:18px;flex:1;min-width:0;padding:12px 16px;border:0;background:none;text-align:left;border-radius:4px;font-size:15px}.song-select:active:not(:disabled){transform:none}.song-number{flex:none;width:18px;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}.song-cover{width:46px;height:46px;object-fit:cover;flex:none;border-radius:3px;background:var(--surface)}.song-title{font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-duration{flex:none;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}.row-favorite{width:44px;height:44px}
.empty-state,.message{font-size:12px;color:var(--muted);margin:24px 0;overflow-wrap:anywhere}.empty-state{padding:28px;text-align:center;border:1px dashed var(--line);border-radius:4px}.message{color:var(--accent)}
.owner-panel{margin:32px 0 0;padding:20px;border:1px solid var(--line);border-radius:5px;font-size:12px;background:var(--surface)}.owner-panel label{display:block;font-weight:500;margin-bottom:12px}.upload-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.upload-controls input{max-width:100%;flex:1;min-width:160px;font-size:11px;color:var(--muted)}.upload-controls button{border:0;border-radius:4px;background:color-mix(in srgb,var(--accent) 18%,var(--surface));padding:9px 13px;font-size:11px}.owner-panel a{display:inline-block;color:var(--muted);margin-top:14px;font-size:11px}
dialog{width:min(400px,calc(100% - 36px));border:1px solid #eeeade24;border-radius:8px;padding:24px;background:#1b1c18;color:var(--text);box-shadow:0 24px 100px #00000070}dialog[open]{animation:dialog-arrive .2s ease}dialog::backdrop{background:#080908c0;backdrop-filter:blur(6px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialog-header h2{font-size:21px}.shortcut-list{margin:16px 0 0}.shortcut-list>div{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--line);font-size:13px}.shortcut-list dt{color:var(--muted)}.shortcut-list dd{margin:0}kbd{display:inline-block;min-width:27px;padding:4px 8px;text-align:center;font-size:11px;font-family:inherit;border:1px solid #eeeade20;border-radius:4px;background:#ffffff04}
.startup{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:var(--bg);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,visibility 0s .6s}.starting .startup{opacity:1;visibility:visible;pointer-events:auto;transition:none}.startup:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 240px 220px at center,color-mix(in srgb,var(--accent) 5%,transparent),transparent 75%)}
.startup-stage{position:relative;width:min(310px,78vw);height:220px}.startup-piece{position:absolute;top:0;width:56%;height:auto;overflow:visible;filter:drop-shadow(0 10px 0 #00000035);transition:transform .55s cubic-bezier(.65,0,.35,1),opacity .45s;opacity:0}.startup-left{left:0;transform:translateX(-75vw) rotate(-18deg)}.startup-right{right:0;transform:translateX(75vw) rotate(18deg)}.starting .startup-piece{opacity:1}.starting .startup-left{transform:rotate(-8deg);animation:cut-left .85s cubic-bezier(.16,1,.3,1)}.starting .startup-right{transform:rotate(8deg);animation:cut-right .9s .05s cubic-bezier(.16,1,.3,1) backwards}.startup-left .paper{fill:#eeeade}.startup-right .paper{fill:#d9ed79}.loader-disc{fill:#171811;transform-origin:90px 98px;animation:record-nod 1.1s .7s ease-in-out infinite alternate}.loader-groove{fill:none;stroke:#eeeade35;stroke-width:1.5}.loader-center{fill:#c7869c}.loader-hole{fill:#171811}.loader-k{fill:#171811}.loader-spark{fill:#eeeade;transform-origin:145px 20px;animation:spark-pop .5s .8s cubic-bezier(.2,1.8,.4,1) backwards}.startup-beats{position:absolute;bottom:0;left:50%;display:flex;gap:6px;transform:translateX(-50%);opacity:0;transition:opacity .25s}.starting .startup-beats{opacity:1}.startup-beats i{width:14px;height:4px;background:#eeeade;border-radius:1px;animation:beat-tap .75s ease-in-out infinite}.startup-beats i:nth-child(2){animation-delay:.12s;background:#d9ed79}.startup-beats i:nth-child(3){animation-delay:.24s;background:#c7869c}
@keyframes cut-left{0%{transform:translateX(-75vw) rotate(-24deg)}70%{transform:translateX(7px) rotate(-5deg)}100%{transform:rotate(-8deg)}}@keyframes cut-right{0%{transform:translateX(75vw) rotate(24deg)}70%{transform:translateX(-7px) rotate(5deg)}100%{transform:rotate(8deg)}}@keyframes record-nod{to{transform:rotate(12deg)}}@keyframes spark-pop{from{transform:scale(0) rotate(-45deg)}to{transform:scale(1) rotate(0)}}@keyframes beat-tap{50%{transform:translateY(-4px);opacity:.45}}@keyframes favorite-pop{50%{transform:scale(1.15)}}@keyframes dialog-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px){main{padding-top:60px}}
@media(max-width:1020px){.hero{grid-template-columns:300px minmax(0,1fr);gap:40px}h1{font-size:60px}.track-meta{margin-bottom:14px}.transport{margin-top:20px}}
@media(max-width:820px){main{padding:28px 24px 36px}.hero{grid-template-columns:240px minmax(0,1fr);gap:28px;padding:26px}.visualizer-panel{padding:0 26px 22px}h1{font-size:52px;margin-bottom:22px}.play-button{width:58px;height:58px}.transport{gap:10px}.player-footer{margin-top:14px;padding-top:10px}.wordmark{font-size:27px}}
@media(max-width:660px){main{max-width:480px;padding:22px 18px 32px}.page-header{margin-bottom:24px;padding-bottom:20px;gap:12px}.wordmark{font-size:25px;gap:9px;letter-spacing:-1.2px}.brand-mark{width:32px;height:32px}.header-actions{gap:0}.shortcuts-button{display:none}.share-button{min-width:44px;width:44px;padding:12px;border-color:transparent;background:none}.share-button span{display:none}.hero{display:flex;flex-direction:column;align-items:stretch;padding:24px;gap:28px}.art-wrap{width:100%;max-width:356px;align-self:center}.track-meta{margin-bottom:14px}h1{font-size:56px;margin-bottom:24px;letter-spacing:-2px}.transport{gap:16px;margin-top:24px}.play-button{width:62px;height:62px}.player-footer{margin-top:18px;padding-top:12px}.visualizer-panel{padding:0 24px 20px}.visualizer-wrap{height:54px}.collection{margin-top:28px}.collection-header{gap:10px}h2{font-size:18px}.collection-filters button{padding:7px 10px}.song-select{gap:12px;padding:12px;font-size:14px}.song-cover{width:40px;height:40px}.song-row{gap:5px;padding-right:4px}.song-number{width:15px}.song-duration{font-size:11px}.owner-panel{padding:18px}.share-fallback label{display:block}.share-fallback input{margin-top:8px}}
@media(max-width:350px){main{padding-left:14px;padding-right:14px}.wordmark{font-size:23px;gap:7px}.brand-mark{width:28px;height:28px}.hero{padding:20px}.visualizer-panel{padding-left:20px;padding-right:20px}.transport{gap:12px}h1{font-size:50px}.song-select{gap:9px}.song-number{display:none}.collection-filters button{padding:7px 8px}}
@media(max-width:820px){.hero h1{margin-bottom:10px}.play-counts{margin-bottom:20px}.transport{gap:6px}}
@media(max-width:660px){.social-toggle{padding:10px 8px;gap:5px;border-color:transparent;background:none}.social-toggle>span{display:none}.social-panel{right:-44px;top:calc(100% + 10px)}}
@media(max-width:350px){.transport{gap:0}}
@media(max-width:1020px){.rotation-toggle{width:44px;padding:10px}.rotation-toggle>span{display:none}}
@media(max-width:460px){.page-header{flex-wrap:wrap;row-gap:12px}.header-actions{width:100%;justify-content:flex-end;gap:3px}.rotation-toggle{width:auto;padding:8px 11px}.rotation-toggle>span{display:inline}.rotation-panel{padding:18px;max-height:calc(100dvh - 180px)}}
@media(max-width:660px){main{padding-top:40px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.rain-layer,#brand-fire{display:none}}