.controls #playToggle { width:54px; height:54px; display:grid; place-items:center; border:1px solid #b5ffff; border-radius:50%; color:#071218; background:#00ffff; box-shadow:0 0 24px #00ffff40,inset 0 0 12px #ffffff66; transition:transform 220ms ease,box-shadow 220ms ease,background 220ms ease; }
.playback-backdrop { position:absolute; z-index:0; left:50%; top:-32px; width:max(88vw, calc(100vh + 40px)); height:auto; max-width:none; transform:translate(-49.79%,-33.54%); opacity:0; visibility:hidden; pointer-events:none; user-select:none; transition:opacity 700ms ease,visibility 700ms; }
.playback-backdrop { transform-origin:49.79% 33.54%; animation:playback-art-breathe 18s ease-in-out infinite; animation-play-state:paused; -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 90%,transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 90%,transparent); mask-composite:intersect; }
.stage.is-flat.has-vinyl .playback-backdrop { opacity:.42; visibility:visible; animation-play-state:running; }
.stage.is-flat.has-vinyl .hero { background-color:#cbccc8; }
.stage.is-flat.has-vinyl .masthead { border-bottom-color:transparent; }
@keyframes playback-art-breathe {
  0%,100% { transform:translate(-49.79%,-33.54%) scale(1) rotate(-.35deg); }
  50% { transform:translate(-49.79%,-33.54%) scale(1.035) rotate(.35deg); }
}
@property --player-glass-angle { syntax:"<angle>"; initial-value:0deg; inherits:false; }
.stage.has-vinyl .controls { isolation:isolate; border-radius:999px; border:1px solid #ffffff38; padding:16px 24px; background:linear-gradient(110deg,#0a0c1294,#171c256b 58%,#24293080); backdrop-filter:blur(12px) saturate(1.3); -webkit-backdrop-filter:blur(12px) saturate(1.3); box-shadow:0 16px 38px #0004,inset 0 2px 3px #ffffff38,inset 0 -3px 7px #0005; }
.stage.has-vinyl .controls::before { content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none; background:radial-gradient(ellipse at 90% 0%,#ffffff35,transparent 45%),linear-gradient(180deg,#ffffff12,transparent 45%,#0002); }
.stage.has-vinyl .controls::after { content:""; position:absolute; inset:-1px; padding:2px; border-radius:inherit; pointer-events:none; z-index:2; background:conic-gradient(from var(--player-glass-angle),#ffffff22 0deg,#ffffff22 30deg,#7efff4 65deg,#a18aff 95deg,#ffffff22 130deg,#ffffff22 205deg,#ff9eda 235deg,#ffe49a 268deg,#ffffffb0 285deg,#ffffff22 320deg); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; animation:player-glass-flow 10s linear infinite; }
.stage.has-vinyl .controls > * { position:relative; z-index:1; }
.stage.has-vinyl .controls button { border-radius:50%; background-color:#ffffff0c; box-shadow:inset 0 1px 2px #ffffff26; }
.stage.has-vinyl .controls .player-timeline label,.stage.has-vinyl .controls .volume-control,.stage.has-vinyl .controls #playerStatus { color:#d0d2dc; }
@keyframes player-glass-flow { to { --player-glass-angle:360deg; } }
@media(max-width:700px) { .stage.has-vinyl .controls { border-radius:28px; padding:14px 16px; } }
@media(prefers-reduced-motion:reduce) { .stage.has-vinyl .controls::after { animation:none; } }
.stage.is-flat .card:not(.mode-flight):is(:hover,:focus-visible) { box-shadow:none; }
.stage.is-flat .card:not(.mode-flight) { overflow:visible; }
.stage.is-flat .card:not(.mode-flight)::before { content:""; display:block; position:absolute; z-index:1; pointer-events:none; left:0; right:auto; top:6%; bottom:6%; width:32px; border-radius:8px; background:var(--cyan,#00ffff); filter:none; opacity:0; transform:translateX(-8px) scaleX(.15); transform-origin:left center; }
.stage.is-flat .card:not(.mode-flight):is(:hover,:focus-visible)::before { animation:song-cyan-echo 560ms cubic-bezier(.22,.61,.36,1) both; }
@keyframes song-cyan-echo {
  0% { opacity:0; transform:translateX(-100%) scaleX(.15); transform-origin:right center; }
  16% { opacity:.75; }
  55% { opacity:.32; }
  100% { opacity:0; transform:translateX(-44px) scaleX(1); transform-origin:right center; }
}
.stage.is-flat.has-vinyl .scene { left:0; width:44%; padding-left:88px; }
.stage.is-flat.has-vinyl .carousel { width:100%; }
@media(max-width:820px) { .stage.is-flat.has-vinyl .scene { width:100%; padding-left:88px; padding-right:16px; } }
@media(prefers-reduced-motion:reduce) { .stage.is-flat .card:not(.mode-flight):is(:hover,:focus-visible)::before { animation:none; } }
.stage:not(.is-flat) .card::after { min-height:56px; padding:9px 12px; line-height:1.4; }
.stage:not(.is-flat) .card .card__meta { height:48px; padding:0 12px; }
.stage:not(.is-flat) .card[aria-selected="true"] .card__meta { bottom:56px; }
.stage:not(.is-flat) .card .card__art { bottom:48px; }
@media(max-width:820px) {
  .stage:not(.is-flat) .card::after { min-height:44px; padding:6px 9px; }
  .stage:not(.is-flat) .card .card__meta { height:40px; padding:0 9px; }
  .stage:not(.is-flat) .card[aria-selected="true"] .card__meta { bottom:44px; }
  .stage:not(.is-flat) .card .card__art { bottom:40px; }
}
.card .card__meta::before { content:""; position:absolute; left:0; right:0; top:-14px; height:18px; pointer-events:none; background:url('./card-water-edge.svg') repeat-x 0 0 / 160px 18px; animation:card-water-flow 5s linear infinite; }
.card:nth-child(3n+2) .card__meta::before { animation-duration:6.5s; animation-delay:-2s; }
.card:nth-child(3n) .card__meta::before { animation-delay:-3.5s; }
.stage.is-flat .card .card__meta::before { top:0; opacity:.8; }
@keyframes card-water-flow { to { background-position-x:160px; } }
@media(prefers-reduced-motion:reduce) { .card .card__meta::before { animation:none; } }
.ui-icon { width:18px; height:18px; flex:none; display:inline-block; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.masthead__actions > button,#effectToggle,.back-to-orbit { align-items:center; gap:8px; }
.masthead__actions > button,#effectToggle { display:inline-flex; }
.effect-menu button .ui-icon { margin-right:8px; width:16px; height:16px; }
.controls #prev,.controls #next { display:grid; place-items:center; }
.controls #prev .ui-icon,.controls #next .ui-icon { width:21px; height:21px; }
.audio-import .ui-icon,.volume-control .ui-icon,.player-timeline label .ui-icon { width:15px; height:15px; margin-right:6px; }
.controls button:focus-visible,.masthead button:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
.effect-picker { position:relative; display:none; }
.stage.is-flat.has-vinyl .effect-picker { display:block; }
#effectToggle { border-color:#ff006e; color:#fff; box-shadow:inset 0 -2px #ff006e,0 0 14px #ff006e24; }
.effect-menu { position:absolute; z-index:100; top:calc(100% + 9px); right:0; width:150px; padding:6px; background:#0a0014f2; border:1px solid #00ffff55; box-shadow:0 14px 30px #0009,0 0 22px #00ffff18; opacity:0; visibility:hidden; transform:translateY(-7px); transition:opacity 180ms ease,transform 220ms cubic-bezier(.16,.84,.18,1),visibility 180ms; }
.effect-menu::before { content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }
.effect-menu button { display:block; width:100%; padding:10px 11px; border:0; background:transparent; color:#a99daf; font-size:10px; text-align:left; cursor:pointer; }
.effect-menu button:hover,.effect-menu button:focus-visible { color:#fff; background:#ffffff0d; outline:none; }
.effect-menu button[aria-checked="true"] { color:#00ffff; box-shadow:inset 2px 0 #ff006e; }
.effect-picker:hover .effect-menu,.effect-picker:focus-within .effect-menu,.effect-picker.is-open .effect-menu { opacity:1; visibility:visible; transform:translateY(0); }
.volume-wave { position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; opacity:0; transition:opacity 560ms ease; }
.stage.is-flat.has-vinyl.is-playing[data-effect="wave"] .volume-wave { opacity:1; }
.controls #playToggle:hover { transform:translateY(-2px) scale(1.05); background:#b5ffff; box-shadow:0 0 32px #00ffff70; }
.controls #playToggle:active { transform:scale(.94); }
.controls #playToggle:focus-visible { outline:2px solid #ff006e; outline-offset:5px; }
#playToggle svg { width:23px; height:23px; fill:currentColor; grid-area:1 / 1; }
#playToggle .pause-icon { display:none; }
#playToggle[aria-pressed="true"] .play-icon { display:none; }
#playToggle[aria-pressed="true"] .pause-icon { display:block; }
.vinyl-deck { position:absolute; z-index:3; top:0; left:50%; width:320px; height:190px; transform:translate(-50%,-45px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity 600ms ease,transform 800ms cubic-bezier(.16,.84,.18,1),visibility 600ms; }
.stage.is-flat.has-vinyl .vinyl-deck { opacity:1; visibility:visible; transform:translate(-50%,0); }
.vinyl-disc { position:absolute; z-index:2; top:-192px; width:320px; height:320px; border-radius:50%; border:2px solid #00ffff35; background:repeating-radial-gradient(circle,#09090e 0 3px,#24242e 4px,#09090e 5px 7px); box-shadow:0 20px 50px #0009,0 0 35px #00ffff12; animation:vinyl-spin 14s linear infinite; }
.vinyl-disc::before { content:""; position:absolute; inset:0; border-radius:50%; background:conic-gradient(transparent 0deg,#ffffff1a 45deg,transparent 80deg 180deg,#ffffff15 225deg,transparent 260deg); }
.vinyl-liquid-edge { position:absolute; z-index:2; left:-10px; top:-202px; width:340px; height:340px; pointer-events:none; }
.vinyl-liquid-edge i { position:absolute; inset:3px; border-radius:48% 52% 47% 53% / 52% 46% 54% 48%; background:#acff00; animation:liquid-edge-flow 13s linear infinite,liquid-edge-morph 6s ease-in-out infinite; animation-play-state:paused; }
.vinyl-liquid-edge i:nth-child(2) { inset:4px; background:#ff00bf; animation-duration:19s,8s; animation-delay:-6s,-3s; animation-direction:reverse,alternate; }
.vinyl-liquid-edge i:nth-child(3) { inset:5px; background:#00eeee; animation-duration:16s,7s; animation-delay:-11s,-5s; }
.stage.is-flat .vinyl-liquid-edge i { animation-play-state:running; }
@keyframes liquid-edge-flow { to { transform:rotate(360deg); } }
@keyframes liquid-edge-morph {
  0%,100% { border-radius:40% 60% 38% 62% / 59% 36% 64% 41%; }
  33% { border-radius:63% 37% 59% 41% / 38% 65% 35% 62%; }
  66% { border-radius:36% 64% 43% 57% / 64% 40% 60% 36%; }
}
.vinyl-label { position:absolute; inset:33%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; border-radius:50%; border:2px solid #ff006e99; background:linear-gradient(135deg,#0a0014,hsl(var(--label-hue,182) 70% 35%)); box-shadow:0 0 20px #00ffff30; text-align:center; padding:14px; }
.vinyl-label span { font-size:13px; letter-spacing:.2em; }
.vinyl-label small { font-size:8px; }
.vinyl-label::after { content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:#050508; border:1px solid #ffffff60; top:calc(50% - 4px); left:calc(50% - 4px); }
.vinyl-arm { position:absolute; z-index:3; width:95px; height:152px; right:-35px; top:-62px; overflow:visible; fill:#171622; stroke:#c4cad8; stroke-width:4; filter:drop-shadow(0 4px 6px #000); transform-origin:78% 11%; transform:rotate(-17deg); transition:transform 900ms cubic-bezier(.22,.61,.36,1); }
.vinyl-arm path { fill:none; }
.vinyl-arm .vinyl-needle { stroke:#00ffff; stroke-width:8; }
.is-playing .vinyl-arm { transform:rotate(0); }
.is-playing .vinyl-disc { animation-duration:3s; }
.stage.is-flat.has-vinyl .scene { top:128px; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 92px); mask-image:linear-gradient(to bottom,transparent 0,#000 92px); }
.stage.is-flat.has-vinyl .carousel { padding-top:92px; }
.stage.is-flat.has-vinyl .title-wrap { top:56%; }
.vinyl-waves { position:absolute; z-index:1; left:160px; top:-32px; width:0; height:0; pointer-events:none; opacity:0; transition:opacity 560ms ease; }
.vinyl-waves i { position:absolute; left:-50px; top:-50px; width:100px; height:100px; border:14px solid var(--wave-color,#00ffff); border-radius:50%; opacity:0; transform:scale(.55); }
.vinyl-waves i { animation:vinyl-wave 5.76s cubic-bezier(.2,.55,.28,1) infinite; animation-play-state:paused; }
.is-playing .vinyl-waves i { animation-play-state:running; }
.vinyl-waves i:nth-child(2) { animation-delay:1.44s; }
.vinyl-waves i:nth-child(3) { animation-delay:2.88s; }
.vinyl-waves i:nth-child(4) { animation-delay:4.32s; }
.is-playing[data-effect="rings"] .vinyl-waves { opacity:1; }
.rings-fading .vinyl-waves i { animation-play-state:paused; }
.rings-idle .vinyl-waves i { animation:none; }
@keyframes vinyl-spin { to { transform:rotate(360deg); } }
@keyframes vinyl-wave {
  0% { opacity:0; transform:scale(.55); }
  7% { opacity:.72; }
  70% { opacity:.22; }
  100% { opacity:0; transform:scale(11); }
}
@media(max-width:820px) {
 .playback-backdrop { left:70%; top:-41px; width:max(128vw, calc(100vh + 50px)); }
 .masthead__actions { flex-wrap:wrap; justify-content:flex-end; }
 #effectToggle { order:3; }
 .vinyl-deck { width:210px; height:110px; left:70%; }
 .vinyl-disc { width:210px; height:210px; top:-146px; }
 .vinyl-liquid-edge { width:224px; height:224px; left:-7px; top:-153px; }
 .vinyl-arm { width:65px; height:104px; right:-15px; top:-36px; }
 .vinyl-label span { font-size:9px; }
 .vinyl-waves { left:105px; top:-41px; }
 .vinyl-waves i { border-width:10px; }
 .vinyl-label small { display:none; }
 .stage.is-flat.has-vinyl .title-wrap { top:120px; }
 .stage.is-flat.has-vinyl .scene { top:240px; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 36px); mask-image:linear-gradient(to bottom,transparent 0,#000 36px); }
 .stage.is-flat.has-vinyl .carousel { padding-top:36px; }
 .controls #playToggle { width:46px; height:46px; }
}
@media(prefers-reduced-motion:reduce) { .vinyl-liquid-edge i,.playback-backdrop,.vinyl-disc,.vinyl-waves i { animation:none !important; } .vinyl-deck,.vinyl-arm { transition:none; } }