.sw-stage{--h:clamp(150px, 40vw, 320px);--joy-w:calc(var(--h) * .25);--joy-h:calc(var(--h) * .96);--r-out:calc(var(--joy-w) * .5);--r-in:calc(var(--h) * .028);--pad:calc(var(--h) * .048);--key:#26262b;--key-lip:#00000080;justify-content:center;align-items:center;gap:calc(var(--h) * .012);padding:calc(var(--h) * .16) 0;display:flex}.sw-joy{width:var(--joy-w);height:var(--joy-h);will-change:transform;flex:none;position:relative}.sw-joy-left{border-radius:var(--r-out) var(--r-in) var(--r-in) var(--r-out);box-shadow:inset 0 0 0 1px #ffffff38, inset calc(var(--joy-w) * -.06) 0 calc(var(--joy-w) * .14) #0000003d, 0 calc(var(--h) * .07) calc(var(--h) * .13) calc(var(--h) * -.07) #00c3e3d9;background:linear-gradient(100deg,#ffffff38 0%,#fff0 38%),linear-gradient(185deg,#3fdcff 0%,#00c3e3 42%,#0098b8 100%);animation:4.2s ease-in-out infinite sw-float}.sw-joy-right{border-radius:var(--r-in) var(--r-out) var(--r-out) var(--r-in);box-shadow:inset 0 0 0 1px #ffffff38, inset calc(var(--joy-w) * .06) 0 calc(var(--joy-w) * .14) #0000003d, 0 calc(var(--h) * .07) calc(var(--h) * .13) calc(var(--h) * -.07) #ff4554d9;background:linear-gradient(260deg,#fff3 0%,#fff0 38%),linear-gradient(175deg,#ff7a74 0%,#ff4554 42%,#d61f36 100%);animation:4.2s ease-in-out -2.1s infinite sw-float}@keyframes sw-float{0%,to{transform:translate3d(0, calc(var(--h) * -.035), 0)}50%{transform:translate3d(0, calc(var(--h) * .035), 0)}}.sw-rail{width:calc(var(--h) * .022);background:linear-gradient(#202024,#121215);position:absolute;top:4%;bottom:4%;box-shadow:inset 0 0 0 1px #ffffff12}.sw-joy-left .sw-rail{border-radius:calc(var(--h) * .008) 0 0 calc(var(--h) * .008);right:0}.sw-joy-right .sw-rail{border-radius:0 calc(var(--h) * .008) calc(var(--h) * .008) 0;left:0}.sw-leds{gap:calc(var(--h) * .012);flex-direction:column;display:flex;position:absolute;top:13%}.sw-joy-left .sw-leds{right:calc(var(--h) * .035)}.sw-joy-right .sw-leds{left:calc(var(--h) * .035)}.sw-leds i{width:calc(var(--h) * .012);height:calc(var(--h) * .012);background:#00000052;border-radius:50%}.sw-leds i:first-child{background:#ffffffe6}.sw-key{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 90ms,filter 90ms,box-shadow 90ms;position:absolute}.sw-key:active,.sw-key[data-pressed=true]{filter:brightness(.72);box-shadow:none;transform:scale(.9)}.sw-round{background:radial-gradient(circle at 50% 32%, #3a3a41, var(--key) 72%);box-shadow:inset 0 calc(var(--h) * -.004) calc(var(--h) * .008) #0000008c, 0 calc(var(--h) * .004) calc(var(--h) * .006) var(--key-lip);border-radius:50%}.sw-stick{width:calc(var(--joy-w) * .58);height:calc(var(--joy-w) * .58);margin-left:calc(var(--joy-w) * -.29);box-shadow:inset 0 0 0 calc(var(--joy-w) * .045) #1b1b20, inset 0 calc(var(--joy-w) * .03) calc(var(--joy-w) * .06) #000000b3, 0 calc(var(--joy-w) * .035) calc(var(--joy-w) * .07) #00000073;cursor:grab;touch-action:none;background:radial-gradient(circle at 50% 40%,#ffffff29,#fff0 55%),radial-gradient(circle at 50% 100%,#101014,#33333a 70%);border-radius:50%;transition:transform .42s cubic-bezier(.22,1.4,.4,1);left:50%}.sw-stick[data-dragging=true]{cursor:grabbing;transition:none}.sw-stick:after{content:"";background:radial-gradient(circle at 50% 35%,#43434b,#1c1c21 75%);border-radius:50%;position:absolute;inset:24%}.sw-joy-left .sw-stick{top:10%}.sw-joy-right .sw-stick{top:56%}.sw-dpad{width:calc(var(--joy-w) * .66);height:calc(var(--joy-w) * .66);margin-left:calc(var(--joy-w) * -.33);position:absolute;top:38%;left:50%}.sw-dot{width:calc(var(--joy-w) * .22);height:calc(var(--joy-w) * .22)}.sw-dot-up{margin-left:calc(var(--joy-w) * -.11);top:0;left:50%}.sw-dot-down{margin-left:calc(var(--joy-w) * -.11);bottom:0;left:50%}.sw-dot-left{margin-top:calc(var(--joy-w) * -.11);top:50%;left:0}.sw-dot-right{margin-top:calc(var(--joy-w) * -.11);top:50%;right:0}.sw-abxy{width:calc(var(--joy-w) * .78);height:calc(var(--joy-w) * .78);margin-left:calc(var(--joy-w) * -.39);position:absolute;top:20%;left:50%}.sw-abxy .sw-key{width:calc(var(--joy-w) * .28);height:calc(var(--joy-w) * .28);color:#ffffffbd;font-family:system-ui,sans-serif;font-size:calc(var(--joy-w) * .15);place-items:center;font-weight:700;line-height:1;display:grid}.sw-btn-x{margin-left:calc(var(--joy-w) * -.14);top:0;left:50%}.sw-btn-b{margin-left:calc(var(--joy-w) * -.14);bottom:0;left:50%}.sw-btn-y{margin-top:calc(var(--joy-w) * -.14);top:50%;left:0}.sw-btn-a{margin-top:calc(var(--joy-w) * -.14);top:50%;right:0}.sw-plus,.sw-minus{width:calc(var(--joy-w) * .26);height:calc(var(--joy-w) * .26);margin-left:calc(var(--joy-w) * -.13);color:#1f1f24;top:5.5%;left:50%}.sw-plus:before,.sw-plus:after,.sw-minus:before{content:"";height:calc(var(--joy-w) * .07);margin-top:calc(var(--joy-w) * -.035);border-radius:calc(var(--joy-w) * .02);background:currentColor;position:absolute;top:50%;left:8%;right:8%}.sw-plus:after{width:calc(var(--joy-w) * .07);height:auto;margin:0 0 0 calc(var(--joy-w) * -.035);inset:8% auto 8% 50%}.sw-capture{width:calc(var(--joy-w) * .28);height:calc(var(--joy-w) * .28);margin-left:calc(var(--joy-w) * -.14);border-radius:calc(var(--joy-w) * .06);background:var(--key);box-shadow:0 calc(var(--h) * .004) calc(var(--h) * .006) var(--key-lip);bottom:7%;left:50%}.sw-capture:after{content:"";border:calc(var(--joy-w) * .03) solid #ffffff8c;border-radius:50%;position:absolute;inset:26%}.sw-home{width:calc(var(--joy-w) * .32);height:calc(var(--joy-w) * .32);margin-left:calc(var(--joy-w) * -.16);color:#ffffffb8;place-items:center;display:grid;bottom:7%;left:50%}.sw-home svg{width:58%;height:58%}.sw-body{width:calc(var(--h) * 1.66);height:var(--h);padding:var(--pad);border-radius:calc(var(--h) * .055);box-shadow:inset 0 0 0 1px #ffffff1a, 0 calc(var(--h) * .12) calc(var(--h) * .2) calc(var(--h) * -.1) #12131a73;background:linear-gradient(#ffffff1a,#fff0 18%),linear-gradient(#3a3a3f 0%,#212125 55%,#141417 100%);flex:none;position:relative}.sw-top-keys{top:calc(var(--h) * -.012);gap:calc(var(--h) * .022);display:flex;position:absolute;left:22%}.sw-top-keys i{width:calc(var(--h) * .05);height:calc(var(--h) * .014);border-radius:calc(var(--h) * .007) calc(var(--h) * .007) 0 0;background:linear-gradient(#4a4a51,#2a2a2f)}.sw-screen{gap:calc(var(--h) * .032);width:100%;height:100%;padding:calc(var(--h) * .05) calc(var(--h) * .055);border-radius:calc(var(--h) * .02);color:#3a3d47;box-shadow:inset 0 0 calc(var(--h) * .04) #00000040;background:#f3f4f7;flex-direction:column;display:flex;position:relative;overflow:hidden}.sw-screen:after{content:"";pointer-events:none;background:linear-gradient(114deg,#ffffff57 0%,#ffffff0f 34%,#fff0 52%);position:absolute;inset:0}.sw-scr-top{justify-content:space-between;align-items:center;gap:calc(var(--h) * .03);display:flex}.sw-users{gap:calc(var(--h) * .018);display:flex}.sw-users span{width:calc(var(--h) * .075);height:calc(var(--h) * .075);background:#d7dae2;border-radius:50%;overflow:hidden}.sw-users img{object-fit:cover;width:100%;height:100%}.sw-status{align-items:center;gap:calc(var(--h) * .022);color:#4b4f5c;font-size:calc(var(--h) * .058);font-weight:700;display:flex}.sw-battery{width:calc(var(--h) * .085);height:calc(var(--h) * .045);border:calc(var(--h) * .008) solid currentColor;border-radius:calc(var(--h) * .012);position:relative}.sw-battery:after{content:"";top:50%;right:calc(var(--h) * -.018);width:calc(var(--h) * .012);height:calc(var(--h) * .02);background:currentColor;border-radius:0 2px 2px 0;position:absolute;transform:translateY(-50%)}.sw-tiles{justify-content:flex-start;align-items:center;gap:calc(var(--h) * .024);flex:1;display:flex}.sw-tile{width:calc(var(--h) * .285);height:calc(var(--h) * .285);border-radius:calc(var(--h) * .022);box-shadow:0 calc(var(--h) * .012) calc(var(--h) * .03) #1e212d38;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;flex:none;place-items:center;padding:0;transition:transform .22s cubic-bezier(.22,1,.36,1);display:grid;position:relative;overflow:visible}.sw-tile img{border-radius:calc(var(--h) * .016);object-fit:contain;width:86%;height:86%}.sw-tile .sw-tile-icon{color:#ffffffeb;width:52%;height:52%}.sw-tile-empty{border:calc(var(--h) * .006) solid #dcdfe8;box-shadow:none;background:#e9ebf1}.sw-tile[data-selected=true]{transform:scale(1.09)}.sw-tile[data-selected=true]:after{content:"";inset:calc(var(--h) * -.016);border:calc(var(--h) * .011) solid #fff;border-radius:calc(var(--h) * .032);box-shadow:0 0 0 calc(var(--h) * .007) #4b5cff, 0 calc(var(--h) * .014) calc(var(--h) * .03) #1e212d4d;position:absolute}.sw-dock{justify-content:center;align-items:center;gap:calc(var(--h) * .028);display:flex}.sw-dock .sw-app{width:calc(var(--h) * .088);height:calc(var(--h) * .088);box-shadow:0 calc(var(--h) * .005) calc(var(--h) * .014) #1e212d29;color:#7c8191;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#fff;border:0;border-radius:50%;place-items:center;padding:0;transition:transform .12s,color .12s;display:grid}.sw-dock .sw-app:first-child{border:calc(var(--h) * .007) solid #f2a71b;color:#f2a71b}.sw-dock .sw-app:active,.sw-dock .sw-app[data-pressed=true]{color:#4b5cff;transform:scale(.86)}.sw-dock svg{width:56%;height:56%}.sw-speakers{bottom:calc(var(--h) * .014);padding:0 calc(var(--h) * .09);pointer-events:none;justify-content:space-between;display:flex;position:absolute;left:0;right:0}.sw-speakers i{width:calc(var(--h) * .075);height:calc(var(--h) * .012);background:radial-gradient(circle at 1px,#ffffff47 .5px,#0000 .6px) repeat-x;background-size:calc(var(--h) * .011) 100%;opacity:.75;border-radius:999px}@media (prefers-reduced-motion:reduce){.sw-joy-left,.sw-joy-right{animation:none}.sw-tile,.sw-stick{transition:none}}.vi-overlay{z-index:60;touch-action:none;cursor:pointer;background:#fff;transition:opacity .7s;position:fixed;inset:0;overflow:hidden}.vi-overlay[data-phase=leaving]{opacity:0;pointer-events:none}.vi-frame{transform-origin:50%;transition:transform .7s cubic-bezier(.22,1,.36,1),border-radius .7s cubic-bezier(.22,1,.36,1);position:absolute;inset:0;overflow:hidden}.vi-overlay[data-phase=leaving] .vi-frame{border-radius:28px;transform:scale(.94)}.vi-video{object-fit:cover;object-position:50% 50%;width:100%;height:100%;position:absolute;inset:0}.vi-poster{object-fit:cover;object-position:50% 50%;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;transition:opacity .15s linear;position:absolute;inset:0}.vi-overlay[data-frame] .vi-poster{opacity:0}.vi-overlay[data-frame] .vi-video{animation:vi-pan var(--vi-duration,4s) linear forwards}@keyframes vi-pan{0%{object-position:50% 50%}to{object-position:59% 50%}}.vi-overlay[data-stalled] .vi-video,.vi-overlay[data-stalled] .vi-progress i{animation-play-state:paused}.vi-edges{pointer-events:none;background:linear-gradient(#12131a6b 0%,#12131a00 16%),linear-gradient(#12131a00 74%,#12131a8c 100%);position:absolute;inset:0}.vi-cue{bottom:max(28px, env(safe-area-inset-bottom));color:#ffffffe6;pointer-events:none;text-shadow:0 1px 12px #00000080;flex-direction:column;align-items:center;gap:10px;font-size:13px;font-weight:700;transition:opacity .4s;display:flex;position:absolute;left:50%;transform:translate(-50%)}.vi-overlay:not([data-phase=waiting]) .vi-cue{opacity:0}.vi-mouse{border:2px solid #ffffffd9;border-radius:14px;width:24px;height:38px;position:relative}.vi-mouse:after{content:"";background:#fff;border-radius:2px;width:4px;height:8px;margin-left:-2px;animation:1.6s ease-in-out infinite vi-wheel;position:absolute;top:7px;left:50%}@keyframes vi-wheel{0%{opacity:0;transform:translateY(-2px)}30%{opacity:1}to{opacity:0;transform:translateY(12px)}}.vi-skip{bottom:max(26px, env(safe-area-inset-bottom));color:#ffffffeb;cursor:pointer;background:#12131a80;border:1px solid #ffffff38;border-radius:999px;align-items:center;gap:6px;padding:8px 14px;font-family:inherit;font-size:12.5px;font-weight:700;transition:background-color .2s,border-color .2s;display:inline-flex;position:absolute;inset-inline-end:20px}.vi-skip:hover{background:#12131ab8;border-color:#ffffff73}.vi-progress{pointer-events:none;background:#ffffff14;height:3px;position:absolute;bottom:0;left:0;right:0}.vi-progress i{transform-origin:0;background:linear-gradient(90deg,#8b5cf6,#f6b91d);height:100%;display:block;transform:scaleX(0)}[dir=rtl] .vi-progress i{transform-origin:100%}.vi-overlay[data-frame] .vi-progress i{animation:vi-fill var(--vi-duration,4s) linear forwards}@keyframes vi-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@media (width<=480px){.vi-skip{inset-inline-end:16px;bottom:max(20px, env(safe-area-inset-bottom))}.vi-cue{bottom:max(22px, env(safe-area-inset-bottom))}}