@layer legacy{.pframe{position:relative;height:100%;min-height:0}.pframe-browser{display:flex;flex-direction:column;height:100%;border-radius:.875rem;overflow:hidden;background:#fff;box-shadow:0 30px 80px #00000047}.pframe-bar{flex:none;display:flex;align-items:center;gap:.4rem;height:2rem;padding-inline:.9rem;background:#ececec;border-bottom:1px solid #DCDCDC}.pframe-bar span{width:.6rem;height:.6rem;border-radius:50%;background:#c9c9c9}.pframe-viewport{position:relative;flex:1;overflow:hidden;container-type:size}.pframe-viewport img{display:block;width:100%;will-change:transform}.pframe--scroll .pframe-viewport img{height:auto;transform:translate3d(0,calc(var(--t, 0) * min(0px,100cqh - 100%)),0)}.pframe--cover .pframe-viewport img{height:100%;object-fit:cover;object-position:50% 0%;transform:scale(calc(1.18 - .18 * var(--t, 0)));transform-origin:50% 0%}.pframe--phones{display:flex;align-items:center;justify-content:center;gap:clamp(.75rem,1.6vw,1.75rem)}.pframe-phone{flex:0 1 28%;max-height:92%;aspect-ratio:1206 / 2622;border:.4rem solid #111111;border-radius:clamp(1.25rem,2.2vw,2.25rem);overflow:hidden;background:#111;box-shadow:0 30px 70px #0000004d;transform:translate3d(0,calc((var(--k) - 1) * (14% - var(--t, 0) * 28%)),0);will-change:transform}.pframe-phone:nth-child(2){flex-basis:31%}.pframe-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0%}@media(max-width:768px){.pframe-bar{height:1.5rem}}@media(prefers-reduced-motion:reduce){.pframe-phone,.pframe-viewport img{transform:none!important}}}
