@import"https://fonts.cdnfonts.com/css/satoshi";*{box-sizing:border-box;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}html,body{height:100%}body{display:flex;flex-direction:row;flex-wrap:wrap;flex-wrap:nowrap;justify-content:center;align-items:center;margin:0;padding-top:120px;background:#ededed;font-family:Satoshi,sans-serif;--scale: clamp(200px, 22vw, 300px)}.card{--clr: #7da072;--fclr: #f0ffe2;&:nth-child(2){--clr: #2e2e2e;--fclr: #fefefe}&:nth-child(3){--clr: #fff;--fclr: #000}width:var(--scale);height:364px;min-width:var(--scale);background:var(--clr);border-radius:8px;box-shadow:-8px -8px 24px #fffc,1px 1px 3px #0002,12px 42px 24px -8px #0001,10px 24px 42px #0001,1px 4px 12px #0002;&:nth-child(1){box-shadow:-8px -8px 24px #fffc,1px 1px 3px #7da07277,12px 42px 24px -8px #7da07233,10px 24px 42px #7da07233,1px 4px 12px #7da07244}&:nth-child(2){box-shadow:-8px -8px 24px #fffc,1px 1px 3px #0006,12px 42px 24px -8px #0003,10px 24px 42px #0003,1px 4px 12px #0006}position:relative;display:flex;flex-direction:column;justify-content:end;align-items:center;cursor:pointer;margin:auto 24px;.content{position:relative;z-index:1;bottom:0;top:unset;height:fit-content;padding:12px 24px;h2,p{margin:0 0 8px;padding:0;line-height:124%;font-weight:700;color:var(--fclr)}p{font-weight:500;margin-bottom:16px}.options{position:absolute;display:flex;gap:4px;bottom:8px;right:12px;>div{cursor:pointer;width:24px;height:16px;border-radius:4px;background:#fff;border:1px solid #aaa8;transition:border .1s ease-in-out;&:hover{border:1px solid #fff}}}}.glass{pointer-events:none;position:absolute;bottom:0;left:0;width:100%;height:80%;background:linear-gradient(transparent,var(--clr) 80%);border-bottom-right-radius:8px;border-bottom-left-radius:8px;overflow:hidden}.overflow{pointer-events:none;position:absolute;width:200%;height:200%;overflow:hidden;display:flex;justify-content:end;align-items:end;clip-path:polygon(0 0,100% 0,100% 60%,75% 60%,75% 100%,25% 100%,25% 60%,0 60%)}.model{position:absolute;width:100%;height:100%;bottom:-10%;display:flex;justify-content:center;align-items:center;model-viewer{position:absolute;height:500px;width:500px;height:calc((5/3) * var(--scale));--progress-bar-color: none;--progress-bar-height: 0px;opacity:0;transition:filter .4s ease-in-out;&.loaded{animation:onLoad 1s ease-in forwards}}}@media(max-width:700px){&:nth-child(3){display:none}}@media(max-width:468px){&:nth-child(1){display:none}}}@keyframes onLoad{to{opacity:1}}.gradient-blur{position:absolute;z-index:1;height:100%;inset:auto 0 0;pointer-events:none}.gradient-blur:nth-child(2){inset:auto 0}.gradient-blur>div,.gradient-blur:before,.gradient-blur:after{position:absolute;inset:0;--p1: 0%;--p2: 12.5%;--p3: 25%;--p4: 37.5%;--p5: 50%;--p6: 62.5%;--p7: 75%;--p8: 87.5%;--p9: 100%}.gradient-blur:before{content:"";z-index:1;backdrop-filter:blur(.5px);mask:linear-gradient(to bottom,rgba(0,0,0,0) var(--p1),rgba(0,0,0,1) var(--p2),rgba(0,0,0,1) var(--p3),rgba(0,0,0,0) var(--p4))}.gradient-blur>div:nth-of-type(1){z-index:2;backdrop-filter:blur(1px);mask:linear-gradient(to bottom,rgba(0,0,0,0) var(--p2),rgba(0,0,0,1) var(--p3),rgba(0,0,0,1) var(--p4),rgba(0,0,0,0) var(--p5))}.gradient-blur>div:nth-of-type(2){z-index:3;backdrop-filter:blur(2px);mask:linear-gradient(to bottom,rgba(0,0,0,0) var(--p3),rgba(0,0,0,1) var(--p4),rgba(0,0,0,1) var(--p5),rgba(0,0,0,0) var(--p6))}.gradient-blur>div:nth-of-type(3){z-index:4;backdrop-filter:blur(4px);mask:linear-gradient(to bottom,rgba(0,0,0,0) var(--p4),rgba(0,0,0,1) var(--p5),rgba(0,0,0,1) var(--p6),rgba(0,0,0,0) var(--p7))}.gradient-blur>div:nth-of-type(4){z-index:5;backdrop-filter:blur(8px);mask:linear-gradient(to bottom,rgba(0,0,0,0) var(--p5),rgba(0,0,0,1) var(--p6),rgba(0,0,0,1) var(--p7),rgba(0,0,0,0) var(--p8))}.gradient-blur>div:nth-of-type(5){z-index:6;backdrop-filter:blur(16px);mask:linear-gradient(to bottom,rgba(0,0,0,0) var(--p6),rgba(0,0,0,1) var(--p7),rgba(0,0,0,1) var(--p8),rgba(0,0,0,0) var(--p9))}.gradient-blur>div:nth-of-type(6){z-index:7;backdrop-filter:blur(32px);mask:linear-gradient(to bottom,rgba(0,0,0,0) var(--p7),rgba(0,0,0,1) var(--p8),rgba(0,0,0,1) var(--p9))}.gradient-blur:after{content:"";z-index:8;backdrop-filter:blur(64px);mask:linear-gradient(to bottom,rgba(0,0,0,0) var(--p8),rgba(0,0,0,1) var(--p9))}