@property --angle-1{syntax:"<angle>";inherits:false;initial-value:-75deg}@property --angle-2{syntax:"<angle>";inherits:false;initial-value:-45deg}:root{--global--size:clamp(1rem,2vw,1.25rem);--anim--hover-time:400ms;--anim--hover-ease:cubic-bezier(0.25,1,0.5,1);--shadow-cuttoff-fix:2em}.ease-custom{transition-timing-function:cubic-bezier(.25,1,.5,1)}.duration-400{transition-duration:.4s}.shadow-cutoff{--shadow-cuttoff-fix:2em;width:calc(100% + var(--shadow-cuttoff-fix));height:calc(100% + var(--shadow-cuttoff-fix));top:calc(0% - var(--shadow-cuttoff-fix) / 2);left:calc(0% - var(--shadow-cuttoff-fix) / 2)}.mask-gradient{mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask-composite:exclude}.perspective-1000{perspective:1000px}.preserve-3d{transform-style:preserve-3d}.backface-hidden{backface-visibility:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden}.glassmorphic-card{--border-width:clamp(1px,0.0625em,4px);background:linear-gradient(-75deg,rgba(255,255,255,.05),rgba(255,255,255,.2),rgba(255,255,255,.05));box-shadow:inset 0 .125em .125em rgba(0,0,0,.05),inset 0 -.125em .125em rgba(255,255,255,.5),0 .25em .125em -.125em rgba(0,0,0,.2),inset 0 0 .1em .25em rgba(255,255,255,.2),0 0 0 0 rgba(255,255,255,1);backdrop-filter:blur(clamp(1px,.125em,4px));-webkit-backdrop-filter:blur(clamp(1px,.125em,4px))}@-moz-document url-prefix(){.preserve-3d:not([style*="rotateY(180deg)"]) .glassmorphic-card[style*="rotateY(180deg)"],.preserve-3d[style*="rotateY(180deg)"] .glassmorphic-card:not([style*="rotateY(180deg)"]){opacity:0;visibility:hidden}}.glassmorphic-card:after{content:"";position:absolute;z-index:1;inset:0;border-radius:1.5rem;width:calc(100% + var(--border-width));height:calc(100% + var(--border-width));top:calc(0% - var(--border-width) / 2);left:calc(0% - var(--border-width) / 2);padding:var(--border-width);box-sizing:border-box;background:conic-gradient(from var(--angle-1) at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,0) 5% 40%,rgba(0,0,0,.5) 50%,rgba(0,0,0,0) 60% 95%,rgba(0,0,0,.5)),linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.5));mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask-composite:exclude;transition:all var(--anim--hover-time) var(--anim--hover-ease),--angle-1 .5s ease;box-shadow:inset 0 0 0 calc(var(--border-width) / 2) rgba(255,255,255,.5)}.preserve-3d:not([style*="rotateY(180deg)"]) .glassmorphic-card:hover{transform:scale(.975);backdrop-filter:blur(.01em);-webkit-backdrop-filter:blur(.01em);box-shadow:inset 0 .125em .125em rgba(0,0,0,.05),inset 0 -.125em .125em rgba(255,255,255,.5),0 .15em .05em -.1em rgba(0,0,0,.25),inset 0 0 .05em .1em rgba(255,255,255,.5),0 0 0 0 rgba(255,255,255,1)}.preserve-3d:not([style*="rotateY(180deg)"]) .glassmorphic-card:hover:after{--angle-1:-125deg}.preserve-3d:not([style*="rotateY(180deg)"]) .glassmorphic-card:active:after{--angle-1:-75deg}.preserve-3d[style*="rotateY(180deg)"] .glassmorphic-card[style*="rotateY(180deg)"]:hover{transform:rotateY(180deg) scale(.975);backdrop-filter:blur(.01em);-webkit-backdrop-filter:blur(.01em);box-shadow:inset 0 .125em .125em rgba(0,0,0,.05),inset 0 -.125em .125em rgba(255,255,255,.5),0 .15em .05em -.1em rgba(0,0,0,.25),inset 0 0 .05em .1em rgba(255,255,255,.5),0 0 0 0 rgba(255,255,255,1)}.preserve-3d[style*="rotateY(180deg)"] .glassmorphic-card[style*="rotateY(180deg)"]:hover:after{--angle-1:-125deg}.preserve-3d[style*="rotateY(180deg)"] .glassmorphic-card[style*="rotateY(180deg)"]:active:after{--angle-1:-75deg}.card-content:after{content:"";display:block;position:absolute;width:calc(100% - var(--border-width));height:calc(100% - var(--border-width));top:calc(0% + var(--border-width) / 2);left:calc(0% + var(--border-width) / 2);box-sizing:border-box;border-radius:1.5rem;overflow:clip;background:linear-gradient(var(--angle-2),rgba(255,255,255,0) 0,rgba(255,255,255,.5) 40% 50%,rgba(255,255,255,0) 55%);z-index:3;mix-blend-mode:screen;pointer-events:none;background-size:200% 200%;background-position:0 50%;background-repeat:no-repeat;transition:background-position calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease),--angle-2 calc(var(--anim--hover-time) * 1.25) var(--anim--hover-ease)}.glassmorphic-card:hover .card-content:after{background-position:25% 50%}.glassmorphic-card:active .card-content:after{background-position:50% 15%;--angle-2:-15deg}.preserve-3d:not([style*="rotateY(180deg)"]) .glassmorphic-card:active~.shadow-cutoff,.preserve-3d:not([style*="rotateY(180deg)"]) .glassmorphic-card:hover~.shadow-cutoff{filter:blur(clamp(2px,.0625em,6px));-webkit-filter:blur(clamp(2px,.0625em,6px))}.glassmorphic-card:active{transform:perspective(1000px) rotateX(5deg);box-shadow:inset 0 .125em .125em rgba(0,0,0,.05),inset 0 -.125em .125em rgba(255,255,255,.5),0 .125em .125em -.125em rgba(0,0,0,.2),inset 0 0 .1em .25em rgba(255,255,255,.2),0 .225em .05em 0 rgba(0,0,0,.05),0 .25em 0 0 rgba(255,255,255,.75),inset 0 .25em .05em 0 rgba(0,0,0,.15)}.reset-button{position:relative;z-index:10}.glassmorphic-card .card-content button{backdrop-filter:none;-webkit-backdrop-filter:none}