.phone-frame{--pf-b:var(--pf-width,286);--pf-pt-w:393;--pf-pt-h:852;--pf-bz:0.0245;--pf-sw:calc(1 - 2 * var(--pf-bz));--pf-bezel:calc(var(--pf-b) * var(--pf-bz) * 1px);--pf-screen-w:calc(var(--pf-b) * var(--pf-sw) * 1px);--pf-scale:calc(var(--pf-b) * var(--pf-sw) / var(--pf-pt-w));--pf-screen-rf:0.13;--pf-screen-r:calc(var(--pf-b) * var(--pf-sw) * var(--pf-screen-rf) * 1px);--pf-outer-r:calc(var(--pf-screen-r) + var(--pf-bezel));position:relative;box-sizing:border-box;flex:none;width:calc(var(--pf-b) * 1px);padding:var(--pf-bezel);border-radius:var(--pf-outer-r);background:#171717;box-shadow:inset 0 0 0 1px #ffffff14;-webkit-user-select:none;user-select:none}.phone-frame--small{--pf-pt-w:375;--pf-pt-h:667}.phone-frame--lift{transition:transform .25s ease}.phone-frame--lift:hover{transform:translateY(-6px)}@media (prefers-reduced-motion:reduce){.phone-frame--lift,.phone-frame--lift:hover{transition:none;transform:none}}.phone-frame__screen{position:relative;width:var(--pf-screen-w);height:calc(var(--pf-screen-w) * var(--pf-pt-h) / var(--pf-pt-w));overflow:hidden;border-radius:var(--pf-screen-r);background:#000;isolation:isolate}.phone-frame__points{position:absolute;top:0;left:0;max-width:none;transform:scale(var(--pf-scale));transform-origin:top left}.phone-frame--tone-dark{--pf-ink:#0a0a0a}.phone-frame--tone-light{--pf-ink:#fff}.phone-frame__status{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 28px;color:var(--pf-ink);font-family:-apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif;font-size:15px;font-weight:600;letter-spacing:-.3px;line-height:1;-webkit-font-smoothing:antialiased;pointer-events:none}.phone-frame__icons{display:inline-flex;align-items:center;gap:6px}.phone-frame__glyph{display:block;flex:none;width:15px;height:15px;fill:currentColor}.phone-frame__glyph--battery{width:22px;height:13px;fill:none}.phone-frame--small .phone-frame__status{padding:0 34px;font-size:12px}.phone-frame--small .phone-frame__icons{gap:4px}.phone-frame--small .phone-frame__glyph{width:11px;height:11px}.phone-frame--small .phone-frame__glyph--battery{width:16px;height:9px}.phone-frame__home-bar{position:absolute;z-index:3;bottom:8px;left:50%;width:134px;height:5px;margin-left:-67px;border-radius:2.5px;background:#a3a3a3}.phone-frame--small .phone-frame__home-bar{display:none}.phone-frame--notched{--pf-bz:0.04808;--pf-screen-rf:0.10372;background:#0d0d0d;box-shadow:0 0 0 2px #171717,-1px -1px 0 2px #2e2e2e,1px 1px 0 2px #050505,0 3px 4px 1px #0c1a1738,4px 12px 18px -4px #0c1a174d,12px 30px 44px -14px #0c1a1742,24px 56px 88px -28px #0c1a172e}.phone-frame--tilt{transform:rotate(3.5deg) scale(.88)}.phone-frame--tilt:not(.phone-frame--notched){box-shadow:inset 1px 1px 0 #ffffff24,inset -1px -1px 0 #00000073,inset 0 0 0 1px #ffffff0f,0 3px 4px 1px #0c1a1738,4px 12px 18px -4px #0c1a174d,12px 30px 44px -14px #0c1a1742,24px 56px 88px -28px #0c1a172e}.phone-frame--notched .phone-frame__btn{position:absolute;width:3px;background:#0d0d0d}.phone-frame--notched .phone-frame__btn--minus,.phone-frame--notched .phone-frame__btn--plus,.phone-frame--notched .phone-frame__btn--ringer{left:-5px;border-radius:3px 0 0 3px}.phone-frame--notched .phone-frame__btn--side{right:-5px;border-radius:0 3px 3px 0}.phone-frame--notched .phone-frame__btn--ringer{top:15.26%;height:3.52%}.phone-frame--notched .phone-frame__btn--plus{top:22.3%;height:7.63%}.phone-frame--notched .phone-frame__btn--minus{top:31.69%;height:7.63%}.phone-frame--notched .phone-frame__btn--side{top:23.47%;height:11.15%}.phone-frame__notch{position:absolute;z-index:4;top:0;left:50%;width:215px;height:31px;margin-left:-107.5px;border-radius:0 0 21px 21px;background:#0d0d0d}.phone-frame__notch:after,.phone-frame__notch:before{content:"";position:absolute;top:0;width:6px;height:6px}.phone-frame__notch:before{left:-6px;background:radial-gradient(circle at bottom left,#0000 6px,#0d0d0d 6.5px)}.phone-frame__notch:after{right:-6px;background:radial-gradient(circle at bottom right,#0000 6px,#0d0d0d 6.5px)}.phone-frame__speaker{position:absolute;top:7px;left:50%;width:47px;height:8px;margin-left:-23.5px;border-radius:4px;background:#262626;box-shadow:inset 0 0 1px 2px #0000004d}.phone-frame__camera{position:absolute;top:7px;left:149px;box-sizing:border-box;width:8px;height:8px;border:2px solid #171717;border-radius:50%;background:#191970}.phone-frame--notched .phone-frame__status{height:40px!important;padding:0 18px 0 30px}.phone-frame--notched .phone-frame__icons{gap:4px}