:root { --ink:#182631; --muted:#596b77; --accent:#156777; --line:#dce5e8; --wash:#f4f8f9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:6rem; }
body { margin:0; color:var(--ink); background:#fff; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:17px; line-height:1.75; }
a { color:var(--accent); text-underline-offset:.2em; }
a:hover { text-decoration:underline; }
a:focus-visible, button:focus-visible { outline:3px solid #bc5809; outline-offset:5px; }
.skip-link { position:fixed; top:-100px; left:1rem; z-index:10; background:white; padding:.6rem 1rem; }
.skip-link:focus { top:1rem; }
.site-nav { border-bottom:1px solid var(--line); background:#fff; }
.nav-inner { max-width:1160px; margin:auto; padding:1rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.site-nav a { color:var(--ink); text-decoration:none; font-size:.88rem; font-weight:600; }
.site-nav a:hover { color:var(--accent); }
.nav-links { display:flex; gap:1.6rem; }
.nav-links [aria-current] { color:var(--accent); border-bottom:2px solid var(--accent); }
.container { width:min(1080px, calc(100% - 3rem)); margin-inline:auto; }
.hero { text-align:center; padding:4.8rem 0 3rem; }
.eyebrow { margin:0 0 1rem; color:var(--accent); text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; font-weight:700; }
h1 { margin:0; font-size:clamp(3.6rem,9vw,6rem); font-weight:750; line-height:1.05; letter-spacing:-.055em; }
.subtitle { max-width:850px; margin:1.1rem auto 1.6rem; font-size:clamp(1.45rem,3.2vw,2.2rem); font-weight:550; line-height:1.3; letter-spacing:-.025em; text-wrap:balance; }
.authors { max-width:900px; margin:0 auto .6rem; }
.authors span { display:inline-block; }
.authors a { text-decoration:none; }
.affiliations { margin:0 auto; max-width:880px; color:var(--muted); font-size:.88rem; }
sup { font-size:.65em; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:46px; padding:.55rem 1.25rem; border:1px solid var(--line); border-radius:999px; background:white; color:var(--ink); font:inherit; font-size:.9rem; font-weight:600; text-decoration:none; cursor:pointer; }
.button:hover { background:var(--wash); border-color:var(--accent); text-decoration:none; }
.section-nav { display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem 1.4rem; margin:2.3rem 0 0; font-size:.85rem; }
.section-nav a { color:var(--muted); text-decoration:none; }
figure { margin:0; }
img { display:block; width:100%; height:auto; }
.teaser { padding:1.5rem; border:1px solid var(--line); border-radius:16px; background:white; }
figcaption { margin:1rem auto 0; color:var(--muted); font-size:.9rem; line-height:1.65; max-width:880px; }
section.content-section { padding:4rem 0; }
section.content-section + section.content-section { border-top:1px solid var(--line); }
h2 { margin:0 0 1.3rem; font-size:clamp(1.8rem,3vw,2.2rem); font-weight:650; letter-spacing:-.035em; line-height:1.25; }
h3 { line-height:1.4; font-size:1.1rem; margin:0 0 .5rem; }
p { margin:0 0 1.2rem; }
.prose { max-width:790px; margin-inline:auto; }
.prose p:last-child { margin-bottom:0; }
.section-intro { max-width:760px; color:var(--muted); }
.media-frame { background:var(--wash); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
video { display:block; width:100%; height:auto; aspect-ratio:2/1; background:#101719; }
iframe { display:block; width:100%; aspect-ratio:16/9; border:0; }
.result-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:2rem; }
.result-grid figure { min-width:0; }
.result-grid img { border:1px solid var(--line); border-radius:12px; }
.result-grid figcaption { text-align:center; }
.resources { display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; margin:1.5rem 0; }
.resource { display:flex; flex-direction:column; gap:.5rem; padding:1.5rem; border:1px solid var(--line); border-radius:12px; color:inherit; text-decoration:none; }
.resource:hover { background:var(--wash); text-decoration:none; border-color:var(--accent); }
.resource strong { font-size:1.05rem; }
.resource span { color:var(--muted); font-size:.9rem; }
.small { font-size:.88rem; color:var(--muted); }
.news { padding-left:1.2rem; }
.news li { padding:.3rem 0; }
.citation-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.citation-heading h2 { margin:0; }
pre { padding:1.5rem; background:var(--wash); border:1px solid var(--line); border-radius:12px; overflow-x:auto; font-size:.83rem; line-height:1.65; }
.copy-status { min-height:1.5em; font-size:.85rem; color:var(--muted); }
footer { border-top:1px solid var(--line); margin-top:1rem; padding:2rem 0; color:var(--muted); font-size:.8rem; }
footer .container { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.75rem 2rem; }
footer p { margin:0; }
footer a { color:var(--muted); }
@media(max-width:650px) {
 body { font-size:16px; }
 .nav-inner { align-items:flex-start; flex-direction:column; padding:1rem; gap:.6rem; }
 .nav-links { gap:1.4rem; }
 .container { width:calc(100% - 2rem); }
 .hero { padding:3rem 0 2rem; }
 .teaser { padding:.65rem; border-radius:10px; }
 section.content-section { padding:2.7rem 0; }
 .resources, .result-grid { grid-template-columns:1fr; }
 .citation-heading { align-items:flex-start; }
 pre { padding:1rem; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Synchronized result videos extracted from the research presentations. */
.demo { margin: 1.5rem 0 2rem; }
.demo-heading { margin-top: 2.5rem; }
.comparison-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #101719; }
.comparison-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.comparison-canvas.wide { min-width: 960px; }
.comparison-labels { display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); background: var(--wash); color: var(--ink); }
.comparison-labels span { padding: .8rem .35rem; text-align: center; font-size: .77rem; font-weight: 600; line-height: 1.5; }
.comparison-labels small { color: var(--muted); font-size: .7rem; font-weight: 400; }
.result-video { width: 100%; height: auto; aspect-ratio: auto; }
.more-results { border-bottom: 1px solid var(--line); margin: .8rem 0; }
.more-results summary { padding: .7rem 0; color: var(--accent); font-weight: 600; cursor: pointer; }
.more-results summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* Match the dark, rounded publication buttons used by THUNDER (Bulma). */
.publication-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 4px; margin-top: 1.8rem; }
.publication-links .link-block { display: inline-block; }
.publication-links .button { display: inline-flex; align-items: center; justify-content: center; height: 2.5em; min-height: 0; margin: 5px 0; padding: calc(.5em - 1px) 1.25em; border: 1px solid transparent; border-radius: 290486px; background: #363636; color: #fff; font-family: 'Noto Sans', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; text-align: center; white-space: nowrap; text-decoration: none; }
.publication-links .button:hover { background: #2f2f2f; border-color: transparent; color: #fff; }
.publication-links .button:active { background: #292929; }
.publication-links .icon { display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; margin-left: calc(-.5em - 1px); margin-right: .25em; }
.publication-links .icon svg { width: auto; height: 1em; }