.p3{--ph-w: 224px;--ry: -22deg;--rx: 8deg;--th: calc(var(--ph-w) * .036);--p3-metal-1: #9a958f;--p3-metal-2: #e6e2dc;--p3-metal-3: #6c6863;--p3-glass: #07090c;width:var(--ph-w);margin:0;flex:none;perspective:calc(var(--ph-w) * 6)}@media(min-width:900px){.p3{--ph-w: 340px}}.p3__dev{position:relative;aspect-ratio:428 / 868;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry))}.p3__front,.p3__edge,.p3__shadow{position:absolute;inset:0;border-radius:calc(var(--ph-w) * .155)}.p3__e1{--i: 1}.p3__e2{--i: 2}.p3__e3{--i: 3}.p3__e4{--i: 4}.p3__e5{--i: 5}.p3__e6{--i: 6}.p3__e7{--i: 7}.p3__e8{--i: 8}.p3__edge{transform:translateZ(calc(var(--i) * var(--th) / -8));background:linear-gradient(100deg,var(--p3-metal-3),var(--p3-metal-2) 18%,var(--p3-metal-1) 40%,var(--p3-metal-3) 62%,var(--p3-metal-2) 84%,var(--p3-metal-1))}.p3__shadow{transform:translateZ(calc(var(--th) * -1.2)) translate(calc(var(--ph-w) * .06),calc(var(--ph-w) * .1));background:#0000008c;filter:blur(calc(var(--ph-w) * .07))}.p3__front{background:var(--p3-glass);overflow:hidden;box-shadow:inset 0 0 0 calc(var(--ph-w) * .014) var(--p3-metal-1),inset 0 0 0 calc(var(--ph-w) * .017) #ffffff59,inset 0 0 0 calc(var(--ph-w) * .022) #111}.p3__scr{position:absolute;inset:calc(var(--ph-w) * .045);width:calc(100% - var(--ph-w) * .09);height:calc(100% - var(--ph-w) * .09);border-radius:calc(var(--ph-w) * .115);object-fit:cover;object-position:top;background:#fff}.p3__isl{position:absolute;left:50%;top:calc(var(--ph-w) * .072);translate:-50% 0;width:calc(var(--ph-w) * .27);height:calc(var(--ph-w) * .072);border-radius:var(--r-pill);background:#000;box-shadow:inset 0 0 0 1px #ffffff14}.p3__glare{position:absolute;inset:calc(var(--ph-w) * .045);border-radius:calc(var(--ph-w) * .115);pointer-events:none;background:linear-gradient(118deg,rgb(255 255 255 / .26),rgb(255 255 255 / .07) 30%,transparent 46%,transparent 78%,rgb(255 255 255 / .08));box-shadow:inset 0 0 0 1px #ffffff1f}