/* Stable media geometry keeps the layout still while clips change. */
.video-stage { position: relative; aspect-ratio: var(--video-aspect-ratio, 1102 / 720); overflow: hidden; border: 1px solid #dfe7f1; border-radius: 12px; background: white; }
.video-stage picture { width: 100%; height: 100%; }
.video-sequence .video-stage img { width: 100%; height: 100%; max-height: none; object-fit: contain; border: 0; border-radius: 0; box-shadow: none; }
.video-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 250ms ease; background: white; pointer-events: none; }
.video-stage video.is-active { opacity: 1; z-index: 1; }
.video-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 15px; color: var(--muted); }
.video-caption:has(span:not([hidden])) { margin-top: 14px; }
.video-toggle { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 12px; background: transparent; color: transparent; font-size: 0; cursor: pointer; }
.video-toggle:focus-visible { outline: 3px solid var(--video-focus-color, #0098d4); outline-offset: -4px; }
.video-sequence [hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .video-stage video { transition: none; } }