/**
 * WayUp v2.1 Slide Theme
 * Modern dark theme with glassmorphism effects
 * Inspired by the WayUp v2.1 homepage design
 *
 * Usage: Include this file INSTEAD of slides-custom.css
 * Or include AFTER slides-custom.css to override styles
 */

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ========================================
   CSS VARIABLES - V2.1 DESIGN TOKENS
   ======================================== */

:root {
    /* Primary - Electric Purple */
    --v21-primary-50: #faf5ff;
    --v21-primary-100: #f3e8ff;
    --v21-primary-200: #e9d5ff;
    --v21-primary-300: #d8b4fe;
    --v21-primary-400: #c084fc;
    --v21-primary-500: #a855f7;
    --v21-primary-600: #9333ea;
    --v21-primary-700: #7c22ce;
    --v21-primary-800: #6b21a8;
    --v21-primary-900: #581c87;

    /* Secondary - Deep Indigo */
    --v21-secondary-500: #6366f1;
    --v21-secondary-600: #4f46e5;
    --v21-secondary-700: #4338ca;

    /* Accent Colors */
    --v21-accent-cyan: #22d3ee;
    --v21-accent-emerald: #10b981;
    --v21-accent-amber: #f59e0b;
    --v21-accent-rose: #f43f5e;

    /* Neutrals */
    --v21-neutral-50: #fafafa;
    --v21-neutral-100: #f4f4f5;
    --v21-neutral-200: #e4e4e7;
    --v21-neutral-300: #d4d4d8;
    --v21-neutral-400: #a1a1aa;
    --v21-neutral-500: #71717a;
    --v21-neutral-600: #52525b;
    --v21-neutral-700: #3f3f46;
    --v21-neutral-800: #27272a;
    --v21-neutral-900: #18181b;
    --v21-neutral-950: #09090b;

    /* Dark Theme (Default) */
    --v21-bg-primary: #09090b;
    --v21-bg-secondary: rgba(24, 24, 27, 0.85);
    --v21-bg-tertiary: rgba(39, 39, 42, 0.85);
    --v21-bg-elevated: rgba(63, 63, 70, 0.9);

    /* Glass Effects */
    --v21-glass-bg: rgba(255, 255, 255, 0.03);
    --v21-glass-bg-hover: rgba(255, 255, 255, 0.06);
    --v21-glass-border: rgba(255, 255, 255, 0.1);
    --v21-glass-border-strong: rgba(255, 255, 255, 0.2);

    /* Text Colors */
    --v21-text-primary: #fafafa;
    --v21-text-secondary: #a1a1aa;
    --v21-text-tertiary: #71717a;

    /* Glows */
    --v21-glow-primary: rgba(168, 85, 247, 0.4);
    --v21-glow-secondary: rgba(99, 102, 241, 0.4);
    --v21-glow-cyan: rgba(34, 211, 238, 0.3);

    /* Gradients */
    --v21-gradient-primary: linear-gradient(135deg, var(--v21-primary-500) 0%, var(--v21-secondary-500) 100%);
    --v21-gradient-hero: linear-gradient(135deg, var(--v21-primary-600) 0%, var(--v21-secondary-600) 50%, var(--v21-accent-cyan) 100%);
    --v21-gradient-text: linear-gradient(135deg, var(--v21-primary-400) 0%, var(--v21-accent-cyan) 100%);
    --v21-gradient-card: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);

    /* Typography */
    --v21-font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --v21-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --v21-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    /* Shadows */
    --v21-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --v21-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --v21-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4);
    --v21-shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.5);
    --v21-shadow-glow: 0 0 60px var(--v21-glow-primary);

    /* Border Radius */
    --v21-radius-sm: 0.5rem;
    --v21-radius-md: 0.75rem;
    --v21-radius-lg: 1rem;
    --v21-radius-xl: 1.5rem;
    --v21-radius-2xl: 2rem;
    --v21-radius-full: 9999px;

    /* Transitions */
    --v21-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --v21-transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --v21-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ========================================
       VIBE CODING COURSE COLORS
       ======================================== */

    /* Primary course colors */
    --vc-purple: #a855f7;
    --vc-purple-light: #c084fc;
    --vc-purple-dark: #7c3aed;
    --vc-cyan: #22d3ee;
    --vc-cyan-light: #67e8f9;
    --vc-emerald: #10b981;
    --vc-emerald-light: #34d399;
    --vc-amber: #f59e0b;
    --vc-amber-light: #fbbf24;
    --vc-rose: #f43f5e;
    --vc-rose-light: #fb7185;
    --vc-indigo: #6366f1;
    --vc-teal: #14b8a6;

    /* Vibe Coding Gradients */
    --vc-gradient-hero: linear-gradient(135deg, var(--vc-purple) 0%, var(--vc-cyan) 50%, var(--vc-rose) 100%);
    --vc-gradient-stat: linear-gradient(135deg, var(--vc-purple), var(--vc-cyan));
    --vc-gradient-workflow: linear-gradient(90deg, var(--vc-purple), #8b5cf6, var(--vc-indigo), var(--vc-cyan), var(--vc-teal), var(--vc-emerald));
    --vc-gradient-badge: linear-gradient(135deg, var(--vc-purple), var(--vc-indigo));

    /* Card backgrounds (dark theme) */
    --vc-card-warning: rgba(244, 63, 94, 0.1);
    --vc-card-success: rgba(16, 185, 129, 0.1);
    --vc-card-info: rgba(34, 211, 238, 0.1);
    --vc-card-purple: rgba(168, 85, 247, 0.1);
    --vc-card-amber: rgba(245, 158, 11, 0.1);

    /* Card borders */
    --vc-border-warning: rgba(244, 63, 94, 0.3);
    --vc-border-success: rgba(16, 185, 129, 0.3);
    --vc-border-info: rgba(34, 211, 238, 0.3);
    --vc-border-purple: rgba(168, 85, 247, 0.3);
    --vc-border-amber: rgba(245, 158, 11, 0.3);

    /* Code/prompt colors */
    --vc-code-bg: rgba(0, 0, 0, 0.3);
    --vc-code-border: rgba(255, 255, 255, 0.1);
    --vc-code-text: #e4e4e7;

    /* Text colors (dark theme) */
    --vc-text-primary: rgba(255, 255, 255, 0.95);
    --vc-text-secondary: rgba(255, 255, 255, 0.85);
    --vc-text-muted: rgba(255, 255, 255, 0.7);

    /* Glow effects */
    --vc-glow-purple: rgba(168, 85, 247, 0.4);
    --vc-glow-cyan: rgba(34, 211, 238, 0.3);
}

/* ========================================
   LIGHT THEME
   ======================================== */

.light-theme {
    /* Light Theme Backgrounds */
    --v21-bg-primary: #fafafa;
    --v21-bg-secondary: rgba(244, 244, 245, 0.95);
    --v21-bg-tertiary: rgba(228, 228, 231, 0.9);
    --v21-bg-elevated: rgba(255, 255, 255, 0.95);

    /* Light Theme Glass Effects */
    --v21-glass-bg: rgba(255, 255, 255, 0.6);
    --v21-glass-bg-hover: rgba(255, 255, 255, 0.8);
    --v21-glass-border: rgba(0, 0, 0, 0.08);
    --v21-glass-border-strong: rgba(0, 0, 0, 0.15);

    /* Light Theme Text Colors */
    --v21-text-primary: #18181b;
    --v21-text-secondary: #52525b;
    --v21-text-tertiary: #71717a;

    /* Light Theme Glows - more subtle */
    --v21-glow-primary: rgba(168, 85, 247, 0.25);
    --v21-glow-secondary: rgba(99, 102, 241, 0.25);
    --v21-glow-cyan: rgba(34, 211, 238, 0.2);

    /* Light Theme Shadows */
    --v21-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --v21-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --v21-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    --v21-shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);
    --v21-shadow-glow: 0 0 40px var(--v21-glow-primary);

    /* Gradient adjustments for light theme */
    --v21-gradient-card: linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, rgba(99, 102, 241, 0.04) 100%);

    /* Vibe Coding - Light Theme Overrides */
    --vc-card-warning: rgba(244, 63, 94, 0.08);
    --vc-card-success: rgba(16, 185, 129, 0.08);
    --vc-card-info: rgba(34, 211, 238, 0.08);
    --vc-card-purple: rgba(168, 85, 247, 0.08);
    --vc-card-amber: rgba(245, 158, 11, 0.08);

    --vc-code-bg: rgba(0, 0, 0, 0.05);
    --vc-code-border: rgba(0, 0, 0, 0.1);
    --vc-code-text: #27272a;

    --vc-text-primary: rgba(0, 0, 0, 0.85);
    --vc-text-secondary: rgba(0, 0, 0, 0.7);
    --vc-text-muted: rgba(0, 0, 0, 0.6);
}

/* ========================================
   THEME TOGGLE BUTTON
   ======================================== */

.theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border-radius: var(--v21-radius-full);
    background: var(--v21-glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--v21-glass-border);
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--v21-transition-base);
    box-shadow: var(--v21-shadow-md);
}

.theme-toggle:hover {
    background: var(--v21-glass-bg-hover);
    border-color: var(--v21-primary-500);
    transform: scale(1.05);
    box-shadow: var(--v21-shadow-glow);
}

.theme-toggle svg {
    width: 22px;
    height: 22px;
    transition: all var(--v21-transition-base);
}

/* Sun icon (shown in dark mode) */
.theme-toggle .sun-icon {
    color: var(--v21-accent-amber);
    display: block;
}

.theme-toggle .moon-icon {
    color: var(--v21-primary-400);
    display: none;
}

/* In light mode, show moon and hide sun */
.light-theme .theme-toggle .sun-icon {
    display: none;
}

.light-theme .theme-toggle .moon-icon {
    display: block;
}

/* ========================================
   LIGHT THEME SPECIFIC OVERRIDES
   ======================================== */

/* Background gradient adjustments for light theme - more vibrant */
.light-theme .presentation-container::before {
    opacity: 0.7;
    background:
        radial-gradient(circle at 20% 30%, rgba(168, 85, 247, 0.35) 0%, transparent 45%),
        radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.3) 0%, transparent 40%),
        radial-gradient(circle at 40% 80%, rgba(34, 211, 238, 0.25) 0%, transparent 35%),
        radial-gradient(circle at 70% 70%, rgba(236, 72, 153, 0.2) 0%, transparent 30%);
}

/* Grid pattern for light theme */
.light-theme .presentation-container::after {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    opacity: 0.6;
}

/* Code blocks in light theme - fully opaque */
.light-theme pre {
    background: #f5f5f7 !important;
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: var(--v21-shadow-md);
}

/* Copy button in light theme */
.light-theme .code-copy-btn {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
}

.light-theme .code-copy-btn svg {
    stroke: var(--v21-text-tertiary);
}

.light-theme .code-copy-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: var(--v21-primary-500);
}

.light-theme .code-copy-btn:hover svg {
    stroke: var(--v21-primary-600);
}

/* Inline code in light theme */
.light-theme code:not(pre code) {
    background: rgba(168, 85, 247, 0.08);
    border-color: rgba(168, 85, 247, 0.2);
    color: var(--v21-primary-700);
}

/* Tables in light theme - fully opaque */
.light-theme table {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.12);
}

.light-theme tbody tr:hover {
    background: rgba(168, 85, 247, 0.05);
}

/* Navigation elements in light theme */
.light-theme .nav-arrow,
.light-theme .slide-counter,
.light-theme .sorter-toggle,
.light-theme .print-toggle {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
}

/* Slide sorter in light theme */
.light-theme .slide-sorter-mode {
    background: rgba(250, 250, 250, 0.98);
}

.light-theme .slide-sorter-header {
    background: rgba(244, 244, 245, 0.95);
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

.light-theme .slide-thumbnail {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
}

/* Scrollbar for light theme */
.light-theme .slide::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
}

.light-theme .slide {
    scrollbar-color: var(--v21-primary-500) rgba(0, 0, 0, 0.03);
}

/* h1 gradient text - darker for light theme */
.light-theme .slide h1,
.light-theme .slide h2.gradient-text,
.light-theme .slide .text-gradient {
    background: linear-gradient(135deg, var(--v21-primary-600) 0%, var(--v21-secondary-600) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px var(--v21-glow-primary));
}

/* h3 color for light theme */
.light-theme .slide h3 {
    color: var(--v21-primary-600);
}

/* ========================================
   BASE STYLES - DARK THEME
   ======================================== */

body, html {
    font-family: var(--v21-font-sans);
    background: var(--v21-bg-primary);
    color: var(--v21-text-primary);
}

/* All text elements use Inter */
h1, h2, h3, h4, h5, h6,
p, span, div, section,
ul, ol, li,
table, thead, tbody, td, th,
a, button,
.slide {
    font-family: var(--v21-font-sans);
}

/* Code uses JetBrains Mono */
code, pre, pre *, .csv-content, .csv-content * {
    font-family: var(--v21-font-mono) !important;
}

/* ========================================
   PRESENTATION CONTAINER - For carousel transitions
   ======================================== */

.presentation-container {
    position: relative;
    overflow: hidden;
    background: var(--v21-bg-primary);
}

/* Single shared animated background - moved from slides for seamless transitions */
.presentation-container {
    --bg-offset: -50%;
}

.presentation-container::before {
    content: '';
    position: fixed;
    top: -50%;
    left: var(--bg-offset);
    width: 200%;
    height: 200%;
    background:
        radial-gradient(circle at 20% 30%, var(--v21-glow-primary) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, var(--v21-glow-secondary) 0%, transparent 35%),
        radial-gradient(circle at 40% 80%, var(--v21-glow-cyan) 0%, transparent 30%);
    animation: bgFloat 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
    transition: left 3s ease-out;
}

/* Single shared grid pattern */
.presentation-container::after {
    content: '';
    position: fixed;
    inset: -20%;
    width: 140%;
    height: 140%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

/* Parallax particles layer */
.parallax-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateX(var(--particles-offset, 0));
}

/* ========================================
   SLIDE STYLES
   ======================================== */

.slide {
    background: transparent; /* Transparent to show container background */
    /* Keep position: absolute from slides-base.css */
    overflow: hidden;
    /* Left-aligned content, titles at top */
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left;
}

/* Background animation keyframes (used by container) */
@keyframes bgFloat {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(2%, 1%) rotate(1deg);
    }
    50% {
        transform: translate(0, 2%) rotate(0deg);
    }
    75% {
        transform: translate(-2%, 1%) rotate(-1deg);
    }
}

/* No individual slide backgrounds - using shared container background */
.slide::before,
.slide::after {
    display: none;
}


/* Ensure content is above background effects */
.slide > *:not(.bg-canvas) {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 100%;
}

/* Left-align all content by default */
.slide > h1,
.slide > h2,
.slide > h3,
.slide > p,
.slide > ul,
.slide > ol,
.slide > pre,
.slide > .notice,
.slide > div {
    align-self: flex-start;
    width: 100%;
}

/* Tables and images stay centered */
.slide > table,
.slide > img:not(.logo),
.slide > svg,
.slide > .schema {
    align-self: center;
    width: auto;
    max-width: 100%;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

.slide h1 {
    font-family: var(--v21-font-display);
    font-size: 3.5em;
    font-weight: 800;
    color: var(--v21-text-primary);
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 0.5em;
}

.slide h2 {
    font-family: var(--v21-font-display);
    font-size: 2.4em;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 0.75em;
    position: relative;
    display: inline-block;
    padding-bottom: 0.3em;
}

/* Animated gradient underline for h2 */
.slide h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--v21-gradient-border);
    border-radius: 2px;
    background-size: 200% 100%;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.slide h3 {
    font-family: var(--v21-font-display);
    font-size: 1.8em;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0.5em;
}

/* Gradient text effect for headings */
.slide h1,
.slide h2.gradient-text,
.slide .text-gradient {
    background: var(--v21-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Add subtle glow to h1 */
.slide h1 {
    filter: drop-shadow(0 0 30px var(--v21-glow-primary));
}

/* Regular h2 keeps solid color unless gradient class added */
.slide h2:not(.gradient-text) {
    color: var(--v21-text-primary);
}

.slide h3 {
    color: var(--v21-primary-400);
}

/* Small h2 variant for subtitles */
.slide h2.subtitle {
    font-size: 1.6em;
    font-weight: 500;
    color: var(--v21-text-secondary);
    margin-bottom: 1.5em;
}

.slide h2.subtitle::after {
    display: none;
}

.slide p {
    font-size: 1.25em;
    line-height: 1.7;
    color: var(--v21-text-secondary);
    font-weight: 400;
}

/* Strong text */
strong, b {
    font-weight: 700;
    color: var(--v21-text-primary);
}

/* Links */
.slide a {
    color: var(--v21-primary-400);
    text-decoration: none;
    transition: color var(--v21-transition-fast);
}

.slide a:hover {
    color: var(--v21-accent-cyan);
}

/* ========================================
   LISTS
   ======================================== */

.slide ul, .slide ol {
    margin-left: 1.5em;
    margin-bottom: 1em;
}

.slide li {
    font-size: 1.3em;
    line-height: 1.6;
    color: var(--v21-text-secondary);
    margin-bottom: 0.5em;
    padding-left: 0.5em;
}

.slide ul li::marker {
    color: var(--v21-primary-500);
}

.slide ol li::marker {
    color: var(--v21-accent-cyan);
    font-weight: 600;
}

/* Nested lists */
.slide li ul li,
.slide li ol li {
    font-size: 0.9em;
    margin-bottom: 0.3em;
}

/* ========================================
   CODE BLOCKS
   ======================================== */

/* Inline code */
code:not(pre code) {
    background: var(--v21-bg-tertiary);
    border: 1px solid var(--v21-glass-border);
    padding: 0.2em 0.5em;
    border-radius: var(--v21-radius-sm);
    font-size: 0.9em;
    color: var(--v21-accent-cyan);
}

/* Code blocks - fully opaque background */
pre {
    position: relative; /* For copy button positioning */
    background: #1e1e2e !important; /* Solid dark background */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--v21-radius-lg);
    padding: 1.5em;
    overflow: auto;
    margin: 1.5em 0;
    box-shadow: var(--v21-shadow-lg);
}

/* Copy code button - v21 theme */
.code-copy-btn {
    position: absolute;
    top: 0.75em;
    right: 0.75em;
    padding: 0.5em 0.75em;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--v21-radius-sm);
    cursor: pointer;
    opacity: 0;
    transition: all var(--v21-transition-fast);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

.code-copy-btn svg {
    width: 16px;
    height: 16px;
    stroke: var(--v21-text-secondary);
}

pre:hover .code-copy-btn {
    opacity: 1;
}

.code-copy-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--v21-primary-500);
    transform: scale(1.05);
}

.code-copy-btn:hover svg {
    stroke: var(--v21-primary-400);
}

.code-copy-btn:active {
    transform: scale(0.95);
}

.code-copy-btn.copied {
    background: rgba(16, 185, 129, 0.2);
    border-color: var(--v21-accent-emerald);
}

.code-copy-btn.copied svg {
    stroke: var(--v21-accent-emerald);
}

pre code {
    background: transparent !important;
    border: none;
    padding: 0;
    font-size: 0.95em;
    line-height: 1.5;
}

/* Override hljs background */
pre code.hljs,
.hljs {
    background: transparent !important;
}

/* Scrollbar for code blocks */
pre::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

pre::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

pre::-webkit-scrollbar-thumb {
    background: var(--v21-primary-600);
    border-radius: 4px;
}

pre::-webkit-scrollbar-thumb:hover {
    background: var(--v21-primary-500);
}

/* ========================================
   TABLES
   ======================================== */

table {
    border-collapse: collapse;
    margin: 1.5em auto;
    font-size: 1em;
    border-radius: var(--v21-radius-lg);
    overflow: hidden;
    background: #1e1e2e; /* Solid opaque background */
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: var(--v21-shadow-md);
    width: auto;
    max-width: 100%;
}

thead {
    background: var(--v21-gradient-primary);
}

thead th {
    padding: 1em 1.25em;
    text-align: left;
    font-weight: 600;
    color: white;
    font-size: 1em;
    letter-spacing: 0.02em;
}

tbody tr {
    border-bottom: 1px solid var(--v21-glass-border);
    transition: background var(--v21-transition-fast);
}

tbody tr:hover {
    background: var(--v21-glass-bg-hover);
}

tbody tr:last-child {
    border-bottom: none;
}

tbody td {
    padding: 1em 1.25em;
    color: var(--v21-text-secondary);
    font-size: 0.95em;
}

/* ========================================
   CARDS - GLASSMORPHISM
   ======================================== */

.card,
.feature-item,
.glass-card {
    background: var(--v21-glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--v21-glass-border);
    border-radius: var(--v21-radius-md);
    padding: 1.5em;
    transition: all var(--v21-transition-base);
    position: relative;
    overflow: hidden;
}

/* Gradient border effect on hover */
.card::before,
.feature-item::before,
.glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        var(--v21-primary-500) 0%,
        var(--v21-secondary-500) 50%,
        var(--v21-accent-cyan) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--v21-transition-base);
    pointer-events: none;
}

.card:hover::before,
.feature-item:hover::before,
.glass-card:hover::before {
    opacity: 1;
}

.card:hover,
.feature-item:hover,
.glass-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--v21-shadow-glow);
    background: var(--v21-glass-bg-hover);
}

/* Card titles */
.card h3,
.feature-item h3,
.glass-card h3 {
    color: var(--v21-text-primary);
    margin-bottom: 0.5em;
}

.card p,
.feature-item p,
.glass-card p {
    color: var(--v21-text-secondary);
    font-size: 1em;
}

/* Features grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5em;
    width: 100%;
    margin-top: 2em;
}

@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   NOTICES / ALERTS
   ======================================== */

.notice {
    background: var(--v21-glass-bg);
    backdrop-filter: blur(10px);
    border-left: 4px solid var(--v21-primary-500);
    border-radius: 0;
    padding: 1em 1.25em;
    margin: 1em 0;
}

.notice.info {
    border-left-color: var(--v21-accent-cyan);
}

.notice.warning {
    border-left-color: var(--v21-accent-amber);
}

.notice.success {
    border-left-color: var(--v21-accent-emerald);
}

.notice.error {
    border-left-color: var(--v21-accent-rose);
}

.notice strong {
    color: var(--v21-text-primary);
}

.notice p {
    color: var(--v21-text-secondary);
    font-size: 1em;
    margin: 0;
}

/* ========================================
   BADGES / PILLS
   ======================================== */

.badge,
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 1em;
    background: var(--v21-glass-bg);
    border: 1px solid var(--v21-glass-border);
    border-radius: var(--v21-radius-full);
    font-size: 0.85em;
    font-weight: 500;
    color: var(--v21-text-secondary);
    backdrop-filter: blur(10px);
}

.badge.primary,
.pill.primary {
    background: rgba(168, 85, 247, 0.2);
    border-color: var(--v21-primary-500);
    color: var(--v21-primary-400);
}

.badge.cyan,
.pill.cyan {
    background: rgba(34, 211, 238, 0.15);
    border-color: var(--v21-accent-cyan);
    color: var(--v21-accent-cyan);
}

/* ========================================
   BUTTONS
   ======================================== */

.btn,
button.styled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.875em 1.75em;
    font-family: var(--v21-font-sans);
    font-size: 1em;
    font-weight: 600;
    border-radius: var(--v21-radius-lg);
    border: none;
    cursor: pointer;
    transition: all var(--v21-transition-base);
}

.btn-primary {
    background: var(--v21-gradient-primary);
    color: white;
    box-shadow: 0 4px 15px var(--v21-glow-primary);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--v21-glow-primary);
}

.btn-ghost {
    background: var(--v21-glass-bg);
    border: 1px solid var(--v21-glass-border);
    color: var(--v21-text-primary);
    backdrop-filter: blur(10px);
}

.btn-ghost:hover {
    background: var(--v21-glass-bg-hover);
    border-color: var(--v21-primary-500);
}

/* ========================================
   IMAGES & MEDIA
   ======================================== */

.slide img:not(.slide-header img):not(.logo):not(.way-up-logo) {
    border-radius: var(--v21-radius-lg);
}

.slide iframe {
    border-radius: var(--v21-radius-xl);
    border: 1px solid var(--v21-glass-border);
    box-shadow: var(--v21-shadow-lg);
}

/* ========================================
   TITLE SLIDE
   ======================================== */

.slide.title-slide {
    background: var(--v21-bg-primary);
    /* Title slides stay centered */
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
}

.slide.title-slide > * {
    align-self: center;
}

/* Title layout - content left, illustration right */
.title-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex: 1;
    min-height: 0;
    gap: 3em;
}

.slide.title-slide .title-content {
    flex: 0 0 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}

/* Title illustration container */
.title-illustration {
    flex: 0 0 35%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100%;
    max-height: 400px;
}

.title-illustration svg {
    width: 100%;
    height: auto;
    max-height: 350px;
    filter: drop-shadow(0 0 30px var(--v21-glow-primary));
}

/* Title illustration - static positioning (no float animation) */
.title-illustration .knowledge-icon {
    /* Static - no animation */
}

/* Orbiting elements around illustration */
.title-illustration .orbit {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: orbitSpin 20s linear infinite;
}

.title-illustration .orbit-element {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--v21-gradient-primary);
    border-radius: 50%;
    box-shadow: 0 0 20px var(--v21-glow-primary);
}

.title-illustration .orbit-element:nth-child(1) {
    top: 10%;
    left: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.title-illustration .orbit-element:nth-child(2) {
    top: 50%;
    right: 5%;
    animation: pulse 2s ease-in-out infinite 0.5s;
}

.title-illustration .orbit-element:nth-child(3) {
    bottom: 15%;
    left: 20%;
    animation: pulse 2s ease-in-out infinite 1s;
}

@keyframes orbitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.3);
        opacity: 1;
    }
}

/* Responsive: stack on mobile */
@media screen and (max-width: 900px) {
    .title-layout {
        flex-direction: column;
        gap: 2em;
    }

    .slide.title-slide .title-content {
        flex: none;
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .title-illustration {
        flex: none;
        width: 60%;
        max-height: 200px;
    }
}

/* Animated constellation canvas */
.slide.title-slide .bg-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.slide.title-slide .title-layout,
.slide.title-slide .title-footer {
    position: relative;
    z-index: 10;
}

.slide.title-slide .main-title {
    font-size: 4.5em;
    font-weight: 900;
    background: var(--v21-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    margin-bottom: 0.3em;
}

.slide.title-slide .subtitle {
    font-size: 2em;
    font-weight: 400;
    color: var(--v21-text-secondary);
}

.slide.title-slide .lecture-number {
    color: var(--v21-primary-400);
    font-weight: 600;
}

.slide.title-slide .lecture-description {
    color: var(--v21-text-tertiary);
}

/* Title footer - Frosted glass effect */
.title-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% + 6em);
    margin-left: -3em;
    margin-right: -3em;
    padding: 1.5em 3em;
    margin-top: auto;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--v21-radius-xl);
}

.title-footer .cc-info {
    display: flex;
    align-items: center;
    gap: 1em;
}

.title-footer .cc-logo {
    height: 2em;
    width: auto;
    opacity: 0.7;
    filter: none;
}

.title-footer .cc-text p,
.title-footer .copyright {
    color: var(--v21-text-tertiary);
    font-size: 0.9em;
    margin: 0;
}

.title-footer .cc-text a {
    color: var(--v21-primary-400);
}

.title-footer .way-up-logo {
    height: 3em;
    width: auto;
    filter: none;
}

/* Brand logo with text */
.title-footer .brand-logo {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.title-footer .brand-text-img {
    height: 3em;
    width: auto;
    filter: saturate(0.3) brightness(1.4);
}

/* Light theme: keep original colors for text image */
.light-theme .title-footer .brand-text-img {
    filter: none;
}

/* ========================================
   NAVIGATION ELEMENTS
   ======================================== */

.nav-arrow {
    background: var(--v21-bg-tertiary);
    border: 1px solid var(--v21-glass-border);
    backdrop-filter: blur(10px);
    color: var(--v21-text-primary);
}

.nav-arrow:hover {
    background: var(--v21-primary-600);
    border-color: var(--v21-primary-500);
}

.slide-counter {
    background: var(--v21-bg-tertiary);
    border: 1px solid var(--v21-glass-border);
    backdrop-filter: blur(10px);
    color: var(--v21-text-secondary);
}

.sorter-toggle,
.print-toggle {
    background: var(--v21-bg-tertiary);
    border: 1px solid var(--v21-glass-border);
    backdrop-filter: blur(10px);
    color: var(--v21-text-primary);
}

.sorter-toggle:hover,
.print-toggle:hover {
    background: var(--v21-primary-600);
    border-color: var(--v21-primary-500);
}

/* ========================================
   SLIDE SORTER MODE
   ======================================== */

.slide-sorter-mode {
    background: rgba(9, 9, 11, 0.98);
}

.slide-sorter-header {
    background: var(--v21-bg-secondary);
    border-bottom: 1px solid var(--v21-glass-border);
}

.slide-sorter-header h2 {
    background: var(--v21-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.close-sorter {
    background: var(--v21-accent-rose);
}

.close-sorter:hover {
    background: #e11d48;
}

.slide-thumbnail {
    background: var(--v21-bg-secondary);
    border: 1px solid var(--v21-glass-border);
    border-radius: var(--v21-radius-lg);
}

.slide-thumbnail:hover {
    border-color: var(--v21-primary-500);
    box-shadow: var(--v21-shadow-glow);
}

.slide-thumbnail.current {
    box-shadow: 0 0 0 3px var(--v21-primary-500);
}

.slide-thumbnail-title {
    background: var(--v21-gradient-primary);
}

.slide-thumbnail-number {
    background: var(--v21-primary-600);
}

/* ========================================
   SCROLLBAR
   ======================================== */

.slide::-webkit-scrollbar {
    width: 8px;
}

.slide::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}

.slide::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--v21-primary-500), var(--v21-secondary-500));
    border-radius: 4px;
}

.slide::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--v21-primary-400), var(--v21-secondary-400));
}

/* Firefox */
.slide {
    scrollbar-width: thin;
    scrollbar-color: var(--v21-primary-500) rgba(255, 255, 255, 0.02);
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .slide {
        background: white !important;
    }

    .slide::before,
    .slide::after {
        display: none !important;
    }

    .slide h1,
    .slide h2,
    .slide h3 {
        -webkit-text-fill-color: #18181b !important;
        background: none !important;
        color: #18181b !important;
    }

    .slide p,
    .slide li {
        color: #3f3f46 !important;
    }

    .card,
    .feature-item,
    .glass-card {
        background: #f4f4f5 !important;
        border: 1px solid #e4e4e7 !important;
        backdrop-filter: none !important;
    }

    pre {
        background: #f4f4f5 !important;
        border: 1px solid #e4e4e7 !important;
    }

    table {
        background: white !important;
    }

    thead {
        background: linear-gradient(135deg, #a855f7, #6366f1) !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */

@media screen and (max-width: 768px) {
    .slide {
        background: var(--v21-bg-primary);
    }

    .slide::before {
        opacity: 0.4;
    }

    .slide::after {
        opacity: 0.3;
    }

    .slide h1 {
        font-size: 2.2em;
    }

    .slide h2 {
        font-size: 1.8em;
    }

    .slide h3 {
        font-size: 1.4em;
    }

    .nav-arrow,
    .slide-counter,
    .sorter-toggle {
        background: rgba(24, 24, 27, 0.9);
        border: 1px solid var(--v21-glass-border);
    }

    /* Tables - responsive mobile layout */
    table {
        display: table;
        font-size: 0.85em;
        width: auto;
        max-width: 100%;
        margin-left: 0;
        margin-right: auto;
    }

    thead th,
    tbody td {
        padding: 0.6em 0.8em;
    }

    /* Code blocks - ensure opaque and readable on mobile */
    pre {
        font-size: 0.8em;
        padding: 1em;
        background: #1e1e2e !important;
    }
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .slide::before {
        animation: none;
    }

    .card,
    .feature-item,
    .glass-card,
    .btn,
    button.styled {
        transition: none;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.text-gradient {
    background: var(--v21-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-primary {
    color: var(--v21-text-primary);
}

.text-secondary {
    color: var(--v21-text-secondary);
}

.text-tertiary {
    color: var(--v21-text-tertiary);
}

.text-purple {
    color: var(--v21-primary-400);
}

.text-cyan {
    color: var(--v21-accent-cyan);
}

.text-emerald {
    color: var(--v21-accent-emerald);
}

.text-amber {
    color: var(--v21-accent-amber);
}

.text-rose {
    color: var(--v21-accent-rose);
}

.bg-glass {
    background: var(--v21-glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--v21-glass-border);
}

.glow {
    box-shadow: var(--v21-shadow-glow);
}

.glow-sm {
    box-shadow: 0 0 30px var(--v21-glow-primary);
}

/* ========================================
   CODE CALLOUTS & LEGENDS
   ======================================== */

/* Callout numbers in code */
.code-callout {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 22px !important;
    height: 22px !important;
    margin: 0 6px !important;
    background: var(--v21-gradient-primary) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    font-family: var(--v21-font-mono) !important;
    border-radius: 6px !important;
    vertical-align: middle !important;
    text-align: center !important;
    line-height: 1 !important;
    padding: 0 6px !important;
    box-shadow: 0 2px 8px var(--v21-glow-primary) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.code-callout:hover {
    transform: translateY(-2px) scale(1.1) !important;
    box-shadow: 0 4px 12px var(--v21-glow-primary) !important;
}

/* Container for code + legend side by side */
.code-with-legend {
    display: flex !important;
    flex-direction: row !important;
    gap: 2em;
    width: 100% !important;
    align-items: flex-start !important;
    margin: 1.5em 0 !important;
}

/* Code block takes ~60% */
.code-with-legend pre {
    flex: 1 1 60% !important;
    margin: 0 !important;
    min-width: 0 !important;
    max-width: 60% !important;
}

/* Legend takes ~40% */
.code-legend {
    flex: 1 1 35% !important;
    max-width: 38%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    font-size: 0.95em;
}

/* Individual legend items */
.code-legend-item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 0.75em;
    background: var(--v21-glass-bg);
    border: 1px solid var(--v21-glass-border);
    border-radius: var(--v21-radius-md);
    transition: all var(--v21-transition-fast);
}

.code-legend-item:hover {
    background: var(--v21-glass-bg-hover);
    border-color: var(--v21-primary-500);
}

/* Badge number in legend */
.code-legend-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    /* Adjust vertical position to align with text baseline */
    position: relative;
    top: 0.15em;
    background: var(--v21-gradient-primary);
    color: white;
    font-weight: 600;
    font-size: 11px;
    font-family: var(--v21-font-mono);
    border-radius: 6px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px var(--v21-glow-primary);
}

/* Legend text */
.code-legend-text {
    color: var(--v21-text-secondary);
    font-weight: 400;
    flex: 1;
    line-height: 1.5;
}

/* Mobile: stack vertically */
@media screen and (max-width: 768px) {
    .code-with-legend {
        flex-direction: column !important;
        gap: 1.5em;
    }

    .code-with-legend pre {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .code-legend {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ========================================
   LATERAL PARALLAX TRANSITIONS
   ======================================== */

/* Base transition state for slides with parallax enabled */
.slide.parallax-transition {
    transition: transform 0.8s ease-in-out !important;
    will-change: transform;
    /* visibility controlled via inline styles to avoid conflicts */
}

/* Parallax layers - different speeds for depth effect */
/* Using ease-in-out for smoother, more perceptible motion */
.slide.parallax-transition h1,
.slide.parallax-transition .main-title {
    transition: transform 0.8s ease-in-out;
    will-change: transform;
}

.slide.parallax-transition h2,
.slide.parallax-transition h3 {
    transition: transform 0.75s ease-in-out;
    will-change: transform;
}

.slide.parallax-transition p,
.slide.parallax-transition ul,
.slide.parallax-transition ol,
.slide.parallax-transition pre,
.slide.parallax-transition .card,
.slide.parallax-transition .feature-item,
.slide.parallax-transition table {
    transition: transform 0.7s ease-in-out;
    will-change: transform;
}

/* ===== EXIT TO LEFT (going to next slide) ===== */
.slide.slide-exit-left {
    transform: translateX(-100%);
}

.slide.slide-exit-left h1,
.slide.slide-exit-left .main-title {
    transform: translateX(-30%);
}

.slide.slide-exit-left h2,
.slide.slide-exit-left h3 {
    transform: translateX(-20%);
}

.slide.slide-exit-left p,
.slide.slide-exit-left ul,
.slide.slide-exit-left ol,
.slide.slide-exit-left pre,
.slide.slide-exit-left .card,
.slide.slide-exit-left .feature-item,
.slide.slide-exit-left table {
    transform: translateX(-10%);
}

/* ===== EXIT TO RIGHT (going to prev slide) ===== */
.slide.slide-exit-right {
    transform: translateX(100%);
}

.slide.slide-exit-right h1,
.slide.slide-exit-right .main-title {
    transform: translateX(30%);
}

.slide.slide-exit-right h2,
.slide.slide-exit-right h3 {
    transform: translateX(20%);
}

.slide.slide-exit-right p,
.slide.slide-exit-right ul,
.slide.slide-exit-right ol,
.slide.slide-exit-right pre,
.slide.slide-exit-right .card,
.slide.slide-exit-right .feature-item,
.slide.slide-exit-right table {
    transform: translateX(10%);
}

/* ===== ENTER FROM RIGHT (going to next slide) ===== */
.slide.slide-enter-right {
    transform: translateX(100%);
}

.slide.slide-enter-right h1,
.slide.slide-enter-right .main-title {
    transform: translateX(50%);
}

.slide.slide-enter-right h2,
.slide.slide-enter-right h3 {
    transform: translateX(35%);
}

.slide.slide-enter-right p,
.slide.slide-enter-right ul,
.slide.slide-enter-right ol,
.slide.slide-enter-right pre,
.slide.slide-enter-right .card,
.slide.slide-enter-right .feature-item,
.slide.slide-enter-right table {
    transform: translateX(20%);
}

/* ===== ENTER FROM LEFT (going to prev slide) ===== */
.slide.slide-enter-left {
    transform: translateX(-100%);
}

.slide.slide-enter-left h1,
.slide.slide-enter-left .main-title {
    transform: translateX(-50%);
}

.slide.slide-enter-left h2,
.slide.slide-enter-left h3 {
    transform: translateX(-35%);
}

.slide.slide-enter-left p,
.slide.slide-enter-left ul,
.slide.slide-enter-left ol,
.slide.slide-enter-left pre,
.slide.slide-enter-left .card,
.slide.slide-enter-left .feature-item,
.slide.slide-enter-left table {
    transform: translateX(-20%);
}

/* ===== ACTIVE STATE (centered, visible) ===== */
.slide.slide-active-center {
    transform: translateX(0);
}

.slide.slide-active-center h1,
.slide.slide-active-center .main-title,
.slide.slide-active-center h2,
.slide.slide-active-center h3,
.slide.slide-active-center p,
.slide.slide-active-center ul,
.slide.slide-active-center ol,
.slide.slide-active-center pre,
.slide.slide-active-center .card,
.slide.slide-active-center .feature-item,
.slide.slide-active-center table {
    transform: translateX(0);
}

/* Disable parallax transition on mobile */
@media screen and (max-width: 768px) {
    .slide.parallax-transition,
    .slide.parallax-transition h1,
    .slide.parallax-transition h2,
    .slide.parallax-transition h3,
    .slide.parallax-transition p,
    .slide.parallax-transition ul,
    .slide.parallax-transition ol,
    .slide.parallax-transition pre,
    .slide.parallax-transition .card,
    .slide.parallax-transition .feature-item,
    .slide.parallax-transition table {
        transition: none !important;
        transform: none !important;
    }
}

/* Disable parallax for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .slide.parallax-transition,
    .slide.parallax-transition h1,
    .slide.parallax-transition h2,
    .slide.parallax-transition h3,
    .slide.parallax-transition p,
    .slide.parallax-transition ul,
    .slide.parallax-transition ol,
    .slide.parallax-transition pre,
    .slide.parallax-transition .card,
    .slide.parallax-transition .feature-item,
    .slide.parallax-transition table {
        transition: none !important;
        transform: none !important;
    }

    .slide.slide-exit-left,
    .slide.slide-exit-right,
    .slide.slide-enter-left,
    .slide.slide-enter-right {
        transform: none !important;
    }
}

/* ========================================
   MERMAID DIAGRAM STYLING (v2.1)
   ======================================== */

/* Diagram wrapper - includes optional title */
.diagram-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 1.5em 0;
    background: var(--v21-glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--v21-glass-border);
    border-radius: var(--v21-radius-lg);
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

/* Diagram title bar */
.diagram-title {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.875em 1.25em;
    background: linear-gradient(
        135deg,
        rgba(168, 85, 247, 0.15) 0%,
        rgba(99, 102, 241, 0.15) 100%
    );
    border-bottom: 1px solid var(--v21-glass-border);
    font-size: 0.9em;
    font-weight: 600;
    color: var(--v21-text-primary);
    letter-spacing: 0.02em;
}

/* Icon in title */
.diagram-title::before {
    content: '◈';
    font-size: 1.1em;
    background: var(--v21-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Diagram content area */
.diagram-card .diagram-content,
.diagram-card pre.mermaid {
    padding: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    cursor: grab;
}

.diagram-card .diagram-content:active,
.diagram-card pre.mermaid:active {
    cursor: grabbing;
}

/* Reset mermaid-container styles when inside diagram-card */
.diagram-card .mermaid-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 1.5em !important;
    backdrop-filter: none !important;
}

.diagram-card .mermaid-container::before {
    display: none !important;
}

/* Gradient border effect for diagram card */
.diagram-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--v21-radius-lg);
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(168, 85, 247, 0.4) 0%,
        transparent 40%,
        transparent 60%,
        rgba(99, 102, 241, 0.4) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.diagram-card:hover::before {
    opacity: 1;
}

/* Mermaid container wrapper - glass card style */
.mermaid-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1 1 auto;
    min-height: 200px;
    margin: 1.5em 0;
    padding: 2em;
    background: var(--v21-glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--v21-glass-border);
    border-radius: var(--v21-radius-lg);
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    cursor: grab;
}

.mermaid-container:active {
    cursor: grabbing;
}

/* Subtle gradient glow behind diagram */
.mermaid-container::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--v21-radius-lg);
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(168, 85, 247, 0.3) 0%,
        transparent 50%,
        rgba(99, 102, 241, 0.3) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.mermaid-container:hover::before {
    opacity: 1;
}

/* Mermaid diagram - transparent background, centered */
pre.mermaid {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    transition: transform 0.2s ease;
    transform-origin: center center;
}

/* Mermaid SVG styling */
pre.mermaid svg {
    max-width: 100%;
    max-height: 100%;
    height: auto !important;
    overflow: visible;
}

/* Mermaid node styling overrides for dark theme */
.mermaid-container .nodeLabel {
    color: var(--v21-text-primary) !important;
}

.mermaid-container .node rect,
.mermaid-container .node circle,
.mermaid-container .node ellipse,
.mermaid-container .node polygon {
    stroke: var(--v21-primary-500) !important;
}

/* Edge/arrow styling */
.mermaid-container .edgePath path {
    stroke: var(--v21-text-tertiary) !important;
}

.mermaid-container marker path {
    fill: var(--v21-text-tertiary) !important;
}

/* Standalone pre.mermaid (before JS wraps it) - also gets glass card */
.slide pre.mermaid:not(.mermaid-container pre.mermaid) {
    position: relative;
    padding: 2em !important;
    background: var(--v21-glass-bg) !important;
    backdrop-filter: blur(20px);
    border: 1px solid var(--v21-glass-border) !important;
    border-radius: var(--v21-radius-lg) !important;
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Light theme for standalone mermaid */
.light-theme .slide pre.mermaid:not(.mermaid-container pre.mermaid) {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* Mermaid controls toolbar */
.mermaid-controls {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 100;
    background: var(--v21-glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--v21-glass-border);
    border-radius: var(--v21-radius-md);
    padding: 6px;
}

.mermaid-container:hover .mermaid-controls {
    opacity: 1;
}

/* Mermaid control buttons */
.mermaid-controls button {
    width: 32px;
    height: 32px;
    border: 1px solid var(--v21-glass-border);
    background: var(--v21-bg-tertiary);
    border-radius: var(--v21-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--v21-text-primary);
    transition: all 0.15s ease;
    padding: 0;
}

.mermaid-controls button:hover {
    background: var(--v21-primary-600);
    border-color: var(--v21-primary-500);
    color: white;
}

.mermaid-controls button:active {
    transform: scale(0.95);
}

/* Zoom level indicator */
.mermaid-zoom-level {
    font-size: 11px;
    color: var(--v21-text-secondary);
    min-width: 40px;
    text-align: center;
    line-height: 32px;
    font-family: var(--v21-font-mono);
}

/* Fullscreen overlay - dark theme */
.mermaid-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(9, 9, 11, 0.98);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
    animation: mermaidFadeIn 0.2s ease;
}

@keyframes mermaidFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Fullscreen diagram container */
.mermaid-fullscreen-overlay .mermaid-fullscreen-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: auto;
}

.mermaid-fullscreen-overlay svg {
    max-width: 95vw;
    max-height: 85vh;
    width: auto;
    height: auto;
}

/* Fullscreen controls */
.mermaid-fullscreen-controls {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 8px;
    z-index: 10001;
}

.mermaid-fullscreen-controls button {
    width: 44px;
    height: 44px;
    border: 1px solid var(--v21-glass-border);
    background: var(--v21-primary-600);
    color: white;
    border-radius: var(--v21-radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.15s ease;
    box-shadow: 0 4px 20px var(--v21-glow-primary);
}

.mermaid-fullscreen-controls button:hover {
    background: var(--v21-primary-500);
    transform: scale(1.05);
}

/* Fullscreen zoom level */
.mermaid-fullscreen-controls .mermaid-zoom-level {
    background: var(--v21-glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--v21-glass-border);
    color: var(--v21-text-primary);
    border-radius: var(--v21-radius-md);
    padding: 0 16px;
    font-size: 14px;
    line-height: 44px;
}

/* Fullscreen hint */
.mermaid-fullscreen-hint {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--v21-glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--v21-glass-border);
    color: var(--v21-text-secondary);
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    z-index: 10001;
    transition: opacity 0.3s ease;
}

/* Light theme adjustments */
.light-theme .diagram-card {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.light-theme .diagram-title {
    background: linear-gradient(
        135deg,
        rgba(168, 85, 247, 0.08) 0%,
        rgba(99, 102, 241, 0.08) 100%
    );
    border-color: rgba(0, 0, 0, 0.06);
    color: #18181b;
}

.light-theme .diagram-card::before {
    background: linear-gradient(
        135deg,
        rgba(168, 85, 247, 0.25) 0%,
        transparent 40%,
        transparent 60%,
        rgba(99, 102, 241, 0.25) 100%
    );
}

.light-theme .mermaid-container {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.light-theme .mermaid-container::before {
    background: linear-gradient(
        135deg,
        rgba(168, 85, 247, 0.2) 0%,
        transparent 50%,
        rgba(99, 102, 241, 0.2) 100%
    );
}

.light-theme .mermaid-fullscreen-overlay {
    background: rgba(250, 250, 250, 0.98);
}

.light-theme .mermaid-controls {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
}

.light-theme .mermaid-controls button {
    background: white;
    border-color: #e4e4e7;
    color: #18181b;
}

.light-theme .mermaid-controls button:hover {
    background: var(--v21-primary-600);
    color: white;
}

/* Mobile adjustments for mermaid */
@media screen and (max-width: 768px) {
    .mermaid-container {
        padding: 1.5em;
        margin: 1em 0;
    }

    .mermaid-controls {
        opacity: 1;
        top: 8px;
        right: 8px;
        transform: none;
    }

    .mermaid-fullscreen-controls button {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .mermaid-fullscreen-controls .mermaid-zoom-level {
        font-size: 12px;
        padding: 0 12px;
        line-height: 40px;
    }
}

/* ====================================================================
   SVG DIAGRAM CONTROLS (for diagram-cards with SVG)
   Similar to mermaid controls but for custom SVG diagrams
   ==================================================================== */

/* Enable relative positioning for diagram-card to place controls */
.diagram-card {
    position: relative;
}

/* SVG diagram controls toolbar */
.diagram-controls {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 100;
    background: var(--v21-glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--v21-glass-border);
    border-radius: var(--v21-radius-md);
    padding: 6px;
}

.diagram-card:hover .diagram-controls {
    opacity: 1;
}

/* Diagram control buttons */
.diagram-controls button {
    width: 28px;
    height: 28px;
    border: 1px solid var(--v21-glass-border);
    background: var(--v21-bg-tertiary);
    border-radius: var(--v21-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--v21-text-primary);
    transition: all 0.15s ease;
    padding: 0;
    font-family: var(--v21-font-mono);
}

.diagram-controls button:hover {
    background: var(--v21-primary-600);
    border-color: var(--v21-primary-500);
    color: white;
}

.diagram-controls button:active {
    transform: scale(0.95);
}

/* Diagram zoom level indicator */
.diagram-zoom-level {
    font-size: 10px;
    color: var(--v21-text-secondary);
    min-width: 36px;
    text-align: center;
    line-height: 28px;
    font-family: var(--v21-font-mono);
}

/* Diagram fullscreen overlay */
.diagram-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(9, 9, 11, 0.98);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
    animation: diagramFadeIn 0.2s ease;
}

@keyframes diagramFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Fullscreen title */
.diagram-fullscreen-title {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--v21-glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--v21-glass-border);
    color: var(--v21-text-primary);
    padding: 12px 24px;
    border-radius: var(--v21-radius-lg);
    font-size: 16px;
    font-weight: 600;
    z-index: 10001;
    max-width: 60vw;
    text-align: center;
}

/* Fullscreen diagram container */
.diagram-fullscreen-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: auto;
    cursor: grab;
}

.diagram-fullscreen-content:active {
    cursor: grabbing;
}

.diagram-fullscreen-overlay svg {
    transition: transform 0.15s ease;
}

/* Fullscreen controls */
.diagram-fullscreen-controls {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 8px;
    z-index: 10001;
}

.diagram-fullscreen-controls button {
    width: 44px;
    height: 44px;
    border: 1px solid var(--v21-glass-border);
    background: var(--v21-primary-600);
    color: white;
    border-radius: var(--v21-radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    font-family: var(--v21-font-mono);
    transition: all 0.15s ease;
    box-shadow: 0 4px 20px var(--v21-glow-primary);
}

.diagram-fullscreen-controls button:hover {
    background: var(--v21-primary-500);
    transform: scale(1.05);
}

/* Fullscreen zoom level */
.diagram-fullscreen-controls .diagram-zoom-level {
    background: var(--v21-glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--v21-glass-border);
    color: var(--v21-text-primary);
    border-radius: var(--v21-radius-md);
    padding: 0 16px;
    font-size: 14px;
    line-height: 44px;
    min-width: 50px;
    text-align: center;
}

/* Fullscreen hint */
.diagram-fullscreen-hint {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--v21-glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--v21-glass-border);
    color: var(--v21-text-secondary);
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 13px;
    z-index: 10001;
    transition: opacity 0.3s ease;
}

/* Light theme for diagram controls */
.light-theme .diagram-controls {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
}

.light-theme .diagram-controls button {
    background: white;
    border-color: #e4e4e7;
    color: #18181b;
}

.light-theme .diagram-controls button:hover {
    background: var(--v21-primary-600);
    color: white;
}

.light-theme .diagram-fullscreen-overlay {
    background: rgba(250, 250, 250, 0.98);
}

.light-theme .diagram-fullscreen-title {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
    color: #18181b;
}

/* Mobile adjustments for diagram controls */
@media screen and (max-width: 768px) {
    .diagram-controls {
        opacity: 1;
        top: 4px;
        right: 4px;
        padding: 4px;
        gap: 2px;
    }

    .diagram-controls button {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .diagram-zoom-level {
        font-size: 9px;
        min-width: 30px;
        line-height: 24px;
    }

    .diagram-fullscreen-controls button {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .diagram-fullscreen-controls .diagram-zoom-level {
        font-size: 12px;
        padding: 0 12px;
        line-height: 40px;
    }

    .diagram-fullscreen-title {
        font-size: 14px;
        padding: 8px 16px;
        max-width: 80vw;
    }
}

/* ====================================================================
   SVG DIAGRAM LIGHT THEME - TEXT COLORS
   Override inline SVG fill attributes for light theme readability
   ==================================================================== */

/* Primary text (light gray in dark mode -> dark in light mode) */
.light-theme .diagram-card svg text[fill="#e4e4e7"],
.light-theme .diagram-card svg text[fill="#E4E4E7"],
.light-theme .diagram-content svg text[fill="#e4e4e7"],
.light-theme .diagram-content svg text[fill="#E4E4E7"],
.light-theme .mermaid-container svg text[fill="#e4e4e7"],
.light-theme .mermaid-container svg text[fill="#E4E4E7"] {
    fill: #18181b !important;
}

/* Secondary text (muted gray) */
.light-theme .diagram-card svg text[fill="#a1a1aa"],
.light-theme .diagram-card svg text[fill="#A1A1AA"],
.light-theme .diagram-content svg text[fill="#a1a1aa"],
.light-theme .diagram-content svg text[fill="#A1A1AA"],
.light-theme .mermaid-container svg text[fill="#a1a1aa"],
.light-theme .mermaid-container svg text[fill="#A1A1AA"] {
    fill: #52525b !important;
}

/* Tertiary text (subtle gray) */
.light-theme .diagram-card svg text[fill="#71717a"],
.light-theme .diagram-card svg text[fill="#71717A"],
.light-theme .diagram-content svg text[fill="#71717a"],
.light-theme .diagram-content svg text[fill="#71717A"] {
    fill: #71717a !important;
}

/* Highlight text - cyan stays cyan but slightly darker for light bg */
.light-theme .diagram-card svg text[fill="#22d3ee"],
.light-theme .diagram-card svg text[fill="#22D3EE"],
.light-theme .diagram-content svg text[fill="#22d3ee"],
.light-theme .diagram-content svg text[fill="#22D3EE"] {
    fill: #0891b2 !important;
}

/* Green text - slightly darker for contrast */
.light-theme .diagram-card svg text[fill="#22c55e"],
.light-theme .diagram-card svg text[fill="#22C55E"],
.light-theme .diagram-content svg text[fill="#22c55e"],
.light-theme .diagram-content svg text[fill="#22C55E"] {
    fill: #16a34a !important;
}

/* Teal text */
.light-theme .diagram-card svg text[fill="#14b8a6"],
.light-theme .diagram-card svg text[fill="#14B8A6"],
.light-theme .diagram-content svg text[fill="#14b8a6"],
.light-theme .diagram-content svg text[fill="#14B8A6"] {
    fill: #0d9488 !important;
}

/* SVG rect and shape backgrounds - make glass effects visible */
.light-theme .diagram-card svg rect[fill^="rgba("],
.light-theme .diagram-content svg rect[fill^="rgba("] {
    /* Glass backgrounds get slightly more opaque in light mode */
}

/* Stroke colors for lines - make subtle lines more visible */
.light-theme .diagram-card svg path[stroke^="rgba("],
.light-theme .diagram-card svg line[stroke^="rgba("],
.light-theme .diagram-content svg path[stroke^="rgba("],
.light-theme .diagram-content svg line[stroke^="rgba("] {
    /* Lines with rgba strokes are handled by their opacity */
}

/* Make dashed connector lines more visible in light mode */
.light-theme .diagram-card svg path[stroke-dasharray],
.light-theme .diagram-content svg path[stroke-dasharray] {
    opacity: 0.9;
}

/* Fullscreen overlay adjustments for light theme */
.light-theme .diagram-fullscreen-overlay svg text[fill="#e4e4e7"],
.light-theme .diagram-fullscreen-overlay svg text[fill="#E4E4E7"] {
    fill: #18181b !important;
}

.light-theme .diagram-fullscreen-overlay svg text[fill="#a1a1aa"],
.light-theme .diagram-fullscreen-overlay svg text[fill="#A1A1AA"] {
    fill: #52525b !important;
}

.light-theme .diagram-fullscreen-overlay svg text[fill="#22d3ee"],
.light-theme .diagram-fullscreen-overlay svg text[fill="#22D3EE"] {
    fill: #0891b2 !important;
}

.light-theme .diagram-fullscreen-overlay svg text[fill="#22c55e"],
.light-theme .diagram-fullscreen-overlay svg text[fill="#22C55E"] {
    fill: #16a34a !important;
}

.light-theme .diagram-fullscreen-overlay svg text[fill="#14b8a6"],
.light-theme .diagram-fullscreen-overlay svg text[fill="#14B8A6"] {
    fill: #0d9488 !important;
}

/* ====================================================================
   COMPREHENSIVE SVG DIAGRAM LIGHT THEME SUPPORT
   Ensures all SVG diagrams adapt properly to light/dark themes
   ==================================================================== */

/* ----- PURPLE/VIOLET COLORS ----- */
.light-theme .diagram-card svg text[fill="#a855f7"],
.light-theme .diagram-card svg text[fill="#A855F7"],
.light-theme .diagram-content svg text[fill="#a855f7"],
.light-theme .diagram-content svg text[fill="#A855F7"] {
    fill: #7c3aed !important;
}

/* ----- INDIGO COLORS ----- */
.light-theme .diagram-card svg text[fill="#6366f1"],
.light-theme .diagram-card svg text[fill="#6366F1"],
.light-theme .diagram-content svg text[fill="#6366f1"],
.light-theme .diagram-content svg text[fill="#6366F1"] {
    fill: #4f46e5 !important;
}

/* ----- ORANGE/AMBER COLORS ----- */
.light-theme .diagram-card svg text[fill="#f59e0b"],
.light-theme .diagram-card svg text[fill="#F59E0B"],
.light-theme .diagram-content svg text[fill="#f59e0b"],
.light-theme .diagram-content svg text[fill="#F59E0B"] {
    fill: #d97706 !important;
}

.light-theme .diagram-card svg text[fill="#f97316"],
.light-theme .diagram-card svg text[fill="#F97316"],
.light-theme .diagram-content svg text[fill="#f97316"],
.light-theme .diagram-content svg text[fill="#F97316"] {
    fill: #ea580c !important;
}

/* ----- RED/ERROR COLORS ----- */
.light-theme .diagram-card svg text[fill="#ef4444"],
.light-theme .diagram-card svg text[fill="#EF4444"],
.light-theme .diagram-content svg text[fill="#ef4444"],
.light-theme .diagram-content svg text[fill="#EF4444"] {
    fill: #dc2626 !important;
}

/* ----- BLUE COLORS ----- */
.light-theme .diagram-card svg text[fill="#3b82f6"],
.light-theme .diagram-card svg text[fill="#3B82F6"],
.light-theme .diagram-content svg text[fill="#3b82f6"],
.light-theme .diagram-content svg text[fill="#3B82F6"] {
    fill: #2563eb !important;
}

/* ----- SVG BOX BACKGROUNDS (increase visibility in light mode) ----- */
/* Purple/violet boxes */
.light-theme .diagram-card svg rect[fill^="rgba(168, 85, 247"],
.light-theme .diagram-content svg rect[fill^="rgba(168, 85, 247"] {
    fill: rgba(139, 92, 246, 0.15) !important;
}

/* Indigo boxes */
.light-theme .diagram-card svg rect[fill^="rgba(99, 102, 241"],
.light-theme .diagram-content svg rect[fill^="rgba(99, 102, 241"] {
    fill: rgba(79, 70, 229, 0.12) !important;
}

/* Cyan boxes */
.light-theme .diagram-card svg rect[fill^="rgba(34, 211, 238"],
.light-theme .diagram-content svg rect[fill^="rgba(34, 211, 238"] {
    fill: rgba(6, 182, 212, 0.12) !important;
}

/* Green boxes */
.light-theme .diagram-card svg rect[fill^="rgba(34, 197, 94"],
.light-theme .diagram-content svg rect[fill^="rgba(34, 197, 94"] {
    fill: rgba(22, 163, 74, 0.12) !important;
}

/* Teal boxes */
.light-theme .diagram-card svg rect[fill^="rgba(20, 184, 166"],
.light-theme .diagram-content svg rect[fill^="rgba(20, 184, 166"] {
    fill: rgba(13, 148, 136, 0.12) !important;
}

/* Orange/amber boxes */
.light-theme .diagram-card svg rect[fill^="rgba(245, 158, 11"],
.light-theme .diagram-content svg rect[fill^="rgba(245, 158, 11"] {
    fill: rgba(217, 119, 6, 0.12) !important;
}

.light-theme .diagram-card svg rect[fill^="rgba(249, 115, 22"],
.light-theme .diagram-content svg rect[fill^="rgba(249, 115, 22"] {
    fill: rgba(234, 88, 12, 0.12) !important;
}

/* Red boxes */
.light-theme .diagram-card svg rect[fill^="rgba(239, 68, 68"],
.light-theme .diagram-content svg rect[fill^="rgba(239, 68, 68"] {
    fill: rgba(220, 38, 38, 0.12) !important;
}

/* Dark/neutral boxes (make more visible) */
.light-theme .diagram-card svg rect[fill^="rgba(30, 27, 75"],
.light-theme .diagram-content svg rect[fill^="rgba(30, 27, 75"] {
    fill: rgba(99, 102, 241, 0.08) !important;
}

.light-theme .diagram-card svg rect[fill^="rgba(23, 37, 84"],
.light-theme .diagram-content svg rect[fill^="rgba(23, 37, 84"] {
    fill: rgba(99, 102, 241, 0.06) !important;
}

.light-theme .diagram-card svg rect[fill^="rgba(22, 78, 99"],
.light-theme .diagram-content svg rect[fill^="rgba(22, 78, 99"] {
    fill: rgba(8, 145, 178, 0.08) !important;
}

.light-theme .diagram-card svg rect[fill^="rgba(24, 24, 27"],
.light-theme .diagram-content svg rect[fill^="rgba(24, 24, 27"] {
    fill: rgba(244, 244, 245, 0.95) !important;
}

.light-theme .diagram-card svg rect[fill^="rgba(39, 39, 42"],
.light-theme .diagram-content svg rect[fill^="rgba(39, 39, 42"] {
    fill: rgba(250, 250, 250, 0.95) !important;
}

.light-theme .diagram-card svg rect[fill^="rgba(20, 83, 45"],
.light-theme .diagram-content svg rect[fill^="rgba(20, 83, 45"] {
    fill: rgba(22, 163, 74, 0.08) !important;
}

/* Gray boxes */
.light-theme .diagram-card svg rect[fill^="rgba(113, 113, 122"],
.light-theme .diagram-content svg rect[fill^="rgba(113, 113, 122"] {
    fill: rgba(82, 82, 91, 0.1) !important;
}

/* ----- POLYGON FILLS (diamonds, arrows) ----- */
.light-theme .diagram-card svg polygon[fill^="rgba(168, 85, 247"],
.light-theme .diagram-content svg polygon[fill^="rgba(168, 85, 247"] {
    fill: rgba(139, 92, 246, 0.15) !important;
}

.light-theme .diagram-card svg polygon[fill^="rgba(99, 102, 241"],
.light-theme .diagram-content svg polygon[fill^="rgba(99, 102, 241"] {
    fill: rgba(79, 70, 229, 0.12) !important;
}

.light-theme .diagram-card svg polygon[fill^="rgba(34, 211, 238"],
.light-theme .diagram-content svg polygon[fill^="rgba(34, 211, 238"] {
    fill: rgba(6, 182, 212, 0.12) !important;
}

/* ----- CIRCLE FILLS (data particles, indicators) ----- */
.light-theme .diagram-card svg circle[fill="#a855f7"],
.light-theme .diagram-content svg circle[fill="#a855f7"] {
    fill: #7c3aed !important;
}

.light-theme .diagram-card svg circle[fill="#6366f1"],
.light-theme .diagram-content svg circle[fill="#6366f1"] {
    fill: #4f46e5 !important;
}

.light-theme .diagram-card svg circle[fill="#22d3ee"],
.light-theme .diagram-content svg circle[fill="#22d3ee"] {
    fill: #0891b2 !important;
}

.light-theme .diagram-card svg circle[fill="#22c55e"],
.light-theme .diagram-content svg circle[fill="#22c55e"] {
    fill: #16a34a !important;
}

.light-theme .diagram-card svg circle[fill="#f59e0b"],
.light-theme .diagram-content svg circle[fill="#f59e0b"] {
    fill: #d97706 !important;
}

/* ----- LINE/PATH STROKES ----- */
.light-theme .diagram-card svg path[stroke="#a855f7"],
.light-theme .diagram-content svg path[stroke="#a855f7"],
.light-theme .diagram-card svg line[stroke="#a855f7"],
.light-theme .diagram-content svg line[stroke="#a855f7"] {
    stroke: #7c3aed !important;
}

.light-theme .diagram-card svg path[stroke="#6366f1"],
.light-theme .diagram-content svg path[stroke="#6366f1"],
.light-theme .diagram-card svg line[stroke="#6366f1"],
.light-theme .diagram-content svg line[stroke="#6366f1"] {
    stroke: #4f46e5 !important;
}

.light-theme .diagram-card svg path[stroke="#22d3ee"],
.light-theme .diagram-content svg path[stroke="#22d3ee"],
.light-theme .diagram-card svg line[stroke="#22d3ee"],
.light-theme .diagram-content svg line[stroke="#22d3ee"] {
    stroke: #0891b2 !important;
}

.light-theme .diagram-card svg path[stroke="#22c55e"],
.light-theme .diagram-content svg path[stroke="#22c55e"],
.light-theme .diagram-card svg line[stroke="#22c55e"],
.light-theme .diagram-content svg line[stroke="#22c55e"] {
    stroke: #16a34a !important;
}

.light-theme .diagram-card svg path[stroke="#f59e0b"],
.light-theme .diagram-content svg path[stroke="#f59e0b"],
.light-theme .diagram-card svg line[stroke="#f59e0b"],
.light-theme .diagram-content svg line[stroke="#f59e0b"] {
    stroke: #d97706 !important;
}

.light-theme .diagram-card svg path[stroke="#ef4444"],
.light-theme .diagram-content svg path[stroke="#ef4444"],
.light-theme .diagram-card svg line[stroke="#ef4444"],
.light-theme .diagram-content svg line[stroke="#ef4444"] {
    stroke: #dc2626 !important;
}

/* ----- ARROW/MARKER FILLS ----- */
.light-theme .diagram-card svg polygon[fill="#a855f7"],
.light-theme .diagram-content svg polygon[fill="#a855f7"] {
    fill: #7c3aed !important;
}

.light-theme .diagram-card svg polygon[fill="#6366f1"],
.light-theme .diagram-content svg polygon[fill="#6366f1"] {
    fill: #4f46e5 !important;
}

.light-theme .diagram-card svg polygon[fill="#22d3ee"],
.light-theme .diagram-content svg polygon[fill="#22d3ee"] {
    fill: #0891b2 !important;
}

.light-theme .diagram-card svg polygon[fill="#22c55e"],
.light-theme .diagram-content svg polygon[fill="#22c55e"] {
    fill: #16a34a !important;
}

.light-theme .diagram-card svg polygon[fill="#f59e0b"],
.light-theme .diagram-content svg polygon[fill="#f59e0b"] {
    fill: #d97706 !important;
}

.light-theme .diagram-card svg polygon[fill="#ef4444"],
.light-theme .diagram-content svg polygon[fill="#ef4444"] {
    fill: #dc2626 !important;
}

.light-theme .diagram-card svg polygon[fill="#14b8a6"],
.light-theme .diagram-content svg polygon[fill="#14b8a6"] {
    fill: #0d9488 !important;
}

/* ----- RECT STROKES ----- */
.light-theme .diagram-card svg rect[stroke="#22c55e"],
.light-theme .diagram-content svg rect[stroke="#22c55e"] {
    stroke: #16a34a !important;
}

/* ----- GRADIENTS IN SVG (linearGradient stop colors) ----- */
/* Note: Inline gradient stops can't be overridden by CSS, but we can
   override the elements that use them via the stroke/fill rules above */

/* ====================================================================
   PIPELINE DIAGRAM ANIMATIONS & THEMING
   Styles for Data Science Pipeline diagram with data flow animations
   ==================================================================== */

/* ----- DARK THEME (DEFAULT) ----- */

/* Course highlight badge */
.pipeline-diagram .course-badge-bg {
    fill: rgba(168, 85, 247, 0.25);
    stroke: #a855f7;
    stroke-width: 1.5;
}

.pipeline-diagram .course-badge-text {
    fill: #a855f7;
}

/* Box backgrounds */
.pipeline-diagram .box-bg-primary {
    fill: rgba(30, 27, 75, 0.7);
}

.pipeline-diagram .box-bg-secondary {
    fill: rgba(23, 37, 84, 0.7);
}

.pipeline-diagram .box-bg-tertiary {
    fill: rgba(22, 78, 99, 0.5);
}

.pipeline-diagram .box-bg-success {
    fill: rgba(20, 83, 45, 0.5);
}

/* Item backgrounds */
.pipeline-diagram .item-bg-purple {
    fill: rgba(168, 85, 247, 0.2);
}

.pipeline-diagram .item-bg-indigo {
    fill: rgba(99, 102, 241, 0.2);
}

.pipeline-diagram .item-bg-cyan {
    fill: rgba(34, 211, 238, 0.15);
}

/* Text colors */
.pipeline-diagram .item-text {
    fill: #e4e4e7;
}

/* Data flow particles glow enhancement */
.pipeline-diagram .data-flow circle {
    filter: drop-shadow(0 0 6px currentColor);
}

/* Pulse animation for highlighted sections */
.pipeline-diagram .data-section {
    animation: pipelinePulse 4s ease-in-out infinite;
}

@keyframes pipelinePulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.1); }
}

/* ----- LIGHT THEME ----- */

.light-theme .pipeline-diagram .course-badge-bg {
    fill: rgba(168, 85, 247, 0.15);
    stroke: #7c3aed;
}

.light-theme .pipeline-diagram .course-badge-text {
    fill: #6d28d9;
}

/* Light theme box backgrounds */
.light-theme .pipeline-diagram .box-bg-primary {
    fill: rgba(245, 243, 255, 0.9);
}

.light-theme .pipeline-diagram .box-bg-secondary {
    fill: rgba(238, 242, 255, 0.9);
}

.light-theme .pipeline-diagram .box-bg-tertiary {
    fill: rgba(236, 254, 255, 0.7);
}

.light-theme .pipeline-diagram .box-bg-success {
    fill: rgba(240, 253, 244, 0.7);
}

/* Light theme item backgrounds */
.light-theme .pipeline-diagram .item-bg-purple {
    fill: rgba(168, 85, 247, 0.12);
}

.light-theme .pipeline-diagram .item-bg-indigo {
    fill: rgba(99, 102, 241, 0.12);
}

.light-theme .pipeline-diagram .item-bg-cyan {
    fill: rgba(34, 211, 238, 0.1);
}

/* Light theme text */
.light-theme .pipeline-diagram .item-text {
    fill: #18181b;
}

/* Light theme - adjust colored text for better contrast */
.light-theme .pipeline-diagram text[fill="#a855f7"] {
    fill: #7c3aed !important;
}

.light-theme .pipeline-diagram text[fill="#6366f1"] {
    fill: #4f46e5 !important;
}

.light-theme .pipeline-diagram text[fill="#22d3ee"] {
    fill: #0891b2 !important;
}

.light-theme .pipeline-diagram text[fill="#22c55e"] {
    fill: #16a34a !important;
}

.light-theme .pipeline-diagram text[fill="#ef4444"] {
    fill: #dc2626 !important;
}

/* Light theme glow filters - less intense */
.light-theme .pipeline-diagram .data-section {
    animation: pipelinePulseLight 4s ease-in-out infinite;
}

@keyframes pipelinePulseLight {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.02); }
}

/* Light theme - adjust stroke colors for visibility */
.light-theme .pipeline-diagram .course-highlight path {
    stroke: #7c3aed;
}

.light-theme .pipeline-diagram .data-sources rect[stroke="#a855f7"] {
    stroke: #7c3aed;
}

.light-theme .pipeline-diagram .data-preparation rect[stroke="#6366f1"] {
    stroke: #4f46e5;
}

/* Light theme - particle colors slightly darker */
.light-theme .pipeline-diagram .data-flow circle[fill="#a855f7"] {
    fill: #7c3aed;
}

.light-theme .pipeline-diagram .data-flow circle[fill="#22d3ee"] {
    fill: #0891b2;
}

.light-theme .pipeline-diagram .data-flow circle[fill="#22c55e"] {
    fill: #16a34a;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .pipeline-diagram .data-section,
    .light-theme .pipeline-diagram .data-section {
        animation: none;
    }

    .pipeline-diagram animate {
        animation: none;
    }
}

/* ========================================
   REUSABLE COMPONENTS - STATS & CARDS
   ======================================== */

/* Stat card */
.stat-card {
    text-align: center;
    padding: 1em;
    background: var(--v21-glass-bg);
    border-radius: var(--v21-radius-lg);
    border: 1px solid var(--v21-glass-border);
}

.stat-card .number {
    font-size: 3.5em;
    font-weight: 800;
    background: linear-gradient(135deg, var(--v21-primary-500), var(--v21-accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px var(--v21-glow-primary));
    line-height: 1;
    margin: 0;
    letter-spacing: -0.02em;
}

.stat-card .label {
    font-size: 0.85em;
    margin-top: 0.5em;
    opacity: 0.9;
}

.stat-label {
    font-size: 1.1em;
    margin-top: 0.5em;
    opacity: 0.85;
    letter-spacing: 0.02em;
}

/* Animated gradient statistics */
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.stat-hero {
    font-size: 10em !important;
    font-weight: 800;
    background: linear-gradient(135deg, var(--v21-primary-500) 0%, var(--v21-accent-cyan) 50%, var(--v21-accent-rose) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease infinite;
    line-height: 0.8 !important;
    margin: 0;
    filter: drop-shadow(0 0 60px var(--v21-glow-primary)) drop-shadow(0 0 120px var(--v21-glow-cyan));
    letter-spacing: -0.03em;
}

.stat-big {
    font-size: 10em !important;
    font-weight: 800;
    background: linear-gradient(135deg, var(--v21-primary-500) 0%, var(--v21-accent-cyan) 50%, var(--v21-accent-rose) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease infinite;
    line-height: 0.9 !important;
    margin: 0;
    filter: drop-shadow(0 0 30px var(--v21-glow-primary)) drop-shadow(0 0 60px var(--v21-glow-cyan));
    letter-spacing: -0.02em;
}

.stat-huge {
    font-size: 8em !important;
    font-weight: 800;
    background: linear-gradient(135deg, var(--v21-accent-cyan), var(--v21-primary-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 30px var(--v21-glow-cyan)) drop-shadow(0 0 60px var(--v21-glow-primary));
    line-height: 0.9 !important;
    margin: 0;
    letter-spacing: -0.02em;
}

/* Colored cards */
.warning-card { background: rgba(244, 63, 94, 0.1); border: 1px solid rgba(244, 63, 94, 0.3); }
.success-card { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); }
.info-card { background: rgba(34, 211, 238, 0.1); border: 1px solid rgba(34, 211, 238, 0.3); }
.purple-card { background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.3); }
.amber-card { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); }

.light-theme .warning-card { background: rgba(244, 63, 94, 0.08); }
.light-theme .success-card { background: rgba(16, 185, 129, 0.08); }
.light-theme .info-card { background: rgba(34, 211, 238, 0.08); }
.light-theme .purple-card { background: rgba(168, 85, 247, 0.08); }
.light-theme .amber-card { background: rgba(245, 158, 11, 0.08); }

/* ========================================
   QUOTE BOX
   ======================================== */

.quote-box {
    position: relative;
    font-size: 1.15em;
    font-style: italic;
    font-weight: 600;
    padding: 1.5em 2em;
    background: var(--v21-glass-bg);
    border-radius: var(--v21-radius-xl);
    border: 1px solid rgba(168, 85, 247, 0.3);
    margin: 1em 0;
}

.quote-box::before {
    content: '"';
    position: absolute;
    top: -0.1em;
    left: 0.3em;
    font-size: 3.5em;
    font-family: Georgia, serif;
    font-style: normal;
    color: rgba(168, 85, 247, 0.4);
    line-height: 1;
}

.quote-box::after {
    content: '"';
    position: absolute;
    bottom: -0.4em;
    right: 0.3em;
    font-size: 3.5em;
    font-family: Georgia, serif;
    font-style: normal;
    color: rgba(168, 85, 247, 0.4);
    line-height: 1;
}

.quote-box p { margin: 0; }

.quote-author {
    margin-top: 0.8em;
    font-style: normal;
    font-size: 0.85em;
    opacity: 0.9;
    text-align: right;
    color: var(--v21-accent-cyan);
}

.quote-author::before { content: '— '; }

.light-theme .quote-box::before,
.light-theme .quote-box::after {
    color: rgba(168, 85, 247, 0.3);
}

/* ========================================
   LAYOUT HELPERS
   ======================================== */

.two-columns {
    display: flex;
    gap: 2em;
}

.two-columns > div,
.two-columns > pre {
    flex: 1;
}

.slide-subtitle {
    font-size: 1.3em !important;
    font-weight: 600;
    font-style: italic;
    margin-top: -0.5em;
    margin-bottom: 1em;
    opacity: 0.9;
}

/* Grid layouts */
.grid-2x2 { grid-template-columns: repeat(2, 1fr) !important; }
.grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
.grid-4 { grid-template-columns: repeat(4, 1fr) !important; }

/* ========================================
   TEXT COLOR UTILITIES
   ======================================== */

.text-purple { color: var(--v21-primary-500); }
.text-cyan { color: var(--v21-accent-cyan); }
.text-emerald { color: var(--v21-accent-emerald); }
.text-amber { color: var(--v21-accent-amber); }
.text-rose { color: var(--v21-accent-rose); }

.step-number {
    font-size: 1.3em;
    font-weight: 800;
    margin-right: 0.3em;
}

/* ========================================
   CODE BLOCKS (CUSTOM)
   ======================================== */

pre.code-block {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1em;
    font-family: var(--v21-font-mono);
    font-size: 0.85em;
    overflow-x: auto;
    margin: 0;
    white-space: pre;
}

.code-block code {
    color: #e4e4e7;
    display: block;
}

.light-theme pre.code-block {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

.light-theme .code-block code {
    color: #27272a;
}

/* Code syntax colors */
.code-comment { color: #6b7280; }
.code-keyword { color: var(--v21-primary-400); }
.code-string { color: #34d399; }

/* ========================================
   PROMPT BOXES
   ======================================== */

.prompt-box {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-left: 4px solid var(--v21-primary-500);
    border-radius: 8px;
    padding: 0.8em 1em;
    margin: 0.6em 0;
    font-family: var(--v21-font-mono);
    font-size: 0.8em;
    line-height: 1.5;
    color: #e4e4e7;
    white-space: pre-wrap;
}

.prompt-box .prompt-label {
    display: block;
    font-size: 0.75em;
    color: var(--v21-primary-500);
    margin-bottom: 0.4em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.prompt-var { color: var(--v21-accent-cyan); }
.prompt-instruction { color: var(--v21-accent-amber); }

.light-theme .prompt-box {
    background: rgba(168, 85, 247, 0.05);
    color: #27272a;
}

/* ========================================
   WORKFLOW TIMELINE
   ======================================== */

.workflow-timeline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 1em 0;
    position: relative;
    padding: 0 1em;
}

.workflow-timeline::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 40px;
    right: 40px;
    height: 3px;
    background: linear-gradient(90deg, var(--v21-primary-500), #8b5cf6, #6366f1, var(--v21-accent-cyan), #14b8a6, var(--v21-accent-emerald));
    z-index: 0;
}

.workflow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    flex: 1;
    max-width: 100px;
}

.workflow-node .node-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2em;
    color: white;
    margin-bottom: 0.4em;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.workflow-node .node-cmd {
    font-family: var(--v21-font-mono);
    font-size: 0.75em;
    font-weight: 700;
    color: var(--v21-primary-400);
    margin-bottom: 0.2em;
}

.workflow-node .node-label {
    font-size: 0.65em;
    text-align: center;
    opacity: 0.8;
    line-height: 1.2;
}

.workflow-arrow {
    font-size: 1.2em;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0.3em;
}

.workflow-active {
    background: rgba(34, 211, 238, 0.1);
    border-radius: 8px;
    padding: 0.3em 0.6em;
}

/* ========================================
   TDD CYCLE
   ======================================== */

.tdd-cycle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    margin: 1em 0;
}

.tdd-phase {
    text-align: center;
    padding: 1em 1.5em;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.2em;
}

.tdd-red {
    background: rgba(244, 63, 94, 0.2);
    color: var(--v21-accent-rose);
    border: 2px solid var(--v21-accent-rose);
}

.tdd-green {
    background: rgba(16, 185, 129, 0.2);
    color: var(--v21-accent-emerald);
    border: 2px solid var(--v21-accent-emerald);
}

.tdd-refactor {
    background: rgba(34, 211, 238, 0.2);
    color: var(--v21-accent-cyan);
    border: 2px solid var(--v21-accent-cyan);
}

.tdd-arrow {
    font-size: 2em;
    color: rgba(255, 255, 255, 0.4);
}

/* ========================================
   PHASE INDICATORS
   ======================================== */

.phase-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.4em 1em;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9em;
    margin-bottom: 0.5em;
}

.phase-discover { background: rgba(168, 85, 247, 0.2); color: var(--v21-primary-400); }
.phase-plan { background: rgba(139, 92, 246, 0.2); color: #a78bfa; }
.phase-review { background: rgba(99, 102, 241, 0.2); color: #818cf8; }
.phase-execute { background: rgba(34, 211, 238, 0.2); color: var(--v21-accent-cyan); }
.phase-commit { background: rgba(20, 184, 166, 0.2); color: #14b8a6; }
.phase-test { background: rgba(16, 185, 129, 0.2); color: var(--v21-accent-emerald); }

/* ========================================
   AGENT FLOW DIAGRAM
   ======================================== */

.agent-flow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1em 0;
    padding: 0 2em;
}

.agent-step {
    text-align: center;
    padding: 0.8em;
    background: var(--v21-glass-bg);
    border-radius: 10px;
    border: 1px solid var(--v21-glass-border);
    flex: 1;
    max-width: 120px;
}

.agent-arrow {
    font-size: 1.5em;
    color: rgba(255, 255, 255, 0.4);
}

/* ========================================
   TASK CARDS
   ======================================== */

.task-card {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-left: 4px solid #22c55e;
    border-radius: 8px;
    padding: 1em;
    margin: 0.5em 0;
}

.task-card h4 {
    margin: 0 0 0.5em 0;
    color: #22c55e;
    font-size: 1em;
}

.task-card p,
.task-card li { font-size: 0.9em; }

/* Checklist */
.checklist {
    list-style: none;
    padding-left: 0;
}

.checklist li {
    position: relative;
    padding-left: 1.5em;
    margin: 0.3em 0;
}

.checklist li::before {
    content: '\2610';
    position: absolute;
    left: 0;
    color: #22c55e;
}

/* ========================================
   STEP COMPONENTS
   ======================================== */

.step-header {
    display: flex;
    align-items: center;
    gap: 0.8em;
    margin-bottom: 0.8em;
}

.step-badge {
    background: linear-gradient(135deg, var(--v21-primary-500), var(--v21-secondary-500));
    color: white;
    font-weight: 800;
    padding: 0.3em 0.8em;
    border-radius: 20px;
    font-size: 0.9em;
}

.step-title {
    font-size: 1.1em;
    font-weight: 600;
}

.technique-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--v21-primary-500), var(--v21-secondary-500));
    color: white;
    font-weight: 700;
    padding: 0.2em 0.6em;
    border-radius: 15px;
    font-size: 0.85em;
    margin-bottom: 0.5em;
}

/* ========================================
   WORKFLOW STEP
   ======================================== */

.workflow-step {
    display: flex;
    align-items: center;
    gap: 0.8em;
    padding: 0.8em 1em;
    background: var(--v21-glass-bg);
    border-radius: var(--v21-radius-lg);
    border: 1px solid var(--v21-glass-border);
    margin: 0.4em 0;
}

.workflow-step .step-cmd {
    font-family: var(--v21-font-mono);
    font-weight: 700;
    font-size: 1em;
    padding: 0.3em 0.6em;
    background: rgba(168, 85, 247, 0.2);
    border-radius: 6px;
    color: var(--v21-primary-400);
    white-space: nowrap;
}

.workflow-step .step-desc {
    font-size: 0.9em;
    opacity: 0.9;
}

/* ========================================
   PROMPT COMPONENT
   ======================================== */

.prompt-component {
    padding: 0.5em 1em;
    background: var(--v21-glass-bg);
    border-radius: 8px;
    margin: 0.3em 0;
    border-left: 3px solid var(--v21-accent-cyan);
}

.prompt-component h4 {
    margin: 0 0 0.3em 0;
    font-size: 0.9em;
    color: var(--v21-accent-cyan);
}

.prompt-component p {
    margin: 0;
    font-size: 0.8em;
    opacity: 0.9;
}

.comparison-bad { border-left: 3px solid var(--v21-accent-rose); }
.comparison-good { border-left: 3px solid var(--v21-accent-emerald); }

/* ========================================
   RISK METERS
   ======================================== */

.risk-meter {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: 0.5em 0;
}

.risk-bar {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.risk-fill {
    height: 100%;
    border-radius: 4px;
}

.risk-low .risk-fill { width: 25%; background: var(--v21-accent-emerald); }
.risk-medium .risk-fill { width: 50%; background: var(--v21-accent-amber); }
.risk-high .risk-fill { width: 75%; background: #ef4444; }

/* ========================================
   VISION / FILE STRUCTURE
   ======================================== */

.vision-structure {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8em;
    margin-top: 0.8em;
}

.vision-item {
    padding: 0.6em 1em;
    background: var(--v21-glass-bg);
    border-radius: 8px;
    border-left: 3px solid var(--v21-accent-cyan);
    font-size: 0.9em;
}

.vision-section {
    background: var(--v21-glass-bg);
    border-radius: 8px;
    padding: 0.6em 1em;
    margin: 0.3em 0;
    border-left: 3px solid var(--v21-accent-cyan);
}

.vision-section h4 {
    margin: 0 0 0.3em 0;
    font-size: 0.95em;
    color: var(--v21-accent-cyan);
}

.vision-section p {
    margin: 0;
    font-size: 0.85em;
    opacity: 0.9;
}

.file-structure {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 1em;
    font-family: var(--v21-font-mono);
    font-size: 0.75em;
}

.file-structure .folder { color: #fbbf24; }
.file-structure .file { color: var(--v21-accent-cyan); }
.file-structure .important { color: var(--v21-primary-500); font-weight: 700; }

/* ========================================
   PRINCIPLE GRID
   ======================================== */

.principle-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2em;
    margin-top: 0.8em;
}

/* ========================================
   GLASS CARD ENHANCEMENTS
   ======================================== */

@keyframes underlineShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.glass-card h3 {
    position: relative;
    display: inline-block;
    margin-top: 0;
    padding-left: 0;
}

.glass-card h3::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, var(--v21-primary-500), var(--v21-primary-400), var(--v21-primary-500));
    background-size: 200% 100%;
    border-radius: 1px;
    opacity: 0.5;
    animation: underlineShift 4s ease-in-out infinite;
}

/* Card-specific underline colors */
.warning-card .glass-card h3::after,
.warning-card h3::after { background: linear-gradient(90deg, var(--v21-accent-rose), #fb7185, var(--v21-accent-rose)); }
.success-card .glass-card h3::after,
.success-card h3::after { background: linear-gradient(90deg, var(--v21-accent-emerald), #34d399, var(--v21-accent-emerald)); }
.info-card .glass-card h3::after,
.info-card h3::after { background: linear-gradient(90deg, var(--v21-accent-cyan), #67e8f9, var(--v21-accent-cyan)); }
.amber-card .glass-card h3::after,
.amber-card h3::after { background: linear-gradient(90deg, var(--v21-accent-amber), #fbbf24, var(--v21-accent-amber)); }

/* Source citations */
.source {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 1em;
}

.light-theme .source {
    color: rgba(0, 0, 0, 0.6);
}

/* ========================================
   SLIDE THEME OVERRIDES
   ======================================== */

/* Remove default slide background to show body gradient */
.slide {
    background: transparent !important;
}

/* Brand image in footer - keep original colors and size */
.title-footer .brand-text-img {
    filter: none !important;
    height: 2.5em;
}

/* Center features grid for better visual balance */
.features-grid {
    justify-content: center;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Margin utilities */
.mt-1 { margin-top: 1em; }
.mt-08 { margin-top: 0.8em; }
.mt-06 { margin-top: 0.6em; }
.mt-05 { margin-top: 0.5em; }
.mt-04 { margin-top: 0.4em; }
.mt-03 { margin-top: 0.3em; }
.mt-15 { margin-top: 1.5em; }
.mb-05 { margin-bottom: 0.5em; }
.mb-03 { margin-bottom: 0.3em; }
.my-05 { margin-top: 0.5em; margin-bottom: 0.5em; }
.m-0 { margin: 0; }

/* Padding utilities */
.p-0 { padding: 0; }
.p-1 { padding: 1em; }
.p-08 { padding: 0.8em; }
.p-06 { padding: 0.6em; }
.p-05 { padding: 0.5em; }
.p-06-1 { padding: 0.6em 1em; }
.p-08-1 { padding: 0.8em 1em; }

/* Font size utilities */
.text-xs { font-size: 0.7em; }
.text-sm { font-size: 0.75em; }
.text-md { font-size: 0.8em; }
.text-base { font-size: 0.85em; }
.text-lg { font-size: 0.9em; }
.text-xl { font-size: 1.3em; }
.text-2xl { font-size: 1.5em; }
.text-3xl { font-size: 1.8em; }

/* Text alignment */
.text-center { text-align: center; }

/* Opacity utilities */
.opacity-70 { opacity: 0.7; }

/* Workflow node background colors */
.node-bg-1 { background: var(--vc-purple); }
.node-bg-2 { background: #8b5cf6; }
.node-bg-3 { background: var(--vc-indigo); }
.node-bg-4 { background: var(--vc-cyan); }
.node-bg-5 { background: var(--vc-teal); }
.node-bg-6 { background: var(--vc-emerald); }

/* Text colors (in addition to existing ones) */
.text-gray { color: #6b7280; }

/* Two-column layout helper */
.flex-between {
    display: flex;
    justify-content: space-between;
}

.w-48 {
    width: 48%;
}

/* Code/Pre utilities */
.bg-transparent { background: transparent; }
.border-none { border: none; }

/* Heading size utilities */
.h3-sm { font-size: 1em; }
.h3-md { font-size: 0.95em; }
.h4-sm { font-size: 0.9em; }

/* Font family utilities */
.font-mono { font-family: monospace; }

/* White-space utilities */
.whitespace-pre-wrap { white-space: pre-wrap; }

/* ========================================
   NO GLASSMORPHISM MODIFIER
   ======================================== */

/* Remove glassmorphism effect from first/last content slides */
.no-glass .glass-card,
.no-glass-cards .glass-card {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.light-theme .no-glass .glass-card,
.light-theme .no-glass-cards .glass-card {
    border: 1px solid rgba(0, 0, 0, 0.12);
}