:root { --bg:#fff; --fg:#1b1f1a; --muted:#5b625a; --line:#e3e6e1; --accent:#8bd62a; --accent-dark:#3f6b0c; --callout:#f3f4ee; }
@media (prefers-color-scheme: dark) { :root { --bg:#121411; --fg:#ececea; --muted:#a3a99f; --line:#2b2e29; --accent-dark:#9ee04a; --callout:#1b1e18; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:17px/1.7 "Inter", system-ui, -apple-system, sans-serif; }
a { color:var(--accent-dark); }
.top { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.25rem 2.5rem; border-bottom:1px solid var(--line); }
.brand-group { display:flex; align-items:center; gap:1rem; flex-wrap:nowrap; flex-shrink:0; }
.brand { display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--fg); }
.mark { width:28px; height:36px; background:var(--accent); border-radius:2px; }
.brand .name { font-size:2rem; font-weight:800; letter-spacing:-.04em; }
.brand .sub { font:.8rem/1.2 ui-monospace, Menlo, monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border-left:1px solid var(--line); padding-left:.9rem; }
nav { display:flex; gap:2rem; flex-wrap:wrap; }
nav a { color:var(--muted); text-decoration:none; font-weight:600; padding:.6rem 0; border-bottom:3px solid transparent; }
nav a:hover { color:var(--fg); }
nav a.active { color:var(--fg); border-bottom-color:var(--accent); }
.layout { display:grid; grid-template-columns:300px minmax(0,1fr); max-width:1400px; margin:0 auto; }
.side { border-right:1px solid var(--line); padding:1.5rem 1.5rem 3rem 2.5rem; position:sticky; top:0; align-self:start; max-height:100vh; overflow:auto; }
.side ol { list-style:none; margin:0; padding:0; }
.side li { margin:0 0 .9rem; font-size:.95rem; line-height:1.4; }
.side a { color:var(--muted); text-decoration:none; }
.side a:hover { color:var(--accent-dark); }
main { padding:1.5rem 3rem 5rem; max-width:60rem; }
.crumbs { color:var(--muted); font-size:.95rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }
h1 { font-size:3.2rem; letter-spacing:-.04em; line-height:1.1; margin:2.5rem 0 1.5rem; }
h2 { font-size:1.6rem; letter-spacing:-.02em; margin:2.5rem 0 .5rem; }
.callout { background:var(--callout); border-left:4px solid var(--accent-dark); padding:1.25rem 1.5rem; margin:1.5rem 0; color:var(--muted); }
.callout strong { color:var(--fg); }
pre { overflow-x:auto; padding:1rem; background:var(--callout); border:1px solid var(--line); }
table { width:100%; border-collapse:collapse; margin:1rem 0; }
th, td { border-bottom:1px solid var(--line); padding:.6rem; text-align:left; }
@media (max-width:800px) { .layout { grid-template-columns:1fr; } .side { position:static; border-right:0; border-bottom:1px solid var(--line); padding:1rem 1.5rem; } main { padding:1rem 1.5rem 3rem; } .top { padding:1rem 1.5rem; } .brand-group { flex-wrap:wrap; flex-shrink:1; } h1 { font-size:2.3rem; } }

.hv { position:relative; display:inline-block; border-bottom:1px dotted var(--accent-dark); cursor:zoom-in; }
.hv img { display:none; position:absolute; left:0; top:100%; z-index:10; width:260px; max-width:70vw; margin-top:.4rem; background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.hv:hover img, .hv:focus img, .hv.open img { display:block; }

h3 { font-size:1.2rem; margin:2rem 0 .25rem; }
.needs { margin:.1rem 0; color:var(--muted); font-size:.95rem; }
.figs { display:flex; flex-wrap:wrap; gap:1rem; margin:1rem 0; }
.figs figure { margin:0; flex:0 0 320px; width:320px; max-width:100%; }
.figs img { display:block; width:100%; aspect-ratio:1/1; object-fit:contain; cursor:zoom-in; border:1px solid var(--line); border-radius:6px; background:#fff; }

.flag { background:rgba(220,38,38,.15); color:#dc2626; font-weight:700; padding:0; box-shadow:0 0 0 .2rem rgba(220,38,38,.15); border-radius:3px; }
.flag-note { display:block; margin-top:.5rem; color:#dc2626; font-size:.95rem; }
@media (prefers-color-scheme: dark) { .flag, .flag-note { color:#f87171; } }

.todo { color:#dc2626; background:rgba(220,38,38,.15); font-weight:700; padding:0; box-shadow:0 0 0 .2rem rgba(220,38,38,.15); border-radius:3px; }
@media (prefers-color-scheme: dark) { .todo { color:#f87171; } }

.side a { position:relative; }
.side a.current { color:var(--fg); font-weight:700; }
.side a.current::before { content:""; position:absolute; left:-.75rem; top:.2em; bottom:.2em; width:3px; background:var(--accent); border-radius:2px; }
.stepnav { display:flex; justify-content:space-between; margin:1rem 0 0; padding-top:.5rem; border-top:1px solid var(--line); font-size:.95rem; }
.hint { color:var(--muted); font-size:.95rem; }

/* sidebar hierarchy (hardware guide) */
.side .nav1 > li.l1 { margin:0 0 .6rem; }
.side .nav1 > li.l1 > a { color:var(--fg); font-weight:700; font-size:1rem; }
.side ol ol { margin:.4rem 0 .6rem .2rem; padding-left:.9rem; }
.side ol ol li { margin:0 0 .5rem; font-size:.9rem; }

/* step entries: small mono label above the title */
.side ol.steps a { display:grid; grid-template-columns:1.5rem 1fr; column-gap:.35rem; align-items:baseline; }
.side ol.steps .n { color:var(--accent-dark); font:700 .75rem/1.4 ui-monospace, Menlo, monospace; text-align:right; }
.side ol ol { padding-left:.4rem; }

/* main step headings: number and title on one line */
h3 .num { display:inline-block; min-width:2rem; margin-right:.5rem; color:var(--accent-dark); font:700 1rem/1 ui-monospace, Menlo, monospace; }

/* assembly groups: label with step range, no numbered step list */
.side li.l1 > ol.groups { margin:.3rem 0 .6rem; padding:0; }
.side li.l2 { margin:0 0 .45rem; }
.side li.l2 > a { display:block; margin-left:.9rem; font-size:.9rem; }

/* back to top button, added by script.js once the page is scrolled well down */
.to-top { position:fixed; right:1.25rem; top:1.25rem; z-index:40; padding:.6rem 1rem; border:1px solid var(--line); border-radius:999px; background:var(--bg); color:var(--fg); font:600 .85rem/1 system-ui, -apple-system, sans-serif; box-shadow:0 4px 14px rgba(0,0,0,.18); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(-.5rem); transition:opacity .2s, transform .2s, visibility .2s; }
.to-top.show { opacity:1; visibility:visible; transform:none; }
.to-top:hover { border-color:var(--accent-dark); }
.to-top:focus-visible { outline:2px solid var(--accent-dark); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition:none; } }

/* overview picture: shown whole, on its own background colour */
.figs.overview figure { flex:0 0 560px; width:560px; }
.figs.overview img { aspect-ratio:auto; background:#f5f5f3; }

/* Download-all zips table at the top of the BOM */
.tbl table.dlall { min-width:0; }
.tbl table.dlall th, .tbl table.dlall td { padding-left:.9rem; padding-right:.9rem; white-space:nowrap; }
.tbl table.dlall .dim { margin-left:.35rem; color:var(--muted); font-size:.85em; }

/* Home tab: back to the GR00T Data Hardware Prototypes main page, styled like the other tabs, set off by a divider */
nav .proj-menu + a { position:relative; }
nav .proj-menu + a::before { content:""; position:absolute; left:-1rem; top:50%; width:1px; height:1.1em; background:var(--line); transform:translateY(-50%); }

/* Projects menu: first item in the tab bar, linking to the main page and each project.
   Built on <details>, so it opens without JavaScript; script.js closes it on an outside click or Escape. */
.proj-menu { position:relative; }
.proj-menu > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:.45rem; color:var(--muted); font-weight:600; padding:.6rem 0; border-bottom:3px solid transparent; }
.proj-menu > summary::-webkit-details-marker { display:none; }
.proj-menu > summary::after { content:""; width:.4em; height:.4em; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-.15em) rotate(45deg); transition:transform .2s; }
.proj-menu[open] > summary::after { transform:translateY(.12em) rotate(-135deg); }
.proj-menu > summary:hover, .proj-menu[open] > summary { color:var(--fg); }
.proj-menu > summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.proj-list { position:absolute; left:0; top:calc(100% + .4rem); z-index:50; min-width:12rem; display:grid; padding:.4rem; background:var(--bg); border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 34px rgba(0,0,0,.16); }
nav .proj-list a { position:relative; display:grid; gap:.1rem; padding:.55rem .75rem; border:0; border-radius:8px; color:var(--fg); font-weight:600; }
nav .proj-list a:hover, nav .proj-list a:focus-visible { background:var(--callout); outline:none; }
.proj-list a[aria-current]::before { content:""; position:absolute; left:0; top:.65rem; bottom:.65rem; width:3px; border-radius:2px; background:var(--accent); }
.proj-list hr { border:0; border-top:1px solid var(--line); margin:.3rem .6rem; }

/* ---------- Phones and small tablets ---------- */
/* One column that never grows past the screen: wide tables, code and pictures scroll or shrink inside it. */
@media (max-width:800px) {
  .layout { grid-template-columns:minmax(0, 1fr); }
  main { min-width:0; max-width:100%; }
  .figs.overview figure { flex:1 1 auto; width:100%; }
  .tbl { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
/* Compact header, and the side menu folds behind an "On this page" button (added by script.js).
   Section switchers in the menu (li.tab buttons) stay visible so every part of the page is reachable. */
.side-toggle { display:none; }
@media (max-width:700px) {
  .top { padding:.7rem 1rem; gap:.35rem; }
  .brand { gap:.55rem; }
  .brand .name { font-size:1.45rem; }
  .brand .sub { display:none; }
  nav { gap:.15rem 1.05rem; }
  nav a, .proj-menu > summary { padding:.4rem 0; font-size:.9rem; }
  nav .proj-menu + a::before { left:-.55rem; }
  .side { padding:.55rem 1rem; max-height:none; }
  .side-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; padding:.55rem .1rem; border:0; background:none; color:var(--fg); font:600 .95rem/1.2 inherit; font-family:inherit; cursor:pointer; }
  .side-toggle::after { content:""; width:.45em; height:.45em; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-.2em) rotate(45deg); transition:transform .2s; }
  .side.open .side-toggle::after { transform:translateY(.1em) rotate(-135deg); }
  .side.open .side-toggle { margin-bottom:.5rem; }
  .side:not(.open) > ol:not(.tabs) { display:none; }
  .side:not(.open) ol.tabs { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.35rem; }
  .side:not(.open) ol.tabs > li.tab { margin:0; }
  .side:not(.open) ol.tabs > li.tab > :not(.tabbtn) { display:none; }
  .side:not(.open) .tabbtn { width:auto; gap:.5rem; }
  .to-top { top:auto; bottom:1rem; right:1rem; }
}
/* Long file paths and links wrap instead of pushing the page wider; step grids shrink to the screen. */
@media (max-width:800px) {
  main :is(p, li, td, h2, h3, h4, figcaption, .callout, .notes) :is(code, a) { overflow-wrap:anywhere; word-break:break-word; }
  main .step .body { grid-template-columns:minmax(0, 1fr); }
  main .step .body > *, main .panel, main .text { min-width:0; }
}
@media (max-width:800px) { main :not(.hv) > img { max-width:100%; height:auto; } }
@media (max-width:420px) { main .figs { grid-template-columns:minmax(0, 1fr); } main .figs figure { min-width:0; } }
/* BibTeX blocks on the Research Sources pages. */
pre.bib { font-size:.82rem; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }