@font-face { font-family:'Inter';src:local('Inter'),local('Helvetica Neue');font-display:swap; }
@font-face { font-family:'DM Mono';src:local('DM Mono'),local('SFMono-Regular'),local('Menlo');font-display:swap; }

:root { --black:#090a09; --text:#f2f2ee; --dim:#8a8c87; --line:rgba(255,255,255,.14); --acid:#dfff45; --spotify:#1ed760; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:var(--black); color:var(--text); }
body { font-family:'Inter',sans-serif; font-size:16px; -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; } button,select,a { color:inherit; } button,select { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible { outline:1px solid var(--acid); outline-offset:4px; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.glass-filters { position:fixed;width:0;height:0;overflow:hidden;pointer-events:none; }

.topbar { position:fixed;z-index:100;top:0;left:0;right:0;height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 22px;pointer-events:none;opacity:0;transition:opacity .5s cubic-bezier(.22,1,.36,1);background:linear-gradient(to bottom,rgba(9,10,9,.42),transparent); }
.topbar:hover,.topbar:focus-within,.topbar.is-awake,.topbar.is-searching,.topbar.is-near { opacity:1; }
.topbar>* { pointer-events:auto; }
.wordmark { width:max-content;display:flex;align-items:center;gap:9px;color:rgba(242,242,238,.78);text-decoration:none;font-size:11px;font-weight:400;letter-spacing:-.025em; }
.wordmark>span:last-child>span { color:var(--acid); }
.orbit-mark { position:relative;width:22px;height:22px;border:1px solid rgba(255,255,255,.26);border-radius:50%; }
.orbit-mark::before { content:'';position:absolute;inset:6px;border:1px solid rgba(255,255,255,.34);border-radius:50%; }
.orbit-mark i { position:absolute;width:3px;height:3px;top:1px;left:9px;border-radius:50%;background:var(--acid);box-shadow:0 0 8px rgba(223,255,69,.45); }
.library-nav { justify-self:center;display:flex;align-items:center;gap:21px;padding:0;border:0;background:none;opacity:.54;transition:opacity .25s; }
.library-nav:hover { opacity:1; }
.nav-choice,.playlist-control select { position:relative;height:28px;padding:0;border:0;border-radius:0;background:transparent;color:rgba(242,242,238,.46);font:400 8px 'DM Mono',monospace;letter-spacing:.045em;text-transform:uppercase; }
.nav-choice.is-active { background:transparent;color:rgba(242,242,238,.88); }
.nav-choice.is-active::after { content:'';position:absolute;left:50%;bottom:1px;width:3px;height:3px;border-radius:50%;background:rgba(242,242,238,.82);transform:translateX(-50%); }
.playlist-control select { appearance:none;padding-right:13px;background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.42) 50%),linear-gradient(135deg,rgba(255,255,255,.42) 50%,transparent 50%);background-position:calc(100% - 6px) 12px,calc(100% - 3px) 12px;background-size:3px 3px;background-repeat:no-repeat; }
.header-actions { justify-self:end;display:flex;align-items:center;gap:14px;opacity:.56;transition:opacity .25s; }
.header-actions:hover,.header-actions:focus-within { opacity:1; }
.search-box { width:18px;height:30px;display:flex;align-items:center;gap:8px;overflow:hidden;padding:0;border:0;border-bottom:1px solid transparent;background:transparent;color:#aaa;transition:width .32s cubic-bezier(.22,1,.36,1),border-color .2s; }
.search-box:focus-within { width:178px;border-bottom-color:rgba(255,255,255,.24); }
.search-box svg,.icon-button svg { width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round; }
.search-box input { min-width:145px;width:145px;border:0;outline:0;background:transparent;color:#eee;font-size:9px; }
.search-box kbd { display:none; }
.icon-button,.spotify-connect { height:30px;border:0;background:transparent; }
.icon-button { width:17px;padding:0;color:rgba(255,255,255,.58); }
.spotify-connect { display:flex;align-items:center;gap:7px;padding:0;color:rgba(255,255,255,.58);font:400 8px 'DM Mono',monospace;letter-spacing:.02em; }
.spotify-connect i { width:5px;height:5px;border-radius:50%;background:var(--spotify);box-shadow:0 0 9px rgba(30,215,96,.42); }

.canvas-shell { position:fixed; inset:0; overflow:hidden; background:var(--black); touch-action:none; cursor:grab; }
.canvas-shell.is-panning { cursor:grabbing; }
.canvas-shell::before { content:''; position:absolute; z-index:11; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 47%,transparent 0 34%,rgba(5,6,5,.06) 52%,rgba(5,6,5,.36) 76%,rgba(5,6,5,.84) 100%); }
.canvas-shell::after { content:'';position:absolute;z-index:12;inset:0;pointer-events:none;box-shadow:inset 0 0 95px 22px rgba(0,0,0,.62); }
.world { position:absolute; z-index:3; left:0; top:0; width:2400px; height:1600px; transform-origin:0 0; will-change:transform; }
.threads { display:none; }
.thread { fill:none;stroke:rgba(255,255,255,.055);stroke-width:.55;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .5s; }
.thread.is-visible { opacity:1; }
.thread.active-thread { stroke:rgba(223,255,69,.3);stroke-width:.8;stroke-dasharray:3 9; }
.canvas-shell.has-focus .base-thread { opacity:.025!important; }
.lens { display:none; }

.song { --node-scale:1;--fish-scale:1;position:absolute;z-index:4;width:var(--size);padding:0 0 45px;border:0;background:none;text-align:left;opacity:var(--edge-fade,1);perspective:900px;contain:layout style;transform:translate(-50%,-50%) rotateY(var(--tilt-x,0deg)) rotateX(var(--tilt-y,0deg)) scale(calc(var(--node-scale)*var(--fish-scale)));transform-style:preserve-3d;transition:opacity .42s cubic-bezier(.22,1,.36,1),filter .5s cubic-bezier(.22,1,.36,1),transform .16s ease-out,width .5s cubic-bezier(.22,1,.36,1); }
.song-cover { position:relative;z-index:2;display:block;width:100%;aspect-ratio:1;overflow:hidden;border:0;border-radius:2px;background:var(--cover) center/cover no-repeat;filter:none;box-shadow:1px 0 rgba(255,255,255,.1),-1px 0 rgba(0,0,0,.34),0 28px 70px rgba(0,0,0,.38);transform:rotateZ(var(--sleeve-turn,0deg));transform-origin:18% 50%;backface-visibility:hidden;transition:filter .45s ease,box-shadow .55s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1); }
.song-cover::before { content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 38%,rgba(0,0,0,.12));mix-blend-mode:overlay; }
.song-cover::after { content:attr(data-letter);position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.35);font:300 clamp(24px,4vw,54px) 'DM Mono',monospace;text-transform:uppercase; }
.song-cover[style*='url']::after { display:none; }
.song-disc { position:absolute;z-index:1;top:0;left:0;width:100%;aspect-ratio:1;overflow:hidden;isolation:isolate;border-radius:50%;opacity:0;background:#0d0e0c;box-shadow:0 18px 45px rgba(0,0,0,.52),inset 0 0 0 1px rgba(255,255,255,.2);transform:translateX(0) rotate(-24deg) scale(.82);transition:opacity .42s ease,transform .9s cubic-bezier(.22,1,.36,1),box-shadow .55s ease; }
.song-disc-media { position:absolute;z-index:1;inset:0;overflow:hidden;border-radius:50%;transform-origin:50% 50%; }
.song-disc-groove { position:absolute;z-index:1;inset:0;width:100%;height:100%;border-radius:50%;overflow:hidden;background:radial-gradient(circle,#080908 0 4.8%,#d5d7d0 5.2% 6.8%,transparent 7.2%),radial-gradient(circle,transparent 28%,rgba(0,0,0,.65) 29%,transparent 30%),radial-gradient(circle,transparent 44%,rgba(255,255,255,.05) 45%,transparent 46%),radial-gradient(circle,transparent 62%,rgba(0,0,0,.45) 63%,transparent 64%),conic-gradient(from 0deg,rgba(255,255,255,.3) 0deg,transparent 24deg,rgba(145,211,255,.22) 75deg,transparent 110deg,rgba(255,255,255,.3) 180deg,transparent 204deg,rgba(228,174,255,.2) 255deg,transparent 290deg,rgba(255,255,255,.3) 360deg),radial-gradient(circle,#181917 0 28%,#080908 65% 100%);transform-origin:50% 50%;pointer-events:none; }
.song-disc-groove::before { content:'';position:absolute;z-index:1;left:50%;top:50%;width:38%;aspect-ratio:1;border-radius:50%;background:var(--disc-art) center/cover no-repeat;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 2px 10px rgba(0,0,0,.65);transform:translate(-50%,-50%);pointer-events:none; }
.song.is-selected .song-disc-media { animation:vinyl-spin 12s linear infinite;will-change:transform; }
@keyframes vinyl-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.song-disc::before { content:'';position:absolute;z-index:3;left:50%;top:50%;width:13.5%;aspect-ratio:1;border-radius:50%;background:#080908;box-shadow:0 0 0 2px rgba(220,224,216,.8),0 2px 8px rgba(0,0,0,.72),inset 0 0 0 1px rgba(255,255,255,.18);transform:translate(-50%,-50%);pointer-events:none; }
.song-disc::after { content:'';position:absolute;z-index:2;inset:0;border-radius:inherit;background:conic-gradient(from 8deg,transparent 0 10%,rgba(255,255,255,.18) 14%,transparent 20% 42%,rgba(145,211,255,.12) 48%,transparent 56% 78%,rgba(228,174,255,.12) 83%,transparent 90%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 0 12px rgba(0,0,0,.42);mix-blend-mode:screen;pointer-events:none;opacity:.7; }
.song-canvas { position:absolute;z-index:2;inset:0;width:100%;height:100%;display:block;border-radius:50%;object-fit:cover;object-position:center;opacity:0;transform:scale(1.02);transition:opacity .42s ease,transform .6s cubic-bezier(.22,1,.36,1);pointer-events:none;background:#090a09; }
.song-canvas.is-ready { opacity:1;transform:scale(1); }
.song-copy { position:absolute;top:calc(100% - 28px);left:0;width:210px;opacity:.72;transform:none;transition:opacity .2s,transform .2s;text-shadow:0 2px 12px #000,0 0 18px #000;pointer-events:none; }
.song-copy strong,.song-copy small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:300; }
.song-copy strong { color:#e2e3de;font-size:11px; }
.song-copy small { margin-top:2px;color:#898b85;font-size:9px; }
.song-added-date { display:none;align-items:center;gap:4px;margin-top:2px;color:rgba(223,255,69,.75);font:400 8.5px 'DM Mono',monospace;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.song-added-date::before { content:'•';color:rgba(255,255,255,.3);font-size:8px; }
.song:hover,.song.is-hovered { z-index:20;--node-scale:1.09;will-change:transform; }
.song:hover .song-cover,.song.is-hovered .song-cover,.song.is-selected .song-cover { will-change:transform; }
.song:hover .song-disc,.song.is-hovered .song-disc,.song.is-selected .song-disc { will-change:transform,opacity; }
.song:hover .song-cover,.song.is-hovered .song-cover { filter:brightness(1.045);box-shadow:1px 0 rgba(255,255,255,.12),0 32px 80px rgba(0,0,0,.62);transform:translateX(-3%) rotateZ(0deg); }
.song:hover:not(.is-selected) .song-disc,.song.is-hovered:not(.is-selected) .song-disc { opacity:.42;transform:translateX(13%) rotate(22deg) scale(.82); }
.song:hover .song-copy,.song.is-hovered .song-copy { opacity:1; }
.song:hover .song-added-date,.song.is-hovered .song-added-date { display:flex; }
.song.is-selected .song-copy { display:none !important; }
.song.is-selected { z-index:30;--size:260px !important;--node-scale:1.22;--fish-scale:1.12 !important;--tilt-x:0deg !important;--tilt-y:0deg !important;will-change:transform; }
.song.is-selected .song-cover { filter:none;box-shadow:2px 0 rgba(255,255,255,.16),-8px 20px 80px rgba(0,0,0,.58);transform:translateX(-24%) rotateY(-8deg) rotateZ(-1deg);overflow:visible; }
.song.is-selected .song-disc { opacity:1;box-shadow:0 24px 65px rgba(0,0,0,.65),0 0 34px rgba(146,194,255,.12),inset 0 0 0 1px rgba(255,255,255,.24);transform:translateX(43%) rotate(0deg) scale(.84); }
.song.is-selected.has-canvas .song-disc,.song.is-selected .song-disc:has(.song-canvas.is-ready) { transform:translateX(56%) rotate(0deg) scale(.92);box-shadow:0 24px 65px rgba(0,0,0,.75),0 0 40px rgba(146,194,255,.2),inset 0 0 0 1px rgba(255,255,255,.28); }
.song.is-selected.has-canvas:hover .song-disc { transform:translateX(64%) rotate(0deg) scale(.95); }
.song.has-canvas .song-disc::after { opacity:.25; }
.song.is-related .song-cover { filter:none; }
.canvas-shell.has-focus #libraryLayer .song:not(.is-selected):not(.is-related) { opacity:.48;filter:none; }
.canvas-shell.has-focus #libraryLayer .song.is-related { opacity:.68;filter:none; }
.song.is-suggestion-host { opacity:0!important;pointer-events:none; }
.song.is-hidden { opacity:0!important;pointer-events:none; }
.song.recommendation { z-index:15;opacity:0;animation:recommendation-reveal .5s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes recommendation-reveal { from { opacity:0;transform:translate(-50%,-50%) scale(.7); } to { opacity:1;transform:translate(-50%,-50%) scale(1); } }
.song.recommendation .song-cover { filter:none;box-shadow:0 30px 90px rgba(0,0,0,.7); }
.song.recommendation:hover .song-cover { filter:brightness(1.06); }
.song.recommendation::before { display:none; }
.song.is-suggested { z-index:18; }
.song.is-suggested::before { content:'Suggested';position:absolute;z-index:4;display:block;top:8px;right:8px;padding:4px 7px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:linear-gradient(135deg,rgba(27,31,35,.78),rgba(13,14,18,.68));box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 18px rgba(151,198,255,.16),0 4px 16px rgba(0,0,0,.34);color:rgba(245,247,249,.8);font:400 7px 'DM Mono',monospace;letter-spacing:.09em;text-transform:uppercase;backdrop-filter:blur(9px) saturate(1.25); }
.song.is-suggested .song-cover { animation:suggestion-glow 3.6s ease-in-out infinite; }
.song.is-suggested .song-copy strong { color:#e7e9eb; }
.song.is-suggested .song-copy small { color:#9299a2; }
.song.recommendation.is-leaving { animation:none;opacity:0;filter:blur(7px);pointer-events:none;transition:opacity .4s cubic-bezier(.22,1,.36,1),filter .4s cubic-bezier(.22,1,.36,1); }
@keyframes suggestion-glow { 0%,100%{box-shadow:0 0 34px rgba(118,183,255,.14),0 0 72px rgba(205,148,255,.06),0 30px 90px rgba(0,0,0,.68)} 50%{box-shadow:0 0 46px rgba(118,183,255,.24),0 0 88px rgba(205,148,255,.11),0 30px 90px rgba(0,0,0,.68)} }
@keyframes recommendation-in { from{opacity:0;filter:blur(7px);transform:translate(-50%,-50%) scale(.92)} to{opacity:var(--edge-fade,1);filter:blur(0);transform:translate(-50%,-50%) scale(calc(var(--node-scale)*var(--fish-scale)))} }

.canvas-status { display:none; }
.status-divider { width:18px;height:1px;background:#333532; }
.zoom-control { display:none; }
.zoom-control:hover { opacity:1; }
.zoom-control button { width:27px;height:27px;border:0;background:none;color:#777;font-size:12px; }
.zoom-control output { width:38px;color:#555;font:8px 'DM Mono',monospace;text-align:center; }
.canvas-intro { display:none; }
.canvas-intro.is-gone { opacity:0; }

.player::before { content:'';position:absolute;z-index:2;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(132deg,rgba(255,255,255,.58) 0%,rgba(255,255,255,.09) 19%,transparent 42%,rgba(255,255,255,.06) 70%,rgba(255,255,255,.28) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none; }
.player::after { content:'';position:absolute;z-index:0;inset:-45%;background:radial-gradient(circle at var(--glass-x) var(--glass-y),rgba(255,255,255,.2) 0 2%,rgba(255,255,255,.07) 8%,transparent 24%),linear-gradient(118deg,transparent 33%,rgba(255,255,255,.055) 44%,rgba(255,255,255,.015) 49%,transparent 58%);filter:url(#liquid-refraction);transform:translate(var(--glass-shift-x),var(--glass-shift-y));transition:transform .24s ease-out,background-position .24s ease-out;mix-blend-mode:screen;pointer-events:none; }
.player>* { position:relative;z-index:1; }
.player { --glass-x:78%;--glass-y:8%;--glass-shift-x:0px;--glass-shift-y:0px;position:fixed;z-index:200;left:50%;bottom:18px;width:min(490px,calc(100% - 28px));min-height:0;display:grid;grid-template-columns:1fr 24px;align-items:center;gap:6px;overflow:hidden;isolation:isolate;padding:5px;transform:translateX(-50%);border:1px solid transparent;border-radius:15px;background:radial-gradient(100% 150% at 100% 0%,rgba(255,255,255,.09),transparent 38%),linear-gradient(145deg,rgba(31,33,30,.56),rgba(8,9,8,.43));box-shadow:0 20px 65px rgba(0,0,0,.52),inset 10px 10px 22px rgba(255,255,255,.018),inset -12px -13px 24px rgba(0,0,0,.16);backdrop-filter:blur(16px) saturate(1.26) brightness(1.05);-webkit-backdrop-filter:blur(16px) saturate(1.26) brightness(1.05);animation:player-in .38s cubic-bezier(.22,1,.36,1); }
.player[hidden] { display:none; }
@keyframes player-in { from{opacity:0;transform:translate(-50%,15px)} }
.embed-wrap,#spotifyEmbed { position:relative;width:100%;height:80px;overflow:hidden;border-radius:11px; }
.embed-wrap::before { content:'Opening in Spotify…';position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.5);font:8px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase; }
.embed-wrap:has(iframe)::before { display:none; }
.embed-wrap iframe { width:100%;height:80px;margin:0;border:0; }

/* --- Bottom Right Lyrics On/Off Slide Switch --- */
.lyrics-switch-wrap {
  position: fixed;
  right: 24px;
  bottom: 20px;
  z-index: 180;
  pointer-events: auto;
  user-select: none;
  animation: lyrics-switch-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes lyrics-switch-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.lyrics-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px 0 13px;
  border-radius: 9999px;
  background: rgba(14, 15, 17, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.lyrics-switch:hover {
  background: rgba(22, 23, 27, 0.92);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.lyrics-switch:active {
  transform: scale(0.96);
}

.lyrics-switch:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 2px;
}

.lyrics-switch-label {
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s ease;
}

.lyrics-switch:hover .lyrics-switch-label {
  color: rgba(255, 255, 255, 0.9);
}

.lyrics-switch.is-active .lyrics-switch-label {
  color: #f2f2ee;
}

/* The Slide Track */
.lyrics-switch-track {
  position: relative;
  display: block;
  width: 32px;
  height: 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: background 0.24s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.24s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.24s ease;
}

/* The Slide Thumb (Knob) */
.lyrics-switch-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transform: translateX(0);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.2s ease,
              box-shadow 0.2s ease;
}

/* Active State (ON) */
.lyrics-switch.is-active {
  border-color: rgba(223, 255, 69, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 14px rgba(223, 255, 69, 0.12), inset 0 1px 0 rgba(223, 255, 69, 0.2);
}

.lyrics-switch.is-active .lyrics-switch-track {
  background: rgba(223, 255, 69, 0.24);
  border-color: rgba(223, 255, 69, 0.5);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}

.lyrics-switch.is-active .lyrics-switch-thumb {
  transform: translateX(14px);
  background: var(--acid);
  box-shadow: 0 0 8px rgba(223, 255, 69, 0.85), 0 2px 4px rgba(0, 0, 0, 0.35);
}

/* Status Indicator (ON / OFF text) */
.lyrics-switch-status {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  min-width: 18px;
  text-align: left;
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.lyrics-switch.is-active .lyrics-switch-status {
  color: var(--acid);
  text-shadow: 0 0 6px rgba(223, 255, 69, 0.4);
}

.player-close { width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.42);font-size:15px; }
.player-close:hover { color:#fff;background:rgba(255,255,255,.1); }

/* --- Dual-Edge Album Cover Lyrics (Pendulum / Circular Motion) --- */
.ambient-lyrics { display: none !important; }

.cover-lyrics {
  --cover-height: var(--size, 260px);
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transform-style: preserve-3d;
  perspective: 850px;
  transition: opacity .35s ease;
}

.song.is-selected .cover-lyrics {
  opacity: 1;
  transition: opacity .4s ease .18s;
}

.song.is-lyrics-disabled .cover-lyrics {
  display: none !important;
}

.cover-lyric-line {
  position: absolute;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  display: block;
  text-align: center;
  white-space: nowrap;
  width: max-content;
  max-width: min(390px, 92vw);
  box-sizing: border-box;
  padding: 6px 16px;
  border-radius: 999px;
  font-family: 'DM Mono', monospace;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.cover-lyric-line.is-top {
  top: -16px;
  font-size: 11px;
  color: #ffffff;
  background: rgba(13, 14, 12, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.4);
  z-index: 3;
}

.cover-lyric-line.is-bottom {
  bottom: -16px;
  font-size: 9.5px;
  color: rgba(220, 224, 216, 0.52);
  background: rgba(11, 12, 10, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  z-index: 2;
  transition: opacity .25s ease;
}

.cover-lyric-line.is-bottom:empty,
.cover-lyric-line.is-top:empty {
  opacity: 0;
  pointer-events: none;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

/* Continuous high-velocity pendulum arc upwards from bottom to top */
.cover-lyric-line.is-pendulum-up,
.cover-lyric-line.is-pendulum-up-a {
  animation: cover-pendulum-to-top-a 0.52s linear forwards;
  will-change: transform, opacity;
}
.cover-lyric-line.is-pendulum-up-b {
  animation: cover-pendulum-to-top-b 0.52s linear forwards;
  will-change: transform, opacity;
}

/* Previous line swings behind the album cover square */
.cover-lyric-line.is-swing-behind {
  top: -16px;
  font-size: inherit;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(13, 14, 12, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65);
  z-index: 1;
  animation: cover-swing-behind 0.42s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  will-change: transform, opacity;
}

.cover-lyric-line.is-entering,
.cover-lyric-line.is-entering-a {
  animation: cover-bottom-in-a 0.36s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  will-change: transform, opacity;
}
.cover-lyric-line.is-entering-b {
  animation: cover-bottom-in-b 0.36s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  will-change: transform, opacity;
}

@keyframes cover-pendulum-to-top-a {
  0% {
    transform: translate3d(-50%, var(--cover-height, 260px), 0) scale(0.94) rotateZ(-2.2deg);
    opacity: 0.58;
    animation-timing-function: cubic-bezier(0.38, 0.04, 0.62, 0.44);
  }
  50% {
    transform: translate3d(calc(-50% - 10px), calc(var(--cover-height, 260px) * 0.5), 44px) scale(1.03) rotateZ(1.2deg);
    opacity: 0.92;
    animation-timing-function: cubic-bezier(0.2, 0.56, 0.28, 1);
  }
  100% {
    transform: translate3d(-50%, 0, 0) scale(1) rotateZ(0deg);
    opacity: 1;
  }
}

@keyframes cover-pendulum-to-top-b {
  0% {
    transform: translate3d(-50%, var(--cover-height, 260px), 0) scale(0.94) rotateZ(-2.2deg);
    opacity: 0.58;
    animation-timing-function: cubic-bezier(0.38, 0.04, 0.62, 0.44);
  }
  50% {
    transform: translate3d(calc(-50% - 10px), calc(var(--cover-height, 260px) * 0.5), 44px) scale(1.03) rotateZ(1.2deg);
    opacity: 0.92;
    animation-timing-function: cubic-bezier(0.2, 0.56, 0.28, 1);
  }
  100% {
    transform: translate3d(-50%, 0, 0) scale(1) rotateZ(0deg);
    opacity: 1;
  }
}

@keyframes cover-swing-behind {
  0% {
    transform: translate3d(-50%, 0, 0) rotateX(0deg);
    opacity: 0.95;
  }
  100% {
    transform: translate3d(-50%, -26px, -70px) rotateX(74deg);
    opacity: 0;
  }
}

@keyframes cover-bottom-in-a {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 10px, 0) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
}

@keyframes cover-bottom-in-b {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 10px, 0) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
}





.modal { width:min(480px,calc(100% - 28px));padding:30px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:radial-gradient(100% 90% at 100% 0%,rgba(255,255,255,.055),transparent 42%),rgba(11,12,10,.92);color:#eee;box-shadow:0 35px 120px #000;backdrop-filter:blur(24px) saturate(1.15); }
.modal::backdrop { background:rgba(0,0,0,.8);backdrop-filter:blur(8px); }.modal-close { position:absolute;right:13px;top:10px;border:0;background:none;color:#777;font-size:20px; }
.modal-label { margin:0 0 9px;color:var(--acid);font:8px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.13em; }.modal h2 { margin:0 0 10px;font-size:23px;font-weight:400;letter-spacing:-.05em; }
.modal>p:not(.modal-label):not(.modal-foot) { margin:0;color:#858782;font-size:11px;line-height:1.6; }
.import-steps { position:relative;display:grid;gap:14px;margin:23px 0 20px;padding:0;list-style:none; }
.import-steps::before { content:'';position:absolute;left:12px;top:25px;bottom:25px;width:1px;background:rgba(255,255,255,.1); }
.import-steps li { position:relative;display:grid;grid-template-columns:25px 1fr;align-items:center;gap:12px; }
.import-steps li>span { z-index:1;width:25px;height:25px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:#0d0e0c;color:#aeb1aa;font:8px 'DM Mono',monospace; }
.import-steps strong,.import-steps small { display:block;font-weight:400; }.import-steps strong { color:#dfe0dc;font-size:11px; }.import-steps small { margin-top:3px;color:#6f716c;font-size:9px;line-height:1.4; }
.export-action { height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-radius:10px;background:#f0f1eb;color:#10110f;font-size:10px;font-weight:500;text-decoration:none;transition:background .2s,transform .2s; }
.export-action:hover { background:#fff;transform:translateY(-1px); }.export-action span { font-size:14px;font-weight:300; }
.import-divider { position:relative;margin:17px 0!important;text-align:center; }.import-divider::before { content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(255,255,255,.09); }.import-divider span { position:relative;padding:0 9px;background:#0c0d0b;color:#565853;font:7px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.12em; }
.drop-zone { height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 0 11px;border:1px dashed rgba(255,255,255,.2);border-radius:11px;background:rgba(4,5,4,.5);text-align:center;cursor:pointer;transition:border-color .2s,background .2s,opacity .2s; }
.drop-zone.is-over { border-color:var(--acid);background:rgba(223,255,69,.025); }.drop-zone.is-importing { opacity:.58;pointer-events:none; }.drop-zone input { display:none; }.drop-icon { margin-bottom:9px;color:var(--acid);font-size:18px; }.drop-zone strong { font-size:10px;font-weight:400; }.drop-zone small { margin-top:5px;color:#62645f;font-size:8px; }
.modal-foot { margin:12px 0 0;color:#555;font:8px/1.5 'DM Mono',monospace; }.modal-foot a { color:#979b91;text-decoration:none; }.modal-foot a:hover { color:#e7e9e2; }.field-label { display:block;margin:16px 0 7px;color:#777;font-size:9px; }
.text-field { width:100%;height:40px;padding:0 11px;border:1px solid #333;outline:0;background:#070806;color:#eee;font:10px 'DM Mono',monospace; }.text-field:focus { border-color:#777; }
.copy-uri { width:100%;min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid #333;background:#070806;color:#777;text-align:left; }.copy-uri code { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:8px 'DM Mono',monospace; }.copy-uri span { color:var(--acid);font-size:8px; }
.modal-primary { width:100%;height:40px;margin-top:16px;border:0;background:var(--spotify);color:#06150a;font-size:10px; }
.toast { position:fixed;z-index:300;left:50%;top:20px;padding:8px 13px;transform:translate(-50%,-10px);border:1px solid #333;background:#10110e;color:#bbb;font:9px 'DM Mono',monospace;opacity:0;pointer-events:none;transition:.2s; }.toast.is-visible { opacity:1;transform:translate(-50%,0); }

/* --- Floating Rotating Mini-CD --- */
.floating-cd {
  position: fixed;
  z-index: 180;
  top: 76px;
  right: 28px;
  width: 68px;
  height: 68px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  transform-origin: 50% 50%;
  will-change: transform, width, height;
  user-select: none;
  -webkit-user-select: none;
}
.floating-cd[hidden] {
  display: none !important;
}
.floating-cd-disc {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  background: #0d0e0c;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.72), 0 0 28px rgba(146, 194, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  transition: box-shadow 0.3s ease, transform .28s cubic-bezier(.22,1,.36,1);
}
.floating-cd:hover .floating-cd-disc { transform: scale(1.06); }
.floating-cd:active .floating-cd-disc { transform: scale(.97); }
.floating-cd:hover .floating-cd-disc {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.8), 0 0 36px rgba(223, 255, 69, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}
.floating-cd-groove {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle, #080908 0 4.8%, #d5d7d0 5.2% 6.8%, transparent 7.2%),
              radial-gradient(circle, transparent 28%, rgba(0,0,0,.65) 29%, transparent 30%),
              radial-gradient(circle, transparent 44%, rgba(255,255,255,.05) 45%, transparent 46%),
              radial-gradient(circle, transparent 62%, rgba(0,0,0,.45) 63%, transparent 64%),
              conic-gradient(from 0deg, rgba(255,255,255,.3) 0deg, transparent 24deg, rgba(145,211,255,.22) 75deg, transparent 110deg, rgba(255,255,255,.3) 180deg, transparent 204deg, rgba(228,174,255,.2) 255deg, transparent 290deg, rgba(255,255,255,.3) 360deg),
              radial-gradient(circle, #181917 0 28%, #080908 65% 100%);
  transform-origin: 50% 50%;
  pointer-events: none;
}
.floating-cd-media {
  position:absolute;
  z-index:1;
  inset:0;
  overflow:hidden;
  border-radius:50%;
  transform-origin:50% 50%;
}
.floating-cd.is-docked .floating-cd-media,
.floating-cd.is-animating .floating-cd-media {
  animation: vinyl-spin 9s linear infinite;
  will-change: transform;
}
.floating-cd-label {
  content: '';
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--disc-art, #111) center/cover no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 2px 8px rgba(0, 0, 0, 0.7);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.floating-cd-hole {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 13.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #080908;
  box-shadow: 0 0 0 1.5px rgba(220, 224, 216, 0.82), 0 2px 6px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.floating-cd-shine {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from 8deg, transparent 0 10%, rgba(255,255,255,.18) 14%, transparent 20% 42%, rgba(145,211,255,.12) 48%, transparent 56% 78%, rgba(228,174,255,.12) 83%, transparent 90%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), inset 0 0 10px rgba(0,0,0,.45);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.75;
}
.floating-cd .song-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  opacity: 1;
  pointer-events: none;
}
.floating-cd-badge {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  min-width: 195px;
  max-width: 255px;
  padding: 10px 14px;
  border-radius: 13px;
  background: radial-gradient(100% 120% at 100% 0%, rgba(255,255,255,0.08), transparent 45%), rgba(14, 15, 13, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  text-align: left;
}
.floating-cd:hover .floating-cd-badge,
.floating-cd:focus-visible .floating-cd-badge {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}
.floating-cd-nowplaying {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 2px;
}
.floating-cd-equalizer {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
  flex: 0 0 auto;
}
.floating-cd-equalizer i {
  width: 2px;
  background: var(--acid);
  border-radius: 1px;
  animation: eq-bounce 0.8s ease-in-out infinite alternate;
}
.floating-cd-equalizer i:nth-child(1) { height: 6px; animation-delay: 0.1s; }
.floating-cd-equalizer i:nth-child(2) { height: 10px; animation-delay: 0.3s; }
.floating-cd-equalizer i:nth-child(3) { height: 4px; animation-delay: 0.2s; }
@keyframes eq-bounce {
  from { height: 2px; }
  to { height: 10px; }
}
.floating-cd-title {
  font-size: 11.5px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.floating-cd-artist {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.floating-cd-hint {
  font-family: 'DM Mono', monospace;
  font-size: 7.5px;
  color: rgba(255, 255, 255, 0.42);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 5px;
}

@media(max-width:850px){.topbar{grid-template-columns:1fr auto;padding:0 14px}.library-nav{display:none}.header-actions{justify-self:end}.spotify-connect span{display:none}.spotify-connect{width:22px;padding:0;justify-content:center}.player{grid-template-columns:1fr 24px}.floating-cd{top:70px;right:18px}}
@media(max-width:560px){.wordmark>span:last-child{display:none}.song{padding-bottom:34px}.search-box:focus-within{width:145px}.player{grid-template-columns:1fr 22px;padding:4px;border-radius:14px}.lyrics-switch-wrap{bottom:102px;right:14px}.embed-wrap,.embed-wrap iframe{height:80px}.canvas-intro{display:none}.floating-cd{top:64px;right:14px;width:54px;height:54px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}.song-disc-media,.floating-cd-media,.floating-cd-equalizer i,.ambient-lyric-word{animation:none!important}}