/* Keep the scene and synchronized captions inside the actual preview viewport. */
body.filming { overflow: hidden; }
body.filming #showroom { position: fixed; inset: 0; width: 100%; height: 100%; min-height: 0; z-index: 5; }
#film-overlay { z-index: 6; background: linear-gradient(0deg, #080d15f7, #080d159c 18%, transparent 45%); }
#film-overlay .film-label { left: 6%; right: 6%; bottom: max(78px, env(safe-area-inset-bottom)); color: #f2f6fa; text-shadow: 0 2px 18px #000a; }
#film-overlay .film-label > span { display: block; font-size: 11px; color: #ffac81; line-height: 1.5; letter-spacing: 2.5px; }
#film-overlay .film-label h2 { font-size: clamp(25px, 2.5vw, 44px); font-weight: 500; line-height: 1.35; margin: 14px 0 10px; }
#film-overlay .film-label p { max-width: none; font-size: clamp(14px, 1.05vw, 18px); line-height: 1.65; color: #d3e1ed; letter-spacing: .4px; margin: 0; }
#film-overlay .film-note { position: absolute; right: 6%; bottom: 32px; font-size: 10px; line-height: 1.6; color: #8299ac; margin: 0; }
#film-overlay .film-progress { bottom: 24px; left: 6%; right: 6%; }
#film-stop { top: max(22px, env(safe-area-inset-top)); right: 4.4%; }
@media(max-width:640px) {
  #film-overlay .film-label { left: 24px; right: 24px; bottom: max(80px, calc(env(safe-area-inset-bottom) + 60px)); }
  #film-overlay .film-label > span { font-size: 9px; letter-spacing: 1.6px; }
  #film-overlay .film-label h2 { font-size: 25px; margin: 12px 0 10px; }
  #film-overlay .film-label p { font-size: 13px; line-height: 1.8; }
  #film-overlay .film-note { left: 24px; right: 24px; bottom: max(38px, calc(env(safe-area-inset-bottom) + 25px)); font-size: 9px; }
  #film-overlay .film-progress { left: 24px; right: 24px; bottom: max(23px, calc(env(safe-area-inset-bottom) + 12px)); }
}
@media(max-height:500px) {
  #film-overlay .film-label { left: 24px; right: 24px; bottom: max(48px, calc(env(safe-area-inset-bottom) + 36px)); }
  #film-overlay .film-label > span { font-size: 9px; letter-spacing: 1.5px; }
  #film-overlay .film-label h2 { font-size: 22px; line-height: 1.3; margin: 6px 0; }
  #film-overlay .film-label p { font-size: 12px; line-height: 1.5; }
  #film-overlay .film-note { left: 24px; right: 24px; bottom: max(22px, calc(env(safe-area-inset-bottom) + 15px)); font-size: 8px; }
  #film-overlay .film-progress { left: 24px; right: 24px; bottom: max(12px, calc(env(safe-area-inset-bottom) + 6px)); }
  #film-stop { top: 12px; right: 18px; padding: 8px 12px; font-size: 10px; }
}