/* iPhone 17 Pro Max class device, authored at 1pt = 1px (440 x 956 screen).
   Scale the .iph-wrap with transform or zoom; never resize the inner screen. */
.iph{
  --frame-a:#d9d9dc; --frame-b:#9fa0a5; --frame-c:#f4f4f6;
  position:relative; width:484px; height:1000px; box-sizing:border-box;
  border-radius:84px; padding:4px;
  background:linear-gradient(135deg,var(--frame-c) 0%,var(--frame-a) 18%,var(--frame-b) 50%,var(--frame-a) 82%,var(--frame-c) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), inset 0 0 0 2px rgba(0,0,0,.18);
  isolation:isolate;
}
.iph[data-frame="black"]{--frame-a:#3a3a3d;--frame-b:#1c1c1e;--frame-c:#5a5a5e}
.iph[data-frame="orange"]{--frame-a:#e9894f;--frame-b:#b8582a;--frame-c:#f5b285}
.iph[data-frame="blue"]{--frame-a:#3f4f6e;--frame-b:#232c42;--frame-c:#6a7a99}
.iph-bezel{position:relative;width:100%;height:100%;box-sizing:border-box;border-radius:80px;padding:18px;background:#050506;}
.iph-screen{position:relative;width:440px;height:956px;border-radius:62px;overflow:hidden;background:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;color:#0b0b0c;transform:translateZ(0)}
.iph-island{position:absolute;left:50%;top:11px;width:126px;height:37px;margin-left:-63px;border-radius:19px;background:#000;z-index:50}
.iph-btn{position:absolute;width:5px;border-radius:2px;background:linear-gradient(90deg,var(--frame-b),var(--frame-a));z-index:-1}
.iph-btn.l1{left:-3px;top:196px;height:34px}
.iph-btn.l2{left:-3px;top:262px;height:66px}
.iph-btn.l3{left:-3px;top:344px;height:66px}
.iph-btn.r1{right:-3px;top:290px;height:104px}
.iph-btn.r2{right:-3px;top:520px;height:80px;width:4px;opacity:.8}
.iph-glare{position:absolute;inset:0;border-radius:62px;pointer-events:none;z-index:60;
  background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 100%)}

/* status bar */
.sb{position:absolute;left:0;right:0;top:0;height:62px;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:0 34px 0 52px;box-sizing:border-box;pointer-events:none}
.sb-time{font-size:17px;font-weight:600;letter-spacing:-.2px;width:64px;text-align:center;padding-top:2px}
.sb-icons{display:flex;gap:6px;align-items:center;padding-top:2px}
.sb svg{display:block}
.iph-screen[data-theme="dark"] .sb{color:#fff}
.home-ind{position:absolute;left:50%;bottom:8px;width:150px;height:5px;margin-left:-75px;border-radius:3px;background:#0b0b0c;z-index:45;opacity:.9}
.iph-screen[data-theme="dark"] .home-ind,.home-ind.light{background:#fff}