.photo-finder{margin:32px 7% 0;border:1px solid #47545a;border-radius:16px;overflow:hidden;background:#171e23}.finder-heading,.finder-controls{display:flex;align-items:center;justify-content:space-between;padding:22px 28px;gap:20px}.finder-heading>span{font-size:20px}.finder-heading small,.finder-caption,.finder-mode,.finder-state{font-size:12px;color:#adbbc3;letter-spacing:.06em}.finder-scene{position:relative;height:420px;overflow:hidden;cursor:crosshair}.finder-scene canvas{display:block;width:100%;height:100%;touch-action:pan-y}.finder-frame{position:absolute;width:62%;height:68%;left:19%;top:14%;pointer-events:none;border:1px solid #d2dee34d;box-shadow:0 0 0 300px #0b101327;transition:transform .35s ease-out}.finder-frame:before,.finder-frame:after{content:'';position:absolute;inset:33.33% 0;border-top:1px solid #d2dee323;border-bottom:1px solid #d2dee323}.finder-frame:after{inset:0 33.33%;border:0;border-left:1px solid #d2dee323;border-right:1px solid #d2dee323}.finder-frame i{position:absolute;left:50%;top:50%;width:16px;height:16px;border:1px solid #dce5e6a0;transform:translate(-50%,-50%)}.finder-frame>span{position:absolute;top:-23px;left:0;font:10px monospace;color:#c5d4dc}.finder-caption{position:absolute;bottom:15px;left:24px;font-size:10px}.finder-controls{border-top:1px solid #39454b;display:grid;grid-template-columns:1fr auto 1fr}.finder-mode{text-align:right;font:10px monospace;letter-spacing:.16em}.finder-shutter{width:54px;height:54px;padding:5px;border:1px solid #bacbd3;border-radius:50%;background:none;cursor:pointer;transition:transform .2s}.finder-shutter span{display:block;width:100%;height:100%;border-radius:50%;background:#c7d3d9;transition:background .2s}.finder-shutter:hover{transform:scale(1.08)}.finder-shutter:focus-visible{outline:2px solid white;outline-offset:5px}.is-frozen .finder-shutter span{background:#6e8b9b}.is-frozen .finder-frame{border-color:#d5e4e7}.finder-scene:after{content:'';position:absolute;inset:0;pointer-events:none;background:#e8eff1;opacity:0}.finder-flash:after{animation:finder-flash .4s ease-out}@keyframes finder-flash{from{opacity:.42}to{opacity:0}}@media(max-width:640px){.photo-finder{margin:24px 6% 0}.finder-heading{align-items:flex-start;flex-direction:column;gap:8px;padding:20px}.finder-scene{height:320px}.finder-frame{left:12%;width:76%}.finder-controls{padding:18px 20px;gap:10px}.finder-state{font-size:11px}.finder-mode{font-size:9px}}@media(prefers-reduced-motion:reduce){.photo-finder *{transition:none!important;animation:none!important}}

.finder-frame{pointer-events:auto;touch-action:none;cursor:grab;transition:border-color .2s;user-select:none}.finder-frame.is-dragging{cursor:grabbing;border-color:#e2edf0}.finder-frame:focus-visible{outline:2px solid #c4dbe7;outline-offset:4px}.is-frozen .finder-frame{cursor:default}.finder-frame>span{top:8px;left:10px}
/* Draggable phone camera, with an actual transparent view onto the scene. */
.finder-scene{height:540px}
.finder-frame{width:232px;height:458px;border:5px solid #353b40;border-radius:36px;box-sizing:border-box;background:transparent;box-shadow:0 20px 55px #0009,0 0 0 1px #9aa6af77,inset 0 0 0 1px #000;overflow:hidden;color:#f0f1f2}
.finder-frame:before,.finder-frame:after{display:none}
.phone-camera-top{height:64px;background:#111315f5;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:21px}
.phone-island{width:68px;height:19px;background:#000;border-radius:20px}
.phone-camera-view{position:absolute;inset:64px 0 122px;background:linear-gradient(90deg,transparent 33%,#ffffff30 33.3%,transparent 33.7%,transparent 66%,#ffffff30 66.3%,transparent 66.7%),linear-gradient(transparent 33%,#ffffff30 33.3%,transparent 33.7%,transparent 66%,#ffffff30 66.3%,transparent 66.7%)}
.finder-frame .phone-camera-view i{width:43px;height:43px;border:1px solid #eed58a;left:50%;top:50%}
.phone-zoom{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:#111b;border-radius:50%;padding:8px;font-size:11px;color:#f4d787}
.phone-camera-bottom{position:absolute;bottom:0;width:100%;height:122px;background:#111315f5;padding:12px 16px 8px;box-sizing:border-box}
.phone-modes{display:flex;justify-content:center;gap:20px;font-size:10px;color:#acafb3}.phone-modes strong{color:#f4d787;font-weight:500}
.phone-camera-actions{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:23px}
.phone-shutter{height:52px;width:52px;border:3px solid #f4f4f4;background:#f4f4f4;border-radius:50%;box-shadow:inset 0 0 0 3px #151719;padding:0;cursor:pointer}.phone-shutter:active{transform:scale(.94)}.phone-shutter:focus-visible{outline:2px solid #f4d787;outline-offset:3px}
.phone-thumbnail{width:28px;height:28px;border-radius:5px;border:1px solid #777;background:linear-gradient(150deg,#849ba7,#1c3646)}
.phone-home{display:block;width:72px;height:3px;background:#eee;border-radius:3px;margin:12px auto 0}
.finder-frame>.phone-frame-count{position:absolute;top:70px;left:10px;font:8px monospace;color:#e1e5e7}
.is-frozen .phone-shutter{background:#91a9b6}.is-frozen .phone-thumbnail{background:linear-gradient(150deg,#dae4de 10%,#6c8596 35%,#233c4d 60%)}
@media(max-width:640px){.finder-scene{height:470px}.finder-frame{width:200px;height:404px;border-radius:30px}.phone-camera-top{height:52px}.phone-camera-view{top:52px;bottom:116px}.phone-camera-bottom{height:116px}.finder-frame>.phone-frame-count{top:58px}}