/* =========================================================================
   XU Lab project page template — style.css
   Plain CSS, no build step. Re-theme by editing the custom properties below.
   Modules: base · layout · hero · demos · results chart · capabilities
            (nav, card, pipeline, speedup, icl, planner) · contributions · footer
   ========================================================================= */

:root {
  /* Surfaces */
  --c-bg: #ffffff;
  --c-band: #f7f8fa;          /* alternating grey section band */
  --c-card: #ffffff;
  --c-media: #eef0ff;         /* placeholder behind videos */
  --c-media-dark: #0b0d10;

  /* Ink */
  --c-heading: #262626;
  --c-accent: #a9530f;        /* text-safe ink of the paper's orange #F89A42 (5.3:1 on white): links, labels */
  --c-text: #6a6a6a;          /* body copy */
  --c-text-strong: #4a4a4a;
  --c-muted: #7a7a7a;         /* captions */
  --c-axis: #666666;

  /* Warm greys (borders, chart series) */
  --c-line: #e4e2da;
  --c-line-strong: #d4d3cb;
  --c-line-hover: #8c8a84;
  --c-series-1: #f8d45b;      /* chart: HALO (paper Fig. 7 gold) */
  --c-series-2: #388038;      /* chart: Mobile ALOHA (paper Fig. 7) */
  --c-series-3: #a2bd79;      /* chart: VR (paper Fig. 7) */
  --c-bar-shadow: #151515;    /* paper charts: hard drop shadow under bars */
  --c-active-bg: #fef1e4;     /* pale tint of the paper orange */

  /* Paper figure palette (Figs. 1, 2, 4) */
  --c-ours: #f89a42;          /* "Natural Locomotion" / ours: fills, active states */
  --c-perception: #745bd0;    /* "Perception Gap" (5.1:1, text-safe) */
  --c-mobility: #70ad47;      /* "Mobility Gap" fill */
  --c-mobility-ink: #3f7a22;  /* text-safe ink of the mobility green */
  --c-policy: #1978b9;        /* learned-policy labels (4.7:1, text-safe) */
  --c-mark: rgba(248, 212, 91, 0.55); /* key-word marker in the HALO gold */
  --c-nav-hover: #edeff4;

  /* Shape */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --shadow-card: 0 12px 36px rgba(17, 24, 39, 0.06);
  --shadow-card-lg: 0 16px 44px rgba(17, 24, 39, 0.06);

  /* Widths */
  --w-text: 800px;            /* hero, intros, media */
  --w-section: 1040px;
  --w-wide: 1120px;
  --w-cap-card: 920px;
  --gutter: 32px;

  /* Section rhythm */
  --pad-top: 56px;
  --pad-bottom: 72px;

  --font: "Alibaba PuHuiTi 3.0", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Helvetica, Arial, sans-serif;
}

@media (min-width: 768px) {
  :root {
    --pad-top: 72px;
    --pad-bottom: 96px;
  }
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-heading);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;           /* clip (not hidden) keeps position: sticky working */
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.section { padding: var(--pad-top) var(--gutter) var(--pad-bottom); }
.section--band { background: var(--c-band); }
.container { width: 100%; max-width: var(--w-section); margin: 0 auto; }
.container--wide { max-width: var(--w-wide); }

.section-head { max-width: var(--w-text); margin: 0 auto 48px; text-align: center; }
.section-title {
  font-size: 26px; line-height: 34px; font-weight: 600;
  color: var(--c-heading); text-align: center;
}
.section-lead {
  margin-top: 12px;
  font-size: 14px; line-height: 22px; color: var(--c-text);
}
@media (min-width: 768px) {
  .section-title { font-size: 40px; line-height: 52px; }
  .section-lead { font-size: 16px; line-height: 26px; }
}

/* Shared media frame (16:9, rounded) */
.media {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; border-radius: var(--r-sm); background: var(--c-media);
}
.media > video,
.media > img,
.media > .placeholder { width: 100%; height: 100%; object-fit: cover; }
.media--dark { background: var(--c-media-dark); }
.media video { cursor: pointer; }

/* Neutral placeholder used by starter.html */
.placeholder {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, #e9eaee 0 12px, #f1f2f5 12px 24px);
  color: #9a9ca3; font-size: 14px; letter-spacing: 0.04em;
}

/* ---------- Hero ---------- */
.hero { padding: 48px var(--gutter) 28px; text-align: center; }
.hero__inner { max-width: var(--w-section); margin: 0 auto; }
.hero__title {
  font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.025em;
  color: var(--c-heading);
}
.hero__title-accent { color: inherit; } /* titles stay black */
.hero__subtitle { margin-top: 12px; font-size: 14px; line-height: 21px; color: var(--c-text); }
.hero__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 999px;
  font-size: 14px; line-height: 21px; color: var(--c-heading); text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s;
}
.pill:hover { background: var(--c-ours); border-color: var(--c-ours); color: var(--c-heading); }
.pill svg { width: 16px; height: 16px; flex: none; }
.hero__media { margin-top: 24px; border-radius: var(--r-lg); background: #e9eaee; }
.hero__summary {
  margin-top: 28px; text-align: left;
  font-size: 14px; line-height: 24px; color: var(--c-text);
}
@media (min-width: 768px) {
  .hero { padding: 64px var(--gutter) 36px; }
  .hero__title { font-size: 64px; line-height: 80px; }
  .hero__subtitle { margin-top: 16px; font-size: 16px; line-height: 24px; }
  .pill { padding: 8px 24px; font-size: 16px; line-height: 24px; }
  .hero__media { margin-top: 32px; }
  .hero__summary { font-size: 16px; line-height: 24px; }
}

/* ---------- Task demos (player + thumbnail list) ---------- */
.demos__desc { line-height: 24px; }
@media (min-width: 768px) { .demos__desc { line-height: 26px; } }

.demos__stage { display: flex; flex-direction: column-reverse; gap: 12px; }
.demos__player { width: 100%; max-width: var(--w-text); margin: 0 auto; border-radius: var(--r-lg); }
.demos__list {
  display: flex; gap: 8px; padding: 8px; overflow-x: auto;
  background: #fff; border-radius: var(--r-sm); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  scrollbar-width: none;
}
.demos__list::-webkit-scrollbar { display: none; }
.thumb {
  flex: none; display: flex; flex-direction: column; width: 137px; padding: 0;
  overflow: hidden; cursor: pointer; text-align: center; background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--r-sm);
  transition: border-color 0.3s;
}
.thumb:hover { border-color: var(--c-line-hover); }
.thumb[aria-pressed="true"] { border-color: var(--c-ours); box-shadow: 0 0 0 1px var(--c-ours); }
.thumb img, .thumb .placeholder { width: 135px; height: 76px; object-fit: cover; font-size: 11px; }
.thumb__label {
  display: block; padding: 4px 4px; font-size: 12px; line-height: 16px; color: var(--c-axis);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 1180px) {
  /* Player stays centred; list hangs to its left like the reference */
  .demos__stage {
    display: grid; grid-template-columns: 1fr minmax(0, var(--w-text)) 1fr;
    align-items: stretch; gap: 0;
  }
  .demos__player { grid-column: 2; grid-row: 1; }
  .demos__stage { margin-bottom: 24px; }
  .demos__list {
    grid-column: 1; grid-row: 1; justify-self: end; margin-right: 24px;
    flex-direction: column; justify-content: space-between; overflow: visible;
  }
}

/* ---------- Quantitative results (bar chart) ---------- */
.chart {
  /* Chart-only palette sampled from the user's reference figure. */
  --c-series-1: #ffd23c;
  --c-series-2: #eeece3;
  --c-series-3: #00822c;
  --c-series-4: #9cbe70;
  --c-axis: #262626;
  width: 100%; max-width: 880px; margin: 0 auto;
  padding: 16px; background: #fff; border-radius: var(--r-lg);
}
.chart__title { margin-bottom: 8px; text-align: center; font-size: 18px; line-height: 27px; font-weight: 600; color: var(--c-heading); }
.chart__scroll { position: relative; overflow-x: auto; }
.chart__svg { width: 100%; max-width: none; height: 240px; overflow: visible; }
.chart__svg text { font-family: var(--font); fill: var(--c-axis); }
.chart__bar { stroke: #000; stroke-width: 1; stroke-linejoin: round; }
.chart__legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px;
  margin: 12px 0 0; padding: 0; list-style: none;
}
.chart__legend li { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 18px; color: var(--c-axis); }
.chart__swatch { width: 12px; height: 4px; border-radius: 2px; border: 1px solid #000; }
.chart__tip {
  position: absolute; pointer-events: none; z-index: 2; min-width: 150px;
  padding: 8px 12px; background: rgba(255, 255, 255, 0.97); border: 1px solid var(--c-line);
  border-radius: var(--r-sm); box-shadow: var(--shadow-card); font-size: 12px; line-height: 20px; color: var(--c-text-strong);
}
.chart__tip b { display: block; color: var(--c-heading); }
.chart__tip span { display: flex; align-items: center; gap: 6px; }
.chart__tip i { width: 8px; height: 8px; border-radius: 2px; }
/* The data table stays in the DOM for no-JS / screen readers */
.chart__table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--c-text-strong); }
.chart__table th, .chart__table td { padding: 6px 8px; border-bottom: 1px solid var(--c-line); text-align: right; }
.chart__table th:first-child, .chart__table td:first-child { text-align: left; }
.js .chart__table { position: absolute; display: block; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Capabilities ---------- */
.cap-title { font-size: 26px; line-height: 34px; font-weight: 600; color: var(--c-heading); }
@media (min-width: 768px) { .cap-title { font-size: 40px; line-height: 52px; } }
.cap-head { margin-bottom: 48px; }
.cap-head .section-lead { margin-top: 16px; }

.cap-layout, #video > .media { position: relative; width: 100%; max-width: var(--w-cap-card); margin: 0 auto; }
.cap-stack { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 768px) { .cap-stack { gap: 32px; } }

/* Side nav: hidden until there is room for it beside the cards */
.cap-nav { display: none; }
@media (min-width: 1280px) {
  .cap-layout, #video > .media { max-width: min(var(--w-cap-card), calc(100vw - 520px)); }
  .cap-nav { display: block; position: absolute; top: 0; bottom: 0; left: -252px; width: 222px; }
  .cap-nav__inner { position: sticky; top: 104px; display: flex; flex-direction: column; }
}
.cap-nav__item {
  display: flex; flex-direction: column; justify-content: center; height: 80px; padding: 0 16px;
  border-left: 2px solid transparent; color: var(--c-axis); text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-radius 0.2s;
}
.cap-nav__item:hover { background: var(--c-nav-hover); color: var(--c-heading); border-radius: 0 var(--r-md) var(--r-md) 0; }
.cap-nav__item.is-active {
  background: #fff; color: var(--c-heading); border-left-color: var(--c-ours);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.cap-nav__title { font-size: 16px; line-height: 24px; font-weight: 600; }
.cap-nav__sub { margin-top: 2px; font-size: 12px; line-height: 18px; color: var(--c-text); }

/* Card */
.cap-card {
  scroll-margin-top: 96px;
  padding: 20px; background: var(--c-card); border-radius: var(--r-sm); box-shadow: var(--shadow-card);
}
.cap-card__title { margin-bottom: 18px; font-size: 22px; line-height: 30px; font-weight: 600; color: var(--c-heading); }
.cap-card__title--tight { margin-bottom: 12px; }
.cap-card__text { font-size: 14px; line-height: 24px; color: var(--c-text); }
.cap-card__intro { display: grid; gap: 24px; align-items: start; }
.cap-card__intro .media { max-width: 520px; justify-self: end; }
@media (min-width: 768px) {
  .cap-card { padding: 28px; }
  .cap-card__title { margin-bottom: 22px; font-size: 32px; line-height: 40px; }
  .cap-card__title--tight { margin-bottom: 12px; }
  .cap-card__text { font-size: 16px; line-height: 28px; }
}
@media (min-width: 1024px) {
  .cap-card__intro--media { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

/* Sub-block inside a card (pipeline, speedup, scenario) */
.sub-block { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.sub-block__head { max-width: 820px; margin-bottom: 16px; }
.sub-block__title { margin-bottom: 8px; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--c-heading); }
.sub-block__text { font-size: 14px; line-height: 24px; color: var(--c-text); }
@media (min-width: 768px) { .sub-block__title { font-size: 18px; } }

.figure { margin: 0; }
.figure__frame { width: 100%; overflow-x: auto; border-radius: var(--r-sm); background: #fff; }
.figure__frame > svg { width: 100%; height: auto; min-width: 720px; }
.figure__caption { margin-top: 10px; text-align: center; font-size: 13px; line-height: 20px; color: var(--c-muted); }

/* Foresight diagram text defaults */
.diagram { font-family: var(--font); }
.diagram text { fill: #3b3b3b; }
.diagram .fs-wire { fill: none; stroke: #ababab; stroke-width: 1.4; }

/* Speedup video grid */
.clip-grid { display: grid; gap: 16px; }
@media (min-width: 768px) { .clip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.clip-grid figcaption { margin-top: 8px; text-align: center; font-size: 13px; line-height: 20px; color: var(--c-text-strong); }

/* ICL scenario carousel */
.icl { margin-top: 28px; }
.icl__title { margin-bottom: 18px; }
.carousel { display: flex; align-items: stretch; gap: 10px; }
.carousel__step {
  flex: none; display: flex; align-items: center; justify-content: center; width: 40px;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background: #fff;
  font-size: 22px; line-height: 1; color: var(--c-accent); cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.carousel__step:hover { border-color: var(--c-line-hover); background: var(--c-active-bg); }
.carousel__track { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__chips { display: flex; gap: 10px; padding-bottom: 2px; }
.chip {
  flex: none; width: 220px; min-height: 64px; padding: 10px 14px; text-align: left;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background: #fff;
  font-size: 13px; line-height: 20px; font-weight: 600; color: var(--c-text-strong); cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.chip:hover { border-color: var(--c-line-hover); color: var(--c-accent); }
.chip[aria-pressed="true"] { border-color: var(--c-accent); background: var(--c-active-bg); color: var(--c-accent); }
@media (min-width: 768px) { .chip { width: 250px; font-size: 14px; } }
.pair { display: grid; gap: 18px; margin-top: 20px; }
@media (min-width: 1024px) { .pair { grid-template-columns: 1fr 1fr; } }
.pair__label { margin-bottom: 10px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--c-heading); }

/* Planner diagram animation */
.pl-flow { stroke-dasharray: 12 12; animation: pl-flow 1.8s linear infinite; }
.pl-flow--late { animation-delay: -0.75s; }
.pl-feedback { stroke-dasharray: 10 14; animation: pl-feedback 2.6s linear infinite; }
.pl-pulse { animation: pl-pulse 3.8s ease-in-out infinite; }
.pl-chip { animation: pl-chip 2.8s ease-in-out infinite; }
@keyframes pl-flow { to { stroke-dashoffset: -48; } }
@keyframes pl-feedback { to { stroke-dashoffset: -60; } }
@keyframes pl-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(17, 24, 39, 0)); }
  50% { filter: drop-shadow(0 0 10px rgba(17, 24, 39, 0.18)); }
}
@keyframes pl-chip { 0%, 100% { opacity: 0.78; } 50% { opacity: 1; } }

/* ---------- Contributions (numbered 2×2 cards) ---------- */
.how-lead {
  max-width: 900px; margin: 16px auto 24px;
  font-size: 15px; line-height: 26px; color: var(--c-text);
}
.how-grid { display: grid; gap: 18px; }
.how-card {
  display: flex; flex-direction: column; min-height: 0; padding: 22px;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-sm); box-shadow: var(--shadow-card-lg);
}
.how-card__num { font-size: 28px; line-height: 1; font-weight: 600; color: var(--c-line-strong); }
.how-card__kicker {
  margin-top: 12px; font-size: 14px; line-height: 22px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent);
}
.how-card__body { margin-top: 12px; font-size: 16px; line-height: 29px; color: var(--c-text); }
@media (min-width: 768px) {
  .how-lead { font-size: 18px; line-height: 30px; }
  .how-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .how-card { padding: 24px; }
  .how-card__num { font-size: 34px; }
  .how-card__kicker { font-size: 15px; line-height: 24px; }
  .how-card__body { font-size: 18px; line-height: 29px; }
}

/* ---------- Footer ---------- */
.footer {
  padding: 28px var(--gutter); border-top: 1px solid var(--c-line); text-align: center;
  font-size: 13px; line-height: 1.5; letter-spacing: 0.04em; color: var(--c-text);
}
.footer a { color: var(--c-heading); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .pl-flow, .pl-feedback, .pl-pulse, .pl-chip { animation: none; }
}

/* ============================== BibTeX ============================== */
.bibtex { position: relative; max-width: var(--w-section); margin: 0 auto; }
.bibtex__code {
  margin: 0; padding: 22px 88px 22px 24px; overflow-x: auto;
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-md);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.65;
  color: var(--c-text-strong); white-space: pre;
}
.bibtex__copy {
  position: absolute; top: 12px; right: 12px; padding: 4px 12px;
  font: inherit; font-size: 12px; color: var(--c-accent); background: var(--c-card);
  border: 1px solid var(--c-line); border-radius: 999px; cursor: pointer;
}
.bibtex__copy:hover { border-color: var(--c-accent); background: var(--c-active-bg); }

/* =========================================================================
   HALO page additions (2026-10). Everything below extends the template;
   nothing above was changed except through these overrides.
   ========================================================================= */
:root {
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --c-stage: #e6e9ed;          /* 3D stage background (matches scene.background in halo3d.js) */
  --c-ink-pill: rgba(34, 39, 46, 0.9);
}

/* Explicit placeholders: visible on purpose so they are not published by accident */
.todo {
  display: inline-block; padding: 0 8px; border: 1px dashed #c99700; border-radius: 4px;
  background: #fff7dc; color: #7a5b00; font-size: 0.9em;
}

/* ---------- Hero extras ---------- */
.hero__subtitle--lg { font-size: 16px; line-height: 24px; color: var(--c-text-strong); }
.hero__authors { margin-top: 18px; font-size: 15px; line-height: 24px; color: var(--c-heading); }
.hero__affil { margin-top: 4px; font-size: 13px; line-height: 20px; color: var(--c-text); }
.hero__authors a { color: var(--c-heading); text-decoration: none; }
.hero__authors a:hover { color: var(--c-accent); }
@media (min-width: 768px) {
  .hero__subtitle--lg { font-size: 22px; line-height: 32px; }
  .hero__authors { font-size: 17px; }
  .hero__affil { font-size: 14px; }
}
.stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  margin: 24px 0 0; padding: 0; list-style: none; text-align: left;
}
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.stat { display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--c-line); border-radius: var(--r-md); background: #fff; }
.stat__value { font-size: 26px; line-height: 1.1; font-weight: 600; color: var(--c-heading); font-variant-numeric: tabular-nums; }
.stat__label { margin-top: 8px; font-size: 13px; line-height: 19px; color: var(--c-text); }
@media (min-width: 768px) { .stat__value { font-size: 30px; } }

/* ---------- Shared media / figure helpers ---------- */
.media--narrow { max-width: var(--w-text); margin-left: auto; margin-right: auto; }
.figure__img { width: 100%; height: auto; border-radius: var(--r-sm); background: #fff; }
.figure--half { max-width: 560px; margin: 0 auto; }
.method-fig { width: 100%; max-width: 540px; margin: 0 auto 28px; }

/* ---------- Mechanical design: scroll-driven 3D viewer ---------- */
.mech { position: relative; max-width: var(--w-wide); margin: 0 auto; }
.mech__stage {
  position: sticky; top: 0; z-index: 2; height: 50vh; min-height: 300px; max-height: 500px;
  margin: 0 calc(-1 * var(--gutter)); overflow: hidden; background: var(--c-stage);
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
}
.mech__canvas, .mech__canvas canvas, .mech__leaders, .mech__labels {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.mech__canvas canvas { display: block; outline: none; }
.mech__leaders, .mech__labels { pointer-events: none; }
.mech__leaders line { stroke: #4b5560; stroke-width: 1.2; transition: opacity 0.25s; }
.mech__leaders circle { fill: #fff; stroke: #22272e; stroke-width: 1.5; transition: opacity 0.25s; }
.mech__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.mech.is-live .mech__fallback { display: none; }
.mech:not(.is-live) .mech__bar, .mech:not(.is-live) .mech__hint { display: none; }

.mech-label {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px; border-radius: 6px; background: var(--c-ink-pill); color: #fff;
  font: 500 11px/1 var(--mono); white-space: nowrap; opacity: 0; transition: opacity 0.25s;
  will-change: transform;
}
.mech-label.is-on { opacity: 1; }
.mech-label i { flex: none; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5); }
.mech-label--light { background: rgba(255, 255, 255, 0.94); color: var(--c-heading); box-shadow: 0 0 0 1px var(--c-line); }
@media (min-width: 768px) { .mech-label { font-size: 12px; } }

.mech__bar { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 3; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.mech__dots { display: flex; gap: 6px; pointer-events: auto; }
.mech__dot {
  width: 28px; height: 28px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 50%;
  background: rgba(255, 255, 255, 0.9); font: 600 12px/1 var(--mono); color: var(--c-text-strong); cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.mech__dot:hover { border-color: var(--c-accent); color: var(--c-accent); }
.mech__dot[aria-current="step"] { background: var(--c-ours); border-color: var(--c-ours); color: var(--c-heading); }
.mech__caption {
  overflow: hidden; padding: 5px 10px; border-radius: 6px; background: var(--c-ink-pill); color: #fff;
  font: 500 12px/18px var(--mono); white-space: nowrap; text-overflow: ellipsis;
}
.mech__readout {
  position: absolute; left: 12px; bottom: 12px; z-index: 3; padding: 8px 10px; border-radius: 8px;
  background: var(--c-ink-pill); color: #e9edf2; font: 500 11px/1.6 var(--mono); font-variant-numeric: tabular-nums;
}
.mech__readout b { color: var(--c-series-1); font-weight: 600; }
.mech__readout[hidden] { display: none; }
.mech__hint {
  position: absolute; right: 12px; bottom: 12px; z-index: 3; padding: 4px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.85); color: var(--c-text-strong); font: 500 11px/18px var(--mono);
  transition: opacity 0.4s; pointer-events: none;
}
.mech__stage.is-touched .mech__hint, .mech__hint[hidden] { opacity: 0; }

.mech__steps { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; padding: 24px 0 8vh; }
.mech-step { min-width: 0; }
.mech-step__card {
  width: 100%; padding: 20px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
  box-shadow: var(--shadow-card); opacity: 0.5; cursor: pointer; transition: opacity 0.35s, border-color 0.35s;
}
.mech-step.is-active .mech-step__card { opacity: 1; border-color: var(--c-ours); box-shadow: 0 0 0 1px var(--c-ours), var(--shadow-card); cursor: default; }
.mech-step__kicker { font: 600 12px/18px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-accent); }
.mech-step__title { margin-top: 8px; font-size: 20px; line-height: 28px; color: var(--c-heading); }
.mech-step__text { margin-top: 10px; font-size: 15px; line-height: 25px; color: var(--c-text); }
.mech-step__note { margin-top: 10px; font-size: 13px; line-height: 20px; color: var(--c-muted); }
@media (min-width: 768px) { .mech-step__card { padding: 26px; } .mech-step__title { font-size: 24px; line-height: 32px; } }

@media (min-width: 1024px) {
  .mech { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); column-gap: 40px; }
  .mech__stage {
    grid-column: 2; grid-row: 1; top: max(24px, calc(50vh - 300px)); height: min(600px, calc(100vh - 120px));
    max-height: none; margin: 0; border-radius: var(--r-lg);
  }
  .mech__steps { grid-column: 1; grid-row: 1; padding: 0 0 12vh; }


}
@media (max-width: 1023px) {
  .mech__steps { padding-top: 24px; }
}

.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 18px 0 0; }
.specs div { padding-top: 8px; border-top: 1px solid var(--c-line); }
.specs dt { font: 500 11px/16px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-muted); }
.specs dd { margin: 2px 0 0; font-size: 15px; line-height: 22px; color: var(--c-heading); }

.force { margin-top: 18px; display: grid; gap: 8px; }
.force__title { font: 500 11px/16px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-muted); }
.force__row { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) 3.6em; align-items: center; gap: 10px; font-size: 13px; line-height: 18px; color: var(--c-text-strong); }
.force__row b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--c-heading); }
.force__bar { position: relative; height: 10px; border-radius: 2px; background: #eef0f3; }
.force__bar span { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) / 50 * 100%); min-width: 4px; border-radius: 2px; background: var(--c-bar); box-shadow: 1px 1px 0 var(--c-bar-shadow); }
.force__row { --c-bar: var(--c-series-2); }
.force__row--deploy { --c-bar: #767171; }
.force__row--aloha { --c-bar: var(--c-series-2); }
.force__row--ours { --c-bar: var(--c-series-1); color: var(--c-heading); font-weight: 600; }


.eq {
  margin-top: 18px; padding: 16px 12px; border-radius: var(--r-sm); background: var(--c-band);
  font-size: 18px; font-weight: 400; color: var(--c-heading); text-align: center; overflow-x: auto;
}

.compare { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.compare th, .compare td { padding: 8px 6px; border-bottom: 1px solid var(--c-line); text-align: right; font-variant-numeric: tabular-nums; }
.compare thead th { font: 500 11px/16px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-muted); }
.compare tbody th { text-align: left; font-weight: 400; color: var(--c-text); }
.compare td { color: var(--c-text-strong); }
.compare td:last-child { color: var(--c-accent); font-weight: 600; }

.design-media { max-width: var(--w-wide); margin: 64px auto 0; padding-top: 32px; border-top: 1px solid var(--c-line); }
.design-media__grid { display: grid; gap: 20px; align-items: start; }


/* ---------- Charts in a grid ---------- */
.chart-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: var(--w-section); margin: 32px auto 0; }
.chart-grid > .chart { min-width: 0; }
@media (min-width: 900px) { .chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chart-grid .chart { max-width: none; margin: 0; border: 1px solid var(--c-line); }
.chart__note { margin-top: 8px; font-size: 12px; line-height: 18px; color: var(--c-muted); text-align: center; }
.chart-note { max-width: var(--w-text); margin: 16px auto 0; font-size: 13px; line-height: 20px; color: var(--c-muted); text-align: center; }
#results .chart-grid { margin-top: 0; }

/* ---------- Demo switcher: list under the player at every width ---------- */
.demos__stage.demos__stage--row { display: flex; flex-direction: column; gap: 12px; margin-bottom: 0; }
.demos__stage--row .demos__player { grid-column: auto; }
.demos__stage--row .demos__list {
  width: 100%; max-width: var(--w-text); margin: 0 auto; flex-direction: row; justify-content: flex-start;
  overflow-x: auto; justify-self: auto;
}
.demos__stage--row .thumb { flex: 1 0 118px; width: auto; }
.demos__stage--row .thumb img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.demos__caption { max-width: var(--w-text); margin: 4px auto 0; text-align: center; font-size: 14px; line-height: 22px; color: var(--c-text); }

/* ---------- Capabilities tweaks ---------- */
.cap-card .pair { margin-top: 20px; }

@media (prefers-reduced-motion: reduce) {
  .mech-step__card, .mech-label, .mech__leaders line, .mech__leaders circle { transition: none; }
}

/* 3D viewer loading / failure states */
.mech__loading {
  position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%);
  padding: 6px 12px; border-radius: 999px; background: var(--c-ink-pill); color: #fff;
  font: 500 12px/18px var(--mono); pointer-events: none; display: none;
}
.mech.is-loading .mech__loading { display: block; }
.mech.is-loading .mech__fallback { opacity: 0.35; }


/* ---------- Key-word highlighting (paper palette) ---------- */
.kw {
  font-weight: 600; color: var(--c-heading);
  background: linear-gradient(transparent 58%, var(--c-mark) 58%, var(--c-mark) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.kw-loco { font-weight: 600; color: var(--c-accent); }          /* natural locomotion: paper orange */
.kw-perception { font-weight: 600; color: var(--c-perception); }  /* perception gap: paper purple */
.kw-mobility { font-weight: 600; color: var(--c-mobility-ink); } /* mobility gap: paper green */
.acr { color: var(--c-accent); font-weight: 700; }             /* H-A-L-O letters in the subtitle */
.stat__value { align-self: flex-start; background: linear-gradient(transparent 62%, var(--c-mark) 62%); }
.stat { border-top: 3px solid var(--c-series-1); }

/* No lone last words in leads and body copy */
.section-title, .cap-card__title, .mech-step__title, .hero__subtitle { text-wrap: balance; }
.section-lead, .how-lead, .hero__summary, .cap-card__text, .mech-step__text, .sub-block__text { text-wrap: pretty; }

/* Figure rows: column widths follow each image's aspect ratio, so every image in a row
   has the same height and the row's edges line up with the full-width blocks around it. */
.fig-row { display: grid; gap: 20px; align-items: start; }
.fig-row > * { min-width: 0; }
.fig-row__label { margin-bottom: 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--c-heading); }
@media (min-width: 768px) {
  .fig-row--6-10 { grid-template-columns: minmax(0, 1.748fr) minmax(0, 1.293fr); }   /* fig6 1042x596, fig10 1034x800 */
}
@media (min-width: 900px) {
  .fig-row--design { grid-template-columns: minmax(0, 1.778fr) minmax(0, 1.225fr) minmax(0, 1.319fr); }  /* 16:9 video, fig4, fig3 */
}

/* Keep the introduction and method together without stacked section padding. */
#method { padding-top: 28px; padding-bottom: 40px; }
@media (min-width: 768px) {
  #method { padding-top: 36px; padding-bottom: 56px; }
}

/* KaTeX owns mathematical spacing; the surrounding panel supplies the inset. */
.eq .katex-display { margin: 0; }
.eq .katex { font-size: 1.15em; }
@media (max-width: 767px) { .eq { font-size: 16px; } }

/* A compact transition from the last capability card to the full video. */
#capabilities { padding-bottom: 20px; }
#video { padding-top: 20px; }
#video > .section-head { margin-bottom: 24px; }
@media (min-width: 768px) {
  #capabilities { padding-bottom: 32px; }
  #video { padding-top: 24px; }
}
/* The method illustration is now the last item after merging its cards into the viewer. */
#method .method-fig { margin-bottom: 0; }

/* Full paper terminology stays readable in the narrow formula panel and chart legend. */
.eq .katex { font-size: 1em; }
@media (max-width: 767px) { .eq .katex { font-size: 0.9em; } }

/* Figure 5 includes a 24 px white margin on each side of its 2400 px source.
   Crop those margins in layout so the photos align with the video row. */
.figure__crop--implicit-base { width: 100%; overflow: hidden; }
.figure__crop--implicit-base > .figure__img { display: block; width: 102.0408163265%; max-width: none; margin-left: -1.0204081633%; }

/* Match the collection introduction to the full video row. */
#collection > .section-head { max-width: var(--w-section); }
#collection > .section-head > .section-lead { text-align: left; }

/* Match the results introduction to the full chart grid. */
#results > .section-head { max-width: var(--w-section); }
#results > .section-head > .section-lead { text-align: left; }

/* Supplementary video shares the capability-card width at every breakpoint. */
#video > .media { box-shadow: 0 16px 44px rgba(17, 24, 39, 0.12); }

/* Use the same text measure for the method overview and mechanical introduction. */
.how-lead, #design > .section-head { max-width: 960px; }
#design > .section-head > .section-lead { text-align: left; }

/* Paper-style masthead and author information supplied by the authors. */
.hero__title {
  font-size: clamp(32px, 4.5vw, 56px); line-height: 1.05;
  font-weight: 800; letter-spacing: -0.055em; color: var(--c-heading);
}
.hero__subtitle.hero__subtitle--lg {
  margin-top: 24px; font-size: clamp(13px, 1.6vw, 21px); line-height: 1.22;
  font-weight: 700; letter-spacing: -0.025em; color: var(--c-text-strong);
}
.hero__title-line { display: block; }
.hero__subtitle .acr { color: var(--c-accent); font-weight: 800; }
.hero__authors {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px;
  margin-top: 28px; font-size: 20px; line-height: 1.5; color: var(--c-heading);
}
.hero__author { white-space: nowrap; }
.hero__authors sup, .hero__affil sup { margin-left: 2px; font-size: 0.68em; color: inherit; }
.hero__affil {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 24px;
  margin-top: 14px; font-size: 16px; line-height: 1.5; color: var(--c-text);
}
.hero__contribution { margin-top: 8px; font-size: 14px; line-height: 22px; color: var(--c-text); }
@media (max-width: 767px) {
  .hero__subtitle.hero__subtitle--lg { margin-top: 18px; }
  .hero__authors { margin-top: 24px; gap: 6px 18px; font-size: 17px; }
  .hero__affil { flex-direction: column; font-size: 14px; }
  .hero__contribution { font-size: 13px; }
}