:root {
            --bg-color: #0A0A0A; --grid-dot: #222222; --text-main: #E5E5E5; --heading-border: #A3E635; 
            --card-bg: #161618; --btn-bg: #0D3B66; --btn-text: #FAF0CA; 
            --banner-title-bg: #A3E635; --banner-title-text: #0A0A0A; --mascot-filter: grayscale(100%) contrast(125%);
        }
        body.light-mode {
            --bg-color: #FAF0CA; --grid-dot: #0D3B66; --text-main: #0D3B66; --heading-border: #0D3B66; 
            --card-bg: #FFFFFF; --btn-bg: #F4D35E; --btn-text: #0D3B66; 
            --banner-title-bg: #FFFFFF; --banner-title-text: #0D3B66; --mascot-filter: none;
        }
        body { font-family: 'Space Grotesk', sans-serif; background-color: var(--bg-color); color: var(--text-main); transition: background-color 0.3s, color 0.3s; }
        .pixel-font { font-family: 'VT323', monospace; }
        .dot-grid { background-color: var(--bg-color); background-image: radial-gradient(var(--grid-dot) 2px, transparent 2px); background-size: 30px 30px; border-bottom: 6px solid var(--heading-border); transition: background-color 0.3s; }
        .neo-card { border: 4px solid var(--heading-border); box-shadow: 8px 8px 0px 0px var(--heading-border); background-color: var(--card-bg); transition: transform 0.2s, background-color 0.3s, box-shadow 0.3s; }
        .neo-card:hover { transform: translate(-4px, -4px); box-shadow: 12px 12px 0px 0px var(--heading-border); }
        h1, h2, h3 { text-transform: uppercase; font-weight: 900; letter-spacing: -0.05em; color: var(--heading-border); }
        .body-text-override { color: var(--text-main); }
        .neo-btn { background-color: var(--btn-bg); color: var(--btn-text); border: 4px solid var(--heading-border); box-shadow: 6px 6px 0px 0px var(--heading-border); transition: all 0.1s; cursor: pointer; }
        .neo-btn:hover { transform: translate(4px, 4px); box-shadow: 0px 0px 0px 0px var(--heading-border); }
        .mascot-img { filter: var(--mascot-filter); transition: filter 0.3s; }
        .group:hover .mascot-img { filter: none; }