/* Reuse the approved circuit cards and controls, with wiring-specific colors. */
.ds-basic-guide{--net-color:#247898}
.ds-basic-guide .net-power{--net-color:#ce4260}.ds-basic-guide .net-ground{--net-color:#168466}.ds-basic-guide .net-pump{--net-color:#b47e12}.ds-basic-guide .net-tx{--net-color:#008e9b}.ds-basic-guide .net-rx{--net-color:#8654bd}
.ds-basic-nets{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:11px 14px;background:#f5fbff;border-bottom:1px solid #d0e5ef}
.ds-basic-nets>span{font-size:11px;font-weight:650;color:#446278;margin-right:3px}
.ds-basic-nets button{display:flex;align-items:center;gap:6px;padding:7px 9px;color:#243e50;background:#fff;border:1px solid #c5dfeb;border-radius:6px;font-size:11px;line-height:1.3}
.ds-basic-nets i{width:8px;height:8px;border-radius:50%;background:var(--net-color);box-shadow:inset 0 1px 1px #ffffff88}
.ds-basic-nets button:hover,.ds-basic-nets button[aria-pressed=true]{border-color:var(--net-color);background:#edf8ff;box-shadow:inset 0 -2px var(--net-color)}
.ds-basic-guide .ds-basic-real-svg{width:100%;height:auto;max-height:650px;min-width:0;margin:0;overflow:visible}
.ds-basic-guide .ds-basic-canvas{padding:15px 8px}
.ds-basic-guide .ds-basic-canvas img{max-height:610px}
.ds-basic-guide.is-expanded .ds-basic-real-svg{max-height:850px}
.ds-basic-guide.is-expanded .ds-basic-canvas img{max-height:850px}
.ds-basic-guide .mb-power{color:#cf4260}.ds-basic-guide .mb-ground{color:#168466}
.ds-basic-guide .mb-wire{stroke-width:4;filter:drop-shadow(0 1px 1px #28425c25)}
.ds-basic-guide [data-basic-net]{transition:opacity .18s ease}
.ds-basic-guide [data-basic-net].is-muted{opacity:.24}
.ds-basic-guide [data-basic-net].is-traced .mb-wire{stroke-width:5.5;filter:drop-shadow(0 0 3px #65bdcd66)}
.ds-basic-guide svg [data-basic-select][role=button]{cursor:pointer;outline:none}
.ds-basic-guide svg [data-basic-select][role=button]:hover,.ds-basic-guide svg [data-basic-select][role=button]:focus-visible{filter:drop-shadow(0 0 4px #009cd5)}
.ds-basic-guide svg [data-basic-select][role=button]:focus-visible{outline:2px dashed #168dbd;outline-offset:5px}
.ds-basic-step-number{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:7px;font-size:13px;font-weight:750;color:#0678a0;background:#e4f6ff;border:1px solid #b0d9ed}
.ds-basic-step-number.rose{color:#ba3552;background:#fff0f3;border-color:#f0c2cc}.ds-basic-step-number.amber{color:#93660b;background:#fff5d7;border-color:#ebd395}.ds-basic-step-number.mint{color:#087b65;background:#e3f8ef;border-color:#b6e2cf}.ds-basic-step-number.violet{color:#7951ae;background:#f1eaff;border-color:#d7c7ed}
.ds-basic-connections{display:grid;gap:8px;margin:17px 0 0}
.ds-basic-connections>div{padding:10px 12px;background:#f5faff;border:1px solid #d4e5ef;border-left:3px solid var(--net-color);border-radius:6px}
.ds-basic-connections dt{font-size:12px;font-weight:700;color:var(--net-color)}
.ds-basic-connections dd{display:flex;gap:8px;align-items:center;margin:6px 0 0;color:#243a49;font-size:12px;line-height:1.7}
.ds-basic-connections .ds-icon{width:16px;height:16px;flex:none;color:var(--net-color)}
.ds-basic-notes{padding:4px 16px 12px;border-top:1px solid #d3e6ef;background:#f5fbff}
.ds-page .ds-basic-notes p{display:flex;align-items:flex-start;gap:8px;font-size:11px;line-height:1.7;color:#36546a;margin:10px 0 0}
.ds-basic-notes .ds-icon{width:17px;height:17px;flex:none;margin-top:2px;color:#1687ac}
@media(max-width:700px){.ds-basic-guide.is-expanded .ds-basic-real-svg{min-width:800px}.ds-basic-nets>span{width:100%}.ds-basic-nets{gap:6px}.ds-basic-nets button{padding:7px}.ds-basic-guide.is-expanded .ds-basic-canvas img{min-width:700px;max-width:none;width:700px}}
@media(prefers-reduced-motion:reduce){.ds-basic-guide [data-basic-net]{transition:none}}