@font-face {
  font-family: "neueRegrade";
  src: url("assets/fonts/NeueRegrade_Variable.ttf") format("truetype");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --bg-wash: #f6f7f9;
  --bg-mist: #eef0f3;
  --ink: #0a0b10;
  --ink-deep: #020412;
  --muted: #5c5e63;
  --faint: #9a9aa2;
  --line: rgba(10, 11, 16, 0.12);
  --fill-soft: #e8e8e8;
  --primary: #0a0b10;
  --primary-fg: #ffffff;
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.7);
  --album-accent: #d7e85f;
  --album-wash: #6e8a72;
  --field-a: #d7e85f;
  --field-b: #6e8a72;
  --field-c: #557c72;
  /* The Lissin waveform, used as a mask so tiles can stamp it in any colour. */
  --wave-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M15 38V26h5v12zm10 8V18h5v28zm10-5V23h5v18zm10 10V13h5v38z' fill='%23000'/%3E%3C/svg%3E");
  --sans: "neueRegrade", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: var(--sans);
}

* { box-sizing: border-box; }
/* Booth controls (Next visitor, the world rail, the Make CTA, the roll chip)
   set a display in their own class rules, which beats the UA [hidden] rule.
   The old guard was scoped to html[data-booth="1"], so in marketing mode every
   one of them leaked back on screen. Restate it once, for everything. */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html { min-height: 100%; background: var(--bg-mist); }
body {
  position: relative;
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: radial-gradient(120% 85% at 50% 18%, #ffffff 0%, #f6f7f9 55%, #eef0f3 100%);
  font-family: var(--sans);
}
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.atmosphere-walkman,
.atmosphere-record {
  position: absolute;
  object-fit: contain;
  opacity: .07;
  filter: grayscale(.15);
}
.atmosphere-walkman {
  left: -4%;
  bottom: 6%;
  width: min(34vw, 360px);
  transform: rotate(-8deg);
}
.atmosphere-record {
  right: -3%;
  top: 12%;
  width: min(28vw, 300px);
  transform: rotate(12deg);
}

.site-header,
.experience-shell,
.make-dialog {
  position: relative;
  z-index: 1;
}

.site-header {
  height: 56px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 30px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
}
.site-header > p {
  margin: 0;
  font: 500 11px/1 var(--sans);
  letter-spacing: .12em;
  color: var(--faint);
  white-space: nowrap;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: var(--ink);
  text-decoration: none;
}
.wordmark-logo {
  display: block;
  height: 26px;
  width: auto;
}
.header-actions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.make-link,
.next-visitor {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-fg);
  cursor: pointer;
  font: 500 12px/1 var(--sans);
  letter-spacing: .08em;
  box-shadow: 0 8px 20px -12px rgba(10, 11, 16, 0.45);
  transition: transform .18s ease, box-shadow .18s ease;
}
.make-link:hover,
.next-visitor:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(10, 11, 16, 0.5); }

/* ── Ambient colour field ────────────────────────────────────────────────────
   lissin.com's hero is one enormous, heavily blurred radial colour field. Here
   the three blobs take their colour from the playing album, so each listening
   world lights the booth differently without shipping a single extra asset. */
.ambient-field {
  position: fixed;
  inset: 0;
  height: 100lvh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  /* The album palettes are deliberately muted earth tones; without this lift
     three of them overlapping average out to grey. */
  filter: saturate(1.6) hue-rotate(0deg);
  animation: field-hue 41s ease-in-out infinite;
}
/* Kept narrow on purpose. Wide enough that the colour is visibly in motion,
   narrow enough that a world never drifts out of its own identity. */
@keyframes field-hue {
  0%, 100% { filter: saturate(1.6) hue-rotate(-14deg); }
  50%      { filter: saturate(1.72) hue-rotate(14deg); }
}
.field-blob {
  position: absolute;
  display: block;
  /* Deliberately NOT a circle. A uniform circle is rotationally symmetric, so
     the rotate() these keyframes have always carried rendered exactly nothing.
     An off-round body makes rotation the main event: the blob sweeps its long
     axis across the screen and the colour genuinely travels. */
  border-radius: 46% 54% 62% 38% / 52% 44% 56% 48%;
  filter: blur(90px);
  /* Transform only, so the whole field stays on the compositor. Nothing here
     repaints - this runs on a kiosk all day. */
  will-change: transform;
  transition: background .9s ease;
}
.field-a {
  left: 50%;
  top: -44%;
  width: 124vw;
  height: 96vw;
  margin-left: -62vw;
  background: var(--field-a, #6e8a72);
  opacity: .62;
  animation: field-drift-a 23s ease-in-out infinite;
}
.field-b {
  left: -24%;
  bottom: -50%;
  width: 92vw;
  height: 74vw;
  border-radius: 58% 42% 39% 61% / 44% 58% 42% 56%;
  background: var(--field-b, #557c72);
  opacity: .56;
  animation: field-drift-b 29s ease-in-out infinite;
}
/* The accent stays smaller and travels furthest, so it reads as a highlight
   moving through the room rather than as a fourth wall of colour. */
.field-c {
  right: -10%;
  top: 4%;
  width: 54vw;
  height: 46vw;
  border-radius: 38% 62% 55% 45% / 60% 48% 52% 40%;
  background: var(--field-c, #d7e85f);
  opacity: .54;
  animation: field-drift-c 17s ease-in-out infinite;
}
/* Borrows the base tone and crosses the other three on a period that shares no
   common factor with them, so the pattern does not resolve. */
.field-d {
  left: 18%;
  bottom: -30%;
  width: 66vw;
  height: 58vw;
  border-radius: 52% 48% 44% 56% / 38% 62% 38% 62%;
  background: var(--field-a, #6e8a72);
  opacity: .4;
  animation: field-drift-d 37s ease-in-out infinite;
}
/* The paper core: keeps type legible over the colour, exactly like lissin.com.
   Softened from .92 at the second stop - at the old value it pinned the middle
   of the screen to flat white and swallowed most of the movement. */
.ambient-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(54% 50% at 46% 48%, #ffffff 0%, rgba(255, 255, 255, .74) 42%, rgba(255, 255, 255, .26) 76%, rgba(255, 255, 255, 0) 100%);
}
/* The four booth worlds are actual places, not merely palette changes. The
   selected world supplies a full-bleed scene while the existing colour field
   remains as a restrained atmospheric grade above it. */
html[data-booth="1"] .ambient-field {
  background-color: #17251e;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: none;
  animation: none;
  transition: background-image .45s ease;
}
html[data-booth="1"][data-world-backdrop="forest"] .ambient-field { background-image: url("assets/worlds/forest-background.png"); }
html[data-booth="1"][data-world-backdrop="trail"] .ambient-field { background-image: url("assets/worlds/trail-background.png"); }
html[data-booth="1"][data-world-backdrop="arena"] .ambient-field { background-image: url("assets/worlds/arena-background.png"); }
html[data-booth="1"][data-world-backdrop="shore"] .ambient-field { background-image: url("assets/worlds/shore-background.png"); }
html[data-booth="1"] .field-a { opacity: .18; }
html[data-booth="1"] .field-b { opacity: .12; }
html[data-booth="1"] .field-c { opacity: .16; }
html[data-booth="1"] .field-d { opacity: .1; }
html[data-booth="1"] .ambient-field::after {
  background: linear-gradient(104deg, rgba(4, 10, 10, .44), rgba(4, 10, 10, .08) 54%, rgba(4, 10, 10, .3));
  animation: none;
}
/* Four bodies on 34/43/27/51s - pairwise coprime, so the arrangement takes
   about 21 hours to repeat and a visitor never sees it loop. Each rotates a
   full turn: with an off-round shape that is what carries the colour across
   the screen, and it costs nothing on top of the translate. */
@keyframes field-drift-a {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  25%  { transform: translate3d(-16%, 11%, 0) rotate(90deg) scale(1.16); }
  50%  { transform: translate3d(9%, -13%, 0) rotate(180deg) scale(.9); }
  75%  { transform: translate3d(13%, 7%, 0) rotate(270deg) scale(1.1); }
  100% { transform: translate3d(0, 0, 0) rotate(360deg) scale(1); }
}
@keyframes field-drift-b {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  30%  { transform: translate3d(26%, -16%, 0) rotate(-110deg) scale(1.22); }
  60%  { transform: translate3d(-13%, 12%, 0) rotate(-220deg) scale(.86); }
  100% { transform: translate3d(0, 0, 0) rotate(-360deg) scale(1); }
}
@keyframes field-drift-c {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  33%  { transform: translate3d(-34%, 26%, 0) rotate(130deg) scale(.82); }
  66%  { transform: translate3d(22%, -19%, 0) rotate(240deg) scale(1.28); }
  100% { transform: translate3d(0, 0, 0) rotate(360deg) scale(1); }
}
@keyframes field-drift-d {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  40%  { transform: translate3d(19%, -22%, 0) rotate(-140deg) scale(1.2); }
  70%  { transform: translate3d(-24%, 9%, 0) rotate(-250deg) scale(.88); }
  100% { transform: translate3d(0, 0, 0) rotate(-360deg) scale(1); }
}
/* A slow breath on the whole field: the paper core widens and narrows, which
   makes the colour advance and recede instead of only sliding around. */
.ambient-field::after {
  animation: field-breathe 37s ease-in-out infinite;
}
@keyframes field-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.13); opacity: .82; }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-field,
  .field-blob,
  .ambient-field::after { animation: none !important; }
}

/* Booth mode: one viewport, no page scroll, minimal chrome */
html[data-booth="1"],
html[data-booth="1"] body {
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden !important;
}
html[data-booth="1"] body { background: var(--bg); }
html[data-booth="1"] .marketing-chrome,
html[data-booth="1"] .marketing-only { display: none !important; }
/* Drop list/status/volume/duplicate Make CTA — the panel CTA is the booth's entry */
html[data-booth="1"] .cue-track,
html[data-booth="1"] .scene-message,
html[data-booth="1"] .player-status,
html[data-booth="1"] .panel-volume,
html[data-booth="1"] .growth-story > p {
  display: none !important;
}
html[data-booth="1"] .site-header {
  height: 64px;
  padding: 0 clamp(20px, 2.4vw, 40px);
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
  grid-template-columns: 1fr auto;
}
html[data-booth="1"] .experience-shell {
  height: calc(100dvh - 64px);
  /* The base shell carries min-height: calc(100vh - 56px); left alone it wins
     over the booth height and pushes the world rail off the bottom edge. */
  min-height: 0;
  max-height: calc(100dvh - 64px);
  overflow: hidden;
  padding-bottom: clamp(14px, 2vh, 26px);
  grid-template-rows: minmax(0, 1fr) auto;
}
html[data-booth="1"] .listening-surface {
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 72px;
  padding: clamp(4px, 1.4vh, 18px) clamp(20px, 2.4vw, 40px) clamp(8px, 1.6vh, 20px);
  /* Object left, information right — both hung from one shared top baseline
     instead of each floating in its own vertical centre. */
  grid-template-columns: minmax(0, 1fr) minmax(340px, 30vw);
  gap: clamp(28px, 3.4vw, 64px);
  align-items: stretch;
}
html[data-booth="1"] .object-column {
  grid-template-rows: minmax(0, 1fr);
}
html[data-booth="1"] .object-topline { display: none; }
html[data-booth="1"] .player-stage {
  align-content: center;
}
html[data-booth="1"] .cassette-object {
  width: min(100%, 740px);
}
html[data-booth="1"] .track-panel {
  align-self: center;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-right: 0;
  padding: clamp(18px, 2vw, 30px);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 28px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 28px 72px -38px rgba(0,0,0,.75);
  backdrop-filter: blur(14px) saturate(1.1);
}
html[data-booth="1"] .track-panel h1 {
  margin: 0;
  font-size: clamp(30px, 3.1vw, 52px);
  line-height: .96;
  letter-spacing: -.038em;
  font-weight: 600;
}
html[data-booth="1"] .track-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 clamp(10px, 2vh, 22px);
  color: var(--faint);
  font: 500 12px/1 var(--sans);
  letter-spacing: 0;
}
/* The archive number belongs on the printed cassette label, not in the panel —
   it means nothing to someone who walked up to the booth ten seconds ago. */
html[data-booth="1"] .track-status b { display: none; }
html[data-booth="1"] .track-kicker {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
html[data-booth="1"] .track-description {
  margin: 10px 0 0;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.42;
  max-width: 36ch;
  color: var(--muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
html[data-booth="1"] .emotion-route {
  margin: clamp(12px, 2vh, 20px) 0;
}
html[data-booth="1"] .timeline-wrap {
  margin-bottom: 0;
}
html[data-booth="1"] .scene-panel {
  margin-top: clamp(12px, 2vh, 20px);
  padding-top: 0;
  border-top: 0;
  flex: 0 0 auto;
}
html[data-booth="1"] .scene-stage {
  height: clamp(58px, 8vh, 92px);
  border-radius: 18px;
}
html[data-booth="1"] .site-header .make-link,
html[data-booth="1"] .site-header .next-visitor {
  min-height: 42px;
  padding: 0 20px;
  font: 500 14px/1 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
/* Next visitor is the operator's key, not the visitor's — keep it quiet. */
html[data-booth="1"] .next-visitor {
  background: rgba(255, 255, 255, .7);
  color: var(--muted);
  border-color: var(--line);
  box-shadow: none;
  backdrop-filter: blur(10px);
}
html[data-booth="1"] .next-visitor:hover {
  color: var(--ink);
  box-shadow: 0 8px 20px -14px rgba(10, 11, 16, .4);
}
/* Dim only for post-confirm theatre — listening stays mounted under the Make Audio dialog */
html[data-booth="1"] .experience-shell[data-mode="generating"] .listening-surface,
html[data-booth="1"] .experience-shell[data-mode="ready"] .listening-surface,
html[data-booth="1"] .experience-shell[data-mode="generating"] .booth-worlds,
html[data-booth="1"] .experience-shell[data-mode="ready"] .booth-worlds {
  opacity: .3;
  pointer-events: none;
  filter: saturate(.8);
}

/* ── World rail ──────────────────────────────────────────────────────────────
   lissin.com's 2026 section states the brand in gradient show tiles. The booth
   uses the same object for its world switcher, which also drags the control
   back on-screen: the old pill row rendered at exactly viewport height. */
.booth-worlds {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 22px);
  margin: 0 clamp(20px, 2.4vw, 40px);
}
/* Sit the rail under the object column, not the whole page: it is the shelf the
   cassette in play was taken from, so it should line up with the cassette.
   The reserved width mirrors the listening-surface track column exactly. */
html[data-booth="1"] .booth-worlds {
  padding-right: calc(max(340px, 30vw) + clamp(28px, 3.4vw, 64px));
}
.booth-worlds button {
  position: relative;
  flex: 0 0 auto;
  width: clamp(96px, min(10.4vw, 16.5vh), 164px);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
  border: 0;
  border-radius: clamp(22px, 2vw, 30px);
  background: linear-gradient(148deg, var(--tile-a, #557c72), var(--tile-b, #e5a842));
  color: #fff;
  cursor: pointer;
  text-align: left;
  font: 600 clamp(13px, 1.05vw, 16px)/1.12 var(--sans);
  letter-spacing: -.02em;
  overflow: hidden;
  box-shadow: 0 14px 30px -18px rgba(10, 11, 16, .55);
  transition: transform .22s cubic-bezier(.2, .75, .2, 1), box-shadow .22s ease, filter .22s ease;
  /* Unselected worlds recede by losing colour, not by going transparent —
     fading the whole tile takes the label's contrast down with it. */
  filter: saturate(.5) brightness(1.04);
}
/* The photograph, drifting. Its own layer rather than a background on the
   button, so it can move independently of the tile and be clipped by the
   radius. The album gradient stays underneath as the colour bed and as the
   fallback if an image is ever missing. */
.booth-worlds button > .tile-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.booth-worlds button > .tile-photo img {
  position: absolute;
  /* Oversized so a slow pan never exposes an edge. */
  top: -12%;
  left: -12%;
  width: 124%;
  height: 124%;
  object-fit: cover;
  /* Show the photograph. Luminosity blending sank the three darker images into
     the gradient — only Shore, with its bright sky, survived it. The world's
     colour now comes from a wash ON TOP (.tile-photo::after) instead, which
     tints without erasing. */
  opacity: 1;
  will-change: transform;
  animation: tile-drift var(--drift, 42s) ease-in-out infinite alternate;
  animation-delay: var(--drift-delay, 0s);
}
/* The world's colour, laid over the photograph rather than blended into it, so
   Forest still reads green and Arena still reads red without losing the image. */
.booth-worlds button > .tile-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(148deg, var(--tile-a, #557c72), var(--tile-b, #e5a842));
  mix-blend-mode: soft-light;
  /* A tint, not a coat. At .85 this wiped the photographs out completely. */
  opacity: .34;
}

/* Each tile drifts on its own axis so the row never pulses in unison. */
@keyframes tile-drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(var(--drift-x, -4%), var(--drift-y, 3%), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .booth-worlds button > .tile-photo img { animation: none; transform: scale(1.06); }
}

/* Gradients this light need a floor under the label or the name disappears.
   ::before, not ::after — it has to paint under .tile-name, not over it, and it
   must sit above the photo so the label stays readable over any image. */
.booth-worlds button::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 22% 0 0;
  background: linear-gradient(180deg, rgba(10, 11, 16, 0), rgba(10, 11, 16, .66));
}
.booth-worlds button > .tile-mark,
.booth-worlds button > .tile-name { z-index: 2; }
.booth-worlds button > .tile-mark {
  /* The Lissin waveform, the same badge the show tiles carry on lissin.com. */
  position: absolute;
  top: 14px;
  right: 14px;
  width: 24px;
  height: 15px;
  background: #fff;
  opacity: .9;
  -webkit-mask: var(--wave-mark) center / contain no-repeat;
  mask: var(--wave-mark) center / contain no-repeat;
}
.booth-worlds button > .tile-name {
  position: relative;
  text-shadow: 0 1px 10px rgba(10, 11, 16, .35);
}
.booth-worlds button:hover,
.booth-worlds button:focus-visible {
  filter: saturate(.85);
  transform: translateY(-4px);
  outline: none;
}
.booth-worlds button.is-active,
.booth-worlds button[aria-current="true"] {
  filter: none;
  transform: translateY(-10px);
  outline: 2px solid rgba(255, 255, 255, .92);
  outline-offset: -2px;
  box-shadow: 0 26px 48px -20px rgba(10, 11, 16, .55);
}
@media (prefers-reduced-motion: reduce) {
  .booth-worlds button { transition: none; }
}

.booth-make-cta {
  margin-top: clamp(14px, 2.4vh, 26px);
  min-height: 56px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-fg);
  cursor: pointer;
  font: 600 17px/1 var(--sans);
  letter-spacing: -.01em;
  box-shadow: 0 14px 30px -16px rgba(10, 11, 16, .55);
  transition: transform .18s ease, box-shadow .18s ease;
}
.booth-make-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px -16px rgba(10, 11, 16, .6);
}

.icon {
  width: 18px;
  height: 18px;
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.icon-sm { width: 14px; height: 14px; stroke-width: 2; }
.icon-xs { width: 12px; height: 12px; stroke-width: 2; }
.play-icon,
.pause-icon { fill: currentColor; stroke: none; }
.volume-icon path:first-child,
.mute-icon path:first-child { fill: currentColor; stroke: currentColor; stroke-width: 1.5; }

.experience-shell { min-height: calc(100vh - 56px); display: grid; grid-template-rows: minmax(0, 1fr) 88px; }
.listening-surface {
  min-height: 600px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .72fr);
  gap: clamp(32px, 6vw, 104px);
  align-items: center;
  padding: 26px clamp(24px, 4vw, 68px) 22px;
}
.object-column { align-self: stretch; min-width: 0; display: grid; grid-template-rows: 48px minmax(0, 1fr); }
/* The format toggle sits above the object, per VISUAL_DIRECTION.md. It used to
   be pushed right by the status line that now lives in the track panel. */
.object-topline { display: flex; align-items: flex-start; justify-content: center; gap: 20px; }
/* Lives in the track panel now (it describes the track, not the object), but
   keeps the archive voice everywhere except booth mode. */
.track-status {
  margin: 0 0 10px;
  font: 500 10px/1 var(--sans);
  letter-spacing: .14em;
  color: var(--faint);
}
.track-status b { color: var(--ink); font-weight: 500; }
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--fill-soft);
  box-shadow: none;
  vertical-align: middle;
}
.status-dot.is-live {
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(10, 11, 16, 0.08);
}
.format-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 214px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass-bg);
  box-shadow: 0 8px 24px -14px rgba(10, 11, 16, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
}
.format-button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font: 500 10px/1 var(--sans);
  letter-spacing: .1em;
  color: var(--muted);
  transition: color .2s, background .2s, transform .2s;
}
.format-button.is-active {
  color: var(--primary-fg);
  background: var(--primary);
}

.player-stage {
  --growth-seed: 1;
  --growth-root: 0;
  --growth-stem: 0;
  --growth-branch: 0;
  --growth-leaves: 0;
  --growth-fruit: 0;
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.album-halo {
  position: absolute;
  z-index: -1;
  width: min(70%, 600px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--album-wash);
  opacity: .22;
  filter: blur(75px);
  transition: background .35s;
}
.player-object { position: relative; z-index: 2; grid-area: 1 / 1; visibility: visible; transition: opacity .22s ease, transform .22s ease; }
.growth-story {
  position: absolute;
  /* Behind player objects; bottom inset clears transport + drag caption + mini library */
  z-index: 1;
  inset: -2% -4% 26%;
  opacity: 0;
  overflow-x: clip;
  overflow-y: hidden;
  clip-path: inset(0 round 8px);
  pointer-events: none;
  transform: translateY(12px) scale(.94);
  transition: opacity .45s ease, transform .65s cubic-bezier(.2,.75,.2,1);
}
.player-stage[data-album-id="hidden-trail"] .growth-story { opacity: .88; transform: translateY(0) scale(1); }
.player-stage[data-player-format="cd"] .growth-story { inset: -1% -3% 30%; }
.player-stage[data-player-format="cd"][data-album-id="hidden-trail"] .growth-story { opacity: .72; }
.growth-story svg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: scale(1.28);
  transform-origin: 50% 82%;
  filter: drop-shadow(0 8px 18px rgba(10, 11, 16, 0.12));
  transition: transform .22s cubic-bezier(.2,.75,.2,1);
}
.growth-story[data-stage="seed"] svg { transform: translateY(10%) scale(.56); }
.growth-story[data-stage="sprout"] svg { transform: translateY(5%) scale(.74); }
.growth-story[data-stage="plant"] svg { transform: translateY(1%) scale(1); }
.growth-story[data-stage="tree"] svg { transform: scale(1.28); }
.player-stage[data-seeking="true"] .growth-story *,
.player-stage[data-seeking="true"] .growth-story svg { transition-duration: 0s; }
.growth-ground { fill: color-mix(in srgb,var(--album-wash) 28%,transparent); opacity: calc(.22 + var(--growth-root) * .4); }
.growth-seed { opacity: var(--growth-seed); transform-box: fill-box; transform-origin: center; transition: opacity .18s linear, transform .18s linear; }
.growth-seed ellipse { fill: var(--album-accent); stroke: color-mix(in srgb,var(--ink) 35%,var(--album-accent)); stroke-width: 1.4; }
.growth-seed path { fill: none; stroke: var(--ink-deep); stroke-width: 1.3; stroke-linecap: round; }
.growth-line { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; transition: stroke-dashoffset .18s linear; }
.growth-root { stroke: color-mix(in srgb,var(--album-wash) 72%,#947255); stroke-width: 2; stroke-dashoffset: calc(1 - var(--growth-root)); }
.growth-stem { stroke: color-mix(in srgb,var(--album-accent) 45%,var(--album-wash)); stroke-width: 3.2; stroke-dashoffset: calc(1 - var(--growth-stem)); }
.growth-branch { stroke: color-mix(in srgb,var(--album-accent) 38%,var(--album-wash)); stroke-width: 2.4; stroke-dashoffset: calc(1 - var(--growth-branch)); }
.growth-crown { stroke-width: 2; }
.growth-leaves { opacity: var(--growth-leaves); transform-box: fill-box; transform-origin: 50% 72%; transform: scale(calc(.68 + var(--growth-leaves) * .32)); transition: opacity .22s linear, transform .22s linear; }
.growth-leaves ellipse { fill: color-mix(in srgb,var(--album-accent) 28%,transparent); stroke: color-mix(in srgb,var(--album-accent) 70%,var(--ink)); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.growth-fruit { opacity: var(--growth-fruit); }
.growth-fruit circle { fill: var(--album-accent); filter: drop-shadow(0 0 3px color-mix(in srgb,var(--album-accent) 55%,transparent)); }
.growth-story > p {
  position: absolute;
  left: 50%;
  top: 3%;
  bottom: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--faint);
  transform: translateX(-50%);
  white-space: nowrap;
  font: 500 9px/1 var(--sans);
  letter-spacing: .12em;
}
.growth-story > p i { width: 18px; height: 1px; background: color-mix(in srgb,var(--album-accent) 55%,transparent); }
.player-stage[data-player-format="cd"] .growth-story > p { opacity: .7; }

/* ---- Stage ambients -------------------------------------------------------
   Every track gets background line art behind the object, drawn in by playback
   position the same way the hidden-trail tree is. One variant per track. */
.stage-ambient {
  position: absolute;
  z-index: 1;
  inset: -2% 0 26%;
  overflow-x: clip;
  overflow-y: hidden;
  pointer-events: none;
}
.player-stage[data-player-format="cd"] .stage-ambient { inset: -1% 0 30%; }
.ambient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity .5s ease, transform .7s cubic-bezier(.2,.75,.2,1);
  filter: drop-shadow(0 8px 16px rgba(10, 11, 16, 0.08));
}
.player-stage[data-ambient="embers"] .ambient-embers,
.player-stage[data-ambient="pulse"] .ambient-pulse,
.player-stage[data-ambient="burst"] .ambient-burst,
.player-stage[data-ambient="tactics"] .ambient-tactics,
.player-stage[data-ambient="storm"] .ambient-storm { opacity: .78; transform: scale(1.18); }
.am-line {
  fill: none;
  stroke: color-mix(in srgb,var(--album-accent) 62%,var(--album-wash));
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--am-draw,0));
  transition: stroke-dashoffset .2s linear, opacity .3s linear;
  --am-draw: clamp(0, calc((var(--stage-progress,0) - var(--n,0) * .055) / .5), 1);
}
.am-ember { stroke-width: 1.4; opacity: calc(.35 + var(--stage-energy,0) * .65); animation: ember-rise 4.6s ease-in-out infinite; animation-delay: calc(var(--n) * -.62s); }
@keyframes ember-rise { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.am-canopy { stroke-width: 1.2; opacity: calc(.16 + var(--stage-energy,0) * .3); }
.am-glow { fill: var(--album-accent); opacity: calc(.1 + var(--stage-energy,0) * .26); filter: blur(18px); animation: flicker 1.9s ease-in-out infinite; }
.am-ring { fill: none; stroke: color-mix(in srgb,var(--album-accent) 55%,var(--album-wash)); stroke-width: 1.3; vector-effect: non-scaling-stroke; transform-box: view-box; transform-origin: 350px 255px; opacity: calc((.5 - var(--n) * .06) * (.25 + var(--stage-energy,0) * .75)); animation: ring-out 3.4s ease-out infinite; animation-delay: calc(var(--n) * -.55s); }
@keyframes ring-out { 0% { transform: scale(.55); } 100% { transform: scale(1.25); } }
.am-ecg { stroke-width: 1.7; opacity: calc(.3 + var(--stage-energy,0) * .55); --am-draw: clamp(0, calc(var(--stage-progress,0) / .85), 1); }
.am-arc { stroke-width: 1.5; opacity: calc(.16 + var(--stage-energy,0) * .6); --am-draw: clamp(0, calc((var(--stage-progress,0) - var(--n) * .07) / .55), 1); }
.am-shot { stroke-width: 2; opacity: calc(.3 + var(--stage-energy,0) * .6); --am-draw: clamp(0, calc(var(--stage-progress,0) / .6), 1); }
.am-ball { fill: var(--album-accent); opacity: calc(.35 + var(--stage-energy,0) * .65); offset-path: path("M132 430C240 150 470 118 566 292"); offset-distance: calc(clamp(0, calc(var(--stage-progress,0) / .6), 1) * 100%); filter: drop-shadow(0 0 8px var(--album-accent)); }
.am-pass { stroke-width: 1.6; opacity: calc(.2 + var(--stage-energy,0) * .55); --am-draw: clamp(0, calc((var(--stage-progress,0) - var(--n) * .14) / .5), 1); }
.am-node { fill: var(--album-accent); opacity: calc(clamp(0, calc((var(--stage-progress,0) - var(--n) * .14 - .35) / .12), 1) * (.4 + var(--stage-energy,0) * .6)); transform-box: fill-box; transform-origin: center; animation: node-pulse 2.4s ease-in-out infinite; animation-delay: calc(var(--n) * -.4s); }
@keyframes node-pulse { 50% { transform: scale(1.4); } }
.am-wind { stroke-width: 1.4; opacity: calc(.2 + var(--stage-energy,0) * .5); animation: wind-drift 7s ease-in-out infinite; animation-delay: calc(var(--n) * -.85s); }
@keyframes wind-drift { 0%,100% { transform: translateX(-14px); } 50% { transform: translateX(16px); } }
.am-bolt { fill: var(--album-accent); opacity: 0; }
.player-stage[data-ambient="storm"].is-playing .am-bolt { animation: bolt-strike 6.5s ease-out infinite; }
@keyframes bolt-strike { 0%,84% { opacity: 0; } 86% { opacity: .85; } 89% { opacity: .06; } 92% { opacity: .5; } 100% { opacity: 0; } }
.player-stage[data-player-format="cassette"] .cd-object { visibility: hidden; opacity: 0; pointer-events: none; transform: translateX(14px) scale(.985); }
.player-stage[data-player-format="cd"] .cassette-object { visibility: hidden; opacity: 0; pointer-events: none; transform: translateX(-14px) scale(.985); }

.cassette-object {
  position: relative;
  width: min(100%, 680px);
  aspect-ratio: 1.58;
  padding: 6.5%;
  border: 1px solid #343630;
  border-radius: 24px;
  background: linear-gradient(145deg, #262823 0%, #0c0d0b 55%, #20211e 100%);
  box-shadow: inset 0 2px 1px rgba(255,255,255,.08), inset 0 -5px 14px #050605, 0 34px 60px rgba(10, 11, 16, 0.18);
}
.cassette-object::before { content: ""; position: absolute; inset: 2.2%; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; box-shadow: inset 0 0 24px rgba(0,0,0,.45); pointer-events: none; }
.cassette-screw { position: absolute; z-index: 3; width: 17px; height: 17px; border-radius: 50%; background: radial-gradient(circle, #555 0 12%, #171816 15% 55%, #050605 60%); box-shadow: 0 1px 2px #000; }
.cassette-screw::after { content: ""; position: absolute; left: 4px; top: 7px; width: 9px; height: 2px; background: #030303; transform: rotate(45deg); }
.screw-a { left: 3%; top: 5%; }.screw-b { right: 3%; top: 5%; }.screw-c { left: 3%; bottom: 5%; }.screw-d { right: 3%; bottom: 5%; }
.cassette-label { position: relative; z-index: 1; height: 75%; overflow: hidden; padding: 5% 5% 4%; border: 1px solid rgba(0,0,0,.75); border-radius: 13px; color: #171916; background: #ede8dc; box-shadow: inset 0 0 26px rgba(69,62,48,.12), 0 2px 3px #000; }
.label-topline, .label-bottomline { display: flex; justify-content: space-between; gap: 16px; font: 500 clamp(7px, .65vw, 10px)/1 var(--sans); letter-spacing: .12em; }
.cassette-label > p { margin: 1.8% 0 4%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: clamp(18px, 2.05vw, 31px); line-height: 1; font-weight: 600; letter-spacing: -.045em; }
.cassette-stripes { position: absolute; left: 0; right: 0; top: 43%; display: grid; gap: 5px; }
.cassette-stripes i { display: block; height: 6px; background: var(--album-accent); }.cassette-stripes i:nth-child(2) { background: var(--album-wash); }.cassette-stripes i:nth-child(3) { background: #2e312b; }
.tape-window { position: relative; z-index: 2; height: 41%; display: flex; align-items: center; justify-content: center; gap: 7%; margin: 0 10%; border: 10px solid #181a17; border-radius: 70px; background: #070807; box-shadow: inset 0 0 18px #000, 0 1px 0 rgba(255,255,255,.2); }
.reel { width: 26%; aspect-ratio: 1; border: 7px solid #d7d5c9; border-radius: 50%; background: repeating-conic-gradient(#67685f 0 12deg, #ece9dc 13deg 34deg); box-shadow: 0 0 0 3px #20211e, inset 0 0 0 5px #272824; }
.reel i { display: block; width: 32%; aspect-ratio: 1; margin: 34%; border-radius: 50%; background: #090a09; }
.tape-run { width: 28%; height: 58%; display: flex; align-items: stretch; justify-content: space-around; padding: 6%; background: linear-gradient(90deg,#251e17,#070706 40%,#251e17); border: 2px solid #35342f; }
.tape-run i { width: 1px; background: rgba(231,226,210,.23); }
.label-bottomline { margin-top: 3%; }
.cassette-cutout { position: absolute; z-index: 5; left: 25%; right: 25%; bottom: 2.8%; height: 17%; display: grid; place-items: center; }
.cassette-cutout::before { content: ""; position: absolute; inset: 0; border: 1px solid #3a3c36; background: linear-gradient(180deg,#20221e,#10110f); clip-path: polygon(15% 0,85% 0,100% 100%,0 100%); box-shadow: inset 0 8px 18px rgba(0,0,0,.42); }
.player-stage.is-playing .reel { animation: reel-spin 2.8s linear infinite; }
@keyframes reel-spin { to { transform: rotate(360deg); } }

.cd-object { width: min(92%, 700px); height: min(100%, 520px); min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) 82px; justify-items: center; gap: 12px; }
/* Jewel case: layered glass — edge light, a diagonal sheen, and a real blur. */
.cd-case {
  position: relative;
  width: auto;
  height: min(100%, 410px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 18px;
  background: linear-gradient(138deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.42) 34%,rgba(255,255,255,.28) 60%,rgba(255,255,255,.68) 100%);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.8), inset -1px -1px 0 rgba(10,11,16,.06), inset 14px 0 30px rgba(255,255,255,.35), inset -10px 0 22px rgba(10,11,16,.08), 0 28px 56px rgba(10, 11, 16, 0.14);
  backdrop-filter: blur(9px) saturate(1.2);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.cd-case::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  background: linear-gradient(112deg,transparent 30%,rgba(255,255,255,.55) 43%,rgba(255,255,255,.08) 51%,transparent 60%);
  pointer-events: none;
}
.cd-case::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 5;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.45);
  pointer-events: none;
}
.cd-case.is-drop-ready {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary), 0 28px 60px rgba(10, 11, 16, 0.18);
  transform: scale(1.015);
}
.case-hinge { position: absolute; left: 3%; top: 8%; bottom: 8%; width: 4%; border-left: 1px solid rgba(255,255,255,.7); border-right: 1px solid rgba(10,11,16,.12); }
/* Disc: fine data rings over a calmer iridescence, tinted per album. */
.disc {
  --disc-a: #55635c;
  --disc-b: #d7e85f;
  position: relative;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.055) 0 1px,transparent 1px 3.5px),
    conic-gradient(from 210deg,var(--disc-a),#cdd1c6 10%,var(--disc-b) 20%,#8e959b 30%,#e7e3d7 41%,var(--disc-a) 53%,#b8bfb3 65%,var(--disc-b) 75%,#dcd8ca 87%,var(--disc-a));
  box-shadow: 0 12px 32px rgba(10, 11, 16, 0.18), inset 0 0 0 1px rgba(255,255,255,.35), inset 0 0 26px rgba(10,11,16,.12);
  transition: background .35s;
}
.disc-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 88deg,transparent 0 7%,rgba(255,255,255,.46) 13%,transparent 21% 45%,rgba(255,255,255,.22) 51%,transparent 59%);
  mix-blend-mode: screen;
}
.disc-label { position: relative; z-index: 2; width: 45%; aspect-ratio: 1; border-radius: 50%; color: #171916; background: var(--album-accent); box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 4px 14px rgba(10,11,16,.16); text-align: center; }
.disc-label span, .disc-label strong { position: absolute; left: 50%; display: block; transform: translateX(-50%); }
.disc-label span { top: 12%; font: 500 clamp(5px,.48vw,8px)/1 var(--sans); letter-spacing: .16em; opacity: .72; }
.disc-label strong { top: 64%; width: 130%; font-size: clamp(9px,1.02vw,15px); line-height: .92; letter-spacing: -.045em; }
.disc-hole { position: absolute; z-index: 3; width: 7.5%; aspect-ratio: 1; border-radius: 50%; background: #151714; box-shadow: 0 0 0 5px rgba(255,255,255,.5), 0 0 0 6px rgba(10,11,16,.12); }
.cd-control-slot {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 3.5%;
  width: 46%;
  height: 15%;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 22px rgba(10, 11, 16, 0.12), inset 0 1px rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  isolation: isolate;
}
.case-copy { position: absolute; z-index: 6; top: 3.5%; right: 4%; font: 500 clamp(5px,.48vw,8px)/1 var(--sans); letter-spacing: .12em; color: var(--faint); }
.case-world { position: absolute; z-index: 6; left: 8%; bottom: 4.5%; font: 500 clamp(5px,.48vw,8px)/1 var(--sans); letter-spacing: .12em; color: var(--album-accent); opacity: .85; }
.cd-library-wrap {
  position: relative;
  z-index: 3;
  width: 100%;
  min-width: 0;
  display: grid;
  align-content: end;
  gap: 7px;
  padding-top: 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-wash) 0%, transparent), var(--bg-wash) 28%, var(--bg-wash));
}
.cd-library-wrap > p { margin: 0; text-align: center; color: var(--faint); font: 500 8px/1 var(--sans); letter-spacing: .13em; }
.cd-library { display: flex; align-items: end; justify-content: center; gap: clamp(7px,1.3vw,14px); min-width: 0; }
.mini-cd { position: relative; width: 58px; min-width: 0; display: grid; justify-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: grab; }
.mini-cd:active { cursor: grabbing; }
.mini-cd-art { position: relative; width: 50px; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.06) 0 1px,transparent 1px 2.5px), conic-gradient(from 210deg,var(--disc-a),#cdd1c6 12%,var(--disc-b) 24%,#8e959b 36%,#e7e3d7 48%,var(--disc-a) 62%,var(--disc-b) 78%,#dcd8ca 90%,var(--disc-a)); box-shadow: 0 5px 12px rgba(10, 11, 16, 0.16), inset 0 0 0 1px rgba(255,255,255,.35); transition: transform .2s cubic-bezier(.2,.9,.3,1), box-shadow .2s; }
.mini-cd-art::before { content: ""; position: absolute; inset: 38%; border-radius: 50%; background: var(--disc-b); box-shadow: 0 0 0 3px rgba(255,255,255,.36); }
.mini-cd-art::after { content: ""; position: absolute; inset: 46%; border-radius: 50%; background: var(--bg); }
.mini-cd-number { font: 500 8px/1 var(--sans); letter-spacing: .08em; }
.mini-cd:hover .mini-cd-art, .mini-cd:focus-visible .mini-cd-art { transform: translateY(-4px) rotate(8deg); }
.mini-cd[aria-current="true"] { color: var(--ink); }
.mini-cd[aria-current="true"] .mini-cd-art { box-shadow: 0 0 0 2px var(--primary), 0 7px 16px rgba(10, 11, 16, 0.18); }
.mini-cd[aria-current="true"] .mini-cd-number::before { content: "•"; margin-right: 3px; color: var(--primary); }
.mini-cd.is-dragging { opacity: .45; }
/* The disc spins; the specular sweep and the label counter-spin. */
.player-stage.is-playing .disc { animation: disc-spin 6.5s linear infinite; }
.player-stage.is-playing .disc-shine, .player-stage.is-playing .disc-label { animation: disc-spin 6.5s linear infinite reverse; }
.player-stage.is-playing .cd-case::before { animation: case-sheen 7s ease-in-out infinite; }
@keyframes disc-spin { to { transform: rotate(360deg); } }
@keyframes case-sheen { 0%,100% { opacity: .55; transform: translateX(-3%); } 50% { opacity: 1; transform: translateX(3%); } }
.cd-case.is-swapping .disc { animation: disc-seat .52s cubic-bezier(.2,.85,.25,1) both; }
.cd-case.is-swapping .disc-shine, .cd-case.is-swapping .disc-label { animation: none; }
@keyframes disc-seat { 0% { opacity: 0; transform: scale(.86) translateY(-13px); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }

.track-panel { min-width: 0; align-self: center; padding-right: clamp(0px, 2vw, 28px); }
.track-kicker { display: flex; justify-content: space-between; gap: 20px; margin: 0 0 20px; color: var(--faint); font: 500 11px/1 var(--sans); letter-spacing: .12em; }
.track-panel h1 { margin: 0; max-width: 520px; font-size: clamp(36px, 4vw, 64px); line-height: .93; letter-spacing: -.04em; font-weight: 600; color: var(--ink-deep); }
.track-description { max-width: 460px; margin: 22px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.emotion-route { display: flex; align-items: center; gap: 12px; margin: 30px 0; color: var(--ink); font-size: 14px; }
.emotion-route i { flex: 1; max-width: 110px; height: 1px; background: linear-gradient(90deg,var(--primary),transparent); }
.timeline-wrap { margin: 0 0 26px; }
.timeline, .volume-control input {
  width: 100%;
  height: 28px;
  appearance: none;
  border: 0;
  background: linear-gradient(90deg,var(--primary) var(--range-progress,0%), var(--fill-soft) var(--range-progress,0%)) center / 100% 2px no-repeat;
  cursor: pointer;
  touch-action: none;
}
.timeline:disabled { cursor: wait; opacity: .48; }
.timeline::-webkit-slider-thumb, .volume-control input::-webkit-slider-thumb {
  width: 11px;
  height: 11px;
  appearance: none;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px var(--bg);
}
.time-row { display: flex; justify-content: space-between; margin-top: 8px; color: var(--faint); font: 500 10px/1 var(--sans); }
.object-transport { position: relative; z-index: 2; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: clamp(7px,1vw,12px); }
.round-button, .play-button {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  line-height: 0;
}
.round-button {
  width: clamp(30px,3.2vw,42px);
  height: clamp(30px,3.2vw,42px);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.85);
}
.round-button .icon { width: 16px; height: 16px; }
.play-button {
  width: clamp(42px,4.4vw,58px);
  height: clamp(42px,4.4vw,58px);
  border: 1px solid var(--primary);
  background: var(--primary);
  color: var(--primary-fg);
  box-shadow: 0 8px 20px rgba(10, 11, 16, 0.22);
  transition: transform .2s;
}
.play-button:hover { transform: scale(1.04); }
.play-button .icon { width: 22px; height: 22px; }
.play-button .play-icon { width: 20px; height: 20px; margin-left: 2px; }
.round-button:hover { background: #fff; }
.play-button:active { transform: scale(.98); }
.pause-icon { display: none; }
.is-playing-ui .play-icon { display: none; }
.is-playing-ui .pause-icon { display: block; }
.mute-icon { display: none; }
#mute-button[aria-pressed="true"] .volume-icon { display: none; }
#mute-button[aria-pressed="true"] .mute-icon { display: block; }
.volume-control { width: min(145px,42%); display: flex; align-items: center; gap: 9px; color: var(--faint); font: 500 10px/1 var(--sans); }
.panel-volume { margin: 0 0 0 auto; }
/* ---- Listening scene ----------------------------------------------------- */
.scene-panel { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
html[data-booth="1"] .scene-panel { margin-top: 18px; }
.scene-stage { --scene-progress: 0; --scene-energy: 0; --cue-x: 50%; --cue-dir: 1; position: relative; height: clamp(88px, 9.4vw, 122px); overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #0f110e; }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s ease; }
.scene-stage[data-scene="forest"] .scene-forest, .scene-stage[data-scene="stadium"] .scene-stadium, .scene-stage[data-scene="night"] .scene-night { opacity: 1; }
.scene .sky { fill: var(--album-wash); opacity: calc(.17 + var(--scene-energy) * .33); transition: opacity .3s linear; }

/* Forest */
.scene-forest .dawn-sun { fill: var(--album-accent); opacity: calc(.12 + var(--scene-energy) * .55); transform: translateY(calc(var(--scene-progress) * -26px)); filter: blur(6px); transition: opacity .3s linear, transform .3s linear; }
.scene-forest .ridge { fill: #0b0d0a; }
.scene-forest .ridge-far { fill: color-mix(in srgb,var(--album-wash) 34%,#0b0d0a); transform: translateX(calc(var(--scene-progress) * 8px)); transition: transform .5s linear; }
.scene-forest .ridge-mid { fill: color-mix(in srgb,var(--album-wash) 19%,#090b08); transform: translateX(calc(var(--scene-progress) * -10px)); transition: transform .5s linear; }
.scene-forest .mist ellipse { fill: #f1ece2; opacity: calc(.03 + var(--scene-energy) * .05); animation: mist-drift 15s ease-in-out infinite; }
.scene-forest .mist ellipse:nth-child(2) { animation-duration: 21s; animation-direction: reverse; }
@keyframes mist-drift { 50% { transform: translateX(22px); } }
.scene-forest .campfire .ember { fill: var(--album-accent); opacity: calc(.1 + var(--scene-energy) * .12); filter: blur(7px); }
.scene-forest .campfire .flame { fill: var(--album-accent); opacity: .8; transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.6s ease-in-out infinite; }
@keyframes flicker { 0%,100% { transform: scaleY(1) scaleX(1); opacity: .78; } 35% { transform: scaleY(1.16) scaleX(.9); opacity: 1; } 68% { transform: scaleY(.92) scaleX(1.06); opacity: .66; } }
.scene-forest .rays path { fill: var(--album-accent); opacity: calc(var(--scene-energy) * .06); transform-box: view-box; transform-origin: 296px 126px; animation: ray-sweep 11s ease-in-out infinite; animation-delay: calc(var(--n) * -1.7s); }
@keyframes ray-sweep { 0%,100% { transform: rotate(-3deg) scaleY(.9); } 50% { transform: rotate(3deg) scaleY(1.06); } }
.scene-forest .fly { fill: var(--album-accent); opacity: 0; animation: fly-drift 7s ease-in-out infinite, fly-glow 2.6s ease-in-out infinite; animation-delay: var(--fd), calc(var(--fd) * .7); }
@keyframes fly-drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(var(--fx),var(--fy)); } }
@keyframes fly-glow { 0%,100% { opacity: 0; } 50% { opacity: calc(.25 + var(--scene-energy) * .75); } }
/* Birds arc in from the side the effect was panned to, wings beating. */
.scene-forest .fauna .wing { fill: none; stroke: #f1ece2; stroke-width: 1.6; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; offset-rotate: 0deg; }
.scene-stage[data-cue="bird"].is-cue .wing-a { animation: bird-path 1.9s cubic-bezier(.35,0,.5,1) both, wing-beat .3s steps(2,end) 7 both; }
.scene-stage[data-cue="bird"].is-cue .wing-b { animation: bird-path 1.9s .22s cubic-bezier(.35,0,.5,1) both, wing-beat .27s .22s steps(2,end) 7 both; }
@keyframes bird-path {
  0% { opacity: 0; offset-distance: 0%; }
  14% { opacity: .9; }
  78% { opacity: .9; }
  100% { opacity: 0; offset-distance: 100%; }
}
.scene-stage[data-cue="bird"] .wing { offset-path: path("M-30 118C70 58 150 96 214 52C268 14 330 26 430 -14"); }
.scene-stage[data-cue="bird"].is-cue-left .wing { offset-path: path("M430 118C330 58 250 96 186 52C132 14 70 26 -30 -14"); }
@keyframes wing-beat { 50% { transform: scaleY(.35); } }

/* Stadium */
.scene-stadium { color: var(--album-accent); }
.scene-stadium .floods path { fill: url(#flood-fade); opacity: calc(.09 + var(--scene-energy) * .22); transition: opacity .3s linear; }
.scene-stadium .rig rect { fill: color-mix(in srgb,#f1ece2 30%,transparent); }
.scene-stadium .crowd rect { fill: color-mix(in srgb,#f1ece2 44%,transparent); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(calc(.34 + var(--scene-energy) * var(--r) * .66)); opacity: calc(.42 + var(--scene-energy) * .45); transition: transform .28s cubic-bezier(.3,1.3,.4,1), opacity .3s linear; }
.scene-stadium .court { fill: color-mix(in srgb,var(--album-wash) 22%,#0a0c09); }
.scene-stadium .arc-line { fill: none; stroke: var(--album-accent); stroke-width: 1.4; opacity: calc(.14 + var(--scene-energy) * .5); }
.scene-stadium .ball { fill: var(--album-accent); opacity: calc(.35 + var(--scene-energy) * .65); transform: translate(calc(var(--scene-progress) * 116px), calc(sin(var(--scene-progress) * 3.14159rad) * -34px)); transition: transform .3s linear; }
.scene-stadium .flash { fill: #f1ece2; opacity: 0; animation: cam-flash 4.2s linear infinite; animation-delay: var(--fd); }
@keyframes cam-flash { 0%,100% { opacity: 0; } 1.5% { opacity: calc(.35 + var(--scene-energy) * .65); } 5% { opacity: 0; } }
.scene-stadium .confetto { fill: var(--album-accent); opacity: 0; transform-box: fill-box; transform-origin: center; }
.scene-stadium .confetto:nth-child(even) { fill: #f1ece2; }
.scene-stage[data-cue="crowd"].is-cue .confetto { animation: confetti-fall 2.4s cubic-bezier(.25,.6,.5,1) both; animation-delay: calc(var(--n) * 46ms); }
@keyframes confetti-fall { 0% { opacity: 0; transform: translate(0,-18px) rotate(0); } 12% { opacity: .95; } 100% { opacity: 0; transform: translate(var(--cx),128px) rotate(var(--cr)); } }
.scene-stage[data-cue="crowd"].is-cue .crowd rect { animation: crowd-wave .9s ease-out both; animation-delay: calc(var(--i) * 14ms); }
@keyframes crowd-wave { 40% { transform: scaleY(1.18); } }
.scene-stage[data-cue="whistle"].is-cue .floods path { animation: flood-flash .5s ease-out; }
@keyframes flood-flash { 30% { opacity: .38; } }

/* After dark */
.scene-night .hill { fill: #0d0f13; }
.scene-night .house-body, .scene-night .house-roof { fill: #05060a; }
.scene-night .window { fill: var(--album-accent); opacity: calc(.38 + var(--scene-energy) * .45); transition: opacity .35s linear; }
.scene-night .window-b { opacity: calc(.1 + var(--scene-energy) * .3); }
.scene-night .door { fill: color-mix(in srgb,var(--album-accent) 22%,#0b0c0e); }
.scene-night .rain line { stroke: #f1ece2; stroke-width: 1; opacity: calc(.13 + var(--scene-energy) * .17); animation: rain-fall 1.1s linear infinite; animation-delay: var(--d); }
@keyframes rain-fall { from { transform: translate(14px,-46px); } to { transform: translate(-14px,120px); } }
.scene-night .fog ellipse { fill: #f1ece2; opacity: calc(.03 + var(--scene-energy) * .05); filter: blur(6px); animation: fog-drift 17s ease-in-out infinite; }
.scene-night .fog ellipse:nth-child(2) { animation-duration: 23s; animation-direction: reverse; }
@keyframes fog-drift { 0%,100% { transform: translateX(-24px); } 50% { transform: translateX(24px); } }
.scene-night .bolt { fill: #f1ece2; opacity: 0; filter: drop-shadow(0 0 7px #f1ece2); }
.scene-stage[data-cue="knock"].is-cue .bolt, .scene-stage[data-cue="creak"].is-cue .bolt { animation: bolt-flash .7s ease-out; }
@keyframes bolt-flash { 0% { opacity: 0; } 7% { opacity: 1; } 14% { opacity: .08; } 22% { opacity: .75; } 45% { opacity: 0; } 100% { opacity: 0; } }
.scene-night .lightning { fill: #f1ece2; opacity: 0; }
.scene-stage[data-cue="knock"].is-cue .lightning, .scene-stage[data-cue="creak"].is-cue .lightning { animation: strike .7s ease-out; }
@keyframes strike { 0% { opacity: 0; } 6% { opacity: .5; } 12% { opacity: .05; } 20% { opacity: .34; } 100% { opacity: 0; } }
.scene-stage[data-cue="knock"].is-cue .door { animation: door-hit .7s ease-out; }
@keyframes door-hit { 30% { fill: var(--album-accent); } }

/* Cue ping — lands at the pan position the effect was actually placed at. */
.scene-ping { position: absolute; bottom: 12px; left: var(--cue-x); width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--album-accent); opacity: 0; pointer-events: none; }
.scene-stage.is-cue .ping-left { animation: ping-core .9s ease-out; }
.scene-stage.is-cue .ping-right { animation: ping-ring .9s ease-out; }
@keyframes ping-core { 0% { opacity: 0; transform: scale(.3); } 18% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.8); } }
@keyframes ping-ring { 0% { opacity: .8; transform: scale(.5); } 100% { opacity: 0; transform: scale(4.4); } }
.scene-stage[data-cue="heart"].is-cue .ping-left { animation-name: ping-heart; animation-duration: 1.1s; }
@keyframes ping-heart { 0%,100% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: scale(1.25); } 26% { opacity: .5; transform: scale(.9); } 40% { opacity: 1; transform: scale(1.15); } }

/* What to listen for */
.scene-message { margin: 13px 0 0; color: var(--ink); font-size: 14px; line-height: 1.45; }
.cue-track { list-style: none; margin: 11px 0 0; padding: 0; display: grid; gap: 5px; }
.cue { display: grid; grid-template-columns: 11px minmax(0,1fr) auto; align-items: center; gap: 9px; color: color-mix(in srgb,var(--ink) 34%,transparent); font: 500 10px/1.3 var(--sans); letter-spacing: .05em; transition: color .3s ease; }
.cue-dot { width: 6px; height: 6px; justify-self: center; border: 1px solid currentColor; border-radius: 50%; transition: background .3s ease, box-shadow .3s ease, transform .3s ease; }
.cue-side { font-size: 7px; letter-spacing: .14em; opacity: .55; }
.cue.is-passed { color: color-mix(in srgb,var(--ink) 78%,transparent); }
.cue.is-passed .cue-dot { background: var(--album-accent); border-color: var(--album-accent); }
.cue.is-firing { color: var(--album-accent); }
.cue.is-firing .cue-dot { animation: cue-pop .8s ease-out; }
@keyframes cue-pop { 0% { transform: scale(1); box-shadow: 0 0 0 0 var(--album-accent); } 30% { transform: scale(1.7); } 100% { transform: scale(1); box-shadow: 0 0 0 9px transparent; } }

.player-status { min-height: 15px; margin: 16px 0 0; color: var(--muted); font: 500 11px/1.4 var(--sans); }

.track-rail {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  border-top: 1px solid var(--line);
  background: rgba(250, 250, 250, 0.88);
  backdrop-filter: blur(10px);
}
.track-button {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 7px;
  padding: 14px 18px 12px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition: background .2s,color .2s;
}
.track-button:last-child { border-right: 0; }
.track-button:hover { background: rgba(10, 11, 16, 0.03); color: var(--ink); }
.track-button .rail-number,
.track-button .rail-meta { font: 500 10px/1 var(--sans); letter-spacing: .08em; }
.track-button .rail-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 500; }
.track-button[aria-current="true"] { color: var(--ink); box-shadow: inset 0 2px 0 var(--primary); }
.track-button[aria-current="true"] .rail-number { color: var(--primary); }
.track-button[aria-current="true"] .rail-number::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--primary);
}

.make-dialog {
  width: min(900px,calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: auto auto 0;
  padding: 0;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  color: var(--ink);
  background: #ffffff;
  box-shadow: 0 -20px 60px rgba(10, 11, 16, 0.16);
}
.make-dialog::backdrop {
  background: rgba(246, 247, 249, 0.72);
  backdrop-filter: blur(12px);
}
.make-dialog[open] { animation: sheet-in .25s ease both; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(26px); } }
.make-dialog form { padding: 30px; }
.make-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 26px; }
.make-heading p { margin: 0 0 7px; color: var(--faint); font: 500 10px/1 var(--sans); letter-spacing: .16em; }
.make-heading h2 { margin: 0; font-size: 34px; letter-spacing: -.04em; color: var(--ink-deep); font-weight: 600; }
.make-heading button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  line-height: 0;
}
.make-heading button .icon { width: 18px; height: 18px; }
.make-dialog fieldset { display: grid; grid-template-columns: 140px 1fr; align-items: center; margin: 0; padding: 18px 0; border: 0; border-top: 1px solid var(--line); }
.make-dialog legend { display: contents; }
.make-dialog legend span { margin-right: 10px; color: var(--faint); font: 500 10px/1 var(--sans); }
.choice-row { display: flex; gap: 9px; flex-wrap: wrap; }
.choice-row label { position: relative; cursor: pointer; }
.choice-row input { position: absolute; opacity: 0; pointer-events: none; }
.choice-row label span {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font: 500 11px/1 var(--sans);
  background: #fff;
}
.choice-row input:checked + span { border-color: var(--primary); color: var(--primary-fg); background: var(--primary); }
.choice-row input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.create-button {
  width: 100%;
  min-height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  color: var(--primary-fg);
  background: var(--primary);
  cursor: pointer;
  font: 500 13px/1 var(--sans);
  letter-spacing: .08em;
}
.create-button .icon { color: inherit; }
.prototype-note { margin: 12px 0 0; color: var(--muted); font: 500 11px/1.4 var(--sans); }

@media (max-width: 1050px) {
  body { overflow-y: auto; }
  .atmosphere-walkman, .atmosphere-record { opacity: .045; }
  .experience-shell { display: block; }
  .listening-surface { min-height: auto; grid-template-columns: 1fr; gap: 24px; padding-bottom: 32px; }
  .track-panel { max-width: 700px; width: 100%; margin: 0 auto; padding: 0; }
  .track-panel h1 { font-size: clamp(36px,6vw,52px); }
  .track-description { margin-top: 16px; }
  .emotion-route { margin: 22px 0; }
  .timeline-wrap { margin-bottom: 20px; }
  .scene-panel { margin-top: 22px; padding-top: 16px; }
  .track-rail { overflow-x: auto; grid-template-columns: repeat(6,minmax(180px,1fr)); min-height: 88px; }
}

/* Below the kiosk breakpoint the shell stops being a grid and stacks, so the
   booth's "one viewport, never scroll" lock stops making sense: it left the
   world rail and the Make CTA below a viewport that refused to scroll. Azure
   serves booth mode by default, so this is what a phone visitor actually gets. */
@media (max-width: 1050px) {
  html[data-booth="1"],
  html[data-booth="1"] body {
    height: auto;
    max-height: none;
    overflow: visible !important;
  }
  html[data-booth="1"] .experience-shell {
    height: auto;
    max-height: none;
    overflow: visible;
    padding-bottom: 28px;
  }
  html[data-booth="1"] .listening-surface {
    height: auto;
    max-height: none;
    overflow: visible;
    grid-template-columns: minmax(0, 1fr);
    padding: 8px clamp(16px, 4vw, 28px) 4px;
  }
  html[data-booth="1"] .track-panel {
    align-self: auto;
    max-height: none;
    overflow: visible;
    max-width: 640px;
    margin: 0 auto;
  }
  html[data-booth="1"] .track-description { -webkit-line-clamp: none; }
  html[data-booth="1"] .cassette-object { width: min(100%, 620px); }
  html[data-booth="1"] .booth-worlds {
    justify-content: flex-start;
    padding-right: 0;
    padding-bottom: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  html[data-booth="1"] .booth-worlds::-webkit-scrollbar { display: none; }
}

/* Tablet: the object row gets an explicit height so the cassette's 1.58 aspect
   ratio can never push past it and collide with the panel below. */
@media (max-width: 900px) and (min-width: 641px) {
  .object-column { height: auto; grid-template-rows: 48px min(72vw,520px); }
  .player-stage { min-height: 0; }
  .cassette-object { width: min(100%,640px); }
  .cd-object { height: 100%; }
}

@media (max-width: 640px) {
  .atmosphere { display: none; }
  .site-header { height: 52px; padding: 0 16px; grid-template-columns: 1fr auto; }
  .site-header > p { display: none; }
  .wordmark-logo { height: 22px; }
  .make-link { font-size: 11px; min-height: 34px; padding: 0 14px; }
  .listening-surface { padding: 18px 16px 28px; }
  .object-column { height: auto; grid-template-rows: auto minmax(300px,78vw); }
  .object-topline { align-items: center; }
  .object-topline > p { display: none; }
  .format-switch { width: 100%; }
  .player-stage { min-height: 0; }
  .cassette-object { width: 100%; border-radius: 15px; }
  .cassette-screw { width: 11px; height: 11px; }
  .cassette-screw::after { left: 3px; top: 5px; width: 6px; height: 1px; }
  .tape-window { border-width: 6px; }
  .reel { border-width: 4px; }
  .cd-object { width: 100%; height: 100%; grid-template-rows: minmax(0,1fr) 68px; gap: 7px; }
  .cd-case { width: auto; height: min(100%,245px); }
  .disc-label { width: 46%; }
  .disc-label strong { font-size: 11px; }
  .cd-library-wrap { gap: 5px; }
  .cd-library-wrap > p { font-size: 6px; }
  .cd-library { justify-content: flex-start; gap: 8px; padding: 0 2px; overflow-x: auto; scrollbar-width: none; }
  .cd-library::-webkit-scrollbar { display: none; }
  .mini-cd { width: 46px; flex: 0 0 46px; }
  .mini-cd-art { width: 41px; }
  .growth-story { z-index: 1; inset: 0 0 28%; overflow-x: clip; overflow-y: hidden; }
  .player-stage[data-player-format="cd"] .growth-story { inset: 0 0 32%; }
  .stage-ambient { inset: 0 0 28%; }
  .player-stage[data-player-format="cd"] .stage-ambient { inset: 0 0 32%; }
  .player-stage[data-album-id="hidden-trail"] .growth-story { opacity: .68; }
  .growth-story svg { transform: scale(1.02); }
  .growth-story > p {
    display: flex;
    top: 2%;
    bottom: auto;
    font-size: 8px;
    letter-spacing: .08em;
  }
  .track-panel h1 { font-size: clamp(38px,13vw,58px); }
  .track-description { margin-top: 16px; }
  .emotion-route { margin: 22px 0; }
  .cassette-cutout { left: 21%; right: 21%; height: 19%; bottom: 1.5%; }
  .round-button { width: 30px; height: 30px; }
  .play-button { width: 42px; height: 42px; }
  .volume-control { width: 38%; }
  .track-rail { grid-template-columns: repeat(6,160px); }
  .make-dialog form { padding: 22px 16px; }
  .make-dialog fieldset { grid-template-columns: 1fr; gap: 12px; }
  .choice-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
  .choice-row label span { min-height: 48px; padding: 0 8px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .scene-stage .scene *, .scene-ping { animation: none !important; }
}

/* Short desktop/tablet viewports: keep the listening surface from forcing scroll. */
@media (min-width: 901px) and (max-height: 820px) {
  .listening-surface { min-height: 0; padding-top: 14px; padding-bottom: 12px; gap: clamp(20px, 3vw, 48px); }
  .track-panel h1 { font-size: clamp(30px, 3.2vw, 48px); }
  .track-description { margin-top: 12px; }
  .emotion-route { margin: 14px 0; }
  .timeline-wrap { margin-bottom: 14px; }
  .scene-stage { height: clamp(72px, 8vw, 100px); }
}