.hero-demo-phone{--phone-scale:.629333;--phone-viewport-width:236px;--phone-outer-max:260px;--phone-screen-height:452px;--phone-frame-radius:42px;--phone-frame-padding-top:46px;--phone-frame-padding-x:12px;--phone-frame-padding-bottom:30px;--phone-island-width:70px;--phone-island-height:20px;width:min(100%, var(--phone-outer-max));filter:drop-shadow(0 0 10px #ffffff2e);margin:0 auto}@media (min-width:1024px){.hero-demo-phone{--phone-scale:.56;--phone-viewport-width:210px;--phone-outer-max:232px;--phone-screen-height:400px;--phone-frame-radius:38px;--phone-frame-padding-top:40px;--phone-frame-padding-x:11px;--phone-frame-padding-bottom:26px;--phone-island-width:62px;--phone-island-height:18px}}.hero-demo-phone__frame{box-sizing:border-box;border-radius:var(--phone-frame-radius);padding:var(--phone-frame-padding-top) var(--phone-frame-padding-x) var(--phone-frame-padding-bottom);background:#212121;border:2px solid #464646;position:relative}.hero-demo-phone__frame:before{content:"";background:#2e2e2e;border-radius:2px 0 0 2px;width:3px;height:24px;position:absolute;top:80px;left:-4px;box-shadow:0 36px #2e2e2e}.hero-demo-phone__frame:after{content:"";background:#2e2e2e;border-radius:0 2px 2px 0;width:3px;height:52px;position:absolute;top:100px;right:-4px}.hero-demo-phone__island{width:var(--phone-island-width);height:var(--phone-island-height);background:#000;border-radius:20px;position:absolute;top:14px;left:50%;transform:translate(-50%)}.hero-demo-phone__screen{height:var(--phone-screen-height);background:var(--background);border-radius:26px;overflow:hidden}.hero-demo-phone__viewport{height:100%;width:var(--phone-viewport-width);margin:0 auto;overflow:hidden}.hero-demo-phone__scale-wrap{width:375px;height:calc(var(--phone-screen-height) / var(--phone-scale));transform:scale(var(--phone-scale));transform-origin:0 0}.hero-demo-phone__scaled{flex-direction:column;width:375px;height:100%;min-height:0;display:flex;container:phone-mock/inline-size}.dark .hero-demo-phone{filter:drop-shadow(0 8px 24px #00000073)}