<!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>ASCII 'C' to 8-Bit Binary</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      width: 100%;
      height: 100%;
      background: #ffffff;
      color: #1e2945;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px 8px;
    }

    .section-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: #64748b;
      margin-bottom: 4px;
    }

    /* Step 1: Denary Row */
    .step-box {
      width: 100%;
      max-width: 540px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .char-badge {
      background: #1e2945;
      color: #ffffff;
      font-weight: 800;
      font-size: 20px;
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .math-flow {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 600;
      color: #1e2945;
      flex-wrap: wrap;
    }

    .math-token {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      padding: 3px 8px;
      border-radius: 6px;
    }

    .denary-result {
      background: #e0f2fe;
      border: 1.5px solid #0284c7;
      color: #0369a1;
      font-weight: 800;
      font-size: 16px;
      padding: 3px 10px;
      border-radius: 6px;
    }

    /* Step 2: Binary Grid */
    .grid-container {
      width: 100%;
      max-width: 540px;
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 4px;
    }

    .bit-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 6px 2px;
      border-radius: 8px;
      background: #f8fafc;
      border: 1.5px solid rgba(0,0,0,0);
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    }

    .bit-col.active-step {
      background: #eff6ff;
      border-color: #3b82f6;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    .place-val {
      font-size: 13px;
      font-weight: 700;
      color: #475569;
    }

    .bit-pill {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 800;
      transition: all 0.25s ease;
    }

    .bit-pill.zero {
      background: #e2e8f0;
      color: #64748b;
    }

    .bit-pill.one {
      background: #10b981;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
    }

    .bit-rem {
      font-size: 10px;
      font-weight: 600;
      color: #059669;
      height: 14px;
      line-height: 14px;
      text-align: center;
    }

    .bit-rem.empty {
      color: transparent;
    }

    /* Output Box */
    .result-card {
      width: 100%;
      max-width: 540px;
      background: #f0fdf4;
      border: 2px solid #10b981;
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .result-label {
      font-size: 12px;
      font-weight: 700;
      color: #065f46;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .byte-display {
      display: flex;
      gap: 3px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 1px;
    }

    .byte-bit {
      display: inline-block;
      width: 22px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      border-radius: 4px;
    }

    .byte-bit.b1 {
      background: #10b981;
      color: #ffffff;
    }

    .byte-bit.b0 {
      background: #d1fae5;
      color: #047857;
    }

    /* Controls & Stepper */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .ctrl-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      font-size: 12px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      user-select: none;
    }

    .ctrl-btn:hover {
      background: #e2e8f0;
    }

    .ctrl-btn:active {
      background: #cbd5e1;
    }

    .dots {
      display: flex;
      gap: 4px;
    }

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

    .dot.active {
      background: #10b981;
    }

    @media (max-width: 380px) {
      .place-val { font-size: 11px; }
      .bit-pill { width: 28px; height: 28px; font-size: 14px; }
      .bit-rem { font-size: 9px; }
      .byte-display { font-size: 15px; }
      .byte-bit { width: 18px; height: 22px; line-height: 22px; }
      .char-badge { width: 30px; height: 30px; font-size: 16px; }
      .math-flow { font-size: 13px; }
    }
  </style>
</head>
<body>

  
  <div class="step-box">
    <div style="display:flex; align-items:center; gap:8px;">
      <div class="char-badge">'C'</div>
      <div class="math-flow">
        <span class="math-token">'A' = 65</span>
        <span>+ 2 →</span>
        <span class="denary-result">67</span>
      </div>
    </div>
    <div class="section-title" style="margin:0;">Step 1: Denary</div>
  </div>

  
  <div class="grid-container" id="grid">
    
    <div class="bit-col" onclick="setStep(0)">
      <span class="place-val">128</span>
      <div class="bit-pill zero" id="pill-0">0</div>
      <span class="bit-rem empty" id="rem-0">—</span>
    </div>
    
    <div class="bit-col" onclick="setStep(1)">
      <span class="place-val">64</span>
      <div class="bit-pill one" id="pill-1">1</div>
      <span class="bit-rem" id="rem-1">rem 3</span>
    </div>
    
    <div class="bit-col" onclick="setStep(2)">
      <span class="place-val">32</span>
      <div class="bit-pill zero" id="pill-2">0</div>
      <span class="bit-rem empty" id="rem-2">—</span>
    </div>
    
    <div class="bit-col" onclick="setStep(3)">
      <span class="place-val">16</span>
      <div class="bit-pill zero" id="pill-3">0</div>
      <span class="bit-rem empty" id="rem-3">—</span>
    </div>
    
    <div class="bit-col" onclick="setStep(4)">
      <span class="place-val">8</span>
      <div class="bit-pill zero" id="pill-4">0</div>
      <span class="bit-rem empty" id="rem-4">—</span>
    </div>
    
    <div class="bit-col" onclick="setStep(5)">
      <span class="place-val">4</span>
      <div class="bit-pill zero" id="pill-5">0</div>
      <span class="bit-rem empty" id="rem-5">—</span>
    </div>
    
    <div class="bit-col" onclick="setStep(6)">
      <span class="place-val">2</span>
      <div class="bit-pill one" id="pill-6">1</div>
      <span class="bit-rem" id="rem-6">rem 1</span>
    </div>
    
    <div class="bit-col" onclick="setStep(7)">
      <span class="place-val">1</span>
      <div class="bit-pill one" id="pill-7">1</div>
      <span class="bit-rem" id="rem-7">rem 0</span>
    </div>
  </div>

  
  <div class="result-card">
    <span class="result-label">8-Bit Byte:</span>
    <div class="byte-display">
      <span class="byte-bit b0">0</span>
      <span class="byte-bit b1">1</span>
      <span class="byte-bit b0">0</span>
      <span class="byte-bit b0">0</span>
      <span class="byte-bit b0">0</span>
      <span class="byte-bit b0">0</span>
      <span class="byte-bit b1">1</span>
      <span class="byte-bit b1">1</span>
    </div>
  </div>

  
  <div class="controls">
    <button class="ctrl-btn" onclick="prevStep()">◀</button>
    <button class="ctrl-btn" id="playBtn" onclick="togglePlay()">⏸ Pause</button>
    <button class="ctrl-btn" onclick="nextStep()">▶</button>
    <div class="dots" id="dots">
      <div class="dot" onclick="setStep(0)"></div>
      <div class="dot" onclick="setStep(1)"></div>
      <div class="dot" onclick="setStep(2)"></div>
      <div class="dot" onclick="setStep(3)"></div>
      <div class="dot" onclick="setStep(4)"></div>
      <div class="dot" onclick="setStep(5)"></div>
      <div class="dot" onclick="setStep(6)"></div>
      <div class="dot" onclick="setStep(7)"></div>
    </div>
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    const cols = document.querySelectorAll('.bit-col');
    const dots = document.querySelectorAll('.dot');

    function updateView() {
      cols.forEach((col, idx) => {
        if (idx === currentStep) {
          col.classList.add('active-step');
        } else {
          col.classList.remove('active-step');
        }
      });

      dots.forEach((dot, idx) => {
        if (idx === currentStep) {
          dot.classList.add('active');
        } else {
          dot.classList.remove('active');
        }
      });
    }

    function setStep(idx) {
      currentStep = (idx + 8) % 8;
      updateView();
    }

    function nextStep() {
      setStep(currentStep + 1);
    }

    function prevStep() {
      setStep(currentStep - 1);
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('playBtn').textContent = isPlaying ? '⏸ Pause' : '▶ Play';
      if (isPlaying) {
        startTimer();
      } else {
        clearInterval(timer);
      }
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        nextStep();
      }, 3000);
    }

    // Init
    updateView();
    startTimer();
  </script>
</body>
</html>

Representing Text with ASCII

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

    .stepper {
      display: flex;
      gap: 6px;
      align-items: center;
    }
    .step-btn {
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .step-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }

    .columns {
      display: flex;
      gap: 10px;
      width: 100%;
      max-width: 580px;
      justify-content: center;
    }

    .col-card {
      flex: 1;
      min-width: 0;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
      opacity: 0.45;
    }
    .col-card.active {
      opacity: 1;
      border-color: #0284c7;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12);
      background: #ffffff;
    }

    .col-tag {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .col-card.active .col-tag {
      color: #0284c7;
    }

    .bits {
      display: flex;
      gap: 2px;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 11px;
      font-weight: 700;
    }
    .bit {
      width: 12px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 3px;
      background: #e2e8f0;
      color: #94a3b8;
    }
    .bit.on {
      background: #0284c7;
      color: #ffffff;
    }

    .arrow {
      color: #94a3b8;
      font-size: 11px;
      line-height: 1;
    }

    .calc-box {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 11px;
      color: #475569;
      text-align: center;
      background: #f1f5f9;
      padding: 4px 6px;
      border-radius: 6px;
      width: 100%;
      white-space: nowrap;
    }
    .col-card.active .calc-box {
      background: #e0f2fe;
      color: #0369a1;
      font-weight: 600;
    }

    .char-badge {
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: #e2e8f0;
      color: #64748b;
      font-size: 22px;
      font-weight: 800;
      transition: all 0.2s ease;
    }
    .col-card.active .char-badge {
      background: #0284c7;
      color: #ffffff;
    }

    .summary-box {
      width: 100%;
      max-width: 580px;
      background: #f0fdf4;
      border: 2px solid #86efac;
      border-radius: 12px;
      padding: 8px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      transition: all 0.3s ease;
    }
    .summary-text {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: 4px;
      color: #15803d;
    }
    .cat-icon {
      font-size: 26px;
      line-height: 1;
    }

    @media (max-width: 400px) {
      .bits { gap: 1px; }
      .bit { width: 10px; height: 16px; font-size: 9px; }
      .calc-box { font-size: 9px; }
      .char-badge { width: 34px; height: 34px; font-size: 18px; }
      .summary-text { font-size: 17px; }
    }
  </style>
</head>
<body>

  <div class="stepper">
    <button class="step-btn" data-step="0">Byte 1</button>
    <button class="step-btn" data-step="1">Byte 2</button>
    <button class="step-btn" data-step="2">Byte 3</button>
    <button class="step-btn active" data-step="3">All</button>
  </div>

  <div class="columns">
    
    <div class="col-card active" id="card-0">
      <span class="col-tag">Byte 1</span>
      <div class="bits">
        <span class="bit">0</span>
        <span class="bit on">1</span>
        <span class="bit">0</span>
        <span class="bit">0</span>
        <span class="bit">0</span>
        <span class="bit">0</span>
        <span class="bit on">1</span>
        <span class="bit on">1</span>
      </div>
      <span class="arrow">↓</span>
      <div class="calc-box">64+2+1 = 67</div>
      <span class="arrow">↓</span>
      <div class="char-badge">C</div>
    </div>

    
    <div class="col-card active" id="card-1">
      <span class="col-tag">Byte 2</span>
      <div class="bits">
        <span class="bit">0</span>
        <span class="bit on">1</span>
        <span class="bit">0</span>
        <span class="bit">0</span>
        <span class="bit">0</span>
        <span class="bit">0</span>
        <span class="bit">0</span>
        <span class="bit on">1</span>
      </div>
      <span class="arrow">↓</span>
      <div class="calc-box">64+1 = 65</div>
      <span class="arrow">↓</span>
      <div class="char-badge">A</div>
    </div>

    
    <div class="col-card active" id="card-2">
      <span class="col-tag">Byte 3</span>
      <div class="bits">
        <span class="bit">0</span>
        <span class="bit on">1</span>
        <span class="bit">0</span>
        <span class="bit on">1</span>
        <span class="bit">0</span>
        <span class="bit on">1</span>
        <span class="bit">0</span>
        <span class="bit">0</span>
      </div>
      <span class="arrow">↓</span>
      <div class="calc-box">64+16+4 = 84</div>
      <span class="arrow">↓</span>
      <div class="char-badge">T</div>
    </div>
  </div>

  <div class="summary-box" id="summary">
    <span class="cat-icon">🐱</span>
    <span class="summary-text">CAT</span>
  </div>

  <script>
    const buttons = document.querySelectorAll('.step-btn');
    const cards = [
      document.getElementById('card-0'),
      document.getElementById('card-1'),
      document.getElementById('card-2')
    ];
    const summary = document.getElementById('summary');

    function showStep(idx) {
      buttons.forEach((btn, i) => btn.classList.toggle('active', i === idx));
      if (idx === 3) {
        cards.forEach(c => c.classList.add('active'));
        summary.style.opacity = '1';
      } else {
        cards.forEach((c, i) => c.classList.toggle('active', i === idx));
        summary.style.opacity = '0.4';
      }
    }

    buttons.forEach((btn, idx) => {
      btn.addEventListener('click', () => showStep(idx));
    });

    cards.forEach((card, idx) => {
      card.addEventListener('click', () => showStep(idx));
      card.style.cursor = 'pointer';
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }

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

    /* Preset selector bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-family: system-ui, -apple-system, sans-serif;
      font-size: 13px;
      color: #64748b;
      font-weight: 500;
    }

    .preset-btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      font-family: inherit;
      font-weight: 600;
      font-size: 13px;
      padding: 4px 10px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .preset-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .preset-btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
      box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
    }

    /* Code cards container */
    .cards-grid {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
    }

    .code-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: system-ui, -apple-system, sans-serif;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }

    .direction-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #e2e8f0;
      color: #334155;
      padding: 2px 7px;
      border-radius: 4px;
      font-size: 11px;
    }

    .code-line {
      font-size: 13.5px;
      line-height: 1.4;
      white-space: pre-wrap;
      word-break: break-word;
    }

    /* Syntax Highlighting */
    .kw { color: #2563eb; font-weight: 600; } /* Keyword: Dark Blue */
    .str { color: #16a34a; font-weight: 600; } /* String: Green */
    .num { color: #9333ea; font-weight: 600; } /* Number: Purple */
    .fn { color: #0284c7; } /* Method */
    .obj { color: #0d9488; } /* Object */
    .op { color: #64748b; } /* Operator */

    /* Output Callout */
    .output-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-top: 6px;
      border-top: 1px dashed #e2e8f0;
      font-size: 12px;
      color: #64748b;
      font-family: system-ui, -apple-system, sans-serif;
    }

    .output-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      padding: 3px 8px;
      border-radius: 6px;
      font-family: ui-monospace, SFMono-Regular, monospace;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
    }

    .val-highlight {
      transition: all 0.2s ease;
    }

    .binary-tag {
      font-size: 11px;
      color: #64748b;
      font-family: ui-monospace, SFMono-Regular, monospace;
    }
  </style>
</head>
<body>

  <div class="controls">
    <span>Try:</span>
    <button class="preset-btn active" onclick="selectPreset('A', 65, 'B', 66, this)">'A' / 66</button>
    <button class="preset-btn" onclick="selectPreset('a', 97, 'b', 98, this)">'a' / 98</button>
    <button class="preset-btn" onclick="selectPreset('0', 48, '1', 49, this)">'0' / 49</button>
    <button class="preset-btn" onclick="selectPreset('!', 33, '?', 63, this)">'!' / 63</button>
  </div>

  <div class="cards-grid">
    
    <div class="code-card">
      <div class="card-header">
        <span>Example 1</span>
        <span class="direction-badge">Char → Code</span>
      </div>
      <div class="code-line"><span class="kw">const</span> code <span class="op">=</span> <span class="str">'<span id="c1-char" class="val-highlight">A</span>'</span>.<span class="fn">charCodeAt</span>(<span class="num">0</span>);</div>
      <div class="output-row">
        <span>Returns:</span>
        <div class="output-badge">
          <span class="num" id="c1-out">65</span>
          <span class="binary-tag" id="c1-bin">(01000001)</span>
        </div>
      </div>
    </div>

    
    <div class="code-card">
      <div class="card-header">
        <span>Example 2</span>
        <span class="direction-badge">Code → Char</span>
      </div>
      <div class="code-line"><span class="kw">const</span> char <span class="op">=</span> <span class="obj">String</span>.<span class="fn">fromCharCode</span>(<span class="num" id="c2-code" class="val-highlight">66</span>);</div>
      <div class="output-row">
        <span>Returns:</span>
        <div class="output-badge">
          <span class="str">'<span id="c2-out">B</span>'</span>
          <span class="binary-tag" id="c2-bin">(01000010)</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    function toBin(num) {
      return num.toString(2).padStart(8, '0');
    }

    function selectPreset(char1, code1, char2, code2, btn) {
      document.querySelectorAll('.preset-btn').forEach(b => b.classList.remove('active'));
      if (btn) btn.classList.add('active');

      // Update Example 1
      document.getElementById('c1-char').textContent = char1;
      document.getElementById('c1-out').textContent = code1;
      document.getElementById('c1-bin').textContent = '(' + toBin(code1) + ')';

      // Update Example 2
      document.getElementById('c2-code').textContent = code2;
      document.getElementById('c2-out').textContent = char2;
      document.getElementById('c2-bin').textContent = '(' + toBin(code2) + ')';
    }
  </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: #f8fafc;
      color: #1e2945;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      user-select: none;
    }

    .ascii-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      cursor: pointer;
      transition: box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .ascii-card:hover, .ascii-card.selected {
      background: #ffffff;
      box-shadow: 0 2px 8px rgba(30, 41, 69, 0.08);
    }

    .ascii-card.selected {
      outline: 2px solid #22b7ff;
    }

    .left-group {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 120px;
    }

    .range-tag {
      font-size: 13px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      white-space: nowrap;
    }

    .title-tag {
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      white-space: nowrap;
    }

    .badges-group {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 7px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid transparent;
    }

    .badge .char {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-weight: 700;
    }

    .badge .code {
      font-size: 11px;
      opacity: 0.8;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }

    /* Soft Pastel Range Colors */
    .c-control .range-tag { background: #fee2e2; color: #991b1b; }
    .c-control .badge-anchor { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

    .c-digits .range-tag { background: #fef3c7; color: #92400e; }
    .c-digits .badge-anchor { background: #fffbeb; color: #b45309; border-color: #fde68a; }

    .c-upper .range-tag { background: #dbeafe; color: #1e40af; }
    .c-upper .badge-anchor { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }

    .c-lower .range-tag { background: #dcfce7; color: #166534; }
    .c-lower .badge-anchor { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }

    /* Special space anchor badge */
    .badge-space { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }

    /* Detail / Binary Bar */
    .inspector {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 48px;
    }

    .inspect-label {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }

    .inspect-val {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .bin-bits {
      letter-spacing: 1px;
      color: #0284c7;
      background: #f0f9ff;
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px solid #bae6fd;
    }

    @media (max-width: 420px) {
      body { padding: 8px; gap: 6px; }
      .ascii-card { padding: 6px 8px; }
      .left-group { min-width: 100px; gap: 6px; }
      .range-tag { font-size: 12px; padding: 2px 6px; }
      .title-tag { font-size: 13px; }
      .badge { font-size: 12px; padding: 2px 5px; }
      .inspector { padding: 8px 10px; }
    }
  </style>
</head>
<body>

  
  <div class="ascii-card c-control" data-char="CR" data-dec="13" data-bin="00001101">
    <div class="left-group">
      <span class="range-tag">0 – 31</span>
      <span class="title-tag">Control</span>
    </div>
    <div class="badges-group">
      <span class="badge badge-anchor"><span class="char">ESC</span><span class="code">27</span></span>
      <span class="badge badge-anchor"><span class="char">Enter</span><span class="code">13</span></span>
    </div>
  </div>

  
  <div class="ascii-card" style="padding: 6px 12px; background: #f8fafc;" data-char="Space" data-dec="32" data-bin="00100000">
    <div class="left-group">
      <span class="range-tag" style="background:#e2e8f0; color:#334155;">32</span>
      <span class="title-tag" style="font-size: 13px; color: #475569;">Space</span>
    </div>
    <div class="badges-group">
      <span class="badge badge-space"><span class="char">' '</span><span class="code">32</span></span>
    </div>
  </div>

  
  <div class="ascii-card c-digits" data-char="0" data-dec="48" data-bin="00110000">
    <div class="left-group">
      <span class="range-tag">48 – 57</span>
      <span class="title-tag">Digits</span>
    </div>
    <div class="badges-group">
      <span class="badge badge-anchor"><span class="char">'0'</span><span class="code">48</span></span>
      <span class="badge badge-anchor"><span class="char">'9'</span><span class="code">57</span></span>
    </div>
  </div>

  
  <div class="ascii-card c-upper selected" data-char="A" data-dec="65" data-bin="01000001">
    <div class="left-group">
      <span class="range-tag">65 – 90</span>
      <span class="title-tag">Uppercase</span>
    </div>
    <div class="badges-group">
      <span class="badge badge-anchor"><span class="char">'A'</span><span class="code">65</span></span>
      <span class="badge badge-anchor"><span class="char">'B'</span><span class="code">66</span></span>
      <span class="badge badge-anchor"><span class="char">'Z'</span><span class="code">90</span></span>
    </div>
  </div>

  
  <div class="ascii-card c-lower" data-char="a" data-dec="97" data-bin="01100001">
    <div class="left-group">
      <span class="range-tag">97 – 122</span>
      <span class="title-tag">Lowercase</span>
    </div>
    <div class="badges-group">
      <span class="badge badge-anchor"><span class="char">'a'</span><span class="code">97</span></span>
      <span class="badge badge-anchor"><span class="char">'b'</span><span class="code">98</span></span>
      <span class="badge badge-anchor"><span class="char">'z'</span><span class="code">122</span></span>
    </div>
  </div>

  
  <div class="inspector">
    <span class="inspect-label">Anchor Sample:</span>
    <div class="inspect-val">
      <span id="sampleName">'A' (65)</span>
      <span class="bin-bits" id="sampleBin">01000001</span>
    </div>
  </div>

  <script>
    const cards = document.querySelectorAll('.ascii-card');
    const sampleName = document.getElementById('sampleName');
    const sampleBin = document.getElementById('sampleBin');

    cards.forEach(card => {
      card.addEventListener('click', () => {
        cards.forEach(c => c.classList.remove('selected'));
        card.classList.add('selected');

        const ch = card.getAttribute('data-char');
        const dec = card.getAttribute('data-dec');
        const bin = card.getAttribute('data-bin');

        const displayChar = (ch === 'Space' || ch === 'CR') ? ch : `'${ch}'`;
        sampleName.textContent = `${displayChar} (${dec})`;
        sampleBin.textContent = bin;
      });
    });
  </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;
      -webkit-tap-highlight-color: transparent;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px 8px;
    }

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

    /* 8-Column Grid */
    .grid {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 6px;
      width: 100%;
    }

    .col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      user-select: none;
    }

    .header-val {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      transition: color 0.25s ease, text-decoration 0.25s ease;
      text-align: center;
    }

    .bit-box {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 800;
      border: 2px solid transparent;
      transition: all 0.25s ease;
    }

    /* Active (1) State: Bright Cyan/Blue */
    .col.active .header-val {
      color: #0284c7;
      text-decoration: none;
    }
    .col.active .bit-box {
      background: #e0f2fe;
      border-color: #0284c7;
      color: #0369a1;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.2);
    }
    .col.active .val-tag {
      color: #0284c7;
      background: #f0f9ff;
      border-color: #bae6fd;
    }

    /* Inactive (0) State: Dimmed Light Gray with Strike-through */
    .col.inactive .header-val {
      color: #94a3b8;
      text-decoration: line-through;
      text-decoration-thickness: 1.5px;
    }
    .col.inactive .bit-box {
      background: #f1f5f9;
      border-color: #e2e8f0;
      color: #94a3b8;
      box-shadow: none;
    }
    .col.inactive .val-tag {
      color: #cbd5e1;
      background: #f8fafc;
      border-color: #e2e8f0;
      text-decoration: line-through;
    }

    .val-tag {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 4px;
      border-radius: 4px;
      border: 1px solid transparent;
      transition: all 0.25s ease;
      min-width: 26px;
      text-align: center;
    }

    /* Equation Banner */
    .equation-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      text-align: center;
    }

    .equation {
      font-size: 19px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-variant-numeric: tabular-nums;
    }

    .eq-num {
      color: #0284c7;
      background: #e0f2fe;
      padding: 2px 8px;
      border-radius: 6px;
      border: 1px solid #bae6fd;
      transition: all 0.25s ease;
    }

    .eq-op {
      color: #94a3b8;
      font-weight: 600;
    }

    .eq-result {
      color: #0f172a;
      background: #ffffff;
      padding: 2px 10px;
      border-radius: 6px;
      border: 2px solid #0284c7;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15);
    }

    .hint {
      font-size: 12px;
      font-weight: 500;
      color: #64748b;
    }

    @media (max-width: 420px) {
      .grid { gap: 4px; }
      .header-val { font-size: 11px; }
      .bit-box { font-size: 18px; border-radius: 6px; }
      .val-tag { font-size: 10px; padding: 2px 2px; }
      .equation { font-size: 16px; gap: 4px; }
      .eq-num { padding: 1px 6px; }
      .eq-result { padding: 1px 8px; }
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="grid" id="bitGrid"></div>

    
    <div class="equation-card">
      <div class="equation" id="equationRow"></div>
      <div class="hint">Tap any bit to toggle 0 / 1</div>
    </div>
  </div>

  <script>
    const weights = [128, 64, 32, 16, 8, 4, 2, 1];
    let bits = [1, 0, 1, 0, 0, 1, 0, 1];

    const grid = document.getElementById('bitGrid');
    const eqRow = document.getElementById('equationRow');

    function render() {
      // Build 8 columns
      grid.innerHTML = '';
      bits.forEach((bit, i) => {
        const col = document.createElement('div');
        col.className = `col ${bit === 1 ? 'active' : 'inactive'}`;
        col.onclick = () => toggleBit(i);

        col.innerHTML = `
          <span class="header-val">${weights[i]}</span>
          <div class="bit-box">${bit}</div>
          <span class="val-tag">${bit === 1 ? weights[i] : '0'}</span>
        `;
        grid.appendChild(col);
      });

      // Build Equation
      const activeValues = weights.filter((w, i) => bits[i] === 1);
      const sum = activeValues.reduce((a, b) => a + b, 0);

      if (activeValues.length === 0) {
        eqRow.innerHTML = `<span class="eq-result">0</span>`;
      } else {
        const parts = activeValues.map(v => `<span class="eq-num">${v}</span>`).join('<span class="eq-op">+</span>');
        eqRow.innerHTML = `${parts} <span class="eq-op">=</span> <span class="eq-result">${sum}</span>`;
      }
    }

    function toggleBit(index) {
      bits[index] = bits[index] === 1 ? 0 : 1;
      render();
    }

    render();
  </script>
</body>
</html>

Binary Numbers: The Language of Computers

<!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 {
      width: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Mode selector tabs */
    .mode-bar {
      display: flex;
      justify-content: center;
      gap: 8px;
    }
    .tab-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 20px;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }
    .tab-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
    }

    /* View containers */
    .view {
      display: none;
      width: 100%;
      gap: 10px;
    }
    .view.active {
      display: flex;
    }

    /* 2-Panel Binary Layout */
    .binary-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      width: 100%;
    }
    .panel {
      flex: 1 1 150px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .panel.on-panel {
      border-color: #bae6fd;
      background: #f0f9ff;
    }

    .badge {
      font-size: 15px;
      font-weight: 700;
      padding: 3px 12px;
      border-radius: 8px;
      display: inline-block;
    }
    .badge-off {
      background: #e2e8f0;
      color: #475569;
    }
    .badge-on {
      background: #22b7ff;
      color: #ffffff;
    }

    /* SVG Schematic & Scope */
    .schematic-svg {
      width: 100%;
      max-width: 220px;
      height: 80px;
    }
    .scope-svg {
      width: 100%;
      max-width: 220px;
      height: 65px;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }

    /* Noise comparison view */
    .noise-panel {
      width: 100%;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .noise-svg {
      width: 100%;
      max-width: 440px;
      height: 165px;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }

    .label-row {
      display: flex;
      justify-content: space-between;
      width: 100%;
      max-width: 220px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
    }
  </style>
</head>
<body>

  
  <div class="mode-bar">
    <button class="tab-btn active" id="btnBinary" onclick="switchTab('binary')">Binary (2 States)</button>
    <button class="tab-btn" id="btnNoise" onclick="switchTab('noise')">Why Not 10 Levels?</button>
  </div>

  
  <div id="binaryView" class="view binary-grid active">
    
    
    <div class="panel">
      <div class="badge badge-off">OFF / 0</div>
      
      
      <svg class="schematic-svg" viewBox="0 0 160 60">
        
        <line x1="10" y1="30" x2="45" y2="30" stroke="#94a3b8" stroke-width="3" stroke-linecap="round"/>
        <circle cx="45" cy="30" r="4" fill="#94a3b8"/>
        
        <line x1="45" y1="30" x2="105" y2="12" stroke="#64748b" stroke-width="3" stroke-linecap="round"/>
        
        <circle cx="115" cy="30" r="4" fill="#94a3b8"/>
        <line x1="115" y1="30" x2="150" y2="30" stroke="#94a3b8" stroke-width="3" stroke-linecap="round"/>
        <text x="80" y="52" fill="#ef4444" font-size="11" font-weight="700" text-anchor="middle">NO CURRENT</text>
      </svg>

      
      <svg class="scope-svg" viewBox="0 0 160 50">
        <line x1="0" y1="38" x2="160" y2="38" stroke="#f1f5f9" stroke-width="1"/>
        <line x1="0" y1="12" x2="160" y2="12" stroke="#f1f5f9" stroke-width="1"/>
        <path d="M 0,38 L 160,38" stroke="#94a3b8" stroke-width="3" fill="none"/>
        <text x="8" y="15" fill="#94a3b8" font-size="10" font-weight="600">3.3V</text>
        <text x="8" y="45" fill="#64748b" font-size="10" font-weight="700">0V</text>
      </svg>
      <div class="label-row">
        <span>0V (Low)</span>
        <span>Open Circuit</span>
      </div>
    </div>

    
    <div class="panel on-panel">
      <div class="badge badge-on">ON / 1</div>
      
      
      <svg class="schematic-svg" viewBox="0 0 160 60">
        
        <line x1="10" y1="30" x2="45" y2="30" stroke="#22b7ff" stroke-width="3" stroke-linecap="round"/>
        <circle cx="45" cy="30" r="4" fill="#22b7ff"/>
        
        <line x1="45" y1="30" x2="115" y2="30" stroke="#22b7ff" stroke-width="3.5" stroke-linecap="round"/>
        
        <circle cx="115" cy="30" r="4" fill="#22b7ff"/>
        <line x1="115" y1="30" x2="150" y2="30" stroke="#22b7ff" stroke-width="3" stroke-linecap="round"/>
        
        <circle cx="28" cy="30" r="2.5" fill="#ffffff"/>
        <circle cx="80" cy="30" r="2.5" fill="#ffffff"/>
        <circle cx="132" cy="30" r="2.5" fill="#ffffff"/>
        <text x="80" y="52" fill="#0284c7" font-size="11" font-weight="700" text-anchor="middle">CURRENT FLOWS</text>
      </svg>

      
      <svg class="scope-svg" viewBox="0 0 160 50">
        <line x1="0" y1="38" x2="160" y2="38" stroke="#f1f5f9" stroke-width="1"/>
        <line x1="0" y1="12" x2="160" y2="12" stroke="#f1f5f9" stroke-width="1"/>
        <path d="M 0,12 L 160,12" stroke="#22b7ff" stroke-width="3" fill="none"/>
        <text x="8" y="15" fill="#0284c7" font-size="10" font-weight="700">3.3V</text>
        <text x="8" y="45" fill="#94a3b8" font-size="10" font-weight="600">0V</text>
      </svg>
      <div class="label-row">
        <span>3.3V (High)</span>
        <span>Closed Circuit</span>
      </div>
    </div>

  </div>

  
  <div id="noiseView" class="view">
    <div class="noise-panel">
      <svg class="noise-svg" viewBox="0 0 320 120">
        
        <rect x="15" y="12" width="135" height="36" rx="4" fill="#e0f2fe"/>
        <text x="82" y="34" fill="#0284c7" font-size="10" font-weight="700" text-anchor="middle">1 (HIGH: 3.3V)</text>

        <rect x="15" y="72" width="135" height="36" rx="4" fill="#f1f5f9"/>
        <text x="82" y="94" fill="#475569" font-size="10" font-weight="700" text-anchor="middle">0 (LOW: 0V)</text>

        
        <line x1="145" y1="48" x2="145" y2="72" stroke="#22b7ff" stroke-width="1.5" stroke-dasharray="2 2"/>
        <text x="82" y="63" fill="#059669" font-size="9" font-weight="700" text-anchor="middle">✓ Safe Margin</text>

        
        <line x1="165" y1="10" x2="165" y2="110" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3 3"/>

        
        <g stroke="#e2e8f0" stroke-width="1">
          <line x1="180" y1="15" x2="305" y2="15"/>
          <line x1="180" y1="25" x2="305" y2="25"/>
          <line x1="180" y1="35" x2="305" y2="35"/>
          <line x1="180" y1="45" x2="305" y2="45"/>
          <line x1="180" y1="55" x2="305" y2="55"/>
          <line x1="180" y1="65" x2="305" y2="65"/>
          <line x1="180" y1="75" x2="305" y2="75"/>
          <line x1="180" y1="85" x2="305" y2="85"/>
          <line x1="180" y1="95" x2="305" y2="95"/>
          <line x1="180" y1="105" x2="305" y2="105"/>
        </g>
        
        <path d="M 180,45 Q 195,30 210,48 T 240,40 T 270,58 T 305,42" stroke="#ef4444" stroke-width="2" fill="none"/>
        <text x="242" y="80" fill="#dc2626" font-size="9" font-weight="700" text-anchor="middle">⚠ Noise = Errors</text>
      </svg>
      <div class="label-row" style="max-width:320px;">
        <span style="color:#0284c7;">2 States: Clear &amp; Reliable</span>
        <span style="color:#dc2626;">10 Levels: Fragile</span>
      </div>
    </div>
  </div>

  <script>
    function switchTab(mode) {
      const btnBin = document.getElementById('btnBinary');
      const btnNoise = document.getElementById('btnNoise');
      const viewBin = document.getElementById('binaryView');
      const viewNoise = document.getElementById('noiseView');

      if (mode === 'binary') {
        btnBin.classList.add('active');
        btnNoise.classList.remove('active');
        viewBin.classList.add('active');
        viewNoise.classList.remove('active');
      } else {
        btnNoise.classList.add('active');
        btnBin.classList.remove('active');
        viewNoise.classList.add('active');
        viewBin.classList.remove('active');
      }
    }
  </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>8-Bit Byte Place Values</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px 8px;
    }

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

    .byte-grid {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 6px;
      width: 100%;
    }

    .col-header {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }

    .bit-col {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .cell {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      text-align: center;
      transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    }

    /* Power Row */
    .power-cell {
      background: #e0f2fe;
      border: 1px solid #bae6fd;
      color: #0369a1;
      font-weight: 700;
      font-size: 14px;
      padding: 8px 2px;
    }

    .power-cell sup {
      font-size: 11px;
      font-weight: 800;
    }

    /* Weight Row */
    .weight-cell {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      font-weight: 800;
      font-size: 16px;
      padding: 12px 2px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }

    /* Bit Toggle Row */
    .bit-toggle {
      background: #f1f5f9;
      border: 2px solid #e2e8f0;
      color: #94a3b8;
      font-weight: 800;
      font-size: 18px;
      padding: 10px 2px;
      cursor: pointer;
      border-radius: 8px;
      transition: all 0.2s ease;
    }

    .bit-toggle:hover {
      border-color: #38bdf8;
    }

    .bit-toggle.on {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
    }

    /* Column active state */
    .bit-col.active .weight-cell {
      background: #f0f9ff;
      border-color: #38bdf8;
      color: #0369a1;
    }

    /* Significance Labels */
    .significance-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-top: 4px;
      padding: 0 4px;
    }

    .badge {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      max-width: 140px;
    }

    .badge.left {
      align-items: flex-start;
      text-align: left;
    }

    .badge.right {
      align-items: flex-end;
      text-align: right;
    }

    .badge-tag {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.5px;
      padding: 3px 8px;
      border-radius: 6px;
      background: #1e2945;
      color: #ffffff;
      display: inline-block;
    }

    .badge.left .badge-tag {
      background: #0f766e;
    }

    .badge.right .badge-tag {
      background: #7c3aed;
    }

    .badge-desc {
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      line-height: 1.2;
      margin-top: 2px;
    }

    /* Output summary bar */
    .summary-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 8px;
      padding: 8px 16px;
      background: #f8fafc;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
    }

    .sum-value {
      color: #0284c7;
      font-size: 18px;
      font-weight: 800;
      min-width: 32px;
      display: inline-block;
      text-align: left;
    }

    .pointer-arrow {
      font-size: 14px;
      color: #64748b;
    }

    @media (max-width: 480px) {
      .diagram {
        gap: 8px;
      }
      .byte-grid {
        gap: 3px;
      }
      .power-cell {
        font-size: 12px;
        padding: 6px 1px;
      }
      .power-cell sup {
        font-size: 9px;
      }
      .weight-cell {
        font-size: 13px;
        padding: 8px 1px;
      }
      .bit-toggle {
        font-size: 15px;
        padding: 8px 1px;
      }
      .badge-tag {
        font-size: 11px;
        padding: 2px 6px;
      }
      .badge-desc {
        font-size: 11px;
      }
      .summary-bar {
        font-size: 13px;
        padding: 6px 12px;
      }
    }
  </style>
</head>
<body>
  <div class="diagram">
    <div class="byte-grid">
      
      <div class="bit-col" id="col-7">
        <div class="cell power-cell">2<sup>7</sup></div>
        <div class="cell weight-cell">128</div>
        <button class="cell bit-toggle" data-val="128" data-bit="7" aria-label="Toggle bit 7">0</button>
      </div>

      
      <div class="bit-col" id="col-6">
        <div class="cell power-cell">2<sup>6</sup></div>
        <div class="cell weight-cell">64</div>
        <button class="cell bit-toggle" data-val="64" data-bit="6" aria-label="Toggle bit 6">0</button>
      </div>

      
      <div class="bit-col" id="col-5">
        <div class="cell power-cell">2<sup>5</sup></div>
        <div class="cell weight-cell">32</div>
        <button class="cell bit-toggle" data-val="32" data-bit="5" aria-label="Toggle bit 5">0</button>
      </div>

      
      <div class="bit-col" id="col-4">
        <div class="cell power-cell">2<sup>4</sup></div>
        <div class="cell weight-cell">16</div>
        <button class="cell bit-toggle" data-val="16" data-bit="4" aria-label="Toggle bit 4">0</button>
      </div>

      
      <div class="bit-col" id="col-3">
        <div class="cell power-cell">2<sup>3</sup></div>
        <div class="cell weight-cell">8</div>
        <button class="cell bit-toggle" data-val="8" data-bit="3" aria-label="Toggle bit 3">0</button>
      </div>

      
      <div class="bit-col" id="col-2">
        <div class="cell power-cell">2<sup>2</sup></div>
        <div class="cell weight-cell">4</div>
        <button class="cell bit-toggle" data-val="4" data-bit="2" aria-label="Toggle bit 2">0</button>
      </div>

      
      <div class="bit-col" id="col-1">
        <div class="cell power-cell">2<sup>1</sup></div>
        <div class="cell weight-cell">2</div>
        <button class="cell bit-toggle" data-val="2" data-bit="1" aria-label="Toggle bit 1">0</button>
      </div>

      
      <div class="bit-col" id="col-0">
        <div class="cell power-cell">2<sup>0</sup></div>
        <div class="cell weight-cell">1</div>
        <button class="cell bit-toggle" data-val="1" data-bit="0" aria-label="Toggle bit 0">0</button>
      </div>
    </div>

    
    <div class="significance-row">
      <div class="badge left">
        <span class="pointer-arrow">▲</span>
        <span class="badge-tag">MSB</span>
        <span class="badge-desc">Most Significant Bit</span>
      </div>

      <div class="badge right">
        <span class="pointer-arrow">▲</span>
        <span class="badge-tag">LSB</span>
        <span class="badge-desc">Least Significant Bit</span>
      </div>
    </div>

    
    <div class="summary-bar">
      <span>Total Value:</span>
      <span class="sum-value" id="totalSum">0</span>
    </div>
  </div>

  <script>
    const toggles = document.querySelectorAll('.bit-toggle');
    const sumDisplay = document.getElementById('totalSum');

    function updateSum() {
      let total = 0;
      toggles.forEach(btn => {
        const val = parseInt(btn.dataset.val, 10);
        const bit = btn.dataset.bit;
        const col = document.getElementById(`col-${bit}`);
        if (btn.classList.contains('on')) {
          total += val;
          col.classList.add('active');
        } else {
          col.classList.remove('active');
        }
      });
      sumDisplay.textContent = total;
    }

    toggles.forEach(btn => {
      btn.addEventListener('click', () => {
        const isOn = btn.classList.toggle('on');
        btn.textContent = isOn ? '1' : '0';
        updateSum();
      });
    });
  </script>
</body>
</html>

CS-1

Aligned learning resources

Related diagrams