/* iPhone 15 Pro chrome. Scale only with --pw (body width). Body 70.6×146.6 mm; screen 393×852 pt (19.5:9). */
.phone{--pw:300px;position:relative;z-index:1;width:var(--pw);aspect-ratio:70.6/146.6;height:calc(var(--pw)*146.6/70.6);margin:0 auto;box-sizing:border-box;padding:calc(var(--pw)*0.039);border-radius:calc(var(--pw)*.13);font-size:calc(var(--pw)*0.0399);background:linear-gradient(155deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.14) 16%,rgba(255,255,255,0) 38%,rgba(0,0,0,.08) 70%,rgba(0,0,0,.22) 100%),linear-gradient(180deg,#d2cbc2 0%,#b6aea5 22%,#8a847c 52%,#746e67 78%,#c4bdb4 100%);box-shadow:inset 0 1.2px 1px rgba(255,255,255,.55),inset 0 -1px 1px rgba(0,0,0,.28),inset 1px 0 1px rgba(255,255,255,.22),inset -1px 0 1px rgba(0,0,0,.2),0 0 0 1px rgba(60,56,52,.45),0 28px 56px -24px rgba(20,16,8,.55),0 12px 24px -14px rgba(0,0,0,.3)}
.phone:before{content:"";position:absolute;left:-1.2%;top:22.8%;width:1.25%;height:24.6%;background:linear-gradient(#9a9690,#6e6a65) 0 0/100% 15.5% no-repeat,linear-gradient(#9a9690,#6e6a65) 0 38%/100% 62% no-repeat;border-radius:2px 0 0 2px;box-shadow:inset 1px 0 0 rgba(255,255,255,.28),-1px 1px 1px rgba(0,0,0,.25)}
.phone:after{content:"";position:absolute;right:-1.2%;top:31.6%;width:1.25%;height:12.2%;background:linear-gradient(#9a9690,#6e6a65);border-radius:0 2px 2px 0;box-shadow:inset -1px 0 0 rgba(255,255,255,.28),1px 1px 1px rgba(0,0,0,.25)}
.scr{position:relative;width:100%;height:100%;min-height:0;box-sizing:border-box;border-radius:calc(var(--pw)*.091);overflow:hidden;display:flex;flex-direction:column;background:#0d0d0c;box-shadow:0 0 0 1px #111}
.scr:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:9;background:linear-gradient(118deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.05) 22%,rgba(255,255,255,0) 42%)}
.isl{position:absolute;top:1.41%;left:50%;width:32.06%;aspect-ratio:126/37.33;height:auto;transform:translateX(-50%);background:#000;border-radius:999px;z-index:10;box-shadow:0 0 0 1px #000}
.isl:after{content:"";position:absolute;right:14%;top:50%;width:22%;aspect-ratio:1;height:auto;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle at 38% 32%,#2a3344 0 28%,#0b0d12 40%,#000 72%)}
.sb{display:flex;justify-content:space-between;align-items:center;height:6.92%;padding:1.1% 6.6% 0 7.2%;font:600 1em/1 Inter,system-ui,sans-serif;letter-spacing:-.02em;flex:none;color:#fff;position:relative;z-index:8;box-sizing:border-box}
.sb .ic{display:flex;gap:.32em;align-items:center}
.sig{display:flex;gap:.11em;align-items:flex-end;height:.78em}.sig i{width:.18em;background:currentColor;border-radius:.06em;display:block}
.sig i:nth-child(1){height:.28em}.sig i:nth-child(2){height:.46em}.sig i:nth-child(3){height:.62em}.sig i:nth-child(4){height:.78em}
.wifi{position:relative;width:.98em;height:.72em;margin:0 .05em;flex:none}
.wifi:before,.wifi:after{content:"";position:absolute;left:50%;border:.11em solid currentColor;border-color:currentColor currentColor transparent transparent;border-radius:50%;transform:translate(-50%,0) rotate(-45deg);box-sizing:border-box}
.wifi:before{width:.92em;height:.92em;bottom:-.12em}
.wifi:after{width:.52em;height:.52em;bottom:-.02em}
.wifi i{position:absolute;left:50%;bottom:0;width:.14em;height:.14em;background:currentColor;border-radius:50%;transform:translateX(-50%)}
.bat{position:relative;width:1.45em;height:.68em;border:.09em solid currentColor;border-radius:.18em;padding:.07em;box-sizing:border-box;flex:none}
.bat:after{content:"";position:absolute;right:-.22em;top:.16em;width:.1em;height:.26em;background:currentColor;border-radius:.05em}
.bat i{display:block;height:100%;width:72%;background:currentColor;border-radius:.1em}
.phone.is-light .scr{background:#F3EEE6}
.phone.is-light .sb{color:#111110}
.phone.is-light .scr:after{opacity:.55}