:root {
      --bg: #0b1220;
      --bg-elevated: #121a2b;
      --bg-deep: #070b14;
      --surface: #182235;
      --surface-glass: rgba(18, 26, 43, 0.72);
      --surface-glass-strong: rgba(18, 26, 43, 0.92);
      --overlay: rgba(7, 11, 20, 0.6);
      --overlay-soft: rgba(7, 11, 20, 0.35);
      --ink: #e8eef7;
      --ink-strong: #ffffff;
      --muted: #8b9bb4;
      --accent: #2ec4b6;
      --accent-dim: color-mix(in srgb, var(--accent) 14%, transparent);
      --accent-glow: color-mix(in srgb, var(--accent) 35%, transparent);
      --accent-soft: color-mix(in srgb, var(--accent) 8%, transparent);
      --accent-mid: color-mix(in srgb, var(--accent) 22%, transparent);
      --accent-border: color-mix(in srgb, var(--accent) 35%, transparent);
      --accent-border-strong: color-mix(in srgb, var(--accent) 50%, transparent);
      --accent-wash: color-mix(in srgb, var(--accent) 45%, white);
      --accent-shine: #ffffff;
      --warn: #e8a54b;
      --warn-dim: color-mix(in srgb, var(--warn) 14%, transparent);
      --warn-border: color-mix(in srgb, var(--warn) 40%, transparent);
      --line: rgba(139, 155, 180, 0.28);
      --grid-line: rgba(139, 155, 180, 0.045);
      --blue: #5b8def;
      --blue-dim: color-mix(in srgb, var(--blue) 14%, transparent);
      --blue-glow: color-mix(in srgb, var(--blue) 11%, transparent);
      --blue-border: color-mix(in srgb, var(--blue) 40%, transparent);
      --inset-highlight: rgba(255, 255, 255, 0.04);
      --scrim: rgba(0, 0, 0, 0.2);
      --qr-bg: #ffffff;
      --theme-toggle-bg: rgba(18, 26, 43, 0.85);
      --theme-toggle-border: rgba(139, 155, 180, 0.35);
      --theme-toggle-ink: #e8eef7;
    }

    [data-theme="light"] {
      --bg: #f4f6fa;
      --bg-elevated: #ffffff;
      --bg-deep: #e8edf5;
      --surface: #ffffff;
      --surface-glass: rgba(255, 255, 255, 0.82);
      --surface-glass-strong: rgba(255, 255, 255, 0.94);
      --overlay: rgba(232, 237, 245, 0.75);
      --overlay-soft: rgba(232, 237, 245, 0.5);
      --ink: #1a2336;
      --ink-strong: #0b1220;
      --muted: #5a6b84;
      --accent-dim: color-mix(in srgb, var(--accent) 12%, transparent);
      --accent-glow: color-mix(in srgb, var(--accent) 22%, transparent);
      --warn-dim: color-mix(in srgb, var(--warn) 16%, transparent);
      --line: rgba(90, 107, 132, 0.28);
      --grid-line: rgba(90, 107, 132, 0.08);
      --blue-dim: color-mix(in srgb, var(--blue) 12%, transparent);
      --blue-glow: color-mix(in srgb, var(--blue) 12%, transparent);
      --inset-highlight: rgba(11, 18, 32, 0.04);
      --theme-toggle-bg: rgba(255, 255, 255, 0.9);
      --theme-toggle-border: rgba(90, 107, 132, 0.3);
      --theme-toggle-ink: #1a2336;
    }

    .reveal-viewport {
      background-color: var(--bg-deep);
      background-image:
        radial-gradient(ellipse 55% 50% at 78% 45%, var(--accent-glow), transparent 60%),
        radial-gradient(ellipse 40% 45% at 12% 80%, var(--blue-glow), transparent 55%),
        repeating-linear-gradient(
          0deg,
          transparent,
          transparent 27px,
          var(--grid-line) 27px,
          var(--grid-line) 28px
        ),
        repeating-linear-gradient(
          90deg,
          transparent,
          transparent 27px,
          var(--grid-line) 27px,
          var(--grid-line) 28px
        );
      background-attachment: fixed;
    }
    .reveal .slide-background {
      background: transparent !important;
    }

    .reveal {
      font-family: "Sora", system-ui, sans-serif;
      color: var(--ink);
      font-size: 30px;
    }

    .reveal .slides { text-align: left; }
    .reveal .slides > section,
    .reveal .slides > section > section {
      padding: 0.4em 3.5% 0.55em;
      height: 100%;
      display: flex !important;
      flex-direction: column;
      justify-content: flex-start !important;
      align-items: stretch;
      box-sizing: border-box;
      background: transparent;
    }

    .reveal h1, .reveal h2, .reveal h3 {
      font-family: "Sora", system-ui, sans-serif;
      font-weight: 600;
      text-transform: none;
      letter-spacing: -0.02em;
      color: var(--ink);
      margin-bottom: 0.4em;
    }
    .reveal h3 { font-size: 0.78em; color: var(--accent); margin: 0 0 0.3em; }
    .reveal p { color: var(--ink); line-height: 1.45; font-size: 0.78em; }
    .reveal strong { color: var(--ink-strong); font-weight: 600; }
    .reveal .mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }

    .reveal blockquote {
      background: var(--accent-dim);
      border-left: 3px solid var(--accent);
      border-radius: 0 14px 14px 0;
      box-shadow: none;
      width: auto;
      max-width: 28ch;
      margin: 0;
      padding: 0.75em 1em;
      font-size: 1.05em;
      font-style: normal;
      line-height: 1.35;
      font-family: "Syne", "Sora", system-ui, sans-serif;
      font-weight: 700;
      letter-spacing: -0.03em;
      color: var(--ink-strong);
    }
    .reveal blockquote strong { color: var(--accent); }
    .reveal blockquote.warn-q {
      border-left-color: var(--warn);
      background: var(--warn-dim);
    }

    /* —— Header —— */
    .slide-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 0.7em 1.2em;
      align-items: center;
      width: 100%;
      margin: 0 0 0.85em;
      padding-bottom: 0.7em;
      flex-shrink: 0;
      border-bottom: 1px solid var(--line);
      position: relative;
    }
    .slide-head::after {
      content: "";
      position: absolute;
      left: 0; bottom: -1px;
      width: 4em; height: 2px;
      background: linear-gradient(90deg, var(--accent), transparent);
    }
    .slide-head h1, .slide-head h2 {
      margin: 0;
      text-align: left;
      max-width: min(18ch, 100%);
      font-family: "Syne", "Sora", system-ui, sans-serif;
      font-weight: 800;
      letter-spacing: -0.045em;
      line-height: 1;
      color: var(--ink-strong);
      text-wrap: balance;
      position: relative;
      padding-left: 0.5em;
    }
    .slide-head h1::before, .slide-head h2::before {
      content: "";
      position: absolute;
      left: 0; top: 0.15em; bottom: 0.1em;
      width: 0.12em;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--accent), var(--accent-mid));
      box-shadow: 0 0 14px var(--accent-glow);
    }
    .slide-head h1 {
      font-size: 1.72em;
      background: linear-gradient(120deg, var(--accent-shine) 0%, var(--accent-wash) 50%, var(--accent) 160%);
      -webkit-background-clip: text; background-clip: text;
      color: transparent; -webkit-text-fill-color: transparent;
    }
    .slide-head h2 { font-size: 1.38em; }

    .slide-head.quote-head {
      grid-template-columns: 1fr auto;
    }
    .slide-head.quote-head h2 {
      visibility: hidden;
      height: 0;
      padding: 0;
      margin: 0;
      overflow: hidden;
      max-width: 0;
    }
    .slide-head.quote-head h2::before { display: none; }

    .sec-mark {
      justify-self: end;
      text-align: right;
      background: var(--bg-elevated);
      border: 1px solid var(--line);
      border-radius: 7px;
      padding: 0.3em 0.48em 0.33em;
      min-width: 9.5em;
      box-shadow: inset 2px 0 0 var(--accent);
    }
    .sec-mark__sec {
      display: block;
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.25em;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
      line-height: 1.3;
    }
    .sec-mark__sub {
      display: block;
      font-size: 0.31em;
      color: var(--ink);
      margin-top: 0.1em;
      line-height: 1.3;
      font-weight: 500;
    }

    .slide-body { flex: 1; min-height: 0; width: 100%; }
    .slide-body.center {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      text-align: center;
    }
    .slide-body.center blockquote { text-align: left; margin: 0 auto; }

    .muted { color: var(--muted); }
    .lede { font-size: 0.82em; color: var(--muted); margin: 0 0 0.7em; max-width: 42ch; }

    /* —— Icons —— */
    .ico {
      width: 1.1em; height: 1.1em;
      display: inline-block; vertical-align: -0.2em;
      stroke: currentColor; fill: none; stroke-width: 1.75;
      stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
    }
    .ico-lg { width: 1.5em; height: 1.5em; }
    .ico-xl { width: 2.1em; height: 2.1em; }
    .ico-wrap {
      width: 2.4em; height: 2.4em; border-radius: 12px;
      display: grid; place-items: center;
      background: var(--accent-dim); color: var(--accent);
      border: 1px solid var(--accent-border);
      margin-bottom: 0.45em;
    }
    .ico-wrap.warn { background: var(--warn-dim); color: var(--warn); border-color: var(--warn-border); }
    .ico-wrap.blue { background: var(--blue-dim); color: var(--blue); border-color: var(--blue-border); }

    /* —— Layouts —— */
    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; align-items: stretch; }
    .split-4060 { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 1.1em; align-items: center; height: 100%; }
    .split-6040 { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1.1em; align-items: center; height: 100%; }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65em; }
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65em; }

    .card {
      background: var(--bg-elevated);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 0.8em 0.9em;
    }
    .card p { font-size: 0.68em; margin: 0; color: var(--muted); line-height: 1.35; }
    .icon-card h3 { font-size: 0.72em; color: var(--ink); }

    /* —— Agenda / recorrido —— */
    .agenda {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.45em;
      height: 100%;
      min-height: 0;
      align-content: stretch;
    }
    .agenda-item {
      background:
        linear-gradient(90deg, var(--accent-dim), transparent 42%),
        var(--bg-elevated);
      border: 1px solid var(--line);
      border-left: 4px solid var(--accent);
      border-radius: 0 14px 14px 0;
      padding: 0.55em 1em 0.55em 0.85em;
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 0.85em;
      align-items: center;
      min-height: 0;
    }
    .agenda-item::before { display: none; }
    .agenda-num {
      font-family: "Syne", sans-serif;
      font-size: 1.55em;
      font-weight: 800;
      letter-spacing: -0.06em;
      line-height: 1;
      background: linear-gradient(135deg, var(--accent-shine) 15%, var(--accent-wash) 55%, var(--accent) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      min-width: 1.4em;
    }
    .agenda-item h3 {
      font-size: 0.95em;
      color: var(--ink-strong);
      margin: 0 0 0.12em;
      font-family: "Syne", sans-serif;
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.15;
    }
    .agenda-item p {
      margin: 0 !important;
      font-size: 0.42em !important;
      color: var(--muted) !important;
      line-height: 1.35;
      max-width: 42ch;
    }
    .agenda-item .agenda-ico {
      width: 1.35em;
      height: 1.35em;
      color: var(--accent);
      opacity: 0.9;
      justify-self: end;
    }

    /* —— Thread / journey —— */
    .thread {
      display: flex; flex-wrap: wrap; gap: 0.28em 0.35em; align-items: center;
      font-family: "IBM Plex Mono", monospace; font-size: 0.48em; margin-top: 1em;
    }
    .thread span {
      color: var(--ink); background: var(--surface); border: 1px solid var(--line);
      border-radius: 999px; padding: 0.35em 0.7em;
    }
    .thread .arrow { background: transparent; border: none; color: var(--accent); padding: 0; }
    .thread .done { border-color: var(--accent-border-strong); color: var(--accent); }

    /* —— Q&A —— */
    .qa-body {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 1.2em;
      align-items: center;
      height: 100%;
      min-height: 0;
    }
    .qa-body .qa-copy {
      max-width: none;
      min-width: 0;
    }
    .qa-body .about-links {
      margin-top: 0.55em;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 14em;
    }
    .qa-body .about-links a {
      flex: 1 1 calc(50% - 0.25em);
      font-size: 0.36em;
      padding: 0.4em 0.35em;
    }
    .qa-body .about-qr {
      height: auto;
      min-height: 0;
    }
    .qa-body .about-qr__frame {
      width: 8.5em;
    }
    .qa-glyph {
      position: relative;
      width: 5.5em;
      height: 5.5em;
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }
    .qa-glyph::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1.5px dashed var(--accent-border);
      animation: qaSpin 22s linear infinite;
    }
    .qa-glyph::after {
      content: "";
      position: absolute;
      inset: 12%;
      border-radius: 50%;
      background: radial-gradient(circle at 40% 35%, var(--accent-border), transparent 65%);
      animation: qaPulse 2.6s ease-in-out infinite;
    }
    .qa-glyph span {
      position: relative;
      z-index: 1;
      font-family: "Syne", sans-serif;
      font-weight: 800;
      font-size: 3.2em;
      letter-spacing: -0.06em;
      line-height: 1;
      background: linear-gradient(135deg, var(--accent-shine) 20%, var(--accent-wash) 55%, var(--accent) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }
    .qa-copy {
      max-width: 22ch;
    }
    .qa-copy .qa-msg {
      margin: 0;
      font-family: "Syne", sans-serif;
      font-weight: 700;
      font-size: 1.15em;
      letter-spacing: -0.035em;
      line-height: 1.25;
      color: var(--ink-strong);
    }
    .qa-copy .qa-msg em {
      font-style: normal;
      background: linear-gradient(105deg, var(--accent-wash), var(--accent));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }
    .qa-copy .qa-sub {
      margin: 0.75em 0 0;
      font-size: 0.62em;
      color: var(--muted);
      line-height: 1.4;
      max-width: 28ch;
    }
    .qa-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4em;
      margin-top: 1em;
    }
    .qa-chips span {
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.42em;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink);
      border: 1px solid var(--line);
      background: var(--surface-glass);
      border-radius: 999px;
      padding: 0.4em 0.7em;
    }
    .qa-chips span.hl {
      color: var(--accent);
      border-color: var(--accent-border-strong);
      background: var(--accent-dim);
    }
    @keyframes qaSpin {
      to { transform: rotate(360deg); }
    }
    @keyframes qaPulse {
      0%, 100% { opacity: 0.55; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.06); }
    }
    @media (prefers-reduced-motion: reduce) {
      .qa-glyph::before,
      .qa-glyph::after { animation: none; }
    }

    .title-slide .slide-head h1 { max-width: 12ch; font-size: 1.96em; }
    .title-slide .subtitle { color: var(--muted); font-size: 0.72em; max-width: 28ch; margin: 0.4em 0 0; text-align: left; }

    /* —— Cover (portada) —— */
    .cover-slide {
      position: relative;
      overflow: hidden;
    }
    .cover-slide .slide-head {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
      position: absolute;
      top: 0; right: 0; left: 0;
      z-index: 3;
      pointer-events: none;
    }
    .cover-slide .slide-head::after { display: none; }
    .cover-slide .slide-head h1 {
      visibility: hidden;
      height: 0;
      padding: 0;
      max-width: 0;
      overflow: hidden;
    }
    .cover-slide .slide-head h1::before { display: none; }
    .cover-slide .sec-mark { pointer-events: auto; }

    .cover-stage {
      position: relative;
      flex: 1;
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 1em;
      align-items: center;
      min-height: 0;
      width: 100%;
      z-index: 1;
    }
    .cover-stage::before { display: none; }

    .cover-copy {
      position: relative;
      z-index: 2;
      padding-right: 0.5em;
    }
    .cover-kicker {
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.42em;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--accent);
      margin: 0 0 0.85em;
      display: flex;
      align-items: center;
      gap: 0.55em;
    }
    .cover-kicker::before {
      content: "";
      width: 1.6em;
      height: 2px;
      background: var(--accent);
      box-shadow: 0 0 12px var(--accent-glow);
    }
    .cover-title {
      margin: 0;
      font-family: "Syne", sans-serif;
      font-weight: 800;
      letter-spacing: -0.055em;
      line-height: 0.92;
      color: var(--ink-strong);
    }
    .cover-title .line {
      display: block;
      font-size: 1.40em;
      opacity: 0;
      transform: translateY(0.35em);
      animation: coverRise 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .cover-title .line:nth-child(1) {
      animation-delay: 0.08s;
      background: linear-gradient(105deg, var(--accent-shine) 10%, var(--accent-wash) 45%, var(--accent) 95%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }
    .cover-title .line:nth-child(2) { animation-delay: 0.2s; }
    .cover-title .line:nth-child(3) { animation-delay: 0.32s; }
    .cover-title .amp {
      font-weight: 600;
      color: var(--muted);
      -webkit-text-fill-color: var(--muted);
      background: none;
      font-size: 0.55em;
      letter-spacing: -0.02em;
      vertical-align: middle;
      margin: 0 0.12em;
    }
    .cover-sub {
      margin: 1em 0 0;
      font-size: 0.78em;
      color: var(--muted);
      max-width: 22ch;
      line-height: 1.35;
      opacity: 0;
      animation: coverRise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
    }
    .cover-sub strong { color: var(--ink-strong); }
    .cover-meta {
      margin-top: 1.15em;
      display: flex;
      flex-wrap: wrap;
      gap: 0.45em;
      opacity: 0;
      animation: coverRise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.65s forwards;
    }
    .cover-meta span {
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.42em;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink);
      border: 1px solid var(--line);
      background: var(--surface-glass);
      backdrop-filter: blur(6px);
      border-radius: 999px;
      padding: 0.45em 0.75em;
    }
    .cover-meta span.hl {
      border-color: var(--accent-border-strong);
      color: var(--accent);
      background: var(--accent-dim);
    }

    .cover-viz {
      position: relative;
      z-index: 2;
      height: 100%;
      min-height: 16em;
      display: grid;
      place-items: center;
    }
    .cover-viz svg {
      width: 100%;
      max-width: 380px;
      height: auto;
      overflow: visible;
    }
    .cover-viz .orbit {
      fill: none;
      stroke: var(--accent-mid);
      stroke-dasharray: 3 7;
      animation: coverSpin 28s linear infinite;
      transform-origin: 200px 200px;
    }
    .cover-viz .orbit.slow { animation-duration: 42s; animation-direction: reverse; stroke: var(--blue-glow); }
    .cover-viz .pulse {
      animation: coverPulse 2.4s ease-in-out infinite;
      transform-origin: center;
    }
    .cover-viz .dash-flow {
      stroke-dasharray: 6 10;
      animation: coverDash 1.8s linear infinite;
    }
    .cover-viz .node-label {
      font-family: "IBM Plex Mono", monospace;
      font-size: 11px;
      fill: var(--muted);
    }

    @keyframes coverRise {
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes coverSpin {
      to { transform: rotate(360deg); }
    }
    @keyframes coverPulse {
      0%, 100% { opacity: 0.55; }
      50% { opacity: 1; }
    }
    @keyframes coverDash {
      to { stroke-dashoffset: -32; }
    }

    @media (prefers-reduced-motion: reduce) {
      .cover-title .line,
      .cover-sub,
      .cover-meta {
        opacity: 1;
        transform: none;
        animation: none;
      }
      .cover-viz .orbit,
      .cover-viz .pulse,
      .cover-viz .dash-flow { animation: none; }
    }

    /* —— Shift —— */
    .shift {
      display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.85em; align-items: center;
    }
    .shift-arrow {
      width: 2.6em; height: 2.6em; border-radius: 50%;
      background: var(--accent-dim); border: 1px solid var(--accent-border);
      color: var(--accent); display: grid; place-items: center;
    }

    /* —— Needs row —— */
    .need-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5em; }
    .need-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
    .need {
      text-align: center; background: var(--bg-elevated); border: 1px solid var(--line);
      border-radius: 14px; padding: 0.7em 0.35em;
    }
    .need .ico-wrap { margin: 0 auto 0.4em; width: 2em; height: 2em; border-radius: 10px; }
    .need span { display: block; font-size: 0.55em; line-height: 1.25; color: var(--ink); }
    .need small {
      display: block; margin-top: 0.25em;
      font-size: 0.38em; color: var(--muted); line-height: 1.3;
      font-family: "IBM Plex Mono", monospace;
    }

    /* —— MCP key concepts —— */
    .mcp-concepts {
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0;
      gap: 0.55em;
    }
    .mcp-concepts__opts {
      flex: 0 0 auto;
      background: var(--bg-elevated);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 0.35em 0.7em 0.4em;
    }
    .mcp-concepts__opts .reto-label {
      display: block;
      margin-bottom: 0.2em;
      font-size: 0.38em;
    }
    .mcp-opt-list {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.55em 1.4em;
    }
    .mcp-opt {
      display: inline-flex;
      align-items: center;
      gap: 0.45em;
      margin: 0;
      padding: 0;
      font-size: 0.62em;
      color: var(--ink);
      line-height: 1.2;
      text-decoration: none;
      min-width: 0;
    }
    .mcp-opt img {
      width: 1.15em;
      height: 1.15em;
      flex-shrink: 0;
      display: block;
      object-fit: contain;
    }
    .mcp-opt strong {
      font-family: "Syne", sans-serif;
      font-weight: 700;
      font-size: 1em;
      letter-spacing: -0.02em;
      color: var(--ink-strong);
      white-space: nowrap;
    }
    .mcp-opt span {
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.78em;
      color: var(--muted);
      white-space: nowrap;
    }
    .mcp-opt a {
      color: inherit;
      text-decoration: none;
    }
    .mcp-opt[href]:hover strong,
    .mcp-opt[href]:hover span {
      color: var(--accent);
    }
    .mcp-concepts__keys {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 0.35em;
    }
    .mcp-concepts__keys > .reto-label {
      flex: 0 0 auto;
      font-size: 0.38em;
    }
    .mcp-diagram {
      flex: 1 1 auto;
      min-height: 0;
      display: grid;
      grid-template-columns: minmax(0, 0.85fr) auto minmax(0, 1.4fr);
      gap: 0.65em;
      align-items: stretch;
    }
    .mcp-peer {
      background: var(--bg-elevated);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 1em 1.05em;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.45em;
      min-height: 0;
      overflow: hidden;
    }
    .mcp-peer.server {
      border-color: var(--accent-border-strong);
      background: linear-gradient(160deg, var(--accent-dim), var(--surface-glass-strong) 50%);
      justify-content: flex-start;
      gap: 0.5em;
      padding: 0.85em 0.9em 0.95em;
    }
    .mcp-peer__head {
      display: flex;
      align-items: center;
      gap: 0.55em;
    }
    .mcp-peer__head .ico-wrap {
      width: 2.15em;
      height: 2.15em;
      margin: 0;
      border-radius: 11px;
      flex-shrink: 0;
    }
    .mcp-peer__head .ico-wrap .ico {
      width: 1.15em;
      height: 1.15em;
    }
    .mcp-peer h3 {
      margin: 0;
      font-family: "Syne", sans-serif;
      font-weight: 700;
      font-size: 1.05em;
      letter-spacing: -0.03em;
      color: var(--ink-strong);
      line-height: 1.1;
    }
    .mcp-peer > p {
      margin: 0;
      font-size: 0.6em;
      color: var(--muted);
      line-height: 1.4;
      max-width: 24ch;
    }
    .mcp-peer.server > p {
      max-width: none;
      margin-bottom: 0.15em;
    }
    .mcp-hosts {
      display: flex;
      flex-wrap: wrap;
      gap: 0.85em 1.15em;
      margin-top: 0.3em;
      align-items: center;
    }
    .mcp-host {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 0.4em;
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.44em;
      color: var(--muted);
      letter-spacing: 0.02em;
      line-height: 1.15;
      text-align: center;
    }
    .mcp-host img,
    .mcp-host__mark {
      width: 2.25em;
      height: 2.25em;
      border-radius: 9px;
      flex-shrink: 0;
      object-fit: cover;
      display: block;
    }
    .mcp-host__mark {
      display: grid;
      place-items: center;
      background: var(--accent-dim);
      color: var(--accent);
      border: 1px solid var(--accent-border);
    }
    .mcp-host__mark .ico {
      width: 1.1em;
      height: 1.1em;
    }
    .mcp-peer-link {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.25em;
      color: var(--accent);
      align-self: center;
      padding: 0 0.2em;
    }
    .mcp-peer-link__arrows {
      display: flex;
      align-items: center;
      gap: 0.05em;
    }
    .mcp-peer-link .ico {
      width: 1.55em;
      height: 1.55em;
      filter: drop-shadow(0 0 8px var(--accent-glow));
    }
    .mcp-peer-link span {
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.42em;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--accent);
      font-weight: 600;
    }
    .mcp-caps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.45em;
      margin-top: auto;
      flex: 1 1 auto;
      align-content: stretch;
    }
    .mcp-cap {
      background: var(--overlay);
      border: 1px solid var(--line);
      border-radius: 11px;
      padding: 0.7em 0.45em;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 0.28em;
      min-height: 0;
    }
    .mcp-cap .ico-wrap {
      width: 1.85em;
      height: 1.85em;
      margin: 0;
      border-radius: 9px;
    }
    .mcp-cap .ico-wrap .ico {
      width: 0.95em;
      height: 0.95em;
    }
    .mcp-cap strong {
      font-family: "Syne", sans-serif;
      font-weight: 700;
      font-size: 0.62em;
      letter-spacing: -0.02em;
      color: var(--ink-strong);
    }
    .mcp-cap small {
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.36em;
      color: var(--muted);
      line-height: 1.3;
    }

    /* —— Reto slide —— */
    .reto {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      height: 100%;
      min-height: 0;
      gap: 0.7em;
    }
    .reto-challenge {
      margin: 0;
      font-family: "Syne", sans-serif;
      font-weight: 700;
      font-size: 1.35em;
      letter-spacing: -0.035em;
      line-height: 1.15;
      color: var(--ink-strong);
      max-width: 22ch;
    }
    .reto-challenge em {
      font-style: normal;
      background: linear-gradient(105deg, var(--accent-wash), var(--accent));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }
    .reto-block {
      display: flex;
      flex-direction: column;
      gap: 0.4em;
      min-height: 0;
    }
    .reto-label {
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.42em;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent);
    }
    .reto-how .need {
      padding: 0.95em 0.5em;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .reto-how .need .ico-wrap {
      width: 2.35em;
      height: 2.35em;
      margin-bottom: 0.5em;
    }
    .reto-how .need span {
      font-size: 0.68em;
      font-family: "Syne", sans-serif;
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    .reto-goal blockquote {
      font-size: 0.82em;
      max-width: none;
      margin: 0;
    }

    /* —— Ecosystem hub with SVG —— */
    .hub-wrap { position: relative; width: 100%; max-width: 420px; margin: 0 auto; aspect-ratio: 1; }
    .hub-wrap svg.hub-svg { width: 100%; height: 100%; }
    .hub-legend { display: grid; gap: 0.4em; }
    .hub-legend .item {
      display: flex; align-items: center; gap: 0.45em;
      font-size: 0.62em; color: var(--ink);
      background: var(--bg-elevated); border: 1px solid var(--line);
      border-radius: 10px; padding: 0.4em 0.6em;
    }
    .hub-legend .ico { color: var(--accent); }

    /* —— Analogy —— */
    .analogy { display: grid; gap: 0.4em; }
    .analogy-row {
      display: grid; grid-template-columns: 7em 1fr; gap: 0.65em; align-items: center;
      background: var(--bg-elevated); border: 1px solid var(--line);
      border-radius: 12px; padding: 0.48em 0.7em;
    }
    .analogy-row.hl { border-color: var(--accent-border-strong); background: var(--accent-dim); }
    .analogy-label {
      display: flex; align-items: center; gap: 0.35em;
      font-family: "IBM Plex Mono", monospace; font-size: 0.55em;
      color: var(--accent); font-weight: 600;
    }
    .analogy-desc { font-size: 0.68em; margin: 0; }

    /* —— VS —— */
    .vs-board { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.75em; align-items: stretch; }
    .vs-badge {
      align-self: center; width: 2.2em; height: 2.2em; border-radius: 50%;
      background: var(--surface); border: 1px solid var(--line);
      display: grid; place-items: center;
      font-family: "IBM Plex Mono", monospace; font-size: 0.55em; color: var(--accent); font-weight: 600;
    }
    .feat-list { list-style: none; margin: 0.4em 0 0; padding: 0; }
    .feat-list li {
      display: flex; align-items: center; gap: 0.4em;
      font-size: 0.65em; margin: 0.28em 0 !important; color: var(--ink);
    }
    .feat-list .ico { width: 0.9em; height: 0.9em; color: var(--accent); }

    /* —— Arch SVG —— */
    .arch-svg-wrap {
      width: 100%;
      display: grid;
      place-items: center;
      justify-items: center;
    }
    .arch-svg-wrap svg {
      width: 100%;
      max-width: 820px;
      max-height: 380px;
      margin: 0 auto;
      display: block;
    }
    .arch-with-benefits {
      display: grid;
      grid-template-columns: 1.25fr 0.75fr;
      gap: 1.25em;
      align-items: center;
      width: 100%;
      height: 100%;
    }
    .benefit-panel {
      background: var(--surface-glass);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 0.85em 0.9em 0.95em;
      backdrop-filter: blur(8px);
      box-shadow: inset 3px 0 0 var(--accent);
    }
    .benefit-panel__title {
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.42em;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--accent);
      margin: 0 0 0.7em;
      display: flex;
      align-items: center;
      gap: 0.5em;
    }
    .benefit-panel__title::after {
      content: "";
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, var(--line), transparent);
    }
    .benefit-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 0.35em;
    }
    .benefit-list li {
      display: grid;
      grid-template-columns: 1.7em 1.7em 1fr;
      gap: 0.45em;
      align-items: center;
      margin: 0 !important;
      padding: 0.42em 0.45em;
      border-radius: 10px;
      transition: background 0.2s ease;
    }
    .benefit-list li:hover {
      background: var(--accent-soft);
    }
    .benefit-list .num {
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.48em;
      color: var(--muted);
      letter-spacing: 0.04em;
    }
    .benefit-list .ico-wrap {
      width: 1.7em;
      height: 1.7em;
      margin: 0;
      border-radius: 8px;
    }
    .benefit-list .ico-wrap .ico {
      width: 0.9em;
      height: 0.9em;
    }
    .benefit-list .txt {
      display: flex;
      flex-direction: column;
      gap: 0.08em;
      min-width: 0;
    }
    .benefit-list strong {
      font-size: 0.62em;
      color: var(--ink-strong);
      font-weight: 600;
      letter-spacing: -0.01em;
    }
    .benefit-list span {
      font-size: 0.45em;
      color: var(--muted);
      line-height: 1.25;
    }

    /* —— Advantage list (not only cards) —— */
    .adv-list {
      display: grid; grid-template-columns: 1fr 1fr; gap: 0.55em 1.2em;
      list-style: none; margin: 0; padding: 0;
    }
    .adv-list li {
      display: grid; grid-template-columns: 2em 1fr; gap: 0.55em; align-items: start;
      margin: 0 !important; padding: 0.45em 0;
      border-bottom: 1px solid var(--line);
    }
    .adv-list .ico-wrap { width: 1.9em; height: 1.9em; margin: 0; border-radius: 9px; }
    .adv-list strong { display: block; font-size: 0.72em; margin-bottom: 0.1em; }
    .adv-list span { font-size: 0.58em; color: var(--muted); line-height: 1.3; }

    /* —— Cap modules —— */
    .cap-tree {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.55em;
      align-items: start;
    }
    .mod {
      display: flex;
      flex-direction: column;
      height: 7em;
      background: var(--bg-elevated);
      border: 1px solid var(--line);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: inset 0 1px 0 var(--inset-highlight);
    }
    .mod__chrome {
      display: flex;
      align-items: center;
      gap: 0.22em;
      padding: 0.22em 0.45em;
      background: var(--surface);
      border-bottom: 1px solid var(--line);
    }
    .mod__dot {
      width: 0.28em;
      height: 0.28em;
      border-radius: 50%;
      background: color-mix(in srgb, var(--muted) 45%, transparent);
      flex-shrink: 0;
    }
    .mod__dot:nth-child(1) { background: #e86a6a; }
    .mod__dot:nth-child(2) { background: var(--warn); }
    .mod__dot:nth-child(3) { background: var(--accent); }
    .mod__path {
      margin-left: 0.2em;
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.3em;
      color: var(--muted);
      letter-spacing: 0.02em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mod__head {
      display: flex;
      align-items: center;
      gap: 0.35em;
      padding: 0.35em 0.45em 0.25em;
    }
    .mod__head .ico-wrap {
      margin: 0;
      width: 1.35em;
      height: 1.35em;
      border-radius: 7px;
      flex-shrink: 0;
    }
    .mod__pkg {
      display: block;
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.26em;
      color: var(--accent);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 0.1em;
    }
    .mod__head h3 {
      margin: 0;
      font-family: "Syne", sans-serif;
      font-size: 0.48em;
      font-weight: 700;
      letter-spacing: -0.03em;
      color: var(--ink-strong);
      line-height: 1.1;
    }
    .mod__meta {
      display: flex;
      gap: 0.25em;
      padding: 0 0.45em 0.28em;
      flex-wrap: wrap;
    }
    .mod__badge {
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.26em;
      letter-spacing: 0.04em;
      color: var(--muted);
      border: 1px solid var(--line);
      border-radius: 4px;
      padding: 0.15em 0.35em;
      background: var(--scrim);
    }
    .mod__badge.exp {
      color: var(--accent);
      border-color: var(--accent-border);
      background: var(--accent-dim);
    }
    .mod__exports {
      list-style: none;
      margin: 0;
      padding: 0.28em;
      border-top: 1px dashed var(--line);
      background: var(--overlay-soft);
      display: flex;
      flex-direction: column;
      gap: 0.45em;
      flex: 1;
      min-height: 0;
    }
    .mod__exports li {
      display: flex;
      align-items: baseline;
      gap: 0.55em;
      margin: 0 !important;
      padding: 0.28em 0.4em;
      border-radius: 5px;
      background: var(--surface);
      border: 1px solid transparent;
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.34em;
      color: var(--ink);
      line-height: 1.25;
    }
    .mod__exports .kw {
      color: var(--blue);
      font-weight: 600;
      flex-shrink: 0;
    }
    .mod__exports .sig {
      color: var(--muted);
    }

    /* —— SDK snippets —— */
    .slide-body:has(.sdk-grid) {
      display: flex;
      flex-direction: column;
    }
    .sdk-grid {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      min-height: 0;
      width: 100%;
    }
    .sdk-stage {
      position: relative;
      width: 75%;
      flex: 0 0 75%;
    }
    .sdk-snippet {
      display: flex;
      flex-direction: column;
      min-width: 0;
      background: var(--bg-elevated);
      border: 1px solid var(--line);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: inset 0 1px 0 var(--inset-highlight);
    }
    .sdk-snippet.fragment {
      display: none;
    }
    .sdk-snippet.fragment.visible {
      display: flex;
    }
    .sdk-stage:has(.sdk-snippet:nth-child(2).visible) .sdk-snippet:nth-child(1),
    .sdk-stage:has(.sdk-snippet:nth-child(3).visible) .sdk-snippet:nth-child(1),
    .sdk-stage:has(.sdk-snippet:nth-child(3).visible) .sdk-snippet:nth-child(2) {
      display: none;
    }
    .sdk-snippet__head {
      display: flex;
      flex-direction: column;
      gap: 0.12em;
      padding: 0.45em 0.6em 0.4em;
      background: var(--surface);
      border-bottom: 1px solid var(--line);
      flex-shrink: 0;
    }
    .sdk-snippet__head strong {
      font-family: "Syne", sans-serif;
      font-size: 0.58em;
      font-weight: 700;
      color: var(--ink-strong);
      letter-spacing: -0.01em;
    }
    .sdk-snippet__path {
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.38em;
      color: var(--muted);
      letter-spacing: 0.02em;
    }
    .sdk-snippet__code {
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 0.5em 0.6em 0.55em;
      overflow: auto;
      box-shadow: none;
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.4em;
      line-height: 1.45;
      color: var(--ink);
      background: transparent;
      tab-size: 2;
      white-space: pre;
    }
    .sdk-snippet__code code {
      display: block;
      max-height: none;
      padding: 0;
      overflow: visible;
      box-shadow: none;
    }
    .sdk-snippet__code .tok-kw { color: #c792ea; }
    .sdk-snippet__code .tok-fn { color: #82aaff; }
    .sdk-snippet__code .tok-str { color: #c3e88d; }
    .sdk-snippet__code .tok-type { color: #ffcb6b; }
    .sdk-snippet__code .tok-prop { color: var(--accent); }
    .sdk-snippet__code .tok-cmt { color: #5c6b82; font-style: italic; }

    /* —— Security / guards —— */
    .rw-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85em; }
    .rw-split ul { list-style: none; margin: 0.35em 0 0; padding: 0; }
    .rw-split li { display: flex; align-items: center; gap: 0.35em; font-size: 0.68em; margin: 0.28em 0 !important; }

    .guard-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7em; }
    .guard-group {
      background: var(--bg-elevated); border: 1px solid var(--line);
      border-radius: 14px; padding: 0.75em 0.8em;
    }
    .guard-group h3 {
      display: flex; align-items: center; gap: 0.35em;
      font-size: 0.68em; color: var(--ink-strong); margin-bottom: 0.5em;
      font-family: "Syne", sans-serif; font-weight: 700;
    }
    .guard-group .chip-stack { display: flex; flex-wrap: wrap; gap: 0.3em; }
    .chip {
      font-size: 0.5em; background: var(--surface); border: 1px solid var(--line);
      border-radius: 6px; padding: 0.32em 0.5em; color: var(--ink);
      font-family: "IBM Plex Mono", monospace;
    }
    .chip.accent { border-color: var(--accent-border-strong); color: var(--accent); background: var(--accent-dim); }
    .chip.warn { border-color: var(--warn-border); color: var(--warn); background: var(--warn-dim); }

    /* —— Catalog as 3×3 grid —— */
    .cap-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.5em;
      width: 100%;
      height: auto;
      max-height: 100%;
      margin: auto 0;
      align-content: center;
    }
    .cap-strip .item {
      text-align: center;
      background: var(--bg-elevated);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 0.5em 0.35em;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 0;
      overflow: hidden;
    }
    .cap-strip .ico-wrap { margin: 0 auto 0.28em; width: 1.85em; height: 1.85em; border-radius: 10px; }
    .cap-strip .ico-wrap .ico { width: 1em; height: 1em; }
    .cap-strip strong { display: block; font-size: 0.52em; color: var(--ink-strong); margin-bottom: 0.12em; }
    .cap-strip span { display: block; font-size: 0.4em; color: var(--muted); line-height: 1.2; }

    /* —— Sequence diagram —— */
    .seq-layout {
      display: grid;
      grid-template-columns: 0fr 1fr;
      gap: 0;
      height: 100%;
      min-height: 0;
      align-items: stretch;
      transition: grid-template-columns 0.45s ease, gap 0.45s ease;
    }
    .seq-layout:has(.seq-answer.visible) {
      grid-template-columns: minmax(11.5em, 0.38fr) 1fr;
      gap: 0.75em;
    }
    .seq-wrap {
      min-height: 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      transition: transform 0.45s ease;
    }
    .seq-wrap svg {
      width: 100%;
      height: 100%;
      flex: 1;
      min-height: 0;
      overflow: visible;
    }
    .seq-wrap .actor-box {
      fill: var(--bg-elevated);
      stroke-width: 1.6;
    }
    .seq-wrap .lifeline {
      stroke: color-mix(in srgb, var(--muted) 40%, transparent);
      stroke-width: 1.5;
      stroke-dasharray: 5 6;
    }
    .seq-wrap .msg {
      fill: none;
      stroke-width: 1.7;
    }
    .seq-wrap .msg--user { stroke: var(--warn); }
    .seq-wrap .msg--agent { stroke: var(--blue); }
    .seq-wrap .msg--mcp { stroke: var(--accent); }
    .seq-wrap .msg--return {
      stroke-dasharray: 4 4;
    }
    .seq-wrap .lbl {
      font-family: "IBM Plex Mono", monospace;
      font-size: 11px;
      fill: var(--ink);
    }
    .seq-wrap .lbl--muted { fill: var(--muted); font-size: 10px; }
    .seq-wrap .actor-title {
      font-family: "Syne", sans-serif;
      font-size: 14px;
      font-weight: 700;
    }
    .seq-wrap g.fragment {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.35s ease;
    }
    .seq-wrap g.fragment.visible {
      opacity: 1;
      visibility: visible;
    }

    .seq-answer {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 0.44em;
      align-self: center;
      height: auto;
      max-height: 86%;
      min-height: 0;
      min-width: 0;
      margin: 0;
      padding: 0.6em 0.7em 0.66em;
      border-radius: 12px;
      border: 1px solid var(--warn-border);
      background:
        linear-gradient(165deg, var(--warn-dim), transparent 48%),
        var(--surface-glass-strong);
      box-shadow: inset 3px 0 0 var(--warn);
      overflow: hidden;
      transition:
        opacity 0.4s ease,
        padding 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease;
    }
    .reveal .seq-answer.fragment:not(.visible) {
      opacity: 0;
      visibility: hidden;
      padding-left: 0;
      padding-right: 0;
      border-color: transparent;
      box-shadow: none;
      pointer-events: none;
    }
    .seq-answer__media {
      display: block;
      width: 100%;
      height: 4.62em;
      object-fit: cover;
      object-position: 70% 35%;
      border-radius: 8px;
      margin: 0;
      flex-shrink: 0;
    }
    .seq-answer__main {
      min-width: 0;
      flex: 0 1 auto;
    }
    .reveal .seq-answer__title {
      margin: 0.05em 0 0.25em;
      font-family: "Syne", sans-serif;
      font-size: 0.62em;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--ink);
      line-height: 1.15;
    }
    .reveal .seq-answer__body {
      margin: 0;
      font-size: 0.38em;
      line-height: 1.35;
      color: var(--muted);
      max-width: none;
    }
    .seq-answer__meta {
      display: flex;
      flex-direction: column;
      gap: 0.2em;
      padding-top: 0.35em;
      border-top: 1px solid color-mix(in srgb, var(--muted) 22%, transparent);
    }
    .seq-answer__meta > span {
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.32em;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .seq-answer__files {
      display: flex;
      flex-direction: column;
      gap: 0.22em;
    }
    .reveal .seq-answer__file {
      display: flex;
      align-items: center;
      gap: 0.35em;
      font-family: "Sora", sans-serif;
      font-size: 0.36em;
      color: var(--ink);
      text-decoration: none;
      line-height: 1.25;
    }
    .reveal .seq-answer__file:hover {
      color: var(--accent);
    }
    .seq-answer__file-ico {
      display: grid;
      place-items: center;
      width: 1.35em;
      height: 1.35em;
      border-radius: 5px;
      flex-shrink: 0;
    }
    .seq-answer__file-ico .ico {
      width: 0.85em;
      height: 0.85em;
    }
    .seq-answer__file-ico--confluence {
      background: var(--blue-dim);
    }
    .seq-answer__file-ico--confluence .ico {
      width: 1em;
      height: 1em;
    }
    .seq-answer__file-ico--post {
      background: var(--warn-dim);
      color: var(--warn);
    }
    .reveal .seq-answer__file:hover .seq-answer__file-name {
      text-decoration: underline;
    }
    .seq-answer__file-name {
      font-weight: 500;
    }
    .seq-answer__ops {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5em;
      padding-top: 0.35em;
      border-top: 1px solid color-mix(in srgb, var(--muted) 22%, transparent);
    }
    .seq-answer__op {
      display: flex;
      flex-direction: column;
      gap: 0.08em;
    }
    .seq-answer__op span {
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.32em;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 0.08em;
    }
    .seq-answer__op code {
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.34em;
      color: var(--accent);
      background: transparent;
      padding: 0;
      word-break: break-all;
    }
    .seq-answer__hint {
      font-family: "Sora", sans-serif;
      font-size: 0.32em;
      font-style: normal;
      color: var(--muted);
      margin-top: 0.05em;
    }

    /* —— Demo frame —— */
    .demo-frame {
      border: 1.5px dashed var(--accent-border-strong);
      background: var(--accent-soft);
      border-radius: 14px;
      padding: 0.85em 1em;
      min-height: 7.5em;
      display: flex; flex-direction: column; justify-content: center;
      position: relative;
    }
    .demo-frame .tag {
      position: absolute; top: 0.55em; left: 0.7em;
      font-family: "IBM Plex Mono", monospace; font-size: 0.42em;
      letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
    }
    .demo-frame .hint {
      font-size: 0.68em; color: var(--muted); margin: 0.6em 0 0;
      text-align: center; line-height: 1.35;
    }
    .demo-frame .hint strong { color: var(--ink); }

    /* —— Pipeline sequential —— */
    .pipe-flow {
      display: flex;
      flex-direction: column;
      gap: 0.55em;
      margin-bottom: 0.55em;
    }
    .pipe-row {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      gap: 0.3em;
      align-items: stretch;
    }
    .pipe-arrow {
      display: grid;
      place-items: center;
      color: var(--accent);
      font-size: 0.7em;
      opacity: 0.85;
      align-self: center;
    }
    .pipe-arrow svg {
      width: 0.85em;
      height: 0.85em;
    }
    .pipe-step {
      background: var(--bg-elevated);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 0.5em 0.35em;
      text-align: center;
      position: relative;
      box-shadow: inset 3px 0 0 var(--accent);
    }
    .pipe-step .num {
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.38em;
      color: var(--accent);
      display: block;
      letter-spacing: 0.06em;
    }
    .pipe-step .ico {
      color: var(--accent);
      width: 1em;
      height: 1em;
      margin: 0.15em 0;
    }
    .pipe-step span.label {
      display: block;
      font-size: 0.48em;
      line-height: 1.2;
      color: var(--ink);
      font-family: "Syne", sans-serif;
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    .pipe-step .role {
      display: block;
      margin-top: 0.22em;
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.3em;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .pipe-step.mcp {
      border-color: var(--warn-border);
      background: var(--warn-dim);
      box-shadow: inset 3px 0 0 var(--warn);
    }
    .pipe-step.mcp .num,
    .pipe-step.mcp .ico,
    .pipe-step.mcp .role { color: var(--warn); }
    .pipe-step.agent {
      border-color: var(--blue-border);
      background: var(--blue-dim);
      box-shadow: inset 3px 0 0 var(--blue);
    }
    .pipe-step.agent .num,
    .pipe-step.agent .ico,
    .pipe-step.agent .role { color: var(--blue); }
    .pipe-bridge {
      display: flex;
      justify-content: center;
      margin: -0.15em 0;
    }
    .pipe-bridge span {
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.32em;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      border: 1px dashed var(--line);
      border-radius: 999px;
      padding: 0.2em 0.65em;
      background: var(--bg-elevated);
    }

    /* —— Debug —— */
    .debug-flow {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      gap: 0.3em;
      align-items: stretch;
    }
    .debug-phase {
      border-radius: 14px; border: 1px solid var(--line);
      padding: 0.65em; background: var(--bg-elevated);
      min-width: 0;
    }
    .debug-phase.hyp { border-color: var(--accent-border-strong); background: var(--accent-dim); }
    .debug-phase.mcp {
      border-color: var(--warn-border);
      background: var(--warn-dim);
      box-shadow: inset 3px 0 0 var(--warn);
    }
    .debug-phase.mcp h3,
    .debug-phase.mcp h3 .ico,
    .debug-phase.mcp .role { color: var(--warn); }
    .debug-phase h3 { display: flex; align-items: center; gap: 0.3em; font-size: 0.58em; margin-bottom: 0.4em; color: var(--ink-strong); }
    .debug-phase .role {
      display: block;
      margin-top: 0.4em;
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.3em;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .chip-stack { display: flex; flex-wrap: wrap; gap: 0.28em; }
    .reveal .slides blockquote.debug-quote {
      max-width: none;
      width: 100%;
      box-sizing: border-box;
      margin: 0 0 0.65em;
      padding: 0.65em 0.9em 0.65em 1.55em;
      font-size: 0.95em;
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.3;
      border-left-width: 4px;
      background:
        linear-gradient(90deg, var(--accent-mid), transparent 55%),
        var(--accent-dim);
      position: relative;
    }
    .reveal .slides blockquote.debug-quote::before {
      content: "“";
      position: absolute;
      top: 0.2em;
      left: 0.35em;
      font-family: "Syne", sans-serif;
      font-size: 1.8em;
      line-height: 1;
      color: var(--accent-border-strong);
      pointer-events: none;
    }
    .reveal .slides blockquote.debug-quote em {
      font-style: normal;
      color: var(--accent);
    }

    /* —— Report IO —— */
    .report-io { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.65em; align-items: center; }
    .io-arrow { color: var(--accent); display: grid; place-items: center; }

    /* —— Q list —— */
    .q-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4em; }
    .q-list li {
      display: flex; align-items: center; gap: 0.5em;
      background: var(--bg-elevated); border: 1px solid var(--line);
      border-radius: 10px; padding: 0.5em 0.7em;
      font-size: 0.75em; margin: 0 !important;
    }
    .q-list .ico { color: var(--accent); }

    /* —— Before / after —— */
    .ba { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85em; }
    .ba .label {
      font-family: "IBM Plex Mono", monospace; font-size: 0.45em;
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
      margin-bottom: 0.45em; display: flex; align-items: center; gap: 0.3em;
    }
    .ba .after .label { color: var(--accent); }
    .ba .tools { display: flex; flex-wrap: wrap; gap: 0.28em; margin-top: 0.45em; }
    .ba .tools span {
      font-size: 0.48em; padding: 0.28em 0.45em; border-radius: 6px;
      background: var(--surface); border: 1px solid var(--line); color: var(--muted);
    }
    .chat-bubble {
      background: var(--accent-dim); border: 1px solid var(--accent-border);
      border-radius: 12px 12px 12px 4px; padding: 0.5em 0.65em;
      font-size: 0.62em; margin-top: 0.4em; color: var(--ink);
    }
    .placeholder-note {
      font-family: "IBM Plex Mono", monospace; font-size: 0.42em;
      color: var(--warn); margin-top: 0.55em; letter-spacing: 0.04em;
    }

    /* —— Impact metrics —— */
    .impact-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.55em;
      margin-top: 0;
    }
    .impact-sep {
      display: flex;
      align-items: center;
      gap: 0.75em;
      margin: 0.75em 0 0.65em;
    }
    .impact-sep::before,
    .impact-sep::after {
      content: "";
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--line), transparent);
    }
    .impact-sep span {
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.38em;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent);
      white-space: nowrap;
    }
    .impact {
      background: var(--bg-elevated);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 0;
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
    }
    .impact__head {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.4em;
      height: 1.85em;
      box-sizing: border-box;
      padding: 0.25em 0.5em;
      background:
        linear-gradient(135deg, var(--accent-mid), var(--blue-glow) 55%, transparent),
        var(--surface);
      border-bottom: 1px solid var(--accent-border);
      position: relative;
    }
    .impact__head::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: linear-gradient(180deg, var(--accent-wash), var(--accent));
    }
    .impact__num {
      font-family: "Syne", sans-serif;
      font-weight: 800;
      font-size: 1em;
      letter-spacing: -0.06em;
      line-height: 0.9;
      background: linear-gradient(135deg, var(--accent-shine) 10%, var(--accent-wash) 50%, var(--accent) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }
    .impact__tag {
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.34em;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent);
      padding-bottom: 0.05em;
      border-bottom: 1px dashed var(--accent-border-strong);
      white-space: nowrap;
    }
    .impact__body {
      display: flex;
      flex-direction: column;
      gap: 0.1em;
      padding: 0.28em 0.5em 0.32em;
    }
    .impact__title {
      margin: 0;
      font-family: "Syne", sans-serif;
      font-weight: 700;
      font-size: 0.52em;
      letter-spacing: -0.02em;
      color: var(--ink-strong);
      line-height: 1.25;
    }
    .impact__desc {
      margin: 0;
      font-size: 0.42em;
      color: var(--muted);
      line-height: 1.35;
    }
    .impact--soft .impact__num {
      font-size: 0.82em;
      letter-spacing: -0.03em;
      line-height: 0.9;
    }

    /* —— Evolution —— */
    .evo {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7em;
      margin-top: 0.5em; position: relative;
    }
    .evo::before {
      content: ""; position: absolute; top: 1.9em; left: 14%; right: 14%; height: 2px;
      background: linear-gradient(90deg, var(--line), var(--accent)); z-index: 0;
    }
    .evo .card { position: relative; z-index: 1; text-align: center; padding-top: 0.9em; }
    .evo .dot {
      width: 0.65em; height: 0.65em; border-radius: 50%; background: var(--accent);
      margin: 0 auto 0.6em; box-shadow: 0 0 0 5px var(--accent-dim);
    }
    .evo h3 { font-size: 0.65em; color: var(--muted); }
    .evo p { font-size: 0.72em; color: var(--ink); margin: 0; }

    /* —— Hero section opener —— */
    .hero-body {
      display: flex; flex-direction: column; justify-content: center;
      gap: 0.7em; height: 100%;
    }
    .hero-body .big-quote {
      font-family: "Syne", sans-serif; font-weight: 800;
      font-size: 1.35em; letter-spacing: -0.04em; line-height: 1.15;
      color: var(--ink-strong); max-width: 18ch; margin: 0;
    }
    .hero-body .big-quote em {
      font-style: normal; color: var(--accent);
    }

    .reveal .progress { color: var(--accent); height: 3px; }
    .reveal .controls { color: var(--accent); }
    .reveal .slide-number {
      font-family: "IBM Plex Mono", monospace;
      color: var(--muted);
      font-size: 13px;
      position: fixed;
      right: 6.25rem;
      bottom: 1.35rem;
      left: auto;
      top: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 2.25rem;
      line-height: 1;
      background: transparent;
      z-index: 30;
      pointer-events: none;
    }

    /* —— About / presenter —— */
    .about-me {
      display: grid;
      grid-template-columns: 1.35fr 1fr;
      gap: 1.4em;
      align-items: stretch;
      height: 100%;
      min-height: 0;
    }
    .about-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      gap: 0.55em;
      min-width: 0;
    }
    .about-photo {
      width: 6.5em;
      height: 6.5em;
      border-radius: 50%;
      object-fit: cover;
      object-position: center top;
      border: 2px solid var(--accent-border-strong);
      box-shadow: 0 0 0 5px var(--accent-soft);
      display: block;
      margin: 0 auto 0.2em;
    }
    .about-name {
      margin: 0;
      font-family: "Syne", sans-serif;
      font-weight: 800;
      font-size: 1.55em;
      letter-spacing: -0.045em;
      line-height: 1.05;
      color: var(--ink-strong);
      max-width: 14ch;
    }
    .about-role {
      margin: 0;
      font-size: 0.72em;
      color: var(--ink);
      line-height: 1.35;
    }
    .about-role strong {
      color: var(--accent);
      font-weight: 600;
    }
    .about-meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.35em;
      margin-top: 0.15em;
    }
    .about-meta span {
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.4em;
      letter-spacing: 0.06em;
      color: var(--muted);
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 0.35em 0.55em;
    }
    .about-meta span.hl {
      color: var(--accent);
      border-color: var(--accent-border);
      background: var(--accent-dim);
    }
    .about-links {
      margin: 0.55em 0 0;
      padding: 0;
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      gap: 0.4em;
      width: 100%;
    }
    .about-links a {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.4em;
      flex: 1 1 0;
      min-width: 0;
      box-sizing: border-box;
      font-family: "Syne", sans-serif;
      font-size: 0.42em;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--ink-strong);
      text-decoration: none;
      border: none;
      border-left: 3px solid var(--accent);
      border-radius: 0 10px 10px 0;
      padding: 0.55em 0.5em;
      background:
        linear-gradient(90deg, var(--accent-mid), transparent 70%),
        var(--accent-dim);
      transition: background 0.15s ease, color 0.15s ease;
    }
    .about-links a:hover {
      color: var(--accent);
      background:
        linear-gradient(90deg, var(--accent-border), transparent 70%),
        var(--accent-dim);
    }
    .about-links .ico {
      width: 1.05em;
      height: 1.05em;
      color: var(--accent);
      flex-shrink: 0;
    }
    .about-qr {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.55em;
      min-height: 100%;
      height: 100%;
      min-width: 0;
      background: transparent;
      border: none;
      padding: 0;
      box-sizing: border-box;
    }
    .about-qr__frame {
      width: min(100%, 11em);
      aspect-ratio: 1;
      background: var(--qr-bg);
      border-radius: 8px;
      padding: 0.4em;
      box-sizing: border-box;
      display: grid;
      place-items: center;
    }
    .about-qr__frame img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
    .reveal .about-qr__hint {
      margin: 0;
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.38em;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent);
      text-align: center;
    }

    /* vertical nav hint */
    .v-hint {
      font-family: "IBM Plex Mono", monospace; font-size: 0.4em;
      color: var(--muted); letter-spacing: 0.06em; margin-top: 0.5em;
    }


/* —— Theme toggle (outside Reveal scale) —— */
.talk-theme-toggle {
  position: fixed;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 100;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--theme-toggle-border);
  background: var(--theme-toggle-bg);
  color: var(--theme-toggle-ink);
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px var(--scrim);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.talk-theme-toggle:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}
.talk-theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.talk-theme-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}
.talk-theme-toggle .icon-sun { display: none; }
.talk-theme-toggle .icon-moon { display: block; }
[data-theme="light"] .talk-theme-toggle .icon-sun { display: block; }
[data-theme="light"] .talk-theme-toggle .icon-moon { display: none; }

/* —— Language toggle —— */
.talk-lang-toggle {
  position: fixed;
  top: 3.6rem;
  left: 0.85rem;
  z-index: 100;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--theme-toggle-border);
  background: var(--theme-toggle-bg);
  color: var(--theme-toggle-ink);
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px var(--scrim);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.talk-lang-toggle:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}
.talk-lang-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.talk-lang-toggle__code {
  line-height: 1;
}