/* ==========================================================================
   SLOP — Liquid Glass design system
   1 tokens · 2 base · 3 ambient light · 4 glass material · 5 controls
   6 shell + home · 7 album · 8 mini player · 9 now playing · 10 lyrics
   11 toast + gate dialog + secret stage · 12 responsive · 13 motion prefs
   ========================================================================== */

/* ---------- 1 tokens ---------- */
@property --c1 { syntax: '<color>'; inherits: true; initial-value: #b0b8c4; }
@property --c2 { syntax: '<color>'; inherits: true; initial-value: #68707e; }
@property --c3 { syntax: '<color>'; inherits: true; initial-value: #101114; }
@property --tint { syntax: '<color>'; inherits: true; initial-value: #eef1f6; }
@property --glow { syntax: '<number>'; inherits: true; initial-value: 0; }
:root {
  color-scheme: dark;
  --bg: #07080a; --ink: #f5f6f8; --muted: rgb(236 239 245 / .6); --faint: rgb(236 239 245 / .36); --line: rgb(255 255 255 / .09);
  --accent: #fff; --surface: #14161a;
  --display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
  --body: Inter, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Arial, sans-serif;
  --r-xl: 30px; --r-lg: 24px; --r-md: 16px; --r-sm: 12px;
  --edge: 14px;
  /* springs: real values are solved in motion.js; these are the no-JS fallbacks */
  --spring-smooth: cubic-bezier(.22, .9, .24, 1); --dur-smooth: 520ms;
  --spring-gentle: cubic-bezier(.2, .85, .2, 1); --dur-gentle: 760ms;
  --spring-snappy: cubic-bezier(.2, .9, .3, 1); --dur-snappy: 320ms;
  --spring-lively: cubic-bezier(.3, 1.35, .5, 1); --dur-lively: 560ms;
  transition: --c1 1.6s ease, --c2 1.6s ease, --c3 1.6s ease, --tint 1.2s ease;
}

/* ---------- 2 base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); font: 16px/1.45 var(--body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
body.np-open { overflow: hidden; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
button:hover, a:hover { color: #fff; }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--tint) 80%, #fff); outline-offset: 3px; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }
kbd { font: 600 11px var(--body); padding: 2px 6px; border-radius: 6px; background: rgb(255 255 255 / .1); color: var(--muted); }
h1, h2, h3, p { margin: 0; }
.mono { font: 11px/1.5 var(--mono); letter-spacing: .08em; color: var(--muted); }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 99px; font: 700 10.5px var(--body); letter-spacing: .08em; color: var(--ink); background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); white-space: nowrap; }
.explicit { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; font: 800 10px var(--body); background: rgb(255 255 255 / .22); color: #fff; }
[aria-pressed=true] { color: #fff; }

/* ---------- 3 ambient light (static gradients in the theme colours: nothing to repaint while scrolling) ---------- */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.blob { position: absolute; border-radius: 50%; }
.blob-a { width: 80vmax; height: 80vmax; left: -14%; top: -30%; background: radial-gradient(closest-side, color-mix(in oklab, var(--c1) 34%, transparent), color-mix(in oklab, var(--c1) 9%, transparent) 55%, transparent); }
.blob-b { width: 66vmax; height: 66vmax; right: -12%; top: 4%; background: radial-gradient(closest-side, color-mix(in oklab, var(--c2) 34%, transparent), transparent); }
.blob-c { width: 70vmax; height: 70vmax; left: 20%; bottom: -34%; background: radial-gradient(closest-side, color-mix(in oklab, var(--c1) 16%, var(--c2) 10%), transparent); opacity: .7; }
.ambient::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(7 8 10 / .3), rgb(7 8 10 / .62) 55%, rgb(7 8 10 / .9)); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- 4 glass material ----------
   layers, back to front:  tinted body + backdrop blur → pointer specular (::before) → content → rim light (::after) */
.glass {
  --glass-blur: 18px;
  position: relative; isolation: isolate;
  background:
    linear-gradient(180deg, rgb(255 255 255 / .115), rgb(255 255 255 / .03) 44%, rgb(255 255 255 / .06)),
    color-mix(in srgb, var(--c3) 34%, rgb(20 22 27 / .46));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .2), inset 0 -10px 18px -14px rgb(255 255 255 / .16),
    0 1px 2px rgb(0 0 0 / .3), 0 26px 60px -20px rgb(0 0 0 / .7);
  transition: --glow .5s ease, box-shadow .5s ease;
}
.glass::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgb(255 255 255 / calc(var(--glow) * .13)), transparent 68%); }
.glass::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background:
    radial-gradient(200px circle at var(--mx, 50%) var(--my, 0%), rgb(255 255 255 / calc(var(--glow) * .75)), transparent 70%),
    linear-gradient(145deg, rgb(255 255 255 / .42), rgb(255 255 255 / .06) 28%, rgb(255 255 255 / .02) 62%, rgb(255 255 255 / .24));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.glass.lit { --glow: 1; }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .glass { background: rgb(24 26 31 / .94); } }
.lite .glass { --glass-blur: 8px; }
/* solid frosted panel: same look, no backdrop sampling (used where content sits on top of busy layers) */
.hero-now, .menu, .sync-bar, .text-editor { background: linear-gradient(180deg, rgb(255 255 255 / .09), rgb(255 255 255 / .03) 44%), rgb(26 28 33 / .93); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), inset 0 0 0 1px rgb(255 255 255 / .07), 0 26px 60px -20px rgb(0 0 0 / .8); }

/* ---------- 5 controls ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: 99px; font: 650 15px var(--body); letter-spacing: -.005em; white-space: nowrap; user-select: none;
  transition: scale var(--dur-snappy) var(--spring-snappy), translate .1s linear, background-color .3s ease, box-shadow .45s ease, --glow .5s ease, opacity .3s; }
.btn svg { width: 19px; height: 19px; }
.btn:hover { scale: 1.035; }
.btn:active { scale: .955; transition-duration: 90ms; }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn-solid, .primary { background: linear-gradient(180deg, #fff, #dfe3ea); color: #0a0b0d; box-shadow: inset 0 1px 0 #fff, inset 0 -6px 10px -6px rgb(0 0 0 / .25), 0 10px 30px -10px rgb(255 255 255 / .35), 0 2px 4px rgb(0 0 0 / .3); }
.btn-solid:hover, .primary:hover { color: #0a0b0d; box-shadow: inset 0 1px 0 #fff, inset 0 -6px 10px -6px rgb(0 0 0 / .2), 0 14px 44px -8px color-mix(in srgb, var(--tint) 55%, rgb(255 255 255 / .5)), 0 2px 4px rgb(0 0 0 / .3); }
.btn-glass { color: var(--ink); }
.btn-icon { width: 48px; padding: 0; }
.btn-sm { height: 38px; padding: 0 16px; font-size: 13.5px; gap: 8px; }
.btn-sm svg { width: 16px; height: 16px; }
.magnet { translate: calc(var(--px, 0) * 4px) calc(var(--py, 0) * 3px); }
/* legacy primary button (gate, zombie) keeps its markup, gets the new skin */
.primary { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: 99px; font: 650 15px var(--body); transition: scale var(--dur-snappy) var(--spring-snappy), box-shadow .45s; }
.primary:hover { scale: 1.03; } .primary:active { scale: .96; }
.lyrics-link { display: inline-flex; gap: 10px; align-items: center; font-size: 14px; padding: 13px 0; }

.icon-button { position: relative; width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--ink);
  transition: scale var(--dur-snappy) var(--spring-snappy), background-color .3s, color .25s, opacity .25s; }
.icon-button svg { width: 20px; height: 20px; }
.icon-button:hover { background: rgb(255 255 255 / .1); scale: 1.08; }
.icon-button:active { scale: .88; transition-duration: 90ms; }
.icon-button.subtle { color: var(--faint); }
.icon-button.subtle:hover { color: #fff; }
.icon-button[aria-pressed=true], .np-ctl[aria-pressed=true] { color: var(--tint); }
.icon-button[aria-pressed]::after, .np-ctl[aria-pressed]::after { content: ''; position: absolute; bottom: 3px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; scale: 0; transition: scale var(--dur-lively) var(--spring-lively); }
.icon-button[aria-pressed=true]::after, .np-ctl[aria-pressed=true]::after { scale: 1; }
.skip svg { transition: translate var(--dur-lively) var(--spring-lively); }
#next:active svg, #np-next:active svg { translate: 5px 0; } #previous:active svg, #np-previous:active svg { translate: -5px 0; }

/* play ⇄ pause morph: two halves of a triangle become two bars */
.pp { display: inline-grid; grid-template-columns: 1fr 1fr; width: 18px; height: 18px; flex-shrink: 0; }
.pp i { background: currentColor; clip-path: polygon(20% 5%, 100% 26.2%, 100% 73.8%, 20% 95%); transition: clip-path var(--dur-snappy) var(--spring-snappy); margin-right: -.6px; }
.pp i + i { clip-path: polygon(0 26.2%, 90% 50%, 90% 50%, 0 73.8%); margin: 0; }
.is-playing :is(#play, #np-play, #hero-play, #ss-play, .track-row.selected:not(.secret-row)) .pp i { clip-path: polygon(34% 8%, 80% 8%, 80% 92%, 34% 92%); }
.is-playing :is(#play, #np-play, #hero-play, #ss-play, .track-row.selected:not(.secret-row)) .pp i + i { clip-path: polygon(20% 8%, 66% 8%, 66% 92%, 20% 92%); }

/* sliders: built from a rail, a fill and a knob, so they look the same in every browser */
.slider { --p: 0; position: relative; display: flex; align-items: center; height: 22px; min-width: 0; cursor: pointer; touch-action: none; outline: none; user-select: none; -webkit-user-select: none; }
.slider .rail { position: relative; display: block; width: 100%; height: 4px; border-radius: 99px; overflow: hidden; background: rgb(255 255 255 / .2); transition: height var(--dur-snappy) var(--spring-snappy), background-color .3s; }
.slider .rail i { position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--p)); }
.slider .knob { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgb(0 0 0 / .55); scale: 0; pointer-events: none; transition: scale var(--dur-lively) var(--spring-lively); }
.slider:hover .rail, .slider.dragging .rail, .slider:focus-visible .rail { height: 7px; background: rgb(255 255 255 / .26); }
.slider:hover .knob, .slider:focus-visible .knob { scale: 1; } .slider.dragging .knob { scale: 1.25; }
.slider:focus-visible .rail { box-shadow: 0 0 0 2px color-mix(in srgb, var(--tint) 70%, transparent); }
.slider-lg { height: 30px; } .slider-lg .rail { height: 7px; }
.slider-lg:hover .rail, .slider-lg.dragging .rail, .slider-lg:focus-visible .rail { height: 13px; }
.slider-lg .knob { display: none; }

/* tiny 3-bar level meter, driven by the analyser (bass / mid / treble) */
.eq { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 14px; }
.eq i { width: 3px; height: 100%; border-radius: 2px; background: var(--tint); transform-origin: bottom; transform: scaleY(.18); transition: transform 110ms linear; }

/* ---------- 6 shell + home ---------- */
.app { min-height: 100dvh; }
.shell { padding: 0 clamp(18px, 4vw, 56px) 140px; }
main { max-width: 1160px; margin: 0 auto; }
.brand { display: inline-flex; padding: 0 4px; transition: scale var(--dur-lively) var(--spring-lively); }
.brand:hover { scale: 1.04; } .brand:active { scale: .96; }
.brand-wordmark { position: relative; font: 900 italic 44px/.9 var(--display); letter-spacing: -2px; padding-right: 4px;
  background: linear-gradient(175deg, #fff 18%, #aeb6c2 46%, #fff 58%, #cfd4dc 96%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-dot { position: absolute; right: -10px; top: 0; font: 600 11px var(--body); letter-spacing: 0; color: var(--muted); -webkit-text-fill-color: currentColor; }
.back { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 18px 0 10px; border-radius: 99px; font: 600 14.5px var(--body); color: var(--ink); transition: scale var(--dur-snappy) var(--spring-snappy), --glow .5s; }
.back svg { width: 20px; height: 20px; transition: translate var(--dur-lively) var(--spring-lively); }
.back:hover { scale: 1.04; } .back:hover svg { translate: -3px 0; } .back:active { scale: .95; }
.albums { display: grid; place-items: center; min-height: calc(100dvh - 96px); padding: 0 0 8vh; }
.album-card { display: block; width: min(440px, 76vw, 58vh); border-radius: 30px; }
.album-cover { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 28px;
  box-shadow: 0 44px 90px -34px rgb(0 0 0 / .9), 0 30px 90px -30px color-mix(in srgb, var(--c1) 55%, transparent), 0 2px 6px rgb(0 0 0 / .4);
  transform: perspective(900px) rotateX(calc(var(--py, 0) * -8deg)) rotateY(calc(var(--px, 0) * 8deg));
  transition: scale var(--dur-lively) var(--spring-lively), box-shadow .6s ease; }
.album-cover .art img { transition: scale var(--dur-gentle) var(--spring-gentle); }
.album-card:hover .album-cover { scale: 1.035; box-shadow: 0 60px 100px -34px rgb(0 0 0 / .95), 0 44px 110px -28px color-mix(in srgb, var(--c1) 75%, transparent), 0 2px 6px rgb(0 0 0 / .4); }
.album-card:hover .album-cover .art img { scale: 1.06; }
.album-card:active .album-cover { scale: .975; }
.album-cover .art-sheen { opacity: .35; } .album-card:hover .art-sheen { opacity: 1; }
/* far below the album: the question mark */
.home-deep { height: 95vh; }
.secret-door { display: block; width: clamp(84px, 11vw, 132px); aspect-ratio: 1; margin: 0 auto 16vh; border-radius: 50%; opacity: .5; transition: opacity .8s ease, scale var(--dur-lively) var(--spring-lively); }
.secret-door img { width: 100%; height: 100%; object-fit: contain; display: block; filter: grayscale(1) brightness(.8); transition: filter 2.4s ease; animation: ss-float 11s ease-in-out infinite alternate; }
.secret-door:hover { opacity: 1; scale: 1.12; } .secret-door:active { scale: .94; }
.secret-revealed .secret-door { opacity: 1; } .secret-revealed .secret-door img { filter: none; }
/* the mini player only appears once something has been played */
body.secret-current .player, body[data-view=home]:not(.has-played) .player { opacity: 0; pointer-events: none; translate: 0 30px; }

/* ---------- 7 album ---------- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: max(18px, env(safe-area-inset-top)) 0 14px; }
.search { display: flex; align-items: center; gap: 10px; width: min(340px, 100%); height: 44px; padding: 0 12px 0 14px; border-radius: 99px; color: var(--muted); cursor: text;
  transition: width var(--dur-smooth) var(--spring-smooth), --glow .5s, box-shadow .5s; }
.search svg { width: 18px; height: 18px; transition: color .3s; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--ink); font: 500 15px var(--body); }
.search input::placeholder { color: var(--faint); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; cursor: pointer; background: rgb(255 255 255 / .35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m5 5 6 6m0-6-6 6' stroke='%23111' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.search:focus-within { width: min(420px, 100%); --glow: .8; box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 0 0 3px color-mix(in srgb, var(--tint) 30%, transparent), 0 26px 60px -20px rgb(0 0 0 / .7); }
.search:focus-within svg, .search.has-value svg { color: #fff; }
.search:focus-within kbd, .search.has-value kbd { display: none; }

.hero { display: grid; grid-template-columns: clamp(210px, 25vw, 320px) minmax(0, 1fr); gap: clamp(26px, 4vw, 52px); align-items: end; padding: 14px 0 46px; }
.art { position: absolute; inset: 0; display: block; border-radius: inherit; overflow: hidden; background: linear-gradient(145deg, #1b1e22, #0b0c0e); }
.art img, .track-thumb img, .np-bg-art img { filter: grayscale(1) contrast(1.06); }
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.art-sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(60% 60% at calc(50% + var(--px, 0) * 45%) calc(50% + var(--py, 0) * 45%), rgb(255 255 255 / .28), transparent 70%); mix-blend-mode: soft-light;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), inset 0 1px 0 rgb(255 255 255 / .3); }
.hero-art { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 22px; cursor: pointer;
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / .85), 0 30px 70px -30px color-mix(in srgb, var(--c1) 55%, transparent), 0 2px 6px rgb(0 0 0 / .4);
  transform: perspective(900px) rotateX(calc(var(--py, 0) * -7deg)) rotateY(calc(var(--px, 0) * 7deg)); scale: 1;
  transition: scale var(--dur-lively) var(--spring-lively), box-shadow .6s ease; }
.hero-art .art img { transition: scale var(--dur-gentle) var(--spring-gentle); }
.hero-art:hover { scale: 1.025; box-shadow: 0 54px 90px -30px rgb(0 0 0 / .9), 0 40px 90px -26px color-mix(in srgb, var(--c1) 75%, transparent), 0 2px 6px rgb(0 0 0 / .4); }
.hero-art:hover .art img { scale: 1.06; }
.hero-art:active { scale: .98; }
.hero-art.following .art-sheen, .hero-art:hover .art-sheen { opacity: 1; }
.art-sheen { opacity: .0; } .hero-art .art-sheen, .np-art .art-sheen { opacity: .35; }
.hero-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
#album-title { font: 900 italic clamp(5.2rem, 11vw, 9.4rem)/.8 var(--display); letter-spacing: -.04em; margin: 2px 0 6px -4px; padding-right: .12em;
  background: linear-gradient(172deg, #fff 22%, #9aa3b0 47%, #fdfdfd 56%, #c9ced6 74%, color-mix(in srgb, var(--tint) 75%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 30px rgb(0 0 0 / .45)); }
.hero-artist { font: 600 clamp(19px, 2vw, 24px)/1.2 var(--body); letter-spacing: -.015em; background: linear-gradient(180deg, #fff, #a9b1bd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-artist span { -webkit-text-fill-color: var(--faint); }
.hero-artist span { color: var(--faint); font-weight: 400; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; font: 500 13.5px var(--body); color: var(--muted); }
.hero-meta > span:not(.explicit):not(:first-child)::before { content: '·'; margin: 0 8px; color: var(--faint); }
.hero-meta .explicit { margin-left: 10px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.hero-actions .btn-solid { min-width: 156px; }
.hero-now { display: flex; align-items: center; gap: 14px; margin-top: 14px; max-width: 100%; padding: 10px 16px 10px 14px; border-radius: 18px; }
.hero-now-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hero-now-text .mono { font-size: 10px; }
.hero-now-text strong { font: 650 15px/1.3 var(--body); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-now-meta { font: 500 12.5px var(--body); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.collection-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 10px; padding: 0 14px; }
.collection-heading h2 { font: 750 24px var(--body); letter-spacing: -.025em; }
.collection-heading h2 span { font: 500 15px var(--body); color: var(--faint); padding-left: 4px; }
.collection-heading > span { font: 10.5px var(--mono); color: var(--faint); letter-spacing: .1em; }
.track-head, .track-row { display: grid; grid-template-columns: 40px 48px minmax(0, 1fr) minmax(90px, 150px) 56px 52px 40px; align-items: center; gap: 14px; padding: 0 14px; }
.track-head { height: 34px; font: 700 10.5px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--line); margin-bottom: 6px; transition: opacity .3s; }
.track-head.faded { opacity: 0; }
.track-head span:first-child { text-align: center; } .track-head span:nth-child(6) { text-align: right; } .track-head svg { width: 14px; height: 14px; vertical-align: middle; }
.track-list { display: flex; flex-direction: column; gap: 2px; }
.track-row { position: relative; isolation: isolate; height: 64px; border-radius: 16px; cursor: default;
  transition: scale var(--dur-snappy) var(--spring-snappy), background-color .35s ease, box-shadow .45s ease, --glow .45s ease; }
.track-row::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / calc(var(--glow) * .1)), transparent 70%); }
.track-row.lit { --glow: 1; }
.track-row:hover { background: rgb(255 255 255 / .055); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 14px 30px -18px rgb(0 0 0 / .8); scale: 1.006; }
.track-row.selected { background: linear-gradient(90deg, color-mix(in srgb, var(--tint) 15%, rgb(255 255 255 / .05)), rgb(255 255 255 / .06) 60%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), inset 0 0 0 1px rgb(255 255 255 / .06), 0 18px 40px -22px rgb(0 0 0 / .9), 0 0 40px -18px color-mix(in srgb, var(--tint) 50%, transparent); }
.row-play { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); transition: scale var(--dur-snappy) var(--spring-snappy), color .25s; }
.row-play > * { grid-area: 1 / 1; transition: opacity .22s ease, scale var(--dur-lively) var(--spring-lively); }
.row-play:active { scale: .86; }
.row-num { font: 500 14px var(--body); font-variant-numeric: tabular-nums; }
.row-play .pp, .row-play .eq, .row-play .row-lock { opacity: 0; scale: .5; }
.row-play .pp { width: 15px; height: 15px; color: #fff; } .row-lock svg { width: 16px; height: 16px; display: block; }
.track-row:hover .row-num, .track-row:focus-within .row-num, .track-row.selected .row-num, .track-row.is-locked .row-num { opacity: 0; scale: .5; }
.track-row:hover .pp, .row-play:focus-visible .pp { opacity: 1; scale: 1; }
.track-row.selected .pp { opacity: 1; scale: 1; color: var(--tint); }
.is-playing .track-row.selected:not(:hover) .pp { opacity: 0; scale: .5; } .is-playing .track-row.selected:not(:hover) .eq { opacity: 1; scale: 1; }
.track-row.is-locked .row-lock { opacity: 1; scale: 1; } .track-row.is-locked .pp { opacity: 0 !important; }
.track-thumb { position: relative; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: #15171a; box-shadow: 0 6px 14px -6px rgb(0 0 0 / .8), inset 0 0 0 1px rgb(255 255 255 / .08); }
.track-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale var(--dur-gentle) var(--spring-gentle); }
.track-row:hover .track-thumb img { scale: 1.12; }
.track-name { min-width: 0; height: 100%; text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 2px; border-radius: 8px; }
.track-name strong { font: 600 15.5px/1.3 var(--body); letter-spacing: -.012em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .3s; }
.track-name span { font: 400 13px var(--body); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-row.selected .track-name strong { color: var(--tint); }
.genre { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px var(--body); letter-spacing: .08em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.genre svg { width: 13px; height: 13px; }
.ly-chip { justify-self: start; font: 700 9.5px var(--body); letter-spacing: .1em; padding: 4px 7px; border-radius: 7px; color: var(--faint); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.ly-chip[data-state=synced] { color: #0b0c0e; background: linear-gradient(180deg, #fff, #b9c0cb); box-shadow: 0 0 18px -6px #fff; }
.ly-chip[data-state=plain] { color: var(--ink); background: rgb(255 255 255 / .09); }
.ly-chip[data-state=none] { box-shadow: none; padding-left: 12px; }
.row-time { font: 500 13.5px var(--body); font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; }
.row-lyrics { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--faint); opacity: 0; scale: .8; transition: opacity .25s, scale var(--dur-lively) var(--spring-lively), background-color .3s, color .25s; }
.row-lyrics svg { width: 18px; height: 18px; }
.track-row:hover .row-lyrics, .row-lyrics:focus-visible, .track-row.selected .row-lyrics { opacity: 1; scale: 1; }
.row-lyrics:hover { background: rgb(255 255 255 / .12); color: #fff; } .row-lyrics:active { scale: .86; }
.search-empty { padding: 56px 20px; text-align: center; display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
.search-empty strong { font: 700 20px var(--body); color: var(--ink); letter-spacing: -.02em; }

/* ---------- 8 mini player ---------- */
.player { position: fixed; z-index: 30; left: var(--edge); right: var(--edge); bottom: var(--edge); max-width: 1080px; margin-inline: auto; min-height: 0; height: 78px; padding: 0 16px 0 10px; border: 0; border-radius: 26px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: center; --glass-blur: 22px; transition: opacity .4s ease, translate var(--dur-smooth) var(--spring-smooth), --glow .5s; }
.mini-viz { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; }
.player-track { display: flex; align-items: center; gap: 13px; min-width: 0; height: 62px; padding: 0 12px 0 0; border-radius: 18px; text-align: left; transition: background-color .3s, scale var(--dur-snappy) var(--spring-snappy); }
.player-track:hover { background: rgb(255 255 255 / .07); } .player-track:active { scale: .98; }
.player-art { position: relative; width: 58px; height: 58px; flex-shrink: 0; border-radius: 14px; box-shadow: 0 10px 22px -8px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .1); transition: scale var(--dur-lively) var(--spring-lively); }
.player-track:hover .player-art { scale: 1.06; }
body:not(.is-playing) .player-art { scale: .92; }
.player-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.player-text strong { font: 650 14.5px/1.3 var(--body); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-text > span { font: 400 12.5px var(--body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playback { min-width: 0; }
.playback-buttons { display: flex; align-items: center; justify-content: center; gap: 8px; }
.play-button { width: 40px; height: 40px; color: #fff; }
.play-button .pp { width: 20px; height: 20px; }
.timeline { display: flex; align-items: center; gap: 10px; margin-top: -3px; font: 500 11px var(--body); font-variant-numeric: tabular-nums; color: var(--muted); }
.timeline > span, .time-toggle { min-width: 36px; } .timeline > span { text-align: right; }
.time-toggle { font: inherit; color: inherit; text-align: left; border-radius: 6px; transition: color .25s; } .time-toggle:hover { color: #fff; }
.timeline .slider { flex: 1; }
.player-options { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.player-options .slider { width: 92px; margin: 0 8px 0 2px; }
.player-progress { display: none; }

/* ---------- 9 now playing ---------- */
.np { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; touch-action: pan-y; }
.np-bg { position: absolute; inset: 0; z-index: -1; background: #05060a; overflow: hidden; }
.np-bg-art { position: absolute; left: -15%; top: -15%; width: 130%; height: 130%; filter: blur(48px) grayscale(1) contrast(1.1); opacity: .7; }
.np-bg-shade { position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 40%, transparent, rgb(3 4 6 / .5)), linear-gradient(180deg, rgb(3 4 6 / .28), rgb(3 4 6 / .6)); }
.lite .np-bg-art { filter: grayscale(1); }
.np-top { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(16px, env(safe-area-inset-top)) clamp(16px, 3vw, 32px) 8px; }
.np-grabber { display: none; }
.np-round { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; --glass-blur: 14px; transition: scale var(--dur-snappy) var(--spring-snappy), --glow .5s, opacity .3s, visibility .3s; }
.np-round:hover { scale: 1.08; } .np-round:active { scale: .9; } .np-round.is-off { opacity: 0; visibility: hidden; }
.seg { position: relative; display: flex; padding: 4px; border-radius: 99px; --glass-blur: 14px; }
.seg button { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 99px; font: 600 13.5px var(--body); color: var(--muted); transition: color .3s, scale var(--dur-snappy) var(--spring-snappy); }
.seg button svg { width: 16px; height: 16px; }
.seg button:hover { color: #fff; } .seg button:active { scale: .95; } .seg button[aria-selected=true] { color: #fff; }
.seg-thumb { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 99px; pointer-events: none; opacity: 0; transition: transform var(--dur-lively) var(--spring-lively), width var(--dur-lively) var(--spring-lively), opacity .3s; }
.menu { position: absolute; z-index: 5; top: calc(100% + 2px); right: clamp(16px, 3vw, 32px); width: 268px; padding: 6px; border-radius: 20px; transform-origin: 90% 0; display: flex; flex-direction: column; }
.menu > button { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: 14px; font: 500 14px var(--body); text-align: left; transition: background-color .25s, scale var(--dur-snappy) var(--spring-snappy); }
.menu > button svg { width: 17px; height: 17px; color: var(--muted); }
.menu > button:hover:not(:disabled) { background: rgb(255 255 255 / .1); } .menu > button:active { scale: .98; }
.menu > button:disabled { opacity: .35; cursor: default; } .menu .danger { color: #ff8f8a; } .menu .danger svg { color: inherit; }
.menu-row { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 8px 0 12px; margin: 4px 0; border-block: 1px solid var(--line); font: 500 14px var(--body); }
.menu-row span { margin-right: auto; } .menu-row output { min-width: 56px; text-align: center; font: 12px var(--mono); color: var(--muted); }
.menu-row button { width: 32px; height: 32px; border-radius: 50%; background: rgb(255 255 255 / .1); font-size: 18px; line-height: 1; transition: scale var(--dur-snappy) var(--spring-snappy), background-color .25s; }
.menu-row button:hover { background: rgb(255 255 255 / .2); } .menu-row button:active { scale: .86; }

.np-body { position: relative; z-index: 1; min-height: 0; width: 100%; max-width: 1440px; margin: 0 auto; padding: 8px clamp(24px, 5vw, 80px) clamp(20px, 4vh, 44px);
  display: grid; grid-template-columns: minmax(280px, min(38vw, 62vh, 460px)) minmax(0, 1fr); gap: clamp(32px, 6vw, 104px); align-items: center; }
.np-body[data-view=art] { grid-template-columns: minmax(280px, min(46vw, 66vh, 560px)); justify-content: center; }
.np-body[data-view=art] .np-right { display: none; }
.np-left { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.np-art { position: relative; width: 100%; aspect-ratio: 1; border-radius: 24px; margin-bottom: 10px;
  box-shadow: 0 50px 100px -30px rgb(0 0 0 / .9), 0 30px 80px -24px color-mix(in srgb, var(--c1) 45%, transparent), 0 0 0 1px rgb(255 255 255 / .08);
  transition: scale var(--dur-lively) var(--spring-lively), box-shadow .8s ease; }
body:not(.is-playing) .np-art { scale: .84; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .9), 0 0 0 1px rgb(255 255 255 / .08); }
.np-info { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
.np-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.np-meta strong { font: 700 clamp(20px, 2vw, 25px)/1.2 var(--body); letter-spacing: -.022em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-meta span { font: 500 clamp(15px, 1.5vw, 18px)/1.3 var(--body); color: rgb(255 255 255 / .62); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-timeline .slider { width: 100%; }
.np-times { display: flex; justify-content: space-between; margin-top: -2px; font: 600 11.5px var(--body); font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .55); }
.np-controls { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.np-ctl { position: relative; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; color: #fff; transition: scale var(--dur-snappy) var(--spring-snappy), background-color .3s, color .25s, --glow .5s; }
.np-ctl svg { width: 32px; height: 32px; }
.np-ctl.sm { width: 44px; height: 44px; color: rgb(255 255 255 / .6); } .np-ctl.sm svg { width: 21px; height: 21px; }
.np-ctl:hover { background: rgb(255 255 255 / .1); scale: 1.07; color: #fff; } .np-ctl:active { scale: .86; transition-duration: 90ms; background: rgb(255 255 255 / .16); }
.np-play { width: 78px; height: 78px; background: rgb(255 255 255 / .12); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), inset 0 0 0 1px rgb(255 255 255 / .08), 0 16px 40px -14px rgb(0 0 0 / .8); } .np-play .pp { width: 30px; height: 30px; }
.np-play:hover { scale: 1.06; }
.np-volume { display: flex; align-items: center; gap: 10px; } .np-volume .slider { flex: 1; }
.np-right { position: relative; align-self: stretch; min-width: 0; min-height: 0; }
.np-pane { position: absolute; inset: 0; display: none; }
.np-body[data-view=lyrics] .lyrics-pane { display: flex; } .np-body[data-view=viz] .viz-pane { display: block; }
.viz-pane canvas { width: 100%; height: 100%; display: block; }
.viz-idle { position: absolute; left: 0; right: 0; bottom: 12%; text-align: center; font: 500 14px var(--body); color: var(--muted); pointer-events: none; }

/* ---------- 10 lyrics ---------- */
.lyrics-pane { flex-direction: column; min-height: 0; }
.lyrics-status { flex-shrink: 0; display: flex; align-items: center; gap: 12px; min-height: 30px; padding: 0 2px; font: 500 12.5px/1.4 var(--body); color: rgb(255 255 255 / .56); }
.ly-badge { flex-shrink: 0; font: 700 10px var(--body); letter-spacing: .1em; padding: 5px 9px; border-radius: 8px; background: rgb(255 255 255 / .12); color: #fff; }
[data-state=synced] > .lyrics-status .ly-badge, [data-mode=sync] > .lyrics-status .ly-badge { background: var(--tint); color: #0b0c0e; }
.lyrics-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; padding: 9vh 6px 0 14px; outline: none; border-radius: 16px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 13%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 13%, #000 78%, transparent); }
.lyrics-body::-webkit-scrollbar { display: none; }
.lyrics-body:focus-visible { box-shadow: inset 0 0 0 2px rgb(255 255 255 / .25); }
.ly-line { display: block; width: fit-content; max-width: 100%; margin: 0 0 0 -14px; padding: 9px 14px; border-radius: 16px; text-align: left; color: #fff; overflow-wrap: anywhere;
  font: 750 clamp(25px, 2.7vw, 40px)/1.16 var(--body); letter-spacing: -.028em; transform-origin: 0 50%; }
button.ly-line { cursor: pointer; opacity: .2; scale: .955;
  transition: opacity .5s ease, scale var(--dur-gentle) var(--spring-gentle), background-color .3s; }
button.ly-line[data-d="0"] { opacity: 1; scale: 1; transition-duration: .3s, var(--dur-lively), .3s; transition-timing-function: ease, var(--spring-lively), ease; }
button.ly-line[data-d="1"] { opacity: .42; }
button.ly-line[data-d="2"] { opacity: .3; }
button.ly-line[data-d="3"] { opacity: .24; }
.browsing button.ly-line:not([data-d="0"]) { opacity: .5; }
button.ly-line:hover { opacity: .92 !important; background: rgb(255 255 255 / .07); }
.ly-line.long { font-size: clamp(18px, 1.7vw, 24px); line-height: 1.3; letter-spacing: -.015em; }
button.ly-line:active { scale: .97; }
.ly-line.gap { margin-top: 30px; }
.ly-line.label { margin-top: 34px; padding-block: 4px; font: 700 11.5px var(--body); letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .46); }
.ly-line.label:first-child { margin-top: 0; }
.ly-line.untimed { font-size: clamp(18px, 1.7vw, 24px); font-weight: 600; opacity: .3; }
.ly-line .w { opacity: .42; transition: opacity .28s ease, text-shadow .4s; } .ly-line .w.on { opacity: 1; }
.ly-line.has-words:not([data-d="0"]) .w { opacity: 1; }
[data-state=plain] .ly-line:not(.label) { font: 600 clamp(20px, 1.9vw, 27px)/1.34 var(--body); letter-spacing: -.018em; padding-block: 5px; opacity: .9; }
.ly-dots { display: flex; gap: 9px; height: 46px; padding: 16px 0; margin-bottom: 8px; transition: height var(--dur-smooth) var(--spring-smooth), opacity .4s, margin .4s, padding .4s; }
.ly-dots i { width: 13px; height: 13px; border-radius: 50%; background: #fff; opacity: .25; transition: opacity .6s ease, scale var(--dur-lively) var(--spring-lively); }
.ly-dots[data-step="1"] i:nth-child(1), .ly-dots[data-step="2"] i:nth-child(-n+2), .ly-dots[data-step="3"] i { opacity: 1; scale: 1.15; }
.ly-dots.done { height: 0; padding: 0; margin: 0; opacity: 0; overflow: hidden; }
.ly-spacer { height: 62%; }
.ly-empty { max-width: 460px; margin: 6vh 0 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ly-empty strong { font: 750 clamp(26px, 2.6vw, 38px)/1.12 var(--body); letter-spacing: -.028em; }
.ly-empty p { font: 500 15.5px/1.55 var(--body); color: rgb(255 255 255 / .62); }
.ly-empty a { font: 600 14px var(--body); color: var(--tint); margin-top: 6px; }
.ly-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .ly-actions-end { margin-top: 34px; }
/* tap-to-sync mode */
.sync-line { display: flex; align-items: baseline; gap: 14px; width: 100%; font: 600 clamp(17px, 1.5vw, 21px)/1.35 var(--body); letter-spacing: -.012em; padding: 8px 14px; opacity: .5; scale: 1; filter: none; transition: opacity .3s, background-color .3s, box-shadow .3s; }
button.sync-line, button.sync-line[data-d] { opacity: .5; scale: 1; filter: none; }
.ly-time { flex-shrink: 0; min-width: 62px; font: 400 12px var(--mono); color: rgb(255 255 255 / .4); }
.sync-line.stamped { opacity: .85; } .sync-line.stamped .ly-time { color: var(--tint); }
button.sync-line.cursor { opacity: 1; background: rgb(255 255 255 / .12); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 1px rgb(255 255 255 / .08), 0 0 40px -14px var(--tint); }
[data-mode=sync] .lyrics-body { padding-top: 4vh; padding-bottom: 96px; }
.sync-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border-radius: 26px; }
.sync-info { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; padding: 0 8px; }
.sync-info strong { font: 700 15px var(--body); font-variant-numeric: tabular-nums; } .sync-info span { font: 500 12px/1.35 var(--body); color: var(--muted); }
.sync-tap { height: 52px; padding: 0 22px; } .sync-tap kbd { background: rgb(0 0 0 / .12); color: rgb(0 0 0 / .6); }
.sync-bar .btn-glass { background: rgb(255 255 255 / .1); } .sync-bar .btn-glass:hover { background: rgb(255 255 255 / .18); }
.text-editor { position: absolute; inset: 40px 0 0; z-index: 3; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 26px; }
.text-editor label { display: flex; flex-direction: column; gap: 3px; } .text-editor label strong { font: 700 17px var(--body); letter-spacing: -.015em; }
.text-editor label span { font: 500 12.5px/1.45 var(--body); color: var(--muted); } .text-editor code { font: 11.5px var(--mono); color: var(--ink); }
.text-editor textarea { flex: 1; min-height: 120px; resize: none; border: 0; border-radius: 16px; padding: 14px 16px; background: rgb(0 0 0 / .32); color: var(--ink); font: 14px/1.7 var(--mono); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); outline: none; transition: box-shadow .3s; }
.text-editor textarea:focus { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2), 0 0 0 3px color-mix(in srgb, var(--tint) 30%, transparent); }
.text-editor-actions { display: flex; justify-content: flex-end; gap: 10px; }
.text-editor .btn-glass { background: rgb(255 255 255 / .1); }
[data-mode=text] .lyrics-body { visibility: hidden; }

/* ---------- 11 legacy sections in the new shell ---------- */
.toast { position: fixed; left: 50%; bottom: 112px; z-index: 90; translate: -50% 0; max-width: min(92vw, 560px); padding: 13px 20px; border-radius: 18px; font: 550 14px/1.45 var(--body); color: var(--ink);
  background: rgb(30 33 38 / .82); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6); box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), inset 0 0 0 1px rgb(255 255 255 / .08), 0 24px 60px -16px rgb(0 0 0 / .8); animation: toast-in var(--dur-lively) var(--spring-lively) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(18px) scale(.94); } }
dialog { inset: 0 0 0 auto; margin: 0; max-height: none; height: 100dvh; max-width: 620px; width: min(100%, 620px); border: 0; border-left: 1px solid var(--line); background: rgb(14 15 18 / .92); -webkit-backdrop-filter: blur(40px) saturate(1.6); backdrop-filter: blur(40px) saturate(1.6); color: var(--ink); padding: 0; box-shadow: -30px 0 100px rgb(0 0 0 / .55); }
dialog[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: rgb(0 0 0 / .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.unlock-dialog { border-radius: 30px; border: 0; background: linear-gradient(180deg, rgb(255 255 255 / .09), rgb(255 255 255 / .02) 40%), rgb(16 17 20 / .9); box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), inset 0 0 0 1px rgb(255 255 255 / .08), 0 50px 120px -20px rgb(0 0 0 / .9); }
.unlock-dialog[open] { animation: sheet-in var(--dur-smooth) var(--spring-smooth) both; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(26px) scale(.96); } }
.unlock-dialog input { border-radius: 14px; background: rgb(0 0 0 / .35); border-color: rgb(255 255 255 / .16); }
.unlock-dialog .gate-actions > button, .unlock-dialog .gate-answer { border-radius: 16px; border-color: rgb(255 255 255 / .14); background: rgb(255 255 255 / .06); transition: background-color .3s, scale var(--dur-snappy) var(--spring-snappy); }
.unlock-dialog .gate-actions > button:hover, .unlock-dialog .gate-answer:hover { background: rgb(255 255 255 / .12); } .unlock-dialog .gate-actions > button:active, .unlock-dialog .gate-answer:active { scale: .98; }
.gate-progress-track { border-radius: 99px; overflow: hidden; height: 3px; } .gate-progress-track span { transition: width var(--dur-smooth) var(--spring-smooth); }
.agreement-document { border-radius: 16px; }

/* ---------- 11b secret stage: black, one drifting question mark, colours bloom at the reveal ---------- */
body.stage-open { overflow: hidden; }
.secret-stage { position: fixed; inset: 0; z-index: 70; background: #000; display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.secret-stage.idle { cursor: none; }
/* the bloom is light, not a picture: four soft colour fields drifting on their own orbits, plus one shockwave ring */
.ss-bloom { position: absolute; inset: 0; opacity: 0; transform: scale(.35); transition: opacity 4.5s ease, transform 7s cubic-bezier(.16, .84, .24, 1); pointer-events: none; }
.secret-revealed .ss-bloom { opacity: 1; transform: none; }
.ss-bloom i { position: absolute; left: 50%; top: 50%; border-radius: 50%; will-change: transform; }
.ss-bloom i:nth-child(1) { width: 96vmax; height: 96vmax; margin: -48vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--c1) 62%, transparent), color-mix(in srgb, var(--c1) 16%, transparent) 52%, transparent); animation: ss-a 19s ease-in-out infinite alternate; }
.ss-bloom i:nth-child(2) { width: 78vmax; height: 78vmax; margin: -39vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--c2) 58%, transparent), color-mix(in srgb, var(--c2) 12%, transparent) 55%, transparent); animation: ss-b 23s ease-in-out infinite alternate; }
.ss-bloom i:nth-child(3) { width: 62vmax; height: 62vmax; margin: -31vmax; background: radial-gradient(closest-side, rgb(226 84 255 / .42), rgb(226 84 255 / .08) 55%, transparent); animation: ss-c 17s ease-in-out infinite alternate; }
.ss-bloom i:nth-child(4) { width: 46vmin; height: 46vmin; margin: -23vmin; background: radial-gradient(closest-side, color-mix(in srgb, var(--tint) 46%, transparent), transparent); animation: ss-core 4.6s ease-in-out infinite alternate; }
.ss-ring { position: absolute; left: 50%; top: 50%; width: 30vmin; height: 30vmin; margin: -15vmin; border-radius: 50%; border: 2px solid var(--tint); opacity: 0; box-shadow: 0 0 40px var(--c1), inset 0 0 40px var(--c1); }
.secret-revealed .ss-ring { animation: ss-ring 3.2s cubic-bezier(.1, .7, .2, 1) both; }
@keyframes ss-a { from { transform: translate3d(-30%, -14%, 0) scale(.9); } to { transform: translate3d(22%, 18%, 0) scale(1.2); } }
@keyframes ss-b { from { transform: translate3d(32%, -20%, 0) scale(1.15); } to { transform: translate3d(-26%, 22%, 0) scale(.85); } }
@keyframes ss-c { from { transform: translate3d(-12%, 30%, 0) scale(.8); } to { transform: translate3d(18%, -28%, 0) scale(1.3); } }
@keyframes ss-core { from { transform: scale(.8); opacity: .6; } to { transform: scale(1.45); opacity: 1; } }
@keyframes ss-ring { from { transform: scale(.4); opacity: .95; } to { transform: scale(9); opacity: 0; } }
.ss-mark { position: relative; width: min(46vmin, 420px); aspect-ratio: 1; transform: scale(.5); will-change: transform; pointer-events: none; }
.ss-mark img { width: 100%; height: 100%; object-fit: contain; display: block; filter: grayscale(1) brightness(.62); transition: filter 4s ease; animation: ss-float 11s ease-in-out infinite alternate; }
.secret-revealed .ss-mark img { filter: none; }
body:not(.is-playing) .ss-mark img, body:not(.is-playing) .ss-bloom i { animation-play-state: paused; }
@keyframes ss-float { 0% { transform: translate3d(-3%, 2.5%, 0) rotate(-5deg); } 50% { transform: translate3d(2.5%, -3%, 0) rotate(3deg); } 100% { transform: translate3d(3.5%, 3%, 0) rotate(6deg); } }
.ss-ui { position: absolute; left: 50%; bottom: max(26px, env(safe-area-inset-bottom)); translate: -50% 0; width: min(560px, calc(100% - 32px)); display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 99px; cursor: default;
  background: rgb(22 22 26 / .78); box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), inset 0 0 0 1px rgb(255 255 255 / .07); font: 500 12px var(--body); font-variant-numeric: tabular-nums; color: var(--muted);
  transition: opacity .6s ease, translate var(--dur-smooth) var(--spring-smooth); }
.ss-ui .slider { flex: 1; } .ss-ui .pp { width: 18px; height: 18px; }
.secret-stage.idle .ss-ui { opacity: 0; translate: -50% 16px; pointer-events: none; }
.lite .ss-bloom i:nth-child(3) { display: none; }

/* ---------- 12 responsive ---------- */
@media (max-width: 1180px) {
  .track-head, .track-row { grid-template-columns: 40px 48px minmax(0, 1fr) 56px 52px 40px; }
  .genre, .track-head span:nth-child(4) { display: none; }
  .player { grid-template-columns: minmax(0, 1fr) minmax(260px, 1.3fr) auto; gap: 14px; }
  .player-options .slider { width: 70px; }
}
@media (max-width: 900px) {
  :root { --edge: 10px; }
  .shell { padding: 0 16px calc(110px + env(safe-area-inset-bottom)); }
  .brand-wordmark { font-size: 36px; }
  .search { width: min(230px, 54vw); height: 42px; } .search:focus-within { width: min(300px, 62vw); } .search kbd { display: none; }
  .album-cover { border-radius: 22px; }
  .hero { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 24px; padding-top: 6px; }
  .hero-art { width: min(62vw, 300px); }
  .hero-copy { align-items: center; }
  #album-title { margin-left: 0; font-size: clamp(5rem, 26vw, 8rem); }
  .hero-meta, .hero-actions { justify-content: center; }
  .hero-actions { flex-wrap: nowrap; gap: 10px; } .hero-actions .btn { padding: 0 20px; } .hero-actions .btn-icon { padding: 0; flex-shrink: 0; } .hero-actions .btn-solid { min-width: 0; }
  .lyrics-status { font-size: 11.5px; }
  .hero-now { width: 100%; text-align: left; } .hero-now-text { flex: 1; } .hero-now .pill { display: none; }
  .collection-heading { padding: 0 6px; } .collection-heading > span { display: none; }
  .track-head { display: none; }
  .track-row { grid-template-columns: 30px 46px minmax(0, 1fr) auto 44px; gap: 10px; padding: 0 6px; height: 62px; border-radius: 14px; }
  .track-row .ly-chip { display: none; } .row-play { width: 30px; } .track-thumb { width: 46px; height: 46px; }
  .row-lyrics { opacity: 1; scale: 1; width: 44px; height: 44px; }
  .player { left: var(--edge); right: var(--edge); bottom: calc(var(--edge) + env(safe-area-inset-bottom)); height: 64px; padding: 0 8px 0 7px; border-radius: 22px; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; overflow: hidden; }
  .player-art { width: 50px; height: 50px; border-radius: 12px; } .player-track { height: 54px; }
  .playback { display: contents; } .timeline, .player-options, #shuffle, #repeat, #previous { display: none; }
  .play-button, #next { width: 46px; height: 46px; } .play-button .pp { width: 22px; height: 22px; }
  .player-progress { display: block; position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; border-radius: 2px; background: rgb(255 255 255 / .14); overflow: hidden; }
  .player-progress i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
  .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
  /* now playing becomes a sheet; the left column dissolves so the pane can sit between header and controls */
  .np-top { padding-top: max(22px, env(safe-area-inset-top)); }
  .np-grabber { display: block; position: absolute; top: 8px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: rgb(255 255 255 / .35); }
  .seg button { padding: 0 12px; } .seg button span { display: none; } .seg button[aria-selected=true] span { display: inline; }
  .np-left { display: contents; }
  .np-body, .np-body[data-view=art] { grid-template-columns: 60px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 12px 14px; padding: 8px 22px max(22px, env(safe-area-inset-bottom)); align-items: center; justify-content: stretch; }
  .np-art { grid-area: 1 / 1; margin: 0; border-radius: 12px; box-shadow: 0 14px 30px -12px rgb(0 0 0 / .9), 0 0 0 1px rgb(255 255 255 / .08); }
  body:not(.is-playing) .np-art { scale: .9; }
  .np-info { grid-area: 1 / 2; } .np-info .pill { display: none; }
  .np-right { grid-area: 2 / 1 / 3 / 3; } .np-timeline { grid-area: 3 / 1 / 4 / 3; } .np-controls { grid-area: 4 / 1 / 5 / 3; padding: 0 4px 4px; } .np-volume { display: none; }
  .np-body[data-view=art] { grid-template-rows: minmax(0, 1fr) auto auto auto; }
  .np-body[data-view=art] .np-art { grid-area: 1 / 1 / 2 / 3; width: min(100%, 52vh); justify-self: center; align-self: center; border-radius: 22px; }
  .np-body[data-view=art] .np-info { grid-area: 2 / 1 / 3 / 3; } .np-body[data-view=art] .np-info .pill { display: inline-flex; }
  .np-body[data-view=art] .np-art, body:not(.is-playing) .np-body[data-view=art] .np-art { box-shadow: 0 40px 80px -30px rgb(0 0 0 / .9), 0 0 0 1px rgb(255 255 255 / .08); }
  body:not(.is-playing) .np-body[data-view=art] .np-art { scale: .82; }
  .lyrics-body { padding-top: 5vh; } .ly-line { font-size: clamp(24px, 6.6vw, 32px); }
  .menu { right: 16px; } .sync-tap kbd { display: none; } .sync-info { flex-basis: 100%; }
  dialog { max-width: none; }
}
@media (max-width: 380px) { .hero-actions .btn-solid { min-width: 130px; } .btn { padding: 0 18px; } .track-row .row-time { display: none; } .track-row { grid-template-columns: 30px 46px minmax(0, 1fr) 44px; } }
@media (hover: none) { .slider .rail { height: 5px; } .slider-lg .rail { height: 9px; } .slider .knob { scale: 1; } .slider-lg .knob { display: none; } .track-row:hover { scale: 1; background: none; box-shadow: none; } .track-row.selected:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--tint) 15%, rgb(255 255 255 / .05)), rgb(255 255 255 / .06) 60%); } .track-row:active { background: rgb(255 255 255 / .08); scale: .985; } .btn:hover, .icon-button:hover, .np-ctl:hover { scale: 1; } .btn:active { scale: .955; } .icon-button:active, .np-ctl:active { scale: .86; } }
@media (max-height: 620px) and (min-width: 901px) { .np-volume { display: none; } .np-left { gap: 10px; } }

/* ---------- 13 motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .magnet { translate: none; } .hero-art, .album-cover { transform: none; } .mini-viz { display: none; }
  button.ly-line { scale: 1; }
}
.secret-door:focus-visible { outline: none; opacity: 1; scale: 1.08; }