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

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

    /* Math typography */
    .math {
      font-family: 'Cambria Math', 'Latin Modern Math', 'Times New Roman', Georgia, serif;
      font-style: normal;
    }
    .var {
      font-style: italic;
    }
    sup {
      font-size: 0.72em;
      line-height: 0;
      position: relative;
      vertical-align: super;
    }

    /* Top Tags */
    .header-row {
      width: 100%;
      max-width: 520px;
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 4px;
    }

    .func-tag {
      padding: 6px 14px;
      border-radius: 999px;
      font-size: clamp(13px, 3.6vw, 15px);
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .tag-f {
      background: #f1f5f9;
      color: #1e2945;
      border: 1px solid #94a3b8;
    }

    .tag-g {
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #60a5fa;
    }

    /* Stage Container */
    .stage {
      width: 100%;
      max-width: 480px;
      height: 220px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 8px 0;
    }

    .step-view {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transform: translateY(10px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }

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

    /* Drop-in Visual on Step 0 */
    .incoming-pill {
      background: #1d4ed8;
      color: #ffffff;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: clamp(14px, 3.8vw, 17px);
      font-weight: 700;
      box-shadow: 0 4px 10px rgba(29, 78, 216, 0.25);
      animation: floatDown 2s infinite ease-in-out;
      margin-bottom: 2px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .arrow-indicator {
      font-size: 16px;
      color: #1d4ed8;
      line-height: 1;
      margin-bottom: 8px;
      animation: floatDown 2s infinite ease-in-out;
    }

    @keyframes floatDown {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(5px); }
    }

    .slot-row {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: clamp(15px, 4.2vw, 21px);
      font-weight: 700;
      color: #1e2945;
      white-space: nowrap;
      gap: 3px;
      max-width: 100%;
    }

    .slot-box {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: clamp(38px, 10vw, 56px);
      height: clamp(30px, 8vw, 38px);
      padding: 0 6px;
      border: 2px dashed #94a3b8;
      background: #f8fafc;
      border-radius: 6px;
      color: #334155;
      font-size: clamp(13px, 3.6vw, 17px);
      font-weight: 700;
      transition: all 0.5s ease;
    }

    .slot-box.highlight {
      border-color: #2563eb;
      background: #dbeafe;
      color: #1d4ed8;
    }

    /* Step Card Presentation */
    .math-card {
      width: 100%;
      max-width: 440px;
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      border-radius: 12px;
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    .math-card.final {
      background: #eff6ff;
      border-color: #60a5fa;
    }

    .step-title {
      font-size: clamp(11px, 3vw, 13px);
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #334155;
    }

    .math-card.final .step-title {
      color: #1d4ed8;
    }

    .math-expr {
      font-size: clamp(16px, 4.6vw, 22px);
      color: #1e2945;
      font-weight: 700;
      text-align: center;
      white-space: nowrap;
      overflow-x: auto;
      max-width: 100%;
      padding: 2px 4px;
    }

    .explanation {
      font-size: clamp(12px, 3.2vw, 14px);
      color: #475569;
      text-align: center;
      line-height: 1.35;
      padding: 0 4px;
    }

    /* Colors */
    .c-navy { color: #1e2945; }
    .c-blue { color: #1d4ed8; }
    .bg-blue-highlight {
      background: #dbeafe;
      padding: 1px 5px;
      border-radius: 4px;
      color: #1d4ed8;
      border: 1px solid #93c5fd;
    }

    /* Interactive Stepper Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      width: 100%;
      margin-top: 4px;
    }

    .nav-btn {
      background: #f8fafc;
      border: 1.5px solid #94a3b8;
      color: #1e2945;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    .nav-btn:hover, .nav-btn:focus-visible {
      background: #e2e8f0;
      border-color: #64748b;
      outline: none;
    }

    .nav-btn:active {
      background: #cbd5e1;
    }

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

    .dot {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      border: 1px solid #94a3b8;
      padding: 0;
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    .dot.active {
      background: #1d4ed8;
      border-color: #1e40af;
    }

    .dot:focus-visible {
      outline: 2px solid #1d4ed8;
      outline-offset: 2px;
    }
  </style>
</head>
<body>

  
  <header class="header-row">
    <div class="func-tag tag-f math">
      <span class="c-navy">f(<span class="var">x</span>) = 2<span class="var">x</span> + 3</span>
    </div>
    <div class="func-tag tag-g math">
      <span class="c-blue">g(<span class="var">x</span>) = <span class="var">x</span><sup>2</sup> − 4</span>
    </div>
  </header>

  
  <main class="stage" aria-live="polite">
    
    <div class="step-view active" id="view-0">
      <div class="incoming-pill math">
        g(<span class="var">x</span>) = <span class="var">x</span><sup>2</sup> − 4
      </div>
      <div class="arrow-indicator" aria-hidden="true">▼</div>
      <div class="slot-row math">
        <span class="c-navy">f(</span>
        <div class="slot-box highlight"><span class="var">x</span></div>
        <span class="c-navy">) = 2(</span>
        <div class="slot-box highlight"><span class="var">x</span></div>
        <span class="c-navy">) + 3</span>
      </div>
    </div>

    
    <div class="step-view" id="view-1">
      <div class="math-card">
        <span class="step-title">Step 1: Substitute g(x) into [ x ]</span>
        <div class="math-expr math">
          <span class="c-navy">f(g(<span class="var">x</span>)) = 2</span><span class="bg-blue-highlight">(<span class="var">x</span><sup>2</sup> − 4)</span><span class="c-navy"> + 3</span>
        </div>
        <p class="explanation">Replace every <strong class="c-navy">x</strong> in <strong class="c-navy">f(x)</strong> with the entire expression <strong class="c-blue">g(x)</strong>.</p>
      </div>
    </div>

    
    <div class="step-view" id="view-2">
      <div class="math-card">
        <span class="step-title">Step 2: Distribute 2</span>
        <div class="math-expr math">
          <span class="c-navy">= </span><span class="c-blue">2<span class="var">x</span><sup>2</sup> − 8</span><span class="c-navy"> + 3</span>
        </div>
        <p class="explanation">Multiply 2 through the parentheses: <strong class="c-blue">2 · x<sup>2</sup> = 2x<sup>2</sup></strong> and <strong class="c-blue">2 · (−4) = −8</strong>.</p>
      </div>
    </div>

    
    <div class="step-view" id="view-3">
      <div class="math-card final">
        <span class="step-title">Step 3: Combine Like Terms</span>
        <div class="math-expr math">
          <span class="c-navy">f(g(<span class="var">x</span>)) = </span><span class="c-blue">2<span class="var">x</span><sup>2</sup> − 5</span>
        </div>
        <p class="explanation">Combine constants: <strong class="c-navy">−8 + 3 = −5</strong>. The composite function is simplified!</p>
      </div>
    </div>
  </main>

  
  <nav class="controls" aria-label="Step navigation">
    <button class="nav-btn" id="prevBtn" aria-label="Previous Step">◀</button>
    <div class="dots-group" role="tablist">
      <button class="dot active" data-step="0" role="tab" aria-label="Step 1: Drop slot"></button>
      <button class="dot" data-step="1" role="tab" aria-label="Step 2: Substitute"></button>
      <button class="dot" data-step="2" role="tab" aria-label="Step 3: Distribute"></button>
      <button class="dot" data-step="3" role="tab" aria-label="Step 4: Final Simplify"></button>
    </div>
    <button class="nav-btn" id="playBtn" aria-label="Pause Auto-Play">⏸</button>
    <button class="nav-btn" id="nextBtn" aria-label="Next Step">▶</button>
  </nav>

  <script>
    const totalSteps = 4;
    let currentStep = 0;
    let autoPlay = true;
    let timer = null;

    const views = [
      document.getElementById("view-0"),
      document.getElementById("view-1"),
      document.getElementById("view-2"),
      document.getElementById("view-3")
    ];
    const dots = document.querySelectorAll(".dot");
    const playBtn = document.getElementById("playBtn");
    const prevBtn = document.getElementById("prevBtn");
    const nextBtn = document.getElementById("nextBtn");

    function showStep(idx) {
      currentStep = (idx + totalSteps) % totalSteps;
      views.forEach((v, i) => {
        if (i === currentStep) {
          v.classList.add("active");
        } else {
          v.classList.remove("active");
        }
      });
      dots.forEach((d, i) => {
        d.classList.toggle("active", i === currentStep);
      });
    }

    function resetTimer() {
      if (timer) clearInterval(timer);
      if (autoPlay) {
        timer = setInterval(() => {
          showStep(currentStep + 1);
        }, 3600);
      }
    }

    prevBtn.addEventListener("click", () => {
      showStep(currentStep - 1);
      resetTimer();
    });

    nextBtn.addEventListener("click", () => {
      showStep(currentStep + 1);
      resetTimer();
    });

    dots.forEach((dot, idx) => {
      dot.addEventListener("click", () => {
        showStep(idx);
        resetTimer();
      });
    });

    playBtn.addEventListener("click", () => {
      autoPlay = !autoPlay;
      playBtn.textContent = autoPlay ? "⏸" : "▶";
      playBtn.setAttribute("aria-label", autoPlay ? "Pause Auto-Play" : "Start Auto-Play");
      resetTimer();
    });

    resetTimer();
  </script>
</body>
</html>

Evaluating and Forming Composite Functions

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

    body {
      background: transparent;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e293b;
      padding: 8px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      min-height: 100%;
    }

    /* Math typography styling */
    .math {
      font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif;
      letter-spacing: 0.02em;
    }

    .math i {
      font-style: italic;
    }

    .math sup {
      font-size: 0.75em;
      vertical-align: super;
      line-height: 0;
      font-style: normal;
    }

    .math-var {
      display: inline-block;
      margin: 0 2.5px;
      font-weight: 600;
    }

    /* Top Badges */
    .header-pills {
      display: flex;
      justify-content: center;
      gap: 10px;
      width: 100%;
      flex-wrap: wrap;
    }

    .pill {
      padding: 5px 14px;
      border-radius: 999px;
      font-size: 13.5px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .pill-f {
      background: #e0f2fe;
      color: #0284c7;
      border: 1.5px solid #bae6fd;
    }

    .pill-g {
      background: #f3e8ff;
      color: #7c3aed;
      border: 1.5px solid #e9d5ff;
    }

    /* Interactive value tester */
    .tester-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 12.5px;
      font-weight: 600;
      color: #475569;
      flex-wrap: wrap;
    }

    .btn-group {
      display: inline-flex;
      gap: 6px;
    }

    .num-btn {
      padding: 3px 9px;
      border-radius: 6px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }

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

    .num-btn.active {
      background: #0f172a;
      color: #ffffff;
      border-color: #0f172a;
    }

    /* Central Comparison Layout */
    .comparison-grid {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 620px;
      gap: 6px;
    }

    .column {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 5px;
      min-width: 0;
    }

    .col-header {
      text-align: center;
      padding: 5px 4px;
      border-radius: 7px;
      font-weight: 700;
      font-size: 14.5px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .col-header-f {
      background: #0284c7;
      color: #ffffff;
    }

    .col-header-g {
      background: #7c3aed;
      color: #ffffff;
    }

    .col-subtitle {
      font-size: 11px;
      color: #475569;
      text-align: center;
      line-height: 1.35;
      padding: 1px 4px;
      min-height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-wrap: balance;
    }

    .step-card {
      background: #ffffff;
      border-radius: 7px;
      padding: 5px 6px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    }

    .step-label {
      font-size: 10px;
      color: #64748b;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    .step-expr {
      font-size: 12.5px;
      color: #1e293b;
      font-weight: 600;
      word-break: normal;
      white-space: nowrap;
      overflow-x: auto;
      max-width: 100%;
    }

    .highlight-purple {
      color: #7c3aed;
      font-weight: 700;
    }

    .highlight-blue {
      color: #0284c7;
      font-weight: 700;
    }

    .flow-arrow {
      text-align: center;
      color: #94a3b8;
      font-size: 12px;
      line-height: 1;
      margin: -2px 0;
      user-select: none;
    }

    .result-card {
      border-radius: 7px;
      padding: 5px 6px;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 2px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .result-f {
      background: #f0f9ff;
      border: 1.5px solid #0284c7;
      color: #0369a1;
    }

    .result-g {
      background: #faf5ff;
      border: 1.5px solid #7c3aed;
      color: #6b21a8;
    }

    .result-title {
      font-size: 9.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      opacity: 0.9;
    }

    .result-expr {
      font-size: 14.5px;
      font-weight: 800;
    }

    .eval-pill {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 5px;
      margin-top: 1px;
      display: inline-block;
      align-self: center;
    }

    .eval-f {
      background: #bae6fd;
      color: #0369a1;
    }

    .eval-g {
      background: #e9d5ff;
      color: #581c87;
    }

    /* Center Divider */
    .divider-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 2px;
      flex-shrink: 0;
    }

    .not-equal-badge {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #fef2f2;
      border: 2px solid #dc2626;
      color: #dc2626;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 800;
      line-height: 1;
      box-shadow: 0 0 10px rgba(220, 38, 38, 0.2);
    }

    /* Bottom Summary */
    .summary-banner {
      width: 100%;
      max-width: 620px;
      background: #fff1f2;
      border: 1px solid #fecdd3;
      color: #9f1239;
      border-radius: 7px;
      padding: 6px 10px;
      text-align: center;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.35;
    }

    .summary-banner strong {
      color: #881337;
    }

    /* Responsive Tweaks */
    @media (max-width: 480px) {
      .pill { font-size: 12px; padding: 4px 10px; }
      .col-header { font-size: 13px; padding: 4px 2px; }
      .col-subtitle { font-size: 9.5px; line-height: 1.25; min-height: 34px; }
      .step-label { font-size: 9px; }
      .step-expr { font-size: 11px; }
      .result-expr { font-size: 12.5px; }
      .eval-pill { font-size: 10px; padding: 1px 5px; }
      .not-equal-badge { width: 30px; height: 30px; font-size: 18px; }
      .summary-banner { font-size: 11px; padding: 5px 8px; }
      .tester-row { font-size: 11.5px; gap: 5px; }
      .num-btn { font-size: 11px; padding: 2px 7px; }
    }

    @media (max-width: 360px) {
      .comparison-grid { gap: 3px; }
      .not-equal-badge { width: 26px; height: 26px; font-size: 15px; border-width: 1.5px; }
      .step-card { padding: 4px 3px; }
      .col-subtitle { font-size: 9px; min-height: 38px; }
      .step-expr { font-size: 10px; }
    }
  </style>
</head>
<body>

  
  <div class="header-pills">
    <div class="pill pill-f">
      <span class="math"><i>f</i>(<i>x</i>) = 2<i>x</i> + 3</span>
    </div>
    <div class="pill pill-g">
      <span class="math"><i>g</i>(<i>x</i>) = <i>x</i><sup>2</sup> − 4</span>
    </div>
  </div>

  
  <div class="tester-row">
    <span>Evaluate at:</span>
    <div class="btn-group">
      <button class="num-btn" onclick="setX(1)">x = 1</button>
      <button class="num-btn active" onclick="setX(2)">x = 2</button>
      <button class="num-btn" onclick="setX(3)">x = 3</button>
    </div>
  </div>

  
  <div class="comparison-grid">
    
    
    <div class="column">
      <div class="col-header col-header-f math">
        <i>f</i>(<i>g</i>(<i>x</i>))
      </div>
      <div class="col-subtitle">
        <span>Inner function <span class="math math-var"><i>g</i></span> evaluated first, then applied to <span class="math math-var"><i>f</i></span></span>
      </div>
      
      
      <div class="step-card">
        <span class="step-label">1. Inner Input</span>
        <div class="step-expr math">
          <i>g</i>(<i>x</i>) = <span class="highlight-purple"><i>x</i><sup>2</sup> − 4</span>
        </div>
      </div>

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

      
      <div class="step-card">
        <span class="step-label">2. Substitution</span>
        <div class="step-expr math">
          <i>f</i>(<span class="highlight-purple"><i>x</i><sup>2</sup> − 4</span>) = 2(<span class="highlight-purple"><i>x</i><sup>2</sup> − 4</span>) + 3
        </div>
      </div>

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

      
      <div class="result-card result-f">
        <span class="result-title">Simplified Result</span>
        <div class="result-expr math">
          2<i>x</i><sup>2</sup> − 5
        </div>
        <div class="eval-pill eval-f math" id="eval-fg">
          At <i>x</i> = 2: 3
        </div>
      </div>
    </div>

    
    <div class="divider-col">
      <div class="not-equal-badge math" title="Not Equal">≠</div>
    </div>

    
    <div class="column">
      <div class="col-header col-header-g math">
        <i>g</i>(<i>f</i>(<i>x</i>))
      </div>
      <div class="col-subtitle">
        <span>Inner function <span class="math math-var"><i>f</i></span> evaluated first, then applied to <span class="math math-var"><i>g</i></span></span>
      </div>

      
      <div class="step-card">
        <span class="step-label">1. Inner Input</span>
        <div class="step-expr math">
          <i>f</i>(<i>x</i>) = <span class="highlight-blue">2<i>x</i> + 3</span>
        </div>
      </div>

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

      
      <div class="step-card">
        <span class="step-label">2. Substitution</span>
        <div class="step-expr math">
          <i>g</i>(<span class="highlight-blue">2<i>x</i> + 3</span>) = (<span class="highlight-blue">2<i>x</i> + 3</span>)<sup>2</sup> − 4
        </div>
      </div>

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

      
      <div class="result-card result-g">
        <span class="result-title">Simplified Result</span>
        <div class="result-expr math">
          4<i>x</i><sup>2</sup> + 12<i>x</i> + 5
        </div>
        <div class="eval-pill eval-g math" id="eval-gf">
          At <i>x</i> = 2: 45
        </div>
      </div>
    </div>

  </div>

  
  <div class="summary-banner">
    <strong>Key Takeaway:</strong> <span class="math"><i>f</i>(<i>g</i>(<i>x</i>)) ≠ <i>g</i>(<i>f</i>(<i>x</i>))</span> — Function composition is not commutative (order matters!).
  </div>

  <script>
    function setX(val) {
      document.querySelectorAll('.num-btn').forEach(btn => {
        btn.classList.toggle('active', btn.textContent.trim() === 'x = ' + val);
      });

      // f(g(x)) = 2x^2 - 5
      const fgVal = 2 * (val * val) - 5;
      // g(f(x)) = 4x^2 + 12x + 5
      const gfVal = 4 * (val * val) + 12 * val + 5;

      const evalFgEl = document.getElementById("eval-fg");
      const evalGfEl = document.getElementById("eval-gf");

      if (evalFgEl) {
        evalFgEl.innerHTML = 'At <i>x</i> = ' + val + ': <strong>' + fgVal + '</strong>';
      }
      if (evalGfEl) {
        evalGfEl.innerHTML = 'At <i>x</i> = ' + val + ': <strong>' + gfVal + '</strong>';
      }
    }

    // Initial evaluation setup
    setX(2);
  </script>
</body>
</html>

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

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

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

    /* Pipeline stage layout */
    .pipeline {
      width: 100%;
      display: grid;
      grid-template-columns: 70px 36px 1fr 36px 1fr 36px 70px;
      align-items: center;
      justify-items: center;
      position: relative;
    }

    @media (max-width: 520px) {
      .pipeline {
        grid-template-columns: 55px 24px 1fr 24px 1fr 24px 55px;
      }
    }

    /* Node & Card Styling */
    .node-pill {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 8px;
      text-align: center;
      font-weight: 700;
      font-size: 15px;
      color: #1e2945;
      box-shadow: 0 2px 6px rgba(30, 41, 69, 0.05);
      transition: all 0.3s ease;
      width: 100%;
      max-width: 68px;
    }

    .node-pill.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      color: #0284c7;
      box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.25);
    }

    .func-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 14px 10px;
      text-align: center;
      width: 100%;
      box-shadow: 0 4px 12px rgba(30, 41, 69, 0.04);
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .func-card.active {
      border-color: #22b7ff;
      background: #fcfdfe;
      box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.25);
    }

    .func-title {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .func-card.active .func-title {
      color: #0284c7;
    }

    .func-expr {
      font-size: 17px;
      font-weight: 800;
      color: #1e2945;
    }

    .calc-bubble {
      font-size: 13px;
      font-weight: 700;
      color: #0284c7;
      background: #e0f2fe;
      padding: 3px 8px;
      border-radius: 6px;
      min-height: 22px;
      opacity: 0.3;
      transition: opacity 0.3s ease;
    }

    .func-card.active .calc-bubble {
      opacity: 1;
    }

    /* Connectors */
    .connector {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #94a3b8;
      font-size: 20px;
      font-weight: 900;
      transition: all 0.3s ease;
    }

    .connector.active {
      color: #22b7ff;
      filter: drop-shadow(0 0 4px rgba(34, 183, 255, 0.5));
    }

    /* Summary pill */
    .summary-badge {
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      padding: 8px 18px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 5px rgba(30, 41, 69, 0.04);
    }

    .summary-badge span.hl {
      color: #0284c7;
      font-weight: 800;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 7px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .btn:active {
      background: #f1f5f9;
    }

    .btn-step {
      width: 34px;
      height: 34px;
      padding: 0;
      border-radius: 50%;
      font-size: 13px;
    }

    .btn-step.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
    }
  </style>
</head>
<body>

<div class="pipeline-wrapper">

  
  <div class="summary-badge">
    <span>(f ∘ g)(3)</span>
    <span>=</span>
    <span>f(g(3))</span>
    <span>=</span>
    <span class="hl" id="finalResult">49</span>
  </div>

  
  <div class="pipeline">
    
    <div class="node-pill" id="nodeInput">
      <div style="font-size: 11px; color:#64748b; font-weight:600;">Input</div>
      x = 3
    </div>

    
    <div class="connector" id="arrow1">→</div>

    
    <div class="func-card" id="cardG">
      <div class="func-title">Inside g(x)</div>
      <div class="func-expr">2x + 1</div>
      <div class="calc-bubble" id="calcG">2(3) + 1 = 7</div>
    </div>

    
    <div class="connector" id="arrow2">→</div>

    
    <div class="func-card" id="cardF">
      <div class="func-title">Inside f(u)</div>
      <div class="func-expr">u²</div>
      <div class="calc-bubble" id="calcF">7² = 49</div>
    </div>

    
    <div class="connector" id="arrow3">→</div>

    
    <div class="node-pill" id="nodeOutput">
      <div style="font-size: 11px; color:#64748b; font-weight:600;">Output</div>
      49
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" id="playBtn" onclick="togglePlay()">
      <span id="playIcon">⏸</span>
    </button>
    <button class="btn btn-step" id="step0" onclick="goToStep(0)">1</button>
    <button class="btn btn-step" id="step1" onclick="goToStep(1)">2</button>
    <button class="btn btn-step" id="step2" onclick="goToStep(2)">3</button>
    <button class="btn btn-step" id="step3" onclick="goToStep(3)">4</button>
  </div>

</div>

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

  const nodeInput = document.getElementById('nodeInput');
  const arrow1 = document.getElementById('arrow1');
  const cardG = document.getElementById('cardG');
  const arrow2 = document.getElementById('arrow2');
  const cardF = document.getElementById('cardF');
  const arrow3 = document.getElementById('arrow3');
  const nodeOutput = document.getElementById('nodeOutput');
  const stepBtns = [
    document.getElementById('step0'),
    document.getElementById('step1'),
    document.getElementById('step2'),
    document.getElementById('step3')
  ];
  const playIcon = document.getElementById('playIcon');

  function renderState() {
    // Clear all actives
    nodeInput.classList.remove('active');
    arrow1.classList.remove('active');
    cardG.classList.remove('active');
    arrow2.classList.remove('active');
    cardF.classList.remove('active');
    arrow3.classList.remove('active');
    nodeOutput.classList.remove('active');

    stepBtns.forEach((btn, idx) => {
      btn.classList.toggle('active', idx === currentStep);
    });

    if (currentStep === 0) {
      nodeInput.classList.add('active');
    } else if (currentStep === 1) {
      arrow1.classList.add('active');
      cardG.classList.add('active');
    } else if (currentStep === 2) {
      arrow2.classList.add('active');
      cardF.classList.add('active');
    } else if (currentStep === 3) {
      arrow3.classList.add('active');
      nodeOutput.classList.add('active');
    }
  }

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

  function goToStep(idx) {
    currentStep = idx;
    renderState();
    if (isPlaying) {
      clearInterval(timer);
      timer = setInterval(nextStep, 2600);
    }
  }

  function togglePlay() {
    isPlaying = !isPlaying;
    playIcon.textContent = isPlaying ? '⏸' : '▶';
    if (isPlaying) {
      timer = setInterval(nextStep, 2600);
    } else {
      clearInterval(timer);
    }
  }

  // Initialize
  renderState();
  timer = setInterval(nextStep, 2600);
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    .header-box {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }

    .fn-def {
      font-size: 15px;
      font-weight: 600;
      padding: 4px 10px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      color: #334155;
    }

    .target-expr {
      font-size: 17px;
      font-weight: 700;
      padding: 4px 12px;
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
    }

    .pipeline {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 620px;
      gap: 8px;
      margin-bottom: 16px;
      flex-wrap: nowrap;
    }

    @media (max-width: 520px) {
      .pipeline {
        flex-direction: column;
        gap: 12px;
      }
      .transfer-arrow {
        transform: rotate(90deg);
        margin: -4px 0;
      }
    }

    .card-step {
      flex: 1;
      min-width: 150px;
      width: 100%;
      border-radius: 12px;
      padding: 12px;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      opacity: 0.45;
    }

    .card-step.active {
      opacity: 1;
    }

    .card-step.step-1.active {
      border-color: #0284c7;
      box-shadow: 0 4px 16px rgba(2, 132, 199, 0.12);
    }

    .card-step.step-2.active {
      border-color: #16a34a;
      box-shadow: 0 4px 16px rgba(22, 163, 74, 0.12);
    }

    .step-pill {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 2px 8px;
      border-radius: 999px;
      margin-bottom: 8px;
    }

    .step-1 .step-pill {
      background: #e0f2fe;
      color: #0369a1;
    }

    .step-2 .step-pill {
      background: #dcfce7;
      color: #15803d;
    }

    .calc-box {
      font-size: 15px;
      font-weight: 600;
      padding: 8px 12px;
      border-radius: 8px;
      margin-bottom: 8px;
      width: 100%;
      transition: all 0.3s ease;
    }

    .step-1 .calc-box {
      background: #f0f9ff;
      border: 1.5px solid #bae6fd;
      color: #0c4a6e;
    }

    .step-2 .calc-box {
      background: #f0fdf4;
      border: 1.5px solid #bbf7d0;
      color: #14532d;
    }

    .result-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 6px;
      transition: all 0.3s ease;
    }

    .step-1 .result-badge {
      background: #0284c7;
      color: #ffffff;
    }

    .step-2 .result-badge {
      background: #16a34a;
      color: #ffffff;
    }

    .transfer-arrow {
      font-size: 22px;
      font-weight: 900;
      color: #94a3b8;
      transition: color 0.3s ease;
      user-select: none;
      flex-shrink: 0;
    }

    .transfer-arrow.active {
      color: #0284c7;
    }

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

    .btn {
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }

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

    .btn:hover:not(.active) {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
  </style>
</head>
<body>

  <div class="header-box">
    <div class="fn-def"><span id="g-def">g(x) = x^2 + 1</span></div>
    <div class="fn-def"><span id="f-def">f(x) = 3x - 5</span></div>
    <div class="target-expr"><span id="expr-target">f(g(4))</span></div>
  </div>

  <div class="pipeline">
    
    <div class="card-step step-1 active" id="card1">
      <div class="step-pill">Step 1 • Inner</div>
      <div class="calc-box">
        <span id="step1-math">g(4) = (4)^2 + 1 = 17</span>
      </div>
      <div class="result-badge" id="badge1">
        g(4) = 17
      </div>
    </div>

    
    <div class="transfer-arrow active" id="arrow">→</div>

    
    <div class="card-step step-2 active" id="card2">
      <div class="step-pill">Step 2 • Outer</div>
      <div class="calc-box">
        <span id="step2-math">f(17) = 3(17) - 5 = 46</span>
      </div>
      <div class="result-badge" id="badge2">
        f(g(4)) = 46
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="btn" id="btn-step1" onclick="setStep(1)">1. Inner g(4)</button>
    <button class="btn" id="btn-step2" onclick="setStep(2)">2. Outer f(17)</button>
    <button class="btn active" id="btn-both" onclick="setStep(3)">Both Steps</button>
    <button class="btn" id="btn-play" onclick="togglePlay()">▶ Auto</button>
  </div>

  <script>
    function renderMath() {
      if (window.katex) {
        katex.render("g(x) = x^2 + 1", document.getElementById('g-def'), { throwOnError: false });
        katex.render("f(x) = 3x - 5", document.getElementById('f-def'), { throwOnError: false });
        katex.render("f(g(4))", document.getElementById('expr-target'), { throwOnError: false });
        katex.render("g(4) = (4)^2 + 1 = 17", document.getElementById('step1-math'), { throwOnError: false });
        katex.render("g(4) = 17", document.getElementById('badge1'), { throwOnError: false });
        katex.render("f(17) = 3(17) - 5 = 46", document.getElementById('step2-math'), { throwOnError: false });
        katex.render("f(g(4)) = 46", document.getElementById('badge2'), { throwOnError: false });
      }
    }

    if (window.katex) {
      renderMath();
    } else {
      window.addEventListener('load', renderMath);
    }

    let currentMode = 3;
    let timer = null;

    function setStep(step) {
      currentMode = step;
      const c1 = document.getElementById('card1');
      const c2 = document.getElementById('card2');
      const arr = document.getElementById('arrow');
      const b1 = document.getElementById('btn-step1');
      const b2 = document.getElementById('btn-step2');
      const bBoth = document.getElementById('btn-both');

      b1.classList.toggle('active', step === 1);
      b2.classList.toggle('active', step === 2);
      bBoth.classList.toggle('active', step === 3);

      if (step === 1) {
        c1.classList.add('active');
        c2.classList.remove('active');
        arr.classList.remove('active');
      } else if (step === 2) {
        c1.classList.remove('active');
        c2.classList.add('active');
        arr.classList.add('active');
      } else {
        c1.classList.add('active');
        c2.classList.add('active');
        arr.classList.add('active');
      }
    }

    function togglePlay() {
      const playBtn = document.getElementById('btn-play');
      if (timer) {
        clearInterval(timer);
        timer = null;
        playBtn.textContent = '▶ Auto';
      } else {
        playBtn.textContent = '⏸ Pause';
        let step = 1;
        setStep(step);
        timer = setInterval(() => {
          step = (step % 3) + 1;
          setStep(step);
        }, 3200);
      }
    }
  </script>
</body>
</html>

OGM.10.FNC.6

Aligned learning resources

Related diagrams