body.films-v2 .inline-reel { cursor: auto; background: #111; isolation: isolate; }
body.films-v2 #editing-heading[tabindex="-1"]:focus { outline: none; }
body.films-v2 .inline-reel > iframe { display: block; width: 100%; height: 100%; border: 0; }
body.films-v2 .inline-reel .reel-poster { position: absolute; inset: 0; z-index: 1; height: 100%; }
body.films-v2 .inline-reel.is-ended { background: #000; }
body.films-v2 .inline-reel.is-ended > iframe { visibility: hidden; }
body.films-v2 .inline-reel.is-ended .reel-sound-button { display: none; }
body.films-v2 .reel-end-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  color: #fff;
  cursor: pointer;
}
body.films-v2 .reel-end-frame[hidden] { display: none; }
body.films-v2 .reel-end-frame svg { width: 30px; height: 30px; opacity: 0; }
body.films-v2 .reel-end-frame:hover svg,
body.films-v2 .reel-end-frame:focus-visible svg { opacity: .6; }
body.films-v2 .reel-end-frame:focus-visible { outline: 1px solid #aaa; outline-offset: -5px; }
body.films-v2 .reel-end-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  opacity: 0;
  pointer-events: none;
}
body.films-v2 .reel-end-preview[hidden] { display: none; }
body.films-v2 .is-reel-end-preview .reel-end-preview { opacity: 1; }
body.films-v2 .is-reel-end-preview .hover-gif { opacity: 0; }
body.films-v2 .reel-sound-button {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 32%);
  border-radius: 50%;
  color: #fff;
  background: rgb(16 16 16 / 62%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 14px rgb(0 0 0 / 14%);
  opacity: .68;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity 180ms ease, background 180ms ease;
}
body.films-v2 .reel-sound-button[hidden] { display: none; }
body.films-v2 .reel-sound-button svg { width: 22px; height: 22px; }
body.films-v2 .reel-sound-button::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid rgb(255 255 255 / 65%);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}
body.films-v2 .reel-sound-button:hover,
body.films-v2 .reel-sound-button:focus-visible { opacity: 1; background: rgb(16 16 16 / 82%); }
body.films-v2 .reel-sound-button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
body.films-v2 .reel-sound-button.is-pulsing { opacity: 1; animation: reel-sound-pulse calc(5s / 3) ease-in-out 3; }
body.films-v2 .reel-sound-button.is-pulsing::after { animation: reel-sound-ring calc(5s / 3) ease-out 3; }
body.films-v2 .reel-sound-button.is-dismissed { opacity: 0; pointer-events: none; }
@keyframes reel-sound-pulse { 0%, 100% { transform: scale(1); } 28% { transform: scale(1.12); } 62% { transform: scale(1); } }
@keyframes reel-sound-ring { 0% { opacity: 0; transform: scale(1); } 18% { opacity: .65; } 78%, 100% { opacity: 0; transform: scale(1.48); } }
@media (max-width: 600px) { body.films-v2 .reel-sound-button { width: 44px; height: 44px; top: 16px; right: 16px; } }
@media (prefers-reduced-motion: reduce) {
  body.films-v2 .reel-sound-button,
  body.films-v2 .reel-sound-button::after { animation: none !important; transition: none; }
}