.dev-frame{box-sizing:border-box;aspect-ratio:414/864;contain:layout;background:linear-gradient(135deg,#f1f1f3 0%,#c9c9ce 22%,#a8a8ad 50%,#cfcfd4 78%,#eeeef1 100%);border-radius:3rem;width:auto;max-width:100%;height:min(864px,100%);padding:8px;position:relative;transform:translateZ(0);box-shadow:0 0 0 1px #0000002e,inset 0 1px 1px #ffffffb3,inset 0 -1px 1px #00000038,0 30px 70px -18px #0000008c}.dev-screen{box-sizing:border-box;contain:layout paint;background:#050506;border-radius:2.5rem;width:100%;height:100%;padding:4px;position:relative;overflow:hidden}.dev-screen iframe{background:#fff;border:0;border-radius:2.25rem;width:100%;height:100%;display:block}.dev-island{aspect-ratio:125/35;z-index:5;pointer-events:none;background:#000;border-radius:999px;width:32%;position:absolute;top:1.3%;left:50%;transform:translate(-50%);box-shadow:0 1px 3px #0006}.dev-island:after{content:"";aspect-ratio:1;background:radial-gradient(circle at 35% 30%,#2a3550 0%,#0a0c14 60%,#000 100%);border-radius:50%;width:24%;max-width:9px;position:absolute;top:50%;right:11%;transform:translateY(-50%)}.dev-btn{z-index:1;background:linear-gradient(90deg,#aeaeb4 0%,#e2e2e6 45%,#b6b6bc 100%);position:absolute;box-shadow:0 1px 1.5px #0000004d}.dev-btn--action{border-radius:3px 1px 1px 3px;width:3px;height:26px;top:15%;left:-2px}.dev-btn--volup{border-radius:3px 1px 1px 3px;width:3px;height:52px;top:22%;left:-2px}.dev-btn--voldn{border-radius:3px 1px 1px 3px;width:3px;height:52px;top:31%;left:-2px}.dev-btn--side{border-radius:1px 3px 3px 1px;width:3px;height:80px;top:24%;right:-2px}.dev-btn--camera{background:linear-gradient(90deg,#9a9aa0 0%,#ededf1 45%,#a6a6ac 100%);border-radius:1px 3px 3px 1px;width:3.5px;height:34px;top:40%;right:-2px}.dev-frame--card{border-radius:1.5rem;width:100%;max-width:none;height:auto;padding:4px;box-shadow:0 0 0 1px #00000029,inset 0 1px 1px #ffffffa6,inset 0 -1px 1px #0003,0 14px 30px -14px #00000073}.dev-frame--card .dev-screen{border-radius:1.3rem;padding:2px}.dev-frame--card .dev-screen>.prev{border-radius:1.15rem;width:100%;height:100%;overflow:hidden}.dev-frame--card .dev-btn{width:2px}.dev-frame--card .dev-btn--action{height:12px;left:-1px}.dev-frame--card .dev-btn--volup,.dev-frame--card .dev-btn--voldn{height:24px;left:-1px}.dev-frame--card .dev-btn--side{height:30px;right:-1px}.dev-frame--card .dev-btn--camera{width:2.5px;height:14px;right:-1px}@media (max-width:640px){.dev-frame,.dev-frame--card{box-shadow:none;background:0 0;border-radius:0;padding:0}.dev-btn,.dev-island{display:none}.dev-screen,.dev-frame--card .dev-screen{background:0 0;border-radius:0;padding:0}.dev-screen iframe,.dev-frame--card .dev-screen>.prev{border-radius:0}}