: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); }
.all-projects { padding-left:1rem; border-left:1px solid var(--line); color:var(--muted); font-size:.85rem; font-weight:600; text-decoration:none; white-space:nowrap; }
.all-projects:hover { 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 240px; width:240px; max-width:100%; }
.figs img { display:block; width:100%; aspect-ratio:3/4; 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; }
.hv { white-space:nowrap; }

/* 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; }
.side li.l2 > a { display:block; margin:.7rem 0 .35rem; color:var(--accent-dark); font:.72rem/1.3 ui-monospace, Menlo, monospace; letter-spacing:.08em; text-transform:uppercase; font-weight:700; }
.side li.l2 > ol { margin-top:.2rem; padding-left:.9rem; }
.side li.l2 > ol li { font-size:.85rem; margin-bottom:.4rem; }

/* 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, .side li.l2 > ol { padding-left:.4rem; }

/* same offset for every numbered list, with or without a group label */
.side li.l1 > ol.steps, .side li.l2 > ol.steps { margin:.3rem 0 .6rem 0; padding-left:.9rem; }
.side li.l1 > ol.groups { margin:0; padding:0; }
.side li.l2 > a { margin-left:.9rem; }

/* 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; }

/* sub-item row under a part (bill of materials) */
.subrow td:first-child { padding-left:1.75rem; color:var(--muted); }

/* wide figure for diagrams */
.figs figure.wide { flex:0 0 100%; width:100%; }
.figs figure.wide img { aspect-ratio:auto; }

table.oneline th, table.oneline td { white-space:nowrap; }

/* BOM tables: fixed layout so the name column (and, where shared, id and qty) line up in every table */
table.oneline { table-layout:fixed; min-width:0; }
table.oneline col.s1 { width:262px; } table.oneline col.s2 { width:199px; } table.oneline col.s3 { width:121px; }
table.oneline col.fill { width:auto; }
table.oneline .f { padding:0; }

/* CNC and pins tables are short, so they shrink-wrap instead of filling the card */
.tbl.fit { width:fit-content; max-width:100%; }
.tbl table.bt1, .tbl table.bt2 { min-width:0; }
table.bt1 col.s1 { width:228px; } table.bt1 col.s2 { width:122px; } table.bt1 col.s3 { width:121px; } table.bt1 col.s4, table.bt1 col.s5, table.bt2 col.s4, table.bt2 col.s5 { width:100px; }
table.bt1 { width:671px; }
table.bt2 col.s1 { width:201px; } table.bt2 col.s2 { width:102px; } table.bt2 col.s3 { width:121px; } table.bt2 { width:624px; }

/* 3D-printed parts: part number first (same order as the CNC and pins tables); Description may wrap to 2 lines */
table.bt3 col.s1 { width:199px; } table.bt3 col.s2 { width:250px; } table.bt3 col.s3 { width:121px; } table.bt3 col.s4 { width:304px; } table.bt3 col.s5 { width:120px; }
table.bt3 { width:100%; min-width:994px; }
table.bt3 .subrow td:nth-child(2) { padding-left:1.75rem; color:var(--muted); }

/* BOM page uses the full width of the layout grid so the wide tables fit */
main.wide { max-width:none; }

/* CAD file links: no dotted underline, bigger preview (two views of the STEP model) */
.hv.stp { border-bottom:0; cursor:pointer; }
.hv.stp img { width:400px; max-width:80vw; }


/* Sensors, Off-the-shelf, Lubricants and Tools share one grid so Name, Qty, Vendor and Link line up:
   s1 name | s2 qty | s3-s5 detail columns | s6 vendor | s7 link. Tools and Lubricants merge detail slots (s345, s45). */
.tbl table.bt4 th, .tbl table.bt4 td, .tbl table.bt5 th, .tbl table.bt5 td, .tbl table.bt6 th, .tbl table.bt6 td, .tbl table.bt7 th, .tbl table.bt7 td { padding-left:.7rem; padding-right:.7rem; }
.tbl table.bt4 col.s1, .tbl table.bt5 col.s1, .tbl table.bt6 col.s1, .tbl table.bt7 col.s1 { width:266px; }
.tbl table.bt4 col.s2, .tbl table.bt5 col.s2, .tbl table.bt6 col.s2, .tbl table.bt7 col.s2 { width:115px; }
.tbl table.bt4 col.s3, .tbl table.bt5 col.s3, .tbl table.bt6 col.s3 { width:115px; }
.tbl table.bt4 col.s4, .tbl table.bt5 col.s4 { width:172px; }
.tbl table.bt4 col.s5, .tbl table.bt5 col.s5 { width:186px; }
.tbl table.bt6 col.s45 { width:358px; }
.tbl table.bt7 col.s345 { width:473px; }
.tbl table.bt4 col.s6, .tbl table.bt5 col.s6, .tbl table.bt6 col.s6, .tbl table.bt7 col.s6 { width:92px; }
.tbl table.bt4 col.s7, .tbl table.bt5 col.s7, .tbl table.bt6 col.s7, .tbl table.bt7 col.s7 { width:54px; }
.tbl table.bt4, .tbl table.bt5, .tbl table.bt6, .tbl table.bt7 { width:100%; min-width:1000px; }

/* Neck: the vendor "McMaster-Carr" is wider than the shared Vendor column, so Part Number gives up a little room. */
.tbl table.bt5 col.s5 { width:158px; }
.tbl table.bt5 col.s6 { width:120px; }

/* Consumables and Tools only have a few columns, so they shrink-wrap like the CNC tables instead of stretching across the card. */
.tbl.fit table.bt6, .tbl.fit table.bt7 { min-width:0; }
.tbl.fit table.bt6 { width:480px; }
.tbl.fit table.bt7 { width:594px; }
.tbl.fit table.bt6 col.s1 { width:266px; } .tbl.fit table.bt7 col.s1 { width:300px; }
.tbl.fit table.bt7 col.s2 { width:80px; }
.tbl.fit table.bt6 col.s6, .tbl.fit table.bt7 col.s6 { width:124px; }
.tbl.fit table.bt6 col.s7, .tbl.fit table.bt7 col.s7 { width:90px; }

/* BOM sidebar: sub-sections under a category */
.side .nav1 > li.l1 > ol.groups { margin:.2rem 0 .3rem; padding:0 0 0 .9rem; list-style:none; }
.side .nav1 > li.l1 > ol.groups > li { margin:0 0 .15rem; }
.side .nav1 > li.l1 > ol.groups > li > a { font-weight:500; font-size:.9rem; }
body.bom main h3 { margin:2.25rem 0 .5rem; }

/* Embodiment headings (Humanoid, Bimanual Manipulator) are the major sections: a banner with an accent bar and a label. */
body.bom main h2.emb { display:flex; align-items:center; flex-wrap:wrap; gap:.9rem; margin:4.5rem 0 .5rem; padding:1.1rem 1.4rem; border:1px solid var(--line); border-left:8px solid var(--accent); border-radius:12px; background:var(--callout); font-size:2.1rem; letter-spacing:-.03em; line-height:1.15; }
body.bom main h2.emb::before { content:"Embodiment"; padding:.3rem .65rem; border:1px solid var(--line); border-radius:999px; background:var(--bg); color:var(--accent-dark); font:700 .7rem/1 ui-monospace, Menlo, monospace; letter-spacing:.08em; text-transform:uppercase; }
body.bom main h2.emb ~ h3:first-of-type { margin-top:1.75rem; }
/* sub-sections under an embodiment are visibly one level down */
body.bom main h3 { padding-left:.75rem; border-left:3px solid var(--accent); }

/* Every BOM card is the same width, and no cell wraps: tables fill the card and a filler column absorbs the slack. */
.tbl.fit { width:auto; max-width:none; }
.tbl table.bt1, .tbl table.bt4, .tbl table.bt5, .tbl table.bt6, .tbl table.bt7 { width:100%; min-width:1000px; }
.tbl.fit table.bt6, .tbl.fit table.bt7 { width:100%; min-width:1000px; }

/* Short tables spread their columns across the whole card instead of leaving dead space on the right. */
.tbl table.bt1 col.s1 { width:27%; } .tbl table.bt1 col.s2 { width:24%; } .tbl table.bt1 col.s3 { width:13%; } .tbl table.bt1 col.s4 { width:18%; } .tbl table.bt1 col.s5 { width:18%; }
.tbl table.bt6 col.s1 { width:50%; } .tbl table.bt6 col.s6 { width:25%; } .tbl table.bt6 col.s7 { width:25%; }
.tbl table.bt7 col.s1 { width:40%; } .tbl table.bt7 col.s2 { width:15%; } .tbl table.bt7 col.s6 { width:25%; } .tbl table.bt7 col.s7 { width:20%; }
.tbl table.bt1 col.fill, .tbl table.bt6 col.fill, .tbl table.bt7 col.fill { width:0; }

/* One floating Back button in the top right corner (added by script.js) */
/* 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; } }

/* Printed Parts cards copy the DexUMI 3D-printed parts table: number, part, qty, description, files */
.tbl table.bt3 { width:100%; min-width:1000px; }
.tbl table.bt3 col.s1 { width:27%; } .tbl table.bt3 col.s2 { width:24%; } .tbl table.bt3 col.s3 { width:13%; } .tbl table.bt3 col.s4 { width:26%; } .tbl table.bt3 col.s5 { width:10%; } .tbl table.bt3 col.fill { width:0; }
.tbl table.bt3 td:nth-child(4) { white-space:normal; }

/* Cover render under the Start Here overview. */
.hero { margin:1.5rem 0 2rem; text-align:center; }
.hero img { display:block; width:min(100%, 38rem); height:auto; margin:0 auto; border-radius:12px; background:#fff; }
/* one large render with two smaller ones beside it */
.hero.big { display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:.6rem; }
.hero.big img { width:100%; height:100%; min-height:10rem; margin:0; object-fit:cover; border:1px solid var(--line); }
.hero.big img:first-child { grid-row:1 / 3; aspect-ratio:4 / 3; height:auto; }

/* Short explanatory note above a table (BOM purchase quantities). */
.note { max-width:62rem; margin:.5rem 0 1rem; padding:.6rem .9rem; border-left:3px solid var(--accent); background:var(--callout); color:var(--muted); font-size:.95rem; line-height:1.5; }
.note strong { color:var(--fg); margin-right:.35rem; }

/* 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; }