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