/* HEAR project page — self-contained, no external dependencies */
:root {
  --ink: #2a2a2a;
  --muted: #6b7280;
  --accent: #2c5d8a;
  --accent-light: #6fa4d6;
  --bg: #ffffff;
  --band: #f7f9fb;
  --card: #f6f8fa;
  --border: #e5e7eb;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.75;
  font-size: 16.5px;
}
.container { max-width: 1000px; margin: 0 auto; padding: 0 28px; }

/* hero */
.hero { text-align: center; padding: 64px 0 36px; }
.hero h1 { font-size: 2.15rem; font-weight: 700; line-height: 1.32; margin-bottom: 24px; }
.hero h1 .name { color: var(--accent); }
.authors { font-size: 1.12rem; margin-bottom: 8px; }
.authors a { color: var(--accent); text-decoration: none; }
.authors a:hover { text-decoration: underline; }
.affil { color: var(--muted); font-size: 0.98rem; margin-bottom: 26px; }

/* buttons */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: #1f2937; color: #fff; border-radius: 999px;
  padding: 9px 20px; font-size: 0.95rem; text-decoration: none;
  transition: background .15s ease;
}
.btn:hover { background: var(--accent); }
.btn.disabled { background: #9ca3af; cursor: default; }
.btn svg { width: 15px; height: 15px; fill: currentColor; }

/* sections: generous vertical rhythm, alternating bands */
section { padding: 56px 0; }
section.band { background: var(--band); }
section h2 {
  font-size: 1.6rem; font-weight: 700; text-align: center; margin-bottom: 28px;
}
section h2::after {
  content: ""; display: block; width: 44px; height: 3px; border-radius: 2px;
  background: var(--accent-light); margin: 12px auto 0;
}
.rule { display: none; }   /* 分隔线由色带交替替代 */
section.teaser-section { padding-top: 8px; }
.nowrap { white-space: nowrap; }
.cards.no-top { margin-top: 0; }
footer { border-top: 1px solid var(--border); }

.lead {
  max-width: 780px; margin: 0 auto 32px; text-align: justify; color: #3b3b3b;
}
.lead.center { text-align: center; color: var(--muted); }

figure { text-align: center; }
figure img { max-width: 100%; height: auto; border-radius: 6px; }
figure.teaser img { max-width: min(600px, 100%); }
figcaption {
  color: var(--muted); font-size: 0.93rem; margin: 16px auto 0; text-align: left;
  max-width: 820px; line-height: 1.7;
}
.narrow { max-width: 780px; margin: 0 auto; }

.abstract p { text-align: justify; font-size: 1.02rem; line-height: 1.85; }

/* key-number cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 36px; }
.card {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 24px 18px; text-align: center;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
section:not(.band) .card { background: var(--card); box-shadow: none; }
.card .num { font-size: 1.6rem; font-weight: 700; color: var(--accent); line-height: 1.3; }
.card .lbl { color: var(--muted); font-size: 0.88rem; margin-top: 8px; line-height: 1.55; }

/* panel rows (multi-figure) */
.panel-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; align-items: start; }
.panel img { background: #fff; border: 1px solid var(--border); padding: 10px; }
.panel figcaption { font-size: 0.88rem; margin-top: 14px; }
.panel.wide2 { grid-column: span 2; }
.panel-row.grid2 { grid-template-columns: repeat(2, 1fr); gap: 36px 32px; max-width: 820px; margin: 0 auto; }
.panel-row.grid2 .panel img { height: 230px; width: 100%; object-fit: contain; }
@media (max-width: 760px) { .panel-row.grid2 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .panel.wide2 { grid-column: span 1; } }

/* results tables */
h3.subhead {
  font-size: 1.12rem; font-weight: 700; margin: 52px 0 16px; text-align: center;
}
table.results {
  border-collapse: collapse; margin: 0 auto; font-size: 0.97rem; min-width: 62%;
}
table.results th, table.results td {
  border-bottom: 1px solid var(--border); padding: 11px 26px; text-align: center;
}
table.results thead th { border-bottom: 2px solid #9ca3af; font-weight: 700; }
table.results td:first-child, table.results th:first-child { text-align: left; }
table.results tr.hl { background: #fff7e0; }
.spaced { margin-top: 40px; }

/* standalone result figures: centered, generous caption spacing */
figure.result-fig { margin: 8px auto 0; }
figure.result-fig img { background: #fff; border: 1px solid var(--border); padding: 14px; }
figure.result-fig figcaption { text-align: center; max-width: 720px; font-size: 0.95rem; margin-top: 20px; }
figure.result-fig.mid img { max-width: min(820px, 100%); }
figure.result-fig.small { margin-bottom: 48px; }
figure.result-fig.small img { max-width: min(380px, 100%); }
figure.result-fig.small figcaption { max-width: 560px; font-size: 0.9rem; margin-top: 14px; }

/* video grid */
.video-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.video-grid .video-slot { grid-column: span 2; }
.video-grid .video-slot.w3 { grid-column: span 3; }
.video-grid .video-slot.w6 { grid-column: 2 / span 4; }
.video-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 760px) { .video-grid4 { grid-template-columns: repeat(2, 1fr); } }
.video-slot.portrait video { aspect-ratio: 4 / 5; background: #fff; }
@media (max-width: 760px) { .video-grid .video-slot, .video-grid .video-slot.w3, .video-grid .video-slot.w6 { grid-column: 1 / -1; } }
.video-slot {
  background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.video-slot video { width: 100%; display: block; background: #0f172a; aspect-ratio: 16/10; }
.video-slot .vtitle { padding: 14px 18px 4px; font-size: 0.98rem; font-weight: 600; }
.video-slot .vdesc { padding: 0 18px 16px; font-size: 0.87rem; color: var(--muted); line-height: 1.6; }
.video-slot.feature { max-width: 860px; margin: 0 auto 8px; }
.video-slot.feature video { aspect-ratio: auto; }

/* bibtex */
pre.bibtex {
  background: #0f172a; color: #e2e8f0; border-radius: 12px;
  padding: 22px 26px; overflow-x: auto; font-size: 0.87rem;
  font-family: Consolas, "Courier New", monospace; line-height: 1.6;
}

footer { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 40px 0 56px; }
footer a { color: var(--accent); }

@media (max-width: 640px) {
  .hero { padding: 40px 0 24px; }
  .hero h1 { font-size: 1.55rem; }
  section { padding: 40px 0; }
  .container { padding: 0 18px; }
}

/* small inline dataset / paper links */
a.ds-link {
  display: inline-block; font-size: 0.78rem; font-weight: 600; line-height: 1.5;
  padding: 1px 9px; margin: 0 1px; border-radius: 999px; vertical-align: 1px;
  color: var(--accent); background: #fff; border: 1px solid var(--border); text-decoration: none;
}
a.ds-link:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* narrow screens: tables scroll inside their own box, figures lose their inner padding */
.table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  .lead, .abstract p, figure.result-fig figcaption { text-align: left; }
  table.results { font-size: 0.85rem; min-width: 0; }
  table.results th, table.results td { padding: 8px 8px; }
  table.results td:first-child { min-width: 7em; }
  figure.result-fig img, .panel img { padding: 6px; }
  .cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card { padding: 16px 10px; }
  .card .num { font-size: 1.25rem; }
  .card .lbl { font-size: 0.8rem; }
}

/* original video -> arrow -> chest close-up (same layout as the paper's Fig. 4 panel) */
.pair-list { display: grid; gap: 28px; max-width: 900px; margin: 0 auto; }
.pair-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.zoom-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; padding: 10px 10px 0; background: #fff; }
.zoom-pair video { width: 100%; display: block; background: #fff; aspect-ratio: 16 / 10; object-fit: contain; }
.zoom-pair.portrait video { aspect-ratio: 4 / 5; }
.zoom-arrow { width: 30px; height: 60px; fill: #c9dcf0; margin: 0 4px; }
@media (max-width: 760px) {
  .pair-grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .zoom-pair, .zoom-pair.portrait { grid-template-columns: 1fr; }
  .zoom-arrow { transform: rotate(90deg); justify-self: center; width: 22px; height: 44px; margin: -6px 0; }
}

/* native video controls: drop the large dark gradient behind the progress bar (Chromium/WebKit) */
video::-webkit-media-controls-panel { background-image: linear-gradient(to bottom, transparent 72%, rgba(15, 23, 42, 0.45)) !important; background-color: transparent !important; }
video::-webkit-media-controls-enclosure { background: none; }

/* centred play badge shown while a video is paused */
.vwrap { position: relative; }
.vwrap > video { width: 100%; display: block; }
.play-badge {
  position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 0; border-radius: 50%; background: rgba(15, 23, 42, 0.55); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; transition: opacity .15s, transform .15s;
}
.play-badge:hover { transform: scale(1.08); background: rgba(15, 23, 42, 0.7); }
.play-badge svg { width: 14px; height: 14px; fill: #fff; margin-left: 3px; }
.vwrap.playing .play-badge { opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .play-badge { width: 32px; height: 32px; margin: -16px 0 0 -16px; } }