.fap-root{--pad:1.25em;--border-radius:6.666em;--border-width:.4em;--button-width:.333em;--notch-height:3.33em;--notch-width:33.3%;--notch-radius:calc(var(--border-radius) - calc(var(--pad) * 2));--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);font-size:6px;display:inline-block;position:relative}@keyframes fap-appear{to{opacity:1;transform:scale(1)}}.fap-phone{z-index:1;aspect-ratio:37/76;border-radius:var(--border-radius);height:100em;box-shadow:0 0 .1em .25em hsl(var(--ph), 20%, 25%), 0 0 0 var(--border-width) hsl(var(--ph), 30%, 85%);box-sizing:border-box;opacity:0;animation:fap-appear 1s var(--ease-out) forwards;background:#000;position:relative;transform:scale(1.1)}.fap-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(--ph), 20%, 30%);border-left-width:0;border-right-width:0;position:absolute}.fap-buttons{inset:calc(var(--border-width) * -1);pointer-events:none;position:absolute}.fap-left,.fap-right{width:var(--button-width);flex-direction:column;align-items:stretch;gap:1.5em;display:flex;position:absolute}.fap-left{right:100%;top:calc(var(--border-radius) * 2)}.fap-left .fap-button:first-child{height:3em;margin-bottom:.5em}.fap-right{left:100%;top:calc(var(--border-radius) * 3);transform:scaleX(-1)}.fap-right .fap-button{height:9.5em}.fap-button{background:hsl(var(--ph), 20%, 95%);height:6em;box-shadow:inset -.15em 0 .1em black, inset 0 0 .1em hsl(var(--ph), 30%, 90%), inset 0 .2em .1em hsl(var(--ph), 30%, 90%), inset 0 -.2em .1em hsl(var(--ph), 30%, 90%), inset -.1em .333em .1em #00000080, inset -.1em -.333em .1em #00000080;border-top-left-radius:.2em;border-bottom-left-radius:.2em}.fap-screen-container{border-radius:var(--border-radius);border:var(--pad) solid black;flex-direction:column;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.fap-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}.fap-bg{border-radius:calc(var(--border-radius) - var(--pad));background:#000;flex-direction:column;display:flex;position:absolute;inset:0;overflow:hidden;transform:translateZ(0)}.fap-section{border-radius:calc(var(--border-radius) - var(--pad));border-bottom-right-radius:20em;border-bottom-left-radius:20em;flex-grow:1;position:relative;overflow:hidden}.fap-section:before{content:"";border-radius:inherit;background:radial-gradient(120% 110% at 50% 92.5%, #000 33%, #000000b3 46%, #00000080 56%, #0000004d 65%, #00000026 73%, #0000000d 83%, #0000 100%), radial-gradient(100% 66.6% at 110% 100%, hsl(var(--ph), 100%, 50%) 33%, hsla(var(--ph), 100%, 50%, .6) 50%, hsla(var(--ph), 100%, 50%, .2) 70%, hsla(var(--ph), 100%, 50%, 0) 100%), radial-gradient(100% 66.6% at -10% 100%, hsl(var(--ph), 100%, 50%) 33%, hsla(var(--ph), 100%, 50%, .6) 50%, hsla(var(--ph), 100%, 50%, .2) 70%, hsla(var(--ph), 100%, 50%, 0) 100%), radial-gradient(150% 100% at 50% 80%, hsla(var(--pha,35), 100%, 70%, 0) 35%, hsla(var(--pha,35), 100%, 70%, .5) 55%, hsla(var(--pha,35), 100%, 70%, .9) 80%, hsl(var(--pha,35), 100%, 70%) 100%);background-color:hsl(var(--ph), 100%, 50%);transform-origin:bottom;position:absolute;inset:0;transform:scale(1.1,1.25)}.fap-section:after{content:"";border:var(--border-width) solid #fffc;border-radius:inherit;filter:blur(.05em);position:absolute;inset:0;transform:translateZ(2px);-webkit-mask-image:radial-gradient(100% 100% at 50% 70%,#000 30%,#0000 50%);mask-image:radial-gradient(100% 100% at 50% 70%,#000 30%,#0000 50%)}.fap-glow{border-radius:inherit;mix-blend-mode:overlay;z-index:1;background:radial-gradient(80% 150% at 50% 100%, hsl(var(--ph), 100%, 50%), transparent 70%);position:absolute;inset:0}.fap-section:last-child{transform:scaleY(-1)translateZ(1px)}.fap-section:last-child:before{background:radial-gradient(120% 110% at 50% 92.5%, #000 33%, #000000b3 46%, #00000080 56%, #0000004d 65%, #00000026 73%, #0000000d 83%, #0000 100%), radial-gradient(100% 66.6% at 110% 85%, hsl(var(--pha,35), 100%, 50%) 33%, hsla(var(--pha,35), 100%, 50%, .6) 50%, hsla(var(--pha,35), 100%, 50%, .2) 70%, hsla(var(--pha,35), 100%, 50%, 0) 100%), radial-gradient(100% 66.6% at -10% 85%, hsl(var(--pha,35), 100%, 50%) 33%, hsla(var(--pha,35), 100%, 50%, .6) 50%, hsla(var(--pha,35), 100%, 50%, .2) 70%, hsla(var(--pha,35), 100%, 50%, 0) 100%), radial-gradient(150% 100% at 50% 80%, hsla(calc(var(--ph) - 7), 100%, 88%, 0) 35%, hsla(calc(var(--ph) - 7), 100%, 88%, .5) 55%, hsla(calc(var(--ph) - 7), 100%, 88%, .9) 80%, hsl(calc(var(--ph) - 7), 100%, 88%) 100%);background-color:hsl(var(--pha,35), 100%, 76%);transform-origin:bottom;transform:scale(1.1,1.25)}.fap-section:last-child .fap-glow{background:radial-gradient(80% 150% at 50% 100%, hsl(var(--pha,35), 100%, 76%), transparent 70%);opacity:.45}.fap-camera{height:var(--notch-height);aspect-ratio:1;pointer-events:none;z-index:4;top:calc(var(--pad) * 2);right:calc(50% - calc(var(--notch-width) * .5));margin-right:calc(var(--pad) * .333);border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute}.fap-camera:before{content:"";aspect-ratio:1;border-radius:inherit;background:radial-gradient(#6667ac,#0000 50%) 33.3% 10%/75% 50% no-repeat,#080928 radial-gradient(#454680,#0000 50%) 60% 85%/50% 50% no-repeat;height:33.3%;box-shadow:inset 0 0 .25em #4c4da3}.fap-notch-container{z-index:3;top:var(--pad);right:var(--pad);left:var(--pad);height:100%;max-height:calc(var(--notch-radius) * 2);pointer-events:none;transition:var(--notch-duration) var(--ease);will-change:max-width, max-height, filter;outline:none;justify-content:center;transition-property:max-height,max-width,filter,transform;display:flex;position:absolute}.fap-notch-container:hover,.fap-notch-container:focus-within{--shadow-opacity:.5;transition-timing-function:var(--ease-spring)}.fap-notch-container:hover .fap-notch,.fap-notch-container:focus-within .fap-notch{pointer-events:all;max-width:100%;max-height:100%;transform:scale(1)}.fap-notch-container:hover~.fap-notch-blur,.fap-notch-container:focus-within~.fap-notch-blur{opacity:1;max-height:calc(var(--notch-radius) * 3.333 + var(--pad))}.fap-notch{border-radius:var(--notch-radius);pointer-events:all;color:#fff;cursor:pointer;will-change:inherit;width:100%;filter:drop-shadow(0 1em 2em hsla(0 0% 0% / var(--shadow-opacity,0)));transform-origin:top;transition:inherit;display:flex;position:relative;overflow:hidden;transform:scale(.375,.4)}.fap-notch:before{content:"";border-radius:inherit;background:#000;position:absolute;inset:0}.fap-content{flex-wrap:wrap;align-items:stretch;gap:1em;width:100%;padding:1.75em;font-size:125%;display:flex;position:relative}.fap-notch-blur{z-index:2;top:calc(var(--pad) - 3px);right:calc(var(--pad) - 3px);left:calc(var(--pad) - 3px);height:100%;max-height:calc(var(--notch-radius) * 1.5);-webkit-backdrop-filter:blur(.2em);backdrop-filter:blur(.2em);opacity:0;border-radius:calc(var(--border-radius) - var(--pad));transition:var(--notch-duration) var(--ease);will-change:max-width, max-height;transition-property:max-height,max-width,opacity,transform;position:absolute;-webkit-mask-image:linear-gradient(#000 60%,#0000 100%);mask-image:linear-gradient(#000 60%,#0000 100%)}.fap-screen--no-padding{padding:0!important}.fap-screen{z-index:1;width:100%;padding:calc(var(--pad) * 2);padding-top:calc(var(--pad) * 6);box-sizing:border-box;border-radius:calc(var(--border-radius) - var(--pad));flex-direction:column;flex-grow:1;display:flex;position:relative;overflow:hidden}