.preview-screen {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0d1720;
}
.preview-screen .preview-cover,
.preview-screen .preview-inline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}
.preview-screen .preview-cover { object-fit: cover; z-index: 0; }
.preview-screen .preview-inline {
  object-fit: contain;
  background: transparent;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
.preview-screen.has-video-frame .preview-inline { opacity: 1; }
.preview-screen .preview-expand {
  position: absolute;
  bottom: 12px;
  right: 12px;
  left: auto;
  z-index: 3;
}
.preview-screen .preview-expand:focus-visible { outline-offset: -5px; }
@media (max-width: 760px) {
  .preview-screen .preview-expand { bottom: 8px; right: 8px; }
}

.preview-screen .preview-pause {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 3;
}
.preview-screen .preview-pause[hidden] { display: none; }
@media (max-width: 760px) {
  .preview-screen .preview-pause { bottom: 8px; left: 8px; }
}