@import "https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap";
.iphone14-root{--size:max(5px,1.2vmin);--height:80em;--aspect-ratio:37/76;--pad:1.25em;--border-radius:6.666em;--gutter:calc(var(--pad)*2);--bg-blur:.333em;--button-width:.333em;--notch-height:3.33em;--notch-width:33.3%;--notch-radius:calc(var(--border-radius) - calc(var(--pad)*2));--notch-w:32%;--notch-h:2.4em;--notch-top:.9em;--camera-size:.8em;--notch-duration:.333s;--ease:cubic-bezier(.666,0,.4,1);--ease-spring:cubic-bezier(.666,0,.4,1.2);--ease-out:cubic-bezier(.15,0,.333,1);--border-width:.4em;--c-h:215;--c-s:100%;--c-l:50%;font-family:Inter,sans-serif;font-size:var(--size);justify-content:center;align-items:center;width:100%;height:100%;display:flex}@keyframes iphone14-appear{to{opacity:1;transform:scale(1)}}.iphone14-root .phone-con{justify-content:center;height:100%;display:flex}.iphone14-root .phone{z-index:1;aspect-ratio:var(--aspect-ratio);height:var(--height);border-radius:var(--border-radius);box-shadow:0 0 .1em .25em hsl(var(--c-h),20%,25%),0 0 0 var(--border-width)hsl(var(--c-h),30%,85%);box-sizing:border-box;opacity:0;animation:iphone14-appear 1s var(--ease-out)forwards;background:#000;position:relative;transform:scale(1.05)}.iphone14-root .phone:before{content:"";top:var(--border-radius);right:calc(var(--border-width)*-1);bottom:var(--border-radius);left:calc(var(--border-width)*-1);border:.5em solid hsl(var(--c-h),20%,30%);border-left-width:0;border-right-width:0;position:absolute}.iphone14-root .buttons{inset:calc(var(--border-width)*-1);pointer-events:none;position:absolute}.iphone14-root .buttons .left,.iphone14-root .buttons .right{width:var(--button-width);flex-direction:column;align-items:stretch;gap:1.5em;display:flex;position:absolute}.iphone14-root .buttons .left{right:100%;top:calc(var(--border-radius)*2)}.iphone14-root .buttons .left .button:first-child{height:3em;margin-bottom:.5em}.iphone14-root .buttons .right{left:100%;top:calc(var(--border-radius)*3);transform:scaleX(-1)}.iphone14-root .buttons .right .button{height:9.5em}.iphone14-root .buttons .button{background:hsl(var(--c-h),20%,95%);height:6em;box-shadow:inset -.15em 0 .1em black,inset 0 0 .1em hsl(var(--c-h),30%,90%),inset 0 .2em .1em hsl(var(--c-h),30%,90%),inset 0 -.2em .1em hsl(var(--c-h),30%,90%),inset -.1em .333em .1em #00000080,inset -.1em -.333em .1em #00000080;border-top-left-radius:.2em;border-bottom-left-radius:.2em}.iphone14-root .screen-container{border-radius:var(--border-radius);border:var(--pad)solid black;align-items:center;gap:calc(var(--pad)*2);flex-direction:column;display:flex;position:absolute;inset:0;overflow:hidden}.iphone14-root .screen-container:before{content:"";z-index:2;width:36.6%;bottom:calc(var(--pad)*.75);height:calc(var(--pad)*.5);border-radius:calc(var(--pad)*.25);filter:drop-shadow(0 .1em .25em #0000001a);background:#fff;position:absolute}.iphone14-root .bg{border-radius:calc(var(--border-radius) - var(--pad));background:#000;position:absolute;inset:0;overflow:hidden}.iphone14-root .notch-container{z-index:3;top:var(--notch-top);width:var(--notch-w);height:var(--notch-h);pointer-events:none;border-radius:999em;outline:none;position:absolute;left:50%;overflow:hidden;transform:translate(-50%)}.iphone14-root .notch{border-radius:inherit;background:#000;position:absolute;inset:0}.iphone14-root .notch:before,.iphone14-root .notch-blur{display:none}.iphone14-root .camera{z-index:4;top:calc(var(--notch-top) + var(--notch-h)/2);left:calc(50% + var(--notch-w)/2 - var(--camera-size) - .35em);width:var(--camera-size);height:var(--camera-size);pointer-events:none;background-color:#080928;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;transform:translateY(-50%)}.iphone14-root .camera:before{content:"";aspect-ratio:1;border-radius:inherit;background:radial-gradient(circle at 30% 25%,#6667ac 0%,#454680 70%);height:40%;box-shadow:inset 0 0 .15em #4c4da3}.iphone14-root .screen{border-radius:calc(var(--border-radius) - var(--pad));z-index:1;position:absolute;inset:0;overflow:hidden}