/* Story playback controls share the existing sound control's quiet treatment. */
[data-story-frame] .story-frame__playback {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 50%;
  background: rgb(0 0 0 / 45%);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background .2s ease, transform .2s ease;
}
[data-story-frame] .story-frame__sound { width: 44px; height: 44px; }
[data-story-frame] .story-frame__playback:hover {
  background: rgb(0 0 0 / 65%);
  transform: scale(1.05);
}
[data-story-frame] :is(.story-frame__playback, .story-frame__sound):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
[data-story-frame] .story-frame__icon-pause,
[data-story-frame] .is-playing .story-frame__icon-play { display: none; }
[data-story-frame] .is-playing .story-frame__icon-pause { display: block; }
@media (prefers-reduced-motion: reduce) {
  [data-story-frame] :is(.story-frame__playback, .story-frame__sound) { transition: none; }
  [data-story-frame] :is(.story-frame__playback, .story-frame__sound):hover { transform: none; }
}