[hidden]{display:none!important}
/* Matches tmproductions.com: Open Sans in uppercase tracked caps for structure, Georgia for reading,
   teal links. Board drawings keep their own lamp colors. */
:root{
  --bg:#FFFFFF; --fg:#232323; --head:#454545; --muted:#6A6A6A; --rule:#E3E3E3; --tint:#F3F3F3;
  --accent:#006885; --accent-soft:#83B3BE;
  --board:#E6EAE4; --board-edge:#7E8A82; --sock:#CDD2CB;
  --pad:#C49A1C; --pad-off:#BCC1BA; --drill:#FFFFFF; --metal:#9AA0A6; --nylon:#EFEBDD;
  --turn:#D07F00; --brake:#C3172F; --tail:#7F1C2C; --rev:#4F6B86; --gnd:#5F6A63;
  --sans:"Open Sans","Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141414; --fg:#E6E6E6; --head:#F0F0F0; --muted:#A3A3A3; --rule:#2E2E2E; --tint:#1D1D1D;
  --accent:#6FC3D6; --accent-soft:#3F7F8D;
  --board:#1E2521; --board-edge:#5F6D65; --sock:#2C3631;
  --pad:#D9B23A; --pad-off:#46514B; --drill:#141414; --metal:#7C838A; --nylon:#5A574E;
  --turn:#F2A93B; --brake:#FF5C70; --tail:#D9798A; --rev:#9DB9D6; --gnd:#9AA59E; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141414; --fg:#E6E6E6; --head:#F0F0F0; --muted:#A3A3A3; --rule:#2E2E2E; --tint:#1D1D1D;
  --accent:#6FC3D6; --accent-soft:#3F7F8D;
  --board:#1E2521; --board-edge:#5F6D65; --sock:#2C3631;
  --pad:#D9B23A; --pad-off:#46514B; --drill:#141414; --metal:#7C838A; --nylon:#5A574E;
  --turn:#F2A93B; --brake:#FF5C70; --tail:#D9798A; --rev:#9DB9D6; --gnd:#9AA59E; color-scheme:dark}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--serif);font-size:17px;line-height:1.6}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--fg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.masthead{border-bottom:1px solid var(--rule);text-align:center;padding-block:22px;padding-inline:16px}
.sitename{font-family:var(--sans);font-weight:600;font-size:22px;letter-spacing:1px;text-transform:uppercase;color:var(--head);text-decoration:none}
.sitename:hover{color:var(--accent)}
.wrap{max-width:1180px;margin:0 auto;padding-block:36px 56px;padding-inline:20px;display:grid;gap:30px}
.intro{display:grid;gap:10px}
.eyebrow{font-family:var(--sans);font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-size:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.draft{border:1px solid var(--brake);color:var(--brake);border-radius:2px;padding:0 6px;font-size:11px}
h1,h2,h3{font-family:var(--sans);font-weight:400;letter-spacing:1px;text-transform:uppercase;color:var(--head);margin:0;text-wrap:balance;line-height:1.2}
h1{font-size:clamp(28px,4.4vw,39px)}
h2{font-size:22px}
h3{font-size:15px;font-weight:600}
.lede{margin:0}
.lede b{font-weight:700}
section{display:grid;gap:16px}
.sheet{overflow-x:auto;padding-block:6px}
.sheet svg{display:block;min-width:1100px;width:100%;height:auto}
.legend{display:flex;flex-wrap:wrap;gap:8px 26px;font-family:var(--sans);font-size:13px;color:var(--muted);margin:0;padding:0;list-style:none}
.legend li{display:flex;align-items:center;gap:8px}
.legend svg{width:44px;height:18px;flex:none}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:640px;font-family:var(--sans);font-size:14px;line-height:1.45}
th{font-weight:600;letter-spacing:1px;text-transform:uppercase;font-size:11px;color:var(--muted);text-align:left;padding:8px 12px;border-bottom:1px solid var(--head);vertical-align:bottom}
td{padding:9px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.lamp{font-weight:700;white-space:nowrap}
.item-note{display:block;color:var(--muted);font-size:12.5px}
table.bom{min-width:0}
table.bom td:first-child{width:75%}
@media (max-width:560px){table.bom th,table.bom td{padding-inline:6px}}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:8px;vertical-align:1px}
code{font-family:var(--sans);font-stretch:87.5%;font-weight:700;letter-spacing:.3px;font-size:.86em;background:color-mix(in srgb,var(--pad) 18%,transparent);padding:1px 5px;border-radius:2px;white-space:nowrap}
.notes{display:grid;gap:8px;margin:0;padding-left:20px}
.callout{border-left:3px solid var(--accent);background:var(--tint);padding:12px 16px;margin:0}
footer{color:var(--muted);font-family:var(--sans);font-size:13px;border-top:1px solid var(--rule);padding-top:16px;display:grid;gap:6px}
footer p{margin:0}
/* tabs */
.tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--head);position:sticky;top:env(safe-area-inset-top,0px);background:var(--bg);z-index:2;padding-top:6px}
.tab{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:1px;text-transform:uppercase;text-decoration:none;color:var(--muted);padding:10px 14px;border:1px solid transparent;border-bottom:none;border-radius:2px 2px 0 0;margin-bottom:-1px}
.tab:hover{color:var(--accent)}
.tab[aria-selected="true"]{color:var(--head);background:var(--bg);border-color:var(--head);border-bottom:1px solid var(--bg)}
.panel{display:grid;gap:30px}
.setup{display:grid;gap:14px}
@media (max-width:560px){.tab{padding:9px 9px;font-size:11px;letter-spacing:.5px}}
/* parts of the board */
.parts{display:grid;margin:0;border-top:1px solid var(--rule)}
.parts > div{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:6px 24px;align-items:start;padding-block:14px;border-bottom:1px solid var(--rule)}
.parts dt{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--head);display:flex;align-items:center;gap:10px}
.parts dd{margin:0}
.parts dd > .tbl{margin-top:10px}
.pinmap{min-width:0;width:auto;font-size:13px}
.pinmap td,.pinmap th{padding:4px 10px}
.key{width:30px;height:18px;flex:none}
@media (max-width:640px){.parts > div{grid-template-columns:minmax(0,1fr)}}
/* hardware */
.hardware{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px 36px;align-items:start}
.stackfig{margin:0}
.stackfig svg{display:block;width:100%;height:auto;max-width:640px}
.stackfig figcaption{font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:6px}
@media (max-width:820px){.hardware{grid-template-columns:minmax(0,1fr)}}
.asm text{font-family:var(--sans);font-size:12px;fill:var(--fg)}
.asm .step{font-weight:700;fill:var(--accent)}
.asm .side{font-size:10px;letter-spacing:1.2px;fill:var(--muted)}
.asm .ttl{font-weight:700;font-size:12px;letter-spacing:1px;fill:var(--head)}
.asm .axis{stroke:var(--muted);stroke-width:1;stroke-dasharray:4 4}
.asm .metal{fill:var(--metal)}
.asm .boardx{fill:var(--board);stroke:var(--board-edge);stroke-width:1}
.asm .padx{fill:var(--pad)}
.asm .ins{fill:var(--brake)}
.asm .wire{stroke:var(--brake);stroke-width:3;fill:none}
.asm .nylon{fill:var(--nylon);stroke:var(--metal);stroke-width:.8}
.asm .lead{stroke:var(--muted);stroke-width:.8}
/* svg */
.board{fill:var(--board);stroke:var(--board-edge);stroke-width:18}
.cut{fill:var(--bg);stroke:var(--board-edge);stroke-width:14}
.traces{opacity:.28}
.trace{fill:none;stroke-width:40;stroke-linecap:round;stroke-linejoin:round}
.trace.turn{stroke:var(--turn)}.trace.brake{stroke:var(--brake)}.trace.tail{stroke:var(--tail)}.trace.rev{stroke:var(--rev)}
.finger{fill:var(--pad);stroke:none}
.pin{font-family:var(--sans);font-stretch:75%;font-weight:600;font-size:120px}
.turnt{fill:var(--turn)}.braket{fill:var(--brake)}.tailt{fill:var(--tail)}.revt{fill:var(--rev)}.gndt{fill:var(--gnd)}
.p2{fill:var(--sock);stroke:var(--board-edge);stroke-width:14}
.p2pin{fill:var(--pad-off)}
.p2pin.live{fill:var(--pad)}
.plug{fill:none;stroke:var(--head);stroke-width:26;stroke-dasharray:70 40}
.note.fit{fill:var(--accent)}
.sock{fill:none;stroke:var(--board-edge);stroke-width:16;stroke-dasharray:60 40}
.screw{fill:var(--pad);stroke:none}
.nut{fill:var(--metal);stroke:var(--board-edge);stroke-width:8}
.boltend{fill:var(--board-edge)}
.hole{fill:var(--bg);stroke:var(--board-edge);stroke-width:14}
.pos{font-family:var(--sans);font-stretch:75%;font-weight:700;font-size:250px;letter-spacing:6px;fill:var(--fg)}
.sub{font-family:var(--sans);font-size:130px;fill:var(--muted)}
.chip{font-size:150px}
.turnf{fill:var(--turn)}.brakef{fill:var(--brake)}.tailf{fill:var(--tail)}.revf{fill:var(--rev)}
.note{font-family:var(--sans);font-stretch:75%;font-weight:600;font-size:125px;letter-spacing:5px;fill:var(--muted)}
.note.warn{fill:var(--brake)}
.note.brt{fill:var(--brake)}
.pad.on{fill:var(--pad)}.pad.off{fill:var(--pad-off)}
.drill{fill:var(--drill)}
.plab{font-family:var(--sans);font-stretch:75%;font-weight:600;font-size:140px}
.plab.on{fill:var(--fg)}.plab.off{fill:var(--muted);opacity:.75}
.lead{fill:none;stroke-width:46;stroke-linecap:round}
.lead.turn,.link.turn{stroke:var(--turn)}.lead.brake,.link.brake{stroke:var(--brake)}.lead.tail,.link.tail{stroke:var(--tail)}.lead.rev,.link.rev{stroke:var(--rev)}
.ring{fill:none;stroke-width:34}
.ring.turn{stroke:var(--turn)}.ring.brake{stroke:var(--brake)}.ring.tail{stroke:var(--tail)}.ring.rev{stroke:var(--rev)}
.leadend{stroke:none}
.link{fill:none;stroke-width:70;stroke-linecap:round;stroke-linejoin:round}
.linkcore{fill:none;stroke:var(--board);stroke-width:22;stroke-linecap:round;stroke-linejoin:round}

.site{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;font-family:var(--sans);font-stretch:75%;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:14px}
.site a{color:var(--fg);text-decoration:none}
.site a:hover,.site a:focus-visible{text-decoration:underline}
a{color:var(--fg);text-underline-offset:3px}
.guides{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:2px solid var(--fg)}
.guides li{border-bottom:1px solid var(--rule);padding-block:16px;display:grid;gap:4px}
.guides a{font-family:var(--sans);font-stretch:75%;font-weight:700;font-size:24px}
.guides p{margin:0;color:var(--muted)}
footer{color:var(--muted);font-size:14px;border-top:1px solid var(--rule);padding-top:16px}
/* board overview */
.pad.dim{fill:color-mix(in srgb,var(--pad) 45%,var(--board))}
.pad.in{fill:var(--pad);stroke:var(--fg);stroke-width:34}
.specs{display:grid;gap:14px;margin:0}
.specs > div{display:grid;gap:2px}
.specs dt{font-family:var(--sans);font-weight:700;font-size:15px;color:var(--head)}
.specs dd{margin:0;font-size:15px;color:var(--fg)}
.stackfig figcaption b{color:var(--fg)}
/* quantity picker: two boards by default */
:root:not([data-qty="one"]) .q1,:root[data-qty="one"] .q2{display:none!important}
.qty-pick{display:inline-flex;border:1px solid var(--head);border-radius:3px;overflow:hidden;width:fit-content;max-width:100%}
.qty-pick button{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);background:var(--bg);border:0;padding:8px 14px;cursor:pointer}
.qty-pick button + button{border-left:1px solid var(--head)}
.qty-pick button:hover{color:var(--accent)}
.qty-pick button[aria-checked="true"]{background:var(--head);color:var(--bg)}
@media (max-width:420px){.qty-pick button{padding:8px 10px;font-size:11px;letter-spacing:.5px}}
.parts-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
/* parts rows: faint banding so each line is easy to follow across */
table.bom tr.alt{background:var(--tint)}
table.bom tbody tr:not(.group) td:first-child{padding-left:28px}
table.bom tr.group th{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--head);font-weight:700;padding:16px 12px 6px;border-bottom:1px solid var(--rule);background:var(--bg)}
table.bom tbody:first-of-type tr.group th{padding-top:10px}
/* The heading above the overview drawing and the legend above each setup drawing share one
   grid cell with an invisible copy of the other, so every drawing starts at the same height. */
.sheet-head{display:grid}
.sheet-head > *{grid-area:1/1;align-self:end}
.ghost{visibility:hidden}
section.drawing{display:grid;gap:16px}
/* brightness chart */
.chart{margin:0;display:grid;gap:8px;max-width:760px}
.chart svg{display:block;width:100%;height:auto}
.chart figcaption{font-family:var(--sans);font-size:13px;color:var(--muted)}
.bright text{font-family:var(--sans)}
.bright .grid{stroke:var(--rule);stroke-width:1}
.bright .base{stroke:var(--muted);stroke-width:1}
.bright .tick{font-size:11px;fill:var(--muted);font-variant-numeric:tabular-nums}
.bright .lab{font-size:13px;font-weight:700;fill:var(--fg)}
.bright .sub{font-size:11px;fill:var(--muted)}
.bright .val{font-size:13px;font-weight:600;fill:var(--fg);font-variant-numeric:tabular-nums}
.bright .mark.out{fill:var(--c-out)}
.bright .mark.per{fill:var(--c-per)}
.bright .hit{fill:transparent}
.bright .bar:hover .hit{fill:var(--tint)}
/* brightness chart series colors, validated for color-vision deficiency in both themes */
:root{--c-out:#C3172F;--c-per:#0072B8}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--c-out:#E8475C;--c-per:#3D93E0}}
:root[data-theme="dark"]{--c-out:#E8475C;--c-per:#3D93E0}
.chart-key{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:13px;color:var(--muted)}
.chart-key li{display:flex;align-items:center;gap:8px}
.chart-key .k{width:22px;height:10px;border-radius:2px}
.chart-key .k.out{background:var(--c-out)}
.chart-key .k.per{background:var(--c-per)}
.bright .val{font-size:12px}
.chart-intro{margin:0}
/* input harness to an external connector */
.harness{fill:none;stroke-width:46;stroke-linecap:round;stroke-linejoin:round}
.harness.turn{stroke:var(--turn)}.harness.brake{stroke:var(--brake)}.harness.tail{stroke:var(--tail)}.harness.rev{stroke:var(--rev)}.harness.gnd{stroke:var(--gnd)}
.ring.gnd{stroke:var(--gnd)}
.gndf{fill:var(--gnd)}
.hconn{fill:var(--sock);stroke:var(--head);stroke-width:18}
/* FAQ */
.faq{margin:0;display:grid;border-top:1px solid var(--rule)}
.faq .qa{padding-block:18px;border-bottom:1px solid var(--rule);display:grid;gap:8px}
.faq dt{font-family:var(--sans);font-weight:700;font-size:17px;color:var(--head);line-height:1.35}
.faq dd{margin:0;display:grid;gap:10px}
.faq dd p{margin:0}
.faq .qa:last-child{border-bottom:none}
/* wiring style switch: straight to IN pads by default */
:root:not([data-route="pad"]) .v-pad,:root[data-route="pad"] .v-in{display:none!important}
.head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 20px}
.bulb-note{margin:0}
.splice{fill:var(--brake);stroke:var(--bg);stroke-width:16}
.route-pick{margin-left:auto}
:root:not([data-route="pad"]) .legend .key-jumper,:root[data-route="pad"] .legend .key-splice{display:none}
table.specs-table{min-width:0;margin-block:4px}
.faq table.specs-table tr.alt{background:var(--tint)}
.faq .qa{scroll-margin-top:64px}