body {
    background: #f5f5f5;
    font-family: Arial, sans-serif;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    transition: opacity 130ms ease, transform 130ms ease, filter 150ms ease;
}

html.zx-page-booting body {
    opacity: 0;
}

html.zx-page-enter body {
    opacity: 1;
}

html.zx-page-leaving body {
    opacity: 0.92;
    transform: translateY(2px);
}

html.zx-page-leaving.zx-lang-switching body {
    opacity: 0.86;
    transform: translateY(1px);
    filter: blur(1.5px);
}

html.zx-theme-transitioning *,
html.zx-theme-transitioning *::before,
html.zx-theme-transitioning *::after {
    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        color 150ms ease,
        fill 150ms ease,
        stroke 150ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
    body {
        transition: none;
    }

    html.zx-page-leaving body {
        transform: none;
    }

    html.zx-page-leaving.zx-lang-switching body {
        filter: none;
    }

    html.zx-theme-transitioning *,
    html.zx-theme-transitioning *::before,
    html.zx-theme-transitioning *::after {
        transition: none !important;
    }
}

[x-cloak] {
    display: none !important;
}

h1,
h2 {
    color: #333;
}

.error-card {
    max-width: 600px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}