video[data-native-video]{
  background:#020203;
}

.native-video-frame{
  --video-ratio:16/9;
  position:relative;
  aspect-ratio:var(--video-ratio);
  background:#020203;
  isolation:isolate;
}

.native-video-frame > video[data-native-video]{
  width:100%;
  height:100%;
}

video[data-native-video].native-fit-contain{
  object-fit:contain !important;
}

.native-video-frame > video[data-native-video].native-fit-cover,
video[data-native-video].native-fit-cover{
  object-fit:cover !important;
}

.native-video-frame::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 50% 40%,rgba(var(--accent-rgb,234,88,12),.16),transparent 58%),
    linear-gradient(135deg,rgba(255,255,255,.04),rgba(0,0,0,.42));
  opacity:.85;
}

.native-video-frame.native-portrait{
  aspect-ratio:var(--video-ratio,9/16);
}

.native-video-frame.native-landscape{
  aspect-ratio:var(--video-ratio,16/9);
}

.native-video-frame .native-ratio-badge{
  position:absolute;
  right:12px;
  top:12px;
  z-index:5;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(0,0,0,.42);
  color:#fff;
  font-family:var(--font-mono,monospace);
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  backdrop-filter:blur(12px);
  pointer-events:none;
  opacity:.72;
}

@media(max-width:640px){
  .native-video-frame .native-ratio-badge{
    display:none;
  }
}