:root{--cream: #F2D8A7;--paper: #FBEFD6;--ink: #2B1810;--ink-soft: #6B3D1F;--accent: #D97A2C;--accent2: #7A8C3A;--flash-red: #ff5a4d;--camera-body-1: #1a1814;--camera-body-2: #2a2620;--display: "Bagel Fat One", cursive;--mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--page-bg: radial-gradient(ellipse at 30% 20%, #d97a2c 0%, #b54f1c 50%, #6b3416 100%)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0;background:var(--page-bg);color:var(--ink);font-family:var(--display);font-weight:400;overscroll-behavior:none}body{perspective:800px}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}.app{height:100dvh;width:100vw;display:flex;flex-direction:column;position:relative;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overflow:hidden}.welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--cream);gap:28px}.welcome-wordmark{font-family:var(--display);font-size:72px;font-weight:400;color:var(--ink);transform:rotate(-2deg);line-height:1}.welcome-stack{position:relative;width:240px;height:200px}.welcome-preview{position:absolute;width:140px;height:168px;background:var(--paper);padding:10px 10px 32px;border-radius:4px;box-shadow:0 8px 18px #2b18102e}.welcome-preview .stripe{width:100%;height:100%;background:repeating-linear-gradient(45deg,var(--accent) 0 8px,var(--accent2) 8px 16px);border-radius:1px}.welcome-preview.left{top:0;left:0;transform:rotate(-8deg)}.welcome-preview.right{bottom:0;right:0;transform:rotate(7deg)}.cta{font-family:var(--display);font-size:28px;font-weight:400;color:var(--ink);background:transparent;border:2px solid var(--ink);border-radius:999px;padding:8px 28px;transition:transform .2s ease,background .2s ease,color .2s ease}.cta:hover{background:var(--ink);color:var(--paper);transform:rotate(-1deg) scale(1.03)}.cta:active{transform:rotate(-1deg) scale(.98)}.hint{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:1.4px;color:#2b18108c}.camera{flex:1;display:flex;flex-direction:column;background:#0d0c0a;color:var(--paper);position:relative}.camera-status{display:flex;align-items:center;justify-content:space-between;padding:60px 20px 0}.camera-wordmark{font-family:var(--display);font-size:28px;font-weight:400;color:var(--paper)}.shot-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:#faf6ec1a;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.shot-pill .led{width:6px;height:6px;border-radius:50%;background:var(--flash-red);animation:blink 1.2s ease-in-out infinite}.shot-pill .label{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;color:#faf6ecd9}.viewfinder{flex:1;margin:16px;border-radius:18px;background:#1a1814;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #0009}.viewfinder video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.viewfinder-crop{position:absolute;top:50%;left:50%;width:min(86%,86vh);height:min(86%,86vh);transform:translate(-50%,-50%);pointer-events:none}.viewfinder-crop svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.ghost-a{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:.35;mix-blend-mode:screen;pointer-events:none}.viewfinder-instruction{position:absolute;bottom:20px;left:0;right:0;text-align:center;font-family:var(--display);font-size:26px;color:var(--paper);text-shadow:0 1px 6px rgba(0,0,0,.6)}.flash-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;pointer-events:none;opacity:0}.flash-overlay.firing{animation:flash .35s ease-out forwards}.camera-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:32px 24px 50px;gap:16px}.camera-upload{width:56px;height:56px;justify-self:start;border-radius:14px;background:#faf6ec1f;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;color:var(--paper)}.shutter{width:76px;height:76px;border-radius:50%;background:transparent;border:3px solid var(--paper);position:relative;transition:transform .12s ease;display:flex;align-items:center;justify-content:center;padding:0}.shutter:after{content:"";width:58px;height:58px;border-radius:50%;background:var(--paper)}.shutter:active{transform:scale(.92)}.shutter:active:after{background:#faf6ecb3}.camera-flip{width:56px;height:56px;justify-self:end;border-radius:14px;background:#faf6ec1f;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--paper);display:flex;align-items:center;justify-content:center}.develop{flex:1;display:flex;flex-direction:column;background:var(--cream);position:relative}.smooshcam{position:relative;height:92px;background:linear-gradient(180deg,var(--camera-body-1),var(--camera-body-2) 70%,transparent);flex-shrink:0}.smooshcam .led{position:absolute;top:24px;left:24px;width:8px;height:8px;border-radius:50%;background:var(--flash-red);animation:blink .6s ease-in-out infinite}.smooshcam .label{position:absolute;top:22px;right:24px;font-family:var(--display);font-size:18px;color:var(--paper);font-weight:400}.smooshcam .slot{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:240px;height:14px;background:#0a0907;border-radius:4px 4px 0 0;box-shadow:inset 0 4px 6px #000000b3}.develop-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:20px}.develop-controls{padding:20px 24px 50px;display:flex;flex-direction:column;align-items:center;gap:16px}.tip{font-family:var(--display);font-size:28px;font-weight:400;color:var(--ink);height:36px;text-align:center;transition:opacity .2s ease}.progress-bar{width:220px;height:4px;background:#2b18101f;border-radius:999px;overflow:hidden}.progress-bar-fill{height:100%;background:var(--ink);transition:width 80ms linear}.hold-shake{font-family:var(--display);font-size:24px;font-weight:400;color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:10px 28px;background:var(--paper);box-shadow:0 4px #2b181066;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:transform 80ms ease,box-shadow 80ms ease}.hold-shake.active{transform:translateY(4px);box-shadow:0 0 #2b181000}.motion-hint{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#2b18108c}.result{flex:1;display:flex;flex-direction:column;background:var(--cream)}.result-header{padding:60px 20px 0;text-align:center}.result-header .wordmark{font-family:var(--display);font-size:36px;font-weight:400;color:var(--ink);display:inline-block;transform:rotate(-2deg)}.result-stage{flex:1;display:flex;align-items:center;justify-content:center;perspective:800px}.result-actions{display:flex;gap:22px;justify-content:center;padding:0 20px 40px;font-family:var(--display);font-size:26px;font-weight:400}.result-actions button{color:var(--ink);transition:transform .18s ease}.result-actions button:hover{transform:rotate(-2deg) scale(1.05)}.result-actions .sep{color:#2b181066}.toast{position:fixed;top:20%;left:50%;transform:translate(-50%);font-family:var(--display);font-size:28px;color:var(--ink);background:var(--paper);padding:8px 20px;border-radius:999px;box-shadow:0 8px 18px #2b18102e;pointer-events:none;animation:flash 1.4s ease-out forwards;z-index:100}.error{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 24px);left:50%;transform:translate(-50%);font-family:var(--display);font-size:20px;color:var(--ink);text-align:center;max-width:80%}.polaroid{background:var(--paper);padding:16px 16px 60px;border-radius:4px;position:relative;box-shadow:inset 0 1px #0000000a,0 0 0 1px #0000000a,0 14px 28px #2b18102e,0 4px 8px #2b18101a;transform-origin:center}.polaroid:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:4px;background:radial-gradient(circle at 0% 0%,rgba(255,255,255,.4),transparent 35%),radial-gradient(circle at 100% 100%,rgba(0,0,0,.06),transparent 40%);pointer-events:none}.polaroid-photo{width:var(--photo-size, 220px);height:var(--photo-size, 220px);background:#1a1814;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #0006,inset 0 2px 8px #0000004d}.polaroid-photo img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.05) sepia(.06)}.polaroid-shine{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.05),transparent 60%);pointer-events:none}.dev-bath,.dev-sepia,.dev-bloom,.dev-grain{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.dev-bath{background:radial-gradient(circle at 25% 30%,rgba(200,80,25,.4),transparent 50%),radial-gradient(circle at 80% 80%,rgba(120,40,10,.3),transparent 60%),linear-gradient(135deg,#0c0805,#1f1408 45%,#080503);animation:bath-agitate 2.4s ease-in-out infinite}.dev-sepia{background:linear-gradient(180deg,#d28232f2,#3c230fd9);mix-blend-mode:multiply}.dev-bloom{background:radial-gradient(ellipse at 50% 50%,transparent 12%,rgba(0,0,0,.6) 65%,rgba(0,0,0,.95) 100%)}.dev-grain{background-image:radial-gradient(rgba(0,0,0,.85) .7px,transparent .7px),radial-gradient(rgba(0,0,0,.65) .6px,transparent .6px),radial-gradient(rgba(255,230,200,.18) .5px,transparent .5px),radial-gradient(rgba(0,0,0,.5) .4px,transparent .4px);background-size:3px 3px,4px 4px,2.5px 2.5px,5px 5px;background-position:0 0,1px 2px,2px 0,3px 1px;mix-blend-mode:multiply;animation:grain-jitter .18s steps(3) infinite}@keyframes bath-agitate{0%,to{transform:scale(1) translate(0);filter:brightness(1)}50%{transform:scale(1.04) translate(-1px,1px);filter:brightness(1.08)}}@keyframes grain-jitter{0%{transform:translate(0)}33%{transform:translate(-1px,1px)}66%{transform:translate(1px,-1px)}to{transform:translate(0)}}.washi-tape{position:absolute;top:-8px;left:50%;width:64px;height:22px;transform:translate(-50%) rotate(-3deg);background:linear-gradient(180deg,#f0e1aad9,#dcc88cd9);box-shadow:0 2px 4px #2b18102e}@keyframes blink{0%,to{opacity:1}50%{opacity:.25}}@keyframes flash{0%{opacity:0}20%{opacity:1}to{opacity:0}}@keyframes eject{0%{transform:translateY(-120%) rotate(-4deg)}60%{transform:translateY(8%) rotate(2deg)}85%{transform:translateY(-3%) rotate(-1deg)}to{transform:translateY(0) rotate(var(--rot, 0deg))}}@keyframes wobble{0%,to{transform:rotate(var(--rot, 0deg)) translateY(0)}50%{transform:rotate(calc(var(--rot, 0deg) - 1deg)) translateY(-2px)}}@keyframes wobble-slow{0%,to{transform:rotate(var(--rot, 0deg)) translateY(0)}50%{transform:rotate(calc(var(--rot, 0deg) + .6deg)) translateY(-1px)}}@keyframes shake-anim{0%{transform:translate(0) rotate(var(--rot, 0deg))}10%{transform:translate(-2px,1px) rotate(calc(var(--rot, 0deg) - 1deg))}20%{transform:translate(2px,-1px) rotate(calc(var(--rot, 0deg) + 1.2deg))}30%{transform:translate(-1px,2px) rotate(calc(var(--rot, 0deg) - .6deg))}40%{transform:translate(1px,-2px) rotate(calc(var(--rot, 0deg) + .8deg))}50%{transform:translate(-2px,1px) rotate(calc(var(--rot, 0deg) - 1.4deg))}60%{transform:translate(2px,1px) rotate(calc(var(--rot, 0deg) + 1deg))}70%{transform:translate(-1px,-1px) rotate(calc(var(--rot, 0deg) - .4deg))}80%{transform:translate(1px,2px) rotate(calc(var(--rot, 0deg) + .6deg))}90%{transform:translate(-2px,-2px) rotate(calc(var(--rot, 0deg) - 1.1deg))}to{transform:translate(0) rotate(var(--rot, 0deg))}}@keyframes tape-flutter{0%,to{transform:translate(-50%) rotate(-3deg) translateY(0)}50%{transform:translate(-50%) rotate(-2.4deg) translateY(-1px)}}.polaroid.eject{animation:eject 1.1s cubic-bezier(.2,.9,.3,1.1) both}.polaroid.wobble{animation:wobble 1.6s ease-in-out infinite}.polaroid.wobble-result{animation:wobble-slow 4s ease-in-out infinite}.polaroid.shake{animation:shake-anim .3s linear infinite}.washi-tape.flutter{animation:tape-flutter 2.4s ease-in-out infinite}
