/* VeloSwing wiring diagram. Hairlines on the wall: pale parts, cold grey metal, the real signal colours at very low chroma. */
.wire{
  --wbg:var(--w-bg);--wfg:var(--w-ink);
  --n-V5:#9b6f6c;--n-V3:#8f8768;--n-GND:#77716a;--n-SDA:#62809b;--n-SCL:#76729b;--n-D2:#957388;--n-D6:#5f8a7c;--n-DIN:#5e8789;
  --ln:color-mix(in srgb,var(--w-ink) 46%,transparent);--ln2:color-mix(in srgb,var(--w-ink) 20%,transparent);--silk:var(--w-ink);
  --gold:#b0aba3;--cu:#bbb6af;--tin:#aea9a1;
  --t:.38s var(--ease,cubic-bezier(.19,1,.22,1));
  position:relative;margin:0;color:var(--wfg);
}
.n-V5{--c:var(--n-V5)}.n-V3{--c:var(--n-V3)}.n-GND{--c:var(--n-GND)}.n-SDA{--c:var(--n-SDA)}.n-SCL{--c:var(--n-SCL)}.n-D2{--c:var(--n-D2)}.n-D6{--c:var(--n-D6)}.n-DIN{--c:var(--n-DIN)}
.wire__defs{position:absolute;width:0;height:0;overflow:hidden}
.wire__stage{position:relative;container-type:inline-size;margin-inline:auto;width:100%;max-width:max(1240px,158svh)}
.wire__svg{display:block;width:100%;height:auto;overflow:visible;-webkit-tap-highlight-color:transparent}
.wire__svg--port{display:none}
.wire__svg text{pointer-events:none;-webkit-user-select:none;user-select:none}

/* Parts: one line weight, one type */
.w-pt{cursor:pointer;outline:none;transition:opacity var(--t)}
.w-pt__hit{fill:transparent;stroke:transparent;stroke-width:1.5;transition:stroke var(--t)}
.w-pt:focus-visible>g>.w-pt__hit,.w-pt:focus-visible>.w-pt__hit{stroke:var(--w-ink)}
.w-pcb{stroke:var(--ln);stroke-width:1}
.w-pcb--nano,.w-pcb--oled,.w-pcb--strip{fill:color-mix(in srgb,#fff 62%,transparent)}
.w-hair{fill:none;stroke:var(--ln2);stroke-width:.8}
.w-hair--d{stroke-dasharray:2 4}
.w-tr{fill:none;stroke:var(--cu);stroke-width:1;opacity:.34}
.w-mount circle{fill:var(--wbg);stroke:var(--gold);stroke-width:1.2}
.w-mount--pad circle{fill:color-mix(in srgb,var(--gold) 22%,transparent);stroke-width:1.1}
.w-ant{fill:color-mix(in srgb,var(--w-ink) 5%,transparent);stroke:var(--ln2);stroke-width:.8}
.w-can{fill:url(#wg-can);stroke:var(--ln);stroke-width:.9}
.w-lbl{fill:#fff;stroke:var(--ln2);stroke-width:.6}
.w-ink{fill:#262421}
.w-ink--t{font:500 9px var(--mono,monospace);letter-spacing:.02em}
.w-smd{fill:color-mix(in srgb,var(--w-ink) 15%,transparent)}
.w-ic{fill:color-mix(in srgb,var(--w-ink) 8%,#fff);stroke:var(--ln2);stroke-width:.8}
.w-ind{fill:color-mix(in srgb,var(--w-ink) 6%,#fff);stroke:var(--ln2);stroke-width:.8}
.w-cer{fill:#d3d0cb;stroke:var(--ln2);stroke-width:.6}
.w-dotm{fill:var(--ln2)}
.w-shell{fill:url(#wg-shell);stroke:var(--ln);stroke-width:.9}
.w-sock{fill:color-mix(in srgb,var(--w-ink) 12%,#fff);stroke:var(--ln2);stroke-width:.8}
.w-mold{fill:#fff;stroke:var(--ln);stroke-width:1}
.w-cable{fill:none;stroke:var(--ln);stroke-width:7;stroke-linecap:round}
.w-cable__s{fill:none;stroke:var(--wbg);stroke-width:5;stroke-linecap:round}
.w-leg{fill:var(--tin)}
.w-body{fill:#fff;stroke:var(--ln);stroke-width:1}
.w-lead{fill:none;stroke:var(--tin);stroke-width:1.8;stroke-linecap:round}
.w-res{fill:#d7d4cf;stroke:rgba(14,17,20,.2);stroke-width:.6}
.w-sheen{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.4;stroke-linecap:round}
.w-band--or{fill:#a58468}.w-band--br{fill:#6e5a4c}.w-band--bk{fill:#1a1816}.w-band--au{fill:#8f8a78}
.w-disc{fill:#cecac4;stroke:rgba(14,17,20,.2);stroke-width:.8}
.w-cap{fill:#fff;stroke:var(--ln);stroke-width:1}
.w-glass{fill:#050507}
.w-tail{fill:color-mix(in srgb,var(--w-ink) 16%,#fff)}
.w-cu{fill:var(--cu)}
.w-vpad{fill:var(--gold)}
.w-vbr{fill:var(--n-V5);stroke:rgba(14,17,20,.25);stroke-width:.6}
.w-nc{fill:none;stroke:var(--silk);stroke-width:1.2;stroke-linecap:round}
.w-pad__c{fill:color-mix(in srgb,var(--gold) 46%,transparent);transition:fill var(--t)}
.w-pad--on .w-pad__c{fill:var(--gold)}
.w-pad__h{fill:var(--wbg);stroke:rgba(14,17,20,.25);stroke-width:.6}

/* Type. Silkscreen stays in the mono of the drawing; everything outside it is Geist. */
.wire__svg--port .w-silk{font-size:10.2px}
.wire__svg--port .w-silk--xs{font-size:8.6px}
.w-silk{fill:var(--silk);font:400 9.6px var(--mono,monospace)}
.w-silk--on{fill:var(--w-ink);font-weight:500}
.w-silk--b{font-weight:500;letter-spacing:.06em;fill:color-mix(in srgb,var(--w-ink) 72%,transparent)}
.w-silk--xs{font-size:8.6px}
.w-silk--v{fill:var(--n-V5)}
.w-pno{fill:var(--wfg);font:400 10px var(--mono,monospace)}
.w-mark{fill:var(--wfg);font:500 12.5px var(--mono,monospace);letter-spacing:.04em}
.w-mark--cap{fill:#262421;font-size:12px}
.w-val{fill:var(--silk);font:400 11.5px var(--mono,monospace)}
.w-tag rect{fill:var(--wbg);stroke:var(--c);stroke-width:1;stroke-opacity:.5;transition:fill var(--t),stroke-opacity var(--t)}
.w-tag text{fill:var(--c);font:500 11.2px var(--mono,monospace)}
.w-tag{cursor:pointer;transition:opacity var(--t)}

/* Wires */
.w-ln{fill:none;stroke:var(--c);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;transition:opacity var(--t),stroke-width var(--t)}
.w-ln--rail{stroke-width:1.8}
.w-dot{fill:var(--c);stroke:var(--wbg);stroke-width:1.4;transition:opacity var(--t)}
.w-ring{fill:var(--wbg);stroke:var(--c);stroke-width:1.2;transition:opacity var(--t)}
.w-hit{fill:none;stroke:transparent;stroke-width:16;stroke-linecap:round;pointer-events:stroke;cursor:pointer}
.wire__wires{pointer-events:none}

/* OLED and LEDs */
.w-scr{fill:#e6f1ff;pointer-events:none;transition:opacity var(--t)}
.w-led__p{fill:#eeece8;stroke:rgba(14,17,20,.28);stroke-width:.8}
.w-led__m{fill:#c9c5bf}
.w-led__l{fill:#f8f7f4;stroke:rgba(14,17,20,.2);stroke-width:.8}
.w-led__g{fill:#7a5cff;opacity:0}
.w-led__d{fill:rgba(36,44,54,.5)}

/* Focus: the selection stays, the rest steps back */
.wire.is-active .w-pt{opacity:.3}
.wire.is-active .w-pt.w-near{opacity:.66}
.wire.is-active .w-pt.w-on{opacity:1}
.wire.is-active .w-scr{opacity:.2}
.wire.is-active.is-screen .w-scr{opacity:1}
.wire.is-active .w-ln,.wire.is-active .w-dot,.wire.is-active .w-ring{opacity:.12}
.wire.is-active .w-tag{opacity:.16}
.wire.is-active .w-ln.w-near,.wire.is-active .w-dot.w-near,.wire.is-active .w-ring.w-near,.wire.is-active .w-tag.w-near{opacity:.46}
.wire.is-active .w-ln.w-on,.wire.is-active .w-dot.w-on,.wire.is-active .w-ring.w-on,.wire.is-active .w-tag.w-on{opacity:1}
.wire.is-active .w-ln.w-on{stroke-width:1.8}
.wire.is-active .w-ln--rail.w-on{stroke-width:2.4}
.w-tag.w-on rect{stroke-opacity:1}
.w-pad.w-on .w-pad__c{fill:var(--c)}
.w-pad.w-on .w-pad__h{fill:#fff}

/* Data path: 3.3 V in, 5 V out */
.w-pulse{fill:var(--c);stroke:#fff;stroke-width:1.2;opacity:0;pointer-events:none;offset-rotate:0deg}
@keyframes wire-flow-a{0%{offset-distance:0%;opacity:0}5%{opacity:1}46%{offset-distance:100%;opacity:1}50%,100%{offset-distance:100%;opacity:0}}
@keyframes wire-flow-b{0%,50%{offset-distance:0%;opacity:0}55%{opacity:1}96%{offset-distance:100%;opacity:1}100%{offset-distance:100%;opacity:0}}
@supports (offset-path:path('M0 0H1')){
  .wire.is-flow .w-pulse--a{animation:wire-flow-a 2.8s linear infinite}
  .wire.is-flow .w-pulse--b{animation:wire-flow-b 2.8s linear infinite}
}

/* The firmware's fast chase: 65 ms a step, a half-bright pixel leading a full one over a dim strip */
@keyframes wire-chase{0%{opacity:.5}12.5%{opacity:1}25%,100%{opacity:.12}}
.wire.is-flow .w-pt[data-part=strip]{opacity:1}
.wire.is-flow .w-led__g{animation:wire-chase .52s step-end infinite;animation-delay:calc((var(--i) - 8) * 65ms)}
@keyframes wire-boot{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.wire.is-boot:not(.is-flow) .w-led__g{animation:wire-boot 1.1s var(--ease,ease-out) both;animation-delay:calc(var(--i) * 65ms)}

/* Draw on scroll */
.wire.is-armed .w-ln{stroke-dasharray:1 1;stroke-dashoffset:1}
.wire.is-armed .w-dot:not(.w-vis),.wire.is-armed .w-ring:not(.w-vis),.wire.is-armed .w-tag:not(.w-vis){visibility:hidden}
.wire.is-armed .w-dot.w-vis{animation:wire-in .3s linear backwards}
@keyframes wire-in{from{opacity:0}}
.wire.is-armed .w-scr:not(.w-vis){opacity:0}
.wire.is-armed.is-done .w-ln{stroke-dasharray:none;stroke-dashoffset:0}

/* Legend and readout. Wide: they sit in the free cells of the drawing. */
.wire__panel{font:400 15px/1.35 var(--sans)}
.wire__legend{display:flex;flex-wrap:wrap;gap:4px 14px}
.wire__net{display:inline-flex;align-items:center;gap:7px;padding:5px 0;color:var(--w-ink2);font:400 15px/1 var(--sans);white-space:nowrap;transition:color var(--t),opacity var(--t)}
.wire__net i{display:block;width:14px;height:1px;background:var(--c)}
.wire__net:hover,.wire__net.w-on{color:var(--wfg)}
.wire.is-active .wire__net:not(.w-on):not(.w-near){opacity:.5}
.wire__read{color:var(--wfg)}
.wire__read h3{font:400 clamp(17px,1.65cqw,23px)/1.1 var(--sans);letter-spacing:-.016em;margin:0}
.wire__read p{color:var(--w-ink2);margin:3px 0 0;font:400 15px/1.3 var(--sans);text-wrap:pretty}
.wire__pins{display:grid;grid-template-columns:auto 1fr;gap:0 12px;margin:8px 0 0;font-size:15px;line-height:1.3}
.wire__pins dt{color:var(--w-ink2);white-space:nowrap}
.wire__pins dd{margin:0;color:var(--wfg)}
.wire__pins--chip{grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);column-gap:10px}
.wire__key{display:grid;gap:7px;color:var(--w-ink2);font-size:15px}
.wire__key li{display:flex;align-items:center;gap:10px}
.wire__key svg{width:22px;height:12px;flex:none;overflow:visible}
.wire__key path{fill:none;stroke:var(--w-ink2);stroke-width:1;stroke-linecap:round}
.wire__key circle{fill:var(--w-ink2)}

@media (min-width:960px){
  .wire__panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;padding-top:18px;min-height:150px}
  .wire__legend{align-content:flex-start}
}
@container (min-width:1220px){
  .wire__panel{display:block;position:absolute;inset:0;padding:0;pointer-events:none;font-size:15px}
  .wire__legend{position:absolute;left:3.7%;top:50%;width:11.5%;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:.2em;pointer-events:auto}
  .wire__net{font-size:15px;padding:.3em 0;gap:.6em}
  .wire__net i{width:1.2em;height:1px}
  .wire__read{position:absolute;left:27.1%;top:54.8%;width:22.6%;pointer-events:auto}
  .wire__read p{font-size:15px}
  .wire__pins{font-size:15px;line-height:1.22}
  .wire__key{font-size:15px}
  .wire__key svg{width:1.9em;height:1.05em}
}
@media (max-width:959px){
  .wire__svg--land{display:none}
  .wire__svg--port{display:block}
  .wire__stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,260px);gap:clamp(20px,4vw,36px);align-items:start;max-width:none}
  .wire__svg--port{max-width:440px;justify-self:center}
  .wire__panel{position:sticky;top:76px;display:grid;gap:18px}
}
@media (max-width:719px){
  .wire__stage{display:block}
  .wire__svg--port{max-width:none;width:calc(100% + 20px);margin-inline:-10px}
  .wire__panel{position:sticky;top:auto;bottom:0;z-index:5;margin-inline:calc(var(--gut,16px) * -1);padding:10px var(--gut,16px) calc(12px + env(safe-area-inset-bottom,0px));gap:9px;background:color-mix(in srgb,#fcfbf9 90%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--w-line);max-height:42svh;overflow:auto}
  .wire__legend{gap:2px 12px}
  .wire__net{padding:5px 0;font-size:15px;gap:6px}
  .wire__net i{width:11px}
  .wire__read{min-height:30px}
  .wire__key{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:15px}
  .wire__key li{gap:6px}
  .wire__key svg{width:18px;height:10px}
  .wire__read h3{font-size:18px}
  .wire__pins{margin-top:6px}
}
@media (pointer:coarse){
  .wire__net{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .wire.is-flow .w-led__g{animation:none;opacity:1}
  .wire.is-boot .w-led__g{animation:none}
}