.cinema.section{padding-block:24px}.cinema-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.cinema-heading span{font-size:.8rem;color:var(--accent);font-weight:750}.cinema-heading h1{font-size:clamp(1.4rem,3vw,2rem);font-weight:850;margin:8px 0}.cinema-heading p,.cinema-disclosure,.cinema-explain p,.cinema-guide p{font-size:.83rem;line-height:1.9;color:var(--text-muted)}.cinema-disclosure{padding:12px 16px;border:1px solid var(--glass-border);border-radius:12px;margin:16px 0}.cinema-options{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}.cinema-options>div{display:flex;gap:6px;flex-wrap:wrap}.cinema button{border:1px solid var(--glass-border);background:var(--glass-bg-strong);color:var(--text-primary);padding:9px 14px;border-radius:10px;font-size:.8rem}.cinema button[aria-pressed=true]{background:#155e49;color:white;border-color:#3cb98e}.cinema-stage{background:#08111f;border:1px solid #293646;border-radius:18px;overflow:hidden;color:#ecf4ff}.cinema-picture{position:relative;aspect-ratio:2;overflow:hidden}.cinema-picture canvas{position:absolute;inset:0;width:100%;height:100%;display:block}#cinema-base{filter:saturate(.4) contrast(.65) brightness(1.08)}#cinema-rich{clip-path:inset(0 0 0 50%)}.cinema-tag{position:absolute;top:14px;padding:5px 10px;border-radius:8px;background:#06101ec9;color:#fff;font-size:.75rem}.cinema-tag-left{left:14px}.cinema-tag-right{right:14px}#cinema-divider{position:absolute;left:50%;top:0;bottom:0;width:2px;background:white;pointer-events:none}#cinema-divider b{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:white;color:#0d2633}.cinema-slider{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px}.cinema-slider label{font-size:.8rem}.cinema-slider input{flex:1;min-width:130px;accent-color:#5ee2b4}.cinema-slider button{background:#142c3d;color:white;border-color:#365168}.cinema-stage-note{font-size:.72rem;color:#acc1d5;text-align:center;margin:0 10px 12px}.cinema-explain{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}.cinema-explain article{padding:16px;border:1px solid var(--glass-border);background:var(--glass-bg);border-radius:14px}.cinema-explain i{color:var(--accent);font-size:1.3rem}.cinema-explain h2{font-size:.95rem;font-weight:750;margin:8px 0}.cinema-explain p{margin:0}.cinema-guide{font-size:.83rem;padding:14px;border:1px solid var(--glass-border);border-radius:12px}.cinema-guide summary{cursor:pointer;font-weight:750}.cinema-stage:fullscreen{display:flex;flex-direction:column;justify-content:center;border:0;border-radius:0}.cinema-stage:fullscreen .cinema-picture{width:min(100%,calc((100vh - 125px)*2));align-self:center;flex-shrink:1}.cinema :is(button,input,a,summary):focus-visible{outline:3px solid #41cfa2;outline-offset:3px}#cinema-status{font-size:.8rem}@media(max-width:767px){.cinema-heading{flex-direction:column;align-items:start}.cinema-explain{grid-template-columns:1fr}.cinema-tag{font-size:.65rem;top:8px;padding:4px 6px}.cinema-tag-left{left:8px}.cinema-tag-right{right:8px}.cinema-slider{padding:12px;gap:10px}.cinema-slider label{width:100%}}
.cinema-picture{cursor:ew-resize;touch-action:pan-y;user-select:none}.cinema-picture canvas{pointer-events:none}.cinema-tag{pointer-events:none}#cinema-divider{box-shadow:0 0 18px #0009}#cinema-divider b{width:44px;height:44px;border:3px solid #ffffffb3;background:#102334dc;color:#fff;box-shadow:0 3px 18px #0007;font-size:23px}.cinema-picture:hover #cinema-divider b{background:#155e49}.cinema-slider input{min-height:32px}.cinema-picture:active{cursor:grabbing}
/* Immersive image area; surrounding copy stays readable. */


.cinema-stage{position:relative;width:100%;border-inline:0;border-radius:0}
.cinema-stage .cinema-picture{width:100%;height:85vh;height:85svh;min-height:320px;aspect-ratio:auto}
.cinema-picture canvas{object-fit:cover}
.cinema-slider{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:2;padding:8px;background:#08111fc9;border:1px solid #ffffff30;border-radius:14px;justify-content:center;flex-wrap:nowrap}
.cinema-slider button{white-space:nowrap}
.cinema-stage:fullscreen .cinema-picture{width:100%;height:100vh;height:100dvh;min-height:0;flex:none}
.cinema-stage:has(#cinema-compare:focus-visible) #cinema-divider b{outline:3px solid #41cfa2;outline-offset:4px}
@media(max-width:767px){.cinema-stage .cinema-picture{height:72svh}.cinema-stage:fullscreen .cinema-picture{height:100dvh}}
/* Rounded comparison frame with room around its edges. */
.cinema-stage{width:calc(100% - 48px);margin-inline:auto;border:1px solid #ffffff26;border-radius:28px;box-shadow:0 18px 48px #06121d26;isolation:isolate}
.cinema-stage .cinema-picture{height:72vh;height:72svh;max-height:820px}
.cinema-stage:fullscreen{width:100%;margin:0;border:0;border-radius:0;box-shadow:none}
.cinema-stage:fullscreen .cinema-picture{height:100vh;height:100dvh;max-height:none}
@media(max-width:767px){.cinema-stage{width:calc(100% - 24px);border-radius:20px}.cinema-stage .cinema-picture{height:60svh;min-height:280px}.cinema-stage:fullscreen{width:100%;border-radius:0}.cinema-stage:fullscreen .cinema-picture{height:100dvh;min-height:0}}

/* Match the shared Bootstrap container used by header and footer. */
.cinema-stage{width:100%;margin-inline:0}
@media(max-width:767px){.cinema-stage{width:100%}}
#cinema-base{filter:saturate(.88) contrast(.94) brightness(1.01)}
.cinema-stage.original-mode #cinema-rich{clip-path:none!important}
.cinema-stage.original-mode :is(#cinema-base,#cinema-divider,.cinema-tag,.cinema-slider){display:none}
.cinema-stage.video-mode .cinema-picture{display:none}
.cinema-stage.video-mode .cinema-slider{position:static;transform:none;background:none;border:0}
.cinema-stage.video-mode :is(#cinema-reset,#cinema-compare){display:none}
#cinema-video{width:100%;height:72svh;max-height:820px;background:#08111f;object-fit:contain;display:block}
#cinema-video[hidden]{display:none}
.cinema-stage:fullscreen #cinema-video{height:calc(100dvh - 70px);max-height:none}
.cinema-stage.original-mode:fullscreen .cinema-slider{display:flex}
@media(max-width:767px){#cinema-video{height:60svh}}
.cinema-display-settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}.cinema-display-settings label{font-size:.8rem;font-weight:700}.cinema-display-settings select{width:100%;display:block;min-height:44px;margin-top:7px;padding:8px;border:1px solid var(--glass-border);border-radius:10px;background:var(--glass-bg-strong);color:var(--text-primary)}.cinema-resolution-note{font-size:.76rem;color:var(--text-muted);line-height:1.9}.cinema-stage .cinema-picture{height:auto;min-height:0;max-height:none;aspect-ratio:var(--cinema-ratio,16 / 9)}.cinema-picture canvas{object-fit:var(--cinema-fit,contain)}.cinema-stage:fullscreen .cinema-picture{height:100dvh;aspect-ratio:auto}.cinema select:focus-visible{outline:3px solid #41cfa2;outline-offset:3px}@media(max-width:767px){.cinema-display-settings{grid-template-columns:1fr}.cinema-stage .cinema-picture{height:auto;min-height:0}.cinema-stage:fullscreen .cinema-picture{height:100dvh}}
/* Keep the photo first and expert controls available on demand. */
.cinema-disclosure{border:0;padding:0;margin:8px 0 16px;font-size:.76rem}
.cinema-options{align-items:center;gap:10px}
.cinema-options>div{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cinema-options [data-scene]{text-align:right;padding:10px 14px;transition:background-color .15s,border-color .15s}
.cinema-options [data-scene] span{display:block;font-size:.7rem;opacity:.8;margin-bottom:4px}
.cinema-options [data-scene] strong{font-size:.83rem;font-weight:750}
.cinema-options [data-scene][aria-pressed=true]{box-shadow:inset 0 0 0 1px #64cda5}
.cinema-advanced{border:1px solid var(--glass-border);border-radius:12px;padding:12px 16px;margin:12px 0;background:var(--glass-bg)}
.cinema-advanced summary{font-size:.82rem;font-weight:700;cursor:pointer}
.cinema-advanced[open] summary{margin-bottom:12px}
.cinema-explain article{padding:12px 16px}
.cinema-explain h2{display:inline;margin-inline-start:8px}
.cinema-explain p{font-size:.78rem;margin-top:8px}
@media(max-width:767px){.cinema-options>div{flex-basis:100%}.cinema-options [data-scene]{padding:9px 7px}.cinema-options [data-scene] strong{font-size:.72rem}.cinema-options [data-scene] span{font-size:.65rem}.cinema-options>#cinema-original,.cinema-options>#cinema-fullscreen{flex:1}}
@media(prefers-reduced-motion:reduce){.cinema-options [data-scene]{transition:none}}