/* The hero film: a camera pass over a real editor recording. It brings its
   own dark background and window frame, so the stage adds no frame. */
.hero__stage--film {
  padding: 0;
  /* The whole film fits in the window under the navigation bar: its height
     is at most the window height minus 150px. */
  width: min(var(--site-page-width, 1232px), calc((100svh - 150px) * 16 / 9));
  margin-inline: auto;
}
.hero__stage--film .hero__scene { display: none; }
.hero-film { margin: 0; }
.hero-film__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px; background: #0b0b0c; }
.hero-film figcaption { margin-top: 10px; text-align: right; }
.hero-film__credit { font-size: 12px; color: var(--muted); }
@media (max-width: 600px) {
  .hero-film__video { border-radius: 6px; }
  .hero-film figcaption { text-align: left; }
}

/* A small round pause button, bottom right of a film (hero and agent tabs). */
.film-frame { position: relative; }
.film-toggle {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid #ffffff26; border-radius: 50%;
  background: #1c1c1fb3; color: #f3f3f3; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: .72; transition: opacity 160ms ease, background-color 160ms ease;
}
.film-toggle:hover, .film-toggle:focus-visible { opacity: 1; background: #2a2a2ee6; }
.film-toggle:focus-visible { outline: 2px solid #ffffffb3; outline-offset: 2px; }
.film-toggle svg { width: 12px; height: 12px; fill: currentColor; }
.film-toggle__play { display: none; }
.film-toggle[data-paused] .film-toggle__pause { display: none; }
.film-toggle[data-paused] .film-toggle__play { display: block; }
@media (prefers-reduced-motion: reduce) { .film-toggle { display: none; } }