:root { --cursor-x: 50%; --cursor-y: 50%; }
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background: #0d0d0d;
            color: #e7e7e7;
            overflow-x: hidden;
        }
        .hero-glow {
            position: fixed; width: 600px; height: 600px; border-radius: 50%;
            background: radial-gradient(circle, rgba(201,125,42,0.15) 0%, transparent 70%);
            pointer-events: none; transform: translate(-50%, -50%);
            left: var(--cursor-x); top: var(--cursor-y); z-index: 0;
            transition: left 0.3s ease, top 0.3s ease;
        }
        .section-reveal { opacity: 0; transform: translateY(40px); }
        .metric-card {
            background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
            border: 1px solid rgba(255,255,255,0.06); backdrop-filter: blur(10px);
        }
        .code-block {
            background: #111; border: 1px solid rgba(255,255,255,0.08);
            font-family: 'JetBrains Mono', monospace;
        }
        .highlight-line {
            background: linear-gradient(90deg, rgba(201,125,42,0.1) 0%, transparent 100%);
            border-left: 2px solid #c97d2a;
        }
        .architecture-line { stroke-dasharray: 8 4; animation: dashFlow 2s linear infinite; }
        @keyframes dashFlow { to { stroke-dashoffset: -24; } }
        .glass-panel {
            background: rgba(13, 13, 13, 0.7); backdrop-filter: blur(20px);
            border: 1px solid rgba(255,255,255,0.06);
        }
        .gradient-text {
            background: linear-gradient(135deg, #e8b86e 0%, #c97d2a 50%, #dc9940 100%);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        }
        .tag-pill {
            background: rgba(201,125,42,0.1); border: 1px solid rgba(201,125,42,0.2); color: #e8b86e;
        }
        .performance-bar { background: linear-gradient(90deg, #c97d2a 0%, #e8b86e 100%); border-radius: 2px; }
        .comparison-row:hover { background: rgba(255,255,255,0.02); }
        .tool-grid-item { transition: all 0.3s ease; }
        .tool-grid-item:hover {
            transform: translateY(-2px); border-color: rgba(201,125,42,0.3);
            box-shadow: 0 8px 32px rgba(201,125,42,0.08);
        }
        .lang-badge { transition: all 0.2s ease; }
        .lang-badge:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(34,197,94,0.2); }
        .nav-link { position: relative; }
        .nav-link::after {
            content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
            background: #c97d2a; transition: width 0.3s ease;
        }
        .nav-link:hover::after, .nav-link.active::after { width: 100%; }
        .toc-sidebar {
            position: fixed; left: 2rem; top: 50%; transform: translateY(-50%); z-index: 50;
            opacity: 0; transition: opacity 0.5s ease;
        }
        .toc-sidebar.visible { opacity: 1; }
        @media (max-width: 1280px) { .toc-sidebar { display: none; } }
        .toc-dot {
            width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.2);
            transition: all 0.3s ease;
        }
        .toc-dot.active { background: #c97d2a; box-shadow: 0 0 8px rgba(201,125,42,0.5); }
        .test-counter { font-variant-numeric: tabular-nums; }
        .commit-graph { display: flex; gap: 3px; align-items: flex-end; }
        .commit-bar {
            width: 4px; background: linear-gradient(to top, #c97d2a, #e8b86e);
            border-radius: 2px 2px 0 0; transition: height 0.5s ease;
        }
        .scroll-indicator { animation: bounce 2s infinite; }
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }