:root {
            --accent-color: #9fef00;
            --primary-bg: #0f1219;
            --deep-bg: #0b0e14;
            --card-bg: #151921;
            --border-color: #232933;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background-color: var(--deep-bg);
            color: #e1e1e1;
            font-family: 'Fira+Code', monospace;
        }

        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--deep-bg); }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--accent-color); }

        .text-accent { color: var(--accent-color); }
 
        .prose h1 { color: #fff; font-weight: 800; border-bottom: 2px solid var(--accent-color); padding-bottom: 0.5rem; margin-top: 2rem; margin-bottom: 1.5rem; font-size: 2.25rem; }
        
        .prose h2 { 
            color: var(--accent-color); 
            font-weight: 700; 
            margin-top: 2.5rem; 
            margin-bottom: 1rem; 
            font-size: 1.5rem; 
            display: flex; 
            align-items: center;
            scroll-margin-top: 80px; 
        }

        .prose p { margin-bottom: 1.25rem; color: #b0b0b0; line-height: 1.7; font-size: 1.05rem; }
        .prose a { color: var(--accent-color); text-decoration: underline; text-underline-offset: 4px; }
        .prose code { color: var(--accent-color); background: rgba(159, 239, 0, 0.1); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
        .prose pre { background: #050505 !important; border: 1px solid var(--border-color); padding: 1.5rem; border-radius: 12px; margin: 1.5rem 0; position: relative; }
        .prose pre::before { content: " "; position: absolute; top: 5px; right: 15px; font-size: 10px; color: #444; font-weight: bold; }
        .prose blockquote { border-left: 4px solid var(--accent-color); background: rgba(159, 239, 0, 0.05); padding: 1.5rem; font-style: italic; color: #888; margin: 2rem 0; border-radius: 0 8px 8px 0; }
        .prose ul { list-style: square; margin-left: 1.5rem; margin-bottom: 1.5rem; color: #b0b0b0; }
        .prose li { margin-bottom: 0.5rem; }
        .prose img { border-radius: 12px; border: 1px solid var(--border-color); margin: 2.5rem auto 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: block; max-width: 100%; }

        .prose figure { margin: 2.5rem 0; text-align: center; }
        .prose figcaption { 
            color: #94a3b8; 
            font-size: 0.85rem; 
            margin-top: 1rem; 
            margin-bottom: 2.5rem; 
            font-style: italic; 
            border-top: 1px solid var(--border-color);
            padding-top: 0.75rem;
            display: block;
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
            max-width: 800px;
        }

        .scanlines {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.05) 50%);
            background-size: 100% 4px;
            pointer-events: none;
            z-index: 100;
        }

        .header-gradient {
            background: linear-gradient(to bottom, var(--card-bg), var(--deep-bg));
            border-bottom: 1px solid var(--border-color);
        }

        .sidebar-link {
            border-left: 2px solid transparent;
            padding: 0.5rem 1rem;
            display: block;
            color: #94a3b8;
            font-size: 0.875rem;
            transition: all 0.2s ease;
        }
        
        .sidebar-link:hover {
            color: var(--accent-color);
            background: rgba(159, 239, 0, 0.05);
            border-left-color: var(--accent-color);
        }