:root { color-scheme: light; --paper:#eee6d2; --ink:#bd390f; --bright:#ce3705; --muted:#a07859; --line:#b75a2929; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.17;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%2384714f' filter='url(%23n)' opacity='.55' d='M0 0h240v240H0z'/%3E%3C/svg%3E");
}

button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; color:inherit; }
button { font:inherit; cursor:pointer; }
a { color:inherit; }
button:focus-visible,a:focus-visible,#track-scroll:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.radio-app { position:relative; }
.hero { min-height:100svh; display:flex; align-items:center; justify-content:center; gap:5vw; padding:8vw; }
h1 { font-size:clamp(90px,11vw,190px); line-height:.95; letter-spacing:-.065em; margin:0; font-weight:900; white-space:nowrap; color:var(--bright); }
.logo-control { display:block; width:min(40vw,550px); flex-shrink:0; padding:0; border:0; border-radius:50%; background:transparent; }
.artwork { display:block; position:relative; width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden; clip-path:circle(49.7%); }
.artwork img { position:absolute; width:206.45%; height:auto; max-width:none; left:-96.77%; top:-26.61%; }
.logo-control:disabled { opacity:1; cursor:default; }
.collection { max-width:780px; margin:auto; padding:64px 30px 70px; }
.collection-label { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.collection-header { margin-bottom:24px; }
.collection-header h2 { font-size:32px; line-height:1; letter-spacing:-1.2px; margin:0; }
#track-count,.collection-footer { font:10px monospace; color:var(--muted); }
#track-scroll { position:relative; min-height:200px; outline-offset:8px; }
#tracks { position:relative; width:100%; overflow-anchor:none; }
.track-row { position:absolute; left:0; right:0; height:132px; border-bottom:1px solid var(--line); }
.track-button { display:flex; align-items:center; gap:18px; width:100%; height:88px; padding:10px 0 0; background:transparent; border:0; text-align:left; }
.cover { display:block; width:68px; height:68px; flex-shrink:0; overflow:hidden; background:radial-gradient(circle,hsl(var(--sleeve) 65% 83%) 0 6%,#322820 7% 12%,transparent 13% 22%,#322820 23% 25%,transparent 26% 36%,#322820 37% 39%,transparent 40%),hsl(var(--sleeve) 48% 57%); }
.cover img { display:block; width:100%; height:100%; object-fit:cover; }
.track-copy { flex:1; min-width:0; }
.track-title { font-size:22px; font-weight:750; letter-spacing:-.6px; line-height:1.12; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.track-mark { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border-radius:50%; }
.track-mark svg { width:24px; height:24px; fill:currentColor; }
.track-button[data-playing="true"] .track-mark { background:var(--ink); color:var(--paper); }
.track-links { display:flex; align-items:center; gap:4px; margin-left:82px; height:44px; }
.track-duration { font:10px monospace; color:var(--muted); width:40px; flex-shrink:0; }
.icon-link { width:44px; height:44px; display:grid; place-items:center; text-decoration:none; flex-shrink:0; }
.icon-link svg { width:20px; height:20px; stroke:currentColor; stroke-width:1.5; fill:none; }
.youtube svg path { fill:currentColor; stroke:none; }
.row-message { font:10px/1.3 monospace; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.collection-footer { display:flex; justify-content:space-between; margin-top:26px; }
.list-message { padding:28px 0; font-size:16px; }
.retry { background:transparent; border:1px solid var(--ink); padding:10px 16px; }
.deck { position:absolute; z-index:1; left:86px; width:200px; height:200px; background:#21190f; }
#video-slot,#video-slot iframe { display:block; width:200px; height:200px; min-width:200px; min-height:200px; border:0; }

.noscript { padding:24px; }
@keyframes record-turn { to { transform:rotate(360deg); } }
@keyframes ink-arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:no-preference) {
 .logo-control .artwork { animation:record-turn 90s linear infinite; }
 .logo-control.motion-paused .artwork,.hero.offscreen .logo-control .artwork,.tab-hidden .logo-control .artwork { animation-play-state:paused; }
 .hero h1 { animation:ink-arrive .8s cubic-bezier(.2,.7,.2,1) both; }
 .collection-header.arrived { animation:ink-arrive .55s ease-out both; }
 .logo-control { transition:scale .5s cubic-bezier(.2,.7,.2,1); }
 .logo-control:not(:disabled):active { scale:.975; }
 .track-title,.track-mark,.icon-link { transition:transform .2s ease,background-color .2s ease; }
 .track-mark { transition:transform .2s ease; }
 .track-button:active .track-mark { transform:scale(.9); }
}
@media(hover:hover) {
 .icon-link:hover { background:#bd390f0b; }
 .track-button:hover .track-title { text-decoration:underline; text-underline-offset:3px; }
}
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
 .logo-control:not(:disabled):hover { scale:1.018; }
 .track-button:hover .track-title { transform:translateX(3px); }
 .icon-link:hover { transform:translateY(-2px); }
}
@media(max-width:760px) {
 .hero { flex-direction:column; gap:44px; padding:36px 24px; }
 h1 { font-size:clamp(74px,19vw,140px); }
 .logo-control { width:min(76vw,400px); }
 .collection { padding:42px 23px 50px; }
 .collection-header h2 { font-size:28px; }
 .track-title { font-size:18px; letter-spacing:-.4px; }
 .track-button { gap:12px; }
 .cover { width:56px; height:56px; }
 .track-links { margin-left:64px; }
 .deck { left:68px; }
}
@media(prefers-reduced-motion:reduce) {
 .artwork,.hero h1,.collection-header { animation:none !important; }
 .logo-control,.track-title,.track-mark,.icon-link { transition:none !important; }
}