<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      min-height: 100%;
      user-select: none;
    }

    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      z-index: 10;
    }

    .btn {
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      background: #ffffff;
      color: #475569;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
    }

    .board-container {
      width: 100%;
      max-width: 620px;
      aspect-ratio: 16 / 9;
      position: relative;
    }

    svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }

    /* Flow animation along rails */
    @keyframes flowRight {
      from { stroke-dashoffset: 24; }
      to { stroke-dashoffset: 0; }
    }

    .flow-line {
      stroke-dasharray: 6 6;
      animation: flowRight 0.8s linear infinite;
    }

    .flow-stop {
      animation: none !important;
      stroke-dasharray: none !important;
      opacity: 0.15;
    }

    /* Pulse animation for the warning split */
    @keyframes warnPulse {
      0%, 100% { transform: scale(1); opacity: 0.95; }
      50% { transform: scale(1.18); opacity: 0.7; }
    }

    .warn-badge {
      transform-origin: 300px 95px;
      animation: warnPulse 1.8s ease-in-out infinite;
      cursor: pointer;
    }

    .jumper-path {
      transition: opacity 0.3s ease, stroke-dashoffset 0.4s ease;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button id="btnSplit" class="btn active" onclick="setMode('split')">
      <span>⚠</span> Split Rail (Break)
    </button>
    <button id="btnBridged" class="btn" onclick="setMode('bridged')">
      <span>⚡</span> Bridged Jumper
    </button>
  </div>

  <div class="board-container">
    <svg viewBox="0 0 600 280">
      <defs>
        
        <linearGradient id="boardGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#fdfdfd" />
          <stop offset="100%" stop-color="#eef2f6" />
        </linearGradient>

        <linearGradient id="jumperGradRed" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#ef4444" />
          <stop offset="50%" stop-color="#f87171" />
          <stop offset="100%" stop-color="#dc2626" />
        </linearGradient>

        <linearGradient id="jumperGradBlue" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#0284c7" />
          <stop offset="50%" stop-color="#38bdf8" />
          <stop offset="100%" stop-color="#0369a1" />
        </linearGradient>

        <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="3" result="blur" />
          <feComposite in="SourceGraphic" in2="blur" operator="over" />
        </filter>
      </defs>

      
      <rect x="20" y="20" width="560" height="240" rx="14" fill="url(#boardGrad)" stroke="#cbd5e1" stroke-width="2.5" />

      
      <line x1="300" y1="20" x2="300" y2="260" stroke="#e2e8f0" stroke-dasharray="4 4" stroke-width="2" />

      
      
      <rect x="70" y="52" width="200" height="16" rx="4" fill="#cbd5e1" opacity="0.45" />
      
      <rect x="70" y="102" width="200" height="16" rx="4" fill="#cbd5e1" opacity="0.45" />
      
      
      <rect id="rightClipRed" x="330" y="52" width="200" height="16" rx="4" fill="#cbd5e1" opacity="0.45" />
      
      <rect id="rightClipBlue" x="330" y="102" width="200" height="16" rx="4" fill="#cbd5e1" opacity="0.45" />

      
      <rect x="280" y="44" width="40" height="82" rx="6" fill="#fee2e2" stroke="#fca5a5" stroke-width="1.5" stroke-dasharray="3 3" id="splitBox" />

      
      <line x1="45" y1="42" x2="275" y2="42" stroke="#ef4444" stroke-width="3" stroke-linecap="round" />
      <line x1="325" y1="42" x2="555" y2="42" stroke="#ef4444" stroke-width="3" stroke-linecap="round" />
      <text x="32" y="46" font-size="16" font-weight="bold" fill="#ef4444" text-anchor="middle">+</text>
      <text x="568" y="46" font-size="16" font-weight="bold" fill="#ef4444" text-anchor="middle">+</text>

      
      <line x1="70" y1="60" x2="270" y2="60" stroke="#dc2626" stroke-width="4" class="flow-line" />
      <line id="flowRedRight" x1="330" y1="60" x2="530" y2="60" stroke="#dc2626" stroke-width="4" class="flow-stop" />

      
      <line x1="45" y1="128" x2="275" y2="128" stroke="#0284c7" stroke-width="3" stroke-linecap="round" />
      <line x1="325" y1="128" x2="555" y2="128" stroke="#0284c7" stroke-width="3" stroke-linecap="round" />
      <text x="32" y="132" font-size="18" font-weight="bold" fill="#0284c7" text-anchor="middle">−</text>
      <text x="568" y="132" font-size="18" font-weight="bold" fill="#0284c7" text-anchor="middle">−</text>

      
      <line x1="70" y1="110" x2="270" y2="110" stroke="#0284c7" stroke-width="4" class="flow-line" />
      <line id="flowBlueRight" x1="330" y1="110" x2="530" y2="110" stroke="#0284c7" stroke-width="4" class="flow-stop" />

      
      
      
      <g fill="#1e2945">
        <circle cx="80" cy="60" r="4.5"/><circle cx="100" cy="60" r="4.5"/><circle cx="120" cy="60" r="4.5"/><circle cx="140" cy="60" r="4.5"/><circle cx="160" cy="60" r="4.5"/>
        <circle cx="190" cy="60" r="4.5"/><circle cx="210" cy="60" r="4.5"/><circle cx="230" cy="60" r="4.5"/><circle cx="250" cy="60" r="4.5"/><circle cx="270" cy="60" r="4.5"/>
        
        <circle cx="330" cy="60" r="4.5"/><circle cx="350" cy="60" r="4.5"/><circle cx="370" cy="60" r="4.5"/><circle cx="390" cy="60" r="4.5"/><circle cx="410" cy="60" r="4.5"/>
        <circle cx="440" cy="60" r="4.5"/><circle cx="460" cy="60" r="4.5"/><circle cx="480" cy="60" r="4.5"/><circle cx="500" cy="60" r="4.5"/><circle cx="520" cy="60" r="4.5"/>
      </g>

      
      <g fill="#1e2945">
        
        <circle cx="80" cy="110" r="4.5"/><circle cx="100" cy="110" r="4.5"/><circle cx="120" cy="110" r="4.5"/><circle cx="140" cy="110" r="4.5"/><circle cx="160" cy="110" r="4.5"/>
        <circle cx="190" cy="110" r="4.5"/><circle cx="210" cy="110" r="4.5"/><circle cx="230" cy="110" r="4.5"/><circle cx="250" cy="110" r="4.5"/><circle cx="270" cy="110" r="4.5"/>
        
        <circle cx="330" cy="110" r="4.5"/><circle cx="350" cy="110" r="4.5"/><circle cx="370" cy="110" r="4.5"/><circle cx="390" cy="110" r="4.5"/><circle cx="410" cy="110" r="4.5"/>
        <circle cx="440" cy="110" r="4.5"/><circle cx="460" cy="110" r="4.5"/><circle cx="480" cy="110" r="4.5"/><circle cx="500" cy="110" r="4.5"/><circle cx="520" cy="110" r="4.5"/>
      </g>

      
      <g fill="#64748b" opacity="0.6">
        <circle cx="80" cy="170" r="3.5"/><circle cx="80" cy="190" r="3.5"/><circle cx="80" cy="210" r="3.5"/><circle cx="80" cy="230" r="3.5"/>
        <circle cx="140" cy="170" r="3.5"/><circle cx="140" cy="190" r="3.5"/><circle cx="140" cy="210" r="3.5"/><circle cx="140" cy="230" r="3.5"/>
        <circle cx="200" cy="170" r="3.5"/><circle cx="200" cy="190" r="3.5"/><circle cx="200" cy="210" r="3.5"/><circle cx="200" cy="230" r="3.5"/>
        <circle cx="260" cy="170" r="3.5"/><circle cx="260" cy="190" r="3.5"/><circle cx="260" cy="210" r="3.5"/><circle cx="260" cy="230" r="3.5"/>
        
        <circle cx="340" cy="170" r="3.5"/><circle cx="340" cy="190" r="3.5"/><circle cx="340" cy="210" r="3.5"/><circle cx="340" cy="230" r="3.5"/>
        <circle cx="400" cy="170" r="3.5"/><circle cx="400" cy="190" r="3.5"/><circle cx="400" cy="210" r="3.5"/><circle cx="400" cy="230" r="3.5"/>
        <circle cx="460" cy="170" r="3.5"/><circle cx="460" cy="190" r="3.5"/><circle cx="460" cy="210" r="3.5"/><circle cx="460" cy="230" r="3.5"/>
        <circle cx="520" cy="170" r="3.5"/><circle cx="520" cy="190" r="3.5"/><circle cx="520" cy="210" r="3.5"/><circle cx="520" cy="230" r="3.5"/>
      </g>

      
      <g font-size="12" font-weight="700" text-anchor="middle">
        <rect x="52" y="165" width="46" height="20" rx="4" fill="#ef4444" />
        <text x="75" y="179" fill="#fff">+5V IN</text>
        <path d="M 75 160 L 75 66" stroke="#ef4444" stroke-width="2.5" stroke-dasharray="3 3" />
      </g>

      
      
      <g id="ledUnit" transform="translate(480, 160)">
        
        <path d="M 0 0 L 0 -100" stroke="#ef4444" stroke-width="2" />
        <path d="M 20 0 L 20 -50" stroke="#0284c7" stroke-width="2" />
        
        <circle id="ledGlow" cx="10" cy="20" r="18" fill="#22c55e" opacity="0.1" />
        <circle id="ledBody" cx="10" cy="20" r="12" fill="#94a3b8" />
        <text id="statusText" x="10" y="48" font-size="11" font-weight="700" fill="#64748b" text-anchor="middle">0V (DEAD)</text>
      </g>

      
      <g id="jumpers" style="display: none;">
        
        <path d="M 270 60 C 270 15, 330 15, 330 60" fill="none" stroke="url(#jumperGradRed)" stroke-width="5" stroke-linecap="round" />
        <circle cx="270" cy="60" r="3.5" fill="#f87171" />
        <circle cx="330" cy="60" r="3.5" fill="#f87171" />

        
        <path d="M 270 110 C 270 150, 330 150, 330 110" fill="none" stroke="url(#jumperGradBlue)" stroke-width="5" stroke-linecap="round" />
        <circle cx="270" cy="110" r="3.5" fill="#38bdf8" />
        <circle cx="330" cy="110" r="3.5" fill="#38bdf8" />

        
        <rect x="265" y="76" width="70" height="20" rx="4" fill="#0f172a" opacity="0.85" />
        <text x="300" y="90" font-size="11" font-weight="700" fill="#38bdf8" text-anchor="middle">JUMPERS</text>
      </g>

      
      <g id="warningGroup" class="warn-badge" onclick="setMode('bridged')">
        <circle cx="300" cy="85" r="22" fill="#ef4444" filter="url(#glow)" />
        <circle cx="300" cy="85" r="18" fill="#dc2626" />
        <text x="300" y="93" font-size="20" font-weight="900" fill="#ffffff" text-anchor="middle">⚡</text>
        <rect x="250" y="115" width="100" height="22" rx="5" fill="#1e2945" />
        <text x="300" y="130" font-size="11" font-weight="700" fill="#fca5a5" text-anchor="middle">SPLIT BREAK</text>
      </g>

    </svg>
  </div>

  <script>
    function setMode(mode) {
      const isBridged = mode === 'bridged';

      // Toggle button states
      document.getElementById('btnSplit').classList.toggle('active', !isBridged);
      document.getElementById('btnBridged').classList.toggle('active', isBridged);

      // Elements
      const jumpers = document.getElementById('jumpers');
      const warningGroup = document.getElementById('warningGroup');
      const splitBox = document.getElementById('splitBox');
      const flowRedRight = document.getElementById('flowRedRight');
      const flowBlueRight = document.getElementById('flowBlueRight');
      const ledBody = document.getElementById('ledBody');
      const ledGlow = document.getElementById('ledGlow');
      const statusText = document.getElementById('statusText');

      if (isBridged) {
        jumpers.style.display = 'inline';
        warningGroup.style.display = 'none';
        splitBox.style.display = 'none';

        flowRedRight.classList.remove('flow-stop');
        flowRedRight.classList.add('flow-line');
        flowBlueRight.classList.remove('flow-stop');
        flowBlueRight.classList.add('flow-line');

        ledBody.setAttribute('fill', '#22c55e');
        ledGlow.setAttribute('fill', '#22c55e');
        ledGlow.setAttribute('opacity', '0.65');
        statusText.textContent = '+5V ACTIVE';
        statusText.setAttribute('fill', '#15803d');
      } else {
        jumpers.style.display = 'none';
        warningGroup.style.display = 'inline';
        splitBox.style.display = 'inline';

        flowRedRight.classList.add('flow-stop');
        flowRedRight.classList.remove('flow-line');
        flowBlueRight.classList.add('flow-stop');
        flowBlueRight.classList.remove('flow-line');

        ledBody.setAttribute('fill', '#94a3b8');
        ledGlow.setAttribute('opacity', '0.05');
        statusText.textContent = '0V (DEAD)';
        statusText.setAttribute('fill', '#64748b');
      }
    }
  </script>
</body>
</html>

Breadboard Architecture and Internal Contact Rails

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Parasitic Capacitance Between Breadboard Rows</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px;
      user-select: none;
    }
    .main-wrap {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .svg-box {
      width: 100%;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .controls {
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .mode-btn {
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 20px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      cursor: pointer;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .mode-btn:hover {
      background: #f1f5f9;
      color: #0f172a;
    }
    .mode-btn.active {
      background: #0369a1;
      color: #ffffff;
      border-color: #0369a1;
    }
    .readout {
      display: flex;
      justify-content: space-around;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 13px;
      gap: 8px;
    }
    .readout-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 2px;
    }
    .readout-title {
      color: #475569;
      font-size: 11px;
      font-weight: 600;
    }
    .val {
      font-weight: 700;
      color: #0f172a;
      font-size: 13px;
    }
    .val.hi-freq {
      color: #b45309;
    }
    .status-badge {
      font-size: 11px;
      font-weight: 600;
    }
    .status-badge.ok {
      color: #15803d;
    }
    .status-badge.warn {
      color: #b45309;
    }

    /* SVG Transitions & Animations */
    .efield-line {
      stroke-dasharray: 5, 5;
      animation: dashMove 1.2s linear infinite;
    }
    @keyframes dashMove {
      to { stroke-dashoffset: -20; }
    }
    .layer-circuit, .layer-efield {
      transition: opacity 0.25s ease;
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    <div class="svg-box">
      <svg viewBox="0 0 500 335" xmlns="http://www.w3.org/2000/svg">
        <defs>
          
          <linearGradient id="metalGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#fef08a"/>
            <stop offset="50%" stop-color="#eab308"/>
            <stop offset="100%" stop-color="#ca8a04"/>
          </linearGradient>
          <linearGradient id="plasticGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#f8fafc"/>
            <stop offset="100%" stop-color="#edf2f7"/>
          </linearGradient>

          
          <marker id="efieldArrow" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto">
            <path d="M0,0 L6,3 L0,6 Z" fill="#0369a1" />
          </marker>
          <marker id="dimArrowEnd" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto">
            <path d="M0,0 L6,3 L0,6 Z" fill="#334155" />
          </marker>
          <marker id="dimArrowStart" viewBox="0 0 6 6" refX="1" refY="3" markerWidth="4" markerHeight="4" orient="auto">
            <path d="M6,0 L0,3 L6,6 Z" fill="#334155" />
          </marker>
        </defs>

        
        <g id="dimLayer">
          <line x1="135" y1="20" x2="365" y2="20" stroke="#475569" stroke-width="1.5" marker-start="url(#dimArrowStart)" marker-end="url(#dimArrowEnd)" />
          <line x1="135" y1="14" x2="135" y2="26" stroke="#475569" stroke-width="1" />
          <line x1="365" y1="14" x2="365" y2="26" stroke="#475569" stroke-width="1" />
          <rect x="180" y="8" width="140" height="18" rx="4" fill="#ffffff" />
          <text x="250" y="21" font-size="12" font-weight="700" fill="#1e293b" text-anchor="middle">Pitch d = 2.54 mm</text>
        </g>

        
        <rect x="25" y="32" width="450" height="240" rx="10" fill="url(#plasticGrad)" stroke="#cbd5e1" stroke-width="1.5" />

        
        <rect x="235" y="32" width="30" height="240" fill="#cbd5e1" opacity="0.45" />

        
        <g id="rowA">
          
          <rect x="65" y="44" width="140" height="205" rx="8" fill="#fef9c3" stroke="#d97706" stroke-width="1.5" />
          
          <path d="M 85,55 C 105,73 105,87 85,105 M 185,55 C 165,73 165,87 185,105" stroke="#b45309" stroke-width="2.5" fill="none" />
          <path d="M 85,95 C 105,113 105,127 85,145 M 185,95 C 165,113 165,127 185,145" stroke="#b45309" stroke-width="2.5" fill="none" />
          <path d="M 85,135 C 105,153 105,167 85,185 M 185,135 C 165,153 165,167 185,185" stroke="#b45309" stroke-width="2.5" fill="none" />
          <path d="M 85,175 C 105,193 105,207 85,225 M 185,175 C 165,193 165,207 185,225" stroke="#b45309" stroke-width="2.5" fill="none" />
          
          <rect x="130" y="52" width="10" height="180" rx="2" fill="url(#metalGrad)" stroke="#a16207" stroke-width="1" />
          
          <text x="135" y="268" font-size="13" font-weight="700" fill="#78350f" text-anchor="middle">Row A (Clip 1)</text>
        </g>

        
        <g id="rowB">
          
          <rect x="295" y="44" width="140" height="205" rx="8" fill="#fef9c3" stroke="#d97706" stroke-width="1.5" />
          
          <path d="M 315,55 C 335,73 335,87 315,105 M 415,55 C 395,73 395,87 415,105" stroke="#b45309" stroke-width="2.5" fill="none" />
          <path d="M 315,95 C 335,113 335,127 315,145 M 415,95 C 395,113 395,127 415,145" stroke="#b45309" stroke-width="2.5" fill="none" />
          <path d="M 315,135 C 335,153 335,167 315,185 M 415,135 C 395,153 395,167 415,185" stroke="#b45309" stroke-width="2.5" fill="none" />
          <path d="M 315,175 C 335,193 335,207 315,225 M 415,175 C 395,193 395,207 415,225" stroke="#b45309" stroke-width="2.5" fill="none" />
          
          <rect x="360" y="52" width="10" height="180" rx="2" fill="url(#metalGrad)" stroke="#a16207" stroke-width="1" />
          
          <text x="365" y="268" font-size="13" font-weight="700" fill="#78350f" text-anchor="middle">Row B (Clip 2)</text>
        </g>

        
        <g id="dielectricLabelZone">
          <rect x="155" y="295" width="190" height="26" rx="13" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1" />
          <text x="250" y="312" font-size="12" font-weight="700" fill="#334155" text-anchor="middle">ABS Plastic Dielectric (εᵣ ≈ 3.0)</text>
        </g>

        
        <g id="efieldLayer" class="layer-efield" opacity="0.65">
          <path class="efield-line" d="M 205,68 L 295,68" stroke="#0284c7" stroke-width="2.2" marker-end="url(#efieldArrow)" />
          <path class="efield-line" d="M 205,96 L 295,96" stroke="#0284c7" stroke-width="2.2" marker-end="url(#efieldArrow)" />
          <path class="efield-line" d="M 205,124 L 295,124" stroke="#0284c7" stroke-width="2.2" marker-end="url(#efieldArrow)" />
          <path class="efield-line" d="M 205,152 L 295,152" stroke="#0284c7" stroke-width="2.2" marker-end="url(#efieldArrow)" />
          <path class="efield-line" d="M 205,180 L 295,180" stroke="#0284c7" stroke-width="2.2" marker-end="url(#efieldArrow)" />
          <path class="efield-line" d="M 205,208 L 295,208" stroke="#0284c7" stroke-width="2.2" marker-end="url(#efieldArrow)" />
          
          <rect x="202" y="86" width="96" height="20" rx="4" fill="#ffffff" stroke="#0369a1" stroke-width="1.5" />
          <text x="250" y="100" font-size="11" font-weight="700" fill="#075985" text-anchor="middle">E-Field Lines</text>
        </g>

        
        <g id="circuitLayer" class="layer-circuit" opacity="1">
          
          <line x1="140" y1="146" x2="238" y2="146" stroke="#b91c1c" stroke-width="3" />
          <line x1="262" y1="146" x2="360" y2="146" stroke="#b91c1c" stroke-width="3" />
          
          
          <circle cx="140" cy="146" r="4.5" fill="#b91c1c" />
          <circle cx="360" cy="146" r="4.5" fill="#b91c1c" />

          
          <rect x="236" y="128" width="4" height="36" rx="1" fill="#b91c1c" />
          <rect x="260" y="128" width="4" height="36" rx="1" fill="#b91c1c" />

          
          <rect x="195" y="172" width="110" height="24" rx="5" fill="#ffffff" stroke="#b91c1c" stroke-width="1.5" />
          <text x="250" y="188" font-size="12" font-weight="700" fill="#991b1b" text-anchor="middle">Cₚ ≈ 2 – 5 pF</text>
        </g>
      </svg>
    </div>

    
    <div class="readout">
      <div class="readout-item">
        <span class="readout-title">1 kHz Audio Signal</span>
        <span class="val">X_C ≈ 50 MΩ</span>
        <span class="status-badge ok">✓ Isolated (Negligible Leakage)</span>
      </div>
      <div class="readout-item">
        <span class="readout-title">10 MHz Digital Clock</span>
        <span class="val hi-freq">X_C ≈ 5.3 kΩ</span>
        <span class="status-badge warn">⚠ Stray AC Crosstalk</span>
      </div>
    </div>

    
    <div class="controls">
      <button class="mode-btn active" id="btnCombined">Combined View</button>
      <button class="mode-btn" id="btnField">E-Field Only</button>
      <button class="mode-btn" id="btnModel">Circuit Model Only</button>
    </div>
  </div>

  <script>
    const efield = document.getElementById('efieldLayer');
    const circuit = document.getElementById('circuitLayer');
    const btnCombined = document.getElementById('btnCombined');
    const btnField = document.getElementById('btnField');
    const btnModel = document.getElementById('btnModel');

    function setActive(mode) {
      btnCombined.classList.remove('active');
      btnField.classList.remove('active');
      btnModel.classList.remove('active');

      if (mode === 'combined') {
        btnCombined.classList.add('active');
        efield.style.opacity = '0.65';
        circuit.style.opacity = '1';
      } else if (mode === 'field') {
        btnField.classList.add('active');
        efield.style.opacity = '1';
        circuit.style.opacity = '0';
      } else if (mode === 'model') {
        btnModel.classList.add('active');
        efield.style.opacity = '0';
        circuit.style.opacity = '1';
      }
    }

    btnCombined.addEventListener('click', () => setActive('combined'));
    btnField.addEventListener('click', () => setActive('field'));
    btnModel.addEventListener('click', () => setActive('model'));

    // Default view
    setActive('combined');
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Breadboard Stray Capacitance &amp; Crosstalk</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: #1e293b;
      background: transparent;
      padding: 10px 14px;
      line-height: 1.4;
      -webkit-font-smoothing: antialiased;
    }

    /* Top Header Bar */
    .header-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 14px;
      padding-bottom: 8px;
      border-bottom: 1px solid #e2e8f0;
    }

    .title-group {
      display: flex;
      align-items: baseline;
      gap: 8px;
      flex-wrap: wrap;
    }

    .title-text {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.01em;
    }

    .title-sub {
      font-size: 13px;
      font-weight: 500;
      color: #64748b;
    }

    .eq-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #0f172a;
    }

    /* Direct 2-Column Grid (No outer card wrappers) */
    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      align-items: start;
    }

    .column-section {
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: transparent;
      padding: 0;
      border: none;
    }

    .column-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .freq-title {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
    }

    .status-tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      padding: 3px 8px;
      border-radius: 4px;
      white-space: nowrap;
    }

    .tag-safe {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .tag-danger {
      background: #fff1f2;
      color: #e11d48;
      border: 1px solid #fecdd3;
    }

    /* Math Calculation Box */
    .math-calc-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f8fafc;
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 12.5px;
      color: #334155;
      border: 1px solid #f1f5f9;
      min-height: 38px;
    }

    .math-inline {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-family: "Cambria Math", "Times New Roman", serif;
      font-size: 13.5px;
    }

    .math-inline .var {
      font-style: italic;
    }

    .math-inline .frac {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 11.5px;
      line-height: 1.1;
      padding: 0 3px;
    }

    .math-inline .top {
      border-bottom: 1px solid #475569;
      padding-bottom: 1px;
    }

    .math-inline .bot {
      padding-top: 1px;
    }

    .math-inline .res-safe {
      font-weight: 700;
      color: #059669;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    .math-inline .res-danger {
      font-weight: 700;
      color: #e11d48;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    /* SVG Breadboard Visualization */
    .svg-wrapper {
      width: 100%;
      height: 165px;
      background: #fafbfc;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
    }

    .diagram-svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .strip-metal {
      fill: #e2e8f0;
      stroke: #cbd5e1;
      stroke-width: 1;
    }

    .pin-hole {
      fill: #334155;
    }

    .strip-label {
      font-size: 10.5px;
      font-weight: 700;
      fill: #334155;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    .sub-label {
      font-size: 9.5px;
      font-weight: 600;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    .wave-sine {
      fill: none;
      stroke: #0284c7;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .wave-square {
      fill: none;
      stroke: #0284c7;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .wave-clean {
      fill: none;
      stroke: #10b981;
      stroke-width: 2;
    }

    .wave-crosstalk {
      fill: none;
      stroke: #e11d48;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .bridge-pill {
      fill: #ffffff;
      stroke-width: 1;
      rx: 4;
    }

    .bridge-pill-safe {
      stroke: #94a3b8;
    }

    .bridge-pill-danger {
      stroke: #fda4af;
      fill: #fff1f2;
    }

    .bridge-text-safe {
      font-size: 10px;
      font-weight: 700;
      fill: #475569;
      text-anchor: middle;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    .bridge-text-danger {
      font-size: 10px;
      font-weight: 700;
      fill: #be123c;
      text-anchor: middle;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    /* Smooth, non-strobing animation for coupling */
    .coupling-arrow {
      stroke: #f43f5e;
      stroke-width: 2.5;
      stroke-dasharray: 6 4;
      animation: smoothDash 2s linear infinite;
    }

    @keyframes smoothDash {
      from {
        stroke-dashoffset: 20;
      }
      to {
        stroke-dashoffset: 0;
      }
    }

    .summary-text {
      font-size: 12px;
      color: #475569;
      line-height: 1.35;
    }

    .summary-text strong {
      color: #0f172a;
    }

    @media (max-width: 620px) {
      body {
        padding: 8px;
      }
      .grid-container {
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }
  </style>
</head>
<body>

  
  <div class="header-bar">
    <div class="title-group">
      <span class="title-text">Breadboard Stray Capacitance &amp; Crosstalk</span>
      <span class="title-sub">(Parasitic <span style="font-family: 'Cambria Math', serif; font-style: italic;">C<sub>p</sub></span> = 3 pF)</span>
    </div>
    <div class="eq-badge">
      <span class="math-inline">
        <span class="var">X<sub>C</sub></span> = 
        <span class="frac">
          <span class="top">1</span>
          <span class="bot">2&pi;<span class="var">f</span><span class="var">C<sub>p</sub></span></span>
        </span>
      </span>
    </div>
  </div>

  
  <div class="grid-container">

    
    <div class="column-section">
      <div class="column-header">
        <span class="freq-title">Audio Signal (1 kHz)</span>
        <span class="status-tag tag-safe">Isolated / Safe</span>
      </div>

      <div class="math-calc-bar">
        <span class="math-inline">
          <span class="var">X<sub>C</sub></span> = 
          <span class="frac">
            <span class="top">1</span>
            <span class="bot">2&pi; &times; 10<sup>3</sup> &times; (3&times;10<sup>&minus;12</sup>)</span>
          </span>
          &approx; <span class="res-safe">53.1 M&Omega;</span>
        </span>
      </div>

      <div class="svg-wrapper">
        <svg class="diagram-svg" viewBox="0 0 340 165">
          
          <rect x="8" y="10" width="324" height="32" rx="4" class="strip-metal" />
          <circle cx="22" cy="26" r="3.5" class="pin-hole" />
          <circle cx="36" cy="26" r="3.5" class="pin-hole" />
          <text x="48" y="23" class="strip-label">ROW A</text>
          <text x="48" y="34" class="sub-label" fill="#0369a1">1 kHz Sine</text>

          
          <g transform="translate(130, 0)">
            <path d="M 5 26 Q 22.5 14 40 26 T 75 26 T 110 26 T 145 26 T 180 26 T 195 26" class="wave-sine" />
          </g>

          
          <g transform="translate(0, 52)">
            
            <line x1="28" y1="28" x2="48" y2="28" stroke="#64748b" stroke-width="1.5" />
            <circle cx="48" cy="28" r="2.5" fill="#64748b" />
            <line x1="48" y1="28" x2="66" y2="16" stroke="#ef4444" stroke-width="2" stroke-linecap="round" />
            <circle cx="70" cy="28" r="2.5" fill="#64748b" />
            <line x1="70" y1="28" x2="90" y2="28" stroke="#64748b" stroke-width="1.5" />

            
            <rect x="100" y="17" width="220" height="22" class="bridge-pill bridge-pill-safe" />
            <text x="210" y="32" class="bridge-text-safe">53.1 M&Omega; (Effective Open Circuit)</text>
          </g>

          
          <rect x="8" y="122" width="324" height="32" rx="4" class="strip-metal" />
          <circle cx="22" cy="138" r="3.5" class="pin-hole" />
          <circle cx="36" cy="138" r="3.5" class="pin-hole" />
          <text x="48" y="135" class="strip-label">ROW B</text>
          <text x="48" y="146" class="sub-label" fill="#059669">Clean / Undisturbed</text>

          
          <g transform="translate(130, 0)">
            <line x1="5" y1="138" x2="195" y2="138" class="wave-clean" />
          </g>
        </svg>
      </div>

      <div class="summary-text">
        <strong>Negligible Leakage:</strong> Leakage current is negligible (&approx; 0 nA). High reactance ensures no audible crosstalk.
      </div>
    </div>

    
    <div class="column-section">
      <div class="column-header">
        <span class="freq-title">Digital Clock (20 MHz)</span>
        <span class="status-tag tag-danger">Severe Crosstalk Risk</span>
      </div>

      <div class="math-calc-bar">
        <span class="math-inline">
          <span class="var">X<sub>C</sub></span> = 
          <span class="frac">
            <span class="top">1</span>
            <span class="bot">2&pi; &times; (20&times;10<sup>6</sup>) &times; (3&times;10<sup>&minus;12</sup>)</span>
          </span>
          &approx; <span class="res-danger">2.65 k&Omega;</span>
        </span>
      </div>

      <div class="svg-wrapper">
        <svg class="diagram-svg" viewBox="0 0 340 165">
          
          <rect x="8" y="10" width="324" height="32" rx="4" class="strip-metal" />
          <circle cx="22" cy="26" r="3.5" class="pin-hole" />
          <circle cx="36" cy="26" r="3.5" class="pin-hole" />
          <text x="48" y="23" class="strip-label">ROW A</text>
          <text x="48" y="34" class="sub-label" fill="#0369a1">20 MHz Clock</text>

          
          <g transform="translate(130, 0)">
            <path d="M 5 33 L 15 33 L 15 19 L 30 19 L 30 33 L 45 33 L 45 19 L 60 19 L 60 33 L 75 33 L 75 19 L 90 19 L 90 33 L 105 33 L 105 19 L 120 19 L 120 33 L 135 33 L 135 19 L 150 19 L 150 33 L 165 33 L 165 19 L 180 19 L 180 33 L 195 33" class="wave-square" />
          </g>

          
          <g transform="translate(0, 52)">
            
            <line x1="18" y1="28" x2="34" y2="28" stroke="#e11d48" stroke-width="1.8" />
            <line x1="34" y1="18" x2="34" y2="38" stroke="#e11d48" stroke-width="2.2" stroke-linecap="round" />
            <line x1="40" y1="18" x2="40" y2="38" stroke="#e11d48" stroke-width="2.2" stroke-linecap="round" />
            <line x1="40" y1="28" x2="56" y2="28" stroke="#e11d48" stroke-width="1.8" />

            
            <line x1="60" y1="28" x2="90" y2="28" class="coupling-arrow" />
            <polygon points="94,28 87,24 87,32" fill="#f43f5e" />

            
            <rect x="100" y="17" width="220" height="22" class="bridge-pill bridge-pill-danger" />
            <text x="210" y="32" class="bridge-text-danger">2.65 k&Omega; Low-Impedance Bridge</text>
          </g>

          
          <rect x="8" y="122" width="324" height="32" rx="4" class="strip-metal" />
          <circle cx="22" cy="138" r="3.5" class="pin-hole" />
          <circle cx="36" cy="138" r="3.5" class="pin-hole" />
          <text x="48" y="135" class="strip-label">ROW B</text>
          <text x="48" y="146" class="sub-label" fill="#e11d48">Signal Corrupted!</text>

          
          <g transform="translate(130, 0)">
            <path d="M 5 138 L 13 138 L 15 125 L 17 149 L 19 138 L 28 138 L 30 125 L 32 149 L 34 138 L 43 138 L 45 125 L 47 149 L 49 138 L 58 138 L 60 125 L 62 149 L 64 138 L 73 138 L 75 125 L 77 149 L 79 138 L 88 138 L 90 125 L 92 149 L 94 138 L 103 138 L 105 125 L 107 149 L 109 138 L 118 138 L 120 125 L 122 149 L 124 138 L 133 138 L 135 125 L 137 149 L 139 138 L 148 138 L 150 125 L 152 149 L 154 138 L 163 138 L 165 125 L 167 149 L 169 138 L 178 138 L 180 125 L 182 149 L 184 138 L 195 138" class="wave-crosstalk" />
          </g>
        </svg>
      </div>

      <div class="summary-text">
        <strong>Severe Crosstalk:</strong> Low reactance couples high-frequency harmonics directly into adjacent circuits.
      </div>
    </div>

  </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px;
      min-height: 100%;
    }
    .wrapper {
      width: 100%;
      max-width: 560px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    .controls {
      display: flex;
      gap: 8px;
      background: #ffffff;
      padding: 4px;
      border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      border: 1px solid #e2e8f0;
    }
    .btn {
      background: transparent;
      border: none;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      border-radius: 6px;
      transition: all 0.2s ease;
    }
    .btn.active {
      background: #2563eb;
      color: #ffffff;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .label-box {
      font-size: 12px;
      font-weight: 700;
      fill: #1e2945;
    }
    .sub-label {
      font-size: 10px;
      font-weight: 500;
      fill: #64748b;
    }
    .wire-glow {
      transition: opacity 0.3s ease, stroke 0.3s ease;
    }
    .spring-metal {
      transition: fill 0.3s ease, filter 0.3s ease;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="controls">
      <button class="btn active" id="btnCut" onclick="setMode('cut')">Cutaway</button>
      <button class="btn" id="btnFlow" onclick="setMode('flow')">Current Flow</button>
      <button class="btn" id="btnChip" onclick="setMode('chip')">DIP-8 IC</button>
    </div>

    <svg viewBox="0 0 540 370">
      <defs>
        
        <linearGradient id="plasticTop" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#ffffff"/>
          <stop offset="100%" stop-color="#f1f5f9"/>
        </linearGradient>
        <linearGradient id="plasticFront" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#cbd5e1"/>
          <stop offset="100%" stop-color="#94a3b8"/>
        </linearGradient>
        <linearGradient id="plasticSide" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#e2e8f0"/>
          <stop offset="100%" stop-color="#cbd5e1"/>
        </linearGradient>
        <linearGradient id="metalClip" x1="0%" y1="0%" x2="100%" y2="50%">
          <stop offset="0%" stop-color="#3b82f6"/>
          <stop offset="50%" stop-color="#1d4ed8"/>
          <stop offset="100%" stop-color="#2563eb"/>
        </linearGradient>
        <linearGradient id="metalSilver" x1="0%" y1="0%" x2="100%" y2="50%">
          <stop offset="0%" stop-color="#e2e8f0"/>
          <stop offset="50%" stop-color="#94a3b8"/>
          <stop offset="100%" stop-color="#cbd5e1"/>
        </linearGradient>
        <linearGradient id="icBody" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#334155"/>
          <stop offset="100%" stop-color="#0f172a"/>
        </linearGradient>
        <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#2563eb" flood-opacity="0.4"/>
        </filter>
      </defs>

      
      
      <polygon points="120,70 420,70 510,135 210,135" fill="url(#plasticTop)" stroke="#cbd5e1" stroke-width="1.5"/>
      <polygon points="510,135 510,215 210,215 210,135" fill="url(#plasticSide)"/>
      <polygon points="120,70 120,150 210,215 210,135" fill="url(#plasticFront)"/>

      
      <polygon points="165,102 465,102 460,111 160,111" fill="#cbd5e1" stroke="#94a3b8" stroke-width="0.75"/>
      <polygon points="160,111 460,111 455,116 155,116" fill="#64748b"/>
      <polygon points="155,116 455,116 460,121 160,121" fill="#94a3b8"/>

      
      <g id="cutawayLayer">
        
        <polygon points="135,160 275,160 305,182 165,182" fill="#1e293b" opacity="0.12"/>
        
        
        <g id="activeClip" filter="url(#glow)">
          
          <polygon points="155,142 167,151 287,151 275,142" fill="url(#metalClip)"/>
          
          
          <path d="M 172,138 L 176,145 L 180,138 L 176,133 Z" fill="#60a5fa"/>
          
          <path d="M 197,138 L 201,145 L 205,138 L 201,133 Z" fill="#60a5fa"/>
          
          <path d="M 222,138 L 226,145 L 230,138 L 226,133 Z" fill="#60a5fa"/>
          
          <path d="M 247,138 L 251,145 L 255,138 L 251,133 Z" fill="#60a5fa"/>
          
          <path d="M 272,138 L 276,145 L 280,138 L 276,133 Z" fill="#60a5fa"/>
        </g>

        
        <polygon points="180,122 192,131 312,131 300,122" fill="url(#metalSilver)"/>
        <polygon points="130,162 142,171 262,171 250,162" fill="url(#metalSilver)"/>
      </g>

      
      <g id="tiePoints" fill="#1e293b">
        
        
        <rect x="220" y="80" width="4" height="4" rx="0.8" opacity="0.7"/>
        <rect x="245" y="80" width="4" height="4" rx="0.8" opacity="0.7"/>
        <rect x="270" y="80" width="4" height="4" rx="0.8" opacity="0.7"/>
        <rect x="295" y="80" width="4" height="4" rx="0.8" opacity="0.7"/>
        <rect x="320" y="80" width="4" height="4" rx="0.8" opacity="0.7"/>

        <rect x="235" y="88" width="4" height="4" rx="0.8" opacity="0.7"/>
        <rect x="260" y="88" width="4" height="4" rx="0.8" opacity="0.7"/>
        <rect x="285" y="88" width="4" height="4" rx="0.8" opacity="0.7"/>
        <rect x="310" y="88" width="4" height="4" rx="0.8" opacity="0.7"/>
        <rect x="335" y="88" width="4" height="4" rx="0.8" opacity="0.7"/>

        <rect x="250" y="96" width="4" height="4" rx="0.8" opacity="0.7"/>
        <rect x="275" y="96" width="4" height="4" rx="0.8" opacity="0.7"/>
        <rect x="300" y="96" width="4" height="4" rx="0.8" opacity="0.7"/>
        <rect x="325" y="96" width="4" height="4" rx="0.8" opacity="0.7"/>
        <rect x="350" y="96" width="4" height="4" rx="0.8" opacity="0.7"/>

        
        <rect x="280" y="128" width="4" height="4" rx="0.8" opacity="0.7"/>
        <rect x="305" y="128" width="4" height="4" rx="0.8" opacity="0.7"/>
        <rect x="330" y="128" width="4" height="4" rx="0.8" opacity="0.7"/>
        <rect x="355" y="128" width="4" height="4" rx="0.8" opacity="0.7"/>
        <rect x="380" y="128" width="4" height="4" rx="0.8" opacity="0.7"/>

        <rect x="295" y="136" width="4" height="4" rx="0.8" opacity="0.7"/>
        <rect x="320" y="136" width="4" height="4" rx="0.8" opacity="0.7"/>
        <rect x="345" y="136" width="4" height="4" rx="0.8" opacity="0.7"/>
        <rect x="370" y="136" width="4" height="4" rx="0.8" opacity="0.7"/>
        <rect x="395" y="136" width="4" height="4" rx="0.8" opacity="0.7"/>

        <rect x="310" y="144" width="4" height="4" rx="0.8" opacity="0.7"/>
        <rect x="335" y="144" width="4" height="4" rx="0.8" opacity="0.7"/>
        <rect x="360" y="144" width="4" height="4" rx="0.8" opacity="0.7"/>
        <rect x="385" y="144" width="4" height="4" rx="0.8" opacity="0.7"/>
        <rect x="410" y="144" width="4" height="4" rx="0.8" opacity="0.7"/>
      </g>

      
      <g id="flowGraphic" style="display: none;">
        <path d="M 160,146 L 285,146" stroke="#2563eb" stroke-width="4" stroke-linecap="round" stroke-dasharray="6,4">
          <animate attributeName="stroke-dashoffset" from="20" to="0" dur="1s" repeatCount="indefinite"/>
        </path>
      </g>

      
      <g id="icGroup" style="transition: transform 0.4s ease, opacity 0.4s ease;">
        
        <path d="M 338,98 L 338,107 M 363,98 L 363,107 M 388,98 L 388,107 M 413,98 L 413,107" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round"/>
        
        <path d="M 324,124 L 324,132 M 349,124 L 349,132 M 374,124 L 374,132 M 399,124 L 399,132" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round"/>
        
        
        
        <polygon points="325,100 420,100 405,122 310,122" fill="url(#icBody)"/>
        
        <polygon points="310,122 405,122 405,129 310,129" fill="#0f172a"/>
        
        <polygon points="420,100 420,107 405,129 405,122" fill="#1e293b"/>
        
        <circle cx="323" cy="116" r="2.5" fill="#64748b"/>
        <text x="360" y="114" fill="#94a3b8" font-size="8" font-weight="700" text-anchor="middle" letter-spacing="1">DIP-8</text>
      </g>

      
      
      <g transform="translate(40, 240)">
        <line x1="160" y1="-85" x2="110" y2="0" stroke="#2563eb" stroke-width="1.5"/>
        <circle cx="160" cy="-85" r="3" fill="#2563eb"/>
        <rect x="0" y="-12" width="175" height="42" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" filter="url(#glow)"/>
        <text x="10" y="8" class="label-box">Terminal Strip</text>
        <text x="10" y="22" class="sub-label">5 electrically tied points</text>
      </g>

      
      <g transform="translate(320, 25)">
        <line x1="20" y1="85" x2="60" y2="28" stroke="#64748b" stroke-width="1.5"/>
        <circle cx="20" cy="85" r="3" fill="#64748b"/>
        <rect x="40" y="6" width="165" height="42" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1"/>
        <text x="50" y="26" class="label-box">Central Gutter</text>
        <text x="50" y="40" class="sub-label">0.3 in (7.62 mm) IC gap</text>
      </g>

      
      <g transform="translate(330, 250)">
        <line x1="-100" y1="-105" x2="-20" y2="0" stroke="#2563eb" stroke-width="1.5"/>
        <circle cx="-100" cy="-105" r="3" fill="#2563eb"/>
        <rect x="-20" y="-12" width="180" height="42" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1"/>
        <text x="-10" y="8" class="label-box">Spring Clip Contact</text>
        <text x="-10" y="22" class="sub-label">Internal metal grip rail</text>
      </g>
    </svg>
  </div>

  <script>
    function setMode(mode) {
      const btnCut = document.getElementById('btnCut');
      const btnFlow = document.getElementById('btnFlow');
      const btnChip = document.getElementById('btnChip');
      
      const cutaway = document.getElementById('cutawayLayer');
      const flow = document.getElementById('flowGraphic');
      const chip = document.getElementById('icGroup');
      const activeClip = document.getElementById('activeClip');

      btnCut.classList.remove('active');
      btnFlow.classList.remove('active');
      btnChip.classList.remove('active');

      if (mode === 'cut') {
        btnCut.classList.add('active');
        cutaway.style.opacity = '1';
        flow.style.display = 'none';
        chip.style.transform = 'translate(0, 0)';
        chip.style.opacity = '1';
        activeClip.setAttribute('filter', 'url(#glow)');
      } else if (mode === 'flow') {
        btnFlow.classList.add('active');
        cutaway.style.opacity = '1';
        flow.style.display = 'block';
        chip.style.transform = 'translate(0, -15px)';
        chip.style.opacity = '0.5';
        activeClip.setAttribute('filter', 'url(#glow)');
      } else if (mode === 'chip') {
        btnChip.classList.add('active');
        cutaway.style.opacity = '0.7';
        flow.style.display = 'none';
        chip.style.transform = 'translate(0, 0)';
        chip.style.opacity = '1';
        activeClip.removeAttribute('filter');
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 520px;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .controls {
      width: 100%;
      max-width: 520px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .slider-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .slider-label {
      font-size: 14px;
      font-weight: 600;
      color: #334155;
      white-space: nowrap;
    }
    input[type="range"] {
      flex: 1;
      accent-color: #2563eb;
      cursor: pointer;
      height: 6px;
    }
    .val-badge {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 14px;
      font-weight: 700;
      color: #2563eb;
      min-width: 65px;
      text-align: right;
    }
    .formula-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 13px;
      background: #eff6ff;
      border-radius: 8px;
      padding: 6px 10px;
      color: #1e40af;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      flex-wrap: wrap;
    }
    .highlight-out {
      font-weight: 700;
      color: #059669;
      background: #d1fae5;
      padding: 2px 6px;
      border-radius: 4px;
    }
    .wire { stroke: #475569; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .ic-box { fill: #f1f5f9; stroke: #334155; stroke-width: 2; rx: 8; }
    .resistor { fill: #ffffff; stroke: #2563eb; stroke-width: 2; rx: 3; }
    .resistor-pot { fill: #ffffff; stroke: #d97706; stroke-width: 2; rx: 3; }
    .node { fill: #1e293b; }
    .gnd-line { stroke: #1e293b; stroke-width: 2.5; stroke-linecap: round; }
    .badge-ref { fill: #ecfdf5; stroke: #059669; stroke-width: 1.5; rx: 4; }
  </style>
</head>
<body>

  <div class="diagram-wrap">
    <svg viewBox="0 0 520 285" aria-label="LM317 Schematic">
      
      <rect x="140" y="30" width="130" height="95" class="ic-box"/>
      <text x="205" y="52" text-anchor="middle" font-weight="700" font-size="14" fill="#0f172a">LM317</text>
      
      
      <text x="148" y="85" font-size="11" font-weight="600" fill="#64748b">3 IN</text>
      <text x="262" y="85" text-anchor="end" font-size="11" font-weight="600" fill="#64748b">OUT 2</text>
      <text x="205" y="116" text-anchor="middle" font-size="11" font-weight="600" fill="#64748b">1 ADJ</text>

      
      <path d="M 40 80 L 140 80" class="wire"/>
      <circle cx="40" cy="80" r="3.5" class="node"/>
      <text x="35" y="72" font-size="12" font-weight="700" fill="#334155">V_in</text>

      
      <path d="M 270 80 L 460 80" class="wire"/>
      <circle cx="460" cy="80" r="3.5" class="node"/>
      <text x="465" y="74" font-size="13" font-weight="700" fill="#059669">V_out</text>
      <text id="vOutSvg" x="465" y="94" font-size="14" font-weight="800" fill="#059669">5.0 V</text>

      
      <circle cx="350" cy="80" r="3.5" class="node"/>
      <path d="M 350 80 L 350 120" class="wire"/>

      
      <rect x="338" y="120" width="24" height="42" class="resistor"/>
      <text x="350" y="145" text-anchor="middle" font-size="11" font-weight="700" fill="#2563eb">R₁</text>
      <text x="316" y="145" text-anchor="end" font-size="11" font-weight="600" fill="#64748b">240 Ω</text>

      
      <path d="M 205 125 L 205 185 L 350 185" class="wire"/>
      <circle cx="350" cy="185" r="3.5" class="node"/>

      
      <path d="M 230 180 L 255 180" stroke="#d97706" stroke-width="2" marker-end="url(#arrow)" fill="none"/>
      <text x="242" y="174" text-anchor="middle" font-size="10" font-weight="700" fill="#d97706">I_adj ≈ 50µA</text>

      
      <path d="M 370 120 L 382 120 L 382 185 L 370 185" fill="none" stroke="#059669" stroke-width="1.5"/>
      <rect x="388" y="141" width="84" height="24" class="badge-ref"/>
      <text x="430" y="157" text-anchor="middle" font-size="11" font-weight="700" fill="#065f46">V_ref = 1.25 V</text>

      
      <path d="M 350 185 L 350 200" class="wire"/>
      <rect x="338" y="200" width="24" height="42" class="resistor-pot"/>
      <text x="350" y="225" text-anchor="middle" font-size="11" font-weight="700" fill="#d97706">R₂</text>
      
      <path d="M 326 232 L 368 210" stroke="#d97706" stroke-width="1.8" fill="none"/>
      <polygon points="368,206 372,214 363,212" fill="#d97706"/>

      
      <text id="r2Svg" x="316" y="225" text-anchor="end" font-size="11" font-weight="600" fill="#d97706">720 Ω</text>

      
      <path d="M 350 242 L 350 262" class="wire"/>
      
      
      <line x1="334" y1="262" x2="366" y2="262" class="gnd-line"/>
      <line x1="340" y1="267" x2="360" y2="267" class="gnd-line"/>
      <line x1="346" y1="272" x2="354" y2="272" class="gnd-line"/>

      
      <defs>
        <marker id="arrow" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
          <path d="M 0 0 L 6 3 L 0 6 z" fill="#d97706"/>
        </marker>
      </defs>
    </svg>
  </div>

  <div class="controls">
    <div class="slider-row">
      <span class="slider-label">R₂ (Adjust):</span>
      <input type="range" id="r2Range" min="0" max="2160" step="60" value="720">
      <span class="val-badge" id="r2Display">720 Ω</span>
    </div>
    <div class="formula-bar">
      <span>V_out = 1.25 × (1 + R₂/R₁)</span>
      <span>=</span>
      <span class="highlight-out" id="formulaOut">5.00 V</span>
    </div>
  </div>

  <script>
    const r2Range = document.getElementById('r2Range');
    const r2Display = document.getElementById('r2Display');
    const r2Svg = document.getElementById('r2Svg');
    const vOutSvg = document.getElementById('vOutSvg');
    const formulaOut = document.getElementById('formulaOut');

    const R1 = 240;
    const VREF = 1.25;
    const IADJ = 0.00005; // 50 uA

    function update() {
      const r2 = parseFloat(r2Range.value);
      const vout = VREF * (1 + (r2 / R1)) + (IADJ * r2);
      
      r2Display.textContent = r2 + ' Ω';
      r2Svg.textContent = r2 + ' Ω';
      vOutSvg.textContent = vout.toFixed(2) + ' V';
      formulaOut.textContent = vout.toFixed(2) + ' V';
    }

    r2Range.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Constructing and Testing Regulated DC Power Rail Circuits

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Load Regulation Testbench</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8fafc;
      color: #0f172a;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .header-title {
      font-size: 13px;
      font-weight: 700;
      color: #334155;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .bench-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 12px;
      align-items: start;
    }

    @media (max-width: 580px) {
      .bench-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
    }

    .diag-container {
      width: 100%;
      position: relative;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    /* Circuit schematic styles */
    .wire { stroke: #64748b; stroke-width: 2.2; fill: none; stroke-linecap: round; }
    .wire-active { stroke: #0284c7; stroke-width: 2.2; fill: none; }
    .wire-gnd { stroke: #475569; stroke-width: 2.2; fill: none; }
    .node-dot { fill: #0284c7; }
    .node-gnd { fill: #475569; }

    .meter-box {
      fill: #0f172a;
      stroke: #334155;
      stroke-width: 1.2;
      rx: 4;
    }
    .meter-title {
      font-size: 7.5px;
      font-weight: 700;
      fill: #94a3b8;
      text-anchor: middle;
      letter-spacing: 0.3px;
    }
    .meter-val {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 11px;
      font-weight: 700;
      fill: #38bdf8;
      text-anchor: middle;
    }

    /* Graph styles */
    .axis { stroke: #94a3b8; stroke-width: 1.5; }
    .grid-line { stroke: #e2e8f0; stroke-width: 1; stroke-dasharray: 2 2; }
    .axis-txt { font-size: 8.5px; fill: #64748b; font-weight: 600; }
    .reg-curve { stroke: #0284c7; stroke-width: 2.5; fill: none; }
    .marker-dot { fill: #ef4444; stroke: #ffffff; stroke-width: 2; }

    /* Interactive controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 4px 2px;
    }
    .controls label {
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      white-space: nowrap;
    }
    .slider-wrap {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    input[type=range] {
      flex: 1;
      accent-color: #0284c7;
      cursor: pointer;
      height: 6px;
    }
    .status-badge {
      font-size: 11px;
      font-family: ui-monospace, monospace;
      font-weight: 700;
      color: #0369a1;
      background: #e0f2fe;
      padding: 2px 8px;
      border-radius: 4px;
      white-space: nowrap;
    }
  </style>
</head>
<body>

  <div class="header-title">
    <span>LM7805 Load Regulation Testbench</span>
    <span style="font-size: 11px; font-weight: 600; color: #64748b;">ΔV_out = 50 mV (0–500 mA)</span>
  </div>

  <div class="bench-grid">
    
    <div class="diag-container">
      <svg viewBox="0 0 340 160">
        
        <path d="M 34 135 L 310 135" class="wire-gnd"/>

        
        <rect x="10" y="45" width="48" height="55" rx="4" fill="#e2e8f0" stroke="#94a3b8" stroke-width="1.5"/>
        <text x="34" y="68" font-size="10" font-weight="700" text-anchor="middle" fill="#0f172a">9V DC</text>
        <text x="34" y="82" font-size="8.5" text-anchor="middle" fill="#64748b">Source</text>
        
        <path d="M 58 65 L 82 65" class="wire-active"/>
        <path d="M 34 100 L 34 135" class="wire-gnd"/>
        <circle cx="34" cy="135" r="2.5" class="node-gnd"/>

        
        <rect x="82" y="45" width="58" height="42" rx="4" fill="#1e293b" stroke="#0f172a" stroke-width="1.5"/>
        <text x="111" y="64" font-size="9.5" font-weight="700" text-anchor="middle" fill="#f8fafc">LM7805</text>
        <text x="111" y="76" font-size="7.5" text-anchor="middle" fill="#94a3b8">REGULATOR</text>
        
        <path d="M 111 87 L 111 135" class="wire-gnd"/>
        <circle cx="111" cy="135" r="2.5" class="node-gnd"/>

        
        <path d="M 140 65 L 160 65" class="wire-active"/>

        
        <rect x="160" y="46" width="54" height="38" class="meter-box"/>
        <text x="187" y="59" class="meter-title">AMMETER</text>
        <text x="187" y="74" class="meter-val" id="disp-i">10 mA</text>

        
        <path d="M 214 65 L 310 65" class="wire-active"/>
        <circle cx="248" cy="65" r="2.5" class="node-dot"/>

        
        <path d="M 248 65 L 248 88" class="wire-active"/>
        <rect x="221" y="88" width="54" height="36" class="meter-box"/>
        <text x="248" y="100" class="meter-title">V_OUT (DMM)</text>
        <text x="248" y="115" class="meter-val" id="disp-v">5.02 V</text>
        <path d="M 248 124 L 248 135" class="wire-gnd"/>
        <circle cx="248" cy="135" r="2.5" class="node-gnd"/>

        
        <path d="M 310 65 L 310 74" class="wire-active"/>
        <rect x="303" y="74" width="14" height="36" rx="2" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
        <path d="M 310 110 L 310 135" class="wire-gnd"/>
        <circle cx="310" cy="135" r="2.5" class="node-gnd"/>

        
        <path d="M 296 102 L 324 80" stroke="#ef4444" stroke-width="2" stroke-linecap="round"/>
        <polygon points="326,78 320,81 324,87" fill="#ef4444"/>

        
        <text x="310" y="152" font-size="8.5" font-weight="700" text-anchor="middle" fill="#475569" id="disp-r">R_L: 502 Ω</text>
      </svg>
    </div>

    
    <div class="diag-container">
      <svg viewBox="0 0 280 160" id="graph-svg">
        
        <line x1="42" y1="20" x2="42" y2="128" class="axis"/>
        <line x1="42" y1="128" x2="265" y2="128" class="axis"/>

        
        
        <line x1="42" y1="26" x2="265" y2="26" class="grid-line"/>
        <text x="38" y="29" class="axis-txt" text-anchor="end">5.05</text>

        
        <line x1="42" y1="47" x2="265" y2="47" class="grid-line"/>
        <text x="38" y="50" class="axis-txt" text-anchor="end">5.02</text>

        
        <line x1="42" y1="82" x2="265" y2="82" class="grid-line"/>
        <text x="38" y="85" class="axis-txt" text-anchor="end">4.97</text>

        
        <text x="38" y="131" class="axis-txt" text-anchor="end">4.90</text>

        
        <text x="42" y="142" class="axis-txt" text-anchor="middle">0</text>
        <line x1="150" y1="128" x2="150" y2="132" class="axis"/>
        <text x="150" y="142" class="axis-txt" text-anchor="middle">250</text>
        <line x1="258" y1="128" x2="258" y2="132" class="axis"/>
        <text x="258" y="142" class="axis-txt" text-anchor="middle">500</text>

        
        <text x="150" y="155" font-size="9" font-weight="700" fill="#334155" text-anchor="middle">Load Current I_L (mA)</text>
        <text x="42" y="14" font-size="9" font-weight="700" fill="#334155" text-anchor="middle">V_OUT (V)</text>

        
        <line x1="42" y1="47" x2="258" y2="82" class="reg-curve"/>

        
        <line id="guide-x" x1="42" y1="47.7" x2="46.32" y2="47.7" stroke="#ef4444" stroke-width="1" stroke-dasharray="2 2" opacity="0.6"/>
        <line id="guide-y" x1="46.32" y1="47.7" x2="46.32" y2="128" stroke="#ef4444" stroke-width="1" stroke-dasharray="2 2" opacity="0.6"/>

        
        <circle id="plot-dot" cx="46.32" cy="47.7" r="4.5" class="marker-dot"/>
      </svg>
    </div>
  </div>

  
  <div class="controls">
    <label for="loadSlider">Adjust Rheostat (Load Current):</label>
    <div class="slider-wrap">
      <input type="range" id="loadSlider" min="10" max="500" value="10" step="5" aria-label="Load current slider">
      <span class="status-badge" id="badge-stat">I_L = 10 mA</span>
    </div>
  </div>

  <script>
    const slider = document.getElementById('loadSlider');
    const dispI = document.getElementById('disp-i');
    const dispV = document.getElementById('disp-v');
    const dispR = document.getElementById('disp-r');
    const badgeStat = document.getElementById('badge-stat');
    const plotDot = document.getElementById('plot-dot');
    const guideX = document.getElementById('guide-x');
    const guideY = document.getElementById('guide-y');

    function update() {
      const iLoad = parseFloat(slider.value); // 10 to 500 mA
      // Linear regulator load regulation: 5.02V @ 0mA dropping to 4.97V @ 500mA
      const vOut = 5.02 - (0.05 * (iLoad / 500));
      const rLoad = Math.round(vOut / (iLoad / 1000));

      dispI.textContent = iLoad + ' mA';
      dispV.textContent = vOut.toFixed(2) + ' V';
      dispR.textContent = 'R_L: ' + rLoad + ' Ω';
      badgeStat.textContent = 'I_L = ' + iLoad + ' mA';

      // Graph mapping:
      // X: 0 mA -> 42px, 500 mA -> 258px (dx = 216px)
      // Y: 5.02 V -> 47px, 4.97 V -> 82px (dy = 35px)
      const cx = 42 + (iLoad / 500) * 216;
      const cy = 47 + (iLoad / 500) * 35;

      plotDot.setAttribute('cx', cx);
      plotDot.setAttribute('cy', cy);

      guideX.setAttribute('x2', cx);
      guideX.setAttribute('y1', cy);
      guideX.setAttribute('y2', cy);

      guideY.setAttribute('x1', cx);
      guideY.setAttribute('x2', cx);
      guideY.setAttribute('y1', cy);
    }

    slider.addEventListener('input', update);
    update();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    body {
      background: #ffffff;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      min-height: 100%;
      user-select: none;
    }

    .main-container {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Top Section - Circuit Flow */
    .circuit-stage {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      padding: 10px 0 6px 0;
    }

    .node-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px 12px;
      border-radius: 8px;
      min-width: 105px;
      text-align: center;
    }

    .node-input {
      background: #f0f9ff;
      border: 1.5px solid #0284c7;
      color: #0369a1;
    }

    .node-output {
      background: #ecfdf5;
      border: 1.5px solid #10b981;
      color: #047857;
    }

    .node-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }

    .node-val {
      font-size: 15px;
      font-weight: 700;
    }

    .node-sub {
      font-size: 12px;
      font-weight: 600;
      opacity: 0.85;
    }

    /* Regulator Central Assembly */
    .regulator-assembly {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      width: 170px;
    }

    .drop-badge {
      background: #fef2f2;
      border: 1px solid #f87171;
      color: #b91c1c;
      font-size: 12px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 12px;
      margin-bottom: 6px;
      white-space: nowrap;
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    .heat-sink-wrap {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* Dynamic SVG Heat Waves */
    .heat-svg {
      width: 100px;
      height: 26px;
      overflow: visible;
      margin-bottom: -2px;
    }

    .heat-wave {
      fill: none;
      stroke-width: 2.5;
      stroke-linecap: round;
      transition: stroke 0.3s ease, opacity 0.3s ease;
    }

    /* Heatsink & IC Body */
    .heatsink {
      width: 86px;
      height: 48px;
      background: #64748b;
      border-radius: 4px;
      display: flex;
      justify-content: space-evenly;
      padding: 3px 2px;
      position: relative;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
      transition: background-color 0.3s ease, filter 0.3s ease;
    }

    .fin {
      width: 5px;
      height: 100%;
      background: #475569;
      border-radius: 2px;
    }

    .ic-package {
      position: absolute;
      bottom: -6px;
      width: 64px;
      height: 34px;
      background: #1e293b;
      border-radius: 3px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #f8fafc;
      box-shadow: 0 3px 6px rgba(0,0,0,0.25);
    }

    .ic-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.5px;
    }

    .ic-sub {
      font-size: 8px;
      color: #94a3b8;
    }

    /* Flow arrows */
    .flow-arrow {
      font-size: 18px;
      color: #94a3b8;
      font-weight: bold;
    }

    /* Middle Section - Power Split Bar */
    .power-section {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .split-bar-container {
      width: 100%;
      height: 38px;
      background: #e2e8f0;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    }

    .segment {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 13px;
      color: #ffffff;
      transition: width 0.2s ease, background-color 0.3s ease;
      overflow: hidden;
      white-space: nowrap;
    }

    .seg-heat {
      background: linear-gradient(90deg, #ea580c, #ef4444);
    }

    .seg-load {
      background: #10b981;
    }

    /* Legend / Math Details */
    .math-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      font-size: 12px;
    }

    .math-card {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
    }

    .swatch-box {
      width: 14px;
      height: 14px;
      border-radius: 3px;
      flex-shrink: 0;
    }

    .swatch-heat { background: #ef4444; }
    .swatch-load { background: #10b981; }

    .math-calc {
      font-weight: 600;
      color: #334155;
    }

    .math-calc span {
      font-weight: 800;
    }

    /* Efficiency summary badge */
    .eff-badge {
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      background: #f1f5f9;
      padding: 4px 8px;
      border-radius: 6px;
    }

    .eff-val {
      font-weight: 800;
    }

    /* Bottom Section - Slider */
    .slider-section {
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 14px;
    }

    .slider-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 700;
      color: #334155;
    }

    .slider-val {
      color: #0284c7;
      font-size: 15px;
    }

    input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 6px;
      background: #cbd5e1;
      border-radius: 3px;
      outline: none;
      cursor: pointer;
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #0284c7;
      border: 2px solid #ffffff;
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
      cursor: pointer;
      transition: background 0.15s ease;
    }

    input[type="range"]::-webkit-slider-thumb:hover {
      background: #0369a1;
    }

    input[type="range"]::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #0284c7;
      border: 2px solid #ffffff;
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
      cursor: pointer;
    }

    .scale-ticks {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: #64748b;
      font-weight: 600;
      padding: 0 2px;
    }
  </style>
</head>
<body>
  <div class="main-container">
    
    <div class="circuit-stage">
      <div class="node-box node-input">
        <div class="node-title">Input Rail</div>
        <div class="node-val" id="dispVin">12.0 V</div>
        <div class="node-sub">I = 1.0 A</div>
      </div>

      <div class="flow-arrow">→</div>

      <div class="regulator-assembly">
        <div class="drop-badge" id="dispVdrop">ΔV = 7.0 V</div>
        <div class="heat-sink-wrap">
          <svg class="heat-svg" viewBox="0 0 100 24">
            <path class="heat-wave wave-1" d="M 22 22 Q 17 12 22 2" stroke="#ef4444" opacity="0.8" />
            <path class="heat-wave wave-2" d="M 40 22 Q 35 12 40 2" stroke="#ef4444" opacity="0.9" />
            <path class="heat-wave wave-3" d="M 50 22 Q 55 12 50 2" stroke="#ef4444" opacity="1.0" />
            <path class="heat-wave wave-4" d="M 60 22 Q 65 12 60 2" stroke="#ef4444" opacity="0.9" />
            <path class="heat-wave wave-5" d="M 78 22 Q 83 12 78 2" stroke="#ef4444" opacity="0.8" />
          </svg>
          <div class="heatsink" id="heatsinkEl">
            <div class="fin"></div>
            <div class="fin"></div>
            <div class="fin"></div>
            <div class="fin"></div>
            <div class="fin"></div>
            <div class="fin"></div>
            <div class="fin"></div>
            <div class="ic-package">
              <span class="ic-label">LM7805</span>
              <span class="ic-sub">Regulator</span>
            </div>
          </div>
        </div>
      </div>

      <div class="flow-arrow">→</div>

      <div class="node-box node-output">
        <div class="node-title">Regulated Load</div>
        <div class="node-val">5.0 V</div>
        <div class="node-sub">I = 1.0 A (5 Ω)</div>
      </div>
    </div>

    
    <div class="power-section">
      <div class="split-bar-container">
        <div class="segment seg-heat" id="barHeat" style="width: 58.3%;">
          <span id="barHeatText">Heat: 7.0 W</span>
        </div>
        <div class="segment seg-load" id="barLoad" style="width: 41.7%;">
          <span id="barLoadText">Load: 5.0 W</span>
        </div>
      </div>

      <div class="math-grid">
        <div class="math-card">
          <div class="swatch-box swatch-heat"></div>
          <div class="math-calc" id="mathHeat">Wasted Heat: <span>7.0 V × 1 A = 7.0 W</span></div>
        </div>
        <div class="math-card">
          <div class="swatch-box swatch-load"></div>
          <div class="math-calc" id="mathLoad">Useful Power: <span>5.0 V × 1 A = 5.0 W</span></div>
        </div>
      </div>

      <div class="eff-badge">
        Efficiency (<span style="font-family: serif; font-style: italic;">η</span> = P<sub>load</sub> / P<sub>in</sub>): 
        <span class="eff-val" id="effText" style="color: #059669;">41.7%</span>
        (<span id="totalPowerText">Total Pin = 12.0 W</span>)
      </div>
    </div>

    
    <div class="slider-section">
      <div class="slider-header">
        <span>Input Voltage (V<sub>in</sub>)</span>
        <span class="slider-val" id="sliderValDisplay">12.0 V</span>
      </div>
      <input type="range" id="vinSlider" min="7" max="15" step="0.5" value="12">
      <div class="scale-ticks">
        <span>7 V (Min Dropout)</span>
        <span>10 V</span>
        <span>12 V (Nominal)</span>
        <span>15 V (Max)</span>
      </div>
    </div>
  </div>

  <script>
    const slider = document.getElementById('vinSlider');
    const dispVin = document.getElementById('dispVin');
    const sliderValDisplay = document.getElementById('sliderValDisplay');
    const dispVdrop = document.getElementById('dispVdrop');
    const barHeat = document.getElementById('barHeat');
    const barLoad = document.getElementById('barLoad');
    const barHeatText = document.getElementById('barHeatText');
    const barLoadText = document.getElementById('barLoadText');
    const mathHeat = document.getElementById('mathHeat');
    const effText = document.getElementById('effText');
    const totalPowerText = document.getElementById('totalPowerText');
    const heatsinkEl = document.getElementById('heatsinkEl');
    const heatWaves = document.querySelectorAll('.heat-wave');

    const V_OUT = 5.0;
    const I_LOAD = 1.0;
    const P_LOAD = V_OUT * I_LOAD; // constant 5.0 W

    function update() {
      const vIn = parseFloat(slider.value);
      const vDrop = vIn - V_OUT;
      const pHeat = vDrop * I_LOAD;
      const pTotal = vIn * I_LOAD;
      const eff = (P_LOAD / pTotal) * 100;
      const heatPercent = (pHeat / pTotal) * 100;
      const loadPercent = (P_LOAD / pTotal) * 100;

      // Update numeric texts
      dispVin.textContent = vIn.toFixed(1) + " V";
      sliderValDisplay.textContent = vIn.toFixed(1) + " V";
      dispVdrop.textContent = "ΔV = " + vDrop.toFixed(1) + " V";

      // Split bar widths
      barHeat.style.width = heatPercent + "%";
      barLoad.style.width = loadPercent + "%";

      barHeatText.textContent = heatPercent > 18 ? "Heat: " + pHeat.toFixed(1) + " W" : pHeat.toFixed(1) + "W";
      barLoadText.textContent = loadPercent > 18 ? "Load: " + P_LOAD.toFixed(1) + " W" : P_LOAD.toFixed(1) + "W";

      mathHeat.innerHTML = "Wasted Heat: <span>" + vDrop.toFixed(1) + " V × 1 A = " + pHeat.toFixed(1) + " W</span>";
      effText.textContent = eff.toFixed(1) + "%";
      effText.style.color = eff >= 55 ? "#059669" : (eff >= 40 ? "#d97706" : "#dc2626");
      totalPowerText.textContent = "Total Pin = " + pTotal.toFixed(1) + " W";

      // Thermal visual scaling
      // Heat power ranges from 2.0W (at 7V) to 10.0W (at 15V)
      const heatFactor = (pHeat - 2.0) / 8.0; // 0.0 to 1.0
      
      // Heatsink subtle glow / warmth
      const r = Math.round(100 + heatFactor * 130);
      const g = Math.round(116 - heatFactor * 60);
      const b = Math.round(139 - heatFactor * 80);
      heatsinkEl.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
      heatsinkEl.style.filter = `drop-shadow(0 0 ${2 + heatFactor * 8}px rgba(239, 68, 68, ${0.2 + heatFactor * 0.6}))`;

      // Heat waves stroke & opacity
      heatWaves.forEach((wave, idx) => {
        const baseOpacity = 0.2 + heatFactor * 0.8;
        const waveColor = heatFactor < 0.3 ? '#f59e0b' : (heatFactor < 0.7 ? '#ea580c' : '#dc2626');
        wave.setAttribute('stroke', waveColor);
        wave.setAttribute('opacity', baseOpacity.toFixed(2));
        wave.setAttribute('stroke-width', (1.8 + heatFactor * 1.6).toFixed(1));
      });
    }

    slider.addEventListener('input', update);
    update();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .schematic-container {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    /* Controls & Readouts */
    .controls-panel {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 12px;
      background: #f1f5f9;
      padding: 10px 14px;
      border-radius: 8px;
    }

    .meter-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .meter-title {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .val-display {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 18px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 6px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      min-width: 84px;
      text-align: center;
      transition: color 0.3s ease, border-color 0.3s ease;
    }

    .input-color { color: #dc2626; }
    .output-color { color: #16a34a; }
    .dropout-color { color: #ea580c; }

    .slider-row {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 10px;
      padding-top: 2px;
    }

    .slider-label {
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      white-space: nowrap;
    }

    input[type="range"] {
      flex: 1;
      height: 6px;
      accent-color: #dc2626;
      cursor: pointer;
    }

    .drop-btn {
      grid-column: 1 / -1;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      font-size: 12px;
      font-weight: 600;
      padding: 8px 12px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }

    .drop-btn:active {
      background-color: #e2e8f0;
    }

    .legend {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px 18px;
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      padding-top: 2px;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 2px;
      flex-shrink: 0;
    }

    #vout-text {
      transition: fill 0.3s ease;
    }
  </style>
</head>
<body>

  <div class="schematic-container">
    <svg viewBox="0 0 540 250" aria-label="LM7805 Voltage Regulator Circuit Schematic">
      <defs>
        
        <g id="gnd-symbol">
          <line x1="-12" y1="0" x2="12" y2="0" stroke="#1e2945" stroke-width="2.5" stroke-linecap="round"/>
          <line x1="-8" y1="5" x2="8" y2="5" stroke="#1e2945" stroke-width="2" stroke-linecap="round"/>
          <line x1="-4" y1="10" x2="4" y2="10" stroke="#1e2945" stroke-width="1.5" stroke-linecap="round"/>
        </g>

        
        <g id="cap-symbol">
          <line x1="0" y1="-25" x2="0" y2="-6" stroke="#1e2945" stroke-width="2" stroke-linecap="round"/>
          <line x1="-10" y1="-6" x2="10" y2="-6" stroke="#1e2945" stroke-width="2.5" stroke-linecap="round"/>
          <line x1="-10" y1="6" x2="10" y2="6" stroke="#1e2945" stroke-width="2.5" stroke-linecap="round"/>
          <line x1="0" y1="6" x2="0" y2="25" stroke="#1e2945" stroke-width="2" stroke-linecap="round"/>
        </g>

        
        <g id="res-symbol">
          <line x1="0" y1="-25" x2="0" y2="-18" stroke="#1e2945" stroke-width="2"/>
          <rect x="-8" y="-18" width="16" height="36" fill="#f8fafc" stroke="#1e2945" stroke-width="2" rx="1"/>
          <line x1="0" y1="18" x2="0" y2="25" stroke="#1e2945" stroke-width="2"/>
        </g>
      </defs>

      
      <line x1="40" y1="205" x2="500" y2="205" stroke="#1e2945" stroke-width="2.5" stroke-linecap="round"/>
      <use href="#gnd-symbol" x="270" y="205"/>
      <text x="270" y="235" font-size="11" font-weight="700" fill="#1e2945" text-anchor="middle">GND (0 V)</text>

      
      <line x1="40" y1="68" x2="200" y2="68" stroke="#dc2626" stroke-width="3" stroke-linecap="round"/>
      
      <circle cx="40" cy="68" r="4" fill="#ffffff" stroke="#dc2626" stroke-width="2.5"/>
      <circle cx="40" cy="205" r="4" fill="#ffffff" stroke="#1e2945" stroke-width="2.5"/>
      <text x="40" y="44" font-size="11" font-weight="700" fill="#dc2626" text-anchor="middle">V_IN</text>
      <text x="40" y="58" font-size="10" font-weight="600" fill="#dc2626" text-anchor="middle" id="vin-text">9.0 V</text>

      
      <rect x="200" y="38" width="140" height="92" fill="#ffffff" stroke="#1e2945" stroke-width="2" rx="6"/>
      
      
      <text x="270" y="78" font-size="15" font-weight="800" fill="#1e2945" text-anchor="middle" letter-spacing="0.5">LM7805</text>
      <text x="270" y="94" font-size="9.5" font-weight="600" fill="#64748b" text-anchor="middle">+5V REGULATOR</text>

      
      <text x="206" y="64" font-size="10" font-weight="700" fill="#dc2626" text-anchor="start">1: IN</text>

      
      <text x="334" y="64" font-size="10" font-weight="700" fill="#16a34a" text-anchor="end">3: OUT</text>

      
      <line x1="270" y1="130" x2="270" y2="205" stroke="#1e2945" stroke-width="2.5"/>
      <text x="270" y="122" font-size="10" font-weight="700" fill="#1e2945" text-anchor="middle">2: GND</text>

      
      <line x1="340" y1="68" x2="500" y2="68" stroke="#16a34a" stroke-width="3" stroke-linecap="round"/>
      <circle cx="500" cy="68" r="4" fill="#ffffff" stroke="#16a34a" stroke-width="2.5"/>
      <circle cx="500" cy="205" r="4" fill="#ffffff" stroke="#1e2945" stroke-width="2.5"/>
      <text x="500" y="44" font-size="11" font-weight="700" fill="#16a34a" text-anchor="middle">V_OUT</text>
      <text x="500" y="58" font-size="10" font-weight="600" fill="#16a34a" text-anchor="middle" id="vout-text">5.0 V</text>

      
      <line x1="120" y1="68" x2="120" y2="112" stroke="#dc2626" stroke-width="2"/>
      <use href="#cap-symbol" x="120" y="137"/>
      <line x1="120" y1="162" x2="120" y2="205" stroke="#1e2945" stroke-width="2"/>
      
      <circle cx="120" cy="68" r="3.5" fill="#dc2626"/>
      <circle cx="120" cy="205" r="3.5" fill="#1e2945"/>
      <text x="106" y="135" font-size="11" font-weight="700" fill="#1e2945" text-anchor="end">C1</text>
      <text x="106" y="149" font-size="10" font-weight="600" fill="#64748b" text-anchor="end">0.33 µF</text>

      
      <line x1="390" y1="68" x2="390" y2="112" stroke="#16a34a" stroke-width="2"/>
      <use href="#cap-symbol" x="390" y="137"/>
      <line x1="390" y1="162" x2="390" y2="205" stroke="#1e2945" stroke-width="2"/>
      
      <circle cx="390" cy="68" r="3.5" fill="#16a34a"/>
      <circle cx="390" cy="205" r="3.5" fill="#1e2945"/>
      <text x="376" y="135" font-size="11" font-weight="700" fill="#1e2945" text-anchor="end">C2</text>
      <text x="376" y="149" font-size="10" font-weight="600" fill="#64748b" text-anchor="end">0.1 µF</text>

      
      <line x1="460" y1="68" x2="460" y2="112" stroke="#16a34a" stroke-width="2"/>
      <use href="#res-symbol" x="460" y="137"/>
      <line x1="460" y1="162" x2="460" y2="205" stroke="#1e2945" stroke-width="2"/>
      
      <circle cx="460" cy="68" r="3.5" fill="#16a34a"/>
      <circle cx="460" cy="205" r="3.5" fill="#1e2945"/>
      <text x="474" y="135" font-size="11" font-weight="700" fill="#1e2945" text-anchor="start">R_L</text>
      <text x="474" y="149" font-size="10" font-weight="600" fill="#64748b" text-anchor="start">Load</text>
    </svg>

    
    <div class="controls-panel">
      <div class="meter-box">
        <span class="meter-title input-color">Input Voltage</span>
        <div class="val-display input-color" id="vin-meter">9.0 V</div>
      </div>
      <div class="meter-box">
        <span class="meter-title output-color" id="vout-label">Regulated Output</span>
        <div class="val-display output-color" id="vout-meter">5.0 V</div>
      </div>

      <div class="slider-row">
        <span class="slider-label">6.0 V</span>
        <input type="range" id="vin-slider" min="6.0" max="15.0" step="0.1" value="9.0" aria-label="Adjust Input Voltage">
        <span class="slider-label">15.0 V</span>
      </div>

      <button class="drop-btn" id="motor-drop-btn">
        <span>⚡ Simulate Motor Load Dip (9.0V → 6.5V)</span>
      </button>
    </div>

    <div class="legend">
      <div class="legend-item"><div class="legend-dot" style="background:#dc2626;"></div> Unregulated Rail</div>
      <div class="legend-item"><div class="legend-dot" style="background:#16a34a;"></div> Regulated Rail (+5V)</div>
      <div class="legend-item"><div class="legend-dot" style="background:#1e2945;"></div> Common Ground</div>
    </div>
  </div>

  <script>
    const vinSlider = document.getElementById('vin-slider');
    const vinMeter = document.getElementById('vin-meter');
    const voutMeter = document.getElementById('vout-meter');
    const voutLabel = document.getElementById('vout-label');
    const vinText = document.getElementById('vin-text');
    const voutText = document.getElementById('vout-text');
    const motorBtn = document.getElementById('motor-drop-btn');

    // LM7805 typical dropout voltage is ~2.0V (needs >= 7.0V for steady 5.0V output)
    function calculateVout(vin) {
      if (vin >= 7.0) {
        return 5.0;
      } else {
        return Math.max(0, vin - 2.0);
      }
    }

    function updateCircuit(vin) {
      const vout = calculateVout(vin);
      const vinStr = vin.toFixed(1) + ' V';
      const voutStr = vout.toFixed(1) + ' V';

      vinMeter.textContent = vinStr;
      vinText.textContent = vinStr;
      voutMeter.textContent = voutStr;
      voutText.textContent = voutStr;

      if (vout < 5.0) {
        voutMeter.style.color = '#ea580c';
        voutLabel.style.color = '#ea580c';
        voutText.setAttribute('fill', '#ea580c');
      } else {
        voutMeter.style.color = '#16a34a';
        voutLabel.style.color = '#16a34a';
        voutText.setAttribute('fill', '#16a34a');
      }
    }

    vinSlider.addEventListener('input', (e) => {
      updateCircuit(parseFloat(e.target.value));
    });

    let animating = false;
    motorBtn.addEventListener('click', () => {
      if (animating) return;
      animating = true;
      motorBtn.style.opacity = '0.6';

      const sequence = [9.0, 8.2, 7.4, 6.7, 6.5, 6.5, 6.8, 7.5, 8.3, 9.0];
      let step = 0;

      const timer = setInterval(() => {
        vinSlider.value = sequence[step];
        updateCircuit(sequence[step]);
        step++;
        if (step >= sequence.length) {
          clearInterval(timer);
          animating = false;
          motorBtn.style.opacity = '1';
        }
      }, 300);
    });

    // Initialize display
    updateCircuit(9.0);
  </script>
</body>
</html>

ELEC-1.1

Aligned learning resources

Related diagrams