:root { --ink:#172a2b; --muted:#586769; --accent:#0d665c; --line:#dbe4df; --wash:#f3f7f4; --paper:#fff; --radius:14px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; font-size:16px; line-height:1.65; }
a { color:var(--accent); text-underline-offset:4px; }
a:hover { text-decoration-thickness:2px; }
button,select { font:inherit; color:inherit; }
button,summary,select { cursor:pointer; }
button,a,select,summary { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #df9a3e; outline-offset:4px; }
[hidden] { display:none !important; }
.skip { position:absolute; left:16px; top:-80px; padding:10px 16px; background:var(--paper); z-index:10; }
.skip:focus { top:12px; }
.nav { max-width:1240px; margin:auto; padding:24px 32px; display:flex; justify-content:space-between; gap:24px; align-items:center; border-bottom:1px solid var(--line); }
.wordmark { font-weight:800; text-decoration:none; letter-spacing:-.5px; color:var(--ink); }
.wordmark span { color:var(--muted); font-size:12px; font-weight:500; letter-spacing:0; }
nav { display:flex; flex-wrap:wrap; gap:24px; font-size:14px; }
nav a { text-decoration:none; color:var(--muted); }
main { max-width:1200px; padding:0 40px; margin:auto; }
.hero { text-align:center; padding:76px 0 46px; }
.eyebrow { color:var(--accent); font-size:12px; letter-spacing:1.8px; text-transform:uppercase; font-weight:750; margin:0 0 12px; }
h1,h2,h3,p,figure { margin-top:0; }
h1 { font-size:clamp(40px,5.8vw,72px); line-height:1.06; letter-spacing:-3px; font-weight:760; margin-bottom:24px; }
.tagline { font-size:clamp(24px,3vw,36px); line-height:1.3; letter-spacing:-.8px; margin-bottom:28px; }
.tagline span { color:var(--accent); }
.authors { font-size:16px; line-height:1.9; margin-bottom:12px; }
sup { font-size:10px; margin-left:2px; }
.institutions { display:flex; justify-content:center; flex-wrap:wrap; gap:4px 20px; color:var(--muted); font-size:12px; }
.links { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:26px 0; }
.button { display:inline-flex; align-items:center; gap:20px; padding:11px 19px; border:1px solid var(--line); border-radius:7px; font-size:14px; text-decoration:none; font-weight:650; color:var(--ink); }
.button:hover { border-color:var(--accent); }
.button.primary { background:var(--accent); color:white; border-color:var(--accent); }
.intro { max-width:770px; margin:30px auto; font-size:18px; color:var(--muted); }
.story-path { display:flex; justify-content:center; flex-wrap:wrap; align-items:center; gap:14px; font-size:12px; letter-spacing:.1px; }
.story-path a { text-decoration:none; padding:6px 0; border-bottom:1px solid var(--line); }
.story-path>span { color:#8ca29c; }
.section { border-top:1px solid var(--line); padding:56px 0; }
h2 { font-size:clamp(28px,3.3vw,40px); line-height:1.18; letter-spacing:-1.1px; font-weight:720; margin-bottom:20px; }
h3 { font-size:19px; line-height:1.35; letter-spacing:-.35px; margin-bottom:12px; }
p { margin-bottom:18px; }
.section-intro { max-width:740px; color:var(--muted); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:26px; }
.section-heading>div { flex:1.4; }
.section-heading h2 { margin-bottom:0; }
.section-heading>p { flex:1; color:var(--muted); font-size:15px; margin:0; max-width:365px; }
.concept-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px; }
.concept-grid article { border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; }
.card-kicker { color:var(--accent); text-transform:uppercase; font-size:11px; letter-spacing:1px; font-weight:750; display:block; margin-bottom:12px; }
.concept-grid p { font-size:14px; color:var(--muted); margin:0; }
.concept-grid .highlight { background:var(--wash); border-color:#a5c3b6; }
.mechanism-steps { list-style:none; counter-reset:mechanism; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding:0; margin:32px 0; }
.mechanism-steps li { counter-increment:mechanism; border-top:2px solid var(--line); padding-top:18px; }
.mechanism-steps li::before { content:"0" counter(mechanism); color:var(--accent); font-size:12px; display:block; margin-bottom:9px; font-weight:700; }
.mechanism-steps h3 { font-size:17px; }
.mechanism-steps p { color:var(--muted); font-size:14px; margin-bottom:0; }
.equations { background:var(--wash); border:1px solid var(--line); border-radius:var(--radius); display:grid; grid-template-columns:1.2fr 1fr; gap:24px; padding:24px; }
.equation-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px; color:var(--accent); }
.equations p { font-family:Georgia,"Times New Roman",serif; font-size:clamp(17px,2vw,24px); margin:10px 0 0; line-height:1.5; }
.method-key { border-left:3px solid var(--accent); padding-left:20px; margin:24px 0 36px; max-width:930px; font-size:15px; }
.training-demo { display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:start; }
.training-explanation p { color:var(--muted); font-size:15px; }
.source-target { max-width:310px; margin:22px 0 0; }
.source-target img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:8px; }
.source-target figcaption { color:var(--muted); font-size:11px; margin-top:10px; }
.training-figure { margin:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.figure-toolbar { padding:16px 20px; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; background:var(--wash); font-size:12px; font-weight:650; }
select { padding:9px 30px 9px 12px; border:1px solid #b8c9c2; background:var(--paper); border-radius:6px; font-size:13px; min-height:42px; max-width:100%; }
select:disabled { color:var(--muted); background:#f1f3f1; cursor:default; opacity:1; }
.training-figure>img { display:block; width:100%; height:auto; max-height:430px; object-fit:contain; }
.training-figure figcaption { display:grid; gap:12px; font-size:12px; padding:16px 20px; border-top:1px solid var(--line); color:var(--muted); }
.legend { display:flex; flex-wrap:wrap; gap:10px 16px; font-size:10px; }
.legend>span { display:inline-flex; align-items:center; gap:5px; }
.dot { width:7px; height:7px; display:inline-block; border-radius:50%; }
.red { background:#db7478; }.green { background:#59b6a0; }
.inference { margin-top:36px; padding:26px 30px; background:var(--wash); border-radius:var(--radius); display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.inference h3 { font-size:23px; }
.inference p:last-child { font-size:14px; color:var(--muted); margin:0; }
.inference-paths>div+div { margin-top:20px; }
.inference-paths>div>span { color:var(--muted); font-size:11px; }
.time-path { display:flex; align-items:center; gap:12px; margin-top:5px; color:var(--accent); }
.time-path b { font-family:Georgia,serif; font-weight:400; }
.time-path i { height:1px; background:var(--accent); flex:1; position:relative; }
.time-path i:after { content:""; width:5px; height:5px; transform:rotate(-45deg); border-right:1px solid var(--accent); border-bottom:1px solid var(--accent); position:absolute; right:0; top:-2px; }
.theory { margin-top:22px; font-size:13px; color:var(--muted); }
.theory summary { color:var(--ink); font-weight:650; padding:8px 0; }
.theory p { max-width:940px; margin:12px 0 0; }
.demo-panel { padding:24px; border:1px solid var(--line); border-radius:var(--radius); }
.demo-top { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.segmented { display:inline-flex; flex-wrap:wrap; gap:3px; background:var(--wash); border:1px solid var(--line); padding:4px; border-radius:8px; }
.segmented button { border:0; background:transparent; padding:9px 14px; border-radius:5px; font-size:12px; font-weight:650; min-height:38px; }
.segmented button[aria-pressed="true"] { background:var(--accent); color:white; }
.segmented button:hover { box-shadow:inset 0 0 0 1px #97b8ac; }
label { display:flex; flex-direction:column; gap:6px; font-size:11px; font-weight:650; }
.dataset-label { min-width:170px; }
.trajectory-controls { display:flex; gap:16px; align-items:end; flex-wrap:wrap; }
.reference-controls { display:flex; gap:16px; flex-wrap:wrap; }
.trajectory-controls label { min-width:150px; }
.dfm-control { margin-left:auto; color:var(--accent); }
.dfm-control select { border-color:var(--accent); }
.budget-note { font-size:12px; color:var(--accent); background:var(--wash); padding:11px 14px; border-radius:6px; margin-bottom:18px; }
.trajectory-grid { display:grid; grid-template-columns:1fr 1fr .68fr; gap:14px; align-items:start; }
.trajectory-grid figure { margin:0; min-width:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.trajectory-grid figcaption { padding:11px 13px; border-bottom:1px solid var(--line); font-size:12px; font-weight:700; }
.trajectory-grid img { display:block; width:100%; height:auto; }
.trajectory-grid .dfm-figure { border-color:#98beb0; }
.dfm-figure figcaption { background:var(--wash); color:var(--accent); }
.target-figure p { font-size:10px; line-height:1.55; color:var(--muted); padding:0 12px; margin:10px 0 12px; }
.figure-reading { font-size:12px; color:var(--muted); margin:18px 0 12px; }
.small-note { font-size:12px; line-height:1.65; color:var(--muted); margin:16px 0 0; }
.text-link { display:inline-block; margin-top:16px; font-weight:650; font-size:14px; }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:28px 0 38px; }
.metric-card { padding:22px; background:var(--wash); border-radius:var(--radius); border:1px solid var(--line); }
.metric-values { font-size:clamp(21px,2.2vw,28px); line-height:1.3; letter-spacing:-.9px; font-weight:700; margin:16px 0 9px; white-space:nowrap; }
.metric-values span { color:#749a8d; font-weight:400; font-size:18px; }
.metric-card p:not(.metric-values) { font-size:12px; color:var(--muted); margin-bottom:0; }
.metric-card .small-note { font-size:10px !important; margin-top:14px; }
.subsection-title { font-size:23px; margin:38px 0 14px; }
#results>p:not(.eyebrow):not(.small-note):not(.source-note) { font-size:14px; color:var(--muted); max-width:950px; }
.table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:8px; }
table { border-collapse:collapse; width:100%; font-size:12px; text-align:right; font-variant-numeric:tabular-nums; }
caption { text-align:left; padding:14px 16px; font-weight:700; font-size:12px; background:var(--wash); }
th,td { padding:11px 14px; border-top:1px solid var(--line); white-space:nowrap; }
thead th { font-size:10px; color:var(--muted); font-weight:600; }
th:first-child { text-align:left; }
.ours { background:#f0f7f2; }
.ours th { color:var(--accent); }
.evidence-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }

.toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; }
.toolbar>span { font-size:13px; color:var(--muted); }
.image-frame { margin:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.image-frame img { width:100%; height:auto; display:block; }
.image-frame figcaption { display:flex; justify-content:space-between; gap:30px; padding:18px 22px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.image-frame figcaption>span:first-child { font-weight:700; color:var(--accent); white-space:nowrap; }
.code-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.code-grid article { border:1px solid var(--line); border-radius:var(--radius); padding:30px; }
.code-number { font-size:12px; color:var(--accent); display:block; margin-bottom:18px; }
.code-grid h3 { font-size:24px; }
.code-grid p { color:var(--muted); font-size:14px; }
.citation-heading { display:flex; justify-content:space-between; gap:24px; align-items:center; }
.citation-heading h2 { margin:0; }
#copy-citation { background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:9px 14px; font-size:12px; }
pre { overflow-x:auto; background:var(--wash); border:1px solid var(--line); border-radius:var(--radius); padding:24px; font-size:12px; line-height:1.8; margin:24px 0 0; }
footer { max-width:1200px; margin:auto; padding:24px 40px 40px; display:flex; gap:24px; flex-wrap:wrap; color:var(--muted); font-size:11px; border-top:1px solid var(--line); }
footer span { margin-right:auto; }
footer a { color:var(--muted); }
@media (max-width:950px) {
  .concept-grid { gap:12px; }.concept-grid article { padding:22px 18px; }
  .section-heading { gap:24px; }.training-demo { gap:24px; }
  .metric-grid { gap:12px; }.metric-card { padding:18px 14px; }.metric-values { font-size:22px; }
  .trajectory-grid { grid-template-columns:1fr 1fr; }.trajectory-grid .target-figure { display:grid; grid-template-columns:150px 1fr; grid-column:1/-1; align-items:center; }.target-figure figcaption { grid-column:1/-1; }.target-figure p { padding:14px; font-size:12px; }
}
@media (max-width:700px) {
  .nav { padding:18px 20px; gap:12px; }.wordmark span { display:none; }nav { gap:14px; font-size:12px; }
  main { padding:0 20px; }.hero { padding:48px 0 36px; }h1 { letter-spacing:-1.8px; }.tagline { font-size:25px; }.authors { font-size:13px; }.institutions { font-size:10px; gap:3px 12px; }.intro { font-size:16px; margin:24px auto; }
  .links { gap:8px; }.button { font-size:12px; padding:10px 12px; gap:10px; }.story-path { gap:8px; font-size:10px; }
  .section { padding:38px 0; }h2 { font-size:30px; letter-spacing:-.8px; }.section-heading { display:block; }.section-heading h2 { margin-bottom:16px; }.section-heading>p { max-width:none; font-size:14px; }
  .concept-grid,.mechanism-steps { grid-template-columns:1fr; }.concept-grid { gap:12px; }.concept-grid article { padding:22px; }.mechanism-steps { gap:22px; }
  .equations { grid-template-columns:1fr; gap:20px; padding:22px; }.equations p { font-size:20px; }.method-key { font-size:14px; }
  .training-demo { grid-template-columns:1fr; gap:24px; }.source-target { max-width:200px; }.training-explanation { display:grid; grid-template-columns:1fr 130px; gap:0 16px; }.training-explanation h3 { grid-column:1/-1; }.training-explanation p { font-size:13px; margin:0; }.source-target { margin:0; align-self:start; }.source-target figcaption { font-size:10px; }.figure-toolbar { padding:14px; }.training-figure>img { max-height:350px; }
  .inference { grid-template-columns:1fr; padding:24px; gap:20px; }.inference h3 { font-size:21px; }.theory { font-size:12px; }
  .demo-panel { padding:16px; }.demo-top { display:block; }.demo-top .segmented { display:flex; }.demo-top .segmented button { flex:1; padding:9px 8px; font-size:10px; }.dataset-label { width:100%; }.dataset-label select { width:100%; }
  .trajectory-controls { gap:12px; }.reference-controls { display:grid; grid-template-columns:1fr 1fr; width:100%; gap:12px; }.trajectory-controls label { min-width:0; }.dfm-control { width:100%; margin-left:0; }
  .trajectory-grid { gap:10px; }.trajectory-grid figcaption { font-size:10px; padding:10px; }.trajectory-grid .target-figure { grid-template-columns:110px 1fr; }.target-figure p { font-size:10px; padding:8px; }.budget-note { font-size:11px; }.figure-reading { font-size:11px; }
  .metric-grid { grid-template-columns:1fr; gap:12px; }.metric-card { padding:20px; }.metric-values { font-size:30px; margin-top:10px; }.metric-card .card-kicker { margin-bottom:0; }.metric-card .small-note { margin-top:10px; }
  .evidence-grid,.code-grid { grid-template-columns:1fr; }.subsection-title { font-size:21px; }th,td { padding:10px 12px; }
  .toolbar { align-items:start; flex-direction:column; gap:10px; }.toolbar .segmented { width:100%; }.toolbar .segmented button { flex:1; padding:9px 8px; }.image-frame figcaption { flex-direction:column; gap:8px; padding:16px; }
  .code-grid article { padding:24px; }.code-grid h3 { font-size:22px; }pre { font-size:10px; padding:16px; }footer { padding:22px 20px 32px; gap:12px 20px; }footer span { width:100%; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

.path-equation { font-family:Georgia,serif; font-size:clamp(18px,2vw,24px); text-align:center; padding:16px; background:var(--wash); border-radius:8px; }
.coverage { padding:16px; }
.coverage h4 { margin:0 0 10px; color:var(--accent); font-size:12px; letter-spacing:1px; }
.coverage h4:not(:first-child) { margin-top:20px; }
.coverage-row { display:grid; grid-template-columns:repeat(4,minmax(175px,1fr)); min-width:720px; gap:12px; }
.coverage-row figure { margin:0; }
.coverage-row figcaption { font-size:11px; font-weight:650; text-align:center; padding-bottom:8px; }
.coverage-row img { display:block; width:100%; height:auto; }
.image-examples>p { color:var(--muted); font-size:14px; }