.interactive-demo{--progress:0;isolation:isolate}.demo-stage{--progress:0;position:relative;height:595px;display:flex;justify-content:center;align-items:center;perspective:1200px}.stage-halo{position:absolute;inset:5% -5%;background:radial-gradient(ellipse at 55% 55%,#1473ce35,transparent 65%);pointer-events:none}.stage-orbit{position:absolute;width:92%;height:100px;border:1px solid #afdfff18;border-radius:50%;bottom:14px;transform:rotate(-7deg);box-shadow:0 0 40px #1874c516}.demo-phone{position:relative;width:278px;height:566px;border-radius:44px;padding:7px;background:linear-gradient(125deg,#d4e3ec,#4f5b68 15%,#0e151c 45%,#a1b4c3 80%,#1c2936);box-shadow:0 0 0 1px #b7e1ff77,12px 22px 65px #000b,-5px 0 25px #64b7ff1a;transform:rotateY(-9deg) rotateZ(3deg);transition:transform .5s}.demo-phone:before{content:'';position:absolute;width:3px;height:48px;right:-3px;top:125px;background:#697e8f;border-radius:0 3px 3px 0}.phone-screen{height:100%;position:relative;overflow:hidden;border-radius:37px;background:#11151b;border:1px solid #05070a;padding:0 16px;color:#edf4fb}.phone-island{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:82px;height:22px;border-radius:20px;background:#030609;z-index:3}.phone-status{display:flex;justify-content:space-between;font-size:9px;padding:15px 4px 19px;font-weight:600;letter-spacing:1px}.app-header{display:flex;align-items:center;gap:9px;margin:9px 0 22px}.app-header>span:first-of-type{font-size:16px;letter-spacing:3px}.app-menu{margin-left:auto;font-size:16px;color:#b7c5d2}.app-toolbar{display:flex;align-items:center;justify-content:space-between;font-size:10px;margin-bottom:12px;color:#c4d0db}.ratio-chip{font-size:9px;padding:5px 9px;border-radius:13px;border:1px solid #ffffff30;background:#ffffff0a}.phone-viewfinder{height:222px;position:relative;overflow:hidden;border-radius:13px;background:linear-gradient(145deg,#202b38,#0b1016);border:1px solid #b7e1ff25}.camera-grid{position:absolute;inset:0;background:linear-gradient(to right,transparent 32.9%,#c1e2ff0e 33%,#c1e2ff0e 33.3%,transparent 33.4%,transparent 66.4%,#c1e2ff0e 66.5%,#c1e2ff0e 66.8%,transparent 66.9%),linear-gradient(to bottom,transparent 32.9%,#c1e2ff0e 33%,#c1e2ff0e 33.3%,transparent 33.4%,transparent 66.4%,#c1e2ff0e 66.5%,#c1e2ff0e 66.8%,transparent 66.9%)}.viewfinder-prompt{position:absolute;top:27px;left:18px;line-height:1.6;font-size:15px;letter-spacing:-.3px;color:#dce9f5}.viewfinder-prompt span{font-size:11px;color:#92a8bd}.image-state{position:absolute;left:12px;bottom:11px;font-size:6px;letter-spacing:1.5px;background:#06101c88;padding:5px 6px;border-radius:3px;z-index:2;color:#d4e9fa}.finished-photo{position:absolute;inset:0;opacity:var(--progress);background:radial-gradient(ellipse at 65% 20%,#69b9e67a,transparent 40%),linear-gradient(150deg,#041429,#135e9f 65%,#08284b);transform:scale(calc(1.08 - var(--progress)*.08));overflow:hidden}.finished-photo:before{content:'';position:absolute;left:8%;right:8%;top:9%;bottom:15%;border:1px solid #b7e1ff70;box-shadow:0 0 12px #5ab5ff55;transform:skewY(-7deg)}.finished-photo img{position:absolute;width:100%;height:100%;object-fit:contain;top:7%;filter:drop-shadow(0 13px 10px #001325aa)}.photo-pedestal{position:absolute;width:80%;height:30%;border-radius:50%;background:linear-gradient(#337db3,#113453);bottom:12%;left:10%;box-shadow:0 9px 0 #081d35,0 15px 20px #0007;transform:rotate(-6deg)}.photo-signature{position:absolute;right:14px;top:14px;font-size:5px;letter-spacing:1.4px;color:#b7e1ff}.scene-heading{display:flex;justify-content:space-between;font-size:9px;margin:17px 0 9px}.scene-heading span:last-child{font-size:7px;color:#afc7dc}.scene-options{display:flex;gap:8px}.scene-swatch{height:38px;flex:1;border-radius:6px;background:linear-gradient(145deg,#135183,#030b16);border:1px solid #b7e1ff30}.scene-swatch.selected{border:1px solid #9acfff;box-shadow:0 0 0 2px #2883d42a}.scene-swatch.warm{background:linear-gradient(120deg,#b0a085,#44372c)}.scene-swatch.silver{background:linear-gradient(145deg,#b6c8d4,#4f626d)}.scene-swatch.dark{background:linear-gradient(145deg,#484a4d,#131519)}.app-vessel{display:flex;justify-content:space-between;font-size:8px;color:#a7b4c1;margin:15px 0}.app-vessel span{color:#d8efff}.generate-control{--progress:0;height:49px;position:relative;border-radius:28px;background:linear-gradient(90deg,#244c7d,#132b49);border:1px solid #c4e7ff4a;box-shadow:inset 0 1px 0 #ffffff15;overflow:hidden}.slider-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;font-size:10px;color:#e8f2fc;pointer-events:none;padding-left:24px;opacity:calc(1 - var(--progress)*.3)}.generate-control input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:grab;z-index:3;touch-action:pan-y}.generate-control input:active{cursor:grabbing}.generate-control:focus-within{outline:2px solid #b7e1ff;outline-offset:3px}.slider-knob{position:absolute;left:calc(4px + var(--progress)*(100% - 48px));top:4px;width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#eff8ff,#adc5db);color:#163b63;font-size:20px;box-shadow:0 3px 8px #0007;pointer-events:none}.phone-home{height:3px;width:76px;background:#d0d4da;border-radius:5px;position:absolute;bottom:7px;left:50%;transform:translateX(-50%)}.foreground-food{position:absolute;z-index:4;width:340px;height:270px;left:-4%;top:39%;pointer-events:none;transform:translate(calc(var(--progress)*105px),calc(var(--progress)*-28px)) scale(calc(1 - var(--progress)*.55)) rotate(calc(-13deg + var(--progress)*13deg));opacity:calc(1 - var(--progress));filter:blur(calc(var(--progress)*3px))}.foreground-food img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 13px #000b)}.food-shadow{position:absolute;bottom:10%;left:15%;width:70%;height:12%;background:#0008;filter:blur(16px);border-radius:50%}.demo-callout{position:absolute;right:0;top:49%;font-size:9px;line-height:1.7;color:#a8bdcf;opacity:calc(1 - var(--progress));pointer-events:none}.demo-callout b{font-weight:400;color:#e2f2ff}.callout-line{position:absolute;width:40px;height:1px;background:#b7e1ff50;right:calc(100% + 10px);top:14px}.demo-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}.demo-bottom p{font-size:10px;color:#aabed0;margin:0;line-height:1.6}.demo-reset{font-size:10px;color:#d9edff;background:#a8d5ff0a;border:1px solid #b7e1ff33;padding:9px 12px;border-radius:20px;cursor:pointer;min-height:38px}.demo-reset:hover{background:#a8d5ff20}.interactive-demo figcaption{border-top:1px solid #b7e1ff20;padding-top:14px;margin-top:12px}.is-complete .demo-phone{transform:rotateY(0deg) rotateZ(0deg)}@media(min-width:1450px){.foreground-food{left:0}}@media(max-width:1000px) and (min-width:701px){.demo-stage{height:535px}.demo-phone{transform:scale(.88) rotateY(-9deg) rotateZ(3deg)}.is-complete .demo-phone{transform:scale(.88)}.foreground-food{width:250px;height:220px;left:-12%}.demo-callout{display:none}}@media(max-width:700px){.demo-stage{height:580px}.demo-phone{transform:rotateY(-6deg) rotateZ(2deg)}.foreground-food{width:270px;height:240px;left:-5%;top:40%}.demo-callout{display:none}.demo-bottom p{font-size:10px}.interactive-demo figcaption>small{width:100%;margin-left:0;margin-top:3px}}@media(max-width:360px){.demo-stage{height:540px}.demo-phone{transform:scale(.9) rotateZ(2deg)}.is-complete .demo-phone{transform:scale(.9)}.foreground-food{width:230px;left:-5%}}@media(prefers-reduced-motion:reduce){.demo-phone{transition:none}.foreground-food{filter:none}}
@media(min-width:1001px){.hero:has(.interactive-demo){padding-block:35px 45px}.demo-stage{height:540px}.demo-phone{transform:scale(.9) rotateY(-9deg) rotateZ(3deg)}.is-complete .demo-phone{transform:scale(.9)}.foreground-food{top:37%}}