@font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/google-sans-400.ttf') format('truetype'); }
@font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/google-sans-500.ttf') format('truetype'); }
@font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/google-sans-700.ttf') format('truetype'); }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/noto-sans-400.ttf') format('truetype'); }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/noto-sans-600.ttf') format('truetype'); }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/noto-sans-700.ttf') format('truetype'); }
:root { color-scheme: light; --text: #4a4a4a; --link: #209cee; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 20px auto 0; background: white; color: var(--text); font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.5; }
main { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
a { color: var(--link); text-decoration: none; }
a:hover { color: #1675aa; text-decoration: underline; }
a:focus-visible, button:focus-visible, video:focus-visible, .table-wrap:focus-visible { outline: 3px solid #209cee; outline-offset: 4px; }
.paper-header { text-align: center; padding: 48px 24px 42px; }
h1 { font-family: 'Google Sans', sans-serif; font-size: 48px; font-weight: 700; line-height: 1.125; letter-spacing: -.025em; color: #111; margin: 0 auto 28px; max-width: 1120px; }
h1 span { color: inherit; }
.authors { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 8px; font-family: 'Google Sans', sans-serif; font-size: 20px; color: #209cee; }
.authors span:not(:last-child)::after { content: ','; color: #4a4a4a; }
.affiliation { margin: 8px 0 20px; font-family: 'Google Sans', sans-serif; font-size: 20px; }
.resources { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 20px 0 0; }
.resources a, .resources button { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 42px; padding: 9px 20px; border-radius: 999px; border: 1px solid #363636; background: #363636; color: #fff; font: 400 17px/1.25 'Noto Sans', sans-serif; text-decoration: none; white-space: nowrap; }
.resources a:hover { background: #292929; border-color: #292929; }
.resources button:disabled { opacity: 1; cursor: default; }
.resources small { font-size: 11px; margin-left: 4px; color: #e0e0e0; }
.resources svg { width: 19px; height: 19px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
section { margin: 0 auto 50px; scroll-margin-top: 28px; }
h2 { color: #363636; font-size: 32px; line-height: 1.125; font-weight: 600; margin: 0 0 24px; text-align: left; }
h3 { color: #363636; font-size: 23px; line-height: 1.3; font-weight: 600; margin: 32px 0 16px; }
p { margin: 0 0 20px; }
.overview { padding-bottom: 42px; border-bottom: 1px solid #eee; }
.overview-frame { width: 75%; margin: 0 auto; }
video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #fff; border-radius: 0; }
.teaser-caption { font-family: 'Google Sans', sans-serif; font-size: 20px; line-height: 1.5; text-align: justify; max-width: 1056px; margin: 25px auto 0; }
.teaser-heading { display: block; margin: 32px auto 20px; color: #252525; font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; line-height: 1.4; letter-spacing: -.02em; text-align: center; text-wrap: balance; }
.teaser-perceive { color: #276291; }
.teaser-move { color: #76528f; }
.text-section { max-width: 900px; }
#abstract { max-width: 800px; margin-bottom: 58px; }
#abstract h2 { text-align: center; }
#abstract p { font-size: 15px; line-height: 1.55; text-align: justify; }
.section-intro { text-align: left; }
figure { margin: 24px 0 42px; }
figure img { display: block; width: 100%; height: auto; }
figcaption { margin-top: 14px; font-size: 16px; line-height: 1.6; text-align: justify; }
figure h3 { text-align: center; font-size: 20px; font-weight: 500; margin: 0 0 16px; }
.figure-enlarge { display: block; cursor: zoom-in; }
.figure-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; margin-top: 9px; }
.method-figure { max-width: 1000px; margin-inline: auto; }
.comparison-figure { max-width: 750px; margin-inline: auto; }
.wide-demo { max-width: 920px; margin-inline: auto; }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.demo-grid figure { margin-top: 0; }
.table-wrap { overflow-x: auto; margin: 24px 0 32px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
th, td { padding: 10px 14px; text-align: right; white-space: nowrap; }
th:first-child { text-align: left; }
thead { border-top: 2px solid #363636; border-bottom: 1px solid #777; }
tbody { border-bottom: 2px solid #363636; }
tbody th { font-weight: 400; }
tbody tr:nth-child(even) { background: #fafafa; }
caption { caption-side: bottom; padding-top: 10px; text-align: left; font-size: 14px; }
.citation-box { background: #f5f5f5; padding: 40px 24px 22px; position: relative; }
pre { margin: 0; overflow-x: auto; font: 14px/1.5 monospace; color: #4a4a4a; }
#copy-citation { position: absolute; right: 12px; top: 10px; padding: 4px 12px; color: #4a4a4a; border: 1px solid #ddd; background: white; cursor: pointer; }
.copy-status { font-size: 13px; margin: 5px 0 0; min-height: 20px; }
footer { background: #fafafa; text-align: center; padding: 40px 24px 55px; font-size: 14px; }
footer p { margin: 0; }
@media (max-width: 760px) {
 body { margin-top: 0; }
 main { padding: 0 20px; }
 .paper-header { padding: 36px 0 30px; }
 h1 { font-size: 34px; line-height: 1.18; }
 .authors, .affiliation { font-size: 18px; }
 .resources { gap: 8px; }
 .resources a, .resources button { font-size: 16px; padding: 9px 16px; }
 .resources small { font-size: 10px; }
 .overview-frame { width: 100%; }
 .teaser-caption { font-size: 18px; text-align: left; }
 .teaser-heading { margin-top: 24px; }
 .teaser-heading br { display: none; }
 #abstract p, figcaption { text-align: left; }
 h2 { font-size: 28px; }
 .demo-grid { grid-template-columns: 1fr; gap: 0; }
 th, td { padding: 9px; font-size: 13px; }
 pre { font-size: 12px; }
}
@media (max-width: 440px) {
 .resources { display: grid; grid-template-columns: 1fr 1fr; }
 .resources a, .resources button { padding: 9px 10px; gap: 7px; }
 .resources button > span { display: flex; flex-direction: column; }
 .resources small { margin: 2px 0 0; }
 h1 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }