.fade-in-animation{opacity:0;animation:fadeInAnimate ease forwards}.fade-zoom-animation{opacity:0;animation:fadeZoomAnimate ease forwards}.fade-down-animation{opacity:0;animation:fadeDownAnimate 1s ease forwards}@keyframes fadeInAnimate{0%{opacity:0}to{opacity:1}}@keyframes fadeZoomAnimate{0%{transform:scale(0);opacity:0}50%{transform:scale(.95)}to{transform:scale(.85);opacity:1}}@keyframes fadeDownAnimate{0%{transform:translateY(-40px);opacity:0}to{transform:translateY(0);opacity:1}}:root{--size:max(5px,1vmin);--height:85em;--pad:1.25em;--border-radius:6.666em;--button-width:0.333em;--notch-height:3.33em;--notch-width:33.3%;--notch-radius:calc(var(--border-radius) - calc(var(--pad) * 2));--notch-duration:0.333s;--ease:cubic-bezier(0.666,0,0.4,1);--ease-out:cubic-bezier(0.15,0,0.333,1);--border-width:0.4em;--deep-purple:284;--c-h:var(--deep-purple);--c-s:100%;--c-l:50%}@keyframes appear{to{transform:scaleX(1);opacity:1}}.scene{flex-wrap:wrap;align-items:center;align-content:center;height:calc(var(--height) + 24px);max-width:100%;font-family:Inter;font-size:var(--size);box-sizing:border-box}.phone-con,.scene{display:flex;justify-content:center}.phone-con{flex-basis:100%}.phone{position:relative;z-index:1;aspect-ratio:37/76;height:var(--height);max-height:675px;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;transform:scale3d(1.1,1.1,1);animation:appear 1s var(--ease-out) forwards}.buttons{position:absolute;inset:calc(var(--border-width)*-1);pointer-events:none}.buttons .left,.buttons .right{position:absolute;width:var(--button-width);display:flex;flex-direction:column;align-items:stretch;gap:1.5em}.buttons .left{right:100%;top:calc(var(--border-radius)*2)}.buttons .left .button:first-child{height:3em;margin-bottom:.5em}.buttons .right{left:100%;transform:scaleX(-1);top:calc(var(--border-radius)*3)}.buttons .right .button{height:9.5em}.buttons .button{background:hsl(var(--c-h),20%,95%);height:6em;box-shadow:inset -.15em 0 .1em #000,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 rgba(0,0,0,.5),inset -.1em -.333em .1em rgba(0,0,0,.5);border-top-left-radius:.2em;border-bottom-left-radius:.2em}.screen-container{position:absolute;inset:0;border-radius:var(--border-radius);border:var(--pad) solid #000;display:flex;flex-direction:column;align-items:center;gap:calc(var(--pad)*2)}.screen-container:before{content:"";position:absolute;z-index:2;background:#fff;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 rgba(0,0,0,.1))}.bg{border-radius:calc(var(--border-radius) - var(--pad));overflow:hidden;transform:translateZ(0)}.bg,.bg>*{position:absolute;inset:0;background:#000}.bg>*{display:flex;flex-direction:column;opacity:0;transition:opacity 1s var(--ease-out) .5s}.bg .section{--g-h:var(--c-h);--g-s:var(--c-s);--g-l:var(--c-l);flex-grow:1;position:relative;overflow:hidden;border-radius:calc(var(--border-radius) - var(--pad));border-bottom-left-radius:20em;border-bottom-right-radius:20em}.bg .section:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 110% at 50% 92.5%,#000 33.3%,rgba(0,0,0,.738) 45.973%,rgba(0,0,0,.541) 55.978%,rgba(0,0,0,.382) 64.649%,rgba(0,0,0,.278) 70.9855%,rgba(0,0,0,.194) 76.655%,rgba(0,0,0,.126) 81.991%,rgba(0,0,0,.075) 86.7934%,rgba(0,0,0,.042) 90.7287%,rgba(0,0,0,.021) 93.997%,rgba(0,0,0,.008) 96.7984%,rgba(0,0,0,.002) 98.7994%,transparent 100%),radial-gradient(100% 66.6% at 110% var(--g-hue-adjust-2-y,100%),hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,1) 33.3%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.738) 45.973%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.541) 55.978%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.382) 64.649%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.278) 70.9855%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.194) 76.655%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.126) 81.991%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.075) 86.7934%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.042) 90.7287%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.021) 93.997%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.008) 96.7984%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.002) 98.7994%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,0) 100%),radial-gradient(100% 66.6% at -10% var(--g-hue-adjust-2-y,100%),hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,1) 33.3%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.738) 45.973%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.541) 55.978%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.382) 64.649%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.278) 70.9855%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.194) 76.655%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.126) 81.991%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.075) 86.7934%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.042) 90.7287%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.021) 93.997%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.008) 96.7984%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.002) 98.7994%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,0) 100%),radial-gradient(150% 100% at 50% 80%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),0) 35%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),.262) 47.35%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),.459) 57.1%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),.618) 65.55%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),.722) 71.725%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),.806) 77.25%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),.874) 82.45%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),.925) 87.13%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),.958) 90.965%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),.979) 94.15%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),.992) 96.88%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),.998) 98.83%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),1) 100%);background-color:hsl(var(--g-h),var(--g-s),var(--g-l));transform:scale3d(1.1,1.25,1);transform-origin:bottom;transition:transform 1s var(--ease-out) .5s}.bg .section:after{content:"";border:var(--border-width) solid hsla(0,0%,100%,.8);filter:blur(.05em);mask-image:radial-gradient(100% 100% at 50% 70%,#000 30%,transparent 50%);transform:translatez(2px)}.bg .section .glow,.bg .section:after{position:absolute;inset:0;border-radius:inherit}.bg .section .glow{mix-blend-mode:overlay;z-index:1;background:radial-gradient(80% 150% at 50% 100%,hsl(var(--g-h),100%,var(--g-l)),transparent 70%)}.bg .section:last-of-type{--g-h:calc(var(--c-h) - var(--g-hue-adjust, 0));--g-l:calc(var(--c-l) + 40%);--g-lightness:95%;transform:scaleY(-1) translateZ(1px)}.notch-container{position:absolute;z-index:3;top:var(--pad);right:var(--pad);left:var(--pad);display:flex;justify-content:center;height:100%;max-height:calc(var(--notch-radius)*2);pointer-events:none;outline:none;transition:var(--notch-duration) var(--ease);transition-property:max-height,max-width,filter,transform;will-change:max-width,max-height,filter}.notch{position:relative;width:100%;border-radius:var(--notch-radius);overflow:hidden;display:flex;transform:scale3d(.375,.4,1);transform-origin:top}.notch:before{content:"";position:absolute;inset:0;background:#000;border-radius:inherit}.camera{display:flex;justify-content:center;align-items:center;height:var(--notch-height);aspect-ratio:1/1;border-radius:50%;pointer-events:none;position:absolute;z-index:4;top:calc(var(--pad)*2);right:calc(50% - var(--notch-width)*.5);margin-right:calc(var(--pad)*.333)}.camera:before{content:"";height:33.3%;aspect-ratio:1;border-radius:inherit;box-shadow:inset 0 0 .25em #4c4da3;background:radial-gradient(#6667ac,transparent 50%) no-repeat 33.3% 10%/75% 50%,radial-gradient(#454680,transparent 50%) no-repeat 60% 85%/50% 50%;background-color:#080928}.deep-purple{--c-h:var(--deep-purple);--g-hue-adjust:40;--g-hue-adjust-2:45}.deep-purple .section:last-of-type{--g-hue-adjust-2-y:85%}.deep-purple .scene .phone .bg .deep-purple{opacity:1;z-index:1;transition-delay:0s}.deep-purple .scene .phone .bg .deep-purple .section:before{transition-delay:0s;transform:scaleX(1) translateZ(0)}