:root {
            --bg-color: #121212;
            --text-color: #fdfaf1;
            --accent-color: #ff8820;
            --secondary-text: #c0beb4;
            --font-main: 'Inter', sans-serif;
            --font-mono: 'JetBrains Mono', monospace;
            --font-serif: 'Fraunces', serif;
            --transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
            --card: rgba(255, 136, 32, 0.06);
            --border: rgba(255, 136, 32, 0.2);
        }
        html { background-color: var(--bg-color); color-scheme: dark; }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { background-color: transparent; color: var(--text-color); font-family: var(--font-main); line-height: 1.7; min-height: 100vh; min-height: 100svh; }
        #vanta-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; background-color: var(--bg-color); }
        #vanta-bg canvas { display: block; width: 100% !important; height: 100% !important; }
        .wrap { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 4rem 1.5rem 5rem; }

        .skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 999; padding: 0.6rem 1rem; border-radius: 4px; background: var(--accent-color); color: #121212; font-family: var(--font-mono); font-weight: 700; text-decoration: none; transform: translateY(-200%); transition: transform 0.15s ease; }
        .skip-link:focus { transform: translateY(0); outline: 3px solid #121212; outline-offset: 2px; }
        .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

        nav.main-nav { margin-bottom: 4rem; }
        nav.main-nav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; }
        nav.main-nav a { display: inline-block; padding: 0.45rem 0.25rem; text-decoration: none; color: var(--text-color); font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; transition: var(--transition); opacity: 0.78; }
        nav.main-nav a:hover, nav.main-nav a[aria-current] { opacity: 1; color: var(--accent-color); }
        nav.main-nav a:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 4px; border-radius: 2px; }

        h1 { font-family: var(--font-mono); font-size: clamp(2.2rem, 6vw, 3.5rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.5rem; text-wrap: balance; }
        .lede { font-family: var(--font-mono); color: var(--accent-color); font-size: 1.05rem; font-weight: 500; margin-bottom: 0.75rem; text-wrap: balance; }
        .note { color: var(--secondary-text); font-size: 0.9rem; margin-bottom: 3rem; }

        .groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
        .col { display: flex; flex-direction: column; gap: 1.5rem; }
        .group { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1.6rem 1.6rem 1.4rem; }
        .group h2 { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 800; color: var(--accent-color); margin-bottom: 0.35rem; }
        .group p { color: var(--secondary-text); font-size: 0.9rem; margin-bottom: 0.9rem; }
        .group ul { list-style: none; }
        .group li { margin: 0; }
        .group a { display: inline-block; padding: 0.35rem 0; color: var(--text-color); text-decoration: none; border-bottom: 1px solid transparent; transition: var(--transition); }
        .group a:hover, .group a:focus-visible { color: var(--accent-color); border-bottom-color: var(--accent-color); }
        .group a:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; }
        footer { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 0 1.5rem 3rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--secondary-text); text-align: center; }
        footer a { color: var(--secondary-text); }
        footer a:hover, footer a:focus-visible { color: var(--accent-color); }

        @media (max-width: 760px) {
            .groups { grid-template-columns: 1fr; }
        }
        @media (max-width: 600px) {
            .wrap { padding: 2rem 1.25rem 3rem; }
            nav.main-nav { margin-bottom: 3rem; }
            nav.main-nav ul { gap: 0.25rem 1rem; }
            .group { padding: 1.35rem; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
        }