.video-modal {
  width: min(960px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid #ffffff26;
  border-radius: 16px;
  background: #101820;
  color: #fff;
}
.video-modal::backdrop { background: rgb(0 0 0 / 80%); }
.video-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; }
.video-modal__header h2 { margin: 0; font-size: 1.1rem; }
.video-modal__close { flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #ffffff1a; color: #fff; font-size: 28px; cursor: pointer; }
.video-modal__close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.video-modal video { display: block; width: 100%; max-height: calc(100dvh - 110px); background: #000; }
html:has(.video-modal[open]) { overflow: hidden; }