:root{color-scheme:light;--paper:#f4efe6;--paper-deep:#ebe3d7;--ink:#302a24;--muted:#8d8377;--line:#ded5c9;--accent:#bd6847;--accent-deep:#a95739;--olive:#687052;--card:#faf7f1;--mono:'Cascadia Mono','Consolas',monospace;--sans:'Segoe UI',Arial,sans-serif;--serif:Georgia,'Times New Roman',serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;background:radial-gradient(ellipse at 8% 8%,rgba(255,255,255,.62),transparent 34%),var(--paper);color:var(--ink);font-family:var(--sans);min-height:100vh}
button,a,input{font:inherit}
button{color:inherit}
.page-shell{max-width:1440px;margin:0 auto;padding:0 5.1vw 26px}
.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(131,112,91,.18)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand-mark{width:42px;height:38px;border:1px solid rgba(84,72,57,.22);border-radius:12px;display:grid;place-items:center;color:var(--accent);background:rgba(255,255,255,.4)}.brand-mark svg{width:29px}
.brand-copy{display:grid;gap:2px}.brand-copy strong{font-family:var(--serif);font-size:17px;letter-spacing:-.3px}.brand-copy small{font-family:var(--mono);font-size:9px;letter-spacing:1.2px;color:var(--muted);text-transform:uppercase}
.privacy-note{font-family:var(--mono);font-size:10px;letter-spacing:.3px;color:#756d63;display:flex;align-items:center;gap:8px}.privacy-dot{width:7px;height:7px;background:#89906e;border-radius:50%;box-shadow:0 0 0 3px rgba(137,144,110,.13)}
.intro{padding:38px 0 27px;display:flex;align-items:flex-end;justify-content:space-between;gap:28px}
.eyebrow,.section-kicker{font-family:var(--mono);font-size:9px;letter-spacing:1.45px;color:#8d7866}
.eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 11px}.eyebrow-line{width:22px;height:1px;background:var(--accent)}
h1,h2,p{margin-top:0}h1{font:500 clamp(32px,4vw,51px)/1.08 var(--serif);letter-spacing:-1.3px;margin-bottom:0}h1 em{color:var(--accent);font-weight:500}
.intro-note{max-width:245px;color:#81776c;font:13px/1.65 var(--serif);margin:0 4px 5px 0}
.workspace{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(390px,.94fr);gap:28px;align-items:start}
.camera-panel,.camera-styles-panel,.filters-panel,.keepsake-panel{background:rgba(250,247,241,.79);border:1px solid rgba(145,126,104,.18);border-radius:18px;box-shadow:0 9px 35px rgba(75,58,39,.035)}
.camera-panel{padding:21px 22px 18px;position:relative}
.panel-heading,.keepsake-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.panel-heading h2,.keepsake-heading h2{font:600 20px/1.2 var(--serif);letter-spacing:-.35px;margin:4px 0 0}.section-kicker{font-size:8px;letter-spacing:1.15px}
.status-pill{display:flex;align-items:center;gap:7px;border:1px solid #e2dace;border-radius:30px;padding:7px 10px;color:#766d63;font-size:10px;white-space:nowrap}.status-indicator{height:6px;width:6px;background:#b7a997;border-radius:50%}.status-pill.is-live{background:#edf0e7;border-color:#d5dbc9;color:#5b694f}.status-pill.is-live .status-indicator{background:#829265;box-shadow:0 0 0 3px rgba(130,146,101,.14)}
.camera-styles-panel{padding:19px 19px 13px}.style-heading h2{font-size:19px}.style-count{color:#9a8e80;font:9px var(--mono);white-space:nowrap}.styles-intro{color:#857a6e;font:11px/1.5 var(--serif);margin:8px 0 12px}.style-categories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:4px;background:#f0ebe3;border:1px solid #e7dfd4;border-radius:10px}.category-chip{min-height:32px;padding:5px 4px;border:0;border-radius:7px;background:transparent;color:#817568;font-size:9px;font-weight:600;cursor:pointer}.category-chip[aria-pressed=true]{color:#96543c;background:#fffaf3;box-shadow:0 1px 4px rgba(76,57,38,.09)}
.camera-style-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.camera-style-card{min-width:0;display:grid;grid-template-rows:43px auto;gap:6px;text-align:left;padding:6px;border-radius:10px;border:1px solid #e5ddd1;background:#fbf8f2;color:#5c544a;cursor:pointer;transition:transform .14s ease,border-color .14s ease,background .14s ease}.camera-style-card:hover{transform:translateY(-1px);border-color:#cfaa91}.camera-style-card[aria-pressed=true]{background:#f7ede2;border-color:#be7b5d;box-shadow:0 0 0 1px rgba(189,104,71,.1)}.camera-style-card:focus-visible,.category-chip:focus-visible{outline:3px solid rgba(189,104,71,.42);outline-offset:2px}.style-art{position:relative;display:flex;align-items:center;justify-content:space-between;overflow:hidden;border-radius:6px;padding:0 8px;color:#fff5e4;box-shadow:inset 0 0 0 1px rgba(255,255,255,.17)}.style-art:after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.19),transparent 50%,rgba(28,25,29,.16));pointer-events:none}.style-art-lens{z-index:1;width:22px;height:22px;border:2px solid rgba(255,247,229,.9);border-radius:50%;box-shadow:inset 0 0 0 3px rgba(30,36,38,.28),0 0 0 2px rgba(255,255,255,.14)}.style-art-tag{z-index:1;font:8px var(--mono);letter-spacing:1px;text-shadow:0 1px 5px rgba(0,0,0,.3)}.camera-style-copy{display:grid;align-content:start;gap:3px;min-height:43px}.camera-style-copy strong{font:600 10px/1.25 var(--sans);overflow-wrap:anywhere}.camera-style-copy small{color:#95897c;font:9px/1.3 var(--serif)}.selected-style-note{margin:9px 1px 0;color:#9b5e43;font:9px/1.35 var(--mono);min-height:12px}
.viewfinder{position:relative;margin-top:17px;width:100%;aspect-ratio:4/4.6;max-height:660px;overflow:hidden;border-radius:12px;background:#48453d;isolation:isolate;color:#c7ad88;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
#cameraVideo{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;z-index:0;transform:scaleX(1)}
.live-overlay,.style-overlay,.flash-effect,.scanline-overlay,.grain-overlay{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .16s linear}.live-overlay{z-index:1;mix-blend-mode:soft-light}.style-overlay{z-index:1;mix-blend-mode:soft-light}.flash-effect{z-index:1;background:radial-gradient(ellipse at 50% 38%,rgba(255,245,222,.7),rgba(255,226,185,.14) 39%,transparent 77%);mix-blend-mode:screen}.scanline-overlay{z-index:2;background:repeating-linear-gradient(to bottom,rgba(24,22,28,.31) 0 1px,transparent 1px 4px);mix-blend-mode:multiply}.grain-overlay{z-index:2;background-image:repeating-radial-gradient(circle at 40% 60%,rgba(255,250,233,.65) 0 1px,rgba(35,30,26,.5) 1px 2px,transparent 2px 4px);background-size:9px 9px;mix-blend-mode:soft-light}.viewfinder-vignette{position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 90px rgba(24,20,15,.22)}
.frame-markers{position:absolute;z-index:4;inset:17px;pointer-events:none;opacity:.37}.frame-markers i{position:absolute;width:12px;height:12px;border-color:#f3e6d2;border-style:solid}.frame-markers i:nth-child(1){top:0;left:0;border-width:1px 0 0 1px}.frame-markers i:nth-child(2){top:0;right:0;border-width:1px 1px 0 0}.frame-markers i:nth-child(3){bottom:0;left:0;border-width:0 0 1px 1px}.frame-markers i:nth-child(4){bottom:0;right:0;border-width:0 1px 1px 0}
.camera-style-frame{position:absolute;z-index:5;inset:0;pointer-events:none}.camera-style-frame[data-frame=instant]{border:12px solid #f2e8da;border-bottom-width:47px}.camera-style-frame[data-frame=mini]{border:10px solid #fff9ed;border-bottom-width:27px;border-radius:4px}.camera-style-frame[data-frame=film],.camera-style-frame[data-frame=super8],.camera-style-frame[data-frame=vhs]{background:radial-gradient(ellipse 6px 4px at 50% 0,#e7d8bc 94%,transparent 100%) left top/17px 17px repeat-y,radial-gradient(ellipse 6px 4px at 50% 0,#e7d8bc 94%,transparent 100%) right top/17px 17px repeat-y}.camera-style-frame[data-frame=super8]{background-color:rgba(40,36,28,.22)}.camera-style-frame[data-frame=half-frame]{border:1px solid rgba(246,231,203,.7)}.camera-style-frame[data-frame=half-frame]:after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid rgba(246,231,203,.75)}.camera-style-frame[data-frame=panorama]{background:linear-gradient(#211f20 0 10%,transparent 10% 90%,#211f20 90%)}.camera-style-frame[data-frame=circle]{border:2px solid rgba(246,235,216,.74);border-radius:50%}.camera-style-frame[data-frame=box]{border:10px solid rgba(130,101,67,.52)}.camera-style-frame[data-frame=toy]{border:7px solid rgba(229,198,152,.75);border-radius:17%}.flash-pop{position:absolute;z-index:9;inset:0;background:#fff8e8;opacity:0;pointer-events:none}.flash-pop.is-flashing{animation:shutter-flash .2s ease-out}@keyframes shutter-flash{0%{opacity:.88}100%{opacity:0}}
.preview-placeholder{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:radial-gradient(ellipse at 50% 34%,rgba(207,183,146,.26),transparent 43%),linear-gradient(155deg,#5a574d,#35342e 72%);color:#d1c0a4}
.placeholder-camera{width:126px;height:auto;opacity:.73;margin:0 0 18px}.placeholder-label{font:9px var(--mono);letter-spacing:1.65px;color:#d4bb94}.preview-placeholder p{font:15px/1.6 var(--serif);color:rgba(242,231,210,.72);margin:9px 0 0}
.live-label{position:absolute;top:16px;left:17px;z-index:7;border-radius:30px;padding:7px 10px;background:rgba(33,29,24,.55);color:#fff7e9;font:8px var(--mono);letter-spacing:1px;align-items:center;gap:6px;backdrop-filter:blur(8px)}.rec-dot{height:5px;width:5px;background:#d36d4a;border-radius:50%;box-shadow:0 0 0 2px rgba(211,109,74,.2)}
.preview-camera-label{position:absolute;z-index:7;left:17px;bottom:42px;color:#fff7e9;font:500 16px var(--serif);text-shadow:0 1px 10px rgba(0,0,0,.4)}.preview-filter-label{position:absolute;z-index:7;left:17px;bottom:19px;color:rgba(255,247,233,.86);font:9px var(--mono);letter-spacing:.4px;text-shadow:0 1px 7px rgba(0,0,0,.45)}.preview-date{position:absolute;z-index:7;right:16px;bottom:19px;color:#fff0c8;font:600 10px var(--mono);letter-spacing:.7px;text-shadow:0 1px 8px rgba(0,0,0,.55)}.preview-date[data-mode=orange]{color:#ee8b42}.viewfinder[data-aspect=square]{aspect-ratio:1/1}
.preview-date[data-frame=instant],.preview-date[data-frame=mini]{color:#956443;text-shadow:none}
.camera-message{min-height:19px;font-size:11px;color:#847b70;margin:10px 1px 8px;line-height:1.45}.camera-message strong{color:#605448;font-weight:600}.camera-message.is-error{color:#a14c38}
.camera-actions{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:center;gap:8px}
.button{border:0;cursor:pointer;transition:transform .13s ease,background .13s ease,box-shadow .13s ease}.button:active:not(:disabled){transform:scale(.97)}.button:focus-visible,.filter-card:focus-visible,.text-button:focus-visible{outline:3px solid rgba(189,104,71,.45);outline-offset:3px}.button:disabled{cursor:not-allowed;opacity:.55}
.button-soft,.button-primary{height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:600}.button-soft{background:#f1ebe2;color:#766b5e;border:1px solid #e6ddd1}.button-soft svg{width:16px;height:16px}.button-primary{background:var(--accent);color:#fffaf3;box-shadow:0 5px 13px rgba(171,87,57,.16)}.button-primary:hover:not(:disabled){background:var(--accent-deep)}.open-camera-icon{height:17px;width:17px}
.button-shutter{height:58px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.shutter-ring{width:43px;height:43px;border-radius:50%;border:2px solid #b96c4d;display:grid;place-items:center;background:#fbf8f2;box-shadow:0 0 0 3px #fbf8f2,0 0 0 4px rgba(185,108,77,.25)}.shutter-ring span{width:31px;height:31px;border-radius:50%;background:var(--accent);transition:transform .15s ease}.button-shutter:active:not(:disabled) .shutter-ring span{transform:scale(.83)}.button-shutter:disabled .shutter-ring{border-color:#b5a99b;box-shadow:0 0 0 3px #fbf8f2,0 0 0 4px rgba(130,117,102,.16)}.button-shutter:disabled .shutter-ring span{background:#b5a99b}.shutter-text{font-size:9px;color:#887d70}
.strength-row{padding-top:11px;margin-top:9px;border-top:1px solid rgba(137,120,101,.13)}.strength-copy{display:flex;justify-content:space-between;align-items:center;color:#63594e;font-size:11px;font-weight:600}.strength-copy span{color:var(--accent);font-family:var(--mono);font-size:10px}input[type=range]{width:100%;height:14px;margin:8px 0 1px;accent-color:var(--accent);cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:5px;background:#e7ddd0}input[type=range]::-webkit-slider-thumb{margin-top:-6px}.strength-captions{display:flex;justify-content:space-between;color:#aaa093;font:8px var(--mono);letter-spacing:.65px}
.side-column{display:grid;gap:13px}.filters-panel{padding:21px 21px 17px}.filters-heading{align-items:flex-end}.filter-count{color:#9a8e80;font:9px var(--mono);padding-bottom:2px}.filters-intro{color:#8b8176;font:12px var(--serif);margin:8px 0 15px}.filter-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px 7px}.filter-card{min-width:0;border:0;border-radius:8px;padding:3px 3px 5px;background:transparent;cursor:pointer;text-align:left;color:#645b51;transition:background .15s ease,transform .15s ease}.filter-card:hover{background:#f1ebe2;transform:translateY(-1px)}.filter-card[aria-pressed=true]{background:#f0e5d8;box-shadow:inset 0 0 0 1px rgba(189,104,71,.36)}.filter-swatch{display:block;height:43px;border-radius:6px;margin-bottom:5px;box-shadow:inset 0 0 0 1px rgba(83,64,46,.09);position:relative;overflow:hidden}.filter-swatch:after{content:"";position:absolute;inset:0;background:linear-gradient(130deg,rgba(255,255,255,.25),transparent 48%,rgba(37,34,33,.1))}.filter-name{display:block;font-size:9px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}.filter-card[aria-pressed=true] .filter-name{color:#a05337;font-weight:700}
.keepsake-panel{padding:17px 20px 15px}.keepsake-heading h2{font-size:18px}.local-badge{font:8px var(--mono);letter-spacing:.5px;color:#737c5d;background:#edf0e7;border-radius:30px;padding:6px 8px}.keepsake-content{display:flex;align-items:center;gap:12px;padding-top:14px}.keepsake-icon{width:40px;height:40px;border-radius:11px;background:#f0e9de;display:grid;place-items:center;color:#a98b6d;flex:none}.keepsake-icon svg{width:23px}.keepsake-content p{font:12px/1.6 var(--serif);color:#6f655a;margin:0}.keepsake-content p span{font-size:10px;color:#9b9084}.captured-photo{display:grid;grid-template-columns:74px 1fr;gap:12px;align-items:center;padding-top:13px}.captured-photo img{width:74px;height:75px;object-fit:cover;border-radius:7px;box-shadow:0 4px 12px rgba(56,40,24,.13)}.captured-meta{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px}.captured-meta>div:first-child{display:grid;gap:4px;min-width:0}.captured-meta strong{font:600 12px var(--serif)}.captured-meta span{font:9px var(--mono);color:#978b7e}.photo-actions{display:flex;gap:9px}.text-button{display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:7px 0;color:var(--accent-deep);font-size:10px;font-weight:700;text-decoration:none;cursor:pointer}.text-button svg{width:14px;height:14px}
footer{display:flex;justify-content:space-between;gap:15px;padding:17px 2px 0;color:#9a9085;font:9px var(--mono);letter-spacing:.12px}footer span:last-child{color:#80876d}
[hidden]{display:none!important}
@media(min-width:1200px){.page-shell{padding-left:6.3vw;padding-right:6.3vw}.workspace{gap:30px}.camera-panel{padding:23px 25px 19px}.viewfinder{aspect-ratio:4/4.5}.filter-swatch{height:48px}.filter-grid{gap:11px 8px}}
@media(max-width:1050px){.workspace{grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);gap:17px}.camera-panel{padding:17px 17px 15px}.camera-styles-panel{padding:16px 13px 12px}.camera-style-card{grid-template-rows:40px auto;padding:5px}.camera-style-copy strong{font-size:9px}.camera-style-copy small{font-size:8px}.filters-panel{padding:18px 15px 14px}.filter-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px 4px}.filter-swatch{height:38px}.filter-name{font-size:8px}.intro{padding-top:32px}.intro-note{max-width:200px}}
@media(max-width:760px){.page-shell{padding:0 17px calc(20px + env(safe-area-inset-bottom))}.topbar{height:66px}.brand-mark{width:37px;height:34px}.brand-copy strong{font-size:15px}.brand-copy small{font-size:8px}.privacy-note{font-size:9px}.intro{padding:26px 1px 19px;display:block}.eyebrow{margin-bottom:8px}h1{font-size:35px;line-height:1.1;letter-spacing:-.8px}.desktop-break{display:none}.intro-note{margin:9px 0 0;font-size:12px;max-width:none}.workspace{display:flex;flex-direction:column;gap:13px}.camera-panel{width:100%;padding:15px 14px 14px;border-radius:15px}.panel-heading h2{font-size:18px}.section-kicker{font-size:7px}.status-pill{font-size:9px;padding:6px 8px}.viewfinder{margin-top:13px;aspect-ratio:4/4.4;max-height:none;border-radius:10px}.preview-placeholder p{font-size:14px}.placeholder-camera{width:108px;margin-bottom:14px}.camera-message{font-size:10px;margin:8px 0 7px;min-height:15px}.button-soft,.button-primary{height:39px;font-size:11px}.button-shutter{height:55px}.shutter-ring{width:40px;height:40px}.shutter-ring span{width:29px;height:29px}.strength-row{padding-top:9px;margin-top:7px}.side-column{display:contents}.camera-styles-panel{width:100%;padding:16px 13px 12px;border-radius:15px;order:-1}.style-heading h2{font-size:17px}.styles-intro{font-size:10px;margin:6px 0 10px}.style-categories{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.category-chip{min-height:36px;font-size:10px}.camera-style-grid{gap:7px;margin-top:9px}.camera-style-card{grid-template-rows:43px auto;gap:5px;padding:6px}.camera-style-copy{min-height:44px}.camera-style-copy strong{font-size:10px}.camera-style-copy small{font-size:9px}.selected-style-note{margin-top:7px}.filters-panel{width:100%;padding:16px 13px 13px;border-radius:15px}.filters-intro{margin:6px 0 11px}.filter-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 6px}.filter-card{padding:3px 3px 5px}.filter-swatch{height:42px;border-radius:5px}.filter-name{font-size:9px;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:22px;line-height:11px}.keepsake-panel{order:3;padding:15px 14px;border-radius:15px}.keepsake-heading h2{font-size:17px}.keepsake-content{padding-top:12px}footer{padding-top:15px;font-size:8px}footer span:first-child{max-width:180px} }
@media(max-width:380px){.page-shell{padding-left:12px;padding-right:12px}.filter-grid{gap:6px 4px}.filter-swatch{height:38px}.filter-name{font-size:8.5px}.camera-actions{gap:5px}.button-primary{gap:5px;font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}}