/* System font fallbacks: no third-party requests, photos remain on-device. */
:root{font-family:'DM Sans',system-ui,sans-serif;color:#183a2c;background:#f1eee6;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.42;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #da9d40;outline-offset:4px}[hidden]{display:none!important}.studio{max-width:1200px;margin:auto;min-height:100svh;display:grid;grid-template-columns:1fr 430px;align-items:center;gap:100px;padding:40px 48px}.intro{max-width:470px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;display:flex;align-items:center;gap:12px}.spark{font-size:27px;color:#bc291e}.pill,.mini-pill{font-size:9px;letter-spacing:1px;background:#e4e4d7;padding:5px 8px;border-radius:4px}.intro h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(44px,5vw,73px);font-weight:600;line-height:1.06;letter-spacing:-2px;margin:35px 0 24px}.intro em{color:#b72e28}.intro>p{color:#687168;line-height:1.75;font-size:16px;max-width:355px}.intro ol{list-style:none;padding:20px 0;margin:0;display:grid;gap:20px;font-size:14px}.intro li{display:flex;gap:17px;align-items:center}.intro li b{font-size:10px;border:1px solid #c8cec3;border-radius:50%;width:28px;height:28px;display:grid;place-items:center}.privacy-note{display:flex;align-items:center;gap:16px;border-top:1px solid #d9dcd1;margin-top:28px;padding-top:19px;font-size:11px;color:#687168;line-height:1.6}.privacy-note>span{font-size:40px}.privacy-note strong{color:#234334;font-weight:600}.camera-app{width:100%;max-width:430px;background:#fffcf5;border-radius:26px;overflow:hidden;box-shadow:0 24px 80px #102f1d20;border:1px solid #fff}.app-top{padding:14px 20px;display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:700;letter-spacing:1.8px}.mini-pill{background:#edf1e8;color:#426748}.stage{position:relative;aspect-ratio:9/16;overflow:hidden;background:radial-gradient(ellipse at 20% 10%,#748a66 0,transparent 45%),radial-gradient(ellipse at 88% 75%,#4d6453 0,transparent 50%),#1c3e33;isolation:isolate}.stage canvas{width:100%;height:100%;display:block}.header-art{position:absolute;width:60%;height:auto;max-height:26%;object-fit:contain;top:5%;left:20%;pointer-events:none}.stage.is-live .header-art,.stage.is-result .header-art{display:none}.stage-tools{position:absolute;top:13px;left:13px;right:13px;display:flex;justify-content:space-between}.glass-button{border:1px solid #ffffff50;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;background:#1236294f;color:white;backdrop-filter:blur(6px);font-size:22px}.glass-button[aria-pressed=false]{opacity:.6}.glass-button svg{width:20px}.welcome{position:absolute;inset:32% 0 10%;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fffaf0;text-align:center}.face-outline{width:90px;height:110px;border:1px dashed #e6d7ad80;border-radius:48%;display:grid;place-items:center;color:#d9bc7d;font-size:31px}.welcome h2{font-family:'Playfair Display',Georgia,serif;font-size:25px;margin:16px 0 0;font-weight:600}.welcome p{font-size:12px;line-height:1.5;color:#e4e6d5;margin:10px 0 20px}.primary{border:0;background:#b72626;color:white;border-radius:100px;min-height:46px;padding:12px 26px;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;gap:28px}.welcome .primary{background:#fff9ed;color:#133e2c}.text-button{background:none;border:0;color:#ebe7d3;padding:15px 10px;font-size:11px;text-decoration:underline;text-underline-offset:4px}.tracking{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);border:1px solid #ffffff38;background:#103125a6;backdrop-filter:blur(8px);color:white;border-radius:100px;font-size:10px;white-space:nowrap;padding:7px 12px;max-width:95%;overflow:hidden;text-overflow:ellipsis}.tracking.is-countdown{font-size:64px;top:45%;bottom:auto;border:0;background:none}.flash{position:absolute;inset:0;background:white;opacity:0;pointer-events:none}.flash.active{animation:flash .35s ease-out}@keyframes flash{from{opacity:1}to{opacity:0}}.controls{padding:20px 19px 0}.control-heading{display:flex;justify-content:space-between;align-items:center}.control-heading h2{font-size:13px;margin:0}.control-heading>span{font-size:10px;color:#8c8576}.filters{display:flex;justify-content:space-between;gap:9px;margin:16px 0 14px}.filters button{display:flex;align-items:center;flex-direction:column;gap:7px;background:none;border:0;padding:0;color:#6f7064;font-size:10px;flex:1;min-width:0}.filter-icon{width:64px;height:64px;border:1px solid #e2ddd0;border-radius:50%;display:grid;place-items:center;position:relative;background:#f2eee4}.filter-icon>img{width:81%;height:81%;object-fit:contain}.filters button[aria-pressed=true]{color:#103f2d;font-weight:700}.filters button[aria-pressed=true] .filter-icon{outline:2px solid #18523c;outline-offset:3px;background:#e6eddf}.none-icon{font-size:33px;font-weight:400;color:#8c8170}.bear-icon .ear-l,.bear-icon .ear-r{position:absolute;width:38%;height:43%;top:8%;left:5%}.bear-icon .ear-r{left:auto;right:5%;transform:scaleX(-1)}.bear-icon .nose-mini{position:absolute;width:43%;height:37%;top:49%;left:29%}.bear-icon .hat-mini{position:absolute;width:64%;height:61%;top:-4%;left:23%}.shutter-row{display:flex;align-items:center;justify-content:center;gap:48px;margin:19px 0 10px}.secondary-icon{background:none;border:1px solid #dfdccc;border-radius:50%;width:38px;height:38px;display:grid;place-items:center;color:#315541;font-size:14px}.secondary-icon[aria-pressed=true]{background:#dfe7d7;border-color:#2b634a}.shutter{width:70px;height:70px;border-radius:50%;background:#b72526;border:4px solid #fff;outline:1px solid #dbcfc1;display:grid;place-items:center;color:white}.shutter svg{width:31px;height:31px}.hint{font-size:10px;line-height:1.5;color:#7b7e6e;text-align:center;margin:10px 0 0}.message{padding:12px 17px;margin:12px 18px;color:#8e301f;background:#fff0de;border-radius:10px;font-size:12px;line-height:1.55}.camera-app footer{padding:15px 12px;font-size:8px;letter-spacing:.8px;text-align:center;color:#8d9282}.camera-app footer span{margin:0 6px}.result-controls{padding:24px;text-align:center}.result-controls .eyebrow{justify-content:center;font-size:9px;color:#8d7150}.result-controls h2{font-family:'Playfair Display',Georgia,serif;font-size:29px;margin:10px 0}.result-controls>p{font-size:12px;color:#6b766b}.result-controls .primary{width:100%;margin-top:20px}.result-secondary{display:flex;justify-content:center;gap:28px;margin:17px 0}.result-secondary a,.result-secondary button{border:0;background:none;color:#194d39;font-size:12px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}#video{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none;left:0;bottom:0}.stage.is-result .stage-tools,.stage.is-result .tracking{display:none}@media(min-width:761px){.camera-app{max-width:360px;justify-self:center}.studio{grid-template-columns:1fr 400px}.filter-icon{width:58px;height:58px}.welcome{inset:31% 0 8%}}@media(max-width:760px){body{background:#fffcf5}.studio{display:block;padding:0;min-height:100svh}.intro{display:none}.camera-app{max-width:480px;margin:auto;border:0;border-radius:0;box-shadow:none}.app-top{padding:11px 18px}.stage{max-height:calc(100svh - 260px);min-height:330px;width:100%;aspect-ratio:auto}.stage canvas{object-fit:contain;background:#142d25}.stage:not(.is-live):not(.is-result){min-height:410px}.stage:not(.is-live):not(.is-result) canvas{opacity:0}.header-art{max-height:28%;width:56%;left:22%;top:5%}.controls{padding-top:15px}.filters{margin:13px 0}.filter-icon{width:60px;height:60px}.shutter-row{margin:16px 0 8px}.welcome h2{font-size:24px}.welcome{inset:34% 0 8%}.face-outline{width:66px;height:75px}.welcome p{margin-bottom:14px}.tracking{bottom:10px}.hint{font-size:9px}.camera-app footer{padding:11px}.result-controls{padding:18px}.stage.is-result{max-height:62svh}}@media(prefers-reduced-motion:reduce){.flash.active{animation:none}} 
/* Keep the complete 9:16 composition visible; controls stay outside the exported photo. */
.header-art{top:19%}
.welcome{inset:43% 0 8%}
.stage:not(.is-live):not(.is-result)::before{content:'';position:absolute;inset:0 0 auto;height:49%;background:linear-gradient(#fff9e9f5,#fff9e9d9 62%,transparent);pointer-events:none}
@media(max-width:760px){.stage,.stage:not(.is-live):not(.is-result){height:clamp(360px,calc(100svh - 302px),640px);min-height:0;max-height:none}.stage.is-result{height:58svh;max-height:none}.stage canvas{width:100%;height:100%;object-fit:contain}.secondary-icon{min-width:44px;min-height:44px}.glass-button{width:40px;height:40px}}

/* Published welcome screen. These rules never change the live camera or export. */
body{background:#fffcf5}
.studio{grid-template-columns:1fr;gap:0}
.studio:has(.welcome:not([hidden])){padding:0;max-width:none}
.camera-app:has(.welcome:not([hidden])){max-width:520px;margin-inline:auto;border:0;border-radius:0;box-shadow:none;overflow:visible}
.stage:not(.is-live):not(.is-result){height:100svh;min-height:400px;max-height:980px;aspect-ratio:auto;background:#fffcf5;overflow:hidden}
.stage:not(.is-live):not(.is-result)::before,
.stage:not(.is-live):not(.is-result)>canvas,
.stage:not(.is-live):not(.is-result)>.header-art,
.stage:not(.is-live):not(.is-result)>.tracking{display:none}
.welcome{inset:0;display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1.5fr) auto;justify-items:center;align-items:center;gap:clamp(12px,2.5svh,24px);padding:clamp(16px,4svh,38px) 20px max(24px,env(safe-area-inset-bottom));color:#123e30}
.welcome-logo{display:block;width:78%;height:100%;min-height:0;object-fit:contain;align-self:end}
.welcome-bear{display:block;width:100%;height:100%;min-height:0;object-fit:contain;align-self:start}
.welcome .primary{width:100%;max-width:340px;min-height:56px;background:#123e30;color:#fff9ed;font-size:17px;gap:22px;border-radius:18px;box-shadow:0 6px 18px #123e3014;transition:background .18s ease,transform .18s ease}
.welcome .primary:hover{background:#1c513d}
.welcome .primary:active{transform:scale(.98)}
.camera-app:has(.welcome:not([hidden]))>.message:not([hidden]){position:fixed;bottom:calc(90px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:460px;margin:0;z-index:5;box-shadow:0 8px 36px #123e3026}
@media(max-height:500px) and (orientation:landscape){.stage:not(.is-live):not(.is-result){min-height:340px}.welcome{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) 56px;gap:12px 24px;padding:16px 24px}.welcome-logo{width:100%;grid-column:1;grid-row:1}.welcome-bear{grid-column:2;grid-row:1 / 3}.welcome .primary{grid-column:1;grid-row:2}}
@media(prefers-reduced-motion:reduce){.welcome .primary{transition:none}}

/* v10: one responsive viewport, including browser chrome and safe areas. */
.studio{padding:20px;min-height:100svh;min-height:100dvh}
.camera-app{max-width:480px}
.camera-app:has(.stage.is-live),.camera-app:has(.stage.is-result){display:grid;grid-template-rows:minmax(0,1fr) auto auto;height:calc(100svh - 40px);height:calc(100dvh - 40px);max-height:1000px;min-height:360px}
.stage.is-live,.stage.is-result{height:100%;min-height:0;max-height:none;aspect-ratio:auto;background:#173e30}
.stage.is-live canvas,.stage.is-result canvas{object-fit:contain;background:#173e30}
.stage-tools{top:max(10px,env(safe-area-inset-top));left:12px;right:12px}
.glass-button{width:44px;height:44px}
.controls{padding:12px 16px max(10px,env(safe-area-inset-bottom));background:#fffcf5}
.filters{gap:12px;margin:12px 0}
.filter-icon{width:50px;height:50px}
.filters button{min-height:70px;font-size:11px;gap:5px}
.control-heading h2{font-size:13px}
.control-heading>span{font-size:11px}
.shutter-row{margin:8px 0 0;gap:42px}
.shutter{width:62px;height:62px}
.secondary-icon{width:44px;height:44px}
.controls>.hint{display:none}
.camera-app:has(.stage.is-live)>.message{margin:0;padding:8px 16px;font-size:11px;border-radius:0;max-height:90px;overflow:auto}
.result-controls{padding:14px 18px max(12px,env(safe-area-inset-bottom))}
.result-controls h2{font-size:23px;margin:6px 0}
.result-controls>.primary{margin-top:12px}
.result-secondary{margin:10px 0}
.result-secondary a,.result-secondary button{min-height:44px;display:flex;align-items:center}
.stage:not(.is-live):not(.is-result){height:100svh;height:100dvh;min-height:320px;max-height:1000px}
.welcome{padding:max(16px,env(safe-area-inset-top)) 20px max(16px,env(safe-area-inset-bottom));gap:12px;grid-template-rows:minmax(0,.85fr) minmax(0,1.5fr) 56px}
.welcome-logo{max-width:330px;width:85%}
.welcome-bear{max-width:460px}
@media(max-width:760px){
  .studio{padding:0}
  .camera-app:has(.stage.is-live),.camera-app:has(.stage.is-result){height:100svh;height:100dvh;min-height:360px;max-height:none}
  .stage.is-live,.stage.is-result{height:100%;min-height:0;max-height:none}
  .tracking{font-size:10px;bottom:8px;padding:5px 10px}
}
@media(max-height:600px){
  .controls{padding-top:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .control-heading{display:none}
  .filters{margin:4px 0 8px}
  .filter-icon{width:42px;height:42px}
  .filters button{min-height:60px}
  .shutter{width:54px;height:54px}
  .shutter-row{margin:4px 0 0}
}
@media(orientation:landscape) and (max-height:600px){
  .camera-app:has(.stage.is-live),.camera-app:has(.stage.is-result){max-width:900px;grid-template-columns:minmax(0,1fr) 230px;grid-template-rows:minmax(0,1fr) auto;min-height:280px}
  .controls,.result-controls{align-self:center}
  .message{grid-column:1 / -1}
  .stage:not(.is-live):not(.is-result){min-height:280px}
  .welcome{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) 56px}
}