:root{color-scheme:light;--paper:#fff5ed;--peach:#fce4d8;--ink:#55372f;--muted:#87675d;--coral:#c74650;--aqua:#ace1d9;--line:#ead5c9;--font:ui-rounded,'SF Pro Rounded','Arial Rounded MT Bold',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);font-family:var(--font);color:var(--ink)}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;cursor:pointer;color:inherit}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #087e85;outline-offset:3px}[hidden]{display:none!important}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.app{width:100%;max-width:480px;height:100svh;height:100dvh;min-height:520px;margin:auto;display:flex;flex-direction:column;position:relative;overflow:hidden;background:var(--paper);padding-top:env(safe-area-inset-top)}.topbar{display:flex;align-items:center;gap:9px;height:60px;padding:5px 18px;flex:none;z-index:3}.brand{width:66px;height:44px;position:relative;flex:none;background:transparent}.brand img{display:block;width:100%;height:100%;object-fit:contain}.topbar-title{font-size:14px;letter-spacing:.015em;font-weight:650;flex:1}.icon-button{display:grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:transparent;transition:background .18s,transform .18s}.icon-button:active{transform:scale(.92)}.icon-button:hover{background:#e9d8ce55}.icon-button:disabled{opacity:.4}.stage{position:relative;display:grid;place-items:center;flex:1;min-height:0;margin:0 12px}.viewfinder{position:relative;width:100%;height:100%;overflow:hidden;border-radius:24px;background:#211c1c;isolation:isolate;box-shadow:0 1px 0 #fff,0 6px 20px #5a302c09}canvas{display:block;width:100%;height:100%;object-fit:contain}#camera{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:0;bottom:0}.start-panel{position:absolute;inset:0;overflow:hidden;border-radius:24px;background:var(--peach);display:flex;align-items:center;flex-direction:column}.welcome-copy{position:relative;z-index:1;padding:clamp(24px,5vh,46px) 16px 0;text-align:center}.eyebrow{font-size:12px;font-weight:750;letter-spacing:.025em;margin:0 0 18px;color:#76514a;line-height:1.5}h1{font-size:clamp(32px,9vw,43px);font-weight:800;letter-spacing:-.065em;line-height:1.07;margin:0}h1 span{color:var(--coral)}.welcome-art{display:block;min-height:0;flex:1;width:105%;object-fit:contain;object-position:center;margin:8px 0 0}.welcome-action{position:relative;z-index:1;width:100%;padding:14px 26px 23px;background:linear-gradient(0deg,var(--peach) 80%,transparent)}.start-button{width:100%;height:56px;padding:0 24px;display:flex;align-items:center;justify-content:center;gap:12px;background:var(--ink);color:#fff9f1;border:0;border-radius:18px;font-size:16px;font-weight:650;box-shadow:0 7px 0 #55372f0c;transition:transform .18s,opacity .18s}.start-button:active{transform:translateY(2px)}.start-button:disabled{opacity:.65}.start-button:disabled svg{animation:opening 1.4s ease-in-out infinite}.welcome-action p{text-align:center;font-size:13px;margin:13px 0 0;color:#78584e}.app.is-start .camera-controls{display:none}.app.is-start .stage{margin-bottom:max(14px,env(safe-area-inset-bottom))}.app.is-start #soundToggle{visibility:hidden}.tracking-status{position:absolute;left:12px;right:12px;bottom:16px;display:flex;justify-content:center;text-align:center;color:white;font-size:14px;line-height:1.4;pointer-events:none;text-wrap:balance}.tracking-status:not(:empty){background:#292221a6;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid #ffffff25;border-radius:22px;padding:9px 16px;max-width:280px;margin:auto}.camera-controls{flex:none;padding:10px 0 max(10px,env(safe-area-inset-bottom))}.carousel-wrap{position:relative}.selection-ring{position:absolute;left:50%;top:2px;width:65px;height:65px;border:2px solid var(--coral);border-radius:50%;transform:translateX(-50%);pointer-events:none}.hat-carousel{display:flex;gap:15px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x mandatory;padding:6px calc(50% - 28px);scroll-padding-inline:calc(50% - 28px);mask-image:linear-gradient(to right,transparent,#000 24%,#000 76%,transparent)}.hat-carousel::-webkit-scrollbar{display:none}.hat-option{border:0;background:none;flex:none;width:56px;height:56px;padding:0;scroll-snap-align:center;scroll-snap-stop:always;border-radius:50%;display:grid;place-items:center}.hat-circle{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#edd8c8;overflow:hidden;transition:transform .16s,opacity .16s;opacity:.6;transform:scale(.88);border:1px solid #c8a99b22}.hat-option:nth-child(3) .hat-circle{background:#e6e7e5}.hat-option:nth-child(4) .hat-circle{background:#d7e9e6}.hat-circle img{width:100%;height:100%;object-fit:contain}.hat-option.selected .hat-circle{opacity:1;transform:scale(1)}.none-icon{background:#f0e6df;color:#95756a}.none-icon svg{width:25px;height:25px;stroke-width:1.4}.capture-row{display:flex;align-items:center;justify-content:center;padding-top:7px}.shutter{width:66px;height:66px;border:2px solid var(--coral);padding:5px;background:transparent;border-radius:50%;transition:transform .15s,opacity .2s}.shutter span{display:block;width:100%;height:100%;border-radius:50%;background:var(--coral);transition:background .2s}.shutter:disabled{opacity:.33}.shutter:not(:disabled):active{transform:scale(.9)}.hat-name{display:block;font-size:12px;line-height:16px;color:var(--muted);text-align:center;margin-top:5px;letter-spacing:.015em}.result-controls{flex:none;padding:20px 18px max(24px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:12px}.save-button{min-height:56px;border:1px solid var(--line);border-radius:17px;background:#fffaf6;color:var(--ink);padding:13px 8px;font-weight:650;font-size:14px;display:flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;transition:transform .15s,opacity .2s}.save-button.alternate{background:var(--coral);color:white;border-color:var(--coral);box-shadow:0 5px 12px #c7465014}.save-button:active{transform:scale(.97)}.save-button:disabled{opacity:.5}.error{position:absolute;z-index:10;left:24px;right:24px;bottom:200px;background:#fffaf6;box-shadow:0 6px 28px #43272428;border:1px solid #ead2c9;color:#733d36;border-radius:16px;padding:14px 16px;font-size:14px;line-height:1.5;text-align:center}.is-start .error{bottom:150px}.toast{position:absolute;z-index:12;left:50%;transform:translateX(-50%);bottom:145px;max-width:calc(100% - 48px);width:max-content;border-radius:24px;padding:11px 19px;background:#55372fef;color:white;box-shadow:0 5px 24px #55372f25;font-size:14px;text-align:center}.flash{position:absolute;inset:0;background:white;animation:flash .22s forwards;pointer-events:none}.app.is-result .brand{display:none}.app.is-result .topbar-title{font-size:16px}.app.is-result .viewfinder{border-radius:19px}.app.is-result .stage{margin:0 18px;animation:reveal .45s ease-out}@keyframes flash{from{opacity:.85}to{opacity:0}}@keyframes opening{50%{opacity:.35}}@keyframes reveal{from{opacity:.3;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@media(min-width:600px){body{min-height:100dvh;display:grid;place-items:center;background:#e4cbbc}.app{max-width:430px;height:min(920px,100dvh);box-shadow:0 20px 90px #54362b24}.stage{margin-inline:14px}}@media(max-height:700px){.topbar{height:50px}.camera-controls{padding-top:6px;padding-bottom:5px}.hat-option{height:48px}.hat-circle{height:45px;width:45px}.selection-ring{height:57px;width:57px}.capture-row{padding-top:3px}.shutter{height:57px;width:57px}.welcome-copy{padding-top:20px}h1{font-size:32px}.eyebrow{margin-bottom:10px}.welcome-action{padding-bottom:18px}.result-controls{padding-top:12px;padding-bottom:14px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition:none!important;scroll-behavior:auto!important}}

/* The camera is the whole surface; controls float over the image. */
html,body{background:#171411}
.app{max-width:none;min-height:0;height:100vh;height:100svh;height:100dvh;padding:0;background:#171411;box-shadow:none}
.stage,.app.is-result .stage,.app.is-start .stage{position:absolute;inset:0;display:block;margin:0;animation:none}
.viewfinder,.app.is-result .viewfinder{width:100%;height:100%;border-radius:0;box-shadow:none;background:#171411}
canvas{width:100%;height:100%;object-fit:cover}
.topbar{position:absolute;inset:0 0 auto;height:auto;padding:calc(env(safe-area-inset-top) + 14px) 16px 16px;pointer-events:none;background:linear-gradient(#0005,transparent)}
.topbar .icon-button{pointer-events:auto;color:white;border:1px solid #fff4;background:#25211d55;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#soundToggle{margin-left:auto}
.topbar-title,.app:not(.is-start) .brand{display:none}
.camera-controls{position:absolute;z-index:4;inset:auto 0 0;padding:22px 0 calc(env(safe-area-inset-bottom) + 16px);background:linear-gradient(transparent,#0005 25%,#0008);color:white}
.selection-ring{border-color:white}
.hat-circle{border:1px solid #fff8;opacity:.85}
.hat-name{color:white;text-shadow:0 1px 4px #0008}
.shutter{border-color:white;width:72px;height:72px}
.shutter span{background:white}
.shutter:disabled{opacity:.4}
.capture-row{padding-top:12px}
.tracking-status{bottom:calc(env(safe-area-inset-bottom) + 212px);z-index:3}

.result-controls{position:absolute;z-index:4;inset:auto 0 0;padding:36px 18px calc(env(safe-area-inset-bottom) + 22px);background:linear-gradient(transparent,#0009 36%,#000b)}
.save-button{background:#fff8f0f2;border-color:#fff8}
.save-button.alternate{background:#c74650;border-color:#ffffff36}
.app.is-start{background:var(--paper)}
.app.is-start .topbar{background:none}
.start-panel{border-radius:0;padding-top:calc(env(safe-area-inset-top) + 58px);padding-bottom:env(safe-area-inset-bottom)}
.app.is-start .brand{border-radius:0}
@media(min-width:600px){body{display:block;background:#171411}.app{max-width:none;height:100dvh}.camera-controls{padding-bottom:20px}.hat-carousel{max-width:480px;margin:auto}.welcome-art{width:min(100%,560px)}.welcome-action{max-width:440px}.result-controls{grid-template-columns:repeat(2,minmax(0,190px));justify-content:center}}
@media(max-height:700px){.camera-controls{padding-top:16px;padding-bottom:calc(env(safe-area-inset-bottom) + 10px)}.shutter{width:62px;height:62px}.capture-row{padding-top:8px}.tracking-status{bottom:calc(env(safe-area-inset-bottom) + 190px)}}

/* The canvas follows the viewport; CSS must not apply another cover crop. */
canvas{object-fit:contain}

/* Optional portrait blur, kept out of the captured image and result controls. */
.blur-toggle{pointer-events:auto;min-height:44px;padding:0 16px;border:1px solid #ffffff70;border-radius:24px;background:#17141166;color:#fff;font:600 14px/1 system-ui;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);cursor:pointer}
.blur-toggle[aria-pressed="true"]{background:#e0f5ee;color:#19382f;border-color:#e0f5ee}
.blur-toggle:focus-visible{outline:3px solid #fff;outline-offset:3px}
.app.is-start #blurToggle,.app.is-result #blurToggle{display:none}

.photo-save-dialog{width:min(440px,calc(100% - 24px));max-height:calc(100dvh - 32px);padding:16px;border:0;border-radius:22px;color:var(--ink);background:var(--paper);box-shadow:0 20px 60px #0006;overscroll-behavior:contain}
.photo-save-dialog::backdrop{background:#171411bc}
.photo-save-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.photo-save-header h2{font-size:20px;margin:0}
.photo-save-header button{font-size:28px}
.photo-save-dialog p{font-size:14px;line-height:1.45;margin:12px 0}
#photoSaveImage{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100dvh - 260px);margin:0 auto 16px;border-radius:12px;object-fit:contain;-webkit-touch-callout:default;user-select:auto;-webkit-user-select:auto}
#downloadPhotoFile{width:100%}

/* Full viewport camera. Controls float independently of the photograph. */
.app:not(.is-start) .stage,.app.is-result .stage{inset:0;display:grid;place-items:center}
.app:not(.is-start) .viewfinder{border-radius:0;max-width:100%;max-height:100%}
.app:not(.is-start):not(.is-result) canvas{object-fit:cover}
.camera-controls{inset:0;padding:0;background:none;pointer-events:none}
.carousel-wrap{position:absolute;top:calc(env(safe-area-inset-top) + 72px);left:50%;width:min(280px,80%);transform:translateX(-50%);pointer-events:auto;background:#17141140;border:1px solid #ffffff30;border-radius:48px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hat-option{height:48px}.hat-circle{width:45px;height:45px}.selection-ring{top:2px;width:57px;height:57px}
.capture-row{position:absolute;bottom:calc(24% + 12px);left:50%;transform:translateX(-50%);padding:0;pointer-events:auto}
.shutter{width:68px;height:68px;background:#17141140;box-shadow:0 2px 14px #0003}
.hat-name{position:absolute;top:calc(env(safe-area-inset-top) + 138px);left:0;right:0;margin:0;font-size:13px;line-height:18px}
.tracking-status{top:calc(env(safe-area-inset-top) + 166px);bottom:auto;font-size:13px}
.result-controls{inset:calc(env(safe-area-inset-top) + 70px) 12px auto;padding:8px;background:#17141180;border:1px solid #ffffff30;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:20px;gap:8px}
.result-controls .save-button{min-height:44px;padding:10px 8px;font-size:13px}

@media(orientation:landscape){
 .carousel-wrap{top:calc(env(safe-area-inset-top) + 12px);width:240px}
 .hat-name{top:calc(env(safe-area-inset-top) + 78px)}
 .capture-row{left:auto;right:calc(env(safe-area-inset-right) + 20px);bottom:43%;transform:none}
 .tracking-status{top:calc(env(safe-area-inset-top) + 102px)}
 .topbar{padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right))}
 .result-controls{left:25%;right:25%;top:12px}
 .error{bottom:24px;right:100px}.toast{bottom:20px}
 .start-panel{display:grid;grid-template-columns:1fr 1fr;padding:54px 24px 12px;gap:8px}
 .welcome-copy{padding:0;grid-column:1;grid-row:1}.welcome-art{grid-column:2;grid-row:1/3;width:100%;height:100%;max-height:70dvh;margin:0}
 .welcome-action{grid-column:1;grid-row:2;padding:8px}h1{font-size:32px}.eyebrow{font-size:12px;margin-bottom:10px}
}

/* A single camera dock: the selected effect is the shutter. */
.camera-controls{inset:0;background:linear-gradient(transparent 72%,#0005);pointer-events:none}
.carousel-wrap{top:auto;bottom:calc(env(safe-area-inset-bottom) + 77px);left:0;transform:none;width:100%;height:92px;border:0;border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:auto}
.hat-carousel{width:100%;max-width:460px;height:92px;margin:auto;padding:10px calc(50% - 36px);scroll-padding-inline:calc(50% - 36px);gap:18px;align-items:center;touch-action:pan-x;mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent)}
.hat-option{width:72px;height:72px}.hat-circle{width:62px;height:62px;opacity:.85;transform:scale(.82);box-shadow:0 2px 8px #0003}.hat-option.selected .hat-circle{transform:scale(1.08);opacity:1}
.selection-ring{top:4px;width:84px;height:84px;border:3px solid white;box-shadow:0 2px 12px #0003;z-index:2}
.camera-controls.is-unready .selection-ring{opacity:.5}
.hat-option[aria-disabled="true"] .hat-circle{opacity:.55}
.hat-name{top:auto;bottom:calc(env(safe-area-inset-bottom) + 174px);font-size:14px;font-weight:600;line-height:20px}
.capture-hint{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 60px);left:0;right:0;color:white;font-size:12px;text-align:center;text-shadow:0 1px 5px #000;pointer-events:none}
.utility-controls{position:absolute;z-index:5;left:20px;right:20px;bottom:calc(env(safe-area-inset-bottom) + 10px);display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.utility-controls button{pointer-events:auto;color:#fff;border:1px solid #fff5;background:#17141170;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);min-height:44px}
.utility-controls #soundToggle{margin-left:auto}
.app.is-start .utility-controls{display:none}.app.is-result #blurToggle{visibility:hidden;display:block}
.topbar{background:none}.app:not(.is-start):not(.is-result) .topbar{display:none}
.tracking-status{top:auto;bottom:calc(env(safe-area-inset-bottom) + 211px);font-size:14px}
.result-controls{top:auto;bottom:calc(env(safe-area-inset-bottom) + 70px);left:16px;right:16px;max-width:460px;margin:auto}
@media(orientation:landscape){
 .carousel-wrap{top:auto;bottom:calc(env(safe-area-inset-bottom) + 52px);width:100%;height:88px}
 .hat-name{top:auto;bottom:calc(env(safe-area-inset-bottom) + 140px)}
 .capture-hint{bottom:calc(env(safe-area-inset-bottom) + 37px)}
 .utility-controls{left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));bottom:calc(env(safe-area-inset-bottom) + 10px)}
 .tracking-status{top:auto;bottom:calc(env(safe-area-inset-bottom) + 173px)}
 .result-controls{top:auto;bottom:calc(env(safe-area-inset-bottom) + 16px);left:22%;right:22%}
}

/* One reserved bottom row, shared by live and saved composition geometry. */
#safeAreaProbe{position:absolute;visibility:hidden;pointer-events:none;padding-bottom:env(safe-area-inset-bottom)}
.camera-dock{position:absolute;z-index:5;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(env(safe-area-inset-bottom) + 8px);height:92px;display:grid;grid-template-columns:52px minmax(0,1fr) 52px;gap:8px;align-items:start;background:none}
.camera-controls{position:relative;inset:auto;height:92px;padding:0;background:none;min-width:0;pointer-events:auto}
.carousel-wrap{position:relative;inset:auto;transform:none;width:100%;height:72px;background:none;border:0}
.hat-carousel{height:72px;width:100%;max-width:none;padding:8px calc(50% - 28px);scroll-padding-inline:calc(50% - 28px);gap:12px;mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent)}
.hat-option{width:56px;height:56px}.hat-circle{width:52px;height:52px}.hat-option.selected .hat-circle{transform:scale(1)}
.selection-ring{top:4px;width:64px;height:64px;border-width:3px}
.hat-name{position:absolute;inset:73px 0 auto;font-size:14px;line-height:18px;margin:0}
.dock-tool,.camera-dock .icon-button,.camera-dock .blur-toggle{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:64px;min-height:44px;margin:4px 0 0!important;padding:5px 0;border:1px solid #fff5;border-radius:16px;background:#17141185;color:#fff;font:600 12px/16px system-ui;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);gap:3px;pointer-events:auto}
.dock-tool svg{width:24px;height:24px}.dock-tool:disabled{opacity:.5}
.app.is-start .camera-dock,.app.is-start .camera-hint,.app.is-start .group-status{display:none}
.app.is-result #blurToggle{visibility:hidden;display:flex}.app.is-result #soundToggle{grid-column:3}
.camera-hint{position:absolute;z-index:4;left:50%;top:21%;transform:translateX(-50%);width:max-content;max-width:85%;border-radius:16px;padding:9px 12px;font-size:14px;text-align:center;color:white;background:#171411b8;pointer-events:none}
.group-status{position:absolute;top:calc(env(safe-area-inset-top) + 14px);right:max(12px,env(safe-area-inset-right));z-index:3;font-size:14px;color:white;background:#17141199;border-radius:14px;padding:6px 10px;pointer-events:none}.group-status:empty{display:none}
.tracking-status{top:27%;bottom:auto;max-width:280px;font-size:14px}
.tracking-recovery{position:absolute;z-index:6;top:30%;left:50%;transform:translateX(-50%);width:min(340px,calc(100% - 24px));padding:14px;border:1px solid #fff5;border-radius:18px;background:#191e20ed;color:white;text-align:center;font-size:14px}.tracking-recovery p{margin:0 0 12px}.tracking-recovery>div{display:flex;gap:8px}.tracking-recovery button{flex:1;min-height:44px;border:1px solid #fff7;border-radius:12px;background:#fff1;color:white;padding:8px;font-size:14px}
.camera-controls.is-capturing .selection-ring{border-color:#f3ce7a;transform:translateX(-50%) scale(.9)}
.result-controls{position:absolute;inset:auto 76px calc(env(safe-area-inset-bottom) + 8px) 12px;height:92px;max-width:none;margin:0;padding:4px 0 0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:60px 22px;gap:4px 8px;border:0;border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.result-controls .save-button{min-height:52px;height:60px;font-size:14px;padding:8px;gap:5px;border-radius:14px;background:#171411b5;color:white}.result-controls .photo-primary{background:#fff8ef;color:#44382e;border:1px solid #fff}
.app.is-result .camera-hint,.app.is-result .group-status{display:none}
.start-panel{justify-content:center;gap:clamp(8px,2vh,20px)}.welcome-copy{flex:none;padding:0 16px}.welcome-art{flex:0 1 auto;width:min(85%,380px);height:auto;max-height:43dvh;min-height:0;margin:0}.welcome-action{flex:none;padding:0 24px 18px;background:none}.welcome-action p{margin:10px 0 0}.welcome-action .privacy-note{font-size:12px;line-height:1.4}
@media(orientation:landscape){.welcome-art{grid-column:2;grid-row:1/3;max-height:65dvh;width:100%;height:100%}.welcome-action{padding:0}.start-panel{gap:8px}.camera-hint{top:23%;font-size:14px}.tracking-status{top:32%}.group-status{top:12px}}
.dock-tool span{font-size:10.5px;white-space:nowrap}.group-status{top:14%}.camera-controls.is-unready .selection-ring{border-style:dashed;opacity:.65}.camera-controls.is-capturing .selection-ring{border-style:solid;opacity:1}.tracking-recovery[hidden]{display:none}
.icon-button{min-width:44px;min-height:44px;width:44px;height:44px}

/* Keep the shutter centred, with New look in a fixed slot on the same row.
   Empty dock space must never intercept result actions. */
.camera-dock{display:grid;grid-template-columns:72px minmax(0,1fr) 72px;gap:4px;pointer-events:none}
.camera-controls{grid-column:2;width:min(100%,360px);margin-inline:auto}
.new-look,.switch-camera{position:relative;grid-column:3;align-self:start;width:72px;height:64px;margin-top:4px;padding:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid #fff8;border-radius:18px;background:#171411b8;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:white;font:600 14px/1 system-ui;white-space:nowrap;pointer-events:auto}
.new-look svg,.switch-camera svg{width:20px;height:20px}.new-look:disabled,.switch-camera:disabled{opacity:.5}
.app.is-start .camera-dock,.app.is-result .camera-dock{display:none}
.result-controls{right:12px;z-index:6}

.switch-camera{grid-column:1;grid-row:1}.camera-controls,.new-look{grid-row:1}
.result-controls{grid-template-columns:minmax(0,360px);grid-template-rows:60px;justify-content:center}

/* Fixed photo preview keeps captured pixels visible, with Save outside it. */
.app.is-result{--result-top:calc(env(safe-area-inset-top) + 58px);--result-bottom:calc(env(safe-area-inset-bottom) + 76px)}
.app.is-result .topbar{height:var(--result-top);padding:calc(env(safe-area-inset-top) + 7px) max(12px,env(safe-area-inset-right)) 7px max(12px,env(safe-area-inset-left));display:flex;align-items:center;gap:12px;background:#171411}
.app.is-result .topbar-title{display:block;font-size:16px;font-weight:650;color:#fff8ef}
.app.is-result .stage{inset:var(--result-top) max(12px,env(safe-area-inset-right)) var(--result-bottom) max(12px,env(safe-area-inset-left))}
.app.is-result .viewfinder{border-radius:14px;overflow:hidden}
.app.is-result .result-controls{inset:auto max(12px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px,env(safe-area-inset-left));height:76px;max-width:480px;margin:0 auto;padding:8px 0 12px;grid-template-columns:minmax(0,1fr);grid-template-rows:52px;gap:0;background:#171411;align-items:center}
.app.is-result .result-controls .save-button{height:52px;min-height:44px;grid-column:1;grid-row:1;font-size:14px}

.toast{pointer-events:none}

/* Client approval pass: compact corner artwork and native zoom. */
.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}
.welcome-art{width:min(85%,380px);max-height:42dvh;object-fit:contain}
@media(orientation:landscape){.welcome-art{width:100%;max-height:65dvh}}
@media(orientation:landscape) and (max-height:500px){.app.is-result{--result-bottom:calc(env(safe-area-inset-bottom) + 60px)}.app.is-result .result-controls{height:60px;grid-template-rows:44px}}

.group-status{top:calc(env(safe-area-inset-top) + 12px)}
/* Compact recognition badge stays outside the centred masthead on narrow screens. */
.group-status{width:82px;padding:5px 8px;font-size:12px;line-height:16px;text-align:center}

/* A single contained campaign scene keeps the masthead central and artwork dispersed. */
html,body{width:100%;height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow:hidden;overscroll-behavior:none;touch-action:pan-x}
body{position:fixed;inset:0}
.stage,.viewfinder,.start-panel,.photo-save-dialog{touch-action:none;overscroll-behavior:none}
.hat-carousel,.hat-option,.app{touch-action:pan-x}
.photo-save-dialog{overflow:hidden}
.start-panel{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;justify-items:stretch;align-items:stretch;gap:8px;padding:calc(env(safe-area-inset-top) + 12px) max(16px,env(safe-area-inset-left),env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 16px) max(16px,env(safe-area-inset-left),env(safe-area-inset-right));background:#fff4e5}
/* One SVG coordinate space keeps every rotated character inside a shared safe
   envelope. Browsers only fit this complete scene; they never size four
   percentage-positioned SVGs independently. */
.welcome-hero{position:relative;min-width:0;min-height:0;width:100%;max-width:560px;justify-self:center;overflow:hidden}
.welcome-artwork{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:100%;max-height:100%;fill:none;stroke:none;overflow:hidden}
.welcome-artwork .hero-character,.welcome-artwork .welcome-masthead{fill:none;stroke:none;overflow:hidden}
.welcome-brand{display:flex;align-items:center;justify-content:center;gap:15px;min-height:44px}
.welcome-brand:before,.welcome-brand:after{content:"";width:35px;height:1px;background:linear-gradient(90deg,transparent,#c7a57580)}
.welcome-brand:after{transform:rotate(180deg)}
.welcome-brand img{display:block;width:72px;height:46px;object-fit:contain}
.app.is-start .topbar{display:none}
.start-panel>.welcome-action{position:relative;z-index:1;width:100%;max-width:400px;justify-self:center;padding:4px 8px 0;background:none}
.start-button{height:56px;border-radius:18px;font-size:17px;box-shadow:0 3px 12px #55372f14}
.welcome-footer{margin-top:12px;padding:9px 12px 10px;border:1px solid #ffffff70;border-radius:15px;background:#fff4e570;box-shadow:inset 0 1px 0 #ffffff35;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);isolation:isolate}
.welcome-footer .privacy-note{display:flex;align-items:center;justify-content:center;gap:5px;margin:0;padding:0 0 8px;font-size:10px;line-height:14px;color:#816d5c;text-align:center;text-wrap:balance}
.privacy-note svg{width:12px;height:12px;flex:none;stroke-width:1.7}
.welcome-legal{display:flex;align-items:center;justify-content:center;gap:9px;max-width:330px;margin:0 auto;padding-top:8px;border-top:1px solid #bda6832b;background:none}
.legal-marks{display:block;width:58px;height:auto;flex:none}
.welcome-legal .legal-copy{margin:0;padding:0;color:#4c4036;font-family:Arial,Helvetica,sans-serif;font-size:8.5px;font-weight:500;line-height:1.3;text-align:left;letter-spacing:0;text-wrap:pretty}
.legal-copy span{display:block}
@supports not ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){.welcome-footer{background:#fff4e5d9}}
@media(max-width:350px){.welcome-footer{padding:8px}.welcome-footer .privacy-note{font-size:9px;gap:4px}.legal-marks{width:48px}.welcome-legal{gap:7px}.welcome-legal .legal-copy{font-size:8px}}
@media(max-height:550px) and (orientation:portrait){.welcome-brand img{width:60px;height:38px}.welcome-brand{min-height:38px}.start-panel{gap:4px}.welcome-footer{margin-top:8px}.start-button{height:50px}.welcome-footer .privacy-note{padding-bottom:6px}.welcome-legal{padding-top:6px}}
@media(orientation:landscape){
 .start-panel{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:8px 24px;padding:calc(env(safe-area-inset-top) + 16px) max(24px,env(safe-area-inset-left),env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 12px) max(24px,env(safe-area-inset-left),env(safe-area-inset-right))}
 .start-panel>.welcome-brand{grid-column:2;grid-row:1}.start-panel>.welcome-hero{grid-column:1;grid-row:1/3}.start-panel>.welcome-action{grid-column:2;grid-row:2;align-self:end;padding:0}.start-button{height:50px}
 .welcome-footer{margin-top:10px;padding:8px}.welcome-footer .privacy-note{font-size:9px}.welcome-legal{gap:7px}.legal-marks{width:48px}.welcome-legal .legal-copy{font-size:8px}
}
.camera-dock{bottom:calc(env(safe-area-inset-bottom) + var(--legal-height,16px) + 8px)}

@media(orientation:landscape) and (max-height:500px){.app.is-result{--result-top:calc(env(safe-area-inset-top) + 52px);--result-bottom:calc(env(safe-area-inset-bottom) + 60px)}.app.is-result .result-controls{height:60px;grid-template-rows:44px;padding:4px 0 8px}.app.is-result .result-controls .save-button{height:44px}}

.welcome-footer .legal-short{margin:5px 0 0;padding:0;color:#4c4036;font:9px/1.3 Arial,Helvetica,sans-serif;text-align:center;letter-spacing:0}

/* Blend the supplied JPEG paper into the retained cream backdrop. */
.welcome-masthead{mix-blend-mode:multiply}

/* Two balanced groups on a subtly deeper beige footer. */
.welcome-footer{margin-top:12px;padding:10px 14px 16px;border:0;border-radius:15px;background:#f9eddd;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.welcome-legal{flex-direction:row;align-items:center;justify-content:space-between;gap:20px;width:100%;max-width:none;margin:0;padding:0 0 0 8px;border:0}
.welcome-legal .legal-marks{width:132px;max-width:44%;height:auto;flex:0 1 auto}
.welcome-legal .legal-copy{flex:0 1 auto;min-width:0;margin:0;text-align:right;font-size:9px;line-height:1.4;color:#514438;text-wrap:balance}
@media(max-width:350px){.welcome-footer{padding:10px 12px 15px}.welcome-legal{gap:14px}.welcome-legal .legal-marks{width:116px}.welcome-legal .legal-copy{font-size:8.5px}}
@media(orientation:landscape){.welcome-legal{gap:14px}.welcome-footer{padding:10px 12px 15px}}

/* Camera-loading privacy message. */
.tracking-status{flex-direction:column;align-items:center;gap:6px}
#loadingPrivacy{display:block;font-size:11px;font-weight:400;line-height:1.45;color:#fff9efdd;text-wrap:balance}
@media(max-height:550px){.welcome-footer{margin-top:12px}}

/* A quiet reassurance above the retained horizontal brand and copyright row. */
.welcome-footer .privacy-note{margin:0 0 14px;padding:0 0 10px;border-bottom:1px solid #80694f24;color:#6e5b49;font-size:10px;line-height:1.4;font-weight:400;letter-spacing:0}
@media(max-width:350px),(orientation:landscape){.welcome-footer .privacy-note{font-size:9px;margin-bottom:13px}}

/* Client feedback: retain artwork and scale; move brand marks to opposite corners. */
.welcome-brand{width:100%;justify-content:space-between;align-items:center;gap:20px;min-height:46px;padding-bottom:18px}
.welcome-brand:before,.welcome-brand:after{content:none}
.welcome-cobrand-group{position:relative;width:164.16px;max-width:calc(72% - 66.24px);flex:none}
.welcome-cobrand{display:block;width:100%;max-width:none;height:auto;fill:none;stroke:none}
.welcome-action>.welcome-legal{position:static;justify-content:center;padding:0;margin:12px 0 0}
.welcome-action>.welcome-legal .legal-copy{text-align:center;font-size:8px;line-height:1.4}
@media(orientation:landscape){.start-panel>.welcome-brand{grid-column:1/-1;grid-row:1}.start-panel>.welcome-hero{grid-column:1;grid-row:2}}

/* Keep privacy boxed, with the copyright centered separately below it. */
.welcome-footer{padding:12px 14px}
.welcome-footer .privacy-note{margin:0;padding:0;border:0}