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

    .controls {
      display: flex;
      gap: 6px;
      margin-bottom: 8px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
    }

    .tab-btn {
      flex: 1;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      background: #f8fafc;
      color: #475569;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }

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

    .diagram-stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      aspect-ratio: 1.1 / 1;
      margin: auto 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Outer Circle: Bases */
    .circle-bases {
      position: absolute;
      inset: 2%;
      background: #f1f5f9;
      border: 2px solid #94a3b8;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding-top: 14px;
      transition: opacity 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
    }

    .bases-header {
      text-align: center;
      line-height: 1.2;
    }

    .bases-title {
      font-size: 15px;
      font-weight: 700;
      color: #334155;
      letter-spacing: -0.2px;
    }

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

    /* Insoluble examples placed in upper region of Bases circle */
    .insoluble-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      margin-top: 10px;
      padding: 0 16px;
      z-index: 2;
      transition: opacity 0.3s ease;
    }

    .chip {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 3px 8px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      white-space: nowrap;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }

    .chip sub {
      font-size: 9px;
      vertical-align: sub;
    }

    .chip .tag {
      font-size: 10px;
      color: #64748b;
      font-weight: 500;
      margin-left: 2px;
    }

    /* Inner Nested Circle: Alkalis */
    .circle-alkalis {
      position: absolute;
      bottom: 12px;
      width: 78%;
      height: 56%;
      background: #e0f2fe;
      border: 2px solid #0284c7;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px 12px 14px 12px;
      z-index: 3;
      transition: all 0.3s ease;
    }

    .alkalis-title {
      font-size: 14px;
      font-weight: 700;
      color: #0369a1;
      line-height: 1.2;
    }

    .alkalis-subtitle {
      font-size: 11px;
      color: #0284c7;
      font-weight: 600;
      margin-bottom: 6px;
    }

    .soluble-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 5px;
    }

    .chip-alkali {
      background: #ffffff;
      border: 1px solid #7dd3fc;
      color: #0369a1;
      border-radius: 6px;
      padding: 3px 7px;
      font-size: 11px;
      font-weight: 600;
      box-shadow: 0 1px 2px rgba(2, 132, 199, 0.1);
    }

    .chip-alkali sub {
      font-size: 9px;
      vertical-align: sub;
    }

    /* Dimming styles based on active filter */
    .stage-alkalis-only .insoluble-group,
    .stage-alkalis-only .bases-header {
      opacity: 0.25;
    }

    .stage-insoluble-only .circle-alkalis {
      opacity: 0.2;
    }

    /* Caption footer */
    .caption-box {
      margin-top: 8px;
      padding: 8px 14px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      text-align: center;
      width: 100%;
      max-width: 480px;
    }

    .caption-text {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
    }

    .caption-sub {
      font-size: 11px;
      color: #64748b;
      margin-top: 2px;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="tab-btn active" data-mode="all" onclick="setMode('all')">All Bases</button>
    <button class="tab-btn" data-mode="insoluble" onclick="setMode('insoluble')">Insoluble Bases</button>
    <button class="tab-btn" data-mode="alkalis" onclick="setMode('alkalis')">Alkalis (Soluble)</button>
  </div>

  <div id="stage" class="diagram-stage">
    
    <div class="circle-bases">
      <div class="bases-header">
        <div class="bases-title">Bases</div>
        <div class="bases-subtitle">Neutralise acids</div>
      </div>

      
      <div class="insoluble-group">
        <div class="chip">CuO <span class="tag">(solid)</span></div>
        <div class="chip">Fe<sub>2</sub>O<sub>3</sub> <span class="tag">(solid)</span></div>
        <div class="chip">CaCO<sub>3</sub> <span class="tag">(solid)</span></div>
      </div>

      
      <div class="circle-alkalis">
        <div class="alkalis-title">Alkalis</div>
        <div class="alkalis-subtitle">Soluble bases (form OH⁻)</div>
        <div class="soluble-group">
          <div class="chip-alkali">NaOH <span style="font-size:10px; opacity:0.8;">(aq)</span></div>
          <div class="chip-alkali">KOH <span style="font-size:10px; opacity:0.8;">(aq)</span></div>
          <div class="chip-alkali">Ca(OH)<sub>2</sub> <span style="font-size:10px; opacity:0.8;">(aq)</span></div>
        </div>
      </div>
    </div>
  </div>

  <div class="caption-box">
    <div class="caption-text">All alkalis are bases, but not all bases are alkalis.</div>
    <div id="subtext" class="caption-sub">An alkali is simply a base that dissolves in water.</div>
  </div>

  <script>
    function setMode(mode) {
      const stage = document.getElementById('stage');
      const subtext = document.getElementById('subtext');
      const buttons = document.querySelectorAll('.tab-btn');

      buttons.forEach(btn => {
        btn.classList.toggle('active', btn.getAttribute('data-mode') === mode);
      });

      stage.className = 'diagram-stage';

      if (mode === 'insoluble') {
        stage.classList.add('stage-insoluble-only');
        subtext.textContent = 'Insoluble metal oxides & carbonates do not dissolve in water.';
      } else if (mode === 'alkalis') {
        stage.classList.add('stage-alkalis-only');
        subtext.textContent = 'Alkalis dissolve in water to release hydroxide ions (OH⁻).';
      } else {
        subtext.textContent = 'An alkali is simply a base that dissolves in water.';
      }
    }
  </script>
</body>
</html>

Defining Acids, Bases, and Soluble Alkalis

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Insoluble Base vs Soluble Alkali</title>
  <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: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .main-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      width: 100%;
      max-width: 520px;
    }

    /* Stack vertically on narrow mobile screens to avoid cramped containers */
    @media (max-width: 420px) {
      .main-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 260px;
      }
    }

    .beaker-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: transparent;
      padding: 4px;
    }

    .formula-tag {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 6px;
      text-align: center;
    }

    .beaker-container {
      position: relative;
      width: 100%;
      max-width: 155px;
      height: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg.beaker-svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .status-badge {
      margin-top: 8px;
      text-align: center;
      line-height: 1.35;
    }

    .badge-title {
      font-size: 14px;
      font-weight: 700;
      display: block;
    }

    .badge-sub {
      font-size: 12px;
      font-weight: 600;
      display: inline-block;
      margin-top: 2px;
      padding: 2px 8px;
      border-radius: 6px;
    }

    .insoluble-title {
      color: #334155;
    }
    .insoluble-sub {
      color: #475569;
      background: #f1f5f9;
    }

    .alkali-title {
      color: #6b21a8;
    }
    .alkali-sub {
      color: #6b21a8;
      background: #f3e8ff;
    }

    .ion-label {
      font-size: 11px;
      font-weight: 700;
      font-family: system-ui, sans-serif;
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="beaker-card">
      <div class="formula-tag">CuO (Copper oxide)</div>
      <div class="beaker-container">
        <svg class="beaker-svg" viewBox="0 0 160 160">
          
          <path d="M 22 25 L 30 25 L 30 142 Q 30 152 42 152 L 118 152 Q 130 152 130 142 L 130 25 L 138 25" 
                fill="none" stroke="#94a3b8" stroke-width="3" stroke-linecap="round"/>
          
          
          <path d="M 33 65 Q 80 63 127 65 L 127 140 Q 127 149 118 149 L 42 149 Q 33 149 33 140 Z" 
                fill="#e0f2fe" opacity="0.85"/>
          <path d="M 33 65 Q 80 62 127 65" fill="none" stroke="#bae6fd" stroke-width="2"/>

          
          <text x="80" y="94" text-anchor="middle" fill="#0284c7" font-size="11.5" font-weight="600">Water</text>

          
          <path d="M 40 148 C 52 136, 70 134, 80 136 C 90 134, 108 136, 120 148 Z" fill="#1e293b"/>
          <circle cx="54" cy="143" r="2.5" fill="#0f172a"/>
          <circle cx="68" cy="140" r="2.5" fill="#334155"/>
          <circle cx="82" cy="139" r="3" fill="#0f172a"/>
          <circle cx="96" cy="141" r="2.5" fill="#334155"/>
          <circle cx="106" cy="144" r="2.5" fill="#0f172a"/>

          
          <rect x="34" y="112" width="92" height="18" rx="4" fill="#ffffff" stroke="#cbd5e1" stroke-width="1"/>
          <text x="80" y="125" text-anchor="middle" fill="#334155" font-size="9.5" font-weight="700">Solid stays undissolved</text>
        </svg>
      </div>
      <div class="status-badge">
        <span class="badge-title insoluble-title">Insoluble Base</span>
        <span class="badge-sub insoluble-sub">Not an Alkali</span>
      </div>
    </div>

    
    <div class="beaker-card">
      <div class="formula-tag">NaOH (Sodium hydroxide)</div>
      <div class="beaker-container">
        <svg class="beaker-svg" viewBox="0 0 160 160">
          
          <path d="M 22 25 L 30 25 L 30 142 Q 30 152 42 152 L 118 152 Q 130 152 130 142 L 130 25 L 138 25" 
                fill="none" stroke="#94a3b8" stroke-width="3" stroke-linecap="round"/>
          
          
          <path d="M 33 65 Q 80 63 127 65 L 127 140 Q 127 149 118 149 L 42 149 Q 33 149 33 140 Z" 
                fill="#d8b4fe" opacity="0.6"/>
          <path d="M 33 65 Q 80 62 127 65" fill="none" stroke="#a855f7" stroke-width="2"/>

          
          <g transform="translate(80, 77)">
            <rect x="-57" y="-9" width="114" height="18" rx="9" fill="#ffffff" stroke="#9333ea" stroke-width="1.2"/>
            <text x="0" y="3.5" text-anchor="middle" fill="#581c87" font-size="9.5" font-weight="700">Turns Purple (pH 14)</text>
          </g>

          
          
          <g transform="translate(56, 105)">
            <circle cx="0" cy="0" r="12" fill="#7c3aed"/>
            <text x="0" y="4" text-anchor="middle" fill="#ffffff" class="ion-label">OH⁻</text>
          </g>

          
          <g transform="translate(104, 105)">
            <circle cx="0" cy="0" r="11" fill="#2563eb"/>
            <text x="0" y="4" text-anchor="middle" fill="#ffffff" class="ion-label">Na⁺</text>
          </g>

          
          <g transform="translate(58, 134)">
            <circle cx="0" cy="0" r="11" fill="#2563eb"/>
            <text x="0" y="4" text-anchor="middle" fill="#ffffff" class="ion-label">Na⁺</text>
          </g>

          
          <g transform="translate(102, 134)">
            <circle cx="0" cy="0" r="12" fill="#7c3aed"/>
            <text x="0" y="4" text-anchor="middle" fill="#ffffff" class="ion-label">OH⁻</text>
          </g>
        </svg>
      </div>
      <div class="status-badge">
        <span class="badge-title alkali-title">Soluble Base = Alkali</span>
        <span class="badge-sub alkali-sub">Releases OH⁻ ions</span>
      </div>
    </div>
  </div>

</body>
</html>

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

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

    .header-row {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }

    .controls {
      display: flex;
      gap: 4px;
      background: #f1f5f9;
      padding: 3px;
      border-radius: 8px;
    }

    .btn-step {
      border: none;
      background: transparent;
      color: #64748b;
      font-size: 12px;
      font-weight: 600;
      padding: 5px 9px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-step.active {
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .btn-play {
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #1e2945;
      width: 28px;
      height: 28px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }

    /* Stage Area */
    .stage {
      position: relative;
      width: 100%;
      height: 180px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding: 30px 10px 10px 10px;
      overflow: visible;
    }

    /* Beakers */
    .beaker-wrapper {
      position: relative;
      width: 72px;
      height: 95px;
      z-index: 5;
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    }

    .beaker-label {
      position: absolute;
      top: -24px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      white-space: nowrap;
      z-index: 10;
    }

    .label-base { color: #b45309; }
    .label-acid { color: #e11d48; }

    .beaker {
      width: 100%;
      height: 100%;
      border: 2px solid #94a3b8;
      border-top: none;
      border-radius: 0 0 10px 10px;
      background: rgba(248, 250, 252, 0.85);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      position: relative;
      overflow: hidden;
    }

    .liquid-base {
      width: 100%;
      height: 58px;
      background: rgba(254, 240, 138, 0.6);
      border-radius: 0 0 8px 8px;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      gap: 3px;
      padding: 3px;
      transition: height 0.4s ease;
    }

    .liquid-acid {
      width: 100%;
      height: 58px;
      background: rgba(254, 205, 211, 0.6);
      border-radius: 0 0 8px 8px;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      gap: 3px;
      padding: 3px;
      transition: height 0.4s ease;
    }

    /* Reaction Chamber */
    .chamber-wrapper {
      position: relative;
      width: 125px;
      height: 125px;
      z-index: 2;
    }

    .chamber-label {
      position: absolute;
      top: -24px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      white-space: nowrap;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .chamber {
      width: 100%;
      height: 100%;
      border: 2px dashed #cbd5e1;
      border-top: none;
      border-radius: 0 0 16px 16px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      background: #f8fafc;
      transition: border 0.3s ease;
      overflow: hidden;
    }

    .chamber-liquid {
      width: 100%;
      height: 0;
      background: #e0f2fe;
      border-radius: 0 0 14px 14px;
      transition: height 0.5s ease, background-color 0.4s ease;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      gap: 4px;
      padding: 4px;
      overflow: hidden;
    }

    /* Particle Tags */
    .particle {
      font-size: 10px;
      font-weight: 700;
      padding: 2px 5px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 2px rgba(0,0,0,0.06);
      white-space: nowrap;
    }

    .p-cu { background: #fed7aa; color: #9a3412; }
    .p-o  { background: #fef08a; color: #854d0e; }
    .p-h  { background: #fecdd3; color: #be123c; }
    .p-cl { background: #bbf7d0; color: #15803d; }
    .p-h2o { background: #bae6fd; color: #0369a1; border: 1px solid #7dd3fc; }
    .p-salt { background: #e2e8f0; color: #334155; border: 1px solid #94a3b8; }

    /* Flow Streams */
    .stream {
      position: absolute;
      top: 36px;
      width: 4px;
      height: 48px;
      border-radius: 2px;
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 4;
      pointer-events: none;
    }
    .stream-base {
      left: 88px;
      background: linear-gradient(to bottom, #fde047, #38bdf8);
      transform: rotate(35deg);
    }
    .stream-acid {
      right: 88px;
      background: linear-gradient(to bottom, #fda4af, #38bdf8);
      transform: rotate(-35deg);
    }

    /* Equations Section */
    .eq-box {
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .eq-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
    }

    .eq-item {
      padding: 3px 8px;
      border-radius: 6px;
      transition: all 0.3s ease;
      text-align: center;
    }

    .eq-arrow {
      color: #94a3b8;
      font-weight: 700;
      padding: 0 4px;
    }

    .eq-chem {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 12.5px;
      color: #475569;
    }

    /* Step states */
    .step-1 .beaker-wrap-base { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    .step-1 .beaker-wrap-acid { transform: translate(0, 0) rotate(0deg); opacity: 1; }
    .step-1 .chamber-liquid { height: 0; }
    .step-1 .eq-reactants { background: rgba(34, 183, 255, 0.15); color: #0284c7; }

    .step-2 .beaker-wrap-base {
      transform: translate(32px, -38px) rotate(48deg);
      transform-origin: top right;
      opacity: 0.95;
    }
    .step-2 .beaker-wrap-acid {
      transform: translate(-32px, -38px) rotate(-48deg);
      transform-origin: top left;
      opacity: 0.95;
    }
    .step-2 .liquid-base { height: 20px; }
    .step-2 .liquid-acid { height: 20px; }
    .step-2 .stream { opacity: 0.85; }
    .step-2 .chamber { border: 2px dashed #22b7ff; }
    .step-2 .chamber-liquid { height: 55px; background: #e2e8f0; }
    .step-2 .eq-arrow { color: #22b7ff; }

    .step-3 .beaker-wrap-base { transform: translate(0, 0) rotate(0deg); opacity: 0.35; }
    .step-3 .beaker-wrap-acid { transform: translate(0, 0) rotate(0deg); opacity: 0.35; }
    .step-3 .liquid-base { height: 0; }
    .step-3 .liquid-acid { height: 0; }
    .step-3 .chamber { border: 2px solid #22b7ff; }
    .step-3 .chamber-liquid { height: 75px; background: #e0f2fe; }
    .step-3 .eq-products { background: rgba(34, 183, 255, 0.15); color: #0284c7; }

    @media (max-width: 380px) {
      .stage {
        padding: 26px 4px 6px 4px;
        height: 165px;
      }
      .beaker-wrapper {
        width: 62px;
        height: 85px;
      }
      .chamber-wrapper {
        width: 110px;
        height: 115px;
      }
      .btn-step {
        font-size: 11px;
        padding: 4px 6px;
      }
      .eq-row {
        font-size: 11.5px;
      }
      .eq-chem {
        font-size: 11px;
      }
      .particle {
        font-size: 9px;
        padding: 1px 4px;
      }
      .step-2 .beaker-wrap-base {
        transform: translate(24px, -32px) rotate(45deg);
      }
      .step-2 .beaker-wrap-acid {
        transform: translate(-24px, -32px) rotate(-45deg);
      }
      .stream-base { left: 74px; }
      .stream-acid { right: 74px; }
    }
  </style>
</head>
<body class="step-1">

  <div class="container">
    <div class="header-row">
      <div class="controls">
        <button class="btn-step active" id="step0">1. Reactants</button>
        <button class="btn-step" id="step1">2. Reacting</button>
        <button class="btn-step" id="step2">3. Products</button>
      </div>
      <button class="btn-play" id="playBtn" title="Play / Pause">⏸</button>
    </div>

    <div class="stage">
      
      <div class="beaker-wrapper beaker-wrap-base">
        <span class="beaker-label label-base">Base</span>
        <div class="beaker">
          <div class="liquid-base">
            <span class="particle p-cu">Cu²⁺</span>
            <span class="particle p-o">O²⁻</span>
          </div>
        </div>
      </div>

      <div class="stream stream-base"></div>

      
      <div class="chamber-wrapper">
        <span class="chamber-label">Reaction Chamber</span>
        <div class="chamber" id="chamber">
          <div class="chamber-liquid" id="chamberContent"></div>
        </div>
      </div>

      <div class="stream stream-acid"></div>

      
      <div class="beaker-wrapper beaker-wrap-acid">
        <span class="beaker-label label-acid">Acid</span>
        <div class="beaker">
          <div class="liquid-acid">
            <span class="particle p-h">H⁺</span>
            <span class="particle p-h">H⁺</span>
            <span class="particle p-cl">Cl⁻</span>
            <span class="particle p-cl">Cl⁻</span>
          </div>
        </div>
      </div>
    </div>

    
    <div class="eq-box">
      <div class="eq-row">
        <span class="eq-item eq-reactants">Base + Acid</span>
        <span class="eq-arrow">→</span>
        <span class="eq-item eq-products">Salt + Water</span>
      </div>
      <div class="eq-row eq-chem">
        <span class="eq-item eq-reactants">CuO + 2HCl</span>
        <span class="eq-arrow">→</span>
        <span class="eq-item eq-products">CuCl₂ + H₂O</span>
      </div>
    </div>
  </div>

  <script>
    const steps = ['step-1', 'step-2', 'step-3'];
    let currentStep = 0;
    let timer = null;
    let isPlaying = true;

    const btns = [
      document.getElementById('step0'),
      document.getElementById('step1'),
      document.getElementById('step2')
    ];
    const playBtn = document.getElementById('playBtn');
    const chamberContent = document.getElementById('chamberContent');

    function renderStage(idx) {
      document.body.className = steps[idx];
      btns.forEach((b, i) => b.classList.toggle('active', i === idx));

      if (idx === 0) {
        chamberContent.innerHTML = '';
      } else if (idx === 1) {
        chamberContent.innerHTML = `
          <span class="particle p-cu">Cu²⁺</span>
          <span class="particle p-o">O²⁻</span>
          <span class="particle p-h">H⁺</span>
          <span class="particle p-h">H⁺</span>
          <span class="particle p-cl">Cl⁻</span>
        `;
      } else {
        chamberContent.innerHTML = `
          <span class="particle p-salt">CuCl₂ (Salt)</span>
          <span class="particle p-h2o">H₂O (Water)</span>
        `;
      }
    }

    function setStep(idx) {
      currentStep = idx;
      renderStage(currentStep);
    }

    function nextStep() {
      currentStep = (currentStep + 1) % steps.length;
      renderStage(currentStep);
    }

    function startAuto() {
      isPlaying = true;
      playBtn.textContent = '⏸';
      clearInterval(timer);
      timer = setInterval(nextStep, 3200);
    }

    function stopAuto() {
      isPlaying = false;
      playBtn.textContent = '▶';
      clearInterval(timer);
    }

    btns.forEach((btn, i) => {
      btn.addEventListener('click', () => {
        stopAuto();
        setStep(i);
      });
    });

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopAuto();
      } else {
        nextStep();
        startAuto();
      }
    });

    // Initialize
    renderStage(0);
    startAuto();
  </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="1:1">
  <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: space-between;
      width: 100%;
      height: 100%;
      padding: 10px;
      user-select: none;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      max-width: 380px;
      margin-bottom: 6px;
    }

    .btn-step {
      flex: 1;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 4px;
      border-radius: 6px;
      cursor: pointer;
      text-align: center;
      transition: all 0.25s ease;
      white-space: nowrap;
    }

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

    .btn-play {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      width: 32px;
      height: 29px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }

    /* Stage Area */
    .stage {
      position: relative;
      width: 100%;
      max-width: 380px;
      flex: 1;
      min-height: 280px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    svg {
      width: 100%;
      height: 100%;
      max-height: 340px;
      overflow: visible;
    }

    /* Animated Elements */
    .mol-hcl, .water-mol, .callout {
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    }

    .atom-h, .atom-cl {
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), fill 0.4s ease, filter 0.4s ease;
    }

    /* Step Transitions */
    /* STEP 1: Above beaker */
    .step-1 .mol-hcl { transform: translate(160px, 40px); }
    .step-1 .atom-cl { transform: translate(0, 0); }
    .step-1 .atom-h { transform: translate(25px, 6px); fill: #94a3b8; }
    .step-1 .callout { opacity: 0; pointer-events: none; }
    .step-1 .w-dipole-1 { transform: translate(105px, 195px) rotate(15deg); }
    .step-1 .w-dipole-2 { transform: translate(215px, 205px) rotate(-20deg); }
    .step-1 .w-dipole-3 { transform: translate(120px, 255px) rotate(45deg); }
    .step-1 .w-dipole-4 { transform: translate(200px, 260px) rotate(-60deg); }

    /* STEP 2: Enters water */
    .step-2 .mol-hcl { transform: translate(160px, 160px); }
    .step-2 .atom-cl { transform: translate(0, 0); }
    .step-2 .atom-h { transform: translate(25px, 6px); fill: #94a3b8; }
    .step-2 .callout { opacity: 0; pointer-events: none; }
    .step-2 .w-dipole-1 { transform: translate(90px, 175px) rotate(0deg); }
    .step-2 .w-dipole-2 { transform: translate(235px, 185px) rotate(-10deg); }
    .step-2 .w-dipole-3 { transform: translate(105px, 240px) rotate(30deg); }
    .step-2 .w-dipole-4 { transform: translate(215px, 245px) rotate(-40deg); }

    /* STEP 3: Dissociates */
    .step-3 .mol-hcl { transform: translate(160px, 170px); }
    .step-3 .atom-cl { transform: translate(60px, 0); }
    .step-3 .atom-h {
      transform: translate(-50px, -5px);
      fill: #ef4444;
      filter: drop-shadow(0 0 6px #ef4444);
    }
    /* Hydration shell alignment: O points to H+, H points to Cl- */
    .step-3 .w-dipole-1 { transform: translate(65px, 120px) rotate(135deg); }
    .step-3 .w-dipole-2 { transform: translate(255px, 130px) rotate(-45deg); }
    .step-3 .w-dipole-3 { transform: translate(75px, 220px) rotate(40deg); }
    .step-3 .w-dipole-4 { transform: translate(265px, 225px) rotate(-130deg); }
    .step-3 .callout-h { opacity: 1; transform: translate(45px, 272px); }
    .step-3 .callout-cl { opacity: 1; transform: translate(210px, 272px); }

    /* Label Typography */
    .badge {
      font-size: 11px;
      font-weight: 700;
      fill: #ffffff;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .callout-box {
      rx: 6px;
      ry: 6px;
    }
    .callout-text {
      font-size: 11px;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: central;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn-play" id="playBtn" title="Auto play">⏸</button>
    <button class="btn-step active" onclick="setStep(1)">1. Intact HCl</button>
    <button class="btn-step" onclick="setStep(2)">2. In Water</button>
    <button class="btn-step" onclick="setStep(3)">3. Dissociates</button>
  </div>

  
  <div class="stage">
    <svg id="stageSvg" class="step-1" viewBox="0 0 350 320">
      <defs>
        
        <linearGradient id="waterGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#e0f2fe" stop-opacity="0.6"/>
          <stop offset="1%" stop-color="#bae6fd" stop-opacity="0.85"/>
        </linearGradient>
      </defs>

      
      <path d="M 45 100 L 45 285 Q 45 295 55 295 L 295 295 Q 305 295 305 285 L 305 100" 
            fill="none" stroke="#94a3b8" stroke-width="3" stroke-linecap="round"/>
      <path d="M 47 115 L 47 285 Q 47 293 55 293 L 295 293 Q 303 293 303 285 L 303 115 Z" 
            fill="url(#waterGrad)"/>
      <ellipse cx="175" cy="115" rx="128" ry="8" fill="#bae6fd" fill-opacity="0.5" stroke="#7dd3fc" stroke-width="1"/>

      
      
      <g transform="translate(70, 160) rotate(-15)">
        <circle cx="0" cy="0" r="10" fill="#f87171"/>
        <circle cx="-7" cy="-7" r="5.5" fill="#f8fafc" stroke="#cbd5e1" stroke-width="1"/>
        <circle cx="7" cy="-7" r="5.5" fill="#f8fafc" stroke="#cbd5e1" stroke-width="1"/>
      </g>
      <g transform="translate(280, 165) rotate(25)">
        <circle cx="0" cy="0" r="10" fill="#f87171"/>
        <circle cx="-7" cy="-7" r="5.5" fill="#f8fafc" stroke="#cbd5e1" stroke-width="1"/>
        <circle cx="7" cy="-7" r="5.5" fill="#f8fafc" stroke="#cbd5e1" stroke-width="1"/>
      </g>

      
      <g class="water-mol w-dipole-1">
        <circle cx="0" cy="0" r="11" fill="#ef4444"/>
        <circle cx="-8" cy="-8" r="6" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.2"/>
        <circle cx="8" cy="-8" r="6" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.2"/>
      </g>
      <g class="water-mol w-dipole-2">
        <circle cx="0" cy="0" r="11" fill="#ef4444"/>
        <circle cx="-8" cy="-8" r="6" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.2"/>
        <circle cx="8" cy="-8" r="6" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.2"/>
      </g>
      <g class="water-mol w-dipole-3">
        <circle cx="0" cy="0" r="11" fill="#ef4444"/>
        <circle cx="-8" cy="-8" r="6" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.2"/>
        <circle cx="8" cy="-8" r="6" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.2"/>
      </g>
      <g class="water-mol w-dipole-4">
        <circle cx="0" cy="0" r="11" fill="#ef4444"/>
        <circle cx="-8" cy="-8" r="6" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.2"/>
        <circle cx="8" cy="-8" r="6" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.2"/>
      </g>

      
      <g class="mol-hcl">
        
        <g class="atom-cl">
          <circle cx="0" cy="0" r="17" fill="#10b981" filter="drop-shadow(0 2px 4px rgba(0,0,0,0.15))"/>
          <text cx="0" cy="0" class="badge" id="clSymbol">Cl</text>
        </g>
        
        <g class="atom-h">
          <circle cx="0" cy="0" r="8" stroke="#ffffff" stroke-width="1.5"/>
          <text cx="0" cy="0" class="badge" id="hSymbol" style="font-size: 9px;">H</text>
        </g>
      </g>

      
      <g class="callout callout-h" transform="translate(45, 272)">
        <rect class="callout-box" x="0" y="0" width="120" height="34" fill="#ffffff" stroke="#ef4444" stroke-width="1.5" filter="drop-shadow(0 2px 5px rgba(0,0,0,0.08))"/>
        <text class="callout-text" x="60" y="12" fill="#ef4444">H⁺(aq)</text>
        <text class="callout-text" x="60" y="24" fill="#64748b" style="font-size: 9px; font-weight: 600;">makes solution acidic</text>
      </g>

      <g class="callout callout-cl" transform="translate(210, 272)">
        <rect class="callout-box" x="0" y="0" width="95" height="34" fill="#ffffff" stroke="#10b981" stroke-width="1.5" filter="drop-shadow(0 2px 5px rgba(0,0,0,0.08))"/>
        <text class="callout-text" x="47.5" y="12" fill="#10b981">Cl⁻(aq)</text>
        <text class="callout-text" x="47.5" y="24" fill="#64748b" style="font-size: 9px; font-weight: 600;">chloride ion</text>
      </g>
    </svg>
  </div>

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

    const stage = document.getElementById('stageSvg');
    const stepBtns = document.querySelectorAll('.btn-step');
    const playBtn = document.getElementById('playBtn');
    const clSymbol = document.getElementById('clSymbol');
    const hSymbol = document.getElementById('hSymbol');

    function setStep(step) {
      currentStep = step;
      stage.className.baseVal = `step-${step}`;
      
      stepBtns.forEach((btn, idx) => {
        btn.classList.toggle('active', idx + 1 === step);
      });

      // Update ion symbols on dissociation
      if (step === 3) {
        clSymbol.textContent = 'Cl⁻';
        hSymbol.textContent = 'H⁺';
      } else {
        clSymbol.textContent = 'Cl';
        hSymbol.textContent = 'H';
      }
    }

    function nextStep() {
      let next = currentStep + 1;
      if (next > 3) next = 1;
      setStep(next);
    }

    function startAutoPlay() {
      isPlaying = true;
      playBtn.textContent = '⏸';
      clearInterval(timer);
      timer = setInterval(nextStep, 3200);
    }

    function stopAutoPlay() {
      isPlaying = false;
      playBtn.textContent = '▶';
      clearInterval(timer);
    }

    playBtn.addEventListener('click', () => {
      if (isPlaying) stopAutoPlay();
      else { nextStep(); startAutoPlay(); }
    });

    stepBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        stopAutoPlay();
      });
    });

    // Start auto playback on load
    startAutoPlay();
  </script>
</body>
</html>

Acids as Sources of Aqueous Hydrogen Ions H+

<!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: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

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

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      width: 100%;
      max-width: 640px;
    }

    @media (max-width: 500px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }

    .acid-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      transition: box-shadow 0.2s ease, border-color 0.2s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
      user-select: none;
    }

    .acid-card:hover {
      box-shadow: 0 4px 12px rgba(30, 41, 69, 0.08);
      border-color: #cbd5e1;
    }

    .acid-name {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .formula {
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 12px;
    }

    .sub {
      font-size: 11px;
      vertical-align: sub;
    }

    .sup {
      font-size: 11px;
      vertical-align: super;
    }

    .ion-chamber {
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
      border-radius: 8px;
      width: 100%;
      min-height: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px 4px;
      gap: 6px;
    }

    .ions-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      align-items: center;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
      padding: 4px 10px;
      border-radius: 999px;
      line-height: 1;
    }

    .badge-h-single {
      background: #fee2e2;
      color: #dc2626;
      border: 1px solid #fca5a5;
    }

    .badge-h-double {
      background: #dc2626;
      color: #ffffff;
      border: 1px solid #b91c1c;
      box-shadow: 0 2px 4px rgba(220, 38, 38, 0.25);
    }

    .badge-anion {
      background: #e2e8f0;
      color: #475569;
      border: 1px solid #cbd5e1;
    }

    .yields {
      font-size: 12px;
      color: #94a3b8;
      margin: 2px 0;
    }

    .counter-tag {
      font-size: 11px;
      font-weight: 600;
      margin-top: 6px;
      padding: 2px 8px;
      border-radius: 4px;
      background: #f1f5f9;
      color: #475569;
    }

    .counter-tag.highlight {
      background: #fef2f2;
      color: #dc2626;
      font-weight: 700;
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="acid-card">
      <div class="acid-name">Hydrochloric</div>
      <div class="formula">HCl<span class="sub">(aq)</span></div>
      <div class="ion-chamber">
        <div class="ions-row">
          <span class="badge badge-h-single">H<span class="sup">+</span></span>
          <span class="yields">+</span>
          <span class="badge badge-anion">Cl<span class="sup">−</span></span>
        </div>
      </div>
      <div class="counter-tag">1 H<span class="sup">+</span> ion</div>
    </div>

    
    <div class="acid-card">
      <div class="acid-name">Nitric</div>
      <div class="formula">HNO<span class="sub">3</span><span class="sub">(aq)</span></div>
      <div class="ion-chamber">
        <div class="ions-row">
          <span class="badge badge-h-single">H<span class="sup">+</span></span>
          <span class="yields">+</span>
          <span class="badge badge-anion">NO<span class="sub">3</span><span class="sup">−</span></span>
        </div>
      </div>
      <div class="counter-tag">1 H<span class="sup">+</span> ion</div>
    </div>

    
    <div class="acid-card">
      <div class="acid-name">Sulfuric</div>
      <div class="formula">H<span class="sub">2</span>SO<span class="sub">4</span><span class="sub">(aq)</span></div>
      <div class="ion-chamber">
        <div class="ions-row">
          <span class="badge badge-h-double">2 H<span class="sup">+</span></span>
          <span class="yields">+</span>
          <span class="badge badge-anion">SO<span class="sub">4</span><span class="sup">2−</span></span>
        </div>
      </div>
      <div class="counter-tag highlight">2 H<span class="sup">+</span> ions</div>
    </div>
  </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px;
    }
    .diagram-container {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .btn-toggle {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s, border-color 0.2s;
    }
    .btn-toggle:active {
      background: #f1f5f9;
    }
    @keyframes orbitPulse {
      0%, 100% { transform: rotate(0deg); }
      50% { transform: rotate(180deg); }
    }
    .anim-orbit {
      transform-origin: 145px 135px;
      animation: spin 6s linear infinite;
    }
    @keyframes spin {
      100% { transform: rotate(360deg); }
    }
    .departing-e {
      transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.8s ease;
    }
    .departing-e.ejected {
      transform: translate(36px, -36px);
    }
  </style>
</head>
<body>
  <div class="diagram-container">
    <svg viewBox="0 0 540 270" aria-label="Hydrogen Atom vs Hydrogen Ion">
      <defs>
        
        <marker id="arrow-slate" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
          <path d="M1,1 L7,4 L1,7 Z" fill="#64748b" />
        </marker>
        <marker id="arrow-blue" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
          <path d="M1,1 L7,4 L1,7 Z" fill="#3b82f6" />
        </marker>
      </defs>

      
      <g id="left-atom">
        
        <circle cx="145" cy="135" r="54" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="4 4" />
        
        
        <g id="orbitingElectronGroup" class="anim-orbit">
          <circle cx="145" cy="81" r="11" fill="#3b82f6" />
          <text x="145" y="85" text-anchor="middle" font-size="13" font-weight="700" fill="#ffffff">e⁻</text>
        </g>

        
        <circle cx="145" cy="135" r="22" fill="#ef4444" />
        <text x="145" y="140" text-anchor="middle" font-size="14" font-weight="800" fill="#ffffff">+1</text>

        
        <text x="145" y="222" text-anchor="middle" font-size="15" font-weight="700" fill="#1e2945">Hydrogen Atom (H)</text>
        <text x="145" y="242" text-anchor="middle" font-size="12" font-weight="600" fill="#64748b">1 proton + 1 electron</text>
      </g>

      
      <g id="center-transition">
        <line x1="228" y1="135" x2="288" y2="135" stroke="#64748b" stroke-width="2" marker-end="url(#arrow-slate)" />
        <text x="258" y="122" text-anchor="middle" font-size="14" font-weight="800" fill="#3b82f6">− e⁻</text>
      </g>

      
      <g id="right-ion">
        
        <circle cx="395" cy="135" r="54" fill="none" stroke="#e2e8f0" stroke-width="1.5" stroke-dasharray="3 3" />
        
        
        <path d="M 395 81 Q 435 65 465 45" fill="none" stroke="#3b82f6" stroke-width="1.5" stroke-dasharray="3 3" marker-end="url(#arrow-blue)" />

        
        <g id="departingElectron" class="departing-e ejected">
          <circle cx="430" cy="65" r="11" fill="#3b82f6" />
          <text x="430" y="69" text-anchor="middle" font-size="13" font-weight="700" fill="#ffffff">e⁻</text>
        </g>

        
        <circle cx="395" cy="135" r="22" fill="#ef4444" />
        <text x="395" y="140" text-anchor="middle" font-size="14" font-weight="800" fill="#ffffff">+1</text>

        
        <text x="395" y="222" text-anchor="middle" font-size="15" font-weight="700" fill="#1e2945">Hydrogen Ion (H⁺)</text>
        <text x="395" y="242" text-anchor="middle" font-size="13" font-weight="700" fill="#ef4444">1 bare proton</text>
      </g>
    </svg>

    <button id="toggleBtn" class="btn-toggle" onclick="toggleElectron()">
      <span>✦</span> Replay Electron Loss
    </button>
  </div>

  <script>
    const depE = document.getElementById('departingElectron');
    let ejected = true;

    function toggleElectron() {
      if (ejected) {
        depE.classList.remove('ejected');
        ejected = false;
        setTimeout(() => {
          depE.classList.add('ejected');
          ejected = true;
        }, 300);
      } else {
        depE.classList.add('ejected');
        ejected = true;
      }
    }
  </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 {
      width: 100%;
      height: 100%;
      min-height: 100vh;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
    }

    .main-stage {
      width: 100%;
      max-width: 620px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .svg-canvas {
      width: 100%;
      height: auto;
      max-height: 280px;
      overflow: visible;
    }

    /* Sublte drop shadows and crisp borders */
    .shadow-filter {
      filter: drop-shadow(0 4px 10px rgba(30, 41, 69, 0.08));
    }

    .label-text {
      font-weight: 700;
      fill: #1e2945;
      text-anchor: middle;
      dominant-baseline: central;
    }

    .sub-label {
      font-size: 13px;
      font-weight: 600;
      fill: #64748b;
      text-anchor: middle;
    }

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

    /* Info card at bottom */
    .info-card {
      width: 100%;
      max-width: 580px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 18px;
      text-align: center;
      font-size: 14px;
      line-height: 1.45;
      font-weight: 500;
      color: #1e2945;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    }

    .info-card strong {
      color: #0f172a;
      font-weight: 700;
    }

    .h-badge {
      color: #dc2626;
      font-weight: 700;
    }

    .oh-badge {
      color: #2563eb;
      font-weight: 700;
    }
  </style>
</head>
<body>

  <div class="main-stage">
    <svg class="svg-canvas" viewBox="0 0 640 240" xmlns="http://www.w3.org/2000/svg">
      <defs>
        
        <radialGradient id="grad-o" cx="35%" cy="35%" r="65%">
          <stop offset="0%" stop-color="#94a3b8"/>
          <stop offset="100%" stop-color="#475569"/>
        </radialGradient>

        
        <radialGradient id="grad-h" cx="35%" cy="35%" r="65%">
          <stop offset="0%" stop-color="#ffffff"/>
          <stop offset="100%" stop-color="#cbd5e1"/>
        </radialGradient>

        
        <radialGradient id="grad-cation" cx="35%" cy="35%" r="65%">
          <stop offset="0%" stop-color="#fecaca"/>
          <stop offset="40%" stop-color="#fee2e2"/>
          <stop offset="100%" stop-color="#fca5a5"/>
        </radialGradient>

        
        <radialGradient id="grad-anion" cx="35%" cy="35%" r="65%">
          <stop offset="0%" stop-color="#bfdbfe"/>
          <stop offset="40%" stop-color="#dbeafe"/>
          <stop offset="100%" stop-color="#93c5fd"/>
        </radialGradient>

        
        <filter id="soft-shadow" x="-15%" y="-15%" width="130%" height="130%">
          <feDropShadow dx="0" dy="4" stdDeviation="5" flood-color="#1e2945" flood-opacity="0.1"/>
        </filter>
      </defs>

      
      <g transform="translate(130, 110)">
        
        <rect x="-105" y="-95" width="210" height="190" rx="16" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1.5" filter="url(#soft-shadow)" />

        
        <line x1="0" y1="5" x2="-40" y2="-40" stroke="#94a3b8" stroke-width="8" stroke-linecap="round" />
        <line x1="0" y1="5" x2="40" y2="-40" stroke="#94a3b8" stroke-width="8" stroke-linecap="round" />

        
        <circle cx="-42" cy="-42" r="21" fill="url(#grad-h)" stroke="#94a3b8" stroke-width="2" />
        <text x="-42" y="-42" class="label-text" font-size="14">H</text>

        
        <circle cx="42" cy="-42" r="21" fill="url(#grad-h)" stroke="#94a3b8" stroke-width="2" />
        <text x="42" y="-42" class="label-text" font-size="14">H</text>

        
        <circle cx="0" cy="5" r="32" fill="url(#grad-o)" stroke="#334155" stroke-width="2" />
        <text x="0" y="5" class="label-text" fill="#ffffff" font-size="20">O</text>

        
        <text x="0" y="65" class="label-text formula-tag" font-size="18">H₂O</text>
        <text x="0" y="82" class="sub-label">Water Molecule</text>
      </g>

      
      <g transform="translate(295, 110)">
        <circle cx="25" cy="0" r="26" fill="#f1f5f9" stroke="#e2e8f0" stroke-width="1.5" />
        
        <text x="25" y="-1" class="label-text" font-size="34" fill="#334155" font-family="system-ui, serif">⇌</text>
      </g>

      
      <g transform="translate(490, 110)">
        
        <rect x="-125" y="-95" width="250" height="190" rx="16" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1.5" filter="url(#soft-shadow)" />

        
        <g transform="translate(-52, -10)">
          <circle cx="0" cy="0" r="35" fill="url(#grad-cation)" stroke="#ef4444" stroke-width="2.5" />
          <text x="0" y="-3" class="label-text formula-tag" font-size="24" fill="#b91c1c">H⁺</text>
          <text x="0" y="50" class="label-text" font-size="13" fill="#dc2626">Hydrogen ion</text>
          <text x="0" y="66" class="sub-label" fill="#ef4444">(cation)</text>
        </g>

        
        <text x="0" y="-10" class="label-text" font-size="22" fill="#94a3b8">+</text>

        
        <g transform="translate(52, -10)">
          <circle cx="0" cy="0" r="35" fill="url(#grad-anion)" stroke="#3b82f6" stroke-width="2.5" />
          <text x="0" y="-3" class="label-text formula-tag" font-size="22" fill="#1d4ed8">OH⁻</text>
          <text x="0" y="50" class="label-text" font-size="13" fill="#2563eb">Hydroxide ion</text>
          <text x="0" y="66" class="sub-label" fill="#3b82f6">(anion)</text>
        </g>
      </g>
    </svg>
  </div>

  <div class="info-card">
    In any aqueous solution, water always supplies free <span class="h-badge">H⁺</span> cations and <span class="oh-badge">OH⁻</span> anions.
  </div>

</body>
</html>

Competing Ions in Aqueous Electrolysis: The Role of Water

<!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: system-ui, -apple-system, sans-serif;
    }

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

    .cell-wrapper {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* SVG Schematic */
    .schematic {
      width: 100%;
      height: auto;
      display: block;
    }

    /* Flow animation */
    @keyframes migrateLeft {
      0% { transform: translateX(4px); opacity: 0.85; }
      50% { transform: translateX(-4px); opacity: 1; }
      100% { transform: translateX(4px); opacity: 0.85; }
    }

    @keyframes migrateRight {
      0% { transform: translateX(-4px); opacity: 0.85; }
      50% { transform: translateX(4px); opacity: 1; }
      100% { transform: translateX(-4px); opacity: 0.85; }
    }

    .move-left {
      animation: migrateLeft 2.4s ease-in-out infinite;
    }

    .move-right {
      animation: migrateRight 2.4s ease-in-out infinite;
    }

    /* Summary Grid */
    .grid-summary {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      width: 100%;
    }

    .summary-card {
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 13px;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .summary-card.cathode {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
    }

    .summary-card.anode {
      background: #fff7ed;
      border: 1px solid #fed7aa;
    }

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

    .cathode .card-title { color: #1d4ed8; }
    .anode .card-title { color: #c2410c; }

    .ion-pair {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #ffffff;
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
    }

    .tag {
      font-size: 11px;
      font-weight: 500;
      color: #64748b;
    }

    .ion-blue { color: #2563eb; }
    .ion-orange { color: #ea580c; }
  </style>
</head>
<body>

  <div class="cell-wrapper">
    
    <svg class="schematic" viewBox="0 0 500 240" fill="none" xmlns="http://www.w3.org/2000/svg">
      
      <path d="M 120 70 L 120 22 L 225 22" stroke="#64748b" stroke-width="2.5" stroke-linecap="round" />
      <path d="M 380 70 L 380 22 L 275 22" stroke="#64748b" stroke-width="2.5" stroke-linecap="round" />

      
      
      <line x1="275" y1="12" x2="275" y2="32" stroke="#ea580c" stroke-width="3" stroke-linecap="round" />
      <text x="282" y="18" fill="#ea580c" font-size="12" font-weight="bold">+</text>
      
      <line x1="263" y1="16" x2="263" y2="28" stroke="#2563eb" stroke-width="4.5" stroke-linecap="round" />
      <text x="249" y="18" fill="#2563eb" font-size="13" font-weight="bold">−</text>

      
      <rect x="65" y="60" width="370" height="170" rx="14" fill="#f8fafc" stroke="#cbd5e1" stroke-width="2.5" />
      
      <rect x="68" y="85" width="364" height="142" rx="10" fill="#e0f2fe" fill-opacity="0.5" />

      
      <rect x="108" y="55" width="24" height="145" rx="4" fill="#2563eb" />
      <text x="120" y="215" text-anchor="middle" fill="#1d4ed8" font-size="13" font-weight="bold">Cathode (−)</text>

      
      <rect x="368" y="55" width="24" height="145" rx="4" fill="#ea580c" />
      <text x="380" y="215" text-anchor="middle" fill="#c2410c" font-size="13" font-weight="bold">Anode (+)</text>

      
      <g class="move-left">
        
        <circle cx="215" cy="115" r="15" fill="#ffffff" stroke="#2563eb" stroke-width="2" />
        <text x="215" y="120" text-anchor="middle" fill="#2563eb" font-size="13" font-weight="bold">Na⁺</text>
        <path d="M 192 115 L 148 115 M 156 109 L 146 115 L 156 121" stroke="#2563eb" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />

        
        <circle cx="225" cy="165" r="15" fill="#ffffff" stroke="#0284c7" stroke-width="2" />
        <text x="225" y="170" text-anchor="middle" fill="#0284c7" font-size="13" font-weight="bold">H⁺</text>
        <path d="M 202 165 L 148 165 M 156 159 L 146 165 L 156 171" stroke="#0284c7" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
      </g>

      
      <g class="move-right">
        
        <circle cx="285" cy="115" r="15" fill="#ffffff" stroke="#ea580c" stroke-width="2" />
        <text x="285" y="120" text-anchor="middle" fill="#ea580c" font-size="13" font-weight="bold">Cl⁻</text>
        <path d="M 308 115 L 352 115 M 344 109 L 354 115 L 344 121" stroke="#ea580c" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />

        
        <circle cx="275" cy="165" r="15" fill="#ffffff" stroke="#d97706" stroke-width="2" />
        <text x="275" y="170" text-anchor="middle" fill="#d97706" font-size="12" font-weight="bold">OH⁻</text>
        <path d="M 298 165 L 352 165 M 344 159 L 354 165 L 344 171" stroke="#d97706" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
      </g>
    </svg>

    
    <div class="grid-summary">
      
      <div class="summary-card cathode">
        <span class="card-title">Cathode Competitors (−)</span>
        <div class="ion-pair">
          <span class="tag">Solute cation</span>
          <span class="ion-blue">Na⁺</span>
        </div>
        <div class="ion-pair">
          <span class="tag">Water cation</span>
          <span class="ion-blue">H⁺</span>
        </div>
      </div>

      
      <div class="summary-card anode">
        <span class="card-title">Anode Competitors (+)</span>
        <div class="ion-pair">
          <span class="tag">Solute anion</span>
          <span class="ion-orange">Cl⁻</span>
        </div>
        <div class="ion-pair">
          <span class="tag">Water anion</span>
          <span class="ion-orange">OH⁻</span>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

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

    body {
      width: 100%;
      background: #ffffff;
      color: #1e2945;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 14px;
    }

    /* Tabs */
    .tabs {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
    }

    .tab-btn {
      flex: 1;
      padding: 8px 4px;
      font-size: 14px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #475569;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

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

    /* Main layout */
    .content-stage {
      width: 100%;
      max-width: 500px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Section Boxes */
    .section-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .sources-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .source-panel {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .panel-label {
      font-size: 13px;
      font-weight: 600;
      color: #475569;
    }

    .pools-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .electrode-card {
      border-radius: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .cathode-card {
      background: #eff6ff;
      border: 1.5px solid #bfdbfe;
    }

    .anode-card {
      background: #fff7ed;
      border: 1.5px solid #fed7aa;
    }

    .electrode-header {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 14px;
      font-weight: 700;
    }

    .cathode-card .electrode-header {
      color: #1d4ed8;
    }

    .anode-card .electrode-header {
      color: #c2410c;
    }

    .ion-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
    }

    /* Badges */
    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 15px;
      font-weight: 700;
      min-width: 44px;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

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

    .badge-coral {
      background: #ffedd5;
      color: #9a3412;
      border: 1px solid #fdba74;
    }

    .vs-sign {
      font-size: 11px;
      font-weight: 800;
      color: #94a3b8;
      align-self: center;
    }
  </style>
</head>
<body>

  <div class="tabs">
    <button class="tab-btn active" onclick="selectSalt(0)">NaCl (aq)</button>
    <button class="tab-btn" onclick="selectSalt(1)">CuSO₄ (aq)</button>
    <button class="tab-btn" onclick="selectSalt(2)">KNO₃ (aq)</button>
  </div>

  <div class="content-stage">
    
    <div>
      <div class="section-title">
        <span>Available Ions</span>
      </div>
      <div class="sources-grid">
        <div class="source-panel">
          <div class="panel-label">Salt</div>
          <div class="ion-group" id="saltIons">
            <span class="badge badge-blue">Na⁺</span>
            <span class="badge badge-coral">Cl⁻</span>
          </div>
        </div>
        <div class="source-panel">
          <div class="panel-label">Water</div>
          <div class="ion-group">
            <span class="badge badge-blue">H⁺</span>
            <span class="badge badge-coral">OH⁻</span>
          </div>
        </div>
      </div>
    </div>

    
    <div>
      <div class="section-title">
        <span>Electrode Pools</span>
      </div>
      <div class="pools-grid">
        
        <div class="electrode-card cathode-card">
          <div class="electrode-header">Cathode (−)</div>
          <div class="ion-group" id="cathodePool">
            <span class="badge badge-blue">Na⁺</span>
            <span class="vs-sign">vs</span>
            <span class="badge badge-blue">H⁺</span>
          </div>
        </div>

        
        <div class="electrode-card anode-card">
          <div class="electrode-header">Anode (+)</div>
          <div class="ion-group" id="anodePool">
            <span class="badge badge-coral">Cl⁻</span>
            <span class="vs-sign">vs</span>
            <span class="badge badge-coral">OH⁻</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    const salts = [
      {
        name: "NaCl (aq)",
        saltCation: "Na⁺",
        saltAnion: "Cl⁻"
      },
      {
        name: "CuSO₄ (aq)",
        saltCation: "Cu²⁺",
        saltAnion: "SO₄²⁻"
      },
      {
        name: "KNO₃ (aq)",
        saltCation: "K⁺",
        saltAnion: "NO₃⁻"
      }
    ];

    function selectSalt(index) {
      const data = salts[index];
      
      // Update Tab Styles
      const buttons = document.querySelectorAll('.tab-btn');
      buttons.forEach((btn, i) => {
        if (i === index) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });

      // Update Salt Ions
      document.getElementById('saltIons').innerHTML = `
        <span class="badge badge-blue">${data.saltCation}</span>
        <span class="badge badge-coral">${data.saltAnion}</span>
      `;

      // Update Cathode Pool
      document.getElementById('cathodePool').innerHTML = `
        <span class="badge badge-blue">${data.saltCation}</span>
        <span class="vs-sign">vs</span>
        <span class="badge badge-blue">H⁺</span>
      `;

      // Update Anode Pool
      document.getElementById('anodePool').innerHTML = `
        <span class="badge badge-coral">${data.saltAnion}</span>
        <span class="vs-sign">vs</span>
        <span class="badge badge-coral">OH⁻</span>
      `;
    }
  </script>
</body>
</html>

UK-GCSE-SCIENCE-CHEM-CC-03-02

Aligned learning resources

Related diagrams