/* Shared product styles, typography, and responsive tokens come from cosmos3/style.css. */
@font-face { font-family: "NVIDIA-NALA"; src: url("assets/auto/NVIDIASansVF_NALA_W_Wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root { --sim-width: 1120px; }
html { scroll-padding-top: 0; }
body { background: #111111; }
button { color: inherit; }
[hidden] { display: none !important; }
.simulation-page, .example-dialog { font-family: "NVIDIA-NALA", Arial, Helvetica, sans-serif; }
.simulation-page :is(button, input, select, textarea, pre:not(.citation-bibtex), code, kbd, samp, output), .example-dialog :is(button, input, select, textarea, pre, code, kbd, samp, output) { font-family: inherit; }
.simulation-page p { margin-bottom: 0; }
.simulation-page :is(a, button, input, summary):focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.green, .hero-brand { color: var(--green); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 2000; top: 8px; left: 8px; padding: 12px 18px; transform: translateY(-180%); background: var(--green); color: #000; border-radius: 6px; }
.skip-link:focus { transform: translateY(0); }

/* Use the Cosmos 3 hero components with room for the full report title. */
.sim-hero { --cosmos3-hero-title-top: 47%; }
.sim-hero .hero-content { display: contents; }
.sim-hero .project-title { max-width: 1120px; width: min(1120px, calc(100% - 48px)); font-size: min(var(--cosmos3-hero-title-size), 10vh); line-height: 1.08; }
.hero-title-line { display: block; }
.hero-title-line + .hero-title-line { margin-top: 0.35em; font-size: 0.8em; }
.hero-brand, .hero-title-phrase { white-space: nowrap; }
.hero-backdrop { pointer-events: auto; }
.hero-backdrop video { opacity: 0.3; }
/* script.js redraws the hero tile sheet here to fit the box; the video underneath is the no-canvas fallback. */
.hero-wall { position: absolute; inset: 0; width: 100%; height: 100%; filter: saturate(1.08) brightness(1.14) contrast(1.05); }

/* The shared section class supplies the full-width canvas and 1120px inner cap. */
.simulation-page .section-heading { position: relative; margin: 0 auto 34px; padding: 0; border: 0; }
.section-heading.centered { text-align: center; }
.simulation-page .section-heading h2 {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.22;
  text-wrap: balance;
}
.simulation-page .section-heading h2 { font-size: var(--cosmos3-section-heading-size); }
.simulation-page .capability-section .section-heading h2 { font-size: var(--cosmos3-section-subheading-size); }
.simulation-page .section-heading p:not(.eyebrow) {
  max-width: 890px;
  margin: 13px 0 0;
  color: #999999;
  font-size: var(--cosmos3-section-body-size);
  font-weight: 500;
  line-height: 1.5;
  text-wrap: balance;
}
.simulation-page .section-heading.centered p { margin-left: auto; margin-right: auto; }
.simulation-page .section-heading .eyebrow { margin: 0 0 10px; }
.intro-section .section-heading { margin-bottom: clamp(38px, 4.8vw, 62px); }
.intro-section #approach { scroll-margin-top: 64px; }
.intro-section .chunk-diagram { margin-top: 0; }
.under-demo a { color: var(--green); white-space: normal; }
.section-nav { padding-top: 20px; padding-bottom: 80px; }
.section-nav-inner { width: 100%; }
.simulation-page .omni-controls-intro { margin-bottom: 24px; }
.section-nav-links { width: 100%; max-width: 1080px; }
.section-nav-links a[aria-current] { border-color: var(--green); }
.section-nav-links .omni-control { min-width: 0; white-space: normal; }
.model-nav-item { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.model-nav-performance { display: flex; flex-direction: column; gap: 5px; margin: 0; color: #bea04d; text-align: center; line-height: 1.4; }
.model-nav-performance strong { font-size: var(--cosmos3-section-body-size); font-weight: 600; }
.model-nav-performance > span { color: #8f7c46; font-size: 0.8rem; font-weight: 400; }
.model-nav-performance strong .performance-value { color: #ffe24a; }

/* Media surfaces use the same border, 16px radius, gradients, and shadow as Cosmos 3 carousels. */
.demo-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.026)), #111111;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 42px rgba(0, 0, 0, 0.34);
}
.demo-caption {
  padding: clamp(10px, 1.2vw, 14px);
  color: #999999;
  font-size: var(--cosmos3-caption-font-size);
  font-weight: 400;
  line-height: 1.25;
}
.demo-caption { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.demo-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 26px); }
.demo-kicker { color: rgba(255, 255, 255, 0.78); font-size: var(--cosmos3-section-body-size); font-weight: 500; line-height: 1.5; }
.segmented-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(12px, 1.6vw, 18px); }
.bimanual-controls { width: min(100%, 420px); }
.camera-stage { position: relative; background: #080808; }
.camera-clip { position: relative; }
.camera-clip video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* 480p camera rollouts read better as a 2x2 grid than stretched to full width. */
.camera-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.camera-grid figure { position: relative; overflow: hidden; margin: 0; }
/* Each clip's camera path is drawn in a small inset synced to that clip's playback. */
.trajectory-inset { position: absolute; z-index: 1; top: 10px; left: 10px; display: grid; grid-template-rows: max-content minmax(0, 1fr); width: clamp(112px, 30%, 210px); aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 8px; background: rgba(8, 8, 8, 0.65); pointer-events: none; }
.trajectory-heading { padding: 5px 6px 0; color: #dceaf0; font-size: clamp(7px, .7vw, 10px); line-height: 1.4; font-weight: 650; text-transform: uppercase; white-space: nowrap; }
.trajectory-inset canvas { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; }
/* Text/window chrome stays in HTML; only the action itself is pre-rendered. */
.robot-example-grid > figure > video { aspect-ratio: 20 / 11; object-fit: contain; background: #080808; }
.action-inset { position: absolute; z-index: 1; top: 2.5%; left: 1.44%; width: 30%; min-width: 92px; max-width: 300px; padding: 5px; border: 1px solid rgba(100, 123, 128, 0.59); border-radius: 8px; background: rgba(10, 17, 21, 0.65); color: #dceaf0; pointer-events: none; }
.action-heading { display: flex; align-items: center; justify-content: space-between; gap: 3px; font-size: clamp(7px, .7vw, 10px); line-height: 1.4; font-weight: 650; text-transform: uppercase; white-space: nowrap; }
.action-mode { color: #addd57; }
.action-scene { position: relative; width: 100%; aspect-ratio: 14 / 9; margin: 3px 0; }
.action-scene :is(canvas, img) { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.action-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 5px; color: #c0d1d8; font-size: clamp(6px, .65vw, 9px); line-height: 1.25; }
.action-key { display: inline-flex; align-items: center; gap: 3px; }
.action-key::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--action-color); }
.action-left { --action-color: #69adff; }
.action-right { --action-color: #ff9767; }
.action-head { --action-color: #addd57; }
.example-expand { position: absolute; z-index: 2; inset: 0; width: 100%; border: 0; border-radius: 0; background: transparent; cursor: zoom-in; }
.example-expand > span { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.35); border-radius: 6px; color: #fff; background: rgba(0,0,0,.55); font: 22px/1 "NVIDIA-NALA",Arial,sans-serif; }
.example-expand:hover { box-shadow: inset 0 0 0 2px rgba(118,185,0,.7); }
.camera-clip > .floating-play { z-index: 3; }
.example-dialog-open { overflow: hidden; }
.example-dialog { width: min(1500px, 96vw); max-width: 96vw; max-height: 94dvh; margin: auto; padding: 0; overflow: auto; border: 1px solid #39434a; border-radius: 14px; color: #edf2f5; background: #11171b; box-shadow: 0 24px 90px rgba(0,0,0,.65); }
.example-dialog::backdrop { background: rgba(0,0,0,.78); }
.example-dialog-header { position: sticky; top: 0; z-index: 4; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 24px; border-bottom: 1px solid #2c3439; background: #11171b; }
.example-dialog-header h2 { margin: 4px 0; font-size: clamp(19px, 2vw, 28px); }
.example-dialog-header p { margin: 0; }
.example-dialog-header [data-example-subtitle] { color: #b6c2c9; font-size: 14px; }
.example-dialog-close { flex: 0 0 38px; height: 38px; border: 1px solid #4d5b63; border-radius: 8px; color: #fff; background: #20292f; font-size: 27px; }
.example-dialog-views { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); align-items: start; gap: 18px; margin: 0; padding: 18px 24px; }
.example-dialog-views h3, .example-dialog-caption h3 { margin: 0 0 9px; color: #bce17d; font-size: 15px; font-weight: 600; }
.example-dialog-rgb > video { display: block; width: 100%; max-height: 56vh; object-fit: contain; background: #05080a; }
.example-dialog .action-inset { position: relative; inset: auto; width: 100%; max-width: none; min-width: 0; padding: 12px; pointer-events: auto; }
.example-dialog .action-heading { font-size: 12px; }
.example-dialog .action-legend { font-size: 11px; }
.example-dialog .dialog-trajectory { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3; }
.example-dialog .trajectory-heading { padding: 12px 12px 0; font-size: 12px; }
.example-dialog-caption { padding: 18px 24px 24px; border-top: 1px solid #2c3439; }
.example-dialog-caption p { max-height: 25vh; margin: 0; overflow: auto; padding-right: 8px; color: #d0d9df; font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.example-dialog-caption .caption-unavailable { color: #a7b3bb; font-style: italic; }
@media (max-width: 639px) {
  .robot-example-grid .action-inset { width: 38%; min-width: 64px; padding: 2px; }
  .robot-example-grid .action-heading { font-size: 5px; }
  .robot-example-grid .action-legend { font-size: 5px; }
  .example-expand > span { top: 4px; right: 4px; width: 20px; height: 20px; font-size: 17px; }
  .example-dialog { width: 96vw; }
  .example-dialog-header, .example-dialog-views, .example-dialog-caption { padding: 14px; }
  .example-dialog-views { grid-template-columns: 1fr; }
  .example-dialog-action { width: min(100%, 360px); }
  .example-dialog-caption p { font-size: 14px; }
}
.transfer-output figcaption {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 24px);
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background: rgba(8, 8, 8, 0.76);
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(0.66rem, 0.82vw, 0.76rem);
  font-weight: 500;
  line-height: 1.15;
}
.small-dot { display: block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: #b7b7b7; }
.green-dot { background: var(--green); }
.under-demo { margin-top: 13px; }
.under-demo p { max-width: none; color: #999999; font-size: var(--cosmos3-section-body-size); font-weight: 500; line-height: 1.5; }

/* Accessible playback controls retain the shared 42px media-control component. */
.floating-play { position: absolute; z-index: 2; bottom: clamp(7px, 1.05vw, 10px); right: clamp(7px, 1.05vw, 10px); }
.transfer-output { display: grid; grid-template-columns: 0.85fr 1.15fr; align-items: stretch; background: #080808; }
.transfer-output figure { position: relative; align-self: center; overflow: hidden; margin: 0; }
.transfer-output video { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.transfer-output figcaption { bottom: 10px; left: 10px; }
.transfer-context { display: flex; flex-direction: column; justify-content: center; padding: clamp(22px, 3vw, 38px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)); }
.transfer-context > p:not(.result-task-label) { color: #b7b7b7; font-size: var(--cosmos3-section-body-size); line-height: 1.5; }
.transfer-context dl { margin: 28px 0 0; font-size: var(--cosmos3-benchmark-body-size); line-height: 1.5; }
.transfer-context dt { margin-top: 20px; color: #eee; font-weight: 600; }
.transfer-context dt:first-child { margin-top: 0; }
.transfer-context dd { margin: 6px 0 0; color: #999; }
.paired-controls { display: flex; align-items: center; gap: 12px; padding: 14px clamp(18px, 2.4vw, 26px); background: rgba(8, 8, 8, 0.5); }
.paired-controls .play-toggle, .restart-button { flex: 0 0 42px; }
.fullscreen-button { flex: 0 0 42px; }
.media-seek { width: 100%; min-width: 20px; height: 4px; margin: 0 3px; accent-color: var(--green); cursor: pointer; }
.grid-playback-panel { border-top: 1px solid #30383c; background: #11171b; }
.grid-playback-heading { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 16px; padding: 12px clamp(18px, 2.4vw, 26px) 0; color: #bce17d; font-size: 13px; font-weight: 600; }
.grid-playback-heading [data-media-frame] { color: #b6c2c9; font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
.grid-playback-controls { display: grid; grid-template-columns: max-content 42px minmax(60px, 1fr) max-content; background: transparent; }
.grid-playback-controls .play-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: auto; min-width: 166px; padding: 0 13px; font-size: 14px; }
.grid-playback-controls .media-seek { height: 28px; }
.grid-seek-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.grid-seek-row .media-seek { flex: 1; width: 0; min-width: 40px; touch-action: none; }
@media (max-width: 639px) {
  .grid-playback-heading { padding: 12px 12px 0; font-size: 12px; }
  .grid-playback-controls { grid-template-columns: max-content 36px minmax(0, 1fr); }
  .grid-playback-controls .play-toggle { min-width: 150px; height: 40px; font-size: 13px; }
  .grid-playback-controls .media-time { grid-column: 3; grid-row: 1; text-align: right; }
  .grid-playback-controls .grid-seek-row { grid-column: 1 / -1; grid-row: 2; margin-top: 5px; }
}
.media-time { min-width: 83px; color: rgba(255, 255, 255, 0.78); text-align: right; font-size: 0.75rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.auto-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.auto-example video { width: 100%; aspect-ratio: 80 / 63; object-fit: contain; background: #080808; }
.auto-example:fullscreen { display: flex; flex-direction: column; justify-content: center; background: #080808; }
.auto-example:fullscreen video { width: 100%; height: calc(100vh - 74px); aspect-ratio: auto; object-fit: contain; }
.auto-example:fullscreen .paired-controls { flex-shrink: 0; }

/* Method and model cards follow the reference section and card hierarchy. */
.chunk-diagram { --chunk-gap: 18px; width: min(100%, 780px); margin: 34px auto; }
.chunk-stream-labels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--chunk-gap); color: #b7b7b7; font-size: 0.8rem; font-weight: 500; line-height: 1.35; }
.chunk-stream-labels > span:first-child { grid-column: 1 / 4; }
.chunk-stream-labels > span:last-child { color: #bce17d; text-align: center; }
.chunk-timeline { overflow: hidden; padding: 16px 0 18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000); mask-image: linear-gradient(90deg, transparent, #000 5%, #000); }
.chunk-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--chunk-gap)) / 4); gap: var(--chunk-gap); width: 100%; will-change: transform; }
.stream-chunk { min-width: 0; overflow: hidden; border: 1px solid rgba(118, 185, 0, 0.28); border-radius: 12px; background: #161b12; opacity: var(--chunk-opacity, 1); }
.stream-chunk.is-current { border-color: rgba(118, 185, 0, 0.58); }
.stream-chunk.is-ready { border-color: #a2dd3c; box-shadow: 0 0 0 1px rgba(118, 185, 0, 0.28), 0 0 22px rgba(118, 185, 0, 0.22); }
.chunk-control-tokens { display: flex; justify-content: center; align-items: center; gap: 8px; height: 38px; padding: 8px; border-bottom: 1px solid rgba(118, 185, 0, 0.18); background: rgba(118, 185, 0, 0.055); }
.chunk-control-tokens i { display: block; flex: 0 0 17px; height: 20px; border: 1px solid rgba(165, 219, 82, 0.65); border-radius: 4px; background: linear-gradient(145deg, rgba(118, 185, 0, 0.42), rgba(118, 185, 0, 0.1)); }
/* Generated tabletop rollout robot-yam_000-seed2025, sampled every four seconds from 1s to 29s. */
.chunk-visual { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #1b2316 url("assets/chunk-preview.jpg?v=robot-4s") var(--chunk-preview-position, 0%) center / 800% 100% no-repeat; }
.chunk-grain { position: absolute; inset: 0; opacity: 0; background: #273022 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='104'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.9' filter='url(%23n)'/%3E%3C/svg%3E") center / cover; }
.chunk-label { display: block; padding: 9px 6px; color: #aeb7a5; text-align: center; font-size: 0.7rem; font-weight: 500; line-height: 1.25; white-space: nowrap; }
.is-current .chunk-label { color: #e7efdb; }
.is-ready .chunk-label { color: #bce17d; }
.chunk-stream-footer { display: flex; justify-content: space-between; gap: 12px; color: #999999; font-size: var(--cosmos3-caption-font-size); font-weight: 500; line-height: 1.35; }
.chunk-stream-live { display: inline-flex; align-items: center; gap: 8px; }
.chunk-stream-live i { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--green); }
.chunk-stream-phase { color: #bce17d; text-align: right; }
.chunk-stream-fallback { margin-top: 12px; color: #999999; font-size: 0.8rem; }
.model-card { justify-content: flex-start; }
.model-card h3 { width: 100%; }
.model-card-name { display: inline-block; }
.model-card > p { margin-bottom: clamp(18px, 2vw, 24px); }
.model-card .benchmark-card-link { margin-top: auto; }
.benchmark-summary-links .link-btn:disabled, .hero-links .link-btn:disabled { opacity: 0.5; cursor: default; pointer-events: none; }
.benchmark-summary-card > .resource-status { margin-top: 14px; font-size: var(--cosmos3-caption-font-size); line-height: 1.25; }

@media (min-width: 921px) {
  .model-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .model-card h3 { display: flex; align-items: center; justify-content: center; min-height: 2.56em; }
}

@media (min-width: 640px) and (max-height: 720px) {
  .sim-hero { --cosmos3-hero-title-top: 40%; }
}

@media (min-width: 640px) and (max-height: 520px) {
  .sim-hero { --cosmos3-hero-title-top: 36%; min-height: 340px; }
  .sim-hero .hero-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; left: 24px; right: 24px; }
  .sim-hero .hero-links .link-btn { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 920px) {
  .intro-section .section-heading { margin-bottom: 34px; }
  .demo-toolbar { flex-wrap: wrap; }
}

@media (max-width: 639px) {
  .intro-section .section-heading h2 { line-height: 1.28; }
  .simulation-page .section-heading { margin-bottom: 26px; }
  .simulation-page .intro-section .section-heading { margin-bottom: 30px; }
  .section-nav { padding-top: 8px; padding-bottom: 80px; }
  .sim-hero { --cosmos3-hero-title-top: 40%; --cosmos3-hero-subtitle-top: 60%; min-height: max(92vh, 520px); min-height: max(92svh, 520px); }
  .sim-hero .project-title { width: calc(100% - 36px); }
  .demo-panel { border-radius: 12px; }
  .demo-caption { padding: 9px; line-height: 1.3; }
  .demo-toolbar { gap: 12px; padding: 14px; }
  .demo-kicker { font-size: var(--cosmos3-section-body-size); }
  .segmented-control { width: 100%; gap: 10px; }
  .transfer-output { grid-template-columns: 1fr; }
  .transfer-output figure { order: -1; }
  .transfer-context { padding: 20px; }
  .transfer-context dl { margin-top: 18px; }
  .transfer-output figcaption { bottom: 7px; left: 7px; padding: 5px 7px; gap: 5px; font-size: 0.64rem; line-height: 1.15; }
  .trajectory-inset { top: 6px; left: 6px; width: 34%; border-radius: 6px; }
  .transfer-output .small-dot { width: 4px; height: 4px; }
  .paired-controls { gap: 8px; padding: 12px; }
  .paired-controls .play-toggle, .restart-button { flex-basis: 36px; }
  .fullscreen-button { flex-basis: 36px; }
  .media-time { min-width: 71px; font-size: 0.64rem; }
  .chunk-diagram { --chunk-gap: 9px; margin-top: 26px; margin-bottom: 26px; }
  .chunk-stream-labels { font-size: 0.64rem; }
  .stream-chunk { border-radius: 8px; }
  .chunk-control-tokens { gap: 4px; height: 29px; padding: 5px 3px; }
  .chunk-control-tokens i { flex-basis: 10px; height: 14px; border-radius: 3px; }
  .chunk-label { font-size: 0.53rem; padding: 8px 2px; }
  .chunk-stream-footer { font-size: 0.64rem; }
}

@media (max-width: 360px) {
  .header-inner { gap: 16px; }
  .chunk-diagram { --chunk-gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .simulation-page *, .simulation-page *::before, .simulation-page *::after { animation: none !important; transition: none !important; }
}

/* Preserve the Cosmos 3 model cards and responsive model navigation. */
.simulation-page .benchmark-section { overflow: visible; }
@media (max-width: 820px) {
  .simulation-page .section-nav-links { max-width: 400px; grid-template-columns: 1fr; gap: 24px; }
  .section-nav-links .omni-control { min-height: 46px; padding: 11px 22px; font-size: var(--cosmos3-omni-control-size); }
  .model-nav-item { gap: 10px; }
}
/* Use the same green scrollbars for captions, citations, and enlarged results. */
.example-dialog, .example-dialog-caption p, .simulation-page .citation-bibtex { scrollbar-width: thin; scrollbar-color: rgba(118, 185, 0, 0.72) rgba(255, 255, 255, 0.08); }
.example-dialog::-webkit-scrollbar, .example-dialog-caption p::-webkit-scrollbar, .simulation-page .citation-bibtex::-webkit-scrollbar { width: 8px; height: 8px; }
.example-dialog::-webkit-scrollbar-track, .example-dialog-caption p::-webkit-scrollbar-track, .simulation-page .citation-bibtex::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.08); border-radius: 999px; }
.example-dialog::-webkit-scrollbar-thumb, .example-dialog-caption p::-webkit-scrollbar-thumb, .simulation-page .citation-bibtex::-webkit-scrollbar-thumb { background: rgba(118, 185, 0, 0.72); border-radius: 999px; }