<!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">
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 16px 8px;
      min-height: 100%;
      user-select: none;
    }

    .header-tag {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #0284c7;
      background: #e0f2fe;
      padding: 4px 12px;
      border-radius: 999px;
      margin-bottom: 8px;
    }

    .track-container {
      width: 100%;
      max-width: 620px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      position: relative;
      padding: 8px 4px;
    }

    .step-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      position: relative;
      cursor: pointer;
      opacity: 0.35;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .step-node.active-step {
      opacity: 1;
    }

    .step-node.current-step .coin {
      box-shadow: 0 0 0 4px #0284c7, 0 6px 12px rgba(0,0,0,0.15);
      transform: translateY(-2px);
    }

    .coin-wrap {
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .coin {
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      color: #334155;
      border: 2px solid #94a3b8;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .coin-quarter {
      width: 54px;
      height: 54px;
      background: radial-gradient(circle at 35% 35%, #f8fafc, #cbd5e1);
      border-color: #94a3b8;
      font-size: 15px;
    }

    .coin-dime {
      width: 40px;
      height: 40px;
      background: radial-gradient(circle at 35% 35%, #f8fafc, #cbd5e1);
      border-color: #94a3b8;
      font-size: 13px;
    }

    .coin-nickel {
      width: 48px;
      height: 48px;
      background: radial-gradient(circle at 35% 35%, #f8fafc, #cbd5e1);
      border-color: #94a3b8;
      font-size: 14px;
    }

    .coin-penny {
      width: 44px;
      height: 44px;
      background: radial-gradient(circle at 35% 35%, #fed7aa, #c2410c);
      border-color: #9a3412;
      color: #ffffff;
      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
      font-size: 14px;
    }

    .coin-name {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      margin-top: 4px;
      margin-bottom: 12px;
    }

    .add-badge {
      font-size: 12px;
      font-weight: 700;
      color: #059669;
      background: #ecfdf5;
      border: 1px solid #a7f3d0;
      border-radius: 6px;
      padding: 2px 6px;
      margin-bottom: 8px;
      min-height: 20px;
      display: flex;
      align-items: center;
    }

    .total-bubble {
      background: #10b981;
      color: #ffffff;
      font-weight: 800;
      font-size: 16px;
      padding: 6px 10px;
      border-radius: 20px;
      min-width: 52px;
      text-align: center;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
      transition: transform 0.3s ease, background 0.3s ease;
    }

    .step-node.final-node .total-bubble {
      background: #059669;
      box-shadow: 0 0 0 3px #a7f3d0, 0 4px 10px rgba(5, 150, 105, 0.4);
    }

    /* Arrows connecting total bubbles */
    .arrow-divider {
      position: absolute;
      top: 118px;
      color: #10b981;
      font-size: 16px;
      font-weight: 900;
      pointer-events: none;
      transform: translateX(-50%);
      opacity: 0.3;
      transition: opacity 0.3s ease;
    }

    .arrow-divider.active-arrow {
      opacity: 1;
    }

    .controls-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 12px;
      width: 100%;
    }

    .ctrl-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      font-size: 15px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 8px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s ease;
    }

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

    .dots-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

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

    .dot.active-dot {
      background: #0284c7;
      transform: scale(1.25);
    }

    @media (max-width: 440px) {
      .coin-quarter { width: 44px; height: 44px; font-size: 13px; }
      .coin-nickel { width: 40px; height: 40px; font-size: 12px; }
      .coin-penny { width: 38px; height: 38px; font-size: 12px; }
      .coin-dime { width: 34px; height: 34px; font-size: 11px; }
      .coin-name { font-size: 10px; }
      .total-bubble { font-size: 13px; min-width: 42px; padding: 4px 6px; }
      .add-badge { font-size: 10px; padding: 1px 4px; }
    }
  </style>
</head>
<body>

  <div class="header-tag">Count Highest to Lowest Value</div>

  <div class="track-container" id="track">
    
    <div class="step-node" data-step="0">
      <div class="coin-wrap"><div class="coin coin-quarter">25¢</div></div>
      <div class="coin-name">Quarter</div>
      <div class="add-badge">Start</div>
      <div class="total-bubble">25¢</div>
    </div>

    <div class="arrow-divider" style="left: 20%;">➔</div>

    
    <div class="step-node" data-step="1">
      <div class="coin-wrap"><div class="coin coin-quarter">25¢</div></div>
      <div class="coin-name">Quarter</div>
      <div class="add-badge">+25¢</div>
      <div class="total-bubble">50¢</div>
    </div>

    <div class="arrow-divider" style="left: 40%;">➔</div>

    
    <div class="step-node" data-step="2">
      <div class="coin-wrap"><div class="coin coin-dime">10¢</div></div>
      <div class="coin-name">Dime</div>
      <div class="add-badge">+10¢</div>
      <div class="total-bubble">60¢</div>
    </div>

    <div class="arrow-divider" style="left: 60%;">➔</div>

    
    <div class="step-node" data-step="3">
      <div class="coin-wrap"><div class="coin coin-nickel">5¢</div></div>
      <div class="coin-name">Nickel</div>
      <div class="add-badge">+5¢</div>
      <div class="total-bubble">65¢</div>
    </div>

    <div class="arrow-divider" style="left: 80%;">➔</div>

    
    <div class="step-node final-node" data-step="4">
      <div class="coin-wrap"><div class="coin coin-penny">1¢</div></div>
      <div class="coin-name">Penny</div>
      <div class="add-badge">+1¢</div>
      <div class="total-bubble">66¢</div>
    </div>
  </div>

  <div class="controls-row">
    <button class="ctrl-btn" id="prevBtn" aria-label="Previous">◀</button>
    <button class="ctrl-btn" id="playBtn" style="min-width: 72px;">⏸ Pause</button>
    <button class="ctrl-btn" id="nextBtn" aria-label="Next">▶</button>
    <div class="dots-row">
      <div class="dot" data-step="0"></div>
      <div class="dot" data-step="1"></div>
      <div class="dot" data-step="2"></div>
      <div class="dot" data-step="3"></div>
      <div class="dot" data-step="4"></div>
    </div>
  </div>

  <script>
    const nodes = Array.from(document.querySelectorAll('.step-node'));
    const arrows = Array.from(document.querySelectorAll('.arrow-divider'));
    const dots = Array.from(document.querySelectorAll('.dot'));
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    let currentStep = 4;
    let isPlaying = true;
    let timer = null;

    function render(step) {
      currentStep = step;
      nodes.forEach((node, i) => {
        node.classList.toggle('active-step', i <= step);
        node.classList.toggle('current-step', i === step);
      });
      arrows.forEach((arr, i) => {
        arr.classList.toggle('active-arrow', i < step);
      });
      dots.forEach((dot, i) => {
        dot.classList.toggle('active-dot', i === step);
      });
    }

    function next() {
      render((currentStep + 1) % nodes.length);
    }

    function prev() {
      render((currentStep - 1 + nodes.length) % nodes.length);
    }

    function startAuto() {
      stopAuto();
      isPlaying = true;
      playBtn.innerHTML = '⏸ Pause';
      timer = setInterval(next, 3000);
    }

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

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

    prevBtn.addEventListener('click', () => {
      stopAuto();
      prev();
    });

    nextBtn.addEventListener('click', () => {
      stopAuto();
      next();
    });

    nodes.forEach((node, idx) => {
      node.addEventListener('click', () => {
        stopAuto();
        render(idx);
      });
    });

    dots.forEach((dot, idx) => {
      dot.addEventListener('click', () => {
        stopAuto();
        render(idx);
      });
    });

    // Start with all revealed, then begin step cycling
    render(4);
    startAuto();
  </script>
</body>
</html>

Counting Mixed Coins Starting with the Highest Value

<!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: center;
      min-height: 100vh;
      padding: 16px;
    }
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 520px;
      margin-bottom: 16px;
    }
    .coin-column {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 16px 12px;
      transition: all 0.3s ease;
    }
    .coin-column.highlight {
      border-color: #0d9488;
      background: #f0fdfa;
      box-shadow: 0 4px 12px rgba(13, 148, 136, 0.12);
    }
    .coin-stage {
      height: 130px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 100%;
    }
    .coin {
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      box-shadow: inset 0 2px 4px rgba(255,255,255,0.8), 0 4px 8px rgba(0,0,0,0.15);
      border: 3px dashed #94a3b8;
      position: relative;
    }
    .nickel {
      width: 110px;
      height: 110px;
      background: radial-gradient(circle at 35% 35%, #f1f5f9 0%, #cbd5e1 60%, #94a3b8 100%);
      color: #475569;
    }
    .dime {
      width: 82px;
      height: 82px;
      background: radial-gradient(circle at 35% 35%, #ffffff 0%, #e2e8f0 60%, #cbd5e1 100%);
      color: #334155;
    }
    .coin-name {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-weight: 700;
    }
    .tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 12px;
      margin-top: 6px;
      background: #e2e8f0;
      color: #475569;
    }
    .value-badge {
      margin-top: 10px;
      font-size: 20px;
      font-weight: 800;
      padding: 6px 14px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .value-nickel {
      background: #ffedd5;
      color: #ea580c;
      border: 1.5px solid #fdba74;
    }
    .value-dime {
      background: #ccfbf1;
      color: #0f766e;
      border: 1.5px solid #5eead4;
    }
    .dimension-line {
      font-size: 11px;
      color: #64748b;
      font-weight: 600;
      margin-top: 4px;
    }
    .banner {
      width: 100%;
      max-width: 520px;
      background: #0f766e;
      color: #ffffff;
      padding: 12px 16px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      box-shadow: 0 3px 6px rgba(15, 118, 110, 0.2);
    }
    .check-icon {
      background: #ffffff;
      color: #0f766e;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 900;
      flex-shrink: 0;
    }
  </style>
</head>
<body>

  <div class="comparison-grid">
    
    <div class="coin-column">
      <div class="coin-stage">
        <div class="coin nickel">
          <span class="coin-name">Nickel</span>
        </div>
      </div>
      <span class="dimension-line">⌀ 21.2 mm</span>
      <span class="tag">Larger Size</span>
      <div class="value-badge value-nickel">5¢</div>
    </div>

    
    <div class="coin-column highlight">
      <div class="coin-stage">
        <div class="coin dime">
          <span class="coin-name">Dime</span>
        </div>
      </div>
      <span class="dimension-line">⌀ 17.9 mm</span>
      <span class="tag">Smaller Size</span>
      <div class="value-badge value-dime">10¢ <span>⭐</span></div>
    </div>
  </div>

  
  <div class="banner">
    <span class="check-icon">✓</span>
    <span>10¢ is greater than 5¢ — Value always comes first!</span>
  </div>

</body>
</html>

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

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

    .instruction-title {
      font-size: 15px;
      font-weight: 700;
      color: #334155;
      text-align: center;
    }

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

    .coin-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      background: #ffffff;
      border-radius: 10px;
      padding: 8px 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      border: 2px solid #e2e8f0;
      transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
      cursor: pointer;
      min-height: 110px;
    }

    .coin-step:hover {
      border-color: #0284c7;
    }

    .coin-step.active {
      border-color: #0284c7;
      background: #f0f9ff;
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.25);
    }

    .coin-step.completed {
      border-color: #cbd5e1;
      background: #f8fafc;
    }

    .coin {
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      box-shadow: inset 0 2px 3px rgba(255,255,255,0.7), inset 0 -2px 3px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.15);
      position: relative;
      margin-bottom: 4px;
    }

    /* Proportional Coin Styling */
    .coin-quarter {
      width: 48px;
      height: 48px;
      background: radial-gradient(circle at 35% 35%, #f1f5f9, #cbd5e1 70%, #94a3b8);
      border: 2px dashed #94a3b8;
      color: #1e293b;
      font-size: 13px;
    }

    .coin-dime {
      width: 36px;
      height: 36px;
      background: radial-gradient(circle at 35% 35%, #f8fafc, #cbd5e1 70%, #94a3b8);
      border: 1.5px dashed #94a3b8;
      color: #1e293b;
      font-size: 11px;
    }

    .coin-nickel {
      width: 42px;
      height: 42px;
      background: radial-gradient(circle at 35% 35%, #f1f5f9, #cbd5e1 70%, #94a3b8);
      border: 2px solid #94a3b8;
      color: #1e293b;
      font-size: 12px;
    }

    .coin-penny {
      width: 38px;
      height: 38px;
      background: radial-gradient(circle at 35% 35%, #fed7aa, #ea580c 70%, #9a3412);
      border: 2px solid #c2410c;
      color: #ffffff;
      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
      font-size: 12px;
    }

    /* Darkened blue for high contrast (passes 4.5:1+) */
    .add-tag {
      font-size: 11px;
      font-weight: 800;
      color: #0369a1;
      margin-bottom: 4px;
    }

    .total-pill {
      font-size: 12px;
      font-weight: 800;
      color: #334155;
      background: #e2e8f0;
      padding: 2px 6px;
      border-radius: 8px;
      transition: background-color 0.25s ease, color 0.25s ease;
      white-space: nowrap;
    }

    .coin-step.active .total-pill {
      background: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.3);
    }

    /* Summary & Reward Badge Area */
    .summary-card {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .reward-badge {
      flex: 1;
      background: #0284c7;
      color: #ffffff;
      padding: 10px 14px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 17px;
      font-weight: 800;
      box-shadow: 0 4px 10px rgba(2, 132, 199, 0.25);
      transition: background 0.3s ease, box-shadow 0.3s ease;
      min-height: 44px;
    }

    .reward-badge.final {
      background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
      box-shadow: 0 4px 14px rgba(14, 165, 233, 0.4);
    }

    .sparkle {
      color: #fde047;
      font-size: 18px;
      animation: pulse 1.2s infinite alternate ease-in-out;
    }

    @keyframes pulse {
      0% { opacity: 0.4; }
      100% { opacity: 1; }
    }

    .btn-bar {
      display: flex;
      gap: 6px;
    }

    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
      color: #1e293b;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      outline: none;
      transition: background-color 0.15s ease, border-color 0.15s ease;
    }

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

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

    @media (max-width: 380px) {
      .trail-grid {
        gap: 5px;
      }
      .coin-quarter { width: 42px; height: 42px; font-size: 11px; }
      .coin-dime { width: 32px; height: 32px; font-size: 10px; }
      .coin-nickel { width: 38px; height: 38px; font-size: 11px; }
      .coin-penny { width: 34px; height: 34px; font-size: 11px; }
      .add-tag { font-size: 10px; }
      .total-pill { font-size: 11px; padding: 2px 4px; }
      .reward-badge { font-size: 15px; padding: 8px 10px; }
      .ctrl-btn { width: 36px; height: 36px; font-size: 13px; }
    }
  </style>
</head>
<body>

  <div class="main-container">
    <div class="instruction-title">Counting Coins in Order</div>

    <div class="trail-grid" id="trail">
      
      <div class="coin-step active" data-step="0">
        <div class="coin coin-quarter">25¢</div>
        <div class="add-tag">Start</div>
        <div class="total-pill">25¢</div>
      </div>

      
      <div class="coin-step" data-step="1">
        <div class="coin coin-dime">10¢</div>
        <div class="add-tag">+10¢</div>
        <div class="total-pill">35¢</div>
      </div>

      
      <div class="coin-step" data-step="2">
        <div class="coin coin-dime">10¢</div>
        <div class="add-tag">+10¢</div>
        <div class="total-pill">45¢</div>
      </div>

      
      <div class="coin-step" data-step="3">
        <div class="coin coin-nickel">5¢</div>
        <div class="add-tag">+5¢</div>
        <div class="total-pill">50¢</div>
      </div>

      
      <div class="coin-step" data-step="4">
        <div class="coin coin-nickel">5¢</div>
        <div class="add-tag">+5¢</div>
        <div class="total-pill">55¢</div>
      </div>

      
      <div class="coin-step" data-step="5">
        <div class="coin coin-penny">1¢</div>
        <div class="add-tag">+1¢</div>
        <div class="total-pill">56¢</div>
      </div>

      
      <div class="coin-step" data-step="6">
        <div class="coin coin-penny">1¢</div>
        <div class="add-tag">+1¢</div>
        <div class="total-pill">57¢</div>
      </div>

      
      <div class="coin-step" data-step="7">
        <div class="coin coin-penny">1¢</div>
        <div class="add-tag">+1¢</div>
        <div class="total-pill">58¢</div>
      </div>
    </div>

    <div class="summary-card">
      <div class="reward-badge" id="badge">
        <span class="sparkle">✦</span>
        <span id="badge-text">Total: 25¢</span>
        <span class="sparkle">✦</span>
      </div>

      <div class="btn-bar">
        <button class="ctrl-btn" id="prevBtn" aria-label="Previous step">◀</button>
        <button class="ctrl-btn" id="playBtn" aria-label="Play/Pause">⏸</button>
        <button class="ctrl-btn" id="nextBtn" aria-label="Next step">▶</button>
      </div>
    </div>
  </div>

  <script>
    const steps = [
      { total: '25¢', final: false },
      { total: '35¢', final: false },
      { total: '45¢', final: false },
      { total: '50¢', final: false },
      { total: '55¢', final: false },
      { total: '56¢', final: false },
      { total: '57¢', final: false },
      { total: '58¢', final: true }
    ];

    const coinElements = document.querySelectorAll('.coin-step');
    const badge = document.getElementById('badge');
    const badgeText = document.getElementById('badge-text');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    let currentStep = 0;
    let isPlaying = true;
    let timer = null;
    const STEP_INTERVAL = 1400; // Comfortable pacing (1.4s)

    function updateStep(idx) {
      currentStep = (idx + steps.length) % steps.length;
      
      coinElements.forEach((el, i) => {
        el.classList.toggle('active', i === currentStep);
        el.classList.toggle('completed', i < currentStep);
      });

      const current = steps[currentStep];
      if (current.final) {
        badge.classList.add('final');
        badgeText.textContent = 'Total: 58¢ 🎉';
      } else {
        badge.classList.remove('final');
        badgeText.textContent = 'Total: ' + current.total;
      }
    }

    function startAutoPlay() {
      stopAutoPlay();
      isPlaying = true;
      playBtn.textContent = '⏸';
      playBtn.setAttribute('aria-label', 'Pause');
      timer = setInterval(() => {
        updateStep(currentStep + 1);
      }, STEP_INTERVAL);
    }

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

    function toggleAutoPlay() {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        startAutoPlay();
      }
    }

    coinElements.forEach((el, idx) => {
      el.addEventListener('click', () => {
        stopAutoPlay();
        updateStep(idx);
      });
    });

    playBtn.addEventListener('click', toggleAutoPlay);

    prevBtn.addEventListener('click', () => {
      stopAutoPlay();
      updateStep(currentStep - 1);
    });

    nextBtn.addEventListener('click', () => {
      stopAutoPlay();
      updateStep(currentStep + 1);
    });

    // Initialize
    updateStep(0);
    startAutoPlay();
  </script>
</body>
</html>

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

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

    .flow-wrapper {
      width: 100%;
      max-width: 620px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Top Value Arrow */
    .order-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 24px;
      padding: 6px 14px;
      position: relative;
    }

    .order-label {
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      justify-content: space-between;
    }

    .arrow-track {
      flex: 1;
      height: 4px;
      background: linear-gradient(90deg, #2563eb, #0d9488, #ea580c, #b45309);
      border-radius: 2px;
      margin: 0 10px;
      position: relative;
    }

    .arrow-track::after {
      content: '';
      position: absolute;
      right: -2px;
      top: -4px;
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-left: 8px solid #b45309;
    }

    /* Coins Grid */
    .coins-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      align-items: end;
    }

    .coin-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 10px 4px;
      border-radius: 14px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      cursor: pointer;
      user-select: none;
      transition: box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .coin-col.active {
      background: #ffffff;
      box-shadow: 0 4px 14px rgba(37, 99, 235, 0.15), 0 0 0 2px #2563eb;
    }

    /* Step tag */
    .step-tag {
      font-size: 11px;
      font-weight: 800;
      color: #64748b;
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Value Badges */
    .badge {
      font-size: 15px;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: 12px;
      color: #ffffff;
      margin-bottom: 12px;
      line-height: 1;
    }

    .badge-quarter { background: #2563eb; }
    .badge-dime    { background: #0d9488; }
    .badge-nickel  { background: #ea580c; }
    .badge-penny   { background: #b45309; }

    /* Coin Visual Slot */
    .coin-slot {
      height: 84px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
    }

    /* Coin Bases */
    .coin {
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      font-weight: 800;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12), inset 0 2px 3px rgba(255, 255, 255, 0.8), inset 0 -2px 4px rgba(0, 0, 0, 0.2);
    }

    .coin::before {
      content: '';
      position: absolute;
      inset: 3px;
      border-radius: 50%;
      border: 1px dashed rgba(0, 0, 0, 0.15);
    }

    /* Proportional Coin Sizes & Metallic Shading */
    /* Quarter: 24.26mm -> 76px */
    .coin-quarter {
      width: 76px;
      height: 76px;
      background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e2e8f0 45%, #94a3b8 100%);
      color: #475569;
      font-size: 20px;
    }

    /* Dime: 17.91mm -> 54px */
    .coin-dime {
      width: 54px;
      height: 54px;
      background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e2e8f0 45%, #94a3b8 100%);
      color: #475569;
      font-size: 15px;
    }

    /* Nickel: 21.21mm -> 68px */
    .coin-nickel {
      width: 68px;
      height: 68px;
      background: radial-gradient(circle at 35% 30%, #ffffff 0%, #cbd5e1 45%, #64748b 100%);
      color: #334155;
      font-size: 18px;
    }

    /* Penny: 19.05mm -> 60px */
    .coin-penny {
      width: 60px;
      height: 60px;
      background: radial-gradient(circle at 35% 30%, #fed7aa 0%, #d97706 50%, #78350f 100%);
      color: #451a03;
      font-size: 16px;
    }
    .coin-penny::before {
      border-color: rgba(255, 255, 255, 0.25);
    }

    /* Coin Names */
    .coin-name {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
    }

    /* Responsive adjustments */
    @media (max-width: 420px) {
      .order-label { font-size: 11px; }
      .badge { font-size: 13px; padding: 3px 8px; }
      .coin-slot { height: 68px; }
      .coin-quarter { width: 62px; height: 62px; font-size: 16px; }
      .coin-dime    { width: 44px; height: 44px; font-size: 12px; }
      .coin-nickel  { width: 55px; height: 55px; font-size: 14px; }
      .coin-penny   { width: 49px; height: 49px; font-size: 13px; }
      .coin-name { font-size: 12px; }
      .step-tag { font-size: 9px; }
    }
  </style>
</head>
<body>

  <div class="flow-wrapper">
    
    <div class="order-bar">
      <div class="order-label">
        <span>Greatest (25¢)</span>
        <div class="arrow-track"></div>
        <span>Least (1¢)</span>
      </div>
    </div>

    
    <div class="coins-grid">
      
      <div class="coin-col active" onclick="selectCoin(0)">
        <span class="step-tag">1ˢᵗ</span>
        <div class="badge badge-quarter">25¢</div>
        <div class="coin-slot">
          <div class="coin coin-quarter">25¢</div>
        </div>
        <div class="coin-name">Quarter</div>
      </div>

      
      <div class="coin-col" onclick="selectCoin(1)">
        <span class="step-tag">2ⁿᵈ</span>
        <div class="badge badge-dime">10¢</div>
        <div class="coin-slot">
          <div class="coin coin-dime">10¢</div>
        </div>
        <div class="coin-name">Dime</div>
      </div>

      
      <div class="coin-col" onclick="selectCoin(2)">
        <span class="step-tag">3ʳᵈ</span>
        <div class="badge badge-nickel">5¢</div>
        <div class="coin-slot">
          <div class="coin coin-nickel">5¢</div>
        </div>
        <div class="coin-name">Nickel</div>
      </div>

      
      <div class="coin-col" onclick="selectCoin(3)">
        <span class="step-tag">4ᵗʰ</span>
        <div class="badge badge-penny">1¢</div>
        <div class="coin-slot">
          <div class="coin coin-penny">1¢</div>
        </div>
        <div class="coin-name">Penny</div>
      </div>
    </div>
  </div>

  <script>
    function selectCoin(index) {
      const cols = document.querySelectorAll('.coin-col');
      cols.forEach((col, i) => {
        col.classList.toggle('active', i === index);
      });
    }
  </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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

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

    .panel-header {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #64748b;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Top Panel: Scattered Pile */
    .scattered-box {
      width: 100%;
      height: 140px;
      border: 2px dashed #cbd5e1;
      border-radius: 12px;
      background: #f8fafc;
      position: relative;
      overflow: hidden;
    }

    /* Coin Base Styles */
    .coin {
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      user-select: none;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), inset 0 2px 3px rgba(255, 255, 255, 0.7), inset 0 -2px 3px rgba(0, 0, 0, 0.2);
      border: 2px solid rgba(0, 0, 0, 0.1);
      position: relative;
    }

    .coin::before {
      content: '';
      position: absolute;
      inset: 2px;
      border-radius: 50%;
      border: 1px dashed rgba(255, 255, 255, 0.5);
    }

    .coin-silver {
      background: radial-gradient(circle at 35% 35%, #ffffff 0%, #e2e8f0 45%, #94a3b8 100%);
      color: #334155;
    }

    .coin-copper {
      background: radial-gradient(circle at 35% 35%, #fed7aa 0%, #d97706 50%, #78350f 100%);
      color: #451a03;
      text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
    }

    /* Proportional Coin Sizes */
    .coin-q {
      width: 52px;
      height: 52px;
      font-size: 15px;
    }

    .coin-n {
      width: 45px;
      height: 45px;
      font-size: 14px;
    }

    .coin-p {
      width: 40px;
      height: 40px;
      font-size: 13px;
    }

    .coin-d {
      width: 36px;
      height: 36px;
      font-size: 12px;
    }

    /* Scattered absolute placements */
    .pos-1 { top: 22%; left: 16%; transform: rotate(-12deg); }
    .pos-2 { top: 18%; left: 62%; transform: rotate(15deg); }
    .pos-3 { top: 48%; left: 40%; transform: rotate(6deg); }
    .pos-4 { top: 52%; left: 74%; transform: rotate(-20deg); }
    .pos-5 { top: 45%; left: 12%; transform: rotate(8deg); }

    /* Transition Arrow */
    .flow-indicator {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #0284c7;
      font-size: 13px;
      font-weight: 700;
      padding: 2px 0;
    }

    .flow-arrow {
      font-size: 18px;
      line-height: 1;
    }

    /* Bottom Panel: Sorted Row */
    .sorted-box {
      width: 100%;
      background: #f0f9ff;
      border: 1.5px solid #bae6fd;
      border-radius: 12px;
      padding: 12px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .coins-row {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      padding: 0 4px;
    }

    .coin-slot {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .tag {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      padding: 2px 6px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      white-space: nowrap;
    }

    .coin-name {
      font-size: 11px;
      color: #64748b;
      font-weight: 600;
    }

    .order-indicator {
      width: 92%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 2px solid #0284c7;
      padding-top: 4px;
      margin-top: 2px;
      font-size: 11px;
      font-weight: 700;
      color: #0284c7;
    }
  </style>
</head>
<body>
  <div class="main-layout">
    
    
    <div style="width: 100%;">
      <div class="panel-header">
        <span>Scattered Pile</span>
      </div>
      <div class="scattered-box">
        <div class="coin coin-silver coin-q" style="position:absolute;" class="pos-1" style="top:20%;left:15%;transform:rotate(-14deg);">25¢</div>
        <div class="coin coin-silver coin-d" style="position:absolute;top:22%;left:46%;transform:rotate(12deg);">10¢</div>
        <div class="coin coin-silver coin-q" style="position:absolute;top:18%;left:72%;transform:rotate(18deg);">25¢</div>
        <div class="coin coin-silver coin-n" style="position:absolute;top:54%;left:28%;transform:rotate(-8deg);">5¢</div>
        <div class="coin coin-copper coin-p" style="position:absolute;top:52%;left:64%;transform:rotate(-15deg);">1¢</div>
      </div>
    </div>

    
    <div class="flow-indicator">
      <span>Sort by value</span>
      <span class="flow-arrow">↓</span>
    </div>

    
    <div style="width: 100%;">
      <div class="panel-header">
        <span>Sorted Row</span>
      </div>
      <div class="sorted-box">
        <div class="coins-row">
          
          <div class="coin-slot">
            <div class="coin coin-silver coin-q">25¢</div>
            <div class="tag">25¢</div>
            <div class="coin-name">Quarter</div>
          </div>

          <div class="coin-slot">
            <div class="coin coin-silver coin-q">25¢</div>
            <div class="tag">25¢</div>
            <div class="coin-name">Quarter</div>
          </div>

          <div class="coin-slot">
            <div class="coin coin-silver coin-d">10¢</div>
            <div class="tag">10¢</div>
            <div class="coin-name">Dime</div>
          </div>

          <div class="coin-slot">
            <div class="coin coin-silver coin-n">5¢</div>
            <div class="tag">5¢</div>
            <div class="coin-name">Nickel</div>
          </div>

          <div class="coin-slot">
            <div class="coin coin-copper coin-p">1¢</div>
            <div class="tag">1¢</div>
            <div class="coin-name">Penny</div>
          </div>

        </div>

        <div class="order-indicator">
          <span>Highest (25¢)</span>
          <span>→</span>
          <span>Lowest (1¢)</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">
  <title>The Nickel</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

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

    .main-grid {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      max-width: 600px;
    }

    /* Left: Nickel coin */
    .coin-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .nickel-coin {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #ffffff 0%, #d1d5db 40%, #9ca3af 80%, #6b7280 100%);
      box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.9),
                  inset 0 -3px 6px rgba(0, 0, 0, 0.35),
                  0 4px 10px rgba(0, 0, 0, 0.15);
      border: 3px solid #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .nickel-coin:active {
      transform: scale(0.96);
    }

    .nickel-art {
      width: 80%;
      height: 80%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #475569;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .coin-name {
      font-size: 15px;
      font-weight: 800;
      color: #334155;
      letter-spacing: 0.5px;
    }

    /* Center: Bullet tags */
    .feature-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
      min-width: 150px;
      max-width: 220px;
    }

    .feature-tag {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-left: 4px solid #94a3b8;
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Right: Value badge */
    .value-badge {
      background: linear-gradient(135deg, #0284c7, #0369a1);
      color: #ffffff;
      border-radius: 14px;
      padding: 12px 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
      min-width: 90px;
    }

    .value-amount {
      font-size: 32px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -1px;
    }

    .value-label {
      font-size: 12px;
      font-weight: 700;
      opacity: 0.95;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 2px;
    }

    /* Bottom: Equal to 5 pennies */
    .equality-bar {
      width: 100%;
      max-width: 600px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    }

    .equals-text {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      white-space: nowrap;
    }

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

    .penny-dot {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #f97316 0%, #c2410c 65%, #7c2d12 100%);
      border: 2px solid #ea580c;
      color: #fff;
      font-size: 12px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 4px rgba(124, 45, 18, 0.2);
      cursor: pointer;
      transition: transform 0.15s ease, filter 0.15s ease;
      text-shadow: 0 1px 1px rgba(0,0,0,0.5);
    }

    .penny-dot:active {
      transform: scale(0.9);
    }

    .penny-dot.active {
      filter: brightness(1.25);
      outline: 2px solid #0284c7;
    }
  </style>
</head>
<body>

  
  <div class="main-grid">
    
    <div class="coin-wrap">
      <div class="nickel-coin" id="coinBtn" onclick="inspectCoin()">
        <svg class="nickel-art" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
          
          <path id="curve" d="M 20 50 A 30 30 0 0 1 80 50" fill="none"/>
          <text font-size="7.5" font-weight="700" fill="#475569" letter-spacing="1">
            <textPath href="#curve" startOffset="50%" text-anchor="middle">IN GOD WE TRUST</textPath>
          </text>
          
          
          <circle cx="50" cy="38" r="14" fill="#64748b" opacity="0.8"/>
          <path d="M 38 48 C 38 42, 62 42, 62 48 L 66 68 C 66 72, 34 72, 34 68 Z" fill="#64748b" opacity="0.8"/>
          
          <path d="M 37 36 C 33 39, 31 46, 33 50" stroke="#475569" stroke-width="2.5" stroke-linecap="round"/>
          <text x="73" y="62" font-size="7" font-weight="800" fill="#475569">LIBERTY</text>
        </svg>
      </div>
      <div class="coin-name">Nickel</div>
    </div>

    
    <div class="feature-list">
      <div class="feature-tag">
        <span>🔘</span>
        <span>Color: Silver</span>
      </div>
      <div class="feature-tag">
        <span>⚪</span>
        <span>Edge: Smooth</span>
      </div>
      <div class="feature-tag">
        <span>🖐️</span>
        <span>Feel: Thick &amp; smooth</span>
      </div>
    </div>

    
    <div class="value-badge">
      <div class="value-amount">5¢</div>
      <div class="value-label">5 Cents</div>
    </div>
  </div>

  
  <div class="equality-bar">
    <div class="equals-text">= 5 Pennies:</div>
    <div class="pennies-row">
      <button class="penny-dot" onclick="tapPenny(0)" aria-label="Penny 1">1¢</button>
      <button class="penny-dot" onclick="tapPenny(1)" aria-label="Penny 2">1¢</button>
      <button class="penny-dot" onclick="tapPenny(2)" aria-label="Penny 3">1¢</button>
      <button class="penny-dot" onclick="tapPenny(3)" aria-label="Penny 4">1¢</button>
      <button class="penny-dot" onclick="tapPenny(4)" aria-label="Penny 5">1¢</button>
    </div>
  </div>

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

    const notes = [261.63, 293.66, 329.63, 392.00, 523.25];

    function tapPenny(index) {
      const dots = document.querySelectorAll('.penny-dot');
      dots.forEach((d, i) => {
        if (i <= index) {
          d.classList.add('active');
        } else {
          d.classList.remove('active');
        }
      });
      playTone(notes[index]);
    }

    function inspectCoin() {
      const dots = document.querySelectorAll('.penny-dot');
      dots.forEach((d, i) => {
        setTimeout(() => {
          d.classList.add('active');
          playTone(notes[i], 0.12);
        }, i * 90);
      });
    }
  </script>
</body>
</html>

Identifying Pennies, Nickels, Dimes, and Quarters

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

    .main-section {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 560px;
      gap: 12px 16px;
    }

    /* Dime Coin Visual */
    .coin-dime {
      width: 78px;
      height: 78px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #ffffff 0%, #cbd5e1 55%, #94a3b8 100%);
      border: 3px dashed #64748b;
      box-shadow: 0 3px 8px rgba(0,0,0,0.12), inset 0 0 5px rgba(255,255,255,0.8);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .coin-dime svg {
      width: 40px;
      height: 40px;
      fill: #475569;
      filter: drop-shadow(0 1px 1px rgba(255,255,255,0.8));
    }

    .coin-sub {
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 0.5px;
      color: #475569;
      text-transform: uppercase;
      margin-top: 1px;
    }

    /* Feature Badges */
    .features {
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1 1 170px;
      min-width: 150px;
    }

    .feature-tag {
      background: #f1f5f9;
      border-left: 3px solid #64748b;
      border-radius: 4px;
      padding: 5px 8px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      display: flex;
      align-items: center;
      gap: 6px;
      line-height: 1.2;
    }

    .tag-icon {
      font-size: 13px;
      flex-shrink: 0;
    }

    /* 10¢ Value Badge */
    .value-badge {
      background: #2563eb;
      color: #ffffff;
      border-radius: 12px;
      padding: 10px 14px;
      text-align: center;
      box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
      flex-shrink: 0;
      align-self: center;
    }

    .value-num {
      font-size: 26px;
      font-weight: 900;
      line-height: 1;
    }

    .value-word {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      opacity: 0.95;
      margin-top: 2px;
    }

    .divider {
      width: 100%;
      max-width: 560px;
      height: 1px;
      background: #e2e8f0;
    }

    /* Equivalency Section */
    .eq-container {
      width: 100%;
      max-width: 560px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

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

    .eq-title {
      font-size: 13px;
      font-weight: 700;
      color: #475569;
    }

    .tabs {
      display: flex;
      background: #e2e8f0;
      padding: 2px;
      border-radius: 8px;
      gap: 2px;
    }

    .tab-btn {
      border: none;
      background: transparent;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease;
    }

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

    .eq-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      min-height: 80px;
    }

    .eq-coins-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      justify-content: center;
      max-width: 100%;
    }

    /* Mini Equivalent Coins */
    .mini-penny {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #fed7aa 0%, #d97706 65%, #92400e 100%);
      border: 1px solid #78350f;
      color: #fff;
      font-size: 10px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.12);
      flex-shrink: 0;
    }

    .mini-nickel {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #f8fafc 0%, #cbd5e1 60%, #94a3b8 100%);
      border: 2px solid #64748b;
      color: #334155;
      font-size: 12px;
      font-weight: 800;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.12);
      flex-shrink: 0;
    }

    .mini-nickel span {
      font-size: 7px;
      font-weight: 700;
      color: #64748b;
      line-height: 1;
    }

    .eq-math {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      padding: 3px 10px;
      border-radius: 6px;
      white-space: nowrap;
    }

    @media (max-width: 380px) {
      .main-section {
        justify-content: space-between;
      }
      .features {
        order: 3;
        flex: 1 1 100%;
      }
      .eq-header {
        justify-content: center;
      }
    }
  </style>
</head>
<body>

  
  <div class="main-section">
    
    <div class="coin-dime" title="Franklin D. Roosevelt Dime">
      <svg viewBox="0 0 24 24" aria-label="Franklin D. Roosevelt profile">
        <path d="M14.5 4.5c-1.2-1.2-3.2-.8-4 .2-.8.9-.7 2.1-.2 3.1.5.9.1 1.9-.3 2.6-.4.7-1.2 1.1-2 1.3-.8.2-1 .7-.9 1.4.1.7.7 1.1 1.4 1.1h1.5c.3.8.7 1.8 1.5 2.4.9.7 2.1 1.2 3.5 1.4 1.5.2 3.5.5 4 1.5.3.6.4 1.5.5 2.5h2.5c0-1.8-.3-3.6-1.5-4.8-1.2-1.2-2.8-1.7-4.2-2.1-1.4-.4-2.3-1.1-2.5-2.5-.2-1.1.2-2.1.8-2.9.8-1 1-2.2.7-3.4-.3-1-1.1-1.7-1.8-2z"/>
      </svg>
      <div class="coin-sub">F.D.R.</div>
    </div>

    
    <div class="features">
      <div class="feature-tag">
        <span class="tag-icon">🔍</span>
        <span>Size: Smallest coin</span>
      </div>
      <div class="feature-tag">
        <span class="tag-icon">⚡</span>
        <span>Edge: Rough / Grooved (Ridges)</span>
      </div>
    </div>

    
    <div class="value-badge">
      <div class="value-num">10¢</div>
      <div class="value-word">10 Cents</div>
    </div>
  </div>

  <div class="divider"></div>

  
  <div class="eq-container">
    <div class="eq-header">
      <span class="eq-title">1 Dime (10¢) is equal to:</span>
      <div class="tabs">
        <button class="tab-btn active" id="tabPennies" onclick="showEquiv('pennies')">10 Pennies</button>
        <button class="tab-btn" id="tabNickels" onclick="showEquiv('nickels')">2 Nickels</button>
      </div>
    </div>

    <div class="eq-content" id="equivDisplay">
      
    </div>
  </div>

  <script>
    function renderPennies() {
      let coins = '';
      for (let i = 0; i < 10; i++) {
        coins += '<div class="mini-penny">1¢</div>';
      }
      document.getElementById('equivDisplay').innerHTML = `
        <div class="eq-coins-grid">${coins}</div>
        <div class="eq-math">10 × 1¢ = 10¢</div>
      `;
    }

    function renderNickels() {
      document.getElementById('equivDisplay').innerHTML = `
        <div class="eq-coins-grid">
          <div class="mini-nickel">5¢<span>Nickel</span></div>
          <div class="mini-nickel">5¢<span>Nickel</span></div>
        </div>
        <div class="eq-math">2 × 5¢ = 10¢</div>
      `;
    }

    function showEquiv(type) {
      const tabP = document.getElementById('tabPennies');
      const tabN = document.getElementById('tabNickels');
      if (type === 'pennies') {
        tabP.classList.add('active');
        tabN.classList.remove('active');
        renderPennies();
      } else {
        tabN.classList.add('active');
        tabP.classList.remove('active');
        renderNickels();
      }
    }

    // Initialize with Pennies
    renderPennies();
  </script>
</body>
</html>

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

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
      min-height: 0;
      box-sizing: border-box;
      user-select: none;
      gap: 14px;
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
    }

    .showcase-section {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 18px;
      width: 100%;
    }

    /* Coin Visual */
    .coin-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .coin {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e2e8f0 45%, #94a3b8 100%);
      box-shadow: inset 0 0 0 3px #64748b, inset 0 0 0 5px #f8fafc;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .coin-ridges {
      position: absolute;
      inset: 1px;
      border-radius: 50%;
      border: 2px dashed rgba(71, 85, 105, 0.45);
      pointer-events: none;
    }

    .coin-title {
      font-size: 13px;
      font-weight: 700;
      color: #334155;
      text-transform: uppercase;
      letter-spacing: 0.6px;
    }

    /* Traits */
    .traits {
      display: flex;
      flex-direction: column;
      gap: 8px;
      justify-content: center;
    }

    .trait-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: #334155;
      line-height: 1.35;
    }

    .trait-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 6px;
      background: #e2e8f0;
      font-size: 13px;
      flex-shrink: 0;
    }

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

    /* Value Badge */
    .value-badge {
      background: #0284c7;
      color: #ffffff;
      border-radius: 12px;
      padding: 10px 14px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 84px;
    }

    .value-badge .cents {
      font-size: 26px;
      font-weight: 800;
      line-height: 1;
    }

    .value-badge .label {
      font-size: 11px;
      font-weight: 600;
      opacity: 0.95;
      margin-top: 4px;
      white-space: nowrap;
    }

    /* Divider */
    .divider {
      width: 100%;
      height: 1px;
      background: #e2e8f0;
      margin: 2px 0;
    }

    /* Equation Section */
    .equation-section {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .section-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: #64748b;
      text-align: center;
    }

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

    .mini-quarter {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #ffffff, #cbd5e1 60%, #94a3b8);
      border: 2px solid #64748b;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
      color: #1e293b;
      cursor: pointer;
      padding: 0;
      outline: none;
      transition: opacity 0.2s ease, border-color 0.2s ease;
      flex-shrink: 0;
    }

    .mini-quarter.inactive {
      opacity: 0.3;
      filter: grayscale(0.9);
      border-color: #94a3b8;
    }

    .mini-quarter:focus-visible {
      outline: 2px solid #0284c7;
      outline-offset: 2px;
    }

    .math-symbol {
      font-size: 18px;
      font-weight: 800;
      color: #15803d;
      flex-shrink: 0;
    }

    .total-pill {
      background: #15803d;
      color: #ffffff;
      border-radius: 10px;
      padding: 6px 12px;
      text-align: center;
      min-width: 92px;
      flex-shrink: 0;
    }

    .total-pill .total-amt {
      font-size: 16px;
      font-weight: 800;
      line-height: 1.1;
    }

    .total-pill .total-sub {
      font-size: 10px;
      font-weight: 600;
      opacity: 0.9;
    }

    .tap-hint {
      font-size: 12px;
      font-weight: 600;
      color: #166534;
      text-align: center;
    }

    @media (max-width: 480px) {
      body {
        padding: 12px;
        gap: 10px;
      }

      .showcase-section {
        grid-template-columns: auto 1fr;
        gap: 10px;
      }

      .value-badge {
        grid-column: span 2;
        flex-direction: row;
        gap: 8px;
        padding: 6px 12px;
        min-width: auto;
      }

      .value-badge .cents {
        font-size: 20px;
      }

      .value-badge .label {
        margin-top: 0;
        font-size: 12px;
      }

      .coin {
        width: 74px;
        height: 74px;
      }

      .mini-quarter {
        width: 42px;
        height: 42px;
        font-size: 11px;
      }

      .total-pill {
        min-width: 76px;
        padding: 5px 8px;
      }

      .total-pill .total-amt {
        font-size: 14px;
      }

      .total-pill .total-sub {
        font-size: 9px;
      }
    }

    @media (max-width: 360px) {
      .mini-quarter {
        width: 36px;
        height: 36px;
        font-size: 10px;
      }
      .math-symbol {
        font-size: 14px;
      }
      .trait-item {
        font-size: 12px;
      }
      .trait-icon {
        width: 22px;
        height: 22px;
        font-size: 11px;
      }
    }
  </style>
</head>
<body>

  
  <div class="showcase-section">
    
    <div class="coin-wrap">
      <div class="coin" title="George Washington Quarter">
        <div class="coin-ridges"></div>
        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" aria-hidden="true">
          <path d="M12 4C10.2 4 9 5.4 9 7.2C9 8.6 9.8 9.7 10.8 10.1C9.1 10.6 7.5 12 7.1 14C6.6 16.3 7 19 7 20H17C17 19 17.4 15.5 16.2 13.5C15.4 12.1 14.2 11.2 13.2 10.1C14.2 9.7 15 8.6 15 7.2C15 5.4 13.8 4 12 4Z" fill="#475569" opacity="0.85"/>
        </svg>
      </div>
      <div class="coin-title">Quarter</div>
    </div>

    
    <div class="traits">
      <div class="trait-item">
        <span class="trait-icon" aria-hidden="true">📏</span>
        <div class="trait-text"><strong>Size:</strong> Largest of the four</div>
      </div>
      <div class="trait-item">
        <span class="trait-icon" aria-hidden="true">⚙️</span>
        <div class="trait-text"><strong>Edge:</strong> Rough / Grooved (Ridges)</div>
      </div>
    </div>

    
    <div class="value-badge">
      <div class="cents">25¢</div>
      <div class="label">25 Cents</div>
    </div>
  </div>

  <div class="divider"></div>

  
  <div class="equation-section">
    <div class="section-label">Interactive Value Builder</div>
    <div class="quarters-row">
      <button type="button" class="mini-quarter" aria-label="First Quarter, 25 cents">25¢</button>
      <button type="button" class="mini-quarter" aria-label="Second Quarter, 25 cents">25¢</button>
      <button type="button" class="mini-quarter" aria-label="Third Quarter, 25 cents">25¢</button>
      <button type="button" class="mini-quarter" aria-label="Fourth Quarter, 25 cents">25¢</button>
      <div class="math-symbol" aria-hidden="true">=</div>
      <div class="total-pill">
        <div class="total-amt" id="totalAmt">$1.00</div>
        <div class="total-sub" id="centsAmt">100 Cents</div>
      </div>
    </div>
    <div class="tap-hint" id="hint">4 quarters = 1 whole dollar ($1.00 = 100¢)</div>
  </div>

  <script>
    const coins = document.querySelectorAll('.mini-quarter');
    const totalAmt = document.getElementById('totalAmt');
    const centsAmt = document.getElementById('centsAmt');
    const hint = document.getElementById('hint');

    let activeCount = 4;

    function update() {
      coins.forEach((coin, idx) => {
        if (idx < activeCount) {
          coin.classList.remove('inactive');
          coin.setAttribute('aria-pressed', 'true');
        } else {
          coin.classList.add('inactive');
          coin.setAttribute('aria-pressed', 'false');
        }
      });

      const cents = activeCount * 25;
      const dollars = (cents / 100).toFixed(2);
      totalAmt.textContent = '$' + dollars;
      centsAmt.textContent = cents + ' Cents';

      if (activeCount === 4) {
        hint.textContent = '4 quarters = 1 whole dollar ($1.00 = 100¢)';
      } else if (activeCount === 0) {
        hint.textContent = 'Tap quarters to add them up';
      } else {
        hint.textContent = activeCount + ' quarter' + (activeCount > 1 ? 's' : '') + ' = ' + cents + '¢';
      }
    }

    coins.forEach((coin, index) => {
      coin.addEventListener('click', () => {
        if (activeCount === index + 1) {
          activeCount = index;
        } else {
          activeCount = index + 1;
        }
        update();
      });
    });

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

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

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    .header-title {
      font-size: 15px;
      font-weight: 700;
      text-align: center;
      color: #1e2945;
      margin-bottom: 8px;
    }

    .rows-container {
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
    }

    .row-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 8px 8px;
      position: relative;
    }

    .row-label {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 4px;
    }

    .label-size { color: #475569; }
    .label-value { color: #0284c7; }

    .coin-strip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
    }

    .coin-slot {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      height: 98px;
      cursor: pointer;
      position: relative;
    }

    .coin-holder {
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }

    .coin {
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      box-shadow: 0 3px 6px 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.2);
      transition: box-shadow 0.2s ease, filter 0.2s ease;
      position: relative;
    }

    /* Proportional Coin Diameters */
    /* Dime: 17.9mm -> 48px | Penny: 19.0mm -> 51px | Nickel: 21.2mm -> 57px | Quarter: 24.3mm -> 65px */
    .coin-dime {
      width: 48px;
      height: 48px;
      background: radial-gradient(circle at 35% 35%, #f1f5f9 0%, #cbd5e1 55%, #94a3b8 100%);
      border: 2px solid #94a3b8;
      color: #334155;
    }

    .coin-penny {
      width: 51px;
      height: 51px;
      background: radial-gradient(circle at 35% 35%, #fed7aa 0%, #d97706 60%, #9a3412 100%);
      border: 2px solid #9a3412;
      color: #7c2d12;
    }

    .coin-nickel {
      width: 57px;
      height: 57px;
      background: radial-gradient(circle at 35% 35%, #f8fafc 0%, #cbd5e1 55%, #64748b 100%);
      border: 2.5px solid #64748b;
      color: #334155;
    }

    .coin-quarter {
      width: 65px;
      height: 65px;
      background: radial-gradient(circle at 35% 35%, #ffffff 0%, #e2e8f0 45%, #94a3b8 100%);
      border: 2.5px dashed #64748b;
      color: #1e2945;
    }

    .coin-name {
      font-size: 12px;
      font-weight: 700;
      margin-top: 4px;
      color: #1e2945;
    }

    .coin-sub {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
    }

    .separator {
      color: #cbd5e1;
      font-size: 16px;
      font-weight: 900;
    }

    /* Highlighted dime state */
    .coin-slot.active .coin {
      box-shadow: 0 0 0 3px #ef4444, 0 4px 10px rgba(239, 68, 68, 0.35);
    }

    .callout-box {
      margin-top: 6px;
      background: #fef2f2;
      border: 1.5px solid #ef4444;
      border-radius: 8px;
      padding: 6px 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      color: #b91c1c;
      text-align: center;
    }

    .callout-icon {
      font-size: 15px;
    }
  </style>
</head>
<body>

  <div class="header-title">Size vs. Value Comparison</div>

  <div class="rows-container">
    
    <div class="row-card">
      <div class="row-label label-size">
        <span>1. Physical Size</span>
        <span>Smallest → Largest</span>
      </div>
      <div class="coin-strip">
        <div class="coin-slot active" id="size-dime">
          <div class="coin-holder">
            <div class="coin coin-dime">10¢</div>
          </div>
          <span class="coin-name">Dime</span>
          <span class="coin-sub">17.9 mm</span>
        </div>

        <span class="separator">&lt;</span>

        <div class="coin-slot" id="size-penny">
          <div class="coin-holder">
            <div class="coin coin-penny">1¢</div>
          </div>
          <span class="coin-name">Penny</span>
          <span class="coin-sub">19.0 mm</span>
        </div>

        <span class="separator">&lt;</span>

        <div class="coin-slot" id="size-nickel">
          <div class="coin-holder">
            <div class="coin coin-nickel">5¢</div>
          </div>
          <span class="coin-name">Nickel</span>
          <span class="coin-sub">21.2 mm</span>
        </div>

        <span class="separator">&lt;</span>

        <div class="coin-slot" id="size-quarter">
          <div class="coin-holder">
            <div class="coin coin-quarter">25¢</div>
          </div>
          <span class="coin-name">Quarter</span>
          <span class="coin-sub">24.3 mm</span>
        </div>
      </div>
    </div>

    
    <div class="row-card">
      <div class="row-label label-value">
        <span>2. Money Value</span>
        <span>Least → Most</span>
      </div>
      <div class="coin-strip">
        <div class="coin-slot" id="val-penny">
          <div class="coin-holder">
            <div class="coin coin-penny">1¢</div>
          </div>
          <span class="coin-name">Penny</span>
          <span class="coin-sub">1¢</span>
        </div>

        <span class="separator">&lt;</span>

        <div class="coin-slot" id="val-nickel">
          <div class="coin-holder">
            <div class="coin coin-nickel">5¢</div>
          </div>
          <span class="coin-name">Nickel</span>
          <span class="coin-sub">5¢</span>
        </div>

        <span class="separator">&lt;</span>

        <div class="coin-slot active" id="val-dime">
          <div class="coin-holder">
            <div class="coin coin-dime">10¢</div>
          </div>
          <span class="coin-name">Dime</span>
          <span class="coin-sub">10¢</span>
        </div>

        <span class="separator">&lt;</span>

        <div class="coin-slot" id="val-quarter">
          <div class="coin-holder">
            <div class="coin coin-quarter">25¢</div>
          </div>
          <span class="coin-name">Quarter</span>
          <span class="coin-sub">25¢</span>
        </div>
      </div>
    </div>
  </div>

  
  <div class="callout-box" id="callout">
    <span class="callout-icon">⚠️</span>
    <span>Smallest size, but worth 10¢!</span>
  </div>

  <script>
    const pairs = {
      dime: ['#size-dime', '#val-dime'],
      penny: ['#size-penny', '#val-penny'],
      nickel: ['#size-nickel', '#val-nickel'],
      quarter: ['#size-quarter', '#val-quarter']
    };

    const callout = document.getElementById('callout');

    function highlightCoin(type) {
      document.querySelectorAll('.coin-slot').forEach(el => el.classList.remove('active'));
      pairs[type].forEach(sel => {
        const el = document.querySelector(sel);
        if (el) el.classList.add('active');
      });

      if (type === 'dime') {
        callout.innerHTML = '<span class="callout-icon">⚠️</span><span>Smallest size, but worth 10¢!</span>';
        callout.style.borderColor = '#ef4444';
        callout.style.color = '#b91c1c';
        callout.style.background = '#fef2f2';
      } else {
        const coinNames = { penny: 'Penny (1¢)', nickel: 'Nickel (5¢)', quarter: 'Quarter (25¢)' };
        callout.innerHTML = `<span>Tap Dime to see the size surprise!</span>`;
        callout.style.borderColor = '#94a3b8';
        callout.style.color = '#475569';
        callout.style.background = '#f8fafc';
      }
    }

    Object.keys(pairs).forEach(type => {
      pairs[type].forEach(sel => {
        const el = document.querySelector(sel);
        if (el) {
          el.addEventListener('click', () => highlightCoin(type));
        }
      });
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Penny Details</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;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }

    .penny-container {
      width: 100%;
      max-width: 620px;
      display: grid;
      grid-template-columns: 140px 1fr 120px;
      gap: 18px;
      align-items: center;
      background: transparent;
      padding: 6px;
    }

    /* Left: Coin */
    .coin-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .coin-wrapper {
      width: 124px;
      height: 124px;
      border-radius: 50%;
      box-shadow: 0 6px 16px rgba(110, 42, 12, 0.35);
      cursor: pointer;
      position: relative;
      user-select: none;
      transition: filter 0.15s ease, box-shadow 0.15s ease;
    }

    .coin-wrapper:hover {
      filter: brightness(1.04);
      box-shadow: 0 8px 20px rgba(110, 42, 12, 0.45);
    }

    .coin-wrapper:active {
      filter: brightness(0.96);
    }

    .coin-svg {
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 50%;
    }

    .flip-hint {
      font-size: 11px;
      font-weight: 700;
      color: #8a3f1b;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      padding: 2px 6px;
      border-radius: 4px;
      background: rgba(184, 80, 38, 0.08);
    }

    /* Center: Labels */
    .details-col {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .detail-item {
      display: flex;
      align-items: center;
      gap: 12px;
      background: #ffffff;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid #eadecf;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    }

    .detail-icon {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
      font-weight: 700;
    }

    .icon-color { background: #b85026; color: #fff; }
    .icon-edge { background: #faede2; color: #7c401d; border: 1.5px dashed #b85026; }
    .icon-face { background: #faede2; color: #b85026; font-size: 16px; }

    .detail-text {
      display: flex;
      flex-direction: column;
      line-height: 1.3;
    }

    .detail-label {
      font-size: 11px;
      font-weight: 700;
      color: #8c6a58;
      text-transform: uppercase;
      letter-spacing: 0.6px;
    }

    .detail-val {
      font-size: 15px;
      font-weight: 800;
      color: #2b1d16;
    }

    /* Right: Value Badge */
    .value-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      background: linear-gradient(145deg, #c86134, #94330e);
      border-radius: 14px;
      padding: 16px 12px;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(148, 51, 14, 0.28);
    }

    .val-symbol {
      font-size: 40px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -1px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    }

    .val-name {
      font-size: 13px;
      font-weight: 800;
      margin-top: 5px;
      text-transform: uppercase;
      letter-spacing: 0.6px;
    }

    .val-sub {
      font-size: 11px;
      opacity: 0.9;
      font-weight: 600;
      margin-top: 1px;
    }

    /* Responsive */
    @media (max-width: 520px) {
      .penny-container {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 14px;
      }
      .details-col {
        width: 100%;
      }
      .value-col {
        width: 100%;
        flex-direction: row;
        gap: 14px;
        padding: 10px 18px;
      }
      .val-symbol {
        font-size: 30px;
      }
      .val-name {
        margin-top: 0;
      }
    }
  </style>
</head>
<body>

  <div class="penny-container">
    
    <div class="coin-col">
      <div class="coin-wrapper" id="coinBtn" role="button" tabindex="0" title="Click to flip penny" aria-label="Flip coin">
        
        <svg id="coinHeads" class="coin-svg" viewBox="0 0 100 100">
          <defs>
            <radialGradient id="headsCopperGrad" cx="38%" cy="32%" r="68%">
              <stop offset="0%" stop-color="#df8960"/>
              <stop offset="45%" stop-color="#ba5427"/>
              <stop offset="85%" stop-color="#7a2e0c"/>
              <stop offset="100%" stop-color="#541b04"/>
            </radialGradient>
            <linearGradient id="rimGrad" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stop-color="#ffbe9e"/>
              <stop offset="50%" stop-color="#b65024"/>
              <stop offset="100%" stop-color="#4d1602"/>
            </linearGradient>
            <filter id="coinTextGlow" x="-20%" y="-20%" width="140%" height="140%">
              <feDropShadow dx="0" dy="1" stdDeviation="0.4" flood-color="#3d1303" flood-opacity="0.9"/>
            </filter>
            <filter id="profileShadow" x="-20%" y="-20%" width="140%" height="140%">
              <feDropShadow dx="-0.8" dy="1" stdDeviation="0.8" flood-color="#421402" flood-opacity="0.75"/>
            </filter>
            
            <path id="archHeads" d="M 17,28 A 40,40 0 0,1 83,28" />
          </defs>

          
          <circle cx="50" cy="50" r="48.5" fill="url(#headsCopperGrad)" stroke="url(#rimGrad)" stroke-width="3"/>
          <circle cx="50" cy="50" r="45.5" fill="none" stroke="#ffa37b" stroke-width="0.8" opacity="0.7"/>

          
          <text font-size="5" font-weight="900" fill="#ffffff" filter="url(#coinTextGlow)" letter-spacing="0.8">
            <textPath href="#archHeads" startOffset="50%" text-anchor="middle">IN GOD WE TRUST</textPath>
          </text>

          
          <text x="14" y="52" font-size="6.5" font-weight="900" fill="#ffffff" filter="url(#coinTextGlow)" letter-spacing="0.5">LIBERTY</text>

          
          <g filter="url(#profileShadow)">
            
            <path d="M 44,22.5 
                     C 49,22.5 53,24 55,27.5 
                     C 55.5,28.5 54.5,30 56,31 
                     C 57.5,32 58.5,33.5 58,35.5
                     C 57.5,36.5 57,37.2 56.5,37.8 
                     C 57.5,38.5 61,41.5 62,43.5 
                     C 62.5,44.5 60.5,45.5 58,45.5 
                     C 58.5,46.5 59.5,47.8 59,49 
                     C 58.2,50 56.8,50.2 56.5,51.5 
                     C 57.5,52.5 60.5,56.5 60,60 
                     C 59.5,63.5 56.5,65.5 53.5,66.5 
                     C 53.5,68 55,70 57.5,71.5 
                     C 61,73.5 66.5,77 71,81.5 
                     C 71.5,82 71.5,83 70.5,83.5 
                     C 59,84.5 40,84.5 28,83.5 
                     C 27.5,82.5 28,80.5 30,77.5 
                     C 32.5,74 34.5,69 35.5,64 
                     C 34.5,60 34,54 34.5,48 
                     C 35,41 36.5,33 39,27 
                     C 41,23.5 42.5,22.5 44,22.5 Z" 
                  fill="#ffbe9e"/>

            
            
            <path d="M 43,23 C 48,23 52,25 54,28 C 50,29 46,31 43,35 C 40,32 37.5,31 36.5,38 C 36,32 39,26 43,23 Z" fill="#cf6838"/>
            
            <path d="M 44,43 C 46,43 47,45 46.5,48 C 46,50 44,50 43.5,48 C 43,46 43,44 44,43 Z" fill="#cf6838"/>
            
            <path d="M 52,52 C 55,54 58,57 57.5,60 C 56,63 53.5,64 51,64.5 C 50,60.5 50.5,56 52,52 Z" fill="#cf6838"/>
            
            <path d="M 44,69 L 52,78 L 47,82 L 40,73 Z" fill="#ba5427"/>
            <path d="M 52,70 L 56,76 L 53,82 L 48,77 Z" fill="#8f3912"/>
          </g>
        </svg>

        
        <svg id="coinTails" class="coin-svg" viewBox="0 0 100 100" style="display:none;">
          <defs>
            <path id="archTails" d="M 14,24 A 42,42 0 0,1 86,24" />
          </defs>
          <circle cx="50" cy="50" r="48.5" fill="url(#headsCopperGrad)" stroke="url(#rimGrad)" stroke-width="3"/>
          <circle cx="50" cy="50" r="45.5" fill="none" stroke="#ffa37b" stroke-width="0.8" opacity="0.7"/>
          
          <text font-size="4.6" font-weight="900" fill="#ffffff" filter="url(#coinTextGlow)" letter-spacing="0.5">
            <textPath href="#archTails" startOffset="50%" text-anchor="middle">UNITED STATES OF AMERICA</textPath>
          </text>
          
          
          <g filter="url(#profileShadow)">
            <path d="M 32,36 L 68,36 L 68,54 C 68,67 50,77 50,77 C 50,77 32,67 32,54 Z" fill="#ffbe9e"/>
            
            <path d="M 32,36 L 68,36 L 68,44 L 32,44 Z" fill="#94330e"/>
            <text x="50" y="41.5" font-size="4.2" font-weight="900" fill="#ffffff" text-anchor="middle" letter-spacing="0.3">E PLURIBUS UNUM</text>
            
            
            <rect x="36" y="46" width="3.5" height="15" fill="#94330e"/>
            <rect x="42.5" y="46" width="3.5" height="21" fill="#94330e"/>
            <rect x="48.2" y="46" width="3.5" height="25" fill="#94330e"/>
            <rect x="54" y="46" width="3.5" height="21" fill="#94330e"/>
            <rect x="60.5" y="46" width="3.5" height="15" fill="#94330e"/>
          </g>

          <text x="50" y="87" font-size="6.8" font-weight="900" fill="#ffffff" filter="url(#coinTextGlow)" text-anchor="middle" letter-spacing="0.6">ONE CENT</text>
        </svg>
      </div>
      <div class="flip-hint" id="hintText" tabindex="0">⟳ Flip to Tails</div>
    </div>

    
    <div class="details-col">
      <div class="detail-item">
        <div class="detail-icon icon-color">●</div>
        <div class="detail-text">
          <span class="detail-label">Color</span>
          <span class="detail-val">Copper / Brown</span>
        </div>
      </div>

      <div class="detail-item">
        <div class="detail-icon icon-edge">○</div>
        <div class="detail-text">
          <span class="detail-label">Edge</span>
          <span class="detail-val">Smooth</span>
        </div>
      </div>

      <div class="detail-item">
        <div class="detail-icon icon-face">✦</div>
        <div class="detail-text">
          <span class="detail-label">President</span>
          <span class="detail-val">Abraham Lincoln</span>
        </div>
      </div>
    </div>

    
    <div class="value-col">
      <div class="val-symbol">1¢</div>
      <div class="val-name">1 Cent</div>
      <div class="val-sub">$0.01</div>
    </div>
  </div>

  <script>
    const coinBtn = document.getElementById('coinBtn');
    const heads = document.getElementById('coinHeads');
    const tails = document.getElementById('coinTails');
    const hint = document.getElementById('hintText');
    let isHeads = true;

    function toggleFlip() {
      isHeads = !isHeads;
      heads.style.display = isHeads ? 'block' : 'none';
      tails.style.display = isHeads ? 'none' : 'block';
      hint.textContent = isHeads ? '⟳ Flip to Tails' : '⟳ Flip to Heads';
    }

    coinBtn.addEventListener('click', toggleFlip);
    hint.addEventListener('click', toggleFlip);
    
    coinBtn.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        toggleFlip();
      }
    });

    hint.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        toggleFlip();
      }
    });
  </script>
</body>
</html>

Le vocabulaire de la monnaie : euro, prix et payer

Reconnaître les pièces de 1 € et 2 €

La valeur des pièces de monnaie

Reconnaître les billets de 5 € et 10 €

Reconnaître les billets de 5 €, 10 € et 20 €

Échanger des billets : 10 € contre deux billets de 5 €

Lire une étiquette de prix en euros entiers

Utiliser le lexique : cher, pas cher, plus cher et moins cher

math

Découvrir la monnaie : pièces, billets et lexique du quotidien

Reconnaître les pièces de 1, 2 et 5 centimes

Reconnaître les pièces de 10, 20 et 50 centimes

Reconnaître les pièces de 1 € et 2 € et les billets jusqu'à 100 €

Comprendre que 1 € = 100 centimes

Faire 1 € avec deux pièces de 50 centimes

Faire 1 € en combinant des pièces de 10 c, 20 c et 50 c

Échanger 100 centimes contre une pièce de 1 €

Les euros et les centimes : pièces, billets et équivalences

Identifying One, Five, Ten, and Twenty Dollar Bills

Writing Money Amounts with Dollar and Cent Symbols

Skip-Counting Nickels by 5s

Skip-Counting Dimes by 10s

Skip-Counting Quarters by 25s

Skip-Counting One-Dollar Coins and Bills

Skip-Counting Five-Dollar Bills by 5s

Skip-Counting Ten-Dollar Bills by 10s

Skip-Counting Twenty-Dollar Bills by 20s

Recognizing Coins, Bills, and Money Symbols

Recognizing a Penny by Its Features

Recognizing a Nickel by Its Features

Recognizing a Dime by Its Features

Recognizing a Quarter by Its Features

Recognizing Individual U.S. Coins

Calculer la valeur d'un ensemble de billets en euros

Calculer la valeur d'un ensemble de pièces de centimes

Déterminer la valeur en euros et centimes d'un ensemble de pièces et billets

Comparer deux prix : quel objet est le plus cher ?

Comparer deux sommes d'argent

Comparer des ensembles de pièces et billets

Comparer deux sommes mixtes en euros et centimes

Ranger des sommes d'argent de la plus petite à la plus grande

Calculer et comparer des sommes d'argent

Counting Mixed Coins to 50¢

Counting Mixed Coins up to One Dollar

Making the Same Amount with Different Coins

Finding Equivalent Coin Collections for One Dollar

Counting Collections of Mixed Dollar Bills

Finding Different Ways to Pay with Bills

Counting Combinations of Bills and Coins Together

Comparing Money with Greater Than and Less Than

Counting Combinations of Coins and Bills

Calculer une somme uniquement composée de pièces de 1 €

Calculer une somme en comptant de 2 en 2 avec des pièces de 2 €

Calculer une somme mêlant pièces de 1 € et pièces de 2 €

Calculer une somme avec un billet de 5 € et des pièces

Calculer une somme avec un billet de 10 € et des pièces

Compter des pièces et des billets ensemble

Calculer la valeur totale d'un porte-monnaie mêlant pièces et billets

Déterminer la valeur d'un ensemble de pièces et de billets

Identifying Pennies and Nickels

Identifying Dimes and Quarters

Identifying All Coins and Their Values

Matching Coin Names to Coin Pictures

Matching Coin Values to Coin Pictures

Distinguishing Coins by Size and Color

Front and Back Sides of Coins

Sorting Coins by Type

Identifying and Sorting Mixed Coins

认识小面值纸币与硬币：1元、5角、1角、1分

认识大面值纸币：5元、10元、20元、50元、100元

探究元、角、分之间的十进制换算关系

凑整付钱：用不同的面值组合凑出指定的金额

模拟购物中的付整找零计算

欢乐购物街：买家与卖家的角色扮演实践

认识人民币与模拟购物实践

Comparer la valeur et non le nombre de pièces

Comparer deux porte-monnaie avec les symboles <, > et =

Ranger des sommes d'argent dans l'ordre croissant

Comparer deux ensembles de pièces et de billets

Constituer une somme avec des pièces de 1 €

Constituer une somme avec des pièces de 1 € et 2 €

Constituer une somme d'argent donnée

Constituer une somme donnée en centimes

Constituer une somme en euros et centimes d'euro

Composer une même somme de différentes manières

Constituer une somme avec le nombre minimal de pièces et billets

Constituer des sommes d'argent et payer

Skip-Counting Same-Value Coins to Pay an Exact Price

Skip-Counting Same-Value Bills to Pay an Exact Price

Paying for Items with Exact Coin Combinations

Comparing Costs of Two or More Items

Calculating the Total Cost of Two Store Items

Calculating Change by Counting Up Within Fifty Cents

Calculating Change from One Dollar Using Counting Up

Calculating Change Using Subtraction

Calculating Change from Whole Dollar Bills

Giving Change Using the Fewest Coins

Checking Money Transactions Using Inverse Addition

Shopping and Calculating Change

How Many Pennies Equal a Nickel?

How Many Pennies Equal a Dime?

How Many Nickels Equal a Dime?

How Many Nickels Equal a Quarter?

How Many Pennies Equal a Quarter?

Comparing Values of Two Coins

Ordering Coins From Least to Greatest Value

Explaining Why a Dime Is Worth More Than a Nickel

Understanding Coin Value Relationships

制定10元小额文具购物清单与预算

货比三家：比较商品价格与合理选择

反思购物过程：需要还是想要？

爱护人民币与我的零用钱储蓄计划

小小理财家与合理消费规划

Payer une somme exacte avec pièces de 1 €, 2 € et billet de 5 €

Trouver différentes manières de payer une même somme

Constituer et décomposer une somme d'argent

Le vocabulaire de la monnaie : euro, prix et achat

Reconnaître les billets en euros : 5 €, 10 €, 20 €, 50 €

Calculer une somme avec des pièces de 1 € et 2 €

Payer une même somme de différentes manières

Simuler des achats : faire l'appoint

Simuler des achats et rendre la monnaie

La monnaie : pièces, billets et achats au CP

Calculer le prix total de deux articles

Payer un achat avec l'appoint exact

Rendre la monnaie sur des montants en euros entiers

Rendre la monnaie sur un billet de 5 €

Rendre la monnaie sur des billets de 10 € et 20 €

Rendre la monnaie sur 1 euro avec des centimes

Problèmes d'achats : calculer le total et le rendu de monnaie

Situations d'achats et rendu de monnaie

Using the Cent Symbol (¢)

Writing the Value of a Penny as 1¢

Writing the Value of a Nickel as 5¢

Writing the Value of a Dime as 10¢

Writing the Value of a Quarter as 25¢

Reading and Writing Cent Values

Matching Written Values to Coin Pictures

Writing Individual Coin Values with the Cent Symbol

Écrire une somme sous la forme « ... € et ... centimes »

Comprendre le rôle de la virgule dans l'écriture d'une somme

Lire et écrire des sommes d'argent avec une virgule

Passer de « euros et centimes » à l'écriture à virgule

Éviter les pièges des centimes : 5 centimes (0,05 €) et 50 centimes (0,50 €)

OGM.2.FIN.1

Aligned learning resources

Related diagrams