.phone3d-stage{--w:clamp(228px, 23vw, 300px);--bezel:calc(var(--w) * .034);--radius:calc(var(--w) * .168);--screen-radius:calc(var(--radius) - var(--bezel));--screen-w:calc(var(--w) - 2 * var(--bezel));--screen-h:calc(var(--screen-w) * 2622 / 1206);--h:calc(var(--screen-h) + 2 * var(--bezel));width:var(--w);height:var(--h);perspective:1600px;perspective-origin:50% 30%}.phone3d-body{width:100%;height:100%;transform-style:preserve-3d;will-change:transform;position:relative}.phone3d-layer{border-radius:var(--radius);position:absolute;inset:0}.phone3d-back{background:linear-gradient(140deg,#e4e2e8 0%,#b9b6c0 45%,#8f8c96 100%);transform:translateZ(-14px);box-shadow:0 60px 90px -30px #14132b73,0 24px 40px -24px #14132b59}.phone3d-edge{background:linear-gradient(90deg,#9e9ba6 0%,#d8d6dc 18%,#a7a4ae 50%,#d8d6dc 82%,#9e9ba6 100%)}.phone3d-frame{background:linear-gradient(150deg,#f4f3f6 0%,#b6b3bd 30%,#e9e8ec 60%,#8d8a94 100%);padding:2px;transform:translateZ(0)}.phone3d-bezel{border-radius:calc(var(--radius) - 2px);width:100%;height:100%;padding:calc(var(--bezel) - 2px);background:#0b0b0e;position:relative}.phone3d-screen{border-radius:var(--screen-radius);isolation:isolate;background:#f6f5f2;width:100%;height:100%;position:relative;overflow:hidden}.phone3d-glare{border-radius:var(--screen-radius);pointer-events:none;mix-blend-mode:screen;background:linear-gradient(115deg,#fff0 30%,#ffffff38 45%,#fff0 60%) 0 0/250% 250%;position:absolute;inset:0;transform:translateZ(1px)}.phone3d-button{background:linear-gradient(90deg,#8d8a94,#d6d4da);border-radius:4px;width:4px;position:absolute;transform:translateZ(-7px)}.phone3d-buttonLeft{left:-3px}.phone3d-buttonRight{right:-3px}
