/* --- VARIABLES --- */
        :root {
            --bg-color: #f0f0f0;
            --card-bg: #ffffff;
            --text-color: #000000;
            --border-color: #000000;
            --accent-main: #C4B5FD; 
            --accent-hover: #A78BFA;
            --thumb-bg: #000000;
        }

        .dark {
            --bg-color: #1a1a1a;
            --card-bg: #2d2d2d;
            --text-color: #ffffff;
            --border-color: #ffffff;
            --accent-main: #8B5CF6;
            --accent-hover: #7C3AED;
            --thumb-bg: #ffffff;
        }

        body { 
            background-color: var(--bg-color); 
            color: var(--text-color);
            transition: background-color 0.3s, color 0.3s;
        }

        /* --- NEO-BRUTALISM --- */
        .neo-box {
            background-color: var(--card-bg);
            border: 3px solid var(--border-color);
            box-shadow: 6px 6px 0px 0px var(--border-color);
            transition: all 0.2s ease;
        }
        .neo-box:hover {
            box-shadow: 8px 8px 0px 0px var(--border-color);
            transform: translate(-2px, -2px);
        }

        .neo-btn {
            position: relative;
            border: 3px solid var(--border-color);
            box-shadow: 4px 4px 0px 0px var(--border-color);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.15s;
            cursor: pointer;
            background-color: var(--accent-main);
            color: black;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .neo-btn:hover {
            background-color: var(--accent-hover);
            transform: translateY(-2px);
            box-shadow: 6px 6px 0px 0px var(--border-color);
        }
        .neo-btn:active {
            transform: translateY(2px);
            box-shadow: 2px 2px 0px 0px var(--border-color);
        }

        .neo-input {
            width: 100%;
            background-color: var(--card-bg);
            border: 3px solid var(--border-color);
            padding: 8px 12px;
            font-weight: bold;
            font-family: 'JetBrains Mono', monospace;
            outline: none;
            color: var(--text-color);
        }
        .neo-input:focus { background-color: rgba(255, 255, 0, 0.2); }

        .accent-checkbox {
            appearance: none; width: 1.25rem; height: 1.25rem;
            border: 2px solid var(--border-color); background-color: var(--card-bg);
            cursor: pointer; position: relative;
        }
        .accent-checkbox:checked { background-color: var(--accent-main); }
        .accent-checkbox:checked::after {
            content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            color: black; font-size: 0.9rem; font-weight: bold;
        }

        /* --- SLIDERS --- */
        input[type=range] {
            -webkit-appearance: none; width: 100%; height: 8px; margin: 8px 0; background: transparent;
            border-radius: 4px; cursor: pointer;
            background-image: linear-gradient(to right, var(--accent-main) 0%, var(--accent-main) var(--percent, 50%), #d1d5db var(--percent, 50%), #d1d5db 100%);
            background-repeat: no-repeat;
        }
        input[type=range]:focus { outline: none; }
        
        input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 8px; cursor: pointer; background: transparent; border: none; border-radius: 4px; }
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%;
            background: var(--thumb-bg); border: 3px solid var(--accent-main);
            cursor: pointer; margin-top: -6px; box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
        }
        input[type=range]::-moz-range-track { width: 100%; height: 8px; cursor: pointer; background: transparent; border: none; border-radius: 4px; }
        input[type=range]::-moz-range-thumb {
            height: 20px; width: 20px; border: 3px solid var(--accent-main); border-radius: 50%;
            background: var(--thumb-bg); cursor: pointer; box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
        }

        /* --- ANIMATIONS --- */
        .slot-spin { animation: shakeBlur 0.05s infinite; color: var(--text-color) !important; }
        @keyframes shakeBlur {
            0% { transform: translate(1px, 1px); filter: blur(1px); }
            50% { transform: translate(-1px, -1px); filter: blur(0px); }
            100% { transform: translate(1px, -1px); filter: blur(1px); }
        }
        .matrix-item { opacity: 0; transform: translateY(-5px); animation: terminalFlow 0.2s forwards; }
        @keyframes terminalFlow { to { opacity: 1; transform: translateY(0); } }
        .fade-in { animation: fadeIn 0.4s ease-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* --- DOCS SPECIFIC STYLES --- */
        .dashed-sep { border-top: 2px dashed #d1d5db; }
        .dark .dashed-sep { border-top-color: #374151; }
        
        /* Sticky Header Fix */
        [id^="doc-"] { scroll-margin-top: 140px; }
        #docs-start { scroll-margin-top: 100px; }

        /* TOC Styling */
        .toc-item {
            border-bottom: 2px dashed #d1d5db;
            transition: background-color 0.2s;
        }
        .toc-item:last-child { border-bottom: none; }
        .dark .toc-item { border-bottom-color: #374151; }
        
        .toc-link {
            display: flex; justify-content: space-between; align-items: center;
            padding: 12px 16px; 
            color: #6b7280; text-decoration: none;
            transition: all 0.2s;
        }
        .dark .toc-link { color: #9ca3af; }
        
        .toc-link:hover { color: var(--text-color); }
        .toc-link:hover .toc-text {
            font-weight: 700;
            border-bottom: 3px solid var(--text-color);
        }
        .toc-link:hover .eye-icon { opacity: 1; }
        .eye-icon { opacity: 0; transition: opacity 0.2s; text-decoration: none !important; display: inline-block; }

        /* Math & Code Styling */
        .math-block { font-family: 'Times New Roman', serif; font-style: italic; }
        
        .code-matrix {
            background-color: #0f172a; color: #4ade80; font-family: 'JetBrains Mono', monospace;
            padding: 1rem; border-radius: 0.5rem; overflow-x: auto; position: relative;
            border: 1px solid #334155; font-size: 0.8rem;
        }
        .copy-code-btn {
            position: absolute; top: 0.5rem; right: 0.5rem;
            background: #334155; color: white; padding: 4px 8px; border-radius: 4px;
            opacity: 0.6; transition: opacity 0.2s; cursor: pointer; z-index: 10;
        }
        .code-matrix:hover .copy-code-btn { opacity: 1; }

        /* Tabs for Code Block */
        .code-tab-btn {
            padding: 4px 12px; font-size: 0.7rem; font-weight: bold; text-transform: uppercase;
            color: #94a3b8; border-bottom: 2px solid transparent; transition: all 0.2s;
        }
        .code-tab-btn:hover { color: white; }
        .code-tab-active { color: #4ade80; border-bottom-color: #4ade80; }

        /* --- NFT VISUALIZER STYLES (v5.8 Mobile Logic Split) --- */
        .nft-trait-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            background-color: white;
            padding: 8px 12px;
            border-radius: 4px;
            margin-bottom: 8px;
            white-space: nowrap;
            z-index: 20;
            position: relative; 
        }
        .dark .nft-trait-container { background-color: #1a1a1a; }
        
        @media (min-width: 768px) {
            .nft-trait-container {
                position: absolute; 
                width: auto;
                justify-content: flex-start;
                gap: 6px;
                background-color: var(--card-bg);
                border: 1px solid #d1d5db;
                padding: 4px 8px;
                border-radius: 6px;
                margin-bottom: 0;
                box-shadow: 2px 2px 0px 0px var(--border-color);
            }
            .dark .nft-trait-container { border-color: #4b5563; }

            .pos-body-head { top: 15%; left: 50%; transform: translateX(-50%); }
            .pos-body-lhand { top: 39%; left: 83%; transform: translateX(-50%); }
            .pos-body-lleg { top: 78%; left: 70%; transform: translateX(-50%); }
            .pos-body-rleg { top: 78%; left: 30%; transform: translateX(-50%); }
            .pos-body-rhand { top: 39%; left: 17%; transform: translateX(-50%); }

            .pos-face-hair { top: 15%; left: 50%; transform: translateX(-50%); }
            .pos-face-lear { top: 28%; left: 77%; transform: translateX(-50%); }
            .pos-face-leye { top: 58%; left: 84%; transform: translateX(-50%); }
            .pos-face-nose { top: 82%; left: 65%; transform: translateX(-50%); }
            .pos-face-mouth { top: 82%; left: 35%; transform: translateX(-50%); }
            .pos-face-reye { top: 58%; left: 16%; transform: translateX(-50%); }
            .pos-face-rear { top: 28%; left: 23%; transform: translateX(-50%); }
        }
        
        .nft-label {
            font-size: 0.65rem;
            font-weight: 800;
            text-transform: uppercase;
            color: #6b7280;
        }
        .dark .nft-label { color: #9ca3af; }

        .nft-value {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.65rem;
            font-weight: bold;
            color: var(--text-color);
            border: 1px solid #d1d5db;
            border-radius: 4px;
            padding: 1px 4px;
            background-color: rgba(0,0,0,0.05);
            color: var(--accent-main);
            border-color: #9ca3af;
        }
        .dark .nft-value { background-color: rgba(255,255,255,0.05); }

        .nft-radial-line {
            position: absolute;
            top: 50%; left: 50%;
            height: 0;
            border-top: 1px dashed #9ca3af;
            transform-origin: 0% 0%; 
            z-index: 0; 
            opacity: 0.6;
        }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--bg-color); border-left: 2px solid var(--border-color); }
        ::-webkit-scrollbar-thumb { background: var(--border-color); }

        .tab-active { background-color: var(--border-color); color: var(--bg-color); }
        .subtab-active { border-bottom: 3px solid var(--border-color); opacity: 1; }
        .subtab-inactive { border-bottom: 3px solid transparent; opacity: 0.5; }