.svle-root{
  --svle-overlay:rgba(7,18,54,.92);
  --svle-panel:#000;
  --svle-max:1100px;
  --svle-ratio:16/9;
  --svle-ratio-mobile:16/9;
  --svle-radius:20px;
  --svle-close-color:#fff;
  --svle-close-bg:rgba(255,255,255,.1);
  --svle-close-size:52px;
  width:100%;
  min-width:0;
  display:block;
}

.svle-trigger-wrap{
  display:flex;
  width:100%;
  min-width:0;
}

.svle-trigger{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  background:transparent;
  border:0;
  margin:0;
  padding:0;
  cursor:pointer;
  color:inherit;
  font:inherit;
  min-width:0;
  line-height:1;
}

.svle-trigger[aria-disabled="true"]{
  opacity:.55;
  cursor:default;
}

.svle-play-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:110px;
  height:110px;
  border-radius:999px;
  border:1px solid #fff;
  background:rgba(255,255,255,.08);
  color:#fff;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .3s,border-color .3s,color .3s;
  isolation:isolate;
}

.svle-play-btn i,
.svle-play-btn svg{
  position:relative;
  z-index:2;
  display:block;
}

.svle-play-btn svg{
  width:30px;
  height:30px;
  fill:currentColor;
}

.svle-fallback-icon{
  width:30px;
  height:30px;
  display:block;
  fill:currentColor;
  transform:translateX(3%);
}

.svle-has-pulse .svle-play-btn::before{
  content:"";
  position:absolute;
  inset:-1px;
  border:1px solid rgba(244,122,32,.5);
  border-radius:inherit;
  pointer-events:none;
  animation:svlePulse 2.2s ease-out infinite;
}

@keyframes svlePulse{
  0%{transform:scale(.96);opacity:.8}
  75%,100%{transform:scale(1.38);opacity:0}
}

@media (hover:hover) and (pointer:fine){
  .svle-motion-scale .svle-trigger:hover .svle-play-btn{transform:scale(1.08)}
  .svle-motion-lift .svle-trigger:hover .svle-play-btn{transform:translateY(-7px)}
  .svle-motion-rotate .svle-trigger:hover .svle-play-btn{transform:rotate(5deg) scale(1.03)}
}

.svle-label{
  display:inline-block;
  line-height:1.2;
  white-space:normal;
}

.svle-editor-note{
  margin-top:12px;
  padding:9px 12px;
  border:1px dashed #bbb;
  font-size:12px;
  opacity:.75;
}

.svle-lightbox{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(18px,4vw,54px);
  background:var(--svle-overlay);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease,visibility .28s ease;
  box-sizing:border-box;
}

.svle-lightbox.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.svle-lightbox *,
.svle-lightbox *::before,
.svle-lightbox *::after{
  box-sizing:border-box;
}

.svle-dialog{
  position:relative;
  width:min(var(--svle-max),100%);
  max-width:100%;
  max-height:calc(100vh - 36px);
  display:flex;
  align-items:center;
  justify-content:center;
  outline:none;
}

.svle-frame{
  position:relative;
  width:100%;
  aspect-ratio:var(--svle-ratio);
  background:var(--svle-panel);
  border-radius:var(--svle-radius);
  overflow:hidden;
  transform-origin:center;
  transition:transform .46s cubic-bezier(.2,.8,.2,1),opacity .35s ease,clip-path .5s cubic-bezier(.2,.8,.2,1);
}

.svle-frame video,
.svle-frame iframe{
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  border:0;
  background:#000;
  object-fit:contain;
}

.svle-close{
  appearance:none;
  -webkit-appearance:none;
  position:absolute;
  z-index:4;
  top:0;
  right:0;
  transform:translate(30%,-30%);
  width:var(--svle-close-size);
  height:var(--svle-close-size);
  min-width:44px;
  min-height:44px;
  border:0;
  border-radius:999px;
  background:var(--svle-close-bg);
  color:var(--svle-close-color);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:transform .25s ease,background-color .25s ease;
}

.svle-close::before,
.svle-close::after{
  content:"";
  position:absolute;
  width:42%;
  height:2px;
  background:currentColor;
  border-radius:2px;
}

.svle-close::before{transform:rotate(45deg)}
.svle-close::after{transform:rotate(-45deg)}

@media (hover:hover) and (pointer:fine){
  .svle-close:hover{transform:translate(30%,-30%) scale(1.06)}
}

.svle-lightbox[data-animation="fade"] .svle-frame{opacity:0}
.svle-lightbox[data-animation="fade"].is-open .svle-frame{opacity:1}

.svle-lightbox[data-animation="zoom"] .svle-frame{opacity:0;transform:scale(.9)}
.svle-lightbox[data-animation="zoom"].is-open .svle-frame{opacity:1;transform:scale(1)}

.svle-lightbox[data-animation="rise"] .svle-frame{opacity:0;transform:translateY(28px)}
.svle-lightbox[data-animation="rise"].is-open .svle-frame{opacity:1;transform:translateY(0)}

.svle-lightbox[data-animation="clip"] .svle-frame{
  clip-path:inset(48% 0 48% 0 round var(--svle-radius));
  transform:scale(.98)
}
.svle-lightbox[data-animation="clip"].is-open .svle-frame{
  clip-path:inset(0 0 0 0 round var(--svle-radius));
  transform:scale(1)
}

body.svle-lock{overflow:hidden!important}

@media(max-width:767px){
  .svle-lightbox{
    padding:16px;
    align-items:center;
  }

  .svle-dialog{
    width:100%;
    max-width:100%;
    max-height:none;
  }

  .svle-frame{
    width:100%;
    aspect-ratio:var(--svle-ratio-mobile);
    max-height:none;
  }

  .svle-close{
    top:8px;
    right:8px;
    transform:none;
  }

  .svle-trigger{
    max-width:100%;
  }
}

@media(prefers-reduced-motion:reduce){
  .svle-play-btn,
  .svle-lightbox,
  .svle-frame,
  .svle-close{
    transition:none!important
  }
  .svle-play-btn::before{
    animation:none!important
  }
}