body.cinema-open{overflow:hidden}
#cinema{background:#020405;overflow:hidden;color:#f2f1ed;isolation:isolate;height:100dvh;max-height:100dvh}
#cinema::backdrop{background:#020405}
#cinema-canvas,.cinema-product,.cinema-fallback-image,.cinema-shade{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#cinema-canvas{z-index:-4;display:block}
.cinema-fallback-image{z-index:-3;background:url('/design/assets/m51-hubble.jpg') center/cover no-repeat;opacity:0}
.cinema-fallback .cinema-fallback-image{opacity:.6}
.cinema-product{z-index:-2;opacity:0;transform:scale(1.075)}
.cinema-product img{width:100%;height:100%;object-fit:cover;object-position:60% center}
.cinema-shade{z-index:-1;background:linear-gradient(0deg,#020405f0,transparent 47%),linear-gradient(90deg,#02040570,transparent 70%)}
.cinema-header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:32px 48px;gap:24px}
.cinema-brand{font:14px/1.6 var(--sans);letter-spacing:0;display:block}
.cinema-brand>span{display:block;font-size:14px;color:#b9c5cb;margin-top:4px}
#film-skip{display:flex;align-items:center;gap:20px;min-height:44px;font-size:14px;border-bottom:1px solid #ffffff50}
#film-skip svg{width:17px;height:17px}
.cinema-copy{position:absolute;left:8%;bottom:24%;max-width:650px;opacity:0;will-change:opacity}
#film-kicker{font-size:14px;color:#c6d6d9;margin-bottom:26px}
#film-title{font:400 64px/1.07 var(--serif);margin:0;text-wrap:balance}
#film-title em{color:#d4e3e5;font-weight:400}
#film-line{font:14px/1.8 var(--sans);color:#c4d0d3;max-width:400px;margin-top:24px;min-height:22px}
.cinema-actions{display:flex;gap:24px;align-items:center;margin-top:25px}
.cinema-actions[hidden]{display:none}
.cinema-actions .light-button,.cinema-actions .text-button{font-size:14px}
.cinema-actions .text-button{margin:0}
.cinema-controls{position:absolute;left:48px;right:48px;bottom:max(22px,env(safe-area-inset-bottom));padding:0;margin:0;max-width:none}
.film-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:8px}
.film-toolbar>div{display:flex;align-items:center;gap:10px}
.film-toolbar .icon-button{width:36px;height:36px;color:#f1f4ef}
.film-toolbar .icon-button svg{width:17px;height:17px}
#film-clock{font-size:14px;color:#b6c4cb;font-variant-numeric:tabular-nums;margin-left:10px}
.film-credit{font-size:14px;line-height:1.65;text-align:right;color:#9ba8ae}
.film-credit>span{display:block}
#film-timeline{display:block;width:100%;height:18px;margin:0;accent-color:#dae7d4;cursor:pointer;background:transparent}
.film-chapters{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:12px}
.film-chapters button{font:14px/1.5 var(--sans);text-align:left;color:#829095;min-height:30px;display:flex;gap:10px;align-items:center;white-space:nowrap}
.film-chapters button[aria-pressed=true]{color:#eef3e9}
.film-chapters button:hover{color:white}
#film-status{font-size:14px;line-height:1.5;color:#d3dfdb;margin-top:5px}
#film-status:empty{display:none}
.watch-film{display:flex;align-items:center;gap:10px;font-size:14px;min-height:40px}
.watch-film svg{width:14px;height:14px}
.watch-film>span{color:#c0c8bf;font-size:14px;margin-left:10px}
@media(min-width:1700px){#film-title{font-size:84px}.cinema-copy{max-width:850px}.cinema-copy{bottom:27%}.cinema-header{padding:42px 64px}.cinema-controls{left:64px;right:64px;bottom:30px}}
@media(max-height:650px) and (min-width:701px){.cinema-copy{bottom:27%}#film-title{font-size:44px}#film-kicker{margin-bottom:14px}#film-line{margin-top:14px}.cinema-actions{margin-top:16px}.cinema-header{padding-top:20px}.cinema-controls{bottom:10px}.film-chapters{margin-top:4px}}
@media(max-width:700px){
  .cinema-header{padding:20px 22px;align-items:flex-start;gap:15px}.cinema-brand{font-size:14px}.cinema-brand>span{font-size:14px;max-width:110px}
  #film-skip{font-size:14px;gap:9px;min-height:38px}
  .cinema-copy{left:24px;right:24px;bottom:24%;max-width:none}
  #film-title{font-size:39px;line-height:1.08}#film-kicker{font-size:14px;margin-bottom:18px}#film-line{font-size:14px;line-height:1.65;margin-top:18px;max-width:300px}
  .cinema-controls{left:22px;right:22px;bottom:max(18px,env(safe-area-inset-bottom))}
  .film-toolbar{gap:8px}.film-toolbar>div{gap:4px}.film-credit{font-size:14px;max-width:155px}#film-clock{font-size:14px;margin-left:4px}
  .film-chapters{gap:5px;margin-top:9px}.film-chapters button{font-size:14px;display:block;line-height:1.7;white-space:normal}.film-chapters button span{display:block}
  .cinema-product{top:85px;height:58%;}.cinema-product img{object-fit:contain;object-position:center top}
  .cinema-shade{background:linear-gradient(0deg,#020405 7%,#020405e8 25%,transparent 60%)}
  #cinema[data-chapter="4"] .cinema-copy{bottom:23%}#cinema[data-chapter="4"] #film-title{font-size:35px}#cinema[data-chapter="4"] #film-kicker{display:none}
  #cinema[data-chapter="4"] #film-line{margin-top:12px;max-width:290px;font-size:14px}
  .cinema-actions{gap:12px;margin-top:16px;flex-wrap:wrap}.cinema-actions .light-button{min-height:43px;padding:11px 16px;gap:16px;font-size:14px}.cinema-actions .text-button{font-size:14px;gap:6px;min-height:36px}
  .watch-film{font-size:14px;gap:6px}.watch-film>span{display:none}
}
@media(max-width:370px){#film-title{font-size:34px}.cinema-copy{left:20px;right:20px}.film-credit{max-width:125px}.cinema-actions{gap:8px}.cinema-actions .light-button{padding-inline:10px}}
@media(max-height:730px) and (max-width:700px){.cinema-copy{bottom:25%}#film-title{font-size:32px}.cinema-controls{bottom:8px}.film-credit>span{display:none}#film-kicker{margin-bottom:12px}.cinema-actions{margin-top:10px}#cinema[data-chapter="4"] .cinema-copy{bottom:26%}#cinema[data-chapter="4"] #film-title{font-size:29px}}
@media(prefers-reduced-motion:reduce){.cinema-product{transform:none!important}.cinema-copy{will-change:auto}}