/* ==========================================

           1. CORE DESIGN SYSTEM & VARIABLES

           ========================================== */

        :root {

            --bg: #030306;

            --glow-1: #10061e;

            --glow-2: #020b12;

            --text-primary: #f8fafc;

            --text-muted: #94a3b8;

            

            /* Curated Color Palette */

            --accent: #8b5cf6;

            --accent-rgb: 139, 92, 246;

            --accent-glow: rgba(139, 92, 246, 0.22);

            

            --accent-cyan: #0ea5e9;

            --accent-cyan-rgb: 14, 165, 233;

            --accent-cyan-glow: rgba(14, 165, 233, 0.22);

            

            --accent-gold: #c89d53;

            --accent-gold-rgb: 200, 157, 83;

            --accent-gold-glow: rgba(200, 157, 83, 0.15);

            

            --border: rgba(255, 255, 255, 0.05);

            --border-hover: rgba(14, 165, 233, 0.35);

            --glass-bg: rgba(8, 8, 14, 0.65);

            --glass-panel: rgba(10, 10, 18, 0.88);

            --ease-glide: cubic-bezier(0.16, 1, 0.3, 1);

            

            --mouse-x: 50%;

            --mouse-y: 50%;

        }



        * { 

            margin: 0; 

            padding: 0; 

            box-sizing: border-box; 

            outline: none;

        }



        html { 

            scroll-behavior: smooth; 

            background-color: var(--bg);

            scrollbar-width: thin;

            scrollbar-color: var(--border) var(--bg);

        }



        body {

            background: transparent;

            color: var(--text-primary);

            font-family: 'Plus Jakarta Sans', sans-serif;

            overflow-x: hidden;

            min-height: 100vh;

            line-height: 1.625;

            transition: background 0.8s var(--ease-glide);

        }



        #bg-backdrop {

            position: fixed;

            inset: 0;

            background: 

                radial-gradient(circle at 15% 15%, var(--glow-1) 0%, transparent 45%),

                radial-gradient(circle at 85% 85%, var(--glow-2) 0%, transparent 45%),

                var(--bg);

            z-index: -4;

            pointer-events: none;

            transition: background 0.8s var(--ease-glide);

        }



        body.is-transitioning #app-root,

        body.is-cinematic #app-root { 

            pointer-events: none; 

        }



        /* --- Global Canvas & Ambient Effects --- */

        #void-canvas { 

            position: fixed; 

            top: 0; 

            left: 0; 

            width: 100vw; 

            height: 100vh; 

            z-index: -2; 

            pointer-events: none; 

            transition: opacity 1.5s var(--ease-glide); 

        }



        .ambient-glow { 

            position: fixed; 

            top: -20vh; 

            left: 10vw; 

            width: 80vw; 

            height: 60vh; 

            background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%); 

            z-index: -3; 

            pointer-events: none; 

            filter: blur(80px); 

            animation: floatGlow 25s ease-in-out infinite alternate; 

        }



        .ambient-glow.two { 

            top: auto; 

            bottom: -20vh; 

            left: auto; 

            right: -5vw; 

            width: 60vw; 

            height: 60vh; 

            background: radial-gradient(circle, rgba(14, 165, 233, 0.06) 0%, transparent 70%); 

            animation: floatGlow 30s ease-in-out infinite alternate-reverse;

        }



        /* ==========================================

           2. TYPOGRAPHY & UTILITIES

           ========================================== */

        h1, h2, h3, h4, h5 {

            font-family: 'Outfit', sans-serif;

            color: var(--text-primary);

            letter-spacing: -0.025em;

            font-weight: 700;

        }

        

        h1 { font-size: clamp(2.3rem, 6vw, 3.8rem); line-height: 1.15; margin-bottom: 0.75rem; }

        h2 { font-size: clamp(1.8rem, 4vw, 2.3rem); line-height: 1.25; margin-bottom: 1rem; }

        h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }

        

        p { 

            color: var(--text-muted); 

            line-height: 1.625; 

            font-size: 0.98rem; 

        }

        

        .mono { 

            font-family: 'Fira Code', monospace; 

            color: var(--accent-cyan); 

            font-size: 0.78rem; 

            letter-spacing: 0.05em; 

            text-transform: uppercase;

        }



        /* --- Glass Cards & Hover Spotlights --- */

        .glass-card {

            position: relative;

            background: var(--glass-bg);

            backdrop-filter: blur(20px);

            -webkit-backdrop-filter: blur(20px);

            border: 1px solid var(--border);

            border-radius: 16px;

            padding: 2.25rem;

            overflow: hidden;

            transition: 

                transform 0.5s var(--ease-glide), 

                border-color 0.5s var(--ease-glide), 

                box-shadow 0.5s var(--ease-glide);

            isolation: isolate;

        }



        /* Glass reveal effect combining opacity and filter load */

        .glass-card {

            animation: glassReveal 0.6s var(--ease-glide) forwards;

        }



        @keyframes glassReveal {

            from { 

                opacity: 0; 

                backdrop-filter: blur(0px); 

                -webkit-backdrop-filter: blur(0px); 

                transform: translateY(8px); 

            }

            to { 

                opacity: 1; 

                backdrop-filter: blur(20px); 

                -webkit-backdrop-filter: blur(20px); 

                transform: translateY(0); 

            }

        }



        /* Spotlight border highlights */

        .glass-card::before {

            content: '';

            position: absolute;

            inset: 0;

            background: radial-gradient(

                450px circle at var(--mouse-x) var(--mouse-y),

                rgba(255, 255, 255, 0.038),

                transparent 45%

            );

            z-index: -1;

            opacity: 0;

            transition: opacity 0.5s;

        }



        .glass-card:hover::before {

            opacity: 1;

        }



        .glass-card:hover {

            box-shadow: 

                0 20px 40px -15px rgba(0, 0, 0, 0.6),

                0 0 0 1px var(--border-hover);

        }



        .glass-card.interactable:hover {

            transform: translateY(-4px);

        }



        .section-label {

            display: inline-flex;

            align-items: center;

            gap: 0.6rem;

            color: var(--accent-cyan);

            font-family: 'Fira Code', monospace;

            text-transform: uppercase;

            letter-spacing: 0.08em;

            font-size: 0.74rem;

            margin-bottom: 1.25rem;

            font-weight: 500;

        }



        .section-label::before {

            content: '';

            width: 20px;

            height: 1px;

            background: linear-gradient(90deg, transparent, var(--accent-cyan));

        }

        

        .epic-btn {

            background: transparent;

            color: var(--text-primary);

            border: 1px solid var(--accent-cyan);

            padding: 0.75rem 1.65rem;

            border-radius: 99px;

            font-family: 'Fira Code', monospace;

            font-size: 0.8rem;

            letter-spacing: 0.05em;

            cursor: pointer;

            transition: 

                transform 0.3s var(--ease-glide), 

                background 0.3s, 

                box-shadow 0.3s, 

                border-color 0.3s;

            display: inline-flex;

            align-items: center;

            gap: 10px;

            will-change: transform;

            position: relative;

            z-index: 1;

            box-shadow: 0 4px 12px rgba(14, 165, 233, 0.03);

        }



        .epic-btn:hover { 

            background: rgba(14, 165, 233, 0.05); 

            box-shadow: 0 4px 15px rgba(14, 165, 233, 0.06); 

            transform: translateY(-2px); 

            border-color: var(--accent-cyan);

        }



        .epic-btn.btn-purple {

            border-color: var(--accent);

            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.03);

        }

        .epic-btn.btn-purple:hover {

            background: rgba(139, 92, 246, 0.05);

            box-shadow: 0 4px 15px rgba(139, 92, 246, 0.06);

            border-color: var(--accent);

        }



        .tag-group { 

            display: flex; 

            gap: 0.5rem; 

            flex-wrap: wrap; 

            margin-top: 1rem; 

        }



        .tag {

            background: rgba(255, 255, 255, 0.01);

            color: var(--text-muted);

            padding: 0.3rem 0.75rem;

            border-radius: 6px;

            font-size: 0.72rem;

            font-family: 'Fira Code', monospace;

            border: 1px solid rgba(255, 255, 255, 0.03);

            transition: all 0.3s var(--ease-glide);

        }



        .tag:hover {

            border-color: var(--accent-cyan);

            background: rgba(14, 165, 233, 0.05);

            color: var(--text-primary);

        }



        .tag.tag-accent:hover {

            border-color: var(--accent);

            background: rgba(139, 92, 246, 0.06);

            color: var(--text-primary);

        }



        /* ==========================================

           3. SPA CORE NAVIGATION SHELL

           ========================================== */

        #nav-main {

            position: fixed; 

            top: 0; 

            left: 0; 

            width: 100%; 

            padding: 1.25rem 4vw; 

            display: flex; 

            justify-content: space-between; 

            align-items: center; 

            z-index: 100; 

            background: rgba(3, 3, 6, 0.8);

            backdrop-filter: blur(20px);

            -webkit-backdrop-filter: blur(20px);

            border-bottom: 1px solid var(--border);

            transition: opacity 0.5s, transform 0.5s var(--ease-glide);

        }



        .logo-container {

            display: flex;

            align-items: center;

            gap: 8px;

        }



        /* Brand monogram typography */

        .logo-text {

            font-family: 'Fira Code', monospace;

            font-weight: 700;

            font-size: 0.88rem;

            display: flex;

            align-items: center;

            gap: 6px;

        }

        

        .logo-brackets {

            color: var(--accent-cyan);

            text-shadow: 0 0 10px var(--accent-cyan-glow);

            font-weight: 800;

            transition: transform 0.4s var(--ease-glide), color 0.4s var(--ease-glide), text-shadow 0.4s var(--ease-glide);

            display: inline-block;

        }

        

        .logo-container:hover .logo-brackets:first-child {

            transform: translateX(-5px);

            color: #ec4899;

            text-shadow: 0 0 12px rgba(236, 72, 153, 0.8);

        }



        .logo-container:hover .logo-brackets:last-child {

            transform: translateX(5px);

            color: #38bdf8;

            text-shadow: 0 0 12px rgba(56, 189, 248, 0.8);

        }

        

        @keyframes logoGradientSweep {

            0% { background-position: 0% 50%; }

            50% { background-position: 100% 50%; }

            100% { background-position: 0% 50%; }

        }



        .logo-name {

            background: linear-gradient(90deg, #38bdf8, #a855f7, #ec4899, #38bdf8);

            background-size: 300% 100%;

            background-clip: text;

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            letter-spacing: 0.14em;

            font-weight: 800;

            animation: logoGradientSweep 8s ease infinite;

            transition: letter-spacing 0.4s var(--ease-glide), filter 0.4s var(--ease-glide), transform 0.4s var(--ease-glide);

            display: inline-block;

        }

        

        .logo-container:hover .logo-name {

            letter-spacing: 0.22em;

            transform: scale(1.03);

            filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.65)) drop-shadow(0 0 15px rgba(56, 189, 248, 0.4));

        }



        .nav-links { 

            display: flex; 

            gap: 2.25rem; 

            align-items: center;

        }



        .nav-links a {

            color: var(--text-muted);

            text-decoration: none;

            font-family: 'Fira Code', monospace;

            font-size: 0.8rem;

            letter-spacing: 0.03em;

            padding: 0.3rem 0.1rem;

            position: relative;

            transition: color 0.3s var(--ease-glide);

        }



        .nav-links a::after {

            content: '';

            position: absolute;

            left: 0;

            bottom: 0;

            width: 100%;

            height: 1px;

            background: var(--accent-cyan);

            transform: scaleX(0);

            transform-origin: center;

            transition: transform 0.4s var(--ease-glide);

        }



        .nav-links a:hover, 

        .nav-links a.active { 

            color: var(--text-primary); 

        }



        .nav-links a:hover::after, 

        .nav-links a.active::after { 

            transform: scaleX(1); 

        }



        .sys-telemetry {

            font-family: 'Fira Code', monospace;

            font-size: 0.7rem;

            color: #10b981;

            background: rgba(16, 185, 129, 0.04);

            border: 1px solid rgba(16, 185, 129, 0.15);

            padding: 0.35rem 0.75rem;

            border-radius: 8px;

            display: flex;

            align-items: center;

            gap: 8px;

        }



        .sys-telemetry .dot {

            width: 5px;

            height: 5px;

            border-radius: 50%;

            background-color: #10b981;

            box-shadow: 0 0 6px #10b981;

            animation: pulseSoft 2s infinite;

        }



        /* Hamburger Menu Icon */

        .menu-toggle {

            display: none;

            background: transparent;

            border: none;

            color: var(--text-primary);

            font-size: 1.2rem;

            cursor: pointer;

            z-index: 101;

            padding: 0.25rem;

        }



        #mobile-menu {

            position: fixed;

            top: 0; left: 0;

            width: 100vw; height: 100vh;

            background: rgba(3, 3, 6, 0.98);

            backdrop-filter: blur(20px);

            z-index: 99;

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            gap: 2rem;

            opacity: 0;

            pointer-events: none;

            transition: opacity 0.5s var(--ease-glide);

        }



        #mobile-menu.active {

            opacity: 1;

            pointer-events: auto;

        }



        #mobile-menu a {

            font-family: 'Outfit', sans-serif;

            font-size: 1.8rem;

            font-weight: 500;

            color: var(--text-muted);

            text-decoration: none;

            transition: color 0.3s;

        }



        #mobile-menu a:hover,

        #mobile-menu a.active {

            color: var(--accent-cyan);

        }



        #app-root { 

            max-width: 1140px; 

            margin: 0 auto; 

            padding: 16vh 4vw 10vh; 

            min-height: 100vh; 

            transition: opacity 0.4s, transform 0.4s var(--ease-glide); 

            will-change: opacity, transform;

        }



        #app-root.page-fade { 

            opacity: 0; 

            transform: translateY(12px); 

        }



        /* ==========================================

           4. BENTO DASHBOARD COMPONENT (HOME)

           ========================================== */

        .bento-grid {

            display: grid;

            grid-template-columns: repeat(12, 1fr);

            gap: 1.5rem;

            margin-top: 1rem;

        }



        .bento-card {

            border-radius: 16px;

            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);

        }



        /* Spacious single column hero design */

        .bento-card.hero-card {

            grid-column: span 8;

            display: flex;

            flex-direction: column;

            justify-content: space-between;

            gap: 1.5rem;

        }



        .hero-stats-row {

            display: grid;

            grid-template-columns: repeat(3, 1fr);

            gap: 1rem;

            margin: 1.25rem 0;

        }

        @media (max-width: 768px) {

            .hero-stats-row {

                grid-template-columns: 1fr;

                gap: 0.75rem;

            }

        }



        .stat-card {

            background: rgba(255, 255, 255, 0.015);

            border: 1px solid rgba(255, 255, 255, 0.04);

            padding: 1rem;

            border-radius: 12px;

            display: flex;

            flex-direction: column;

            justify-content: flex-start;

            gap: 0.4rem;

            transition: all 0.3s var(--ease-glide);

        }

        .stat-card:hover {

            border-color: rgba(14, 165, 233, 0.25) !important;

            background: rgba(14, 165, 233, 0.03) !important;

            transform: translateY(-3px);

            box-shadow: 0 8px 24px rgba(14, 165, 233, 0.08);

        }

        

        .stat-card-label {

            font-family: 'Fira Code', monospace;

            font-size: 0.68rem;

            color: var(--accent-cyan);

            text-transform: uppercase;

            letter-spacing: 0.05em;

        }

        

        .stat-card-title {

            font-size: 1.02rem;

            font-weight: 700;

            color: var(--text-primary);

            letter-spacing: -0.01em;

            margin: 0;

        }

        

        .stat-card-desc {

            font-size: 0.73rem;

            color: var(--text-muted);

            margin: 0;

            line-height: 1.35;

        }



        @media (max-width: 600px) {

            .hero-competency-grid {

                grid-template-columns: 1fr !important;

                gap: 1rem !important;

            }

        }



        .bento-card.matrix-card {

            grid-column: span 4;

            display: flex;

            flex-direction: column;

        }



        .bento-card.philosophy-card {

            grid-column: span 5;

            display: flex;

            flex-direction: column;

            justify-content: space-between;

        }



        .bento-card.credentials-card {

            grid-column: span 7;

        }



        .bento-avatar-wrapper {

            display: flex;

            align-items: center;

            gap: 1.25rem;

            margin-bottom: 1rem;

            flex-wrap: wrap;

        }



        .photo-placeholder {

            width: 80px;

            height: 80px;

            border-radius: 50%;

            background: transparent;

            border: 2px solid rgba(14, 165, 233, 0.45);

            box-shadow: 0 0 15px var(--accent-cyan-glow);

            display: flex;

            align-items: center;

            justify-content: center;

            overflow: hidden;

            transition: transform 0.4s var(--ease-glide), border-color 0.4s var(--ease-glide);

        }



        .photo-placeholder:hover {

            transform: scale(1.05);

            border-color: var(--accent);

        }



        .hero-title-group h1 {

            font-size: clamp(1.6rem, 4vw, 2rem);

            margin: 0;

            font-weight: 700;

            letter-spacing: -0.03em;

        }



        .hero-text {

            font-size: 0.95rem;

            line-height: 1.6;

            margin: 1rem 0;

        }



        /* Domain Matrix Card with Tabs */

        .matrix-tabs {

            display: flex;

            border-bottom: 1px solid rgba(255, 255, 255, 0.05);

            background: rgba(255, 255, 255, 0.01);

            border-radius: 8px 8px 0 0;

            margin: -1rem -1rem 1rem -1rem;

        }



        .matrix-tab-btn {

            flex: 1;

            padding: 0.75rem 0;

            background: transparent;

            border: none;

            color: var(--text-muted);

            font-family: 'Fira Code', monospace;

            font-size: 0.72rem;

            font-weight: 600;

            cursor: pointer;

            transition: all 0.25s;

            text-align: center;

            border-bottom: 2px solid transparent;

        }



        .matrix-tab-btn:hover {

            color: var(--text-primary);

        }



        .matrix-tab-btn.active {

            color: var(--accent-cyan);

            border-bottom-color: var(--accent-cyan);

            background: rgba(14, 165, 233, 0.02);

        }



        .matrix-content-panel {

            flex-grow: 1;

            display: flex;

            flex-direction: column;

            justify-content: space-between;

            animation: paneFade 0.4s var(--ease-glide) forwards;

        }



        @keyframes paneFade {

            from { opacity: 0; transform: translateY(6px); }

            to { opacity: 1; transform: translateY(0); }

        }



        .matrix-meta-row {

            margin-bottom: 0.85rem;

        }



        .matrix-meta-row:last-child {

            margin-bottom: 0;

        }



        .matrix-meta-row label {

            display: block;

            font-family: 'Fira Code', monospace;

            font-size: 0.65rem;

            color: var(--accent-cyan);

            text-transform: uppercase;

            letter-spacing: 0.05em;

            margin-bottom: 0.15rem;

        }



        .matrix-meta-row span {

            font-size: 0.9rem;

            color: var(--text-primary);

            font-weight: 500;

            line-height: 1.45;

            display: block;

        }



        .matrix-meta-row p {

            font-size: 0.85rem;

            color: var(--text-muted);

            line-height: 1.45;

            margin-top: 0.15rem;

        }



        /* Philosophy list */

        .philosophy-item {

            margin-bottom: 1rem;

        }

        .philosophy-item:last-child {

            margin-bottom: 0;

        }

        .philosophy-item h4 {

            font-size: 0.95rem;

            font-weight: 600;

            margin-bottom: 0.2rem;

            color: var(--text-primary);

        }

        .philosophy-item p {

            font-size: 0.85rem;

            line-height: 1.5;

            color: var(--text-muted);

        }



        /* Credentials list */

        .cred-list {

            display: flex;

            flex-direction: column;

            gap: 0.85rem;

            margin-top: 0.5rem;

        }



        .cred-item {

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 0.85rem 1.15rem;

            border-radius: 12px;

            border: 1px solid rgba(255, 255, 255, 0.02);

            background: rgba(255, 255, 255, 0.01);

            transition: all 0.3s;

        }



        .cred-item:hover {

            border-color: rgba(139, 92, 246, 0.2);

            background: rgba(139, 92, 246, 0.01);

        }



        .cred-info {

            display: flex;

            align-items: center;

            gap: 1rem;

        }



        .cred-icon {

            width: 36px;

            height: 36px;

            border-radius: 8px;

            background: rgba(139, 92, 246, 0.06);

            border: 1px solid rgba(139, 92, 246, 0.15);

            color: var(--accent);

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 0.95rem;

        }



        .cred-details h4 {

            font-size: 0.9rem;

            font-weight: 600;

            margin: 0;

        }



        .cred-details p {

            font-size: 0.72rem;

            color: var(--text-muted);

            font-family: 'Fira Code', monospace;

            margin: 0.1rem 0 0;

        }



        .cred-link {

            color: var(--accent-cyan);

            text-decoration: none;

            font-size: 0.8rem;

            transition: color 0.3s;

            display: flex;

            align-items: center;

            gap: 5px;

        }



        .cred-link:hover {

            color: var(--text-primary);

        }



        /* ==========================================

           5. TIMELINE DESIGN (EXPERIENCE)

           ========================================== */

        .timeline-container {

            position: relative;

            max-width: 850px;

            margin: 1.5rem auto 0;

            padding-left: 2.25rem;

        }



        .timeline-line {

            position: absolute;

            left: 4px; top: 8px;

            width: 1px; height: calc(100% - 24px);

            background: linear-gradient(to bottom, var(--accent), var(--accent-cyan), transparent);

        }



        .timeline-node {

            position: relative;

            padding-bottom: 3rem;

        }



        .timeline-node:last-child {

            padding-bottom: 0;

        }



        .timeline-indicator {

            position: absolute;

            left: calc(-2.25rem - 3px);

            top: 7px;

            width: 15px;

            height: 15px;

            border-radius: 50%;

            background: var(--bg);

            border: 1px solid var(--accent);

            z-index: 2;

            display: flex;

            align-items: center;

            justify-content: center;

        }



        .timeline-indicator::before {

            content: '';

            width: 5px;

            height: 5px;

            border-radius: 50%;

            background: var(--accent-cyan);

        }



        .timeline-node:nth-child(even) .timeline-indicator {

            border-color: var(--accent-cyan);

        }



        .timeline-card {

            border-radius: 16px;

        }



        .timeline-date-badge {

            display: inline-block;

            padding: 0.25rem 0.65rem;

            border-radius: 6px;

            background: rgba(255, 255, 255, 0.02);

            border: 1px solid rgba(255, 255, 255, 0.04);

            font-family: 'Fira Code', monospace;

            font-size: 0.72rem;

            color: var(--accent-gold);

            margin-bottom: 0.75rem;

        }



        .timeline-card h3 {

            font-size: 1.35rem;

            margin-bottom: 0.25rem;

        }



        .timeline-org {

            font-size: 0.95rem;

            color: var(--text-primary);

            font-weight: 500;

            margin-bottom: 0.5rem;

            display: flex;

            align-items: center;

            gap: 6px;

        }



        .timeline-org::before {

            content: '@';

            color: var(--accent);

            font-weight: 600;

        }



        .timeline-link {

            color: var(--accent-cyan);

            text-decoration: none;

            transition: color 0.3s ease;

        }



        .timeline-link:hover {

            color: var(--text-primary);

        }



        /* Unified domain indicators */

        .timeline-domain-indicator {

            display: inline-block;

            font-family: 'Fira Code', monospace;

            font-size: 0.7rem;

            padding: 0.2rem 0.55rem;

            border-radius: 4px;

            margin-bottom: 1rem;

            font-weight: 500;

            text-transform: uppercase;

        }



        .timeline-domain-indicator.d-web3 { background: rgba(139, 92, 246, 0.08); color: var(--accent); border: 1px solid rgba(139, 92, 246, 0.15); }

        .timeline-domain-indicator.d-iot { background: rgba(14, 165, 233, 0.08); color: var(--accent-cyan); border: 1px solid rgba(14, 165, 233, 0.15); }

        .timeline-domain-indicator.d-web { background: rgba(200, 157, 83, 0.08); color: var(--accent-gold); border: 1px solid rgba(200, 157, 83, 0.15); }



        .timeline-meta-box {

            display: grid;

            grid-template-columns: repeat(2, 1fr);

            gap: 0.85rem;

            margin: 0.75rem 0 1.25rem;

            padding: 0.85rem;

            background: rgba(255, 255, 255, 0.015);

            border: 1px solid rgba(255, 255, 255, 0.03);

            border-radius: 10px;

        }



        .timeline-meta-col label {

            display: block;

            font-family: 'Fira Code', monospace;

            font-size: 0.65rem;

            color: var(--accent-cyan);

            text-transform: uppercase;

            letter-spacing: 0.05em;

        }



        .timeline-meta-col span {

            font-size: 0.84rem;

            color: var(--text-primary);

        }



        .timeline-bullets {

            padding-left: 1.15rem;

            color: var(--text-muted);

            margin-bottom: 1.15rem;

        }



        .timeline-bullets li {

            margin-bottom: 0.55rem;

            line-height: 1.55;

            font-size: 0.94rem;

        }



        .timeline-bullets li::marker {

            color: var(--accent-cyan);

        }



        /* ==========================================

           6. ARCHIVES CARD DESIGN (PROJECTS)

           ========================================== */

        .archive-filters {

            display: flex;

            gap: 0.75rem;

            margin-bottom: 2rem;

            flex-wrap: wrap;

            border-bottom: 1px solid rgba(255, 255, 255, 0.05);

            padding-bottom: 1rem;

        }



        .archive-filter-btn {

            background: transparent;

            border: 1px solid rgba(255, 255, 255, 0.05);

            color: var(--text-muted);

            padding: 0.45rem 1.15rem;

            border-radius: 8px;

            font-family: 'Fira Code', monospace;

            font-size: 0.74rem;

            cursor: pointer;

            transition: all 0.3s var(--ease-glide);

        }



        .archive-filter-btn:hover {

            color: var(--text-primary);

            border-color: rgba(255, 255, 255, 0.2);

        }



        .archive-filter-btn.active {

            color: var(--accent-cyan);

            border-color: var(--accent-cyan);

            background: rgba(14, 165, 233, 0.05);

            box-shadow: 0 0 15px rgba(14, 165, 233, 0.15);

        }



        .archive-grid {

            display: grid;

            grid-template-columns: repeat(2, 1fr);

            gap: 1.5rem;

            margin-top: 1rem;

        }



        .archive-card {

            border-radius: 16px;

            display: flex;

            flex-direction: column;

            justify-content: space-between;

            min-height: 340px;

            transition: transform 0.5s var(--ease-glide), opacity 0.5s var(--ease-glide);

        }



        .archive-header {

            display: flex;

            justify-content: space-between;

            align-items: flex-start;

            margin-bottom: 1rem;

        }



        .archive-badge {

            font-family: 'Fira Code', monospace;

            font-size: 0.65rem;

            padding: 0.25rem 0.65rem;

            border-radius: 5px;

            text-transform: uppercase;

            letter-spacing: 0.05em;

            background: rgba(255, 255, 255, 0.02);

            color: var(--text-muted);

            border: 1px solid rgba(255, 255, 255, 0.04);

        }



        .archive-badge.active {

            background: rgba(14, 165, 233, 0.06);

            color: var(--accent-cyan);

            border-color: rgba(14, 165, 233, 0.15);

        }



        .archive-badge.web3 {

            background: rgba(139, 92, 246, 0.06);

            color: var(--accent);

            border-color: rgba(139, 92, 246, 0.15);

        }



        .archive-icon {

            font-size: 1.75rem;

            color: var(--accent-cyan);

            opacity: 0.7;

        }



        .archive-card h3 {

            font-size: 1.35rem;

            margin-bottom: 0.65rem;

        }



        .archive-card p {

            font-size: 0.92rem;

            line-height: 1.55;

            margin-bottom: 1.15rem;

        }



        .archive-meta-block {

            margin: 0.5rem 0 1rem 0;

            padding: 0.85rem;

            background: rgba(255, 255, 255, 0.01);

            border: 1px solid rgba(255, 255, 255, 0.02);

            border-radius: 8px;

            display: flex;

            flex-direction: column;

            gap: 0.45rem;

        }



        .archive-meta-row {

            display: flex;

            justify-content: space-between;

            font-size: 0.78rem;

        }



        .archive-meta-row label {

            font-family: 'Fira Code', monospace;

            color: var(--text-muted);

        }



        .archive-meta-row span {

            color: var(--text-primary);

            font-weight: 500;

        }



        .archive-footer {

            margin-top: auto;

            border-top: 1px dashed rgba(255, 255, 255, 0.05);

            padding-top: 1rem;

            display: flex;

            justify-content: space-between;

            align-items: center;

        }



        /* ==========================================

           7. CINEMATIC JOURNEY SCROLLYTELLING VIEW

           ========================================== */

        #cinematic-engine {

            display: none;

            width: 100%;

            background: #020204;

            transition: background 1s var(--ease-glide);

        }



        .story-shell {

            display: grid;

            grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);

            gap: 2.5rem;

            min-height: 100vh;

            padding: 12vh 4vw 10vh;

        }



        .story-rail {

            position: sticky;

            top: 12vh;

            align-self: start;

            padding: 2.2rem 2rem;

            border-radius: 16px;

            border: 1px solid rgba(255, 255, 255, 0.05);

            background: linear-gradient(180deg, rgba(12, 12, 20, 0.98) 0%, rgba(8, 8, 14, 0.98) 100%);

            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);

        }



        .story-rail h2 {

            font-size: clamp(1.8rem, 3vw, 2.3rem);

            margin-bottom: 0.75rem;

            font-weight: 700;

        }



        .story-rail p { font-size: 0.92rem; }



        .story-progress { margin-top: 1.75rem; }



        .story-progress-bar {

            width: 100%;

            height: 2px;

            border-radius: 99px;

            background: rgba(255, 255, 255, 0.04);

            overflow: hidden;

            position: relative;

        }



        .story-progress-bar span {

            display: block;

            width: 100%; /* Default to full width so scaleX controls percentage */

            height: 100%;

            background: linear-gradient(90deg, var(--accent), var(--accent-cyan));

            transform: scaleX(0); /* GPU scale tracking starting at 0 */

            transform-origin: left center;

            will-change: transform;

        }



        .story-progress-label {

            margin-top: 0.75rem;

            color: var(--text-muted);

            font-family: 'Fira Code', monospace;

            font-size: 0.72rem;

            letter-spacing: 0.05em;

            text-transform: uppercase;

            display: flex;

            justify-content: space-between;

        }



        .story-list { display: grid; gap: 2.5rem; }



        .story-container {

            height: 160vh; /* Increased from 120vh for perfect cinematic pinning hang time */

            position: relative;

            border-radius: 20px;

        }



        .story-sticky {

            position: sticky;

            top: 12vh;

            min-height: 72vh;

            width: 100%;

            padding: 2.5rem;

            border-radius: 20px;

            border: 1px solid rgba(255, 255, 255, 0.04);

            background: linear-gradient(135deg, rgba(8, 8, 14, 0.98) 0%, rgba(13, 13, 22, 0.98) 100%);

            overflow: hidden;

            isolation: isolate;

            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);

            display: flex;

            align-items: center;

        }



        .story-stage {

            position: relative;

            z-index: 1;

            display: grid;

            grid-template-columns: 1.15fr 0.85fr;

            gap: 2rem;

            align-items: center;

            width: 100%;

        }



        /* Continuous breathing background nebulas inside each chapter */

        .story-nebula {

            position: absolute;

            top: -30%;

            left: -20%;

            width: 140%;

            height: 160%;

            pointer-events: none;

            z-index: -1;

            filter: blur(40px); /* Reduced blur to avoid heavy pixel shading passes */

            opacity: 0;

            transform: scale(0.9) translateZ(0); /* Promote to hardware GPU layers */

            transition: opacity 1s var(--ease-glide), transform 1.2s var(--ease-glide);

            will-change: transform, opacity; /* Direct compiler hint for animation layer promo */

        }



        .story-sticky.is-active .story-nebula {

            opacity: 0.18;

            transform: scale(1.05);

        }



        .n-violet { background: radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, transparent 60%); }

        .n-cyan { background: radial-gradient(circle, rgba(14, 165, 233, 0.25) 0%, transparent 60%); }

        .n-gold { background: radial-gradient(circle, rgba(200, 157, 83, 0.22) 0%, transparent 60%); }

        .n-emerald { background: radial-gradient(circle, rgba(16, 185, 129, 0.22) 0%, transparent 60%); }



        /* Typography mask reveals */

        .reveal-mask {

            overflow: hidden;

            display: block;

            position: relative;

        }



        .reveal-text {

            display: block;

            transform: translateY(100%);

            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);

        }



        .story-sticky.is-active .reveal-text {

            transform: translateY(0);

        }



        .story-copy-reveal {

            opacity: 0;

            transform: translateY(15px);

            transition: opacity 1s var(--ease-glide), transform 1s var(--ease-glide);

            width: 100%;

        }



        .story-sticky.is-active .story-copy-reveal {

            opacity: 1;

            transform: translateY(0);

        }



        /* High-end cascading visual reveal for content blocks inside active chapter card */

        .story-sticky .scene-flag,

        .story-sticky .story-kicker,

        .story-sticky .reveal-mask,

        .story-sticky .story-subtitle,

        .story-sticky .story-meta-grid {

            opacity: 0;

            transform: translateY(12px);

            transition: opacity 0.9s var(--ease-glide), transform 0.9s var(--ease-glide);

        }



        .story-sticky.is-active .scene-flag {

            opacity: 0.6;

            transform: translateY(0);

            transition-delay: 0.05s;

        }



        .story-sticky.is-active .story-kicker {

            opacity: 1;

            transform: translateY(0);

            transition-delay: 0.12s;

        }



        .story-sticky.is-active .reveal-mask {

            opacity: 1;

            transform: translateY(0);

            transition-delay: 0.22s;

        }



        .story-sticky.is-active .story-subtitle {

            opacity: 1;

            transform: translateY(0);

            transition-delay: 0.32s;

        }



        .story-sticky.is-active .story-meta-grid {

            opacity: 1;

            transform: translateY(0);

            transition-delay: 0.42s;

        }



        .story-card-reveal {

            opacity: 0;

            transform: scale(0.96) translateY(20px);

            transition: opacity 1.1s var(--ease-glide) 0.3s, transform 1.1s var(--ease-glide) 0.3s;

            width: 100%;

        }



        .story-sticky.is-active .story-card-reveal {

            opacity: 1;

            transform: scale(1) translateY(0);

        }



        .story-copy {

            width: 100%;

            will-change: transform;

        }



        .story-card {

            will-change: transform;

        }



        .story-kicker {

            display: inline-flex;

            align-items: center;

            gap: 0.5rem;

            color: var(--accent-cyan);

            font-family: 'Fira Code', monospace;

            text-transform: uppercase;

            letter-spacing: 0.05em;

            font-size: 0.72rem;

            margin-bottom: 1rem;

        }



        .story-kicker::before {

            content: '';

            width: 16px;

            height: 1px;

            background: linear-gradient(90deg, transparent, var(--accent-cyan));

        }



        .story-title {

            font-size: clamp(2rem, 3.5vw, 3rem);

            line-height: 1.1;

            letter-spacing: -0.03em;

            margin-bottom: 1.15rem;

            font-weight: 700;

        }



        .story-title .accent { 

            color: var(--accent); 

        }



        .story-subtitle {

            font-size: 1.025rem;

            max-width: 520px;

            margin-bottom: 1.5rem;

            line-height: 1.6;

        }



        .story-meta-grid {

            display: grid;

            grid-template-columns: repeat(2, 1fr);

            gap: 1rem;

            margin-top: 1.25rem;

        }



        .story-meta {

            padding: 1rem;

            border-radius: 10px;

            border: 1px solid rgba(255, 255, 255, 0.02);

            background: rgba(255, 255, 255, 0.01);

        }



        .story-meta strong {

            display: block;

            color: var(--text-primary);

            margin-bottom: 0.25rem;

            font-size: 0.88rem;

            font-family: 'Outfit', sans-serif;

        }



        .story-meta span {

            color: var(--text-muted);

            font-size: 0.84rem;

            line-height: 1.45;

        }



        .story-card {

            justify-self: end;

            width: 100%;

            max-width: 340px;

            padding: 1.75rem;

            border-radius: 16px;

            border: 1px solid rgba(255, 255, 255, 0.04);

            background: rgba(5, 5, 8, 0.8);

            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);

        }



        .story-card .section-label { margin-bottom: 0.75rem; }



        .story-card p {

            font-size: 0.9rem;

            line-height: 1.5;

        }



        .story-card ul {

            color: var(--text-muted);

            padding-left: 1.15rem;

            margin: 1rem 0;

        }



        .story-card li { margin-bottom: 0.45rem; font-size: 0.85rem; }

        .story-card li::marker { color: var(--accent); }



        .story-quote {

            margin-top: 1.25rem;

            padding-top: 1rem;

            border-top: 1px solid rgba(255, 255, 255, 0.04);

            color: var(--accent-gold);

            font-style: italic;

            font-size: 0.9rem;

            line-height: 1.5;

        }



        .scene-flag {

            display: inline-flex;

            align-items: center;

            gap: 0.45rem;

            margin-bottom: 1.25rem;

            color: var(--text-muted);

            font-size: 0.74rem;

            font-family: 'Fira Code', monospace;

            letter-spacing: 0.05em;

            text-transform: uppercase;

        }



        .scene-flag::before {

            content: '';

            width: 8px;

            height: 8px;

            border-radius: 50%;

            background: var(--accent);

            box-shadow: 0 0 10px var(--accent);

        }



        /* Breathing scroll indicator guide */

        .scroll-explore {

            position: fixed;

            bottom: 2.5rem;

            right: 4vw;

            z-index: 100;

            display: none;

            flex-direction: column;

            align-items: center;

            gap: 0.5rem;

            opacity: 0.8;

            transition: opacity 0.5s;

            animation: pulseSoft 2.5s infinite;

        }



        .scroll-explore .mouse-icon {

            width: 20px;

            height: 32px;

            border: 1.5px solid var(--text-muted);

            border-radius: 99px;

            display: flex;

            justify-content: center;

            padding-top: 6px;

        }



        .scroll-explore .wheel {

            width: 3px;

            height: 6px;

            background-color: var(--accent-cyan);

            border-radius: 99px;

            animation: wheelScroll 1.8s infinite;

        }



        @keyframes wheelScroll {

            0% { transform: translateY(0); opacity: 0; }

            30% { opacity: 1; }

            80% { transform: translateY(8px); opacity: 0; }

            100% { opacity: 0; }

        }



        #exit-journey {

            position: fixed; 

            top: 2rem; 

            right: 4vw; 

            z-index: 1001; 

            display: none;

            background: rgba(3, 3, 6, 0.85); 

            border: 1px solid var(--accent-cyan); 

            color: var(--text-primary);

            padding: 0.5rem 1.15rem; 

            border-radius: 99px; 

            font-family: 'Fira Code', monospace; 

            font-size: 0.74rem;

            letter-spacing: 0.03em;

            cursor: pointer;

            backdrop-filter: blur(8px);

            -webkit-backdrop-filter: blur(8px);

            transition: all 0.3s var(--ease-glide);

        }



        #exit-journey:hover { 

            background: rgba(14, 165, 233, 0.1);

            transform: translateY(-1px); 

        }



        /* ==========================================

           8. PORTABLE A4 PRINT STYLES (RESUME VIEW)

           ========================================== */

        .resume-view {

            max-width: 900px;

            margin: 0 auto;

        }



        .resume-layout-grid {

            display: grid;

            grid-template-columns: 280px 1fr;

            gap: 2.25rem;

            margin-top: 1.5rem;

        }

        @media (max-width: 820px) {

            .resume-layout-grid {

                grid-template-columns: 1fr;

                gap: 1.5rem;

            }

        }



        .resume-header {

            display: flex;

            justify-content: space-between;

            align-items: center;

            gap: 2rem;

            border-bottom: 1px solid var(--border);

            padding-bottom: 1.75rem;

            margin-bottom: 2rem;

            flex-wrap: wrap;

        }



        .resume-personal {

            flex-grow: 1;

        }



        .resume-personal h1 {

            font-size: 2.5rem;

            margin-bottom: 0.25rem;

        }



        .resume-contact-bar {

            display: flex;

            flex-wrap: wrap;

            gap: 1.25rem;

            margin-top: 0.75rem;

            color: var(--text-muted);

            font-family: 'Fira Code', monospace;

            font-size: 0.74rem;

        }



        .resume-contact-bar a {

            color: var(--accent-cyan);

            text-decoration: none;

            transition: color 0.3s;

        }



        .resume-contact-bar a:hover {

            color: var(--text-primary);

        }



        .resume-section {

            margin-bottom: 2.25rem;

        }

        

        /* Expand vertical margins inside narrow sidebar column to balance content heights and fill empty lower area */

        .resume-sidebar-col .resume-section {

            margin-bottom: 2.85rem;

        }



        .resume-section h2 {

            font-size: 1.45rem;

            border-bottom: 1px dashed var(--border);

            padding-bottom: 0.45rem;

            margin-bottom: 1.25rem;

            text-transform: uppercase;

            letter-spacing: -0.01em;

            color: var(--accent-cyan);

        }



        .resume-timeline-item {

            margin-bottom: 1.5rem;

        }



        .resume-timeline-item:last-child {

            margin-bottom: 0;

        }



        .resume-timeline-header {

            display: flex;

            justify-content: space-between;

            align-items: flex-start;

            margin-bottom: 0.35rem;

            flex-wrap: wrap;

            gap: 0.5rem;

        }



        .resume-timeline-header h3 {

            font-size: 1.1rem;

            margin: 0;

        }



        .resume-timeline-date {

            font-family: 'Fira Code', monospace;

            font-size: 0.74rem;

            color: var(--accent-gold);

            font-weight: 500;

        }



        .resume-timeline-org {

            font-size: 0.9rem;

            color: var(--text-muted);

            margin-bottom: 0.55rem;

        }



        .resume-skills-block {

            display: flex;

            flex-direction: column;

            gap: 0.85rem;

        }



        .resume-skill-row {

            display: grid;

            grid-template-columns: 180px 1fr;

            gap: 1.25rem;

            align-items: center;

        }



        .resume-skill-row strong {

            font-size: 0.8rem;

            font-family: 'Fira Code', monospace;

            color: var(--text-primary);

            text-transform: uppercase;

            letter-spacing: 0.05em;

        }



        /* Printing and Page Overrides */

        @page { 

            size: A4; 

            margin: 15mm; 

        }



        @media print {

            * {

                background: transparent !important;

                color: #000000 !important;

                text-shadow: none !important;

                box-shadow: none !important;

                filter: none !important;

                -webkit-filter: none !important;

            }

            html, body {

                background: #ffffff !important;

                color: #000000 !important;

                font-size: 11pt !important; /* Restored to comfortable standard size */

                line-height: 1.5 !important;  /* Fully cover A4 height elegantly */

            }

            #nav-main, 

            #exit-journey, 

            #cinematic-engine, 

            .ambient-glow, 

            #custom-cursor,

            #void-canvas, 

            .epic-btn,

            #bg-backdrop,

            #mobile-menu,

            .no-print,

            body::before { 

                display: none !important; 

            }

            #app-root { 

                padding: 0 !important; 

                margin: 0 !important;

                max-width: 100% !important;

            }

            .glass-card {

                border: none !important;

                padding: 0 !important;

                background: transparent !important;

                backdrop-filter: none !important;

                -webkit-backdrop-filter: none !important;

            }

            .resume-header {

                padding-bottom: 1.25rem !important; /* Balanced gap after contact line */

                margin-bottom: 1.5rem !important;

                border-bottom: 1.2px solid #000000 !important;

            }

            .resume-personal h1 {

                font-size: 2.2rem !important;

                margin-bottom: 0.25rem !important;

            }

            .resume-personal p {

                font-size: 1rem !important;

                margin-bottom: 0.25rem !important;

            }

            .resume-contact-bar {

                margin-top: 0.5rem !important;

                gap: 1rem !important;

            }

            .resume-section {

                margin-bottom: 1rem !important;

            }

            .resume-section h2 {

                border-bottom: 1.2px solid #000000 !important;

                color: #000000 !important;

                margin-top: 1.2rem !important;

                margin-bottom: 0.55rem !important;

                padding-bottom: 0.18rem !important;

                font-size: 1.15rem !important;

            }

            .resume-timeline-item {

                margin-bottom: 0.75rem !important;

            }

            .resume-timeline-header h3 {

                font-size: 0.95rem !important;

            }

            .resume-timeline-org {

                font-size: 0.88rem !important;

            }

            .resume-timeline-date {

                color: #000000 !important;

                font-size: 0.82rem !important;

            }

            ul {

                margin: 4px 0 4px 14px !important;

                gap: 0.3rem !important;

            }

            li {

                margin-bottom: 2px !important;

                font-size: 0.88rem !important;

            }

            p {

                margin-top: 2px !important;

                margin-bottom: 2px !important;

                font-size: 0.88rem !important;

            }

            .tag-group {

                margin-top: 0.35rem !important;

                gap: 0.45rem !important;

            }

            .tag {

                border: 1px solid #000000 !important;

                color: #000000 !important;

                padding: 2px 6px !important;

                font-size: 0.78rem !important;

                margin-bottom: 3px !important;

            }

            .resume-contact-bar a {

                color: #000000 !important;

                text-decoration: underline !important;

            }

            .resume-layout-grid {

                display: grid !important;

                grid-template-columns: 240px 1fr !important; /* Balanced column layout */

                gap: 1.75rem !important;

            }

        }



        /* ==========================================

           9. RESPONSIVE BREAKPOINTS & MICRO-ANIMATIONS

           ========================================== */

        @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

        @keyframes floatGlow { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(0, 20px, 0) scale(1.03); } }

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



        /* Responsive Breakpoints */

        @media (max-width: 1024px) {

            .bento-grid { grid-template-columns: 1fr; }

            .bento-card.hero-card,

            .bento-card.matrix-card,

            .bento-card.philosophy-card,

            .bento-card.credentials-card {

                grid-column: span 12;

            }

            .archive-grid { grid-template-columns: 1fr; }

            .story-shell { grid-template-columns: 1fr; padding-top: 10vh; }

            .story-rail { position: relative; top: 0; width: 100%; }

            .story-stage { grid-template-columns: 1fr; gap: 2rem; }

            .story-card { justify-self: stretch; max-width: 100%; }

            .story-container { height: 120vh; /* Set comfortable tablet sticky pinning range */ }

        }



        @media (max-width: 820px) {

            * { cursor: auto !important; }

            #custom-cursor { display: none !important; }

            #nav-main { padding: 1rem 1.5rem; }

            .nav-links { display: none; }

            .menu-toggle { display: block; }

            #app-root { padding: 14vh 1rem 8vh; }

            .glass-card { padding: 1.5rem; }

            .resume-skill-row { grid-template-columns: 1fr; gap: 0.4rem; }

        }



        /* Flawless Mobile Touch-Optimized Flow (<= 768px viewports) */

        @media (max-width: 768px) {

            .story-shell {

                padding: 10vh 1rem 8vh !important;

                gap: 1.5rem !important;

            }

            .story-rail {

                padding: 1.5rem !important;

                margin-bottom: 1rem !important;

            }

            .story-progress {

                /* Fixed sleek glowing line indicator at the top of viewport */

                position: fixed !important;

                top: 0 !important;

                left: 0 !important;

                width: 100% !important;

                z-index: 10000 !important;

                margin-top: 0 !important;

                padding: 0 !important;

                display: block !important;

            }

            .story-progress-bar {

                height: 3px !important;

                border-radius: 0 !important;

                background: rgba(255, 255, 255, 0.05) !important;

                width: 100% !important;

            }

            .story-progress-label {

                display: none !important; /* Hide label texts to keep bar a minimalist fixed layout indicator */

            }

            .story-container {

                height: auto !important; /* Disable massive vertical scroll spacers */

                margin-bottom: 1.5rem !important;

            }

            .story-sticky {

                position: relative !important;

                top: 0 !important;

                min-height: auto !important;

                height: auto !important;

                padding: 1.75rem 1.5rem !important;

                border-radius: 16px !important;

                background: linear-gradient(135deg, rgba(8, 8, 14, 0.95) 0%, rgba(13, 13, 22, 0.95) 100%) !important;

                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;

                overflow: visible !important;

            }

            .story-sticky .story-nebula {

                opacity: 0.12 !important;

                transform: scale(1) !important;

                filter: blur(50px) !important;

            }

            .story-stage {

                grid-template-columns: 1fr !important;

                gap: 1.5rem !important;

            }

            /* Reveal everything statically on mobile touch screens for zero-latency reading */

            .reveal-text,

            .story-copy-reveal,

            .story-card-reveal,

            .story-sticky .scene-flag,

            .story-sticky .story-kicker,

            .story-sticky .reveal-mask,

            .story-sticky .story-subtitle,

            .story-sticky .story-meta-grid {

                opacity: 1 !important;

                transform: none !important;

                transition: none !important;

            }

            .story-sticky .scene-flag {

                opacity: 0.6 !important;

            }

            .story-card {

                padding: 1.25rem !important;

                border-radius: 12px !important;

                background: rgba(255, 255, 255, 0.02) !important;

                border: 1px solid rgba(255, 255, 255, 0.03) !important;

            }

        }



        /* Clean vertical spacing and stacking on mobile resume header (<= 600px viewports) */

        @media (max-width: 600px) {

            .resume-header {

                flex-direction: column !important;

                align-items: flex-start !important;

                gap: 1.25rem !important;

                padding-bottom: 1.25rem !important;

                margin-bottom: 1.5rem !important;

            }

            .resume-personal h1 {

                font-size: 1.95rem !important;

                letter-spacing: -0.02em !important;

            }

            .resume-contact-bar {

                flex-direction: column !important;

                gap: 0.6rem !important;

            }

            .resume-contact-bar span {

                font-size: 0.82rem !important;

            }

        }



        /* Tiny Screens adjustments (<= 480px viewports) */

        @media (max-width: 480px) {

            .glass-card { 

                padding: 1.25rem 1rem !important; 

            }

            .matrix-tabs {

                margin: -1.25rem -1rem 1rem -1rem !important;

            }

            .matrix-tab-btn {

                font-size: 0.66rem !important;

                padding: 0.65rem 0.2rem !important;

            }

            .cred-item {

                flex-direction: column !important;

                align-items: flex-start !important;

                gap: 0.65rem !important;

                padding: 1rem !important;

            }

            .cred-info {

                gap: 0.75rem !important;

            }

            .archive-filters {

                gap: 0.5rem !important;

                margin-bottom: 1.5rem !important;

                padding-bottom: 0.75rem !important;

            }

            .archive-filter-btn {

                padding: 0.4rem 0.85rem !important;

                font-size: 0.68rem !important;

            }

        }



        /* --- Dynamic Mix-Blend Cursor --- */

        #custom-cursor { 

            position: fixed; 

            top: 0; left: 0; 

            width: 14px;

            height: 14px;

            background-color: #ffffff; 

            border-radius: 50%;

            pointer-events: none; 

            z-index: 99999; 

            transform: translate(-50%, -50%); 

            mix-blend-mode: difference;

            transition: 

                width 0.35s cubic-bezier(0.19, 1, 0.22, 1), 

                height 0.35s cubic-bezier(0.19, 1, 0.22, 1),

                background-color 0.35s cubic-bezier(0.19, 1, 0.22, 1);

            opacity: 0;

        }

        body.custom-cursor #custom-cursor {

            opacity: 1;

        }

        body.hovering-ring #custom-cursor { 

            width: 64px;

            height: 64px;

            background-color: #ffffff;

        }

        body.custom-cursor * { cursor: none !important; }

        

        /* Systems Monitor Simulation Widget Styling */

        .systems-monitor-card {

            background: rgba(10, 10, 15, 0.45);

            border: 1px solid rgba(255, 255, 255, 0.05);

            border-radius: 12px;

            padding: 1.15rem;

            margin: 1rem 0;

            display: flex;

            flex-direction: column;

            gap: 0.85rem;

            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);

            backdrop-filter: blur(8px);

            transition: border-color 0.3s var(--ease-glide), box-shadow 0.3s var(--ease-glide);

        }



        .systems-monitor-card:hover {

            border-color: rgba(14, 165, 233, 0.15);

            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6), 0 0 25px rgba(14, 165, 233, 0.04);

        }



        .monitor-header {

            display: flex;

            justify-content: space-between;

            align-items: center;

            border-bottom: 1px solid rgba(255, 255, 255, 0.04);

            padding-bottom: 0.75rem;

            flex-wrap: wrap;

            gap: 0.5rem;

        }



        .monitor-controls {

            display: flex;

            gap: 0.5rem;

        }



        .monitor-btn {

            background: rgba(255, 255, 255, 0.015);

            border: 1px solid rgba(255, 255, 255, 0.04);

            color: var(--text-muted);

            font-family: 'Fira Code', monospace;

            font-size: 0.7rem;

            padding: 0.35rem 0.75rem;

            border-radius: 6px;

            cursor: pointer;

            transition: all 0.25s var(--ease-glide);

        }



        .monitor-btn:hover {

            background: rgba(255, 255, 255, 0.04);

            color: var(--text-primary);

        }



        .monitor-btn.active {

            background: rgba(14, 165, 233, 0.08);

            border-color: rgba(14, 165, 233, 0.35);

            color: var(--accent-cyan);

            text-shadow: 0 0 8px var(--accent-cyan-glow);

        }



        .monitor-status {

            display: flex;

            align-items: center;

            gap: 0.35rem;

        }



        .green-pulsate {

            width: 7px;

            height: 7px;

            background-color: #10b981;

            border-radius: 50%;

            box-shadow: 0 0 8px #10b981;

            animation: pulse-glow 2s infinite ease-in-out;

        }



        @keyframes pulse-glow {

            0%, 100% { opacity: 0.5; box-shadow: 0 0 3px #10b981; }

            50% { opacity: 1; box-shadow: 0 0 10px #10b981; }

        }



        .monitor-screen {

            background: rgba(0, 0, 0, 0.45);

            border: 1px dashed rgba(255, 255, 255, 0.03);

            border-radius: 8px;

            padding: 1rem;

            min-height: 145px;

            display: flex;

            flex-direction: column;

            justify-content: center;

        }



        /* Solana Visualizer */

        .slots-visualizer {

            display: flex;

            align-items: center;

            gap: 0.75rem;

            margin-bottom: 0.75rem;

            flex-wrap: wrap;

        }



        .visualizer-label {

            font-size: 0.7rem;

            color: var(--accent-cyan);

            letter-spacing: 0.02em;

            text-transform: uppercase;

        }



        .slots-grid {

            display: flex;

            gap: 0.35rem;

        }



        .slot-block {

            width: 11px;

            height: 11px;

            background: rgba(255, 255, 255, 0.05);

            border: 1px solid rgba(255, 255, 255, 0.08);

            border-radius: 2px;

            transition: all 0.3s;

        }



        .slot-block.active {

            background: #0ea5e9;

            border-color: #38bdf8;

            box-shadow: 0 0 8px var(--accent-cyan-glow);

        }



        .slot-block.pulsating {

            animation: slot-pulse 1.2s infinite ease-in-out;

        }



        @keyframes slot-pulse {

            0%, 100% { transform: scale(1); opacity: 0.7; }

            50% { transform: scale(1.15); opacity: 1; background-color: #38bdf8; }

        }



        .console-logs {

            font-family: 'Fira Code', monospace;

            font-size: 0.7rem;

            color: var(--accent-cyan);

            display: flex;

            flex-direction: column;

            gap: 0.35rem;

            line-height: 1.45;

            max-height: 90px;

            overflow-y: hidden;

            text-align: left;

        }



        /* ESP32 Visualizer */

        .signals-visualizer {

            display: flex;

            gap: 1.5rem;

            margin-bottom: 0.75rem;

            flex-wrap: wrap;

        }



        .signal-metric {

            display: flex;

            align-items: center;

            gap: 0.45rem;

            font-size: 0.72rem;

        }



        .text-cyan { color: #22d3ee; text-shadow: 0 0 6px rgba(34, 211, 238, 0.3); }

        .text-purple { color: #a78bfa; text-shadow: 0 0 6px rgba(167, 139, 250, 0.3); }



        .pins-row {

            display: flex;

            gap: 0.35rem;

        }



        .pin {

            font-size: 0.62rem;

            padding: 1px 4px;

            border-radius: 3px;

            font-weight: 700;

            font-family: 'Fira Code', monospace;

        }



        .pin.green { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }

        .pin.red { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }



        /* Rust Visualizer */

        .threads-visualizer {

            display: grid;

            grid-template-columns: repeat(2, 1fr);

            gap: 0.65rem;

            margin-bottom: 0.75rem;

        }



        @media (max-width: 480px) {

            .threads-visualizer {

                grid-template-columns: 1fr;

            }

        }



        .thread-item {

            display: flex;

            align-items: center;

            gap: 0.5rem;

            font-size: 0.7rem;

            color: #fda4af;

        }



        .bar-container {

            flex: 1;

            height: 5px;

            background: rgba(255, 255, 255, 0.04);

            border-radius: 3px;

            overflow: hidden;

            border: 1px solid rgba(255, 255, 255, 0.02);

        }



        .bar-fill {

            height: 100%;

            border-radius: 3px;

            transition: width 0.8s ease-in-out;

        }



        .bar-fill.rust-fill {

            background: linear-gradient(90deg, #f43f5e, #fda4af);

            box-shadow: 0 0 6px rgba(244, 63, 94, 0.4);

        }



        ::view-transition-old(root),

        ::view-transition-new(root) {

            animation-duration: 0.3s;

            animation-timing-function: var(--ease-glide);

        }