/* Coverflow port of the supplied component, using the site's real media. */
.listening-room .music-section {
  --cover-width: clamp(148px, 22vw, 260px);
  position: absolute;
  inset: clamp(160px, 15vh, 180px) 0 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 0;
  pointer-events: auto;
}
.listening-room .selection-heading {
  position: static;
  flex: 0 0 auto;
  height: auto;
  margin: 0 0 4px;
}
.listening-room .record-stage {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  width: 100%;
  /* Extra vertical room avoids clipping the media's soft shadows and blur. */
  height: var(--cover-stage-height, calc(var(--cover-width) * .942 + 88px));
  margin: 0;
  /* Let the blurred covers and their shadows fade naturally beyond the stage.
     The listening room itself clips anything outside the viewport. */
  overflow: visible;
  perspective-origin: 50% 50%;
  cursor: default;
  touch-action: pan-y;
  pointer-events: auto;
}
.listening-room .record-track {
  width: 100%;
  height: 100%;
  overflow: visible;
  perspective: none;
  transform-style: preserve-3d;
}
.listening-room .record-item,
.listening-room .record-item.is-selected {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  left: 50%;
  top: var(--cover-item-top, 30px);
  bottom: auto;
  width: var(--cover-width);
  height: calc(var(--cover-width) * .942);
  padding: 0;
  border: 0;
  background: transparent;
  transform-origin: center;
  transition: none;
  filter: none;
  will-change: transform, opacity;
}
.listening-room .record-item.is-distant { display: block; pointer-events: none; }
.listening-room .record-item .physical-medium {
  flex: 0 0 240px;
  width: 240px;
  height: 202px;
  transform: scale(var(--cover-scale, 1));
  transform-origin: top left;
}
/* Keep the record comfortably inside the height of its sleeve or jewel case,
   with only the right-hand edge peeking out. */
.listening-room .vinyl-disc { width: 156px; height: 156px; top: 19px; right: 0; }
.listening-room .cd-disc { width: 140px; height: 140px; top: 30px; right: 0; }
.listening-room .vinyl-disc .disc-art { inset: 31.7%; }
.listening-room .vinyl-disc .disc-art::after { inset: 42%; }
.listening-room .cd-disc .disc-art { inset: 24.4%; }
.listening-room .cd-disc .disc-art::after { inset: 38%; border-width: 5px; }
@media (min-width: 1600px) {
  .listening-room .vinyl-disc { width: 196px; height: 196px; top: 19px; right: -24px; }
  .listening-room .cd-disc { width: 180px; height: 180px; top: 29.5px; right: -24px; }
}
.listening-room .player-glass {
  position: relative;
  inset: auto;
  transform: translateY(var(--player-shift, 0px));
  width: min(90vw, 380px);
  height: auto;
  min-height: 0;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 4px 8px;
  margin: 16px 0 0;
  padding: 0 10px 8px;
  overflow: visible;
  clip-path: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.listening-room .player-glass::before { display: none; }
.listening-room .track-info {
  position: static;
  transform: none;
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  text-align: center;
  margin-bottom: 8px;
}
.listening-room .track-meta { justify-content: center; }
.listening-room .track-info h2 { width: 100%; white-space: nowrap; }
.listening-room .transport {
  display: contents;
}
.listening-room .transport-buttons { grid-column: 2; grid-row: 2; gap: 12px; }
.listening-room .transport-buttons :is(#previous, #next) { width: 44px; height: 44px; }
.listening-room .transport-buttons .play-button {
  width: 50px;
  height: 50px;
  background: transparent;
  border-color: #f5eedcaa;
  box-shadow: none;
}
.listening-room .transport-buttons .play-button:hover { background: transparent; }
.listening-room .transport-buttons svg { width: 20px; height: 20px; }
.listening-room .transport-buttons .play-button svg { width: 22px; height: 22px; }
.listening-room .seek-row { grid-column: 1 / -1; grid-row: 3; }
.listening-room .audio-panel {
  display: contents;
}
.listening-room #visualizer { grid-column: 1; grid-row: 2; justify-self: start; width: 50px; height: 20px; }
.listening-room .audio-settings { display: contents; }
.listening-room .volume-control { grid-column: 3; grid-row: 2; justify-self: end; }
.listening-room .audio-state { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.listening-room .toast { bottom: 12px; }
@media (max-width: 700px) {
  .listening-room .music-section {
    --cover-width: clamp(132px, 42vw, 190px);
    top: 160px;
    bottom: 4px;
  }
  .listening-room .player-glass { gap: 3px 6px; width: min(94vw, 340px); margin-top: 12px; }
  .listening-room .track-info { margin-bottom: 5px; }
  .listening-room #visualizer { width: 42px; height: 18px; }
  .listening-room .transport-buttons { gap: 8px; }
  .listening-room .transport-buttons :is(#previous, #next) { width: 38px; height: 38px; }
  .listening-room .transport-buttons .play-button { width: 44px; height: 44px; }
  .listening-room #volume { width: 36px; }
}
@media (max-height: 650px) {
  .listening-room .music-section { --cover-width: clamp(125px, 28vh, 190px); bottom: 2px; }
  .listening-room .record-stage { height: var(--cover-stage-height, calc(var(--cover-width) * .942 + 72px)); }
  .listening-room .record-item,
  .listening-room .record-item.is-selected { top: var(--cover-item-top, 22px); }
  .listening-room .player-glass { gap: 2px 6px; margin-top: 8px; padding-bottom: 2px; }
}
@media (min-width: 701px) and (max-width: 1149px) {
  .listening-room .music-section { top: 170px; }
}