:root {
  --ink: #1e2933;
  --muted: #63717c;
  --blue: #166aa9;
  --blue-light: #eaf3f8;
  --line: #dbe2e7;
  --surface: #f7f9fa;
  --body-font: "Avenir Next", "Segoe UI", sans-serif;
  --title-font: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono-font: "SFMono-Regular", Consolas, monospace;
  --content-width: 1200px;
  --readable-copy: clamp(17px, 1.35vw, 19px);
  --caption-copy: clamp(15px, 1.2vw, 17px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: var(--body-font); font-size: 16px; line-height: 1.65; }
a { color: var(--blue); }
img { display: block; max-width: 100%; }
strong { font-weight: 700; }

.container { width: min(var(--content-width), calc(100% - 44px)); margin-inline: auto; }
.narrow { width: min(var(--content-width), calc(100% - 44px)); }
.hero { padding: 72px 0 45px; text-align: center; }
.venue { margin: 0 0 10px; color: var(--blue); font-size: 15px; font-weight: 700; }
h1, h2, h3 { color: var(--ink); font-family: var(--title-font); font-weight: 600; line-height: 1.15; }
h1 { max-width: 1020px; margin: 0 auto 19px; font-size: clamp(32px, 4vw, 52px); letter-spacing: -.025em; }
h2 { margin: 0 0 20px; font-size: 31px; text-align: center; }
h3 { margin: 0 0 9px; font-size: 22px; }
.authors { margin: 0; color: var(--blue); font-size: 21px; font-weight: 600; line-height: 1.55; }
.authors sup { margin-left: 1px; color: var(--ink); font-size: .68em; }
.author-notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 6px 0 20px; color: var(--muted); }
.author-notes sup { color: var(--ink); font-size: .72em; font-weight: 600; }
.affiliation { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 1px 0 0; color: var(--muted); }
.affiliation, .author-notes { font-size: 17px; font-weight: 400; line-height: 1.5; }
.affiliation sup { margin-right: 2px; color: var(--ink); font-size: .72em; font-weight: 700; }
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.link-button { display: inline-block; min-width: 91px; padding: 7px 15px; color: #fff; background: var(--blue); border: 1px solid var(--blue); border-radius: 5px; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s ease, transform .15s ease; }
.link-button:hover { background: #0d578d; transform: translateY(-1px); }
.link-button.disabled { color: var(--muted); background: var(--surface); border-color: var(--line); cursor: not-allowed; }
.link-button.disabled:hover { background: var(--surface); transform: none; }

.project-video-section, .project-overview { padding: 0 0 54px; }.project-video { margin-bottom: 34px; overflow: hidden; background: #000; border: 1px solid var(--line); }.project-video video { display: block; width: 100%; height: auto; }.teaser { margin: 0; }.teaser > a, figure > a { display: block; }.teaser img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); }.caption, figcaption { margin: 12px 0 0; color: var(--muted); font-size: var(--caption-copy); line-height: 1.78; }.caption strong, figcaption strong { color: var(--ink); }
.abstract { padding: 40px 0 66px; border-top: 1px solid var(--line); text-align: center; }.abstract p { margin: 0; color: #394752; font-size: var(--readable-copy); line-height: 1.78; text-align: left; }
.section { padding: 58px 0; border-top: 1px solid var(--line); }.section-intro { max-width: var(--content-width); margin: -4px auto 29px; color: #45535e; font-size: var(--readable-copy); line-height: 1.78; text-align: left; }

.method-intro { max-width: var(--content-width); font-size: var(--readable-copy); line-height: 1.78; }.wide-figure, .human-data-pair figure, .result-grid figure, .hardware-layout figure { margin: 0; }.wide-figure { max-width: var(--content-width); margin-inline: auto; }.wide-figure img, .human-data-pair img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); }.human-data-pair img { width: 100%; }.method-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: var(--content-width); margin: 34px auto 0; }.method-card { padding: 22px 21px; background: var(--surface); border: 1px solid var(--line); }.method-card-index { display: block; margin-bottom: 13px; color: var(--blue); font-family: var(--mono-font); font-size: 12px; font-weight: 700; }.method-card h3 { margin-bottom: 12px; font-size: 23px; }.method-card p { margin: 0; color: #4d5b65; font-size: var(--readable-copy); line-height: 1.65; }
.human-data-intro { max-width: var(--content-width); }.human-data-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; max-width: var(--content-width); margin: 38px auto 0; }.human-videos { max-width: var(--content-width); margin: 48px auto 0; }.human-videos h3 { margin-bottom: 12px; font-size: 25px; text-align: center; }.human-video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.table-scroll { overflow-x: auto; border: 1px solid var(--line); }.table-scroll table { min-width: 760px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; } th { color: #33424d; background: var(--surface); font-size: 13px; font-weight: 700; } thead tr:first-child th:first-child, tbody td:first-child { text-align: left; } tbody tr:last-child td { border-bottom: 0; }.ours td { color: #0a548b; font-weight: 700; background: var(--blue-light); }
.mechanism-ablation-section { margin-top: 52px; }.mechanism-ablation-section > h3, .cross-hand-block h3, .quality-block h3 { margin-bottom: 22px; font-size: 25px; text-align: center; }.mechanism-ablation-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 40px; align-items: center; }.mechanism-figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); }.cross-hand-block, .quality-block { margin-top: 52px; }.table-intro { max-width: var(--content-width); margin: 0 auto 22px; color: var(--muted); font-size: var(--readable-copy); line-height: 1.78; text-align: left; }.ablation-table { min-width: 0 !important; font-size: 12px; }.ablation-table th, .ablation-table td { padding: 8px 7px; }.quality-table { min-width: 1120px !important; font-size: 13px; }.quality-table th, .quality-table td { padding: 9px 8px; }
.task-videos, .real-videos { margin-top: 52px; }.task-videos h3, .real-videos h3 { margin-bottom: 12px; font-size: 25px; text-align: center; }.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }.video-card { overflow: hidden; border: 1px solid var(--line); background: var(--surface); }.video-frame { background: #eef2f4; }.video-placeholder { display: grid; min-height: 0; aspect-ratio: 16 / 9; place-items: center; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; letter-spacing: .02em; }.video-frame video { display: block; width: 100%; height: auto; }.video-card h4 { margin: 14px 16px 2px; font-family: var(--body-font); font-size: 16px; font-weight: 700; line-height: 1.35; }.video-card p { margin: 0 16px 15px; color: var(--muted); font-size: 13px; }.task-video-selector { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 18px; }.task-video-selector label { color: var(--ink); font-size: 14px; font-weight: 600; }.task-video-selector select { min-width: 176px; padding: 7px 30px 7px 10px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 4px; font: 15px var(--body-font); }.task-video-player { max-width: var(--content-width); margin: 0 auto; overflow: hidden; background: #000; border: 1px solid var(--line); }.task-video-player video { display: block; width: 100%; height: auto; }.task-video-status { margin: 12px auto 0; color: var(--muted); font-size: var(--caption-copy); line-height: 1.78; text-align: center; }

.hardware-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 40px; align-items: center; }.hardware-layout figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); }.hardware-copy { color: #42505b; font-size: var(--readable-copy); line-height: 1.78; }.hardware-copy > p { margin: 0 0 20px; font-size: var(--caption-copy); }.hardware-copy dl { display: grid; gap: 0; margin: 0; border: 1px solid var(--line); }.hardware-copy dl div { display: flex; justify-content: space-between; padding: 10px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }.hardware-copy dl div:last-child { border-bottom: 0; }.hardware-copy dt { color: var(--ink); font-size: 14px; font-weight: 600; }.hardware-copy dd { margin: 0; color: var(--blue); font-family: var(--mono-font); font-size: 14px; font-weight: 700; }

.citation { padding: 58px 0 66px; border-top: 1px solid var(--line); text-align: center; }.citation > p { margin: -4px auto 21px; color: var(--muted); font-size: var(--readable-copy); line-height: 1.78; }.citation-box { position: relative; max-width: var(--content-width); margin: auto; padding: 17px 68px 17px 18px; overflow-x: auto; text-align: left; background: var(--surface); border: 1px solid var(--line); }.citation pre { margin: 0; font-family: var(--mono-font); font-size: 12px; line-height: 1.55; white-space: pre; }.citation button { position: absolute; top: 12px; right: 12px; padding: 5px 9px; color: var(--blue); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; background: #fff; font: 600 12px var(--body-font); }.citation button:hover { background: var(--blue-light); }
.footer { display: flex; justify-content: space-between; gap: 24px; padding: 21px 0 34px; color: var(--muted); border-top: 1px solid var(--line); font-size: 12px; }.footer p { margin: 0; }.footer a { font-weight: 600; text-decoration: none; }
.toast { position: fixed; right: 20px; bottom: 20px; padding: 9px 12px; color: #fff; background: var(--ink); border-radius: 4px; font-size: 13px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .18s ease, transform .18s ease; }.toast.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 760px) {
  .container, .narrow { width: min(100% - 28px, var(--content-width)); }.hero { padding-top: 48px; }.hero h1 { font-size: 32px; }.venue { font-size: 14px; }.affiliation { font-size: 13px; }.project-video-section, .project-overview { padding-bottom: 42px; }.abstract { padding: 34px 0 49px; }.section, .citation { padding: 47px 0; } h2 { font-size: 27px; }.abstract p, .section-intro, .table-intro, .hardware-copy, .citation > p { font-size: 17px; }.abstract p, .section-intro { text-align: left; }.method-intro, .method-card p { font-size: 17px; }.human-data-pair, .human-video-grid, .method-cards, .mechanism-ablation-layout, .hardware-layout, .video-grid { grid-template-columns: 1fr; gap: 27px; }.method-cards { margin-top: 27px; }.method-card { padding: 19px; }.mechanism-ablation-section, .cross-hand-block, .quality-block, .task-videos, .real-videos { margin-top: 42px; }.mechanism-ablation-section > h3 { margin-bottom: 18px; }.task-video-selector { align-items: stretch; flex-direction: column; }.task-video-selector select { width: 100%; }.task-video-status { text-align: left; }.citation { padding-bottom: 51px; }.citation-box { padding: 15px 13px; }.citation button { position: static; margin-top: 12px; }.citation pre { font-size: 10px; }.footer { flex-direction: column; gap: 4px; }.footer a { align-self: flex-start; }
}