: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 { 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; } 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; }
.hv:not(:has(img)) { cursor:default; }   /* underlined part name with no picture yet */

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; }
.hv { white-space:nowrap; }
.figs figure { flex:0 0 240px; width:240px; }
.figs img { aspect-ratio:3/4; }

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

/* numbered step entries: number column + hanging text */
.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; }

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

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

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

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 td:nth-child(4), table.bt5 td:nth-child(5), table.bt7 td:nth-child(1) { white-space:normal; }
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; }
/* BOM: a part with several download links gets a click-to-open dropdown in its Link cell */
.dd { position:relative; display:inline-block; }
.dd summary { list-style:none; cursor:pointer; color:var(--accent-dark); text-decoration:underline; }
.dd summary::-webkit-details-marker { display:none; }
.dd summary::after { content:" \25BE"; font-size:.8em; display:inline-block; text-decoration:none; }
.dd[open] summary::after { content:" \25B4"; }
.dd-menu { position:fixed; z-index:50; margin:0; min-width:9.5rem; display:flex; flex-direction:column; padding:.3rem; background:var(--bg); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.dd-menu a { padding:.4rem .7rem; border-radius:5px; color:var(--fg); text-decoration:none; white-space:nowrap; }
.dd-menu a:hover, .dd-menu a:focus-visible { background:var(--callout); color:var(--accent-dark); }


/* 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:210px; }
.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; }

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


/* BOM wires: one group per wire type; the ends are listed once, the lengths run down the rows */
.tbl table.wires { min-width:0; width:100%; }
.tbl table.wires th, .tbl table.wires td { padding-left:.9rem; padding-right:.9rem; white-space:nowrap; }
.tbl table.wires tbody tr:not(.last) td { border-bottom-color:transparent; }
.tbl table.wires td[rowspan] { border-bottom:1px solid var(--line); border-right:1px solid var(--line); }
.tbl table.wires td b { font-weight:600; font-family:ui-monospace, Menlo, monospace; font-size:.88em; }

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