.boxes{--size:32px;--duration:.8s;height:calc(var(--size) * 2);width:calc(var(--size) * 3);transform-style:preserve-3d;transform-origin:50%;margin-top:calc(var(--size) * 1.5 * -1);position:relative;transform:rotateX(60deg)rotate(45deg)rotateY(0)translateZ(0)}.boxes .box{width:var(--size);height:var(--size);transform-style:preserve-3d;position:absolute;top:0;left:0}.boxes .box-1{animation:box1 var(--duration) linear infinite;transform:translate(100%)}.boxes .box-2{animation:box2 var(--duration) linear infinite;transform:translateY(100%)}.boxes .box-3{animation:box3 var(--duration) linear infinite;transform:translate(100%,100%)}.boxes .box-4{animation:box4 var(--duration) linear infinite;transform:translate(200%)}.boxes .face{--background:#5c8df6;--top:auto;--right:auto;--bottom:auto;--left:auto;--translateZ:calc(var(--size) / 2);--rotateY:0deg;--rotateX:0deg;background:var(--background);width:100%;height:100%;top:var(--top);right:var(--right);bottom:var(--bottom);left:var(--left);transform:rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));position:absolute}.boxes .face-front{--top:0;--left:0}.boxes .face-right{--background:#145af2;--right:0;--rotateY:90deg}.boxes .face-top{--background:#447cf5;--rotateX:-90deg}.boxes .face-back{--background:#dbe3f4;--top:0;--left:0;--translateZ:calc(var(--size) * 3 * -1)}.boxes-light .face{--background:#e5e5e5}.boxes-light .face-right{--background:#a3a3a3}.boxes-light .face-top{--background:#d4d4d4}.boxes-light .face-back{--background:#f5f5f5}.boxes-green .face{--background:#7cff4f}.boxes-green .face-right{--background:#059669}.boxes-green .face-top{--background:#22c55e}.boxes-green .face-back{--background:#d1fae5}.box-loader-stage{--size:32px;min-height:calc(var(--size) * 3);min-width:calc(var(--size) * 3);justify-content:center;align-items:center;display:flex;overflow:visible}@keyframes box1{0%,50%{transform:translate(100%)}to{transform:translate(200%)}}@keyframes box2{0%{transform:translateY(100%)}50%{transform:translate(0)}to{transform:translate(100%)}}@keyframes box3{0%,50%{transform:translate(100%,100%)}to{transform:translateY(100%)}}@keyframes box4{0%{transform:translate(200%)}50%{transform:translate(200%,100%)}to{transform:translate(100%,100%)}}@media (prefers-reduced-motion:reduce){.boxes .box-1,.boxes .box-2,.boxes .box-3,.boxes .box-4{animation:none}}