.media-window #stageImage.is-logo {
  inset: 0 0 27%;
  height: 73%;
  padding: 6% 13% 0;
}

.media-window #stageImage.is-logo.is-breathing {
  animation: logo-breath var(--stage-time) ease-in-out both;
}

.media-window .brand-wordmark {
  position: absolute;
  z-index: 2;
  top: 61%;
  right: 7%;
  bottom: auto;
  left: 7%;
  width: 86%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .72));
  opacity: 0;
}

.media-window .brand-wordmark.is-brand-cycling {
  animation: brand-fade var(--stage-time) ease-in-out both;
}

.media-window:has(#stageImage:not(.is-logo)) .brand-wordmark {
  display: none;
}

.phone-stage {
  width: min(96vw, 438px);
  display: grid;
  justify-items: center;
}

.phone-shell {
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.phone-stage + .impressum-link {
  margin-top: -1.2rem;
}

.phone-stage .side-button {
  z-index: 0;
  width: 7px;
  border-color: rgba(255, 225, 170, .52);
  background:
    linear-gradient(90deg, #3b210f 0, #aa6d2f 22%, #f2c879 49%, #8b501f 75%, #2a170c 100%);
  box-shadow:
    0 3px 7px rgba(0, 0, 0, .72),
    inset 1px 0 rgba(255, 236, 191, .42),
    inset -1px 0 rgba(38, 18, 8, .78);
}

.phone-stage .side-button::after {
  position: absolute;
  top: 5px;
  right: 1px;
  bottom: 5px;
  width: 1px;
  border-radius: 999px;
  background: rgba(255, 229, 178, .42);
  content: "";
}

.phone-stage .side-button-left {
  left: -6px;
}

.phone-stage .side-button-right {
  right: -6px;
}

.phone-stage .side-volume-up {
  top: calc(22% - 4px);
}

.phone-stage .side-volume-down {
  top: calc(33.5% - 4px);
}

.phone-stage .side-power {
  top: calc(27% - 3px);
}

.progress-row input {
  height: 12px;
  appearance: none;
  background: transparent;
  -webkit-appearance: none;
}

.progress-row input::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #8f5424, #f3c677 48%, #7a451e);
  box-shadow: 0 0 5px rgba(222, 155, 67, .34);
}

.progress-row input::-webkit-slider-thumb {
  width: 10px;
  height: 10px;
  margin-top: -4px;
  border: 1px solid #ffe6ae;
  border-radius: 50%;
  appearance: none;
  background: #e7b861;
  box-shadow: 0 0 8px rgba(240, 180, 82, .72);
  -webkit-appearance: none;
}

.progress-row input::-moz-range-track {
  height: 2px;
  border: 0;
  border-radius: 999px;
  background: #75451f;
}

.progress-row input::-moz-range-progress {
  height: 2px;
  border-radius: 999px;
  background: #efbd68;
}

.progress-row input::-moz-range-thumb {
  width: 9px;
  height: 9px;
  border: 1px solid #ffe6ae;
  border-radius: 50%;
  background: #e7b861;
  box-shadow: 0 0 8px rgba(240, 180, 82, .72);
}

.progress-row span {
  font-variant-numeric: tabular-nums;
  transition: color .45s ease, font-size .45s ease, text-shadow .45s ease;
}

.player-page.is-playback-focused .progress-row span {
  color: #edc985;
  font-size: .7rem;
  font-weight: 600;
  text-shadow: 0 0 7px rgba(235, 181, 92, .28);
}

.release-dots {
  margin-top: 4px;
}

@keyframes logo-breath {
  0% { opacity: 0; transform: scale(.9); }
  28% { opacity: 1; }
  58% { opacity: 1; transform: scale(1.04); }
  72% { opacity: 1; }
  100% { opacity: 0; transform: scale(.92); }
}

@keyframes brand-fade {
  0% { opacity: 0; }
  28%, 72% { opacity: 1; }
  100% { opacity: 0; }
}







.media-window {
  touch-action: pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}

.kind-badge {
  right: auto;
  left: 17px;
}

.close-media {
  position: absolute;
  z-index: 5;
  top: 17px;
  right: 17px;
  min-width: 45px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 217, 151, .48);
  border-radius: 999px;
  color: #f8cf83;
  background: rgba(20, 12, 7, .7);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .35);
  cursor: pointer;
  line-height: 1;
  opacity: .85;
  transition: border-color .2s ease, color .2s ease, opacity .2s ease;
}

.close-media::before,
.close-media::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 19px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #9a5f27, #ffe2a2 48%, #a9692d);
  box-shadow: 0 0 6px rgba(239, 181, 91, .5), inset 0 0 1px rgba(255, 246, 213, .7);
  content: "";
  transform-origin: center;
}

.close-media::before { transform: translate(-50%, -50%) rotate(45deg); }
.close-media::after { transform: translate(-50%, -50%) rotate(-45deg); }

.close-media:hover,
.close-media:focus-visible {
  border-color: rgba(255, 231, 184, .82);
  color: #fff0c5;
  opacity: 1;
}

.phone-stage .side-button {
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}

.phone-stage .side-button:active {
  filter: brightness(1.35);
}

.media-window.is-swipe-next {
  animation: reel-next .34s ease-out both;
}

.media-window.is-swipe-previous {
  animation: reel-previous .34s ease-out both;
}

@keyframes reel-next {
  0% { opacity: .18; transform: translateY(11%); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes reel-previous {
  0% { opacity: .18; transform: translateY(-11%); }
  100% { opacity: 1; transform: translateY(0); }
}




.media-window img.is-playing-breath {
  animation: playback-breath var(--stage-time) ease-in-out infinite;
}

@keyframes playback-breath {
  0%, 100% { opacity: .88; transform: scale(.965); }
  50% { opacity: 1; transform: scale(1.035); }
}




.radio-mode {
  position: absolute;
  z-index: 5;
  top: 17px;
  left: 17px;
  height: 40px;
  padding: 0 20px;
  border: 1px solid rgba(255, 217, 151, .48);
  border-radius: 999px;
  color: #f8cf83;
  background: rgba(20, 12, 7, .7);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .35);
  cursor: pointer;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease, visibility 0s linear 0s, border-color .2s ease, color .2s ease;
}

.radio-mode[hidden] { display: none !important; }

.radio-mode.is-faded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear .3s;
}

.radio-mode.is-status { cursor: wait; }

.radio-mode:hover,
.radio-mode:focus-visible {
  border-color: rgba(255, 231, 184, .82);
  color: #fff0c5;
}

/* Shared heart rating used by the release and radio players. */
.release-heading {
  position: relative;
  min-height: 58px;
  display: grid;
  place-items: center;
  padding: 0 52px;
}

.release-heading-text {
  width: 100%;
  min-width: 0;
}

.release-heart-rating {
  position: absolute;
  z-index: 16;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  transition: opacity .32s ease;
}

.release-heart-rating[hidden] { display: none; }

.release-heart-button {
  position: relative;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  color: #80552f;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .62));
  transition: color .24s ease, filter .24s ease, transform .24s ease;
}

.release-heart-button:hover,
.release-heart-button:focus-visible,
.release-heart-rating.is-open .release-heart-button {
  color: #c99552;
  filter: drop-shadow(0 0 6px rgba(207, 133, 47, .25));
  outline: 0;
  transform: scale(1.07);
}

.release-heart-button svg {
  display: block;
  width: 47px;
  height: 47px;
  margin-inline: auto;
  overflow: visible;
}

.release-heart-body {
  fill: transparent;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: .95;
  transition: fill .25s ease, stroke .25s ease;
}

.release-heart-shine {
  fill: none;
  stroke: rgba(239, 202, 133, .58);
  stroke-linecap: round;
  stroke-width: .65;
  opacity: 0;
}

.release-heart-crack {
  fill: none;
  stroke: #2a1208;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  opacity: 0;
}

.release-heart-button.is-rated {
  color: #d49a4c;
  filter: drop-shadow(0 0 6px rgba(205, 129, 43, .28)) drop-shadow(0 4px 4px rgba(0, 0, 0, .6));
}

.release-heart-button.is-rated .release-heart-body {
  fill: url(#releaseHeartMainGold);
  stroke: #dca65d;
  stroke-width: .75;
}

.release-heart-button.is-rated .release-heart-shine { opacity: .88; }

.release-heart-button.is-broken { color: #b77739; }

.release-heart-button.is-broken .release-heart-body {
  fill: rgba(79, 35, 18, .76);
  stroke: #381b10;
  stroke-width: 1.05;
}

.release-heart-button.is-broken .release-heart-crack { opacity: 1; }

.release-heart-button > span {
  position: absolute;
  z-index: 2;
  top: 40%;
  left: 50%;
  color: #2a1307;
  font-size: .88rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 232, 179, .35);
  transform: translate(-50%, -50%);
}

.release-heart-button[data-rating-value="10"] > span {
  margin-top: -2px;
  margin-left: -1px;
}

.release-heart-button.is-unrated > span {
  top: 48%;
  color: #9a6b3b;
  font-size: .48rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: .92;
  text-shadow: none;
  white-space: pre-line;
}

.release-heart-picker {
  position: absolute;
  right: 3px;
  bottom: calc(100% + 5px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 3px 1px;
}

.release-heart-picker[hidden] { display: none; }

.release-heart-choice {
  position: relative;
  width: 37px;
  height: 34px;
  padding: 0;
  border: 0;
  color: var(--heart-tone, #9b5d2b);
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .72));
  opacity: .92;
}

.release-heart-choice:hover,
.release-heart-choice:focus-visible {
  filter: brightness(1.18) drop-shadow(0 0 5px rgba(207, 132, 43, .3));
  outline: 0;
  opacity: 1;
}

.release-heart-choice svg {
  display: block;
  width: 35px;
  height: 35px;
  margin-inline: auto;
  overflow: visible;
}

.release-heart-choice svg > path:first-child {
  fill: currentColor;
  stroke: #cc914a;
  stroke-width: .35;
}

.release-heart-choice-relief {
  fill: url(#releaseHeartChoiceRelief);
  pointer-events: none;
}

.release-heart-choice-crack {
  fill: none;
  stroke: #3c1d11;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  opacity: 0;
}

.release-heart-choice.is-broken-choice svg > path:first-child {
  fill: #4f2817;
  stroke: #3f2013;
}

.release-heart-choice.is-broken-choice .release-heart-choice-crack { opacity: 1; }

.release-heart-choice.is-broken-choice > span {
  --guide-number-rest: #c19d62;
  color: var(--guide-number-rest);
  text-shadow: 0 1px 2px rgba(13, 5, 2, .96);
}

.release-heart-choice > span {
  --guide-number-rest: #2a1408;
  position: absolute;
  top: 47%;
  left: 50%;
  color: #2a1408;
  font-size: .73rem;
  font-weight: 900;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.release-heart-choice[data-release-rating="10"] > span {
  margin-top: -1px;
  margin-left: -1px;
}

.release-heart-choice[data-release-rating="2"] > span {
  --guide-number-rest: #d8aa70;
  color: var(--guide-number-rest);
  text-shadow: 0 1px 2px rgba(13, 5, 2, .9);
}

.release-heart-picker.is-guiding .release-heart-choice {
  z-index: 1;
  animation: release-heart-choice-guide .54s ease-in-out var(--guide-delay) both;
}

.release-heart-picker.is-guiding .release-heart-choice > span {
  animation: release-heart-number-guide .54s ease-in-out var(--guide-delay) both;
}

.release-heart-picker.is-guiding .release-heart-choice.is-broken-choice > span {
  visibility: hidden;
  animation: none;
}

.release-heart-picker.is-guiding .release-heart-choice.is-broken-choice svg > path:first-child {
  animation: release-broken-heart-guide .54s ease-in-out var(--guide-delay) both;
}

.release-rating-message {
  position: absolute;
  z-index: 22;
  top: 42%;
  left: 50%;
  width: 82%;
  padding: 0;
  isolation: isolate;
  color: #e1ad61;
  background: none;
  font-family: "Segoe Script", "Brush Script MT", cursive;
  font-size: clamp(1.9rem, 7.2vw, 2.14rem);
  font-style: italic;
  font-weight: 800;
  letter-spacing: .025em;
  text-align: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .94)) drop-shadow(0 0 7px rgba(224, 158, 65, .3));
  -webkit-text-fill-color: currentColor;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.88);
}

.release-rating-line {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  line-height: 1.16;
  white-space: nowrap;
}

.release-rating-line.is-second-line { padding-left: 0; }

.release-rating-message.is-visible { animation: release-rating-message 4s linear both; }

.release-rating-message::before {
  position: absolute;
  z-index: -1;
  inset: -78px -105px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .58) 43%, rgba(0, 0, 0, .18) 66%, transparent 78%);
  content: "";
  opacity: 0;
  pointer-events: none;
}

.release-rating-message.is-visible::before { animation: release-rating-backdrop 4s ease both; }

.release-rating-letter {
  display: inline-block;
  color: #f2c77f;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .9), 0 0 7px rgba(210, 133, 42, .28);
  -webkit-text-fill-color: currentColor;
  will-change: transform, opacity;
}

.release-rating-message.is-visible .release-rating-letter {
  animation: release-rating-letter-arrive .4s ease var(--letter-delay) both;
}

.release-rating-message.is-bursting .release-rating-letter {
  animation: release-rating-letter-burst .95s cubic-bezier(.18, .62, .3, 1) var(--burst-delay) forwards;
}

.release-heart-flight {
  position: absolute;
  z-index: 18;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.release-flying-heart {
  position: absolute;
  right: 7px;
  bottom: 89px;
  width: 29px;
  height: 29px;
  color: #c98535;
  filter: drop-shadow(0 0 5px rgba(207, 133, 43, .34)) drop-shadow(0 3px 3px rgba(0, 0, 0, .48));
  opacity: 0;
  animation: release-heart-fly 2.65s cubic-bezier(.22, .62, .34, 1) var(--flight-delay) forwards;
}

.release-flying-heart svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.release-flying-heart svg > path:first-child {
  fill: currentColor;
  stroke: #d39a51;
  stroke-width: .35;
}

@keyframes release-heart-choice-open {
  from { opacity: 0; transform: translateY(8px) scale(.7); }
  to { opacity: .92; transform: translateY(0) scale(1); }
}

@keyframes release-heart-choice-guide {
  0%, 100% {
    z-index: 1;
    color: var(--heart-tone, #9b5d2b);
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .72));
    transform: scale(1);
  }
  0% { opacity: 0; visibility: hidden; transform: scale(.55); }
  20%, 68% {
    z-index: 4;
    color: #f0c474;
    filter: brightness(1.16) drop-shadow(0 0 8px rgba(245, 194, 105, .72)) drop-shadow(0 4px 4px rgba(0, 0, 0, .72));
    opacity: 1;
    visibility: visible;
    transform: scale(1.38);
  }
  100% { opacity: .92; visibility: visible; }
}

@keyframes release-heart-number-guide {
  0%, 100% { color: var(--guide-number-rest, #2a1408); }
  20%, 68% { color: #241105; text-shadow: 0 1px 0 rgba(255, 234, 184, .45); }
}

@keyframes release-broken-heart-guide {
  0%, 100% { fill: #4f2817; stroke: #3f2013; }
  20%, 68% { fill: #f0c474; stroke: #ffe1a2; }
}

@keyframes release-rating-message {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
  8%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes release-rating-backdrop {
  0% { opacity: 0; transform: scale(.88); }
  12%, 72% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes release-rating-letter-arrive {
  from { opacity: 0; transform: translateY(8px) scale(.82); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes release-rating-letter-burst {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
  72% { opacity: .92; }
  100% {
    opacity: 0;
    transform: translate(var(--burst-x), var(--burst-y)) rotate(var(--burst-rotate)) scale(.28);
  }
}

@keyframes release-heart-fly {
  0% { opacity: 0; transform: translate(0, 0) scale(.45); }
  10% { opacity: .94; }
  88% { opacity: .88; }
  100% { opacity: 0; transform: translate(calc(var(--flight-x) + var(--flight-drift)), -110vh) scale(var(--flight-scale)); }
}

@keyframes release-heart-fly-landscape {
  0% { opacity: 0; transform: translate(0, 0) scale(.65); }
  8% { opacity: .94; }
  80% { opacity: .9; }
  100% { opacity: 0; transform: translate(calc(var(--flight-x) + var(--flight-drift)), -365px) scale(var(--flight-scale)); }
}

.release-flying-heart.is-landscape-flight {
  animation-name: release-heart-fly-landscape;
  animation-duration: 3.9s;
  animation-timing-function: linear;
}

.player-page {
  overflow: hidden;
}

.player-page .landing {
  width: 100%;
  height: 100vh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  place-items: center;
}

@supports (height: 100dvh) {
  .player-page .landing {
    height: 100dvh;
  }
}

.player-page .phone-layout {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  gap: 0;
  place-items: center;
}

.player-page .phone-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: 438px;
  padding: 0 18px 64px;
  transform: translate(-50%, -50%) scale(var(--idle-scale, .9));
  transform-origin: center;
  transition:
    transform 1.08s cubic-bezier(.2, .72, .2, 1),
    padding-bottom 1.08s cubic-bezier(.2, .72, .2, 1),
    opacity .24s ease;
  will-change: transform;
}

.player-page.layout-pending .phone-stage {
  opacity: 0;
}

.player-page .phone-shell {
  width: 402px;
}

.player-page.is-playback-focused .phone-stage {
  padding-bottom: 0;
  transform: translate(-50%, -50%) scale(var(--active-scale, 1));
}

.player-page.is-orientation-switching .phone-stage {
  transition: none;
}

.player-page .floor-reflection,
.player-page .phone-stage::before {
  transition: opacity .7s ease;
}

.player-page.is-playback-focused .floor-reflection,
.player-page.is-playback-focused .phone-stage::before {
  opacity: 0;
}

@media (max-width: 520px) {
  .player-page .landing {
    align-items: center;
  }

  .player-page .phone-stage {
    transform: translate(-50%, -50%) scale(var(--idle-scale, .9));
  }

  .player-page.is-playback-focused .phone-stage {
    transform: translate(-50%, -50%) scale(var(--active-scale, 1));
  }
}

/* Release landscape playback follows the radio phone geometry. */
.release-page.is-landscape-track.is-wide-viewport .phone-stage {
  width: 824px;
  padding: 0 18px;
}

.release-page.is-landscape-track.is-wide-viewport.is-playback-focused .phone-stage {
  transform: translate(-50%, -50%) scale(var(--landscape-scale, .8));
}

.release-page.is-landscape-track.is-portrait-viewport.is-playback-focused .phone-stage {
  transform: translate(-50%, -50%) rotate(90deg) scale(var(--landscape-scale, .8));
}

.release-page.is-landscape-track.is-wide-viewport .phone-shell {
  width: 788px;
  height: 402px;
  aspect-ratio: auto;
  border-radius: 66px;
}

.release-page.is-landscape-track.is-wide-viewport .speaker {
  display: none;
}

.release-page.is-landscape-track.is-wide-viewport .side-volume-up,
.release-page.is-landscape-track.is-wide-viewport .side-volume-down,
.release-page.is-landscape-track.is-wide-viewport .side-power {
  top: -6px;
  height: 8px;
  border: 1px solid rgba(255, 225, 170, .52);
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #3b210f 0, #aa6d2f 22%, #f2c879 49%, #8b501f 75%, #2a170c 100%);
  box-shadow: 0 3px 7px rgba(0, 0, 0, .72), inset 0 1px rgba(255, 236, 191, .42), inset 0 -1px rgba(38, 18, 8, .78);
}

.release-page.is-landscape-track.is-wide-viewport .side-volume-up,
.release-page.is-landscape-track.is-wide-viewport .side-volume-down { width: 62px; }
.release-page.is-landscape-track.is-wide-viewport .side-volume-up { left: 22%; }
.release-page.is-landscape-track.is-wide-viewport .side-volume-down { left: 33%; }
.release-page.is-landscape-track.is-wide-viewport .side-power { right: 22%; width: 101px; }
.release-page.is-landscape-track.is-wide-viewport .side-button::after {
  top: 1px;
  right: 5px;
  bottom: auto;
  left: 5px;
  width: auto;
  height: 1px;
}

.release-page.is-landscape-track.is-wide-viewport .screen {
  display: block;
  padding: 0;
}

.release-page.is-landscape-track.is-wide-viewport .media-window {
  position: absolute;
  inset: 0;
  border-radius: 55px;
}

.release-page.is-landscape-track.is-wide-viewport .media-window video {
  object-fit: cover;
}

.release-page.is-landscape-track.is-wide-viewport .release-copy,
.release-page.is-landscape-track.is-wide-viewport .progress-row {
  position: absolute;
  z-index: 9;
  transition: opacity .32s ease;
}

.release-page.is-landscape-track.is-wide-viewport .release-copy {
  z-index: 12;
  top: 8px;
  right: 16px;
  left: 44px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .1));
  pointer-events: none;
}

.release-page.is-landscape-track.is-wide-viewport .release-heading {
  min-height: 42px;
  height: 42px;
  padding: 0 56px;
}

.release-page.is-landscape-track.is-wide-viewport .release-heading-text {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
}

.release-page.is-landscape-track.is-wide-viewport .release-heading h1 {
  width: auto;
  height: auto;
  max-width: 100%;
  display: block;
  font-size: .84rem;
  letter-spacing: .16em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.release-page.is-landscape-track.is-wide-viewport .release-heart-rating,
.release-page.is-landscape-track.is-wide-viewport .release-heart-button {
  pointer-events: auto;
}

.release-page.is-landscape-track.is-wide-viewport .release-heart-rating {
  position: fixed;
  top: auto;
  right: 44px;
  bottom: 14px;
  transform: none;
}

.release-page.is-landscape-track.is-wide-viewport .release-heart-picker {
  top: auto;
  bottom: calc(100% + 4px);
  right: 3px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 1px;
}

.release-page.is-landscape-track.is-wide-viewport .release-heart-choice { height: 30px; }

.release-page.is-landscape-track.is-wide-viewport .release-heart-picker[hidden] { display: none; }

.release-page.is-landscape-track.is-wide-viewport .release-flying-heart {
  right: 60px;
  bottom: 54px;
}

.release-page.is-landscape-track.is-wide-viewport .progress-row {
  right: auto;
  bottom: 24px;
  left: 50%;
  box-sizing: border-box;
  width: 70%;
  height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  background: rgba(8, 5, 3, .68);
  transform: translateX(-50%);
}

.release-page.is-landscape-track.is-wide-viewport .release-dots { display: none; }
.release-page.is-landscape-track.is-wide-viewport.is-controls-hidden .progress-row {
  opacity: 0;
  pointer-events: none;
}
.release-page.is-landscape-track.is-wide-viewport.is-controls-hidden .release-heart-rating {
  opacity: 0;
  pointer-events: none;
}
.release-page.is-landscape-track.is-wide-viewport.is-controls-hidden .release-copy { background: transparent; }
.release-page.is-landscape-track.is-wide-viewport.is-controls-hidden .release-heading-text { opacity: 0; }

/* CHB / V 01.26: the rating heart appears only once a release is playing. */
body:not(.is-playback-focused) #releaseHeartRating { display: none !important; }

/* CHB / V 01.26: HOME INFO below the wordmark, fades in and out with it. */
.media-window .home-info {
  position: absolute;
  z-index: 2;
  top: 76%;
  right: 7%;
  bottom: 3%;
  left: 7%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4%;
  opacity: 0;
  pointer-events: none;
  text-align: center;
}
.media-window .home-info[hidden] { display: none; }
.media-window .brand-wordmark.is-brand-cycling ~ .home-info { animation: brand-fade var(--stage-time) ease-in-out both; }
.media-window:has(#stageImage:not(.is-logo)) .home-info { display: none; }
.media-window .home-info img { min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .6)); }
.media-window .home-info.has-text img { max-height: 58%; }
.media-window .home-info p {
  margin: 0;
  color: #f3cc8c;
  font: 700 clamp(10px, 3.4vw, 14px)/1.3 Arial, sans-serif;
  letter-spacing: .06em;
  white-space: pre-line;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CHB / V 01.27: release heart flight uses exactly the Radio tempo. */
.release-flying-heart { animation: release-heart-fly-radio 3s linear var(--flight-delay) forwards; }
.release-flying-heart.is-landscape-flight { animation-name: release-heart-fly-radio-landscape; animation-duration: 3.35s; animation-timing-function: linear; }
@keyframes release-heart-fly-radio {
  0% { opacity: 0; transform: translate(0, 0) rotate(var(--flight-rotate-a, 0deg)) scale(.45); }
  3% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--flight-x) + var(--flight-drift)), -65vh) rotate(var(--flight-rotate-b, 0deg)) scale(var(--flight-scale)); }
}
@keyframes release-heart-fly-radio-landscape {
  0% { opacity: 0; transform: translate(0, 0) rotate(var(--flight-rotate-a, 0deg)) scale(.65); }
  8% { opacity: .94; }
  80% { opacity: .9; }
  100% { opacity: 0; transform: translate(calc(var(--flight-x) + var(--flight-drift)), -365px) rotate(var(--flight-rotate-b, 0deg)) scale(var(--flight-scale)); }
}

/* CHB / V 01.28: no dark backdrop behind the rating message (hearts stay visible, as in the Radio). */
.release-rating-message::before { display: none !important; }

/* CHB / V 01.34: HOME INFO uses the whole space from the bottom edge of the
   wordmark to the bottom edge of the display; text lies on top of the image. */
.media-window .home-info {
  top: 73.5%;
  right: 5%;
  bottom: 2.5%;
  left: 5%;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  place-items: center;
  gap: 0;
}
.media-window .home-info[hidden] { display: none; }
.media-window .home-info img,
.media-window .home-info.has-text img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.media-window .home-info p {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  width: 94%;
  max-width: 94%;
  -webkit-line-clamp: 4;
}