html,
body {
    margin: 0;
    padding: 0;
    transition: none;
}

:root {
    --app-boot-background: #f7faf9;
    --app-boot-loader-track: rgba(7, 24, 20, 0.08);
    --app-boot-loader-shimmer: rgba(7, 24, 20, 0.28);
}

@media (prefers-color-scheme: dark) {
    :root {
        --app-boot-background: #000;
        --app-boot-loader-track: rgba(255, 255, 255, 0.12);
        --app-boot-loader-shimmer: rgba(255, 255, 255, 0.42);
    }
}

:root[data-boot-theme='light'] {
    --app-boot-background: #f7faf9;
    --app-boot-loader-track: rgba(7, 24, 20, 0.08);
    --app-boot-loader-shimmer: rgba(7, 24, 20, 0.28);
}

:root[data-boot-theme='dark'],
:root.dark {
    --app-boot-background: #000;
    --app-boot-loader-track: rgba(255, 255, 255, 0.12);
    --app-boot-loader-shimmer: rgba(255, 255, 255, 0.42);
}

#app-boot-splash {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: grid;
    place-items: center;
    background: var(--app-boot-background);
}

.app-boot-splash__content {
    display: grid;
    justify-items: center;
    gap: 22px;
    width: min(68vw, 260px);
    animation: app-boot-logo-in 420ms ease-out both;
}

.app-boot-splash__logo {
    width: 100%;
    height: auto;
    display: block;
}

.app-boot-splash__logo--dark {
    display: none;
}

.app-boot-splash__loader {
    position: relative;
    width: min(42vw, 156px);
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--app-boot-loader-track);
}

.app-boot-splash__loader::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 48%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        transparent,
        var(--app-boot-loader-shimmer),
        transparent
    );
    animation: app-boot-loader-shimmer 1.15s ease-in-out infinite;
}

@media (prefers-color-scheme: dark) {
    .app-boot-splash__logo--light {
        display: none;
    }

    .app-boot-splash__logo--dark {
        display: block;
    }
}

:root[data-boot-theme='light'] .app-boot-splash__logo--light {
    display: block;
}

:root[data-boot-theme='light'] .app-boot-splash__logo--dark {
    display: none;
}

:root[data-boot-theme='dark'] .app-boot-splash__logo--light,
:root.dark .app-boot-splash__logo--light {
    display: none;
}

:root[data-boot-theme='dark'] .app-boot-splash__logo--dark,
:root.dark .app-boot-splash__logo--dark {
    display: block;
}

.app-boot-splash-exiting {
    opacity: 0;
    transition: opacity 160ms ease;
}

@keyframes app-boot-logo-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes app-boot-loader-shimmer {
    from {
        transform: translateX(-120%);
    }
    to {
        transform: translateX(240%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-boot-splash__content,
    .app-boot-splash__loader::before {
        animation: none;
    }

    .app-boot-splash-exiting {
        transition: none;
    }
}