.ar-shell{position:relative;width:100%;height:100dvh;min-height:280px;overflow:hidden;background:#090708;color:#fff;font-family:Inter,system-ui,sans-serif}.ar-shell *{box-sizing:border-box}.ar-shell .demo-scene,.ar-shell video{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.ar-shell video{z-index:1}.ar-shell .demo-scene{-o-object-position:50% 48%;object-position:50% 48%}.ar-shell.camera-live .demo-scene{opacity:0}.ar-shell .vignette{position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(#000a,transparent 24%,transparent 50%,#000b 85%,#000)}.ar-shell #confetti{position:absolute;z-index:7;inset:0;width:100%;height:100%;pointer-events:none}.camera-header{position:absolute;z-index:8;inset:0 0 auto;display:grid;grid-template-columns:46px 1fr 46px;align-items:center;gap:16px;padding:max(16px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left))}.camera-header h1{margin:0;text-align:center;font-size:19px;font-weight:650;letter-spacing:-.02em}.ar-shell :is(button,a):focus-visible{outline:3px solid #fff;outline-offset:4px}.ar-shell button{touch-action:manipulation}.round-control,.side-control{display:grid;place-items:center;padding:0;border:1px solid #ffffff80;border-radius:50%;background:#0e101266;color:#fff;backdrop-filter:blur(8px)}.round-control{width:46px;height:46px}.round-control svg,.side-control svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.ar-shell button:disabled{opacity:.35}.focus-frame{position:absolute;z-index:5;left:50%;top:45%;width:min(42vw,200px);aspect-ratio:2.25/1;transform:translate(-50%,-50%);pointer-events:none;opacity:0}.camera-live .focus-frame{opacity:1}.focus-frame i{position:absolute;width:22px;height:22px;border-color:#fff}.focus-frame i:nth-child(1){left:0;top:0;border-left:2px solid;border-top:2px solid}.focus-frame i:nth-child(2){right:0;top:0;border-right:2px solid;border-top:2px solid}.focus-frame i:nth-child(3){right:0;bottom:0;border-right:2px solid;border-bottom:2px solid}.focus-frame i:nth-child(4){left:0;bottom:0;border-left:2px solid;border-bottom:2px solid}.focus-frame.locked i{border-color:#9cf0a6}.camera-controls{position:absolute;z-index:9;left:50%;bottom:0;transform:translate(-50%);width:min(100%,490px);padding:0 18px max(70px,calc(env(safe-area-inset-bottom) + 58px));text-align:center}.lock-status{display:flex;align-items:center;justify-content:center;gap:8px}.lock-status strong{font-size:14px;font-weight:650}.lock-status>span{width:7px;height:7px;border-radius:50%;background:#a4aab0}.lock-status>span.live,.lock-status>span.locked{background:#93e7a6}.camera-controls>p{min-height:18px;margin:7px 0 19px;color:#d0d5d9;font-size:12px;line-height:1.5}.control-row{display:grid;grid-template-columns:1fr 76px 1fr;align-items:center;gap:28px;max-width:310px;margin:auto}.side-control{justify-self:center;width:48px;height:48px}.side-control.active{background:#fff;color:#171719}.burst-control{width:76px;height:76px;border:3px solid #fff;border-radius:50%;padding:6px;background:#ffffff0a}.burst-control span{display:block;width:100%;height:100%;border-radius:50%;background:#ed2432;box-shadow:inset 0 2px 3px #fff4;transition:transform .12s}.burst-control:active span{transform:scale(.9)}.camera-state{margin-top:20px;min-height:44px;padding:9px 21px;border:1px solid #a8b1bb;border-radius:6px;background:#17202ac9;color:#fff;font:600 13px Inter,system-ui}.camera-live .camera-state{border-color:#e88b92;color:#ffcbd0;background:#381c23c9}@media (min-width:900px) and (min-height:651px){.ar-shell .demo-scene{-o-object-fit:contain;object-fit:contain;background:#100b0d}.ar-shell .vignette{background:linear-gradient(#0008,transparent 20%,transparent 50%,#000b)}.camera-header{padding-inline:35px}.camera-controls{padding-bottom:30px}.focus-frame{width:230px}}@media (max-height:650px) and (orientation:landscape){.camera-header{right:210px;padding-top:12px}.camera-header h1{font-size:16px}.camera-controls{inset:0 0 0 auto;transform:none;width:205px;display:flex;flex-direction:column;justify-content:center;padding:16px 18px 60px;background:#05080bbf;border-left:1px solid #ffffff26}.camera-controls>p{font-size:10px;margin-bottom:13px}.control-row{grid-template-columns:42px 58px 42px;gap:8px;width:100%}.burst-control{width:58px;height:58px}.side-control{width:40px;height:44px}.camera-state{margin-top:14px;min-height:44px}.lock-status strong{font-size:12px}.ar-shell .demo-scene,.ar-shell video{width:calc(100% - 205px)}.focus-frame{left:calc((100% - 205px)/2);top:52%;width:160px}}@media (prefers-reduced-motion:reduce){.ar-shell *{transition:none!important}}