<!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;
      color: #0f172a;
      background: #f8fafc;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }
    .layout {
      display: flex;
      flex-direction: row;
      gap: 16px;
      width: 100%;
      max-width: 680px;
      align-items: center;
      justify-content: center;
    }
    @media (max-width: 580px) {
      .layout {
        flex-direction: column;
      }
    }
    .graph-panel {
      flex: 1;
      width: 100%;
      max-width: 340px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .graph-svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .controls-panel {
      flex: 1;
      width: 100%;
      max-width: 320px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }
    .tab-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 6px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      text-align: center;
      transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      user-select: none;
    }
    .tab-btn:hover {
      background: #f1f5f9;
    }
    .tab-btn.active {
      background: #0f172a;
      color: #ffffff;
      border-color: #0f172a;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .info-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 14px;
      min-height: 110px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
    }
    .math-title {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .math-desc {
      font-size: 13px;
      color: #64748b;
      line-height: 1.4;
    }
    .badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 700;
    }
    .b-blue { background: #dbeafe; color: #1d4ed8; }
    .b-green { background: #d1fae5; color: #047857; }
    .b-red { background: #fee2e2; color: #b91c1c; }
    .b-purple { background: #ede9fe; color: #6d28d9; }

    /* SVG Classes */
    .axis-line { stroke: #94a3b8; stroke-width: 1.5; }
    .grid-line { stroke: #f1f5f9; stroke-width: 1; }
    .tick-label { font-size: 10px; fill: #64748b; font-family: monospace; text-anchor: middle; }
    .tick-label-y { font-size: 10px; fill: #64748b; font-family: monospace; text-anchor: end; }
    
    .func-left { stroke: #2563eb; stroke-width: 3.5; stroke-linecap: round; transition: opacity 0.3s ease; }
    .func-right { stroke: #059669; stroke-width: 3.5; stroke-linecap: round; transition: opacity 0.3s ease; }
    
    .guide-x2 { stroke: #cbd5e1; stroke-width: 1.5; stroke-dasharray: 4,4; }
    .proj-blue { stroke: #2563eb; stroke-width: 1.5; stroke-dasharray: 3,3; transition: opacity 0.3s ease; }
    .proj-green { stroke: #059669; stroke-width: 1.5; stroke-dasharray: 3,3; transition: opacity 0.3s ease; }
    .proj-purple { stroke: #7c3aed; stroke-width: 1.5; stroke-dasharray: 3,3; transition: opacity 0.3s ease; }

    .open-pt-blue { fill: #ffffff; stroke: #2563eb; stroke-width: 2.5; }
    .open-pt-green { fill: #ffffff; stroke: #059669; stroke-width: 2.5; }
    .pt-purple { fill: #7c3aed; stroke: #ffffff; stroke-width: 2; }
    
    .tracer-blue { fill: #2563eb; filter: drop-shadow(0 0 2px rgba(37,99,235,0.6)); }
    .tracer-green { fill: #059669; filter: drop-shadow(0 0 2px rgba(5,150,105,0.6)); }
    
    .dim { opacity: 0.2; }
    .hidden { opacity: 0; pointer-events: none; }
    .visible { opacity: 1; }
  </style>
</head>
<body>

<div class="layout">
  
  <div class="graph-panel">
    <svg class="graph-svg" viewBox="0 0 320 280">
      
      

      
      <g>
        
        <line x1="20" y1="230" x2="280" y2="230" class="grid-line" />
        <line x1="20" y1="195" x2="280" y2="195" class="grid-line" />
        <line x1="20" y1="160" x2="280" y2="160" class="grid-line" />
        <line x1="20" y1="125" x2="280" y2="125" class="grid-line" />
        <line x1="20" y1="90"  x2="280" y2="90"  class="grid-line" />
        <line x1="20" y1="55"  x2="280" y2="55"  class="grid-line" />
        <line x1="20" y1="20"  x2="280" y2="20"  class="grid-line" />

        
        <line x1="20"  y1="20" x2="20"  y2="265" class="grid-line" />
        <line x1="60"  y1="20" x2="60"  y2="265" class="grid-line" />
        <line x1="100" y1="20" x2="100" y2="265" class="grid-line" />
        <line x1="140" y1="20" x2="140" y2="265" class="grid-line" />
        <line x1="180" y1="20" x2="180" y2="265" class="grid-line" />
        <line x1="220" y1="20" x2="220" y2="265" class="grid-line" />
        <line x1="260" y1="20" x2="260" y2="265" class="grid-line" />
      </g>

      
      <line x1="20" y1="230" x2="285" y2="230" class="axis-line" marker-end="url(#arrow)" />
      <line x1="60" y1="265" x2="60" y2="15" class="axis-line" marker-end="url(#arrow)" />
      <text x="285" y="244" class="tick-label" style="font-weight:700;">x</text>
      <text x="50" y="16" class="tick-label-y" style="font-weight:700;">y</text>

      
      <text x="20"  y="244" class="tick-label">-1</text>
      <text x="60"  y="244" class="tick-label">0</text>
      <text x="100" y="244" class="tick-label">1</text>
      <text x="140" y="244" class="tick-label" style="font-weight:bold; fill:#0f172a;">2</text>
      <text x="180" y="244" class="tick-label">3</text>
      <text x="220" y="244" class="tick-label">4</text>
      <text x="260" y="244" class="tick-label">5</text>

      <text x="52" y="198" class="tick-label-y">1</text>
      <text x="52" y="163" class="tick-label-y">2</text>
      <text x="52" y="128" class="tick-label-y">3</text>
      <text x="52" y="93"  class="tick-label-y">4</text>
      <text x="52" y="58"  class="tick-label-y">5</text>

      
      <line x1="140" y1="20" x2="140" y2="230" class="guide-x2" />

      
      <line id="projBlue" x1="60" y1="125" x2="140" y2="125" class="proj-blue hidden" />
      <line id="projGreen" x1="60" y1="160" x2="140" y2="160" class="proj-green hidden" />
      <line id="projPurple" x1="60" y1="55" x2="140" y2="55" class="proj-purple hidden" />

      
      
      <line id="funcLeft" x1="20" y1="230" x2="135" y2="129" class="func-left" />
      
      <line id="funcRight" x1="144" y1="164" x2="260" y2="265" class="func-right" />

      
      
      <circle id="holeBlue" cx="140" cy="125" r="4.5" class="open-pt-blue" />
      
      <circle id="holeGreen" cx="140" cy="160" r="4.5" class="open-pt-green" />
      
      <circle id="ptPurple" cx="140" cy="55" r="5" class="pt-purple" />

      
      <circle id="tracerLeft" cx="20" cy="230" r="4.5" class="tracer-blue hidden" />
      <circle id="tracerRight" cx="260" cy="265" r="4.5" class="tracer-green hidden" />
    </svg>
  </div>

  
  <div class="controls-panel">
    <div class="tabs">
      <button class="tab-btn active" onclick="setStep(0)">lim x→2⁻</button>
      <button class="tab-btn" onclick="setStep(1)">lim x→2⁺</button>
      <button class="tab-btn" onclick="setStep(2)">lim x→2</button>
      <button class="tab-btn" onclick="setStep(3)">f(2)</button>
    </div>

    <div class="info-card">
      <div id="mathTitle" class="math-title">
        <span>lim<sub>x→2⁻</sub> f(x) = 3</span>
        <span class="badge b-blue">Left-Hand</span>
      </div>
      <div id="mathDesc" class="math-desc">
        Approaching x = 2 from values strictly less than 2. The height approaches y = 3.
      </div>
    </div>
  </div>
</div>

<script>
  let activeStep = 0;
  let animProgress = 0;
  let animReq = null;

  const data = [
    {
      title: 'lim<sub>x→2⁻</sub> f(x) = 3',
      badge: 'Left-Hand',
      badgeClass: 'b-blue',
      desc: 'Approach x = 2 from left (x < 2). Curve approaches y = 3.'
    },
    {
      title: 'lim<sub>x→2⁺</sub> f(x) = 2',
      badge: 'Right-Hand',
      badgeClass: 'b-green',
      desc: 'Approach x = 2 from right (x > 2). Curve approaches y = 2.'
    },
    {
      title: 'lim<sub>x→2</sub> f(x) = DNE',
      badge: '3 ≠ 2',
      badgeClass: 'b-red',
      desc: 'Two-sided limit does not exist because left and right limits disagree.'
    },
    {
      title: 'f(2) = 5',
      badge: 'Point Value',
      badgeClass: 'b-purple',
      desc: 'Defined at solid dot (2, 5). Limits ignore the actual value at the point.'
    }
  ];

  function setStep(index) {
    activeStep = index;
    
    // Update Tab UI
    document.querySelectorAll('.tab-btn').forEach((btn, i) => {
      btn.classList.toggle('active', i === index);
    });

    // Update Info Card
    const info = data[index];
    document.getElementById('mathTitle').innerHTML = `
      <span>${info.title}</span>
      <span class="badge ${info.badgeClass}">${info.badge}</span>
    `;
    document.getElementById('mathDesc').textContent = info.desc;

    // Visual Elements
    const fl = document.getElementById('funcLeft');
    const fr = document.getElementById('funcRight');
    const pb = document.getElementById('projBlue');
    const pg = document.getElementById('projGreen');
    const pp = document.getElementById('projPurple');
    const hb = document.getElementById('holeBlue');
    const hg = document.getElementById('holeGreen');
    const pt = document.getElementById('ptPurple');
    const tl = document.getElementById('tracerLeft');
    const tr = document.getElementById('tracerRight');

    // Reset standard classes
    [fl, fr, hb, hg, pt].forEach(el => el.classList.remove('dim'));
    [pb, pg, pp, tl, tr].forEach(el => {
      el.classList.add('hidden');
      el.classList.remove('visible');
    });

    if (index === 0) {
      // Left Limit
      fr.classList.add('dim');
      hg.classList.add('dim');
      pt.classList.add('dim');
      pb.classList.remove('hidden');
      pb.classList.add('visible');
      tl.classList.remove('hidden');
      tl.classList.add('visible');
    } else if (index === 1) {
      // Right Limit
      fl.classList.add('dim');
      hb.classList.add('dim');
      pt.classList.add('dim');
      pg.classList.remove('hidden');
      pg.classList.add('visible');
      tr.classList.remove('hidden');
      tr.classList.add('visible');
    } else if (index === 2) {
      // Two-sided Limit (Compare both)
      pt.classList.add('dim');
      pb.classList.remove('hidden');
      pb.classList.add('visible');
      pg.classList.remove('hidden');
      pg.classList.add('visible');
      tl.classList.remove('hidden');
      tl.classList.add('visible');
      tr.classList.remove('hidden');
      tr.classList.add('visible');
    } else if (index === 3) {
      // Point Value f(2)
      fl.classList.add('dim');
      fr.classList.add('dim');
      hb.classList.add('dim');
      hg.classList.add('dim');
      pp.classList.remove('hidden');
      pp.classList.add('visible');
    }
  }

  // Continuous animation loop for approach tracers
  function animateTracers() {
    animProgress = (animProgress + 0.012) % 1;

    // Smooth approach pacing with ease-in-out curve
    const t = 0.5 - 0.5 * Math.cos(animProgress * Math.PI);

    // Left Tracer: moves from x=-1 (px: 20, 230) to x=1.92 (px: 136.8, 127.8)
    const xL = 20 + t * (137 - 20);
    const yL = 230 - t * (230 - 128);
    const tl = document.getElementById('tracerLeft');
    tl.setAttribute('cx', xL);
    tl.setAttribute('cy', yL);

    // Right Tracer: moves from x=5 (px: 260, 265) to x=2.08 (px: 143.2, 162.8)
    const xR = 260 - t * (260 - 143);
    const yR = 265 - t * (265 - 163);
    const tr = document.getElementById('tracerRight');
    tr.setAttribute('cx', xR);
    tr.setAttribute('cy', yR);

    animReq = requestAnimationFrame(animateTracers);
  }

  // Initialize
  setStep(0);
  animReq = requestAnimationFrame(animateTracers);
</script>

</body>
</html>

Evaluating One-Sided Limits Algebraically and Graphically

<!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>One-Sided Limits Comparison</title>
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <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: 10px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .header-formula {
      text-align: center;
      padding: 4px 8px;
    }

    .formula-badge {
      display: inline-block;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 15px;
      font-weight: 600;
    }

    .tables-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
    }

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

    .side-card {
      border-radius: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: box-shadow 0.2s ease;
    }

    .left-side {
      background: #eff6ff;
      border: 1.5px solid #93c5fd;
    }

    .right-side {
      background: #ecfdf5;
      border: 1.5px solid #6ee7b7;
    }

    .side-header {
      font-size: 13.5px;
      font-weight: 700;
      text-align: center;
      padding-bottom: 4px;
      border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
    }

    .left-side .side-header { color: #1d4ed8; }
    .right-side .side-header { color: #047857; }

    .num-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }

    .num-table th {
      font-weight: 600;
      color: #64748b;
      padding: 4px 6px;
      text-align: center;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      font-size: 12px;
    }

    .num-table td {
      padding: 5px 6px;
      text-align: center;
      font-variant-numeric: tabular-nums;
      font-size: 13px;
    }

    .num-table tr:nth-child(even) td {
      background: rgba(255, 255, 255, 0.5);
    }

    .row-highlight {
      font-weight: 700;
    }

    .left-side .row-highlight { color: #1e40af; }
    .right-side .row-highlight { color: #065f46; }

    .arrow-container {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 2px 0;
    }

    .arrow-svg {
      width: 20px;
      height: 18px;
    }

    .limit-box {
      border-radius: 6px;
      padding: 8px 6px;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .left-side .limit-box {
      background: #1e40af;
      color: #ffffff;
    }

    .right-side .limit-box {
      background: #047857;
      color: #ffffff;
    }

    .conclusion-banner {
      background: #fff1f2;
      border: 1.5px solid #fda4af;
      border-radius: 8px;
      padding: 8px 12px;
      text-align: center;
      font-size: 13.5px;
      font-weight: 700;
      color: #be123c;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
    }

    .conclusion-dne {
      font-size: 14.5px;
      color: #9f1239;
    }
  </style>
</head>
<body>

  <div class="header-formula">
    <div class="formula-badge">
      <span id="fx-math"></span>
    </div>
  </div>

  <div class="tables-container">
    
    <div class="side-card left-side">
      <div class="side-header">
        Left-Hand (Approaching 3 from below)
      </div>
      <table class="num-table">
        <thead>
          <tr>
            <th><span id="x-col-left">x</span></th>
            <th><span id="fx-col-left">f(x)</span></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2.9</td>
            <td class="row-highlight">-1.0</td>
          </tr>
          <tr>
            <td>2.99</td>
            <td class="row-highlight">-1.0</td>
          </tr>
          <tr>
            <td>2.999</td>
            <td class="row-highlight">-1.0</td>
          </tr>
        </tbody>
      </table>
      <div class="arrow-container">
        <svg class="arrow-svg" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <line x1="12" y1="3" x2="12" y2="19"></line>
          <polyline points="18 13 12 19 6 13"></polyline>
        </svg>
      </div>
      <div class="limit-box">
        <span id="lim-left"></span>
      </div>
    </div>

    
    <div class="side-card right-side">
      <div class="side-header">
        Right-Hand (Approaching 3 from above)
      </div>
      <table class="num-table">
        <thead>
          <tr>
            <th><span id="x-col-right">x</span></th>
            <th><span id="fx-col-right">f(x)</span></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>3.1</td>
            <td class="row-highlight">+1.0</td>
          </tr>
          <tr>
            <td>3.01</td>
            <td class="row-highlight">+1.0</td>
          </tr>
          <tr>
            <td>3.001</td>
            <td class="row-highlight">+1.0</td>
          </tr>
        </tbody>
      </table>
      <div class="arrow-container">
        <svg class="arrow-svg" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <line x1="12" y1="3" x2="12" y2="19"></line>
          <polyline points="18 13 12 19 6 13"></polyline>
        </svg>
      </div>
      <div class="limit-box">
        <span id="lim-right"></span>
      </div>
    </div>
  </div>

  <div class="conclusion-banner">
    <div>Left (-1) ≠ Right (+1)</div>
    <div class="conclusion-dne" id="conclusion-math"></div>
  </div>

  <script>
    function renderMath() {
      if (typeof katex !== 'undefined') {
        katex.render("f(x) = \\frac{|x - 3|}{x - 3}", document.getElementById('fx-math'), { throwOnError: false });
        katex.render("x < 3", document.getElementById('x-col-left'), { throwOnError: false });
        katex.render("f(x)", document.getElementById('fx-col-left'), { throwOnError: false });
        katex.render("x > 3", document.getElementById('x-col-right'), { throwOnError: false });
        katex.render("f(x)", document.getElementById('fx-col-right'), { throwOnError: false });
        katex.render("\\lim_{x \\to 3^-} f(x) = -1", document.getElementById('lim-left'), { throwOnError: false });
        katex.render("\\lim_{x \\to 3^+} f(x) = +1", document.getElementById('lim-right'), { throwOnError: false });
        katex.render("\\implies \\lim_{x \\to 3} f(x) \\text{ Does Not Exist (DNE)}", document.getElementById('conclusion-math'), { throwOnError: false });
      } else {
        document.getElementById('fx-math').textContent = "f(x) = |x - 3| / (x - 3)";
        document.getElementById('x-col-left').textContent = "x < 3";
        document.getElementById('fx-col-left').textContent = "f(x)";
        document.getElementById('x-col-right').textContent = "x > 3";
        document.getElementById('fx-col-right').textContent = "f(x)";
        document.getElementById('lim-left').textContent = "lim (x → 3⁻) f(x) = -1";
        document.getElementById('lim-right').textContent = "lim (x → 3⁺) f(x) = +1";
        document.getElementById('conclusion-math').textContent = "→ lim (x → 3) f(x) Does Not Exist (DNE)";
      }
    }

    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', renderMath);
    } else {
      renderMath();
    }
  </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>Evaluating One-Sided Limits with Absolute Values</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      color: #0f172a;
      background: #f8fafc;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
      min-height: 100vh;
    }

    /* Target / Header bar */
    .target-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 16px;
      width: 100%;
      max-width: 540px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .badge {
      background: #1d4ed8;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 6px;
      text-transform: uppercase;
      letter-spacing: 0.6px;
    }

    /* Math typography */
    .math {
      font-family: 'Cambria Math', 'Times New Roman', Cambria, STIXGeneral, serif;
      font-size: 1.15rem;
      color: #0f172a;
      display: inline-flex;
      align-items: center;
      vertical-align: middle;
      white-space: nowrap;
    }

    .math var, .math i {
      font-style: italic;
      font-family: 'Cambria Math', 'Times New Roman', Cambria, STIXGeneral, serif;
    }

    .lim-block {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      line-height: 1;
      margin-right: 4px;
      font-size: 0.95em;
    }

    .lim-block .lim-sub {
      font-size: 0.68em;
      margin-top: 2px;
    }

    .frac {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      padding: 0 4px;
      font-size: 0.95em;
      line-height: 1.1;
    }

    .frac .num {
      border-bottom: 1.5px solid currentColor;
      padding-bottom: 2px;
    }

    .frac .denom {
      padding-top: 2px;
    }

    /* Navigation tabs */
    .nav-tabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      width: 100%;
      max-width: 540px;
    }

    .tab-btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      padding: 8px 4px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      text-align: center;
      line-height: 1.2;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    .tab-btn .tab-step {
      font-size: 10px;
      text-transform: uppercase;
      color: #64748b;
    }

    .tab-btn:hover {
      border-color: #2563eb;
      background: #f1f5f9;
    }

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

    .tab-btn.active .tab-step {
      color: #2563eb;
      font-weight: 800;
    }

    /* Stage content */
    .stage-container {
      position: relative;
      width: 100%;
      max-width: 540px;
      height: 240px;
    }

    .step-card {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 12px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.25s ease, visibility 0.25s ease;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }

    .step-card.active {
      opacity: 1;
      visibility: visible;
      z-index: 2;
    }

    .step-header {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f1f5f9;
      padding-bottom: 8px;
    }

    .step-title {
      font-size: 14px;
      font-weight: 700;
      color: #1e293b;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .step-tag {
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 800;
      background: #e2e8f0;
      color: #1e293b;
    }

    .step-body {
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      text-align: center;
      padding: 6px 0;
    }

    .explanation-text {
      font-size: 13px;
      font-weight: 500;
      color: #334155;
      line-height: 1.4;
    }

    .math-box {
      font-size: 1.15rem;
      padding: 10px 16px;
      border-radius: 8px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 480px;
    }

    .highlight-blue {
      background: #eff6ff;
      border-color: #93c5fd;
      color: #1e40af;
    }

    .highlight-red {
      background: #fef2f2;
      border-color: #fca5a5;
      color: #991b1b;
    }

    .highlight-green {
      background: #f0fdf4;
      border-color: #86efac;
      color: #166534;
    }

    /* Step 1 Piecewise formatting */
    .piecewise {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 1.05rem;
    }

    .piecewise-brace {
      font-size: 2.4rem;
      font-weight: 300;
      line-height: 0.9;
      color: #1e293b;
      margin-right: -2px;
    }

    .piecewise-cases {
      display: flex;
      flex-direction: column;
      gap: 4px;
      text-align: left;
    }

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

    .case-cond {
      font-size: 0.85em;
      color: #475569;
      font-family: system-ui, sans-serif;
    }

    /* Comparison grid for Step 4 */
    .contrast-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
      max-width: 490px;
    }

    .contrast-card {
      padding: 10px 8px;
      border-radius: 8px;
      border: 1.5px solid #cbd5e1;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 6px;
      justify-content: center;
      align-items: center;
    }

    .contrast-heading {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

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

    .ctrl-btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      padding: 7px 16px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 700;
      color: #1e293b;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background 0.15s, border-color 0.15s;
    }

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

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

    /* Responsive adjustments */
    @media (max-width: 480px) {
      body {
        padding: 8px;
        gap: 8px;
      }
      .target-bar {
        padding: 6px 10px;
        font-size: 0.95rem;
      }
      .stage-container {
        height: 270px;
      }
      .math {
        font-size: 1.02rem;
      }
      .tab-btn {
        padding: 6px 2px;
        font-size: 11px;
      }
      .contrast-grid {
        grid-template-columns: 1fr;
        gap: 6px;
      }
      .contrast-card {
        padding: 6px;
      }
    }
  </style>
</head>
<body>

  
  <div class="target-bar">
    <span class="badge">Problem</span>
    <div class="math">
      <span class="lim-block">
        <span>lim</span>
        <span class="lim-sub"><var>x</var> → 4<sup>−</sup></span>
      </span>
      <span class="frac">
        <span class="num"><var>x</var> − 4</span>
        <span class="denom">|<var>x</var> − 4|</span>
      </span>
      <span style="margin-left: 6px;">= <strong>?</strong></span>
    </div>
  </div>

  
  <div class="nav-tabs" role="tablist">
    <button class="tab-btn active" id="tab-0" role="tab" aria-selected="true" aria-controls="step-0">
      <span class="tab-step">Step 1</span>
      <span>Definition</span>
    </button>
    <button class="tab-btn" id="tab-1" role="tab" aria-selected="false" aria-controls="step-1">
      <span class="tab-step">Step 2</span>
      <span>Sign Analysis</span>
    </button>
    <button class="tab-btn" id="tab-2" role="tab" aria-selected="false" aria-controls="step-2">
      <span class="tab-step">Step 3</span>
      <span>Evaluate Left</span>
    </button>
    <button class="tab-btn" id="tab-3" role="tab" aria-selected="false" aria-controls="step-3">
      <span class="tab-step">Step 4</span>
      <span>Compare Right</span>
    </button>
  </div>

  
  <div class="stage-container">
    
    
    <div class="step-card active" id="step-0" role="tabpanel">
      <div class="step-header">
        <div class="step-title">
          <span class="step-tag">Step 1</span> Absolute Value Rule
        </div>
      </div>
      <div class="step-body">
        <p class="explanation-text">Recall the piecewise definition of the absolute value function:</p>
        <div class="math-box highlight-blue">
          <div class="math piecewise">
            <span>|<var>u</var>| = </span>
            <span class="piecewise-brace">{</span>
            <div class="piecewise-cases">
              <div class="case-row">
                <span>+<var>u</var></span>
                <span class="case-cond">if <var>u</var> ≥ 0</span>
              </div>
              <div class="case-row">
                <span>−(<var>u</var>)</span>
                <span class="case-cond">if <var>u</var> &lt; 0</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="step-card" id="step-1" role="tabpanel">
      <div class="step-header">
        <div class="step-title">
          <span class="step-tag">Step 2</span> Sign Analysis (<span class="math" style="font-size: 0.9em;"><var>x</var> → 4<sup>−</sup></span>)
        </div>
      </div>
      <div class="step-body">
        <p class="explanation-text">As <var>x</var> approaches 4 from the left, values are strictly less than 4:</p>
        <div class="math-box highlight-red">
          <div class="math">
            <var>x</var> → 4<sup>−</sup> &nbsp;⟹&nbsp; <var>x</var> &lt; 4 &nbsp;⟹&nbsp; (<var>x</var> − 4) &lt; 0
          </div>
          <div class="math" style="font-weight: bold; margin-top: 4px;">
            ∴ |<var>x</var> − 4| = −(<var>x</var> − 4)
          </div>
        </div>
      </div>
    </div>

    
    <div class="step-card" id="step-2" role="tabpanel">
      <div class="step-header">
        <div class="step-title">
          <span class="step-tag">Step 3</span> Substitute & Cancel
        </div>
      </div>
      <div class="step-body">
        <p class="explanation-text">Replace |<var>x</var> − 4| with −(<var>x</var> − 4) and simplify:</p>
        <div class="math-box highlight-blue">
          <div class="math">
            <span class="lim-block">
              <span>lim</span>
              <span class="lim-sub"><var>x</var> → 4<sup>−</sup></span>
            </span>
            <span class="frac">
              <span class="num"><var>x</var> − 4</span>
              <span class="denom">−(<var>x</var> − 4)</span>
            </span>
            <span>&nbsp;=&nbsp;</span>
            <span class="lim-block">
              <span>lim</span>
              <span class="lim-sub"><var>x</var> → 4<sup>−</sup></span>
            </span>
            <span>(−1)&nbsp;=&nbsp;</span>
            <strong style="color: #1d4ed8; font-size: 1.25em;">−1</strong>
          </div>
        </div>
      </div>
    </div>

    
    <div class="step-card" id="step-3" role="tabpanel">
      <div class="step-header">
        <div class="step-title">
          <span class="step-tag">Step 4</span> One-Sided Comparison
        </div>
      </div>
      <div class="step-body">
        <div class="contrast-grid">
          <div class="contrast-card highlight-red">
            <div class="contrast-heading" style="color: #991b1b;">Left-Hand Limit (<var>x</var> &lt; 4)</div>
            <div class="math" style="font-size: 0.98rem;">
              <span class="lim-block">
                <span>lim</span>
                <span class="lim-sub"><var>x</var> → 4<sup>−</sup></span>
              </span>
              <span class="frac">
                <span class="num"><var>x</var> − 4</span>
                <span class="denom">−(<var>x</var> − 4)</span>
              </span>
              <span>&nbsp;=&nbsp;<strong>−1</strong></span>
            </div>
          </div>
          <div class="contrast-card highlight-green">
            <div class="contrast-heading" style="color: #166534;">Right-Hand Limit (<var>x</var> &gt; 4)</div>
            <div class="math" style="font-size: 0.98rem;">
              <span class="lim-block">
                <span>lim</span>
                <span class="lim-sub"><var>x</var> → 4<sup>+</sup></span>
              </span>
              <span class="frac">
                <span class="num"><var>x</var> − 4</span>
                <span class="denom">+(<var>x</var> − 4)</span>
              </span>
              <span>&nbsp;=&nbsp;<strong>+1</strong></span>
            </div>
          </div>
        </div>
        <p class="explanation-text" style="font-size: 12px; color: #475569;">
          Since left limit (−1) ≠ right limit (+1), the two-sided limit does not exist (DNE).
        </p>
      </div>
    </div>

  </div>

  
  <div class="controls">
    <button class="ctrl-btn" id="prevBtn" aria-label="Previous step">← Prev</button>
    <button class="ctrl-btn" id="playBtn" aria-label="Toggle autoplay">⏸ Pause</button>
    <button class="ctrl-btn" id="nextBtn" aria-label="Next step">Next →</button>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const stepCards = [0, 1, 2, 3].map(i => document.getElementById(`step-${i}`));
      const tabs = [0, 1, 2, 3].map(i => document.getElementById(`tab-${i}`));
      const playBtn = document.getElementById('playBtn');
      let currentIdx = 0;
      let isPlaying = true;
      let timer = null;

      function showStep(idx) {
        currentIdx = (idx + 4) % 4;
        stepCards.forEach((card, i) => {
          const isActive = (i === currentIdx);
          card.classList.toggle('active', isActive);
        });
        tabs.forEach((tab, i) => {
          const isActive = (i === currentIdx);
          tab.classList.toggle('active', isActive);
          tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
        });
      }

      function startTimer() {
        stopTimer();
        timer = setInterval(() => {
          showStep(currentIdx + 1);
        }, 4500);
      }

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

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

      tabs.forEach((tab, i) => {
        tab.addEventListener('click', () => {
          showStep(i);
          if (isPlaying) startTimer();
        });
      });

      document.getElementById('prevBtn').addEventListener('click', () => {
        showStep(currentIdx - 1);
        if (isPlaying) startTimer();
      });

      document.getElementById('nextBtn').addEventListener('click', () => {
        showStep(currentIdx + 1);
        if (isPlaying) startTimer();
      });

      playBtn.addEventListener('click', togglePlay);

      // Start autoplay
      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>One-Sided Limits at a Vertical Asymptote</title>
  <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: #1e293b;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* Header & Controls */
    .header {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      text-align: center;
    }
    .title-row {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
    }
    .title-row span.func {
      font-family: "Cambria Math", "Times New Roman", serif;
      font-style: italic;
      color: #2563eb;
    }

    .toggles {
      display: flex;
      gap: 6px;
      background: #f1f5f9;
      padding: 3px;
      border-radius: 8px;
    }
    .toggle-btn {
      border: none;
      background: transparent;
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .toggle-btn.active {
      background: #ffffff;
      color: #0f172a;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .toggle-btn:focus-visible {
      outline: 2px solid #2563eb;
    }

    /* Main Split Layout */
    .main-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      align-items: stretch;
    }

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

    /* Left Column: Graph */
    .graph-container {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 6px;
    }
    svg {
      width: 100%;
      height: 100%;
      min-height: 250px;
      overflow: visible;
    }

    .curve-left {
      stroke: #2563eb;
      stroke-width: 2.5;
      fill: none;
      transition: opacity 0.3s ease, stroke-width 0.3s ease;
    }
    .curve-right {
      stroke: #059669;
      stroke-width: 2.5;
      fill: none;
      transition: opacity 0.3s ease, stroke-width 0.3s ease;
    }
    .asymptote-va {
      stroke: #ef4444;
      stroke-width: 2;
      stroke-dasharray: 4 4;
    }
    .asymptote-ha {
      stroke: #94a3b8;
      stroke-width: 1.5;
      stroke-dasharray: 3 3;
    }
    .axis {
      stroke: #cbd5e1;
      stroke-width: 1.2;
    }
    .grid-line {
      stroke: #f1f5f9;
      stroke-width: 1;
    }
    .axis-label {
      font-size: 10px;
      fill: #64748b;
      font-weight: 500;
    }

    .probe-point {
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    }

    /* Right Column: Sign Analysis */
    .analysis-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
      justify-content: center;
    }

    .panel {
      border-radius: 8px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      border: 1.5px solid transparent;
      transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    }

    .panel-left {
      background: #eff6ff;
      border-color: #bfdbfe;
    }
    .panel-right {
      background: #ecfdf5;
      border-color: #a7f3d0;
    }

    .panel.dimmed {
      opacity: 0.35;
      filter: grayscale(30%);
    }

    .panel-title {
      font-size: 13px;
      font-weight: 700;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .panel-left .panel-title { color: #1d4ed8; }
    .panel-right .panel-title { color: #047857; }

    .step-box {
      font-size: 12px;
      background: rgba(255, 255, 255, 0.85);
      border-radius: 5px;
      padding: 5px 8px;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .math-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: "Cambria Math", "Times New Roman", serif;
      font-size: 13px;
    }
    .sign-pos { color: #2563eb; font-weight: 700; }
    .sign-neg { color: #dc2626; font-weight: 700; }
    .sign-emerald { color: #059669; font-weight: 700; }

    .result-pill {
      font-size: 13px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 6px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .panel-left .result-pill {
      background: #dbeafe;
      color: #1e40af;
    }
    .panel-right .result-pill {
      background: #d1fae5;
      color: #065f46;
    }

    .math-sym {
      font-family: "Cambria Math", "Times New Roman", serif;
      font-style: italic;
    }
    .fraction {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      padding: 0 2px;
    }
    .fraction .num {
      border-bottom: 1px solid currentColor;
      padding-bottom: 1px;
      line-height: 1.1;
    }
    .fraction .den {
      line-height: 1.1;
      padding-top: 1px;
    }
  </style>
</head>
<body>

  
  <div class="header">
    <div class="title-row">
      Analyzing <span class="math-sym">f(x)</span> = 
      <span class="fraction">
        <span class="num">2<span class="math-sym">x</span> + 1</span>
        <span class="den"><span class="math-sym">x</span> − 3</span>
      </span>
      Near Vertical Asymptote <span class="math-sym">x</span> = 3
    </div>
    <div class="toggles" role="tablist" aria-label="Limit View Selectors">
      <button class="toggle-btn" id="btnLeft" onclick="setView('left')">Left (x → 3⁻)</button>
      <button class="toggle-btn" id="btnRight" onclick="setView('right')">Right (x → 3⁺)</button>
      <button class="toggle-btn active" id="btnBoth" onclick="setView('both')">Compare Both</button>
    </div>
  </div>

  
  <div class="main-grid">
    
    <div class="graph-container">
      <svg id="plotSvg" viewBox="0 0 320 280">
        <defs>
          
          <marker id="arrow-blue" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
            <path d="M 0 0 L 6 3 L 0 6 z" fill="#2563eb"/>
          </marker>
          <marker id="arrow-green" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
            <path d="M 0 0 L 6 3 L 0 6 z" fill="#059669"/>
          </marker>
        </defs>

        
        
        
        
        <line x1="20" y1="140" x2="300" y2="140" class="axis" />
        <line x1="76" y1="20" x2="76" y2="260" class="axis" />

        
        
        
        <text x="160" y="152" class="axis-label" text-anchor="middle" font-weight="700" fill="#ef4444">3</text>
        <text x="76" y="152" class="axis-label" text-anchor="middle">0</text>
        <text x="244" y="152" class="axis-label" text-anchor="middle">6</text>
        <text x="296" y="136" class="axis-label" text-anchor="end">x</text>
        <text x="70" y="30" class="axis-label" text-anchor="end">y</text>

        
        <line x1="20" y1="124" x2="300" y2="124" class="asymptote-ha" />
        <text x="298" y="120" class="axis-label" fill="#94a3b8" text-anchor="end">y = 2</text>

        
        <line x1="160" y1="15" x2="160" y2="265" class="asymptote-va" id="vaLine" />
        <text x="164" y="26" class="axis-label" fill="#ef4444" font-weight="700">x = 3</text>

        
        <path id="pathLeft" class="curve-left" d="" />
        <path id="pathRight" class="curve-right" d="" />

        
        
        
        <g id="probeLeftGroup">
          <line x1="152" y1="140" x2="152" y2="245" stroke="#2563eb" stroke-dasharray="2 2" stroke-width="1" />
          <circle cx="152" cy="245" r="4" fill="#2563eb" />
          <path d="M 144 180 L 152 235" stroke="#2563eb" stroke-width="1.5" marker-end="url(#arrow-blue)" fill="none"/>
          <text x="148" y="260" font-size="9" fill="#2563eb" font-weight="700" text-anchor="end">x = 2.99 → −∞</text>
        </g>

        
        <g id="probeRightGroup">
          <line x1="168" y1="140" x2="168" y2="35" stroke="#059669" stroke-dasharray="2 2" stroke-width="1" />
          <circle cx="168" cy="35" r="4" fill="#059669" />
          <path d="M 176 100 L 168 45" stroke="#059669" stroke-width="1.5" marker-end="url(#arrow-green)" fill="none"/>
          <text x="172" y="32" font-size="9" fill="#059669" font-weight="700" text-anchor="start">x = 3.01 → +∞</text>
        </g>
      </svg>
    </div>

    
    <div class="analysis-container">
      
      <div class="panel panel-left" id="panelLeft">
        <div class="panel-title">
          <span>Left-Hand Approach: <span class="math-sym">x → 3⁻</span></span>
          <span style="font-size: 11px; font-weight: 500;">(x < 3)</span>
        </div>
        <div class="step-box">
          <div>Test value slightly less than 3: <strong>x = 2.99</strong></div>
          <div class="math-row">
            <span>Numerator: 2(2.99) + 1 = +6.98</span>
            <span class="sign-pos">(+ Positive)</span>
          </div>
          <div class="math-row">
            <span>Denominator: 2.99 − 3 = −0.01</span>
            <span class="sign-neg">(− Tiny Neg)</span>
          </div>
        </div>
        <div class="result-pill">
          <span>lim<sub style="font-size:9px">x→3⁻</sub> f(x) =</span>
          <span><span class="sign-pos">+</span> / <span class="sign-neg">−0</span> = <strong>−∞</strong></span>
        </div>
      </div>

      
      <div class="panel panel-right" id="panelRight">
        <div class="panel-title">
          <span>Right-Hand Approach: <span class="math-sym">x → 3⁺</span></span>
          <span style="font-size: 11px; font-weight: 500;">(x > 3)</span>
        </div>
        <div class="step-box">
          <div>Test value slightly greater than 3: <strong>x = 3.01</strong></div>
          <div class="math-row">
            <span>Numerator: 2(3.01) + 1 = +7.02</span>
            <span class="sign-emerald">(+ Positive)</span>
          </div>
          <div class="math-row">
            <span>Denominator: 3.01 − 3 = +0.01</span>
            <span class="sign-emerald">(+ Tiny Pos)</span>
          </div>
        </div>
        <div class="result-pill">
          <span>lim<sub style="font-size:9px">x→3⁺</sub> f(x) =</span>
          <span><span class="sign-emerald">+</span> / <span class="sign-emerald">+0</span> = <strong>+∞</strong></span>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Coordinate mapping functions
    // Domain: x in [-2, 8], Range: y in [-15, 15]
    // SVG width: 320, height: 280. Margins: x in [20, 300], y in [20, 260]
    function toSvgX(x) {
      return 20 + ((x - (-2)) / 10) * 280;
    }
    function toSvgY(y) {
      return 20 + ((15 - y) / 30) * 240;
    }
    function f(x) {
      return (2 * x + 1) / (x - 3);
    }

    function buildPaths() {
      // Left branch: x from -2 to 2.85
      let dLeft = "";
      for (let x = -2; x <= 2.85; x += 0.05) {
        const y = Math.max(-15, Math.min(15, f(x)));
        const sx = toSvgX(x).toFixed(1);
        const sy = toSvgY(y).toFixed(1);
        dLeft += (dLeft === "" ? `M ${sx} ${sy}` : ` L ${sx} ${sy}`);
      }
      document.getElementById('pathLeft').setAttribute('d', dLeft);

      // Right branch: x from 3.15 to 8
      let dRight = "";
      for (let x = 3.15; x <= 8; x += 0.05) {
        const y = Math.max(-15, Math.min(15, f(x)));
        const sx = toSvgX(x).toFixed(1);
        const sy = toSvgY(y).toFixed(1);
        dRight += (dRight === "" ? `M ${sx} ${sy}` : ` L ${sx} ${sy}`);
      }
      document.getElementById('pathRight').setAttribute('d', dRight);
    }

    buildPaths();

    // Interaction State
    function setView(mode) {
      // Buttons
      document.getElementById('btnLeft').classList.toggle('active', mode === 'left');
      document.getElementById('btnRight').classList.toggle('active', mode === 'right');
      document.getElementById('btnBoth').classList.toggle('active', mode === 'both');

      // Panels
      const pLeft = document.getElementById('panelLeft');
      const pRight = document.getElementById('panelRight');
      const probeLeft = document.getElementById('probeLeftGroup');
      const probeRight = document.getElementById('probeRightGroup');
      const pathLeft = document.getElementById('pathLeft');
      const pathRight = document.getElementById('pathRight');

      if (mode === 'left') {
        pLeft.classList.remove('dimmed');
        pRight.classList.add('dimmed');
        probeLeft.style.opacity = '1';
        probeRight.style.opacity = '0.15';
        pathLeft.style.opacity = '1';
        pathLeft.style.strokeWidth = '3.5';
        pathRight.style.opacity = '0.25';
        pathRight.style.strokeWidth = '1.8';
      } else if (mode === 'right') {
        pLeft.classList.add('dimmed');
        pRight.classList.remove('dimmed');
        probeLeft.style.opacity = '0.15';
        probeRight.style.opacity = '1';
        pathLeft.style.opacity = '0.25';
        pathLeft.style.strokeWidth = '1.8';
        pathRight.style.opacity = '1';
        pathRight.style.strokeWidth = '3.5';
      } else {
        pLeft.classList.remove('dimmed');
        pRight.classList.remove('dimmed');
        probeLeft.style.opacity = '1';
        probeRight.style.opacity = '1';
        pathLeft.style.opacity = '1';
        pathLeft.style.strokeWidth = '2.5';
        pathRight.style.opacity = '1';
        pathRight.style.strokeWidth = '2.5';
      }
    }
  </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: #f8f9fa;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Math typography */
    .math {
      font-family: "Cambria Math", "STIX Two Math", Georgia, "Times New Roman", serif;
      letter-spacing: 0.02em;
    }
    .math i {
      font-style: italic;
      font-family: "Cambria Math", "STIX Two Math", Georgia, serif;
    }
    .lim-wrap {
      display: inline-inline-flex;
      display: inline-flex;
      flex-direction: column;
      vertical-align: -0.38em;
      text-align: center;
      line-height: 1;
      margin-right: 3px;
    }
    .lim-op {
      font-family: system-ui, -apple-system, sans-serif;
      font-size: 0.95em;
      font-weight: 700;
    }
    .lim-sub {
      font-size: 0.65em;
      font-family: "Cambria Math", Georgia, serif;
      margin-top: 2px;
      color: inherit;
    }

    /* Cards Grid */
    .grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .card-box {
      background: #ffffff;
      border-radius: 10px;
      padding: 10px 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      border: 1.5px solid transparent;
    }

    .card-left { border-color: rgba(2, 132, 199, 0.3); }
    .card-right { border-color: rgba(5, 150, 105, 0.3); }

    .tag {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 6px;
      margin-bottom: 6px;
    }
    .tag-blue { background: #e0f2fe; color: #0284c7; }
    .tag-emerald { background: #d1fae5; color: #059669; }

    .math-eq {
      font-size: 18px;
      min-height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 4px;
      color: #0f172a;
    }

    .sub-cue {
      font-size: 11.5px;
      color: #64748b;
      font-weight: 500;
      line-height: 1.2;
    }

    /* Interactive Graph / Visualizer */
    .vis-card {
      background: #ffffff;
      border-radius: 10px;
      padding: 10px 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .toggle-row {
      display: flex;
      justify-content: center;
      gap: 8px;
    }

    .btn-case {
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 12.5px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #475569;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }

    .btn-case.active {
      background: #1e293b;
      color: #ffffff;
      border-color: #1e293b;
      box-shadow: 0 2px 4px rgba(30, 41, 59, 0.2);
    }

    .canvas-container {
      position: relative;
      width: 100%;
      height: 115px;
      background: #f8fafc;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
    }

    svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    /* Bottom Theorem */
    .theorem-card {
      background: #ffffff;
      border-radius: 10px;
      padding: 10px 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      border-left: 4px solid #6366f1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }

    .theorem-info {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 210px;
      flex: 1;
    }

    .theorem-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #6366f1;
    }

    .theorem-math {
      font-size: 14.5px;
      color: #0f172a;
      line-height: 1.4;
    }

    .status-pill {
      font-size: 12px;
      font-weight: 700;
      padding: 5px 10px;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
    }
    .status-ok { background: #dcfce7; color: #15803d; }
    .status-dne { background: #fee2e2; color: #b91c1c; }

    @media (max-width: 480px) {
      body { padding: 8px; gap: 8px; }
      .grid-2 { grid-template-columns: 1fr; gap: 6px; }
      .math-eq { font-size: 16px; min-height: 28px; }
      .theorem-card { flex-direction: column; align-items: flex-start; }
      .theorem-math { font-size: 13.5px; }
      .btn-case { padding: 5px 10px; font-size: 11.5px; }
      .canvas-container { height: 105px; }
    }
  </style>
</head>
<body>

  
  <div class="grid-2">
    <div class="card-box card-left">
      <span class="tag tag-blue">Left-Hand Limit</span>
      <div class="math-eq math">
        <span class="lim-wrap"><span class="lim-op">lim</span><span class="lim-sub"><i>x</i> → <i>c</i><sup>−</sup></span></span>
        <i>f</i>(<i>x</i>) = <i>L</i>₁
      </div>
      <div class="sub-cue">Approaching from values &lt; <i>c</i></div>
    </div>
    <div class="card-box card-right">
      <span class="tag tag-emerald">Right-Hand Limit</span>
      <div class="math-eq math">
        <span class="lim-wrap"><span class="lim-op">lim</span><span class="lim-sub"><i>x</i> → <i>c</i><sup>+</sup></span></span>
        <i>f</i>(<i>x</i>) = <i>L</i>₂
      </div>
      <div class="sub-cue">Approaching from values &gt; <i>c</i></div>
    </div>
  </div>

  
  <div class="vis-card">
    <div class="toggle-row">
      <button class="btn-case active" id="btn-equal" onclick="setScenario(true)">
        Equal: <i>L</i>₁ = <i>L</i>₂
      </button>
      <button class="btn-case" id="btn-unequal" onclick="setScenario(false)">
        Unequal: <i>L</i>₁ ≠ <i>L</i>₂
      </button>
    </div>

    <div class="canvas-container">
      <svg viewBox="0 0 400 110" preserveAspectRatio="xMidYMid meet">
        
        <line x1="30" y1="95" x2="370" y2="95" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="2 2" />
        <line x1="200" y1="12" x2="200" y2="95" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3" />
        <text x="200" y="106" font-size="11" font-weight="700" fill="#64748b" text-anchor="middle" font-family="system-ui, sans-serif">x = c</text>

        
        <path id="path-left" d="M 40 75 Q 120 70 195 55" fill="none" stroke="#0284c7" stroke-width="3" stroke-linecap="round" />
        
        <circle id="dot-left" cx="195" cy="55" r="4.5" fill="#ffffff" stroke="#0284c7" stroke-width="2.5" />
        
        <text id="lbl-left" x="182" y="48" font-size="12" font-weight="700" fill="#0284c7" text-anchor="end" font-family="Georgia, serif">L₁</text>

        
        <path d="M 120 74 L 142 70" stroke="#0284c7" stroke-width="2" marker-end="url(#arr-blue)" />

        
        <path id="path-right" d="M 205 55 Q 280 40 360 30" fill="none" stroke="#059669" stroke-width="3" stroke-linecap="round" />
        
        <circle id="dot-right" cx="205" cy="55" r="4.5" fill="#ffffff" stroke="#059669" stroke-width="2.5" />
        
        <text id="lbl-right" x="218" y="48" font-size="12" font-weight="700" fill="#059669" text-anchor="start" font-family="Georgia, serif">L₂</text>

        
        <path id="arr-path-right" d="M 280 37 L 258 41" stroke="#059669" stroke-width="2" marker-end="url(#arr-green)" />

        <defs>
          <marker id="arr-blue" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
            <path d="M 0 1.5 L 7 5 L 0 8.5 z" fill="#0284c7"/>
          </marker>
          <marker id="arr-green" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
            <path d="M 0 1.5 L 7 5 L 0 8.5 z" fill="#059669"/>
          </marker>
        </defs>
      </svg>
    </div>
  </div>

  
  <div class="theorem-card">
    <div class="theorem-info">
      <span class="theorem-label">Two-Sided Limit Existence Theorem</span>
      <div class="theorem-math math">
        <span class="lim-wrap"><span class="lim-op">lim</span><span class="lim-sub"><i>x</i> → <i>c</i></span></span><i>f</i>(<i>x</i>) = <i>L</i>
        &nbsp;⟺&nbsp;
        <span class="lim-wrap"><span class="lim-op">lim</span><span class="lim-sub"><i>x</i> → <i>c</i><sup>−</sup></span></span><i>f</i>(<i>x</i>) = 
        <span class="lim-wrap"><span class="lim-op">lim</span><span class="lim-sub"><i>x</i> → <i>c</i><sup>+</sup></span></span><i>f</i>(<i>x</i>) = <i>L</i>
      </div>
    </div>
    <div id="status-badge" class="status-pill status-ok">
      ✓ Limit Exists (<i>L</i>₁ = <i>L</i>₂)
    </div>
  </div>

  <script>
    function setScenario(isEqual) {
      document.getElementById('btn-equal').classList.toggle('active', isEqual);
      document.getElementById('btn-unequal').classList.toggle('active', !isEqual);

      const pathRight = document.getElementById('path-right');
      const dotRight = document.getElementById('dot-right');
      const lblRight = document.getElementById('lbl-right');
      const arrRight = document.getElementById('arr-path-right');
      const statusBadge = document.getElementById('status-badge');

      if (isEqual) {
        // Continuous meeting at y = 55
        pathRight.setAttribute('d', 'M 205 55 Q 280 40 360 30');
        dotRight.setAttribute('cy', '55');
        lblRight.setAttribute('y', '48');
        arrRight.setAttribute('d', 'M 280 37 L 258 41');
        statusBadge.className = 'status-pill status-ok';
        statusBadge.innerHTML = '✓ Limit Exists (<i>L</i>₁ = <i>L</i>₂)';
      } else {
        // Disconnected jump: Right curve approaches y = 25
        pathRight.setAttribute('d', 'M 205 25 Q 280 20 360 15');
        dotRight.setAttribute('cy', '25');
        lblRight.setAttribute('y', '22');
        arrRight.setAttribute('d', 'M 280 18 L 258 20');
        statusBadge.className = 'status-pill status-dne';
        statusBadge.innerHTML = '✕ Does Not Exist (<i>L</i>₁ ≠ <i>L</i>₂)';
      }
    }
  </script>
</body>
</html>

OGM.13.FN.6

Aligned learning resources

Related diagrams