<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Data Unit Conversion Ladder</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #0f172a;
      background: #ffffff;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .container {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .header-title {
      font-size: 14px;
      font-weight: 700;
      color: #334155;
      text-align: center;
      letter-spacing: -0.01em;
    }

    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      margin-bottom: 2px;
    }

    .toggle-btn {
      flex: 1;
      border: 1.5px solid #cbd5e1;
      background: #f8fafc;
      color: #475569;
      padding: 7px 8px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .toggle-btn.active-up {
      background: #eff6ff;
      color: #1d4ed8;
      border-color: #3b82f6;
    }

    .toggle-btn.active-down {
      background: #f0fdf4;
      color: #15803d;
      border-color: #22c55e;
    }

    .ladder-grid {
      display: grid;
      grid-template-columns: 82px 1fr 82px;
      gap: 2px 8px;
      width: 100%;
      align-items: center;
    }

    /* Rung Rows */
    .rung {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 7px;
      padding: 6px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
      min-height: 38px;
    }

    .rung:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }

    .rung.active {
      border-color: #0284c7;
      background: #f0f9ff;
      box-shadow: 0 0 0 1.5px #0284c7;
    }

    .unit-name {
      font-weight: 700;
      font-size: 13px;
      color: #0f172a;
      display: flex;
      align-items: baseline;
      gap: 4px;
    }

    .unit-symbol {
      color: #64748b;
      font-size: 11.5px;
      font-weight: 600;
    }

    .unit-val {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 11.5px;
      font-weight: 700;
      color: #334155;
      background: #ffffff;
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px solid #cbd5e1;
      white-space: nowrap;
    }

    .special-rung {
      background: #faf5ff;
      border-color: #e9d5ff;
    }
    
    .special-rung:hover {
      background: #f3e8ff;
      border-color: #d8b4fe;
    }

    .special-rung.active {
      border-color: #9333ea;
      background: #fdf4ff;
      box-shadow: 0 0 0 1.5px #9333ea;
    }

    .special-rung .unit-val {
      border-color: #d8b4fe;
      color: #6b21a8;
    }

    /* Transition Inter-Rung Rows */
    .transition-row {
      display: contents;
    }

    .badge-cell {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1px 0;
    }

    .spine-cell {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 18px;
    }

    .spine-line {
      width: 2px;
      height: 100%;
      background: #cbd5e1;
      border-radius: 1px;
    }

    /* High contrast badges */
    .badge {
      font-size: 10.5px;
      font-weight: 700;
      border-radius: 5px;
      padding: 2px 5px;
      text-align: center;
      white-space: nowrap;
      transition: opacity 0.2s ease, filter 0.2s ease;
      width: 100%;
      box-sizing: border-box;
    }

    .badge-up {
      color: #1e40af;
      background: #dbeafe;
      border: 1px solid #93c5fd;
    }

    .badge-down {
      color: #14532d;
      background: #dcfce7;
      border: 1px solid #86efac;
    }

    .badge-up-special {
      color: #6b21a8;
      background: #f3e8ff;
      border: 1px solid #d8b4fe;
    }

    .badge-down-special {
      color: #6b21a8;
      background: #f3e8ff;
      border: 1px solid #d8b4fe;
    }

    .dimmed {
      opacity: 0.22;
      filter: grayscale(60%);
    }

    .highlight {
      opacity: 1;
      filter: none;
    }

    /* Info Bar at Bottom */
    .info-box {
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 7px;
      padding: 6px 10px;
      font-size: 11.5px;
      color: #334155;
      text-align: center;
      line-height: 1.4;
    }

    .info-box strong {
      color: #0f172a;
    }

    @media (max-width: 380px) {
      .ladder-grid {
        grid-template-columns: 74px 1fr 74px;
        gap: 2px 4px;
      }
      .badge {
        font-size: 9.5px;
        padding: 2px 3px;
      }
      .unit-name {
        font-size: 12px;
      }
      .unit-val {
        font-size: 10.5px;
        padding: 1px 4px;
      }
      .toggle-btn {
        font-size: 11px;
        padding: 6px 4px;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="header-title">Data Storage Unit Hierarchy</div>

    
    <div class="controls">
      <button class="toggle-btn active-up" id="btnUp" onclick="setMode('up')">
        <span>↑</span>
        <span>Convert Up (÷)</span>
      </button>
      <button class="toggle-btn" id="btnDown" onclick="setMode('down')">
        <span>↓</span>
        <span>Convert Down (×)</span>
      </button>
    </div>

    
    <div class="ladder-grid">
      
      
      <div></div>
      <div class="rung" onclick="selectRung(5)" id="rung-5">
        <div class="unit-name">Terabyte <span class="unit-symbol">TB</span></div>
        <div class="unit-val">10<sup>12</sup> B</div>
      </div>
      <div></div>

      
      <div class="badge-cell">
        <div class="badge badge-up" id="up-tb">÷ 1,000 ↑</div>
      </div>
      <div class="spine-cell"><div class="spine-line"></div></div>
      <div class="badge-cell">
        <div class="badge badge-down dimmed" id="down-tb">↓ × 1,000</div>
      </div>

      
      <div></div>
      <div class="rung" onclick="selectRung(4)" id="rung-4">
        <div class="unit-name">Gigabyte <span class="unit-symbol">GB</span></div>
        <div class="unit-val">10<sup>9</sup> B</div>
      </div>
      <div></div>

      
      <div class="badge-cell">
        <div class="badge badge-up" id="up-gb">÷ 1,000 ↑</div>
      </div>
      <div class="spine-cell"><div class="spine-line"></div></div>
      <div class="badge-cell">
        <div class="badge badge-down dimmed" id="down-gb">↓ × 1,000</div>
      </div>

      
      <div></div>
      <div class="rung" onclick="selectRung(3)" id="rung-3">
        <div class="unit-name">Megabyte <span class="unit-symbol">MB</span></div>
        <div class="unit-val">10<sup>6</sup> B</div>
      </div>
      <div></div>

      
      <div class="badge-cell">
        <div class="badge badge-up" id="up-mb">÷ 1,000 ↑</div>
      </div>
      <div class="spine-cell"><div class="spine-line"></div></div>
      <div class="badge-cell">
        <div class="badge badge-down dimmed" id="down-mb">↓ × 1,000</div>
      </div>

      
      <div></div>
      <div class="rung" onclick="selectRung(2)" id="rung-2">
        <div class="unit-name">Kilobyte <span class="unit-symbol">KB</span></div>
        <div class="unit-val">10<sup>3</sup> B</div>
      </div>
      <div></div>

      
      <div class="badge-cell">
        <div class="badge badge-up" id="up-kb">÷ 1,000 ↑</div>
      </div>
      <div class="spine-cell"><div class="spine-line"></div></div>
      <div class="badge-cell">
        <div class="badge badge-down dimmed" id="down-kb">↓ × 1,000</div>
      </div>

      
      <div></div>
      <div class="rung" onclick="selectRung(1)" id="rung-1">
        <div class="unit-name">Byte <span class="unit-symbol">B</span></div>
        <div class="unit-val">8 bits</div>
      </div>
      <div></div>

      
      <div class="badge-cell">
        <div class="badge badge-up-special" id="up-b">÷ 8 ↑</div>
      </div>
      <div class="spine-cell"><div class="spine-line"></div></div>
      <div class="badge-cell">
        <div class="badge badge-down-special dimmed" id="down-b">↓ × 8</div>
      </div>

      
      <div></div>
      <div class="rung special-rung" onclick="selectRung(0)" id="rung-0">
        <div class="unit-name">Bit <span class="unit-symbol">b</span></div>
        <div class="unit-val">0 or 1</div>
      </div>
      <div></div>

    </div>

    
    <div class="info-box" id="infoBox">
      Click a unit or conversion mode above to explore data size steps.
    </div>
  </div>

  <script>
    let currentMode = 'up';
    const unitDetails = [
      "<strong>Bit (b):</strong> The fundamental binary unit (0 or 1). 8 bits = 1 Byte.",
      "<strong>Byte (B):</strong> 8 bits. Standard unit for encoding a single ASCII character.",
      "<strong>Kilobyte (KB):</strong> 1,000 Bytes (10³ B) = 1 KB. (e.g., small text files)",
      "<strong>Megabyte (MB):</strong> 1,000 KB (10⁶ B) = 1 MB. (e.g., MP3 audio tracks)",
      "<strong>Gigabyte (GB):</strong> 1,000 MB (10⁹ B) = 1 GB. (e.g., HD movie file)",
      "<strong>Terabyte (TB):</strong> 1,000 GB (10¹² B) = 1 TB. (e.g., large backup drives)"
    ];

    function setMode(mode) {
      currentMode = mode;
      const btnUp = document.getElementById('btnUp');
      const btnDown = document.getElementById('btnDown');
      const upArrows = document.querySelectorAll('.badge-up, .badge-up-special');
      const downArrows = document.querySelectorAll('.badge-down, .badge-down-special');

      if (mode === 'up') {
        btnUp.className = 'toggle-btn active-up';
        btnDown.className = 'toggle-btn';
        upArrows.forEach(el => { el.classList.remove('dimmed'); el.classList.add('highlight'); });
        downArrows.forEach(el => { el.classList.add('dimmed'); el.classList.remove('highlight'); });
      } else {
        btnDown.className = 'toggle-btn active-down';
        btnUp.className = 'toggle-btn';
        downArrows.forEach(el => { el.classList.remove('dimmed'); el.classList.add('highlight'); });
        upArrows.forEach(el => { el.classList.add('dimmed'); el.classList.remove('highlight'); });
      }
    }

    function selectRung(index) {
      for (let i = 0; i <= 5; i++) {
        const rung = document.getElementById('rung-' + i);
        if (i === index) {
          rung.classList.add('active');
        } else {
          rung.classList.remove('active');
        }
      }
      const infoBox = document.getElementById('infoBox');
      infoBox.innerHTML = unitDetails[index];
    }

    // Initialize default mode
    setMode('up');
  </script>
</body>
</html>

Units of Storage: From Bits to Terabytes

<!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;
      color: #1e2945;
      background: #ffffff;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .diagram {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* Mode switcher */
    .mode-bar {
      display: flex;
      justify-content: center;
      gap: 8px;
    }

    .mode-btn {
      appearance: none;
      border: 1px solid #d1d5db;
      background: #f8fafc;
      color: #4b5563;
      padding: 8px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .mode-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
    }

    /* Unit Ladder Flow */
    .flow-container {
      position: relative;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 18px 10px;
    }

    /* Direction label banners */
    .rule-banner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 12px;
      transition: all 0.25s ease;
    }

    .banner-mult {
      background: #ecfdf5;
      color: #065f46;
      border: 1px solid #a7f3d0;
    }

    .banner-div {
      background: #eff6ff;
      color: #1e40af;
      border: 1px solid #bfdbfe;
    }

    /* Unit nodes row */
    .units-row {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      align-items: center;
      position: relative;
      gap: 4px;
    }

    .unit-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px 4px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      font-weight: 700;
      font-size: 14px;
      color: #1e2945;
      text-align: center;
      min-height: 52px;
      transition: all 0.25s ease;
    }

    .unit-node .sub {
      font-size: 10px;
      font-weight: 500;
      color: #64748b;
      margin-top: 2px;
    }

    .unit-node.highlight {
      border-color: #0284c7;
      background: #f0f9ff;
      color: #0284c7;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.15);
    }

    .unit-node.special-byte {
      border-color: #f59e0b;
      background: #fffbeb;
    }

    .unit-node.special-bit {
      border-color: #f59e0b;
      background: #fffbeb;
    }

    /* Arrows display between nodes */
    .arrows-row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      padding: 8px 24px;
      gap: 8px;
    }

    .arrow-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      text-align: center;
    }

    .op-tag {
      padding: 3px 6px;
      border-radius: 6px;
      font-size: 11px;
      white-space: nowrap;
      transition: all 0.2s ease;
    }

    .op-mult {
      background: #d1fae5;
      color: #047857;
    }

    .op-div {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .op-special-mult {
      background: #fef3c7;
      color: #b45309;
      box-shadow: 0 0 0 1px #fcd34d;
    }

    .op-special-div {
      background: #fef3c7;
      color: #b45309;
      box-shadow: 0 0 0 1px #fcd34d;
    }

    .arrow-sym {
      font-size: 16px;
      line-height: 1;
      margin: 2px 0;
      color: #64748b;
    }

    /* Special callout card */
    .special-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fffbeb;
      border: 1.5px solid #fde68a;
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 12px;
      font-weight: 600;
      color: #92400e;
    }

    .special-badge {
      background: #f59e0b;
      color: #ffffff;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .special-ops {
      display: flex;
      gap: 12px;
      align-items: center;
      font-size: 12px;
    }

    .special-ops span {
      background: #ffffff;
      border: 1px solid #fcd34d;
      padding: 4px 8px;
      border-radius: 6px;
      font-weight: 700;
    }

    /* Live Mini Example */
    .example-strip {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
    }

    .example-title {
      font-weight: 600;
      color: #64748b;
      font-size: 12px;
    }

    .example-math {
      font-weight: 700;
      color: #0f172a;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }

    @media (max-width: 420px) {
      .unit-node { font-size: 12px; padding: 6px 2px; min-height: 46px; }
      .unit-node .sub { font-size: 9px; }
      .arrow-col { font-size: 10px; }
      .op-tag { font-size: 9px; padding: 2px 4px; }
      .special-box { flex-direction: column; gap: 6px; align-items: flex-start; }
      .special-ops { width: 100%; justify-content: space-between; }
    }
  </style>
</head>
<body>

<div class="diagram">

  
  <div class="mode-bar">
    <button class="mode-btn active" id="btnDown" onclick="setMode('down')">
      <span>Large → Small</span>
      <strong>(× MULTIPLY)</strong>
    </button>
    <button class="mode-btn" id="btnUp" onclick="setMode('up')">
      <span>Small → Large</span>
      <strong>(÷ DIVIDE)</strong>
    </button>
  </div>

  
  <div class="flow-container">
    <div id="ruleBanner" class="rule-banner banner-mult">
      <span>Large Unit → Small Unit:</span>
      <span>MULTIPLY (× 1,000)</span>
    </div>

    
    <div class="units-row">
      <div class="unit-node" id="nodeTB">TB<div class="sub">Terabyte</div></div>
      <div class="unit-node" id="nodeGB">GB<div class="sub">Gigabyte</div></div>
      <div class="unit-node" id="nodeMB">MB<div class="sub">Megabyte</div></div>
      <div class="unit-node" id="nodeKB">KB<div class="sub">Kilobyte</div></div>
      <div class="unit-node special-byte" id="nodeB">Byte<div class="sub">8 bits</div></div>
      <div class="unit-node special-bit" id="nodeBit">bit<div class="sub">0 or 1</div></div>
    </div>

    
    <div class="arrows-row" id="arrowsRow">
      
    </div>
  </div>

  
  <div class="special-box">
    <div style="display: flex; align-items: center; gap: 8px;">
      <span class="special-badge">Special Rule</span>
      <span>Bytes ⇄ Bits: factor of 8</span>
    </div>
    <div class="special-ops">
      <span>Byte → bit: × 8</span>
      <span>bit → Byte: ÷ 8</span>
    </div>
  </div>

  
  <div class="example-strip">
    <span class="example-title" id="exLabel">Worked Example:</span>
    <span class="example-math" id="exMath">2 GB × 1,000 = 2,000 MB</span>
  </div>

</div>

<script>
  let currentMode = 'down';

  function renderArrows() {
    const arrowsRow = document.getElementById('arrowsRow');
    const ruleBanner = document.getElementById('ruleBanner');
    const exMath = document.getElementById('exMath');
    const exLabel = document.getElementById('exLabel');

    if (currentMode === 'down') {
      ruleBanner.className = 'rule-banner banner-mult';
      ruleBanner.innerHTML = '<span>Large → Small:</span> <span>MULTIPLY (× 1,000)</span>';
      
      arrowsRow.innerHTML = `
        <div class="arrow-col">
          <span class="op-tag op-mult">× 1,000</span>
          <span class="arrow-sym">→</span>
        </div>
        <div class="arrow-col">
          <span class="op-tag op-mult">× 1,000</span>
          <span class="arrow-sym">→</span>
        </div>
        <div class="arrow-col">
          <span class="op-tag op-mult">× 1,000</span>
          <span class="arrow-sym">→</span>
        </div>
        <div class="arrow-col">
          <span class="op-tag op-mult">× 1,000</span>
          <span class="arrow-sym">→</span>
        </div>
        <div class="arrow-col">
          <span class="op-tag op-special-mult">× 8</span>
          <span class="arrow-sym" style="color:#f59e0b;">→</span>
        </div>
      `;
      exLabel.textContent = "Large to Small Example:";
      exMath.textContent = "4 MB × 1,000 = 4,000 KB";
    } else {
      ruleBanner.className = 'rule-banner banner-div';
      ruleBanner.innerHTML = '<span>Small → Large:</span> <span>DIVIDE (÷ 1,000)</span>';
      
      arrowsRow.innerHTML = `
        <div class="arrow-col">
          <span class="arrow-sym">←</span>
          <span class="op-tag op-div">÷ 1,000</span>
        </div>
        <div class="arrow-col">
          <span class="arrow-sym">←</span>
          <span class="op-tag op-div">÷ 1,000</span>
        </div>
        <div class="arrow-col">
          <span class="arrow-sym">←</span>
          <span class="op-tag op-div">÷ 1,000</span>
        </div>
        <div class="arrow-col">
          <span class="arrow-sym">←</span>
          <span class="op-tag op-div">÷ 1,000</span>
        </div>
        <div class="arrow-col">
          <span class="arrow-sym" style="color:#f59e0b;">←</span>
          <span class="op-tag op-special-div">÷ 8</span>
        </div>
      `;
      exLabel.textContent = "Small to Large Example:";
      exMath.textContent = "3,000 KB ÷ 1,000 = 3 MB";
    }
  }

  function setMode(mode) {
    currentMode = mode;
    document.getElementById('btnDown').classList.toggle('active', mode === 'down');
    document.getElementById('btnUp').classList.toggle('active', mode === 'up');
    renderArrows();
  }

  // Initial render
  renderArrows();
</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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Preset selector */
    .presets {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      align-items: center;
    }
    .preset-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      font-family: inherit;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }
    .preset-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    /* Main grid */
    .main-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    @media (max-width: 540px) {
      .main-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Code Pane */
    .code-panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 8px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 12px;
      line-height: 1.5;
    }
    .code-line {
      display: flex;
      padding: 1px 4px;
      border-radius: 4px;
      transition: background 0.2s;
    }
    .code-line.active {
      background: #e0f2fe;
      box-shadow: inset 3px 0 0 #0284c7;
    }
    .line-num {
      width: 20px;
      color: #94a3b8;
      user-select: none;
      font-size: 11px;
    }
    .kw { color: #2563eb; font-weight: 600; }
    .fn { color: #7c3aed; }
    .str { color: #16a34a; }
    .num { color: #d97706; }
    .op { color: #64748b; }

    /* Trace / Inspector Pane */
    .trace-panel {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .units-strip {
      display: flex;
      gap: 4px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px;
      justify-content: space-between;
    }
    .unit-box {
      flex: 1;
      text-align: center;
      padding: 4px 2px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 700;
      background: #f1f5f9;
      color: #64748b;
      border: 1px solid transparent;
      transition: all 0.2s;
    }
    .unit-box.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }

    .var-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .var-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      font-family: monospace;
    }
    .var-label { color: #64748b; font-weight: 600; }
    .var-val {
      font-weight: 700;
      color: #1e2945;
      background: #f1f5f9;
      padding: 2px 6px;
      border-radius: 4px;
    }
    .var-val.highlight {
      background: #fef08a;
      color: #854d0e;
    }

    .output-box {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      font-weight: 700;
      color: #166534;
    }

    /* Stepper controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      transition: background 0.15s;
    }
    .ctrl-btn:hover { background: #f1f5f9; }
    .ctrl-btn:disabled { opacity: 0.4; cursor: default; }
    .step-indicator {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
    }
  </style>
</head>
<body>

  
  <div class="presets">
    <button class="preset-btn active" onclick="loadInput(2500000)">2,500,000 B</button>
    <button class="preset-btn" onclick="loadInput(4000)">4,000 B</button>
    <button class="preset-btn" onclick="loadInput(850)">850 B</button>
    <button class="preset-btn" onclick="loadInput(5000000000)">5,000,000,000 B</button>
  </div>

  
  <div class="main-grid">
    
    <div class="code-panel">
      <div class="code-line" id="l1"><span class="line-num">1</span><span><span class="kw">function</span> <span class="fn">formatBytes</span>(bytes) {</span></div>
      <div class="code-line" id="l2"><span class="line-num">2</span><span>  <span class="kw">const</span> units = [<span class="str">'B'</span>,<span class="str">'KB'</span>,<span class="str">'MB'</span>,<span class="str">'GB'</span>,<span class="str">'TB'</span>];</span></div>
      <div class="code-line" id="l3"><span class="line-num">3</span><span>  <span class="kw">let</span> size = bytes;</span></div>
      <div class="code-line" id="l4"><span class="line-num">4</span><span>  <span class="kw">let</span> unitIndex = <span class="num">0</span>;</span></div>
      <div class="code-line" id="l5"><span class="line-num">5</span><span>  <span class="kw">while</span> (size &gt;= <span class="num">1000</span> &amp;&amp; idx &lt; <span class="num">4</span>) {</span></div>
      <div class="code-line" id="l6"><span class="line-num">6</span><span>    size /= <span class="num">1000</span>;</span></div>
      <div class="code-line" id="l7"><span class="line-num">7</span><span>    unitIndex++;</span></div>
      <div class="code-line" id="l8"><span class="line-num">8</span><span>  }</span></div>
      <div class="code-line" id="l9"><span class="line-num">9</span><span>  <span class="kw">return</span> <span class="str">`${size} ${units[idx]}`</span>;</span></div>
      <div class="code-line" id="l10"><span class="line-num">10</span><span>}</span></div>
    </div>

    
    <div class="trace-panel">
      
      <div class="units-strip">
        <div class="unit-box" id="u0">0: B</div>
        <div class="unit-box" id="u1">1: KB</div>
        <div class="unit-box" id="u2">2: MB</div>
        <div class="unit-box" id="u3">3: GB</div>
        <div class="unit-box" id="u4">4: TB</div>
      </div>

      
      <div class="var-card">
        <div class="var-row">
          <span class="var-label">size</span>
          <span class="var-val" id="v-size">2500000</span>
        </div>
        <div class="var-row">
          <span class="var-label">unitIndex</span>
          <span class="var-val" id="v-idx">0</span>
        </div>
        <div class="var-row">
          <span class="var-label">size &gt;= 1000</span>
          <span class="var-val" id="v-cond">true</span>
        </div>
      </div>

      
      <div class="output-box">
        <span>Result:</span>
        <span id="output-val">...</span>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="ctrl-btn" id="prevBtn" onclick="stepPrev()">◀ Step</button>
    <div class="step-indicator" id="stepTxt">Step 1 / 4</div>
    <button class="ctrl-btn" id="nextBtn" onclick="stepNext()">Step ▶</button>
  </div>

  <script>
    const UNITS = ['B', 'KB', 'MB', 'GB', 'TB'];
    let steps = [];
    let currentStep = 0;

    function buildSteps(bytes) {
      const trace = [];
      let size = bytes;
      let unitIndex = 0;

      // Init
      trace.push({
        line: 'l3',
        size: size,
        unitIndex: 0,
        cond: size >= 1000,
        output: '...'
      });

      // Loop iterations
      while (size >= 1000 && unitIndex < UNITS.length - 1) {
        size /= 1000;
        unitIndex++;
        trace.push({
          line: 'l6',
          size: size,
          unitIndex: unitIndex,
          cond: size >= 1000 && unitIndex < UNITS.length - 1,
          output: '...'
        });
      }

      // Final return
      trace.push({
        line: 'l9',
        size: size,
        unitIndex: unitIndex,
        cond: false,
        output: `${size} ${UNITS[unitIndex]}`
      });

      return trace;
    }

    function renderStep(index) {
      currentStep = index;
      const s = steps[index];

      // Highlight code line
      for (let i = 1; i <= 10; i++) {
        const el = document.getElementById('l' + i);
        if (el) el.classList.remove('active');
      }
      const activeLine = document.getElementById(s.line);
      if (activeLine) activeLine.classList.add('active');

      // Highlight units array
      for (let i = 0; i < 5; i++) {
        const u = document.getElementById('u' + i);
        if (i === s.unitIndex) {
          u.classList.add('active');
        } else {
          u.classList.remove('active');
        }
      }

      // Update Variables
      document.getElementById('v-size').textContent = s.size;
      document.getElementById('v-idx').textContent = `${s.unitIndex} (${UNITS[s.unitIndex]})`;
      
      const condEl = document.getElementById('v-cond');
      condEl.textContent = s.cond ? 'true' : 'false';
      condEl.style.color = s.cond ? '#16a34a' : '#dc2626';

      // Update Output
      document.getElementById('output-val').textContent = s.output;

      // Controls
      document.getElementById('stepTxt').textContent = `Step ${index + 1} / ${steps.length}`;
      document.getElementById('prevBtn').disabled = index === 0;
      document.getElementById('nextBtn').disabled = index === steps.length - 1;
    }

    function loadInput(val) {
      document.querySelectorAll('.preset-btn').forEach(b => {
        b.classList.toggle('active', b.textContent.replace(/,/g, '').startsWith(val.toString()));
      });
      steps = buildSteps(val);
      renderStep(0);
    }

    function stepNext() {
      if (currentStep < steps.length - 1) {
        renderStep(currentStep + 1);
      }
    }

    function stepPrev() {
      if (currentStep > 0) {
        renderStep(currentStep - 1);
      }
    }

    // Initial load
    loadInput(2500000);
  </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 {
      background-color: #f8f9fa;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px 8px;
    }

    .diagram-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      align-items: stretch;
      width: 100%;
      max-width: 680px;
    }

    .unit-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      flex: 1 1 180px;
      min-width: 140px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    }

    .header {
      text-align: center;
      margin-bottom: 12px;
    }

    .title {
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
    }

    .subtitle {
      font-size: 13px;
      color: #6b7280;
      font-weight: 500;
      margin-top: 2px;
    }

    .switches-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      padding: 8px;
      background: #f8f9fa;
      border-radius: 8px;
      border: 1px dashed #e6e6e6;
      margin: 8px 0;
      width: 100%;
      max-width: 190px;
    }

    .switch-btn {
      width: 34px;
      height: 48px;
      background: #ffffff;
      border: 1.5px solid #d1d5db;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 4px 2px;
      transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .switch-btn.on {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 0 0 1px #22b7ff inset;
    }

    .indicator {
      width: 16px;
      height: 16px;
      border-radius: 4px;
      background: #e5e7eb;
      transition: transform 0.2s ease, background-color 0.2s ease;
    }

    .switch-btn.on .indicator {
      background: #22b7ff;
      transform: translateY(0);
    }

    .switch-btn.off .indicator {
      transform: translateY(18px);
      background: #9ca3af;
    }

    .val-label {
      font-size: 14px;
      font-weight: 700;
      font-family: ui-monospace, monospace;
      color: #9ca3af;
      line-height: 1;
    }

    .switch-btn.on .val-label {
      color: #0284c7;
    }

    .footer-badge {
      font-size: 13px;
      font-weight: 600;
      color: #0284c7;
      background: #e0f2fe;
      border-radius: 6px;
      padding: 4px 8px;
      margin-top: 8px;
      text-align: center;
    }

    .char-preview {
      font-family: ui-monospace, monospace;
      font-weight: 700;
      font-size: 15px;
    }
  </style>
</head>
<body>

  <div class="diagram-grid">
    
    <div class="unit-card">
      <div class="header">
        <div class="title">1 Bit</div>
        <div class="subtitle">0 or 1</div>
      </div>
      <div class="switches-grid" style="max-width: 60px;">
        <button class="switch-btn on" onclick="toggleBit(this)" aria-label="Toggle bit">
          <div class="indicator"></div>
          <div class="val-label">1</div>
        </button>
      </div>
      <div class="footer-badge">Single State</div>
    </div>

    
    <div class="unit-card">
      <div class="header">
        <div class="title">1 Nibble</div>
        <div class="subtitle">4 Bits</div>
      </div>
      <div class="switches-grid" style="max-width: 100px;">
        <button class="switch-btn on" onclick="toggleBit(this)" aria-label="Toggle bit">
          <div class="indicator"></div>
          <div class="val-label">1</div>
        </button>
        <button class="switch-btn off" onclick="toggleBit(this)" aria-label="Toggle bit">
          <div class="indicator"></div>
          <div class="val-label">0</div>
        </button>
        <button class="switch-btn on" onclick="toggleBit(this)" aria-label="Toggle bit">
          <div class="indicator"></div>
          <div class="val-label">1</div>
        </button>
        <button class="switch-btn off" onclick="toggleBit(this)" aria-label="Toggle bit">
          <div class="indicator"></div>
          <div class="val-label">0</div>
        </button>
      </div>
      <div class="footer-badge">Half Byte</div>
    </div>

    
    <div class="unit-card">
      <div class="header">
        <div class="title">1 Byte</div>
        <div class="subtitle">8 Bits</div>
      </div>
      <div class="switches-grid" id="byteGroup">
        
        <button class="switch-btn off" onclick="toggleByteBit(this)"><div class="indicator"></div><div class="val-label">0</div></button>
        <button class="switch-btn on" onclick="toggleByteBit(this)"><div class="indicator"></div><div class="val-label">1</div></button>
        <button class="switch-btn off" onclick="toggleByteBit(this)"><div class="indicator"></div><div class="val-label">0</div></button>
        <button class="switch-btn off" onclick="toggleByteBit(this)"><div class="indicator"></div><div class="val-label">0</div></button>
        <button class="switch-btn off" onclick="toggleByteBit(this)"><div class="indicator"></div><div class="val-label">0</div></button>
        <button class="switch-btn off" onclick="toggleByteBit(this)"><div class="indicator"></div><div class="val-label">0</div></button>
        <button class="switch-btn off" onclick="toggleByteBit(this)"><div class="indicator"></div><div class="val-label">0</div></button>
        <button class="switch-btn on" onclick="toggleByteBit(this)"><div class="indicator"></div><div class="val-label">1</div></button>
      </div>
      <div class="footer-badge">Stores: <span class="char-preview" id="charDisplay">'A'</span></div>
    </div>
  </div>

  <script>
    function toggleBit(btn) {
      const isOn = btn.classList.toggle('on');
      btn.classList.toggle('off', !isOn);
      btn.querySelector('.val-label').textContent = isOn ? '1' : '0';
    }

    function toggleByteBit(btn) {
      toggleBit(btn);
      updateByteChar();
    }

    function updateByteChar() {
      const btns = document.querySelectorAll('#byteGroup .switch-btn');
      let code = 0;
      btns.forEach((b) => {
        code = (code << 1) | (b.classList.contains('on') ? 1 : 0);
      });

      const display = document.getElementById('charDisplay');
      if (code >= 32 && code <= 126) {
        display.textContent = `'${String.fromCharCode(code)}'`;
      } else {
        display.textContent = `${code}`;
      }
    }
  </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;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      gap: 10px;
    }

    .stack-container {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      position: relative;
    }

    .layer-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      cursor: pointer;
      text-align: left;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .layer-btn:hover {
      background: #f1f5f9;
    }

    .layer-btn.active {
      background: #f0f9ff;
      border-color: #0284c7;
      box-shadow: 0 0 0 1px #0284c7;
    }

    .layer-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .layer-icon {
      font-size: 18px;
      line-height: 1;
      width: 24px;
      text-align: center;
    }

    .layer-name {
      font-size: 14px;
      font-weight: 700;
      line-height: 1.2;
    }

    .layer-sub {
      font-size: 12px;
      font-weight: 500;
      color: #64748b;
      margin-top: 1px;
    }

    .layer-tag {
      font-size: 11px;
      font-weight: 600;
      padding: 3px 7px;
      border-radius: 4px;
      background: #e2e8f0;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      flex-shrink: 0;
    }

    .layer-btn.active .layer-tag {
      background: #bae6fd;
      color: #0369a1;
    }

    /* Flow connector line */
    .connector-wrap {
      display: flex;
      justify-content: center;
      height: 6px;
      position: relative;
    }
    .connector-line {
      width: 2px;
      height: 100%;
      background: #cbd5e1;
    }

    /* Explanation card container (fixed height to prevent CLS) */
    .info-panel {
      width: 100%;
      max-width: 480px;
      min-height: 68px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .info-indicator {
      width: 8px;
      height: 36px;
      border-radius: 4px;
      background: #0284c7;
      flex-shrink: 0;
    }

    .info-text-box {
      flex: 1;
    }

    .info-title {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #0284c7;
      margin-bottom: 2px;
    }

    .info-desc {
      font-size: 13.5px;
      color: #334155;
      line-height: 1.35;
    }

    /* Navigation / control bar */
    .nav-bar {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      border: none;
      padding: 0;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .dot.active {
      background: #0284c7;
      width: 18px;
      border-radius: 4px;
    }
  </style>
</head>
<body>

  <div class="stack-container">
    
    <button class="layer-btn active" data-idx="0" aria-label="Application Layer">
      <div class="layer-left">
        <span class="layer-icon">🌐</span>
        <div>
          <div class="layer-name">Application Layer</div>
          <div class="layer-sub">Web Browser · Multiplayer Game</div>
        </div>
      </div>
      <span class="layer-tag">User Software</span>
    </button>

    <div class="connector-wrap"><div class="connector-line"></div></div>

    
    <button class="layer-btn" data-idx="1" aria-label="Operating System Network Software">
      <div class="layer-left">
        <span class="layer-icon">⚙️</span>
        <div>
          <div class="layer-name">OS Network Software</div>
          <div class="layer-sub">TCP/IP Stack · DHCP Client</div>
        </div>
      </div>
      <span class="layer-tag">Operating System</span>
    </button>

    <div class="connector-wrap"><div class="connector-line"></div></div>

    
    <button class="layer-btn" data-idx="2" aria-label="Device Driver">
      <div class="layer-left">
        <span class="layer-icon">🔄</span>
        <div>
          <div class="layer-name">Device Driver</div>
          <div class="layer-sub">Hardware Translation Interface</div>
        </div>
      </div>
      <span class="layer-tag">Translator</span>
    </button>

    <div class="connector-wrap"><div class="connector-line"></div></div>

    
    <button class="layer-btn" data-idx="3" aria-label="Hardware Layer">
      <div class="layer-left">
        <span class="layer-icon">🔌</span>
        <div>
          <div class="layer-name">Hardware Layer</div>
          <div class="layer-sub">Network Interface Card (MAC) · Cable / Antenna</div>
        </div>
      </div>
      <span class="layer-tag">Physical Media</span>
    </button>
  </div>

  
  <div class="info-panel">
    <div class="info-indicator"></div>
    <div class="info-text-box">
      <div class="info-title" id="infoTitle">Layer 1: Application</div>
      <div class="info-desc" id="infoDesc">Generates and displays high-level user data requests like web pages or multiplayer actions.</div>
    </div>
  </div>

  
  <div class="nav-bar">
    <button class="dot active" data-idx="0" aria-label="Go to Layer 1"></button>
    <button class="dot" data-idx="1" aria-label="Go to Layer 2"></button>
    <button class="dot" data-idx="2" aria-label="Go to Layer 3"></button>
    <button class="dot" data-idx="3" aria-label="Go to Layer 4"></button>
  </div>

  <script>
    const layerData = [
      {
        title: "Layer 1: Application",
        desc: "Generates and requests user data such as loading web pages or streaming games."
      },
      {
        title: "Layer 2: OS Network Stack",
        desc: "Packages data into standard network packets (TCP/IP) and requests a local IP address (DHCP)."
      },
      {
        title: "Layer 3: Device Driver",
        desc: "Translates standard OS network instructions into specific commands for your NIC model."
      },
      {
        title: "Layer 4: Physical Hardware",
        desc: "Converts digital bits into electrical, optical, or radio signals across the physical network."
      }
    ];

    const buttons = document.querySelectorAll('.layer-btn');
    const dots = document.querySelectorAll('.dot');
    const titleEl = document.getElementById('infoTitle');
    const descEl = document.getElementById('infoDesc');

    let currentIndex = 0;

    function selectLayer(index) {
      currentIndex = index;

      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === index);
      });

      titleEl.textContent = layerData[index].title;
      descEl.textContent = layerData[index].desc;
    }

    buttons.forEach((btn) => {
      btn.addEventListener('click', () => {
        selectLayer(parseInt(btn.getAttribute('data-idx'), 10));
      });
    });

    dots.forEach((dot) => {
      dot.addEventListener('click', () => {
        selectLayer(parseInt(dot.getAttribute('data-idx'), 10));
      });
    });
  </script>
</body>
</html>

Hardware and Software in Networked Systems

<!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;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
    }

    /* Spatial Canvas */
    .network-stage {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 16px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      min-height: 120px;
    }

    .node {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      z-index: 2;
      width: 80px;
      text-align: center;
    }

    .node-icon {
      width: 44px;
      height: 44px;
      border-radius: 8px;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      transition: all 0.3s ease;
    }

    .node-tag {
      font-size: 11px;
      font-weight: 700;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .node-sub {
      font-size: 10px;
      color: #64748b;
      font-family: monospace;
    }

    /* Transmission Channel */
    .channel {
      flex: 1;
      position: relative;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 10px;
    }

    .channel-line {
      position: absolute;
      width: 100%;
      height: 2px;
      background: #e2e8f0;
    }

    .signal-packet {
      position: absolute;
      padding: 3px 8px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: all 0.4s ease;
      opacity: 0;
      transform: scale(0.9);
      background: #eff6ff;
      border: 1px solid #93c5fd;
      color: #2563eb;
    }

    /* Flowchart Grid */
    .flow-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }

    @media (min-width: 540px) {
      .flow-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .step-card {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      user-select: none;
    }

    .step-card.active {
      border-color: #2563eb;
      box-shadow: 0 0 0 1px #2563eb;
      background: #f8faff;
    }

    .step-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .step-num {
      font-size: 10px;
      font-weight: 700;
      color: #64748b;
    }

    .badge {
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 2px 5px;
      border-radius: 4px;
    }

    .badge-pending {
      background: #f1f5f9;
      color: #64748b;
    }

    .badge-active {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .badge-complete {
      background: #dcfce7;
      color: #15803d;
    }

    .step-title {
      font-size: 12px;
      font-weight: 700;
      color: #1e293b;
      line-height: 1.2;
    }

    .step-detail {
      font-size: 11px;
      color: #475569;
      line-height: 1.3;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: 2px;
    }

    .btn {
      appearance: none;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e293b;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s ease;
    }

    .btn:hover {
      background: #f1f5f9;
    }

    .btn-primary {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }

    .btn-primary:hover {
      background: #1d4ed8;
    }

    .btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .progress-bar {
      display: flex;
      gap: 4px;
      align-items: center;
    }

    .bar-dot {
      width: 18px;
      height: 4px;
      border-radius: 2px;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .bar-dot.active {
      background: #2563eb;
    }
  </style>
</head>
<body>

  
  <div class="network-stage">
    <div class="node" id="nodeLaptop">
      <div class="node-icon" id="iconLaptop">💻</div>
      <div class="node-tag">Laptop</div>
      <div class="node-sub" id="laptopState">WNIC: OFF</div>
    </div>

    <div class="channel">
      <div class="channel-line"></div>
      <div class="signal-packet" id="signalPacket">⚡ Driver Init</div>
    </div>

    <div class="node" id="nodeRouter">
      <div class="node-icon" id="iconRouter">📡</div>
      <div class="node-tag">WAP / Router</div>
      <div class="node-sub" id="routerState">DHCP: Ready</div>
    </div>
  </div>

  
  <div class="flow-grid">
    <div class="step-card active" onclick="setStep(0)">
      <div class="step-header">
        <span class="step-num">STEP 1</span>
        <span class="badge badge-active" id="badge0">Active</span>
      </div>
      <div class="step-title">Hardware Init</div>
      <div class="step-detail">OS loads WNIC driver; antenna powers on.</div>
    </div>

    <div class="step-card" onclick="setStep(1)">
      <div class="step-header">
        <span class="step-num">STEP 2</span>
        <span class="badge badge-pending" id="badge1">Pending</span>
      </div>
      <div class="step-title">Discovery</div>
      <div class="step-detail">WNIC detects beacon; security handshake.</div>
    </div>

    <div class="step-card" onclick="setStep(2)">
      <div class="step-header">
        <span class="step-num">STEP 3</span>
        <span class="badge badge-pending" id="badge2">Pending</span>
      </div>
      <div class="step-title">DHCP Request</div>
      <div class="step-detail">Client broadcasts IP address request.</div>
    </div>

    <div class="step-card" onclick="setStep(3)">
      <div class="step-header">
        <span class="step-num">STEP 4</span>
        <span class="badge badge-pending" id="badge3">Pending</span>
      </div>
      <div class="step-title">Active Link</div>
      <div class="step-detail">IP assigned; TCP/IP ready for packets.</div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" id="btnPrev" onclick="stepDelta(-1)" disabled>← Back</button>
    <div class="progress-bar">
      <div class="bar-dot active" onclick="setStep(0)"></div>
      <div class="bar-dot" onclick="setStep(1)"></div>
      <div class="bar-dot" onclick="setStep(2)"></div>
      <div class="bar-dot" onclick="setStep(3)"></div>
    </div>
    <button class="btn btn-primary" id="btnNext" onclick="stepDelta(1)">Next →</button>
  </div>

  <script>
    let currentStep = 0;
    const totalSteps = 4;

    const stepData = [
      {
        laptop: "WNIC: Active",
        router: "DHCP: Ready",
        packetText: "⚡ WNIC Power ON",
        packetPos: "left: 15%; opacity: 1;",
        lapBorder: "#2563eb",
        routBorder: "#cbd5e1"
      },
      {
        laptop: "Handshake",
        router: "SSID Beacon",
        packetText: "📶 Beacon / Auth",
        packetPos: "left: 45%; opacity: 1;",
        lapBorder: "#2563eb",
        routBorder: "#2563eb"
      },
      {
        laptop: "DHCP Discover",
        router: "DHCP Offer",
        packetText: "📨 IP Request ➔",
        packetPos: "left: 48%; opacity: 1;",
        lapBorder: "#2563eb",
        routBorder: "#2563eb"
      },
      {
        laptop: "192.168.1.50",
        router: "Link Active",
        packetText: "✓ Connected",
        packetPos: "left: 42%; opacity: 1; background: #ecfdf5; border-color: #86efac; color: #15803d;",
        lapBorder: "#16a34a",
        routBorder: "#16a34a"
      }
    ];

    function updateView() {
      const d = stepData[currentStep];

      // Update Node labels and styles
      document.getElementById('laptopState').textContent = d.laptop;
      document.getElementById('routerState').textContent = d.router;
      document.getElementById('iconLaptop').style.borderColor = d.lapBorder;
      document.getElementById('iconRouter').style.borderColor = d.routBorder;

      // Update Packet
      const p = document.getElementById('signalPacket');
      p.textContent = d.packetText;
      p.style.cssText = d.packetPos;

      // Update Step Cards & Badges
      const cards = document.querySelectorAll('.step-card');
      const dots = document.querySelectorAll('.bar-dot');

      cards.forEach((card, idx) => {
        const badge = document.getElementById(`badge${idx}`);
        card.classList.toggle('active', idx === currentStep);
        dots[idx].classList.toggle('active', idx === currentStep);

        if (idx < currentStep) {
          badge.className = 'badge badge-complete';
          badge.textContent = 'Done ✓';
        } else if (idx === currentStep) {
          badge.className = 'badge badge-active';
          badge.textContent = 'Active';
        } else {
          badge.className = 'badge badge-pending';
          badge.textContent = 'Pending';
        }
      });

      // Update Buttons
      document.getElementById('btnPrev').disabled = (currentStep === 0);
      const nextBtn = document.getElementById('btnNext');
      if (currentStep === totalSteps - 1) {
        nextBtn.textContent = 'Restart ↺';
      } else {
        nextBtn.textContent = 'Next →';
      }
    }

    function setStep(index) {
      currentStep = index;
      updateView();
    }

    function stepDelta(delta) {
      if (currentStep === totalSteps - 1 && delta > 0) {
        currentStep = 0;
      } else {
        currentStep = Math.max(0, Math.min(totalSteps - 1, currentStep + delta));
      }
      updateView();
    }

    // Initialize
    updateView();
  </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">
  <title>Wired NIC vs Wireless NIC</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;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      user-select: none;
      -webkit-user-select: none;
    }
    .header {
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: center;
      text-align: center;
    }
    .header h1 {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.01em;
    }
    .nav-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      justify-content: center;
    }
    .tab-btn {
      appearance: none;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }
    .tab-btn:hover {
      background: #e2e8f0;
      color: #0f172a;
    }
    .tab-btn:focus-visible {
      outline: 2px solid #2563eb;
      outline-offset: 1px;
    }
    .tab-btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
      box-shadow: 0 1px 4px rgba(37,99,235,0.3);
    }
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      width: 100%;
    }
    @media (max-width: 480px) {
      .comparison-grid {
        grid-template-columns: 1fr;
      }
    }
    .panel {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .panel-title {
      font-size: 12px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .svg-container {
      width: 100%;
      max-width: 320px;
      height: auto;
      aspect-ratio: 16 / 11;
    }
    svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    /* Interactive SVG Elements */
    .interactive-part {
      cursor: pointer;
      transition: opacity 0.2s ease, filter 0.2s ease;
    }
    .interactive-part:hover {
      filter: brightness(1.15);
    }
    .interactive-part.dimmed {
      opacity: 0.25;
    }
    .interactive-part.highlighted rect,
    .interactive-part.highlighted path,
    .interactive-part.highlighted polygon {
      stroke: #2563eb !important;
      stroke-width: 2.5px !important;
      filter: drop-shadow(0 0 4px rgba(37,99,235,0.6));
    }
    /* Continuous Cable Signal Animation */
    .cable-pulse {
      stroke-dasharray: 6, 6;
      animation: signalFlow 0.8s linear infinite;
    }
    @keyframes signalFlow {
      from { stroke-dashoffset: 24; }
      to { stroke-dashoffset: 0; }
    }
    /* RF Wave Radio Animation */
    .rf-wave {
      transform-origin: 235px 45px;
      animation: radiateRF 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
    }
    .rf-wave-2 { animation-delay: 0.8s; }
    .rf-wave-3 { animation-delay: 1.6s; }
    @keyframes radiateRF {
      0% {
        opacity: 0.9;
        transform: scale(0.3);
      }
      80% {
        opacity: 0.3;
      }
      100% {
        opacity: 0;
        transform: scale(1.3);
      }
    }
    /* Info Card */
    .info-card {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      flex-direction: column;
      gap: 3px;
      font-size: 11px;
    }
    .info-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 700;
      color: #1e3a8a;
      font-size: 12px;
    }
    .info-desc {
      color: #334155;
      line-height: 1.35;
    }
    .info-signal {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-weight: 600;
      color: #1d4ed8;
      background: #dbeafe;
      padding: 2px 6px;
      border-radius: 4px;
      width: fit-content;
      margin-top: 2px;
      font-size: 10px;
    }
  </style>
</head>
<body>

  <div class="header">
    <h1>Wired NIC vs Wireless NIC (WNIC)</h1>
    <div class="nav-tabs" role="tablist">
      <button class="tab-btn active" data-filter="all" role="tab" aria-selected="true">All Components</button>
      <button class="tab-btn" data-filter="bus" role="tab" aria-selected="false">Motherboard Interface</button>
      <button class="tab-btn" data-filter="chip" role="tab" aria-selected="false">Controller &amp; MAC</button>
      <button class="tab-btn" data-filter="medium" role="tab" aria-selected="false">Transmission Medium (Port vs Antenna)</button>
    </div>
  </div>

  <div class="comparison-grid">
    
    <div class="panel">
      <div class="panel-title">🔌 Wired NIC (PCIe / Desktop)</div>
      <div class="svg-container">
        <svg viewBox="0 0 320 220" role="img" aria-label="Wired PCIe Network Interface Card Diagram">
          
          <g class="interactive-part" data-part="bus" id="wired-bus">
            <rect x="25" y="170" width="160" height="28" rx="2" fill="#1e293b" />
            <text x="105" y="188" fill="#94a3b8" font-size="9" font-weight="600" text-anchor="middle">PCIe Slot (Motherboard)</text>
            
            <rect x="40" y="152" width="130" height="18" fill="#eab308" stroke="#ca8a04" stroke-width="1" />
            <line x1="55" y1="152" x2="55" y2="170" stroke="#713f12" stroke-width="1.5" />
            <line x1="70" y1="152" x2="70" y2="170" stroke="#713f12" stroke-width="1.5" />
            <line x1="85" y1="152" x2="85" y2="170" stroke="#713f12" stroke-width="1.5" />
            <line x1="100" y1="152" x2="100" y2="170" stroke="#713f12" stroke-width="1.5" />
            <line x1="115" y1="152" x2="115" y2="170" stroke="#713f12" stroke-width="1.5" />
            <line x1="130" y1="152" x2="130" y2="170" stroke="#713f12" stroke-width="1.5" />
            <line x1="145" y1="152" x2="145" y2="170" stroke="#713f12" stroke-width="1.5" />
            <line x1="160" y1="152" x2="160" y2="170" stroke="#713f12" stroke-width="1.5" />
            <text x="105" y="146" fill="#854d0e" font-size="8" font-weight="700" text-anchor="middle">PCIe Gold Contacts</text>
          </g>

          
          <rect x="35" y="30" width="140" height="122" rx="4" fill="#047857" stroke="#065f46" stroke-width="2" />
          <rect x="15" y="15" width="18" height="150" rx="2" fill="#94a3b8" stroke="#64748b" stroke-width="1.5" />
          
          <path d="M50 130 L75 130 L75 90 M105 130 L105 90 M140 130 L140 85 L125 85" fill="none" stroke="#10b981" stroke-width="1.5" stroke-linecap="round" />

          
          <g class="interactive-part" data-part="chip" id="wired-chip">
            <rect x="65" y="45" width="80" height="46" rx="3" fill="#0f172a" stroke="#334155" stroke-width="1.5" />
            <text x="105" y="62" fill="#38bdf8" font-size="9" font-weight="700" text-anchor="middle">NIC Controller</text>
            <text x="105" y="74" fill="#f8fafc" font-size="7.5" font-family="monospace" text-anchor="middle">MAC Address</text>
            <text x="105" y="84" fill="#cbd5e1" font-size="7" font-family="monospace" text-anchor="middle">00:1A:2B:3C:4D:5E</text>
          </g>

          
          <g class="interactive-part" data-part="medium" id="wired-medium">
            
            <rect x="8" y="52" width="25" height="32" rx="2" fill="#475569" stroke="#334155" stroke-width="1.5" />
            <rect x="12" y="60" width="14" height="16" rx="1" fill="#0f172a" />
            <line x1="14" y1="64" x2="22" y2="64" stroke="#eab308" stroke-width="1" />
            <line x1="14" y1="68" x2="22" y2="68" stroke="#eab308" stroke-width="1" />
            <line x1="14" y1="72" x2="22" y2="72" stroke="#eab308" stroke-width="1" />
            
            
            <path d="M8 68 L-20 68" stroke="#0284c7" stroke-width="10" stroke-linecap="round" />
            
            <path d="M12 68 L-25 68" fill="none" stroke="#38bdf8" stroke-width="4" class="cable-pulse" />
            <text x="50" y="20" fill="#0369a1" font-size="9" font-weight="700">RJ-45 Port &amp; Cable</text>
            <path d="M22 48 L32 30" fill="none" stroke="#0284c7" stroke-width="1" stroke-dasharray="2,2" />
          </g>
        </svg>
      </div>
    </div>

    
    <div class="panel">
      <div class="panel-title">📶 Wireless NIC (M.2 / Laptop)</div>
      <div class="svg-container">
        <svg viewBox="0 0 320 220" role="img" aria-label="Wireless M.2 Network Interface Card Diagram">
          
          <g class="interactive-part" data-part="bus" id="wnic-bus">
            <rect x="40" y="170" width="130" height="28" rx="2" fill="#1e293b" />
            <text x="105" y="188" fill="#94a3b8" font-size="9" font-weight="600" text-anchor="middle">M.2 Slot (Motherboard)</text>
            
            <rect x="55" y="152" width="100" height="18" fill="#eab308" stroke="#ca8a04" stroke-width="1" />
            <rect x="85" y="152" width="6" height="18" fill="#1e293b" />
            <line x1="65" y1="152" x2="65" y2="170" stroke="#713f12" stroke-width="1.5" />
            <line x1="75" y1="152" x2="75" y2="170" stroke="#713f12" stroke-width="1.5" />
            <line x1="105" y1="152" x2="105" y2="170" stroke="#713f12" stroke-width="1.5" />
            <line x1="118" y1="152" x2="118" y2="170" stroke="#713f12" stroke-width="1.5" />
            <line x1="132" y1="152" x2="132" y2="170" stroke="#713f12" stroke-width="1.5" />
            <line x1="145" y1="152" x2="145" y2="170" stroke="#713f12" stroke-width="1.5" />
            <text x="105" y="146" fill="#854d0e" font-size="8" font-weight="700" text-anchor="middle">M.2 Gold Pins</text>
          </g>

          
          <rect x="50" y="50" width="110" height="102" rx="3" fill="#0284c7" stroke="#0369a1" stroke-width="2" />
          <circle cx="105" cy="56" r="4" fill="#ffffff" stroke="#64748b" stroke-width="1" />

          
          <g class="interactive-part" data-part="chip" id="wnic-chip">
            <rect x="62" y="70" width="86" height="48" rx="2" fill="#334155" stroke="#475569" stroke-width="1.5" />
            <text x="105" y="86" fill="#38bdf8" font-size="9" font-weight="700" text-anchor="middle">WNIC Controller</text>
            <text x="105" y="98" fill="#f8fafc" font-size="7.5" font-family="monospace" text-anchor="middle">MAC Address</text>
            <text x="105" y="108" fill="#cbd5e1" font-size="7" font-family="monospace" text-anchor="middle">A4:B2:C8:D1:E3:F5</text>
          </g>

          
          <g class="interactive-part" data-part="medium" id="wnic-medium">
            
            <circle cx="75" cy="58" r="3.5" fill="#eab308" stroke="#475569" stroke-width="1" />
            <circle cx="135" cy="58" r="3.5" fill="#eab308" stroke="#475569" stroke-width="1" />
            
            <path d="M75 55 Q 110 30 180 45" fill="none" stroke="#1e293b" stroke-width="2.5" />
            <path d="M135 55 Q 160 38 180 45" fill="none" stroke="#475569" stroke-width="2.5" />
            
            
            <rect x="180" y="38" width="55" height="14" rx="2" fill="#0f172a" stroke="#2563eb" stroke-width="1.5" />
            <text x="207" y="49" fill="#f8fafc" font-size="7.5" font-weight="700" text-anchor="middle">RF Antenna</text>

            
            <path d="M245 35 A 15 15 0 0 1 245 55" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-linecap="round" class="rf-wave rf-wave-1" />
            <path d="M255 27 A 25 25 0 0 1 255 63" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" class="rf-wave rf-wave-2" />
            <path d="M267 18 A 38 38 0 0 1 267 72" fill="none" stroke="#60a5fa" stroke-width="1.5" stroke-linecap="round" class="rf-wave rf-wave-3" />
            
            <text x="312" y="16" fill="#1d4ed8" font-size="8" font-weight="700" text-anchor="end">2.4 / 5 GHz Waves</text>
          </g>
        </svg>
      </div>
    </div>
  </div>

  
  <div class="info-card" id="infoCard">
    <div class="info-header">
      <span id="infoTitle">All Components Overview</span>
      <span class="info-signal" id="infoSignal">⚡ Electrical &amp; 📡 Radio</span>
    </div>
    <div class="info-desc" id="infoDesc">
      Every NIC bridges a computer's system bus to the network. Wired NICs transmit electrical signals through copper cables, while WNICs broadcast radio frequency (RF) waves through an antenna.
    </div>
  </div>

  <script>
    const explanations = {
      all: {
        title: "All Components Overview",
        signal: "⚡ Electrical & 📡 Radio Waves",
        desc: "Both cards prepare data, format network frames, and provide unique hardware MAC addresses. Wired cards plug into copper Ethernet cables; wireless cards transmit via radio antennas."
      },
      bus: {
        title: "Motherboard Interface (PCIe vs M.2)",
        signal: "⚡ High-Speed Bus Pulses",
        desc: "Gold contact pins physically connect the NIC to the motherboard data bus, allowing binary data to transfer rapidly between the CPU/RAM and the network controller."
      },
      chip: {
        title: "Controller Processing Chip & MAC Address",
        signal: "⚡ Digital Binary Processing",
        desc: "Encodes outgoing data into network frames and checks incoming packets. Every NIC has a unique, hardcoded 48-bit MAC address burned into its ROM at manufacture."
      },
      medium: {
        title: "Transmission Medium (Port vs Antenna)",
        signal: "⚡ Copper Voltages vs 📡 RF Waves (2.4/5GHz)",
        desc: "Wired NICs use an RJ-45 port to push electrical voltage pulses through copper twisted-pair cable. WNICs convert signals into radio waves emitted through an antenna."
      }
    };

    const tabs = document.querySelectorAll('.tab-btn');
    const interactiveParts = document.querySelectorAll('.interactive-part');
    const infoTitle = document.getElementById('infoTitle');
    const infoSignal = document.getElementById('infoSignal');
    const infoDesc = document.getElementById('infoDesc');

    function selectFilter(filterName) {
      // Update Tab Buttons
      tabs.forEach(tab => {
        const isActive = tab.getAttribute('data-filter') === filterName;
        tab.classList.toggle('active', isActive);
        tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
      });

      // Update SVG Parts
      interactiveParts.forEach(part => {
        const partType = part.getAttribute('data-part');
        if (filterName === 'all') {
          part.classList.remove('dimmed', 'highlighted');
        } else if (partType === filterName) {
          part.classList.remove('dimmed');
          part.classList.add('highlighted');
        } else {
          part.classList.add('dimmed');
          part.classList.remove('highlighted');
        }
      });

      // Update Info Panel
      const data = explanations[filterName] || explanations.all;
      if (infoTitle) infoTitle.textContent = data.title;
      if (infoSignal) infoSignal.textContent = data.signal;
      if (infoDesc) infoDesc.textContent = data.desc;
    }

    // Tab button clicks
    tabs.forEach(tab => {
      tab.addEventListener('click', () => {
        const filter = tab.getAttribute('data-filter');
        selectFilter(filter);
      });
    });

    // Direct SVG Component clicks
    interactiveParts.forEach(part => {
      part.addEventListener('click', () => {
        const partType = part.getAttribute('data-part');
        selectFilter(partType);
      });
    });
  </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>CPU Architecture</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      width: 100%;
      min-height: 100%;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px 12px;
    }

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

    .header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 2px;
    }

    .cpu-title {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: #1e2945;
    }

    .interactive-hint {
      font-size: 12px;
      font-weight: 500;
      color: #64748b;
      background: #f1f5f9;
      padding: 3px 8px;
      border-radius: 12px;
    }

    /* CPU Diagram Area - transparent background, direct component layout */
    .diagram-area {
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .cu-block {
      background: #e0f2fe;
      border: 1.5px solid #bae6fd;
      border-radius: 10px;
      padding: 12px 14px;
      cursor: pointer;
      text-align: center;
      transition: box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
    }

    .cu-block:hover {
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.18);
      border-color: #38bdf8;
    }

    .bottom-section {
      position: relative;
    }

    .bottom-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      position: relative;
      z-index: 2;
    }

    .alu-block {
      background: #dcfce7;
      border: 1.5px solid #bbf7d0;
      border-radius: 10px;
      padding: 12px 14px;
      cursor: pointer;
      text-align: center;
      transition: box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
    }

    .alu-block:hover {
      box-shadow: 0 2px 8px rgba(22, 163, 74, 0.18);
      border-color: #4ade80;
    }

    .reg-block {
      background: #ffedd5;
      border: 1.5px solid #fed7aa;
      border-radius: 10px;
      padding: 12px 14px;
      cursor: pointer;
      text-align: center;
      transition: box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
    }

    .reg-block:hover {
      box-shadow: 0 2px 8px rgba(234, 88, 12, 0.18);
      border-color: #fb923c;
    }

    .block-name {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 3px;
    }

    .block-role {
      font-size: 12px;
      color: #475569;
      font-weight: 500;
      line-height: 1.25;
    }

    /* Active states */
    .cu-block.active {
      box-shadow: 0 0 0 2px #0284c7;
      border-color: #0284c7;
    }

    .alu-block.active {
      box-shadow: 0 0 0 2px #16a34a;
      border-color: #16a34a;
    }

    .reg-block.active {
      box-shadow: 0 0 0 2px #ea580c;
      border-color: #ea580c;
    }

    /* SVG Signal Connectors */
    .control-bus-svg {
      width: 100%;
      height: 42px;
      display: block;
      margin: 2px 0;
    }

    .data-bus-svg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 44px;
      height: 32px;
      z-index: 3;
      pointer-events: none;
    }

    .signal-line {
      stroke: #94a3b8;
      stroke-width: 2;
      stroke-dasharray: 8 6;
      fill: none;
      transition: stroke 0.3s ease, stroke-width 0.3s ease;
    }

    .signal-line.active-flow {
      stroke: #0284c7;
      stroke-width: 2.5;
      animation: dashMove 3.6s linear infinite;
    }

    .data-line {
      stroke: #64748b;
      stroke-width: 2.5;
      fill: none;
      transition: stroke 0.3s ease, stroke-width 0.3s ease;
    }

    .data-line.active-flow {
      stroke: #ea580c;
      stroke-width: 3;
      stroke-dasharray: 8 6;
      animation: dashMove 3.6s linear infinite;
    }

    /* Seamless loop: stroke-dasharray (8+6 = 14) -> stroke-dashoffset 28 to 0 (exactly 2 periods) */
    @keyframes dashMove {
      from {
        stroke-dashoffset: 28;
      }
      to {
        stroke-dashoffset: 0;
      }
    }

    /* Explanation Banner */
    .info-panel {
      margin-top: 8px;
      padding: 10px 14px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      font-size: 12.5px;
      color: #334155;
      min-height: 40px;
      display: flex;
      align-items: center;
      line-height: 1.35;
      transition: all 0.3s ease;
    }

    .info-panel strong {
      color: #1e2945;
      margin-right: 6px;
    }

    /* Legend */
    .legend {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 4px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      flex-wrap: wrap;
    }

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

    .legend-line {
      width: 22px;
      height: 0;
      border-top: 2.5px dashed #0284c7;
    }

    .legend-line.data-legend {
      border-top: 3px solid #ea580c;
    }

    @media (max-width: 440px) {
      .bottom-row {
        gap: 20px;
      }
      .block-name {
        font-size: 13px;
      }
      .block-role {
        font-size: 11px;
      }
      .cpu-title {
        font-size: 14px;
      }
      .legend {
        gap: 12px;
      }
    }
  </style>
</head>
<body>

  <div class="cpu-container">
    <div class="header-row">
      <span class="cpu-title">Central Processing Unit (CPU)</span>
      <span class="interactive-hint">Select a component</span>
    </div>

    <div class="diagram-area">
      
      <div class="cu-block active" id="cuBlock" onclick="selectUnit('cu')" role="button" tabindex="0" aria-label="Control Unit">
        <div class="block-name">Control Unit (CU)</div>
        <div class="block-role">Decodes instructions &amp; manages signal timing</div>
      </div>

      
      <svg class="control-bus-svg" viewBox="0 0 400 42" preserveAspectRatio="none">
        <defs>
          <marker id="arrowCu" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
            <path d="M 0 1 L 5 3 L 0 5 z" fill="#0284c7" />
          </marker>
        </defs>
        
        <path id="signalToAlu" class="signal-line active-flow" d="M 180,2 L 180,20 L 90,20 L 90,38" marker-end="url(#arrowCu)" />
        
        <path id="signalToReg" class="signal-line active-flow" d="M 220,2 L 220,20 L 310,20 L 310,38" marker-end="url(#arrowCu)" />
      </svg>

      
      <div class="bottom-section">
        <div class="bottom-row">
          <div class="alu-block" id="aluBlock" onclick="selectUnit('alu')" role="button" tabindex="0" aria-label="Arithmetic Logic Unit">
            <div class="block-name">Arithmetic Logic Unit (ALU)</div>
            <div class="block-role">Performs mathematical &amp; logical operations</div>
          </div>

          <div class="reg-block" id="regBlock" onclick="selectUnit('reg')" role="button" tabindex="0" aria-label="Registers and Cache">
            <div class="block-name">Registers &amp; Cache</div>
            <div class="block-role">Ultra-fast temporary storage for active data</div>
          </div>
        </div>

        
        <svg class="data-bus-svg" viewBox="0 0 44 32">
          <defs>
            <marker id="dataArrowL" viewBox="0 0 6 6" refX="1" refY="3" markerWidth="4" markerHeight="4" orient="auto">
              <path d="M 5 1 L 1 3 L 5 5 z" id="arrowLColor" fill="#64748b" />
            </marker>
            <marker id="dataArrowR" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto">
              <path d="M 1 1 L 5 3 L 1 5 z" id="arrowRColor" fill="#64748b" />
            </marker>
          </defs>
          <line id="dataLine" class="data-line" x1="4" y1="16" x2="40" y2="16" marker-start="url(#dataArrowL)" marker-end="url(#dataArrowR)" />
        </svg>
      </div>

      
      <div class="info-panel" id="infoPanel">
        <span><strong>Control Unit:</strong> Decodes program instructions and emits control signals to orchestrate the ALU and Registers.</span>
      </div>
    </div>

    
    <div class="legend">
      <div class="legend-item">
        <div class="legend-line"></div>
        <span>Control Signal (CU Command)</span>
      </div>
      <div class="legend-item">
        <div class="legend-line data-legend"></div>
        <span>Data Flow (Operands / Results)</span>
      </div>
    </div>
  </div>

  <script>
    const cu = document.getElementById('cuBlock');
    const alu = document.getElementById('aluBlock');
    const reg = document.getElementById('regBlock');
    const sigAlu = document.getElementById('signalToAlu');
    const sigReg = document.getElementById('signalToReg');
    const dataLine = document.getElementById('dataLine');
    const arrowL = document.getElementById('arrowLColor');
    const arrowR = document.getElementById('arrowRColor');
    const infoPanel = document.getElementById('infoPanel');

    function selectUnit(type) {
      cu.classList.remove('active');
      alu.classList.remove('active');
      reg.classList.remove('active');

      sigAlu.classList.remove('active-flow');
      sigReg.classList.remove('active-flow');
      dataLine.classList.remove('active-flow');
      arrowL.setAttribute('fill', '#64748b');
      arrowR.setAttribute('fill', '#64748b');

      if (type === 'cu') {
        cu.classList.add('active');
        sigAlu.classList.add('active-flow');
        sigReg.classList.add('active-flow');
        infoPanel.innerHTML = '<span><strong>Control Unit:</strong> Decodes program instructions and emits control signals to orchestrate the ALU and Registers.</span>';
      } else if (type === 'alu') {
        alu.classList.add('active');
        sigAlu.classList.add('active-flow');
        dataLine.classList.add('active-flow');
        arrowL.setAttribute('fill', '#ea580c');
        arrowR.setAttribute('fill', '#ea580c');
        infoPanel.innerHTML = '<span><strong>ALU:</strong> Receives operands via data flow from registers, computes the result, and writes it back.</span>';
      } else if (type === 'reg') {
        reg.classList.add('active');
        sigReg.classList.add('active-flow');
        dataLine.classList.add('active-flow');
        arrowL.setAttribute('fill', '#ea580c');
        arrowR.setAttribute('fill', '#ea580c');
        infoPanel.innerHTML = '<span><strong>Registers &amp; Cache:</strong> Hold immediate values and intermediate results exchanged continuously with the ALU.</span>';
      }
    }

    // Keyboard navigation support
    [cu, alu, reg].forEach(elem => {
      elem.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          elem.click();
        }
      });
    });
  </script>
</body>
</html>

Inside a Computer: The Main Components

<!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;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      user-select: none;
      -webkit-user-select: none;
    }

    /* Power Control Header */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .power-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 18px;
      border-radius: 999px;
      border: 2px solid #22c55e;
      background: #f0fdf4;
      color: #15803d;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
      transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    }

    .power-btn.off {
      background: #f8fafc;
      border-color: #94a3b8;
      color: #64748b;
    }

    .power-indicator {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 8px #22c55e;
      transition: background 0.25s ease, box-shadow 0.25s ease;
    }

    .power-btn.off .power-indicator {
      background: #94a3b8;
      box-shadow: none;
    }

    /* Cards Layout */
    .cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
    }

    .memory-card {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: relative;
      transition: border-color 0.3s ease, background-color 0.3s ease;
    }

    .memory-card.active {
      border-color: #22b7ff;
    }

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e2e8f0;
      padding-bottom: 8px;
    }

    .title-group {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .card-title {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0.5px;
    }

    .card-icon {
      font-size: 18px;
    }

    .tags {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .tag {
      font-size: 12px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      text-align: center;
      letter-spacing: 0.2px;
    }

    .tag-volatile {
      background: #fee2e2;
      color: #b91c1c;
      transition: opacity 0.3s ease;
    }

    .tag-nonvolatile {
      background: #dcfce7;
      color: #15803d;
    }

    .tag-mode {
      background: #e0f2fe;
      color: #0369a1;
    }

    /* Memory Storage Content */
    .storage-area {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px;
      min-height: 140px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      justify-content: center;
    }

    .data-slot {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 8px 10px;
      font-size: 13px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: opacity 0.35s ease, background 0.35s ease, border-color 0.35s ease, transform 0.2s ease;
    }

    .ram-slot {
      background: #f0f9ff;
      border-color: #bae6fd;
      color: #0369a1;
    }

    .rom-slot {
      background: #faf5ff;
      border-color: #e9d5ff;
      color: #6b21a8;
    }

    /* Power OFF State */
    .power-off .ram-slot {
      opacity: 0.15;
      background: #f8fafc;
      border-color: #e2e8f0;
      color: #94a3b8;
    }

    .power-off .rom-slot {
      opacity: 0.85;
    }

    .wipe-alert {
      position: absolute;
      inset: auto 12px 20px 12px;
      background: rgba(254, 242, 242, 0.95);
      border: 1px dashed #ef4444;
      color: #b91c1c;
      font-size: 13px;
      font-weight: 700;
      text-align: center;
      padding: 6px;
      border-radius: 6px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .power-off .wipe-alert {
      opacity: 1;
    }

    @media (max-width: 420px) {
      .cards-grid {
        grid-template-columns: 1fr;
      }
      .storage-area {
        min-height: 110px;
      }
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button id="powerBtn" class="power-btn" aria-label="Toggle Power Switch">
      <span class="power-indicator"></span>
      <span id="powerText">Power: ON</span>
    </button>
  </div>

  
  <div class="cards-grid" id="cardContainer">
    
    
    <div class="memory-card active" id="ramCard">
      <div class="card-header">
        <div class="title-group">
          <span class="card-icon">📋</span>
          <span class="card-title">RAM</span>
        </div>
      </div>

      <div class="tags">
        <span class="tag tag-volatile">Volatile (Lost at Power Off)</span>
        <span class="tag tag-mode">Read & Write</span>
      </div>

      <div class="storage-area">
        <div class="data-slot ram-slot">
          <span>Game App</span>
          <span>🎮</span>
        </div>
        <div class="data-slot ram-slot">
          <span>Browser Tab</span>
          <span>🌐</span>
        </div>
        <div class="data-slot ram-slot">
          <span>Active Video</span>
          <span>🎬</span>
        </div>
      </div>

      <div class="wipe-alert">⚠️ Data Wiped (Empty)</div>
    </div>

    
    <div class="memory-card" id="romCard">
      <div class="card-header">
        <div class="title-group">
          <span class="card-icon">🔒</span>
          <span class="card-title">ROM</span>
        </div>
      </div>

      <div class="tags">
        <span class="tag tag-nonvolatile">Non-Volatile (Permanent)</span>
        <span class="tag tag-mode">Read-Only</span>
      </div>

      <div class="storage-area">
        <div class="data-slot rom-slot">
          <span>BIOS / UEFI</span>
          <span>⚙️</span>
        </div>
        <div class="data-slot rom-slot">
          <span>Bootloader</span>
          <span>🚀</span>
        </div>
        <div class="data-slot rom-slot">
          <span>Startup Code</span>
          <span>⚡</span>
        </div>
      </div>
    </div>

  </div>

  <script>
    const powerBtn = document.getElementById('powerBtn');
    const powerText = document.getElementById('powerText');
    const cardContainer = document.getElementById('cardContainer');

    let isOn = true;

    function togglePower() {
      isOn = !isOn;
      
      if (isOn) {
        powerBtn.classList.remove('off');
        powerText.textContent = 'Power: ON';
        cardContainer.classList.remove('power-off');
      } else {
        powerBtn.classList.add('off');
        powerText.textContent = 'Power: OFF';
        cardContainer.classList.add('power-off');
      }
    }

    powerBtn.addEventListener('click', togglePower);
  </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; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
    
    body {
      width: 100%;
      background: #f8fafc;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px 8px;
      min-height: 100%;
      box-sizing: border-box;
      overflow-x: hidden;
    }

    .container {
      width: 100%;
      max-width: 460px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    /* Main visual stage */
    .main-stage {
      width: 100%;
      display: flex;
      align-items: stretch;
      justify-content: center;
      gap: 6px;
      position: relative;
    }

    /* Side metric indicators */
    .axis {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.01em;
      padding: 4px 0;
      width: 44px;
      flex-shrink: 0;
      text-align: center;
      user-select: none;
    }
    .axis-speed { color: #0284c7; }
    .axis-cap { color: #d97706; }

    .axis-arrow {
      font-size: 13px;
      line-height: 1;
    }
    .axis-line {
      flex: 1;
      width: 2px;
      margin: 4px 0;
      border-radius: 1px;
    }
    .line-speed { background: linear-gradient(to top, #bae6fd, #0284c7); }
    .line-cap { background: linear-gradient(to bottom, #fde68a, #d97706); }

    /* Pyramid Hierarchy Ladder */
    .ladder {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;
      position: relative;
      min-width: 0;
    }

    .tier {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 7px 10px;
      border-radius: 8px;
      border: 1.5px solid rgba(0,0,0,0.08);
      background: #fff;
      transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      cursor: pointer;
      position: relative;
      user-select: none;
      gap: 4px;
    }

    .tier:hover {
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      border-color: #94a3b8;
    }

    /* Tier pyramid sizing */
    .tier-4 { width: 70%; align-self: center; background: #eef2ff; border-color: #c7d2fe; }
    .tier-3 { width: 80%; align-self: center; background: #f0fdfa; border-color: #99f6e4; }
    .tier-2 { width: 90%; align-self: center; background: #f0fdf4; border-color: #bbf7d0; }
    .tier-1 { width: 100%; align-self: center; background: #fffbeb; border-color: #fde68a; }

    /* Active Highlight State */
    .tier.active {
      box-shadow: 0 0 0 2px #0284c7, 0 4px 12px rgba(2,132,199,0.18);
      background: #ffffff;
      border-color: #0284c7;
      z-index: 2;
    }

    .tier-left {
      display: flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
      overflow: hidden;
    }

    .tier-icon {
      font-size: 13px;
      flex-shrink: 0;
      line-height: 1;
    }

    .tier-name {
      font-size: 12px;
      font-weight: 700;
      color: #0f172a;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .tier-spec {
      font-size: 11px;
      font-weight: 700;
      color: #475569;
      text-align: right;
      white-space: nowrap;
      flex-shrink: 0;
      padding-left: 4px;
    }

    /* Animated data packet */
    .packet {
      position: absolute;
      width: 12px;
      height: 12px;
      background: #0284c7;
      border: 2px solid #ffffff;
      border-radius: 50%;
      box-shadow: 0 0 8px #0284c7;
      left: 12px;
      transform: translate(-50%, -50%);
      pointer-events: none;
      transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1), left 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
      z-index: 10;
      opacity: 0;
    }

    /* Info description card */
    .info-card {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 11.5px;
      min-height: 42px;
    }

    .info-title {
      font-weight: 700;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .info-details {
      display: flex;
      gap: 8px;
      color: #64748b;
      font-size: 11px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .info-pill {
      background: #f1f5f9;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 600;
      white-space: nowrap;
    }
    .info-pill.speed { color: #0369a1; background: #e0f2fe; }
    .info-pill.cap { color: #b45309; background: #fef3c7; }

    /* Bottom Control Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
    }

    .btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      padding: 6px 12px;
      border-radius: 18px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s ease, border-color 0.15s ease;
      user-select: none;
    }
    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    .btn-action {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }
    .btn-action:hover {
      background: #0369a1;
      border-color: #0369a1;
    }

    @media (max-width: 380px) {
      .axis { width: 38px; font-size: 9.5px; }
      .tier { padding: 6px 8px; }
      .tier-name { font-size: 11px; }
      .tier-spec { font-size: 10px; }
      .tier-4 { width: 72%; }
      .tier-3 { width: 82%; }
      .tier-2 { width: 92%; }
      .btn { font-size: 11px; padding: 5px 10px; }
      .info-card { font-size: 10.5px; padding: 6px 8px; }
    }
  </style>
</head>
<body>

  <div class="container">
    
    <div class="main-stage">
      
      <div class="axis axis-speed">
        <span class="axis-arrow">▲</span>
        <span>Faster</span>
        <div class="axis-line line-speed"></div>
        <span style="opacity: 0.7">Slower</span>
      </div>

      
      <div class="ladder" id="ladder">
        <div class="packet" id="packet"></div>

        <div class="tier tier-4" data-index="3" onclick="selectTier(3)">
          <div class="tier-left">
            <span class="tier-icon">⚡</span>
            <span class="tier-name">Registers</span>
          </div>
          <span class="tier-spec">Bytes</span>
        </div>

        <div class="tier tier-3" data-index="2" onclick="selectTier(2)">
          <div class="tier-left">
            <span class="tier-icon">💠</span>
            <span class="tier-name">CPU Cache</span>
          </div>
          <span class="tier-spec">MB</span>
        </div>

        <div class="tier tier-2" data-index="1" onclick="selectTier(1)">
          <div class="tier-left">
            <span class="tier-icon">🗂️</span>
            <span class="tier-name">RAM</span>
          </div>
          <span class="tier-spec">GB</span>
        </div>

        <div class="tier tier-1 active" data-index="0" onclick="selectTier(0)">
          <div class="tier-left">
            <span class="tier-icon">💾</span>
            <span class="tier-name">Storage</span>
          </div>
          <span class="tier-spec">TB</span>
        </div>
      </div>

      
      <div class="axis axis-cap">
        <span style="opacity: 0.7">Smaller</span>
        <div class="axis-line line-cap"></div>
        <span>Larger</span>
        <span class="axis-arrow">▼</span>
      </div>
    </div>

    
    <div class="info-card" id="infoCard">
      <div class="info-title" id="infoTitle">💾 Secondary Storage</div>
      <div class="info-details">
        <span class="info-pill cap" id="infoCap">Cap: 512GB - 4TB</span>
        <span class="info-pill speed" id="infoSpeed">Speed: ~100 µs (SSD)</span>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn btn-action" id="fetchBtn" onclick="fetchData()">
        <span>Launch App</span> ⚡
      </button>
      <button class="btn" id="stepBtn" onclick="nextStep()">
        <span>Next Level</span> →
      </button>
    </div>
  </div>

  <script>
    const tierData = [
      { name: "💾 Secondary Storage (SSD/HDD)", cap: "Cap: 512GB – 4TB", speed: "Speed: ~100 µs (Slower)" },
      { name: "🗂️ Main Memory (RAM)", cap: "Cap: 8GB – 64GB", speed: "Speed: ~50-100 ns (Fast)" },
      { name: "💠 CPU Cache (L1/L2/L3)", cap: "Cap: 2MB – 64MB", speed: "Speed: ~1-10 ns (Ultra-fast)" },
      { name: "⚡ CPU Registers", cap: "Cap: ~1-2 KB", speed: "Speed: < 1 ns (Instant)" }
    ];

    const tiers = Array.from(document.querySelectorAll('.tier')).reverse();
    const packet = document.getElementById('packet');
    const infoTitle = document.getElementById('infoTitle');
    const infoCap = document.getElementById('infoCap');
    const infoSpeed = document.getElementById('infoSpeed');

    let currentIndex = 0;
    let isFetching = false;

    function updatePacketPosition(idx, visible = true) {
      const tier = tiers[idx];
      const ladder = document.getElementById('ladder');
      const ladderRect = ladder.getBoundingClientRect();
      const tierRect = tier.getBoundingClientRect();

      const topOffset = (tierRect.top - ladderRect.top) + (tierRect.height / 2);
      const leftOffset = (tierRect.left - ladderRect.left) + 12;

      packet.style.top = topOffset + 'px';
      packet.style.left = leftOffset + 'px';
      packet.style.opacity = visible ? '1' : '0';
    }

    function selectTier(idx) {
      tiers.forEach((t, i) => {
        t.classList.toggle('active', i === idx);
      });
      currentIndex = idx;

      // Update info details
      const data = tierData[idx];
      if (data) {
        infoTitle.textContent = data.name;
        infoCap.textContent = data.cap;
        infoSpeed.textContent = data.speed;
      }

      updatePacketPosition(idx, true);
    }

    function nextStep() {
      if (isFetching) return;
      const next = (currentIndex + 1) % tiers.length;
      selectTier(next);
    }

    function fetchData() {
      if (isFetching) return;
      isFetching = true;
      let step = 0;

      selectTier(0);
      
      const interval = setInterval(() => {
        step++;
        if (step < tiers.length) {
          selectTier(step);
        } else {
          clearInterval(interval);
          isFetching = false;
        }
      }, 500);
    }

    window.addEventListener('load', () => {
      selectTier(0);
    });

    window.addEventListener('resize', () => {
      updatePacketPosition(currentIndex, true);
    });
  </script>
</body>
</html>

CS-10

Aligned learning resources

Related diagrams