/* Decorative handset hardware surrounds the live viewport; it never covers store controls. */
.phone-status,.phone-home,.phone-hardware{display:none}.phone-display{display:contents}
:is(.demo-device-shell,.managed-device-shell)[data-device=mobile]{border:8px solid #151515;border-radius:47px;overflow:visible;background:#fff;box-shadow:0 0 0 1px #777,0 0 0 3px #333,0 0 0 4px #ababab,0 22px 42px #0003,inset 0 0 0 1px #000;isolation:isolate}
:is(.demo-device-shell,.managed-device-shell)[data-device=mobile]>.phone-display{display:grid;grid-template-rows:54px minmax(0,1fr) 24px;width:100%;aspect-ratio:393/852;overflow:hidden;border-radius:39px;clip-path:inset(0 round 39px);background:#fff;position:relative;isolation:isolate}
:is(.demo-device-shell,.managed-device-shell)[data-device=mobile]>.phone-display>:is(.demo-device-screen,.managed-device-screen){border-radius:0;background:#fff;height:100%!important;min-height:0;width:100%;overflow:hidden;position:relative}
:is(.demo-device-shell,.managed-device-shell)[data-device=mobile]>.phone-display iframe{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:100%!important;transform:none!important;border:0;display:block}
/* A missing or delayed enhancement script still leaves a genuinely rounded viewport. */
:is(.demo-device-shell,.managed-device-shell)[data-device=mobile]>:is(.demo-device-screen,.managed-device-screen){border-radius:39px;overflow:hidden;clip-path:inset(0 round 39px)}
[data-device=mobile] .phone-display>.phone-status{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;color:#111;background:#fff;position:relative;overflow:hidden;font:600 14px/1 Inter,Arial,sans-serif;letter-spacing:-.4px;pointer-events:none;user-select:none}
.phone-island{position:absolute;left:50%;top:10px;transform:translateX(-50%);height:31px;width:106px;background:#090909;border-radius:30px;box-shadow:inset 0 0 0 1px #252525}
.phone-island:after{content:'';position:absolute;width:9px;height:9px;border-radius:50%;right:11px;top:11px;background:radial-gradient(circle at 40% 35%,#33455e,#101b2b 45%,#080a0e 70%);box-shadow:0 0 0 2px #101010}
.phone-indicators{display:flex;align-items:center;gap:5px}.phone-indicators svg{width:14px;height:12px;fill:currentColor;display:block}.phone-indicators .phone-battery{width:22px;height:12px}
[data-device=mobile] .phone-display>.phone-home{display:grid;place-items:center;height:24px;background:#fff;pointer-events:none}
.phone-home:before{content:'';display:block;background:#171717;width:32%;height:4px;border-radius:8px}
[data-device=mobile]>.phone-hardware{display:block;position:absolute;inset:0;pointer-events:none;z-index:2}
.phone-hardware:before,.phone-hardware:after,.phone-volume:before,.phone-volume:after{content:'';position:absolute;width:4px;background:linear-gradient(90deg,#858585,#252525 60%,#5d5d5d);border-radius:2px;box-shadow:0 0 0 1px #222}
.phone-hardware:before{left:-13px;top:72px;height:20px}.phone-hardware:after{right:-13px;top:126px;height:57px}.phone-volume:before{left:-13px;top:113px;height:37px}.phone-volume:after{left:-13px;top:161px;height:37px}
@media(max-width:550px){:is(.demo-device-shell,.managed-device-shell)[data-device=mobile]{border-width:7px;border-radius:42px}:is(.demo-device-shell,.managed-device-shell)[data-device=mobile]>.phone-display{border-radius:35px;clip-path:inset(0 round 35px)}[data-device=mobile] .phone-display>.phone-status{padding-inline:18px}.phone-island{width:96px}.phone-hardware:before,.phone-volume:before,.phone-volume:after{left:-12px}.phone-hardware:after{right:-12px}}