html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #0E1116;
}

/*
 * The pre-app loading screen. Every value here is a literal copy of a token in
 * `ui/theme/Palette.kt` — this markup runs before any Kotlin does, so it cannot read them, and
 * the two have to be kept in step by hand if the palette ever moves.
 *
 * System font stack on purpose: a webfont would be one more thing to download during the wait
 * this is meant to cover.
 */
#loading {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background-color: #0E1116;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* Fades rather than cutting, so the handover to the first real frame is not a flicker. */
    transition: opacity 260ms ease-out;
}

#loading.done {
    opacity: 0;
    pointer-events: none;
}

/* The arrow, as a square that turns — the same shape and the same sweep as the real launcher. */
#loading-mark {
    width: 34px;
    height: 34px;
    background-color: #4FC3F7;
    animation: corelock-spin 1.6s linear infinite;
}

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

#loading-title {
    margin: 0;
    color: #E6EAF0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 8px;
    /* Tracking adds space after the final letter, which visually decentres the word. */
    text-indent: 8px;
}

#loading-note {
    margin: 0;
    color: #7A8595;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/*
 * Honours the OS "reduce motion" setting. A full-page spinner is exactly the kind of thing that
 * setting exists for, and a pulse carries the same "still working" message without rotating.
 */
@media (prefers-reduced-motion: reduce) {
    #loading-mark {
        animation: corelock-pulse 1.8s ease-in-out infinite;
    }

    @keyframes corelock-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.35; }
    }
}