:root { --pc-blue: #1772d0; --pc-ink: #28313c; --pc-muted: #667180; --pc-line: #e1e7ed; --pc-green: #087660; }
html { scroll-behavior: smooth; }
body { color: var(--pc-ink); }
.skip-link { position: absolute; top: -80px; left: 10px; padding: 10px; background: white; z-index: 30; }
.skip-link:focus { top: 10px; }
.top-bar { border-bottom: 1px solid var(--pc-line); padding: .8rem 1.2rem; font-size: .9rem; text-align: center; }
.top-bar a { margin: 0 .6rem; }
.hero-body { padding: 3rem 1.5rem 2rem; }
.publication-title { max-width: 900px; margin: 0 auto 1rem; font-size: 2.7rem !important; line-height: 1.16; }
.hero-subtitle { font-size: 1.15rem; max-width: 730px; margin: 0 auto 1.1rem; line-height: 1.55; color: var(--pc-muted); }
.publication-affiliation { font-size: 1rem; margin-top: .35rem; }
.publication-venue { font-size: .95rem; }
.jump-nav { display: flex; gap: .7rem 1.1rem; justify-content: center; flex-wrap: wrap; max-width: 880px; margin: 1.4rem auto 0; font-size: .9rem; }
.hero.teaser { padding: 0 1.5rem; }
.hero.teaser .container { max-width: 1060px; }
.teaser-media img { border: 1px solid var(--pc-line); border-radius: 14px; width: 100%; }
.paper-figure { margin: 0; }
.paper-figure-caption { max-width: 900px; margin: 1rem auto 0; font-size: .9rem; line-height: 1.7; text-align: left; }
.paper-figure-caption p { margin-bottom: .8rem; }
.section { padding: 2.5rem 1.5rem; }
.section:nth-of-type(even) { background: #fbfcfd; }
.reading-width { max-width: 830px; margin: 0 auto; }
.content { line-height: 1.75; }
.content p { margin-bottom: 1.1em; }
.content h3 { margin-top: 1.5em; margin-bottom: .6em; font-size: 1.3rem; }
.content figure { margin: 1.5rem 0; }
.content figcaption { font-style: normal; font-size: .86rem; color: #596576; line-height: 1.6; text-align: left; margin-top: .65rem; }
.source-note { font-size: .83rem; line-height: 1.6; color: #647080; }
.callout { border-left: 4px solid #c58723; background: #fffbf3; border-radius: 0 8px 8px 0; padding: 1rem 1.2rem; margin: 1.2rem 0; }
.callout.blue { border-color: var(--pc-blue); background: #f0f6fc; }
.callout p:last-child { margin-bottom: 0; }
.table-container { overflow-x: auto; border: 1px solid var(--pc-line); border-radius: 8px; }
.content table { margin: 0; font-size: .9rem; }
.content table td, .content table th { text-align: left; vertical-align: top; padding: .7rem .75rem; }
.content table th { background: #f1f4f7; color: #28313c; }
.metric-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.4rem 0; }
.metric-card { padding: 1.2rem; border: 1px solid var(--pc-line); border-radius: 10px; background: white; }
.metric-card strong { display: block; font-size: 1.7rem; line-height: 1.3; color: #116555; }
.metric-card p { font-size: .85rem; margin: .4rem 0 0; line-height: 1.5; }
.conference-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.conference-card { border: 1px solid var(--pc-line); border-radius: 12px; padding: 1.3rem; background: white; }
.conference-card h3 { margin-top: 0; }
.conference-card p { font-size: .93rem; }
.video-launch { width: 100%; aspect-ratio: 16/9; border: 1px solid #c3d9ed; border-radius: 8px; background: linear-gradient(135deg, #edf5fc, #f6fafc); color: #235582; cursor: pointer; font: inherit; padding: 1rem; }
.video-launch span { display: block; font-size: 2.4rem; margin-bottom: .25rem; }
.video-frame { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 8px; }
.resource-links { display: flex; flex-wrap: wrap; gap: .65rem 1rem; margin: 1rem 0 0; font-size: .9rem; }
section { scroll-margin-top: 20px; }
mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; max-width: 100%; padding: .35rem 0; }
mjx-assistive-mml { width: 1px !important; height: 1px !important; }
.projection-demo { border: 1px solid #cbdbe9; border-radius: 12px; padding: 1.25rem; background: #fff; margin: 1.2rem 0; }
.demo-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
.demo-controls label { display: block; font-size: .9rem; font-weight: 600; }
.demo-controls input, .demo-controls select { display: block; width: 100%; margin-top: .4rem; font: inherit; padding: .65rem; border: 1px solid #b5c4d3; border-radius: 6px; background: white; color: #28313c; }
.demo-output { font-size: .92rem; line-height: 1.6; }
.demo-field { font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.demo-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 1rem 0; }
.demo-step { padding: .9rem; border: 1px solid var(--pc-line); border-radius: 7px; }
.demo-step b { display: block; margin-bottom: .35rem; }
.demo-status { margin-top: 1rem; color: #226456; }
.demo-status.warning { color: #925c0d; }
.content details { border: 1px solid var(--pc-line); border-radius: 8px; margin: 1rem 0; padding: 1rem; }
.content summary { font-weight: 600; cursor: pointer; }
.content details p:first-of-type { margin-top: 1rem; }
.content pre { border-radius: 8px; font-size: .8rem; line-height: 1.6; }
.bibtex-section pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.copy-status { font-size: .85rem; margin-left: .5rem; }
.footer { background: #f5f7f9; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #1772d0; outline-offset: 3px; }
@media (max-width: 700px) {
 .publication-title { font-size: 1.9rem !important; }
 .hero-body { padding-top: 2rem; }
 .section { padding: 2rem 1.1rem; }
 .conference-grid, .demo-controls { grid-template-columns: 1fr; }
 .metric-cards { gap: .5rem; }
 .metric-card { padding: .8rem; }
 .metric-card strong { font-size: 1.35rem; }
 .demo-steps { grid-template-columns: 1fr; }
 .table-container { max-width: 100%; }
 .content table { min-width: 650px; }
 .publication-links .button { font-size: .88rem; }
 .top-bar a { display: inline-block; margin: .15rem .35rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }