:root {
            /* DEFAULT (DARK MODE) */
            --bg-dark: #0a0a0a;
            --bg-panel: #111111;
            --amber: #ffb347;
            --amber-dim: #b36f13;
            --amber-off: rgba(255, 159, 28, 0.1);
            --text-main: #C7C77E;
            --text-muted: #a8a8a8;
            --text-secondary-glow: #d4aa71;
            --text-body-primary: #bb9e7d;
            /* Helper for image filters (Dark mode needs screen blend) */
            --img-filter: grayscale(100%) contrast(1.1) brightness(0.9);
            --img-blend: screen;
            --img-overlay: linear-gradient(180deg, rgba(255, 159, 28, 0.1) 0%, rgba(255, 159, 28, 0) 50%, rgba(255, 159, 28, 0.1) 100%);
        }

        /* LIGHT MODE OVERRIDES (Applied when html has class 'light-theme') */
        html.light-theme {
            /* BACKGROUNDS: 
            Instead of pure white (#ffffff), we use a very subtle warm gray/cream.
            This reduces eye strain and fits the "retro paper" vibe better.
            */
            --bg-dark: #fdfbf7;       /* Warm paper white */
            --bg-panel: #f3f0e8;      /* Slightly darker warm gray for panels */

            /* PRIMARY COLOR (AMBER):
            We darken the amber significantly to a "Burnt Sienna" or "Rust" color.
            This passes accessibility contrast ratios on white backgrounds.
            */
            --amber: #c2410c;         /* Deep Rust Orange (High Contrast) */
            --amber-dim: #ea580c;     /* Slightly lighter orange for secondary elements */
            --text-secondary-glow: #e09f5a;
            --text-body-primary: #292524;
            /* HOVER STATES:
            A very light orange wash for hover backgrounds.
            */
            --amber-off: rgba(194, 65, 12, 0.08);

            /* TEXT:
            Instead of harsh black, we use a very deep warm gray or brown-black.
            This creates a cohesive "printed on paper" look.
            */
            --text-main: #292524;     /* Warm Black/Charcoal */
            --text-muted: #78350f;    /* Dark Brown for muted text */
            
            /* IMAGE FILTERS:
            We adjust the blend mode to 'multiply' which looks like printing ink on paper.
            */
            --img-filter: grayscale(100%) contrast(1) brightness(1.05);
            --img-blend: multiply; 
            --img-overlay: linear-gradient(180deg, rgba(194, 65, 12, 0.05) 0%, rgba(0,0,0,0) 50%, rgba(194, 65, 12, 0.05) 100%);
        }

    body {
        background-color: var(--bg-dark);
        color: var(--text-main);
        font-family: 'Fira Code', monospace; /* Force Monospace everywhere */
        overflow-x: hidden;
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar { width: 12px; }
    ::-webkit-scrollbar-track { background: var(--bg-dark); border-left: 1px solid var(--amber-dim); }
    ::-webkit-scrollbar-thumb { background-color: var(--amber); border: 2px solid var(--bg-dark); }

    /* Selection */
    ::selection { background: var(--amber); color: var(--bg-dark); }

    /* UTILITIES */
    .text-amber { color: var(--amber); }
    .text-amber-dim { color: var(--text-muted); }
    .bg-dark { background-color: var(--bg-dark); }
    
    /* SHARP BORDERS (No rounded corners allowed) */
    .sharp-border {
        border: 1px solid var(--amber);
        border-radius: 0px !important;
    }

    /* SCANLINES OVERLAY */
    .scanlines {
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(to bottom, rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
        background-size: 100% 4px;
        pointer-events: none;
        z-index: 9999;
        /* FIX: Reduce opacity significantly (from 0.15 to 0.05) */
        opacity: 0.05; 
    }

    /* RETRO MONITOR IMAGE EFFECT 
       (Desaturates images and applies amber tint)
    */
    .retro-monitor {
        position: relative;
        overflow: hidden;
        background-color: #000;
    }
    .retro-monitor img {
        filter: grayscale(100%) contrast(1.1) brightness(0.9);
        mix-blend-mode: screen;
        width: 100%; height: 100%; object-fit: cover;
        transition: all 0.3s ease;
        opacity: 0.7;
    }
    /* Amber Tint Overlay */
    .retro-monitor::after {
        content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(180deg, rgba(255, 159, 28, 0.1) 0%, rgba(255, 159, 28, 0) 50%, rgba(255, 159, 28, 0.1) 100%);
        box-shadow: inset 0 0 20px rgba(255, 159, 28, 0.2);
        pointer-events: none; z-index: 10;
    }
    /* Hover Effect: Bring color back slightly */
    .retro-monitor:hover img {
        filter: grayscale(0%) contrast(1);
        opacity: 1;
        mix-blend-mode: normal;
    }

    /* NUMBERED HEADING STYLE (Cyber version) */
    .numbered-heading {
        display: flex; align-items: center; position: relative;
        margin: 10px 0 40px; width: 100%;
        font-size: clamp(26px,5vw,32px); white-space: nowrap;
        color: var(--amber); font-weight: 700;
    }
    .numbered-heading::before {
        position: relative; bottom: 0px;
        counter-increment: section;
        content: "0" counter(section) ".";
        margin-right: 10px;
        color: var(--amber); font-weight: 400; opacity: 0.7;
    }
    .numbered-heading::after {
        content: ""; display: block; position: relative; top: 0px;
        width: 300px; height: 1px; margin-left: 20px;
        background-color: var(--amber-dim);
    }

    /* BUTTON STYLES */
    .btn-cyber {
        background: transparent; color: var(--amber);
        border: 1px solid var(--amber);
        padding: 1rem 1.75rem; font-size: 14px;
        text-decoration: none; cursor: pointer;
        transition: all 0.25s cubic-bezier(0.645,0.045,0.355,1);
        box-shadow: 4px 4px 0px var(--amber-dim);
    }
    .btn-cyber:hover {
        background: var(--amber-off);
        box-shadow: 2px 2px 0px var(--amber-dim);
        transform: translate(2px, 2px);
    }

    body { counter-reset: section; }


    /* New Custom CSS for Data Eagle Logo */
    .group-data-eagle .eagle-icon {
        /* Default State: High Contrast White */
        color: white; 
        transition: color 0.3s ease;
    }

    .group-data-eagle:hover .eagle-icon {
        /* Hover State: The new, lighter blue/teal based on the original brand color */
        color: #2570da; 
    }

    .writing-vertical-rl {
        writing-mode: vertical-rl;
    }

.cursor-blink {
    display: inline-block;
    width: 8px; /* Slightly thinner for Fira Code font */
    height: 1.2em;
    background-color: var(--amber); /* Uses your primary amber color */
    animation: blink 1s steps(2) infinite;
    vertical-align: text-bottom;
    margin-left: 2px;
}
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } }