:root{
  --ground:#EDEFEC; --surface:#F8F9F7; --surface-2:#E3E8E3; --line:#D3D9D3; --line-soft:#E2E7E2;
  --ink:#141A1C; --ink-2:#3A4746; --muted:#5A6764;
  --accent:#0E7169; --accent-ink:#0A5A54; --accent-soft:#D7E8E5;
  --copper:#8E4C21; --copper-soft:#F4E7DC;
  --good:#256B39; --good-soft:#DCEBDF;
  --code-bg:#EDEFEA; --code-ink:#1B2224;
  --b0:#2B2F31; --b1:#6B4526; --b2:#9E3325;
  --b3:#8C5417; --b4:#6E5D00; --b5:#2A6E3D;
  --b6:#1F5A8C; --b7:#5E3E8C; --b8:#454B4F;
  --bc:#0E7169;
  --shadow:0 1px 2px rgba(20,26,28,.06), 0 8px 24px -16px rgba(20,26,28,.24);
  --measure:64ch; --wide:1000px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0F1417; --surface:#161E22; --surface-2:#1F282D; --line:#2B373C; --line-soft:#222C31;
    --ink:#E3E9E5; --ink-2:#BDC9C5; --muted:#93A19D;
    --accent:#45B8AC; --accent-ink:#7ED6CB; --accent-soft:#11302E;
    --copper:#D08A56; --copper-soft:#31221A;
    --good:#5FB878; --good-soft:#14291B;
    --code-bg:#111A1E; --code-ink:#D6E2DE;
    --b0:#9AA3A6; --b1:#B98452; --b2:#E2705F;
  --b3:#E0A054; --b4:#D6C24A; --b5:#5FB878;
  --b6:#7FB3E0; --b7:#B096DE; --b8:#A9B1B5;
    --b3:#E0A054; --b4:#D6C24A; --b5:#5FB878;
    --b6:#7FB3E0; --b7:#B096DE; --b8:#A9B1B5;
    --bc:#45B8AC;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#0F1417; --surface:#161E22; --surface-2:#1F282D; --line:#2B373C; --line-soft:#222C31;
  --ink:#E3E9E5; --ink-2:#BDC9C5; --muted:#93A19D;
  --accent:#45B8AC; --accent-ink:#7ED6CB; --accent-soft:#11302E;
  --copper:#D08A56; --copper-soft:#31221A;
  --good:#5FB878; --good-soft:#14291B;
  --code-bg:#111A1E; --code-ink:#D6E2DE;
  --b0:#9AA3A6; --b1:#B98452; --b2:#E2705F;
  --b3:#E0A054; --b4:#D6C24A; --b5:#5FB878;
  --b6:#7FB3E0; --b7:#B096DE; --b8:#A9B1B5;
  --bc:#45B8AC;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
body{
  background:var(--ground); color:var(--ink); margin:0; padding:0 1.25rem 6rem;
  font-family:"Source Serif 4","Iowan Old Style",Georgia,serif;
  font-size:clamp(1rem,.95rem + .25vw,1.12rem); line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wide); margin:0 auto}
.col{max-width:var(--measure)}
h1,h2,h3,h4,h5,.eyebrow,.chip,th,.stepno,nav a,summary,.tag{font-family:"Archivo","Helvetica Neue",Arial,sans-serif}
h1,h2,h3,h4,h5{margin:0; line-height:1.2; text-wrap:balance}
p,ul,ol{margin:0}
strong{font-weight:600}
code{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:.86em;
  background:var(--surface-2); border:1px solid var(--line-soft); border-radius:3px; padding:.08em .32em;
}
pre{
  margin:0; background:var(--code-bg); color:var(--code-ink);
  border:1px solid var(--line); border-radius:7px; padding:1rem 1.1rem;
  overflow-x:auto; font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-size:.8rem; line-height:1.7;
}
pre code{background:none; border:none; padding:0; font-size:inherit; color:inherit}
.filename{font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--muted); display:block; margin-bottom:.4rem}

nav{
  position:sticky; top:0; z-index:20; background:var(--ground);
  border-bottom:1px solid var(--line); margin:0 -1.25rem; padding:.6rem 1.25rem;
  display:flex; gap:.35rem; flex-wrap:wrap; align-items:center;
}
nav a{
  font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; color:var(--muted); padding:.3rem .55rem; border-radius:99px; border:1px solid transparent;
}
nav a:hover,nav a:focus-visible{color:var(--ink); border-color:var(--line); background:var(--surface)}

.stack{display:flex; flex-direction:column; gap:1.1rem}
.stack-sm{display:flex; flex-direction:column; gap:.55rem}
.eyebrow{font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
h1{font-size:clamp(1.9rem,1.4rem + 2.6vw,3.1rem); font-weight:700; letter-spacing:-.03em}
h2{font-size:clamp(1.35rem,1.15rem + .9vw,1.8rem); font-weight:600; letter-spacing:-.02em}
h3{font-size:1.12rem; font-weight:600}
h4{font-size:1rem; font-weight:600}
h5{font-size:.7rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.note{font-size:.94em; color:var(--muted)}
.sub{color:var(--ink-2)}
ul.plain{padding-left:1.15rem; display:flex; flex-direction:column; gap:.4rem}
ul.plain li::marker{color:var(--bc)}
ol.num{padding-left:1.4rem; display:flex; flex-direction:column; gap:.55rem}

section.part{padding:2.4rem 0; border-top:1px solid var(--line)}
.parthead{display:flex; gap:.8rem; align-items:baseline; flex-wrap:wrap; margin-bottom:1rem}
.tag{
  font-size:.66rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--bc); border:1px solid var(--bc); border-radius:4px; padding:.12rem .42rem; white-space:nowrap;
}
.mins{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--muted)}

.card{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:1.15rem 1.3rem; box-shadow:var(--shadow)}
.grid-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem}

.words{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--bc); border-radius:0 8px 8px 0; padding:1rem 1.2rem}
.words dl{display:grid; grid-template-columns:auto 1fr; gap:.45rem 1rem; margin:.6rem 0 0; font-size:.95em}
.words dt{font-family:"IBM Plex Mono",monospace; font-size:.82em; color:var(--ink); font-weight:500; padding-top:.16rem}
.words dd{margin:0; color:var(--ink-2)}

.steps{display:flex; flex-direction:column; gap:1.1rem; counter-reset:s}
.step{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.35rem .9rem; align-items:start}
.step::before{
  counter-increment:s; content:counter(s);
  font-family:"IBM Plex Mono",monospace; font-size:.78rem; font-weight:600; color:var(--bc);
  border:1px solid var(--bc); border-radius:50%; width:1.8rem; height:1.8rem;
  display:grid; place-items:center; margin-top:.15rem; grid-row:span 3;
}
.step .body{display:flex; flex-direction:column; gap:.5rem; min-width:0}

.see,.ifnot{border-radius:6px; padding:.6rem .85rem; font-size:.93em; line-height:1.6}
.see{background:var(--good-soft); color:var(--ink)}
.ifnot{background:var(--copper-soft); color:var(--ink)}
.see b,.ifnot b{font-family:"Archivo",sans-serif; font-size:.66rem; letter-spacing:.11em; text-transform:uppercase; display:block; margin-bottom:.15rem; font-weight:600}
.see b{color:var(--good)}
.ifnot b{color:var(--copper)}

.callout{border-left:3px solid var(--bc); padding:.2rem 0 .2rem 1rem; display:flex; flex-direction:column; gap:.5rem}
.brief{background:var(--accent-soft); border-radius:7px; padding:1.05rem 1.2rem; display:flex; flex-direction:column; gap:.6rem}

details{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:.85rem 1.1rem}
details[open]{box-shadow:var(--shadow)}
summary{cursor:pointer; font-size:.73rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink)}
details .inner{padding-top:.85rem; display:flex; flex-direction:column; gap:.7rem; font-size:.96em; color:var(--ink-2)}

.scroll{overflow-x:auto; border:1px solid var(--line); border-radius:8px; background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:.9em; min-width:520px}
th{text-align:left; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
   font-weight:600; padding:.7rem .9rem; border-bottom:1px solid var(--line); background:var(--surface-2)}
td{padding:.7rem .9rem; border-bottom:1px solid var(--line-soft); color:var(--ink-2); vertical-align:top}
tr:last-child td{border-bottom:none}
td:first-child{color:var(--ink)}
td code{white-space:nowrap}

figure{margin:0; display:flex; flex-direction:column; gap:.6rem}
figure svg{max-width:100%; height:auto; display:block; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:.8rem}
figcaption{font-size:.9em; color:var(--muted)}

.tier{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.6rem 1rem; align-items:start}
.tier dt{font-family:"Archivo",sans-serif; font-size:.68rem; font-weight:600; letter-spacing:.11em;
         text-transform:uppercase; color:var(--bc); padding-top:.3rem; white-space:nowrap}
.tier dd{margin:0; color:var(--ink-2)}

footer{border-top:1px solid var(--line); padding-top:1.6rem; margin-top:3.5rem; color:var(--muted); font-size:.9em}
a{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* generated wiring diagrams. A board can run to 45 columns, so the figure
   breaks out of the reading column to the full page width and, past that,
   scrolls inside itself rather than making the page scroll sideways. */
figure.wiring{
  margin:1.3rem 0 1.6rem;
  width:min(var(--wide), calc(100vw - 2.5rem));
  max-width:none;
  overflow-x:auto;
}
figure.wiring svg{padding:.9rem .8rem}
figure.wiring figcaption{
  font-size:.92rem; color:var(--muted); margin-top:.55rem;
  line-height:1.55; max-width:var(--measure);
}
@media (max-width:760px){ figure.wiring{width:calc(100vw - 2.5rem)} }


/* ---------- added for the standalone site ---------- */
[data-band="0"]{--bc:var(--b0)} [data-band="1"]{--bc:var(--b1)} [data-band="2"]{--bc:var(--b2)}
[data-band="3"]{--bc:var(--b3)} [data-band="4"]{--bc:var(--b4)} [data-band="5"]{--bc:var(--b5)}
[data-band="6"]{--bc:var(--b6)} [data-band="7"]{--bc:var(--b7)} [data-band="8"]{--bc:var(--b8)}

.skip{position:absolute; left:-9999px; top:0; background:var(--surface); color:var(--ink);
      padding:.6rem 1rem; border:1px solid var(--line); border-radius:0 0 6px 0; z-index:60}
.skip:focus{left:0}

.topbar{
  border-bottom:1px solid var(--line); margin:0 -1.25rem 0; padding:.55rem 1.25rem;
  display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; background:var(--surface);
}
.topbar .home{font-family:"Archivo",sans-serif; font-size:.74rem; font-weight:700; letter-spacing:.04em;
              text-decoration:none; color:var(--ink); margin-right:.4rem}
.topbar .home span{color:var(--muted); font-weight:500}
.bandlinks{display:flex; gap:.25rem; flex-wrap:wrap; margin-left:auto}
.bandlinks a{
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; text-decoration:none;
  color:var(--muted); border:1px solid var(--line); border-radius:5px; padding:.12rem .42rem;
}
.bandlinks a:hover,.bandlinks a:focus-visible{color:var(--ink); background:var(--ground)}
.bandlinks a[aria-current="page"]{color:var(--bc); border-color:var(--bc); font-weight:600}

.sketchbox{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--bc);
  border-radius:0 8px 8px 0; padding:.9rem 1.1rem; margin:1.4rem 0 0; max-width:var(--measure);
}
.sketchbox h2{font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem}
.sketchbox ul{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.3rem}
.sketchbox a{font-family:"IBM Plex Mono",monospace; font-size:.74rem; text-decoration:none;
             color:var(--ink-2); border:1px solid var(--line); border-radius:5px; padding:.16rem .45rem; background:var(--ground)}
.sketchbox a:hover,.sketchbox a:focus-visible{color:var(--ink); border-color:var(--bc)}
.sketchbox p{font-size:.88em; color:var(--muted); margin-top:.6rem}

/* ---------- project pages and the choose-your-build index ---------- */
.choose{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--bc);
  border-radius:0 8px 8px 0; padding:1rem 1.15rem; margin:1.4rem 0 0; max-width:var(--measure);
}
.choose h2{font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.6rem}
.choose ul{list-style:none; padding:0; margin:0; display:grid; gap:.5rem}
.choose li{display:grid; grid-template-columns:4.6rem 1fr; gap:.7rem; align-items:baseline}
.choose a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line)}
.choose a:hover,.choose a:focus-visible{border-bottom-color:var(--bc); color:var(--bc)}
.choose .cb{font-size:.88em; color:var(--muted); display:block}
.choose > p{font-size:.88em; color:var(--muted); margin-top:.7rem}

.ptype{display:inline-block; font-family:"Archivo",sans-serif; font-size:.6rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; border-radius:3px; padding:.14rem .4rem;
  border:1px solid; white-space:nowrap; line-height:1.2}
.ptype.core{color:var(--surface); background:var(--ink); border-color:var(--ink)}
.ptype.swap{color:var(--bc); border-color:var(--bc); background:transparent}
.ptype.practice{color:var(--accent); border-color:var(--accent); background:transparent}
.ptype.stretch{color:var(--copper); border-color:var(--copper); background:transparent}
.ptype.identify{color:var(--muted); border-color:var(--line); background:transparent}
.ptype.ship{color:var(--b7); border-color:var(--b7); background:transparent}
.ptype.bench{color:var(--b8); border-color:var(--b8); background:transparent}
.ptype.invent{color:var(--copper); border-color:var(--copper); background:transparent}

/* ---- three-column idea matrix ---- */
.matrix3{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:3px;
  margin:1.1rem 0; max-width:var(--wide)}
.matrix3 .mcol{background:var(--surface); padding:1rem 1.15rem}
.matrix3 .lbl{display:block; font-family:"Archivo",sans-serif; font-size:.64rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:.55rem}
.matrix3 ul{margin:0; padding-left:1rem; font-family:"IBM Plex Mono",monospace;
  font-size:.8rem; color:var(--ink-2); line-height:1.9}


/* ---- ship it: the evidence, put where somebody can see it ---- */
.ship{
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--b7);
  border-radius:0 3px 3px 0; padding:1.3rem 1.5rem; margin:2rem 0; max-width:var(--wide);
}
.ship h2{font-family:"Archivo",sans-serif; font-size:1.02rem; font-weight:700;
  letter-spacing:.02em; margin:0 0 .5rem; color:var(--b7)}
.ship p{margin:0 0 .7rem; max-width:var(--measure)}
.ship p:last-child{margin-bottom:0}
.ship ol{margin:.7rem 0; padding-left:1.15rem; max-width:var(--measure)}
.ship li{margin-bottom:.35rem}
.ship .cam{background:var(--surface-2); border-radius:3px; padding:.7rem .9rem; margin:.7rem 0;
  font-size:.95em; max-width:var(--measure)}
.ship code{font-size:.9em}


.projmeta{display:grid; gap:.55rem; margin:1.3rem 0 0; max-width:var(--measure);
  background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:1rem 1.15rem}
.projmeta div{display:grid; grid-template-columns:7.5rem 1fr; gap:.8rem; font-size:.92em}
.projmeta dt{font-family:"Archivo",sans-serif; font-size:.68rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); padding-top:.15rem}
.projmeta dd{margin:0; color:var(--ink-2)}

/* the "which one have you got" decision block */
.which{
  background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--copper);
  border-radius:2px; padding:1.1rem 1.25rem; margin:1.5rem 0; max-width:var(--measure);
}
.which h4{font-family:"Archivo",sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--copper); margin:0 0 .6rem}
.which > p{margin:0 0 .8rem}
.which .opts{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin:.9rem 0 .3rem}
.which .opt{background:var(--ground); padding:.85rem 1rem}
.which .opt b{display:block; font-family:"Archivo",sans-serif; font-size:.88rem; margin-bottom:.25rem; color:var(--ink)}
.which .opt p{margin:0 0 .4rem; font-size:.9em; line-height:1.5}
.which .opt p:last-child{margin-bottom:0}
.which .go{font-family:"IBM Plex Mono",monospace; font-size:.78em; color:var(--bc)}

/* a callout that must not be skimmed past */
:root{--danger:#B03A2E; --danger-soft:#FBEEEB}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--danger:#E8776A; --danger-soft:#2A1714}}
:root[data-theme="dark"]{--danger:#E8776A; --danger-soft:#2A1714}
.callout.danger{border-left:4px solid var(--danger); background:var(--danger-soft);
  padding:.9rem 1.1rem .9rem 1.1rem; border-radius:0 3px 3px 0}
.callout.danger h5{color:var(--danger)}

.pager{display:flex; gap:1rem; flex-wrap:wrap; justify-content:space-between;
       border-top:1px solid var(--line); margin-top:3rem; padding-top:1.4rem}
.pager a{
  display:block; text-decoration:none; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:8px; padding:.8rem 1.1rem; min-width:min(100%,240px); flex:1;
}
.pager a:hover,.pager a:focus-visible{border-color:var(--bc)}
.pager .dir{display:block; font-family:"Archivo",sans-serif; font-size:.66rem; font-weight:600;
            letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:.2rem}
.pager .name{font-family:"Archivo",sans-serif; font-weight:600}
.pager .next{text-align:right}

.bandgrid{display:flex; flex-direction:column; gap:1rem}
.bandcard{
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--bc);
  border-radius:0 8px 8px 0; padding:1.15rem 1.3rem; box-shadow:var(--shadow);
  text-decoration:none; color:inherit; display:block;
}
.bandcard:hover,.bandcard:focus-visible{border-color:var(--bc)}
.bandcard .row{display:flex; gap:.8rem; align-items:baseline; flex-wrap:wrap; margin-bottom:.5rem}
.bandcard h3{font-size:1.1rem; font-weight:700}
.bandcard p{color:var(--ink-2); font-size:.96em}
.bandcard .go{display:inline-block; margin-top:.6rem; font-family:"Archivo",sans-serif;
              font-size:.76rem; font-weight:600; color:var(--bc)}
.startbtn{
  display:inline-block; text-decoration:none; background:var(--accent); color:#fff;
  font-family:"Archivo",sans-serif; font-weight:600; font-size:1rem;
  padding:.75rem 1.5rem; border-radius:8px; margin-top:.4rem;
}
.startbtn:hover,.startbtn:focus-visible{filter:brightness(1.08)}