:root{--paper:#f5f1e5;--ink:#272d25;--focus:#fff0b9}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#292a20;color:var(--paper);font-family:Arial,'Apple SD Gothic Neo','Malgun Gothic',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:6px}#viewport{position:fixed;inset:0;overflow:hidden;cursor:grab;touch-action:none}#viewport.dragging{cursor:grabbing}.scene{position:absolute;line-height:0;will-change:left,top}.scene>img{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none;pointer-events:none}#targets{position:absolute;inset:0}.object-target{--near:0;position:absolute;border:0;padding:0;background:none;color:var(--focus);cursor:crosshair;isolation:isolate;outline:none!important}.object-target:before{content:'';position:absolute;inset:-6px;z-index:2;background:linear-gradient(currentColor,currentColor) 0 0/13px 1px,linear-gradient(currentColor,currentColor) 0 0/1px 13px,linear-gradient(currentColor,currentColor) 100% 0/13px 1px,linear-gradient(currentColor,currentColor) 100% 0/1px 13px,linear-gradient(currentColor,currentColor) 0 100%/13px 1px,linear-gradient(currentColor,currentColor) 0 100%/1px 13px,linear-gradient(currentColor,currentColor) 100% 100%/13px 1px,linear-gradient(currentColor,currentColor) 100% 100%/1px 13px;background-repeat:no-repeat;opacity:calc(var(--near)*.55);transform:scale(1.08);transition:opacity .2s,transform .3s;pointer-events:none}.object-target:after{content:'＋';position:absolute;inset:0;display:grid;place-items:center;font-size:15px;font-weight:300;opacity:0;transition:opacity .2s;text-shadow:0 1px 5px #000;pointer-events:none}.object-target canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;box-shadow:0 8px 28px #0003;transform:scale(1);transition:opacity .25s,transform .4s cubic-bezier(.2,.7,.2,1);pointer-events:none}.object-label{position:absolute;left:50%;top:calc(100% + 15px);transform:translate(-50%,-3px);padding:9px 12px;background:#1e241ee8;backdrop-filter:blur(8px);white-space:nowrap;color:var(--paper);font-size:12px;line-height:1.3;text-align:left;opacity:0;transition:opacity .2s,transform .25s;pointer-events:none;box-shadow:0 4px 20px #0002}.object-label small{display:block;margin-top:3px;color:#d8d6c7;font:italic 11px Georgia,serif}.object-label b{font-size:9px;font-weight:400;color:#d1d2bd;display:block;margin-top:7px;letter-spacing:1px}.object-target.label-above .object-label{top:auto;bottom:calc(100% + 15px)}.object-target:hover,.object-target:focus-visible{z-index:10}.object-target:hover:before,.object-target:focus-visible:before{opacity:1;transform:scale(1)}.object-target:hover:after,.object-target:focus-visible:after{opacity:.8}.object-target:hover canvas,.object-target:focus-visible canvas{opacity:1;transform:scale(1.045);filter:saturate(1.08) brightness(1.07)}.object-target:hover .object-label,.object-target:focus-visible .object-label{opacity:1;transform:translate(-50%,0)}.object-target.captured:before{color:#d5e8b4}.object-target.shot canvas{animation:shot .4s ease-out}@keyframes shot{0%{filter:brightness(1.7);transform:scale(1.065)}100%{filter:brightness(1.07);transform:scale(1.045)}}header,footer{position:fixed;left:0;width:100%;z-index:20;pointer-events:none;display:flex;align-items:center;justify-content:space-between;gap:20px}header a,header button,footer a,footer button{pointer-events:auto}header{top:0;padding:27px 34px 55px;background:linear-gradient(#10180e83,transparent)}.wordmark{font-size:30px;font-weight:800;letter-spacing:-1.8px;text-shadow:0 2px 15px #0004}.wordmark span{color:#efcb9c;margin-left:5px;font-weight:400}.header-right{display:flex;align-items:center;gap:27px}.privacy{font-size:11px;letter-spacing:.3px;text-shadow:0 1px 8px #000}.plain-button{color:var(--paper);background:none;border:0;padding:8px 0;font-size:11px}footer{bottom:0;align-items:flex-end;padding:55px 34px 25px;background:linear-gradient(transparent,#111a10b8)}.art-credit{font-size:12px;line-height:1.5;text-shadow:0 1px 9px #0008}.art-credit i{font-family:Georgia,serif;font-size:14px}.art-credit span{display:block;font-size:8px;letter-spacing:.2px;opacity:.7;margin-top:5px}.instruction{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);text-align:center;margin:0;font-size:11px;line-height:1.6;white-space:nowrap;text-shadow:0 1px 8px #000}.instruction small{display:block;font-size:8px;letter-spacing:1px;color:#d6dacb;margin-top:6px}.instruction small span{margin:0 6px}.touch-hint{display:none}.collection-button{border:1px solid #eee9d84d;border-radius:0;background:#1e291e5c;backdrop-filter:blur(8px);color:var(--paper);display:flex;align-items:center;gap:10px;padding:12px 15px;min-height:44px}.collection-button:hover{background:#1e291ec9}.mini-frame{width:15px;height:18px;border:1px solid #f4eddb;border-bottom-width:4px;transform:rotate(-7deg);margin-right:7px}#count{font:20px Georgia,serif}.total{font-size:9px;opacity:.6}.toast{position:fixed;bottom:110px;left:50%;transform:translate(-50%,8px);background:#eaeedfe8;backdrop-filter:blur(10px);color:#293323;padding:12px 19px;font-size:12px;z-index:30;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap}.toast.visible{opacity:1;transform:translate(-50%,0)}dialog{border:1px solid #d2d5c7;background:#f2f0e6;color:var(--ink);width:min(520px,calc(100vw - 32px));max-height:85dvh;padding:42px;box-shadow:0 20px 90px #0004}dialog::backdrop{background:#17201588;backdrop-filter:blur(7px)}dialog .close{position:absolute;right:13px;top:8px;background:none;border:0;font-size:26px;font-weight:300;color:var(--ink)}.eyebrow{font-size:9px;letter-spacing:1.7px;color:#71796a}dialog h1{font:44px/1.1 Georgia,serif;letter-spacing:-2px;margin:22px 0}dialog h1 em{color:#7a8059}dialog p{font-size:14px;line-height:1.9}dialog .note{font-size:12px;line-height:1.9;color:#6a7362}dialog button:focus-visible{outline-color:#596e42}#collection-dialog{width:min(720px,calc(100vw - 32px))}dialog h2{font-size:22px;font-weight:400;margin:18px 0 24px}#dialog-count{font:25px Georgia,serif;color:#7c845e;margin-left:10px}.film{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px}.shot-card{border:1px solid #dedfd0;background:#fffdf5;padding:6px;text-align:left;color:var(--ink)}.shot-card canvas{width:100%;aspect-ratio:1.3;object-fit:cover;display:block}.shot-card span{display:block;font-size:11px;margin:9px 3px 5px}.film-empty{grid-column:1/-1;margin:0 0 12px;font-size:13px;color:#747e69}.reset{background:none;border:0;border-bottom:1px solid #aeb6a3;padding:5px 0;color:#606b55;font-size:11px;margin-top:25px}.reset:disabled{opacity:.3;cursor:default}[hidden]{display:none!important}@media(max-width:1050px){.privacy{display:none}.instruction{bottom:80px}footer{padding-top:95px}.toast{bottom:130px}}@media(max-width:600px){header{padding:21px 20px 45px}.wordmark{font-size:27px}footer{padding:75px 20px 20px}.art-credit i{font-size:12px}.art-credit span{font-size:7px;max-width:220px}.collection-button{padding:10px;gap:7px}.mini-frame{margin-right:4px}.instruction{bottom:87px;font-size:10px}.instruction small{font-size:7px;margin-top:4px}.desktop-hint{display:none}.touch-hint{display:inline}.object-label{font-size:11px;padding:8px 10px}.object-label b{font-size:8px}.object-target:before{background-size:9px 1px,1px 9px,9px 1px,1px 9px,9px 1px,1px 9px,9px 1px,1px 9px}.toast{bottom:132px;font-size:11px}dialog{padding:32px}.film{grid-template-columns:repeat(2,1fr)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.object-target:hover canvas,.object-target:focus-visible canvas{transform:none}}@media(hover:none){.desktop-hint{display:none}.touch-hint{display:inline}.instruction small{font-size:0}.instruction small:after{content:'INTERACTIVE DEMO';font-size:8px}}

body:has(.object-target:hover) .instruction,body:has(.object-target:focus-visible) .instruction{opacity:0}.instruction{transition:opacity .2s}

/* Preserve small-object hit areas when nested inside larger object boxes. */
.object-target,.object-target:hover,.object-target:focus-visible{z-index:var(--layer)}
.object-target:hover .object-label,.object-target:focus-visible .object-label{z-index:150}
#privacy-regions{position:absolute;inset:0;pointer-events:none;z-index:200}
.privacy-target{position:absolute;border:0;padding:0;background:transparent;pointer-events:auto;cursor:default;outline:none!important;overflow:hidden}
.privacy-target canvas{display:block;width:100%;height:100%;image-rendering:pixelated;opacity:0;pointer-events:none}
.privacy-target.active canvas{opacity:1}
.privacy-target:focus-visible{box-shadow:0 0 0 2px #939e8f}
.privacy-active .object-target:before,.privacy-active .object-target:after,.privacy-active .object-target canvas,.privacy-active .object-label,.dragging .object-target:before,.dragging .object-target:after,.dragging .object-target canvas,.dragging .object-label{opacity:0!important}
body:has(.privacy-active) .instruction{opacity:0}