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

    .expression-header {
      font-size: 15px;
      font-weight: 700;
      color: #475569;
      background: #e2e8f0;
      padding: 4px 14px;
      border-radius: 999px;
      margin-bottom: 12px;
      letter-spacing: 0.2px;
    }

    .waterfall {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 320px;
      gap: 4px;
    }

    .step-card {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 20px;
      font-weight: 600;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      color: #334155;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      transition: all 0.25s ease;
      cursor: pointer;
    }

    .step-card.active {
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.18);
      border-color: #22b7ff;
    }

    .op-tag {
      font-family: system-ui, -apple-system, sans-serif;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 3px 8px;
      border-radius: 6px;
    }

    /* Step highlights */
    .hl-exp {
      background: #fef08a;
      color: #854d0e;
      padding: 1px 5px;
      border-radius: 4px;
      border: 1px solid #fde047;
    }
    .tag-exp {
      background: #fef9c3;
      color: #854d0e;
    }

    .hl-mul {
      background: #dbeafe;
      color: #1e40af;
      padding: 1px 5px;
      border-radius: 4px;
      border: 1px solid #bfdbfe;
    }
    .tag-mul {
      background: #eff6ff;
      color: #1e40af;
    }

    .hl-add {
      background: #dcfce7;
      color: #166534;
      padding: 1px 5px;
      border-radius: 4px;
      border: 1px solid #bbf7d0;
    }
    .tag-add {
      background: #f0fdf4;
      color: #166534;
    }

    .card-final {
      background: #10b981;
      border-color: #059669;
      color: #ffffff;
      justify-content: center;
      font-size: 24px;
      font-weight: 800;
      gap: 10px;
    }
    .card-final.active {
      box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
      border-color: #047857;
    }
    .card-final .badge-icon {
      font-size: 18px;
      background: rgba(255,255,255,0.25);
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
    }

    .arrow {
      color: #94a3b8;
      font-size: 14px;
      line-height: 1;
      user-select: none;
    }

    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 14px;
    }

    .btn-ctrl {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #475569;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      font-size: 13px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
    }
    .btn-ctrl:hover {
      background: #f1f5f9;
    }

    .dots {
      display: flex;
      gap: 6px;
    }
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .dot.active {
      background: #22b7ff;
      transform: scale(1.2);
    }
  </style>
</head>
<body>

  <div class="expression-header">2n² + 7 &nbsp;(n = 3)</div>

  <div class="waterfall">
    
    <div class="step-card active" data-step="0">
      <span>2(<span class="hl-exp">3²</span>) + 7</span>
      <span class="op-tag tag-exp">Exponent</span>
    </div>

    <div class="arrow">↓</div>

    
    <div class="step-card" data-step="1">
      <span><span class="hl-mul">2(9)</span> + 7</span>
      <span class="op-tag tag-mul">Multiply</span>
    </div>

    <div class="arrow">↓</div>

    
    <div class="step-card" data-step="2">
      <span><span class="hl-add">18 + 7</span></span>
      <span class="op-tag tag-add">Add</span>
    </div>

    <div class="arrow">↓</div>

    
    <div class="step-card card-final" data-step="3">
      <span class="badge-icon">✓</span>
      <span>25</span>
    </div>
  </div>

  <div class="controls">
    <button class="btn-ctrl" id="prevBtn" title="Previous">◀</button>
    <button class="btn-ctrl" id="playBtn" title="Play/Pause">⏸</button>
    <button class="btn-ctrl" id="nextBtn" title="Next">▶</button>
    <div class="dots">
      <div class="dot active" 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>
  </div>

  <script>
    const cards = document.querySelectorAll('.step-card');
    const dots = document.querySelectorAll('.dot');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    let current = 0;
    let playing = true;
    let timer = null;

    function showStep(idx) {
      current = (idx + cards.length) % cards.length;
      cards.forEach((c, i) => c.classList.toggle('active', i === current));
      dots.forEach((d, i) => d.classList.toggle('active', i === current));
    }

    function startAuto() {
      stopAuto();
      playing = true;
      playBtn.textContent = '⏸';
      timer = setInterval(() => {
        showStep(current + 1);
      }, 3000);
    }

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

    playBtn.addEventListener('click', () => {
      if (playing) stopAuto();
      else {
        showStep(current + 1);
        startAuto();
      }
    });

    prevBtn.addEventListener('click', () => {
      stopAuto();
      showStep(current - 1);
    });

    nextBtn.addEventListener('click', () => {
      stopAuto();
      showStep(current + 1);
    });

    cards.forEach((card, idx) => {
      card.addEventListener('click', () => {
        stopAuto();
        showStep(idx);
      });
    });

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

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

Evaluating One-Variable Expressions with Whole Numbers

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Evaluating Algebraic Expressions</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: #0f172a;
      padding: 12px;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      user-select: none;
    }

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

    /* Variable Value Header */
    .header-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      position: relative;
      z-index: 5;
    }

    .val-badge {
      background: #ffffff;
      border: 2px solid #2563eb;
      color: #1e40af;
      font-weight: 700;
      font-size: 15px;
      padding: 4px 16px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
    }

    .val-badge .badge-label {
      color: #475569;
      font-weight: 600;
      font-size: 13.5px;
    }

    .val-badge .badge-val {
      color: #2563eb;
      font-family: 'Cambria Math', 'KaTeX_Main', 'Times New Roman', serif;
      font-size: 17px;
      font-weight: 700;
    }

    /* SVG Connecting Arrows */
    .connector-svg {
      width: 100%;
      height: 28px;
      margin-top: -1px;
      margin-bottom: -1px;
      display: block;
      overflow: visible;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .connector-path {
      stroke: #2563eb;
      stroke-width: 2;
      stroke-linecap: round;
      fill: none;
      stroke-dasharray: 4 3;
    }

    .connector-arrowhead {
      fill: #2563eb;
    }

    .connector-svg.dimmed {
      opacity: 0.25;
    }

    /* Main Step Flow */
    .main-flow {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
    }

    .step-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 9px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
      opacity: 0.65;
      position: relative;
    }

    .step-card.active {
      opacity: 1;
      background: #ffffff;
      border: 2px solid #2563eb;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
    }

    .step-tag {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      width: 68px;
      line-height: 1.2;
      flex-shrink: 0;
    }

    .step-card.active .step-tag {
      color: #1d4ed8;
    }

    .step-subtag {
      font-size: 9.5px;
      font-weight: 600;
      color: #94a3b8;
    }

    .step-card.active .step-subtag {
      color: #2563eb;
    }

    .step-content {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Cambria Math', 'KaTeX_Main', 'Times New Roman', serif;
      font-size: 19px;
      font-weight: 600;
      color: #0f172a;
      gap: 5px;
      white-space: nowrap;
    }

    /* Math typography */
    .frac {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 17px;
      line-height: 1;
      padding: 0 1px;
    }
    .frac-top {
      border-bottom: 1.5px solid currentColor;
      padding-bottom: 2px;
    }
    .frac-bot {
      padding-top: 2px;
    }

    .k-var {
      color: #d97706;
      font-style: italic;
      font-weight: 700;
    }

    .k-sub {
      color: #1d4ed8;
      font-weight: 700;
      background: #eff6ff;
      padding: 1px 4px;
      border-radius: 4px;
      border: 1px solid #bfdbfe;
    }

    .t1 { color: #0284c7; font-weight: 700; }
    .t2 { color: #7c3aed; font-weight: 700; }
    .res { color: #16a34a; font-size: 22px; font-weight: 800; }

    .op {
      color: #475569;
      font-size: 17px;
      margin: 0 2px;
      font-weight: 600;
    }

    .sub-arrow {
      font-size: 14px;
      color: #94a3b8;
      margin: 0 4px;
    }

    .divider {
      color: #cbd5e1;
      margin: 0 8px;
      font-weight: 300;
    }

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

    .btn-step {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    }

    .btn-step.active {
      background: #2563eb;
      border-color: #1d4ed8;
      color: #ffffff;
    }

    .btn-play {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s, border-color 0.2s;
    }

    @media (max-width: 380px) {
      .step-content { font-size: 16px; gap: 3px; }
      .frac { font-size: 14px; }
      .step-tag { width: 56px; font-size: 10px; }
      .step-subtag { font-size: 8.5px; }
      .val-badge { font-size: 13.5px; padding: 3px 12px; }
      .btn-step { padding: 5px 8px; font-size: 11px; }
      .btn-play { padding: 5px 8px; }
    }
  </style>
</head>
<body>

  <div class="container">
    
    <div class="header-area">
      <div class="val-badge" id="valBadge">
        <span class="badge-label">Evaluate for:</span>
        <span class="badge-val">k = 4</span>
      </div>

      
      <svg class="connector-svg" id="connectorSvg" viewBox="0 0 460 28" preserveAspectRatio="none">
        <defs>
          <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 0 1.5 L 8 5 L 0 8.5 z" class="connector-arrowhead" />
          </marker>
        </defs>
        
        <path d="M 242 1 C 242 12, 304 10, 310 26" class="connector-path" marker-end="url(#arrow)" />
        
        <path d="M 260 1 C 265 12, 388 10, 396 26" class="connector-path" marker-end="url(#arrow)" />
      </svg>
    </div>

    
    <div class="main-flow">
      
      <div class="step-card active" id="step0">
        <div class="step-tag">Step 1<br><span class="step-subtag">Substitute</span></div>
        <div class="step-content">
          <span class="frac"><span class="frac-top">24</span><span class="frac-bot k-var">k</span></span>
          <span class="op">+</span>
          <span>5<span class="k-var">k</span></span>
          <span class="sub-arrow">➔</span>
          <span class="frac"><span class="frac-top t1">24</span><span class="frac-bot k-sub">4</span></span>
          <span class="op">+</span>
          <span class="t2">5</span><span class="k-sub">(4)</span>
        </div>
      </div>

      
      <div class="step-card" id="step1">
        <div class="step-tag">Step 2<br><span class="step-subtag">Evaluate</span></div>
        <div class="step-content">
          <span class="frac"><span class="frac-top t1">24</span><span class="frac-bot" style="color:#1d4ed8; font-weight:700;">4</span></span>
          <span class="op">=</span>
          <span class="t1">6</span>
          <span class="divider">|</span>
          <span class="t2">5</span><span style="color:#1d4ed8; font-weight:700;">(4)</span>
          <span class="op">=</span>
          <span class="t2">20</span>
        </div>
      </div>

      
      <div class="step-card" id="step2">
        <div class="step-tag">Step 3<br><span class="step-subtag">Combine</span></div>
        <div class="step-content">
          <span class="t1">6</span>
          <span class="op">+</span>
          <span class="t2">20</span>
          <span class="op">=</span>
          <span class="res">26</span>
        </div>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn-step active" id="btn0" onclick="goToStep(0)">1. Substitute</button>
      <button class="btn-step" id="btn1" onclick="goToStep(1)">2. Evaluate</button>
      <button class="btn-step" id="btn2" onclick="goToStep(2)">3. Combine</button>
      <button class="btn-play" id="playBtn" onclick="togglePlay()" aria-label="Toggle auto play">⏸</button>
    </div>
  </div>

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

    const cards = [document.getElementById('step0'), document.getElementById('step1'), document.getElementById('step2')];
    const btns = [document.getElementById('btn0'), document.getElementById('btn1'), document.getElementById('btn2')];
    const connectorSvg = document.getElementById('connectorSvg');
    const playBtn = document.getElementById('playBtn');

    function updateUI() {
      cards.forEach((c, i) => {
        c.classList.toggle('active', i === currentStep);
      });
      btns.forEach((b, i) => {
        b.classList.toggle('active', i === currentStep);
      });
      if (connectorSvg) {
        connectorSvg.classList.toggle('dimmed', currentStep !== 0);
      }
    }

    function goToStep(idx) {
      currentStep = idx;
      updateUI();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % 3;
      updateUI();
    }

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

    function stopTimer() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    }

    function togglePlay() {
      playing = !playing;
      playBtn.textContent = playing ? '⏸' : '▶';
      if (playing) {
        startTimer();
      } else {
        stopTimer();
      }
    }

    // Initialize auto-play
    startTimer();
  </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: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 16px;
    }

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

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

    .btn-step {
      flex: 1;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #64748b;
      padding: 8px 6px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
      text-align: center;
      white-space: nowrap;
    }

    .btn-step.active {
      background: #3b82f6;
      color: #ffffff;
      border-color: #3b82f6;
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
    }

    .btn-play {
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      width: 36px;
      height: 36px;
      flex-shrink: 0;
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease;
    }

    .btn-play:hover, .btn-step:hover:not(.active) {
      background: #f1f5f9;
    }

    .stage-wrapper {
      position: relative;
      width: 100%;
      height: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .step-card {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      padding: 12px;
    }

    .step-card.active {
      opacity: 1;
      pointer-events: auto;
    }

    .tag {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #3b82f6;
      margin-bottom: 16px;
    }

    .math-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: clamp(26px, 6vw, 34px);
      font-weight: 700;
      color: #1e2945;
      font-family: 'SF Pro Display', system-ui, -apple-system, sans-serif;
    }

    .token {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      height: 44px;
      padding: 0 10px;
      border-radius: 10px;
      font-size: clamp(22px, 5vw, 28px);
      font-weight: 700;
      transition: all 0.3s ease;
    }

    .token-var {
      background: #f1f5f9;
      border: 2px dashed #94a3b8;
      color: #64748b;
    }

    .token-val {
      background: #eff6ff;
      border: 2px solid #3b82f6;
      color: #2563eb;
      box-shadow: 0 0 12px rgba(59, 130, 246, 0.25);
    }

    .token-calc {
      background: #f8fafc;
      border: 2px solid #cbd5e1;
      color: #1e2945;
    }

    .token-result {
      background: #ecfdf5;
      border: 2px solid #10b981;
      color: #047857;
      box-shadow: 0 0 14px rgba(16, 185, 129, 0.25);
      font-size: clamp(26px, 6vw, 34px);
      min-width: 54px;
      height: 48px;
    }

    .sub-flow {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 16px;
      font-size: 15px;
      font-weight: 600;
      color: #64748b;
    }

    .arrow {
      color: #94a3b8;
      font-size: 18px;
    }

    @media (max-width: 380px) {
      .btn-step {
        font-size: 11px;
        padding: 6px 4px;
      }
      .math-row {
        gap: 6px;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="nav-bar">
      <button class="btn-step active" data-step="0">1. Substitute</button>
      <button class="btn-step" data-step="1">2. Multiply</button>
      <button class="btn-step" data-step="2">3. Add</button>
      <button class="btn-play" id="playBtn" aria-label="Play or Pause">⏸</button>
    </div>

    <div class="stage-wrapper">
      
      <div class="step-card active" id="card0">
        <div class="tag">Given: x = 4</div>
        <div class="math-row">
          <span>3</span>
          <div class="token token-var">x</div>
          <span>+</span>
          <span>5</span>
        </div>
        <div class="sub-flow">
          <span>x</span>
          <span class="arrow">→</span>
          <div class="token token-val" style="min-width:32px;height:32px;font-size:16px;padding:0 6px;">4</div>
        </div>
      </div>

      
      <div class="step-card" id="card1">
        <div class="tag">Multiply First</div>
        <div class="math-row">
          <div class="token token-val">3(4)</div>
          <span>+</span>
          <span>5</span>
        </div>
        <div class="sub-flow">
          <span>3 × 4</span>
          <span class="arrow">→</span>
          <div class="token token-calc" style="min-width:32px;height:32px;font-size:16px;padding:0 6px;">12</div>
        </div>
      </div>

      
      <div class="step-card" id="card2">
        <div class="tag">Final Value</div>
        <div class="math-row">
          <span>12</span>
          <span>+</span>
          <span>5</span>
          <span>=</span>
          <div class="token token-result">17</div>
        </div>
        <div class="sub-flow">
          <span>12 + 5</span>
          <span class="arrow">→</span>
          <span style="color:#047857; font-weight:700;">17</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    const buttons = document.querySelectorAll('.btn-step');
    const cards = document.querySelectorAll('.step-card');
    const playBtn = document.getElementById('playBtn');

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

    function updateStep(index) {
      currentStep = (index + buttons.length) % buttons.length;
      buttons.forEach((btn, i) => btn.classList.toggle('active', i === currentStep));
      cards.forEach((card, i) => card.classList.toggle('active', i === currentStep));
    }

    function startTimer() {
      stopTimer();
      timer = setInterval(() => {
        updateStep(currentStep + 1);
      }, 3000);
    }

    function stopTimer() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    }

    buttons.forEach((btn, i) => {
      btn.addEventListener('click', () => {
        isPlaying = false;
        playBtn.textContent = '▶';
        stopTimer();
        updateStep(i);
      });
    });

    playBtn.addEventListener('click', () => {
      isPlaying = !isPlaying;
      playBtn.textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        startTimer();
      } else {
        stopTimer();
      }
    });

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

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

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

    /* Prompt header */
    .header-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 14px;
      font-size: 16px;
      font-weight: 600;
      color: #475569;
    }

    .expr-tag {
      background: #e0f2fe;
      color: #0369a1;
      padding: 4px 10px;
      border-radius: 6px;
      font-weight: 700;
      font-size: 18px;
      letter-spacing: 0.5px;
    }

    .sub-tag {
      background: #f1f5f9;
      color: #334155;
      padding: 4px 10px;
      border-radius: 6px;
      font-weight: 700;
      font-size: 16px;
    }

    /* Comparison grid */
    .compare-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      width: 100%;
      max-width: 580px;
    }

    @media (max-width: 440px) {
      .compare-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
    }

    /* Cards */
    .side-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
    }

    .card-wrong {
      border: 2px solid #fca5a5;
      background: #fffafa;
    }

    .card-correct {
      border: 2px solid #86efac;
      background: #f0fdf4;
    }

    /* Status badges */
    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      margin-bottom: 12px;
    }

    .badge-wrong {
      background: #fee2e2;
      color: #b91c1c;
    }

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

    /* Math steps visualization */
    .math-step {
      font-size: 15px;
      color: #64748b;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .math-target {
      font-size: 26px;
      font-weight: 800;
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 4px 0 10px;
    }

    .text-wrong {
      color: #dc2626;
      text-decoration: line-through;
      text-decoration-thickness: 3px;
      text-decoration-color: #ef4444;
    }

    .text-correct {
      color: #16a34a;
    }

    .highlight-x {
      color: #2563eb;
      background: #dbeafe;
      padding: 1px 6px;
      border-radius: 4px;
    }

    .note-pill {
      font-size: 13px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 8px;
      margin-top: auto;
    }

    .note-wrong {
      background: #fee2e2;
      color: #991b1b;
    }

    .note-correct {
      background: #dcfce7;
      color: #166534;
    }

    /* Interactive switch for values */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 14px;
    }

    .btn-val {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      color: #475569;
      font-size: 13px;
      font-weight: 700;
      padding: 5px 12px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }

    .btn-val.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="header-bar">
    <span>Evaluate</span>
    <span class="expr-tag">5x</span>
    <span>for</span>
    <span class="sub-tag" id="varDisplay">x = 4</span>
  </div>

  <div class="compare-grid">
    
    <div class="side-card card-wrong">
      <div class="status-badge badge-wrong">✕ Incorrect</div>
      <div class="math-step">
        <span>5</span><span class="highlight-x">x</span>
        <span>→</span>
        <span>5</span><span class="highlight-x" id="wrongXVal">4</span>
      </div>
      <div class="math-target text-wrong" id="wrongResult">54</div>
      <div class="note-pill note-wrong" id="wrongNote">Looks like fifty-four</div>
    </div>

    
    <div class="side-card card-correct">
      <div class="status-badge badge-correct">✓ Correct</div>
      <div class="math-step">
        <span>5</span><span class="highlight-x">x</span>
        <span>→</span>
        <span>5(<span id="correctXVal">4</span>)</span>
      </div>
      <div class="math-target text-correct" id="correctResult">5(4) = 20</div>
      <div class="note-pill note-correct">Clear multiplication</div>
    </div>
  </div>

  <div class="controls">
    <button class="btn-val" onclick="setVal(2)">x = 2</button>
    <button class="btn-val active" onclick="setVal(4)">x = 4</button>
    <button class="btn-val" onclick="setVal(7)">x = 7</button>
  </div>

  <script>
    const wordNumbers = {
      2: "twenty-two",
      4: "fifty-four",
      7: "fifty-seven"
    };

    function setVal(num) {
      document.querySelectorAll('.btn-val').forEach(btn => {
        btn.classList.toggle('active', btn.textContent.trim() === 'x = ' + num);
      });

      document.getElementById('varDisplay').textContent = 'x = ' + num;
      document.getElementById('wrongXVal').textContent = num;
      document.getElementById('correctXVal').textContent = num;
      
      document.getElementById('wrongResult').textContent = '5' + num;
      document.getElementById('correctResult').textContent = '5(' + num + ') = ' + (5 * num);
      
      const words = { 2: "fifty-two", 4: "fifty-four", 7: "fifty-seven" };
      document.getElementById('wrongNote').textContent = 'Looks like ' + words[num];
    }
  </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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 100%;
    }

    .controller {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f1f5f9;
      padding: 8px 14px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
    }

    .stepper {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      padding: 4px 8px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }

    .step-btn {
      background: #e0e7ff;
      color: #4338ca;
      border: none;
      width: 26px;
      height: 26px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease;
    }

    .step-btn:hover {
      background: #c7d2fe;
    }

    .val-display {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      color: #4338ca;
      font-size: 15px;
      min-width: 20px;
      text-align: center;
    }

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

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

    .op-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 8px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .op-card.add { border-top: 4px solid #3b82f6; }
    .op-card.sub { border-top: 4px solid #6366f1; }
    .op-card.mul { border-top: 4px solid #8b5cf6; }
    .op-card.div { border-top: 4px solid #a855f7; }

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

    .tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 2px 7px;
      border-radius: 6px;
    }

    .add .tag { background: #eff6ff; color: #2563eb; }
    .sub .tag { background: #eef2ff; color: #4f46e5; }
    .mul .tag { background: #f5f3ff; color: #7c3aed; }
    .div .tag { background: #faf5ff; color: #9333ea; }

    .symbol {
      font-size: 16px;
      font-weight: 800;
      opacity: 0.6;
    }

    .phrase-box {
      display: flex;
      align-items: baseline;
      gap: 6px;
      font-size: 13px;
      color: #475569;
    }

    .phrase {
      font-weight: 500;
      line-height: 1.3;
    }

    .expr-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f8fafc;
      border: 1px solid #f1f5f9;
      border-radius: 8px;
      padding: 8px 10px;
    }

    .algebra {
      font-size: 20px;
      font-weight: 700;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      color: #0f172a;
      display: flex;
      align-items: center;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 17px;
      line-height: 1;
    }

    .fraction .top {
      border-bottom: 2px solid #0f172a;
      padding-bottom: 2px;
    }

    .fraction .bot {
      padding-top: 2px;
    }

    .live-calc {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      text-align: right;
    }

    .hint {
      font-size: 10.5px;
      color: #7c3aed;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 3px;
    }
  </style>
</head>
<body>

  <div class="controller">
    <span>Mystery Bag: <strong style="color:#4338ca;">n coins</strong></span>
    <div class="stepper">
      <button class="step-btn" id="decBtn" onclick="changeN(-4)" aria-label="Decrease n">−</button>
      <span class="val-display" id="valN">8</span>
      <button class="step-btn" id="incBtn" onclick="changeN(4)" aria-label="Increase n">+</button>
    </div>
  </div>

  <div class="grid">
    
    <div class="op-card add">
      <div class="header-row">
        <span class="tag">Addition</span>
        <span class="symbol">+</span>
      </div>
      <div class="phrase-box">
        <span class="phrase">5 more than <em>n</em></span>
      </div>
      <div class="expr-box">
        <div class="algebra">n + 5</div>
        <div class="live-calc" id="calcAdd">= 13</div>
      </div>
    </div>

    
    <div class="op-card sub">
      <div class="header-row">
        <span class="tag">Subtraction</span>
        <span class="symbol">−</span>
      </div>
      <div class="phrase-box">
        <span class="phrase">2 less than <em>n</em></span>
      </div>
      <div class="expr-box">
        <div class="algebra">n − 2</div>
        <div class="live-calc" id="calcSub">= 6</div>
      </div>
    </div>

    
    <div class="op-card mul">
      <div class="header-row">
        <span class="tag">Multiplication</span>
        <span class="symbol">×</span>
      </div>
      <div class="phrase-box">
        <span class="phrase">3 groups of <em>n</em></span>
      </div>
      <div class="hint">✦ No × sign needed</div>
      <div class="expr-box">
        <div class="algebra">3n</div>
        <div class="live-calc" id="calcMul">= 24</div>
      </div>
    </div>

    
    <div class="op-card div">
      <div class="header-row">
        <span class="tag">Division</span>
        <span class="symbol">÷</span>
      </div>
      <div class="phrase-box">
        <span class="phrase"><em>n</em> split into 4 shares</span>
      </div>
      <div class="expr-box">
        <div class="algebra">
          <div class="fraction">
            <span class="top">n</span>
            <span class="bot">4</span>
          </div>
        </div>
        <div class="live-calc" id="calcDiv">= 2</div>
      </div>
    </div>
  </div>

  <script>
    let n = 8;

    function update() {
      document.getElementById('valN').textContent = n;
      document.getElementById('calcAdd').textContent = `= ${n + 5}`;
      document.getElementById('calcSub').textContent = `= ${n - 2}`;
      document.getElementById('calcMul').textContent = `= ${3 * n}`;
      document.getElementById('calcDiv').textContent = `= ${n / 4}`;
      
      document.getElementById('decBtn').style.opacity = (n <= 4) ? '0.4' : '1';
      document.getElementById('decBtn').style.pointerEvents = (n <= 4) ? 'none' : 'auto';
      
      document.getElementById('incBtn').style.opacity = (n >= 24) ? '0.4' : '1';
      document.getElementById('incBtn').style.pointerEvents = (n >= 24) ? 'none' : 'auto';
    }

    function changeN(delta) {
      const next = n + delta;
      if (next >= 4 && next <= 24) {
        n = next;
        update();
      }
    }

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

Using Variables to Represent Unknown Quantities

<!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>Variables as Unknowns</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }

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

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

    .display-row {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 8px;
      padding: 10px 0;
    }

    /* Pouch Side */
    .pouch-col, .coins-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .pouch-wrapper {
      position: relative;
      width: 90px;
      height: 95px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.2s ease;
    }

    .pouch-wrapper:active {
      transform: scale(0.96);
    }

    .pouch-svg {
      width: 100%;
      height: 100%;
      filter: drop-shadow(0 4px 8px rgba(79, 70, 229, 0.2));
    }

    .pouch-text {
      position: absolute;
      top: 54%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 32px;
      font-weight: 800;
      color: #ffffff;
      font-style: italic;
      text-shadow: 0 2px 4px rgba(0,0,0,0.25);
    }

    .question-badge {
      position: absolute;
      top: 8px;
      right: 4px;
      width: 26px;
      height: 26px;
      background: #22b7ff;
      border: 2px solid #ffffff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-weight: 800;
      font-size: 15px;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.4);
    }

    .plus-symbol {
      font-size: 28px;
      font-weight: 700;
      color: #94a3b8;
    }

    /* Coins Side */
    .coins-group {
      height: 95px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
      max-width: 130px;
    }

    .coin {
      width: 36px;
      height: 36px;
      background: linear-gradient(135deg, #fde047 0%, #eab308 50%, #ca8a04 100%);
      border: 2px solid #fef08a;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 800;
      color: #78350f;
      box-shadow: 0 4px 6px rgba(202, 138, 4, 0.25), inset 0 1px 2px rgba(255,255,255,0.6);
      transition: transform 0.2s ease;
    }

    /* Bracket indicators */
    .bracket-row {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: start;
      gap: 8px;
    }

    .bracket-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .bracket-svg {
      width: 100%;
      max-width: 110px;
      height: 12px;
    }

    .label-badge {
      font-size: 13px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 6px;
      text-align: center;
      white-space: nowrap;
    }

    .unknown-label {
      background: #eff6ff;
      color: #0284c7;
      border: 1px solid #bae6fd;
    }

    .known-label {
      background: #fefce8;
      color: #b45309;
      border: 1px solid #fef08a;
    }

    /* Bottom equation card */
    .equation-card {
      width: 100%;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      box-shadow: 0 2px 8px rgba(30, 41, 69, 0.04);
    }

    .equation-main {
      font-size: 20px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .var-tag {
      background: #22b7ff;
      color: #ffffff;
      padding: 2px 10px;
      border-radius: 6px;
      font-style: italic;
    }

    .num-tag {
      background: #fef08a;
      color: #854d0e;
      padding: 2px 10px;
      border-radius: 6px;
    }

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

    /* Interactive peek */
    .interactive-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 12px;
      color: #475569;
      font-weight: 600;
      margin-top: 2px;
    }

    .val-btn {
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #1e2945;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
    }

    .val-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
    }
  </style>
</head>
<body>

  <div class="scene-container">
    
    <div class="display-row">
      
      <div class="pouch-col">
        <div class="pouch-wrapper" id="pouch" title="Unknown coins inside">
          <svg class="pouch-svg" viewBox="0 0 100 110" fill="none" xmlns="http://www.w3.org/2000/svg">
            <ellipse cx="50" cy="22" rx="20" ry="6" fill="#4338ca"/>
            <path d="M30 22 C30 14, 70 14, 70 22" stroke="#6366f1" stroke-width="4" stroke-linecap="round"/>
            
            <path d="M30 24 C20 40, 10 65, 12 85 C14 100, 30 106, 50 106 C70 106, 86 100, 88 85 C90 65, 80 40, 70 24 Z" fill="url(#pouchGradient)"/>
            
            <path d="M32 27 Q50 32 68 27" stroke="#fbbf24" stroke-width="3" stroke-linecap="round"/>
            <circle cx="50" cy="29" r="4" fill="#f59e0b"/>
            <defs>
              <linearGradient id="pouchGradient" x1="20" y1="20" x2="80" y2="105" gradientUnits="userSpaceOnUse">
                <stop stop-color="#6366f1"/>
                <stop offset="0.6" stop-color="#4f46e5"/>
                <stop offset="1" stop-color="#3730a3"/>
              </linearGradient>
            </defs>
          </svg>
          <span class="pouch-text">x</span>
          <div class="question-badge">?</div>
        </div>
      </div>

      <div class="plus-symbol">+</div>

      
      <div class="coins-col">
        <div class="coins-group">
          <div class="coin">1</div>
          <div class="coin">1</div>
          <div class="coin">1</div>
        </div>
      </div>
    </div>

    
    <div class="bracket-row">
      <div class="bracket-box">
        <svg class="bracket-svg" viewBox="0 0 100 16" fill="none">
          <path d="M2 2 H50 M50 2 V14 M50 2 H98" stroke="#0284c7" stroke-width="1.8" stroke-linecap="round"/>
        </svg>
        <span class="label-badge unknown-label">Unknown: x</span>
      </div>

      <div></div>

      <div class="bracket-box">
        <svg class="bracket-svg" viewBox="0 0 100 16" fill="none">
          <path d="M2 2 H50 M50 2 V14 M50 2 H98" stroke="#ca8a04" stroke-width="1.8" stroke-linecap="round"/>
        </svg>
        <span class="label-badge known-label">Known: 3</span>
      </div>
    </div>

    
    <div class="equation-card">
      <div class="equation-main">
        <span>Total =</span>
        <span class="var-tag" id="varDisplay">x</span>
        <span>+</span>
        <span class="num-tag">3</span>
        <span id="evalResult" style="color: #64748b; font-size: 17px; margin-left: 2px;"></span>
      </div>
      
      
      <div class="interactive-row">
        <span>If x =</span>
        <button class="val-btn" onclick="setVal(2)">2</button>
        <button class="val-btn" onclick="setVal(5)">5</button>
        <button class="val-btn" onclick="setVal(10)">10</button>
        <button class="val-btn active" onclick="resetVal()">?</button>
      </div>
    </div>
  </div>

  <script>
    function setVal(n) {
      document.querySelectorAll('.val-btn').forEach(b => b.classList.remove('active'));
      event.target.classList.add('active');
      document.getElementById('varDisplay').textContent = n;
      document.getElementById('evalResult').textContent = '= ' + (n + 3);
    }

    function resetVal() {
      document.querySelectorAll('.val-btn').forEach(b => b.classList.remove('active'));
      event.target.classList.add('active');
      document.getElementById('varDisplay').textContent = 'x';
      document.getElementById('evalResult').textContent = '';
    }
  </script>
</body>
</html>

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

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

    .list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      max-width: 520px;
      margin: 0 auto;
    }

    .row-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 16px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      cursor: pointer;
      user-select: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .row-card:hover, .row-card.active {
      border-color: #0284c7;
      box-shadow: 0 0 0 1px #0284c7, 0 2px 6px rgba(2, 132, 199, 0.08);
      background-color: #f0f9ff;
    }

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

    .icon-box {
      font-size: 24px;
      line-height: 1;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f1f5f9;
      border-radius: 8px;
      flex-shrink: 0;
    }

    .desc {
      font-size: 15px;
      font-weight: 500;
      color: #334155;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .desc .match-letter {
      color: #0284c7;
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .arrow {
      color: #94a3b8;
      font-size: 16px;
      margin: 0 10px;
      flex-shrink: 0;
    }

    .var-badge {
      width: 38px;
      height: 38px;
      border-radius: 8px;
      background: #e0f2fe;
      color: #0369a1;
      border: 1px solid #bae6fd;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "Courier New", Courier, monospace, serif;
      font-size: 20px;
      font-weight: 700;
      font-style: italic;
      flex-shrink: 0;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .row-card.active .var-badge {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }

    @media (max-width: 400px) {
      body {
        padding: 10px;
      }
      .row-card {
        padding: 10px 12px;
      }
      .desc {
        font-size: 14px;
      }
      .icon-box {
        font-size: 20px;
        width: 32px;
        height: 32px;
      }
      .var-badge {
        width: 34px;
        height: 34px;
        font-size: 18px;
      }
      .arrow {
        margin: 0 6px;
      }
    }
  </style>
</head>
<body>
  <div class="list">
    <div class="row-card active" onclick="activateRow(this)">
      <div class="left-group">
        <div class="icon-box">🐱</div>
        <div class="desc">Number of <span class="match-letter">c</span>ats</div>
      </div>
      <span class="arrow">→</span>
      <div class="var-badge">c</div>
    </div>

    <div class="row-card" onclick="activateRow(this)">
      <div class="left-group">
        <div class="icon-box">⏱️</div>
        <div class="desc"><span class="match-letter">M</span>inutes spent running</div>
      </div>
      <span class="arrow">→</span>
      <div class="var-badge">m</div>
    </div>

    <div class="row-card" onclick="activateRow(this)">
      <div class="left-group">
        <div class="icon-box">🎟️</div>
        <div class="desc">Cost of a <span class="match-letter">t</span>icket</div>
      </div>
      <span class="arrow">→</span>
      <div class="var-badge">t</div>
    </div>
  </div>

  <script>
    function activateRow(element) {
      document.querySelectorAll('.row-card').forEach(card => card.classList.remove('active'));
      element.classList.add('active');
    }
  </script>
</body>
</html>

OGM.7.EE.1

Aligned learning resources

Related diagrams