/* Layered aluminum chassis, glass and screen in one interactive 3D object. */
.lotus-device{--rx:-5deg;--ry:-13deg;--light-x:28%;--light-y:15%;position:absolute;left:16%;top:48%;width:14%;min-width:64px;aspect-ratio:78/163;height:auto;padding:0;border:0;border-radius:17% / 8%;background:transparent;color:#eff6f2;cursor:pointer;transform-style:preserve-3d;transform:perspective(650px) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(-5deg) translateZ(38px);transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .5s;z-index:12;isolation:isolate;touch-action:manipulation;filter:drop-shadow(-8px 15px 9px #0009);container-type:inline-size}
.lotus-device:focus-visible{outline:2px solid #b6dcca;outline-offset:7px}.lotus-device:hover,.lotus-device:focus-visible,.lotus-device.is-active{filter:drop-shadow(-10px 19px 13px #000b) drop-shadow(0 0 10px #b6dcca14)}
.device-chassis{position:absolute;inset:0;border-radius:inherit;transform-style:preserve-3d}
.device-depth{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,#ebedee 0%,#899195 7%,#c7cdce 15%,#697174 45%,#ccd0d0 78%,#576266);border:1px solid #b9c0c0;box-shadow:inset 1px 0 1px #fff8,inset -1px 0 2px #0008;transform:translateZ(var(--z))}
.device-front{position:absolute;inset:0;padding:3.2%;border-radius:inherit;background:linear-gradient(130deg,#f2f3f1,#889295 19%,#dce0de 44%,#687174 76%,#e9ebea);box-shadow:inset .6px .6px 1px #fff,inset -1px -1px 1px #0009;transform:translateZ(1px);overflow:hidden}
.device-screen{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:#040808;border:2px solid #06090a;border-radius:15% / 7.2%;box-shadow:0 0 0 .5px #5c6265,inset 0 0 8px #000;isolation:isolate}
.device-wallpaper{position:absolute;inset:0;background:radial-gradient(ellipse at 66% 32%,#4b827659,transparent 55%),radial-gradient(ellipse at 15% 95%,#44766575,transparent 65%),linear-gradient(145deg,#101e20,#050b0e 60%,#102520);transition:filter .7s}.device-wallpaper:after{content:'';position:absolute;width:180%;height:80%;top:29%;left:-43%;border:1px solid #99c4b72a;border-radius:50%;box-shadow:0 -9px 0 #accdbc08,0 -25px 0 #accdbc06,0 19px 0 #accdbc0a;transform:rotate(-38deg)}
.device-status{position:absolute;top:3%;left:9%;right:8%;display:flex;align-items:center;justify-content:space-between;font:600 5px Arial,sans-serif;font-size:5cqw;letter-spacing:-.2px;z-index:4}.device-status>span:last-child{display:flex;align-items:center;gap:3px}.signal{display:block;width:7px;height:5px;background:linear-gradient(to right,#eff6f2 20%,transparent 20% 30%,#eff6f2 30% 50%,transparent 50% 60%,#eff6f2 60% 80%,transparent 80% 90%,#eff6f2 90%);clip-path:polygon(0 75%,30% 75%,30% 50%,60% 50%,60% 25%,90% 25%,90% 0,100% 0,100% 100%,0 100%)}.battery{display:block;width:8px;height:4px;border:1px solid #e3eee9;border-radius:1px;position:relative}.battery:after{content:'';position:absolute;right:-2px;top:0;width:1px;height:2px;background:#e3eee9}
.device-island{position:absolute;left:34%;top:2.7%;width:33%;height:5%;background:#010203;border-radius:40px;z-index:5;box-shadow:0 1px 1px #ffffff08;transition:width .4s,left .4s}.device-island:after{content:'';position:absolute;right:12%;top:25%;width:12%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#274553,#07131c 45%,#020508 65%);box-shadow:0 0 1px #335567}
.device-lock{position:absolute;top:14%;left:46%;width:8%;height:3.4%;border-radius:1px;background:#d4e1dcaa}.device-lock:before{content:'';position:absolute;left:20%;top:-50%;width:60%;height:65%;border:1px solid #d4e1dcaa;border-bottom:0;border-radius:5px 5px 0 0}
.device-art{position:absolute;inset:24% 8% 24%;perspective:350px;display:flex;align-items:center;justify-content:center}.device-logo{position:relative;width:58%;height:auto;object-fit:contain;filter:drop-shadow(0 2px 1px #000a) drop-shadow(0 0 7px #b6dcca35);z-index:3;transform-style:preserve-3d;will-change:transform}.device-orbit{position:absolute;width:90%;aspect-ratio:1;border:1px solid #a9d1bd00;border-radius:50%;opacity:0;transform:rotateX(58deg) rotateZ(-25deg);transition:opacity .45s,border-color .45s}.device-orbit:after{content:'';position:absolute;width:3px;height:3px;left:12%;top:12%;border-radius:50%;background:#d7f1e4;box-shadow:0 0 6px #d7f1e4}.device-orbit.second{width:105%;transform:rotateX(-58deg) rotateY(20deg)}
.device-wordmark{position:absolute;top:69%;left:0;right:0;text-align:center;font:600 7px Manrope,Arial,sans-serif;font-size:7cqw;letter-spacing:2.5px}.device-wordmark small{display:block;font-size:3px;font-size:3.2cqw;letter-spacing:1.1px;margin-top:5%;color:#b1c7bc}.device-activity{position:absolute;bottom:10%;left:12%;right:12%;height:5%;display:flex;justify-content:center;align-items:center;gap:4px;font:4px monospace;font-size:3.7cqw;letter-spacing:.5px;color:#9cb9ac}.device-activity i{width:3px;height:3px;border-radius:50%;background:#b6dcca;box-shadow:0 0 4px #b6dcca55}.device-home{position:absolute;left:34%;right:34%;bottom:2%;height:1.2%;border-radius:5px;background:#e4eee9c4}
.device-glass{position:absolute;inset:0;z-index:7;pointer-events:none;border-radius:inherit;background:linear-gradient(118deg,#fff0 6%,#ffffff13 7%,#ffffff04 32%,transparent 33% 74%,#ffffff05 75%,transparent 92%),radial-gradient(ellipse at var(--light-x) var(--light-y),#ffffff20,transparent 60%);box-shadow:inset 1px 1px 1px #ffffff50,inset -1px -1px 1px #ffffff15;transition:opacity .4s;opacity:.7}
.device-side-key{position:absolute;left:-2%;top:22%;width:3%;height:5%;border-radius:2px;background:linear-gradient(90deg,#626b6c,#e0e3df,#85908c);transform:translateZ(-3px);box-shadow:0 1px 1px #000}.device-side-key.volume{top:31%;height:13%}.device-side-key.power{left:auto;right:-2%;top:31%;height:12%}.device-antenna{position:absolute;left:0;top:12%;width:3%;height:1%;background:#68736f;transform:translateZ(2px)}.device-antenna.bottom{top:85%;left:auto;right:0}.device-dock{position:absolute;left:-9%;bottom:-5%;width:120%;height:7%;border-radius:4px;background:linear-gradient(165deg,#626b6c,#222d30 30%,#10191b 72%);transform:translateZ(-6px) rotateX(8deg);border-top:1px solid #879694;box-shadow:0 6px 8px #0009;pointer-events:none}
.lotus-device.is-active .device-wallpaper{filter:brightness(1.45)}.lotus-device.is-active .device-glass{opacity:1}.lotus-device.is-active .device-orbit{opacity:.7;border-color:#a9d1bd55;animation:lotus-orbit 2.1s ease-in-out}.lotus-device.is-active .device-orbit.second{animation-direction:reverse;animation-duration:2.4s}.lotus-device.is-active .device-logo{animation:lotus-reconnect 1.8s cubic-bezier(.22,.7,.24,1) both}.lotus-device.is-active .device-island{width:40%;left:30%}.lotus-device.is-active .device-activity i{animation:lotus-status .7s ease-in-out 3}
@keyframes lotus-reconnect{0%{transform:rotateY(0) scale(1);filter:drop-shadow(0 0 7px #b6dcca35)}35%{transform:rotateY(125deg) rotateZ(-8deg) scale(.9);filter:drop-shadow(0 0 12px #b6dccaaa)}75%{transform:rotateY(345deg) rotateZ(3deg) scale(1.1)}100%{transform:rotateY(360deg) scale(1);filter:drop-shadow(0 0 10px #b6dcca70)}}
@keyframes lotus-orbit{0%{transform:rotateX(58deg) rotateZ(-25deg) scale(.8)}100%{transform:rotateX(58deg) rotateZ(335deg) scale(1)}}@keyframes lotus-status{50%{opacity:.3}}
@media(max-width:760px){.lotus-device{left:16%;top:46%;width:15%;min-width:68px}.device-screen{border-width:1.5px}.device-wordmark{letter-spacing:1.5px}.device-status{font-size:5cqw}.device-side-key{width:3%}}
@media(prefers-reduced-motion:reduce){.lotus-device{transform:perspective(650px) rotateY(-10deg) rotateZ(-5deg) translateZ(38px)!important}.device-logo,.device-orbit{will-change:auto}.lotus-device.is-active .device-logo{filter:drop-shadow(0 0 12px #b6dccaaa)}}