:root {
            /* Dark Mode (Default - Soul Reaper) */
            --bg-primary: #050505;
            --bg-secondary: #0a0a0a;
            --bg-card: rgba(20, 20, 20, 0.6);
            --text-primary: #f5f5f5;
            --text-secondary: #a3a3a3;
            --accent-primary: #ff7b00; /* Orange */
            --accent-secondary: #00f2ff; /* Cyan */
            --border-color: rgba(255, 255, 255, 0.1);
            --hud-color: rgba(255, 255, 255, 0.2);
        }

        /* Light Mode (Quincy / Soul Society Day) */
        .light-theme {
            --bg-primary: #e8e8e8;
            --bg-secondary: #ffffff;
            --bg-card: rgba(255, 255, 255, 0.7);
            --text-primary: #1a1a1a;
            --text-secondary: #4a4a4a;
            --accent-primary: #2563eb; /* Quincy Blue */
            --accent-secondary: #9333ea; /* Purple */
            --border-color: rgba(0, 0, 0, 0.1);
            --hud-color: rgba(0, 0, 0, 0.2);
        }

        body {
            font-family: 'Rajdhani', sans-serif;
            background-color: var(--bg-primary);
            color: var(--text-primary);
            overflow-x: hidden;
            cursor: crosshair;
            transition: background-color 0.5s ease, color 0.5s ease;
        }

        h1, h2, h3, .heading-font {
            font-family: 'Oswald', sans-serif;
            text-transform: uppercase;
        }

        .font-jp {
            font-family: 'Noto Sans JP', sans-serif;
        }

        /* Dynamic Classes using Variables */
        .theme-bg-primary { background-color: var(--bg-primary); }
        .theme-bg-secondary { background-color: var(--bg-secondary); }
        .theme-text-primary { color: var(--text-primary); }
        .theme-text-secondary { color: var(--text-secondary); }
        .theme-accent-primary { color: var(--accent-primary); }
        .theme-border { border-color: var(--border-color); }
        
        .theme-btn-primary {
            background-color: var(--text-primary);
            color: var(--bg-primary);
        }
        .theme-btn-primary:hover {
            background-color: var(--accent-primary);
            color: white;
        }

        /* Outline Text Support */
        .text-outline {
            -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
            color: transparent;
        }
        .light-theme .text-outline {
             -webkit-text-stroke: 1px rgba(0, 0, 0, 0.2);
        }
        
        .text-outline-accent {
            -webkit-text-stroke: 1px var(--accent-primary);
            color: transparent;
        }

        /* Cyber UI Clip Paths */
        .clip-cut-corner {
            clip-path: polygon(
                20px 0, 100% 0, 
                100% calc(100% - 20px), calc(100% - 20px) 100%, 
                0 100%, 0 20px
            );
        }
        
        .clip-button {
            clip-path: polygon(
                10px 0, 100% 0, 
                100% calc(100% - 10px), calc(100% - 10px) 100%, 
                0 100%, 0 10px
            );
        }

        /* Bento Grid */
        .bento-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-auto-rows: minmax(100px, auto);
            gap: 1.5rem;
        }

        .bento-item {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            backdrop-filter: blur(10px);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .bento-item:hover {
            border-color: var(--accent-primary);
            transform: translateY(-5px);
        }

        /* Navigation Link Effect */
        .nav-link {
            position: relative;
            letter-spacing: 0.1em;
            color: var(--text-secondary);
            transition: color 0.3s;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .nav-link:hover {
            color: var(--text-primary);
        }
        .nav-link::before {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0%;
            height: 1px;
            background-color: var(--accent-primary);
            transition: width 0.3s ease;
        }
        .nav-link:hover::before {
            width: 100%;
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
        }
        ::-webkit-scrollbar-track {
            background: var(--bg-primary);
        }
        ::-webkit-scrollbar-thumb {
            background: #444;
            border-radius: 3px;
        }

        /* Hero Image Masking */
        .hero-mask {
            mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
            -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
        }

        /* Scroll Reveal Animation */
        .reveal-hidden {
            opacity: 0;
            transform: translateY(40px);
            filter: blur(4px);
            transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        
        .reveal-visible {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }

        .delay-100 { transition-delay: 0.1s; }
        .delay-200 { transition-delay: 0.2s; }
        .delay-300 { transition-delay: 0.3s; }
        .delay-400 { transition-delay: 0.4s; }

        /* Auth Modal Styles */
        .auth-modal {
            position: fixed;
            inset: 0;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .auth-modal.open {
            opacity: 1;
            pointer-events: auto;
        }
        .auth-card {
            width: 100%;
            max-width: 400px;
            background: var(--bg-secondary);
            border: 1px solid var(--accent-primary);
            padding: 2rem;
            transform: scale(0.9);
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .auth-modal.open .auth-card {
            transform: scale(1);
        }
        .auth-input {
            width: 100%;
            background: var(--bg-primary);
            border: 1px solid var(--border-color);
            color: var(--text-primary);
            padding: 12px;
            margin-bottom: 16px;
            outline: none;
            transition: border-color 0.3s;
        }
        .auth-input:focus {
            border-color: var(--accent-primary);
        }
        
        /* Floating Labels inside Input */
        .input-group { position: relative; }
        .input-label {
            position: absolute;
            left: 12px;
            top: 12px;
            font-size: 0.8rem;
            color: var(--text-secondary);
            pointer-events: none;
            transition: all 0.2s;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
        .auth-input:focus + .input-label,
        .auth-input:not(:placeholder-shown) + .input-label {
            top: -10px;
            left: 0;
            font-size: 0.7rem;
            color: var(--accent-primary);
            background: var(--bg-secondary);
            padding: 0 4px;
        }
        
        /* Vertical Text for Japanese decorations */
        .writing-vertical {
            writing-mode: vertical-rl;
            text-orientation: upright;
        }