body {
            background-color: var(--c-bg-base);
            color: var(--c-on-surface);
            position: relative;
            overflow-x: hidden;
        }

        /* Scanline Overlay */
        body::before {
            content: " ";
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: linear-gradient(
                to bottom,
                rgba(var(--c-scan-rgb), 0) 50%,
                rgba(var(--c-scan-rgb), 0.2) 50%
            );
            background-size: 100% 4px;
            z-index: 50;
            pointer-events: none;
        }

        /* Subtle Vignette */
        body::after {
            content: " ";
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: radial-gradient(circle, rgba(0,0,0,0) 50%, rgba(var(--c-vignette-rgb), 0.8) 100%);
            z-index: 49;
            pointer-events: none;
        }

        .terminal-window {
            border: 1px solid rgba(var(--c-primary-rgb), 0.4);
            border-radius: 6px;
            background-color: var(--c-bg-panel);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
            position: relative;
            z-index: 10;
        }

        .terminal-header {
            border-bottom: 1px solid var(--c-border-scan);
            padding: 8px 16px;
            display: flex;
            align-items: center;
            background-color: var(--c-bg-base);
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        .window-controls {
            display: flex;
            gap: 6px;
        }

        .window-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: var(--c-surface-highest);
            border: 1px solid var(--c-border-scan);
        }

        .window-title {
            flex-grow: 1;
            text-align: center;
            color: var(--c-on-surface-variant);
            font-size: 12px;
        }

        .terminal-content {
            padding: 24px;
        }

        .blinking-cursor {
            animation: blink 1s step-end infinite;
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        .hover-glow:hover {
            box-shadow: 0 0 12px rgba(var(--c-primary-rgb), 0.2);
            text-shadow: 0 0 8px rgba(var(--c-primary-rgb), 0.4);
            border-color: rgba(var(--c-primary-rgb), 0.8);
            background-color: rgba(var(--c-primary-rgb), 0.05);
        }

        .input-focus:focus {
            outline: none;
            border-color: var(--c-primary);
            box-shadow: 0 0 8px rgba(var(--c-primary-rgb), 0.3);
        }

        .pulse-bar {
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--c-secondary), transparent);
            background-size: 200% 100%;
            animation: pulse-gradient 2s linear infinite;
        }

        @keyframes pulse-gradient {
            0% { background-position: 100% 0; }
            100% { background-position: -100% 0; }
        }

        /* Scroll-reveal initial state (JS clears it if GSAP missing) */
        .reveal { opacity: 0; transform: translateY(20px); }

        /* Stack chips */
        .chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border: 1px solid var(--c-outline-variant);
            border-radius: 9999px;
            font-size: 12px;
            color: var(--c-on-surface-variant);
            background-color: rgba(var(--c-primary-rgb), 0.04);
            transition: all 0.15s ease-in-out;
        }
        .chip:hover {
            border-color: rgba(var(--c-primary-rgb), 0.8);
            color: var(--c-primary);
            box-shadow: 0 0 10px rgba(var(--c-primary-rgb), 0.15);
        }
        .chip .dot {
            width: 6px; height: 6px; border-radius: 50%;
            background-color: var(--c-secondary);
        }

        /* Theme variables (dark = default) */
        :root {
            --c-bg-base: #0F0D0A;
            --c-bg-panel: #161210;
            --c-surface-highest: #3a3429;
            --c-border-scan: #2A241C;
            --c-on-surface: #ece1d0;
            --c-on-surface-variant: #d7c3ae;
            --c-primary: #ffc880;
            --c-primary-container: #f5a623;
            --c-primary-fixed-dim: #ffb955;
            --c-secondary: #77d8bc;
            --c-secondary-container: #017e67;
            --c-on-secondary-fixed-variant: #005141;
            --c-secondary-fixed-dim: #77d8bc;
            --c-outline: #9f8e7a;
            --c-outline-variant: #524534;

            --c-primary-rgb: 245, 166, 35;
            --c-scan-rgb: 42, 36, 28;
            --c-vignette-rgb: 15, 13, 10;
        }
        html.light {
            --c-bg-base: #f4ece0;
            --c-bg-panel: #fffaf2;
            --c-surface-highest: #e9ddca;
            --c-border-scan: #d9c7ad;
            --c-on-surface: #2a2118;
            --c-on-surface-variant: #5c4a36;
            --c-primary: #9a5b00;
            --c-primary-container: #c97f0a;
            --c-primary-fixed-dim: #b86f00;
            --c-secondary: #017e67;
            --c-secondary-container: #b6efe0;
            --c-on-secondary-fixed-variant: #004d3f;
            --c-secondary-fixed-dim: #017e67;
            --c-outline: #b59b7e;
            --c-outline-variant: #c9b393;

            --c-primary-rgb: 154, 91, 0;
            --c-scan-rgb: 217, 199, 173;
            --c-vignette-rgb: 244, 236, 224;
        }

        /* Theme toggle icon visibility */
        .theme-dark-ic { display: inline-flex; }
        .theme-light-ic { display: none; }
        html.light .theme-dark-ic { display: none; }
        html.light .theme-light-ic { display: inline-flex; }

        /* Theme reveal overlay (circular wipe from button) */
        #theme-reveal {
            position: fixed;
            inset: 0;
            z-index: 60;
            pointer-events: none;
            display: none;
            clip-path: circle(0px at 50% 50%);
            background-color: var(--c-bg-base);
        }