:root {
  color-scheme: dark;
  --bg: #0c0915;
  --panel: #171122;
  --line: #ffffff1c;
  --text: #f9f2ff;
  --muted: #c0afcc;
  --violet: #d6a2fc;
  font: 15px 'DM Sans', sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--text);
  min-height: 100vh;
  background: radial-gradient(ellipse at 83% -15%, #331c50 0%, transparent 52%), var(--bg);
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .48; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #e4bdff; outline-offset: 3px; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 10px max(24px,calc((100vw - 1360px)/2));
  border-bottom: 1px solid var(--line);
  background: #110d1bd9;
}
.brand { font: 800 24px 'Outfit', sans-serif; letter-spacing: .13em; white-space: nowrap; }
.brand span, .hero h1 span { color: var(--violet); }
.top nav { display: flex; flex-wrap: wrap; gap: 5px; }
.top nav a { padding: 8px 12px; color: var(--muted); font-weight: 600; border-radius: 8px; }
.top nav a:hover, .top nav [aria-current] { background: #c289ff24; color: #fff; }
.shell { width: min(1360px,calc(100% - 48px)); margin: 30px auto 64px; }
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 255px;
  display: grid;
  align-items: center;
  padding: clamp(24px,5vw,62px);
  border-radius: 20px;
  border: 1px solid #bd91ea45;
  background: linear-gradient(102deg,#211232 10%,#3e215c 73%,#684087);
}
.hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: clamp(-105px,4vw,72px);
  width: clamp(265px,40vw,550px);
  aspect-ratio: 1;
  border: 1px solid #dfb8ff44;
  border-radius: 50%;
  opacity: .62;
  background: radial-gradient(circle,#ead7ff 0 1.1%,#7543a6 1.2% 12%,#391c56 12.1% 21%,transparent 21.1%),
    repeating-radial-gradient(circle,#d0a7ff32 0 1px,transparent 1px 7px), linear-gradient(125deg,#1d112c,#462961 50%,#29183d);
  box-shadow: 0 0 70px #170c27a0;
}
.hero h1 { margin: 0; font: 800 clamp(48px,8vw,96px)/.9 'Outfit', sans-serif; letter-spacing: -.055em; }
.hero p { margin: 14px 0 22px; color: #e5d2ee; }
.hero form { display: flex; gap: 8px; width: min(100%,450px); }
.hero input { flex: 1; width: 0; padding: 11px 13px; color: var(--text); background: #110b1dda; border: 1px solid #dfb5ff58; border-radius: 9px; }
.hero input::placeholder { color: #c6b3d1; }
.primary { border: 1px solid #e1b1ff; border-radius: 9px; padding: 10px 15px; background: #d7a6fc; color: #231332; font-weight: 800; }
.primary:hover { background: #e8c5ff; }
.layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(285px,360px); gap: 24px; margin-top: 30px; align-items: start; }
.catalog-bar, .views, .genres, .player-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.catalog-bar { justify-content: space-between; margin-bottom: 12px; }
h2 { margin: 0; font: 700 24px 'Outfit', sans-serif; }
.views button, .genres button, .player-actions button, .player-actions a {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #1c1429;
  color: var(--muted);
  font-weight: 600;
}
.genres button { border-radius: 100px; }
.views button[aria-pressed=true], .genres button[aria-pressed=true] { border-color: #ce98f383; background: #462b63; color: #fff; }
.player-actions button:not(:disabled):hover, .player-actions a:hover { color: #fff; border-color: #bc85ec; }
.status { color: var(--muted); font-size: .88rem; }
.source-credit { margin: 0 0 10px; color: var(--muted); font-size: .82rem; }
.source-credit a { text-decoration: underline; text-underline-offset: 3px; }
.status:empty { display: none; }
.tracks { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,165px),1fr)); gap: 12px; margin-top: 14px; }
.track { min-width: 0; padding: 9px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.track:has(.track-play[aria-current=true]) { border-color: #ca8efa; }
.track-play { display: block; width: 100%; padding: 0; border: 0; text-align: left; color: var(--text); background: transparent; }
.art { display: block; position: relative; overflow: hidden; aspect-ratio: 4/3; border-radius: 8px; background: #322043; }
.art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.play-mark { display: grid; place-items: center; position: absolute; right: 6px; bottom: 6px; width: 32px; height: 32px; border-radius: 50%; color: #241032; background: #d6a2fc; font-size: 12px; }
.track-play:hover .play-mark { background: #f2daff; }
.track-title, .track-artist { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-title { margin: 8px 0 2px; font-weight: 750; }
.track-artist { font-size: .82rem; color: var(--muted); }
.track-save { margin-top: 8px; padding: 3px 6px; color: var(--muted); border: 0; border-radius: 5px; background: transparent; font-size: .78rem; }
.track-save:hover, .track-save[aria-pressed=true] { color: var(--violet); background: #d9a7ff18; }
.player { position: sticky; top: 20px; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); scroll-margin-top: 12px; }
.player h2 { margin-bottom: 10px; }
.frame { display: grid; grid-template-columns: minmax(0,1fr); place-items: center; width: 100%; min-height: 200px; aspect-ratio: 16/9; overflow: hidden; border-radius: 9px; background: #100d17; color: var(--muted); text-align: center; }
.frame iframe { display: block; width: 100%; min-width: 0; height: 100%; min-height: 200px; border: 0; }
.frame .audio-stage { display: grid; width: 100%; gap: 9px; justify-items: center; padding: 10px; }
.audio-stage img { display: block; width: min(35%,116px); aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.audio-stage audio { width: 100%; }
.now-playing { display: grid; gap: 4px; margin-top: 11px; }
.now-playing > span { color: var(--muted); font-size: .86rem; }
.player-actions { margin-top: 7px; }
.ad-notice { margin-top: 12px; padding: 12px; border: 1px solid #c48bf27a; border-radius: 9px; background: #38244f; }
.ad-notice p { margin: 0 0 8px; }
.ad-probe { position: absolute; top: -1000px; left: -1000px; width: 12px; height: 12px; pointer-events: none; }
@media (max-width: 760px) {
  .top { padding: 10px 16px; }
  .top nav a { padding: 6px 7px; font-size: .85rem; }
  .shell { width: calc(100% - 28px); margin-top: 16px; }
  .hero { min-height: 210px; }
  .hero::after { opacity: .29; }
  .layout { grid-template-columns: minmax(0,1fr); }
  .player { grid-row: 1; position: static; }
  .player:not(:has(iframe, audio, .ad-notice:not([hidden]))) { display: none; }
}
@media (max-width: 390px) {
  .top { flex-wrap: wrap; }
  .tracks { grid-template-columns: repeat(2,minmax(0,1fr)); }
}