html, body { height: 100%; overflow: hidden; }

:root {
  --gap: 8px;
  --radius: calc(10px * var(--round));
  --float: 14px;
  --bar-height: 84px;
  /* Everything scrollable leaves this much room for the floating bar. */
  --dock-height: calc(var(--bar-height) + var(--float) + 10px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.app {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 19rem minmax(0, 1fr) auto;
  grid-template-rows: 3rem minmax(0, 1fr);
  grid-template-areas: 'top top top' 'library main side';
  height: 100dvh;
  padding: var(--gap);
  background: var(--void);
}

/* Top bar */

.topbar {
  grid-area: top;
  display: grid; align-items: center; gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem) minmax(0, 1fr);
  padding-inline: 0.5rem;
}

.brand { display: inline-flex; align-items: center; gap: 0.625rem; justify-self: start; }

.topbar-center { display: flex; align-items: center; gap: 0.5rem; }

.round-btn {
  flex: none;
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--dusk-raised); color: var(--ash);
  transition: color 0.2s, background-color 0.2s, transform 0.2s var(--ease);
}
.round-btn:hover { color: var(--ink); background: var(--dusk-high); transform: scale(1.05); }
.round-btn[aria-current='page'] { color: var(--ink); }
.round-btn[aria-current='page'] .icon { color: var(--plasma); }

.search {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 0.75rem;
  height: 3rem; padding: 0 1rem;
  background: var(--dusk-raised);
  border-radius: 999px;
  color: var(--ash);
  box-shadow: inset 0 0 0 1px transparent;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.search:hover { background: var(--dusk-high); }
.search:focus-within { background: var(--dusk-high); box-shadow: inset 0 0 0 2px var(--ultraviolet); color: var(--ink); }
.search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; color: var(--ink); }
.search input::placeholder { color: var(--ash); }

.topbar-user { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }

.link-btn { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ash); font-weight: 700; transition: color 0.15s, transform 0.15s; }
.link-btn:hover { color: var(--ink); transform: scale(1.04); }

.btn-light { background: var(--ink); color: var(--void); font-weight: 700; }
.btn-light:hover { transform: scale(1.04); }
.btn-small { min-height: 2rem; padding-inline: 1rem; font-size: var(--step--1); }
.btn-small .icon { width: 1rem; height: 1rem; }
.btn-wide { width: 100%; }

.avatar {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--ultraviolet); color: var(--on-accent);
  font-weight: 700;
  box-shadow: 0 0 0 4px var(--dusk-raised);
  overflow: hidden;
  transition: transform 0.2s var(--ease);
}
button.avatar:hover { transform: scale(1.06); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-big { flex: none; width: 7rem; height: 7rem; font-size: var(--step-3); box-shadow: none; }

/* Panels */

.library, .main, .side {
  min-height: 0;
  background: var(--dusk);
  border-radius: var(--radius);
}

/* Your Library */

.library { grid-area: library; overflow-y: auto; padding: 0.5rem 0.5rem var(--dock-height); }

.lib-head { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; padding: 0 0.5rem; }
.lib-head h2 { display: flex; align-items: center; gap: 0.75rem; font-size: var(--step-0); font-weight: 700; color: var(--ash); }

.lib-prompts { display: grid; gap: 0.75rem; }
.lib-prompt { display: grid; justify-items: start; gap: 0.25rem; padding: 1rem 1.125rem; background: var(--dusk-raised); border-radius: var(--radius); }
.lib-prompt h3 { font-size: var(--step-0); font-weight: 700; }
.lib-prompt .btn .icon { width: 1rem; height: 1rem; }
.lib-prompt p { color: var(--ash); font-size: var(--step--1); margin-bottom: 0.625rem; }

.lib-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; border-radius: calc(6px * var(--round)); transition: background-color 0.15s; }
.lib-item:hover { background: var(--dusk-raised); }
.lib-item[aria-current='page'] { background: var(--dusk-high); }
.lib-art { flex: none; display: block; width: 3rem; height: 3rem; }
.lib-names { min-width: 0; display: grid; }
.lib-names b, .lib-names small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-names b { font-weight: 600; }
.lib-names small { color: var(--ash); font-size: var(--step--1); }

.liked-art {
  flex: none;
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: calc(4px * var(--round));
  background: linear-gradient(135deg, color-mix(in srgb, var(--ultraviolet) 60%, #0000d0), var(--ultraviolet) 55%, var(--plasma));
  color: var(--on-accent);
}
.liked-art-big { width: 100%; height: 100%; border-radius: 0; }
.liked-art-big .icon { width: 38%; height: 38%; }

.cover-img, .mosaic { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.mosaic { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.lib-art .cover-img, .lib-art .mosaic, .lib-art .cover-empty { border-radius: calc(4px * var(--round)); }
.cover-empty { display: grid; place-items: center; width: 100%; height: 100%; background: var(--dusk-high); color: var(--ash); }
.cover-empty .icon { width: 40%; height: 40%; }

/* Main */

.main { grid-area: main; position: relative; overflow-y: auto; outline: none; }

.main-tint {
  --tint: var(--ultraviolet);
  position: absolute; inset: 0 0 auto; height: 22rem;
  background: linear-gradient(var(--tint), transparent);
  opacity: var(--tint-strength);
  pointer-events: none;
  transition: background 0.5s;
}

.stage { position: relative; padding-bottom: var(--dock-height); }

.page { padding: 1.5rem clamp(1rem, 2.5vw, 1.75rem) 0; }
.page-tight { padding-top: 0.5rem; }
.greeting, .page-title { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.15; margin-bottom: 1rem; }
.block-title { font-size: var(--step-2); font-weight: 700; line-height: 1.2; margin-bottom: 0.625rem; }
.hint { color: var(--ash); }

/* Quick tiles */

.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.625rem; }

.quick {
  position: relative;
  display: flex; align-items: center; gap: 0.75rem;
  height: 3.5rem; padding-right: 3.5rem;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius: calc(6px * var(--round)); overflow: hidden;
  cursor: pointer;
  transition: background-color 0.2s;
}
.quick:hover { background: color-mix(in srgb, var(--ink) 20%, transparent); }
.quick > img, .quick > .mosaic, .quick > .cover-img, .quick > .cover-empty, .quick > .liked-art {
  flex: none; width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: 0;
}
.quick-title { min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick.is-current .quick-title { color: var(--plasma); }

/* Cards */

.shelf-block { margin-top: 2rem; }
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.375rem; }
.shelf-head h2 { font-size: var(--step-2); font-weight: 700; line-height: 1.2; }
.shelf-head h2 a:hover { text-decoration: underline; }
.show-all { flex: none; display: inline-flex; align-items: center; gap: 0.125rem; color: var(--ash); font-size: var(--step--1); font-weight: 700; }
.show-all .icon, .side-link .icon { width: 1rem; height: 1rem; transition: transform 0.2s var(--ease); }
.show-all:hover .icon, .side-link:hover .icon { transform: translateX(2px); }
.show-all:hover { color: var(--ink); text-decoration: underline; }

/* Only the first row shows; Show all opens the rest. */
.shelf, .grid {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  margin-inline: -0.75rem;
}
.shelf { grid-template-rows: auto; grid-auto-rows: 0; overflow: hidden; }

.card {
  min-width: 0; padding: 0.75rem;
  border-radius: calc(8px * var(--round));
  cursor: pointer;
  transition: background-color 0.25s;
}
.card:hover { background: var(--dusk-raised); }

.card-art { position: relative; aspect-ratio: 1; margin-bottom: 0.5rem; }
.card-art img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(6px * var(--round)); box-shadow: 0 8px 24px rgb(0 0 0 / 0.5); }
.card-artist .card-art img { border-radius: 50%; }

.card-title { font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card.is-current .card-title { color: var(--plasma); }
.card-sub { color: var(--ash); font-size: var(--step--1); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-sub a:hover, .row-artists a:hover, .row-album a:hover, .bar-artists a:hover, .side-title a:hover { color: var(--ink); text-decoration: underline; }

.verified { display: inline-flex; vertical-align: -0.15em; color: var(--plasma); }
.verified .icon { width: 1em; height: 1em; }

.card-play {
  position: absolute; right: 0.5rem; bottom: 0.5rem;
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--ultraviolet); color: var(--on-accent);
  box-shadow: 0 8px 18px rgb(0 0 0 / 0.5);
  opacity: 0; transform: translateY(0.5rem);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), background-color 0.15s;
}
.card-play:hover { background: color-mix(in srgb, var(--ultraviolet) 82%, #fff); transform: scale(1.06); }
.card:hover .card-play, .quick:hover .card-play, .top-result:hover .card-play,
.card-play:focus-visible, .is-current .card-play { opacity: 1; transform: none; }
.card:hover .card-play:hover, .quick:hover .card-play:hover, .top-result:hover .card-play:hover { transform: scale(1.06); }
.quick .card-play { right: 0.5rem; top: 50%; bottom: auto; width: 2.5rem; height: 2.5rem; margin-top: -1.25rem; }

.card-play .icon-pause, .row-play .icon-pause { display: none; }
.is-playing .card-play .icon-pause, .is-playing .row-play .icon-pause { display: block; }
.is-playing .card-play .icon-play, .is-playing .row-play .icon-play { display: none; }

/* Page headers */

.head, .artist-head {
  position: relative;
  display: flex; align-items: flex-end; gap: 1.5rem;
  min-height: 17rem;
  padding: 3rem clamp(1rem, 2.5vw, 1.75rem) 1.5rem;
}
.head-cover {
  flex: none;
  width: clamp(8rem, 16vw, 14rem); aspect-ratio: 1;
  border-radius: calc(6px * var(--round)); overflow: hidden;
  box-shadow: 0 12px 50px rgb(0 0 0 / 0.6);
}
.head-cover.is-round { border-radius: 50%; }
.head-text { position: relative; min-width: 0; }
.head-kind { font-size: var(--step--1); font-weight: 600; }
.head-text h1 {
  font-size: clamp(2.25rem, 6vw, 5.5rem); font-weight: 700; line-height: 1.02;
  letter-spacing: -0.02em; margin: 0.25rem 0 0.5rem;
  overflow-wrap: anywhere;
}
.head-meta { color: color-mix(in srgb, var(--ink) 80%, transparent); font-size: var(--step--1); }
.head-verified { display: flex; align-items: center; gap: 0.375rem; font-size: var(--step--1); font-weight: 600; }
.head-verified .icon { color: var(--plasma); }

.artist-head.has-banner { min-height: 24rem; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.artist-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.artist-head.has-banner::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(transparent 35%, rgb(0 0 0 / 0.75));
}
.artist-head.has-banner .head-text { z-index: 1; }

.actions { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0 1.25rem; }
.big-play {
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: var(--ultraviolet); color: var(--on-accent);
  transition: transform 0.2s var(--ease), background-color 0.15s;
}
.big-play:hover { background: color-mix(in srgb, var(--ultraviolet) 82%, #fff); transform: scale(1.06); }
.big-play .icon { width: 1.5rem; height: 1.5rem; }
.icon-btn-big .icon { width: 1.75rem; height: 1.75rem; }
.icon-btn-big { width: 3rem; height: 3rem; }

/* Track rows */

.rows-head, .row {
  display: grid; align-items: center; column-gap: 1rem;
  grid-template-columns: 1.5rem minmax(0, 4fr) minmax(0, 3fr) 2.5rem 3rem 2.5rem;
  padding-inline: 0.75rem;
}
.rows-head {
  height: 2.25rem; margin-bottom: 0.5rem;
  color: var(--ash); font-size: var(--step--1);
  border-bottom: 1px solid var(--line);
}
.rows-head > :first-child { text-align: center; }
.rows-head-time { justify-self: end; }
.rows-head-time .icon { width: 1rem; height: 1rem; }

.row { height: 3.5rem; border-radius: calc(6px * var(--round)); cursor: pointer; transition: background-color 0.15s; }
.row:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }

.row-index { display: grid; place-items: center; color: var(--ash); font-variant-numeric: tabular-nums; }
.row-index > * { grid-area: 1 / 1; }
.row-play { display: none; color: var(--ink); }
.row-play .icon { width: 1rem; height: 1rem; }
.row:hover .row-number, .row:hover .eq { display: none; }
.row:hover .row-play { display: block; }

.row-main { min-width: 0; display: flex; align-items: center; gap: 0.75rem; }
.row-main img { flex: none; width: 2.5rem; height: 2.5rem; object-fit: cover; border-radius: calc(4px * var(--round)); }
.row-names { min-width: 0; display: grid; flex: 1; }
.row-title { text-align: left; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.is-current .row-title { color: var(--plasma); }
.row-artists, .row-album { color: var(--ash); font-size: var(--step--1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-time { color: var(--ash); font-size: var(--step--1); text-align: right; font-variant-numeric: tabular-nums; }
.row-like, .row-more { opacity: 0; transition: opacity 0.15s, color 0.15s; }
.row:hover .row-like, .row:hover .row-more,
.row-like:focus-visible, .row-more:focus-visible, .row-like[aria-pressed='true'] { opacity: 1; }

.eq { display: none; align-items: flex-end; gap: 2px; height: 0.875rem; }
.eq i { width: 3px; height: 100%; background: var(--plasma); transform: scaleY(0.3); transform-origin: bottom; }
.row.is-current .row-number { display: none; }
.row.is-current .eq { display: flex; }
.row.is-current:hover .eq { display: none; }
.row.is-playing .eq i { animation: eq 0.9s ease-in-out infinite alternate; }
.row.is-playing .eq i:nth-child(2) { animation-delay: -0.45s; }
.row.is-playing .eq i:nth-child(3) { animation-delay: -0.2s; }
/* Transform, not height: animating height repaints every cover in the list. */
@keyframes eq { from { transform: scaleY(0.2); } to { transform: scaleY(1); } }

/* Search */

.browse-next { margin-top: 2rem; }
.browse { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem; }
.browse-tile {
  position: relative; overflow: hidden;
  aspect-ratio: 1.6; padding: 1rem;
  border-radius: calc(8px * var(--round));
  font-size: var(--step-2); font-weight: 700; line-height: 1.1;
  transition: transform 0.25s var(--ease);
}
.browse-tile:hover { transform: scale(1.02); }
.browse-tile span { position: relative; z-index: 1; display: block; max-width: 62%; overflow-wrap: anywhere; }
.browse-tile img {
  position: absolute; right: -0.75rem; bottom: -0.5rem;
  width: 45%; aspect-ratio: 1; object-fit: cover;
  border-radius: calc(4px * var(--round));
  transform: rotate(24deg);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.5);
}

.search-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.5rem; }
.search-top .rows-head { display: none; }
.search-top .row { grid-template-columns: minmax(0, 1fr) 2.5rem 3rem 2.5rem; }
.search-top .row-index, .search-top .row-album { display: none; }

.top-result {
  position: relative;
  padding: 1.25rem;
  background: var(--dusk-raised);
  border-radius: calc(8px * var(--round));
  cursor: pointer;
  transition: background-color 0.25s;
}
.top-result:hover { background: var(--dusk-high); }
.top-result img { width: 6rem; height: 6rem; object-fit: cover; border-radius: calc(6px * var(--round)); box-shadow: 0 8px 24px rgb(0 0 0 / 0.5); }
.top-result img.is-round { border-radius: 50%; }
.top-result h3 {
  margin-top: 1rem; font-size: var(--step-2); font-weight: 700; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.top-result p { color: var(--ash); margin-top: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-result .card-play { right: 1.25rem; bottom: 1.25rem; }

/* Artist about, playlist ideas, account */

.about { display: flex; gap: 1.25rem; align-items: flex-start; max-width: 46rem; padding: 1rem; background: var(--dusk-raised); border-radius: calc(8px * var(--round)); }
.about img { flex: none; width: 7rem; height: 7rem; object-fit: cover; border-radius: 50%; }
.about p { color: var(--ash); white-space: pre-line; }

.ideas { margin-top: 0.75rem; }
.idea { display: flex; align-items: center; gap: 0.75rem; padding: 0.375rem 0.75rem; border-radius: calc(6px * var(--round)); }
.idea:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.idea img { width: 2.5rem; height: 2.5rem; object-fit: cover; border-radius: calc(4px * var(--round)); }
.idea b, .idea small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idea b { font-weight: 500; }
.idea small { color: var(--ash); font-size: var(--step--1); }

.account { max-width: 30rem; }
.account-avatar { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.5rem; }
.account-avatar .block-title { margin-bottom: 0.625rem; }
.account-avatar-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.account-avatar-actions label { cursor: pointer; }
.account-avatar-actions label:focus-within { outline: 2px solid var(--plasma); outline-offset: 2px; }

.crop { display: grid; justify-items: center; gap: 0.875rem; }
.crop canvas { width: 17.5rem; height: 17.5rem; border-radius: 50%; background: #000; cursor: grab; touch-action: none; }
.crop canvas:active { cursor: grabbing; }
.crop .range { width: 100%; flex: none; }
.account-form { display: grid; gap: 0.75rem; justify-items: start; margin-top: 2rem; }
.account-form .field { width: 100%; }
.account-form .form-error { margin: 0; }

.empty {
  display: grid; justify-items: start; gap: 0.75rem;
  max-width: 34rem; padding: 16vh clamp(1rem, 2.5vw, 1.75rem) 0;
}
.empty .art { width: 9.5rem; height: 9.5rem; margin-left: -1rem; }
.empty h1 { font-size: var(--step-3); font-weight: 700; line-height: 1.1; }
.empty p { color: var(--ash); }
.empty-actions { display: flex; gap: 0.625rem; margin-top: 0.5rem; }

/* Now playing panel */

.side {
  grid-area: side;
  width: 21rem; padding: 0.75rem 1rem var(--dock-height);
  overflow-y: auto;
  animation: side-in 0.35s var(--ease);
}
@keyframes side-in { from { opacity: 0; transform: translateX(1rem); } }

.side-empty { display: grid; justify-items: center; gap: 0.5rem; padding: 2.5rem 0.5rem 0; text-align: center; }
.art-a { stop-color: color-mix(in srgb, var(--ultraviolet) 60%, #2a00ff); }
.art-b { stop-color: var(--ultraviolet); }
.art-c { stop-color: color-mix(in srgb, var(--ultraviolet) 15%, #fff); }
.art-d { stop-color: color-mix(in srgb, var(--ultraviolet) 60%, #fff); }
.art-dust { fill: var(--plasma); }
.side-empty .art { width: 100%; max-width: 15rem; height: auto; }
.side-empty h2 { font-size: var(--step-2); font-weight: 700; line-height: 1.2; }
.side-empty .btn { margin-top: 0.75rem; }

.side-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 2.5rem; margin-bottom: 0.5rem; font-weight: 700; }
.side-head a, .side-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-head a:hover { text-decoration: underline; }

.side-cover { display: block; width: 100%; aspect-ratio: 1; }
.side-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(8px * var(--round)); box-shadow: 0 10px 40px rgb(0 0 0 / 0.5); }

.side-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin: 1rem 0; }
.side-title > div { min-width: 0; }
.side-title h2 { font-size: var(--step-2); font-weight: 700; line-height: 1.2; }
.side-title p { color: var(--ash); }

.side-card { margin-top: 1rem; padding: 1rem; background: var(--dusk-raised); border-radius: calc(8px * var(--round)); overflow: hidden; }
.side-card h3 { font-size: var(--step-0); font-weight: 700; }
.side-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.side-link { display: inline-flex; align-items: center; color: var(--ash); font-size: var(--step--1); font-weight: 700; }
.side-link:hover { color: var(--ink); text-decoration: underline; }

.side-artist { padding: 0; }
.side-artist-photo { position: relative; display: block; }
.side-artist-photo img { width: 100%; height: 11rem; object-fit: cover; display: block; }
.side-artist-photo span {
  position: absolute; inset: 0 0 auto; padding: 0.75rem 1rem;
  font-weight: 700;
  background: linear-gradient(rgb(0 0 0 / 0.65), transparent);
}
.side-artist-label { padding: 0.875rem 1rem 0; font-weight: 700; }
.side-artist-body { padding: 0.875rem 1rem 1rem; }
.side-artist-body h3 a:hover { text-decoration: underline; }
.side-artist-body p {
  margin-top: 0.25rem; color: var(--ash); font-size: var(--step--1);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.credit { display: flex; align-items: flex-start; gap: 0.75rem; margin-top: 0.75rem; }
.credit > .icon { width: 1.125rem; height: 1.125rem; margin-top: 0.1875rem; color: var(--plasma); }
.credit > div { min-width: 0; }
.credit span { display: block; color: var(--ash); font-size: var(--step--1); }
.credit b { font-weight: 500; }
.credit a:hover { text-decoration: underline; }

.side-label { margin: 1rem 0 0.375rem; font-size: var(--step-0); font-weight: 700; }
.queue-item { display: flex; align-items: center; }
.queue-jump { flex: 1; min-width: 0; width: 100%; display: flex; align-items: center; gap: 0.625rem; padding: 0.375rem; border-radius: calc(6px * var(--round)); text-align: left; transition: background-color 0.15s; }
.queue-jump:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.queue-jump img { width: 3rem; height: 3rem; object-fit: cover; border-radius: calc(4px * var(--round)); }
.queue-jump span { min-width: 0; display: grid; }
.queue-jump b, .queue-jump small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-jump b { font-weight: 500; }
.queue-jump small { color: var(--ash); font-size: var(--step--1); }

/* Floating player bar: frosted glass, clear of the screen edges */

.bar {
  position: fixed; left: var(--float); right: var(--float); bottom: var(--float); z-index: 40;
  display: grid; align-items: center; gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 38rem) minmax(0, 1fr);
  height: var(--bar-height); padding: 0 1rem 0 0.75rem;
  background: color-mix(in srgb, var(--dusk) var(--bar-glass), transparent);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: calc(24px * var(--round));
  box-shadow: 0 16px 44px rgb(0 0 0 / 0.55);
  transition: box-shadow 0.6s var(--ease), border-color 0.6s var(--ease);
}
.bar.is-playing { border-color: color-mix(in srgb, var(--plasma) 30%, transparent); box-shadow: 0 16px 44px rgb(0 0 0 / 0.55), 0 0 44px color-mix(in srgb, var(--ultraviolet) 28%, transparent); }

.bar-track { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.bar-art { flex: none; transition: transform 0.25s var(--ease); }
.bar-art:hover { transform: scale(1.05); }
.bar-art img { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: calc(14px * var(--round)); animation: art-in 0.45s var(--ease); }
@keyframes art-in { from { opacity: 0; transform: scale(0.85); } }
.bar-names { min-width: 0; }
.bar-like, .bar-add { flex: none; }
.bar-like { margin-right: -0.5rem; }
.bar-title, .bar-artists { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-title { font-weight: 600; line-height: 1.3; }
.bar-artists { color: var(--ash); font-size: var(--step--1); line-height: 1.3; }
.bar-empty { padding-left: 0.5rem; color: var(--ash); }

.bar-center { display: grid; gap: 0.125rem; min-width: 0; }
.bar-controls { display: flex; align-items: center; justify-content: center; gap: 0.25rem; }
.bar-controls .icon-btn { width: 2.25rem; height: 2.25rem; transition: color 0.2s, background-color 0.2s, transform 0.2s var(--ease); }
.bar-controls .icon-btn:hover { transform: scale(1.08); background: none; }
.bar-controls .icon-btn:active { transform: scale(0.94); }

.bar-play {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; margin-inline: 0.5rem;
  border-radius: 50%;
  background: var(--ink); color: var(--void);
  transition: transform 0.2s var(--ease), box-shadow 0.3s;
}
.bar-play:hover { transform: scale(1.08); box-shadow: 0 0 22px color-mix(in srgb, var(--ultraviolet) 80%, transparent); }
.bar-play:active { transform: scale(0.94); }

.repeat { position: relative; }
.repeat[data-mode='one']::after {
  content: '1';
  position: absolute; right: 0.0625rem; top: 0.0625rem;
  width: 0.875rem; height: 0.875rem; border-radius: 50%;
  background: var(--plasma); color: #000;
  font-size: 0.625rem; font-weight: 700; line-height: 0.875rem; text-align: center;
}

.bar-progress { display: flex; align-items: center; gap: 0.5rem; }
.bar-time { flex: none; min-width: 2.25rem; color: var(--ash); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.bar-time:first-child { text-align: right; }

.bar-tools { display: flex; align-items: center; justify-content: flex-end; gap: 0.125rem; }
.bar-tools .icon-btn { width: 2.25rem; height: 2.25rem; }
.bar-tools .icon-btn:hover { background: none; }

/* One thin line for progress and volume */

.range {
  --level: 0%;
  flex: 1; min-width: 0;
  height: 1rem; margin: 0;
  appearance: none; background: none; cursor: pointer;
}
.range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--ink) var(--level), color-mix(in srgb, var(--ink) 22%, transparent) var(--level));
}
.range:hover::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--ultraviolet) var(--level), color-mix(in srgb, var(--ink) 22%, transparent) var(--level));
}
.range::-moz-range-track { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--ink); }
.range:hover::-moz-range-progress { background: var(--ultraviolet); }
.range::-webkit-slider-thumb {
  appearance: none; width: 12px; height: 12px; margin-top: -4px;
  border-radius: 50%; background: var(--ink);
  opacity: 0; transition: opacity 0.15s;
}
.range::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--ink); opacity: 0; transition: opacity 0.15s; }
.range:hover::-webkit-slider-thumb, .range:focus-visible::-webkit-slider-thumb { opacity: 1; }
.range:hover::-moz-range-thumb, .range:focus-visible::-moz-range-thumb { opacity: 1; }
.volume { flex: none; width: 6rem; }

/* Full screen */

.horizon-view {
  position: fixed; inset: 0; z-index: 30;
  background: #000;
  color: #fff;
  animation: horizon-in 0.4s var(--ease);
}
@keyframes horizon-in { from { opacity: 0; transform: scale(1.04); } }
.horizon-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.horizon-close { position: absolute; top: 1rem; left: 1rem; z-index: 1; }
.horizon-copy {
  position: absolute; left: clamp(1.25rem, 4vw, 3.5rem); bottom: calc(var(--dock-height) + 1.5rem);
  width: min(46%, 36rem);
}
.horizon-copy h2 {
  font: 800 clamp(3.25rem, 8vw, 7.5rem) / 0.86 var(--brand);
  text-wrap: balance;
  text-shadow: 0 0 24px #000;
}
.horizon-version { margin-top: 0.75rem; color: var(--plasma); font-size: var(--step-1); }
.horizon-artists { margin-top: 0.25rem; color: var(--ash); font-size: var(--step-1); }

/* Sign in */

.auth {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: 1rem; overflow-y: auto;
  background: radial-gradient(60rem 40rem at 50% -10%, color-mix(in srgb, var(--ultraviolet) 45%, transparent), transparent), var(--void);
}
.auth-card {
  display: grid; gap: 1rem; justify-items: center;
  width: min(27rem, 100%); padding: 2.5rem 2rem;
  background: color-mix(in srgb, var(--dusk) 80%, transparent);
  border: 1px solid var(--line);
  border-radius: calc(16px * var(--round));
}
.auth-brand { display: flex; align-items: center; gap: 0.625rem; }
.auth-card h1 { font-size: var(--step-3); font-weight: 700; line-height: 1.1; text-align: center; }
.auth-card form { display: grid; gap: 0.875rem; width: 100%; margin-top: 0.5rem; }
.auth-card .form-error { margin: 0; min-height: 0; }
.input-wrap { position: relative; display: block; }
.input-wrap > .icon { position: absolute; left: 0.75rem; top: 50%; width: 1.125rem; height: 1.125rem; margin-top: -0.5625rem; color: var(--ash); pointer-events: none; }
.input-wrap .input { padding-left: 2.5rem; }
.input-wrap:focus-within > .icon { color: var(--plasma); }
.auth-switch { color: var(--ash); }
.auth-switch a { color: var(--ink); font-weight: 700; text-decoration: underline; }
.auth-back { color: var(--ash); font-size: var(--step--1); }
.auth-back:hover { color: var(--ink); }

/* Appearance */

.appearance { max-width: 56rem; }
.appearance section { margin-top: 2rem; }
.appearance .block-title { margin-bottom: 0.875rem; }

.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.75rem; }
.theme-card { position: relative; min-width: 0; }
.theme-card > button:first-child { display: grid; gap: 0.5rem; width: 100%; text-align: left; font-weight: 600; }
.theme-card > button:first-child > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-sample {
  position: relative; display: block; overflow: hidden;
  height: 5rem;
  border-radius: calc(10px * var(--round));
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 0.15s, transform 0.2s var(--ease);
}
.theme-sample i { position: absolute; left: 0.625rem; bottom: 0.625rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; }
.theme-sample b { position: absolute; left: 0.625rem; top: 0.75rem; width: 55%; height: 0.375rem; border-radius: 3px; opacity: 0.75; }
.theme-sample u { position: absolute; left: 0.625rem; top: 1.5rem; width: 35%; height: 0.375rem; border-radius: 3px; opacity: 0.4; }
.theme-card:hover .theme-sample { transform: translateY(-2px); }
button[aria-pressed='true'] .theme-sample { box-shadow: 0 0 0 2px var(--plasma); }
.theme-delete { position: absolute; right: 0.25rem; top: 0.25rem; width: 2rem; height: 2rem; background: var(--dusk-high); }
.theme-delete .icon { width: 1rem; height: 1rem; }

.theme-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; }
.theme-field { display: grid; gap: 0.5rem; min-width: 0; }
.theme-field > span { display: flex; justify-content: space-between; gap: 1rem; color: var(--ash); font-size: var(--step--1); }
.theme-field output { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.theme-color { display: flex; align-items: center; gap: 0.625rem; }
.theme-color input[type='color'] {
  flex: none; width: 2.75rem; height: 2.75rem; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: calc(8px * var(--round));
  cursor: pointer; overflow: hidden;
}
.theme-color input[type='color']::-webkit-color-swatch-wrapper { padding: 0; }
.theme-color input[type='color']::-webkit-color-swatch { border: 0; }
.theme-fonts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.theme-fonts button { padding: 0.4375rem 0.875rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.15s; }
.theme-fonts button[aria-pressed='true'] { background: var(--ultraviolet); color: var(--on-accent); box-shadow: none; }
.theme-warning { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; color: var(--danger); font-size: var(--step--1); }
.theme-warning .icon { width: 1rem; height: 1rem; }
.theme-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.5rem; }

/* A liked heart is the one thing on the page that isn't violet. */
[data-like][aria-pressed='true'] { color: #ff0000; }

/* Second window */

.window-block {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: 1rem;
  background: radial-gradient(60rem 40rem at 50% -10%, color-mix(in srgb, var(--ultraviolet) 40%, transparent), transparent), var(--void);
}
.window-block-card {
  display: grid; justify-items: center; gap: 0.75rem;
  width: min(27rem, 100%); padding: 2.5rem 2rem;
  background: color-mix(in srgb, var(--dusk) 80%, transparent);
  border: 1px solid var(--line);
  border-radius: calc(16px * var(--round));
  text-align: center;
}
.window-block-icon { color: var(--danger); }
.window-block-icon .icon { width: 2.5rem; height: 2.5rem; }
.window-block-card h1 { font-size: var(--step-2); font-weight: 700; line-height: 1.2; }
.window-block-card .btn { margin-top: 0.75rem; }

/* Menus */

.menu {
  position: fixed; z-index: 60;
  display: grid; width: 15.5rem; max-height: 60vh; overflow-y: auto;
  padding: 0.25rem;
  background: var(--dusk-high);
  border-radius: calc(6px * var(--round));
  box-shadow: 0 16px 24px rgb(0 0 0 / 0.5);
  animation: menu-in 0.14s var(--ease);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
.menu button {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem; border-radius: calc(4px * var(--round)); text-align: left;
}
.menu button .icon { width: 1.125rem; height: 1.125rem; color: var(--ash); fill: none; transition: color 0.12s; }
.menu button:hover .icon, .menu button:focus-visible .icon { color: var(--plasma); }
.menu button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu button:hover, .menu button:focus-visible { background: color-mix(in srgb, var(--ink) 10%, transparent); outline: none; }
.menu hr { width: 100%; margin: 0.25rem 0; border: 0; border-top: 1px solid var(--line); }
.menu p { padding: 0.25rem 0.75rem; color: var(--ash); font-size: var(--step--1); }

.tabs { display: none; }

/* Medium screens */

@media (max-width: 1350px) {
  .app { grid-template-columns: 15rem minmax(0, 1fr) auto; }
  .side { width: 18.5rem; }
}

@media (max-width: 1099px) {
  .app { grid-template-columns: 15rem minmax(0, 1fr); grid-template-areas: 'top top' 'library main'; }
  .side {
    position: fixed; z-index: 35; top: var(--gap); right: var(--gap); bottom: var(--gap);
    width: min(21rem, calc(100vw - 2 * var(--gap)));
    box-shadow: 0 0 40px rgb(0 0 0 / 0.7);
  }
  .rows-head, .row { grid-template-columns: 1.5rem minmax(0, 1fr) 2.5rem 3rem 2.5rem; }
  .rows-head-album, .row-album { display: none; }
  .search-top { grid-template-columns: minmax(0, 1fr); }
  .volume { width: 4.5rem; }
}

/* Phones: the library becomes a tab, and the bar a compact floating strip */

@media (max-width: 760px) {
  :root { --bar-height: 64px; --float: 8px; --tabs-height: 3.75rem; --dock-height: calc(var(--bar-height) + var(--tabs-height) + 1.25rem); }

  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 3rem minmax(0, 1fr);
    grid-template-areas: 'top' 'main';
    padding: 6px;
  }
  .library { display: none; }

  .topbar { grid-template-columns: minmax(0, 1fr) auto; padding-inline: 0.125rem; gap: 0.5rem; }
  .brand, .round-btn { display: none; }
  .link-btn { display: none; }
  .topbar-center .search { height: 2.75rem; }

  .tabs {
    position: fixed; inset: auto 0 0; z-index: 41;
    display: flex; justify-content: space-around;
    height: calc(var(--tabs-height) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: linear-gradient(color-mix(in srgb, var(--void) 80%, transparent), var(--void) 40%);
  }
  .tabs a { flex: 1; display: grid; place-items: center; align-content: center; gap: 0.125rem; color: var(--ash); font-size: 0.6875rem; }
  .tabs a[aria-current='page'] { color: var(--ink); }

  .bar {
    bottom: calc(var(--tabs-height) + env(safe-area-inset-bottom) + 4px);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem; padding: 0 0.5rem;
    border-radius: calc(18px * var(--round));
    overflow: hidden;
  }
  .bar-art img { width: 2.75rem; height: 2.75rem; border-radius: calc(10px * var(--round)); }
  .bar-like, .bar-tools, .bar-time, .bar-controls .extra, .bar-controls .icon-btn { display: none; }
  .bar-track { gap: 0.5rem; }
  .bar-names { flex: 1; }
  .bar-center { display: block; }
  .bar-play { margin: 0; }
  /* The progress line runs along the bottom edge of the strip. */
  .bar-progress { position: absolute; inset: auto 0.875rem 0.1875rem; }
  .bar-progress .range { height: 0.5rem; }

  .horizon-open .bar-controls .icon-btn { display: inline-grid; }
  .horizon-open .bar-names { display: none; }

  .side { inset: 6px 6px var(--dock-height); width: auto; }

  .shelf { grid-auto-flow: column; grid-auto-columns: 9.5rem; grid-template-columns: none; grid-auto-rows: auto; overflow-x: auto; scroll-snap-type: x proximity; }
  .card { scroll-snap-align: start; }
  .card-play { opacity: 1; transform: none; width: 2.5rem; height: 2.5rem; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick { height: 3rem; padding-right: 0.5rem; }
  .quick > img, .quick > .mosaic, .quick > .cover-img, .quick > .cover-empty, .quick > .liked-art { width: 3rem; height: 3rem; }
  .quick .card-play { display: none; }

  .head, .artist-head { flex-direction: column; align-items: flex-start; min-height: 0; padding-top: 1.5rem; }
  .head-cover { align-self: center; width: 11rem; }
  .artist-head.has-banner { min-height: 16rem; justify-content: flex-end; }

  .rows-head { display: none; }
  .row { grid-template-columns: minmax(0, 1fr) 2.5rem 2.5rem; padding-inline: 0.25rem; }
  .row-index, .row-time { display: none; }
  .row-like, .row-more { opacity: 1; }
  .search-top .row { grid-template-columns: minmax(0, 1fr) 2.5rem 2.5rem; }

  .theme-controls { grid-template-columns: minmax(0, 1fr); }
  .tabs a { font-size: 0.625rem; }

  .horizon-copy { width: auto; right: 1.25rem; text-align: center; }
  .horizon-copy h2 { font-size: clamp(2.75rem, 14vw, 4.5rem); }
}