html.xvp-lock, body.xvp-lock { overflow: hidden !important; }
.xvp-preloader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--xvp-bg, #fff);
  opacity: 1;
  visibility: visible;
  transition: opacity var(--xvp-reveal, 550ms) cubic-bezier(.22,1,.36,1), visibility 0s linear var(--xvp-reveal, 550ms);
  isolation: isolate;
}
.xvp-video-wrap {
  width: min(var(--xvp-video-width, 520px), 88vw);
  max-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity;
  transition: transform calc(var(--xvp-reveal, 550ms) * .72) cubic-bezier(.22,1,.36,1), opacity calc(var(--xvp-reveal, 550ms) * .72) ease;
}
.xvp-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 82vh;
  object-fit: var(--xvp-fit, contain);
  background: transparent;
}
.xvp-preloader.xvp-video-out .xvp-video-wrap { opacity: 0; transform: scale(.985); }
.xvp-preloader.xvp-hide { opacity: 0; pointer-events: none; }
.xvp-preloader.xvp-done { display: none; }
.xvp-skip {
  position: absolute;
  right: 24px;
  bottom: 24px;
  appearance: none;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: #222;
  padding: 9px 16px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.xvp-skip:hover { background: #fff; }
@media (max-width: 767px) {
  .xvp-video-wrap { width: min(var(--xvp-video-width, 520px), 92vw); }
  .xvp-skip { right: 16px; bottom: 16px; }
}