/* CD Lab. Dark, because it sits behind a moving video. Big touch targets: this
   gets used on a phone and an iPad more than a desktop. */
:root {
  --bg: #08080c;
  --ink: #f4f4f6;
  --dim: #9a9aa8;
  --line: rgba(255, 255, 255, 0.10);
  --card: rgba(255, 255, 255, 0.055);
  --card-hi: rgba(255, 255, 255, 0.10);
  --accent: #8b5cf6;
  --pad: 16px;
  --player-h: 92px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  max-width: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 ui-sans-serif, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---- the moving stage ---------------------------------------------------- */
#stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--bg); }

#loop {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease;
  filter: saturate(1.15) contrast(1.05);
}
#loop.on { opacity: 0.55; }

/* Made here, not bought: the drifting shader behind everything. Used whenever a
   track has no video of its own, which is almost always. */
#grain {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  opacity: 0; transition: opacity 1.4s ease;
}
#grain.on { opacity: 0.6; }

/* A scrim over whatever is behind - video or shader - so the words stay
   readable. Without it the backdrop wins and the track list is a struggle. */
#stage::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(8, 8, 13, 0.62) 0%, rgba(8, 8, 13, 0.34) 38%, rgba(8, 8, 13, 0.72) 100%);
}

/* Shown when a track has no loop yet, and always under one that does. */
#wash {
  position: absolute; inset: -20%;
  background:
    radial-gradient(45% 45% at 22% 18%, color-mix(in oklab, var(--accent) 55%, transparent), transparent 70%),
    radial-gradient(40% 40% at 82% 74%, color-mix(in oklab, var(--accent) 30%, #0ea5e9 40%), transparent 70%),
    radial-gradient(60% 60% at 50% 110%, rgba(255, 255, 255, 0.07), transparent 70%);
  filter: blur(60px);
  animation: drift 34s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1.05); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.18); }
}
@media (prefers-reduced-motion: reduce) { #wash { animation: none; } }

/* ---- the door ----------------------------------------------------------- */
#door {
  position: relative; z-index: 2;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: var(--pad);
}
#door[hidden] { display: none; }

.door-card {
  width: min(360px, 100%);
  text-align: center;
  background: rgba(10, 10, 16, 0.62);
  backdrop-filter: blur(22px);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 32px 24px 24px;
}

.mark {
  margin: 0 0 4px;
  font-size: 32px; font-weight: 800; letter-spacing: 0.22em;
}
.door-sub { margin: 0 0 22px; color: var(--dim); font-size: 14px; }

.dots { display: flex; gap: 14px; justify-content: center; margin-bottom: 14px; }
.dots i {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  transition: background 0.15s, transform 0.15s;
}
.dots i.on { background: var(--ink); border-color: var(--ink); transform: scale(1.12); }

.door-msg { min-height: 20px; margin: 0 0 14px; font-size: 13px; color: #fca5a5; }

.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pad button {
  appearance: none;
  height: 62px;
  font: 600 22px/1 inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
  transition: background 0.12s, transform 0.08s;
}
.pad button:active { transform: scale(0.95); background: var(--card-hi); }
.pad button.ghost { font-size: 14px; font-weight: 500; color: var(--dim); }

/* ---- the app ------------------------------------------------------------ */
#app {
  position: relative; z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--pad) var(--pad) calc(var(--player-h) + 40px);
}
#app[hidden] { display: none; }

header.top {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0 22px;
}
header.top .mark { font-size: 19px; margin: 0; }
header.top nav { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }

.chip {
  appearance: none;
  font: 500 14px/1 inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 15px; cursor: pointer;
}
.chip:hover { background: var(--card-hi); }
.chip[aria-current="true"] { background: var(--ink); color: #0b0b11; border-color: transparent; }

h2.h { font-size: 22px; margin: 0 0 4px; letter-spacing: -0.01em; }
p.sub { margin: 0 0 20px; color: var(--dim); font-size: 14px; }

.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.artist-card {
  position: relative; display: block; text-align: left;
  appearance: none; color: var(--ink); cursor: pointer;
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--card);
  padding: 20px; min-height: 148px;
  overflow: hidden;
  transition: transform 0.14s, background 0.14s;
}
.artist-card:hover { transform: translateY(-2px); background: var(--card-hi); }
.artist-card .glow {
  position: absolute; inset: auto -30% -60% -30%; height: 150px;
  filter: blur(42px); opacity: 0.55;
}
.artist-card h3 { position: relative; margin: 0 0 2px; font-size: 20px; }
.artist-card .tag { position: relative; color: var(--dim); font-size: 14px; }
.artist-card .count { position: relative; margin-top: 14px; font-size: 13px; color: var(--dim); }

.tracks { list-style: none; margin: 0; padding: 0; }
.tracks li {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  cursor: pointer;
}
.tracks li:hover { background: var(--card); border-color: var(--line); }
.tracks li.playing { background: var(--card-hi); border-color: var(--line); }
.tracks .n { width: 26px; text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; font-size: 14px; }
.tracks .meta { min-width: 0; flex: 1 1 auto; display: block; overflow: hidden; }
.tracks .t { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tracks .s { display: block; font-size: 13px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tracks .d { color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; }

.empty {
  border: 1px dashed var(--line); border-radius: 20px;
  padding: 34px 22px; text-align: center; color: var(--dim);
}
.empty strong { display: block; color: var(--ink); margin-bottom: 6px; font-size: 16px; }

/* ---- the player -------------------------------------------------------- */
#player {
  position: fixed; z-index: 3; left: 0; right: 0; bottom: 0;
  background: rgba(8, 8, 13, 0.82);
  backdrop-filter: blur(24px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
#player[hidden] { display: none; }

.bar-wrap { padding: 0; }
#bar { position: relative; height: 16px; cursor: pointer; display: flex; align-items: center; }
#bar::before { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: rgba(255, 255, 255, 0.14); }
#fill { position: absolute; left: 0; height: 3px; width: 0; background: var(--accent); }
#knob {
  position: absolute; left: 0; width: 11px; height: 11px; margin-left: -5px;
  border-radius: 50%; background: var(--ink); opacity: 0; transition: opacity 0.15s;
}
#bar:hover #knob { opacity: 1; }

.bar-row {
  display: flex; align-items: center; gap: 14px;
  max-width: 1080px; margin: 0 auto;
  padding: 12px var(--pad) 16px;
}
.np { min-width: 0; flex: 1; }
#np-title { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dim { color: var(--dim); font-size: 13px; }

.controls { display: flex; align-items: center; gap: 8px; }
.controls button {
  appearance: none; cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 17px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.controls button:hover { background: var(--card-hi); }
.controls button.primary { width: 52px; height: 52px; background: var(--ink); color: #0b0b11; border-color: transparent; font-size: 19px; }
.controls button:disabled { opacity: 0.35; cursor: default; }

.times { font-size: 13px; font-variant-numeric: tabular-nums; min-width: 92px; text-align: right; }

@media (max-width: 560px) {
  .times { display: none; }
  header.top nav { width: 100%; margin-left: 0; }
}

/* ---- the back end ------------------------------------------------------- */
body.admin #stage { opacity: 0.55; }

#refused { min-height: 100svh; display: grid; place-items: center; padding: var(--pad); position: relative; z-index: 2; }
#refused[hidden] { display: none; }

#admin {
  position: relative; z-index: 2;
  max-width: 1100px; margin: 0 auto; padding: var(--pad) var(--pad) 80px;
}
#admin[hidden] { display: none; }

.panel {
  background: rgba(10, 10, 16, 0.6);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 18px;
}
.panel > h3 { margin: 0 0 4px; font-size: 17px; }
.panel > p.hint { margin: 0 0 16px; color: var(--dim); font-size: 13px; }

.field { display: block; margin-bottom: 12px; }
.field > span { display: block; font-size: 12px; color: var(--dim); margin-bottom: 5px; letter-spacing: 0.02em; }

input[type="text"], input[type="number"], input[type="color"], select, textarea {
  width: 100%;
  font: 15px/1.4 inherit; color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 12px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea { resize: vertical; min-height: 68px; }
input[type="color"] { padding: 4px; height: 44px; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-size: 5px 5px; background-repeat: no-repeat; }

.row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.btn {
  appearance: none; cursor: pointer;
  font: 600 14px/1 inherit; color: #0b0b11;
  background: var(--ink); border: 1px solid transparent;
  border-radius: 11px; padding: 12px 17px;
}
.btn.quiet { background: var(--card); color: var(--ink); border-color: var(--line); font-weight: 500; }
.btn.danger { background: transparent; color: #fca5a5; border-color: rgba(252, 165, 165, 0.35); font-weight: 500; }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.small { padding: 8px 11px; font-size: 13px; border-radius: 9px; }

.drop {
  border: 1.5px dashed var(--line); border-radius: 16px;
  padding: 28px 18px; text-align: center; color: var(--dim);
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.drop:hover, .drop.over { border-color: var(--accent); background: rgba(255, 255, 255, 0.04); }
.drop strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }

.queue { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.queue li { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--card); }
.queue .qhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.queue .qname { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue .qsize { color: var(--dim); font-size: 12px; margin-left: auto; white-space: nowrap; }

.queue-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.queue-actions[hidden] { display: none; }

.prog { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; margin-top: 10px; }
.prog > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.2s; }

.adm-artist { border: 1px solid var(--line); border-radius: 16px; margin-bottom: 14px; overflow: hidden; }
.adm-artist > header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--card); cursor: pointer;
}
.adm-artist > header .swatch { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.adm-artist > header h4 { margin: 0; font-size: 16px; }
.adm-artist > header .n { color: var(--dim); font-size: 13px; margin-left: auto; }
.adm-body { padding: 16px; border-top: 1px solid var(--line); }

.adm-track {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 11px; border: 1px solid transparent;
}
.adm-track:hover { background: var(--card); border-color: var(--line); }
.adm-track .grip { display: flex; flex-direction: column; gap: 2px; }
.adm-track .grip button { appearance: none; background: none; border: none; color: var(--dim); cursor: pointer; padding: 0 4px; font-size: 11px; line-height: 1; }
.adm-track .grip button:hover { color: var(--ink); }
.adm-track .who { min-width: 0; flex: 1; }
.adm-track .who b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-track .who span { font-size: 12px; color: var(--dim); }
.adm-track.hidden-track { opacity: 0.5; }

.pill { font-size: 11px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; color: var(--dim); white-space: nowrap; }

.people { list-style: none; margin: 0; padding: 0; }
.people li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.people li:last-child { border-bottom: 0; }
.people .pname { font-weight: 600; }
.people .pmeta { font-size: 12px; color: var(--dim); }
.people .grow { flex: 1; min-width: 0; }

dialog.sheet {
  border: 1px solid var(--line); border-radius: 20px;
  background: #0d0d14; color: var(--ink);
  width: min(460px, calc(100vw - 32px)); padding: 22px;
}
dialog.sheet::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); }
dialog.sheet h3 { margin: 0 0 16px; font-size: 18px; }
dialog.sheet .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

#toast {
  position: fixed; z-index: 9; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: #16161f; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 18px; font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
  max-width: calc(100vw - 32px);
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#toast.bad { border-color: rgba(252, 165, 165, 0.4); color: #fecaca; }

/* ---- looping video, in the back end ------------------------------------- */
.loop-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.loop-card {
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--card); padding: 12px;
}
.loop-card.over { border-color: var(--accent); background: var(--card-hi); }

.loop-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 11px; overflow: hidden;
  background: #05050a;
  border: 1px solid var(--line);
}
.loop-stage video,
.loop-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }

.loop-blank {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
  padding: 12px; color: var(--dim); font-size: 12px; line-height: 1.5;
  border-radius: 11px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 8px, transparent 8px 16px);
}
.loop-blank strong { display: block; color: var(--ink); font-size: 14px; margin-bottom: 3px; }

/* Catches the drop anywhere on the picture, over the video too. */
.loop-drop { position: absolute; inset: 0; }

.loop-meta { margin-top: 11px; min-width: 0; }
.loop-meta b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loop-meta span { font-size: 12px; color: var(--dim); }

.loop-card textarea { font-size: 13px; }
.loop-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.loop-card .prog { margin-top: 10px; }
.loop-card .prog[hidden] { display: none; }

code { font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(255,255,255,0.07); padding: 2px 5px; border-radius: 5px; }

/* ---- a video being made -------------------------------------------------- */
.loop-working {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; font-size: 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent);
}
.spin {
  width: 12px; height: 12px; flex: none;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 3s; } }

.job-line {
  display: flex; align-items: center; gap: 10px;
  margin-top: 11px; font-size: 12px; color: var(--dim);
}
.job-line span { min-width: 0; }
.job-line.bad { color: #fca5a5; }
.job-line button { margin-left: auto; flex: none; }

a { color: var(--ink); }

/* ---- the ElevenLabs console --------------------------------------------- */
.panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.panel-head h3 { margin: 0; }
.sub-h { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); margin: 22px 0 10px; font-weight: 600; }
.bad-text { color: #fca5a5; }
.dim-cell { color: var(--dim); }
.dim-pill { opacity: 0.6; }

.meter { margin: 14px 0 4px; }
.meter-top, .meter-bottom { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; }
.meter-top { font-weight: 600; }
.meter-bottom { margin: 6px 0 0; color: var(--dim); }
.meter-bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.meter-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #22d3ee, var(--accent)); transition: width 0.4s; }
.meter.warm .meter-bar > i { background: linear-gradient(90deg, #f59e0b, #f97316); }
.meter.hot .meter-bar > i { background: linear-gradient(90deg, #f97316, #ef4444); }
.meter-unknown { font-size: 13px; color: var(--dim); padding: 12px 0; }

.facts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-top: 18px; }
.facts > div { background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 12px 14px; }
.facts b { display: block; font-size: 19px; font-variant-numeric: tabular-nums; }
.facts span { font-size: 12px; color: var(--dim); }

.grid-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.grid-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); padding: 0 10px 8px; font-weight: 600; }
.grid-table td { padding: 10px; border-top: 1px solid var(--line); vertical-align: top; }
.grid-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.use-row { margin-bottom: 14px; }
.use-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }

.feat-list { display: grid; gap: 12px; }
.feat { border: 1px solid var(--line); border-radius: 15px; padding: 15px; background: var(--card); }
.feat.in-use { border-color: color-mix(in oklab, var(--accent) 55%, transparent); }
.feat header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
.feat header h4 { margin: 0; font-size: 15px; }
.feat p { margin: 0 0 7px; font-size: 13px; line-height: 1.6; }
.feat p:last-child { margin-bottom: 0; }
.feat-what { color: var(--ink); }
.feat-gives, .feat-stand { color: var(--dim); }
.feat-gives span, .feat-stand span {
  display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink); opacity: 0.55; margin-right: 6px;
}
.feat-stand { color: var(--ink); }
.pill.in { border-color: var(--accent); color: var(--ink); }
.pill.state-granted { border-color: rgba(52, 211, 153, 0.5); color: #6ee7b7; }
.pill.state-not-granted { border-color: rgba(252, 165, 165, 0.35); color: #fca5a5; }

/* From Secret DSP: one card per arrival. */
.chip .count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--accent); color: #0b0b11; font-size: 11px; font-weight: 700; text-align: center; }
.inbox-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); margin-bottom: 18px; }
.inbox-card { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: rgba(10, 10, 16, 0.72); backdrop-filter: blur(18px); position: relative; z-index: 1; min-width: 0; }
.inbox-head { margin-bottom: 10px; min-width: 0; }
.inbox-head b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-head span { font-size: 12px; color: var(--dim); }
.inbox-card audio { width: 100%; margin-bottom: 10px; }
.inbox-video { width: 100%; border-radius: 10px; background: #000; margin-bottom: 10px; aspect-ratio: 16 / 9; }
.inbox-card .judge { margin: 0 0 10px; font-size: 13px; font-style: italic; color: var(--ink); }
.inbox-card .match { margin: 0 0 12px; font-size: 13px; color: var(--dim); border-left: 3px solid var(--accent); padding-left: 9px; }
.inbox-card .match.bad { color: #fca5a5; border-left-color: #fca5a5; }

/* A full-length music video, locked to the song. Above the loop, under the words. */
#mv {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease;
  background: #000;
}
#mv.on { opacity: 0.8; }

/* Watching: the music video over everything, whole and undimmed. */
body.watching #stage { z-index: 50; background: #000; }
body.watching #stage::after, body.watching #wash, body.watching #grain, body.watching #loop, body.watching #still, body.watching #prism { display: none; }
body.watching #mv { opacity: 1; object-fit: contain; cursor: pointer; }
#unwatch {
  display: none; position: fixed; z-index: 51; top: max(14px, env(safe-area-inset-top)); left: 14px;
  appearance: none; cursor: pointer; padding: 9px 14px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.55); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); font: inherit; font-size: 13px;
}
body.watching #unwatch { display: block; }
.controls button.watch { width: auto; border-radius: 999px; padding: 0 14px; font-size: 13px; font-weight: 600; }
.controls button.watch[hidden] { display: none; }

/* ---- one page per song: the thesixtyone layout --------------------------- */
/* The picture is the page. The scrim that keeps the track lists readable is
   pulled right back here, leaving just enough shade behind the black block in
   the corner, and the backdrop is shown at nearly full strength. */
body.song-view #grain.on { opacity: 0.96; }
body.song-view #loop.on { opacity: 0.92; }
body.song-view.has-picture #wash { display: none; }
body.song-view #stage::after {
  background:
    linear-gradient(to top right, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 45%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 18%);
}

.song-page { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.song-page > * { pointer-events: auto; }

.song-mark {
  position: absolute; top: 16px; left: 18px;
  appearance: none; background: none; border: 0; cursor: pointer;
  color: var(--ink); font: 800 15px/1 inherit; letter-spacing: 0.22em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.song-nav { position: absolute; top: 12px; right: 14px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.song-nav .chip { background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(8px); font-size: 13px; padding: 8px 12px; }

/* The tab on the right edge: next song. */
.next-tab {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 46px; height: 128px;
  appearance: none; border: 0; cursor: pointer;
  border-radius: 12px 0 0 12px;
  background: var(--accent); color: #07070b;
  font: 300 46px/1 inherit;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45);
  transition: width 0.15s;
}
.next-tab:hover { width: 54px; }

/* The block in the corner: the story, then the title and artist in black. */
.song-block {
  position: absolute; left: 0;
  bottom: calc(var(--player-h) + 26px);
  width: min(600px, calc(100vw - 70px));
}
.song-story {
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
  padding: 16px 20px; margin-bottom: 2px;
  font-size: 14px; line-height: 1.55; white-space: pre-wrap;
  max-height: 30vh; overflow: auto;
}
.song-card { background: #000; padding: 18px 22px 16px; }
.song-title {
  margin: 0;
  font-size: clamp(34px, 6.5vw, 72px); font-weight: 900;
  line-height: 0.92; letter-spacing: -0.015em; text-transform: uppercase;
  overflow-wrap: anywhere;
}
.song-artist {
  appearance: none; background: none; border: 0; padding: 0; margin: 8px 0 0; cursor: pointer;
  color: var(--accent); font: 800 17px/1.2 inherit; letter-spacing: 0.08em; text-transform: uppercase;
}
.song-artist:hover { text-decoration: underline; }
.song-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: 12px; font-size: 13px; color: var(--dim); }
.song-share {
  appearance: none; background: none; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px;
  color: var(--ink); font: 600 12px/1 inherit; padding: 7px 12px; letter-spacing: 0.03em;
}
.song-share:hover { background: rgba(255, 255, 255, 0.1); }

/* Pictures in the song lists. A track with no picture gets its artist's colour. */
.tracks .thumb {
  flex: none; width: 46px; height: 46px; border-radius: 9px;
  background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--tint, var(--accent)) 70%, #fff 10%), color-mix(in oklab, var(--tint, var(--accent)) 35%, #000 65%));
  background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

@media (max-width: 560px) {
  .song-nav { top: 46px; right: 8px; left: 8px; justify-content: flex-start; }
  .song-block { width: calc(100vw - 52px); bottom: calc(var(--player-h) + 14px); }
  .song-card { padding: 14px 16px 12px; }
  .next-tab { width: 38px; height: 104px; font-size: 38px; }
  .song-story { max-height: 22vh; font-size: 13px; }
}

/* ---- a song's picture, and PRISM ------------------------------------------ */
#still, #prism {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 0.4s ease;
}
#still { background: center / cover no-repeat; transition-duration: 0.9s; }
#still.on, #prism.on { opacity: 1; }

.prism-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.song-prism {
  appearance: none; cursor: pointer; border: 0; border-radius: 999px;
  background: var(--accent); color: #07070b;
  font: 900 12px/1 inherit; letter-spacing: 0.22em; padding: 9px 16px 9px 18px;
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent);
  transition: box-shadow 0.25s, transform 0.08s;
}
.song-prism:hover { box-shadow: 0 0 22px 2px color-mix(in oklab, var(--accent) 55%, transparent); }
.song-prism:active { transform: scale(0.96); }
.prism-label { font-size: 12px; color: var(--dim); letter-spacing: 0.03em; }
.prism-plain, .prism-keep {
  appearance: none; background: none; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px;
  color: var(--ink); font: 600 12px/1 inherit; padding: 7px 12px;
}
.prism-keep { border-color: var(--accent); }
.prism-plain:hover, .prism-keep:hover { background: rgba(255, 255, 255, 0.1); }