:root {
    color-scheme: light;
    --q-paper: #FAF7F2;
    --q-surface: #FFFFFF;
    --q-ink: #2C2420;
    --q-muted: #5C534C;
    --q-track: #E9DED2;
    --q-primary: #B55223;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --q-paper: #181311;
    --q-surface: #211B18;
    --q-ink: #F6EEE8;
    --q-muted: #CFC0B7;
    --q-track: #4A3F39;
    --q-primary: #F2A078;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --q-paper: #181311;
        --q-surface: #211B18;
        --q-ink: #F6EEE8;
        --q-muted: #CFC0B7;
        --q-track: #4A3F39;
        --q-primary: #F2A078;
    }
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: var(--q-paper);
    overflow: hidden;
}

#loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100%;
    color: var(--q-muted);
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.loading-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--q-ink);
}

.loading-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: var(--q-primary);
    color: var(--q-surface);
    font: 700 23px/1 Georgia, serif;
}

.loading-wordmark {
    font: 700 29px/1 Georgia, serif;
}

#loading p {
    margin: 0;
    font-size: 14px;
}

.loading-line {
    position: relative;
    width: min(220px, 54vw);
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--q-track);
}

.loading-line::after {
    position: absolute;
    width: 45%;
    height: 100%;
    border-radius: inherit;
    background: var(--q-primary);
    content: "";
    animation: loading-slide 1.15s ease-in-out infinite;
}

.noscript {
    max-width: 34rem;
    margin: 3rem auto;
    padding: 1rem;
    color: var(--q-ink);
    font: 16px/1.5 ui-sans-serif, system-ui, sans-serif;
    text-align: center;
}

@keyframes loading-slide {
    from { transform: translateX(-105%); }
    to { transform: translateX(225%); }
}

@media (prefers-reduced-motion: reduce) {
    .loading-line::after {
        width: 100%;
        animation: none;
    }
}