:root{--page:#a8d9d8;--body:#1f1f22;--rim:#4a4a50;--button:#2c2c30;--app-bg:#ffffff}*,:after,:before{box-sizing:border-box}body,html{margin:0;height:100%;background:var(--page)}.stage{min-height:100vh;min-height:100svh;display:grid;place-items:center;overflow:hidden}.preview-stage{width:calc(var(--frame-w) * var(--scale));height:calc(var(--frame-h) * var(--scale))}.phone{position:relative;width:var(--frame-w);height:var(--frame-h);padding:14px;border-radius:68px;background:var(--body);transform:scale(var(--scale));transform-origin:top left;box-shadow:inset 0 0 0 2px var(--rim),inset 0 0 0 5px #111113,30px 40px 60px -10px rgba(0,0,0,.28),60px 90px 120px -20px rgba(0,0,0,.18)}.phone-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:54px;background:var(--app-bg)}.phone-island{position:absolute;z-index:2;top:11px;left:50%;width:124px;height:36px;transform:translateX(-50%);border-radius:999px;background:#050505;pointer-events:none}.phone-island:after{content:"";position:absolute;top:50%;right:14px;width:11px;height:11px;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle at 35% 35%,#2b4a7a,#0b1424 70%)}.phone-btn{position:absolute;width:4px;background:var(--button)}.phone-btn-action{left:-3px;top:172px;height:34px;border-radius:2px 0 0 2px}.phone-btn-vol-up{top:236px}.phone-btn-vol-down,.phone-btn-vol-up{left:-3px;height:64px;border-radius:2px 0 0 2px}.phone-btn-vol-down{top:316px}.phone-btn-power{right:-3px;top:262px;height:100px;border-radius:0 2px 2px 0}.preview-iframe{display:block;width:100%;height:100%;border:0;background:var(--app-bg);--app-inset-top:50px;--app-inset-bottom:28px}@media (max-width:767px){.stage{display:block}.preview-stage{width:100%;height:100vh;height:100svh}.phone{width:100%;height:100%;padding:0;box-shadow:none;transform:none}.phone,.phone-screen{border-radius:0}.phone-btn,.phone-island{display:none}.preview-iframe{--app-inset-top:0px;--app-inset-bottom:0px}}