html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/*
 * What somebody looks at while the app arrives, which on a first visit is
 * a real wait: a Compose/Wasm build is the largest thing this app will
 * ever ask anyone to download. Long enough that it should say whose page
 * this is rather than spin anonymously.
 *
 * Colours are the app's own - CorreAtrasColors ScreenBackground,
 * TextPrimary and Primary - so the loading screen and the first frame are
 * the same grey and nothing flashes between them.
 *
 * A system font rather than the app's Poppins, which lives inside the
 * bundle: fetching a second copy of it here would only race the thing
 * everyone is actually waiting for. The one image is the icon the browser
 * is already fetching for the tab.
 */
.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    height: 100%;
    background: #F2F2F7;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.loading-mark {
    border-radius: 16px;
}

.loading-name {
    margin: 0;
    color: #222B45;
    font-size: 18px;
    font-weight: 500;
}

.loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255, 149, 0, 0.25);
    border-top-color: #FF9500;
    border-radius: 50%;
    animation: loading-spin 0.9s linear infinite;
}

@keyframes loading-spin {
    to { transform: rotate(360deg); }
}

/* Someone who asked for less motion gets the mark and the name, held still. */
@media (prefers-reduced-motion: reduce) {
    .loading-spinner {
        animation: none;
    }
}