body { font-family: 'Inter', sans-serif; }
        .chart-container { position: relative; height: 250px; width: 100%; }
        .slider-bg { transition: all 0.3s ease-in-out; }
        
        /* MARKDOWN STYLES */
        .prose h1 { font-size: 1.8rem; font-weight: 800; margin-bottom: 1rem; color: #0d9488; }
        .prose h2 { font-size: 1.4rem; font-weight: 700; margin-top: 2rem; margin-bottom: 0.8rem; color: #1e293b; border-bottom: 2px solid #f1f5f9; padding-bottom: 0.5rem; }
        .dark .prose h2 { color: #e2e8f0; border-color: #334155; }
        .prose h3 { font-size: 1.2rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; color: #334155; }
        .dark .prose h3 { color: #cbd5e1; }
        .prose p { margin-bottom: 1.2rem; line-height: 1.7; color: #475569; }
        .dark .prose p { color: #94a3b8; }
        .prose ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1.5rem; }
        .prose li { margin-bottom: 0.5rem; }
        
        /* --- TABLE STYLES (THEME AWARE) --- */
        .prose table { 
            width: max-content; 
            max-width: 100%;    
            border-collapse: collapse; 
            margin: 1.5rem 0; 
            overflow: hidden; 
            border-radius: 0.5rem; 
            border: 1px solid #cbd5e1; /* Light Mode Border */
            display: block;     
            overflow-x: auto; 
        }
        .dark .prose table { border-color: #334155; } /* Dark Mode Border */
        
        .prose th { 
            background-color: #e2e8f0; /* LIGHT MODE: Light Gray Header */
            font-weight: 700; 
            color: #1e293b; /* Dark Text */
            text-align: left; 
            padding: 0.75rem 1.5rem; 
            white-space: nowrap;     
        }
        .dark .prose th { 
            background-color: #0f172a; /* DARK MODE: Dark Header */
            color: #e2e8f0; /* Light Text */
        }
        
        .prose td { 
            padding: 0.75rem 1.5rem; 
            border-bottom: 1px solid #cbd5e1; 
            color: #475569; 
        }
        .dark .prose td { 
            border-color: #334155; 
            color: #94a3b8; 
        }
        
        /* ZEBRA STRIPING */
        .prose tr:nth-child(even) { 
            background-color: #f8fafc; /* Light Mode Stripe */
        }
        .dark .prose tr:nth-child(even) { 
            background-color: #1e293b; /* Dark Mode Stripe */
        }
        
        /* HOVER EFFECT */
        .prose tr:hover td { 
            background-color: #f1f5f9; 
            color: #0f172a;
        }
        .dark .prose tr:hover td { 
            background-color: #334155;
            color: #ffffff;
        }
    
        /* --- CODE BLOCKS (THEME AWARE) --- */
        .prose pre { 
            background-color: #f1f5f9; /* LIGHT MODE: Light Background */
            padding: 1.25rem; 
            border-radius: 0.75rem; 
            overflow-x: auto; 
            margin-bottom: 1.5rem; 
            border: 1px solid #cbd5e1; /* Light Border */
            color: #1e293b; /* Dark Text */
        }
        .dark .prose pre { 
            background-color:  #161c26; /* #1e293b;DARK MODE: Dark Background */
            border-color: #334155; 
            color: #e2e8f0; /* Light Text */
        }
    
        /* Inline Code (e.g. `variable`) */
        .prose code { 
            font-family: 'Fira Code', monospace; 
            font-size: 0.9em;
            background-color: #e2e8f0; /* Light Mode Inline Bg */
            padding: 0.2rem 0.4rem;
            border-radius: 0.25rem;
            color: #0f766e; /* Teal Text */
        }
        .dark .prose code {
            background-color: transparent; /* Reset for pre blocks */
            color: inherit;
        }
        /* Fix for code inside pre blocks not to have double background */
        .prose pre code {
            background-color: transparent;
            padding: 0;
            color: inherit;
        }
    
        .prose strong { font-weight: 700; color: #0f172a; }
        .dark .prose strong { color: #f8fafc; }
        
        .prose blockquote { border-left: 4px solid #0d9488; padding-left: 1rem; color: #64748b; font-style: italic; background: #f0fdfa; padding: 1rem; border-radius: 0 0.5rem 0.5rem 0; }
        .dark .prose blockquote { background: #134e4a30; color: #94a3b8; }
        
        
        
        
        
        
        
     /* 1. Define Variables for Colors */
        :root {
            --comp-bg: #ffffff;
            --comp-panel-bg: #f8fafc; /* Slate 50 */
            --comp-border: #e2e8f0;   /* Slate 200 */
            --comp-text: #1e293b;     /* Slate 800 */
            --comp-header-bg: #f1f5f9; /* Slate 100 */
            --term-bg: #ffffff;
            --term-text: #334155;
        }
    
        /* 2. Dark Mode Overrides */
        .dark {
            --comp-bg: #0d1117;
            --comp-panel-bg: #161b22;
            --comp-border: #30363d;
            --comp-text: #c9d1d9;
            --comp-header-bg: #21262d;
            --term-bg: #0d1117;
            --term-text: #c9d1d9;
        }
    
        /* Main Container */
        #compiler-ui {
            display: flex;
            flex-direction: column;
            height: 750px;
            background-color: var(--comp-bg); /* Use Variable */
            border-radius: 12px;
            border: 1px solid var(--comp-border);
            overflow: hidden;
            padding: 20px;
            transition: background-color 0.3s, border-color 0.3s;
        }
    
        /* Toolbar Header */
        .comp-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            background-color: var(--comp-panel-bg);
            padding: 10px 20px;
            border-radius: 8px;
            border: 1px solid var(--comp-border);
        }
    
        /* Controls & Buttons */
        .comp-controls { display: flex; gap: 10px; align-items: center; }
        
        .comp-btn, #example-selector {
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.9rem;
            outline: none;
        }
        
        .btn-run { background-color: #2563eb; color: white; } /* Blue-600 */
        .btn-run:hover { background-color: #1d4ed8; }
    
        .btn-clear { background-color: #ef4444; color: white; } /* Red-500 */
        .btn-clear:hover { background-color: #dc2626; }
    
        #example-selector {
            background-color: var(--comp-header-bg); 
            color: var(--comp-text); 
            border: 1px solid var(--comp-border);
        }
    
        /* Editor & Output Grid */
        .comp-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            flex-grow: 1;
            min-height: 0;
        }
        
        /* Panels */
        .comp-panel {
            background-color: var(--comp-panel-bg);
            border: 1px solid var(--comp-border);
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        .panel-head {
            padding: 10px 15px;
            background-color: var(--comp-header-bg);
            border-bottom: 1px solid var(--comp-border);
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            color: var(--comp-text);
        }
    
        /* CodeMirror Fixes */
        .CodeMirror {
            height: 100% !important;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 14px;
            background-color: var(--term-bg) !important; /* Force bg match */
        }
    
        /* Output Terminal */
        #terminal-output {
            padding: 15px;
            font-family: 'Consolas', 'Monaco', monospace;
            overflow-y: auto;  /* Scroll if text is too long */
            flex-grow: 1;
            font-size: 13px;
            color: #c9d1d9;
            background-color: #0d1117;
            
            /* PREVENT EXPLOSION: Force text to wrap */
            white-space: pre-wrap;       /* Wrap long lines */
            word-wrap: break-word;       /* Break long words/errors */
            overflow-x: hidden;          /* No horizontal scrollbar */
            max-width: 100%;             /* Stay inside the box */
        }
    
        .log-entry { margin-bottom: 5px; white-space: pre-wrap; }
        .error-text { color: #ef4444; }
        .system-msg { color: #94a3b8; font-style: italic; font-size: 0.85rem; margin-top: 10px; border-top: 1px solid var(--comp-border); padding-top: 5px;}
        
        /* Mobile Responsive */
        @media (max-width: 768px) {
            .comp-grid { grid-template-columns: 1fr; }
            #compiler-ui { height: auto; }
            .comp-panel { height: 400px; }
        }
        
        
       /* --- MOBILE RESPONSIVE FIXES (FINAL ROBUST VERSION) --- */
        @media (max-width: 768px) {
            
            /* 1. Main Container: Allow infinite scrolling */
            #compiler-ui {
                height: auto !important; 
                overflow: visible !important;
                padding: 10px !important;
                background-color: transparent !important; /* Blend with background */
                border: none !important;
            }
    
            /* 2. Header: Stack layout */
            .comp-header {
                flex-direction: column;
                gap: 10px;
                padding: 15px;
            }
    
            /* 3. Controls: Grid Layout (Dropdown Top, Buttons Bottom) */
            .comp-controls {
                display: grid !important;
                grid-template-columns: 1fr 1fr !important; /* Two equal columns */
                grid-template-rows: auto auto !important;    /* Two rows */
                gap: 10px;
                width: 100%;
            }
    
            /* Dropdown takes full width on top row */
            #example-selector {
                grid-column: 1 / -1; /* Span across both columns */
                width: 100%;
                padding: 12px;
            }
    
            /* Buttons sit side-by-side on bottom row */
            .comp-btn {
                width: 100%;
                justify-content: center;
                padding: 12px !important;
            }
    
            /* 4. Panels: Stacked Vertically & Rigid Height */
            .comp-grid {
                display: flex !important;
                flex-direction: column !important;
                gap: 20px;
                margin-bottom: 50px; /* Extra space at bottom for scrolling */
            }
    
            .comp-panel {
                /* Force specific height so they NEVER collapse */
                height: 450px !important; 
                min-height: 450px !important;
                flex-shrink: 0 !important; /* Prevent shrinking */
            }
        }