<!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>Coin Edge Textures</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      min-height: 100%;
      background: transparent;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px;
      user-select: none;
    }
    .grid {
      display: flex;
      gap: 12px;
      width: 100%;
      max-width: 620px;
    }
    .card-panel {
      flex: 1 1 0;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(30, 41, 69, 0.05);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .card-panel:hover, .card-panel.active {
      border-color: #22b7ff;
      box-shadow: 0 6px 18px rgba(34, 183, 255, 0.18);
    }
    .title {
      font-size: 16px;
      font-weight: 800;
      color: #1e2945;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .badge-row {
      display: flex;
      gap: 6px;
      margin-bottom: 10px;
    }
    .coin-badge {
      font-size: 12px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .badge-penny {
      background: #fed7aa;
      color: #9a3412;
      border: 1px solid #fdba74;
    }
    .badge-silver {
      background: #e2e8f0;
      color: #475569;
      border: 1px solid #cbd5e1;
    }
    .zoom-stage {
      width: 100%;
      height: 180px;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #edf2f7;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
    }
    .touch-prompt {
      margin-top: 8px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .active .touch-prompt {
      color: #0284c7;
    }
    @media (max-width: 400px) {
      .grid {
        flex-direction: column;
      }
      .zoom-stage {
        height: 140px;
      }
      .title {
        font-size: 15px;
      }
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="card-panel active" id="smoothCard" onclick="feelEdge('smooth')">
      <div class="title">
        <span>Smooth</span>
        <span style="color:#16a34a; font-size:15px;">✓</span>
      </div>
      <div class="badge-row">
        <span class="coin-badge badge-penny">Penny</span>
        <span class="coin-badge badge-silver">Nickel</span>
      </div>
      
      <div class="zoom-stage">
        <svg viewBox="0 0 200 160">
          <defs>
            <linearGradient id="smoothGrad" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stop-color="#b45309" />
              <stop offset="25%" stop-color="#f59e0b" />
              <stop offset="50%" stop-color="#fef3c7" />
              <stop offset="75%" stop-color="#f59e0b" />
              <stop offset="100%" stop-color="#b45309" />
            </linearGradient>
            <linearGradient id="silverGrad" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="#94a3b8" />
              <stop offset="50%" stop-color="#f1f5f9" />
              <stop offset="100%" stop-color="#64748b" />
            </linearGradient>
          </defs>

          
          <circle cx="100" cy="80" r="68" fill="#ffffff" stroke="#cbd5e1" stroke-width="4" />
          <circle cx="100" cy="80" r="64" fill="#f8fafc" />

          
          <rect x="70" y="26" width="60" height="108" rx="4" fill="url(#smoothGrad)" stroke="#92400e" stroke-width="2" />
          
          
          <line x1="100" y1="28" x2="100" y2="132" stroke="#ffffff" stroke-width="4" opacity="0.8" />
          <line x1="82" y1="28" x2="82" y2="132" stroke="#d97706" stroke-width="1.5" opacity="0.6" />
          <line x1="118" y1="28" x2="118" y2="132" stroke="#d97706" stroke-width="1.5" opacity="0.6" />

          
          <g id="smoothFinger" transform="translate(132, 60)">
            <text x="0" y="20" font-size="28">👆</text>
            
            <path d="M 6,-18 L 6, -2 M 3, -6 L 6, -1 L 9, -6" stroke="#0284c7" stroke-width="2.5" fill="none" stroke-linecap="round" />
          </g>
        </svg>
      </div>
      <div class="touch-prompt">Flat Surface</div>
    </div>

    
    <div class="card-panel" id="ridgedCard" onclick="feelEdge('ridged')">
      <div class="title">
        <span>Ridged</span>
        <span style="color:#0284c7; font-size:14px;">✦</span>
      </div>
      <div class="badge-row">
        <span class="coin-badge badge-silver">Dime</span>
        <span class="coin-badge badge-silver">Quarter</span>
      </div>

      <div class="zoom-stage">
        <svg viewBox="0 0 200 160">
          
          <circle cx="100" cy="80" r="68" fill="#ffffff" stroke="#cbd5e1" stroke-width="4" />
          <circle cx="100" cy="80" r="64" fill="#f8fafc" />

          
          <rect x="74" y="26" width="52" height="108" rx="2" fill="#64748b" />

          
          
          <rect x="66" y="30" width="68" height="9" rx="3" fill="url(#silverGrad)" stroke="#475569" stroke-width="1" />
          
          <rect x="66" y="44" width="68" height="9" rx="3" fill="url(#silverGrad)" stroke="#475569" stroke-width="1" />
          
          <rect x="66" y="58" width="68" height="9" rx="3" fill="url(#silverGrad)" stroke="#475569" stroke-width="1" />
          
          <rect x="66" y="72" width="68" height="9" rx="3" fill="url(#silverGrad)" stroke="#475569" stroke-width="1" />
          
          <rect x="66" y="86" width="68" height="9" rx="3" fill="url(#silverGrad)" stroke="#475569" stroke-width="1" />
          
          <rect x="66" y="100" width="68" height="9" rx="3" fill="url(#silverGrad)" stroke="#475569" stroke-width="1" />
          
          <rect x="66" y="114" width="68" height="9" rx="3" fill="url(#silverGrad)" stroke="#475569" stroke-width="1" />

          
          <g id="ridgedFinger" transform="translate(132, 66)">
            <text x="0" y="20" font-size="28">👆</text>
            
            <path d="M 5,-14 C 11,-10 11,-4 5,0 C 11,4 11,10 5,14" fill="none" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" />
          </g>
        </svg>
      </div>
      <div class="touch-prompt">Groovy Ridges</div>
    </div>
  </div>

  <script>
    let audioCtx = null;

    function playTone(freq, dur = 0.15, type = 'sine') {
      try {
        if (!audioCtx) {
          audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        }
        if (audioCtx.state === 'suspended') {
          audioCtx.resume();
        }
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = type;
        osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        gain.gain.setValueAtTime(0.18, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + dur);
        osc.start();
        osc.stop(audioCtx.currentTime + dur);
      } catch (e) {}
    }

    function feelEdge(type) {
      const smoothCard = document.getElementById('smoothCard');
      const ridgedCard = document.getElementById('ridgedCard');
      const smoothFinger = document.getElementById('smoothFinger');
      const ridgedFinger = document.getElementById('ridgedFinger');

      if (type === 'smooth') {
        smoothCard.classList.add('active');
        ridgedCard.classList.remove('active');
        playTone(440, 0.25, 'sine');
        
        // Smooth slide animation
        smoothFinger.style.transition = 'transform 0.4s ease-in-out';
        smoothFinger.setAttribute('transform', 'translate(132, 40)');
        setTimeout(() => {
          smoothFinger.setAttribute('transform', 'translate(132, 80)');
        }, 400);
        setTimeout(() => {
          smoothFinger.setAttribute('transform', 'translate(132, 60)');
        }, 800);
      } else {
        ridgedCard.classList.add('active');
        smoothCard.classList.remove('active');
        
        // Tactile clicks
        playTone(320, 0.08, 'triangle');
        setTimeout(() => playTone(360, 0.08, 'triangle'), 100);
        setTimeout(() => playTone(400, 0.08, 'triangle'), 200);

        // Bumpy step animation
        ridgedFinger.style.transition = 'transform 0.1s ease';
        ridgedFinger.setAttribute('transform', 'translate(128, 54)');
        setTimeout(() => ridgedFinger.setAttribute('transform', 'translate(134, 68)'), 100);
        setTimeout(() => ridgedFinger.setAttribute('transform', 'translate(128, 82)'), 200);
        setTimeout(() => ridgedFinger.setAttribute('transform', 'translate(132, 66)'), 350);
      }
    }
  </script>
</body>
</html>

Sorting Coins by Color, Size, and Shape

<!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%;
    }

    .toolbar {
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 20px;
    }

    .filter-btn {
      border: none;
      background: transparent;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      border-radius: 16px;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }

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

    .matrix {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 620px;
    }

    @media (max-width: 480px) {
      .matrix {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }
    }

    .coin-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      box-shadow: 0 1px 4px rgba(0,0,0,0.04);
      transition: border-color 0.2s;
    }

    .coin-stage {
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 6px;
    }

    /* Coin CSS Visuals */
    .coin-disc {
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 14px;
      box-shadow: inset 0 2px 4px rgba(255,255,255,0.6), inset 0 -2px 4px rgba(0,0,0,0.15), 0 2px 5px rgba(0,0,0,0.12);
      border: 2px dashed transparent;
      user-select: none;
    }

    .penny-disc {
      width: 50px;
      height: 50px;
      background: radial-gradient(circle at 35% 35%, #fdbb74, #c2410c);
      color: #7c2d12;
      border-color: #9a3412;
      border-style: solid;
    }

    .nickel-disc {
      width: 58px;
      height: 58px;
      background: radial-gradient(circle at 35% 35%, #f8fafc, #94a3b8);
      color: #334155;
      border-color: #cbd5e1;
      border-style: solid;
    }

    .dime-disc {
      width: 42px;
      height: 42px;
      background: radial-gradient(circle at 35% 35%, #f8fafc, #94a3b8);
      color: #334155;
      border-color: #64748b;
      border-style: dashed;
    }

    .quarter-disc {
      width: 68px;
      height: 68px;
      background: radial-gradient(circle at 35% 35%, #f8fafc, #94a3b8);
      color: #334155;
      border-color: #64748b;
      border-style: dashed;
    }

    .coin-name {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 8px;
    }

    .tags-list {
      display: flex;
      flex-direction: column;
      gap: 5px;
      width: 100%;
    }

    .tag {
      font-size: 11.5px;
      font-weight: 600;
      padding: 4px 6px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: opacity 0.2s, transform 0.2s;
    }

    /* Tag Types */
    .tag-copper {
      background: #ffedd5;
      color: #9a3412;
    }

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

    .tag-size, .tag-edge {
      background: #f1f5f9;
      color: #475569;
    }

    /* Trait Highlight States */
    .dimmed {
      opacity: 0.25;
    }

    .highlighted {
      box-shadow: 0 0 0 2px #0284c7;
      font-weight: 700;
    }
  </style>
</head>
<body>

  
  <div class="toolbar" role="tablist">
    <button class="filter-btn active" data-trait="all">Show All</button>
    <button class="filter-btn" data-trait="color">Color</button>
    <button class="filter-btn" data-trait="size">Size</button>
    <button class="filter-btn" data-trait="edge">Edge</button>
  </div>

  
  <div class="matrix">
    
    
    <div class="coin-card">
      <div class="coin-stage">
        <div class="coin-disc penny-disc">1¢</div>
      </div>
      <div class="coin-name">Penny</div>
      <div class="tags-list">
        <span class="tag tag-copper" data-type="color">🟠 Copper</span>
        <span class="tag tag-size" data-type="size">📏 Small</span>
        <span class="tag tag-edge" data-type="edge">⭕ Smooth</span>
      </div>
    </div>

    
    <div class="coin-card">
      <div class="coin-stage">
        <div class="coin-disc nickel-disc">5¢</div>
      </div>
      <div class="coin-name">Nickel</div>
      <div class="tags-list">
        <span class="tag tag-silver" data-type="color">⚪ Silver</span>
        <span class="tag tag-size" data-type="size">📏 Medium</span>
        <span class="tag tag-edge" data-type="edge">⭕ Smooth</span>
      </div>
    </div>

    
    <div class="coin-card">
      <div class="coin-stage">
        <div class="coin-disc dime-disc">10¢</div>
      </div>
      <div class="coin-name">Dime</div>
      <div class="tags-list">
        <span class="tag tag-silver" data-type="color">⚪ Silver</span>
        <span class="tag tag-size" data-type="size">📏 Small</span>
        <span class="tag tag-edge" data-type="edge">🪚 Ridged</span>
      </div>
    </div>

    
    <div class="coin-card">
      <div class="coin-stage">
        <div class="coin-disc quarter-disc">25¢</div>
      </div>
      <div class="coin-name">Quarter</div>
      <div class="tags-list">
        <span class="tag tag-silver" data-type="color">⚪ Silver</span>
        <span class="tag tag-size" data-type="size">📏 Large</span>
        <span class="tag tag-edge" data-type="edge">🪚 Ridged</span>
      </div>
    </div>

  </div>

  <script>
    const buttons = document.querySelectorAll('.filter-btn');
    const tags = document.querySelectorAll('.tag');

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        const trait = btn.dataset.trait;

        tags.forEach(tag => {
          tag.classList.remove('dimmed', 'highlighted');
          if (trait !== 'all') {
            if (tag.dataset.type === trait) {
              tag.classList.add('highlighted');
            } else {
              tag.classList.add('dimmed');
            }
          }
        });
      });
    });
  </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;
      user-select: none;
    }

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

    .sorting-area {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px;
      width: 100%;
      max-width: 600px;
    }

    .bowl {
      flex: 1 1 240px;
      min-height: 240px;
      border-radius: 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 16px 12px 20px;
      position: relative;
      overflow: hidden;
    }

    .bowl-copper {
      background: linear-gradient(180deg, #fff8f3 0%, #f7e6dc 100%);
      border: 3px solid #b87333;
      box-shadow: inset 0 -6px 12px rgba(184, 115, 51, 0.15), 0 4px 12px rgba(184, 115, 51, 0.08);
    }

    .bowl-silver {
      background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
      border: 3px solid #94a3b8;
      box-shadow: inset 0 -6px 12px rgba(148, 163, 184, 0.2), 0 4px 12px rgba(148, 163, 184, 0.1);
    }

    .bowl-label {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;
      gap: 6px;
      z-index: 2;
    }

    .bowl-copper .bowl-label {
      color: #964e16;
    }

    .bowl-silver .bowl-label {
      color: #475569;
    }

    .dish-rim {
      position: absolute;
      bottom: 12px;
      left: 12px;
      right: 12px;
      height: 150px;
      border-radius: 18px;
      border: 2px dashed rgba(0, 0, 0, 0.08);
      pointer-events: none;
    }

    .coin-group {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      flex: 1;
      z-index: 2;
      flex-wrap: wrap;
    }

    .coin-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      transition: transform 0.2s ease;
    }

    .coin-wrapper:active {
      transform: translateY(-3px);
    }

    .coin {
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 2px 3px rgba(255, 255, 255, 0.6), inset 0 -2px 3px rgba(0, 0, 0, 0.25);
    }

    .coin::before {
      content: "";
      position: absolute;
      inset: 3px;
      border-radius: 50%;
      border: 1px dashed rgba(255, 255, 255, 0.4);
      pointer-events: none;
    }

    /* Copper Penny */
    .coin-penny {
      width: 74px;
      height: 74px;
      background: radial-gradient(circle at 35% 35%, #d9884e 0%, #b87333 60%, #804313 100%);
      border: 2px solid #804313;
    }

    /* Silver Coins: Proportional sizes */
    .coin-dime {
      width: 54px;
      height: 54px;
      background: radial-gradient(circle at 35% 35%, #ffffff 0%, #cbd5e1 55%, #64748b 100%);
      border: 2px solid #64748b;
    }

    .coin-nickel {
      width: 68px;
      height: 68px;
      background: radial-gradient(circle at 35% 35%, #ffffff 0%, #cbd5e1 55%, #64748b 100%);
      border: 2px solid #64748b;
    }

    .coin-quarter {
      width: 82px;
      height: 82px;
      background: radial-gradient(circle at 35% 35%, #ffffff 0%, #cbd5e1 55%, #64748b 100%);
      border: 2px solid #64748b;
    }

    .coin-val {
      font-weight: 900;
      line-height: 1;
      text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
    }

    .coin-penny .coin-val {
      font-size: 20px;
      color: #4a2105;
    }

    .coin-silver-text {
      color: #334155;
    }

    .coin-dime .coin-val { font-size: 15px; }
    .coin-nickel .coin-val { font-size: 18px; }
    .coin-quarter .coin-val { font-size: 22px; }

    .coin-name {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
    }

    .sparkle {
      position: absolute;
      color: #f59e0b;
      font-size: 14px;
      pointer-events: none;
      animation: pulse 2.4s infinite ease-in-out;
    }

    .sp-1 { top: 12px; right: 16px; animation-delay: 0.2s; }
    .sp-2 { top: 14px; left: 16px; animation-delay: 1.1s; color: #94a3b8; }
    .sp-3 { bottom: 16px; right: 20px; animation-delay: 0.7s; color: #64748b; }

    @keyframes pulse {
      0%, 100% { transform: scale(0.85); opacity: 0.4; }
      50% { transform: scale(1.2); opacity: 0.9; }
    }
  </style>
</head>
<body>

  <div class="sorting-area">
    
    <div class="bowl bowl-copper">
      <span class="sparkle sp-1">✦</span>
      <div class="bowl-label">
        <span>Copper</span>
      </div>
      <div class="dish-rim"></div>
      <div class="coin-group">
        <div class="coin-wrapper" onclick="shine(this)">
          <div class="coin coin-penny">
            <span class="coin-val">1¢</span>
          </div>
          <span class="coin-name">Penny</span>
        </div>
      </div>
    </div>

    
    <div class="bowl bowl-silver">
      <span class="sparkle sp-2">✦</span>
      <span class="sparkle sp-3">✦</span>
      <div class="bowl-label">
        <span>Silver</span>
      </div>
      <div class="dish-rim"></div>
      <div class="coin-group">
        <div class="coin-wrapper" onclick="shine(this)">
          <div class="coin coin-dime">
            <span class="coin-val coin-silver-text">10¢</span>
          </div>
          <span class="coin-name">Dime</span>
        </div>
        <div class="coin-wrapper" onclick="shine(this)">
          <div class="coin coin-nickel">
            <span class="coin-val coin-silver-text">5¢</span>
          </div>
          <span class="coin-name">Nickel</span>
        </div>
        <div class="coin-wrapper" onclick="shine(this)">
          <div class="coin coin-quarter">
            <span class="coin-val coin-silver-text">25¢</span>
          </div>
          <span class="coin-name">Quarter</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    function playChime() {
      try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.frequency.setValueAtTime(880, ctx.currentTime);
        osc.frequency.exponentialRampToValueAtTime(1320, ctx.currentTime + 0.15);
        gain.gain.setValueAtTime(0.15, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.3);
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start();
        osc.stop(ctx.currentTime + 0.3);
      } catch(e) {}
    }

    function shine(el) {
      playChime();
      const coin = el.querySelector('.coin');
      coin.style.boxShadow = '0 0 16px rgba(245, 158, 11, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.8)';
      setTimeout(() => {
        coin.style.boxShadow = '';
      }, 350);
    }
  </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%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .svg-container {
      width: 100%;
      max-width: 580px;
      height: auto;
      padding: 10px;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .coin-label {
      font-size: 15px;
      font-weight: 700;
      fill: #1e2945;
      text-anchor: middle;
    }
    .coin-sublabel {
      font-size: 12px;
      font-weight: 600;
      fill: #64748b;
      text-anchor: middle;
    }
    .coin-val {
      font-size: 13px;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .val-silver {
      fill: #475569;
    }
    .val-copper {
      fill: #7c2d12;
    }
    .ruler-line {
      stroke: #94a3b8;
      stroke-dasharray: 4 4;
      stroke-width: 1.5;
    }
    .base-line {
      stroke: #cbd5e1;
      stroke-width: 2;
    }
  </style>
</head>
<body>
  <div class="svg-container">
    <svg viewBox="0 0 500 320" aria-label="Coin size comparison: Dime, Penny, Nickel, Quarter">
      <defs>
        
        <linearGradient id="silverGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#f8fafc" />
          <stop offset="40%" stop-color="#e2e8f0" />
          <stop offset="100%" stop-color="#cbd5e1" />
        </linearGradient>

        
        <linearGradient id="copperGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#fed7aa" />
          <stop offset="40%" stop-color="#f97316" />
          <stop offset="100%" stop-color="#c2410c" />
        </linearGradient>

        
        <linearGradient id="nickelGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#ffffff" />
          <stop offset="35%" stop-color="#e2e8f0" />
          <stop offset="100%" stop-color="#94a3b8" />
        </linearGradient>
      </defs>

      
      <line x1="20" y1="210" x2="480" y2="210" class="base-line" />

      
      
      <line x1="30" y1="110" x2="480" y2="110" class="ruler-line" />
      
      <line x1="30" y1="123" x2="350" y2="123" class="ruler-line" />
      
      <line x1="30" y1="131" x2="230" y2="131" class="ruler-line" />
      
      <line x1="30" y1="136" x2="115" y2="136" class="ruler-line" />

      
      <g>
        <circle cx="75" cy="173" r="37" fill="url(#silverGrad)" stroke="#94a3b8" stroke-width="2" />
        <circle cx="75" cy="173" r="33" fill="none" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="2 2" />
        <text x="75" y="173" class="coin-val val-silver">10¢</text>
        <text x="75" y="240" class="coin-label">Dime</text>
        <text x="75" y="258" class="coin-sublabel">Smallest</text>
      </g>

      
      <g>
        <circle cx="185" cy="170.5" r="39.5" fill="url(#copperGrad)" stroke="#9a3412" stroke-width="2" />
        <circle cx="185" cy="170.5" r="35.5" fill="none" stroke="#fdba74" stroke-width="1" />
        <text x="185" y="170.5" class="coin-val val-copper">1¢</text>
        <text x="185" y="240" class="coin-label">Penny</text>
      </g>

      
      <g>
        <circle cx="300" cy="166.5" r="43.5" fill="url(#nickelGrad)" stroke="#475569" stroke-width="3.5" />
        <circle cx="300" cy="166.5" r="38" fill="none" stroke="#cbd5e1" stroke-width="1" />
        <text x="300" y="166.5" class="coin-val val-silver">5¢</text>
        <text x="300" y="240" class="coin-label">Nickel</text>
        <text x="300" y="258" class="coin-sublabel">Medium</text>
      </g>

      
      <g>
        <circle cx="425" cy="160" r="50" fill="url(#silverGrad)" stroke="#64748b" stroke-width="2.5" />
        <circle cx="425" cy="160" r="45" fill="none" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="3 2" />
        <text x="425" y="160" class="coin-val val-silver">25¢</text>
        <text x="425" y="240" class="coin-label">Quarter</text>
        <text x="425" y="258" class="coin-sublabel">Largest</text>
      </g>
    </svg>
  </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;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    html, body {
      width: 100%;
      height: 100%;
      background: #f8fafc;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .main-wrapper {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px 12px;
      position: relative;
      z-index: 2;
    }

    /* Stage Area */
    .stage {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    /* Pennies Row */
    .coins-container {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 6px;
      align-items: center;
      position: relative;
      margin-top: 4px;
      margin-bottom: 16px;
    }

    .coin-slot {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      cursor: pointer;
    }

    /* Floating Badge / Checkmark */
    .count-badge {
      height: 26px;
      min-width: 38px;
      padding: 0 5px;
      background: #10b981;
      color: #ffffff;
      font-size: clamp(11px, 2.8vw, 13px);
      font-weight: 700;
      border-radius: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      opacity: 0;
      transform: translateY(6px) scale(0.8);
      transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
      margin-bottom: 6px;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
      pointer-events: none;
      white-space: nowrap;
    }

    .coin-slot.counted .count-badge {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* Copper Penny */
    .penny {
      width: 100%;
      max-width: 62px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle at 32% 28%, #ffb885 0%, #c96d29 45%, #8f3c0a 100%);
      box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.6),
        inset 0 -2px 3px rgba(0, 0, 0, 0.4),
        0 3px 6px rgba(143, 60, 10, 0.25);
      border: 2px solid #df803c;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease, opacity 0.35s ease;
    }

    .coin-slot.active .penny {
      transform: scale(1.06);
      box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.7),
        0 0 0 3px #22b7ff,
        0 5px 12px rgba(34, 183, 255, 0.35);
    }

    .coin-slot:not(.counted):not(.active) .penny {
      filter: grayscale(0.2) brightness(0.92);
      opacity: 0.85;
    }

    .coin-slot.counted .penny {
      filter: none;
      opacity: 1;
    }

    /* Inner Ring and Details */
    .penny-inner {
      width: 80%;
      height: 80%;
      border-radius: 50%;
      border: 1px dashed rgba(255, 240, 220, 0.55);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #ffe4cc;
      text-shadow: 0 -1px 1px rgba(0,0,0,0.5), 0 1px 1px rgba(255,255,255,0.4);
    }

    .penny-val {
      font-size: clamp(13px, 3.2vw, 17px);
      font-weight: 800;
      line-height: 1;
    }

    /* Pointer Hand */
    .hand-tracker {
      position: absolute;
      top: calc(100% - 2px);
      left: 0;
      width: 16.666%;
      display: flex;
      justify-content: center;
      pointer-events: none;
      transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
      font-size: 24px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
      z-index: 10;
    }

    .hand-icon {
      animation: tapBounce 0.8s ease-in-out infinite alternate;
    }

    @keyframes tapBounce {
      0% { transform: translateY(0); }
      100% { transform: translateY(5px); }
    }

    /* Result Card */
    .result-container {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 100%;
      margin-top: 4px;
    }

    .total-card {
      background: #ffffff;
      border: 2px solid #10b981;
      border-radius: 14px;
      padding: 6px 20px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: clamp(17px, 4vw, 22px);
      font-weight: 800;
      color: #065f46;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
      opacity: 0;
      transform: translateY(10px) scale(0.92);
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      pointer-events: none;
    }

    .total-card.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .sparkle {
      font-size: 18px;
      animation: spinSlow 3s linear infinite;
    }

    @keyframes spinSlow {
      0% { transform: rotate(0deg) scale(1); }
      50% { transform: rotate(180deg) scale(1.2); }
      100% { transform: rotate(360deg) scale(1); }
    }

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      margin-top: 12px;
    }

    .btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      color: #1e2945;
      padding: 7px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }

    .btn:active {
      background: #e2e8f0;
    }

    .btn-primary {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    .btn-primary:active {
      background: #0369a1;
      border-color: #0369a1;
    }

    /* Confetti Canvas */
    #confettiCanvas {
      position: absolute;
      inset: 0;
      pointer-events: none;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
  </style>
</head>
<body>

  <canvas id="confettiCanvas"></canvas>

  <div class="main-wrapper">
    <div class="stage">
      
      <div class="coins-container" id="coinsContainer">
        <div class="coin-slot" data-step="1">
          <div class="count-badge">✓ 1¢</div>
          <div class="penny">
            <div class="penny-inner">
              <span class="penny-val">1¢</span>
            </div>
          </div>
        </div>

        <div class="coin-slot" data-step="2">
          <div class="count-badge">✓ 2¢</div>
          <div class="penny">
            <div class="penny-inner">
              <span class="penny-val">1¢</span>
            </div>
          </div>
        </div>

        <div class="coin-slot" data-step="3">
          <div class="count-badge">✓ 3¢</div>
          <div class="penny">
            <div class="penny-inner">
              <span class="penny-val">1¢</span>
            </div>
          </div>
        </div>

        <div class="coin-slot" data-step="4">
          <div class="count-badge">✓ 4¢</div>
          <div class="penny">
            <div class="penny-inner">
              <span class="penny-val">1¢</span>
            </div>
          </div>
        </div>

        <div class="coin-slot" data-step="5">
          <div class="count-badge">✓ 5¢</div>
          <div class="penny">
            <div class="penny-inner">
              <span class="penny-val">1¢</span>
            </div>
          </div>
        </div>

        <div class="coin-slot" data-step="6">
          <div class="count-badge">✓ 6¢</div>
          <div class="penny">
            <div class="penny-inner">
              <span class="penny-val">1¢</span>
            </div>
          </div>
        </div>

        
        <div class="hand-tracker" id="handTracker">
          <div class="hand-icon">👆</div>
        </div>
      </div>

      
      <div class="result-container">
        <div class="total-card" id="totalCard">
          <span class="sparkle">✦</span>
          <span>Total = 6¢</span>
          <span class="sparkle">✦</span>
        </div>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn" id="prevBtn" title="Previous">◀</button>
      <button class="btn btn-primary" id="playBtn">⏸ Pause</button>
      <button class="btn" id="nextBtn" title="Next">▶</button>
      <button class="btn" id="resetBtn" title="Restart">↺</button>
    </div>
  </div>

  <script>
    // Audio Context Synthesizer (plays on interaction)
    let audioCtx = null;
    function playCoinChime(stepIndex) {
      try {
        if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        if (audioCtx.state === 'suspended') audioCtx.resume();
        
        const freqs = [523.25, 587.33, 659.25, 783.99, 880.00, 1046.50];
        const f = freqs[stepIndex] || 523.25;

        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = 'triangle';
        osc.frequency.setValueAtTime(f, audioCtx.currentTime);
        
        gain.gain.setValueAtTime(0.18, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.35);

        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start();
        osc.stop(audioCtx.currentTime + 0.35);
      } catch (e) {}
    }

    // Confetti System
    const canvas = document.getElementById('confettiCanvas');
    const ctx = canvas.getContext('2d');
    let confetti = [];
    let confettiRunning = false;

    function resizeCanvas() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    }
    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();

    function launchConfetti() {
      confetti = [];
      const colors = ['#22b7ff', '#10b981', '#f59e0b', '#ec4899', '#8b5cf6', '#df803c'];
      for (let i = 0; i < 45; i++) {
        confetti.push({
          x: canvas.width * 0.5 + (Math.random() - 0.5) * 120,
          y: canvas.height * 0.65,
          vx: (Math.random() - 0.5) * 8,
          vy: -(Math.random() * 6 + 5),
          size: Math.random() * 6 + 4,
          color: colors[Math.floor(Math.random() * colors.length)],
          rotation: Math.random() * 360,
          rotSpeed: (Math.random() - 0.5) * 10,
          opacity: 1
        });
      }
      if (!confettiRunning) {
        confettiRunning = true;
        renderConfetti();
      }
    }

    function renderConfetti() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      let alive = false;
      confetti.forEach(p => {
        p.x += p.vx;
        p.y += p.vy;
        p.vy += 0.22;
        p.rotation += p.rotSpeed;
        p.opacity -= 0.012;

        if (p.opacity > 0) {
          alive = true;
          ctx.save();
          ctx.translate(p.x, p.y);
          ctx.rotate((p.rotation * Math.PI) / 180);
          ctx.fillStyle = p.color;
          ctx.globalAlpha = Math.max(0, p.opacity);
          ctx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size);
          ctx.restore();
        }
      });

      if (alive) {
        requestAnimationFrame(renderConfetti);
      } else {
        confettiRunning = false;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      }
    }

    // Step Logic
    const slots = document.querySelectorAll('.coin-slot');
    const handTracker = document.getElementById('handTracker');
    const totalCard = document.getElementById('totalCard');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const resetBtn = document.getElementById('resetBtn');

    let currentStep = 0;
    let isPlaying = true;
    let timer = null;
    const STEP_DURATION = 2200; // Calm, clear pacing allowing each state to be seen for >500ms

    function updateView(playSound = false) {
      slots.forEach((slot, idx) => {
        const stepNum = idx + 1;
        slot.classList.remove('active', 'counted');

        if (stepNum < currentStep) {
          slot.classList.add('counted');
        } else if (stepNum === currentStep) {
          slot.classList.add('active', 'counted');
        }
      });

      if (currentStep > 0 && currentStep <= 6) {
        handTracker.style.opacity = '1';
        handTracker.style.transform = `translateX(${(currentStep - 1) * 100}%)`;
        if (playSound) playCoinChime(currentStep - 1);
      } else {
        handTracker.style.opacity = '0';
      }

      if (currentStep === 6) {
        totalCard.classList.add('visible');
        launchConfetti();
      } else {
        totalCard.classList.remove('visible');
      }
    }

    function goToStep(step, userInteracted = false) {
      if (step < 1) step = 1;
      if (step > 6) step = 6;
      currentStep = step;
      updateView(userInteracted);
    }

    function advance() {
      if (currentStep < 6) {
        currentStep++;
        updateView(false);
      } else {
        currentStep = 1;
        updateView(false);
      }
    }

    function startAutoPlay() {
      stopAutoPlay();
      isPlaying = true;
      playBtn.textContent = '⏸ Pause';
      timer = setInterval(advance, STEP_DURATION);
    }

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

    // Direct slot click
    slots.forEach((slot, idx) => {
      slot.addEventListener('click', () => {
        stopAutoPlay();
        goToStep(idx + 1, true);
      });
    });

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

    prevBtn.addEventListener('click', () => {
      stopAutoPlay();
      goToStep(currentStep > 1 ? currentStep - 1 : 6, true);
    });

    nextBtn.addEventListener('click', () => {
      stopAutoPlay();
      goToStep(currentStep < 6 ? currentStep + 1 : 1, true);
    });

    resetBtn.addEventListener('click', () => {
      stopAutoPlay();
      goToStep(1, true);
    });

    // Initialize
    goToStep(1, false);
    startAutoPlay();
  </script>
</body>
</html>

Counting Pennies One by One

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      gap: 14px;
      user-select: none;
      -webkit-user-select: none;
    }

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

    .ten-frame {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 6px;
      background: #ffffff;
      padding: 8px;
      border: 2px solid #cbd5e1;
      border-radius: 12px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    .slot {
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .slot.empty {
      border: 2px dashed #e2e8f0;
      background: #f8fafc;
    }

    .penny {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #f6ad55 0%, #c05621 65%, #7b341e 100%);
      box-shadow: 0 2px 4px rgba(123, 52, 30, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .penny:active {
      transform: scale(0.95);
    }

    .penny.active-pulse {
      box-shadow: 0 0 0 3px #f97316, 0 4px 8px rgba(123, 52, 30, 0.4);
    }

    .inner-circle {
      width: 66%;
      height: 66%;
      border-radius: 50%;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      color: #1e293b;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
      line-height: 1;
    }

    .cent {
      color: #ea580c;
      font-weight: 800;
      margin-left: 0.5px;
    }

    .formula-card {
      width: 100%;
      max-width: 620px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px 12px;
      font-size: 18px;
      font-weight: 700;
      color: #334155;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      text-align: center;
    }

    .formula-part {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .tag-ten {
      background: #fef3c7;
      color: #92400e;
      padding: 2px 8px;
      border-radius: 6px;
    }

    .tag-three {
      background: #ffedd5;
      color: #9a3412;
      padding: 2px 8px;
      border-radius: 6px;
    }

    .tag-total {
      background: #e0f2fe;
      color: #0369a1;
      padding: 2px 8px;
      border-radius: 6px;
    }

    .tag-cents {
      background: #ffedd5;
      color: #c2410c;
      padding: 2px 10px;
      border-radius: 6px;
      border: 1px solid #fed7aa;
      font-size: 20px;
    }

    @media (max-width: 480px) {
      .ten-frame {
        gap: 3px;
        padding: 5px;
      }
      .inner-circle {
        font-size: 10px;
        width: 72%;
        height: 72%;
      }
      .formula-card {
        font-size: 14px;
        padding: 10px;
        gap: 6px 8px;
      }
      .tag-cents {
        font-size: 16px;
      }
    }
  </style>
</head>
<body>

  <div class="frames-container">
    
    <div class="ten-frame" id="topFrame">
      <div class="slot"><div class="penny" onclick="playCoin(1)"><div class="inner-circle">1<span class="cent">¢</span></div></div></div>
      <div class="slot"><div class="penny" onclick="playCoin(2)"><div class="inner-circle">2<span class="cent">¢</span></div></div></div>
      <div class="slot"><div class="penny" onclick="playCoin(3)"><div class="inner-circle">3<span class="cent">¢</span></div></div></div>
      <div class="slot"><div class="penny" onclick="playCoin(4)"><div class="inner-circle">4<span class="cent">¢</span></div></div></div>
      <div class="slot"><div class="penny" onclick="playCoin(5)"><div class="inner-circle">5<span class="cent">¢</span></div></div></div>
      <div class="slot"><div class="penny" onclick="playCoin(6)"><div class="inner-circle">6<span class="cent">¢</span></div></div></div>
      <div class="slot"><div class="penny" onclick="playCoin(7)"><div class="inner-circle">7<span class="cent">¢</span></div></div></div>
      <div class="slot"><div class="penny" onclick="playCoin(8)"><div class="inner-circle">8<span class="cent">¢</span></div></div></div>
      <div class="slot"><div class="penny" onclick="playCoin(9)"><div class="inner-circle">9<span class="cent">¢</span></div></div></div>
      <div class="slot"><div class="penny" onclick="playCoin(10)"><div class="inner-circle">10<span class="cent">¢</span></div></div></div>
    </div>

    
    <div class="ten-frame" id="bottomFrame">
      <div class="slot"><div class="penny" onclick="playCoin(11)"><div class="inner-circle">11<span class="cent">¢</span></div></div></div>
      <div class="slot"><div class="penny" onclick="playCoin(12)"><div class="inner-circle">12<span class="cent">¢</span></div></div></div>
      <div class="slot"><div class="penny" onclick="playCoin(13)"><div class="inner-circle">13<span class="cent">¢</span></div></div></div>
      <div class="slot empty"></div>
      <div class="slot empty"></div>
      <div class="slot empty"></div>
      <div class="slot empty"></div>
      <div class="slot empty"></div>
      <div class="slot empty"></div>
      <div class="slot empty"></div>
    </div>
  </div>

  
  <div class="formula-card">
    <span class="formula-part"><span class="tag-ten">10 pennies</span></span>
    <span>+</span>
    <span class="formula-part"><span class="tag-three">3 pennies</span></span>
    <span>=</span>
    <span class="formula-part"><span class="tag-total">13 pennies</span></span>
    <span>=</span>
    <span class="formula-part"><span class="tag-cents">13<span class="cent">¢</span></span></span>
  </div>

  <script>
    let audioCtx = null;

    function playCoin(num) {
      // Sound synthesis on tap
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }

      const osc = audioCtx.createOscillator();
      const gain = audioCtx.createGain();
      const baseFreq = 480 + (num * 30);

      osc.type = 'triangle';
      osc.frequency.setValueAtTime(baseFreq, audioCtx.currentTime);
      osc.frequency.exponentialRampToValueAtTime(baseFreq * 1.5, audioCtx.currentTime + 0.12);

      gain.gain.setValueAtTime(0.18, audioCtx.currentTime);
      gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.25);

      osc.connect(gain);
      gain.connect(audioCtx.destination);

      osc.start();
      osc.stop(audioCtx.currentTime + 0.25);
    }
  </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;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 16px;
      user-select: none;
    }
    .diagram-grid {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 24px;
      width: 100%;
      max-width: 520px;
    }
    .coin-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      transition: opacity 0.2s ease;
    }
    .coin-card:active {
      opacity: 0.85;
    }
    .coin-svg {
      width: 140px;
      height: 140px;
      filter: drop-shadow(0 8px 16px rgba(122, 56, 9, 0.22));
      transition: filter 0.3s ease;
    }
    .coin-tag {
      font-size: 15px;
      font-weight: 700;
      color: #7a3809;
      background: #fed7aa;
      border: 1.5px solid #f97316;
      border-radius: 999px;
      padding: 4px 14px;
      letter-spacing: 0.02em;
    }
    .coin-sub {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-top: -6px;
    }
    .value-banner {
      margin-top: 24px;
      background: #ffffff;
      border: 2px solid #fdba74;
      box-shadow: 0 4px 12px rgba(184, 93, 25, 0.1);
      border-radius: 16px;
      padding: 12px 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 20px;
      font-weight: 800;
      color: #1e2945;
      letter-spacing: -0.01em;
    }
    .val-highlight {
      color: #b85d19;
      font-weight: 900;
    }
    .equal-sign {
      color: #94a3b8;
      font-weight: 700;
    }
    @media (max-width: 400px) {
      .diagram-grid {
        gap: 14px;
      }
      .coin-svg {
        width: 115px;
        height: 115px;
      }
      .value-banner {
        font-size: 17px;
        padding: 10px 18px;
        margin-top: 18px;
      }
    }
  </style>
</head>
<body>

  <div class="diagram-grid">
    
    <div class="coin-card" id="headsCard" title="Heads (Front)">
      <svg class="coin-svg" viewBox="0 0 160 160" aria-label="Penny Heads Front">
        <defs>
          <linearGradient id="copperBase" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#f59e0b" />
            <stop offset="35%" stop-color="#c2631a" />
            <stop offset="70%" stop-color="#8a3c0d" />
            <stop offset="100%" stop-color="#5a2206" />
          </linearGradient>
          <linearGradient id="rimGrad" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#fbbf24" stop-opacity="0.8"/>
            <stop offset="100%" stop-color="#451a03" stop-opacity="0.9"/>
          </linearGradient>
          <linearGradient id="emboss" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#fed7aa"/>
            <stop offset="60%" stop-color="#d97706"/>
            <stop offset="100%" stop-color="#7c2d12"/>
          </linearGradient>
          <radialGradient id="highlight" cx="35%" cy="30%" r="60%">
            <stop offset="0%" stop-color="#ffffff" stop-opacity="0.35"/>
            <stop offset="50%" stop-color="#ffffff" stop-opacity="0"/>
          </radialGradient>
        </defs>

        
        <circle cx="80" cy="80" r="76" fill="url(#copperBase)" stroke="url(#rimGrad)" stroke-width="4" />
        <circle cx="80" cy="80" r="69" fill="none" stroke="#fed7aa" stroke-width="1.5" stroke-opacity="0.4" />

        
        <g fill="url(#emboss)">
          
          <ellipse cx="80" cy="62" rx="19" ry="24" transform="rotate(-6 80 62)" />
          
          <path d="M 88 50 C 96 54, 98 62, 98 65 L 91 67 C 97 70, 96 74, 90 76 L 86 76 C 90 80, 93 84, 94 92 C 86 92, 80 89, 78 86 Z" />
          
          <path d="M 76 83 C 82 86, 92 88, 92 95 C 88 98, 80 97, 72 94 Z" />
          
          <path d="M 46 126 C 48 102, 64 96, 76 96 C 88 96, 106 104, 114 126 Z" />
          
          <polygon points="76,96 82,106 72,106" fill="#fed7aa" />
          <polygon points="74,103 84,103 79,108" fill="#7c2d12" />
        </g>

        
        
        <text x="32" y="76" font-size="8.5" font-weight="900" fill="#fde68a" letter-spacing="0.5" opacity="0.9">LIBERTY</text>
        
        <path id="archHeads" d="M 32 40 Q 80 18 128 40" fill="none" />
        <text font-size="7.5" font-weight="800" fill="#fde68a" opacity="0.85">
          <textPath href="#archHeads" startOffset="50%" text-anchor="middle">IN GOD WE TRUST</textPath>
        </text>

        
        <circle cx="80" cy="80" r="76" fill="url(#highlight)" pointer-events="none" />
      </svg>
      <span class="coin-tag">Heads</span>
      <span class="coin-sub">Front</span>
    </div>

    
    <div class="coin-card" id="tailsCard" title="Tails (Back)">
      <svg class="coin-svg" viewBox="0 0 160 160" aria-label="Penny Tails Back">
        
        <circle cx="80" cy="80" r="76" fill="url(#copperBase)" stroke="url(#rimGrad)" stroke-width="4" />
        <circle cx="80" cy="80" r="69" fill="none" stroke="#fed7aa" stroke-width="1.5" stroke-opacity="0.4" />

        
        <g fill="url(#emboss)">
          
          <path d="M 52 56 Q 80 52 108 56 L 108 67 Q 80 64 52 67 Z" fill="#fde68a" />
          
          <path d="M 52 67 Q 80 64 108 67 L 108 86 Q 104 108 80 118 Q 56 108 52 86 Z" />
          
          
          <g fill="#7c2d12">
            <rect x="58" y="66" width="4" height="26" rx="1"/>
            <rect x="68" y="65.5" width="4" height="36" rx="1"/>
            <rect x="78" y="65" width="4" height="42" rx="1"/>
            <rect x="88" y="65.5" width="4" height="36" rx="1"/>
            <rect x="98" y="66" width="4" height="26" rx="1"/>
          </g>
          
          
          <rect x="44" y="80" width="72" height="13" rx="3" fill="#fef3c7" stroke="#9a3412" stroke-width="1"/>
          <text x="80" y="89.5" font-size="8" font-weight="900" fill="#7c2d12" text-anchor="middle" letter-spacing="0.5">ONE CENT</text>
        </g>

        
        <path id="archTails" d="M 24 50 Q 80 12 136 50" fill="none" />
        <text font-size="7" font-weight="800" fill="#fde68a" opacity="0.9">
          <textPath href="#archTails" startOffset="50%" text-anchor="middle">UNITED STATES OF AMERICA</textPath>
        </text>

        
        <text x="80" y="132" font-size="6.5" font-weight="800" fill="#fde68a" text-anchor="middle" opacity="0.85">E PLURIBUS UNUM</text>

        
        <circle cx="80" cy="80" r="76" fill="url(#highlight)" pointer-events="none" />
      </svg>
      <span class="coin-tag">Tails</span>
      <span class="coin-sub">Back</span>
    </div>
  </div>

  
  <div class="value-banner">
    <span>1 Penny</span>
    <span class="equal-sign">=</span>
    <span>1 Cent</span>
    <span class="equal-sign">=</span>
    <span class="val-highlight">1¢</span>
  </div>

</body>
</html>

OGM.1.MD.4

Aligned learning resources

Related diagrams