/* One <style> block, lifted in place. Separate per block: merging
   blocks changes which rule wins. */

:root {
            --bg-color: #1a1a1a;
            --text-color: #f5f5dc;
        }
        @media (prefers-color-scheme: light) {
            :root {
                --bg-color: #f5f5f5;
                --text-color: #1a1a1a;
            }
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        h1 {
            font-size: 3rem;
            font-weight: 300;
            letter-spacing: 0.2em;
            margin-bottom: 2rem;
        }
        nav {
            margin-bottom: 2rem;
        }
        nav a {
            color: var(--text-color);
            text-decoration: none;
            padding: 0.75rem 1.5rem;
            border: 1px solid var(--text-color);
            border-radius: 4px;
            transition: background-color 0.3s, color 0.3s;
        }
        nav a:hover {
            background-color: var(--text-color);
            color: var(--bg-color);
        }
        footer {
            position: absolute;
            bottom: 2rem;
            font-size: 0.9rem;
        }