/* ==========================================
   course.css — Visual Style Guide Light/Dark System
   ========================================== */

/* ==========================================
   Brand Fonts: TT Norms Pro (UI) + JetBrains Mono (code)
   ========================================== */
@font-face {
    font-family: 'TT Norms Pro';
    src: url('fonts/TTNormsPro-Regular.woff2') format('woff2'),
         url('fonts/TTNormsPro-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'TT Norms Pro';
    src: url('fonts/TTNormsPro-Medium.woff2') format('woff2'),
         url('fonts/TTNormsPro-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'TT Norms Pro';
    src: url('fonts/TTNormsPro-DemiBold.woff2') format('woff2'),
         url('fonts/TTNormsPro-DemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'TT Norms Pro';
    src: url('fonts/TTNormsPro-Bold.woff2') format('woff2'),
         url('fonts/TTNormsPro-Bold.woff') format('woff');
    font-weight: 700 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/JetBrainsMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/JetBrainsMono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* DEFAULT: aiXplain Light Mode — near-white surfaces, near-black ink, orange accent */
    --bg-dark: #f8f8f8; /* aiXplain off-white */
    --bg-card: rgba(255, 255, 255, 0.78); /* Crisp white surface */
    --border-color: rgba(9, 9, 9, 0.08); /* Faint ink border */
    --border-highlight: rgba(255, 115, 2, 0.28);

    /* Brand Colors — aiXplain butterfly gradient (deep orange → amber) leads */
    --brand-cyan: #FF7302; /* Primary accent: aiXplain deep orange */
    --brand-teal: #FFA90E; /* Secondary accent: aiXplain amber/gold */
    --brand-orange: #FF7302; /* Mirror of brand butterfly logo symbol */
    --brand-blue: #0b5394; /* aiXplain blue (categorical) */
    --brand-dark-blue: #061c2d; /* aiXplain navy */
    --brand-amber: #FFA90E;
    --brand-red: #dc2626; /* Legible red for warnings */

    /* Text colors */
    --text-primary: #090909; /* aiXplain ink */
    --text-secondary: #3a3a3a; /* Dark gray */
    --text-muted: #818181; /* aiXplain gray */
    --text-accent: #FF7302;
    
    /* Fonts */
    --font-heading: 'TT Norms Pro', 'Outfit', sans-serif;
    --font-body: 'TT Norms Pro', 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    
    /* Effects */
    --shadow-premium: 0 20px 40px -15px rgba(15, 23, 42, 0.08);
    --glass-blur: blur(14px);
    --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* DARK MODE OVERRIDES — aiXplain black + orange */
body.dark-theme {
    --bg-dark: #090909; /* aiXplain ink */
    --bg-card: rgba(22, 22, 22, 0.72);
    --border-color: rgba(255, 255, 255, 0.08);
    --border-highlight: rgba(255, 115, 2, 0.32);

    --brand-cyan: #FF8B26;
    --brand-teal: #FFA90E;
    --brand-blue: #5b9bd5;
    --brand-dark-blue: #061c2d;
    --brand-amber: #FFA90E;
    --brand-red: #ef4444;

    --text-primary: #f8f8f8;
    --text-secondary: #cfcfcf;
    --text-muted: #818181;
    --text-accent: #FFA90E;

    --shadow-premium: 0 25px 50px -12px rgba(0, 0, 0, 0.85);
}

/* Base resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: var(--font-body);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* Background Grids & Ambient Glow Layers */
.bg-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(rgba(15, 23, 42, 0.015) 1px, transparent 0),
        linear-gradient(to bottom, rgba(255, 115, 2, 0.012) 1px, transparent 1px),
        linear-gradient(to right, rgba(255, 115, 2, 0.012) 1px, transparent 1px);
    background-size: 24px 24px, 48px 48px, 48px 48px;
    pointer-events: none;
    z-index: 1;
}

body.dark-theme .bg-grid-overlay {
    background-image: 
        radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 0),
        linear-gradient(to bottom, rgba(255, 115, 2, 0.008) 1px, transparent 1px),
        linear-gradient(to right, rgba(255, 115, 2, 0.008) 1px, transparent 1px);
}

.bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(150px);
    opacity: 0.14;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: multiply; /* warm orange tint on the off-white paper */
    transition: opacity 0.4s ease;
}

body.dark-theme .bg-glow {
    opacity: 0.16;
    mix-blend-mode: screen; /* orange glow on aiXplain black */
}

.bg-glow-1 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, var(--brand-cyan) 0%, transparent 70%);
    top: -200px;
    left: -150px;
    animation: floatGlow 15s ease-in-out infinite alternate;
}

.bg-glow-2 {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, var(--brand-teal) 0%, transparent 70%);
    bottom: -250px;
    right: -150px;
    animation: floatGlow 20s ease-in-out infinite alternate-reverse;
}

@keyframes floatGlow {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(80px, 40px) scale(1.1); }
}

/* ==========================================
   Deck Container
   ========================================== */
.deck-container {
    width: 94vw;
    height: 82vh;
    max-width: 1400px;
    max-height: 800px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-premium);
    z-index: 10;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: var(--transition-smooth);
}

.deck-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--brand-orange), var(--brand-teal), transparent);
    z-index: 15;
}

/* ==========================================
   Deck Header
   ========================================== */
.deck-header {
    height: 60px;
    border-bottom: 1px solid var(--border-color);
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 20;
    background: rgba(248, 250, 252, 0.5);
    transition: background-color 0.4s ease;
}

body.dark-theme .deck-header {
    background: rgba(5, 8, 17, 0.4);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-pill {
    background: #ffffff;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, 0.05);
    display: flex;
    align-items: center;
    height: 32px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
    transition: var(--transition-smooth);
}

.brand:hover .brand-pill {
    transform: scale(1.03);
    border-color: rgba(255, 115, 2, 0.15);
    box-shadow: 0 4px 12px rgba(255, 115, 2, 0.05);
}

.brand-logo-img {
    height: 18px;
    width: auto;
    display: block;
}

.brand .badge {
    font-family: var(--font-body);
    font-size: 0.62rem;
    background: rgba(255, 115, 2, 0.08);
    color: var(--brand-cyan);
    padding: 2px 8px;
    border: 1px solid rgba(255, 115, 2, 0.15);
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.deck-title {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.controls-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-btn {
    background: rgba(15, 23, 42, 0.02);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

body.dark-theme .nav-btn {
    background: rgba(255, 255, 255, 0.02);
}

.nav-btn:hover {
    background: rgba(255, 115, 2, 0.08);
    border-color: var(--brand-cyan);
    color: var(--brand-cyan);
}

body.dark-theme .nav-btn:hover {
    background: rgba(255, 115, 2, 0.1);
}

.slide-indicator {
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font-heading);
    color: var(--text-secondary);
    min-width: 45px;
    text-align: center;
}

/* ==========================================
   Slide Stage & Animation Engine
   ========================================== */
.slide-stage {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.slide-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 35px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: 
        opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.4s;
    z-index: 10;
}

.slide-card.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 15;
}

.slide-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Slide typography */
.slide-category {
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: var(--brand-cyan);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 5px;
    display: inline-block;
}

.slide-title {
    font-family: var(--font-heading);
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.slide-subtitle {
    font-size: 1.08rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: 8px;
}

.slide-desc {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin-top: 8px;
}

.text-teal { color: var(--brand-teal); }
.text-cyan { color: var(--brand-cyan); }
.text-orange { color: var(--brand-orange); }
.text-center { text-align: center; }

.bullet-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bullet-item {
    display: flex;
    gap: 10px;
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.bullet-icon {
    color: var(--brand-cyan);
    font-size: 0.95rem;
    margin-top: 3px;
}

/* Grid Layouts */
.grid-2col-layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    align-items: center;
    height: 100%;
}

.left-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.right-panel {
    height: 100%;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================
   SLIDE 1: Cover Slide
   ========================================== */
.cover-layout {
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding-left: 64px;
    padding-right: 64px;
}

.kicker {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    color: #111111;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
    background: rgba(255, 122, 0, 0.12);
    padding: 4px 14px;
    border: 1px solid rgba(255, 122, 0, 0.22);
    border-radius: 20px;
}

.giant-title {
    font-size: 3.5rem;
    letter-spacing: -1.5px;
    background: linear-gradient(135deg, #111111 52%, var(--brand-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.05;
}

body.dark-theme .giant-title {
    background: linear-gradient(135deg, #ffffff 52%, var(--brand-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cover-layout .slide-subtitle {
    font-size: 1.15rem;
    max-width: 600px;
    margin-top: 15px;
    margin-bottom: 0;
}

.cover-meta {
    display: grid;
    gap: 8px;
    margin-top: 28px;
}

.cover-meta-line {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ==========================================
   SLIDE 2: Workshop Purpose
   ========================================== */
.purpose-layout {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 34px;
    align-items: center;
    height: 100%;
}

.purpose-frame {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.46) 100%);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

body.dark-theme .purpose-frame {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.012) 100%);
    box-shadow: none;
}

.purpose-frame-header {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 16px;
}

.purpose-pill-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.purpose-pill {
    background: rgba(15, 23, 42, 0.025);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
}

body.dark-theme .purpose-pill {
    background: rgba(255, 255, 255, 0.02);
}

.purpose-pill i {
    color: var(--brand-orange);
}

.purpose-deliverables {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.purpose-deliverable-card {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 115, 2, 0.12);
    border-radius: 12px;
    padding: 12px 14px;
}

body.dark-theme .purpose-deliverable-card {
    background: rgba(255, 255, 255, 0.018);
}

.purpose-deliverable-card strong {
    font-family: var(--font-heading);
    font-size: 0.86rem;
    color: var(--text-primary);
    display: block;
    margin-bottom: 4px;
}

.purpose-deliverable-card p {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.mini-label {
    display: inline-block;
    margin-bottom: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--brand-cyan);
}

/* ==========================================
   SLIDE 3: Audience & Objectives
   ========================================== */
.audience-layout {
    justify-content: flex-start;
    gap: 10px;
    height: 100%;
}

.audience-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: start;
    margin-top: 6px;
}

.audience-card {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 13px 14px;
}

body.dark-theme .audience-card {
    background: rgba(255, 255, 255, 0.015);
}

.audience-card-wide {
    width: 100%;
}

.audience-role-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
}

.audience-role {
    background: rgba(255, 122, 0, 0.08);
    border: 1px solid rgba(255, 122, 0, 0.16);
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--brand-orange);
    white-space: nowrap;
}

.audience-note {
    margin-top: 12px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.42;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

body.dark-theme .audience-note {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.objective-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.objective-item {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    align-items: start;
}

body.dark-theme .objective-item {
    background: rgba(255, 255, 255, 0.015);
}

.objective-item-wide {
    grid-column: span 2;
}

.objective-num {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 115, 2, 0.08);
    border: 1px solid rgba(255, 115, 2, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--brand-cyan);
}

.objective-item p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.34;
}

/* ==========================================
   SLIDE 4: Agenda
   ========================================== */
.agenda-layout {
    justify-content: flex-start;
    gap: 12px;
    height: 100%;
}

.agenda-table {
    display: grid;
    grid-template-columns: 1fr 1.85fr;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

body.dark-theme .agenda-table {
    background: rgba(255, 255, 255, 0.015);
}

.agenda-header {
    padding: 12px 16px;
    font-family: var(--font-heading);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--brand-teal);
    background: rgba(255, 169, 14, 0.05);
    border-bottom: 1px solid rgba(255, 169, 14, 0.12);
}

body.dark-theme .agenda-header {
    background: rgba(255, 169, 14, 0.05);
}

.agenda-cell {
    padding: 13px 16px;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    display: flex;
    align-items: center;
}

body.dark-theme .agenda-cell {
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

.agenda-module {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-primary);
}

/* ==========================================
   SLIDE 21: Production Readiness
   ========================================== */
.production-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.production-main {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 14px;
    min-height: 0;
    flex: 1;
    align-items: start;
}

.production-table {
    display: grid;
    grid-template-columns: 0.9fr 1.7fr;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.52);
    margin-top: 4px;
}

body.dark-theme .production-table {
    background: rgba(255, 255, 255, 0.015);
}

.production-header {
    padding: 9px 13px;
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--brand-teal);
    background: rgba(255, 169, 14, 0.05);
    border-bottom: 1px solid rgba(255, 169, 14, 0.12);
}

.production-cell {
    padding: 9px 13px;
    font-size: 0.74rem;
    line-height: 1.32;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    display: flex;
    align-items: center;
}

body.dark-theme .production-cell {
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

.production-label {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-primary);
    height: 100%;
}

.production-card {
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 14px 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.dark-theme .production-card {
    background: rgba(255, 255, 255, 0.018);
}

.production-card-header {
    font-family: var(--font-heading);
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-primary);
}

.production-points {
    display: grid;
    gap: 7px;
}

.production-point {
    font-size: 0.72rem;
    line-height: 1.32;
    color: var(--text-secondary);
    padding-left: 14px;
    position: relative;
}

.production-point::before {
    content: "";
    position: absolute;
    top: 0.42rem;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-cyan);
    box-shadow: 0 0 0 3px rgba(255, 115, 2, 0.12);
}

.production-bottomline,
.production-proofline {
    border-radius: 12px;
    padding: 10px 12px;
}

.production-bottomline {
    margin-top: auto;
    background: rgba(249, 115, 22, 0.07);
    border: 1px solid rgba(249, 115, 22, 0.16);
    font-size: 0.7rem;
    line-height: 1.32;
    color: var(--text-secondary);
}

.production-proofline {
    background: rgba(255, 115, 2, 0.05);
    border: 1px solid rgba(255, 115, 2, 0.14);
    font-size: 0.7rem;
    line-height: 1.32;
    color: var(--text-secondary);
}

.production-bottomline strong,
.production-proofline strong {
    color: var(--text-primary);
    font-family: var(--font-heading);
}

.production-card-cycle {
    align-items: center;
    justify-content: flex-start;
}

.production-cycle-board {
    position: relative;
    width: 228px;
    height: 198px;
    margin: 0 auto;
}

.production-orbit {
    position: absolute;
    inset: 18px 20px;
    border: 1.5px dashed rgba(15, 23, 42, 0.08);
    border-radius: 50%;
}

body.dark-theme .production-orbit {
    border-color: rgba(255, 255, 255, 0.08);
}

.production-core,
.production-step {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.production-core {
    top: 50%;
    left: 50%;
    width: 78px;
    height: 78px;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(224, 242, 254, 0.92) 100%);
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--brand-cyan);
    z-index: 2;
}

body.dark-theme .production-core {
    background: linear-gradient(180deg, rgba(8, 47, 73, 0.9) 0%, rgba(12, 74, 110, 0.78) 100%);
}

.production-step {
    background: rgba(255, 255, 255, 0.94);
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-primary);
    padding: 0 11px;
    height: 30px;
    z-index: 3;
}

body.dark-theme .production-step {
    background: rgba(15, 23, 42, 0.92);
}

.production-step-top {
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
}

.production-step-right-top {
    top: 36px;
    right: 0;
}

.production-step-right-bottom {
    bottom: 32px;
    right: 4px;
}

.production-step-left-bottom {
    bottom: 32px;
    left: 4px;
}

.production-step-left-top {
    top: 36px;
    left: 0;
}

.production-cycle-caption {
    font-size: 0.68rem;
    line-height: 1.32;
    color: var(--text-secondary);
    text-align: center;
    max-width: 260px;
}

/* ==========================================
   SLIDE 2: Maturity Arc
   ========================================== */
.maturity-arc-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 440px;
}

.arc-step {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    transition: var(--transition-smooth);
}

body.dark-theme .arc-step {
    background: rgba(255, 255, 255, 0.015);
}

.arc-badge {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    background: rgba(15, 23, 42, 0.03);
    border: 1px solid var(--border-color);
    width: 60px;
    height: 22px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
}

body.dark-theme .arc-badge {
    background: rgba(255, 255, 255, 0.03);
}

.arc-content h4 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
}

.arc-content p {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.arc-step:hover {
    transform: translateX(6px);
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(15, 23, 42, 0.15);
}

body.dark-theme .arc-step:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

.highlight-step {
    background: linear-gradient(90deg, rgba(255, 169, 14, 0.06) 0%, rgba(255, 255, 255, 0.6) 100%);
    border-color: rgba(255, 169, 14, 0.25);
}

body.dark-theme .highlight-step {
    background: linear-gradient(90deg, rgba(255, 169, 14, 0.06) 0%, rgba(10, 15, 28, 0.3) 100%);
}

.highlight-step .arc-badge {
    background: var(--brand-teal);
    color: #fff;
    border-color: var(--brand-teal);
}

/* ==========================================
   SLIDE 3: Outcome Cards
   ========================================== */
.outcome-layout {
    justify-content: space-between;
    height: 100%;
}

.three-cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 15px;
}

.outcome-card {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    transition: var(--transition-smooth);
}

body.dark-theme .outcome-card {
    background: rgba(255, 255, 255, 0.015);
}

.outcome-card-icon {
    font-size: 1.6rem;
    color: var(--brand-orange);
    margin-bottom: 15px;
}

.outcome-card h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.outcome-card p {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.outcome-card:hover {
    transform: translateY(-4px);
    border-color: rgba(15, 23, 42, 0.15);
    background: rgba(255, 255, 255, 0.85);
}

body.dark-theme .outcome-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.025);
}

.highlight-outcome {
    background: linear-gradient(135deg, rgba(255, 115, 2, 0.05) 0%, rgba(255, 255, 255, 0.6) 100%);
    border-color: rgba(255, 115, 2, 0.25);
}

body.dark-theme .highlight-outcome {
    background: linear-gradient(135deg, rgba(255, 115, 2, 0.05) 0%, rgba(10, 15, 28, 0.4) 100%);
    border-color: rgba(255, 115, 2, 0.2);
}

/* ==========================================
   SLIDE 4: Taxonomy Columns
   ========================================== */
.taxonomy-layout {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    height: 100%;
}

#slide-6 .taxonomy-layout {
    transform: translateY(-6px) scale(0.97);
    transform-origin: top center;
}

.taxonomy-columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 6px;
}

.taxonomy-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.taxonomy-card {
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 15px 14px 13px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    transition: var(--transition-smooth);
}

body.dark-theme .taxonomy-card {
    background: rgba(255, 255, 255, 0.018);
    box-shadow: none;
}

.taxonomy-card:hover {
    transform: translateY(-4px);
    border-color: rgba(15, 23, 42, 0.14);
    background: rgba(255, 255, 255, 0.84);
}

body.dark-theme .taxonomy-card:hover {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.taxonomy-card-accent-cyan {
    background: linear-gradient(180deg, rgba(255, 115, 2, 0.07) 0%, rgba(255, 255, 255, 0.62) 100%);
    border-color: rgba(255, 115, 2, 0.24);
}

body.dark-theme .taxonomy-card-accent-cyan {
    background: linear-gradient(180deg, rgba(255, 115, 2, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.taxonomy-card-accent-teal {
    background: linear-gradient(180deg, rgba(255, 169, 14, 0.07) 0%, rgba(255, 255, 255, 0.62) 100%);
    border-color: rgba(255, 169, 14, 0.24);
}

body.dark-theme .taxonomy-card-accent-teal {
    background: linear-gradient(180deg, rgba(255, 169, 14, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.taxonomy-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

body.dark-theme .taxonomy-card-header {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.taxonomy-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 122, 0, 0.08);
    border: 1px solid rgba(255, 122, 0, 0.16);
    color: var(--brand-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.taxonomy-kicker {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--brand-cyan);
    margin-bottom: 3px;
}

.taxonomy-card h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.taxonomy-meta {
    padding: 8px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

body.dark-theme .taxonomy-meta {
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

.taxonomy-meta:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.taxonomy-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.taxonomy-meta p {
    font-size: 0.72rem;
    line-height: 1.34;
    color: var(--text-secondary);
}

.agent-types-layout {
    justify-content: space-between;
    height: 100%;
}

.agent-types-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 12px;
}

.workshop-focus-callout {
    margin-top: 8px;
}

/* Generic table grammar reused by later comparison slides */
.taxonomy-table {
    display: grid;
    grid-template-columns: 1.1fr 1.6fr 1.3fr 1.3fr 1.3fr;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.5);
    margin-top: 15px;
}

body.dark-theme .taxonomy-table {
    background: rgba(7, 10, 19, 0.4);
}

.table-header {
    background: rgba(15, 23, 42, 0.02);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--brand-teal);
    padding: 10px 14px;
}

body.dark-theme .table-header {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--brand-cyan);
}

.table-cell {
    padding: 12px 14px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
    line-height: 1.35;
    display: flex;
    align-items: center;
}

body.dark-theme .table-cell {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.row-header {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    gap: 6px;
    background: rgba(15, 23, 42, 0.005);
}

body.dark-theme .row-header {
    background: rgba(255, 255, 255, 0.005);
}

/* ==========================================
   SLIDE 5: Chatbot vs Agent Lanes
   ========================================== */
.contrast-intro {
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.quote-box {
    background: rgba(255, 169, 14, 0.05);
    border-left: 2px solid var(--brand-teal);
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

.quote-icon {
    color: var(--brand-teal);
    font-size: 0.85rem;
    margin-top: 3px;
}

.quote-box p {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
    font-style: italic;
}

.lanes-container {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 15px;
}

.lane-box {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

body.dark-theme .lane-box {
    background: rgba(255, 255, 255, 0.01);
}

.lane-header {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 15px;
    text-align: center;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    padding-bottom: 8px;
}

body.dark-theme .lane-header {
    border-bottom-color: rgba(255, 255, 255, 0.03);
}

.lane-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    justify-content: center;
}

.flow-node {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.72rem;
    padding: 6px 12px;
    text-align: center;
    width: 100%;
    max-width: 170px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
}

body.dark-theme .flow-node {
    background: rgba(255, 255, 255, 0.02);
    box-shadow: none;
}

.flow-connector {
    color: rgba(15, 23, 42, 0.15);
    font-size: 0.7rem;
    margin: 4px 0;
}

body.dark-theme .flow-connector {
    color: rgba(255, 255, 255, 0.1);
}

.flow-node.highlight-cyan {
    background: rgba(255, 115, 2, 0.06);
    border-color: rgba(255, 115, 2, 0.2);
    color: var(--brand-cyan);
    font-weight: 600;
}

.flow-node.highlight-teal {
    background: rgba(255, 169, 14, 0.06);
    border-color: rgba(255, 169, 14, 0.2);
    color: var(--brand-teal);
    font-weight: 600;
}

.flow-node.stop-node {
    border-color: rgba(239, 68, 68, 0.25);
    color: var(--brand-red);
    font-weight: 500;
}

.highlight-lane {
    background: linear-gradient(180deg, rgba(255, 169, 14, 0.03) 0%, rgba(255, 255, 255, 0.5) 100%);
    border-color: rgba(255, 169, 14, 0.2);
}

body.dark-theme .highlight-lane {
    background: linear-gradient(180deg, rgba(255, 169, 14, 0.04) 0%, rgba(10, 15, 28, 0.3) 100%);
}

.highlight-lane .lane-header {
    color: var(--brand-teal);
}

/* ==========================================
   SLIDE 6: Agent Loop Circle
   ========================================== */
.loop-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 30px;
    height: 100%;
    align-items: center;
}

.loop-left {
    display: flex;
    flex-direction: column;
}

.highlight-callout {
    margin-top: 20px;
    background: rgba(255, 115, 2, 0.03);
    border: 1px solid rgba(255, 115, 2, 0.12);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    gap: 12px;
}

.callout-icon {
    font-size: 1.3rem;
    color: var(--brand-cyan);
    margin-top: 2px;
}

.highlight-callout strong {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    color: var(--text-primary);
    display: block;
    margin-bottom: 2px;
}

.highlight-callout span {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.35;
    display: block;
}

.loop-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Loop Diagram Styling */
.circle-diagram {
    position: relative;
    width: 320px;
    height: 320px;
    border: 1.5px dashed rgba(15, 23, 42, 0.06);
    border-radius: 50%;
}

body.dark-theme .circle-diagram {
    border-color: rgba(255, 255, 255, 0.05);
}

.loop-return-arrow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 8;
    pointer-events: none;
}

.loop-return-arrow path {
    fill: none;
    stroke: rgba(255, 115, 2, 0.75);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.dark-theme .loop-return-arrow path {
    stroke: rgba(255, 169, 14, 0.82);
}

.circle-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}

body.dark-theme .circle-center {
    background: var(--bg-dark);
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.center-brand {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--brand-cyan);
}

.center-sub {
    font-size: 0.55rem;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
}

.circle-node {
    position: absolute;
    width: 90px;
    height: 90px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    z-index: 12;
    transition: var(--transition-smooth);
    padding: 6px;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04);
}

body.dark-theme .circle-node {
    background: rgba(13, 18, 33, 0.9);
    box-shadow: none;
}

.circle-node:hover {
    border-color: rgba(15, 23, 42, 0.2);
    transform: scale(1.06);
}

body.dark-theme .circle-node:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.node-num {
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-muted);
}

.node-title {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1.2;
    margin-top: 2px;
}

/* Circle Positions */
.pos-1 { top: -45px; left: calc(50% - 45px); }
.pos-2 { top: 35px; right: -40px; }
.pos-3 { bottom: 35px; right: -40px; }
.pos-4 { bottom: -45px; left: calc(50% - 45px); }
.pos-5 { bottom: 35px; left: -40px; }
.pos-6 { top: 35px; left: -40px; }

/* Inspect highlighted node */
.pos-inspect {
    border-color: rgba(255, 115, 2, 0.35);
    background: linear-gradient(135deg, rgba(255, 115, 2, 0.15) 0%, rgba(255, 169, 14, 0.05) 100%);
    box-shadow: 0 0 25px rgba(255, 115, 2, 0.15);
}

.pos-inspect .node-num {
    color: var(--brand-cyan);
}

.pos-inspect .node-title {
    color: var(--text-primary);
}

/* ==========================================
   SLIDE 6: Agent Orchestration Patterns
   ========================================== */
.orchestration-layout {
    justify-content: space-between;
    height: 100%;
}

.orchestration-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 16px;
}

.orchestration-card {
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
}

body.dark-theme .orchestration-card {
    background: rgba(255, 255, 255, 0.018);
    box-shadow: none;
}

.orchestration-card-teal {
    border-color: rgba(255, 169, 14, 0.18);
    background: linear-gradient(180deg, rgba(255, 169, 14, 0.05) 0%, rgba(255, 255, 255, 0.56) 100%);
}

.orchestration-card-cyan {
    border-color: rgba(255, 115, 2, 0.18);
    background: linear-gradient(180deg, rgba(255, 115, 2, 0.05) 0%, rgba(255, 255, 255, 0.56) 100%);
}

body.dark-theme .orchestration-card-teal,
body.dark-theme .orchestration-card-cyan {
    background: rgba(255, 255, 255, 0.022);
}

.orchestration-header {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

.orchestration-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.04);
    color: var(--brand-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

body.dark-theme .orchestration-icon {
    background: rgba(255, 255, 255, 0.04);
}

.orchestration-header h3 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--text-primary);
}

.orchestration-desc {
    font-size: 0.84rem;
    line-height: 1.48;
    color: var(--text-secondary);
    min-height: 68px;
}

.orchestration-diagram {
    position: relative;
    height: 126px;
    margin: 14px 0 16px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.05);
    background: rgba(255, 255, 255, 0.68);
    overflow: hidden;
}

body.dark-theme .orchestration-diagram {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.05);
}

.single-agent-core,
.single-agent-tool,
.supervisor-node,
.worker-node,
.swarm-node {
    position: absolute;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.65rem;
    text-align: center;
    z-index: 2;
}

.single-agent-core {
    inset: 0;
    margin: auto;
    width: 78px;
    height: 78px;
    background: rgba(255, 169, 14, 0.1);
    border: 1px solid rgba(255, 169, 14, 0.22);
    color: var(--brand-teal);
    box-shadow: 0 0 0 12px rgba(255, 169, 14, 0.04);
}

.single-agent-tool {
    width: 54px;
    height: 28px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: var(--text-secondary);
}

body.dark-theme .single-agent-tool {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.single-agent-diagram::before,
.single-agent-diagram::after {
    content: "";
    position: absolute;
    background: rgba(255, 169, 14, 0.18);
}

.single-agent-diagram::before {
    width: 2px;
    height: 72px;
    top: 27px;
    left: calc(50% - 1px);
}

.single-agent-diagram::after {
    width: 116px;
    height: 2px;
    top: calc(50% - 1px);
    left: calc(50% - 58px);
}

.tool-a { top: 14px; left: calc(50% - 27px); }
.tool-b { top: calc(50% - 14px); left: 14px; }
.tool-c { top: calc(50% - 14px); right: 14px; }

.supervisor-node {
    top: 16px;
    left: calc(50% - 44px);
    width: 88px;
    height: 32px;
    background: rgba(255, 169, 14, 0.12);
    border: 1px solid rgba(255, 169, 14, 0.24);
    color: var(--brand-teal);
}

.supervisor-line {
    position: absolute;
    width: 2px;
    height: 30px;
    background: rgba(255, 169, 14, 0.22);
    top: 48px;
}

.line-left { left: 52px; }
.line-center { left: calc(50% - 1px); }
.line-right { right: 52px; }

.worker-row {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.worker-node {
    position: relative;
    width: 100%;
    height: 32px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: var(--text-secondary);
}

body.dark-theme .worker-node {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.swarm-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.swarm-lines path {
    fill: none;
    stroke: rgba(255, 115, 2, 0.22);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.swarm-node {
    width: 56px;
    height: 30px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 115, 2, 0.16);
    color: var(--text-secondary);
}

body.dark-theme .swarm-node {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 115, 2, 0.18);
}

.swarm-a { top: 12px; left: 14px; }
.swarm-b { top: 6px; left: calc(50% - 28px); }
.swarm-c { top: 26px; right: 14px; }
.swarm-d { bottom: 12px; right: 42px; }
.swarm-e { bottom: 14px; left: 44px; }

.orchestration-points {
    display: grid;
    gap: 8px;
}

.orchestration-point {
    position: relative;
    padding-left: 14px;
    font-size: 0.72rem;
    line-height: 1.42;
    color: var(--text-secondary);
}

.orchestration-point::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-cyan);
}

.orchestration-callout {
    margin-top: 16px;
}

/* ==========================================
   SLIDE 7: Agency Example
   ========================================== */
.example-layout {
    justify-content: space-between;
    height: 100%;
}

.example-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 24px;
    margin-top: 10px;
}

.example-card {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

body.dark-theme .example-card {
    background: rgba(255, 255, 255, 0.015);
}

.comp-header {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.chatbot-comp .comp-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    padding-bottom: 4px;
}

body.dark-theme .chatbot-comp .comp-header {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.agent-comp .comp-header {
    border-bottom: 1px solid rgba(255, 169, 14, 0.15);
    color: var(--brand-teal);
    padding-bottom: 4px;
}

.comp-desc {
    font-size: 0.83rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.comp-result {
    font-size: 0.7rem;
    margin-top: 12px;
    font-weight: 600;
}

.chatbot-comp .comp-result { color: var(--brand-amber); }
.agent-comp .comp-result { color: var(--brand-teal); }

.agent-comp {
    background: linear-gradient(135deg, rgba(255, 169, 14, 0.03) 0%, rgba(255, 255, 255, 0.5) 100%);
    border-color: rgba(255, 169, 14, 0.2);
}

body.dark-theme .agent-comp {
    background: linear-gradient(135deg, rgba(255, 169, 14, 0.04) 0%, rgba(10, 15, 28, 0.3) 100%);
}

/* Horizontal Timeline flow */
.horizontal-flow-container {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 20px;
    justify-content: space-between;
    margin-top: 20px;
}

body.dark-theme .horizontal-flow-container {
    background: rgba(7, 10, 19, 0.3);
}

.flow-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.step-badge {
    font-family: var(--font-heading);
    font-size: 0.6rem;
    background: rgba(15, 23, 42, 0.03);
    border: 1px solid var(--border-color);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.flow-line {
    height: 1px;
    flex: 1;
    background: rgba(15, 23, 42, 0.08);
    margin: 0 10px;
}

body.dark-theme .flow-line {
    background: rgba(255, 255, 255, 0.05);
}

.flow-step.highlight-step {
    color: var(--brand-teal);
}

.flow-step.highlight-step .step-badge {
    background: var(--brand-teal);
    color: white;
    border-color: var(--brand-teal);
}

/* ==========================================
   SLIDE 8: Red Warnings Layout
   ========================================== */
.wrong-layout {
    justify-content: space-between;
    height: 100%;
}

.wrong-card {
    background: rgba(239, 68, 68, 0.015);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--brand-red);
    border-radius: 8px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: var(--transition-smooth);
}

body.dark-theme .wrong-card {
    background: rgba(255, 255, 255, 0.015);
}

.wrong-card:hover {
    transform: translateY(-3px);
    background: rgba(239, 68, 68, 0.03);
    border-color: rgba(239, 68, 68, 0.2);
    border-left-color: var(--brand-red);
}

body.dark-theme .wrong-card:hover {
    background: rgba(239, 68, 68, 0.015);
}

.wrong-badge {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--brand-red);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}

.wrong-assumption {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.wrong-fail {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-bottom: 12px;
}

.wrong-better {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(15, 23, 42, 0.04);
    border-radius: 6px;
    padding: 8px 10px;
}

body.dark-theme .wrong-better {
    background: rgba(7, 10, 19, 0.4);
    border-color: rgba(255, 255, 255, 0.02);
}

.wrong-better strong {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    color: var(--brand-teal);
    display: block;
    margin-bottom: 2px;
}

.wrong-better span {
    font-size: 0.76rem;
    color: var(--text-secondary);
    line-height: 1.3;
    display: block;
}

/* ==========================================
   SLIDE 9: RAG 3D Stack Diagram
   ========================================== */
.stack-diagram-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 440px;
}

.stack-block {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    height: 38px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    transition: var(--transition-smooth);
}

body.dark-theme .stack-block {
    background: rgba(255, 255, 255, 0.015);
}

.stack-block::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    transition: var(--transition-smooth);
}

.stack-block:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: translateX(5px);
}

body.dark-theme .stack-block:hover {
    background: rgba(255, 255, 255, 0.03);
}

.block-num {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
}

.block-text {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Gradient stacking coloring from bottom to top */
.pos-1 { border-color: rgba(255, 169, 14, 0.1); }
.pos-1::before { background: rgba(255, 169, 14, 0.3); }

.pos-2 { border-color: rgba(255, 169, 14, 0.15); }
.pos-2::before { background: rgba(255, 169, 14, 0.5); }

.pos-3 { border-color: rgba(255, 169, 14, 0.2); }
.pos-3::before { background: var(--brand-teal); }

.pos-4 { border-color: rgba(255, 115, 2, 0.2); }
.pos-4::before { background: var(--brand-cyan); }

.pos-5 { 
    background: linear-gradient(90deg, rgba(255, 115, 2, 0.08) 0%, rgba(255, 255, 255, 0.5) 100%);
    border-color: rgba(255, 115, 2, 0.3); 
    box-shadow: 0 0 15px rgba(255, 115, 2, 0.08);
}
body.dark-theme .pos-5 {
    background: linear-gradient(90deg, rgba(255, 115, 2, 0.08) 0%, rgba(10, 15, 28, 0.3) 100%);
}
.pos-5::before { background: var(--brand-cyan); }
.pos-5 .block-num { color: var(--brand-cyan); }
.pos-5 .block-text { color: var(--text-primary); }

.rag-flow-diagram {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    max-width: 430px;
}

.rag-flow-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid var(--border-color);
}

body.dark-theme .rag-flow-step {
    background: rgba(255, 255, 255, 0.02);
}

.rag-flow-step-final {
    background: linear-gradient(90deg, rgba(255, 115, 2, 0.08) 0%, rgba(255, 255, 255, 0.58) 100%);
    border-color: rgba(255, 115, 2, 0.22);
}

body.dark-theme .rag-flow-step-final {
    background: linear-gradient(90deg, rgba(255, 115, 2, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.rag-flow-num {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--brand-cyan);
    background: rgba(255, 115, 2, 0.08);
    border: 1px solid rgba(255, 115, 2, 0.16);
    flex-shrink: 0;
}

.rag-flow-text {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
}

.rag-flow-arrow {
    display: flex;
    justify-content: center;
    color: var(--brand-orange);
    font-size: 0.9rem;
}

.rag-flow-caption {
    margin-top: 8px;
    font-size: 0.72rem;
    line-height: 1.38;
    color: var(--text-secondary);
    text-align: center;
}

/* ==========================================
   SLIDE 10: Two-Agent RAG Pattern
   ========================================== */
.rag-agents-layout {
    justify-content: space-between;
    height: 100%;
}

.rag-agents-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.65fr 1.2fr;
    gap: 18px;
    align-items: center;
    margin-top: 18px;
}

.rag-agent-card {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px;
    min-height: 274px;
}

body.dark-theme .rag-agent-card {
    background: rgba(255, 255, 255, 0.018);
}

.rag-agent-card-cyan {
    border-color: rgba(255, 115, 2, 0.18);
    background: linear-gradient(180deg, rgba(255, 115, 2, 0.04) 0%, rgba(255, 255, 255, 0.58) 100%);
}

body.dark-theme .rag-agent-card-cyan {
    background: rgba(255, 255, 255, 0.02);
}

.rag-agent-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.rag-agent-pill {
    display: inline-flex;
    align-self: flex-start;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 169, 14, 0.08);
    border: 1px solid rgba(255, 169, 14, 0.16);
    color: var(--brand-teal);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.rag-agent-header h3 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--text-primary);
}

.rag-agent-desc {
    font-size: 0.76rem;
    line-height: 1.48;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.rag-agent-flow {
    display: grid;
    gap: 10px;
}

.rag-agent-step {
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.35;
}

body.dark-theme .rag-agent-step {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.05);
}

.highlight-rag-step {
    border-color: rgba(255, 169, 14, 0.18);
    background: rgba(255, 169, 14, 0.06);
    color: var(--brand-teal);
}

.rag-kb-hub {
    position: relative;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.rag-kb-hub::before,
.rag-kb-hub::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 70px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 169, 14, 0.15), rgba(255, 115, 2, 0.35));
}

.rag-kb-hub::before {
    left: -44px;
}

.rag-kb-hub::after {
    right: -44px;
    transform: scaleX(-1);
}

.rag-kb-core {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 115, 2, 0.16), rgba(255, 169, 14, 0.05));
    border: 1px solid rgba(255, 115, 2, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 14px 34px rgba(255, 115, 2, 0.08);
    text-align: center;
}

body.dark-theme .rag-kb-core {
    box-shadow: none;
}

.rag-kb-core i {
    font-size: 1.2rem;
    color: var(--brand-cyan);
}

.rag-kb-core span {
    font-family: var(--font-heading);
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    max-width: 100px;
}

.rag-kb-caption {
    margin-top: 10px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
}

.rag-callout {
    margin-top: 8px;
}

/* ==========================================
   SLIDE 11: MCP Practical Comparison
   ========================================== */
.mcp-practical-layout {
    justify-content: space-between;
    height: 100%;
    gap: 8px;
}

#slide-19 .mcp-practical-layout {
    transform: translateY(-6px) scale(0.97);
    transform-origin: top center;
}

.mcp-practical-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 8px;
    align-items: start;
}

.mcp-practical-card {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 15px 16px;
}

body.dark-theme .mcp-practical-card {
    background: rgba(255, 255, 255, 0.018);
}

.mcp-practical-card-teal {
    border-color: rgba(255, 169, 14, 0.18);
    background: linear-gradient(180deg, rgba(255, 169, 14, 0.05) 0%, rgba(255, 255, 255, 0.58) 100%);
}

body.dark-theme .mcp-practical-card-teal {
    background: rgba(255, 255, 255, 0.022);
}

.mcp-practical-header {
    font-family: var(--font-heading);
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.mcp-practical-desc,
.mcp-practical-note {
    font-size: 0.72rem;
    line-height: 1.38;
    color: var(--text-secondary);
}

.mcp-practical-label {
    margin-top: 10px;
    margin-bottom: 6px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--brand-teal);
}

.mcp-practical-list {
    display: grid;
    gap: 6px;
}

.mcp-practical-item {
    position: relative;
    padding-left: 14px;
    font-size: 0.69rem;
    line-height: 1.34;
    color: var(--text-secondary);
}

.mcp-practical-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-cyan);
}

.mcp-arch-diagram {
    display: grid;
    gap: 7px;
    padding: 10px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.42);
}

body.dark-theme .mcp-arch-diagram {
    background: rgba(255, 255, 255, 0.015);
    border-color: rgba(255, 255, 255, 0.05);
}

.mcp-arch-diagram-teal {
    border-color: rgba(255, 169, 14, 0.16);
    background: rgba(255, 169, 14, 0.05);
}

body.dark-theme .mcp-arch-diagram-teal {
    background: rgba(255, 169, 14, 0.035);
}

.mcp-arch-route,
.mcp-arch-core {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 0.69rem;
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid var(--border-color);
    text-align: center;
}

body.dark-theme .mcp-arch-route,
body.dark-theme .mcp-arch-core {
    background: rgba(255, 255, 255, 0.02);
}

.mcp-arch-chip-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.mcp-arch-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(255, 169, 14, 0.08);
    border: 1px solid rgba(255, 169, 14, 0.16);
    font-size: 0.63rem;
    font-weight: 600;
    color: var(--brand-teal);
}

/* ==========================================
   SLIDE 12: MCP Examples
   ========================================== */
.mcp-examples-layout {
    justify-content: space-between;
    height: 100%;
}

.mcp-examples-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.mcp-examples-layout .outcome-card {
    padding: 18px 16px;
}

.mcp-examples-layout .outcome-card-icon {
    font-size: 1.35rem;
    margin-bottom: 10px;
}

.mcp-examples-layout .outcome-card h3 {
    font-size: 1rem;
    margin-bottom: 6px;
}

.mcp-examples-layout .outcome-card p {
    font-size: 0.74rem;
    line-height: 1.38;
}

.mcp-examples-layout .p-concept {
    font-size: 0.66rem;
    margin-bottom: 6px;
}

.mcp-tool-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.mcp-tool-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255, 115, 2, 0.08);
    border: 1px solid rgba(255, 115, 2, 0.16);
    font-size: 0.64rem;
    font-weight: 600;
    color: var(--brand-cyan);
}

/* ==========================================
   SLIDE 13: Agentic RAG Composition
   ========================================== */
.agentic-rag-layout {
    justify-content: space-between;
    height: 100%;
}

.agentic-rag-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.86fr 1.06fr;
    gap: 18px;
    align-items: center;
    margin-top: 18px;
}

.agentic-rag-card {
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px;
}

body.dark-theme .agentic-rag-card {
    background: rgba(255, 255, 255, 0.018);
}

.kb-layer-card {
    border-color: rgba(255, 115, 2, 0.18);
    background: linear-gradient(180deg, rgba(255, 115, 2, 0.04) 0%, rgba(255, 255, 255, 0.58) 100%);
}

.workflow-layer-card {
    border-color: rgba(255, 169, 14, 0.18);
}

.tools-layer-card {
    border-color: rgba(255, 122, 0, 0.18);
}

body.dark-theme .kb-layer-card,
body.dark-theme .workflow-layer-card,
body.dark-theme .tools-layer-card {
    background: rgba(255, 255, 255, 0.02);
}

.agentic-rag-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--brand-teal);
}

.agentic-rag-card h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 8px;
}

.agentic-rag-card p {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.agentic-rag-examples {
    display: grid;
    gap: 8px;
}

.agentic-rag-example {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-secondary);
}

body.dark-theme .agentic-rag-example {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.05);
}

.agentic-rag-core {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.agentic-rag-core-node {
    width: 176px;
    height: 176px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 169, 14, 0.16), rgba(255, 115, 2, 0.06));
    border: 1px solid rgba(255, 169, 14, 0.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 22px;
    box-shadow: 0 14px 34px rgba(255, 169, 14, 0.08);
}

body.dark-theme .agentic-rag-core-node {
    box-shadow: none;
}

.agentic-rag-core-label {
    font-family: var(--font-heading);
    font-size: 1.22rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.agentic-rag-core-sub {
    font-size: 0.72rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--brand-teal);
}

.agentic-rag-core-text {
    max-width: 220px;
    font-size: 0.74rem;
    line-height: 1.45;
    text-align: center;
    color: var(--text-secondary);
}

.agentic-rag-stack {
    display: grid;
    gap: 14px;
}

/* ==========================================
   SLIDE 14: Comparison Table
   ========================================== */
.compare-layout {
    justify-content: space-between;
    height: 100%;
}

.compare-table {
    display: grid;
    grid-template-columns: 1.1fr 1.3fr 1.6fr;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.5);
    margin-top: 15px;
}

body.dark-theme .compare-table {
    background: rgba(7, 10, 19, 0.4);
}

.comp-cell {
    padding: 14px 18px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
    line-height: 1.4;
    display: flex;
    align-items: center;
}

body.dark-theme .comp-cell {
    border-bottom-color: rgba(255, 255, 255, 0.03);
}

.bold-cell {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    background: rgba(15, 23, 42, 0.005);
}

body.dark-theme .bold-cell {
    background: rgba(255, 255, 255, 0.005);
}

.font-600 {
    font-weight: 600;
}

/* ==========================================
   Slide Footer
   ========================================== */
.deck-footer {
    height: 45px;
    border-top: 1px solid var(--border-color);
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-muted);
    background: rgba(248, 250, 252, 0.3);
    transition: background-color 0.4s ease;
}

body.dark-theme .deck-footer {
    background: rgba(5, 8, 17, 0.2);
}

.footer-subtext {
    font-size: 0.65rem;
    letter-spacing: 0.3px;
    font-weight: 600;
}

.footer-center {
    font-weight: 500;
    letter-spacing: 0.5px;
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.footer-page-num {
    font-weight: 600;
}

/* ==========================================
   SLIDE 11: Diagnostic Tree
   ========================================== */
.diagnostic-tree-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 15px;
    width: 100%;
}

.tree-root {
    background: rgba(15, 23, 42, 0.03);
    border: 1px dashed rgba(15, 23, 42, 0.15);
    border-radius: 20px;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.dark-theme .tree-root {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.1);
}

.root-badge {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tree-branches {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 100%;
}

.tree-branch-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.branch-question {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: rgba(15, 23, 42, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 12px;
    text-align: center;
    width: 100%;
    max-width: 220px;
}

body.dark-theme .branch-question {
    background: rgba(255, 255, 255, 0.01);
}

.branch-arrow {
    color: var(--brand-teal);
    font-size: 0.75rem;
    margin: 4px 0;
}

.branch-result {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--brand-cyan);
    border-radius: 8px;
    padding: 14px 12px;
    text-align: center;
    width: 100%;
    min-height: 100px;
    transition: var(--transition-smooth);
}

body.dark-theme .branch-result {
    background: rgba(255, 255, 255, 0.015);
}

.branch-result:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-premium);
}

.res-title {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.branch-result p {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.highlight-rag { border-top-color: var(--brand-orange); }
.highlight-state { border-top-color: var(--brand-teal); }
.highlight-mcp { border-top-color: var(--brand-cyan); }

/* ==========================================
   SLIDE 12: Split Panel (Resources vs Tools)
   ========================================== */
.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    height: 100%;
}

.split-side {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

body.dark-theme .split-side {
    background: rgba(255, 255, 255, 0.015);
}

.split-header {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--brand-orange);
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.split-side.highlight-side .split-header {
    color: var(--brand-teal);
}

.split-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 4px;
    margin-bottom: 12px;
}

.split-item-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    justify-content: center;
}

.s-item {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: var(--transition-smooth);
}

body.dark-theme .s-item {
    background: rgba(255, 255, 255, 0.02);
}

.s-item:hover {
    transform: translateX(4px);
    border-color: var(--brand-orange);
}

.highlight-side .s-item:hover {
    border-color: var(--brand-teal);
}

/* ==========================================
   SLIDE 13: MCP Intro (Hub & Spoke Diagram)
   ========================================== */
.mcp-intro-layout {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 30px;
    height: 100%;
    align-items: center;
}

.mcp-intro-left {
    display: flex;
    flex-direction: column;
}

.mcp-feature-box {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mcp-f-item {
    display: flex;
    gap: 12px;
    background: rgba(255, 169, 14, 0.02);
    border: 1px solid rgba(255, 169, 14, 0.1);
    border-radius: 8px;
    padding: 10px 12px;
}

.mcp-f-item i {
    font-size: 1.1rem;
    margin-top: 2px;
}

.mcp-f-item strong {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    color: var(--text-primary);
    display: block;
}

.mcp-f-item span {
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.3;
    display: block;
    margin-top: 1px;
}

.mcp-intro-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tools-mcp-diagram {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.tools-mcp-box {
    width: 100%;
    border-radius: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.52);
    text-align: center;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

body.dark-theme .tools-mcp-box {
    background: rgba(255, 255, 255, 0.015);
}

.primary-box {
    border-color: rgba(255, 115, 2, 0.22);
}

.secondary-box {
    border-color: rgba(255, 169, 14, 0.22);
}

.tertiary-box {
    border-color: rgba(255, 122, 0, 0.22);
}

.tools-mcp-kicker {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.tools-mcp-box strong {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.tools-mcp-arrow {
    color: var(--brand-cyan);
    font-size: 0.9rem;
}

.tools-mcp-chip-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}

.tools-mcp-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 169, 14, 0.08);
    border: 1px solid rgba(255, 169, 14, 0.16);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--brand-teal);
}

/* Hub and Spoke diagram */
.hub-spoke-diagram {
    position: relative;
    width: 320px;
    height: 320px;
}

.hub-spoke-center {
    position: absolute;
    top: calc(50% - 45px);
    left: calc(50% - 45px);
    width: 90px;
    height: 90px;
    background: var(--bg-card);
    border: 2px solid var(--brand-orange);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20;
    box-shadow: 0 0 20px rgba(255, 122, 0, 0.15);
    text-align: center;
}

.hub-spoke-center .h-text {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--brand-orange);
}

.hub-spoke-center .h-sub {
    font-size: 0.52rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.hub-spoke-node {
    position: absolute;
    width: 85px;
    height: 34px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    z-index: 25;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: var(--transition-smooth);
}

body.dark-theme .hub-spoke-node {
    background: rgba(13, 18, 33, 0.9);
}

.hub-spoke-node:hover {
    border-color: var(--brand-orange);
    transform: scale(1.05);
}

/* Spoke Node Positions */
.n-top { top: 15px; left: calc(50% - 42px); }
.n-right { right: 5px; top: calc(50% - 17px); }
.n-bottom { bottom: 15px; left: calc(50% - 42px); }
.n-left { left: 5px; top: calc(50% - 17px); }

/* Spoke Connectors */
.spoke-connector {
    position: absolute;
    background: transparent;
    border-style: dashed;
    border-color: rgba(255, 122, 0, 0.2);
    transition: var(--transition-smooth);
}

.c-top {
    top: 49px;
    left: 50%;
    width: 0px;
    height: 60px;
    border-left-width: 1.5px;
}

.c-right {
    top: 50%;
    right: 90px;
    width: 70px;
    height: 0px;
    border-top-width: 1.5px;
}

.c-bottom {
    bottom: 49px;
    left: 50%;
    width: 0px;
    height: 60px;
    border-left-width: 1.5px;
}

.c-left {
    top: 50%;
    left: 90px;
    width: 70px;
    height: 0px;
    border-top-width: 1.5px;
}

.hub-spoke-node.pulsing {
    border-color: var(--brand-orange);
    box-shadow: 0 0 15px rgba(255,122,0,0.3);
}

/* ==========================================
   SLIDE 14: MCP Comparison Table
   ========================================== */
.mcp-comparison-table {
    grid-template-columns: 1fr 1.3fr 1.5fr 1.5fr 0.9fr;
}

.badge-low { background: rgba(239, 68, 68, 0.08); color: var(--brand-red); border: 1px solid rgba(239,68,68,0.15); }
.badge-med { background: rgba(59, 130, 246, 0.08); color: var(--brand-blue); border: 1px solid rgba(59,130,246,0.15); }
.badge-high { background: rgba(255, 169, 14, 0.08); color: var(--brand-teal); border: 1px solid rgba(255,169,14,0.15); }

/* ==========================================
   SLIDE 15: Primitives
   ========================================== */
.primitive-card {
    border-top: 3px solid var(--brand-cyan);
}

.card-prompts { border-top-color: var(--brand-cyan); }
.card-resources { border-top-color: var(--brand-teal); }
.card-tools { border-top-color: var(--brand-orange); }

.p-concept {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* ==========================================
   SLIDE 16: Exercise Case Cards
   ========================================== */
.case-card {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

body.dark-theme .case-card {
    background: rgba(255, 255, 255, 0.015);
}

.case-header {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.case-num {
    font-size: 0.55rem;
    background: var(--brand-cyan);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 700;
}

.case-goal {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.35;
    margin-bottom: 12px;
}

.case-decision {
    background: rgba(15, 23, 42, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px;
}

body.dark-theme .case-decision {
    background: rgba(7, 10, 19, 0.4);
}

.case-decision strong {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 4px;
}

.rec-tag {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 4px;
}

.rec-api { background: rgba(15, 23, 42, 0.04); color: var(--text-primary); border: 1px solid var(--border-color); }
body.dark-theme .rec-api { background: rgba(255,255,255,0.04); }
.rec-mcp { background: rgba(255, 169, 14, 0.08); color: var(--brand-teal); border: 1px solid rgba(255,169,14,0.15); }
.rec-reason {
    font-size: 0.62rem;
    color: var(--text-muted);
    line-height: 1.3;
    margin-top: 4px;
}

/* ==========================================
   SLIDE 17: Coding Agent Workflow
   ========================================== */
.coding-agent-visual {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

body.dark-theme .coding-agent-visual {
    background: rgba(255, 255, 255, 0.01);
}

.workflow-heading {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--brand-teal);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vertical-workflow-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.v-workflow-step {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    transition: var(--transition-smooth);
}

body.dark-theme .v-workflow-step {
    background: rgba(255, 255, 255, 0.015);
}

.v-step-num {
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 800;
    background: rgba(15, 23, 42, 0.04);
    color: var(--text-muted);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.dark-theme .v-step-num {
    background: rgba(255,255,255,0.04);
}

.v-step-text {
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

.v-step-text strong {
    color: var(--text-primary);
}

.v-workflow-step:hover {
    transform: translateX(4px);
    border-color: rgba(255, 115, 2, 0.2);
}

.highlight-v-step {
    background: linear-gradient(90deg, rgba(255, 115, 2, 0.05) 0%, rgba(255, 255, 255, 0.8) 100%);
    border-color: rgba(255, 115, 2, 0.25);
    box-shadow: 0 4px 15px rgba(255, 115, 2, 0.03);
}

body.dark-theme .highlight-v-step {
    background: linear-gradient(90deg, rgba(255, 115, 2, 0.05) 0%, rgba(13, 18, 33, 0.5) 100%);
}

.highlight-v-step .v-step-num {
    background: var(--brand-cyan);
    color: white;
}

/* ==========================================
   SLIDE 18: Layered SDK Diagram
   ========================================== */
.sdk-layered-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 440px;
    perspective: 800px;
}

.sdk-layer {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    transition: var(--transition-smooth);
    position: relative;
}

body.dark-theme .sdk-layer {
    background: rgba(255, 255, 255, 0.015);
}

.sdk-layer:hover {
    transform: translateZ(10px) translateY(-3px);
    border-color: rgba(255, 122, 0, 0.2);
}

.sdk-l-header {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--brand-orange);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sdk-layer p {
    font-size: 0.68rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.layer-skills {
    border-left: 3px solid var(--brand-cyan);
}
.layer-skills .sdk-l-header {
    color: var(--brand-cyan);
}

.layer-agents {
    border-left: 3px solid var(--brand-orange);
}

.layer-scripts {
    border-left: 3px solid var(--brand-teal);
}
.layer-scripts .sdk-l-header {
    color: var(--brand-teal);
}

.highlight-sdk-layer {
    background: linear-gradient(90deg, rgba(255, 169, 14, 0.05) 0%, rgba(255, 255, 255, 0.8) 100%);
    border-color: rgba(255, 169, 14, 0.2);
}

body.dark-theme .highlight-sdk-layer {
    background: linear-gradient(90deg, rgba(255, 169, 14, 0.04) 0%, rgba(10, 15, 28, 0.3) 100%);
}

/* ==========================================
   SLIDE 19: Build vs Run Columns
   ========================================== */
.column-comp-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 10px;
}

.coding-comp-card {
    border-top: 3px solid var(--brand-orange);
}
.coding-comp-card .comp-header {
    color: var(--brand-orange);
}

.managed-comp-card {
    border-top: 3px solid var(--brand-teal);
}

.comp-bullet-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.c-bullet {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.c-bullet i {
    font-size: 0.75rem;
    color: var(--brand-orange);
}

.managed-comp-card .c-bullet i {
    color: var(--brand-teal);
}

.comp-summary-note {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--brand-orange);
    border-top: 1px solid var(--border-color);
    padding-top: 8px;
    margin-top: auto;
}

.comp-example-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

.comp-example-strip strong {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
}

.comp-example-strip span {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 122, 0, 0.08);
    border: 1px solid rgba(255, 122, 0, 0.16);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--brand-orange);
}

.comp-example-strip-teal span {
    background: rgba(255, 169, 14, 0.08);
    border-color: rgba(255, 169, 14, 0.16);
    color: var(--brand-teal);
}

/* ==========================================
   SLIDE 20: Build vs Run 2x2 Matrix
   ========================================== */
.matrix-grid-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 900px;
    margin-top: 10px;
}

.matrix-quadrant-wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 15px;
    width: 100%;
}

.matrix-quadrants {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
}

.quadrant-cell {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition-smooth);
}

body.dark-theme .quadrant-cell {
    background: rgba(255, 255, 255, 0.01);
}

.quadrant-cell:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 115, 2, 0.2);
}

.q-label {
    font-family: var(--font-heading);
    font-size: 0.58rem;
    color: var(--brand-cyan);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.quadrant-cell h4 {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    margin: 4px 0;
}

.quadrant-cell p {
    font-size: 0.65rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.q-result {
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-top: 6px;
    border-top: 1px solid var(--border-color);
    padding-top: 4px;
}

.highlight-quadrant {
    background: linear-gradient(135deg, rgba(255, 169, 14, 0.05) 0%, rgba(255, 255, 255, 0.65) 100%);
    border-color: rgba(255, 169, 14, 0.25);
    box-shadow: 0 4px 15px rgba(255,169,14,0.03);
}

body.dark-theme .highlight-quadrant {
    background: linear-gradient(135deg, rgba(255, 169, 14, 0.04) 0%, rgba(10, 15, 28, 0.3) 100%);
}

/* Axis Labels */
.matrix-axis-y {
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.matrix-axis-x {
    margin-top: 8px;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-muted);
    text-transform: uppercase;
    text-align: center;
}

.matrix-axis-label-y {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.matrix-axis-label-x {
    grid-column: 2;
    display: flex;
    justify-content: space-around;
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    padding: 0 30px;
}

.label-x-left { text-align: left; width: 45%; }
.label-x-right { text-align: right; width: 45%; }

/* ==========================================
   SLIDE 21: Myth vs Reality Cards
   ========================================== */
.myth-card {
    border-top: 3px solid var(--brand-cyan);
}

.myth-header {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--brand-red);
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.myth-statement {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.reality-header {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--brand-teal);
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
    margin-top: auto;
}

.reality-statement {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.35;
}

/* ==========================================
   SLIDE 22: Deliverables Stack
   ========================================== */
.deliverables-stack-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.d-stack-card {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    transition: var(--transition-smooth);
}

body.dark-theme .d-stack-card {
    background: rgba(255, 255, 255, 0.015);
}

.d-stack-card:hover {
    transform: translateX(4px);
    border-color: rgba(255, 115, 2, 0.15);
}

.flex-between {
    display: flex;
    justify-content: space-between;
}

.d-l-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 240px;
}

.d-badge {
    font-family: var(--font-heading);
    font-size: 0.55rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    width: 100px;
    text-align: center;
}

.d-concept-name {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.d-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.35;
    flex: 1;
    margin-left: 20px;
    text-align: left;
}

.highlight-d-card {
    background: linear-gradient(90deg, rgba(255, 169, 14, 0.05) 0%, rgba(255, 255, 255, 0.65) 100%);
    border-color: rgba(255, 169, 14, 0.25);
    box-shadow: 0 4px 15px rgba(255,169,14,0.03);
}

body.dark-theme .highlight-d-card {
    background: linear-gradient(90deg, rgba(255, 169, 14, 0.04) 0%, rgba(10, 15, 28, 0.3) 100%);
}

/* ==========================================
   SLIDE 2: Why Agents Matter Now
   ========================================== */
.proof-now-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.proof-now-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.proof-now-card {
    background: rgba(255, 255, 255, 0.54);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 250px;
}

body.dark-theme .proof-now-card {
    background: rgba(255, 255, 255, 0.015);
}

.proof-now-card-teal {
    border-color: rgba(255, 169, 14, 0.22);
    box-shadow: 0 10px 28px rgba(255, 169, 14, 0.06);
}

.proof-now-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--brand-teal);
}

.proof-now-card h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.proof-now-card p {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.proof-now-metric {
    font-family: var(--font-heading);
    font-size: 1.24rem;
    font-weight: 800;
    color: var(--text-primary);
}

.proof-now-metric span {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.proof-now-bottomline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 115, 2, 0.18);
    background: linear-gradient(90deg, rgba(255, 115, 2, 0.07) 0%, rgba(255, 255, 255, 0.72) 100%);
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

body.dark-theme .proof-now-bottomline {
    background: linear-gradient(90deg, rgba(255, 115, 2, 0.06) 0%, rgba(12, 18, 31, 0.45) 100%);
}

.proof-now-bottomline strong {
    color: var(--brand-cyan);
}

/* ==========================================
   SLIDE 4: Agent Building Blocks
   ========================================== */
.building-blocks-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.building-blocks-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.building-block-card {
    background: rgba(255, 255, 255, 0.52);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px;
    min-height: 132px;
}

body.dark-theme .building-block-card {
    background: rgba(255, 255, 255, 0.015);
}

.building-block-card-teal {
    border-color: rgba(255, 169, 14, 0.22);
}

.building-block-card-cyan {
    border-color: rgba(255, 115, 2, 0.22);
}

.building-block-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--brand-orange);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.building-block-card p {
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.harness-bottomline strong {
    color: var(--brand-teal);
}

/* ==========================================
   SLIDE 24: Guardrails and Harness
   ========================================== */
.harness-layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 22px;
    align-items: center;
}

.harness-board {
    width: 100%;
    max-width: 420px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
}

.harness-core,
.harness-item {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px;
    min-height: 94px;
}

body.dark-theme .harness-core,
body.dark-theme .harness-item {
    background: rgba(255, 255, 255, 0.015);
}

.harness-core {
    grid-column: span 2;
    background: linear-gradient(135deg, rgba(255, 169, 14, 0.08) 0%, rgba(255, 115, 2, 0.08) 100%);
    border-color: rgba(255, 169, 14, 0.22);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

body.dark-theme .harness-core {
    background: linear-gradient(135deg, rgba(255, 169, 14, 0.08) 0%, rgba(255, 115, 2, 0.05) 100%);
}

.harness-core-kicker {
    font-family: var(--font-heading);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--brand-cyan);
}

.harness-core-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-primary);
}

.harness-item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
}

/* ==========================================
   SLIDE 7: LLM Selection
   ========================================== */
.llm-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.llm-grid {
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: 18px;
    align-items: start;
}

.llm-card {
    background: rgba(255, 255, 255, 0.52);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px 18px;
}

body.dark-theme .llm-card {
    background: rgba(255, 255, 255, 0.015);
}

.llm-card-teal {
    border-color: rgba(255, 169, 14, 0.2);
}

.llm-card-header {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--brand-cyan);
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.llm-card-teal .llm-card-header {
    color: var(--brand-teal);
}

.llm-points {
    display: grid;
    gap: 8px;
}

.llm-point {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.48);
    border: 1px solid rgba(15, 23, 42, 0.06);
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

body.dark-theme .llm-point {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.05);
}

.llm-bottomline {
    margin-top: 12px;
}

.llm-matrix {
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.llm-matrix-head {
    padding: 10px 12px;
    background: rgba(255, 169, 14, 0.1);
    font-family: var(--font-heading);
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--brand-teal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.llm-matrix-cell {
    padding: 10px 12px;
    font-size: 0.71rem;
    line-height: 1.35;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.42);
    border-top: 1px solid var(--border-color);
}

body.dark-theme .llm-matrix-cell {
    background: rgba(255, 255, 255, 0.015);
}

.llm-matrix-label {
    font-weight: 700;
    color: var(--text-primary);
}

/* ==========================================
   SLIDE 12: TOKENS, CONTEXT WINDOW, AND COST
   ========================================== */
.token-context-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.token-context-grid {
    display: grid;
    grid-template-columns: 1.04fr 0.96fr;
    gap: 18px;
    align-items: start;
}

.token-card {
    background: rgba(255, 255, 255, 0.52);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 18px;
}

body.dark-theme .token-card {
    background: rgba(255, 255, 255, 0.015);
}

.token-card-teal {
    border-color: rgba(255, 169, 14, 0.2);
}

.token-card-header {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--brand-cyan);
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.token-card-teal .token-card-header {
    color: var(--brand-teal);
}

.token-window-frame {
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.72);
}

body.dark-theme .token-window-frame {
    background: rgba(255, 255, 255, 0.02);
}

.token-window-caption {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.token-window-bar {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 78px;
    border: 2px solid rgba(100, 116, 139, 0.35);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.42);
}

body.dark-theme .token-window-bar {
    background: rgba(255, 255, 255, 0.02);
}

.token-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: center;
    padding: 0 14px;
}

.token-segment-input {
    width: 42%;
    background: rgba(37, 99, 235, 0.14);
    color: var(--brand-blue);
    border-right: 1px solid rgba(100, 116, 139, 0.24);
}

.token-segment-output {
    margin-left: auto;
    width: 28%;
    background: rgba(255, 122, 0, 0.14);
    color: var(--brand-orange);
    border-left: 1px solid rgba(100, 116, 139, 0.24);
}

.token-note-row {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.token-note-pill {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.48);
    border: 1px solid rgba(15, 23, 42, 0.06);
    font-size: 0.73rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

body.dark-theme .token-note-pill {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.05);
}

.token-copy-stack {
    display: grid;
    gap: 12px;
}

.token-copy-stack p {
    font-size: 0.78rem;
    line-height: 1.48;
    color: var(--text-secondary);
}

/* Responsive Adaptations */
@media (max-width: 1024px) {
    .deck-container {
        width: 100vw;
        height: 100vh;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
    }

    .purpose-layout,
    .audience-content {
        grid-template-columns: 1fr;
    }

    .audience-role-grid {
        flex-wrap: wrap;
    }

    .objective-list {
        grid-template-columns: 1fr;
    }

    .objective-item-wide {
        grid-column: span 1;
    }

    .taxonomy-columns-2,
    .taxonomy-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agent-types-grid {
        grid-template-columns: 1fr;
    }

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

    .rag-agents-grid {
        grid-template-columns: 1fr;
    }

    .proof-now-grid,
    .llm-grid,
    .token-context-grid,
    .building-blocks-grid,
    .mcp-practical-grid,
    .mcp-examples-grid,
    .agentic-rag-grid,
    .harness-layout,
    .production-main {
        grid-template-columns: 1fr;
    }

    .agentic-rag-core-node {
        width: 150px;
        height: 150px;
    }

    .rag-kb-hub {
        min-height: 150px;
    }

    .rag-kb-hub::before,
    .rag-kb-hub::after {
        display: none;
    }

    .agenda-table,
    .production-table {
        grid-template-columns: 1fr 1.35fr;
    }

    .harness-board {
        max-width: 100%;
    }
}

/* ==========================================
   JetBrains Mono — technical accents (eyebrows, chips, tags, badges)
   Applied last so it overrides earlier font-family declarations.
   ========================================== */
.kicker,
.mini-label,
.production-label,
.taxonomy-kicker,
.taxonomy-label,
.mcp-practical-label,
.agentic-rag-kicker,
.agentic-rag-core-label,
.tools-mcp-kicker,
.harness-core-kicker,
.q-label,
.llm-matrix-label,
.matrix-axis-label-y,
.matrix-axis-label-x,
.mcp-arch-chip,
.mcp-tool-chip,
.tools-mcp-chip,
.rag-agent-pill,
.token-note-pill,
.rec-tag,
.brand-pill,
.step-badge,
.arc-badge,
.root-badge,
.d-badge,
.v-step-num,
.proof-now-metric {
    font-family: var(--font-mono);
}

/* =========================================================================
   aiXplain EDITION — complete brand restyle
   Orange-sphere motif · clean flat surfaces · editorial type.
   Content & diagrams are unchanged; this layer is appended last so it wins.
   ========================================================================= */

/* ---- Clean stage: solid paper, crisp hairline, no glassmorphism ---------- */
.deck-container {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(9, 9, 9, 0.08);
    box-shadow: 0 30px 80px -38px rgba(9, 9, 9, 0.28);
}
body.dark-theme .deck-container {
    background: #0d0d0d;
    border-color: rgba(255, 255, 255, 0.08);
}

/* ---- Outer canvas + calmer, warmer ambient glows ------------------------- */
body { background-color: #f3f3f1; }
body.dark-theme { background-color: #050505; }
.bg-grid-overlay { opacity: 0.45; }
.bg-glow-1 { background: radial-gradient(circle, #ff7302 0%, transparent 70%); opacity: 0.10; }
.bg-glow-2 { background: radial-gradient(circle, #ffa90e 0%, transparent 70%); opacity: 0.10; }

/* ---- THE motif: a soft warm glow on every slide (upper-right) ------------ */
.slide-stage::before {
    content: "";
    position: absolute;
    top: -24%;
    right: -12%;
    width: 58%;
    height: 92%;
    background: radial-gradient(circle, #ff7302 0%, #ffa90e 40%, transparent 68%);
    opacity: 0.10;
    filter: blur(38px);
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}
body.dark-theme .slide-stage::before { mix-blend-mode: screen; opacity: 0.16; }

/* ---- Cover: a crisp orange sphere as the focal motif --------------------- */
.cover-layout { position: relative; }
.cover-layout::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translateY(-50%);
    width: clamp(220px, 30vw, 380px);
    height: clamp(220px, 30vw, 380px);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 30%, #ffd089 0%, #ffa90e 34%, #ff7302 74%);
    box-shadow: 0 40px 110px -24px rgba(255, 115, 2, 0.5);
    z-index: 0;
    pointer-events: none;
}
.cover-layout > * { position: relative; z-index: 1; }
.cover-layout .giant-title {
    font-size: clamp(2.9rem, 6.2vw, 4.8rem);
    font-weight: 700;
    letter-spacing: -2px;
    max-width: 15ch;
}

/* ---- Kickers → aiXplain mono technical label (drop the pill) ------------- */
.kicker {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 18px;
}

/* ---- Editorial type polish ---------------------------------------------- */
.slide-title { letter-spacing: -0.02em; }

/* De-squeeze the body copy: open the tracking and give it air. Titles set their
   own line-height/tracking, so this only affects running text. */
body {
    letter-spacing: 0.12px;
    line-height: 1.5;
}
.slide-subtitle, .slide-desc, .branch-result p, .bio-p, p {
    line-height: 1.55;
}

/* ---- Top-right glow: dial the orange hue back -------------------------- */
.slide-stage::before { opacity: 0.05; }
body.dark-theme .slide-stage::before { opacity: 0.10; }

/* ---- Slide 17 (diagnostic tree): fill the space, less emptiness --------- */
#slide-17 .diagnostic-tree-container { margin-top: 26px; gap: 30px; }
#slide-17 .tree-branches { gap: 28px; max-width: 1040px; margin: 0 auto; }
#slide-17 .branch-question {
    max-width: none;
    font-size: 0.95rem;
    padding: 12px 16px;
}
#slide-17 .branch-arrow { font-size: 0.95rem; margin: 10px 0; }
#slide-17 .branch-result {
    min-height: 170px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#slide-17 .branch-result .res-title { font-size: 1.15rem; margin-bottom: 8px; }
#slide-17 .branch-result p { font-size: 0.95rem; }

/* ---- Logo: right variant per theme, clear space, no box (per brand skill) -- */
.brand { display: inline-flex; align-items: center; }
.brand-pill {                 /* neutralize the old boxed-in pill treatment */
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    height: auto;
}
.brand:hover .brand-pill { transform: none; box-shadow: none; }
.brand-logo-img { height: 26px; width: auto; display: block; }
.logo-dark { display: none; }                          /* default = light bg */
body.dark-theme .logo-light { display: none; }         /* dark bg → white wordmark */
body.dark-theme .logo-dark  { display: block; }