/* Camera starts as a gallery. Webcam temporarily takes that wall's place. */
.live-viewfinder{display:none!important;left:auto!important;right:4%!important;top:10%!important;width:45%!important;height:80%!important;aspect-ratio:auto!important;padding:1.5%!important}.camera-view.webcam-active .live-viewfinder{display:block!important}.camera-view.webcam-active .photo-wall{opacity:0;pointer-events:none}.printer-slot{position:absolute;z-index:4;left:11%;top:58%;width:28%;height:7px;background:linear-gradient(#131313,#685d4d 45%,#080808);box-shadow:0 2px 5px #000}.camera-print{position:absolute;z-index:5;left:15%;top:58%;width:20%;aspect-ratio:5/6;padding:1.3%;background:#e8e0ce;box-shadow:4px 7px 14px #0008;display:none;transform-origin:top center}.camera-print img{width:100%;height:100%;object-fit:cover}.camera-view.printing .camera-print{display:block;animation:print-out 1.25s cubic-bezier(.2,.7,.25,1) both}.camera-view.printing .photo-wall{opacity:0;pointer-events:none}.captured-photo{z-index:4}.photo-frame{perspective:900px}.photo-frame.captured{transform-style:preserve-3d}.photo-frame.captured>.photo,.photo-frame.captured>img,.photo-frame.captured>figcaption{backface-visibility:hidden;transition:transform .45s}.photo-back{position:absolute;z-index:6;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4%;padding:13%;text-align:center;background:#d8c5a0;color:#42270f;backface-visibility:hidden;transform:rotateY(180deg);transition:transform .45s;font:clamp(6px,.55vw,13px) Georgia,serif}.photo-back p{margin:0;font-size:1.25em}.photo-back span{font-size:.88em}.photo-back button{width:90%;border:1px solid #795229;background:#f2e3c3;color:#45230e;padding:4%;font:inherit;cursor:pointer}.photo-frame.captured.flipped>.photo,.photo-frame.captured.flipped>img,.photo-frame.captured.flipped>figcaption{transform:rotateY(180deg)}.photo-frame.captured.flipped .photo-back{transform:rotateY(0)}@keyframes print-out{0%{clip-path:inset(0 0 100% 0);transform:translateY(-4%)}40%{clip-path:inset(0 0 46% 0);transform:translateY(6%)}100%{clip-path:inset(0);transform:translateY(45%)}}@media(max-width:700px){.live-viewfinder{right:2%!important;width:50%!important}.printer-slot{left:7%;width:37%}.camera-print{left:14%;width:27%}}
.live-viewfinder{display:none!important;left:auto!important;right:4%!important;top:10%!important;width:45%!important;height:80%!important;aspect-ratio:auto!important;padding:1.5%!important}.camera-view.webcam-active .live-viewfinder{display:block!important}.camera-view.webcam-active .photo-wall{opacity:0;pointer-events:none}.printer-slot{position:absolute;z-index:4;left:11%;top:58%;width:28%;height:7px;background:linear-gradient(#131313,#685d4d 45%,#080808);box-shadow:0 2px 5px #000}.camera-print{position:absolute;z-index:5;left:15%;top:58%;width:20%;aspect-ratio:5/6;padding:1.3%;background:#e8e0ce;box-shadow:4px 7px 14px #0008;display:none;transform-origin:top center}.camera-print img{width:100%;height:100%;object-fit:cover}.camera-view.printing .camera-print{display:block;animation:print-out 1.25s cubic-bezier(.2,.7,.25,1) both}.camera-view.printing .photo-wall{opacity:0;pointer-events:none}.captured-photo{z-index:4}.photo-frame{perspective:900px}.photo-frame.captured{transform-style:preserve-3d}.photo-frame.captured>.photo,.photo-frame.captured>img,.photo-frame.captured>figcaption{backface-visibility:hidden;transition:transform .45s}.photo-back{position:absolute;z-index:6;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4%;padding:13%;text-align:center;background:#d8c5a0;color:#42270f;backface-visibility:hidden;transform:rotateY(180deg);transition:transform .45s;font:clamp(10px,.85vw,18px) Georgia,serif}.photo-back p{margin:0;font-size:1.15em}.photo-back span{font-size:.9em}.photo-back button{width:90%;border:1px solid #795229;background:#f2e3c3;color:#45230e;padding:4%;font:inherit;cursor:pointer}.photo-frame.captured.flipped>.photo,.photo-frame.captured.flipped>img,.photo-frame.captured.flipped>figcaption{transform:rotateY(180deg)}.photo-frame.captured.flipped .photo-back{transform:rotateY(0)}@keyframes print-out{0%{clip-path:inset(0 0 100% 0);transform:translateY(-4%)}40%{clip-path:inset(0 0 46% 0);transform:translateY(6%)}100%{clip-path:inset(0);transform:translateY(45%)}}@media(max-width:700px){.live-viewfinder{right:2%!important;width:50%!important}.printer-slot{left:7%;width:37%}.camera-print{left:14%;width:27%}}