@font-face { font-family: Inter; font-style: normal; font-weight: 300; font-display: swap; src: url("../../../WorldEngine/static/fonts/inter-300.ttf") format("truetype"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url("../../../WorldEngine/static/fonts/inter-400.ttf") format("truetype"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url("../../../WorldEngine/static/fonts/inter-500.ttf") format("truetype"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url("../../../WorldEngine/static/fonts/inter-600.ttf") format("truetype"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url("../../../WorldEngine/static/fonts/inter-700.ttf") format("truetype"); }
:root {
  --paper: #f8f7f3;
  --surface: #eeede7;
  --ink: #292c28;
  --muted: #73776e;
  --line: #dcded5;
  --accent: #697c59;
  --max: 1200px;
  --gutter: clamp(22px, 5vw, 80px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 4px; }
button { font: inherit; cursor: pointer; }
img, video { display: block; max-width: 100%; height: auto; }
figure, p, h1, h2, h3, h4 { margin: 0; }
strong { font-weight: 600; }
::selection { background: #dfe5d3; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.container, .hero { width: min(var(--max), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; left: 20px; padding: 10px; z-index: 100; background: var(--paper); }
.skip-link:focus { top: 10px; }
.progress { position: fixed; inset: 0 auto auto 0; height: 2px; width: 0; background: var(--accent); z-index: 60; }
.topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; min-height: 82px; padding: 16px max(var(--gutter), calc((100vw - var(--max)) / 2)); background: var(--paper); border-bottom: 1px solid var(--line); gap: 30px; }
.brand { flex: none; text-decoration: none; font-size: 25px; letter-spacing: -.07em; font-weight: 600; }
.nav { display: flex; gap: 27px; align-items: center; }
.nav a { font-size: 13px; color: var(--muted); text-decoration: none; padding-block: 10px; }
.nav a:hover, .nav a.active { color: var(--ink); }
.nav a.active { box-shadow: 0 1px 0 var(--ink); }

/* Generous opening, balanced by a quieter supporting column. */
.hero { padding-top: 88px; }
.hero-content { display: grid; grid-template-columns: 1.35fr 1fr; column-gap: 8%; align-items: start; }
.eyebrow { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
.hero .eyebrow { grid-column: 1 / -1; margin-bottom: 28px; }
.hero h1 { grid-column: 1; grid-row: 2 / 5; font-weight: 400; letter-spacing: -.065em; line-height: .99; font-size: clamp(66px, 7.7vw, 110px); }
.title-main { display: block; }
.title-rest { display: block; max-width: 510px; margin-top: 25px; font-size: 20px; font-weight: 400; line-height: 1.4; letter-spacing: -.025em; }
.lead { grid-column: 2; grid-row: 2; padding-top: 10px; max-width: 370px; color: var(--muted); font-size: 18px; line-height: 1.65; letter-spacing: -.015em; }
.hero-actions { grid-column: 2; grid-row: 3; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; gap: 9px; min-height: 43px; padding: 10px 16px; border-radius: 5px; border: 1px solid var(--line); color: var(--ink); background: transparent; text-decoration: none; font-size: 12px; font-weight: 500; transition: background .15s ease; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn:hover { background: var(--surface); }
.btn.primary:hover { background: #41483c; }
.icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.hero-visual { margin-top: 58px; overflow: hidden; border-radius: 9px; background: var(--surface); }
.hero-poster { width: 100%; aspect-ratio: 50 / 11; object-fit: cover; }
.media-caption { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; color: var(--muted); font-size: 11px; }
.project-credits { display: grid; grid-template-columns: 1.6fr 1fr; column-gap: 7%; padding-block: 30px 0; }
.authors { display: flex; flex-wrap: wrap; gap: 5px 15px; font-size: 12px; line-height: 1.7; }
.authors strong { font-weight: 400; }
sup { font-size: .65em; padding-left: 2px; }
.affiliations { display: flex; flex-direction: column; gap: 3px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.corresponding { grid-column: 1 / -1; margin-top: 16px; color: var(--muted); font-size: 10px; letter-spacing: .04em; }

/* Repeated alignment and fine section rules replace nested cards. */
.section { padding-block: 110px; }
.section-head { display: grid; grid-template-columns: 1fr 2fr; column-gap: 7%; padding-top: 24px; margin-bottom: 50px; border-top: 1px solid var(--line); align-items: start; }
.section-head .eyebrow { display: flex; align-items: baseline; gap: 16px; margin-top: 8px; }
.section-number { color: var(--accent); font-variant-numeric: tabular-nums; }
.section h2 { max-width: 730px; font-size: clamp(32px, 3.8vw, 53px); font-weight: 400; line-height: 1.09; letter-spacing: -.045em; text-wrap: balance; }
h3 { font-weight: 500; font-size: 21px; line-height: 1.25; letter-spacing: -.025em; }
.overview-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; }
.statement p, .feature-copy p, .attention-copy p { color: var(--muted); font-size: 16px; line-height: 1.7; }
.statement strong { color: var(--ink); }
.metrics-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 32px; }
.metrics-row > div { padding-top: 14px; border-top: 1px solid var(--line); }
.metrics-row strong { display: block; color: var(--ink); font-weight: 400; font-size: 28px; letter-spacing: -.045em; line-height: 1.1; }
.metrics-row span { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; }
.paper-figure img, .method-figure img { width: 100%; background: white; border-radius: 6px; }
figcaption, .figure-note { color: var(--muted); font-size: 12px; line-height: 1.5; padding-top: 14px; }
.contribution-grid, .method-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 60px; }
.contribution-grid article, .method-step { padding-top: 20px; border-top: 1px solid var(--line); }
.number, .method-step > span, .kicker { display: block; color: var(--accent); font-size: 11px; letter-spacing: .05em; }
.contribution-grid h3, .method-step h3 { margin-top: 24px; margin-bottom: 12px; }
.contribution-grid p, .method-step p { font-size: 14px; line-height: 1.7; color: var(--muted); }
.method-grid { margin-top: 0; }
.method-figure { margin-top: 48px; }
.method-figure img { padding: 22px; }
.pipeline-figure { width: min(720px, 100%); margin-inline: auto; margin-top: 38px; }
.pipeline-animation { width: min(100%, 960px); margin-top: 54px; padding: 28px; overflow: hidden; background: var(--surface); }
.pipeline-animation-head { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: end; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.pipeline-kicker { color: var(--accent); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.pipeline-animation-head h3 { margin-top: 8px; font-size: clamp(25px, 3vw, 38px); font-weight: 400; letter-spacing: -.055em; }
.pipeline-animation-head p { color: var(--muted); font-size: 13px; line-height: 1.55; }
.pipeline-viewport { display: grid; grid-template-columns: 1.35fr .65fr; gap: 30px; align-items: center; min-height: 310px; padding: 26px 0 20px; }
.pipeline-art { position: relative; min-height: 250px; border-radius: 7px; background: #f2f2ef; overflow: hidden; }
.pipeline-art-stage { position: absolute; inset: 0; width: 100%; height: 100%; padding: 14px; object-fit: contain; opacity: 0; transform: translateX(14px) scale(.985); transition: opacity .42s ease, transform .42s ease; }
.pipeline-art-stage.is-active { opacity: 1; transform: translateX(0) scale(1); }
.pipeline-copy { padding-right: 10px; }
.pipeline-step { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.pipeline-copy h4 { margin-top: 16px; font-size: 24px; font-weight: 400; letter-spacing: -.045em; line-height: 1.12; }
.pipeline-copy p { margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.pipeline-model { display: inline-flex; margin-top: 23px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.pipeline-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pipeline-controls button { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--muted); text-align: left; font-size: 11px; }
.pipeline-controls button span { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.pipeline-controls button:hover, .pipeline-controls button.is-active { border-color: var(--ink); color: var(--ink); background: var(--paper); }
.pipeline-progress { height: 2px; margin-top: 18px; background: var(--line); overflow: hidden; }
.pipeline-progress span { display: block; width: 25%; height: 100%; background: var(--accent); transition: transform .42s ease; transform-origin: left; }
.pipeline-animation figcaption { margin-top: 16px; padding: 0; border: 0; }
.video-feature { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; }
.feature-copy h3 { margin-bottom: 18px; }
.placeholder-video:not(.hero-visual) { display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--surface); border-radius: 8px; color: var(--muted); }
.placeholder-inner { display: grid; justify-items: center; padding: 24px; text-align: center; }
.media-mark { display: block; width: 38px; height: 38px; margin-bottom: 13px; color: #8d9486; }
.media-mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1; }
.placeholder-inner strong { color: #62695a; font-size: 13px; font-weight: 400; }
.placeholder-inner small { font-size: 11px; margin-top: 5px; }
.compact-list { margin: 22px 0 0; }
.compact-list > div { padding-block: 12px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 105px 1fr; gap: 16px; }
.compact-list dt { font-size: 12px; font-weight: 500; }
.compact-list dd { margin: 0; font-size: 12px; color: var(--muted); }
.task-figure { margin-top: 50px; }
.media-grid { margin-top: 42px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.media-card h4 { margin-top: 14px; font-size: 13px; font-weight: 400; }
.media-grid .placeholder-video { aspect-ratio: 16 / 10; }

/* Percent values with a consistent, honest 0–100% bar scale. */
.p2p-t-highlight { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 56px; }
.p2p-t-highlight > div { padding-top: 20px; border-top: 1px solid var(--line); }
.p2p-t-highlight strong { display: block; font-size: clamp(42px, 5.3vw, 72px); line-height: 1.1; font-weight: 400; letter-spacing: -.055em; }
.p2p-t-highlight span { display: block; margin-top: 10px; font-size: 12px; color: var(--muted); }
.results-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.results-chart-head h3 { font-size: 18px; }
.results-chart-head p { font-size: 12px; margin-top: 7px; color: var(--muted); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 15px; font-size: 11px; color: var(--muted); }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend i { width: 8px; height: 8px; background: #c9ccc2; border-radius: 1px; }
.chart-legend .bar-native { background: var(--accent); }
.mini-chart-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px 36px; margin-top: 34px; }
.mini-chart { min-width: 0; }
.mini-chart h4 { font-size: 13px; font-weight: 500; margin-bottom: 16px; }
.grouped-bars { height: 150px; display: flex; align-items: end; justify-content: space-around; gap: 14px; padding-inline: 16px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0px, transparent 29px, var(--line) 30px); }
.grouped-bars > span { position: relative; display: block; width: 42px; max-width: 25%; height: calc(var(--value) * 1%); background: #c9ccc2; border-radius: 2px 2px 0 0; }
.grouped-bars > .bar-baseline { background: #aab09f; }
.grouped-bars > .bar-native { background: var(--accent); }
.grouped-bars b { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 400; white-space: nowrap; }
.grouped-bars em { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); font-size: 10px; font-style: normal; color: var(--muted); white-space: nowrap; }
.mini-chart { padding-bottom: 26px; }
.table-wrap { margin-top: 50px; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
caption { text-align: left; font-size: 18px; margin-bottom: 8px; letter-spacing: -.02em; }
th, td { text-align: left; padding: 15px 12px; border-bottom: 1px solid var(--line); }
th { font-weight: 400; font-size: 11px; color: var(--muted); }
th:first-child, td:first-child { padding-left: 0; }
.best { background: #e9eddf; }
.best td:first-child { padding-left: 12px; }
.attention-panel { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; }
.attention-visual img { width: 100%; border-radius: 6px; }
.attention-copy { padding: 0; }
.attention-copy h3 { margin-bottom: 18px; }
.analysis-case { margin-top: 58px; }
.analysis-case .kicker { margin-bottom: 16px; }
.code-head { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.copy { color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 4px; padding: 7px 14px; font-size: 12px; }
.copy:hover { background: var(--surface); }
pre { margin: 0; padding: 28px; border-radius: 8px; background: var(--surface); overflow-x: auto; font: 12px/1.8 ui-monospace, SFMono-Regular, Consolas, monospace; }
.footer { display: flex; align-items: center; min-height: 100px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
@media (min-width: 1500px) { .hero { padding-top: 105px; } }
@media (max-width: 1000px) {
  .nav { gap: 17px; }
  .hero-content { column-gap: 6%; }
  .hero h1 { font-size: 78px; }
  .lead { font-size: 16px; }
  .overview-grid, .video-feature, .attention-panel { gap: 32px; }
  .contribution-grid, .method-grid { gap: 26px; }
  .section { padding-block: 85px; }
}
@media (max-width: 740px) {
  html { scroll-padding-top: 118px; }
  .topbar { display: block; min-height: 0; padding-block: 15px 8px; }
  .brand { font-size: 23px; }
  .nav { gap: 22px; overflow-x: auto; margin-top: 6px; }
  .nav a { flex: none; font-size: 12px; }
  .hero { padding-top: 48px; }
  .hero-content { display: block; }
  .hero .eyebrow { font-size: 10px; margin-bottom: 23px; }
  .hero h1 { font-size: clamp(60px, 12vw, 88px); }
  .title-rest { font-size: 19px; max-width: 410px; margin-top: 20px; }
  .lead { padding-top: 0; margin-top: 28px; max-width: 460px; }
  .hero-actions { margin-top: 23px; }
  .hero-visual { margin-top: 36px; }
  .hero-poster { aspect-ratio: 2.2; }
  .media-caption { flex-direction: column; gap: 2px; font-size: 10px; padding: 12px; }
  .project-credits { grid-template-columns: 1fr; padding-top: 23px; }
  .affiliations { margin-top: 16px; }
  .section { padding-block: 65px; }
  .section-head { grid-template-columns: 1fr; gap: 22px; margin-bottom: 32px; }
  .section-head .eyebrow { margin: 0; }
  .section h2 { font-size: clamp(31px, 6.5vw, 43px); }
  .pipeline-animation { padding: 20px; }
  .pipeline-animation-head { grid-template-columns: 1fr; gap: 13px; }
  .pipeline-viewport { grid-template-columns: 1fr; gap: 22px; padding-block: 20px; }
  .pipeline-art { min-height: 220px; }
  .pipeline-copy { padding-right: 0; }
  .pipeline-controls { grid-template-columns: repeat(2, 1fr); }
  .overview-grid, .video-feature, .attention-panel { grid-template-columns: 1fr; gap: 30px; }
  .contribution-grid, .method-grid { grid-template-columns: 1fr; gap: 26px; margin-top: 38px; }
  .method-grid { margin-top: 0; }
  .contribution-grid h3, .method-step h3 { margin-top: 13px; }
  .method-figure img { padding: 7px; }
  .media-grid { grid-template-columns: 1fr; gap: 25px; }
  .media-grid .placeholder-video { aspect-ratio: 16 / 9; }
  .p2p-t-highlight { gap: 16px; margin-bottom: 38px; }
  .p2p-t-highlight strong { font-size: clamp(31px, 7vw, 46px); }
  .p2p-t-highlight span { font-size: 10px; }
  .results-chart-head { display: block; }
  .chart-legend { margin-top: 16px; }
  .mini-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 24px; }
  .grouped-bars { gap: 8px; padding-inline: 3px; }
  .grouped-bars em { font-size: 9px; }
  pre { padding: 20px; font-size: 11px; }
  th, td { padding-inline: 9px; white-space: nowrap; }
}
@media (max-width: 420px) { .mini-chart-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

/* Failure-case clips supplied with the project update. */
.analysis-case { margin-top: 58px; padding-top: 42px; border-top: 1px solid var(--line); }
.analysis-case-copy { max-width: 680px; }
.analysis-case-copy h3 { margin: 14px 0 18px; font-size: clamp(27px, 3vw, 39px); font-weight: 400; letter-spacing: -.05em; }
.analysis-case-copy p { color: var(--muted); font-size: 16px; line-height: 1.7; }
.analysis-case-copy .analysis-note { margin-top: 13px; color: var(--ink); font-size: 13px; }
.failure-video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 34px; }
.case-video { min-width: 0; }
.case-video video { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: cover; border-radius: 7px; background: var(--surface); }
.case-video figcaption { display: grid; gap: 4px; padding-top: 12px; }
.case-video figcaption strong { font-size: 14px; font-weight: 500; }
.case-video figcaption span { color: var(--muted); font-size: 12px; line-height: 1.45; }
@media (max-width: 740px) {
  .failure-video-grid { grid-template-columns: 1fr; gap: 28px; }
}

.demo-video-card video { width: 100%; aspect-ratio: 4 / 3; display: block; object-fit: cover; object-position: center bottom; border-radius: 7px; background: var(--surface); }
.demo-video-card h4 { margin: 14px 0 0; font-size: 13px; font-weight: 500; }
.demo-video-card p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

.task-video-player { min-width: 0; }
.task-video-player > video { width: 100%; aspect-ratio: 4 / 3; display: block; object-fit: cover; object-position: center bottom; border-radius: 8px; background: var(--surface); }
.task-video-switcher { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.task-video-switcher button { border: 1px solid var(--line); border-radius: 4px; padding: 7px 10px; color: var(--muted); background: transparent; font-size: 11px; }
.task-video-switcher button:hover, .task-video-switcher button[aria-selected="true"] { border-color: var(--ink); color: var(--ink); background: var(--surface); }
@media (max-width: 740px) { .task-video-switcher { gap: 6px; } }
/* These three original task clips frame the working area better from their center crop. */
.media-grid .demo-video-card:nth-child(2) video,
.media-grid .demo-video-card:nth-child(5) video,
.media-grid .demo-video-card:nth-child(6) video { object-position: center center; }
.ablation-table { margin-top: 42px; }
.table-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; }

/* Results tables: larger type, stable columns, and a single aligned highlight rule. */
.table-wrap { margin-top: 48px; padding-bottom: 4px; }
.table-wrap table { width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 1.45; }
.table-wrap caption { margin-bottom: 15px; font-size: 20px; letter-spacing: -.03em; }
.table-wrap th, .table-wrap td { padding: 16px 14px; vertical-align: middle; border-bottom: 1px solid var(--line); }
.table-wrap th { font-size: 12px; line-height: 1.3; font-weight: 500; color: var(--muted); }
.table-wrap th:first-child, .table-wrap td:first-child { padding-left: 0; }
.table-wrap tr.best { background: #e9eddf; }
.table-wrap tr.best td { border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); }
.table-wrap tr.best td:first-child { padding-left: 14px; border-left: 1px solid var(--accent); }
.table-wrap tr.best td:last-child { border-right: 1px solid var(--accent); }
.ablation-table table { min-width: 760px; }
.ablation-table th:first-child, .ablation-table td:first-child { width: 29%; }
.ablation-table th:nth-child(2), .ablation-table td:nth-child(2) { width: 27%; }
@media (max-width: 740px) {
  .table-wrap table { min-width: 680px; font-size: 14px; }
  .ablation-table table { min-width: 760px; }
}
.hero-media { overflow: hidden; border-radius: 9px; background: var(--surface); }
.hero-video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface); }

/* Task gallery: preserve portrait footage inside a calm, consistent frame. */
.task-video-player > video { aspect-ratio: 16 / 9; object-fit: contain; object-position: center; padding: 0; background: #e6e5df; }
.task-video-switcher { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
.task-video-switcher button { min-width: 0; display: grid; grid-template-rows: auto auto; gap: 7px; padding: 0 0 8px; overflow: hidden; text-align: left; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--paper); }
.task-video-switcher button img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; object-position: center; background: #e6e5df; }
.task-video-switcher button span { padding: 0 9px; font-size: 11px; line-height: 1.2; }
.task-video-switcher button:hover, .task-video-switcher button[aria-selected="true"] { border-color: var(--ink); color: var(--ink); background: var(--surface); }
.task-video-switcher button[aria-selected="true"] span { font-weight: 500; }
@media (max-width: 740px) {
  .task-video-switcher { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* Restore the compact task selector above; the gallery treatment belongs to the six cards below. */
.task-video-switcher { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.task-video-switcher button { display: inline-flex; min-width: 0; grid-template-rows: none; gap: 0; padding: 7px 10px; overflow: visible; text-align: center; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: transparent; font-size: 11px; }
.task-video-switcher button img { display: none; }
.task-video-switcher button span { padding: 0; font-size: 11px; }

/* The six task cards keep the complete portrait-oriented footage visible. */
.media-grid .demo-video-card video { object-fit: contain; object-position: center center; background: #e6e5df; }

/* Portrait task footage: full video over a softened, matching backdrop. */
.demo-video-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 7px; isolation: isolate; background: #e6e5df; }
.demo-video-frame::before { content: ""; position: absolute; inset: -24px; z-index: -2; background-image: var(--poster); background-position: center; background-size: cover; filter: blur(18px); transform: scale(1.08); opacity: .75; }
.demo-video-frame::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(230,229,223,.16); }
.demo-video-frame video { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; object-position: center; background: transparent; }
/* The task-switcher footage is 4:3; match the frame so it fills without side padding. */
.task-video-player > video { aspect-ratio: 4 / 3; object-fit: contain; }
.execution-heading { margin-top: 58px; margin-bottom: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.execution-heading h3 { font-size: 22px; font-weight: 400; letter-spacing: -.04em; }
.execution-heading p { margin-top: 6px; color: var(--muted); font-size: 13px; }
/* Keep the execution label aligned with the task-card container below it. */
.execution-heading { width: min(var(--max), calc(100% - var(--gutter) * 2)); margin: 58px auto 22px; box-sizing: border-box; }
.hero > .project-credits { width: 100%; margin-inline: 0; }
@font-face { font-family: Manrope; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../../../EgoHumanoid-V2/assets/fonts/manrope.woff2") format("woff2"); }
.hero h1, .hero .title-main, .hero .title-rest { font-family: Manrope, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.hero h1 { letter-spacing: -.075em; }
.hero .title-rest { letter-spacing: -.035em; }

/* Architecture board: grouped workflow regions with animated handoff arrows. */
.workflow-board { width: min(100%, 1180px); margin-top: 54px; padding: 28px; overflow: hidden; background: var(--surface); }
.workflow-board-head { display: flex; align-items: end; justify-content: space-between; gap: 26px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.workflow-board-head h3 { margin-top: 8px; font-size: clamp(25px, 3vw, 40px); font-weight: 400; letter-spacing: -.06em; }
.workflow-status { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.workflow-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(105,124,89,.45); animation: workflow-pulse 1.8s infinite; }
@keyframes workflow-pulse { 70% { box-shadow: 0 0 0 8px rgba(105,124,89,0); } 100% { box-shadow: 0 0 0 0 rgba(105,124,89,0); } }
.workflow-flow { display: grid; grid-template-columns: minmax(190px, 1.05fr) 26px minmax(270px, 1.55fr) 26px minmax(190px, 1.1fr) 26px minmax(210px, 1.25fr); gap: 12px; align-items: stretch; padding: 26px 0 22px; }
.workflow-lane { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease; }
.workflow-lane.is-active { border-color: var(--accent); box-shadow: 0 9px 25px rgba(41,44,40,.08); transform: translateY(-3px); }
.workflow-lane header { display: flex; align-items: baseline; gap: 8px; min-height: 42px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.workflow-lane header span { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.workflow-lane header h4 { font-size: 15px; font-weight: 500; line-height: 1.15; letter-spacing: -.025em; }
.workflow-source-grid, .workflow-stage-grid, .workflow-policy-grid { display: grid; gap: 9px; margin-top: 14px; }
.workflow-source-grid { grid-template-columns: 1fr; }
.workflow-source, .workflow-stage-card { overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.workflow-source img { width: 100%; height: 94px; object-fit: cover; }
.workflow-source-small img { height: 50px; object-position: center; }
.workflow-source strong, .workflow-stage-card strong { display: block; padding: 8px 9px 0; font-size: 11px; font-weight: 500; }
.workflow-source small, .workflow-stage-card small { display: block; padding: 3px 9px 9px; color: var(--muted); font-size: 9px; }
.workflow-stage-grid { grid-template-columns: repeat(3, 1fr); }
.workflow-stage-card img { width: 100%; height: 68px; object-fit: cover; }
.workflow-connector { position: relative; display: grid; place-items: center; color: var(--accent); }
.workflow-connector i { position: absolute; left: 0; right: 0; height: 2px; overflow: hidden; background: var(--line); }
.workflow-connector i::after { content: ""; display: block; width: 45%; height: 100%; background: var(--accent); animation: workflow-flow 1.7s linear infinite; }
.workflow-connector span { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); font-size: 15px; }
@keyframes workflow-flow { from { transform: translateX(-120%); } to { transform: translateX(270%); } }
.workflow-model-core { margin-top: 25px; }
.workflow-token-row { display: flex; flex-wrap: wrap; gap: 5px; }
.workflow-token-row b { padding: 5px 7px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font-size: 9px; font-weight: 400; }
.workflow-transformer { margin: 20px 0; padding: 17px 10px; border-radius: 5px; background: #e8eee2; color: var(--ink); font-size: 16px; line-height: 1.05; text-align: center; }
.workflow-transformer em { color: var(--accent); font-style: normal; font-size: 22px; }
.workflow-output { display: grid; gap: 5px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; }
.workflow-lane-note { margin-top: 18px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.workflow-policy-grid { grid-template-columns: 1fr; margin-top: 18px; }
.workflow-policy-grid article { padding: 9px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.workflow-policy-grid strong { display: block; font-size: 11px; font-weight: 500; }
.workflow-policy-grid small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.workflow-action-arrow { margin-top: 15px; color: var(--muted); font-size: 10px; }
.workflow-action-arrow span { margin-left: 5px; color: var(--accent); font-size: 18px; vertical-align: -2px; }
.workflow-outcome { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: center; padding-top: 20px; border-top: 1px solid var(--line); }
.workflow-outcome-label span { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.workflow-outcome-label strong { display: block; margin-top: 8px; font-size: 15px; font-weight: 500; line-height: 1.1; }
.workflow-outcome-label small { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.workflow-outcome img { width: 100%; height: 112px; object-fit: cover; object-position: center; border-radius: 5px; }
.workflow-progress { height: 2px; margin-top: 22px; background: var(--line); overflow: hidden; }
.workflow-progress span { display: block; width: 25%; height: 100%; background: var(--accent); transform-origin: left; transition: transform .45s ease; }
.workflow-board figcaption { margin-top: 15px; padding: 0; border: 0; }
.animated-paper-figure { width: min(100%, 1120px); margin: 48px auto 0; padding: 0; overflow: hidden; background: var(--surface); }
.paper-art-wrap { position: relative; overflow: hidden; background: #fff; }
.paper-art-wrap > img { display: block; width: 100%; height: auto; padding: 0; border-radius: 0; }
.paper-flow-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.paper-flow-path { fill: none; stroke: var(--accent); stroke-width: .7; stroke-linecap: round; stroke-dasharray: 2 2; opacity: .85; animation: paper-dash 1.8s linear infinite; }
.paper-flow-dot { fill: var(--accent); opacity: .95; filter: drop-shadow(0 0 2px rgba(105,124,89,.45)); }
@keyframes paper-dash { to { stroke-dashoffset: -8; } }
.paper-art-caption { display: flex; justify-content: space-between; gap: 15px; padding: 13px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.paper-art-caption b { color: var(--ink); font-weight: 500; }
.paper-art-status { color: var(--accent); white-space: nowrap; }
.animated-paper-figure figcaption { padding: 12px 16px 15px; }
@media (max-width: 740px) { .paper-art-caption { display: grid; gap: 5px; } .paper-art-status { white-space: normal; } }
@media (max-width: 980px) {
  .workflow-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow-connector { display: none; }
  .workflow-outcome { grid-column: 1 / -1; }
}
@media (max-width: 740px) {
  .workflow-board { padding: 20px; }
  .workflow-board-head { display: block; }
  .workflow-status { margin-top: 14px; }
  .workflow-flow { grid-template-columns: 1fr; }
  .workflow-outcome { grid-template-columns: 1fr; }
  .workflow-outcome img { height: auto; }
}
/* Inference footage is native 16:9, so let each card fill the full frame. */
.demo-video-frame { aspect-ratio: 16 / 9; }
.demo-video-frame video { object-fit: cover; object-position: center; }
.task-feature-visual { margin: 0; overflow: hidden; border-radius: 8px; background: var(--surface); }
.task-feature-visual img { display: block; width: 100%; height: auto; object-fit: contain; }
.task-feature-visual figcaption { padding: 12px 14px 14px; color: var(--muted); font-size: 11px; }
.method-explanation { display: grid; grid-template-columns: 150px 1fr; gap: 24px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.method-explanation strong { font-size: 13px; font-weight: 500; }
.method-explanation p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
@media (max-width: 740px) { .method-explanation { grid-template-columns: 1fr; gap: 7px; } }

/* Hero follows NativeMEM's full-bleed media composition, with P2P-T typography and color. */
.hero { position: relative; width: 100%; max-width: none; min-height: max(760px, calc(100svh - 82px)); margin: 0; padding: 0; display: flex; align-items: end; overflow: hidden; color: #f8f7f3; background: linear-gradient(135deg, #080a08 0%, #1a2418 50%, #050605 100%); }
.hero-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; background: linear-gradient(135deg, #080a08 0%, #1a2418 50%, #050605 100%); }
.hero-shade { display: block; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(12,14,11,.28), rgba(12,14,11,.14) 36%, rgba(12,14,11,.86) 100%); pointer-events: none; }
.hero-content { position: relative; z-index: 2; display: block; width: min(var(--max), calc(100% - var(--gutter) * 2)); margin: 0 auto; padding: clamp(120px, 24vh, 250px) 0 42px; }
.hero .eyebrow { margin-bottom: 18px; color: #d9e8c8; }
.hero h1 { max-width: 900px; font-size: clamp(62px, 8.2vw, 124px); line-height: .89; color: #f8f7f3; }
.hero .title-rest { max-width: 680px; margin-top: 22px; color: rgba(248,247,243,.82); font-size: clamp(18px, 2vw, 25px); line-height: 1.32; }
.hero .lead { max-width: 650px; margin-top: 24px; color: rgba(248,247,243,.78); font-size: 17px; line-height: 1.5; }
.hero .hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 25px; }
.hero .btn { border-color: rgba(248,247,243,.48); color: #f8f7f3; background: rgba(22,25,19,.22); }
.hero .btn:hover { border-color: #d9e8c8; background: rgba(217,232,200,.18); color: #fff; }
.hero .btn.primary { border-color: #d9e8c8; background: #d9e8c8; color: #20251d; }
.hero .btn.primary:hover { background: #e9f4df; color: #20251d; }
.hero .project-credits { display: grid; grid-template-columns: 1.7fr 1fr; width: 100%; margin: 48px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(248,247,243,.28); }
.hero .authors { color: rgba(248,247,243,.75); }
.hero .authors strong { color: #fff; }
.hero .affiliations { color: rgba(248,247,243,.6); }
.hero .corresponding { color: #d9e8c8; }
.hero-media { display: none; }
@media (max-width: 740px) {
  .hero { min-height: 760px; }
  .hero-content { width: calc(100% - 36px); padding-top: 100px; padding-bottom: 30px; }
  .hero .title-rest { font-size: 18px; }
  .hero .lead { font-size: 15px; }
  .hero .project-credits { grid-template-columns: 1fr; gap: 15px; margin-top: 34px; }
  .hero .affiliations { margin-top: 0; }
}
/* Center the hero content vertically over the full-bleed video. */
.hero { align-items: center; }
.hero-content { padding-top: 80px; padding-bottom: 80px; }
@media (max-width: 740px) {
  .hero { align-items: center; }
  .hero-content { padding-top: 80px; padding-bottom: 80px; }
}
/* Transparent navigation over the hero, with a solid state after scrolling. */
.topbar { position: fixed; inset: 0 0 auto; width: 100%; background: transparent; border-bottom-color: rgba(248,247,243,.24); color: #f8f7f3; }
.topbar .brand, .topbar .nav a { color: #f8f7f3; }
.topbar .nav a:hover, .topbar .nav a.active { color: #f8f7f3; background: rgba(217,232,200,.18); }
.topbar.is-scrolled { background: rgba(243,242,237,.94); border-bottom-color: var(--line); color: var(--ink); }
.topbar.is-scrolled .brand, .topbar.is-scrolled .nav a { color: var(--ink); }
.topbar.is-scrolled .nav a:hover, .topbar.is-scrolled .nav a.active { color: var(--ink); background: #e9eddf; }
/* Dark top fade makes the transparent navigation feel native to the hero video. */
.hero { background: linear-gradient(135deg, #080a08 0%, #1a2418 50%, #050605 100%); }
.hero-shade { background: linear-gradient(180deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.48) 12%, rgba(0,0,0,.08) 35%, rgba(12,14,11,.86) 100%); }
/* The navigation is fixed over the hero, so the hero must occupy the full viewport. */
.hero { min-height: 100svh; }
.attention-visual video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--surface); }
/* Qualitative analysis video: compact 16:9 crop for a lighter two-column balance. */
.attention-visual video { aspect-ratio: 16 / 9; max-height: 430px; object-fit: cover; object-position: center; }
/* Keep the analysis video at 4:3 and align its height with the explanation block. */
.attention-visual { display: flex; justify-content: center; }
.attention-visual video { width: 100%; max-width: 560px; aspect-ratio: 4 / 3; max-height: 360px; object-fit: cover; object-position: center; }
@media (max-width: 740px) { .attention-visual video { max-width: none; max-height: none; } }
.analysis-highlight { color: var(--accent); font-weight: 600; }
.attention-visual video { max-width: 480px; max-height: 300px; }
@media (max-width: 740px) { .attention-visual video { max-width: none; max-height: none; } }
.analysis-highlight-title { color: var(--accent); }

/* Evaluation protocol: keep the setup concise and let the clips carry the example. */
.evaluation-section .section-head h2 { max-width: 820px; }
.protocol-intro { max-width: 860px; }
.protocol-intro p { color: var(--muted); font-size: 16px; line-height: 1.8; }
.protocol-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 52px; }
.protocol-video-card { min-width: 0; }
.protocol-video-card video { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: cover; border-radius: 7px; background: #e6e5df; }
.protocol-video-card figcaption { display: grid; gap: 4px; padding-top: 13px; }
.protocol-video-card figcaption strong { font-size: 14px; font-weight: 500; }
.protocol-video-card figcaption span { color: var(--muted); font-size: 12px; line-height: 1.5; }
@media (max-width: 740px) {
  .protocol-videos { grid-template-columns: 1fr; gap: 30px; margin-top: 38px; }
}