you can just ask things

index.html

@@ -1015,6 +1015,1129 @@
             }
         }
 
+        /* ARCADE FIGHTING GAME SECTION */
+        .arcade {
+            padding: 4rem 2rem;
+            background: #0a0a0a;
+            position: relative;
+            overflow: hidden;
+            min-height: 100vh;
+        }
+
+        .arcade::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background:
+                repeating-linear-gradient(
+                    0deg,
+                    transparent,
+                    transparent 2px,
+                    rgba(0, 255, 255, 0.03) 2px,
+                    rgba(0, 255, 255, 0.03) 4px
+                );
+            pointer-events: none;
+            animation: scanlines 8s linear infinite;
+        }
+
+        @keyframes scanlines {
+            0% { transform: translateY(0); }
+            100% { transform: translateY(4px); }
+        }
+
+        .arcade-crt {
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.4) 100%);
+            pointer-events: none;
+        }
+
+        .arcade-grid {
+            position: absolute;
+            inset: 0;
+            background-image:
+                linear-gradient(rgba(255, 0, 255, 0.1) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
+            background-size: 50px 50px;
+            transform: perspective(500px) rotateX(60deg);
+            transform-origin: center top;
+            opacity: 0.5;
+        }
+
+        .arcade-content {
+            position: relative;
+            z-index: 1;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        /* Main title - arcade style */
+        .arcade-header {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+
+        .arcade-title {
+            font-family: 'Impact', 'Arial Black', sans-serif;
+            font-size: clamp(3rem, 12vw, 10rem);
+            font-weight: 900;
+            text-transform: uppercase;
+            letter-spacing: -0.02em;
+            line-height: 0.9;
+            background: linear-gradient(180deg,
+                #fff 0%,
+                #ff0 20%,
+                #f0f 40%,
+                #0ff 60%,
+                #0f0 80%,
+                #fff 100%
+            );
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            filter: drop-shadow(0 0 10px #ff0) drop-shadow(0 0 20px #f0f) drop-shadow(0 0 40px #0ff);
+            animation: glitch 3s infinite;
+            position: relative;
+        }
+
+        @keyframes glitch {
+            0%, 90%, 100% { transform: translate(0); }
+            91% { transform: translate(-2px, 1px); filter: drop-shadow(2px 0 #f00) drop-shadow(-2px 0 #0ff); }
+            92% { transform: translate(2px, -1px); }
+            93% { transform: translate(-1px, 2px); filter: drop-shadow(2px 0 #0f0) drop-shadow(-2px 0 #f0f); }
+            94% { transform: translate(1px, -2px); }
+            95% { transform: translate(0); }
+        }
+
+        .arcade-subtitle {
+            font-family: 'Courier New', monospace;
+            font-size: 1.25rem;
+            color: #0ff;
+            text-transform: uppercase;
+            letter-spacing: 0.5em;
+            margin-top: 1rem;
+            text-shadow: 0 0 10px #0ff;
+            animation: blink 1s infinite;
+        }
+
+        @keyframes blink {
+            0%, 49% { opacity: 1; }
+            50%, 100% { opacity: 0.7; }
+        }
+
+        .insert-coin {
+            font-family: 'Press Start 2P', 'Courier New', monospace;
+            font-size: 0.875rem;
+            color: #ff0;
+            margin-top: 2rem;
+            animation: pulse 1.5s ease-in-out infinite;
+            text-shadow: 0 0 10px #ff0;
+        }
+
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.3; }
+        }
+
+        /* Fighter select screen */
+        .fighter-select {
+            display: grid;
+            grid-template-columns: repeat(5, 1fr);
+            gap: 1rem;
+            margin: 3rem 0;
+            padding: 2rem;
+            background: linear-gradient(180deg, #1a0a2e 0%, #0a0a1a 100%);
+            border: 4px solid #f0f;
+            box-shadow:
+                0 0 20px #f0f,
+                inset 0 0 60px rgba(255, 0, 255, 0.1);
+            position: relative;
+        }
+
+        .fighter-select::before {
+            content: '>>> SELECT YOUR OPTIMIZER <<<';
+            position: absolute;
+            top: -1.5rem;
+            left: 50%;
+            transform: translateX(-50%);
+            font-family: 'Courier New', monospace;
+            font-size: 0.875rem;
+            color: #0ff;
+            background: #0a0a1a;
+            padding: 0.25rem 1rem;
+            text-shadow: 0 0 10px #0ff;
+            letter-spacing: 0.1em;
+        }
+
+        .fighter-card {
+            background: linear-gradient(180deg, #2a1a4a 0%, #1a0a2e 100%);
+            border: 2px solid #444;
+            padding: 1rem;
+            text-align: center;
+            position: relative;
+            transition: all 0.2s ease;
+            cursor: pointer;
+            clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
+        }
+
+        .fighter-card:hover, .fighter-card.selected {
+            border-color: #0ff;
+            box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
+            transform: scale(1.05);
+        }
+
+        .fighter-card.selected::after {
+            content: 'P1';
+            position: absolute;
+            top: 5px;
+            right: 5px;
+            font-family: 'Courier New', monospace;
+            font-size: 0.7rem;
+            color: #0a0a0a;
+            background: #0ff;
+            padding: 2px 6px;
+            font-weight: bold;
+        }
+
+        .fighter-card.legendary {
+            border-color: #ff0;
+            background: linear-gradient(180deg, #3a2a1a 0%, #2a1a0a 100%);
+        }
+
+        .fighter-card.legendary::before {
+            content: '★ LEGENDARY ★';
+            position: absolute;
+            top: -10px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-family: 'Courier New', monospace;
+            font-size: 0.5rem;
+            color: #0a0a0a;
+            background: linear-gradient(90deg, #ff0, #fa0);
+            padding: 2px 8px;
+            white-space: nowrap;
+        }
+
+        .fighter-avatar {
+            width: 80px;
+            height: 80px;
+            margin: 0 auto 1rem;
+            background: #0a0a1a;
+            border: 2px solid currentColor;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2.5rem;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .fighter-card:nth-child(1) .fighter-avatar { border-color: #888; color: #888; }
+        .fighter-card:nth-child(2) .fighter-avatar { border-color: #f80; color: #f80; }
+        .fighter-card:nth-child(3) .fighter-avatar { border-color: #0f0; color: #0f0; }
+        .fighter-card:nth-child(4) .fighter-avatar { border-color: #08f; color: #08f; }
+        .fighter-card:nth-child(5) .fighter-avatar { border-color: #f08; color: #f08; }
+
+        .fighter-card h4 {
+            font-family: 'Impact', sans-serif;
+            font-size: 1.1rem;
+            color: #fff;
+            text-transform: uppercase;
+            margin-bottom: 0.25rem;
+            text-shadow: 2px 2px 0 #000;
+        }
+
+        .fighter-card .class {
+            font-family: 'Courier New', monospace;
+            font-size: 0.65rem;
+            color: #888;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+        }
+
+        /* Main battle arena */
+        .battle-arena {
+            background: linear-gradient(180deg, #1a0a2e 0%, #0a0a1a 50%, #2a0a1a 100%);
+            border: 4px solid;
+            border-image: linear-gradient(90deg, #f0f, #0ff, #ff0, #0f0, #f0f) 1;
+            padding: 2rem;
+            margin: 2rem 0;
+            position: relative;
+        }
+
+        .battle-arena::before {
+            content: 'ROUND 1 — FIGHT!';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-family: 'Impact', sans-serif;
+            font-size: 4rem;
+            color: #ff0;
+            text-shadow: 4px 4px 0 #f00, -2px -2px 0 #0ff;
+            opacity: 0;
+            animation: fightIntro 3s ease-out forwards;
+            pointer-events: none;
+            z-index: 10;
+        }
+
+        @keyframes fightIntro {
+            0% { opacity: 1; transform: translate(-50%, -50%) scale(3); }
+            20% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+            80% { opacity: 1; }
+            100% { opacity: 0; }
+        }
+
+        /* Health bars */
+        .health-bars {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 2rem;
+            gap: 2rem;
+        }
+
+        .health-bar-container {
+            flex: 1;
+            position: relative;
+        }
+
+        .health-bar-container.right {
+            text-align: right;
+        }
+
+        .health-bar-name {
+            font-family: 'Impact', sans-serif;
+            font-size: 1.5rem;
+            color: #fff;
+            text-transform: uppercase;
+            text-shadow: 2px 2px 0 #000;
+            margin-bottom: 0.5rem;
+        }
+
+        .health-bar {
+            height: 30px;
+            background: #333;
+            border: 3px solid #fff;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .health-bar-fill {
+            height: 100%;
+            transition: width 1s ease;
+        }
+
+        .health-bar-container:first-child .health-bar-fill {
+            background: linear-gradient(180deg, #0f0 0%, #080 50%, #0f0 100%);
+            width: 95%;
+        }
+
+        .health-bar-container:last-child .health-bar-fill {
+            background: linear-gradient(180deg, #f00 0%, #800 50%, #f00 100%);
+            width: 35%;
+            float: right;
+        }
+
+        .health-bar::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 50%;
+            background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%);
+        }
+
+        /* VS display */
+        .vs-badge {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-family: 'Impact', sans-serif;
+            font-size: 2rem;
+            color: #ff0;
+            text-shadow: 0 0 20px #f00;
+            z-index: 5;
+        }
+
+        /* Fighter comparison grid */
+        .battle-grid {
+            display: grid;
+            grid-template-columns: 1fr auto 1fr;
+            gap: 2rem;
+            align-items: start;
+        }
+
+        .battle-fighter {
+            text-align: center;
+        }
+
+        .battle-fighter.winner {
+            animation: winnerGlow 0.5s ease-in-out infinite alternate;
+        }
+
+        @keyframes winnerGlow {
+            from { filter: drop-shadow(0 0 10px #0f0); }
+            to { filter: drop-shadow(0 0 30px #0f0); }
+        }
+
+        .fighter-portrait {
+            width: 200px;
+            height: 200px;
+            margin: 0 auto 1.5rem;
+            background: linear-gradient(135deg, #2a1a4a 0%, #1a0a2e 100%);
+            border: 4px solid;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 6rem;
+            position: relative;
+        }
+
+        .battle-fighter:first-child .fighter-portrait {
+            border-color: #0f0;
+            box-shadow: 0 0 30px rgba(0, 255, 0, 0.3);
+        }
+
+        .battle-fighter:last-child .fighter-portrait {
+            border-color: #f00;
+            box-shadow: 0 0 30px rgba(255, 0, 0, 0.3);
+        }
+
+        .fighter-portrait::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 50%);
+        }
+
+        .fighter-name {
+            font-family: 'Impact', sans-serif;
+            font-size: 2rem;
+            color: #fff;
+            text-transform: uppercase;
+            text-shadow: 3px 3px 0 #000;
+            margin-bottom: 0.5rem;
+        }
+
+        .fighter-title {
+            font-family: 'Courier New', monospace;
+            font-size: 0.75rem;
+            color: #0ff;
+            text-transform: uppercase;
+            letter-spacing: 0.2em;
+            margin-bottom: 1rem;
+        }
+
+        /* Stats bars */
+        .stat-bars {
+            text-align: left;
+            padding: 1rem;
+            background: rgba(0,0,0,0.5);
+            border: 1px solid #444;
+        }
+
+        .stat-row {
+            display: flex;
+            align-items: center;
+            margin-bottom: 0.75rem;
+            gap: 0.5rem;
+        }
+
+        .stat-row:last-child {
+            margin-bottom: 0;
+        }
+
+        .stat-label {
+            font-family: 'Courier New', monospace;
+            font-size: 0.7rem;
+            color: #888;
+            width: 60px;
+            text-transform: uppercase;
+        }
+
+        .stat-bar {
+            flex: 1;
+            height: 12px;
+            background: #222;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .stat-bar-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #f00, #ff0, #0f0);
+            transition: width 0.5s ease;
+        }
+
+        .stat-value {
+            font-family: 'Courier New', monospace;
+            font-size: 0.7rem;
+            color: #fff;
+            width: 30px;
+            text-align: right;
+        }
+
+        /* Special moves */
+        .special-moves {
+            margin-top: 1.5rem;
+            padding: 1rem;
+            background: rgba(255, 0, 255, 0.1);
+            border: 1px solid #f0f;
+        }
+
+        .special-moves h5 {
+            font-family: 'Courier New', monospace;
+            font-size: 0.7rem;
+            color: #f0f;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            margin-bottom: 0.75rem;
+        }
+
+        .move {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 0.5rem;
+            font-family: 'Courier New', monospace;
+            font-size: 0.75rem;
+        }
+
+        .move-keys {
+            display: flex;
+            gap: 2px;
+        }
+
+        .key {
+            background: #333;
+            border: 1px solid #666;
+            padding: 2px 6px;
+            color: #fff;
+            font-size: 0.65rem;
+            border-radius: 2px;
+        }
+
+        .move-name {
+            color: #ff0;
+        }
+
+        /* Battle VS center */
+        .battle-vs {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 2rem;
+        }
+
+        .battle-vs-text {
+            font-family: 'Impact', sans-serif;
+            font-size: 5rem;
+            color: #fff;
+            text-shadow:
+                0 0 10px #ff0,
+                0 0 20px #f00,
+                4px 4px 0 #000;
+            animation: vsPulse 1s ease-in-out infinite;
+        }
+
+        @keyframes vsPulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+        }
+
+        /* Combo counter */
+        .combo-display {
+            position: absolute;
+            top: 50%;
+            right: 2rem;
+            transform: translateY(-50%);
+            text-align: right;
+        }
+
+        .combo-number {
+            font-family: 'Impact', sans-serif;
+            font-size: 4rem;
+            color: #ff0;
+            text-shadow: 0 0 20px #f80;
+            line-height: 1;
+        }
+
+        .combo-text {
+            font-family: 'Courier New', monospace;
+            font-size: 0.875rem;
+            color: #f80;
+            text-transform: uppercase;
+            letter-spacing: 0.2em;
+        }
+
+        /* Damage numbers floating */
+        .damage-numbers {
+            position: absolute;
+            font-family: 'Impact', sans-serif;
+            font-size: 2rem;
+            color: #f00;
+            text-shadow: 2px 2px 0 #000;
+            animation: damageFloat 1s ease-out forwards;
+            pointer-events: none;
+        }
+
+        @keyframes damageFloat {
+            0% { opacity: 1; transform: translateY(0) scale(1); }
+            100% { opacity: 0; transform: translateY(-50px) scale(1.5); }
+        }
+
+        /* Winner announcement */
+        .winner-announcement {
+            text-align: center;
+            padding: 3rem;
+            margin-top: 2rem;
+            background: linear-gradient(180deg, rgba(0,255,0,0.1) 0%, transparent 100%);
+            border: 2px solid #0f0;
+            position: relative;
+        }
+
+        .winner-announcement::before {
+            content: '🏆 WINNER 🏆';
+            display: block;
+            font-family: 'Courier New', monospace;
+            font-size: 0.875rem;
+            color: #ff0;
+            letter-spacing: 0.3em;
+            margin-bottom: 1rem;
+        }
+
+        .winner-announcement h3 {
+            font-family: 'Impact', sans-serif;
+            font-size: 3rem;
+            color: #0f0;
+            text-transform: uppercase;
+            text-shadow: 0 0 30px #0f0, 4px 4px 0 #000;
+            animation: winnerFlash 0.5s ease-in-out infinite alternate;
+        }
+
+        @keyframes winnerFlash {
+            from { text-shadow: 0 0 30px #0f0, 4px 4px 0 #000; }
+            to { text-shadow: 0 0 60px #0f0, 0 0 100px #0f0, 4px 4px 0 #000; }
+        }
+
+        .winner-announcement p {
+            font-family: 'Courier New', monospace;
+            font-size: 1rem;
+            color: #0ff;
+            margin-top: 1rem;
+            max-width: 600px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        /* High scores table */
+        .high-scores {
+            margin-top: 3rem;
+            background: #0a0a0a;
+            border: 3px solid #f0f;
+            padding: 1.5rem;
+        }
+
+        .high-scores h4 {
+            font-family: 'Courier New', monospace;
+            font-size: 1rem;
+            color: #f0f;
+            text-align: center;
+            text-transform: uppercase;
+            letter-spacing: 0.3em;
+            margin-bottom: 1.5rem;
+            text-shadow: 0 0 10px #f0f;
+        }
+
+        .score-table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        .score-table th,
+        .score-table td {
+            font-family: 'Courier New', monospace;
+            font-size: 0.875rem;
+            padding: 0.75rem 1rem;
+            text-align: left;
+            border-bottom: 1px solid #333;
+        }
+
+        .score-table th {
+            color: #888;
+            text-transform: uppercase;
+            font-size: 0.7rem;
+            letter-spacing: 0.1em;
+        }
+
+        .score-table td {
+            color: #fff;
+        }
+
+        .score-table tr:hover td {
+            background: rgba(255, 0, 255, 0.1);
+        }
+
+        .score-table .rank {
+            color: #ff0;
+            font-weight: bold;
+        }
+
+        .score-table .optimizer-name {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .score-table .optimizer-name span {
+            font-size: 1.25rem;
+        }
+
+        .score-table .score {
+            color: #0f0;
+            font-family: 'Impact', sans-serif;
+            font-size: 1.25rem;
+        }
+
+        .score-table .special {
+            color: #0ff;
+            font-size: 0.75rem;
+        }
+
+        /* Credits scroll */
+        .arcade-credits {
+            text-align: center;
+            padding: 3rem 0;
+            border-top: 1px solid #333;
+            margin-top: 3rem;
+        }
+
+        .arcade-credits p {
+            font-family: 'Courier New', monospace;
+            font-size: 0.75rem;
+            color: #444;
+            text-transform: uppercase;
+            letter-spacing: 0.2em;
+        }
+
+        .arcade-credits .blink {
+            color: #0ff;
+            animation: blink 1s infinite;
+        }
+
+        @media (max-width: 1024px) {
+            .fighter-select {
+                grid-template-columns: repeat(3, 1fr);
+            }
+
+            .battle-grid {
+                grid-template-columns: 1fr;
+                gap: 1rem;
+            }
+
+            .battle-vs {
+                padding: 1rem;
+            }
+
+            .battle-vs-text {
+                font-size: 3rem;
+            }
+
+            .fighter-portrait {
+                width: 150px;
+                height: 150px;
+                font-size: 4rem;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .arcade {
+                padding: 2rem 1rem;
+            }
+
+            .fighter-select {
+                grid-template-columns: repeat(2, 1fr);
+                padding: 1rem;
+            }
+
+            .fighter-avatar {
+                width: 60px;
+                height: 60px;
+                font-size: 2rem;
+            }
+
+            .health-bars {
+                flex-direction: column;
+                gap: 1rem;
+            }
+
+            .battle-arena {
+                padding: 1rem;
+            }
+
+            .combo-display {
+                display: none;
+            }
+        }
+
+        /* Pissarro Impressionist Section */
+        .pissarro {
+            padding: 8rem 4rem;
+            position: relative;
+            overflow: hidden;
+            background: linear-gradient(180deg,
+                #E8DED2 0%,
+                #F4EDE4 20%,
+                #EAE4D8 40%,
+                #D4C8B8 70%,
+                #C9BDA8 100%
+            );
+            min-height: 100vh;
+        }
+
+        .pissarro-sky {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 40%;
+            background: linear-gradient(180deg,
+                #B8C4D4 0%,
+                #C9D1DC 30%,
+                #DED8CE 70%,
+                #E8DED2 100%
+            );
+            opacity: 0.8;
+        }
+
+        /* Pointillist dots overlay */
+        .pissarro-dots {
+            position: absolute;
+            inset: 0;
+            background-image:
+                radial-gradient(circle at 10% 20%, #8B9D7A 1px, transparent 1px),
+                radial-gradient(circle at 30% 15%, #A67C52 1px, transparent 1px),
+                radial-gradient(circle at 50% 25%, #7A8B6A 1px, transparent 1px),
+                radial-gradient(circle at 70% 10%, #9B8B7A 1px, transparent 1px),
+                radial-gradient(circle at 90% 22%, #8B7B6A 1px, transparent 1px),
+                radial-gradient(circle at 15% 45%, #6B8B5A 1px, transparent 1px),
+                radial-gradient(circle at 35% 55%, #AB9B8A 1px, transparent 1px),
+                radial-gradient(circle at 55% 40%, #7B9B6B 1px, transparent 1px),
+                radial-gradient(circle at 75% 50%, #8B8B7A 1px, transparent 1px),
+                radial-gradient(circle at 95% 42%, #9B7B5A 1px, transparent 1px),
+                radial-gradient(circle at 20% 70%, #5B7B4A 1px, transparent 1px),
+                radial-gradient(circle at 40% 80%, #BB9B7A 1px, transparent 1px),
+                radial-gradient(circle at 60% 75%, #6B7B5A 1px, transparent 1px),
+                radial-gradient(circle at 80% 85%, #AB8B6A 1px, transparent 1px),
+                radial-gradient(circle at 25% 90%, #7B6B5A 1px, transparent 1px);
+            background-size:
+                80px 80px, 90px 90px, 70px 70px, 85px 85px, 75px 75px,
+                95px 95px, 65px 65px, 88px 88px, 72px 72px, 82px 82px,
+                78px 78px, 92px 92px, 68px 68px, 86px 86px, 76px 76px;
+            opacity: 0.4;
+            pointer-events: none;
+        }
+
+        .pissarro-content {
+            position: relative;
+            z-index: 1;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        .pissarro-header {
+            text-align: center;
+            margin-bottom: 5rem;
+        }
+
+        .pissarro-title {
+            font-family: 'Fraunces', Georgia, serif;
+            font-size: clamp(2.5rem, 6vw, 4.5rem);
+            font-weight: 300;
+            font-style: italic;
+            color: #4A5568;
+            letter-spacing: -0.02em;
+            line-height: 1.2;
+            margin-bottom: 1rem;
+            text-shadow: 2px 2px 4px rgba(255,255,255,0.5);
+        }
+
+        .pissarro-subtitle {
+            font-family: 'Fraunces', Georgia, serif;
+            font-size: 1.125rem;
+            font-style: italic;
+            color: #718096;
+            max-width: 600px;
+            margin: 0 auto;
+        }
+
+        /* Landscape canvas for algorithm comparison */
+        .landscape-canvas {
+            background: white;
+            border-radius: 8px;
+            box-shadow:
+                0 0 0 8px #D4C4B0,
+                0 0 0 10px #A69580,
+                0 20px 60px rgba(0,0,0,0.15);
+            padding: 2rem;
+            margin-bottom: 4rem;
+            position: relative;
+        }
+
+        .landscape-canvas::before {
+            content: 'Les Optimiseurs dans le Paysage de la Perte';
+            position: absolute;
+            bottom: -2.5rem;
+            left: 50%;
+            transform: translateX(-50%);
+            font-family: 'Fraunces', Georgia, serif;
+            font-size: 0.875rem;
+            font-style: italic;
+            color: #8B7355;
+            white-space: nowrap;
+        }
+
+        .landscape-svg {
+            width: 100%;
+            height: auto;
+            display: block;
+        }
+
+        /* Optimizer cards in impressionist style */
+        .optimizer-garden {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 2rem;
+            margin-top: 5rem;
+        }
+
+        .optimizer-card {
+            background: linear-gradient(145deg,
+                rgba(255,255,255,0.9) 0%,
+                rgba(248,244,236,0.95) 100%
+            );
+            border-radius: 12px;
+            padding: 2rem;
+            position: relative;
+            box-shadow:
+                4px 4px 0 rgba(139,115,85,0.2),
+                8px 8px 20px rgba(0,0,0,0.08);
+            border: 1px solid rgba(139,115,85,0.2);
+            transition: all 0.4s ease;
+        }
+
+        .optimizer-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            border-radius: 12px 12px 0 0;
+        }
+
+        .optimizer-card.shampoo::before { background: linear-gradient(90deg, #D4A574, #C49A6C); }
+        .optimizer-card.soap::before { background: linear-gradient(90deg, #7BA05B, #6B9B4B); }
+        .optimizer-card.muon::before { background: linear-gradient(90deg, #8B9DC3, #7B8DB3); }
+        .optimizer-card.caspr::before { background: linear-gradient(90deg, #C4849B, #B47488); }
+
+        .optimizer-card:hover {
+            transform: translateY(-8px);
+            box-shadow:
+                4px 4px 0 rgba(139,115,85,0.2),
+                12px 12px 30px rgba(0,0,0,0.12);
+        }
+
+        .optimizer-icon {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            margin-bottom: 1.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .optimizer-card.shampoo .optimizer-icon {
+            background: linear-gradient(135deg, #F5E6D3 0%, #E8D4BC 100%);
+            border: 2px solid #D4A574;
+        }
+        .optimizer-card.soap .optimizer-icon {
+            background: linear-gradient(135deg, #E8F0E0 0%, #D4E8C8 100%);
+            border: 2px solid #7BA05B;
+        }
+        .optimizer-card.muon .optimizer-icon {
+            background: linear-gradient(135deg, #E8ECF4 0%, #D4DCE8 100%);
+            border: 2px solid #8B9DC3;
+        }
+        .optimizer-card.caspr .optimizer-icon {
+            background: linear-gradient(135deg, #F4E8EC 0%, #E8D4DC 100%);
+            border: 2px solid #C4849B;
+        }
+
+        .optimizer-card h4 {
+            font-family: 'Fraunces', Georgia, serif;
+            font-size: 1.5rem;
+            font-weight: 500;
+            color: #4A5568;
+            margin-bottom: 0.5rem;
+        }
+
+        .optimizer-card .year {
+            font-family: 'Fraunces', Georgia, serif;
+            font-size: 0.8rem;
+            font-style: italic;
+            color: #A0AEC0;
+            margin-bottom: 1rem;
+        }
+
+        .optimizer-card p {
+            font-size: 0.9rem;
+            color: #718096;
+            line-height: 1.7;
+            margin-bottom: 1.25rem;
+        }
+
+        .optimizer-card .equation {
+            font-family: 'Times New Roman', Georgia, serif;
+            font-size: 0.95rem;
+            color: #4A5568;
+            background: rgba(0,0,0,0.03);
+            padding: 0.75rem 1rem;
+            border-radius: 6px;
+            border-left: 3px solid;
+            margin-bottom: 1rem;
+        }
+
+        .optimizer-card.shampoo .equation { border-color: #D4A574; }
+        .optimizer-card.soap .equation { border-color: #7BA05B; }
+        .optimizer-card.muon .equation { border-color: #8B9DC3; }
+        .optimizer-card.caspr .equation { border-color: #C4849B; }
+
+        .optimizer-card .highlight-stat {
+            display: flex;
+            align-items: baseline;
+            gap: 0.5rem;
+            padding-top: 1rem;
+            border-top: 1px solid rgba(0,0,0,0.08);
+        }
+
+        .optimizer-card .highlight-stat .value {
+            font-family: 'Fraunces', Georgia, serif;
+            font-size: 1.75rem;
+            font-weight: 400;
+        }
+
+        .optimizer-card.shampoo .highlight-stat .value { color: #C49A6C; }
+        .optimizer-card.soap .highlight-stat .value { color: #6B9B4B; }
+        .optimizer-card.muon .highlight-stat .value { color: #7B8DB3; }
+        .optimizer-card.caspr .highlight-stat .value { color: #B47488; }
+
+        .optimizer-card .highlight-stat .label {
+            font-size: 0.8rem;
+            color: #A0AEC0;
+        }
+
+        /* The poetic comparison */
+        .impressionist-quote {
+            text-align: center;
+            padding: 4rem 2rem;
+            margin-top: 4rem;
+            position: relative;
+        }
+
+        .impressionist-quote::before {
+            content: '~';
+            font-family: 'Fraunces', Georgia, serif;
+            font-size: 3rem;
+            color: #C4B4A4;
+            display: block;
+            margin-bottom: 1rem;
+        }
+
+        .impressionist-quote blockquote {
+            font-family: 'Fraunces', Georgia, serif;
+            font-size: clamp(1.25rem, 2.5vw, 1.75rem);
+            font-style: italic;
+            color: #5A6978;
+            line-height: 1.8;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        .impressionist-quote cite {
+            display: block;
+            font-family: 'Fraunces', Georgia, serif;
+            font-style: normal;
+            font-size: 0.9rem;
+            color: #A0AEC0;
+            margin-top: 1.5rem;
+        }
+
+        /* Relationship diagram */
+        .family-tree {
+            background: rgba(255,255,255,0.7);
+            border-radius: 12px;
+            padding: 3rem;
+            margin-top: 4rem;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.06);
+        }
+
+        .family-tree h5 {
+            font-family: 'Fraunces', Georgia, serif;
+            font-size: 1.25rem;
+            font-style: italic;
+            color: #5A6978;
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+
+        .family-tree-svg {
+            width: 100%;
+            max-width: 800px;
+            margin: 0 auto;
+            display: block;
+        }
+
+        @media (max-width: 1024px) {
+            .optimizer-garden {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+
+        @media (max-width: 768px) {
+            .pissarro {
+                padding: 4rem 1.5rem;
+            }
+
+            .optimizer-garden {
+                grid-template-columns: 1fr;
+            }
+
+            .landscape-canvas {
+                padding: 1rem;
+            }
+
+            .landscape-canvas::before {
+                font-size: 0.75rem;
+            }
+
+            .family-tree {
+                padding: 1.5rem;
+                overflow-x: auto;
+            }
+
+            .family-tree-svg {
+                min-width: 500px;
+            }
+        }
+
         /* Focus Areas */
         .focus {
             padding: 10rem 4rem;
@@ -2033,6 +3156,516 @@
         </div>
     </section>
 
+    <!-- ARCADE FIGHTING GAME SECTION -->
+    <section class="arcade" id="arcade">
+        <div class="arcade-crt"></div>
+        <div class="arcade-grid"></div>
+
+        <div class="arcade-content">
+            <div class="arcade-header">
+                <h2 class="arcade-title">Optimizer<br/>Kombat</h2>
+                <p class="arcade-subtitle">Second Order Showdown</p>
+                <p class="insert-coin">>>> INSERT COIN TO CONTINUE <<<</p>
+            </div>
+
+            <!-- Fighter Select Screen -->
+            <div class="fighter-select">
+                <div class="fighter-card">
+                    <div class="fighter-avatar">📉</div>
+                    <h4>SGD</h4>
+                    <div class="class">First Order • Basic</div>
+                </div>
+                <div class="fighter-card legendary selected">
+                    <div class="fighter-avatar">🧴</div>
+                    <h4>Shampoo</h4>
+                    <div class="class">Second Order • OG</div>
+                </div>
+                <div class="fighter-card">
+                    <div class="fighter-avatar">🫧</div>
+                    <h4>SOAP</h4>
+                    <div class="class">Second Order • Hybrid</div>
+                </div>
+                <div class="fighter-card">
+                    <div class="fighter-avatar">μ</div>
+                    <h4>Muon</h4>
+                    <div class="class">Orthogonal • Speed</div>
+                </div>
+                <div class="fighter-card">
+                    <div class="fighter-avatar">∑</div>
+                    <h4>CASPR</h4>
+                    <div class="class">Kron-Sum • Theory</div>
+                </div>
+            </div>
+
+            <!-- Main Battle Arena -->
+            <div class="battle-arena">
+                <!-- Health Bars -->
+                <div class="health-bars">
+                    <div class="health-bar-container">
+                        <div class="health-bar-name">Shampoo</div>
+                        <div class="health-bar">
+                            <div class="health-bar-fill"></div>
+                        </div>
+                    </div>
+                    <div class="health-bar-container right">
+                        <div class="health-bar-name">Adam</div>
+                        <div class="health-bar">
+                            <div class="health-bar-fill"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Battle Grid -->
+                <div class="battle-grid">
+                    <!-- Left Fighter: Shampoo -->
+                    <div class="battle-fighter winner">
+                        <div class="fighter-portrait">🧴</div>
+                        <div class="fighter-name">Shampoo</div>
+                        <div class="fighter-title">The Preconditioner</div>
+
+                        <div class="stat-bars">
+                            <div class="stat-row">
+                                <span class="stat-label">SPEED</span>
+                                <div class="stat-bar"><div class="stat-bar-fill" style="width: 85%"></div></div>
+                                <span class="stat-value">85</span>
+                            </div>
+                            <div class="stat-row">
+                                <span class="stat-label">POWER</span>
+                                <div class="stat-bar"><div class="stat-bar-fill" style="width: 92%"></div></div>
+                                <span class="stat-value">92</span>
+                            </div>
+                            <div class="stat-row">
+                                <span class="stat-label">MEMORY</span>
+                                <div class="stat-bar"><div class="stat-bar-fill" style="width: 60%"></div></div>
+                                <span class="stat-value">60</span>
+                            </div>
+                            <div class="stat-row">
+                                <span class="stat-label">THEORY</span>
+                                <div class="stat-bar"><div class="stat-bar-fill" style="width: 95%"></div></div>
+                                <span class="stat-value">95</span>
+                            </div>
+                        </div>
+
+                        <div class="special-moves">
+                            <h5>Special Moves</h5>
+                            <div class="move">
+                                <div class="move-keys">
+                                    <span class="key">↓</span>
+                                    <span class="key">→</span>
+                                    <span class="key">L</span>
+                                </div>
+                                <span class="move-name">Kronecker Factor</span>
+                            </div>
+                            <div class="move">
+                                <div class="move-keys">
+                                    <span class="key">←</span>
+                                    <span class="key">→</span>
+                                    <span class="key">R</span>
+                                </div>
+                                <span class="move-name">Fourth Root Fury</span>
+                            </div>
+                            <div class="move">
+                                <div class="move-keys">
+                                    <span class="key">↓</span>
+                                    <span class="key">↓</span>
+                                    <span class="key">G</span>
+                                </div>
+                                <span class="move-name">Preconditioned HADOUKEN</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- VS -->
+                    <div class="battle-vs">
+                        <div class="battle-vs-text">VS</div>
+                    </div>
+
+                    <!-- Right Fighter: Adam -->
+                    <div class="battle-fighter">
+                        <div class="fighter-portrait">📊</div>
+                        <div class="fighter-name">Adam</div>
+                        <div class="fighter-title">The Adaptive One</div>
+
+                        <div class="stat-bars">
+                            <div class="stat-row">
+                                <span class="stat-label">SPEED</span>
+                                <div class="stat-bar"><div class="stat-bar-fill" style="width: 70%"></div></div>
+                                <span class="stat-value">70</span>
+                            </div>
+                            <div class="stat-row">
+                                <span class="stat-label">POWER</span>
+                                <div class="stat-bar"><div class="stat-bar-fill" style="width: 65%"></div></div>
+                                <span class="stat-value">65</span>
+                            </div>
+                            <div class="stat-row">
+                                <span class="stat-label">MEMORY</span>
+                                <div class="stat-bar"><div class="stat-bar-fill" style="width: 85%"></div></div>
+                                <span class="stat-value">85</span>
+                            </div>
+                            <div class="stat-row">
+                                <span class="stat-label">THEORY</span>
+                                <div class="stat-bar"><div class="stat-bar-fill" style="width: 50%"></div></div>
+                                <span class="stat-value">50</span>
+                            </div>
+                        </div>
+
+                        <div class="special-moves">
+                            <h5>Special Moves</h5>
+                            <div class="move">
+                                <div class="move-keys">
+                                    <span class="key">→</span>
+                                    <span class="key">→</span>
+                                    <span class="key">M</span>
+                                </div>
+                                <span class="move-name">Momentum Rush</span>
+                            </div>
+                            <div class="move">
+                                <div class="move-keys">
+                                    <span class="key">↓</span>
+                                    <span class="key">↑</span>
+                                    <span class="key">V</span>
+                                </div>
+                                <span class="move-name">Variance Vortex</span>
+                            </div>
+                            <div class="move">
+                                <div class="move-keys">
+                                    <span class="key">←</span>
+                                    <span class="key">↓</span>
+                                    <span class="key">β</span>
+                                </div>
+                                <span class="move-name">Beta Correction</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Combo Display -->
+                <div class="combo-display">
+                    <div class="combo-number">47</div>
+                    <div class="combo-text">Hit Combo!</div>
+                </div>
+            </div>
+
+            <!-- Winner Announcement -->
+            <div class="winner-announcement">
+                <h3>Shampoo Wins!</h3>
+                <p>FLAWLESS VICTORY — 40% faster convergence, 2× fewer iterations. The preconditioner has spoken.</p>
+            </div>
+
+            <!-- High Scores Table -->
+            <div class="high-scores">
+                <h4>>>> Global Leaderboard <<<</h4>
+                <table class="score-table">
+                    <thead>
+                        <tr>
+                            <th>Rank</th>
+                            <th>Optimizer</th>
+                            <th>Steps to 75.9%</th>
+                            <th>Special Ability</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td class="rank">1ST</td>
+                            <td class="optimizer-name"><span>μ</span> MUON</td>
+                            <td class="score">~1,200</td>
+                            <td class="special">2× COMPUTE EFFICIENCY</td>
+                        </tr>
+                        <tr>
+                            <td class="rank">2ND</td>
+                            <td class="optimizer-name"><span>🫧</span> SOAP</td>
+                            <td class="score">~1,500</td>
+                            <td class="special">ADAM IN EIGENBASIS</td>
+                        </tr>
+                        <tr>
+                            <td class="rank">3RD</td>
+                            <td class="optimizer-name"><span>🧴</span> SHAMPOO</td>
+                            <td class="score">1,729</td>
+                            <td class="special">KRONECKER FACTORIZATION</td>
+                        </tr>
+                        <tr>
+                            <td class="rank">4TH</td>
+                            <td class="optimizer-name"><span>∑</span> CASPR</td>
+                            <td class="score">~1,800</td>
+                            <td class="special">TIGHTER BOUNDS</td>
+                        </tr>
+                        <tr>
+                            <td class="rank">5TH</td>
+                            <td class="optimizer-name"><span>📊</span> ADAMW</td>
+                            <td class="score">2,512</td>
+                            <td class="special">WEIGHT DECAY</td>
+                        </tr>
+                        <tr>
+                            <td class="rank">6TH</td>
+                            <td class="optimizer-name"><span>📉</span> SGD</td>
+                            <td class="score">4,000+</td>
+                            <td class="special">SIMPLICITY</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <div class="arcade-credits">
+                <p>© 2018-2025 OPTIMIZATION LABS</p>
+                <p class="blink">GAME OVER — CONTINUE?</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- PISSARRO IMPRESSIONIST SECTION -->
+    <section class="pissarro" id="pissarro">
+        <div class="pissarro-sky"></div>
+        <div class="pissarro-dots"></div>
+
+        <div class="pissarro-content">
+            <div class="pissarro-header">
+                <h2 class="pissarro-title">A Garden of Optimizers</h2>
+                <p class="pissarro-subtitle">Four paths through the landscape of loss, each with its own light and color, converging toward the same distant horizon.</p>
+            </div>
+
+            <!-- Main landscape painting showing optimization paths -->
+            <div class="landscape-canvas">
+                <svg class="landscape-svg" viewBox="0 0 1000 450" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <!-- Sky with impressionist texture -->
+                    <defs>
+                        <linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+                            <stop offset="0%" style="stop-color:#B8C4D4"/>
+                            <stop offset="50%" style="stop-color:#C9D5E0"/>
+                            <stop offset="100%" style="stop-color:#DED8CE"/>
+                        </linearGradient>
+                        <linearGradient id="fieldGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+                            <stop offset="0%" style="stop-color:#C4B896"/>
+                            <stop offset="50%" style="stop-color:#A8C090"/>
+                            <stop offset="100%" style="stop-color:#7BA05B"/>
+                        </linearGradient>
+                        <linearGradient id="lossGrad" x1="0%" y1="100%" x2="0%" y2="0%">
+                            <stop offset="0%" style="stop-color:#6B8B5A"/>
+                            <stop offset="30%" style="stop-color:#9BAB7A"/>
+                            <stop offset="60%" style="stop-color:#C4B896"/>
+                            <stop offset="100%" style="stop-color:#DED8CE"/>
+                        </linearGradient>
+                        <filter id="impressionist" x="-5%" y="-5%" width="110%" height="110%">
+                            <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="3" result="noise"/>
+                            <feDisplacementMap in="SourceGraphic" in2="noise" scale="3" xChannelSelector="R" yChannelSelector="G"/>
+                        </filter>
+                        <filter id="softGlow">
+                            <feGaussianBlur stdDeviation="2" result="blur"/>
+                            <feMerge>
+                                <feMergeNode in="blur"/>
+                                <feMergeNode in="SourceGraphic"/>
+                            </feMerge>
+                        </filter>
+                    </defs>
+
+                    <!-- Sky -->
+                    <rect x="0" y="0" width="1000" height="200" fill="url(#skyGrad)"/>
+
+                    <!-- Distant hills -->
+                    <ellipse cx="200" cy="200" rx="250" ry="60" fill="#A8B8A0" opacity="0.6"/>
+                    <ellipse cx="700" cy="190" rx="300" ry="70" fill="#98A890" opacity="0.5"/>
+                    <ellipse cx="500" cy="195" rx="200" ry="50" fill="#B8C4A8" opacity="0.4"/>
+
+                    <!-- Loss landscape (the rolling hills/field) -->
+                    <path d="M0 200 Q100 280 200 240 Q350 180 500 220 Q650 260 750 200 Q850 140 950 180 L1000 180 L1000 450 L0 450 Z" fill="url(#lossGrad)" filter="url(#impressionist)"/>
+
+                    <!-- The minimum point (golden glow) -->
+                    <circle cx="850" cy="160" r="25" fill="#FFD700" opacity="0.3" filter="url(#softGlow)"/>
+                    <circle cx="850" cy="160" r="12" fill="#FFD700" opacity="0.5"/>
+                    <circle cx="850" cy="160" r="5" fill="#FFF8DC"/>
+                    <text x="850" y="135" text-anchor="middle" fill="#8B7355" font-family="Fraunces, Georgia" font-size="11" font-style="italic">minimum</text>
+
+                    <!-- SGD path (gray, wandering) -->
+                    <path d="M80 350 Q100 340 110 355 Q130 370 150 350 Q180 320 200 340 Q230 360 260 330 Q300 290 340 310 Q380 330 420 300 Q470 260 520 280 Q570 300 620 260 Q680 210 740 230 Q800 250 830 200 Q840 180 850 165"
+                          stroke="#9CA3AF" stroke-width="2" fill="none" stroke-dasharray="4 4" opacity="0.5"/>
+                    <circle cx="80" cy="350" r="6" fill="#9CA3AF"/>
+                    <text x="80" y="375" text-anchor="middle" fill="#9CA3AF" font-family="Inter" font-size="9" font-weight="500">SGD</text>
+
+                    <!-- Shampoo path (warm ochre, more direct) -->
+                    <path d="M120 380 Q180 350 250 320 Q350 280 450 260 Q550 240 650 210 Q750 180 850 165"
+                          stroke="#D4A574" stroke-width="3.5" fill="none" stroke-linecap="round" filter="url(#softGlow)"/>
+                    <circle cx="120" cy="380" r="8" fill="#D4A574"/>
+                    <circle cx="450" cy="260" r="4" fill="#D4A574" opacity="0.6"/>
+                    <circle cx="650" cy="210" r="4" fill="#D4A574" opacity="0.6"/>
+                    <text x="120" y="405" text-anchor="middle" fill="#C49A6C" font-family="Fraunces, Georgia" font-size="11" font-weight="500">Shampoo</text>
+
+                    <!-- SOAP path (green, smooth) -->
+                    <path d="M160 360 Q240 320 340 290 Q460 250 580 220 Q700 190 850 165"
+                          stroke="#7BA05B" stroke-width="3.5" fill="none" stroke-linecap="round" filter="url(#softGlow)"/>
+                    <circle cx="160" cy="360" r="8" fill="#7BA05B"/>
+                    <circle cx="460" cy="250" r="4" fill="#7BA05B" opacity="0.6"/>
+                    <text x="160" y="385" text-anchor="middle" fill="#6B9B4B" font-family="Fraunces, Georgia" font-size="11" font-weight="500">SOAP</text>
+
+                    <!-- Muon path (blue, efficient) -->
+                    <path d="M200 340 Q300 300 420 270 Q560 235 700 200 Q790 175 850 165"
+                          stroke="#8B9DC3" stroke-width="3.5" fill="none" stroke-linecap="round" filter="url(#softGlow)"/>
+                    <circle cx="200" cy="340" r="8" fill="#8B9DC3"/>
+                    <circle cx="560" cy="235" r="4" fill="#8B9DC3" opacity="0.6"/>
+                    <text x="200" y="365" text-anchor="middle" fill="#7B8DB3" font-family="Fraunces, Georgia" font-size="11" font-weight="500">Muon</text>
+
+                    <!-- CASPR path (rose, theoretical) -->
+                    <path d="M140 400 Q220 360 320 320 Q440 275 560 245 Q700 210 850 165"
+                          stroke="#C4849B" stroke-width="3" fill="none" stroke-linecap="round" stroke-dasharray="8 4" filter="url(#softGlow)"/>
+                    <circle cx="140" cy="400" r="8" fill="#C4849B"/>
+                    <text x="140" y="425" text-anchor="middle" fill="#B47488" font-family="Fraunces, Georgia" font-size="11" font-weight="500">CASPR</text>
+
+                    <!-- Impressionist brushstroke dots -->
+                    <g opacity="0.3">
+                        <circle cx="300" cy="300" r="3" fill="#8B9D7A"/>
+                        <circle cx="450" cy="280" r="2" fill="#A67C52"/>
+                        <circle cx="600" cy="240" r="3" fill="#7A8B6A"/>
+                        <circle cx="750" cy="200" r="2" fill="#9B8B7A"/>
+                        <circle cx="380" cy="320" r="2" fill="#6B8B5A"/>
+                        <circle cx="520" cy="260" r="3" fill="#AB9B8A"/>
+                        <circle cx="680" cy="220" r="2" fill="#8B8B7A"/>
+                        <circle cx="820" cy="180" r="3" fill="#C4A574"/>
+                    </g>
+
+                    <!-- Trees (impressionist style) -->
+                    <g transform="translate(50, 220)">
+                        <ellipse cx="20" cy="0" rx="25" ry="35" fill="#5B7B4A" opacity="0.8"/>
+                        <ellipse cx="15" cy="-10" rx="20" ry="28" fill="#6B8B5A" opacity="0.7"/>
+                        <rect x="15" y="25" width="8" height="30" fill="#8B7355"/>
+                    </g>
+                    <g transform="translate(920, 180)">
+                        <ellipse cx="20" cy="0" rx="22" ry="30" fill="#5B7B4A" opacity="0.7"/>
+                        <ellipse cx="18" cy="-8" rx="18" ry="24" fill="#6B8B5A" opacity="0.6"/>
+                        <rect x="16" y="22" width="6" height="25" fill="#8B7355"/>
+                    </g>
+
+                    <!-- Legend box -->
+                    <rect x="20" y="20" width="180" height="120" rx="8" fill="rgba(255,255,255,0.85)" stroke="#D4C4B0"/>
+                    <text x="110" y="42" text-anchor="middle" fill="#5A6978" font-family="Fraunces, Georgia" font-size="11" font-style="italic">Chemins vers le minimum</text>
+                    <line x1="35" y1="58" x2="65" y2="58" stroke="#D4A574" stroke-width="3"/>
+                    <text x="75" y="62" fill="#5A6978" font-family="Inter" font-size="9">Shampoo (2018)</text>
+                    <line x1="35" y1="78" x2="65" y2="78" stroke="#7BA05B" stroke-width="3"/>
+                    <text x="75" y="82" fill="#5A6978" font-family="Inter" font-size="9">SOAP (2024)</text>
+                    <line x1="35" y1="98" x2="65" y2="98" stroke="#8B9DC3" stroke-width="3"/>
+                    <text x="75" y="102" fill="#5A6978" font-family="Inter" font-size="9">Muon (2024)</text>
+                    <line x1="35" y1="118" x2="65" y2="118" stroke="#C4849B" stroke-width="3" stroke-dasharray="8 4"/>
+                    <text x="75" y="122" fill="#5A6978" font-family="Inter" font-size="9">CASPR (2023)</text>
+                </svg>
+            </div>
+
+            <!-- Optimizer cards -->
+            <div class="optimizer-garden">
+                <div class="optimizer-card shampoo">
+                    <div class="optimizer-icon">🧴</div>
+                    <h4>Shampoo</h4>
+                    <div class="year">Gupta, Anil et al. — 2018</div>
+                    <p>The progenitor. Maintains Kronecker-factored preconditioners L and R, capturing row and column gradient statistics separately.</p>
+                    <div class="equation">
+                        H = L<sup>−¼</sup> G R<sup>−¼</sup>
+                    </div>
+                    <div class="highlight-stat">
+                        <span class="value">40%</span>
+                        <span class="label">faster wall-clock vs Adam</span>
+                    </div>
+                </div>
+
+                <div class="optimizer-card soap">
+                    <div class="optimizer-icon">🫧</div>
+                    <h4>SOAP</h4>
+                    <div class="year">Vyas et al. — 2024</div>
+                    <p>Shampoo's refined heir. Runs Adam in the eigenbasis of Shampoo's preconditioner, combining the best of both worlds.</p>
+                    <div class="equation">
+                        Adam in Q<sup>T</sup>WP basis
+                    </div>
+                    <div class="highlight-stat">
+                        <span class="value">40%+</span>
+                        <span class="label">fewer iterations vs AdamW</span>
+                    </div>
+                </div>
+
+                <div class="optimizer-card muon">
+                    <div class="optimizer-icon">μ</div>
+                    <h4>Muon</h4>
+                    <div class="year">Keller Jordan — 2024</div>
+                    <p>The minimalist. Orthogonalizes momentum via Newton-Schulz iteration. No second moments, half the memory of Adam.</p>
+                    <div class="equation">
+                        G̃ = NS(momentum)
+                    </div>
+                    <div class="highlight-stat">
+                        <span class="value">2×</span>
+                        <span class="label">compute efficiency vs AdamW</span>
+                    </div>
+                </div>
+
+                <div class="optimizer-card caspr">
+                    <div class="optimizer-icon">∑</div>
+                    <h4>CASPR</h4>
+                    <div class="year">OpenReview — 2023</div>
+                    <p>The theoretician. Combines axis preconditioners via Kronecker-sum approximation. Shampoo is its special case.</p>
+                    <div class="equation">
+                        P ≈ L ⊕ R (Kron-sum)
+                    </div>
+                    <div class="highlight-stat">
+                        <span class="value">Tighter</span>
+                        <span class="label">convergence bounds</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Family tree / relationship diagram -->
+            <div class="family-tree">
+                <h5>L'Arbre Généalogique des Optimiseurs</h5>
+                <svg class="family-tree-svg" viewBox="0 0 700 280" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <!-- Full-Matrix Adagrad (ancestor) -->
+                    <rect x="275" y="10" width="150" height="50" rx="8" fill="#F5F0E8" stroke="#C4B4A4" stroke-width="1.5"/>
+                    <text x="350" y="32" text-anchor="middle" fill="#5A6978" font-family="Fraunces, Georgia" font-size="11">Full-Matrix Adagrad</text>
+                    <text x="350" y="48" text-anchor="middle" fill="#A0AEC0" font-family="Inter" font-size="9">O(n⁴) — impractical</text>
+
+                    <!-- Arrow down to Shampoo -->
+                    <path d="M350 60 L350 90" stroke="#C4B4A4" stroke-width="1.5" marker-end="url(#arrowhead)"/>
+                    <defs>
+                        <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+                            <polygon points="0 0, 10 3.5, 0 7" fill="#C4B4A4"/>
+                        </marker>
+                    </defs>
+
+                    <!-- Shampoo (central) -->
+                    <rect x="275" y="95" width="150" height="55" rx="8" fill="#FFF8F0" stroke="#D4A574" stroke-width="2"/>
+                    <text x="350" y="118" text-anchor="middle" fill="#C49A6C" font-family="Fraunces, Georgia" font-size="13" font-weight="500">Shampoo</text>
+                    <text x="350" y="136" text-anchor="middle" fill="#718096" font-family="Inter" font-size="9">Kronecker factorization</text>
+
+                    <!-- Arrows branching out -->
+                    <path d="M275 122 L180 122 L180 175" stroke="#C4B4A4" stroke-width="1.5"/>
+                    <path d="M425 122 L520 122 L520 175" stroke="#C4B4A4" stroke-width="1.5"/>
+                    <path d="M350 150 L350 175" stroke="#C4B4A4" stroke-width="1.5"/>
+
+                    <!-- CASPR (left) -->
+                    <rect x="105" y="180" width="150" height="55" rx="8" fill="#FFF5F8" stroke="#C4849B" stroke-width="2"/>
+                    <text x="180" y="203" text-anchor="middle" fill="#B47488" font-family="Fraunces, Georgia" font-size="12" font-weight="500">CASPR</text>
+                    <text x="180" y="221" text-anchor="middle" fill="#718096" font-family="Inter" font-size="9">Kronecker-sum approx.</text>
+
+                    <!-- SOAP (center) -->
+                    <rect x="275" y="180" width="150" height="55" rx="8" fill="#F0FFF4" stroke="#7BA05B" stroke-width="2"/>
+                    <text x="350" y="203" text-anchor="middle" fill="#6B9B4B" font-family="Fraunces, Georgia" font-size="12" font-weight="500">SOAP</text>
+                    <text x="350" y="221" text-anchor="middle" fill="#718096" font-family="Inter" font-size="9">+ Adam in eigenbasis</text>
+
+                    <!-- Connection from CASPR to Muon -->
+                    <path d="M180 235 L180 260 L350 260 L350 280" stroke="#C4B4A4" stroke-width="1.5" stroke-dasharray="4 4"/>
+                    <text x="265" y="272" fill="#A0AEC0" font-family="Inter" font-size="8" font-style="italic">without accumulation</text>
+
+                    <!-- Muon (bottom, connected to CASPR) -->
+                    <rect x="445" y="180" width="150" height="55" rx="8" fill="#F0F4FF" stroke="#8B9DC3" stroke-width="2"/>
+                    <text x="520" y="203" text-anchor="middle" fill="#7B8DB3" font-family="Fraunces, Georgia" font-size="12" font-weight="500">Muon</text>
+                    <text x="520" y="221" text-anchor="middle" fill="#718096" font-family="Inter" font-size="9">Newton-Schulz orthog.</text>
+
+                    <!-- Insight annotation -->
+                    <rect x="480" y="245" width="180" height="30" rx="6" fill="#FFF8DC" stroke="#D4A574" stroke-width="1" stroke-dasharray="3 3"/>
+                    <text x="570" y="265" text-anchor="middle" fill="#8B7355" font-family="Fraunces, Georgia" font-size="9" font-style="italic">"CASPR − accumulation = Muon"</text>
+                </svg>
+            </div>
+
+            <div class="impressionist-quote">
+                <blockquote>
+                    "As the impressionists captured light through countless small brushstrokes, so too do these optimizers approximate the curvature of loss through elegant factorizations — each revealing truth through its own particular lens."
+                </blockquote>
+                <cite>— On the Art of Optimization</cite>
+            </div>
+        </div>
+    </section>
+
     <section class="focus" id="focus">
         <div class="focus-header reveal">
             <span class="section-label">Focus Areas</span>