@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--ink:#17151d;--lime:#d6fc75;--muted:#a4a1ad;--panel:rgba(26,24,34,.91);--app-height:100dvh;--app-width:100%;--app-top:0px;--app-left:0px}*{box-sizing:border-box}html,body{position:fixed;inset:0;margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--ink);color:#fff;font-family:'DM Sans',sans-serif;font-size:16px}body{touch-action:none}button,a,input,label{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:0;touch-action:manipulation}button:disabled{opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #b8a3ff;outline-offset:3px}[hidden]{display:none!important}#app{position:absolute;top:var(--app-top);left:var(--app-left);height:var(--app-height);width:var(--app-width);min-height:0;overflow:hidden;isolation:isolate}#camera,#worldCamera,#freeze,#scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}#camera{background:var(--ink)}#freeze{display:none}#worldCamera{pointer-events:none}#scene{touch-action:none}#scene canvas{display:block;width:100%;height:100%}header{position:absolute;top:0;left:0;right:0;padding:max(16px,env(safe-area-inset-top)) 18px 14px;display:flex;justify-content:space-between;gap:12px;align-items:center;z-index:5;background:linear-gradient(#17151d9c,transparent);pointer-events:none}header>*{pointer-events:auto}.brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;letter-spacing:-1.5px;text-decoration:none;color:#fff;line-height:1;white-space:nowrap}.brand span{color:var(--lime)}.brand sup{font-size:27px;margin-left:4px;color:#b6a1fa;vertical-align:middle}.top-actions{display:flex;align-items:center;gap:9px}.badge{font-size:10px;letter-spacing:.7px;border:1px solid #ffffff30;border-radius:30px;padding:8px 10px;background:#17151d66;white-space:nowrap}.icon-button{border:1px solid #ffffff45;width:34px;height:34px;border-radius:50%;background:#17151d70;font-size:19px}.welcome{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);width:min(510px,calc(100% - 44px));z-index:3;text-align:center}.eyebrow{font-size:12px;font-weight:700;letter-spacing:2.2px;color:#b5a5e8}h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(43px,7vw,66px);line-height:1.03;letter-spacing:-2.6px;margin:22px 0}h1 span{color:var(--lime)}.welcome p{line-height:1.6;color:#bcb8c7;margin:0 0 26px}.primary{background:var(--lime);color:var(--ink);font-weight:700;padding:14px 22px;border-radius:14px;transition:transform .15s}.primary:active{transform:scale(.96)}.big{width:270px;max-width:100%;display:flex;justify-content:space-between;align-items:center;margin:auto;font-size:18px;padding:18px 24px}.big span{font-size:25px}.photo-link{position:relative;display:block;cursor:pointer;width:fit-content;margin:20px auto;color:#e7e1f6;font-size:14px;text-decoration:underline;text-underline-offset:5px}.photo-link input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.privacy{color:#a39bb2;font-size:12px;line-height:1.7}.error{margin-top:15px;padding:12px;background:#69354566;border:1px solid #ef7eaa;border-radius:12px;line-height:1.4;font-size:14px}.status{position:absolute;top:calc(max(16px,env(safe-area-inset-top)) + 52px);left:50%;transform:translateX(-50%);z-index:9;background:var(--panel);border:1px solid #ffffff20;padding:10px 15px;border-radius:18px;max-width:calc(100% - 28px);width:max-content;font-size:13px;text-align:center;pointer-events:none}.tap-hint{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);z-index:4;display:flex;align-items:center;flex-direction:column;text-align:center;pointer-events:none;width:max-content;max-width:80%;text-shadow:0 2px 15px #000}.tap-hint strong{font-family:'Space Grotesk';font-size:22px;margin:14px 0 6px}.tap-hint small{font-size:14px;color:#eee7f5}.tap-ring{display:grid;place-items:center;width:66px;height:66px;font-size:34px;border:2px solid var(--lime);border-radius:50%;color:var(--lime);box-shadow:0 0 0 9px #d6fc7514;background:#17151d55;animation:breathe 1.7s ease-in-out infinite}@keyframes breathe{50%{box-shadow:0 0 0 19px #d6fc7500;transform:scale(.95)}}.tap-progress{position:absolute;z-index:8;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;gap:8px;pointer-events:none}.tap-progress>span:last-child{font-size:12px;white-space:nowrap;padding:6px 10px;border-radius:14px;background:#17151dd9}.spinner{display:block;width:42px;height:42px;border:3px solid #d6fc7530;border-top-color:var(--lime);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#sideTools{position:absolute;right:14px;top:calc(max(16px,env(safe-area-inset-top)) + 64px);z-index:5;display:flex;gap:7px;flex-direction:column}#sideTools button{background:#17151da8;backdrop-filter:blur(12px);border:1px solid #ffffff25;border-radius:14px;width:47px;height:50px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px}#sideTools button>span{font-size:21px;line-height:1}#sideTools small{font-size:10px}#sideTools button.active{border-color:var(--lime);color:var(--lime)}.bottom-ui{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:min(540px,100%);padding:12px 14px max(12px,env(safe-area-inset-bottom));z-index:6;pointer-events:none;background:linear-gradient(transparent,#0005)}.bottom-ui>*{pointer-events:auto}.collection{margin-bottom:9px}#cutoutTray{display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x;width:100%;padding:2px}#cutoutTray button{width:43px;height:45px;border-radius:11px;background:#302d3bd9;border:1px solid #ffffff40;padding:4px;flex-shrink:0}#cutoutTray button.active{border-color:var(--lime)}#cutoutTray img{width:100%;height:100%;object-fit:contain}.clone-panel{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:6px;background:var(--panel);border:1px solid #ffffff25;border-radius:16px;margin-bottom:8px;backdrop-filter:blur(16px)}.clone-panel button{min-height:39px;padding:8px 10px;background:transparent;border-radius:10px;font-size:13px;white-space:nowrap}.clone-panel button:active{background:#ffffff18}#effectButton{color:var(--lime)}#duplicateClone{background:#d6fc7515;color:var(--lime)}#closeControls{font-size:21px}#depthPanel{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid #ffffff25;border-radius:14px;padding:12px;margin-bottom:8px;font-size:12px}input[type=range]{accent-color:var(--lime);height:24px;cursor:pointer;min-width:30px;flex:1;touch-action:none}.play-hint{pointer-events:none;text-align:center;text-shadow:0 1px 8px #000;padding:6px 0}.play-hint strong{display:block;font-size:15px}.play-hint small{display:block;font-size:12px;color:#ded9e5;margin-top:4px}.footer-line{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:7px;font-size:12px}.text-button{background:#17151d77;border-radius:20px;font-size:12px;padding:8px 12px;color:#e8e2f0}#handHint{background:#17151d99;border:1px solid #ffffff1c;border-radius:20px;max-width:80%;font-size:12px;padding:8px 11px;color:#e8e2f0}#handCursor{position:absolute;width:30px;height:30px;border:2px solid var(--lime);border-radius:50%;pointer-events:none;z-index:7;display:none;box-shadow:0 0 20px #d6fc7560}#handCursor.pinching{background:var(--lime);transform:scale(.7)}#flash{position:absolute;inset:0;background:#d6fc75;opacity:0;pointer-events:none;z-index:8}#flash.pop{animation:flash .3s ease-out}@keyframes flash{0%{opacity:.2}100%{opacity:0}}dialog{color:#f4efff;background:#24212d;border:1px solid #ffffff30;border-radius:24px;width:min(490px,calc(100% - 28px));max-height:80dvh;padding:28px;box-shadow:0 25px 100px #0009;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}dialog::backdrop{background:#0c0917b3;backdrop-filter:blur(6px)}.dialog-close{position:absolute;right:16px;top:10px;font-size:30px;background:transparent;color:#c8bfdc}dialog h2{font:600 30px 'Space Grotesk';letter-spacing:-1px;margin:15px 0 20px}dialog ol{padding-left:22px}dialog li{margin:0 0 15px;padding-left:5px;font-size:15px;line-height:1.5;color:#c4bccf}dialog li strong{color:#fff}dialog h3{font-size:17px;margin:24px 0 8px}dialog p{font-size:14px;color:#bdb5ca;line-height:1.6}dialog a{color:var(--lime)}.fine-print{font-size:12px!important}.secondary{padding:12px;background:#d6fc7520;border:1px solid #d6fc7580;border-radius:12px}body.xr,body.xr #app{background:transparent}body.xr #camera,body.xr #freeze,body.xr #worldCamera{display:none!important}body.xr #saveButton,body.xr #motionButton{display:none}@media(min-width:900px){.welcome{text-align:left;left:13%;transform:translateY(-50%);width:550px}.welcome h1{font-size:76px}.welcome .big,.welcome .photo-link{margin-left:0}.welcome:after{content:'✳︎';position:fixed;left:55vw;top:0;font-size:280px;line-height:1;color:var(--lime);transform:rotate(-15deg);pointer-events:none}header{padding-left:28px;padding-right:28px}.bottom-ui{padding-bottom:20px}}@media(max-width:360px){header{padding-left:12px;padding-right:12px}.brand{font-size:23px}.badge{font-size:9px;padding:7px}.top-actions{gap:6px}.clone-panel button{padding:7px;font-size:12px}.footer-line{gap:4px}#handHint{font-size:11px;padding:8px}.text-button{padding:8px}}@media(max-height:580px){.welcome h1{font-size:40px;margin:14px 0}.welcome p{margin-bottom:16px;font-size:14px}.welcome .big{padding:12px 20px}.welcome .photo-link{margin:12px auto}.privacy{font-size:11px}.collection{margin-bottom:4px}#cutoutTray button{height:33px;width:34px}.play-hint small{display:none}.footer-line{margin-top:3px}.bottom-ui{padding-top:4px}.clone-panel{margin-bottom:3px}.tap-hint{top:37%}.tap-ring{width:44px;height:44px;font-size:25px}.tap-hint strong{font-size:18px;margin-top:10px}#sideTools{gap:5px}#sideTools button{height:42px}}@media(max-height:400px){.welcome{top:53%;width:90%}.welcome h1{font-size:31px;display:inline-block;margin:10px 20px 10px 0}.welcome p,.welcome .privacy,.welcome .eyebrow{display:none}.welcome .big{display:inline-flex;width:180px;vertical-align:middle}.welcome .photo-link{margin:6px auto}.bottom-ui{width:460px;max-width:80%}.play-hint{display:none}.tap-hint small{display:none}#sideTools{top:62px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition:none!important}}

#handCursor{background:radial-gradient(circle,transparent 25%,#d6fc7518 26%);border-width:2px}#handCursor:after{content:'';position:absolute;left:50%;top:100%;height:18px;border-left:1px dashed #d6fc75aa;transform:translateX(-50%)}#handCursor.pinching{transform:scale(.87);background:#d6fc7540;box-shadow:0 0 24px #d6fc75a0}

.privacy{margin-top:20px}#cutoutTray{padding:9px 4px 3px;gap:9px}.tray-item{position:relative;flex:0 0 auto}#cutoutTray .preview-button{width:45px;height:47px}#cutoutTray .preview-delete{position:absolute;right:-5px;top:-7px;width:22px;height:22px;padding:0;border-radius:50%;display:grid;place-items:center;background:#25232e;border:1px solid #ffffff70;font-size:17px;line-height:1;color:#fff}#sideTools .record-icon{display:block;width:17px;height:17px;border-radius:50%;background:#ff607b;box-shadow:0 0 0 3px #ff607b25}#sideTools .recording{border-color:#ff607b;color:#ff96a8}#sideTools .recording .record-icon{border-radius:4px;width:14px;height:14px}#recordPreview{display:block;width:100%;max-height:48dvh;border-radius:12px;background:#111;touch-action:manipulation}#recordDialog .primary{width:100%}@media(max-height:580px){#cutoutTray .preview-button{width:34px;height:35px}.privacy{margin-top:12px}}

/* Small vector gestures stay sharp without downloading animation libraries. */
.gesture-demo{display:grid;place-items:center;width:82px;height:82px;color:var(--lime);border:1px solid #d6fc7545;border-radius:24px;background:linear-gradient(145deg,#25232cc9,#17151d85);box-shadow:inset 0 1px 0 #ffffff19,0 8px 32px #0002}
.gesture-demo svg{width:66px;height:66px;overflow:visible}
.demo-pinch{display:none}.tap-hint[data-gesture=pinch] .demo-tap{display:none}.tap-hint[data-gesture=pinch] .demo-pinch{display:block}
.tap-hand{animation:demo-tap 2.4s ease-in-out infinite;transform-origin:44px 65px}.touch-ripple{animation:demo-ripple 2.4s ease-out infinite;transform-origin:44px 24px}
.index-finger{animation:demo-index 2.6s ease-in-out infinite;transform-origin:74px 44px}.thumb-finger{animation:demo-thumb 2.6s ease-in-out infinite;transform-origin:53px 78px}.pinch-spark{animation:demo-spark 2.6s ease-in-out infinite;transform-origin:23px 38px}
@keyframes demo-tap{0%,65%,100%{transform:translateY(5px)}25%,40%{transform:translateY(0)}}
@keyframes demo-ripple{0%,20%{opacity:0;transform:scale(.5)}35%{opacity:.8}65%,100%{opacity:0;transform:scale(1.6)}}
@keyframes demo-index{0%,80%,100%{transform:translateY(0)}35%,55%{transform:translateY(10px)}}
@keyframes demo-thumb{0%,80%,100%{transform:translateY(0)}35%,55%{transform:translateY(-10px)}}
@keyframes demo-spark{0%,25%,75%,100%{opacity:0;transform:scale(.5)}40%,55%{opacity:.85;transform:scale(1)}}
#app[data-hero=true] .play-hint{visibility:hidden}
#app[data-guidance=hidden] .tap-hint{display:none}
#handCursor{transition:background .15s,box-shadow .15s,border-color .15s}
.tap-hint{max-width:min(76%,360px)}.tap-hint small{line-height:1.5}.tap-hint strong{line-height:1.2}
@media(max-height:580px){.gesture-demo{width:54px;height:54px;border-radius:17px}.gesture-demo svg{width:46px;height:46px}.tap-hint small{font-size:12px}}
@media(prefers-reduced-motion:reduce){.gesture-demo *{animation:none!important}.touch-ripple,.pinch-spark{opacity:.55}}

#handCursor.over-clone{border-color:#b8a3ff;box-shadow:0 0 0 5px #b8a3ff20,0 0 22px #b8a3ff70}