/* Shared visual system. Loaded after the feature styles so typography and
   controls keep the same hierarchy across all research sections. */
@font-face {
  font-family: Inter;
  src: url('assets/fonts/InterVariable-4.1.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-sans: Inter, 'Helvetica Neue', Arial, sans-serif;
  --ink: #1d2736;
  --body: #4d5969;
  --muted: #697585;
  --blue: #326b9d;
  --pale: #f6f8fa;
  --line: #dfe5eb;
  --orange: #bd672f;
  --orange-text: #a95423;
  --blue-soft: #edf3f8;
  --orange-soft: #fbf3ec;
  --radius: 8px;
  --control-font-size: 14px;
  font-family: var(--font-sans);
  font-size: 16px;
}

body { font-family: var(--font-sans); }
button, input, summary { font-family: inherit; }
::selection { background: #dce8f2; color: var(--ink); }
body :is(h1, h2, h3, h4) { font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
body :is(h2, .section-copy h2, .section-heading h2,
  .method-section .section-heading h2, .benchmark-section .section-heading h2) {
  font-size: clamp(32px, 3.6vw, 48px);
  letter-spacing: -.025em;
  line-height: 1.16;
}
body h2 em { color: inherit; }
body :is(.feature-heading h3, .pretrained-goal-details > .feature-heading h3,
  .architecture-intro h3, .method-section .architecture-intro h3,
  .ego-results-heading h3, .action-explainer-heading h3,
  .scaling-intro h3, .real-results-intro h3, .qualitative-heading h3,
  .zero-stage-heading h3, .figure-heading h3, .goal-highlight h3,
  .bonus-heading .bonus-subtitle) { font-size: 28px; line-height: 1.3; }
body :is(.interface-node h3, .goal-design-steps strong, .video-card-body h3,
  .goal-input-copy h4, .long-caption h3) {
  font-size: 20px; font-weight: 600; letter-spacing: -.015em; line-height: 1.35;
}

/* Calm surfaces allow the figures and real-world footage to carry the color. */
body .hero { background: linear-gradient(180deg, var(--pale), #fff 470px); }
body :is(.zero-section, .benchmark-section) { background: #fff; border-color: var(--line); }
body :is(.method-section, .human-section, .bonus-section) { background: var(--pale); border-color: var(--line); }
body :is(.benchmark-card, .method-figure, .goal-case .video-wrap,
  .goal-thumbnail button, .human-section .goal-thumbnail button) { border-color: var(--line); border-radius: var(--radius); }
body .executor-node { background: var(--blue-soft); border-color: #c5d6e4; }
body .comparison-protocol > span { background: var(--pale); border-color: var(--line); }
body .dialog-toolbar { background: var(--pale); }

/* A strong opening, followed by quieter, readable editorial type. */
body .hero h1 { font-size: clamp(48px, 6.4vw, 88px); font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
body .hero h1 .project-name { display: block; color: var(--ink); }
body .hero h1 .project-name > span { color: var(--blue); }
body .hero h1 .paper-subtitle { display: block; max-width: 1040px; margin: 26px auto 0; color: var(--ink); font-size: clamp(26px, 2.8vw, 38px); font-weight: 500; letter-spacing: -.025em; line-height: 1.25; text-wrap: balance; }
body .authors sup { color: var(--blue); }
body .authors .author-name { display: inline-block; white-space: nowrap; }
body .hero .paper-info { max-width: 1100px; margin: 30px auto 0; padding: 0; }
body .hero .authors { max-width: 1080px; font-size: 16px; line-height: 1.85; color: var(--ink); text-wrap: balance; }
body .institution-names { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; margin: 18px auto 0; color: var(--body); font-size: 14px; line-height: 1.6; }
body .hero .author-note { margin-top: 12px; font-size: 12px; }
body .institution-logos { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 26px 40px; margin: 28px auto 0; }
body .institution-logos img { display: block; width: auto; height: 58px; max-width: 190px; object-fit: contain; }
body .institution-logos .logo-pku { width: 190px; height: auto; max-height: 64px; }
body .institution-logos .logo-mit { height: 44px; }
body .institution-logos .logo-nvidia { height: 52px; }
body .hero-statement { font-size: clamp(26px, 2.8vw, 38px); font-weight: 400; letter-spacing: -.025em; line-height: 1.25; }
body .hero-description { max-width: 780px; margin-inline: auto; font-size: 16px; line-height: 1.75; }
body :is(.hero .eyebrow, .eyebrow, .feature-heading .eyebrow,
  .benchmark-card-head .eyebrow, .case-label, .interface-node .case-label,
  .goal-input-copy .case-label, .goal-design-steps > div > span,
  .goal-reasoning span, .citation-intro .eyebrow) {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: 1.5; color: var(--muted);
}
body .hero .eyebrow { color: var(--blue); }
body :is(.section-heading > p, .feature-heading > p,
  .pretrained-goal-details > .feature-heading p, .architecture-intro p,
  .action-explainer-heading p, .ego-results-heading p, .scaling-intro p,
  .zero-stage-heading p, .human-transfer-context, .bonus-description,
  .goal-highlight p) { font-size: 16px; line-height: 1.75; color: var(--body); }
body .section-heading { gap: 48px; align-items: start; }
body .section-heading > p { max-width: 440px; padding-top: 3px; }
body :is(.interface-node p, .goal-design-steps p, .goal-provenance p,
  .scaling-stages p, .real-results-intro p, .qualitative-heading p,
  .goal-reasoning p, .goal-input-copy p, .video-card-body p,
  .long-caption p, .citation-intro p) { font-size: 15px; line-height: 1.7; color: var(--body); }
body :is(.fine-print, .benchmark-card .fine-print, .benchmark-section .wrap > .fine-print,
  figcaption, .method-figure figcaption, .benchmark-card figcaption,
  .teaser-demo figcaption, .bonus-pair figcaption, .film-caption,
  .comparison-note, .interface-note, .camera-note, .pair-note,
  .hero .research-links-status, .paper-details > summary, .author-note,
  .affiliations > span, .goal-output-label, .protocol-tag,
  .human-feature-label > small, .bonus-playback > span,
  .benchmark-score > span, .benchmark-card .benchmark-score > span,
  .benchmark-enlarge-note) { font-size: 12px; line-height: 1.65; color: var(--muted); }
body :is(.benchmark-scope, .benchmark-rank-scope, .comparison-protocol > span,
  .model-lineage > span, .path-step small, .authors) { font-size: 13px; line-height: 1.7; }
body :is(.metric-label, .hero-metrics > a > span:last-child,
  .mini-stat > span, .interface-output, .scale-dots span,
  .real-trend p, .real-trend span, .task-sequence) { font-size: 12px; line-height: 1.6; }
body :is(.model-lineage b, .path-step strong) { font-size: 16px; letter-spacing: -.01em; font-weight: 600; }
body .path-index { font-size: 12px; }
body .human-feature-label { font-size: 15px; flex-wrap: wrap; }
body .protocol-tag { white-space: normal; }
body .zero-camera-panel > figcaption { font-size: 14px; color: var(--body); }
body .goal-input-copy p { margin-top: 8px; }

/* Reserve orange for measured results; decorative arrows use quiet ink. */
body :is(.goal-design-steps > b, .interface-arrow, .teaser-arrow,
  .human-feature-label > b, .task-sequence i, .real-trend > b,
  .bridge-flow > b, .action-flow b, .action-flow i) { color: var(--muted); }
body .rank-label { color: var(--orange-text); font-weight: 600; }
body .rank-badge { color: var(--orange-text); background: var(--orange-soft); border-color: #e4c8b5; font-size: 12px; font-weight: 600; letter-spacing: 0; border-radius: 6px; }
body :is(.hero-metrics strong, .benchmark-card .benchmark-score > strong,
  .real-trend strong, .mini-stat strong) { font-weight: 600; letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; }
body .hero-metrics strong { font-size: clamp(38px, 4vw, 54px); }
body .hero-metrics .metric-change { font-size: clamp(30px, 3.3vw, 44px); }
body .benchmark-card-head h3 { font-size: 26px; letter-spacing: -.02em; line-height: 1.25; }
body .benchmark-card .benchmark-score > strong { font-size: 44px; }
body .benchmark-card-head { min-height: 130px; }
body .real-trend strong { color: var(--ink); }
body .real-trend > div:last-child { background: var(--orange-soft); border-color: #e4c8b5; }
body .real-trend > div:last-child strong { color: var(--orange); }
body .scale-dots span { color: var(--body); background: var(--pale); }
body .hybrid-dots span { color: var(--orange-text); background: var(--orange-soft); }

/* One vocabulary for primary actions, secondary actions, and selected tabs. */
body :is(.button, .pair-controls .play-pair, .play-pair, .bonus-playback .button,
  .dialog-close, .citation-box button, .segmented button, .pair-camera-control button,
  .camera-options .segmented button, .view-switch button) {
  min-height: 44px; padding: 10px 16px; border-radius: var(--radius);
  font-family: var(--font-sans); font-size: var(--control-font-size); font-weight: 600;
  line-height: 1.4; letter-spacing: 0; box-shadow: none;
}
body :is(.button.secondary, .play-pair, .pair-controls .play-pair,
  .dialog-close, .citation-box button) { color: var(--blue); border: 1px solid var(--line); background: #fff; }
body :is(.button.secondary, .play-pair, .dialog-close, .citation-box button):hover { background: var(--blue-soft); border-color: #b6cbdc; }
body .button.primary { color: #fff; background: var(--ink); border-color: var(--ink); }
body .button.primary:hover { background: #344357; }
body .button:hover { transform: none; }
body .segmented { gap: 6px; }
body .segmented button { color: var(--body); border: 1px solid transparent; background: transparent; }
body .segmented button:hover { color: var(--blue); background: var(--blue-soft); }
body .segmented button.active { color: var(--blue); border-color: #c5d6e4; background: var(--blue-soft); }
body .pair-controls .play-pair { flex: 0 0 260px; width: 260px; margin-left: auto; }
body :is(button, a, summary):focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
body .research-links { gap: 10px; }
body .research-link {
  min-height: 46px; padding: 11px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--blue); font: 600 14px/1.4 var(--font-sans); box-shadow: none;
}
body .research-link:disabled { color: var(--muted); -webkit-text-fill-color: var(--muted); background: #fff; }
body a.research-link:hover { background: var(--blue-soft); box-shadow: none; border-color: #b6cbdc; }
body .research-link svg { width: 18px; height: 18px; }
body .resource-emoji { font-size: 19px; }
body .wordmark { letter-spacing: -.025em; }
body nav a { font-size: 13px; font-weight: 400; }
body nav { gap: 20px; }
body .citation-box { padding-top: 56px; }
body .citation-section > * { min-width: 0; }
body .citation-box pre { font-size: 13px; line-height: 1.75; }
body .citation-details > summary { font-size: 16px; }
body .citation-intro h2 { font-size: 34px; }
body footer.wrap { font-size: 12px; }

@media (max-width: 1100px) {
  body nav { gap: 14px; }
  body nav a { font-size: 12px; }
  body .benchmark-card .benchmark-score > strong { font-size: 38px; }
  body .benchmark-card-head h3 { font-size: 23px; }
}
@media (max-width: 850px) {
  body .section-heading { gap: 24px; }
  body .section-heading > p { max-width: none; }
  body .hero-metrics > a { padding-inline: 18px; }
}
@media (max-width: 700px) {
  body .pair-controls .play-pair { flex: 0 1 260px; }
  body .demo-toolbar { align-items: flex-start; flex-wrap: wrap; }
  body .bonus-playback { flex-wrap: wrap; }
  body .bonus-playback > span { max-width: none; }
  body .goal-input { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
  body .goal-thumbnail { width: 120px; }
  body .goal-thumbnail img { height: 90px; }
  body .real-trend strong { font-size: 28px; }
}
@media (max-width: 600px) {
  body .hero .paper-info { margin-top: 24px; }
  body .hero .authors { font-size: 14px; line-height: 1.85; }
  body .institution-names { font-size: 12px; gap: 5px 14px; margin-top: 16px; }
  body .institution-logos { gap: 22px 26px; margin-top: 22px; }
  body .institution-logos img { height: 44px; max-width: 125px; }
  body .institution-logos .logo-pku { width: 150px; max-width: 150px; }
  body .institution-logos .logo-mit { height: 33px; }
  body .institution-logos .logo-nvidia { height: 39px; }
  body .hero { padding-top: 48px; }
  body .hero h1 { font-size: clamp(32px, 8.2vw, 48px); letter-spacing: -.035em; }
  body .hero h1 .paper-subtitle { margin-top: 20px; font-size: 24px; line-height: 1.3; }
  body .hero-statement { font-size: clamp(24px, 5vw, 29px); line-height: 1.3; }
  body :is(.hero-description, .section-heading > p, .feature-heading > p,
    .pretrained-goal-details > .feature-heading p) { font-size: 15px; }
  body :is(.feature-heading h3, .pretrained-goal-details > .feature-heading h3,
    .architecture-intro h3, .method-section .architecture-intro h3,
    .ego-results-heading h3, .action-explainer-heading h3,
    .scaling-intro h3, .real-results-intro h3, .qualitative-heading h3,
    .zero-stage-heading h3, .figure-heading h3, .goal-highlight h3,
    .bonus-heading .bonus-subtitle) { font-size: 25px; }
  body .hero-metrics > a { padding-inline: 0; }
  body .research-link { padding-inline: 10px; }
  body .research-link:last-child { min-width: 145px; }
  body .benchmark-card-head { flex-wrap: wrap; gap: 12px; min-height: 0; }
  body .benchmark-card-head .benchmark-score { margin-left: auto; }
  body .benchmark-card-head .eyebrow { font-size: 11px; }
  body .benchmark-card .benchmark-score > strong { font-size: 36px; }
  body .real-trend > div { padding: 14px 8px; }
  body .real-trend strong { font-size: clamp(24px, 6vw, 30px); }
  body .real-trend > b { font-size: 16px; }
  body .path-step { padding: 18px 12px; }
  body .path-step strong { font-size: 15px; }
  body .citation-box pre { font-size: 12px; }
  body .site-header nav a { font-size: 14px; }
}
@media (max-width: 380px) {
  body .goal-input { grid-template-columns: 100px minmax(0, 1fr); gap: 12px; }
  body .goal-thumbnail { width: 100px; }
  body .goal-thumbnail img { height: 76px; }
  body .goal-input-copy h4 { font-size: 18px; }
}