.demo-root{--op:56 189 248;--pi:251 191 36;--s:1;background:radial-gradient(60rem 36rem at 12% -8%,rgb(var(--op)/.13),transparent 60%),radial-gradient(52rem 34rem at 96% 4%,rgb(var(--pi)/.09),transparent 60%),#070b14}.demo-stage{position:relative;height:calc(548px * var(--s))}.demo-slot{position:absolute;top:0;left:50%;width:290px;height:548px;transform-origin:top center;transition:transform .75s cubic-bezier(.22,.9,.24,1),opacity .45s ease;will-change:transform}.demo-phone{transition:opacity .5s ease,filter .5s ease,transform .6s cubic-bezier(.22,.9,.24,1),box-shadow .5s ease}.demo-stage[data-show=operator] .demo-slot-op,.demo-stage[data-show=pilot] .demo-slot-pi{transform:translateX(-50%) scale(var(--s));opacity:1}.demo-stage[data-show=operator] .demo-slot-pi{transform:translateX(calc(-50% + 300px * var(--s))) scale(calc(var(--s) * .86));opacity:0;pointer-events:none}.demo-stage[data-show=pilot] .demo-slot-op{transform:translateX(calc(-50% - 300px * var(--s))) scale(calc(var(--s) * .86));opacity:0;pointer-events:none}.demo-stage[data-show=both] .demo-slot-op{transform:translate(calc(-50% - 93px * var(--s)),calc(86px * var(--s))) scale(calc(var(--s) * .62));cursor:zoom-in}.demo-stage[data-show=both] .demo-slot-pi{transform:translate(calc(-50% + 93px * var(--s)),calc(86px * var(--s))) scale(calc(var(--s) * .62));cursor:zoom-in}.demo-wire{position:absolute;top:44%;left:24%;right:24%;height:0;pointer-events:none;z-index:30}.demo-wire-line{display:none}@media (min-width:720px){.demo-stage .demo-slot-op{transform:translateX(calc(-50% - 232px * var(--s))) scale(var(--s))!important}.demo-stage .demo-slot-op,.demo-stage .demo-slot-pi{opacity:1!important;pointer-events:auto!important;cursor:default!important}.demo-stage .demo-slot-pi{transform:translateX(calc(-50% + 232px * var(--s))) scale(var(--s))!important}.demo-stage[data-focus=operator] .demo-slot-pi .demo-phone,.demo-stage[data-focus=pilot] .demo-slot-op .demo-phone{opacity:.42;filter:saturate(.45) brightness(.8);transform:scale(.94)}.demo-wire{left:calc(50% - 82px * var(--s));right:calc(50% - 82px * var(--s))}.demo-wire-line{display:block}.demo-zoom-only{display:none!important}}.demo-slot-op .demo-phone{--role:var(--op)}.demo-slot-pi .demo-phone{--role:var(--pi)}.demo-phone[data-live=true]{box-shadow:0 0 0 1.5px rgb(var(--role)/.85),0 0 46px 2px rgb(var(--role)/.32),0 30px 60px -20px rgba(0,0,0,.8)}.demo-phone[data-live=false]{box-shadow:0 0 0 1px hsla(0,0%,100%,.1),0 30px 60px -20px rgba(0,0,0,.8)}.demo-wire-line{position:absolute;inset:0 0 auto 0;height:2px;transform:translateY(-1px);background-image:linear-gradient(90deg,hsla(0,0%,100%,.22) 50%,transparent 0);background-size:10px 2px}.demo-wire[data-dir=toPilot] .demo-wire-line{animation:demo-dash-right .5s linear infinite}.demo-wire[data-dir=toOperator] .demo-wire-line{animation:demo-dash-left .5s linear infinite}@keyframes demo-dash-right{to{background-position:10px 0}}@keyframes demo-dash-left{to{background-position:-10px 0}}.demo-packet{position:absolute;top:0;white-space:nowrap;transform:translate(-50%,-50%);animation:demo-fly-right 1.9s cubic-bezier(.45,.05,.3,1) both}.demo-wire[data-dir=toOperator] .demo-packet{animation-name:demo-fly-left}@keyframes demo-fly-right{0%{left:0;opacity:0;transform:translate(-50%,-50%) scale(.6)}14%{opacity:1;transform:translate(-50%,-50%) scale(1)}82%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{left:100%;opacity:0;transform:translate(-50%,-50%) scale(.6)}}@keyframes demo-fly-left{0%{left:100%;opacity:0;transform:translate(-50%,-50%) scale(.6)}14%{opacity:1;transform:translate(-50%,-50%) scale(1)}82%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{left:0;opacity:0;transform:translate(-50%,-50%) scale(.6)}}.demo-wall{position:absolute;top:4%;bottom:4%;left:50%;width:2px;transform:translateX(-1px);background:linear-gradient(180deg,transparent,hsla(0,0%,100%,.5) 18%,hsla(0,0%,100%,.5) 82%,transparent);animation:demo-wall-in .7s cubic-bezier(.22,.9,.24,1) both;z-index:25;pointer-events:none}@keyframes demo-wall-in{0%{transform:translateX(-1px) scaleY(0);opacity:0}to{transform:translateX(-1px) scaleY(1);opacity:1}}.demo-enter{animation:demo-enter .42s cubic-bezier(.22,.9,.24,1) both}@keyframes demo-enter{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.demo-hot{position:relative;cursor:pointer;animation:demo-hot 1.5s ease-out infinite}@keyframes demo-hot{0%{box-shadow:0 0 0 0 rgb(var(--role,56 189 248)/.75)}70%{box-shadow:0 0 0 12px rgb(var(--role,56 189 248)/0)}to{box-shadow:0 0 0 0 rgb(var(--role,56 189 248)/0)}}.demo-hot:active{transform:scale(.97)}.demo-pop{animation:demo-pop .5s cubic-bezier(.3,1.5,.5,1) both}@keyframes demo-pop{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.demo-flash{animation:demo-flash 1.6s ease-out both}@keyframes demo-flash{0%{background-color:rgba(34,197,94,.28)}to{background-color:rgba(34,197,94,0)}}.demo-drop{animation:demo-drop .7s cubic-bezier(.25,1.25,.5,1) .9s both}@keyframes demo-drop{0%{opacity:0;transform:translateY(-60px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}.demo-type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;animation:demo-type .9s steps(9) .25s both}@keyframes demo-type{0%{max-width:0}to{max-width:13ch}}.demo-radar{position:relative}.demo-radar:after,.demo-radar:before{content:"";position:absolute;inset:0;border-radius:9999px;border:1.5px solid;animation:demo-radar 1.8s ease-out infinite}.demo-radar:after{animation-delay:.9s}@keyframes demo-radar{0%{transform:scale(1);opacity:.8}to{transform:scale(3.4);opacity:0}}.demo-bar{transform-origin:left center;animation:demo-bar .8s cubic-bezier(.22,.9,.24,1) both}@keyframes demo-bar{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.demo-copy{animation:demo-enter .45s cubic-bezier(.22,.9,.24,1) both}.demo-turn-dot{animation:demo-blink 1.2s ease-in-out infinite}@keyframes demo-blink{50%{opacity:.25}}.demo-progress{transition:width .5s cubic-bezier(.22,.9,.24,1)}@media (prefers-reduced-motion:reduce){.demo-root *,.demo-root :after,.demo-root :before{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;transition-duration:.01ms!important}}