/* Camera view uses real playback metadata and never changes the film colors. */
.hero-bg{width:100%;max-width:calc((100svh - 135px) * 16 / 9);height:auto;max-height:none;margin:0 auto;aspect-ratio:16/9}
.hero-bg #heroVid{opacity:0}.hero-bg #heroVid.has-frame{opacity:1}.hero-bg #hero-poster{object-fit:contain;filter:none}
.hero-film-rail{max-width:calc((100svh - 135px) * 16 / 9);padding-left:0;padding-right:0}
#hero-film-open{background:#fafaf7;color:#0a0a0a;border-color:#fafaf7;font-weight:600}#hero-film-open:hover{background:#e5e5e5}
.hero-camera{position:absolute;inset:0;pointer-events:none;z-index:2;color:#fff;font:11px/1.35 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.08em}
.hero-camera[hidden]{display:none}
.camera-corner{position:absolute;width:22px;height:22px;border-color:#fff;border-style:solid;border-width:0;opacity:.85;filter:drop-shadow(0 1px 1px #000)}
.camera-tl{left:3.5%;top:6%;border-top-width:1px;border-left-width:1px}.camera-tr{right:3.5%;top:6%;border-top-width:1px;border-right-width:1px}.camera-bl{left:3.5%;bottom:6%;border-bottom-width:1px;border-left-width:1px}.camera-br{right:3.5%;bottom:6%;border-bottom-width:1px;border-right-width:1px}
.camera-label{position:absolute;background:#0a0a0a;padding:5px 8px;white-space:nowrap}.camera-brand{left:7%;top:5%}.camera-brand b{font-family:var(--sans);color:#ff6b6b;font-size:14px;margin-right:5px}.camera-format{right:7%;top:5%}.camera-mode{left:7%;bottom:5%;font-size:9px;letter-spacing:.12em}.camera-time{right:7%;bottom:5%}
#hero-film-dialog{border:1px solid #555;padding:0;margin:auto;width:min(1100px,94vw);max-height:94dvh;background:#0a0a0a;color:#fafaf7;overflow:auto}
#hero-film-dialog::backdrop{background:rgba(0,0,0,.86)}
.hero-dialog-head{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.hero-dialog-head h2{font-size:17px;margin:0;line-height:1.3}
#hero-film-close{min-height:44px;padding:8px 14px;border:1px solid #737373;background:#0a0a0a;color:#fafaf7;font:12px var(--mono);cursor:pointer}
#hero-full-film{display:block;width:100%;height:auto;max-height:70dvh;background:#000;object-fit:contain}
#hero-dialog-description{padding:16px 20px;font-size:14px;line-height:1.6;color:#ddd}
#hero-dialog-description a{color:#fff;text-decoration:underline}
@media(max-width:760px){.hero-bg{max-width:none}.hero-film-rail{max-width:none;padding-left:var(--page);padding-right:var(--page)}.hero-camera{font-size:9px;letter-spacing:.03em}.camera-label{padding:3px 5px}.camera-brand b{font-size:11px}.camera-corner{width:14px;height:14px}.camera-mode{display:none}.camera-format span{display:none}.hero-film-actions button{font-size:10px}.hero-film-actions{gap:5px}.hero-dialog-head{padding:10px}.hero-dialog-head h2{font-size:14px}}