:root{color-scheme:dark;--room:#080b09;--paper:#e0e9e3;--screen:1;--intro:0;--progress:0;--shutter:0;--activity:0;--grain-x:0px;--scratch-x:0px;--jitter:0px;--flicker:1;--photo-ratio:1.5}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--room);color:var(--paper);font-family:'IBM Plex Mono',monospace}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid #8cdab1;outline-offset:5px}.projection-nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;gap:16px;padding:26px 4vw;font-size:11px}.projection-skip{position:absolute;top:-80px;left:20px;z-index:50;padding:14px;background:#eee;color:#111}.projection-skip:focus{top:15px}.projection-story{height:100svh;position:relative}.projection-enabled .projection-story{height:var(--story-height)}.projection-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 55% 40%,#142019 0,#0b100d 55%,#050806 100%)}.room-haze{position:absolute;inset:0;background:radial-gradient(ellipse at 75% 7%,#a6d9b90b,transparent 60%);pointer-events:none}.projection-screen{position:absolute;left:50%;top:45%;width:min(72vw,920px,calc(57svh * var(--photo-ratio)));aspect-ratio:var(--photo-ratio);opacity:var(--screen);transform:translate(-50%,-50%);filter:drop-shadow(0 0 28px #7dc99d18)}.projection-window{position:absolute;inset:0;background:#101812;border-radius:5px;box-shadow:0 0 10px 3px #53856535;overflow:visible}.projected-frame{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none}.projected-frame:first-child{opacity:1}.projected-frame img{display:block;width:100%;height:100%;object-fit:contain;filter:saturate(.94) contrast(.97) brightness(var(--flicker));transform:translateY(var(--jitter));border-radius:5px}.projected-frame figcaption{position:absolute;right:0;top:calc(100% + 24px);width:min(360px,72vw);text-align:right}.frame-label{font:8px/1.7 'IBM Plex Mono',monospace;letter-spacing:.09em;color:#9bae9f}.projected-frame h2{font:500 clamp(18px,1.7vw,24px)/1.15 Manrope,Arial,sans-serif;margin:5px 0 8px;letter-spacing:-.04em}.projected-frame p{font:10px/1.8 'IBM Plex Mono',monospace;margin:0;color:#bdcec1}.film-vignette,.film-grain,.film-scratches,.film-shutter,.film-burn,.film-glitch{position:absolute;inset:0;border-radius:5px;pointer-events:none}.film-vignette{box-shadow:inset 0 0 28px 13px #050a07c9;background:linear-gradient(90deg,#80bb9220,transparent 12%,transparent 88%,#18352630)}.film-burn{background:linear-gradient(0deg,#173323a8 0,#477b5550 4%,#79b78d20 9%,transparent 18%,transparent 89%,#42735138 96%,#12291cab 100%);box-shadow:inset 0 -10px 17px #315d3f60,inset 0 5px 13px #52846238;mix-blend-mode:screen;opacity:calc(.45 + var(--activity) * .18)}.film-grain{opacity:calc(.12 + var(--activity) * .12);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h220v220H0z'/%3E%3C/svg%3E");background-position:var(--grain-x) var(--scratch-x);mix-blend-mode:soft-light}.film-scratches{opacity:calc(var(--activity) * .55);background:linear-gradient(90deg,transparent 21%,#b9dfc578 21.04%,transparent 21.16%,transparent 78%,#b9dfc54d 78.07%,transparent 78.18%);background-position:var(--scratch-x) 0;mask-image:linear-gradient(transparent,#000 19%,#000 73%,transparent)}.film-glitch{opacity:calc(var(--activity) * .25);background:linear-gradient(transparent 27%,#c5e8d175 27.2%,transparent 27.7%,transparent 68%,#050a07b0 68.1%,transparent 68.7%);transform:translateY(var(--scratch-x));mix-blend-mode:screen}.film-shutter{background:#060b08;opacity:var(--shutter)}.projection-intro{position:absolute;z-index:6;left:50%;top:34%;width:72vw;max-width:920px;transform:translateX(-50%);opacity:var(--intro);pointer-events:none}.projection-intro p{font-size:10px;letter-spacing:.12em;color:#a2b8a8}.projection-intro h1{font:500 clamp(44px,6vw,80px)/1.06 Manrope,sans-serif;letter-spacing:-.065em;margin:25px 0 30px}.projection-intro em{font-style:normal;color:#90a997}.projection-intro>span{font-size:11px;color:#c7dbce}.projection-console{position:absolute;bottom:6%;left:14%;right:14%;display:flex;justify-content:space-between;gap:15px;font-size:8px;letter-spacing:.09em;color:#91a997}.lamp-status{display:flex;align-items:center;gap:9px}.lamp-status i{width:4px;height:4px;border-radius:50%;background:#85d3ab}.reel-progress{position:absolute;left:14%;right:14%;bottom:4%;height:1px;background:#5d806845}.reel-progress span{display:block;width:calc(var(--progress) * 100%);height:100%;background:#85d3ab}.projection-demo{position:absolute;left:4%;top:9%;font-size:8px;color:#7b9383}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(max-width:700px){.projection-nav{padding:20px;font-size:9px}.projection-nav>a:nth-child(2){display:none}.projection-screen{width:min(84vw,calc(49svh * var(--photo-ratio)));top:43%}.projection-intro{width:84vw;top:31%}.projection-intro h1{font-size:44px}.projection-intro p{max-width:250px;line-height:1.8}.projected-frame figcaption{top:calc(100% + 18px);width:min(330px,84vw)}.projected-frame p{font-size:9px;line-height:1.7}.projection-demo{top:10%;left:8%;right:8%;line-height:1.8}.projection-console{left:8%;right:8%;bottom:7%;font-size:7px;flex-wrap:wrap}.reel-progress{left:8%;right:8%;bottom:5%}.film-vignette{box-shadow:inset 0 0 18px 7px #050a07aa}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.film-grain,.film-scratches,.film-glitch,.film-shutter{display:none}.projected-frame img{transform:none;filter:saturate(.96)}.film-burn{opacity:.45}}

.projection-actions{display:flex;align-items:center;gap:24px}.projection-actions button{font:inherit;color:inherit;background:none;border:1px solid #53796165;border-radius:20px;padding:7px 12px;cursor:pointer}.projection-actions button:focus-visible{outline:2px solid #8cdab1;outline-offset:4px}.projection-actions button[aria-pressed=true]{border-color:#85cba4;color:#8cdab1}@media(max-width:700px){.projection-actions{gap:12px}.projection-actions button{padding:5px 8px}}