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

    .container {
      width: 100%;
      max-width: 620px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    
    .nav-toggle {
      display: inline-flex;
      background: #e2e8f0;
      padding: 3px;
      border-radius: 20px;
      gap: 4px;
    }
    
    .toggle-btn {
      border: none;
      background: transparent;
      padding: 6px 16px;
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      border-radius: 16px;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }
    
    .toggle-btn:hover {
      color: #0f172a;
    }
    
    .toggle-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .main-grid {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: stretch;
      gap: 8px;
      width: 100%;
    }

    .form-card {
      border-radius: 12px;
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .form-card.standard {
      border: 1.5px solid #bae6fd;
      background: #f0f9ff;
    }

    .form-card.general {
      border: 1.5px solid #ddd6fe;
      background: #f5f3ff;
    }

    .card-title {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.4px;
      text-transform: uppercase;
    }
    
    .standard .card-title { color: #0284c7; }
    .general .card-title { color: #7c3aed; }

    .eq-display {
      background: #ffffff;
      padding: 10px 8px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      width: 100%;
      min-height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #0f172a;
      line-height: 1.3;
    }

    .specs {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
      margin-top: auto;
    }

    .spec-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #ffffff;
      padding: 7px 10px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
      font-size: 12.5px;
      gap: 6px;
    }

    .spec-label {
      color: #64748b;
      font-weight: 700;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      flex-shrink: 0;
    }

    .spec-val {
      font-weight: 600;
      color: #0f172a;
      text-align: right;
    }

    /* Central Transition Bridge */
    .bridge {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 6px 2px;
    }

    .bridge-action {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 8px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      min-width: 96px;
    }

    .bridge-label {
      font-size: 9.5px;
      font-weight: 800;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      white-space: nowrap;
    }

    .arrow-icon {
      font-size: 15px;
      line-height: 1;
      font-weight: 900;
      color: #0284c7;
    }

    .bridge-action.rev .arrow-icon {
      color: #7c3aed;
    }

    /* Math typography styling */
    .math {
      font-family: "Cambria Math", "Times New Roman", Times, serif;
      font-style: normal;
      letter-spacing: 0.2px;
    }
    .math i {
      font-style: italic;
      padding: 0 0.5px;
    }
    .math sup {
      font-size: 0.75em;
      line-height: 0;
      position: relative;
      vertical-align: baseline;
      top: -0.55em;
    }
    .radical {
      display: inline-flex;
      align-items: baseline;
      vertical-align: middle;
    }
    .rad-symbol {
      font-family: system-ui, sans-serif;
      font-size: 1.15em;
      line-height: 0.9;
      margin-right: 1px;
    }
    .radicand {
      border-top: 1.2px solid currentColor;
      padding: 0 2px;
      line-height: 1.15;
    }

    @media (max-width: 520px) {
      .main-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .bridge {
        flex-direction: row;
        justify-content: center;
        gap: 12px;
        padding: 2px 0;
      }
      .bridge-action {
        flex-direction: row;
        gap: 6px;
        padding: 5px 10px;
        min-width: auto;
      }
      .form-card {
        padding: 10px;
      }
      .eq-display {
        font-size: 13px;
        min-height: 44px;
        padding: 6px 4px;
      }
      .spec-item {
        padding: 5px 8px;
        font-size: 12px;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="nav-toggle">
      <button class="toggle-btn active" id="btnFormula" onclick="switchMode('formula')">Formula</button>
      <button class="toggle-btn" id="btnExample" onclick="switchMode('example')">Example</button>
    </div>

    <div class="main-grid">
      
      <div class="form-card standard">
        <div class="card-title">Standard Form</div>
        <div class="eq-display math" id="stdEq"></div>
        <div class="specs">
          <div class="spec-item">
            <span class="spec-label">Center</span>
            <span class="spec-val math" id="stdCenter"></span>
          </div>
          <div class="spec-item">
            <span class="spec-label">Radius</span>
            <span class="spec-val math" id="stdRadius"></span>
          </div>
        </div>
      </div>

      
      <div class="bridge">
        <div class="bridge-action">
          <span class="bridge-label">Expand</span>
          <span class="arrow-icon">&#10140;</span>
        </div>
        <div class="bridge-action rev">
          <span class="arrow-icon">&#11013;</span>
          <span class="bridge-label">Complete Square</span>
        </div>
      </div>

      
      <div class="form-card general">
        <div class="card-title">General Form</div>
        <div class="eq-display math" id="genEq"></div>
        <div class="specs">
          <div class="spec-item">
            <span class="spec-label">Center</span>
            <span class="spec-val math" id="genCenter"></span>
          </div>
          <div class="spec-item">
            <span class="spec-label">Radius</span>
            <span class="spec-val math" id="genRadius"></span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    const content = {
      formula: {
        stdEq: "(<i>x</i> &minus; <i>h</i>)<sup>2</sup> + (<i>y</i> &minus; <i>k</i>)<sup>2</sup> = <i>r</i><sup>2</sup>",
        stdCenter: "(<i>h</i>, <i>k</i>)",
        stdRadius: "<i>r</i>",
        genEq: "<i>x</i><sup>2</sup> + <i>y</i><sup>2</sup> + 2<i>gx</i> + 2<i>fy</i> + <i>c</i> = 0",
        genCenter: "(&minus;<i>g</i>, &minus;<i>f</i>)",
        genRadius: "<span class='radical'><span class='rad-symbol'>&radic;</span><span class='radicand'><i>g</i><sup>2</sup> + <i>f</i><sup>2</sup> &minus; <i>c</i></span></span>"
      },
      example: {
        stdEq: "(<i>x</i> &minus; 3)<sup>2</sup> + (<i>y</i> + 2)<sup>2</sup> = 25",
        stdCenter: "(3, &minus;2)",
        stdRadius: "5",
        genEq: "<i>x</i><sup>2</sup> + <i>y</i><sup>2</sup> &minus; 6<i>x</i> + 4<i>y</i> &minus; 12 = 0",
        genCenter: "(3, &minus;2)",
        genRadius: "<span class='radical'><span class='rad-symbol'>&radic;</span><span class='radicand'>9 + 4 &minus; (&minus;12)</span></span> = 5"
      }
    };

    function render(mode) {
      const data = content[mode];
      document.getElementById('stdEq').innerHTML = data.stdEq;
      document.getElementById('stdCenter').innerHTML = data.stdCenter;
      document.getElementById('stdRadius').innerHTML = data.stdRadius;
      document.getElementById('genEq').innerHTML = data.genEq;
      document.getElementById('genCenter').innerHTML = data.genCenter;
      document.getElementById('genRadius').innerHTML = data.genRadius;
    }

    function switchMode(mode) {
      document.getElementById('btnFormula').classList.toggle('active', mode === 'formula');
      document.getElementById('btnExample').classList.toggle('active', mode === 'example');
      render(mode);
    }

    // Initialize on load
    render('formula');
  </script>
</body>
</html>

Equations of Circles in Standard and Expanded Forms

<!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;
      color: #1e293b;
      background: transparent;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      user-select: none;
    }

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

    /* Top Navigation */
    .stepper-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }

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

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

    .step-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    .play-btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      color: #475569;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 12px;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }

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

    /* Stage Area */
    .stage-wrapper {
      width: 100%;
      min-height: 320px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .step-pane {
      width: 100%;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      animation: fadeIn 0.25s ease-in-out;
    }

    .step-pane.active {
      display: flex;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Tags & Badges */
    .tag {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      padding: 4px 10px;
      border-radius: 6px;
      margin-bottom: 12px;
      display: inline-block;
    }
    .tag-1 { background: #e0e7ff; color: #4338ca; }
    .tag-2 { background: #fef3c7; color: #b45309; }
    .tag-3 { background: #dcfce7; color: #15803d; }
    .tag-4 { background: #f3e8ff; color: #7e22ce; }

    /* Math Typography */
    .math-expr {
      font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif;
      font-size: 20px;
      line-height: 1.6;
      color: #0f172a;
      margin: 6px 0;
      letter-spacing: 0.2px;
    }

    .math-expr i {
      font-style: italic;
    }

    .math-expr sup {
      font-size: 0.68em;
      vertical-align: super;
      line-height: 0;
    }

    .math-highlight-x {
      color: #2563eb;
      font-weight: 700;
    }

    .math-highlight-y {
      color: #d97706;
      font-weight: 700;
    }

    .math-highlight-r {
      color: #7e22ce;
      font-weight: 700;
    }

    .math-box-highlight {
      font-size: 22px;
      font-weight: 700;
      color: #16a34a;
      padding: 6px 14px;
      background: #f0fdf4;
      border-radius: 8px;
      margin-top: 8px;
    }

    /* Calculations & Pill Boxes */
    .sub-calc-grid {
      display: flex;
      gap: 12px;
      margin-top: 14px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
    }

    .pill-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      padding: 8px 14px;
      border-radius: 8px;
      font-size: 14px;
      color: #334155;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .pill-label {
      font-size: 11px;
      text-transform: uppercase;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .pill-label-x { color: #2563eb; }
    .pill-label-y { color: #d97706; }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 0.85em;
      line-height: 1;
      margin: 0 2px;
    }
    .fraction-top {
      border-bottom: 1px solid currentColor;
      padding-bottom: 1px;
    }
    .fraction-bottom {
      padding-top: 1px;
    }

    /* Result Step 4 Grid */
    .result-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      align-items: center;
      margin-top: 6px;
    }

    @media (max-width: 480px) {
      .result-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .math-expr {
        font-size: 17px;
      }
    }

    .info-tile {
      background: #faf5ff;
      border: 1px solid #e9d5ff;
      border-radius: 8px;
      padding: 10px 14px;
      text-align: center;
    }

    .info-label {
      font-size: 11px;
      font-weight: 700;
      color: #7e22ce;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .info-val {
      font-size: 18px;
      font-weight: 800;
      color: #1e1b4b;
      margin-top: 2px;
      font-family: "Cambria Math", "Times New Roman", serif;
    }

    .graph-wrap {
      width: 100%;
      max-width: 220px;
      height: 180px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
  </style>
</head>
<body>

  <div class="main-container">
    
    <div class="stepper-nav">
      <button class="step-btn active" data-step="0">1. Group</button>
      <button class="step-btn" data-step="1">2. Complete Square</button>
      <button class="step-btn" data-step="2">3. Standard Form</button>
      <button class="step-btn" data-step="3">4. Center & Radius</button>
      <button class="play-btn" id="playToggle" title="Toggle Autoplay" aria-label="Toggle Autoplay">⏸</button>
    </div>

    
    <div class="stage-wrapper">

      
      <div class="step-pane active" id="pane-0">
        <span class="tag tag-1">Step 1: Group Terms & Move Constant</span>
        <div class="math-expr">
          <i>x</i><sup>2</sup> + <i>y</i><sup>2</sup> + 8<i>x</i> − 6<i>y</i> − 11 = 0
        </div>
        <div style="font-size: 18px; color: #64748b; margin: 4px 0;">↓</div>
        <div class="math-expr" style="color: #1d4ed8; font-weight: 600;">
          (<i>x</i><sup>2</sup> + 8<i>x</i>) + (<i>y</i><sup>2</sup> − 6<i>y</i>) = 11
        </div>
      </div>

      
      <div class="step-pane" id="pane-1">
        <span class="tag tag-2">Step 2: Complete the Square</span>
        <div class="math-expr">
          (<i>x</i><sup>2</sup> + 8<i>x</i> + <span class="math-highlight-x">16</span>) + (<i>y</i><sup>2</sup> − 6<i>y</i> + <span class="math-highlight-y">9</span>) = 11 + <span class="math-highlight-x">16</span> + <span class="math-highlight-y">9</span>
        </div>
        <div class="sub-calc-grid">
          <div class="pill-card">
            <span class="pill-label pill-label-x">For <i>x</i>: Add</span>
            <span class="math-expr" style="font-size: 15px; margin: 0;">
              (<span class="fraction"><span class="fraction-top">8</span><span class="fraction-bottom">2</span></span>)<sup>2</sup> = 4<sup>2</sup> = <span class="math-highlight-x">16</span>
            </span>
          </div>
          <div class="pill-card">
            <span class="pill-label pill-label-y">For <i>y</i>: Add</span>
            <span class="math-expr" style="font-size: 15px; margin: 0;">
              (<span class="fraction"><span class="fraction-top">−6</span><span class="fraction-bottom">2</span></span>)<sup>2</sup> = (−3)<sup>2</sup> = <span class="math-highlight-y">9</span>
            </span>
          </div>
        </div>
      </div>

      
      <div class="step-pane" id="pane-2">
        <span class="tag tag-3">Step 3: Factor to Standard Form</span>
        <div class="math-expr" style="color: #475569;">
          (<i>x</i><sup>2</sup> + 8<i>x</i> + 16) + (<i>y</i><sup>2</sup> − 6<i>y</i> + 9) = 36
        </div>
        <div class="math-box-highlight">
          (<i>x</i> + 4)<sup>2</sup> + (<i>y</i> − 3)<sup>2</sup> = 6<sup>2</sup>
        </div>
        <div class="math-expr" style="font-size: 14px; color: #64748b; margin-top: 8px;">
          Form: (<i>x</i> − <i>h</i>)<sup>2</sup> + (<i>y</i> − <i>k</i>)<sup>2</sup> = <i>r</i><sup>2</sup>
        </div>
      </div>

      
      <div class="step-pane" id="pane-3">
        <span class="tag tag-4">Step 4: Center, Radius & Graph</span>
        <div class="result-grid">
          <div style="display: flex; flex-direction: column; gap: 8px;">
            <div class="info-tile">
              <div class="info-label">Center (<i>h</i>, <i>k</i>)</div>
              <div class="info-val">(−4, 3)</div>
            </div>
            <div class="info-tile">
              <div class="info-label">Radius <i>r</i></div>
              <div class="info-val">&radic;36 = 6</div>
            </div>
          </div>

          <div class="graph-wrap">
            <svg viewBox="0 0 180 160" aria-label="Graph of circle with center (-4, 3) and radius 6">
              
              <line x1="10" y1="110" x2="170" y2="110" stroke="#cbd5e1" stroke-width="1.5" />
              <line x1="130" y1="10" x2="130" y2="150" stroke="#cbd5e1" stroke-width="1.5" />
              
              
              <text x="166" y="106" fill="#94a3b8" font-size="10" font-weight="700">x</text>
              <text x="134" y="18" fill="#94a3b8" font-size="10" font-weight="700">y</text>
              <text x="134" y="122" fill="#94a3b8" font-size="9">O</text>

              
              
              
              
              
              <circle cx="94" cy="83" r="54" fill="rgba(147, 51, 234, 0.08)" stroke="#9333ea" stroke-width="2" />
              
              
              <circle cx="94" cy="83" r="3.5" fill="#7e22ce" />
              
              
              <line x1="94" y1="83" x2="148" y2="83" stroke="#7e22ce" stroke-width="1.5" stroke-dasharray="3 2" />
              
              
              <text x="118" y="77" fill="#7e22ce" font-size="10" font-weight="700" text-anchor="middle">r = 6</text>
              <text x="90" y="97" fill="#1e1b4b" font-size="10" font-weight="700" text-anchor="end">(−4, 3)</text>
            </svg>
          </div>
        </div>
      </div>

    </div>
  </div>

  <script>
    const btns = Array.from(document.querySelectorAll('.step-btn'));
    const panes = Array.from(document.querySelectorAll('.step-pane'));
    const playToggle = document.getElementById('playToggle');
    
    let currentStep = 0;
    let timer = null;
    let isPlaying = true;

    function showStep(idx) {
      currentStep = idx;
      btns.forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });
      panes.forEach((pane, i) => {
        pane.classList.toggle('active', i === idx);
      });
    }

    function nextStep() {
      showStep((currentStep + 1) % 4);
    }

    function startAutoplay() {
      isPlaying = true;
      playToggle.textContent = '⏸';
      clearInterval(timer);
      timer = setInterval(nextStep, 3500);
    }

    function pauseAutoplay() {
      isPlaying = false;
      playToggle.textContent = '▶';
      clearInterval(timer);
    }

    btns.forEach((btn, idx) => {
      btn.addEventListener('click', () => {
        pauseAutoplay();
        showStep(idx);
      });
    });

    playToggle.addEventListener('click', () => {
      if (isPlaying) {
        pauseAutoplay();
      } else {
        startAutoplay();
      }
    });

    // Start autoplay initially
    startAutoplay();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      width: 100%;
      height: 100%;
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 12px 10px;
    }
    
    /* Top Equation Card */
    .formula-card {
      width: 100%;
      max-width: 440px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      box-shadow: 0 2px 6px rgba(30, 41, 69, 0.04);
    }
    .formula-math {
      font-size: 19px;
      font-weight: 700;
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .term-x { color: #d97706; }
    .term-y { color: #059669; }
    .term-r { color: #2563eb; }
    .formula-sub {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      letter-spacing: 0.2px;
    }

    /* Interactive Graph Canvas */
    .graph-container {
      position: relative;
      width: 100%;
      max-width: 440px;
      flex: 1;
      min-height: 280px;
      margin-top: 8px;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
      touch-action: none;
    }
    
    /* SVG Styling */
    .grid-line { stroke: #f1f5f9; stroke-width: 1.2; }
    .axis { stroke: #cbd5e1; stroke-width: 1.5; stroke-linecap: round; }
    .axis-arrow { fill: #94a3b8; }
    .circle-path {
      fill: rgba(37, 99, 235, 0.04);
      stroke: #2563eb;
      stroke-width: 2.5;
    }
    .tri-leg-x { stroke: #d97706; stroke-width: 2.5; stroke-dasharray: 4 3; }
    .tri-leg-y { stroke: #059669; stroke-width: 2.5; stroke-dasharray: 4 3; }
    .tri-hyp { stroke: #2563eb; stroke-width: 2.8; }
    .tri-fill { fill: rgba(37, 99, 235, 0.07); }
    .right-angle { fill: none; stroke: #94a3b8; stroke-width: 1.5; }
    
    .label {
      font-family: system-ui, -apple-system, sans-serif;
      font-size: 13px;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .label-x { fill: #d97706; }
    .label-y { fill: #059669; }
    .label-r { fill: #2563eb; }
    .label-point { fill: #1e2945; font-size: 13.5px; font-weight: 700; }
    
    .handle {
      cursor: grab;
      filter: drop-shadow(0 2px 5px rgba(37, 99, 235, 0.35));
    }
    .handle:active {
      cursor: grabbing;
    }

    .hint {
      font-size: 11.5px;
      color: #94a3b8;
      font-weight: 600;
      margin-top: 4px;
      text-align: center;
    }
  </style>
</head>
<body>

  
  <div class="formula-card">
    <div class="formula-math">
      <span class="term-x">(x − h)²</span>
      <span>+</span>
      <span class="term-y">(y − k)²</span>
      <span>=</span>
      <span class="term-r">r²</span>
    </div>
    <div class="formula-sub">Pythagorean Theorem: a² + b² = c²</div>
  </div>

  
  <div class="graph-container">
    <svg id="svg" viewBox="0 0 380 300">
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="5" 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="#94a3b8"/>
        </marker>
        <filter id="badge-shadow" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="1" stdDeviation="1.5" flood-color="#1e2945" flood-opacity="0.1"/>
        </filter>
      </defs>

      
      <g id="grid"></g>

      
      <line x1="20" y1="265" x2="365" y2="265" class="axis" marker-end="url(#arrow)"/>
      <line x1="45" y1="280" x2="45" y2="15" class="axis" marker-end="url(#arrow)"/>
      <text x="362" y="278" font-size="11" font-weight="700" fill="#94a3b8">x</text>
      <text x="34" y="16" font-size="11" font-weight="700" fill="#94a3b8">y</text>

      
      <circle id="circle" class="circle-path" cx="170" cy="150" r="95" />

      
      <polygon id="triFill" class="tri-fill" points="" />
      <polyline id="rightAngle" class="right-angle" points="" />
      <line id="legX" class="tri-leg-x" x1="0" y1="0" x2="0" y2="0" />
      <line id="legY" class="tri-leg-y" x1="0" y1="0" x2="0" y2="0" />
      <line id="hypotenuse" class="tri-hyp" x1="0" y1="0" x2="0" y2="0" />

      
      <g id="labelXGroup">
        <rect id="bgLabelX" rx="4" fill="#fff" height="18" filter="url(#badge-shadow)" />
        <text id="labelX" class="label label-x">|x − h|</text>
      </g>

      <g id="labelYGroup">
        <rect id="bgLabelY" rx="4" fill="#fff" height="18" filter="url(#badge-shadow)" />
        <text id="labelY" class="label label-y">|y − k|</text>
      </g>

      <g id="labelRGroup">
        <rect id="bgLabelR" rx="4" fill="#fff" height="18" filter="url(#badge-shadow)" />
        <text id="labelR" class="label label-r">r</text>
      </g>

      
      <circle cx="170" cy="150" r="5" fill="#1e2945" />
      <g id="centerLabelGroup">
        <rect id="bgCenter" rx="4" fill="#fff" height="18" filter="url(#badge-shadow)"/>
        <text id="centerLabel" class="label label-point" x="170" y="150">C(h, k)</text>
      </g>

      
      <g id="pointP" class="handle">
        <circle id="pRing" cx="0" cy="0" r="14" fill="rgba(37,99,235,0.18)" />
        <circle id="pDot" cx="0" cy="0" r="6" fill="#2563eb" stroke="#ffffff" stroke-width="2" />
        <g id="pointLabelGroup">
          <rect id="bgPoint" rx="4" fill="#fff" height="18" filter="url(#badge-shadow)" />
          <text id="pointLabel" class="label label-point" x="0" y="0">P(x, y)</text>
        </g>
      </g>
    </svg>
  </div>

  <div class="hint">✦ Drag point P around the circle</div>

  <script>
    const h = 170;
    const k = 150;
    const r = 95;
    let angle = -Math.PI / 4; // 45 degrees up-right

    // Render subtle grid
    const grid = document.getElementById('grid');
    for (let x = 45; x <= 360; x += 25) {
      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      line.setAttribute('x1', x);
      line.setAttribute('y1', 20);
      line.setAttribute('x2', x);
      line.setAttribute('y2', 265);
      line.setAttribute('class', 'grid-line');
      grid.appendChild(line);
    }
    for (let y = 30; y <= 265; y += 25) {
      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      line.setAttribute('x1', 45);
      line.setAttribute('y1', y);
      line.setAttribute('x2', 360);
      line.setAttribute('y2', y);
      line.setAttribute('class', 'grid-line');
      grid.appendChild(line);
    }

    function updateBadge(bgId, textId, padding = 10) {
      const text = document.getElementById(textId);
      const bg = document.getElementById(bgId);
      const bbox = text.getBBox();
      bg.setAttribute('x', bbox.x - padding / 2);
      bg.setAttribute('y', bbox.y - 2);
      bg.setAttribute('width', bbox.width + padding);
      bg.setAttribute('height', bbox.height + 4);
    }

    function render() {
      const px = h + r * Math.cos(angle);
      const py = k + r * Math.sin(angle);
      const cornerX = px;
      const cornerY = k;

      // Update right triangle lines
      const triFill = document.getElementById('triFill');
      triFill.setAttribute('points', `${h},${k} ${cornerX},${cornerY} ${px},${py}`);

      const legX = document.getElementById('legX');
      legX.setAttribute('x1', h);
      legX.setAttribute('y1', k);
      legX.setAttribute('x2', cornerX);
      legX.setAttribute('y2', cornerY);

      const legY = document.getElementById('legY');
      legY.setAttribute('x1', cornerX);
      legY.setAttribute('y1', cornerY);
      legY.setAttribute('x2', px);
      legY.setAttribute('y2', py);

      const hyp = document.getElementById('hypotenuse');
      hyp.setAttribute('x1', h);
      hyp.setAttribute('y1', k);
      hyp.setAttribute('x2', px);
      hyp.setAttribute('y2', py);

      // Right angle indicator (square)
      const sq = 10;
      const sx = px >= h ? -sq : sq;
      const sy = py >= k ? -sq : sq;
      const ra = document.getElementById('rightAngle');
      ra.setAttribute('points', `${cornerX + sx},${cornerY} ${cornerX + sx},${cornerY + sy} ${cornerX},${cornerY + sy}`);

      // Update Point P
      const pRing = document.getElementById('pRing');
      const pDot = document.getElementById('pDot');
      pRing.setAttribute('cx', px);
      pRing.setAttribute('cy', py);
      pDot.setAttribute('cx', px);
      pDot.setAttribute('cy', py);

      // Position P(x, y) label offset
      const labelOffset = 22;
      const pLabelX = px + Math.cos(angle) * labelOffset;
      const pLabelY = py + Math.sin(angle) * labelOffset;
      const pLabel = document.getElementById('pointLabel');
      pLabel.setAttribute('x', pLabelX);
      pLabel.setAttribute('y', pLabelY);
      updateBadge('bgPoint', 'pointLabel');

      // Position Center C(h, k) label opposite to P
      const cLabel = document.getElementById('centerLabel');
      const cOffset = 20;
      const cAngle = angle + Math.PI;
      cLabel.setAttribute('x', h + Math.cos(cAngle) * cOffset);
      cLabel.setAttribute('y', k + Math.sin(cAngle) * cOffset);
      updateBadge('bgCenter', 'centerLabel');

      // Position Leg X label |x - h|
      const lblX = document.getElementById('labelX');
      const midX = (h + cornerX) / 2;
      const offsetY = py <= k ? 14 : -14;
      lblX.setAttribute('x', midX);
      lblX.setAttribute('y', k + offsetY);
      updateBadge('bgLabelX', 'labelX');

      // Position Leg Y label |y - k|
      const lblY = document.getElementById('labelY');
      const midY = (k + py) / 2;
      const offsetX = px >= h ? 24 : -24;
      lblY.setAttribute('x', cornerX + offsetX);
      lblY.setAttribute('y', midY);
      updateBadge('bgLabelY', 'labelY');

      // Position Hypotenuse label r
      const lblR = document.getElementById('labelR');
      const midHypX = (h + px) / 2;
      const midHypY = (k + py) / 2;
      // Perpendicular normal vector
      const nx = -(py - k) / r;
      const ny = (px - h) / r;
      lblR.setAttribute('x', midHypX + nx * 14);
      lblR.setAttribute('y', midHypY + ny * 14);
      updateBadge('bgLabelR', 'labelR');
    }

    // Pointer Interaction (Drag point P)
    const svg = document.getElementById('svg');
    let isDragging = false;

    function handlePointer(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) * (380 / rect.width);
      const svgY = (clientY - rect.top) * (300 / rect.height);
      angle = Math.atan2(svgY - k, svgX - h);
      render();
    }

    const pointHandle = document.getElementById('pointP');

    pointHandle.addEventListener('pointerdown', (e) => {
      isDragging = true;
      pointHandle.setPointerCapture(e.pointerId);
      handlePointer(e);
    });

    window.addEventListener('pointermove', (e) => {
      if (isDragging) {
        handlePointer(e);
      }
    });

    window.addEventListener('pointerup', () => {
      isDragging = false;
    });

    // Touch support directly on SVG
    svg.addEventListener('touchmove', (e) => {
      if (isDragging) {
        e.preventDefault();
        handlePointer(e);
      }
    }, { passive: false });

    // Initial render
    render();
  </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;
      -webkit-tap-highlight-color: transparent;
    }

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

    .nav-tabs {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 440px;
      margin-bottom: 8px;
    }

    .tab-btn {
      flex: 1;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 4px;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

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

    .math-panel {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
    }

    .formula-row {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 700;
      font-family: "Cambria Math", "Times New Roman", serif;
      gap: 2px;
      padding: 8px 12px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      width: 100%;
      position: relative;
    }

    .token {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 6px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.2s, box-shadow 0.2s;
      border: 1.5px solid transparent;
      margin: 0 1px;
    }

    .token-h {
      color: #2563eb;
      background: #eff6ff;
      border-color: #bfdbfe;
    }

    .token-k {
      color: #059669;
      background: #ecfdf5;
      border-color: #a7f3d0;
    }

    .token-r {
      color: #7c3aed;
      background: #f5f3ff;
      border-color: #ddd6fe;
    }

    .token.active {
      box-shadow: 0 0 0 2px #1e2945;
    }

    .arrow-divider {
      font-size: 16px;
      color: #94a3b8;
      font-weight: 700;
      margin: -4px 0;
    }

    .cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
      width: 100%;
      max-width: 440px;
    }

    .callout-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 8px 6px;
      border-radius: 8px;
      border: 1.5px solid #e2e8f0;
      background: #ffffff;
      cursor: pointer;
      transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
    }

    .callout-card.dimmed {
      opacity: 0.4;
    }

    .card-h {
      border-color: #bfdbfe;
      background: #f8fbff;
    }
    .card-h.active {
      border-color: #2563eb;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
    }

    .card-k {
      border-color: #a7f3d0;
      background: #f7fdfa;
    }
    .card-k.active {
      border-color: #059669;
      box-shadow: 0 2px 8px rgba(5, 150, 105, 0.15);
    }

    .card-r {
      border-color: #ddd6fe;
      background: #fbfaff;
    }
    .card-r.active {
      border-color: #7c3aed;
      box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15);
    }

    .card-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }

    .card-h .card-title { color: #2563eb; }
    .card-k .card-title { color: #059669; }
    .card-r .card-title { color: #7c3aed; }

    .card-math {
      font-family: "Cambria Math", "Times New Roman", serif;
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 2px;
      color: #1e2945;
    }

    .card-tag {
      font-size: 11px;
      font-weight: 600;
      padding: 1px 4px;
      border-radius: 4px;
    }

    .card-h .card-tag { background: #dbeafe; color: #1d4ed8; }
    .card-k .card-tag { background: #d1fae5; color: #047857; }
    .card-r .card-tag { background: #ede9fe; color: #6d28d9; }

    .result-summary {
      width: 100%;
      max-width: 440px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 8px 12px;
      background: #f1f5f9;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
    }

    .result-val {
      font-family: "Cambria Math", "Times New Roman", serif;
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
    }

    @media (max-width: 360px) {
      .formula-row { font-size: 17px; padding: 6px 8px; }
      .card-math { font-size: 13px; }
      .card-title { font-size: 10px; }
      .card-tag { font-size: 10px; }
    }
  </style>
</head>
<body>

  <div class="nav-tabs">
    <button class="tab-btn active" onclick="setFocus('all')">All</button>
    <button class="tab-btn" onclick="setFocus('h')">x-Center (h)</button>
    <button class="tab-btn" onclick="setFocus('k')">y-Center (k)</button>
    <button class="tab-btn" onclick="setFocus('r')">Radius (r)</button>
  </div>

  <div class="math-panel">
    
    <div class="formula-row">
      <span>(x − </span>
      <span class="token token-h" id="tok-fh" onclick="setFocus('h')">h</span>
      <span>)² + (y − </span>
      <span class="token token-k" id="tok-fk" onclick="setFocus('k')">k</span>
      <span>)² = </span>
      <span class="token token-r" id="tok-fr" onclick="setFocus('r')">r²</span>
    </div>

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

    
    <div class="formula-row">
      <span>(x − </span>
      <span class="token token-h" id="tok-eh" onclick="setFocus('h')">3</span>
      <span>)² + (y + </span>
      <span class="token token-k" id="tok-ek" onclick="setFocus('k')">2</span>
      <span>)² = </span>
      <span class="token token-r" id="tok-er" onclick="setFocus('r')">25</span>
    </div>
  </div>

  
  <div class="cards-grid">
    <div class="callout-card card-h active" id="card-h" onclick="setFocus('h')">
      <span class="card-title">x-Center</span>
      <span class="card-math">h = 3</span>
      <span class="card-tag">Invert Sign</span>
    </div>

    <div class="callout-card card-k active" id="card-k" onclick="setFocus('k')">
      <span class="card-title">y-Center</span>
      <span class="card-math">k = −2</span>
      <span class="card-tag">Invert Sign</span>
    </div>

    <div class="callout-card card-r active" id="card-r" onclick="setFocus('r')">
      <span class="card-title">Radius</span>
      <span class="card-math">r = √25</span>
      <span class="card-tag">r = 5</span>
    </div>
  </div>

  
  <div class="result-summary">
    <div>Center: <span class="result-val">(3, −2)</span></div>
    <div>Radius: <span class="result-val">5</span></div>
  </div>

  <script>
    let currentFocus = 'all';

    function setFocus(type) {
      currentFocus = type;

      // Update tabs
      const tabs = document.querySelectorAll('.tab-btn');
      tabs[0].classList.toggle('active', type === 'all');
      tabs[1].classList.toggle('active', type === 'h');
      tabs[2].classList.toggle('active', type === 'k');
      tabs[3].classList.toggle('active', type === 'r');

      // Update tokens
      document.getElementById('tok-fh').classList.toggle('active', type === 'h' || type === 'all');
      document.getElementById('tok-eh').classList.toggle('active', type === 'h' || type === 'all');
      document.getElementById('tok-fk').classList.toggle('active', type === 'k' || type === 'all');
      document.getElementById('tok-ek').classList.toggle('active', type === 'k' || type === 'all');
      document.getElementById('tok-fr').classList.toggle('active', type === 'r' || type === 'all');
      document.getElementById('tok-er').classList.toggle('active', type === 'r' || type === 'all');

      // Update cards
      const ch = document.getElementById('card-h');
      const ck = document.getElementById('card-k');
      const cr = document.getElementById('card-r');

      if (type === 'all') {
        ch.classList.remove('dimmed'); ch.classList.add('active');
        ck.classList.remove('dimmed'); ck.classList.add('active');
        cr.classList.remove('dimmed'); cr.classList.add('active');
      } else {
        ch.classList.toggle('active', type === 'h');
        ch.classList.toggle('dimmed', type !== 'h');

        ck.classList.toggle('active', type === 'k');
        ck.classList.toggle('dimmed', type !== 'k');

        cr.classList.toggle('active', type === 'r');
        cr.classList.toggle('dimmed', type !== 'r');
      }
    }
  </script>
</body>
</html>

Completing the Square to Find Center and Radius

Finding the Equation of a Circle Through Three Given Points

Line and Circle Intersections and Chord Lengths

Tangents and Normals to Circles Using Geometric Methods

Finding Tangent Lines from an External Point to a Circle

Orthogonal Circles and the Radical Axis of Two Circles

math

Coordinate Geometry of Circles: Equations, Chords, and Tangents

円の面積の見積もり — 半径を一辺とする正方形との比較

円の等分変形 — おうぎ形を並べ替えて長方形を作る

円の面積の公式 — 半径×半径×3.14の導出

円の面積の基本計算 — 整数・小数の半径での演習

半円とおうぎ形の面積の求め方

ドーナツ形（円環）の面積 — 分配法則を使った工夫計算

葉っぱ形や色づけされた複合図形の面積

円の面積・立体の体積を生活に活かす

円の面積 — 公式の導出と複合図形の面積計算

Completing the Square to Find Centre and Radius

Finding the Equation of a Circle from Given Conditions

Intersections of Lines and Circles

Circle Theorems in Coordinate Geometry Proofs

Circles in Coordinate Geometry

数学活動を通じて日常の現象を捉える

数学の学習から問題を見つけて解く

数と計算の体系的な振り返り — 整数・小数・分数の一貫性

図形の性質と計量の統合的振り返り

関数的思考の振り返り — 比例・反比例・文字式から中学数学へ

OGM.12.GEO.2

Aligned learning resources

Related diagrams