.immersive-demo{background:radial-gradient(ellipse at 45% 28%,#24466a 0,#132d50 45%,#0e2045 80%);--scene:#9edaff;border-radius:6px}
.immersive-demo.mode-1,.immersive-demo.mode-2{--scene:#9edaff}
.immersive-demo .demo-top{padding-top:20px;align-items:center}
.immersive-demo .demo-top>span{font-size:8px;letter-spacing:.1em}
.immersive-demo .demo-top button{min-height:32px;font-size:10px}
.immersive-demo .demo-stage{height:350px;perspective:none;cursor:default;touch-action:pan-y}
.virtuvo-viewport{position:absolute;inset:0 0 48px;cursor:grab;touch-action:none}
.virtuvo-viewport:active{cursor:grabbing}
.virtuvo-viewport canvas{width:100%;height:100%;display:block;position:relative;z-index:2}
.virtuvo-viewport:before{content:"";position:absolute;left:21%;right:21%;bottom:23px;height:28px;border-radius:50%;background:#07152b;filter:blur(13px);opacity:.48;pointer-events:none}
.virtuvo-model-name{position:absolute;top:15px;left:22px;color:#aec6e0;font-size:9px;letter-spacing:.1em;text-transform:uppercase;pointer-events:none;z-index:3}
.virtuvo-tools{position:absolute;right:16px;bottom:54px;display:flex;gap:5px;z-index:4}
.virtuvo-tools button{width:34px;height:34px;border:1px solid #b8daff30;background:#102544b0;border-radius:50%;color:#c2d8ee;display:grid;place-items:center;font-size:18px;cursor:pointer;transition:background .2s}
.virtuvo-tools button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.virtuvo-tools button:hover,.virtuvo-tools button[aria-pressed=true]{background:#90d8ff;color:#102544;border-color:#90d8ff}
.immersive-demo button:disabled{opacity:.4;cursor:default}
.virtuvo-tools button:focus-visible,.virtuvo-powered:focus-visible{outline:2px solid #9edaff;outline-offset:3px}
.immersive-demo .scene-coordinate{bottom:30px;font-size:10px;pointer-events:none}
.immersive-demo .scene-instruction{bottom:11px;font-size:9px;pointer-events:none}
.virtuvo-status{position:absolute;z-index:3;top:40%;left:20px;right:20px;text-align:center;font-size:12px;color:#c5def3;background:#112a48d9;padding:14px;border-radius:4px}
.virtuvo-status[hidden]{display:none}
.immersive-demo .demo-bottom{padding-bottom:17px}
.immersive-demo .demo-description{min-height:100px}
.virtuvo-footer{border-top:1px solid #b8daff24;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;margin-top:4px}
.virtuvo-powered{display:inline-flex;align-items:center;gap:7px;color:#aec6df;font-size:10px;text-decoration:none;white-space:nowrap}
.virtuvo-powered svg{width:18px;height:18px;overflow:visible}
.virtuvo-powered strong{color:#eef7ff;font-weight:600;font-size:13px;letter-spacing:-.02em}
.virtuvo-powered:hover strong{color:#9edaff}
.virtuvo-footer>small{font-size:8px;color:#91adc9;letter-spacing:.09em;text-transform:uppercase}
@media(max-width:1100px){.virtuvo-model-name{left:16px}.immersive-demo .demo-top>span{font-size:7px}.immersive-demo .demo-top{gap:8px}.immersive-demo .demo-top button{font-size:9px}.virtuvo-footer>small{font-size:7px}}
@media(max-width:700px){.immersive-demo .demo-stage{height:340px}.immersive-demo .demo-description{min-height:109px}.immersive-demo .scene-coordinate,.immersive-demo .scene-instruction{left:16px}.virtuvo-tools{right:12px}.virtuvo-tools button{width:36px;height:36px}.immersive-demo .demo-top>span{font-size:7px}.virtuvo-footer{gap:6px}.virtuvo-footer>small{letter-spacing:.04em}}
@media(prefers-reduced-motion:reduce){.virtuvo-tools button{transition:none}}