.pg-iphone{--phone-width:390;--u:calc(var(--phone-width)/390*1px);width:calc(var(--phone-width)*1px);filter:drop-shadow(0 calc(24*var(--u))calc(34*var(--u))#0f172a38)drop-shadow(0 calc(9*var(--u))calc(16*var(--u))#0f172a38);--screen-bg:#fff;--sb-fg:#000;--sb-outline:#00000061;--sb-nub:#0000006b;--indicator:#000000d9;--island-ring:transparent;display:inline-block}.pg-iphone.pg-theme-dark{--screen-bg:#000;--sb-fg:#fff;--sb-outline:#fff6;--sb-nub:#ffffff73;--indicator:#ffffffd9;--island-ring:#ffffff12}@media (prefers-color-scheme:dark){.pg-iphone.pg-theme-auto{--screen-bg:#000;--sb-fg:#fff;--sb-outline:#fff6;--sb-nub:#ffffff73;--indicator:#ffffffd9;--island-ring:#ffffff12}}.pg-iphone.pg-size-xs{--phone-width:140}.pg-iphone.pg-size-sm{--phone-width:160}.pg-iphone.pg-size-md{--phone-width:180}.pg-iphone.pg-size-lg{--phone-width:200}.pg-iphone.pg-size-xl{--phone-width:220}.pg-iphone.pg-size-hero{--phone-width:210}@media (min-width:640px){.pg-iphone.pg-size-xs{--phone-width:160}.pg-iphone.pg-size-sm{--phone-width:180}.pg-iphone.pg-size-md{--phone-width:200}.pg-iphone.pg-size-lg{--phone-width:220}.pg-iphone.pg-size-xl{--phone-width:260}.pg-iphone.pg-size-hero{--phone-width:200}}@media (min-width:1024px){.pg-iphone.pg-size-lg{--phone-width:260}.pg-iphone.pg-size-xl{--phone-width:300}.pg-iphone.pg-size-hero{--phone-width:260}}.pg-iphone,.pg-iphone *,.pg-iphone :before,.pg-iphone :after{box-sizing:border-box;margin:0;padding:0}.pg-iphone .pg-frame{border-radius:calc(67*var(--u));padding:calc(3.6*var(--u));box-shadow:inset 0 0 0 calc(1.1*var(--u))#ffffff24;background:linear-gradient(135deg,#6a6c72 0%,#34353b 10%,#1c1d21 48%,#2b2c31 85%,#606268 100%);position:relative}.pg-iphone .pg-bezel{border-radius:calc(63.4*var(--u));padding:calc(8.4*var(--u));background:#060607}.pg-iphone .pg-screen{border-radius:calc(55*var(--u));background:var(--screen-bg);flex-direction:column;transition:background .25s;display:flex;position:relative;overflow:hidden}.pg-iphone .pg-top-safe{height:calc(58*var(--u));flex:none;position:relative}.pg-iphone .pg-status-bar{width:100%;height:100%;display:block;position:absolute;inset:0}.pg-iphone .pg-sb-text,.pg-iphone .pg-sb-bar,.pg-iphone .pg-sb-dot,.pg-iphone .pg-battery-fill{fill:var(--sb-fg)}.pg-iphone .pg-sb-wifi{stroke:var(--sb-fg)}.pg-iphone .pg-battery-outline{stroke:var(--sb-outline)}.pg-iphone .pg-battery-nub{fill:var(--sb-nub)}.pg-iphone .pg-island{top:calc(13.5*var(--u));width:calc(95*var(--u));height:calc(27*var(--u));border-radius:calc(18.5*var(--u));box-shadow:inset 0 0 0 calc(1*var(--u))var(--island-ring);background:#000;position:absolute;left:50%;transform:translate(-50%)}.pg-iphone .pg-island:after{content:"";top:50%;right:calc(13*var(--u));width:calc(11*var(--u));height:calc(11*var(--u));background:radial-gradient(circle at 36% 36%,#6e7daf73 0%,#6e7daf00 22%),radial-gradient(circle,#05060a 0% 46%,#101116 47% 100%);border-radius:50%;position:absolute;transform:translateY(-50%)}.pg-iphone .pg-screen-img{aspect-ratio:9/17;object-fit:cover;object-position:top;flex:none;width:100%;display:block}.pg-iphone .pg-bottom-safe{height:calc(23*var(--u));flex:none;position:relative}.pg-iphone .pg-home-indicator{bottom:calc(7*var(--u));width:calc(134*var(--u));height:calc(5*var(--u));border-radius:calc(2.5*var(--u));background:var(--indicator);position:absolute;left:50%;transform:translate(-50%)}.pg-iphone .pg-btn{width:calc(3*var(--u));border-radius:calc(2*var(--u));box-shadow:inset 0 0 0 calc(.6*var(--u))#ffffff14;z-index:-1;background:linear-gradient(#46474c 0%,#222226 12%,#121215 50%,#222226 88%,#404145 100%);position:absolute}.pg-iphone .pg-btn.pg-left{left:calc(-3*var(--u))}.pg-iphone .pg-btn.pg-right{right:calc(-3*var(--u))}.pg-iphone .pg-btn.pg-action{top:calc(172*var(--u));height:calc(26*var(--u))}.pg-iphone .pg-btn.pg-vol-up{top:calc(220*var(--u));height:calc(56*var(--u))}.pg-iphone .pg-btn.pg-vol-down{top:calc(290*var(--u));height:calc(56*var(--u))}.pg-iphone .pg-btn.pg-power{top:calc(248*var(--u));height:calc(92*var(--u))}