:root { --ink: #403417; --muted: #75694e; --line: #dfd2aa; --wash: #fbf8ec; --green: #b88624; --green-dark: #604d16; --green-light: #f6e7b4; --green-pale: #fff8e5; --highlight: #b88624; --highlight-soft: #f6e7b4; }
html { font-size: 16px; scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: 'Noto Sans', sans-serif; font-size: 1rem; line-height: 1.6; overflow-x: hidden; }
a { color: var(--green-dark); }
.page-width { max-width: 1160px !important; }
.publication-header { background: linear-gradient(135deg, #fffaf0 0%, #f1e8cf 52%, #f6f4ec 100%); color: var(--green-dark); }
.publication-header .hero-body { padding: 3.6rem 1.5rem 2.8rem; }
.eyebrow, .section-heading > span { color: var(--highlight); font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.publication-header .eyebrow { color: var(--highlight); margin-bottom: .85rem; }
.publication-title { max-width: 960px; margin: 0 auto 1.1rem; color: var(--green-dark); font-family: 'Google Sans', sans-serif; font-size: clamp(2.2rem, 5vw, 4rem) !important; line-height: 1.06; }
.publication-authors { max-width: 1000px; margin: auto; font-family: 'Google Sans', sans-serif; font-size: 1.02rem; }
.publication-authors a { color: var(--green-dark); }
.author-note { color: var(--muted); font-size: .84rem; margin-top: .45rem; }
.publication-links { margin-top: 1.2rem; }
.publication-links .button { margin: 3px; font-size: .82rem; }
.publication-links .button.is-dark { background: var(--highlight-soft); border: 1px solid #dfc875; color: #634a12; }
.publication-links .button.is-dark:hover { background: #fff8df; color: #634a12; }
.publication-links .is-disabled { opacity: .55; pointer-events: none; }
.teaser { padding: 1.7rem 1.5rem 2.6rem; background: #fff; }
.video-frame { position: relative; max-width: 920px; margin: 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #2e2716; box-shadow: 0 16px 40px rgba(94, 74, 20, .14); }
.video-frame video { display: block; width: 100%; max-height: 520px; object-fit: contain; }
.video-badge { position: absolute; left: 1rem; bottom: 1rem; padding: .4rem .7rem; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: #fff; background: rgba(57, 47, 21, .86); font-size: .76rem; }
.video-badge i { color: #f1d277; margin-right: .35rem; }
.teaser-caption { max-width: 760px; margin: .85rem auto 0; color: var(--muted); text-align: center; font-size: .92rem; }
.tldr-band { padding: 2.4rem 1.5rem; background: #fffaf0; border-top: 1px solid #eee1bd; border-bottom: 1px solid #eee1bd; }
.tldr-heading { display: grid; grid-template-columns: 115px minmax(0, 1fr); gap: 1.2rem; align-items: start; max-width: 920px; margin: 0 auto; }
.tldr-heading span { color: var(--highlight); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tldr-heading p { margin: 0; color: var(--green-dark); font-family: 'Google Sans', sans-serif; font-size: 1.18rem; line-height: 1.45; }
.section { padding: 4.2rem 1.5rem; background: #fff; }
.green-section { background: var(--green-pale); border-top: 1px solid #eadcb8; border-bottom: 1px solid #eadcb8; }
.section-heading { margin-bottom: 1.7rem; }
.section-heading > span { color: var(--highlight); }
.section-heading h2 { margin: .3rem 0 0; color: var(--green-dark); font-family: 'Google Sans', sans-serif; font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1.15; }
.content { line-height: 1.75; }
.content p { margin: 0 0 1rem; }
.content strong { color: var(--green-dark); font-weight: 750; }
.content em { color: var(--green-dark); font-weight: 600; }
.inline-highlight { display: inline; padding: .08em .28em; border-radius: .24em; background: var(--highlight-soft); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.two-column { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.stat-card, .task-card, .model-panel, .chart-card, .diagram-card, .support-figure, .callout { border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.stat-card { padding: 1.1rem; }
.stat-card strong { display: block; color: var(--green); font-family: 'Google Sans', sans-serif; font-size: 2rem; line-height: 1; }
.stat-card span { display: block; margin-top: .45rem; color: var(--muted); font-size: .8rem; }
.diagram-card { padding: 1.1rem; overflow-x: auto; box-shadow: 0 12px 30px rgba(94, 74, 20, .08); }
.overview-diagram { display: block; width: 100%; min-width: 720px; height: auto; }
.diagram-lines path { fill: none; stroke: var(--green); stroke-width: 2; }
.diagram-column rect { fill: #fff; stroke: #d6be75; stroke-width: 1.5; }
.diagram-column text { fill: var(--green-dark); font-size: 15px; text-anchor: middle; dominant-baseline: middle; font-weight: 700; }
.diagram-column .diagram-column-title { text-anchor: start; font-size: 12px; letter-spacing: 1.5px; fill: var(--green); }
.diagram-column .diagram-small { font-size: 11px; font-weight: 400; fill: var(--muted); }
.diagram-labels text { fill: var(--muted); font-size: 11px; text-anchor: middle; }
.task-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.7rem; }
.task-card { padding: 1.25rem; }
.task-number { color: var(--highlight); font-size: .8rem; font-weight: 800; letter-spacing: .08em; }
.task-card h3, .model-panel h3, .chart-heading h3 { margin: .35rem 0 .45rem; color: var(--green-dark); font-family: 'Google Sans', sans-serif; font-size: 1.15rem; }
.task-card p, .model-panel li { color: var(--muted); font-size: .88rem; line-height: 1.55; }
.support-figure { margin: 0; padding: .7rem; }
.support-figure img { display: block; width: 100%; height: auto; border-radius: 9px; }
.support-figure video { display: block; width: 100%; height: auto; border-radius: 9px; background: #2e2716; }
.robustness-video { max-width: 720px; margin: 0 auto; }
.robustness-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 1160px; margin: 0 auto; }
.robustness-grid .robustness-video { max-width: none; }
.ood-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.ood-video { width: 100%; margin: 0; }
.ood-video video[hidden] { display: none !important; }
.ood-chart { min-height: 0; overflow-x: auto; }
.ood-chart svg { display: block; width: 100%; min-width: 660px; height: auto; overflow: visible; }
.support-figure figcaption { padding: .6rem .2rem .1rem; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.model-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.model-group { padding: 1.25rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.model-group h3 { margin: 0 0 .9rem; color: var(--green-dark); font-family: 'Google Sans', sans-serif; font-size: 1.2rem; }
.model-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.model-chip { display: inline-flex; align-items: center; min-height: 2.15rem; padding: .4rem .75rem; border: 1px solid #dfc875; border-radius: 999px; color: #684f16; background: var(--highlight-soft); font-size: .82rem; line-height: 1.2; }
.results-section { background: var(--green-pale); }
.section-lede { color: var(--muted); margin: -.8rem 0 1.1rem; }
.chart-toolbar { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1rem; }
.chart-primary-selector { justify-content: center; }
.chart-button { padding: .55rem .85rem; border: 1px solid #dfc875; border-radius: 999px; color: #684f16; background: #fff; cursor: pointer; font: inherit; font-size: .84rem; }
.chart-button:hover, .chart-button:focus-visible { border-color: var(--highlight); outline: 3px solid rgba(184, 134, 36, .18); }
.chart-button.is-active { color: #634a12; background: var(--highlight-soft); border-color: #d3b34e; }
.task-selector { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.task-button { padding: .42rem .72rem; border: 1px solid var(--line); border-radius: 999px; color: var(--green-dark); background: #fffdf6; cursor: pointer; font: inherit; font-size: .8rem; }
.task-button:hover, .task-button:focus-visible { border-color: var(--highlight); outline: 3px solid rgba(184, 134, 36, .18); }
.task-button.is-active { color: #fff; border-color: #5c4a18; background: #6b5518; }
.metric-selector { display: flex; flex-wrap: nowrap; justify-content: center; gap: .5rem; margin: 0 0 1rem; overflow-x: auto; }
.metric-button { flex: 0 0 auto; padding: .47rem .72rem; border: 1px solid transparent; border-radius: 999px; color: #fff; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 700; line-height: 1.2; opacity: .28; transition: opacity .15s ease, filter .15s ease; }
.metric-button.is-active { opacity: 1; }
.metric-button.is-rank { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.metric-button:hover { opacity: 1; filter: brightness(.84) saturate(1.08); }
.metric-button:focus-visible { opacity: 1; outline: 2px solid var(--ink); outline-offset: 2px; }
.metric-init { background: #766c59; }
.metric-attempt { background: #e99a08; }
.metric-completion { background: #169b4b; }
.metric-termination { background: #2563eb; }
.live-chart-card { padding: 1.2rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.result-figure { margin: 0; padding: .75rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.result-figure img { display: block; width: 100%; height: auto; border-radius: 8px; }
.result-figure img[hidden] { display: none !important; }
.chart-card { padding: 1.2rem; }
.chart-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.chart-heading h3 { margin-top: 0; }
.chart-note, .chart-legend { color: var(--muted); font-size: .76rem; }
.results-chart { min-height: 690px; overflow-x: auto; }
.results-chart svg { display: block; width: 100%; min-width: 900px; height: auto; overflow: visible; }
.chart-grid-line { stroke: #eee5cc; stroke-width: 1; }
.chart-axis-label { fill: var(--muted); font-size: 12px; }
.chart-category { fill: var(--green-dark); font-size: 13px; font-weight: 700; }
.chart-row-label { fill: var(--green-dark); font-size: 12px; font-weight: 700; }
.chart-bar { cursor: pointer; transition: opacity .15s ease; }
.chart-bar:hover, .chart-bar:focus { opacity: .75; outline: none; }
.chart-value { fill: #fff; font-size: 12px; font-weight: 800; pointer-events: none; }
.chart-tooltip { position: fixed; z-index: 5; padding: .45rem .6rem; border-radius: 7px; color: #fff; background: #4e3d12; box-shadow: 0 5px 16px rgba(0,0,0,.18); font-size: .76rem; pointer-events: none; transform: translate(10px, -110%); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .8rem; }
.legend-dot { display: inline-block; width: 10px; height: 10px; margin-right: .35rem; border-radius: 50%; }
.term-dot { background: #2563eb; }
.complete-dot { background: #169b4b; }
.attempt-dot { background: #f5a20a; }
.evidence-grid { align-items: start; }
.lower-evidence { margin-top: 1.2rem; }
.callout { align-self: stretch; padding: 1.4rem; background: var(--green-pale); }
.callout span { color: var(--green); font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.callout p { margin: .6rem 0 0; color: var(--green-dark); font-size: 1.02rem; line-height: 1.7; }
.conclusion-copy { max-width: none; color: #66541d; font-size: 1.08rem; line-height: 1.8; }
.highlight-quote { margin: 1.5rem 0 0; padding: 1.15rem 1.35rem; border-left: 5px solid var(--highlight); border-radius: 0 12px 12px 0; background: #fffdf6; color: var(--green-dark); font-family: 'Google Sans', sans-serif; font-size: 1.2rem; font-weight: 600; line-height: 1.45; }
.citation-section { background: #fff; border-top: 1px solid var(--line); }
pre { margin: 0; padding: 1rem; overflow-x: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--green-dark); font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.footer { padding: 2.3rem 1.5rem; color: var(--muted); font-size: .82rem; }
@media (max-width: 820px) { .two-column, .model-groups, .robustness-grid, .ood-layout { grid-template-columns: 1fr; gap: 1.4rem; } .ood-video { width: min(100%, 360px); justify-self: center; } .task-grid { grid-template-columns: repeat(2, 1fr); } .publication-title { font-size: clamp(2rem, 8vw, 3rem) !important; } }
@media (max-width: 560px) { .section, .tldr-band { padding: 3rem 1rem; } .task-grid, .stat-grid { grid-template-columns: 1fr; } .tldr-heading { grid-template-columns: 1fr; gap: .45rem; } .chart-heading, .chart-legend { display: block; } .chart-note { display: block; margin-top: .2rem; } .chart-legend span { display: block; margin-top: .45rem; } .video-badge { left: .55rem; bottom: .55rem; font-size: .68rem; } }