.product-demo{width:100%;min-width:0}.demo-window{border:1px solid var(--border);background:var(--background);border-radius:22px;overflow:hidden;box-shadow:0 24px 65px -28px #14434947}.demo-scene{background:color-mix(in srgb, var(--muted) 35%, var(--background));height:390px;animation:.4s ease-out both demo-scene-in}.demo-camera{background:radial-gradient(at 50% 30%,#365253,#182b30 80%);justify-content:center;align-items:center;height:100%;display:flex;position:relative;overflow:hidden}.demo-ticket-wrap{animation:1s ease-out both demo-ticket-settle;position:absolute;top:37px;transform:rotate(-5deg)}.demo-receipt{color:#292524;clip-path:polygon(0 0,100% 0,100% 98%,95% 100%,90% 98%,85% 100%,80% 98%,75% 100%,70% 98%,65% 100%,60% 98%,55% 100%,50% 98%,45% 100%,40% 98%,35% 100%,30% 98%,25% 100%,20% 98%,15% 100%,10% 98%,5% 100%,0 98%);background:#fffdf5;width:200px;padding:24px 18px 28px;font-family:ui-monospace,monospace;box-shadow:0 10px 30px #00000026}.demo-corners{opacity:.8;border:2px solid #7cdbcb;border-radius:9px;position:absolute;inset:-10px}.demo-scan-beam{background:#9cffe4;height:2px;animation:2.8s ease-in-out infinite demo-scan;position:absolute;top:8%;left:-8px;right:-8px;box-shadow:0 0 18px 6px #67e8cd42}.demo-shutter{border:1.5px solid #ffffffa6;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;display:flex}.demo-shutter span{background:#fff;border-radius:50%;width:28px;height:28px;animation:3.8s ease-in-out infinite demo-shutter-pulse}.demo-ticket-mini{width:120px;height:130px;transform:rotate(-5deg)}.demo-ticket-mini .demo-receipt{transform-origin:0 0;transform:scale(.6)}.demo-result-card{animation:.65s cubic-bezier(.2,.7,.2,1) both demo-card-in}.demo-new-row{animation:.65s ease-out both demo-row-in}.demo-export-button{background:var(--primary);width:100%;height:42px;color:var(--primary-foreground);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;gap:8px;font-size:12px;font-weight:600;display:flex}.demo-export-button:hover{opacity:.9}.demo-control:focus-visible,.demo-step:focus-visible,.demo-export-button:focus-visible{outline:2px solid var(--ring);outline-offset:3px}.demo-pointer{pointer-events:none;filter:drop-shadow(0 2px 2px #0000002e);animation:3.8s ease-in-out both demo-pointer-click;position:absolute;bottom:-8px;right:24%}.demo-export-success{animation:.6s cubic-bezier(.16,1,.3,1) both demo-success-in}.demo-control{border:1px solid var(--border);background:var(--card);width:32px;height:32px;color:var(--muted-foreground);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;display:flex}.demo-control:hover{color:var(--foreground)}.demo-step{width:100%;color:var(--muted-foreground);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:7px;padding:4px 0;font-size:11px;display:flex}.demo-step-number{border:1px solid var(--border);background:var(--background);border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:10px;transition:color .2s,background .2s;display:flex}.demo-step-active{color:var(--primary);font-weight:600}.demo-step-active .demo-step-number{border-color:var(--primary);background:var(--primary);color:var(--primary-foreground)}.demo-paused *,.demo-paused :before,.demo-paused :after{animation-play-state:paused!important}.demo-paused .demo-scene,.demo-paused .demo-result-card,.demo-paused .demo-new-row,.demo-paused .demo-export-success,.demo-paused .demo-ticket-wrap{animation:none}@keyframes demo-scan{0%,to{opacity:.2;top:8%}15%{opacity:1}85%{opacity:1}90%{opacity:.2;top:90%}}@keyframes demo-scene-in{0%{opacity:.45}to{opacity:1}}@keyframes demo-ticket-settle{0%{transform:translateY(20px)rotate(-10deg)}to{transform:translateY(0)rotate(-5deg)}}@keyframes demo-shutter-pulse{0%,65%,to{transform:scale(1)}75%{transform:scale(.78)}}@keyframes demo-card-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes demo-row-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes demo-pointer-click{0%,30%{opacity:0;transform:translate(20px,22px)}55%,75%{opacity:1;transform:translate(0)}82%{opacity:1;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes demo-success-in{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.product-demo *,.product-demo :before,.product-demo :after{transition:none!important;animation:none!important}}