@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@300;400;500&display=swap');
        :root {
            --bg: #030508;
            --bg2: #070b12;
            --card: #0a0f1a;
            --card2: #0e1524;
            --border: #151e35;
            --border-light: #1e2d4a;
            --text: #d4dce8;
            --text-muted: #5a6b82;
            --cyan: #00d2ff;
            --ray: #00d2ff;
            --pink: #ff2d78;
            --electric: #00d4ff;
            --violet: #9b59ff;
            --blue: #3366cc;
            --red: #e84050;
            --green: #00dd66;
            --yellow: #f0c040;
            --orange: #f08030;
            --purple: #8866dd;
            --ivory: #f0ece4;
            --code-bg: #030508;
            --accent: var(--ray);
            --mono: 'IBM Plex Mono', 'JetBrains Mono', 'SF Mono', Consolas, monospace;
            --sans: 'Inter', system-ui, -apple-system, sans-serif;
            /* 3-level reading system */
            --level-noyau: #3b82f6;
            --level-noyau-bg: rgba(59, 130, 246, 0.06);
            --level-noyau-border: rgba(59, 130, 246, 0.35);
            --level-comprehension: #f59e0b;
            --level-comprehension-bg: rgba(245, 158, 11, 0.05);
            --level-comprehension-border: rgba(245, 158, 11, 0.30);
            --level-approfondissement: #ef4444;
            --level-approfondissement-bg: rgba(239, 68, 68, 0.05);
            --level-approfondissement-border: rgba(239, 68, 68, 0.30);
            --cam-x: 0;
            --cam-y: 0;
        }
        * { margin:0; padding:0; box-sizing:border-box; }
        html { scroll-behavior: smooth; }
        body {
            font-family: var(--sans);
            background: var(--bg);
            color: var(--text);
            line-height: 1.7;
            overflow-x: hidden;
        }

        /* Static starfield (CSS-only, zero JS) */
        #starfield {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            z-index: 0; pointer-events: none;
        }
        #starfield::before, #starfield::after {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        }
        #starfield::before {
            background-image:
                radial-gradient(1px 1px at 10% 15%, rgba(0,210,255,0.5) 0%, transparent 100%),
                radial-gradient(1px 1px at 25% 35%, rgba(0,212,255,0.4) 0%, transparent 100%),
                radial-gradient(1.5px 1.5px at 45% 10%, rgba(200,210,230,0.6) 0%, transparent 100%),
                radial-gradient(1px 1px at 60% 50%, rgba(255,45,120,0.4) 0%, transparent 100%),
                radial-gradient(1px 1px at 75% 25%, rgba(155,89,255,0.4) 0%, transparent 100%),
                radial-gradient(1px 1px at 90% 60%, rgba(0,210,255,0.3) 0%, transparent 100%),
                radial-gradient(1.5px 1.5px at 15% 70%, rgba(200,210,230,0.5) 0%, transparent 100%),
                radial-gradient(1px 1px at 35% 85%, rgba(0,212,255,0.3) 0%, transparent 100%),
                radial-gradient(1px 1px at 55% 75%, rgba(255,45,120,0.25) 0%, transparent 100%),
                radial-gradient(1px 1px at 80% 90%, rgba(200,210,230,0.4) 0%, transparent 100%),
                radial-gradient(1px 1px at 5% 45%, rgba(0,210,255,0.35) 0%, transparent 100%),
                radial-gradient(1px 1px at 50% 40%, rgba(200,210,230,0.5) 0%, transparent 100%),
                radial-gradient(1px 1px at 70% 15%, rgba(155,89,255,0.3) 0%, transparent 100%),
                radial-gradient(1px 1px at 30% 55%, rgba(0,212,255,0.35) 0%, transparent 100%),
                radial-gradient(1px 1px at 85% 45%, rgba(200,210,230,0.45) 0%, transparent 100%),
                radial-gradient(1.5px 1.5px at 20% 5%, rgba(0,210,255,0.4) 0%, transparent 100%),
                radial-gradient(1px 1px at 65% 80%, rgba(200,210,230,0.35) 0%, transparent 100%),
                radial-gradient(1px 1px at 40% 20%, rgba(255,45,120,0.3) 0%, transparent 100%),
                radial-gradient(1px 1px at 95% 30%, rgba(0,212,255,0.3) 0%, transparent 100%),
                radial-gradient(1px 1px at 12% 92%, rgba(200,210,230,0.4) 0%, transparent 100%);
        }
        #starfield::after {
            background-image:
                radial-gradient(1px 1px at 8% 28%, rgba(200,210,230,0.5) 0%, transparent 100%),
                radial-gradient(1.5px 1.5px at 22% 62%, rgba(0,210,255,0.4) 0%, transparent 100%),
                radial-gradient(1px 1px at 38% 42%, rgba(0,212,255,0.35) 0%, transparent 100%),
                radial-gradient(1px 1px at 52% 8%, rgba(200,210,230,0.45) 0%, transparent 100%),
                radial-gradient(1px 1px at 68% 68%, rgba(255,45,120,0.3) 0%, transparent 100%),
                radial-gradient(1px 1px at 82% 38%, rgba(155,89,255,0.35) 0%, transparent 100%),
                radial-gradient(1px 1px at 95% 72%, rgba(200,210,230,0.4) 0%, transparent 100%),
                radial-gradient(1.5px 1.5px at 3% 88%, rgba(0,210,255,0.3) 0%, transparent 100%),
                radial-gradient(1px 1px at 18% 48%, rgba(200,210,230,0.5) 0%, transparent 100%),
                radial-gradient(1px 1px at 33% 95%, rgba(0,212,255,0.25) 0%, transparent 100%),
                radial-gradient(1px 1px at 48% 58%, rgba(200,210,230,0.4) 0%, transparent 100%),
                radial-gradient(1px 1px at 63% 22%, rgba(0,210,255,0.3) 0%, transparent 100%),
                radial-gradient(1px 1px at 78% 82%, rgba(200,210,230,0.35) 0%, transparent 100%),
                radial-gradient(1px 1px at 88% 55%, rgba(255,45,120,0.25) 0%, transparent 100%),
                radial-gradient(1px 1px at 42% 32%, rgba(155,89,255,0.3) 0%, transparent 100%),
                radial-gradient(1px 1px at 72% 5%, rgba(200,210,230,0.45) 0%, transparent 100%),
                radial-gradient(1px 1px at 57% 92%, rgba(0,212,255,0.3) 0%, transparent 100%),
                radial-gradient(1px 1px at 92% 18%, rgba(200,210,230,0.4) 0%, transparent 100%);
        }

        /* Scan lines overlay */
        #scan-lines {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none; z-index: 9997;
            background: repeating-linear-gradient(
                0deg,
                transparent 0px, transparent 2px,
                rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px
            );
        }

        /* Cosmic fog overlay — Rayon Vert tricolor (static, no animation) */
        body::before {
            content: '';
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background:
                radial-gradient(ellipse at 20% 50%, rgba(0,210,255,0.025) 0%, transparent 55%),
                radial-gradient(ellipse at 80% 25%, rgba(0,212,255,0.03) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 85%, rgba(255,45,120,0.02) 0%, transparent 45%),
                radial-gradient(ellipse at 65% 60%, rgba(155,89,255,0.015) 0%, transparent 40%);
            pointer-events: none;
            z-index: 0;
        }

        /* Prefers reduced motion */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* Cinematic vignette overlay */
        body::after {
            content: '';
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(ellipse at center, transparent 40%, rgba(3,5,8,0.6) 100%);
            pointer-events: none;
            z-index: 9998;
        }

        /* Film grain — static, no SVG filter, no animation */
        #film-grain {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none; z-index: 9999; opacity: 0.025;
            background-image:
                radial-gradient(circle at 20% 30%, rgba(255,255,255,0.03) 0%, transparent 1%),
                radial-gradient(circle at 60% 70%, rgba(255,255,255,0.02) 0%, transparent 1%),
                radial-gradient(circle at 80% 20%, rgba(255,255,255,0.025) 0%, transparent 1%),
                radial-gradient(circle at 40% 80%, rgba(255,255,255,0.02) 0%, transparent 1%);
            background-size: 3px 3px;
        }

        /* Scroll reveal */
        /* PERF: reveal animation disabled for scroll fluidity.
           Previously: opacity:0 + translateY(30px) on .reveal, made visible
           by IntersectionObserver. But during fast scroll, the observer
           could miss elements, causing content to disappear/reappear.
           Now: all content is visible immediately. The IntersectionObserver
           in guide.html still adds .visible (harmless no-op). */
        .reveal {
            opacity: 1;
            transform: none;
        }
        .reveal.visible {
            opacity: 1;
            transform: none;
        }
        /* Nav */
        nav {
            position: fixed; top:0; left:0; right:0; z-index:100;
            background: rgba(3,5,8,0.92);
            /* backdrop-filter removed for performance */
            border-bottom: 1px solid rgba(21,30,53,0.7);
            padding: 0 24px;
            display: flex; align-items: center; gap: 20px;
            height: 56px;
            will-change: transform; /* PERF: promote to compositor layer */
            transform: translateZ(0); /* force GPU layer */
        }
        nav .logo { font-family:var(--mono); font-weight:500; font-size:1rem; color:var(--ray); white-space:nowrap; letter-spacing:1.5px; text-decoration:none; text-shadow:0 0 20px rgba(0,210,255,0.4), 0 0 40px rgba(0,210,255,0.1); }
        nav .logo span { color:var(--text-muted); font-weight:300; }
        nav .links { display:flex; gap:2px; overflow-x:auto; flex:1; scrollbar-width:none; -ms-overflow-style:none; }
        nav .links::-webkit-scrollbar { display:none; }
        nav a {
            font-family:var(--mono); color:var(--text-muted); text-decoration:none; font-size:0.72rem;
            padding:5px 8px; border-radius:4px; white-space:nowrap;
            transition: all 0.15s; letter-spacing:0.3px;
        }
        nav a { position: relative; }
        nav a::after {
            content: ''; position: absolute; bottom: 2px; left: 50%; width: 0; height: 1px;
            background: linear-gradient(90deg, var(--ray), var(--electric)); transition: all 0.5s ease; transform: translateX(-50%);
            box-shadow: 0 0 8px rgba(0,210,255,0.4);
        }
        nav a:hover::after { width: 60%; }
        nav a:hover, nav a.active { color:var(--ray); background:rgba(0,210,255,0.05); }
        .spacer { height:56px; }

        /* Hero */
        .hero {
            text-align:center; padding:100px 20px 60px;
            background: transparent;
            border-bottom:1px solid rgba(28,38,64,0.4);
            position:relative; overflow:hidden; z-index: 10000;
        }
        .hero::before {
            content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
            background: radial-gradient(ellipse at 25% 50%, rgba(0,210,255,0.05) 0%, transparent 50%),
                        radial-gradient(ellipse at 75% 30%, rgba(0,212,255,0.04) 0%, transparent 50%),
                        radial-gradient(ellipse at 50% 80%, rgba(255,45,120,0.03) 0%, transparent 45%);
        }
        /* hero::after — kept for compatibility, beam replaced by triple light beams */
        .hero::after {
            content:''; position:absolute; top:0; left:0; width:0; height:0;
            z-index:0;
        }

        /* Hero Background Image */
        .hero-bg {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: url('hero-bg.png') center/cover no-repeat;
            opacity: 0.12;
            filter: saturate(0.4) brightness(0.4) contrast(1.2);
        }
        .hero-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background:
                radial-gradient(ellipse at 25% 60%, rgba(0,210,255,0.05) 0%, transparent 50%),
                radial-gradient(ellipse at 75% 30%, rgba(0,212,255,0.04) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 80%, rgba(255,45,120,0.03) 0%, transparent 45%),
                linear-gradient(180deg, var(--bg) 0%, transparent 15%, transparent 85%, var(--bg) 100%);
        }

        /* Triple Light Beams */
        .light-beams {
            display: none !important;
            position: absolute; top: -30%; left: 0; width: 100%; height: 160%;
            z-index: 0; pointer-events: none; overflow: hidden;
            will-change: transform;
        }
        .light-beam {
            position: absolute; top: 0; height: 100%;
        }
        .light-beam.green {
            left: 50%; width: 8px; transform: translateX(-50%);
            background: linear-gradient(180deg,
                transparent 0%, rgba(0,210,255,0.03) 15%, rgba(0,210,255,0.18) 35%,
                rgba(0,210,255,0.36) 50%, rgba(0,210,255,0.18) 65%, rgba(0,210,255,0.03) 85%, transparent 100%);
            animation: greenBeamBreathe 10s ease-in-out infinite;
        }
        .light-beam.green::after {
            content: ''; position: absolute; top: 0; left: -120px; width: 248px; height: 100%;
            background: linear-gradient(180deg,
                transparent 0%, rgba(0,210,255,0.015) 20%, rgba(0,210,255,0.03) 35%,
                rgba(0,210,255,0.04) 50%, rgba(0,210,255,0.03) 65%, rgba(0,210,255,0.015) 80%, transparent 100%);
        }
        .light-beam.pink {
            left: 32%; width: 4px;
            background: linear-gradient(180deg,
                transparent 0%, rgba(255,45,120,0.015) 20%, rgba(255,45,120,0.12) 45%,
                rgba(255,45,120,0.21) 55%, rgba(255,45,120,0.12) 65%, rgba(255,45,120,0.015) 80%, transparent 100%);
            animation: pinkBeamBreathe 13s ease-in-out infinite; animation-delay: -3s;
        }
        .light-beam.pink::after {
            content: ''; position: absolute; top: 0; left: -90px; width: 184px; height: 100%;
            background: linear-gradient(180deg,
                transparent 0%, rgba(255,45,120,0.01) 25%, rgba(255,45,120,0.025) 50%,
                rgba(255,45,120,0.01) 75%, transparent 100%);
        }
        .light-beam.blue {
            left: 68%; width: 4px;
            background: linear-gradient(180deg,
                transparent 0%, rgba(0,212,255,0.015) 20%, rgba(0,212,255,0.12) 40%,
                rgba(0,212,255,0.24) 55%, rgba(0,212,255,0.12) 70%, rgba(0,212,255,0.015) 85%, transparent 100%);
            animation: blueBeamBreathe 15s ease-in-out infinite; animation-delay: -7s;
        }
        .light-beam.blue::after {
            content: ''; position: absolute; top: 0; left: -90px; width: 184px; height: 100%;
            background: linear-gradient(180deg,
                transparent 0%, rgba(0,212,255,0.01) 25%, rgba(0,212,255,0.02) 50%,
                rgba(0,212,255,0.01) 75%, transparent 100%);
        }
        @keyframes greenBeamBreathe { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
        @keyframes pinkBeamBreathe { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.9; } }
        @keyframes blueBeamBreathe { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.85; } }

        /* Lens Flare */
        .lens-flare {
            position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%);
            width: 500px; height: 500px;
            background: radial-gradient(circle,
                rgba(0,210,255,0.12) 0%, rgba(0,212,255,0.06) 30%,
                rgba(255,45,120,0.03) 60%, transparent 70%);
            border-radius: 50%;
            animation: lensFlarePulse 12s ease-in-out infinite;
            pointer-events: none; z-index: 0;
        }
        @keyframes lensFlarePulse {
            0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.9); }
            50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.1); }
        }

        /* Custom SVG Cursors */
        body, a, button, select, input, textarea, .intro-card, .diagram-box, .code-wrapper, .collapse-header, .sidebar a, .badge {
            cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cline x1='12' y1='4' x2='12' y2='10' stroke='%2300ff88' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='12' y1='14' x2='12' y2='20' stroke='%2300ff88' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='4' y1='12' x2='10' y2='12' stroke='%2300ff88' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='14' y1='12' x2='20' y2='12' stroke='%2300ff88' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%2300ff88'/%3E%3Ccircle cx='12' cy='12' r='4' stroke='%2300ff88' stroke-width='0.5' fill='none' opacity='0.3'/%3E%3C/svg%3E") 12 12, crosshair;
        }
        [data-theme="nier"] body, [data-theme="nier"] a, [data-theme="nier"] button, [data-theme="nier"] select, [data-theme="nier"] input, [data-theme="nier"] textarea, [data-theme="nier"] .intro-card, [data-theme="nier"] .diagram-box, [data-theme="nier"] .code-wrapper, [data-theme="nier"] .collapse-header, [data-theme="nier"] .sidebar a, [data-theme="nier"] .badge {
            cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cline x1='12' y1='3' x2='12' y2='9' stroke='%23C4362B' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='12' y1='15' x2='12' y2='21' stroke='%23C4362B' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='3' y1='12' x2='9' y2='12' stroke='%23C4362B' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='15' y1='12' x2='21' y2='12' stroke='%23C4362B' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='5' stroke='%23C4362B' stroke-width='1' fill='none'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23C4362B'/%3E%3C/svg%3E") 12 12, crosshair;
        }

        /* Theme Transition */
        #theme-transition {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            z-index: 10000; pointer-events: none; opacity: 0;
        }
        #theme-transition.transition-to-nier {
            animation: nierGlitch 0.7s ease-out forwards;
        }
        #theme-transition.transition-to-rayon {
            animation: rayonFluorescent 0.9s ease-out forwards;
        }
        #theme-transition.transition-to-rayon::before {
            content: '';
            position: absolute; top: 50%; left: 0; right: 0;
            height: 2px;
            background: rgba(200,220,255,0.9);
            box-shadow: 0 0 30px rgba(200,220,255,0.6), 0 0 60px rgba(200,220,255,0.3), 0 0 100px rgba(0,210,255,0.2);
            animation: rayonLine 0.8s ease-out forwards;
        }
        @keyframes nierGlitch {
            0% { opacity: 0; }
            5% { opacity: 1; background: rgba(245,240,232,0); }
            10% { background: rgba(245,240,232,0.3); transform: translateX(-3px); }
            15% { background: rgba(196,54,43,0.1); transform: translateX(5px); }
            20% { background: rgba(245,240,232,0.5); transform: translateX(-2px); }
            25% { background: rgba(58,110,165,0.1); transform: translateX(3px) skewX(2deg); }
            30% { background: rgba(245,240,232,0.8); transform: translateX(0) skewX(0); }
            40% { background: rgba(245,240,232,1); }
            80% { background: rgba(245,240,232,1); }
            100% { background: rgba(245,240,232,0); opacity: 0; }
        }
        @keyframes rayonFluorescent {
            0% { opacity: 0; background: transparent; }
            5% { opacity: 1; }
            8% { background: rgba(200,220,255,0); }
            12% { background: rgba(200,220,255,0.6); }
            16% { background: rgba(200,220,255,0.05); }
            20% { background: rgba(200,220,255,0.8); }
            24% { background: rgba(200,220,255,0.1); }
            30% { background: rgba(0,210,255,0.05); }
            35% { background: rgba(200,220,255,0.9); }
            40% { background: rgba(3,5,8,0.95); }
            50% { background: rgba(3,5,8,1); }
            55% { box-shadow: inset 0 0 200px rgba(0,210,255,0.1); }
            80% { background: rgba(3,5,8,1); box-shadow: inset 0 0 200px rgba(0,210,255,0.05); }
            100% { background: rgba(3,5,8,0); opacity: 0; box-shadow: none; }
        }
        @keyframes rayonLine {
            0% { opacity: 0; transform: scaleX(0); }
            10% { opacity: 1; transform: scaleX(0.3); }
            20% { opacity: 0.5; transform: scaleX(0.8); }
            30% { opacity: 1; transform: scaleX(1); }
            40% { opacity: 0.8; }
            60% { opacity: 0.3; height: 4px; }
            100% { opacity: 0; height: 100vh; top: 0; }
        }
        .hero h1 { font-family:var(--sans); font-size:clamp(2.2rem,5vw,3.4rem); font-weight:300; position:relative;
            color:var(--ivory); display:inline-block; letter-spacing:-1px; }
        .hero h1 .accent { color:var(--ray); text-shadow:0 0 30px rgba(0,210,255,0.5),0 0 60px rgba(0,210,255,0.2),0 0 100px rgba(0,210,255,0.08); animation: accentPulseGuide 6s ease-in-out infinite, chromaticGuide 20s ease-in-out infinite; }
        @keyframes accentPulseGuide {
            0%, 100% { text-shadow: 0 0 30px rgba(0,210,255,0.5), 0 0 60px rgba(0,210,255,0.2), 0 0 100px rgba(0,210,255,0.08); }
            50% { text-shadow: 0 0 40px rgba(0,210,255,0.6), 0 0 80px rgba(0,212,255,0.2), 0 0 120px rgba(0,210,255,0.1); }
        }
        @keyframes chromaticGuide {
            0%, 100% { filter: none; }
            25% { filter: drop-shadow(-1px 0 0 rgba(255,45,120,0.25)) drop-shadow(1px 0 0 rgba(0,212,255,0.25)); }
            50% { filter: none; }
            75% { filter: drop-shadow(1px 0 0 rgba(255,45,120,0.15)) drop-shadow(-1px 0 0 rgba(0,212,255,0.15)); }
        }
        /* Hero horizontal scanning light */
        .hero-scan {
            position: absolute; top: 0; left: 0; width: 100%; height: 2px;
            background: linear-gradient(90deg, transparent 0%, rgba(0,210,255,0.3) 30%, rgba(0,212,255,0.5) 50%, rgba(0,210,255,0.3) 70%, transparent 100%);
            filter: blur(2px);
            animation: heroScanGuide 10s ease-in-out infinite;
            pointer-events: none; z-index: 2;
            box-shadow: 0 0 25px rgba(0,210,255,0.2), 0 0 50px rgba(0,212,255,0.1);
        }
        @keyframes heroScanGuide {
            0% { top: -2px; opacity: 0; }
            5% { opacity: 1; }
            95% { opacity: 1; }
            100% { top: 100%; opacity: 0; }
        }
        .hero .sub { font-family:var(--mono); font-size:clamp(0.82rem,1.4vw,0.98rem); color:var(--text-muted); max-width:700px; margin:16px auto 0; position:relative; line-height:1.9; font-weight:300; }
        .hero .badges { margin-top:20px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; position:relative; }
        .badge { font-family:var(--mono); display:inline-block; padding:4px 14px; border-radius:2px; font-size:0.72rem; font-weight:400; border:1px solid var(--border); background:rgba(10,15,26,0.7); letter-spacing:0.5px; position:relative; overflow:hidden; animation: badgePulse 6s ease-in-out infinite, badgeGlow 4s ease-in-out infinite; }
        .badge::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(0,210,255,0.08), transparent); animation: badgeShimmer 8s ease-in-out infinite; }
        @keyframes badgeShimmer { 0%, 100% { left:-100%; } 50% { left:100%; } }
        @keyframes badgePulse {
            0%, 100% { box-shadow: 0 0 0 rgba(0,210,255,0); }
            50% { box-shadow: 0 0 14px rgba(0,210,255,0.2), inset 0 0 8px rgba(0,210,255,0.03); }
        }
        @keyframes badgeGlow {
            0%, 100% { text-shadow: none; }
            50% { text-shadow: 0 0 10px currentColor, 0 0 20px currentColor; }
        }
        .badge-c { color:#4fc3f7; border-color:#4fc3f766; box-shadow: 0 0 6px rgba(79,195,247,0.15); }
        .badge-r { color:#f74c00; border-color:#f74c0066; box-shadow: 0 0 6px rgba(247,76,0,0.15); }
        .badge-42 { color:var(--green); border-color:#00cc0066; box-shadow: 0 0 6px rgba(0,204,0,0.15); }

        /* Sections */
        .container { max-width:1100px; margin:0 auto; padding:0 20px; position:relative; z-index:1; }
        section { padding:60px 0; border-bottom:1px solid var(--border); }
        section:last-child { border-bottom:none; }
        h2 { font-family:var(--sans); font-size:1.7rem; margin-bottom:24px; display:flex; align-items:center; gap:12px; font-weight:300; letter-spacing:-0.5px; }
        h2 .num { color:var(--ray); font-size:0.9rem; font-weight:500; opacity:0.7; }
        h3 { font-family:var(--sans); font-size:1.15rem; margin:28px 0 12px; color:var(--ray); font-weight:500; letter-spacing:-0.3px; }
        h4 { font-family:var(--sans); font-size:1rem; margin:20px 0 8px; color:var(--text); font-weight:500; }
        p { margin-bottom:14px; color:var(--text-muted); }
        strong { color:var(--text); }
        a { color:var(--ray); text-decoration:none; }
        a:hover { text-decoration:underline; text-shadow:0 0 8px rgba(0,210,255,0.3); }

        /* Intro cards */
        .intro-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0; }
        @media(max-width:800px) { .intro-grid { grid-template-columns:1fr; } }
        .intro-card {
            background: rgba(10,15,26,0.75); border:1px solid var(--border); border-radius:2px;
            padding:24px; text-align:center; transition:all 0.4s ease;
            border-left: 4px solid var(--ray);
            box-shadow: 0 0 12px rgba(0,210,255,0.06), inset 0 0 20px rgba(0,0,0,0.3);
            position: relative; overflow: hidden;
            backdrop-filter: blur(4px);
        }
        .intro-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--ray), transparent); opacity:0.4; }
        .intro-card::after { content:''; position:absolute; top:-100%; left:-100%; width:300%; height:300%; background:linear-gradient(45deg, transparent 40%, rgba(0,210,255,0.04) 45%, rgba(0,212,255,0.03) 50%, transparent 55%); transition: transform 0.6s ease; transform: translateX(-100%); pointer-events:none; }
        .intro-card:hover::after { transform: translateX(30%); }
        .intro-card:hover { border-color:rgba(0,210,255,0.4); border-left-color:var(--ray); transform:translateY(-4px); box-shadow:0 0 20px rgba(0,210,255,0.15), 0 0 50px rgba(0,212,255,0.06), 0 8px 30px rgba(0,0,0,0.4), inset 0 0 30px rgba(0,210,255,0.03); }
        .intro-card .icon { font-size:2.2rem; margin-bottom:10px; }
        .intro-card .title { font-weight:700; font-size:1.1rem; margin-bottom:6px; text-shadow: 0 0 20px rgba(212,220,232,0.15); }
        .intro-card .desc { font-size:0.85rem; color:var(--text-muted); }

        /* Concept diagram */
        .diagram-box {
            background: rgba(10,15,26,0.8); border:1px solid var(--border); border-radius:2px;
            padding:30px; margin:24px 0; overflow-x:auto; position: relative;
            border-left: 3px solid;
            border-image: linear-gradient(180deg, var(--ray), var(--electric), var(--pink)) 1;
            box-shadow: inset 0 0 30px rgba(0,0,0,0.4);
        }
        /* Corner bracket decorations */
        .diagram-box::before {
            content: '';
            position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px;
            border: 1px solid rgba(0,210,255,0.08);
            border-radius: 0;
            pointer-events: none;
            clip-path: polygon(0 0, 20px 0, 20px 1px, 1px 1px, 1px 20px, 0 20px,
                               0 calc(100% - 20px), 1px calc(100% - 20px), 1px calc(100% - 1px), 20px calc(100% - 1px), 20px 100%,
                               0 100%,
                               calc(100% - 20px) 100%, calc(100% - 20px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 20px), 100% calc(100% - 20px),
                               100% 0,
                               calc(100% - 20px) 0, calc(100% - 20px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) 20px, 100% 20px,
                               100% 0);
        }
        .diagram-box::after, .code-wrapper::after {
            content: '';
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background:
                linear-gradient(rgba(0,210,255,0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,210,255,0.02) 1px, transparent 1px);
            background-size: 24px 24px;
            pointer-events: none;
        }
        .flow-row { display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap; margin:10px 0; }
        .flow-box {
            padding:12px 20px; border-radius:2px; font-size:0.85rem; font-weight:600;
            text-align:center; min-width:100px; position:relative;
            animation: flowPulse 4s ease-in-out infinite;
        }
        @keyframes flowPulse {
            0%, 100% { border-color: inherit; }
            50% { border-color: currentColor; }
        }
        .flow-box.asm { background:#1a3a2a; border:1px solid var(--green); color:var(--green); box-shadow: 0 0 12px rgba(0,221,102,0.15), inset 0 0 8px rgba(0,221,102,0.05); }
        .flow-box.vm { background:#0d2a1a; border:1px solid var(--ray); color:var(--ray); box-shadow: 0 0 12px rgba(0,210,255,0.2), inset 0 0 8px rgba(0,210,255,0.05); }
        .flow-box.champ { background:#2a1a2a; border:1px solid var(--purple); color:var(--purple); box-shadow: 0 0 12px rgba(136,102,221,0.15), inset 0 0 8px rgba(136,102,221,0.05); }
        .flow-arrow { color:var(--text-muted); font-size:1.4rem; padding:0 8px; }

        /* Code blocks */
        .code-wrapper { margin:16px 0; border-radius:2px; overflow:hidden; border:1px solid var(--border); position: relative; border-left: 3px solid; border-image: linear-gradient(180deg, var(--ray), var(--electric), var(--pink)) 1; }
        .code-header {
            display:flex; align-items:center; justify-content:space-between;
            background:var(--card2); padding:8px 16px; font-size:0.78rem;
            border-bottom:1px solid var(--border);
            position: relative; overflow: hidden;
        }
        .code-header::after { content:''; position:absolute; bottom:0; left:0; width:30%; height:1px; background:linear-gradient(90deg, var(--ray), var(--electric)); animation: codeSweep 6s ease-in-out infinite; }
        @keyframes codeSweep { 0%, 100% { left:-30%; opacity:0; } 10% { opacity:1; } 90% { opacity:1; } 100% { left:100%; opacity:0; } }
        .code-header .lang { color:var(--ray); font-weight:500; }
        .code-header .file { color:var(--text-muted); font-family:monospace; font-size:0.75rem; }
        .code-tabs { display:flex; gap:2px; }
        .code-tab {
            padding:4px 12px; border-radius:4px; cursor:pointer;
            font-size:0.78rem; color:var(--text-muted); background:transparent;
            border:none; transition:all 0.2s;
        }
        .code-tab.active { background:var(--ray); color:#000; font-weight:500; }
        .code-tab:hover:not(.active) { color:var(--text); }
        pre { background:rgba(3,5,8,0.9); padding:16px; overflow-x:auto; font-size:0.85rem; line-height:1.5; display:none; position:relative; }
        pre.active { display:block; }
        code { font-family:var(--mono); }
        .kw { color:var(--purple); }
        .fn { color:var(--blue); }
        .str { color:var(--green); }
        .num { color:var(--yellow); }
        .cm { color:#6a737d; font-style:italic; }
        .ty { color:var(--orange); }
        .mac { color:var(--ray); }

        /* Arena visual */
        .arena-visual {
            background: rgba(10,15,26,0.85); border:1px solid var(--border); border-radius:2px;
            padding:24px; margin:20px 0;
            border-left: 4px solid var(--ray);
            box-shadow: 0 0 16px rgba(0,210,255,0.06), inset 0 0 30px rgba(0,0,0,0.3);
        }
        .arena-grid {
            display:grid; grid-template-columns:repeat(32,1fr); gap:1px;
            max-width:100%; aspect-ratio:2/1; margin:0 auto;
        }
        .arena-cell {
            aspect-ratio:1; font-size:0; border-radius:1px;
            transition:all 0.3s;
        }
        .arena-cell.p0 { background:#1a3a5a; box-shadow: 0 0 4px rgba(26,58,90,0.4); }
        .arena-cell.p1 { background:#3a1a3a; box-shadow: 0 0 4px rgba(58,26,58,0.4); }
        .arena-cell.p2 { background:#1a3a2a; box-shadow: 0 0 4px rgba(26,58,42,0.4); }
        .arena-cell.p3 { background:#3a3a1a; box-shadow: 0 0 4px rgba(58,58,26,0.4); }
        .arena-cell.empty { background:#0a0f18; }
        .arena-cell.pc { box-shadow:0 0 10px var(--ray), 0 0 20px rgba(0,210,255,0.3); z-index:1; }
        .arena-legend { display:flex; gap:16px; margin-top:12px; justify-content:center; flex-wrap:wrap; }
        .arena-legend span { font-size:0.8rem; display:flex; align-items:center; gap:6px; }
        .arena-legend .dot { width:12px; height:12px; border-radius:2px; }

        /* Instruction table */
        .op-table { width:100%; border-collapse:collapse; margin:16px 0; font-size:0.82rem; }
        .op-table th { background:var(--card2); padding:10px 8px; text-align:center; color:var(--text-muted);
            font-size:0.72rem; text-transform:uppercase; letter-spacing:0.5px; border-bottom:2px solid var(--ray); position:sticky; top:56px; box-shadow: inset 0 -2px 0 0 var(--electric), inset 0 -3px 8px -2px rgba(0,212,255,0.3); }
        .op-table td { padding:8px; text-align:center; border-bottom:1px solid rgba(21,30,53,0.4); }
        .op-table td:first-child { font-family:monospace; color:var(--ray); font-weight:500; text-align:left; text-shadow:0 0 8px rgba(0,210,255,0.3); }
        .op-table tr:hover { background:rgba(0,210,255,0.04); }
        .op-table tr:hover td:first-child { text-shadow:0 0 14px rgba(0,210,255,0.5); }
        .pill { display:inline-block; padding:2px 8px; border-radius:2px; font-size:0.72rem; font-weight:600; border:1px solid; background:transparent; }
        .pill-yes { color:var(--green); border-color:var(--green); box-shadow: 0 0 8px rgba(0,221,102,0.2); text-shadow:0 0 6px rgba(0,221,102,0.3); }
        .pill-no { color:#ff6666; border-color:#ff6666; box-shadow: 0 0 8px rgba(255,102,102,0.2); text-shadow:0 0 6px rgba(255,102,102,0.3); }
        .pill-idx { color:#4fc3f7; border-color:#4fc3f7; box-shadow: 0 0 8px rgba(79,195,247,0.2); text-shadow:0 0 6px rgba(79,195,247,0.3); }
        .pill-carry { color:var(--yellow); border-color:var(--yellow); box-shadow: 0 0 8px rgba(240,192,64,0.2); text-shadow:0 0 6px rgba(240,192,64,0.3); }

        /* Interactive encoding demo */
        .encoding-demo {
            background: rgba(10,15,26,0.8); border:1px solid var(--border); border-radius:2px;
            padding:24px; margin:20px 0;
            border-left: 3px solid var(--electric);
            box-shadow: 0 0 14px rgba(0,212,255,0.08), inset 0 0 20px rgba(0,0,0,0.3);
        }
        .encoding-demo h4 { color:var(--cyan); margin-bottom:12px; }
        .encoding-row { display:flex; align-items:center; gap:8px; margin:8px 0; flex-wrap:wrap; }
        .enc-token {
            padding:6px 14px; border-radius:2px; font-family:monospace; font-size:0.85rem; font-weight:600;
        }
        .enc-opcode { background:rgba(0,210,255,0.08); color:var(--ray); border:1px solid var(--ray); box-shadow: 0 0 10px rgba(0,210,255,0.15); }
        .enc-acb { background:rgba(240,192,64,0.08); color:var(--yellow); border:1px solid var(--yellow); box-shadow: 0 0 10px rgba(240,192,64,0.15); }
        .enc-reg { background:rgba(0,221,102,0.08); color:var(--green); border:1px solid var(--green); box-shadow: 0 0 10px rgba(0,221,102,0.15); }
        .enc-dir { background:rgba(136,102,221,0.08); color:var(--purple); border:1px solid var(--purple); box-shadow: 0 0 10px rgba(136,102,221,0.15); }
        .enc-ind { background:rgba(240,128,48,0.08); color:var(--orange); border:1px solid var(--orange); box-shadow: 0 0 10px rgba(240,128,48,0.15); }
        .enc-arrow { color:var(--text-muted); font-size:1.2rem; }
        .enc-hex { background:rgba(14,21,36,0.6); color:var(--text); border:1px solid var(--border);
            padding:6px 14px; border-radius:2px; font-family:monospace; font-size:0.85rem; }

        /* Cycle lifecycle */
        .lifecycle { display:flex; flex-direction:column; gap:0; margin:20px 0; max-width:600px; margin-left:auto; margin-right:auto; }
        .lc-step {
            display:flex; gap:16px; padding:16px 0; position:relative;
        }
        .lc-step::before {
            content:''; position:absolute; left:19px; top:40px; bottom:0;
            width:2px; background:linear-gradient(180deg, var(--ray), var(--electric), var(--purple), var(--green));
            box-shadow: 0 0 6px rgba(0,210,255,0.2);
        }
        .lc-step:last-child::before { display:none; }
        .lc-num {
            width:40px; height:40px; border-radius:50%; display:flex; align-items:center;
            justify-content:center; font-weight:700; font-size:0.85rem; flex-shrink:0;
            animation: lcGlow 3s ease-in-out infinite;
        }
        @keyframes lcGlow {
            0%, 100% { box-shadow: 0 0 6px currentColor; }
            50% { box-shadow: 0 0 16px currentColor, 0 0 24px currentColor; }
        }
        .lc-num.fetch { background:rgba(0,210,255,0.1); color:var(--ray); border:2px solid var(--ray); box-shadow: 0 0 10px rgba(0,210,255,0.3); }
        .lc-num.decode { background:rgba(240,192,64,0.1); color:var(--yellow); border:2px solid var(--yellow); box-shadow: 0 0 10px rgba(240,192,64,0.3); }
        .lc-num.wait { background:rgba(136,102,221,0.1); color:var(--purple); border:2px solid var(--purple); box-shadow: 0 0 10px rgba(136,102,221,0.3); }
        .lc-num.exec { background:rgba(0,221,102,0.1); color:var(--green); border:2px solid var(--green); box-shadow: 0 0 10px rgba(0,221,102,0.3); }
        .lc-content .lc-title { font-weight:700; font-size:0.95rem; margin-bottom:4px; }
        .lc-content .lc-desc { font-size:0.85rem; color:var(--text-muted); }

        /* Comparison table */
        .cmp-table { width:100%; border-collapse:collapse; margin:16px 0; }
        .cmp-table th { background:var(--card2); padding:12px; text-align:left; color:var(--text-muted);
            font-size:0.75rem; text-transform:uppercase; border-bottom:2px solid var(--ray); box-shadow: inset 0 -2px 0 0 var(--electric), inset 0 -3px 8px -2px rgba(0,212,255,0.3); }
        .cmp-table td { padding:10px 12px; border-bottom:1px solid rgba(21,30,53,0.4); font-size:0.85rem; color:var(--text-muted); }
        .cmp-table td:first-child { color:var(--text); font-weight:600; text-shadow:0 0 6px rgba(212,220,232,0.15); }
        .cmp-table tr:hover td { background:rgba(0,210,255,0.03); }
        .cmp-table tr:hover td:first-child { color:var(--ray); text-shadow:0 0 10px rgba(0,210,255,0.3); }
        .cmp-table .c-col { color:#4fc3f7; }
        .cmp-table .r-col { color:var(--orange); }
        .cmp-table .win { font-weight:700; }
        .cmp-table .win-c { color:#4fc3f7; }
        .cmp-table .win-r { color:var(--orange); }

        /* Big endian visual */
        .endian-demo { display:flex; gap:4px; justify-content:center; margin:12px 0; flex-wrap:wrap; }
        .endian-byte {
            width:48px; height:48px; display:flex; align-items:center; justify-content:center;
            border-radius:2px; font-family:monospace; font-size:0.8rem; font-weight:700;
        }
        .endian-byte.be { background:rgba(0,212,255,0.08); color:var(--electric); border:1px solid var(--electric); box-shadow:0 0 10px rgba(0,212,255,0.2); }
        .endian-byte.le { background:rgba(240,128,48,0.08); color:var(--orange); border:1px solid var(--orange); box-shadow:0 0 10px rgba(240,128,48,0.2); }
        .endian-label { font-size:0.78rem; color:var(--text-muted); text-align:center; margin-top:4px; }

        /* Collapsible */
        .collapse-header {
            display:flex; align-items:center; justify-content:space-between;
            padding:14px 18px; background:rgba(14,21,36,0.8); border:1px solid var(--border);
            border-radius:2px; cursor:pointer; margin:10px 0; transition:all 0.3s;
            border-left:3px solid var(--ray);
            box-shadow:0 0 8px rgba(0,210,255,0.04);
            position: relative; overflow:hidden;
        }
        .collapse-header:hover { border-color:rgba(0,210,255,0.3); border-left-color:var(--ray); box-shadow:0 0 14px rgba(0,210,255,0.1); }
        .collapse-header .title { font-weight:500; font-size:0.92rem; }
        .collapse-header .chevron { color:var(--ray); transition:transform 0.3s; font-size:1.2rem; text-shadow:0 0 8px rgba(0,210,255,0.4); }
        .collapse-header.open .chevron { transform:rotate(90deg); }
        .collapse-header.open { border-left-color:var(--electric); box-shadow:0 0 14px rgba(0,212,255,0.08); }
        .collapse-body {
            max-height:0; overflow:hidden; transition:max-height 0.4s ease;
            border:1px solid transparent; border-top:none; border-left:3px solid transparent;
        }
        .collapse-body.open { max-height:5000px; border-color:var(--border); border-left-color:rgba(0,212,255,0.3); border-radius:0 0 2px 2px; position:relative; }
        .collapse-body.open::after {
            content:''; position:absolute; top:0; left:0; right:0; bottom:0;
            background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,210,255,0.01) 2px, rgba(0,210,255,0.01) 4px);
            pointer-events:none;
        }
        .collapse-body-inner { padding:16px 18px; }

        /* Tooltip */
        .tip {
            position:relative; cursor:help; border-bottom:1px dashed var(--ray);
            color:var(--ray);
        }
        .tip:hover::after {
            content:attr(data-tip); position:absolute; bottom:120%; left:50%;
            transform:translateX(-50%); background:var(--card2); color:var(--text);
            padding:8px 14px; border-radius:6px; font-size:0.8rem; white-space:nowrap;
            border:1px solid var(--border); z-index:10; pointer-events:none;
        }

        /* Process visual */
        .process-card {
            background:rgba(10,15,26,0.8); border:1px solid var(--border); border-radius:2px;
            padding:20px; margin:12px 0;
            border-left:4px solid var(--electric);
            box-shadow:0 0 12px rgba(0,212,255,0.06), inset 0 0 20px rgba(0,0,0,0.3);
        }
        .reg-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:4px; margin:10px 0; }
        .reg-cell {
            background:rgba(14,21,36,0.8); border:1px solid var(--border); border-radius:1px;
            padding:6px; text-align:center; font-family:monospace; font-size:0.7rem;
            box-shadow:0 0 4px rgba(0,0,0,0.3);
            transition:all 0.2s;
        }
        .reg-cell:hover { border-color:rgba(0,210,255,0.3); box-shadow:0 0 8px rgba(0,210,255,0.1); }
        .reg-cell .reg-name { color:var(--ray); font-weight:500; }
        .reg-cell .reg-val { color:var(--text-muted); margin-top:2px; }
        .reg-cell.r1 { border-color:var(--green); background:#1a2a1a; }

        /* Footer */
        footer { text-align:center; padding:30px 20px; color:var(--text-muted); font-size:0.85rem; }
        footer a { color:var(--ray); text-decoration:none; }
        footer a:hover { text-decoration:underline; text-shadow:0 0 8px rgba(0,210,255,0.3); }
        .footer-holygraph-separator,
        .footer-holygraph-link {
            display: none;
        }
        [data-theme="nier"] .footer-holygraph-separator,
        [data-theme="nier"] .footer-holygraph-link,
        [data-theme="ame"] .footer-holygraph-separator,
        [data-theme="ame"] .footer-holygraph-link {
            display: inline;
        }

        /* Responsive */
        @media(max-width:700px) {
            .hero h1 { font-size:2rem; }
            .reg-grid { grid-template-columns:repeat(4,1fr); }
            .op-table { font-size:0.72rem; }
            .op-table th, .op-table td { padding:6px 4px; }
            nav .links { gap:0; }
            nav a { padding:6px 8px; font-size:0.75rem; }
        }

    /* Arena 3-layer cards */
    .arena-three-layers { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0; }
    @media(max-width:800px) { .arena-three-layers { grid-template-columns:1fr; } }
    .layer-card {
        background: rgba(10,15,26,0.75); border:1px solid var(--border); border-radius:2px;
        padding:20px; text-align:center; transition:all 0.4s;
        border-left: 4px solid var(--electric);
        box-shadow: 0 0 12px rgba(0,212,255,0.06), inset 0 0 20px rgba(0,0,0,0.3);
        position:relative; overflow:hidden;
        backdrop-filter: blur(4px);
    }
    .layer-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--electric), transparent); opacity:0.3; }
    .layer-card::after { content:''; position:absolute; top:-100%; left:-100%; width:300%; height:300%; background:linear-gradient(45deg, transparent 40%, rgba(0,212,255,0.04) 45%, rgba(0,210,255,0.02) 50%, transparent 55%); transition: transform 0.6s ease; transform: translateX(-100%); pointer-events:none; }
    .layer-card:hover::after { transform: translateX(30%); }
    .layer-card:hover { border-color:rgba(0,212,255,0.3); border-left-color:var(--electric); box-shadow:0 0 20px rgba(0,212,255,0.12), inset 0 0 30px rgba(0,212,255,0.02); }
    .layer-icon { font-family:monospace; font-size:1.3rem; font-weight:800; margin-bottom:8px; }
    .layer-title { font-weight:700; font-size:1rem; margin-bottom:6px; color:var(--text); }
    .layer-desc { font-size:0.82rem; color:var(--text-muted); line-height:1.6; }

    /* store_at step diagram */
    .store-step { display:flex; align-items:center; gap:16px; margin:12px 0; padding:10px; border-radius:8px; background:rgba(0,217,217,0.02); }
    .store-iter .iter-num { width:32px; height:32px; border-radius:50%; background:var(--card2); border:2px solid var(--cyan); color:var(--cyan); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.85rem; flex-shrink:0; }
    .store-cells { display:flex; gap:6px; flex:1; justify-content:center; }
    .store-cell { width:80px; background:rgba(14,21,36,0.8); border:1px solid var(--border); border-radius:1px; padding:6px; text-align:center; transition:all 0.3s; box-shadow:0 0 4px rgba(0,0,0,0.3); }
    .store-cell.active-write { border-color:var(--electric); background:rgba(0,212,255,0.1); box-shadow:0 0 12px rgba(0,212,255,0.3), inset 0 0 6px rgba(0,212,255,0.05); }
    .store-cell.done { border-color:#2a4a2a; opacity:0.6; }
    .sc-addr { font-size:0.7rem; color:var(--text-muted); font-family:monospace; }
    .sc-val { font-family:monospace; font-size:0.9rem; font-weight:700; }
    .sc-meta { font-size:0.65rem; margin-top:2px; }
    .store-desc { font-size:0.78rem; color:var(--text-muted); min-width:160px; }

    /* Arena full grid */
    .arena-grid-full {
        display:grid; grid-template-columns:repeat(64,1fr); gap:0;
        max-width:100%; aspect-ratio:1; margin:0 auto;
        background:#0a0e14; border:1px solid var(--border); border-radius:4px; overflow:hidden;
    }
    .arena-cell-mini {
        aspect-ratio:1; font-size:0; transition:all 0.15s; cursor:crosshair;
        border-radius: 0;
    }
    .arena-cell-mini:hover { outline:1px solid var(--ray); outline-offset:-1px; z-index:2; position:relative; box-shadow:0 0 6px rgba(0,210,255,0.3); }
    .arena-cell-mini.cp0 { background:#1a5a8a; box-shadow:0 0 3px rgba(26,90,138,0.3); }
    .arena-cell-mini.cp1 { background:#8a1a6a; box-shadow:0 0 3px rgba(138,26,106,0.3); }
    .arena-cell-mini.cp2 { background:#1a8a3a; box-shadow:0 0 3px rgba(26,138,58,0.3); }
    .arena-cell-mini.cp3 { background:#8a7a1a; box-shadow:0 0 3px rgba(138,122,26,0.3); }
    .arena-cell-mini.cempty { background:#0a0f18; }
    .arena-cell-mini.cpc { box-shadow:inset 0 0 4px var(--ray), 0 0 8px rgba(0,210,255,0.4); z-index:1; }
    .arena-cell-mini.cscrb { background:linear-gradient(135deg,#ff6644 0%,#cc4422 100%); }
    .arena-tooltip {
        position:absolute; top:10px; right:10px; background:var(--card2); border:1px solid var(--border);
        border-radius:8px; padding:10px 14px; font-size:0.82rem; pointer-events:none;
        display:none; z-index:10; min-width:180px;
    }
    .arena-tooltip.visible { display:block; }
    .arena-tooltip .tt-addr { color:var(--ray); font-family:monospace; font-weight:500; }
    .arena-tooltip .tt-val { color:var(--text); font-family:monospace; }
    .arena-tooltip .tt-owner { color:var(--purple); }
    .arena-btn {
        padding:4px 14px; border-radius:6px; border:1px solid var(--border); background:var(--card);
        color:var(--text-muted); font-size:0.82rem; cursor:pointer; transition:all 0.2s;
    }
    .arena-btn.active { background:var(--ray); color:#000; font-weight:500; border-color:var(--ray); }
    .arena-btn:hover:not(.active) { border-color:var(--ray); color:var(--text); }

    /* Arena linear diagram */
    .arena-linear { display:flex; height:50px; border-radius:8px; overflow:hidden; border:1px solid var(--border); }
    .arena-seg { display:flex; align-items:center; justify-content:center; flex:1; flex-direction:column; font-size:0.72rem; position:relative; }
    .arena-seg .seg-label { font-weight:600; color:var(--text); font-size:0.75rem; }
    .arena-seg .seg-addr { font-family:monospace; font-size:0.65rem; color:var(--text-muted); }
    .p1-seg { background:#1a5a8a; }
    .p2-seg { background:#8a1a6a; }
    .p3-seg { background:#1a8a3a; }
    .p4-seg { background:#8a7a1a; }
    .empty-seg { background:#161b22; }

    /* mem_mod examples */
    .memod-examples { display:flex; flex-direction:column; gap:8px; }
    .memod-item { display:flex; align-items:center; gap:12px; padding:8px 12px; border-radius:6px; background:var(--card2); }
    .memod-expr { font-family:monospace; font-size:0.9rem; min-width:180px; color:var(--text); }
    .memod-arrow { color:var(--ray); font-weight:500; font-size:1.1rem; }
    .memod-result { font-family:monospace; font-size:1.1rem; font-weight:700; min-width:50px; }
    .memod-explain { font-size:0.82rem; color:var(--text-muted); }

    /* IDX_MOD demo */
    .idx-demo { display:flex; flex-direction:column; gap:12px; }
    .idx-row { display:flex; align-items:center; gap:12px; }
    .idx-label { font-weight:700; font-size:0.9rem; min-width:50px; text-align:right; }
    .idx-bar-container { flex:1; height:28px; display:flex; border-radius:4px; overflow:hidden; position:relative; background:#161b22; border:1px solid var(--border); }
    .idx-bar { height:100%; }
    .idx-reachable { background:#1a5a3a; flex:0 0 12.5%; }
    .idx-reachable-long { background:#3a3a1a; flex:1; }
    .idx-unreachable { background:#3a1a1a; flex:1; }
    .idx-marker { position:absolute; top:0; bottom:0; width:2px; background:var(--text); z-index:2; }
    .idx-target-short { background:var(--green) !important; width:3px; }
    .idx-target-long { background:var(--orange) !important; width:3px; }
    .idx-result { font-size:0.82rem; min-width:280px; }
    .idx-legend-bar { display:flex; gap:16px; margin-top:12px; justify-content:center; flex-wrap:wrap; }
    .idx-legend-bar span { font-size:0.8rem; display:flex; align-items:center; gap:6px; }

    /* ===== NEW: Enhanced Arena Section Styles ===== */

    /* Ring diagram SVG container */
    .ring-diagram-container {
        display:flex; flex-direction:column; align-items:center; gap:16px;
        background:rgba(10,15,26,0.8); border:1px solid var(--border); border-radius:2px;
        padding:24px; margin:24px 0;
        border-left: 3px solid;
        border-image: linear-gradient(180deg, var(--ray), var(--electric), var(--pink)) 1;
        box-shadow: inset 0 0 30px rgba(0,0,0,0.3);
    }
    .ring-diagram-container svg { max-width:320px; width:100%; }
    .ring-caption { font-size:0.85rem; color:var(--text-muted); text-align:center; max-width:500px; }

    /* Wrap-around interactive */
    .wrap-arena-container {
        background:rgba(10,15,26,0.8); border:1px solid var(--border); border-radius:2px;
        padding:24px; margin:24px 0;
        border-left: 3px solid var(--electric);
        box-shadow: 0 0 12px rgba(0,212,255,0.06), inset 0 0 20px rgba(0,0,0,0.3);
    }
    .wrap-ring-cells {
        display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin:16px 0;
    }
    .wrap-cell {
        width:48px; height:48px; border:1px solid var(--border); border-radius:1px;
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        font-family:monospace; font-size:0.65rem; transition:all 0.3s; position:relative;
        background:rgba(14,21,36,0.8); box-shadow:0 0 4px rgba(0,0,0,0.3);
    }
    .wrap-cell .wc-addr { color:var(--text-muted); font-size:0.6rem; }
    .wrap-cell .wc-val { color:var(--text); font-weight:700; font-size:0.75rem; }
    .wrap-cell.wc-pc {
        border-color:var(--ray); background:#0d2a1a;
        box-shadow:0 0 10px rgba(0,210,255,0.4);
    }
    .wrap-cell.wc-pc .wc-val { color:var(--ray); }
    .wrap-cell.wc-boundary { border-color:var(--yellow); border-style:dashed; }
    .wrap-cell.wc-wrap-highlight {
        animation: wrapPulse 0.6s ease-out;
    }
    @keyframes wrapPulse {
        0% { box-shadow:0 0 15px rgba(0,210,255,0.8); transform:scale(1.1); }
        100% { box-shadow:none; transform:scale(1); }
    }
    .wrap-curve-arrow {
        display:flex; justify-content:center; align-items:center;
        font-size:1.5rem; color:var(--yellow); margin:8px 0;
    }
    .wrap-controls {
        display:flex; gap:10px; justify-content:center; align-items:center; margin:16px 0; flex-wrap:wrap;
    }
    .wrap-btn {
        padding:8px 18px; border-radius:8px; border:1px solid var(--ray);
        background:transparent; color:var(--ray); cursor:pointer; font-size:0.85rem;
        font-weight:500; transition:all 0.2s;
    }
    .wrap-btn:hover { background:var(--ray); color:#000; }
    .wrap-btn:disabled { opacity:0.4; cursor:default; }
    .wrap-info {
        text-align:center; font-family:monospace; font-size:0.85rem;
        padding:8px 16px; background:var(--card2); border-radius:6px;
        border:1px solid var(--border); margin:8px auto; max-width:500px;
    }
    .wrap-info .wi-label { color:var(--text-muted); font-size:0.75rem; }
    .wrap-info .wi-val { color:var(--ray); font-weight:500; font-size:1rem; }

    /* 3-layer stack grid */
    .layer-stack-container {
        background:rgba(10,15,26,0.8); border:1px solid var(--border); border-radius:2px;
        padding:24px; margin:24px 0;
        border-left: 3px solid var(--pink);
        box-shadow: 0 0 12px rgba(255,45,120,0.06), inset 0 0 20px rgba(0,0,0,0.3);
    }
    .layer-stack-grid {
        display:grid; gap:2px; margin:16px 0; width:100%; overflow-x:auto;
    }
    .layer-stack-grid .lsg-header {
        background:rgba(14,21,36,0.8); padding:6px 8px; text-align:center;
        font-size:0.7rem; color:var(--text-muted); font-family:monospace;
        border-radius:1px; border:1px solid var(--border);
    }
    .layer-stack-grid .lsg-label {
        background:rgba(14,21,36,0.8); padding:6px 10px; font-size:0.75rem;
        font-weight:700; border-radius:1px; border:1px solid var(--border);
        display:flex; align-items:center; gap:4px;
    }
    .layer-stack-grid .lsg-cell {
        padding:6px 8px; text-align:center; font-family:monospace;
        font-size:0.75rem; border-radius:1px; border:1px solid var(--border);
        background:rgba(14,21,36,0.8); transition:all 0.4s;
    }
    .layer-stack-grid .lsg-cell.lsg-writing {
        border-color:var(--ray); background:#0d2a1a;
        box-shadow:0 0 8px rgba(0,210,255,0.3);
        animation: lsgWrite 0.5s ease-out;
    }
    .layer-stack-grid .lsg-cell.lsg-done {
        border-color:#2a4a2a; opacity:0.8;
    }
    @keyframes lsgWrite {
        0% { transform:scale(1.1); box-shadow:0 0 15px rgba(0,210,255,0.5); }
        100% { transform:scale(1); }
    }
    .layer-stack-grid .lsg-cell.lsg-arena-val { color:var(--ray); font-weight:500; }
    .layer-stack-grid .lsg-cell.lsg-owner-val { color:var(--purple); font-weight:700; }
    .layer-stack-grid .lsg-cell.lsg-scrb-val { color:var(--yellow); font-weight:700; }

    /* Animated store_at */
    .store-anim-container {
        background:rgba(10,15,26,0.8); border:1px solid var(--border); border-radius:2px;
        padding:24px; margin:24px 0;
        border-left: 3px solid var(--electric);
        box-shadow: 0 0 12px rgba(0,212,255,0.06), inset 0 0 20px rgba(0,0,0,0.3);
    }
    .store-anim-steps { display:flex; flex-direction:column; gap:12px; margin:16px 0; }
    .store-anim-step {
        display:flex; align-items:center; gap:12px; padding:10px;
        border-radius:8px; background:rgba(0,217,217,0.02);
        opacity:0.3; transition:opacity 0.4s, background 0.4s;
    }
    .store-anim-step.sa-active {
        opacity:1; background:rgba(0,210,255,0.06);
    }
    .store-anim-step.sa-done {
        opacity:0.6;
    }

    /* Wrap-around store_at */
    .wrap-store-container {
        background:rgba(10,15,26,0.8); border:1px solid var(--border); border-radius:2px;
        padding:24px; margin:24px 0;
        border-left: 3px solid var(--orange);
        box-shadow: 0 0 12px rgba(240,128,48,0.06), inset 0 0 20px rgba(0,0,0,0.3);
    }
    .wrap-store-grid {
        display:grid; gap:2px; margin:16px 0; width:100%; overflow-x:auto;
    }
    .wrap-store-grid .wsg-header {
        background:var(--card2); padding:6px 8px; text-align:center;
        font-size:0.7rem; color:var(--text-muted); font-family:monospace;
        border-radius:4px; border:1px solid var(--border);
    }
    .wrap-store-grid .wsg-label {
        background:var(--card2); padding:6px 10px; font-size:0.75rem;
        font-weight:700; border-radius:4px; border:1px solid var(--border);
    }
    .wrap-store-grid .wsg-cell {
        padding:6px 8px; text-align:center; font-family:monospace;
        font-size:0.75rem; border-radius:4px; border:1px solid var(--border);
        background:var(--card2); transition:all 0.4s;
    }
    .wrap-store-grid .wsg-cell.wsg-writing {
        border-color:var(--orange); background:#2a1a0a;
        box-shadow:0 0 8px rgba(247,76,0,0.3);
        animation: wsgWrite 0.5s ease-out;
    }
    .wrap-store-grid .wsg-cell.wsg-done { border-color:#2a4a2a; opacity:0.8; }
    @keyframes wsgWrite {
        0% { transform:scale(1.1); box-shadow:0 0 15px rgba(247,76,0,0.5); }
        100% { transform:scale(1); }
    }
    .wsg-cell.wsg-arena-val { color:var(--orange); font-weight:700; }
    .wsg-cell.wsg-owner-val { color:var(--purple); font-weight:700; }
    .wsg-cell.wsg-scrb-val { color:var(--yellow); font-weight:700; }
    .wsg-boundary-marker {
        background:#2a2a1a !important; border-color:var(--yellow) !important;
        border-style:dashed !important;
    }

    /* Champion loading interactive */
    .champ-load-container {
        background:rgba(10,15,26,0.8); border:1px solid var(--border); border-radius:2px;
        padding:24px; margin:24px 0;
        border-left: 3px solid var(--violet);
        box-shadow: 0 0 12px rgba(155,89,255,0.06), inset 0 0 20px rgba(0,0,0,0.3);
    }
    .champ-load-controls {
        display:flex; gap:8px; justify-content:center; margin:16px 0; flex-wrap:wrap;
    }
    .champ-load-bar {
        display:flex; height:60px; border-radius:8px; overflow:hidden;
        border:1px solid var(--border); margin:16px 0; position:relative;
    }
    .champ-load-bar .clb-seg {
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        font-size:0.72rem; position:relative; transition:all 0.5s;
    }
    .champ-load-bar .clb-seg .seg-label { font-weight:600; color:var(--text); font-size:0.75rem; }
    .champ-load-bar .clb-seg .seg-addr { font-family:monospace; font-size:0.65rem; color:var(--text-muted); }
    .champ-load-bar .clb-seg .seg-pc { color:var(--cyan); font-size:0.6rem; font-weight:700; }
    .champ-load-bar .clb-seg .seg-r1 { color:var(--green); font-size:0.6rem; }
    .champ-info-grid {
        display:grid; gap:12px; margin:16px 0;
    }
    .champ-info-card {
        background:var(--card2); border:1px solid var(--border); border-radius:8px;
        padding:12px; font-size:0.82rem;
    }
    .champ-info-card .cic-title { font-weight:700; margin-bottom:4px; }
    .champ-info-card .cic-detail { color:var(--text-muted); font-family:monospace; font-size:0.78rem; }

    /* mem_mod interactive calculator */
    .memod-calc-container {
        background:rgba(10,15,26,0.8); border:1px solid var(--border); border-radius:2px;
        padding:24px; margin:24px 0;
        border-left: 3px solid var(--yellow);
        box-shadow: 0 0 12px rgba(240,192,64,0.06), inset 0 0 20px rgba(0,0,0,0.3);
    }
    .memod-calc-input {
        display:flex; gap:12px; align-items:center; justify-content:center;
        margin:16px 0; flex-wrap:wrap;
    }
    .memod-calc-input input {
        background:var(--card2); border:1px solid var(--border); border-radius:8px;
        padding:10px 16px; color:var(--text); font-family:monospace; font-size:1rem;
        width:180px; text-align:center; outline:none; transition:border-color 0.2s;
    }
    .memod-calc-input input:focus { border-color:var(--ray); }
    .memod-calc-result {
        text-align:center; margin:16px 0; padding:16px; background:var(--card2);
        border-radius:8px; border:1px solid var(--border);
    }
    .memod-calc-result .mcr-steps {
        font-family:monospace; font-size:0.82rem; color:var(--text-muted);
        line-height:2;
    }
    .memod-calc-result .mcr-steps .highlight { color:var(--ray); font-weight:500; }
    .memod-calc-result .mcr-steps .positive { color:var(--green); }
    .memod-calc-result .mcr-steps .negative { color:var(--red); }
    .memod-calc-result .mcr-final {
        font-family:monospace; font-size:1.2rem; font-weight:700; color:var(--green);
        margin-top:8px;
    }
    .memod-ring-mini {
        display:flex; justify-content:center; margin:16px 0;
    }
    .memod-ring-mini svg { max-width:200px; }

    /* Big Endian interactive */
    .endian-interactive {
        background:rgba(10,15,26,0.8); border:1px solid var(--border); border-radius:2px;
        padding:24px; margin:24px 0;
        border-left: 3px solid;
        border-image: linear-gradient(180deg, var(--electric), var(--orange)) 1;
        box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
    }
    .endian-toggle {
        display:flex; gap:4px; justify-content:center; margin:16px 0;
    }
    .endian-toggle-btn {
        padding:8px 20px; border-radius:6px; border:1px solid var(--border);
        background:var(--card2); color:var(--text-muted); cursor:pointer;
        font-size:0.85rem; font-weight:600; transition:all 0.2s;
    }
    .endian-toggle-btn.active { background:var(--ray); color:#000; border-color:var(--ray); }
    .endian-toggle-btn:hover:not(.active) { border-color:var(--ray); color:var(--text); }
    .endian-comparison {
        display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:16px 0;
    }
    @media(max-width:600px) { .endian-comparison { grid-template-columns:1fr; } }
    .endian-side {
        padding:16px; border-radius:8px; border:1px solid var(--border);
        background:var(--card2); text-align:center;
    }
    .endian-side .es-title { font-weight:700; margin-bottom:8px; font-size:0.9rem; }
    .endian-side .es-bytes { display:flex; gap:4px; justify-content:center; margin:12px 0; flex-wrap:wrap; }
    .endian-side .es-byte {
        width:56px; height:56px; display:flex; align-items:center; justify-content:center;
        border-radius:6px; font-family:monospace; font-size:0.85rem; font-weight:700;
        transition:all 0.3s;
    }
    .endian-side .es-byte.be-active { background:#1a2a3a; color:var(--cyan); border:1px solid var(--cyan); }
    .endian-side .es-byte.le-active { background:#3a1a2a; color:var(--orange); border:1px solid var(--orange); }
    .endian-side .es-result {
        font-family:monospace; font-size:0.9rem; margin-top:8px; padding:8px;
        border-radius:6px;
    }
    .endian-side .es-result.correct { color:var(--green); background:#1a2a1a; }
    .endian-side .es-result.wrong { color:var(--red); background:#2a1a1a; }
    .endian-side .es-label { font-size:0.75rem; color:var(--text-muted); margin-top:4px; }

    /* Generic animation button */
    .anim-btn {
        padding:8px 20px; border-radius:8px; border:1px solid var(--ray);
        background:transparent; color:var(--ray); cursor:pointer; font-size:0.85rem;
        font-weight:500; transition:all 0.2s; display:inline-flex; align-items:center; gap:6px;
    }
    .anim-btn:hover { background:var(--ray); color:#000; }
    .anim-btn:disabled { opacity:0.4; cursor:default; background:transparent; color:var(--ray); }
    .anim-btn .anim-icon { font-size:1rem; }

    /* Insight box */
    .insight-box {
        background:linear-gradient(135deg, #0d2a1a 0%, #1a1a2a 100%);
        border:1px solid var(--ray); border-left:4px solid var(--ray);
        border-radius:0 8px 8px 0; padding:16px 20px; margin:20px 0;
    }
    .insight-box .ib-title { color:var(--ray); font-weight:500; font-size:0.9rem; margin-bottom:6px; }
    .insight-box .ib-content { color:var(--text-muted); font-size:0.85rem; line-height:1.7; }

    /* Warning box */
    .warning-box {
        background:linear-gradient(135deg, #2a1a0a 0%, #1a1a1a 100%);
        border:1px solid var(--orange); border-left:4px solid var(--orange);
        border-radius:0 8px 8px 0; padding:16px 20px; margin:20px 0;
    }
    .warning-box .wb-title { color:var(--orange); font-weight:700; font-size:0.9rem; margin-bottom:6px; }
    .warning-box .wb-content { color:var(--text-muted); font-size:0.85rem; line-height:1.7; }

    /* ===== PHASE 1: UX Improvements ===== */

    /* Progress bar */
    #progress-bar {
        position: fixed; top: 0; left: 0; height: 2px; width: 0%;
        background: linear-gradient(90deg, var(--ray), var(--electric));
        z-index: 9999; transition: width 0.1s linear;
        box-shadow: 0 0 8px rgba(0,210,255,0.5);
    }

    /* Sidebar */
    #sidebar {
        position: fixed; top: 56px; left: 0; width: 240px; height: calc(100vh - 56px);
        background: rgba(3,5,8,0.95); border-right: 1px solid var(--border);
        overflow-y: auto; z-index: 50; padding: 16px 0;
        transition: transform 0.3s ease;
        scrollbar-width: thin; scrollbar-color: var(--border) transparent;
        will-change: transform;
        transform: translateZ(0);
    }
    /* FIX Dalloway point 3: .term-wrap et #sidebar sont déjà dans
       dalloway-protocol.css section 3 comme "galets flottants" avec
       border-radius:28px !important. Cette règle guide.css définit
       border-right sur #sidebar — le !important du dalloway écrase
       le border. Pas de conflit de parsing, mais le border-right
       est invisibilisé. Documenté pour traçabilité. */
    #sidebar::-webkit-scrollbar { width: 4px; }
    #sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    #sidebar .sb-section { margin-bottom: 4px; }
    #sidebar .sb-link {
        display: block; padding: 6px 16px 6px 20px; font-family: var(--mono);
        font-size: 0.72rem; color: var(--text-muted); text-decoration: none;
        border-left: 2px solid transparent; transition: all 0.15s;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    #sidebar .sb-link:hover { color: var(--text); background: rgba(0,210,255,0.03); }
    #sidebar .sb-link.active { color: var(--ray); border-left-color: var(--ray); background: rgba(0,210,255,0.05); }
    #sidebar .sb-link.sb-sub { padding-left: 36px; font-size: 0.68rem; }
    #sidebar .sb-title {
        padding: 10px 16px 4px; font-family: var(--mono); font-size: 0.68rem;
        color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px;
        opacity: 0.5;
    }
    @media (min-width: 1101px) {
        body { padding-left: 250px; }
        nav { left: 250px; }
        .container { max-width: 860px; margin: 0 auto; }
    }

    /* Copy button */
    .copy-btn {
        position: absolute; top: 6px; right: 6px; padding: 4px 10px;
        border-radius: 4px; border: 1px solid var(--border);
        background: var(--card); color: var(--text-muted); font-size: 0.7rem;
        font-family: var(--mono); cursor: pointer; opacity: 0;
        transition: all 0.2s; z-index: 5;
    }
    .code-wrapper:hover .copy-btn { opacity: 1; }
    .copy-btn:hover { border-color: var(--ray); color: var(--ray); }
    .copy-btn.copied { color: var(--green); border-color: var(--green); }

    /* Back to top */
    #back-to-top {
        position: fixed; bottom: 24px; right: 24px; width: 40px; height: 40px;
        border-radius: 50%; border: 1px solid var(--border); background: var(--card);
        color: var(--text-muted); font-size: 1.1rem; cursor: pointer;
        opacity: 0; transform: translateY(10px); transition: all 0.3s;
        z-index: 90; display: flex; align-items: center; justify-content: center;
    }
    #back-to-top.visible { opacity: 1; transform: translateY(0); }
    #back-to-top:hover { border-color: var(--ray); color: var(--ray);
        box-shadow: 0 0 15px rgba(0,210,255,0.2); }

    /* Search modal */
    #search-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(3,5,8,0.85); z-index: 10000; display: none;
        align-items: flex-start; justify-content: center; padding-top: 120px;
    }
    #search-overlay.open { display: flex; }
    #search-box {
        width: 90%; max-width: 600px; background: rgba(10,15,26,0.95);
        border: 1px solid var(--border); border-radius: 2px;
        overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 20px rgba(0,210,255,0.05);
    }
    #search-input {
        width: 100%; padding: 16px 20px; background: transparent;
        border: none; color: var(--text); font-family: var(--mono);
        font-size: 1rem; outline: none;
    }
    #search-input::placeholder { color: var(--text-muted); }
    #search-results {
        max-height: 400px; overflow-y: auto; border-top: 1px solid var(--border);
    }
    .search-result {
        padding: 10px 20px; cursor: pointer; border-bottom: 1px solid var(--border);
        transition: background 0.15s;
    }
    .search-result:hover { background: rgba(0,210,255,0.05); }
    .search-result .sr-section { font-size: 0.7rem; color: var(--ray); font-family: var(--mono); }
    .search-result .sr-text { font-size: 0.85rem; color: var(--text-muted); margin-top: 2px; }
    .search-result mark { background: rgba(0,210,255,0.2); color: var(--ray); border-radius: 2px; padding: 0 2px; }
    .search-hint {
        padding: 12px 20px; font-size: 0.75rem; color: var(--text-muted);
        text-align: center; border-top: 1px solid var(--border);
    }
    .search-hint kbd {
        background: var(--card2); border: 1px solid var(--border);
        border-radius: 3px; padding: 1px 6px; font-family: var(--mono);
        font-size: 0.7rem;
    }

    /* Mobile hamburger */
    #menu-toggle {
        display: none; background: none; border: none; color: var(--text-muted);
        font-size: 1.3rem; cursor: pointer; padding: 4px 8px;
    }
    @media(max-width: 1100px) {
        body { padding-left: 0 !important; }
        nav { left: 0 !important; }
        #sidebar { transform: translateX(-100%); }
        #sidebar.open { transform: translateX(0); }
        #menu-toggle { display: block; }
        .container { max-width: 100%; }
    }
    @media(max-width: 700px) {
        #sidebar { width: 200px; }
    }

    /* PDF download button */
    #pdf-btn {
        background: none;
        border: 1px solid var(--border);
        color: var(--text-muted);
        border-radius: 4px;
        padding: 4px 10px;
        font-family: var(--mono);
        font-size: 0.75rem;
        cursor: pointer;
        transition: all 0.2s;
    }
    #pdf-btn:hover {
        border-color: var(--ray);
        color: var(--ray);
        box-shadow: 0 0 8px rgba(0,210,255,0.15);
    }
    body.theme-light #pdf-btn:hover {
        border-color: var(--nier-accent);
        color: var(--nier-accent);
        box-shadow: 0 0 8px rgba(201,168,76,0.2);
    }

    /* PDF generation overlay */
    #pdf-overlay {
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.85);
        display: none;
        align-items: center; justify-content: center;
        z-index: 99999;
        flex-direction: column; gap: 20px;
    }
    #pdf-overlay.active { display: flex; }
    #pdf-overlay .spinner {
        width: 48px; height: 48px;
        border: 3px solid rgba(0,210,255,0.2);
        border-top-color: var(--ray);
        border-radius: 50%;
        animation: pdf-spin 0.8s linear infinite;
    }
    body.theme-light #pdf-overlay .spinner {
        border-color: rgba(201,168,76,0.2);
        border-top-color: var(--nier-accent);
    }
    #pdf-overlay .pdf-text {
        font-family: var(--mono);
        color: var(--ray);
        font-size: 0.9rem;
        letter-spacing: 0.05em;
    }
    body.theme-light #pdf-overlay .pdf-text {
        color: var(--nier-accent);
    }
    @keyframes pdf-spin {
        to { transform: rotate(360deg); }
    }

    /* Print styles — also used by html2pdf */
    @media print {
        #sidebar, #progress-bar, #back-to-top, #search-overlay,
        #starfield, #scan-lines, #film-grain, nav, .hero-scan,
        .copy-btn, #menu-toggle, #pdf-btn, #pdf-overlay { display: none !important; }
        body { background: white; color: black; }
        body::before, body::after { display: none; }
        .hero { padding: 40px 20px; }
        .hero h1 { color: black; }
        .hero h1 .accent { color: #006633; text-shadow: none; }
        section { border-bottom: 1px solid #ccc; page-break-inside: avoid; }
        .code-wrapper { border: 1px solid #ccc; }
        pre { background: #f5f5f5; }
        .intro-card, .layer-card, .process-card { border: 1px solid #ccc; }
        .container { max-width: 100%; }
        body { padding-left: 0 !important; }
        nav { left: 0 !important; }
        .reveal { opacity: 1 !important; transform: none !important; }
        .insight-box { page-break-inside: avoid; border: 1px solid #ccc !important; }
        .anim-btn, .arena-btn, .wrap-btn, .filter-btn, .sim-btn,
        .endian-toggle-btn, .quiz-opt, .code-tab, .collapse-header::after { display: none !important; }
        .collapse-content { display: block !important; max-height: none !important; overflow: visible !important; }
    }

    /* Quiz */
    .quiz-box {
        background: rgba(10,15,26,0.85); border: 1px solid var(--border); border-radius: 2px;
        padding: 24px; margin: 32px 0 0; position: relative;
        border-left: 4px solid var(--violet);
        box-shadow: 0 0 14px rgba(155,89,255,0.08), inset 0 0 20px rgba(0,0,0,0.3);
    }
    .quiz-box::before {
        content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(135deg, rgba(155,89,255,0.03) 0%, transparent 40%);
        pointer-events: none; border-radius: 2px;
    }
    .quiz-title {
        font-family: var(--mono); font-size: 0.85rem; color: var(--ray);
        margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
    }
    .quiz-q {
        margin-bottom: 16px; padding: 12px; background: var(--card2);
        border-radius: 8px; border: 1px solid var(--border);
    }
    .quiz-q .qq-text {
        font-size: 0.9rem; color: var(--text); margin-bottom: 10px; font-weight: 500;
    }
    .quiz-q .qq-options {
        display: flex; flex-direction: column; gap: 6px;
    }
    .quiz-opt {
        padding: 8px 14px; border-radius: 6px; border: 1px solid var(--border);
        background: var(--card2); color: var(--text-muted); font-size: 0.82rem;
        cursor: pointer; transition: all 0.2s; text-align: left; font-family: var(--mono);
    }
    .quiz-opt:hover { border-color: var(--ray); color: var(--text); }
    .quiz-opt.correct { border-color: var(--green); color: var(--green); background: #1a2a1a; }
    .quiz-opt.wrong { border-color: var(--red); color: var(--red); background: #2a1a1a; }
    .quiz-opt.disabled { pointer-events: none; opacity: 0.7; }
    .quiz-q .qq-explain {
        margin-top: 8px; font-size: 0.8rem; color: var(--text-muted);
        display: none; line-height: 1.6; padding: 8px; border-radius: 6px;
        background: rgba(0,210,255,0.03); border-left: 2px solid var(--ray);
    }
    .quiz-q .qq-explain.visible { display: block; }
    .quiz-score {
        text-align: center; font-family: var(--mono); font-size: 0.85rem;
        color: var(--text-muted); margin-top: 12px;
    }

    /* Filterable table */
    .filter-bar {
        display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0;
    }
    .filter-btn {
        padding: 4px 12px; border-radius: 20px; border: 1px solid var(--border);
        background: var(--card); color: var(--text-muted); font-family: var(--mono);
        font-size: 0.72rem; cursor: pointer; transition: all 0.2s;
    }
    .filter-btn:hover { border-color: var(--ray); color: var(--text); }
    .filter-btn.active { background: var(--ray); color: #000; border-color: var(--ray); font-weight: 500; }
    .op-table tr.filtered-out { display: none; }

    /* Cycle to die animation */
    .ctd-visual {
        background: rgba(10,15,26,0.8); border: 1px solid var(--border); border-radius: 2px;
        padding: 24px; margin: 24px 0;
        border-left: 3px solid var(--orange);
        box-shadow: 0 0 12px rgba(240,128,48,0.06), inset 0 0 20px rgba(0,0,0,0.3);
    }
    .ctd-bar-container {
        position: relative; height: 40px; background: var(--card2);
        border-radius: 8px; overflow: hidden; border: 1px solid var(--border);
        margin: 16px 0;
    }
    .ctd-bar {
        height: 100%; border-radius: 7px; transition: width 0.5s ease, background 0.5s ease;
        display: flex; align-items: center; justify-content: center;
        font-family: var(--mono); font-size: 0.75rem; font-weight: 600;
        min-width: 60px;
    }
    .ctd-bar.ctd-green { background: linear-gradient(90deg, #1a5a3a, #2a7a4a); color: var(--green); }
    .ctd-bar.ctd-yellow { background: linear-gradient(90deg, #3a3a1a, #5a5a2a); color: var(--yellow); }
    .ctd-bar.ctd-orange { background: linear-gradient(90deg, #3a2a1a, #5a4a2a); color: var(--orange); }
    .ctd-bar.ctd-red { background: linear-gradient(90deg, #3a1a1a, #5a2a2a); color: var(--red); }
    .ctd-stats {
        display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0;
    }
    @media(max-width:600px) { .ctd-stats { grid-template-columns: repeat(2, 1fr); } }
    .ctd-stat {
        background: var(--card2); border: 1px solid var(--border); border-radius: 8px;
        padding: 10px; text-align: center;
    }
    .ctd-stat .cs-label { font-size: 0.7rem; color: var(--text-muted); font-family: var(--mono); }
    .ctd-stat .cs-value { font-size: 1.1rem; font-weight: 700; font-family: var(--mono); margin-top: 2px; }
    .ctd-controls {
        display: flex; gap: 8px; justify-content: center; margin-top: 12px;
    }
    .ctd-log {
        max-height: 150px; overflow-y: auto; margin-top: 12px; font-family: var(--mono);
        font-size: 0.72rem; color: var(--text-muted); line-height: 1.6;
        padding: 8px; background: var(--card2); border-radius: 6px; border: 1px solid var(--border);
    }
    .ctd-log .log-accel { color: var(--orange); }
    .ctd-log .log-check { color: var(--text-muted); }
    .ctd-log .log-death { color: var(--red); font-weight: 700; }

    /* ── Mini-Simulateur VM ── */
    #simulateur { position: relative; }
    #simulateur h2 { margin-bottom: .5rem; }
    .sim-intro { color: var(--text-muted); margin-bottom: 1.5rem; max-width: 700px; }
    .sim-container {
        background: var(--bg2);
        border: 1px solid var(--border);
        border-radius: 2px;
        overflow: hidden;
        border-left: 4px solid var(--ray);
        box-shadow: 0 0 16px rgba(0,210,255,0.06);
    }

    /* Controls bar */
    .sim-controls {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        background: var(--card);
        border-bottom: 1px solid var(--border);
        flex-wrap: wrap;
    }
    .sim-btn {
        font-family: var(--mono);
        font-size: 13px;
        padding: 6px 14px;
        border-radius: 6px;
        border: 1px solid var(--border-light);
        background: var(--card2);
        color: var(--text);
        cursor: pointer;
        transition: all .2s;
        white-space: nowrap;
    }
    .sim-btn:hover {
        border-color: var(--ray);
        box-shadow: 0 0 8px rgba(0,210,255,.25);
        color: var(--ray);
    }
    .sim-btn:active { transform: scale(.96); }
    .sim-btn.active {
        border-color: var(--ray);
        color: var(--ray);
        box-shadow: 0 0 12px rgba(0,210,255,.3);
    }
    .sim-btn.reset-btn:hover {
        border-color: var(--pink);
        box-shadow: 0 0 8px rgba(255,45,120,.25);
        color: var(--pink);
    }
    .sim-sep {
        width: 1px;
        height: 24px;
        background: var(--border);
        flex-shrink: 0;
    }
    .sim-speed-group {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .sim-speed-label {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--text-muted);
    }
    .sim-speed-val {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--ray);
        min-width: 28px;
    }
    .sim-speed-slider {
        -webkit-appearance: none;
        width: 100px;
        height: 4px;
        border-radius: 2px;
        background: var(--border);
        outline: none;
    }
    .sim-speed-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 14px; height: 14px;
        border-radius: 50%;
        background: var(--ray);
        cursor: pointer;
        box-shadow: 0 0 6px rgba(0,210,255,.5);
    }
    .sim-speed-slider::-moz-range-thumb {
        width: 14px; height: 14px;
        border-radius: 50%;
        background: var(--ray);
        cursor: pointer;
        border: none;
    }
    .sim-stat {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--text-muted);
        margin-left: auto;
        display: flex;
        gap: 16px;
    }
    .sim-stat span { color: var(--text); }
    .sim-stat .ctd-val { color: var(--orange); }

    /* Main layout */
    .sim-main {
        display: flex;
        gap: 0;
    }

    /* Arena panel */
    .sim-arena-panel {
        padding: 12px;
        flex-shrink: 0;
    }
    .sim-arena-grid {
        display: grid;
        grid-template-columns: repeat(32, 1fr);
        gap: 1px;
        background: var(--border);
        border: 1px solid var(--border);
        border-radius: 4px;
        overflow: hidden;
        width: fit-content;
    }
    .sim-cell {
        width: 14px;
        height: 14px;
        background: #0a0e17;
        transition: background .15s, box-shadow .3s;
        position: relative;
        cursor: crosshair;
    }
    .sim-cell.p1 { background: #1a3a6e; }
    .sim-cell.p2 { background: #6e1a3a; }
    .sim-cell.pc1 {
        box-shadow: inset 0 0 4px rgba(51,102,204,.9), 0 0 6px rgba(51,102,204,.6);
        animation: sim-pc-pulse 1s ease-in-out infinite;
    }
    .sim-cell.pc2 {
        box-shadow: inset 0 0 4px rgba(255,45,120,.9), 0 0 6px rgba(255,45,120,.6);
        animation: sim-pc-pulse 1s ease-in-out infinite;
    }
    .sim-cell.write-flash {
        animation: sim-write-flash .4s ease-out;
    }
    @keyframes sim-pc-pulse {
        0%, 100% { filter: brightness(1); }
        50% { filter: brightness(1.6); }
    }
    @keyframes sim-write-flash {
        0% { filter: brightness(2.5); }
        100% { filter: brightness(1); }
    }
    .sim-arena-legend {
        display: flex;
        gap: 16px;
        margin-top: 8px;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--text-muted);
    }
    .sim-arena-legend .leg-item {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .sim-arena-legend .leg-dot {
        width: 10px; height: 10px;
        border-radius: 2px;
    }
    .sim-arena-legend .leg-dot.p1-dot { background: #3366cc; }
    .sim-arena-legend .leg-dot.p2-dot { background: #cc3366; }
    .sim-arena-legend .leg-dot.empty-dot { background: #0a0e17; border: 1px solid var(--border); }

    /* Tooltip */
    .sim-tooltip {
        position: fixed;
        z-index: 9999;
        background: var(--card);
        border: 1px solid var(--border-light);
        border-radius: 6px;
        padding: 6px 10px;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--text);
        pointer-events: none;
        display: none;
        box-shadow: 0 4px 20px rgba(0,0,0,.5);
    }
    .sim-tooltip .tt-addr { color: var(--electric); }
    .sim-tooltip .tt-val { color: var(--ray); }
    .sim-tooltip .tt-owner { color: var(--text-muted); }

    /* Info panel */
    .sim-info-panel {
        flex: 1;
        min-width: 0;
        border-left: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        max-height: 520px;
    }

    /* Phase indicator */
    .sim-phases {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--border);
        background: var(--card);
    }
    .sim-phases-label {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--text-muted);
        margin-right: 4px;
    }
    .sim-phase-step {
        font-family: var(--mono);
        font-size: 11px;
        padding: 3px 8px;
        border-radius: 4px;
        background: var(--bg2);
        color: var(--text-muted);
        border: 1px solid transparent;
        transition: all .25s;
    }
    .sim-phase-step.active-fetch {
        color: var(--electric);
        border-color: var(--electric);
        background: rgba(0,212,255,.08);
        box-shadow: 0 0 8px rgba(0,212,255,.2);
    }
    .sim-phase-step.active-decode {
        color: var(--violet);
        border-color: var(--violet);
        background: rgba(155,89,255,.08);
        box-shadow: 0 0 8px rgba(155,89,255,.2);
    }
    .sim-phase-step.active-wait {
        color: var(--yellow);
        border-color: var(--yellow);
        background: rgba(240,192,64,.08);
        box-shadow: 0 0 8px rgba(240,192,64,.2);
        animation: sim-wait-pulse 0.8s ease-in-out infinite;
    }
    .sim-phase-step.active-exec {
        color: var(--ray);
        border-color: var(--ray);
        background: rgba(0,210,255,.08);
        box-shadow: 0 0 8px rgba(0,210,255,.2);
    }
    @keyframes sim-wait-pulse {
        0%,100% { opacity:1; }
        50% { opacity:.6; }
    }
    .sim-phase-arrow {
        color: var(--border-light);
        font-size: 10px;
    }

    /* Process list */
    .sim-processes {
        flex: 1;
        overflow-y: auto;
        padding: 8px;
        scrollbar-width: thin;
        scrollbar-color: var(--border-light) transparent;
    }
    .sim-processes::-webkit-scrollbar { width: 4px; }
    .sim-processes::-webkit-scrollbar-track { background: transparent; }
    .sim-processes::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }

    .sim-proc-card {
        padding: 8px 10px;
        border-radius: 6px;
        border: 1px solid var(--border);
        background: var(--bg2);
        margin-bottom: 6px;
        cursor: pointer;
        transition: all .2s;
        animation: sim-proc-in .3s ease-out;
    }
    .sim-proc-card:hover {
        border-color: var(--border-light);
    }
    .sim-proc-card.selected {
        border-color: var(--ray);
        box-shadow: 0 0 8px rgba(0,210,255,.15);
    }
    .sim-proc-card.dead {
        animation: sim-proc-out .4s ease-out forwards;
    }
    @keyframes sim-proc-in {
        from { opacity:0; transform:translateX(10px); }
        to { opacity:1; transform:translateX(0); }
    }
    @keyframes sim-proc-out {
        from { opacity:1; transform:translateX(0); }
        to { opacity:0; transform:translateX(-10px); height:0; padding:0; margin:0; border:0; overflow:hidden; }
    }
    .sim-proc-header {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 4px;
    }
    .sim-proc-owner-dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .sim-proc-owner-dot.p1-dot { background: #3366cc; box-shadow: 0 0 4px rgba(51,102,204,.5); }
    .sim-proc-owner-dot.p2-dot { background: #cc3366; box-shadow: 0 0 4px rgba(204,51,102,.5); }
    .sim-proc-id {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--text);
        font-weight: 600;
    }
    .sim-proc-pc {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--text-muted);
        margin-left: auto;
    }
    .sim-proc-detail {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--mono);
        font-size: 10px;
        color: var(--text-muted);
    }
    .sim-proc-opcode {
        color: var(--electric);
    }
    .sim-proc-carry {
        color: var(--yellow);
    }
    .sim-proc-lives {
        color: var(--ray);
    }

    /* Register view */
    .sim-registers {
        border-top: 1px solid var(--border);
        background: var(--card);
        padding: 8px;
        max-height: 200px;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--border-light) transparent;
    }
    .sim-registers::-webkit-scrollbar { width: 4px; }
    .sim-registers::-webkit-scrollbar-track { background: transparent; }
    .sim-registers::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }
    .sim-regs-title {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--text-muted);
        margin-bottom: 6px;
    }
    .sim-regs-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
    }
    .sim-reg-item {
        font-family: var(--mono);
        font-size: 10px;
        padding: 3px 5px;
        border-radius: 3px;
        background: var(--bg2);
        border: 1px solid var(--border);
        color: var(--text);
        display: flex;
        justify-content: space-between;
    }
    .sim-reg-item .reg-name { color: var(--text-muted); }
    .sim-reg-item .reg-val { color: var(--ray); }

    /* Execution log */
    .sim-log-container {
        border-top: 1px solid var(--border);
        background: var(--card);
    }
    .sim-log-header {
        padding: 6px 12px;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--text-muted);
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .sim-log {
        height: 160px;
        overflow-y: auto;
        padding: 6px 12px;
        font-family: var(--mono);
        font-size: 11px;
        line-height: 1.6;
        scrollbar-width: thin;
        scrollbar-color: var(--border-light) transparent;
    }
    .sim-log::-webkit-scrollbar { width: 4px; }
    .sim-log::-webkit-scrollbar-track { background: transparent; }
    .sim-log::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 2px; }
    .sim-log-entry {
        animation: sim-log-in .2s ease-out;
    }
    @keyframes sim-log-in {
        from { opacity:0; transform:translateY(4px); }
        to { opacity:1; transform:translateY(0); }
    }
    .sim-log-entry .log-cycle { color: var(--text-muted); }
    .sim-log-entry .log-p1 { color: #5588dd; }
    .sim-log-entry .log-p2 { color: #dd5588; }
    .sim-log-entry .log-op { color: var(--electric); }
    .sim-log-entry .log-detail { color: var(--text-muted); }
    .sim-log-entry.log-death { color: var(--red); font-weight: 600; }
    .sim-log-entry.log-fork { color: var(--violet); }
    .sim-log-entry.log-ctd { color: var(--orange); font-weight: 600; }

    /* Game-over overlay */
    .sim-gameover {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(3,5,8,.85);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 10;
        animation: sim-go-in .5s ease-out;
    }
    @keyframes sim-go-in {
        from { opacity:0; }
        to { opacity:1; }
    }
    .sim-gameover h3 {
        font-family: var(--mono);
        font-size: 28px;
        color: var(--ray);
        text-shadow: 0 0 20px rgba(0,210,255,.5);
        margin-bottom: 8px;
    }
    .sim-gameover p {
        font-family: var(--mono);
        font-size: 14px;
        color: var(--text-muted);
    }

    /* Responsive */
    @media (max-width: 900px) {
        .sim-main {
            flex-direction: column;
        }
        .sim-info-panel {
            border-left: none;
            border-top: 1px solid var(--border);
            max-height: 400px;
        }
        .sim-arena-panel {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .sim-cell {
            width: 10px;
            height: 10px;
        }
        .sim-controls {
            gap: 4px;
        }
        .sim-speed-slider {
            width: 70px;
        }
        .sim-stat {
            margin-left: 0;
            width: 100%;
            justify-content: center;
        }
    }
    @media (max-width: 520px) {
        .sim-cell {
            width: 8px;
            height: 8px;
        }
    }

    /* ══ THEME TOGGLE BUTTON ══ */
    .theme-toggle {
        background: none;
        border: 1px solid var(--border);
        color: var(--text-muted);
        border-radius: 6px;
        padding: 5px 10px;
        cursor: pointer;
        font-size: 1rem;
        transition: all 0.3s;
        display: flex;
        align-items: center;
        gap: 4px;
        font-family: var(--mono);
        line-height: 1;
    }
    .theme-toggle:hover {
        border-color: var(--ray);
        color: var(--ray);
    }
    [data-theme="nier"] .theme-toggle {
        border-color: #D4CFC6;
        color: #6B6560;
    }
    [data-theme="nier"] .theme-toggle:hover {
        border-color: #C4362B;
        color: #C4362B;
    }

    /* ══ NIER AUTOMATA IMMERSIVE THEME v5.0 ══ */
    [data-theme="nier"] {
        --bg: #F5F0E8;
        --bg2: #EDE8DF;
        --card: #EDE5D5; /* malloc --paper */
        --card2: #E4DBC8; /* malloc --paper-2 */
        --border: #B8B0A0; /* malloc --line */
        --border-light: #D6CDBB; /* malloc --line-soft */
        --text: #1A1A1A; /* malloc --fg */
        --text-muted: #6B6357; /* malloc --fg-mute */
        --ray: #C4362B; /* malloc --accent */
        --pink: #C4362B;
        --electric: #C4362B;
        --violet: #8E271F;
        --blue: #3A6EA5;
        --red: #C4362B;
        --green: #5E7A4E; /* malloc --tip */
        --yellow: #B8882A; /* malloc --warn */
        --orange: #B8882A;
        --purple: #8E271F;
        --ivory: #D4CFC6;
        --code-bg: #1A1A1A;
        --accent: #C4362B;
        --cyan: #C4362B; /* Prevent blue leak */
        /* NieR Typography */
        --nier-heading: 'Cinzel', 'Playfair Display', serif;
        --nier-subheading: 'EB Garamond', 'Georgia', serif;
        --nier-body: 'Source Sans 3', 'Inter', sans-serif;
        --nier-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;
        /* NieR Extended Palette */
        --nier-parchment: #F5F0E8;
        --nier-void: #1A1A1A;
        --nier-crimson: #C4362B;
        --nier-crimson-dim: #8B2519;
        --nier-crimson-glow: rgba(196,54,43,0.25);
        --nier-ash: #D4CFC6;
        --nier-smoke: #6B6560;
        --nier-bone: #FFFFFF;
        --nier-steel: #3A6EA5;
        /* Level Colors */
        --level-noyau: #3A6EA5;
        --level-noyau-bg: rgba(58, 110, 165, 0.08);
        --level-noyau-border: rgba(58, 110, 165, 0.35);
        --level-comprehension: #B8882A;
        --level-comprehension-bg: rgba(184, 136, 42, 0.06);
        --level-comprehension-border: rgba(184, 136, 42, 0.30);
        --level-approfondissement: #C4362B;
        --level-approfondissement-bg: rgba(196, 54, 43, 0.06);
        --level-approfondissement-border: rgba(196, 54, 43, 0.30);
    }
    [data-theme="nier"] body { background: #F5F0E8; }

    /* Couche 1 — Grain de parchemin (feTurbulence noise) */
    [data-theme="nier"] body::before {
        content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
        background:
            radial-gradient(ellipse at 20% 50%, rgba(196,54,43,0.03) 0%, transparent 55%),
            radial-gradient(ellipse at 80% 25%, rgba(58,110,165,0.03) 0%, transparent 50%),
            radial-gradient(ellipse at 50% 85%, rgba(196,54,43,0.02) 0%, transparent 45%);
    }
    [data-theme="nier"] body::after {
        content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
        opacity: 0.5;
    }

    /* Couche 3 — Lignes de scan horizontales */
    [data-theme="nier"]::after {
        content: ''; position: fixed; inset: 0; z-index: 2; pointer-events: none;
        background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0,0,0,0.02) 3px, rgba(0,0,0,0.02) 4px);
    }

    /* Masquer les effets des autres thèmes */
    [data-theme="nier"] #starfield { display: none; }
    [data-theme="nier"] #film-grain { display: none; }
    [data-theme="nier"] #scan-lines { display: none; }
    [data-theme="nier"] #nier-bg { display: none !important; }
    [data-theme="nier"] #god-rays { display: none; }
    [data-theme="nier"] #biolum-container { display: none; }

    /* ::selection cramoisie */
    [data-theme="nier"] ::selection { background: rgba(196,54,43,0.25); color: #1A1A1A; }
    [data-theme="nier"] ::-moz-selection { background: rgba(196,54,43,0.25); color: #1A1A1A; }

    /* :focus-visible — anneau YoRHa */
    [data-theme="nier"] :focus-visible { outline: 2px solid #C4362B; outline-offset: 2px; }

    /* Scrollbar cramoisie */
    [data-theme="nier"] ::-webkit-scrollbar { width: 6px; }
    [data-theme="nier"] ::-webkit-scrollbar-track { background: #EDE8DF; }
    [data-theme="nier"] ::-webkit-scrollbar-thumb { background: #8B2519; border-radius: 0; }
    [data-theme="nier"] ::-webkit-scrollbar-thumb:hover { background: #C4362B; }
    [data-theme="nier"] { scrollbar-color: #8B2519 #EDE8DF; scrollbar-width: thin; }

    /* Scrollbar Rayon Vert */
    html:not([data-theme="nier"]):not([data-theme="ame"]) ::-webkit-scrollbar,
    [data-theme="rayon"] ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    html:not([data-theme="nier"]):not([data-theme="ame"]) ::-webkit-scrollbar-track,
    [data-theme="rayon"] ::-webkit-scrollbar-track {
        background: #030508;
    }
    html:not([data-theme="nier"]):not([data-theme="ame"]) ::-webkit-scrollbar-thumb,
    [data-theme="rayon"] ::-webkit-scrollbar-thumb {
        background: #151e35;
        border-radius: 5px;
        border: 2px solid #030508;
    }
    html:not([data-theme="nier"]):not([data-theme="ame"]) ::-webkit-scrollbar-thumb:hover,
    [data-theme="rayon"] ::-webkit-scrollbar-thumb:hover {
        background: #00d2ff;
    }
    html:not([data-theme="nier"]):not([data-theme="ame"]),
    [data-theme="rayon"] {
        scrollbar-color: #151e35 #030508;
        scrollbar-width: thin;
    }

    /* Typographie NieR — Titres en Cinzel, sous-titres en EB Garamond */
    [data-theme="nier"] h1, [data-theme="nier"] h2 {
        font-family: var(--nier-heading);
        letter-spacing: 0.12em; text-transform: uppercase;
        text-shadow: 1px 1px 0 rgba(196,54,43,0.15);
    }
    [data-theme="nier"] h3, [data-theme="nier"] h4 {
        font-family: var(--nier-subheading);
        letter-spacing: 0.04em;
    }
    [data-theme="nier"] pre, [data-theme="nier"] code, [data-theme="nier"] .terminal-body {
        font-family: var(--nier-mono);
    }

    /* Placeholder — écriture hésitante */
    [data-theme="nier"] ::placeholder { color: #6B6560; font-style: italic; letter-spacing: 0.02em; }
    [data-theme="nier"] input, [data-theme="nier"] textarea {
        background: #F8F5EF; border-color: #D4CFC6; color: #1A1A1A;
        border-radius: 0; caret-color: #C4362B;
    }
    [data-theme="nier"] input:focus, [data-theme="nier"] textarea:focus {
        border-color: #C4362B; box-shadow: 0 0 0 1px rgba(196,54,43,0.15);
    }

    /* prefers-reduced-motion */
    @media (prefers-reduced-motion: reduce) {
        [data-theme="nier"] body::after { display: none; }
        [data-theme="nier"]::after { display: none; }
        [data-theme="nier"] .feature-card { animation: none; }
        [data-theme="nier"] .terminal-window { animation: none; }
        [data-theme="nier"] footer::after { animation: none; }
    }
    /* Navigation — Terminal YoRHa */
    [data-theme="nier"] nav {
        background: rgba(26,26,26,0.95);
        border-bottom: 1px solid #C4362B;
        backdrop-filter: none;
    }
    [data-theme="nier"] nav .logo { color: #C4362B; text-shadow: none; font-family: var(--nier-heading); letter-spacing: 0.15em; }
    [data-theme="nier"] nav a {
        color: #D4CFC6;
        position: relative;
    }
    [data-theme="nier"] nav a::after {
        content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px;
        background: #C4362B; transition: width 0.3s ease;
    }
    [data-theme="nier"] nav a:hover { color: #C4362B; background: transparent; }
    [data-theme="nier"] nav a:hover::after { width: 100%; }

    /* Hero area */
    [data-theme="nier"] .hero::before {
        background:
            radial-gradient(ellipse at 25% 50%, rgba(196,54,43,0.04) 0%, transparent 50%),
            radial-gradient(ellipse at 75% 30%, rgba(58,110,165,0.03) 0%, transparent 50%);
    }
    [data-theme="nier"] .hero::after { display: none; }
    [data-theme="nier"] .light-beam.green, [data-theme="nier"] .light-beam.pink, [data-theme="nier"] .light-beam.blue { display: none; }
    [data-theme="nier"] .lens-flare { display: none; }
    [data-theme="nier"] .hero-bg { opacity: 0.06; filter: saturate(0.1) brightness(0.5) contrast(1.1); }
    [data-theme="nier"] .hero h1 { color: #1A1A1A; font-family: var(--nier-heading); }
    [data-theme="nier"] .hero h1 .accent { color: #C4362B; text-shadow: 1px 1px 0 rgba(196,54,43,0.2), 0 0 20px rgba(196,54,43,0.3); }
    [data-theme="nier"] .hero-scan {
        background: linear-gradient(90deg, transparent 0%, rgba(196,54,43,0.15) 30%, rgba(58,110,165,0.2) 50%, rgba(196,54,43,0.15) 70%, transparent 100%);
    }
    [data-theme="nier"] .badge { border-color: #D4CFC6; background: #FFFFFF; border-radius: 0; box-shadow: none; text-shadow: none; animation: none; }
    [data-theme="nier"] .badge::before { display: none; }
    [data-theme="nier"] .badge-c { color: #3A6EA5; border-color: rgba(58,110,165,0.3); box-shadow: none; }
    [data-theme="nier"] .badge-r { color: #C4362B; border-color: rgba(196,54,43,0.3); box-shadow: none; }
    [data-theme="nier"] .badge-42 { color: #4A7C59; border-color: rgba(74,124,89,0.3); box-shadow: none; }
    /* Boutons CTA — scan YoRHa */
    [data-theme="nier"] .cta-primary {
        background: #C4362B; color: #F5F0E8; border-color: #C4362B;
        position: relative; overflow: hidden; transition: none;
    }
    [data-theme="nier"] .cta-primary::after {
        content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%;
        background: linear-gradient(180deg, transparent 40%, rgba(255,255,255,0.3) 50%, transparent 60%);
        transition: none;
    }
    [data-theme="nier"] .cta-primary:hover { background: #A02E24; text-shadow: 0 0 8px rgba(196,54,43,0.4); }
    [data-theme="nier"] .cta-primary:hover::after { top: 100%; transition: top 0.4s ease; }
    [data-theme="nier"] .cta-ghost { border-color: #1A1A1A; color: #1A1A1A; transition: none; }
    [data-theme="nier"] .cta-ghost:hover { background: #1A1A1A; color: #F5F0E8; }

    /* Terminal / Code — CRT + pulsing border + phosphor hover */
    @keyframes nierTerminalBorderPulse { 0%,100%{border-left-color:rgba(196,54,43,0.5)} 50%{border-left-color:rgba(196,54,43,1)} }
    [data-theme="nier"] .terminal-window {
        background: #1A1A1A; border-color: #3A3A3A;
        border-left: 2px solid #C4362B;
        border-radius: 0;
        position: relative;
        animation: nierTerminalBorderPulse 4s ease-in-out infinite;
        transition: box-shadow 0.3s;
    }
    [data-theme="nier"] .terminal-window:hover {
        box-shadow: 0 0 20px rgba(196,54,43,0.05), inset 0 0 60px rgba(0,0,0,0.1);
    }
    [data-theme="nier"] .terminal-window::after {
        content: ''; position: absolute; inset: 0; pointer-events: none;
        background: repeating-linear-gradient(0deg, transparent 0px, transparent 1px, rgba(0,0,0,0.06) 1px, rgba(0,0,0,0.06) 2px);
    }
    [data-theme="nier"] .terminal-bar { background: #2A2A2A; border-radius: 0; }
    [data-theme="nier"] .terminal-body { color: #D4CFC6; font-family: var(--nier-mono); }
    /* Prompt blink — vrai curseur terminal */
    @keyframes nierPromptBlink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
    [data-theme="nier"] .terminal-body .cmd { color: #C4362B; }
    [data-theme="nier"] .terminal-body .prompt::after {
        content: '█'; color: #C4362B; animation: nierPromptBlink 1s step-end infinite;
        font-size: 0.85em; margin-left: 2px;
    }
    [data-theme="nier"] .terminal-body .flag { color: #3A6EA5; }
    [data-theme="nier"] .terminal-body .out { color: #D4CFC6; }

    /* Feature cards — scintillement bordure */
    [data-theme="nier"] .feature-card {
        background: #FFFFFF; border-color: #D4CFC6;
        border-left: 3px solid #C4362B;
    }
    @keyframes nierBorderPulse { 0%,100%{border-left-color:rgba(196,54,43,0.7)} 50%{border-left-color:rgba(196,54,43,1)} }
    [data-theme="nier"] .feature-card { animation: nierBorderPulse 3s ease-in-out infinite; }
    [data-theme="nier"] .feature-card:hover {
        border-color: rgba(196,54,43,0.3); border-left-color: #C4362B;
        box-shadow: -4px 0 12px rgba(196,54,43,0.15), 0 8px 30px rgba(0,0,0,0.08);
    }
    [data-theme="nier"] .feature-card .fc-icon { color: #C4362B; }
    [data-theme="nier"] .stat-val { color: #C4362B; font-variant-numeric: tabular-nums; }

    /* Footer — crédits de fin YoRHa */
    [data-theme="nier"] footer {
        background: #1A1A1A; color: #6B6560;
        border-top: 1px solid #C4362B;
        position: relative; overflow: hidden;
    }
    [data-theme="nier"] footer a { color: #8A847C; }
    [data-theme="nier"] footer a:hover { color: #C4362B; }
    [data-theme="nier"] footer::after {
        content: 'YoRHa Force de Déploiement  ◆  Unité 2B  ◆  Unité 9S  ◆  Unité A2  ◆  POD 042  ◆  POD 153  ◆  Bunker  ◆  Conseil YoRHa';
        position: absolute; bottom: 4px; left: 0; white-space: nowrap;
        font-family: 'Courier New', monospace; font-size: 0.55rem; color: rgba(196,54,43,0.15);
        letter-spacing: 0.15em; animation: nierMarquee 60s linear infinite;
    }
    @keyframes nierMarquee { 0%{transform:translateX(100%)} 100%{transform:translateX(-100%)} }

    /* ══ NIER: Guide-specific block/card/diagram/table overrides ══ */

    /* Sidebar */
    [data-theme="nier"] #sidebar {
        background: var(--card) !important;
        border-color: var(--border) !important;
    }
    [data-theme="nier"] .sb-title {
        color: var(--text) !important;
        border-bottom: 1px solid var(--border-light) !important;
        letter-spacing: 3px;
        font-variant: small-caps;
        font-family: var(--nier-mono) !important;
        font-weight: 700 !important;
        font-size: 11px !important;
        padding: 12px 16px 10px 20px !important;
        opacity: 1 !important;
    }
    [data-theme="nier"] .sb-link {
        color: var(--text-muted) !important;
        font-family: var(--nier-mono) !important;
        font-size: 12px !important;
        transition: all 0.12s linear !important;
        border-left: 2px solid transparent !important;
        line-height: 1.45 !important;
    }
    [data-theme="nier"] .sb-link:hover {
        color: var(--accent) !important;
        background: var(--card2) !important;
        border-left-color: var(--accent) !important;
    }
    [data-theme="nier"] .sb-link.active {
        color: #D4CFC6 !important;
        background: #1A1A1A !important;
        border-left-color: var(--accent) !important;
    }
    [data-theme="nier"] .sb-link.sb-sub {
        padding-left: 36px !important;
        font-size: 11px !important;
        color: var(--text-muted) !important;
    }
    [data-theme="nier"] #sidebar .sb-section div[style*="color"] {
        color: var(--accent) !important;
        font-family: var(--nier-mono) !important;
        border-top-color: var(--border-light) !important;
    }

    /* Intro cards — brutalist, left red border */
    [data-theme="nier"] .intro-card {
        background: #FFFFFF; border-color: #D4CFC6; border-radius: 0;
        border-left: 3px solid #C4362B; box-shadow: none; backdrop-filter: none;
    }
    [data-theme="nier"] .intro-card::before { display: none; }
    [data-theme="nier"] .intro-card::after { display: none; }
    [data-theme="nier"] .intro-card:hover {
        border-color: #C4362B; border-left-color: #C4362B;
        transform: none; box-shadow: 0 4px 20px rgba(196,54,43,0.1);
    }
    [data-theme="nier"] .intro-card .title {
        font-variant: small-caps; letter-spacing: 2px; text-shadow: none;
    }

    /* Diagram boxes — clean rectangles, thin border, red accent */
    [data-theme="nier"] .diagram-box {
        background: #FFFFFF; border-color: #D4CFC6; border-radius: 0;
        border-left: 2px solid #C4362B; box-shadow: inset 0 1px 4px rgba(0,0,0,0.04);
        border-image: none;
    }
    [data-theme="nier"] .diagram-box::before { display: none; }
    [data-theme="nier"] .diagram-box::after { display: none; }

    /* Flow boxes — sharp corners, muted colors, clean borders, no glow */
    [data-theme="nier"] .flow-box { border-radius: 0; animation: none; }
    [data-theme="nier"] .flow-box.asm { background: #E8F0E8; border-color: #4A7C59; color: #4A7C59; box-shadow: none; }
    [data-theme="nier"] .flow-box.vm { background: #F5EBEB; border-color: #C4362B; color: #C4362B; box-shadow: none; }
    [data-theme="nier"] .flow-box.champ { background: #EDE8F0; border-color: #7B5EA7; color: #7B5EA7; box-shadow: none; }

    /* Code blocks — true terminal, black bg, red left border, scanline */
    [data-theme="nier"] .code-wrapper {
        border-color: #3A3A3A; border-radius: 0;
        border-left: 2px solid #C4362B; border-image: none;
    }
    [data-theme="nier"] .code-wrapper::after { display: none; }
    [data-theme="nier"] .code-header {
        background: #1A1A1A; border-bottom-color: #3A3A3A; color: #D4CFC6;
    }
    [data-theme="nier"] .code-header::after { display: none; }
    [data-theme="nier"] .code-header .lang { color: #C4362B; }
    [data-theme="nier"] .code-header .file { color: #8A847C; }
    [data-theme="nier"] pre {
        background: #1A1A1A; color: #D4CFC6; position: relative;
    }
    [data-theme="nier"] pre::after {
        content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        background: repeating-linear-gradient(0deg, transparent 0px, transparent 1px, rgba(0,0,0,0.08) 1px, rgba(0,0,0,0.08) 2px);
        pointer-events: none;
    }
    [data-theme="nier"] .code-tab { color: #8A847C; }
    [data-theme="nier"] .code-tab.active { background: #C4362B; color: #F5F0E8; }

    /* Arena visual — clean, warm beige empty cells */
    [data-theme="nier"] .arena-visual {
        background: #FFFFFF; border-color: #D4CFC6; border-radius: 0;
        border-left: 3px solid #C4362B; box-shadow: none;
    }
    [data-theme="nier"] .arena-cell.p0 { background: #C8D8E8; box-shadow: none; }
    [data-theme="nier"] .arena-cell.p1 { background: #E0C8D8; box-shadow: none; }
    [data-theme="nier"] .arena-cell.p2 { background: #C8E0C8; box-shadow: none; }
    [data-theme="nier"] .arena-cell.p3 { background: #E0D8C0; box-shadow: none; }
    [data-theme="nier"] .arena-cell.empty { background: #EDE8DF; }
    [data-theme="nier"] .arena-cell.pc { box-shadow: inset 0 0 4px #C4362B; }

    /* Opcode table — clean lines, red header bottom */
    /* Tableaux — en-tête terminal noir, tabular-nums */
    [data-theme="nier"] .op-table th {
        background: rgba(26,26,26,0.95); color: #D4CFC6;
        border-bottom: 2px solid #C4362B; box-shadow: none;
        font-family: var(--nier-mono); font-size: 0.75rem; letter-spacing: 0.05em;
    }
    [data-theme="nier"] .op-table td { border-bottom-color: #EDE8DF; font-variant-numeric: tabular-nums; }
    [data-theme="nier"] .op-table td:first-child { color: #C4362B; font-family: var(--nier-mono); text-shadow: none; }
    [data-theme="nier"] .op-table tr:hover {
        background: rgba(196,54,43,0.03);
        border-left: 2px solid #C4362B;
    }
    [data-theme="nier"] .op-table tr:hover td:first-child { color: #A02E24; text-shadow: none; }

    /* Pills — simple bordered, no glow, clean fill */
    [data-theme="nier"] .pill { border-radius: 0; background: transparent; box-shadow: none; text-shadow: none; }
    [data-theme="nier"] .pill-yes { color: #4A7C59; border-color: #4A7C59; background: rgba(74,124,89,0.08); }
    [data-theme="nier"] .pill-no { color: #C4362B; border-color: #C4362B; background: rgba(196,54,43,0.08); }
    [data-theme="nier"] .pill-idx { color: #3A6EA5; border-color: #3A6EA5; background: rgba(58,110,165,0.08); }
    [data-theme="nier"] .pill-carry { color: #B8860B; border-color: #B8860B; background: rgba(184,134,11,0.08); }

    /* Encoding demo — clean, thin red accent */
    [data-theme="nier"] .encoding-demo {
        background: #FFFFFF; border-color: #D4CFC6; border-radius: 0;
        border-left: 2px solid #C4362B; box-shadow: none;
    }

    /* Encoding tokens — muted, no glow, tinted bg */
    [data-theme="nier"] .enc-token { border-radius: 0; }
    [data-theme="nier"] .enc-opcode { background: rgba(196,54,43,0.06); color: #C4362B; border-color: #C4362B; box-shadow: none; }
    [data-theme="nier"] .enc-acb { background: rgba(184,134,11,0.06); color: #B8860B; border-color: #B8860B; box-shadow: none; }
    [data-theme="nier"] .enc-reg { background: rgba(74,124,89,0.06); color: #4A7C59; border-color: #4A7C59; box-shadow: none; }
    [data-theme="nier"] .enc-dir { background: rgba(123,94,167,0.06); color: #7B5EA7; border-color: #7B5EA7; box-shadow: none; }
    [data-theme="nier"] .enc-ind { background: rgba(196,112,37,0.06); color: #C47025; border-color: #C47025; box-shadow: none; }

    /* Lifecycle steps — clean timeline, red-bordered numbers, minimal */
    [data-theme="nier"] .lc-step::before { background: #D4CFC6; box-shadow: none; }
    [data-theme="nier"] .lc-num { animation: none; border-radius: 50%; }
    [data-theme="nier"] .lc-num.fetch { background: #FFFFFF; color: #C4362B; border-color: #C4362B; box-shadow: none; }
    [data-theme="nier"] .lc-num.decode { background: #FFFFFF; color: #B8860B; border-color: #B8860B; box-shadow: none; }
    [data-theme="nier"] .lc-num.wait { background: #FFFFFF; color: #7B5EA7; border-color: #7B5EA7; box-shadow: none; }
    [data-theme="nier"] .lc-num.exec { background: #FFFFFF; color: #4A7C59; border-color: #4A7C59; box-shadow: none; }

    /* Comparison table — clean, red header bottom */
    [data-theme="nier"] .cmp-table th {
        background: #F8F5EF; border-bottom: 2px solid #C4362B; box-shadow: none;
    }
    [data-theme="nier"] .cmp-table td { border-bottom-color: #EDE8DF; }
    [data-theme="nier"] .cmp-table td:first-child { color: #1A1A1A; text-shadow: none; }
    [data-theme="nier"] .cmp-table tr:hover td { background: rgba(196,54,43,0.03); }
    [data-theme="nier"] .cmp-table tr:hover td:first-child { color: #C4362B; text-shadow: none; }

    /* Endian bytes — muted, no glow */
    [data-theme="nier"] .endian-byte { border-radius: 0; }
    [data-theme="nier"] .endian-byte.be { background: rgba(58,110,165,0.06); color: #3A6EA5; border-color: #3A6EA5; box-shadow: none; }
    [data-theme="nier"] .endian-byte.le { background: rgba(196,112,37,0.06); color: #C47025; border-color: #C47025; box-shadow: none; }

    /* Collapsible sections — minimal, red left indicator */
    [data-theme="nier"] .collapse-header {
        background: #F8F5EF; border-color: #D4CFC6; border-radius: 0;
        border-left: 2px solid #C4362B; box-shadow: none;
    }
    [data-theme="nier"] .collapse-header:hover { border-color: #C4362B; border-left-color: #C4362B; box-shadow: none; }
    [data-theme="nier"] .collapse-header .chevron { color: #C4362B; text-shadow: none; }
    [data-theme="nier"] .collapse-header.open { border-left-color: #C4362B; box-shadow: none; }
    [data-theme="nier"] .collapse-body.open {
        border-color: #D4CFC6; border-left-color: #C4362B; border-radius: 0;
    }
    [data-theme="nier"] .collapse-body.open::after { display: none; }

    /* Process card — clean white, red accent */
    [data-theme="nier"] .process-card {
        background: #FFFFFF; border-color: #D4CFC6; border-radius: 0;
        border-left: 3px solid #C4362B; box-shadow: none;
    }

    /* Register cells — clean, no glow */
    [data-theme="nier"] .reg-cell {
        background: #F8F5EF; border-color: #D4CFC6; border-radius: 0; box-shadow: none;
    }
    [data-theme="nier"] .reg-cell:hover { border-color: #D4CFC6; box-shadow: none; }
    [data-theme="nier"] .reg-cell .reg-name { color: #C4362B; }
    [data-theme="nier"] .reg-cell.r1 { border-color: #4A7C59; background: rgba(74,124,89,0.06); }

    /* Layer cards — brutalist, red left border */
    [data-theme="nier"] .layer-card {
        background: #FFFFFF; border-color: #D4CFC6; border-radius: 0;
        border-left: 3px solid #C4362B; box-shadow: none; backdrop-filter: none;
    }
    [data-theme="nier"] .layer-card::before { display: none; }
    [data-theme="nier"] .layer-card::after { display: none; }
    [data-theme="nier"] .layer-card:hover {
        border-color: #C4362B; border-left-color: #C4362B;
        box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    }
    [data-theme="nier"] .layer-title { font-variant: small-caps; letter-spacing: 2px; }

    /* Store cells — clean, muted */
    [data-theme="nier"] .store-cell { background: #F8F5EF; border-color: #D4CFC6; border-radius: 0; box-shadow: none; }
    [data-theme="nier"] .store-cell.active-write { border-color: #3A6EA5; background: rgba(58,110,165,0.06); box-shadow: none; }
    [data-theme="nier"] .store-cell.done { border-color: #D4CFC6; opacity: 0.6; }

    /* Arena cell mini — warm beige, muted colors */
    [data-theme="nier"] .arena-cell-mini { border-radius: 0; }
    [data-theme="nier"] .arena-cell-mini:hover { outline-color: #C4362B; box-shadow: none; }
    [data-theme="nier"] .arena-cell-mini.cp0 { background: #B0C4D8; box-shadow: none; }
    [data-theme="nier"] .arena-cell-mini.cp1 { background: #D8B0C4; box-shadow: none; }
    [data-theme="nier"] .arena-cell-mini.cp2 { background: #B0D8B0; box-shadow: none; }
    [data-theme="nier"] .arena-cell-mini.cp3 { background: #D8D0B0; box-shadow: none; }
    [data-theme="nier"] .arena-cell-mini.cempty { background: #EDE8DF; }
    [data-theme="nier"] .arena-cell-mini.cpc { box-shadow: inset 0 0 3px #C4362B; }

    /* Arena legend dot — sharp */
    [data-theme="nier"] .arena-legend .dot { border-radius: 0; }

    /* Containers */
    [data-theme="nier"] .ring-diagram-container { background: #FFFFFF; border-color: #D4CFC6; border-radius: 0; }
    [data-theme="nier"] .wrap-arena-container { background: #FFFFFF; border-color: #D4CFC6; border-radius: 0; }
    [data-theme="nier"] .layer-stack-container { background: #FFFFFF; border-color: #D4CFC6; border-radius: 0; }
    [data-theme="nier"] .store-anim-container { background: #FFFFFF; border-color: #D4CFC6; border-radius: 0; }
    [data-theme="nier"] .wrap-store-container { background: #FFFFFF; border-color: #D4CFC6; border-radius: 0; }
    [data-theme="nier"] .endian-interactive { background: #FFFFFF; border-color: #D4CFC6; border-radius: 0; }
    [data-theme="nier"] .champ-load-container { background: #FFFFFF; border-color: #D4CFC6; border-radius: 0; }
    [data-theme="nier"] .memod-calc-container { background: #FFFFFF; border-color: #D4CFC6; border-radius: 0; }
    [data-theme="nier"] .ctd-visual { background: #FFFFFF; border-color: #D4CFC6; border-radius: 0; }
    [data-theme="nier"] .quiz-box { background: #FFFFFF; border-color: #D4CFC6; border-radius: 0; }
    [data-theme="nier"] .quiz-box::before { display: none; }

    /* Insight/Warning boxes — red accent */
    [data-theme="nier"] .insight-box { background: #FFFFFF; border-color: #D4CFC6; border-left-color: #C4362B; border-radius: 0; }
    [data-theme="nier"] .insight-box .ib-title { color: #C4362B; }
    [data-theme="nier"] .warning-box { background: #FFFFFF; border-color: #D4CFC6; border-left-color: #C47025; border-radius: 0; }
    [data-theme="nier"] .warning-box .wb-title { color: #C47025; }

    /* Progress bar */
    [data-theme="nier"] #progress-bar { background: #C4362B; box-shadow: none; }

    /* Simulateur VM overrides */
    [data-theme="nier"] .sim-container { background: #FFFFFF; border-color: #D4CFC6; border-radius: 0; }
    [data-theme="nier"] .sim-controls { background: #F8F5EF; border-color: #D4CFC6; }
    [data-theme="nier"] .sim-btn { background: #FFFFFF; border-color: #D4CFC6; color: #1A1A1A; border-radius: 0; }
    [data-theme="nier"] .sim-btn:hover { border-color: #C4362B; color: #C4362B; box-shadow: none; }
    [data-theme="nier"] .sim-btn.active { border-color: #C4362B; color: #C4362B; box-shadow: none; }
    [data-theme="nier"] .sim-btn.reset-btn { border-color: #C4362B; color: #C4362B; }
    [data-theme="nier"] .sim-arena-panel { background: #F8F5EF; border-color: #D4CFC6; }
    [data-theme="nier"] .sim-info-panel { background: #F8F5EF; border-color: #D4CFC6; }
    [data-theme="nier"] .sim-proc-card { background: #FFFFFF; border-color: #D4CFC6; border-radius: 0; }
    [data-theme="nier"] .sim-proc-card.selected { border-color: #C4362B; background: rgba(196,54,43,0.04); }
    [data-theme="nier"] .sim-reg-item { background: #F8F5EF; border-color: #D4CFC6; border-radius: 0; }
    [data-theme="nier"] .sim-log-container { background: #F8F5EF; border-color: #D4CFC6; }
    [data-theme="nier"] .sim-log-entry { border-bottom-color: #EDE8DF; }
    [data-theme="nier"] .sim-log-entry.sys { color: #3A6EA5; }
    [data-theme="nier"] .sim-cell { background: #EDE8DF; border-radius: 0; }

    /* Filter buttons */
    [data-theme="nier"] .filter-btn { border-radius: 0; }
    [data-theme="nier"] .filter-btn.active { background: #C4362B; border-color: #C4362B; }

    /* Quiz options */
    [data-theme="nier"] .quiz-opt { border-radius: 0; }
    [data-theme="nier"] .quiz-q { border-radius: 0; }

    /* Copy button */
    [data-theme="nier"] .copy-btn { border-radius: 0; }

    /* Speed slider */
    [data-theme="nier"] .sim-speed-slider::-webkit-slider-thumb { background: #C4362B; box-shadow: none; }
    [data-theme="nier"] .sim-speed-slider::-moz-range-thumb { background: #C4362B; }

    /* Wrap cells */
    [data-theme="nier"] .wrap-cell { border-radius: 0; }

    /* Layer stack grid cells */
    [data-theme="nier"] .layer-stack-grid .lsg-header { border-radius: 0; }
    [data-theme="nier"] .layer-stack-grid .lsg-label { border-radius: 0; }
    [data-theme="nier"] .layer-stack-grid .lsg-cell { border-radius: 0; }
    [data-theme="nier"] .layer-stack-grid .lsg-cell.lsg-writing { box-shadow: none; animation: none; border-color: #C4362B; background: rgba(196,54,43,0.06); }

    /* Wrap store grid cells */
    [data-theme="nier"] .wrap-store-grid .wsg-header { border-radius: 0; }
    [data-theme="nier"] .wrap-store-grid .wsg-label { border-radius: 0; }
    [data-theme="nier"] .wrap-store-grid .wsg-cell { border-radius: 0; }
    [data-theme="nier"] .wrap-store-grid .wsg-cell.wsg-writing { box-shadow: none; animation: none; }

    /* Champ info card */
    [data-theme="nier"] .champ-info-card { border-radius: 0; }

    /* Cycle to die */
    [data-theme="nier"] .ctd-bar-container { border-radius: 0; }
    [data-theme="nier"] .ctd-stat { border-radius: 0; }

    /* Memod items */
    [data-theme="nier"] .memod-item { border-radius: 0; }
    [data-theme="nier"] .memod-calc-result { border-radius: 0; }

    /* Endian comparison sides */
    [data-theme="nier"] .endian-side { border-radius: 0; }
    [data-theme="nier"] .endian-side .es-byte { border-radius: 0; }

    /* Anim buttons */
    [data-theme="nier"] .anim-btn { border-radius: 0; border-color: #C4362B; color: #C4362B; }
    [data-theme="nier"] .anim-btn:hover { background: #C4362B; color: #F5F0E8; }
    [data-theme="nier"] .anim-btn:disabled { background: transparent; color: #C4362B; }

    /* Wrap buttons */
    [data-theme="nier"] .wrap-btn { border-radius: 0; border-color: #C4362B; color: #C4362B; }
    [data-theme="nier"] .wrap-btn:hover { background: #C4362B; color: #F5F0E8; }

    /* Endian toggle buttons */
    [data-theme="nier"] .endian-toggle-btn { border-radius: 0; }
    [data-theme="nier"] .endian-toggle-btn.active { background: #C4362B; color: #F5F0E8; border-color: #C4362B; }

    /* Arena buttons */
    [data-theme="nier"] .arena-btn { border-radius: 0; }
    [data-theme="nier"] .arena-btn.active { background: #C4362B; border-color: #C4362B; }

    /* Arena tooltip */
    [data-theme="nier"] .arena-tooltip { border-radius: 0; }

    /* Search box */
    [data-theme="nier"] #search-box { border-radius: 0; }
    [data-theme="nier"] .search-result mark { background: rgba(196,54,43,0.15); color: #C4362B; }

    /* Phase steps */
    [data-theme="nier"] .sim-phase-step { border-radius: 0; }
    [data-theme="nier"] .sim-phase-step.active-fetch,
    [data-theme="nier"] .sim-phase-step.active-decode,
    [data-theme="nier"] .sim-phase-step.active-wait,
    [data-theme="nier"] .sim-phase-step.active-exec { border-color: #C4362B; color: #C4362B; }

    /* Sim tooltip */
    [data-theme="nier"] .sim-tooltip { border-radius: 0; }

    /* ══════════════════════════════════════════════════════════════════
       L'ÂME DANS L'EAU — Mylène Farmer Theme
       Aquatic cinematic blue universe — deep water, fog, spectral light
       ══════════════════════════════════════════════════════════════════ */

    /* CSS Custom Properties */
    [data-theme="ame"] {
        --bg: #070B1A;
        --bg2: #050814;
        --card: rgba(10,18,42,0.92);
        --card2: #0B1428;
        --border: #1E3A5F;
        --border-light: #2D5A8F;
        --text: #F0F4F8;
        --text-muted: #A8C5E8;
        --cyan: #00D4FF;
        --ray: #00B4D8;
        --ray-dim: rgba(0,180,216,0.12);
        --ray-glow: rgba(0,180,216,0.5);
        --pink: #FF006E;
        --pink-dim: rgba(255,0,110,0.08);
        --pink-glow: rgba(255,0,110,0.35);
        --electric: #00E5FF;
        --electric-dim: rgba(0,229,255,0.08);
        --electric-glow: rgba(0,229,255,0.5);
        --violet: #7B61FF;
        --blue: #0096C7;
        --blue-deep: #0B1428;
        --red: #FF6B6B;
        --green: #00D4FF;
        --yellow: #FFB703;
        --purple: #7B61FF;
        --orange: #FB8500;
        --ivory: #F8FAFC;
        --code-bg: rgba(2,5,12,0.92);
        --accent: var(--electric);
    }

    /* FIX Dalloway point 1: h1-h5 retirés de cette règle — ils ont déjà
       text-shadow:none !important dans dalloway-protocol.css section 5.
       Conflit de doublon résolu. */
    [data-theme="ame"] p,
    [data-theme="ame"] li,
    [data-theme="ame"] td,
    [data-theme="ame"] .hero p,
    [data-theme="ame"] nav a,
    [data-theme="ame"] .sb-link {
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
    }

    /* Cursor — aquatic crosshair */
    [data-theme="ame"] body, [data-theme="ame"] a, [data-theme="ame"] button, [data-theme="ame"] select, [data-theme="ame"] input, [data-theme="ame"] textarea, [data-theme="ame"] .intro-card, [data-theme="ame"] .diagram-box, [data-theme="ame"] .code-wrapper, [data-theme="ame"] .collapse-header, [data-theme="ame"] .sidebar a, [data-theme="ame"] .badge {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cline x1='12' y1='4' x2='12' y2='10' stroke='%2300CED1' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='12' y1='14' x2='12' y2='20' stroke='%2300CED1' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='4' y1='12' x2='10' y2='12' stroke='%2300CED1' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='14' y1='12' x2='20' y2='12' stroke='%2300CED1' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%2300CED1'/%3E%3Ccircle cx='12' cy='12' r='5' stroke='%2300CED1' stroke-width='0.7' fill='none' opacity='0.4'/%3E%3C/svg%3E") 12 12, crosshair;
    }

    /* Scrollbar aquatique (Âme dans l'eau) */
    [data-theme="ame"] ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    [data-theme="ame"] ::-webkit-scrollbar-track {
        background: #070B1A;
    }
    [data-theme="ame"] ::-webkit-scrollbar-thumb {
        background: #1E4080;
        border-radius: 5px;
        border: 2px solid #070B1A;
    }
    [data-theme="ame"] ::-webkit-scrollbar-thumb:hover {
        background: #00CED1;
    }
    [data-theme="ame"] {
        scrollbar-color: #1E4080 #070B1A;
        scrollbar-width: thin;
    }

    /* Theme toggle */
    [data-theme="ame"] .theme-toggle {
        border-color: var(--border);
        color: var(--text-muted);
    }
    [data-theme="ame"] .theme-toggle:hover {
        border-color: var(--cyan);
        color: var(--cyan);
        box-shadow: 0 0 10px var(--electric-glow);
    }

    /* ── Body & Atmosphere ── */
    [data-theme="ame"] body { background: linear-gradient(180deg, #070B1A 0%, #050B18 40%, #030812 70%, #020510 100%); }
    [data-theme="ame"] body::before {
        background:
            radial-gradient(ellipse at 15% 30%, rgba(30,91,216,0.06) 0%, transparent 55%),
            radial-gradient(ellipse at 85% 20%, rgba(0,206,209,0.05) 0%, transparent 50%),
            radial-gradient(ellipse at 50% 70%, rgba(153,0,0,0.03) 0%, transparent 40%),
            radial-gradient(ellipse at 70% 55%, rgba(26,42,108,0.04) 0%, transparent 45%),
            radial-gradient(ellipse at 30% 80%, rgba(0,206,209,0.03) 0%, transparent 50%),
            radial-gradient(ellipse at 90% 75%, rgba(212,160,80,0.02) 0%, transparent 40%);
        animation: causticDrift 20s ease-in-out infinite;
    }
    /* EAU CLAIRE — brouillard retiré : la vignette sombre (voile radial
       rgba(7,11,26,0.8) + bande de brume --ame-vig-top) recouvrait l'eau.
       Priorité sur ame-theme.css grâce au sélecteur html[...]. Cohérent
       avec CW_THEME_PAGE.ameClearWater → fog 3D densité 0 (ame-immersive.js).
       La caustique douce (body::before) reste : lumière, pas voile. */
    html[data-theme="ame"] body::after {
        background: none !important;
        opacity: 0 !important;
    }

    /* EAU CLAIRE (suite) — les deux dernières sources de brume, dans
       la couche .ame-atmosphere (ame-atmosphere.js) :
       • .ame-floor : la nappe de « caustiques filamenteuses »
         (feTurbulence) au bas d'écran se lisait comme un nuage de
         sédiments — c'était LE brouillard du fond → cachée ;
       • .ame-vignette : l'assombrissement des bords est conservé mais
         adouci (0.42→0.22, opacité 0.7→0.5) : le cadrage cinématographique
         reste, le voile non. */
    html[data-theme="ame"] .ame-floor { display: none !important; }
    html[data-theme="ame"] .ame-vignette {
        background: radial-gradient(130% 100% at 50% 46%, transparent 68%, rgba(1,8,16,0.22) 100%) !important;
        opacity: 0.5 !important;
    }

    /* Starfield — soft blue floating particles */
    [data-theme="ame"] #starfield::before {
        background-image:
            radial-gradient(1px 1px at 10% 15%, rgba(74,144,226,0.5) 0%, transparent 100%),
            radial-gradient(1px 1px at 25% 35%, rgba(123,184,232,0.4) 0%, transparent 100%),
            radial-gradient(1.5px 1.5px at 45% 10%, rgba(200,216,232,0.5) 0%, transparent 100%),
            radial-gradient(1px 1px at 60% 50%, rgba(200,149,106,0.3) 0%, transparent 100%),
            radial-gradient(1px 1px at 75% 25%, rgba(106,90,154,0.4) 0%, transparent 100%),
            radial-gradient(1px 1px at 90% 60%, rgba(74,144,226,0.35) 0%, transparent 100%),
            radial-gradient(1.5px 1.5px at 15% 70%, rgba(200,216,232,0.45) 0%, transparent 100%),
            radial-gradient(1px 1px at 35% 85%, rgba(123,184,232,0.3) 0%, transparent 100%),
            radial-gradient(1px 1px at 55% 75%, rgba(200,149,106,0.2) 0%, transparent 100%),
            radial-gradient(1px 1px at 80% 90%, rgba(200,216,232,0.35) 0%, transparent 100%),
            radial-gradient(1px 1px at 5% 45%, rgba(74,144,226,0.3) 0%, transparent 100%),
            radial-gradient(1px 1px at 50% 40%, rgba(200,216,232,0.45) 0%, transparent 100%),
            radial-gradient(1px 1px at 70% 15%, rgba(106,90,154,0.35) 0%, transparent 100%),
            radial-gradient(1px 1px at 30% 55%, rgba(123,184,232,0.3) 0%, transparent 100%),
            radial-gradient(1px 1px at 85% 45%, rgba(200,216,232,0.4) 0%, transparent 100%),
            radial-gradient(1.5px 1.5px at 20% 5%, rgba(74,144,226,0.4) 0%, transparent 100%),
            radial-gradient(1px 1px at 65% 80%, rgba(200,216,232,0.3) 0%, transparent 100%),
            radial-gradient(1px 1px at 40% 20%, rgba(139,58,58,0.2) 0%, transparent 100%),
            radial-gradient(1px 1px at 95% 30%, rgba(123,184,232,0.3) 0%, transparent 100%),
            radial-gradient(1px 1px at 12% 92%, rgba(200,216,232,0.35) 0%, transparent 100%);
    }
    [data-theme="ame"] #starfield::after {
        background-image:
            radial-gradient(1px 1px at 8% 28%, rgba(200,216,232,0.45) 0%, transparent 100%),
            radial-gradient(1.5px 1.5px at 22% 62%, rgba(74,144,226,0.4) 0%, transparent 100%),
            radial-gradient(1px 1px at 38% 42%, rgba(123,184,232,0.35) 0%, transparent 100%),
            radial-gradient(1px 1px at 52% 8%, rgba(200,216,232,0.4) 0%, transparent 100%),
            radial-gradient(1px 1px at 68% 68%, rgba(200,149,106,0.25) 0%, transparent 100%),
            radial-gradient(1px 1px at 82% 38%, rgba(106,90,154,0.35) 0%, transparent 100%),
            radial-gradient(1px 1px at 95% 72%, rgba(200,216,232,0.35) 0%, transparent 100%),
            radial-gradient(1.5px 1.5px at 3% 88%, rgba(74,144,226,0.3) 0%, transparent 100%),
            radial-gradient(1px 1px at 18% 48%, rgba(200,216,232,0.45) 0%, transparent 100%),
            radial-gradient(1px 1px at 33% 95%, rgba(123,184,232,0.25) 0%, transparent 100%),
            radial-gradient(1px 1px at 48% 58%, rgba(200,216,232,0.35) 0%, transparent 100%),
            radial-gradient(1px 1px at 63% 22%, rgba(74,144,226,0.3) 0%, transparent 100%),
            radial-gradient(1px 1px at 78% 82%, rgba(200,216,232,0.3) 0%, transparent 100%),
            radial-gradient(1px 1px at 88% 55%, rgba(139,58,58,0.2) 0%, transparent 100%),
            radial-gradient(1px 1px at 42% 32%, rgba(106,90,154,0.3) 0%, transparent 100%),
            radial-gradient(1px 1px at 72% 5%, rgba(200,216,232,0.4) 0%, transparent 100%),
            radial-gradient(1px 1px at 57% 92%, rgba(123,184,232,0.3) 0%, transparent 100%),
            radial-gradient(1px 1px at 92% 18%, rgba(200,216,232,0.35) 0%, transparent 100%);
    }

    /* Film grain — blue-tinted */
    [data-theme="ame"] #film-grain {
        opacity: 0.018;
        background-image:
            radial-gradient(circle at 20% 30%, rgba(74,144,226,0.04) 0%, transparent 1%),
            radial-gradient(circle at 60% 70%, rgba(123,184,232,0.03) 0%, transparent 1%),
            radial-gradient(circle at 80% 20%, rgba(200,216,232,0.03) 0%, transparent 1%),
            radial-gradient(circle at 40% 80%, rgba(74,144,226,0.03) 0%, transparent 1%);
    }

    /* Scan lines — very subtle, wider spacing */
    [data-theme="ame"] #scan-lines {
        background: repeating-linear-gradient(
            0deg,
            transparent 0px, transparent 4px,
            rgba(10,25,50,0.04) 4px, rgba(10,25,50,0.04) 6px
        );
    }

    /* ── Nav ──
       P3 audit : nav transparente en ame pour ne pas masquer la scène 3D.
       Le texte de la nav reste lisible grâce au text-shadow (cf. ligne plus bas). */
    [data-theme="ame"] nav {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 1px solid rgba(74, 144, 226, 0.15);
    }
    [data-theme="ame"] nav .logo {
        color: var(--blue);
        text-shadow: 0 0 20px rgba(30,91,216,0.6), 0 0 40px rgba(30,91,216,0.2), 0 0 80px var(--electric-glow);
    }
    [data-theme="ame"] nav a {
        color: var(--text-muted);
    }
    [data-theme="ame"] nav a::after {
        background: linear-gradient(90deg, var(--blue), var(--cyan));
        box-shadow: 0 0 8px var(--electric-glow);
    }
    [data-theme="ame"] nav a:hover, [data-theme="ame"] nav a.active {
        color: var(--cyan);
        background: var(--electric-dim);
    }

    /* ── Hero ── */
    [data-theme="ame"] .hero {
        border-bottom-color: #1A3A5F;
    }
    [data-theme="ame"] .hero::before {
        background:
            radial-gradient(ellipse at 25% 50%, rgba(74,144,226,0.06) 0%, transparent 50%),
            radial-gradient(ellipse at 75% 30%, rgba(123,184,232,0.05) 0%, transparent 50%),
            radial-gradient(ellipse at 50% 80%, rgba(200,149,106,0.04) 0%, transparent 45%);
    }
    [data-theme="ame"] .hero::after { /* no longer used for beam */ }
    /* P3 audit : hero-bg réduit pour laisser place à la scène 3D.
       hero-overlay supprimé du DOM (guide.html). */
    [data-theme="ame"] .hero-bg { opacity: 0.04; filter: saturate(0.2) brightness(0.3) contrast(1.05); }

    /* Light beams — water columns (blue tones) */
    [data-theme="ame"] .light-beam.green {
        background: linear-gradient(180deg, transparent 0%, rgba(74,144,226,0.03) 15%, rgba(74,144,226,0.14) 35%, rgba(74,144,226,0.28) 50%, rgba(74,144,226,0.14) 65%, rgba(74,144,226,0.03) 85%, transparent 100%);
        animation: greenBeamBreathe 10s ease-in-out infinite;
    }
    [data-theme="ame"] .light-beam.green::after {
        background: linear-gradient(180deg, transparent 0%, rgba(74,144,226,0.015) 20%, rgba(74,144,226,0.03) 35%, rgba(74,144,226,0.04) 50%, rgba(74,144,226,0.03) 65%, rgba(74,144,226,0.015) 80%, transparent 100%);
    }
    [data-theme="ame"] .light-beam.pink {
        background: linear-gradient(180deg, transparent 0%, rgba(200,149,106,0.02) 20%, rgba(200,149,106,0.10) 45%, rgba(200,149,106,0.18) 55%, rgba(200,149,106,0.10) 65%, rgba(200,149,106,0.02) 80%, transparent 100%);
        animation: pinkBeamBreathe 13s ease-in-out infinite; animation-delay: -3s;
    }
    [data-theme="ame"] .light-beam.pink::after {
        background: linear-gradient(180deg, transparent 0%, rgba(200,149,106,0.01) 25%, rgba(200,149,106,0.02) 50%, rgba(200,149,106,0.01) 75%, transparent 100%);
    }
    [data-theme="ame"] .light-beam.blue {
        background: linear-gradient(180deg, transparent 0%, rgba(123,184,232,0.02) 20%, rgba(123,184,232,0.10) 40%, rgba(123,184,232,0.20) 55%, rgba(123,184,232,0.10) 70%, rgba(123,184,232,0.02) 85%, transparent 100%);
        animation: blueBeamBreathe 15s ease-in-out infinite; animation-delay: -7s;
    }
    [data-theme="ame"] .light-beam.blue::after {
        background: linear-gradient(180deg, transparent 0%, rgba(123,184,232,0.01) 25%, rgba(123,184,232,0.02) 50%, rgba(123,184,232,0.01) 75%, transparent 100%);
    }

    /* Lens flare — blue-gold blend */
    [data-theme="ame"] .lens-flare {
        background: radial-gradient(circle, rgba(74,144,226,0.12) 0%, rgba(123,184,232,0.06) 30%, rgba(200,149,106,0.04) 60%, transparent 70%);
    }

    /* Hero scan — slow wave motion */
    [data-theme="ame"] .hero-scan {
        background: linear-gradient(90deg, transparent 0%, rgba(74,144,226,0.25) 30%, rgba(123,184,232,0.4) 50%, rgba(74,144,226,0.25) 70%, transparent 100%);
        box-shadow: 0 0 25px rgba(74,144,226,0.15), 0 0 50px rgba(123,184,232,0.08);
        animation-duration: 14s;
    }

    /* Hero title */
    [data-theme="ame"] .hero h1 { color: #E8EEF4; }
    [data-theme="ame"] .hero h1 .accent {
        color: #4A90E2;
        text-shadow: 0 0 30px rgba(74,144,226,0.6), 0 0 60px rgba(74,144,226,0.25), 0 0 100px rgba(74,144,226,0.10);
        animation: ameAccentPulse 8s ease-in-out infinite, ameChromatic 24s ease-in-out infinite;
    }
    @keyframes ameAccentPulse {
        0%, 100% { text-shadow: 0 0 30px rgba(74,144,226,0.6), 0 0 60px rgba(74,144,226,0.25), 0 0 100px rgba(74,144,226,0.10); }
        50% { text-shadow: 0 0 40px rgba(74,144,226,0.7), 0 0 80px rgba(123,184,232,0.25), 0 0 120px rgba(74,144,226,0.12); }
    }
    @keyframes ameChromatic {
        0%, 100% { filter: none; }
        25% { filter: drop-shadow(-1px 0 0 rgba(200,149,106,0.2)) drop-shadow(1px 0 0 rgba(123,184,232,0.2)); }
        50% { filter: none; }
        75% { filter: drop-shadow(1px 0 0 rgba(200,149,106,0.15)) drop-shadow(-1px 0 0 rgba(123,184,232,0.15)); }
    }

    /* Badges — blue glow borders, cool blues/golds */
    [data-theme="ame"] .badge {
        border-color: #1A3A5F;
        background: rgba(10,25,50,0.8);
        border-radius: 8px;
        box-shadow: 0 0 8px rgba(74,144,226,0.1);
    }
    [data-theme="ame"] .badge::before { background: linear-gradient(90deg, transparent, rgba(74,144,226,0.1), transparent); }
    [data-theme="ame"] .badge-c { color: #7BB8E8; border-color: rgba(123,184,232,0.4); box-shadow: 0 0 8px rgba(123,184,232,0.2); }
    [data-theme="ame"] .badge-r { color: #C8956A; border-color: rgba(200,149,106,0.4); box-shadow: 0 0 8px rgba(200,149,106,0.2); }
    [data-theme="ame"] .badge-42 { color: #4A9A7A; border-color: rgba(74,154,122,0.4); box-shadow: 0 0 8px rgba(74,154,122,0.2); }

    /* CTA buttons — aquatic, no animated glow */
    [data-theme="ame"] .cta-primary { background: #4A90E2; color: #0A1929; border-color: #4A90E2; box-shadow: 0 4px 12px rgba(0,0,0,0.3); position: relative; overflow: hidden; }
    [data-theme="ame"] .cta-primary::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0,206,209,0.1), transparent); transition: left 0.6s ease; pointer-events: none; }
    [data-theme="ame"] .cta-primary:hover::after { left: 100%; }
    [data-theme="ame"] .cta-primary:hover { background: #3A7BD4; border-color: #00CED1; box-shadow: 0 6px 16px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,206,209,0.15); }
    [data-theme="ame"] .cta-ghost { border-color: #4A90E2; color: #4A90E2; position: relative; overflow: hidden; }
    [data-theme="ame"] .cta-ghost::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(74,144,226,0.08), transparent); transition: left 0.6s ease; pointer-events: none; }
    [data-theme="ame"] .cta-ghost:hover::after { left: 100%; }
    [data-theme="ame"] .cta-ghost:hover { background: #4A90E2; color: #0A1929; box-shadow: 0 0 0 1px rgba(74,144,226,0.1); }

    /* Terminal window */
    [data-theme="ame"] .terminal-window { background: #0D1F35; border-color: #1A3A5F; }
    [data-theme="ame"] .terminal-bar { background: #0F2540; }
    [data-theme="ame"] .terminal-body { color: #C8D8E8; }
    [data-theme="ame"] .terminal-body .cmd { color: #4A90E2; }
    [data-theme="ame"] .terminal-body .flag { color: #7BB8E8; }
    [data-theme="ame"] .terminal-body .out { color: #C8D8E8; }

    /* Feature cards */
    [data-theme="ame"] .feature-card { background: rgba(10,25,50,0.85); border-color: #1A3A5F; border-radius: 8px; }
    [data-theme="ame"] .feature-card:hover { border-color: rgba(74,144,226,0.3); box-shadow: 0 8px 30px rgba(0,0,0,0.3), 0 0 20px rgba(74,144,226,0.08); }
    [data-theme="ame"] .feature-card .fc-icon { color: #4A90E2; }
    [data-theme="ame"] .stat-val { color: #4A90E2; }

    /* Footer */
    [data-theme="ame"] footer { color: var(--text-muted); border-top-color: #1A3A5F; }
    [data-theme="ame"] footer a { color: #4A90E2; }
    [data-theme="ame"] footer a:hover { text-shadow: 0 0 8px rgba(74,144,226,0.3); }

    /* ── Sidebar ── */
    [data-theme="ame"] #sidebar {
        background: rgba(7,11,26,0.92);
        border-color: var(--border);
        backdrop-filter: blur(12px) saturate(140%);
    }
    [data-theme="ame"] .sb-title {
        color: var(--text-muted);
        border-bottom-color: var(--border);
    }
    [data-theme="ame"] .sb-link {
        color: var(--text-muted);
    }
    [data-theme="ame"] .sb-link:hover {
        color: var(--cyan);
        background: var(--electric-dim);
    }
    [data-theme="ame"] .sb-link.active {
        color: var(--cyan);
        background: rgba(0,206,209,0.08);
        border-left-color: var(--cyan);
    }

    /* ── Intro Cards ── */
    [data-theme="ame"] .intro-card {
        background: rgba(8,14,38,0.75);
        border: 1px solid rgba(74, 144, 226, 0.15);
        border-left: 3px solid var(--blue);
        border-radius: 8px;
        backdrop-filter: blur(12px);
        box-shadow: inset 0 0 12px rgba(255,255,255,0.02), 0 10px 30px rgba(0,0,0,0.4), 0 0 15px rgba(74, 144, 226, 0.05);
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    [data-theme="ame"] .intro-card::before {
        background: linear-gradient(90deg, transparent, #4A90E2, transparent);
        opacity: 0.3;
    }
    [data-theme="ame"] .intro-card::after {
        background: linear-gradient(45deg, transparent 40%, rgba(74,144,226,0.06) 45%, rgba(123,184,232,0.04) 50%, transparent 55%);
    }
    [data-theme="ame"] .intro-card:hover {
        border-color: rgba(0, 206, 209, 0.35);
        border-left-color: var(--cyan);
        transform: translateY(-4px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.5), 0 0 25px rgba(0, 206, 209, 0.15), inset 0 0 15px rgba(255,255,255,0.03);
    }
    [data-theme="ame"] .intro-card .title { text-shadow: 0 0 20px rgba(200,216,232,0.15); }

    /* ── Diagram Boxes ── */
    [data-theme="ame"] .diagram-box {
        background: rgba(8,14,38,0.75);
        border: 1px solid rgba(74, 144, 226, 0.15);
        border-left: 3px solid var(--blue);
        border-radius: 8px;
        backdrop-filter: blur(12px);
        box-shadow: inset 0 0 12px rgba(255,255,255,0.02), 0 10px 30px rgba(0,0,0,0.4);
    }
    [data-theme="ame"] .diagram-box::before {
        border-color: rgba(74,144,226,0.1);
    }
    [data-theme="ame"] .diagram-box::after {
        background:
            linear-gradient(rgba(74,144,226,0.02) 1px, transparent 1px),
            linear-gradient(90deg, rgba(74,144,226,0.02) 1px, transparent 1px);
        background-size: 24px 24px;
    }

    /* ── Code Wrapper / Header / Pre ── */
    [data-theme="ame"] .code-wrapper {
        background: rgba(8,14,38,0.8);
        border: 1px solid rgba(74, 144, 226, 0.15);
        border-left: 3px solid var(--blue);
        border-radius: 8px;
        backdrop-filter: blur(12px);
        box-shadow: inset 0 0 12px rgba(255,255,255,0.02), 0 10px 30px rgba(0,0,0,0.4);
    }
    [data-theme="ame"] .code-wrapper::after {
        background:
            linear-gradient(rgba(74,144,226,0.02) 1px, transparent 1px),
            linear-gradient(90deg, rgba(74,144,226,0.02) 1px, transparent 1px);
        background-size: 24px 24px;
    }
    [data-theme="ame"] .code-header {
        background: #0D1F35;
        border-bottom-color: #1A3A5F;
    }
    [data-theme="ame"] .code-header::after {
        background: linear-gradient(90deg, #4A90E2, #7BB8E8);
    }
    [data-theme="ame"] .code-header .lang { color: #4A90E2; }
    [data-theme="ame"] .code-header .file { color: var(--text-muted); }
    [data-theme="ame"] pre {
        background: rgba(5,15,30,0.9);
    }
    [data-theme="ame"] pre::after { display: none; }
    [data-theme="ame"] .code-tab { color: var(--text-muted); }
    [data-theme="ame"] .code-tab.active { background: #4A90E2; color: #0A1929; }
    [data-theme="ame"] code { color: #C8D8E8; }
    [data-theme="ame"] .kw { color: #7BB8E8; }
    [data-theme="ame"] .fn { color: #4A90E2; }
    [data-theme="ame"] .str { color: #4A9A7A; }
    [data-theme="ame"] .num { color: #C8A050; }
    [data-theme="ame"] .cm { color: #4A6A8A; font-style: italic; }
    [data-theme="ame"] .ty { color: #C8956A; }
    [data-theme="ame"] .mac { color: #4A90E2; }

    /* ── Op-Table ── */
    [data-theme="ame"] .op-table th {
        background: #0F2540;
        color: var(--text-muted);
        border-bottom-color: #4A90E2;
        box-shadow: inset 0 -2px 0 0 #4A90E2, inset 0 -3px 8px -2px rgba(74,144,226,0.3);
    }
    [data-theme="ame"] .op-table td { border-bottom-color: rgba(26,58,95,0.5); }
    [data-theme="ame"] .op-table td:first-child { color: #4A90E2; text-shadow: 0 0 8px rgba(74,144,226,0.3); }
    [data-theme="ame"] .op-table tr:hover { background: rgba(74,144,226,0.05); }
    [data-theme="ame"] .op-table tr:hover td:first-child { text-shadow: 0 0 14px rgba(74,144,226,0.5); }

    /* ── Arena Visual ── */
    [data-theme="ame"] .arena-visual {
        background: rgba(10,25,50,0.85);
        border-color: #1A3A5F;
        border-radius: 8px;
        border-left: 4px solid #4A90E2;
        box-shadow: 0 0 16px rgba(74,144,226,0.08), inset 0 0 30px rgba(0,0,0,0.3);
    }
    [data-theme="ame"] .arena-cell.p0 { background: #1A3A6E; box-shadow: 0 0 4px rgba(26,58,110,0.5); }
    [data-theme="ame"] .arena-cell.p1 { background: #4A1A5A; box-shadow: 0 0 4px rgba(74,26,90,0.5); }
    [data-theme="ame"] .arena-cell.p2 { background: #1A4A4A; box-shadow: 0 0 4px rgba(26,74,74,0.5); }
    [data-theme="ame"] .arena-cell.p3 { background: #4A3A1A; box-shadow: 0 0 4px rgba(74,58,26,0.5); }
    [data-theme="ame"] .arena-cell.empty { background: #0D1F35; }
    [data-theme="ame"] .arena-cell.pc { box-shadow: 0 0 10px #4A90E2, 0 0 20px rgba(74,144,226,0.3); z-index: 1; }

    /* Arena legend dots */
    [data-theme="ame"] .arena-legend .dot { border-radius: 4px; }

    /* ── Encoding Demo ── */
    [data-theme="ame"] .encoding-demo {
        background: rgba(10,25,50,0.8);
        border-color: #1A3A5F;
        border-radius: 8px;
        border-left: 3px solid #4A90E2;
        box-shadow: 0 0 14px rgba(74,144,226,0.08), inset 0 0 20px rgba(0,0,0,0.3);
    }
    [data-theme="ame"] .encoding-demo h4 { color: #7BB8E8; }
    [data-theme="ame"] .enc-token { border-radius: 8px; }
    [data-theme="ame"] .enc-opcode { background: rgba(74,144,226,0.1); color: #4A90E2; border-color: #4A90E2; box-shadow: 0 0 10px rgba(74,144,226,0.2); }
    [data-theme="ame"] .enc-acb { background: rgba(200,160,80,0.1); color: #C8A050; border-color: #C8A050; box-shadow: 0 0 10px rgba(200,160,80,0.2); }
    [data-theme="ame"] .enc-reg { background: rgba(74,154,122,0.1); color: #4A9A7A; border-color: #4A9A7A; box-shadow: 0 0 10px rgba(74,154,122,0.2); }
    [data-theme="ame"] .enc-dir { background: rgba(106,90,154,0.1); color: #6A5A9A; border-color: #6A5A9A; box-shadow: 0 0 10px rgba(106,90,154,0.2); }
    [data-theme="ame"] .enc-ind { background: rgba(200,149,106,0.1); color: #C8956A; border-color: #C8956A; box-shadow: 0 0 10px rgba(200,149,106,0.2); }

    /* ── Cycle Lifecycle ── */
    [data-theme="ame"] .lc-step::before {
        background: linear-gradient(180deg, #4A90E2, #7BB8E8, #6A5A9A, #4A9A7A);
        box-shadow: 0 0 6px rgba(74,144,226,0.2);
    }
    [data-theme="ame"] .lc-num { border-radius: 50%; }
    [data-theme="ame"] .lc-num.fetch { background: rgba(74,144,226,0.12); color: #4A90E2; border-color: #4A90E2; box-shadow: 0 0 10px rgba(74,144,226,0.3); }
    [data-theme="ame"] .lc-num.decode { background: rgba(200,160,80,0.12); color: #C8A050; border-color: #C8A050; box-shadow: 0 0 10px rgba(200,160,80,0.3); }
    [data-theme="ame"] .lc-num.wait { background: rgba(106,90,154,0.12); color: #6A5A9A; border-color: #6A5A9A; box-shadow: 0 0 10px rgba(106,90,154,0.3); }
    [data-theme="ame"] .lc-num.exec { background: rgba(74,154,122,0.12); color: #4A9A7A; border-color: #4A9A7A; box-shadow: 0 0 10px rgba(74,154,122,0.3); }

    /* ── Comparison Table ── */
    [data-theme="ame"] .cmp-table th {
        background: #0F2540;
        color: var(--text-muted);
        border-bottom-color: #4A90E2;
        box-shadow: inset 0 -2px 0 0 #4A90E2, inset 0 -3px 8px -2px rgba(74,144,226,0.3);
    }
    [data-theme="ame"] .cmp-table td { border-bottom-color: rgba(26,58,95,0.5); }
    [data-theme="ame"] .cmp-table td:first-child { color: #C8D8E8; text-shadow: 0 0 6px rgba(200,216,232,0.15); }
    [data-theme="ame"] .cmp-table tr:hover td { background: rgba(74,144,226,0.04); }
    [data-theme="ame"] .cmp-table tr:hover td:first-child { color: #4A90E2; text-shadow: 0 0 10px rgba(74,144,226,0.3); }

    /* ── Pills ── */
    [data-theme="ame"] .pill { border-radius: 8px; box-shadow: none; text-shadow: none; }
    [data-theme="ame"] .pill-yes { color: #4A9A7A; border-color: #4A9A7A; background: rgba(74,154,122,0.1); box-shadow: 0 0 8px rgba(74,154,122,0.15); }
    [data-theme="ame"] .pill-no { color: #8B3A3A; border-color: #8B3A3A; background: rgba(139,58,58,0.1); box-shadow: 0 0 8px rgba(139,58,58,0.15); }
    [data-theme="ame"] .pill-idx { color: #7BB8E8; border-color: #7BB8E8; background: rgba(123,184,232,0.1); box-shadow: 0 0 8px rgba(123,184,232,0.15); }
    [data-theme="ame"] .pill-carry { color: #C8A050; border-color: #C8A050; background: rgba(200,160,80,0.1); box-shadow: 0 0 8px rgba(200,160,80,0.15); }

    /* ── Endian Bytes ── */
    [data-theme="ame"] .endian-byte { border-radius: 8px; }
    [data-theme="ame"] .endian-byte.be { background: rgba(74,144,226,0.1); color: #4A90E2; border-color: #4A90E2; box-shadow: 0 0 10px rgba(74,144,226,0.2); }
    [data-theme="ame"] .endian-byte.le { background: rgba(200,149,106,0.1); color: #C8956A; border-color: #C8956A; box-shadow: 0 0 10px rgba(200,149,106,0.2); }

    /* ── Collapsible Sections ── */
    [data-theme="ame"] .collapse-header {
        background: rgba(10,25,50,0.8);
        border-color: #1A3A5F;
        border-radius: 8px;
        border-left: 3px solid #4A90E2;
        box-shadow: 0 0 8px rgba(74,144,226,0.06);
    }
    [data-theme="ame"] .collapse-header:hover { border-color: rgba(74,144,226,0.4); border-left-color: #4A90E2; box-shadow: 0 0 14px rgba(74,144,226,0.12); }
    [data-theme="ame"] .collapse-header .chevron { color: #4A90E2; text-shadow: 0 0 8px rgba(74,144,226,0.4); }
    [data-theme="ame"] .collapse-header.open { border-left-color: #7BB8E8; box-shadow: 0 0 14px rgba(123,184,232,0.1); }
    [data-theme="ame"] .collapse-body.open {
        border-color: #1A3A5F;
        border-left-color: rgba(74,144,226,0.4);
        border-radius: 0 0 8px 8px;
    }
    [data-theme="ame"] .collapse-body.open::after {
        background: repeating-linear-gradient(0deg, transparent 0px, transparent 4px, rgba(74,144,226,0.015) 4px, rgba(74,144,226,0.015) 6px);
    }

    /* ── Process Card / Reg Cells ── */
    [data-theme="ame"] .process-card {
        background: rgba(10,25,50,0.8);
        border-color: #1A3A5F;
        border-radius: 8px;
        border-left: 4px solid #7BB8E8;
        box-shadow: 0 0 12px rgba(123,184,232,0.08), inset 0 0 20px rgba(0,0,0,0.3);
    }
    [data-theme="ame"] .reg-cell {
        background: rgba(10,25,50,0.8);
        border-color: #1A3A5F;
        border-radius: 4px;
        box-shadow: 0 0 4px rgba(0,0,0,0.3);
    }
    [data-theme="ame"] .reg-cell:hover { border-color: #2A5080; box-shadow: 0 0 8px rgba(74,144,226,0.15); }
    [data-theme="ame"] .reg-cell .reg-name { color: #4A90E2; }
    [data-theme="ame"] .reg-cell.r1 { border-color: #4A9A7A; background: rgba(74,154,122,0.08); }

    /* ── Flow Boxes ── */
    [data-theme="ame"] .flow-box { border-radius: 8px; }
    [data-theme="ame"] .flow-box.asm { background: rgba(74,154,122,0.1); border-color: #4A9A7A; color: #4A9A7A; box-shadow: 0 0 12px rgba(74,154,122,0.15), inset 0 0 8px rgba(74,154,122,0.05); }
    [data-theme="ame"] .flow-box.vm { background: rgba(74,144,226,0.1); border-color: #4A90E2; color: #4A90E2; box-shadow: 0 0 12px rgba(74,144,226,0.2), inset 0 0 8px rgba(74,144,226,0.05); }
    [data-theme="ame"] .flow-box.champ { background: rgba(106,90,154,0.1); border-color: #6A5A9A; color: #6A5A9A; box-shadow: 0 0 12px rgba(106,90,154,0.15), inset 0 0 8px rgba(106,90,154,0.05); }

    /* ── Layer Cards ── */
    [data-theme="ame"] .layer-card {
        background: rgba(10,25,50,0.75);
        border-color: #1A3A5F;
        border-radius: 8px;
        border-left: 4px solid #7BB8E8;
        box-shadow: 0 0 12px rgba(123,184,232,0.08), inset 0 0 20px rgba(0,0,0,0.3);
    }
    [data-theme="ame"] .layer-card::before { background: linear-gradient(90deg, transparent, #7BB8E8, transparent); opacity: 0.25; }
    [data-theme="ame"] .layer-card::after { background: linear-gradient(45deg, transparent 40%, rgba(123,184,232,0.05) 45%, rgba(74,144,226,0.03) 50%, transparent 55%); }
    [data-theme="ame"] .layer-card:hover {
        border-color: rgba(123,184,232,0.4);
        border-left-color: #7BB8E8;
        box-shadow: 0 0 20px rgba(123,184,232,0.15), inset 0 0 30px rgba(123,184,232,0.02);
    }

    /* ── Store Cells ── */
    [data-theme="ame"] .store-cell { background: rgba(10,25,50,0.8); border-color: #1A3A5F; border-radius: 4px; box-shadow: 0 0 4px rgba(0,0,0,0.3); }
    [data-theme="ame"] .store-cell.active-write { border-color: #4A90E2; background: rgba(74,144,226,0.1); box-shadow: 0 0 12px rgba(74,144,226,0.3), inset 0 0 6px rgba(74,144,226,0.05); }
    [data-theme="ame"] .store-cell.done { border-color: #1A3A5F; opacity: 0.6; }

    /* ── Arena Cell Mini ── */
    [data-theme="ame"] .arena-cell-mini { border-radius: 2px; }
    [data-theme="ame"] .arena-cell-mini:hover { outline-color: #4A90E2; box-shadow: 0 0 6px rgba(74,144,226,0.3); }
    [data-theme="ame"] .arena-cell-mini.cp0 { background: #1A4A7A; box-shadow: 0 0 3px rgba(26,74,122,0.4); }
    [data-theme="ame"] .arena-cell-mini.cp1 { background: #5A1A6A; box-shadow: 0 0 3px rgba(90,26,106,0.4); }
    [data-theme="ame"] .arena-cell-mini.cp2 { background: #1A5A4A; box-shadow: 0 0 3px rgba(26,90,74,0.4); }
    [data-theme="ame"] .arena-cell-mini.cp3 { background: #6A5A1A; box-shadow: 0 0 3px rgba(106,90,26,0.4); }
    [data-theme="ame"] .arena-cell-mini.cempty { background: #0D1F35; }
    [data-theme="ame"] .arena-cell-mini.cpc { box-shadow: inset 0 0 4px #4A90E2, 0 0 8px rgba(74,144,226,0.4); }

    /* ── All Container Overrides ── */
    /* ── All Container Overrides ── */
    [data-theme="ame"] .ring-diagram-container {
        background: rgba(8, 14, 38, 0.65);
        border: 1px solid var(--border);
        border-left: 3px solid var(--cyan);
        border-radius: 8px;
        backdrop-filter: blur(10px) saturate(120%);
        box-shadow: 0 10px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 15px var(--ray-dim);
    }
    [data-theme="ame"] .wrap-arena-container {
        background: rgba(8, 14, 38, 0.65);
        border: 1px solid var(--border);
        border-left: 3px solid var(--electric);
        border-radius: 8px;
        backdrop-filter: blur(10px) saturate(120%);
        box-shadow: 0 10px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 15px var(--electric-dim);
    }
    [data-theme="ame"] .layer-stack-container {
        background: rgba(8, 14, 38, 0.65);
        border: 1px solid var(--border);
        border-left: 3px solid var(--pink);
        border-radius: 8px;
        backdrop-filter: blur(10px) saturate(120%);
        box-shadow: 0 10px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 15px var(--pink-dim);
    }
    [data-theme="ame"] .store-anim-container {
        background: rgba(8, 14, 38, 0.65);
        border: 1px solid var(--border);
        border-left: 3px solid var(--electric);
        border-radius: 8px;
        backdrop-filter: blur(10px) saturate(120%);
        box-shadow: 0 10px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 15px var(--electric-dim);
    }
    [data-theme="ame"] .wrap-store-container {
        background: rgba(8, 14, 38, 0.65);
        border: 1px solid var(--border);
        border-left: 3px solid var(--orange);
        border-radius: 8px;
        backdrop-filter: blur(10px) saturate(120%);
        box-shadow: 0 10px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 15px rgba(212,160,80,0.08);
    }
    [data-theme="ame"] .endian-interactive {
        background: rgba(8, 14, 38, 0.65);
        border: 1px solid var(--border);
        border-left: 3px solid var(--electric);
        border-radius: 8px;
        backdrop-filter: blur(10px) saturate(120%);
        box-shadow: 0 10px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 15px var(--electric-dim);
    }
    [data-theme="ame"] .champ-load-container {
        background: rgba(8, 14, 38, 0.65);
        border: 1px solid var(--border);
        border-left: 3px solid var(--purple);
        border-radius: 8px;
        backdrop-filter: blur(10px) saturate(120%);
        box-shadow: 0 10px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 15px rgba(26,42,108,0.08);
    }
    [data-theme="ame"] .memod-calc-container {
        background: rgba(8, 14, 38, 0.65);
        border: 1px solid var(--border);
        border-left: 3px solid var(--yellow);
        border-radius: 8px;
        backdrop-filter: blur(10px) saturate(120%);
        box-shadow: 0 10px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 15px rgba(212,160,80,0.08);
    }
    [data-theme="ame"] .ctd-visual {
        background: rgba(8, 14, 38, 0.65);
        border: 1px solid var(--border);
        border-left: 3px solid var(--orange);
        border-radius: 8px;
        backdrop-filter: blur(10px) saturate(120%);
        box-shadow: 0 10px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 15px rgba(212,160,80,0.08);
    }
    [data-theme="ame"] .quiz-box {
        background: rgba(8, 14, 38, 0.7);
        border: 1px solid var(--border);
        border-left: 4px solid var(--purple);
        border-radius: 8px;
        backdrop-filter: blur(12px) saturate(120%);
        box-shadow: 0 10px 35px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 20px rgba(26,42,108,0.08);
    }
    [data-theme="ame"] .quiz-box::before {
        background: linear-gradient(135deg, rgba(26,42,108,0.06) 0%, transparent 40%);
        border-radius: 8px;
    }

    /* Insight box */
    [data-theme="ame"] .insight-box {
        background: linear-gradient(135deg, rgba(8,14,38,0.85) 0%, rgba(13,21,53,0.85) 100%);
        border: 1px solid rgba(74, 144, 226, 0.15);
        border-left: 4px solid var(--cyan);
        border-radius: 0 8px 8px 0;
        backdrop-filter: blur(12px);
        box-shadow: inset 0 0 12px rgba(255,255,255,0.02), 0 10px 30px rgba(0,0,0,0.4);
    }
    [data-theme="ame"] .insight-box .ib-title { color: var(--cyan); }

    /* Warning box */
    [data-theme="ame"] .warning-box {
        background: linear-gradient(135deg, rgba(38,14,8,0.85) 0%, rgba(53,21,13,0.85) 100%);
        border: 1px solid rgba(212, 160, 80, 0.25);
        border-left: 4px solid var(--orange);
        border-radius: 0 8px 8px 0;
        backdrop-filter: blur(12px);
        box-shadow: inset 0 0 12px rgba(255,255,255,0.02), 0 10px 30px rgba(0,0,0,0.4);
    }
    [data-theme="ame"] .warning-box .wb-title { color: var(--orange); }

    /* ── Simulateur VM ── */
    [data-theme="ame"] .sim-container {
        background: rgba(8, 14, 38, 0.65);
        border: 1px solid rgba(74, 144, 226, 0.15);
        border-left: 4px solid var(--cyan);
        border-radius: 8px;
        backdrop-filter: blur(12px) saturate(120%);
        box-shadow: inset 0 0 12px rgba(255,255,255,0.02), 0 12px 40px rgba(0,0,0,0.45);
    }
    [data-theme="ame"] .sim-controls {
        background: rgba(13, 21, 53, 0.6);
        border-bottom: 1px solid var(--border);
    }
    [data-theme="ame"] .sim-btn {
        background: rgba(30, 91, 216, 0.1);
        border: 1px solid rgba(30, 91, 216, 0.3);
        color: var(--text);
        border-radius: 6px;
        transition: all 0.3s ease;
    }
    [data-theme="ame"] .sim-btn:hover {
        border-color: var(--cyan);
        color: var(--cyan);
        background: var(--electric-dim);
        box-shadow: 0 0 10px var(--electric-glow);
    }
    [data-theme="ame"] .sim-btn.active {
        border-color: var(--cyan);
        color: var(--cyan);
        background: rgba(0, 206, 209, 0.12);
        box-shadow: 0 0 12px var(--electric-glow);
    }
    [data-theme="ame"] .sim-btn.reset-btn {
        border-color: rgba(153, 0, 0, 0.5);
        color: var(--text-muted);
    }
    [data-theme="ame"] .sim-btn.reset-btn:hover {
        border-color: #FF3333;
        color: #FF3333;
        background: rgba(255, 51, 51, 0.08);
        box-shadow: 0 0 10px rgba(255, 51, 51, 0.2);
    }
    [data-theme="ame"] .sim-arena-panel {
        background: rgba(13, 21, 53, 0.4);
        border-color: var(--border);
    }
    [data-theme="ame"] .sim-info-panel {
        background: rgba(13, 21, 53, 0.4);
        border-color: var(--border);
    }
    [data-theme="ame"] .sim-proc-card {
        background: rgba(8, 14, 38, 0.6);
        border: 1px solid var(--border);
        border-radius: 6px;
        transition: all 0.3s ease;
    }
    [data-theme="ame"] .sim-proc-card.selected {
        border-color: var(--cyan);
        background: rgba(0, 206, 209, 0.08);
        box-shadow: 0 0 10px var(--electric-glow);
    }
    [data-theme="ame"] .sim-reg-item {
        background: rgba(8, 14, 38, 0.5);
        border: 1px solid var(--border);
        border-radius: 4px;
    }
    [data-theme="ame"] .sim-reg-item .reg-val {
        color: var(--cyan);
    }
    [data-theme="ame"] .sim-log-container {
        background: rgba(13, 21, 53, 0.5);
        border-color: var(--border);
    }
    [data-theme="ame"] .sim-log-entry {
        border-bottom-color: rgba(21, 42, 85, 0.4);
    }
    [data-theme="ame"] .sim-log-entry.sys {
        color: var(--cyan);
    }
    [data-theme="ame"] .sim-log-entry.log-death {
        color: #FF5555;
    }
    [data-theme="ame"] .sim-log-entry.log-fork {
        color: var(--purple);
    }
    [data-theme="ame"] .sim-log-entry.log-ctd {
        color: var(--orange);
    }
    [data-theme="ame"] .sim-cell {
        background: rgba(8, 14, 38, 0.5);
        border-radius: 2px;
    }
    [data-theme="ame"] .sim-cell.p1 {
        background: #1A3A6E;
    }
    [data-theme="ame"] .sim-cell.p2 {
        background: #5A1A5A;
    }
    [data-theme="ame"] .sim-cell.pc1 {
        box-shadow: inset 0 0 4px var(--cyan), 0 0 8px var(--cyan);
    }
    [data-theme="ame"] .sim-cell.pc2 {
        box-shadow: inset 0 0 4px var(--pink), 0 0 8px var(--pink);
    }

    /* Sim phase steps */
    [data-theme="ame"] .sim-phase-step {
        border-radius: 4px;
        background: rgba(8, 14, 38, 0.5);
        border: 1px solid var(--border);
    }
    [data-theme="ame"] .sim-phase-step.active-fetch {
        border-color: var(--electric);
        color: var(--electric);
        background: rgba(0, 206, 209, 0.1);
        box-shadow: 0 0 8px var(--electric-glow);
    }
    [data-theme="ame"] .sim-phase-step.active-decode {
        border-color: var(--purple);
        color: var(--purple);
        background: rgba(106, 90, 154, 0.1);
        box-shadow: 0 0 8px rgba(106, 90, 154, 0.2);
    }
    [data-theme="ame"] .sim-phase-step.active-wait {
        border-color: var(--yellow);
        color: var(--yellow);
        background: rgba(212, 160, 80, 0.1);
        box-shadow: 0 0 8px rgba(212, 160, 80, 0.2);
    }
    [data-theme="ame"] .sim-phase-step.active-exec {
        border-color: var(--cyan);
        color: var(--cyan);
        background: rgba(0, 206, 209, 0.1);
        box-shadow: 0 0 8px var(--electric-glow);
    }

    /* Sim gameover */
    [data-theme="ame"] .sim-gameover {
        background: rgba(7, 11, 26, 0.9);
    }
    [data-theme="ame"] .sim-gameover h3 {
        color: var(--cyan);
        text-shadow: 0 0 20px var(--electric-glow);
    }

    /* Speed slider */
    [data-theme="ame"] .sim-speed-slider::-webkit-slider-thumb {
        background: var(--cyan);
        box-shadow: 0 0 8px var(--electric-glow);
    }
    [data-theme="ame"] .sim-speed-slider::-moz-range-thumb {
        background: var(--cyan);
    }
    [data-theme="ame"] .sim-speed-val {
        color: var(--cyan);
    }

    /* Sim tooltip */
    [data-theme="ame"] .sim-tooltip { border-radius: 6px; background: rgba(7,11,26,0.95); border-color: var(--border-light); }
    [data-theme="ame"] .sim-tooltip .tt-val { color: var(--cyan); }

    /* ── Progress Bar ── */
    [data-theme="ame"] #progress-bar { background: var(--cyan); box-shadow: 0 0 8px var(--electric-glow); }

    /* ── Filter Buttons ── */
    [data-theme="ame"] .filter-btn { border-radius: 20px; transition: all 0.3s ease; }
    [data-theme="ame"] .filter-btn.active { background: var(--cyan); border-color: var(--cyan); color: #070B1A; box-shadow: 0 0 10px var(--electric-glow); }

    /* ── Quiz ── */
    [data-theme="ame"] .quiz-opt { border-radius: 6px; transition: all 0.2s ease; border-color: var(--border); }
    [data-theme="ame"] .quiz-q { border-radius: 8px; }
    [data-theme="ame"] .quiz-opt:hover { border-color: var(--cyan); color: var(--text); background: rgba(0, 206, 209, 0.04); }
    [data-theme="ame"] .quiz-opt.correct { border-color: var(--green); color: var(--green); background: rgba(0, 206, 209, 0.08); }
    [data-theme="ame"] .quiz-opt.wrong { border-color: var(--red); color: var(--red); background: rgba(153, 0, 0, 0.08); }
    [data-theme="ame"] .quiz-q .qq-explain { background: rgba(0, 206, 209, 0.03); border-left-color: var(--cyan); }

    /* ── Copy Button ── */
    [data-theme="ame"] .copy-btn { border-radius: 4px; transition: all 0.2s ease; }
    [data-theme="ame"] .copy-btn:hover { border-color: var(--cyan); color: var(--cyan); background: var(--electric-dim); }

    /* ── Wrap Cells ── */
    [data-theme="ame"] .wrap-cell { border-radius: 4px; }
    [data-theme="ame"] .wrap-cell.wc-pc { border-color: var(--cyan); background: rgba(0, 206, 209, 0.08); box-shadow: 0 0 10px var(--electric-glow); }
    [data-theme="ame"] .wrap-cell.wc-pc .wc-val { color: var(--cyan); }

    /* ── Layer Stack Grid ── */
    [data-theme="ame"] .layer-stack-grid .lsg-header { border-radius: 4px; }
    [data-theme="ame"] .layer-stack-grid .lsg-label { border-radius: 4px; }
    [data-theme="ame"] .layer-stack-grid .lsg-cell { border-radius: 4px; }
    [data-theme="ame"] .layer-stack-grid .lsg-cell.lsg-writing { border-color: var(--cyan); background: rgba(0, 206, 209, 0.08); box-shadow: 0 0 8px var(--electric-glow); }

    /* ── Wrap Store Grid ── */
    [data-theme="ame"] .wrap-store-grid .wsg-header { border-radius: 4px; }
    [data-theme="ame"] .wrap-store-grid .wsg-label { border-radius: 4px; }
    [data-theme="ame"] .wrap-store-grid .wsg-cell { border-radius: 4px; }
    [data-theme="ame"] .wrap-store-grid .wsg-cell.wsg-writing { border-color: var(--orange); background: rgba(212, 160, 80, 0.08); box-shadow: 0 0 8px rgba(212, 160, 80, 0.2); }

    /* ── Champ Info Card ── */
    [data-theme="ame"] .champ-info-card { border-radius: 8px; background: rgba(13, 21, 53, 0.6); border-color: var(--border); backdrop-filter: blur(8px); }

    /* ── CTD Visual ── */
    [data-theme="ame"] .ctd-bar-container { border-radius: 8px; background: rgba(13, 21, 53, 0.6); border-color: var(--border); }
    [data-theme="ame"] .ctd-stat { border-radius: 8px; background: rgba(13, 21, 53, 0.6); border-color: var(--border); }

    /* ── Memod ── */
    [data-theme="ame"] .memod-item { border-radius: 6px; }
    [data-theme="ame"] .memod-calc-result { border-radius: 8px; background: rgba(13, 21, 53, 0.6); border-color: var(--border); }
    [data-theme="ame"] .memod-calc-result .mcr-steps .highlight { color: var(--cyan); }

    /* ── Endian Interactive ── */
    [data-theme="ame"] .endian-side { border-radius: 8px; background: rgba(13, 21, 53, 0.6); border-color: var(--border); }
    [data-theme="ame"] .endian-side .es-byte { border-radius: 6px; }
    [data-theme="ame"] .endian-side .es-byte.be-active { background: rgba(30, 91, 216, 0.15); color: var(--cyan); border-color: var(--cyan); }
    [data-theme="ame"] .endian-side .es-byte.le-active { background: rgba(212, 160, 80, 0.15); color: var(--orange); border-color: var(--orange); }

    /* ── Animation Buttons ── */
    [data-theme="ame"] .anim-btn { border-radius: 8px; border-color: var(--cyan); color: var(--cyan); background: transparent; transition: all 0.3s ease; }
    [data-theme="ame"] .anim-btn:hover { background: var(--cyan); color: #070B1A; }
    [data-theme="ame"] .anim-btn:disabled { background: transparent; color: var(--text-muted); opacity: 0.5; border-color: var(--border); }

    /* ── Wrap Buttons ── */
    [data-theme="ame"] .wrap-btn { border-radius: 8px; border-color: var(--cyan); color: var(--cyan); background: transparent; transition: all 0.3s ease; }
    [data-theme="ame"] .wrap-btn:hover { background: var(--cyan); color: #070B1A; }

    /* ── Endian Toggle ── */
    [data-theme="ame"] .endian-toggle-btn { border-radius: 6px; border-color: var(--border); background: rgba(30, 91, 216, 0.1); color: var(--text-muted); transition: all 0.3s ease; }
    [data-theme="ame"] .endian-toggle-btn.active { background: var(--cyan); color: #070B1A; border-color: var(--cyan); box-shadow: 0 0 10px var(--electric-glow); }

    /* ── Arena Buttons ── */
    [data-theme="ame"] .arena-btn { border-radius: 6px; border-color: var(--border); background: rgba(30, 91, 216, 0.1); color: var(--text-muted); transition: all 0.3s ease; }
    [data-theme="ame"] .arena-btn.active { background: var(--cyan); border-color: var(--cyan); color: #070B1A; box-shadow: 0 0 10px var(--electric-glow); }

    /* ── Arena Tooltip ── */
    [data-theme="ame"] .arena-tooltip { border-radius: 6px; background: rgba(7, 11, 26, 0.95); border-color: var(--border-light); }

    /* ── Search ── */
    [data-theme="ame"] #search-box { border-radius: 8px; background: rgba(7, 11, 26, 0.95); border-color: var(--border-light); box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 20px var(--electric-glow); }
    [data-theme="ame"] .search-result mark { background: rgba(0, 206, 209, 0.2); color: var(--cyan); }

    /* ── Back to Top ── */
    [data-theme="ame"] #back-to-top { background: rgba(7, 11, 26, 0.9); border-color: var(--border); }
    [data-theme="ame"] #back-to-top:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 15px var(--electric-glow); }

    /* ── Search Overlay ── */
    [data-theme="ame"] #search-overlay { background: rgba(7, 11, 26, 0.85); }

    /* ── Sections ── */
    [data-theme="ame"] section { border-bottom-color: var(--border); }

    /* ── Headings ── */
    [data-theme="ame"] h2 .num { color: var(--cyan); }
    [data-theme="ame"] h3 { color: var(--cyan); }
    /* FIX Dalloway point 1: les h1-h5 du thème ame ont déjà text-shadow:none !important
       et display:inline-block !important dans dalloway-protocol.css section 5.
       Cette règle guide.css (text-shadow: 0 1px 3px rgba(0,0,0,0.95)) entrait en
       conflit avec le !important du dalloway. Supprimée pour les headings.
       Gardée uniquement pour p, li, td, nav a, .sb-link qui ne sont pas
       couverts par la règle dalloway. */
    [data-theme="ame"] p,
    [data-theme="ame"] li,
    [data-theme="ame"] td,
    [data-theme="ame"] .hero p,
    [data-theme="ame"] nav a,
    [data-theme="ame"] .sb-link {
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
    }

    /* ── Tooltip ── */
    [data-theme="ame"] .tip { border-bottom-color: var(--cyan); color: var(--cyan); }

    /* ── CTD bars ── */
    [data-theme="ame"] .ctd-bar.ctd-green { background: linear-gradient(90deg, #1A3A4A, #2A5A5A); color: var(--green); }
    [data-theme="ame"] .ctd-bar.ctd-yellow { background: linear-gradient(90deg, #2A3A1A, #4A4A2A); color: var(--yellow); }
    [data-theme="ame"] .ctd-bar.ctd-orange { background: linear-gradient(90deg, #3A2A1A, #4A3A2A); color: var(--orange); }
    [data-theme="ame"] .ctd-bar.ctd-red { background: linear-gradient(90deg, #2A1A1A, #4A2A2A); color: var(--red); }

    /* ── Wrap info ── */
    [data-theme="ame"] .wrap-info { background: rgba(13, 21, 53, 0.6); border-color: var(--border); border-radius: 6px; }
    [data-theme="ame"] .wrap-info .wi-val { color: var(--cyan); }

    /* ── Store anim step ── */
    [data-theme="ame"] .store-anim-step.sa-active { background: rgba(0, 206, 209, 0.06); }

    /* ── WSG boundary marker ── */
    [data-theme="ame"] .wsg-boundary-marker { background: rgba(13, 21, 53, 0.8) !important; border-color: var(--orange) !important; }

    /* ── Memod calc input ── */
    [data-theme="ame"] .memod-calc-input input { background: rgba(13, 21, 53, 0.8); border-color: var(--border); color: var(--text); }
    [data-theme="ame"] .memod-calc-input input:focus { border-color: var(--cyan); box-shadow: 0 0 8px var(--electric-glow); }

    /* ── Âme theme transition animation ── */
    #theme-transition.transition-to-ame {
        animation: ameWaterDissolve 1s ease-out forwards;
    }
    @keyframes ameWaterDissolve {
        0% { opacity: 0; }
        5% { opacity: 1; background: rgba(7, 11, 26, 0); }
        10% { background: rgba(0, 206, 209, 0.08); }
        20% { background: rgba(7, 11, 26, 0.5); }
        30% { background: rgba(0, 206, 209, 0.15); transform: scale(1.02); }
        40% { background: rgba(7, 11, 26, 0.85); transform: scale(1); }
        60% { background: rgba(7, 11, 26, 0.95); }
        80% { background: rgba(7, 11, 26, 0.7); }
        100% { background: rgba(7, 11, 26, 0); opacity: 0; }
    }
    /* Aquatic shimmer line for ame transition */
    #theme-transition.transition-to-ame::before {
        content: '';
        position: absolute; top: 50%; left: 0; right: 0;
        height: 2px;
        background: rgba(74,144,226,0.8);
        box-shadow: 0 0 30px rgba(74,144,226,0.5), 0 0 60px rgba(123,184,232,0.3), 0 0 100px rgba(74,144,226,0.15);
        animation: ameLine 0.9s ease-out forwards;
    }
    @keyframes ameLine {
        0% { opacity: 0; transform: scaleX(0); }
        10% { opacity: 1; transform: scaleX(0.3); }
        20% { opacity: 0.6; transform: scaleX(0.8); }
        30% { opacity: 1; transform: scaleX(1); }
        40% { opacity: 0.7; }
        60% { opacity: 0.3; height: 4px; }
        100% { opacity: 0; height: 80vh; top: 10vh; }
    }

    @keyframes causticDrift {
        0% { background-position: 0% 0%; }
        50% { background-position: 100% 100%; }
        100% { background-position: 0% 0%; }
    }
    @keyframes deepPulse {
        0%, 100% { box-shadow: 0 0 15px rgba(30,91,216,0.08); }
        50% { box-shadow: 0 0 25px rgba(30,91,216,0.2), 0 0 50px rgba(30,91,216,0.06), 0 0 15px rgba(0,206,209,0.08); }
    }
    @keyframes bubbleFloat {
        0% { transform: translateY(0) translateX(0); }
        25% { transform: translateY(-5px) translateX(2px); }
        50% { transform: translateY(-2px) translateX(-1px); }
        75% { transform: translateY(-7px) translateX(3px); }
        100% { transform: translateY(0) translateX(0); }
    }

    /* ── Interactive Water Ripple ── */
    [data-theme="ame"] .water-ripple {
        position: fixed;
        border: 1.5px solid rgba(0,206,209,0.45);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9990;
        width: 300px;
        height: 300px;
        transform: translate(-50%, -50%) scale(0);
        transform-origin: center;
        animation: waterRippleExpand 1.4s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
        box-shadow: 0 0 15px rgba(0,206,209,0.25), inset 0 0 15px rgba(0,206,209,0.15);
    }
    [data-theme="ame"] .water-ripple-mid {
        position: fixed;
        border: 1px solid rgba(30,91,216,0.3);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9990;
        width: 300px;
        height: 300px;
        transform: translate(-50%, -50%) scale(0);
        transform-origin: center;
        animation: waterRippleExpand 1.6s cubic-bezier(0.1, 0.8, 0.3, 1) 0.12s forwards;
        box-shadow: 0 0 15px rgba(30,91,216,0.2), inset 0 0 15px rgba(30,91,216,0.1);
    }
    [data-theme="ame"] .water-ripple-inner {
        position: fixed;
        border: 1px solid rgba(0,206,209,0.2);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9990;
        width: 300px;
        height: 300px;
        transform: translate(-50%, -50%) scale(0);
        transform-origin: center;
        animation: waterRippleExpand 1.8s cubic-bezier(0.1, 0.8, 0.3, 1) 0.24s forwards;
        box-shadow: 0 0 12px rgba(0,206,209,0.12), inset 0 0 12px rgba(0,206,209,0.06);
    }
    @keyframes waterRippleExpand {
        0% { transform: translate(-50%, -50%) scale(0); opacity: 0.8; }
        100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
    }

    /* Aquatic wave keyframe for hero scan slow mode */
    @keyframes ameWaveScan {
        0% { top: -2px; opacity: 0; }
        5% { opacity: 0.8; }
        50% { opacity: 1; }
        95% { opacity: 0.8; }
        100% { top: 100%; opacity: 0; }
    }

    /* Insight box collapsible details */
    .insight-details {
        margin: 8px 0;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--card);
        overflow: hidden;
    }
    .insight-summary {
        padding: 12px 16px;
        cursor: pointer;
        font-weight: 600;
        font-size: 0.95em;
        color: var(--fg);
        list-style: none;
        display: flex;
        align-items: center;
        gap: 8px;
        user-select: none;
        transition: background 0.2s;
    }
    .insight-summary::-webkit-details-marker { display: none; }
    .insight-summary::before {
        content: '▸';
        font-size: 0.8em;
        transition: transform 0.2s;
        color: var(--cyan);
        flex-shrink: 0;
    }
    .insight-details[open] .insight-summary::before {
        transform: rotate(90deg);
    }
    .insight-summary:hover {
        background: color-mix(in srgb, var(--cyan) 8%, transparent);
    }
    .insight-details .insight-box {
        margin: 0;
        border: none;
        border-top: 1px solid var(--border);
        border-radius: 0;
    }

    /* ── Partie A / Partie B Separator ── */
    .part-divider {
        position: relative;
        margin: 80px 0 60px;
        padding: 48px 0;
        text-align: center;
        border-top: 2px solid var(--border);
        border-bottom: 2px solid var(--border);
        background: linear-gradient(180deg, rgba(3,5,8,0.6) 0%, transparent 20%, transparent 80%, rgba(3,5,8,0.6) 100%);
    }
    .part-divider::before {
        content: '';
        position: absolute;
        top: -2px; left: 0; right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, var(--cyan) 30%, var(--green) 50%, var(--yellow) 70%, transparent 100%);
        animation: divider-glow 4s ease-in-out infinite alternate;
    }
    @keyframes divider-glow {
        0% { opacity: 0.5; }
        100% { opacity: 1; }
    }
    .part-divider .part-label {
        font-family: var(--mono);
        font-size: 0.75rem;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 8px;
    }
    .part-divider .part-title {
        font-family: var(--heading);
        font-size: 2.2rem;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 8px;
    }
    .part-divider .part-subtitle {
        font-size: 0.95rem;
        color: var(--text-muted);
        max-width: 600px;
        margin: 0 auto;
        line-height: 1.6;
    }
    .part-divider .part-icon {
        font-size: 2rem;
        margin-bottom: 12px;
        display: block;
    }

    /* Partie B specific styling */
    #partie-b .insight-box {
        border-left-color: #a78bfa; /* purple accent for theory */
        background: rgba(167, 139, 250, 0.06);
    }
    #partie-b .ib-title {
        color: #c4b5fd;
    }
    #partie-b section h2 .num {
        color: #a78bfa;
    }
    .b-section-label {
        display: inline-block;
        font-family: var(--mono);
        font-size: 0.65rem;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: #a78bfa;
        background: rgba(167, 139, 250, 0.12);
        padding: 2px 8px;
        border-radius: 3px;
        margin-bottom: 8px;
    }

    
.cross-ref {
    font-size: 0.9em;
    color: var(--text-muted);
    border-left: 3px solid var(--violet);
    padding: 4px 8px;
    margin: 8px 0;
    background: rgba(155,89,255,0.05);
    border-radius: 0 4px 4px 0;
}


/* ── Formal Specification Blocks ── */
.formal-spec {
    background: rgba(0,212,255,0.04);
    border: 1px solid rgba(0,212,255,0.15);
    border-left: 3px solid var(--electric);
    border-radius: 0 6px 6px 0;
    padding: 10px 14px;
    margin: 10px 0;
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.6;
    color: #b0c4de;
    overflow-x: auto;
}
.formal-spec .fs-label {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--electric);
    margin-bottom: 6px;
    display: block;
}
.formal-spec .fs-let {
    color: #8899aa;
}
.formal-spec .fs-kw {
    color: var(--cyan);
}
.formal-spec .fs-addr {
    color: var(--pink);
}
.formal-spec .fs-comment {
    color: var(--text-muted);
    font-style: italic;
}
.formal-spec .fs-emph {
    color: var(--electric);
    font-weight: 500;
}

/* Game theory payoff matrix */
.payoff-matrix {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-family: var(--mono);
    font-size: 0.8rem;
}
.payoff-matrix th, .payoff-matrix td {
    border: 1px solid var(--border-light);
    padding: 8px 12px;
    text-align: center;
}
.payoff-matrix th {
    background: rgba(0,212,255,0.06);
    color: var(--electric);
    font-weight: 500;
}
.payoff-matrix td {
    color: var(--text);
}
.payoff-matrix .pm-label {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.72rem;
}

/* Complexity table */
.complexity-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-family: var(--mono);
    font-size: 0.78rem;
}
.complexity-table th, .complexity-table td {
    border: 1px solid var(--border-light);
    padding: 6px 10px;
    text-align: left;
}
.complexity-table th {
    background: rgba(0,210,255,0.04);
    color: var(--cyan);
    font-weight: 500;
}
.complexity-table .ct-o1 { color: var(--cyan); }
.complexity-table .ct-on { color: var(--yellow); }
.complexity-table .ct-on2 { color: var(--orange); }
.complexity-table .ct-exp { color: var(--red); }

/* ═══════════════════════════════════════════════════════════════════
   3-LEVEL READING SYSTEM
   🔵 Noyau — Ce qu'il faut implémenter (sans quoi ça ne compile pas)
   🟡 Compréhension — Pourquoi ça fonctionne ainsi (lien CS)
   🔴 Approfondissement — Théorie, historique, comparaisons (renvoie à Partie B)
   ═══════════════════════════════════════════════════════════════════ */

/* Level markers — colored left border + subtle background */
[data-level="noyau"] {
    border-left: 3px solid var(--level-noyau) !important;
    background: var(--level-noyau-bg) !important;
    padding-left: 14px !important;
    margin-left: -4px !important;
    border-radius: 0 4px 4px 0 !important;
}
[data-level="comprehension"] {
    border-left: 3px solid var(--level-comprehension) !important;
    background: var(--level-comprehension-bg) !important;
    padding-left: 14px !important;
    margin-left: -4px !important;
    border-radius: 0 4px 4px 0 !important;
}
[data-level="approfondissement"] {
    border-left: 3px solid var(--level-approfondissement) !important;
    background: var(--level-approfondissement-bg) !important;
    padding-left: 14px !important;
    margin-left: -4px !important;
    border-radius: 0 4px 4px 0 !important;
}

/* ── Depth Explainer (intro section) ── */
.depth-explainer {
    background: rgba(10, 15, 26, 0.6);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 20px 24px;
    margin: 24px 0;
    backdrop-filter: blur(4px);
}
.de-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 16px;
}
.de-title {
    font-family: var(--mono);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
}
.de-sub {
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.7;
}
.de-levels {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.de-level {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: all 0.25s ease;
}
.de-level:hover {
    transform: translateX(4px);
}
.de-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
}
.de-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.de-info strong {
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.de-info span {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}
/* 🔵 Noyau */
.de-level-noyau {
    background: rgba(59, 130, 246, 0.06);
    border-color: rgba(59, 130, 246, 0.15);
}
.de-level-noyau .de-info strong { color: #93c5fd; }
.de-level-noyau:hover { border-color: rgba(59, 130, 246, 0.35); background: rgba(59, 130, 246, 0.1); }
/* 🟡 Compréhension */
.de-level-comprehension {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.15);
}
.de-level-comprehension .de-info strong { color: #fcd34d; }
.de-level-comprehension:hover { border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.1); }
/* 🔴 Approfondissement */
.de-level-approfondissement {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.15);
}
.de-level-approfondissement .de-info strong { color: #fca5a5; }
.de-level-approfondissement:hover { border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.1); }
.de-note {
    margin-top: 14px;
    margin-bottom: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    opacity: 0.7;
    line-height: 1.5;
}

/* Nier theme — depth explainer */
[data-theme="nier"] .depth-explainer {
    background: rgba(245, 240, 232, 0.5);
    border-color: #c8c0b0;
}
[data-theme="nier"] .de-level-noyau {
    background: rgba(37, 99, 235, 0.06);
    border-color: rgba(37, 99, 235, 0.15);
}
[data-theme="nier"] .de-level-noyau .de-info strong { color: #2563eb; }
[data-theme="nier"] .de-level-comprehension {
    background: rgba(180, 83, 9, 0.06);
    border-color: rgba(180, 83, 9, 0.15);
}
[data-theme="nier"] .de-level-comprehension .de-info strong { color: #b45309; }
[data-theme="nier"] .de-level-approfondissement {
    background: rgba(185, 28, 28, 0.06);
    border-color: rgba(185, 28, 28, 0.15);
}
[data-theme="nier"] .de-level-approfondissement .de-info strong { color: #b91c1c; }

/* Âme theme — depth explainer */
[data-theme="ame"] .depth-explainer {
    background: rgba(10, 25, 41, 0.6);
    border-color: rgba(74, 144, 226, 0.2);
}
[data-theme="ame"] .de-level-noyau {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.2);
}
[data-theme="ame"] .de-level-noyau .de-info strong { color: #93c5fd; }
[data-theme="ame"] .de-level-comprehension {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.2);
}
[data-theme="ame"] .de-level-comprehension .de-info strong { color: #fcd34d; }
[data-theme="ame"] .de-level-approfondissement {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
}
[data-theme="ame"] .de-level-approfondissement .de-info strong { color: #fca5a5; }

@media (max-width: 800px) {
    .depth-explainer { padding: 14px 16px; }
    .de-level { padding: 8px 10px; gap: 10px; }
    .de-info span { font-size: 0.76rem; }
}

/* Pedagogical roadmap */
.roadmap {
    background: rgba(10, 15, 26, 0.6);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 20px 24px;
    margin: 16px 0;
    backdrop-filter: blur(4px);
}
.rm-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}
.rm-title {
    font-family: var(--mono);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
}
.rm-sub {
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.7;
}
.rm-intro {
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 16px 0;
}
.rm-phases {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rm-phase {
    padding: 12px 16px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: all 0.25s ease;
}
.rm-phase:hover {
    transform: translateX(4px);
}
.rm-phase-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.rm-phase-num {
    font-family: var(--mono);
    font-size: 0.9rem;
    font-weight: 700;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex-shrink: 0;
}
.rm-phase-titles {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.rm-phase-titles strong {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.rm-phase-titles span {
    font-family: var(--mono);
    font-size: 0.62rem;
    color: var(--text-muted);
    opacity: 0.7;
}
.rm-phase p {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 8px 0;
}
.rm-phase p code {
    font-family: var(--mono);
    font-size: 0.76rem;
    background: rgba(255,255,255,0.06);
    padding: 1px 5px;
    border-radius: 2px;
}
.rm-step {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    opacity: 0.6;
    padding-top: 6px;
    border-top: 1px dashed rgba(255,255,255,0.08);
}
/* Phase I — Comprendre */
.rm-phase-comprendre {
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.15);
}
.rm-phase-comprendre .rm-phase-num {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
}
.rm-phase-comprendre .rm-phase-titles strong { color: #6ee7b7; }
.rm-phase-comprendre:hover { border-color: rgba(16, 185, 129, 0.35); background: rgba(16, 185, 129, 0.1); }
/* Phase II — Écrire */
.rm-phase-ecrire {
    background: rgba(168, 85, 247, 0.06);
    border-color: rgba(168, 85, 247, 0.15);
}
.rm-phase-ecrire .rm-phase-num {
    background: rgba(168, 85, 247, 0.15);
    color: #c4b5fd;
}
.rm-phase-ecrire .rm-phase-titles strong { color: #c4b5fd; }
.rm-phase-ecrire:hover { border-color: rgba(168, 85, 247, 0.35); background: rgba(168, 85, 247, 0.1); }
/* Phase III — Exécuter */
.rm-phase-executer {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.15);
}
.rm-phase-executer .rm-phase-num {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
}
.rm-phase-executer .rm-phase-titles strong { color: #fcd34d; }
.rm-phase-executer:hover { border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.1); }

/* Nier theme — roadmap */
[data-theme="nier"] .roadmap {
    background: rgba(245, 240, 232, 0.5);
    border-color: #c8c0b0;
}
[data-theme="nier"] .rm-phase-comprendre {
    background: rgba(5, 150, 105, 0.06);
    border-color: rgba(5, 150, 105, 0.15);
}
[data-theme="nier"] .rm-phase-comprendre .rm-phase-num { background: rgba(5, 150, 105, 0.12); color: #059669; }
[data-theme="nier"] .rm-phase-comprendre .rm-phase-titles strong { color: #059669; }
[data-theme="nier"] .rm-phase-ecrire {
    background: rgba(107, 33, 168, 0.06);
    border-color: rgba(107, 33, 168, 0.15);
}
[data-theme="nier"] .rm-phase-ecrire .rm-phase-num { background: rgba(107, 33, 168, 0.12); color: #7c3aed; }
[data-theme="nier"] .rm-phase-ecrire .rm-phase-titles strong { color: #7c3aed; }
[data-theme="nier"] .rm-phase-executer {
    background: rgba(180, 83, 9, 0.06);
    border-color: rgba(180, 83, 9, 0.15);
}
[data-theme="nier"] .rm-phase-executer .rm-phase-num { background: rgba(180, 83, 9, 0.12); color: #b45309; }
[data-theme="nier"] .rm-phase-executer .rm-phase-titles strong { color: #b45309; }
[data-theme="nier"] .rm-step { border-top-color: rgba(0,0,0,0.08); }

/* Âme theme — roadmap */
[data-theme="ame"] .roadmap {
    background: rgba(10, 25, 41, 0.6);
    border-color: rgba(74, 144, 226, 0.2);
}
[data-theme="ame"] .rm-phase-comprendre {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.2);
}
[data-theme="ame"] .rm-phase-comprendre .rm-phase-num { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; }
[data-theme="ame"] .rm-phase-comprendre .rm-phase-titles strong { color: #6ee7b7; }
[data-theme="ame"] .rm-phase-ecrire {
    background: rgba(168, 85, 247, 0.08);
    border-color: rgba(168, 85, 247, 0.2);
}
[data-theme="ame"] .rm-phase-ecrire .rm-phase-num { background: rgba(168, 85, 247, 0.18); color: #c4b5fd; }
[data-theme="ame"] .rm-phase-ecrire .rm-phase-titles strong { color: #c4b5fd; }
[data-theme="ame"] .rm-phase-executer {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.2);
}
[data-theme="ame"] .rm-phase-executer .rm-phase-num { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
[data-theme="ame"] .rm-phase-executer .rm-phase-titles strong { color: #fcd34d; }

@media (max-width: 800px) {
    .roadmap { padding: 14px 16px; }
    .rm-phase { padding: 10px 12px; }
    .rm-phase p { font-size: 0.78rem; }
    .rm-step { font-size: 0.65rem; }
}

/* Level badge (inline indicator) */
.level-badge {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: middle;
    font-weight: 600;
}
.level-badge.noyau {
    color: var(--level-noyau);
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.25);
}
.level-badge.comprehension {
    color: var(--level-comprehension);
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.level-badge.approfondissement {
    color: var(--level-approfondissement);
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* Level section marker (before h2 in Partie A) */
.level-section-marker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.level-section-marker .lsm-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.level-section-marker.noyau .lsm-dot { background: var(--level-noyau); box-shadow: 0 0 6px var(--level-noyau); }
.level-section-marker.noyau { color: var(--level-noyau); }
.level-section-marker.comprehension .lsm-dot { background: var(--level-comprehension); box-shadow: 0 0 6px var(--level-comprehension); }
.level-section-marker.comprehension { color: var(--level-comprehension); }
.level-section-marker.approfondissement .lsm-dot { background: var(--level-approfondissement); box-shadow: 0 0 6px var(--level-approfondissement); }
.level-section-marker.approfondissement { color: var(--level-approfondissement); }

/* Filter bar — level indicator */
#level-filter {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    z-index: 99;
    background: rgba(3,5,8,0.88);
    border-bottom: 1px solid var(--border);
    padding: 5px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    backdrop-filter: blur(8px);
    transition: transform 0.3s ease;
}
@media (min-width: 1101px) {
    #level-filter {
        left: 250px;
    }
}
#level-filter.hidden {
    transform: translateY(-100%);
}
#level-filter .filter-label {
    color: var(--text-muted);
    font-size: 0.58rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-right: 2px;
}

/* Level indicator badge (inside filter bar) */
#level-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all 0.35s ease;
    white-space: nowrap;
    border: 1.5px solid transparent;
}
#level-indicator .li-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.35s ease;
}
/* 🔵 Noyau */
#level-indicator.level-noyau {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.35);
}
#level-indicator.level-noyau .li-dot {
    background: #3b82f6;
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.5);
}
/* 🟡 Compréhension */
#level-indicator.level-comprehension {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
}
#level-indicator.level-comprehension .li-dot {
    background: #f59e0b;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}
/* 🔴 Approfondissement */
#level-indicator.level-approfondissement {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
}
#level-indicator.level-approfondissement .li-dot {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
}

/* Nier theme — higher contrast on light bg */
[data-theme="nier"] #level-filter {
    background: rgba(245, 240, 232, 0.92);
    border-bottom-color: #b8b0a0;
}
[data-theme="nier"] #level-indicator.level-noyau {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.1);
    border-color: rgba(37, 99, 235, 0.3);
}
[data-theme="nier"] #level-indicator.level-noyau .li-dot {
    background: #2563eb;
    box-shadow: 0 0 4px rgba(37, 99, 235, 0.4);
}
[data-theme="nier"] #level-indicator.level-comprehension {
    color: #b45309;
    background: rgba(180, 83, 9, 0.1);
    border-color: rgba(180, 83, 9, 0.3);
}
[data-theme="nier"] #level-indicator.level-comprehension .li-dot {
    background: #b45309;
    box-shadow: 0 0 4px rgba(180, 83, 9, 0.4);
}
[data-theme="nier"] #level-indicator.level-approfondissement {
    color: #b91c1c;
    background: rgba(185, 28, 28, 0.1);
    border-color: rgba(185, 28, 28, 0.3);
}
[data-theme="nier"] #level-indicator.level-approfondissement .li-dot {
    background: #b91c1c;
    box-shadow: 0 0 4px rgba(185, 28, 28, 0.4);
}

/* Âme dans l'eau theme — soft aquatic tones */
[data-theme="ame"] #level-filter {
    background: rgba(10, 25, 41, 0.9);
    border-bottom-color: rgba(74, 144, 226, 0.2);
}
[data-theme="ame"] #level-indicator.level-noyau {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
}
[data-theme="ame"] #level-indicator.level-noyau .li-dot {
    background: #60a5fa;
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.5);
}
[data-theme="ame"] #level-indicator.level-comprehension {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
}
[data-theme="ame"] #level-indicator.level-comprehension .li-dot {
    background: #fbbf24;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}
[data-theme="ame"] #level-indicator.level-approfondissement {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
}
[data-theme="ame"] #level-indicator.level-approfondissement .li-dot {
    background: #f87171;
    box-shadow: 0 0 8px rgba(248, 113, 113, 0.5);
}

/* When a level is filtered out, dim it heavily */
body.level-hide-noyau [data-level="noyau"] {
    opacity: 0.15;
    max-height: 0;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    transition: all 0.3s ease;
}
body.level-hide-comprehension [data-level="comprehension"] {
    opacity: 0.15;
    max-height: 0;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    transition: all 0.3s ease;
}
body.level-hide-approfondissement [data-level="approfondissement"] {
    opacity: 0.15;
    max-height: 0;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    transition: all 0.3s ease;
}

/* Insight-boxes: apply level color to ib-title too */
[data-level="noyau"] .ib-title { color: var(--level-noyau) !important; }
[data-level="comprehension"] .ib-title { color: var(--level-comprehension) !important; }
[data-level="approfondissement"] .ib-title { color: var(--level-approfondissement) !important; }

/* Cross-refs are always approfondissement level */
.cross-ref { border-left-color: var(--level-approfondissement) !important; }

/* Ensure level markers don't break existing box styles */
.insight-box[data-level] { margin: 12px 0; }
.warning-box[data-level] { margin: 12px 0; }
.collapse-header[data-level] { margin: 10px 0; }
.code-wrapper[data-level] { margin: 16px 0; }

/* Mobile adjustments */
@media (max-width: 800px) {
    #level-filter {
        padding: 3px 10px;
        gap: 6px;
    }
    #level-indicator {
        font-size: 0.6rem;
        padding: 3px 9px;
    }
    #level-indicator .li-dot {
        width: 6px;
        height: 6px;
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* BIBLIOGRAPHIE                                                 */
/* ═══════════════════════════════════════════════════════════════ */
.biblio-section {
    padding: 48px 0 64px;
    border-top: 1px solid var(--border);
    margin-top: 32px;
}
.biblio-section h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 36px;
    letter-spacing: 0.02em;
}
.biblio-section h2 .num {
    font-size: 1.2rem;
    margin-right: 8px;
}

.biblio-partie {
    margin-bottom: 48px;
    padding: 28px 32px;
    border-radius: 8px;
    background: var(--card);
    border: 1px solid var(--border);
}
.biblio-a {
    border-left: 3px solid var(--ray);
}
.biblio-b {
    border-left: 3px solid var(--violet);
}

.bp-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}
.bp-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 0.95rem;
    font-weight: 700;
    flex-shrink: 0;
}
.biblio-a .bp-label {
    color: var(--ray);
    background: rgba(0, 210, 255, 0.1);
    border: 1px solid rgba(0, 210, 255, 0.25);
}
.biblio-b .bp-label {
    color: var(--violet);
    background: rgba(155, 89, 255, 0.1);
    border: 1px solid rgba(155, 89, 255, 0.25);
}
.bp-header h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.bp-graph {
    text-align: center;
    margin: 24px 0;
}
.bp-graph img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.bp-refs {
    list-style: decimal;
    padding-left: 24px;
    margin: 0;
}
.bp-refs li {
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin-bottom: 8px;
    padding-left: 6px;
}
.bp-refs li strong {
    color: var(--text);
    font-weight: 600;
}
.bp-refs li em {
    color: var(--text);
    font-style: italic;
}
.bp-refs li .bp-sec {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    background: rgba(110,118,129,0.12);
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

/* ── Nier theme overrides ── */
[data-theme="nier"] .biblio-section {
    border-top-color: var(--border);
}
[data-theme="nier"] .biblio-partie {
    background: var(--card);
    border-color: var(--border);
}
[data-theme="nier"] .biblio-a {
    border-left-color: var(--red);
}
[data-theme="nier"] .biblio-b {
    border-left-color: var(--purple);
}
[data-theme="nier"] .biblio-a .bp-label {
    color: var(--red);
    background: rgba(232, 64, 80, 0.08);
    border-color: rgba(232, 64, 80, 0.2);
}
[data-theme="nier"] .biblio-b .bp-label {
    color: var(--purple);
    background: rgba(136, 102, 221, 0.08);
    border-color: rgba(136, 102, 221, 0.2);
}

/* ── Âme dans l'eau theme overrides ── */
[data-theme="ame"] .biblio-partie {
    background: var(--card);
    border-color: var(--border);
}
[data-theme="ame"] .biblio-a {
    border-left-color: var(--electric);
}
[data-theme="ame"] .biblio-b {
    border-left-color: var(--violet);
}
[data-theme="ame"] .biblio-a .bp-label {
    color: var(--electric);
    background: rgba(0, 212, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.2);
}
[data-theme="ame"] .biblio-b .bp-label {
    color: var(--violet);
    background: rgba(155, 89, 255, 0.08);
    border-color: rgba(155, 89, 255, 0.2);
}

/* ── Responsive ── */
@media (max-width: 800px) {
    .biblio-section { padding: 32px 0 48px; }
    .biblio-partie { padding: 18px 16px; }
    .bp-header h3 { font-size: 1rem; }
    .bp-refs li { font-size: 0.82rem; }
}
/* ══ WebGL Canvas Styles (for guide.html) ══ */
#underwater-bg, #rayon-bg, #nier-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none; display: none;
}
/* Legacy 2D underwater canvas — suppressed in favour of new 3D engine */
[data-theme="ame"] #underwater-bg { display: none !important; }
[data-theme="nier"] #nier-bg { display: none !important; }
html:not([data-theme]) #rayon-bg, html[data-theme="rayon"] #rayon-bg { display: block; }

/* New 3D immersive canvas — managed by ame-immersive.js */
#ame-3d-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
}

/* When 3D engine is active, suppress CSS atmosphere duplicates */
[data-theme="ame"] body::before { background: none !important; animation: none !important; }
[data-theme="ame"] #god-rays { display: none !important; }
[data-theme="nier"].webgl body::before, [data-theme="nier"].webgl body::after { background: none !important; }
html.webgl:not([data-theme]) body::before, html.webgl:not([data-theme]) body::after, html[data-theme="rayon"].webgl body::before, html[data-theme="rayon"].webgl body::after { background: none !important; }

/* ══ COCKPIT CAMERA PARALLAX (Rayon Vert) ══ */
.cockpit-camera {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0; overflow: hidden;
}
/* 1: Brouillard Cosmique (0.40x) */
.cosmic-fog {
    position: fixed; top: -10%; left: -10%; width: 120%; height: 120%;
    background:
        radial-gradient(ellipse at 75% 40%, rgba(0, 180, 160, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse at 25% 60%, rgba(20, 60, 120, 0.15) 0%, transparent 65%);
    transform: translate(calc(var(--cam-x) * 0.4), calc(var(--cam-y) * 0.4));
    pointer-events: none; z-index: 0;
}
/* 1: Atmosphère Planétaire (0.40x) */
.planet-atmosphere {
    position: fixed; top: 40%; left: 50%; width: 640px; height: 640px;
    margin-top: -320px; margin-left: -320px;
    border-radius: 50%;
    background: #010204;
    box-shadow: inset 0 25px 50px rgba(0,0,0,1), 0 -12px 40px rgba(255, 200, 120, 0.75), 0 0 30px rgba(0,210,255,0.1);
    transform: translate(calc(var(--cam-x) * 0.6), calc(var(--cam-y) * 0.6));
    z-index: 1; pointer-events: none;
}
.planet-atmosphere::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 50%;
    box-shadow: inset 0 6px 15px rgba(255,245,230,0.4);
    opacity: 0.8;
}
/* Planète secondaire à droite */
.planet-secondary {
    position: fixed; top: 32%; left: 78%; width: 180px; height: 180px;
    border-radius: 50%;
    background: #020305;
    box-shadow: inset -25px -25px 50px rgba(0,0,0,0.95), inset 15px 15px 30px rgba(255,210,170,0.35), 0 0 15px rgba(255,210,170,0.08);
    transform: translate(calc(var(--cam-x) * 0.5), calc(var(--cam-y) * 0.5));
    z-index: 1; pointer-events: none;
}
[data-theme="nier"] .planet-secondary,
[data-theme="ame"] .planet-secondary {
    display: none;
}
/* 1: Soleil (0.40x) */
.sun-eclipse {
    position: fixed; top: 40%; left: 50%; width: 300px; height: 300px;
    margin-top: -420px; margin-left: -150px;
    background: radial-gradient(circle, #ffffff 0%, #ffebd0 20%, #ffaa44 45%, transparent 75%);
    filter: blur(15px);
    transform: translate(calc(var(--cam-x) * 0.4), calc(var(--cam-y) * 0.4));
    mix-blend-mode: screen; z-index: 0; pointer-events: none;
    box-shadow: 0 0 80px #fff, 0 0 160px #ff9933;
}
/* 2: Poussière (1.20x) via JS, on met juste z-index */
#dust-canvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 2;
}
/* 2: Bloom Overlay (0.40x) */
.bloom-overlay {
    position: fixed; top: -20%; left: -20%; width: 140%; height: 140%;
    background: radial-gradient(circle at 50% 10%, rgba(255,200,150,0.1) 0%, transparent 60%);
    transform: translate(calc(var(--cam-x) * 0.4), calc(var(--cam-y) * 0.4));
    mix-blend-mode: screen; z-index: 2; pointer-events: none;
}
/* 3: Anamorphic Flares (0.20x) */
.anamorphic-flares {
    position: fixed; top: 40%; left: 0; width: 200%; height: 6px;
    margin-top: -273px; margin-left: -50%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,180,100,0.3) 35%, rgba(255,255,255,0.95) 50%, rgba(255,180,100,0.3) 65%, transparent 100%);
    box-shadow: 0 0 15px rgba(255,180,100,0.6), 0 0 30px rgba(255,255,255,0.6);
    transform: translate(calc(var(--cam-x) * 0.2), calc(var(--cam-y) * 0.2));
    opacity: 0.95; mix-blend-mode: screen; z-index: 3; pointer-events: none;
}
/* 4: Bloom Glow (0.20x) */
.bloom-glow {
    position: fixed; top: 40%; left: 50%; width: 700px; height: 700px;
    margin-top: -470px; margin-left: -350px;
    background: radial-gradient(circle, rgba(255,180,100,0.06) 0%, transparent 70%);
    transform: translate(calc(var(--cam-x) * 0.2), calc(var(--cam-y) * 0.2));
    mix-blend-mode: screen; z-index: 4; pointer-events: none;
}
        /* 5: HUD Grid (0.20x) */
        .hud-grid {
            position: fixed; top: 5%; left: 5%; width: 90%; height: 90%;
            background-image: 
                linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
            background-size: 80px 80px;
            background-position: center center;
            opacity: 0.2;
            transform: translate(calc(var(--cam-x) * 0.2), calc(var(--cam-y) * 0.2));
            mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
            -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
            z-index: 5; pointer-events: none;
        }
        .hud-grid::before {
            content: ''; position: absolute; top: 35%; left: 35%; width: 30%; height: 30%;
            border: 1px solid rgba(0,212,255,0.2);
            border-radius: 50%;
        }
        .hud-grid::after {
            content: ''; position: absolute; top: 48%; left: 45%; width: 10%; height: 4%;
            border-top: 1px solid rgba(0,210,255,0.4); border-bottom: 1px solid rgba(0,210,255,0.4);
        }
        /* 5: Light Leak (0.40x) */
        .light-leak {
            position: fixed; top: -10%; right: -10%; width: 600px; height: 600px;
            background: radial-gradient(circle, rgba(255,170,68,0.08) 0%, transparent 60%);
            transform: translate(calc(var(--cam-x) * 0.4), calc(var(--cam-y) * 0.4));
            mix-blend-mode: screen; z-index: 5; pointer-events: none;
            animation: lightLeakPulse 12s infinite alternate;
        }
        @keyframes lightLeakPulse { 0% { opacity: 0.6; } 100% { opacity: 1; } }

        /* ══ SALLE PANORAMIQUE (Fixe) ══ */
        .cockpit-ceiling {
            position: fixed; top: 0; left: 0; width: 100%; height: 15%;
            background: #020305;
            box-shadow: 0 10px 40px rgba(0,0,0,0.9);
            z-index: 99; border-bottom: 2px solid #111; pointer-events: none;
        }
        .cockpit-ceiling::before, .cockpit-ceiling::after {
            content: ''; position: absolute; top: 20%; width: 35%; height: 40%;
            background: linear-gradient(to bottom,
                #fff 0%, #fff 22%,
                transparent 22%, transparent 39%,
                #fff 39%, #fff 61%,
                transparent 61%, transparent 78%,
                #fff 78%, #fff 100%
            );
            box-shadow: 0 0 35px rgba(255,255,255,0.95), 0 0 70px rgba(255,255,255,0.65);
            border-radius: 4px;
        }
        .cockpit-ceiling::before { left: 10%; }
        .cockpit-ceiling::after { right: 10%; }
 
        .cockpit-pillar-left, .cockpit-pillar-right {
            position: fixed; top: 15%; bottom: 25%; width: 2%;
            background: #020305;
            z-index: 9997; pointer-events: none;
            box-shadow: inset -10px 0 20px rgba(0,0,0,1);
        }
        .cockpit-pillar-left { left: 0; border-right: 1px solid #111; }
        .cockpit-pillar-right { right: 0; border-left: 1px solid #111; box-shadow: inset 10px 0 20px rgba(0,0,0,1); }
 
        .cockpit-frame {
            position: fixed; bottom: 0; left: 0; width: 100%; height: 25%;
            pointer-events: none; z-index: 9998;
            background: #020305;
            border-top: 1px solid #111;
            overflow: hidden;
        }
        .cockpit-frame::before {
            content: ''; position: absolute; top: 0; left: 10%; width: 80%; height: 250%;
            background: #ffffff;
            box-shadow: 0 -10px 40px rgba(255,255,255,1), 0 -20px 80px rgba(255,255,255,0.7);
            transform-origin: top center;
            transform: perspective(800px) rotateX(80deg);
        }
        .cockpit-frame::after {
            content: ''; position: absolute; top: 0; left: 10%; width: 80%; height: 250%;
            background-image: 
                linear-gradient(rgba(0,0,0,0.3) 2px, transparent 2px),
                linear-gradient(90deg, rgba(0,0,0,0.3) 2px, transparent 2px);
            background-size: 60px 60px;
            transform-origin: top center;
            transform: perspective(800px) rotateX(80deg);
        }

        .cockpit-frame {
            position: fixed; bottom: 0; left: 0; width: 100%; height: 25%;
            pointer-events: none; z-index: 9998;
            background: #020305;
            border-top: 1px solid #111;
            overflow: hidden;
        }
        .cockpit-frame::before {
            content: ''; position: absolute; top: 0; left: 20%; width: 60%; height: 200%;
            background: linear-gradient(180deg, #ffffff 0%, #e0f0ff 40%, #80c0ff 100%);
            box-shadow: 0 0 50px rgba(255,255,255,0.8), 0 0 100px rgba(0,212,255,0.4);
            transform-origin: top center;
            transform: perspective(800px) rotateX(70deg);
        }
        .cockpit-frame::after {
            content: ''; position: absolute; top: 0; left: 20%; width: 60%; height: 200%;
            background-image: 
                linear-gradient(rgba(0,0,0,0.2) 2px, transparent 2px),
                linear-gradient(90deg, rgba(0,0,0,0.2) 2px, transparent 2px);
            background-size: 50px 50px;
            transform-origin: top center;
            transform: perspective(800px) rotateX(70deg);
            opacity: 0.8;
        }

        .cockpit-chair, .cockpit-table {
            display: none;
        }

        .cockpit-glass {
            position: fixed; top: 15%; left: 0; width: 100%; height: 60%;
            pointer-events: none; z-index: 9997;
            background-color: rgba(255, 255, 255, 0.01);
            transform: translate(calc(var(--cam-x) * -0.15), calc(var(--cam-y) * -0.15));
        }

        /* ══ HUD COCKPIT OVERLAYS & TELEMETRY ══ */
        .cockpit-hud-panel, .cockpit-hud-scope {
            display: none;
            position: absolute;
            font-family: 'Courier New', Courier, monospace;
            font-size: 11px;
            font-weight: bold;
            color: rgba(0, 210, 255, 0.75);
            text-shadow: 0 0 5px rgba(0, 210, 255, 0.6);
            text-transform: uppercase;
            pointer-events: none;
            z-index: 10000;
        }
        html:not([data-theme="nier"]):not([data-theme="ame"]) .cockpit-hud-panel,
        html:not([data-theme="nier"]):not([data-theme="ame"]) .cockpit-hud-scope {
            display: block;
        }
        .ceiling-telemetry {
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            gap: 15px;
            letter-spacing: 2px;
            white-space: nowrap;
        }
        .hud-led {
            display: inline-block;
            width: 7px; height: 7px;
            border-radius: 50%;
            background-color: #00d2ff;
            box-shadow: 0 0 8px #00d2ff;
        }
        .hud-led.pulse-fast { animation: hudLedPulse 0.5s infinite alternate; }
        .hud-led.pulse-slow { animation: hudLedPulse 1.5s infinite alternate; }
        .hud-led.steady { opacity: 0.9; }
        @keyframes hudLedPulse {
            0% { opacity: 0.3; filter: brightness(0.5); }
            100% { opacity: 1; filter: brightness(1.25); }
        }
        .hud-separator {
            color: rgba(0, 210, 255, 0.2);
        }
        .frame-telemetry-left {
            bottom: 20px; left: 5%;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        .frame-telemetry-right {
            bottom: 20px; right: 5%;
            display: flex;
            flex-direction: column;
            gap: 5px;
            text-align: right;
        }
        .telemetry-row {
            font-size: 10px;
            opacity: 0.9;
            letter-spacing: 1px;
        }
        .cockpit-hud-scope {
            bottom: -5px; left: 50%;
            transform: translateX(-50%);
            width: 140px; height: 70px;
            background: radial-gradient(circle at top, rgba(0, 210, 255, 0.05) 0%, transparent 70%);
            border: 1px solid rgba(0, 210, 255, 0.25);
            border-bottom: none;
            border-radius: 70px 70px 0 0;
            overflow: hidden;
        }
        .scope-grid {
            position: absolute; inset: 0;
            background-image: 
                linear-gradient(rgba(0, 210, 255, 0.07) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 210, 255, 0.07) 1px, transparent 1px);
            background-size: 10px 10px;
            background-position: center bottom;
        }
        .scope-sweep {
            position: absolute; bottom: 0; left: 50%;
            width: 200%; height: 200%;
            transform-origin: bottom center;
            background: conic-gradient(from 180deg, rgba(0, 210, 255, 0.25) 0deg, transparent 45deg);
            animation: scopeSweepAnimation 4s linear infinite;
        }
        @keyframes scopeSweepAnimation {
            0% { transform: translate(-50%, 0) rotate(0deg); }
            100% { transform: translate(-50%, 0) rotate(360deg); }
        }

        @keyframes holoRotate {
            0% { transform: rotateY(0deg); }
            100% { transform: rotateY(360deg); }
        }

        /* ══ HUD RETICLE CURSOR ══ */
        .hud-reticle {
            position: fixed;
            top: 0; left: 0;
            width: 32px; height: 32px;
            margin-left: -16px; margin-top: -16px;
            pointer-events: none;
            z-index: 100000;
            opacity: 0;
            transition: opacity 0.3s, transform 0.08s ease-out, width 0.2s, height 0.2s, margin-left 0.2s, margin-top 0.2s;
            display: none;
        }
        html:not([data-theme="nier"]):not([data-theme="ame"]) .hud-reticle {
            display: block;
        }
        html:not([data-theme="nier"]):not([data-theme="ame"]) {
            cursor: none;
        }
        html:not([data-theme="nier"]):not([data-theme="ame"]) a,
        html:not([data-theme="nier"]):not([data-theme="ame"]) button,
        html:not([data-theme="nier"]):not([data-theme="ame"]) [role="button"],
        html:not([data-theme="nier"]):not([data-theme="ame"]) select,
        html:not([data-theme="nier"]):not([data-theme="ame"]) input,
        html:not([data-theme="nier"]):not([data-theme="ame"]) textarea {
            cursor: none !important;
        }
        .reticle-center {
            position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
            font-family: monospace; font-size: 10px;
            color: #00d2ff;
            text-shadow: 0 0 3px #00d2ff;
        }
        .reticle-bracket {
            position: absolute;
            width: 6px; height: 6px;
            border: 1px solid #00d2ff;
            box-shadow: 0 0 4px rgba(0, 210, 255, 0.5);
            transition: all 0.2s ease;
        }
        .reticle-bracket.top-left { top: 0; left: 0; border-right: none; border-bottom: none; }
        .reticle-bracket.top-right { top: 0; right: 0; border-left: none; border-bottom: none; }
        .reticle-bracket.bottom-left { bottom: 0; left: 0; border-right: none; border-top: none; }
        .reticle-bracket.bottom-right { bottom: 0; right: 0; border-left: none; border-top: none; }
        .reticle-ring {
            position: absolute; inset: -4px;
            border: 1px dashed rgba(0, 210, 255, 0.25);
            border-radius: 50%;
            animation: reticleSpin 12s linear infinite;
            transition: border-color 0.2s;
        }
        @keyframes reticleSpin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .hud-reticle.reticle-lock {
            width: 24px; height: 24px;
            margin-left: -12px; margin-top: -12px;
        }
        .hud-reticle.reticle-lock .reticle-center {
            color: #ff5500;
            text-shadow: 0 0 5px #ff5500;
        }
        .hud-reticle.reticle-lock .reticle-bracket {
            border-color: #ff5500;
            box-shadow: 0 0 6px rgba(255, 85, 0, 0.6);
        }
        .hud-reticle.reticle-lock .reticle-ring {
            border-color: rgba(255, 85, 0, 0.4);
            animation: reticleSpin 2s linear infinite;
        }
        .reticle-click-ring {
            position: fixed;
            border: 1px solid #00d2ff;
            border-radius: 50%;
            pointer-events: none;
            z-index: 99999;
            transform: translate(-50%, -50%) scale(0.2);
            opacity: 1;
            animation: reticleClickWave 0.3s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
        }
        @keyframes reticleClickWave {
            0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; border-color: #00d2ff; }
            100% { transform: translate(-50%, -50%) scale(2); opacity: 0; border-color: #ff5500; }
        }

[data-theme="nier"] .cockpit-camera .cosmic-fog,
[data-theme="nier"] .cockpit-camera .planet-atmosphere,
[data-theme="nier"] .cockpit-camera .cosmic-horizon,
[data-theme="nier"] .cockpit-camera .sun-eclipse,
[data-theme="nier"] .cockpit-camera #dust-canvas,
[data-theme="nier"] .cockpit-camera .bloom-overlay,
[data-theme="nier"] .cockpit-camera .anamorphic-flares,
[data-theme="nier"] .cockpit-camera .bloom-glow,
[data-theme="nier"] .cockpit-camera .hud-grid,
[data-theme="nier"] .cockpit-camera .light-leak,
[data-theme="nier"] .cockpit-glass,
[data-theme="nier"] .cockpit-frame,
[data-theme="nier"] .cockpit-ceiling,
[data-theme="nier"] .cockpit-pillar-left,
[data-theme="nier"] .cockpit-pillar-right { display: none; }

[data-theme="ame"] .cockpit-camera .cosmic-fog,
[data-theme="ame"] .cockpit-camera .planet-atmosphere,
[data-theme="ame"] .cockpit-camera .cosmic-horizon,
[data-theme="ame"] .cockpit-camera .sun-eclipse,
[data-theme="ame"] .cockpit-camera #dust-canvas,
[data-theme="ame"] .cockpit-camera .bloom-overlay,
[data-theme="ame"] .cockpit-camera .anamorphic-flares,
[data-theme="ame"] .cockpit-camera .bloom-glow,
[data-theme="ame"] .cockpit-camera .hud-grid,
[data-theme="ame"] .cockpit-camera .light-leak,
[data-theme="ame"] .cockpit-glass,
[data-theme="ame"] .cockpit-frame,
[data-theme="ame"] .cockpit-ceiling,
[data-theme="ame"] .cockpit-pillar-left,
[data-theme="ame"] .cockpit-pillar-right { display: none; }

html:not([data-theme="nier"]):not([data-theme="ame"]) .cockpit-chair {
    display: block;
    position: fixed;
    bottom: 1.5vh;
    z-index: 9999;
    pointer-events: none;
    transition: transform 0.1s ease-out;
    width: 14vw;
    max-width: 240px;
}
html:not([data-theme="nier"]):not([data-theme="ame"]) .cockpit-chair svg {
    width: 100%;
    height: auto;
    display: block;
}
html:not([data-theme="nier"]):not([data-theme="ame"]) .cockpit-chair-left {
    left: 22vw;
    transform: translateX(calc(var(--scroll-offset, 0) * -40vw));
}
html:not([data-theme="nier"]):not([data-theme="ame"]) .cockpit-chair-right {
    right: 22vw;
    transform: translateX(calc(var(--scroll-offset, 0) * -40vw));
}
html:not([data-theme="nier"]):not([data-theme="ame"]) .cockpit-chair-right svg {
    transform: scaleX(-1);
}

html:not([data-theme="nier"]):not([data-theme="ame"]) .cockpit-table {
    display: block;
    position: fixed;
    bottom: 1vh;
    z-index: 9999;
    pointer-events: none;
    transition: transform 0.1s ease-out;
    width: 7vw;
    max-width: 110px;
}
html:not([data-theme="nier"]):not([data-theme="ame"]) .cockpit-table svg {
    width: 100%;
    height: auto;
    display: block;
}
html:not([data-theme="nier"]):not([data-theme="ame"]) .cockpit-table-left {
    left: 17vw;
    transform: translateX(calc(var(--scroll-offset, 0) * -40vw));
}
html:not([data-theme="nier"]):not([data-theme="ame"]) .cockpit-table-right {
    right: 17vw;
    transform: translateX(calc(var(--scroll-offset, 0) * -40vw));
}

html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .cockpit-chair,
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .cockpit-table {
    display: none !important;
}

html:not([data-theme="nier"]):not([data-theme="ame"]) {
    --text: #e2e8f0;
    --text-muted: #a3b3cc;
}

/* ══ MODE LECTURE (GUIDE) - THEME RAYON VERT ══ */
/* Modification de la caméra pour transformer le sol en bureau de données */
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .planet-atmosphere {
    /* La planète monte hors du champ de vision */
    top: -30%;
    transform: translate(calc(var(--cam-x) * 0.6), calc(var(--cam-y) * 0.6)) scale(1.5);
    opacity: 0.3;
}
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .sun-eclipse {
    top: -20%;
}
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .cockpit-ceiling {
    top: -15%; /* Cache le plafond hors champ */
}
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .cockpit-frame {
    /* Le sol envahit l'écran */
    top: 0;
    height: 100%;
}
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .cockpit-frame::before,
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .cockpit-frame::after {
    /* Redressement de l'angle pour faire un fond de lecture (de 70deg à 30deg) */
    transform: perspective(1000px) rotateX(30deg) translateY(-10%);
    width: 120%; left: -10%;
    box-shadow: 0 0 150px rgba(255,255,255,0.4), 0 0 200px rgba(0,212,255,0.2);
}
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .cockpit-glass {
    background-color: rgba(3, 5, 8, 0.4); /* Assombrit légèrement l'éblouissement */
    z-index: 1; /* Derrière le contenu textuel (z-index de base) */
}

/* Glassmorphism sur le contenu du guide pour qu'il soit très lisible sur la lumière blanche */
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide > div[style*="max-width:900px"],
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .hero {
    position: relative;
    z-index: 10000;
    background: rgba(3, 5, 8, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
}
body.page-guide nav {
    z-index: 10100;
}
body.page-guide #sidebar,
body.page-guide #level-filter,
body.page-guide #back-to-top {
    z-index: 10050;
}
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .hero {
    margin: 40px auto;
    max-width: 900px;
}
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide h1,
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide h2,
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide h3,
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide p,
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide li {
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .hero-bg,
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .hero-scan,
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .hero-overlay {
    display: none; /* Nettoyage du header pour ne garder que le glassmorphism pur */
}

/* Animation fluide (View Transitions logic) */
.cockpit-frame::before, .cockpit-frame::after,
.planet-atmosphere, .sun-eclipse, .cockpit-ceiling {
    transition: all 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Entry animation for Rayon Vert Camera Pan */
@keyframes cameraPanDown {
    0% {
        transform: perspective(800px) rotateX(70deg) translateY(0);
        width: 60%; left: 20%;
    }
    100% {
        transform: perspective(1000px) rotateX(30deg) translateY(-10%);
        width: 120%; left: -10%;
    }
}
@keyframes cameraPanUp {
    0% {
        transform: perspective(1000px) rotateX(30deg) translateY(-10%);
        width: 120%; left: -10%;
    }
    100% {
        transform: perspective(800px) rotateX(70deg) translateY(0);
        width: 60%; left: 20%;
    }
}
@keyframes planetDescend {
    0% { top: -30%; transform: translate(calc(var(--cam-x) * 0.6), calc(var(--cam-y) * 0.6)) scale(1.5); opacity: 0.3; }
    100% { top: 50%; transform: translate(calc(var(--cam-x) * 0.6), calc(var(--cam-y) * 0.6)) scale(1); opacity: 1; }
}
@keyframes ceilingDescend {
    0% { top: -15%; }
    100% { top: 0; }
}
@keyframes planetRise {
    0% { top: 40%; transform: translate(calc(var(--cam-x) * 0.6), calc(var(--cam-y) * 0.6)) scale(1); opacity: 1; }
    100% { top: -30%; transform: translate(calc(var(--cam-x) * 0.6), calc(var(--cam-y) * 0.6)) scale(1.5); opacity: 0.3; }
}
@keyframes ceilingRise {
    0% { top: 0; }
    100% { top: -15%; }
}

html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .cockpit-frame::before,
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .cockpit-frame::after {
    animation: cameraPanDown 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .planet-atmosphere {
    animation: planetRise 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .sun-eclipse {
    animation: planetRise 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards; /* same logic */
}
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .cockpit-ceiling {
    animation: ceilingRise 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* ====== TRANSITIONS CINEMATIQUES VIA JAVASCRIPT ====== */
/* Quand on part de index.html vers guide.html (Pan Down) */
html:not([data-theme="nier"]):not([data-theme="ame"]) body.is-transitioning-to-guide .cockpit-frame::before,
html:not([data-theme="nier"]):not([data-theme="ame"]) body.is-transitioning-to-guide .cockpit-frame::after {
    animation: cameraPanDown 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}
html:not([data-theme="nier"]):not([data-theme="ame"]) body.is-transitioning-to-guide .planet-atmosphere,
html:not([data-theme="nier"]):not([data-theme="ame"]) body.is-transitioning-to-guide .sun-eclipse {
    animation: planetRise 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}
html:not([data-theme="nier"]):not([data-theme="ame"]) body.is-transitioning-to-guide .cockpit-ceiling {
    animation: ceilingRise 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

/* Quand on part de guide.html vers index.html (Pan Up) */
html:not([data-theme="nier"]):not([data-theme="ame"]) body.is-transitioning-to-index .cockpit-frame::before,
html:not([data-theme="nier"]):not([data-theme="ame"]) body.is-transitioning-to-index .cockpit-frame::after {
    animation: cameraPanUp 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}
html:not([data-theme="nier"]):not([data-theme="ame"]) body.is-transitioning-to-index .planet-atmosphere,
html:not([data-theme="nier"]):not([data-theme="ame"]) body.is-transitioning-to-index .sun-eclipse {
    animation: planetDescend 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}
html:not([data-theme="nier"]):not([data-theme="ame"]) body.is-transitioning-to-index .cockpit-ceiling {
    animation: ceilingDescend 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}
html:not([data-theme="nier"]):not([data-theme="ame"]) body.is-transitioning-to-index .guide-glass-wrapper {
    transition: opacity 1s;
    opacity: 0;
}
/* ====== NEW GUIDE CONTENT WRAPPER ====== */
/* Fixes the restricted height issue in guide.html and establishes stacking context above 3D background */
body.page-guide .guide-glass-wrapper {
    position: relative;
    z-index: 10000;
    max-width: 900px;
    margin: 40px auto;
    padding: 60px 40px;
    min-height: 80vh; /* Fills the vertical space beautifully */
    border-radius: 12px;
}

@media (max-width: 930px) {
    body.page-guide .guide-glass-wrapper {
        margin: 20px 10px;
        padding: 40px 20px;
    }
}

/* Theme-specific styles for the wrapper */
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .guide-glass-wrapper {
    background: rgba(3, 8, 5, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 210, 255, 0.25);
    box-shadow: 0 20px 60px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 30px rgba(0, 210, 255, 0.08);
    color: #e0f8ff;
    /* Decorative animation only: never hide the documentation while it
       waits for late-loaded assets or a theme transition. */
    animation: none;
    opacity: 1;
    transform: none;
}

/* Nier Automata Theme Wrapper Style */
[data-theme="nier"] body.page-guide .guide-glass-wrapper {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0px; /* Sharp corners signature of Nier UI */
    color: var(--text);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Âme dans l'eau Theme Wrapper Style
   P3 audit : fond et blur retirés pour ne pas masquer la scène 3D.
   La structure du wrapper est conservée (centrage du contenu) mais
   visuellement transparente. */
[data-theme="ame"] body.page-guide .guide-glass-wrapper {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    color: inherit;
    box-shadow: none;
}



/* Cyber data overrides for content elements under Rayon Vert */
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide h1,
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide h2,
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide h3,
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide h4 {
    color: #00d2ff !important;
    text-shadow: 0 0 8px rgba(0, 210, 255, 0.4);
    font-family: 'Outfit', 'Inter', sans-serif;
}

html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide a:not(.logo):not(.filter-label):not([href="shell.html"]) {
    color: #00d2ff !important;
    text-decoration: none;
    border-bottom: 1px dashed rgba(0, 210, 255, 0.4);
    transition: all 0.2s ease;
}

html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide a:not(.logo):not(.filter-label):not([href="shell.html"]):hover {
    color: #ffffff !important;
    border-bottom-color: #ffffff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

/* Explicit high-visibility shell button styling under Rayon Vert */
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide a[href="shell.html"] {
    background: #00d2ff !important;
    color: #030805 !important;
    font-weight: 800 !important;
    border: 1px solid #00d2ff !important;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.4) !important;
}

html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide a[href="shell.html"]:hover {
    background: #ffffff !important;
    color: #030805 !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.6) !important;
}

html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide pre,
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide code {
    background: rgba(0, 20, 10, 0.6) !important;
    border: 1px solid rgba(0, 210, 255, 0.25) !important;
    color: #88ffbb !important;
}

@keyframes fadeInGlass {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Hide the old standalone blocks glassmorphism to avoid double-boxing */
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide > div[style*="max-width:900px"] {
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hide cyber elements for Nier and Ame themes */
body.page-guide .guide-glass-header,
body.page-guide .reading-progress-bar,
body.page-guide .cyber-corner,
body.page-guide .holo-scanline,
body.page-guide .guide-glass-footer {
    display: none;
}

/* Style and show them ONLY in Rayon Vert theme */
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .guide-glass-wrapper {
    background: linear-gradient(135deg, rgba(3, 8, 5, 0.82) 0%, rgba(2, 5, 3, 0.92) 100%);
    background-image: 
        radial-gradient(rgba(0, 210, 255, 0.05) 1px, transparent 1px),
        linear-gradient(135deg, rgba(3, 8, 5, 0.82) 0%, rgba(2, 5, 3, 0.92) 100%);
    background-size: 20px 20px, 100% 100%;
    border: 1px solid rgba(0, 210, 255, 0.18);
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.95),
                inset 0 0 40px rgba(0, 210, 255, 0.06),
                0 0 25px rgba(0, 210, 255, 0.04);
    overflow: hidden; /* Contains the scanlines and progress bar */
}

/* Authentic CRT/Hologram screen lines */
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .guide-glass-wrapper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: 
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%),
        linear-gradient(90deg, rgba(0, 210, 255, 0.03), rgba(0, 210, 255, 0.01), rgba(0, 210, 255, 0.03));
    background-size: 100% 4px, 6px 100%;
    pointer-events: none;
    z-index: 100;
}

html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .guide-glass-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 210, 255, 0.2);
    padding-bottom: 16px;
    margin-bottom: 30px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: rgba(0, 210, 255, 0.85);
    text-transform: uppercase;
}

html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .hud-status-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .hud-beacon {
    width: 8px;
    height: 8px;
    background: #00d2ff;
    border-radius: 50%;
    animation: beaconPulse 1.8s infinite ease-in-out;
}

@keyframes beaconPulse {
    0% { transform: scale(0.9); opacity: 0.5; box-shadow: 0 0 0 0 rgba(0, 210, 255, 0.7); }
    50% { transform: scale(1.15); opacity: 1; box-shadow: 0 0 10px 4px rgba(0, 210, 255, 0.4); }
    100% { transform: scale(0.9); opacity: 0.5; box-shadow: 0 0 0 0 rgba(0, 210, 255, 0); }
}

html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .hud-telemetry {
    font-weight: bold;
    display: flex;
    gap: 20px;
    color: #00d2ff;
    text-shadow: 0 0 8px rgba(0, 210, 255, 0.5);
}

/* Reading Progress Bar */
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .reading-progress-bar {
    display: block;
    position: absolute;
    top: 50px;
    left: 40px;
    right: 40px;
    height: 2px;
    background: rgba(0, 210, 255, 0.1);
    overflow: hidden;
}

html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .reading-progress-fill {
    height: 100%;
    width: 0%;
    background: #00d2ff;
    box-shadow: 0 0 10px #00d2ff;
}

/* Four Corner Brackets */
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .cyber-corner {
    display: block;
    position: absolute;
    width: 24px;
    height: 24px;
    border: 2px solid transparent;
    pointer-events: none;
    z-index: 101;
}

html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .cyber-corner.tl {
    top: -2px; left: -2px;
    border-top-color: #00d2ff;
    border-left-color: #00d2ff;
    border-top-left-radius: 8px;
}
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .cyber-corner.tr {
    top: -2px; right: -2px;
    border-top-color: #00d2ff;
    border-right-color: #00d2ff;
    border-top-right-radius: 8px;
}
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .cyber-corner.bl {
    bottom: -2px; left: -2px;
    border-bottom-color: #00d2ff;
    border-left-color: #00d2ff;
    border-bottom-left-radius: 8px;
}
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .cyber-corner.br {
    bottom: -2px; right: -2px;
    border-bottom-color: #00d2ff;
    border-right-color: #00d2ff;
    border-bottom-right-radius: 8px;
}

/* Animated Scanline */
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .holo-scanline {
    display: block;
    position: absolute;
    left: 0; width: 100%; height: 20px;
    background: linear-gradient(to bottom, transparent, rgba(0, 210, 255, 0.18), transparent);
    animation: holoScanline 12s linear infinite;
    pointer-events: none;
    z-index: 99;
}

@keyframes holoScanline {
    0% { top: 0%; }
    100% { top: 100%; }
}

/* Footer Telemetry */
html:not([data-theme="nier"]):not([data-theme="ame"]) body.page-guide .guide-glass-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(0, 210, 255, 0.15);
    padding-top: 16px;
    margin-top: 50px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    letter-spacing: 1px;
    color: rgba(0, 210, 255, 0.5);
    text-transform: uppercase;
}

/* ══ SEARCH HIGHLIGHTING AND THEME OVERRIDES ══ */

@keyframes searchHighlightFlash {
    0% { background-color: var(--ray-glow); box-shadow: 0 0 15px var(--ray-glow); border-radius: 4px; }
    100% { background-color: transparent; box-shadow: none; border-radius: 0; }
}
.search-highlight-flash {
    animation: searchHighlightFlash 2.5s ease-out;
}

/* NieR Theme Search Styling */
[data-theme="nier"] #search-overlay {
    background: rgba(245, 240, 232, 0.95);
    backdrop-filter: none;
}
[data-theme="nier"] #search-box {
    background: #EDE8DF;
    border: 1px solid #D4CFC6;
    border-left: 3px solid #C4362B;
    border-radius: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
[data-theme="nier"] #search-input {
    color: #1A1A1A;
    font-family: var(--nier-subheading);
}
[data-theme="nier"] #search-results {
    border-top: 1px solid #D4CFC6;
}
[data-theme="nier"] .search-result {
    border-bottom: 1px solid #D4CFC6;
}
[data-theme="nier"] .search-result:hover {
    background: rgba(196, 54, 43, 0.05);
}
[data-theme="nier"] .search-result .sr-section {
    color: #C4362B;
    font-family: var(--nier-heading);
}
[data-theme="nier"] .search-result .sr-text {
    color: #6B6560;
}
[data-theme="nier"] .search-result mark {
    background: rgba(196, 54, 43, 0.12);
    color: #C4362B;
}
[data-theme="nier"] .search-hint {
    border-top: 1px solid #D4CFC6;
    color: #6B6560;
}
[data-theme="nier"] .search-hint kbd {
    background: #F5F0E8;
    border: 1px solid #D4CFC6;
    color: #1A1A1A;
}

/* Âme Theme Search Styling */
[data-theme="ame"] #search-overlay {
    background: rgba(4, 10, 20, 0.9);
}
[data-theme="ame"] #search-box {
    background: rgba(8, 16, 32, 0.95);
    border: 1px solid rgba(0, 206, 209, 0.3);
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), 0 0 15px rgba(0, 206, 209, 0.1);
}
[data-theme="ame"] #search-input {
    color: #E2E8F0;
}
[data-theme="ame"] #search-results {
    border-top: 1px solid rgba(0, 206, 209, 0.2);
}
[data-theme="ame"] .search-result {
    border-bottom: 1px solid rgba(0, 206, 209, 0.1);
}
[data-theme="ame"] .search-result:hover {
    background: rgba(0, 206, 209, 0.08);
}
[data-theme="ame"] .search-result .sr-section {
    color: #00CED1;
}
[data-theme="ame"] .search-result .sr-text {
    color: #94A3B8;
}
[data-theme="ame"] .search-result mark {
    background: rgba(0, 206, 209, 0.25);
    color: #E2E8F0;
}
[data-theme="ame"] .search-hint {
    border-top: 1px solid rgba(0, 206, 209, 0.2);
    color: #94A3B8;
}
[data-theme="ame"] .search-hint kbd {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(0, 206, 209, 0.3);
    color: #00CED1;
}

/* ═══════════════════════════════════════════════════════════════
   ÂME DANS L'EAU — Refonte cinématographique (Prix Nobel edition)
   ═══════════════════════════════════════════════════════════════ */

/* ── Pilier 3: Brouillard sous-marin — 3 couches de parallaxe ── */
[data-theme="ame"] .cockpit-camera::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 20% 30%, rgba(30,91,216,0.04) 0%, transparent 60%),
        radial-gradient(ellipse 50% 30% at 70% 60%, rgba(0,206,209,0.03) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 40% 80%, rgba(26,42,108,0.03) 0%, transparent 50%);
    animation: fogDrift1 30s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
[data-theme="ame"] .cockpit-camera::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 40% 25% at 60% 20%, rgba(0,206,209,0.025) 0%, transparent 50%),
        radial-gradient(ellipse 50% 35% at 25% 70%, rgba(30,91,216,0.03) 0%, transparent 55%);
    animation: fogDrift2 45s ease-in-out infinite reverse;
    pointer-events: none;
    z-index: 1;
}
@keyframes fogDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
    33% { transform: translate(3%, -2%) scale(1.05); opacity: 0.9; }
    66% { transform: translate(-2%, 3%) scale(0.95); opacity: 0.6; }
}
@keyframes fogDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    50% { transform: translate(-3%, 2%) scale(1.08); opacity: 0.8; }
}

/* ── Pilier 6: God rays CSS dynamiques ── */
[data-theme="ame"] #god-rays { display: block !important; }
[data-theme="ame"] .god-ray {
    position: absolute;
    top: -10%;
    width: 60px;
    height: 120vh;
    background: linear-gradient(180deg,
        rgba(0,212,255,0.1) 0%,
        rgba(0,180,216,0.07) 30%,
        rgba(0,150,199,0.03) 60%,
        transparent 100%);
    transform-origin: top center;
    filter: blur(12px);
    mix-blend-mode: screen;
    pointer-events: none;
}
[data-theme="ame"] .god-ray.gr-1 { left: 10%; animation: godRaySway1 12s ease-in-out infinite; }
[data-theme="ame"] .god-ray.gr-2 { left: 28%; animation: godRaySway2 15s ease-in-out infinite; }
[data-theme="ame"] .god-ray.gr-3 { left: 50%; animation: godRaySway1 18s ease-in-out infinite reverse; }
[data-theme="ame"] .god-ray.gr-4 { left: 70%; animation: godRaySway2 14s ease-in-out infinite; }
[data-theme="ame"] .god-ray.gr-5 { left: 88%; animation: godRaySway1 16s ease-in-out infinite reverse; }
@keyframes godRaySway1 {
    0%, 100% { transform: rotate(-3deg) scaleX(1); opacity: 0.7; }
    50% { transform: rotate(4deg) scaleX(1.3); opacity: 0.4; }
}
@keyframes godRaySway2 {
    0%, 100% { transform: rotate(2deg) scaleX(1.1); opacity: 0.5; }
    50% { transform: rotate(-5deg) scaleX(0.8); opacity: 0.8; }
}

/* ── Pilier 7: Typography aquatique ── */
[data-theme="ame"] h1,
[data-theme="ame"] h2 {
    letter-spacing: 0.04em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 212, 255, 0.1);
}
[data-theme="ame"] h1 {
    background: linear-gradient(180deg, #F0F4F8 0%, #A8C5E8 50%, #00D4FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
[data-theme="ame"] p,
[data-theme="ame"] li {
    line-height: 1.75;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
[data-theme="ame"] .code-wrapper {
    background: rgba(1, 3, 8, 0.92);
    border: 1px solid rgba(0, 212, 255, 0.12);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.04), inset 0 0 30px rgba(0, 212, 255, 0.02);
    backdrop-filter: blur(10px);
}
[data-theme="ame"] .intro-card,
[data-theme="ame"] .diagram-box {
    background: rgba(10, 18, 42, 0.85);
    border: 1px solid rgba(0, 212, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(0, 212, 255, 0.05);
    backdrop-filter: blur(8px);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.4, 1);
}
[data-theme="ame"] .intro-card:hover,
[data-theme="ame"] .diagram-box:hover {
    border-color: rgba(0, 212, 255, 0.25);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 212, 255, 0.1), inset 0 1px 0 rgba(0, 212, 255, 0.1);
}

/* ── Pilier 8: Transition de thème fluide ── */
[data-theme="ame"] body { transition: background 1.5s ease-in-out, color 1.5s ease-in-out; }
[data-theme="ame"] .cockpit-camera { transition: opacity 1.5s ease-in-out; }
.theme-transition-flash {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0,206,209,0.3) 0%, rgba(30,91,216,0.2) 40%, transparent 70%);
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    animation: themeFlash 1.5s ease-out;
}
@keyframes themeFlash {
    0% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 0; }
}

/* ── Pilier 4: Faune aquatique — animations ── */
.ame-jellyfish {
    animation-name: jellyDrift;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    filter: blur(0.5px);
}
@keyframes jellyDrift {
    0% { transform: translateY(0) scale(0.8); opacity: 0; }
    10% { opacity: 0.15; }
    50% { transform: translateY(-50vh) scale(1) translateX(20px); opacity: 0.12; }
    90% { opacity: 0.08; }
    100% { transform: translateY(-110vh) scale(0.9) translateX(-10px); opacity: 0; }
}
.ame-ghost-fish {
    animation-name: fishSwim;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    filter: blur(0.3px);
}
@keyframes fishSwim {
    0% { transform: translateX(0) translateY(0) scaleX(var(--dir, 1)); }
    25% { transform: translateX(25vw) translateY(-10px) scaleX(var(--dir, 1)); }
    50% { transform: translateX(50vw) translateY(5px) scaleX(var(--dir, 1)); }
    75% { transform: translateX(75vw) translateY(-8px) scaleX(var(--dir, 1)); }
    100% { transform: translateX(100vw) translateY(0) scaleX(var(--dir, 1)); }
}

/* ── Pilier 5: Bulles montantes — animation ── */
.ame-bubble {
    animation-name: bubbleRise;
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
    animation-iteration-count: 1;
}
@keyframes bubbleRise {
    0% { transform: translateY(0) translateX(0) scale(0.5); opacity: 0; }
    10% { opacity: 0.6; transform: translateY(-10vh) translateX(calc(var(--drift) * 0.1)) scale(1); }
    50% { opacity: 0.5; transform: translateY(-50vh) translateX(calc(var(--drift) * 0.5)) scale(1.1); }
    90% { opacity: 0.2; transform: translateY(-90vh) translateX(var(--drift)) scale(1.2); }
    100% { transform: translateY(-105vh) translateX(calc(var(--drift) * 1.2)) scale(1.3); opacity: 0; }
}

/* ── Accessibilité: prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
    [data-theme="ame"] .cockpit-camera::before,
    [data-theme="ame"] .cockpit-camera::after,
    [data-theme="ame"] .god-ray,
    [data-theme="ame"] body::before,
    .ame-jellyfish,
    .ame-ghost-fish,
    .ame-bubble,
    .theme-transition-flash {
        animation: none !important;
    }
    [data-theme="ame"] body { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PROTOCOLE DALLOWAY — INJECTIONS SÉMIOTIQUES FINALES
   ═══════════════════════════════════════════════════════════════ */

/* 1. Le Curseur de Sélection YoRHa (Sidebar & Liens) */
[data-theme="nier"] .sb-link,
[data-theme="nier"] .collapse-header,
[data-theme="nier"] a:not(.nh-ov-btn):not(.nh-menu-item):not(.nh-pause-item) {
    position: relative;
    transition: transform 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

[data-theme="nier"] .sb-link::before,
[data-theme="nier"] a:not(.nh-ov-btn):not(.nh-menu-item):not(.nh-pause-item)::before {
    content: '▶';
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%) scale(0.5);
    color: #C4362B;
    opacity: 0;
    transition: all 0.15s ease;
    font-size: 0.6em;
}

[data-theme="nier"] .sb-link:hover,
[data-theme="nier"] .collapse-header:hover,
[data-theme="nier"] a:not(.nh-ov-btn):not(.nh-menu-item):not(.nh-pause-item):hover {
    transform: translateX(8px);
    color: #C4362B !important;
}

[data-theme="nier"] .sb-link:hover::before,
[data-theme="nier"] a:not(.nh-ov-btn):not(.nh-menu-item):not(.nh-pause-item):hover::before {
    opacity: 1;
    left: -12px;
}

/* 2. Les Rapports Classifiés du Pod (Insight & Warning Boxes) */
[data-theme="nier"] .insight-box,
[data-theme="nier"] .warning-box {
    position: relative;
    padding-top: 32px !important;
    border: 1px solid #D4CFC6 !important;
    border-left: 3px solid #C4362B !important;
    background: #F8F5EF !important;
}

[data-theme="nier"] .insight-box::before {
    content: 'CLASSIFICATION : NIVEAU 4  |  SOURCE : ARCHIVES TERRESTRES  |  INTÉGRITÉ : 98.4%';
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 4px 12px;
    background: #1A1A1A;
    color: #8A847C;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-bottom: 1px solid #C4362B;
}

[data-theme="nier"] .warning-box::before {
    content: '⚠ ALERTE SYSTÈME  |  CORRUPTION DÉTECTÉE  |  PROTOCOLE DE CONTAINEMENT ACTIF';
    background: #2A1A1A;
    color: #C47025;
    border-bottom-color: #C47025;
}

/* 3. L'Aberration Chromatique au Scroll (Screen Tear) */
/* PERF: Screen tear animation disabled — filter:drop-shadow() on body
   during fast scroll caused massive repaints and content flicker.
   The ScrollTear JS in dalloway-protocol.js still adds the class
   (harmless no-op now). */
@keyframes nierScreenTear {
    0% { transform: translate(0, 0); }
    100% { transform: translate(0, 0); }
}

body.nier-scroll-tear {
    /* no-op — animation disabled for performance */
}

/* 4. La Mort comme Corruption (Processus VM) */
@keyframes nierProcessCorruption {
    0% { filter: none; transform: translateX(0); opacity: 1; text-shadow: none; }
    20% { filter: blur(1px) contrast(1.5); transform: translateX(-3px) skewX(-5deg); text-shadow: -2px 0 #C4362B, 2px 0 #3A6EA5; }
    40% { filter: blur(2px) invert(0.2); transform: translateX(4px) skewX(8deg); text-shadow: 3px 0 #C4362B, -3px 0 #3A6EA5; opacity: 0.8; }
    60% { filter: blur(4px) brightness(2); transform: translateX(-2px) scaleY(1.1); opacity: 0.5; }
    100% { filter: blur(8px) brightness(3); transform: translateX(0) scaleY(0.1); opacity: 0; text-shadow: none; }
}

[data-theme="nier"] .sim-proc-card.dead {
    animation: nierProcessCorruption 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
    background: #1A1A1A !important;
    color: #C4362B !important;
    border-color: #C4362B !important;
}

/* ══ NIER: Level Badges — YoRHa Classification ══ */
[data-theme="nier"] .level-badge {
    border-radius: 0;
    font-family: var(--nier-mono);
    letter-spacing: 0.15em;
    padding: 2px 8px;
    border: 1px solid;
    box-shadow: none;
}

[data-theme="nier"] .level-badge.noyau {
    color: #3A6EA5;
    background: rgba(58, 110, 165, 0.08);
    border-color: rgba(58, 110, 165, 0.4);
}

[data-theme="nier"] .level-badge.comprehension {
    color: #B8882A;
    background: rgba(184, 136, 42, 0.08);
    border-color: rgba(184, 136, 42, 0.4);
}

[data-theme="nier"] .level-badge.approfondissement {
    color: #C4362B;
    background: rgba(196, 54, 43, 0.08);
    border-color: rgba(196, 54, 43, 0.4);
}

/* ══ NIER: Cross-References — Corrupted Data Fragments ══ */
[data-theme="nier"] .cross-ref {
    background: #FFFFFF;
    border-left: 3px solid #8E271F;
    border-radius: 0;
    padding: 8px 12px;
    margin: 12px 0;
    font-family: var(--nier-mono);
    font-size: 0.82rem;
    color: #6B6560;
    position: relative;
}

[data-theme="nier"] .cross-ref::before {
    content: '⚠ FRAGMENT CORROMPU — VOIR ';
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #8E271F;
    display: block;
    margin-bottom: 4px;
}

[data-theme="nier"] .cross-ref a {
    color: #C4362B;
    border-bottom: 1px dashed #C4362B;
    text-decoration: none;
}

[data-theme="nier"] .cross-ref a:hover {
    background: rgba(196, 54, 43, 0.08);
    text-shadow: none;
}

/* ══ NIER: Quiz Options — Terminal Selection ══ */
[data-theme="nier"] .quiz-box {
    background: #FFFFFF;
    border-color: #D4CFC6;
    border-left: 3px solid #C4362B;
    border-radius: 0;
}

[data-theme="nier"] .quiz-box::before { display: none; }

[data-theme="nier"] .quiz-title {
    color: #C4362B;
    font-family: var(--nier-heading);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 0.75rem;
}

[data-theme="nier"] .quiz-q {
    background: #F8F5EF;
    border-color: #D4CFC6;
    border-radius: 0;
}

[data-theme="nier"] .quiz-opt {
    background: #FFFFFF;
    border: 1px solid #D4CFC6;
    border-left: 3px solid transparent;
    color: #1A1A1A;
    font-family: var(--nier-mono);
    border-radius: 0;
    transition: all 0.12s linear;
    position: relative;
    padding-left: 28px;
}

[data-theme="nier"] .quiz-opt::before {
    content: '▸';
    position: absolute;
    left: 12px;
    color: #C4362B;
    opacity: 0;
    transition: opacity 0.12s;
}

[data-theme="nier"] .quiz-opt:hover {
    border-left-color: #C4362B;
    background: rgba(196, 54, 43, 0.04);
}

[data-theme="nier"] .quiz-opt:hover::before {
    opacity: 1;
}

[data-theme="nier"] .quiz-opt.correct {
    border-left-color: #4A7C59;
    background: rgba(74, 124, 89, 0.08);
    color: #4A7C59;
}

[data-theme="nier"] .quiz-opt.wrong {
    border-left-color: #C4362B;
    background: rgba(196, 54, 43, 0.08);
    color: #C4362B;
}

[data-theme="nier"] .quiz-q .qq-explain {
    background: #F8F5EF;
    border-left: 2px solid #3A6EA5;
    border-radius: 0;
    font-family: var(--nier-body);
}

/* ══ NIER: VM Simulator — YoRHa Combat Interface ══ */
[data-theme="nier"] .sim-container {
    border: 2px solid #D4CFC6;
    border-left: 4px solid #C4362B;
    position: relative;
}

/* Corner brackets sur le simulateur */
[data-theme="nier"] .sim-container::before {
    content: '';
    position: absolute;
    top: -1px; right: -1px;
    width: 20px; height: 20px;
    border-top: 2px solid #C4362B;
    border-right: 2px solid #C4362B;
    pointer-events: none;
    z-index: 5;
}

[data-theme="nier"] .sim-container::after {
    content: '';
    position: absolute;
    bottom: -1px; right: -1px;
    width: 20px; height: 20px;
    border-bottom: 2px solid #C4362B;
    border-right: 2px solid #C4362B;
    pointer-events: none;
    z-index: 5;
}

[data-theme="nier"] .sim-controls {
    background: #1A1A1A;
    border-bottom: 1px solid #C4362B;
}

[data-theme="nier"] .sim-btn {
    background: transparent;
    border: 1px solid #6B6560;
    color: #D4CFC6;
    font-family: var(--nier-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.7rem;
}

[data-theme="nier"] .sim-btn:hover {
    border-color: #C4362B;
    color: #C4362B;
    background: rgba(196, 54, 43, 0.08);
}

[data-theme="nier"] .sim-btn.active {
    background: #C4362B;
    color: #F5F0E8;
    border-color: #C4362B;
}

/* Process cards — terminal style */
[data-theme="nier"] .sim-proc-card {
    border: 1px solid #D4CFC6;
    border-left: 3px solid #6B6560;
    font-family: var(--nier-mono);
}

[data-theme="nier"] .sim-proc-card.selected {
    border-left-color: #C4362B;
    background: rgba(196, 54, 43, 0.06);
}

/* Phase indicator — YoRHa style */
[data-theme="nier"] .sim-phases {
    background: #F8F5EF;
    border-bottom: 1px solid #D4CFC6;
}

[data-theme="nier"] .sim-phase-step {
    background: #FFFFFF;
    border: 1px solid #D4CFC6;
    color: #6B6560;
    font-family: var(--nier-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.6rem;
}

[data-theme="nier"] .sim-phase-step.active-fetch,
[data-theme="nier"] .sim-phase-step.active-decode,
[data-theme="nier"] .sim-phase-step.active-wait,
[data-theme="nier"] .sim-phase-step.active-exec {
    border-color: #C4362B;
    color: #C4362B;
    background: rgba(196, 54, 43, 0.08);
}

/* Log — terminal output */
[data-theme="nier"] .sim-log-container {
    background: #1A1A1A;
    border-top: 1px solid #C4362B;
}

[data-theme="nier"] .sim-log {
    font-family: var(--nier-mono);
    color: #D4CFC6;
}

[data-theme="nier"] .sim-log-entry .log-cycle { color: #6B6560; }
[data-theme="nier"] .sim-log-entry .log-p1 { color: #3A6EA5; }
[data-theme="nier"] .sim-log-entry .log-p2 { color: #C4362B; }
[data-theme="nier"] .sim-log-entry .log-op { color: #D4CFC6; }
[data-theme="nier"] .sim-log-entry.log-death { color: #C4362B; font-weight: bold; }

/* ══ NIER: Formal Specification — Classified Protocol ══ */
[data-theme="nier"] .formal-spec {
    background: #1A1A1A;
    border: 1px solid #3A3A3A;
    border-left: 3px solid #C4362B;
    border-radius: 0;
    font-family: var(--nier-mono);
    color: #D4CFC6;
    position: relative;
}

[data-theme="nier"] .formal-spec::before {
    content: 'PROTOCOL CLASSIFIÉ — NIVEAU YO-RHA';
    position: absolute;
    top: -8px; left: 12px;
    background: #F5F0E8;
    padding: 0 6px;
    font-size: 0.5rem;
    letter-spacing: 0.2em;
    color: #C4362B;
}

[data-theme="nier"] .formal-spec .fs-label {
    color: #C4362B;
}

[data-theme="nier"] .formal-spec .fs-kw {
    color: #D4CFC6;
    font-weight: bold;
}

[data-theme="nier"] .formal-spec .fs-addr {
    color: #3A6EA5;
}

[data-theme="nier"] .formal-spec .fs-comment {
    color: #6B6560;
}

/* ══ NIER: Complexity & Payoff Tables — Military Report ══ */
[data-theme="nier"] .complexity-table,
[data-theme="nier"] .payoff-matrix {
    border-collapse: collapse;
    font-family: var(--nier-mono);
    border: 1px solid #D4CFC6;
}

[data-theme="nier"] .complexity-table th,
[data-theme="nier"] .payoff-matrix th {
    background: #1A1A1A;
    color: #D4CFC6;
    border: 1px solid #3A3A3A;
    font-weight: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.7rem;
}

[data-theme="nier"] .complexity-table td,
[data-theme="nier"] .payoff-matrix td {
    border: 1px solid #D4CFC6;
    background: #FFFFFF;
}

[data-theme="nier"] .complexity-table .ct-o1 { color: #4A7C59; }
[data-theme="nier"] .complexity-table .ct-on { color: #B8882A; }
[data-theme="nier"] .complexity-table .ct-on2 { color: #C47025; }
[data-theme="nier"] .complexity-table .ct-exp { color: #C4362B; }

/* ══ NIER: Depth Explainer — Mission Briefing ══ */
[data-theme="nier"] .depth-explainer {
    background: #FFFFFF;
    border: 1px solid #D4CFC6;
    border-left: 3px solid #C4362B;
    border-radius: 0;
}

[data-theme="nier"] .de-title {
    font-family: var(--nier-heading);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #1A1A1A;
}

[data-theme="nier"] .de-level {
    border: 1px solid #D4CFC6;
    border-left: 3px solid transparent;
    border-radius: 0;
}

[data-theme="nier"] .de-level-noyau {
    border-left-color: #3A6EA5;
    background: rgba(58, 110, 165, 0.04);
}

[data-theme="nier"] .de-level-comprehension {
    border-left-color: #B8882A;
    background: rgba(184, 136, 42, 0.04);
}

[data-theme="nier"] .de-level-approfondissement {
    border-left-color: #C4362B;
    background: rgba(196, 54, 43, 0.04);
}

/* ══ NIER: Roadmap — Mission Phases ══ */
[data-theme="nier"] .roadmap {
    background: #FFFFFF;
    border: 1px solid #D4CFC6;
    border-radius: 0;
}

[data-theme="nier"] .rm-title {
    font-family: var(--nier-heading);
    letter-spacing: 0.2em;
    color: #1A1A1A;
}

[data-theme="nier"] .rm-phase {
    border: 1px solid #D4CFC6;
    border-left: 3px solid transparent;
    border-radius: 0;
}

[data-theme="nier"] .rm-phase-comprendre {
    border-left-color: #4A7C59;
    background: rgba(74, 124, 89, 0.04);
}

[data-theme="nier"] .rm-phase-ecrire {
    border-left-color: #3A6EA5;
    background: rgba(58, 110, 165, 0.04);
}

[data-theme="nier"] .rm-phase-executer {
    border-left-color: #C4362B;
    background: rgba(196, 54, 43, 0.04);
}

[data-theme="nier"] .rm-phase-num {
    border-radius: 0;
    font-family: var(--nier-mono);
}

/* ══ NIER: Insight Details — Expandable Classified Data ══ */
[data-theme="nier"] .insight-details {
    border: 1px solid #D4CFC6;
    border-left: 3px solid #3A6EA5;
    border-radius: 0;
    background: #FFFFFF;
}

[data-theme="nier"] .insight-summary {
    font-family: var(--nier-mono);
    color: #1A1A1A;
    background: #F8F5EF;
    letter-spacing: 0.05em;
}

[data-theme="nier"] .insight-summary::before {
    color: #C4362B;
}

[data-theme="nier"] .insight-summary:hover {
    background: rgba(196, 54, 43, 0.04);
}

/* ══ NIER: Level Filter Bar — Combat HUD ══ */
[data-theme="nier"] #level-filter {
    background: #1A1A1A;
    border-bottom: 1px solid #C4362B;
    backdrop-filter: none;
}

[data-theme="nier"] .filter-label {
    color: #6B6560;
    font-family: var(--nier-mono);
}

[data-theme="nier"] #level-indicator {
    border-radius: 0;
    font-family: var(--nier-mono);
    letter-spacing: 0.15em;
    border: 1px solid;
}

[data-theme="nier"] #level-indicator.level-noyau {
    color: #3A6EA5;
    background: rgba(58, 110, 165, 0.1);
    border-color: #3A6EA5;
}

[data-theme="nier"] #level-indicator.level-comprehension {
    color: #B8882A;
    background: rgba(184, 136, 42, 0.1);
    border-color: #B8882A;
}

[data-theme="nier"] #level-indicator.level-approfondissement {
    color: #C4362B;
    background: rgba(196, 54, 43, 0.1);
    border-color: #C4362B;
}

/* ══ NIER: Bibliography — Archived Data ══ */
[data-theme="nier"] .biblio-section {
    border-top: 2px solid #C4362B;
}

[data-theme="nier"] .biblio-partie {
    background: #FFFFFF;
    border: 1px solid #D4CFC6;
    border-radius: 0;
}

[data-theme="nier"] .bp-label {
    border-radius: 0;
    font-family: var(--nier-heading);
}

[data-theme="nier"] .bp-refs li {
    font-family: var(--nier-body);
    border-bottom: 1px solid #EDE8DF;
    padding-bottom: 6px;
}

[data-theme="nier"] .bp-refs li .bp-sec {
    background: rgba(196, 54, 43, 0.08);
    color: #C4362B;
    border-radius: 0;
    font-family: var(--nier-mono);
}

/* ══ NIER: Part Divider — Chapter Transition ══ */
[data-theme="nier"] .part-divider {
    background: transparent;
    border-top: 2px solid #C4362B;
    border-bottom: 2px solid #C4362B;
}

[data-theme="nier"] .part-divider::before {
    background: linear-gradient(90deg, transparent 0%, #C4362B 50%, transparent 100%);
}

[data-theme="nier"] .part-label {
    font-family: var(--nier-mono);
    color: #6B6560;
    letter-spacing: 0.4em;
}

[data-theme="nier"] .part-title {
    font-family: var(--nier-heading);
    color: #1A1A1A;
    letter-spacing: 0.2em;
}

[data-theme="nier"] .part-subtitle {
    font-family: var(--nier-subheading);
    color: #6B6560;
}

/* ══ NIER: Active Section Pulse — Subtle border animation ══ */
@keyframes nierBorderPulseSubtle {
    0%, 100% { border-left-color: rgba(196, 54, 43, 0.6); }
    50% { border-left-color: rgba(196, 54, 43, 1); }
}

[data-theme="nier"] section:target > h2,
[data-theme="nier"] .sim-container {
    animation: nierBorderPulseSubtle 3s ease-in-out infinite;
}

/* ══ NIER: Search Results — Data Retrieval ══ */
[data-theme="nier"] .search-result {
    border-bottom: 1px solid #EDE8DF;
    font-family: var(--nier-body);
}

[data-theme="nier"] .search-result:hover {
    background: rgba(196, 54, 43, 0.04);
}

[data-theme="nier"] .search-result .sr-section {
    color: #C4362B;
    font-family: var(--nier-heading);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

[data-theme="nier"] .search-result mark {
    background: rgba(196, 54, 43, 0.15);
    color: #C4362B;
    border-radius: 0;
    padding: 0 3px;
}

/* ══ NIER: Copy Button — Terminal Action ══ */
[data-theme="nier"] .copy-btn {
    background: #1A1A1A;
    border: 1px solid #3A3A3A;
    color: #6B6560;
    font-family: var(--nier-mono);
    border-radius: 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.6rem;
}

[data-theme="nier"] .copy-btn:hover {
    border-color: #C4362B;
    color: #C4362B;
}

[data-theme="nier"] .copy-btn.copied {
    color: #4A7C59;
    border-color: #4A7C59;
}

/* ══ NIER: Back to Top — Navigation Beacon ══ */
[data-theme="nier"] #back-to-top {
    background: #FFFFFF;
    border: 1px solid #D4CFC6;
    border-radius: 0;
    color: #6B6560;
}

[data-theme="nier"] #back-to-top:hover {
    border-color: #C4362B;
    color: #C4362B;
    box-shadow: none;
}

/* ══ NIER: PDF Export — Data Extraction ══ */
[data-theme="nier"] #pdf-btn {
    background: transparent;
    border: 1px solid #D4CFC6;
    color: #6B6560;
    font-family: var(--nier-mono);
    border-radius: 0;
    letter-spacing: 0.1em;
}

[data-theme="nier"] #pdf-btn:hover {
    border-color: #C4362B;
    color: #C4362B;
}

[data-theme="nier"] #pdf-overlay .spinner {
    border-color: rgba(196, 54, 43, 0.2);
    border-top-color: #C4362B;
    border-radius: 0;
}

[data-theme="nier"] #pdf-overlay .pdf-text {
    color: #C4362B;
    font-family: var(--nier-mono);
    letter-spacing: 0.2em;
}

/* ══ NIER: Body Text Quality ══ */
[data-theme="nier"] body {
    color: #1A1A1A;
    line-height: 1.7;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ══ NIER: Enhanced Parchment Grain ══ */
[data-theme="nier"] body::after {
    opacity: 0.35;
}

/* ══ NIER: Refined Scanlines ══ */
[data-theme="nier"]::after {
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0,0,0,0.012) 2px,
        rgba(0,0,0,0.012) 3px
    );
}

/* ══ NIER: Navigation — Terminal YoRHa ══ */
[data-theme="nier"] nav {
    background: rgba(20,20,20,0.97) !important;
    border-bottom: 1px solid #C4362B !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important;
}
[data-theme="nier"] nav .logo,
[data-theme="nier"] .nav-logo {
    color: #C4362B !important;
    font-family: var(--nier-heading) !important;
    letter-spacing: 0.12em !important;
    font-weight: 600 !important;
    text-shadow: 0 0 12px rgba(196,54,43,0.2) !important;
}
[data-theme="nier"] nav a,
[data-theme="nier"] .nav-links a {
    color: #D4CFC6 !important;
    position: relative;
    transition: color 0.2s ease !important;
}
[data-theme="nier"] nav a::after,
[data-theme="nier"] .nav-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #C4362B;
    transition: width 0.2s ease !important;
}
[data-theme="nier"] nav a:hover,
[data-theme="nier"] .nav-links a:hover {
    color: #C4362B !important;
    background: transparent !important;
}
[data-theme="nier"] nav a:hover::after,
[data-theme="nier"] .nav-links a:hover::after {
    width: 100%;
}

/* ══ NIER: Code Blocks — CRT Terminal ══ */
[data-theme="nier"] pre,
[data-theme="nier"] .code-block {
    background: #141414 !important;
    border: 1px solid #2A2A2A !important;
    border-left: 2px solid #C4362B !important;
    border-radius: 0 !important;
    color: #D4CFC6 !important;
    font-family: var(--nier-mono) !important;
}
[data-theme="nier"] code {
    background: rgba(196,54,43,0.06) !important;
    color: #8B2519 !important;
    border-radius: 0 !important;
    padding: 0.15em 0.4em !important;
    font-family: var(--nier-mono) !important;
    font-size: 0.88em !important;
}
[data-theme="nier"] pre code {
    background: transparent !important;
    color: #D4CFC6 !important;
    padding: 0 !important;
}

/* ══ NIER: Cards & Sections — YoRHa Panels ══ */
[data-theme="nier"] .card,
[data-theme="nier"] .feature-card,
[data-theme="nier"] section {
    border-radius: 0 !important;
}

/* ══ NIER: Buttons — Angular YoRHa ══ */
[data-theme="nier"] button,
[data-theme="nier"] .btn,
[data-theme="nier"] .cta-primary,
[data-theme="nier"] .cta-ghost {
    border-radius: 0 !important;
    transition: all 0.15s ease !important;
}

/* ══ NIER: Scrollbar — Crimson Track ══ */
[data-theme="nier"] ::-webkit-scrollbar { width: 6px; }
[data-theme="nier"] ::-webkit-scrollbar-track { background: #EDE8DF; }
[data-theme="nier"] ::-webkit-scrollbar-thumb {
    background: #8B2519;
    border-radius: 0;
}
[data-theme="nier"] ::-webkit-scrollbar-thumb:hover {
    background: #C4362B;
}
[data-theme="nier"] {
    scrollbar-color: #8B2519 #EDE8DF;
    scrollbar-width: thin;
}

/* ══ NIER: Links — Crimson Underline ══ */
[data-theme="nier"] a {
    color: #8B2519;
    text-decoration: none;
    border-bottom: 1px solid rgba(196,54,43,0.2);
    transition: all 0.15s ease;
}
[data-theme="nier"] a:hover {
    color: #C4362B;
    border-bottom-color: #C4362B;
}

/* ══ NIER: Headings — Cinzel Hierarchy ══ */
[data-theme="nier"] h1,
[data-theme="nier"] h2 {
    font-family: var(--nier-heading) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #1A1A1A !important;
}
[data-theme="nier"] h3,
[data-theme="nier"] h4 {
    font-family: var(--nier-subheading) !important;
    letter-spacing: 0.03em !important;
    color: #2A2A2A !important;
}

/* ══ NIER: Tables — Data Grid ══ */
[data-theme="nier"] table {
    border-collapse: collapse !important;
    border: 1px solid #D4CFC6 !important;
}
[data-theme="nier"] th {
    background: #1A1A1A !important;
    color: #D4CFC6 !important;
    font-family: var(--nier-heading) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-size: 0.72rem !important;
    padding: 10px 14px !important;
    border: 1px solid #3A3A3A !important;
}
[data-theme="nier"] td {
    padding: 8px 14px !important;
    border: 1px solid #E8E3DB !important;
    color: #1A1A1A !important;
}
[data-theme="nier"] tr:nth-child(even) td {
    background: rgba(0,0,0,0.015) !important;
}
[data-theme="nier"] tr:hover td {
    background: rgba(196,54,43,0.03) !important;
}

/* ══ NIER: Blockquotes — YoRHa Transmission ══ */
[data-theme="nier"] blockquote {
    border-left: 2px solid #C4362B !important;
    background: rgba(196,54,43,0.03) !important;
    padding: 12px 20px !important;
    margin: 16px 0 !important;
    font-style: italic !important;
    color: #5A554E !important;
    border-radius: 0 !important;
}

/* ══ NIER: Horizontal Rules — Section Divider ══ */
[data-theme="nier"] hr {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, #C4362B, transparent) !important;
    margin: 32px 0 !important;
}

/* ══ NIER: Selection — Crimson Highlight ══ */
[data-theme="nier"] ::selection {
    background: rgba(196,54,43,0.25) !important;
    color: #1A1A1A !important;
}

/* ══ NIER: Focus — YoRHa Ring ══ */
[data-theme="nier"] :focus-visible {
    outline: 2px solid #C4362B !important;
    outline-offset: 2px !important;
}

/* ══ NIER: Footer — Credits Roll ══ */
[data-theme="nier"] footer {
    background: #1A1A1A !important;
    color: #6B6560 !important;
    border-top: 1px solid #C4362B !important;
}
[data-theme="nier"] footer a {
    color: #8A847C !important;
    border-bottom: none !important;
}
[data-theme="nier"] footer a:hover {
    color: #C4362B !important;
}

body.page-guide table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
}
body.page-guide .cmp-table-wrapper {
    overflow-x: auto;
}