.spot{--blue: #6ea8fe;--pink: #f589a3;--green: #6fd39a;--orange: #ffb867;--purple: #b794f6;--red: #ff7b72;--yellow: #ffd479;--key: #2e2f36;--key-lit: #6ea8fe;position:relative;width:100%;aspect-ratio:1;container-type:inline-size;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Helvetica Neue,sans-serif;color:#f5f5f7;-webkit-font-smoothing:antialiased;user-select:none}.spot *{box-sizing:border-box}.spot .screen{position:absolute;left:6%;top:5%;width:88%;height:66%;border-radius:2.6cqw;background:linear-gradient(160deg,#30323f,#1b1c23);box-shadow:0 0 0 .25cqw #ffffff24,0 3cqw 6cqw #0000004d;overflow:hidden;isolation:isolate}.spot .win{position:absolute;border-radius:1.6cqw;background:#2c2c31;box-shadow:0 0 0 .2cqw #ffffff21,0 1.5cqw 3cqw #00000073;overflow:hidden}.spot .win .bar{height:3.6cqw;display:flex;gap:.7cqw;align-items:center;padding-left:1.4cqw;background:#ffffff0d}.spot .win .bar i{width:1.1cqw;height:1.1cqw;border-radius:50%;background:#f7756c}.spot .win .bar i:nth-child(2){background:#f6c55b}.spot .win .bar i:nth-child(3){background:#62c96f}.spot .win .body{padding:1.8cqw;display:flex;flex-direction:column;gap:1.2cqw}.spot .win .body b{display:block;height:1.2cqw;border-radius:1cqw;background:#ffffff24}.spot .win .body b:nth-child(1){width:70%}.spot .win .body b:nth-child(2){width:90%}.spot .win .body b:nth-child(3){width:55%}.spot .win .body b:nth-child(4){width:80%}.spot .win.blue .body b:first-child{background:var(--blue)}.spot .win.pink .body b:first-child{background:var(--pink)}.spot .win.green .body b:first-child{background:var(--green)}.spot .win.orange .body b:first-child{background:var(--orange)}.spot .cursor{position:absolute;width:4.6cqw;height:4.6cqw;z-index:50;filter:drop-shadow(0 .3cqw .4cqw rgba(0,0,0,.4))}.spot .cursor .press{display:block;width:100%;height:100%;transform-origin:14% 10%}.spot .cursor svg{display:block;width:100%;height:100%}.spot .keys{position:absolute;left:0;right:0;top:78%;display:flex;justify-content:center;gap:1.4cqw}.spot .key{min-width:8.5cqw;height:8.5cqw;padding:0 2.2cqw;border-radius:1.8cqw;background:var(--key);box-shadow:inset 0 -.6cqw #00000059,0 0 0 .2cqw #ffffff26;display:flex;align-items:center;justify-content:center;font-size:3.8cqw;font-weight:600;color:#f5f5f7}.spot .pill{display:inline-flex;align-items:center;gap:1.2cqw;padding:1.2cqw 2.4cqw;border-radius:99cqw;background:#2c2c31eb;box-shadow:0 0 0 .2cqw #ffffff24,0 1cqw 2cqw #00000059;font-size:3cqw;font-weight:600;white-space:nowrap}.spot .dock{position:absolute;left:50%;bottom:3%;transform:translate(-50%);display:flex;gap:1.6cqw;padding:1.2cqw 1.2cqw 2.2cqw;border-radius:3.4cqw;background:#ffffff1f;box-shadow:inset 0 0 0 .2cqw #ffffff24}.spot .tile{position:relative;width:6.6cqw;height:6.6cqw;border-radius:1.6cqw}.spot .tile.running:after{content:"";position:absolute;left:50%;bottom:-1.5cqw;width:.8cqw;height:.8cqw;margin-left:-.4cqw;border-radius:50%;background:#ffffffbf}.spot .screen:after{content:"";position:absolute;inset:-20%;pointer-events:none;z-index:-1;background:radial-gradient(40% 40% at 30% 30%,rgba(160,180,255,.1),transparent 70%)}.spot.playing .screen:after{animation:spot-ambient var(--d) cubic-bezier(.37,0,.63,1) both}@keyframes spot-ambient{0%,to{transform:translate(0)}50%{transform:translate(28%,18%)}}@media(prefers-reduced-motion:reduce){.spot *{animation-duration:1ms!important;animation-delay:0s!important}}.spot .cursor svg{transform:translate(-12.5%,-10.4%)}.s-snap .snap-a{left:8%;top:14%;width:46%;height:52%;z-index:3}.s-snap .snap-b{left:40%;top:30%;width:45%;height:50%;z-index:2}.s-snap .snap-c{left:52%;top:12%;width:38%;height:40%;z-index:1}.s-snap .snap-cursor{left:70%;top:80%}.s-snap .snap-preview{position:absolute;left:1.2%;top:4%;width:48.2%;height:94%;border-radius:1.6cqw;background:#6ea8fe38;box-shadow:inset 0 0 0 .3cqw #6ea8febf;opacity:0}.s-snap .keys{opacity:0}.s-snap.playing .snap-cursor{animation:snap-cursor-x var(--d) both,snap-cursor-y var(--d) both}.s-snap.playing .snap-cursor .press{animation:snap-press var(--d) both}.s-snap.playing .snap-a{animation:snap-a var(--d) both}.s-snap.playing .snap-b{animation:snap-b var(--d) both}.s-snap.playing .snap-c{animation:snap-c var(--d) both}.s-snap.playing .snap-preview{animation:snap-preview var(--d) both}.s-snap.playing .snap-keys-1{animation:snap-keys-1 var(--d) both}.s-snap.playing .snap-keys-2{animation:snap-keys-2 var(--d) both}.s-snap.playing .snap-keys-1 .key:last-child{animation:snap-key-1 var(--d) both}.s-snap.playing .snap-keys-2 .key:last-child{animation:snap-key-2 var(--d) both}@keyframes snap-a{0%,14.5%{left:8%;top:14%;width:46%;height:52%;transform:none;animation-timing-function:cubic-bezier(.2,0,0,1)}16%{left:8%;top:14%;width:46%;height:52%;transform:scale(1.025);animation-timing-function:cubic-bezier(.3,0,.1,1)}24%{left:-21.5%;top:28%;width:46%;height:52%;transform:scale(1.025)}25%{left:-21.5%;top:28%;width:46%;height:52%;transform:scale(1.025);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}29%,53%{left:1.2%;top:4%;width:48.2%;height:94%;transform:none}53%{animation-timing-function:cubic-bezier(.34,1.56,.64,1)}57%,86%{left:1.2%;top:4%;width:31.7%;height:94%;transform:none}86%{animation-timing-function:cubic-bezier(.2,0,0,1)}93%,to{left:8%;top:14%;width:46%;height:52%;transform:none}}@keyframes snap-b{0%,36%{left:40%;top:30%;width:45%;height:50%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}40%,54%{left:50.6%;top:4%;width:48.2%;height:94%}54%{animation-timing-function:cubic-bezier(.34,1.56,.64,1)}58%,85%{left:34.15%;top:4%;width:31.7%;height:94%}85%{animation-timing-function:cubic-bezier(.2,0,0,1)}92%,to{left:40%;top:30%;width:45%;height:50%}}@keyframes snap-c{0%,55%{left:52%;top:12%;width:38%;height:40%;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}59%,84%{left:67.1%;top:4%;width:31.7%;height:94%}84%{animation-timing-function:cubic-bezier(.2,0,0,1)}91%,to{left:52%;top:12%;width:38%;height:40%}}@keyframes snap-preview{0%,19%{opacity:0;transform:scale(.92);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}22%,25%{opacity:1;transform:none}28%,to{opacity:0;transform:none}}.s-clip .clip-source{left:4%;top:8%;width:44%;height:84%}.s-clip .clip-doc{left:52%;top:8%;width:44%;height:84%}.s-clip .clip-item{position:absolute;left:6%;right:6%;display:flex;align-items:center}.s-clip .clip-i1{top:14%;height:12%}.s-clip .clip-i2{top:32%;height:12%}.s-clip .clip-i3{top:50%;height:34%}.s-clip .clip-sel{position:absolute;inset:0;border-radius:.8cqw;background:#6ea8fe6b;transform-origin:left;transform:scaleX(0)}.s-clip .clip-text{position:relative;padding-left:1.4cqw;font-size:3cqw;font-weight:500;white-space:nowrap}.s-clip .link{color:#9cc3ff;text-decoration:underline}.s-clip .clip-img{position:relative;display:block;width:100%;height:100%;border-radius:1cqw;background:linear-gradient(135deg,var(--orange),var(--pink) 55%,var(--purple))}.s-clip .clip-i3 .clip-sel{inset:-.8cqw;transform:none;opacity:0;background:none;box-shadow:0 0 0 .6cqw var(--blue);border-radius:1.6cqw}.s-clip .clip-img.big{width:36cqw;height:20cqw;border-radius:1.4cqw}.s-clip .clip-slot{position:absolute;left:8%;right:8%;top:14%;height:12%;display:flex;align-items:center;font-size:3cqw;font-weight:500}.s-clip .clip-caret{width:.35cqw;height:4cqw;background:#f5f5f7;opacity:0}.s-clip .clip-pasted{opacity:0;margin-left:.4cqw;transform-origin:left center}.s-clip .clip-lines{position:absolute;left:8%;right:8%;top:34%;display:flex;flex-direction:column;gap:1.6cqw}.s-clip .clip-lines b{display:block;height:1.2cqw;border-radius:1cqw;background:#ffffff24}.s-clip .clip-lines b:nth-child(2){width:80%}.s-clip .clip-lines b:nth-child(3){width:60%}.s-clip .clip-card{position:absolute;left:16%;top:20%;width:68%;height:56%;border-radius:2.4cqw;z-index:30;background:#3c3d46e6;backdrop-filter:blur(2cqw);box-shadow:0 0 0 .25cqw #ffffff29,0 3cqw 6cqw #00000080;opacity:0}.s-clip .clip-e{position:absolute;inset:0 0 18%;display:flex;align-items:center;justify-content:center;font-size:4.6cqw;font-weight:600;opacity:0}.s-clip .clip-n{position:absolute;left:0;right:0;bottom:6%;margin:0 auto;width:max-content;opacity:0}.s-clip .clip-cursor{left:75%;top:85%}.s-clip .keys{opacity:0}.s-clip.playing .clip-cursor{animation:clip-cursor-x var(--d) both,clip-cursor-y var(--d) both}.s-clip.playing .clip-cursor .press{animation:clip-press var(--d) both}.s-clip.playing .clip-i1 .clip-sel{animation:clip-sel1 var(--d) both}.s-clip.playing .clip-i2 .clip-sel{animation:clip-sel2 var(--d) both}.s-clip.playing .clip-i3 .clip-sel{animation:clip-sel3 var(--d) both}.s-clip.playing .clip-caret{animation:clip-caret var(--d) step-end both}.s-clip.playing .clip-pasted{animation:clip-pasted var(--d) both}.s-clip.playing .clip-card{animation:clip-card var(--d) both}.s-clip.playing .clip-e1,.s-clip.playing .clip-n1{animation:clip-s1 var(--d) both}.s-clip.playing .clip-e2,.s-clip.playing .clip-n2{animation:clip-s2 var(--d) both}.s-clip.playing .clip-keys-c{animation:clip-keys-c var(--d) both}.s-clip.playing .clip-c{animation:clip-c var(--d) both}.s-clip.playing .clip-keys-v{animation:clip-keys-v var(--d) both}.s-clip.playing .clip-v{animation:clip-v var(--d) both}@keyframes clip-sel1{0%,8%{transform:scaleX(0);opacity:1;animation-timing-function:cubic-bezier(.3,0,.1,1)}13%,18%{transform:scaleX(1);opacity:1}20%,to{transform:scaleX(1);opacity:0}}@keyframes clip-sel2{0%,19%{transform:scaleX(0);opacity:1;animation-timing-function:cubic-bezier(.3,0,.1,1)}23.5%,29%{transform:scaleX(1);opacity:1}31%,to{transform:scaleX(1);opacity:0}}@keyframes clip-sel3{0%,30.6%{opacity:0;transform:scale(.9);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}33%,38%{opacity:1;transform:none}40%,to{opacity:0;transform:none}}@keyframes clip-caret{0%{opacity:0}41%{opacity:1}45%{opacity:0}49%{opacity:1}53%{opacity:0}57%{opacity:1}61%{opacity:0}to{opacity:0}}@keyframes clip-s1{0%,47%{opacity:0}48%,56%{opacity:1}57%,to{opacity:0}}@keyframes clip-s2{0%,56.6%{opacity:0;transform:scale(.88);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}59%,to{opacity:1;transform:none}}.s-vol .vol-panel{position:absolute;left:8%;top:8%;width:84%;height:84%;border-radius:3cqw;background:#28282df2;box-shadow:0 0 0 .25cqw #ffffff24,0 3cqw 6cqw #0006}.s-vol .vol-title{position:absolute;left:5%;top:3.5%;font-size:2.6cqw;font-weight:600;color:#f5f5f78c}.s-vol .vol-row{position:absolute;left:4%;width:92%;height:26%;border-radius:2cqw;background:#ffffff0f}.s-vol .vol-music{top:12%}.s-vol .vol-web{top:41%}.s-vol .vol-call{top:70%}.s-vol .vol-tile{position:absolute;left:4%;top:12%;width:5.4cqw;height:5.4cqw;border-radius:1.3cqw}.s-vol .vol-name{position:absolute;left:14%;top:12%;line-height:5.4cqw;font-size:3.3cqw;font-weight:600}.s-vol .vol-device{position:absolute;right:4%;top:12%;height:5.4cqw;display:grid;justify-items:end;align-items:center;font-size:2.6cqw;color:#f5f5f799}.s-vol .vol-device>span{grid-area:1 / 1;white-space:nowrap}.s-vol .vol-dev-b{opacity:0;color:#9cc3ff;font-weight:600}.s-vol .vol-speaker{position:absolute;left:4%;top:62%;width:4cqw;height:4cqw;color:#f5f5f7cc}.s-vol .vol-speaker svg{position:absolute;inset:0;width:100%;height:100%}.s-vol .vol-off{opacity:0;color:var(--red)}.s-vol .vol-track{position:absolute;left:16%;right:5%;top:calc(72% - .6cqw);height:1.2cqw;border-radius:1cqw;background:#ffffff24}.s-vol .vol-fill{position:absolute;left:0;top:0;bottom:0;border-radius:1cqw;background:#f5f5f7}.s-vol .vol-knob{position:absolute;top:50%;width:3.6cqw;height:3.6cqw;margin:-1.8cqw 0 0 -1.8cqw;border-radius:50%;background:#fff;box-shadow:0 .4cqw 1cqw #0006}.s-vol .vol-cursor{left:84%;top:76.33%}.s-vol .vol-speaker,.s-vol .vol-device{transform-origin:center}.s-vol.playing .vol-cursor{animation:vol-cursor-x var(--d) both,vol-cursor-y var(--d) both}.s-vol.playing .vol-cursor .press{animation:vol-press var(--d) both}.s-vol.playing .vol-music .vol-fill{animation:vol-music-fill var(--d) both}.s-vol.playing .vol-music .vol-knob{animation:vol-music-knob var(--d) both}.s-vol.playing .vol-web .vol-fill{animation:vol-web-fill var(--d) both}.s-vol.playing .vol-web .vol-knob{animation:vol-web-knob var(--d) both}.s-vol.playing .vol-web .vol-speaker{animation:vol-tap var(--d) both}.s-vol.playing .vol-web .vol-on{animation:vol-web-on var(--d) step-end both}.s-vol.playing .vol-web .vol-off{animation:vol-web-off var(--d) step-end both}.s-vol.playing .vol-call .vol-device{animation:vol-device var(--d) both}.s-vol.playing .vol-dev-a{animation:vol-dev-a var(--d) step-end both}.s-vol.playing .vol-dev-b{animation:vol-dev-b var(--d) step-end both}@keyframes vol-music-knob{0%,8%{left:50%;transform:none;animation-timing-function:cubic-bezier(.3,0,.1,1)}8.6%{left:50%;transform:scale(1.2);animation-timing-function:cubic-bezier(.3,0,.1,1)}16%{left:85%;transform:scale(1.2);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}18%,76%{left:85%;transform:none;animation-timing-function:cubic-bezier(.3,0,.1,1)}76.6%{left:85%;transform:scale(1.2);animation-timing-function:cubic-bezier(.3,0,.1,1)}84%{left:50%;transform:scale(1.2);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}86%,to{left:50%;transform:none}}@keyframes vol-music-fill{0%,8.6%{width:50%;animation-timing-function:cubic-bezier(.3,0,.1,1)}16%,76.6%{width:85%;animation-timing-function:cubic-bezier(.3,0,.1,1)}84%,to{width:50%}}@keyframes vol-web-knob{0%,23%{left:60%;transform:none;animation-timing-function:cubic-bezier(.3,0,.1,1)}23.6%{left:60%;transform:scale(1.2);animation-timing-function:cubic-bezier(.3,0,.1,1)}31%{left:25%;transform:scale(1.2);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}33%,62%{left:25%;transform:none;animation-timing-function:cubic-bezier(.3,0,.1,1)}62.6%{left:25%;transform:scale(1.2);animation-timing-function:cubic-bezier(.3,0,.1,1)}70%{left:60%;transform:scale(1.2);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}72%,to{left:60%;transform:none}}@keyframes vol-web-fill{0%,23.6%{width:60%;background:#f5f5f7;animation-timing-function:cubic-bezier(.3,0,.1,1)}31%,38.6%{width:25%;background:#f5f5f7}39.6%,55.6%{width:25%;background:#f5f5f74d}56.6%,62.6%{width:25%;background:#f5f5f7;animation-timing-function:cubic-bezier(.3,0,.1,1)}70%,to{width:60%;background:#f5f5f7}}@keyframes vol-tap{0%,38.6%{transform:none}39.4%{transform:scale(.8)}40.6%{transform:scale(1.2)}42%,55.6%{transform:none}56.4%{transform:scale(.8)}57.6%{transform:scale(1.2)}59%,to{transform:none}}@keyframes vol-device{0%,47%{transform:none}47.8%{transform:scale(.9)}49%{transform:scale(1.08)}50.5%,94%{transform:none}94.8%{transform:scale(.9)}96%{transform:scale(1.08)}97.5%,to{transform:none}}@keyframes vol-web-on{0%{opacity:1}39.4%{opacity:0}56.4%{opacity:1}to{opacity:1}}@keyframes vol-web-off{0%{opacity:0}39.4%{opacity:1}56.4%{opacity:0}to{opacity:0}}@keyframes vol-dev-a{0%{opacity:1}47.8%{opacity:0}94.8%{opacity:1}to{opacity:1}}@keyframes vol-dev-b{0%{opacity:0}47.8%{opacity:1}94.8%{opacity:0}to{opacity:0}}.s-dock .dock-panel{position:absolute;left:4.68%;top:48.4%;width:72.3%;height:30.6%;display:flex;gap:.6cqw;padding:1.2cqw;border-radius:3.2cqw;background:#3a3a40e0;box-shadow:0 0 0 .25cqw #ffffff29,0 2.4cqw 5cqw #00000073;opacity:0;transform:translateY(1.5cqw);transform-origin:50% 100%}.s-dock .dock-card{flex:1;display:flex;flex-direction:column;gap:.8cqw;padding:.9cqw;border-radius:2cqw}.s-dock .dock-head{display:flex;align-items:center;gap:.9cqw}.s-dock .dock-icon{width:3.2cqw;height:3.2cqw;border-radius:.8cqw;background:var(--pink)}.s-dock .dock-title{font-size:2.3cqw;font-weight:500}.s-dock .dock-thumb{flex:1;border-radius:1.2cqw;background:#2c2c31;padding:1.4cqw;display:flex;flex-direction:column;gap:.9cqw;box-shadow:inset 0 0 0 .15cqw #ffffff1a}.s-dock .dock-thumb b{display:block;height:.9cqw;border-radius:1cqw;background:#ffffff29}.s-dock .dock-thumb b:first-child{width:70%;background:var(--pink)}.s-dock .dock-thumb b:nth-child(3){width:55%}.s-dock .dock-front{left:16%;top:8%;width:68%;height:64%;opacity:0}.s-dock .dock-cursor{left:72%;top:28%}.s-dock .dock .tile:nth-child(2){transform-origin:50% 100%}.s-dock.playing .dock-panel{animation:dock-panel var(--d) both}.s-dock.playing .dock-card-1{animation:dock-card var(--d) both}.s-dock.playing .dock-front{animation:dock-front var(--d) both}.s-dock.playing .dock-cursor{animation:dock-cursor-x var(--d) both,dock-cursor-y var(--d) both}.s-dock.playing .dock-cursor .press{animation:dock-press var(--d) both}.s-dock.playing .dock .tile:nth-child(2){animation:dock-tile var(--d) both}@keyframes dock-card{0%,28%{background:transparent;transform:none}30%,34%{background:#ffffff21;transform:none}34.6%{background:#ffffff2e;transform:scale(.95)}35.8%{background:#ffffff2e;transform:scale(1.03)}37%,to{background:transparent;transform:none}}@keyframes dock-front{0%,35%{opacity:0;left:30%;top:52%;width:21.6%;height:24%;animation-timing-function:cubic-bezier(.34,1.4,.64,1)}35.5%{opacity:1;left:30%;top:52%;width:21.6%;height:24%;animation-timing-function:cubic-bezier(.34,1.4,.64,1)}42%,70%{opacity:1;left:16%;top:8%;width:68%;height:64%;animation-timing-function:cubic-bezier(.55,0,.9,.4)}77%{opacity:1;left:37.5%;top:84.5%;width:6.4%;height:8.5%}78%,to{opacity:0;left:37.5%;top:84.5%;width:6.4%;height:8.5%}}@keyframes dock-tile{0%,77%{transform:none}78%{transform:scale(1.12,.86)}80%{transform:scale(.94,1.08)}82.5%,to{transform:none}}.s-color .color-swatch-tile{position:absolute;top:33.65%;width:17%;height:22.7%;border-radius:2.4cqw}.s-color .color-s0{left:10%}.s-color .color-s1{left:31%}.s-color .color-s2{left:52%}.s-color .color-s3{left:73%}.s-color .color-loupe{position:absolute;left:18.5%;top:45%;width:0;height:0;z-index:5}.s-color .color-lens{position:absolute;left:-8cqw;top:-8cqw;width:16cqw;height:16cqw;border-radius:50%;background:#6ea8fe;box-shadow:0 0 0 .6cqw #fff,0 1.6cqw 3cqw #0006;overflow:hidden;opacity:0}.s-color .color-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.12) .15cqw,transparent .15cqw),linear-gradient(90deg,rgba(0,0,0,.12) .15cqw,transparent .15cqw);background-size:2.1cqw 2.1cqw}.s-color .color-center{position:absolute;left:50%;top:50%;width:2.1cqw;height:2.1cqw;margin:-1.05cqw 0 0 -1.05cqw;box-shadow:0 0 0 .3cqw #fff,0 0 0 .5cqw #00000040}.s-color .keys{opacity:0}.s-color .color-copied{position:absolute;left:0;right:0;top:79%;display:flex;justify-content:center;opacity:0}.s-color .color-copied .pill{font-size:3.6cqw;padding:1.6cqw 3cqw}.s-color .color-swatch{width:4cqw;height:4cqw;border-radius:50%;background:#ffb867;box-shadow:0 0 0 .3cqw #fffc}.s-color.playing .color-loupe{animation:color-loupe-x var(--d) both,color-loupe-y var(--d) both}.s-color.playing .color-lens{animation:color-lens var(--d) both,color-tint var(--d) both}.s-color.playing .color-keys{animation:color-keys var(--d) both}.s-color.playing .color-c{animation:color-c var(--d) both}.s-color.playing .color-copied{animation:color-copied var(--d) both}.s-color.playing .color-s2{animation:color-picked var(--d) both}@keyframes color-lens{0%,12%{opacity:0;transform:scale(.4);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}16%,46%{opacity:1;transform:none}46.8%{transform:scale(.86)}48%{transform:scale(1.08)}49.5%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.3,0,1,1)}52%,to{opacity:0;transform:scale(.5)}}@keyframes color-tint{0%,16%{background-color:#6ea8fe;animation-timing-function:cubic-bezier(.3,0,.1,1)}24%,30%{background-color:#6fd39a;animation-timing-function:cubic-bezier(.3,0,.1,1)}38%,to{background-color:#ffb867}}@keyframes color-picked{0%,47%{transform:none}48.5%{transform:scale(.94)}50.5%{transform:scale(1.05)}53%,to{transform:none}}.s-focus .focus-a{left:4%;top:12%;width:40%;height:66%;z-index:3}.s-focus .focus-b{left:32%;top:22%;width:38%;height:66%;z-index:2;filter:brightness(.6)}.s-focus .focus-c{left:58%;top:10%;width:38%;height:66%;z-index:1;filter:brightness(.6)}.s-focus .focus-cursor{left:15%;top:58%}.s-focus.playing .focus-a{animation:focus-a var(--d) step-end both,focus-pop-a var(--d) both}.s-focus.playing .focus-b{animation:focus-b var(--d) step-end both,focus-pop-b var(--d) both}.s-focus.playing .focus-c{animation:focus-c var(--d) step-end both,focus-pop-c var(--d) both}.s-focus.playing .focus-cursor{animation:focus-x var(--d) both,focus-y var(--d) both}@keyframes focus-x{0%,8%{left:15%;animation-timing-function:cubic-bezier(.45,0,.55,1)}45%,55%{left:85%;animation-timing-function:cubic-bezier(.45,0,.55,1)}92%,to{left:15%}}@keyframes focus-y{0%,8%{top:58%;animation-timing-function:cubic-bezier(.37,0,.63,1)}26.5%{top:64%;animation-timing-function:cubic-bezier(.37,0,.63,1)}45%,55%{top:56%;animation-timing-function:cubic-bezier(.37,0,.63,1)}73.5%{top:50%;animation-timing-function:cubic-bezier(.37,0,.63,1)}92%,to{top:58%}}.s-awake .awake-card{position:absolute;left:9%;top:9%;width:82%;padding:4cqw;border-radius:3cqw;display:flex;flex-direction:column;gap:1.6cqw;background:#28282df2;box-shadow:0 0 0 .25cqw #ffffff24,0 3cqw 6cqw #0006}.s-awake .awake-head{display:flex;align-items:center;gap:2.4cqw;padding-bottom:2cqw}.s-awake .awake-tile{width:9cqw;height:9cqw;border-radius:2.2cqw;background:var(--orange);color:#fff;display:grid;place-items:center}.s-awake .awake-tile svg{width:60%;height:60%}.s-awake .awake-name{flex:1;font-size:4.4cqw;font-weight:700}.s-awake .awake-switch{position:relative;width:9cqw;height:5.4cqw;border-radius:3cqw;background:var(--green)}.s-awake .awake-switch i{position:absolute;right:.5cqw;top:.5cqw;width:4.4cqw;height:4.4cqw;border-radius:50%;background:#fff}.s-awake .awake-switch.small{width:6.4cqw;height:3.8cqw}.s-awake .awake-switch.small i{width:2.9cqw;height:2.9cqw;right:.45cqw;top:.45cqw}.s-awake .awake-row{display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding:2.4cqw 2.6cqw;border-radius:1.8cqw;background:#ffffff0f;font-size:3cqw}.s-awake .awake-value{color:#f5f5f799}.s-awake .awake-pill{position:absolute;left:0;right:0;top:80%;display:flex;justify-content:center}.s-awake .awake-pill .pill{font-size:3.4cqw;padding:1.6cqw 3cqw}.s-awake .awake-dot{width:2.2cqw;height:2.2cqw;border-radius:50%;background:var(--green);box-shadow:0 0 1.4cqw var(--green)}.s-remap .remap-row{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:3cqw}.s-remap .remap-row-1{top:13%}.s-remap .remap-row-2{top:50%}.s-remap .remap-device{font-size:2.6cqw;color:#f5f5f7b3}.s-remap .remap-line{display:flex;align-items:center;justify-content:center;gap:3.4cqw}.s-remap .key{height:13cqw;font-size:4cqw;padding:0 3.6cqw;gap:1.4cqw}.s-remap .remap-to-1,.s-remap .remap-to-2{background:var(--blue)}.s-remap .remap-to-1{min-width:15cqw}.s-remap .remap-to-2 svg{width:4.4cqw;height:4.4cqw}.s-remap .remap-arrow{width:5cqw;height:5cqw;color:#8e8e93}.s-remap .remap-arrow svg{display:block;width:100%;height:100%}.s-remap .remap-mouse{position:relative;width:13cqw;height:20cqw;border-radius:6.5cqw;background:var(--key);box-shadow:inset 0 -.6cqw #00000059,0 0 0 .2cqw #ffffff26}.s-remap .remap-mouse:before{content:"";position:absolute;left:50%;top:0;width:.25cqw;height:40%;background:#ffffff26}.s-remap .remap-button{position:absolute;left:-.6cqw;top:46%;width:1.6cqw;height:5cqw;border-radius:1cqw;background:var(--blue)}.s-mid .mid-browser{position:absolute;left:8%;top:6%;width:84%;height:48%;border-radius:2cqw;overflow:hidden;background:#2c2c31;box-shadow:0 0 0 .2cqw #ffffff21,0 2cqw 4cqw #0006}.s-mid .mid-tabs{display:flex;gap:1cqw;padding:1.6cqw 1.6cqw 0;background:#ffffff0d;height:7.4cqw}.s-mid .mid-tab{display:flex;align-items:center;padding:0 2.4cqw;border-radius:1.2cqw 1.2cqw 0 0;font-size:2.6cqw;font-weight:600}.s-mid .mid-tab-1{background:#2c2c31}.s-mid .mid-tab-2{background:#ffffff14;color:#f5f5f7bf;opacity:0;transform:translateY(100%)}.s-mid .mid-page{padding:3cqw;display:flex;flex-direction:column;gap:1.8cqw}.s-mid .mid-page b{display:block;height:1.4cqw;width:80%;border-radius:1cqw;background:#ffffff24}.s-mid .mid-page b:nth-child(2){width:60%}.s-mid .mid-link{font-size:3.4cqw;font-weight:600;color:#9cc3ff;text-decoration:underline}.s-mid .mid-cursor{left:13%;top:42%}.s-mid .mid-pad{position:absolute;left:22%;top:62%;width:56%;height:32%;border-radius:2.4cqw;background:linear-gradient(160deg,#3a3a40,#2a2a2f);box-shadow:0 0 0 .25cqw #ffffff26,0 2cqw 4cqw #00000059;display:flex;justify-content:center;align-items:center;gap:4cqw}.s-mid .mid-finger{width:7cqw;height:7cqw;border-radius:50%;background:#ffffffd9;opacity:0;transform:scale(1.4)}.s-mid .mid-finger:nth-child(2){margin-top:-4cqw}.s-mid .mid-link,.s-mid .mid-tab-2{transform-origin:left center}.s-mid.playing .mid-cursor{animation:mid-cursor-x var(--d) both,mid-cursor-y var(--d) both}.s-mid.playing .mid-finger{animation:mid-finger var(--d) both}.s-mid.playing .mid-finger:nth-child(2){animation-delay:40ms}.s-mid.playing .mid-finger:nth-child(3){animation-delay:80ms}.s-mid.playing .mid-tab-2{animation:mid-tab var(--d) both}.s-mid.playing .mid-link{animation:mid-link var(--d) both}.s-mid.playing .mid-pad{animation:mid-pad var(--d) both}@keyframes mid-finger{0%,8%{opacity:0;transform:scale(1.5);animation-timing-function:cubic-bezier(.2,0,0,1)}10.5%{opacity:1;transform:scale(1)}11.5%{opacity:1;transform:scale(1.15,.8)}12.8%{opacity:1;transform:scale(.95,1.05)}14%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.3,0,1,1)}16.5%,44%{opacity:0;transform:scale(1.3);animation-timing-function:cubic-bezier(.2,0,0,1)}46.5%{opacity:1;transform:scale(1)}47.5%{opacity:1;transform:scale(1.15,.8)}48.8%{opacity:1;transform:scale(.95,1.05)}50%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.3,0,1,1)}52.5%,to{opacity:0;transform:scale(1.3)}}@keyframes mid-pad{0%,11%{transform:none}11.8%{transform:scale(.985)}13.5%,47%{transform:none}47.8%{transform:scale(.985)}49.5%,to{transform:none}}@keyframes mid-link{0%,11%{transform:none}12%{transform:scale(.94)}13.5%{transform:scale(1.05)}15%,to{transform:none}}@keyframes mid-tab{0%,13.5%{opacity:0;transform:translateY(100%) scale(.8);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}18%,48%{opacity:1;transform:none}48%{animation-timing-function:cubic-bezier(.3,0,1,1)}49%{opacity:1;transform:scale(.94);animation-timing-function:cubic-bezier(.3,0,1,1)}52%,to{opacity:0;transform:translateY(100%) scale(.8)}}.s-quit .quit-win{left:16%;top:10%;width:64%;height:62%;transform-origin:50% 50%}.s-quit .quit-cursor{left:60%;top:55%}.s-quit .quit-pill{position:absolute;left:0;right:0;top:79%;display:flex;justify-content:center;opacity:0}.s-quit .quit-pill .pill{font-size:3.4cqw;padding:1.6cqw 3cqw}.s-quit .dock .tile:nth-child(2){transform-origin:50% 100%}.s-quit.playing .quit-win{animation:quit-win var(--d) both}.s-quit.playing .quit-win .bar i:first-child{animation:quit-close var(--d) both}.s-quit.playing .quit-cursor{animation:quit-cursor-x var(--d) both,quit-cursor-y var(--d) both}.s-quit.playing .quit-cursor .press{animation:quit-press var(--d) both}.s-quit.playing .dock .tile:nth-child(2){animation:quit-tile var(--d) both}.s-quit.playing .dock .tile:nth-child(2):after{animation:quit-dot var(--d) both}.s-quit.playing .quit-pill{animation:quit-pill var(--d) both}@keyframes quit-close{0%,21%{transform:none}21.8%{transform:scale(.7)}23%{transform:scale(1.6)}25%,to{transform:none}}@keyframes quit-win{0%,22.5%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.3,0,1,1)}27%,56%{opacity:0;transform:scale(.82);animation-timing-function:cubic-bezier(.34,1.4,.64,1)}63%,to{opacity:1;transform:none}}@keyframes quit-tile{0%,49.6%{transform:none;animation-timing-function:cubic-bezier(.2,0,0,1)}52%{transform:translateY(-3cqw);animation-timing-function:cubic-bezier(.5,0,1,1)}54.5%{transform:translateY(0) scale(1.08,.9);animation-timing-function:cubic-bezier(.2,0,0,1)}56.5%{transform:translateY(-1.4cqw);animation-timing-function:cubic-bezier(.5,0,1,1)}58.5%{transform:none}to{transform:none}}@keyframes quit-dot{0%,29%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.3,0,1,1)}31%,55%{opacity:0;transform:scale(0);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}58%,to{opacity:1;transform:none}}