.demo-stage{position:relative;width:100%}.demo-stage__scaled{position:relative;transform-origin:top left;overflow:hidden;border-radius:12px}.mac-lights{display:flex;gap:6px}.mac-lights__dot{display:block;width:12px;height:12px;border-radius:50%}.mac-lights__dot--red{background:#ff5f57}.mac-lights__dot--yellow{background:#ffbd2e}.mac-lights__dot--green{background:#28c840}.demo-host{position:relative;width:100%;aspect-ratio:16/9;contain:layout paint}.demo-host{pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.demo-host__placeholder{position:absolute;inset:0;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#0a0a09;box-shadow:0 40px 100px -30px #000000e6;box-sizing:border-box;transition:opacity .25s ease}.demo-host__placeholder-lights{position:absolute;left:1.45%;top:1.9%;display:flex;gap:.55%}.demo-host__placeholder-lights i{display:block;width:clamp(6px,1.1vw,12px);aspect-ratio:1;border-radius:50%;margin-right:clamp(3px,.5vw,6px)}.demo-host__placeholder-lights i:nth-child(1){background:#ff5f57}.demo-host__placeholder-lights i:nth-child(2){background:#ffbd2e}.demo-host__placeholder-lights i:nth-child(3){background:#28c840}.demo-host.is-live .demo-host__placeholder{opacity:0;pointer-events:none}.demo-host.is-error .demo-skel .sk:after{animation:none}.demo-skel{position:absolute;inset:0;overflow:hidden;border-radius:12px;display:flex;flex-direction:column}.demo-skel .sk{position:relative;display:block;overflow:hidden;background:#181816;border-radius:3px;flex:none}.demo-skel .sk:after{content:"";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:demo-skel-sweep 1.6s ease-in-out infinite}@keyframes demo-skel-sweep{to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.demo-skel .sk:after{animation:none}}.demo-skel__top{height:5.7%;flex:none;display:flex;align-items:center;gap:1%;padding-left:11%;border-bottom:1px solid rgba(255,255,255,.06);box-sizing:border-box}.demo-skel__body{flex:1;display:flex;min-height:0}.demo-skel__side{width:17%;flex:none;border-right:1px solid rgba(255,255,255,.06);padding:1.6% 1.2%;display:flex;flex-direction:column;gap:2.6%;box-sizing:border-box}.demo-skel__row{display:flex;align-items:center;gap:6%;height:5%}.demo-skel .sk--dot{width:7%;aspect-ratio:1;border-radius:50%}.demo-skel .sk--pill{width:12%;height:100%;border-radius:99px}.demo-skel__main{flex:1;min-width:0;padding:1.6%;box-sizing:border-box}.demo-skel__cols{display:flex;gap:1.4%}.demo-skel__col{flex:1;display:flex;flex-direction:column;gap:2.4%;min-width:0}.demo-skel__colhead{height:6%;display:flex;align-items:center}.demo-skel__card{height:15%;padding:5%;display:flex;flex-direction:column;gap:14%;box-sizing:border-box;border-radius:6px}.demo-skel__card .sk{background:#232320}.demo-skel__tiles{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1.6%}.demo-skel__tile{border:1px solid rgba(255,255,255,.07);border-radius:6px;background:#0f0f0d;display:flex;flex-direction:column;min-height:0}.demo-skel__tilehead{height:13%;display:flex;align-items:center;padding:0 3%;border-bottom:1px solid rgba(255,255,255,.06)}.demo-skel__tilebody{flex:1;padding:3%;display:flex;flex-direction:column;gap:9%}.demo-skel__md{display:flex;gap:2%}.demo-skel__panel{width:34%;flex:none;display:flex;flex-direction:column;gap:5%;padding:2%;border:1px solid rgba(255,255,255,.07);border-radius:6px;box-sizing:border-box}.demo-skel__setting{display:flex;align-items:center;justify-content:space-between;height:9%}.demo-skel__doc{flex:1;display:flex;flex-direction:column;gap:3.2%;padding:2% 3%}.demo-skel__code{width:94%;height:22%}.phone-frame{position:absolute;inset:0}.phone-frame__shell{position:absolute;left:0;top:0;width:1120px;height:630px;box-sizing:border-box;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#0a0a09;box-shadow:0 40px 100px -30px #000000e6}.phone-frame__screen{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;opacity:0}.phone-frame__screen--inline{width:1120px;height:630px;transform-origin:0 0;opacity:var(--screen-op,0);transition:opacity var(--screen-fade,0ms) cubic-bezier(.4,0,.2,1)}.phone-frame[data-device=phone] .phone-frame__screen--inline{width:390px;height:844px;border-radius:55px;transform:translate(423.5px,19.6px) scale(.7);transform-origin:0 0}.phone-frame__cover{position:absolute;left:0;top:0;width:1120px;height:630px;overflow:hidden;z-index:4;transform-origin:50% 50%;pointer-events:none;display:none}.phone-frame__cover[data-on]{display:block}.phone-frame__cover[data-device=phone]{width:390px;height:844px;border-radius:55px;transform:translate(423.5px,19.6px) scale(.7);transform-origin:0 0}.phone-frame__release{position:absolute;left:0;top:0;width:1120px;height:630px;overflow:hidden;z-index:7;border-radius:12px;pointer-events:none;display:none;background:#0f0f0f}.phone-frame__lights{position:absolute;left:16px;top:12px;z-index:5;pointer-events:none}.phone-frame[data-device=phone] .phone-frame__lights{opacity:0}.phone-frame[data-device=phone] .phone-frame__shell{transform:translate(415.5px,11.6px);width:289px;height:606.8px;border-radius:46.6px;border-color:#3a3a3d;background:#000;box-shadow:0 0 0 1px #0b0b0b,0 40px 100px -30px #000000e6,inset 0 0 0 1.5px #111}.phone-frame__chrome{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:6}.phone-frame[data-device=phone] .phone-frame__chrome{opacity:1}.pf-time{position:absolute;left:462px;top:30px;font:600 11px/13px -apple-system,SF Pro Text,system-ui,sans-serif;color:#fff;letter-spacing:.2px}.pf-status{position:absolute;left:626px;top:31px;display:flex;align-items:center;gap:3px}.pf-island{position:absolute;left:517.3px;top:27.3px;width:85.4px;height:25.2px;border-radius:13px;background:#000}.pf-home{position:absolute;left:513.1px;top:601.3px;width:93.8px;height:3.5px;border-radius:2px;background:#ffffffd9}.pf-btn{position:absolute;width:2.5px;border-radius:1.5px;background:#2b2b2e;box-shadow:inset 0 0 0 .5px #ffffff2e}.pf-btn--action{left:413px;top:96px;height:15px}.pf-btn--volup{left:413px;top:126px;height:30px}.pf-btn--voldown{left:413px;top:164px;height:30px}.pf-btn--power{left:704.5px;top:146px;height:46px}.demo-qr{position:absolute;left:0;top:0;z-index:20;pointer-events:none;transform-origin:0 0}.demo-qr__card{position:absolute;inset:0;background:#fff;border-radius:8px;padding:4px;box-sizing:border-box;box-shadow:0 12px 40px -8px #000000b3}.demo-qr__card svg{display:block;width:100%;height:100%}.demo-qr__vf{position:absolute;inset:-16px;opacity:0}.demo-qr__vf i{position:absolute;width:22px;height:22px;border:0 solid #fff;opacity:.95}.demo-qr__vf i:nth-child(1){left:0;top:0;border-left-width:3px;border-top-width:3px;border-top-left-radius:9px}.demo-qr__vf i:nth-child(2){right:0;top:0;border-right-width:3px;border-top-width:3px;border-top-right-radius:9px}.demo-qr__vf i:nth-child(3){left:0;bottom:0;border-left-width:3px;border-bottom-width:3px;border-bottom-left-radius:9px}.demo-qr__vf i:nth-child(4){right:0;bottom:0;border-right-width:3px;border-bottom-width:3px;border-bottom-right-radius:9px}.demo-pause{position:absolute;right:10px;top:10px;z-index:90;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:#141414b8;color:#ffffffd9;font:500 12px var(--sans,monospace);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s ease,box-shadow .15s ease}.demo-pause:focus-visible{opacity:1;pointer-events:auto}.demo-pause:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px #ffffff40}.demo-pause__dot{width:8px;height:8px;border-radius:2px;background:currentColor}.demo-cursor{position:absolute;left:0;top:0;z-index:85;width:0;height:0;pointer-events:none;opacity:0;transition:transform .5s cubic-bezier(.45,.05,.2,1),opacity .2s;will-change:transform}.demo-cursor>span{position:absolute;border-radius:50%;left:6px;top:6px;transform:translate(-50%,-50%)}.demo-cursor__aura{width:28px;height:28px;background:#ffffff24;filter:blur(5px);animation:demo-cursor-pulse 2.8s ease-in-out infinite}.demo-cursor__ring{width:16px;height:16px;background:#ffffff2e;box-shadow:0 0 0 1px #ffffff47}.demo-cursor__core{width:8px;height:8px;background:#fff;box-shadow:0 0 8px #ffffffb3}.demo-cursor__ripple{width:40px;height:40px;border:2px solid rgba(255,255,255,.85);background:#ffffff24;opacity:0}@keyframes demo-cursor-pulse{0%,to{opacity:.6;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}}.demo-play{position:absolute;left:50%;top:50%;z-index:100;box-sizing:border-box;width:clamp(44px,5vw,64px);aspect-ratio:1;padding:0;margin:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:1px solid rgba(255,255,255,.26);background:#0a0a09ad;color:#fff;box-shadow:0 10px 34px -8px #000000bf,inset 0 0 0 1px #ffffff0a;transform:translate(-50%,-50%);opacity:.92;pointer-events:auto;transition:transform .18s ease,opacity .18s ease,background-color .18s ease,box-shadow .15s ease;-webkit-tap-highlight-color:transparent}.demo-play svg{width:42%;height:42%;fill:currentColor;margin-left:2%;display:block}.demo-play:hover{opacity:1;transform:translate(-50%,-50%) scale(1.07);background:#0a0a09d1}.demo-play:active{transform:translate(-50%,-50%) scale(.97)}.demo-play:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px #ffffff40,0 10px 34px -8px #000000bf;opacity:1}@media(prefers-reduced-motion:reduce){.demo-play{transition:none}}.demo-host__hit{position:absolute;inset:0;z-index:99;border-radius:12px;cursor:pointer;pointer-events:auto;background:transparent;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;touch-action:auto}.demo-host__hit:hover~.demo-play{opacity:1;transform:translate(-50%,-50%) scale(1.07);background:#0a0a09d1}.demo-host__hit:active~.demo-play{transform:translate(-50%,-50%) scale(.97)}.vst-demo-frozen{position:absolute;inset:0;pointer-events:none;user-select:none;-webkit-user-select:none}.vst-demo-frozen *{animation-play-state:paused!important}.phone-frame__screen--inline>.vst-demo:not(.vst-demo-frozen):not([data-shown]){visibility:hidden}.phone-frame__screen--inline>.vst-demo:not(.vst-demo-frozen):not([data-shown])>.vst-demo-root{visibility:inherit}.vst-frozen-slot{position:absolute;inset:0}
