/* Hide the actual video renderer until play: iOS can draw its own start button
   even when the controls attribute is absent. A separate image avoids stacking. */
:root { --vz-video-preview-ready: 1; }
.vz-video-preview { position: relative; }
.vz-video-preview[data-video-state="poster"] > video { visibility: hidden; }
.vz-video-preview > .vz-video-poster {
  position: absolute; inset: 0; z-index: 1; display: block;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; border-radius: inherit;
  object-fit: contain; pointer-events: none;
}
.vz-video-preview > :is(.hp-play, .video-play-overlay, .start, [data-video-play]) {
  z-index: 2; appearance: none; -webkit-appearance: none;
}
.vz-video-preview > [hidden], .hp-play[hidden], .start[hidden] { display: none !important; }
.vz-video-preview :is(.hp-play-circle, .video-play-overlay) {
  box-sizing: border-box; aspect-ratio: 1 / 1; flex-shrink: 0;
  padding: 0; border-radius: 50%; line-height: 1;
}
.vz-video-preview :is(.hp-play-circle, .video-play-overlay) svg { flex-shrink: 0; }
.vz-video-preview > :is(.hp-play, .video-play-overlay, .start, [data-video-play]):focus-visible {
  outline: 3px solid #80c5f3; outline-offset: -4px;
}