:root{
    color-scheme: light dark;
    --bg: #fbf7f0;
    --text: #1f2937;
    --muted: #6b7280;
    --heading: #111827;
    --link: #b42318;
    --link-visited: #6d28d9;
    --code-bg: #f3f4f6;
    --code-text: var(--heading);
    --quote-border: var(--link);
    --quote-text: #4b5563;
    --hr: #e5e7eb;
}

@media (prefers-color-scheme: dark) {
    :root{
        --bg: #0b1220;
        --text: #e5e7eb;
        --muted: #9ca3af;
        --heading: #f9fafb;
        --link: #fb7185;
        --link-visited: #a78bfa;
        --code-bg: #111827;
        --code-text: #e5e7eb;
        --quote-border: var(--link);
        --quote-text: #cbd5e1;
        --hr: #1f2937;
    }
}

body {
    margin: 40px auto;
    max-width: 1250px;
    line-height: 1.8;
    font-size: 18px;
    color: var(--text);
    padding: 0 15px;
    background: var(--bg);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

h1, h2, h3 {
    line-height: 1.2;
    color: var(--heading);
}

a {
    color: var(--link);
}

a:visited {
    color: var(--link-visited);
}

a:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
}

code {
    background: var(--code-bg);
    color: var(--code-text);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9em;
}

blockquote {
    border-left: 4px solid var(--quote-border);
    margin-left: 0;
    padding-left: 20px;
    font-style: italic;
    color: var(--quote-text);
}

.size {
    color: var(--muted);
    font-size: 0.85em;
}

.logo {
    display: flex;
    flex-direction: column;
}

.logo span {
    font-size: 1em;
    color: var(--muted);
}

.logo h1 {
    font-size: 2.5em;
    margin: 0;
    margin-top: -0.2em;
    line-height: 1;
    margin-bottom: 0.2em;
    font-style: italic;
}

.logo h1 a {
    text-decoration: none;
    color: var(--heading);
}