/* =========================================================
   surflo.css — Surflo project page
   Builds on base.css + assets/site.css.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --surflo-lav: #b89cff;
  --surflo-lav-rgb: 184, 156, 255;
  --surflo-rose: #ff7a90;
  --surflo-rose-rgb: 255, 122, 144;
  --surflo-amber: #ffc857;
}

[data-theme="light"] {
  --surflo-lav: #6a4fcb;
  --surflo-lav-rgb: 106, 79, 203;
  --surflo-rose: #c84764;
  --surflo-rose-rgb: 200, 71, 100;
}

.surflo-page {
  background: var(--bg-color);
  /* Lift muted/subdued text against the near-black background.
     Overrides base.css's #777 (47% lightness) which reads as too dark. */
  --subdued-text-color: #b6b6b6;
}
[data-theme="light"] .surflo-page { --subdued-text-color: #555555; }

/* The hero is shared — but on this page there's no bottom card, so we
   anchor the title in the lower third of the frame: the mesh gets the
   upper two-thirds of the breathing room, and the title reads as the
   "subject line" of the visual. */
.surflo-page .hero-caption {
  top: auto;
  bottom: clamp(2.5rem, 12vh, 6rem);
  transform: none;
}
.surflo-page .hero-card-wrap { display: none; }

/* Re-anchor the scroll cue with auto-margin centering instead of
   translateX(-50%). This is bulletproof regardless of scrollbar width,
   parent padding, or the browser's flex bounding-box behaviour with
   letter-spacing. */
.surflo-page .hero-scroll-cue {
  left: 0;
  right: 0;
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
  transform: none;
  padding-left: 0;
}

/* On smaller screens, keep it tight to the bottom edge so it never
   overlaps the scroll cue. */
@media (max-width: 760px) {
  .surflo-page .hero-caption {
    top: auto;
    bottom: clamp(3.5rem, 14vh, 5rem);
    transform: none;
  }
}

/* On phones specifically, horizontally center the Surflo title block —
   the left-anchored desktop layout looks cramped at narrow widths. */
@media (max-width: 640px) {
  .surflo-page .hero-caption {
    left: 0;
    right: 0;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: min(560px, 92vw);
    align-items: center;
    text-align: center;
  }
}

/* Helpers ----------------------------------------------------------- */
.surflo-page .accent { color: var(--accent); }
.surflo-page .lav    { color: var(--surflo-lav); }
.surflo-page .hl     { color: var(--accent); font-weight: 400; }
.surflo-page .hl-accent { color: var(--accent); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85em; }
.surflo-page .hl-rose   { color: var(--surflo-rose); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85em; }
.surflo-page code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95em;
  padding: 0 0.25em;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  color: var(--text-color);
}
.surflo-page code.lav {
  color: var(--surflo-lav);
  background: rgba(var(--surflo-lav-rgb), 0.12);
}
[data-theme="light"] .surflo-page code { background: rgba(0, 0, 0, 0.06); }

.section-lede {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.6;
  color: var(--text-color);
  max-width: 1100px;
  margin: 0 auto 2rem;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  letter-spacing: 0.005em;
}
.section-lede.secondary {
  margin-top: 1.5rem;
  margin-bottom: 0;
  font-size: clamp(13.5px, 1.05vw, 16px);
  color: var(--subdued-text-color);
}
.section-lede em { font-style: italic; color: var(--text-color); }
.section-lede strong { font-weight: 500; color: var(--text-color); }

/* ---------- Meta section (badge + authors + actions) -------------- */
.section-meta { padding-top: 4rem; padding-bottom: 4rem; }
.meta-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

.meta-venue { display: flex; justify-content: center; }
.venue-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--accent);
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.meta-authors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem 2.4rem;
  max-width: 1000px;
  font-family: 'Roboto', sans-serif;
}
.author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  line-height: 1.25;
}
.author-line {
  display: inline-block;
  white-space: nowrap;
  line-height: 1.25;
}
.author-name {
  font-size: 16px;
  font-weight: 300;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 200ms var(--ease-out);
}
.author-name b { font-weight: 500; color: var(--accent); }
.author-name:hover,
.author-name:hover b { color: var(--link-hover-color); }
.author-aff {
  font-size: 13px;
  font-weight: 300;
  color: #cfcfcf;
  letter-spacing: 0.04em;
}
[data-theme="light"] .author-aff { color: #4a4a4a; }
.eq-mark {
  color: var(--accent);
  font-weight: 500;
  vertical-align: super;
  font-size: 0.8em;
  margin-left: 1px;
}
.meta-equal {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--subdued-text-color);
}

.meta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 0.6rem;
}
.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text-color);
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms var(--ease-out),
              background 200ms var(--ease-out),
              border-color 200ms var(--ease-out),
              transform 200ms var(--ease-out);
}
.action-btn:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  transform: translateY(-1px);
  text-decoration: none;
}
/* Both children placed inline-flex centred — same line-height, same height,
   so the icon glyph and the label glyph share the SAME centerline regardless
   of the font (Roboto vs FontAwesome vs Academicons). */
.action-btn > i,
.action-btn > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1em;
  line-height: 1;
  font-size: 12px;
}
.action-btn > i {
  font-size: 13px;
  /* Cancel FontAwesome / Academicons own vertical-align which can offset
     the glyph relative to the surrounding text baseline. */
  vertical-align: middle;
  position: relative;
  top: 0;
}
[data-theme="light"] .action-btn {
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--hairline);
  color: var(--text-color);
}

/* ---------- TL;DR ------------------------------------------------- */
.section-tldr { padding-top: 1rem; padding-bottom: 4.5rem; }
.tldr-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2.4rem;
  align-items: start;
}
.tldr-lead {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.6;
  color: var(--text-color);
  margin: 0;
  letter-spacing: 0.005em;
  text-align: justify;
  text-justify: inter-word;
}
.tldr-lead strong { font-weight: 500; color: var(--accent); }
.tldr-lead em { font-style: italic; color: var(--text-color); font-weight: 300; }

.tldr-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  font-family: 'Roboto', sans-serif;
}
.tldr-bullets li {
  position: relative;
  padding: 0.85rem 1rem 0.85rem 2.2rem;
  border-left: 1px solid rgba(var(--accent-rgb), 0.3);
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.04), transparent 70%);
  border-radius: 0 8px 8px 0;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-color);
  counter-increment: tldr-counter;
  text-align: justify;
  text-justify: inter-word;
}
.tldr-bullets { counter-reset: tldr-counter; }
.tldr-bullets li::before {
  content: counter(tldr-counter, decimal-leading-zero);
  position: absolute;
  left: 0.7rem;
  top: 0.85rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.tldr-bullets .kw {
  font-weight: 500;
  color: var(--accent);
  margin-right: 4px;
}
.tldr-bullets code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  font-size: 0.92em;
  padding: 0 4px;
  border-radius: 3px;
}

/* ---------- Intro video (between meta and TL;DR cards) -------- */
.section-video {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.video-embed {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  background: #000;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 640px) {
  .video-embed { border-radius: 10px; }
}

/* ---------- TL;DR cards (headline row, before Overview) -------- */
.section-tldr-cards {
  padding-top: 3.5rem;
  padding-bottom: 0.5rem;
}
.tldr-goal {
  max-width: 1100px;
  margin: 0 auto 1.8rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: clamp(26px, 4vw, 46px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-color);
  text-align: center;
}
.tldr-goal .accent { color: var(--accent); font-weight: inherit; }
.tldr-goal .lav    { color: var(--surflo-lav); font-weight: inherit; }
.tldr-cards {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.tldr-card {
  position: relative;
  margin: 0;
  padding: 1.3rem 1.2rem 1.4rem;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.05), rgba(var(--accent-rgb), 0) 70%),
    rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 250ms var(--ease-out),
              transform 200ms var(--ease-out);
}
.tldr-card:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
  transform: translateY(-2px);
}
.tldr-card-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-size: 14px;
  margin-bottom: 0.15rem;
}
.tldr-card-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.3;
  margin: 0;
  color: var(--text-color);
  letter-spacing: 0.005em;
}
.tldr-card-title .lav { color: var(--surflo-lav); }
.tldr-card-text {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.45;
  color: var(--subdued-text-color);
}
.tldr-card-text code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  font-size: 0.9em;
  padding: 0 4px;
  border-radius: 3px;
}

/* ---------- The problem ------------------------------------------ */
.section-problem { padding-top: 2rem; padding-bottom: 4.5rem; }
.problem-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 2.6rem;
  align-items: start;
}
.problem-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: clamp(15px, 1.2vw, 17.5px);
  line-height: 1.65;
  color: var(--text-color);
  text-align: justify;
  text-justify: inter-word;
}
.problem-text p { margin: 0 0 1.1rem; }
.problem-text em { color: var(--accent); font-style: italic; font-weight: 300; }
.problem-text strong { color: var(--text-color); font-weight: 500; }
.problem-text .accent { color: var(--accent); font-weight: 500; }

.problem-text .quote {
  position: relative;
  margin: 1.4rem 0;
  padding: 1.1rem 1.4rem 1.1rem 1.8rem;
  border-left: 2px solid rgba(var(--surflo-lav-rgb), 0.55);
  background: rgba(var(--surflo-lav-rgb), 0.04);
  border-radius: 0 6px 6px 0;
  font-family: 'Roboto', sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--text-color);
}
.problem-text .quote p { margin: 0 0 0.45rem; }
.problem-text .quote em { color: var(--surflo-lav); font-weight: 400; font-style: normal; }
.problem-text .quote footer {
  font-style: normal;
  font-size: 12.5px;
  color: var(--subdued-text-color);
  letter-spacing: 0.06em;
}
.problem-followup { font-size: 1.05em; }

.problem-figure,
.image-compare {
  margin: 0;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  overflow: hidden;
}
.problem-figure img,
.image-compare img {
  display: block;
  width: 100%;
  height: auto;
}
.problem-figure figcaption,
.image-compare figcaption {
  padding: 0.75rem 1rem 0.85rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--subdued-text-color);
  text-align: center;
}
.problem-figure figcaption em,
.image-compare figcaption em { color: var(--text-color); font-style: italic; }

/* ---------- Before/after image comparison slider ----------------
   Two equally-sized images stacked. The "overlay" is clipped from
   the slider position to the right edge, so dragging the divider
   reveals or covers the overlay. */
.image-compare-stage {
  position: relative;
  width: 100%;
  display: block;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  overflow: hidden;
  background: #000;
  outline: none;
}
.image-compare-stage:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.image-compare-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
}
.image-compare-img.is-base {
  position: relative;
  z-index: 1;
}
.image-compare-img.is-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Two clipped layers stacked over the base. The slider position drives
   each layer's clip-path; everything inside (image, label) gets clipped
   together with it. */
.image-compare-side {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  will-change: clip-path;
  transition: clip-path 80ms linear;
}
.image-compare-side-left  { clip-path: inset(0 50% 0 0); }
.image-compare-side-right { clip-path: inset(0 0 0 50%); }
.image-compare-stage.is-dragging .image-compare-side {
  transition: none;
}
.image-compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.55);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
  transition: left 80ms linear;
}
.image-compare-stage.is-dragging .image-compare-divider {
  transition: none;
}
.image-compare-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #fff;
  font-size: 11px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}
.image-compare-handle i { line-height: 1; }
.image-compare-stage:hover .image-compare-handle {
  border-color: var(--accent);
  color: var(--accent);
}
.image-compare-label {
  position: absolute;
  top: 0.7rem;
  z-index: 4;
  padding: 4px 10px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  pointer-events: none;
}
.image-compare-label-left {
  left: 0.7rem;
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.55);
}
.image-compare-label-right { right: 0.7rem; }

/* ---------- Quantitative section (stat tiles + bar charts) ------- */
.section-quantitative { padding-bottom: 5rem; }

/* Sub-grouping inside the quantitative section: a small accent pill +
   group label, followed by the 2×4 grid of bar charts. */
.quant-group { margin-bottom: 2.6rem; }
.quant-group + .quant-group { margin-top: 1.6rem; }
.quant-group-title {
  max-width: 1100px;
  margin: 1.5rem auto 0.3rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 18px;
  color: var(--text-color);
  letter-spacing: 0.01em;
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.quant-group-tag {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 3px 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: 999px;
  line-height: 1.4;
}
.quant-group-sub {
  max-width: 1100px;
  margin: 0 auto 1.2rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--subdued-text-color);
}

.stat-grid {
  max-width: 1100px;
  margin: 0 auto 2.6rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 980px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stat-grid { grid-template-columns: 1fr; } }

.stat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
  padding: 1.4rem 1rem;
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 14px;
  background: linear-gradient(180deg,
              rgba(var(--accent-rgb), 0.06) 0%,
              rgba(var(--accent-rgb), 0.0) 100%);
}
.stat-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 200;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.stat-unit {
  font-size: 0.55em;
  margin-left: 2px;
  letter-spacing: 0;
  color: var(--accent);
  opacity: 0.75;
}
.stat-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-color);
}
.stat-sub {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: var(--subdued-text-color);
  letter-spacing: 0.02em;
}

/* Tabset that turns the 4 datasets per group into a compact, animated
   carousel: one tab per dataset, the active panel shows just the CD
   and F1 charts side-by-side. Saves a lot of vertical real-estate
   compared to rendering all 8 charts at once. */
.quant-tabset {
  max-width: 1100px;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.015);
  padding: 0.85rem 1rem 1.1rem;
}

.quant-tablist {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  padding-bottom: 0.7rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  -webkit-overflow-scrolling: touch;
}
.quant-tablist::-webkit-scrollbar { height: 4px; }
.quant-tablist::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}

.quant-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: transparent;
  color: var(--subdued-text-color);
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 200ms var(--ease-out),
              background 200ms var(--ease-out),
              border-color 200ms var(--ease-out);
  white-space: nowrap;
}
.quant-tab:hover {
  color: var(--text-color);
  border-color: rgba(255, 255, 255, 0.18);
}
.quant-tab.is-active {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.08);
  font-weight: 400;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.18) inset;
}
.quant-tab:focus-visible {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.25);
}

.quant-tab-tag {
  font-size: 10.5px;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  opacity: 0.85;
}

.quant-panels { position: relative; }

.quant-panel { display: none; }
.quant-panel.is-active {
  display: block;
  animation: quant-panel-fade 320ms var(--ease-out);
}

@keyframes quant-panel-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .quant-panel.is-active { animation: none; }
}

[data-theme="light"] .quant-tabset {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.015);
}
[data-theme="light"] .quant-tablist { border-bottom-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .quant-tab { border-color: rgba(0, 0, 0, 0.1); }
[data-theme="light"] .quant-tab:hover { border-color: rgba(0, 0, 0, 0.2); }

/* Bar charts: a 2-column grid (CD + F1) inside each panel. Each row
   uses CSS-only bars sized via the --w custom property. The "is-ours"
   modifier highlights Surflo with the accent gradient. */
.bar-charts {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
@media (max-width: 820px) { .bar-charts { grid-template-columns: 1fr; } }

.bar-chart {
  padding: 1.4rem 1.4rem 1.6rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.35);
}
.bar-chart-title {
  margin: 0 0 0.25rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 17px;
  color: var(--text-color);
  letter-spacing: 0.01em;
}
.bar-chart-sub {
  margin: 0 0 1.15rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 12.5px;
  color: var(--subdued-text-color);
  letter-spacing: 0.04em;
}
.bar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.bar-row {
  display: grid;
  grid-template-columns: 145px 1fr 60px;
  align-items: center;
  gap: 0.7rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: var(--text-color);
}
.bar-name {
  letter-spacing: 0.02em;
  color: var(--subdued-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-track {
  position: relative;
  height: 14px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.bar-fill {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.32));
  border-radius: 999px;
}
.bar-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  text-align: right;
  color: var(--text-color);
}

/* Surflo headline result — full accent treatment with a soft glow. */
.bar-row.is-ours .bar-name {
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.bar-row.is-ours .bar-fill {
  background: linear-gradient(90deg,
              rgba(var(--accent-rgb), 0.55),
              var(--accent));
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.35);
}
.bar-row.is-ours .bar-value { color: var(--accent); }

/* Surflo ablation row (no guidance) — same accent colour, slightly muted
   so the headline "with guidance" row stays the visual anchor. */
.bar-row.is-ours-prev .bar-name {
  color: rgba(var(--accent-rgb), 0.85);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.bar-row.is-ours-prev .bar-fill {
  background: linear-gradient(90deg,
              rgba(var(--accent-rgb), 0.30),
              rgba(var(--accent-rgb), 0.6));
}
.bar-row.is-ours-prev .bar-value { color: rgba(var(--accent-rgb), 0.85); }

[data-theme="light"] .bar-chart {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .bar-track {
  background: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .bar-fill {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.32));
}

/* ---------- Comparison section (one row per scene) --------------- */
.section-comparison .section-lede,
.section-comparison .comparison-lede {
  margin-top: 0.5rem;
  margin-bottom: 1.8rem;
}
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.6rem;
}
.comparison-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.comparison-row:first-child {
  padding-top: 0;
  border-top: 0;
}
.comparison-row-header {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.comparison-scene-tag {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 3px 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: 999px;
  line-height: 1.4;
}
.comparison-row-header h3 {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: var(--text-color);
}
.comparison-row-header .comparison-scene-meta {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--subdued-text-color);
  margin-left: auto;
}
.comparison-row-pair {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

/* Static reference figure on the left of each row. Reuses .image-compare
   chrome (background, border, radius, figcaption styling) but doesn't
   need the slider stage — just an image with a "Reference" pill. */
.comparison-ref-stage {
  position: relative;
  display: block;
  overflow: hidden;
  background: #000;
}
.comparison-ref-stage img {
  display: block;
  width: 100%;
  height: auto;
}
.comparison-ref-label {
  left: 0.7rem;
}

@media (max-width: 1100px) {
  /* Below this width the three-up layout starts to feel cramped:
     keep the two sliders side-by-side and bump the reference up
     onto its own row spanning both. */
  .comparison-row-pair { grid-template-columns: 1fr 1fr; }
  .comparison-row-pair > .comparison-ref { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .comparison-row-pair { grid-template-columns: 1fr; }
  .comparison-row-pair > .comparison-ref { grid-column: auto; }
  .comparison-row-header .comparison-scene-meta { margin-left: 0; }
}

/* ---------- Pipeline animation ----------------------------------- */
.section-pipeline { padding-bottom: 5rem; }
.pipeline-stage {
  position: relative;
  max-width: 1300px;
  margin: 1.5rem auto 0;
  padding: 2rem 1.5rem 1.6rem;
  display: grid;
  grid-template-columns: 0.95fr 0.85fr 0.95fr 0.85fr 1.0fr;
  gap: 1rem;
  align-items: center;
  background: linear-gradient(180deg,
              rgba(var(--accent-rgb), 0.04) 0%,
              rgba(var(--accent-rgb), 0.0) 100%);
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 18px;
  isolation: isolate;
}
.pipe-flow-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.pipe-block {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.8rem;
  text-align: center;
  font-family: 'Roboto', sans-serif;
}
.pipe-block-title {
  font-weight: 300;
  font-size: 14.5px;
  letter-spacing: 0.04em;
  color: var(--text-color);
}
.pipe-block-title em { color: var(--accent); font-style: italic; font-weight: 400; }
.pipe-block-sub {
  font-weight: 100;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--subdued-text-color);
  line-height: 1.45;
}
.pipe-block-icon {
  width: 64px;
  height: 64px;
  color: var(--accent);
  opacity: 0.85;
}

/* Decoder icon: 2D flow-matching animation.
   Points start as Gaussian noise around the centre and flow to a smooth
   sine-wave "surface", suggesting denoising into a 1D manifold. */
.pipe-decoder-anim {
  position: relative;
  width: 100%;
  height: 100%;
}
.pipe-decoder-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  will-change: transform, opacity;
  animation: pipe-decoder-flow 4.5s ease-in-out infinite;
}
@keyframes pipe-decoder-flow {
  0%   { transform: translate(var(--nx), var(--ny)); opacity: 0; }
  10%  { transform: translate(var(--nx), var(--ny)); opacity: 0.95; }
  50%  { transform: translate(var(--tx), var(--ty)); opacity: 1; }
  82%  { transform: translate(var(--tx), var(--ty)); opacity: 1; }
  95%  { transform: translate(var(--tx), var(--ty)); opacity: 0; }
  100% { transform: translate(var(--nx), var(--ny)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pipe-decoder-dot {
    animation: none;
    opacity: 1;
    transform: translate(var(--tx), var(--ty));
  }
}
.pipe-label {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--subdued-text-color);
}
.pipe-counter {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--text-color);
  letter-spacing: 0.04em;
}
.pipe-counter-n,
.pipe-counter-m {
  display: inline-block;
  min-width: 1.6em;
  font-weight: 500;
  color: var(--accent);
}

/* Image stack */
.pipe-block-images { padding-bottom: 1.4rem; }
.pipe-imagestack {
  position: relative;
  width: 130px;
  height: 96px;
  margin: 0.4rem auto 0.4rem;
}
.pipe-img {
  position: absolute;
  width: 80px;
  height: 60px;
  border-radius: 4px;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  background: linear-gradient(135deg,
              rgba(var(--accent-rgb), 0.18),
              rgba(var(--surflo-lav-rgb), 0.10));
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.6);
  transform-origin: center;
  transition:
    transform 480ms cubic-bezier(.22, .8, .22, 1),
    opacity 260ms ease;
  /* Default fanned-out position (set on the fly by JS for >5) */
  --i: 0;
  left: calc(50% - 40px + (var(--i) - 3) * 8px);
  top: calc(50% - 30px + (var(--i) - 3) * 5px);
  transform: rotate(calc((var(--i) - 3) * 4deg));
}
.pipe-img.hidden { opacity: 0; transform: scale(0.4); }

/* Latent — 8x16 grid */
.pipe-tokens {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 2px;
  width: 200px;
  height: 100px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(var(--surflo-lav-rgb), 0.05);
  border: 1px solid rgba(var(--surflo-lav-rgb), 0.45);
  box-shadow: 0 0 28px -10px rgba(var(--surflo-lav-rgb), 0.6);
  position: relative;
}
.pipe-tokens::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: radial-gradient(ellipse at center,
              rgba(var(--surflo-lav-rgb), 0.18),
              transparent 75%);
  pointer-events: none;
  animation: latent-pulse 2.6s ease-in-out infinite;
}
@keyframes latent-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
.pipe-token {
  background: rgba(var(--surflo-lav-rgb), 0.45);
  border-radius: 1px;
}

/* Encoder / Decoder boxes */
.pipe-block-encoder,
.pipe-block-decoder {
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.025);
  padding: 1rem 0.8rem 1.2rem;
}
.pipe-block-encoder { color: var(--accent); }
.pipe-block-decoder { color: var(--accent); }

/* Output */
.pipe-output-canvas {
  width: 100%;
  max-width: 220px;
  height: 130px;
  display: block;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
}

/* ---------- Generic viewer carousel ----------------------------
   Used by both the particle gallery (section 04) and the multi-view
   carousel (section 05). One stage, one viewer alive at a time. */
.section-gallery,
.section-scaling { padding-bottom: 5rem; }
.viewer-carousel {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.viewer-carousel-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(ellipse at center,
                    rgba(var(--accent-rgb), 0.05),
                    transparent 70%),
    rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.viewer-carousel-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none; /* let OrbitControls own touch gestures */
}
.viewer-carousel-canvas:active { cursor: grabbing; }

/* Caption overlay (top-left) */
.viewer-carousel-overlay {
  position: absolute;
  top: 1rem;
  left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: 'Roboto', sans-serif;
  pointer-events: none;
  z-index: 2;
}
.viewer-carousel-overlay-name {
  font-weight: 300;
  font-size: 18px;
  color: var(--accent);
  letter-spacing: 0.01em;
}
.viewer-carousel-overlay-meta {
  font-weight: 100;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cfcfcf;
}

/* Prev / next chevrons */
.viewer-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text-color);
  cursor: pointer;
  z-index: 3;
  transition: color 200ms var(--ease-out),
              background 200ms var(--ease-out),
              border-color 200ms var(--ease-out),
              transform 200ms var(--ease-out);
}
.viewer-carousel-arrow i { font-size: 14px; line-height: 1; }
.viewer-carousel-arrow:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}
.viewer-carousel-prev { left: 1rem; }
.viewer-carousel-next { right: 1rem; }
.viewer-carousel-prev:hover { transform: translate(-2px, -50%); }
.viewer-carousel-next:hover { transform: translate(2px, -50%); }

/* Normal-shading toggle pill (top-right of stage) */
.viewer-carousel-shade {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text-color);
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 200ms var(--ease-out),
              background 200ms var(--ease-out),
              border-color 200ms var(--ease-out);
}
.viewer-carousel-shade > i,
.viewer-carousel-shade > span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.viewer-carousel-shade > i { font-size: 11.5px; }
.viewer-carousel-shade:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.10);
}
.viewer-carousel-shade.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.18);
  box-shadow: 0 0 12px -2px rgba(var(--accent-rgb), 0.5);
}

/* Loading shimmer (visible while a PLY is fetching) */
.viewer-carousel-loader {
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  z-index: 2;
  overflow: hidden;
  opacity: 0;
  transition: opacity 200ms ease;
}
.viewer-carousel-loader.is-loading { opacity: 1; }
.viewer-carousel-loader span {
  display: block;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: viewer-carousel-shimmer 1.2s linear infinite;
}
@keyframes viewer-carousel-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(380%); }
}

/* Tab pills below the stage */
.viewer-carousel-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.viewer-carousel-tab {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: #cfcfcf;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 180ms var(--ease-out),
              background 180ms var(--ease-out),
              border-color 180ms var(--ease-out);
}
.viewer-carousel-tab:hover {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.4);
}
.viewer-carousel-tab.is-active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.10);
}
[data-theme="light"] .viewer-carousel-overlay-meta,
[data-theme="light"] .viewer-carousel-tab { color: #444; }

/* Smooth fade between active items — JS toggles .is-fading. */
.viewer-carousel-stage .viewer-carousel-canvas {
  opacity: 1;
  transition: opacity 220ms ease;
}
.viewer-carousel-stage.is-fading .viewer-carousel-canvas { opacity: 0; }

/* ---------- Dataset release section ----------------------------- */
.dataset-meta {
  max-width: 1100px;
  margin: -0.4rem auto 1.6rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 0.85rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--subdued-text-color);
}
.dataset-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 4px 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.05);
  color: var(--text-color);
}
.dataset-meta-item strong {
  color: var(--accent);
  font-weight: 400;
}
.dataset-meta-sep {
  color: rgba(255, 255, 255, 0.18);
  font-weight: 200;
}
[data-theme="light"] .dataset-meta-sep { color: rgba(0, 0, 0, 0.18); }

.dataset-coming {
  margin-top: 1.2rem;
  text-align: center;
  font-style: italic;
  opacity: 0.75;
}

/* ---------- Strip grids (multi-view, multi-res, guidance) ------- */
.strip-grid {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}
.strip-grid-3 { grid-template-columns: repeat(3, 1fr); }
.strip-grid-5 { grid-template-columns: repeat(5, 1fr); }
.strip-card {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: border-color 250ms var(--ease-out),
              transform 200ms var(--ease-out);
}
.strip-card:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateY(-1px);
}
.strip-card-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
}
.strip-card-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: pan-y; /* rotate horizontally with one finger, page scrolls vertically */
}
.strip-card-canvas:active { cursor: grabbing; }
.strip-card figcaption {
  padding: 0.6rem 0.8rem 0.7rem;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-color);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.strip-card figcaption strong { font-weight: 500; color: var(--accent); }
.strip-card figcaption sub { font-size: 0.8em; }

/* ---------- Take-aways ------------------------------------------ */
.takeaways-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-family: 'Roboto', sans-serif;
}
.takeaways-list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 1.2rem;
  padding: 1.1rem 1.4rem;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 14px;
  background: linear-gradient(120deg,
              rgba(var(--accent-rgb), 0.05),
              transparent 60%);
}
.takeaways-list .num {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 500;
}
.takeaways-list .kw {
  display: inline-block;
  font-weight: 500;
  color: var(--accent);
  margin-right: 4px;
  font-size: 16px;
}
.takeaways-list .quiet {
  display: block;
  margin-top: 0.25rem;
  font-weight: 100;
  font-size: 13px;
  color: var(--subdued-text-color);
  letter-spacing: 0.02em;
}

/* ---------- Citation -------------------------------------------- */
.cite-block {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.2rem 1.4rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-color);
  white-space: pre;
  overflow-x: auto;
}
.cite-block code { background: transparent; padding: 0; font: inherit; color: inherit; }

[data-theme="light"] .cite-block { background: rgba(255, 255, 255, 0.6); }

/* Citation wrapper holds the copy button in the top-right corner. */
.cite-wrap {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}
.cite-wrap .cite-block { max-width: none; }
.cite-copy {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 200ms var(--ease-out),
              background 200ms var(--ease-out),
              border-color 200ms var(--ease-out);
}
.cite-copy i { font-size: 12px; }
.cite-copy:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.16);
}
.cite-copy:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.25);
}
.cite-copy.is-copied {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.22);
}

/* ---------- Footer --------------------------------------------- */
.surflo-footer {
  max-width: 1300px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--subdued-text-color);
}
.surflo-footer p { margin: 0.4rem 0; }
.surflo-footer .quiet { font-size: 11.5px; opacity: 0.75; }
.surflo-footer a { color: var(--accent); text-decoration: none; }
.surflo-footer a:hover { color: var(--link-hover-color); }

/* ---------- Responsive ------------------------------------------ */
@media (max-width: 980px) {
  .tldr-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .problem-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .pipeline-stage {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 1.4rem 1rem;
  }
  .pipe-flow-canvas { display: none; }
  .strip-grid-5 { grid-template-columns: repeat(3, 1fr); }
  .strip-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .tldr-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .pipeline-stage { grid-template-columns: 1fr; }
  .tldr-cards { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .gallery-stage { aspect-ratio: 4 / 3; }
  /* On phones the wide 16:10 viewer feels cramped — switch to a square
     stage so each mesh/point cloud reads similarly to the "Points
     communicate through rendering" cards. */
  .viewer-carousel-stage { aspect-ratio: 3 / 4; }
  .gallery-arrow { width: 36px; height: 36px; }
  .gallery-prev { left: 0.5rem; }
  .gallery-next { right: 0.5rem; }
  .strip-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .strip-grid-3 { grid-template-columns: 1fr; }
  .meta-authors { gap: 1rem 1.6rem; }

  /* Vertical flow particles between stacked pipeline blocks (smartphone
     only). Mirrors the horizontal canvas-driven flow on desktop in both
     colour and glow shape, but pure CSS so it costs nothing. Two
     staggered dots per gap × 4 gaps = 8 particles total. The grid
     row-gap is 1.4rem (set in the 980px media query above), which is
     the travel distance for each dot.

     NOTE on the selector: the pipeline grid contains a trailing
     <canvas class="pipe-flow-canvas"> sibling, so :last-child wouldn't
     exclude pipe-block-output. We exclude it explicitly by class. */
  .pipe-block:not(.pipe-block-output)::before,
  .pipe-block:not(.pipe-block-output)::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    /* Default lane colour: teal accent (matches desktop lanes 0 and 3).
       Layered box-shadow to mimic the desktop's bloomy halo: bright
       core + medium ring + outer haze. */
    background: #5ee0d6;
    box-shadow:
      0 0  4px 1px rgba(94, 224, 214, 0.75),
      0 0 10px 2px rgba(94, 224, 214, 0.38),
      0 0 18px 4px rgba(94, 224, 214, 0.16);
    pointer-events: none;
    z-index: 2;
    transform: translate(-50%, -3px);
    opacity: 0;
    animation: pipe-flow-vertical 1.8s linear infinite;
  }
  .pipe-block:not(.pipe-block-output)::after {
    animation-delay: 0.9s;
  }
  /* Lavender lanes — match the desktop canvas's per-lane palette:
     ['#5ee0d6', '#b89cff', '#b89cff', '#5ee0d6'] — i.e. the gap below
     the encoder and the gap below the latent are lavender.
     Specificity note: this selector uses two classes (.pipe-block +
     .pipe-block-encoder) so it tied with the :not()-based default and
     wins by source order. Without the extra .pipe-block, the default
     :not(.pipe-block-output) rule above would win and override the
     background. */
  .pipe-block.pipe-block-encoder::before,
  .pipe-block.pipe-block-encoder::after,
  .pipe-block.pipe-block-latent::before,
  .pipe-block.pipe-block-latent::after {
    background: #b89cff;
    box-shadow:
      0 0  4px 1px rgba(184, 156, 255, 0.75),
      0 0 10px 2px rgba(184, 156, 255, 0.38),
      0 0 18px 4px rgba(184, 156, 255, 0.16);
  }
}
@keyframes pipe-flow-vertical {
  0%   { transform: translate(-50%, -3px); opacity: 0; }
  15%  { opacity: 0.95; }
  85%  { opacity: 0.95; }
  100% { transform: translate(-50%, 1.4rem); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pipe-block:not(.pipe-block-output)::before,
  .pipe-block:not(.pipe-block-output)::after {
    animation: none;
    opacity: 0;
  }
}