.video-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  color: #f5faff;
  background: radial-gradient(ellipse at var(--origin-x) var(--origin-y), #262943, #090d1b 75%);
  pointer-events: auto;
  animation: video-reveal 420ms cubic-bezier(.2,.7,.2,1) both;
}
.video-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.video-header h2 { margin: 0; font-size: clamp(16px, 3vmin, 22px); font-weight: 500; }
.video-overlay button {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid rgb(219 244 255 / 35%);
  border-radius: 99px;
  background: rgb(190 232 255 / 10%);
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: none;
}
.video-overlay button:focus-visible { outline: 2px solid #bdefff; outline-offset: 3px; }
.video-overlay button:disabled { opacity: .4; cursor: default; }
.video-close { flex-shrink: 0; }
.video-stage { position: relative; min-height: 0; min-width: 0; }
.video-stage video {
  touch-action: none;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 1120px;
  margin: auto;
  object-fit: contain;
}
.video-feedback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  background: rgb(9 13 27 / 65%);
  text-align: center;
}
.video-feedback[hidden], .video-play[hidden] { display: none; }
.video-status { margin: 0; max-width: 32ch; line-height: 1.4; }
.video-controls { display: flex; justify-content: center; gap: 12px; }
.video-overlay--closing { animation: video-dismiss 180ms ease-out both; pointer-events: none; }
@keyframes video-reveal {
  from { clip-path: circle(var(--origin-radius) at var(--origin-x) var(--origin-y)); }
  to { clip-path: circle(150vmax at var(--origin-x) var(--origin-y)); }
}
@keyframes video-dismiss { to { opacity: 0; transform: scale(.98); } }
@media (prefers-reduced-motion: reduce) { .video-overlay { animation: none; } }
@media (max-height: 400px) {
  .video-overlay { gap: 4px; padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: max(4px, env(safe-area-inset-bottom)); }
}