:root{color-scheme:dark;--bg:#111315;--panel:#17191b;--stage:#1e2224;--line:#303537;--text:#efefea;--dim:#949a96;--accent:#d9c69c;--power:#ff9d43;--ground:#b5bbc0;--sck:#b97aff;--ws:#ff65b3;--sd:#5fdd8f;--scl:#62d7ed;--sda:#4d9cff;--usb:#68e0b0}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font:13px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{display:grid;grid-template-rows:65px 1fr;min-height:100vh}
header{height:65px;padding:0 25px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;background:#111315}header .brand{color:var(--text);font-size:23px;font-weight:850;text-decoration:none;letter-spacing:.18em}header nav{display:flex;gap:5px}header nav a{padding:8px 13px;border:1px solid transparent;color:var(--dim);font:10px ui-monospace,SFMono-Regular,Menlo,monospace;text-decoration:none;letter-spacing:.1em}header nav a:hover{color:var(--text)}header nav a.active{border-color:#776d58;background:#292720;color:#f0dfb5}header>span{justify-self:end;color:var(--dim);font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}
main{display:grid;grid-template-columns:310px minmax(0,1fr);height:calc(100vh - 65px);min-height:560px;overflow:hidden}aside{padding:23px 17px;border-right:1px solid var(--line);display:flex;flex-direction:column;background:var(--panel);overflow:auto}.eyebrow,.detail-kicker{margin:0 7px 12px;color:var(--dim);font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em}.steps{display:grid;gap:3px;border-top:1px solid var(--line);padding-top:8px}.step{appearance:none;border:0;border-left:2px solid transparent;background:transparent;color:#b3b5b1;padding:11px 8px;display:grid;grid-template-columns:28px 1fr;text-align:left;cursor:pointer}.step:hover{background:#232729;color:#fff}.step.active{border-left-color:var(--accent);background:#302d27;color:#f0dfb5}.step span{grid-row:1/3;color:#767d79;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;padding-top:2px}.step b{font-size:11px;font-weight:650}.step small{margin-top:3px;color:#7f8782;font:9px ui-monospace,SFMono-Regular,Menlo,monospace}
.detail{border-top:1px solid var(--line);margin-top:17px;padding:18px 7px 10px}.detail-kicker{color:var(--accent);margin-left:0}.detail h1{margin:0 0 10px;font-size:18px;font-weight:650}.detail>p:not(.detail-kicker){margin:0;color:#abb2ad;line-height:1.55;font-size:11px}.connection-list{margin-top:13px;display:grid;gap:7px}.connection{width:100%;appearance:none;border:1px solid #343a3c;background:#1d2022;color:#c7cbc8;padding:8px 9px;display:grid;grid-template-columns:8px 1fr;text-align:left;gap:8px;cursor:pointer}.connection:hover,.connection.active{border-color:#7d786b;background:#282722;color:#fff}.connection i{width:7px;height:100%;min-height:26px;background:var(--signal);border-radius:3px}.connection b{display:block;font:10px ui-monospace,SFMono-Regular,Menlo,monospace}.connection small{display:block;color:#858e88;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:3px}.rules{margin-top:auto;border-top:1px solid var(--line);padding:12px 7px 0;color:#979e99;font-size:10px;line-height:1.45}.rules p{margin:6px 0}.rules b{color:#ddd7c8}.source-links a{color:#d9c69c;text-underline-offset:2px}
.stage{position:relative;min-width:0;overflow:hidden;background:var(--stage)}.stage:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#2d3234 1px,transparent 1px),linear-gradient(90deg,#2d3234 1px,transparent 1px);background-size:32px 32px;opacity:.25;pointer-events:none}.stage-bar{height:64px;position:absolute;z-index:3;top:0;left:0;right:0;padding:0 20px;border-bottom:1px solid #373c3e;background:#1b1e20e8;display:flex;align-items:center;justify-content:space-between}.stage-bar>div{display:flex;flex-direction:column;gap:4px}.stage-bar b{font:11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}.stage-bar span{color:var(--dim);font:9px ui-monospace,SFMono-Regular,Menlo,monospace}.stage-bar button{padding:8px 11px;border:1px solid #4b5050;background:#25282a;color:#c1c6c2;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;cursor:pointer}.stage-bar button:hover{border-color:#8f866e;color:#fff}.diagram-wrap{position:absolute;inset:64px 0 0;display:flex;align-items:center;justify-content:center;padding:5px 12px 8px}.diagram-wrap svg{display:block;width:100%;height:100%;max-height:920px;overflow:visible}
.pi-board .pcb{fill:#273c38;stroke:#88a49e;stroke-width:2}.mount{fill:#101416;stroke:#94a7a2;stroke-width:4}.soc{fill:#101516;stroke:#697873;stroke-width:2}.soc-label{fill:#d2d8d3;font:700 16px ui-monospace,SFMono-Regular,Menlo,monospace}.soc-sub{fill:#7f918c;font:10px ui-monospace,SFMono-Regular,Menlo,monospace}.radio{fill:#d5d0bf;opacity:.78}.antenna{fill:none;stroke:#6c716b;stroke-width:4}.board-title{fill:#e5e7df;font:700 19px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}.orientation,.edge-label{fill:#93a09a;font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}.orientation-arrow{fill:none;stroke:#93a09a;stroke-width:2}.sd-card,.camera-port{fill:#b7b6aa;stroke:#e3e0d0;stroke-width:2}.sd-teeth,.camera-contacts{fill:none;stroke:#6a6c66;stroke-width:2}.edge-port{fill:#b8b8b3;stroke:#ecece4;stroke-width:2}.data-port{stroke:var(--usb);stroke-width:4}.pwr-port{stroke:var(--power);stroke-width:4}.left-port-label,.port-side-label{fill:#a4ada8;font:9px ui-monospace,SFMono-Regular,Menlo,monospace}.left-port-label.data{fill:var(--usb)}.left-port-label.power{fill:var(--power)}
.header-bed{fill:#15191a;stroke:#0a0d0e;stroke-width:4}.gpio-side-title{fill:#9ea6a2;font:700 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em}.gpio-pin{cursor:pointer}.gpio-pin circle{fill:#3d4543;stroke:#89918e;stroke-width:2}.gpio-pin text{fill:#777f7b;font:8px ui-monospace,SFMono-Regular,Menlo,monospace}.gpio-pin.used circle{fill:#151818;stroke:var(--signal);stroke-width:4}.gpio-pin.used .pin-number{fill:#fff;font-weight:700}.gpio-pin.used .pin-label{fill:var(--signal);font-weight:700;paint-order:stroke;stroke:#273c38;stroke-width:3px}.gpio-pin:hover circle,.gpio-pin.active circle{filter:url(#softShadow);stroke-width:7}.gpio-pin.muted{opacity:.14}
.module{cursor:pointer;outline:none;transition:opacity .15s}.module.muted{opacity:.12}.module-name{fill:#f0eee7;font:700 16px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}.module-name.small{font-size:13px}.module-note{fill:#8e9792;font:9px ui-monospace,SFMono-Regular,Menlo,monospace}.module-shadow{fill:#080b0c;opacity:.45}.mic-board{fill:#11171a;stroke:#4b8bb0;stroke-width:7}.mic-port{fill:#dce2df;stroke:#70827d;stroke-width:4}.mic-ring{fill:#090b0c}.local-link{fill:none;stroke-width:4;stroke-dasharray:7 5}.local-link.ground{stroke:var(--ground)}.local-link.power{stroke:var(--power)}.local-label{fill:#b5bbb6;font:9px ui-monospace,SFMono-Regular,Menlo,monospace}.power-bank{fill:#202527;stroke:#6b7471;stroke-width:3}.bank-usb{fill:#b6bcb9;stroke:var(--power);stroke-width:3}.oled-board{fill:#15395d;stroke:#5783a4;stroke-width:4}.oled-screen{fill:#030607;stroke:#50616b;stroke-width:3}.screen-arrow{fill:#eaf3ef;font:700 21px ui-monospace,SFMono-Regular,Menlo,monospace}.module-pin{cursor:pointer}.module-pin circle{fill:#151818;stroke:var(--signal);stroke-width:4}.module-pin text{fill:var(--signal);font:700 10px ui-monospace,SFMono-Regular,Menlo,monospace;paint-order:stroke;stroke:#101314;stroke-width:4px}.module-pin:hover circle{stroke-width:8}
.wire{fill:none;stroke:var(--signal);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;opacity:.9;cursor:pointer;transition:opacity .15s,stroke-width .15s}.wire[data-signal="usb"]{stroke-width:10}.wire[data-signal="fpc"]{stroke-width:10;stroke-dasharray:7 5}.wire:hover,.wire.active{stroke-width:12;opacity:1}.wire.muted{opacity:.04}.wire-hit{fill:none;stroke:transparent;stroke-width:24;cursor:pointer}.wire-hit.muted{pointer-events:none}
.clearance-layer{opacity:0;pointer-events:none;transition:opacity .2s}.clearance-layer.visible{opacity:1}.keepout{fill:none;stroke:#ff6d71;stroke-width:5;stroke-dasharray:11 8;marker-end:url(#arrow);color:#ff6d71}.clearance-layer text{fill:#ff8b8f;font:700 9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em;paint-order:stroke;stroke:#1e2224;stroke-width:4px}.status-badge rect{fill:#151a19;stroke:#4f6b61;stroke-width:2}.status-badge circle{fill:#3dbb86}.status-badge path{fill:none;stroke:#0c2118;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.badge-title{fill:#7fe0b7;font:700 12px ui-monospace,SFMono-Regular,Menlo,monospace}.badge-copy{fill:#a7b2ad;font:9px ui-monospace,SFMono-Regular,Menlo,monospace}.legend text{fill:#aab0ac;font:9px ui-monospace,SFMono-Regular,Menlo,monospace}.legend circle{stroke:#111;stroke-width:2}.c-power{fill:var(--power)}.c-ground{fill:var(--ground)}.c-sck{fill:var(--sck)}.c-ws{fill:var(--ws)}.c-sd{fill:var(--sd)}.c-scl{fill:var(--scl)}.c-sda{fill:var(--sda)}.mobile-tip{display:none}
#undersideLayer{display:none}.solder-view>#undersideLayer{display:block}.solder-view>#wireLayer,.solder-view>.module,.solder-view>.pi-board,.solder-view>.clearance-layer,.solder-view>.status-badge,.solder-view>.legend{display:none}.underside-board{fill:#203732;stroke:#83a098;stroke-width:3}.underside-mount{fill:#0e1414;stroke:#92a8a2;stroke-width:5}.underside-sd{fill:#777f79;stroke:#bbc1ba;stroke-width:3}.under-edge-label,.under-header-title{fill:#e7dfc9;font:700 12px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}.under-orientation-line{fill:none;stroke:#d9c69c;stroke-width:3}.underside-header-bed{fill:#101515;stroke:#050707;stroke-width:5}.solder-pad{outline:none}.solder-pad>circle:not(.solder-hole),.solder-pad>rect{fill:#9a7b43;stroke:#d0a95f;stroke-width:3}.solder-pad .solder-hole{fill:#0c1111;stroke:#293330;stroke-width:2}.solder-pad .solder-number{fill:#8e9993;font:10px ui-monospace,SFMono-Regular,Menlo,monospace}.solder-pad.pin-one>rect{fill:#c2923f;stroke:#ffe1a1}.solder-pad.target{cursor:pointer}.solder-pad.target>circle:not(.solder-hole),.solder-pad.target>rect{fill:#161a1a;stroke:var(--signal);stroke-width:6}.solder-pad.target .solder-number,.solder-pad.target .solder-signal{fill:var(--signal);font-weight:800}.solder-pad.target:hover>circle:not(.solder-hole),.solder-pad.target.active>circle:not(.solder-hole){stroke-width:10;filter:url(#softShadow)}.solder-pad.muted{opacity:.14}.solder-signal{font:700 13px ui-monospace,SFMono-Regular,Menlo,monospace;paint-order:stroke;stroke:#203732;stroke-width:4px}.solder-leader{fill:none;stroke:var(--signal);stroke-width:3;stroke-dasharray:6 5}.under-callout{fill:#151a1a;stroke:#51645e;stroke-width:2}.under-callout.safe{stroke:#4a8b72}.under-callout.warning{stroke:#9d6d45}.under-callout.mirror{stroke:#6b7289}.under-callout-title,.under-warning-title{fill:#91e2bb;font:800 14px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.07em}.under-warning-title{fill:#ffb273}.under-copy{fill:#bac4bf;font:12px ui-monospace,SFMono-Regular,Menlo,monospace}.under-copy.emphasis{fill:#f3d18d;font-weight:800}.under-board-title{fill:#f0eee7;font:800 18px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}.under-board-sub{fill:#94a19b;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}
@media(max-width:1000px){header{grid-template-columns:1fr auto}header>span{display:none}main{grid-template-columns:255px minmax(0,1fr)}aside{padding:18px 11px}.diagram-wrap{overflow:auto;justify-content:flex-start}.diagram-wrap svg{min-width:980px}.detail h1{font-size:15px}}
@media(max-width:680px){body{display:block}header{position:sticky;top:0;z-index:10;height:58px;padding:0 14px}header .brand{font-size:18px}header nav a{padding:7px 9px}main{display:block;height:auto;min-height:0;overflow:visible}aside{border-right:0;border-bottom:1px solid var(--line);padding:12px}.eyebrow,.detail,.rules{display:none}.steps{display:flex;overflow-x:auto;border:0;padding:0;gap:4px}.step{min-width:150px;border-left:0;border-bottom:2px solid transparent}.step.active{border-bottom-color:var(--accent)}.stage{height:calc(100dvh - 164px);min-height:490px}.stage-bar{height:54px}.diagram-wrap{inset:54px 0 25px;padding-left:6px}.diagram-wrap svg{min-width:980px}.mobile-tip{display:block;position:absolute;left:10px;bottom:7px;color:#7e8581;font:9px ui-monospace,SFMono-Regular,Menlo,monospace}}