:root {
  --ink: #222831;
  --muted: #667085;
  --navy: #1d3657;
  --teal: #267d78;
  --line: #dfe4ea;
  --soft: #f5f7f9;
  --white: #ffffff;
  --max: 960px;
  --narrow: 780px;
  --sans: "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, video { display: block; width: 100%; }
a { color: inherit; }
.container { width: min(calc(100% - 2rem), var(--max)); margin-inline: auto; }
.container.narrow { max-width: var(--narrow); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.skip-link { position: fixed; top: -4rem; left: 1rem; z-index: 10; padding: .6rem 1rem; color: white; background: var(--navy); }
.skip-link:focus { top: 1rem; }

.publication-header { padding: 3.4rem 0 2.1rem; text-align: center; }
.publication-header h1 { max-width: 940px; margin: 0 auto 1.15rem; color: #151a21; font-family: var(--serif); font-size: clamp(2.15rem, 5vw, 3rem); font-weight: 700; line-height: 1.14; letter-spacing: -.025em; }
.authors, .affiliations { display: flex; flex-wrap: wrap; justify-content: center; column-gap: .42rem; }
.authors { color: var(--navy); font-size: 1.05rem; font-weight: 600; }
.affiliations { max-width: 880px; margin: .35rem auto 0; color: #4b5565; font-size: .92rem; }
sup { color: var(--teal); font-weight: 700; }
.author-note { margin: .2rem 0 0; color: var(--muted); font-size: .88rem; }
.publication-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.25rem; }
.pill { display: inline-flex; align-items: center; gap: .35rem; min-height: 39px; padding: .5rem .95rem; border: 1px solid #111820; border-radius: 999px; color: white; background: #242b33; text-decoration: none; font-size: .88rem; font-weight: 700; }
.pill:hover, .pill:focus-visible { background: var(--navy); }
.pill small { font-size: .72rem; font-weight: 500; opacity: .72; }
.pill.disabled { cursor: not-allowed; background: #59616b; border-color: #59616b; }

.teaser { padding-bottom: 2.5rem; text-align: center; }
.teaser img { border: 1px solid var(--line); border-radius: 6px; }
.teaser p { max-width: 860px; margin: .75rem auto 0; color: #434b57; font-size: .96rem; line-height: 1.5; }
.section { padding: 2.8rem 0; }
.section.compact { padding-top: 2.1rem; padding-bottom: 2.1rem; }
h2 { margin: 0 0 1.25rem; color: #151a21; font-family: var(--serif); font-size: 1.95rem; line-height: 1.2; text-align: center; }
.section-intro { margin-bottom: 1.25rem; text-align: center; }
.section-intro h2 { margin-bottom: .25rem; }
.section-intro p { margin: 0; color: var(--muted); }
.muted-band { background: var(--soft); border-block: 1px solid #edf0f3; }

video { border-radius: 5px; background: #000; box-shadow: 0 4px 18px rgba(20, 31, 45, .12); }
.demo-group + .demo-group { margin-top: 2rem; }
.demo-group h3 { margin: 0 0 .85rem; color: var(--navy); font-family: var(--serif); font-size: 1.25rem; text-align: center; }
.demo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.demo-card { overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: white; }
.demo-media { position: relative; background: #111; }
.demo-media video { aspect-ratio: 16 / 9; border-radius: 0; box-shadow: none; object-fit: cover; }
.interface-card .demo-media video { object-fit: contain; }
.video-badge { position: absolute; top: .65rem; left: .65rem; z-index: 1; padding: .28rem .55rem; border-radius: 4px; color: white; background: rgba(29, 54, 87, .9); font-size: .73rem; font-weight: 700; line-height: 1.2; }
.demo-copy { padding: .85rem 1rem 1rem; }
.demo-copy h4 { margin: 0 0 .2rem; color: #202730; font-family: var(--serif); font-size: 1.05rem; }
.demo-copy p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.45; }

.prose { color: #303743; text-align: justify; }
.prose p { margin: 0 0 .85rem; }
.prose p:last-child { margin-bottom: 0; }
.figure { margin: 0; }
.figure img { border: 1px solid var(--line); border-radius: 5px; background: white; }
.figure figcaption { max-width: 880px; margin: .65rem auto 0; color: #596273; font-size: .9rem; line-height: 1.5; text-align: center; }

.highlights { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 2rem; border: 1px solid var(--line); border-radius: 6px; background: white; }
.highlights div { padding: 1rem .75rem; text-align: center; border-right: 1px solid var(--line); }
.highlights div:last-child { border-right: 0; }
.highlights strong { display: block; color: var(--teal); font-family: var(--serif); font-size: 1.7rem; line-height: 1.15; }
.highlights span { display: block; margin-top: .25rem; color: var(--muted); font-size: .74rem; line-height: 1.35; }
.result-figures { display: grid; gap: 2.2rem; }
.result-figures .figure:first-child { max-width: 760px; margin-inline: auto; }

.compact p { margin: 0; color: #3d4652; text-align: center; }
.bibtex { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--soft); }
pre { min-width: 680px; margin: 0; padding: 1.25rem; color: #263343; font: .82rem/1.55 "SFMono-Regular", Consolas, monospace; }
.bibtex button { position: absolute; top: .7rem; right: .7rem; padding: .35rem .7rem; border: 1px solid #aeb7c2; border-radius: 4px; color: #303944; background: white; cursor: pointer; }
.bibtex button:hover, .bibtex button:focus-visible { border-color: var(--navy); }
footer { padding: 1.6rem 1rem 2.4rem; color: #8a929d; font-size: .82rem; text-align: center; }
footer p { margin: 0; }
.visit-counter { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (max-width: 760px) {
  .publication-header { padding-top: 2.2rem; }
  .authors { line-height: 1.7; }
  .highlights { grid-template-columns: repeat(2, 1fr); }
  .highlights div:nth-child(2) { border-right: 0; }
  .highlights div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 460px) {
  .container { width: min(calc(100% - 1.25rem), var(--max)); }
  .publication-header h1 { font-size: 2rem; }
  .authors { font-size: .96rem; }
  .affiliations { font-size: .85rem; }
  .section { padding: 2.25rem 0; }
  h2 { font-size: 1.7rem; }
  .demo-grid { grid-template-columns: 1fr; }
}