:root { --ink: #202124; --muted: #667085; --line: #cbdde8; --wash: #f3f9fc; --accent: #75b9d6; --accent-light: #dff3fa; --accent-dark: #4d9fc3; }
html { font-size: 15px; scroll-behavior: smooth; }
body { font-family: 'Noto Sans', sans-serif; color: var(--ink); overflow-x: hidden; font-size: .95rem; }
.page-width { max-width: 1120px !important; }
.publication-header .hero-body { padding: 3rem 1.5rem 2.2rem; }
.publication-title { font-family: 'Google Sans', sans-serif; font-size: clamp(2rem, 4vw, 3.25rem) !important; line-height: 1.08; margin: 0 auto 1rem; max-width: 900px; }
.publication-authors { font-family: 'Google Sans', sans-serif; font-size: 1.05rem; }
.author-note { color: var(--muted); font-size: .82rem; margin-top: .35rem; }
.publication-venue { color: #555; width: fit-content; font-weight: 600; margin: .75rem auto 0; background: #eef6ff; border: 1px solid #d6e8ff; padding: .2rem .6rem; border-radius: 9999px; font-size: .82rem; }
.publication-links { margin-top: 1rem; }
.publication-links .button { margin: 3px; font-size: .82rem; }
.publication-links .button.is-dark { background: var(--accent-light); color: #15313b; border: 1px solid #9fcfe0; }
.publication-links .button.is-dark:hover { background: var(--accent-dark); color: #fff; }
.is-disabled { opacity: .5; pointer-events: none; }
.teaser { padding: 0 1.5rem 1.5rem; }
.teaser-frame { border: 0; border-radius: 10px; background: transparent; padding: .25rem; max-width: 760px; margin: 0 auto; }
.teaser-frame img { display: block; width: 100%; max-height: 310px; object-fit: contain; }
.teaser-caption { color: var(--muted); font-size: .84rem; margin: .65rem auto 0; max-width: 720px; }
.abstract-band { background: var(--wash); border-bottom: 1px solid var(--line); padding: 2.3rem 1.5rem 4rem; }
.section { padding: 3.4rem 1.5rem; }
.gray-section { background: var(--wash); border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; }
.section-heading { margin-bottom: 1.45rem; }
.section-heading > span { color: var(--accent); font-size: .73rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.section-heading h2 { font-family: 'Google Sans', sans-serif; font-size: 1.7rem; line-height: 1.2; margin-top: .3rem; margin-bottom: 0; }
.content { line-height: 1.65; }
.content p { margin-bottom: .9rem; }
.equation { overflow-x: auto; text-align: center; margin: 1rem 0; font-size: 1.05rem; }
.two-column, .abstract-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.three-column { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.method-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); gap: 1.5rem; align-items: center; margin-bottom: 1.2rem; }
.method-intro ol { margin: .7rem 0 1rem 1.2rem; }
.method-intro li { margin-bottom: .4rem; }
.equation-box { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 1rem; text-align: center; }
.equation-box > span { color: var(--accent-dark); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.equation-box small { color: var(--muted); font-size: .75rem; }
.stat-box, .result-box, .info-box, .comparison-box, pre { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.stat-box { padding: 1.25rem 1.4rem; }
.stat-box strong, .result-box strong { display: block; font-family: 'Google Sans', sans-serif; color: var(--accent); font-size: 1.5rem; line-height: 1.1; }
.stat-box span, .result-box span { display: block; color: var(--muted); font-size: .78rem; margin-top: .25rem; }
.stat-box hr { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }
.comparison-box { padding: .8rem; }
.comparison-videos { display: block; width: fit-content; max-width: 100%; margin: 0 auto; padding: 0; border: 1px solid var(--line); background: #fff; }
.comparison-video { display: block; width: 250px; max-width: 100%; max-height: 250px; min-height: 170px; margin: 0 auto; border-radius: 8px; background: #000; object-fit: contain; }
.comparison-row { display: grid; grid-template-columns: 86px 1fr; gap: .75rem; align-items: center; border-bottom: 1px solid #edf0f2; padding: .5rem 0; }
.comparison-row:last-child { border-bottom: 0; }
.comparison-row img { width: 86px; height: 100px; object-fit: cover; border-radius: 5px; }
.comparison-row span { color: var(--muted); font-size: .78rem; }
.method-figure { margin: 1.4rem auto 1.5rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: .75rem; }
.method-figure img { max-width: 100%; max-height: 410px; display: block; margin: auto; object-fit: contain; }
.info-box { padding: 1.1rem; }
.box-number { color: var(--accent-dark); font-weight: 700; font-size: .76rem; }
.info-box h3 { font-family: 'Google Sans', sans-serif; font-size: 1.05rem; margin: .35rem 0; }
.info-box p { color: var(--muted); font-size: .82rem; line-height: 1.5; }
.material-list { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.1rem; }
.material-list span { border: 1px solid var(--line); border-radius: 999px; padding: .25rem .6rem; color: var(--muted); font-size: .75rem; background: #fff; }
.material-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: .65rem; }
.material-gallery img { width: 100%; height: 190px; object-fit: cover; border-radius: 7px; border: 1px solid var(--line); }
.result-box { padding: 1.25rem; }
.result-box strong { font-size: 3rem; }
.result-box p { color: var(--muted); font-size: .82rem; margin-top: 1rem; line-height: 1.55; }
.result-figure, .setup-figure { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: .8rem; }
.result-figure img, .setup-figure img { display: block; max-width: 100%; width: 100%; object-fit: contain; }
.result-figure img { max-height: 270px; }
.section-lede { color: var(--muted); margin-top: -.8rem; margin-bottom: 1.2rem; }
.video-section { background: #f4f5f6; }
.policy-video-grid { display: grid; grid-template-columns: 135px repeat(3, 1fr); gap: .75rem; align-items: stretch; }
.grid-label, .policy-label { font-size: .76rem; font-weight: 700; color: var(--muted); padding: .3rem .2rem; }
.grid-label { text-align: center; text-transform: uppercase; letter-spacing: .07em; }
.policy-label { display: flex; align-items: center; }
.video-placeholder { min-height: 145px; border: 1px dashed #9fc9dc; border-radius: 9px; background: #fbfeff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; color: #78adc2; }
.policy-video-grid .video-placeholder { padding: 0; overflow: hidden; border-style: solid; }
.policy-video-grid .video-placeholder { aspect-ratio: 4 / 3; min-height: 0; }
.policy-video-grid .video-placeholder video { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: transparent; }
.video-placeholder i { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #c7cdd5; border-radius: 50%; font-size: .75rem; }
.video-placeholder span { font-size: .72rem; color: var(--muted); }
pre { padding: 1rem; overflow-x: auto; font-size: .78rem; }
.footer { padding: 2rem 1.5rem; font-size: .8rem; color: var(--muted); }
main > .section.gray-section { background: #fff; }
main > .section:not(.gray-section):not(#bibtex) { background: var(--wash); border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; }
main > .section.video-section { background: #fff; }
main > .section:nth-of-type(1) { background: #fff !important; }
main > .section:nth-of-type(2) { background: var(--wash); border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; }
@media (max-width: 760px) { .two-column, .abstract-grid, .method-intro { grid-template-columns: 1fr; gap: 1.2rem; } .three-column { grid-template-columns: 1fr; } .material-gallery { grid-template-columns: repeat(2, 1fr); } .material-gallery img { height: 160px; } .policy-video-grid { grid-template-columns: 92px repeat(3, minmax(0, 1fr)); gap: .4rem; } .video-placeholder { min-height: 105px; } .policy-label, .grid-label { font-size: .65rem; } }