.video-theater-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(5, 5, 8, .9);
  backdrop-filter: blur(12px);
}
.video-theater {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: 88px 56px 48px;
}
.video-theater-toolbar {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  z-index: 2;
  color: #d3cfdf;
}
.video-theater-info,
.video-theater-toolbar a,
.video-theater-toolbar button {
  display: grid;
  place-items: center;
  height: 36px;
  box-sizing: border-box;
  border: 1px solid #34313f;
  border-radius: 24px;
  background: rgba(33, 31, 40, .85);
  color: inherit;
  text-decoration: none;
}
.video-theater-info { padding: 0 12px; font-size: 12px; }
.video-theater-toolbar a,
.video-theater-toolbar button { width: 36px; padding: 0; cursor: pointer; }
.video-theater-toolbar button:disabled { opacity: .45; cursor: wait; }
.video-theater-toolbar a:hover,
.video-theater-toolbar button:not(:disabled):hover { background: #393444; }
.video-theater-toolbar :focus-visible { outline: 1px solid #a29ab9; outline-offset: 2px; }
.video-theater-close { position: relative; }
.video-theater-close kbd { position: absolute; top: 42px; width: 100%; text-align: center; font-family: inherit; font-size: 10px; color: #97909f; }
.video-theater-player { display: block; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 14px; background: #08080b; box-shadow: 0 18px 60px #0008; }
.video-theater-error { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #d7a4ae; text-align: center; }
@media (max-width: 760px) {
  .video-theater { padding: 88px 16px 48px; }
  .video-theater-toolbar { right: 12px; top: 12px; }
  .video-theater-info { font-size: 11px; padding: 0 10px; }
}