/* Reused from the side-by-side playground. Metal colors are neutralized. */
.phone-shell { position:relative; width:422px; height:894px; padding:10px; border-radius:65px; background:#181818; transform:scale(var(--phone-scale,1)); transform-origin:top left; box-shadow:inset 0 0 0 1px #808080,inset 0 0 0 3px #dedede,inset 0 0 0 4px #666666,inset 0 0 0 6px #171717,0 22px 35px -19px #24242438,0 4px 9px #24242412; }
.phone-shell .screen { width:402px; height:874px; border-radius:55px; overflow:hidden; border:0; position:relative; box-shadow:0 0 0 1px #000; }
.device-button { position:absolute; left:-3px; width:3px; border-radius:2px 0 0 2px; background:linear-gradient(90deg,#727272,#dedede); }
.device-button.action { top:145px; height:27px; }
.device-button.volume-up { top:203px; height:58px; }
.device-button.volume-down { top:276px; height:58px; }
.device-button.power { left:auto; right:-3px; top:230px; height:88px; border-radius:0 2px 2px 0; background:linear-gradient(90deg,#dedede,#727272); }
.device-button.camera { left:auto; right:-2px; top:533px; height:55px; width:2px; border-radius:0 2px 2px 0; background:#aaa; }
.phone-status { height:58px; padding:0 30px 4px; display:flex; align-items:center; justify-content:space-between; flex:none; color:#111; font:600 17px/22px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; pointer-events:none; }
.phone-status { position:absolute; top:0; left:0; right:0; z-index:15; }
.status-time { display:block; min-width:54px; text-align:center; letter-spacing:-.2px; font-variant-numeric:tabular-nums; }
.dynamic-island { position:absolute; z-index:16; width:94px; height:28px; top:12px; left:50%; transform:translateX(-50%); border-radius:20px; background:#080809; pointer-events:none; }
.dynamic-island::after { content:''; position:absolute; right:9px; top:9px; width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 40% 40%,#182234,#06070b 70%); box-shadow:0 0 0 1px #121318; }
.status-icons { display:flex; align-items:center; justify-content:center; gap:6px; height:22px; flex:none; }
/* Explicit status sizes prevent app icon rules from changing their proportions. */
body .status-icons>svg { display:block; flex:none; height:13px; width:19px; fill:currentColor; stroke:none; overflow:visible; }
body .status-icons>svg.status-wifi { width:18px; height:14px; }
body .status-icons>svg.status-battery { width:27px; height:13px; }
.home-indicator { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:134px; height:5px; background:#111; border-radius:4px; z-index:15; pointer-events:none; }