@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;520;600;700;800&display=swap");

/* Design tokens */
:root {
  --temporal-ink: #173244;
  --temporal-muted: #60747f;
  --temporal-soft: #edf5f1;
  --temporal-bg: #fbfcf8;
  --temporal-panel: #ffffff;
  --temporal-panel-soft: #f6faf7;
  --temporal-line: #d8e5df;
  --temporal-primary: #0b7896;
  --temporal-primary-dark: #07546a;
  --temporal-primary-soft: #e7f4f6;
  --temporal-blue: #2b92ac;
  --temporal-blue-light: #79bed1;
  --temporal-blue-soft: #e8f7fb;
  --temporal-green: #4f8a5b;
  --temporal-green-alt: #5a9b5a;
  --temporal-green-soft: #e8f3ea;
  --temporal-green-line: #cfe0d2;
  --temporal-orange: #b47622;
  --temporal-orange-soft: #f8efe1;
  --temporal-orange-line: #e4c99d;
  --temporal-red: #a85c57;
  --temporal-red-soft: #f7e8e5;
  --temporal-purple: #71679a;
  --temporal-purple-soft: #eeeaf6;
  --temporal-purple-ink: #40375f;
  --temporal-green-ink: #2f6f2f;
  --temporal-orange-ink: #7a4b08;
  --temporal-warm-muted: #9b630e;
  --temporal-axis: #9aa3ad;
  --temporal-neutral-soft: #eef1f2;
  --temporal-neutral-line: #d5dde0;
  --radius-card: 8px;
  --accent-border: 5px solid var(--temporal-green);
  --temporal-shadow: 0 16px 34px rgba(20, 54, 66, 0.075);
  --temporal-shadow-soft: 0 9px 22px rgba(20, 54, 66, 0.055);
  --heading-font: "Inter", "Aptos Display", "Segoe UI", Arial, sans-serif;
  --body-font: "Inter", "Aptos", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --text-size: 20pt;
  --small-size: 15pt;
  --caption-size: 10.5pt;
  --h1-size: 53pt;
  --h2-size: 38pt;
  --h3-size: 22pt;
}

/* Base reveal.js structure and typography */
.reveal {
  background: var(--temporal-bg);
  color: var(--temporal-ink);
  font-family: var(--body-font);
  font-size: 20pt;
  letter-spacing: 0;
}

.reveal ::selection {
  background: rgba(11, 120, 150, 0.18);
}

.reveal .slides {
  text-align: left;
}

.reveal .slides > section:not(.chapter-stack),
.reveal .slides > section > section {
  box-sizing: border-box;
  padding: 34px 46px;
}

.reveal .slides > section.chapter-stack {
  padding: 0;
}

.reveal h1,
.reveal h2,
.reveal h3 {
  color: var(--temporal-ink);
  font-family: var(--heading-font);
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1.02;
  margin: 0 0 16px;
  text-transform: none;
}

.reveal h1 {
  font-size: var(--h1-size);
  max-width: 850px;
}

.reveal h2 {
  font-size: var(--h2-size);
  max-width: 1120px;
}

.reveal h3 {
  font-size: var(--h3-size);
  line-height: 1.08;
  margin-bottom: 10px;
}

.reveal p,
.reveal li {
  font-size: var(--text-size);
  line-height: 1.28;
}

.reveal ul,
.reveal ol {
  margin-left: 1.05em;
}

.reveal li + li {
  margin-top: 0.34em;
}

.reveal strong {
  color: var(--temporal-primary-dark);
  font-weight: 780;
}

.kicker {
  color: var(--temporal-primary-dark);
  font-size: 10pt;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin-bottom: 9px;
  text-transform: uppercase;
}

.rule {
  background: var(--temporal-green);
  border-radius: 999px;
  display: block;
  height: 4px;
  margin: 8px 0 22px;
  width: 116px;
}

.reveal .lead {
  color: var(--temporal-ink);
  font-size: 23pt;
  line-height: 1.2;
  max-width: 950px;
}

.reveal .small {
  font-size: var(--small-size);
}

.reveal .small li {
  font-size: inherit;
}

/* Layout utilities */
.two-col {
  align-items: center;
  display: grid;
  gap: 24px;
}

.two-col > *,
.title-layout > *,
.rnn-layout > *,
.setup-layout > *,
.window-layout > * {
  min-width: 0;
}

.two-col {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.two-col.wide-left {
  grid-template-columns: 1.16fr 0.84fr;
}

.two-col.wide-right {
  grid-template-columns: 0.84fr 1.16fr;
}

.stretch-layout {
  align-items: stretch;
}

/* Shared components */
.card {
  background: var(--temporal-panel);
  border: 1px solid var(--temporal-line);
  border-radius: var(--radius-card);
  box-shadow: var(--temporal-shadow);
  padding: 18px 20px;
}

.accent-card {
  background: var(--temporal-panel);
  border: 1px solid var(--temporal-line);
  border-left: var(--accent-border);
  border-radius: var(--radius-card);
  box-shadow: none;
  box-sizing: border-box;
}

.accent-card.accent-primary {
  border-left-color: var(--temporal-primary);
}

.full-width-callout {
  box-sizing: border-box;
  width: 100%;
}

.figure-card {
  align-self: center;
  padding: 14px 16px 13px;
}

.figure-card .media {
  display: block;
  margin: 0 auto;
  max-height: 405px;
  width: 100%;
}

.figure-card .caption {
  margin-top: 10px;
}

.figure-card .image-frame {
  box-shadow: none;
}

/* Slide-specific layouts */
.ndvi-motivation-layout {
  display: grid;
  gap: 16px;
  grid-template-rows: auto minmax(0, 1fr);
}

.ndvi-explainer {
  align-items: stretch;
  display: grid;
  gap: 16px;
  grid-template-columns: 0.92fr 1.08fr;
}

.ndvi-explainer .lead {
  font-size: 15.5pt;
  line-height: 1.2;
  margin: 0;
  padding: 13px 16px 13px 15px;
}

.ndvi-signal-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ndvi-signal-grid .accent-card {
  padding: 10px 12px 10px 13px;
}

.ndvi-signal-grid strong,
.ndvi-signal-grid span {
  display: block;
}

.ndvi-signal-grid strong {
  color: var(--temporal-primary-dark);
  font-size: 11pt;
  font-weight: 820;
  margin-bottom: 4px;
}

.ndvi-signal-grid span {
  color: var(--temporal-muted);
  font-size: 10.5pt;
  font-weight: 700;
  line-height: 1.15;
}

.ndvi-example-grid {
  align-items: stretch;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 0.78fr);
}

.ndvi-example-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 8px 10px 9px;
}

.ndvi-example-card .media {
  align-self: center;
  height: 258px;
  max-height: none;
  object-fit: contain;
  width: 100%;
}

.ndvi-map-card .media {
  height: 258px;
}

.ndvi-example-card .caption {
  font-size: 10pt;
  line-height: 1.18;
  margin-top: 7px;
}

.memory-choice-layout {
  display: grid;
  gap: 34px;
  grid-template-rows: auto 1fr;
  margin-top: 24px;
}

.memory-choice-text {
  align-items: center;
  display: grid;
  gap: 28px;
  grid-template-columns: 1.28fr 0.72fr;
}

.memory-choice-list-card {
  padding: 13px 16px 13px 17px;
}

.reveal .memory-choice-list {
  display: grid;
  gap: 7px;
  grid-template-columns: minmax(0, 1fr);
  font-size: 16pt;
  line-height: 1.15;
  margin: 0 0 0 1em;
  padding: 0;
}

.reveal .memory-choice-list li {
  font-size: inherit;
}

.memory-choice-text .callout {
  font-size: 17pt;
  line-height: 1.15;
  margin: 0;
}

.memory-choice-figure {
  align-items: center;
  display: flex;
  justify-content: center;
  justify-self: stretch;
  min-height: 295px;
  overflow: hidden;
}

.memory-choice-figure .media {
  max-height: none;
  transform: scale(1.08);
  width: 100%;
}

.model-compare {
  align-items: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.model-compare + .memory-strip {
  margin-top: 34px;
}

.model-card {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  min-height: 348px;
  padding-bottom: 12px;
}

.model-card .media.short {
  align-self: end;
  height: 150px;
  justify-self: stretch;
  object-fit: contain;
  width: 100%;
}

.model-card .small {
  margin-top: 4px;
}

.model-card .equation.compact {
  margin: 8px 0 0;
  padding-bottom: 6px;
  padding-top: 6px;
}

.local-global-source {
  margin-top: 10px;
}

.reveal .callout {
  background: var(--temporal-panel-soft);
  border-left: var(--accent-border);
  color: var(--temporal-ink);
  padding: 13px 18px;
}

.equation {
  background: var(--temporal-panel-soft);
  border: 1px solid var(--temporal-line);
  border-radius: var(--radius-card);
  color: var(--temporal-ink);
  font-size: 18pt;
  padding: 13px 16px;
  text-align: center;
}

.equation.compact {
  font-size: 14pt;
  margin-top: 12px;
  padding: 8px 10px;
}

.rnn-layout {
  align-items: start;
  display: grid;
  gap: 26px;
  grid-template-columns: 0.86fr 1.14fr;
}

.rnn-explainer {
  align-content: start;
  display: grid;
  gap: 14px;
  grid-template-rows: auto auto;
}

.rnn-step-list {
  display: grid;
  gap: 11px;
}

.rnn-step {
  padding: 11px 14px 12px;
}

.rnn-step strong {
  color: var(--temporal-primary-dark);
  display: block;
  font-size: 14pt;
  font-weight: 820;
}

.rnn-step span {
  color: var(--temporal-muted);
  display: block;
  font-size: 10.5pt;
  font-weight: 650;
  line-height: 1.2;
  margin-top: 3px;
}

.reveal .rnn-summary {
  color: var(--temporal-ink);
  font-size: 13pt;
  font-weight: 520;
  line-height: 1.36;
  margin: 4px 4px 0;
}

.rnn-figure-card {
  align-items: center;
  display: flex;
  height: 282px;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  padding: 10px 14px;
}

.rnn-figure-card .media {
  max-height: 262px;
  max-width: 100%;
  width: 100%;
}

.rnn-source {
  margin-top: 10px;
}

.lstm-gates-slide .rule {
  margin-bottom: 14px;
}

.lstm-gate-segments {
  display: grid;
  gap: 9px;
}

.lstm-gate-segment {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: 390px minmax(0, 1fr);
}

.lstm-gate-media {
  align-items: center;
  background: var(--temporal-panel);
  border: 1px solid var(--temporal-line);
  border-radius: var(--radius-card);
  box-shadow: var(--temporal-shadow-soft);
  display: flex;
  height: 162px;
  justify-content: center;
  overflow: hidden;
}

.lstm-gate-media img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.lstm-gate-card {
  align-content: center;
  background: var(--temporal-panel-soft);
  border: 1px solid var(--temporal-line);
  border-left: 5px solid var(--temporal-green);
  border-radius: var(--radius-card);
  display: grid;
  padding: 11px 17px 12px;
}

.lstm-source {
  margin-top: 8px;
}

.lstm-gate-card h3 {
  color: var(--temporal-primary-dark);
  font-size: 15.5pt;
  margin: 0 0 4px;
}

.lstm-gate-card p {
  color: var(--temporal-ink);
  font-size: 11.5pt;
  font-weight: 560;
  line-height: 1.14;
  margin: 0;
}

.gate-formula {
  color: var(--temporal-muted);
  font-size: 10.7pt;
  font-weight: 740;
  line-height: 1.16;
  margin-top: 6px;
}

.gate-formula span {
  display: block;
  margin-top: 2px;
}

.reservoir-callout {
  box-sizing: border-box;
  margin: 20px 0 0;
  width: 100%;
}

.reservoir-source {
  margin-top: 8px;
}

.conv-bridge-grid {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.conv-card {
  display: grid;
  grid-template-rows: auto auto auto;
  min-height: 0;
  padding: 13px 15px 15px;
}

.reveal .conv-card h3 {
  font-size: 18pt;
  margin-bottom: 5px;
}

.reveal .conv-card .small {
  color: var(--temporal-muted);
  font-size: 10.5pt;
  font-weight: 620;
  line-height: 1.22;
  margin: 0 0 10px;
}

.conv-card .diagram {
  border-radius: 0;
  height: 245px;
}

.conv-card .conv-diagram,
.conv2d-diagram {
  max-height: 245px;
}

.conv2d-diagram text {
  text-anchor: middle;
}

.conv2d-diagram .svg-label {
  fill: var(--temporal-muted) !important;
  font-size: 12pt !important;
  font-weight: 800;
}

.image-pixel {
  stroke: #cfd8dc;
  stroke-width: 2;
  rx: 7;
}

.pixel-a {
  fill: #f8fafb;
}

.pixel-b {
  fill: #e9eff2;
}

.pixel-c {
  fill: #d7e0e4;
}

.pixel-d {
  fill: #c0ccd1;
}

.conv2d-window {
  animation: conv-window-glow 7s ease-in-out infinite;
}

.conv2d-link {
  animation: conv-path-pulse 7s ease-in-out infinite;
}

.conv2d-output {
  animation: conv-output-pulse 7s ease-in-out infinite;
}

.conv-concepts {
  align-items: center;
  background: var(--temporal-panel-soft);
  border: 1px solid var(--temporal-line);
  border-radius: var(--radius-card);
  display: grid;
  gap: 18px;
  grid-template-columns: 0.9fr 1.1fr;
  margin-top: 12px;
  padding: 10px 14px;
}

.reveal .conv-concepts .lead {
  color: var(--temporal-muted);
  font-size: 12pt;
  font-weight: 700;
  line-height: 1.16;
  margin: 0 0 8px;
}

.conv-concepts .equation {
  background: var(--temporal-panel);
  font-size: 13.5pt;
  padding: 7px 10px;
}

.conv-concept-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 24px;
}

.reveal .conv-concept-list li {
  color: var(--temporal-ink);
  font-size: 13.5pt;
  line-height: 1.14;
  margin: 0;
}

.reveal .conv-concept-list strong {
  color: var(--temporal-primary-dark);
}

/* Media primitives */
.media {
  display: block;
  max-height: 405px;
  max-width: 100%;
  object-fit: contain;
}

.media.short {
  max-height: 275px;
}

.media.tall {
  max-height: 430px;
}

.electricity-figure {
  max-height: 430px;
  width: 100%;
}

.image-frame {
  background: var(--temporal-panel);
  border: 1px solid var(--temporal-line);
  border-radius: var(--radius-card);
  box-shadow: var(--temporal-shadow);
  padding: 6px;
}

.media-row {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: center;
}

.media-row > div {
  flex: 1 1 0;
  min-width: 0;
}

.media-row img {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.paired-scenes {
  align-items: start;
}

.paired-scenes .caption {
  text-align: center;
}

.flood-animation-wrapper {
  max-width: 450px;
  margin: 0 auto;
}

.flood-animation-wrapper .image-frame {
  display: grid;
  overflow: hidden;
  padding: 0;
  place-items: center;
}

.flood-image-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--temporal-panel-soft);
}

.flood-image-stack .before-image,
.flood-image-stack .after-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  max-height: none !important;
  max-width: none !important;
  padding: 0 !important;
  object-fit: cover;
  display: block;
}

.flood-image-stack .after-image {
  animation: flood-crossfade 3s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.flood-caption-stack {
  position: relative;
  height: 40px;
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

.flood-caption-stack .caption {
  position: absolute;
  top: 0;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--temporal-line);
  padding: 8px 20px;
  border-radius: 24px;
  font-weight: 700;
  font-size: 11pt;
  color: var(--temporal-primary-dark);
  box-shadow: 0 4px 12px rgba(20, 54, 66, 0.08);
}

.flood-caption-stack .before-caption {
  animation: flood-crossfade-reverse 3s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.flood-caption-stack .after-caption {
  animation: flood-crossfade 3s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal .flood-source {
  text-align: center;
}

@keyframes flood-crossfade {
  0%, 42% { opacity: 0; }
  50%, 92% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes flood-crossfade-reverse {
  0%, 42% { opacity: 1; }
  50%, 92% { opacity: 0; }
  100% { opacity: 1; }
}

.reveal .caption,
.reveal .source {
  color: var(--temporal-muted);
  font-size: var(--caption-size);
  line-height: 1.24;
  margin-top: 8px;
}

.reveal .caption {
  font-weight: 520;
}

.reveal .source {
  margin-top: 14px;
}

.source a,
.caption a,
.references a {
  color: var(--temporal-primary-dark);
}

.title-slide {
  background: var(--temporal-bg);
}

.title-layout {
  align-items: center;
  display: grid;
  gap: 44px;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 638px;
}

.title-copy {
  max-width: 820px;
}

.title-slide h1 {
  font-size: 50pt;
  max-width: none;
}

.title-slide h1 span {
  display: block;
  white-space: nowrap;
}

.title-slide .subtitle {
  color: var(--temporal-muted);
  font-size: 20pt;
  line-height: 1.28;
  margin: 18px 0 0;
  max-width: 820px;
}

.reveal-command-box {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  color: var(--temporal-muted);
  opacity: 0.8;
}

.reveal .reveal-command-box ul {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.reveal .reveal-command-box li {
  align-items: center;
  color: var(--temporal-muted);
  display: flex;
  font-size: 10pt;
  gap: 6px;
  margin: 0;
}

.reveal-command-box kbd {
  background: transparent;
  border: 1px solid rgba(135, 150, 143, 0.4);
  border-radius: 4px;
  color: var(--temporal-muted);
  font-family: var(--body-font);
  font-size: 9pt;
  font-weight: 600;
  line-height: 1;
  padding: 3px 6px;
  text-align: center;
}

.title-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 500px;
}

.title-carousel-container {
  isolation: isolate;
  position: relative;
  width: 100%;
  height: 400px;
}

.title-carousel-item {
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  overflow: hidden;
  animation: title-carousel-item 14s infinite cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: var(--delay);
  box-shadow: var(--temporal-shadow);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

/* Frames move left-to-right; delays make the featured frame advance chronologically. */
.title-carousel-item:nth-child(1) { background: var(--temporal-primary-soft); border-color: var(--temporal-primary); }
.title-carousel-item:nth-child(2) { background: var(--temporal-green-soft); border-color: var(--temporal-green); }
.title-carousel-item:nth-child(3) { background: var(--temporal-orange-soft); border-color: var(--temporal-orange); }
.title-carousel-item:nth-child(4) { background: var(--temporal-purple-soft); border-color: var(--temporal-purple); }
.title-carousel-item:nth-child(5) { background: var(--temporal-neutral-soft); border-color: var(--temporal-muted); }
.title-carousel-item:nth-child(6) { background: var(--temporal-green-soft); border-color: var(--temporal-green); }
.title-carousel-item:nth-child(7) { background: var(--temporal-primary-soft); border-color: var(--temporal-primary); }

.title-carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: title-carousel-img 14s infinite cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: var(--delay);
}

@keyframes title-carousel-item {
  0%, 2% { /* Hidden left */
    transform: translate(calc(-50% - 300px), -50%); width: 24px; height: 50px; border-radius: 6px; opacity: 0; border-width: 3px; border-style: solid; z-index: 1;
  }
  12%, 16% { /* Outer left */
    transform: translate(calc(-50% - 250px), -50%); width: 24px; height: 50px; border-radius: 6px; opacity: 1; border-width: 3px; border-style: solid; z-index: 1;
  }
  26%, 30% { /* Inner left */
    transform: translate(calc(-50% - 200px), -50%); width: 24px; height: 50px; border-radius: 6px; opacity: 1; border-width: 3px; border-style: solid; z-index: 1;
  }
  40%, 45% { /* Slot 3: Center Image */
    transform: translate(-50%, -50%); width: 440px; height: 320px; border-radius: 14px; opacity: 1; border-width: 3px; border-style: solid; z-index: 5;
  }
  55%, 59% { /* Inner right */
    transform: translate(calc(-50% + 200px), -50%); width: 24px; height: 50px; border-radius: 6px; opacity: 1; border-width: 3px; border-style: solid; z-index: 1;
  }
  69%, 73% { /* Outer right */
    transform: translate(calc(-50% + 250px), -50%); width: 24px; height: 50px; border-radius: 6px; opacity: 1; border-width: 3px; border-style: solid; z-index: 1;
  }
  83%, 100% { /* Hidden right */
    transform: translate(calc(-50% + 300px), -50%); width: 24px; height: 50px; border-radius: 6px; opacity: 0; border-width: 3px; border-style: solid; z-index: 1;
  }
}

@keyframes title-carousel-img {
  0%, 33% { opacity: 0; }
  39%, 46% { opacity: 1; }
  52%, 100% { opacity: 0; }
}

.title-flow-bridge {
  align-items: center;
  color: var(--temporal-muted);
  display: grid;
  font-size: 9.5pt;
  font-weight: 780;
  gap: 10px;
  grid-template-columns: minmax(34px, 1fr) auto minmax(34px, 1fr);
  letter-spacing: 0.08em;
  margin: 0 38px;
  text-transform: uppercase;
}

.title-flow-bridge::before,
.title-flow-bridge::after {
  background: linear-gradient(to right, transparent, var(--temporal-green), transparent);
  content: "";
  height: 2px;
}

.title-flow-bridge span {
  white-space: nowrap;
}

.title-sequence-card {
  padding-top: 11px;
}

.temporal-card-heading {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.temporal-card-heading .temporal-card-label {
  margin-bottom: 0;
}

.title-series-token {
  color: var(--temporal-primary-dark);
  font-size: 9pt;
  font-weight: 720;
}

.title-mini-strip span {
  position: relative;
}

.title-mini-strip .title-time-sample {
  border-color: var(--temporal-primary);
  box-shadow: 0 0 0 2px rgba(11, 120, 150, 0.12);
}

.title-mini-strip .title-time-sample::after {
  color: var(--temporal-primary-dark);
  content: attr(data-step);
  font-size: 7.5pt;
  font-weight: 820;
  left: 50%;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.section-title-slide {
  background:
    linear-gradient(135deg, rgba(231, 244, 246, 0.74) 0%, rgba(231, 244, 246, 0.74) 30%, transparent 30%),
    linear-gradient(180deg, var(--temporal-bg) 0%, #f5faf6 100%);
  overflow: hidden;
  position: relative;
}

.section-title-slide::before {
  content: "";
  position: absolute;
  bottom: 56px;
  left: 46px;
  width: calc(100% - 92px);
  height: 3px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
}

.section-title-slide::after {
  content: "";
  position: absolute;
  bottom: 56px;
  left: 46px;
  width: calc((100% - 92px) * (var(--progress) / 8));
  height: 3px;
  background: linear-gradient(to right, var(--temporal-primary), var(--temporal-purple));
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(113, 103, 154, 0.25);
  transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.section-title-layout {
  align-items: center;
  display: grid;
  gap: 34px;
  grid-template-columns: 150px minmax(0, 1fr);
  min-height: 638px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.section-title-index {
  color: rgba(7, 84, 106, 0.16);
  font-family: var(--heading-font);
  font-size: 88pt;
  font-weight: 800;
  line-height: 0.92;
}

.section-title-copy {
  max-width: 680px;
  min-width: 0;
}

.section-title-slide h2 {
  font-size: 43pt;
  line-height: 0.98;
  margin-bottom: 18px;
  max-width: 680px;
}

.section-title-slide p {
  color: var(--temporal-muted);
  font-size: 22pt;
  line-height: 1.22;
  margin: 0;
  max-width: 660px;
}

.temporal-card {
  background: var(--temporal-panel);
  border: 1px solid var(--temporal-line);
  border-radius: var(--radius-card);
  box-shadow: var(--temporal-shadow);
  padding: 12px 14px;
}

.temporal-card-label {
  color: var(--temporal-muted);
  display: block;
  font-size: 9pt;
  font-weight: 760;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.setup-layout {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

.setup-equation {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 18px;
  grid-column: 1;
  grid-row: 1;
  justify-content: space-between;
  min-height: 190px;
  padding: 18px 22px;
}

.setup-formula-row {
  align-items: baseline;
  color: var(--temporal-ink);
  display: flex;
  flex-wrap: wrap;
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 25pt;
  gap: 0.24em;
  justify-content: center;
  line-height: 1.15;
}

.model-symbol {
  font-weight: 700;
}

.setup-formula-row sub,
.window-horizon-map sub {
  font-size: 0.55em;
}

.formula-arrow {
  color: var(--temporal-muted);
  display: inline-block;
  font-family: "Inter", "Aptos", "Segoe UI", Arial, sans-serif;
  padding: 0 8px;
}

.window-horizon-map {
  align-items: stretch;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.horizon-block {
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 104px;
  padding: 16px 18px;
}

.history-window {
  background: var(--temporal-green-soft);
  border: 2px dashed #bfdcba;
}

.forecast-window {
  background: var(--temporal-red-soft);
  border: 2px dashed #e2bbb8;
}

.horizon-block strong,
.horizon-block > span,
.horizon-block small {
  display: block;
}

.horizon-block strong {
  color: var(--temporal-primary-dark);
  font-size: 10pt;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.horizon-block > span {
  color: var(--temporal-ink);
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 24pt;
  font-weight: 760;
  margin-top: 4px;
}

.horizon-block small {
  color: var(--temporal-muted);
  font-size: 11pt;
  font-weight: 720;
  margin-top: 3px;
}

.horizon-arrow {
  align-self: center;
  color: var(--temporal-muted);
  font-size: 22pt;
  font-weight: 760;
}

.setup-meta {
  display: grid;
  gap: 10px;
  grid-column: 1;
  grid-row: 2;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.setup-meta div {
  padding: 10px 12px 10px 13px;
}

.setup-meta strong {
  display: block;
  font-size: 17pt;
}

.setup-meta span {
  color: var(--temporal-muted);
  display: block;
  font-size: 10.5pt;
  font-weight: 700;
  margin-top: 4px;
}

.memory-strip {
  align-items: center;
  background: var(--temporal-panel-soft);
  border-left: 5px solid var(--temporal-green);
  border-radius: 0 8px 8px 0;
  display: grid;
  gap: 10px 22px;
  grid-column: 1;
  grid-row: 3;
  grid-template-columns: 0.82fr 1.18fr;
  padding: 18px 22px;
}

.memory-strip p {
  color: var(--temporal-primary-dark);
  font-size: 16pt;
  font-weight: 800;
  grid-column: 1;
  line-height: 1.08;
  margin: 0;
}

.memory-strip ul {
  color: var(--temporal-ink);
  columns: 2;
  font-size: 13pt;
  grid-column: 2;
  grid-row: 1 / span 2;
  line-height: 1.2;
  margin: 0 0 0 1em;
}

.memory-strip li {
  font-size: inherit;
}

.memory-strip li + li {
  margin-top: 0.35em;
}

.memory-choice-list li {
  color: var(--temporal-ink);
  font-weight: 650;
  line-height: 1.16;
  margin: 0;
  padding: 0;
}

.window-layout {
  align-items: start;
  display: grid;
  gap: 24px;
  grid-template-columns: 0.72fr 1.28fr;
}

.window-text {
  display: grid;
  gap: 18px;
}

.window-equation {
  font-size: 13pt;
  margin-top: 0;
}

.window-method-card {
  padding: 13px 16px 13px 17px;
}

.window-method-card ul {
  color: var(--temporal-ink);
  display: grid;
  font-size: 14pt;
  gap: 7px;
  line-height: 1.15;
  margin: 0 0 0 1em;
  padding: 0;
}

.window-method-card li {
  font-size: inherit;
  font-weight: 650;
  margin: 0;
}

.window-visual .media {
  margin-top: 4px;
  max-height: 410px;
  width: 100%;
}

.sliding-window-source {
  margin-top: 10px;
}

.temporal-mini-strip {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(12, 1fr);
}

/* Compact temporal strips */
.temporal-mini-strip span,
.temporal-strip span {
  background: var(--temporal-green-soft);
  border: 1px solid var(--temporal-green-line);
  border-radius: 5px;
  min-height: 22px;
}

.temporal-mini-strip .peak,
.temporal-strip .peak {
  background: var(--temporal-orange-soft);
  border-color: var(--temporal-orange-line);
}

.temporal-mini-strip .cloud,
.temporal-strip .missing {
  background: var(--temporal-neutral-soft);
  border-color: var(--temporal-neutral-line);
  color: var(--temporal-muted);
}

.temporal-strip {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(12, 1fr);
}

.temporal-strip.labeled span {
  align-items: center;
  display: flex;
  font-size: 9pt;
  font-weight: 760;
  flex-direction: column;
  justify-content: center;
  min-height: 48px;
  text-align: center;
}

.attention-sequence span {
  min-height: 58px;
}

.attention-sequence strong {
  display: block;
  font-size: 10pt;
  line-height: 1;
}

.attention-sequence em {
  color: var(--temporal-muted);
  display: block;
  font-size: 7pt;
  font-style: normal;
  font-weight: 780;
  line-height: 1;
  margin-top: 5px;
  text-transform: uppercase;
}

.attention-sequence .peak em {
  color: var(--temporal-warm-muted);
}

.attention-sequence .peak {
  animation: peak-signal-pulse 2.8s ease-in-out infinite;
  transform-origin: center;
}

.attention-sequence .peak-b {
  animation-delay: 0.35s;
}

.attention-sequence .missing {
  animation: cloud-mask-fade 2.8s ease-in-out infinite;
  transform-origin: center;
}

.sequence-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.sequence-legend span {
  align-items: center;
  color: var(--temporal-muted);
  display: inline-flex;
  font-size: 10pt;
  font-weight: 780;
  gap: 6px;
}

.sequence-legend i {
  border: 1px solid var(--temporal-green-line);
  border-radius: 4px;
  display: inline-block;
  height: 12px;
  width: 18px;
}

.sequence-legend .usable {
  background: var(--temporal-green-soft);
}

.sequence-legend .peak {
  background: var(--temporal-orange-soft);
  border-color: var(--temporal-orange-line);
}

.sequence-legend .missing {
  background: var(--temporal-neutral-soft);
  border-color: var(--temporal-neutral-line);
}

@keyframes cloud-mask-fade {
  0%, 100% {
    filter: none;
    opacity: 0.72;
    transform: scale(1);
  }
  42%, 58% {
    filter: saturate(0.65);
    opacity: 0.24;
    transform: scale(0.74);
  }
}

@keyframes peak-signal-pulse {
  0%, 100% {
    box-shadow: none;
    transform: scale(1);
  }
  38%, 52% {
    box-shadow: 0 0 0 3px rgba(183, 119, 25, 0.16);
    transform: scale(1.08);
  }
}

/* Diagram primitives */
.diagram {
  background: var(--temporal-panel);
  border: 1px solid var(--temporal-line);
  border-radius: var(--radius-card);
  box-shadow: var(--temporal-shadow);
  display: block;
  max-height: 430px;
  min-height: 255px;
  width: 100%;
}

.diagram.diagram-frameless {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: 0;
}

.tcn-diagram {
  max-height: 470px;
}

.tcn-layout {
  align-items: start;
}

#tcn-receptive-fields .equation.compact {
  margin: 10px 0 18px;
  padding: 4px 10px;
}

#tcn-receptive-fields .equation.compact mjx-container[display="true"] {
  margin: 0.25em 0;
}

.tcn-receptive-callout {
  margin: 18px 0 0;
}

.causal-layout {
  align-items: start;
}

.causal-leakage-callout {
  margin: 22px 0 0;
}

.causal-source {
  margin-top: 8px;
}

.token-input-layout {
  align-items: start;
  gap: 28px;
}

.token-input-layout > * {
  align-self: start;
}

#transformer-time-and-availability-inputs .lead {
  font-size: 19.5pt;
  line-height: 1.18;
  margin: 0 0 15px;
}

.token-input-list {
  margin-bottom: 0;
  margin-top: 0;
}

.token-input-list li {
  font-size: 15.5pt;
  line-height: 1.18;
}

.token-input-list li + li {
  margin-top: 0.32em;
}

#transformer-time-and-availability-inputs .sequence-card {
  margin-top: 0;
}

.continuous-equation {
  font-size: 15.5pt;
  margin-bottom: 24px;
  padding: 9px 12px;
}

.continuous-equation mjx-container[display="true"] {
  margin: 0.05em 0;
}

.continuous-layout .card {
  display: flex;
  flex-direction: column;
}

.continuous-layout .card h3 {
  font-size: 17pt;
  line-height: 1.08;
  margin-bottom: 8px;
}

.continuous-layout .diagram {
  flex: 1;
  height: 100%;
  min-height: 0;
}

.continuous-callout {
  margin: 22px 0 0;
}

.continuous-source {
  margin-top: 8px;
}

.ssm-source {
  margin-top: 8px;
}

.reveal #discrete-state-space-scan .lead {
  font-size: 21pt;
  line-height: 1.18;
}

.ssm-discrete-layout .card {
  display: flex;
  flex-direction: column;
}

.ssm-discrete-layout .diagram {
  flex: 0 0 auto;
  height: 232px;
  min-height: 0;
}

.ssm-scan-card h3 {
  font-size: 16pt;
  line-height: 1.05;
  margin-bottom: 12px;
}

.ssm-bridge-equation {
  display: grid;
  gap: 12px;
  margin: 0 0 24px;
  padding: 8px 12px 10px;
}

.ssm-bridge-equation span {
  color: var(--temporal-primary-dark);
  display: block;
  font-size: 10.5pt;
  font-weight: 820;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
  text-transform: uppercase;
}

.reveal .ssm-parameter-card {
  color: var(--temporal-muted);
  font-size: 16.2pt;
  font-weight: 500;
  line-height: 1.12;
  margin: 18px 0 0;
  padding: 8px 12px;
  white-space: nowrap;
  width: 100%;
}

.ssm-scan-caption {
  color: var(--temporal-muted);
  font-size: 10.5pt;
  font-weight: 500;
  line-height: 1.2;
  margin: 10px 0 0;
}

#s4-mamba-selective-scan .lead {
  font-size: 18pt;
  line-height: 1.18;
  margin: 0 0 14px;
  max-width: 1180px;
}

.mamba-comparison-card {
  margin-top: 0;
  padding: 10px 12px 9px;
}

.mamba-comparison-diagram {
  height: 380px;
  max-height: none;
}

.mamba-comparison-diagram .ssm-title {
  fill: var(--temporal-ink) !important;
  font-size: 15pt !important;
  font-weight: 800;
}

.mamba-comparison-diagram .ssm-small {
  fill: var(--temporal-muted) !important;
  font-size: 9.8pt !important;
  font-weight: 620;
}

.mamba-comparison-diagram .ssm-caption-title {
  fill: var(--temporal-ink) !important;
  font-size: 11pt !important;
  font-weight: 780;
}

.mamba-comparison-diagram .ssm-caption-text {
  fill: var(--temporal-muted) !important;
  font-size: 9.3pt !important;
  font-weight: 620;
}

.mamba-comparison-diagram .ssm-panel {
  fill: var(--temporal-panel);
  rx: 18px;
  stroke: var(--temporal-line);
  stroke-width: 2;
}

.mamba-comparison-diagram marker#arrow-purple path {
  fill: var(--temporal-purple);
}

.mamba-comparison-diagram marker#arrow-blue path {
  fill: var(--temporal-primary);
}

.mamba-comparison-diagram marker#arrow-orange path {
  fill: var(--temporal-orange);
}

.mamba-comparison-diagram .ssm-state {
  fill: var(--temporal-purple-soft);
  stroke: var(--temporal-purple);
  stroke-width: 3;
}

.mamba-comparison-diagram .ssm-state-text {
  fill: var(--temporal-purple-ink) !important;
  font-size: 11pt !important;
  font-weight: 720;
  dominant-baseline: middle;
  text-anchor: middle;
}

.mamba-comparison-diagram .ssm-input {
  fill: var(--temporal-primary-soft);
  rx: 10px;
  stroke: var(--temporal-primary);
  stroke-width: 2.4;
}

.mamba-comparison-diagram .ssm-input-text {
  fill: var(--temporal-primary-dark) !important;
  font-size: 11pt !important;
  font-weight: 720;
  dominant-baseline: middle;
  text-anchor: middle;
}

.mamba-comparison-diagram .ssm-filter {
  fill: #f2f4f6;
  rx: 10px;
  stroke: var(--temporal-axis);
  stroke-width: 2.2;
}

.mamba-comparison-diagram .ssm-filter-text {
  fill: #4f5b66 !important;
  font-size: 11pt !important;
  font-weight: 720;
  dominant-baseline: middle;
  text-anchor: middle;
}

.mamba-comparison-diagram .ssm-out {
  fill: var(--temporal-green-soft);
  rx: 10px;
  stroke: var(--temporal-green);
  stroke-width: 2.2;
}

.mamba-comparison-diagram .ssm-out-text {
  fill: var(--temporal-green-ink) !important;
  font-size: 11pt !important;
  font-weight: 720;
  dominant-baseline: middle;
  text-anchor: middle;
}

.mamba-comparison-diagram .ssm-gate {
  fill: var(--temporal-orange-soft);
  stroke: var(--temporal-orange);
  stroke-width: 2.4;
}

.mamba-comparison-diagram .ssm-gate-text {
  fill: var(--temporal-orange-ink) !important;
  font-size: 11pt !important;
  font-weight: 800;
  dominant-baseline: middle;
  text-anchor: middle;
}

.mamba-comparison-diagram .ssm-purple-arrow {
  fill: none;
  marker-end: url("#arrow-purple");
  stroke: var(--temporal-purple);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.mamba-comparison-diagram .ssm-blue-arrow {
  fill: none;
  marker-end: url("#arrow-blue");
  stroke: var(--temporal-primary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.1;
}

.mamba-comparison-diagram .ssm-orange-arrow {
  fill: none;
  marker-end: url("#arrow-orange");
  stroke: var(--temporal-orange);
  stroke-dasharray: 5 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.1;
}

.mamba-comparison-diagram .ssm-state-flow {
  fill: none;
  marker-end: url("#arrow-purple");
  stroke: var(--temporal-purple);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

#s4-mamba-selective-scan .source {
  margin-top: 9px;
}

.motif-diagram text {
  font-size: 10pt !important;
}

.motif-diagram .svg-label {
  font-size: 10pt !important;
}

.motif-diagram .motif-column-label {
  text-anchor: middle;
}

.motif-diagram .motif-row-label {
  fill: var(--temporal-muted) !important;
  font-size: 9.5pt !important;
  font-weight: 500;
  text-anchor: middle;
}

.diagram text {
  fill: var(--temporal-ink);
  font-family: var(--body-font);
  font-size: 14pt;
  letter-spacing: 0;
}

.diagram marker path {
  fill: var(--temporal-muted);
}

.svg-box {
  fill: var(--temporal-panel);
  stroke: var(--temporal-line);
  stroke-width: 2;
  rx: 7;
}

.svg-accent {
  fill: var(--temporal-purple-soft);
  stroke: var(--temporal-purple);
  stroke-width: 2;
  rx: 7;
}

.svg-accent-circle {
  fill: var(--temporal-purple-soft);
  stroke: var(--temporal-purple);
  stroke-width: 2;
}

.svg-green {
  fill: var(--temporal-green-soft);
  stroke: var(--temporal-green);
  stroke-width: 2;
  rx: 7;
}

.svg-orange {
  fill: var(--temporal-orange-soft);
  stroke: var(--temporal-orange);
  stroke-width: 2;
  rx: 7;
}

.conv-diagram text {
  text-anchor: middle;
}

.conv-diagram .svg-label {
  fill: var(--temporal-muted) !important;
  font-size: 12.5pt !important;
  font-weight: 800;
}

.conv-sequence text,
.conv-output-label {
  font-size: 12.5pt;
  font-weight: 800;
}

.conv-tap {
  fill-opacity: 0.5;
  stroke-width: 2.5;
  rx: 7;
}

.conv-tap.tap-1 {
  fill: #eeeaf7;
  stroke: var(--temporal-purple);
}

.conv-tap.tap-2 {
  fill: #e9f6f9;
  stroke: var(--temporal-blue);
}

.conv-tap.tap-3 {
  fill: var(--temporal-orange-soft);
  stroke: var(--temporal-orange);
}

.conv-window {
  animation: conv-window-glow 7s ease-in-out infinite;
}

.conv-paths {
  animation: conv-path-pulse 7s ease-in-out infinite;
}

.tap-line {
  fill: none;
  stroke-linecap: round;
  stroke-width: 2.2;
}

.tap-line.tap-1 {
  stroke: var(--temporal-purple);
}

.tap-line.tap-2 {
  stroke: var(--temporal-blue);
}

.tap-line.tap-3 {
  stroke: var(--temporal-orange);
}

.conv-output {
  animation: conv-output-pulse 7s ease-in-out infinite;
}

.causal-diagram text {
  text-anchor: middle;
}

.causal-diagram .svg-label {
  fill: var(--temporal-muted) !important;
  font-size: 12.5pt !important;
  font-weight: 800;
}

.causal-sequence text,
.causal-note {
  font-size: 12.5pt;
  font-weight: 800;
}

.causal-pad {
  fill: #f2f4f5;
  stroke: #cfd8dc;
  stroke-dasharray: 5 4;
  stroke-width: 2;
  rx: 7;
}

.future-box {
  fill: var(--temporal-panel);
  opacity: 0.38;
  stroke: var(--temporal-line);
  stroke-width: 2;
  rx: 7;
}

.causal-window {
  animation: conv-window-glow 7s ease-in-out infinite;
}

.causal-paths {
  animation: conv-path-pulse 7s ease-in-out infinite;
}

.causal-output {
  animation: conv-output-pulse 7s ease-in-out infinite;
}

.causal-note {
  fill: var(--temporal-muted) !important;
  opacity: 0.75;
}

.conv-legend text {
  fill: var(--temporal-muted);
  font-size: 11pt;
  font-weight: 800;
  text-anchor: start;
}

@keyframes conv-window-glow {
  0%, 100% {
    opacity: 0.86;
  }
  20%, 80% {
    opacity: 1;
  }
}

@keyframes conv-path-pulse {
  0%, 100% {
    opacity: 0.58;
  }
  18%, 82% {
    opacity: 1;
  }
}

@keyframes conv-output-pulse {
  0%, 100% {
    filter: none;
  }
  20%, 82% {
    filter: drop-shadow(0 0 7px rgba(79, 138, 91, 0.28));
  }
}

.tcn-diagram .svg-label {
  fill: var(--temporal-muted) !important;
  font-size: 12.5pt !important;
  font-weight: 760;
  text-anchor: start;
}

.tcn-diagram text {
  text-anchor: middle;
}

#arrowhead-tcn-purple path {
  fill: var(--temporal-purple);
}

#arrowhead-tcn-orange path {
  fill: var(--temporal-orange);
}

#arrowhead-tcn-green path {
  fill: var(--temporal-green);
}

.tcn-input-row .svg-box {
  animation: tcn-input-pulse 4.8s ease-in-out infinite;
  fill: var(--temporal-primary-soft);
  stroke: var(--temporal-primary);
  fill-opacity: 1;
}

.tcn-input-row text {
  fill: var(--temporal-primary-dark);
  font-weight: 700;
}

.tcn-links line {
  fill: none;
  opacity: 0.34;
  stroke-linecap: round;
  stroke-width: 2.1;
}

.tcn-links.layer-1 line {
  animation: tcn-link-pulse 4.8s ease-in-out infinite;
  animation-delay: 0s;
  stroke: var(--temporal-purple);
}

.tcn-links.layer-2 line {
  animation: tcn-link-pulse 4.8s ease-in-out infinite;
  animation-delay: 1.2s;
  stroke: var(--temporal-orange);
}

.tcn-links.layer-3 line {
  animation: tcn-link-pulse 4.8s ease-in-out infinite;
  animation-delay: 2.4s;
  stroke: var(--temporal-green);
}

.tcn-nodes circle,
.tcn-nodes text,
.field-bar {
  animation-duration: 4.8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.tcn-nodes.layer-1 circle,
.tcn-nodes.layer-1 text {
  animation-name: tcn-node-pulse;
  animation-delay: 0s;
}

.tcn-nodes.layer-2 circle,
.tcn-nodes.layer-2 text {
  animation-name: tcn-node-pulse;
  animation-delay: 1.2s;
}

.tcn-nodes.layer-3 circle,
.tcn-nodes.layer-3 text {
  animation-name: tcn-node-pulse;
  animation-delay: 2.4s;
}

.field-bar {
  opacity: 0;
  rx: 6;
}

.field-bar.field-1 {
  animation-name: tcn-field-pulse;
  animation-delay: 0s;
  fill: var(--temporal-purple);
}

.field-bar.field-2 {
  animation-name: tcn-field-pulse;
  animation-delay: 1.2s;
  fill: var(--temporal-orange);
}

.field-bar.field-3 {
  animation-name: tcn-field-pulse;
  animation-delay: 2.4s;
  fill: var(--temporal-green);
}

@keyframes tcn-input-pulse {
  0%, 5%, 95%, 100% {
    fill: var(--temporal-primary-soft);
  }
  15%, 85% {
    fill: var(--temporal-primary-soft);
    filter: brightness(0.95);
  }
}

@keyframes tcn-link-pulse {
  0%, 5%, 45%, 100% {
    opacity: 0;
    stroke-width: 1.9;
  }
  15%, 35% {
    opacity: 0.95;
    stroke-width: 2.6;
  }
}

@keyframes tcn-node-pulse {
  0%, 5%, 45%, 100% {
    opacity: 0.38;
  }
  15%, 35% {
    opacity: 1;
  }
}

@keyframes tcn-field-pulse {
  0%, 5%, 45%, 100% {
    opacity: 0;
  }
  15%, 35% {
    opacity: 1;
  }
}

.attention-diagram text {
  text-anchor: middle;
}

.attention-layout {
  align-items: start !important;
}

.attention-layout > * {
  align-self: start;
}

.attention-layout .attention-diagram {
  margin-top: 6px;
}

#self-attention-temporal-memory .equation {
  font-size: 17pt;
  padding: 7px 14px;
}

#self-attention-temporal-memory .equation mjx-container[display="true"] {
  margin: 0.15em 0;
}

#self-attention-temporal-memory p.attention-callout {
  box-sizing: border-box;
  font-size: 18.5pt;
  font-weight: 260;
  line-height: 1.15;
  margin: 8px 0 0;
  width: 100%;
}

.attention-source {
  margin-top: 8px;
}

.attention-diagram .svg-label {
  text-anchor: start;
}

.attention-diagram .attention-target-label {
  fill: var(--temporal-primary-dark);
  font-size: 10.5pt;
  font-weight: 800;
  opacity: 0.72;
}

.attention-lines .attn-weight {
  fill: none;
  opacity: 0.72;
  stroke-linecap: round;
}

.attention-lines .attn-weight.low {
  stroke: var(--temporal-blue-light);
  stroke-width: 2.2;
}

.attention-lines .attn-weight.mid {
  stroke: var(--temporal-blue);
  stroke-width: 3.6;
}

.attention-lines .attn-weight.high {
  stroke: #07546a;
  stroke-width: 5.4;
}

.attention-diagram .weight-label {
  fill: var(--temporal-primary-dark);
  font-size: 10pt;
  font-weight: 800;
  opacity: 0.84;
}

.attention-lines .attn-flow {
  opacity: 0.9;
  pointer-events: none;
}

.attention-lines .attn-flow.low {
  fill: var(--temporal-blue-light);
}

.attention-lines .attn-flow.mid {
  fill: var(--temporal-blue);
}

.attention-lines .attn-flow.high {
  fill: #07546a;
}

.attention-context .svg-green {
  fill: var(--temporal-blue-soft);
  stroke: var(--temporal-blue);
}

.attention-diagram .svg-accent,
.attention-diagram .attention-target-label,
.attention-context,
.attention-lines .attn-weight,
.attention-diagram .weight-label {
  animation-duration: 3.2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.attention-diagram .svg-accent {
  animation-name: attention-query-pulse;
}

.attention-diagram .attention-target-label {
  animation-name: attention-target-pulse;
}

.attention-lines .attn-weight,
.attention-diagram .weight-label {
  animation-name: attention-weight-pulse;
}

.attention-lines .attn-weight.low,
.attention-diagram .weight-label.low {
  animation-delay: 0.15s;
}

.attention-lines .attn-weight.mid,
.attention-diagram .weight-label.mid {
  animation-delay: 0.45s;
}

.attention-lines .attn-weight.high,
.attention-diagram .weight-label.high {
  animation-delay: 0.75s;
}

.attention-context {
  animation-name: attention-context-pulse;
  animation-delay: 1.1s;
}

#temporal-transformer-pipeline .rule {
  margin-bottom: 16px;
}

.tt-feature-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
}

.tt-feature-grid .accent-card {
  padding: 10px 12px 10px 13px;
  text-align: left;
}

.tt-feature-grid strong,
.tt-feature-grid span {
  display: block;
}

.tt-feature-grid strong {
  color: var(--temporal-primary-dark);
  font-size: 10.5pt;
  font-weight: 820;
  margin-bottom: 4px;
}

.tt-feature-grid span {
  color: var(--temporal-muted);
  font-size: 9.8pt;
  font-weight: 600;
  line-height: 1.15;
}

.temporal-transformer-card {
  box-shadow: var(--temporal-shadow-soft);
  padding: 12px 13px;
}

.temporal-transformer-card .diagram {
  height: 430px;
  max-height: none;
}

.temporal-transformer-diagram text {
  fill: var(--temporal-ink);
  font-size: 13pt;
  font-weight: 720;
  dominant-baseline: middle;
  text-anchor: middle;
}

.temporal-transformer-diagram .tt-stage-title {
  fill: var(--temporal-primary-dark);
  font-size: 13.8pt;
  font-weight: 830;
}

.temporal-transformer-diagram .tt-small {
  fill: var(--temporal-muted);
  font-size: 9.6pt;
  font-weight: 680;
}

.temporal-transformer-diagram .tt-repeat {
  text-anchor: start;
}

.temporal-transformer-diagram .tt-panel {
  fill: #fbfcfc;
  stroke: var(--temporal-line);
  stroke-width: 1.5;
  rx: 15px;
}

.temporal-transformer-diagram .tt-token {
  animation: transformer-flow-primary 4.4s ease-in-out infinite;
  fill: var(--temporal-blue-soft);
  stroke: var(--temporal-blue);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  rx: 8px;
}

.temporal-transformer-diagram .tt-token-ctx {
  animation: transformer-flow-green 4.4s ease-in-out infinite;
  animation-delay: 2.3s;
  fill: var(--temporal-green-soft);
  stroke: var(--temporal-green);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  rx: 8px;
}

.temporal-transformer-diagram .tt-chip {
  animation: transformer-flow-primary 4.4s ease-in-out infinite;
  fill: #eef8fb;
  stroke: var(--temporal-blue);
  stroke-width: 1.8;
  transform-box: fill-box;
  transform-origin: center;
  rx: 10px;
}

.temporal-transformer-diagram .tt-block {
  fill: var(--temporal-purple-soft);
  stroke: var(--temporal-purple);
  stroke-width: 2.2;
  transform-box: fill-box;
  transform-origin: center;
  rx: 12px;
}

.temporal-transformer-diagram .tt-block.block-1 {
  animation: transformer-flow-purple 4.4s ease-in-out infinite;
  animation-delay: 0.78s;
}

.temporal-transformer-diagram .tt-block.block-2 {
  animation: transformer-flow-purple 4.4s ease-in-out infinite;
  animation-delay: 1.52s;
}

.temporal-transformer-diagram .tt-title {
  fill: var(--temporal-purple-ink);
  font-size: 15pt;
  font-weight: 830;
}

.temporal-transformer-diagram .tt-label {
  fill: var(--temporal-ink);
  font-size: 13.4pt;
  font-weight: 780;
}

.temporal-transformer-diagram .tt-subblock {
  fill: var(--temporal-panel);
  stroke: #d9d5e8;
  stroke-width: 1.6;
  rx: 8px;
}

.temporal-transformer-diagram .tt-subblock.attention {
  fill: var(--temporal-blue-soft);
  stroke: var(--temporal-blue);
}

.temporal-transformer-diagram .tt-subblock-label {
  fill: var(--temporal-ink);
  font-size: 11pt;
  font-weight: 760;
}

.temporal-transformer-diagram .tt-connector line,
.temporal-transformer-diagram .tt-blue-connector line,
.temporal-transformer-diagram .tt-inner-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.temporal-transformer-diagram .tt-connector line {
  stroke: var(--temporal-muted);
  stroke-width: 2.2;
}

.temporal-transformer-diagram .tt-connector polygon {
  fill: var(--temporal-muted);
}

.temporal-transformer-diagram .tt-blue-connector line {
  stroke: var(--temporal-blue);
  stroke-width: 2.4;
}

.temporal-transformer-diagram .tt-blue-connector polygon {
  fill: var(--temporal-blue);
}

.temporal-transformer-diagram .tt-inner-line {
  stroke: var(--temporal-muted);
  stroke-width: 1.9;
}

.temporal-transformer-diagram .tt-inner-head {
  fill: var(--temporal-muted);
}

.temporal-transformer-diagram .tt-pool {
  animation: transformer-flow-orange 4.4s ease-in-out infinite;
  animation-delay: 2.96s;
  fill: var(--temporal-orange-soft);
  stroke: var(--temporal-orange);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  rx: 9px;
}

.temporal-transformer-diagram .tt-output {
  animation: transformer-flow-green 4.4s ease-in-out infinite;
  animation-delay: 3.46s;
  fill: var(--temporal-green-soft);
  stroke: var(--temporal-green);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  rx: 9px;
}

@keyframes attention-query-pulse {
  0%, 100% {
    filter: none;
  }
  20%, 42% {
    filter: drop-shadow(0 0 5px rgba(113, 103, 154, 0.45));
  }
}

@keyframes transformer-flow-primary {
  0%, 18%, 100% {
    filter: none;
    transform: scale(1);
  }
  5%, 12% {
    filter: drop-shadow(0 0 7px rgba(43, 146, 172, 0.34));
    transform: scale(1.055);
  }
}

@keyframes transformer-flow-purple {
  0%, 18%, 100% {
    filter: none;
    transform: scale(1);
  }
  5%, 12% {
    filter: drop-shadow(0 0 8px rgba(117, 104, 155, 0.36));
    transform: scale(1.045);
  }
}

@keyframes transformer-flow-green {
  0%, 18%, 100% {
    filter: none;
    transform: scale(1);
  }
  5%, 12% {
    filter: drop-shadow(0 0 7px rgba(79, 138, 91, 0.34));
    transform: scale(1.055);
  }
}

@keyframes transformer-flow-orange {
  0%, 18%, 100% {
    filter: none;
    transform: scale(1);
  }
  5%, 12% {
    filter: drop-shadow(0 0 7px rgba(183, 119, 25, 0.32));
    transform: scale(1.055);
  }
}

@keyframes attention-weight-pulse {
  0%, 100% {
    opacity: 0.58;
  }
  28%, 55% {
    opacity: 1;
  }
}

@keyframes attention-target-pulse {
  0%, 100% {
    opacity: 0.56;
  }
  22%, 54% {
    opacity: 0.92;
  }
}

@keyframes attention-context-pulse {
  0%, 45%, 100% {
    filter: none;
  }
  58%, 78% {
    filter: drop-shadow(0 0 6px rgba(43, 146, 172, 0.35));
  }
}

.svg-label {
  fill: var(--temporal-muted) !important;
  font-size: 12.5pt !important;
  font-weight: 720;
}

/* Tables and references */
.comparison {
  background: var(--temporal-panel);
  border: 1px solid var(--temporal-line);
  border-collapse: separate;
  border-radius: var(--radius-card);
  border-spacing: 0;
  box-shadow: var(--temporal-shadow);
  font-size: 10.5pt;
  overflow: hidden;
  width: 100%;
}

.comparison th {
  background: var(--temporal-soft);
  color: var(--temporal-primary-dark);
  font-weight: 820;
}

.comparison th,
.comparison td {
  border-bottom: 1px solid var(--temporal-line);
  padding: 8px 9px;
  vertical-align: top;
}

.comparison tr:last-child td {
  border-bottom: none;
}

.architecture-table {
  line-height: 1.22;
}

.architecture-table tbody tr:nth-child(even) td {
  background: #fbfdfb;
}

.architecture-table th:first-child,
.architecture-table td:first-child {
  width: 18%;
}

.reveal .references {
  columns: 2;
  column-gap: 26px;
  font-size: 10.2pt;
  line-height: 1.18;
  list-style-position: outside;
  padding-left: 24px;
}

.reveal .references li {
  break-inside: avoid;
  font-size: inherit;
  margin-bottom: 5px;
}

.references-slide .rule {
  margin-bottom: 16px;
}

/* Reveal chrome */
.reveal .progress span {
  background: var(--temporal-green);
}

.reveal .slide-number {
  background: rgba(251, 252, 250, 0.92);
  border: 1px solid var(--temporal-line);
  border-radius: 5px;
  bottom: 12px;
  box-shadow: 0 6px 16px rgba(20, 54, 66, 0.08);
  color: var(--temporal-ink);
  font-size: 9pt;
  padding: 3px 7px;
  right: 96px;
  z-index: 40;
}

.reveal pre {
  box-shadow: none;
  font-size: 10pt;
}

.reveal code {
  color: var(--temporal-primary-dark);
}

@media (max-width: 900px) {
  .reveal {
    font-size: 17pt;
  }

  .reveal .slides > section:not(.chapter-stack),
  .reveal .slides > section > section {
    padding: 28px 30px;
  }

  .reveal .slides > section.chapter-stack {
    padding: 0;
  }

  .title-slide {
    background: var(--temporal-bg);
  }

  .title-layout,
  .rnn-layout,
  .two-col,
  .two-col.wide-left,
  .two-col.wide-right {
    grid-template-columns: 1fr;
  }

  .title-layout {
    gap: 24px;
    min-height: auto;
  }

  .title-visual,
  .title-visual img {
    min-height: 0;
    height: 290px;
  }

  .media {
    max-height: 300px;
  }

  .media-row {
    align-items: stretch;
    flex-direction: column;
  }
}