/* Kept out of the HTML: the HTTPS vhosts' CSP (opt/headers.conf) has no 'unsafe-inline'. */
:root {
    color-scheme: light dark;
    --bg: #f6f5fb;
    --fg: #1d1b26;
    --muted: #5d5970;
    /* The S's of the logo (favicon.svg). Darkened for text: #73bfe8 is too pale on white. */
    --ss: #3d8fbf;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #14121c;
        --fg: #eceaf4;
        --muted: #a39fb6;
        --ss: #73bfe8;
    }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--fg);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
}
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem;
    text-align: center;
}
.brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.5rem;
    font-size: clamp(2.25rem, 7vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1;
}
.brand img { width: 1.6em; height: 1.6em; }
.brand b { color: var(--ss); }
h1 {
    margin: 0 0 1rem;
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    line-height: 1.1;
}
.lead { margin: 0 0 .5rem; max-width: 32rem; font-size: 1.15rem; }
.note { margin: 0; color: var(--muted); }
footer { padding: 1rem; text-align: center; color: var(--muted); font-size: .875rem; }