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

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e293b;
      padding: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 400px;
      max-width: 660px;
      margin: 0 auto;
    }

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

    .badge-tag {
      font-size: 13px;
      font-weight: 700;
      color: #2563eb;
      background: #eff6ff;
      border: 1px solid #dbeafe;
      padding: 4px 12px;
      border-radius: 9999px;
      letter-spacing: 0.02em;
    }

    .step-counter {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }

    /* Fixed stage area */
    .stage {
      position: relative;
      width: 100%;
      min-height: 255px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .step-card {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
      transform: translateY(4px);
      padding: 8px;
      text-align: center;
    }

    .step-card.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
      position: relative;
    }

    .step-desc {
      font-family: system-ui, -apple-system, sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: #475569;
      margin-bottom: 14px;
      max-width: 90%;
      line-height: 1.4;
    }

    /* Math typography */
    .math {
      font-family: "Cambria Math", "STIX Two Math", "Times New Roman", Times, Georgia, serif;
      font-size: 21px;
      color: #0f172a;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 4px 8px;
      line-height: 1.3;
    }

    .math-large {
      font-size: 23px;
    }

    .math-sub {
      font-size: 19px;
      color: #334155;
      margin-top: 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px 10px;
    }

    .math-detail-note {
      font-family: system-ui, -apple-system, sans-serif;
      font-size: 12px;
      color: #64748b;
      margin-top: 8px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 4px 10px;
    }

    /* Fractions for main expressions */
    .frac {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      padding: 0 4px;
      line-height: 1;
    }

    .frac-num {
      border-bottom: 2px solid currentColor;
      padding: 2px 4px 3px 4px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
    }

    .frac-den {
      padding: 3px 4px 1px 4px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
    }

    /* Superscripts with slash fractional exponents */
    sup {
      font-size: 0.7em;
      line-height: 1;
      vertical-align: 0.6em;
      margin-left: 1px;
      margin-right: 2px;
      font-weight: 600;
      font-family: inherit;
    }

    .exp-frac {
      font-size: 0.72em;
      vertical-align: 0.65em;
      letter-spacing: -0.02em;
      display: inline-block;
      font-weight: 600;
    }

    .paren-group {
      display: inline-flex;
      align-items: center;
    }

    .paren {
      font-size: 1.3em;
      font-weight: 300;
      line-height: 1;
      vertical-align: middle;
      color: #475569;
    }

    .paren-big {
      font-size: 1.75em;
    }

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

    .highlight-green {
      color: #059669;
      font-weight: 700;
    }

    /* Final box */
    .final-box {
      background: #ecfdf5;
      border: 2px solid #059669;
      border-radius: 12px;
      padding: 16px 36px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .highlight-pill {
      font-family: system-ui, -apple-system, sans-serif;
      font-size: 12px;
      font-weight: 700;
      color: #059669;
      background: #d1fae5;
      padding: 4px 12px;
      border-radius: 9999px;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    /* Controls */
    .controls {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      width: 100%;
      margin-top: 10px;
    }

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

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #e2e8f0;
      cursor: pointer;
      border: 2px solid transparent;
      padding: 0;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    .dot.active {
      background: #2563eb;
      border-color: #bfdbfe;
    }

    .dot:hover:not(.active) {
      background: #94a3b8;
    }

    .btn-row {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: center;
      width: 100%;
    }

    button.nav-btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e293b;
      font-size: 14px;
      font-weight: 600;
      padding: 8px 18px;
      border-radius: 8px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
      min-width: 110px;
    }

    button.nav-btn.primary {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }

    button.nav-btn.primary:hover:not(:disabled) {
      background: #1d4ed8;
      border-color: #1d4ed8;
    }

    button.nav-btn:hover:not(:disabled):not(.primary) {
      background: #f8fafc;
      border-color: #94a3b8;
    }

    button.nav-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    @media (max-width: 480px) {
      body {
        padding: 8px;
      }
      .math {
        font-size: 18px;
        gap: 3px 5px;
      }
      .math-large {
        font-size: 19px;
      }
      .math-sub {
        font-size: 16px;
      }
      .step-desc {
        font-size: 13px;
        margin-bottom: 10px;
      }
      .final-box {
        padding: 12px 24px;
      }
      button.nav-btn {
        padding: 7px 14px;
        font-size: 13px;
        min-width: 95px;
      }
    }
  </style>
</head>
<body>

  <div class="header-bar">
    <span class="badge-tag" id="stepTag">Original Expression</span>
    <span class="step-counter" id="stepCounter">1 of 6</span>
  </div>

  <div class="stage">
    
    <div class="step-card active" id="step0">
      <div class="step-desc">Simplify the algebraic expression completely</div>
      <div class="math math-large">
        <div class="frac">
          <div class="frac-num">
            <span class="paren-group">
              <span class="paren paren-big">(</span>
              <span>8</span><span>x<sup class="exp-frac">3/4</sup></span><span>y<sup class="exp-frac">−1/2</sup></span>
              <span class="paren paren-big">)</span>
            </span>
            <sup class="exp-frac" style="margin-left: 2px;">2/3</sup>
          </div>
          <div class="frac-den">
            <span>2</span><span>x<sup class="exp-frac">−1/2</sup></span><span>y<sup class="exp-frac">2/3</sup></span>
          </div>
        </div>
      </div>
    </div>

    
    <div class="step-card" id="step1">
      <div class="step-desc">Step 1: Distribute exponent <sup>2/3</sup> to all factors in numerator</div>
      <div class="math">
        <span>8<sup class="exp-frac highlight-blue">2/3</sup></span>
        <span>·</span>
        <span class="paren-group"><span class="paren">(</span><span>x<sup class="exp-frac">3/4</sup></span><span class="paren">)</span></span><sup class="exp-frac highlight-blue">2/3</sup>
        <span>·</span>
        <span class="paren-group"><span class="paren">(</span><span>y<sup class="exp-frac">−1/2</sup></span><span class="paren">)</span></span><sup class="exp-frac highlight-blue">2/3</sup>
      </div>
      <div class="math-sub">
        <span>=</span>
        <span class="highlight-blue">4</span>
        <span>·</span>
        <span>x<sup class="exp-frac highlight-blue">1/2</sup></span>
        <span>·</span>
        <span>y<sup class="exp-frac highlight-blue">−1/3</sup></span>
      </div>
      <div class="math-detail-note">
        8<sup>2/3</sup> = (∛8)<sup>2</sup> = 4 &nbsp;|&nbsp; 
        (3/4)·(2/3) = 1/2 &nbsp;|&nbsp; 
        (−1/2)·(2/3) = −1/3
      </div>
    </div>

    
    <div class="step-card" id="step2">
      <div class="step-desc">Step 2: Reassemble the fraction with the simplified numerator</div>
      <div class="math math-large">
        <div class="frac">
          <div class="frac-num">
            <span class="highlight-blue">4</span><span>x<sup class="exp-frac highlight-blue">1/2</sup></span><span>y<sup class="exp-frac highlight-blue">−1/3</sup></span>
          </div>
          <div class="frac-den">
            <span>2</span><span>x<sup class="exp-frac">−1/2</sup></span><span>y<sup class="exp-frac">2/3</sup></span>
          </div>
        </div>
      </div>
    </div>

    
    <div class="step-card" id="step3">
      <div class="step-desc">Step 3: Simplify the constant coefficients (4 ÷ 2)</div>
      <div class="math">
        <div class="frac">
          <div class="frac-num">4</div>
          <div class="frac-den">2</div>
        </div>
        <span>=</span>
        <span class="highlight-blue">2</span>
      </div>
      <div class="math-sub">
        <span>⇒</span>
        <div class="frac">
          <div class="frac-num">
            <span class="highlight-blue">2</span><span>x<sup class="exp-frac">1/2</sup></span><span>y<sup class="exp-frac">−1/3</sup></span>
          </div>
          <div class="frac-den">
            <span>x<sup class="exp-frac">−1/2</sup></span><span>y<sup class="exp-frac">2/3</sup></span>
          </div>
        </div>
      </div>
    </div>

    
    <div class="step-card" id="step4">
      <div class="step-desc">Step 4: Apply quotient rule for exponents (subtract powers)</div>
      <div class="math">
        <span>x-term:</span>
        <span>x<sup class="exp-frac">1/2 − (−1/2)</sup></span>
        <span>=</span>
        <span>x<sup class="exp-frac">1</sup></span>
        <span>=</span>
        <span class="highlight-blue">x</span>
      </div>
      <div class="math-sub">
        <span>y-term:</span>
        <span>y<sup class="exp-frac">−1/3 − 2/3</sup></span>
        <span>=</span>
        <span>y<sup class="exp-frac">−1</sup></span>
        <span>=</span>
        <div class="frac highlight-blue">
          <div class="frac-num">1</div>
          <div class="frac-den">y</div>
        </div>
      </div>
    </div>

    
    <div class="step-card" id="step5">
      <div class="step-desc">Step 5: Combine into final simplified form</div>
      <div class="final-box">
        <span class="highlight-pill">✓ Simplified Result</span>
        <div class="math math-large" style="font-size: 26px;">
          <div class="frac">
            <div class="frac-num" style="border-bottom-width: 2.5px;">2x</div>
            <div class="frac-den">y</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="controls">
    <div class="dots-container" id="dotsContainer">
      <button class="dot active" aria-label="Step 1"></button>
      <button class="dot" aria-label="Step 2"></button>
      <button class="dot" aria-label="Step 3"></button>
      <button class="dot" aria-label="Step 4"></button>
      <button class="dot" aria-label="Step 5"></button>
      <button class="dot" aria-label="Step 6"></button>
    </div>

    <div class="btn-row">
      <button class="nav-btn" id="prevBtn" disabled>← Previous</button>
      <button class="nav-btn primary" id="nextBtn">Next Step →</button>
    </div>
  </div>

  <script>
    const stepTags = [
      "Original Expression",
      "Step 1: Distribute Exponent",
      "Step 2: Rebuild Fraction",
      "Step 3: Simplify Coefficients",
      "Step 4: Subtract Exponents",
      "Final Result"
    ];

    const cards = document.querySelectorAll('.step-card');
    const dots = document.querySelectorAll('.dot');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const stepTag = document.getElementById('stepTag');
    const stepCounter = document.getElementById('stepCounter');

    let currentIndex = 0;
    const totalSteps = cards.length;

    function updateStep(index) {
      currentIndex = index;

      cards.forEach((card, i) => {
        card.classList.toggle('active', i === currentIndex);
      });

      dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === currentIndex);
      });

      stepTag.textContent = stepTags[currentIndex];
      stepCounter.textContent = `${currentIndex + 1} of ${totalSteps}`;

      prevBtn.disabled = (currentIndex === 0);
      nextBtn.disabled = (currentIndex === totalSteps - 1);

      if (currentIndex === totalSteps - 1) {
        nextBtn.textContent = 'Completed ✓';
      } else {
        nextBtn.textContent = 'Next Step →';
      }
    }

    prevBtn.addEventListener('click', () => {
      if (currentIndex > 0) updateStep(currentIndex - 1);
    });

    nextBtn.addEventListener('click', () => {
      if (currentIndex < totalSteps - 1) updateStep(currentIndex + 1);
    });

    dots.forEach((dot, i) => {
      dot.addEventListener('click', () => updateStep(i));
    });
  </script>
</body>
</html>

Laws of Indices with Rational Exponents and Variable Bases

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

    .diagram-content {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Segmented Control */
    .tab-bar {
      display: flex;
      background: #e2e8f0;
      padding: 3px;
      border-radius: 12px;
      gap: 3px;
    }

    .tab-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 8px 6px;
      border-radius: 9px;
      font-size: clamp(11px, 2.8vw, 13.5px);
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
      text-align: center;
      white-space: nowrap;
    }

    .tab-btn.active {
      background: #ffffff;
      color: #0f172a;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    /* Main Display Card */
    .math-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 18px 12px;
      box-shadow: 0 4px 6px -1px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 140px;
      position: relative;
    }

    .equation-view {
      display: none;
      align-items: center;
      justify-content: center;
      gap: clamp(4px, 1.4vw, 10px);
      flex-wrap: nowrap;
      width: 100%;
      animation: fadeIn 0.2s ease-out forwards;
    }

    .equation-view.active {
      display: flex;
    }

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

    /* Math Typography & Components */
    .math-expr {
      font-size: clamp(15px, 4.2vw, 27px);
      font-weight: 700;
      color: #0f172a;
      display: inline-flex;
      align-items: center;
      line-height: 1;
      white-space: nowrap;
    }

    .math-sym {
      color: #94a3b8;
      font-size: clamp(14px, 3.8vw, 22px);
      font-weight: 500;
      padding: 0 1px;
      user-select: none;
      flex-shrink: 0;
    }

    /* Color Pills */
    .pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 1px 5px;
      border-radius: 5px;
      font-weight: 700;
      line-height: 1.1;
    }

    .pill-power {
      color: #2563eb;
      background: #eff6ff;
      border: 1.5px solid #bfdbfe;
    }

    .pill-root {
      color: #059669;
      background: #ecfdf5;
      border: 1.5px solid #a7f3d0;
    }

    /* Fraction Exponent Layout */
    .frac-exp {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      font-size: 0.58em;
      vertical-align: 0.55em;
      margin-left: 2px;
      margin-right: 2px;
      gap: 1px;
    }

    .frac-exp .bar {
      width: 100%;
      height: 1.5px;
      background: #64748b;
      margin: 1px 0;
    }

    /* Cohesive Radical Expression Layout */
    .radical-group {
      display: inline-flex;
      align-items: flex-start;
      position: relative;
      line-height: 1;
    }

    .root-index {
      font-size: 0.54em;
      margin-top: -0.1em;
      margin-right: -4px;
      z-index: 2;
      position: relative;
    }

    .radical-symbol-box {
      display: inline-flex;
      align-items: stretch;
      height: 1.4em;
    }

    .radical-svg {
      width: 0.44em;
      height: 100%;
      stroke: #0f172a;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      flex-shrink: 0;
      display: block;
    }

    .radicand {
      border-top: 2.2px solid #0f172a;
      padding: 0.22em 0.15em 0 0.1em;
      display: inline-flex;
      align-items: center;
      margin-left: -0.5px;
      min-height: 1.4em;
      box-sizing: border-box;
    }

    .paren-group {
      display: inline-flex;
      align-items: center;
    }

    .paren {
      font-size: 1.35em;
      font-weight: 300;
      color: #64748b;
      line-height: 0;
    }

    .outer-exp {
      font-size: 0.6em;
      vertical-align: 0.7em;
      margin-left: 1px;
    }

    /* Numeric View Container & Steps */
    .numeric-view-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      width: 100%;
    }

    .eval-steps {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
      padding-top: 12px;
      border-top: 1px dashed #e2e8f0;
      width: 100%;
    }

    .step-badge {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 5px 8px;
      border-radius: 7px;
      font-size: clamp(12px, 3vw, 13.5px);
      font-weight: 600;
    }

    .step-1 {
      background: #ecfdf5;
      color: #065f46;
      border: 1px solid #a7f3d0;
    }

    .step-2 {
      background: #eff6ff;
      color: #1e40af;
      border: 1px solid #bfdbfe;
    }

    .step-result {
      background: #f0fdf4;
      color: #15803d;
      border: 1px solid #86efac;
      font-weight: 700;
      padding: 5px 10px;
      border-radius: 7px;
      font-size: clamp(12px, 3vw, 14px);
    }

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

    /* Bottom Explanatory Callout Cards */
    .callout-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .callout-card {
      padding: 9px 12px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .callout-blue {
      background: #eff6ff;
      border: 1px solid #dbeafe;
    }

    .callout-green {
      background: #ecfdf5;
      border: 1px solid #d1fae5;
    }

    .callout-icon {
      font-size: 14px;
      line-height: 1;
      font-weight: bold;
    }

    .callout-text {
      display: flex;
      flex-direction: column;
    }

    .callout-title {
      font-size: clamp(11.5px, 2.7vw, 13px);
      font-weight: 700;
      line-height: 1.2;
    }

    .callout-sub {
      font-size: clamp(10.5px, 2.5vw, 11.5px);
      color: #64748b;
      margin-top: 1px;
    }

    .callout-blue .callout-title { color: #1d4ed8; }
    .callout-green .callout-title { color: #047857; }

    @media (max-width: 380px) {
      .callout-grid {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>

  <div class="diagram-content">
    
    <div class="tab-bar">
      <button class="tab-btn active" onclick="showView('general', this)">General Rule</button>
      <button class="tab-btn" onclick="showView('algebraic', this)">Algebraic (x<sup>3/4</sup>)</button>
      <button class="tab-btn" onclick="showView('numeric', this)">Numeric (8<sup>2/3</sup>)</button>
    </div>

    
    <div class="math-card">
      
      
      <div id="view-general" class="equation-view active">
        <div class="math-expr">
          x<span class="frac-exp"><span class="pill pill-power">m</span><span class="bar"></span><span class="pill pill-root">n</span></span>
        </div>
        <span class="math-sym">=</span>
        <div class="math-expr">
          <span class="paren-group">
            <span class="paren">(</span>
            <span class="radical-group">
              <span class="root-index pill pill-root">n</span>
              <span class="radical-symbol-box">
                <svg class="radical-svg" viewBox="0 0 14 36">
                  <path d="M 1 20 L 4 20 L 7.5 34 L 13.5 1.5 L 14 1.5" />
                </svg>
              </span>
              <span class="radicand">x</span>
            </span>
            <span class="paren">)</span>
          </span>
          <span class="outer-exp pill pill-power">m</span>
        </div>
        <span class="math-sym">=</span>
        <div class="math-expr">
          <span class="radical-group">
            <span class="root-index pill pill-root">n</span>
            <span class="radical-symbol-box">
              <svg class="radical-svg" viewBox="0 0 14 36">
                <path d="M 1 20 L 4 20 L 7.5 34 L 13.5 1.5 L 14 1.5" />
              </svg>
            </span>
            <span class="radicand">x<span class="outer-exp pill pill-power" style="margin-left:2px; vertical-align:0.6em;">m</span></span>
          </span>
        </div>
      </div>

      
      <div id="view-algebraic" class="equation-view">
        <div class="math-expr">
          x<span class="frac-exp"><span class="pill pill-power">3</span><span class="bar"></span><span class="pill pill-root">4</span></span>
        </div>
        <span class="math-sym">=</span>
        <div class="math-expr">
          <span class="paren-group">
            <span class="paren">(</span>
            <span class="radical-group">
              <span class="root-index pill pill-root">4</span>
              <span class="radical-symbol-box">
                <svg class="radical-svg" viewBox="0 0 14 36">
                  <path d="M 1 20 L 4 20 L 7.5 34 L 13.5 1.5 L 14 1.5" />
                </svg>
              </span>
              <span class="radicand">x</span>
            </span>
            <span class="paren">)</span>
          </span>
          <span class="outer-exp pill pill-power">3</span>
        </div>
        <span class="math-sym">=</span>
        <div class="math-expr">
          <span class="radical-group">
            <span class="root-index pill pill-root">4</span>
            <span class="radical-symbol-box">
              <svg class="radical-svg" viewBox="0 0 14 36">
                <path d="M 1 20 L 4 20 L 7.5 34 L 13.5 1.5 L 14 1.5" />
              </svg>
            </span>
            <span class="radicand">x<span class="outer-exp pill pill-power" style="margin-left:2px; vertical-align:0.6em;">3</span></span>
          </span>
        </div>
      </div>

      
      <div id="view-numeric" class="equation-view">
        <div class="numeric-view-wrap">
          <div style="display:flex; align-items:center; justify-content:center; gap:clamp(4px, 1.4vw, 10px); flex-wrap:nowrap; width:100%;">
            <div class="math-expr">
              8<span class="frac-exp"><span class="pill pill-power">2</span><span class="bar"></span><span class="pill pill-root">3</span></span>
            </div>
            <span class="math-sym">=</span>
            <div class="math-expr">
              <span class="paren-group">
                <span class="paren">(</span>
                <span class="radical-group">
                  <span class="root-index pill pill-root">3</span>
                  <span class="radical-symbol-box">
                    <svg class="radical-svg" viewBox="0 0 14 36">
                      <path d="M 1 20 L 4 20 L 7.5 34 L 13.5 1.5 L 14 1.5" />
                    </svg>
                  </span>
                  <span class="radicand">8</span>
                </span>
                <span class="paren">)</span>
              </span>
              <span class="outer-exp pill pill-power">2</span>
            </div>
            <span class="math-sym">=</span>
            <div class="math-expr">
              <span class="radical-group">
                <span class="root-index pill pill-root">3</span>
                <span class="radical-symbol-box">
                  <svg class="radical-svg" viewBox="0 0 14 36">
                    <path d="M 1 20 L 4 20 L 7.5 34 L 13.5 1.5 L 14 1.5" />
                  </svg>
                </span>
                <span class="radicand">8<span class="outer-exp pill pill-power" style="margin-left:2px; vertical-align:0.6em;">2</span></span>
              </span>
            </div>
          </div>

          <div class="eval-steps">
            <div class="step-badge step-1">
              <span>① Root:</span>
              <span>∛8 = 2</span>
            </div>
            <span class="arrow-sym">→</span>
            <div class="step-badge step-2">
              <span>② Power:</span>
              <span>2² = 4</span>
            </div>
            <span class="arrow-sym">→</span>
            <div class="step-result">
              = 4
            </div>
          </div>
        </div>
      </div>

    </div>

    
    <div class="callout-grid">
      <div class="callout-card callout-blue">
        <span class="callout-icon">▲</span>
        <div class="callout-text">
          <span class="callout-title">Numerator → Power</span>
          <span class="callout-sub">Standard exponent (raise / multiply)</span>
        </div>
      </div>

      <div class="callout-card callout-green">
        <span class="callout-icon">▼</span>
        <div class="callout-text">
          <span class="callout-title">Denominator → Root Index</span>
          <span class="callout-sub">Radical degree (take root)</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    function showView(viewId, btn) {
      document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
      document.querySelectorAll('.equation-view').forEach(v => v.classList.remove('active'));
      
      btn.classList.add('active');
      const target = document.getElementById('view-' + viewId);
      if (target) target.classList.add('active');
    }
  </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">
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background: #f8fafc;
      color: #1e293b;
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100%;
    }

    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
    }

    .law-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 6px;
      cursor: pointer;
      transition: box-shadow 0.2s ease, border-color 0.2s ease;
      user-select: none;
    }

    .law-card:hover {
      border-color: #cbd5e1;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

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

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
    }

    .card-title {
      font-size: 13px;
      font-weight: 700;
      color: #1e293b;
    }

    .tag {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 4px;
      background: #eff6ff;
      color: #2563eb;
      white-space: nowrap;
    }

    .formula-box {
      background: #f1f5f9;
      border-radius: 6px;
      padding: 6px 8px;
      text-align: center;
      color: #0f172a;
      font-size: 15px;
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .law-card.active .formula-box {
      background: #e0e7ff;
      color: #4338ca;
    }

    .example-box {
      font-size: 13px;
      color: #475569;
      text-align: center;
      padding: 4px 2px 2px;
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-top: 1px dashed #e2e8f0;
    }

    .math-sym {
      display: inline-block;
    }

    @media (max-width: 380px) {
      body {
        padding: 6px;
      }
      .grid-container {
        gap: 6px;
      }
      .law-card {
        padding: 8px;
        gap: 4px;
      }
      .card-title {
        font-size: 12px;
      }
      .tag {
        font-size: 10px;
        padding: 1px 4px;
      }
      .formula-box {
        font-size: 13px;
        min-height: 34px;
        padding: 4px;
      }
      .example-box {
        font-size: 12px;
        min-height: 38px;
      }
    }
  </style>
</head>
<body>

  <div class="grid-container">
    
    <div class="law-card active" id="card-1">
      <div class="card-header">
        <span class="card-title">Product</span>
        <span class="tag">Add</span>
      </div>
      <div class="formula-box">
        <span class="math-sym" data-math="x^a \cdot x^b = x^{a+b}">xᵃ · xᵇ = xᵃ⁺ᵇ</span>
      </div>
      <div class="example-box">
        <span class="math-sym" data-math="x^{\frac{1}{2}} \cdot x^{\frac{1}{3}} = x^{\frac{3}{6}+\frac{2}{6}} = x^{\frac{5}{6}}">x^(1/2) · x^(1/3) = x^(5/6)</span>
      </div>
    </div>

    
    <div class="law-card" id="card-2">
      <div class="card-header">
        <span class="card-title">Quotient</span>
        <span class="tag">Subtract</span>
      </div>
      <div class="formula-box">
        <span class="math-sym" data-math="\frac{x^a}{x^b} = x^{a-b}">xᵃ / xᵇ = xᵃ⁻ᵇ</span>
      </div>
      <div class="example-box">
        <span class="math-sym" data-math="\frac{x^{3/4}}{x^{1/4}} = x^{\frac{2}{4}} = x^{\frac{1}{2}}">x^(3/4) / x^(1/4) = x^(1/2)</span>
      </div>
    </div>

    
    <div class="law-card" id="card-3">
      <div class="card-header">
        <span class="card-title">Power</span>
        <span class="tag">Multiply</span>
      </div>
      <div class="formula-box">
        <span class="math-sym" data-math="(x^a)^b = x^{a \cdot b}">(xᵃ)ᵇ = xᵃᵇ</span>
      </div>
      <div class="example-box">
        <span class="math-sym" data-math="(x^{\frac{2}{3}})^{\frac{3}{5}} = x^{\frac{6}{15}} = x^{\frac{2}{5}}">(x^(2/3))^(3/5) = x^(2/5)</span>
      </div>
    </div>

    
    <div class="law-card" id="card-4">
      <div class="card-header">
        <span class="card-title">Negative</span>
        <span class="tag">Invert</span>
      </div>
      <div class="formula-box">
        <span class="math-sym" data-math="x^{-a} = \frac{1}{x^a}">x⁻ᵃ = 1 / xᵃ</span>
      </div>
      <div class="example-box">
        <span class="math-sym" data-math="x^{-\frac{3}{2}} = \frac{1}{x^{\frac{3}{2}}}">x^(-3/2) = 1 / x^(3/2)</span>
      </div>
    </div>
  </div>

  <script>
    function renderFormulas() {
      if (window.katex) {
        document.querySelectorAll('[data-math]').forEach(el => {
          try {
            katex.render(el.getAttribute('data-math'), el, {
              throwOnError: false,
              displayMode: false
            });
          } catch (e) {}
        });
      }
    }

    renderFormulas();

    const cards = document.querySelectorAll('.law-card');
    cards.forEach(card => {
      card.addEventListener('click', () => {
        cards.forEach(c => c.classList.remove('active'));
        card.classList.add('active');
      });
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Proof: Square Root of 2 is Irrational</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      width: 100%;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      color: #0f172a;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 14px 12px;
      user-select: none;
      -webkit-user-select: none;
    }

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

    /* Header */
    .header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
    }

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

    .tag-badge {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      font-weight: 800;
      color: #4338ca;
      background: #e0e7ff;
      padding: 3px 8px;
      border-radius: 6px;
    }

    .main-title {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
    }

    .step-pills {
      display: flex;
      gap: 6px;
    }

    .step-pill {
      font-size: 12px;
      font-weight: 700;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #f1f5f9;
      color: #475569;
      cursor: pointer;
      border: 1.5px solid #cbd5e1;
      transition: all 0.2s ease;
    }

    .step-pill:hover {
      background: #e2e8f0;
      color: #0f172a;
    }

    .step-pill.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
    }

    /* Step Card Display */
    .stage-wrapper {
      position: relative;
      width: 100%;
      min-height: 250px;
    }

    .step-card {
      display: none;
      flex-direction: column;
      gap: 12px;
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
      animation: fadeIn 0.25s ease forwards;
    }

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

    .step-card.danger {
      border-color: #fca5a5;
      background: #fffafa;
    }

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

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

    .step-label {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #2563eb;
    }

    .step-card.danger .step-label {
      color: #dc2626;
    }

    .step-desc {
      font-size: 13px;
      color: #334155;
      font-weight: 500;
    }

    /* Math Flow Box */
    .math-display-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 14px 12px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 8px 12px;
    }

    .step-card.danger .math-display-box {
      background: #fef2f2;
      border-color: #fecaca;
    }

    /* Typography for Math formulas */
    .math-expr {
      font-family: 'Cambria Math', 'Times New Roman', Cambria, Georgia, serif;
      font-size: 19px;
      color: #0f172a;
      display: inline-flex;
      align-items: center;
      font-weight: 600;
      line-height: 1;
    }

    .math-expr sup {
      font-size: 12px;
      line-height: 0;
      vertical-align: super;
      margin-left: 1px;
    }

    .math-expr sub {
      font-size: 12px;
      line-height: 0;
      vertical-align: sub;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      padding: 0 3px;
    }

    .numerator {
      border-bottom: 1.5px solid #0f172a;
      padding-bottom: 2px;
      font-size: 17px;
    }

    .denominator {
      padding-top: 2px;
      font-size: 17px;
    }

    .math-op {
      font-family: system-ui, -apple-system, sans-serif;
      font-weight: 700;
      font-size: 15px;
      color: #64748b;
      margin: 0 2px;
    }

    .math-arrow {
      color: #2563eb;
      font-weight: 800;
      font-size: 17px;
    }

    .highlight-pill {
      display: inline-block;
      background: #e0f2fe;
      color: #0369a1;
      padding: 2px 6px;
      border-radius: 4px;
      font-family: monospace;
      font-weight: 700;
      font-size: 14px;
    }

    /* Deduction Box */
    .deduction-box {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 8px;
      font-size: 13px;
      line-height: 1.4;
      font-weight: 600;
    }

    .deduction-box.blue {
      background: #eff6ff;
      border-left: 4px solid #2563eb;
      color: #1e3a8a;
    }

    .deduction-box.amber {
      background: #fffbeb;
      border-left: 4px solid #d97706;
      color: #92400e;
    }

    .deduction-box.red {
      background: #fef2f2;
      border-left: 4px solid #dc2626;
      color: #991b1b;
    }

    .icon-badge {
      font-size: 16px;
      flex-shrink: 0;
    }

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

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

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

    .ctrl-btn.play {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
      min-width: 90px;
      justify-content: center;
    }

    .ctrl-btn.play:hover {
      background: #1d4ed8;
      border-color: #1d4ed8;
    }

    .step-counter {
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
    }

    @media (max-width: 440px) {
      .math-expr {
        font-size: 17px;
      }
      .numerator, .denominator {
        font-size: 15px;
      }
      .math-display-box {
        gap: 6px 8px;
      }
      .ctrl-btn {
        padding: 6px 12px;
        font-size: 12px;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    
    <div class="header-row">
      <div class="title-group">
        <span class="tag-badge">Contradiction</span>
        <span class="main-title">Proof: √2 is Irrational</span>
      </div>
      <div class="step-pills">
        <button class="step-pill active" data-step="0" aria-label="Step 1">1</button>
        <button class="step-pill" data-step="1" aria-label="Step 2">2</button>
        <button class="step-pill" data-step="2" aria-label="Step 3">3</button>
        <button class="step-pill" data-step="3" aria-label="Step 4">4</button>
      </div>
    </div>

    
    <div class="stage-wrapper">
      
      
      <div class="step-card active" id="card-0">
        <div class="card-header">
          <span class="step-label">Step 1 of 4: Initial Assumption</span>
          <span class="step-desc">Assume rational form</span>
        </div>

        <div class="math-display-box">
          <span class="math-expr">√2 = <span class="fraction"><span class="numerator">p</span><span class="denominator">q</span></span></span>
        </div>

        <div class="deduction-box blue">
          <span class="icon-badge">💡</span>
          <div>
            <strong>Definition of Rationality:</strong> Assume <em>p</em> and <em>q</em> are non-zero integers with no common factors, meaning <span class="highlight-pill">gcd(p, q) = 1</span> (irreducible fraction).
          </div>
        </div>
      </div>

      
      <div class="step-card" id="card-1">
        <div class="card-header">
          <span class="step-label">Step 2 of 4: Square & Rearrange</span>
          <span class="step-desc">Show <em>p</em> is even</span>
        </div>

        <div class="math-display-box">
          <span class="math-expr">2 = <span class="fraction"><span class="numerator">p<sup>2</sup></span><span class="denominator">q<sup>2</sup></span></span></span>
          <span class="math-arrow">➔</span>
          <span class="math-expr">p<sup>2</sup> = 2q<sup>2</sup></span>
          <span class="math-arrow">➔</span>
          <span class="math-expr">p = 2k</span>
        </div>

        <div class="deduction-box blue">
          <span class="icon-badge">📌</span>
          <div>
            <strong>First Deduction:</strong> Since <em>p</em><sup>2</sup> is a multiple of 2, <strong><em>p</em><sup>2</sup> is even</strong>. This implies <strong><em>p</em> must be even</strong>, so we can write <span class="highlight-pill">p = 2k</span> for some integer <em>k</em>.
          </div>
        </div>
      </div>

      
      <div class="step-card" id="card-2">
        <div class="card-header">
          <span class="step-label">Step 3 of 4: Substitute & Solve</span>
          <span class="step-desc">Show <em>q</em> is also even</span>
        </div>

        <div class="math-display-box">
          <span class="math-expr">(2k)<sup>2</sup> = 2q<sup>2</sup></span>
          <span class="math-arrow">➔</span>
          <span class="math-expr">4k<sup>2</sup> = 2q<sup>2</sup></span>
          <span class="math-arrow">➔</span>
          <span class="math-expr">q<sup>2</sup> = 2k<sup>2</sup></span>
        </div>

        <div class="deduction-box amber">
          <span class="icon-badge">🔍</span>
          <div>
            <strong>Second Deduction:</strong> Dividing by 2 yields <em>q</em><sup>2</sup> = 2<em>k</em><sup>2</sup>, which means <strong><em>q</em><sup>2</sup> is even</strong>. Therefore, <strong><em>q</em> is also even</strong> (<span class="highlight-pill">q = 2m</span>).
          </div>
        </div>
      </div>

      
      <div class="step-card danger" id="card-3">
        <div class="card-header">
          <span class="step-label">Step 4 of 4: Contradiction</span>
          <span class="step-desc">Assumption fails</span>
        </div>

        <div class="math-display-box">
          <span class="math-expr">p = 2k</span>
          <span class="math-op">&amp;</span>
          <span class="math-expr">q = 2m</span>
          <span class="math-arrow">➔</span>
          <span class="math-expr">gcd(p, q) ≥ 2</span>
        </div>

        <div class="deduction-box red">
          <span class="icon-badge">⚡</span>
          <div>
            <strong>Contradiction!</strong> Both <em>p</em> and <em>q</em> are even, sharing a common factor of 2. This directly contradicts our initial assumption that <span class="highlight-pill">gcd(p, q) = 1</span>. Hence, <strong>√2 is irrational</strong>.
          </div>
        </div>
      </div>

    </div>

    
    <div class="controls">
      <button class="ctrl-btn" id="prevBtn" aria-label="Previous Step">‹ Back</button>
      <span class="step-counter" id="stepIndicator">Step 1 of 4</span>
      <button class="ctrl-btn play" id="playBtn" aria-label="Play or Pause">
        <span id="playIcon">⏸ Auto</span>
      </button>
      <button class="ctrl-btn" id="nextBtn" aria-label="Next Step">Next ›</button>
    </div>
  </div>

  <script>
    const cards = document.querySelectorAll('.step-card');
    const pills = document.querySelectorAll('.step-pill');
    const stepIndicator = document.getElementById('stepIndicator');
    const playIcon = document.getElementById('playIcon');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const playBtn = document.getElementById('playBtn');

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

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

      pills.forEach((pill, i) => {
        pill.classList.toggle('active', i === currentStep);
      });

      stepIndicator.textContent = `Step ${currentStep + 1} of ${cards.length}`;
    }

    function nextStep() {
      renderStep(currentStep + 1);
    }

    function prevStep() {
      renderStep(currentStep - 1);
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      isPlaying = true;
      playIcon.textContent = '⏸ Auto';
      timer = setInterval(nextStep, 3600);
    }

    function stopAutoPlay() {
      if (timer) clearInterval(timer);
      isPlaying = false;
      playIcon.textContent = '▶ Play';
    }

    function togglePlay() {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        nextStep();
        startAutoPlay();
      }
    }

    prevBtn.addEventListener('click', () => {
      stopAutoPlay();
      prevStep();
    });

    nextBtn.addEventListener('click', () => {
      stopAutoPlay();
      nextStep();
    });

    playBtn.addEventListener('click', togglePlay);

    pills.forEach((pill, i) => {
      pill.addEventListener('click', () => {
        stopAutoPlay();
        renderStep(i);
      });
    });

    // Start pedagogical cycling
    startAutoPlay();
  </script>
</body>
</html>

Set-Theoretic Foundations and Classifications of Real Numbers

<!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>Real Number Classification</title>
  <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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px;
      min-height: 100%;
    }

    .matrix-wrapper {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* Top Column Headers */
    .col-headers {
      display: grid;
      grid-template-columns: 80px 1fr 1fr;
      gap: 8px;
      text-align: center;
    }

    .header-label {
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      line-height: 1.2;
    }

    .header-label .sym {
      font-size: 16px;
      color: #0f172a;
    }

    /* Main Grid Layout */
    .grid-container {
      display: grid;
      grid-template-columns: 80px 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 8px;
    }

    .row-header {
      grid-column: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      padding: 4px;
      line-height: 1.2;
    }

    .row-header .sym {
      font-size: 16px;
      color: #0f172a;
    }

    /* Quadrant Cells */
    .cell {
      border-radius: 10px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      cursor: pointer;
      transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
      min-height: 120px;
      position: relative;
    }

    .cell.active {
      box-shadow: 0 0 0 2px #0284c7;
    }

    /* Cell 1: Rational + Algebraic */
    .cell-q-alg {
      background: #f0f9ff;
      border: 1.5px solid #bae6fd;
    }
    .cell-q-alg:hover {
      border-color: #0284c7;
    }

    /* Cell 2: Irrational + Algebraic */
    .cell-irr-alg {
      background: #f0fdf4;
      border: 1.5px solid #bbf7d0;
    }
    .cell-irr-alg:hover {
      border-color: #16a34a;
    }

    /* Cell 3: Rational + Transcendental (Impossible) */
    .cell-impossible {
      background: repeating-linear-gradient(
        -45deg,
        #fef2f2,
        #fef2f2 8px,
        #fee2e2 8px,
        #fee2e2 16px
      );
      border: 1.5px solid #fca5a5;
    }
    .cell-impossible:hover {
      border-color: #dc2626;
    }

    /* Cell 4: Irrational + Transcendental */
    .cell-irr-trans {
      background: #faf5ff;
      border: 1.5px solid #e9d5ff;
    }
    .cell-irr-trans:hover {
      border-color: #9333ea;
    }

    /* Cell Contents */
    .cell-tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
    }

    .cell-q-alg .cell-tag { color: #0369a1; }
    .cell-irr-alg .cell-tag { color: #15803d; }
    .cell-impossible .cell-tag { color: #b91c1c; }
    .cell-irr-trans .cell-tag { color: #7e22ce; }

    .examples {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      align-items: center;
      font-size: 15px;
      font-weight: 600;
      color: #1e293b;
    }

    .math-pill {
      background: rgba(255, 255, 255, 0.85);
      padding: 3px 7px;
      border-radius: 6px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      white-space: nowrap;
    }

    .impossible-title {
      font-size: 16px;
      font-weight: 700;
      color: #dc2626;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .impossible-sub {
      font-size: 11px;
      color: #991b1b;
      margin-top: 4px;
      font-weight: 600;
    }

    /* Bottom Info Card */
    .info-bar {
      margin-top: 4px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 13px;
      color: #334155;
      text-align: center;
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
    }

    .info-bar strong {
      color: #0f172a;
      margin-right: 4px;
    }

    @media (max-width: 400px) {
      .col-headers, .grid-container {
        grid-template-columns: 65px 1fr 1fr;
        gap: 5px;
      }
      .header-label, .row-header {
        font-size: 11px;
      }
      .header-label .sym, .row-header .sym {
        font-size: 14px;
      }
      .cell {
        min-height: 100px;
        padding: 8px 4px;
      }
      .examples {
        font-size: 13px;
        gap: 4px;
      }
      .math-pill {
        padding: 2px 5px;
      }
    }
  </style>
</head>
<body>

<div class="matrix-wrapper">
  
  <div class="col-headers">
    <div></div>
    <div class="header-label">
      <span>Algebraic</span>
      <span class="sym">𝔸</span>
    </div>
    <div class="header-label">
      <span>Transcendental</span>
      <span class="sym">𝕋</span>
    </div>
  </div>

  
  <div class="grid-container">
    
    <div class="row-header">
      <span>Rational</span>
      <span class="sym">ℚ</span>
    </div>

    <div class="cell cell-q-alg active" id="cell-1" onclick="selectCell(1)">
      <span class="cell-tag">ℚ ∩ 𝔸</span>
      <div class="examples">
        <span class="math-pill">−¾</span>
        <span class="math-pill">5</span>
        <span class="math-pill">0</span>
      </div>
    </div>

    <div class="cell cell-impossible" id="cell-2" onclick="selectCell(2)">
      <div class="impossible-title">∅ Empty</div>
      <div class="impossible-sub">All ℚ are in 𝔸</div>
    </div>

    
    <div class="row-header">
      <span>Irrational</span>
      <span class="sym">ℝ \ ℚ</span>
    </div>

    <div class="cell cell-irr-alg" id="cell-3" onclick="selectCell(3)">
      <span class="cell-tag">(ℝ \ ℚ) ∩ 𝔸</span>
      <div class="examples">
        <span class="math-pill">√2</span>
        <span class="math-pill">∛7</span>
        <span class="math-pill">φ</span>
      </div>
    </div>

    <div class="cell cell-irr-trans" id="cell-4" onclick="selectCell(4)">
      <span class="cell-tag">(ℝ \ ℚ) ∩ 𝕋</span>
      <div class="examples">
        <span class="math-pill">π</span>
        <span class="math-pill">e</span>
        <span class="math-pill">2<sup>√2</sup></span>
      </div>
    </div>
  </div>

  
  <div class="info-bar" id="infoText">
    <strong>Rational Algebraic:</strong> Roots of degree 1 integer polynomials (qx − p = 0).
  </div>
</div>

<script>
  const infoData = {
    1: "<strong>Rational Algebraic (ℚ ∩ 𝔸):</strong> Fractions & integers; roots of qx − p = 0.",
    2: "<strong>Impossible (ℚ ∩ 𝕋 = ∅):</strong> Every rational p/q solves qx − p = 0, so no rational is transcendental.",
    3: "<strong>Irrational Algebraic ((ℝ \\ ℚ) ∩ 𝔸):</strong> Non-repeating roots of higher polynomials (e.g. x² − 2 = 0).",
    4: "<strong>Irrational Transcendental (𝕋):</strong> Not roots of any integer polynomial. Comprises almost all real numbers."
  };

  function selectCell(idx) {
    for (let i = 1; i <= 4; i++) {
      const el = document.getElementById('cell-' + i);
      if (el) el.classList.toggle('active', i === idx);
    }
    const info = document.getElementById('infoText');
    if (info && infoData[idx]) {
      info.innerHTML = infoData[idx];
    }
  }

  // Allow hover to preview on desktop
  for (let i = 1; i <= 4; i++) {
    const el = document.getElementById('cell-' + i);
    if (el) {
      el.addEventListener('mouseenter', () => selectCell(i));
    }
  }
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nested Number Sets (N ⊂ Z ⊂ Q ⊂ R)</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      user-select: none;
      max-width: 100%;
    }

    /* Math font styling */
    .bb-sym {
      font-family: 'Cambria Math', 'Times New Roman', serif;
      font-size: 1.15em;
      font-weight: 700;
    }
    .math-text {
      font-family: 'Cambria Math', 'Times New Roman', Georgia, serif;
    }

    /* Subset Chain Header */
    .chain-nav {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px 6px;
    }
    .tier-btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 8px;
      font-size: 12px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
    }
    .tier-btn:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }
    .tier-btn.active-btn {
      background: #eff6ff;
      border-color: #2563eb;
      color: #1d4ed8;
      box-shadow: 0 0 0 1px #2563eb;
    }
    .subset-sym {
      color: #64748b;
      font-size: 13px;
      font-weight: 700;
    }

    /* Concentric Sets */
    .set-container {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .set-box {
      border-radius: 12px;
      padding: 6px 10px;
      cursor: pointer;
      transition: outline 0.15s, filter 0.15s, box-shadow 0.15s;
      position: relative;
      border: 1.5px solid transparent;
      display: flex;
      flex-direction: column;
    }
    .set-box:hover {
      filter: brightness(0.98);
    }

    .set-box.tier-r {
      background: #f1f5f9;
      border-color: #cbd5e1;
      padding-bottom: 8px;
    }
    .set-box.tier-q {
      background: #ccfbf1;
      border-color: #5eead4;
      margin-top: 6px;
      padding-bottom: 8px;
    }
    .set-box.tier-z {
      background: #dbeafe;
      border-color: #93c5fd;
      margin-top: 6px;
      padding-bottom: 8px;
    }
    .set-box.tier-n {
      background: #fef3c7;
      border-color: #fcd34d;
      margin-top: 6px;
      padding-bottom: 8px;
    }

    .set-box.active {
      box-shadow: 0 0 0 2.5px #2563eb;
    }

    .box-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
      flex-wrap: wrap;
      gap: 4px;
    }
    .box-title {
      font-size: 12.5px;
      font-weight: 700;
      color: #1e2945;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .samples {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px;
    }
    .sample-pill {
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(0, 0, 0, 0.12);
      border-radius: 4px;
      padding: 1px 6px;
      font-family: 'Cambria Math', 'Times New Roman', Georgia, serif;
      font-size: 12px;
      font-weight: 600;
      color: #1e2945;
      display: inline-flex;
      align-items: center;
      line-height: 1.3;
    }

    /* Fractions in math */
    .frac {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 0.85em;
      line-height: 0.95;
      margin: 0 1px;
    }
    .frac > .num {
      border-bottom: 1px solid #1e2945;
      padding-bottom: 1px;
    }
    .frac > .den {
      padding-top: 1px;
    }

    /* Detail Summary Card */
    .summary-card {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      flex-direction: column;
      gap: 5px;
      min-height: 90px;
    }
    .summary-header-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px;
      border-bottom: 1px solid #f1f5f9;
      padding-bottom: 4px;
    }
    .summary-title {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .tier-badge {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 7px;
      border-radius: 12px;
      background: #f1f5f9;
      color: #475569;
    }
    .summary-def {
      font-size: 13px;
      color: #1e2945;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      background: #f8fafc;
      padding: 4px 8px;
      border-radius: 6px;
      border-left: 3px solid #2563eb;
    }
    .def-label {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .def-formula {
      font-family: 'Cambria Math', 'Times New Roman', Georgia, serif;
      font-size: 13.5px;
      font-weight: 600;
      color: #0f172a;
    }
    .summary-desc {
      font-size: 12px;
      color: #475569;
      line-height: 1.35;
    }

    @media (max-width: 380px) {
      .tier-btn {
        padding: 3px 6px;
        font-size: 11px;
      }
      .box-title {
        font-size: 11.5px;
      }
      .sample-pill {
        font-size: 11px;
        padding: 1px 4px;
      }
      .summary-card {
        padding: 6px 10px;
      }
    }
  </style>
</head>
<body>

  
  <div class="chain-nav">
    <button class="tier-btn" id="btn-N" onclick="selectTier('N')">
      <span class="bb-sym">ℕ</span> Natural
    </button>
    <span class="subset-sym">⊂</span>
    <button class="tier-btn" id="btn-Z" onclick="selectTier('Z')">
      <span class="bb-sym">ℤ</span> Integer
    </button>
    <span class="subset-sym">⊂</span>
    <button class="tier-btn" id="btn-Q" onclick="selectTier('Q')">
      <span class="bb-sym">ℚ</span> Rational
    </button>
    <span class="subset-sym">⊂</span>
    <button class="tier-btn" id="btn-R" onclick="selectTier('R')">
      <span class="bb-sym">ℝ</span> Real
    </button>
  </div>

  
  <div class="set-container">
    
    <div class="set-box tier-r" id="box-R" onclick="handleBoxClick(event, 'R')">
      <div class="box-header">
        <span class="box-title"><span class="bb-sym">ℝ</span> Real Numbers (ℝ \ ℚ Irrationals)</span>
        <div class="samples">
          <span class="sample-pill">&pi;</span>
          <span class="sample-pill">&radic;2</span>
          <span class="sample-pill"><i>e</i></span>
          <span class="sample-pill">-&radic;5</span>
        </div>
      </div>

      
      <div class="set-box tier-q" id="box-Q" onclick="handleBoxClick(event, 'Q')">
        <div class="box-header">
          <span class="box-title"><span class="bb-sym">ℚ</span> Rational Numbers (ℚ \ ℤ Fractions/Decimals)</span>
          <div class="samples">
            <span class="sample-pill"><span class="frac"><span class="num">1</span><span class="den">2</span></span></span>
            <span class="sample-pill">-<span class="frac"><span class="num">3</span><span class="den">4</span></span></span>
            <span class="sample-pill">0.333&hellip;</span>
            <span class="sample-pill">2.75</span>
          </div>
        </div>

        
        <div class="set-box tier-z" id="box-Z" onclick="handleBoxClick(event, 'Z')">
          <div class="box-header">
            <span class="box-title"><span class="bb-sym">ℤ</span> Integers (ℤ \ ℕ Zero &amp; Negatives)</span>
            <div class="samples">
              <span class="sample-pill">0</span>
              <span class="sample-pill">-7</span>
              <span class="sample-pill">-42</span>
            </div>
          </div>

          
          <div class="set-box tier-n" id="box-N" onclick="handleBoxClick(event, 'N')">
            <div class="box-header">
              <span class="box-title"><span class="bb-sym">ℕ</span> Natural Numbers (Counting)</span>
              <div class="samples">
                <span class="sample-pill">1</span>
                <span class="sample-pill">2</span>
                <span class="sample-pill">42</span>
                <span class="sample-pill">100</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  
  <div class="summary-card">
    <div class="summary-header-row">
      <div class="summary-title" id="summary-header"></div>
      <span class="tier-badge" id="tier-badge-text"></span>
    </div>
    <div class="summary-def">
      <span class="def-label">Notation:</span>
      <span class="def-formula" id="summary-body"></span>
    </div>
    <div class="summary-desc" id="summary-desc"></div>
  </div>

  <script>
    const tierData = {
      N: {
        symbol: 'ℕ',
        name: 'Natural Numbers (Counting Numbers)',
        badge: 'ℕ ⊂ ℤ ⊂ ℚ ⊂ ℝ (Innermost)',
        notation: '{ 1, 2, 3, 4, 5, 42, … }',
        desc: 'Positive integers used for counting discrete items. Every natural number is also an integer, a rational number, and a real number.'
      },
      Z: {
        symbol: 'ℤ',
        name: 'Integers',
        badge: 'ℤ ⊂ ℚ ⊂ ℝ',
        notation: '{ …, -3, -2, -1, 0, 1, 2, 3, … }',
        desc: 'Natural numbers along with zero and all negative whole numbers (additive inverses). Closed under addition, subtraction, and multiplication.'
      },
      Q: {
        symbol: 'ℚ',
        name: 'Rational Numbers',
        badge: 'ℚ ⊂ ℝ',
        notation: '{ p / q  |  p, q ∈ ℤ, q ≠ 0 }',
        desc: 'All numbers that can be expressed as the ratio of two integers. Their decimal representations either terminate or repeat indefinitely.'
      },
      R: {
        symbol: 'ℝ',
        name: 'Real Numbers',
        badge: 'ℝ (Outermost Continuum)',
        notation: 'ℚ ∪ { Irrationals } = (-∞, +∞)',
        desc: 'The complete continuum representing every point on the geometric number line, combining all rational numbers and non-repeating irrational numbers (such as π and √2).'
      }
    };

    function selectTier(tierKey) {
      // Update active highlight classes on boxes and buttons
      ['N', 'Z', 'Q', 'R'].forEach(k => {
        const box = document.getElementById('box-' + k);
        const btn = document.getElementById('btn-' + k);
        if (k === tierKey) {
          box.classList.add('active');
          btn.classList.add('active-btn');
        } else {
          box.classList.remove('active');
          btn.classList.remove('active-btn');
        }
      });

      // Update definition card
      const data = tierData[tierKey];
      document.getElementById('summary-header').innerHTML = `<span class="bb-sym">${data.symbol}</span> — ${data.name}`;
      document.getElementById('tier-badge-text').textContent = data.badge;
      document.getElementById('summary-body').textContent = data.notation;
      document.getElementById('summary-desc').textContent = data.desc;
    }

    function handleBoxClick(e, tierKey) {
      e.stopPropagation();
      selectTier(tierKey);
    }

    // Initialize on mount
    window.addEventListener('DOMContentLoaded', () => {
      selectTier('N');
    });
  </script>
</body>
</html>

Números reales y jerarquía de operaciones

Representación decimal de números racionales

Números irracionales y decimales infinitos no periódicos

Propiedad de densidad de los números racionales

Incompletitud de los racionales y necesidad de los reales

Comparación estructural de los sistemas N, Z, Q y R

math

Estructura y propiedades de los sistemas numéricos

分数×整数の意味 — 単位分数のいくつ分

分数×整数の計算 — 分子に整数をかける方法

分数×分数の意味 — 面積図と割合の考え方

分数×分数の計算 — 分母同士・分子同士のかけ算

帯分数を含むかけ算 — 仮分数に直して計算する

3つの分数の連続かけ算と約分の工夫

かける数と積の大きさの関係 — 1より大きいか小さいか

分数のかけ算の文章問題 — 割合や面積・体積への応用

分数の計算を生活に活かす

分数のかけ算 — 意味の理解と計算の習熟

Simplifying Algebraic Expressions with Integer Exponents

Working with Unit Fraction Rational Exponents

Working with General Rational Exponents

Solving Index Equations with Common Bases

Simplifying and Combining Surd Expressions

Expanding Brackets Containing Surds

Rationalising Monomial Surd Denominators

Rationalising Binomial Surd Denominators

Solving Algebraic Equations Involving Surds

Proof and Problem Solving with Surds and Indices

Algebraic Fluency: Indices and Surds

Notación científica y órdenes de magnitud

Radicales, exponentes racionales y simplificación

Racionalización de denominadores monomios y binomios

Desigualdades e intervalos en la recta real

Valor absoluto y distancia en los reales

Selección de notaciones adecuadas en problemas aplicados

Representaciones y operaciones con números reales

分数÷整数の意味 — 分母に整数をかける仕組み

逆数の意味と求め方 — 積が1になる数

分数÷分数の意味 — 1あたりの量を求める数直線図

なぜ逆数をかけるのか — 割り算の性質を使った証明

分数の割り算の基本計算 — 約分の手順

帯分数を含む分数の割り算

割る数と商の大きさの関係 — 1より小さい数で割ると商は増える

分数の割り算の文章問題 — 1単位量ともとにする量

分数のかけ算・割り算の性質を調べる

分数の割り算 — 逆数と割り算の意味・アルゴリズム

Decimal Expansions, Periodicity, and Non-Terminating Representations

The Archimedean Property and Density of Rational Numbers

Upper Bounds, Lower Bounds, Supremum, and Infimum

The Completeness Axiom and the Least Upper Bound Property

The Nested Intervals Theorem and Cantor's Diagonalization Argument

Real Number Continuum: Density, Completeness, and Bounds

小数と分数が混ざったかけ算・割り算 — すべて分数に統一

乗除混合計算 — 割り算を逆数のかけ算に直して1つの分数にする

分配法則を使った分数の工夫計算

かっこを含む分数の四則混合計算

分数の見積もりと逆算による確かめ

分数の割合問題 — 何倍・何分の一の逆算

数と計算の総合演習 — 小学校の計算の総まとめ

分数と小数の四則混合計算と計算法則の活用

Simplifying Nested and Compound Radical Expressions

Rationalizing Binomial Denominators Using Conjugates

Rationalizing Higher-Order and Trinomial Radical Denominators

Solving Equations Involving Rational Exponents and Surds

Exact Arithmetic and Algebraic Manipulation with Surd Constants

Advanced Surd Algebra, Rational Exponents, and Radical Conjugates

Extending Integer Exponents to Rational Exponents

Why 5^(1/3) Means the Cube Root of 5

Connecting Radical Notation to Rational Exponent Notation

Verifying the Definition of Rational Exponents

Rational Exponents and Radical Notation

Product Rule of Exponents with Integers

Quotient Rule of Exponents with Integers

Power of a Power Rule with Integers

Power of a Product Rule with Integers

Power of a Quotient Rule with Integers

Zero and Negative Exponents

Simplifying Expressions with Multiple Exponent Rules

Exponent Rules with Integer Exponents

Converting Between Radical and Rational Exponent Form

Product Rule with Rational Exponents

Quotient Rule with Rational Exponents

Power Rules with Rational Exponents

Simplifying Expressions with Mixed Integer and Rational Exponents

Rational Exponents

Multiplying Radical Expressions

Subtracting Radical Expressions with Like Radicands

Adding and Subtracting Radicals with Unlike Radicands

Dividing and Rationalizing Radical Expressions

Simplifying Higher-Order Roots and Radical Expressions

Radical Expressions and Operations

Solving One-Step Square Root Equations

Solving Two-Step Square Root Equations

Solving Square Root Equations with Isolated Radicals

Solving Square Root Equations with Non-Isolated Radicals

Solving Square Root Equations with Variables on Both Sides

Identifying Transformations from Square Root Equations

Solving Multi-Step Cube Root Equations

Identifying Transformations from Cube Root Equations

Solving Radical Equations and Function Transformations

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

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

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

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

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

OGM.12.NUM.2

Aligned learning resources

Related diagrams