:root {
  --bg-deep: #010420;
  --bg-mid: #030c3a;
  --bg-glow: #07185e;
  --ink: #eaf3ff;
  --muted: #7d98c6;
  --cyan: #6fd4ff;
  --blue: #3f7dff;
  --hairline: rgba(120, 190, 255, 0.26);
  --glass: rgba(4, 14, 62, 0.55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  /* No double-tap zoom (taps also respond without waiting for a second one); pinch-zoom still works */
  touch-action: manipulation;
}
/* …on everything inside too (scrolling containers otherwise start afresh) */
body * { touch-action: manipulation; }

/* Text can't be selected (or long-pressed for the copy menu on phones), except in boxes you type in */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

body {
  background: radial-gradient(ellipse 85% 75% at 64% 50%, var(--bg-glow) 0%, var(--bg-mid) 42%, var(--bg-deep) 100%) fixed, var(--bg-deep);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

#flow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Back: frosted circle, same material as the player */
.back {
  position: fixed;
  top: 14px;
  left: clamp(16px, 3vw, 48px);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(250, 250, 252, 0.9);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.08);
  color: #3a3a3c;
  cursor: pointer;
  z-index: 4;
  transition: opacity 0.25s, transform 0.25s;
}
.back svg { width: 22px; height: 22px; }
.back:hover { transform: scale(1.05); }
.back:active { transform: scale(0.94); }
.back:focus-visible { outline: 2px solid rgba(0, 122, 255, 0.6); outline-offset: 3px; }
.back[hidden] {
  display: grid;
  opacity: 0;
  transform: scale(0.85);
  visibility: hidden;
  transition: opacity 0.25s, transform 0.25s, visibility 0s 0.25s;
}

/* Logo: same size and spot as the back button; shown on the home screen, where Back is hidden */
.logo {
  position: fixed;
  top: 14px;
  left: clamp(16px, 3vw, 48px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 0.5px solid rgba(255, 255, 255, 0.55);
  background: rgba(250, 250, 252, 0.9);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.08);
  color: #3a3a3c;  /* same as the back button's chevron */
  z-index: 3;
  transition: opacity 0.25s, transform 0.25s;
}
.logo svg { width: 22px; height: 22px; }
.back:not([hidden]) ~ .logo { opacity: 0; transform: scale(0.85); }

/* Get Premium: same frosted material and rounding as the back button */
.premium {
  position: fixed;
  top: 14px;
  right: clamp(16px, 3vw, 48px);
  width: 130px;
  height: 44px;
  padding: 0 22px;
  border: 0.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 22px;
  background: rgba(250, 250, 252, 0.9);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.08);
  color: #1d1d1f;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  z-index: 4;
  transition: transform 0.2s, background-color 0.2s;
}
.premium:hover { background: #fff; transform: scale(1.03); }
.premium:active { transform: scale(0.97); }
.premium:focus-visible { outline: 2px solid rgba(0, 122, 255, 0.6); outline-offset: 3px; }

/* The "APOLYO" wordmark: one style for the header and the Premium modal */
.wordmark {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.85;
  text-shadow: 0 0 18px rgba(80, 160, 255, 0.7);
}
/* The logo and app name are decoration: they can't be selected or highlighted */
.brand,
.logo {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.brand {
  position: fixed;
  top: 28px;
  left: calc(clamp(16px, 3vw, 48px) + 60px);
}

.hint {
  position: fixed;
  left: clamp(16px, 3vw, 48px);
  bottom: 20px;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  opacity: 0.7;
}
.has-player .hint { display: none; }
.hint kbd {
  font: inherit;
  padding: 1px 5px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
}

/* ---------- search ---------- */
/* Search always sits at the top, in the header row: same top as the back/logo and Account buttons, in the
   space between the wordmark and Account (centred there, up to 560px wide), whichever way the fan-out flows. */
.search {
  position: fixed;
  top: 14px;
  left: calc(clamp(16px, 3vw, 48px) + 60px + 66px + 24px);   /* logo/back + gap + wordmark + gap */
  right: calc(clamp(16px, 3vw, 48px) + 130px + 24px);         /* Account + gap */
  max-width: 560px;
  margin-inline: auto;
  z-index: 2;
}
.search input {
  width: 100%;
  height: 48px;
  padding: 0 46px 0 42px;  /* room for the search icon (left) and layout switch (right) */
  border-radius: 24px;
  border: 0;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  outline: none;
  box-shadow: inset 0 0 22px rgba(60, 120, 255, 0.08);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.search input::placeholder { color: var(--muted); }
.search input:focus {
  border-color: rgba(111, 212, 255, 0.7);
  box-shadow: 0 0 28px rgba(63, 125, 255, 0.35), inset 0 0 22px rgba(60, 120, 255, 0.12);
}
.search > svg {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  z-index: 1;
}
.empty {
  position: absolute;
  top: 60px;
  left: 18px;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

/* ---------- node labels ---------- */
#labels {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.node {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px 4px 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  will-change: transform, opacity;
  transition: background-color 0.2s;
}
.node:hover, .node:focus-visible {
  background: rgba(80, 150, 255, 0.08);
  outline: none;
}
.node:focus-visible { box-shadow: 0 0 0 1px rgba(111, 212, 255, 0.55); }
.node.is-gone { pointer-events: none; }
/* Live artist / album whose data is still being fetched */
.node.is-loading .node__meta::after {
  content: " · loading";
  animation: loading-pulse 1s ease-in-out infinite alternate;
}
@keyframes loading-pulse { from { opacity: 0.35; } to { opacity: 1; } }

.node__name {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #eef5ff;
  text-shadow: 0 0 14px rgba(80, 160, 255, 0.55);
}
.node__meta {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.node--album .node__name { font-size: 14px; }
.node--album .node__name { font-weight: 300; }
/* Artist names use the genre labels' weight */
.node--artist .node__name,
.node--similar .node__name { font-weight: 600; }

.node--track {
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  padding: 2px 8px 2px 6px;
}
.node--track .node__num {
  width: 16px;
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.node--track .node__name { font-size: 13px; font-weight: 600; }
.node--track .node__meta {
  letter-spacing: 0.04em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

/* Category hubs: Albums, Bio, Tours, Movies, News */
.node--category .node__name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.node--category.is-empty { cursor: default; opacity: 0.55; }
/* A heading with an icon before it (♥ Playlists) */
.node__name--icon { display: inline-flex; align-items: center; gap: 7px; }
.node__name--icon svg { width: 14px; height: 14px; flex: none; color: #fff; }
/* The Playlists heart beats: a double pulse ("lub-dub") every 1.2s */
.node__name--icon svg.heart { transform-origin: 50% 55%; animation: heartbeat 1.2s ease-in-out infinite; }
@keyframes heartbeat {
  0%, 40%, 100% { transform: scale(1); }
  12% { transform: scale(1.22); }
  24% { transform: scale(1); }
  32% { transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) { .node__name--icon svg.heart { animation: none; } }
/* Genres (and Playlists, Recently played) in Title Case rather than capitals */
.node--category .node__name--title { text-transform: none; letter-spacing: 0.02em; font-size: 14px; }
/* Playlist names read as typed, not in the categories' capitals */
.node--category .node__name--as-typed { text-transform: none; letter-spacing: 0.01em; font-size: 14px; }
.node--pl-list .node__name { text-transform: none; letter-spacing: 0.01em; font-size: 14px; }
.node--category.is-empty:hover { background: none; }
.node--category.is-empty .node__meta { font-style: italic; }
.node--category .node__meta {
  letter-spacing: 0.04em;
  text-transform: none;
}

/* Artists: circular photo beside the name */
.node--has-avatar {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding-left: 4px;
}
.node__avatar {
  flex: none;
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.45),
    0 0 22px rgba(60, 130, 255, 0.22);
  transition: box-shadow 0.25s;
}
/* A genre's Top 20: "20" in a circle the size of the artists' photos, named like them */
.node__avatar--top {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  color: #fff;
  background: linear-gradient(135deg, #3c82ff, #6fd4ff);
}
.node--category.node--has-avatar .node__name { font-size: 15px; letter-spacing: 0.01em; text-transform: none; }
.node--category.node--has-avatar .node__meta { letter-spacing: 0.14em; text-transform: uppercase; }
.node__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: avatar-in 0.4s ease-out;
}
@keyframes avatar-in { from { opacity: 0; } }

/* Cover art thumbnails on albums and singles */
.node--has-art {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding-left: 4px;
}
.node__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.node__art {
  flex: none;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 7px;
  object-fit: cover;
  background: #0b1540;
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.16),
    0 6px 16px rgba(0, 0, 0, 0.45),
    0 0 22px rgba(60, 130, 255, 0.22);
}
.node--single .node__art,
.node--song .node__art { width: 36px; height: 36px; border-radius: 5px; }
.node--song .node__name { font-size: 13.5px; font-weight: 400; }
.node--song .node__meta { letter-spacing: 0.04em; text-transform: none; }
.node--song.is-playing .node__meta { color: var(--cyan); }

/* Albums: large cover card, title beneath. --art is set by layout (150px max). */
.node--album.node--has-art {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: max(calc(var(--art, 150px) + 8px), 158px);  /* titles stay readable when covers shrink */
  white-space: normal;
}
.node--album .node__art {
  width: var(--art, 150px);
  height: var(--art, 150px);
  border-radius: 10px;
}
.node--album .node__text { max-width: 100%; }
.node--album .node__meta { white-space: nowrap; }
.node--album .node__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}
.node.is-selected .node__art {
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.45),
    0 0 26px rgba(80, 180, 255, 0.55);
}

/* Tours: clickable rows that fan out to a details card and two actions */
.node--tour .node__name { font-size: 13.5px; font-weight: 400; }
.node--tour .node__meta { letter-spacing: 0.06em; text-transform: none; }

.node--tourinfo {
  width: 260px;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(6, 18, 70, 0.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  white-space: normal;
  cursor: default;
}
.node--tourinfo:hover { background: rgba(6, 18, 70, 0.6); }
.node--tourinfo .node__name { font-size: 15px; font-weight: 400; margin-bottom: 2px; }
.node__row { display: grid; grid-template-columns: 62px 1fr; gap: 8px; font-size: 12.5px; }
.node__label {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 2px;
}
.node__value { color: #d8e6fb; }
.node__value.is-live { color: #7dffb2; }
.node__value.is-past { color: var(--muted); }

.node--action {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 150px;
  padding: 9px 18px 9px 14px;
  border-radius: 999px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  text-decoration: none;
  transition: transform 0.15s, background-color 0.2s, box-shadow 0.2s;
}
.node--action .node__name { font-size: 13.5px; font-weight: 600; text-shadow: none; letter-spacing: 0; }
.node__icon { display: grid; place-items: center; width: 18px; height: 18px; }
.node__icon svg { width: 18px; height: 18px; }
.node--action:active { transform: scale(0.96); }
/* Both actions use the same hollow outline style */
.node--tickets,
.node--remind,
.node--share,
.node--station,
.node--discover,
.node--jlove,
.node--jpass,
.node--jdeeper,
.node--jsteer,
.node--jsteerbox,
.node--jshare,
.node--jloading,
.node--playlist,
.node--similar,
.node--plpick,
.node--plnew,
.node--plprompt,
.node--plrename,
.node--pldelete,
.node--plshare,
.node--plsave,
.node--plup,
.node--pldown {
  background: rgba(8, 24, 80, 0.55);
  color: var(--ink);
}
.node--tickets:hover,
.node--remind:hover,
.node--share:hover,
.node--station:hover,
.node--discover:hover,
.node--jlove:hover,
.node--jpass:hover,
.node--jdeeper:hover,
.node--jsteer:hover,
.node--jsteerbox:hover,
.node--jshare:hover,
.node--playlist:hover,
.node--similar:hover,
.node--plpick:hover,
.node--plnew:hover,
.node--plprompt:hover,
.node--plrename:hover,
.node--pldelete:hover,
.node--plshare:hover,
.node--plsave:hover,
.node--plup:hover,
.node--pldown:hover { background: rgba(40, 90, 200, 0.35); }
/* Full song (for anyone without Premium): Apple Music's colours */
.node--fullsong { background: linear-gradient(180deg, #fa5b74, #fa2d48); color: #fff; }
.node--fullsong:hover { background: linear-gradient(180deg, #fb6f85, #fb4159); }
.node--remind.is-on,
.node--playlist.is-on,
.node--plpick.is-on {
  border-color: rgba(111, 212, 255, 0.9);
  background: rgba(63, 125, 255, 0.35);
  box-shadow: none;  /* flat: no glow */
}
.node--remind.is-on .node__icon svg { fill: currentColor; }
.node.is-selected.node--tickets .node__name,
.node.is-selected.node--remind .node__name { text-shadow: none; }
.node--action .node__name { white-space: nowrap; }
/* Name box inside a node (New playlist, Rename) */
.node__input {
  width: 150px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
}
.node__input::placeholder { color: rgba(220, 235, 255, 0.6); font-weight: 500; }
.node--plnew:focus-within,
.node--plprompt:focus-within,
.node--jsteerbox:focus-within,
.node--plrename:focus-within { box-shadow: 0 0 0 1.5px rgba(111, 212, 255, 0.8); }
/* The prompt box is wider (prompts are longer than names), with an example on a second line */
.node--plprompt { border-radius: 18px; padding-top: 8px; padding-bottom: 8px; }
.node--plprompt .node__input { width: 240px; }
.node__example {
  text-transform: none;
  letter-spacing: 0;
  font-size: 11.5px;
  white-space: nowrap;
  cursor: pointer;
}
.node__example:hover { color: var(--ink); }
/* Share and Delete inside the playlist's name box, on its right */
.node--plrename { padding-right: 8px; }
.node__mini {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: -2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  flex: none;
  transition: background-color 0.2s;
}
.node__mini svg { width: 17px; height: 17px; }
.node__mini:hover { background: rgba(80, 140, 255, 0.35); }
.node__mini:focus-visible { outline: 2px solid rgba(111, 212, 255, 0.8); outline-offset: 1px; }

/* Collabs: compact rows so several columns fit side by side */
.node--collab { max-width: 290px; }
.node--collab .node__text { min-width: 0; }
.node--collab .node__name,
.node--collab .node__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Singles: playable, title-first with year · peak · duration */
.node--single .node__name { font-size: 13.5px; font-weight: 400; }
.node--single .node__meta {
  letter-spacing: 0.04em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.node--single.is-playing .node__meta { color: var(--cyan); }

/* Leaf items: bio facts, tours, movies, news */
.node--item { cursor: default; }
.node--item .node__name { font-size: 13.5px; font-weight: 400; }
.node--item .node__meta { letter-spacing: 0.06em; text-transform: none; }
.node--fact .node__meta {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.node--wrap { width: 300px; white-space: normal; }
.node--wrap .node__name {
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.node--fact.node--wrap .node__name {
  -webkit-line-clamp: 8;
  line-clamp: 8;
  color: #d8e6fb;
  text-shadow: none;
}
.node--link {
  cursor: pointer;
  text-decoration: none;
}
.node--link .node__meta::after {
  content: " ↗";
  opacity: 0;
  transition: opacity 0.2s;
}
.node--link:hover .node__meta::after,
.node--link:focus-visible .node__meta::after { opacity: 1; }
.node--link:hover .node__name { color: #fff; }
/* Bio's grouped social links: one row of names, each its own link. */
.node__links a { color: inherit; text-decoration: none; border-radius: 3px; }
.node__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.node__links a:focus-visible { outline: 2px solid rgba(0, 122, 255, 0.6); outline-offset: 2px; }

.node.is-selected .node__name {
  color: #fff;
  text-shadow: 0 0 16px rgba(111, 212, 255, 0.95);
}
.node.is-playing .node__num { color: var(--cyan); }

/* ---------- player: frosted-glass pill ---------- */
.player {
  --p-ink: #1d1d1f;
  --p-dim: #8a8a8e;
  --p-red: #fa2d48;
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(700px, calc(100vw - 32px));
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 18px 0 20px;
  border-radius: 999px;
  border: 0.5px solid rgba(255, 255, 255, 0.55);
  background: rgba(250, 250, 252, 0.9);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.08),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.9);
  color: var(--p-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", sans-serif;
  z-index: 3;
  animation: player-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.player[hidden] { display: none; }
@keyframes player-in {
  from { opacity: 0; transform: translate(-50%, 14px); }
}

.player__btn {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--p-ink);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s, color 0.15s;
}
.player__btn:hover { opacity: 0.7; }
.player__btn:active { transform: scale(0.92); }
.player__btn:focus-visible { outline: 2px solid rgba(0, 122, 255, 0.6); outline-offset: 3px; }
.player__btn svg { display: block; }

.player__controls { display: flex; align-items: center; gap: 12px; flex: none; }
.player__btn--toggle { width: 26px; height: 26px; color: var(--p-dim); }
.player__btn--toggle svg { width: 18px; height: 18px; }
.player__btn--toggle[aria-pressed="true"] { color: var(--p-red); }
.player__btn--skip { width: 30px; height: 28px; }
.player__btn--skip svg { width: 28px; height: 22px; }
.player__btn--play { width: 34px; height: 34px; }
.player__btn--play svg { width: 26px; height: 30px; }
.player .icon-play { display: none; }
.player.is-paused .icon-play { display: block; }
.player.is-paused .icon-pause { display: none; }

.player__now {
  flex: 1 1 auto;
  max-width: 740px;
  min-width: 0;
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: 56px;
  column-gap: 14px;
  align-items: center;
}
.player__art {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: #2b2b2e;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
/* Art and title go to where the song is playing from */
.player__art:hover { transform: scale(1.06); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 4px 14px rgba(0, 0, 0, 0.35); }
.player__art:active { transform: scale(0.96); }
.player__art:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.player__go { cursor: pointer; }
.player__go:hover { text-decoration: underline; text-underline-offset: 2px; }
.player__text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.player__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player__sub {
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player__extras { display: flex; align-items: center; gap: 9px; flex: none; }
.player__btn--icon { width: 30px; height: 30px; }
.player__btn--icon svg { width: 25px; height: 25px; }
.player__btn--wide { margin-left: 2px; }
.player .icon-mute { display: none; }
.player.is-muted .icon-mute { display: block; }
.player.is-muted .icon-vol { display: none; }

/* Full icon set fits at 700px; on narrower windows drop the secondary icons, keeping volume. */
@media (max-width: 760px) {
  .player__extras > .player__btn:not(#player-volume) { display: none; }
}

@media (max-width: 700px) {
  .node__name { font-size: 13px; }
  .node--album .node__name { font-size: 12.5px; }
  .node--track .node__name { font-size: 12px; }
  .node__meta { font-size: 13px; }
  .node--wrap { width: 220px; }
  .node__avatar { width: 40px; height: 40px; font-size: 12px; }
  .node__avatar--top { font-size: 14px; }
  .node--single .node__art { width: 38px; height: 38px; }
  .node--single .node__art { width: 30px; height: 30px; }
  .search, .flow-down .search {
    top: 60px;
    left: 16px;
    right: 16px;
    width: auto;
    transform: none;
  }
  .search input { height: 46px; font-size: 14px; }
  .hint { display: none; }
  .player { height: 60px; gap: 14px; padding: 0 18px 0 16px; bottom: 12px; }
  .player__btn--toggle, .player__extras { display: none; }
  .player__controls { gap: 12px; order: 2; }
  .player__now { grid-template-columns: 38px 1fr; grid-template-rows: 38px; column-gap: 10px; }
  .player__art { width: 38px; height: 38px; }
  .player__title { font-size: 14px; }
  .player__sub { font-size: 13px; }
}

/* ---------- Premium plan modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 16px;
}
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 4, 24, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s;
}
.plan {
  --accent: #8ccfff;
  position: relative;
  width: min(440px, 100%);
  padding: 28px 30px 22px;
  border-radius: 18px;
  background: #212126;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.2s, transform 0.2s;
}
.modal.is-open .modal__backdrop { opacity: 1; }
.modal.is-open .plan { opacity: 1; transform: none; }

.plan__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}
.plan__close svg { width: 16px; height: 16px; }
.plan__close:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

.plan__brand { display: flex; align-items: center; gap: 14px; }
/* Same size, material and line M as the header logo */
.plan__mark {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(250, 250, 252, 0.9);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.08);
  color: #3a3a3c;
}
.plan__mark svg { width: 22px; height: 22px; }
.plan__title {
  margin: 18px 0 4px;
  font-size: 50px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #ffa000;
}
.plan__price { margin: 10px 0 0; font-size: 21px; font-weight: 700; display: flex; align-items: baseline; gap: 10px; }
/* Old price: a slanted strike instead of the flat underline-style one */
.plan__was { position: relative; color: #8e8e96; font-weight: 500; text-decoration: none; }
.plan__was::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: 50%;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: rotate(-14deg);
}
.plan__now { color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.plan__rule { margin: 22px 0 18px; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.plan__benefits { margin: 0 0 26px; padding-left: 22px; font-size: 17px; font-weight: 600; line-height: 1.55; }
.plan__benefits li::marker { color: rgba(255, 255, 255, 0.9); }

.plan__cta {
  width: 100%;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  border-radius: 29px;
  background: #fff;
  color: #1f1f1f;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s, background-color 0.2s;
}
.plan__cta:hover { background: #f1f3f4; transform: scale(1.01); }
.plan__cta:active { transform: scale(0.98); }
.plan__cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.plan__cta:disabled { cursor: default; transform: none; filter: none; }
.plan__cta.is-done { background: #9be7b4; }
.plan__g { width: 22px; height: 22px; }

.plan__status { margin: 14px 0 0; font-size: 14px; line-height: 1.45; text-align: center; color: #d6e6ff; }
.plan__status[data-tone="error"] { color: #ffb4a8; }
.plan__status[data-tone="success"] { color: #9be7b4; }
.plan__fine { margin: 16px 0 0; font-size: 13px; line-height: 1.45; text-align: center; color: #a3a3ab; }

/* After a new sign-up: only the check, the message and Close */
.plan.is-joined > :not(.plan__done) { display: none; }
.plan__done { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 14px 0 4px; text-align: center; }
.plan__done[hidden] { display: none; }
.plan__check {
  width: 114px;
  height: 114px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #34c759;
  color: #fff;
  box-shadow: 0 14px 40px rgba(52, 199, 89, 0.35);
  animation: plan-pop 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.plan__check svg { width: 60px; height: 60px; }
.plan__place { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.plan__place[hidden] { display: none; }
.plan__place-label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #a3a3ab; }
.plan__place-num { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: #fff; }
.plan__done-msg { margin: 0; max-width: 32ch; font-size: 14px; font-weight: 600; line-height: 1.45; white-space: pre-line; }
.plan__done-close { margin-top: 6px; width: auto; height: 48px; padding: 0 31px; border-radius: 24px; font-size: 17px; }
@keyframes plan-pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .plan__check { animation: none; } }

@media (max-width: 480px) {
  .plan { padding: 24px 22px 18px; }
  .plan__title { font-size: 42px; }
  .plan__benefits { font-size: 16px; }
}

/* ---------- Top-down flow (portrait, or ?flow=down) ---------- */
/* (Search placement is the same in both flows: see .search.) */
.search input { height: 44px; }
/* Labels sit centred under their dot */
.flow-down .node { text-align: center; align-items: center; }
.flow-down .node--wrap,
.flow-down .node--tourinfo,
.flow-down .node--track,
.flow-down .node--has-art:not(.node--album),
.flow-down .node--has-avatar { text-align: left; }
.flow-down .node--album.node--has-art { align-items: center; }
.flow-down .node--album .node__text { align-items: center; text-align: center; }
.flow-down .node.is-side { text-align: left; align-items: flex-start; }
/* Phones: no room in the header row, so the search stays just below it */
@media (max-width: 700px) {
  .search { top: 60px; left: 16px; right: 16px; max-width: none; margin-inline: 0; }
  .search input { height: 48px; }
}

/* Phones: artist rows stay narrow enough for two columns (long names end in "…") */
@media (max-width: 700px) {
  .flow-down .node--artist,
  .flow-down .node--similar { max-width: 158px; }
  .flow-down .node--artist .node__text,
  .flow-down .node--similar .node__text { min-width: 0; }
  .flow-down .node--artist .node__name,
  .flow-down .node--similar .node__name,
  .flow-down .node--artist .node__meta,
  .flow-down .node--similar .node__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Glow only on the selected label: on unselected ones it merged into a box-shaped halo */
/* Text sits in front of the fibers: a letter-shaped halo in the background colour (as map labels use
   over roads) hides strands right around each glyph, with no box. Selected/hovered names add their glow. */
.node__name, .node__meta, .node__num, .node__label, .node__value {
  text-shadow: 0 0 2px #030c3a, 0 0 4px #030c3a, 0 0 7px rgba(3, 12, 58, 0.9), 0 0 12px rgba(3, 12, 58, 0.6);
}
.node.is-selected .node__name,
.node:hover .node__name {
  text-shadow: 0 0 2px #030c3a, 0 0 4px #030c3a, 0 0 7px rgba(3, 12, 58, 0.9), 0 0 16px rgba(111, 212, 255, 0.85);
}
/* Dimmed (unselected) items: no text shadow or halo */
.node.is-dimmed .node__name, .node.is-dimmed .node__meta, .node.is-dimmed .node__num,
.node.is-dimmed .node__label, .node.is-dimmed .node__value { text-shadow: none; }

/* Action buttons (In playlist, a playlist choice, Share…) stay flat when selected or hovered: no text glow */
.node--action.is-selected .node__name,
.node--action:hover .node__name { text-shadow: none; }

/* Account panel: who's signed in, renewal line, and the quiet Sign out link */
.plan__view[hidden] { display: none !important; }
.plan__who { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: #c9cbd3; overflow-wrap: anywhere; }
.plan__who[hidden] { display: none; }
.plan__renew { margin: 0; font-size: 14px; line-height: 1.45; color: #a3a3ab; }
.plan__link {
  display: block;
  margin: 14px auto 0;
  padding: 6px 10px;
  border: 0;
  background: none;
  color: #a3a3ab;
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.plan__link[hidden] { display: none; }
.plan__link:hover { color: #fff; }
.plan__cta[hidden] { display: none; }

/* ---------- Account panel: settings layout (sidebar of sections + content pane) ---------- */
.acct {
  position: relative;
  display: grid;
  grid-template-columns: 236px 1fr;
  width: min(820px, calc(100vw - 32px));
  height: min(560px, calc(100dvh - 32px));
  border-radius: 24px;
  overflow: hidden;
  background: #1f1f21;
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  color: #f2f2f4;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.2s, transform 0.2s;
}
.modal.is-open .acct { opacity: 1; transform: none; }

.acct__nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px 16px;
  background: #19191b;
  border-right: 0.5px solid rgba(255, 255, 255, 0.06);
}
.acct__tabs { display: flex; flex-direction: column; gap: 4px; }
.acct__tab {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #d4d4d8;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.acct__tab svg { flex: none; width: 22px; height: 22px; color: #a1a1a8; }
.acct__tab:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.acct__tab[aria-selected="true"] { background: #2c2c2f; color: #fff; }
.acct__tab[aria-selected="true"] svg { color: #fff; }
.acct__tab:focus-visible, .acct__btn:focus-visible, .acct__switch:focus-visible, .acct__google:focus-visible { outline: 2px solid #6aa5ff; outline-offset: 2px; }
.acct__sign[hidden], .acct__tab[hidden] { display: none; }

.acct__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.acct__pane { flex: 1; min-height: 0; overflow-y: auto; }
.acct__pane[hidden] { display: none; }
.acct__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 30px 22px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
}
.acct__title { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.acct__sub { margin: 4px 0 0; font-size: 16px; color: #8e8e95; overflow-wrap: anywhere; }
/* The old price, struck through with a slanted line (corner to corner) rather than a level one */
.acct__was { position: relative; display: inline-block; color: #6e6e75; margin-right: 4px; text-decoration: none; }
.acct__was::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 50%;
  border-top: 1.5px solid currentColor;
  transform: rotate(-14deg);
}
.acct__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3a5bd9, #8a4fd8);
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}
.acct__avatar:empty { background: #2c2c2f; }

.acct__rows { padding: 4px 30px 12px; }
.acct__rows[hidden] { display: none; }
.acct__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.07);
}
.acct__row:last-child { border-bottom: 0; }
.acct__row[hidden] { display: none; }
.acct__row--top { align-items: flex-start; }
.acct__label { margin: 0; font-size: 16px; font-weight: 600; color: #f2f2f4; }
.acct__desc { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: #8e8e95; }
/* The value keeps its own width (an email address or "Premium" on one line) and the label beside it gives way,
   wrapping its description; only a value too long for 62% of the row is broken across lines. */
.acct__row > div:first-child { flex: 1 1 0; min-width: 0; }
.acct__value { flex: 0 0 auto; max-width: 62%; margin: 0; font-size: 15px; color: #e4e4e8; text-align: right; overflow-wrap: anywhere; }
.acct__list { margin: 8px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.5; color: #c9c9cf; }
/* The Premium offer: a plan card with the price (and what it was), then what's included as a grid of benefits,
   each a short name with a line under it. */
.offer { padding: 22px 30px 6px; }
.offer--list { padding-top: 10px; padding-bottom: 22px; }
.offer__plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border: 0.5px solid rgba(120, 160, 255, 0.28);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(63, 125, 255, 0.2), rgba(138, 79, 216, 0.14));
}
.offer__price { margin: 0; line-height: 1; white-space: nowrap; }
.offer__now { font-size: 40px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.offer__per { margin-left: 4px; font-size: 16px; color: #b9b9c2; }
.offer__terms { margin: 8px 0 0; font-size: 13px; color: #a5a5ae; }
.offer__deal { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; white-space: nowrap; }
.offer__deal .acct__was { margin-right: 0; color: #9a9aa3; }
.offer__save { padding: 5px 12px; border-radius: 999px; background: #3f7dff; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; }
.offer__heading { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8e8e95; }
.offer__items { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; margin: 0; padding: 0; list-style: none; }
.offer__item { display: flex; align-items: flex-start; gap: 12px; }
.offer__tick { flex: none; width: 20px; height: 20px; margin-top: 1px; color: #6aa5ff; }
.offer__name { margin: 0; font-size: 15px; font-weight: 600; color: #f2f2f4; }
/* A requirement on an offer (Full songs: Apple Music required): small, light text with its icon, beside the name */
/* (The name and its requirement on one line, centred on each other; the requirement goes below if there's no room) */
.offer__name:has(.offer__req) { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; }
.offer__req { display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; font-size: 9px; font-weight: 100; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; }
.offer__req-icon { flex: none; width: 14px; height: 14px; }  /* Apple Music's icon: a white square, a black double note */
.offer__text { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: #a5a5ae; }
.offer__note { margin: 20px 0 0; padding-top: 14px; border-top: 0.5px solid rgba(255, 255, 255, 0.07); font-size: 12.5px; line-height: 1.45; color: #7d7d86; }
@media (max-width: 640px) {
  .offer { padding-left: 20px; padding-right: 20px; }
  .offer__plan { flex-direction: column; align-items: flex-start; gap: 12px; }
  .offer__now { font-size: 34px; }
  .offer__items { grid-template-columns: 1fr; gap: 14px; }
}
.acct__box { padding: 4px 0 16px; }
/* Signing in (Profile, signed out): a headline, what it gives, then the Google button and a word on privacy */
.pitch { padding: 18px 0 20px; }
.pitch__title { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: #fff; }
.pitch__sub { margin: 6px 0 18px; font-size: 14px; line-height: 1.4; color: #a5a5ae; }
.pitch__items { grid-template-columns: 1fr; gap: 14px; }
.pitch__fine { margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: #7d7d86; }
/* Feedback (Profile): a box to write in, with Send under it and how it went beside that */
.acct__textarea {
  display: block;
  width: 100%;
  min-height: 96px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: #19191b;
  color: #f2f2f4;
  font: inherit;
  font-size: 16px;  /* 16px: iOS zooms the page for anything smaller */
  line-height: 1.4;
  resize: vertical;
}
.acct__textarea::placeholder { color: #6e6e75; }
.acct__textarea:focus { outline: none; border-color: #6aa5ff; }
.acct__send { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; }
.acct__send .acct__desc { margin: 0; }
.acct__send .acct__desc[data-tone="ok"] { color: #8fd6a4; }
.acct__send .acct__desc[data-tone="error"] { color: #ff9a9a; }
.acct__send .acct__btn { flex: none; }
.acct__google {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #1d1d1f;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.acct__google:hover { background: #f1f3f4; }
.acct__google:disabled { opacity: 0.6; cursor: default; }
.acct__google[hidden] { display: none; }
.acct__g { width: 20px; height: 20px; }

/* On/off switch (Apple Music) */
.acct__switch {
  position: relative;
  flex: none;
  width: 52px;
  height: 30px;
  border: 0;
  border-radius: 15px;
  background: #3a3a3d;
  cursor: pointer;
  transition: background 0.2s;
}
.acct__switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s;
}
.acct__switch[aria-checked="true"] { background: #3478c6; }
.acct__switch[aria-checked="true"]::after { transform: translateX(22px); }
.acct__switch:disabled { opacity: 0.4; cursor: default; }

.acct__foot { padding: 14px 24px 22px; }
.acct__status { margin: 0 6px 12px; font-size: 14px; line-height: 1.4; color: #c9d8ff; }
.acct__status[hidden] { display: none; }
.acct__status[data-tone="error"] { color: #ffb4a8; }
.acct__status[data-tone="success"] { color: #9be7b4; }
.acct__buttons { display: flex; justify-content: flex-end; gap: 12px; }
.acct__btn {
  height: 46px;
  padding: 0 24px;
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: #2c2c2f;
  color: #e4e4e8;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.acct__btn:hover { background: #343438; }
.acct__btn--primary { border-color: transparent; background: #3478c6; color: #fff; }
.acct__btn--primary:hover { background: #3d84d6; }
.acct__btn:disabled { opacity: 0.6; cursor: default; }
.acct__btn[hidden] { display: none; }

/* Phones: the sections become a row of tabs above the content */
@media (max-width: 640px) {
  .acct { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: min(640px, calc(100dvh - 24px)); width: calc(100vw - 24px); border-radius: 20px; }
  .acct__nav { flex-direction: row; align-items: center; gap: 2px; padding: 10px 8px; border-right: 0; border-bottom: 0.5px solid rgba(255, 255, 255, 0.06); overflow-x: auto; }
  .acct__tabs { flex-direction: row; gap: 2px; }
  .acct__tab { width: auto; padding: 8px 9px; gap: 8px; font-size: 14px; white-space: nowrap; border-radius: 999px; }
  .acct__tab svg { display: none; }  /* words only, so all the sections (and Sign in/out) fit across */
  .acct__head { padding: 18px 18px 16px; }
  .acct__title { font-size: 22px; }
  .acct__avatar { width: 52px; height: 52px; font-size: 18px; }
  .acct__rows { padding: 2px 18px 10px; }
  .acct__foot { padding: 12px 16px 16px; }
  .acct__btn { flex: 1; padding: 0 14px; }
}

/* MusicKit's own error dialog (it's switched off in muse-apple.js; this is in case a version ignores that) */
#musickit-dialog, #musickit-dialog-scrim { display: none !important; }

/* Connected apps: a white music note (Apple Music style), white whether or not the tab is selected */
.acct__tab svg.acct__appicon, .acct__tab[aria-selected="true"] svg.acct__appicon { color: #fff; }
/* Connected apps → Apple Music row: the red app icon beside its name */
.acct__label--icon { display: flex; align-items: center; gap: 10px; }
.acct__applogo { flex: none; width: 26px; height: 26px; }

/* Discover: the steer box is a little wider; "Finding artists…" breathes while it waits */
.node--jsteerbox .node__input { width: 190px; }
.node--jloading { cursor: default; opacity: 0.85; }
.node--jloading .node__icon svg { animation: jwait 1.2s ease-in-out infinite; }
@keyframes jwait { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .node--jloading .node__icon svg { animation: none; } }
/* A journey's artist: the reason it connects can run a little longer than a song's line */
.node--journey .node__meta { white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: 11.5px; }

/* The playing track: a small sound wave in place of its number (the number returns when paused): five
   round-ended bars centred on one line, tallest in the middle, each swelling and shrinking from its centre */
.node__eq { display: none; align-items: center; gap: 1.5px; height: 14px; }
/* The row lines its text up by baseline; the wave has none, so it's centred on the row (level with the dot and title) */
.node.is-playing .node__num { align-self: center; display: inline-flex; align-items: center; }
.node__eq i { width: 2px; border-radius: 1px; background: #e9eef8; transform-origin: center; animation: eq-bar 0.9s ease-in-out infinite; }
.node__eq i:nth-child(1), .node__eq i:nth-child(5) { height: 28%; }
.node__eq i:nth-child(2), .node__eq i:nth-child(4) { height: 60%; }
.node__eq i:nth-child(3) { height: 100%; }
.node__eq i:nth-child(1) { animation-delay: -0.45s; }
.node__eq i:nth-child(2) { animation-delay: -0.15s; animation-duration: 0.75s; }
.node__eq i:nth-child(3) { animation-delay: -0.6s; animation-duration: 1.05s; }
.node__eq i:nth-child(4) { animation-delay: -0.3s; animation-duration: 0.8s; }
.node__eq i:nth-child(5) { animation-delay: -0.7s; animation-duration: 0.95s; }
@keyframes eq-bar { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } }
.node.is-playing .node__no { display: none; }
.node.is-playing .node__eq { display: inline-flex; }
@media (prefers-reduced-motion: reduce) {
  .node__eq i { animation: none; }
}

/* Top 20 on phones: two columns, so each label is slimmer (no cover, names cut with "…") */
@media (max-width: 700px) {
  .node--top { max-width: calc(50vw - 34px); }
  .node--top .node__art { display: none; }
  .node--top .node__text { min-width: 0; }
  .node--top .node__name, .node--top .node__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- Mobile ui (iPhones and Android phones; html.is-phone, set in the page head) ----------
   Tablets and desktop keep the tree. On phones everything is a circle: the action circle
   (200 x 200) in the centre of the screen, and what it holds packed round it as sub circles (muse.js,
   layoutPhone). Tapping a sub circle moves it to the centre and its own sub circles fan out. The circles are the
   tree's own items (.node): .is-bubble round the action circle, .is-center named below it, .is-off for the rest. */

/* --- The page and its header --- */
/* The page keeps the standard look: the dark blue background, with fibers of light (muse.js, drawAction). */
.is-phone .logo, .is-phone .brand, .is-phone .hint { display: none !important; }
/* Back: the iPhone's own round glass button. A 44px near-white circle with a hairline edge and a soft shadow, and
   a bold black chevron with round ends. */
.is-phone .back {
  top: 20px;  /* centred on the search pill (14px down, 56px tall) */
  left: 16px;
  width: 44px;
  height: 44px;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.9) inset, 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 16px rgba(0, 0, 0, 0.08);
  color: #000;
}
.is-phone .back svg { width: 30px; height: 30px; stroke-width: 2.4; transform: translateX(-1px); }  /* the chevron sits a touch left of centre, as Apple's does */
/* The search: one navy pill across the top, its icons and text white, laid out as a chat box. The search icon at its start, then the box,
   then a microphone (search by voice), and at its end the account (Upgrade / Profile) as a black circle with a
   person. (The account button is its own fixed button, placed over the pill's end.) */
.is-phone .search { top: 14px; left: 16px; right: 16px; height: 56px; max-width: none; margin-inline: 0; transform: none; }
.is-phone .back:not([hidden]) ~ .search { left: 70px; }  /* room for Back beside the search */
/* 16px text or more in every box you type in: iPhones zoom the page in when a box with smaller text is tapped */
.is-phone .search input {
  height: 56px;
  padding: 0 112px 0 52px;  /* the search icon; the microphone and the account circle */
  border: 0;
  border-radius: 28px;
  background: #152a4f;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #fff;
  font-size: 17px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06), 0 10px 28px rgba(0, 0, 0, 0.18);
}
.is-phone .search input::placeholder { color: rgba(255, 255, 255, 0.55); }
.is-phone .search input:focus { border: 0; outline: 0; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06), 0 10px 28px rgba(0, 0, 0, 0.18); }  /* no ring when it's tapped */
.is-phone .search > svg { left: 18px; width: 24px; height: 24px; color: #fff; }
.search__mic {
  position: absolute;
  top: 50%;
  right: 60px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}
.search__mic[hidden] { display: none; }
.search__mic svg { width: 24px; height: 24px; }
.search__mic:hover { background: rgba(255, 255, 255, 0.1); }
.search__mic:focus-visible { outline: 2px solid rgba(0, 122, 255, 0.6); outline-offset: 2px; }
/* Recording (as ChatGPT's dictation): the pill becomes a strip across from the search icon: the voice as a wave
   of thin bars moving in from the right, how long so far, then Cancel (✕) and Done (✓, a black circle in the
   account circle's place). The box's own text, the microphone and the account circle step aside meanwhile. */
.dictate { position: absolute; top: 0; bottom: 0; left: 52px; right: 6px; display: flex; align-items: center; gap: 4px; z-index: 2; }
.dictate[hidden] { display: none; }
.dictate__wave { flex: 1; min-width: 0; height: 32px; }
.dictate__time { margin: 0 6px 0 8px; color: rgba(255, 255, 255, 0.6); font-size: 15px; font-variant-numeric: tabular-nums; }
.dictate__btn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dictate__btn svg { width: 22px; height: 22px; }
.dictate__btn:focus-visible { outline: 2px solid rgba(0, 122, 255, 0.6); outline-offset: 2px; }
.dictate__cancel { background: transparent; color: #fff; }
.dictate__cancel:hover { background: rgba(255, 255, 255, 0.1); }
.dictate__done { background: #0d0d0d; color: #fff; }
.dictate__done:hover { background: #2a2a2c; }
/* (Written to outweigh the boxes' own text and placeholder colours, whichever box it is) */
.is-phone :is(.search, .phone-create__field).is-recording > input { color: transparent; caret-color: transparent; }
.is-phone :is(.search, .phone-create__field).is-recording > input::placeholder { color: transparent; }
.is-phone :is(.search, .phone-create__field).is-recording > input::-webkit-search-cancel-button { display: none; }
.is-phone :is(.search, .phone-create__field).is-recording > .search__mic, .is-dictating #account { visibility: hidden; }
/* Done tapped: a spinner in its place while the last words are made out; the wave rests */
.is-transcribing .dictate__wave { opacity: 0.35; }
.is-transcribing .dictate__cancel { visibility: hidden; }
.is-transcribing .dictate__done { cursor: default; }
.is-transcribing .dictate__done svg { display: none; }
.is-transcribing .dictate__done::after { content: ""; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: dictate-spin 0.8s linear infinite; }
@keyframes dictate-spin { to { transform: rotate(360deg); } }
/* No microphone: the box runs on to the account circle */
.is-phone .search:has(.search__mic[hidden]) input { padding-right: 70px; }
/* The account (Upgrade / Profile): a 44px red circle (as Subscribe's) with a white person, inside the pill's end */
.is-phone #account {
  top: 20px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #fa5b74, #fa2d48);  /* the Subscribe circle's red (and Full song's) */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: #fff;
}
.is-phone #account:hover { background: linear-gradient(180deg, #fb6f85, #fb4159); }
.is-phone #account svg { width: 22px; height: 22px; }

/* --- Scrolling ---
   The circles' layer is the page's scroller, so scrolling is the browser's own: momentum, the bounce at the ends,
   and the screen's full frame rate. The circles, the action circle and the fibers' canvas all lie inside it and
   move together. Each circle fades as it scrolls up to the search (muse.js). */
.is-phone #labels {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  pointer-events: auto;
  scrollbar-width: none;
}
.is-phone #labels::-webkit-scrollbar { display: none; }
.is-phone #flow { position: absolute; inset: auto; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }  /* its height is set by muse.js: the content's */
/* A second canvas in front of everything, for the playing song's fiber alone: it's never hidden behind a circle */
#flow-top { position: absolute; left: 0; top: 0; width: 100%; z-index: 4; pointer-events: none; }
/* The world the circles lie in, inside the scroller: muse.js sets its size, and scales it up on larger screens */
#phone-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#phone-spacer { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* --- The action circle --- */
.action-circle { display: none; }
.is-phone .action-circle {
  display: block;
  position: absolute;  /* in the scroller: the middle of the first screenful */
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  border-radius: 50%;
  /* Solid, so the sub circles waiting behind it can't be seen through it. muse.js replaces this with a cover or
     photo: the selected album, song or artist, else the song in the player. */
  background: radial-gradient(circle at 50% 42%, rgba(63, 125, 255, 0.28), rgba(7, 24, 94, 0.35) 62%, rgba(3, 12, 58, 0.2)), #030c3a;
  box-shadow: 0 0 60px rgba(63, 125, 255, 0.35), inset 0 0 40px rgba(111, 212, 255, 0.12);
  z-index: 2;  /* in front of the sub circles (1), behind the name below it (3) */
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.is-phone.phone-art .action-circle { box-shadow: 0 0 60px rgba(63, 125, 255, 0.35); }  /* no inner glow over a picture */
/* With no picture in it (the start, a genre, search results) the action circle isn't shown at all: its fill and
   glow fade away, leaving the fibers and the sub circles round an empty middle. It's still there to tap, and
   "Loading" still shows in it. */
.is-phone .action-circle { transition: box-shadow 0.35s ease, background-color 0.35s ease; }
.is-phone:not(.phone-art) .action-circle { background: transparent; box-shadow: 0 0 0 rgba(63, 125, 255, 0); }
@media (prefers-reduced-motion: reduce) { .is-phone .action-circle { transition: none; } }
/* Nothing is drawn in the centre of the action circle: no play mark at the start or when paused. (A tap on it
   still plays the Top 20 at the start, and plays or pauses once a song is loaded.) */
.action-circle__idle { display: none; }

/* "Loading", while what's open is being fetched (html.phone-loading) */
/* …and nowhere else: the tree's " · loading" after an item's sub text isn't shown on phones */
.is-phone .node.is-loading .node__meta::after { content: none; }
.action-circle__loading {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.is-phone.phone-loading:not(.phone-focused) .action-circle__loading { display: grid; }  /* nothing named below: say it in the circle */
/* With something named below the action circle (an artist just tapped, say), "Loading" goes under that name */
.is-phone.phone-loading .node.is-center::after {
  content: var(--loading, "Loading");  /* one word for what's being fetched: muse.js sets it */
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
  animation: loading-pulse 1s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .is-phone.phone-loading .node.is-center::after { animation: none; } }

/* Play state. A mark in the middle of the action circle shows for a moment when the song is played or paused
   (data-flash, set by muse.js), then fades. While a song is loaded but paused, a small Play badge sits on the rim. */
.action-circle__state {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: -34px 0 0 -34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition: opacity 0.5s ease 0.35s, transform 0.5s ease 0.35s;
}
.action-circle__state svg { width: 32px; height: 32px; }
.action-circle[data-flash="play"] .action-circle__state--play,
.action-circle[data-flash="pause"] .action-circle__state--pause { opacity: 1; transform: none; transition: opacity 0.12s, transform 0.12s; }
.action-circle__badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: #111;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.action-circle__badge svg { width: 20px; height: 20px; margin-left: 2px; }
/* (The Play badge on the rim while a song waits, paused, isn't shown: the play bar says so.) */
@media (prefers-reduced-motion: reduce) { .action-circle__state { transition: none; } }

/* --- Every circle --- */
/* No CSS transition on position: muse.js moves the circles itself. (The tree's action buttons ease their
   transform, which made a song's action circles slide in from the corner of the screen instead of from behind
   the action circle.) */
.is-phone .node { box-sizing: border-box; z-index: 1; transition: background-color 0.2s, filter 0.2s; }
.is-phone .node.is-off { visibility: hidden; pointer-events: none; }
/* A circle being drawn in to the action circle as another takes the centre (muse.js): seen, but not to be tapped */
.is-phone .node.is-leaving { pointer-events: none; }

/* --- The circle in the centre: named below the action circle (tapping the name steps back out) --- */
.is-phone .node.is-center {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 220px;
  padding: 10px 6px;
  white-space: normal;
  text-align: center;
  background: none;
  z-index: 3;
}
.is-phone .is-center .node__text { align-items: center; max-width: 100%; }
.is-phone .is-center .node__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;  /* room for a long song name in full */
  overflow: hidden;
  max-width: 100%;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: normal;
  color: var(--ink);
  text-shadow: 0 0 2px #030c3a, 0 0 6px rgba(3, 12, 58, 0.9);
}
.is-phone .is-center .node__meta { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); text-shadow: none; }
.is-phone .is-center .node__num, .is-phone .is-center .node__art, .is-phone .is-center .node__avatar { display: none; }  /* its picture is in the action circle */
/* Discover: the line under the centre's name is a sentence (what the map is; what's playing of an artist's and why
   they're here), so it wraps, up to three lines, in a slightly wider column, and isn't cut short. */
.is-phone .node.is-center.node--journeymap, .is-phone .node.is-center.node--journey { width: min(280px, calc(100vw - 32px)); }
.is-phone .is-center.node--journeymap .node__meta, .is-phone .is-center.node--journey .node__meta {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  white-space: normal;
  text-overflow: clip;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
}
/* A bio's About text, under its name and date of birth: the first lines (a tap shows it all) */
.node__about { display: none; }
.is-phone .node.is-center:has(.node__about:not(:empty)) { width: min(320px, calc(100vw - 32px)); }
.is-phone .is-center .node__about:not(:empty) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  color: #d8e6fb;
}

/* --- Sub circles ---
   Three looks, each with one meaning (muse.js sets the classes):
   - glass (the default): somewhere to go, or music. Translucent white with a hairline edge; a cover or photo fills it
     when the item has one.
   - white (.is-pale): something to read or do (bio facts, tour details, news, buttons, boxes to type in).
   - numbered (.is-counted, glass): a number over the name (a section's count, a track number).
   Names are inside the circle (11.5px; the circle grows to fit), or below it (.is-under) where a picture fills it. */
.is-phone .node.is-bubble {
  min-width: 0;  /* the tree's action buttons are at least 150px wide: here every circle keeps the size muse.js gives it */
  max-width: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 7px;
  border: 1px solid rgba(120, 190, 255, 0.105);  /* a faint hairline in the app's cyan */
  border-radius: 50%;
  overflow: hidden;
  white-space: normal;
  text-align: center;
  color: #fff;
  background: rgba(255, 255, 255, 0);  /* no fill: the circle is its outline alone, the page showing through */
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.is-phone .node.is-bubble.is-empty { opacity: 0.5; }
.is-phone .node.is-bubble:active { filter: brightness(1.2); }
.is-phone .is-bubble .node__text { position: relative; z-index: 1; align-items: center; max-width: 100%; gap: 2px; }
.is-phone .is-bubble .node__name {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  max-width: 100%;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: normal;
  color: #fff;
  text-shadow: none;
}
.is-phone .is-bubble .node__name svg { display: block; width: 14px; height: 14px; margin: 0 auto 2px; }
/* A playlist's circle (when Playlists is open), and Create playlist beside them: the name smaller, the size of the
   names in an artist's circles */
.is-phone .is-bubble:is(.node--pl-list, .node--plprompt) .node__name { font-size: 11px; }
/* …and Create playlist on two lines: "Create" over "playlist" (a word to a line) */
.is-phone .is-bubble.node--plprompt .node__name { width: min-content; margin-inline: auto; text-align: center; }
.is-phone .is-bubble .node__meta, .is-phone .is-bubble .node__num {
  position: relative;
  z-index: 1;
  max-width: 100%;
  width: auto;
  overflow: hidden;
  font-size: 9px;
  letter-spacing: 0.02em;
  text-transform: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: none;
}
.is-phone .is-bubble .node__row { display: none; }
.is-phone .is-bubble .node__input { width: 108px; font-size: 16px; text-align: center; }  /* 16px: see the search box */
/* A cover or photo fills the circle, darkened so a name inside reads over it */
.is-phone .is-bubble .node__art, .is-phone .is-bubble .node__avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  filter: brightness(0.55);
  opacity: 0.9;
  z-index: 0;
}
/* Before a photo or cover has loaded (or where there is none) the circle is plain glass, with the artist's
   initials: not the tree's many-coloured stand-in, which flashed up just before the picture */
.is-phone .node__avatar:not(.has-photo):not(.node__avatar--top), .is-phone span.node__art { background: rgba(255, 255, 255, 0.08) !important; }
/* Genres, Playlists, Recently Played and the Top 20s: the name alone, without the line under it or an icon */
.is-phone .node.is-plain .node__meta, .is-phone .node.is-plain .node__name svg, .is-phone .node.is-plain .node__avatar { display: none; }

/* The start screen's circles (the genres, Playlists, Recently Played, Top 20): their names at 14px */
.is-phone .is-bubble.is-start .node__name { font-size: 11pt; }  /* phones */
.is-phone-chosen .is-bubble.is-start .node__name { font-size: 9pt; }  /* tablets and desktop */
/* The start screen's Playlists, Recently Played and Top 20: each its own colour (--hue, set by muse.js) */
.is-phone .node.is-bubble.is-color { background: radial-gradient(circle at 35% 28%, hsl(var(--hue) 80% 62%), hsl(var(--hue) 72% 44%) 70%); color: #fff; }
.is-phone .is-bubble.is-color .node__name { color: #fff; }  /* white on its colour */

/* Named below (.is-under): the picture alone fills the circle, at full brightness, and the name goes under it,
   on the page (muse.js keeps that space clear). Recently Played, the Top 20s' songs (with the chart
   position in front: data-rank, and no line under it), a genre's Top 20 and artists, an artist's albums, singles,
   hits, collabs and similar artists, a search's circles, and a playlist's songs. An album's tracks too: the
   track number alone in a dark circle (.is-counted), the song's name under it. */
.is-phone .node.is-bubble.is-under { overflow: visible; padding: 0; background: none; }
.is-phone .node.is-bubble.is-under:not(.node--has-art):not(.node--has-avatar) { background: rgba(255, 255, 255, 0); }  /* no picture: a plain glass circle */
.is-phone .is-bubble.is-under .node__art { display: block; border-radius: 50%; filter: none; opacity: 1; }
.is-phone .node.is-bubble.is-under .node__avatar { display: grid; border-radius: 50%; filter: none; opacity: 1; }
/* A genre's Top 20: the "20" in its blue circle is 25pt on the screen on every device (on tablets and desktop the
   view is scaled up by --ps, so it's drawn that much smaller to come out the same) */
.is-phone .is-bubble .node__avatar--top { font-size: calc(25pt / var(--ps, 1)); }
/* …its digits a little closer together (each rolls in its own column, so it's the columns that are drawn in) */
.is-phone .is-bubble .node__avatar--top .odo__col + .odo__col { margin-left: -0.05em; }
/* The name and its line: wrapped together beside a picture (.node__text), or on their own in a circle without one */
.is-phone .is-bubble.is-under .node__text,
.is-phone .is-bubble.is-under > .node__name,
.is-phone .is-bubble.is-under > .node__meta {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  width: calc(100% + 22px);
  max-width: none;
  transform: translateX(-50%);
}
.is-phone .is-bubble.is-under > .node__meta { top: calc(100% + 19px); }
.is-phone .is-bubble.is-under .node__name { font-size: 12px; line-height: 1.15; color: var(--ink); }  /* phones; up to 3 lines, like every name */
.is-phone-chosen .is-bubble.is-under .node__name { font-size: 8.5pt; }  /* tablets and desktop: smaller, as the view is scaled up there */
.is-phone .is-bubble.is-under .node__meta { color: var(--muted); }
.is-phone .is-bubble.is-under.is-search .node__name { font-size: 12px; }  /* a search's results: a little larger */
.is-phone .is-bubble.is-under .node__name[data-rank]::before { content: attr(data-rank) "  "; font-weight: 700; }
.is-phone .is-bubble.is-under .node__name[data-rank] ~ .node__meta { display: none; }

/* A playlist (.is-caption): its name inside the circle, and how many songs it holds below it */
.is-phone .node.is-bubble.is-caption { overflow: visible; }
.is-phone .is-bubble.is-caption > .node__meta {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  width: calc(100% + 22px);
  max-width: none;
  transform: translateX(-50%);
  color: var(--muted);
}

/* Numbered (.is-counted): the number on top (data-count) and the name below, nothing else */
.is-phone .node.is-bubble.is-counted::before { content: attr(data-count); position: relative; z-index: 1; font-size: 20px; font-weight: 700; line-height: 1; }
/* A section's count is an odometer (muse.js, rollNumber): a strip of numerals per digit, each one numeral
   tall, seen through a window one numeral high; the strip slides up to its last numeral. A track's number is
   plain text (data-count, above); a circle with a count of its own shows no such text. */
.is-phone .node.is-bubble.is-counted:not([data-count])::before { content: none; }
.node__count { display: none; }
.is-phone .is-bubble.is-counted > .node__count { display: block; position: relative; z-index: 1; font-size: 20px; font-weight: 700; line-height: 1; }
.odo { display: inline-flex; align-items: flex-start; height: 1em; overflow: hidden; line-height: 1; font-variant-numeric: tabular-nums; vertical-align: top; }
.odo__col { display: block; height: 1em; }
.odo__strip { display: block; will-change: transform; }
.odo__digit { display: block; height: 1em; line-height: 1em; text-align: center; }
.odo__sep { display: block; height: 1em; line-height: 1em; }
/* …the name under the number, inside the circle (an artist's Albums, Singles, Hits…) */
.is-phone .is-bubble.is-counted:not(.is-under) .node__name { font-size: 11px; }
/* The track in the player (larger: muse.js): the same circle as the others, outline and all, with the glow of a
   main fiber round it, cyan and blue. Showing the equalizer (playing) the glow becomes northern lights (below);
   paused, with its number back, it's steady and softer. */
.is-phone .node.is-bubble.is-counted.is-selected {
  box-shadow: 0 0 6px rgba(125, 208, 255, 0.6), 0 0 16px rgba(60, 125, 255, 0.45);
}
/* Playing, its glow is northern lights, drawn on the fibers' canvas behind it (muse.js, drawAurora): no halo here */
.is-phone .node.is-bubble.is-counted.is-playing { box-shadow: none; }
.is-phone .node.is-bubble.is-counted.is-selected::before { color: #fff; }
.is-phone .is-bubble.is-counted .node__meta, .is-phone .is-bubble.is-counted .node__num, .is-phone .is-bubble.is-counted .node__art { display: none; }
/* The track that's playing: the moving sound wave in the circle instead of its number (the number returns when paused) */
.is-phone .node.is-bubble.is-counted.is-playing::before { content: none; }
.is-phone .is-bubble.is-counted.is-playing .node__num { display: inline-flex; align-items: center; overflow: visible; transform: scale(1.5); }
/* The playing track's circle has no outline and no fill (its halo alone marks it); its sound wave is white */
.is-phone .node.is-bubble.is-counted.is-playing { border-color: transparent; }
.is-phone .is-bubble.is-counted.is-playing .node__eq i { background: #fff; }
/* …and quicker than in the tree (about twice as fast; each bar still keeps its own pace) */
.is-phone .node__eq i:nth-child(1) { animation-duration: 0.42s; }
.is-phone .node__eq i:nth-child(2) { animation-duration: 0.34s; }
.is-phone .node__eq i:nth-child(3) { animation-duration: 0.5s; }
.is-phone .node__eq i:nth-child(4) { animation-duration: 0.38s; }
.is-phone .node__eq i:nth-child(5) { animation-duration: 0.46s; }

/* White (.is-pale): dark text, a fact's label small over what it says; a soft shadow lifts it off the page */
.is-phone .node.is-bubble.is-pale { border: 0; background: #fff; color: #111; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3); }
.is-phone .is-bubble.is-pale .node__name, .is-phone .is-bubble.is-pale .node__icon, .is-phone .is-bubble.is-pale .node__input { color: #111; }
.is-phone .is-bubble.is-pale .node__input::placeholder { color: #666; }
.is-phone .is-bubble.is-pale .node__meta { font-size: 8.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #555; }
/* A playlist's own circle: "Rename" across the top (a tap slides a panel up to type the new name in), and under
   it Share and Delete as two clear dark buttons (in the tree they are small pale icons, which can't be seen on white) */
.is-phone .node.is-bubble.node--plrename { flex-direction: row; flex-wrap: wrap; align-content: center; gap: 8px 10px; padding: 10px; }
.is-phone .is-bubble.node--plrename .node__icon { display: none; }
.is-phone .is-bubble.node--plrename .node__name { flex: 0 0 100%; }
.is-phone .is-bubble.node--plrename .node__mini {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0;
  border-radius: 50%;
  background: #111;
  color: #fff;
  opacity: 1;
}
.is-phone .is-bubble.node--plrename .node__mini svg { width: 18px; height: 18px; }
/* Add to playlist: a playlist the song is already in is a black circle (the others stay white) */
.is-phone .node.is-bubble.node--plpick.is-on { border-color: transparent; background: #3f7dff; color: #fff; box-shadow: none; }
.is-phone .is-bubble.node--plpick.is-on .node__name, .is-phone .is-bubble.node--plpick.is-on .node__icon { color: #fff; }
/* Add to playlist: "New playlist" is a blue circle */
.is-phone .node.is-bubble.node--plnew { border-color: transparent; background: #3f7dff; color: #fff; box-shadow: none; }
.is-phone .is-bubble.node--plnew .node__name, .is-phone .is-bubble.node--plnew .node__icon { color: #fff; }
/* Full song: Apple Music's red circle with its white note (the label below it, like the other song actions) */
.is-phone .node.is-bubble.node--fullsong { border-color: transparent; background: linear-gradient(180deg, #fa5b74, #fa2d48); color: #fff; box-shadow: 0 3px 12px rgba(250, 45, 72, 0.35); }
.is-phone .is-bubble.node--fullsong .node__icon, .is-phone .is-bubble.node--fullsong .node__icon svg { width: 30px; height: 30px; }
/* A news story's bigger circle: more of the headline, without its source and date */
.is-phone .node.is-bubble.is-news { padding: 12px; }
.is-phone .is-bubble.is-news .node__name { font-size: 8.5pt; -webkit-line-clamp: 6; line-clamp: 6; }
.is-phone .is-bubble.is-news .node__meta { display: none; }
/* A bio's facts (Born, From, Active…): their text the same size as a news headline */
.is-phone .is-bubble.node--fact .node__name { font-size: 8.5pt; }
/* …and what each is (Born, From, Website…) goes below its circle, like every other circle's label */
/* (No " ↗" after a link's label here: the tree's hover mark took room even unseen, pushing the label off centre.) */
.is-phone .is-bubble.node--link .node__meta::after { content: none; }
.is-phone .node.is-bubble.node--fact { overflow: visible; }
.is-phone .is-bubble.node--fact .node__meta {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  width: calc(100% + 34px);
  transform: translateX(-50%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: 9pt;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
/* A song's actions (.is-icon): a standard circle like the genres, the icon in it in white, and its label below it
   (Share, Radio…) */
.is-phone .node.is-bubble.is-icon { overflow: visible; }
.is-phone .is-bubble.is-icon .node__name {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  width: calc(100% + 34px);
  max-width: none;
  transform: translateX(-50%);
  font-size: 9pt;
  line-height: 1.15;
  color: var(--ink);
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
/* …a song's own actions' labels (Full song, Album, Artist, Share, Radio, Add to playlist, Similar, Discover) are 13.5px
   on the screen on every device (on tablets and desktop the view is scaled up by --ps, so they're set that much
   smaller to come out the same) */
.is-phone .is-bubble.is-icon:is(.node--fullsong, .node--toalbum, .node--toartist, .node--share, .node--station, .node--playlist, .node--similar, .node--discover, .node--plshare, .node--pldelete, .node--subscribe) .node__name { font-size: calc(13.5px / var(--ps, 1)); }
.is-phone .is-bubble.is-icon .node__icon, .is-phone .is-bubble.is-icon .node__icon svg { width: 25px; height: 25px; }
.is-phone .is-bubble.is-icon .node__icon { position: relative; z-index: 1; color: #fff; }
/* A song's own actions: 28 x 28 on the screen on every device (on tablets and desktop the view is scaled up by
   --ps, set by muse.js, so they're drawn that much smaller to come out the same) */
.is-phone .is-bubble.is-icon:is(.node--toalbum, .node--toartist, .node--share, .node--station, .node--playlist, .node--similar, .node--discover, .node--plshare, .node--pldelete, .node--subscribe) .node__icon,
.is-phone .is-bubble.is-icon:is(.node--toalbum, .node--toartist, .node--share, .node--station, .node--playlist, .node--similar, .node--discover, .node--plshare, .node--pldelete, .node--subscribe) .node__icon svg { width: calc(28px / var(--ps, 1)); height: calc(28px / var(--ps, 1)); }
/* An open playlist: its name under the centre circle renames it (a tap), so a small pencil follows the name */
.is-phone .node.node--pl-list.is-center { cursor: pointer; }
.is-phone .node--pl-list.is-center .node__name::after {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.35em;
  vertical-align: -0.02em;
  background: currentColor;
  opacity: 0.7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 4.5l4 4L8.5 19.5l-5 1 1-5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 4.5l4 4L8.5 19.5l-5 1 1-5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Lists to read (.is-row): the circles view chosen on a larger screen ---
   A bio's facts, news stories and a tour's details are full lines under the centre's name, one beneath another:
   a small label, then all of the text. (In a circle the same text is cut to a few words.) */
.is-phone .node.is-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 14px;
  border: 1px solid rgba(120, 190, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  text-align: left;
  white-space: normal;
}
.is-phone .is-row .node__name {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  color: var(--ink);
  text-shadow: none;
}
.is-phone .is-row .node__meta { font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-shadow: none; }
.is-phone a.node.is-row .node__name { text-decoration: underline; text-decoration-color: rgba(120, 190, 255, 0.5); text-underline-offset: 3px; }
/* (A bio's About text is the same on tablets and desktop as on a phone: its first lines under the name; a tap shows it all.) */

/* A playlist's song being dragged to a new place: lifted above the rest */
.is-phone .node.is-dragging { z-index: 6; filter: brightness(1.15); cursor: grabbing; }
.is-phone .node.is-dragging .node__art { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(255, 255, 255, 0.9); }

/* --- Over the circles --- */
/* Create playlist and Rename playlist: a panel that slides up from the foot of the screen (over a dimmed page) to
   type in; it rides above the keyboard (--lift, set by muse.js) */
.phone-create { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, 0); transition: background-color 0.22s ease-in; }
.phone-create[hidden] { display: none; }
.phone-create.is-open { background: rgba(0, 0, 0, 0.45); transition: background-color 0.2s ease-out; }
/* The panel comes up like an iPhone's sheets and menus: on a spring, which carries it a little past its place
   and settles it back (--pop: a damped spring, about 8% over; where linear() isn't known, a curve that overshoots
   once). It leaves quickly, without the bounce. */
.phone-create {
  --pop: cubic-bezier(0.3, 1.35, 0.5, 1);
  --pop: linear(0, 0.023, 0.083, 0.168, 0.269, 0.377, 0.486, 0.591, 0.689, 0.776, 0.852, 0.916, 0.968, 1.009, 1.04, 1.061, 1.075, 1.082, 1.084, 1.081, 1.076, 1.069, 1.06, 1.051, 1.042, 1.033, 1.025, 1.018, 1.012, 1.007, 1.002, 0.999, 0.996, 0.995, 0.994, 0.993, 0.993, 0.993, 0.994, 0.994, 1);
}
.phone-create__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--lift, 0px);
  padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: #fff;
  color: #111;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
  transform: translateY(105%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 1, 1), bottom 0.2s;
  will-change: transform;
}
/* (More of the sheet below its foot, so nothing shows under it while the spring has it past its place.) */
.phone-create__panel::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 90px; background: inherit; }
.phone-create.is-open .phone-create__panel { transform: none; transition: transform 0.5s var(--pop), bottom 0.2s; }
.phone-create__title { margin: 0; font-size: 20px; font-weight: 600; }
.phone-create__sub { margin: 4px 0 0; font-size: 14px; color: #555; }
.phone-create__sub[hidden], .phone-create__example[hidden] { display: none; }
/* A menu in the panel (Discover's Steer): its choices as a list of buttons, one tap each, above the box */
.phone-create__choices { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.phone-create__choices[hidden] { display: none; }
.phone-create__choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  background: #eef1f6;
  color: #111;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.phone-create__choice::after { content: "›"; font-size: 22px; line-height: 1; color: #8a8f99; }
.phone-create__choice:hover, .phone-create__choice:active { background: #e2e7f0; }
/* Each choice follows the panel in, one after another, and gives a little under a finger */
.phone-create__choice, .phone-create__btn { transition: transform 0.18s cubic-bezier(0.3, 1.35, 0.5, 1), background-color 0.15s; }
.phone-create__choice:active, .phone-create__btn:active { transform: scale(0.96); transition-duration: 0.06s; }
.phone-create.is-open .phone-create__choice { animation: choice-in 0.36s var(--pop) both; animation-delay: calc(20ms + var(--i, 0) * 28ms); }
@keyframes choice-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .phone-create.is-open .phone-create__choice { animation: none; } .phone-create__choice, .phone-create__btn { transition: none; } }
/* The box to type in: the search's navy pill, white text, and its microphone (speak instead of typing: the same
   recording strip as the search's, Done in a black circle at the end) */
.phone-create__field { position: relative; margin-top: 16px; }
.phone-create__box {
  width: 100%;
  height: 56px;
  box-sizing: border-box;
  padding: 0 60px 0 20px;  /* the microphone */
  border: 0;
  border-radius: 28px;
  outline: 0;
  background: #152a4f;
  color: #fff;
  font: inherit;
  font-size: 17px;  /* 16px or more: iPhones zoom in on smaller text */
}
.phone-create__box::placeholder { color: rgba(255, 255, 255, 0.55); }
.phone-create__box:focus-visible { box-shadow: 0 0 0 3px rgba(63, 125, 255, 0.35); }
.phone-create__field .search__mic { right: 8px; }
.phone-create__field:has(.search__mic[hidden]) .phone-create__box { padding-right: 20px; }
.phone-create__field .dictate { left: 16px; }
.phone-create__example { margin: 10px 0 0; padding: 6px 2px; border: 0; background: none; color: #3f7dff; font: inherit; font-size: 14px; }
.phone-create__buttons { display: flex; gap: 12px; margin-top: 18px; }
.phone-create__btn { flex: 1; height: 48px; border: 0; border-radius: 24px; background: #eef1f6; color: #111; font: inherit; font-size: 16px; font-weight: 600; }
.phone-create__btn--go { background: #111; color: #fff; }
@media (prefers-reduced-motion: reduce) { .phone-create, .phone-create.is-open, .phone-create__panel, .phone-create.is-open .phone-create__panel, .is-phone-chosen .phone-create.is-open .phone-create__panel { transition: none; } }
/* The full text of a circle that only tells something (a bio fact, the whole About), over the bottom of the
   screen; a tap closes it */
.phone-sheet {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  max-height: 55vh;
  overflow-y: auto;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(10, 20, 60, 0.96);
  border: 1px solid var(--hairline);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-line;
  z-index: 6;
}
.phone-sheet[hidden] { display: none; }
/* Tablets and desktop: the panels are a card in the middle of the screen, not the full width of it */
.is-phone-chosen .phone-create__panel {
  left: 50%;
  right: auto;
  bottom: auto;
  top: calc(50% - var(--lift, 0px) / 2);
  width: min(440px, calc(100vw - 32px));
  padding-bottom: 22px;
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.86);  /* it pops up from a little smaller, on the same spring */
  transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1), opacity 0.18s, top 0.2s;
}
.is-phone-chosen .phone-create__panel::after { content: none; }
.is-phone-chosen .phone-create.is-open .phone-create__panel { opacity: 1; transform: translate(-50%, -50%); transition: transform 0.5s var(--pop), opacity 0.16s, top 0.2s; }
.is-phone-chosen .phone-sheet {
  left: 50%;
  right: auto;
  bottom: 24px;
  width: min(520px, calc(100vw - 32px));
  transform: translateX(-50%);
}

/* --- Music videos ---
   A video's circle is its thumbnail alone (its title and year below it, as a song's name is). */
/* The video player: the video at 16:9 over a darkened page, its title and artist under it, ✕ above its corner */
.video-sheet { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0); transition: background-color 0.2s; }
.video-sheet[hidden] { display: none; }
.video-sheet.is-open { background: rgba(0, 0, 0, 0.82); }
.video-sheet__panel { position: relative; width: min(960px, 100%); opacity: 0; transform: scale(0.94); transition: opacity 0.2s, transform 0.3s cubic-bezier(0.3, 1.25, 0.5, 1); }
.video-sheet.is-open .video-sheet__panel { opacity: 1; transform: none; }
.video-sheet__frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #000; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.video-sheet__video { display: block; width: 100%; height: 100%; background: #000; }
.video-sheet__info { margin-top: 14px; color: #fff; }
.video-sheet__title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.video-sheet__sub { margin: 4px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.6); }
.video-sheet__close {
  position: absolute;
  top: -54px;
  right: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
}
.video-sheet__close:hover { background: rgba(255, 255, 255, 0.24); }
.video-sheet__close:focus-visible { outline: 2px solid rgba(0, 122, 255, 0.7); outline-offset: 2px; }
.video-sheet__close svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .video-sheet, .video-sheet__panel { transition: none; } }
/* The full video (through MusicKit): its own <video> in the frame, and the player's controls under it */
.video-sheet__frame { position: relative; }
.video-sheet__frame [hidden] { display: none; }
.video-sheet__mk { position: absolute; inset: 0; background: #000; }
.video-sheet__mk video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.video-sheet__frame:fullscreen { border-radius: 0; }
.video-sheet__wait { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: rgba(255, 255, 255, 0.7); font-size: 14px; }
.video-sheet__bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: #fff; }
.video-sheet__bar[hidden] { display: none; }
.video-sheet__btn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; }
.video-sheet__btn:hover { background: rgba(255, 255, 255, 0.24); }
.video-sheet__btn:focus-visible { outline: 2px solid rgba(0, 122, 255, 0.7); outline-offset: 2px; }
.video-sheet__btn svg { width: 20px; height: 20px; }
.video-sheet__toggle .vs-play, .video-sheet__bar.is-paused .vs-pause { display: none; }
.video-sheet__bar.is-paused .vs-play { display: block; }
.video-sheet__time { flex: none; min-width: 38px; font-size: 13px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.75); text-align: center; }
.video-sheet__seek { flex: 1; min-width: 0; accent-color: #007efe; cursor: pointer; }
/* A question's button when the answer can't be undone (Delete): red */
.phone-create__btn--danger { background: #e5484d; color: #fff; }
.phone-create__btn--danger:hover { background: #d93d42; }

/* Subscribe (for anyone not on Premium, in every fan-out): the account button's white person on a colour that drifts
   slowly through blues and cyans, to catch the eye: blue, sky blue, cyan, deep blue and back to blue (12 s), its
   glow following. A light sheen over it keeps it looking like the other buttons. Whatever state it's in (hovered,
   pressed, selected), it keeps drifting; with less motion asked for, it stays blue. */
.is-phone .node.is-bubble.node--subscribe,
.is-phone .node.is-bubble.node--subscribe:is(:hover, :active, :focus-visible, .is-selected) {
  border-color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)) #007efe;
  color: #fff;
  box-shadow: 0 3px 12px rgba(0, 126, 254, 0.35);
  animation: subscribe-drift 12s ease-in-out infinite;
}
@keyframes subscribe-drift {
  0%, 100% { background-color: #007efe; box-shadow: 0 3px 14px rgba(0, 126, 254, 0.45); }
  25% { background-color: #00a8f0; box-shadow: 0 3px 14px rgba(0, 168, 240, 0.45); }
  50% { background-color: #00c2d4; box-shadow: 0 3px 14px rgba(0, 194, 212, 0.45); }
  75% { background-color: #2f5bff; box-shadow: 0 3px 14px rgba(47, 91, 255, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .is-phone .node.is-bubble.node--subscribe, .is-phone .node.is-bubble.node--subscribe:is(:hover, :active, :focus-visible, .is-selected) { animation: none; }
}
.is-phone .is-bubble.node--subscribe .node__icon { color: #fff; }