<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e293b;
      background: transparent;
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      max-width: 620px;
      margin: 0 auto;
      padding: 8px 12px;
      user-select: none;
    }

    .math-bar {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px 10px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 10px;
      min-height: 40px;
    }

    .math-step {
      display: inline-flex;
      align-items: center;
      font-size: 13px;
      color: #64748b;
      opacity: 0.45;
      padding: 2px 6px;
      border-radius: 5px;
      transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    }
    .math-step.active {
      opacity: 1;
      font-weight: 700;
      color: #1e3a8a;
      background: #e0edff;
    }
    .step-arrow {
      color: #94a3b8;
      font-size: 12px;
    }

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

    .graph-container {
      position: relative;
      width: 100%;
      aspect-ratio: 460 / 240;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .controls {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }

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

    .step-btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 8px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .step-btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }
    .step-btn:hover:not(.active) {
      background: #f1f5f9;
    }

    .slider-wrap {
      flex: 1;
      min-width: 120px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .time-label {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      min-width: 48px;
      font-variant-numeric: tabular-nums;
    }

    input[type=range] {
      flex: 1;
      height: 6px;
      border-radius: 3px;
      background: #e2e8f0;
      outline: none;
      -webkit-appearance: none;
      cursor: pointer;
    }
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #2563eb;
      cursor: pointer;
      border: 2px solid #ffffff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }

    .play-btn {
      background: #0f172a;
      border: none;
      border-radius: 6px;
      color: #ffffff;
      padding: 5px 10px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      min-width: 32px;
      min-height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .play-btn:hover {
      background: #1e293b;
    }

    @media (max-width: 420px) {
      body {
        padding: 6px 8px;
        gap: 6px;
      }
      .math-bar {
        font-size: 11px;
        padding: 4px 6px;
        gap: 3px 6px;
      }
      .math-step {
        font-size: 11px;
      }
      .step-btn {
        padding: 4px 6px;
        font-size: 11px;
      }
      .time-label {
        font-size: 11px;
        min-width: 42px;
      }
    }
  </style>
</head>
<body>

  <div class="math-bar">
    <div id="m1" class="math-step active">
      <i>t</i> = <span class="frac"><span class="num"><i>x</i></span><span class="den"><i>v</i><sub>0<i>x</i></sub></span></span>
    </div>
    <span class="step-arrow">→</span>
    <div id="m2" class="math-step">
      <i>y</i> = <i>v</i><sub>0<i>y</i></sub><i>t</i> + <span class="frac"><span class="num">1</span><span class="den">2</span></span><i>a</i><sub><i>y</i></sub><i>t</i><sup>2</sup>
    </div>
    <span class="step-arrow">→</span>
    <div id="m3" class="math-step">
      <i>y</i>(<i>x</i>) = <i>Ax</i><sup>2</sup> + <i>Bx</i>
    </div>
  </div>

  <div class="graph-container">
    <svg id="plot" viewBox="0 0 460 240">
      <defs>
        
        <marker id="arr-axis" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#94a3b8"/>
        </marker>
        <marker id="arr-v0" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#059669"/>
        </marker>
        <marker id="arr-a" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#dc2626"/>
        </marker>
      </defs>

      
      <g stroke="#f1f5f9" stroke-width="1">
        <line x1="55" y1="50" x2="425" y2="50" />
        <line x1="55" y1="95" x2="425" y2="95" />
        <line x1="55" y1="140" x2="425" y2="140" />
        <line x1="145" y1="20" x2="145" y2="185" />
        <line x1="235" y1="20" x2="235" y2="185" />
        <line x1="325" y1="20" x2="325" y2="185" />
        <line x1="415" y1="20" x2="415" y2="185" />
      </g>

      
      <line x1="55" y1="185" x2="435" y2="185" stroke="#94a3b8" stroke-width="1.5" marker-end="url(#arr-axis)" />
      <line x1="55" y1="185" x2="55" y2="15" stroke="#94a3b8" stroke-width="1.5" marker-end="url(#arr-axis)" />
      <text x="435" y="202" fill="#64748b" font-size="12" font-weight="600">x</text>
      <text x="42" y="20" fill="#64748b" font-size="12" font-weight="600">y</text>
      <text x="45" y="198" fill="#94a3b8" font-size="11">0</text>

      
      <path id="trajPath" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-linecap="round" />

      
      <line id="projX" stroke="#94a3b8" stroke-width="1.2" stroke-dasharray="3 3" />
      <line id="projY" stroke="#94a3b8" stroke-width="1.2" stroke-dasharray="3 3" />

      
      <g id="pointsGroup"></g>

      
      
      <line x1="55" y1="185" x2="55" y2="225" stroke="#dc2626" stroke-width="2.5" marker-end="url(#arr-a)" />
      <text x="63" y="222" fill="#dc2626" font-size="12" font-weight="700">a</text>

      
      <line id="v0Line" x1="55" y1="185" x2="115" y2="95" stroke="#059669" stroke-width="2.5" marker-end="url(#arr-v0)" />
      <text x="120" y="93" fill="#059669" font-size="12" font-weight="700">v₀</text>

      
      <circle id="currPoint" cx="55" cy="185" r="5" fill="#2563eb" stroke="#ffffff" stroke-width="2" />
      <text id="posLabel" x="60" y="180" fill="#1e293b" font-size="11" font-weight="600"></text>
    </svg>
  </div>

  <div class="controls">
    <div class="btn-group">
      <button class="step-btn active" id="btnS1">1: t(x)</button>
      <button class="step-btn" id="btnS2">2: y(t)</button>
      <button class="step-btn" id="btnS3">3: y(x)</button>
    </div>

    <div class="slider-wrap">
      <input type="range" id="tSlider" min="0" max="1" step="0.005" value="0.5">
      <span class="time-label" id="tVal">t = 0.50</span>
    </div>

    <button class="play-btn" id="playBtn" title="Play/Pause">⏸</button>
  </div>

  <script>
    const OX = 55, OY = 185;
    const RANGE_X = 360;
    const H_MAX = 135; // peak height in svg pixels

    // Kinematics equations mapping
    function getX(t) { return OX + RANGE_X * t; }
    function getY(t) { return OY - 4 * H_MAX * (t - t * t); }

    // Precompute full parabola path
    const trajPath = document.getElementById('trajPath');
    let pathStr = "";
    for (let i = 0; i <= 100; i++) {
      const t = i / 100;
      pathStr += (i === 0 ? "M " : " L ") + getX(t).toFixed(1) + " " + getY(t).toFixed(1);
    }
    trajPath.setAttribute('d', pathStr);

    // Discrete sample points
    const pointsGroup = document.getElementById('pointsGroup');
    const sampleTs = [0.15, 0.3, 0.5, 0.7, 0.85, 1.0];
    sampleTs.forEach(t => {
      const c = document.createElementNS("http://www.w3.org/2000/svg", "circle");
      c.setAttribute("cx", getX(t));
      c.setAttribute("cy", getY(t));
      c.setAttribute("r", "3");
      c.setAttribute("fill", "#93c5fd");
      pointsGroup.appendChild(c);
    });

    const currPoint = document.getElementById('currPoint');
    const projX = document.getElementById('projX');
    const projY = document.getElementById('projY');
    const posLabel = document.getElementById('posLabel');
    const tSlider = document.getElementById('tSlider');
    const tVal = document.getElementById('tVal');
    const playBtn = document.getElementById('playBtn');

    let currentStep = 1;
    let isPlaying = true;
    let animT = 0.5;
    let animDir = 1;

    function updatePlot(t) {
      const px = getX(t);
      const py = getY(t);

      currPoint.setAttribute('cx', px);
      currPoint.setAttribute('cy', py);

      projX.setAttribute('x1', px);
      projX.setAttribute('y1', py);
      projX.setAttribute('x2', px);
      projX.setAttribute('y2', OY);

      projY.setAttribute('x1', px);
      projY.setAttribute('y1', py);
      projY.setAttribute('x2', OX);
      projY.setAttribute('y2', py);

      posLabel.setAttribute('x', Math.min(px + 7, 390));
      posLabel.setAttribute('y', Math.max(py - 8, 25));

      if (currentStep === 1) {
        posLabel.textContent = `x(t)`;
      } else if (currentStep === 2) {
        posLabel.textContent = `(x(t), y(t))`;
      } else {
        posLabel.textContent = `y(x)`;
      }

      tSlider.value = t;
      tVal.textContent = `t = ${t.toFixed(2)}`;
    }

    function setStep(s) {
      currentStep = s;
      document.querySelectorAll('.math-step').forEach((el, idx) => {
        el.classList.toggle('active', idx === s - 1);
      });
      document.querySelectorAll('.step-btn').forEach((btn, idx) => {
        btn.classList.toggle('active', idx === s - 1);
      });
      updatePlot(parseFloat(tSlider.value));
    }

    document.getElementById('btnS1').onclick = () => setStep(1);
    document.getElementById('btnS2').onclick = () => setStep(2);
    document.getElementById('btnS3').onclick = () => setStep(3);

    tSlider.oninput = (e) => {
      isPlaying = false;
      playBtn.textContent = '▶';
      animT = parseFloat(e.target.value);
      updatePlot(animT);
    };

    playBtn.onclick = () => {
      isPlaying = !isPlaying;
      playBtn.textContent = isPlaying ? '⏸' : '▶';
    };

    // Animation loop
    let lastTime = performance.now();
    function tick(now) {
      const dt = (now - lastTime) / 1000;
      lastTime = now;

      if (isPlaying) {
        animT += dt * 0.35 * animDir;
        if (animT >= 1) {
          animT = 1;
          animDir = -1;
        } else if (animT <= 0) {
          animT = 0;
          animDir = 1;
        }
        updatePlot(animT);
      }
      requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);

    // Initial render
    updatePlot(0.5);
  </script>
</body>
</html>

2D Kinematics Using Vectors Under Constant Acceleration

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background: #f8fafc;
      color: #1e293b;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      min-height: 100%;
      user-select: none;
    }

    /* Controls */
    .controls {
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }

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

    .btn.active {
      background: #0f172a;
      color: #ffffff;
      border-color: #0f172a;
      box-shadow: 0 2px 4px rgba(15, 23, 42, 0.15);
    }

    /* Main Diagram Grid */
    .diagram-area {
      width: 100%;
      max-width: 600px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    /* Master Vector Box */
    .master-card {
      width: 100%;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      border-radius: 12px;
      padding: 12px 14px;
      text-align: center;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
      z-index: 2;
    }

    .card-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .master-card .card-label {
      color: #475569;
    }

    .eq-display {
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 4px;
      flex-wrap: nowrap;
    }

    .operator {
      color: #64748b;
      font-weight: 600;
      padding: 0 2px;
    }

    /* Math Typography */
    .math {
      font-family: "Cambria Math", "Times New Roman", STIXGeneral, serif;
      font-style: italic;
    }

    .math sub, .math sup {
      font-size: 0.72em;
      font-style: normal;
      font-family: inherit;
    }

    .math sup {
      vertical-align: 0.45em;
    }

    .math sub {
      vertical-align: -0.3em;
    }

    .vec {
      position: relative;
      display: inline-block;
      font-style: italic;
      font-family: "Cambria Math", "Times New Roman", STIXGeneral, serif;
      padding-top: 2px;
    }

    .vec::after {
      content: "→";
      position: absolute;
      top: -0.58em;
      left: 50%;
      transform: translateX(-50%) scaleX(0.85);
      font-size: 0.65em;
      font-style: normal;
      font-weight: 700;
      line-height: 1;
      color: inherit;
    }

    .frac {
      font-style: normal;
      font-family: system-ui, sans-serif;
      font-size: 0.95em;
      margin-right: 1px;
    }

    .term {
      padding: 3px 6px;
      border-radius: 6px;
      transition: background-color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1.2;
    }

    .term:hover {
      background: #f1f5f9;
    }

    .term.dimmed {
      opacity: 0.22;
    }

    /* SVG Connecting Braces */
    .branch-svg {
      width: 100%;
      height: 44px;
      display: block;
      z-index: 1;
    }

    .branch-path {
      fill: none;
      stroke-width: 2.5;
      stroke-dasharray: 4 4;
      transition: stroke-width 0.25s ease, stroke-dasharray 0.25s ease;
    }

    .branch-x {
      stroke: #0d9488;
    }

    .branch-y {
      stroke: #7c3aed;
    }

    .branch-path.active {
      stroke-dasharray: none;
      stroke-width: 3.5;
    }

    /* Split Branches */
    .branches-row {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      z-index: 2;
    }

    .branch-card {
      border-radius: 12px;
      padding: 12px 10px;
      text-align: center;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
      transition: box-shadow 0.2s ease;
    }

    .card-x {
      border: 2px solid #0d9488;
      background: #f0fdfa;
    }

    .card-x .card-label {
      color: #0f766e;
    }

    .card-y {
      border: 2px solid #7c3aed;
      background: #faf5ff;
    }

    .card-y .card-label {
      color: #6d28d9;
    }

    /* Term Highlights */
    .hl-pos {
      background: #dbeafe !important;
      box-shadow: 0 0 0 2px #3b82f6;
    }

    .hl-vel {
      background: #fef3c7 !important;
      box-shadow: 0 0 0 2px #f59e0b;
    }

    .hl-acc {
      background: #fee2e2 !important;
      box-shadow: 0 0 0 2px #ef4444;
    }

    .hl-res {
      background: #e2e8f0 !important;
      box-shadow: 0 0 0 2px #64748b;
    }

    /* Explanatory note */
    .info-footer {
      margin-top: 10px;
      font-size: 11px;
      color: #64748b;
      text-align: center;
    }

    @media (max-width: 480px) {
      .branches-row {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .branch-svg {
        display: none;
      }
      .eq-display {
        font-size: 15px;
      }
      .btn {
        padding: 4px 9px;
        font-size: 11px;
      }
      .master-card {
        margin-bottom: 8px;
      }
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn active" id="btn-all" onclick="setHighlight('all', this)">All</button>
    <button class="btn" id="btn-res" onclick="setHighlight('res', this)">Position at t</button>
    <button class="btn" id="btn-pos" onclick="setHighlight('pos', this)">Initial Pos (<span class="math">r<sub>0</sub></span>)</button>
    <button class="btn" id="btn-vel" onclick="setHighlight('vel', this)">Velocity Term (<span class="math">v<sub>0</sub>t</span>)</button>
    <button class="btn" id="btn-acc" onclick="setHighlight('acc', this)">Accel Term (<span class="frac">½</span><span class="math">at<sup>2</sup></span>)</button>
  </div>

  
  <div class="diagram-area">
    
    
    <div class="master-card">
      <div class="card-label">2D Vector Kinematics (Master Equation)</div>
      <div class="eq-display" id="masterEq">
        <span class="term" id="m_res" onclick="selectTerm('res')">
          <span class="vec">r</span><span class="math">(t)</span>
        </span>
        <span class="operator">=</span>
        <span class="term" id="m_pos" onclick="selectTerm('pos')">
          <span class="vec">r</span><sub class="math">0</sub>
        </span>
        <span class="operator">+</span>
        <span class="term" id="m_vel" onclick="selectTerm('vel')">
          <span class="vec">v</span><sub class="math">0</sub><span class="math">t</span>
        </span>
        <span class="operator">+</span>
        <span class="term" id="m_acc" onclick="selectTerm('acc')">
          <span class="frac">½</span><span class="vec">a</span><span class="math">t<sup>2</sup></span>
        </span>
      </div>
    </div>

    
    <svg class="branch-svg" viewBox="0 0 600 44" preserveAspectRatio="none">
      <path id="pathX" class="branch-path branch-x" d="M 300 0 C 300 22, 150 22, 150 44" />
      <path id="pathY" class="branch-path branch-y" d="M 300 0 C 300 22, 450 22, 450 44" />
      <circle cx="300" cy="2" r="4" fill="#0f172a" />
      <circle cx="150" cy="42" r="4" fill="#0d9488" />
      <circle cx="450" cy="42" r="4" fill="#7c3aed" />
    </svg>

    
    <div class="branches-row">
      
      
      <div class="branch-card card-x">
        <div class="card-label">Horizontal Component (X-Axis)</div>
        <div class="eq-display">
          <span class="term" id="x_res" onclick="selectTerm('res')">
            <span class="math">x(t)</span>
          </span>
          <span class="operator">=</span>
          <span class="term" id="x_pos" onclick="selectTerm('pos')">
            <span class="math">x<sub>0</sub></span>
          </span>
          <span class="operator">+</span>
          <span class="term" id="x_vel" onclick="selectTerm('vel')">
            <span class="math">v<sub>0x</sub>t</span>
          </span>
          <span class="operator">+</span>
          <span class="term" id="x_acc" onclick="selectTerm('acc')">
            <span class="frac">½</span><span class="math">a<sub>x</sub>t<sup>2</sup></span>
          </span>
        </div>
      </div>

      
      <div class="branch-card card-y">
        <div class="card-label">Vertical Component (Y-Axis)</div>
        <div class="eq-display">
          <span class="term" id="y_res" onclick="selectTerm('res')">
            <span class="math">y(t)</span>
          </span>
          <span class="operator">=</span>
          <span class="term" id="y_pos" onclick="selectTerm('pos')">
            <span class="math">y<sub>0</sub></span>
          </span>
          <span class="operator">+</span>
          <span class="term" id="y_vel" onclick="selectTerm('vel')">
            <span class="math">v<sub>0y</sub>t</span>
          </span>
          <span class="operator">+</span>
          <span class="term" id="y_acc" onclick="selectTerm('acc')">
            <span class="frac">½</span><span class="math">a<sub>y</sub>t<sup>2</sup></span>
          </span>
        </div>
      </div>

    </div>

  </div>

  <div class="info-footer">
    Click any term or button to isolate matching vector components across equations
  </div>

  <script>
    let currentHighlight = 'all';

    function selectTerm(type) {
      if (currentHighlight === type) {
        setHighlight('all', document.getElementById('btn-all'));
      } else {
        const btn = document.getElementById('btn-' + type);
        setHighlight(type, btn);
      }
    }

    function setHighlight(type, btnEl) {
      currentHighlight = type;

      document.querySelectorAll('.controls .btn').forEach(b => b.classList.remove('active'));
      if (btnEl) {
        btnEl.classList.add('active');
      } else {
        const matchingBtn = document.getElementById('btn-' + type);
        if (matchingBtn) matchingBtn.classList.add('active');
      }

      const allTypes = ['res', 'pos', 'vel', 'acc'];
      const prefixes = ['m', 'x', 'y'];

      allTypes.forEach(t => {
        const isMatch = (type === 'all' || type === t);
        prefixes.forEach(p => {
          const el = document.getElementById(`${p}_${t}`);
          if (!el) return;
          
          el.className = 'term';
          if (type !== 'all') {
            if (isMatch) {
              el.classList.add(`hl-${t}`);
            } else {
              el.classList.add('dimmed');
            }
          }
        });
      });

      // SVG path emphasis
      const pathX = document.getElementById('pathX');
      const pathY = document.getElementById('pathY');
      if (pathX && pathY) {
        if (type === 'all') {
          pathX.classList.remove('active');
          pathY.classList.remove('active');
        } else {
          pathX.classList.add('active');
          pathY.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>2D Vector Kinematic Decoupling</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e293b;
      background: transparent;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }

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

    /* Desktop Layout */
    .main-stage {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 42px 1.25fr;
      align-items: center;
      gap: 4px;
    }

    /* Cards */
    .card-box {
      border-radius: 10px;
      padding: 10px 14px;
      background: #ffffff;
      transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .master-card {
      background: #f8faff;
      border: 2px solid #6366f1;
      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.12);
    }

    .branch-col {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .x-card {
      background: #f0f9ff;
      border: 2px solid #0284c7;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.1);
    }

    .y-card {
      background: #ecfdf5;
      border: 2px solid #059669;
      box-shadow: 0 2px 8px rgba(5, 150, 105, 0.1);
    }

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
    }

    .badge {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.4px;
      text-transform: uppercase;
      padding: 2px 8px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .badge-master { background: #e0e7ff; color: #4338ca; }
    .badge-x { background: #e0f2fe; color: #0369a1; }
    .badge-y { background: #d1fae5; color: #047857; }

    .dimension-indicator {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
    }

    /* Math Typesetting */
    .eq-container {
      font-family: "Cambria Math", "STIX Two Math", "KaTeX_Math", "Times New Roman", Georgia, serif;
      font-size: 16px;
      line-height: 1.6;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 2px 3px;
      user-select: none;
    }

    .math-var {
      font-style: italic;
    }

    .vec {
      position: relative;
      display: inline-block;
      font-style: italic;
      padding-top: 5px;
      margin-top: -5px;
    }

    .vec::before {
      content: "→";
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%) scaleX(0.75);
      font-size: 11px;
      font-style: normal;
      line-height: 1;
      font-weight: normal;
      color: inherit;
    }

    sub, .sub {
      font-size: 0.72em;
      vertical-align: -0.35em;
      margin-left: 0.5px;
      font-style: normal;
      line-height: 0;
    }

    sup, .sup {
      font-size: 0.72em;
      vertical-align: 0.45em;
      margin-left: 0.5px;
      font-style: normal;
      line-height: 0;
    }

    .frac {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 0.85em;
      line-height: 1;
      margin: 0 2px;
    }

    .frac .num {
      border-bottom: 1.2px solid currentColor;
      padding: 0 1px 1px 1px;
    }

    .frac .denom {
      padding: 1px 1px 0 1px;
    }

    .op {
      color: #475569;
      margin: 0 2px;
      font-weight: 500;
    }

    /* SVG Branching Lines (Desktop) */
    .branch-connector-desktop {
      width: 100%;
      height: 140px;
      display: block;
    }

    .branch-connector-mobile {
      display: none;
    }

    /* Interactive terms */
    .term {
      display: inline-flex;
      align-items: center;
      padding: 2px 4px;
      border-radius: 4px;
      transition: background-color 0.15s ease, outline 0.15s ease;
      cursor: pointer;
      outline: 1.5px solid transparent;
    }

    .term:hover {
      background-color: rgba(226, 232, 240, 0.7);
    }

    .term.active {
      background: #fef08a !important;
      outline: 2px solid #eab308;
      border-radius: 4px;
    }

    /* Controls / Legend */
    .controls-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      width: 100%;
    }

    .legend-title {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      text-align: center;
    }

    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      width: 100%;
    }

    .btn-term {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 5px 10px;
      border-radius: 18px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }

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

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

    .btn-term .btn-math {
      font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif;
      font-style: italic;
      font-weight: normal;
    }

    /* Responsive adjustments for mobile */
    @media (max-width: 540px) {
      body {
        padding: 4px;
      }

      .main-stage {
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .branch-connector-desktop {
        display: none;
      }

      .branch-connector-mobile {
        display: block;
        width: 100%;
        height: 32px;
        margin: -2px 0;
      }

      .eq-container {
        font-size: 14.5px;
      }

      .card-box {
        padding: 8px 10px;
      }

      .branch-col {
        gap: 6px;
      }

      .btn-term {
        padding: 4px 8px;
        font-size: 11px;
      }
    }
  </style>
</head>
<body>

  <div class="diagram-container">
    <div class="main-stage">
      
      <div class="card-box master-card" id="cardMaster">
        <div class="card-header">
          <span class="badge badge-master">2D Vector Equation</span>
          <span class="dimension-indicator">Vector Form</span>
        </div>
        <div class="eq-container" id="eqMaster">
          <span class="term" data-type="pos" title="Position vector at time t"><span class="vec">r</span>(<span class="math-var">t</span>)</span>
          <span class="op">=</span>
          <span class="term" data-type="pos0" title="Initial position vector"><span class="vec">r</span><sub>0</sub></span>
          <span class="op">+</span>
          <span class="term" data-type="vel" title="Initial velocity term"><span class="vec">v</span><sub>0</sub><span class="math-var">t</span></span>
          <span class="op">+</span>
          <span class="term" data-type="acc" title="Acceleration term"><span class="frac"><span class="num">1</span><span class="denom">2</span></span><span class="vec">a</span><span class="math-var">t</span><sup>2</sup></span>
        </div>
      </div>

      
      <svg class="branch-connector-desktop" viewBox="0 0 42 140" fill="none" preserveAspectRatio="none" aria-hidden="true">
        
        <path d="M 2 70 C 20 70, 18 30, 34 30" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" />
        <polygon points="34,25 42,30 34,35" fill="#0284c7" />

        
        <path d="M 2 70 C 20 70, 18 110, 34 110" stroke="#059669" stroke-width="2.5" stroke-linecap="round" />
        <polygon points="34,105 42,110 34,115" fill="#059669" />

        
        <circle cx="2" cy="70" r="3" fill="#6366f1" />
      </svg>

      
      <svg class="branch-connector-mobile" viewBox="0 0 200 32" fill="none" preserveAspectRatio="none" aria-hidden="true">
        
        <path d="M 100 2 L 100 12 C 100 18, 50 16, 50 24" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" />
        <polygon points="46,24 50,30 54,24" fill="#0284c7" />

        <path d="M 100 2 L 100 12 C 100 18, 150 16, 150 24" stroke="#059669" stroke-width="2.5" stroke-linecap="round" />
        <polygon points="146,24 150,30 154,24" fill="#059669" />

        <circle cx="100" cy="2" r="3" fill="#6366f1" />
      </svg>

      
      <div class="branch-col">
        
        <div class="card-box x-card" id="cardX">
          <div class="card-header">
            <span class="badge badge-x">Horizontal Component</span>
            <span class="dimension-indicator">X-Axis</span>
          </div>
          <div class="eq-container" id="eqX">
            <span class="term" data-type="pos" title="X position at time t"><span class="math-var">x</span>(<span class="math-var">t</span>)</span>
            <span class="op">=</span>
            <span class="term" data-type="pos0" title="Initial X position"><span class="math-var">x</span><sub>0</sub></span>
            <span class="op">+</span>
            <span class="term" data-type="vel" title="Initial X velocity term"><span class="math-var">v</span><sub>0x</sub><span class="math-var">t</span></span>
            <span class="op">+</span>
            <span class="term" data-type="acc" title="X acceleration term"><span class="frac"><span class="num">1</span><span class="denom">2</span></span><span class="math-var">a</span><sub>x</sub><span class="math-var">t</span><sup>2</sup></span>
          </div>
        </div>

        
        <div class="card-box y-card" id="cardY">
          <div class="card-header">
            <span class="badge badge-y">Vertical Component</span>
            <span class="dimension-indicator">Y-Axis</span>
          </div>
          <div class="eq-container" id="eqY">
            <span class="term" data-type="pos" title="Y position at time t"><span class="math-var">y</span>(<span class="math-var">t</span>)</span>
            <span class="op">=</span>
            <span class="term" data-type="pos0" title="Initial Y position"><span class="math-var">y</span><sub>0</sub></span>
            <span class="op">+</span>
            <span class="term" data-type="vel" title="Initial Y velocity term"><span class="math-var">v</span><sub>0y</sub><span class="math-var">t</span></span>
            <span class="op">+</span>
            <span class="term" data-type="acc" title="Y acceleration term"><span class="frac"><span class="num">1</span><span class="denom">2</span></span><span class="math-var">a</span><sub>y</sub><span class="math-var">t</span><sup>2</sup></span>
          </div>
        </div>
      </div>
    </div>

    
    <div class="controls-wrapper">
      <span class="legend-title">Click terms or buttons to trace decoupled components:</span>
      <div class="controls" id="controls">
        <button class="btn-term active" data-type="all">Show All</button>
        <button class="btn-term" data-type="pos">
          Position <span class="btn-math">(<span class="vec">r</span> / <span class="math-var">x</span>, <span class="math-var">y</span>)</span>
        </button>
        <button class="btn-term" data-type="pos0">
          Initial <span class="btn-math">(<span class="vec">r</span><sub>0</sub> / <span class="math-var">x</span><sub>0</sub>, <span class="math-var">y</span><sub>0</sub>)</span>
        </button>
        <button class="btn-term" data-type="vel">
          Velocity <span class="btn-math">(<span class="vec">v</span><sub>0</sub> / <span class="math-var">v</span><sub>0x</sub>, <span class="math-var">v</span><sub>0y</sub>)</span>
        </button>
        <button class="btn-term" data-type="acc">
          Accel <span class="btn-math">(<span class="vec">a</span> / <span class="math-var">a</span><sub>x</sub>, <span class="math-var">a</span><sub>y</sub>)</span>
        </button>
      </div>
    </div>
  </div>

  <script>
    (function() {
      const terms = document.querySelectorAll('.term');
      const buttons = document.querySelectorAll('.btn-term');

      function selectTerm(type) {
        buttons.forEach(btn => {
          btn.classList.toggle('active', btn.dataset.type === type);
        });

        terms.forEach(term => {
          if (type === 'all') {
            term.classList.remove('active');
          } else {
            term.classList.toggle('active', term.dataset.type === type);
          }
        });
      }

      buttons.forEach(btn => {
        btn.addEventListener('click', () => {
          selectTerm(btn.dataset.type);
        });
      });

      terms.forEach(term => {
        term.addEventListener('click', (e) => {
          e.stopPropagation();
          const targetType = term.dataset.type;
          const isCurrentlyActive = term.classList.contains('active');
          selectTerm(isCurrentlyActive ? 'all' : targetType);
        });
      });
    })();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 10px 12px;
      user-select: none;
    }
    .equation-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 6px;
      flex-wrap: wrap;
    }
    .vec-r { color: #dc2626; }
    .vec-r0 { color: #059669; }
    .vec-v0 { color: #2563eb; }
    .vec-a { color: #7c3aed; }
    
    .svg-container {
      width: 100%;
      max-width: 520px;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
    }
    
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 480px;
      margin-top: 8px;
    }
    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .btn:active { background: #e2e8f0; }
    .slider-wrap {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    input[type="range"] {
      flex: 1;
      accent-color: #2563eb;
      cursor: pointer;
      height: 6px;
    }
    .time-val {
      font-size: 14px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      min-width: 52px;
      color: #475569;
    }
    .vec-label {
      font-size: 13px;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: central;
      paint-order: stroke;
      stroke: #ffffff;
      stroke-width: 3px;
      stroke-linejoin: round;
    }
  </style>
</head>
<body>

  <div class="equation-bar">
    <span class="vec-r">r(t)</span>
    <span>=</span>
    <span class="vec-r0">r₀</span>
    <span>+</span>
    <span class="vec-v0">v₀t</span>
    <span>+</span>
    <span class="vec-a">½at²</span>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 480 340" id="diagram">
      <defs>
        
        <marker id="arr-r0" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
          <path d="M 1 1 L 7 4 L 1 7 Z" fill="#059669" />
        </marker>
        <marker id="arr-v0" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
          <path d="M 1 1 L 7 4 L 1 7 Z" fill="#2563eb" />
        </marker>
        <marker id="arr-a" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
          <path d="M 1 1 L 7 4 L 1 7 Z" fill="#7c3aed" />
        </marker>
        <marker id="arr-r" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
          <path d="M 1 1 L 7 4 L 1 7 Z" fill="#dc2626" />
        </marker>

        
        <pattern id="grid" width="30" height="30" patternUnits="userSpaceOnUse">
          <path d="M 30 0 L 0 0 0 30" fill="none" stroke="#f1f5f9" stroke-width="1.2" />
        </pattern>
      </defs>

      
      <rect x="40" y="20" width="420" height="280" fill="url(#grid)" />

      
      <line x1="40" y1="300" x2="465" y2="300" stroke="#cbd5e1" stroke-width="1.5" />
      <line x1="50" y1="310" x2="50" y2="15" stroke="#cbd5e1" stroke-width="1.5" />
      <text x="45" y="315" font-size="12" fill="#94a3b8" font-weight="600" text-anchor="end">O</text>

      
      <path id="trajectory" d="" fill="none" stroke="#e2e8f0" stroke-width="2" stroke-dasharray="4 4" />

      
      
      <line id="vec-r0-line" stroke="#059669" stroke-width="3" marker-end="url(#arr-r0)" />
      
      
      <line id="vec-v0-line" stroke="#2563eb" stroke-width="3" marker-end="url(#arr-v0)" />
      
      
      <line id="vec-a-line" stroke="#7c3aed" stroke-width="3" marker-end="url(#arr-a)" />
      
      
      <line id="vec-r-line" stroke="#dc2626" stroke-width="3.5" marker-end="url(#arr-r)" stroke-dasharray="6 3" />

      
      <circle id="pt-origin" cx="50" cy="300" r="4" fill="#64748b" />
      <circle id="pt-r0" r="4" fill="#059669" />
      <circle id="pt-v0" r="3.5" fill="#2563eb" />
      <circle id="pt-final" r="5" fill="#dc2626" />

      
      <text id="lbl-r0" class="vec-label" fill="#059669">r₀</text>
      <text id="lbl-v0" class="vec-label" fill="#2563eb">v₀t</text>
      <text id="lbl-a" class="vec-label" fill="#7c3aed">½at²</text>
      <text id="lbl-r" class="vec-label" fill="#dc2626">r(t)</text>
    </svg>
  </div>

  <div class="controls">
    <button class="btn" id="playBtn">▶ Play</button>
    <div class="slider-wrap">
      <input type="range" id="timeSlider" min="0" max="4" step="0.02" value="1.8">
      <span class="time-val" id="timeDisplay">t = 1.80s</span>
    </div>
  </div>

  <script>
    const ox = 50, oy = 300; // Origin
    const r0x = 60, r0y = 130; // r0 vector relative to origin
    const v0x = 65, v0y = 35;  // v0 (up & right)
    const ax = 5, ay = -26;    // a (gravity-like down & slight right)

    const trajPath = document.getElementById('trajectory');
    const lineR0 = document.getElementById('vec-r0-line');
    const lineV0 = document.getElementById('vec-v0-line');
    const lineA = document.getElementById('vec-a-line');
    const lineR = document.getElementById('vec-r-line');

    const ptR0 = document.getElementById('pt-r0');
    const ptV0 = document.getElementById('pt-v0');
    const ptFinal = document.getElementById('pt-final');

    const lblR0 = document.getElementById('lbl-r0');
    const lblV0 = document.getElementById('lbl-v0');
    const lblA = document.getElementById('lbl-a');
    const lblR = document.getElementById('lbl-r');

    const slider = document.getElementById('timeSlider');
    const timeDisplay = document.getElementById('timeDisplay');
    const playBtn = document.getElementById('playBtn');

    // Precalculate full trajectory curve
    let pts = [];
    for (let t = 0; t <= 4.05; t += 0.05) {
      let x = ox + r0x + v0x * t + 0.5 * ax * t * t;
      let y = oy - (r0y + v0y * t + 0.5 * ay * t * t);
      pts.push((t === 0 ? 'M ' : 'L ') + x.toFixed(1) + ' ' + y.toFixed(1));
    }
    trajPath.setAttribute('d', pts.join(' '));

    function setLine(line, x1, y1, x2, y2) {
      line.setAttribute('x1', x1);
      line.setAttribute('y1', y1);
      line.setAttribute('x2', x2);
      line.setAttribute('y2', y2);
    }

    function update(t) {
      const p0x = ox + r0x;
      const p0y = oy - r0y;

      const p1x = p0x + v0x * t;
      const p1y = p0y - v0y * t;

      const p2x = p1x + 0.5 * ax * t * t;
      const p2y = p1y - 0.5 * ay * t * t;

      // r0
      setLine(lineR0, ox, oy, p0x, p0y);
      ptR0.setAttribute('cx', p0x);
      ptR0.setAttribute('cy', p0y);
      lblR0.setAttribute('x', ox + r0x * 0.5 - 14);
      lblR0.setAttribute('y', oy - r0y * 0.5 - 8);

      // v0 * t
      setLine(lineV0, p0x, p0y, p1x, p1y);
      ptV0.setAttribute('cx', p1x);
      ptV0.setAttribute('cy', p1y);
      ptV0.style.display = t < 0.05 ? 'none' : 'block';
      lineV0.style.display = t < 0.05 ? 'none' : 'block';
      lblV0.style.display = t < 0.35 ? 'none' : 'block';
      lblV0.setAttribute('x', (p0x + p1x) * 0.5 - 12);
      lblV0.setAttribute('y', (p0y + p1y) * 0.5 - 12);

      // 0.5 * a * t^2
      setLine(lineA, p1x, p1y, p2x, p2y);
      lineA.style.display = t < 0.1 ? 'none' : 'block';
      lblA.style.display = t < 0.5 ? 'none' : 'block';
      lblA.setAttribute('x', (p1x + p2x) * 0.5 + 24);
      lblA.setAttribute('y', (p1y + p2y) * 0.5);

      // Resultant r(t)
      setLine(lineR, ox, oy, p2x, p2y);
      ptFinal.setAttribute('cx', p2x);
      ptFinal.setAttribute('cy', p2y);
      lblR.setAttribute('x', (ox + p2x) * 0.5 + 6);
      lblR.setAttribute('y', (oy + p2y) * 0.5 + 16);

      slider.value = t;
      timeDisplay.textContent = `t = ${t.toFixed(2)}s`;
    }

    let isPlaying = false;
    let animId = null;
    let lastTime = null;

    function animate(now) {
      if (!lastTime) lastTime = now;
      const dt = (now - lastTime) / 1000;
      lastTime = now;

      let t = parseFloat(slider.value) + dt * 0.8;
      if (t > 4) t = 0;
      update(t);

      if (isPlaying) {
        animId = requestAnimationFrame(animate);
      }
    }

    playBtn.addEventListener('click', () => {
      isPlaying = !isPlaying;
      if (isPlaying) {
        playBtn.textContent = '⏸ Pause';
        lastTime = null;
        animId = requestAnimationFrame(animate);
      } else {
        playBtn.textContent = '▶ Play';
        cancelAnimationFrame(animId);
      }
    });

    slider.addEventListener('input', (e) => {
      if (isPlaying) {
        isPlaying = false;
        playBtn.textContent = '▶ Play';
        cancelAnimationFrame(animId);
      }
      update(parseFloat(e.target.value));
    });

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e293b;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      min-height: 100%;
      padding: 10px 12px;
      user-select: none;
    }
    .toolbar {
      display: flex;
      gap: 8px;
      justify-content: center;
      width: 100%;
      max-width: 480px;
      margin-bottom: 8px;
    }
    .btn {
      flex: 1;
      padding: 7px 10px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      background: #f8fafc;
      color: #475569;
      cursor: pointer;
      text-align: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    .btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }
    .vec-sym {
      font-weight: 800;
      font-style: normal;
    }
    .svg-container {
      width: 100%;
      max-width: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .axis { stroke: #64748b; stroke-width: 1.5; }
    .grid-line { stroke: #f1f5f9; stroke-width: 1; }
    .tick { stroke: #94a3b8; stroke-width: 1.2; }
    .path-line {
      fill: none;
      stroke: #2563eb;
      stroke-width: 3.5;
      stroke-linecap: round;
    }
    .r-vector {
      stroke: #7c3aed;
      stroke-width: 2.5;
      marker-end: url(#arrow-purple);
    }
    .r-comp {
      stroke: #7c3aed;
      stroke-width: 1.5;
      stroke-dasharray: 4, 3;
    }
    .v-vector {
      stroke: #059669;
      stroke-width: 2.75;
      marker-end: url(#arrow-green);
    }
    .v-comp {
      stroke: #059669;
      stroke-width: 1.5;
      stroke-dasharray: 4, 3;
    }
    .label {
      font-size: 11px;
      font-weight: 600;
      fill: #475569;
    }
    .fade-el {
      transition: opacity 0.25s ease;
    }
    .hidden {
      opacity: 0;
      pointer-events: none;
    }

    @media (max-width: 400px) {
      .toolbar { gap: 4px; }
      .btn { padding: 6px 4px; font-size: 11.5px; }
      body { padding: 6px; }
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button class="btn active" id="btn-all" onclick="setMode('all')">Full View</button>
    <button class="btn" id="btn-pos" onclick="setMode('pos')">Position <span class="vec-sym">r</span> (t=2s)</button>
    <button class="btn" id="btn-vel" onclick="setMode('vel')">Velocity <span class="vec-sym">v</span> (t=2s)</button>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 460 250" aria-label="Drone vector trajectory diagram">
      <defs>
        <marker id="arrow-purple" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#7c3aed" />
        </marker>
        <marker id="arrow-green" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#059669" />
        </marker>
        <marker id="arrow-axis" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
          <path d="M 0 2 L 6 5 L 0 8 z" fill="#64748b" />
        </marker>
      </defs>

      
      <line x1="50" y1="180" x2="430" y2="180" class="grid-line" />
      <line x1="50" y1="145" x2="430" y2="145" class="grid-line" />
      <line x1="50" y1="110" x2="430" y2="110" class="grid-line" />
      <line x1="50" y1="75" x2="430" y2="75" class="grid-line" />
      <line x1="130" y1="215" x2="130" y2="35" class="grid-line" />
      <line x1="210" y1="215" x2="210" y2="35" class="grid-line" />
      <line x1="290" y1="215" x2="290" y2="35" class="grid-line" />
      <line x1="370" y1="215" x2="370" y2="35" class="grid-line" />

      
      
      <line x1="50" y1="215" x2="435" y2="215" class="axis" marker-end="url(#arrow-axis)" />
      <line x1="50" y1="215" x2="50" y2="25" class="axis" marker-end="url(#arrow-axis)" />

      
      <line x1="50" y1="215" x2="50" y2="220" class="tick" />
      <text x="50" y="233" class="label" text-anchor="middle">0</text>

      <line x1="130" y1="215" x2="130" y2="220" class="tick" />
      <text x="130" y="233" class="label" text-anchor="middle">4m</text>

      <line x1="210" y1="215" x2="210" y2="220" class="tick" />
      <text x="210" y="233" class="label" text-anchor="middle">8m</text>

      <line x1="290" y1="215" x2="290" y2="220" class="tick" />
      <text x="290" y="233" class="label" text-anchor="middle" font-weight="700" fill="#7c3aed">12m</text>

      <line x1="370" y1="215" x2="370" y2="220" class="tick" />
      <text x="370" y="233" class="label" text-anchor="middle">16m</text>

      <text x="435" y="233" class="label" text-anchor="end" font-weight="700">x</text>

      
      <line x1="45" y1="180" x2="50" y2="180" class="tick" />
      <text x="42" y="184" class="label" text-anchor="end">2m</text>

      <line x1="45" y1="145" x2="50" y2="145" class="tick" />
      <text x="42" y="149" class="label" text-anchor="end">4m</text>

      <line x1="45" y1="110" x2="50" y2="110" class="tick" />
      <text x="42" y="114" class="label" text-anchor="end" font-weight="700" fill="#7c3aed">6m</text>

      <line x1="45" y1="75" x2="50" y2="75" class="tick" />
      <text x="42" y="79" class="label" text-anchor="end">8m</text>

      <text x="42" y="32" class="label" text-anchor="end" font-weight="700">y</text>

      
      <path id="trajectory" class="path-line" d="" />
      
      <text x="145" y="172" fill="#2563eb" font-size="11" font-weight="700" letter-spacing="0.2">Flight Path</text>

      
      <g id="grp-pos" class="fade-el">
        
        <line x1="50" y1="215" x2="290" y2="215" class="r-comp" />
        <line x1="290" y1="215" x2="290" y2="110" class="r-comp" />
        <text x="170" y="207" fill="#7c3aed" font-size="11" font-weight="700" text-anchor="middle">dx = 12 m</text>
        <text x="296" y="165" fill="#7c3aed" font-size="11" font-weight="700" text-anchor="start">dy = 6 m</text>
        
        <line x1="50" y1="215" x2="284" y2="113" class="r-vector" />
        <text x="150" y="142" fill="#7c3aed" font-size="13" font-weight="800">r</text>
      </g>

      
      <g id="grp-vel" class="fade-el">
        
        
        <line x1="290" y1="110" x2="370" y2="110" class="v-comp" />
        <line x1="370" y1="110" x2="370" y2="50" class="v-comp" />
        <text x="330" y="124" fill="#059669" font-size="11" font-weight="700" text-anchor="middle">vx = 8 m/s</text>
        <text x="376" y="83" fill="#059669" font-size="11" font-weight="700" text-anchor="start">vy = 6 m/s</text>
        
        <line x1="290" y1="110" x2="365" y2="54" class="v-vector" />
        <text x="306" y="70" fill="#059669" font-size="12" font-weight="800">|v| = 10 m/s</text>
      </g>

      
      <circle cx="290" cy="110" r="5" fill="#1e293b" stroke="#ffffff" stroke-width="2" />
      <text x="285" y="96" fill="#1e293b" font-size="11" font-weight="700" text-anchor="end">t = 2s (12, 6)</text>
      <circle cx="50" cy="215" r="4" fill="#1e293b" />
    </svg>
  </div>

  <script>
    // Mathematical curve plotting:
    // x(t) = 4t + t^2  => x(0)=0, x(2)=12
    // y(t) = 1.5t^2    => y(0)=0, y(2)=6
    // Screen mapping:
    // Origin (0,0) -> (50, 215)
    // Scale: x: 20 px/m, y: 17.5 px/m
    const path = document.getElementById('trajectory');
    let d = '';
    for (let t = 0; t <= 2.25; t += 0.04) {
      const xm = 4 * t + 1 * t * t;
      const ym = 1.5 * t * t;
      const sx = 50 + xm * 20;
      const sy = 215 - ym * 17.5;
      d += (t === 0 ? `M ${sx.toFixed(1)} ${sy.toFixed(1)}` : ` L ${sx.toFixed(1)} ${sy.toFixed(1)}`);
    }
    path.setAttribute('d', d);

    function setMode(mode) {
      document.getElementById('btn-all').classList.toggle('active', mode === 'all');
      document.getElementById('btn-pos').classList.toggle('active', mode === 'pos');
      document.getElementById('btn-vel').classList.toggle('active', mode === 'vel');

      const posGrp = document.getElementById('grp-pos');
      const velGrp = document.getElementById('grp-vel');

      if (mode === 'all') {
        posGrp.classList.remove('hidden');
        velGrp.classList.remove('hidden');
      } else if (mode === 'pos') {
        posGrp.classList.remove('hidden');
        velGrp.classList.add('hidden');
      } else if (mode === 'vel') {
        posGrp.classList.add('hidden');
        velGrp.classList.remove('hidden');
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e293b;
      background: transparent;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    
    .nav-bar {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      max-width: 540px;
    }
    .step-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      box-shadow: none;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
      flex: 1 1 auto;
      min-width: 70px;
      text-align: center;
    }
    .step-btn:hover {
      background: #e2e8f0;
      border-color: #94a3b8;
    }
    .step-btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }

    .graph-container {
      width: 100%;
      max-width: 540px;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    .label-halo {
      paint-order: stroke fill;
      stroke: #ffffff;
      stroke-width: 3px;
      stroke-linejoin: round;
      stroke-linecap: round;
    }

    .info-card {
      width: 100%;
      max-width: 540px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      font-size: 12px;
    }
    @media (max-width: 440px) {
      .info-card {
        grid-template-columns: 1fr;
      }
      .step-btn {
        padding: 5px 8px;
        font-size: 11px;
        min-width: 60px;
      }
    }

    .metric-box {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 6px 8px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .metric-label {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .metric-val {
      font-size: 12px;
      font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
      font-weight: 600;
    }
    .pos-label { color: #16a34a; }
    .vel-label { color: #dc2626; }
    .calc-full {
      grid-column: 1 / -1;
      background: #eff6ff;
      border-color: #bfdbfe;
    }
  </style>
</head>
<body>

  
  <div class="nav-bar">
    <button class="step-btn" onclick="setStep(0)">t = 0s</button>
    <button class="step-btn" onclick="setStep(1)">t = 1s</button>
    <button class="step-btn" onclick="setStep(2)">t = 2s</button>
    <button class="step-btn active" onclick="setStep(3)">t = 3s (Vectors)</button>
    <button class="step-btn" onclick="togglePlay()" id="playBtn">▶ Auto</button>
  </div>

  
  <div class="graph-container">
    <svg viewBox="0 0 540 260">
      <defs>
        
        <marker id="arrow-green" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 10 5 L 0 8.5 z" fill="#16a34a"/>
        </marker>
        
        <marker id="arrow-red" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 10 5 L 0 8.5 z" fill="#dc2626"/>
        </marker>
      </defs>

      
      <g stroke="#e2e8f0" stroke-width="1">
        
        <line x1="55" y1="20" x2="55" y2="235" />
        <line x1="145" y1="20" x2="145" y2="235" />
        <line x1="235" y1="20" x2="235" y2="235" />
        <line x1="325" y1="20" x2="325" y2="235" />
        <line x1="415" y1="20" x2="415" y2="235" />
        <line x1="505" y1="20" x2="505" y2="235" />
        
        
        <line x1="35" y1="210" x2="520" y2="210" />
        <line x1="35" y1="185" x2="520" y2="185" />
        <line x1="35" y1="160" x2="520" y2="160" />
        <line x1="35" y1="135" x2="520" y2="135" />
        <line x1="35" y1="110" x2="520" y2="110" />
        <line x1="35" y1="85" x2="520" y2="85" />
        <line x1="35" y1="60" x2="520" y2="60" />
        <line x1="35" y1="35" x2="520" y2="35" />
      </g>

      
      
      <line x1="35" y1="210" x2="525" y2="210" stroke="#94a3b8" stroke-width="1.5" />
      
      <line x1="55" y1="235" x2="55" y2="15" stroke="#94a3b8" stroke-width="1.5" />

      
      <g font-size="11" fill="#64748b" text-anchor="middle" font-family="monospace">
        
        <text x="55" y="226">0</text>
        <text x="145" y="226">5</text>
        <text x="235" y="226">10</text>
        <text x="325" y="226">15</text>
        <text x="415" y="226">20</text>
        <text x="505" y="226">25</text>
        <text x="525" y="226" font-weight="bold" fill="#334155" text-anchor="start">x (m)</text>

        
        <text x="45" y="214" text-anchor="end">0</text>
        <text x="45" y="164" text-anchor="end">2</text>
        <text x="45" y="114" text-anchor="end">4</text>
        <text x="45" y="64" text-anchor="end">6</text>
        <text x="52" y="14" text-anchor="end" font-weight="bold" fill="#334155">y (m)</text>
      </g>

      
      <path id="trajectoryPath" fill="none" stroke="#cbd5e1" stroke-width="2.5" stroke-dasharray="4 4" />
      
      <path id="activeTrajectory" fill="none" stroke="#2563eb" stroke-width="3" />

      
      <g id="vectorGroup">
        
        <line id="vecR" stroke="#16a34a" stroke-width="2.5" marker-end="url(#arrow-green)" />
        <text id="vecRLabel" fill="#16a34a" font-weight="bold" font-size="12" class="label-halo" text-anchor="middle"></text>

        
        <line id="vecV" stroke="#dc2626" stroke-width="2.5" marker-end="url(#arrow-red)" />
        <text id="vecVLabel" fill="#dc2626" font-weight="bold" font-size="12" class="label-halo" text-anchor="start"></text>
      </g>

      
      <g id="checkpoints" font-size="11" font-weight="600">
        
        <circle id="cp0" cx="55" cy="210" r="4" fill="#64748b" />
        <text id="cp0-t" x="55" y="196" text-anchor="middle" fill="#475569" class="label-halo">t=0s (0, 0)</text>

        
        <circle id="cp1" cx="145" cy="172.5" r="4" fill="#cbd5e1" />
        <text id="cp1-t" x="145" y="194" text-anchor="middle" fill="#94a3b8" class="label-halo">t=1s (5, 1.5)</text>

        
        <circle id="cp2" cx="271" cy="160" r="4" fill="#cbd5e1" />
        <text id="cp2-t" x="271" y="146" text-anchor="middle" fill="#94a3b8" class="label-halo">t=2s (12, 2.0)</text>

        
        <circle id="cp3" cx="433" cy="172.5" r="4" fill="#cbd5e1" />
        <text id="cp3-t" x="433" y="156" text-anchor="middle" fill="#94a3b8" class="label-halo">t=3s (21, 1.5)</text>
      </g>

      
      <circle id="dronePoint" cx="433" cy="172.5" r="6" fill="#2563eb" stroke="#ffffff" stroke-width="2" />
    </svg>
  </div>

  
  <div class="info-card">
    <div class="metric-box">
      <span class="metric-label pos-label">Position Vector r(t)</span>
      <span class="metric-val" id="posVal">r(3) = 21.0î + 1.5ĵ m</span>
    </div>
    <div class="metric-box">
      <span class="metric-label vel-label">Velocity Vector v(t)</span>
      <span class="metric-val" id="velVal">v(3) = 10.0î - 1.0ĵ m/s</span>
    </div>
    <div class="metric-box calc-full">
      <span class="metric-label" style="color:#2563eb;">Scalar Speed Magnitude |v|</span>
      <span class="metric-val" id="speedVal">|v| = √(10² + (-1)²) = √101 ≈ 10.05 m/s</span>
    </div>
  </div>

  <script>
    // Exact Kinematics:
    // x(t) = t^2 + 4t       => vx(t) = 2t + 4
    // y(t) = -0.5t^2 + 2t   => vy(t) = -t + 2
    // Screen mapping: px = 55 + x * 18, py = 210 - y * 25

    function getParametricPath(tEnd) {
      const stepCount = 40;
      const dt = tEnd / stepCount;
      let d = '';
      for (let i = 0; i <= stepCount; i++) {
        const t = i * dt;
        const x = t * t + 4 * t;
        const y = -0.5 * t * t + 2 * t;
        const px = 55 + x * 18;
        const py = 210 - y * 25;
        d += (i === 0 ? 'M ' : ' L ') + px.toFixed(2) + ' ' + py.toFixed(2);
      }
      return d;
    }

    // Set full background path (t: 0 to 3)
    document.getElementById('trajectoryPath').setAttribute('d', getParametricPath(3));

    const stepsData = [
      {
        t: 0,
        x: 0, y: 0,
        vx: 4, vy: 2,
        posText: "r(0) = 0.0î + 0.0ĵ m",
        velText: "v(0) = 4.0î + 2.0ĵ m/s",
        calcText: "|v| = √(4² + 2²) = √20 ≈ 4.47 m/s"
      },
      {
        t: 1,
        x: 5, y: 1.5,
        vx: 6, vy: 1,
        posText: "r(1) = 5.0î + 1.5ĵ m",
        velText: "v(1) = 6.0î + 1.0ĵ m/s",
        calcText: "|v| = √(6² + 1²) = √37 ≈ 6.08 m/s"
      },
      {
        t: 2,
        x: 12, y: 2.0,
        vx: 8, vy: 0,
        posText: "r(2) = 12.0î + 2.0ĵ m",
        velText: "v(2) = 8.0î + 0.0ĵ m/s",
        calcText: "|v| = √(8² + 0²) = √64 = 8.00 m/s (peak)"
      },
      {
        t: 3,
        x: 21, y: 1.5,
        vx: 10, vy: -1,
        posText: "r(3) = 21.0î + 1.5ĵ m",
        velText: "v(3) = 10.0î - 1.0ĵ m/s",
        calcText: "|v| = √(10² + (-1)²) = √101 ≈ 10.05 m/s"
      }
    ];

    let currentStep = 3;
    let timer = null;

    function setStep(idx) {
      currentStep = idx;
      const data = stepsData[idx];

      // Update button active state
      const btns = document.querySelectorAll('.step-btn');
      btns.forEach((b, i) => {
        if (i < 4) b.classList.toggle('active', i === idx);
      });

      // Update exact active trajectory
      if (idx === 0) {
        document.getElementById('activeTrajectory').setAttribute('d', 'M 55 210');
      } else {
        document.getElementById('activeTrajectory').setAttribute('d', getParametricPath(data.t));
      }

      // Drone current position
      const px = 55 + data.x * 18;
      const py = 210 - data.y * 25;
      const drone = document.getElementById('dronePoint');
      drone.setAttribute('cx', px);
      drone.setAttribute('cy', py);

      // Checkpoint highlights
      for (let i = 1; i <= 3; i++) {
        document.getElementById(`cp${i}`).setAttribute('fill', idx >= i ? '#2563eb' : '#cbd5e1');
        document.getElementById(`cp${i}-t`).setAttribute('fill', idx >= i ? '#1e293b' : '#94a3b8');
        document.getElementById(`cp${i}-t`).setAttribute('font-weight', idx >= i ? '700' : '500');
      }

      // Update Position Vector r(t)
      const vecR = document.getElementById('vecR');
      const vecRLabel = document.getElementById('vecRLabel');
      const vecV = document.getElementById('vecV');
      const vecVLabel = document.getElementById('vecVLabel');

      if (idx === 0) {
        vecR.style.display = 'none';
        vecRLabel.style.display = 'none';
      } else {
        vecR.style.display = 'block';
        vecRLabel.style.display = 'block';
        vecR.setAttribute('x1', 55);
        vecR.setAttribute('y1', 210);
        vecR.setAttribute('x2', px);
        vecR.setAttribute('y2', py);
        
        // Label r(t) slightly offset from the midpoint of the green line
        const midX = (55 + px) / 2;
        const midY = (210 + py) / 2;
        vecRLabel.setAttribute('x', midX);
        vecRLabel.setAttribute('y', midY + 16);
        vecRLabel.textContent = `r(${data.t})`;
      }

      // Update Velocity Vector v(t)
      // Visual scale: 6.5px per (m/s) in x, 15px per (m/s) in y
      const vScaleX = 6.5;
      const vScaleY = 15;
      const vEndX = px + data.vx * vScaleX;
      const vEndY = py - data.vy * vScaleY;
      
      vecV.setAttribute('x1', px);
      vecV.setAttribute('y1', py);
      vecV.setAttribute('x2', vEndX);
      vecV.setAttribute('y2', vEndY);
      
      vecVLabel.setAttribute('x', vEndX + 6);
      vecVLabel.setAttribute('y', vEndY + (data.vy < 0 ? 12 : -4));
      vecVLabel.textContent = `v(${data.t})`;

      // Update text calculations
      document.getElementById('posVal').textContent = data.posText;
      document.getElementById('velVal').textContent = data.velText;
      document.getElementById('speedVal').textContent = data.calcText;
    }

    function togglePlay() {
      const btn = document.getElementById('playBtn');
      if (timer) {
        clearInterval(timer);
        timer = null;
        btn.textContent = '▶ Auto';
      } else {
        btn.textContent = '⏸ Pause';
        timer = setInterval(() => {
          setStep((currentStep + 1) % 4);
        }, 2800);
      }
    }

    // Initialize at Step 3
    setStep(3);
  </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>Independence of Motion: Dropped vs. Horizontally Launched</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: #1e2945;
      width: 100%;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 12px 16px;
      user-select: none;
      box-sizing: border-box;
    }

    .header {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .header-top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 6px;
    }
    .title {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      letter-spacing: -0.01em;
    }
    .subtitle {
      font-size: 11.5px;
      color: #64748b;
    }

    .legend {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      font-size: 12px;
      font-weight: 500;
      color: #334155;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .legend-swatch {
      width: 10px;
      height: 10px;
      border-radius: 2px;
      flex-shrink: 0;
    }
    .swatch-red { background: #dc2626; }
    .swatch-blue { background: #2563eb; }
    .swatch-green { background: #059669; }

    .canvas-container {
      position: relative;
      width: 100%;
      flex: 1 1 auto;
      min-height: 180px;
      max-height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      max-height: 250px;
      display: block;
    }

    .telemetry-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }
    @media (max-width: 480px) {
      .telemetry-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    .tele-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 6px 8px;
      text-align: center;
    }
    .tele-label {
      font-size: 10.5px;
      font-weight: 600;
      color: #64748b;
      letter-spacing: 0.02em;
      margin-bottom: 2px;
    }
    .tele-val {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      font-variant-numeric: tabular-nums;
    }

    .controls-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .play-btn {
      background: #1e2945;
      color: #ffffff;
      border: none;
      border-radius: 6px;
      width: 34px;
      height: 32px;
      font-size: 13px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      outline: none;
      transition: background 0.15s ease;
      flex-shrink: 0;
    }
    .play-btn:hover { background: #334155; }
    .play-btn:focus-visible { outline: 2px solid #2563eb; }

    .slider-wrap {
      flex: 1;
      display: flex;
      align-items: center;
      min-width: 120px;
    }
    input[type="range"] {
      width: 100%;
      height: 6px;
      accent-color: #2563eb;
      cursor: pointer;
    }

    .step-group {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
    }
    .step-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      font-size: 11.5px;
      font-weight: 600;
      padding: 5px 8px;
      border-radius: 5px;
      cursor: pointer;
      outline: none;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .step-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    .step-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }
    .step-btn:focus-visible { outline: 2px solid #2563eb; }

    .ghost-node {
      cursor: pointer;
    }
    .ghost-node:hover circle {
      stroke-width: 2.2;
      filter: drop-shadow(0 1px 3px rgba(0,0,0,0.2));
    }
  </style>
</head>
<body>

  <div class="header">
    <div class="header-top">
      <div class="title">Independence of Motion: Dropped vs. Horizontally Launched</div>
      <div class="subtitle">Both hit the ground simultaneously</div>
    </div>
    <div class="legend">
      <div class="legend-item"><div class="legend-swatch swatch-red"></div> Dropped (<i>v</i><sub>0<i>x</i></sub> = 0)</div>
      <div class="legend-item"><div class="legend-swatch swatch-blue"></div> Launched (<i>v</i><sub><i>x</i></sub> = const)</div>
      <div class="legend-item"><div class="legend-swatch swatch-green"></div> Velocity (<b>v</b>)</div>
    </div>
  </div>

  <div class="canvas-container">
    <svg id="scene" viewBox="0 0 480 230" preserveAspectRatio="xMidYMid meet">
      <defs>
        
        <marker id="arr-green" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 0 1.5 L 9 5 L 0 8.5 z" fill="#059669" />
        </marker>
        <marker id="arr-blue" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 0 1.5 L 9 5 L 0 8.5 z" fill="#2563eb" />
        </marker>
      </defs>

      
      
      <g id="grid-lines">
        <line x1="55" y1="22" x2="425" y2="22" stroke="#e2e8f0" stroke-width="1.2" stroke-dasharray="3 3"/>
        <text x="48" y="26" fill="#64748b" font-size="10.5" font-weight="600" text-anchor="end">0 s</text>
        <text x="432" y="26" fill="#64748b" font-size="10" text-anchor="start">0.0 m</text>

        <line x1="55" y1="42" x2="425" y2="42" stroke="#e2e8f0" stroke-width="1.2" stroke-dasharray="3 3"/>
        <text x="48" y="46" fill="#64748b" font-size="10.5" font-weight="600" text-anchor="end">1 s</text>
        <text x="432" y="46" fill="#64748b" font-size="10" text-anchor="start">−4.9 m</text>

        <line x1="55" y1="102" x2="425" y2="102" stroke="#e2e8f0" stroke-width="1.2" stroke-dasharray="3 3"/>
        <text x="48" y="106" fill="#64748b" font-size="10.5" font-weight="600" text-anchor="end">2 s</text>
        <text x="432" y="106" fill="#64748b" font-size="10" text-anchor="start">−19.6 m</text>

        <line x1="55" y1="202" x2="425" y2="202" stroke="#cbd5e1" stroke-width="1.2"/>
        <text x="48" y="206" fill="#334155" font-size="10.5" font-weight="700" text-anchor="end">3 s</text>
        <text x="432" y="206" fill="#334155" font-size="10" font-weight="700" text-anchor="start">−44.1 m</text>
      </g>

      
      <line x1="25" y1="208" x2="465" y2="208" stroke="#94a3b8" stroke-width="2" />

      
      <line x1="75" y1="22" x2="75" y2="202" stroke="#fca5a5" stroke-width="1.5" stroke-dasharray="4 4" />

      
      <path id="parabola-path" d="" fill="none" stroke="#93c5fd" stroke-width="1.5" stroke-dasharray="4 4" />

      
      <g id="ghosts"></g>

      
      <line id="height-sync-line" x1="75" y1="22" x2="75" y2="22" stroke="#64748b" stroke-width="1.5" stroke-dasharray="3 3" opacity="0.8"/>

      
      
      <line id="vec-red-y" x1="75" y1="22" x2="75" y2="22" stroke="#059669" stroke-width="2" marker-end="url(#arr-green)" />

      
      <line id="vec-blue-x" x1="75" y1="22" x2="75" y2="22" stroke="#2563eb" stroke-width="2" marker-end="url(#arr-blue)" />
      
      <line id="vec-blue-y" x1="75" y1="22" x2="75" y2="22" stroke="#059669" stroke-width="2" marker-end="url(#arr-green)" />

      
      <circle id="ball-red" cx="75" cy="22" r="6.5" fill="#dc2626" stroke="#ffffff" stroke-width="1.5" />
      <circle id="ball-blue" cx="75" cy="22" r="6.5" fill="#2563eb" stroke="#ffffff" stroke-width="1.5" />
    </svg>
  </div>

  <div class="telemetry-grid">
    <div class="tele-card">
      <div class="tele-label">Time (<i>t</i>)</div>
      <div class="tele-val" id="tel-t">0.00 s</div>
    </div>
    <div class="tele-card">
      <div class="tele-label">Displacement (Δ<i>y</i>)</div>
      <div class="tele-val" id="tel-y">0.0 m</div>
    </div>
    <div class="tele-card">
      <div class="tele-label">Vertical (<i>v</i><sub><i>y</i></sub>)</div>
      <div class="tele-val" id="tel-vy">0.0 m/s</div>
    </div>
    <div class="tele-card">
      <div class="tele-label">Horizontal (<i>v</i><sub><i>x</i></sub>)</div>
      <div class="tele-val" id="tel-vx"><span style="color:#dc2626">0</span> | <span style="color:#2563eb">15 m/s</span></div>
    </div>
  </div>

  <div class="controls-row">
    <button class="play-btn" id="playBtn" onclick="togglePlay()" title="Play / Pause">▶</button>
    <div class="slider-wrap">
      <input type="range" id="timeSlider" min="0" max="3" step="0.01" value="0" oninput="onSliderInput(this.value)" aria-label="Time scrubber">
    </div>
    <div class="step-group">
      <button class="step-btn active" id="btn-t0" onclick="jumpToTime(0)">0s</button>
      <button class="step-btn" id="btn-t1" onclick="jumpToTime(1)">1s</button>
      <button class="step-btn" id="btn-t2" onclick="jumpToTime(2)">2s</button>
      <button class="step-btn" id="btn-t3" onclick="jumpToTime(3)">3s (Impact)</button>
    </div>
  </div>

  <script>
    // Physics & SVG Coordinate Setup
    const X0 = 75;
    const Y0 = 22;
    const VX_PX = 106; // px per second for Blue (at t=3 => x = 75 + 318 = 393)
    const G_PX = 40;   // 0.5 * 40 * 3^2 = 180px drop => y(3) = 202px
    const G_REAL = 9.8;  // m/s^2
    const VX_REAL = 15.0; // m/s

    let currentTime = 0;
    let isPlaying = false;
    let animId = null;
    let lastTimestamp = null;

    // Element references
    const ballRed = document.getElementById('ball-red');
    const ballBlue = document.getElementById('ball-blue');
    const syncLine = document.getElementById('height-sync-line');
    const vecRedY = document.getElementById('vec-red-y');
    const vecBlueX = document.getElementById('vec-blue-x');
    const vecBlueY = document.getElementById('vec-blue-y');
    const slider = document.getElementById('timeSlider');
    const playBtn = document.getElementById('playBtn');
    const telT = document.getElementById('tel-t');
    const telY = document.getElementById('tel-y');
    const telVy = document.getElementById('tel-vy');

    // Pre-calculate exact parabola trajectory path
    function initParabola() {
      let d = "";
      for (let t = 0; t <= 3.001; t += 0.05) {
        const x = X0 + VX_PX * t;
        const y = Y0 + 0.5 * G_PX * t * t;
        d += (t === 0 ? `M ${x.toFixed(1)} ${y.toFixed(1)}` : ` L ${x.toFixed(1)} ${y.toFixed(1)}`);
      }
      document.getElementById('parabola-path').setAttribute('d', d);
    }

    // Build interactive ghost snapshot strobes
    function initGhosts() {
      const g = document.getElementById('ghosts');
      [0, 1, 2, 3].forEach(t => {
        const y = Y0 + 0.5 * G_PX * t * t;
        const xBlue = X0 + VX_PX * t;

        // Red Ghost
        const redG = document.createElementNS("http://www.w3.org/2000/svg", "g");
        redG.setAttribute("class", "ghost-node");
        redG.setAttribute("onclick", `jumpToTime(${t})`);
        redG.innerHTML = `
          <circle cx="${X0}" cy="${y}" r="5.5" fill="#fee2e2" stroke="#dc2626" stroke-width="1.3" stroke-dasharray="2 2" />
        `;
        g.appendChild(redG);

        // Blue Ghost
        const blueG = document.createElementNS("http://www.w3.org/2000/svg", "g");
        blueG.setAttribute("class", "ghost-node");
        blueG.setAttribute("onclick", `jumpToTime(${t})`);
        blueG.innerHTML = `
          <circle cx="${xBlue}" cy="${y}" r="5.5" fill="#dbeafe" stroke="#2563eb" stroke-width="1.3" stroke-dasharray="2 2" />
        `;
        g.appendChild(blueG);
      });
    }

    function render(t) {
      currentTime = Math.max(0, Math.min(3, t));

      // Coordinates
      const curY = Y0 + 0.5 * G_PX * currentTime * currentTime;
      const curBlueX = X0 + VX_PX * currentTime;

      // Positions
      ballRed.setAttribute('cx', X0);
      ballRed.setAttribute('cy', curY);

      ballBlue.setAttribute('cx', curBlueX);
      ballBlue.setAttribute('cy', curY);

      // Connecting line
      syncLine.setAttribute('x1', X0);
      syncLine.setAttribute('y1', curY);
      syncLine.setAttribute('x2', curBlueX);
      syncLine.setAttribute('y2', curY);

      // Velocity Vectors
      const vyLen = currentTime * 16; // scaled px length
      const vxLen = 25; // constant horizontal vector length

      // Red vy vector
      vecRedY.setAttribute('x1', X0);
      vecRedY.setAttribute('y1', curY);
      vecRedY.setAttribute('x2', X0);
      vecRedY.setAttribute('y2', curY + vyLen);
      vecRedY.style.display = vyLen > 2 ? 'inline' : 'none';

      // Blue vx vector
      vecBlueX.setAttribute('x1', curBlueX);
      vecBlueX.setAttribute('y1', curY);
      vecBlueX.setAttribute('x2', curBlueX + vxLen);
      vecBlueX.setAttribute('y2', curY);

      // Blue vy vector
      vecBlueY.setAttribute('x1', curBlueX);
      vecBlueY.setAttribute('y1', curY);
      vecBlueY.setAttribute('x2', curBlueX);
      vecBlueY.setAttribute('y2', curY + vyLen);
      vecBlueY.style.display = vyLen > 2 ? 'inline' : 'none';

      // Telemetry Data
      const realY = 0.5 * G_REAL * currentTime * currentTime;
      const realVy = G_REAL * currentTime;

      telT.textContent = currentTime.toFixed(2) + " s";
      telY.textContent = "-" + realY.toFixed(1) + " m";
      telVy.textContent = "-" + realVy.toFixed(1) + " m/s";

      // Slider & Step Buttons
      slider.value = currentTime;
      [0, 1, 2, 3].forEach(step => {
        const btn = document.getElementById(`btn-t${step}`);
        if (Math.abs(currentTime - step) < 0.08) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });
    }

    function animLoop(timestamp) {
      if (!isPlaying) return;
      if (!lastTimestamp) lastTimestamp = timestamp;
      const dt = (timestamp - lastTimestamp) / 1000;
      lastTimestamp = timestamp;

      // Playback speed 0.75x for clear observation
      let nextT = currentTime + dt * 0.75;
      if (nextT >= 3) {
        nextT = 3;
        render(nextT);
        pause();
        return;
      }
      render(nextT);
      animId = requestAnimationFrame(animLoop);
    }

    function play() {
      if (currentTime >= 3) currentTime = 0;
      isPlaying = true;
      lastTimestamp = null;
      playBtn.textContent = '⏸';
      animId = requestAnimationFrame(animLoop);
    }

    function pause() {
      isPlaying = false;
      playBtn.textContent = '▶';
      if (animId) cancelAnimationFrame(animId);
    }

    function togglePlay() {
      if (isPlaying) pause();
      else play();
    }

    function onSliderInput(val) {
      pause();
      render(parseFloat(val));
    }

    function jumpToTime(t) {
      pause();
      render(t);
    }

    // Initialize
    initParabola();
    initGhosts();
    render(0);
  </script>
</body>
</html>

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

    /* Controls Bar */
    .nav-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }
    .btn-group {
      display: flex;
      gap: 4px;
      background: #f1f5f9;
      padding: 3px;
      border-radius: 8px;
    }
    .step-btn {
      border: none;
      background: transparent;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }
    .step-btn.active {
      background: #2563eb;
      color: #ffffff;
      box-shadow: 0 1px 3px rgba(37,99,235,0.3);
    }
    .step-btn:hover:not(.active) {
      background: #e2e8f0;
      color: #1e2945;
    }
    .play-btn {
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.15s;
    }
    .play-btn:hover {
      background: #f8fafc;
    }

    /* Main Grid Layout */
    .stage {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 12px;
      align-items: stretch;
    }
    @media (max-width: 580px) {
      .stage { grid-template-columns: 1fr; }
    }

    /* Visual Graph Panel */
    .graph-panel {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 230px;
    }
    svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    /* Math Calculation Panel */
    .math-panel {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      min-height: 230px;
    }
    .step-content {
      display: none;
      flex-direction: column;
      gap: 8px;
      justify-content: center;
      height: 100%;
    }
    .step-content.active {
      display: flex;
    }
    .math-row {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 13.5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .math-row.highlight {
      border-color: #93c5fd;
      background: #eff6ff;
    }
    .math-row.highlight-green {
      border-color: #86efac;
      background: #f0fdf4;
    }
    .tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 3px 6px;
      border-radius: 4px;
      background: #e2e8f0;
      color: #334155;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .tag.blue { background: #dbeafe; color: #1e40af; }
    .tag.green { background: #dcfce7; color: #166534; }
    .tag.red { background: #fee2e2; color: #991b1b; }

    /* Formula typography */
    .formula {
      font-family: 'Cambria Math', 'KaTeX_Math', 'Times New Roman', Georgia, serif;
      font-size: 14.5px;
      color: #0f172a;
      text-align: right;
      white-space: nowrap;
      overflow-x: auto;
    }
    .formula i {
      font-style: italic;
      font-family: 'Cambria Math', 'KaTeX_Math', 'Times New Roman', serif;
    }
    .formula b {
      font-family: system-ui, sans-serif;
      font-weight: 600;
    }
    .sqrt {
      display: inline-flex;
      align-items: center;
      vertical-align: middle;
    }
    .sqrt-rad {
      font-size: 1.15em;
      margin-right: 1px;
    }
    .sqrt-body {
      border-top: 1.5px solid #0f172a;
      padding-top: 1px;
      padding-left: 2px;
      padding-right: 2px;
    }
    .frac {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 0.85em;
      line-height: 1.1;
      padding: 0 2px;
    }
    .frac-num { border-bottom: 1px solid currentColor; }
    .frac-den { padding-top: 1px; }

    /* SVG Transitions */
    .gfx-group {
      transition: opacity 0.3s ease;
    }
  </style>
</head>
<body>

  
  <div class="nav-bar">
    <div class="btn-group">
      <button class="step-btn active" id="btn0" onclick="goToStep(0)">1. Velocity</button>
      <button class="step-btn" id="btn1" onclick="goToStep(1)">2. Speed</button>
      <button class="step-btn" id="btn2" onclick="goToStep(2)">3. Position</button>
    </div>
    <button class="play-btn" id="playBtn" onclick="toggleAuto()">
      <span id="playIcon">⏸</span> Auto-step
    </button>
  </div>

  
  <div class="stage">
    
    <div class="graph-panel">
      <svg viewBox="0 0 330 215">
        <defs>
          <marker id="arr-blue" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M0,1.5 L8,5 L0,8.5 z" fill="#2563eb" />
          </marker>
          <marker id="arr-green" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M0,1.5 L8,5 L0,8.5 z" fill="#166534" />
          </marker>
          <marker id="arr-red" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M0,1.5 L8,5 L0,8.5 z" fill="#dc2626" />
          </marker>
        </defs>

        
        <line x1="35" y1="175" x2="315" y2="175" stroke="#94a3b8" stroke-width="1.5" />
        <line x1="35" y1="175" x2="35" y2="20" stroke="#94a3b8" stroke-width="1.5" />
        <text x="315" y="192" font-size="11" fill="#334155" font-weight="600" text-anchor="end">x (m)</text>
        <text x="22" y="24" font-size="11" fill="#334155" font-weight="600">y (m)</text>
        <text x="28" y="190" font-size="10" fill="#64748b" text-anchor="middle">0</text>

        
        <path d="M 35,175 Q 122,70 210,70" fill="none" stroke="#94a3b8" stroke-width="2" stroke-dasharray="4 3" />

        
        <g id="gfx-pos" class="gfx-group" opacity="0.3">
          <line x1="210" y1="70" x2="210" y2="175" stroke="#166534" stroke-dasharray="3 3" stroke-width="1.2" />
          <line x1="35" y1="70" x2="210" y2="70" stroke="#166534" stroke-dasharray="3 3" stroke-width="1.2" />
          <rect x="180" y="179" width="60" height="16" rx="3" fill="#dcfce7" />
          <text x="210" y="191" font-size="10.5" fill="#166534" text-anchor="middle" font-weight="bold">x = 21.0 m</text>
          
          <rect x="2" y="62" width="46" height="16" rx="3" fill="#dcfce7" />
          <text x="25" y="74" font-size="10.5" fill="#166534" text-anchor="middle" font-weight="bold">4.5 m</text>
          
          
          <line x1="35" y1="175" x2="206" y2="72" stroke="#166534" stroke-width="2.5" marker-end="url(#arr-green)" />
          <rect x="95" y="112" width="42" height="18" rx="3" fill="#ffffff" stroke="#166534" stroke-width="1" />
          <text x="116" y="125" font-size="11.5" fill="#166534" font-weight="bold" text-anchor="middle">r(3)</text>
        </g>

        
        <g id="gfx-vel" class="gfx-group">
          
          <line id="vec-vx" x1="210" y1="70" x2="265" y2="70" stroke="#2563eb" stroke-width="2.5" marker-end="url(#arr-blue)" />
          <text id="lbl-vx" x="240" y="58" font-size="11" fill="#1d4ed8" font-weight="bold" text-anchor="middle">v<tspan baseline-shift="sub" font-size="8.5">x</tspan> = 10 m/s</text>
          
          
          <circle id="dot-vy" cx="210" cy="70" r="3.5" fill="#dc2626" />
          <text id="lbl-vy" x="180" y="58" font-size="10.5" fill="#b91c1c" font-weight="bold" text-anchor="middle">v<tspan baseline-shift="sub" font-size="8.5">y</tspan> = 0</text>
        </g>

        
        <g id="gfx-speed" class="gfx-group" opacity="0">
          <line x1="210" y1="70" x2="272" y2="70" stroke="#2563eb" stroke-width="3.5" marker-end="url(#arr-blue)" />
          <rect x="220" y="80" width="82" height="18" rx="3" fill="#dbeafe" stroke="#2563eb" stroke-width="1" />
          <text x="261" y="93" font-size="10.5" fill="#1e40af" font-weight="bold" text-anchor="middle">|v| = 10.0 m/s</text>
        </g>

        
        <circle cx="210" cy="70" r="5" fill="#1e2945" />
        <circle cx="210" cy="70" r="2.5" fill="#ffffff" />
        <text x="210" y="38" font-size="11.5" fill="#1e2945" font-weight="bold" text-anchor="middle">🛸 Drone (t = 3 s)</text>
      </svg>
    </div>

    
    <div class="math-panel">
      
      <div class="step-content active" id="card0">
        <div class="math-row highlight">
          <span class="tag blue">v<sub>x</sub>(3)</span>
          <span class="formula"><i>v<sub>x</sub></i> = 4 + 2(3) = <b>10 m/s</b></span>
        </div>
        <div class="math-row highlight">
          <span class="tag red">v<sub>y</sub>(3)</span>
          <span class="formula"><i>v<sub>y</sub></i> = 3 − 1(3) = <b>0 m/s</b></span>
        </div>
        <div class="math-row">
          <span class="tag">Apex Info</span>
          <span style="font-size:12.5px; color:#475569;">At apex (<i>t</i> = 3 s), vertical velocity is zero.</span>
        </div>
      </div>

      
      <div class="step-content" id="card1">
        <div class="math-row">
          <span class="tag blue">Formula</span>
          <span class="formula">|<b><i>v</i></b>| = <span class="sqrt"><span class="sqrt-rad">&radic;</span><span class="sqrt-body"><i>v<sub>x</sub></i><sup>2</sup> + <i>v<sub>y</sub></i><sup>2</sup></span></span></span>
        </div>
        <div class="math-row">
          <span class="tag blue">Substitute</span>
          <span class="formula">|<b><i>v</i></b>| = <span class="sqrt"><span class="sqrt-rad">&radic;</span><span class="sqrt-body">10<sup>2</sup> + 0<sup>2</sup></span></span></span>
        </div>
        <div class="math-row highlight">
          <span class="tag blue">Result</span>
          <span class="formula">|<b><i>v</i></b>| = <b>10.0 m/s</b></span>
        </div>
      </div>

      
      <div class="step-content" id="card2">
        <div class="math-row">
          <span class="tag green">x(3)</span>
          <span class="formula"><i>x</i> = 4(3) + <span class="frac"><span class="frac-num">1</span><span class="frac-den">2</span></span>(2)(3<sup>2</sup>) = <b>21.0 m</b></span>
        </div>
        <div class="math-row">
          <span class="tag green">y(3)</span>
          <span class="formula"><i>y</i> = 3(3) + <span class="frac"><span class="frac-num">1</span><span class="frac-den">2</span></span>(−1)(3<sup>2</sup>) = <b>4.5 m</b></span>
        </div>
        <div class="math-row highlight-green">
          <span class="tag green"><b>r</b>(3)</span>
          <span class="formula"><b><i>r</i></b>(3) = <b>21.0 î + 4.5 ĵ m</b></span>
        </div>
      </div>
    </div>
  </div>

  <script>
    let currentStep = 0;
    let autoInterval = null;

    function updateVisuals(step) {
      const gfxPos = document.getElementById('gfx-pos');
      const gfxVel = document.getElementById('gfx-vel');
      const gfxSpeed = document.getElementById('gfx-speed');

      if (step === 0) {
        gfxPos.style.opacity = '0.3';
        gfxVel.style.opacity = '1';
        gfxSpeed.style.opacity = '0';
      } else if (step === 1) {
        gfxPos.style.opacity = '0.3';
        gfxVel.style.opacity = '0.25';
        gfxSpeed.style.opacity = '1';
      } else if (step === 2) {
        gfxPos.style.opacity = '1';
        gfxVel.style.opacity = '0.2';
        gfxSpeed.style.opacity = '0';
      }
    }

    function goToStep(stepIndex) {
      currentStep = stepIndex;
      for (let i = 0; i < 3; i++) {
        document.getElementById('btn' + i).classList.toggle('active', i === stepIndex);
        document.getElementById('card' + i).classList.toggle('active', i === stepIndex);
      }
      updateVisuals(stepIndex);
    }

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

    function toggleAuto() {
      if (autoInterval) {
        clearInterval(autoInterval);
        autoInterval = null;
        document.getElementById('playIcon').textContent = '▶';
      } else {
        autoInterval = setInterval(nextStep, 3500);
        document.getElementById('playIcon').textContent = '⏸';
      }
    }

    // Initialize auto play
    autoInterval = setInterval(nextStep, 3500);
  </script>
</body>
</html>

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

    /* Header & Givens */
    .givens-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 10px;
    }
    .givens-group {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
    }
    .param-tag {
      background: #fff;
      border: 1px solid #cbd5e1;
      border-radius: 5px;
      padding: 2px 6px;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 12px;
      color: #334155;
    }
    .x-val { color: #0284c7; font-weight: 700; }
    .y-val { color: #ea580c; font-weight: 700; }

    /* Time Selector */
    .time-selector {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .time-btn {
      background: #fff;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
      padding: 2px 8px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      color: #475569;
      transition: all 0.2s ease;
    }
    .time-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #fff;
      box-shadow: 0 1px 3px rgba(2, 132, 199, 0.3);
    }

    /* 2 Columns */
    .columns-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    @media (max-width: 440px) {
      .columns-grid {
        grid-template-columns: 1fr;
      }
    }

    .calc-col {
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 13px;
    }
    .col-x {
      background: #f0f9ff;
      border: 1px solid #bae6fd;
    }
    .col-y {
      background: #fff7ed;
      border: 1px solid #fed7aa;
    }

    .col-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 700;
      font-size: 13px;
      padding-bottom: 4px;
      border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .col-x .col-header { color: #0369a1; }
    .col-y .col-header { color: #c2410c; }

    .formula-row {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 12px;
      background: rgba(255, 255, 255, 0.85);
      border-radius: 6px;
      padding: 5px 7px;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .formula-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      font-weight: 700;
    }
    .calc-line {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 4px;
      flex-wrap: wrap;
    }
    .result-badge {
      font-weight: 700;
      padding: 1px 5px;
      border-radius: 4px;
      font-size: 12px;
    }
    .col-x .result-badge { background: #e0f2fe; color: #0369a1; }
    .col-y .result-badge { background: #ffedd5; color: #c2410c; }

    /* Summary Card */
    .summary-card {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-around;
      gap: 8px;
    }
    .summary-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      font-size: 12px;
    }
    .summary-label {
      font-size: 10px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .summary-val {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
    }
  </style>
</head>
<body>

  
  <div class="givens-bar">
    <div class="givens-group">
      <span>Given:</span>
      <span class="param-tag">r₀ = (<span class="x-val">2</span>, <span class="y-val">5</span>) m</span>
      <span class="param-tag">v₀ = (<span class="x-val">4</span>, <span class="y-val">-2</span>) m/s</span>
      <span class="param-tag">a = (<span class="x-val">3</span>, <span class="y-val">2</span>) m/s²</span>
    </div>
    <div class="time-selector">
      <span style="font-size: 12px; font-weight: 600; color: #64748b; margin-right: 2px;">t =</span>
      <button class="time-btn" onclick="setTime(0)">0s</button>
      <button class="time-btn" onclick="setTime(1)">1s</button>
      <button class="time-btn active" onclick="setTime(2)">2s</button>
      <button class="time-btn" onclick="setTime(3)">3s</button>
    </div>
  </div>

  
  <div class="columns-grid">
    
    <div class="calc-col col-x">
      <div class="col-header">
        <span>X-Axis (Horizontal)</span>
        <span>î</span>
      </div>
      <div class="formula-row">
        <div class="formula-label">Position: x(t) = x₀ + v₀ₓt + ½aₓt²</div>
        <div class="calc-line">
          <span id="x-calc">2 + 4(2) + ½(3)(4)</span>
          <span class="result-badge" id="x-res">16 m</span>
        </div>
      </div>
      <div class="formula-row">
        <div class="formula-label">Velocity: vₓ(t) = v₀ₓ + aₓt</div>
        <div class="calc-line">
          <span id="vx-calc">4 + 3(2)</span>
          <span class="result-badge" id="vx-res">10 m/s</span>
        </div>
      </div>
    </div>

    
    <div class="calc-col col-y">
      <div class="col-header">
        <span>Y-Axis (Vertical)</span>
        <span>ĵ</span>
      </div>
      <div class="formula-row">
        <div class="formula-label">Position: y(t) = y₀ + v₀ᵧt + ½aᵧt²</div>
        <div class="calc-line">
          <span id="y-calc">5 - 2(2) + ½(2)(4)</span>
          <span class="result-badge" id="y-res">5 m</span>
        </div>
      </div>
      <div class="formula-row">
        <div class="formula-label">Velocity: vᵧ(t) = v₀ᵧ + aᵧt</div>
        <div class="calc-line">
          <span id="vy-calc">-2 + 2(2)</span>
          <span class="result-badge" id="vy-res">2 m/s</span>
        </div>
      </div>
    </div>
  </div>

  
  <div class="summary-card">
    <div class="summary-item">
      <div class="summary-label">Position Vector r(t)</div>
      <div class="summary-val" id="r-vec">
        (<span class="x-val">16</span>î + <span class="y-val">5</span>ĵ) m
      </div>
    </div>
    <div class="summary-item">
      <div class="summary-label">Velocity Vector v(t)</div>
      <div class="summary-val" id="v-vec">
        (<span class="x-val">10</span>î + <span class="y-val">2</span>ĵ) m/s
      </div>
    </div>
    <div class="summary-item">
      <div class="summary-label">Speed |v| = √(vₓ² + vᵧ²)</div>
      <div class="summary-val" id="speed-val">
        √(10² + 2²) = 10.2 m/s
      </div>
    </div>
  </div>

  <script>
    const x0 = 2, v0x = 4, ax = 3;
    const y0 = 5, v0y = -2, ay = 2;

    function setTime(t) {
      document.querySelectorAll('.time-btn').forEach((btn, idx) => {
        btn.classList.toggle('active', idx === t);
      });

      // Calculate X
      const t2 = t * t;
      const x = x0 + v0x * t + 0.5 * ax * t2;
      const vx = v0x + ax * t;
      document.getElementById('x-calc').textContent = `${x0} + ${v0x}(${t}) + ½(${ax})(${t2})`;
      document.getElementById('x-res').textContent = `${x} m`;
      document.getElementById('vx-calc').textContent = `${v0x} + ${ax}(${t})`;
      document.getElementById('vx-res').textContent = `${vx} m/s`;

      // Calculate Y
      const y = y0 + v0y * t + 0.5 * ay * t2;
      const vy = v0y + ay * t;
      const vySign = v0y < 0 ? `- ${Math.abs(v0y)}` : `+ ${v0y}`;
      document.getElementById('y-calc').textContent = `${y0} ${vySign}(${t}) + ½(${ay})(${t2})`;
      document.getElementById('y-res').textContent = `${y} m`;
      document.getElementById('vy-calc').textContent = `${v0y} + ${ay}(${t})`;
      document.getElementById('vy-res').textContent = `${vy} m/s`;

      // Combined vectors
      const ySignVec = y >= 0 ? '+' : '-';
      const vySignVec = vy >= 0 ? '+' : '-';
      document.getElementById('r-vec').innerHTML = 
        `(<span class="x-val">${x}</span>î ${ySignVec} <span class="y-val">${Math.abs(y)}</span>ĵ) m`;
      
      document.getElementById('v-vec').innerHTML = 
        `(<span class="x-val">${vx}</span>î ${vySignVec} <span class="y-val">${Math.abs(vy)}</span>ĵ) m/s`;

      const speed = Math.sqrt(vx * vx + vy * vy).toFixed(1);
      document.getElementById('speed-val').textContent = 
        `√(${vx}² + ${vy}²) = ${speed} m/s`;
    }

    // Initialize at t = 2s
    setTime(2);
  </script>
</body>
</html>

Transformacja współrzędnych położenia między układami odniesienia

Studium przypadku — opis ruchu pojazdów w różnych układach odniesienia

Nieinercjalne a inercjalne układy odniesienia — aspekty kinematyczne

Ruch względny na płaszczyźnie — łódź na rzece i samolot na wietrze

Zależność kształtu toru od wyboru układu odniesienia

Zadania rachunkowe ze względności położenia i toru ruchu

science

Względność ruchu i transformacje układów odniesienia

Independence of Horizontal and Vertical Projectile Motion

Horizontally Launched Projectile Trajectories

Projectiles Launched at an Arbitrary Angle

Parabolic Trajectory Equations and Asymmetric Landing Heights

Projectile Motion with Linear Air Resistance: Qualitative Models

Two-Dimensional Motion and Projectile Trajectories

Resolving Velocity and Force Vectors into Perpendicular Components

The Independence of Perpendicular Components in Planar Motion

Horizontal Projection from a Height: Time of Flight and Range

Analysing Projectile Motion Horizontally and Vertically

General Projectile Motion with Unequal Launch and Landing Heights

Deriving and Applying the Parabolic Trajectory Equation

The Qualitative and Quantitative Effects of Air Resistance on Projectiles

Two-Dimensional Motion and Projectiles

Wektory prędkości i przyspieszenia w zapisie współrzędnościowym

Kąt między wektorem prędkości a wektorem przyspieszenia

Wyznaczanie wektora zmiany prędkości delta v metodą geometryczną

Prędkość względna dwóch ciał poruszających się pod kątem na płaszczyźnie

Pomiary wektorowych wielkości kinematycznych — aparatura i niepewności

Kompleksowe zadania z wektorowego opisu kinematyki

Analiza wektorowa ruchu na płaszczyźnie i kinematyka względna

Uniform Velocity Under Zero Resultant Force

Constructing Free-Body Diagrams and Calculating Resultant Forces

Newton's Second Law: Applying F = ma for Constant Mass

Motion on Inclined Planes Under Gravity, Friction, and Applied Forces

Connected Particles: Strings, Pulleys, and Towing Systems

Apparent Weight in Accelerating Lifts and Vertical Systems

Newton's Third Law: Identifying Real Interaction Force Pairs

Dynamics and Newton's Laws of Motion

Spadek swobodny jako ruch jednostajnie przyspieszony z przyspieszeniem g

Rzut pionowy w górę jako ruch jednostajnie opóźniony i przyspieszony

Zadania na spotkanie ciał w ruchach jednostajnie zmiennych

Ruch wielozmienny — połączenie ruchu przyspieszonego, jednostajnego i opóźnionego

Prędkość średnia w ruchu jednostajnie zmiennym jako średnia arytmetyczna prędkości skrajnych

Laboratorium: Badanie ruchu wózka na równi i wyznaczanie przyspieszenia

Zaawansowane zadania obliczeniowe z ruchu jednostajnie zmiennego

Ruch jednostajnie zmienny — grawitacja, ruchy złożone i zadania problemowe

Rzut ukośny — składanie dwóch niezależnych ruchów prostoliniowych

Równania parametryczne położenia i prędkości w rzucie ukośnym

Wyprowadzenie równania toru rzutu ukośnego — parabola balistyczna

Czas wznoszenia i całkowity czas lotu w rzucie ukośnym

Maksymalna wysokość wzniesienia w rzucie ukośnym

Zasięg rzutu ukośnego i kąt zapewniający maksymalny zasięg

Kąty komplementarne w rzucie ukośnym — jednakowy zasięg dla alfa i 90° - alfa

Klasyczny rzut ukośny — kinematyka i parametry lotu

Prędkość w dowolnym punkcie toru i prędkość końcowa w rzucie ukośnym

Promień krzywizny toru w wierzchołku i w punkcie początkowym rzutu ukośnego

Rzut ukośny z dowolnej wysokości początkowej h₀

Wpływ oporów powietrza na trajektorię rzutów — krzywa balistyczna

Modelowanie komputerowe i numeryczna analiza rzutów

Porównanie wszystkich typów rzutów — tabela zbiorcza i studium przypadków

Zaawansowane zadania olimpijskie i maturalne z rzutów

Zaawansowana mechanika rzutów — krzywizna toru, opory ruchu i modelowanie numeryczne

Modeling Projectile Motion with Quadratic Equations

Projectile Motion: Analyzing the Horizontal Component

Projectile Motion at an Angle: Resolving Components

Calculating Projectile Range and Maximum Height

Uniform Circular Motion: Velocity and Acceleration

Calculating Centripetal Acceleration in Circular Motion

Centripetal Force in Horizontal Circular Motion

Comparing Projectile and Circular Motion

Solving Two-Dimensional Motion Equation Problems

Real-World Applications of Two-Dimensional Motion

Two-Dimensional Motion: Projectiles and Circular Motion

Kinematyka przekładni pasowych, zębatych i kół łańcuchowych — rower

Ruch obrotowy Ziemi i prędkość liniowa punktów na różnych szerokościach geograficznych

Toczenie się koła bez poślizgu — składanie ruchu postępowego i obrotowego

Laboratorium: Wyznaczanie okresu i prędkości kątowej w ruchu po okręgu

Zadania obliczeniowe ze związków między wielkościami liniowymi i kątowymi

Zestaw zadań maturalnych z kinematyki ruchu po okręgu

Zastosowania kinematyki ruchu po okręgu i układy złożone

Projectile Motion: Horizontal Launch Analysis

Projectile Motion: Angled Launch Components

Solving 2D Projectile Word Problems

Describing Uniform Circular Motion

Calculating Centripetal Acceleration in Two Dimensions

Ruch w polu grawitacyjnym planet — prędkości kosmiczne i orbity satelitów

Układy nieinercjalne na obracającej się Ziemi — ciężar pozorny i odchylenie pionu

Zderzenia wielokrotne i łańcuchy zderzeń kul na prostej

Analiza wymiarowa i szacowanie rzędów wielkości w złożonych zagadnieniach mechaniki

Laboratorium: Kompleksowy projekt badawczy z mechaniki — od hipotezy do raportu

Wielki trening maturalny z całej mechaniki klasycznej

Wielka synteza praw mechaniki — od Galileusza i Newtona do współczesnej fizyki

Grawitacja, układy nieinercjalne i wielka synteza mechaniki

OGS.12.PS1.3

OGS.12.PS1.3

Aligned learning resources

Related diagrams