<!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; -webkit-tap-highlight-color: transparent; }
    html, body {
      width: 100%;
      height: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      user-select: none;
    }
    .main-svg {
      width: 100%;
      max-width: 480px;
      height: auto;
      max-height: 96%;
      display: block;
    }
    .badge-btn {
      cursor: pointer;
      transition: filter 0.2s ease, opacity 0.2s ease;
    }
    .badge-btn:hover {
      filter: brightness(1.06);
    }
    .bone-group {
      cursor: pointer;
      transition: opacity 0.3s ease, filter 0.3s ease;
    }
    .bone-highlight {
      transition: stroke 0.3s ease, fill 0.3s ease, stroke-width 0.3s ease, filter 0.3s ease;
    }
    .leader-line {
      transition: stroke-dashoffset 0.4s ease, stroke 0.3s ease, opacity 0.3s ease;
    }
    .pulse-glow {
      animation: bonePulse 2s ease-in-out infinite;
    }
    @keyframes bonePulse {
      0%, 100% { filter: drop-shadow(0 0 2px currentColor); }
      50% { filter: drop-shadow(0 0 6px currentColor); }
    }
  </style>
</head>
<body>

  <svg class="main-svg" viewBox="0 0 460 390">
    <defs>
      
      <filter id="shadow" x="-10%" y="-10%" width="125%" height="125%">
        <feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000000" flood-opacity="0.08" />
      </filter>
      
      <filter id="activeGlow" x="-20%" y="-20%" width="140%" height="140%">
        <feGaussianBlur stdDeviation="3" result="blur" />
        <feComposite in="SourceGraphic" in2="blur" operator="over" />
      </filter>
    </defs>

    
    <g id="body-outline" opacity="0.85">
      
      <path d="M 230,22 C 248,22 258,34 258,54 C 258,74 246,84 238,87 L 238,96 L 268,104 C 286,110 292,126 290,146 L 286,200 L 283,230 C 282,236 287,244 285,250 C 283,254 278,252 277,246 L 273,205 L 268,145 C 265,134 256,132 250,135 L 250,195 C 250,212 256,230 256,242 L 254,300 C 253,322 252,342 254,364 L 257,369 C 258,374 250,377 245,376 C 240,375 237,370 237,362 L 234,310 L 232,258 L 230,250 L 228,258 L 226,310 L 223,362 C 223,370 220,375 215,376 C 210,377 202,374 203,369 L 206,364 C 208,342 207,322 206,300 L 204,242 C 204,230 210,212 210,195 L 210,135 C 204,132 195,134 192,145 L 187,205 L 183,246 C 182,252 177,254 175,250 C 173,244 178,236 177,230 L 174,200 L 170,146 C 168,126 174,110 192,104 L 222,96 L 222,87 C 214,84 202,74 202,54 C 202,34 212,22 230,22 Z" 
            fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1.5" stroke-linejoin="round" />
    </g>

    
    <g id="neutral-bones" stroke="#cbd5e1" stroke-width="2.5" stroke-linecap="round" fill="none">
      
      <path d="M 218,102 L 230,105 L 242,102 M 216,103 L 194,110 M 244,103 L 266,110" />
      
      <line x1="193" y1="112" x2="186" y2="155" />
      <circle cx="185" cy="158" r="2.5" fill="#cbd5e1" />
      <line x1="184" y1="162" x2="180" y2="202" />
      <line x1="180" y1="204" x2="179" y2="214" stroke-width="2" />

      <line x1="267" y1="112" x2="274" y2="155" />
      <circle cx="275" cy="158" r="2.5" fill="#cbd5e1" />
      <line x1="276" y1="162" x2="280" y2="202" />
      <line x1="280" y1="204" x2="281" y2="214" stroke-width="2" />

      
      <line x1="219" y1="240" x2="216" y2="295" stroke-width="3" />
      <circle cx="216" cy="298" r="3" fill="#cbd5e1" />
      <line x1="216" y1="302" x2="214" y2="352" stroke-width="2.8" />
      <path d="M 214,354 L 210,366" stroke-width="2" />

      <line x1="241" y1="240" x2="244" y2="295" stroke-width="3" />
      <circle cx="244" cy="298" r="3" fill="#cbd5e1" />
      <line x1="244" y1="302" x2="246" y2="352" stroke-width="2.8" />
      <path d="M 246,354 L 250,366" stroke-width="2" />
    </g>

    

    
    <g id="bone-skull" class="bone-group" onclick="selectBone('skull')">
      <ellipse cx="230" cy="48" rx="16" ry="17" fill="#fef08a" stroke="#ca8a04" stroke-width="2.2" class="bone-highlight" />
      
      <path d="M 220,56 C 220,67 224,70 230,70 C 236,70 240,67 240,56" fill="#fef08a" stroke="#ca8a04" stroke-width="2" class="bone-highlight" />
      
      <ellipse cx="224" cy="48" rx="2.5" ry="3.2" fill="#854d0e" opacity="0.75" />
      <ellipse cx="236" cy="48" rx="2.5" ry="3.2" fill="#854d0e" opacity="0.75" />
      <path d="M 229,54 L 230,52 L 231,54 Z" fill="#854d0e" opacity="0.75" />
      
      <line x1="225" y1="63" x2="235" y2="63" stroke="#854d0e" stroke-width="1.2" opacity="0.6" />
      
      <circle cx="230" cy="50" r="3.5" fill="#ca8a04" />
    </g>

    
    <g id="bone-spine" class="bone-group" onclick="selectBone('spine')">
      
      <path d="M 230,73 L 230,210" stroke="#16a34a" stroke-width="4.5" stroke-linecap="round" class="bone-highlight" />
      
      <g fill="#bbf7d0" stroke="#15803d" stroke-width="1.2">
        <rect x="226.5" y="78" width="7" height="4.5" rx="1.5" />
        <rect x="226.5" y="87" width="7" height="4.5" rx="1.5" />
        <rect x="226" y="96" width="8" height="4.5" rx="1.5" />
        <rect x="226" y="105" width="8" height="5" rx="1.5" />
        <rect x="226" y="115" width="8" height="5" rx="1.5" />
        <rect x="226" y="125" width="8" height="5" rx="1.5" />
        <rect x="226" y="135" width="8" height="5" rx="1.5" />
        <rect x="225.5" y="146" width="9" height="5.5" rx="1.5" />
        <rect x="225.5" y="157" width="9" height="5.5" rx="1.5" />
        <rect x="225" y="168" width="10" height="5.5" rx="1.5" />
        <rect x="225" y="179" width="10" height="5.5" rx="1.5" />
        <rect x="225" y="190" width="10" height="5.5" rx="1.5" />
        <rect x="225.5" y="201" width="9" height="5.5" rx="1.5" />
      </g>
      
      <circle cx="230" cy="170" r="3.5" fill="#15803d" />
    </g>

    
    <g id="bone-ribs" class="bone-group" onclick="selectBone('ribs')">
      
      <path d="M 230,108 L 230,146" stroke="#0891b2" stroke-width="3" stroke-linecap="round" />
      
      <g fill="none" stroke="#06b6d4" stroke-width="2.6" stroke-linecap="round" class="bone-highlight">
        <path d="M 230,112 C 216,110 210,118 214,127 C 218,134 227,133 230,132" />
        <path d="M 230,112 C 244,110 250,118 246,127 C 242,134 233,133 230,132" />

        <path d="M 230,119 C 212,117 206,127 212,138 C 217,146 226,144 230,143" />
        <path d="M 230,119 C 248,117 254,127 248,138 C 243,146 234,144 230,143" />

        <path d="M 230,127 C 211,126 206,138 212,149 C 218,157 227,154 230,152" />
        <path d="M 230,127 C 249,126 254,138 248,149 C 242,157 233,154 230,152" />

        <path d="M 230,135 C 213,137 209,149 216,159 C 222,164 228,160 230,158" />
        <path d="M 230,135 C 247,137 251,149 244,159 C 238,164 232,160 230,158" />
      </g>
      
      <circle cx="249" cy="136" r="3.5" fill="#0891b2" />
    </g>

    
    <g id="bone-pelvis" class="bone-group" onclick="selectBone('pelvis')">
      
      <path d="M 215,208 C 206,208 202,217 206,227 C 210,237 218,241 224,241 C 227,241 228,233 230,233 C 232,233 233,241 236,241 C 242,241 250,237 254,227 C 258,217 254,208 245,208 C 238,208 234,213 230,214 C 226,213 222,208 215,208 Z" 
            fill="#ffedd5" stroke="#ea580c" stroke-width="2.4" stroke-linejoin="round" class="bone-highlight" />
      
      <ellipse cx="218" cy="226" rx="4" ry="5.5" fill="#ffffff" stroke="#ea580c" stroke-width="1.5" />
      <ellipse cx="242" cy="226" rx="4" ry="5.5" fill="#ffffff" stroke="#ea580c" stroke-width="1.5" />
      <ellipse cx="230" cy="235" rx="3" ry="2" fill="#ffffff" stroke="#ea580c" stroke-width="1.2" />
      
      <circle cx="247" cy="218" r="3.5" fill="#ea580c" />
    </g>

    
    
    <path id="line-skull" class="leader-line" d="M 148,46 L 195,46 L 226,50" 
          fill="none" stroke="#ca8a04" stroke-width="1.8" stroke-dasharray="3,3" />

    
    <path id="line-ribs" class="leader-line" d="M 312,125 L 272,125 L 249,136" 
          fill="none" stroke="#0891b2" stroke-width="1.8" stroke-dasharray="3,3" />

    
    <path id="line-spine" class="leader-line" d="M 148,170 L 190,170 L 226,170" 
          fill="none" stroke="#16a34a" stroke-width="1.8" stroke-dasharray="3,3" />

    
    <path id="line-pelvis" class="leader-line" d="M 312,228 L 276,228 L 247,218" 
          fill="none" stroke="#ea580c" stroke-width="1.8" stroke-dasharray="3,3" />

    

    
    <g id="badge-skull" class="badge-btn" onclick="selectBone('skull')" filter="url(#shadow)">
      <rect x="12" y="24" width="136" height="44" rx="10" fill="#fefce8" stroke="#ca8a04" stroke-width="2" id="bg-skull" />
      <circle cx="28" cy="46" r="6" fill="#eab308" />
      <text x="40" y="40" font-size="12.5" font-weight="800" fill="#854d0e">Skull</text>
      <text x="40" y="55" font-size="10.5" font-weight="600" fill="#a16207">Protects Brain</text>
    </g>

    
    <g id="badge-ribs" class="badge-btn" onclick="selectBone('ribs')" filter="url(#shadow)">
      <rect x="312" y="103" width="136" height="44" rx="10" fill="#ecfeff" stroke="#0891b2" stroke-width="2" id="bg-ribs" />
      <circle cx="328" cy="125" r="6" fill="#06b6d4" />
      <text x="340" y="119" font-size="12.5" font-weight="800" fill="#155e75">Ribs</text>
      <text x="340" y="134" font-size="10" font-weight="600" fill="#0e7490">Protects Heart &amp; Lungs</text>
    </g>

    
    <g id="badge-spine" class="badge-btn" onclick="selectBone('spine')" filter="url(#shadow)">
      <rect x="12" y="148" width="136" height="44" rx="10" fill="#f0fdf4" stroke="#16a34a" stroke-width="2" id="bg-spine" />
      <circle cx="28" cy="170" r="6" fill="#22c55e" />
      <text x="40" y="164" font-size="12.5" font-weight="800" fill="#14532d">Spine</text>
      <text x="40" y="179" font-size="10.5" font-weight="600" fill="#15803d">Holds Body Straight</text>
    </g>

    
    <g id="badge-pelvis" class="badge-btn" onclick="selectBone('pelvis')" filter="url(#shadow)">
      <rect x="312" y="206" width="136" height="44" rx="10" fill="#fff7ed" stroke="#ea580c" stroke-width="2" id="bg-pelvis" />
      <circle cx="328" cy="228" r="6" fill="#f97316" />
      <text x="340" y="222" font-size="12.5" font-weight="800" fill="#7c2d12">Pelvis</text>
      <text x="340" y="237" font-size="10.5" font-weight="600" fill="#9a3412">Supports Upper Body</text>
    </g>
  </svg>

  <script>
    const bones = ['skull', 'ribs', 'spine', 'pelvis'];
    let currentSelected = null;

    function selectBone(name) {
      if (currentSelected === name) {
        // Toggle off back to all visible
        currentSelected = null;
        resetAll();
        return;
      }
      currentSelected = name;

      bones.forEach(b => {
        const boneEl = document.getElementById('bone-' + b);
        const badgeEl = document.getElementById('badge-' + b);
        const lineEl = document.getElementById('line-' + b);
        const bgRect = document.getElementById('bg-' + b);

        if (b === name) {
          boneEl.style.opacity = '1';
          boneEl.style.filter = 'url(#activeGlow)';
          badgeEl.style.opacity = '1';
          lineEl.style.opacity = '1';
          lineEl.style.strokeWidth = '2.5';
          lineEl.style.strokeDasharray = 'none';
          bgRect.style.strokeWidth = '3';
        } else {
          boneEl.style.opacity = '0.35';
          boneEl.style.filter = 'none';
          badgeEl.style.opacity = '0.45';
          lineEl.style.opacity = '0.2';
          lineEl.style.strokeWidth = '1.5';
          lineEl.style.strokeDasharray = '3,3';
          bgRect.style.strokeWidth = '1.5';
        }
      });
    }

    function resetAll() {
      bones.forEach(b => {
        const boneEl = document.getElementById('bone-' + b);
        const badgeEl = document.getElementById('badge-' + b);
        const lineEl = document.getElementById('line-' + b);
        const bgRect = document.getElementById('bg-' + b);

        boneEl.style.opacity = '1';
        boneEl.style.filter = 'none';
        badgeEl.style.opacity = '1';
        lineEl.style.opacity = '1';
        lineEl.style.strokeWidth = '1.8';
        lineEl.style.strokeDasharray = '3,3';
        bgRect.style.strokeWidth = '2';
      });
    }
  </script>
</body>
</html>

Skeletal System: Bones, Joints, and Internal Support

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

    body {
      width: 100%;
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .joints-grid {
      display: flex;
      flex-direction: row;
      gap: 16px;
      width: 100%;
      max-width: 620px;
    }

    @media (max-width: 480px) {
      .joints-grid {
        flex-direction: column;
        gap: 12px;
      }
    }

    .joint-panel {
      flex: 1;
      border-radius: 16px;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .hinge-panel {
      background: #f0fdf4;
      border: 2px solid #bbf7d0;
    }

    .ball-panel {
      background: #f0f9ff;
      border: 2px solid #bae6fd;
    }

    .joint-title {
      font-size: 17px;
      font-weight: 700;
      margin-bottom: 2px;
    }

    .hinge-panel .joint-title { color: #15803d; }
    .ball-panel .joint-title { color: #0369a1; }

    .joint-examples {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      margin-bottom: 8px;
    }

    .visual-stage {
      width: 100%;
      height: 180px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .joint-badge {
      margin-top: 6px;
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.2px;
    }

    .hinge-badge {
      background: #dcfce7;
      color: #166534;
      border: 1px solid #86efac;
    }

    .ball-badge {
      background: #e0f2fe;
      color: #075985;
      border: 1px solid #7dd3fc;
    }

    /* Hinge Animation */
    .hinge-moving-part {
      transform-origin: 100px 120px;
      animation: hingeSwing 3.2s ease-in-out infinite;
    }

    @keyframes hingeSwing {
      0%, 100% { transform: rotate(0deg); }
      50% { transform: rotate(-55deg); }
    }

    /* Ball & Socket Animation */
    .ball-moving-part {
      transform-origin: 100px 85px;
      animation: ballConical 3.6s ease-in-out infinite;
    }

    @keyframes ballConical {
      0% { transform: rotate(0deg) scaleX(1); }
      25% { transform: rotate(24deg) scaleX(0.95); }
      50% { transform: rotate(0deg) scaleX(1); }
      75% { transform: rotate(-24deg) scaleX(0.95); }
      100% { transform: rotate(0deg) scaleX(1); }
    }

    .ball-sphere {
      animation: sphereRoll 3.6s ease-in-out infinite;
      transform-origin: 100px 85px;
    }

    @keyframes sphereRoll {
      0% { transform: translate(0, 0); }
      25% { transform: translate(4px, -1px); }
      50% { transform: translate(0, 1px); }
      75% { transform: translate(-4px, -1px); }
      100% { transform: translate(0, 0); }
    }

    .pulse-ring {
      animation: ringPulse 3.6s ease-in-out infinite;
      transform-origin: 100px 85px;
    }

    @keyframes ringPulse {
      0%, 100% { opacity: 0.4; transform: scale(0.96); }
      50% { opacity: 0.9; transform: scale(1.04); }
    }
  </style>
</head>
<body>

  <div class="joints-grid">
    
    <div class="joint-panel hinge-panel">
      <div class="joint-title">Hinge Joint</div>
      <div class="joint-examples">Elbow & Knee</div>

      <div class="visual-stage">
        <svg viewBox="0 0 200 180" width="100%" height="100%">
          
          <path d="M 68 62 A 65 65 0 0 1 100 55" fill="none" stroke="#86efac" stroke-width="3" stroke-dasharray="4 4" />
          <path d="M 64 68 L 68 58 L 76 66" fill="none" stroke="#22c55e" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
          <path d="M 104 53 L 94 51 L 98 61" fill="none" stroke="#22c55e" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />

          
          <rect x="91" y="120" width="18" height="48" rx="9" fill="#86efac" />
          <rect x="88" y="152" width="24" height="14" rx="7" fill="#4ade80" />

          
          <g class="hinge-moving-part">
            <rect x="91" y="48" width="18" height="72" rx="9" fill="#4ade80" />
            <rect x="88" y="44" width="24" height="14" rx="7" fill="#22c55e" />
          </g>

          
          <circle cx="100" cy="120" r="14" fill="#15803d" />
          <circle cx="100" cy="120" r="6" fill="#ffffff" />
        </svg>
      </div>

      <div class="joint-badge hinge-badge">1 Direction ⇄</div>
    </div>

    
    <div class="joint-panel ball-panel">
      <div class="joint-title">Ball-and-Socket</div>
      <div class="joint-examples">Shoulder & Hip</div>

      <div class="visual-stage">
        <svg viewBox="0 0 200 180" width="100%" height="100%">
          
          <g class="pulse-ring">
            <ellipse cx="100" cy="85" rx="46" ry="18" fill="none" stroke="#38bdf8" stroke-width="2.5" stroke-dasharray="5 4" />
            <path d="M 144 82 L 148 88 L 141 91" fill="none" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M 56 88 L 52 82 L 59 79" fill="none" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
          </g>

          
          <path d="M 68 85 A 32 32 0 0 0 132 85 Z" fill="#7dd3fc" />
          <rect x="91" y="98" width="18" height="66" rx="9" fill="#bae6fd" />
          <rect x="88" y="150" width="24" height="14" rx="7" fill="#7dd3fc" />

          
          <g class="ball-moving-part">
            
            <rect x="91" y="16" width="18" height="65" rx="9" fill="#0284c7" />
            <rect x="88" y="14" width="24" height="14" rx="7" fill="#0369a1" />
            
            
            <circle class="ball-sphere" cx="100" cy="83" r="21" fill="#38bdf8" />
            <circle class="ball-sphere" cx="95" cy="78" r="6" fill="#e0f2fe" opacity="0.8" />
          </g>
        </svg>
      </div>

      <div class="joint-badge ball-badge">All Directions ⟲</div>
    </div>
  </div>

</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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      gap: 10px;
    }

    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 600px;
      flex: 1;
    }

    .char-card {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      position: relative;
      cursor: pointer;
      user-select: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .char-card:active {
      transform: translateY(1px);
    }

    .char-card.bones {
      background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
      border-color: #bae6fd;
    }

    .char-card.no-bones {
      background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
      border-color: #cbd5e1;
    }

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

    .badge {
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      text-align: center;
      line-height: 1.2;
    }

    .badge-bones {
      background: #0284c7;
      color: #ffffff;
    }

    .badge-no-bones {
      background: #64748b;
      color: #ffffff;
    }

    .sub-label {
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      margin-top: 2px;
      text-align: center;
    }

    .svg-stage {
      width: 100%;
      height: 150px;
      max-height: 170px;
    }

    /* Animation effects */
    .glow-pulse {
      animation: skeletonGlow 2.5s infinite ease-in-out;
    }

    @keyframes skeletonGlow {
      0%, 100% { filter: drop-shadow(0 0 2px #38bdf8); opacity: 0.95; }
      50% { filter: drop-shadow(0 0 6px #0284c7); opacity: 1; }
    }

    .wobble-blob {
      transform-origin: center bottom;
      animation: jellyWobble 3s infinite ease-in-out;
    }

    @keyframes jellyWobble {
      0%, 100% { transform: scale(1, 1); }
      35% { transform: scale(1.08, 0.92) translate(-2px, 2px); }
      70% { transform: scale(0.94, 1.04) translate(2px, -2px); }
    }

    /* Bottom 3 Jobs Banner */
    .jobs-banner {
      width: 100%;
      max-width: 600px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 6px;
    }

    .job-pill {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 4px 2px;
      border-radius: 8px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
    }

    .job-icon {
      font-size: 18px;
      line-height: 1;
      margin-bottom: 3px;
    }

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

    .job-desc {
      font-size: 10px;
      color: #64748b;
      font-weight: 500;
    }

    @media (max-width: 380px) {
      .svg-stage {
        height: 130px;
      }
      .badge {
        font-size: 11px;
      }
      .sub-label {
        font-size: 11px;
      }
      .job-title {
        font-size: 11px;
      }
      .job-desc {
        display: none;
      }
    }
  </style>
</head>
<body>

  
  <div class="comparison-grid">
    
    
    <div class="char-card bones active" id="cardBones" onclick="selectCard('bones')">
      <div class="badge badge-bones">With Bones</div>
      
      <svg class="svg-stage" viewBox="0 0 140 180">
        
        <g fill="#38bdf8" fill-opacity="0.22" stroke="#0284c7" stroke-width="1.5" stroke-opacity="0.4">
          
          <circle cx="70" cy="30" r="18" />
          
          <path d="M54,48 Q70,45 86,48 L88,105 Q70,108 52,105 Z" rx="6" />
          
          <path d="M52,50 L32,85 Q28,90 34,92 L50,60" stroke-linecap="round" />
          <path d="M88,50 L108,85 Q112,90 106,92 L90,60" stroke-linecap="round" />
          
          <path d="M55,104 L50,165 Q50,172 40,172 L60,172 L65,106" stroke-linecap="round" />
          <path d="M85,104 L90,165 Q90,172 100,172 L80,172 L75,106" stroke-linecap="round" />
        </g>

        
        <g class="glow-pulse" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none">
          
          <ellipse cx="70" cy="30" rx="9" ry="11" fill="#ffffff" stroke="#0284c7" stroke-width="1" />
          
          <circle cx="67" cy="28" r="1.5" fill="#0f172a" stroke="none" />
          <circle cx="73" cy="28" r="1.5" fill="#0f172a" stroke="none" />
          
          <line x1="70" y1="42" x2="70" y2="100" />
          
          <path d="M60,54 Q70,58 80,54" />
          <path d="M58,66 Q70,70 82,66" />
          <path d="M62,78 Q70,82 78,78" />
          
          <path d="M58,96 Q70,104 82,96" stroke-width="4" />
          
          <line x1="70" y1="48" x2="40" y2="85" />
          <line x1="70" y1="48" x2="100" y2="85" />
          
          <line x1="62" y1="100" x2="54" y2="168" />
          <line x1="78" y1="100" x2="86" y2="168" />
          
          <circle cx="40" cy="85" r="2.5" fill="#ffffff" />
          <circle cx="100" cy="85" r="2.5" fill="#ffffff" />
          <circle cx="58" cy="132" r="2" fill="#ffffff" />
          <circle cx="82" cy="132" r="2" fill="#ffffff" />
        </g>
        
        
        <path d="M66,35 Q70,38 74,35" stroke="#0284c7" stroke-width="1.5" fill="none" stroke-linecap="round" />
      </svg>

      <div class="sub-label">Strong &amp; Upright</div>
    </div>

    
    <div class="char-card no-bones" id="cardNoBones" onclick="selectCard('noBones')">
      <div class="badge badge-no-bones">Without Bones</div>
      
      <svg class="svg-stage" viewBox="0 0 140 180">
        
        <ellipse cx="70" cy="166" rx="55" ry="7" fill="#cbd5e1" opacity="0.6" />

        
        <g class="wobble-blob">
          
          <path d="M22,164 C18,145 32,130 50,132 C58,115 82,112 94,128 C112,126 122,142 118,164 C116,172 26,172 22,164 Z" 
                fill="#38bdf8" opacity="0.85" stroke="#0284c7" stroke-width="2" />
          
          
          <path d="M28,158 Q14,166 22,170 Q32,170 34,162 Z" fill="#38bdf8" />
          <path d="M112,158 Q126,166 118,170 Q108,170 106,162 Z" fill="#38bdf8" />

          
          <g transform="translate(68, 142) rotate(12)">
            
            <circle cx="-10" cy="-2" r="3.5" fill="#ffffff" stroke="#0284c7" stroke-width="1" />
            <circle cx="-10" cy="-1" r="1.5" fill="#0f172a" />
            
            <circle cx="10" cy="2" r="3.5" fill="#ffffff" stroke="#0284c7" stroke-width="1" />
            <circle cx="10" cy="3" r="1.5" fill="#0f172a" />
            
            
            <path d="M-6,8 Q0,4 6,10" stroke="#0284c7" stroke-width="2" fill="none" stroke-linecap="round" />
          </g>

          
          <path d="M42,142 Q52,136 64,138" stroke="#ffffff" stroke-width="3" stroke-linecap="round" fill="none" opacity="0.8" />
          <circle cx="98" cy="138" r="2.5" fill="#ffffff" opacity="0.8" />
        </g>
        
        
        <circle cx="48" cy="120" r="1.5" fill="#38bdf8" opacity="0.6" />
        <circle cx="92" cy="116" r="2" fill="#38bdf8" opacity="0.6" />
      </svg>

      <div class="sub-label">Floppy Blob!</div>
    </div>

  </div>

  
  <div class="jobs-banner">
    <div class="job-pill">
      <span class="job-icon">🏛️</span>
      <span class="job-title">Support</span>
      <span class="job-desc">Holds body up</span>
    </div>
    <div class="job-pill">
      <span class="job-icon">🛡️</span>
      <span class="job-title">Protection</span>
      <span class="job-desc">Guards organs</span>
    </div>
    <div class="job-pill">
      <span class="job-icon">👟</span>
      <span class="job-title">Movement</span>
      <span class="job-desc">Works with muscles</span>
    </div>
  </div>

  <script>
    function selectCard(type) {
      const cardBones = document.getElementById('cardBones');
      const cardNoBones = document.getElementById('cardNoBones');
      
      if (type === 'bones') {
        cardBones.classList.add('active');
        cardNoBones.classList.remove('active');
      } else {
        cardNoBones.classList.add('active');
        cardBones.classList.remove('active');
      }
    }
  </script>
</body>
</html>

Observing and Sorting Solids, Liquids, and Gases

Testing Hardness and Texture of Materials

Comparing Flexibility and Elasticity in Solids

Transparent, Translucent, and Opaque Materials

Measuring Mass, Volume, and Length Using Metric Units

Comparing Relative Temperatures with Thermometers

Building Structures from Standardized Blocks

Disassembling and Rebuilding Modular Objects

Designing a Useful Item from Reconfigurable Parts

science

Matter: Properties and Reconfigurable Structures

Building a Simple Physical Model to Test a Design

Designing and Building to Solve Problems

Evaluating Model Size, Scale, Properties, and Materials

Comparing Two Objects Using Numbers

Identifying the Best Features From Multiple Solutions

Sharing and Listening in Science Discussions

Scientists Who Changed the World

Engineering Design, Models, and Communication in Science

Reshaping Matter by Cutting, Folding, and Sanding

Twisting Materials to Change Their Shape

Heating Solids to Liquids in Melting Processes

Cooling Liquids to Solids in Freezing Processes

Evaporation and Boiling: Liquid to Gas Transitions

Condensation: Gas to Liquid on Cool Surfaces

Distinguishing Reversible and Irreversible Changes

Tracking Total Mass During Physical Transformations

Creating a State Change Diagram Model

Investigating Physical Changes and States of Matter

Zastosowania laserów w medycynie i chirurgii

Lasery w przemyśle i telekomunikacji — cięcie oraz światłowody

Czytniki kodów, skanery i dalmierze laserowe

Zasady bezpieczeństwa podczas pracy ze źródłami lasera

Analiza doświadczenia: porównanie pryzmatu ze światłem żarówki i lasera

Podsumowanie właściwości i zastosowań światła laserowego

Zastosowania laserów, bezpieczeństwo i analiza zjawisk optycznych

Proving Air Occupies Space and Has Mass

Investigating Warm Air Rising Convection Currents

Surface Tension and Water Droplet Formation

Buoyancy and Sinking Factors in Liquids

Testing Soluble and Insoluble Substances

Factors Influencing Dissolving Speed

Separating Mixtures by Settling and Filtration

Recovering Dissolved Solids Through Evaporation

Designing a Water Purification Filter System

Properties of Water, Air, and Dissolving

Identifying Push and Pull Contact Forces

How Force Strength Affects Speed and Distance

Changing Direction with Angled Pushes and Pulls

Investigating Friction Across Different Surfaces

Reducing Friction with Wheels and Lubricants

Exploring Gravity as a Downward Pulling Force

Collisions and Energy Transfer Between Moving Balls

Balanced and Unbalanced Forces at Rest and Motion

Engineering a Protective Bumper for Collisions

Forces, Pushes, Pulls, and Friction in Motion

Identifying Engineering Sub-Problems Within a System

What Is a Force? Push and Pull in Everyday Life

How Shape Helps Things Work: Structure and Function

How Water Cycles Through Earth's Systems

What Living Things Need: Energy, Gases, Water, Soil, and Temperature

Systems, Forces, Structure, and Living Things

Odczyt i interpretacja diagramów widma fal elektromagnetycznych

Obliczenia długości fali dla stacji radiowych i sieci komórkowych

Przenikanie fal elektromagnetycznych przez różne materiały

Okna przezroczystości atmosfery dla fal elektromagnetycznych

Analiza złożonych tabel parametrów fal elektromagnetycznych

Zagadnienia rachunkowe ze skali częstotliwości i jednostek prefiksowych (kHz, MHz, GHz, THz)

Podsumowanie struktury i właściwości widma elektromagnetycznego

Właściwości, przenikanie i analiza widma elektromagnetycznego

Fale radiowe — wytwarzanie oraz transmisja radiowa i telewizyjna

Fale długie, średnie i krótkie oraz rola jonosfery

Mikrofale w łączności bezprzewodowej — Wi-Fi, Bluetooth i telefonia komórkowa

Zasada działania kuchenki mikrofalowej — rezonans cząsteczek wody

Radary i nawigacja satelitarna GPS — wykorzystanie mikrofal

Fale radiowe i mikrofale w technologii i łączności

Identifying Mystery Objects from Property Clues

Sorting Materials by Texture and Flexibility

Is It a Solid or a Liquid?

How Physical Properties Determine How Matter Is Used

Sand and Water: Properties Stay the Same

Changing Shape by Cutting, Folding, and Sanding

Identifying Physical and Chemical Changes in Everyday Life

Using Evidence to Explain Matter Changes

Using Particle Models to Explain State Changes

Investigating State Changes with Particle Models

Matter: Properties, States, and Changes

Vibrations Make Sound: Tuning Forks and Drums

How Sound Travels Through Solids, Liquids, and Air

Building a String Telephone Communication Model

Pitch: How Fast Vibrations Make High Sounds

Volume: How Force and Amplitude Affect Loudness

Investigating Sound in Musical Wind Instruments

Sound Absorption and Echo Reflection

Hearing Safety and Ear Structure Basics

Crafting a Custom Multi-Pitch Percussion Instrument

Sound Energy: Vibrations, Pitch, and Volume

Combining Small Parts to Make New Objects

Choosing Materials for Their Physical Properties

Reassembling Parts for a Different Purpose

Planning What to Build and Choosing Parts

Building and Testing a New Object From Parts

Building New Things From Smaller Parts

Light Sources: Natural and Artificial Illuminators

Proving Light Travels in Straight Paths

Shadow Formation with Opaque and Translucent Objects

How Distance Changes Shadow Size and Sharpness

Reflecting Light Beams with Plane Mirrors

Bending Light: Refraction in Water and Prisms

Splitting White Light into Rainbow Spectra

Magnifying with Convex Hand Lenses

Building a Cardboard Shadow Theater Puppet Show

Light Energy: Shadows and Refraction

Promieniowanie podczerwone jako promieniowanie cieplne

Termowizja i kamery IR w budownictwie oraz medycynie

Piloty zdalnego sterowania i czujniki ruchu na podczerwień

Doświadczenie: wykrywanie podczerwieni za pomocą aparatu smartfona

Astronomia w podczerwieni — obserwacje kosmosu przez pył międzygwiezdny

Obliczenia czasu dotarcia sygnału radiowego od satelity do Ziemi

Porównanie właściwości fal radiowych, mikrofal i podczerwieni — tabela syntetyczna

Podsumowanie zastosowań fal radiowych, mikrofal i podczerwieni

Promieniowanie podczerwone i przegląd pasm fal

常用手工工具（剪刀、固体胶、直尺）的安全使用规范

设计与制作承重纸桥：平板桥与折叠拱桥

设计与制作旋转纸蜻蜓并测试下落旋转效果

制作转动小风车或不倒翁玩具

测试、展示与改进自己的小制作作品

简易工具使用与动手工程制作实践

Identifying Thermal Energy Sources and Friction Heat

Heat Flow from Hotter Objects to Cooler Objects

Observing Thermal Equilibrium in Mixed Water

Testing Thermal Conduction in Metal, Wood, and Plastic

Identifying Thermal Conductors in Everyday Cookware

Identifying Thermal Insulators in Kitchen and Clothing

Reducing Thermal Loss with Home Insulation Materials

Evaluating Insulation Data with Bar Graphs

Designing an Insulated Beverage Thermos Container

Heat Energy: Conduction and Insulation

Bieg promieni wychodzących z punktu świetlnego do zwierciadła płaskiego

Przedłużenia promieni odbitych i pojęcie obrazu pozornego

Konstrukcja obrazu punktu świetlnego w zwierciadle płaskim

Symetria zwierciadlana: położenie przedmiotu i obrazu

Konstrukcja obrazu przedmiotu rozciągłego w zwierciadle płaskim

Cechy obrazu wytworzonego przez zwierciadło płaskie

Pozorne odwracanie stron (prawo-lewo) w zwierciadle płaskim

Napis na karetkach pogotowia jako zastosowanie symetrii zwierciadlanej

Doświadczenie: Wyznaczanie położenia obrazu za pomocą półprzepuszczalnej szyby

Powstawanie i cechy obrazu w zwierciadle płaskim

Exploring Magnetic Attraction and Ferrous Metals

Magnetic Poles: Attraction and Repulsion Rules

Using Magnetic Compasses for Navigation

Exploring Static Electricity with Balloons and Wool

Building a Simple Complete Circuit with a Bulb

Open Circuits and the Function of Switches

Testing Electrical Conductors and Insulators

Electrical Safety Around Home Appliances and Water

Designing a Working Magnetic or Electric Game

Magnetism, Static Electricity, and Circuits

Pole widzenia w zwierciadle płaskim

Wpływ wymiarów zwierciadła na możliwość zobaczenia całej sylwetki

Wielokrotne odbicia w zwierciadłach ustawionych pod kątem

Zwierciadła równoległe i powstawanie nieskończonego ciągu obrazów

Kalejdoskop — symetria wielokrotnych odbić

Podsumowanie i zadania geometryczne: Zwierciadło płaskie

Pole widzenia i wielokrotne odbicia w zwierciadłach płaskich

Promieniowanie rentgenowskie (promienie X) — odkrycie i właściwości

Diagnostyka rentgenowska i tomografia komputerowa (RTG i CT)

Kontrola bezpieczeństwa na lotniskach i defektoskopia z użyciem promieni X

Promieniowanie gamma — źródła jądrowe i ekstremalna energia

Zastosowania promieniowania gamma — radioterapia, nóż gamma i sterylizacja

Ochrona radiologiczna — osłony ołowiowe i betonowe przed promieniami X i gamma

Analiza złożonych tekstów źródłowych o zastosowaniach promieniowania elektromagnetycznego

Wielka tabela zbiorcza wszystkich rodzajów fal elektromagnetycznych

Podsumowanie i sprawdzian wiedzy o falach elektromagnetycznych oraz ich zastosowaniach

OGS.3.SEP.4

Aligned learning resources

Related diagrams