/* ===========================================
   THEME — UCM Light Blue
   Light background, deep UCM blue + accent blues
   =========================================== */
:root {
    --bg-primary: #f4f7fb;       /* warm light blue-white */
    --bg-deep: #e8eef7;
    --text-primary: #0a2540;     /* deep navy ink */
    --text-secondary: #364558;   /* slate — darkened for AA contrast on light bg */
    --text-faint: #5a6a82;       /* faded slate — darkened for AA contrast */
    --accent-warm: #00529b;      /* UCM deep blue (primary accent) */
    --accent-pink: #2a78ad;      /* mid blue — darkened so it passes AA as text */
    --accent-gold: #1e6091;      /* steel blue */
    --accent-sage: #3d89b4;      /* muted blue — darkened so it passes AA as text */
    --line: rgba(10, 37, 64, 0.12);

    --font-display: "Cormorant", Georgia, serif;
    --font-body: "IBM Plex Sans", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", monospace;

    --title-size: clamp(2rem, 6vw, 5rem);
    --h2-size: clamp(1.5rem, 4vw, 3rem);
    --h3-size: clamp(1.1rem, 2.4vw, 1.6rem);
    --body-size: clamp(0.85rem, 1.4vw, 1.1rem);
    --small-size: clamp(0.7rem, 1vw, 0.9rem);

    --slide-padding: clamp(1.5rem, 5vw, 5rem);
    --content-gap: clamp(0.8rem, 2vw, 2rem);
    --element-gap: clamp(0.4rem, 1vw, 1rem);

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --dur: 0.8s;
}

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

/* ===========================================
   VIEWPORT BASE (mandatory)
   =========================================== */
html, body { height: 100%; overflow-x: hidden; }
html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}
body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
}
.slide {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--bg-primary);
}
.slide-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-height: 100%;
    overflow: hidden;
    padding: var(--slide-padding);
    position: relative;
    z-index: 2;
}
img, .image-container {
    max-width: 100%;
    max-height: min(50vh, 400px);
    object-fit: contain;
}

/* Breakpoints */
@media (max-height: 700px) {
    :root {
        --slide-padding: clamp(1rem, 3vw, 2.5rem);
        --content-gap: clamp(0.5rem, 1.5vw, 1.2rem);
        --title-size: clamp(1.5rem, 5vw, 3rem);
        --h2-size: clamp(1.25rem, 3.5vw, 2rem);
    }
}
@media (max-height: 600px) {
    :root {
        --slide-padding: clamp(0.75rem, 2.5vw, 1.5rem);
        --title-size: clamp(1.25rem, 4.5vw, 2.25rem);
        --body-size: clamp(0.75rem, 1.2vw, 0.95rem);
    }
    .nav-dots, .keyboard-hint, .decorative { display: none; }
}
@media (max-width: 600px) {
    :root { --title-size: clamp(1.5rem, 8vw, 2.75rem); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.2s !important;
    }
    html { scroll-behavior: auto; }
}

/* ===========================================
   ABSTRACT BOTANICAL SHAPES
   Soft blurred gradient circles, organic feel
   =========================================== */
.botanical-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.28;
    animation: drift 20s ease-in-out infinite alternate;
}
.blob-warm  { background: radial-gradient(circle, var(--accent-warm), transparent 70%); }
.blob-pink  { background: radial-gradient(circle, var(--accent-pink), transparent 70%); }
.blob-gold  { background: radial-gradient(circle, var(--accent-gold), transparent 70%); }
.blob-sage  { background: radial-gradient(circle, var(--accent-sage), transparent 70%); }

@keyframes drift {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, -30px) scale(1.15); }
}

/* Subtle paper-grain overlay for premium feel on light bg */
.slide::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.15 0 0 0 0 0.3 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.4;
    mix-blend-mode: multiply;
}

/* ===========================================
   TYPOGRAPHY
   =========================================== */
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.05;
    color: var(--text-primary);
}
h1 { font-size: var(--title-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); font-style: italic; color: var(--accent-warm); }
p, li { font-size: var(--body-size); line-height: 1.55; color: var(--text-secondary); font-weight: 300; }
strong { color: var(--text-primary); font-weight: 400; }
em { color: var(--accent-warm); font-style: italic; }
.signature {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    color: var(--accent-warm);
}
.eyebrow {
    font-family: var(--font-mono);
    font-size: var(--small-size);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent-gold);
    font-weight: 400;
}
.thin-rule {
    width: 1px;
    background: var(--line);
    align-self: stretch;
}

/* ===========================================
   REVEAL ANIMATIONS
   =========================================== */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reveal-blur {
    opacity: 0;
    filter: blur(14px);
    transition: opacity 1s var(--ease), filter 1s var(--ease);
}
.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.slide.visible .reveal,
.slide.visible .reveal-blur,
.slide.visible .reveal-scale {
    opacity: 1;
    transform: none;
    filter: none;
}
.slide.visible .d1 { transition-delay: 0.10s; }
.slide.visible .d2 { transition-delay: 0.25s; }
.slide.visible .d3 { transition-delay: 0.40s; }
.slide.visible .d4 { transition-delay: 0.55s; }
.slide.visible .d5 { transition-delay: 0.70s; }
.slide.visible .d6 { transition-delay: 0.85s; }
.slide.visible .d7 { transition-delay: 1.00s; }
.slide.visible .d8 { transition-delay: 1.15s; }

/* ===========================================
   LAYOUTS
   =========================================== */
.center-stack {
    display: flex; flex-direction: column;
    align-items: flex-start; justify-content: center;
    gap: var(--content-gap);
    max-width: min(95vw, 1100px);
}
.center-stack.middle { align-items: center; text-align: center; margin: 0 auto; }

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
    max-width: min(95vw, 1200px);
    width: 100%;
}
@media (max-width: 700px) { .two-col { grid-template-columns: 1fr; } }

.eyebrow-row {
    display: flex; align-items: center; gap: 1rem;
    color: var(--accent-gold);
}
.eyebrow-row::after {
    content: ""; height: 1px; flex: 1;
    background: linear-gradient(to right, var(--line), transparent);
}

/* Bullets — minimal, with elegant marker */
.bullets { list-style: none; display: flex; flex-direction: column; gap: clamp(0.5rem, 1.5vw, 1.1rem); }
.bullets li {
    position: relative;
    padding-left: 1.6rem;
}
.bullets li::before {
    content: "—";
    position: absolute; left: 0; top: 0;
    color: var(--accent-warm);
    font-family: var(--font-display);
}

/* ===========================================
   SLIDE 1 — TITLE
   =========================================== */
.title-slide .slide-content { justify-content: center; align-items: center; text-align: center; }
.ucm-logo {
    position: absolute;
    top: clamp(1rem, 3vh, 2.5rem);
    right: clamp(1rem, 3vw, 2.5rem);
    height: clamp(70px, 12vh, 130px);
    width: auto;
    z-index: 5;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
    transition-delay: 0.2s;
}
.title-slide.visible .ucm-logo {
    opacity: 0.95;
    transform: translateY(0);
}
.title-mark {
    font-family: var(--font-mono);
    font-size: clamp(0.85rem, 1.2vw, 1.05rem);
    color: var(--accent-warm);
    letter-spacing: 0.35em;
    text-transform: uppercase;
    font-weight: 500;
}
.title-slide h1 {
    font-size: clamp(3.5rem, 11vw, 8rem);
    font-weight: 500;
    line-height: 1.0;
    margin-top: clamp(0.8rem, 2.5vh, 2rem);
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.title-slide h1 em {
    font-style: italic;
    color: var(--accent-warm);
    font-weight: 600;
}
.title-slide .question {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.6rem, 3.6vw, 2.6rem);
    color: var(--text-primary);
    margin-top: clamp(0.8rem, 2vh, 1.5rem);
    font-weight: 400;
}
.title-slide .author {
    margin-top: clamp(2rem, 5vh, 3.5rem);
    display: flex; flex-direction: column; gap: 0.4rem;
    align-items: center;
}
.title-slide .author .name {
    color: var(--text-primary);
    font-weight: 500;
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    letter-spacing: 0.02em;
}
.title-slide .author .role {
    color: var(--text-secondary);
    font-size: clamp(0.85rem, 1.2vw, 1.05rem);
    font-weight: 400;
}

/* ===========================================
   SLIDE 2 — HOOK (Darwin / pinzones)
   =========================================== */
/* Darwin tree-of-life sketch, hand-drawn feel, draws itself in */
.hook .tree-sketch {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0;
    transition: opacity 2s ease 0.2s;
    pointer-events: none;
}
.slide.hook.visible .tree-sketch { opacity: 0.28; }
.hook .tree-sketch path {
    fill: none;
    stroke: var(--accent-warm);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    transition: stroke-dashoffset 4.5s ease-out 0.4s;
}
.slide.hook.visible .tree-sketch path { stroke-dashoffset: 0; }

/* Ambient rising motes (seeds / spores) */
.hook .motes,
.motes-closing { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.hook .mote,
.motes-closing .mote {
    position: absolute;
    bottom: -10px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--accent-warm);
    box-shadow: 0 0 8px var(--accent-sage);
    opacity: 0;
    animation: mote-rise 16s linear infinite;
}
@keyframes mote-rise {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: 0.55; }
    50%  { transform: translateY(-55vh) translateX(20px); }
    90%  { opacity: 0.4; }
    100% { transform: translateY(-110vh) translateX(-20px); opacity: 0; }
}

/* Quote stage */
.hook blockquote {
    position: relative;
    z-index: 3;
    max-width: min(92vw, 1000px);
    text-align: center;
    font-family: var(--font-display);
    font-weight: 300;
    font-style: italic;
    line-height: 1.35;
    color: var(--text-primary);
    font-size: clamp(1.3rem, 3vw, 2.3rem);
}
.hook .line { display: block; }
.hook .qword {
    display: inline-block;
    opacity: 0;
    filter: blur(10px);
    transform: translateY(14px);
    transition: opacity 0.7s var(--ease), filter 0.7s var(--ease), transform 0.7s var(--ease);
    margin: 0 0.12em;
}
.slide.hook.visible .qword {
    opacity: 1; filter: none; transform: none;
}
.hook .qw1  { transition-delay: 0.35s; }
.hook .qw2  { transition-delay: 0.48s; }
.hook .qw3  { transition-delay: 0.61s; }
.hook .qw4  { transition-delay: 0.74s; }
.hook .qw5  { transition-delay: 0.87s; }
.hook .qw6  { transition-delay: 1.00s; }
.hook .qw7  { transition-delay: 1.20s; }
.hook .qw8  { transition-delay: 1.33s; }
.hook .qw9  { transition-delay: 1.46s; }
.hook .qw10 { transition-delay: 1.59s; }
.hook .qw11 { transition-delay: 1.72s; }
.hook .qw12 { transition-delay: 1.85s; }
.hook .qw13 { transition-delay: 1.98s; }
.hook .qw14 { transition-delay: 2.11s; }
.hook .qw-end { transition-delay: 4.30s; opacity: 0; font-size: 0.7em; color: var(--text-faint); }

/* Hero word — "adapta" climax */
.hook .hero {
    display: block;
    position: relative;
    margin: 0.18em auto 0.08em;
    font-size: 2em;
    font-weight: 500;
    font-style: italic;
    color: var(--accent-warm);
    letter-spacing: 0.01em;
    opacity: 0;
    transform: scale(0.55);
    filter: blur(18px);
    text-shadow: 0 2px 18px rgba(0, 82, 155, 0.25);
}
.slide.hook.visible .hero {
    animation: hero-in 1.1s cubic-bezier(0.2, 1.35, 0.35, 1) 2.7s forwards;
}
@keyframes hero-in {
    0%   { opacity: 0; transform: scale(0.55) rotate(-2deg); filter: blur(18px); }
    55%  { opacity: 1; transform: scale(1.18) rotate(1.2deg); filter: blur(0); }
    80%  { transform: scale(0.96) rotate(-0.4deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
}
/* Glow halo behind hero */
.hook .hero::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 140%; height: 260%;
    transform: translate(-50%, -50%) scale(0.6);
    background: radial-gradient(ellipse, var(--accent-sage) 0%, rgba(111,177,214,0.35) 30%, transparent 65%);
    filter: blur(28px);
    opacity: 0;
    z-index: -1;
    border-radius: 50%;
}
.slide.hook.visible .hero::before {
    animation: hero-halo 4s ease-out 3.1s forwards, halo-pulse 4.5s ease-in-out 5s infinite;
}
@keyframes hero-halo {
    0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.6); }
    40%  { opacity: 0.85; transform: translate(-50%, -50%) scale(1.1); }
    100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
}
@keyframes halo-pulse {
    0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 0.75; transform: translate(-50%, -50%) scale(1.1); }
}
/* Underline draws in */
.hook .hero::after {
    content: "";
    position: absolute;
    left: 8%; right: 8%; bottom: 0.05em;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--accent-warm) 20%, var(--accent-warm) 80%, transparent);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 1s var(--ease) 3.5s;
}
.slide.hook.visible .hero::after { transform: scaleX(1); }

/* Particle burst from hero */
.hook .burst {
    position: absolute;
    left: 50%; top: 50%;
    width: 0; height: 0;
    pointer-events: none;
    z-index: 2;
}
.hook .burst span {
    position: absolute;
    left: 0; top: 0;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent-warm);
    box-shadow: 0 0 10px var(--accent-sage);
    opacity: 0;
    transform: translate(-50%, -50%);
}
.slide.hook.visible .burst span {
    animation: burst-out 1.7s cubic-bezier(0.2, 0.8, 0.3, 1) 3.35s forwards;
}
@keyframes burst-out {
    0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.3); }
    18%  { opacity: 1; }
    100% {
        opacity: 0;
        transform: translate(
            calc(-50% + cos(var(--a)) * var(--d)),
            calc(-50% + sin(var(--a)) * var(--d))
        ) scale(0.25);
    }
}

/* Citation */
.hook cite {
    display: block;
    margin-top: clamp(1.2rem, 3.5vh, 2.5rem);
    font-style: normal;
    font-family: var(--font-mono);
    font-size: var(--small-size);
    color: var(--text-faint);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 1s ease 4s, transform 1s ease 4s;
    position: relative;
    z-index: 3;
}
.slide.hook.visible cite { opacity: 1; transform: none; }
.hook cite .year {
    color: var(--accent-warm);
    font-weight: 400;
    margin-left: 0.6em;
}

/* ===========================================
   SLIDE — ChatGPT word predictor
   =========================================== */
.word-machine {
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 1vw, 0.8rem);
    flex-wrap: wrap;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3.8vw, 2.6rem);
    line-height: 1.4;
}
.word {
    display: inline-block;
    color: var(--text-primary);
    opacity: 0;
    transform: translateY(10px);
    animation: wordIn 0.6s var(--ease) forwards;
}
.slide.visible .word:nth-child(1) { animation-delay: 0.4s; }
.slide.visible .word:nth-child(2) { animation-delay: 0.7s; }
.slide.visible .word:nth-child(3) { animation-delay: 1.0s; }
.slide.visible .word:nth-child(4) { animation-delay: 1.3s; }
.slide.visible .word:nth-child(5) { animation-delay: 1.6s; }
.slide.visible .word:nth-child(6) { animation-delay: 1.9s; }
.slide.visible .word:nth-child(7) { animation-delay: 2.2s; }
.word.guess {
    color: var(--accent-warm);
    font-style: italic;
    border-bottom: 1px dashed var(--accent-warm);
    padding: 0 0.2em;
    position: relative;
    display: inline-block;
    min-width: 4.2em;
    min-height: 1.2em;
    vertical-align: baseline;
    animation: none !important;
    opacity: 1;
    transform: none;
}
.word.guess .flicker {
    position: absolute;
    left: 0.2em;
    top: 0;
    opacity: 0;
    white-space: nowrap;
}
.slide.visible .word.guess .flicker.f1 { animation: flickerOnce 0.18s 1.8s forwards; }
.slide.visible .word.guess .flicker.f2 { animation: flickerOnce 0.18s 1.98s forwards; }
.slide.visible .word.guess .flicker.f3 { animation: flickerOnce 0.18s 2.16s forwards; }
.slide.visible .word.guess .flicker.f4 { animation: flickerOnce 0.18s 2.34s forwards; }
.slide.visible .word.guess .flicker.winner { animation: winnerLock 0.5s 2.55s forwards; }
@keyframes flickerOnce {
    0%   { opacity: 0; }
    30%  { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes winnerLock {
    0%   { opacity: 0; transform: scale(1.15); }
    40%  { opacity: 1; transform: scale(1); }
    100% { opacity: 1; transform: scale(1); }
}
.cursor-blink {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--accent-warm);
    margin-left: 4px;
    animation: blink 1s steps(2) infinite;
    vertical-align: middle;
}
@keyframes wordIn {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes blink {
    50% { opacity: 0; }
}

/* Token prediction probability panel */
.token-predictions {
    list-style: none;
    padding: 0;
    margin: clamp(0.9rem, 2vw, 1.4rem) 0 0 0;
    display: flex;
    flex-direction: column;
    gap: clamp(0.3rem, 0.7vw, 0.5rem);
    font-family: var(--font-display);
    font-size: clamp(0.85rem, 1.3vw, 1.05rem);
}
.pred-row {
    display: grid;
    grid-template-columns: 4.5em 1fr 2.8em;
    align-items: center;
    gap: 0.7rem;
    opacity: 0;
    animation: predIn 0.4s var(--ease) forwards;
    animation-delay: calc(3s + var(--d));
    color: var(--text-faint);
}
.pred-row:first-child {
    color: var(--accent-warm);
    font-weight: 600;
    font-style: italic;
}
.pred-label { text-align: right; }
.pred-pct { text-align: left; font-variant-numeric: tabular-nums; }
.pred-bar {
    position: relative;
    height: 6px;
    background: rgba(10, 37, 64, 0.08);
    border-radius: 3px;
    overflow: hidden;
}
.pred-bar::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: rgba(139, 155, 176, 0.5);
    border-radius: 3px;
    animation: barFill 0.9s var(--ease) forwards;
    animation-delay: calc(3.1s + var(--d));
}
.pred-row:first-child .pred-bar::after {
    background: linear-gradient(90deg, var(--accent-warm), var(--accent-sage));
    box-shadow: 0 0 8px rgba(0, 82, 155, 0.35);
}
@keyframes predIn { to { opacity: 1; } }
@keyframes barFill { to { width: var(--p); } }

/* ===========================================
   SLIDE — Reasoning models (thinking out loud)
   =========================================== */
.thinking-bubble {
    background: linear-gradient(135deg, rgba(0, 82, 155, 0.06), rgba(111, 177, 214, 0.05));
    border-left: 2px solid var(--accent-warm);
    padding: clamp(1rem, 2.5vw, 2rem);
    border-radius: 4px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(0.95rem, 1.8vw, 1.4rem);
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 50ch;
    position: relative;
}
.thinking-bubble .problem {
    display: block;
    font-family: var(--font-body);
    font-style: normal;
    font-size: 0.78em;
    color: var(--text-primary);
    padding-bottom: 0.7rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(-6px);
    animation: problemIn 0.6s var(--ease) forwards;
    animation-delay: calc(0.3s + var(--d, 0s));
}
.thinking-bubble .step {
    display: block;
    opacity: 0;
    transform: translateX(-10px);
    animation: stepIn 0.6s var(--ease) forwards;
    animation-delay: calc(0.3s + var(--d, 0s));
    margin-bottom: 0.55rem;
    position: relative;
}
.thinking-bubble .step::before {
    content: "› ";
    color: var(--accent-warm);
    margin-right: 0.4em;
}
.thinking-bubble .step.mistake {
    color: var(--text-faint);
}
.thinking-bubble .step.mistake::after {
    content: "";
    position: absolute;
    left: 1.2em;
    right: 0.2em;
    top: 52%;
    height: 2px;
    background: var(--accent-warm);
    opacity: 0.65;
    transform: scaleX(0);
    transform-origin: left;
    animation: strikeThrough 0.55s var(--ease) forwards;
    animation-delay: calc(0.3s + var(--d, 0s) + 0.9s);
}
.thinking-bubble .step.correction {
    color: var(--accent-warm);
    font-weight: 500;
}
.thinking-bubble .step.correction::before {
    content: "↩ ";
    color: var(--accent-warm);
    font-weight: 600;
}
.thinking-bubble .answer {
    display: block;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    color: var(--text-primary);
    font-style: normal;
    font-family: var(--font-body);
    font-weight: 400;
    opacity: 0;
    animation: stepIn 0.7s var(--ease) forwards;
    animation-delay: calc(0.3s + var(--d, 0s));
}
@keyframes stepIn {
    to { opacity: 1; transform: translateX(0); }
}
@keyframes problemIn {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes strikeThrough {
    to { transform: scaleX(1); }
}

/* ===========================================
   SLIDE — Population (evolution algorithm intro)
   Grid of dots representing individuals, varied
   =========================================== */
.population {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: clamp(8px, 1.2vw, 16px);
    max-width: min(80vw, 600px);
    aspect-ratio: 8 / 5;
}
.individual {
    border-radius: 50%;
    background: var(--accent-sage);
    opacity: 0;
    transform: scale(0);
    animation: popIn 0.5s var(--ease) forwards;
}
@keyframes popIn {
    to { opacity: 0.9; transform: scale(1); }
}
.individual.warm  { background: var(--accent-warm); }
.individual.gold  { background: var(--accent-gold); }
.individual.pink  { background: var(--accent-pink); }
.individual.sage  { background: var(--accent-sage); }
.individual.faint { background: var(--text-faint); opacity: 0.4 !important; }
.individual.bright {
    box-shadow: 0 0 18px var(--accent-warm);
    transform: scale(1.15);
}

/* Selection arrow / label */
.cycle-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.6rem, 2vw, 1.5rem);
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: var(--small-size);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}
.cycle-step {
    padding: clamp(0.6rem, 1.5vw, 1rem) clamp(0.9rem, 2vw, 1.5rem);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-primary);
    transition: all 0.4s var(--ease);
}
.cycle-step.warm { border-color: var(--accent-warm); color: var(--accent-warm); }
.cycle-step.sage { border-color: var(--accent-sage); color: var(--accent-sage); }
.cycle-step.pink { border-color: var(--accent-pink); color: var(--accent-pink); }
.cycle-step.gold { border-color: var(--accent-gold); color: var(--accent-gold); }
.cycle-arrow {
    color: var(--text-faint);
    font-family: var(--font-display);
    font-style: italic;
}

/* ===========================================
   SLIDE — Crossover (combinación) animation
   Two parents → one child via mixing strands
   =========================================== */
.crossover-stage {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: clamp(0.5rem, 2vw, 1.5rem);
    max-width: min(95vw, 900px);
    width: 100%;
    margin: 0 auto;
}
.parent, .child {
    display: flex; flex-direction: column;
    gap: 6px;
    padding: clamp(0.7rem, 1.8vw, 1.2rem);
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 4px 18px rgba(10, 37, 64, 0.06);
}
.parent .label, .child .label {
    font-family: var(--font-mono);
    font-size: var(--small-size);
    color: var(--text-faint);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}
.gene-row { display: flex; gap: 4px; }
.gene {
    flex: 1;
    height: clamp(18px, 3vh, 28px);
    border-radius: 4px;
}
.gene.A { background: var(--accent-warm); }
.gene.B { background: var(--accent-sage); }
.cross-arrow {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: var(--accent-pink);
}
.cross-arrow .label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--small-size);
    color: var(--text-faint);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-top: 0.3rem;
}

/* ===========================================
   SLIDE — Mutation (mutación) animation
   =========================================== */
.mutation-row { display: flex; gap: 6px; align-items: center; justify-content: center; }
.mutation-row .gene.flicker {
    animation: flicker 1.6s ease-in-out infinite;
}
@keyframes flicker {
    0%, 100% { background: var(--accent-warm); }
    50% { background: var(--accent-pink); transform: scale(1.1); }
}

/* ===========================================
   SLIDE — Union (LLM + EA central thesis)
   Venn-like overlap
   =========================================== */
.venn-wrap {
    position: relative;
    width: clamp(220px, 36vw, 460px);
    height: clamp(160px, 25vh, 320px);
    margin: 0 auto;
}
.venn-circle {
    position: absolute;
    width: 65%;
    height: 100%;
    border-radius: 50%;
    filter: blur(2px);
    mix-blend-mode: multiply;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: var(--text-primary);
    opacity: 0;
    animation: vennIn 1.2s var(--ease) forwards;
}
.venn-left  { left: 0; background: radial-gradient(circle, rgba(0, 82, 155, 0.55), transparent 70%); animation-delay: 0.3s; }
.venn-right { right: 0; background: radial-gradient(circle, rgba(111, 177, 214, 0.7), transparent 70%); animation-delay: 0.7s; }
@keyframes vennIn {
    to { opacity: 1; }
}
.venn-label {
    position: absolute;
    bottom: -1.5em;
    width: 100%;
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--small-size);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-secondary);
}

/* ===========================================
   SLIDE — RISC-V chip
   =========================================== */
.chip-stage {
    position: relative;
    width: clamp(260px, 38vw, 480px);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}
.chip-core {
    position: absolute; inset: 18%;
    border: 2px solid var(--accent-warm);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 82, 155, 0.08), rgba(111, 177, 214, 0.05));
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: clamp(1rem, 2.2vw, 1.6rem);
    color: var(--accent-warm);
    letter-spacing: 0.15em;
    box-shadow: 0 0 0 4px rgba(0, 82, 155, 0.06), inset 0 0 30px rgba(0, 82, 155, 0.08);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
    overflow: hidden;
}
.slide.visible .chip-core {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.3s;
    animation: chip-breathe 3.2s ease-in-out 1.4s infinite;
}
.chip-core-label { position: relative; z-index: 2; }
.chip-scan {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(233, 196, 106, 0.28) 50%, transparent 65%);
    opacity: 0;
    pointer-events: none;
}
.slide.visible .chip-scan { animation: chip-scan 4.5s ease-in-out 1.8s infinite; }
@keyframes chip-breathe {
    0%, 100% { box-shadow: 0 0 0 4px rgba(0, 82, 155, 0.06), inset 0 0 30px rgba(0, 82, 155, 0.08); }
    50%      { box-shadow: 0 0 0 8px rgba(0, 82, 155, 0.12), 0 0 40px rgba(233, 196, 106, 0.25), inset 0 0 48px rgba(0, 82, 155, 0.18); }
}
@keyframes chip-scan {
    0%   { transform: translateX(-120%); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateX(120%); opacity: 0; }
}
.chip-pin {
    position: absolute;
    width: 18px; height: 4px;
    background: var(--accent-gold);
    border-radius: 2px;
    opacity: 0;
    animation: pin-in 0.4s var(--ease) forwards;
}
.chip-pin.top    { top: 14%; transform: translateX(-50%); }
.chip-pin.bottom { bottom: 14%; transform: translateX(-50%); }
.chip-pin.left   { left: 14%; transform: translateY(-50%) rotate(90deg); }
.chip-pin.right  { right: 14%; transform: translateY(-50%) rotate(90deg); }
@keyframes pin-in { to { opacity: 0.5; } }
.slide.visible .chip-pin {
    animation: pin-in 0.4s var(--ease) forwards, pin-chase 3.6s linear 2s infinite;
}
.slide.visible .chip-pin[data-i="0"]  { animation-delay: 0s, calc(2s + 0.0s); }
.slide.visible .chip-pin[data-i="1"]  { animation-delay: 0s, calc(2s + 0.25s); }
.slide.visible .chip-pin[data-i="2"]  { animation-delay: 0s, calc(2s + 0.5s); }
.slide.visible .chip-pin[data-i="3"]  { animation-delay: 0s, calc(2s + 0.75s); }
.slide.visible .chip-pin[data-i="4"]  { animation-delay: 0s, calc(2s + 1s); }
.slide.visible .chip-pin[data-i="5"]  { animation-delay: 0s, calc(2s + 1.25s); }
.slide.visible .chip-pin[data-i="6"]  { animation-delay: 0s, calc(2s + 1.5s); }
.slide.visible .chip-pin[data-i="7"]  { animation-delay: 0s, calc(2s + 1.75s); }
.slide.visible .chip-pin[data-i="8"]  { animation-delay: 0s, calc(2s + 2s); }
.slide.visible .chip-pin[data-i="9"]  { animation-delay: 0s, calc(2s + 2.25s); }
.slide.visible .chip-pin[data-i="10"] { animation-delay: 0s, calc(2s + 2.5s); }
.slide.visible .chip-pin[data-i="11"] { animation-delay: 0s, calc(2s + 2.75s); }
@keyframes pin-chase {
    0%, 100% { opacity: 0.5; box-shadow: none; }
    8%       { opacity: 1; box-shadow: 0 0 10px 2px rgba(233, 196, 106, 0.85); }
    20%      { opacity: 0.5; box-shadow: none; }
}
.chip-pulse {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent-gold);
    box-shadow: 0 0 8px 2px rgba(233, 196, 106, 0.7);
    opacity: 0;
    pointer-events: none;
}
.slide.visible .chip-pulse-top    { left: 50%; top: 18%;     animation: pulse-v-down 2.8s ease-in-out 2.2s infinite; }
.slide.visible .chip-pulse-bottom { left: 50%; bottom: 18%;  animation: pulse-v-up   2.8s ease-in-out 3.1s infinite; }
.slide.visible .chip-pulse-left   { top: 50%; left: 18%;     animation: pulse-h-right 2.8s ease-in-out 2.6s infinite; }
.slide.visible .chip-pulse-right  { top: 50%; right: 18%;    animation: pulse-h-left  2.8s ease-in-out 3.5s infinite; }
@keyframes pulse-v-down {
    0%   { transform: translate(-50%, -3.5vw); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translate(-50%, 0); opacity: 0; }
}
@keyframes pulse-v-up {
    0%   { transform: translate(-50%, 3.5vw); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translate(-50%, 0); opacity: 0; }
}
@keyframes pulse-h-right {
    0%   { transform: translate(-3.5vw, -50%); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translate(0, -50%); opacity: 0; }
}
@keyframes pulse-h-left {
    0%   { transform: translate(3.5vw, -50%); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translate(0, -50%); opacity: 0; }
}
.chip-tag {
    position: absolute;
    font-family: var(--font-mono);
    font-size: var(--small-size);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-faint);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.slide.visible .chip-tag { opacity: 1; transform: none; }
.chip-tag.eu { top: 0; left: 50%; transform: translateX(-50%) translateY(8px); color: var(--accent-warm); transition-delay: 1.1s; }
.slide.visible .chip-tag.eu { transform: translateX(-50%); }
.chip-tag.open { bottom: 0; left: 50%; transform: translateX(-50%) translateY(8px); color: var(--accent-gold); transition-delay: 1.5s; }
.slide.visible .chip-tag.open { transform: translateX(-50%); }

/* ===========================================
   SLIDE — DNA sequence alignment
   =========================================== */
.dna-align {
    display: flex;
    flex-direction: column;
    gap: clamp(0.3rem, 0.8vw, 0.6rem);
    font-family: var(--font-mono);
    font-size: clamp(0.9rem, 1.8vw, 1.4rem);
    letter-spacing: 0.15em;
    max-width: min(90vw, 720px);
    margin: 0 auto;
}
.dna-row {
    display: flex;
    gap: clamp(4px, 0.8vw, 8px);
    justify-content: center;
}
.dna-base {
    width: 1.6em; height: 1.6em;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    font-weight: 500;
    opacity: 0;
    transform: translateY(10px);
    animation: base-in 0.4s var(--ease) forwards;
}
.slide.visible .dna-row:nth-child(1) .dna-base { animation-delay: calc(0.4s + var(--i) * 0.06s); }
.slide.visible .dna-row:nth-child(2) .dna-base { animation-delay: calc(1.4s + var(--i) * 0.06s); }
.dna-base.A { background: rgba(0, 82, 155, 0.18); color: var(--accent-warm); }
.dna-base.T { background: rgba(111, 177, 214, 0.22); color: var(--accent-gold); }
.dna-base.G { background: rgba(74, 144, 194, 0.22); color: var(--accent-pink); }
.dna-base.C { background: rgba(30, 96, 145, 0.18); color: var(--accent-gold); }
.dna-base.gap {
    background: transparent;
    border: 1px dashed var(--text-faint);
    color: var(--text-faint);
}
.dna-base.match { box-shadow: 0 0 0 2px var(--accent-warm); }
@keyframes base-in { to { opacity: 1; transform: none; } }
.dna-caption {
    margin-top: clamp(0.6rem, 1.5vh, 1rem);
    font-family: var(--font-mono);
    font-size: var(--small-size);
    color: var(--text-faint);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    text-align: center;
}

/* ===========================================
   SLIDE — DNA alignment LOOP animation
   10s cycle, 3 clear phases:
     Phase 1 (0-3.3s)  "qry más corta" — qry col-4,5 shifted left; ref C orphan pulses red
     Phase 2 (3.3-5s)  "insertar hueco" — arrow blinks at col-3; gap pops in; qry bases slide right
     Phase 3 (5-9s)    "alineado ✓"     — every column glows green one-by-one
     (9-10s reset)
   =========================================== */
.align-loop {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1.2vw, 0.9rem);
    padding: clamp(0.8rem, 2vw, 1.4rem) clamp(1rem, 2.5vw, 2rem);
    max-width: min(92vw, 600px);
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 6px 22px rgba(10, 37, 64, 0.06);
    --base-w: clamp(1.6em, 3.2vw, 2em);
    --base-gap: clamp(4px, 0.8vw, 8px);
    --shift: calc(-1 * (var(--base-w) + var(--base-gap)));
}
.align-row {
    display: flex;
    gap: clamp(4px, 0.8vw, 8px);
    align-items: center;
    justify-content: flex-start;
    position: relative;
}
.align-label {
    font-family: var(--font-mono);
    font-size: var(--small-size);
    color: var(--text-faint);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    width: 3em;
    text-align: right;
    margin-right: 0.5em;
    flex-shrink: 0;
}
.align-loop .base {
    width: clamp(1.6em, 3.2vw, 2em);
    height: clamp(1.6em, 3.2vw, 2em);
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: clamp(0.95rem, 1.8vw, 1.3rem);
    background: rgba(10, 37, 64, 0.05);
    color: var(--text-primary);
    flex-shrink: 0;
}
.align-loop .base.gap {
    color: var(--text-faint);
    border: 1px dashed var(--text-faint);
    background: transparent;
}

/* Phase 1: qry col-4, col-5 start shifted LEFT by one base-width (no gap yet).
   Phase 2: they slide back to their proper position as the gap pops in. */
.slide.visible .align-loop .shift-cell {
    animation: qry-shift 10s ease-in-out infinite;
}
@keyframes qry-shift {
    0%, 40%   { transform: translateX(var(--shift)); }
    50%, 100% { transform: translateX(0); }
}

/* Gap cell: invisible in phase 1, pops in during phase 2, stays in phase 3. */
.slide.visible .align-loop .gap.col-3 {
    animation: gap-pop 10s ease-in-out infinite;
}
@keyframes gap-pop {
    0%, 42%   { opacity: 0; transform: scale(0.2); }
    50%       { opacity: 1; transform: scale(1.3); }
    55%, 90%  { opacity: 1; transform: scale(1); }
    96%, 100% { opacity: 0; transform: scale(0.2); }
}

/* Ref "C" at col-3: orphan (no partner) — pulses red in phase 1, calms green in phase 3. */
.slide.visible .align-loop .orphan {
    animation: orphan-pulse 10s ease-in-out infinite;
}
@keyframes orphan-pulse {
    0%      { background: rgba(10, 37, 64, 0.05); box-shadow: none; }
    8%, 32% { background: rgba(230, 120, 120, 0.35); box-shadow: 0 0 0 2px var(--accent-pink), 0 0 14px rgba(230, 120, 120, 0.5); }
    50%     { background: rgba(10, 37, 64, 0.05); box-shadow: none; }
    62%     { background: rgba(120, 180, 130, 0.38); box-shadow: 0 0 0 2px var(--accent-sage), 0 0 12px rgba(120, 180, 130, 0.5); }
    90%     { background: rgba(120, 180, 130, 0.38); box-shadow: 0 0 0 2px var(--accent-sage); }
    100%    { background: rgba(10, 37, 64, 0.05); box-shadow: none; }
}

/* Phase 3: all paired bases glow green in a left-to-right sweep (6 cols, ~0.3s each).
   Starts at 52% (5.2s), column N lights up at 52% + N*3%. */
.slide.visible .align-loop .ref-base:not(.orphan),
.slide.visible .align-loop .qry-base {
    animation: pair-match 10s ease-in-out infinite;
}
@keyframes pair-match {
    0%, 50%   { background: rgba(10, 37, 64, 0.05); box-shadow: none; }
    55%       { background: rgba(120, 180, 130, 0.45); box-shadow: 0 0 0 2px var(--accent-sage), 0 0 10px rgba(120, 180, 130, 0.4); }
    90%       { background: rgba(120, 180, 130, 0.38); box-shadow: 0 0 0 2px var(--accent-sage); }
    96%, 100% { background: rgba(10, 37, 64, 0.05); box-shadow: none; }
}
.slide.visible .align-loop .col-0.qry-base,
.slide.visible .align-loop .col-0.ref-base { animation-delay: 0s; }
.slide.visible .align-loop .col-1.qry-base,
.slide.visible .align-loop .col-1.ref-base { animation-delay: 0.15s; }
.slide.visible .align-loop .col-2.qry-base,
.slide.visible .align-loop .col-2.ref-base { animation-delay: 0.3s; }
.slide.visible .align-loop .col-4.qry-base,
.slide.visible .align-loop .col-4.ref-base { animation-delay: 0.6s; }
.slide.visible .align-loop .col-5.qry-base,
.slide.visible .align-loop .col-5.ref-base { animation-delay: 0.75s; }

.align-status {
    margin-top: clamp(0.4rem, 1vh, 0.7rem);
    font-family: var(--font-mono);
    font-size: var(--small-size);
    color: var(--text-faint);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
    min-height: 1.4em;
    position: relative;
}
.align-status .phase {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    white-space: nowrap;
}
.align-status .phase-3 { color: var(--accent-sage); font-weight: 600; }
.align-status .phase-2 { color: var(--accent-pink); }
.slide.visible .align-status .phase-1 { animation: phase-1-in 10s ease-in-out infinite; }
.slide.visible .align-status .phase-2 { animation: phase-2-in 10s ease-in-out infinite; }
.slide.visible .align-status .phase-3 { animation: phase-3-in 10s ease-in-out infinite; }
@keyframes phase-1-in {
    0%, 2%    { opacity: 0; }
    7%, 30%   { opacity: 1; }
    33%, 100% { opacity: 0; }
}
@keyframes phase-2-in {
    0%, 34%   { opacity: 0; }
    38%, 48%  { opacity: 1; }
    52%, 100% { opacity: 0; }
}
@keyframes phase-3-in {
    0%, 53%   { opacity: 0; }
    58%, 92%  { opacity: 1; }
    96%, 100% { opacity: 0; }
}

/* ===========================================
   SLIDE — Why alignment matters (impact cards)
   =========================================== */
.impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.6rem, 1.5vw, 1.2rem);
    max-width: min(95vw, 1100px);
    width: 100%;
    margin: 0 auto;
}
@media (max-width: 800px) { .impact-grid { grid-template-columns: repeat(2, 1fr); } }
.impact-card {
    padding: clamp(0.9rem, 2vw, 1.6rem);
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 6px 22px rgba(10, 37, 64, 0.07);
    display: flex; flex-direction: column;
    gap: clamp(0.4rem, 1vw, 0.7rem);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.slide.visible .impact-card.c1 { transition-delay: 0.4s; opacity: 1; transform: none; }
.slide.visible .impact-card.c2 { transition-delay: 0.6s; opacity: 1; transform: none; }
.slide.visible .impact-card.c3 { transition-delay: 0.8s; opacity: 1; transform: none; }
.slide.visible .impact-card.c4 { transition-delay: 1.0s; opacity: 1; transform: none; }
.impact-icon {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    color: var(--accent-warm);
    line-height: 1;
}
.impact-card h3 {
    font-size: clamp(1rem, 1.8vw, 1.3rem);
    font-style: normal;
    color: var(--text-primary);
}
.impact-card p {
    font-size: clamp(0.78rem, 1.2vw, 0.95rem);
    line-height: 1.45;
}

/* ===========================================
   SLIDE — Closing
   =========================================== */
.closing .slide-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.closing-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
    max-width: min(95vw, 1200px);
    width: 100%;
}
@media (max-width: 820px) {
    .closing-grid { grid-template-columns: 1fr; gap: clamp(1rem, 3vh, 2rem); }
}
.closing-copy {
    display: flex;
    flex-direction: column;
    gap: clamp(0.6rem, 1.6vh, 1.1rem);
    align-items: flex-start;
    text-align: left;
}
.closing-answer {
    font-style: italic;
    line-height: 1.05;
    margin: 0;
}
.closing-answer em {
    font-style: italic;
    color: var(--accent-warm);
    position: relative;
}
.closing-answer em::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -0.05em;
    height: 2px;
    background: var(--accent-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s var(--ease) 1s;
}
.slide.closing.visible .closing-answer em::after { transform: scaleX(1); }
.closing-lede {
    max-width: 42ch;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: var(--text-secondary);
    line-height: 1.55;
}
.closing-lede strong {
    color: var(--accent-warm);
    font-weight: 500;
}

.closing .thanks {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 7vw, 4.8rem);
    color: var(--accent-warm);
    font-style: italic;
    line-height: 1;
    margin: clamp(0.4rem, 1.5vh, 1rem) 0 0;
    display: inline-flex;
    gap: 0.02em;
}
.closing .thanks-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px) rotate(-6deg);
    filter: blur(6px);
    transition:
        opacity 0.55s var(--ease),
        transform 0.7s cubic-bezier(.34, 1.56, .64, 1),
        filter 0.55s var(--ease);
}
.slide.closing.visible .thanks-letter {
    opacity: 1;
    transform: none;
    filter: none;
    transition-delay: calc(0.9s + var(--i) * 0.06s);
}

.closing-contact {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: clamp(0.6rem, 2vh, 1.2rem);
    padding-top: clamp(0.6rem, 2vh, 1.2rem);
    border-top: 1px solid var(--line);
    width: 100%;
    max-width: 32rem;
}
.closing-contact .contact-name {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    color: var(--text-primary);
    letter-spacing: 0.01em;
}
.closing-contact .contact-role {
    font-family: var(--font-mono);
    font-size: var(--small-size);
    color: var(--text-faint);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* QR column */
.closing-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
}
.qr-frame {
    position: relative;
    padding: clamp(0.6rem, 1.4vw, 1rem);
    background: rgba(244, 247, 251, 0.92);
    border: 1px solid var(--line);
    border-radius: 4px;
    backdrop-filter: blur(4px);
    box-shadow: 0 8px 28px -16px rgba(10, 37, 64, 0.35);
    animation: qr-pulse 3.6s ease-in-out infinite;
}
@keyframes qr-pulse {
    0%, 100% { box-shadow: 0 8px 28px -16px rgba(10, 37, 64, 0.35), 0 0 0 0 rgba(0, 82, 155, 0.22); }
    50%      { box-shadow: 0 8px 28px -16px rgba(10, 37, 64, 0.35), 0 0 36px 4px rgba(0, 82, 155, 0.26); }
}
.qr-img {
    display: block;
    width: clamp(200px, 22vw, 300px);
    height: auto;
    aspect-ratio: 1 / 1;
    image-rendering: pixelated;
}
.qr-corners span {
    position: absolute;
    width: 14px;
    height: 14px;
    border-color: var(--accent-gold);
    border-style: solid;
    border-width: 0;
}
.qr-corners span:nth-child(1) { top: -2px;    left: -2px;    border-top-width: 2px;    border-left-width: 2px;  }
.qr-corners span:nth-child(2) { top: -2px;    right: -2px;   border-top-width: 2px;    border-right-width: 2px; }
.qr-corners span:nth-child(3) { bottom: -2px; left: -2px;    border-bottom-width: 2px; border-left-width: 2px;  }
.qr-corners span:nth-child(4) { bottom: -2px; right: -2px;   border-bottom-width: 2px; border-right-width: 2px; }
.qr-caption {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: var(--accent-warm);
}
.qr-url {
    font-family: var(--font-mono);
    font-size: calc(var(--small-size) * 0.95);
    color: var(--text-faint);
    letter-spacing: 0.08em;
    text-decoration: none;
    border-bottom: 1px dashed var(--line);
    padding-bottom: 2px;
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.qr-url:hover { color: var(--accent-gold); border-color: var(--accent-gold); }

/* ===========================================
   UI: Progress bar + nav dots + slide counter
   =========================================== */
.progress-bar {
    position: fixed; top: 0; left: 0;
    height: 2px; width: 0%;
    background: var(--accent-warm);
    z-index: 50;
    transition: width 0.3s var(--ease);
}
.nav-dots {
    position: fixed;
    right: clamp(0.6rem, 1.5vw, 1.5rem);
    top: 50%;
    transform: translateY(-50%);
    display: flex; flex-direction: column;
    gap: 10px;
    z-index: 40;
}
.nav-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--text-faint);
    border: none;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    opacity: 0.5;
}
.nav-dot:hover { opacity: 1; }
.nav-dot.active {
    background: var(--accent-warm);
    opacity: 1;
    transform: scale(1.5);
}
.slide-counter {
    position: fixed;
    bottom: clamp(0.8rem, 2vh, 1.5rem);
    left: clamp(0.8rem, 2vw, 1.5rem);
    font-family: var(--font-mono);
    font-size: var(--small-size);
    color: var(--text-faint);
    letter-spacing: 0.2em;
    z-index: 40;
}
.slide-counter span { color: var(--accent-warm); }
.keyboard-hint {
    position: fixed;
    bottom: clamp(0.8rem, 2vh, 1.5rem);
    right: clamp(0.8rem, 2vw, 1.5rem);
    font-family: var(--font-mono);
    font-size: var(--small-size);
    color: var(--text-faint);
    letter-spacing: 0.15em;
    z-index: 40;
    opacity: 0.6;
}
@media (max-width: 700px) { .keyboard-hint { display: none; } }

.fullscreen-btn {
    position: fixed;
    top: clamp(0.8rem, 2vh, 1.5rem);
    right: clamp(0.8rem, 2vw, 1.5rem);
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(10, 37, 64, 0.25);
    border-radius: 6px;
    color: var(--accent-warm);
    cursor: pointer;
    z-index: 9999;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 10px -4px rgba(10, 37, 64, 0.25);
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}
.fullscreen-btn:hover {
    background: var(--accent-warm);
    color: #fff;
    border-color: var(--accent-warm);
    transform: scale(1.05);
}
.fullscreen-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.is-fullscreen .fullscreen-btn { display: none; }

/* ===========================================
   SLIDE — Phases diagram (evolutionary loop)
   Sequentially lights each phase, then the return arrow
   =========================================== */
.phases-diagram {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, auto);
    align-items: center;
    justify-content: center;
    gap: clamp(0.3rem, 0.9vw, 0.8rem);
    width: min(96vw, 1100px);
    padding: 0.5rem clamp(0.5rem, 2vw, 1rem) 0;
    margin: 0 auto;
}
.phase-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: clamp(0.7rem, 1.4vw, 1rem) clamp(0.7rem, 1.4vw, 1.1rem);
    min-width: clamp(6.5rem, 13vw, 10.5rem);
    border: 1.5px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.65);
    box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05);
    text-align: center;
    animation: phaseLight 10s infinite;
    animation-play-state: paused;
}
.slide.visible .phase-card,
.slide.visible .phase-arrow,
.slide.visible .phase-loop .loop-path,
.slide.visible .phase-loop .loop-label {
    animation-play-state: running;
}
.phase-card .phase-num {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-faint);
    letter-spacing: 0.18em;
}
.phase-card .phase-name {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(0.95rem, 1.5vw, 1.2rem);
    color: var(--text-primary);
    line-height: 1.15;
}
.phase-card .phase-desc {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-faint);
    text-transform: lowercase;
    letter-spacing: 0.08em;
}
.phase-arrow {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.5vw, 2rem);
    color: var(--text-faint);
    animation: phaseArrow 10s infinite;
    animation-play-state: paused;
}
@keyframes phaseLight {
    0%, 14% {
        border-color: var(--accent-warm);
        box-shadow: 0 0 0 3px rgba(0, 82, 155, 0.18), 0 10px 26px rgba(0, 82, 155, 0.22);
        transform: translateY(-4px) scale(1.05);
        background: rgba(255, 255, 255, 0.98);
    }
    22%, 100% {
        border-color: var(--line);
        box-shadow: 0 4px 14px rgba(10, 37, 64, 0.05);
        transform: translateY(0) scale(1);
        background: rgba(255, 255, 255, 0.65);
    }
}
@keyframes phaseArrow {
    0%, 3% { color: var(--text-faint); transform: translateX(-4px); opacity: 0.5; }
    7%     { color: var(--accent-gold); transform: translateX(4px); opacity: 1; }
    13%, 100% { color: var(--text-faint); transform: translateX(0); opacity: 1; }
}
.phase-card.pc-0  { animation-delay: 0s; }
.phase-arrow.pa-0 { animation-delay: 1.5s; }
.phase-card.pc-1  { animation-delay: 2s; }
.phase-arrow.pa-1 { animation-delay: 3.5s; }
.phase-card.pc-2  { animation-delay: 4s; }
.phase-arrow.pa-2 { animation-delay: 5.5s; }
.phase-card.pc-3  { animation-delay: 6s; }

/* Loop-back arrow (phase 3 → phase 1), skips "población inicial" */
.phase-loop {
    grid-column: 1 / -1;
    width: 100%;
    height: clamp(70px, 9vh, 110px);
    margin-top: -0.2rem;
    pointer-events: none;
    overflow: visible;
}
.phase-loop .loop-path {
    stroke: var(--accent-gold);
    stroke-width: 2.5;
    stroke-dasharray: 6 6;
    fill: none;
    opacity: 0.55;
    animation: loopDash 1.6s linear infinite, loopPulse 10s infinite;
    animation-delay: 0s, 7.5s;
    animation-play-state: paused;
}
.phase-loop .loop-label {
    font-family: var(--font-mono);
    font-size: 11px;
    fill: var(--text-faint);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    animation: loopLabel 10s infinite;
    animation-delay: 7.5s;
    animation-play-state: paused;
}
@keyframes loopDash  { to { stroke-dashoffset: -24; } }
@keyframes loopPulse {
    0%, 12%   { opacity: 1; stroke: var(--accent-warm); stroke-width: 3.5; }
    28%, 100% { opacity: 0.55; stroke: var(--accent-gold); stroke-width: 2.5; }
}
@keyframes loopLabel {
    0%, 14%   { fill: var(--accent-warm); }
    26%, 100% { fill: var(--text-faint); }
}

@media (max-width: 900px) {
    .phases-diagram { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    .phase-arrow, .phase-loop { display: none; }
}

/* ===========================================
   RESEARCH — EA applied per-phase visuals
   =========================================== */

.code-card {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.7rem 0.85rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: clamp(95px, 11vw, 135px);
}
.code-card.seed {
    min-width: clamp(120px, 14vw, 160px);
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--accent-warm);
    box-shadow: 0 2px 14px rgba(0, 82, 155, 0.12);
}
.code-card.mini {
    padding: 0.45rem 0.5rem;
    gap: 3px;
    min-width: clamp(55px, 7vw, 80px);
}
.code-tag {
    font-family: var(--font-mono);
    font-size: var(--small-size);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 2px;
}
.code-line {
    display: block;
    height: 4px;
    border-radius: 3px;
    background: var(--text-faint);
    opacity: 0.55;
}
.code-line.A { background: var(--accent-warm); opacity: 0.8; }
.code-line.B { background: var(--accent-sage); opacity: 0.9; }
.code-line.hl {
    background: var(--accent-gold);
    opacity: 0.95;
    animation: hlPulse 2.4s ease-in-out 1.2s infinite;
}
@keyframes hlPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(30, 96, 145, 0); }
    50%      { box-shadow: 0 0 10px 2px rgba(30, 96, 145, 0.55); }
}

.prog-fan-stage {
    display: flex;
    align-items: center;
    gap: clamp(0.8rem, 2.5vw, 2rem);
    margin-top: clamp(0.3rem, 1.5vh, 1rem);
    flex-wrap: wrap;
    justify-content: center;
}
.code-fan {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: clamp(6px, 1vw, 10px);
}

.fan-arrow, .flow-arrow {
    font-family: var(--font-mono);
    font-size: var(--small-size);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-warm);
    text-align: center;
    line-height: 1.35;
}

.mutation-flow,
.crossover-applied,
.validation-flow,
.fitness-applied {
    display: flex;
    align-items: center;
    gap: clamp(0.6rem, 1.8vw, 1.3rem);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: clamp(0.3rem, 1.5vh, 1rem);
}

.idea-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    max-width: clamp(180px, 22vw, 260px);
    justify-content: center;
}
.idea-chip {
    font-family: var(--font-mono);
    font-size: var(--small-size);
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    color: var(--text-secondary);
    opacity: 0.55;
}
.idea-chip.picked {
    color: var(--accent-warm);
    border-color: var(--accent-warm);
    background: rgba(255, 255, 255, 0.95);
    opacity: 1;
    font-weight: 600;
    animation: pickPulse 2.6s ease-in-out 1s infinite;
}
@keyframes pickPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 82, 155, 0); }
    50%      { transform: scale(1.1);  box-shadow: 0 0 0 6px rgba(0, 82, 155, 0.12); }
}

.llm-box {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-style: italic;
    padding: 0.6rem 1.1rem;
    border: 1.5px solid var(--accent-pink);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--accent-pink);
    letter-spacing: 0.15em;
}

.parent-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gate-box {
    padding: 0.8rem 1rem;
    border: 1.5px dashed var(--accent-gold);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.75);
    text-align: center;
}
.gate-title {
    font-family: var(--font-mono);
    font-size: var(--small-size);
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    line-height: 1.55;
}
.gate-paths {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}
.path-ok, .path-fail {
    font-family: var(--font-mono);
    font-size: var(--small-size);
    letter-spacing: 0.08em;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
}
.path-ok   { color: var(--accent-sage); background: rgba(111, 177, 214, 0.18); }
.path-fail { color: var(--accent-pink); background: rgba(74, 144, 194, 0.16); }

.bench-box {
    padding: 0.55rem 0.85rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.65);
    text-align: center;
}
.bench-title {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--small-size);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.45rem;
}
.bench-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: clamp(50px, 8vh, 78px);
}
.bench-bars .bar {
    width: 10px;
    height: var(--h);
    background: linear-gradient(to top, var(--accent-warm), var(--accent-gold));
    border-radius: 2px 2px 0 0;
    transform-origin: bottom;
    animation: barGrow 2.6s ease-in-out 1s infinite;
}
.bench-bars .bar:nth-child(1) { animation-delay: 1.0s; }
.bench-bars .bar:nth-child(2) { animation-delay: 1.2s; }
.bench-bars .bar:nth-child(3) { animation-delay: 1.4s; }
.bench-bars .bar:nth-child(4) { animation-delay: 1.6s; }
.bench-bars .bar:nth-child(5) { animation-delay: 1.8s; }
@keyframes barGrow {
    0%, 15%, 100% { transform: scaleY(0.35); }
    55%           { transform: scaleY(1); }
}

.score-bubble {
    padding: 0.8rem 1.1rem;
    border: 1.5px solid var(--accent-warm);
    border-radius: 50%;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    min-width: clamp(75px, 9vw, 100px);
    box-shadow: 0 2px 14px rgba(0, 82, 155, 0.15);
}
.score-label {
    font-family: var(--font-mono);
    font-size: var(--small-size);
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    text-transform: uppercase;
}
.score-num {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: clamp(1.2rem, 2.4vw, 1.8rem);
    color: var(--accent-warm);
}

.selection-applied {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: clamp(0.3rem, 1.5vh, 1rem);
    width: clamp(280px, 42vw, 500px);
}
.sel-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.sel-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.55);
}
.sel-card.faded { opacity: 0.45; }
.sel-row.top .sel-card {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--accent-warm);
    box-shadow: 0 2px 12px rgba(0, 82, 155, 0.15);
}
.sel-score {
    font-family: var(--font-mono);
    font-size: var(--small-size);
    color: var(--text-faint);
    min-width: 4.5em;
    text-align: right;
    letter-spacing: 0.05em;
}
.sel-score.top-sc {
    color: var(--accent-warm);
    font-weight: 600;
}

@media (max-width: 900px) {
    .prog-fan-stage,
    .mutation-flow,
    .crossover-applied,
    .validation-flow,
    .fitness-applied { gap: 0.6rem; }
    .code-fan { grid-template-columns: repeat(3, auto); }
}

/* ===========================================
   IDX SLIDE — "Tres ideas" + animated preview cards
   =========================================== */
.idx-slide .slide-content {
    padding: clamp(2rem, 5vw, 4.5rem) clamp(2rem, 6vw, 5rem);
}
.idx-grid {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}
.idx-left { display: flex; flex-direction: column; gap: var(--content-gap); }
.idx-left h2 {
    font-size: clamp(3rem, 7vw, 5.5rem);
    line-height: 1;
}
.idx-bullets {
    margin-top: calc(var(--content-gap) * 0.6);
    gap: clamp(1rem, 2.2vw, 1.8rem);
}
.idx-bullets li {
    padding-left: 0;
    display: flex;
    gap: 1.1rem;
    align-items: baseline;
    font-size: clamp(1.1rem, 1.7vw, 1.55rem);
    line-height: 1.35;
    color: var(--text-primary);
    font-weight: 400;
}
.idx-bullets li::before { content: none; }
.idx-bullets .idx-num {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    color: var(--accent-warm);
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    min-width: 3.2rem;
    line-height: 1;
}
.idx-bullets .idx-sub {
    color: var(--text-secondary);
    font-size: 0.82em;
    font-weight: 300;
}

.idx-right {
    display: flex; flex-direction: column;
    gap: clamp(0.8rem, 1.6vw, 1.3rem);
}
.idx-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.25rem;
    padding: clamp(0.85rem, 1.6vw, 1.3rem) clamp(1rem, 2vw, 1.6rem);
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 6px 22px -14px rgba(0, 82, 155, 0.35);
    backdrop-filter: blur(4px);
}
.idx-card::before {
    content: "";
    position: absolute;
    left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 65%;
    background: linear-gradient(to bottom, transparent, var(--accent-warm), transparent);
    border-radius: 3px;
    opacity: 0.55;
}
.idx-tag {
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 1vw, 0.9rem);
    letter-spacing: 0.25em;
    color: var(--accent-gold);
    font-weight: 500;
}
.idx-stage {
    position: relative;
    min-height: clamp(2.4rem, 5vh, 3.4rem);
    display: flex;
    align-items: center;
}

/* Card 01 — token prediction cycle */
.idx-chat {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    color: var(--text-primary);
    gap: 0.55rem;
}
.idx-prompt { font-style: italic; color: var(--text-secondary); }
.idx-token {
    position: relative;
    display: inline-block;
    min-width: 6rem;
    height: 1.4em;
    vertical-align: baseline;
}
.idx-tk {
    position: absolute; inset: 0;
    color: var(--accent-warm);
    font-weight: 500;
    opacity: 0;
    transform: translateY(8px);
    white-space: nowrap;
}
.slide.visible .idx-chat .tk1 { animation: idxTokCycle 5.4s 1.0s infinite; }
.slide.visible .idx-chat .tk2 { animation: idxTokCycle 5.4s 2.0s infinite; }
.slide.visible .idx-chat .tk3 { animation: idxTokLock  5.4s 3.0s infinite; }
@keyframes idxTokCycle {
    0%, 2%   { opacity: 0; transform: translateY(8px); }
    8%, 16%  { opacity: 1; transform: translateY(0); }
    22%      { opacity: 0; transform: translateY(-8px); }
    100%     { opacity: 0; transform: translateY(-8px); }
}
@keyframes idxTokLock {
    0%, 2%   { opacity: 0; transform: translateY(8px); filter: blur(3px); }
    10%      { opacity: 1; transform: translateY(0) scale(1.1); filter: blur(0); }
    16%, 94% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    100%     { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Card 02 — population with fittest heartbeat */
.idx-pop {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.4rem;
    width: 100%;
    max-width: 220px;
}
.idx-dot {
    width: 0.85rem; height: 0.85rem;
    border-radius: 50%;
    background: var(--accent-sage);
    opacity: 0.5;
}
.idx-dot.fit { background: var(--accent-warm); opacity: 1; }
.slide.visible .idx-pop .idx-dot.fit {
    animation: idxFitPulse 2.4s ease-in-out infinite;
}
.slide.visible .idx-pop .idx-dot:nth-child(3)  { animation-delay: 0s; }
.slide.visible .idx-pop .idx-dot:nth-child(8)  { animation-delay: 0.35s; }
.slide.visible .idx-pop .idx-dot:nth-child(11) { animation-delay: 0.7s; }
.slide.visible .idx-pop .idx-dot:nth-child(16) { animation-delay: 1.05s; }
@keyframes idxFitPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 82, 155, 0.45); }
    50%      { transform: scale(1.35); box-shadow: 0 0 0 7px rgba(0, 82, 155, 0); }
}

/* Card 03 — DNA alignment with pulsing gap */
.idx-dna {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-family: var(--font-mono);
    font-size: clamp(0.78rem, 1.05vw, 0.98rem);
    width: 100%;
    max-width: 260px;
}
.idx-row {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.3rem;
}
.idx-row span {
    display: flex; align-items: center; justify-content: center;
    height: 1.4rem;
    background: rgba(0, 82, 155, 0.08);
    color: var(--accent-warm);
    border-radius: 4px;
    font-weight: 500;
}
.idx-row .gap {
    background: transparent;
    color: var(--accent-gold);
    border: 1px dashed var(--accent-gold);
}
.slide.visible .idx-dna .gap { animation: idxGapPulse 2.6s ease-in-out infinite; }
@keyframes idxGapPulse {
    0%, 100% { transform: scaleY(1); opacity: 0.65; }
    50%      { transform: scaleY(1.25); opacity: 1; box-shadow: 0 0 0 3px rgba(30, 96, 145, 0.15); }
}

@media (max-width: 900px) {
    .idx-grid { grid-template-columns: 1fr; gap: 2rem; }
    .idx-right { max-width: 420px; }
}
@media (max-height: 720px) {
    .idx-left h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
    .idx-bullets li { font-size: clamp(0.95rem, 1.5vw, 1.25rem); }
    .idx-bullets .idx-num { font-size: clamp(1.3rem, 2.2vw, 2rem); min-width: 2.6rem; }
    .idx-card { padding: 0.7rem 1rem; gap: 1rem; }
    .idx-stage { min-height: 2.2rem; }
    .idx-row span { height: 1.15rem; }
    .idx-dot { width: 0.7rem; height: 0.7rem; }
    .idx-pop { max-width: 180px; }
}