@layer components{.device{position:relative;container-type:inline-size;--device-metal:#3b3935;--device-metal-hi:rgb(255 255 255/0.3);--device-drop:0 0 #0000}.device-body{position:relative;z-index:1;padding:var(--device-pad);border-radius:var(--device-r);background-color:#0b0a08;box-shadow:inset 0 0 0 max(.75px,.2cqw) var(--device-metal-hi),inset 0 0 0 var(--device-band) var(--device-metal),var(--device-drop)}.device-screen{position:relative;overflow:hidden;isolation:isolate;border-radius:calc(var(--device-r) - var(--device-pad));background-color:#000}.device-phone{--device-band:max(1px,0.8cqw);--device-pad:calc(var(--device-band) + 2.6cqw);--device-r:14cqw}.device-phone.device-shadow{--device-drop:0 12cqw 24cqw -10cqw rgb(0 0 0/0.55)}.device-island{position:absolute;z-index:50;top:2.5cqw;left:50%;width:29cqw;height:8.4cqw;translate:-50% 0;border-radius:999px;background-color:#000}.device-key{position:absolute;z-index:0;width:max(1px,.9cqw);border-radius:max(.5px,.45cqw);background:linear-gradient(90deg,#55524b,#2c2a27)}.device-key-action,.device-key-down,.device-key-up{right:calc(100% - .2cqw)}.device-key-action{top:18.5%;height:4.6%}.device-key-up{top:27.5%;height:7.8%}.device-key-down{top:37.2%;height:7.8%}.device-key-side{left:calc(100% - .2cqw);top:29.5%;height:12.5%;background:linear-gradient(270deg,#55524b,#2c2a27)}.device-tablet{--device-band:max(1px,0.35cqw);--device-pad:calc(var(--device-band) + var(--tablet-bezel) * 1cqw);--device-r:calc(var(--tablet-r) * 1cqw)}.device-tablet.device-shadow{--device-drop:0 5cqw 10cqw -4cqw rgb(0 0 0/0.55)}.device-camera{position:absolute;z-index:2;top:calc(var(--device-pad) / 2);left:50%;width:max(2px,.55cqw);aspect-ratio:1;translate:-50% -50%;border-radius:999px;background-color:#1b1c22;box-shadow:inset 0 0 0 max(.5px,.12cqw) rgb(255 255 255/.1)}}