/* Web-only controls around the installation's unchanged 960 × 720 stage. */
html[data-host=web] body{background:#fff}
html[data-host=web] .review-header,html[data-host=web] .review-controls,html[data-host=web] #lab-gear{display:none!important}
html[data-host=web] body.focus #review{height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 0 28px}
html[data-host=web] body.focus #viewport{width:min(100vw,1280px,calc((100svh - 100px)*4/3));height:auto;aspect-ratio:4/3;margin:0 auto;flex:none;transition:opacity .6s ease}
html[data-host=web] #stage{opacity:0;transition:opacity .65s ease}
html[data-host=web] .web-ready #stage{opacity:1}
html[data-host=web] #web-actions{position:relative;z-index:5;text-align:center;min-height:42px;margin-top:-12px}
html[data-host=web] #web-share{display:block;margin:8px auto 0;padding:5px 8px;border:0;background:transparent;color:#596578;text-decoration:underline;text-underline-offset:3px;font-size:12px}
html[data-host=web] #web-share:hover{color:#27334c;background:transparent}
html[data-host=web] #web-actions[hidden],html[data-host=web] [hidden]{display:none!important}
html[data-host=web] body[data-web-phase=idle] #web-actions{position:fixed;top:min(calc(86svh - 31.2px),calc(65svh + 14vw - 14.4px));left:0;right:0;margin:0;animation:experience-entry-in .45s .25s both}
html[data-host=web] #web-all-characters{position:fixed;z-index:12;top:16px;left:20px;display:grid;place-items:center;width:42px;height:42px;color:#596578;text-decoration:none}
html[data-host=web] #web-all-characters svg{width:24px;height:24px}
html[data-host=web] #web-all-characters:hover{color:#27334c}
html[data-host=web] #web-all-characters:focus-visible{outline:2px solid #8793a0;outline-offset:4px}
html[data-host=web] #web-all-characters[hidden]{display:none!important}
html[data-host=web] #stage[data-phase=success] #prompt-icon{display:grid;place-items:center}
html[data-host=web] #stage[data-phase=success] #prompt-icon svg{display:block;width:1em;height:1em;overflow:visible}
html[data-host=web] #web-status{max-width:360px;margin:8px auto 0;color:#7b8492;font-size:13px;line-height:1.5;padding:0 16px}
html[data-host=web] #web-status:empty{display:none}
html[data-host=web] #web-profile-mobile{width:min(100% - 40px,340px)}
html[data-host=web] #camera>img,html[data-host=web] #camera>video{object-fit:contain;object-position:center}
html[data-host=web] #reveal-claim{pointer-events:auto;filter:none}
html[data-host=web] .claim-label{letter-spacing:0;font-size:17px;color:#8190a0}
html[data-host=web] .guest-note{position:absolute;width:205px;max-width:205px;transform:translateX(-50%);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:#718092;font-size:12px;line-height:1.25;text-align:center;overflow-wrap:anywhere;pointer-events:none;transition:opacity .3s ease}
html[data-host=web] .guest-note[hidden]{display:none!important}
html[data-host=web] #loading{z-index:10;display:flex;align-items:center;justify-content:center}
html[data-host=web] body[data-web-phase=creation] #stage,html[data-host=web] body[data-web-phase=error] #stage{overflow:visible}
html[data-host=web] body[data-web-phase=creation] #review,html[data-host=web] body[data-web-phase=error] #review{height:100svh;min-height:100svh;padding:0}
html[data-host=web] body[data-web-phase=creation] #viewport,html[data-host=web] body[data-web-phase=error] #viewport{width:100vw;height:100svh;aspect-ratio:auto}
html[data-host=web] body[data-web-phase=creation] #web-actions,html[data-host=web] body[data-web-phase=error] #web-actions{display:none!important}
html[data-host=web] .web-phone #reveal-claim{position:static;transform:none;width:100%;margin:0 auto}
html[data-host=web] .web-phone[data-web-phase=reveal] #review,html[data-host=web] .web-phone[data-web-phase=result] #review{justify-content:flex-start;padding-top:16px}
html[data-host=web] .web-phone #web-profile-mobile:has(#reveal-claim:not([hidden])){margin-top:-12px;margin-bottom:12px}
@media(prefers-reduced-motion:reduce){html[data-host=web] #stage{transition:none}}

/* The hosted camera has one capture action; review appears only after capture. */
html[data-host=web] #web-camera-panel{position:fixed;inset:0;z-index:30;background:#fff;padding:max(12px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}
html[data-host=web][data-capture-mode=desktop-web] #web-camera-panel{display:none!important}
html[data-host=web] .web-camera-header{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;min-height:52px}
html[data-host=web] .web-camera-header button{display:grid;place-items:center;width:44px;height:44px;border:0;padding:10px;background:transparent;color:#27334c;border-radius:50%}
html[data-host=web] .web-camera-header svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html[data-host=web] #web-camera-guidance{margin:0;text-align:center;font:500 15px/1.4 system-ui;color:#27334c}
html[data-host=web] .web-camera-preview{display:grid;place-items:center;flex:1;min-height:0;width:100%;overflow:hidden}
html[data-host=web] #web-camera-frame{position:relative;max-width:100%;max-height:100%}
html[data-host=web] #web-camera-preview,html[data-host=web] #web-camera-photo{display:block;width:100%;height:100%;object-fit:contain}
html[data-host=web] #web-camera-preview{transform:scaleX(-1)}
html[data-host=web] #web-camera-preview[data-facing=environment]{transform:none}
html[data-host=web] #web-camera-countdown{position:absolute;inset:0;display:grid;place-items:center;font:600 88px system-ui;color:#fff;text-shadow:0 2px 16px #27334c;pointer-events:none}
html[data-host=web] .web-camera-controls{display:flex;justify-content:center;align-items:center;gap:20px;min-height:76px;flex:none}
html[data-host=web] .web-camera-controls button{font:500 16px system-ui;min-height:48px;padding:12px 22px;border:0;border-radius:28px;background:transparent;color:#27334c}
html[data-host=web] #web-take-photo{width:72px;height:72px;border:2px solid #27334c;border-radius:50%;padding:5px;background:#fff}
html[data-host=web] #web-take-photo span{display:block;width:100%;height:100%;background:#27334c;border-radius:50%}
html[data-host=web] #web-use-photo{background:#e8ebef}
html[data-host=web] #web-cancel-timer,html[data-host=web] #web-use-photo,html[data-host=web] #web-retake-photo{display:none}
html[data-host=web] #web-camera-panel[data-timer=true] #web-take-photo,html[data-host=web] #web-camera-panel[data-review=true] #web-take-photo,html[data-host=web] #web-camera-panel[data-review=true] #web-switch-camera{display:none}
html[data-host=web] #web-camera-panel[data-timer=true] #web-cancel-timer,html[data-host=web] #web-camera-panel[data-review=true] #web-use-photo,html[data-host=web] #web-camera-panel[data-review=true] #web-retake-photo{display:block}
html[data-host=web] #web-camera-panel[data-review=true] #web-cancel-timer{display:none}
@media(max-height:440px){html[data-host=web] #web-camera-panel{gap:4px;padding:4px 12px 8px}html[data-host=web] .web-camera-header{min-height:44px}html[data-host=web] .web-camera-controls{min-height:52px}html[data-host=web] #web-take-photo{width:50px;height:50px}}

/* Phone variants share the native, uncropped frame and the same shutter/review. */
html[data-host=web] #web-camera-panel[data-camera-mobile=true]{background:#000;color:#fff;padding: max(8px,env(safe-area-inset-top)) 0 max(16px,env(safe-area-inset-bottom));gap:8px}
html[data-host=web] #web-camera-panel[data-camera-mobile=true] .web-camera-header{padding:0 12px}
html[data-host=web] #web-camera-panel[data-camera-mobile=true] .web-camera-header button,html[data-host=web] #web-camera-panel[data-camera-mobile=true] #web-camera-guidance,html[data-host=web] #web-camera-panel[data-camera-mobile=true] .web-camera-controls button{color:#fff}
html[data-host=web] #web-camera-panel[data-camera-mobile=true] #web-camera-guidance{font-size:14px}
html[data-host=web] #web-camera-panel[data-camera-mobile=true] #web-take-photo{border-color:#fff;background:#000}
html[data-host=web] #web-camera-panel[data-camera-mobile=true] #web-take-photo span{background:#fff}
html[data-host=web] #web-camera-panel[data-camera-mobile=true] #web-use-photo{background:#fff;color:#111}
html[data-host=web] #web-camera-panel[data-camera-mobile=true][data-camera-ui=snap]{padding:0;display:grid;grid-template-rows:minmax(0,1fr)}
html[data-host=web] #web-camera-panel[data-camera-mobile=true][data-camera-ui=snap] .web-camera-preview{grid-area:1/1;width:100%;height:100%}
html[data-host=web] #web-camera-panel[data-camera-mobile=true][data-camera-ui=snap] .web-camera-header{position:absolute;top:0;left:0;right:0;z-index:3;padding-top:max(12px,env(safe-area-inset-top));background:linear-gradient(#0009,transparent);padding-bottom:24px}
html[data-host=web] #web-camera-panel[data-camera-mobile=true][data-camera-ui=snap] .web-camera-controls{grid-area:1/1;align-self:end;z-index:2;padding:24px 12px max(24px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#0009)}
html[data-host=web] #web-camera-panel[data-camera-mobile=true][data-camera-ui=snap] #web-take-photo{background:#0002}
html[data-host=web] #web-camera-panel[data-camera-mobile=true][data-camera-ui=snap] .web-camera-header button{background:#0004}

/* Shutter means now; the quiet toggle explicitly opts into a countdown. */
html[data-host=web] #web-timer-toggle{font-size:12px;padding:8px;min-height:44px}
html[data-host=web] #web-timer-toggle[aria-pressed=true]{text-decoration:underline;text-underline-offset:4px}
html[data-host=web] #web-shutter-symbol{display:grid;place-items:center;color:#fff;font:600 17px system-ui}
html[data-host=web] #web-camera-panel[data-camera-mobile=true] #web-shutter-symbol{color:#111}
html[data-host=web] #web-camera-panel:is([data-review=true],[data-timer=true]) #web-timer-toggle{display:none}
html[data-host=web] .web-details-active #web-all-characters{display:none}
@media(prefers-reduced-motion:reduce){html[data-host=web] *{animation-duration:.001ms!important;transition-duration:.001ms!important}}
html[data-host=web] #web-failure{position:fixed;inset:0;z-index:25;display:grid;place-items:center;background:#fff;padding:32px 24px;text-align:center;color:#344156}
html[data-host=web] #web-failure>div{width:100%;max-width:360px}
html[data-host=web] #web-failure h1{font:500 24px/1.3 system-ui;margin:0 0 16px}
html[data-host=web] #web-failure p{font:400 16px/1.6 system-ui;margin:0 0 24px;overflow-wrap:anywhere}
html[data-host=web] .web-failure-gallery{display:block;color:#596578;margin:20px auto 0;padding:12px;width:fit-content}
html[data-host=web] body[data-web-failure=true] #stage{visibility:hidden}

/* The loader belongs to the viewport, outside the fitted installation stage. */
html[data-host=web] #loading{position:fixed;inset:0 0 auto;height:100svh;z-index:50}
html[data-host=web] #web-actions{display:flex;flex-direction:column;align-items:center;gap:0}
html[data-host=web] #web-status{display:block;flex:none;width:min(100%,360px)}
html[data-host=web] #web-outfit-outline{position:absolute;inset:0;width:100%;height:100%;opacity:.68;pointer-events:none;filter:drop-shadow(0 1px 2px #0005)}
html[data-host=web] #web-camera-frame #web-camera-guidance{position:absolute;z-index:2;bottom:12px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);margin:0;padding:9px 15px;border-radius:24px;background:#fffffff2;color:#344156;font:500 14px/1.4 system-ui;box-shadow:0 2px 12px #00000012;pointer-events:none}
html[data-host=web] #web-camera-guidance:empty{display:none}
html[data-host=web] #web-camera-panel[data-review=true] #web-outfit-outline{display:none}
html[data-host=web] #web-camera-panel .web-camera-controls{gap:28px}
html[data-host=web] #web-camera-panel #web-timer-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:140px;min-height:64px;padding:10px 20px;border:1px solid #e1e5eb;border-radius:22px;background:#f7f8fa;color:#344156;font:500 16px/1.3 system-ui;text-decoration:none;box-shadow:0 2px 8px #0000000a}
html[data-host=web] #web-camera-panel #web-timer-toggle small{font:400 10px/1.2 system-ui;color:#738092;letter-spacing:.02em}
html[data-host=web] #web-camera-panel:is([data-review=true],[data-timer=true]) #web-timer-toggle{display:none}
html[data-host=web] #web-camera-panel[data-camera-mobile=true] #web-timer-toggle{background:#fffffff2;border-color:#ffffff80}
@media(max-height:440px){html[data-host=web] #web-camera-panel #web-timer-toggle{min-height:48px;border-radius:16px;padding:7px 16px}html[data-host=web] #web-camera-frame #web-camera-guidance{font-size:12px;padding:6px 12px;bottom:8px}}
html[data-host=web] #web-camera-panel[data-camera-mobile=true] #web-camera-frame #web-camera-guidance{color:#344156}