:root {
  color-scheme: dark;
  --page: #141118;
  --surface: #201d28;
  --ink: #f5f0ff;
  --muted: #b4a8c6;
  --edge: #463c55;
  --accent: #c9b0ff;
  --on-accent: #25173f;
  --glow: #9970da;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
:root[data-design="cyan"] { --page:#0c1518; --surface:#17262b; --ink:#eafaff; --muted:#a1bbc2; --edge:#314e55; --accent:#9ce5ec; --on-accent:#0d3036; --glow:#48a7b7; }
:root[data-design="redline"] { --page:#191114; --surface:#2a1c22; --ink:#fff1f4; --muted:#c4a6b1; --edge:#573540; --accent:#ffafc0; --on-accent:#491727; --glow:#c94a70; }
:root[data-design="amber"] { --page:#191510; --surface:#2b241b; --ink:#fff5e6; --muted:#c6b397; --edge:#544632; --accent:#eec68c; --on-accent:#3c2a11; --glow:#bf8a3d; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; min-height:100svh; padding:40px 20px; display:grid; place-items:center; background:var(--page); color:var(--ink); -webkit-font-smoothing:antialiased; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(ellipse 520px 420px at 50% 35%, color-mix(in srgb, var(--glow) 17%, transparent), transparent 78%); }
button, a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
a { color:inherit; text-decoration:none; }
button:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
[hidden] { display:none !important; }
.player { position:relative; width:100%; max-width:400px; padding:25px 26px 18px; border:1px solid var(--edge); border-radius:28px; background:var(--surface); box-shadow:0 28px 80px #0005, 0 0 70px color-mix(in srgb, var(--glow) 7%, transparent); }
.player-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }
.eyebrow { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:2px; }
.slash { padding:0 4px; color:var(--muted); }
.disc { width:23px; height:23px; flex-shrink:0; color:var(--accent); }
.cover { position:relative; aspect-ratio:1; overflow:hidden; border-radius:9px; background:#151217; box-shadow:0 12px 28px #0003; }
.cover::after { content:""; position:absolute; inset:0; border:1px solid #ffffff26; border-radius:inherit; background:linear-gradient(135deg,#ffffff0d,transparent 48%); pointer-events:none; }
.cover-image { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transition:opacity .36s ease; }
.cover-image.is-visible { opacity:1; }
.player-title { display:flex; align-items:center; justify-content:space-between; margin-top:22px; gap:8px; }
.identity { min-width:0; }
h1 { margin:0; font-size:29px; font-weight:650; line-height:1.1; letter-spacing:-1px; }
.identity p { margin:6px 0 0; font-size:12px; color:var(--muted); line-height:1.4; }
.controls { display:flex; gap:3px; flex-shrink:0; }
.control { width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--ink); cursor:pointer; transition:background .18s ease, transform .18s ease, opacity .18s ease; }
.control svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.control-next { background:var(--accent); color:var(--on-accent); }
.control:disabled { cursor:wait; opacity:.45; }
.control:active:not(:disabled) { transform:scale(.93); }
.links { margin-top:21px; padding-top:7px; border-top:1px solid var(--edge); }
.social-link { min-height:51px; display:flex; align-items:center; gap:12px; border-radius:8px; padding:0 5px; margin:0 -5px; transition:background .18s ease; }
.track-number { font:10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; color:var(--muted); width:16px; }
.social-icon { width:19px; height:19px; color:var(--accent); flex-shrink:0; }
.social-name { font-size:13px; font-weight:500; }
.handle { margin-left:auto; color:var(--muted); font-size:10px; }
.arrow { width:17px; height:17px; fill:none; stroke:var(--muted); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s ease; }
.player-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; border-top:1px solid var(--edge); color:var(--muted); font:9px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; text-transform:uppercase; letter-spacing:1px; }
.player-footer a { min-height:44px; display:flex; align-items:center; gap:5px; }
.player-footer > span { padding:14px 0; }
.load-note { margin:0 0 6px; font-size:11px; line-height:1.5; color:var(--muted); }
@media (hover:hover) {
  .social-link:hover, .control:not(.control-next):hover:not(:disabled) { background:#ffffff08; }
  .social-link:hover .arrow { transform:translate(2px,-2px); stroke:var(--accent); }
  .control-next:hover:not(:disabled) { box-shadow:0 0 22px color-mix(in srgb, var(--accent) 18%, transparent); }
  .player-footer a:hover { color:var(--ink); }
}
@media (max-width:420px) {
  body { padding:24px 16px; }
  .player { padding:22px 22px 14px; border-radius:26px; }
  .eyebrow { font-size:9px; letter-spacing:1.7px; }
}
@media (max-width:360px) {
  body { padding:18px 12px; }
  .player { padding:20px 18px 12px; }
  h1 { font-size:26px; }
  .identity p { font-size:11px; }
  .social-link { gap:10px; }
  .handle { display:none; }
  .arrow { margin-left:auto; }
  .controls { gap:0; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition:none !important; }
}