/* Shared layout for the MuJoCo sandbox journals. Every colour comes from the project's theme tokens,
   written into :root by scripts/build_journals.py from the project's journal.json. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); }
img, video { max-width: 100%; display: block; border-radius: 10px; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
:not(pre) > code { background: var(--chip); padding: 1px 5px; border-radius: 4px; font-size: .88em; overflow-wrap: anywhere; }
.wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }

/* Hero: the project's gradient, its story in two lines, the film, the numbers. */
.hero { background: var(--hero); color: var(--hero-text); padding: 30px 0 30px; }
.home-link { display: inline-flex; align-items: center; gap: 6px; color: var(--hero-text); opacity: .8; text-decoration: none;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.home-link:hover { opacity: 1; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 12.5px; opacity: .85; margin: 18px 0 0; }
h1 { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.06; margin: 8px 0 12px; letter-spacing: -.02em; max-width: 960px; }
.lede { font-size: 19px; max-width: 840px; opacity: .95; margin: 0 0 22px; }
.hero-film { background: var(--film); border-radius: 16px; padding: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); }
.hero-film video, .hero-film img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border-radius: 10px; }
.hero-film figcaption { color: var(--hero-text); opacity: .8; font-size: 13.5px; margin: 8px 4px 2px; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 18px; }
.metric { background: var(--metric); border-radius: 12px; padding: 12px 14px; }
.metric .value { font-size: 26px; font-weight: 680; letter-spacing: -.01em; }
.metric .label { font-size: 13px; opacity: .9; }

nav.toc { position: sticky; top: 0; z-index: 5; background: var(--toc); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
nav.toc .wrap { display: flex; gap: 16px; overflow-x: auto; padding: 10px 0; font-size: 14px; white-space: nowrap; }
nav.toc a { text-decoration: none; color: var(--muted); }
nav.toc a:hover { color: var(--accent); }

.scope { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: 10px;
  padding: 14px 18px; margin: 28px 0 8px; }
main section { padding: 40px 0 20px; border-bottom: 1px solid var(--line); }
main section:last-of-type { border-bottom: 0; }
section h2 { font-size: 30px; letter-spacing: -.015em; margin: 0 0 4px; }
section .when { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
section h3 { font-size: 20px; margin: 26px 0 8px; }
.prose { max-width: 820px; }
.prose p { margin: 0 0 14px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: start; }
figure { margin: 18px 0; }
figure video, figure img { width: 100%; background: #000; }
figcaption { color: var(--muted); font-size: 14px; margin-top: 7px; }
.film { background: var(--film); border-radius: 14px; padding: 10px; max-width: 1000px; }
.film video { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 8px; }
.film figcaption { margin: 8px 4px 2px; }

.lesson, .failure, .note-box { border-radius: 10px; padding: 12px 16px; margin: 16px 0; max-width: 820px; }
.lesson { background: var(--soft); }
.lesson strong { color: var(--accent); }
.failure { background: var(--bad-soft); }
.failure strong { color: var(--bad); }
.note-box { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent-2); }
.note-box strong { color: var(--accent-2); }

table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 12px 0; background: var(--card); border-radius: 10px; overflow: hidden; }
th, td { text-align: left; padding: 8px 11px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--soft); font-weight: 620; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.hl td { background: var(--soft); }
tr.hl td:first-child { box-shadow: inset 4px 0 0 var(--accent); font-weight: 620; }
.table-wrap { overflow-x: auto; }

.result-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 18px 0 22px; }
.result-strip .tile { border-radius: 14px; padding: 16px 18px 14px; color: var(--tile-text); background: var(--tile-1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16); }
.result-strip .tile:nth-child(2) { background: var(--tile-2); }
.result-strip .tile:nth-child(3) { background: var(--tile-3); }
.result-strip .tile:nth-child(4) { background: var(--tile-4); }
.result-strip .big { font-size: 34px; font-weight: 720; letter-spacing: -.02em; line-height: 1.1; }
.result-strip .big small { font-size: 16px; font-weight: 600; opacity: .85; margin-left: 4px; }
.result-strip .what { font-size: 13.5px; opacity: .95; margin-top: 4px; }
.result-strip .vs { font-size: 12.5px; opacity: .82; margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, .28); padding-top: 6px; }

.spec-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 18px 0; }
.spec-cards .card { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 12px; padding: 14px 16px 10px; }
.spec-cards .card:nth-child(2) { border-top-color: var(--accent-2); }
.spec-cards .card:nth-child(3) { border-top-color: var(--accent-3); }
.spec-cards .card h4 { margin: 0 0 6px; font-size: 16px; }
.spec-cards .card ul { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.5; }
.spec-cards .card li { margin: 3px 0; }

.next-steps { list-style: none; counter-reset: next; padding: 0; margin: 18px 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.next-steps li { counter-increment: next; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px 12px 58px; position: relative; font-size: 15px; }
.next-steps li::before { content: counter(next); position: absolute; left: 14px; top: 14px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font-weight: 700; display: grid; place-items: center; font-size: 15px; }
.next-steps li strong { display: block; font-size: 16px; margin-bottom: 2px; }

footer { padding: 30px 0 60px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .lede { font-size: 17px; }
  .metric .value { font-size: 22px; }
  section h2 { font-size: 25px; }
}