@font-face {
  font-family: 'Harding';
  src: url('../Harding%20Text%20Web%20Regular%20Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #111213;
  --fg: #ebe7e2;
  --fg-soft: #cfc9c1;
  --muted: #8c8780;
  --rule: #2a2b2c;
  --box: #242526;
  --pill-box: #171717;
  --accent: #ebe7e2;
  --icon: #eae5df;
  --icon-hover: #ebe7e2;
}

html, body, .reveal, .reveal-viewport {
  background: var(--bg) !important;
  color: var(--fg);
}

.reveal {
  font-family: 'Harding', Georgia, serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.reveal .slides {
  color: var(--fg);
}

.reveal .slides img[src$=".png"] {
  border-radius: 70px;
}

.reveal h1, .reveal h2, .reveal h3,
.reveal h4, .reveal h5, .reveal h6 {
  font-family: 'Harding', Georgia, serif;
  color: var(--fg);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin: 0;
  line-height: 1.1;
}

.reveal .progress {
  color: var(--muted);
}

.reveal .controls {
  color: var(--icon);
}

.reveal a {
  color: var(--accent);
}

/* ---------- Title slide ---------- */

.reveal section.title-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  text-align: left;
}

/* ---------- Persistent logos (live outside reveal.slides) ---------- */

.persistent-logos {
  position: fixed;
  top: 1.48vh;   /* 16/1080 */
  left: 0.83vw;  /* 16/1920 */
  display: flex;
  align-items: center;
  gap: 2.04vh;   /* 22/1080 */
  transform-origin: top left;
  transform: translate(0, 0) scale(1);
  transition: transform 750ms cubic-bezier(.65,.05,.36,1);
  z-index: 30;
  pointer-events: none;
}

.persistent-logos img {
  height: 5.93vh; /* 64/1080 */
  width: auto;
  display: block;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.persistent-logos img:first-child {
  height: 8.52vh; /* 92/1080 */
}

.persistent-logos img:nth-child(2) {
  margin-left: -2.78vh; /* -30/1080, keep proportional to logo heights */
}

/* Inner state: scale down 0.6x and tuck into bottom-left corner.
   At scale 0.6, tallest logo = 5.11vh; desired bottom margin = 1.48vh;
   so new top = 100 - 1.48 - 5.11 = 93.41vh, translateY = 93.41 - 1.48 = 91.93vh */
.persistent-logos.is-inner {
  transform: translate(0, 91.93vh) scale(0.6);
}

/* ---------- Persistent footer (byline ↔ slide number) ---------- */

.persistent-footer {
  position: fixed;
  right: 1.25vw;  /* 24/1920 */
  bottom: 1.85vh; /* 20/1080 */
  font-family: 'Harding', Georgia, serif;
  font-size: 2.5vh;
  color: var(--muted);
  letter-spacing: 0.02em;
  z-index: 30;
  pointer-events: none;
}

.persistent-footer .byline,
.persistent-footer .slide-number {
  display: inline-block;
  transition: opacity 500ms ease;
}

.persistent-footer .slide-number {
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0;
  font-variant-numeric: tabular-nums;
}

.persistent-footer.is-inner .byline {
  opacity: 0;
}

.persistent-footer.is-inner .slide-number {
  opacity: 1;
}

/* ---------- Persistent section label ---------- */

.persistent-section {
  position: fixed;
  font-family: 'Harding', Georgia, serif;
  color: var(--fg);
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  top: auto;
  left: auto;
  right: 6vw;
  bottom: 1.85vh;
  transform: translate(0, 0);
  transform-origin: top left;
  font-size: 2.5vh;
  letter-spacing: 0.02em;
  transition:
    transform 750ms cubic-bezier(.65,.05,.36,1),
    color 750ms cubic-bezier(.65,.05,.36,1),
    opacity 500ms ease;
}

.persistent-section.is-small {
  opacity: 1;
  color: var(--muted);
}

/* ---------- Persistent section nav (stacked on left edge) ---------- */

.persistent-section-nav {
  position: fixed;
  left: 2vw;
  top: 53%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 3.5vh;
  font-family: 'Harding', Georgia, serif;
  color: var(--muted);
  font-size: 2.5vh;
  letter-spacing: 0.08em;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
}

.persistent-section-nav.is-visible {
  opacity: 1;
}

.persistent-section-nav span {
  display: block;
  color: var(--muted);
  opacity: 0.28;
  transform-origin: top left;
  transition:
    transform 750ms cubic-bezier(.65,.05,.36,1),
    color 750ms cubic-bezier(.65,.05,.36,1),
    opacity 500ms ease;
}

.persistent-section-nav span.is-active {
  opacity: 1;
}

/* ---------- Persistent decomposition ---------- */

.persistent-decomp {
  position: fixed;
  top: 11.4vh; /* sits just above .content-box upper edge (top 180px in 1080 ref) */
  right: 0;
  height: 5.2vh; /* 56/1080 */
  width: 100%;
  z-index: 49;
  pointer-events: none;
}

.persistent-decomp .decomp-item {
  position: absolute;
  top: 0;
  height: 56px;
  width: auto;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: layout paint style;
  isolation: isolate;
}

.persistent-decomp .decomp-kick {
  right: 135px;
}

.persistent-decomp .decomp-cltr {
  right: 210px;
}

.persistent-decomp .decomp-fixed {
  right: 290px;
}

.persistent-decomp .decomp-full {
  right: 375px;
}

.persistent-decomp .decomp-item.is-visible {
  opacity: 1;
}

.persistent-decomp .decomp-item.is-animating {
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.6s ease-out;
}

/* ---------- Fullscreen button ---------- */

.fs-btn {
  position: fixed;
  top: 43px;
  right: 16px;
  z-index: 50;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pill-box);
  color: var(--icon);
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.fs-btn:hover {
  color: var(--icon-hover);
  border-color: var(--accent);
}

.fs-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.is-preview .fs-btn {
  display: none;
}

.title-slide .center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
}

.title-slide .title {
  font-size: 8.5rem;
  line-height: 1;
  color: var(--fg);
}

.title-slide .subtitle {
  font-size: 3rem;
  color: var(--fg-soft);
  font-style: normal;
}

/* ---------- Contents slide ---------- */

.reveal section.toc-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 180px 180px 160px;
  text-align: left;
}

.toc-slide .toc-heading {
  font-size: 3rem;
  color: var(--muted);
  letter-spacing: 0.03em;
  margin-bottom: 80px;
}

.toc-slide .toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1400px;
}

.toc-slide .toc-list li {
  display: flex;
  align-items: baseline;
  gap: 56px;
  font-size: 3.2rem;
  color: var(--fg);
  border-top: 1px solid var(--rule);
  padding-top: 32px;
  line-height: 1.1;
}

.toc-slide .toc-num {
  color: var(--muted);
  font-size: 1.8rem;
  min-width: 80px;
  letter-spacing: 0.08em;
}

.toc-slide .toc-text {
  flex: 1;
}

/* ---------- Generic content slide ---------- */

.reveal section.content-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0 90px;
  text-align: left;
}

.content-slide .slide-title {
  position: absolute;
  top: 60px;
  left: 90px;
  font-size: 3rem;
  color: var(--fg);
  margin: 0;
}

.content-slide .content-box {
  position: absolute;
  top: 180px;
  right: 280px;
  bottom: 160px;
  left: 180px;
  border: 1px dashed transparent;
  border-radius: 14px;
  overflow: hidden;
}

/* ---------- Naturalistic behaviors slide ---------- */

.naturalistic-slide .naturalistic-layout {
  position: absolute;
  inset: 0 0 0 8%;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 60px;
}

.naturalistic-slide .gif-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
  width: 100%;
  max-width: 100%;
  justify-self: start;
}

.naturalistic-slide .gif-grid img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

/* ---------- RNN models slide ---------- */

.rnn-slide .rnn-row {
  position: absolute;
  inset: 6% 4%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
  grid-auto-flow: column;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  column-gap: 40px;
  row-gap: 24px;
}

.rnn-slide .rnn-figure {
  margin: 0;
  display: contents;
}

.rnn-slide .rnn-figure img {
  width: 100%;
  max-height: 340px;
  height: auto;
  object-fit: contain;
  display: block;
}

.rnn-slide .rnn-title {
  font-size: 1.8rem;
  color: var(--fg);
  text-align: center;
  letter-spacing: 0.01em;
  align-self: start;
}

.rnn-slide .rnn-figure figcaption {
  align-self: start;
}

.rnn-slide .rnn-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 28px;
  background: var(--pill-box);
  border: 1px solid var(--rule);
  border-radius: 12px;
  font-size: 1.5rem;
  color: var(--fg-soft);
  line-height: 1.3;
  text-align: center;
  min-width: 220px;
}

/* ---------- Generic slide citation (bottom-left pill box) ---------- */

.content-slide .slide-citation {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 28px;
  background: var(--pill-box);
  border: 1px solid var(--rule);
  border-radius: 12px;
  font-size: 1.5rem;
  color: var(--fg-soft);
  line-height: 1.3;
  text-align: center;
  min-width: 220px;
}

/* ---------- Double-well potential slide ---------- */

.doublewell-slide .content-box {
  overflow: visible;
}

.doublewell-slide .doublewell-row {
  position: absolute;
  inset: 0;
}

.doublewell-slide .doublewell-anim {
  position: absolute;
  top: 50%;
  right: -18%;
  left: auto;
  transform: translateY(-50%);
  height: 130%;
  width: auto;
  max-width: none;
  display: block;
}

.doublewell-slide .doublewell-diagram {
  position: absolute;
  top: 50%;
  left: -2%;
  transform: translateY(-50%);
  width: 44%;
  height: auto;
  max-height: 115%;
  object-fit: contain;
  display: block;
  z-index: 2;
}

/* ---------- Single stable fixed point slide ---------- */

.fixedpoint-slide .content-box {
  overflow: visible;
}

.fixedpoint-slide .fixedpoint-row {
  position: absolute;
  inset: 0;
}

.fixedpoint-slide .fixedpoint-diagram {
  position: absolute;
  top: 50%;
  left: -2%;
  transform: translateY(-50%);
  width: 44%;
  height: auto;
  max-height: 115%;
  object-fit: contain;
  display: block;
  z-index: 2;
}

.fixedpoint-slide .fixedpoint-anim {
  position: absolute;
  top: 58%;
  right: -10%;
  left: auto;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  max-height: 165%;
  object-fit: contain;
  display: block;
}

/* ---------- Clusters, kick-zones and transitions slide ---------- */

.clusters-slide .content-box {
  overflow: visible;
}

.clusters-slide .clusters-row {
  position: absolute;
  inset: 0;
}

.clusters-slide .clusters-diagram {
  position: absolute;
  top: 50%;
  left: -2%;
  transform: translateY(-50%);
  width: 44%;
  height: auto;
  max-height: 115%;
  object-fit: contain;
  display: block;
  z-index: 2;
}

.clusters-slide .clusters-anim {
  position: absolute;
  top: 58%;
  right: -10%;
  left: auto;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  max-height: 165%;
  object-fit: contain;
  display: block;
}

/* ---------- Clusters detail slide ---------- */

.clusters-detail-slide .content-box {
  overflow: visible;
}

.clusters-detail-slide .clusters-detail-figure {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
}

.clusters-kicks-slide .kick-marker {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: transparent;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
}

.clusters-kicks-slide .kick-marker-a {
  top: 37%;
  left: 26%;
}

.clusters-kicks-slide .kick-marker-b {
  top: 35%;
  left: 32%;
}

.clusters-shrunk-slide .clusters-shrink {
  position: absolute;
  inset: 0;
  transform-origin: top left;
  transform: scale(0.5);
  will-change: transform;
  backface-visibility: hidden;
}

.clusters-shrunk-slide.present .clusters-shrink {
  animation: clusters-shrink-half 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes clusters-shrink-half {
  from { transform: scale(1); }
  to { transform: scale(0.5); }
}

.clusters-shrunk-slide .kick-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}

.clusters-shrunk-slide .kick-line {
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

.clusters-shrunk-slide.present .kick-lines {
  animation: kick-lines-in 0.6s ease-out 1.1s forwards;
}

@keyframes kick-lines-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.clusters-shrunk-slide .kick-target {
  position: absolute;
  margin: 0;
  width: 18%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  z-index: 3;
}

.clusters-shrunk-slide .kick-target img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
}

.clusters-shrunk-slide .kick-target figcaption {
  font-size: 1.6rem;
  color: var(--fg);
  letter-spacing: 0.01em;
}

.clusters-shrunk-slide .kick-target-cluster {
  left: 18%;
  top: 52%;
}

.clusters-shrunk-slide .kick-target-transition {
  right: 14%;
  top: 52%;
}

.clusters-shrunk-slide.present .kick-target {
  animation: kick-target-in 0.6s ease-out 1.3s forwards;
}

@keyframes kick-target-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---------- Clusters / neuron mapping slide ---------- */

.clusters-neuron-slide .clusters-shrink {
  position: absolute;
  inset: 0;
  transform-origin: top left;
  transform: scale(0.5);
  will-change: transform;
  backface-visibility: hidden;
}

.clusters-neuron-slide .kick-marker-mid {
  top: 36%;
  left: 29%;
  opacity: 0;
}

.clusters-neuron-slide.present .kick-marker-mid {
  animation: kick-lines-in 0.5s ease-out 0.25s forwards;
}

.clusters-neuron-slide .kick-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}

.clusters-neuron-slide .kick-line {
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

.clusters-neuron-slide.present .kick-lines {
  animation: kick-lines-in 0.6s ease-out 0.5s forwards;
}

.clusters-neuron-slide .kick-target {
  position: absolute;
  margin: 0;
  width: 56%;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  z-index: 3;
  will-change: transform, opacity;
  transform: translate3d(0, 8px, 0);
  backface-visibility: hidden;
}

.clusters-neuron-slide .kick-target img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
}

.clusters-neuron-slide .kick-target-neuron {
  left: 40%;
  top: 58%;
}

.clusters-neuron-slide.present .kick-target-neuron {
  animation: kick-target-in 0.6s ease-out 0.7s forwards;
}

.clusters-neuron-slide .kickzone-question {
  position: absolute;
  top: 22%;
  right: 18%;
  margin: 0;
  max-width: 32%;
  font-size: 2.2rem;
  line-height: 1.35;
  color: var(--fg);
  text-align: center;
  opacity: 0;
}

.clusters-neuron-slide .kickzone-question em {
  font-style: italic;
}

.clusters-neuron-slide.present .kickzone-question {
  animation: kick-target-in 0.6s ease-out 0.9s forwards;
}

/* ---------- Compositional dynamical primitive slide ---------- */

.primitive-slide .content-box {
  overflow: visible;
}

.primitive-slide .primitive-row {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  align-content: center;
  justify-content: center;
  column-gap: 1.2%;
  row-gap: 16px;
  padding: 0 1.5%;
}

.primitive-slide .primitive-item {
  height: 180px;
  width: auto;
  object-fit: contain;
  will-change: transform;
  backface-visibility: hidden;
}

.primitive-slide .primitive-symbol {
  font-size: 3rem;
  font-weight: 600;
  color: var(--fg);
  line-height: 1;
}

.primitive-slide .primitive-caption {
  font-size: 1.4rem;
  color: var(--fg);
  white-space: nowrap;
  letter-spacing: 0.01em;
  text-align: center;
}

.primitive-slide .primitive-caption-empty {
  visibility: hidden;
}

.primitive-slide.present .primitive-symbol {
  animation: primitive-fade-from-zero 0.55s ease-out 0.55s both;
}

.primitive-slide.present .primitive-noise {
  animation: primitive-fade-from-zero 0.55s ease-out 0.45s both;
}

.primitive-slide.present .primitive-caption:not(.primitive-caption-empty) {
  animation: primitive-fade-from-zero 0.55s ease-out 0.9s both;
}

@keyframes primitive-fade-from-zero {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Slide 18: assembly stays put, comp.svg fades in below */
.primitive-comp-slide.present .primitive-noise,
.primitive-comp-slide.present .primitive-symbol,
.primitive-comp-slide.present .primitive-caption:not(.primitive-caption-empty) {
  animation: none;
}

.primitive-comp-slide .primitive-comp-figure {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  max-height: 48%;
  height: auto;
  object-fit: contain;
  opacity: 0;
}

.primitive-comp-slide.present .primitive-comp-figure {
  animation: primitive-fade-in 0.7s ease-out 0.25s forwards;
}

@keyframes primitive-fade-in {
  to { opacity: 1; }
}

/* ---------- Take-Away slides ---------- */

.takeaway-slide .content-box {
  overflow: visible;
}

.takeaway-slide .takeaway-list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.takeaway-slide .takeaway-point {
  font-size: 2.4rem;
  line-height: 1.45;
  color: var(--fg);
  text-align: center;
  margin: 0;
  visibility: hidden;
  opacity: 0;
}

.takeaway-slide .takeaway-point strong {
  font-weight: 700;
}

.takeaway-step-1 .takeaway-p1,
.takeaway-step-2 .takeaway-p1,
.takeaway-step-2 .takeaway-p2,
.takeaway-step-3 .takeaway-p1,
.takeaway-step-3 .takeaway-p2,
.takeaway-step-3 .takeaway-p3 {
  visibility: visible;
  opacity: 1;
}

.takeaway-step-1.present .takeaway-p1,
.takeaway-step-2.present .takeaway-p2,
.takeaway-step-3.present .takeaway-p3 {
  animation: takeaway-fade-in 0.6s ease-out 0.15s both;
}

@keyframes takeaway-fade-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Closing slides: Thank You / Collaboration / Feedback ---------- */

.closing-slide .closing-row {
  position: absolute;
  top: 60px;
  right: 180px;
  bottom: 90px;
  left: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: stretch;
}

.closing-slide .closing-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 160px 14px 20px;
  visibility: hidden;
  opacity: 0;
}

.closing-slide .closing-col-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  width: 100%;
  margin-top: 110px;
}

.closing-step-1 .closing-col-1,
.closing-step-2 .closing-col-1,
.closing-step-2 .closing-col-2,
.closing-step-3 .closing-col-1,
.closing-step-3 .closing-col-2,
.closing-step-3 .closing-col-3 {
  visibility: visible;
  opacity: 1;
}

.closing-step-1.present .closing-col-1,
.closing-step-2.present .closing-col-2,
.closing-step-3.present .closing-col-3 {
  animation: takeaway-fade-in 0.6s ease-out 0.15s both;
}

.closing-slide .closing-heading {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--fg);
  margin: 40px 0 10px 0;
  text-align: center;
}

.closing-slide .closing-names {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1.9rem;
  line-height: 1.6;
  color: var(--fg);
  text-align: center;
}

.closing-slide .closing-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--fg);
  text-align: left;
  width: 100%;
  max-width: 95%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.closing-slide .closing-bullets li {
  margin: 0;
  background: var(--pill-box);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px 22px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset;
  hyphens: auto;
}

.closing-slide .closing-bullet-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}

.closing-slide .closing-bullet-label {
  font-weight: 700;
}

.closing-slide .closing-bullet-tag {
  flex: 0 0 auto;
  font-size: 0.78em;
  font-weight: 600;
  color: var(--fg);
  background: var(--pill-box);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.closing-slide .closing-remark {
  margin: 10px 0 0;
  font-size: 1.35rem;
  font-style: italic;
  color: var(--fg-soft);
  text-align: center;
}

.closing-slide .closing-fb {
  width: 82%;
  max-width: 420px;
  height: auto;
  display: block;
  object-fit: contain;
}

/* ---------- Latent states of natural behavior slide ---------- */

.calhoun-slide .content-box {
  overflow: visible;
}

.calhoun-slide .calhoun-figure {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 72%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 12px;
}

/* ---------- Clusters and feature gradients slide ---------- */

.fly-slide .content-box {
  overflow: visible;
}

.fly-slide .fly-figure {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 86%;
  max-height: 86%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 12px;
}

/* ---------- Self-induced stochastic resonance slide ---------- */

.resonance-slide .content-box {
  overflow: visible;
}

.resonance-slide .resonance-figure {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  border-radius: 12px;
}

/* ---------- Pipe (HMM training) slide ---------- */

.pipe-slide .pipe-figure {
  position: absolute;
  top: 46%;
  left: 52%;
  transform: translate(-50%, -50%);
  width: 92%;
  max-width: none;
  max-height: 90%;
  height: auto;
  display: block;
}

/* ---------- Centered question slide ---------- */

.question-slide .centered-question {
  position: absolute;
  top: 50%;
  left: 46%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: 70%;
  font-size: 3.2rem;
  line-height: 1.35;
  color: var(--fg);
  text-align: center;
}

/* ---------- Models of behavior slide ---------- */

.models-slide .models-row {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
}

.models-slide .models-fig {
  display: block;
  flex: 0 1 auto;
}

.models-slide .models-fig-a {
  width: 360px;
  height: 360px;
  object-fit: cover;
  border-radius: 2px;
}

.models-slide .models-fig-b {
  height: 520px;
  width: auto;
  max-width: 560px;
  object-fit: contain;
  border-radius: 12px;
}

.models-slide .models-fig-c {
  height: 480px;
  width: auto;
  max-width: 420px;
}

.models-slide .models-arrow {
  color: var(--fg);
  font-size: 4rem;
  line-height: 1;
  flex: 0 0 auto;
}

.models-slide .models-citations {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 28px;
  background: var(--pill-box);
  border: 1px solid var(--rule);
  border-radius: 12px;
  font-size: 1.5rem;
  color: var(--fg-soft);
  line-height: 1.3;
  text-align: center;
  min-width: 220px;
}

.content-slide .centered-figure {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  display: block;
}

.naturalistic-slide .trait-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  font-size: 2.4rem;
  color: var(--fg);
  text-align: left;
  line-height: 1.3;
  white-space: nowrap;
  justify-self: start;
}