:root {
            /* Colors */
            --bg: #0f172a;
            --panel: #1e293b;
            --accent: #7dd3fc;
            --accent-hover: #bae6fd;
            --text: #cbd5e1;
            --header: #f8fafc;
            --border: #334155;

            /* Typography */
            --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
            --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

            --text-xs: .75rem;
            --text-sm: .875rem;
            --text-md: 1rem;
            --text-lg: 1.25rem;
            --text-xl: 1.5rem;

            /* Spacing */
            --space-1: .25rem;
            --space-2: .5rem;
            --space-3: .75rem;
            --space-4: 1rem;
            --space-5: 1.5rem;
            --space-6: 2rem;
            --space-7: 3rem;
        }

        /* 1. Base Reset & Document */
        *, *::before, *::after { box-sizing: border-box; }
        html { line-height: 1.15; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
        body { margin: 0; background: var(--bg); background-image: radial-gradient(circle at top right, #1e293b 0%, #0f172a 100%); color: var(--text); font-family: var(--font-sans); font-size: var(--text-md); line-height: 1.6; max-width: 800px; margin-inline: auto; padding: var(--space-4); }
        img, video, canvas, svg { max-width: 100%; height: auto; display: block; }

        /* 2. Navigation */
        header { border-bottom: 1px solid var(--border); margin-bottom: var(--space-7); padding-bottom: var(--space-5); box-shadow: 0 4px 20px -10px rgba(125, 211, 252, 0.1); }
        nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; margin-bottom: var(--space-5); }
        nav ul { display: flex; list-style: none; gap: var(--space-4); padding: 0; margin: 0; }
        nav li + li { margin-top: 0; } /* FIX APPLIED HERE */
        nav a { text-decoration: none; color: var(--text); font-weight: 600; font-size: var(--text-sm); }
        nav a:hover, nav a[aria-current="page"] { color: var(--accent); }

        /* 3. Typography & Flow */
        h1, h2, h3, h4, h5, h6 { color: var(--header); line-height: 1.2; scroll-margin-top: var(--space-7); }
        h1 { font-size: clamp(2.5rem, 8vw, 4rem); letter-spacing: -0.06em; margin: 0; }
        h2 { font-size: var(--text-xl); border-left: 4px solid var(--accent); padding-left: var(--space-4); margin-top: var(--space-7); box-shadow: -5px 0 10px -2px rgba(125, 211, 252, 0.3); }
        h3 { font-size: var(--text-lg); margin-top: var(--space-6); }
        p + p, ul + p, ol + p { margin-top: var(--space-4); }
        a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(125, 211, 252, 0.3); }
        a:hover { color: var(--accent-hover); text-decoration-color: var(--accent-hover); }
        hr { border: none; border-top: 1px solid var(--border); margin: var(--space-7) 0; }
        small { font-size: var(--text-sm); }

        /* 4. Lists & Definitions */
        ul, ol { padding-left: 1.25rem; margin-top: var(--space-4); margin-bottom: var(--space-4); }
        li + li { margin-top: var(--space-2); }
        li > ul, li > ol { margin-top: var(--space-2); margin-bottom: 0; }
        dl { margin: var(--space-5) 0; }
        dt { font-weight: 600; color: var(--header); margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--text-sm); }
        dd { margin-left: var(--space-4); margin-top: var(--space-1); }

        /* 5. Blockquotes & Details */
        blockquote { background: var(--panel); border: 1px solid var(--border); padding: var(--space-5); border-radius: 4px; margin: var(--space-6) 0; font-style: italic; }
        details { background: rgba(30, 41, 59, 0.4); border: 1px solid var(--border); padding: var(--space-4); border-radius: 4px; margin: var(--space-5) 0; }
        summary { cursor: pointer; font-weight: 600; color: var(--header); user-select: none; }
        details[open] summary { margin-bottom: var(--space-4); border-bottom: 1px solid var(--border); padding-bottom: var(--space-3); }
        blockquote > *:first-child, details > *:first-child, li > *:first-child, dd > *:first-child { margin-top: 0; }

        /* 6. Code & Tables */
        code { font-family: var(--font-mono); color: #93c5fd; font-size: .9em; background: rgba(125, 211, 252, 0.1); padding: .2rem .4rem; border-radius: 4px; }
        pre { background: #020617; border: 1px solid var(--border); padding: var(--space-5); overflow-x: auto; border-radius: 4px; margin: var(--space-5) 0; }
        pre code { color: var(--text); background: transparent; padding: 0; font-size: var(--text-sm); }
        table { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        th { padding: .75rem; border-bottom: 2px solid var(--accent); color: #94a3b8; text-transform: uppercase; font-size: var(--text-xs); text-align: left; white-space: nowrap; }
        td { padding: .75rem; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
        tbody tr:hover { background: rgba(125, 211, 252, 0.05); }

        /* 7. Buttons & Interactivity */
        button { appearance: none; display: inline-flex; align-items: center; justify-content: center; padding: .75rem 1.5rem; min-height: 44px; font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid var(--accent); background: var(--accent); color: #0f172a; cursor: pointer; transition: all .2s ease; }
        button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
        :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

        @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
        @media (min-width: 640px) { body { padding: var(--space-7) var(--space-6); } }