:root{--red:#8d292d;--ink:#26392e;--paper:#fbf8f0}*{box-sizing:border-box}body{margin:0;background:#202420;color:var(--ink);font:15px Arial,sans-serif;min-height:100dvh;display:grid;place-items:center}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #c79d50;outline-offset:4px}.stage{height:100dvh;width:min(100vw,56.25dvh);aspect-ratio:9/16;position:relative;background:#e7e7e7;overflow:hidden;isolation:isolate;container-type:inline-size}#santaPortrait{position:absolute;width:100%;height:74%;top:9%;object-fit:contain;object-position:center bottom}.topline{position:absolute;top:2%;left:4%;width:92%;display:flex;align-items:center;justify-content:space-between;z-index:12}.topline>span{font-size:2cqw;letter-spacing:.28em;text-transform:uppercase}.utility{border:0;background:#ffffff9c;color:var(--ink);width:9cqw;height:9cqw;min-width:36px;min-height:36px;border-radius:50%;font-size:5cqw}.welcome{position:absolute;top:6.5%;width:100%;text-align:center;pointer-events:none}.welcome p{font-size:1.7cqw;letter-spacing:.24em;margin:0 0 1.5cqw}.welcome h1{font:5.5cqw Georgia,serif;margin:0}.welcome em{color:var(--red);font-weight:normal}.caption{position:absolute;bottom:4%;width:100%;text-align:center;background:linear-gradient(transparent,#e7e7e7 27%);padding:6cqw 5cqw 0}.caption h2{font:5cqw Georgia;margin:0 0 1.5cqw}.caption p{font-size:2.3cqw;margin:0 0 3cqw;color:#5b665c}.primary{border:0;border-radius:6px;background:var(--red);color:#fff9ef;min-height:56px;padding:3.5cqw 6cqw;font-size:3cqw;letter-spacing:.025em}.primary span{margin-left:5cqw}.primary:disabled{opacity:.6}.textbutton{border:0;background:none;color:var(--ink);padding:3cqw;font-size:2.4cqw}.caption .textbutton{display:block;margin:0 auto;padding-bottom:0}.secondary{border:1px solid #c6c7bc;background:var(--paper);color:var(--ink);border-radius:5px;padding:3.5cqw;font-size:2.6cqw}#status{position:absolute;bottom:1%;width:92%;left:4%;text-align:center;font-size:1.8cqw;line-height:1.4;z-index:11;background:#e7e7e7c4;border-radius:3px}#camera,#clip,#result{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}#camera{z-index:2}#clip{z-index:8;object-fit:contain;background:#e7e7e7}#santaOverlay{position:absolute;z-index:3;right:-2%;bottom:12.5%;width:78%;height:78%;object-fit:contain;object-position:center bottom}#poseGuide{position:absolute;z-index:4;top:12%;left:5%;width:90%;text-align:center;color:white;font-size:2.5cqw;text-shadow:0 1px 5px black}#poseGuide span{padding:2cqw;background:#26392eb0;border-radius:6px}#countdown{position:absolute;z-index:9;inset:0;display:grid;place-items:center;font:28cqw Georgia;color:white;text-shadow:0 2px 25px #0007}#countdown[hidden]{display:none}#result{z-index:10;object-fit:contain;height:87%;background:#e7e7e7}#resultActions{position:absolute;z-index:11;bottom:3%;width:100%;height:10%;display:flex;justify-content:center;align-items:center;gap:2cqw;background:#e7e7e7}#resultActions[hidden]{display:none}#resultActions .primary{padding:3.5cqw}#flash{position:absolute;inset:0;background:white;z-index:15;opacity:0;pointer-events:none}.flashing{animation:flash .4s ease-out}@keyframes flash{from{opacity:1}to{opacity:0}}body.running .welcome,body.running .caption{display:none}body.has-result .topline{background:#e7e7e7d0;border-radius:30px}body.demo .stage{background:radial-gradient(ellipse at center,#eef1eb,#b7c6b5)}.hint,small{font-size:12px;line-height:1.6;color:#657160}dialog{color:var(--ink);border:0;border-radius:12px;max-width:480px;width:94%;padding:24px;max-height:92dvh}dialog::backdrop{background:#13251ed9;backdrop-filter:blur(4px)}.dialog-top{display:flex;align-items:center;justify-content:space-between}.dialog-top h2{font:27px Georgia}.dialog-top .utility{font-size:24px;width:40px;height:40px}dialog label{display:block;font-size:13px;margin:20px 0 8px}dialog input:not([type=checkbox]),dialog select{display:block;width:100%;padding:12px;border:1px solid #d4d9ce;border-radius:4px;margin-top:8px;background:#faf9f5}dialog .check{display:flex;gap:10px;align-items:center}dialog .primary,dialog .secondary{font-size:14px;padding:15px 20px}dialog .textbutton{font-size:12px;padding:12px 0}.notice{font-size:12px;line-height:1.6;background:#f4f1e8;padding:12px}fieldset{border:1px solid #d4d9ce;border-radius:6px;margin-top:22px;padding:15px}legend{font-size:14px}#audioStatus{font-size:12px;line-height:1.6}[hidden]{display:none!important}@media(max-aspect-ratio:9/16){.stage{width:100vw;height:177.7778vw}}@media(min-width:900px) and (orientation:portrait){.primary{min-height:90px}}

body.running #santaPortrait{visibility:hidden}

/* Black stage keeps the display edges invisible inside the Holobox. */
.stage{background:#000;color:#fff4df}#santaPortrait{display:none}#idleSanta{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}#clip{background:#000}.caption{background:linear-gradient(transparent,#000 32%)}.caption p{color:#e1d6c4}.welcome{top:8%}.welcome em{color:#f0c16d}.topline .utility{background:#ffffff20;color:#fff4df}.caption .textbutton{color:#eee0c7}#status{background:#000b;color:#eee0c7}body.greeting #welcome,body.greeting #caption,body.greeting #idleSanta,body.running #idleSanta{visibility:hidden}body.greeting #status{bottom:2%}body.demo .stage{background:#000}

#shotProgress{position:absolute;z-index:9;top:6%;left:25%;width:50%;padding:12px;text-align:center;border-radius:30px;background:#fff8eb;color:#8d292d;font-size:3cqw}body.has-result #result{top:7%;left:4%;width:43%;height:70%;object-fit:contain;background:#000}#sharePanel{position:absolute;top:20%;right:4%;width:46%;z-index:11;text-align:center;color:#fff3d9}#sharePanel h2{font:4.4cqw Georgia;margin:0 0 3cqw}#qrArea img{display:block;width:100%;height:auto;border-radius:8px}#shareStatus{font-size:2.3cqw;line-height:1.5}#sharePanel small{display:block;color:#dacdb4;font-size:1.9cqw;line-height:1.5}#sharePanel .secondary{font-size:2.4cqw}body.has-result #resultActions{background:#000}body.has-result #resultActions .textbutton{color:#fff3d9}

/* White Holobox opening and a portrait phone with a shared live photo compositor. */
.stage,#idleSanta,#clip{background:#fff;color:#26392e}.welcome em{color:var(--red)}.caption{background:linear-gradient(transparent,#fff 32%)}.caption p{color:#5b665c}.caption .textbutton{color:#26392e}.topline .utility{background:#eeeae3;color:#26392e}#status{background:#ffffffdd;color:#40513e}#sharePanel{color:#26392e}#sharePanel small{color:#657160}body.has-result #result,body.has-result #resultActions{background:#fff}body.has-result #resultActions .textbutton{color:#26392e}#phoneView{position:absolute;left:5%;top:16%;width:90%;height:70%;border:2.5cqw solid #242424;border-radius:9cqw;background:#171717;z-index:3;overflow:hidden;animation:phoneZoom .8s ease-out}.phoneSpeaker{width:18%;height:1%;border-radius:50px;background:#666;margin:3% auto}.phoneLabel{font-size:2cqw;letter-spacing:.13em;text-align:center;color:#fff;margin:3% 0}#selfieCanvas{display:block;width:100%;height:auto;aspect-ratio:4/3}.phoneShutter{border:1cqw solid #fff;border-radius:50%;width:12cqw;height:12cqw;margin:4cqw auto}#alignmentCanvas{display:block;width:100%;aspect-ratio:4/3;border-radius:6px;margin-bottom:12px}#poseGuide{top:11%}#shotProgress{top:7%}body.running .stage{background:#fff}#countdown{font-size:20cqw}dialog input[type=range]{padding:0!important}@keyframes phoneZoom{from{transform:scale(.2);opacity:.2}to{transform:scale(1);opacity:1}}

#shotProgress{left:9%;width:82%;font-size:2.5cqw}#poseGuide{font-size:2.2cqw}#poseGuide span{display:inline-block;max-width:100%}

/* Connected portrait selfie flow, continuous rendering and explicit camera check. */
.media-source{position:fixed!important;left:-2000px!important;top:0!important;width:320px!important;height:180px!important;display:block!important;opacity:.01;pointer-events:none}#camera{z-index:-10}#phoneView{height:auto;aspect-ratio:9/16;width:80%;left:10%;top:15%;max-height:78%;border-width:2cqw;animation:none}#selfieCanvas,#alignmentCanvas{aspect-ratio:3/4}#phoneView .phoneShutter{width:8cqw;height:8cqw;margin:2cqw auto}#phoneView .phoneLabel{margin:2cqw 0;font-size:1.8cqw}#cameraPanel{position:absolute;z-index:13;right:4%;top:13%;width:30%;background:#ffffffeb;border:1px solid #d4d8cd;border-radius:8px;overflow:hidden}#cameraCheckPreview{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#eee}#cameraCheckPreview[hidden]{display:none}#cameraState{font-size:1.8cqw;line-height:1.4;padding:1cqw;margin:0;color:#91413e}#cameraState[data-live=true]{color:#2f713f}body.running #cameraPanel,body.has-result #cameraPanel,body.greeting #cameraPanel{display:none}#enableCamera{font-size:2.5cqw;padding:3cqw;margin:0 1cqw 2cqw 0}#qrArea a{display:block;font-size:2.2cqw;padding:2cqw;color:#8d292d}.flashing{animation:gentleFlash .2s ease-out}@keyframes gentleFlash{from{opacity:.38}to{opacity:0}}#poseGuide{top:11%}

#sceneTransition{position:absolute;inset:0;width:100%;height:100%;z-index:10;pointer-events:none}body.greeting #status{visibility:hidden}

/* Portrait phone hardware and its front-camera interface. */
#phoneView{border-color:#393b40;background:#08090a;box-shadow:0 0 0 1px #131417,inset 0 0 0 1px #000}
.phoneTop{height:8.4cqw;position:relative}
#phoneView .phoneSpeaker{position:absolute;top:1.35cqw;left:45%;width:10%;height:.35cqw;margin:0;background:#313237}
.phoneLens{position:absolute;top:3.25cqw;left:calc(50% - 1.05cqw);width:2.1cqw;height:2.1cqw;border-radius:50%;background:radial-gradient(circle at 42% 40%,#455471,#12171e 40%,#060708 67%);box-shadow:0 0 0 .12cqw #262930}
.phoneControls{text-align:center;padding-top:1.15cqw;color:#f8db7d;font:600 1.65cqw/1 Arial,sans-serif;letter-spacing:.06em}
#phoneView .phoneShutter{width:8cqw;height:8cqw;margin:1.6cqw auto 2cqw;border:.5cqw solid #fff;position:relative}
.phoneShutter::after{content:"";position:absolute;inset:.45cqw;border-radius:50%;background:#fff}
.phoneControls i{display:block;width:22%;height:.5cqw;margin:0 auto;background:#e9e9ec;border-radius:20px}