/* Album pages (docs/music-player.md): the player deck, its console, the spectrum meter and the track list.
   One machined deck: static brushed and inset materials, a conic-brass Play key and keys that travel when pressed.
   Only the measured meter, the Play key's level glow and the seek fill move, and only while music plays.
   Geometry the Safari drag handlers depend on: the ranges are 44px tall, their thumbs 15px wide (--range-thumb),
   and music-player.js maps a pointer to the thumb's centre across width minus one thumb. */
.music-player-page {
  /* The deck's own material palette (a content palette, like a project study's). */
  --deck-edge: rgba(233, 221, 188, 0.22);
  --deck-ink: #f4edda;
  --deck-muted: #b2b0a1;
  --deck-legend: #b1b7a9;
  --deck-brass: #dbb77c;
  --deck-lamp: #f1cc85;
  --deck-well: #080d0b;
  --deck-shadow: #080a08;
  --deck-fill: #c8a56a;
  --focus-ring-color: #e2b385;
  --range-thumb: 15px;
  --led-pitch: 7px;
  --led-count: 10;
}

/* The page */
.album-player {
  padding: 2.3rem 0 5.5rem;
}

.album-player__backdrop {
  position: absolute;
  inset: -4rem;
  z-index: -3;
  overflow: hidden;
}

.album-player__backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(24px) saturate(0.88) brightness(0.46);
  transform: scale(1.08);
  opacity: 0.7;
}

.album-player__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 6, 4, 0.92) 0%, rgba(5, 6, 4, 0.5) 48%, rgba(5, 6, 4, 0.9) 100%),
    linear-gradient(180deg, rgba(5, 6, 4, 0.34), rgba(5, 6, 4, 0.96) 82%);
}

.album-player__shell {
  display: grid;
  gap: 1.2rem;
}

.album-player :is(button, input, output) {
  font: inherit;
}

/* Back link: a 44px hit area around a quiet label; colour and a drawn hairline answer hover and focus. */
.music-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  min-height: 44px;
  margin-block: -9px;
  color: rgba(244, 228, 197, 0.76);
  font-weight: 600;
  transition: color var(--motion-quick) var(--ease-standard);
}

.music-back-link > .icon {
  color: var(--color-accent);
  transition: transform var(--motion-quick) var(--ease-standard);
}

.music-back-link > span {
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size var(--motion-medium) var(--ease-standard);
}

.music-back-link:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
  border-radius: 4px;
}

.music-back-link:focus-visible,
.music-back-link:active {
  color: #fff1cb;
}

.music-back-link:focus-visible > span {
  background-size: 100% 1px;
}

.music-back-link:focus-visible > .icon {
  transform: translateX(-3px);
}

@media (hover: hover) and (pointer: fine) {
  .music-back-link:hover {
    color: #fff1cb;
  }

  .music-back-link:hover > span {
    background-size: 100% 1px;
  }

  .music-back-link:hover > .icon {
    transform: translateX(-3px);
  }
}

/* The deck */
.album-player__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.8rem);
  align-items: center;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--deck-edge);
  border-bottom-color: var(--deck-shadow);
  border-radius: 16px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.017) 0 1px, transparent 1px 3px),
    linear-gradient(145deg, #31332e 0%, #1d201d 24%, #151815 70%, #242722);
  box-shadow: inset 0 1px 0 #77766a, inset 0 -3px 0 #090b09, 0 3px 0 #292c27, 0 28px 70px #0008;
  isolation: isolate;
}

.album-cover-stage {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 1;
  padding: 7px;
  border: 1px solid var(--deck-shadow);
  border-radius: 8px;
  background: #0b0d0b;
  box-shadow: 0 1px 0 #5f61564d, inset 0 1px 6px #000, 0 12px 24px #0005;
}

.album-cover-stage picture,
.album-cover-stage img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.album-cover-stage img {
  object-fit: cover;
  border-radius: 3px;
}

.album-console {
  position: relative;
  display: grid;
  gap: 0.7rem;
  min-width: 0;
}

.album-console [data-music-audio] {
  display: none;
}

/* The display: an inset well holding the current track and the meter. */
.music-display,
.music-now-playing,
.music-meter {
  min-width: 0;
}

.music-display {
  padding: 1.4rem 1.4rem 0.85rem;
  border: 1px solid #060806;
  border-radius: 9px;
  background: linear-gradient(120deg, #ffffff05, transparent 50%), var(--deck-well);
  box-shadow: inset 0 2px 10px #000, 0 1px 0 #73766a66, 0 0 0 3px #0002;
}

.music-now-playing {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  min-height: var(--title-reserve, 0);
}

.music-now-playing__label,
.music-meter__heading,
.music-meter__scale,
.music-faceplate {
  font-size: var(--text-floor);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.music-now-playing__label {
  color: var(--deck-brass);
}

/* The title keeps its full size and wraps; music-player.js gives the block the height it has with the album's tallest
   title at the current width (--title-reserve on .music-now-playing), so the keys never move when the track changes. */
.music-now-playing__title {
  display: block;
  min-width: 0;
  margin: 0;
  color: var(--deck-ink);
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.4vw, 2.6rem);
  font-weight: var(--heading-weight);
  line-height: 1.12;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.has-audio-error .music-now-playing__title::after {
  content: " unavailable";
  color: #f1a37a;
}

/* The page's heading: release and album, set small under the title. */
.music-now-playing__album {
  margin: 0;
  color: var(--deck-muted);
  font-family: var(--font-text);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}

/* The spectrum meter: an LED ladder of --led-count segments (5px lit, 2px dark) per band. music-player.js lights
   whole segments (--lit) and holds each band's peak segment (--peak) for 400ms before it falls. The colour belongs
   to the segment's height, as on a real ladder: green brass at the floor, cream at the top. */
.music-meter {
  margin-top: 1rem;
}

.music-meter__heading,
.music-meter__scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--deck-legend);
}

.music-meter__scale {
  color: #899382;
}

.music-meter__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.music-meter__status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #666c5d;
  box-shadow: 0 0 0 2px #000;
  transition: background-color var(--motion-medium) ease, box-shadow var(--motion-medium) ease;
}

.is-playing .music-meter__status::before {
  background: var(--deck-lamp);
  box-shadow: 0 0 0 2px #000, 0 0 8px #ebbd7199;
}

.music-visualizer {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: calc(var(--led-count) * var(--led-pitch) - 2px);
  margin: 0.7rem 0 0.5rem;
  border-bottom: 1px solid #d3ad6533;
  background: repeating-linear-gradient(0deg, #d6bc8010 0 1px, transparent 1px 14px);
  contain: paint;
  overflow: hidden;
}

.music-visualizer span {
  --lit: 1;
  --peak: 0;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  opacity: calc(0.55 + var(--lit) / var(--led-count) * 0.45);
}

.music-visualizer span::before,
.music-visualizer span::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  border-radius: 1px 1px 0 0;
}

.music-visualizer span::before {
  top: 0;
  background: linear-gradient(0deg, #939b72, #dbbc79 62%, #fff0b9);
  clip-path: inset(calc(100% - var(--lit) * var(--led-pitch)) 0 0);
}

.music-visualizer span::after {
  height: calc(var(--led-pitch) - 2px);
  background: #fff3c9;
  box-shadow: 0 0 6px #ffe2a07a;
  opacity: clamp(0, calc(var(--peak) - var(--lit)), 1);
  transform: translateY(calc((1 - var(--peak)) * var(--led-pitch)));
}

/* The dark gaps between segments, drawn once over every band. */
.music-visualizer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 calc(var(--led-pitch) - 2px), #090e0b calc(var(--led-pitch) - 2px) var(--led-pitch));
}

.music-visualizer:not([data-visualizer-state="live"]) span {
  opacity: 0.32;
}

.music-visualizer[data-visualizer-state="paused"] span {
  opacity: calc(0.3 + var(--lit) / var(--led-count) * 0.3);
}

/* The timeline */
.music-timeline {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) 2.6rem;
  gap: 0.65rem;
  align-items: center;
}

.music-time {
  color: #cccaba;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.music-time:last-child {
  text-align: right;
}

.music-seek-shell {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 44px;
  cursor: pointer;
}

.is-seek-loading .music-seek-shell {
  cursor: progress;
}

/* The ranges: a 4px well with a brass fill painted to the thumb's centre (music-player.js writes
   --range-progress as calc(thumb / 2 + (100% - thumb) * ratio)). */
.music-range {
  --range-progress: calc(var(--range-thumb) / 2);
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  border: 0;
  border-radius: 3px;
  background:
    linear-gradient(90deg, var(--deck-fill) var(--range-progress), #080c09 var(--range-progress)) center / 100% 4px no-repeat,
    linear-gradient(#000, #000) center / 100% 6px no-repeat,
    linear-gradient(#727567, #727567) center calc(50% + 3px) / 100% 1px no-repeat;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.music-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: transparent;
}

.music-range::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: #080c09;
}

.music-range::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--deck-fill);
}

.music-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--range-thumb);
  height: 23px;
  margin-top: -9.5px;
  border: 1px solid #12150f;
  border-radius: 3px;
  background:
    linear-gradient(90deg, transparent 42%, #2f3527 42% 55%, #ffffff80 55% 63%, transparent 63%),
    linear-gradient(#f0e8cf, #b6b4a0 25%, #8b8e7c 80%, #626a57);
  box-shadow: inset 0 1px 0 #fff8, 0 2px 2px #000c, 0 0 0 1px #050805;
}

.music-range::-moz-range-thumb {
  width: var(--range-thumb);
  height: 23px;
  border: 1px solid #12150f;
  border-radius: 3px;
  background:
    linear-gradient(90deg, transparent 42%, #2f3527 42% 55%, #ffffff80 55% 63%, transparent 63%),
    linear-gradient(#f0e8cf, #b6b4a0 25%, #8b8e7c 80%, #626a57);
  box-shadow: inset 0 1px 0 #fff8, 0 2px 2px #000c, 0 0 0 1px #050805;
}

.music-range:active {
  cursor: grabbing;
}

.music-range:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* The keys: machined caps that travel 2px and shed their drop shadow when pressed. */
.music-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.55rem, 1.25vw, 1.1rem);
  margin: 0.1rem 0 0.35rem;
}

.music-icon-button,
.music-play-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.music-icon-button {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border: 1px solid #0b0e0a;
  border-top-color: #74776a;
  border-radius: 8px;
  color: #d6d6c4;
  background: linear-gradient(155deg, #42463d, #2c3028 40%, #22271f);
  box-shadow: inset 0 0 0 1px #ffffff08, inset 0 -2px 0 #10150e, 0 3px 0 #070a06, 0 5px 7px #0006;
  transition:
    transform var(--motion-instant) ease,
    box-shadow var(--motion-instant) ease,
    color var(--motion-quick) ease,
    border-color var(--motion-quick) ease;
}

.music-play-button {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border: 1px solid #272619;
  border-radius: 50%;
  color: #292718;
  background:
    repeating-radial-gradient(circle at center, transparent 0 1px, #fff2 1px 1.5px, transparent 1.5px 3px),
    conic-gradient(from -35deg, #a58b59, #ead3a0 16%, #c9b07e 35%, #a89363 51%, #f4ddb0 73%, #c8ae78 89%, #a58b59);
  box-shadow: inset 0 0 0 2px #ffffff52, inset 0 0 0 4px #67583466, 0 3px 0 #6b6145, 0 5px 0 #050904, 0 8px 12px #0008;
  transition: transform var(--motion-instant) ease, box-shadow var(--motion-instant) ease;
}

/* The Play key's bezel ring, and behind it a brass glow that follows the music's measured level (--drive, written
   by music-player.js from the same analyser frame as the meter; opacity only, so the compositor draws it). */
.music-play-button::after,
.music-play-button::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.music-play-button::after {
  inset: -6px;
  border: 1px solid #a7a78b3b;
  border-top-color: #a7a78b70;
  transition: border-color var(--motion-medium) ease;
}

.music-play-button::before {
  inset: -12px;
  z-index: -1;
  background: radial-gradient(closest-side, #f4d99a66, #e3bd7433 58%, transparent);
  opacity: var(--drive, 0);
  transition: opacity 120ms linear;
  will-change: opacity;
}

.is-playing .music-play-button::after {
  border-color: #d8ba7666;
}

.music-icon-button svg,
.music-play-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.music-play-button svg {
  width: 24px;
  height: 24px;
}

.music-play-button .music-play-icon path,
.album-track__play path {
  fill: currentColor;
  stroke: none;
}

.music-pause-icon,
.is-playing .music-play-icon {
  display: none;
}

.is-playing .music-pause-icon {
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  .music-icon-button:hover {
    color: #fff1cd;
    border-top-color: #9a9b88;
  }
}

.music-icon-button:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 3px #0005, 0 1px 0 #070a06;
}

.music-play-button:active {
  transform: translateY(2px);
  box-shadow: inset 0 0 0 2px #ffffff52, inset 0 0 0 4px #67583466, 0 1px 0 #6b6145, 0 3px 0 #050904, 0 4px 6px #0008;
}

.music-icon-button:focus-visible,
.music-play-button:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 4px;
}

/* Shuffle, repeat and mute are toggles: each carries a pilot lamp that lights brass while it is on. Repeat cycles
   off, album and track; the track mode engraves a 1 inside the loop. */
.music-toggle-button::after,
.music-mute-button::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #151912;
  box-shadow: inset 0 1px 1px #000;
  transition: background-color var(--motion-quick) ease, box-shadow var(--motion-quick) ease;
}

.music-icon-button[aria-pressed="true"] {
  color: #f8d792;
  border-top-color: #c7ad78;
}

.music-icon-button[aria-pressed="true"]::after {
  background: var(--deck-lamp);
  box-shadow: 0 0 5px #ebbd71b3, inset 0 -1px 1px #a57b3a;
}

.music-repeat-one,
.music-mute-cross {
  display: none;
}

[data-repeat-mode="one"] .music-repeat-one,
.is-muted .music-mute-cross {
  display: inline;
}

.is-muted .music-mute-wave {
  display: none;
}

/* Volume: the mute key, the fader over an engraved scale, and a recessed readout. */
.music-volume {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 2.4rem;
  gap: 0.9rem;
  align-items: center;
  width: 100%;
  max-width: 360px;
  margin: 0.3rem auto 0;
}

.music-volume__fader {
  min-width: 0;
  background: repeating-linear-gradient(90deg, #bbbda455 0 1px, transparent 1px 10%) center calc(50% + 12px) / calc(100% - var(--range-thumb)) 3px no-repeat;
}

.music-volume__readout {
  padding: 0.25rem 0.3rem;
  border-radius: 3px;
  background: #0c100b;
  box-shadow: inset 0 1px 3px #000, 0 1px 0 #ffffff1f;
  color: #e8d5a8;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.music-faceplate {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.85rem;
  border-top: 1px solid #050805;
  box-shadow: inset 0 1px 0 #ffffff12;
  color: #a2a797;
  letter-spacing: 0.14em;
}

/* The track list */
.album-track-panel {
  border: 1px solid #c6c5a82b;
  border-radius: 12px;
  background: linear-gradient(120deg, #1b211be6, #111710f5);
  box-shadow: inset 0 1px 0 rgba(255, 244, 211, 0.08), 0 30px 80px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}

.album-track-panel__header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
  padding: 1.2rem 1.4rem;
  border-bottom: 1px solid rgba(244, 209, 146, 0.12);
}

.album-track-panel__header h2 {
  margin: 0;
  color: #fff1cb;
  font-size: 1.45rem;
  font-weight: var(--heading-weight);
  letter-spacing: var(--track-heading);
}

.album-track-panel__header p {
  margin: 0 0 0.18rem;
  color: #b3b8a7;
  font-size: 0.8125rem;
}

.album-track-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0.4rem;
  list-style: none;
}

.album-track-list li {
  min-width: 0;
}

.album-track {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 2.6rem 2rem;
  gap: 0.6rem;
  align-items: center;
  width: 100%;
  min-height: 70px;
  padding: 0.75rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: rgba(244, 228, 197, 0.72);
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--motion-quick) ease,
    border-color var(--motion-quick) ease,
    color var(--motion-quick) ease;
}

@media (hover: hover) and (pointer: fine) {
  .album-track:hover {
    color: #fff6df;
    border-color: rgba(244, 209, 146, 0.18);
    background: rgba(244, 209, 146, 0.06);
  }
}

.album-track:focus-visible {
  color: #fff6df;
  border-color: rgba(244, 209, 146, 0.18);
  background: rgba(244, 209, 146, 0.06);
  outline: 2px solid var(--focus-ring-color);
  outline-offset: -3px;
}

.album-track.is-active {
  color: #fff6df;
  border-color: #d3be813b;
  background: linear-gradient(100deg, #d1b47016, #a6b77f09);
  box-shadow: inset 2px 0 0 #d3b274;
}

.album-track:active {
  background: #d1b4701f;
}

.album-track__number,
.album-track__duration {
  color: rgba(244, 228, 197, 0.58);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.album-track__title {
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
}

.album-track__duration {
  text-align: right;
}

.album-track__cue {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  justify-self: end;
  border: 1px solid #abb19133;
  border-radius: 5px;
  background: #131a11;
  box-shadow: inset 0 1px 0 #fff1, 0 2px 0 #060a05;
  color: #ffe0a3;
}

.album-track__cue svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.album-track__pause,
.album-track.is-playing .album-track__play {
  display: none;
}

.album-track.is-playing .album-track__pause {
  display: block;
}

/* Short desktop windows */
@media (min-width: 761px) and (max-height: 820px) {
  .music-player-page {
    --led-count: 8;
  }

  .album-player {
    padding: 1.6rem 0 4.25rem;
  }

  .album-player__stage {
    padding: 1.6rem;
  }

  .album-console {
    gap: 0.45rem;
  }

  .music-display {
    padding: 1.1rem 1.25rem 0.7rem;
  }

  .music-meter {
    margin-top: 0.65rem;
  }
}

@media (max-width: 820px) {
  .album-track-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Phones: the Play key belongs on the first screen. The cover takes the height left over by the console (with
   a vh fallback for engines without small-viewport units); the display opens so the current track sits above the
   timeline and keys, and the meter becomes its own inset well below them. */
@media (max-width: 760px) {
  .music-player-page {
    --led-count: 7;
  }

  .album-player {
    padding: 1rem 0 4rem;
  }

  .album-player__shell {
    gap: 0.9rem;
  }

  .album-player__stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
  }

  .album-cover-stage {
    width: clamp(132px, calc(100vh - 480px), 320px);
    width: clamp(132px, calc(100svh - 480px), 320px);
    margin: 0 auto;
    padding: 6px;
  }

  .album-console {
    gap: 0.55rem;
  }

  .music-display {
    display: contents;
  }

  .music-now-playing,
  .music-meter {
    padding: 0.9rem 1rem 0.8rem;
    border: 1px solid #060806;
    border-radius: 9px;
    background: linear-gradient(120deg, #ffffff05, transparent 50%), var(--deck-well);
    box-shadow: inset 0 2px 10px #000, 0 1px 0 #73766a66, 0 0 0 3px #0002;
  }

  .music-now-playing {
    order: 0;
    gap: 0.35rem;
  }

  .music-now-playing__title {
    font-size: 1.75rem;
  }

  .music-timeline {
    order: 1;
  }

  .music-controls {
    order: 2;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0;
  }

  .music-meter {
    order: 3;
    margin-top: 0.35rem;
  }

  .music-visualizer {
    margin: 0.6rem 0 0.45rem;
  }

  .music-volume {
    order: 4;
    max-width: none;
    margin-top: 0.1rem;
  }

  .music-faceplate {
    order: 5;
  }

  .album-track-panel__header {
    flex-direction: column;
    align-items: start;
    gap: 0.2rem;
  }
}

@media (max-width: 520px) {
  .album-track {
    grid-template-columns: 1.8rem minmax(0, 1fr) 2rem;
    row-gap: 0.15rem;
  }

  .album-track__duration {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }

  .album-track__cue {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 420px) {
  .album-player__stage {
    padding: 0.8rem;
    border-radius: 12px;
  }

  .album-cover-stage {
    width: clamp(120px, calc(100vh - 470px), 280px);
    width: clamp(120px, calc(100svh - 470px), 280px);
  }

  .music-now-playing,
  .music-meter {
    padding: 0.8rem 0.85rem 0.7rem;
  }

  .music-now-playing__title {
    font-size: 1.6rem;
  }

  .music-icon-button {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .music-play-button {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
  }

  .music-volume {
    gap: 0.65rem;
  }

  .music-timeline {
    grid-template-columns: 2.4rem minmax(0, 1fr) 2.4rem;
    gap: 0.35rem;
  }

  .album-track-panel__header {
    padding: 1rem;
  }
}

@media (max-width: 360px) {
  .album-player__stage {
    padding: 0.7rem;
  }

  .music-controls {
    gap: 0.25rem;
  }

  .music-play-button {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }
}

/* Short phones (an iPhone SE under Safari's toolbars): the cover becomes a thumbnail beside the current track, so the
   keys stay on the first screen however the title wraps. */
@media (max-width: 760px) and (max-height: 620px) and (orientation: portrait) {
  .album-player__stage {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.75rem;
    row-gap: 0.55rem;
    align-items: start;
  }

  .album-console {
    display: contents;
  }

  .album-cover-stage {
    grid-column: 1;
    grid-row: 1;
    width: 92px;
    margin: 0;
    padding: 4px;
  }

  .music-now-playing {
    grid-column: 2;
    grid-row: 1;
  }

  .music-now-playing__title {
    font-size: 1.35rem;
  }

  .music-timeline,
  .music-controls,
  .music-meter,
  .music-volume,
  .music-faceplate {
    grid-column: 1 / -1;
  }
}

/* The narrowest short screens (320 x 460): the album line steps out of sight (it stays the page's heading for
   assistive technology; the thumbnail and the faceplate still name the release). */
@media (max-width: 360px) and (max-height: 620px) and (orientation: portrait) {
  .music-now-playing__album {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Phones on their side: a two-column deck with the cover beside the console, sized to the height under the
   sticky header. The meter keeps a slim well of four segments. */
@media (orientation: landscape) and (max-height: 500px) {
  .music-player-page {
    --led-count: 4;
  }

  .album-player {
    padding: 0.5rem 0 3rem;
  }

  .album-player__shell {
    gap: 0.55rem;
  }

  .album-player__stage {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    padding: 0.7rem;
    border-radius: 12px;
  }

  .album-cover-stage {
    align-self: start;
    width: calc(100vh - 150px);
    width: calc(100svh - 150px);
    padding: 5px;
  }

  .album-console {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
  }

  .music-display {
    display: contents;
  }

  .music-now-playing {
    order: 0;
    gap: 0.15rem;
    padding: 0.5rem 0.75rem 0.45rem;
    border: 1px solid #060806;
    border-radius: 8px;
    background: var(--deck-well);
    box-shadow: inset 0 2px 8px #000, 0 1px 0 #73766a66;
  }

  .music-now-playing__label {
    display: none;
  }

  .music-now-playing__title {
    font-size: 1.3rem;
  }

  .music-timeline {
    order: 1;
  }

  .music-controls {
    order: 2;
    justify-content: center;
    gap: 0.9rem;
    margin: 0;
  }

  .music-meter {
    order: 3;
    margin: 0;
  }

  .music-meter__heading,
  .music-meter__scale,
  .music-faceplate {
    display: none;
  }

  .music-visualizer {
    margin: 0.15rem 0 0;
  }

  .music-volume {
    order: 4;
    max-width: none;
    margin: 0;
  }

  .music-play-button {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }

  .music-icon-button {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }
}

/* Without JavaScript nothing on the deck can play: the dead transport steps aside and every track row offers the
   browser's own controls. */
.album-track__native {
  display: block;
  width: 100%;
  height: 36px;
  margin: 0.1rem 0 0.6rem;
  color-scheme: dark;
}

@media (scripting: none) {
  .music-timeline,
  .music-controls,
  .music-volume,
  .music-meter,
  .album-track__cue {
    display: none;
  }

  .album-track {
    cursor: default;
  }
}

@media (prefers-reduced-motion: reduce) {
  .music-back-link,
  .music-back-link > .icon,
  .music-back-link > span,
  .music-icon-button,
  .music-play-button,
  .music-play-button::before,
  .album-track {
    transition: none;
  }

  .music-play-button::before {
    display: none;
  }
}

@media (forced-colors: active) {
  .album-player__backdrop,
  .music-visualizer::after,
  .music-play-button::before {
    display: none;
  }

  .music-display,
  .music-now-playing,
  .music-meter,
  .album-player__stage,
  .music-icon-button,
  .music-play-button {
    border: 1px solid ButtonText;
  }

  .music-range {
    appearance: auto;
    background: none;
  }

  .music-visualizer span::before {
    background: CanvasText;
  }

  .music-icon-button[aria-pressed="true"] {
    outline: 2px solid Highlight;
    outline-offset: -4px;
  }
}