<!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;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px 8px;
    }

    .split-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 660px;
    }

    @media (max-width: 480px) {
      .split-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }

    .panel {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    .panel-title {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -0.2px;
      margin-bottom: 2px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .title-down { color: #0284c7; }
    .title-up { color: #dc2626; }

    .ratio-badge {
      font-size: 12px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 20px;
      margin-bottom: 8px;
    }
    .badge-down { background: #e0f2fe; color: #0369a1; }
    .badge-up { background: #fee2e2; color: #b91c1c; }

    .stage {
      width: 100%;
      height: 180px;
      background: #ffffff;
      border: 1px solid #edf2f7;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .measures {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 8px;
      padding: 0 4px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
    }

    .meas-val {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
    }

    .arrow-icon {
      color: #94a3b8;
      font-size: 14px;
    }

    /* Wind tunnel stream animation */
    .streamline {
      stroke-dasharray: 12 8;
      animation: windFlow 1.8s linear infinite;
    }
    @keyframes windFlow {
      from { stroke-dashoffset: 40; }
      to { stroke-dashoffset: 0; }
    }

    /* Cell pulse/scale animation */
    .cell-glow {
      animation: cellPulse 3s ease-in-out infinite alternate;
    }
    @keyframes cellPulse {
      0% { transform: scale(0.98); }
      100% { transform: scale(1.02); }
    }
  </style>
</head>
<body>

  <div class="split-grid">
    
    <div class="panel">
      <div class="panel-title title-down">
        <span>↓</span> Scale Down
      </div>
      <div class="ratio-badge badge-down">1 : 100</div>

      <div class="stage">
        <svg viewBox="0 0 280 180" width="100%" height="100%">
          <defs>
            
            <linearGradient id="tunnelGrad" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="#f1f5f9"/>
              <stop offset="50%" stop-color="#ffffff"/>
              <stop offset="100%" stop-color="#f1f5f9"/>
            </linearGradient>
            
            <linearGradient id="ghostGrad" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stop-color="#94a3b8" stop-opacity="0.35"/>
              <stop offset="100%" stop-color="#cbd5e1" stop-opacity="0.15"/>
            </linearGradient>
          </defs>

          
          <rect x="15" y="25" width="250" height="130" rx="8" fill="url(#tunnelGrad)" stroke="#cbd5e1" stroke-width="1.5"/>
          <line x1="15" y1="35" x2="265" y2="35" stroke="#e2e8f0" stroke-width="1"/>
          <line x1="15" y1="145" x2="265" y2="145" stroke="#e2e8f0" stroke-width="1"/>

          
          <g transform="translate(140, 90) scale(1.2)" opacity="0.45">
            
            <ellipse cx="0" cy="0" rx="90" ry="14" fill="none" stroke="#64748b" stroke-width="1.5" stroke-dasharray="4 3"/>
            
            <polygon points="-15,-5 25,-65 45,-65 5,-5" fill="none" stroke="#64748b" stroke-width="1.5" stroke-dasharray="4 3"/>
            <polygon points="-15,5 25,65 45,65 5,5" fill="none" stroke="#64748b" stroke-width="1.5" stroke-dasharray="4 3"/>
            
            <polygon points="-75,-2 -60,-32 -48,-32 -68,-2" fill="none" stroke="#64748b" stroke-width="1.5" stroke-dasharray="4 3"/>
          </g>

          
          <g stroke="#0284c7" stroke-width="1.5" fill="none" opacity="0.75">
            <path class="streamline" d="M 25 50 C 90 50, 115 65, 140 65 C 170 65, 200 50, 255 50" />
            <path class="streamline" d="M 25 72 C 100 72, 120 80, 140 80 C 165 80, 195 72, 255 72" />
            <path class="streamline" d="M 25 90 L 115 90" />
            <path class="streamline" d="M 165 90 L 255 90" />
            <path class="streamline" d="M 25 108 C 100 108, 120 100, 140 100 C 165 100, 195 108, 255 108" />
            <path class="streamline" d="M 25 130 C 90 130, 115 115, 140 115 C 170 115, 200 130, 255 130" />
          </g>

          
          <rect x="138" y="90" width="4" height="45" fill="#64748b" rx="1"/>
          <ellipse cx="140" cy="135" rx="12" ry="4" fill="#94a3b8"/>

          
          <g transform="translate(140, 90)">
            
            <polygon points="-4,-2 6,-22 13,-22 2,-2" fill="#0284c7"/>
            <polygon points="-4,2 6,22 13,22 2,2" fill="#0284c7"/>
            
            <polygon points="-20,-1 -16,-11 -12,-11 -18,-1" fill="#0369a1"/>
            
            <ellipse cx="0" cy="0" rx="24" ry="4.5" fill="#0ea5e9"/>
            <ellipse cx="16" cy="0" rx="6" ry="3.5" fill="#38bdf8"/>
          </g>
        </svg>
      </div>

      <div class="measures">
        <div>Real: <span class="meas-val">70 m</span></div>
        <span class="arrow-icon">➔</span>
        <div>Model: <span class="meas-val">70 cm</span></div>
      </div>
    </div>

    
    <div class="panel">
      <div class="panel-title title-up">
        <span>↑</span> Scale Up
      </div>
      <div class="ratio-badge badge-up">10,000 ×</div>

      <div class="stage">
        <svg viewBox="0 0 280 180" width="100%" height="100%">
          <defs>
            
            <radialGradient id="rbcGrad" cx="40%" cy="35%" r="60%">
              <stop offset="0%" stop-color="#f87171"/>
              <stop offset="50%" stop-color="#ef4444"/>
              <stop offset="85%" stop-color="#b91c1c"/>
              <stop offset="100%" stop-color="#7f1d1d"/>
            </radialGradient>
            
            <radialGradient id="dimpleGrad" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stop-color="#991b1b"/>
              <stop offset="70%" stop-color="#dc2626"/>
              <stop offset="100%" stop-color="#ef4444" stop-opacity="0"/>
            </radialGradient>
          </defs>

          
          <g transform="translate(50, 90)">
            <circle cx="0" cy="0" r="32" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1.5"/>
            
            <line x1="-32" y1="0" x2="32" y2="0" stroke="#e2e8f0" stroke-width="1"/>
            <line x1="0" y1="-32" x2="0" y2="32" stroke="#e2e8f0" stroke-width="1"/>
            
            <circle cx="0" cy="0" r="2" fill="#ef4444"/>
            <circle cx="0" cy="0" r="6" fill="none" stroke="#ef4444" stroke-width="1" stroke-dasharray="2 2" opacity="0.8"/>
          </g>

          
          <polygon points="54,82 135,45 135,135 54,98" fill="#fee2e2" opacity="0.4"/>
          <line x1="52" y1="84" x2="135" y2="45" stroke="#fca5a5" stroke-width="1" stroke-dasharray="3 3"/>
          <line x1="52" y1="96" x2="135" y2="135" stroke="#fca5a5" stroke-width="1" stroke-dasharray="3 3"/>

          
          <g class="cell-glow" transform="translate(195, 90)">
            
            <ellipse cx="0" cy="0" rx="58" ry="46" fill="url(#rbcGrad)"/>
            
            <ellipse cx="0" cy="0" rx="28" ry="20" fill="url(#dimpleGrad)"/>
            
            <path d="M -35 -20 A 42 30 0 0 1 25 -32" fill="none" stroke="#fca5a5" stroke-width="2.5" stroke-linecap="round" opacity="0.6"/>

            
            <g stroke="#1e2945" stroke-width="1">
              <line x1="38" y1="-28" x2="52" y2="-40"/>
              <circle cx="54" cy="-42" r="3.5" fill="#3b82f6" stroke="#1e2945" stroke-width="1"/>

              <line x1="-35" y1="28" x2="-48" y2="40"/>
              <circle cx="-50" cy="42" r="3.5" fill="#10b981" stroke="#1e2945" stroke-width="1"/>

              <line x1="42" y1="20" x2="55" y2="30"/>
              <circle cx="57" cy="32" r="3.5" fill="#f59e0b" stroke="#1e2945" stroke-width="1"/>
            </g>
          </g>
        </svg>
      </div>

      <div class="measures">
        <div>Real: <span class="meas-val">7 µm</span></div>
        <span class="arrow-icon">➔</span>
        <div>Model: <span class="meas-val">7 cm</span></div>
      </div>
    </div>
  </div>

</body>
</html>

Using Models to Represent Systems and Processes

<!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">
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      width: 100%;
      height: 100%;
      background: #f8fafc;
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      user-select: none;
    }

    .app {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 10px;
      gap: 8px;
    }

    /* Controls bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
      z-index: 10;
    }

    .btn-step {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 4px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: all 0.25s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }

    .btn-step .num {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #e2e8f0;
      color: #475569;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
    }

    .btn-step.active {
      border-color: #0284c7;
      color: #0284c7;
      background: #f0f9ff;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
    }

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

    .play-btn {
      background: #0f172a;
      color: #ffffff;
      border: none;
      border-radius: 50%;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }

    /* Stage graphic */
    .stage-wrapper {
      position: relative;
      flex: 1;
      width: 100%;
      min-height: 0;
      border-radius: 12px;
      overflow: hidden;
      background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 55%, #7dd3fc 75%, #38bdf8 100%);
    }

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

    /* Interactive element styling */
    .step-group {
      transition: opacity 0.4s ease, filter 0.4s ease;
      cursor: pointer;
    }

    .step-group:not(.active) {
      opacity: 0.35;
      filter: grayscale(0.5);
    }

    .step-group.active {
      opacity: 1;
      filter: drop-shadow(0 2px 6px rgba(2, 132, 199, 0.35));
    }

    /* Water ripple & flow */
    @keyframes riseVapor {
      0% { transform: translateY(0); opacity: 0.2; }
      50% { opacity: 0.9; }
      100% { transform: translateY(-30px); opacity: 0.1; }
    }

    .vapor-line {
      stroke-dasharray: 6 4;
      animation: riseVapor 2s linear infinite;
    }

    @keyframes rainFall {
      0% { transform: translateY(-10px); opacity: 0; }
      50% { opacity: 1; }
      100% { transform: translateY(24px); opacity: 0; }
    }

    .raindrop {
      animation: rainFall 1.2s linear infinite;
    }
    .raindrop:nth-child(2) { animation-delay: 0.3s; }
    .raindrop:nth-child(3) { animation-delay: 0.6s; }
    .raindrop:nth-child(4) { animation-delay: 0.9s; }

    @keyframes pulseSun {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.06); }
    }

    .sun-glow {
      transform-origin: 90px 75px;
      animation: pulseSun 3s ease-in-out infinite;
    }

    @keyframes flowRunoff {
      0% { stroke-dashoffset: 24; }
      100% { stroke-dashoffset: 0; }
    }

    .flow-line {
      stroke-dasharray: 6 4;
      animation: flowRunoff 1.5s linear infinite;
    }

    .callout-badge {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      fill: #ffffff;
    }

    .badge-bg {
      filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.15));
    }
  </style>
</head>
<body>
  <div class="app">
    
    <div class="controls">
      <button class="play-btn" id="playToggle" title="Play/Pause">⏸</button>
      <button class="btn-step active" data-step="0">
        <span class="num">1</span> Evaporation
      </button>
      <button class="btn-step" data-step="1">
        <span class="num">2</span> Condensation
      </button>
      <button class="btn-step" data-step="2">
        <span class="num">3</span> Precipitation
      </button>
      <button class="btn-step" data-step="3">
        <span class="num">4</span> Collection
      </button>
    </div>

    
    <div class="stage-wrapper">
      <svg viewBox="0 0 600 420" preserveAspectRatio="xMidYMid meet">
        <defs>
          <linearGradient id="oceanGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#0284c7" />
            <stop offset="100%" stop-color="#0369a1" />
          </linearGradient>
          <linearGradient id="mountainGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#94a3b8" />
            <stop offset="50%" stop-color="#64748b" />
            <stop offset="100%" stop-color="#475569" />
          </linearGradient>
          <linearGradient id="landGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#86efac" />
            <stop offset="60%" stop-color="#22c55e" />
            <stop offset="100%" stop-color="#15803d" />
          </linearGradient>
          <linearGradient id="sunGrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#fef08a" />
            <stop offset="100%" stop-color="#f59e0b" />
          </linearGradient>
          <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
            <feDropShadow dx="0" dy="3" stdDeviation="3" flood-opacity="0.12"/>
          </filter>
        </defs>

        
        
        <polygon points="340,320 460,150 560,320" fill="url(#mountainGrad)" />
        <polygon points="460,150 490,195 470,205 450,195 430,205" fill="#f8fafc" />
        <polygon points="440,320 530,170 620,320" fill="#475569" opacity="0.8" />
        <polygon points="530,170 555,205 540,212 525,205 510,212" fill="#f8fafc" />

        
        <path d="M260,320 Q380,260 600,310 L600,370 L260,370 Z" fill="url(#landGrad)" />

        
        <path d="M0,300 C90,295 180,305 280,320 L280,420 L0,420 Z" fill="url(#oceanGrad)" />
        
        
        <path d="M20,320 Q50,315 80,320" stroke="#bae6fd" stroke-width="2" fill="none" stroke-linecap="round" />
        <path d="M120,335 Q150,330 180,335" stroke="#bae6fd" stroke-width="2" fill="none" stroke-linecap="round" />
        <path d="M40,355 Q80,350 120,355" stroke="#7dd3fc" stroke-width="2" fill="none" stroke-linecap="round" />

        
        <g class="sun-glow">
          <circle cx="90" cy="75" r="42" fill="#fed7aa" opacity="0.4" />
          <circle cx="90" cy="75" r="32" fill="#fde047" opacity="0.7" />
          <circle cx="90" cy="75" r="24" fill="url(#sunGrad)" filter="url(#shadow)" />
          
          <line x1="90" y1="36" x2="90" y2="24" stroke="#f59e0b" stroke-width="3" stroke-linecap="round" />
          <line x1="90" y1="114" x2="90" y2="126" stroke="#f59e0b" stroke-width="3" stroke-linecap="round" />
          <line x1="51" y1="75" x2="39" y2="75" stroke="#f59e0b" stroke-width="3" stroke-linecap="round" />
          <line x1="129" y1="75" x2="141" y2="75" stroke="#f59e0b" stroke-width="3" stroke-linecap="round" />
          <line x1="62" y1="47" x2="53" y2="38" stroke="#f59e0b" stroke-width="3" stroke-linecap="round" />
          <line x1="118" y1="103" x2="127" y2="112" stroke="#f59e0b" stroke-width="3" stroke-linecap="round" />
          <line x1="62" y1="103" x2="53" y2="112" stroke="#f59e0b" stroke-width="3" stroke-linecap="round" />
          <line x1="118" y1="47" x2="127" y2="38" stroke="#f59e0b" stroke-width="3" stroke-linecap="round" />
        </g>

        
        <g class="step-group active" id="step0" onclick="setStep(0)">
          
          <g transform="translate(130, 230)">
            <path class="vapor-line" d="M0,50 Q-10,25 0,0" stroke="#0284c7" stroke-width="3" fill="none" stroke-linecap="round" />
            <polygon points="0,-4 -4,4 4,4" fill="#0284c7" />
          </g>
          <g transform="translate(160, 215)">
            <path class="vapor-line" d="M0,55 Q10,30 0,0" stroke="#0284c7" stroke-width="3.5" fill="none" stroke-linecap="round" style="animation-delay: 0.4s;" />
            <polygon points="0,-4 -4,4 4,4" fill="#0284c7" />
          </g>
          <g transform="translate(190, 235)">
            <path class="vapor-line" d="M0,50 Q-10,25 0,0" stroke="#0284c7" stroke-width="3" fill="none" stroke-linecap="round" style="animation-delay: 0.8s;" />
            <polygon points="0,-4 -4,4 4,4" fill="#0284c7" />
          </g>

          
          <g transform="translate(115, 260)">
            <rect class="badge-bg" x="0" y="0" width="105" height="24" rx="12" fill="#0284c7" />
            <circle cx="12" cy="12" r="8" fill="#ffffff" />
            <text x="12" y="15.5" font-size="10" font-weight="800" fill="#0284c7" text-anchor="middle">1</text>
            <text class="callout-badge" x="25" y="16">Evaporation</text>
          </g>
        </g>

        
        <g class="step-group" id="step1" onclick="setStep(1)">
          
          <g transform="translate(290, 85)" filter="url(#shadow)">
            <path d="M20,40 Q10,40 10,30 Q10,18 24,18 Q28,6 42,6 Q56,6 62,16 Q75,14 80,25 Q88,27 86,38 Q86,40 76,40 Z" fill="#ffffff" />
            <circle cx="45" cy="22" r="18" fill="#ffffff" />
            <circle cx="65" cy="28" r="14" fill="#f1f5f9" />
          </g>
          <g transform="translate(340, 65)" filter="url(#shadow)">
            <path d="M20,45 Q8,45 8,32 Q8,16 26,16 Q32,4 48,4 Q64,4 70,16 Q85,15 90,28 Q98,30 96,44 Q96,45 84,45 Z" fill="#ffffff" />
            <circle cx="48" cy="24" r="22" fill="#ffffff" />
            <circle cx="72" cy="30" r="16" fill="#f8fafc" />
          </g>

          
          <g transform="translate(295, 40)">
            <rect class="badge-bg" x="0" y="0" width="118" height="24" rx="12" fill="#0284c7" />
            <circle cx="12" cy="12" r="8" fill="#ffffff" />
            <text x="12" y="15.5" font-size="10" font-weight="800" fill="#0284c7" text-anchor="middle">2</text>
            <text class="callout-badge" x="25" y="16">Condensation</text>
          </g>
        </g>

        
        <g class="step-group" id="step2" onclick="setStep(2)">
          
          <g stroke="#0284c7" stroke-width="2.5" stroke-linecap="round">
            <line class="raindrop" x1="390" y1="125" x2="385" y2="140" />
            <line class="raindrop" x1="410" y1="130" x2="405" y2="145" />
            <line class="raindrop" x1="430" y1="125" x2="425" y2="140" />
            <line class="raindrop" x1="450" y1="132" x2="445" y2="147" />
            
            <line class="raindrop" x1="395" y1="155" x2="390" y2="170" />
            <line class="raindrop" x1="420" y1="160" x2="415" y2="175" />
            <line class="raindrop" x1="440" y1="155" x2="435" y2="170" />
          </g>

          
          <g transform="translate(425, 115)">
            <rect class="badge-bg" x="0" y="0" width="114" height="24" rx="12" fill="#0284c7" />
            <circle cx="12" cy="12" r="8" fill="#ffffff" />
            <text x="12" y="15.5" font-size="10" font-weight="800" fill="#0284c7" text-anchor="middle">3</text>
            <text class="callout-badge" x="25" y="16">Precipitation</text>
          </g>
        </g>

        
        <g class="step-group" id="step3" onclick="setStep(3)">
          
          <path d="M470,240 Q410,270 330,305 Q280,325 210,335" 
                stroke="#0284c7" stroke-width="5" fill="none" stroke-linecap="round" />
          
          <path class="flow-line" d="M470,240 Q410,270 330,305 Q280,325 210,335" 
                stroke="#e0f2fe" stroke-width="2" fill="none" stroke-linecap="round" />
          
          
          <polygon points="206,336 218,330 216,342" fill="#0284c7" />

          
          <g transform="translate(305, 345)">
            <rect class="badge-bg" x="0" y="0" width="94" height="24" rx="12" fill="#0284c7" />
            <circle cx="12" cy="12" r="8" fill="#ffffff" />
            <text x="12" y="15.5" font-size="10" font-weight="800" fill="#0284c7" text-anchor="middle">4</text>
            <text class="callout-badge" x="25" y="16">Collection</text>
          </g>
        </g>

      </svg>
    </div>
  </div>

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

    const stepButtons = document.querySelectorAll('.btn-step');
    const stepGroups = [
      document.getElementById('step0'),
      document.getElementById('step1'),
      document.getElementById('step2'),
      document.getElementById('step3')
    ];
    const playToggleBtn = document.getElementById('playToggle');

    function updateView() {
      stepButtons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === currentStep);
      });
      stepGroups.forEach((grp, idx) => {
        grp.classList.toggle('active', idx === currentStep);
      });
    }

    function setStep(index) {
      currentStep = index;
      updateView();
      if (isPlaying) {
        resetTimer();
      }
    }

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

    function startLoop() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 2500);
      isPlaying = true;
      playToggleBtn.textContent = '⏸';
    }

    function pauseLoop() {
      if (timer) clearInterval(timer);
      timer = null;
      isPlaying = false;
      playToggleBtn.textContent = '▶';
    }

    function resetTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 2500);
    }

    playToggleBtn.addEventListener('click', () => {
      if (isPlaying) {
        pauseLoop();
      } else {
        startLoop();
      }
    });

    stepButtons.forEach((btn) => {
      btn.addEventListener('click', () => {
        const step = parseInt(btn.getAttribute('data-step'), 10);
        setStep(step);
      });
    });

    // Start 4-step loop (2.5s per step = 10s calm cycle)
    startLoop();
  </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;
      background: #ffffff;
      color: #1e2945;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      height: 100%;
      user-select: none;
      -webkit-user-select: none;
    }

    .chamber {
      position: relative;
      flex: 1;
      min-height: 120px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      overflow: hidden;
    }

    .badge {
      position: absolute;
      top: 8px;
      left: 10px;
      z-index: 2;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.2px;
      padding: 3px 8px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      pointer-events: none;
    }

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

    .badge-hot {
      color: #ea580c;
      border: 1px solid #fed7aa;
      transition: color 0.2s, border-color 0.2s;
    }

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

    .control-panel {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 12px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
    }

    .ctrl-label {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      white-space: nowrap;
    }

    .slider-wrap {
      flex: 1;
      display: flex;
      align-items: center;
    }

    input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 8px;
      border-radius: 4px;
      background: linear-gradient(to right, #3b82f6, #f59e0b, #ea580c);
      outline: none;
      cursor: pointer;
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #ffffff;
      border: 2.5px solid #ea580c;
      box-shadow: 0 1px 4px rgba(0,0,0,0.25);
      cursor: pointer;
      transition: border-color 0.15s;
    }

    input[type="range"]::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #ffffff;
      border: 2.5px solid #ea580c;
      box-shadow: 0 1px 4px rgba(0,0,0,0.25);
      cursor: pointer;
    }
  </style>
</head>
<body>

  <div class="chamber">
    <div class="badge badge-cold">Cold Gas (Slow)</div>
    <canvas id="coldCanvas"></canvas>
  </div>

  <div class="chamber">
    <div class="badge badge-hot" id="hotBadge">Hot Gas (Fast)</div>
    <canvas id="hotCanvas"></canvas>
  </div>

  <div class="control-panel">
    <span class="ctrl-label">❄️ Low</span>
    <div class="slider-wrap">
      <input type="range" id="tempSlider" min="0.1" max="1" step="0.01" value="0.95" aria-label="Temperature slider">
    </div>
    <span class="ctrl-label">🔥 High</span>
  </div>

  <script>
    const coldCanvas = document.getElementById('coldCanvas');
    const hotCanvas = document.getElementById('hotCanvas');
    const ctxCold = coldCanvas.getContext('2d');
    const ctxHot = hotCanvas.getContext('2d');
    const slider = document.getElementById('tempSlider');
    const hotBadge = document.getElementById('hotBadge');

    const PARTICLE_COUNT = 10;
    const RADIUS = 6;

    class ChamberSim {
      constructor(canvas, ctx, isVariable = false) {
        this.canvas = canvas;
        this.ctx = ctx;
        this.isVariable = isVariable;
        this.particles = [];
        this.width = 0;
        this.height = 0;
        this.initParticles();
      }

      initParticles() {
        this.particles = [];
        for (let i = 0; i < PARTICLE_COUNT; i++) {
          const angle = Math.random() * Math.PI * 2;
          this.particles.push({
            x: 20 + Math.random() * 200,
            y: 20 + Math.random() * 80,
            dirX: Math.cos(angle),
            dirY: Math.sin(angle)
          });
        }
      }

      resize() {
        const dpr = window.devicePixelRatio || 1;
        const rect = this.canvas.getBoundingClientRect();
        this.width = rect.width;
        this.height = rect.height;
        this.canvas.width = rect.width * dpr;
        this.canvas.height = rect.height * dpr;
        this.ctx.scale(dpr, dpr);

        // Keep particles in bounds after resize
        for (const p of this.particles) {
          p.x = Math.max(RADIUS, Math.min(this.width - RADIUS, p.x));
          p.y = Math.max(RADIUS, Math.min(this.height - RADIUS, p.y));
        }

        // Fill background initially
        this.ctx.fillStyle = '#f8fafc';
        this.ctx.fillRect(0, 0, this.width, this.height);
      }

      update(speedVal, color) {
        // Semi-transparent overlay to produce motion trails
        const fadeAlpha = this.isVariable ? (0.2 + (1 - speedVal / 5) * 0.25) : 0.45;
        this.ctx.fillStyle = `rgba(248, 250, 252, ${fadeAlpha})`;
        this.ctx.fillRect(0, 0, this.width, this.height);

        for (const p of this.particles) {
          p.x += p.dirX * speedVal;
          p.y += p.dirY * speedVal;

          // Wall bounces
          if (p.x <= RADIUS) {
            p.x = RADIUS;
            p.dirX *= -1;
          } else if (p.x >= this.width - RADIUS) {
            p.x = this.width - RADIUS;
            p.dirX *= -1;
          }

          if (p.y <= RADIUS) {
            p.y = RADIUS;
            p.dirY *= -1;
          } else if (p.y >= this.height - RADIUS) {
            p.y = this.height - RADIUS;
            p.dirY *= -1;
          }

          // Draw particle
          this.ctx.beginPath();
          this.ctx.arc(p.x, p.y, RADIUS, 0, Math.PI * 2);
          this.ctx.fillStyle = color;
          this.ctx.fill();
        }
      }
    }

    const coldSim = new ChamberSim(coldCanvas, ctxCold, false);
    const hotSim = new ChamberSim(hotCanvas, ctxHot, true);

    function getInterpolatedColor(t) {
      // 0.0 -> Cool Blue (37, 99, 235)
      // 0.5 -> Amber (245, 158, 11)
      // 1.0 -> Hot Orange (234, 88, 12)
      let r, g, b;
      if (t < 0.5) {
        const k = t / 0.5;
        r = Math.round(37 + (245 - 37) * k);
        g = Math.round(99 + (158 - 99) * k);
        b = Math.round(235 + (11 - 235) * k);
      } else {
        const k = (t - 0.5) / 0.5;
        r = Math.round(245 + (234 - 245) * k);
        g = Math.round(158 + (88 - 158) * k);
        b = Math.round(11 + (12 - 11) * k);
      }
      return `rgb(${r}, ${g}, ${b})`;
    }

    function handleResize() {
      coldSim.resize();
      hotSim.resize();
    }

    window.addEventListener('resize', handleResize);
    handleResize();

    function animate() {
      const tempFactor = parseFloat(slider.value);
      const hotSpeed = 0.4 + tempFactor * 4.4;
      const hotColor = getInterpolatedColor(tempFactor);

      // Update badge styling and text
      hotBadge.style.color = hotColor;
      hotBadge.style.borderColor = hotColor;
      if (tempFactor > 0.7) {
        hotBadge.textContent = 'Hot Gas (Fast)';
      } else if (tempFactor < 0.35) {
        hotBadge.textContent = 'Cold Gas (Slow)';
      } else {
        hotBadge.textContent = 'Warm Gas (Medium)';
      }

      slider.style.setProperty('--thumb-color', hotColor);

      // Render cold sim (constant slow blue)
      coldSim.update(0.45, '#2563eb');

      // Render bottom sim (temperature variable)
      hotSim.update(hotSpeed, hotColor);

      requestAnimationFrame(animate);
    }

    animate();
  </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;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      min-height: 100%;
    }

    .title-row {
      text-align: center;
    }

    .title {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: #0f172a;
    }

    .subtitle {
      font-size: 11px;
      color: #64748b;
      margin-top: 1px;
    }

    .matrix-wrapper {
      position: relative;
      width: 100%;
      max-width: 440px;
      aspect-ratio: 1 / 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 8px;
    }

    .tile {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      cursor: pointer;
      position: relative;
      transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
      user-select: none;
    }

    .tile:hover {
      background: #f1f5f9;
    }

    .tile-icon {
      font-size: 26px;
      margin-bottom: 4px;
      line-height: 1;
    }

    .tile-label {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.03em;
      line-height: 1.2;
    }

    .tile-sub {
      font-size: 11px;
      color: #64748b;
      font-weight: 500;
      margin-top: 2px;
    }

    /* Quadrant specific accents */
    .tile-large {
      border-top: 4px solid #4f46e5;
    }
    .tile-large .tile-label { color: #4f46e5; }
    .tile-large.active {
      border-color: #4f46e5;
      background: #eef2ff;
      box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
    }

    .tile-fast {
      border-top: 4px solid #d97706;
    }
    .tile-fast .tile-label { color: #d97706; }
    .tile-fast.active {
      border-color: #d97706;
      background: #fffbeb;
      box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18);
    }

    .tile-small {
      border-top: 4px solid #0891b2;
    }
    .tile-small .tile-label { color: #0891b2; }
    .tile-small.active {
      border-color: #0891b2;
      background: #ecfeff;
      box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.18);
    }

    .tile-slow {
      border-top: 4px solid #059669;
    }
    .tile-slow .tile-label { color: #059669; }
    .tile-slow.active {
      border-color: #059669;
      background: #ecfdf5;
      box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.18);
    }

    /* Center Badge */
    .center-badge {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 82px;
      height: 82px;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
      z-index: 10;
      pointer-events: none;
      text-align: center;
      padding: 4px;
    }

    .center-icon {
      font-size: 16px;
      line-height: 1;
      margin-bottom: 2px;
    }

    .center-text {
      font-size: 8.5px;
      font-weight: 700;
      color: #475569;
      line-height: 1.1;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    /* Details Panel */
    .info-panel {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 6px 12px;
      align-items: baseline;
      font-size: 12px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    }

    .info-label {
      font-weight: 700;
      color: #64748b;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .info-val {
      color: #0f172a;
      font-weight: 500;
      line-height: 1.35;
    }

    .info-solution {
      font-weight: 700;
    }

    @media (max-width: 380px) {
      body { padding: 8px; gap: 8px; }
      .matrix-wrapper { max-width: 320px; }
      .center-badge { width: 72px; height: 72px; }
      .center-text { font-size: 7.5px; }
      .tile-label { font-size: 12px; }
      .tile-sub { font-size: 10px; }
      .tile-icon { font-size: 22px; }
      .info-panel { font-size: 11px; padding: 8px 10px; }
    }
  </style>
</head>
<body>

  <div class="title-row">
    <div class="title">Limits of Direct Observation</div>
    <div class="subtitle">Tap a quadrant to see why scientists build models</div>
  </div>

  <div class="matrix-wrapper">
    
    <div class="tile tile-large active" id="tile-0" tabindex="0" role="button" aria-label="Too Large">
      <div class="tile-icon">🌌</div>
      <div class="tile-label">TOO LARGE</div>
      <div class="tile-sub">Space & Galaxies</div>
    </div>

    
    <div class="tile tile-fast" id="tile-1" tabindex="0" role="button" aria-label="Too Fast">
      <div class="tile-icon">⚡</div>
      <div class="tile-label">TOO FAST</div>
      <div class="tile-sub">Bonds & Lightning</div>
    </div>

    
    <div class="tile tile-small" id="tile-2" tabindex="0" role="button" aria-label="Too Small">
      <div class="tile-icon">🧬</div>
      <div class="tile-label">TOO SMALL</div>
      <div class="tile-sub">DNA & Atoms</div>
    </div>

    
    <div class="tile tile-slow" id="tile-3" tabindex="0" role="button" aria-label="Too Slow">
      <div class="tile-icon">🏔️</div>
      <div class="tile-label">TOO SLOW</div>
      <div class="tile-sub">Tectonics & Erosion</div>
    </div>

    
    <div class="center-badge">
      <div class="center-icon">👁️</div>
      <div class="center-text">Human<br>Direct<br>Window</div>
    </div>
  </div>

  
  <div class="info-panel" id="infoPanel">
    <div class="info-label">Limit:</div>
    <div class="info-val" id="textLimit">Exceeds field of view and human physical scale</div>

    <div class="info-label">Example:</div>
    <div class="info-val" id="textExample">Solar System, Milky Way galaxy, universe expansion</div>

    <div class="info-label">Model:</div>
    <div class="info-val info-solution" id="textModel" style="color: #4f46e5;">Physical scale globes & orbital digital maps</div>
  </div>

  <script>
    const data = [
      {
        limit: "Exceeds human field of view & physical reach",
        example: "Solar System & Milky Way Galaxy",
        model: "Physical scale models & orbital 3D maps",
        color: "#4f46e5"
      },
      {
        limit: "Faster than retinal persistence (~0.05 s)",
        example: "Lightning discharge (0.0002 s) & bond cleavage",
        model: "High-speed digital models & slow-motion simulations",
        color: "#d97706"
      },
      {
        limit: "Smaller than visible light wavelengths (<400 nm)",
        example: "DNA double helix & atomic bonds",
        model: "3D molecular models & ball-and-stick simulations",
        color: "#0891b2"
      },
      {
        limit: "Too gradual to detect in a human lifetime",
        example: "Continental drift & mountain uplift",
        model: "Time-lapse computations & plate tectonic simulations",
        color: "#059669"
      }
    ];

    const tiles = [
      document.getElementById('tile-0'),
      document.getElementById('tile-1'),
      document.getElementById('tile-2'),
      document.getElementById('tile-3')
    ];

    const textLimit = document.getElementById('textLimit');
    const textExample = document.getElementById('textExample');
    const textModel = document.getElementById('textModel');

    function selectQuadrant(index) {
      tiles.forEach((tile, i) => {
        if (i === index) {
          tile.classList.add('active');
        } else {
          tile.classList.remove('active');
        }
      });

      const item = data[index];
      textLimit.textContent = item.limit;
      textExample.textContent = item.example;
      textModel.textContent = item.model;
      textModel.style.color = item.color;
    }

    tiles.forEach((tile, index) => {
      tile.addEventListener('click', () => selectQuadrant(index));
      tile.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          selectQuadrant(index);
        }
      });
    });
  </script>
</body>
</html>

Using Celsius Thermometers for Temperature Measurement

Using Digital Scales to Measure Mass

Comparing Temperatures of Different Objects

Comparing Mass of Different Objects

Comparing Relative Density of Objects

Sink or Float: Testing Objects in Water

Predicting Sink or Float Based on Material

Using Tree Maps to Classify Data

Identifying Mystery Objects from Property Clues

science

Measuring and Classifying Matter by Mass, Temperature, and Density

Weather vs. Climate: What Is the Difference?

Identifying Weather Patterns Over Weeks

Temperature Trends Across the Seasons

What Causes Wind? Air Pressure Differences

How the Sun's Heating Creates Weather

Cloud Types and What They Predict

The Water Cycle as a Connected System

Evaporation and Condensation in Nature

Precipitation Patterns in Different Regions

Weather Patterns and the Water Cycle

Collecting Data from Force Investigations

Using Spring Scales to Measure Force

Using Timing Devices: Stopwatches and Timers

Investigating Energy Transfer During Collisions

Recording and Graphing Motion Data

Finding Patterns in Force and Motion Data

Building Models to Explain Motion and Energy

Forces, Motion, and Energy Transfer

How Oceans Influence Inland Weather

Using Barometers to Predict Weather

Reading Isobars on Weather Maps

What Causes Thunderstorms?

Extreme Weather and Stability

Weather Instruments and Their Functions

How Human Activities Affect Climate

Designing a Weather Pattern Investigation

Weather Systems: Review and Connections

Forecasting Weather, Severe Events, and Climate

Comparing Thermal Conductors and Insulators

Comparing Electrical Conductors and Insulators

Materials That Conduct Both Heat and Electricity

Identifying Physical State: Solid, Liquid, or Gas

Investigating Magnetic Properties of Everyday Objects

Investigating Conductors, Insulators, States, and Magnetism

Recognizing Mixtures and Their Components

Observing Solids Mixed in Liquids

Observing Liquids Mixed in Liquids

Comparing How Different Solids Dissolve in Water

Comparing Properties Before and After Mixing

Separating Mixtures Using Screens and Filters

Identifying Solutions Among Different Mixtures

Using Venn Diagrams to Compare in Science

Identifying the Best Features From Multiple Solutions

Explaining What Happens When Materials Are Combined

Investigating Mixtures and Solutions

Using Safety Equipment During Investigations

Exploring How Heat Moves Between Objects

Testing Thermal Conductors and Insulators

Graphing Temperature Changes Over Time

Designing a Thermal Insulation Solution

Thermal Energy and Heat Transfer

What Is Weathering? Breaking Down Rocks

Physical Weathering: Ice, Plants, and Roots

Chemical Weathering: Acids and Water

What Is Erosion? Moving Sediment

Water Erosion: Rivers and Streams

Wind Erosion and Dust Storms

Glacier Erosion: Ice on the Move

Deposition: Where Sediment Lands

Weathering, Erosion, and Deposition

Exploring Circuit Components and How They Work

Sorting Materials by Electrical Conductivity

Representing Circuits with Scientific Diagrams

Investigating Switches in Circuits

Evaluating Circuit Designs with Criteria

Communicating Circuit Design Solutions

Electricity and Circuits

Identifying Pushes and Pulls as Forces

How Forces Change the Motion of Objects

Exploring Gravity as a Pulling Force

Testing How Friction Affects Rolling Objects

Magnetic Forces at a Distance

Exploring Magnetic Attraction and Repulsion

Using Magnets in Scientific Investigations

Comparing Contact and Noncontact Forces

Investigating Forces, Friction, and Magnets

Slow Changes vs. Rapid Changes on Earth

Landslides: What Causes Sudden Collapse?

Volcanic Eruptions: Rapid Surface Change

Earthquakes and Sudden Land Changes

Rapid Changes to Earth's Surface

Building Physical Models of Physical and Mechanical Systems

Diagramming Living Systems and Biological Cycles

Modeling Earth and Space Systems at Appropriate Scales

Evaluating Scale and Proportions in Scientific Models

Analyzing Inherent Limitations and Simplifications of Models

Scientific Models, Scale, and System Limitations

Using Input-Output Tables for Cause and Effect

Designing a Force Investigation with Ramps

Evaluating Model Size, Scale, Properties, and Materials

Communicating Findings from Force Investigations

Designing and Communicating Force Investigations

Scale of Geological Change: Millions of Years

Comparing Canyons and Deltas at Different Scales

Modeling Erosion With a Stream Table

How Humans Reduce or Cause Erosion

Scale, Modeling, and Human Impact on Earth's Surface

Investigating Water Waves and Sound Waves

Using Hand Lenses for Close Observation

Exploring How Light Bounces Off Surfaces

Modeling How Light Travels and Interacts

Designing an Experiment with Light or Sound

Waves and Light

Observing How Rocks Break Down Over Time

Investigating Erosion with a Stream Model

Exploring How Soil Forms and Supports Life

Analyzing Soil Samples from Different Locations

Identifying Earth's Natural Resources

Evaluating Human Impact on Land and Water

Designing Solutions to Reduce Erosion

Earth's Surface: Weathering, Erosion, and Resources

Recognizing Forms of Energy Around Us

Tracing Energy Through Everyday Systems

How Heat Moves from Warm to Cool Objects

Observing Temperature Changes During Heat Transfer

Exploring Sound Waves and Vibration

How Pitch and Volume Relate to Sound Energy

Exploring How Light Travels and Bounces

Using Mirrors to Explore Light Reflection

Sound Traveling Through Solids and Liquids

Designing an Investigation with Light or Sound

Energy, Heat, and Waves

What Is Soil Made Of?

How Soil Forms From Weathered Rock

Layers of Soil: Horizons Explained

Sand, Silt, and Clay: Comparing Particle Sizes

Testing Soil Permeability: How Fast Water Flows

Soil Color and What It Tells Us

Comparing Soil From Different Environments

Why Soil Matters for Plant Growth

Properties and Formation of Soil

Identifying Rocks and Minerals by Properties

How Weathering Breaks Down Rocks

How Erosion Moves Sediment

Creating a Stream Model to Test Erosion

Fossils as Evidence of Past Life

Earth's Surface: Rocks, Weathering, and Fossils

Fossils: Clues to Past Environments

How Fossils Form in Sediment

Comparing Fossils to Living Organisms

Investigating Soil Properties in the Field

Fossils and Earth Evidence

What Makes Electricity Useful?

Parts of a Circuit as a System

Energy Source: The Role of Batteries

Wires as Pathways for Electrical Energy

Switches: Controlling Energy Flow

Light Bulbs as Energy Transformers

Tracing Energy Through a Circuit System

Open and Closed Circuits: Stability

How Circuit Design Affects Output

Basic Circuits and Energy Flow

Observing Organisms in Terrariums and Aquariums

Identifying Traits Organisms Inherit vs. Learn

Investigating How Adaptations Help Animals Survive

Building Models of Organism Life Cycles

Analyzing How Environment Influences Adaptations

Communicating Findings About Organism Trait Investigations

Organisms: Traits, Adaptations, and Life Cycles

Recognizing Patterns in Moon Phases

Building a Model of Day and Night

How Seasons Change Throughout the Year

Collecting Temperature Data Throughout the Year

Collecting Daylight Data Throughout the Year

How Water Cycles Through Earth's Systems

Sudden Changes to Earth's Surface

Patterns in Space and Earth's Changing Systems

Conductors in Circuits: Why Some Materials Work

Insulators: Why They Block Electricity

Comparing Conductors and Insulators by Function

Safety With Circuits: Structure Prevents Harm

Conductors, Insulators, and Circuit Safety

Identifying Living and Nonliving Parts of Ecosystems

Tracing Energy from Sun to Producers to Consumers

Connecting Food Chains into Food Webs

Ecosystems and Energy Flow

How Organisms Adapt to Their Environment

Structure and Function in Animals

Observing Life Cycles of Organisms

How Traits Are Passed from Parent to Offspring

How Organisms Interact in Ecosystems

Using Collecting Nets for Field Sampling

Adaptations, Heredity, and Organism Interactions

Energy Transformation in a Flashlight System

Series Circuits: How Parts Depend on Each Other

Series Circuits and Engineering Design

OGS.5.SEP.4

Aligned learning resources

Related diagrams