:root {
            --bg-base: #000000;
            --bg-panel: #09090b; 
            --border-subtle: #27272a;

            --text-main: #f4f4f5; 
            --text-muted: #a1a1aa; 
            --danger: #ef4444; 
            --warning: #f59e0b; 
            --safe: #10b981; 
            --neon-blue: #00ffcc;
        }

        body {
            font-family: 'Barlow', sans-serif;
            background-color: var(--bg-base);
            color: var(--text-main);
            overflow-x: hidden;
            margin: 0;
            padding: 0;
        }

        .font-data { font-family: 'Roboto Mono', monospace; }

        /* Overlays */
        .overlay-gradient { background: linear-gradient(to right, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 100%); }

        /* --- MODAL CORE ANIMATIONS --- */
        .modal-overlay { opacity: 0; transition: opacity 0.25s ease-out; background-color: rgba(0, 0, 0, 0.9); }
        .modal-overlay.is-open { opacity: 1; }
        .modal-panel { opacity: 0; transform: translateY(15px); transition: all 0.25s ease-out; }
        .modal-overlay.is-open .modal-panel { opacity: 1; transform: translateY(0); }

        /* --- SCROLLBAR --- */
        .custom-scroll::-webkit-scrollbar { width: 4px; }
        .custom-scroll::-webkit-scrollbar-track { background: transparent; }
        .custom-scroll::-webkit-scrollbar-thumb { background: #3f3f46; }
        .custom-scroll::-webkit-scrollbar-thumb:hover { background: #52525b; }
        
        /* --- TABLES --- */
        .data-table th { border-bottom: 1px solid var(--border-subtle); padding-bottom: 0.75rem; color: var(--text-muted); font-weight: 500; }
        .data-table td { border-bottom: 1px solid rgba(255,255,255,0.05); padding: 0.85rem 0; }
        .data-table tr { transition: background-color 0.15s ease; }
        .data-table tr:hover td { background-color: rgba(255, 255, 255, 0.02); }

        /* --- EMULATOR SPECIFIC --- */
        input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; position: relative; z-index: 10; }
        input[type=range]:focus { outline: none; }
        input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: var(--border-subtle); border-radius: 0; }
        input[type=range]::-webkit-slider-thumb { height: 20px; width: 6px; border-radius: 0; background: var(--text-main); cursor: ew-resize; -webkit-appearance: none; margin-top: -8px; transition: transform 0.1s; }
        input[type=range]::-webkit-slider-thumb:hover { transform: scaleX(1.5); background: var(--warning); }
        .radar-bg { background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 20px 20px; background-position: center center; }
        
        /* Custom Infographic Components */
        .timeline-node::before { content: ''; position: absolute; left: -25px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); border: 2px solid var(--bg-panel); }
        .layer-box { box-shadow: 0 10px 30px -10px rgba(0,0,0,0.8); }

        @media (min-width: 1024px) {
            .modal-panel {
                font-family: 'IBM Plex Sans', sans-serif;
            }

            .modal-panel .font-data {
                font-family: 'IBM Plex Mono', monospace;
            }

            #modal-agdrift .modal-panel {
                width: 96vw;
                max-width: 1385px;
                max-height: 96vh;
            }

            #modal-resuspension .modal-panel,
            #modal-oncology .modal-panel {
                width: 94vw;
                max-width: 1355px;
                max-height: 94vh;
            }

            #modal-physics .modal-panel,
            #modal-data .modal-panel,
            #modal-inversion .modal-panel,
            #modal-fraction .modal-panel,
            #modal-volatilization .modal-panel,
            #modal-pathway .modal-panel,
            #modal-architecture .modal-panel,
            #modal-transfer .modal-panel,
            #modal-neuro .modal-panel,
            #modal-pregnancy .modal-panel {
                width: 92vw;
                max-width: 1325px;
                max-height: 94vh;
            }

            .modal-panel .p-3 { padding: 0.9375rem !important; }
            .modal-panel .p-4 { padding: 1.25rem !important; }
            .modal-panel .p-5 { padding: 1.5625rem !important; }
            .modal-panel .p-6 { padding: 1.875rem !important; }
            .modal-panel .p-8,
            .modal-panel .md\:p-8 { padding: 2.5rem !important; }
            .modal-panel .md\:px-8 {
                padding-left: 2.5rem !important;
                padding-right: 2.5rem !important;
            }
            .modal-panel .py-4 {
                padding-top: 1.25rem !important;
                padding-bottom: 1.25rem !important;
            }
            .modal-panel .gap-1 { gap: 0.375rem !important; }
            .modal-panel .gap-2 { gap: 0.625rem !important; }
            .modal-panel .gap-4 { gap: 1.25rem !important; }
            .modal-panel .gap-6 { gap: 1.875rem !important; }
            .modal-panel .gap-8 { gap: 2.5rem !important; }
            .modal-panel .gap-12 { gap: 3.5rem !important; }
            .modal-panel .mb-2 { margin-bottom: 0.625rem !important; }
            .modal-panel .mb-3 { margin-bottom: 0.875rem !important; }
            .modal-panel .mb-4 { margin-bottom: 1.25rem !important; }
            .modal-panel .mb-6 { margin-bottom: 1.875rem !important; }
            .modal-panel .mb-8 { margin-bottom: 2.5rem !important; }
            .modal-panel .mb-10 { margin-bottom: 3rem !important; }
            .modal-panel .mt-1 { margin-top: 0.375rem !important; }
            .modal-panel .mt-2 { margin-top: 0.625rem !important; }
            .modal-panel .mt-3 { margin-top: 0.875rem !important; }
            .modal-panel .mt-4 { margin-top: 1.25rem !important; }
            .modal-panel .text-\[8px\] { font-size: 9px !important; line-height: 1.45 !important; }
            .modal-panel .text-\[9px\] { font-size: 10px !important; line-height: 1.45 !important; }
            .modal-panel .text-\[10px\] { font-size: 11px !important; line-height: 1.45 !important; }
            .modal-panel .text-\[11px\] { font-size: 12px !important; line-height: 1.5 !important; }
            .modal-panel .text-\[12px\] { font-size: 13.5px !important; line-height: 1.55 !important; }
            .modal-panel .text-\[13px\] { font-size: 15px !important; line-height: 1.65 !important; }
            .modal-panel .text-\[14px\] { font-size: 16px !important; line-height: 1.45 !important; }
            .modal-panel .text-xs { font-size: 0.875rem !important; line-height: 1.55 !important; }
            .modal-panel .text-sm { font-size: 1rem !important; line-height: 1.4 !important; }
            .modal-panel .md\:text-base { font-size: 1.125rem !important; line-height: 1.4 !important; }
            .modal-panel .text-xl { font-size: 1.5rem !important; line-height: 1.15 !important; }
            .modal-panel .md\:text-2xl { font-size: 2rem !important; line-height: 1.1 !important; }
            .modal-panel .text-4xl { font-size: 2.75rem !important; line-height: 1 !important; }
            .modal-panel .text-5xl { font-size: 3.5rem !important; line-height: 1 !important; }
            .modal-panel .leading-relaxed { line-height: 1.75 !important; }
            .modal-panel .min-h-\[400px\] { min-height: 460px !important; }
            .modal-panel .max-w-\[320px\] { max-width: 380px !important; }
            .modal-panel .w-8.h-8 {
                width: 2.5rem !important;
                height: 2.5rem !important;
            }
            .modal-panel .space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.625rem !important; }
            .modal-panel .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.875rem !important; }
            .modal-panel .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.875rem !important; }
            .modal-panel .data-table th { padding-bottom: 0.9375rem; }
            .modal-panel .data-table td { padding: 1rem 0; }
        }