.ds-scene{--ds-screen:#111;--ds-composer:#15161a;--ds-ink:#f4f4f5;position:relative;isolation:isolate;width:100%;min-width:0;height:clamp(560px,54vw,740px);background:radial-gradient(ellipse at 50% 60%,#403c38 0,#272522 45%,#201e1b 78%);border:1px solid #ffffff08;border-radius:8px;overflow:hidden;perspective:1400px;container-type:inline-size}
.ds-laptop{position:absolute;width:77%;left:6%;top:10%;transform:rotateY(5deg) rotateX(3deg) rotateZ(-2deg);transform-style:preserve-3d;filter:drop-shadow(0 36px 24px #0008)}
.ds-lid{position:relative;padding:12px 9px 10px;border-radius:15px 15px 5px 5px;background:linear-gradient(120deg,#555657,#18191a 35%,#3c3d3e);border:1px solid #737476;box-shadow:inset 0 0 0 2px #121314}
.ds-webcam{position:absolute;width:3px;height:3px;border-radius:50%;background:#1f3a44;box-shadow:0 0 0 2px #101112;left:50%;top:4px}.ds-desktop{position:relative;overflow:hidden;border-radius:3px}.ds-screen picture,.ds-screen img{display:block;width:100%;height:auto}.ds-screen input{position:absolute;border:0;border-radius:0;min-width:0;font-family:inherit;outline:none;color:var(--ds-ink);padding:0 2px}.ds-screen input:focus-visible{outline:1px solid #8c80c8;outline-offset:2px}.ds-desktop-input{left:34.5%;top:55.2%;height:4.3%;width:50%;background:#1e2124;font-size:1.1cqw}.ds-desktop-input::placeholder{color:#79818d}.ds-plan{position:absolute;left:7.5%;bottom:2.3%;width:3.2%;height:2.5%;font-size:.85cqw;font-weight:600;text-align:center;background:#15191c;color:#e5e7ea}
.ds-hinge{height:6px;width:88%;margin:auto;background:linear-gradient(#151617,#66686a,#222425);border-radius:0 0 5px 5px}.ds-deck{position:relative;width:113%;height:112px;margin-left:-6.5%;background:linear-gradient(130deg,#9b9c9e,#77797b 36%,#b3b4b5);clip-path:polygon(6% 0,94% 0,100% 95%,99% 100%,1% 100%,0 95%);border-radius:3px 3px 8px 8px}.ds-keyboard{position:absolute;left:13%;right:13%;top:8%;height:57%;display:grid;grid-template-columns:repeat(14,1fr);gap:3px;transform:perspective(300px) rotateX(12deg);transform-origin:top}.ds-keyboard i{display:block;background:linear-gradient(#27282a,#1a1b1c);border-radius:2px;box-shadow:0 1px 0 #ddd5,inset 0 1px 1px #ffffff15}.ds-keyboard i:nth-last-child(5){grid-column:span 6}.ds-speaker{position:absolute;top:10%;height:48%;width:4%;background:radial-gradient(#393b3c .7px,transparent .9px) 0 0/3px 3px;opacity:.6}.ds-speaker-left{left:7%}.ds-speaker-right{right:7%}.ds-trackpad{position:absolute;left:39%;top:70%;width:22%;height:26%;border:1px solid #656769;border-bottom-color:#d4d5d5;border-radius:4px;background:#a5a6a74a}.ds-lip{width:111%;height:5px;margin-left:-5.5%;background:linear-gradient(90deg,#535557,#c3c5c6 35%,#a3a5a6 60%,#4c4d4e);border-radius:0 0 80px 80px}
.ds-phone-position{position:absolute;right:10%;top:21%;width:21%;max-width:250px;aspect-ratio:0.485;perspective:1200px;filter:drop-shadow(14px 28px 20px #0008)}.ds-phone{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(var(--ds-turn,-14deg)) rotateZ(4deg);transition:transform .7s cubic-bezier(.22,.7,.2,1);cursor:grab;touch-action:pan-y;outline-offset:10px;border-radius:34px}.ds-phone.ds-dragging{transition:none;cursor:grabbing}.ds-phone-front,.ds-phone-back{position:absolute;inset:0;border-radius:34px;backface-visibility:hidden;border:2px solid #8f9093;background:linear-gradient(120deg,#b5b4b7,#3d3e42 20%,#b6b5b7 50%,#4c4d50);padding:5px}.ds-phone-front{transform:translateZ(6px)}.ds-phone-glass{height:100%;border-radius:27px;overflow:hidden;background:var(--ds-screen);position:relative;border:1px solid #070708}.ds-mobile-app{position:absolute;top:6.5%;bottom:3%;left:0;right:0}.ds-mobile-app picture,.ds-mobile-app img{height:100%;object-fit:fill}.ds-island{position:absolute;top:2.1%;left:32%;width:36%;height:4%;background:#050506;z-index:3;border-radius:20px}.ds-island:after{content:"";position:absolute;right:9%;top:29%;width:5px;height:5px;border-radius:50%;background:radial-gradient(#143343,#080c13);box-shadow:0 0 0 1px #15171a}.ds-status{position:absolute;left:8%;right:8%;top:2.7%;display:flex;justify-content:space-between;font-size:.8cqw;font-weight:600;color:var(--ds-ink);line-height:1}.ds-home-bar{position:absolute;bottom:1%;left:33%;width:34%;height:3px;border-radius:5px;background:var(--ds-ink)}.ds-upgrade-mask{position:absolute;right:0;top:0;width:36%;height:7%;background:var(--ds-screen)}.ds-phone-input{left:7.5%;top:86.2%;height:6%;width:83%;background:var(--ds-composer);font-size:.95cqw}.ds-phone-input::placeholder{color:#85868d}.ds-phone-back{transform:rotateY(180deg) translateZ(6px);background:linear-gradient(135deg,#5a5761,#38363e 45%,#4d4954);box-shadow:inset 0 0 0 4px #ffffff0d}.ds-camera-plate{position:absolute;left:7%;top:4%;width:52%;aspect-ratio:1;border-radius:22%;background:linear-gradient(135deg,#66626d,#48444f);border:1px solid #aaa5b23f;box-shadow:3px 3px 6px #10101566,inset 1px 1px 2px #bcb7c24a;transform:translateZ(3px)}.ds-lens{position:absolute;width:38%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 37%,#293e58 0,#111a27 13%,#05070d 24%,#10121a 35%,#040509 45%,#17191f 57%,#62606a 60%,#23222a 67%,#77717d 70%,#29272e 73%);box-shadow:1px 2px 3px #000b}.ds-lens-one{left:7%;top:7%}.ds-lens-two{left:7%;bottom:7%}.ds-lens-three{right:7%;top:31%}.ds-flash{position:absolute;width:17%;aspect-ratio:1;right:18%;top:8%;border-radius:50%;background:radial-gradient(#eee8d7,#c9c4b8);border:2px solid #514d57}.ds-lidar{position:absolute;width:16%;aspect-ratio:1;right:18%;bottom:7%;background:#17151c;border-radius:50%;border:1px solid #77717d}.ds-camera-mic{position:absolute;width:3%;aspect-ratio:1;right:7%;bottom:17%;border-radius:50%;background:#111}.ds-phone-edge{position:absolute;top:6%;bottom:6%;width:12px;background:linear-gradient(90deg,#7c7b80,#bcbac0 50%,#535257);backface-visibility:visible}.ds-edge-left{left:-6px;transform:rotateY(90deg)}.ds-edge-right{right:-6px;transform:rotateY(90deg)}.ds-phone-edge i{position:absolute;width:5px;height:12%;top:23%;left:3px;border-radius:4px;background:#4f4e53;border:1px solid #bebcc3}.ds-edge-left i:nth-child(1){top:12%;height:5%}.ds-edge-left i:nth-child(3){top:38%}.ds-edge-right i{height:19%;top:27%}.ds-rotate{position:absolute;right:24px;bottom:24px;width:42px;height:42px;border-radius:50%;border:1px solid #ffffff2a;background:#ffffff05;color:#e0dcd5;display:grid;place-items:center;cursor:pointer;transition:background .2s}.ds-rotate:hover{background:#ffffff12}.ds-rotate svg{width:19px;height:19px}
.ds-hit{position:absolute;border:0;background:transparent;padding:0;border-radius:4px;cursor:pointer}.ds-hit:hover{background:#88888812}.ds-hit:active{background:#88888825}.ds-desktop-plus{left:34%;top:59.8%;width:3%;height:5%}.ds-desktop-effort{left:72%;top:59.8%;width:9%;height:5%}.ds-desktop-mic{left:81.3%;top:59.8%;width:2.5%;height:5%}.ds-desktop-call{left:84%;top:59.8%;width:2.5%;height:5%}.ds-projects,.ds-artifacts,.ds-plugins{left:1.5%;width:17%;height:4%}.ds-projects{top:22%}.ds-artifacts{top:26%}.ds-plugins{top:30%}.ds-phone-plus{left:7%;top:92%;width:12%;height:6%}.ds-phone-effort{left:18%;top:92%;width:23%;height:6%}.ds-phone-mic{left:75%;top:92%;width:10%;height:6%}.ds-phone-call{left:85%;top:92%;width:10%;height:6%}.ds-device-menu{position:absolute;z-index:5;background:#242528;border:1px solid #ffffff1a;border-radius:8px;padding:5px;box-shadow:0 8px 25px #0005;color:#eee;min-width:125px}.ds-device-menu button{border:0;background:none;color:inherit;display:block;padding:8px;width:100%;text-align:left;font:inherit;font-size:11px;cursor:pointer;border-radius:4px}.ds-device-menu button:hover{background:#8882}.ds-desktop .ds-device-menu{left:34%;bottom:40%}.ds-desktop .ds-effort-menu{left:70%}.ds-mobile-app .ds-device-menu{left:7%;bottom:8%}.ds-wave{position:absolute;align-items:center;justify-content:center;gap:3px;background:var(--ds-composer);border-radius:20px;pointer-events:none}.ds-wave:not([hidden]){display:flex}.ds-desktop .ds-wave{left:44%;top:55%;width:22%;height:8%}.ds-mobile-app .ds-wave{left:18%;top:86%;width:60%;height:6%}.ds-wave i{width:2px;height:30%;border-radius:4px;background:#9b8dd5;animation:ds-sound .85s ease-in-out infinite alternate}.ds-wave i:nth-child(3n){animation-delay:-.6s}.ds-wave i:nth-child(2n){animation-delay:-.3s}.ds-wave i:nth-child(5n){animation-delay:-.15s}@keyframes ds-sound{to{height:75%}}
@media(prefers-color-scheme:light){.ds-scene{--ds-screen:#fff;--ds-composer:#f1f3f6;--ds-ink:#24262a}.ds-desktop-input{background:#f6f7f9;color:#33373c}.ds-plan{background:#f6f7f8;color:#292b31}.ds-device-menu{background:#fff;border-color:#ddd;color:#25262a}.ds-phone-input{background:#f0f3f7}.ds-desktop-input::placeholder{color:#91959c}}
@media(max-width:1000px){.ds-scene{height:560px}.ds-deck{height:90px}.ds-laptop{top:14%}.ds-phone-position{top:22%;width:23%;right:7%}.ds-phone-front,.ds-phone-back,.ds-phone{border-radius:27px}.ds-phone-glass{border-radius:21px}}
@media(max-width:700px){.ds-scene{height:400px}.ds-laptop{left:6%;width:83%;top:19%;transform:rotateY(3deg) rotateZ(-2deg)}.ds-lid{padding:8px 5px 6px;border-radius:9px 9px 3px 3px}.ds-webcam{top:3px;width:2px;height:2px}.ds-hinge{height:3px}.ds-deck{height:64px}.ds-keyboard{gap:2px}.ds-trackpad{border-radius:2px}.ds-lip{height:3px}.ds-phone-position{width:30%;right:8%;top:30%;max-width:170px}.ds-phone-front,.ds-phone-back,.ds-phone{border-radius:23px}.ds-phone-front,.ds-phone-back{padding:3px;border-width:1px}.ds-phone-glass{border-radius:19px}.ds-phone-input{font-size:1.3cqw}.ds-status{font-size:1.1cqw}.ds-island:after{width:3px;height:3px}.ds-rotate{bottom:16px;right:16px;width:36px;height:36px}.ds-device-menu{min-width:100px}.ds-device-menu button{font-size:9px;padding:6px}.ds-camera-plate{border-radius:18%}.ds-phone-edge{width:8px}.ds-edge-left{left:-4px}.ds-edge-right{right:-4px}}
@media(prefers-reduced-motion:reduce){.ds-phone,.ds-rotate{transition:none}.ds-wave i{animation:none}.ds-wave i:nth-child(2n){height:70%}}