.iphone{--s: 1;--iphone-screen-h: calc(844px * var(--s));--iphone-screen-bg: #fff;--iphone-ink: #17202e;--sw: calc(390px * var(--s));--bezel: calc(7px * var(--s));--frame: calc(7px * var(--s));--r-outer: calc(68px * var(--s));--r-screen: calc(54px * var(--s));--status-h: calc(54px * var(--s));position:relative;box-sizing:content-box;width:var(--sw);padding:calc(var(--bezel) + var(--frame));margin:0 auto;border-radius:var(--r-outer);background:linear-gradient(165deg,#6b6e75,#2f3238 16%,#1f2227,#2b2e34 80%,#595c63);box-shadow:inset 0 0 0 1px #ffffff29,inset 0 0 0 var(--frame) #0000002e,0 30px 60px -24px #02204773,0 10px 30px #0220471a;font-family:var(--font)}.iphone--sm{--s: .6154}.iphone--md{--s: .718}.iphone--lg{--s: 1}.iphone:before,.iphone:after{content:"";position:absolute;top:0;height:100%;width:calc(3px * var(--s));pointer-events:none;background-repeat:no-repeat}.iphone:before{left:calc(-3px * var(--s));border-radius:2px 0 0 2px;background-image:linear-gradient(90deg,#3a3d44,#1c1e23),linear-gradient(90deg,#3a3d44,#1c1e23),linear-gradient(90deg,#3a3d44,#1c1e23);background-size:100% calc(26px * var(--s)),100% calc(62px * var(--s)),100% calc(62px * var(--s));background-position:0 calc(112px * var(--s)),0 calc(168px * var(--s)),0 calc(244px * var(--s))}.iphone:after{right:calc(-3px * var(--s));border-radius:0 2px 2px 0;background-image:linear-gradient(90deg,#1c1e23,#3a3d44);background-size:100% calc(104px * var(--s));background-position:0 calc(190px * var(--s))}.iphone-screen{position:relative;width:var(--sw);height:var(--iphone-screen-h);border-radius:var(--r-screen);overflow:hidden;background:var(--iphone-screen-bg);box-shadow:0 0 0 var(--bezel) #000;color:var(--iphone-ink)}.iphone-content{position:absolute;inset:0;padding-top:var(--status-h);overflow:hidden;display:flex;flex-direction:column;font-size:calc(14px * var(--s))}.iphone-content>*{min-width:0}.iphone-content--scroll{overflow-y:auto}.iphone-status{position:absolute;left:0;right:0;top:0;height:var(--status-h);z-index:3;display:flex;align-items:center;justify-content:space-between;padding:calc(6px * var(--s)) calc(30px * var(--s)) 0 calc(34px * var(--s));font-weight:700;font-size:calc(17px * var(--s));letter-spacing:-.01em;pointer-events:none;color:var(--iphone-ink)}.iphone-glyphs{display:inline-flex;align-items:center;gap:calc(7px * var(--s))}.iphone-glyphs svg{height:calc(12px * var(--s));width:auto;display:block}.iphone-glyphs .g-battery{height:calc(13px * var(--s))}.iphone-island{position:absolute;z-index:4;left:50%;top:calc(11px * var(--s));width:calc(124px * var(--s));height:calc(36px * var(--s));transform:translate(-50%);border-radius:calc(18px * var(--s));background:#000;box-shadow:inset 0 0 0 1px #ffffff0d}.iphone-island:after{content:"";position:absolute;right:calc(10px * var(--s));top:50%;width:calc(14px * var(--s));height:calc(14px * var(--s));transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle at 40% 40%,#1d2a44 0,#0a0e18 55%,#000)}.iphone-home{position:absolute;z-index:4;left:50%;bottom:calc(8px * var(--s));width:calc(134px * var(--s));height:calc(5px * var(--s));transform:translate(-50%);border-radius:3px;background:currentColor;opacity:.85;pointer-events:none}.iphone-frame{display:block;flex:none;border:0;background:#fff;width:390px;height:calc((var(--iphone-screen-h) - var(--status-h)) / var(--s));transform:scale(var(--s));transform-origin:0 0}.iphone-caption{text-align:center;font-size:13px;color:var(--muted);margin-top:14px}@media(max-width:520px){.iphone--lg{--s: .718}}@media(max-width:340px){.iphone--lg,.iphone--md{--s: .6154}}