/* ═══════════════════════════════════════════════════════════════
   Academic Project Page — Style Sheet
   (based on the tune-to-learn template)
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties (easy theming) ──────────────────── */
:root {
  /* Colors — monochrome palette */
  --primary:      #222;
  --primary-dark: #000;
  --primary-light:#f0f0f0;
  --accent:       #555;

  --bg:           #ffffff;
  --bg-alt:       #fafafa;
  --bg-hero:      #ffffff;
  --text:         #1a1a1a;
  --text-muted:   #777;
  --text-light:   #999;
  --text-on-dark: #1a1a1a;
  --border:       #e0e0e0;
  --shadow:       none;
  --shadow-lg:    none;

  /* Typography */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  /* Layout */
  --max-width:        1100px;
  --max-width-medium:  900px;
  --max-width-narrow:  760px;
  --section-padding:   2.5rem 0;
  --radius:            4px;
  --radius-lg:         4px;
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; transition: text-decoration-color .15s; }
a:hover { text-decoration-color: var(--text); }

img, video, iframe { max-width: 100%; display: block; border: none; }
figure { margin: 0; }

/* Lazy-load iframe placeholder */
iframe[data-src] {
  background: linear-gradient(110deg, #f5f5f5 8%, #e8e8e8 18%, #f5f5f5 33%);
  background-size: 200% 100%;
  animation: lazy-iframe-shimmer 1.5s linear infinite;
}
@keyframes lazy-iframe-shimmer {
  to { background-position-x: -200%; }
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--bg-alt);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  border: 1px solid var(--border);
}
pre code { background: none; padding: 0; border: none; font-family: inherit; font-size: inherit; }

/* ── Layout ────────────────────────────────────────────────── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.container-narrow {
  max-width: var(--max-width-narrow);
  margin: 0 auto;
}

.container-medium {
  max-width: var(--max-width-medium);
  margin: 0 auto;
}

.section {
  padding: var(--section-padding);
}
.section.alt-bg {
  background: var(--bg);
}

/* Video label - subtle standalone label, not a section heading */
.video-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.75rem;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.video-label::before,
.video-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #ccc;
}

.section h2 {
  font-size: 1.725rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1.25rem;
  color: var(--text);
  letter-spacing: 0.01em;
}

.section h3 {
  font-size: 1.35rem;
  font-weight: 600;
  text-align: center;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: var(--text);
  letter-spacing: 0.01em;
}

/* Two-column layout helper */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 768px) {
  .two-col { grid-template-columns: 1fr; }
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  background: #f7f8fa;
  color: var(--text);
  padding: 2.75rem 1.5rem 2rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.paper-title {
  font-size: clamp(1.5rem, 3.5vw, 2.3rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
.paper-title .subtitle {
  font-weight: 400;
  opacity: 0.85;
  font-size: 0.85em;
}

/* Authors */
.author-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.05rem;
}
.author a {
  color: var(--text);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border);
}
.author a:hover { text-decoration-color: var(--text); }
.author sup {
  font-size: 0.7em;
  margin-left: 1px;
  opacity: 0.7;
}
/* Force a line break inside the flex author list */
.author-break {
  flex-basis: 100%;
  height: 0;
}

.affiliations {
  font-size: 0.9rem;
  opacity: 0.75;
  margin-bottom: 0.35rem;
}
.affiliations span { margin: 0 0.6rem; }

.equal-contrib {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Link buttons */
.link-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1rem;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  transition: border-color .15s;
  text-decoration: none;
}
.btn:hover {
  border-color: var(--text);
  text-decoration: none;
  color: var(--text);
}

.venue-line {
  margin-top: 0.85rem;
  color: var(--text-muted);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.45;
}
.venue-line > span {
  display: block;
}

/* ── Teaser ────────────────────────────────────────────────── */
.teaser-section {
  padding-top: 0;
  margin-top: 0;
  position: relative;
  z-index: 2;
}
.teaser {
  background: var(--bg);
  border-radius: 0;
  border: 1px solid var(--border);
  overflow: hidden;
}
.teaser img {
  width: 100%;
  display: block;
}
.teaser figcaption {
  padding: 0.6rem 1.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  border-top: 1px solid var(--border);
}

/* ── Abstract ──────────────────────────────────────────────── */
.abstract-text {
  font-size: 1rem;
  line-height: 1.65;
  text-align: left;
}
.abstract-text + .abstract-text {
  margin-top: 0.75rem;
}

/* ── Video Embed ───────────────────────────────────────────── */
.video-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 56.25%; /* 16:9 */
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}
.video-container iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.media-video {
  width: 100%;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

/* Replay button (top-right, outside content) */
.replay-btn {
  position: absolute;
  top: -0.2rem;
  right: -0.2rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.45);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.replay-btn:hover {
  background: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.7);
}
.replay-btn i {
  margin-right: 0.3rem;
  font-size: 0.6rem;
}

/* Section kicker — gray label above a heading */
.section-kicker {
  font-size: 1.05rem;
  color: var(--text-muted, #888);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 0;
}
.section-kicker + h2 {
  margin-top: -0.25rem;
}

/* ── Inline citations with hover tooltip ──────────────────── */
body {
  counter-reset: cite-counter;
}
.cite {
  counter-increment: cite-counter;
  display: inline;
  position: relative;
  color: #4f46e5;
  font-size: 0.85em;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px dashed rgba(79, 70, 229, 0.3);
}
.cite::before {
  content: '[' counter(cite-counter) ']';
}
.cite:hover {
  color: #3730a3;
}
.cite .cite-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e1e2e;
  color: #e0e0e0;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  white-space: nowrap;
  min-width: 300px;
  max-width: 450px;
  white-space: normal;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 100;
  pointer-events: none;
}
.cite .cite-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1e1e2e;
}
.cite:hover .cite-tooltip {
  display: block;
}

/* ── Figures ───────────────────────────────────────────────── */
.figure-full {
  margin: 1.25rem 0;
  text-align: center;
}
.figure-full img {
  width: 100%;
  border-radius: var(--radius);
}
.figure-full figcaption,
.figure-grid figcaption {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: var(--text-muted);
  text-align: center;
}

.figure-grid {
  display: grid;
  gap: 1rem;
}
/* Let grid/column children shrink below their intrinsic width
   (videos default to 300px min-content and overflow small screens) */
.figure-grid > *,
.two-col > * { min-width: 0; }
.figure-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.figure-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.figure-grid.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 768px) {
  .figure-grid.cols-3,
  .figure-grid.cols-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .figure-grid.cols-3,
  .figure-grid.cols-4 { grid-template-columns: 1fr; }
  .figure-grid.cols-2 { gap: 0.5rem; }
  .figure-grid.cols-2 figcaption { font-size: 0.75rem; }
}

/* Placeholder images (remove when replacing with real images) */
.placeholder-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #f5f5f5;
  border-radius: var(--radius);
  color: #bbb;
  font-size: 0.8rem;
  text-align: center;
  padding: 1rem;
}
.placeholder-img i {
  font-size: 1.5rem;
  opacity: 0.4;
}

/* ── Tabs ──────────────────────────────────────────────────── */
.tab-nav {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}
.tab-btn {
  background: none;
  border: none;
  padding: 0.65rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all .2s;
  font-family: var(--font-sans);
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
  color: var(--text);
  border-bottom-color: var(--text);
}

.tab-content {
  display: none;
  animation: fadeIn .3s ease;
}
.tab-content.active { display: block; }

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

/* ── Image Comparison Slider ───────────────────────────────── */
.comparison-slider {
  position: relative;
  max-width: 800px;
  margin: 1.25rem auto 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
}

.comparison-before,
.comparison-after {
  width: 100%;
}
.comparison-before { clip-path: inset(0 50% 0 0); position: absolute; top: 0; left: 0; z-index: 2; }
.comparison-after  { position: relative; z-index: 1; }

.comparison-label {
  position: absolute;
  top: 10px;
  z-index: 10;
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.2em 0.65em;
  border-radius: 999px;
  pointer-events: none;
}
.left-label  { left:  12px; }
.right-label { right: 12px; }

.comparison-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.handle-line {
  flex: 1;
  width: 2px;
  background: #fff;
}
.handle-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* ── Video Grid ────────────────────────────────────────────── */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.video-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
}
.video-card:hover {
  background: var(--bg-alt);
}
.video-card video, .video-card img {
  width: 100%;
  display: block;
}
.video-caption {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  text-align: center;
}

/* Paired-comparison video groups (task title above a video pair) */
.video-group-title {
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  color: var(--text);
  margin-bottom: 0.6rem;
}
.video-pair-group {
  margin-bottom: 1.5rem;
}

/* ── Carousel ──────────────────────────────────────────────── */
.gallery-carousel {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.carousel-track-container {
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.carousel-track {
  display: flex;
  transition: transform .4s ease;
}

.carousel-slide {
  min-width: 100%;
  flex-shrink: 0;
}
.carousel-slide img {
  width: 100%;
  display: block;
}
.slide-caption {
  padding: 0.6rem 1.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  background: var(--bg);
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-70%);
  z-index: 10;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  color: var(--text);
  font-size: 0.9rem;
}
.carousel-btn:hover { background: #fff; }
.carousel-btn.prev { left: -20px; }
.carousel-btn.next { right: -20px; }
@media (max-width: 960px) {
  .carousel-btn.prev { left: 8px; }
  .carousel-btn.next { right: 8px; }
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.carousel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  cursor: pointer;
  transition: background .2s;
}
.carousel-dot.active { background: var(--text); }

/* ── Results Table ─────────────────────────────────────────── */
.table-wrapper {
  max-width: 800px;
  margin: 1.5rem auto 0;
  overflow-x: auto;
}
.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.results-table th,
.results-table td {
  padding: 0.5rem 1rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.results-table th {
  background: var(--bg-alt);
  font-weight: 600;
  color: var(--text);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.results-table td:first-child,
.results-table th:first-child {
  text-align: left;
}
.results-table .highlight-row {
  background: var(--primary-light);
}
.results-table .highlight-row td {
  color: var(--text);
}
.table-caption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

/* ── Embed Container ───────────────────────────────────────── */
.embed-container {
  max-width: 900px;
  margin: 1rem auto 0;
}

/* ── BibTeX ────────────────────────────────────────────────── */
.bibtex-block {
  position: relative;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
}
.bibtex-block pre {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.copy-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.75rem;
  cursor: pointer;
  transition: border-color .15s;
  font-family: var(--font-sans);
}
.copy-btn:hover { border-color: var(--text); color: var(--text); }
.copy-btn.copied {
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}

/* ── Footer ────────────────────────────────────────────────── */
.footer {
  padding: 1.25rem 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-light);
  border-top: 1px solid var(--border);
}

/* ── Sticky Header ─────────────────────────────────────────── */
.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: #f7f8fa;
  border-bottom: 1px solid var(--border);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
  pointer-events: none;
}
.sticky-header.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.sticky-header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.5rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.sticky-title {
  font-size: 0.82rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.sticky-title strong {
  font-weight: 600;
}
.sticky-sep {
  color: var(--text-light);
  margin: 0 0.25rem;
}
.sticky-authors {
  color: var(--text-muted);
  font-weight: 400;
}
.sticky-venue {
  color: var(--text-light);
  font-weight: 400;
}
.sticky-links {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}
.sticky-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.75rem;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.sticky-btn:hover {
  border-color: var(--text);
  color: var(--text);
  text-decoration: none;
}

@media (max-width: 640px) {
  .sticky-authors, .sticky-venue, .sticky-sep:nth-child(n+3) {
    display: none;
  }
}

/* ── Table of Contents — floating card on right ────────────── */
.dynamic-toc {
  position: fixed;
  top: 58%;
  right: 1.5rem;
  transform: translateY(-50%);
  z-index: 100;
  max-height: 75vh;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.75rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04);
  padding: 0.75rem 0;
  min-width: 13rem;
}
.dynamic-toc .toc-title {
  display: block;
  padding: 0.15rem 1rem 0.55rem;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-lighter, #999);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 0.35rem;
}
.dynamic-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dynamic-toc li {
  margin: 0;
}
.dynamic-toc a {
  display: block;
  padding: 0.35rem 1rem 0.35rem 0.85rem;
  font-size: 0.73rem;
  color: var(--text-light);
  text-decoration: none;
  line-height: 1.4;
  transition: color .2s, background .2s, border-color .2s;
  border-left: 2.5px solid transparent;
}
.dynamic-toc a:hover {
  color: var(--text);
  background: rgba(99, 102, 241, 0.06);
  text-decoration: none;
}
.dynamic-toc a.active {
  color: #4f46e5;
  border-left-color: #4f46e5;
  font-weight: 600;
  background: rgba(99, 102, 241, 0.08);
}
.dynamic-toc .toc-sub a {
  font-size: 0.73rem;
  padding-left: 1.6rem;
  color: var(--text-lighter, #aaa);
}
.dynamic-toc .toc-sub a:hover {
  color: var(--text-light);
  background: rgba(99, 102, 241, 0.04);
}
.dynamic-toc .toc-sub a.active {
  color: #4f46e5;
  border-left-color: #4f46e5;
  font-weight: 600;
  background: rgba(99, 102, 241, 0.08);
}

/* Hide TOC when viewport is too narrow for it to not overlap content
   (this page's video section uses the full 1100px container, so the
    TOC needs more room than the template default of 1400px) */
@media (max-width: 1600px) {
  .dynamic-toc { display: none; }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hero { padding: 2rem 1rem 1.5rem; }
  .section { padding: 1.75rem 0; }
  .section h2 { font-size: 1.5rem; }
  .section h3 { font-size: 1.1rem; }
  .link-buttons { gap: 0.4rem; }
  .btn { font-size: 0.8rem; padding: 0.45rem 0.9rem; }
  .author-list { font-size: 0.95rem; gap: 0.2rem 1rem; }

  /* Justified text creates huge word-gaps on narrow screens */
  .abstract-text { text-align: left; }

  /* Tighten section container gutters on phones */
  .container { padding: 0 1rem; }

  /* Display math (KaTeX) can overflow the viewport — allow horizontal scroll */
  .katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.25rem 0;
    -webkit-overflow-scrolling: touch;
  }
  .katex-display > .katex { white-space: nowrap; }

  /* YouTube / video summary iframe: use 16:9 instead of fixed height */
  .video-collapse iframe {
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  /* KaTeX's hidden MathML layer can leak a few px past the viewport on
     narrow screens and cause horizontal page scroll — clip it at the root */
  html, body { overflow-x: hidden; }

  /* Replay video wrappers use inline width:80% — expand to full on mobile */
  .replay-video-wrap .replay-video { width: 100% !important; }

  /* Library tabs: allow horizontal scroll, tighter padding */
  .tab-nav {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-btn {
    padding: 0.55rem 0.75rem;
    font-size: 0.82rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ── Print ─────────────────────────────────────────────────── */
@media print {
  .hero { background: #f7f8fa; color: #000; }
  .btn, .copy-btn, .carousel-btn { display: none; }
  .section.alt-bg { background: #fff; }
}

/* ── Utility Classes ───────────────────────────────────────── */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 2rem; }
.hidden { display: none !important; }