/* ============================================
           FONTS (self-hosted — zero external requests)
           ============================================ */
        @font-face {
            font-family: 'JetBrains Mono';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
        }
        @font-face {
            font-family: 'JetBrains Mono';
            font-style: normal;
            font-weight: 700;
            font-display: swap;
            src: url('../fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');
        }

        /* ============================================
           TOKENS
           ============================================ */
        :root {
            --bg: #0c0e10;

            --text: #c9d1d9;
            --text-bright: #e8edf2;
            --text-muted: #8b949e;
            --text-dim: #565f68;

            --primary: #2dd4a7;
            --primary-bright: #7fe8cd;
            --primary-tint: rgba(45, 212, 167, 0.04);

            --amber: #e3b341;

            --bone: #f2efe6;
            --patch: #1c2333;

            --border: #1e2328;
            --border-mid: #30363d;

            --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

            --max-w: 1080px;
            --section-px: 40px;
            --section-py: 100px;
        }

        /* ============================================
           RESET & ROOT
           ============================================ */
        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-mono);
            font-size: 13.5px;
            line-height: 1.9;
            background: var(--bg);
            color: var(--text);
            min-width: 320px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        ::selection {
            background: var(--primary);
            color: var(--bg);
        }

        a {
            color: var(--primary);
            text-decoration: none;
            transition: color 0.2s, background 0.2s, border-color 0.2s;
        }
        a:hover { color: var(--primary-bright); }

        /* Abbreviations carry their expansion in data-tip rather than title.
           A native title tooltip cannot be styled or sped up, and it cannot be
           suppressed either — so keeping title alongside this would show two
           tooltips, one of them OS-chrome in the system font. aria-label carries
           the expansion for assistive tech in title's place. */
        abbr[data-tip] {
            position: relative;
            text-decoration: underline dotted;
            text-decoration-color: var(--text-dim);
            text-underline-offset: 3px;
            cursor: help;
        }

        abbr[data-tip]::after {
            content: attr(data-tip);
            position: absolute;
            bottom: calc(100% + 8px);
            right: 0;
            z-index: 20;
            padding: 5px 9px;
            white-space: nowrap;
            font-size: 11px;
            letter-spacing: 0;
            color: var(--text-bright);
            background: var(--bg);
            border: 1px solid var(--primary);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.12s ease;
            pointer-events: none;
        }

        abbr[data-tip]:hover,
        abbr[data-tip]:focus-visible {
            color: var(--text-bright);
            text-decoration-color: var(--primary);
        }

        abbr[data-tip]:hover::after,
        abbr[data-tip]:focus-visible::after {
            opacity: 1;
            visibility: visible;
        }

        @media (prefers-reduced-motion: reduce) {
            abbr[data-tip]::after { transition: none; }
        }

        /* ============================================
           KEYFRAMES
           ============================================ */
        @keyframes msBlink {
            0%, 49% { opacity: 1; }
            50%, 100% { opacity: 0; }
        }
        @keyframes msPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }

        /* Gate animation only — layout and sizing logic must run regardless. */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation: none !important;
                transition: none !important;
            }
            html { scroll-behavior: auto; }
        }