@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&family=Playfair+Display:ital@1&display=swap');

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

  :root {
    --dark-bg: #260912;
    --rose: #A54C5D;
    --burgundy: #852838;
    --copper: #CC7958;
    --light-text: #DED4D4;
    --muted-rose: #C38E98;
    --neutral: #AD9797;
    --blue: #4285F4;
    --teal: #0097A7;
    --white: #FFFFFF;
    --light-bg: #F5F0F0;
  }

  body {
    font-family: 'Inter', Arial, sans-serif;
    background: var(--dark-bg);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
  }

  .slide {
    position: absolute;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 100px;
    display: none;
    pointer-events: none;
    overflow: hidden;
  }

  .slide.active {
    display: flex;
    pointer-events: all;
  }

  /* --- Section header slides --- */
  .slide.section-header {
    background: var(--dark-bg);
    justify-content: center;
    align-items: flex-start;
    padding: 60px 120px;
  }

  .slide.section-header .section-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--copper);
    margin-bottom: 24px;
  }

  .slide.section-header h1 {
    font-size: 64px;
    font-weight: 800;
    color: var(--white);
    line-height: 1.1;
    max-width: 900px;
  }

  .slide.section-header .accent-line {
    width: 80px;
    height: 4px;
    background: var(--rose);
    margin-top: 32px;
    border-radius: 2px;
  }

  /* --- Title slide --- */
  .slide.title-slide {
    background: var(--dark-bg);
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 80px 120px;
    position: relative;
  }

  .slide.title-slide::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(165,76,93,0.15) 0%, transparent 70%);
    border-radius: 50%;
  }

  .slide.title-slide::after {
    content: '';
    position: absolute;
    bottom: -150px;
    left: -150px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(204,121,88,0.1) 0%, transparent 70%);
    border-radius: 50%;
  }

  .slide.title-slide .tag {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--copper);
    background: rgba(204,121,88,0.12);
    padding: 8px 20px;
    border-radius: 20px;
    margin-bottom: 48px;
    position: relative;
    z-index: 1;
  }

  .slide.title-slide h1 {
    font-size: 64px;
    font-weight: 800;
    color: var(--white);
    line-height: 1.15;
    max-width: 900px;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
  }

  .slide.title-slide h1 span {
    color: var(--copper);
  }

  .slide.title-slide .subtitle {
    font-size: 26px;
    font-weight: 300;
    color: var(--muted-rose);
    margin-bottom: 56px;
    position: relative;
    z-index: 1;
  }

  .slide.title-slide .author-block {
    position: relative;
    z-index: 1;
  }

  .slide.title-slide .author-block .name {
    font-size: 22px;
    font-weight: 600;
    color: var(--light-text);
    margin-bottom: 20px;
  }

  .slide.title-slide .author-block .email {
    font-size: 16px;
    color: var(--copper);
    text-decoration: none;
    font-weight: 400;
  }

  .slide.title-slide .author-block .contact-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 0;
  }

  .slide.title-slide .author-block .contact-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: var(--copper);
    text-decoration: none;
    font-weight: 400;
  }

  /* --- Content slides --- */
  .slide.content {
    background: var(--light-bg);
    padding: 80px 120px;
    justify-content: center;
  }

  .slide.content .slide-tag {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--rose);
    margin-bottom: 20px;
  }

  .slide.content h2 {
    font-size: 44px;
    font-weight: 700;
    color: var(--dark-bg);
    line-height: 1.2;
    margin-bottom: 36px;
    max-width: 950px;
  }

  .slide.content p {
    font-size: 24px;
    color: #3a2a2e;
    line-height: 1.65;
    max-width: 950px;
    margin-bottom: 20px;
  }

  .slide.content .highlight-box {
    background: var(--dark-bg);
    color: var(--light-text);
    padding: 28px 36px;
    border-radius: 12px;
    font-size: 22px;
    line-height: 1.6;
    margin-top: 28px;
    max-width: 950px;
    border-left: 4px solid var(--copper);
  }

  .slide.content ul {
    list-style: none;
    padding: 0;
    max-width: 950px;
  }

  .slide.content ul li {
    font-size: 23px;
    color: #3a2a2e;
    line-height: 1.55;
    padding: 14px 0 14px 32px;
    position: relative;
  }

  .slide.content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22px;
    width: 12px;
    height: 12px;
    background: var(--rose);
    border-radius: 50%;
  }

  .slide.content ul li strong {
    color: var(--dark-bg);
  }

  /* --- Cards layout --- */
  .cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 28px;
    margin-top: 28px;
  }

  .card {
    background: var(--white);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 2px 12px rgba(38,9,18,0.06);
    border-top: 3px solid var(--rose);
  }

  .card.copper { border-top-color: var(--copper); }
  .card.teal { border-top-color: var(--teal); }
  .card.blue { border-top-color: var(--blue); }

  .card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--dark-bg);
    margin-bottom: 12px;
  }

  .card p {
    font-size: 18px !important;
    color: #5a4a4e !important;
    line-height: 1.55 !important;
    margin-bottom: 0 !important;
  }

  .card code {
    background: rgba(38,9,18,0.07);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 16px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--burgundy);
  }

  /* --- Two-column layout --- */
  .two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    margin-top: 16px;
  }

  .two-col .col h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--dark-bg);
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--rose);
  }

  .two-col .col p {
    font-size: 20px !important;
    line-height: 1.6 !important;
  }

  .two-col .col ul li {
    font-size: 20px;
  }

  /* --- Architecture diagram v2 --- */
  .arch-full {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-top: 20px;
  }

  .arch-tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    max-width: 230px;
  }

  .arch-box-v {
    background: var(--white);
    border: 2px solid var(--rose);
    border-radius: 14px;
    padding: 24px 28px;
    text-align: center;
    width: 100%;
    box-shadow: 0 4px 16px rgba(38,9,18,0.08);
  }

  .arch-box-v.primary {
    background: var(--dark-bg);
    color: var(--white);
    border-color: var(--dark-bg);
  }

  .arch-box-v .arch-icon {
    font-size: 28px;
    margin-bottom: 8px;
    opacity: 0.7;
  }

  .arch-box-v.primary .arch-icon {
    color: var(--copper);
    opacity: 1;
  }

  .arch-box-v h4 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--dark-bg);
  }

  .arch-box-v.primary h4 {
    color: var(--white);
  }

  .arch-box-v .tech {
    font-size: 14px;
    color: var(--neutral);
    font-weight: 400;
  }

  .arch-box-v.primary .tech {
    color: var(--muted-rose);
  }

  .arch-details {
    list-style: none;
    padding: 0;
    margin-top: 16px;
    width: 100%;
  }

  .arch-details li {
    font-size: 15px;
    color: #5a4a4e;
    line-height: 1.45;
    padding: 6px 0;
    padding-left: 16px;
    position: relative;
  }

  .arch-details li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 6px;
    height: 6px;
    background: var(--rose);
    border-radius: 50%;
  }

  .arch-details.light li {
    color: #5a4a4e;
  }

  .arch-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 36px;
    width: 100px;
    flex-shrink: 0;
  }

  .arch-flow-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--neutral);
    margin-bottom: 4px;
  }

  .arch-flow-line {
    font-size: 28px;
    color: var(--copper);
    opacity: 0.7;
  }

  .arch-react-bar {
    margin-top: 28px;
    background: var(--dark-bg);
    color: var(--light-text);
    padding: 16px 28px;
    border-radius: 10px;
    font-size: 17px;
    text-align: center;
    max-width: 100%;
  }

  .arch-react-bar span {
    color: var(--copper);
    font-weight: 600;
  }

  .arch-react-bar strong {
    color: var(--white);
  }

  /* --- Questions grid --- */
  .questions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
  }

  .question-card {
    background: var(--white);
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 2px 12px rgba(38,9,18,0.06);
    display: flex;
    gap: 18px;
    align-items: flex-start;
  }

  .question-card .q-num {
    font-size: 32px;
    font-weight: 800;
    color: var(--rose);
    line-height: 1;
    min-width: 40px;
  }

  .question-card p {
    font-size: 19px !important;
    color: #3a2a2e !important;
    line-height: 1.55 !important;
    margin-bottom: 0 !important;
  }

  .question-card.faded-card {
    background: rgba(38,9,18,0.04);
    box-shadow: none;
    border: 1px dashed rgba(38,9,18,0.1);
  }

  .question-card p strong {
    background: linear-gradient(180deg, transparent 62%, rgba(204,121,88,0.55) 62%);
    color: var(--burgundy);
    padding: 0 3px;
    font-weight: 700;
  }

  /* --- Dark content slide --- */
  .slide.content-dark {
    background: var(--dark-bg);
    padding: 80px 120px;
    justify-content: center;
  }

  .slide.content-dark .slide-tag {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--copper);
    margin-bottom: 20px;
  }

  .slide.content-dark h2 {
    font-size: 44px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
    margin-bottom: 36px;
    max-width: 950px;
  }

  .slide.content-dark p {
    font-size: 24px;
    color: var(--light-text);
    line-height: 1.65;
    max-width: 950px;
    margin-bottom: 20px;
  }

  .slide.content-dark ul {
    list-style: none;
    padding: 0;
    max-width: 950px;
  }

  .slide.content-dark ul li {
    font-size: 23px;
    color: var(--light-text);
    line-height: 1.55;
    padding: 14px 0 14px 32px;
    position: relative;
  }

  .slide.content-dark ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 22px;
    width: 12px;
    height: 12px;
    background: var(--copper);
    border-radius: 50%;
  }

  .slide.content-dark ul li strong {
    color: var(--white);
  }

  /* --- Closing slide --- */
  .slide.closing {
    background: var(--dark-bg);
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
  }

  .slide.closing::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(165,76,93,0.12) 0%, transparent 70%);
    border-radius: 50%;
  }

  .slide.closing h2 {
    font-size: 56px;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
  }

  .slide.closing p {
    font-size: 20px;
    color: var(--muted-rose);
    position: relative;
    z-index: 1;
  }

  .slide.closing .emails {
    margin-top: 40px;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    z-index: 1;
  }

  .slide.closing .emails a {
    font-size: 14px;
    color: var(--copper);
    text-decoration: none;
    font-weight: 400;
  }

  /* --- Progress bar --- */
  .progress-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--rose), var(--copper));
    transition: width 0.4s ease;
    z-index: 100;
  }

  /* --- Slide counter --- */
  .slide-counter {
    position: fixed;
    bottom: 16px;
    right: 28px;
    font-size: 13px;
    color: rgba(255,255,255,0.35);
    font-family: 'Inter', Arial, sans-serif;
    z-index: 100;
  }

  .slide.content .slide-counter,
  .slide.content ~ .slide-counter {
    color: rgba(38,9,18,0.3);
  }

  /* --- Findings list --- */
  .findings-list {
    counter-reset: finding;
    list-style: none;
    padding: 0;
    max-width: 950px;
  }

  .findings-list li {
    counter-increment: finding;
    font-size: 21px;
    color: #3a2a2e;
    line-height: 1.55;
    padding: 18px 0 18px 56px;
    position: relative;
    border-bottom: 1px solid rgba(38,9,18,0.08);
  }

  .findings-list li:last-child { border-bottom: none; }

  .findings-list li::before {
    content: counter(finding);
    position: absolute;
    left: 0;
    top: 18px;
    width: 36px;
    height: 36px;
    background: var(--rose);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
  }

  /* --- Lessons grid (dark) --- */
  .slide.content-dark .lessons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 20px;
  }

  .lesson-card {
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 28px;
    border-left: 3px solid var(--copper);
  }

  .lesson-card h4 {
    font-size: 19px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 10px;
  }

  .lesson-card p {
    font-size: 17px !important;
    color: var(--muted-rose) !important;
    line-height: 1.55 !important;
    margin-bottom: 0 !important;
  }

  /* --- Decisions overview --- */
  .decisions-overview {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 28px;
    margin-top: 12px;
  }

  .decision-box {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(204,121,88,0.4);
    border-radius: 12px;
    padding: 24px 28px;
  }

  .decision-box h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--copper);
    margin-bottom: 14px;
    font-style: italic;
  }

  .decision-box ol {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: decision;
  }

  .decision-box ol li {
    counter-increment: decision;
    font-size: 16px;
    color: var(--light-text);
    line-height: 1.45;
    padding: 8px 0 8px 32px;
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .decision-box ol li:last-child { border-bottom: none; }

  .decision-box ol li::before {
    content: counter(decision) ".";
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--copper);
  }

  .decision-box.faded {
    opacity: 0.2;
  }

  /* --- Tool manifest layout --- */
  .slide[data-slide="10"] {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .slide[data-slide="10"] h2 {
    margin-bottom: 16px;
  }

  .slide[data-slide="10"] > p {
    margin-bottom: 16px !important;
  }

  .tool-manifest-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
  }

  .tool-manifest-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .tool-manifest-cards .card {
    padding: 14px 18px;
  }

  .reveal-card {
    opacity: 0;
    transition: opacity 0.6s ease;
  }

  .tool-manifest-cards .card h3 {
    font-size: 18px;
    margin-bottom: 6px;
  }

  .tool-manifest-cards .card p {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  .tool-manifest-code {
    background: #1a0610;
    border-radius: 12px;
    padding: 18px 22px;
    border: 1px solid rgba(165,76,93,0.3);
  }

  .tool-manifest-code .code-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--copper);
    margin-bottom: 12px;
  }

  .tool-manifest-code pre {
    margin: 0;
    overflow: hidden;
  }

  .tool-manifest-code code {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 14px;
    line-height: 1.5;
    color: var(--light-text);
    white-space: pre;
  }

  /* --- Paper footer --- */
  .paper-footer {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 13px;
    color: rgba(222,212,212,0.4);
  }

  .paper-footer a {
    color: var(--copper);
    text-decoration: none;
    opacity: 0.7;
  }

  /* JSON syntax highlight */
  .jk { color: #CC7958; }          /* key   — copper */
  .js { color: #8ecf9e; }          /* string value — soft green */
  .jp { color: #7a6a70; }

  /* --- Timeline --- */
  .timeline {
    display: flex;
    align-items: flex-start;
    margin-top: 24px;
    max-width: 100%;
  }

  .tl-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    position: relative;
  }

  .tl-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--rose);
    margin-bottom: 16px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
  }

  .tl-dot.copper { background: var(--copper); }
  .tl-dot.teal { background: var(--teal); }

  .tl-dot.active-dot {
    background: var(--dark-bg);
    box-shadow: 0 0 0 4px var(--rose), 0 0 0 8px rgba(165,76,93,0.2);
  }

  .tl-arrow {
    flex: 0.3;
    font-size: 32px;
    color: var(--copper);
    margin-top: -2px;
    text-align: center;
    opacity: 0.6;
  }

  .tl-label {
    font-size: 20px;
    font-weight: 700;
    color: var(--dark-bg);
    margin-bottom: 8px;
  }

  .tl-desc {
    font-size: 16px;
    color: #5a4a4e;
    line-height: 1.5;
    max-width: 200px;
  }

  /* --- Split list + figure --- */
  .split-layout {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
    margin-top: 8px;
  }

  .split-list {
    margin: 0;
  }

  .split-list li {
    font-size: 21px;
    padding: 12px 0 12px 30px;
  }

  .split-figure {
    margin: 0;
    text-align: center;
  }

  .split-figure img {
    max-width: 100%;
    max-height: 460px;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(38,9,18,0.25);
    border: 1px solid rgba(38,9,18,0.1);
  }

  .split-figure figcaption {
    margin-top: 12px;
    font-size: 14px;
    color: #5a4a4e;
    font-style: italic;
  }

  .split-figure figcaption a {
    color: var(--burgundy);
    text-decoration: none;
    font-weight: 600;
  }

  /* --- Journey words --- */
  .journey-words {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    margin-top: 80px;
    flex-wrap: wrap;
  }

  .journey-group {
    display: flex;
    align-items: center;
    gap: 32px;
  }

  .journey-word {
    font-size: 84px;
    font-weight: 800;
    color: var(--light-text);
    letter-spacing: -2px;
    line-height: 1;
  }

  .journey-word.strikethrough {
    color: var(--neutral);
    text-decoration: line-through;
    text-decoration-thickness: 6px;
    text-decoration-color: var(--burgundy);
  }

  .journey-word.emphasis {
    color: var(--copper);
    background: linear-gradient(180deg, transparent 65%, rgba(204,121,88,0.25) 65%);
    padding: 0 12px;
  }

  .journey-sep {
    font-size: 48px;
    color: var(--rose);
    font-weight: 300;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  /* --- Modes side-by-side --- */
  .modes-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 28px;
    align-items: stretch;
    margin-top: 24px;
  }

  .mode-card {
    background: var(--white);
    border-radius: 14px;
    padding: 28px 32px;
    box-shadow: 0 4px 16px rgba(38,9,18,0.08);
    border-top: 4px solid var(--rose);
  }

  .mode-card.mode-safe {
    border-top-color: var(--teal);
  }
  .mode-card.mode-bold {
    border-top-color: #d4351a;
  }

  .mode-card .mode-badge {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--burgundy);
    margin-bottom: 14px;
  }

  .mode-card.mode-safe .mode-badge {
    color: var(--teal);
  }

  .mode-card.mode-bold .mode-badge {
    color: #d4351a;
  }

  .mode-card p {
    font-size: 22px !important;
    color: #3a2a2e !important;
    line-height: 1.45 !important;
    margin: 0 !important;
  }

  .mode-arrow {
    align-self: center;
    font-size: 40px;
    color: var(--copper);
    font-weight: 300;
  }

  /* --- Problem badge --- */
  .problem-badge {
    display: inline-block;
    background: linear-gradient(90deg, #d4351a, #cc7958);
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    box-shadow: 0 2px 10px rgba(212,53,26,0.3);
    margin-right: 10px;
    vertical-align: middle;
  }

  /* --- H2 sublabel --- */
  .h2-sub {
    font-size: 22px;
    font-weight: 500;
    color: var(--burgundy);
    margin-left: 8px;
  }

  .h2-sub code {
    background: rgba(38,9,18,0.07);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 18px;
    color: var(--burgundy);
    font-family: 'SF Mono', 'Fira Code', monospace;
  }

  /* --- Pyramid (defense in depth) --- */
  .pyramid-wrap {
    width: 100%;
    margin-top: 12px;
  }

  .pyramid-svg {
    display: block;
    width: 70%;
    max-width: 720px;
    height: auto;
    margin: 0 auto;
  }

  /* --- Agentic flow diagram --- */
  .agentic-flow {
    margin-top: 20px;
    width: 100%;
    max-width: 1100px;
  }

  .agentic-flow .af-svg {
    width: 100%;
    height: auto;
  }

  /* --- ReAct loop diagram (legacy) --- */
  .react-loop {
    position: relative;
    width: 540px;
    height: 380px;
    margin: 12px auto 0;
  }

  .react-loop-svg {
    position: absolute;
    top: 0;
    left: 20px;
    width: 500px;
    height: 320px;
    z-index: 1;
  }

  .react-node {
    position: absolute;
    width: 170px;
    background: var(--white);
    border: 2px solid var(--rose);
    border-radius: 14px;
    padding: 16px 20px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(38,9,18,0.1);
    z-index: 2;
  }

  .react-node.rc-top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .react-node.rc-right {
    top: 200px;
    right: 0;
  }

  .react-node.rc-left {
    top: 200px;
    left: 0;
  }

  .react-node .rc-num {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 50%;
    background: var(--copper);
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
  }

  .react-node .rc-label {
    font-size: 19px;
    font-weight: 700;
    color: var(--dark-bg);
    line-height: 1.1;
  }

  .react-node .rc-sub {
    font-size: 13px;
    color: #5a4a4e;
    margin-top: 4px;
  }

  .react-exit {
    position: absolute;
    top: 340px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    font-style: italic;
    color: var(--burgundy);
    background: rgba(204,121,88,0.15);
    padding: 6px 16px;
    border-radius: 16px;
  }

  /* --- Chain example --- */
  .chain-example {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 28px 0;
    padding: 24px;
    background: rgba(38,9,18,0.04);
    border: 1px dashed rgba(38,9,18,0.2);
    border-radius: 12px;
  }

  .chain-node {
    background: var(--white);
    border: 2px solid var(--rose);
    color: var(--dark-bg);
    padding: 12px 22px;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(38,9,18,0.06);
  }

  .chain-node.final {
    background: var(--dark-bg);
    color: var(--white);
    border-color: var(--dark-bg);
  }

  .chain-arrow {
    font-size: 24px;
    color: var(--copper);
    font-weight: 300;
  }

  /* --- Trade-offs grid --- */
  .tradeoffs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
  }

  .tradeoffs-grid.vertical {
    grid-template-columns: 1fr;
    max-width: 850px;
    margin: 24px auto 0;
  }

  .tradeoff {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: center;
    background: var(--white);
    border-radius: 12px;
    padding: 28px 36px;
    box-shadow: 0 4px 14px rgba(38,9,18,0.08);
  }

  .tradeoff-pro {
    font-size: 24px;
    font-weight: 600;
    color: var(--burgundy);
    text-align: right;
  }

  .tradeoff-vs {
    font-size: 15px;
    font-weight: 700;
    color: var(--neutral);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: rgba(38,9,18,0.06);
    padding: 6px 14px;
    border-radius: 14px;
  }

  .tradeoff-con {
    font-size: 24px;
    color: #5a4a4e;
    font-weight: 500;
  }

  /* --- YOLO pill --- */
  .yolo-pill {
    display: inline-block;
    background: linear-gradient(90deg, #d4351a, #cc7958);
    color: #fff;
    padding: 3px 10px;
    border-radius: 6px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 15px;
    font-weight: 700;
    margin-left: 6px;
    box-shadow: 0 2px 8px rgba(212,53,26,0.35);
    transform: rotate(-2deg);
    letter-spacing: 0.5px;
  }

  /* --- Gap headline --- */
  .gap-headline {
    font-size: 30px !important;
    color: var(--dark-bg) !important;
    line-height: 1.4 !important;
    margin-top: 28px !important;
    margin-bottom: 24px !important;
    max-width: 950px;
    font-weight: 400;
    letter-spacing: -0.3px;
  }

  .gap-headline .neq {
    color: var(--copper);
    font-weight: 700;
    padding: 0 4px;
  }

  /* --- Pill row --- */
  .pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
  }

  .pill {
    display: inline-block;
    background: rgba(204,121,88,0.18);
    color: var(--copper);
    border: 1px solid rgba(204,121,88,0.35);
    padding: 8px 18px;
    border-radius: 24px;
    font-size: 17px;
    font-weight: 600;
  }

  /* --- Inline highlight --- */
  mark.hl {
    background: linear-gradient(180deg, transparent 60%, rgba(204,121,88,0.45) 60%);
    color: var(--dark-bg);
    padding: 0 2px;
    font-weight: 600;
  }

  .highlight-box mark.hl,
  .slide.content-dark mark.hl,
  .slide.section-header mark.hl {
    color: var(--white);
    background: linear-gradient(180deg, transparent 60%, rgba(204,121,88,0.55) 60%);
  }

  .typewriter-caret {
    display: none;
    width: 2px;
    height: 0.95em;
    background: var(--copper);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: blink 0.8s step-end infinite;
  }

  .typewriter-caret.journey-caret {
    width: 6px;
    height: 70px;
    margin-left: -20px;
    align-self: center;
  }

  .typewriter-caret.active {
    display: inline-block;
  }

  @keyframes blink {
    50% { opacity: 0; }
  }

  /* --- Tool pill --- */
  .tool-pill {
    display: inline-block;
    background: rgba(38,9,18,0.07);
    padding: 3px 10px;
    border-radius: 6px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 15px;
    color: var(--burgundy);
    font-weight: 600;
  }