body {
    margin: 0;
}

.malicloud-loading {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    color: #1f2d42;
    font-family: system-ui, sans-serif;
}

.malicloud-loading img {
    display: block;
}

.malicloud-loading__name {
    margin-top: -0.5rem;
    font-size: 1.375rem;
    font-weight: 650;
}

.malicloud-loading > .malicloud-loading-dots {
    margin-top: 1rem;
}

.malicloud-loading-dots {
    display: flex;
    gap: var(--malicloud-loading-dot-gap, 0.375rem);
}

.malicloud-loading-dots > span {
    width: var(--malicloud-loading-dot-size, 0.4375rem);
    height: var(--malicloud-loading-dot-size, 0.4375rem);
    border-radius: 50%;
    background: #169c46;
}

.malicloud-loading-dots > span:nth-child(2) {
    background: #e79b0b;
    animation-delay: 150ms;
}

.malicloud-loading-dots > span:nth-child(3) {
    background: #e31b28;
    animation-delay: 300ms;
}

@media (prefers-color-scheme: dark) {
    .malicloud-loading {
        background: #111827;
        color: #f8fafc;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .malicloud-loading-dots > span {
        animation-name: malicloud-loading-pulse;
        animation-duration: 1.2s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
    }

    @keyframes malicloud-loading-pulse {
        0%, 60%, 100% {
            opacity: 0.55;
            transform: translateY(0);
        }
        30% {
            opacity: 1;
            transform: translateY(calc(-1 * var(--malicloud-loading-lift, 0.25rem)));
        }
    }
}