box-sizing border-box {
    transition: all 0.25s ease 0s;
}

:root {
    --movement: 1.5;
    --stop: 0.6;
    --duration: calc((var(--movement) * (1 / var(--stop))));
    --stagger: 0.1;
    --perspective: 600;
    --size: 18;
    --ease: cubic-bezier(1, -0.1, 0.26, 0.89);
    --bg: #000;
    --panel: #000;
    --color: #fff;
    --hue: 23;
    --saturation: 100;
    --lightness: 55;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1a1a1a;
        --panel: #000;
        --color: #e6e6e6;
    }
}

.loading-cubes-scene {
    perspective: calc(var(--perspective) * 1px);
}

.loading-cubes-word {
    display: flex;
    position: absolute;
    left: 25%;
    transform: translate(calc(var(--size) * 1px), 0) rotateX(-25deg) rotateY(0deg);
    transform-style: preserve-3d;
}

.splash-loading-cubes-word {
    display: flex;
    transform: translate(calc(var(--size) * 1px), 0) rotateX(-25deg) rotateY(0deg);
    transform-style: preserve-3d;
}

.loading-cubes-letter__wrap {
    -webkit-animation: jump calc(var(--duration) * 1s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) var(--ease) infinite;
    animation: jump calc(var(--duration) * 1s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) var(--ease) infinite;
    transform-origin: bottom center;
    transform-style: preserve-3d;
}

.loading-cubes-letter__wrap .loading-cubes-letter {
    -webkit-animation: rotate calc(var(--duration) * 4s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) ease infinite;
    animation: rotate calc(var(--duration) * 4s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) ease infinite;
}

.loading-cubes-letter {
    color: var(--color);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 12px;
    height: calc(var(--size) * 1.5px);
    margin-right: calc(var(--size) * 0.3px);
    position: relative;
    text-transform: uppercase;
    transform-style: preserve-3d;
    width: calc(var(--size) * 1px);
}

.loading-cubes-letter__panel {
    align-items: center;
    background: var(--panel);
    border: 1px hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 100%)) solid;
    display: flex;
    height: calc(var(--size) * 1px);
    justify-content: center;
    left: 25%;
    position: absolute;
    top: 25%;
    width: calc(var(--size) * 1px);
}

.loading-cubes-letter__panel:nth-of-type(1) {
    transform: translate3d(-50%, -50%, 0) translate3d(0, 0, calc(var(--size) * 0.5px));
}

.loading-cubes-letter__panel:nth-of-type(2) {
    transform: translate3d(-50%, -50%, 0) rotateX(90deg) translate3d(0, 0, calc(var(--size) * 0.5px));
}

.loading-cubes-letter__panel:nth-of-type(3) {
    transform: translate3d(-50%, -50%, 0) rotateX(180deg) translate3d(0, 0, calc(var(--size) * 0.5px));
}

.loading-cubes-letter__panel:nth-of-type(4) {
    transform: translate3d(-50%, -50%, 0) rotateX(-90deg) translate3d(0, 0, calc(var(--size) * 0.5px));
}

.loading-cubes-letter__panel:nth-of-type(5) {
    transform: translate3d(-50%, -50%, 0) rotateY(-90deg) translate3d(0, 0, calc(var(--size) * 0.5px));
}

@-webkit-keyframes rotate {
    0%, 30% {
        transform: rotateX(0deg);
    }
    33%, 82% {
        transform: rotateX(90deg);
    }
    83%, 100% {
        transform: rotateX(180deg);
    }
}

@keyframes rotate {
    0%, 30% {
        transform: rotateX(0deg);
    }
    33%, 82% {
        transform: rotateX(90deg);
    }
    83%, 100% {
        transform: rotateX(180deg);
    }
}

@-webkit-keyframes jump {
    0%, 50%, 100% {
        transform: scaleX(1) scaleY(1) translate(0, 0);
    }
    15% {
        transform: scaleX(1.2) scaleY(0.8) translate(0, 0);
    }
    25% {
        transform: scaleX(0.9) scaleY(1.1) translate(0, -100%);
    }
}

@keyframes jump {
    0%, 50%, 100% {
        transform: scaleX(1) scaleY(1) translate(0, 0);
    }
    15% {
        transform: scaleX(1.2) scaleY(0.8) translate(0, 0);
    }
    25% {
        transform: scaleX(0.9) scaleY(1.1) translate(0, -100%);
    }
}