.roller-wrapper{color:#fff;-webkit-user-select:none;user-select:none;border-radius:16px;flex-direction:column;align-items:center;gap:.75rem;width:100%;margin:1.25rem auto;display:flex;position:relative}.roller-header{color:#6b7280;justify-content:space-between;align-items:center;width:100%;padding:0 2rem;font-size:14px;font-weight:500;display:flex}.roller-header-left{color:#ef4444}.roller-header-right{color:#6b7280}.roller-container{background:#191b1f;border-radius:1rem;justify-content:center;align-items:center;width:100%;height:60px;display:flex;position:relative;overflow:clip}.roller-container:after{content:"";z-index:11;pointer-events:none;opacity:0;background:#191b1f;width:calc(50% - 2px);transition:opacity .3s ease-in;position:absolute;top:0;bottom:0;left:0}.roller-container.min-reached:after,.roller-container.max-reached:after{opacity:.95}.roller-container.max-reached:after{left:auto;right:0}.roller-container:before{content:"";pointer-events:none;z-index:10;background:linear-gradient(90deg,#191b1f 6%,#191b1f00 30% 70%,#191b1f 94%);position:absolute;inset:0}.roller-drag-area{cursor:grab;z-index:5;touch-action:none;align-items:center;width:100%;height:100%;display:flex;position:absolute;inset:0}.roller-drag-area:after{content:"";width:2000%;position:absolute;inset:0;transform:translate(-50%)}.roller-drag-area:active{cursor:grabbing}.roller-ticks-container{pointer-events:none;position:absolute;inset:0}.roller-tick{opacity:.5;background-color:#d9d9d9;width:2px;position:absolute;top:50%;transform:translateY(-50%)}.roller-tick.major{opacity:1;background-color:#d9d9d9;width:2px;height:36px}.roller-tick.minor{width:2px;height:12px}.roller-pin{z-index:15;pointer-events:none;background-color:#f23645;width:3px;height:40px;margin-right:-1px;transition:background-color .3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.roller-value-text{white-space:nowrap;font-size:16px;font-weight:600}.roller-arrow{cursor:pointer;color:#fff;z-index:30;fill-opacity:.5;justify-content:center;align-items:center;width:50px;height:100%;transition:fill-opacity .25s ease-in;display:flex}.roller-arrow:hover{fill-opacity:1}.roller-arrow-left{position:absolute;top:0;bottom:0;left:0}.roller-arrow-right{position:absolute;top:0;bottom:0;right:0}.roller-arrow-right svg{transform:rotate(180deg)}.roller-footer-text{color:#fff;text-align:center;font-size:12px;font-style:italic}.roller-ticks-center-element{pointer-events:none;width:2px;margin-left:-1px;position:absolute;top:0;bottom:0;left:50%}.counter-container{display:inline-block;position:relative}.counter-counter{gap:0;line-height:1;display:flex;overflow:hidden}.counter-digit{width:1ch;position:relative}.counter-number{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.counter-x{margin-left:1px;display:inline-block}
.loader-boxes{--duration:3s;--primary:#ff69b4;--primary-light:#8a2be2;--primary-rgba:#275efe00;width:200px;height:320px;transform-style:preserve-3d;position:relative;transform:scale(.5)}@media (max-width:480px){.loader-boxes{zoom:.44}}.loader-boxes:before,.loader-boxes:after{--r:20.5deg;content:"";width:320px;height:140px;transform:translateZ(200px)rotate(var(--r));-webkit-animation:mask var(--duration)linear forwards infinite;animation:mask var(--duration)linear forwards infinite;background:#191b1f;position:absolute;bottom:-11px;right:32%}.loader-boxes:after{--r:-20.5deg;left:32%;right:auto}.loader-boxes .ground{transform-style:preserve-3d;position:absolute;bottom:-120px;left:-50px;transform:rotateY(-47deg)rotateX(-15deg)rotate(15deg)scale(1)}.loader-boxes .ground div{background:var(--primary);background:linear-gradient(45deg,var(--primary)0%,var(--primary)50%,var(--primary-light)50%,var(--primary-light)100%);width:200px;height:200px;transform-style:preserve-3d;-webkit-animation:ground var(--duration)linear forwards infinite;animation:ground var(--duration)linear forwards infinite;transform:rotateX(90deg)rotateY(0)translate(-48px,-120px)translateZ(100px)scale(0)}.loader-boxes .ground div:before,.loader-boxes .ground div:after{--rx:90deg;--ry:0deg;--x:44px;--y:162px;--z:-50px;content:"";opacity:0;background:linear-gradient(var(--primary),var(--primary-rgba));width:156px;height:300px;transform:rotateX(var(--rx))rotateY(var(--ry))translate(var(--x),var(--y))translateZ(var(--z));-webkit-animation:ground-shine var(--duration)linear forwards infinite;animation:ground-shine var(--duration)linear forwards infinite;position:absolute}.loader-boxes .ground div:after{--rx:90deg;--ry:90deg;--x:0;--y:177px;--z:150px}.loader-boxes .box{--x:0;--y:0;-webkit-animation:var(--duration)linear forwards infinite;animation:var(--duration)linear forwards infinite;transform:translate(var(--x),var(--y));position:absolute}.loader-boxes .box div{background-color:var(--primary);width:48px;height:48px;transform-style:preserve-3d;-webkit-animation:var(--duration)ease forwards infinite;animation:var(--duration)ease forwards infinite;position:relative;transform:rotateY(-47deg)rotateX(-15deg)rotate(15deg)scale(0)}.loader-boxes .box div:before,.loader-boxes .box div:after{--rx:90deg;--ry:0deg;--z:24px;--y:-24px;--x:0;content:"";background-color:inherit;width:inherit;height:inherit;transform:rotateX(var(--rx))rotateY(var(--ry))translate(var(--x),var(--y))translateZ(var(--z));filter:brightness(var(--b,1.2));position:absolute}.loader-boxes .box div:after{--rx:0deg;--ry:90deg;--x:24px;--y:0;--b:1.4}.loader-boxes .box.box0{--x:-220px;--y:-120px;top:108px;left:58px}.loader-boxes .box.box1{--x:-260px;--y:120px;top:120px;left:25px}.loader-boxes .box.box2{--x:120px;--y:-190px;top:64px;left:58px}.loader-boxes .box.box3{--x:280px;--y:-40px;top:120px;left:91px}.loader-boxes .box.box4{--x:60px;--y:200px;top:132px;left:58px}.loader-boxes .box.box5{--x:-220px;--y:-120px;top:76px;left:25px}.loader-boxes .box.box6{--x:-260px;--y:120px;top:76px;left:91px}.loader-boxes .box.box7{--x:-240px;--y:200px;top:87px;left:58px}.loader-boxes .box0{animation-name:box-move0}.loader-boxes .box0 div{animation-name:box-scale0}.loader-boxes .box1{animation-name:box-move1}.loader-boxes .box1 div{animation-name:box-scale1}.loader-boxes .box2{animation-name:box-move2}.loader-boxes .box2 div{animation-name:box-scale2}.loader-boxes .box3{animation-name:box-move3}.loader-boxes .box3 div{animation-name:box-scale3}.loader-boxes .box4{animation-name:box-move4}.loader-boxes .box4 div{animation-name:box-scale4}.loader-boxes .box5{animation-name:box-move5}.loader-boxes .box5 div{animation-name:box-scale5}.loader-boxes .box6{animation-name:box-move6}.loader-boxes .box6 div{animation-name:box-scale6}.loader-boxes .box7{animation-name:box-move7}.loader-boxes .box7 div{animation-name:box-scale7}@keyframes box-move0{12%{transform:translate(var(--x),var(--y))}25%,52%{transform:translate(0)}80%{transform:translateY(-32px)}90%,to{transform:translateY(188px)}}@keyframes box-scale0{6%{transform:rotateY(-47deg)rotateX(-15deg)rotate(15deg)scale(0)}14%,to{transform:rotateY(-47deg)rotateX(-15deg)rotate(15deg)scale(1)}}@keyframes box-move1{16%{transform:translate(var(--x),var(--y))}29%,52%{transform:translate(0)}80%{transform:translateY(-32px)}90%,to{transform:translateY(188px)}}@keyframes box-scale1{10%{transform:rotateY(-47deg)rotateX(-15deg)rotate(15deg)scale(0)}18%,to{transform:rotateY(-47deg)rotateX(-15deg)rotate(15deg)scale(1)}}@keyframes box-move2{20%{transform:translate(var(--x),var(--y))}33%,52%{transform:translate(0)}80%{transform:translateY(-32px)}90%,to{transform:translateY(188px)}}@keyframes box-scale2{14%{transform:rotateY(-47deg)rotateX(-15deg)rotate(15deg)scale(0)}22%,to{transform:rotateY(-47deg)rotateX(-15deg)rotate(15deg)scale(1)}}@keyframes box-move3{24%{transform:translate(var(--x),var(--y))}37%,52%{transform:translate(0)}80%{transform:translateY(-32px)}90%,to{transform:translateY(188px)}}@keyframes box-scale3{18%{transform:rotateY(-47deg)rotateX(-15deg)rotate(15deg)scale(0)}26%,to{transform:rotateY(-47deg)rotateX(-15deg)rotate(15deg)scale(1)}}@keyframes box-move4{28%{transform:translate(var(--x),var(--y))}41%,52%{transform:translate(0)}80%{transform:translateY(-32px)}90%,to{transform:translateY(188px)}}@keyframes box-scale4{22%{transform:rotateY(-47deg)rotateX(-15deg)rotate(15deg)scale(0)}30%,to{transform:rotateY(-47deg)rotateX(-15deg)rotate(15deg)scale(1)}}@keyframes box-move5{32%{transform:translate(var(--x),var(--y))}45%,52%{transform:translate(0)}80%{transform:translateY(-32px)}90%,to{transform:translateY(188px)}}@keyframes box-scale5{26%{transform:rotateY(-47deg)rotateX(-15deg)rotate(15deg)scale(0)}34%,to{transform:rotateY(-47deg)rotateX(-15deg)rotate(15deg)scale(1)}}@keyframes box-move6{36%{transform:translate(var(--x),var(--y))}49%,52%{transform:translate(0)}80%{transform:translateY(-32px)}90%,to{transform:translateY(188px)}}@keyframes box-scale6{30%{transform:rotateY(-47deg)rotateX(-15deg)rotate(15deg)scale(0)}38%,to{transform:rotateY(-47deg)rotateX(-15deg)rotate(15deg)scale(1)}}@keyframes box-move7{40%{transform:translate(var(--x),var(--y))}53%,52%{transform:translate(0)}80%{transform:translateY(-32px)}90%,to{transform:translateY(188px)}}@keyframes box-scale7{34%{transform:rotateY(-47deg)rotateX(-15deg)rotate(15deg)scale(0)}42%,to{transform:rotateY(-47deg)rotateX(-15deg)rotate(15deg)scale(1)}}@keyframes ground{0%,65%{transform:rotateX(90deg)rotateY(0)translate(-48px,-120px)translateZ(100px)scale(0)}75%,90%{transform:rotateX(90deg)rotateY(0)translate(-48px,-120px)translateZ(100px)scale(1)}to{transform:rotateX(90deg)rotateY(0)translate(-48px,-120px)translateZ(100px)scale(0)}}@keyframes ground-shine{0%,70%{opacity:0}75%,87%{opacity:.2}to{opacity:0}}@keyframes mask{0%,65%{opacity:0}66%,to{opacity:1}}