:root{--pointer-x:50vw;--pointer-y:50vh}
@keyframes mote{0%{transform:translate3d(0,20px,0);opacity:0}15%{opacity:.6}70%{opacity:.25}100%{transform:translate3d(35px,-120px,0);opacity:0}}
@keyframes leak-pass{0%{opacity:0;transform:translateX(-45%) rotate(-12deg)}35%{opacity:.8}100%{opacity:0;transform:translateX(65%) rotate(8deg)}}
@keyframes exposure{0%{opacity:0}8%{opacity:.6}18%{opacity:.08}100%{opacity:0}}
@keyframes rec{50%{opacity:.15}}
@keyframes sprocket-run{to{background-position:36px 0}}
@keyframes signal{0%,100%{transform:none}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
@keyframes meter{0%,100%{transform:scaleY(.25)}20%{transform:scaleY(.8)}45%{transform:scaleY(.45)}70%{transform:scaleY(1)}}
@keyframes scan{from{transform:translateY(-100vh)}to{transform:translateY(100vh)}}
body{background-attachment:fixed}
body:before{background:radial-gradient(circle 190px at var(--pointer-x) var(--pointer-y),rgba(216,255,62,.1),transparent 72%),radial-gradient(circle at 50% 50%,rgba(216,255,62,.08),transparent 28%)}
body.exposure-pop:before{z-index:89;inset:0;background:#fff;animation:exposure .43s ease-out both}
body.light-leak-live:before{z-index:89;inset:-20%;background:linear-gradient(90deg,transparent 20%,rgba(255,42,0,.08) 38%,rgba(255,126,0,.58) 49%,rgba(255,240,170,.28) 58%,transparent 76%);mix-blend-mode:screen;animation:leak-pass 1.8s ease-in-out both}
.grain-off:after{display:none}.darkroom-dust{position:fixed;z-index:88;inset:0;overflow:hidden;pointer-events:none}.darkroom-dust i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:#f2eccf;box-shadow:0 0 6px rgba(255,245,190,.5);animation:mote var(--d) linear var(--delay) infinite}
.lab-hud{position:fixed;z-index:89;right:max(14px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));display:grid;grid-template-columns:auto auto;gap:5px 14px;padding:9px 11px;border:1px solid rgba(216,255,62,.25);background:rgba(5,6,4,.72);backdrop-filter:blur(8px);color:rgba(238,234,222,.62);font:8px/1.2 var(--mono);letter-spacing:.1em;pointer-events:none;text-transform:uppercase}.hud-rec{color:var(--acid)}.hud-rec i{display:inline-block;width:5px;height:5px;margin-right:5px;border-radius:50%;background:#ff4b32;box-shadow:0 0 7px #ff4b32;animation:rec 1s steps(1) infinite}.lab-hud.signal{animation:signal .16s steps(2) 3}
.lab-instruments{position:fixed;z-index:87;inset:0;pointer-events:none;color:rgba(216,255,62,.42);font:7px var(--mono);letter-spacing:.12em}.ruler{position:absolute;opacity:.28}.ruler-x{left:0;right:0;top:82px;height:7px;background:repeating-linear-gradient(90deg,var(--acid) 0 1px,transparent 1px 9px)}.ruler-y{top:0;bottom:0;left:6px;width:7px;background:repeating-linear-gradient(0deg,var(--acid) 0 1px,transparent 1px 9px)}.focus-reticle{position:absolute;left:var(--pointer-x);top:var(--pointer-y);width:34px;height:34px;border:1px solid currentColor;border-radius:50%;transform:translate(-50%,-50%);opacity:.45}.focus-reticle:before,.focus-reticle:after{content:"";position:absolute;background:currentColor}.focus-reticle:before{left:-9px;right:-9px;top:50%;height:1px}.focus-reticle:after{top:-9px;bottom:-9px;left:50%;width:1px}.focus-reticle b{position:absolute;inset:10px;border:1px solid currentColor;border-radius:50%}
.chem-panel{position:absolute;left:18px;bottom:24px;width:138px;padding:10px;border-left:2px solid var(--acid);background:rgba(5,6,4,.62);backdrop-filter:blur(5px)}.chem-panel strong,.chem-panel span{display:block}.chem-panel strong{color:var(--acid);margin-bottom:5px}.chem-panel span{color:rgba(238,234,222,.55)}.chem-panel em{display:flex;align-items:end;gap:3px;height:19px;margin-top:7px}.chem-panel em i{width:3px;height:100%;background:var(--acid);transform-origin:bottom;animation:meter 1.1s ease-in-out infinite}.chem-panel em i:nth-child(2){animation-delay:-.7s}.chem-panel em i:nth-child(3){animation-delay:-.3s}.chem-panel em i:nth-child(4){animation-delay:-.9s}.chem-panel em i:nth-child(5){animation-delay:-.5s}.chem-panel em i:nth-child(6){animation-delay:-.1s}
.edge-code{position:absolute;right:7px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%);opacity:.45}.scan-status{position:absolute;right:18px;top:100px;text-align:right;line-height:1.6}.lab-instruments:after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--acid),transparent);box-shadow:0 0 12px var(--acid);opacity:.16;animation:scan 8s linear infinite}
.top:after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:4px;opacity:.32;background:repeating-linear-gradient(90deg,transparent 0 10px,var(--acid) 10px 18px,transparent 18px 36px);animation:sprocket-run 1.2s linear infinite}.top{position:relative}
.intro h1{position:relative;text-shadow:1px 0 rgba(255,70,45,.22),-1px 0 rgba(74,180,255,.2);transition:text-shadow .25s ease}.intro h1:hover{text-shadow:5px 0 rgba(255,70,45,.32),-5px 0 rgba(74,180,255,.28)}
.roll-art:before,.roll-art:after{content:"";position:absolute;width:22px;height:22px;opacity:0;border-color:var(--acid);transition:opacity .25s ease,transform .25s ease}.roll-art:before{left:4%;top:10%;border-left:1px solid;border-top:1px solid;transform:translate(8px,8px)}.roll-art:after{right:4%;bottom:10%;border-right:1px solid;border-bottom:1px solid;transform:translate(-8px,-8px)}.roll-card:hover .roll-art:before,.roll-card:hover .roll-art:after,.roll-card:focus-visible .roll-art:before,.roll-card:focus-visible .roll-art:after{opacity:.8;transform:none}
.roll-data b:before{content:"●";margin-right:6px;color:var(--acid);font-size:7px}.roll-card:hover .roll-data b:before{animation:rec .45s steps(1) infinite}
.inspection-stamp{position:absolute;right:2%;top:12%;z-index:5;width:58px;height:58px;display:grid;place-content:center;border:1px solid rgba(216,255,62,.46);border-radius:50%;color:rgba(216,255,62,.58);font:7px/1.15 var(--mono);letter-spacing:.05em;text-align:center;transform:rotate(9deg);mix-blend-mode:screen;transition:transform .3s ease,opacity .3s ease}.inspection-stamp>*{display:block;font-style:normal}.inspection-stamp i{font-size:11px;font-weight:900}.roll-card:hover .inspection-stamp{transform:rotate(-7deg) scale(1.12);opacity:1}
.strip-layer:after{content:"NEGATIVE / DO NOT EXPOSE TO DIRECT LIGHT";position:absolute;left:50%;bottom:18px;transform:translateX(-50%);white-space:nowrap;color:rgba(238,234,222,.28);font:8px var(--mono);letter-spacing:.22em;pointer-events:none}.film-strip{background-image:linear-gradient(rgba(255,255,255,.018) 50%,transparent 50%);background-size:100% 4px}
.photo-layer:before,.photo-layer:after{content:"";position:absolute;inset:18px;pointer-events:none;background:linear-gradient(var(--acid),var(--acid)) left top/28px 1px no-repeat,linear-gradient(var(--acid),var(--acid)) left top/1px 28px no-repeat,linear-gradient(var(--acid),var(--acid)) right bottom/28px 1px no-repeat,linear-gradient(var(--acid),var(--acid)) right bottom/1px 28px no-repeat;opacity:.28}.photo-layer:after{inset:50% auto auto 50%;width:12px;height:12px;transform:translate(-50%,-50%);border:1px solid rgba(216,255,62,.2);border-radius:50%;background:none}
@media(pointer:coarse),(max-width:600px){.lab-hud{grid-template-columns:auto;right:10px;bottom:8px;opacity:.55}.lab-hud [data-hud-coords],.darkroom-dust i:nth-child(n+8),.focus-reticle,.ruler-y,.chem-panel,.scan-status{display:none}.edge-code{right:3px;opacity:.25}.top:after{animation-duration:2.4s}.intro h1:hover{text-shadow:1px 0 rgba(255,70,45,.22),-1px 0 rgba(74,180,255,.2)}.inspection-stamp{right:0;top:8%;transform:scale(.82) rotate(9deg)}}
@media(prefers-reduced-motion:reduce){.darkroom-dust,.hud-rec i,.top:after,.lab-instruments:after{display:none}.lab-hud{opacity:.45}.intro h1,.roll-art:before,.roll-art:after{transition:none}.roll-card:hover .roll-data b:before,.chem-panel em i{animation:none}}