:root { --cyan-rgb: 98, 231, 210; }
[hidden] { display: none !important; }
.library-nav { position:sticky; top:0; z-index:25; display:flex; justify-content:center; gap:.35rem; padding:.55rem 1rem; border-bottom:1px solid var(--line); background:rgba(4,15,18,.92); backdrop-filter:blur(18px); }
.library-nav a,.browse-tabs a { padding:.58rem .9rem; border-radius:999px; color:var(--muted); font-size:.75rem; font-weight:800; text-decoration:none; }
.library-nav a:hover,.library-nav a:focus-visible,.library-nav a.is-active,.browse-tabs a:hover,.browse-tabs a:focus-visible,.browse-tabs a.is-active { color:var(--ink); background:rgba(var(--cyan-rgb),.13); }
.browse-home,.personal-library { margin:0 0 1.5rem; padding:1.2rem; border:1px solid var(--line); border-radius:18px; background:rgba(5,17,21,.55); }
.section-heading h2 { margin:.2rem 0 .5rem; font:500 clamp(1.8rem,4vw,2.6rem)/1 Georgia,serif; }
.section-heading>p:last-child { color:var(--muted); }
.browse-tabs { display:flex; flex-wrap:wrap; gap:.35rem; margin:1rem 0; }
.browse-sort { display:flex; justify-content:flex-end; align-items:center; gap:.5rem; margin:-3rem 0 1rem; color:var(--muted); font-size:.7rem; }
.browse-sort select { padding:.5rem .7rem; border:1px solid var(--line); border-radius:.6rem; background:#061216; color:var(--ink); }
.browse-grid.collection-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1rem; }
.browse-grid.taxonomy-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.75rem; }
.taxonomy-card { position:relative; min-height:190px; padding:0; display:grid; align-content:end; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#071318; color:var(--ink); text-align:left; text-transform:capitalize; cursor:pointer; isolation:isolate; }
.taxonomy-card img { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .45s ease,filter .45s ease; }
.taxonomy-card::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,rgba(2,10,13,.04) 20%,rgba(2,10,13,.28) 52%,rgba(2,10,13,.94) 100%); }
.taxonomy-card span { display:grid; gap:.25rem; padding:1rem; }
.taxonomy-card strong { font:500 1.25rem Georgia,serif; text-shadow:0 2px 14px #000; }.taxonomy-card small { color:#b8d0d0; }
.taxonomy-card:hover img,.taxonomy-card:focus-visible img { transform:scale(1.045); filter:saturate(1.08) brightness(1.06); }
.collection-card { position:relative; }
.collection-card>button:first-child { width:100%; padding:0; display:block; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.collection-card>button:first-child>span { display:grid; gap:.16rem; padding:.65rem .7rem .75rem; }
.collection-card>button:first-child strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.76rem; }
.collection-card>button:first-child small { color:var(--muted); font-size:.64rem; }
.collection-favorite { position:absolute; top:.45rem; right:.45rem; width:34px; height:34px; border:1px solid rgba(255,255,255,.3); border-radius:50%; background:rgba(3,12,15,.78); color:#fff; font-size:1rem; cursor:pointer; }
.discover-shelf { margin-top:1.4rem; }.discover-shelf h3,.library-shelf h3 { margin:0 0 .65rem; font:500 1.25rem Georgia,serif; }
.library-shelf { margin-top:1.4rem; }.library-shelf>div { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.65rem; }
.library-track { min-width:0; padding:.8rem; display:grid; gap:.25rem; border:1px solid var(--line); border-radius:.75rem; background:#07161a; color:var(--ink); text-align:left; cursor:pointer; }
.library-track strong,.library-track small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.library-track small { color:var(--muted); }
.track-row { grid-template-columns:42px minmax(0,1fr) auto auto 34px 34px; }
.track-favorite { width:30px;height:30px;border:0;background:transparent;color:var(--muted);font-size:1rem;cursor:pointer}.track-favorite[aria-pressed="true"]{color:#ff8ca5}
.mobile-playlist-picker { display: none; }
.playlist-group { display: grid; gap: .45rem; }
.playlist-group + .playlist-group { margin-top: 1.1rem; }
.playlist-group h3 { margin: 0 .8rem .15rem; color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.listening-home { margin: 0 0 1.5rem; }
.continue-card { width: 100%; margin: 0 0 1.25rem; padding: .75rem; display: grid; grid-template-columns: 64px minmax(0,1fr) auto; align-items: center; gap: .9rem; border: 1px solid rgba(var(--cyan-rgb),.28); border-radius: 16px; background: linear-gradient(110deg,rgba(var(--cyan-rgb),.12),rgba(5,17,21,.72)); color: var(--ink); text-align: left; cursor: pointer; }
.continue-card[hidden] { display: none; }
.continue-card > span:nth-child(2) { min-width: 0; display: grid; gap: .18rem; }
.continue-card small,.continue-card em { color: var(--muted); font-size: .7rem; font-style: normal; }
.continue-card small { color: var(--cyan); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.continue-card strong,.continue-card em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.continue-card b { padding: .55rem .75rem; border-radius: 999px; background: var(--ink); color: #071318; font-size: .72rem; }
.collection-art,.continue-art { --cover-hue: 170; position: relative; overflow: hidden; display: grid; place-items: end start; background: radial-gradient(circle at 72% 22%,hsla(calc(var(--cover-hue) + 55),85%,72%,.78),transparent 20%),linear-gradient(145deg,hsl(var(--cover-hue),55%,31%),hsl(calc(var(--cover-hue) + 52),58%,12%)); isolation: isolate; }
.collection-art::before,.continue-art::before { content:""; position:absolute; inset:14%; border:1px solid rgba(255,255,255,.34); border-radius:50%; box-shadow:0 0 0 10px rgba(255,255,255,.04),0 0 0 22px rgba(255,255,255,.035); }
.collection-art::after,.continue-art::after { content:attr(data-mark); z-index:1; padding:.55rem; color:#fff; font:700 1.25rem/1 Georgia,serif; letter-spacing:-.05em; text-shadow:0 2px 14px #000; }
.collection-art { object-fit:cover; }
.continue-art.has-image { background-size:cover; background-position:center; }
.continue-art.has-image::before,.continue-art.has-image::after { display:none; }
.continue-art { width:64px; height:64px; border-radius:12px; }
.discovery-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }
.discovery-heading h2 { margin:0; font:500 clamp(1.5rem,3vw,2.1rem)/1 Georgia,serif; }
.discovery-heading .eyebrow { margin-bottom:.4rem; }
.discovery-shortcuts { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.4rem; }
.discovery-shortcuts button { padding:.48rem .72rem; border:1px solid var(--line); border-radius:999px; background:rgba(5,17,21,.72); color:var(--muted); font-size:.7rem; cursor:pointer; }
.discovery-shortcuts button:hover,.discovery-shortcuts button:focus-visible { border-color:var(--cyan); color:var(--cyan); }
.collection-rail { display:grid; grid-auto-flow:column; grid-template-rows:repeat(2,auto); grid-auto-columns:minmax(145px,1fr); gap:.7rem; overflow-x:auto; padding:.15rem .05rem .55rem; scrollbar-width:thin; }
.collection-card { min-width:145px; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#07161a; color:var(--ink); text-align:left; cursor:pointer; }
.collection-card:hover,.collection-card:focus-visible { border-color:rgba(var(--cyan-rgb),.55); transform:translateY(-2px); }
.collection-card .collection-art { width:100%; height:auto; aspect-ratio:1; }
.collection-card > span:last-child { display:grid; gap:.16rem; padding:.65rem .7rem .75rem; }
.collection-card strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.76rem; }
.collection-card small { color:var(--muted); font-size:.64rem; }
.collection-meta { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.65rem!important; }
.collection-meta span { padding:.3rem .5rem; border:1px solid var(--line); border-radius:999px; color:#9bb0b1; font-size:.62rem; line-height:1; }
.filter-drawer > summary { display:none; }
.filter-drawer[open] > summary { margin-bottom:.6rem; }
.load-more { justify-self:center; margin:1rem; padding:.65rem 1rem; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--cyan); cursor:pointer; }
body[data-genre-theme="synth"] { --cyan: #e679ed; --cyan-rgb: 230, 121, 237; }
body[data-genre-theme="energy"] { --cyan: #f1b15e; --cyan-rgb: 241, 177, 94; }
body[data-genre-theme="glitch"] { --cyan: #a8e65c; --cyan-rgb: 168, 230, 92; }


.visualizer-toolbar { display: flex; align-items: center; justify-content: space-between; margin: 1.6rem 0 .45rem; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.visualizer-toolbar div { display: flex; gap: .35rem; }
.visualizer-toolbar button { padding: .3rem .55rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; letter-spacing: 0; cursor: pointer; }
.visualizer-toolbar button.is-active { border-color: rgba(var(--cyan-rgb), .45); color: var(--cyan); background: rgba(var(--cyan-rgb), .08); }
.visualizer { margin-top: 0; }
.visualizer[data-mode="wave"] { align-items: center; }
.visualizer[data-mode="wave"] i { height: 4px !important; transform: translateY(var(--wave-y, 0)); animation: none; border-radius: 999px; opacity: .75; }

.volume button { width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.volume button:hover, .volume button:focus-visible { color: var(--cyan); }

@media (max-width: 850px) {
}

.player-status {
  position: absolute;
  left: 50%;
  bottom: calc(100% + .55rem);
  transform: translateX(-50%);
  max-width: min(90vw, 680px);
  margin: 0;
  padding: .55rem .85rem;
  border: 1px solid transparent;
  border-radius: .6rem;
  background: #07161a;
  color: var(--muted);
  font-size: .76rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.player-status:not(:empty) { opacity: 1; }
.player-status[data-state="error"] { border-color: rgba(242, 154, 139, .45); color: #ffd1c8; }
.player-status[data-state="loading"] { border-color: var(--line); }
.player-status[data-state="recovering"] { border-color: rgba(227,188,113,.55); color: #f5d99f; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

@media (max-width: 540px) {
  .volume { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .visualizer.is-playing i, .visualizer[data-mode="wave"].is-playing i { animation: none; }
  .player-status { transition: none; }
}

.library-filters { display:flex; flex-wrap:wrap; gap:.55rem; margin:1rem 0; }
.library-filters label,.sleep-control { display:flex; align-items:center; gap:.4rem; min-width:0; color:var(--muted); font-size:.68rem; }
.library-filters label { flex:1 1 145px; }
.library-filters select,.sleep-control select { width:min(100%,180px); min-width:0; padding:.45rem .6rem; border:1px solid var(--line); border-radius:.6rem; background:#061216; color:var(--ink); }
.track-row { grid-template-columns:42px minmax(0,1fr) auto auto 34px 34px; }
.track-add { width:30px; height:30px; border:1px solid var(--line)!important; border-radius:50%; font-size:1rem; }
.dock-actions { display:flex; justify-content:flex-end; align-items:center; gap:.45rem; flex-wrap:wrap; }
.dock-actions>button { padding:.45rem .6rem; border:1px solid var(--line); border-radius:.55rem; background:transparent; color:var(--muted); cursor:pointer; }
.dock-actions>button:hover,.track-add:hover { color:var(--cyan); border-color:var(--cyan)!important; }
.dock-art { object-fit:cover; }
.transport-buttons button[aria-pressed="true"] { color:var(--cyan); background:rgba(var(--cyan-rgb),.1); }
.queue-dialog { width:min(620px,calc(100% - 2rem)); max-height:calc(100vh - 2rem); padding:0; border:1px solid var(--line); border-radius:1rem; background:#071318; color:var(--ink); box-shadow:0 30px 100px rgba(0,0,0,.65); }
.queue-dialog::backdrop { background:rgba(0,0,0,.7); backdrop-filter:blur(5px); }
.queue-dialog>header,.queue-dialog>footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.2rem; border-bottom:1px solid var(--line); }
.queue-dialog>footer { border-top:1px solid var(--line); border-bottom:0; }
.queue-dialog h2 { margin:0; font:500 1.6rem Georgia,serif; }
.queue-dialog button,.queue-row button { border:1px solid var(--line); border-radius:.55rem; background:transparent; color:var(--ink); cursor:pointer; }
.queue-dialog header>button { width:36px; height:36px; font-size:1.3rem; }
.queue-dialog footer button { padding:.6rem .75rem; }
.queue-list { max-height:55vh; overflow:auto; padding:.5rem 1.2rem; }
.queue-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.8rem; padding:.55rem 0; border-bottom:1px solid rgba(164,214,206,.08); }
.queue-row.is-current { color:var(--cyan); }
.queue-row>button { min-width:0; padding:.5rem; text-align:left; border-color:transparent; }
.queue-row strong,.queue-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.queue-row small { margin-top:.2rem; color:var(--muted); }
.queue-row>div { display:flex; gap:.25rem; }.queue-row>div button { width:30px; height:30px; }
.action-dialog,.playlist-form-dialog { width:min(520px,calc(100% - 2rem)); max-height:calc(100dvh - 2rem); padding:0; border:1px solid var(--line); border-radius:1rem; background:#071318; color:var(--ink); box-shadow:0 30px 100px rgba(0,0,0,.7); }
.action-dialog::backdrop,.playlist-form-dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(6px); }
.action-dialog>header,.playlist-form-dialog header,.playlist-form-dialog footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.15rem; border-bottom:1px solid var(--line); }
.action-dialog h2,.playlist-form-dialog h2 { margin:0; font:500 1.55rem Georgia,serif; }
.action-dialog header>button,.playlist-form-dialog header>button { width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);font-size:1.25rem;cursor:pointer; }
.track-action-list { max-height:68dvh; overflow:auto; padding:.8rem 1.15rem 1.15rem; }
.quick-track-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:.45rem; padding-bottom:.85rem; border-bottom:1px solid var(--line); }
.quick-track-actions button,.playlist-action-heading button,.track-action-list>[data-action-playlist],.personal-library button,.playlist-form-dialog button { border:1px solid var(--line);border-radius:.65rem;background:transparent;color:var(--ink);cursor:pointer; }
.quick-track-actions button { min-height:48px;padding:.6rem;font-weight:750; }
.playlist-action-heading { display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0 .55rem; }
.playlist-action-heading button { padding:.48rem .65rem;color:var(--cyan); }
.track-action-list>[data-action-playlist] { width:100%;min-height:52px;margin:.35rem 0;padding:.65rem .75rem;display:flex;align-items:center;justify-content:space-between;text-align:left; }
.track-action-list>[data-action-playlist] span { display:grid;gap:.18rem; }.track-action-list>[data-action-playlist] small { color:var(--muted); }.track-action-list>[data-action-playlist] b { color:var(--cyan);font-size:1rem; }
.playlist-form-fields { display:grid;gap:1rem;padding:1.15rem; }.playlist-form-fields label { display:grid;gap:.42rem;color:var(--muted);font-size:.72rem;font-weight:750; }.playlist-form-fields label small { font-weight:400; }
.playlist-form-fields input,.playlist-form-fields textarea { width:100%;padding:.75rem;border:1px solid var(--line);border-radius:.65rem;background:#061216;color:var(--ink);font:inherit;resize:vertical; }
.playlist-form-dialog footer { justify-content:flex-end;border-top:1px solid var(--line);border-bottom:0; }.playlist-form-dialog footer button { padding:.65rem .85rem; }
.primary { border-color:var(--cyan)!important;background:var(--cyan)!important;color:#061216!important;font-weight:850; }.danger { color:#ff9eaa!important;border-color:rgba(255,120,140,.4)!important; }
.form-error { min-height:1.2em;margin:0;color:#ffadba;font-size:.72rem; }
.shelf-heading { display:flex!important;align-items:center;justify-content:space-between;grid-template-columns:none!important; }.shelf-heading h3 { margin:0; }.shelf-heading button { padding:.55rem .75rem; }
.personal-playlists-shelf>div:last-child { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
.personal-card { position:relative;overflow:hidden;border:1px solid var(--line);border-radius:.85rem;background:#07161a; }.personal-card>button:first-child { width:100%;padding:0;border:0;background:transparent;color:var(--ink);text-align:left; }.personal-card img { width:100%;aspect-ratio:16/9;object-fit:cover; }.personal-card span { display:grid;gap:.2rem;padding:.7rem; }.personal-card small { color:var(--muted); }.personal-card>button:last-child { position:absolute;right:.55rem;top:calc(56.25% - 18px);width:38px;height:38px;border-radius:50%;background:var(--cyan);color:#061216; }
.library-track-wrap { min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) 38px;align-items:center;gap:.35rem; }.library-track-wrap:not(:has(>input)) { grid-template-columns:minmax(0,1fr) 38px; }.library-track-wrap>input { width:18px;height:18px;accent-color:var(--cyan); }.library-track-more { width:34px;height:34px; }
.favourite-tools { grid-column:1/-1;display:flex!important;flex-wrap:wrap;gap:.4rem; }.favourite-tools button { padding:.5rem .65rem; }
.personal-detail>.back-link { margin-bottom:1rem;padding:.5rem .65rem;color:var(--cyan); }.personal-detail>header { display:flex;justify-content:space-between;align-items:end;gap:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--line); }.personal-detail h3 { margin:.2rem 0;font:500 clamp(2rem,5vw,3.4rem)/1 Georgia,serif; }.personal-detail header p:not(.eyebrow),.personal-detail header small { color:var(--muted); }.personal-detail-actions { display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.45rem; }.personal-detail-actions button { padding:.6rem .75rem; }
.personal-track-list { margin-top:.75rem; }.personal-track-row { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.65rem 0;border-bottom:1px solid rgba(164,214,206,.1); }.personal-track-row>button { min-width:0;padding:.4rem;border:0;background:transparent;text-align:left; }.personal-track-row strong,.personal-track-row small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.personal-track-row small { margin-top:.2rem;color:var(--muted); }.personal-track-row>div { display:flex;gap:.3rem; }.personal-track-row>div button { width:32px;height:32px; }
.personal-search { display:block;max-width:360px;margin:1rem 0 0 auto; }.personal-search input { width:100%;padding:.7rem .8rem;border:1px solid var(--line);border-radius:999px;background:#061216;color:var(--ink); }
.fatal-player-error { margin:1rem; padding:1rem; border:1px solid #f29a8b; color:#ffd1c8; }
@media(max-width:850px){.playlist-panel{min-width:0;overflow:hidden}.playlist-list{width:100%;max-width:100%;overflow-x:auto}.library-panel{width:100%}.dock-actions{grid-column:2;grid-row:1}.dock-actions>button,.sleep-control{font-size:.65rem}}
@media(max-width:540px){.track-row{grid-template-columns:38px minmax(0,1fr) auto 32px}.track-row>em{display:none}.dock-actions>button[data-share],.sleep-control{display:none}.dock-actions{flex-wrap:nowrap}}

@media (max-width: 600px) {
  .library-nav a,
  .mood-chip,
  .collection-favorite,
  .track-favorite {
    min-height: 44px;
  }

  .collection-favorite,
  .track-favorite {
    min-width: 44px;
  }
  .library-nav { top:0; justify-content:stretch; padding:.45rem .6rem; }
  .library-nav a { flex:1; padding:.55rem .35rem; text-align:center; font-size:.68rem; }
  .browse-home,.personal-library { margin:0; padding:1rem .9rem; border-inline:0; border-radius:0; }
  .browse-tabs { display:grid; grid-template-columns:1fr 1fr; }
  .browse-tabs a { border:1px solid var(--line); text-align:center; }
  .browse-sort { margin:0 0 1rem; justify-content:flex-start; }
  .browse-grid.collection-grid { grid-template-columns:1fr 1fr; gap:.65rem; }
  .browse-grid.taxonomy-grid { grid-template-columns:1fr 1fr; }
  .quick-track-actions { grid-template-columns:1fr; }
  .action-dialog,.playlist-form-dialog { width:100%;max-width:none;margin:auto 0 0;border-radius:1rem 1rem 0 0; }
  .personal-playlists-shelf>div:last-child { grid-template-columns:1fr 1fr; }
  .personal-detail>header { display:grid;align-items:start; }.personal-detail-actions { justify-content:flex-start; }
  .personal-track-row { grid-template-columns:minmax(0,1fr); }.personal-track-row>div { justify-content:flex-end; }
  .favourite-tools { overflow-x:auto;flex-wrap:nowrap; }.favourite-tools button { flex:0 0 auto; }
  body { padding-bottom: 132px; }
  .topbar { height: 62px; padding-inline: .75rem; }
  .brand { gap: .55rem; }
  .brand img { width: 36px; height: 36px; }
  .brand strong { font-size: .96rem; }
  .brand small { font-size: .58rem; }
  .main-music-link { padding: .48rem .62rem; font-size: .68rem; }
  .page-shell { width: 100%; }
  .intro { padding: 1.35rem .9rem 1rem; }
  .intro .eyebrow { margin-bottom: .45rem; font-size: .62rem; }
  .intro h1 { max-width: 330px; margin-bottom: .7rem; font-size: clamp(2rem, 10vw, 2.65rem); line-height: .98; }
  .intro > p:not(.eyebrow):not(:last-child) { margin: 0; font-size: .9rem; line-height: 1.35; }
  .intro > p:last-child { margin: .7rem 0 0; font-size: .88rem; line-height: 1.25; }
  .listening-home { margin:0; padding:0 .9rem 1rem; }
  .continue-card { grid-template-columns:52px minmax(0,1fr) auto; gap:.65rem; margin-bottom:1rem; padding:.6rem; }
  .continue-art { width:52px; height:52px; border-radius:10px; }
  .continue-card b { padding:.45rem .55rem; font-size:.65rem; }
  .discovery-heading { display:grid; align-items:start; gap:.7rem; }
  .discovery-heading h2 { font-size:1.55rem; }
  .discovery-shortcuts { justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; padding-bottom:.25rem; }
  .discovery-shortcuts button { flex:0 0 auto; }
  .collection-rail { display:flex; margin-right:-.9rem; gap:.6rem; scroll-snap-type:x proximity; }
  .collection-card { flex:0 0 138px; scroll-snap-align:start; }
  .collection-card .collection-art { aspect-ratio:1; }
  .player-shell { margin: 0; border-inline: 0; border-radius: 0; overflow: visible; }
  .playlist-panel { padding: .9rem; }
  .panel-heading { margin: 0 0 .6rem; }
  .panel-heading small { font-size: .62rem; }
  .mobile-playlist-picker { display: grid; gap: .4rem; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .mobile-playlist-picker select { width: 100%; min-height: 48px; padding: .72rem 2.4rem .72rem .8rem; border: 1px solid rgba(var(--cyan-rgb), .35); border-radius: .8rem; background: #07181c; color: var(--ink); font: 700 .88rem/1.2 Inter, sans-serif; }
  .playlist-list { display: none; }
  .library-panel { padding: 1rem .8rem 1.5rem; scroll-margin-top: 66px; }
  .library-heading { gap: .75rem; }
  .library-heading h2 { margin-bottom: .35rem; font-size: 1.8rem; }
  .library-heading p:not(.eyebrow) { font-size: .83rem; line-height: 1.35; }
  .search-box input { min-height: 44px; }
  .filter-drawer { margin:.75rem 0; border:1px solid var(--line); border-radius:.75rem; background:rgba(6,18,22,.72); }
  .filter-drawer > summary { min-height:44px; padding:.7rem .8rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; color:var(--ink); font-size:.75rem; font-weight:800; cursor:pointer; }
  .filter-drawer > summary small { color:var(--muted); font-size:.64rem; font-weight:500; }
  .library-filters { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin: 0; padding:0 .7rem .7rem; }
  .library-filters label { display: grid; gap: .25rem; font-size: .62rem; }
  .library-filters select { width: 100%; min-height: 40px; padding: .35rem .45rem; font-size: .72rem; }
  .visualizer-toolbar, .visualizer { display: none; }
  .track-list { max-height: none; overflow: visible; padding: 0; }
  .track-row { grid-template-columns: 36px minmax(0,1fr) auto 30px 30px; gap: .4rem; min-height: 58px; padding: .55rem .15rem; }
  .track-play { width: 34px; height: 34px; }
  .track-copy strong { font-size: .84rem; }
  .track-copy small { font-size: .68rem; }
  .track-row > small { display: none; }
  .track-row > em { display: block; min-width: 43px; font-size: .64rem; line-height: 1.1; }
  .track-add { width: 28px; height: 28px; }
  .dock { min-height: 118px; padding: .55rem .7rem .65rem; grid-template-columns: minmax(0,1fr) auto; gap: .35rem .6rem; }
  .dock-track { gap: .55rem; }
  .dock-art { width: 36px; height: 36px; border-radius: 9px; }
  .dock-track strong { font-size: .78rem; }
  .dock-track span { font-size: .64rem; }
  .dock-actions { grid-column: 2; grid-row: 1; }
  .dock-actions > button[data-share], .dock-actions .sleep-control, .dock-actions .volume { display: none; }
  .dock-actions > button[data-queue-open] { padding: .38rem .5rem; font-size: .62rem; }
  .dock-transport { grid-column: 1 / -1; grid-row: 2; }
  .transport-buttons { gap: .65rem; }
  .transport-buttons button { width: 30px; height: 30px; font-size: 1.15rem; }
  .transport-buttons .play-button { width: 40px; height: 40px; }
  .timeline { grid-template-columns: 34px 1fr 34px; gap: .35rem; font-size: .6rem; }
}

/* Track-reactive listening atmosphere. The Web Audio path supplies --level and
   --bass-pulse; tempo still shapes the palette when analysis is unavailable. */
body {
  --track-hue: 174;
  --tempo-energy: .38;
  --bass-pulse: 0;
  background:
    radial-gradient(circle at 82% 4%, hsla(var(--track-hue), 72%, 44%, calc(.13 + var(--bass-pulse) * .22)), transparent 34rem),
    radial-gradient(circle at 10% 40%, hsla(calc(var(--track-hue) + 70), 62%, 38%, calc(.1 + var(--tempo-energy) * .1)), transparent 30rem),
    var(--bg);
  transition: background-color .8s ease, color .35s ease;
}
body[data-tempo-band="slow"] { --visual-glow: .35; }
body[data-tempo-band="medium"] { --visual-glow: .58; }
body[data-tempo-band="fast"] { --visual-glow: .88; }
.visualizer {
  position: relative;
  isolation: isolate;
  height: 78px;
  gap: 2px;
  background:
    radial-gradient(circle at 50% 110%, hsla(var(--track-hue), 88%, 58%, calc(.08 + var(--bass-pulse) * .28)), transparent 62%),
    rgba(1,8,10,.72);
  box-shadow: inset 0 0 32px hsla(var(--track-hue), 80%, 54%, .045);
  transition: border-color .5s ease, box-shadow .5s ease;
}
.visualizer::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:50% 10px auto;
  height:1px;
  background:linear-gradient(90deg,transparent,hsla(var(--track-hue),70%,72%,.16),transparent);
}
.visualizer::after {
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  bottom:-35px;
  width:48%;
  height:58px;
  border-radius:50%;
  background:hsla(var(--track-hue),90%,62%,calc(.04 + var(--bass,0) * .22));
  filter:blur(18px);
  transform:translateX(-50%) scale(calc(.82 + var(--live-energy,0) * .9));
  transition:transform 55ms linear;
}
.visualizer i {
  background: linear-gradient(to top, hsl(calc(var(--track-hue) - 18) 66% 32%), hsl(var(--track-hue) 90% 68%));
}
.visualizer.is-reactive i:nth-child(-n+10) { background:linear-gradient(to top,hsl(calc(var(--track-hue) - 34) 72% 30%),hsl(calc(var(--track-hue) - 12) 94% 65%)); }
.visualizer.is-reactive i:nth-child(n+28) { background:linear-gradient(to top,hsl(calc(var(--track-hue) + 18) 68% 32%),hsl(calc(var(--track-hue) + 62) 88% 70%)); }
.visualizer.is-reactive i {
  height: 100%;
  opacity: calc(.34 + var(--level, .05) * .66);
  transform: scaleY(var(--level, .05));
  transform-origin: bottom;
  animation: none;
  transition: transform 70ms linear, opacity 90ms linear;
}
.visualizer[data-mode="wave"].is-reactive i {
  height: 4px !important;
  transform: translateY(var(--wave-y, 0)) scaleY(calc(1 + var(--level, .05) * 2));
  transform-origin: center;
  animation: none !important;
  transition: transform 32ms linear, opacity 60ms linear;
}
.visualizer[data-mode="wave"].is-reactive i { background:hsl(var(--track-hue) 92% 70%); box-shadow:0 0 7px hsla(var(--track-hue),92%,66%,.55); }
.visualizer.is-beat { animation:visualizer-hit 180ms ease-out; }
@keyframes visualizer-hit {
  0% { border-color:hsla(var(--track-hue),96%,76%,.72); box-shadow:inset 0 0 42px hsla(var(--track-hue),90%,62%,.2),0 0 18px hsla(var(--track-hue),88%,60%,.14); }
  100% { border-color:hsla(var(--track-hue),88%,68%,.28); }
}
.visualizer[data-reactive="audio"] {
  border-color: hsla(var(--track-hue), 88%, 68%, .28);
  box-shadow: inset 0 0 38px hsla(var(--track-hue), 84%, 60%, calc(.05 + var(--bass-pulse) * .18));
}
@media (max-width: 600px) {
  .visualizer-toolbar { display: flex; margin: .8rem 0 .35rem; }
  .visualizer { display: flex; height: 48px; margin-bottom: .65rem; padding: 7px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
  .visualizer i { height: var(--height, 24%) !important; opacity: .46; transform: none !important; transition: none; animation: none !important; }
  .visualizer[data-mode="wave"] i { height: 4px !important; transform: translateY(var(--wave-y, 0)) !important; }
}

/* Cover palettes, genre physics and the immersive visual session. */
body {
  --palette-primary-rgb: 98,231,210;
  --palette-secondary-rgb: 144,102,210;
  background:
    radial-gradient(circle at 82% 4%, rgba(var(--palette-primary-rgb),calc(.1 + var(--bass-pulse) * .22)),transparent 34rem),
    radial-gradient(circle at 10% 40%,rgba(var(--palette-secondary-rgb),calc(.08 + var(--tempo-energy) * .1)),transparent 30rem),
    var(--bg);
}
.visualizer {
  background:
    radial-gradient(circle at calc(20% + var(--mids,0) * 45%) 110%,rgba(var(--palette-primary-rgb),calc(.08 + var(--bass-pulse) * .3)),transparent 58%),
    radial-gradient(circle at 82% 0%,rgba(var(--palette-secondary-rgb),calc(.04 + var(--treble,0) * .18)),transparent 44%),
    rgba(1,8,10,.76);
}
.visualizer i { background:linear-gradient(to top,rgb(var(--palette-secondary-rgb)),rgb(var(--palette-primary-rgb))); }
.visualizer.is-reactive i:nth-child(-n+12) { background:linear-gradient(to top,rgb(var(--palette-secondary-rgb)),rgb(var(--palette-primary-rgb))); }
.visualizer.is-reactive i:nth-child(n+30) { background:linear-gradient(to top,rgb(var(--palette-primary-rgb)),rgb(var(--palette-secondary-rgb))); }
body[data-visual-profile="fluid"] .visualizer i { border-radius:999px; transition:transform 150ms ease-out,opacity 180ms ease-out; }
body[data-visual-profile="rush"] .visualizer { gap:1px; }
body[data-visual-profile="rush"] .visualizer i { transition:transform 28ms linear,opacity 35ms linear; }
body[data-visual-profile="grid"] .visualizer i { border-radius:1px 1px 0 0; transition:transform 48ms steps(3,end),opacity 48ms linear; }
body[data-visual-profile="bounce"] .visualizer i { border-radius:45% 45% 12% 12%; transition:transform 62ms cubic-bezier(.2,.9,.35,1.35); }
body[data-visual-profile="smoke"] .visualizer i { border-radius:999px; filter:blur(.7px); transition:transform 180ms ease-out,opacity 220ms ease-out; }
body[data-visual-profile="neon"] .visualizer i { box-shadow:0 0 7px rgba(var(--palette-primary-rgb),.35); }
.visual-experience { --pointer-x:50%; --pointer-y:50%; --tilt-x:0deg; --tilt-y:0deg; }
.visual-fullscreen-heading,.visual-fullscreen-controls { display:none; }
.visualizer-toolbar [data-visual-fullscreen] { color:var(--cyan); }
.visual-experience:is(:fullscreen,.is-expanded) {
  position:fixed;
  z-index:80;
  inset:0;
  width:100%;
  height:100dvh;
  padding:clamp(1rem,3vw,3rem);
  display:grid;
  grid-template-rows:auto auto minmax(180px,1fr) auto;
  gap:clamp(.7rem,2vh,1.5rem);
  overflow:hidden;
  color:var(--ink);
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y),rgba(var(--palette-primary-rgb),calc(.14 + var(--mids,0) * .2)),transparent 27%),
    radial-gradient(circle at 15% 85%,rgba(var(--palette-secondary-rgb),calc(.18 + var(--bass,0) * .2)),transparent 38%),
    radial-gradient(circle at 85% 12%,rgba(var(--palette-primary-rgb),calc(.09 + var(--treble,0) * .2)),transparent 32%),
    #02080a;
}
.visual-experience.is-expanded { position:fixed; }
.visual-experience:is(:fullscreen,.is-expanded) .visual-fullscreen-heading {
  display:grid;
  grid-template-columns:clamp(80px,13vw,170px) minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(1rem,3vw,2.5rem);
}
.visual-fullscreen-heading img { width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:18%; box-shadow:0 25px 70px rgba(var(--palette-primary-rgb),.2); transform:perspective(800px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) scale(calc(1 + var(--bass,0) * .045)); transition:transform 80ms linear; }
.visual-fullscreen-heading h2 { margin:.25rem 0; font:500 clamp(2rem,5vw,5rem)/.95 Georgia,serif; letter-spacing:-.035em; }
.visual-fullscreen-heading p:not(.eyebrow) { margin:0; color:var(--muted); }
.visual-fullscreen-heading > button { align-self:start; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:rgba(0,0,0,.24); color:var(--ink); font-size:1.5rem; cursor:pointer; }
.visual-experience:is(:fullscreen,.is-expanded) .visualizer-toolbar { margin:0; }
.visual-experience:is(:fullscreen,.is-expanded) .visualizer-toolbar [data-visual-fullscreen] { display:none; }
.visual-experience:is(:fullscreen,.is-expanded) .visualizer { width:100%; height:auto; min-height:180px; margin:0; padding:clamp(12px,2vw,28px); border-radius:clamp(14px,2vw,28px); gap:clamp(2px,.35vw,7px); }
.visual-experience:is(:fullscreen,.is-expanded) .visual-fullscreen-controls { display:flex; align-items:center; justify-content:center; gap:1rem; }
.visual-fullscreen-controls button { width:48px; height:48px; border:1px solid var(--line); border-radius:50%; background:rgba(0,0,0,.25); color:var(--ink); font-size:1.7rem; cursor:pointer; }
.visual-fullscreen-controls .visual-play { width:64px; height:64px; background:rgb(var(--palette-primary-rgb)); color:#031012; font-size:1.1rem; }
body.visual-fullscreen-open { overflow:hidden; }
@media(max-width:600px){
  .visualizer-toolbar [data-visual-fullscreen] { font-size:.6rem; }
  .visual-experience:is(:fullscreen,.is-expanded) { padding:1rem; grid-template-rows:auto auto minmax(160px,1fr) auto; }
  .visual-experience:is(:fullscreen,.is-expanded) .visual-fullscreen-heading { grid-template-columns:72px minmax(0,1fr) 38px; gap:.8rem; }
  .visual-fullscreen-heading h2 { font-size:clamp(1.5rem,8vw,2.4rem); }
  .visual-fullscreen-heading > button { width:38px; height:38px; }
}
@media(prefers-reduced-motion:reduce){.visual-fullscreen-heading img{transform:none}.visual-experience:is(:fullscreen,.is-expanded){background:#02080a}}

/* Discovery rebuilt around explicit listening needs and informative cards. */
.listening-home {
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(5, 17, 21, .5);
}
.discovery-heading {
  display: block;
  max-width: 46rem;
  margin-bottom: 1rem;
}
.discovery-heading h2 { margin-bottom: .55rem; }
.discovery-heading p:last-child { margin: 0; color: var(--muted); line-height: 1.5; }
.discovery-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}
.discovery-shortcuts button {
  min-height: 84px;
  padding: .85rem 1rem;
  display: grid;
  align-content: center;
  gap: .3rem;
  border-radius: 12px;
  text-align: left;
}
.discovery-shortcuts button strong { color: var(--ink); font-size: .84rem; }
.discovery-shortcuts button small { color: var(--muted); font-size: .7rem; line-height: 1.4; }
.discovery-shortcuts button.is-active {
  border-color: rgba(var(--cyan-rgb), .65);
  background: rgba(var(--cyan-rgb), .11);
}
.discovery-shortcuts button.is-active strong { color: var(--cyan); }
.discovery-recommendations { margin-top: 1.25rem; }
.discovery-empty {
  margin: 0;
  padding: 1rem;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
}
.recommendation-heading { margin-bottom: .85rem; }
.recommendation-heading h3 { margin: .2rem 0 .35rem; font: 500 1.65rem/1.1 Georgia, serif; }
.recommendation-heading > p:last-child { margin: 0; color: var(--muted); }
.recommendation-grid,
.browse-grid.collection-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
}
.recommendation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.collection-card { min-width: 0; height: 100%; }
.collection-card > button:first-child { height: 100%; display: grid; grid-template-rows: auto 1fr; }
.collection-card .collection-art {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.collection-card > button:first-child > .collection-copy {
  min-width: 0;
  padding: .8rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
}
.collection-card .collection-copy strong {
  overflow: visible;
  white-space: normal;
  font-size: .86rem;
  line-height: 1.25;
}
.collection-card .collection-copy p {
  margin: 0;
  color: #a7b9b9;
  font-size: .7rem;
  line-height: 1.45;
}
.collection-card .collection-copy > small { margin-top: auto; padding-top: .2rem; }
.collection-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.collection-tags em {
  padding: .25rem .4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #8ea4a5;
  font-size: .58rem;
  font-style: normal;
  line-height: 1;
  text-transform: capitalize;
}
.track-sound-profile {
  margin-bottom: .9rem;
  padding: .9rem;
  border: 1px solid rgba(var(--cyan-rgb), .2);
  border-radius: .8rem;
  background: rgba(var(--cyan-rgb), .055);
}
.track-sound-profile p { margin: 0; color: #d3dede; font-size: .85rem; line-height: 1.55; }
.track-sound-profile > div { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.track-sound-profile span { padding: .28rem .45rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .62rem; }
.track-add { color: var(--muted) !important; font-size: .9rem; }

@media (max-width: 1100px) {
  .browse-grid.collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .discovery-shortcuts { grid-template-columns: 1fr 1fr; }
  .recommendation-grid,
  .browse-grid.collection-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .listening-home { padding: 1rem .9rem; border-inline: 0; border-radius: 0; }
  .discovery-heading { gap: 0; }
  .discovery-shortcuts { grid-template-columns: 1fr; overflow: visible; }
  .discovery-shortcuts button { min-height: 72px; width: 100%; }
  .recommendation-grid,
  .browse-grid.collection-grid { grid-template-columns: 1fr; }
  .collection-card { width: 100%; max-width: none; }
  .collection-card .collection-art { aspect-ratio: 16 / 9; }
  .collection-card .collection-copy p { font-size: .74rem; }
}

/* Final surface polish: shared depth, tactile controls and clearer browsing. */
::selection { background: rgba(var(--palette-primary-rgb), .3); color: var(--ink); }
.topbar {
  box-shadow: 0 1px 0 rgba(255,255,255,.018), 0 12px 34px rgba(0,0,0,.14);
}
.main-music-link,
.discovery-shortcuts button,
.visualizer-toolbar button,
.dock-actions > button,
.transport-buttons button,
.track-play,
.track-add,
.visual-fullscreen-controls button,
.visual-fullscreen-heading > button {
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.main-music-link:hover,
.discovery-shortcuts button:hover,
.visualizer-toolbar button:hover,
.dock-actions > button:hover {
  background: rgba(var(--palette-primary-rgb), .07);
}
.discovery-shortcuts button:active,
.visualizer-toolbar button:active,
.dock-actions > button:active,
.transport-buttons button:active,
.track-play:active,
.track-add:active { transform: scale(.94); }
.collection-rail {
  scrollbar-color: rgba(var(--palette-primary-rgb), .32) transparent;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}
.collection-card {
  position: relative;
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
  transition: transform 220ms cubic-bezier(.2,.75,.25,1), border-color 180ms ease, box-shadow 220ms ease;
}
.collection-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.collection-card:hover,
.collection-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(0,0,0,.3), 0 0 0 1px rgba(var(--palette-primary-rgb),.12);
}
.collection-card .collection-art {
  transition: filter 260ms ease, transform 360ms cubic-bezier(.2,.75,.25,1);
}
.collection-card:hover .collection-art,
.collection-card:focus-visible .collection-art { filter: saturate(1.08) contrast(1.03); transform: scale(1.018); }
.player-shell {
  border-color: rgba(var(--palette-primary-rgb), .15);
  background: linear-gradient(145deg, rgba(6,21,25,.78), rgba(3,13,17,.72));
  box-shadow: 0 34px 100px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.025);
}
.playlist-button,
.track-row { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
.playlist-button:hover { background: rgba(var(--palette-primary-rgb), .065); }
.playlist-button.is-active {
  border-color: rgba(var(--palette-primary-rgb), .34);
  background: linear-gradient(120deg, rgba(var(--palette-primary-rgb),.14), rgba(var(--palette-secondary-rgb),.045));
  box-shadow: inset 3px 0 0 rgba(var(--palette-primary-rgb),.78);
}
.track-row:hover { background: linear-gradient(90deg, rgba(var(--palette-primary-rgb),.065), transparent 72%); }
.track-row.is-active {
  background: linear-gradient(90deg, rgba(var(--palette-primary-rgb),.11), rgba(var(--palette-secondary-rgb),.025) 65%, transparent);
}
.track-row.is-active .track-play { border-color: rgba(var(--palette-primary-rgb),.5) !important; background: rgba(var(--palette-primary-rgb),.1); }
.track-list {
  scroll-margin-top: 96px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}
.dock {
  border-color: rgba(var(--palette-primary-rgb), .22);
  background: linear-gradient(100deg, rgba(3,12,15,.975), rgba(5,17,20,.955));
  box-shadow: 0 -18px 55px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.025);
}
.dock-art { box-shadow: 0 8px 24px rgba(0,0,0,.32); }
.transport-buttons .play-button,
.visual-fullscreen-controls .visual-play {
  box-shadow: 0 8px 28px rgba(var(--palette-primary-rgb),.18);
}
.transport-buttons .play-button:hover,
.visual-fullscreen-controls .visual-play:hover { transform: translateY(-1px) scale(1.04); box-shadow: 0 11px 34px rgba(var(--palette-primary-rgb),.28); }
.search-box input,
.library-filters select,
.mobile-playlist-picker select,
.sleep-control select {
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.search-box input:focus,
.library-filters select:focus-visible,
.mobile-playlist-picker select:focus-visible,
.sleep-control select:focus-visible {
  border-color: rgba(var(--palette-primary-rgb),.7);
  box-shadow: 0 0 0 3px rgba(var(--palette-primary-rgb),.1);
}

@media (hover: none) {
  .collection-card:hover { transform: none; box-shadow: 0 10px 28px rgba(0,0,0,.16); }
  .collection-card:hover .collection-art { filter: none; transform: none; }
}
@media (max-width: 600px) {
  .collection-rail { padding-bottom: .8rem; scroll-padding-inline: .1rem 1rem; }
  .collection-card { box-shadow: 0 8px 22px rgba(0,0,0,.22); }
  .player-shell { box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
  .mobile-playlist-picker select { box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
  .dock { box-shadow: 0 -14px 40px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.025); }
}
@media (prefers-reduced-motion: reduce) {
  .collection-card,
  .collection-card .collection-art,
  .main-music-link,
  .discovery-shortcuts button,
  .visualizer-toolbar button,
  .dock-actions > button,
  .transport-buttons button,
  .track-play,
  .track-add { transition: none; }
  .collection-card:hover,
  .collection-card:focus-visible,
  .collection-card:hover .collection-art,
  .collection-card:focus-visible .collection-art { transform: none; }
}
.topbar-actions,.topbar .spotify-link { display:flex; align-items:center; }
.topbar-actions { gap:.65rem; }
.topbar .spotify-link { gap:.45rem; padding:.55rem .72rem; border:1px solid var(--line); border-radius:999px; color:var(--ink); text-decoration:none; font-size:.78rem; font-weight:700; }
.topbar .spotify-link:hover,.topbar .spotify-link:focus-visible { border-color:#1ed760; color:#1ed760; }
.topbar .spotify-link img { width:20px; height:20px; }

@media(max-width:540px) {
  .topbar-actions { gap:.35rem; }
  .topbar .spotify-link { width:38px; height:38px; justify-content:center; padding:0; }
  .topbar .spotify-link span { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
}

.suggestion-box { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,520px); gap:2rem; align-items:start; margin:0 0 3rem; padding:clamp(1.2rem,3vw,2rem); border:1px solid var(--line); border-radius:18px; background:rgba(5,22,27,.62); }
.studio-sides { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; margin:0 0 1.5rem; padding:1.1rem 1.3rem; border:1px solid rgba(227,188,113,.24); border-radius:16px; background:linear-gradient(110deg,rgba(104,67,38,.22),rgba(5,22,27,.7)); }
.studio-sides h2 { margin:.15rem 0 .4rem; font:500 clamp(1.5rem,3vw,2.2rem)/1 Georgia,serif; }
.studio-sides p:not(.eyebrow) { margin:0; color:var(--muted); line-height:1.45; }
.studio-sides-link { flex:0 0 auto; padding:.7rem .9rem; border:1px solid rgba(227,188,113,.42); border-radius:999px; color:var(--gold); text-decoration:none; font-weight:750; font-size:.82rem; }
.studio-sides-link:hover,.studio-sides-link:focus-visible { border-color:var(--gold); color:var(--ink); }
.suggestion-box h2 { margin:.2rem 0 .65rem; font:500 clamp(1.7rem,3vw,2.5rem)/1 Georgia,serif; }
.suggestion-box p:not(.eyebrow) { margin:0; max-width:620px; color:var(--muted); line-height:1.55; }
.suggestion-box form { display:grid; gap:.5rem; }
.suggestion-box label { color:var(--ink); font-size:.78rem; font-weight:750; }
.suggestion-box textarea { width:100%; resize:vertical; min-height:6rem; padding:.8rem; border:1px solid var(--line); border-radius:.7rem; background:#061216; color:var(--ink); font:inherit; }
.suggestion-box textarea:focus { outline:2px solid var(--cyan); outline-offset:1px; }
.suggestion-submit-row { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.suggestion-submit-row button { padding:.65rem .9rem; }
.suggestion-submit-row button:disabled { opacity:.6; cursor:wait; }
.suggestion-submit-row p { font-size:.8rem; }
.suggestion-honeypot { position:absolute; left:-10000px; width:1px; height:1px; }
@media(max-width:700px) { .suggestion-box { grid-template-columns:1fr; gap:1.1rem; } }
@media(max-width:700px) { .studio-sides { align-items:flex-start; flex-direction:column; } }
.library-heading h2 {
  scroll-margin-top: 96px;
}
.page-shell {
  display: flex;
  flex-direction: column;
}

.page-shell .suggestion-box {
  order: 1;
}

.page-shell .studio-sides {
  order: 2;
}