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

    /* Top Stage Progress / Temp Bar */
    .temp-scale {
      width: 100%;
      max-width: 540px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      padding: 6px 12px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
    }
    .temp-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }
    .temp-label {
      font-size: 11px;
      color: #64748b;
      font-weight: 500;
    }
    .temp-val {
      font-weight: 700;
    }
    .t1 { color: #0284c7; }
    .t2 { color: #d97706; }
    .t3 { color: #dc2626; }
    .temp-arrow {
      color: #cbd5e1;
      font-size: 14px;
    }

    /* 3 Phase Cards Container */
    .stages-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 540px;
      flex: 1;
    }

    .stage-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
      position: relative;
    }
    .stage-card.active {
      border-color: #22b7ff;
      box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.25);
      background: #f0f9ff;
    }

    .stage-header {
      font-size: 12px;
      font-weight: 700;
      text-align: center;
      color: #1e2945;
      margin-bottom: 4px;
      line-height: 1.2;
    }

    .canvas-box {
      width: 100%;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .stage-sub {
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      text-align: center;
      margin-top: 4px;
      line-height: 1.2;
    }

    /* Bottom Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 8px;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s ease;
    }
    .btn:hover {
      background: #f1f5f9;
    }
    .dots {
      display: flex;
      gap: 6px;
    }
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: transform 0.2s, background 0.2s;
    }
    .dot.active {
      background: #22b7ff;
      transform: scale(1.25);
    }

    /* Subtle SVG keyframe animations */
    @keyframes spin-slow {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes pulse-jet {
      0%, 100% { opacity: 0.7; transform: scaleY(0.95); }
      50% { opacity: 1; transform: scaleY(1.08); }
    }
    @keyframes radiate {
      0% { r: 16; opacity: 0.8; }
      100% { r: 38; opacity: 0; }
    }
    @keyframes arrow-in {
      0%, 100% { transform: translate(0, 0); }
      50% { transform: scale(0.85); }
    }

    .rotate-center {
      transform-origin: 50px 50px;
      animation: spin-slow 16s linear infinite;
    }
    .jet-anim {
      transform-origin: 50px 50px;
      animation: pulse-jet 2s ease-in-out infinite;
    }
    .ripple-1 {
      animation: radiate 2.4s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
    }
    .ripple-2 {
      animation: radiate 2.4s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
      animation-delay: 1.2s;
    }
    .collapse-arrows {
      transform-origin: 50px 50px;
      animation: arrow-in 2.5s ease-in-out infinite;
    }
  </style>
</head>
<body>

  
  <div class="temp-scale">
    <div class="temp-item">
      <span class="temp-label">Phase 1</span>
      <span class="temp-val t1">10 K</span>
    </div>
    <span class="temp-arrow">➔</span>
    <div class="temp-item">
      <span class="temp-label">Phase 2</span>
      <span class="temp-val t2">1,000 K</span>
    </div>
    <span class="temp-arrow">➔</span>
    <div class="temp-item">
      <span class="temp-label">Phase 3</span>
      <span class="temp-val t3">100,000 K</span>
    </div>
  </div>

  
  <div class="stages-grid">

    
    <div class="stage-card active" id="card-0">
      <div class="stage-header">1. Clump Collapse</div>
      <div class="canvas-box">
        <svg viewBox="0 0 100 100">
          <defs>
            <radialGradient id="cloudGrad" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stop-color="#38bdf8" stop-opacity="0.6"/>
              <stop offset="60%" stop-color="#93c5fd" stop-opacity="0.3"/>
              <stop offset="100%" stop-color="#bae6fd" stop-opacity="0"/>
            </radialGradient>
            <marker id="arr1" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
              <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#0284c7"/>
            </marker>
          </defs>

          
          <g class="rotate-center">
            <ellipse cx="50" cy="50" rx="38" ry="34" fill="url(#cloudGrad)" />
            <circle cx="44" cy="46" r="18" fill="#60a5fa" opacity="0.35" />
            <circle cx="56" cy="54" r="16" fill="#38bdf8" opacity="0.35" />
            <circle cx="50" cy="50" r="12" fill="#0284c7" opacity="0.4" />
          </g>

          
          <g class="collapse-arrows">
            <line x1="16" y1="50" x2="34" y2="50" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arr1)"/>
            <line x1="84" y1="50" x2="66" y2="50" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arr1)"/>
            <line x1="50" y1="16" x2="50" y2="34" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arr1)"/>
            <line x1="50" y1="84" x2="50" y2="66" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" marker-end="url(#arr1)"/>
          </g>
        </svg>
      </div>
      <div class="stage-sub">Gravity collapse</div>
    </div>

    
    <div class="stage-card" id="card-1">
      <div class="stage-header">2. Disk &amp; Jets</div>
      <div class="canvas-box">
        <svg viewBox="0 0 100 100">
          <defs>
            <linearGradient id="jetGradTop" x1="0%" y1="100%" x2="0%" y2="0%">
              <stop offset="0%" stop-color="#818cf8" stop-opacity="1"/>
              <stop offset="100%" stop-color="#c084fc" stop-opacity="0"/>
            </linearGradient>
            <linearGradient id="jetGradBot" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" stop-color="#818cf8" stop-opacity="1"/>
              <stop offset="100%" stop-color="#c084fc" stop-opacity="0"/>
            </linearGradient>
            <marker id="arr2" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="3.5" markerHeight="3.5" orient="auto-start-reverse">
              <path d="M 0 2 L 7 5 L 0 8 z" fill="#ea580c"/>
            </marker>
          </defs>

          
          <g class="jet-anim">
            <polygon points="46,50 54,50 58,6 42,6" fill="url(#jetGradTop)" />
            <polygon points="46,50 54,50 58,94 42,94" fill="url(#jetGradBot)" />
            <line x1="50" y1="46" x2="50" y2="10" stroke="#e0e7ff" stroke-width="1.5" stroke-linecap="round"/>
            <line x1="50" y1="54" x2="50" y2="90" stroke="#e0e7ff" stroke-width="1.5" stroke-linecap="round"/>
          </g>

          
          <ellipse cx="50" cy="50" rx="42" ry="12" fill="#fde047" opacity="0.3" stroke="#f59e0b" stroke-width="1.5" />
          <ellipse cx="50" cy="50" rx="30" ry="8" fill="#fb923c" opacity="0.6" />
          <ellipse cx="50" cy="50" rx="16" ry="4.5" fill="#ea580c" opacity="0.85" />
          <circle cx="50" cy="50" r="5" fill="#fff" stroke="#f97316" stroke-width="2" />

          
          <path d="M 12 48 Q 28 42 42 49" fill="none" stroke="#ea580c" stroke-width="1.5" marker-end="url(#arr2)" />
          <path d="M 88 52 Q 72 58 58 51" fill="none" stroke="#ea580c" stroke-width="1.5" marker-end="url(#arr2)" />
        </svg>
      </div>
      <div class="stage-sub">Accretion &amp; bipolar jets</div>
    </div>

    
    <div class="stage-card" id="card-2">
      <div class="stage-header">3. Protostar</div>
      <div class="canvas-box">
        <svg viewBox="0 0 100 100">
          <defs>
            <radialGradient id="starGrad" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stop-color="#ffffff"/>
              <stop offset="25%" stop-color="#fef08a"/>
              <stop offset="65%" stop-color="#f97316"/>
              <stop offset="100%" stop-color="#dc2626"/>
            </radialGradient>
          </defs>

          
          <circle cx="50" cy="50" r="16" fill="none" stroke="#ef4444" stroke-width="2" opacity="0.8" class="ripple-1" />
          <circle cx="50" cy="50" r="16" fill="none" stroke="#f97316" stroke-width="1.5" opacity="0.8" class="ripple-2" />

          
          <g stroke="#f87171" stroke-width="1.5" stroke-linecap="round" opacity="0.8">
            <line x1="50" y1="22" x2="50" y2="12" />
            <line x1="50" y1="78" x2="50" y2="88" />
            <line x1="22" y1="50" x2="12" y2="50" />
            <line x1="78" y1="50" x2="88" y2="50" />
            <line x1="30" y1="30" x2="22" y2="22" />
            <line x1="70" y1="70" x2="78" y2="78" />
            <line x1="70" y1="30" x2="78" y2="22" />
            <line x1="30" y1="70" x2="22" y2="78" />
          </g>

          
          <circle cx="50" cy="50" r="16" fill="url(#starGrad)" />
          <circle cx="50" cy="50" r="8" fill="#ffffff" opacity="0.9" />
        </svg>
      </div>
      <div class="stage-sub">Infrared radiation</div>
    </div>

  </div>

  
  <div class="controls">
    <button class="btn" id="playBtn" aria-label="Play / Pause">
      <span id="playIcon">⏸</span> <span id="playText">Pause</span>
    </button>
    <div class="dots">
      <div class="dot active" id="dot-0"></div>
      <div class="dot" id="dot-1"></div>
      <div class="dot" id="dot-2"></div>
    </div>
  </div>

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

    const cards = [document.getElementById('card-0'), document.getElementById('card-1'), document.getElementById('card-2')];
    const dots = [document.getElementById('dot-0'), document.getElementById('dot-1'), document.getElementById('dot-2')];
    const playBtn = document.getElementById('playBtn');
    const playIcon = document.getElementById('playIcon');
    const playText = document.getElementById('playText');

    function showStep(idx) {
      current = idx;
      cards.forEach((card, i) => {
        if (i === idx) {
          card.classList.add('active');
        } else {
          card.classList.remove('active');
        }
      });
      dots.forEach((dot, i) => {
        if (i === idx) {
          dot.classList.add('active');
        } else {
          dot.classList.remove('active');
        }
      });
    }

    function nextStep() {
      const next = (current + 1) % 3;
      showStep(next);
    }

    function startAuto() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3500);
      playing = true;
      playIcon.textContent = '⏸';
      playText.textContent = 'Pause';
    }

    function stopAuto() {
      if (timer) clearInterval(timer);
      timer = null;
      playing = false;
      playIcon.textContent = '▶';
      playText.textContent = 'Play';
    }

    cards.forEach((card, idx) => {
      card.addEventListener('click', () => {
        showStep(idx);
        stopAuto();
      });
    });

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

    playBtn.addEventListener('click', () => {
      if (playing) {
        stopAuto();
      } else {
        nextStep();
        startAuto();
      }
    });

    // Start auto loop on mount
    startAuto();
  </script>
</body>
</html>

Stellar Nurseries and Protostar Formation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Balance of Forces in a Gas Cloud</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      min-height: 100vh;
      background: #f8fafc;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      user-select: none;
      -webkit-user-select: none;
      padding: 6px;
    }

    .main-container {
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-width: 700px;
      margin: 0 auto;
      width: 100%;
      height: 100%;
    }

    .panels-wrapper {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      width: 100%;
    }

    @media (min-width: 500px) {
      .panels-wrapper {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
    }

    .panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 8px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      position: relative;
    }

    .panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0 2px;
    }

    .panel-title {
      font-size: 12px;
      font-weight: 700;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .temp-gauge {
      font-size: 10px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 9999px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .temp-warm {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca;
    }

    .temp-cold {
      background: #eff6ff;
      color: #2563eb;
      border: 1px solid #bfdbfe;
    }

    .canvas-container {
      width: 100%;
      height: 130px;
      position: relative;
      border-radius: 6px;
      overflow: hidden;
      background: #0f172a;
    }

    @media (min-width: 500px) {
      .canvas-container {
        height: 180px;
      }
    }

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

    .panel-caption {
      font-size: 10.5px;
      font-weight: 600;
      text-align: center;
      line-height: 1.25;
      padding: 2px 4px 0;
    }

    .caption-stable {
      color: #059669;
    }

    .caption-collapse {
      color: #2563eb;
    }

    .legend-bar {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 8px 14px;
      padding: 6px 8px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      font-size: 10.5px;
      font-weight: 600;
      color: #475569;
    }

    .legend-item {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .legend-arrow-red {
      width: 12px;
      height: 3px;
      background: #ef4444;
      border-radius: 2px;
      position: relative;
    }
    .legend-arrow-red::after {
      content: '';
      position: absolute;
      right: -2px;
      top: -2px;
      border-left: 4px solid #ef4444;
      border-top: 3.5px solid transparent;
      border-bottom: 3.5px solid transparent;
    }

    .legend-arrow-blue {
      width: 12px;
      height: 4px;
      background: #3b82f6;
      border-radius: 2px;
      position: relative;
    }
    .legend-arrow-blue::after {
      content: '';
      position: absolute;
      right: -2px;
      top: -2.5px;
      border-left: 5px solid #3b82f6;
      border-top: 4.5px solid transparent;
      border-bottom: 4.5px solid transparent;
    }

    .legend-dot {
      width: 5px;
      height: 5px;
      background: #ffffff;
      border: 1px solid #94a3b8;
      border-radius: 50%;
    }
  </style>
</head>
<body>

  <div class="main-container">
    <div class="panels-wrapper">
      
      
      <div class="panel">
        <div class="panel-header">
          <span class="panel-title">1. Stable Cloud</span>
          <span class="temp-gauge temp-warm">🔥 300 K (Warm)</span>
        </div>
        <div class="canvas-container">
          <canvas id="canvasA"></canvas>
        </div>
        <div class="panel-caption caption-stable">
          Thermal Pressure = Gravity (Equilibrium)
        </div>
      </div>

      
      <div class="panel">
        <div class="panel-header">
          <span class="panel-title">2. Collapse Trigger</span>
          <span class="temp-gauge temp-cold">❄️ 10 K (Cold Clump)</span>
        </div>
        <div class="canvas-container">
          <canvas id="canvasB"></canvas>
        </div>
        <div class="panel-caption caption-collapse">
          Gravity &gt; Thermal Pressure (Inward Collapse)
        </div>
      </div>

    </div>

    
    <div class="legend-bar">
      <div class="legend-item">
        <span class="legend-arrow-red"></span>
        <span>Thermal Pressure (Outward)</span>
      </div>
      <div class="legend-item">
        <span class="legend-arrow-blue"></span>
        <span>Gravity (Inward)</span>
      </div>
      <div class="legend-item">
        <span class="legend-dot"></span>
        <span>Gas Particles</span>
      </div>
    </div>
  </div>

  <script>
    const canvasA = document.getElementById('canvasA');
    const ctxA = canvasA.getContext('2d');

    const canvasB = document.getElementById('canvasB');
    const ctxB = canvasB.getContext('2d');

    const NUM_PARTICLES = 36;
    let particlesA = [];
    let particlesB = [];

    function initParticles() {
      particlesA = [];
      particlesB = [];

      // Warm fast vibrating/moving particles
      for (let i = 0; i < NUM_PARTICLES; i++) {
        const ang = Math.random() * Math.PI * 2;
        const dist = Math.sqrt(Math.random()) * 0.78;
        const moveAng = Math.random() * Math.PI * 2;
        const speed = 0.35 + Math.random() * 0.35;
        particlesA.push({
          x: Math.cos(ang) * dist,
          y: Math.sin(ang) * dist,
          vx: Math.cos(moveAng) * speed,
          vy: Math.sin(moveAng) * speed
        });
      }

      // Cold slow particles falling inward smoothly
      for (let i = 0; i < NUM_PARTICLES; i++) {
        const ang = Math.random() * Math.PI * 2;
        const dist = 0.2 + Math.sqrt(Math.random()) * 0.65;
        particlesB.push({
          x: Math.cos(ang) * dist,
          y: Math.sin(ang) * dist,
          speed: 0.0018 + Math.random() * 0.0018,
          alpha: Math.min(1, dist * 1.5),
          ang: ang,
          dist: dist
        });
      }
    }

    function setupCanvas(canvas, ctx) {
      const rect = canvas.getBoundingClientRect();
      const dpr = window.devicePixelRatio || 1;
      canvas.width = Math.floor(rect.width * dpr);
      canvas.height = Math.floor(rect.height * dpr);
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      return { width: rect.width, height: rect.height };
    }

    function drawArrow(ctx, x1, y1, x2, y2, color, lineWidth, headSize) {
      const angle = Math.atan2(y2 - y1, x2 - x1);
      ctx.strokeStyle = color;
      ctx.fillStyle = color;
      ctx.lineWidth = lineWidth;
      ctx.lineCap = 'round';
      ctx.lineJoin = 'round';

      ctx.beginPath();
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.stroke();

      ctx.beginPath();
      ctx.moveTo(x2, y2);
      ctx.lineTo(
        x2 - headSize * Math.cos(angle - Math.PI / 5.5),
        y2 - headSize * Math.sin(angle - Math.PI / 5.5)
      );
      ctx.lineTo(
        x2 - headSize * Math.cos(angle + Math.PI / 5.5),
        y2 - headSize * Math.sin(angle + Math.PI / 5.5)
      );
      ctx.closePath();
      ctx.fill();
    }

    initParticles();

    function render() {
      const sizeA = setupCanvas(canvasA, ctxA);
      const sizeB = setupCanvas(canvasB, ctxB);

      // --- RENDER PANEL A (Warm Stable Cloud) ---
      const wA = sizeA.width;
      const hA = sizeA.height;
      const cAx = wA / 2;
      const cAy = hA / 2;
      const rA = Math.min(wA * 0.22, hA * 0.32);

      // Gas Cloud Nebula Background
      const gradA = ctxA.createRadialGradient(cAx, cAy, rA * 0.2, cAx, cAy, rA);
      gradA.addColorStop(0, '#334155');
      gradA.addColorStop(0.8, '#1e293b');
      gradA.addColorStop(1, '#0f172a');
      ctxA.fillStyle = gradA;
      ctxA.beginPath();
      ctxA.arc(cAx, cAy, rA, 0, Math.PI * 2);
      ctxA.fill();

      // Stable boundary ring
      ctxA.strokeStyle = 'rgba(148, 163, 184, 0.25)';
      ctxA.lineWidth = 1;
      ctxA.stroke();

      // Smooth Particle updates for Warm Gas (300K)
      ctxA.fillStyle = '#ffffff';
      for (let p of particlesA) {
        p.x += p.vx / rA;
        p.y += p.vy / rA;

        const d = Math.hypot(p.x, p.y);
        if (d > 0.82) {
          const nx = p.x / d;
          const ny = p.y / d;
          const dot = p.vx * nx + p.vy * ny;
          p.vx -= 2 * dot * nx;
          p.vy -= 2 * dot * ny;
          p.x = nx * 0.82;
          p.y = ny * 0.82;
        }

        ctxA.beginPath();
        ctxA.arc(cAx + p.x * rA, cAy + p.y * rA, 1.8, 0, Math.PI * 2);
        ctxA.fill();
      }

      // Arrows for Panel A (Balanced: 4 Outward Red = 4 Inward Blue)
      const arrowLenA = Math.max(12, rA * 0.36);
      const headA = Math.max(4.5, arrowLenA * 0.38);

      // Outward Thermal Pressure (Red - Cardinal)
      const cardinal = [0, Math.PI * 0.5, Math.PI, Math.PI * 1.5];
      cardinal.forEach(ang => {
        const cos = Math.cos(ang);
        const sin = Math.sin(ang);
        const p1x = cAx + cos * (rA - 2);
        const p1y = cAy + sin * (rA - 2);
        const p2x = cAx + cos * (rA + arrowLenA);
        const p2y = cAy + sin * (rA + arrowLenA);
        drawArrow(ctxA, p1x, p1y, p2x, p2y, '#ef4444', 2.2, headA);
      });

      // Inward Gravity (Blue - Diagonal, Equal magnitude)
      const diagonal = [Math.PI * 0.25, Math.PI * 0.75, Math.PI * 1.25, Math.PI * 1.75];
      diagonal.forEach(ang => {
        const cos = Math.cos(ang);
        const sin = Math.sin(ang);
        const g1x = cAx + cos * (rA + arrowLenA + 2);
        const g1y = cAy + sin * (rA + arrowLenA + 2);
        const g2x = cAx + cos * (rA + 1);
        const g2y = cAy + sin * (rA + 1);
        drawArrow(ctxA, g1x, g1y, g2x, g2y, '#3b82f6', 2.2, headA);
      });

      // --- RENDER PANEL B (Cold Collapsing Core) ---
      const wB = sizeB.width;
      const hB = sizeB.height;
      const cBx = wB / 2;
      const cBy = hB / 2;
      const rB = Math.min(wB * 0.22, hB * 0.32);

      // Dense Contracting Core Background
      const gradB = ctxB.createRadialGradient(cBx, cBy, rB * 0.1, cBx, cBy, rB);
      gradB.addColorStop(0, '#1e293b');
      gradB.addColorStop(0.7, '#0f172a');
      gradB.addColorStop(1, '#020617');
      ctxB.fillStyle = gradB;
      ctxB.beginPath();
      ctxB.arc(cBx, cBy, rB, 0, Math.PI * 2);
      ctxB.fill();

      // High-density core center glow
      const coreGrad = ctxB.createRadialGradient(cBx, cBy, 0, cBx, cBy, rB * 0.35);
      coreGrad.addColorStop(0, 'rgba(96, 165, 250, 0.45)');
      coreGrad.addColorStop(1, 'rgba(96, 165, 250, 0)');
      ctxB.fillStyle = coreGrad;
      ctxB.beginPath();
      ctxB.arc(cBx, cBy, rB * 0.35, 0, Math.PI * 2);
      ctxB.fill();

      // Smooth Particle updates for Cold Inward Collapse (10K)
      for (let p of particlesB) {
        p.dist -= p.speed;
        
        // Gentle smooth rotation & inward motion
        p.ang += 0.002;
        p.x = Math.cos(p.ang) * p.dist;
        p.y = Math.sin(p.ang) * p.dist;

        // Smooth fade out as particle reaches dense core
        if (p.dist < 0.15) {
          p.alpha = Math.max(0, p.alpha - 0.04);
          if (p.alpha <= 0) {
            // Respawn seamlessly at outer boundary
            p.dist = 0.72 + Math.random() * 0.12;
            p.ang = Math.random() * Math.PI * 2;
            p.speed = 0.0018 + Math.random() * 0.0018;
            p.alpha = 0.1;
          }
        } else if (p.alpha < 0.95) {
          p.alpha = Math.min(0.95, p.alpha + 0.03);
        }

        ctxB.fillStyle = `rgba(255, 255, 255, ${p.alpha})`;
        ctxB.beginPath();
        ctxB.arc(cBx + p.x * rB, cBy + p.y * rB, 1.8, 0, Math.PI * 2);
        ctxB.fill();
      }

      // Arrows for Panel B (Overwhelming Gravity > Weak Outward Pressure)
      // Weak outward pressure (thin, faint, short red)
      const weakLen = arrowLenA * 0.45;
      cardinal.forEach(ang => {
        const cos = Math.cos(ang);
        const sin = Math.sin(ang);
        const p1x = cBx + cos * (rB - 2);
        const p1y = cBy + sin * (rB - 2);
        const p2x = cBx + cos * (rB + weakLen);
        const p2y = cBy + sin * (rB + weakLen);
        drawArrow(ctxB, p1x, p1y, p2x, p2y, '#f87171', 1.2, headA * 0.6);
      });

      // Strong dominant inward gravity (thick, long blue)
      const strongLen = arrowLenA * 1.35;
      diagonal.forEach(ang => {
        const cos = Math.cos(ang);
        const sin = Math.sin(ang);
        const g1x = cBx + cos * (rB + strongLen);
        const g1y = cBy + sin * (rB + strongLen);
        const g2x = cBx + cos * (rB + 1);
        const g2y = cBy + sin * (rB + 1);
        drawArrow(ctxB, g1x, g1y, g2x, g2y, '#3b82f6', 3.4, headA * 1.25);
      });

      requestAnimationFrame(render);
    }

    window.addEventListener('resize', () => {
      // Re-setup on resize
    });

    requestAnimationFrame(render);
  </script>
</body>
</html>

Earth's Position, Water, and Atmosphere for Life

Earth's Magnetic Field: Shielding Life

Atmospheric Composition and UV Protection

Primordial Earth and Abiogenesis Hypotheses

Cosmic Origins: From the Big Bang to Galaxies

science

Earth's Habitability and Origins of the Universe and Life

Main-Sequence Stars and Hydrostatic Equilibrium

Life Cycles of Low- and Medium-Mass Stars

Life Cycle of Massive Stars: Supernovae and Black Holes

Stellar Nucleosynthesis and the Origin of Elements

Evidence for the Big Bang: Cosmic Microwave Background and Redshift

Hubble's Law, Expansion, and the Fate of the Universe

Stellar Evolution, Nucleosynthesis, and Cosmology

Ciągły ubytek masy Słońca wskutek emisji promieniowania

Bilanse masowe w precyzyjnej spektrometrii masowej

Ciepło reakcji jądrowej — pojęcie wartości Q

Reakcje endoenergetyczne — próg energetyczny reakcji jądrowej

Analiza wykresów relacji masa-energia w fizyce jądrowej

Trening zadań maturalnych z równoważności masy i energii

Bilanse masowo-energetyczne w reakcjach jądrowych i astrofizyce

Wielki Wybuch jako początek znanego Wszechświata, przestrzeni i czasu

Kosmologiczne przesunięcie ku czerwieni (redshift z) a ucieczka galaktyk

Prawo Hubble’a-Lemaître’a: zależność v = H₀·d i ucieczka galaktyk

Stała Hubble’a H₀ — jednostka (km/s)/Mpc oraz interpretacja fizyczna tempa ekspansji

Szacowanie wieku Wszechświata jako czasu Hubble’a t = 1/H₀

Kosmiczne mikrofalowe promieniowanie tła (CMBR) jako echo Wielkiego Wybuchu

Supergromady galaktyk i wielkoskalowa struktura Wszechświata — włókna i pustki

Przyszłość i scenariusze ewolucji Wszechświata — Wielki Chłód i Wielkie Rozdarcie

Wielki Wybuch i ewolucja Wszechświata

Pojęcie deficytu masy — różnica masy nukleonów i jądra

Deficyt masy i energia wiązania jądra atomowego

Energia wiązania przypadająca na jeden nukleon ΔE/A

Wykres energii wiązania na nukleon w funkcji liczby masowej

Termodynamiczne uzasadnienie fuzji lekkich jąder

Termodynamiczne uzasadnienie rozszczepienia ciężkich jąder

Koncepcja deficytu masy i stabilność jąder atomowych

El modelo cinético de partículas en la materia

Fuerzas intermoleculares: cohesión y repulsión entre partículas

Estado sólido: forma y volumen definidos, redes rígidas

Estado líquido: volumen constante, fluidez y tensión superficial

Estado gaseoso: expansión, compresibilidad y caos molecular

El plasma: el cuarto estado de la materia en el universo

Cambios de estado progresivos: fusión, vaporización y sublimación

Cambios de estado regresivos: solidificación, condensación y deposición

Curvas de calentamiento y temperatura constante durante cambios de fase

El agua y su anomalía: densidad del hielo frente al agua líquida

Presión de vapor y ebullición según la altitud

Estados de agregación y fuerzas intermoleculares

Struktura Drogi Mlecznej — jądro, ramiona spiralne, dysk i halo

Położenie Układu Słonecznego w Galaktyce i rok galaktyczny

Supermasywna czarna dziura Sagittarius A* w centrum Drogi Mlecznej

Grupa Lokalna Galaktyk — Droga Mleczna, Andromeda (M31) i galaktyki satelitarne

Czas biegu światła w astronomii — patrzenie w przeszłość

Zadania rachunkowe z paralaksy i przeliczania odległości gwiazdowych

Zadania z ruchu obrotowego galaktyk i masy ukrytej

Trening zadań maturalnych z astronomii Układu Słonecznego i galaktyk

Podsumowanie i sprawdzian — skala kosmiczna i struktura galaktyk

Droga Mleczna i wielkoskalowa struktura Wszechświata

Odkrycie ucieczki galaktyk i obserwacje Edwina Hubble’a

Zjawisko Dopplera dla fal świetlnych i przesunięcie ku czerwieni (redshift)

Sformułowanie prawa Hubble’a: v = H₀ · r

Stała Hubble’a H₀ — wartość, jednostki (km/s)/Mpc i wymiar fizyczny 1/s

Obliczanie prędkości ucieczki galaktyk na podstawie odległości

Wyznaczanie odległości do odległych galaktyk z pomiaru redshiftu

Natura rozszerzania się przestrzeni a ruch własny galaktyk

Prawo Hubble’a i kinematyka rozszerzania się Wszechświata

Teoria Wielkiego Wybuchu (Big Bang) — początkowy stan osobliwy i ewolucja

Mikrofalowe promieniowanie tła (CBR) jako świadectwo gorącego początku

Pierwotna nukleosynteza i skład chemiczny wczesnego Wszechświata

Przyspieszona ekspansja Wszechświata i ciemna energia

Zadania rachunkowe ze stosowania prawa Hubble’a i jednostek kosmologicznych

Analiza wykresów Hubble’a — wyznaczanie stałej z nachylenia prostej

Trening zadań maturalnych z kosmologii i prawa Hubble’a

Podsumowanie i sprawdzian — kosmologia i prawo Hubble’a

Model Wielkiego Wybuchu i ewolucja Wszechświata

Modelos históricos del cosmos: geocéntrico frente a heliocéntrico

Newton y la ley de gravitación universal

¿Por qué la Luna no cae sobre la Tierra?: el concepto de órbita

Las leyes de Kepler y las órbitas elípticas de los planetas

Estructura y organización del sistema solar actual

El Sol: fuente de gravedad y energía del sistema planetario

Planetas interiores: Mercurio, Venus, Tierra y Marte

Planetas exteriores: Júpiter, Saturno, Urano y Neptuno

Lunas y fuerzas de marea: la interacción Tierra-Luna

Cometas, asteroides y meteoroides: viajeros del espacio

Satélites artificiales y sondas de exploración espacial

Gravitación, sistema solar y mecánica celeste

¿Qué es una estrella?: esferas de plasma en equilibrio hidrostático

Las nebulosas: cunas estelares de gas y polvo

Protoestrellas y el encendido de la fusión nuclear

La secuencia principal: la etapa adulta de estrellas como el Sol

Clasificación estelar por color, temperatura y brillo

Vejez de estrellas de masa baja: gigantes rojas y nebulosas planetarias

Enanas blancas y enanas negras: el destino final del Sol

Estrellas masivas: supergigantes y la fábrica de elementos

Supernovas: las explosiones más energéticas del cosmos

Estrellas de neutrones, púlsares y agujeros negros

"Somos polvo de estrellas": el origen cósmico de nuestros átomos

El ciclo de vida de las estrellas y el universo

Synteza termojądrowa — fuzja izotopów wodoru

Bariera kulombowska w fuzji jądrowej i rola temperatury

Tunelowanie kwantowe jako warunek fuzji w temperaturach gwiazdowych

Cykl protonowo-protonowy (p-p) — główny mechanizm fuzji w Słońcu

Cykl węglowo-azotowo-tlenowy (CNO) w masywnych gwiazdach

Neutrina słoneczne i ich znaczenie w badaniu wnętrza Słońca

Podstawy fuzji jądrowej i procesy termojądrowe w gwiazdach

Kryterium Lawsona — warunki samopodtrzymującej się fuzji na Ziemi

Magnetyczne utrzymanie plazmy — tokamak i stellarator

Projekt ITER — droga do energii z fuzji jądrowej

Laserowa fuzja inercyjna — doświadczenia w NIF

Porównanie energetyki rozszczepieniowej i termojądrowej

Obliczenia energii i masy paliwa w reakcjach fuzji D-T

Zadania maturalne z fuzji jądrowej i cykli gwiezdnych

Kontrolowana fuzja termojądrowa i energetyka przyszłości

Narodziny gwiazdy — zapaść grawitacyjna obłoku i protogwiazda

Ciąg główny na diagramie Hertzsprunga-Russella (H-R)

Ewolucja gwiazd o masie Słońca — czerwony olbrzym i biały karzeł

Granica Chandrasekhara — maksymalna masa białego karła

Zaawansowane etapy fuzji w masywnych gwiazdach — struktura cebulowa

Katastrofalna zapaść żelaznego rdzenia i eksplozja supernowej typu II

Supernowe typu Ia jako kosmologiczne świece standardowe

Gwiezdna nukleosynteza — procesy s i r (powstawanie ciężkich pierwiastków)

Ewolucja gwiazd, supernowe i nukleosynteza

Zastosowanie czujników cyfrowych i smartfonów w pomiarach ruchu harmonicznego

Opracowanie raportu laboratoryjnego z analizą niepewności i dyskusją błędów

Analiza zadań maturalnych z doświadczeń z wahadłem i sprężyną

Trening kompleksowy — zadania doświadczalno-rachunkowe z drgań i grawitacji

Podsumowanie i sprawdzian — doświadczalna fizyka drgań

Wielka synteza — grawitacja, astronomia i drgania harmoniczne

Nowoczesne techniki pomiarowe i zadania doświadczalne z drgań

Gwiazdy neutronowe i pulsary — materia zdegenerowana neutronowo

Powstawanie czarnych dziur — horyzont zdarzeń i promień Schwarzschilda

Osobliwość czasoprzestrzenna i dylatacja grawitacyjna wokół czarnej dziury

Obserwacyjne dowody istnienia czarnych dziur — fale grawitacyjne i zdjęcia EHT

Zderzenia gwiazd neutronowych — kilonowe i pochodzenie złota

Zadania maturalne z ewolucji gwiazd i obiektów zwartych

Obiekty zwarte: gwiazdy neutronowe i czarne dziury

OGS.8.ESS.6

OGS.8.ESS.6

Aligned learning resources

Related diagrams