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

    .legend {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin-bottom: 8px;
      font-size: 13px;
      font-weight: 600;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 6px;
      background: #f8f9fa;
    }

    .line-icon {
      width: 16px;
      height: 3px;
      border-radius: 2px;
    }

    .dot-icon {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #10b981;
    }

    .svg-container {
      width: 100%;
      max-width: 440px;
      aspect-ratio: 11 / 10;
      position: relative;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .grid-line {
      stroke: #e5e7eb;
      stroke-width: 1;
    }

    .axis {
      stroke: #6b7280;
      stroke-width: 1.5;
    }

    .tick-label {
      font-size: 11px;
      fill: #9ca3af;
      text-anchor: middle;
      user-select: none;
    }

    .curve-parabola {
      fill: none;
      stroke: #ef4444;
      stroke-width: 3;
      stroke-linecap: round;
    }

    .curve-line {
      fill: none;
      stroke: #2563eb;
      stroke-width: 3;
      stroke-linecap: round;
    }

    .intersect-pulse {
      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      transform-origin: center;
    }

    @keyframes pulse {
      0%, 100% { r: 5px; opacity: 1; }
      50% { r: 9px; opacity: 0.4; }
    }

    .badge {
      font-size: 11px;
      font-weight: 700;
      paint-order: stroke;
      stroke: #ffffff;
      stroke-width: 3px;
      stroke-linejoin: round;
    }

    .badge-vertex { fill: #dc2626; }
    .badge-sol { fill: #059669; }
  </style>
</head>
<body>

  <div class="legend">
    <div class="legend-item">
      <span class="line-icon" style="background: #ef4444;"></span>
      <span>y = x² − 4x + 3</span>
    </div>
    <div class="legend-item">
      <span class="line-icon" style="background: #2563eb;"></span>
      <span>y = x − 1</span>
    </div>
    <div class="legend-item">
      <span class="dot-icon"></span>
      <span>Solutions</span>
    </div>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 440 400" aria-label="Coordinate system showing linear-quadratic intersections">
      
      
      <line class="grid-line" x1="40" y1="40" x2="40" y2="355" />
      <line class="grid-line" x1="85" y1="40" x2="85" y2="355" />
      <line class="grid-line" x1="175" y1="40" x2="175" y2="355" />
      <line class="grid-line" x1="220" y1="40" x2="220" y2="355" />
      <line class="grid-line" x1="265" y1="40" x2="265" y2="355" />
      <line class="grid-line" x1="310" y1="40" x2="310" y2="355" />
      <line class="grid-line" x1="355" y1="40" x2="355" y2="355" />
      <line class="grid-line" x1="400" y1="40" x2="400" y2="355" />

      
      <line class="grid-line" x1="40" y1="40" x2="400" y2="40" />
      <line class="grid-line" x1="40" y1="85" x2="400" y2="85" />
      <line class="grid-line" x1="40" y1="130" x2="400" y2="130" />
      <line class="grid-line" x1="40" y1="175" x2="400" y2="175" />
      <line class="grid-line" x1="40" y1="220" x2="400" y2="220" />
      <line class="grid-line" x1="40" y1="310" x2="400" y2="310" />
      <line class="grid-line" x1="40" y1="355" x2="400" y2="355" />

      
      <line class="axis" x1="40" y1="265" x2="415" y2="265" />
      <line class="axis" x1="130" y1="355" x2="130" y2="25" />

      
      <polygon points="415,262 422,265 415,268" fill="#6b7280" />
      <polygon points="127,25 130,18 133,25" fill="#6b7280" />

      
      <text class="tick-label" x="424" y="278" font-weight="bold">x</text>
      <text class="tick-label" x="120" y="20" font-weight="bold">y</text>

      
      <text class="tick-label" x="40" y="280">-2</text>
      <text class="tick-label" x="85" y="280">-1</text>
      <text class="tick-label" x="175" y="280">1</text>
      <text class="tick-label" x="220" y="280">2</text>
      <text class="tick-label" x="265" y="280">3</text>
      <text class="tick-label" x="310" y="280">4</text>
      <text class="tick-label" x="355" y="280">5</text>
      <text class="tick-label" x="400" y="280">6</text>

      
      <text class="tick-label" x="118" y="359">-2</text>
      <text class="tick-label" x="118" y="314">-1</text>
      <text class="tick-label" x="118" y="224">1</text>
      <text class="tick-label" x="118" y="179">2</text>
      <text class="tick-label" x="118" y="134">3</text>
      <text class="tick-label" x="118" y="89">4</text>
      <text class="tick-label" x="118" y="44">5</text>

      
      
      <path class="curve-parabola" d="M 109.75,40 Q 220,580 330.25,40" />

      
      
      <line class="curve-line" x1="85" y1="355" x2="400" y2="40" />

      
      <circle cx="220" cy="310" r="4.5" fill="#ef4444" stroke="#ffffff" stroke-width="1.5" />
      <text class="badge badge-vertex" x="220" y="328" text-anchor="middle">(2, -1)</text>

      
      <circle cx="130" cy="310" r="3.5" fill="#2563eb" />

      
      <circle class="intersect-pulse" cx="175" cy="265" r="7" fill="#10b981" />
      <circle cx="175" cy="265" r="5" fill="#10b981" stroke="#ffffff" stroke-width="2" />
      <text class="badge badge-sol" x="175" y="250" text-anchor="middle">(1, 0)</text>

      
      <circle class="intersect-pulse" cx="310" cy="130" r="7" fill="#10b981" />
      <circle cx="310" cy="130" r="5" fill="#10b981" stroke="#ffffff" stroke-width="2" />
      <text class="badge badge-sol" x="310" y="116" text-anchor="middle">(4, 3)</text>
    </svg>
  </div>

</body>
</html>

Solving Linear-Quadratic Systems 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="1:1">
  <title>Solving Linear-Quadratic Systems Graphically</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      padding: 8px;
    }

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

    .btn-toggle {
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #1e2945;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 6px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .btn-toggle:hover {
      background: #edf2f7;
    }

    .btn-toggle.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    .svg-wrap {
      width: 100%;
      max-width: 480px;
      height: auto;
      display: flex;
      justify-content: center;
      position: relative;
    }

    svg {
      width: 100%;
      height: auto;
      overflow: visible;
      user-select: none;
    }

    /* Animated pulse for intersections */
    @keyframes pulseRing {
      0% { r: 7px; opacity: 0.9; stroke-width: 3px; }
      50% { r: 15px; opacity: 0.3; stroke-width: 2px; }
      100% { r: 7px; opacity: 0.9; stroke-width: 3px; }
    }

    .pulsing-ring {
      animation: pulseRing 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      transform-origin: center;
    }

    .fade-elem {
      transition: opacity 0.3s ease;
    }

    .dimmed {
      opacity: 0.15;
    }

    .hidden {
      opacity: 0;
      pointer-events: none;
    }
  </style>
</head>
<body>

  <div class="controls" role="group" aria-label="System Components">
    <button class="btn-toggle active" id="btn-both">System</button>
    <button class="btn-toggle" id="btn-quad">y = x² − 4x + 3</button>
    <button class="btn-toggle" id="btn-lin">y = −x + 1</button>
    <button class="btn-toggle" id="btn-pts">Intersections</button>
  </div>

  <div class="svg-wrap">
    <svg viewBox="0 0 460 520" aria-label="Coordinate Graph of Linear-Quadratic System">
      <defs>
        
        <filter id="tagShadow" x="-10%" y="-10%" width="125%" height="125%">
          <feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#0f172a" flood-opacity="0.15" />
        </filter>
        
        <marker id="arr-blue" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
          <path d="M0,0 L6,3 L0,6 Z" fill="#2563eb" />
        </marker>
        <marker id="arr-orange" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
          <path d="M0,0 L6,3 L0,6 Z" fill="#ea580c" />
        </marker>
        <marker id="arr-axis" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
          <path d="M0,0 L6,3 L0,6 Z" fill="#64748b" />
        </marker>
      </defs>

      
      
      <g stroke="#e2e8f0" stroke-width="1.2">
        
        <line x1="20" y1="50" x2="20" y2="500" />
        <line x1="140" y1="50" x2="140" y2="500" />
        <line x1="200" y1="50" x2="200" y2="500" />
        <line x1="260" y1="50" x2="260" y2="500" />
        <line x1="320" y1="50" x2="320" y2="500" />
        <line x1="380" y1="50" x2="380" y2="500" />
        <line x1="440" y1="50" x2="440" y2="500" />

        
        <line x1="10" y1="70" x2="450" y2="70" />
        <line x1="10" y1="130" x2="450" y2="130" />
        <line x1="10" y1="190" x2="450" y2="190" />
        <line x1="10" y1="250" x2="450" y2="250" />
        <line x1="10" y1="310" x2="450" y2="310" />
        <line x1="10" y1="430" x2="450" y2="430" />
        <line x1="10" y1="490" x2="450" y2="490" />
      </g>

      
      <g stroke="#475569" stroke-width="2">
        
        <line x1="10" y1="370" x2="445" y2="370" marker-end="url(#arr-axis)" />
        
        <line x1="80" y1="505" x2="80" y2="55" marker-end="url(#arr-axis)" />
      </g>

      
      <g font-size="13" font-weight="600" fill="#64748b" text-anchor="middle">
        
        <text x="20" y="388">-1</text>
        <text x="140" y="388">1</text>
        <text x="200" y="388">2</text>
        <text x="260" y="388">3</text>
        <text x="320" y="388">4</text>
        <text x="380" y="388">5</text>
        <text x="445" y="362" fill="#1e2945" font-weight="700">x</text>

        
        <text x="66" y="494" text-anchor="end">-2</text>
        <text x="66" y="434" text-anchor="end">-1</text>
        <text x="66" y="314" text-anchor="end">1</text>
        <text x="66" y="254" text-anchor="end">2</text>
        <text x="66" y="194" text-anchor="end">3</text>
        <text x="66" y="134" text-anchor="end">4</text>
        <text x="66" y="74" text-anchor="end">5</text>
        <text x="94" y="62" fill="#1e2945" font-weight="700">y</text>
        <text x="68" y="386">0</text>
      </g>

      
      
      <g id="layer-quad" class="fade-elem">
        <path d="M 53.6 70.4 Q 200 790 346.4 70.4"
              fill="none" stroke="#2563eb" stroke-width="3.5" stroke-linecap="round" />

        
        <circle cx="80" cy="190" r="4.5" fill="#2563eb" />
        <circle cx="140" cy="370" r="4.5" fill="#2563eb" />
        <circle cx="200" cy="430" r="5" fill="#2563eb" />
        <circle cx="260" cy="370" r="4.5" fill="#2563eb" />
        <circle cx="320" cy="190" r="4.5" fill="#2563eb" />

        
        <g transform="translate(200, 452)">
          <rect x="-48" y="-12" width="96" height="22" rx="4" fill="#eff6ff" stroke="#bfdbfe" stroke-width="1" />
          <text x="0" y="3" font-size="12" font-weight="700" fill="#1d4ed8" text-anchor="middle">Vertex (2, -1)</text>
        </g>

        
        <g transform="translate(330, 105)">
          <text x="0" y="0" font-size="13" font-weight="700" fill="#2563eb">y = x² − 4x + 3</text>
        </g>
      </g>

      
      
      <g id="layer-lin" class="fade-elem">
        <line x1="8" y1="238" x2="256" y2="486" stroke="#ea580c" stroke-width="3.5" stroke-linecap="round" />
        
        
        <circle cx="80" cy="310" r="4.5" fill="#ea580c" />
        <circle cx="140" cy="370" r="4.5" fill="#ea580c" />
        <circle cx="200" cy="430" r="4.5" fill="#ea580c" />

        
        <g transform="translate(30, 222)">
          <text x="0" y="0" font-size="13" font-weight="700" fill="#ea580c">y = −x + 1</text>
        </g>
      </g>

      
      <g id="layer-pts" class="fade-elem">
        
        <g transform="translate(140, 370)">
          <circle cx="0" cy="0" r="8" fill="none" stroke="#ef4444" stroke-width="2.5" class="pulsing-ring" />
          <circle cx="0" cy="0" r="5" fill="#dc2626" stroke="#ffffff" stroke-width="2" />
        </g>

        
        <g transform="translate(140, 316)" filter="url(#tagShadow)">
          <path d="M 0 24 L -6 16 L -75 16 A 5 5 0 0 1 -80 11 L -80 -15 A 5 5 0 0 1 -75 -20 L 75 -20 A 5 5 0 0 1 80 -15 L 80 11 A 5 5 0 0 1 75 16 L 6 16 Z"
                fill="#ffffff" stroke="#dc2626" stroke-width="1.5" />
          <text x="0" y="-1" font-size="12" font-weight="800" fill="#dc2626" text-anchor="middle">Intersection 1: (1, 0)</text>
        </g>

        
        <g transform="translate(200, 430)">
          <circle cx="0" cy="0" r="8" fill="none" stroke="#ef4444" stroke-width="2.5" class="pulsing-ring" />
          <circle cx="0" cy="0" r="5" fill="#dc2626" stroke="#ffffff" stroke-width="2" />
        </g>

        
        <g transform="translate(305, 430)" filter="url(#tagShadow)">
          <path d="M -25 0 L -15 -6 L -15 -17 A 5 5 0 0 1 -10 -22 L 95 -22 A 5 5 0 0 1 100 -17 L 100 17 A 5 5 0 0 1 95 22 L -10 22 A 5 5 0 0 1 -15 17 L -15 6 Z"
                fill="#ffffff" stroke="#dc2626" stroke-width="1.5" />
          <text x="42" y="4" font-size="12" font-weight="800" fill="#dc2626" text-anchor="middle">Intersection 2: (2, -1)</text>
        </g>
      </g>
    </svg>
  </div>

  <script>
    const quad = document.getElementById('layer-quad');
    const lin = document.getElementById('layer-lin');
    const pts = document.getElementById('layer-pts');

    const btnBoth = document.getElementById('btn-both');
    const btnQuad = document.getElementById('btn-quad');
    const btnLin = document.getElementById('btn-lin');
    const btnPts = document.getElementById('btn-pts');
    const btns = [btnBoth, btnQuad, btnLin, btnPts];

    function setActiveBtn(activeBtn) {
      btns.forEach(b => b.classList.remove('active'));
      activeBtn.classList.add('active');
    }

    btnBoth.addEventListener('click', () => {
      setActiveBtn(btnBoth);
      quad.classList.remove('dimmed', 'hidden');
      lin.classList.remove('dimmed', 'hidden');
      pts.classList.remove('hidden');
      pts.classList.remove('dimmed');
    });

    btnQuad.addEventListener('click', () => {
      setActiveBtn(btnQuad);
      quad.classList.remove('dimmed', 'hidden');
      lin.classList.add('dimmed');
      lin.classList.remove('hidden');
      pts.classList.add('dimmed');
      pts.classList.remove('hidden');
    });

    btnLin.addEventListener('click', () => {
      setActiveBtn(btnLin);
      lin.classList.remove('dimmed', 'hidden');
      quad.classList.add('dimmed');
      quad.classList.remove('hidden');
      pts.classList.add('dimmed');
      pts.classList.remove('hidden');
    });

    btnPts.addEventListener('click', () => {
      setActiveBtn(btnPts);
      quad.classList.remove('hidden');
      lin.classList.remove('hidden');
      quad.classList.add('dimmed');
      lin.classList.add('dimmed');
      pts.classList.remove('dimmed', 'hidden');
    });
  </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">
  <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; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 12px;
      width: 100%;
      max-width: 620px;
    }
    .col-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f1f5f9;
      padding-bottom: 8px;
    }
    .col-title {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
    }
    .badge-pt {
      background: #eff6ff;
      color: #2563eb;
      font-size: 12px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid #dbeafe;
    }
    .box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition: border-color 0.2s ease, background-color 0.2s ease;
      cursor: pointer;
    }
    .box:hover {
      border-color: #cbd5e1;
      background: #f1f5f9;
    }
    .box-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }
    .math-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      gap: 6px;
    }
    .calc-flow {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px;
    }
    .check-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #16a34a;
      color: #ffffff;
      font-size: 13px;
      font-weight: bold;
      flex-shrink: 0;
      box-shadow: 0 1px 2px rgba(22, 163, 74, 0.3);
    }
    .step-arrow {
      color: #94a3b8;
      font-size: 13px;
    }
  </style>
</head>
<body>
  <div class="grid">
    
    <div class="col-card">
      <div class="header-row">
        <span class="col-title">Check Point</span>
        <span class="badge-pt">(1, 0)</span>
      </div>

      
      <div class="box">
        <div class="box-header">
          <span>Quadratic</span>
          <span class="katex-eq" data-tex="y = x^2 - 4x + 3"></span>
        </div>
        <div class="math-row">
          <div class="calc-flow">
            <span class="katex-eq" data-tex="0 = (1)^2 - 4(1) + 3"></span>
            <span class="step-arrow">→</span>
            <span class="katex-eq" data-tex="0 = 0"></span>
          </div>
          <span class="check-badge">✓</span>
        </div>
      </div>

      
      <div class="box">
        <div class="box-header">
          <span>Linear</span>
          <span class="katex-eq" data-tex="y = -x + 1"></span>
        </div>
        <div class="math-row">
          <div class="calc-flow">
            <span class="katex-eq" data-tex="0 = -(1) + 1"></span>
            <span class="step-arrow">→</span>
            <span class="katex-eq" data-tex="0 = 0"></span>
          </div>
          <span class="check-badge">✓</span>
        </div>
      </div>
    </div>

    
    <div class="col-card">
      <div class="header-row">
        <span class="col-title">Check Point</span>
        <span class="badge-pt">(2, -1)</span>
      </div>

      
      <div class="box">
        <div class="box-header">
          <span>Quadratic</span>
          <span class="katex-eq" data-tex="y = x^2 - 4x + 3"></span>
        </div>
        <div class="math-row">
          <div class="calc-flow">
            <span class="katex-eq" data-tex="-1 = (2)^2 - 4(2) + 3"></span>
            <span class="step-arrow">→</span>
            <span class="katex-eq" data-tex="-1 = -1"></span>
          </div>
          <span class="check-badge">✓</span>
        </div>
      </div>

      
      <div class="box">
        <div class="box-header">
          <span>Linear</span>
          <span class="katex-eq" data-tex="y = -x + 1"></span>
        </div>
        <div class="math-row">
          <div class="calc-flow">
            <span class="katex-eq" data-tex="-1 = -(2) + 1"></span>
            <span class="step-arrow">→</span>
            <span class="katex-eq" data-tex="-1 = -1"></span>
          </div>
          <span class="check-badge">✓</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.querySelectorAll('.katex-eq').forEach(el => {
      const tex = el.getAttribute('data-tex');
      if (window.katex && tex) {
        katex.render(tex, el, { throwOnError: false });
      } else {
        el.textContent = tex;
      }
    });
  </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-color: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

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

    @media (max-width: 480px) {
      .panels-container {
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }

    .panel-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .panel-title {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 2px;
    }

    .panel-subtitle {
      font-size: 12px;
      font-weight: 500;
      color: #6b7280;
      margin-bottom: 6px;
    }

    .graph-svg {
      width: 100%;
      height: auto;
      max-width: 210px;
      aspect-ratio: 1 / 1;
      display: block;
    }

    .grid-line {
      stroke: #f1f5f9;
      stroke-width: 1;
    }

    .axis-line {
      stroke: #cbd5e1;
      stroke-width: 1.5;
    }

    .parabola-curve {
      fill: none;
      stroke: #0284c7;
      stroke-width: 2.5;
      stroke-linecap: round;
    }

    .linear-line {
      fill: none;
      stroke: #ea580c;
      stroke-width: 2.5;
      stroke-linecap: round;
    }

    .point-dot {
      fill: #ef4444;
      stroke: #ffffff;
      stroke-width: 2;
    }

    .point-label {
      font-size: 11px;
      font-weight: 700;
      fill: #1e2945;
    }

    .info-label {
      font-size: 11px;
      font-weight: 600;
      fill: #6b7280;
    }
  </style>
</head>
<body>

  <div class="panels-container">
    
    <div class="panel-card">
      <div class="panel-title">Two Solutions</div>
      <div class="panel-subtitle">Secant Line</div>
      <svg id="svg1" class="graph-svg" viewBox="0 0 200 200"></svg>
    </div>

    
    <div class="panel-card">
      <div class="panel-title">One Solution</div>
      <div class="panel-subtitle">Tangent Line</div>
      <svg id="svg2" class="graph-svg" viewBox="0 0 200 200"></svg>
    </div>

    
    <div class="panel-card">
      <div class="panel-title">No Solution</div>
      <div class="panel-subtitle">No Intersection</div>
      <svg id="svg3" class="graph-svg" viewBox="0 0 200 200"></svg>
    </div>
  </div>

  <script>
    const width = 200;
    const height = 200;
    const originX = 100;
    const originY = 110;
    const scaleX = 26;
    const scaleY = 22;

    function toSvgX(x) { return originX + x * scaleX; }
    function toSvgY(y) { return originY - y * scaleY; }

    function drawGridAndAxes(svg) {
      // Grid lines
      for (let x = -3; x <= 3; x++) {
        const sx = toSvgX(x);
        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1', sx);
        line.setAttribute('y1', 10);
        line.setAttribute('x2', sx);
        line.setAttribute('y2', 190);
        line.setAttribute('class', 'grid-line');
        svg.appendChild(line);
      }
      for (let y = -3; y <= 4; y++) {
        const sy = toSvgY(y);
        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1', 10);
        line.setAttribute('y1', sy);
        line.setAttribute('x2', 190);
        line.setAttribute('y2', sy);
        line.setAttribute('class', 'grid-line');
        svg.appendChild(line);
      }

      // X Axis
      const xAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      xAxis.setAttribute('x1', 10);
      xAxis.setAttribute('y1', originY);
      xAxis.setAttribute('x2', 190);
      xAxis.setAttribute('y2', originY);
      xAxis.setAttribute('class', 'axis-line');
      svg.appendChild(xAxis);

      // Y Axis
      const yAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      yAxis.setAttribute('x1', originX);
      yAxis.setAttribute('y1', 10);
      yAxis.setAttribute('x2', originX);
      yAxis.setAttribute('y2', 190);
      yAxis.setAttribute('class', 'axis-line');
      svg.appendChild(yAxis);
    }

    function createParabolaPath() {
      let d = '';
      for (let x = -2.5; x <= 2.501; x += 0.05) {
        const y = x * x - 2;
        const sx = toSvgX(x);
        const sy = toSvgY(y);
        d += (d === '' ? 'M ' : ' L ') + sx.toFixed(2) + ' ' + sy.toFixed(2);
      }
      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      path.setAttribute('d', d);
      path.setAttribute('class', 'parabola-curve');
      return path;
    }

    function createLinearPath(fn) {
      let d = '';
      for (let x = -2.8; x <= 2.801; x += 0.1) {
        const y = fn(x);
        const sx = toSvgX(x);
        const sy = toSvgY(y);
        d += (d === '' ? 'M ' : ' L ') + sx.toFixed(2) + ' ' + sy.toFixed(2);
      }
      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      path.setAttribute('d', d);
      path.setAttribute('class', 'linear-line');
      return path;
    }

    function createPoint(x, y, labelText, offset = { dx: 8, dy: -6 }) {
      const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
      
      const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      circle.setAttribute('cx', toSvgX(x));
      circle.setAttribute('cy', toSvgY(y));
      circle.setAttribute('r', '5');
      circle.setAttribute('class', 'point-dot');
      g.appendChild(circle);

      if (labelText) {
        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('x', toSvgX(x) + offset.dx);
        text.setAttribute('y', toSvgY(y) + offset.dy);
        text.setAttribute('class', 'point-label');
        text.textContent = labelText;
        g.appendChild(text);
      }
      return g;
    }

    // Initialize Panel 1: y = x^2 - 2 and y = x (Intersections at (-1, -1) and (2, 2))
    const svg1 = document.getElementById('svg1');
    drawGridAndAxes(svg1);
    svg1.appendChild(createParabolaPath());
    svg1.appendChild(createLinearPath(x => x));
    svg1.appendChild(createPoint(-1, -1, '(x₁, y₁)', { dx: -45, dy: 14 }));
    svg1.appendChild(createPoint(2, 2, '(x₂, y₂)', { dx: -45, dy: -8 }));

    // Initialize Panel 2: y = x^2 - 2 and y = -2 (Tangent at (0, -2))
    const svg2 = document.getElementById('svg2');
    drawGridAndAxes(svg2);
    svg2.appendChild(createParabolaPath());
    svg2.appendChild(createLinearPath(x => -2));
    svg2.appendChild(createPoint(0, -2, '(x₀, y₀)', { dx: -18, dy: 18 }));

    // Initialize Panel 3: y = x^2 - 2 and y = -3.2 (No intersection)
    const svg3 = document.getElementById('svg3');
    drawGridAndAxes(svg3);
    svg3.appendChild(createParabolaPath());
    svg3.appendChild(createLinearPath(x => -3.2));
    
    const text3 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    text3.setAttribute('x', originX);
    text3.setAttribute('y', toSvgY(-1.2));
    text3.setAttribute('text-anchor', 'middle');
    text3.setAttribute('class', 'info-label');
    text3.textContent = 'Ø';
    svg3.appendChild(text3);
  </script>
</body>
</html>

OGM.10.REI.5

Aligned learning resources

Related diagrams