.dev-toggle{background:color-mix(in srgb, currentColor 14%, transparent);border-radius:999px;gap:2px;padding:2px;display:inline-flex}.dev-toggle-btn{width:30px;height:26px;color:inherit;opacity:.55;cursor:pointer;background:0 0;border:0;border-radius:999px;justify-content:center;align-items:center;transition:opacity .15s,background .15s;display:inline-flex}.dev-toggle-btn:hover{opacity:.85}.dev-toggle-btn.is-on{opacity:1;background:color-mix(in srgb, currentColor 22%, transparent)}.dev-toggle-btn:focus-visible{outline-offset:2px;opacity:1;outline:2px solid}.dev-stage{justify-content:center;align-items:center;width:100%;height:100%;display:flex;overflow:hidden}.dev-stage--mobile{padding:clamp(.75rem,3vw,2rem) 1rem}.dev-stage--desktop{padding:0}.dev-stage-desktop{border:0;width:100%;height:100%;display:block}
.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}