:where(.julia-smolensk-page, .julia-smolensk-page button, .julia-smolensk-page input) {
  -webkit-tap-highlight-color: transparent;
}

.julia-smolensk-page .julia-smolensk-player {
  z-index: 4;
  inset-inline-start: 50%;
  inset-inline-end: auto;
  inset-block-start: max(1rem, env(safe-area-inset-top));
  inset-block-end: auto;
  transform: translateX(-50%);
}

.julia-smolensk-page__back-note {
  display: block;
  margin-block-start: 0.24rem;
  font: 400 0.74rem / 1.15 Georgia, serif;
  letter-spacing: 0.01em;
  opacity: 0.74;
  pointer-events: none;
}

.julia-smolensk-karaoke {
  position: absolute;
  z-index: 2;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: min(56rem, calc(100% - 3rem));
  margin: 0;
  color: rgb(255 251 234 / 98%);
  font: 500 clamp(1.1rem, 2.4vw, 2rem) / 1.42 Georgia, serif;
  pointer-events: none;
  text-align: center;
  text-shadow: 0 0.2rem 1.3rem rgb(21 12 4 / 88%);
  transform: translate(-50%, -50%);
}

.julia-smolensk-karaoke[hidden] {
  display: none;
}

.julia-smolensk-karaoke__word {
  display: inline-block;
  margin-inline-end: 0.28em;
  color: rgb(255 246 220 / 42%);
  transition: color 150ms ease-out, opacity 150ms ease-out, text-shadow 150ms ease-out, transform 150ms ease-out;
}

.julia-smolensk-karaoke__word.is-past {
  color: rgb(255 251 234 / 88%);
}

.julia-smolensk-karaoke__word.is-active {
  color: rgb(255 226 144 / 100%);
  text-shadow: 0 0 0.28rem rgb(255 244 192 / 95%), 0 0.2rem 1.3rem rgb(21 12 4 / 88%);
  transform: translateY(-0.035em) scale(1.035);
}

.julia-smolensk-love.is-dismissing {
  pointer-events: none;
  animation: smolensk-love-dismiss 3s ease-in forwards;
}

@keyframes smolensk-love-dismiss {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
}

@media (prefers-reduced-motion: reduce) {
  .julia-smolensk-karaoke__word {
    transition: none;
  }
}

@media (max-width: 42rem) {
  .julia-smolensk-page .julia-smolensk-player {
    inset-inline-start: 50%;
    inset-inline-end: auto;
    inset-block-start: max(0.75rem, env(safe-area-inset-top));
    transform: translateX(-50%);
  }

  .julia-smolensk-karaoke {
    inline-size: min(32rem, calc(100% - 1.5rem));
  }

}

@media (prefers-reduced-motion: reduce) {
  .julia-smolensk-love.is-dismissing {
    animation-duration: 0.01ms;
  }
}