@font-face{font-family:CameraPixel;src:url('/assets/fonts/VT323-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{--amber:#edb443;--lime:#b4d568;--ink:#efefec;--pixel:CameraPixel,'Courier New',monospace;--image-ratio:3/4;color-scheme:dark}
*{box-sizing:border-box}html{background:#131313}body{margin:0;color:var(--ink);background:#141414;font:17px var(--pixel);-webkit-font-smoothing:antialiased}button,input,select,a{-webkit-tap-highlight-color:transparent}button,input,select{font:inherit}button{color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--amber);outline-offset:4px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.icon{width:25px;height:25px;display:block;flex-shrink:0}
.site-bar{height:70px;border-bottom:1px solid #ffffff12;display:flex;align-items:center;justify-content:space-between;padding:0 6vw;color:#b7b7b5;font:16px var(--pixel)}.site-bar>a:first-child{font:600 21px Arial,sans-serif;letter-spacing:-1px;color:#eee}.site-bar>a>span{font:14px var(--pixel);color:#7e7e7b;letter-spacing:0}.site-bar p{letter-spacing:1px}
.camera-shell{position:relative;width:min(100%,540px);margin:24px auto 0;min-height:840px;padding:24px 7.8% 140px;background:radial-gradient(ellipse at 40% 34%,#29292924,transparent 65%),linear-gradient(135deg,#202020,#191919 22%,#202020 71%,#151515);border-radius:30px;box-shadow:inset 0 0 22px #0008;isolation:isolate;overflow:clip}.camera-shell:before{content:'';z-index:-1;pointer-events:none;position:absolute;inset:0;border-radius:inherit;opacity:.065;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 170 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.camera-header{height:73px;display:flex;align-items:center;justify-content:space-between;padding:0 0 15px}.round-button{height:32px;width:32px;display:grid;place-items:center;flex-shrink:0;border:1px solid #454545;border-radius:50%;background:linear-gradient(145deg,#343434,#252525);box-shadow:0 2px 3px #0009,inset 0 1px 1px #ffffff0f;color:#bbb}.round-button .icon{height:20px;width:20px}.ready-led{width:6px;height:6px;background:#444;border-radius:50%;box-shadow:inset 0 1px 2px #000;position:absolute;top:14px;right:25%}.ready-led.on{background:#3fca6b;box-shadow:0 0 6px #4bd27680}
.camera-screen{padding:6px 6px 0;background:#060606;border:1px solid #4c4b49;border-radius:13px;box-shadow:0 0 0 2px #111,inset 0 0 0 2px #2e2d2b,0 2px 8px #0008;overflow:hidden}.media-stage{position:relative;aspect-ratio:var(--image-ratio);width:100%;height:auto;background:#050505;overflow:hidden;border-radius:5px 5px 0 0}.source-video{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}#photoCanvas{display:block;width:100%;height:100%;object-fit:contain;position:absolute;inset:0;z-index:1}.standby{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;inset:0;background:radial-gradient(ellipse at 50% 64%,#101010,#000 72%);color:#696a64;text-align:center}.standby:before{content:'';position:absolute;inset:0;opacity:.045;background:radial-gradient(#bbb .6px,transparent 1.2px);background-size:3px 3px}.standby>span{font:italic 700 29px Georgia,serif;opacity:.62;text-shadow:2px 1px 2px #aaa6,0 0 12px #ccc3;filter:blur(.4px)}.standby small{font:11px var(--pixel);letter-spacing:2px;margin-top:8px;opacity:.5}
.camera-overlay{position:absolute;inset:0;z-index:3;pointer-events:none}.overlay-top{display:flex;align-items:center;justify-content:space-between;padding:16px 13px;color:#eee;font:17px var(--pixel);text-shadow:0 1px 3px #000}.overlay-top button{pointer-events:auto;font:19px/1 var(--pixel);padding:0 5px;min-height:24px;border-radius:3px;border:1px solid #888;background:#e5e6e6;color:#1a1c1d;box-shadow:0 0 0 1px #101010,inset 0 0 0 2px #afb2b1;text-shadow:none}.battery .icon{width:24px;height:21px}.zoom-label{background:#dddfe2;color:#222;font:14px var(--pixel);height:25px;width:25px;border-radius:50%;display:grid;place-items:center;text-shadow:none}.camera-toolbar{height:62px;display:flex;align-items:center;justify-content:space-around;background:#030303}.camera-toolbar button{min-width:36px;min-height:44px;display:flex;align-items:center;justify-content:center;gap:2px;padding:4px 0}.camera-toolbar button .icon{width:27px;height:27px}.camera-toolbar button small{font:13px var(--pixel)}.camera-toolbar .menu-key{font:19px var(--pixel);border:1.5px solid #ddd;box-shadow:inset 0 0 0 1px #666;min-height:25px;padding:0 4px;min-width:35px;line-height:1}.camera-toolbar [aria-pressed=true]{color:var(--amber)}
.focus-frame{position:absolute;inset:14% 12% 13%;border:1px solid var(--amber);border-radius:4px;box-shadow:0 0 0 100px #0002}.focus-frame i{position:absolute;width:0;height:0;border:4px solid transparent}.focus-frame i:nth-child(1){top:-13px;left:50%;border-bottom-color:var(--amber)}.focus-frame i:nth-child(2){right:-13px;top:50%;border-left-color:var(--amber)}.focus-frame i:nth-child(3){bottom:-13px;left:50%;border-top-color:var(--amber)}.focus-frame i:nth-child(4){left:-13px;top:50%;border-right-color:var(--amber)}.focus-frame>span{position:absolute;bottom:-31px;left:0;width:100%;text-align:center;color:var(--amber)}
.hardware-controls{height:155px;display:grid;grid-template-columns:1fr 110px 1fr;align-items:center;justify-items:center;gap:18px}.model-button{align-self:center;width:73px;padding:0;display:flex;flex-direction:column;align-items:center;gap:8px}.model-button img{width:60px;height:44px;object-fit:contain;mix-blend-mode:lighten}.model-button>span{color:#b1b1ad;font:14px var(--pixel)}.shutter{position:relative;width:100px;height:100px;padding:7px;border:2px solid #151515;border-radius:50%;background:linear-gradient(130deg,#505052,#111 50%,#434345);box-shadow:0 0 0 3px #222,0 0 0 5px #37373766,0 5px 9px #000b,inset 0 1px 3px #9996}.shutter>span{display:block;width:100%;height:100%;border:1px solid #aaa8a3;border-radius:50%;background:repeating-conic-gradient(from 7deg,rgba(255,255,255,.035) 0deg,rgba(0,0,0,.04) 2deg,rgba(255,255,255,.02) 3deg),conic-gradient(from 15deg,#a19f9c,#e2e0d9 45deg,#777573 85deg,#aba9a7 115deg,#efede4 170deg,#777572 220deg,#c6c3be 270deg,#a19f9c);box-shadow:inset 0 0 5px #0008,0 2px 6px #000c}.shutter:active{transform:scale(.96)}.gallery-button{width:70px;height:73px;display:grid;place-items:center;border-radius:12px;border:2px solid #333;background:linear-gradient(140deg,#242425,#0f0f10);box-shadow:0 2px 5px #000b,inset 0 0 0 3px #1a1a1c;color:#909090}.gallery-button .icon{width:27px;height:27px}
.camera-drawer{padding:0 16px 12px;background:linear-gradient(#343232,#272626 55%,#1b1b1b);border-radius:22px 22px 0 0;position:absolute;left:0;right:0;bottom:0;box-shadow:0 -1px 0 #ffffff08,0 -5px 15px #0004}.drawer-handle{width:100%;height:16px;display:grid;place-items:center;cursor:pointer}.drawer-handle>span{width:45px;height:4px;border-top:1px solid #777;border-bottom:1px solid #616161;position:relative}.drawer-handle>span:after{content:'';position:absolute;left:0;right:0;top:4px;border-bottom:1px solid #555}.drawer-title{display:flex;align-items:center;gap:12px;height:40px}.mode-pill{background:linear-gradient(#818a7a,#657060);box-shadow:inset 0 1px 3px #242923;border:1px solid #363934;border-radius:18px;color:#171b15;padding:1px 14px;font:16px var(--pixel)}.mode-classic{display:flex;align-items:center;gap:5px;border:1px solid #282828;background:#272727;box-shadow:inset 0 1px 2px #161616;border-radius:18px;font:17px var(--pixel);padding:2px 12px 2px 4px;color:var(--lime)}.mode-classic .icon{width:22px;height:22px;border:2px solid #aaa;border-radius:50%;padding:2px;color:#e2e2df;background:#555}.drawer-actions{margin-left:auto;display:flex;gap:12px}
.camera-categories{display:flex;overflow:auto;white-space:nowrap;gap:24px;padding:10px 4px 8px;scrollbar-width:none}.camera-categories button{font:17px var(--pixel);color:#9a9a98;padding:4px 0;min-height:32px}.camera-categories .active{color:var(--amber)}.camera-carousel{display:flex;gap:14px;overflow-x:auto;padding:12px 0 10px;scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity}.camera-carousel::-webkit-scrollbar,.camera-categories::-webkit-scrollbar{display:none}.camera-choice{flex:0 0 73px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;min-height:82px;padding:0 2px 3px;scroll-snap-align:center}.camera-asset{width:67px;height:54px;object-fit:contain;border-radius:3px;mix-blend-mode:lighten}.camera-choice>span{font:15px var(--pixel);white-space:nowrap;color:#ccc}.camera-choice.active>span{color:var(--amber)}.camera-choice em{font-style:normal;border:1px solid #c5a543;font-size:12px;padding:0 2px;line-height:1}.effect-heading{display:flex;align-items:center;gap:17px;margin:3px 0 10px}.effect-heading>span{border-radius:14px;background:linear-gradient(#7b8676,#69745f);box-shadow:inset 0 1px 2px #202a22;color:#1c2119;padding:0 15px;font:16px var(--pixel)}.effect-heading i{height:1px;flex:1;background:#4b4947;box-shadow:0 1px #191919}.effect-heading button{color:#999071;font:22px var(--pixel);min-width:26px;min-height:30px;padding:0}.effect-heading button[aria-pressed=true]{color:var(--amber)}.effect-carousel{display:flex;gap:17px;justify-content:space-between;overflow-x:auto;scrollbar-width:none;padding:0 2px 8px}.effect-choice{flex:0 0 51px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;min-height:70px}.effect-choice img{width:43px;height:43px;object-fit:cover;border-radius:50%}.effect-choice span{font:14px var(--pixel);white-space:nowrap}.effect-choice.active span{color:var(--amber)}
.mini-camera{display:block;position:relative;width:55px;height:38px;border-radius:5px;border:1px solid #777;background:linear-gradient(135deg,#aaa69a,#454743 52%,#9a998e);box-shadow:0 4px 5px #0009,inset 0 1px 1px #fff8;margin:8px 0}.mini-camera:before{content:'';position:absolute;left:4px;top:3px;width:10px;height:4px;border:1px solid #979797;background:#dad8cd}.mini-camera b{position:absolute;width:22px;height:22px;left:21px;top:9px;border-radius:50%;background:radial-gradient(circle,#122533 0 15%,#03060a 22% 35%,#444 36% 49%,#888 52% 55%,#111 57%);box-shadow:0 0 0 2px #aaa6,0 2px 3px #0008}.cam-polaroid{height:46px;width:46px;border-radius:2px;background:linear-gradient(#a9794e 0 25%,#e2dfd3 26% 45%,#242625 46% 80%,#e2dfd3 81%)}.cam-polaroid b{left:13px;top:21px;width:19px;height:19px}.cam-2014{height:49px;width:30px;background:linear-gradient(110deg,#9a9285,#dfd5bc)}.cam-2014 b{border-radius:1px;width:22px;height:30px;top:4px;left:3px;background:linear-gradient(155deg,#44678c,#a2d2f1);box-shadow:none}.cam-computer{background:#c2bca1;border-radius:0;width:45px;height:42px}.cam-computer b{width:31px;height:24px;top:3px;left:5px;border-radius:0;background:linear-gradient(135deg,#12248b,#5687da)}.cam-bluefilm{background:linear-gradient(115deg,#333,#19a3c0 44% 57%,#20262a 58%)}.cam-action{background:linear-gradient(115deg,#777,#161616);border-radius:8px}.cam-action b{left:28px}.cam-bigshot{height:48px;width:37px;border-radius:1px;background:linear-gradient(#dedccc,#aaa89b 65%,#353331)}.cam-bigshot b{left:9px;top:10px}.cam-booth{width:33px;height:49px;background:linear-gradient(120deg,#b67736,#80491c);border:2px solid #b99b6d}.cam-booth b{left:6px;top:24px;width:20px;height:20px}.cam-booth:after{content:'';position:absolute;left:8px;top:4px;border:3px solid #b99b6d;border-radius:50%;background:#202221;width:12px;height:12px}.cam-dispo{background:linear-gradient(95deg,#26252a 20%,#ab86a9 35%,#72b3a9 58%,#212226 72%)}.cam-inst{background:linear-gradient(#c9c6b6 20%,#994b48 21% 90%,#b9b8b1 91%)}.cam-original,.cam-cx{background:linear-gradient(130deg,#dfddd5,#777b7c 55%,#b9bbbb)}.cam-grf,.cam-f100{background:linear-gradient(#a5a4a0 18%,#332e2b 19%)}.cam-u400,.cam-sipic{background:linear-gradient(135deg,#e4e0be,#9d9d86)}.cam-u7040{background:linear-gradient(135deg,#d3dfe2,#94b1c0 45%,#b2d0e3)}.cam-ixus{background:linear-gradient(145deg,#f0eeeb,#8c8b83)}.cam-zr{background:linear-gradient(115deg,#cab038,#ffe679,#b19b20)}
.panel-heading{display:flex;align-items:center;justify-content:space-between;min-height:48px;border-bottom:1px solid #ffffff0e}.panel-heading>span{font-size:22px}.panel-heading button{padding:8px}.adjust-panel{padding:20px 2px 16px;min-height:208px}.adjust-panel>label{font:21px var(--pixel)}.adjust-panel output{margin-left:7px;color:var(--amber)}.ruler{position:relative;margin-top:10px;height:49px;border-radius:9px;border:1px solid #666;background:linear-gradient(#ffffff0b,transparent),repeating-linear-gradient(90deg,#ccc 0 2px,transparent 2px 10px) center calc(100% - 9px)/calc(100% - 38px) 7px no-repeat;box-shadow:inset 0 1px 3px #0005}.ruler input{position:absolute;inset:0;width:100%;height:100%;margin:0;appearance:none;-webkit-appearance:none;background:transparent;padding:0 16px;cursor:ew-resize}.ruler input::-webkit-slider-runnable-track{height:32px;background:none}.ruler input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:11px;height:12px;background:#eee;border:1px solid #aaa;clip-path:polygon(0 0,100% 0,100% 65%,50% 100%,0 65%);margin-top:0}.ruler input::-moz-range-track{height:32px;background:none}.ruler input::-moz-range-thumb{width:11px;height:12px;border-radius:0;background:#eee;border:0}.range-ends{display:flex;justify-content:space-between;margin-top:7px;font:14px var(--pixel);color:#b4b4ae}.panel-note{color:#8e8e87;font:15px/1.3 var(--pixel);max-width:320px;margin-top:18px}.date-panel{display:grid;gap:12px}.date-panel>label,.field-row,.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:31px;font:18px var(--pixel)!important}.date-panel input[type=date],.adjust-panel select,.clip-actions select{min-width:130px;max-width:65%;border:1px solid #595956;border-radius:5px;background:#282828;color:#e2e2d9;padding:6px 9px;font:16px var(--pixel)}.date-panel input[type=date]{font:15px Arial,sans-serif;width:160px;min-height:35px}.field-pair{display:flex;gap:16px}.field-pair label{display:flex;flex-direction:column;gap:6px;flex:1;font:17px var(--pixel)}.field-pair select{min-width:0;max-width:100%;width:100%}input[role=switch]{appearance:none;-webkit-appearance:none;width:40px;height:23px;background:#424242;border:1px solid #666;border-radius:20px;position:relative;margin:0;cursor:pointer}input[role=switch]:after{content:'';position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:50%;background:#b9b9b1;transition:transform .15s}input[role=switch]:checked{background:#a0782d;border-color:#b99249}input[role=switch]:checked:after{transform:translateX(16px);background:#f7dfb1}.field-row+.field-row,.field-row+.toggle-row{margin-top:17px}.text-button{border-bottom:1px solid #777;color:#bdbdb4;padding:4px 0;margin-top:15px;font-size:17px}
.editor-tools{display:flex;align-items:center;justify-content:space-between;padding:12px 0 8px;border-top:1px solid #4443}.editor-tools button{display:flex;align-items:center;flex-direction:column;gap:6px;color:#92938f;padding:3px;min-width:35px;min-height:42px}.editor-tools button .icon{width:23px;height:23px}.editor-tools button span{font:12px var(--pixel)}.editor-tools button.active{color:var(--amber)}.file-actions{display:flex;align-items:center;gap:12px;padding:13px 0 8px}.file-actions button{flex:1;min-height:39px;padding:7px 8px;font:17px var(--pixel);border-radius:5px;border:1px solid #4c4c45;display:flex;align-items:center;justify-content:center;gap:5px;color:#c8c8c0}.file-actions .icon{width:16px;height:16px}#savePhotoBtn{color:#eac477;border-color:#98753c;background:#54452a55}.status-line{margin:7px 0 0;min-height:26px;color:#91918c;font:14px/1.3 var(--pixel)}.clip-actions{padding:8px 0;border-top:1px solid #444}.clip-actions label{display:flex;align-items:center;justify-content:space-between}.clip-actions>button{border:1px solid #78613b;display:flex;align-items:center;justify-content:center;gap:8px;color:#eac477;border-radius:6px;width:100%;margin-top:12px;min-height:40px}.clip-actions>button svg{width:18px;height:18px}.clip-actions p{font:14px/1.3 var(--pixel);color:#aaa}.export-result{padding:12px 0;display:flex;gap:12px;font:15px var(--pixel)}.export-result a,.export-result button{padding:6px 8px;border:1px solid #626656;color:#d8dfc3;border-radius:4px}
.edit-header{height:65px;align-items:center;display:flex;gap:17px;padding:8px 15px;background:#252424;position:relative;z-index:6}.edit-header>button{padding:6px}.edit-header>button:first-child{margin-right:auto}.edit-header .date-pill{background:#434343;border-radius:4px;padding:4px 14px;line-height:1;font:20px var(--pixel);margin-right:auto}.edit-header .date-pill.active{color:var(--amber)}.edit-header .icon{height:21px;width:21px}.editing{background:#252424}.editing .camera-shell{background:#252424;padding:0;box-shadow:none;border-radius:0;min-height:0;margin-top:0;overflow:visible}.editing .camera-shell:before,.editing .camera-header,.editing .camera-toolbar,.editing .hardware-controls,.editing .camera-overlay{display:none}.editing .camera-screen{border:0;box-shadow:none;padding:0;border-radius:0}.editing .media-stage{border-radius:0}.editing .camera-drawer{position:relative;bottom:auto;border-radius:0;box-shadow:none;padding-top:7px;background:linear-gradient(#2a2828,#171717)}.editing .drawer-handle,.editing .drawer-title{display:none}.editing .presets-panel .camera-categories{padding-top:7px}.editing .camera-carousel{padding:15px 0 12px}.timeline{display:flex;align-items:center;gap:10px;padding:0 12px;height:39px;background:#272626}.timeline>button{width:30px;min-height:36px;display:grid;place-items:center;font:20px var(--pixel)}.timeline .icon{width:20px;height:20px}.timeline input{flex:1;width:50px;min-width:50px;accent-color:#c5c7bf;height:3px}.timeline>span{font:15px var(--pixel)}.timeline [aria-pressed=true]{color:var(--amber)}.compare-overlay{position:absolute;right:10px;top:10px;z-index:4;display:flex;align-items:center;gap:5px;min-height:32px;padding:5px 8px;border-radius:4px;border:1px solid #ffffff40;background:#161616aa;backdrop-filter:blur(3px);font:15px var(--pixel);user-select:none;-webkit-user-select:none}.compare-overlay .icon{width:18px;height:18px}.preview-label{position:absolute;z-index:4;top:13px;left:12px;padding:4px 10px;background:#151515bd;border-radius:4px;font:17px var(--pixel);color:#fff}.countdown{position:absolute;inset:0;z-index:6;display:grid;place-items:center;background:#0003;font:72px var(--pixel)}
.flatzip:not(.editing .flatzip) .camera-screen{border-width:7px;border-radius:18px;border-color:#333;box-shadow:0 0 0 2px #161616,inset 0 1px 2px #8885}.flatzip .overlay-top{height:38px;border-radius:5px 5px 0 0;padding:6px 12px;background:linear-gradient(#7ebbeb,#579ce0 52%,#2d78bf);text-shadow:1px 1px #173454}.flatzip .camera-toolbar{background:linear-gradient(#77b8f2,#387bc3 53%,#205e9d);height:48px}.flatzip .camera-toolbar .icon{width:24px;height:24px}.flatzip .standby{background:linear-gradient(#0b1220,#0b0e12)}.editing .flatzip .camera-screen{border:0!important;box-shadow:none!important;border-radius:0!important}
.editor-footer{padding:22px 16px 38px;text-align:center;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;color:#77776f;font:14px var(--pixel);max-width:680px;margin:auto}.editor-footer>span{flex-basis:100%;order:2}.editor-footer nav{display:flex;gap:14px}.editor-footer small{font:13px var(--pixel)}.toast{position:fixed;z-index:30;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%,10px);background:#292929f5;border:1px solid #666;border-radius:7px;padding:12px 17px;max-width:calc(100% - 32px);width:max-content;font:17px/1.2 var(--pixel);opacity:0;transition:opacity .15s,transform .15s;pointer-events:none;box-shadow:0 5px 15px #0005}.toast.visible{opacity:1;transform:translate(-50%,0)}dialog{color:#e6e6e0;background:#282727;border:1px solid #686359;border-radius:14px;max-width:360px;width:calc(100% - 30px);padding:25px}dialog::backdrop{background:#000b}dialog h2{font:32px var(--pixel);margin:5px 0 12px}dialog p{font:16px/1.4 Arial,sans-serif;color:#ccc}dialog a{color:var(--amber);font:20px var(--pixel)}.dialog-close{position:absolute;right:8px;top:8px;padding:6px}.dialog-close .icon{width:19px;height:19px}
@media(min-width:561px){.camera-shell{padding:24px 40px 100px}.drawer-open:not(.editing .drawer-open){padding-bottom:555px}.drawer-open .camera-drawer{bottom:0}.editing .camera-shell{max-width:480px}.site-bar{display:flex}.editing .editor-footer{max-width:480px}}
@media(max-width:560px){.site-bar{display:none}.camera-shell{margin:0;width:100%;border-radius:0;padding:16px 8% 89px;min-height:100svh}.camera-header{height:82px;padding:16px 0 22px}.camera-screen{padding:6px 6px 0}.media-stage{min-height:0}.hardware-controls{height:150px;grid-template-columns:1fr 104px 1fr;gap:14px}.shutter{width:94px;height:94px}.gallery-button{width:67px;height:70px}.camera-drawer{padding:0 17px max(10px,env(safe-area-inset-bottom));}.drawer-open .camera-drawer{position:fixed;z-index:10;bottom:0;left:0;right:0;max-height:70svh;overflow:auto;overscroll-behavior-y:contain}.drawer-open .camera-categories{display:none}.drawer-open .camera-carousel{padding-top:13px}.drawer-open .file-actions{padding-top:7px}.drawer-open .status-line{font-size:13px}.drawer-open .editor-tools{padding-top:8px}.editing .camera-shell{padding:0}.editing .camera-drawer{position:relative;max-height:none;overflow:visible}.editing .camera-categories{display:flex}.editing .camera-screen{padding:0}.editing .camera-carousel{gap:18px;padding-top:15px;padding-bottom:12px}.editing .edit-header{height:66px;padding-top:max(8px,env(safe-area-inset-top))}.editing .effect-carousel{gap:17px}.editor-footer{font-size:13px;padding:12px 16px 28px}.editor-footer>span{font-size:12px}.editing .editor-footer{background:#171717}.camera-choice{flex-basis:74px}.camera-asset{height:56px;width:68px}.camera-drawer[data-panel=intensity] .adjust-panel{min-height:192px;padding-top:28px}.effect-choice img{width:45px;height:45px}.effect-carousel{gap:18px}.compare-overlay{top:9px;right:8px;font-size:14px}.editing .preview-label{font-size:16px}}
@media(max-width:350px){.camera-shell{padding-inline:6%}.hardware-controls{grid-template-columns:1fr 92px 1fr;gap:8px}.shutter{width:86px;height:86px}.gallery-button{width:58px;height:62px}.camera-drawer{padding-inline:12px}.drawer-title{gap:8px}.drawer-actions{gap:8px}.file-actions{gap:6px}.file-actions button{font-size:15px}.field-pair{gap:9px}.editor-tools button span{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

@media(max-width:560px){body:not(.editing) .camera-drawer{position:fixed;z-index:10;bottom:0}body:not(.editing) .editor-footer{padding-bottom:105px}}

/* The imported-image workspace keeps the complete photo visible while controls change. */
.editing .camera-shell{display:flex;flex-direction:column;height:100svh;min-height:600px}
.editing .edit-header{flex-shrink:0;height:54px}
.editing .camera-screen{flex:1;min-height:160px;display:flex;align-items:center;justify-content:center;background:#101010}
.editing .media-stage{height:100%;width:100%;aspect-ratio:auto;background:#101010}
.editing .camera-drawer,.editing .timeline{flex-shrink:0}
.editing .file-actions{display:none}
.editing .status-line{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.editing .camera-categories{padding:0 0 3px;gap:24px}
.editing .camera-categories button{min-height:26px;padding:0;font-size:16px}
.editing .camera-carousel{padding:9px 0 8px}
.editing .camera-choice{min-height:76px;gap:6px}
.editing .editor-tools{padding:9px 0 3px}
.editing .editor-tools button{min-width:32px;min-height:38px;gap:3px}
.editing .editor-tools .icon{width:21px;height:21px}
.editing .editor-tools button span{font-size:12px}
.editing .panel-heading{min-height:38px}
.editing .panel-heading .icon{width:21px;height:21px}
.editing .adjust-panel{min-height:130px;padding:12px 2px 8px}
.editing .camera-drawer[data-panel=intensity] .adjust-panel{min-height:139px;padding-top:12px}
.editing .panel-note{font-size:13px;margin:6px 0 0}
.editing .date-panel{gap:6px}
.editing .date-panel>label{min-height:27px}
.editing .date-panel input[type=date],.editing .date-panel select{padding:4px 7px;min-height:28px}
.editing .date-panel .field-pair label{flex-direction:row;align-items:center;gap:6px;font-size:15px}
.editing .date-panel .field-pair select{font-size:15px;max-width:70%}
.editing .clip-actions{display:grid;grid-template-columns:1fr 1.2fr;gap:5px 12px;padding:7px 0 0}
.editing .clip-actions label{font-size:14px;gap:7px}
.editing .clip-actions select{min-width:0;max-width:95px;font-size:14px;padding:4px}
.editing .clip-actions>button{margin:0;min-height:30px;font-size:14px}
.editing .clip-actions p{grid-column:1/-1;margin:0;font-size:12px}
.editing .effects-panel{padding:12px 0}
.editing .effects-panel .effect-heading{display:none}
.editing .effects-panel .effect-carousel{padding:12px 0}
.editing .export-result{padding:5px 0 0;font-size:14px}
@media(max-width:560px){.editing .camera-shell{min-height:620px}.editing .editor-footer{display:none}.editing .camera-drawer{padding-bottom:max(8px,env(safe-area-inset-bottom))}}

/* Reference pass: geometry follows the classic camera, controls never cover the shutter. */
body:not(.editing) .camera-shell{background:linear-gradient(90deg,#151515,#1a1a1a 4%,#171717 50%,#191919 96%,#111);padding-bottom:0;overflow:hidden}
body:not(.editing) .camera-shell:before{opacity:.045}
body:not(.editing) .camera-header{height:104px;padding:26px 0 15px}
body:not(.editing) .round-button{width:30px;height:30px;border-color:#3c3c3b;background:linear-gradient(145deg,#343434,#222);box-shadow:0 2px 3px #0009,inset 0 1px #ffffff08}
body:not(.editing) .camera-screen{border-radius:11px;padding:6px 6px 0;border-color:#444;box-shadow:0 0 0 2px #242424,inset 0 0 0 2px #101010,0 2px 3px #0009}
body:not(.editing) .standby{background:radial-gradient(ellipse at 50% 68%,#0e0e0e,#000 76%)}
body:not(.editing) .standby:before{opacity:.025;background-size:2.5px 2.5px}
.standby>span{font:italic 700 29px Georgia,serif;letter-spacing:-1.5px;color:#61615e;opacity:.48;text-shadow:3px 3px 1px #74746b55,-2px 0 2px #7777;filter:blur(.65px);transform:translateY(18px)}
.standby small{display:none}
.camera-toolbar{height:58px}
.camera-toolbar button .icon{width:26px;height:26px}
.camera-toolbar #timerBtn{position:relative;padding-right:9px}
.camera-toolbar #timerBtn small{position:absolute;bottom:7px;right:-1px;background:#030303;line-height:12px}
.camera-toolbar .menu-key{font-size:19px;min-width:33px;min-height:23px;padding:0 2px}
.hardware-controls{height:155px;grid-template-columns:1fr 110px 1fr;gap:22px}
.shutter{width:94px;height:94px;padding:6px;background:linear-gradient(130deg,#414141,#070707 55%,#333);border:2px solid #111;box-shadow:0 0 0 3px #272727,0 0 0 7px #202020,0 6px 9px #000b,inset 0 1px 2px #aaa4}
.shutter>span{position:relative;overflow:hidden;background:repeating-linear-gradient(124deg,transparent 0 1px,#ffffff0a 1px 2px,#00000008 2px 3px),conic-gradient(from 22deg,#76747c,#b8b6be 38deg,#605e67 91deg,#aba8b0 138deg,#d9d6d3 174deg,#77747c 217deg,#5a5964 262deg,#d3d0cd 309deg,#76747c);border:1px solid #99979e;box-shadow:inset 0 0 4px #111,0 1px 3px #000}
.shutter>span:after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(128deg,transparent 34%,#ffffff35 45%,#ffffff65 49%,transparent 59%);opacity:.65}
.model-button{position:relative;gap:4px}.model-button:after{content:'';position:absolute;right:3px;top:-7px;width:4px;height:4px;border-radius:50%;background:#9bd24c;box-shadow:0 0 4px #b3fa68}
.model-button>span{font-size:12px;color:#8e8e88}
.gallery-button{width:70px;height:74px;border-radius:13px;padding:4px;overflow:hidden;box-shadow:0 0 0 2px #161616,inset 0 0 0 2px #4445,0 2px 5px #000b}
.gallery-button canvas{width:100%;height:100%;object-fit:cover;border-radius:7px}
.camera-peek{display:flex;gap:22px;overflow:auto;padding:10px 2px 9px;scrollbar-width:none}.camera-peek .camera-choice{flex-basis:66px;min-height:65px;gap:5px}.camera-peek .camera-asset{width:59px;height:43px}.camera-peek .camera-choice>span{font-size:13px}
.drawer-open .camera-peek,.editing .camera-peek{display:none}
body:not(.editing) .camera-drawer{position:relative;left:auto;right:auto;bottom:auto;margin:0 -9.3%;padding:0 17px max(10px,env(safe-area-inset-bottom));border-radius:21px 21px 0 0;background:linear-gradient(#363333,#292727 52%,#171717)}
body:not(.editing) .drawer-open .camera-drawer{position:fixed;margin:0;left:0;right:0;bottom:0;z-index:10;max-height:70svh;overflow:auto}
body:not(.editing) .drawer-title{height:34px;gap:12px}.drawer-title .mode-pill{font-size:15px;padding:0 13px}.drawer-title .mode-classic{font-size:16px;padding:1px 11px 1px 3px}
body:not(.editing) .editor-footer{padding-bottom:24px}
@media(min-width:561px){body:not(.editing) .camera-drawer{margin:0 -40px}body:not(.editing) .drawer-open .camera-drawer{left:50%;right:auto;width:540px;transform:translateX(-50%)}body:not(.editing) .drawer-open{padding-bottom:0}}
@media(max-width:560px){body:not(.editing) .camera-shell{padding-top:0;padding-inline:8.5%}.hardware-controls{height:155px}body:not(.editing) .camera-drawer{margin-inline:-10.25%}}
@media(max-width:560px) and (max-height:760px){body:not(.editing) .camera-header{height:78px;padding-top:12px}.hardware-controls{height:132px}.camera-toolbar{height:51px}}

.camera-shell:not(.has-media) .camera-overlay{visibility:hidden}

/* v12 — smoother live camera preview and slightly wider mobile viewfinder */
#photoCanvas{contain:strict;transform:translateZ(0);backface-visibility:hidden;will-change:filter}
.media-stage{contain:layout paint;isolation:isolate}
.camera-screen,.camera-drawer{-webkit-transform:translateZ(0)}
@media(max-width:560px){
  body:not(.editing) .camera-shell{padding-left:7.2%;padding-right:7.2%}
  body:not(.editing) .camera-screen,body:not(.editing) .media-stage{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* v16 expanded camera library */
.cam-generic{width:58px;height:38px;border-radius:5px}.skin-pink{background:linear-gradient(135deg,#f4b6c7,#c65777 55%,#7f3449)}.skin-silver{background:linear-gradient(135deg,#f2f1ed,#9b9b98 58%,#d7d5cf)}.skin-brown{background:linear-gradient(135deg,#b56e45,#5c3527 58%,#252321)}.skin-black{background:linear-gradient(135deg,#555,#151515 58%,#777)}.skin-blue{background:linear-gradient(135deg,#a9dff1,#258eb8 58%,#17607e)}.skin-red{background:linear-gradient(135deg,#e9564d,#a61f23 58%,#5c1518)}.skin-orange{background:linear-gradient(135deg,#f6a14b,#d85e25 58%,#8b351c)}.skin-gold{background:linear-gradient(135deg,#e5d3a2,#b79a62 58%,#80683e)}.skin-green{background:linear-gradient(135deg,#b8df82,#73a849 58%,#496c31)}.skin-mint{background:linear-gradient(135deg,#b9eee1,#69c5b5 58%,#397f77)}
.camera-carousel{padding-bottom:14px}.camera-choice{flex-basis:76px}.drawer-open .camera-carousel{scroll-snap-type:x mandatory}


/* v17 — APP MATCH: visual geometry rebuilt against the supplied ProCCD mobile references */
body:not(.editing){background:#111}
body:not(.editing) .camera-shell{width:min(100%,680px);margin:0 auto;min-height:100svh;padding:18px 8.5% 0;background:linear-gradient(90deg,#b9b9b7 0,#e0dfdc 8%,#c5c4c1 48%,#e1e0dc 91%,#aaa9a7 100%);border-radius:0;box-shadow:inset 12px 0 25px #fff5,inset -12px 0 25px #0002;overflow:visible}
body:not(.editing) .camera-shell:before{opacity:.13;mix-blend-mode:multiply}
body:not(.editing) .camera-header{height:126px;padding:28px 0 18px;position:relative}
body:not(.editing) .camera-header:after{content:'PROCCD';position:absolute;left:50%;top:48px;transform:translateX(-50%);font:700 25px Arial,sans-serif;letter-spacing:1px;color:#303030;text-shadow:0 1px #fff8}
body:not(.editing) .round-button{width:54px;height:54px;border:4px solid #303030;background:radial-gradient(circle,#3b3b3b 0 48%,#171717 50% 100%);box-shadow:0 0 0 2px #777,0 3px 5px #0006;color:#ddd}
body:not(.editing) .round-button .icon{width:25px;height:25px}
body:not(.editing) .ready-led{top:12px;right:50%;transform:translateX(50%);width:8px;height:8px;background:#43c86b}
body:not(.editing) .camera-screen{padding:14px 14px 0;border-radius:26px;border:4px solid #292929;background:#242424;box-shadow:0 0 0 4px #737373,inset 0 0 0 3px #0d0d0d,0 3px 7px #0005}
body:not(.editing) .media-stage{border-radius:14px 14px 0 0;background:#181818}
body:not(.editing) .camera-toolbar{height:82px;background:linear-gradient(#252525,#191919);border-radius:0 0 13px 13px}
body:not(.editing) .camera-toolbar button .icon{width:34px;height:34px}
body:not(.editing) .camera-toolbar .menu-key{font-size:22px;min-width:46px;min-height:30px}
body:not(.editing) .hardware-controls{height:160px;grid-template-columns:1fr 108px 1fr;border-bottom:1px solid #3334}
body:not(.editing) .shutter{width:96px;height:96px}
body:not(.editing) .model-button,body:not(.editing) .gallery-button{filter:brightness(.75)}
body:not(.editing) .camera-drawer{margin:0 -10.2%;padding:0 20px max(14px,env(safe-area-inset-bottom));border-radius:28px 28px 0 0;background:linear-gradient(#393636,#2c2929 45%,#171717 100%);box-shadow:0 -2px 10px #0005;position:relative!important;max-height:none!important;overflow:visible!important}
body:not(.editing) .drawer-handle{height:28px}
body:not(.editing) .drawer-handle>span{width:58px;height:6px}
body:not(.editing) .drawer-title{height:52px}
body:not(.editing) .mode-pill{font-size:19px;padding:2px 18px}
body:not(.editing) .mode-classic{font-size:20px;padding:3px 14px 3px 5px}
body:not(.editing) .drawer-actions .round-button{width:43px;height:43px;border-width:2px}
body:not(.editing) .camera-peek{display:none!important}
body:not(.editing) #drawerBody{display:block!important}
body:not(.editing) .camera-categories{gap:31px;padding:8px 5px 6px}
body:not(.editing) .camera-categories button{font-size:19px}
body:not(.editing) .camera-carousel{gap:22px;padding:15px 2px 17px;scroll-snap-type:x mandatory}
body:not(.editing) .camera-choice{flex:0 0 92px;min-height:105px;gap:8px}
body:not(.editing) .camera-choice .camera-asset{width:88px;height:66px}
body:not(.editing) .camera-choice .mini-camera{transform:scale(1.2);transform-origin:center bottom;margin-bottom:5px}
body:not(.editing) .camera-choice>span{font-size:18px}
body:not(.editing) .effect-heading{margin:2px 0 13px}
body:not(.editing) .effect-heading>span{font-size:19px;padding:1px 18px}
body:not(.editing) .effect-carousel{justify-content:flex-start;gap:34px;padding:0 5px 15px}
body:not(.editing) .effect-choice{flex-basis:68px;min-height:91px;gap:10px}
body:not(.editing) .effect-choice img{width:60px;height:60px}
body:not(.editing) .effect-choice span{font-size:17px}
body:not(.editing) .editor-tools{border-top:1px solid #4a4747;padding-top:12px}
body:not(.editing) .file-actions{padding-top:10px}
@media(min-width:900px){body:not(.editing) .camera-shell{margin:18px auto;border-radius:34px;min-height:auto}.site-bar{display:flex}}
@media(max-width:560px){body:not(.editing) .camera-shell{padding:0 7.5% 0}body:not(.editing) .camera-header{height:105px;padding-top:20px}body:not(.editing) .camera-header:after{top:42px;font-size:21px}body:not(.editing) .round-button{width:45px;height:45px}body:not(.editing) .camera-screen{padding:10px 10px 0;border-radius:21px}body:not(.editing) .camera-toolbar{height:67px}body:not(.editing) .hardware-controls{height:138px}body:not(.editing) .camera-drawer{margin-inline:-8.8%;padding-inline:14px}body:not(.editing) .camera-choice{flex-basis:82px}body:not(.editing) .camera-choice .camera-asset{width:78px;height:58px}body:not(.editing) .camera-choice>span{font-size:16px}}

/* v18 — dedicated model-specific camera art */
.camera-choice .camera-render{
  display:block;width:78px;height:58px;object-fit:contain;margin:0 auto 3px;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.42));
  transform:translateZ(0);transition:transform .14s ease,filter .14s ease;
}
.camera-choice.active .camera-render{
  transform:translateY(-2px) scale(1.06);
  filter:drop-shadow(0 6px 7px rgba(0,0,0,.5)) drop-shadow(0 0 5px rgba(217,184,94,.18));
}
.camera-choice:hover .camera-render{transform:translateY(-2px) scale(1.04)}
#smallPreview .camera-render{width:58px;height:43px;object-fit:contain;filter:drop-shadow(0 3px 3px #0007)}
@media(max-width:560px){
 .camera-choice .camera-render{width:72px;height:54px}
}

/* v21 professional fine-tuning */
.pro-adjustments{padding-bottom:18px}.fine-tune-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}.fine-tune-grid label{display:grid;grid-template-columns:1fr auto;gap:7px 8px;align-items:center;padding:11px 12px;border:1px solid #ffffff17;border-radius:12px;background:#101010;color:#ddd;font-size:14px}.fine-tune-grid output{font:18px CameraPixel,monospace;color:#f1bd53;min-width:30px;text-align:right}.fine-tune-grid input[type=range]{grid-column:1/-1;width:100%;accent-color:#f1bd53}body.shutter-fired:after{content:"";position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:9999;animation:proccdFlash .15s ease-out}@keyframes proccdFlash{0%{opacity:.72}35%{opacity:.18}100%{opacity:0}}@media(max-width:560px){.fine-tune-grid{grid-template-columns:1fr}.fine-tune-grid label{padding:9px 10px}}
