@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/lato-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/lato-latin-700-normal.woff2") format("woff2");
}

:root {
  /* Auto-theme SVGs follow the page scheme; update this with any future page theme. */
  color-scheme: dark;
  --bg: #000000;
  --surface-deep: #121214;
  --surface: #1d1d1f;
  --surface-hover: #2a2a2d;
  --border: #424245;
  --border-strong: #55555a;
  --text: #f5f5f7;
  --text-muted: #a5aab2;
  --text-faint: #929aa4;
  --link: #86bfe7;
  --accent: #40a5eb;
  --accent-soft: #8bb9db;
  --accent-teal: #52bbb1;
  --container: 60rem;
  --gutter: clamp(1.1rem, 4vw, 2rem);
  --section-gap: clamp(4rem, 7vw, 5rem);
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --radius-media: 16px;
  --radius: 12px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --anchor-offset: 5.5rem;
  --step-small: 0.875rem;
  --step-body: 1.0625rem;
  --step-lead: 1.3125rem;
  --step-heading: 2rem;
  --step-display: 2.2rem;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--anchor-offset);
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Lato", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: var(--step-body);
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

h1,
h2,
h3 {
  font-weight: 700;
  letter-spacing: 0;
  text-wrap: balance;
}

h2 {
  font-size: var(--step-heading);
  line-height: 1.125;
}

h3 {
  font-size: var(--step-lead);
  line-height: 1.25;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.paper-page {
  width: 100%;
}

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: max(0.25rem, env(safe-area-inset-top, 0px)) var(--gutter) 0;
  pointer-events: none;
}

.topbar.is-pinned {
  background: #080b0e;
  border-bottom: 1px solid #26313a;
}

.topbar__pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  max-width: calc(var(--container) - var(--gutter) * 2);
  min-height: 3rem;
  padding: 0.35rem 0.5rem 0.35rem 0.9rem;
  opacity: 0;
  transform: translateY(calc(-100% - 1.5rem));
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
  pointer-events: none;
}

.topbar.is-pinned .topbar__pill {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.topbar__brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.55rem;
  color: var(--text);
  font-weight: 700;
}

.topbar__brand:hover {
  text-decoration: none;
}

.brand-mark {
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
}

.topbar__nav {
  display: flex;
  gap: 0.25rem;
  min-width: 0;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.topbar__nav::-webkit-scrollbar {
  display: none;
}

.topbar__link {
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  color: var(--text-faint);
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  font-size: var(--step-small);
  white-space: nowrap;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.topbar__link:hover {
  background: var(--surface-hover);
  color: var(--text);
  text-decoration: none;
}

.topbar__link.active {
  background: var(--surface);
  color: var(--text);
}

/* A centered research masthead, followed by naturally sized reading sections. */
.hero { padding-block: 3rem var(--section-gap); text-align: center; }
.hero .section-inner { display: flex; flex-direction: column; align-items: center; }
.hero__title { width: 100%; margin: 0 auto 1.25rem; text-align: center; }
.hero__title-main { display: block; margin-bottom: 1rem; }
.title-design { position: relative; display: inline-block; color: #d9e5ee; font-size: clamp(3.5rem, 8vw, 5.75rem); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; font-kerning: none; font-variant-ligatures: none; white-space: nowrap; user-select: text; }
/* The text remains selectable and provides the top-lit, embossed no-JS fallback. */
.title-text { background: linear-gradient(#f0f6fa 10%, #c2d1dc 48%, #7c91a2 100%); background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: 0 3px 0 rgb(51 68 82 / 18%); }
.title-lighting { position: absolute; pointer-events: none; user-select: none; opacity: 0; }
.title-design.is-lit .title-text { background: none; color: transparent; text-shadow: none; }
.title-design.is-lit .title-lighting { opacity: 1; }
.hero__title-sub { display: block; color: #e4e8ec; font-size: clamp(1.15rem, 2.35vw, 1.85rem); line-height: 1.4; font-weight: 400; }
.publication-note { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; margin: .5rem auto 1.5rem; color: #c2d5e4; font-size: .9375rem; }
.publication-note__track { border: 1px solid #344a5c; border-radius: var(--radius-pill); padding: .125rem .625rem; font-size: .8125rem; color: #a9bfd2; }
.authors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem .75rem; width: 100%; max-width: 50rem; margin: 0 auto; padding: 0; list-style: none; color: var(--text); font-size: 1rem; line-height: 1.65; }
.authors li { white-space: nowrap; }
.authors a { color: var(--text); text-underline-offset: .2em; }
.authors sup, .affiliations sup, .author-note sup { margin-left: .08em; color: var(--link); font-size: .72em; font-weight: 700; }
.affiliations { display: flex; justify-content: center; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .75rem; color: #cbd1d9; font-size: .875rem; }
.affiliations span { white-space: nowrap; }
.author-note { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.5rem; margin-top: .5rem; color: var(--text-muted); font-size: .8125rem; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.5rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-width: 5rem; min-height: 2.75rem; padding: .625rem 1.125rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text); font-size: .9375rem; line-height: 1.3; transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .15s var(--ease); }
.button--pending { color: var(--text-muted); cursor: default; gap: .375rem; background: #111214; border-color: #292d32; }
.button--pending small { font-size: .8125rem; }
.home-link-btn, .home-link-label { gap: .5rem; }
.home-link-label { display: inline-flex; align-items: center; white-space: nowrap; }
.home-link-icon { flex: none; width: 1rem; height: 1rem; }
.hero-demo { margin-top: 2rem; scroll-margin-top: var(--anchor-offset); }
.hero-tagline { margin-bottom: 1.5rem; color: #d3dce4; font-size: clamp(1rem, 2vw, 1.2rem); }
.preview-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; margin-bottom: .75rem; }
.demo-heading h2 { grid-column: 2; color: var(--text); font-size: 1rem; font-weight: 400; text-align: center; }
.demo-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 1rem; white-space: nowrap; }
.preview-toggle { min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: transparent; color: var(--text); font: inherit; font-size: .8125rem; cursor: pointer; transition: background-color .18s var(--ease), transform .15s var(--ease); }
.demo-actions a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--text-muted); font-size: .8125rem; }
.media-frame { position: relative; overflow: hidden; width: 100%; border-radius: var(--radius-media); background: var(--surface-deep); }
.media-frame--video { aspect-ratio: 16 / 9; }
.full-demo video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.preview-caption, .method-figure figcaption { margin-top: .75rem; color: var(--text-muted); font-size: .875rem; line-height: 1.6; text-align: left; }
.preview-caption { text-align: center; }
.section { padding-block: 0 var(--section-gap); scroll-margin-top: var(--anchor-offset); }
.section__head { margin-bottom: 2rem; }
.section__head h2 { text-align: left; }
#abstract .section__head h2, #method .section__head h2, #dataset .section__head h2, #more-results .section__head h2 { text-align: center; }
.button--resource { gap: .5rem; border-color: #35536b; background: #132a3a; color: #c5e4f6; white-space: nowrap; }
.button--resource svg { flex: none; width: 1rem; height: 1rem; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.overview-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1.5rem; }
.overview-heading h2 { grid-column: 2; }
.button.insights-link { position: relative; grid-column: 3; justify-self: end; min-height: 2.25rem; padding: .375rem .75rem; gap: .375rem; font-size: .8125rem; }
.insights-link svg { width: .875rem; height: .875rem; }
/* Keep a 44px hit area around the smaller visual button. */
.insights-link::after { position: absolute; inset: -4px 0; content: ""; }
.section__lead { margin-top: 1.5rem; text-align: left; }
.prose { color: #d9dde2; }
.callout { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1.5rem; margin-top: 2rem; padding: 1.5rem; border: 1px solid #26343f; border-radius: var(--radius); background: #0c1218; }
.callout h3 { display: flex; align-items: center; align-self: stretch; padding-right: 1.25rem; border-right: 1px solid #354c5d; color: #a5d2ee; font-size: 1rem; line-height: 1.5; }
.callout p { color: #d5e0e8; font-size: 1rem; line-height: 1.65; }
.method-figure { margin-bottom: 2rem; }
.method-viewport { overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid #242b34; border-radius: var(--radius); background: var(--bg); scrollbar-color: #456174 #10171d; scrollbar-width: thin; }
.method-figure img { width: 100%; max-width: none; height: auto; }
/* Shared rows keep each group's title region and body aligned across columns. */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.method-list { margin: 0; padding: 0; list-style: none; }
.info-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 1rem; min-width: 0; padding: 1.5rem; border: 1px solid #303941; border-radius: var(--radius); background: #101418; }
.info-card .card-title { align-self: start; margin: 0; font-size: 1.25rem; line-height: 1.35; text-wrap: pretty; }
.info-card p { color: #b3bec8; font-size: 1rem; line-height: 1.65; }
.feature-heading { display: grid; grid-row: 1; align-items: center; }
.feature-heading .card-title { align-self: center; text-align: center; }
.method-grid .info-card::after { content: ""; grid-row: 2; justify-self: center; width: 35%; height: 1px; background: #405a6d; }
.method-grid .info-card > p { grid-row: 3; }
.feature-symbol { display: block; justify-self: center; width: 6rem; height: 3rem; color: #94c9e9; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.feature-symbol__quiet { stroke: #536b7d; }
.feature-symbol__light { stroke: #d4eafa; stroke-width: 2; }
.dataset-grid .card-title { text-align: center; }
@supports not (grid-template-rows: subgrid) {
  .info-card { grid-row: auto; grid-template-rows: 3rem minmax(3.375rem, auto) 1fr; }
  .method-grid .info-card { grid-template-rows: minmax(5.0625rem, auto) 1px 1fr; }
}
.dataset-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; }
.dataset-heading h2 { grid-column: 2; }
.dataset-link { grid-column: 3; justify-self: end; text-align: center; }
.dataset-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 2rem; padding-block: 1.5rem; border-block: 1px solid #303941; }
.dataset-summary p { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding-inline: 1.5rem; text-align: center; }
.dataset-summary p + p { border-left: 1px solid #303941; }
.dataset-summary strong { font-size: 2rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.dataset-summary span { color: var(--text-muted); font-size: .875rem; }
.footer { padding-bottom: 2rem; color: var(--text-muted); font-size: .875rem; text-align: center; }
.footer p { padding-top: 1.5rem; border-top: 1px solid #303941; }
video:fullscreen { object-fit: contain; }
video:-webkit-full-screen { object-fit: contain; }
.skip-link { position: fixed; top: .5rem; left: 1rem; z-index: 100; padding: .75rem 1rem; border-radius: var(--radius-sm); background: #1d3548; color: #fff; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
::selection { background: #244e6b; color: #f5faff; }
.gallery-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; margin-top: 1.4rem; }
.gallery-sync { position: relative; grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .55rem .8rem; border: 1px solid #2c3b4b; border-radius: 999px; background: #0c1219; color: #bbd0e2; font-size: .82rem; white-space: nowrap; cursor: pointer; }
.gallery-sync input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.gallery-sync__track { position: relative; flex: none; width: 2.1rem; height: 1.2rem; border-radius: 999px; background: #3c4652; transition: background-color .15s; }
.gallery-sync__track::before { position: absolute; top: .175rem; left: .175rem; width: .85rem; height: .85rem; border-radius: 50%; background: #e2eaf2; content: ""; transition: transform .15s; }
.gallery-sync input:checked + .gallery-sync__track { background: #267bb6; }
.gallery-sync input:checked + .gallery-sync__track::before { transform: translateX(.9rem); }
.gallery-sync input:focus-visible + .gallery-sync__track { outline: 2px solid #99d4ff; outline-offset: 4px; }
.gallery-page { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.4rem, 1.5vw, 1rem); }
.gallery-page[hidden] { display: none; }
.jcam-card { min-width: 0; margin: 0; }
.jcam-card video { display: block; width: 100%; aspect-ratio: 17 / 30; border-radius: 4px; background: #000; object-fit: contain; }
.gallery-controls { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: .85rem; }
.gallery-tabs { display: flex; gap: .15rem; padding: .3rem; border: 1px solid #242b34; border-radius: 999px; background: var(--surface-deep); }
.gallery-tab { width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #99a5b6; font: inherit; font-size: .8rem; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.gallery-tab:hover { color: var(--text); background: #20252d; }
.gallery-tab[aria-selected="true"] { color: #c5e6ff; background: #1b354b; box-shadow: inset 0 0 0 1px #3a6889; }
.gallery-arrow { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid #313943; border-radius: 50%; background: transparent; color: #d2dce6; cursor: pointer; }
.gallery-arrow:hover:not(:disabled) { background: #18212c; border-color: #58728b; }
.gallery-arrow:disabled { opacity: .3; cursor: default; }
.gallery-arrow svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.acknowledgments-copy { display: grid; gap: 1rem; }
.citation-box { overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-deep); }
.citation-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid #272b31; }
.citation-format { color: var(--text-muted); font-size: .8125rem; letter-spacing: .04em; }
.citation-copy { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 5.4rem; min-height: 2.75rem; padding: .4rem .65rem; border: 1px solid #3b4653; border-radius: 7px; background: #181e27; color: #c3d0df; font: inherit; font-size: .75rem; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.citation-copy:hover { background: #24303c; }
.citation-copy svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.citation-copy .check-icon { display: none; }
.citation-copy[data-state="copied"] { background: #14382d; border-color: #39745f; color: #9aebc6; }
.citation-copy[data-state="copied"] .copy-icon { display: none; }
.citation-copy[data-state="copied"] .check-icon { display: block; }
.citation-copy[data-state="selected"] { background: #352b18; border-color: #796740; color: #ebd2a0; }
.citation-code { margin: 0; padding: 1.25rem; color: var(--text); font: .82rem/1.8 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.citation-code code { font: inherit; }

/* Pointer feedback stays quiet and never becomes a sticky hover on touch. */
@media (hover: hover) and (pointer: fine) {
  .button:not(.button--pending):hover { background: var(--surface-hover); border-color: var(--border-strong); transform: translateY(-1px); text-decoration: none; }
  .preview-toggle:hover { background: var(--surface); }
  .button.button--resource:hover { border-color: #527e9e; background: #1a394e; color: #e5f4ff; }
  .authors a:hover { color: var(--link); }
}
.button:not(.button--pending):active, .preview-toggle:active { transform: scale(.98); }
@media (max-width: 52rem) {
  .overview-heading h2 { max-width: 20rem; }
  .card-grid { grid-template-columns: minmax(0, 1fr); }
  .info-card { grid-row: auto; grid-template-rows: auto auto auto; }
  .authors { font-size: .9375rem; }
  .gallery-footer { grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; gap: .75rem; }
  .gallery-controls { display: contents; }
  .gallery-tabs { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .gallery-arrow { grid-column: 1; grid-row: 2; }
  .gallery-arrow:last-child { grid-column: 3; }
  .gallery-sync { grid-column: 2; grid-row: 2; justify-self: center; }
}
@media (max-width: 44rem) {
  .topbar { display: none; }
  .hero { padding-top: 2rem; }
  .hero__title-sub { font-size: 1.15rem; }
  .hero__br--wide { display: none; }
  .authors { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 24rem; gap: .5rem .75rem; font-size: .875rem; }
  .affiliations { font-size: .8125rem; gap: .25rem .75rem; }
  .home-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 23rem); }
  .home-link-btn:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - .5rem) / 2); }
  .button { min-width: 0; padding-inline: .75rem; }
  .button--pending { flex-wrap: wrap; gap: .125rem .375rem; }
  .hero-tagline { max-width: 22rem; margin-inline: auto; }
  .preview-heading { grid-template-columns: 1fr; gap: .5rem; }
  .demo-heading h2, .demo-actions { grid-column: 1; justify-self: center; }
  .demo-actions { gap: .75rem; }
  .section__head { margin-bottom: 1.5rem; }
  h2 { font-size: 1.75rem; line-height: 1.2; }
  .overview-heading { grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; }
  .overview-heading h2 { grid-column: 1; max-width: none; font-size: clamp(1.25rem, 6.25vw, 1.75rem); }
  .button.insights-link { grid-column: 2; }
  .callout { grid-template-columns: 1fr; gap: .75rem; padding: 1.25rem; }
  .callout h3 { padding: 0; border: 0; }
  .method-viewport > img { width: 940px; }
  .dataset-heading { gap: .75rem; }
  .dataset-link { width: max-content; max-width: 100%; padding: .25rem .5rem; font-size: .8125rem; line-height: 1.15; white-space: normal; }
  .dataset-link svg { display: none; }
  .dataset-summary { grid-template-columns: 1fr; padding: 0; }
  .dataset-summary p { padding: 1.25rem 0; }
  .dataset-summary p + p { border-left: 0; border-top: 1px solid #303941; }
  .gallery-tabs { justify-self: stretch; padding: .25rem; gap: 0; }
  .gallery-tab { flex: 1; width: auto; min-width: 0; }
  .citation-code { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .button:not(.button--pending):hover, .button:not(.button--pending):active, .preview-toggle:active { transform: none; }
}