/* ==================== FEEL LIKE AN ENGINEER (v6.2) ====================
   Colours all come from engvector.css tokens, so the light theme
   follows for free. */

/* ---------- the two project marks ---------- */
.pmark{width:100%;height:100%;display:block;overflow:visible}
.pm-ring{fill:none;stroke:var(--line-2);stroke-width:1;stroke-dasharray:3 5}
.pm-ring2{fill:none;stroke:var(--line);stroke-width:1}
.pm-tick{fill:none;stroke:var(--ink);stroke-width:1.6;opacity:.9}

/* motor — a spectrum that shimmers like a live one, and a fault that GROWS */
.pm-bar{stroke:var(--teal);stroke-width:2.2;stroke-linecap:round;opacity:.7;
  animation:pmBar 2.6s ease-in-out infinite}
@keyframes pmBar{0%,100%{opacity:.5}50%{opacity:.9}}
.pm-fault{stroke:var(--amber);stroke-linecap:round;
  animation:pmFault 2.2s ease-in-out infinite;
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--amber) 70%,transparent))}
@keyframes pmFault{
  0%,100%{opacity:.55;stroke-width:2.6}
  50%    {opacity:1;  stroke-width:4.4}
}
.pm-hub{fill:var(--panel-2);stroke:var(--muted);stroke-width:1.8}
.pm-spoke{stroke:var(--muted);stroke-width:1.8;stroke-linecap:round}
.pm-shaft{fill:var(--teal)}
.pm-rotor{transform-origin:50px 50px;animation:pmSpin 7s linear infinite}
@keyframes pmSpin{to{transform:rotate(360deg)}}

/* radar — the sweep is LINEAR so the returns can be keyed to it.
   Blip A sits at +33.7° and blip B at −39.8° from vertical; over a 7.2s
   there-and-back cycle the beam crosses them at 38.6% / 61.4% and
   8.9% / 91%. Each one lights as the beam arrives, not on its own timer,
   which is the whole difference between this and a blinking dot. */
.pm-arc{fill:none;stroke:var(--line-2);stroke-width:1}
.pm-wedge{fill:url(#rg-sweep)}
.pm-beam{stroke:var(--teal);stroke-width:2;stroke-linecap:round;
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--teal) 60%,transparent))}
.pm-sweep{transform-origin:50px 68px;animation:pmSweep 7.2s linear infinite}
@keyframes pmSweep{
  0%  {transform:rotate(-62deg)}
  50% {transform:rotate(62deg)}
  100%{transform:rotate(-62deg)}
}
.pm-blip{fill:var(--teal);transform-box:fill-box;transform-origin:center;
  animation:pmBlipA 7.2s linear infinite}
@keyframes pmBlipA{
  0%,33%  {opacity:.10;transform:scale(.65)}
  38.6%   {opacity:1;  transform:scale(1.4)}
  47%,56% {opacity:.10;transform:scale(.65)}
  61.4%   {opacity:1;  transform:scale(1.4)}
  70%,100%{opacity:.10;transform:scale(.65)}
}
.pm-blip-b{fill:var(--cyan);animation-name:pmBlipB}
@keyframes pmBlipB{
  0%      {opacity:.10;transform:scale(.65)}
  8.9%    {opacity:1;  transform:scale(1.35)}
  20%,82% {opacity:.10;transform:scale(.65)}
  91%     {opacity:1;  transform:scale(1.35)}
  100%    {opacity:.10;transform:scale(.65)}
}
.pm-eyes circle{fill:var(--panel-2);stroke:var(--muted);stroke-width:1.6}
.pm-eye-c{fill:var(--dim);stroke:none}
.pm-base{stroke:var(--muted);stroke-width:2;stroke-linecap:round}

@media (prefers-reduced-motion:reduce){
  .pm-rotor,.pm-sweep,.pm-blip,.pm-blip-b,.pm-fault,.pm-bar{animation:none}
  .pm-sweep{transform:rotate(-18deg)}
}

/* ---------- picker ---------- */
#projPick{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:20px 0 8px}
.pk{display:flex;gap:14px;align-items:center;text-decoration:none;padding:16px;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--tile-fill);
  transition:border-color .16s,transform .16s}
.pk:hover{border-color:var(--teal);transform:translateY(-2px)}
.pk-m{width:64px;height:64px;flex:none}
.pk-t b{display:block;font:700 1.05rem/1.15 'IBM Plex Sans Condensed',sans-serif;color:var(--text)}
.pk-t em{display:block;font:400 .66rem/1.4 'IBM Plex Mono',monospace;color:var(--dim);
  font-style:normal;letter-spacing:.06em;margin-top:4px}

/* ---------- project ---------- */
.proj{padding-top:4px}
.proj:first-child{margin-top:0}
.proj-head{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.proj-mark{width:132px;height:132px;flex:none}
.proj-title{flex:1;min-width:260px}
.proj-kick{font:500 .62rem/1 'IBM Plex Mono',monospace;letter-spacing:.18em;
  text-transform:uppercase;color:var(--teal)}
.proj-title h3{font:700 clamp(1.5rem,3.4vw,2.1rem)/1.05 'IBM Plex Sans Condensed',sans-serif;
  color:var(--text);margin:8px 0 4px}
.proj-tag{color:var(--muted);font-size:.95rem;margin:0 0 14px}
.proj-meta{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:14px}
.pm{display:flex;flex-direction:column;font:500 .6rem/1.5 'IBM Plex Mono',monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.pm b{font-size:.9rem;letter-spacing:0;text-transform:none;color:var(--text);font-weight:600}
.proj-fields{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.pf{font:600 .62rem/1 'IBM Plex Mono',monospace;color:var(--dim);text-decoration:none;
  border:1px solid var(--line-2);border-radius:2px;padding:7px 8px}
.pf:hover{border-color:var(--ink);color:var(--text)}
.pv-btn{font:600 .66rem/1 'IBM Plex Mono',monospace;letter-spacing:.08em;cursor:pointer;
  color:#04171d;background:var(--teal);border:0;border-radius:2px;padding:9px 13px;margin-left:4px}
.pv-btn:hover{filter:brightness(1.1)}
.proj-pitch{color:var(--muted);font-size:.92rem;line-height:1.7;max-width:78ch;margin:20px 0 0}
.proj-pitch b{color:var(--text)}

.proj-sec{display:flex;align-items:baseline;gap:11px;margin:34px 0 14px;
  padding-bottom:9px;border-bottom:1px solid var(--line)}
.ps-n{font:700 .68rem/1 'IBM Plex Mono',monospace;color:var(--teal);letter-spacing:.1em}
.proj-sec h4{font:600 1.05rem/1.2 'IBM Plex Sans Condensed',sans-serif;color:var(--text);margin:0}
.ps-lede{color:var(--muted);font-size:.86rem;line-height:1.65;max-width:76ch;margin:0 0 16px}

/* parts */
.parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.part{border:1px solid var(--line);border-radius:var(--r);padding:14px;background:var(--tile-fill)}
.pt-h{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:7px}
.pt-h b{font:600 .88rem/1.2 'IBM Plex Sans',sans-serif;color:var(--text)}
.pt-h span{font:600 .66rem/1 'IBM Plex Mono',monospace;color:var(--teal)}
.part p{color:var(--dim);font-size:.78rem;line-height:1.55;margin:0}

/* wiring */

/* stages */
.stage{border-left:2px solid var(--line-2);padding:0 0 4px 18px;margin-bottom:30px}
.stage:hover{border-left-color:var(--teal)}
.st-h{display:flex;gap:13px;align-items:flex-start;margin-bottom:12px}
.st-n{font:700 .8rem/1.3 'IBM Plex Mono',monospace;color:var(--teal);flex:none}
.st-h h5{font:600 1rem/1.25 'IBM Plex Sans Condensed',sans-serif;color:var(--text);margin:0 0 4px}
.st-goal{color:var(--dim);font-size:.8rem;line-height:1.55;margin:0}

.code{border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:#06080a}
.code-h{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 12px;border-bottom:1px solid var(--line);background:var(--panel)}
.cf{font:500 .66rem/1 'IBM Plex Mono',monospace;color:var(--dim)}
.copy{font:600 .62rem/1 'IBM Plex Mono',monospace;letter-spacing:.08em;cursor:pointer;
  color:var(--muted);background:transparent;border:1px solid var(--line-2);border-radius:2px;padding:6px 10px}
.copy:hover{border-color:var(--teal);color:var(--teal)}
.copy.ok{border-color:var(--green);color:var(--green)}
.code pre{margin:0;padding:14px 16px;overflow-x:auto;
  font:500 .78rem/1.65 'IBM Plex Mono',monospace;color:#c9d3de}
.t-c{color:#5a6b7a;font-style:italic}
.t-k{color:#35D2F5}
.t-s{color:#F5A524}
.t-n{color:#8BE8AE}

.st-check,.st-got{display:flex;gap:12px;align-items:flex-start;margin-top:11px;
  padding:11px 13px;border-radius:var(--r)}
.st-check{background:color-mix(in srgb,var(--green) 8%,transparent);
  border-left:2px solid var(--green)}
.st-got{background:color-mix(in srgb,var(--amber) 7%,transparent);
  border-left:2px solid var(--amber)}
.sc-k,.sg-k{font:600 .58rem/1.6 'IBM Plex Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;flex:none;width:78px}
.sc-k{color:var(--green)}.sg-k{color:var(--amber)}
.st-check p,.st-got p{margin:0;color:var(--muted);font-size:.81rem;line-height:1.6}
.st-check code,.st-got code,.theory code{font-family:'IBM Plex Mono',monospace;
  font-size:.92em;color:var(--teal);background:var(--panel-2);padding:1px 4px;border-radius:2px}

.theory{color:var(--muted);font-size:.88rem;line-height:1.75;max-width:80ch}
.theory b{color:var(--text)}

.trouble{width:100%;border-collapse:collapse;font-size:.82rem}
.trouble th{text-align:left;font:600 .6rem/1 'IBM Plex Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);padding:0 12px 9px 0;border-bottom:1px solid var(--line)}
.trouble td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);
  color:var(--muted);line-height:1.55;vertical-align:top}
.trouble td:first-child{color:var(--text);font-weight:500}

/* ---------- preview lightbox ---------- */
#pvLayer{position:fixed;inset:0;z-index:120;display:none;place-items:center;padding:20px;
  background:rgba(0,0,0,.86);backdrop-filter:blur(4px)}
#pvLayer.open{display:grid}
.pv-box{width:min(760px,100%);border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--panel);overflow:hidden}
.pv-h{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;
  border-bottom:1px solid var(--line);font:600 .72rem/1 'IBM Plex Mono',monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.pv-x{background:transparent;border:1px solid var(--line-2);border-radius:2px;color:var(--muted);
  cursor:pointer;font:600 .74rem/1 'IBM Plex Mono',monospace;padding:8px 11px;min-height:38px}
.pv-x:hover{border-color:var(--rose);color:var(--rose)}
.pv-img{position:relative;background:#05070a;display:grid;place-items:center;min-height:260px}
.pv-img img{width:100%;height:auto;display:block;max-height:70vh;object-fit:contain}
.pv-fallback{display:none;padding:36px 24px;text-align:center;max-width:420px}
.pv-fallback svg{width:120px;height:120px;margin:0 auto 14px}
.pv-fallback p{color:var(--dim);font-size:.8rem;line-height:1.6;margin:0}
.pv-img.missing img{display:none}
.pv-img.missing .pv-fallback{display:block}
.pv-cap{margin:0;padding:12px 15px;border-top:1px solid var(--line);
  font:500 .7rem/1.5 'IBM Plex Mono',monospace;color:var(--dim)}

/* ---------- phone ---------- */
@media (max-width:640px){
  .proj-head{gap:16px}
  .proj-mark{width:88px;height:88px}
  .proj-meta{gap:14px}
  .parts{grid-template-columns:1fr}
  .stage{padding-left:13px}
  .st-check,.st-got{flex-direction:column;gap:6px}
  .sc-k,.sg-k{width:auto}
  .code pre{font-size:.72rem;padding:12px}
  .pv-btn,.pf{min-height:42px;display:inline-flex;align-items:center}
  .copy{min-height:40px;padding:10px 14px}
  .code-h{padding:8px 10px}
  .pk{min-height:44px}
  .pk-m{width:52px;height:52px}
  /* a 3-column table cannot work at 375px — reflow to stacked records */
  .trouble thead{display:none}
  .trouble,.trouble tbody,.trouble tr,.trouble td{display:block;width:100%}
  .trouble tr{border:1px solid var(--line);border-radius:var(--r);
    padding:12px;margin-bottom:10px}
  .trouble td{border:0;padding:3px 0}
  .trouble td:first-child{font-weight:600;color:var(--text)}
  .trouble td:nth-child(2)::before{content:'Because — ';color:var(--dim);font-weight:600}
  .trouble td:nth-child(3)::before{content:'Fix — ';color:var(--green);font-weight:600}
}

/* ==================== WIRING DIAGRAMS ====================
   Recognisable boards rather than labelled rectangles. Colours are
   the real ones (Arduino teal, breadboard cream, gold edge
   connector) because the point is that you can hold the diagram
   against the actual part and see the same thing. */
.wire-wrap{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:18px;overflow-x:auto}
.wire{width:100%;min-width:660px;max-width:1000px;height:auto;display:block;margin:0 auto}

/* boards */
.w-pcb-uno{fill:#0d6a70;stroke:#0a4f54;stroke-width:2}
.w-pcb-uno-in{fill:none;stroke:#12868e;stroke-width:1;stroke-dasharray:4 4;opacity:.7}
.w-pcb-sr{fill:#1c3f7a;stroke:#2a5aa8;stroke-width:1.5}
.w-pcb-mpu{fill:#4a2d75;stroke:#6b46a8;stroke-width:1.5}
.w-pcb-mb{fill:#14181d;stroke:#39434f;stroke-width:1.8}
.w-bb{fill:#d9dee5;stroke:#a9b3bf;stroke-width:1.5}
.w-bb-ch{fill:#c2c9d2}
.w-bb-h{fill:#9aa4b1}
.w-rail-r{stroke:#e05563;stroke-width:1.6}
.w-rail-b{stroke:#4a7fd0;stroke-width:1.6}

/* parts */
.w-metal{fill:#aeb8c4;stroke:#7d8896;stroke-width:1}
.w-metal-in{fill:#8f9aa8}
.w-jack{fill:#15181c;stroke:#3a4048;stroke-width:1}
.w-chip{fill:#15181c;stroke:#3a4048;stroke-width:1}
.w-chip-dot{fill:#5d6774}
.w-chip-t{font:600 9px 'IBM Plex Mono',monospace;fill:#7a8492;text-anchor:middle}
.w-btn{fill:#2a3038;stroke:#4a5460;stroke-width:1}
.w-hdr{fill:#101317;stroke:#3a4048;stroke-width:1}
.w-hole{fill:#5a6674}
.w-led{fill:#2a1416;stroke:#5c2a2e;stroke-width:.6}
.w-gold rect{fill:#d3a441;stroke:#b0862c;stroke-width:.6}
.w-can{fill:#9aa5b2;stroke:#6f7a87;stroke-width:1.5}
.w-can-in{fill:none;stroke:#7f8a97;stroke-width:1}
.w-can-c{fill:#7a8593;stroke:#5f6a77;stroke-width:1}
.w-servo{fill:#2a5fa8;stroke:#1c4478;stroke-width:1.5}
.w-servo-top{fill:#20477e;stroke:#16345c;stroke-width:1.5}
.w-servo-hub{fill:#c8d2de}
.w-horn{fill:#e4eaf1;stroke:#b3bcc7;stroke-width:1}
.w-fan-g{fill:none;stroke:#4d5763;stroke-width:1.6}
.w-hubm{fill:#22272e;stroke:#4d5763;stroke-width:2}
.w-hubm2{fill:#39434f}
.w-blade{fill:#2c333c;stroke:#4d5763;stroke-width:1.2}
.w-tape{fill:#c9a34a;opacity:.85}

/* labels */
.w-silk{font:600 13px 'IBM Plex Mono',monospace;fill:#e6ecf3;text-anchor:middle;letter-spacing:.08em}
.w-pinlab{font:600 11px 'IBM Plex Mono',monospace;fill:var(--dim);text-anchor:middle}
.w-pinlab-on{fill:var(--teal)}
.w-used{fill:none;stroke:var(--teal);stroke-width:2}
.w-cap{font:400 11px 'IBM Plex Mono',monospace;fill:var(--dim);text-anchor:middle}
.w-key-t{font:500 12px 'IBM Plex Mono',monospace;fill:var(--muted)}

/* wires */
.w-red,.w-blk,.w-yel,.w-grn,.w-orn,.w-usb{fill:none;stroke-width:3;stroke-linecap:round}
.w-red{stroke:#e8606f}.w-blk{stroke:#78838f}.w-yel{stroke:#f0a92c}
.w-grn{stroke:#46c97a}.w-orn{stroke:#4a90e2}.w-usb{stroke:#aeb8c4;stroke-width:4}
/* bottom notes are left-aligned; .w-cap is centre-anchored and running one
   from x=34 pushed half the sentence off the left edge of the viewBox */
.w-cap-l{font:400 11px 'IBM Plex Mono',monospace;fill:var(--dim);text-anchor:start}

/* ==================== COMPREHENSION LAYER ====================
   Someone landing on this page needs to know what they are making
   before they meet Nyquist. One sentence, then a picture of the
   whole thing, and the essay folded away for whoever wants it. */
.proj-one{margin:22px 0 0;color:var(--text);font-size:1.06rem;line-height:1.6;
  font-weight:500;max-width:70ch;border-left:3px solid var(--teal);padding-left:16px}

.flow-wrap{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:14px 16px;overflow-x:auto}
.fl-n{font:600 10px 'IBM Plex Mono',monospace;fill:var(--teal);text-anchor:middle;letter-spacing:.14em}
.fl-t{font:700 17px 'IBM Plex Sans Condensed',sans-serif;fill:var(--text);text-anchor:middle;letter-spacing:.06em}
.fl-d{font:400 12px 'IBM Plex Mono',monospace;fill:var(--dim);text-anchor:middle}
@keyframes flPulse{0%,100%{opacity:.35}45%{opacity:1}}
@media (prefers-reduced-motion:reduce){.fl-arrow{animation:none;opacity:.7}}

.why-open{margin:18px 0 0;border-left:2px solid var(--line-2);padding-left:16px}
.why-open summary{cursor:pointer;color:var(--teal);list-style:none;
  font:600 .68rem/1 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;
  padding:11px 0;min-height:42px;display:flex;align-items:center;gap:8px}
.why-open summary::-webkit-details-marker{display:none}
.why-open summary::before{content:'▸';transition:transform .18s}
.why-open[open] summary::before{transform:rotate(90deg)}
.why-open .proj-pitch{margin-top:2px}

@media (max-width:640px){
  .proj-one{font-size:.98rem;padding-left:12px}
  .fl-t{font-size:20px}.fl-d{font-size:13px}
}
/* numbered connection discs */
.w-badge{fill:#0B0D10;stroke:var(--teal);stroke-width:1.8}
.w-badge-t{font:700 12px 'IBM Plex Mono',monospace;fill:var(--teal);text-anchor:middle}

/* ==================== PROJECT HEADER ====================
   Reworked so the header answers, at a glance: what is it, how long,
   how hard, how much, and which disciplines actually use this. */
.proj-head{align-items:stretch}
.proj-mark{position:relative;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--r);background:
    radial-gradient(70% 70% at 50% 40%, color-mix(in srgb,var(--teal) 9%,transparent), transparent 70%),
    var(--panel);
  width:150px;height:150px;padding:10px}
.proj-mark .pmark{width:100%;height:100%}

.proj-meta{display:flex;gap:26px;flex-wrap:wrap;margin:16px 0 16px;align-items:flex-start}
.pm{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  gap:0 9px;align-items:center}
.pm-i{width:19px;height:19px;grid-row:1/3;fill:none;stroke:var(--teal);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.pm b{font:600 .96rem/1.2 'IBM Plex Sans Condensed',sans-serif;color:var(--text);
  letter-spacing:.01em}
.pm em{font:500 .58rem/1.4 'IBM Plex Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);font-style:normal}
.pm-lvl{grid-row:1/3;display:flex;gap:3px;align-items:center}
.pm-lvl i{width:7px;height:7px;border-radius:50%;background:var(--line-2);display:block}
.pm-lvl i.on{background:var(--teal)}

.proj-fields{gap:8px}
.pf-k{font:500 .58rem/1 'IBM Plex Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-right:2px}
.pf{display:inline-flex;align-items:baseline;gap:6px;padding:8px 11px;
  border-radius:var(--r);transition:border-color .15s,background .15s}
.pf b{font:700 .64rem/1 'IBM Plex Mono',monospace;color:var(--teal)}
.pf span{font:500 .72rem/1 'IBM Plex Sans',sans-serif;color:var(--muted)}
.pf:hover{border-color:var(--teal);background:color-mix(in srgb,var(--teal) 8%,transparent)}
.pf:hover span{color:var(--text)}

.pv-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;margin-left:6px}
.pv-dot{width:8px;height:8px;border-radius:50%;background:#04171d;display:block;
  box-shadow:0 0 0 3px rgba(4,23,29,.28);animation:pvPulse 2.4s ease-in-out infinite}
@keyframes pvPulse{0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.pv-dot{animation:none}}

@media (max-width:640px){
  .proj-mark{width:104px;height:104px;padding:7px}
  .proj-meta{gap:16px 20px}
  .pm b{font-size:.9rem}
  .pf{min-height:42px}
  .pf span{display:none}          /* code alone on a phone; the title carries the rest */
  .pf-k{width:100%;margin-bottom:-2px}
}

/* ==================== PHONE-FIRST FLOW + CONNECTIONS ====================
   Both were the wrong FORMAT for a phone rather than merely too big: an SVG
   flow measured 2.1x the viewport and the wiring diagram 2.2x, so you had to
   scroll sideways to read the thing you were following. */
.flow-wrap{padding:16px}
.flow{list-style:none;margin:0;padding:0;display:flex;gap:12px;align-items:stretch}
.fl{flex:1;position:relative;display:flex;flex-direction:column;gap:3px;
  padding:14px 15px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--panel-2)}
.fl-end{border-color:var(--teal)}
.fl::after{content:'';position:absolute;right:-12px;top:50%;width:12px;height:2px;
  background:var(--ink)}
.fl:last-child::after{display:none}
.fl-n{font:600 .58rem/1 'IBM Plex Mono',monospace;letter-spacing:.16em;color:var(--teal)}
.fl-t{font:700 1rem/1.15 'IBM Plex Sans Condensed',sans-serif;color:var(--text);letter-spacing:.04em}
.fl-d{font:400 .7rem/1.45 'IBM Plex Mono',monospace;color:var(--dim)}

/* the list you actually wire from */
.conn{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:7px}
.conn li{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel-2)}
.cn-n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  border:1.6px solid var(--teal);color:var(--teal);
  font:700 .68rem/1 'IBM Plex Mono',monospace}
.cn-sw{flex:none;width:26px;height:4px;border-radius:2px}
.conn b{font:600 .8rem/1.35 'IBM Plex Mono',monospace;color:var(--text)}
.cn-a{color:var(--dim);font-size:.9rem}

.wire-zoom{display:none;width:100%;margin-bottom:12px;cursor:pointer;
  background:transparent;color:var(--teal);border:1px solid var(--teal);
  border-radius:var(--r);padding:12px;min-height:46px;
  font:600 .68rem/1 'IBM Plex Mono',monospace;letter-spacing:.1em}
.pv-wide{width:min(1180px,100%)}
.pv-wire{background:#05070a;padding:14px;overflow:auto;max-height:76vh}
.pv-wire svg{width:1100px;max-width:none;height:auto}

@media (max-width:760px){
  .flow{flex-direction:column;gap:10px}
  .fl::after{right:auto;left:50%;top:auto;bottom:-10px;width:2px;height:10px}
  .fl-t{font-size:1.05rem}
  .fl-d{font-size:.76rem}
  /* the diagram stops pretending to be readable inline and opens on tap */
  .wire-zoom{display:block}
  .wire-wrap{padding:14px}
  .wire-wrap>svg.wire{opacity:.5;min-width:0;width:100%;pointer-events:none}
  .conn li{gap:8px}
  .conn b{font-size:.76rem}
}