/* Shared project-page chrome for xuanyouliu.com paper pages */

@font-face {
  font-family: "Merriweather";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../asset/fonts/merriweather-latin.woff2?v=2") format("woff2");
}

@font-face {
  font-family: "Merriweather";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../asset/fonts/merriweather-latin-italic.woff2?v=2") format("woff2");
}

:root {
  --color-bg: #fafafa;
  --color-bg-alt: #f5f5f5;
  --color-surface: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #555555;
  --color-text-light: #888888;
  --color-accent: #4e2a84;
  --color-accent-hover: #3d2069;
  --color-accent-light: #e8e0f0;
  --color-border: #e0e0e0;
  --color-border-light: #eeeeee;
  --color-on-accent: #ffffff;
  --nav-bg: rgba(250, 250, 250, 0.95);
  --font-serif: "Merriweather", Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
    "Segoe UI", sans-serif;
  --measure: 42rem;
  /* Match homepage: --max-width + section horizontal padding (space-lg) */
  --page-pad: 1.5rem;
  --hero-max: min(92vw, 1320px);
  /* Story pages cap the content column so figures stay a readable size. */
  --story-max: min(92vw, 60rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #121212;
    --color-bg-alt: #1a1a1a;
    --color-surface: #242424;
    --color-text: #e4e4e4;
    --color-text-muted: #a0a0a0;
    --color-text-light: #707070;
    --color-accent: #b39ddb;
    --color-accent-hover: #d1c4e9;
    --color-accent-light: #3d2069;
    --color-border: #333333;
    --color-border-light: #2a2a2a;
    --color-on-accent: #121212;
    --nav-bg: rgba(18, 18, 18, 0.95);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Keeps anchor targets clear of the sticky topbar. project.js measures the
     real bar height into --nav-scroll-offset; the fallback covers no-JS. */
  scroll-padding-top: var(--nav-scroll-offset, 4.5rem);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body.project-page {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  padding: 0.5rem 0.85rem;
  border-radius: 6px;
  z-index: 10000;
  font-weight: 500;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0.75rem;
  color: var(--color-on-accent);
  outline: none;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-accent);
  text-underline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  a:hover {
    color: var(--color-accent-hover);
  }
}

/* Full-bleed sticky bar (like homepage `.nav`); the inner row carries the
   content measure so the blur/border run edge-to-edge on wide screens. */
.project-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  box-sizing: border-box;
  width: 100%;
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border-light);
}

.project-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--hero-max);
  margin: 0 auto;
  padding: 0.75rem var(--page-pad);
}

/* Match the homepage `.nav-logo` weight and tracking so the sticky bar
   reads as the same chrome, not a second brand system. */
.project-brand {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -0.04em;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.3s ease;
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .project-brand:hover {
    color: var(--color-accent);
  }
}

/* Narrow screens swap the full name for the homepage "XL" mark. */
.project-brand-short {
  display: none;
}

.project-topnav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  /* Pushes section links toward the right-side controls. */
  margin-left: auto;
}

/* Present + Home + (mobile) hamburger sit as one control cluster, matching
   the homepage `.nav-controls` packing. */
.project-topbar-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* Exact copy of homepage `.nav-toggle` (styles.css) — keep in sync. */
.project-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  padding: 0.25rem;
  margin-right: -8px;
  color: var(--color-text);
}

.project-nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-text);
  transition: transform 150ms ease;
}

.project-nav-toggle.active span:first-child {
  transform: rotate(45deg) translate(5px, 5px);
}

.project-nav-toggle.active span:last-child {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Section links: same muted type + underline sweep as homepage `.nav-link`.
   nowrap + no shrink so the row never wraps; JS folds to the hamburger when
   that single line would overflow the topbar. */
.project-topnav a {
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  text-decoration: none;
}

.project-topnav a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-accent);
  transition: width 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .project-topnav a:hover {
    color: var(--color-text);
  }

  .project-topnav a:hover::after {
    width: 100%;
  }
}

/* Scroll-spy: project.js marks the section currently on screen. */
.project-topnav a.active {
  color: var(--color-accent);
  font-weight: 600;
}

.project-topnav a.active::after {
  width: 100%;
  height: 3px;
}

.project-topnav a:focus-visible,
.project-link:focus-visible,
.project-brand:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Home is the primary escape hatch back to the site — filled accent so it
   reads clearly against Present (outline) and the hamburger. */
.project-home {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.85rem;
  font-weight: 550;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease,
    transform 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .project-home:hover {
    border-color: var(--color-accent-hover);
    color: var(--color-on-accent);
    background: var(--color-accent-hover);
    transform: translateY(-1px);
  }
}

.project-home:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Match homepage `.pub-badge` metrics so venue pills feel like one system. */
.project-badge {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.65rem;
  padding: 0.3rem 0.55rem;
  border-radius: 3px;
  border: 1px solid transparent;
  background: var(--color-accent-light);
  color: var(--color-accent);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.project-authors {
  margin: 0 0 1rem;
  color: color-mix(in srgb, var(--color-text) 72%, var(--color-text-muted));
  font-size: 0.98rem;
}

.project-authors strong {
  color: var(--color-text);
  font-weight: 700;
}

.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

/* Default = tinted chip (homepage `.pub-link`); primary = filled; #anchors = subtle. */
.project-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--color-accent-light);
  color: var(--color-accent);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .project-link:hover {
    background-color: transparent;
    color: var(--color-accent);
    border-color: var(--color-accent);
    transform: translateY(-1px);
  }
}

.project-link:active {
  transform: translateY(0) scale(0.97);
}

.project-link.primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

@media (hover: hover) and (pointer: fine) {
  .project-link.primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-on-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -4px rgba(78, 42, 132, 0.5);
  }
}

.project-link.primary:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
}

/* BibTeX and other in-page anchors: ghost chip like homepage `.pub-link.subtle`. */
.project-link[href^="#"] {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

@media (hover: hover) and (pointer: fine) {
  .project-link[href^="#"]:hover {
    background: transparent;
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
}

.project-main {
  max-width: var(--hero-max);
  margin: 0 auto;
  padding: 1.5rem var(--page-pad) 3.5rem;
}

.project-section {
  padding: 2.25rem 0;
  border-top: 1px solid var(--color-border-light);
}

.project-section:first-of-type {
  border-top: none;
  padding-top: 1.25rem;
}

.project-section h2 {
  margin: 0 0 0.85rem;
  max-width: 28ch;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.project-section > p,
.project-section > ul {
  max-width: var(--measure);
}

.project-section p {
  margin: 0 0 0.95rem;
  color: var(--color-text);
}

.project-section p.lead {
  font-size: 1.05rem;
  color: var(--color-text-muted);
}

.project-section ul {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  color: var(--color-text);
}

.project-section li + li {
  margin-top: 0.35rem;
}

.project-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.75rem;
  margin: 1.1rem 0 1.35rem;
  max-width: 40rem;
}

.project-metric {
  padding: 0.85rem 0.95rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
}

.project-metric strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--color-accent);
  line-height: 1.15;
}

.project-metric span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--color-text-muted);
}

.project-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  padding: 2rem var(--page-pad) 3rem;
}

.project-footer-inner {
  max-width: var(--hero-max);
  margin: 0 auto;
}

.project-footer h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-serif);
  font-size: 1.15rem;
}

.project-bibtex-wrap {
  position: relative;
  margin: 0 0 1.25rem;
}

.project-bibtex {
  margin: 0;
  padding: 1rem 2.75rem 1rem 1.1rem;
  overflow-x: hidden;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.project-copy-bib {
  appearance: none;
  position: absolute;
  right: 0.45rem;
  bottom: 0.45rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .project-copy-bib:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-bg-alt);
  }
}

@media (hover: none), (pointer: coarse) {
  .project-copy-bib:hover {
    border-color: var(--color-border);
    color: var(--color-text-muted);
    background: var(--color-surface);
  }

  .project-copy-bib:active {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-bg-alt);
  }
}

.project-copy-bib:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.project-copy-bib svg {
  width: 14px;
  height: 14px;
}

.project-copy-bib .icon-check {
  display: none;
}

.project-copy-bib.is-copied {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.project-copy-bib.is-copied .icon-copy {
  display: none;
}

.project-copy-bib.is-copied .icon-check {
  display: block;
}

/* Story layout: teaser image first, title below (Seeing with the Hands content; site chrome) */
.project-page--story {
  background: var(--color-bg);
}

.project-page--story .project-topbar-inner {
  max-width: var(--story-max);
}

.project-titleblock {
  max-width: var(--story-max);
  margin: 0 auto;
  padding: clamp(1rem, 2.5vw, 1.65rem) var(--page-pad) 0.25rem;
  text-align: left;
}

/* Split hero: title column beside a three-image collage. */
/* align-items: stretch (the default) makes both columns exactly the row
   height, so the collage bottom lines up with the text bottom. */
/* Badge + title run full width on their own row; everything else sits beside
   the hero image below. Lifting the title out of the narrow column is what
   lets the image hold a true 1.5:1 while both columns still end flush. */
.project-titleblock--split {
  display: block;
  padding-top: clamp(1.15rem, 2.8vw, 2.15rem);
}

.project-titleblock-lead {
  margin-bottom: clamp(0.9rem, 2vw, 1.35rem);
}

.project-titleblock-row {
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  gap: 1.5rem 2rem;
  align-items: stretch;
}

/* Below ~1000px the split would cramp the text column, so the hero image is
   hidden entirely and the title block runs full width, same as on phones.
   The image is loading="lazy", so display:none also stops it being fetched. */
@media (max-width: 1000px) and (min-width: 721px) {
  .project-titleblock,
  .project-titleblock--split {
    padding-top: 1.15rem;
  }

  .project-titleblock-lead {
    margin-bottom: 1rem;
  }

  .project-titleblock-row {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .project-hero-figure {
    display: none;
  }
}

/* On narrow screens the title block stays compact text: the venue banner is
   dropped along with the hero. Banners are loading="lazy" too, so hiding them
   also skips the download. */
@media (max-width: 1000px) {
  .project-venue {
    display: none;
  }
}

/* Badge sits flush with the top of the hero image and the venue banner flush
   with its bottom, so the two columns line up on both edges. space-between
   spreads the slack across two gaps instead of pooling it above the banner. */
.project-titleblock-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}

/* Flex stretch would blow the pill out to the full column width. */
.project-titleblock--split .project-badge {
  align-self: flex-start;
}

.project-venue {
  margin: 0;
}

/* No max-width: the banner always spans the full text column, matching the
   title and author lines above it at every viewport. */
.project-venue img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Single composite hero image, always shown whole: the img keeps its
   intrinsic aspect ratio and is never cropped. align-self:start stops the
   grid from stretching the figure to the row height, so a text column taller
   than the image leaves space below the image instead of zooming into it. */
.project-hero-figure {
  margin: 0;
  align-self: start;
  /* Without min-width:0 a grid item's automatic minimum size is the image's
     intrinsic width, which inflates this column and squeezes the title column. */
  min-width: 0;
  max-width: 100%;
}

.project-hero-figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  background: var(--color-bg-alt);
}

.project-titleblock h1 {
  margin: 0 0 0.35rem;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 2.85rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--color-text);
}

.project-subtitle {
  margin: 0 0 1rem;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.35;
  color: color-mix(in srgb, var(--color-text) 78%, var(--color-text-muted));
  font-weight: 500;
}

/* The title spans the full page width here rather than a narrow column, so it
   can run much larger and still sit on one line. Must come after the base
   rules above: `.project-titleblock--split h1` has equal specificity to
   `.project-titleblock h1`, so source order decides the winner. */
.project-titleblock--split h1 {
  font-size: clamp(2.2rem, 6.4vw, 4.2rem);
  line-height: 1.05;
  margin-bottom: 0;
}

.project-titleblock--split .project-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  line-height: 1.4;
}

.project-titleblock .project-authors {
  margin-bottom: 1.15rem;
}

/* Inside the split title column, spacing comes from the flex gap alone.
   Zeroing per-element margins here keeps the rhythm even; mixed margins on
   top of the gap made some gaps twice the size of others. Must come after
   the margin rules above so it wins the source-order tie. */
.project-titleblock--split .project-titleblock-text > * {
  margin: 0;
}

.project-equal {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.82rem;
  color: var(--color-text-light);
}

.project-page--story .project-main {
  max-width: var(--story-max);
  padding-top: 0.25rem;
}

/* No measure cap here: section headings are short enough to sit on one line at
   the story column width, and wrapping them reads as an accident. */
.project-page--story .project-section h2 {
  max-width: none;
  text-wrap: balance;
  color: var(--color-text);
}

/* Body text runs the full story column width. */
.project-page--story .project-section > p,
.project-page--story .project-section > ul,
.project-page--story .project-section > .lead {
  max-width: none;
}

.project-page--story .project-section p.lead {
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--color-text);
}

.project-page--story .project-section strong {
  color: var(--color-text);
  font-weight: 650;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.project-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem 1.75rem;
  margin-top: 1.25rem;
}

/* Single full-width figure: for a wide panel (e.g. a row of matrices) that
   would be unreadably small inside a two-up grid. */
.project-figure {
  margin: 2rem 0 0;
}

.project-figure img {
  width: 100%;
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  background: var(--color-bg-alt);
}

.project-figure figcaption {
  margin-top: 0.7rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--color-border);
  font-size: 0.845rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

body.present-mode .slide-active .project-figure {
  margin-top: 0;
}

body.present-mode .slide-active .project-figure img {
  max-height: 34vh;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}

/* Same rule as the two-up figures: the caption must not outrun its picture. */
body.present-mode .slide-active .project-figure {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

body.present-mode .slide-active .project-figure > figcaption {
  width: 0;
  min-width: 100%;
}

/* Prose following a figure grid needs clear separation from the captions
   above it, which sit close to figure-caption size. */
.project-cols + p,
.project-cols + ul {
  margin-top: 2rem;
}

/* Figure-beside-text rows: the figure column runs wider than the prose column
   so the image height roughly matches the text block, and the figure centers
   vertically so any remaining difference splits evenly above and below.
   The balance is tuned for the capped content width (--story-max), which is
   constant above 1000px; below that the columns get too narrow for prose, so
   the row stacks media-over-text instead (same breakpoint as the hero). */
.project-cols--figtext {
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
}

@media (max-width: 1000px) {
  .project-cols--figtext {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* Three-up variant for sections that split into three parallel parts. Drops
   straight to one column at 900px -- three ~200px columns are harder to read
   than a stack, so it collapses earlier than the two-up default. */
.project-cols--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem 1.5rem;
}

/* Lock every panel to the same box so mixed sources (photo, collage, chart)
   read as one row of equal frames rather than three drifting aspect ratios. */
.project-cols--three .project-col > img,
.project-cols--three .project-col > video {
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

@media (max-width: 900px) {
  .project-cols--three {
    grid-template-columns: 1fr;
  }
}

.project-col {
  margin: 0;
}

.project-col img,
.project-col video {
  width: 100%;
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  background: var(--color-bg-alt);
}

/* Captions are supporting text, not body copy: smaller, quieter, and hung off
   a rule so the eye reads figure -> caption -> next figure. */
.project-col figcaption {
  margin-top: 0.7rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--color-border);
  font-size: 0.845rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* auto-fit lets the row hold however many members a page has: 4 on Seeing,
   6 on MARIO, one balanced row either way. */
.project-team {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 0.75rem;
}

/* The prose-list rule `.project-section li + li` adds 0.35rem margin-top,
   which pushed every member after the first 5.6px lower in the grid row.
   Grid gap handles spacing here. */
.project-team li + li {
  margin-top: 0;
}

.project-team a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  text-align: center;
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

@media (hover: hover) and (pointer: fine) {
  .project-team a:hover {
    color: var(--color-accent);
  }
}

.project-team img {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

.project-team strong {
  color: var(--color-text);
}

.project-reference {
  margin: 1rem 0 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.project-funding-logo {
  margin-top: 0.75rem;
}

.project-funding-logo img {
  max-width: min(20rem, 100%);
  height: auto;
}

.project-foot-note {
  margin: 0 0 1rem;
  color: var(--color-text-light);
  font-size: 0.9rem;
  line-height: 1.5;
}

.project-page--story .project-footer-inner {
  max-width: var(--story-max);
}

/* Floating back-to-top, matching the homepage control (styles.css .back-to-top) */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 44px;
  height: 44px;
  padding: 0;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 250ms ease, visibility 250ms ease, transform 250ms ease,
    background-color 250ms ease, border-color 250ms ease, color 250ms ease;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .back-to-top:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-on-accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  }
}

.back-to-top:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: 20px;
    right: 20px;
    /* Maintain WCAG 2.5.5 minimum 44x44 touch target. */
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 150ms ease, visibility 150ms ease;
    transform: none;
  }

  .back-to-top.visible,
  .back-to-top:hover {
    transform: none;
  }
}

/* ============================================
   ANIMATIONS
   Mirrors the homepage system (styles.css): the same 18px rise, 0.36s
   ease-out, and .animate-on-scroll / .is-visible contract.
   ============================================ */

@keyframes projectFadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.project-page--story .project-titleblock-lead,
.project-page--story .project-titleblock-text {
  animation: projectFadeInUp 0.8s ease-out both;
  /* Explicit end state so faded mid-animation never sticks as “washed” type. */
  opacity: 1;
}

.project-page--story .project-hero-figure {
  animation: projectFadeInUp 0.8s ease-out both;
  animation-delay: 0.12s;
  opacity: 1;
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.36s ease-out, transform 0.36s ease-out;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Columns within a section rise in sequence, like the publication list. */
.project-cols > .animate-on-scroll:nth-child(2) {
  transition-delay: 0.08s;
}

.project-team > li.animate-on-scroll:nth-child(1) { transition-delay: 0s; }
.project-team > li.animate-on-scroll:nth-child(2) { transition-delay: 0.05s; }
.project-team > li.animate-on-scroll:nth-child(3) { transition-delay: 0.09s; }
.project-team > li.animate-on-scroll:nth-child(4) { transition-delay: 0.13s; }

/* Figures lift slightly on hover, echoing the homepage cards. */
.project-col img,
.project-hero-figure img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .project-hero-figure img:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
}

@media (hover: hover) and (pointer: fine) {
  .project-col:hover img {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
}

.project-team img {
  transition: transform 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .project-team a:hover img {
    transform: scale(1.06);
    border-color: var(--color-accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-page--story .project-titleblock-lead,
  .project-page--story .project-titleblock-text,
  .project-page--story .project-hero-figure {
    animation: none;
  }

  .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }

  .project-col img,
  .project-hero-figure img,
  .project-team img {
    transition: none;
  }

  .project-col:hover img,
  .project-hero-figure img:hover,
  .project-team a:hover img {
    transform: none;
    box-shadow: none;
  }
}

@media (max-width: 720px) {
  body.project-page {
    font-size: 16px;
    --page-pad: 1.25rem;
  }

  .project-titleblock,
  .project-titleblock--split {
    padding-top: 1rem;
  }

  .project-titleblock-lead {
    margin-bottom: 0.85rem;
  }

  /* Stack overlay heroes so long paper titles are not clipped */
  .project-hero {
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .project-hero-media {
    max-height: 42vh;
    flex-shrink: 0;
  }

  .project-hero-scrim {
    position: relative;
    inset: auto;
    padding: 1.15rem var(--page-pad) 1.35rem;
    background: var(--color-bg);
  }

  .project-hero h1 {
    max-width: none;
    font-size: clamp(1.35rem, 6.2vw, 1.85rem);
  }

  .project-titleblock h1 {
    font-size: clamp(1.7rem, 7vw, 2.2rem);
  }

  .project-cols {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  /* Narrow screens drop the hero collage entirely and lead with the title.
     The images are loading="lazy", so display:none also stops them being
     fetched at all -- hiding them must not cost mobile bandwidth. */
  .project-titleblock-row {
    grid-template-columns: 1fr;
    gap: 1.15rem;
  }

  .project-titleblock-text {
    gap: 0.85rem;
  }

  .project-hero-figure {
    display: none;
  }

  .project-team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-section {
    padding: 1.45rem 0;
  }

  .project-link {
    font-size: 0.75rem;
    padding: 0.3rem 0.55rem;
  }
}

/* Compact topbar: applied when the single-line nav would overflow (JS), so
   links never wrap -- they fold into a hamburger instead. XL left, circular
   controls right, section links in a panel under the bar. */
.project-topbar.is-compact .project-topbar-inner {
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  padding: 0.65rem var(--page-pad);
}

.project-topbar.is-compact .project-brand {
  font-size: 1.5rem;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.project-topbar.is-compact .project-brand-full {
  display: none;
}

.project-topbar.is-compact .project-brand-short {
  display: inline;
}

.project-topbar.is-compact .project-topbar-controls {
  order: 2;
  margin-left: auto;
  /* Match homepage `.nav-controls` gap (`--space-sm`). */
  gap: 0.5rem;
}

.project-topbar.is-compact .project-nav-toggle {
  display: flex;
}

/* Match homepage theme/lang toggles (40px), not the 44px hamburger target. */
.project-topbar.is-compact .project-present,
.project-topbar.is-compact .project-home {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}

.project-topbar.is-compact .project-present span,
.project-topbar.is-compact .project-home span {
  display: none;
}

.project-topbar.is-compact .project-present svg,
.project-topbar.is-compact .project-home svg {
  width: 18px;
  height: 18px;
}

.project-topbar.is-compact .project-topnav {
  order: 3;
  width: 100%;
  flex-basis: 100%;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.2rem;
  margin-left: 0;
  /* Match homepage `.nav-links` mobile collapse (styles.css ~3381). */
  min-height: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 400ms ease, opacity 250ms ease, padding 250ms ease;
}

.project-topbar.is-compact .project-topnav.is-open {
  max-height: min(70vh, 22rem);
  opacity: 1;
  padding-top: 0.5rem;
  padding-bottom: 1rem;
}

.project-topbar.is-compact .project-topnav a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0.625rem 0.75rem 0.625rem 0;
  box-sizing: border-box;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
  flex-shrink: 1;
  -webkit-tap-highlight-color: transparent;
}

.project-topbar.is-compact .project-topnav a::after {
  bottom: 0.5rem;
}

.project-topbar.is-compact .project-topnav a.active::after {
  width: calc(100% - 0.75rem);
}

.project-topbar.is-compact .project-topnav a:active {
  background-color: var(--color-bg-alt);
}

body.project-nav-open {
  overflow: hidden;
}

/* ============================================
   PRESENTATION MODE
   Each hero/section becomes a full-screen slide; arrows flip, Esc exits.
   ============================================ */
.project-present {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 550;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease,
    transform 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .project-present:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-bg-alt);
    transform: translateY(-1px);
  }
}

.project-present:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

body.present-mode {
  overflow: hidden;
}

body.present-mode .project-topbar,
body.present-mode .project-footer,
body.present-mode .back-to-top,
body.present-mode .skip-link {
  display: none;
}

body.present-mode .project-titleblock,
body.present-mode .project-section {
  display: none;
}

body.present-mode .slide-active {
  display: flex;
  flex-direction: column;
  /* `safe` keeps the top reachable when a slide is taller than the screen */
  justify-content: safe center;
  gap: clamp(1.5rem, 3.5vh, 2.25rem);
  position: fixed;
  inset: 0;
  z-index: 60;
  margin: 0;
  padding: 7vh 9vw;
  overflow-y: auto;
  background: var(--color-bg);
  border: 0;
  max-width: none;
  /* Slides read from a distance: scale the whole type ramp up */
  font-size: 1.22em;
}

/* Every slide child shares one left rail and the full content width, so a
   slide never reads as two competing columns. */
body.present-mode .slide-active > * {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: auto;
}

/* Text is capped for line length while media keeps the full width. These
   selectors carry the section class so they outrank the page's own story rule
   (.project-page--story .project-section > .lead, max-width: none), which
   otherwise let headings and leads run full width while body copy sat narrow
   and centred. */
body.present-mode .project-section.slide-active > h2,
body.present-mode .project-section.slide-active > p,
body.present-mode .project-section.slide-active > ul,
body.present-mode .project-section.slide-active > .project-metrics {
  max-width: 54rem;
}

/* The title slide's own two-column grid needs the wider measure too. */
body.present-mode .project-titleblock.slide-active > * {
  max-width: 74rem;
}

/* The title slide is for the title: drop the download/BibTeX buttons. The
   venue banner stays -- it fills the text column and reads like the venue
   line on an academic title slide. */
body.present-mode .project-titleblock .project-links {
  display: none;
}

/* rem-based titleblock type ignores the deck's em scaling, so size the
   title slide explicitly: this is the one slide that must feel like a
   full-bleed title card. */
body.present-mode .project-titleblock.slide-active h1 {
  font-size: clamp(3.2rem, 6.5vw, 5.4rem);
  line-height: 1.02;
}

body.present-mode .project-titleblock.slide-active .project-subtitle {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.4;
}

body.present-mode .project-titleblock.slide-active .project-authors {
  font-size: 1.15rem;
}

body.present-mode .project-titleblock.slide-active .project-badge {
  font-size: 0.85rem;
}

/* Slide title: bigger and tighter than the in-page heading so it reads as a
   deck title, not a scroll-page subhead. */
body.present-mode .slide-active h2 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.1;
}

/* `.lead` is each page's concise framing sentence -- always the point of the
   slide, always shown, and given the deck's most prominent body type. */
body.present-mode .slide-active p.lead {
  font-size: 1.35em;
  line-height: 1.5;
  color: var(--color-text);
}

/* A second, denser prose paragraph is exactly the "read the paper for this
   part" detail -- but only once the slide already has a visual or a stat
   row to carry it (.project-cols / .project-metrics as a sibling). Where a
   section is text-only (no figure, no stat tiles -- e.g. a methodology
   summary), that second paragraph IS the slide's content, so it stays;
   cutting it there would leave a near-empty slide, which is the opposite of
   "content-rich, full layout." A paragraph immediately followed by a <ul>
   also stays, since it is that list's lead-in, not a redundant recap. */
body.present-mode
  .project-section.slide-active:has(> .project-cols, > .project-metrics)
  > p:not(.lead):not(:has(+ ul)) {
  display: none;
}

/* Bullet lists are native slide material (scannable, already terse) and
   always stay -- this also covers the team photo grid, which is itself a
   <ul>. */
body.present-mode .slide-active ul {
  margin: 0;
  padding-left: 1.3em;
}

body.present-mode .slide-active ul li {
  margin: 0 0 0.5em;
  line-height: 1.5;
}

/* Stat tiles are the other native slide material: let the numbers carry the
   slide the way they would on a results slide in a talk. */
body.present-mode .slide-active .project-metrics {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
}

body.present-mode .slide-active .project-metric {
  padding: 1.15rem 1.3rem;
}

body.present-mode .slide-active .project-metric strong {
  font-size: 2.1rem;
}

body.present-mode .slide-active .project-metric span {
  font-size: 0.95rem;
}

/* Figure captions are the only prose on a purely visual slide, so they stay
   full-length there; a wider clamp than the in-page caption keeps them
   legible from the back of a room without turning into a paragraph. */
body.present-mode .slide-active figcaption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
  font-size: 0.92em;
  line-height: 1.5;
}

/* Figures keep their aspect ratio but are height-capped, so a two-up row of
   diagrams (plus its captions, plus a trailing list on the same slide, e.g.
   MARIO's Implementation) never forces the slide to scroll. `contain` lets
   the image shrink inside that height without cropping or distorting it. */
body.present-mode .slide-active .project-cols img,
body.present-mode .slide-active .project-cols video {
  max-height: 40vh;
  width: auto;
  max-width: 100%;
  margin-inline: 0;
}

/* Single full-width figure on a slide (e.g. a results chart): same rule as the
   column figures, so its caption tracks the picture width rather than the slide. */
body.present-mode .slide-active > .project-figure {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

body.present-mode .slide-active > .project-figure > img {
  max-height: 52vh;
  width: auto;
  max-width: 100%;
}

body.present-mode .slide-active > .project-figure > figcaption {
  width: 0;
  min-width: 100%;
  font-size: 0.92em;
}

/* The height cap shrinks the image below its column width, so the figure must
   shrink with it: otherwise the caption keeps the full column width and runs
   visibly wider than the picture it describes. `width: 0` keeps the caption
   from contributing to that intrinsic width (its max-content is a single long
   line), and `min-width: 100%` then fills whatever the image resolved to. */
body.present-mode .slide-active .project-cols .project-col {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

body.present-mode .slide-active .project-cols .project-col > figcaption {
  width: 0;
  min-width: 100%;
}

/* Three-up must follow the two-up fit-content rules above: equal specificity
   would otherwise let those undo the equal-track sizing. */
body.present-mode .slide-active .project-cols--three .project-col {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

body.present-mode .slide-active .project-cols--three .project-col > img,
body.present-mode .slide-active .project-cols--three .project-col > video {
  /* Cap width from the height budget so all three stay 4:3 and the same size
     even when max-height alone would leave width:100% taller than allowed. */
  width: min(100%, calc(40vh * 4 / 3));
  max-width: 100%;
  height: auto;
  max-height: 40vh;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  margin-inline: auto;
}

body.present-mode .slide-active .project-cols--three .project-col > figcaption {
  width: auto;
  min-width: 0;
}

/* A trailing list is dense (title + lead + two figures + captions + list),
   but the diagrams are the slide's point, so keep a real height budget rather
   than shrinking them into the leftover strip under the lead. */
body.present-mode
  .project-section.slide-active:has(> .project-cols ~ ul)
  .project-cols img,
body.present-mode
  .project-section.slide-active:has(> .project-cols ~ ul)
  .project-cols video {
  max-height: 30vh;
}

body.present-mode .project-section.slide-active:has(> .project-cols ~ ul) {
  gap: clamp(0.85rem, 2vh, 1.25rem);
}

body.present-mode
  .project-section.slide-active:has(> .project-cols ~ ul)
  figcaption {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

body.present-mode
  .project-section.slide-active:has(> .project-cols ~ ul)
  ul li {
  margin-bottom: 0.3em;
}

/* Safety net for short viewports (a laptop screen used unprojected, a small
   external display): scale the whole deck down a notch so even the densest
   slide fits without scrolling, rather than tuning every section by hand
   for every possible screen height. */
@media (max-height: 760px) {
  body.present-mode .slide-active {
    padding: 4.5vh 8vw;
    gap: clamp(1rem, 2.5vh, 1.5rem);
    font-size: 1.05em;
  }

  body.present-mode .slide-active h2 {
    font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  }

  body.present-mode .slide-active p.lead {
    font-size: 1.2em;
  }

  body.present-mode .slide-active .project-cols img,
  body.present-mode .slide-active .project-cols video {
    max-height: 26vh;
  }

  body.present-mode .slide-active .project-cols--three .project-col > img,
  body.present-mode .slide-active .project-cols--three .project-col > video {
    width: min(100%, calc(26vh * 4 / 3));
    max-height: 26vh;
  }

  body.present-mode
    .project-section.slide-active:has(> .project-cols ~ ul)
    .project-cols img,
  body.present-mode
    .project-section.slide-active:has(> .project-cols ~ ul)
    .project-cols video {
    max-height: 22vh;
  }

  body.present-mode .slide-active .present-only img {
    max-height: 30vh;
  }

  body.present-mode .slide-active .present-duo img {
    max-height: 24vh;
  }

  body.present-mode .slide-active .project-team {
    gap: 1.1rem;
  }

  body.present-mode .slide-active .project-team img {
    width: 5.5rem;
    height: 5.5rem;
  }

  body.present-mode .slide-active .present-closing {
    margin-top: 0.75rem;
    padding-top: 1rem;
    font-size: 0.95em;
  }

  body.present-mode .project-titleblock.slide-active h1 {
    font-size: clamp(2.4rem, 5vw, 3.4rem);
  }

  body.present-mode .project-titleblock.slide-active .project-subtitle {
    font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  }

  body.present-mode .project-titleblock.slide-active .project-venue img {
    max-height: 13vh;
    width: auto;
  }
}

/* Team photos: full slide, so let the grid breathe and the faces read from
   a distance. */
body.present-mode .slide-active .project-team {
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1.75rem;
  max-width: 64rem;
  margin-left: 0;
}

body.present-mode .slide-active .project-team img {
  width: 7rem;
  height: 7rem;
}

body.present-mode .slide-active .project-team a {
  gap: 0.8rem;
  font-size: 1.05em;
}

/* Numbered contributions: the "what we claim" slide element. Sized between
   the lead sentence and body text so it reads as the slide's substance. */
body.present-mode .slide-active .present-contrib {
  margin: 0;
  padding-left: 1.4em;
  max-width: 54rem;
  font-size: 1.02em;
}

body.present-mode .slide-active .present-contrib li {
  margin-bottom: 0.55em;
  line-height: 1.5;
  color: var(--color-text-muted);
}

body.present-mode .slide-active .present-contrib li::marker {
  color: var(--color-accent);
  font-weight: 650;
}

body.present-mode .slide-active .present-contrib strong {
  color: var(--color-text);
}

/* Closing line under the team: full paper title, venue, and the site, so the
   deck ends like a talk's thank-you slide instead of trailing off. */
body.present-mode .slide-active .present-closing {
  margin-top: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border-light);
  color: var(--color-text-muted);
  font-size: 1.05em;
  line-height: 1.6;
}

body.present-mode .slide-active .present-closing strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.15em;
  color: var(--color-text);
  margin-bottom: 0.35rem;
}

/* Deck-only content: hidden while reading the page, shown on its slide.
   The inverse, .present-hide, drops page prose that would repeat what a
   later slide (or the presenter) already covers. */
.present-only {
  display: none;
}

body.present-mode .slide-active .present-only {
  display: block;
}

body.present-mode .slide-active .present-hide {
  display: none;
}

body.present-mode .slide-active figure.present-only {
  margin: 0;
}

body.present-mode .slide-active .present-only img {
  max-height: 38vh;
  width: auto;
  max-width: 100%;
  margin: 0;
  border: 1px solid var(--color-border-light);
  border-radius: 4px;
}

/* Overview slide: the framing sentence runs full width, then the bullets sit
   beside the visual. Grid placement does this without a wrapper element, so
   the reading page keeps its plain top-to-bottom flow. */
body.present-mode .project-section.slide-active:has(> .present-contrib) {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  column-gap: clamp(2rem, 4vw, 3.5rem);
  row-gap: clamp(1rem, 2.5vh, 1.75rem);
  align-content: center;
}

body.present-mode .slide-active:has(> .present-contrib) > p {
  grid-column: 1 / -1;
}

/* Bullets stretch to the row height and spread, so the text column ends level
   with the image instead of the image being shrunk down to the text. */
/* Bullets fill the row height so the column ends level with the image, but
   they stay a single centred group: space-between would tear the three items
   apart with big gaps and break the list into three floating blocks. */
body.present-mode .slide-active:has(> .present-contrib) > .present-contrib {
  grid-column: 1;
  align-self: stretch;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.6rem, 1.8vh, 1.35rem);
}

body.present-mode .slide-active:has(> .present-contrib) > .present-contrib > li {
  margin-bottom: 0;
}

body.present-mode
  .slide-active:has(> .present-contrib)
  > .present-only:not(.present-contrib) {
  grid-column: 2;
  align-self: center;
  max-width: none;
  min-width: 0;
}

/* :not(.present-duo) keeps this off the stacked pair below, whose own rule is
   less specific and would otherwise lose to it. */
body.present-mode
  .project-section.slide-active:has(> .present-contrib)
  .present-only:not(.present-contrib):not(.present-duo) img {
  max-height: 46vh;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Two deck images stack inside the media column instead of splitting it. */
body.present-mode .slide-active:has(> .present-contrib) .present-duo {
  flex-direction: column;
  gap: 0.8rem;
}

body.present-mode .slide-active:has(> .present-contrib) .present-duo img {
  max-height: 22vh;
  width: 100%;
}

/* A deck-only pair sits side by side, height-matched, each keeping its own
   aspect ratio -- layout adapts to the images, never the other way round. */
body.present-mode .slide-active .present-duo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1.25rem;
}

body.present-mode .slide-active .present-duo img {
  max-height: 32vh;
  margin: 0;
  min-width: 0;
  flex: 0 1 auto;
}

body.present-mode .present-controls,
body.present-mode .present-counter {
  display: flex;
}

.present-controls {
  display: none;
  position: fixed;
  left: 1.25rem;
  bottom: 1.1rem;
  z-index: 70;
  gap: 0.5rem;
}

.present-controls button {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .present-controls button:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .present-controls button:disabled:hover {
    border-color: var(--color-border);
    color: var(--color-text);
  }
}

@media (hover: none), (pointer: coarse) {
  .present-controls button:hover {
    border-color: var(--color-border);
    color: var(--color-text);
  }

  .present-controls button:active:not(:disabled) {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
}

.present-controls button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.present-controls button:disabled {
  opacity: 0.35;
  cursor: default;
}

.present-counter {
  display: none;
  position: fixed;
  right: 1.25rem;
  bottom: 1.35rem;
  z-index: 70;
  font-size: 0.85rem;
  color: var(--color-text-light);
  font-variant-numeric: tabular-nums;
}

/* ============================================
   DEDICATED RESEARCH DECKS
   A project can provide a purpose-built deck with [data-present-deck].
   The reading page remains untouched; project.js selects these slides only
   while presenting. EITWatch is the first dedicated deck.
   ============================================ */
.present-deck,
.present-slide {
  display: none;
}

.present-deck[hidden] {
  display: none !important;
}

.present-speaker-notes {
  display: none !important;
}

body.present-mode .present-deck {
  display: contents;
}

.present-deck--eitwatch {
  --deck-bg: #0d0f14;
  --deck-surface: #151821;
  --deck-surface-raised: #1b1f2a;
  --deck-border: #303643;
  --deck-text: #f4f2f7;
  --deck-muted: #b9b7c0;
  --deck-dim: #817e89;
  --deck-accent: #bca2eb;
  --deck-accent-strong: #8a63ce;
  --deck-accent-soft: rgba(188, 162, 235, 0.13);
  --deck-green: #83d6b2;
  --deck-amber: #e4bd75;
  color-scheme: dark;
}

body.present-mode.present-theme-light .present-deck--eitwatch {
  --deck-bg: #f7f5fa;
  --deck-surface: #ffffff;
  --deck-surface-raised: #f0ebf7;
  --deck-border: #cbc4d5;
  --deck-text: #17131c;
  --deck-muted: #4d4755;
  --deck-dim: #6c6574;
  --deck-accent: #5d348e;
  --deck-accent-strong: #4e2a84;
  --deck-accent-soft: rgba(78, 42, 132, 0.1);
  --deck-green: #176b4f;
  --deck-amber: #845b13;
  color-scheme: light;
}

body.project-page--eitwatch.present-mode {
  background: var(--deck-bg, #0d0f14);
}

body.project-page--eitwatch.present-mode.present-theme-light {
  background: #f7f5fa;
}

body.present-mode .present-deck--eitwatch .present-slide.slide-active {
  display: flex;
  justify-content: safe center;
  gap: clamp(1.15rem, 2.5vh, 2rem);
  padding: clamp(2.8rem, 6vh, 5rem) clamp(3.5rem, 7vw, 7.5rem)
    clamp(4.75rem, 8vh, 6rem);
  background:
    radial-gradient(circle at 92% 3%, rgba(138, 99, 206, 0.11), transparent 24rem),
    var(--deck-bg);
  color: var(--deck-text);
  font-size: clamp(1.1rem, 1.45vw, 1.42rem);
  line-height: 1.45;
}

body.present-mode .present-deck--eitwatch .present-slide.slide-active::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: min(24rem, 38vw);
  height: 3px;
  background: linear-gradient(90deg, var(--deck-accent-strong), var(--deck-accent), transparent);
}

body.present-mode .present-deck--eitwatch .present-slide.slide-active::after {
  content: attr(data-slide-number);
  position: fixed;
  top: clamp(1.25rem, 3vh, 2rem);
  right: clamp(1.5rem, 3vw, 3rem);
  color: var(--deck-dim);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.16em;
}

body.present-mode .present-deck--eitwatch .present-slide.slide-active > * {
  position: relative;
  z-index: 1;
}

.present-deck--eitwatch .present-eyebrow {
  margin: 0;
  color: var(--deck-accent);
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  font-weight: 750;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.present-deck--eitwatch .present-slide-heading {
  display: grid;
  gap: 0.7rem;
  max-width: 76rem;
}

body.present-mode .present-deck--eitwatch .present-slide-heading h2,
body.present-mode .present-deck--eitwatch .present-slide h2 {
  max-width: 21ch;
  margin: 0;
  color: var(--deck-text);
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 4.3vw, 4.3rem);
  font-weight: 750;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

body.present-mode
  .present-deck--eitwatch
  .present-slide--principle
  .present-slide-heading
  h2 {
  max-width: 28ch;
}

body.present-mode
  .present-deck--eitwatch
  .present-slide--adaptation
  .present-slide-heading {
  max-width: 88rem;
}

body.present-mode
  .present-deck--eitwatch
  .present-slide--adaptation
  .present-slide-heading
  h2 {
  max-width: none;
  text-wrap: pretty;
}

body.present-mode .present-deck--eitwatch .present-slide--depth .present-slide-heading,
body.present-mode
  .present-deck--eitwatch
  .present-slide--depth
  .present-slide-heading
  h2 {
  max-width: none;
}

body.present-mode .present-deck--eitwatch .present-slide--depth.slide-active {
  gap: 1rem;
  padding-top: 2.75rem;
  padding-bottom: 4rem;
}

body.present-mode .present-deck--eitwatch .present-slide-heading .present-slide-lead,
body.present-mode .present-deck--eitwatch .present-slide .present-slide-lead {
  max-width: 58rem;
  margin: 0;
  color: var(--deck-muted);
  font-size: clamp(1.15rem, 1.8vw, 1.7rem);
  line-height: 1.48;
  text-wrap: pretty;
}

.present-deck--eitwatch strong {
  color: var(--deck-text);
}

.present-slide-footnote {
  margin: 0;
  color: var(--deck-muted);
  font-size: clamp(0.95rem, 1.2vw, 1.18rem);
  line-height: 1.45;
}

/* Progressive content */
body.present-mode .slide-active [data-present-step] {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

body.present-mode .slide-active [data-present-step].is-present-step-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
  body.present-mode .present-deck--eitwatch .present-slide.slide-active {
    animation: present-slide-fade 260ms ease-out both;
  }

  body.present-mode .present-deck--eitwatch .slide-active [data-present-step] {
    transition: opacity 320ms ease-out, transform 320ms ease-out;
  }

  body.present-mode .present-deck--eitwatch .slide-active [data-present-step]:not(g) {
    transform: translateY(0.6rem);
  }

  body.present-mode
    .present-deck--eitwatch
    .slide-active
    [data-present-step].is-present-step-visible:not(g) {
    transform: translateY(0);
  }

  @keyframes present-slide-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* Title */
.present-title-layout {
  display: grid;
  grid-template-columns: minmax(24rem, 0.82fr) minmax(30rem, 1.18fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  min-height: min(68vh, 43rem);
}

.present-title-copy {
  display: grid;
  align-content: center;
  gap: clamp(1rem, 2.4vh, 1.8rem);
}

body.present-mode .present-deck--eitwatch .present-title-copy h1 {
  margin: 0;
  color: var(--deck-text);
  font-family: var(--font-serif);
  font-size: clamp(4.7rem, 8.1vw, 8.6rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.065em;
}

.present-deck-hook {
  max-width: 18ch;
  margin: 0;
  color: var(--deck-text);
  font-size: clamp(1.65rem, 3vw, 3rem);
  font-weight: 620;
  line-height: 1.18;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.present-deck-subtitle {
  max-width: 35rem;
  margin: 0;
  color: var(--deck-muted);
  font-size: clamp(1.08rem, 1.5vw, 1.4rem);
  line-height: 1.45;
}

.present-deck-authors {
  margin: 0;
  color: var(--deck-muted);
  font-size: clamp(1rem, 1.4vw, 1.28rem);
}

.present-deck-authors span {
  display: block;
  margin-top: 0.35rem;
  color: var(--deck-dim);
  font-size: 0.9em;
}

.present-title-visual {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--deck-border);
  border-radius: 18px;
  background: var(--deck-surface);
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.28);
}

.present-title-visual img {
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  background: #efefef;
}

.present-title-visual figcaption {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  padding: 0.48rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(10, 11, 15, 0.78);
  color: #f7f7f8;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  line-height: 1.2;
  backdrop-filter: blur(8px);
}

/* EIT principle */
.present-eit-principle-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(20rem, 0.6fr);
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.6rem);
  min-height: 0;
}

.present-eit-source-figure {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  min-width: 0;
  margin: 0;
}

.present-eit-source-figure img {
  width: 100%;
  max-height: 47vh;
  border: 1px solid var(--deck-border);
  border-radius: 16px;
  background: #f5f5f3;
  object-fit: contain;
  box-shadow: 0 1.25rem 4rem rgba(0, 0, 0, 0.32);
}

.present-eit-source-figure figcaption {
  color: var(--deck-muted);
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  text-align: center;
}

.present-eit-steps {
  display: grid;
  gap: 0.75rem;
}

.present-eit-steps article {
  padding: clamp(0.8rem, 1.4vw, 1.1rem);
  border: 1px solid var(--deck-border);
  border-radius: 13px;
  background: var(--deck-surface);
}

.present-eit-steps article > span {
  color: var(--deck-accent);
  font-size: 0.84em;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.present-eit-steps h3 {
  margin: 0.3rem 0 0;
  color: var(--deck-text);
  font-size: clamp(1.12rem, 1.5vw, 1.42rem);
  line-height: 1.25;
}

.present-eit-steps p {
  margin: 0.3rem 0 0;
  color: var(--deck-muted);
  font-size: 0.84em;
  line-height: 1.38;
}

.present-prototype-video figcaption,
.present-gesture-figure figcaption {
  color: var(--deck-muted);
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  text-align: center;
}

/* Form-factor comparison */
.present-comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  min-height: 0;
}

.present-comparison-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 0.7rem;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: clamp(0.85rem, 1.4vw, 1.25rem);
  border: 1px solid var(--deck-border);
  border-radius: 16px;
  background: var(--deck-surface);
}

.present-comparison-card--accent {
  border-color: color-mix(in srgb, var(--deck-accent) 55%, var(--deck-border));
  background: linear-gradient(145deg, var(--deck-accent-soft), var(--deck-surface) 62%);
}

.present-card-label {
  color: var(--deck-accent);
  font-size: 0.82em;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.present-comparison-card img {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 10px;
  object-fit: cover;
}

.present-comparison-card h3 {
  margin: 0;
  color: var(--deck-text);
  font-size: clamp(1.15rem, 1.8vw, 1.65rem);
  line-height: 1.2;
}

.present-comparison-card p {
  margin: 0;
  color: var(--deck-muted);
  font-size: 0.96em;
  line-height: 1.42;
}

.present-comparison-arrow {
  display: grid;
  place-items: center;
  width: clamp(2.4rem, 4vw, 3.6rem);
  height: clamp(2.4rem, 4vw, 3.6rem);
  border: 1px solid var(--deck-border);
  border-radius: 50%;
  color: var(--deck-accent);
  font-size: clamp(1.3rem, 2vw, 2rem);
}

/* Multi-depth diagram */
.present-depth-diagram {
  display: block;
  flex: 0 0 auto;
  align-self: center;
  width: 100%;
  max-width: min(74rem, calc(43vh * 1120 / 390));
  height: auto;
  max-height: none;
  margin-inline: auto;
}

.present-depth-panel {
  fill: var(--deck-surface);
  stroke: var(--deck-border);
  stroke-width: 1.5;
}

.present-depth-panel--accent {
  fill: var(--deck-surface-raised);
  stroke: #7251aa;
}

.present-svg-kicker {
  fill: var(--deck-accent);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 750;
  letter-spacing: 1.8px;
}

.present-svg-title {
  fill: var(--deck-text);
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 650;
}

.present-skin-line {
  stroke: #d7c9e8;
  stroke-width: 3;
}

.present-electrode {
  fill: #cfc8d8;
  stroke: #f4f2f7;
  stroke-width: 2;
}

.present-electrode--source {
  fill: var(--deck-accent-strong);
  stroke: var(--deck-accent);
}

.present-electrode-sign {
  fill: #171923;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 900;
  pointer-events: none;
}

.present-electrode-sign--source {
  fill: #fff;
}

.present-current-path {
  fill: none;
  stroke: #8c73ba;
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.72;
}

.present-current-path--strong {
  stroke: url(#present-depth-gradient);
  stroke-width: 7;
  opacity: 1;
}

.present-depth-arrow {
  fill: none;
  stroke: var(--deck-accent);
  stroke-width: 2;
}

.present-svg-label {
  fill: var(--deck-accent);
  font-family: var(--font-sans);
  font-size: 21px;
  font-weight: 700;
}

.present-svg-note {
  fill: var(--deck-muted);
  font-family: var(--font-sans);
  font-size: 19px;
}

/* Prototype */
.present-prototype-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 0.8fr);
  align-items: stretch;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  min-height: 0;
}

.present-prototype-video {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.65rem;
  min-width: 0;
  margin: 0;
}

.present-video-stage {
  position: relative;
  width: min(100%, calc(46vh * 16 / 9));
  aspect-ratio: 16 / 9;
}

.present-prototype-video video {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  border: 1px solid var(--deck-border);
  border-radius: 14px;
  background: #08090c;
}

.present-video-toggle {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(9, 10, 14, 0.82);
  color: #fff;
  font: 700 1.05rem/1 var(--font-sans);
  letter-spacing: 0.02em;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.present-video-toggle:hover {
  border-color: var(--deck-accent);
  background: rgba(19, 17, 27, 0.94);
}

.present-video-toggle:focus-visible {
  outline: 3px solid var(--deck-accent);
  outline-offset: 3px;
}

.present-video-toggle [data-present-video-icon] {
  min-width: 0.85rem;
  color: var(--deck-accent);
  font-size: 0.92rem;
  text-align: center;
}

.present-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.present-spec {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 7.5rem;
  padding: clamp(0.85rem, 1.5vw, 1.25rem);
  border: 1px solid var(--deck-border);
  border-radius: 14px;
  background: var(--deck-surface);
}

.present-spec strong {
  color: var(--deck-accent);
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.5vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.present-spec span {
  margin-top: 0.4rem;
  color: var(--deck-muted);
  font-size: 0.88em;
  line-height: 1.35;
}

.present-caveat-strip,
.present-honesty-line,
.present-resource-line {
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--deck-amber);
  border-radius: 0 8px 8px 0;
  background: rgba(228, 189, 117, 0.08);
  color: var(--deck-muted);
  font-size: clamp(0.78rem, 1vw, 0.95rem);
}

/* Evaluation */
.present-evaluation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(22rem, 0.65fr);
  align-items: center;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  min-height: 0;
}

.present-gesture-figure {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  min-width: 0;
  margin: 0;
}

.present-gesture-figure img {
  width: 100%;
  max-height: 46vh;
  border: 1px solid var(--deck-border);
  border-radius: 14px;
  background: #f5f5f3;
  object-fit: contain;
}

body.present-mode .present-deck--eitwatch .present-slide--results .present-slide-heading {
  max-width: none;
}

body.present-mode .present-deck--eitwatch .present-slide--results .present-slide-heading h2 {
  max-width: none;
  font-size: clamp(2.7rem, 4.8vw, 5rem);
}

.present-evaluation-merged {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(22rem, 1.14fr);
  align-items: stretch;
  gap: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--deck-border);
  border-radius: 18px;
  background: var(--deck-surface);
  transition: border-color 320ms ease-out, background-color 320ms ease-out;
}

body.present-mode
  .present-deck--eitwatch
  .present-evaluation-merged:not(:has(.is-present-step-visible)) {
  border-color: transparent;
  background: transparent;
}

.present-gesture-figure--compact {
  order: 1;
  align-content: center;
  gap: 0;
  padding: 0;
  border-right: 1px solid var(--deck-border);
  background: transparent;
}

.present-gesture-figure--compact img {
  width: 100%;
  height: auto;
  max-height: none;
  border: 0;
  border-radius: 0;
  object-fit: initial;
}

.present-primary-result {
  order: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.45rem;
  min-width: 0;
  padding: clamp(1rem, 2.2vw, 1.8rem);
  background:
    radial-gradient(circle at 20% 30%, rgba(138, 99, 206, 0.18), transparent 18rem),
    linear-gradient(145deg, var(--deck-accent-soft), transparent 68%);
}

.present-primary-result h3 {
  margin: 0;
  color: var(--deck-text);
  font-size: clamp(1.2rem, 1.8vw, 1.65rem);
}

.present-primary-result > p {
  margin: 0;
  color: var(--deck-muted);
  font-size: 0.9em;
}

.present-primary-result dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin: 0.45rem 0;
}

.present-primary-result dl > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.25rem;
  padding: 0.45rem 0;
}

.present-primary-result dl > div + div {
  padding-left: 1rem;
  border-left: 1px solid var(--deck-border);
}

.present-primary-result dt {
  color: var(--deck-muted);
  font-size: 0.82em;
  font-weight: 700;
}

.present-primary-result dd {
  margin: 0;
  color: var(--deck-accent);
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.4vw, 4.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.present-primary-result small {
  color: var(--deck-muted);
  font-size: 0.84em;
  line-height: 1.35;
}

.present-ml-pipeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--deck-border);
  border-radius: 13px;
  background: var(--deck-surface);
}

.present-ml-pipeline article {
  position: relative;
  display: grid;
  align-content: center;
  gap: 0.2rem;
  min-width: 0;
  min-height: 4.25rem;
  padding: 0.55rem 1rem;
  background: transparent;
}

.present-ml-pipeline article + article {
  border-left: 1px solid var(--deck-border);
}

.present-ml-pipeline article:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid var(--deck-border);
  border-radius: 50%;
  background: var(--deck-bg);
  color: var(--deck-accent);
  font-size: 0.78rem;
  font-weight: 800;
  transform: translate(50%, -50%);
}

.present-ml-pipeline article > span {
  color: var(--deck-accent);
  font-size: 0.82em;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.present-ml-pipeline article > strong {
  overflow-wrap: anywhere;
  color: var(--deck-text);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
}

.present-ml-pipeline article > small {
  color: var(--deck-muted);
  font-size: 0.84em;
  line-height: 1.3;
}

.present-generalization-strip {
  display: grid;
  grid-template-columns: minmax(14rem, 1.2fr) repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--deck-border);
  border-radius: 12px;
  background: var(--deck-surface);
}

.present-generalization-strip > div {
  display: grid;
  align-content: center;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.58rem 0.85rem;
}

.present-generalization-strip > div + div {
  border-left: 1px solid var(--deck-border);
}

.present-generalization-strip span {
  color: var(--deck-muted);
  font-size: 0.84em;
}

.present-generalization-strip strong {
  color: var(--deck-text);
  font-size: 1em;
}

.present-generalization-strip > div:first-child strong {
  color: var(--deck-accent);
}

.present-study-rail {
  display: grid;
  gap: 0.75rem;
}

.present-study-rail article {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--deck-border);
  border-radius: 12px;
  background: var(--deck-surface);
}

.present-study-rail article > span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--deck-accent-soft);
  color: var(--deck-accent);
  font-size: 0.68em;
  font-weight: 750;
}

.present-study-rail h3 {
  margin: 0;
  color: var(--deck-text);
  font-size: clamp(1rem, 1.3vw, 1.22rem);
  line-height: 1.25;
}

.present-study-rail p {
  margin: 0.25rem 0 0;
  color: var(--deck-muted);
  font-size: 0.82em;
  line-height: 1.35;
}

.present-study-meta,
.present-result-context {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.2rem;
  margin: 0;
  color: var(--deck-dim);
  font-size: clamp(0.72rem, 0.95vw, 0.9rem);
}

/* Protocol ablation */
.present-ablation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.28fr);
  align-items: stretch;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  min-height: 0;
}

.present-bar-groups {
  display: grid;
  gap: 0.9rem;
}

.present-bar-group {
  padding: clamp(0.85rem, 1.4vw, 1.2rem);
  border: 1px solid var(--deck-border);
  border-radius: 14px;
  background: var(--deck-surface);
}

.present-bar-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.65rem;
}

.present-bar-title h3 {
  margin: 0;
  color: var(--deck-text);
  font-size: clamp(1rem, 1.35vw, 1.28rem);
}

.present-bar-title > strong {
  color: var(--deck-green);
  font-size: clamp(1.1rem, 1.7vw, 1.55rem);
}

.present-bar-row {
  display: grid;
  grid-template-columns: minmax(8.5rem, 10rem) minmax(10rem, 1fr) 4.4rem;
  align-items: center;
  gap: 0.8rem;
  min-height: 2.15rem;
  color: var(--deck-muted);
  font-size: 0.78em;
}

.present-bar-row b {
  color: var(--deck-text);
  font-size: 1.08em;
  text-align: right;
}

.present-bar-track {
  height: 0.72rem;
  overflow: hidden;
  border-radius: 999px;
  background: #292d38;
}

.present-bar-track i {
  display: block;
  width: var(--bar-value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--deck-accent-strong), var(--deck-accent));
}

.present-bar-row--baseline .present-bar-track i {
  background: #626875;
}

.present-participant-callout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1rem, 2vw, 1.7rem);
  border: 1px solid color-mix(in srgb, var(--deck-green) 48%, var(--deck-border));
  border-radius: 16px;
  background: rgba(131, 214, 178, 0.08);
}

.present-participant-callout strong {
  color: var(--deck-green);
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.present-participant-callout span {
  margin-top: 0.7rem;
  color: var(--deck-muted);
  line-height: 1.35;
}

/* Transfer results */
.present-transfer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.85rem, 2vw, 1.5rem);
}

.present-transfer-card {
  display: grid;
  gap: 0.8rem;
  padding: clamp(1rem, 1.8vw, 1.5rem);
  border: 1px solid var(--deck-border);
  border-radius: 16px;
  background: var(--deck-surface);
}

.present-transfer-card--strong {
  border-color: color-mix(in srgb, var(--deck-accent) 52%, var(--deck-border));
  background: linear-gradient(145deg, var(--deck-accent-soft), var(--deck-surface) 60%);
}

.present-transfer-card h3 {
  margin: 0;
  color: var(--deck-text);
  font-size: clamp(1.15rem, 1.8vw, 1.65rem);
}

.present-transfer-card dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin: 0;
}

.present-transfer-card dl > div {
  padding: 0.72rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.present-transfer-card dt {
  color: var(--deck-dim);
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.present-transfer-card dd {
  margin: 0.2rem 0 0;
  color: var(--deck-text);
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 2.8vw, 2.7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
}

.present-transfer-card > p {
  margin: 0;
  color: var(--deck-muted);
  font-size: 0.78em;
}

.present-result-context span {
  padding: 0.38rem 0.58rem;
  border: 1px solid var(--deck-border);
  border-radius: 999px;
  background: var(--deck-surface);
}

/* Open questions */
.present-open-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.8rem);
}

.present-open-grid article {
  display: grid;
  align-content: start;
  gap: 0.8rem;
  min-height: clamp(14rem, 31vh, 19rem);
  padding: clamp(1.25rem, 2.2vw, 2rem);
  border: 1px solid var(--deck-border);
  border-top: 3px solid var(--deck-accent-strong);
  border-radius: 16px;
  background:
    linear-gradient(155deg, var(--deck-accent-soft), transparent 58%),
    var(--deck-surface);
}

.present-open-grid article > span {
  color: var(--deck-accent);
  font-size: 0.84em;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.present-open-grid h3 {
  max-width: 16ch;
  margin: auto 0 0;
  color: var(--deck-text);
  font-size: clamp(1.45rem, 2.2vw, 2.15rem);
  line-height: 1.12;
  text-wrap: balance;
}

.present-open-grid p {
  margin: 0;
  color: var(--deck-muted);
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  line-height: 1.45;
}

/* Boundaries */
.present-boundary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.present-boundary-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: clamp(1.15rem, 2vw, 1.75rem);
  border: 1px solid var(--deck-border);
  border-radius: 16px;
  background: var(--deck-surface);
}

.present-boundary-card > span {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  font-weight: 800;
}

.present-boundary-card--yes > span {
  background: rgba(131, 214, 178, 0.12);
  color: var(--deck-green);
}

.present-boundary-card--open > span {
  background: var(--deck-accent-soft);
  color: var(--deck-accent);
}

.present-boundary-card h3 {
  margin: 0 0 0.65rem;
  color: var(--deck-text);
  font-size: clamp(1.2rem, 1.8vw, 1.65rem);
}

body.present-mode .present-deck--eitwatch .present-boundary-card ul {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding-left: 1.05rem;
  color: var(--deck-muted);
  font-size: 0.92em;
}

body.present-mode .present-deck--eitwatch .present-boundary-card li {
  margin: 0;
  line-height: 1.4;
}

.present-honesty-line {
  border-left-color: var(--deck-accent);
  background: var(--deck-accent-soft);
  font-size: clamp(0.9rem, 1.25vw, 1.12rem);
}

/* Closing */
body.present-mode .present-deck--eitwatch .present-slide--closing.slide-active {
  align-items: flex-start;
  background:
    radial-gradient(circle at 75% 30%, rgba(138, 99, 206, 0.2), transparent 32rem),
    var(--deck-bg);
}

body.present-mode .present-deck--eitwatch .present-slide--closing h2 {
  max-width: 15ch;
  font-size: clamp(3.2rem, 7.2vw, 7rem);
  line-height: 0.98;
}

.present-closing-statement {
  max-width: 52rem;
  margin: 0;
  color: var(--deck-muted);
  font-size: clamp(1.15rem, 1.8vw, 1.65rem);
  line-height: 1.5;
}

.present-closing-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  max-width: 62rem;
}

.present-closing-points > div {
  display: grid;
  gap: 0.3rem;
  padding: 0.85rem 1rem;
  border-top: 2px solid var(--deck-accent-strong);
  background: var(--deck-surface);
}

.present-closing-points strong {
  color: var(--deck-accent);
  font-size: 0.88em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.present-closing-points span {
  color: var(--deck-muted);
  font-size: 0.94em;
}

.present-discussion-question {
  max-width: 47rem;
  margin: 0;
  color: var(--deck-text);
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-style: italic;
  line-height: 1.4;
}

.present-closing-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  max-width: 72rem;
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid var(--deck-border);
  color: var(--deck-dim);
  font-size: 0.84em;
}

/* Backup slides */
.present-backup-grid,
.present-latency-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.present-backup-grid article,
.present-latency-grid article {
  padding: clamp(0.9rem, 1.5vw, 1.25rem);
  border: 1px solid var(--deck-border);
  border-radius: 14px;
  background: var(--deck-surface);
}

.present-backup-grid article > span,
.present-latency-grid article > span {
  color: var(--deck-accent);
  font-size: 0.82em;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.present-backup-grid article > strong,
.present-latency-grid article > strong {
  display: block;
  margin-top: 0.45rem;
  color: var(--deck-text);
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  line-height: 1.15;
}

.present-backup-grid article > p,
.present-latency-grid article > p {
  margin: 0.45rem 0 0;
  color: var(--deck-muted);
  font-size: 0.9em;
  line-height: 1.4;
}

.present-latency-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.present-latency-grid-wide {
  grid-column: span 2;
}

.present-resource-line {
  border-left-color: var(--deck-accent);
  background: var(--deck-accent-soft);
}

/* ============================================
   PRESENTER HUD, REHEARSAL NOTES, AND NAVIGATION
   ============================================ */
body.present-mode .present-progress {
  display: block;
}

.present-progress {
  display: none;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 82;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.present-progress > span {
  display: block;
  width: var(--present-progress, 0%);
  height: 100%;
  background: linear-gradient(90deg, #7547b8, #bca2eb);
  transition: width 180ms ease-out;
}

body.present-mode .present-controls,
body.present-mode .present-counter {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(12, 14, 19, 0.78);
  color: #f4f2f7;
  box-shadow: 0 0.45rem 1.5rem rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
}

body.present-mode .present-controls {
  bottom: 1rem;
  left: 1rem;
  gap: 0.15rem;
  padding: 0.22rem;
}

body.present-mode .present-controls button {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  background: transparent;
  color: #f4f2f7;
}

body.present-mode .present-controls .present-theme-toggle,
body.present-mode .present-controls .present-fullscreen-toggle {
  width: auto;
  min-width: 3.5rem;
  padding-inline: 0.65rem;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}

body.present-mode .present-controls button[hidden] {
  display: none !important;
}

body.present-mode .present-controls button:hover {
  border: 0;
  background: rgba(188, 162, 235, 0.15);
  color: #d5c2f7;
}

body.present-mode .present-controls button:disabled {
  color: #716e78;
}

body.present-mode .present-counter {
  right: 1rem;
  bottom: 1rem;
  gap: 0.65rem;
  min-height: 2.65rem;
  padding: 0.42rem 0.85rem;
  font-size: 0.72rem;
}

body.present-mode.present-theme-light .present-controls,
body.present-mode.present-theme-light .present-counter {
  border-color: rgba(58, 42, 75, 0.2);
  background: rgba(255, 255, 255, 0.88);
  color: #17131c;
  box-shadow: 0 0.45rem 1.5rem rgba(45, 35, 55, 0.12);
}

body.present-mode.present-theme-light .present-controls button {
  color: #2d2535;
}

body.present-mode.present-theme-light .present-controls button:hover {
  background: rgba(78, 42, 132, 0.1);
  color: #4e2a84;
}

body.present-mode.present-theme-light .present-counter-title,
body.present-mode.present-theme-light .present-timer {
  color: #615a69;
}

body.present-mode.present-theme-light .present-counter-index {
  color: #4e2a84;
}

body.present-mode.present-theme-light .present-counter-divider {
  background: rgba(45, 35, 55, 0.2);
}

.present-counter-index {
  color: #d7c8ef;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.present-counter-title {
  max-width: 15rem;
  overflow: hidden;
  color: #aaa7b1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.present-counter-divider {
  width: 1px;
  height: 1rem;
  background: rgba(255, 255, 255, 0.14);
}

.present-timer {
  padding: 0;
  border: 0;
  background: transparent;
  color: #aaa7b1;
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.present-timer.is-paused {
  color: #e4bd75;
}

.present-timer.is-over {
  color: #ef9a9a;
}

.present-notes-panel {
  display: none;
  position: fixed;
  top: 1rem;
  right: 1rem;
  bottom: 4.4rem;
  z-index: 86;
  width: min(27rem, calc(100vw - 2rem));
  overflow-y: auto;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(16, 18, 24, 0.96);
  color: #d7d4dc;
  box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, 0.42);
  font-size: 0.92rem;
  line-height: 1.52;
  backdrop-filter: blur(16px);
}

body.present-mode.present-notes-open .present-notes-panel {
  display: block;
}

.present-notes-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.present-notes-panel-header strong {
  color: #f4f2f7;
  font-size: 1rem;
}

.present-notes-panel-header span {
  color: #8e8b96;
  font-size: 0.75rem;
}

.present-notes-panel-body p {
  margin: 0.65rem 0 0;
}

.present-notes-panel-body ul {
  margin: 0.65rem 0 0;
  padding-left: 1.15rem;
}

.present-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow-y: auto;
  padding: clamp(2rem, 6vh, 5rem) clamp(1.5rem, 6vw, 6rem);
  background: rgba(7, 8, 11, 0.96);
  color: #f4f2f7;
  backdrop-filter: blur(18px);
}

.present-overlay.is-open {
  display: block;
}

.present-overlay-inner {
  width: min(68rem, 100%);
  margin: 0 auto;
}

.present-overlay-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.present-overlay-header h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 3rem);
}

.present-overlay-header p {
  margin: 0;
  color: #918e99;
  font-size: 0.85rem;
}

.present-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.8rem;
}

.present-overview-grid button {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.85rem;
  min-height: 5rem;
  padding: 0.9rem 1rem;
  border: 1px solid #303643;
  border-radius: 12px;
  background: #151821;
  color: #f4f2f7;
  text-align: left;
  cursor: pointer;
}

.present-overview-grid button:hover,
.present-overview-grid button:focus-visible {
  border-color: #9f7ed8;
  background: #1b1f2a;
  outline: none;
}

.present-overview-grid button.is-current {
  border-color: #bca2eb;
  box-shadow: inset 0 0 0 1px #bca2eb;
}

.present-overview-grid button.is-backup {
  border-style: dashed;
}

.present-overview-number {
  color: #bca2eb;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.12em;
}

.present-overview-title {
  font-size: 0.95rem;
  font-weight: 620;
}

.present-help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.65rem 1.5rem;
}

.present-help-grid div {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 0.7rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.present-help-grid kbd {
  align-self: start;
  width: fit-content;
  padding: 0.18rem 0.4rem;
  border: 1px solid #4a4f5c;
  border-radius: 5px;
  background: #20242e;
  color: #d8c8f1;
  font: 700 0.72rem var(--font-sans);
  box-shadow: 0 2px 0 #090a0d;
}

.present-help-grid span {
  color: #bbb8c1;
  font-size: 0.9rem;
}

.present-blackout {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  place-items: center;
  background: #000000;
  color: #4a4a4a;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

body.present-mode.present-blackout .present-blackout {
  display: grid;
}

@media (max-width: 1000px) {
  body.present-mode .present-deck--eitwatch .present-slide.slide-active {
    gap: 1rem;
    padding: 3.5rem 2.4rem 4.8rem;
    font-size: 1.1rem;
  }

  body.present-mode .present-deck--eitwatch .present-slide-heading h2,
  body.present-mode .present-deck--eitwatch .present-slide h2 {
    font-size: clamp(2rem, 5.6vw, 3.2rem);
  }

  .present-title-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 1.1fr);
    gap: 1.5rem;
    min-height: 0;
  }

  .present-eit-principle-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
    gap: 1.2rem;
  }

  body.present-mode .present-deck--eitwatch .present-title-copy h1 {
    font-size: clamp(4.4rem, 11vw, 7rem);
  }

  .present-prototype-layout,
  .present-evaluation-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(16rem, 0.9fr);
    gap: 1.2rem;
  }

  .present-evaluation-merged {
    grid-template-columns: minmax(0, 0.84fr) minmax(16rem, 1.16fr);
  }

  .present-spec {
    min-height: 5.8rem;
  }

  .present-bar-row {
    grid-template-columns: minmax(7rem, 8.5rem) minmax(7rem, 1fr) 3.8rem;
    gap: 0.55rem;
  }
}

@media (max-width: 720px) {
  body.present-mode .present-deck--eitwatch .present-slide.slide-active {
    padding: 3.2rem 1.75rem 4.5rem;
  }

  .present-title-layout {
    grid-template-columns: 1fr;
  }

  .present-title-visual {
    display: none;
  }

  .present-eit-principle-layout {
    grid-template-columns: 1fr;
  }

  .present-eit-source-figure img {
    max-height: 39vh;
  }

  .present-eit-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .present-eit-steps article {
    padding: 0.65rem;
  }

  .present-eit-steps p {
    display: none;
  }

  .present-comparison {
    gap: 0.6rem;
  }

  .present-comparison-card {
    padding: 0.7rem;
  }

  .present-comparison-card img {
    height: 100%;
  }

  .present-comparison-arrow {
    width: 2rem;
    height: 2rem;
  }

  .present-prototype-layout,
  .present-evaluation-layout {
    grid-template-columns: 1fr;
  }

  .present-evaluation-merged {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .present-gesture-figure--compact img {
    max-height: none;
  }

  .present-primary-result {
    padding: 0.75rem;
  }

  .present-ml-pipeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .present-ml-pipeline article {
    min-height: 3.7rem;
    padding: 0.45rem 0.6rem;
  }

  .present-ml-pipeline article::after {
    display: none;
  }

  .present-ml-pipeline article:nth-child(n + 3) {
    border-top: 1px solid var(--deck-border);
  }

  .present-ml-pipeline article:nth-child(3) {
    border-left: 0;
  }

  .present-generalization-strip {
    grid-template-columns: 1.2fr 1fr 1fr;
  }

  .present-open-grid {
    gap: 0.65rem;
  }

  .present-open-grid article {
    min-height: 12rem;
    padding: 1rem;
  }

  .present-video-stage {
    width: min(100%, calc(28vh * 16 / 9));
  }

  .present-prototype-video video,
  .present-gesture-figure img {
    max-height: none;
  }

  .present-study-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .present-study-rail article {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    padding: 0.65rem;
  }

  .present-study-rail p {
    display: none;
  }

  .present-ablation-layout {
    grid-template-columns: 1fr;
  }

  .present-participant-callout {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
  }

  .present-participant-callout strong {
    font-size: 2.4rem;
  }

  .present-participant-callout span {
    margin: 0;
  }

  .present-transfer-card {
    padding: 0.75rem;
  }

  .present-transfer-card > p {
    display: none;
  }

  .present-boundary-card {
    padding: 0.85rem;
  }

  .present-closing-points {
    gap: 0.45rem;
  }

  .present-closing-points > div {
    padding: 0.65rem;
  }

  .present-backup-grid,
  .present-latency-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .present-latency-grid-wide {
    grid-column: span 2;
  }

  .present-counter-title {
    display: none;
  }

  .present-notes-panel {
    left: 1rem;
    width: auto;
  }
}

@media (max-height: 700px) {
  body.present-mode .present-deck--eitwatch .present-slide.slide-active {
    gap: 0.8rem;
    padding-top: 2.7rem;
    padding-bottom: 4rem;
  }

  .present-deck--eitwatch .present-slide-heading {
    gap: 0.45rem;
  }

  body.present-mode .present-deck--eitwatch .present-slide-heading h2,
  body.present-mode .present-deck--eitwatch .present-slide h2 {
    font-size: clamp(1.85rem, 4vw, 3.2rem);
  }

  body.present-mode .present-deck--eitwatch .present-slide--results .present-slide-heading h2 {
    font-size: clamp(2.15rem, 4vw, 3.4rem);
  }

  .present-demo-frame video {
    max-height: 56vh;
  }

  .present-title-visual img {
    max-height: 60vh;
  }

  .present-eit-source-figure img {
    max-height: 43vh;
  }

  .present-comparison-card img {
    height: 100%;
  }

  .present-depth-diagram {
    width: min(100%, 74rem, calc(42vh * 1120 / 390));
  }

  .present-video-stage {
    width: min(100%, calc(37vh * 16 / 9));
  }

  .present-prototype-video video,
  .present-gesture-figure img {
    max-height: none;
  }

  .present-gesture-figure--compact img {
    max-height: none;
  }

  .present-ml-pipeline article {
    min-height: 4rem;
    padding-block: 0.5rem;
  }

  .present-open-grid article {
    min-height: 11rem;
    padding: 1rem;
  }

  .present-spec {
    min-height: 5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .present-progress > span,
  .present-evaluation-merged {
    transition: none;
  }
}