/* The Castunes web player. The app's own surfaces and reds (Color.kt), the
   site's type. Corners stay in the app's 6-10px range; only play buttons and
   avatars are round. */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --ground:  #070707;
  --panel:   #121212;
  --s1:      #1A1A1A;
  --s2:      #242424;
  --s3:      #2E2E2E;
  --line:    #2A2A2A;
  --text:    #F5F5F5;
  --dim:     #ABABAB;
  --dimmer:  #7C7C7C;
  --red:     #950606;
  --red-hi:  #C4241C;
  --red-soft: rgba(149, 6, 6, .2);
  --ok:      #4CC38A;

  --f-body:    "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --f-mono:    "DM Mono", ui-monospace, Consolas, monospace;

  --r: 8px;
  --r-lg: 10px;
  --side: 280px;
  --np: 340px;
  --bar: 84px;
  --gap: 8px;
  color-scheme: dark;
}

html, body { height: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--text);
  font-family: var(--f-body); font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
/* No grey/blue box flashing over whatever is tapped (Chrome on Android draws
   one by default): every control here has its own pressed look instead. */
html { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; }
/* Covers and avatars are not files to drag around (SoundCloud draws them as
   backgrounds, so nothing drags there either). Rows that are meant to be
   dragged -- the tracklist in Upload and Edit album -- still are. */
img { -webkit-user-drag: none; user-drag: none; }
input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red-hi); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.boot { height: 100vh; display: grid; place-items: center; }
.boot svg { width: 56px; height: 56px; animation: boot 1.1s ease-in-out infinite alternate; }
@keyframes boot { from { opacity: .35; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ shell */
.shell {
  height: 100dvh; display: grid; gap: var(--gap); padding: var(--gap);
  grid-template-columns: var(--side) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) var(--bar);
  grid-template-areas: "side main" "bar bar";
}
.shell.with-np { grid-template-columns: var(--side) minmax(0, 1fr) var(--np); grid-template-areas: "side main np" "bar bar bar"; }
.side { grid-area: side; display: flex; flex-direction: column; gap: var(--gap); min-height: 0; }
.main { grid-area: main; background: var(--panel); border-radius: var(--r-lg); overflow: hidden; position: relative; min-width: 0; container-type: inline-size; }
.scroller { height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
.npanel { grid-area: np; background: var(--panel); border-radius: var(--r-lg); overflow: hidden; min-height: 0; display: flex; flex-direction: column; }
.pbar { grid-area: bar; }

@media (max-width: 1180px) {
  .shell.with-np { grid-template-columns: var(--side) minmax(0, 1fr); grid-template-areas: "side main" "bar bar"; }
  .shell.with-np .npanel { position: fixed; right: var(--gap); top: var(--gap); bottom: calc(var(--bar) + var(--gap) * 2); width: var(--np); z-index: 30; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
}
@media (max-width: 980px) { :root { --side: 76px; } }

/* --------------------------------------------------------------- sidebar */
.sblock { background: var(--panel); border-radius: var(--r-lg); }
.snav { padding: 18px 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 16px; }
.brand svg { width: 28px; height: 28px; flex: none; }
.brand b { font-family: var(--f-display); font-weight: 800; font-size: 19px; letter-spacing: -.03em; }
.navi {
  display: flex; align-items: center; gap: 14px; padding: 9px 10px; border-radius: var(--r);
  color: var(--dim); font-weight: 600; transition: color .15s, background .15s;
}
.navi:hover { color: var(--text); }
.navi.on { color: var(--text); background: var(--s1); }
.navi svg { width: 22px; height: 22px; flex: none; }

.slib { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Signed out, the panel holds two cards and the links; on a short screen (a 720 px laptop) they scrolled out of it onto the page. */
.slib { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
.slib .sguest { flex: none; }
.slib-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; }
.slib-head .navi { padding: 6px 4px; }
.chips { display: flex; gap: 6px; padding: 4px 16px 10px; flex-wrap: wrap; }
.chip {
  padding: 5px 11px; border-radius: 6px; background: var(--s1); color: var(--text);
  font-size: 13px; font-weight: 600; transition: background .15s;
}
.chip:hover { background: var(--s2); }
.chip.on { background: var(--text); color: #111; }
.slist { flex: 1; overflow-y: auto; padding: 0 8px 10px; scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
.sitem { display: flex; align-items: center; gap: 11px; padding: 6px 8px; border-radius: var(--r); min-width: 0; }
.sitem:hover { background: var(--s1); }
.sitem.on { background: var(--s2); }
.sitem .thumb { width: 44px; height: 44px; border-radius: 6px; flex: none; }
.sitem .thumb.round { border-radius: 50%; }
.sitem .t { min-width: 0; display: flex; flex-direction: column; }
.sitem .t b { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sitem.playing .t b { color: var(--red-hi); }
.sitem .t i { font-style: normal; font-size: 13px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sguest { margin: 4px 12px 12px; padding: 16px; border-radius: var(--r-lg); background: var(--s1); display: flex; flex-direction: column; gap: 10px; }
.sguest b { font-weight: 700; font-size: 15px; }
.sguest p { margin: 0; color: var(--dim); font-size: 13.5px; }
.sfoot { padding: 10px 18px 14px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--dimmer); }
.sfoot a:hover { color: var(--text); }

/* The narrow sidebar: icons only. Scoped to .side -- unscoped, these hid the
   names in every .sitem on the page, the queue's included. */
@media (max-width: 980px) {
  .side .brand b, .side .navi span, .side .chips, .side .sitem .t, .side .sguest, .side .sfoot, .side .slib-head .ibtn { display: none; }
  .side .brand { justify-content: center; padding: 0 0 14px; }
  .side .navi { justify-content: center; }
  .side .slib-head { justify-content: center; }
  .side .sitem { justify-content: center; padding: 6px 0; }
}

.liked-tile { background: linear-gradient(135deg, #5e0404, #c4241c); display: grid; place-items: center; }
.liked-tile svg { width: 45%; height: 45%; color: #fff; }

/* --------------------------------------------------------------- top bar */
.topbar {
  position: sticky; top: 0; z-index: 10; height: 64px; padding: 0 24px;
  display: flex; align-items: center; gap: 10px;
  transition: background .2s;
}
.topbar.solid { background: rgba(18,18,18,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.topbar .ttl { font-weight: 700; font-size: 16px; opacity: 0; transition: opacity .2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar.solid .ttl { opacity: 1; }
.histbtn { width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.55); display: grid; place-items: center; flex: none; }
.histbtn:disabled { opacity: .45; cursor: default; }
.histbtn svg { width: 18px; height: 18px; }
.topbar .grow { flex: 1; min-width: 0; }
.topbar .ttl + .grow { flex: 0 0 auto; }
.topbar .ttl { flex: 1; min-width: 0; }

.searchbox { position: relative; flex: 1; max-width: 420px; }
.searchbox input {
  width: 100%; height: 44px; padding: 0 40px 0 44px; border-radius: 22px; border: 1px solid transparent;
  background: var(--s1); outline: none; font-size: 15px; transition: border-color .15s, background .15s;
}
.searchbox input:hover { background: var(--s2); }
.searchbox input:focus { border-color: #555; background: var(--s2); }
.searchbox input::-webkit-search-cancel-button { display: none; }
.searchbox input::placeholder { color: var(--dimmer); }
.searchbox > svg { position: absolute; left: 14px; top: 12px; width: 20px; height: 20px; color: var(--dim); pointer-events: none; }
.searchbox .clear { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; display: grid; place-items: center; color: var(--dim); }

/* --------------------------------------------------------------- buttons */
.btn {
  height: 38px; padding: 0 18px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 14px; white-space: nowrap; transition: transform .1s, background .15s, border-color .15s, color .15s;
}
.btn:active { transform: scale(.97); }
.btn.white { background: var(--text); color: #0e0e0e; }
.btn.white:hover { background: #fff; }
.btn.red { background: var(--red); color: #fff; }
.btn.red:hover { background: #a80808; }
.btn.line { border: 1px solid #555; color: var(--text); }
.btn.line:hover { border-color: var(--text); }
.btn.ghost { color: var(--dim); }
.btn.ghost:hover { color: var(--text); }
.btn.sm { height: 32px; padding: 0 14px; font-size: 13px; }
.btn svg { width: 18px; height: 18px; }

.ibtn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--dim); transition: color .15s, transform .1s, background .15s; flex: none; }
.ibtn:hover { color: var(--text); }
.ibtn:active { transform: scale(.92); }
.ibtn.on { color: var(--red-hi); }
.ibtn svg { width: 20px; height: 20px; }
.ibtn.lg svg { width: 26px; height: 26px; }
.ibtn.bg { background: rgba(255,255,255,.07); }
.ibtn.bg:hover { background: rgba(255,255,255,.12); }

.playbig {
  width: 56px; height: 56px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; flex: none;
  box-shadow: 0 8px 22px rgba(0,0,0,.45); transition: transform .12s, background .15s;
}
.playbig:hover { transform: scale(1.05); background: #a80808; }
.playbig:active { transform: scale(.96); }
.playbig svg { width: 24px; height: 24px; }

.avatar-btn { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--s2); flex: none; display: grid; place-items: center; font-weight: 700; font-size: 14px; border: 2px solid rgba(0,0,0,.4); }
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- pages */
.page { padding: 0 24px 40px; }
.page.flush { padding-top: 0; }
.sec { margin-top: 30px; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sec-h h2 { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.sec-h a, .sec-h button { font-size: 13px; font-weight: 700; color: var(--dim); }
.sec-h a:hover, .sec-h button:hover { color: var(--text); text-decoration: underline; }
.muted { color: var(--dim); }
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

.greet { margin: 8px 0 18px; font-family: var(--f-display); font-weight: 800; font-size: 30px; letter-spacing: -.03em; }

/* The signed-out welcome at the top of Home. */
.hero {
  position: relative; overflow: hidden; margin: 4px 0 8px; padding: 34px 32px; border-radius: var(--r-lg);
  background: radial-gradient(80% 120% at 85% 20%, rgba(196,36,28,.45), transparent 60%), linear-gradient(135deg, #2a0707, #120a0a 60%);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.hero .eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #e6cfcb; }
.hero h1 { margin: 10px 0 10px; font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 4vw, 46px); line-height: .95; letter-spacing: -.035em; }
.hero p { margin: 0 0 18px; color: #e6d9d6; max-width: 46ch; }
.hero .acts { display: flex; gap: 10px; flex-wrap: wrap; }
.hero .mark { width: 170px; height: 170px; flex: none; opacity: .9; }
@media (max-width: 720px) { .hero .mark { display: none; } .hero { padding: 26px 20px; } }

/* Cards */
.row-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 180px); gap: 14px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.row-scroll::-webkit-scrollbar { display: none; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.card { position: relative; padding: 10px; border-radius: var(--r-lg); transition: background .2s; scroll-snap-align: start; min-width: 0; cursor: pointer; }
.card:hover { background: var(--s1); }
.card .art { position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--s2); box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.card .art.round { border-radius: 50%; }
.card .art img { width: 100%; height: 100%; object-fit: cover; }
.card b { display: block; margin-top: 10px; font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card i { display: block; font-style: normal; color: var(--dim); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .fab {
  position: absolute; right: 8px; bottom: 8px; width: 44px; height: 44px; border-radius: 50%; background: var(--red); color: #fff;
  display: grid; place-items: center; box-shadow: 0 8px 18px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s, background .15s;
}
.card .fab svg { width: 20px; height: 20px; }
.card:hover .fab, .card .fab.show { opacity: 1; transform: none; }
.card .fab:hover { background: #a80808; transform: scale(1.06); }
@media (hover: none) { .card .fab { display: none; } }

/* Track list */
.tl { display: flex; flex-direction: column; }
.tl-head {
  display: grid; align-items: center; gap: 14px; padding: 0 12px 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
  color: var(--dim); font-size: 12px; font-family: var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
}
.tr {
  display: grid; align-items: center; gap: 14px; padding: 6px 12px; border-radius: 6px; min-height: 56px;
  grid-template-columns: 28px minmax(0, 1fr) minmax(0, .7fr) 90px 104px;
  cursor: default; user-select: none;
}
.tl-head { grid-template-columns: 28px minmax(0, 1fr) minmax(0, .7fr) 90px 104px; }
.tl.no-album .tr, .tl.no-album .tl-head { grid-template-columns: 28px minmax(0, 1fr) 90px 104px; }
.tl.chart .tr, .tl.chart .tl-head { grid-template-columns: 44px minmax(0, 1fr) minmax(0, .6fr) 90px 104px; }
.tr:hover { background: var(--s1); }
.tr.sel { background: var(--s2); }
.tr .n { text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; position: relative; height: 22px; display: grid; place-items: center end; }
.tr .n .pi { display: none; color: var(--text); }
.tr .n .pi svg { width: 16px; height: 16px; }
.tr:hover .n .num { display: none; }
.tr:hover .n .pi { display: grid; }
.tr .main-c { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tr .cov { width: 42px; height: 42px; border-radius: 5px; flex: none; background: var(--s2); object-fit: cover; }
.tr .tt { min-width: 0; display: flex; flex-direction: column; }
.tr .tt b { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr .tt .by { font-size: 13.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr .tt .by a:hover, .tr .alb a:hover { color: var(--text); text-decoration: underline; }
.tr.cur .tt b, .tr.cur .n .num { color: var(--red-hi); }
.tr .alb { color: var(--dim); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr .plays { color: var(--dim); font-size: 13.5px; text-align: right; font-variant-numeric: tabular-nums; }
.tr .end { display: flex; align-items: center; justify-content: flex-end; gap: 4px; color: var(--dim); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tr .end .ibtn { width: 30px; height: 30px; opacity: 0; }
.tr .end .ibtn svg { width: 18px; height: 18px; }
.tr:hover .end .ibtn, .tr .end .ibtn.on, .tr.sel .end .ibtn { opacity: 1; }
.tr .end .dur { min-width: 38px; text-align: right; }
.tl.compact .tr { min-height: 50px; }
.tl.compact .tr .cov { width: 38px; height: 38px; }
.e { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 3px; background: #9a9a9a; color: #121212; font-size: 9.5px; font-weight: 800; margin-right: 6px; flex: none; vertical-align: 1px; }
.move { font-family: var(--f-mono); font-size: 11px; display: block; text-align: right; }
.move.up { color: var(--ok); } .move.down { color: #e5484d; } .move.new { color: var(--red-hi); } .move.same { color: var(--dimmer); }
.tr .rank { font-weight: 800; font-family: var(--f-display); font-size: 17px; text-align: right; }
.tr .rank-c { display: flex; flex-direction: column; align-items: flex-end; }

@media (max-width: 760px) { .tl.slim { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .tr .alb, .tl-head .alb { display: none; } .tr, .tl-head { grid-template-columns: 28px minmax(0,1fr) 90px 104px !important; } .tl.chart .tr, .tl.chart .tl-head { grid-template-columns: 44px minmax(0,1fr) 90px 104px !important; } }

/* Equaliser bars on the playing row */
.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.eq i { width: 3px; background: var(--red-hi); border-radius: 1px; animation: eq .9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; }
.eq.paused i { animation-play-state: paused; }
@keyframes eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }

/* Compact two-column list for the Top 100 shelf on Home */
.tl.slim { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(340px, 31%), 1fr)); column-gap: 18px; }
.tl.slim .tr { grid-template-columns: 28px minmax(0, 1fr) 104px !important; }
.tl.slim .tr .plays { display: none; }

/* --------------------------------------------------------- page headers */
.phead {
  --hside: 300px;
  position: relative; display: flex; align-items: flex-end; gap: 24px; padding: 70px 24px 24px; margin-top: -64px;
  background: linear-gradient(180deg, var(--tint, #3a0b0b) 0%, rgba(18,18,18,0) 100%);
}
.phead .cover { width: 220px; height: 220px; border-radius: var(--r); object-fit: cover; box-shadow: 0 16px 44px rgba(0,0,0,.55); flex: none; background: var(--s2); }
.phead .cover.round { border-radius: 50%; }
.phead .meta { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.phead .kind { font-size: 13px; font-weight: 700; }
.phead h1 { margin: 0; font-family: var(--f-display); font-weight: 900; letter-spacing: -.04em; line-height: .95; font-size: clamp(32px, 5.2vw, 76px); word-break: break-word; }
.phead .by { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--dim); }
.phead .by b, .phead .by a { color: var(--text); font-weight: 700; }
.phead .by a:hover { text-decoration: underline; }
.phead .by .av { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.dot::before { content: "•"; margin: 0 2px; color: var(--dim); }

/* The artist header is a banner. */
.ahead { --hside: 250px; position: relative; margin-top: -64px; min-height: 340px; display: flex; align-items: flex-end; padding: 80px 24px 26px; background: #1a0b0b; overflow: hidden; }
.ahead .bn { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ahead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(18,18,18,.35) 45%, rgba(18,18,18,.92) 100%); }
.ahead .in { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 22px; min-width: 0; }
.ahead .pic { width: 168px; height: 168px; border-radius: 50%; object-fit: cover; box-shadow: 0 16px 44px rgba(0,0,0,.55); background: var(--s2); flex: none; }
.ahead h1 { margin: 6px 0 8px; font-family: var(--f-display); font-weight: 900; letter-spacing: -.04em; line-height: .95; font-size: clamp(36px, 6vw, 88px); word-break: break-word; }
.vpill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.vpill svg { width: 22px; height: 22px; }
.ahead .stats { color: #ddd; font-size: 14px; }

.actions { display: flex; align-items: center; gap: 16px; padding: 22px 24px; }
.actions .ibtn svg { width: 26px; height: 26px; }

.about { display: flex; gap: 20px; padding: 20px; border-radius: var(--r-lg); background: var(--s1); max-width: 760px; }
.about p { margin: 0; color: #ddd; white-space: pre-line; }
.about .loc { color: var(--dim); font-size: 13.5px; margin-top: 8px; }

/* Song page */
.song-wrap { --hside: 380px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; padding: 10px 24px 0; align-items: start; }
.song-wrap .cover { width: 100%; aspect-ratio: 1; border-radius: var(--r-lg); object-fit: cover; box-shadow: 0 18px 50px rgba(0,0,0,.55); background: var(--s2); }
.lyrics-static { white-space: pre-line; font-size: 18px; line-height: 1.7; color: #e8e8e8; font-weight: 600; }
@media (max-width: 860px) { .song-wrap { grid-template-columns: 1fr; --hside: 60px; } .song-wrap .cover { max-width: 320px; } }

/* Empty states */
.empty { padding: 60px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--dim); }
.empty svg { width: 54px; height: 54px; color: var(--dimmer); }
.empty b { color: var(--text); font-size: 20px; font-family: var(--f-display); font-weight: 800; letter-spacing: -.02em; }
.empty p { margin: 0; max-width: 40ch; }

/* Skeletons */
.sk { background: linear-gradient(90deg, var(--s1) 0%, var(--s2) 50%, var(--s1) 100%); background-size: 200% 100%; animation: sk 1.3s ease-in-out infinite; border-radius: 6px; }
@keyframes sk { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Search */
.search-top { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px; }
.topres { padding: 20px; border-radius: var(--r-lg); background: var(--s1); position: relative; transition: background .2s; cursor: pointer; display: flex; flex-direction: column; gap: 14px; }
.topres:hover { background: var(--s2); }
.topres img { width: 96px; height: 96px; border-radius: var(--r); object-fit: cover; box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.topres img.round { border-radius: 50%; }
.topres b { font-family: var(--f-display); font-weight: 800; font-size: 28px; letter-spacing: -.03em; line-height: 1.05; }
.topres .k { display: inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 5px; background: #000; color: var(--text); font-size: 12px; font-weight: 700; vertical-align: 5px; }
.topres .fab { position: absolute; right: 18px; bottom: 18px; width: 48px; height: 48px; border-radius: 50%; background: var(--red); display: grid; place-items: center; opacity: 0; transform: translateY(8px); transition: .2s; }
.topres:hover .fab { opacity: 1; transform: none; }
@media (max-width: 900px) { .search-top { grid-template-columns: 1fr; } }
.recent { display: flex; flex-wrap: wrap; gap: 8px; }
.recent button { padding: 7px 12px; border-radius: 8px; background: var(--s1); font-size: 14px; display: inline-flex; gap: 8px; align-items: center; }
.recent button:hover { background: var(--s2); }

/* ----------------------------------------------------------- player bar */
.pbar {
  display: grid; grid-template-columns: minmax(180px, 1fr) minmax(320px, 1.4fr) minmax(180px, 1fr); align-items: center; gap: 16px;
  padding: 0 10px;
}
.pb-now { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pb-now .cov { width: 58px; height: 58px; border-radius: 6px; object-fit: cover; background: var(--s2); flex: none; }
.pb-now .t { min-width: 0; display: flex; flex-direction: column; }
.pb-now .t b { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-now .t b a:hover, .pb-now .t i a:hover { text-decoration: underline; }
.pb-now .t i { font-style: normal; font-size: 13px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-mid { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pb-ctrls { display: flex; align-items: center; gap: 14px; }
.pb-play { width: 38px; height: 38px; border-radius: 50%; background: var(--text); color: #0e0e0e; display: grid; place-items: center; transition: transform .1s; }
.pb-play:hover { transform: scale(1.06); }
.pb-play:active { transform: scale(.95); }
.pb-play svg { width: 20px; height: 20px; }
.mode { position: relative; }
.mode.on::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--red-hi); }
.pb-prog { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.pb-prog span:first-child { text-align: right; }
.pb-right { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.vol { display: flex; align-items: center; gap: 4px; width: 150px; }

/* A draggable bar: progress and volume. */
.slider { position: relative; height: 16px; flex: 1; cursor: pointer; touch-action: none; display: flex; align-items: center; }
.slider .rail { position: relative; height: 4px; width: 100%; border-radius: 2px; background: #4a4a4a; overflow: hidden; }
.slider .fill { position: absolute; inset: 0 auto 0 0; background: var(--text); border-radius: 2px; }
.slider .buf { position: absolute; inset: 0 auto 0 0; background: #6a6a6a; }
.slider .knob { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.5); opacity: 0; transition: opacity .15s; }
.slider:hover .fill, .slider.drag .fill { background: var(--red-hi); }
.slider:hover .knob, .slider.drag .knob { opacity: 1; }

/* ---------------------------------------------------- now playing panel */
.np-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 6px 18px; }
.np-head b { font-weight: 700; }
.np-tabs { display: flex; gap: 6px; padding: 0 18px 10px; }
.np-body { flex: 1; overflow-y: auto; padding: 4px 18px 18px; scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
.np-art { width: 100%; aspect-ratio: 1; border-radius: var(--r-lg); object-fit: cover; background: var(--s2); box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.np-title { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.np-title b { font-family: var(--f-display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; line-height: 1.1; }
.np-title i { display: block; font-style: normal; color: var(--dim); margin-top: 3px; }
.np-title i a:hover { color: var(--text); text-decoration: underline; }
.np-card { margin-top: 16px; padding: 14px; border-radius: var(--r-lg); background: var(--s1); }
.np-card h3 { margin: 0 0 8px; font-size: 14px; }

.lyr { display: flex; flex-direction: column; gap: 10px; font-size: 21px; font-weight: 700; line-height: 1.3; padding: 6px 0 40vh; }
.lyr p { margin: 0; color: rgba(245,245,245,.38); transition: color .25s, transform .25s; cursor: pointer; transform-origin: left center; }
.lyr p:hover { color: rgba(245,245,245,.75); }
.lyr p.past { color: rgba(245,245,245,.6); }
.lyr p.now { color: var(--text); transform: scale(1.02); }
.lyr.static p { color: #e8e8e8; cursor: default; }
.lyr-note { font-size: 12px; color: var(--dimmer); margin-top: 12px; }

/* ------------------------------------------------------------- overlays */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 60; display: grid; place-items: center; padding: 16px; animation: fade .15s ease-out; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(420px, 100%); background: var(--s1); border-radius: 12px; padding: 28px; position: relative; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: rise .2s cubic-bezier(.2,.9,.3,1.2); }
/* Dialogs and menus rise in softly. (Named apart from the bouncy pop below,
   which used to overwrite it and made every menu spring in from 60%.) */
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.modal .x { position: absolute; right: 12px; top: 12px; }
.modal h2 { margin: 0 0 6px; font-family: var(--f-display); font-weight: 800; font-size: 24px; letter-spacing: -.02em; }
.modal .sub { margin: 0 0 20px; color: var(--dim); font-size: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field label { font-size: 13px; font-weight: 600; }
.field input { height: 44px; padding: 0 12px; border-radius: 8px; background: var(--panel); border: 1px solid var(--s3); outline: none; transition: border-color .15s; }
.field input:focus { border-color: #777; }
.err { color: #ff8a80; font-size: 13.5px; margin: 0 0 12px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--dimmer); font-size: 12px; margin: 16px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--s3); }
.gbtn { width: 100%; min-height: 44px; display: flex; justify-content: center; }
.si-mark { width: 36px; height: 36px; display: block; margin-bottom: 14px; }
.phead .by svg.av { width: 22px; height: 22px; }
.fine { margin: 18px 0 0; font-size: 12.5px; color: var(--dimmer); text-align: center; }
.fine a { color: var(--dim); text-decoration: underline; }

.menu {
  position: fixed; z-index: 70; min-width: 220px; max-width: 280px; max-height: 70vh; overflow-y: auto;
  background: #262626; border-radius: 8px; padding: 4px; box-shadow: 0 16px 40px rgba(0,0,0,.6); animation: rise .12s ease-out;
}
.menu button, .menu a { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 5px; font-size: 14px; text-align: left; color: #eee; }
.menu button:hover, .menu a:hover { background: #343434; }
/* Block in a profile's menu (0109): the one item that takes something away. */
.menu button.menu-danger, .menu button.menu-danger svg { color: #ff6b62; }
.menu svg { width: 18px; height: 18px; color: var(--dim); flex: none; }
.menu hr { border: 0; border-top: 1px solid #3a3a3a; margin: 4px 0; }
.menu .mh { padding: 8px 12px 4px; font-size: 12px; color: var(--dimmer); font-family: var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.menu input { width: calc(100% - 8px); margin: 4px; height: 36px; padding: 0 10px; border-radius: 6px; border: 1px solid #444; background: #1c1c1c; outline: none; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--bar) + 24px); transform: translateX(-50%); z-index: 80;
  background: var(--text); color: #111; padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: toast .2s ease-out; max-width: calc(100vw - 32px);
}
@keyframes toast { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ------------------------------------------------------------- mobile */
.mtabs, .mini, .mtop { display: none; }
@media (max-width: 760px) {
  :root { --gap: 0px; }
  body { font-size: 14.5px; }
  .shell, .shell.with-np {
    padding: 0; gap: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto;
    grid-template-areas: "main" "mini" "tabs";
  }
  .side, .pbar { display: none; }
  .main { border-radius: 0; }
  .shell.with-np .npanel { display: none; }
  .topbar { height: 56px; padding: 0 14px; }
  .topbar .histbtn { display: none; }
  .topbar .btn.ghost { display: none; }
  .topbar .ttl { flex: 1; }
  .searchbox { max-width: none; }
  .searchbox input { height: 40px; }
  .topbar .histbtn.back-m { display: grid; }
  .page { padding: 0 14px 28px; }
  .phead, .ahead { margin-top: -56px; padding-left: 16px; padding-right: 16px; }
  .phead { flex-direction: column; align-items: flex-start; padding-top: 72px; --hside: 40px; }
  .ahead { --hside: 40px; }
  .song-wrap { --hside: 40px; }
  .phead .cover { width: 200px; height: 200px; align-self: center; }
  .ahead { min-height: 300px; }
  .ahead .in { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ahead .pic { width: 110px; height: 110px; }
  .actions { padding: 16px; }
  .row-scroll { grid-auto-columns: 140px; gap: 10px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .card { padding: 6px; }
  .tl .tr, .tl.slim .tr, .tl.no-album .tr { grid-template-columns: minmax(0, 1fr) 40px !important; padding: 6px 4px; gap: 10px; }
  .tl.chart .tr, .tl.chart.slim .tr { grid-template-columns: 30px minmax(0, 1fr) 40px !important; }
  .tl-head { display: none !important; }
  .tr .n:not(.rank-c), .tr .alb, .tr .plays, .tr .end .dur, .tr .end .ibtn.like { display: none; }
  .tl.chart .tr .n { display: flex; }
  .tr .end .ibtn { opacity: 1; }
  .mini-grid { grid-template-columns: 1fr; }
  .song-wrap { padding: 8px 14px 0; }
  .greet { font-size: 24px; }

  /* The dock: the mini player and the tabs as one unit, inset from the
     edges with soft corners -- the site's look, a little rounder (never a
     full pill). It has its own rows, so it never covers the page; the page
     fades out just above it instead of stopping at a line. */
  .shell, .shell.with-np { background: var(--panel); }
  .main::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(180deg, transparent, var(--panel)); pointer-events: none; z-index: 5; }
  /* The tabs: flat and full width in the page colour, no box around them;
     the tab you are on gets a wide rounded pill behind its icon (the look
     of Instagram's bar, with our icons and labels). */
  .mtabs {
    grid-area: tabs; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    padding: 3px 6px calc(3px + env(safe-area-inset-bottom)); background: var(--panel);
  }
  .mtabs a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; line-height: 1.2; color: var(--dim); font-weight: 600; padding: 3px 0 2px; transition: color .2s; }
  .mtabs a svg { box-sizing: content-box; padding: 4px 18px; border-radius: 999px; transition: background-color .2s, transform .15s; }
  .mtabs a.on { color: var(--text); }
  .mtabs a.on svg { background: rgba(255,255,255,.11); }
  .mtabs a:active svg { transform: scale(.92); }
  .mtabs svg { width: 21px; height: 21px; }

  /* The same width as the dock below it and nearly its corners, so the two read as one. */
  .mini {
    grid-area: mini; display: flex; align-items: center; gap: 10px; margin: 0 10px 5px; padding: 6px 8px 6px 6px; border-radius: 14px;
    background: #3a1010; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 8px 22px rgba(0,0,0,.35);
  }
  .mini .cov { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; background: var(--s2); }
  .mini .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .mini .t b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mini .t i { font-style: normal; font-size: 12.5px; color: #d6c4c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mini .line { position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 1px; background: rgba(255,255,255,.2); }
  .mini .line i { position: absolute; inset: 0 auto 0 0; background: #fff; }
  .mini .ibtn { color: var(--text); }
  .toast { bottom: 150px; }
}

/* Full-screen player on phones: the app's Now Playing (NowPlayingScreen.kt).
   The cover, blurred, fills the ground; its colour washes in from the top;
   everything else sits on the app's own dark. */
.npfull {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; overflow: hidden;
  background: #121212; isolation: isolate;
  padding: calc(6px + env(safe-area-inset-top)) 22px calc(8px + env(safe-area-inset-bottom));
  animation: up .32s cubic-bezier(.2,.9,.3,1);
}
@keyframes up { from { transform: translateY(100%); } }
.np-backdrop { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; z-index: -2; filter: blur(60px) saturate(1.25); opacity: .42; }
.np-wash { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--amb) 70%, transparent) 0%, rgba(18,18,18,.55) 48%, #121212 82%); }

.np-top { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; min-height: 52px; margin: 0 -8px; }
.np-top .ibtn { color: var(--text); }
.np-top .ibtn svg { width: 24px; height: 24px; }
.np-src { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; line-height: 1.25; }
.np-src span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.np-src b { font-size: 13.5px; font-weight: 700; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The cover takes whatever height is left once everything under it is laid
   out (the lyrics card takes a good part on a song that has words), and
   stays square inside it: sized by the box, not the screen, it can never
   reach down over the title. 48vh is for browsers without container units. */
.np-cover { flex: 1; min-height: 0; display: grid; place-items: center; padding: 10px 14px 4px; container-type: size; }
.np-cover .art {
  width: min(100%, 48vh); width: min(100cqw, 100cqh, 48vh); aspect-ratio: 1; border-radius: 10px; object-fit: cover; background: var(--s2);
  box-shadow: 0 24px 60px rgba(0,0,0,.55); animation: sleeve .32s cubic-bezier(.2,.8,.3,1);
}
@keyframes sleeve { from { opacity: 0; transform: translateX(28px) scale(.98); } }

.np-meta { display: flex; align-items: center; gap: 6px; margin-top: 18px; }
.np-meta .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.np-meta b { font-family: var(--f-display); font-weight: 800; font-size: 23px; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; }
.np-meta i { font-style: normal; font-size: 15.5px; color: rgba(255,255,255,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; align-self: flex-start; max-width: 100%; }
.np-meta .ibtn { color: var(--text); width: 40px; height: 40px; }
.np-meta .ibtn svg { width: 24px; height: 24px; }
.np-meta .ibtn.on { color: var(--red-hi); }

/* The seek bar in the app's red, a touch thicker for a thumb. */
.npfull .pb-prog { margin: 14px 0 0; grid-template-columns: 1fr; gap: 2px; }
.npfull .slider { height: 22px; }
.npfull .slider .rail { height: 4px; background: rgba(255,255,255,.18); }
.npfull .slider .fill, .npfull .slider:hover .fill { background: var(--red-hi); }
.npfull .slider .buf { background: rgba(255,255,255,.12); }
.npfull .slider .knob { opacity: 1; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
.npfull .pb-prog .times { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }

.np-ctrls { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 4px; padding: 0 2px; }
.np-ctrls .ibtn { color: var(--text); width: 44px; height: 44px; }
.np-ctrls .ibtn svg { width: 24px; height: 24px; }
.np-ctrls .ibtn.skip svg { width: 30px; height: 30px; }
.np-ctrls .ibtn.mode.on { color: var(--red-hi); }
.np-play {
  width: 64px; height: 64px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(149,6,6,.45); transition: transform .12s, background .15s;
}
.np-play:active { transform: scale(.94); }
.np-play svg { width: 28px; height: 28px; }

/* Lyrics peeking under the controls, in the cover's colour. */
.np-lyr {
  display: block; width: 100%; text-align: left; margin-top: 10px; padding: 12px 16px 6px; border-radius: 10px;
  background: color-mix(in srgb, var(--amb) 55%, #1a1a1a); max-height: 112px; overflow: hidden;
}
.np-lyr .mono { display: block; font-size: 10.5px; color: rgba(255,255,255,.6); margin-bottom: 6px; letter-spacing: .14em; }
.np-lyr p { margin: 0 0 6px; font-size: 17px; font-weight: 700; line-height: 1.25; color: rgba(255,255,255,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-lyr p.now { color: #fff; }

/* Share / Lyrics / Queue: the app's bottom bar, icon over label. */
.np-actions { display: flex; justify-content: space-around; margin-top: 10px; padding-top: 6px; }
.np-actions button { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 72px; padding: 6px 4px; color: rgba(255,255,255,.72); font-size: 11.5px; font-weight: 600; border-radius: 8px; }
.np-actions button svg { width: 21px; height: 21px; }
.np-actions button.on { color: var(--red-hi); }

/* With the queue or the lyrics open, the cover shrinks to a header row. */
.np-strip { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; }
.np-strip .cov { width: 56px; height: 56px; border-radius: 6px; object-fit: cover; flex: none; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.np-strip .t { min-width: 0; display: flex; flex-direction: column; }
.np-strip b { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-strip i { font-style: normal; color: rgba(255,255,255,.7); font-size: 14px; }
.np-sheet { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -6px; padding: 0 6px; scrollbar-width: none; }
.np-sheet .sitem { padding: 6px 4px; }
.np-sheet .sitem .thumb { width: 46px; height: 46px; }
.np-sheet .sitem .t b { font-size: 15px; }
.np-sheet .sitem .ibtn { color: rgba(255,255,255,.6); }
.np-sheet .lyr { padding-bottom: 30vh; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* The verified seal turns over once every five seconds, like the app's: a
   still badge most of the time, a quick flip at the end of the cycle. */
.vseal.turn .disc, .vseal.turn .tick { transform-box: fill-box; transform-origin: center; }
.vseal.turn .disc { animation: seal-turn 5s linear infinite; }
.vseal.turn .tick { animation: seal-tick 5s linear infinite; }
@keyframes seal-turn { 0%, 87.6% { transform: scaleX(1); } 93.8% { transform: scaleX(.04); } 100% { transform: scaleX(1); } }
@keyframes seal-tick { 0%, 87.6% { opacity: 1; } 93.8% { opacity: 0; } 100% { opacity: 1; } }

/* ------------------------------------------------- welcome (signed out) */
.welcome {
  display: flex; align-items: center; gap: 16px; margin: 4px 0 18px; padding: 14px 18px; border-radius: var(--r-lg);
  background: linear-gradient(90deg, rgba(149,6,6,.28), rgba(149,6,6,.06)); border: 1px solid rgba(196,36,28,.25);
}
.welcome .wmark { width: 30px; height: 30px; flex: none; }
.welcome p { margin: 0; flex: 1; color: #e2d6d4; font-size: 14.5px; }
.welcome p b { color: var(--text); }
.welcome .acts { display: flex; gap: 8px; flex: none; }
@media (max-width: 760px) {
  .welcome { flex-wrap: wrap; gap: 14px; } .welcome .wmark { display: none; }
  /* Text across the full width, the two buttons under it -- side by side they squeezed the text into a thin column. */
  .welcome p { flex-basis: 100%; }
  .welcome .acts { width: 100%; } .welcome .acts .btn { flex: 1; height: 40px; justify-content: center; }
}

/* ------------------------------------------------- spotlight (featured)
   One artist at a time on Home (views.js Spotlight), on their own picture
   blurred (or, without one, their banner), so each brings their own colours,
   as their About card does; a square picture, the name, their
   line, one quiet fact; then music to press: Play, their pick as a row,
   and Popular where there is room. */
.spot {
  --sside: 680px;
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); margin: 4px 0 6px;
  background: #141010; cursor: pointer; display: flex;
}
.spot.sk { cursor: default; min-height: 330px; }
.spot-slide { position: relative; z-index: 1; flex: 1; min-width: 0; min-height: 330px; display: flex; align-items: flex-end; animation: spotIn .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes spotIn { from { opacity: 0; } }
.spot-slide .spot-in { animation: spotRise .7s .08s cubic-bezier(.2,.8,.2,1) both; }
@keyframes spotRise { from { opacity: 0; transform: translateY(12px); } }
.spot-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
@keyframes spotDrift { from { transform: scale(1.02); } to { transform: scale(1.12) translateX(-1.5%); } }
.spot-bg.blur { inset: -12%; width: 124%; height: 124%; filter: blur(46px) saturate(1.55) brightness(.68); }
/* Shading under the words: heavier over a banner (a real picture with its
   own detail), lighter over the blur, which is only colour. */
.spot-slide::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,6,6,.82) 0%, rgba(10,6,6,.48) 48%, rgba(10,6,6,.12) 80%), linear-gradient(0deg, rgba(10,6,6,.72) 0%, rgba(10,6,6,0) 60%); }
.spot-slide:has(> .spot-bg.blur)::after { background: linear-gradient(90deg, rgba(8,6,6,.42), rgba(8,6,6,.14) 60%, rgba(8,6,6,.3)), linear-gradient(0deg, rgba(8,6,6,.5), rgba(8,6,6,0) 55%); }
.spot-in { position: relative; width: 100%; padding: 28px; display: flex; align-items: flex-end; gap: 28px; }
.spot-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.spot-k { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #f0dcd8; }
.spot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--red-hi); box-shadow: 0 0 0 0 rgba(196, 36, 28, .6); animation: live 1.8s ease-out infinite; }
@keyframes live { 70% { box-shadow: 0 0 0 9px rgba(196, 36, 28, 0); } 100% { box-shadow: 0 0 0 0 rgba(196, 36, 28, 0); } }
.spot-id { display: flex; align-items: center; gap: 20px; min-width: 0; }
.spot-pic { width: 132px; height: 132px; border-radius: 10px; object-fit: cover; flex: none; box-shadow: 0 16px 40px rgba(0,0,0,.55); }
.spot-who { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.spot-name { margin: 0; display: flex; align-items: center; gap: 12px; font-family: var(--f-display); font-weight: 900; letter-spacing: -.04em; line-height: .95; color: #fff; }
.spot-name span { min-width: 0; overflow-wrap: anywhere; }
.spot-line { margin: 0; color: rgba(255,255,255,.86); max-width: 56ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spot-meta { font-size: 13.5px; color: rgba(255,255,255,.66); }
.spot-acts { display: flex; align-items: center; gap: 12px; }
.spot-acts .btn.line { border-color: rgba(255,255,255,.55); }
.spot-acts .btn.line.on { border-color: var(--red-hi); color: #ff7b72; }
.spot-acts .btn.ghost { color: #ddd; }
.spot-acts .btn.ghost:hover { color: #fff; }
/* Their pick (or most played) as one playable row, where Popular has no room. */
.spot-row { display: flex; align-items: center; gap: 12px; width: min(100%, 420px); padding: 8px; border-radius: 8px; text-align: left; color: #fff;
  background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .15s, transform .1s; }
.spot-row:hover { background: rgba(255,255,255,.16); }
.spot-row:active { transform: scale(.99); }
.spot-row img { width: 42px; height: 42px; border-radius: 5px; object-fit: cover; flex: none; background: rgba(255,255,255,.08); }
.spot-row .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.spot-row b { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot-row i { font-style: normal; font-size: 12px; color: rgba(255,255,255,.66); display: inline-flex; align-items: center; gap: 4px; }
.spot-row .go { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; flex: none; }
.spot-row .go svg { width: 16px; height: 16px; }
.spot-list {
  width: 380px; flex: none; padding: 14px 10px 8px; border-radius: var(--r-lg); cursor: default;
  background: rgba(14,10,10,.6); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.08);
}
.spot-list .spot-k { display: flex; padding: 0 8px 6px; }
.spot-list .tr { grid-template-columns: 22px minmax(0, 1fr) 70px !important; gap: 10px; padding: 5px 8px; min-height: 48px; }
.spot-list .tr .plays { display: none; }
.spot-list .tr:hover { background: rgba(255,255,255,.07); }
@media (min-width: 1101px) { .spot-in:has(> .spot-list) .spot-row { display: none; } }
@media (max-width: 1100px) { .spot-list { display: none; } }
/* Dots that fill as the time of a slide runs, and hold while it is held. */
.spot-dots { position: absolute; z-index: 3; top: 22px; right: 24px; display: flex; gap: 6px; }
.sdot { width: 28px; height: 18px; display: grid; align-items: center; cursor: pointer; }
.sdot i { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.25); overflow: hidden; position: relative; }
.sdot i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.sdot.done i::after { transform: none; }
.sdot.on i::after { animation: sfill var(--ms) linear forwards; }
.spot.held .sdot.on i::after { animation-play-state: paused; }
/* On a touch screen it never turns by itself: the current one is simply lit. */
@media (hover: none) { .sdot.on i::after { animation: none; transform: none; } }
.sdot:hover i { background: rgba(255,255,255,.45); }
@keyframes sfill { to { transform: none; } }
@media (max-width: 760px) {
  .spot { --sside: 175px; }
  .spot-slide { min-height: 0; }
  .spot-in { padding: 16px; flex-direction: column; align-items: stretch; gap: 14px; }
  .spot-main { gap: 12px; }
  .spot-id { gap: 14px; }
  .spot-pic { width: 84px; height: 84px; border-radius: 8px; }
  .spot-name { overflow-wrap: normal; }
  /* A long name gets the full width, under the picture, instead of shrinking beside it. */
  .spot-id.long { --sside: 64px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .spot-id.long .spot-pic { width: 72px; height: 72px; }
  .spot-meta { display: none; }
  .spot-row { width: 100%; }
  .spot-dots { top: 12px; right: 12px; }
  .spot-acts .btn.ghost { display: none; }
}
@media (prefers-reduced-motion: reduce) { .spot-bg:not(.blur), .spot-slide, .spot-slide .spot-in, .spot-live { animation: none; } .sdot.on i::after { animation: none; transform: none; } }

/* The seal beside an artist's name in their header. */
.hseal { display: inline-flex; vertical-align: .08em; margin-left: .18em; }
.hseal svg { width: .45em; height: .45em; min-width: 28px; min-height: 28px; }

/* ------------------------------------------------------- genre tiles */
.gtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.gtile {
  position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--r-lg); padding: 14px;
  display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; transition: transform .15s;
}
.gtile:hover { transform: translateY(-2px); }
.gtile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .4s ease; }
.gtile:hover img { transform: scale(1.05); }
.gtile.has-art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 60%); }
.gtile.top { justify-content: flex-start; }
.gtile.top::before { background: linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 60%); }
.gtile b { font-family: var(--f-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; line-height: 1.05; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.gtile i { font-style: normal; font-size: 12.5px; color: #f0dede; }
.gtile.chart { background: linear-gradient(135deg, #5e0404, #c4241c); }
/* New releases, beside Top 100: the same family, darker, so the two read as a pair and not as twins. */
.gtile.fresh { background: linear-gradient(135deg, #1f1f1f, #5e0404); }
.gtile.chart .big, .gtile.fresh .big { position: absolute; right: 10px; top: 2px; font-family: var(--f-display); font-weight: 900; font-size: 64px; letter-spacing: -.05em; color: rgba(255,255,255,.18); }
@media (max-width: 760px) { .gtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .gtile b { font-size: 16px; }
  /* Top 100 as a full-width banner on a phone: with New releases beside it
     the two columns come out even, no tile left on its own at the end. */
  .gtile.chart { grid-column: span 2; aspect-ratio: 32 / 10; } }

/* -------------------------------------------------------- genre header */
.ghead { position: relative; margin-top: -64px; min-height: 300px; display: flex; align-items: flex-end; padding: 80px 24px 24px; overflow: hidden; --hside: 60px; }
.ghead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ghead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(18,18,18,.4) 50%, rgba(18,18,18,.95) 100%); }
.ghead .in { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; }
.ghead h1 { margin: 0; font-family: var(--f-display); font-weight: 900; letter-spacing: -.04em; line-height: .95; }
.ghead .kind { font-size: 13px; font-weight: 700; }
.ghead .by { color: #ddd; font-size: 14px; }
@media (max-width: 760px) { .ghead { margin-top: -56px; min-height: 240px; padding: 70px 16px 18px; } }

/* ================================================================ motion
   Short and quiet (150-400 ms), transform and opacity only, and all of it
   off for anyone who asked their system for less motion (the rule at the
   end of the file already flattens every animation and transition). */

/* Round artist cards: the circle no longer clips the play button. The
   picture is rounded itself and the box around it is left open. */
.card .art.round { overflow: visible; background: none; box-shadow: none; }
.card .art.round img, .card .art.round .ph { border-radius: 50%; box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.card .art.round img { width: 100%; height: 100%; }

/* Images fade in as they arrive instead of popping. */
img.fi { opacity: 0; transition: opacity .35s ease; }
img.fi.in { opacity: 1; }

/* Each page rises in slightly when you arrive on it. */
.view { animation: view-in .28s cubic-bezier(.2,.8,.2,1); }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }

/* Cards and rows arrive one after another, never longer than ~0.3 s. */
.row-scroll > .card, .grid > .card, .gtiles > *, .tl > .tr { animation: item-in .34s cubic-bezier(.2,.8,.2,1) both; }
.row-scroll > :nth-child(2), .grid > :nth-child(2), .gtiles > :nth-child(2), .tl > .tr:nth-child(3) { animation-delay: .03s; }
.row-scroll > :nth-child(3), .grid > :nth-child(3), .gtiles > :nth-child(3), .tl > .tr:nth-child(4) { animation-delay: .06s; }
.row-scroll > :nth-child(4), .grid > :nth-child(4), .gtiles > :nth-child(4), .tl > .tr:nth-child(5) { animation-delay: .09s; }
.row-scroll > :nth-child(5), .grid > :nth-child(5), .gtiles > :nth-child(5), .tl > .tr:nth-child(6) { animation-delay: .12s; }
.row-scroll > :nth-child(6), .grid > :nth-child(6), .gtiles > :nth-child(6), .tl > .tr:nth-child(7) { animation-delay: .15s; }
.row-scroll > :nth-child(n+7), .grid > :nth-child(n+7), .gtiles > :nth-child(n+7), .tl > .tr:nth-child(n+8) { animation-delay: .18s; }
@keyframes item-in { from { opacity: 0; transform: translateY(10px); } }

/* Covers lift a touch under the pointer. */
@media (hover: hover) {
  .card .art { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
  .card:hover .art { transform: translateY(-3px); }
}

/* Play and pause swap with a small pop (the icon remounts on change). */
.pb-play svg, .np-play svg, .playbig svg, .mini .ibtn svg, .card .fab svg { animation: swap .22s cubic-bezier(.3,1.5,.5,1); }
@keyframes swap { from { opacity: 0; transform: scale(.55); } }

/* Turning something on -- a like, shuffle, repeat, a save -- pops it. */
.ibtn.on svg { animation: pop .38s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* A like also sends out a ring. */
.ibtn.like, .pb-now .ibtn, .np-meta .ibtn, .actions .ibtn { position: relative; }
.ibtn.like.on::after, .pb-now .ibtn.on::after, .np-meta .ibtn.on::after, .actions .ibtn.on::after {
  content: ""; position: absolute; inset: 15%; border-radius: 50%; border: 2px solid var(--red-hi);
  animation: ring .45s ease-out forwards; pointer-events: none;
}
@keyframes ring { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }

/* The seek knob grows while you hold it. */
.slider .knob { transition: opacity .15s, transform .15s; }
.slider.drag .knob { transform: scale(1.3); }

/* Recent searches, cleared: the chips drift up and fade one after another,
   and the section closes underneath them (grid rows 1fr -> 0fr), so the
   page below slides up instead of jumping. */
.recent-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s cubic-bezier(.4, 0, .2, 1) .06s, opacity .25s ease; }
/* The inner box hides overflow, so the section's own top margin sits inside
   it and folds away too, instead of leaving a 30 px step at the end. */
.recent-fold > .rf-in { min-height: 0; overflow: hidden; }
.recent-fold.out { grid-template-rows: 0fr; opacity: 0; }
.recent-fold .recent button { transition: opacity .18s ease, transform .18s ease; transition-delay: calc(var(--i, 0) * 25ms); }
.recent-fold.out .recent button { opacity: 0; transform: translateY(-6px) scale(.96); }
@media (prefers-reduced-motion: reduce) { .recent-fold, .recent-fold .recent button { transition: none; } }

/* Bigger touch areas on phones, without bigger buttons: an invisible margin
   round the smallest controls -- the "..." on a track row, the slide dots,
   the early member badge -- so a thumb lands on them (about 44 px, what
   Apple and Google ask for). */
@media (pointer: coarse) {
  .tr .end .ibtn, .sdot { position: relative; }
  .tr .end .ibtn::before { content: ""; position: absolute; inset: -7px; }
  .sdot::before { content: ""; position: absolute; inset: -13px -2px; }
  .early-b::before { content: ""; position: absolute; inset: -13px -6px; }
}