<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Supplementary Angles Diagram</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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 100%;
      padding: 12px;
      user-select: none;
      overflow-x: hidden;
    }

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

    .svg-wrap {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: auto;
      max-height: 250px;
      overflow: visible;
    }

    .math-panel {
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

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

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

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

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

    .calc-display {
      font-size: 14px;
      font-weight: 600;
      text-align: center;
      min-height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: #1e293b;
      flex-wrap: wrap;
    }

    .blue-txt { color: #2563eb; }
    .coral-txt { color: #ea580c; }
    .purple-txt { color: #7c3aed; }
  </style>
</head>
<body>

  <div class="container">
    <div class="svg-wrap">
      <svg viewBox="0 0 420 230" aria-label="Supplementary Angles Diagram">
        <defs>
          
          <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 1 2 L 7 5 L 1 8 Z" fill="#1e293b" />
          </marker>
        </defs>

        
        <text x="210" y="24" text-anchor="middle" font-size="14" font-weight="700" fill="#475569" letter-spacing="0.3">Straight Angle = 180°</text>

        
        
        <path d="M 90 170 A 120 120 0 0 1 330 170" fill="none" stroke="#94a3b8" stroke-width="1.8" stroke-dasharray="4 4" />

        
        
        
        
        <path id="sector1" d="M 210 170 L 150 170 A 60 60 0 0 1 230.5 113.6 Z" fill="rgba(37, 99, 235, 0.15)" stroke="#2563eb" stroke-width="2" />

        
        
        
        <path id="sector2" d="M 210 170 L 227.1 123 A 50 50 0 0 1 260 170 Z" fill="rgba(234, 88, 12, 0.15)" stroke="#ea580c" stroke-width="2" />

        
        <line x1="45" y1="170" x2="375" y2="170" stroke="#1e293b" stroke-width="3" stroke-linecap="round" marker-start="url(#arrow)" marker-end="url(#arrow)" />

        
        
        <line x1="210" y1="170" x2="244.2" y2="76.0" stroke="#1e293b" stroke-width="3" stroke-linecap="round" marker-end="url(#arrow)" />

        
        <circle cx="210" cy="170" r="4.5" fill="#1e293b" />
        <text x="210" y="196" text-anchor="middle" font-size="15" font-weight="700" fill="#1e293b">O</text>

        
        <g id="label1Group">
          <text id="lbl1" x="125" y="128" text-anchor="middle" font-size="14" font-weight="700" fill="#2563eb">∠1 = 4x + 10°</text>
        </g>

        
        <g id="label2Group">
          <text id="lbl2" x="295" y="132" text-anchor="middle" font-size="14" font-weight="700" fill="#ea580c">∠2 = 2x + 20°</text>
        </g>
      </svg>
    </div>

    
    <div class="math-panel">
      <div class="steps-row">
        <button class="step-btn active" onclick="setStep(0)">1. Equation</button>
        <button class="step-btn" onclick="setStep(1)">2. Solve x</button>
        <button class="step-btn" onclick="setStep(2)">3. Degrees</button>
      </div>
      <div class="calc-display" id="calcDisplay">
        <span class="blue-txt">(4x + 10°)</span> + <span class="coral-txt">(2x + 20°)</span> = <span class="purple-txt">180°</span>
      </div>
    </div>
  </div>

  <script>
    const steps = [
      {
        lbl1: "∠1 = 4x + 10°",
        lbl2: "∠2 = 2x + 20°",
        html: '<span class="blue-txt">(4x + 10°)</span> + <span class="coral-txt">(2x + 20°)</span> = <span class="purple-txt">180°</span>'
      },
      {
        lbl1: "4(25°) + 10°",
        lbl2: "2(25°) + 20°",
        html: '6x + 30° = 180° &nbsp;→&nbsp; <b>x = 25°</b>'
      },
      {
        lbl1: "∠1 = 110°",
        lbl2: "∠2 = 70°",
        html: '<span class="blue-txt">110°</span> + <span class="coral-txt">70°</span> = <span class="purple-txt">180°</span>'
      }
    ];

    function setStep(idx) {
      const btns = document.querySelectorAll('.step-btn');
      btns.forEach((b, i) => b.classList.toggle('active', i === idx));

      document.getElementById('lbl1').textContent = steps[idx].lbl1;
      document.getElementById('lbl2').textContent = steps[idx].lbl2;
      document.getElementById('calcDisplay').innerHTML = steps[idx].html;
    }
  </script>
</body>
</html>

Supplementary, Complementary, and Adjacent Angles

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      padding: 6px 10px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 620px;
    }
    @media (max-width: 480px) {
      .grid-container {
        grid-template-columns: 1fr;
        gap: 12px;
      }
    }
    .panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 2px 8px;
      border-radius: 6px;
      margin-bottom: 3px;
    }
    .badge-adjacent {
      background: #e0f2fe;
      color: #0369a1;
    }
    .badge-separated {
      background: #fef3c7;
      color: #b45309;
    }
    .panel-title {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 2px;
    }
    .panel-subtitle {
      font-size: 11px;
      color: #64748b;
      margin-bottom: 4px;
    }
    .svg-box {
      width: 100%;
      height: 105px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .equation {
      margin-top: 4px;
      font-size: 12px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: #334155;
      background: #f1f5f9;
      padding: 3px 10px;
      border-radius: 16px;
    }
    .note {
      font-size: 11px;
      font-weight: 500;
      color: #64748b;
      margin-top: 2px;
    }
    .c-blue { color: #0284c7; }
    .c-amber { color: #d97706; }
    .c-green { color: #16a34a; }

    /* Interactive Slider Controls */
    .controls {
      margin-top: 10px;
      width: 100%;
      max-width: 380px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 5px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .controls label {
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      white-space: nowrap;
    }
    .controls input[type=range] {
      flex: 1;
      accent-color: #0284c7;
      cursor: pointer;
      height: 5px;
    }
  </style>
</head>
<body>

  <div class="grid-container">
    
    <div class="panel">
      <span class="badge badge-adjacent">Always Adjacent</span>
      <div class="panel-title">Linear Pair</div>
      <div class="panel-subtitle">Share a vertex &amp; side on a straight line</div>
      <div class="svg-box">
        <svg viewBox="0 0 200 95" id="svgLinear"></svg>
      </div>
      <div class="equation">
        <span class="c-blue" id="eqA1">120°</span> + <span class="c-amber" id="eqB1">60°</span> = <span class="c-green">180°</span>
      </div>
    </div>

    
    <div class="panel">
      <span class="badge badge-separated">Do Not Have to Touch</span>
      <div class="panel-title">Supplementary Angles</div>
      <div class="panel-subtitle">Any two angles that sum to 180°</div>
      <div class="svg-box">
        <svg viewBox="0 0 200 95" id="svgSeparate"></svg>
      </div>
      <div class="equation">
        <span class="c-blue" id="eqA2">120°</span> + <span class="c-amber" id="eqB2">60°</span> = <span class="c-green">180°</span>
      </div>
      <div class="note">(Supplementary, not adjacent)</div>
    </div>
  </div>

  
  <div class="controls">
    <label for="angleSlider">Adjust Angle:</label>
    <input type="range" id="angleSlider" min="95" max="155" value="120" step="1">
  </div>

  <script>
    const slider = document.getElementById('angleSlider');
    const svgLinear = document.getElementById('svgLinear');
    const svgSeparate = document.getElementById('svgSeparate');

    const eqA1 = document.getElementById('eqA1');
    const eqB1 = document.getElementById('eqB1');
    const eqA2 = document.getElementById('eqA2');
    const eqB2 = document.getElementById('eqB2');

    function degToRad(deg) {
      return (deg * Math.PI) / 180;
    }

    function createArcPath(cx, cy, r, startAngleDeg, endAngleDeg) {
      const rad1 = degToRad(startAngleDeg);
      const rad2 = degToRad(endAngleDeg);
      const x1 = cx + r * Math.cos(rad1);
      const y1 = cy - r * Math.sin(rad1);
      const x2 = cx + r * Math.cos(rad2);
      const y2 = cy - r * Math.sin(rad2);
      const largeArc = Math.abs(endAngleDeg - startAngleDeg) > 180 ? 1 : 0;
      return `M ${x1} ${y1} A ${r} ${r} 0 ${largeArc} 0 ${x2} ${y2}`;
    }

    function createSectorPath(cx, cy, r, startAngleDeg, endAngleDeg) {
      const rad1 = degToRad(startAngleDeg);
      const rad2 = degToRad(endAngleDeg);
      const x1 = cx + r * Math.cos(rad1);
      const y1 = cy - r * Math.sin(rad1);
      const x2 = cx + r * Math.cos(rad2);
      const y2 = cy - r * Math.sin(rad2);
      const largeArc = Math.abs(endAngleDeg - startAngleDeg) > 180 ? 1 : 0;
      return `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${largeArc} 0 ${x2} ${y2} Z`;
    }

    function renderDiagrams(degA) {
      const degB = 180 - degA;

      eqA1.textContent = `${degA}°`;
      eqB1.textContent = `${degB}°`;
      eqA2.textContent = `${degA}°`;
      eqB2.textContent = `${degB}°`;

      // 1. Render Linear Pair (Vertex at 100, 80)
      const lx = 100, ly = 80, lineLen = 80, rayLen = 65;
      const rayX = lx + rayLen * Math.cos(degToRad(degB));
      const rayY = ly - rayLen * Math.sin(degToRad(degB));

      // Label positions
      const radMidB = degToRad(degB / 2);
      const labelBx = lx + 36 * Math.cos(radMidB);
      const labelBy = ly - 36 * Math.sin(radMidB);

      const radMidA = degToRad(degB + degA / 2);
      const labelAx = lx + 36 * Math.cos(radMidA);
      const labelAy = ly - 36 * Math.sin(radMidA);

      svgLinear.innerHTML = `
        <defs>
          <marker id="arrow" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
            <path d="M 0 1 L 6 3 L 0 5 z" fill="#64748b"/>
          </marker>
          <marker id="arrow-ray" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
            <path d="M 0 1 L 6 3 L 0 5 z" fill="#1e2945"/>
          </marker>
        </defs>

        
        <line x1="${lx - lineLen}" y1="${ly}" x2="${lx + lineLen}" y2="${ly}" stroke="#64748b" stroke-width="2" marker-start="url(#arrow)" marker-end="url(#arrow)" />
        
        
        <path d="${createSectorPath(lx, ly, 26, 0, degB)}" fill="rgba(217, 119, 6, 0.2)" />
        <path d="${createArcPath(lx, ly, 26, 0, degB)}" fill="none" stroke="#d97706" stroke-width="2" />

        <path d="${createSectorPath(lx, ly, 22, degB, 180)}" fill="rgba(2, 132, 199, 0.2)" />
        <path d="${createArcPath(lx, ly, 22, degB, 180)}" fill="none" stroke="#0284c7" stroke-width="2" />

        
        <line x1="${lx}" y1="${ly}" x2="${rayX}" y2="${rayY}" stroke="#1e2945" stroke-width="2.2" marker-end="url(#arrow-ray)" />
        <circle cx="${lx}" cy="${ly}" r="3.5" fill="#1e2945" />

        
        <text x="${labelAx}" y="${labelAy + 4}" font-size="12" font-weight="700" fill="#0284c7" text-anchor="middle">${degA}°</text>
        <text x="${labelBx}" y="${labelBy + 4}" font-size="12" font-weight="700" fill="#d97706" text-anchor="middle">${degB}°</text>
      `;

      // 2. Render Separated Angles (Obtuse degA on left, Acute degB on right)
      // Angle 1: Obtuse angle at (60, 80) opening up-left
      const s1x = 62, s1y = 80, arm1 = 44;
      const s1ArmX = s1x + arm1 * Math.cos(degToRad(degA));
      const s1ArmY = s1y - arm1 * Math.sin(degToRad(degA));

      // Angle 2: Acute angle at (142, 80) opening up-right
      const s2x = 142, s2y = 80, arm2 = 44;
      const s2ArmX = s2x + arm2 * Math.cos(degToRad(degB));
      const s2ArmY = s2y - arm2 * Math.sin(degToRad(degB));

      // Label coords for separated angles
      const s1Mid = degToRad(degA / 2);
      const s1LabelX = s1x + 30 * Math.cos(s1Mid);
      const s1LabelY = s1y - 30 * Math.sin(s1Mid);

      const s2Mid = degToRad(degB / 2);
      const s2LabelX = s2x + 30 * Math.cos(s2Mid);
      const s2LabelY = s2y - 30 * Math.sin(s2Mid);

      svgSeparate.innerHTML = `
        <defs>
          <marker id="arrow-sep" viewBox="0 0 6 6" refX="5" refY="3" markerWidth="4" markerHeight="4" orient="auto">
            <path d="M 0 1 L 6 3 L 0 5 z" fill="#1e2945"/>
          </marker>
        </defs>

        
        <path d="${createSectorPath(s1x, s1y, 22, 0, degA)}" fill="rgba(2, 132, 199, 0.2)" />
        <path d="${createArcPath(s1x, s1y, 22, 0, degA)}" fill="none" stroke="#0284c7" stroke-width="2" />
        <line x1="${s1x}" y1="${s1y}" x2="${s1x + arm1}" y2="${s1y}" stroke="#1e2945" stroke-width="2" marker-end="url(#arrow-sep)" />
        <line x1="${s1x}" y1="${s1y}" x2="${s1ArmX}" y2="${s1ArmY}" stroke="#1e2945" stroke-width="2" marker-end="url(#arrow-sep)" />
        <circle cx="${s1x}" cy="${s1y}" r="3" fill="#1e2945" />
        <text x="${s1LabelX}" y="${s1LabelY + 4}" font-size="12" font-weight="700" fill="#0284c7" text-anchor="middle">${degA}°</text>

        
        <path d="${createSectorPath(s2x, s2y, 22, 0, degB)}" fill="rgba(217, 119, 6, 0.2)" />
        <path d="${createArcPath(s2x, s2y, 22, 0, degB)}" fill="none" stroke="#d97706" stroke-width="2" />
        <line x1="${s2x}" y1="${s2y}" x2="${s2x + arm2}" y2="${s2y}" stroke="#1e2945" stroke-width="2" marker-end="url(#arrow-sep)" />
        <line x1="${s2x}" y1="${s2y}" x2="${s2ArmX}" y2="${s2ArmY}" stroke="#1e2945" stroke-width="2" marker-end="url(#arrow-sep)" />
        <circle cx="${s2x}" cy="${s2y}" r="3" fill="#1e2945" />
        <text x="${s2LabelX}" y="${s2LabelY + 4}" font-size="12" font-weight="700" fill="#d97706" text-anchor="middle">${degB}°</text>
      `;
    }

    slider.addEventListener('input', (e) => {
      renderDiagrams(parseInt(e.target.value, 10));
    });

    renderDiagrams(120);
  </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, sans-serif;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px 16px;
      user-select: none;
    }

    .canvas-wrap {
      width: 100%;
      max-width: 440px;
      position: relative;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    /* SVG styling & transitions */
    .ray { stroke: #334155; stroke-width: 2.5; stroke-linecap: round; }
    .point-dot { fill: #1e2945; }
    .label { font-size: 15px; font-weight: 700; fill: #1e2945; }
    .sub-label { font-size: 14px; font-weight: 600; }
    
    .arc-58 { stroke: #d97706; stroke-width: 3; fill: rgba(217, 119, 6, 0.08); transition: all 0.3s ease; }
    .arc-y { stroke: #0284c7; stroke-width: 3; fill: rgba(2, 132, 199, 0.08); transition: all 0.3s ease; }
    .sq-90 { stroke: #475569; stroke-width: 2.5; fill: rgba(71, 85, 105, 0.08); transition: all 0.3s ease; }
    .straight-arc { stroke: #8b5cf6; stroke-width: 2; stroke-dasharray: 4 4; fill: none; opacity: 0; transition: opacity 0.3s ease; }

    /* Highlights */
    .highlight-90 .sq-90 { stroke: #2563eb; stroke-width: 3.5; fill: rgba(37, 99, 235, 0.18); }
    .highlight-58 .arc-58 { stroke: #b45309; stroke-width: 4; fill: rgba(217, 119, 6, 0.22); }
    .highlight-y .arc-y { stroke: #0369a1; stroke-width: 4; fill: rgba(2, 132, 199, 0.25); }
    .highlight-all .straight-arc { opacity: 1; stroke: #7c3aed; stroke-width: 2.5; }

    /* Calculation callout card */
    .calc-card {
      width: 100%;
      max-width: 440px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 6px;
    }

    .equation-row {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
      gap: 6px;
      flex-wrap: wrap;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 8px;
      border-radius: 6px;
      font-weight: 700;
      font-size: 14px;
      transition: all 0.25s ease;
    }

    .badge-90 { background: #e0e7ff; color: #3730a3; }
    .badge-58 { background: #fef3c7; color: #92400e; }
    .badge-y { background: #e0f2fe; color: #0369a1; }
    .badge-180 { background: #ede9fe; color: #5b21b6; }
    .badge-ans { background: #dcfce7; color: #166534; font-size: 15px; padding: 2px 10px; }

    /* Interactive Stepper */
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 440px;
      margin-top: 8px;
    }

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

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

    .step-btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }
  </style>
</head>
<body>

  <div class="canvas-wrap" id="canvasWrap">
    <svg viewBox="0 0 440 230">
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#334155"/>
        </marker>
      </defs>

      
      <path class="straight-arc" d="M 50 180 A 160 160 0 0 1 370 180" />
      <text id="txt-180" x="210" y="15" text-anchor="middle" class="sub-label" fill="#7c3aed" opacity="0" font-weight="700">Straight Line = 180°</text>

      
      <path class="sq-90" d="M 210 180 L 190 180 L 190 160 L 210 160 Z" />
      <text x="145" y="155" class="sub-label" fill="#475569">90°</text>

      
      
      <path class="arc-58" d="M 210 180 L 210 115 A 65 65 0 0 1 265.1 145.6 Z" />
      <text x="250" y="122" class="sub-label" fill="#d97706" font-weight="700">58°</text>

      
      
      <path class="arc-y" d="M 210 180 L 282.1 135.0 A 85 85 0 0 1 295 180 Z" />
      <text id="label-y" x="312" y="162" class="sub-label" fill="#0284c7" font-weight="700">y</text>

      
      
      <line class="ray" x1="25" y1="180" x2="395" y2="180" marker-start="url(#arrow)" marker-end="url(#arrow)" />
      
      
      <line class="ray" x1="210" y1="180" x2="210" y2="65" marker-end="url(#arrow)" />
      
      
      <line class="ray" x1="210" y1="180" x2="341.4" y2="97.9" marker-end="url(#arrow)" />

      
      <circle class="point-dot" cx="210" cy="180" r="3.5" />

      
      <text x="35" y="206" class="label">A</text>
      <text x="210" y="206" class="label" text-anchor="middle">O</text>
      <text x="385" y="206" class="label">B</text>
      <text x="210" y="52" class="label" text-anchor="middle">C</text>
      <text x="355" y="96" class="label">D</text>
    </svg>
  </div>

  
  <div class="calc-card">
    <div class="equation-row" id="eqMain">
      <span class="badge badge-90">90°</span>
      <span>+</span>
      <span class="badge badge-58">58°</span>
      <span>+</span>
      <span class="badge badge-y" id="eqY">y</span>
      <span>=</span>
      <span class="badge badge-180">180°</span>
    </div>
    <div class="equation-row" id="eqSub" style="color: #475569; font-size: 14px;">
      <span>148° + y = 180°</span>
      <span>→</span>
      <span class="badge badge-ans">y = 32°</span>
    </div>
  </div>

  
  <div class="controls">
    <button class="step-btn active" onclick="setStep(0)">1. Full Line (180°)</button>
    <button class="step-btn" onclick="setStep(1)">2. Known Angles</button>
    <button class="step-btn" onclick="setStep(2)">3. Solve for y</button>
  </div>

  <script>
    const wrap = document.getElementById('canvasWrap');
    const txt180 = document.getElementById('txt-180');
    const labelY = document.getElementById('label-y');
    const eqMain = document.getElementById('eqMain');
    const eqSub = document.getElementById('eqSub');
    const btns = document.querySelectorAll('.step-btn');

    function setStep(idx) {
      btns.forEach((b, i) => b.classList.toggle('active', i === idx));
      wrap.className = 'canvas-wrap';

      if (idx === 0) {
        wrap.classList.add('highlight-all');
        txt180.style.opacity = '1';
        labelY.textContent = 'y';
        eqMain.innerHTML = `
          <span class="badge badge-90">90°</span>
          <span>+</span>
          <span class="badge badge-58">58°</span>
          <span>+</span>
          <span class="badge badge-y">y</span>
          <span>=</span>
          <span class="badge badge-180">180°</span>
        `;
        eqSub.innerHTML = `<span>Angles on a straight line sum to 180°</span>`;
      } else if (idx === 1) {
        wrap.classList.add('highlight-90');
        wrap.classList.add('highlight-58');
        txt180.style.opacity = '0';
        labelY.textContent = 'y';
        eqMain.innerHTML = `
          <span class="badge badge-90">90°</span>
          <span>+</span>
          <span class="badge badge-58">58°</span>
          <span>= 148°</span>
        `;
        eqSub.innerHTML = `<span>Remaining angle: 180° − 148°</span>`;
      } else if (idx === 2) {
        wrap.classList.add('highlight-y');
        txt180.style.opacity = '0';
        labelY.textContent = '32°';
        eqMain.innerHTML = `
          <span>90° + 58° + <span class="badge badge-ans">32°</span> = 180°</span>
        `;
        eqSub.innerHTML = `
          <span>180° − 148° =</span>
          <span class="badge badge-ans">y = 32°</span>
        `;
      }
    }

    setStep(0);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 8px 12px 10px;
      overflow: hidden;
    }
    .svg-container {
      width: 100%;
      max-width: 440px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      touch-action: none;
      min-height: 0;
    }
    svg {
      width: 100%;
      height: 100%;
      max-height: 270px;
      overflow: visible;
    }
    .vertex-label {
      font-size: 16px;
      font-weight: 700;
      fill: #1e2945;
      dominant-baseline: central;
      text-anchor: middle;
    }
    .angle-label {
      font-size: 13px;
      font-weight: 700;
      dominant-baseline: central;
      text-anchor: middle;
      paint-order: stroke fill;
      stroke: #ffffff;
      stroke-width: 3px;
      stroke-linejoin: round;
    }
    .outer-angle-label {
      font-size: 13px;
      font-weight: 700;
      fill: #475569;
      dominant-baseline: central;
      text-anchor: middle;
    }
    .drag-handle {
      cursor: grab;
      transition: r 0.15s ease;
    }
    .drag-handle:active {
      cursor: grabbing;
      r: 9;
    }
    .equation-bar {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      width: 100%;
      max-width: 420px;
    }
    .live-math {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 700;
    }
    .pill {
      padding: 3px 10px;
      border-radius: 12px;
      font-variant-numeric: tabular-nums;
      transition: background-color 0.2s;
    }
    .pill-blue {
      background: #e0f2fe;
      color: #0284c7;
      border: 1px solid #bae6fd;
    }
    .pill-purple {
      background: #f3e8ff;
      color: #9333ea;
      border: 1px solid #e9d5ff;
    }
    .pill-total {
      background: #f1f5f9;
      color: #1e2945;
      border: 1px solid #cbd5e1;
    }
    .formal-eq {
      font-size: 13.5px;
      font-weight: 600;
      color: #1e2945;
      letter-spacing: 0.2px;
    }
    .hint {
      font-size: 11px;
      color: #64748b;
      margin-top: 1px;
    }
  </style>
</head>
<body>

  <div class="svg-container">
    <svg id="diagram" viewBox="0 0 430 260">
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 1 2 L 7 5 L 1 8 z" fill="#1e2945" />
        </marker>
        <marker id="arrow-blue" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 1 2 L 7 5 L 1 8 z" fill="#0284c7" />
        </marker>
        
        <filter id="badge-shadow" x="-10%" y="-10%" width="120%" height="120%">
          <feDropShadow dx="0" dy="1" stdDeviation="1.5" flood-color="#000000" flood-opacity="0.08" />
        </filter>
      </defs>

      
      <path id="sector-abd" fill="#e0f2fe" fill-opacity="0.85" stroke="#38bdf8" stroke-width="1.5" />
      <path id="sector-dbc" fill="#f3e8ff" fill-opacity="0.85" stroke="#c084fc" stroke-width="1.5" />

      
      
      <line id="ray-bc" stroke="#1e2945" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arrow)" />
      
      <line id="ray-ba" stroke="#1e2945" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arrow)" />
      
      <line id="ray-bd" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arrow-blue)" />

      
      <path id="outer-bracket" fill="none" stroke="#64748b" stroke-width="1.5" stroke-dasharray="4,3" />

      
      <g id="badge-group-abc" filter="url(#badge-shadow)">
        <rect id="badge-bg-abc" rx="6" ry="6" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.2" />
        <text id="label-val-abc" class="outer-angle-label">∠ABC = 75°</text>
      </g>

      
      <text id="label-val-abd" class="angle-label" fill="#0284c7">40°</text>
      <text id="label-val-dbc" class="angle-label" fill="#9333ea">35°</text>

      
      <circle id="pt-b" r="4" fill="#1e2945" />
      <circle id="pt-a" r="4" fill="#1e2945" />
      <circle id="pt-c" r="4" fill="#1e2945" />
      
      
      <circle id="pt-d-halo" r="16" fill="#0284c7" fill-opacity="0.15" style="cursor:grab;" />
      <circle id="pt-d" class="drag-handle" r="6" fill="#0284c7" stroke="#ffffff" stroke-width="2" />

      
      <text id="text-b" class="vertex-label">B</text>
      <text id="text-a" class="vertex-label">A</text>
      <text id="text-c" class="vertex-label">C</text>
      <text id="text-d" class="vertex-label" fill="#0284c7">D</text>
    </svg>
  </div>

  <div class="equation-bar">
    <div class="live-math">
      <span id="math-abd" class="pill pill-blue">40°</span>
      <span>+</span>
      <span id="math-dbc" class="pill pill-purple">35°</span>
      <span>=</span>
      <span id="math-abc" class="pill pill-total">75°</span>
    </div>
    <div class="formal-eq">
      m∠ABD + m∠DBC = m∠ABC
    </div>
    <div class="hint">Drag point D to adjust adjacent angles</div>
  </div>

  <script>
    const svg = document.getElementById('diagram');
    const B = { x: 70, y: 215 };
    const rayLength = 225;
    const sectorRadius = 105;
    const bracketRadius = 145;

    // Total angle of ∠ABC is 75°
    const angleTotal = 75;
    let angleD = 35; // initial angle of ray BD in degrees from ray BC

    function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
      const radians = angleInDegrees * Math.PI / 180.0;
      return {
        x: centerX + (radius * Math.cos(radians)),
        y: centerY - (radius * Math.sin(radians))
      };
    }

    function describeSector(x, y, radius, startAngle, endAngle) {
      const start = polarToCartesian(x, y, radius, endAngle);
      const end = polarToCartesian(x, y, radius, startAngle);
      const arcSweep = endAngle - startAngle <= 180 ? "0" : "1";
      return [
        "M", x, y,
        "L", start.x, start.y,
        "A", radius, radius, 0, arcSweep, 1, end.x, end.y,
        "Z"
      ].join(" ");
    }

    function describeArc(x, y, radius, startAngle, endAngle) {
      const start = polarToCartesian(x, y, radius, endAngle);
      const end = polarToCartesian(x, y, radius, startAngle);
      const arcSweep = endAngle - startAngle <= 180 ? "0" : "1";
      return [
        "M", start.x, start.y,
        "A", radius, radius, 0, arcSweep, 1, end.x, end.y
      ].join(" ");
    }

    function update() {
      // Ray endpoint vectors
      const ptA = polarToCartesian(B.x, B.y, rayLength, angleTotal);
      const ptC = polarToCartesian(B.x, B.y, rayLength, 0);
      const ptD = polarToCartesian(B.x, B.y, rayLength * 0.88, angleD);

      // Lines
      const rayBA = document.getElementById('ray-ba');
      rayBA.setAttribute('x1', B.x); rayBA.setAttribute('y1', B.y);
      rayBA.setAttribute('x2', ptA.x); rayBA.setAttribute('y2', ptA.y);

      const rayBC = document.getElementById('ray-bc');
      rayBC.setAttribute('x1', B.x); rayBC.setAttribute('y1', B.y);
      rayBC.setAttribute('x2', ptC.x); rayBC.setAttribute('y2', ptC.y);

      const rayBD = document.getElementById('ray-bd');
      rayBD.setAttribute('x1', B.x); rayBD.setAttribute('y1', B.y);
      rayBD.setAttribute('x2', ptD.x); rayBD.setAttribute('y2', ptD.y);

      // Vertex dots
      const dotB = document.getElementById('pt-b');
      dotB.setAttribute('cx', B.x); dotB.setAttribute('cy', B.y);

      const dotA = polarToCartesian(B.x, B.y, rayLength * 0.72, angleTotal);
      const elPtA = document.getElementById('pt-a');
      elPtA.setAttribute('cx', dotA.x); elPtA.setAttribute('cy', dotA.y);

      const dotC = polarToCartesian(B.x, B.y, rayLength * 0.72, 0);
      const elPtC = document.getElementById('pt-c');
      elPtC.setAttribute('cx', dotC.x); elPtC.setAttribute('cy', dotC.y);

      const elPtD = document.getElementById('pt-d');
      elPtD.setAttribute('cx', ptD.x); elPtD.setAttribute('cy', ptD.y);
      const elPtDHalo = document.getElementById('pt-d-halo');
      elPtDHalo.setAttribute('cx', ptD.x); elPtDHalo.setAttribute('cy', ptD.y);

      // Vertex Text Labels
      const lblB = document.getElementById('text-b');
      lblB.setAttribute('x', B.x - 16); lblB.setAttribute('y', B.y + 12);

      const lblA = document.getElementById('text-a');
      const posLblA = polarToCartesian(B.x, B.y, rayLength * 0.72 + 18, angleTotal + 3);
      lblA.setAttribute('x', posLblA.x); lblA.setAttribute('y', posLblA.y);

      const lblC = document.getElementById('text-c');
      lblC.setAttribute('x', dotC.x); lblC.setAttribute('y', dotC.y + 18);

      const lblD = document.getElementById('text-d');
      const posLblD = polarToCartesian(B.x, B.y, rayLength * 0.88 + 18, angleD);
      lblD.setAttribute('x', posLblD.x); lblD.setAttribute('y', posLblD.y);

      // Sectors
      const secDBC = document.getElementById('sector-dbc');
      secDBC.setAttribute('d', describeSector(B.x, B.y, sectorRadius, 0, angleD));

      const secABD = document.getElementById('sector-abd');
      secABD.setAttribute('d', describeSector(B.x, B.y, sectorRadius, angleD, angleTotal));

      // Outer Bracket Arc
      const outerBracket = document.getElementById('outer-bracket');
      outerBracket.setAttribute('d', describeArc(B.x, B.y, bracketRadius, 0, angleTotal));

      // Sector Angle Values
      const angleDBCVal = Math.round(angleD);
      const angleABDVal = angleTotal - angleDBCVal;

      const posValDBC = polarToCartesian(B.x, B.y, sectorRadius * 0.62, angleD / 2);
      const lblValDBC = document.getElementById('label-val-dbc');
      lblValDBC.setAttribute('x', posValDBC.x);
      lblValDBC.setAttribute('y', posValDBC.y);
      lblValDBC.textContent = `${angleDBCVal}°`;

      const posValABD = polarToCartesian(B.x, B.y, sectorRadius * 0.62, angleD + (angleTotal - angleD) / 2);
      const lblValABD = document.getElementById('label-val-abd');
      lblValABD.setAttribute('x', posValABD.x);
      lblValABD.setAttribute('y', posValABD.y);
      lblValABD.textContent = `${angleABDVal}°`;

      // Position outer angle label cleanly outward beyond the dashed arc
      const posValABC = polarToCartesian(B.x, B.y, bracketRadius + 22, angleTotal / 2);
      const lblValABC = document.getElementById('label-val-abc');
      lblValABC.setAttribute('x', posValABC.x);
      lblValABC.setAttribute('y', posValABC.y);
      lblValABC.textContent = `∠ABC = ${angleTotal}°`;

      // Update badge background pill around the outer angle label
      const badgeBg = document.getElementById('badge-bg-abc');
      const badgeWidth = 92;
      const badgeHeight = 22;
      badgeBg.setAttribute('x', posValABC.x - badgeWidth / 2);
      badgeBg.setAttribute('y', posValABC.y - badgeHeight / 2);
      badgeBg.setAttribute('width', badgeWidth);
      badgeBg.setAttribute('height', badgeHeight);

      // Live equation pill updates
      document.getElementById('math-abd').textContent = `${angleABDVal}°`;
      document.getElementById('math-dbc').textContent = `${angleDBCVal}°`;
      document.getElementById('math-abc').textContent = `${angleTotal}°`;
    }

    // Drag interaction
    let isDragging = false;

    function getAngleFromEvent(e) {
      const rect = svg.getBoundingClientRect();
      const clientX = e.touches ? e.touches[0].clientX : e.clientX;
      const clientY = e.touches ? e.touches[0].clientY : e.clientY;
      const svgX = (clientX - rect.left) * (430 / rect.width);
      const svgY = (clientY - rect.top) * (260 / rect.height);
      const dx = svgX - B.x;
      const dy = B.y - svgY;
      let deg = Math.atan2(dy, dx) * 180 / Math.PI;
      if (deg < 0) deg = 0;
      // Clamp between 12° and 63° for optimal label legibility and sector bounds
      return Math.max(12, Math.min(63, deg));
    }

    function onPointerDown(e) {
      isDragging = true;
      angleD = getAngleFromEvent(e);
      update();
    }

    function onPointerMove(e) {
      if (!isDragging) return;
      angleD = getAngleFromEvent(e);
      update();
    }

    function onPointerUp() {
      isDragging = false;
    }

    svg.addEventListener('mousedown', onPointerDown);
    window.addEventListener('mousemove', onPointerMove);
    window.addEventListener('mouseup', onPointerUp);

    svg.addEventListener('touchstart', onPointerDown, { passive: true });
    window.addEventListener('touchmove', onPointerMove, { passive: true });
    window.addEventListener('touchend', onPointerUp);

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Adjacent vs Non-Adjacent Angles</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      background: #f8fafc;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: #0f172a;
      padding: 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100%;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 720px;
      margin: 0 auto;
    }
    @media (max-width: 540px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }
    .panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
    }
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
      padding-bottom: 6px;
      border-bottom: 1px solid #f1f5f9;
    }
    .title {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .badge {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 20px;
      letter-spacing: 0.2px;
    }
    .badge-pass {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }
    .badge-fail {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca;
    }
    .svg-container {
      width: 100%;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
    }
    svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }
    .criteria {
      display: flex;
      gap: 6px;
      margin-top: 8px;
      padding-top: 6px;
      border-top: 1px solid #f1f5f9;
      font-size: 11px;
      font-weight: 600;
    }
    .tag {
      flex: 1;
      text-align: center;
      padding: 3px 6px;
      border-radius: 6px;
      background: #f1f5f9;
      color: #475569;
    }
    .tag.yes {
      background: #f0fdf4;
      color: #166534;
      border: 1px solid #bbf7d0;
    }
    .tag.no {
      background: #fef2f2;
      color: #991b1b;
      border: 1px solid #fecaca;
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="panel">
      <div class="header">
        <div class="title">Adjacent Angles</div>
        <span class="badge badge-pass">✓ Side-by-Side</span>
      </div>

      <div class="svg-container">
        <svg viewBox="0 0 280 200" aria-label="Adjacent Angles ABD and DBC sharing ray BD and vertex B">
          <defs>
            
            <marker id="arr-dark" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
              <path d="M 1 2 L 7 5 L 1 8 z" fill="#1e2945" />
            </marker>
            <marker id="arr-blue" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
              <path d="M 1 2 L 7 5 L 1 8 z" fill="#0284c7" />
            </marker>
            <marker id="arr-ptr" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
              <path d="M 1 2 L 7 5 L 1 8 z" fill="#64748b" />
            </marker>
          </defs>

          
          
          
          
          <path d="M 140 160 L 98 138 A 46 46 0 0 1 152 116 Z" fill="#38bdf8" fill-opacity="0.28" />
          <path d="M 104 141 A 40 40 0 0 1 150 121" fill="none" stroke="#0284c7" stroke-width="2" />

          
          
          <path d="M 140 160 L 152 116 A 46 46 0 0 1 184 148 Z" fill="#fb7185" fill-opacity="0.28" />
          <path d="M 150 121 A 40 40 0 0 1 179 149" fill="none" stroke="#e11d48" stroke-width="2" />

          
          <line x1="140" y1="160" x2="48" y2="114" stroke="#1e2945" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arr-dark)" />
          
          <line x1="140" y1="160" x2="165" y2="65" stroke="#0284c7" stroke-width="3" stroke-linecap="round" marker-end="url(#arr-blue)" />
          
          <line x1="140" y1="160" x2="236" y2="135" stroke="#1e2945" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arr-dark)" />

          
          <circle cx="65" cy="122" r="3" fill="#1e2945" />
          <text x="56" y="112" font-size="12" font-weight="700" fill="#1e2945">A</text>

          <circle cx="160" cy="85" r="3" fill="#0284c7" />
          <text x="172" y="85" font-size="12" font-weight="700" fill="#0284c7">D</text>

          <circle cx="218" cy="140" r="3" fill="#1e2945" />
          <text x="228" y="136" font-size="12" font-weight="700" fill="#1e2945">C</text>

          
          <circle cx="140" cy="160" r="4.5" fill="#0f172a" stroke="#ffffff" stroke-width="1.5" />
          <text x="140" y="179" font-size="13" font-weight="800" fill="#0f172a" text-anchor="middle">B</text>

          
          <path d="M 86 52 Q 130 46 154 68" fill="none" stroke="#64748b" stroke-width="1.2" stroke-dasharray="3,3" marker-end="url(#arr-ptr)" />
          <rect x="24" y="40" width="82" height="18" rx="4" fill="#f0f9ff" stroke="#bae6fd" stroke-width="1" />
          <text x="65" y="53" font-size="10" font-weight="700" fill="#0369a1" text-anchor="middle">Shared Ray BD</text>

          
          <path d="M 72 176 L 126 164" fill="none" stroke="#64748b" stroke-width="1.2" stroke-dasharray="3,3" marker-end="url(#arr-ptr)" />
          <rect x="8" y="167" width="60" height="18" rx="4" fill="#f8fafc" stroke="#cbd5e1" stroke-width="1" />
          <text x="38" y="180" font-size="10" font-weight="600" fill="#475569" text-anchor="middle">Vertex B</text>
        </svg>
      </div>

      <div class="criteria">
        <div class="tag yes">✓ Same Vertex</div>
        <div class="tag yes">✓ Shared Side</div>
        <div class="tag yes">✓ No Overlap</div>
      </div>
    </div>

    
    <div class="panel">
      <div class="header">
        <div class="title">Non-Adjacent Angles</div>
        <span class="badge badge-fail">✗ Not Adjacent</span>
      </div>

      <div class="svg-container">
        <svg viewBox="0 0 280 200" aria-label="Non-adjacent angle counterexamples">
          <defs>
            <marker id="arr-gray" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
              <path d="M 1 2 L 7 5 L 1 8 z" fill="#64748b" />
            </marker>
          </defs>

          
          <g transform="translate(0, 0)">
            
            <path d="M 45 95 L 20 50 A 30 30 0 0 1 65 65 Z" fill="#38bdf8" fill-opacity="0.25" />
            <line x1="45" y1="95" x2="16" y2="44" stroke="#64748b" stroke-width="2" marker-end="url(#arr-gray)" />
            <line x1="45" y1="95" x2="72" y2="60" stroke="#64748b" stroke-width="2" marker-end="url(#arr-gray)" />
            <circle cx="45" cy="95" r="3.5" fill="#475569" />

            
            <path d="M 95 95 L 85 52 A 30 30 0 0 1 125 70 Z" fill="#fb7185" fill-opacity="0.25" />
            <line x1="95" y1="95" x2="82" y2="44" stroke="#64748b" stroke-width="2" marker-end="url(#arr-gray)" />
            <line x1="95" y1="95" x2="132" y2="66" stroke="#64748b" stroke-width="2" marker-end="url(#arr-gray)" />
            <circle cx="95" cy="95" r="3.5" fill="#475569" />

            
            <line x1="48" y1="95" x2="92" y2="95" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="3,3" />
            <text x="70" y="112" font-size="10" font-weight="700" fill="#dc2626" text-anchor="middle">Gap</text>

            <rect x="18" y="126" width="104" height="20" rx="5" fill="#fef2f2" stroke="#fecaca" stroke-width="1" />
            <text x="70" y="140" font-size="10" font-weight="700" fill="#b91c1c" text-anchor="middle">Separate Vertices</text>
          </g>

          
          <line x1="140" y1="20" x2="140" y2="160" stroke="#f1f5f9" stroke-width="1.5" />

          
          <g transform="translate(140, 0)">
            
            
            <path d="M 70 95 L 30 55 A 30 30 0 0 1 52 42 Z" fill="#38bdf8" fill-opacity="0.25" />
            <line x1="70" y1="95" x2="22" y2="48" stroke="#64748b" stroke-width="2" marker-end="url(#arr-gray)" />
            <line x1="70" y1="95" x2="48" y2="34" stroke="#64748b" stroke-width="2" marker-end="url(#arr-gray)" />

            
            <path d="M 70 95 L 88 42 A 30 30 0 0 1 110 55 Z" fill="#fb7185" fill-opacity="0.25" />
            <line x1="70" y1="95" x2="92" y2="34" stroke="#64748b" stroke-width="2" marker-end="url(#arr-gray)" />
            <line x1="70" y1="95" x2="118" y2="48" stroke="#64748b" stroke-width="2" marker-end="url(#arr-gray)" />

            
            <circle cx="70" cy="95" r="3.5" fill="#475569" />

            
            <path d="M 57 52 A 28 28 0 0 1 83 52" fill="none" stroke="#ef4444" stroke-width="1.5" stroke-dasharray="3,3" />
            <text x="70" y="44" font-size="10" font-weight="700" fill="#dc2626" text-anchor="middle">Gap</text>

            <rect x="18" y="126" width="104" height="20" rx="5" fill="#fef2f2" stroke="#fecaca" stroke-width="1" />
            <text x="70" y="140" font-size="10" font-weight="700" fill="#b91c1c" text-anchor="middle">No Shared Side</text>
          </g>
        </svg>
      </div>

      <div class="criteria">
        <div class="tag no">✗ Separate Vertices</div>
        <div class="tag no">✗ No Common Side</div>
      </div>
    </div>
  </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }
    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: space-between;
      min-height: 100%;
      padding: 12px 16px;
      user-select: none;
    }
    .banner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 22px;
      font-weight: 700;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      padding: 8px 18px;
      border-radius: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      margin-bottom: 6px;
    }
    .val-a {
      color: #0284c7;
      transition: color 0.15s ease;
    }
    .val-b {
      color: #7048e8;
      transition: color 0.15s ease;
    }
    .val-sum {
      color: #1e2945;
    }
    .svg-container {
      width: 100%;
      max-width: 330px;
      aspect-ratio: 1 / 0.88;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .controls {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: 100%;
      max-width: 320px;
      margin-top: 4px;
    }
    .slider-row {
      display: flex;
      align-items: center;
      width: 100%;
      gap: 10px;
    }
    .slider {
      flex: 1;
      accent-color: #22b7ff;
      height: 6px;
      cursor: pointer;
    }
    .presets {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .preset-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 5px 10px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .preset-btn.active {
      background: #1e2945;
      border-color: #1e2945;
      color: #ffffff;
    }
    .label-text {
      font-size: 15px;
      font-weight: 700;
      dominant-baseline: central;
      text-anchor: middle;
      pointer-events: none;
    }
  </style>
</head>
<body>

  
  <div class="banner">
    <span class="val-a" id="bannerA">35°</span>
    <span>+</span>
    <span class="val-b" id="bannerB">55°</span>
    <span>=</span>
    <span class="val-sum">90°</span>
  </div>

  
  <div class="svg-container">
    <svg viewBox="0 0 320 280">
      <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 L 9 5 L 0 9 z" fill="#1e2945" />
        </marker>
        <marker id="arrow-ray" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1 L 9 5 L 0 9 z" fill="#0284c7" />
        </marker>
      </defs>

      
      <path id="wedgeA" fill="#22b7ff" fill-opacity="0.25" stroke="#22b7ff" stroke-width="2" />
      <path id="wedgeB" fill="#845ef7" fill-opacity="0.22" stroke="#845ef7" stroke-width="2" />

      
      <path d="M 70 210 L 90 210 L 90 230" fill="none" stroke="#64748b" stroke-width="2" />

      
      
      <line x1="70" y1="230" x2="70" y2="28" stroke="#1e2945" stroke-width="3" stroke-linecap="round" marker-end="url(#arrow)" />
      
      <line x1="70" y1="230" x2="285" y2="230" stroke="#1e2945" stroke-width="3" stroke-linecap="round" marker-end="url(#arrow)" />

      
      <line id="splitRay" x1="70" y1="230" x2="220" y2="120" stroke="#0284c7" stroke-width="3" stroke-linecap="round" marker-end="url(#arrow-ray)" />

      
      <circle cx="70" cy="230" r="4.5" fill="#1e2945" />

      
      <text id="labelA" class="label-text" fill="#0369a1" x="145" y="200">a = 35°</text>
      <text id="labelB" class="label-text" fill="#6741d9" x="115" y="145">b = 55°</text>
    </svg>
  </div>

  
  <div class="controls">
    <div class="slider-row">
      <input type="range" id="angleSlider" class="slider" min="10" max="80" value="35" step="1" aria-label="Adjust angle a">
    </div>
    <div class="presets">
      <button class="preset-btn active" onclick="setAngle(35)">35° + 55°</button>
      <button class="preset-btn" onclick="setAngle(45)">45° + 45°</button>
      <button class="preset-btn" onclick="setAngle(60)">60° + 30°</button>
      <button class="preset-btn" onclick="setAngle(20)">20° + 70°</button>
    </div>
  </div>

  <script>
    const ox = 70;
    const oy = 230;
    const rayLen = 195;
    const arcRadius = 110;
    const arcRadiusInner = 90;

    const slider = document.getElementById('angleSlider');
    const bannerA = document.getElementById('bannerA');
    const bannerB = document.getElementById('bannerB');
    const splitRay = document.getElementById('splitRay');
    const wedgeA = document.getElementById('wedgeA');
    const wedgeB = document.getElementById('wedgeB');
    const labelA = document.getElementById('labelA');
    const labelB = document.getElementById('labelB');
    const presetBtns = document.querySelectorAll('.preset-btn');

    function updateDiagram(deg) {
      const a = Math.max(5, Math.min(85, deg));
      const b = 90 - a;

      bannerA.textContent = a + '°';
      bannerB.textContent = b + '°';

      const radA = (a * Math.PI) / 180;
      const rx = ox + rayLen * Math.cos(radA);
      const ry = oy - rayLen * Math.sin(radA);

      splitRay.setAttribute('x2', rx.toFixed(1));
      splitRay.setAttribute('y2', ry.toFixed(1));

      // Wedge A (0 to a)
      const ax = ox + arcRadius * Math.cos(radA);
      const ay = oy - arcRadius * Math.sin(radA);
      wedgeA.setAttribute('d', `M ${ox} ${oy} L ${ox + arcRadius} ${oy} A ${arcRadius} ${arcRadius} 0 0 0 ${ax.toFixed(1)} ${ay.toFixed(1)} Z`);

      // Wedge B (a to 90)
      const bx = ox + arcRadiusInner * Math.cos(radA);
      const by = oy - arcRadiusInner * Math.sin(radA);
      wedgeB.setAttribute('d', `M ${ox} ${oy} L ${bx.toFixed(1)} ${by.toFixed(1)} A ${arcRadiusInner} ${arcRadiusInner} 0 0 0 ${ox} ${oy - arcRadiusInner} Z`);

      // Position Label A (midpoint angle a / 2)
      const midA = (a / 2) * Math.PI / 180;
      const lDistA = 65;
      labelA.setAttribute('x', (ox + lDistA * Math.cos(midA)).toFixed(1));
      labelA.setAttribute('y', (oy - lDistA * Math.sin(midA)).toFixed(1));
      labelA.textContent = `a = ${a}°`;

      // Position Label B (midpoint between a and 90)
      const midB = ((a + 90) / 2) * Math.PI / 180;
      const lDistB = 60;
      labelB.setAttribute('x', (ox + lDistB * Math.cos(midB)).toFixed(1));
      labelB.setAttribute('y', (oy - lDistB * Math.sin(midB)).toFixed(1));
      labelB.textContent = `b = ${b}°`;

      // Preset button active states
      presetBtns.forEach(btn => {
        const val = parseInt(btn.textContent);
        if (val === a) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });
    }

    function setAngle(deg) {
      slider.value = deg;
      updateDiagram(deg);
    }

    slider.addEventListener('input', (e) => {
      updateDiagram(parseInt(e.target.value));
    });

    // Initialize
    updateDiagram(35);
  </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 {
      width: 100%;
      min-height: 100vh;
      background: #f8fafc;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px 12px;
      user-select: none;
      -webkit-user-select: none;
    }

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

    .hierarchy-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 32px;
      position: relative;
      padding: 6px 0;
    }

    /* SVG arrow layer */
    .arrows-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
      overflow: visible;
    }

    .arrow-path {
      stroke: #cbd5e1;
      stroke-width: 2;
      stroke-linecap: round;
      fill: none;
      transition: stroke 0.3s ease, stroke-width 0.3s ease;
    }

    .arrow-path.active {
      stroke: #2563eb;
      stroke-width: 2.5;
    }

    /* Levels & Nodes */
    .level {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      z-index: 2;
      width: 100%;
    }

    .node {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      text-align: center;
      box-shadow: 0 2px 6px rgba(30, 41, 69, 0.06);
      cursor: pointer;
      transition: box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
      min-width: 120px;
      max-width: 220px;
      flex: 1;
    }

    .node:hover {
      border-color: #94a3b8;
      box-shadow: 0 4px 10px rgba(30, 41, 69, 0.09);
    }

    .node.peak {
      max-width: 260px;
      background: #faf5ff;
      border-color: #d8b4fe;
    }

    .node.foundation {
      max-width: 320px;
      background: #f0fdf4;
      border-color: #86efac;
    }

    .node.branch-def {
      background: #eff6ff;
      border-color: #93c5fd;
    }

    .node.branch-ax {
      background: #fffbeb;
      border-color: #fcd34d;
    }

    /* Active Highlight States */
    .node.active {
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25), 0 6px 14px rgba(30, 41, 69, 0.12);
    }
    .node.peak.active {
      border-color: #9333ea;
      background: #f3e8ff;
    }
    .node.foundation.active {
      border-color: #16a34a;
      background: #dcfce7;
    }
    .node.branch-def.active {
      border-color: #2563eb;
      background: #dbeafe;
    }
    .node.branch-ax.active {
      border-color: #d97706;
      background: #fef3c7;
    }

    .badge {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      margin-bottom: 3px;
      color: #64748b;
    }

    .node.peak .badge { color: #7e22ce; }
    .node.foundation .badge { color: #15803d; }
    .node.branch-def .badge { color: #1d4ed8; }
    .node.branch-ax .badge { color: #b45309; }

    .title {
      font-size: 14px;
      font-weight: 700;
      line-height: 1.25;
      color: #1e2945;
    }

    .subtitle {
      font-size: 11px;
      color: #64748b;
      margin-top: 2px;
      line-height: 1.2;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      z-index: 3;
      padding-top: 4px;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: background 0.2s ease, border-color 0.2s ease;
    }

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

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

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

    .dot:hover {
      background: #94a3b8;
    }

    .dot.active {
      background: #2563eb;
      outline: 2px solid rgba(37, 99, 235, 0.25);
    }

    @media (max-width: 420px) {
      .hierarchy-container {
        gap: 26px;
      }
      .level {
        gap: 8px;
      }
      .node {
        padding: 8px 10px;
        min-width: 100px;
      }
      .title {
        font-size: 13px;
      }
      .subtitle {
        font-size: 10px;
      }
      .badge {
        font-size: 9px;
      }
    }
  </style>
</head>
<body>

  <div class="wrapper">
    <div class="hierarchy-container" id="diagram">
      
      <svg class="arrows-svg" id="arrowSvg">
        <defs>
          <marker id="arrow-def" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M 1 1.5 L 7 4 L 1 6.5 z" fill="#94a3b8" />
          </marker>
          <marker id="arrow-active" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M 1 1.5 L 7 4 L 1 6.5 z" fill="#2563eb" />
          </marker>
        </defs>
        
        <path id="arrow-f-to-d" class="arrow-path" marker-end="url(#arrow-def)" />
        <path id="arrow-f-to-a" class="arrow-path" marker-end="url(#arrow-def)" />
        
        <path id="arrow-d-to-t" class="arrow-path" marker-end="url(#arrow-def)" />
        <path id="arrow-a-to-t" class="arrow-path" marker-end="url(#arrow-def)" />
      </svg>

      
      <div class="level">
        <div class="node peak" id="node-peak" onclick="setStep(2)">
          <div class="badge">Level 3 • Top Peak</div>
          <div class="title">Theorems</div>
          <div class="subtitle">Proven Statements via Deductive Logic</div>
        </div>
      </div>

      
      <div class="level">
        <div class="node branch-def" id="node-def" onclick="setStep(1)">
          <div class="badge">Level 2 • Definitions</div>
          <div class="title">Definitions</div>
          <div class="subtitle">Segment, Ray, Collinear...</div>
        </div>
        <div class="node branch-ax" id="node-ax" onclick="setStep(1)">
          <div class="badge">Level 2 • Axioms</div>
          <div class="title">Axioms / Postulates</div>
          <div class="subtitle">e.g. 2 points define 1 line</div>
        </div>
      </div>

      
      <div class="level">
        <div class="node foundation" id="node-found" onclick="setStep(0)">
          <div class="badge">Level 1 • Foundation</div>
          <div class="title">Undefined Terms</div>
          <div class="subtitle">Point, Line, Plane</div>
        </div>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn" id="playBtn" onclick="togglePlay()">
        <span id="playIcon">⏸</span> <span id="playText">Pause</span>
      </button>
      <div class="dots">
        <div class="dot" onclick="setStep(0)" title="Level 1: Foundation"></div>
        <div class="dot" onclick="setStep(1)" title="Level 2: Building Blocks"></div>
        <div class="dot" onclick="setStep(2)" title="Level 3: Theorems"></div>
      </div>
    </div>
  </div>

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

    const nodes = {
      found: document.getElementById('node-found'),
      def: document.getElementById('node-def'),
      ax: document.getElementById('node-ax'),
      peak: document.getElementById('node-peak')
    };

    const arrows = {
      fToD: document.getElementById('arrow-f-to-d'),
      fToA: document.getElementById('arrow-f-to-a'),
      dToT: document.getElementById('arrow-d-to-t'),
      aToT: document.getElementById('arrow-a-to-t')
    };

    const dots = document.querySelectorAll('.dot');
    const playIcon = document.getElementById('playIcon');
    const playText = document.getElementById('playText');

    function updateArrowPaths() {
      const container = document.getElementById('diagram');
      if (!container) return;
      const containerRect = container.getBoundingClientRect();

      const getAnchor = (el) => {
        const r = el.getBoundingClientRect();
        return {
          top: { x: r.left + r.width / 2 - containerRect.left, y: r.top - containerRect.top },
          bottom: { x: r.left + r.width / 2 - containerRect.left, y: r.bottom - containerRect.top },
          width: r.width,
          height: r.height
        };
      };

      const found = getAnchor(nodes.found);
      const def = getAnchor(nodes.def);
      const ax = getAnchor(nodes.ax);
      const peak = getAnchor(nodes.peak);

      const startOffset = 3;
      const endOffset = 8;

      // Foundation to Definitions
      const startF1 = { x: found.top.x - Math.min(found.width * 0.24, 42), y: found.top.y - startOffset };
      const targetD = { x: def.bottom.x, y: def.bottom.y + endOffset };
      const midY1 = (startF1.y + targetD.y) / 2;
      arrows.fToD.setAttribute('d', `M ${startF1.x} ${startF1.y} C ${startF1.x} ${midY1}, ${targetD.x} ${midY1}, ${targetD.x} ${targetD.y}`);

      // Foundation to Axioms
      const startF2 = { x: found.top.x + Math.min(found.width * 0.24, 42), y: found.top.y - startOffset };
      const targetA = { x: ax.bottom.x, y: ax.bottom.y + endOffset };
      arrows.fToA.setAttribute('d', `M ${startF2.x} ${startF2.y} C ${startF2.x} ${midY1}, ${targetA.x} ${midY1}, ${targetA.x} ${targetA.y}`);

      // Definitions to Peak
      const startD = { x: def.top.x, y: def.top.y - startOffset };
      const targetP1 = { x: peak.bottom.x - Math.min(peak.width * 0.22, 34), y: peak.bottom.y + endOffset };
      const midY2 = (startD.y + targetP1.y) / 2;
      arrows.dToT.setAttribute('d', `M ${startD.x} ${startD.y} C ${startD.x} ${midY2}, ${targetP1.x} ${midY2}, ${targetP1.x} ${targetP1.y}`);

      // Axioms to Peak
      const startA = { x: ax.top.x, y: ax.top.y - startOffset };
      const targetP2 = { x: peak.bottom.x + Math.min(peak.width * 0.22, 34), y: peak.bottom.y + endOffset };
      arrows.aToT.setAttribute('d', `M ${startA.x} ${startA.y} C ${startA.x} ${midY2}, ${targetP2.x} ${midY2}, ${targetP2.x} ${targetP2.y}`);
    }

    function renderStep() {
      Object.values(nodes).forEach(n => n.classList.remove('active'));
      Object.values(arrows).forEach(a => {
        a.classList.remove('active');
        a.setAttribute('marker-end', 'url(#arrow-def)');
      });
      dots.forEach(d => d.classList.remove('active'));

      dots[currentStep].classList.add('active');

      if (currentStep === 0) {
        nodes.found.classList.add('active');
      } else if (currentStep === 1) {
        nodes.found.classList.add('active');
        nodes.def.classList.add('active');
        nodes.ax.classList.add('active');
        arrows.fToD.classList.add('active');
        arrows.fToA.classList.add('active');
        arrows.fToD.setAttribute('marker-end', 'url(#arrow-active)');
        arrows.fToA.setAttribute('marker-end', 'url(#arrow-active)');
      } else if (currentStep === 2) {
        nodes.found.classList.add('active');
        nodes.def.classList.add('active');
        nodes.ax.classList.add('active');
        nodes.peak.classList.add('active');
        Object.values(arrows).forEach(a => {
          a.classList.add('active');
          a.setAttribute('marker-end', 'url(#arrow-active)');
        });
      }
    }

    function setStep(step) {
      currentStep = step;
      renderStep();
    }

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

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3200);
    }

    function togglePlay() {
      playing = !playing;
      if (playing) {
        playIcon.textContent = '⏸';
        playText.textContent = 'Pause';
        startTimer();
      } else {
        playIcon.textContent = '▶';
        playText.textContent = 'Play';
        clearInterval(timer);
      }
    }

    window.addEventListener('resize', updateArrowPaths);
    
    if (window.ResizeObserver) {
      const ro = new ResizeObserver(() => updateArrowPaths());
      ro.observe(document.getElementById('diagram'));
    }

    window.addEventListener('DOMContentLoaded', () => {
      updateArrowPaths();
      renderStep();
      startTimer();
    });
  </script>
</body>
</html>

Undefined Terms: Points, Lines, Planes, and Axioms

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
    body {
      background: #f8fafc;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      user-select: none;
    }

    .legend {
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .legend-tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 4px 10px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .tag-undef { background: #f3e8ff; color: #7c3aed; border: 1px solid #ddd6fe; }
    .tag-axiom { background: #e0f2fe; color: #0284c7; border: 1px solid #bae6fd; }
    .tag-def   { background: #dcfce7; color: #059669; border: 1px solid #bbf7d0; }

    .matrix {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .card-item {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .card-item.correct-undef { border-color: #8b5cf6; box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15); }
    .card-item.correct-axiom { border-color: #22b7ff; box-shadow: 0 2px 8px rgba(34, 183, 255, 0.15); }
    .card-item.correct-def   { border-color: #10b981; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15); }

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .card-content {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
    }
    .card-icon {
      width: 42px;
      height: 42px;
      flex-shrink: 0;
      background: #f1f5f9;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .card-text {
      font-size: 13px;
      line-height: 1.35;
      font-weight: 500;
      color: #334155;
    }

    .options {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }
    .opt-btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 4px;
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }
    .opt-btn:active { transform: scale(0.98); }
    
    .opt-btn.active-undef {
      background: #8b5cf6;
      border-color: #8b5cf6;
      color: #ffffff;
    }
    .opt-btn.active-axiom {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
    }
    .opt-btn.active-def {
      background: #10b981;
      border-color: #10b981;
      color: #ffffff;
    }

    .badge-status {
      font-size: 10px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      display: none;
    }
    .status-show { display: inline-block; }

    .footer-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      padding: 0 4px;
    }
    .reset-btn {
      background: none;
      border: none;
      color: #0284c7;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      padding: 2px 6px;
    }
  </style>
</head>
<body>

  
  <div class="legend">
    <div class="legend-tag tag-undef">● Undefined</div>
    <div class="legend-tag tag-axiom">✦ Axiom</div>
    <div class="legend-tag tag-def">✓ Definition</div>
  </div>

  
  <div class="matrix">
    
    
    <div class="card-item" id="card-0" data-correct="undef">
      <div class="card-header">
        <div class="card-content">
          <div class="card-icon">
            <svg width="28" height="28" viewBox="0 0 28 28">
              <circle cx="14" cy="14" r="4" fill="#8b5cf6" />
              <text x="14" y="25" font-size="8" font-weight="bold" fill="#8b5cf6" text-anchor="middle">P</text>
            </svg>
          </div>
          <div class="card-text">"A dot indicating an exact location"</div>
        </div>
        <span class="badge-status" id="badge-0"></span>
      </div>
      <div class="options">
        <button class="opt-btn" onclick="selectType(0, 'undef')">Undefined</button>
        <button class="opt-btn" onclick="selectType(0, 'axiom')">Axiom</button>
        <button class="opt-btn" onclick="selectType(0, 'def')">Definition</button>
      </div>
    </div>

    
    <div class="card-item" id="card-1" data-correct="axiom">
      <div class="card-header">
        <div class="card-content">
          <div class="card-icon">
            <svg width="34" height="28" viewBox="0 0 34 28">
              <polygon points="3,6 20,4 27,16 10,18" fill="#bae6fd" fill-opacity="0.6" stroke="#0284c7" stroke-width="1.2"/>
              <polygon points="12,2 29,8 21,24 4,18" fill="#e0f2fe" fill-opacity="0.5" stroke="#0284c7" stroke-width="1.2"/>
              <line x1="7" y1="18" x2="24" y2="10" stroke="#22b7ff" stroke-width="2.5" stroke-linecap="round"/>
            </svg>
          </div>
          <div class="card-text">"If two distinct planes intersect, their intersection is a line"</div>
        </div>
        <span class="badge-status" id="badge-1"></span>
      </div>
      <div class="options">
        <button class="opt-btn" onclick="selectType(1, 'undef')">Undefined</button>
        <button class="opt-btn" onclick="selectType(1, 'axiom')">Axiom</button>
        <button class="opt-btn" onclick="selectType(1, 'def')">Definition</button>
      </div>
    </div>

    
    <div class="card-item" id="card-2" data-correct="def">
      <div class="card-header">
        <div class="card-content">
          <div class="card-icon">
            <svg width="34" height="28" viewBox="0 0 34 28">
              <line x1="6" y1="14" x2="26" y2="14" stroke="#10b981" stroke-width="2" stroke-linecap="round"/>
              <circle cx="6" cy="14" r="3" fill="#10b981" />
              <polygon points="28,14 23,11 23,17" fill="#10b981" />
            </svg>
          </div>
          <div class="card-text">"A ray is a part of a line with one endpoint extending forever"</div>
        </div>
        <span class="badge-status" id="badge-2"></span>
      </div>
      <div class="options">
        <button class="opt-btn" onclick="selectType(2, 'undef')">Undefined</button>
        <button class="opt-btn" onclick="selectType(2, 'axiom')">Axiom</button>
        <button class="opt-btn" onclick="selectType(2, 'def')">Definition</button>
      </div>
    </div>

  </div>

  <div class="footer-bar">
    <span id="score-text">Classify each statement</span>
    <button class="reset-btn" onclick="resetAll()">Reset</button>
  </div>

  <script>
    const userSelections = [null, null, null];
    const correctAnswers = ['undef', 'axiom', 'def'];

    function playTone(freq, dur = 0.15) {
      try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.frequency.value = freq;
        osc.connect(gain);
        gain.connect(ctx.destination);
        gain.gain.setValueAtTime(0.12, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + dur);
        osc.start();
        osc.stop(ctx.currentTime + dur);
      } catch (e) {}
    }

    function selectType(cardIndex, type) {
      userSelections[cardIndex] = type;
      const card = document.getElementById(`card-${cardIndex}`);
      const btns = card.querySelectorAll('.opt-btn');
      const badge = document.getElementById(`badge-${cardIndex}`);

      btns.forEach(b => {
        b.className = 'opt-btn';
        if (b.textContent.toLowerCase().includes(type === 'undef' ? 'undefined' : type)) {
          b.classList.add(`active-${type}`);
        }
      });

      card.classList.remove('correct-undef', 'correct-axiom', 'correct-def');
      const isCorrect = (type === correctAnswers[cardIndex]);

      if (isCorrect) {
        card.classList.add(`correct-${type}`);
        badge.className = 'badge-status status-show';
        if (type === 'undef') {
          badge.textContent = '✓ Undefined Term';
          badge.style.background = '#f3e8ff';
          badge.style.color = '#7c3aed';
          playTone(440);
        } else if (type === 'axiom') {
          badge.textContent = '✓ Axiom';
          badge.style.background = '#e0f2fe';
          badge.style.color = '#0284c7';
          playTone(554.37);
        } else if (type === 'def') {
          badge.textContent = '✓ Definition';
          badge.style.background = '#dcfce7';
          badge.style.color = '#059669';
          playTone(659.25);
        }
      } else {
        badge.className = 'badge-status status-show';
        badge.textContent = 'Try again';
        badge.style.background = '#fee2e2';
        badge.style.color = '#dc2626';
        playTone(220, 0.2);
      }

      updateScore();
    }

    function updateScore() {
      let correctCount = 0;
      userSelections.forEach((sel, idx) => {
        if (sel === correctAnswers[idx]) correctCount++;
      });

      const scoreLabel = document.getElementById('score-text');
      if (correctCount === 3) {
        scoreLabel.innerHTML = '✨ <strong>All 3 accurately classified!</strong>';
        scoreLabel.style.color = '#059669';
      } else {
        scoreLabel.textContent = `${correctCount} of 3 classified`;
        scoreLabel.style.color = '#64748b';
      }
    }

    function resetAll() {
      for (let i = 0; i < 3; i++) {
        userSelections[i] = null;
        const card = document.getElementById(`card-${i}`);
        card.classList.remove('correct-undef', 'correct-axiom', 'correct-def');
        const btns = card.querySelectorAll('.opt-btn');
        btns.forEach(b => b.className = 'opt-btn');
        const badge = document.getElementById(`badge-${i}`);
        badge.className = 'badge-status';
      }
      updateScore();
    }
  </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: #f8f9fa;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100%;
    }
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      width: 100%;
      max-width: 680px;
      margin: 0 auto;
    }
    @media (max-width: 480px) {
      .cards-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }
    .term-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    }
    .term-card:hover, .term-card.active {
      border-color: #22b7ff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.15);
      background: #f0f9ff;
    }
    .term-title {
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 8px;
    }
    .visual-box {
      width: 100%;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .badge {
      display: inline-block;
      background: #e0f2fe;
      color: #0369a1;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 999px;
      margin-bottom: 4px;
      letter-spacing: 0.3px;
    }
    .term-card:hover .badge, .term-card.active .badge {
      background: #22b7ff;
      color: #ffffff;
    }
    .subtext {
      font-size: 11px;
      color: #64748b;
      line-height: 1.3;
      font-weight: 500;
    }
    .label-text {
      font-family: system-ui, sans-serif;
      font-size: 12px;
      font-weight: 600;
      fill: #1e2945;
    }
    .math-italic {
      font-style: italic;
      font-family: "Times New Roman", Times, serif;
      font-size: 14px;
    }
  </style>
</head>
<body>

  <div class="cards-grid">
    
    <div class="term-card" tabindex="0" role="button" aria-label="Point: 0 Dimensions">
      <div class="term-title">Point</div>
      <div class="visual-box">
        <svg viewBox="0 0 120 80">
          <circle cx="60" cy="40" r="5.5" fill="#1e2945" />
          <text x="60" y="24" text-anchor="middle" class="label-text">Point A</text>
        </svg>
      </div>
      <span class="badge">0D</span>
      <div class="subtext">No length, width,<br>or height</div>
    </div>

    
    <div class="term-card" tabindex="0" role="button" aria-label="Line: 1 Dimension">
      <div class="term-title">Line</div>
      <div class="visual-box">
        <svg viewBox="0 0 140 80">
          <defs>
            <marker id="arr-left" viewBox="0 0 10 10" refX="2" refY="5" markerWidth="6" markerHeight="6" orient="auto">
              <path d="M 8 2 L 2 5 L 8 8" fill="none" stroke="#1e2945" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
            </marker>
            <marker id="arr-right" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
              <path d="M 2 2 L 8 5 L 2 8" fill="none" stroke="#1e2945" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
            </marker>
          </defs>
          <line x1="12" y1="44" x2="128" y2="44" stroke="#1e2945" stroke-width="2" marker-start="url(#arr-left)" marker-end="url(#arr-right)" />
          <circle cx="45" cy="44" r="3.5" fill="#1e2945" />
          <text x="45" y="34" text-anchor="middle" class="label-text">A</text>
          <circle cx="95" cy="44" r="3.5" fill="#1e2945" />
          <text x="95" y="34" text-anchor="middle" class="label-text">B</text>
          <text x="122" y="32" class="math-italic" fill="#1e2945">ℓ</text>
          <text x="70" y="66" text-anchor="middle" class="label-text" font-size="11">Line AB</text>
        </svg>
      </div>
      <span class="badge">1D</span>
      <div class="subtext">Infinite length,<br>no thickness</div>
    </div>

    
    <div class="term-card" tabindex="0" role="button" aria-label="Plane: 2 Dimensions">
      <div class="term-title">Plane</div>
      <div class="visual-box">
        <svg viewBox="0 0 130 80">
          <polygon points="30,16 122,16 98,64 6,64" fill="#22b7ff" fill-opacity="0.18" stroke="#22b7ff" stroke-width="2" stroke-linejoin="round" />
          <text x="22" y="36" class="math-italic" font-weight="bold" fill="#0369a1" font-size="16">P</text>
          <text x="64" y="44" text-anchor="middle" class="label-text">Plane P</text>
        </svg>
      </div>
      <span class="badge">2D</span>
      <div class="subtext">Infinite length & width,<br>no thickness</div>
    </div>
  </div>

  <script>
    const cards = document.querySelectorAll('.term-card');
    cards.forEach(card => {
      card.addEventListener('click', () => {
        cards.forEach(c => c.classList.remove('active'));
        card.classList.add('active');
      });
      card.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          cards.forEach(c => c.classList.remove('active'));
          card.classList.add('active');
        }
      });
    });
  </script>
</body>
</html>

Conditional Statements: Hypotheses and Conclusions

Converse, Inverse, Contrapositive, and Biconditionals

Counterexamples and Disproving Conjectures

Two-Column Proofs and Deductive Reasoning Chains

Paragraph and Flowchart Proof Formats

Indirect Proof and Proof by Contradiction

math

Logic, Definitions, and Geometric Proof Methods

生活中的立体图形与平面图形

常见几何体的分类：柱体、锥体与球体

几何体的构成要素：顶点、棱与面

平面与曲面的区别与特征

面与面相交成线：直线与曲线

线与线相交成点：交点的概念

动态几何形成：点动成线

动态几何形成：线动成面

动态几何形成：面动成体

点、线、面、体关系综合归纳与反思

几何图形与点线面体的初步认识

面与面相交得线：直线与曲线

线与线相交得点：交点的概念

常见几何体与点线面构成基础

平面内两直线的位置关系与平行线的定义

平行公理：过直线外一点有且只有一条直线与已知直线平行

平行公理的推论：平行于同一直线的两条直线互相平行

平行传递性在多条直线中的推广与几何推导

平行线概念、平行公理与传递性真假命题辨析

平行线的概念、平行公理与传递性

相交线的概念与邻补角的定义及特征

对顶角的概念与图形识别

对顶角相等性质的探索与逻辑推导

余角的概念与互余数量关系

补角的概念与互补数量关系

同角或等角的余角相等的性质探究

同角或等角的补角相等的性质探究

利用一元一次方程求解余角与补角问题

多条直线相交于一点的角度关系与计数规律

方位角与余角、补角在实际生活中的综合应用

相交线角度关系的几何文字说理与规范书写

相交线与角的关系：对顶角、邻补角、余角与补角

Finding Unknown Vertically Opposite Angles

Perpendicular Lines and Angle Bisector Theorems

Parallel Lines and Transversals: Alternate Interior and Exterior Angles

Parallel Lines and Transversals: Corresponding Angles

Parallel Lines and Transversals: Same-Side Interior Angles

Using Transversal Angle Relationships to Find Missing Angles

Proving Angle Relationships in Parallel Lines

Proving Lines Are Parallel Using Angle Relationships

Angle Relationships and Parallel Line Proofs

垂线与垂足的概念及垂直符号表示法

利用三角板画已知直线的垂线

利用量角器过指定点画已知直线的垂线

垂直基本事实：同一平面内过一点有且只有一条直线与已知直线垂直

垂线段的概念及其与垂线、线段的辨析

包含垂直条件的相交线角度综合计算

折纸活动中的垂直性质探索与作图检验

垂线、垂足与垂直的基本事实

用三角尺与直尺画平行线：“一贴、二靠、三移、四画”

过直线外指定点画平行线的操作与作图规范

尺规作图基础：作一个角等于已知角

尺规作图：利用“同位角相等”过直线外一点作平行线

尺规作图：利用“内错角相等”过直线外一点作平行线

平行线尺规作图的综合应用与作图语言规范

平行线的画法与尺规作图

动态生成之美：点动成线

动态生成之美：线动成面

动态生成之美：面动成体

几何体的旋转生成探究

多面体的欧拉公式初步探究

点、线、面、体关系综合与反思

点线面体的动态生成与几何探究

直线的概念与字母表示法

射线的概念、端点与表示方法

线段的概念、端点与表示方法

直线、射线、线段的联系与区别

点与直线的空间位置关系及几何语言

两条直线相交与交点的唯一性

基本事实：两点确定一条直线

“两点确定一条直线”在生活中的应用

平面内多点确定直线最多条数的规律探索

直线、射线、线段与几何语言综合训练

直线、射线、线段与“两点确定一条直线”

三线八角的识别：同位角、内错角与同旁内角的位置特征

平行线基本事实Ⅱ：同位角相等，两直线平行

平行线判定定理：内错角相等，两直线平行（探索与证明）

平行线判定定理：同旁内角互补，两直线平行（探索与证明）

垂直于同一条直线的两条直线平行之判定

平行线判定的复合图形角度计算与推理证明

平行线的判定定理与几何证明

垂线段性质探究：连接直线外一点与直线上各点的所有线段中垂线段最短

点到直线的距离的概念与几何本质

点到直线的距离的实际测量与画法

垂线段最短在实际生活路线与工程规划中的应用

平面直角坐标系中点到坐标轴的距离模型

点到直线的距离与垂线段最短性质

直线的概念与表示方法

直线、射线、线段的区别与联系

直线的公理：两点确定一条直线

点与直线的位置关系

直线、射线与线段的基础概念与公理

线段长短的比较：度量法与叠合法

线段的和与差概念及图形表示

尺规作图：线段的和与差作图

线段中点的定义与符号语言表达

线段的三等分点与 n 等分点

同一直线上线段中点的基本计算模型

线段计算中的分类讨论思想：点的位置不确定

线段计算中的方程思想：设未知数列方程

线段的比值与单位的统一计算

线段和差与中点综合计算专题反思

线段的长短比较、和差与线段中点

基本事实：两点之间，线段最短

两点间的距离的数学定义与本质

两点间距离的工具度量与准确表达

“两点之间线段最短”在路线规划中的应用

三角形三边关系：两边之和大于第三边

数轴上两点间的距离与绝对值表示

平面内折线距离与动点位置最短优化

两点距离与最短路径专题综合反思

“两点之间线段最短”与两点间距离

平行线性质定理Ⅰ：两直线平行，同位角相等（含证明思路）

平行线性质定理Ⅱ：两直线平行，内错角相等（探索与证明）

平行线性质定理Ⅲ：两直线平行，同旁内角互补（探索与证明）

平行线判定与性质的联系、区别与互逆关系

利用平行线性质求未知角的基础计算与方程思想

平行线中同位角、内错角、同旁内角角平分线的位置关系探究

平行线的性质定理与角的关系探究

平面内多点确定直线数量的规律探索

多条直线相交最多交点数的规律探究

直线分割平面的区域数规律

几何语言的识读与图形转化

线的基础性质易错点剖析与辨析

直线、射线、线段综合巩固与思维拓展

直线的规律探究与几何语言进阶

两条直线被第三条直线所截：截线与被截线的识别

同位角的概念、位置特征与“F”型骨架识别

内错角的概念、位置特征与“Z”型骨架识别

同旁内角的概念、位置特征与“U”型骨架识别

复杂组合几何图形中三类角的分离提取技巧

同位角、内错角、同旁内角特征对比与分类辨析

相交线背景下三线八角的度数推导与方程求解

三线八角：同位角、内错角与同旁内角辨析

平行线拐点辅助线模型：过折点作平行线（凹凸角与“猪蹄模型”）

平行线多拐点模型：同向折线与“铅笔头模型”的角度关系推导

OGM.9.GEO.1

Aligned learning resources

Related diagrams