:root {
  --pick: #ffb000;
  --pose-left: #ff8a3d;
  --pose-right: #3da5ff;
  --ink: #222;
  --muted: #666;
  --line: #e3e3e3;
}

body { background: #fff; color: var(--ink); }
/* a hero is a flex column, where the auto margins of a container shrink it to its content */
.hero > .container { width: 100%; }
.publication-links { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.lead { color: var(--muted); margin-bottom: 1rem; }
.caption { color: var(--muted); font-size: .9rem; text-align: center; margin-top: .6rem; }
.figure { display: block; margin: 1.5rem auto 0; max-width: 100%; }
.paper-thumb { box-shadow: 0 2px 12px rgba(0, 0, 0, .15); max-height: 220px; }

/* chips */
.tabs-row { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin-bottom: .8rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: .6rem; }
.tabs-row .chips { justify-content: flex-start; margin-top: 0; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .2rem .8rem; font-size: .85rem; cursor: pointer; color: var(--ink); }
.chip:hover { border-color: #999; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* before/after slider */
.teaser { display: block; width: 100%; border-radius: 8px; background: #fff; }

/* round by round */
.rounds { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; justify-items: center; }
.rounds video { width: 100%; border-radius: 6px; background: #111; }
#obs-curve { width: 100%; max-width: 420px; }
#obs-curve text { font-size: 11px; fill: #555; }

/* more results */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.grid figure { margin: 0; }
.grid figure.wide { grid-column: 1 / -1; }
.grid video { width: 100%; border-radius: 6px; background: #111; display: block; }
.grid figcaption { font-size: .8rem; color: var(--muted); margin-top: .25rem; }

/* annotation tool */
.cmd { background: #1e1e1e; color: #eee; border-radius: 6px; padding: .6rem .9rem; font-size: .9rem; margin-top: .8rem; }
.screenshot { border: 1px solid #dbe2ea; border-radius: 8px; }

pre code { font-size: .8rem; }
.copy { border: none; background: none; cursor: pointer; color: #888; font-size: 1rem; vertical-align: middle; }
.copy:hover { color: var(--ink); }

@media (max-width: 768px) {
  .rounds, .grid { grid-template-columns: minmax(0, 1fr); }
  .publication-links .button { font-size: .85rem; }
  .has-text-justified { text-align: left !important; }
  .publication-title { font-size: 2rem !important; }
}

/* Hexa-P */
#nav-chart { width: 100%; margin-bottom: 1rem; }
#nav-grid { grid-template-columns: minmax(0, 1fr); }
#nav-chart text { font-size: 13px; fill: #444; }
.grid figure video, .grid figure img { aspect-ratio: auto; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 1.5rem 0; text-align: center; }
.stats > div { padding: 1rem 0.5rem; border-radius: 10px; background: #f3f6f4; }
.stats b { display: block; font-size: 2.6rem; line-height: 1.15; color: #1e8f4e; }
.stats span { font-size: 0.9rem; color: #555; }
.pair-captions { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; font-size: 0.95rem; color: #444; margin-top: 0.75rem; }
.pair-captions .ok { color: #1e8f4e; }
.pair-captions .ng { color: #c0392b; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
.steps > div { padding: 1rem; border-radius: 10px; background: #f3f6f4; }
.steps .num { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #1e8f4e; color: #fff; font-weight: 700; margin-right: 0.5rem; }
.steps b { color: #222; }
.steps p { margin-top: 0.5rem; font-size: 0.9rem; color: #555; }
@media (max-width: 700px) { .stats b { font-size: 1.6rem; } .pair-captions, .steps { grid-template-columns: 1fr; } }