:root{--bg:25% 0.0075 70;--pink:77.75% 0.1003 350.51;--gold:84.16% 0.1169 71.19;--mint:84.12% 0.1334 165.28;--mobile--w:360px;--mobile--h:540px;--outline-w:9px;--preview-bg:#fff}.stats-card-container{display:flex;flex-wrap:wrap;place-items:center;place-content:center;gap:2rem;height:100%}.stats-card-container:has(:hover,:focus-within) .stats-card:not(:hover,:focus){opacity:.4}.stats-card{--bg-pos-y--start:0;--bg-pos-y--end:0;--bg-pos-y:var(--bg-pos-y--start);--delay:0;--duration:6s;--shadow-blur:24px;--shadow-color:oklch(var(--bg));background-clip:padding-box;background-position-y:var(--bg-pos-y);background-repeat:repeat;background-size:cover;background-attachment:fixed;border:var(--outline-w) solid var(--border-color,transparent);border-radius:6px;box-shadow:0 0 var(--shadow-blur) 0 var(--shadow-color);transition-property:border,box-shadow,filter,outline-offset,opacity,rotate,scale,z-index;transition-duration:.15s,.15s,.6s,.6s,.3s,.3s,.3s,.15s;filter:grayscale(100%) sepia(5%);mix-blend-mode:multiply;opacity:.69;scale:.85;rotate:var(--rotation,-4deg);outline:var(--outline-w) solid var(--preview-bg);outline-offset:var(--outline-w);min-height:var(--mobile--h);height:100%;min-width:var(--mobile--w);width:100%;position:relative;animation-name:bg-scroll;animation-delay:var(--delay);animation-duration:var(--duration);animation-fill-mode:forwards}.stats-card:focus-within,.stats-card:hover{--shadow-blur:200px;--shadow-color:oklch(var(--gold));--border-color:var(--shadow-color);background-color:#fff;mix-blend-mode:normal;filter:none;opacity:1;outline-offset:calc(var(--outline-w) / 2);scale:1;rotate:0deg;transition-property:border,box-shadow,filter,outline-offset,opacity,rotate,scale,z-index;transition-duration:.15s,.15s,.3s,.3s,.3s,.3s,.3s,.15s}.stats-card:focus-within{--shadow-color:oklch(var(--pink));z-index:5}.stats-card:hover{z-index:6}.stats-card:hover:focus{--shadow-color:oklch(var(--mint))}.stats-card.mobile{max-height:var(--mobile--h);max-width:var(--mobile--w)}.stats-card:first-of-type{background-image:repeating-linear-gradient(45deg,#0a0a0a,#0a0a0a 10px,#141414 0,#141414 20px);background-size:28px 28px}.stats-card:nth-of-type(2){--bg-pos-y--end:calc(var(--mobile--h) * -1.025);--rotation:3deg;background-image:radial-gradient(circle at 2px 2px,#333 1px,transparent 0);background-size:20px 20px;background-color:#0a0a0a}.stats-card:nth-of-type(3){--bg-pos-y--end:calc(var(--mobile--h) * -2.25);--duration:6.5s;--rotation:-1deg;background-image:repeating-linear-gradient(-45deg,#111,#111 15px,#000 0,#000 30px);background-size:42px 42px}@keyframes bg-scroll{to{background-position-y:var(--bg-pos-y--end)}}@keyframes infinite-scroll{0%{transform:translateX(0)}to{transform:translateX(-50%)}}@media (max-width:1023px){.stats-card-container{flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;place-content:unset;place-items:unset;gap:1.25rem;height:auto;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:1.25rem;padding:1.5rem 1.25rem 2.5rem;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}.stats-card-container::-webkit-scrollbar{display:none}.stats-card-container:has(:hover,:focus-within) .stats-card:not(:hover,:focus){opacity:.69}.stats-card.mobile{flex:0 0 min(82vw,320px);width:min(82vw,320px);min-width:min(82vw,320px);max-width:min(82vw,320px);min-height:min(70vw,420px);max-height:min(70vw,420px);height:min(70vw,420px);scroll-snap-align:center;rotate:0deg;scale:1;opacity:1;filter:none;mix-blend-mode:normal}.stats-card.mobile:first-of-type,.stats-card.mobile:nth-of-type(2),.stats-card.mobile:nth-of-type(3){--rotation:0deg}}.animate-infinite-scroll{animation:infinite-scroll 40s linear infinite;will-change:transform}