<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: transparent;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 10px 8px;
      user-select: none;
      min-height: 100%;
    }

    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 10px;
      justify-content: center;
      width: 100%;
    }

    .btn-toggle {
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      color: #334155;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }

    .btn-toggle:hover {
      background: #e2e8f0;
    }

    .btn-toggle.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }

    .columns-container {
      display: flex;
      width: 100%;
      max-width: 480px;
      gap: 10px;
      justify-content: center;
    }

    .test-column {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #f8fafc;
      border-radius: 10px;
      padding: 10px 6px;
      border: 1px solid #e2e8f0;
    }

    .col-title {
      font-size: 13px;
      font-weight: 700;
      color: #1e293b;
      text-align: center;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
    }

    .stage-svg {
      width: 100%;
      max-width: 160px;
      height: 155px;
      display: block;
    }

    /* Beam & Weight Transitions */
    .beam-thin {
      transition: d 0.35s ease, stroke 0.35s ease;
      stroke: #94a3b8;
      stroke-width: 4.5;
      fill: none;
      stroke-linecap: round;
    }

    .weight-group {
      transition: transform 0.35s ease, opacity 0.35s ease;
    }

    .force-arrow {
      transition: opacity 0.3s ease;
      opacity: 0;
    }

    /* Loaded state styles */
    .loaded .beam-thin {
      stroke: #ef4444;
    }

    .loaded .weight-left {
      transform: translateY(14px) rotate(-3.5deg);
    }

    .loaded .force-arrow {
      opacity: 1;
    }

    /* Unloaded state */
    .unloaded .weight-group {
      opacity: 0;
      transform: translateY(-16px);
    }

    .tag {
      margin-top: 6px;
      width: 100%;
      font-size: 11px;
      font-weight: 700;
      padding: 5px 6px;
      border-radius: 6px;
      text-align: center;
      line-height: 1.25;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 38px;
    }

    .tag-sub {
      font-weight: 500;
      font-size: 10px;
      opacity: 0.9;
      margin-top: 1px;
    }

    .tag-fail {
      background: #fee2e2;
      color: #b91c1c;
      border: 1px solid #fecaca;
    }

    .tag-success {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #bbf7d0;
    }

    .tag-neutral {
      background: #f1f5f9;
      color: #64748b;
      border: 1px solid #e2e8f0;
    }

    @media (max-width: 360px) {
      .columns-container {
        gap: 6px;
      }
      .test-column {
        padding: 8px 4px;
      }
      .col-title {
        font-size: 12px;
      }
      .tag {
        font-size: 10px;
        padding: 4px 2px;
      }
      .tag-sub {
        font-size: 9px;
      }
      .btn-toggle {
        padding: 5px 10px;
        font-size: 11px;
      }
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn-toggle active" id="btnApply" onclick="setLoad(true)">
      <span>⬇ Apply 5 kg Load</span>
    </button>
    <button class="btn-toggle" id="btnUnload" onclick="setLoad(false)">
      <span>No Load</span>
    </button>
  </div>

  
  <div class="columns-container loaded" id="testContainer">

    
    <div class="test-column">
      <div class="col-title">Thin Plastic</div>
      
      <svg class="stage-svg" viewBox="0 0 120 155">
        
        <rect x="20" y="138" width="80" height="7" rx="2" fill="#64748b" />
        <line x1="15" y1="145" x2="105" y2="145" stroke="#94a3b8" stroke-width="1.5" />

        
        <path id="leftBeam" class="beam-thin" d="M 60 52 C 28 78, 92 108, 60 138" />

        
        <g class="weight-group weight-left" transform="translate(60, 38)">
          <rect x="-24" y="-12" width="48" height="20" rx="3" fill="#475569" stroke="#334155" stroke-width="1.5"/>
          <text x="0" y="2" fill="#ffffff" font-size="10" font-weight="bold" text-anchor="middle" dominant-baseline="central">5 kg</text>
        </g>

        
        <g class="force-arrow" transform="translate(60, 6)">
          <line x1="0" y1="0" x2="0" y2="14" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" />
          <polygon points="0,18 -3.5,12 3.5,12" fill="#ef4444" />
        </g>
      </svg>

      <div class="tag tag-fail" id="leftTag">
        <span>Low Rigidity</span>
        <span class="tag-sub">Collapses under weight</span>
      </div>
    </div>

    
    <div class="test-column">
      <div class="col-title">Rigid Beam</div>
      
      <svg class="stage-svg" viewBox="0 0 120 155">
        
        <rect x="20" y="138" width="80" height="7" rx="2" fill="#64748b" />
        <line x1="15" y1="145" x2="105" y2="145" stroke="#94a3b8" stroke-width="1.5" />

        
        <rect x="52" y="38" width="16" height="100" rx="2" fill="#d97706" stroke="#b45309" stroke-width="1.5" />
        <line x1="57" y1="38" x2="57" y2="138" stroke="#fef3c7" stroke-width="1.2" stroke-opacity="0.7" />
        <line x1="63" y1="38" x2="63" y2="138" stroke="#78350f" stroke-width="1.2" stroke-opacity="0.5" />

        
        <g class="weight-group" transform="translate(60, 28)">
          <rect x="-24" y="-12" width="48" height="20" rx="3" fill="#475569" stroke="#334155" stroke-width="1.5"/>
          <text x="0" y="2" fill="#ffffff" font-size="10" font-weight="bold" text-anchor="middle" dominant-baseline="central">5 kg</text>
        </g>

        
        <g class="force-arrow" transform="translate(60, 6)">
          <line x1="0" y1="0" x2="0" y2="14" stroke="#10b981" stroke-width="2.5" stroke-linecap="round" />
          <polygon points="0,18 -3.5,12 3.5,12" fill="#10b981" />
        </g>
      </svg>

      <div class="tag tag-success" id="rightTag">
        <span>High Rigidity</span>
        <span class="tag-sub">Safely supports load</span>
      </div>
    </div>

  </div>

  <script>
    const container = document.getElementById('testContainer');
    const leftBeam = document.getElementById('leftBeam');
    const btnApply = document.getElementById('btnApply');
    const btnUnload = document.getElementById('btnUnload');
    const leftTag = document.getElementById('leftTag');
    const rightTag = document.getElementById('rightTag');

    const PATH_STRAIGHT = "M 60 38 L 60 138";
    const PATH_BUCKLED  = "M 60 52 C 28 78, 92 108, 60 138";

    function setLoad(isLoaded) {
      if (isLoaded) {
        container.classList.remove('unloaded');
        container.classList.add('loaded');
        leftBeam.setAttribute('d', PATH_BUCKLED);
        btnApply.classList.add('active');
        btnUnload.classList.remove('active');

        leftTag.className = 'tag tag-fail';
        leftTag.innerHTML = '<span>Low Rigidity</span><span class="tag-sub">Collapses under weight</span>';

        rightTag.className = 'tag tag-success';
        rightTag.innerHTML = '<span>High Rigidity</span><span class="tag-sub">Safely supports load</span>';
      } else {
        container.classList.remove('loaded');
        container.classList.add('unloaded');
        leftBeam.setAttribute('d', PATH_STRAIGHT);
        btnApply.classList.remove('active');
        btnUnload.classList.add('active');

        leftTag.className = 'tag tag-neutral';
        leftTag.innerHTML = '<span>Unloaded</span><span class="tag-sub">Original upright form</span>';

        rightTag.className = 'tag tag-neutral';
        rightTag.innerHTML = '<span>Unloaded</span><span class="tag-sub">Original upright form</span>';
      }
    }
  </script>
</body>
</html>

Choosing the Best Material for an Outdoor Playhouse

<!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>Impact Test: Glass vs Acrylic</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    .header-title {
      font-size: 15px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #475569;
      margin-bottom: 12px;
    }

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

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

    .panel-title {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 8px;
      color: #1e2945;
    }

    .viewport {
      width: 100%;
      height: 180px;
      position: relative;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      overflow: hidden;
    }

    /* Window Frame */
    .frame {
      position: absolute;
      right: 28%;
      top: 15px;
      bottom: 15px;
      width: 12px;
      background: #64748b;
      border-radius: 3px;
      z-index: 10;
    }

    /* Glass Pane */
    .pane-glass {
      position: absolute;
      right: 32%;
      top: 18px;
      bottom: 18px;
      width: 6px;
      background: rgba(186, 230, 253, 0.7);
      border: 1px solid #7dd3fc;
      border-radius: 2px;
      transition: opacity 0.1s;
    }

    /* Acrylic Pane */
    .pane-acrylic {
      position: absolute;
      right: 32%;
      top: 18px;
      bottom: 18px;
      width: 6px;
      background: rgba(199, 210, 254, 0.7);
      border: 1px solid #a5b4fc;
      border-radius: 2px;
      transform-origin: center;
      transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Cracks SVG overlay */
    .crack-overlay {
      position: absolute;
      right: 18%;
      top: 15px;
      bottom: 15px;
      width: 45%;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.05s;
    }

    /* Shards flying */
    .shards {
      position: absolute;
      right: 25%;
      top: 30%;
      width: 40px;
      height: 70px;
      pointer-events: none;
      opacity: 0;
    }
    .shard {
      position: absolute;
      background: rgba(186, 230, 253, 0.9);
      border: 1px solid #0284c7;
      clip-path: polygon(50% 0%, 0% 100%, 100% 80%);
    }
    .s1 { width: 14px; height: 16px; top: 10px; left: 5px; }
    .s2 { width: 12px; height: 18px; top: 35px; left: 18px; clip-path: polygon(20% 0%, 100% 30%, 60% 100%, 0% 80%); }
    .s3 { width: 16px; height: 12px; top: 48px; left: -2px; }

    /* Red Ball */
    .ball {
      position: absolute;
      top: 50%;
      left: 10%;
      width: 24px;
      height: 24px;
      background: radial-gradient(circle at 30% 30%, #ff6b6b, #dc2626);
      border-radius: 50%;
      box-shadow: 0 3px 6px rgba(0,0,0,0.25);
      transform: translateY(-50%);
    }

    /* Badges */
    .badge {
      margin-top: 10px;
      padding: 6px 10px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 700;
      text-align: center;
      width: 100%;
      min-height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: translateY(4px);
      transition: all 0.3s ease;
    }

    .badge-danger {
      background: #fee2e2;
      color: #b91c1c;
      border: 1px solid #f87171;
    }

    .badge-safe {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #4ade80;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 12px;
    }

    .btn {
      background: #2563eb;
      color: #ffffff;
      border: none;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    .btn:active {
      background: #1d4ed8;
    }

    /* Animation States */
    /* Glass animation timeline */
    .animating .ball-glass {
      animation: flyImpactGlass 4s infinite cubic-bezier(0.25, 1, 0.5, 1);
    }
    .animating .pane-glass {
      animation: shatterGlass 4s infinite;
    }
    .animating .crack-overlay {
      animation: showCracks 4s infinite;
    }
    .animating .shards {
      animation: burstShards 4s infinite;
    }
    .animating .badge-danger {
      animation: showBadgeDanger 4s infinite;
    }

    /* Acrylic animation timeline */
    .animating .ball-acrylic {
      animation: flyBounceAcrylic 4s infinite ease-out;
    }
    .animating .pane-acrylic {
      animation: flexAcrylic 4s infinite ease-in-out;
    }
    .animating .badge-safe {
      animation: showBadgeSafe 4s infinite;
    }

    @keyframes flyImpactGlass {
      0% { left: 8%; opacity: 1; }
      22% { left: 56%; opacity: 1; }
      30%, 90% { left: 56%; opacity: 0.9; }
      96%, 100% { left: 8%; opacity: 0; }
    }

    @keyframes shatterGlass {
      0%, 21% { opacity: 1; }
      22%, 90% { opacity: 0; }
      96%, 100% { opacity: 1; }
    }

    @keyframes showCracks {
      0%, 21% { opacity: 0; transform: scale(0.9); }
      22%, 90% { opacity: 1; transform: scale(1); }
      96%, 100% { opacity: 0; }
    }

    @keyframes burstShards {
      0%, 21% { opacity: 0; transform: translate(0, 0); }
      24% { opacity: 1; }
      40%, 90% { opacity: 0.8; transform: translate(12px, 20px) rotate(25deg); }
      96%, 100% { opacity: 0; transform: translate(0, 0); }
    }

    @keyframes flyBounceAcrylic {
      0% { left: 8%; }
      22% { left: 56%; }
      45%, 90% { left: 14%; }
      96%, 100% { left: 8%; }
    }

    @keyframes flexAcrylic {
      0%, 20% { transform: scaleX(1) skewX(0deg); }
      24% { transform: scaleX(2.5) skewX(-14deg) translateX(4px); }
      32% { transform: scaleX(1) skewX(4deg) translateX(-1px); }
      40%, 100% { transform: scaleX(1) skewX(0deg); }
    }

    @keyframes showBadgeDanger {
      0%, 22% { opacity: 0; transform: translateY(4px); }
      26%, 90% { opacity: 1; transform: translateY(0); }
      96%, 100% { opacity: 0; transform: translateY(4px); }
    }

    @keyframes showBadgeSafe {
      0%, 22% { opacity: 0; transform: translateY(4px); }
      26%, 90% { opacity: 1; transform: translateY(0); }
      96%, 100% { opacity: 0; transform: translateY(4px); }
    }
  </style>
</head>
<body>

  <div class="header-title">Ball Impact Test</div>

  <div class="test-stage animating" id="stage">
    
    
    <div class="panel">
      <div class="panel-title">Window Glass</div>
      <div class="viewport">
        <div class="pane-glass"></div>
        <svg class="crack-overlay" viewBox="0 0 100 150">
          <path d="M50,75 L20,30 M50,75 L15,110 M50,75 L80,20 M50,75 L85,120 M50,75 L45,5 M50,75 L55,145 M20,30 L5,20 M15,110 L5,140 M80,20 L95,10 M85,120 L95,140" 
                stroke="#0284c7" stroke-width="2.5" fill="none" stroke-linecap="round"/>
          <path d="M35,52 L65,47 L68,98 L32,92 Z" stroke="#38bdf8" stroke-width="1.5" fill="none"/>
        </svg>
        <div class="shards">
          <div class="shard s1"></div>
          <div class="shard s2"></div>
          <div class="shard s3"></div>
        </div>
        <div class="frame"></div>
        <div class="ball ball-glass"></div>
      </div>
      <div class="badge badge-danger">DANGER: Sharp Shards!</div>
    </div>

    
    <div class="panel">
      <div class="panel-title">Acrylic Plastic</div>
      <div class="viewport">
        <div class="pane-acrylic"></div>
        <div class="frame"></div>
        <div class="ball ball-acrylic"></div>
      </div>
      <div class="badge badge-safe">SAFE: Shatterproof!</div>
    </div>

  </div>

  <div class="controls">
    <button class="btn" id="playToggle" aria-label="Toggle animation">
      <span id="btnIcon">⏸</span> <span id="btnText">Pause</span>
    </button>
    <button class="btn" id="restartBtn" style="background:#64748b;">
      <span>↺</span> Restart
    </button>
  </div>

  <script>
    const stage = document.getElementById('stage');
    const playToggle = document.getElementById('playToggle');
    const restartBtn = document.getElementById('restartBtn');
    const btnIcon = document.getElementById('btnIcon');
    const btnText = document.getElementById('btnText');

    let isPlaying = true;

    function setPlaying(play) {
      isPlaying = play;
      if (isPlaying) {
        stage.classList.add('animating');
        btnIcon.textContent = '⏸';
        btnText.textContent = 'Pause';
      } else {
        stage.classList.remove('animating');
        btnIcon.textContent = '▶';
        btnText.textContent = 'Play';
      }
    }

    playToggle.addEventListener('click', () => {
      setPlaying(!isPlaying);
    });

    restartBtn.addEventListener('click', () => {
      stage.classList.remove('animating');
      void stage.offsetWidth; // Trigger reflow for atomic reset
      setPlaying(true);
    });
  </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="1:1">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    .selector-bar {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 420px;
      margin-bottom: 8px;
    }
    .tab-btn {
      flex: 1;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 700;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      border-radius: 8px;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      transition: all 0.25s ease;
    }
    .tab-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
    }

    /* Playhouse Stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 420px;
      height: 210px;
      background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 75%, #dcfce7 75%, #bbf7d0 100%);
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .house-part {
      cursor: pointer;
      transition: opacity 0.3s ease, filter 0.3s ease;
    }
    .house-part:hover {
      filter: brightness(1.08);
    }
    .dimmed {
      opacity: 0.35;
      filter: grayscale(0.5);
    }
    .focused {
      opacity: 1;
      filter: drop-shadow(0 0 6px rgba(2, 132, 199, 0.8));
    }

    /* Weather effect layers */
    .fx-layer {
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .fx-active {
      opacity: 1;
    }

    /* Scorecard Table */
    .scorecard {
      width: 100%;
      max-width: 420px;
      border-collapse: collapse;
      margin-top: 8px;
      font-size: 13px;
    }
    .scorecard th {
      color: #64748b;
      font-weight: 600;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 4px 6px;
      text-align: center;
      border-bottom: 1px solid #e2e8f0;
    }
    .scorecard th:first-child {
      text-align: left;
    }
    .scorecard tr {
      cursor: pointer;
      transition: background 0.2s ease;
      border-radius: 6px;
    }
    .scorecard td {
      padding: 6px;
      text-align: center;
      font-weight: 600;
    }
    .scorecard td:first-child {
      text-align: left;
      font-size: 12px;
      color: #334155;
    }
    .scorecard tr.active-row {
      background: #e0f2fe;
    }
    .scorecard tr.active-row td:first-child {
      color: #0369a1;
      font-weight: 700;
    }
    .check {
      color: #16a34a;
      font-size: 14px;
    }

    /* Pin badge overlay */
    .pin {
      position: absolute;
      transform: translate(-50%, -50%);
      background: #ffffff;
      border: 2px solid #0284c7;
      color: #0284c7;
      font-size: 11px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 12px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.15);
      cursor: pointer;
      pointer-events: auto;
      transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
    }
    .pin.active {
      background: #0284c7;
      color: #ffffff;
      transform: translate(-50%, -50%) scale(1.1);
    }
  </style>
</head>
<body>

  
  <div class="selector-bar">
    <button class="tab-btn active" id="btn-0" onclick="selectPart(0)">Roof</button>
    <button class="tab-btn" id="btn-1" onclick="selectPart(1)">Walls</button>
    <button class="tab-btn" id="btn-2" onclick="selectPart(2)">Window</button>
  </div>

  
  <div class="stage">
    <svg viewBox="0 0 360 200">
      <defs>
        
        <pattern id="corrugated" width="12" height="12" patternUnits="userSpaceOnUse" patternTransform="rotate(25)">
          <line x1="0" y1="0" x2="0" y2="12" stroke="#0369a1" stroke-width="3" />
          <line x1="6" y1="0" x2="6" y2="12" stroke="#38bdf8" stroke-width="3" />
        </pattern>
        
        <pattern id="wood" width="30" height="8" patternUnits="userSpaceOnUse">
          <rect width="30" height="8" fill="#d97706" />
          <line x1="0" y1="0" x2="30" y2="0" stroke="#b45309" stroke-width="1.5" />
          <line x1="5" y1="4" x2="20" y2="4" stroke="#f59e0b" stroke-width="1" />
        </pattern>
      </defs>

      
      <ellipse cx="180" cy="180" rx="100" ry="10" fill="#cbd5e1" opacity="0.6" />

      
      <g id="part-walls" class="house-part" onclick="selectPart(1)">
        
        <rect x="105" y="85" width="150" height="90" rx="3" fill="url(#wood)" stroke="#92400e" stroke-width="2" />
        
        <rect x="190" y="115" width="45" height="60" rx="3" fill="#78350f" stroke="#451a03" stroke-width="1.5" />
        <circle cx="198" cy="145" r="3" fill="#fde047" />
      </g>

      
      <g id="part-window" class="house-part" onclick="selectPart(2)">
        <rect x="125" y="110" width="45" height="42" rx="4" fill="#bae6fd" stroke="#0284c7" stroke-width="2.5" />
        
        <line x1="147.5" y1="110" x2="147.5" y2="152" stroke="#0284c7" stroke-width="2" />
        <line x1="125" y1="131" x2="170" y2="131" stroke="#0284c7" stroke-width="2" />
        <line x1="130" y1="145" x2="142" y2="116" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.9" />
        <line x1="152" y1="145" x2="164" y2="116" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.9" />
      </g>

      
      <g id="part-roof" class="house-part focused" onclick="selectPart(0)">
        <polygon points="180,25 80,88 280,88" fill="url(#corrugated)" stroke="#0369a1" stroke-width="2.5" stroke-linejoin="round" />
        
        <polygon points="180,20 170,28 190,28" fill="#0284c7" />
      </g>

      
      <g id="fx-roof" class="fx-layer fx-active">
        <path d="M120 40 L105 65 M150 30 L135 55 M210 30 L225 55 M240 40 L255 65" stroke="#0284c7" stroke-width="2" stroke-dasharray="3,3" stroke-linecap="round" />
        <path d="M75 92 Q70 100 68 112 M285 92 Q290 100 292 112" stroke="#38bdf8" stroke-width="2.5" fill="none" stroke-linecap="round" />
      </g>

      
      <g id="fx-walls" class="fx-layer">
        <path d="M40 120 C 65 120, 85 110, 95 95" stroke="#0284c7" stroke-width="2" fill="none" stroke-linecap="round" />
        <path d="M35 140 C 65 140, 85 140, 95 130" stroke="#0284c7" stroke-width="2.5" fill="none" stroke-linecap="round" />
        <path d="M45 160 C 70 160, 85 155, 95 150" stroke="#0284c7" stroke-width="2" fill="none" stroke-linecap="round" />
      </g>

      
      <g id="fx-window" class="fx-layer">
        <circle cx="147" cy="131" r="18" fill="#38bdf8" opacity="0.25" />
        <text x="147" y="103" text-anchor="middle" font-size="11" font-weight="bold" fill="#0369a1">🛡️ Safe</text>
      </g>
    </svg>

    
    <div class="pin active" id="pin-0" style="top: 28%; left: 50%;" onclick="selectPart(0)">Roof</div>
    <div class="pin" id="pin-1" style="top: 72%; left: 74%;" onclick="selectPart(1)">Walls</div>
    <div class="pin" id="pin-2" style="top: 65%; left: 41%;" onclick="selectPart(2)">Window</div>
  </div>

  
  <table class="scorecard">
    <thead>
      <tr>
        <th>Material</th>
        <th>🌧️ Weather</th>
        <th>💨 Strength</th>
        <th>🛡️ Safety</th>
      </tr>
    </thead>
    <tbody>
      <tr id="row-0" class="active-row" onclick="selectPart(0)">
        <td>Plastic Sheet</td>
        <td><span class="check">✓</span></td>
        <td><span class="check">✓</span></td>
        <td><span class="check">✓</span></td>
      </tr>
      <tr id="row-1" onclick="selectPart(1)">
        <td>Sealed Wood</td>
        <td><span class="check">✓</span></td>
        <td><span class="check">✓</span></td>
        <td><span class="check">✓</span></td>
      </tr>
      <tr id="row-2" onclick="selectPart(2)">
        <td>Acrylic Film</td>
        <td><span class="check">✓</span></td>
        <td><span class="check">✓</span></td>
        <td><span class="check">✓</span></td>
      </tr>
    </tbody>
  </table>

  <script>
    const parts = [
      { btn: 'btn-0', pin: 'pin-0', house: 'part-roof', fx: 'fx-roof', row: 'row-0' },
      { btn: 'btn-1', pin: 'pin-1', house: 'part-walls', fx: 'fx-walls', row: 'row-1' },
      { btn: 'btn-2', pin: 'pin-2', house: 'part-window', fx: 'fx-window', row: 'row-2' }
    ];

    function selectPart(index) {
      parts.forEach((p, i) => {
        const isActive = (i === index);
        document.getElementById(p.btn).classList.toggle('active', isActive);
        document.getElementById(p.pin).classList.toggle('active', isActive);
        document.getElementById(p.row).classList.toggle('active-row', isActive);
        
        const houseEl = document.getElementById(p.house);
        houseEl.classList.toggle('focused', isActive);
        houseEl.classList.toggle('dimmed', !isActive);

        const fxEl = document.getElementById(p.fx);
        fxEl.classList.toggle('fx-active', isActive);
      });
    }
  </script>
</body>
</html>

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

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

    .header-badge {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #2563eb;
      background: #eff6ff;
      border: 1px solid #dbeafe;
      padding: 4px 10px;
      border-radius: 999px;
      margin-bottom: 12px;
    }

    .cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      width: 100%;
      max-width: 620px;
    }

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

    .test-card {
      background: #f8f9fa;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 16px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
      position: relative;
    }

    .test-card:hover {
      background: #ffffff;
      border-color: #cbd5e1;
      box-shadow: 0 4px 14px rgba(30, 41, 69, 0.06);
    }

    .test-card.selected {
      background: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.35);
    }

    .icon-box {
      width: 52px;
      height: 52px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      margin-bottom: 12px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      transition: background 0.2s ease;
    }

    .test-card.selected .icon-box {
      background: #f0f9ff;
      border-color: #bae6fd;
    }

    .card-title {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 10px;
      line-height: 1.2;
    }

    .bullets {
      list-style: none;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 12px;
      color: #475569;
      text-align: left;
      margin-top: 4px;
    }

    .bullets li {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      line-height: 1.35;
    }

    .bullet-check {
      color: #16a34a;
      font-weight: 800;
      font-size: 11px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .interactive-hint {
      margin-top: 12px;
      font-size: 11px;
      color: #64748b;
      font-weight: 500;
    }
  </style>
</head>
<body>

  <div class="header-badge">Playhouse Design Criteria</div>

  <div class="cards-grid" id="grid">
    
    <div class="test-card selected" onclick="selectCard(0)">
      <div class="icon-box">🌦️</div>
      <div class="card-title">1. Weatherproofing</div>
      <ul class="bullets">
        <li><span class="bullet-check">✓</span><span>Blocks rain</span></li>
        <li><span class="bullet-check">✓</span><span>Won't rot or melt in sun</span></li>
      </ul>
    </div>

    
    <div class="test-card" onclick="selectCard(1)">
      <div class="icon-box">🛡️</div>
      <div class="card-title">2. Strength &amp; Rigidity</div>
      <ul class="bullets">
        <li><span class="bullet-check">✓</span><span>Holds up the roof</span></li>
        <li><span class="bullet-check">✓</span><span>Stands firm against wind</span></li>
      </ul>
    </div>

    
    <div class="test-card" onclick="selectCard(2)">
      <div class="icon-box">🖐️</div>
      <div class="card-title">3. Child Safety</div>
      <ul class="bullets">
        <li><span class="bullet-check">✓</span><span>No sharp splinters</span></li>
        <li><span class="bullet-check">✓</span><span>Shatterproof</span></li>
      </ul>
    </div>
  </div>

  <div class="interactive-hint">Tap any test to highlight its essential role</div>

  <script>
    function selectCard(index) {
      const cards = document.querySelectorAll('.test-card');
      cards.forEach((card, idx) => {
        if (idx === index) {
          card.classList.add('selected');
        } else {
          card.classList.remove('selected');
        }
      });
    }
  </script>

</body>
</html>

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

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px 8px;
    }

    .main-container {
      width: 100%;
      max-width: 640px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .header-text {
      text-align: center;
    }

    .header-text h1 {
      font-size: 16px;
      font-weight: 800;
      color: #0f172a;
      letter-spacing: -0.01em;
    }

    .header-text p {
      font-size: 12px;
      color: #334155;
      font-weight: 500;
      margin-top: 2px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
    }

    .column {
      background: #ffffff;
      border-radius: 10px;
      padding: 10px 4px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .col-title {
      font-size: 13px;
      font-weight: 700;
      text-align: center;
      color: #0f172a;
      margin-bottom: 4px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .stage-svg {
      width: 100%;
      height: 155px;
      display: block;
      overflow: visible;
    }

    .badge-container {
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 4px;
      width: 100%;
    }

    .badge {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 16px;
      text-align: center;
      opacity: 0;
      transform: translateY(6px);
      white-space: nowrap;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .badge-cardboard {
      background: #fee2e2;
      color: #991b1b;
      border: 1px solid #f87171;
    }

    .badge-wood {
      background: #fef3c7;
      color: #92400e;
      border: 1px solid #f59e0b;
    }

    .badge-plastic {
      background: #dcfce7;
      color: #166534;
      border: 1px solid #4ade80;
    }

    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 2px;
    }

    .btn-ctrl {
      background: #0f172a;
      border: none;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 600;
      color: #ffffff;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.15s ease;
    }

    .btn-ctrl:focus-visible {
      outline: 2px solid #0284c7;
      outline-offset: 2px;
    }

    .btn-ctrl:active {
      background: #334155;
    }

    @media (max-width: 380px) {
      .badge {
        font-size: 10px;
        padding: 2px 5px;
      }
      .col-title {
        font-size: 12px;
      }
      .stage-svg {
        height: 135px;
      }
    }
  </style>
</head>
<body>

  <div class="main-container">
    <div class="header-text">
      <h1>Water Resistance of Building Materials</h1>
      <p>Observe how different materials react when exposed to water droplets</p>
    </div>

    <div class="grid">
      
      <div class="column">
        <div class="col-title">Cardboard</div>
        <svg class="stage-svg" viewBox="0 0 120 160">
          
          <g fill="#94a3b8">
            <ellipse cx="60" cy="18" rx="20" ry="10" />
            <ellipse cx="46" cy="21" rx="12" ry="8" />
            <ellipse cx="74" cy="21" rx="12" ry="8" />
          </g>

          
          <rect x="8" y="90" width="10" height="40" rx="2" fill="#cbd5e1" />
          <rect x="102" y="90" width="10" height="40" rx="2" fill="#cbd5e1" />

          
          <path id="cb-beam" d="M 8,85 Q 60,85 112,85 L 112,95 Q 60,95 8,95 Z" fill="#c89565" stroke="#966a3d" stroke-width="1.5" />
          
          
          <ellipse id="cb-soak" cx="60" cy="88" rx="0" ry="0" fill="#452309" opacity="0" />

          
          <g id="drop-cb-group" transform="translate(60, 25)">
            <path id="drop-cb-shape" d="M 0,-10 C -4,-3 -6,2 -6,5 C -6,9 -3.3,11 0,11 C 3.3,11 6,9 6,5 C 6,2 4,-3 0,-10 Z" fill="#0284c7" />
          </g>
        </svg>
        <div class="badge-container">
          <div class="badge badge-cardboard" id="badge-cb">Soggy &amp; Weak</div>
        </div>
      </div>

      
      <div class="column">
        <div class="col-title">Untreated Wood</div>
        <svg class="stage-svg" viewBox="0 0 120 160">
          
          <g fill="#94a3b8">
            <ellipse cx="60" cy="18" rx="20" ry="10" />
            <ellipse cx="46" cy="21" rx="12" ry="8" />
            <ellipse cx="74" cy="21" rx="12" ry="8" />
          </g>

          
          <rect x="8" y="90" width="10" height="40" rx="2" fill="#cbd5e1" />
          <rect x="102" y="90" width="10" height="40" rx="2" fill="#cbd5e1" />

          
          <path id="wd-beam" d="M 8,85 Q 60,85 112,85 L 112,95 Q 60,95 8,95 Z" fill="#d99f59" stroke="#aa7332" stroke-width="1.5" />
          <line id="wd-grain1" x1="16" y1="88" x2="104" y2="88" stroke="#aa7332" stroke-width="1" stroke-dasharray="6 4" />
          <line id="wd-grain2" x1="20" y1="92" x2="100" y2="92" stroke="#aa7332" stroke-width="1" stroke-dasharray="8 5" />

          
          <ellipse id="wd-soak" cx="60" cy="87" rx="0" ry="0" fill="#583416" opacity="0" />

          
          <g id="drop-wd-group" transform="translate(60, 25)">
            <path id="drop-wd-shape" d="M 0,-10 C -4,-3 -6,2 -6,5 C -6,9 -3.3,11 0,11 C 3.3,11 6,9 6,5 C 6,2 4,-3 0,-10 Z" fill="#0284c7" />
          </g>
        </svg>
        <div class="badge-container">
          <div class="badge badge-wood" id="badge-wd">Absorbs Water</div>
        </div>
      </div>

      
      <div class="column">
        <div class="col-title">Plastic Roof</div>
        <svg class="stage-svg" viewBox="0 0 120 160">
          
          <g fill="#94a3b8">
            <ellipse cx="44" cy="18" rx="20" ry="10" />
            <ellipse cx="30" cy="21" rx="12" ry="8" />
            <ellipse cx="58" cy="21" rx="12" ry="8" />
          </g>

          
          <rect x="14" y="82" width="8" height="48" rx="2" fill="#cbd5e1" />
          <rect x="94" y="118" width="8" height="12" rx="2" fill="#cbd5e1" />

          
          <polygon points="10,75 106,115 106,124 10,84" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5" />
          <line x1="12" y1="78" x2="104" y2="117" stroke="#ffffff" stroke-width="1.5" stroke-dasharray="6 3" opacity="0.8" />

          
          <g id="drop-pl-group" transform="translate(44, 25)">
            <circle cx="0" cy="0" r="5" fill="#0284c7" stroke="#bae6fd" stroke-width="1.2" />
            <circle cx="-1.5" cy="-1.5" r="1.2" fill="#ffffff" />
          </g>
        </svg>
        <div class="badge-container">
          <div class="badge badge-plastic" id="badge-pl">100% Waterproof</div>
        </div>
      </div>
    </div>

    <div class="controls">
      <button class="btn-ctrl" id="toggleBtn" aria-label="Pause animation">
        <span id="btnIcon">⏸</span> <span id="btnText">Pause</span>
      </button>
      <button class="btn-ctrl" id="resetBtn" style="background:#475569;" aria-label="Restart animation">
        <span>🔄</span> <span>Restart</span>
      </button>
    </div>
  </div>

  <script>
    (function () {
      let isPlaying = true;
      let startTime = null;
      let pausedAt = 0;
      let totalPausedTime = 0;
      let pauseStartTime = 0;
      const cycleDuration = 3800; // 3.8s per cycle

      // Elements
      const cbBeam = document.getElementById('cb-beam');
      const cbSoak = document.getElementById('cb-soak');
      const dropCbGroup = document.getElementById('drop-cb-group');
      const dropCbShape = document.getElementById('drop-cb-shape');
      const badgeCb = document.getElementById('badge-cb');

      const wdBeam = document.getElementById('wd-beam');
      const wdGrain1 = document.getElementById('wd-grain1');
      const wdGrain2 = document.getElementById('wd-grain2');
      const wdSoak = document.getElementById('wd-soak');
      const dropWdGroup = document.getElementById('drop-wd-group');
      const dropWdShape = document.getElementById('drop-wd-shape');
      const badgeWd = document.getElementById('badge-wd');

      const dropPlGroup = document.getElementById('drop-pl-group');
      const badgePl = document.getElementById('badge-pl');

      const toggleBtn = document.getElementById('toggleBtn');
      const btnIcon = document.getElementById('btnIcon');
      const btnText = document.getElementById('btnText');
      const resetBtn = document.getElementById('resetBtn');

      function lerp(a, b, t) {
        return a + (b - a) * t;
      }

      function easeOutQuad(t) {
        return t * (2 - t);
      }

      function easeInQuad(t) {
        return t * t;
      }

      function update(timestamp) {
        if (!startTime) startTime = timestamp;
        if (!isPlaying) {
          requestAnimationFrame(update);
          return;
        }

        const elapsed = timestamp - startTime - totalPausedTime;
        const progress = (elapsed % cycleDuration) / cycleDuration;

        // TIMELINE PHASES:
        // 0.00 - 0.20: Fall phase (clouds to impact)
        // 0.20 - 0.65: Reaction & Deformation (soaking/sagging/warping/rolling)
        // 0.65 - 0.85: Steady hold & badges highlighted
        // 0.85 - 1.00: Fade out / reset loop

        // 1. CARDBOARD ANIMATION
        if (progress < 0.20) {
          const fallP = progress / 0.20;
          const y = lerp(25, 80, easeInQuad(fallP));
          dropCbGroup.setAttribute('transform', `translate(60, ${y})`);
          dropCbShape.setAttribute('transform', 'scale(1, 1)');
          dropCbShape.style.opacity = '1';

          cbBeam.setAttribute('d', 'M 8,85 Q 60,85 112,85 L 112,95 Q 60,95 8,95 Z');
          cbBeam.setAttribute('fill', '#c89565');
          cbSoak.setAttribute('rx', '0');
          cbSoak.setAttribute('ry', '0');
          cbSoak.style.opacity = '0';

          badgeCb.style.opacity = '0';
          badgeCb.style.transform = 'translateY(6px)';
        } else if (progress < 0.85) {
          const reactP = Math.min(1, (progress - 0.20) / 0.35);
          const sag = easeOutQuad(reactP);

          // Droplet flattens and vanishes
          const dropSquash = Math.min(1, (progress - 0.20) / 0.15);
          dropCbGroup.setAttribute('transform', 'translate(60, 84)');
          dropCbShape.setAttribute('transform', `scale(${lerp(1, 2.2, dropSquash)}, ${lerp(1, 0.05, dropSquash)})`);
          dropCbShape.style.opacity = (1 - dropSquash).toString();

          // Beam sags heavily in center
          const sagYTop = 85 + sag * 26;
          const sagYBottom = 95 + sag * 26;
          cbBeam.setAttribute('d', `M 8,85 Q 60,${sagYTop} 112,85 L 112,95 Q 60,${sagYBottom} 8,95 Z`);
          
          // Color darkens as it absorbs water
          const r = Math.round(lerp(200, 110, sag));
          const g = Math.round(lerp(149, 75, sag));
          const b = Math.round(lerp(101, 40, sag));
          cbBeam.setAttribute('fill', `rgb(${r},${g},${b})`);

          // Soak spot spreads
          cbSoak.setAttribute('cx', '60');
          cbSoak.setAttribute('cy', (87 + sag * 18).toString());
          cbSoak.setAttribute('rx', (sag * 22).toString());
          cbSoak.setAttribute('ry', (sag * 8).toString());
          cbSoak.style.opacity = (sag * 0.75).toString();

          if (progress > 0.32) {
            badgeCb.style.opacity = '1';
            badgeCb.style.transform = 'translateY(0)';
          }
        } else {
          // Fade / Reset
          const fadeP = (progress - 0.85) / 0.15;
          badgeCb.style.opacity = (1 - fadeP).toString();
          badgeCb.style.transform = `translateY(${fadeP * 6}px)`;
          
          const sag = 1 - fadeP;
          const sagYTop = 85 + sag * 26;
          const sagYBottom = 95 + sag * 26;
          cbBeam.setAttribute('d', `M 8,85 Q 60,${sagYTop} 112,85 L 112,95 Q 60,${sagYBottom} 8,95 Z`);
          cbSoak.style.opacity = ((1 - fadeP) * 0.75).toString();
        }

        // 2. UNTREATED WOOD ANIMATION
        if (progress < 0.20) {
          const fallP = progress / 0.20;
          const y = lerp(25, 80, easeInQuad(fallP));
          dropWdGroup.setAttribute('transform', `translate(60, ${y})`);
          dropWdShape.setAttribute('transform', 'scale(1, 1)');
          dropWdShape.style.opacity = '1';

          wdBeam.setAttribute('d', 'M 8,85 Q 60,85 112,85 L 112,95 Q 60,95 8,95 Z');
          wdBeam.setAttribute('fill', '#d99f59');
          wdGrain1.setAttribute('y1', '88');
          wdGrain1.setAttribute('y2', '88');
          wdGrain2.setAttribute('y1', '92');
          wdGrain2.setAttribute('y2', '92');
          wdSoak.setAttribute('rx', '0');
          wdSoak.setAttribute('ry', '0');
          wdSoak.style.opacity = '0';

          badgeWd.style.opacity = '0';
          badgeWd.style.transform = 'translateY(6px)';
        } else if (progress < 0.85) {
          const reactP = Math.min(1, (progress - 0.20) / 0.35);
          const warp = easeOutQuad(reactP);

          // Droplet sinks in slowly
          const dropSink = Math.min(1, (progress - 0.20) / 0.22);
          dropWdGroup.setAttribute('transform', 'translate(60, 84)');
          dropWdShape.setAttribute('transform', `scale(${lerp(1, 1.6, dropSink)}, ${lerp(1, 0.1, dropSink)})`);
          dropWdShape.style.opacity = (1 - dropSink).toString();

          // Wood warps with uneven grain swelling
          const w1 = warp * 6;
          const w2 = warp * 8;
          wdBeam.setAttribute('d', `M 8,85 Q 35,${85 - w1} 60,${85 + w1 * 0.5} Q 85,${85 + w2} 112,85 L 112,95 Q 85,${95 + w2} 60,${95 + w1 * 0.5} Q 35,${95 - w1} 8,95 Z`);
          
          // Color darkens moderately
          const r = Math.round(lerp(217, 150, warp));
          const g = Math.round(lerp(159, 100, warp));
          const b = Math.round(lerp(89, 50, warp));
          wdBeam.setAttribute('fill', `rgb(${r},${g},${b})`);

          // Grain lines warp
          wdGrain1.setAttribute('y1', (88 - w1 * 0.5).toString());
          wdGrain1.setAttribute('y2', (88 + w2 * 0.5).toString());

          // Soak spot
          wdSoak.setAttribute('cx', '60');
          wdSoak.setAttribute('cy', (87 + warp * 3).toString());
          wdSoak.setAttribute('rx', (warp * 16).toString());
          wdSoak.setAttribute('ry', (warp * 5).toString());
          wdSoak.style.opacity = (warp * 0.8).toString();

          if (progress > 0.32) {
            badgeWd.style.opacity = '1';
            badgeWd.style.transform = 'translateY(0)';
          }
        } else {
          // Fade / Reset
          const fadeP = (progress - 0.85) / 0.15;
          badgeWd.style.opacity = (1 - fadeP).toString();
          badgeWd.style.transform = `translateY(${fadeP * 6}px)`;
          
          const warp = 1 - fadeP;
          const w1 = warp * 6;
          const w2 = warp * 8;
          wdBeam.setAttribute('d', `M 8,85 Q 35,${85 - w1} 60,${85 + w1 * 0.5} Q 85,${85 + w2} 112,85 L 112,95 Q 85,${95 + w2} 60,${95 + w1 * 0.5} Q 35,${95 - w1} 8,95 Z`);
          wdSoak.style.opacity = ((1 - fadeP) * 0.8).toString();
        }

        // 3. PLASTIC ROOF ANIMATION
        if (progress < 0.20) {
          // Droplet falls from cloud at (44, 25) to roof impact at (44, 89)
          const fallP = progress / 0.20;
          const y = lerp(25, 89, easeInQuad(fallP));
          dropPlGroup.setAttribute('transform', `translate(44, ${y})`);
          dropPlGroup.style.opacity = '1';

          badgePl.style.opacity = '0';
          badgePl.style.transform = 'translateY(6px)';
        } else if (progress < 0.55) {
          // Rolls down sloped surface: from (44, 89) to (104, 114)
          const rollP = (progress - 0.20) / 0.35;
          const rollEase = easeInQuad(rollP);
          const x = lerp(44, 104, rollEase);
          const y = lerp(89, 114, rollEase);
          dropPlGroup.setAttribute('transform', `translate(${x}, ${y})`);
          dropPlGroup.style.opacity = '1';

          if (progress > 0.32) {
            badgePl.style.opacity = '1';
            badgePl.style.transform = 'translateY(0)';
          }
        } else if (progress < 0.72) {
          // Drops off roof edge: falls from (104, 114) to (106, 155) and fades
          const dropOffP = (progress - 0.55) / 0.17;
          const x = lerp(104, 107, dropOffP);
          const y = lerp(114, 155, easeInQuad(dropOffP));
          dropPlGroup.setAttribute('transform', `translate(${x}, ${y})`);
          dropPlGroup.style.opacity = (1 - dropOffP).toString();

          badgePl.style.opacity = '1';
          badgePl.style.transform = 'translateY(0)';
        } else if (progress < 0.85) {
          dropPlGroup.style.opacity = '0';
          badgePl.style.opacity = '1';
          badgePl.style.transform = 'translateY(0)';
        } else {
          // Fade badge
          const fadeP = (progress - 0.85) / 0.15;
          dropPlGroup.style.opacity = '0';
          badgePl.style.opacity = (1 - fadeP).toString();
          badgePl.style.transform = `translateY(${fadeP * 6}px)`;
        }

        requestAnimationFrame(update);
      }

      // Play / Pause Controls
      toggleBtn.addEventListener('click', function () {
        if (isPlaying) {
          isPlaying = false;
          pauseStartTime = performance.now();
          btnIcon.textContent = '▶';
          btnText.textContent = 'Play';
          toggleBtn.setAttribute('aria-label', 'Play animation');
        } else {
          isPlaying = true;
          totalPausedTime += performance.now() - pauseStartTime;
          btnIcon.textContent = '⏸';
          btnText.textContent = 'Pause';
          toggleBtn.setAttribute('aria-label', 'Pause animation');
        }
      });

      // Reset Button
      resetBtn.addEventListener('click', function () {
        startTime = performance.now();
        totalPausedTime = 0;
        if (!isPlaying) {
          isPlaying = true;
          btnIcon.textContent = '⏸';
          btnText.textContent = 'Pause';
          toggleBtn.setAttribute('aria-label', 'Pause animation');
        }
      });

      // Start loop
      requestAnimationFrame(update);
    })();
  </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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px 16px;
      user-select: none;
    }
    .diagram-stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: auto;
      max-height: 290px;
      overflow: visible;
    }
    .checklist {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      margin-top: 4px;
    }
    .check-item {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    }
    .check-icon {
      color: #10b981;
      font-size: 14px;
      font-weight: bold;
    }
    /* Falling water drops animation */
    @keyframes dropFall {
      0% {
        opacity: 0;
        transform: translateY(0) scale(0.6);
      }
      20% {
        opacity: 1;
        transform: translateY(8px) scale(1);
      }
      80% {
        opacity: 1;
        transform: translateY(46px) scale(1);
      }
      100% {
        opacity: 0;
        transform: translateY(52px) scale(1.2, 0.4);
      }
    }
    .falling-drop {
      animation: dropFall 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      transform-origin: center top;
    }
    .drop-2 {
      animation-delay: 1.2s;
    }
  </style>
</head>
<body>

  <div class="diagram-stage">
    <svg viewBox="0 0 400 300" aria-label="Fair test experiment setup diagram">
      <defs>
        
        <linearGradient id="bulbGrad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#ef4444"/>
          <stop offset="100%" stop-color="#dc2626"/>
        </linearGradient>

        
        <linearGradient id="glassGrad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#e0f2fe" stop-opacity="0.8"/>
          <stop offset="50%" stop-color="#ffffff" stop-opacity="0.9"/>
          <stop offset="100%" stop-color="#bae6fd" stop-opacity="0.7"/>
        </linearGradient>

        
        <linearGradient id="cupGrad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#38bdf8" stop-opacity="0.15"/>
          <stop offset="20%" stop-color="#ffffff" stop-opacity="0.25"/>
          <stop offset="80%" stop-color="#ffffff" stop-opacity="0.1"/>
          <stop offset="100%" stop-color="#38bdf8" stop-opacity="0.2"/>
        </linearGradient>

        
        <linearGradient id="bandGrad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#f59e0b"/>
          <stop offset="50%" stop-color="#fbbf24"/>
          <stop offset="100%" stop-color="#d97706"/>
        </linearGradient>
      </defs>

      
      
      <ellipse cx="200" cy="275" rx="55" ry="10" fill="#cbd5e1" opacity="0.4"/>
      
      
      <polygon points="125,145 145,275 255,275 275,145" fill="url(#cupGrad)" stroke="#94a3b8" stroke-width="2"/>
      
      
      <ellipse cx="200" cy="273" rx="53" ry="8" fill="#e2e8f0" opacity="0.5" stroke="#cbd5e1" stroke-width="1.5"/>

      
      <path d="M 138 152 L 154 268" stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity="0.8"/>

      
      
      <path d="M 120 156 Q 124 162 127 150 Q 200 156 273 150 Q 276 162 280 156 L 278 142 Q 200 134 122 142 Z" fill="#e2e8f0" stroke="#94a3b8" stroke-width="1.5"/>

      
      <ellipse cx="200" cy="144" rx="77" ry="15" fill="#f1f5f9" stroke="#64748b" stroke-width="2"/>
      
      <ellipse cx="200" cy="144" rx="73" ry="13" fill="none" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,3"/>

      
      <path d="M 122 148 Q 200 162 278 148 Q 278 154 276 157 Q 200 171 124 157 Z" fill="url(#bandGrad)" stroke="#b45309" stroke-width="1.5"/>

      
      <path d="M 90 180 L 132 158" stroke="#64748b" stroke-width="1.5" stroke-dasharray="2,2"/>
      <rect x="18" y="172" width="76" height="22" rx="4" fill="#ffffff" stroke="#cbd5e1" stroke-width="1"/>
      <text x="56" y="187" font-size="11" font-weight="600" fill="#475569" text-anchor="middle">Rubber band</text>

      
      <ellipse cx="200" cy="144" rx="14" ry="5" fill="#0284c7" opacity="0.8"/>
      <ellipse cx="196" cy="143" rx="12" ry="4" fill="#38bdf8"/>
      <ellipse cx="193" cy="142" rx="3" ry="1.2" fill="#ffffff" opacity="0.9"/>
      <circle cx="212" cy="144" r="3.5" fill="#38bdf8"/>
      <circle cx="211" cy="143" r="1.2" fill="#ffffff"/>
      <circle cx="187" cy="145" r="3" fill="#38bdf8"/>

      
      <g class="falling-drop">
        <path d="M 200 78 C 197 83, 194 88, 194 92 A 6 6 0 0 0 206 92 C 206 88, 203 83, 200 78 Z" fill="#0284c7"/>
      </g>
      <g class="falling-drop drop-2">
        <path d="M 200 78 C 197 83, 194 88, 194 92 A 6 6 0 0 0 206 92 C 206 88, 203 83, 200 78 Z" fill="#0284c7"/>
      </g>

      
      
      <path d="M 190 28 C 190 12, 210 12, 210 28 C 210 33, 206 36, 206 40 L 194 40 C 194 36, 190 33, 190 28 Z" fill="url(#bulbGrad)" stroke="#b91c1c" stroke-width="1.5"/>
      <rect x="192" y="39" width="16" height="4" rx="1" fill="#991b1b"/>
      
      
      <path d="M 194 43 L 194 66 L 198 78 L 202 78 L 206 66 L 206 43 Z" fill="url(#glassGrad)" stroke="#64748b" stroke-width="1.5"/>
      
      <path d="M 195 54 L 195 66 L 198 76 L 202 76 L 205 66 L 205 54 Z" fill="#38bdf8" opacity="0.85"/>
      <line x1="196" y1="46" x2="196" y2="68" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" opacity="0.8"/>

      
      <g transform="translate(300, 48)">
        
        <circle cx="26" cy="28" r="24" fill="#000000" opacity="0.05"/>
        
        <circle cx="26" cy="26" r="24" fill="#f8fafc" stroke="#64748b" stroke-width="2"/>
        
        <rect x="23" y="-1" width="6" height="4" rx="1.5" fill="#64748b"/>
        <line x1="26" y1="2" x2="26" y2="4" stroke="#64748b" stroke-width="2"/>
        
        <circle cx="26" cy="26" r="20" fill="#ffffff" stroke="#e2e8f0" stroke-width="1.5"/>
        
        <line x1="26" y1="8" x2="26" y2="11" stroke="#94a3b8" stroke-width="1.5"/>
        <line x1="44" y1="26" x2="41" y2="26" stroke="#94a3b8" stroke-width="1.5"/>
        <line x1="26" y1="44" x2="26" y2="41" stroke="#94a3b8" stroke-width="1.5"/>
        <line x1="8" y1="26" x2="11" y2="26" stroke="#94a3b8" stroke-width="1.5"/>
        
        <line x1="26" y1="26" x2="34" y2="17" stroke="#ef4444" stroke-width="2" stroke-linecap="round"/>
        <circle cx="26" cy="26" r="2.5" fill="#ef4444"/>
        
        
        <rect x="-10" y="54" width="72" height="20" rx="10" fill="#e0f2fe" stroke="#38bdf8" stroke-width="1"/>
        <text x="26" y="68" font-size="11" font-weight="700" fill="#0369a1" text-anchor="middle">Wait 1 min</text>
      </g>
    </svg>
  </div>

  
  <div class="checklist">
    <div class="check-item">
      <span class="check-icon">✓</span>
      <span>Same size (10 cm)</span>
    </div>
    <div class="check-item">
      <span class="check-icon">✓</span>
      <span>Same water (10 drops)</span>
    </div>
    <div class="check-item">
      <span class="check-icon">✓</span>
      <span>Same time (1 min)</span>
    </div>
  </div>

</body>
</html>

Testing Which Materials Are Waterproof

<!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: #f8fafc;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .row-card {
      display: grid;
      grid-template-columns: 88px 1fr auto;
      align-items: center;
      gap: 10px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .rank-col {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 6px;
      border-radius: 6px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      width: fit-content;
    }

    .badge-waterproof {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #86efac;
    }

    .badge-leaky {
      background: #fef9c3;
      color: #a16207;
      border: 1px solid #fde047;
    }

    .badge-absorbent {
      background: #fee2e2;
      color: #b91c1c;
      border: 1px solid #fca5a5;
    }

    .mat-name {
      font-size: 13px;
      font-weight: 700;
      color: #334155;
      line-height: 1.2;
    }

    .sim-col {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 48px;
    }

    .sim-svg {
      width: 100%;
      max-width: 220px;
      height: 48px;
    }

    .stat-col {
      text-align: right;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 2px;
      min-width: 70px;
    }

    .stat-main {
      font-size: 13px;
      font-weight: 800;
    }

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

    .text-green { color: #16a34a; }
    .text-amber { color: #d97706; }
    .text-red { color: #dc2626; }

    @media (max-width: 400px) {
      body { padding: 6px; gap: 6px; }
      .row-card {
        grid-template-columns: 78px 1fr auto;
        padding: 6px 8px;
        gap: 6px;
      }
      .badge { font-size: 9px; padding: 2px 4px; }
      .mat-name { font-size: 12px; }
      .stat-main { font-size: 12px; }
      .stat-sub { font-size: 10px; }
    }
  </style>
</head>
<body>

  
  <div class="row-card">
    <div class="rank-col">
      <span class="badge badge-waterproof">Rank 1</span>
      <span class="mat-name">Plastic Wrap</span>
    </div>
    <div class="sim-col">
      <svg class="sim-svg" viewBox="0 0 200 48" aria-hidden="true">
        
        <line x1="20" y1="18" x2="180" y2="18" stroke="#38bdf8" stroke-width="4" stroke-linecap="round" />
        
        <circle cx="70" cy="11" r="5" fill="#0284c7" />
        <circle cx="100" cy="10" r="6" fill="#0284c7" />
        <circle cx="130" cy="11" r="5" fill="#0284c7" />
        
        <circle cx="68" cy="9" r="1.5" fill="#ffffff" />
        <circle cx="98" cy="8" r="2" fill="#ffffff" />
        <circle cx="128" cy="9" r="1.5" fill="#ffffff" />
        
        <path d="M 85,28 L 85,44 Q 85,46 88,46 L 112,46 Q 115,46 115,44 L 115,28" fill="none" stroke="#94a3b8" stroke-width="2" />
      </svg>
    </div>
    <div class="stat-col">
      <span class="stat-main text-green">100% Dry</span>
      <span class="stat-sub">0 drops</span>
    </div>
  </div>

  
  <div class="row-card">
    <div class="rank-col">
      <span class="badge badge-waterproof">Rank 1</span>
      <span class="mat-name">Foil</span>
    </div>
    <div class="sim-col">
      <svg class="sim-svg" viewBox="0 0 200 48" aria-hidden="true">
        
        <line x1="20" y1="18" x2="180" y2="18" stroke="#94a3b8" stroke-width="4" stroke-linecap="round" />
        
        <circle cx="65" cy="11" r="5" fill="#0284c7" />
        <circle cx="100" cy="10" r="6" fill="#0284c7" />
        <circle cx="135" cy="11" r="5" fill="#0284c7" />
        
        <circle cx="63" cy="9" r="1.5" fill="#ffffff" />
        <circle cx="98" cy="8" r="2" fill="#ffffff" />
        <circle cx="133" cy="9" r="1.5" fill="#ffffff" />
        
        <path d="M 85,28 L 85,44 Q 85,46 88,46 L 112,46 Q 115,46 115,44 L 115,28" fill="none" stroke="#94a3b8" stroke-width="2" />
      </svg>
    </div>
    <div class="stat-col">
      <span class="stat-main text-green">100% Dry</span>
      <span class="stat-sub">0 drops</span>
    </div>
  </div>

  
  <div class="row-card">
    <div class="rank-col">
      <span class="badge badge-leaky">Rank 3</span>
      <span class="mat-name">Cotton</span>
    </div>
    <div class="sim-col">
      <svg class="sim-svg" viewBox="0 0 200 48" aria-hidden="true">
        
        <line x1="20" y1="18" x2="180" y2="18" stroke="#cbd5e1" stroke-dasharray="4 2" stroke-width="4" stroke-linecap="round" />
        <ellipse cx="100" cy="18" rx="45" ry="4" fill="#38bdf8" opacity="0.6" />
        
        <circle cx="100" cy="27" r="2.5" fill="#0284c7" />
        <circle cx="96" cy="34" r="2" fill="#0284c7" />
        
        <path d="M 85,28 L 85,44 Q 85,46 88,46 L 112,46 Q 115,46 115,44 L 115,28" fill="none" stroke="#94a3b8" stroke-width="2" />
        <path d="M 87,41 L 113,41 L 113,44 Q 113,45 111,45 L 89,45 Q 87,45 87,44 Z" fill="#38bdf8" />
      </svg>
    </div>
    <div class="stat-col">
      <span class="stat-main text-amber">Leaky</span>
      <span class="stat-sub">3 drops</span>
    </div>
  </div>

  
  <div class="row-card">
    <div class="rank-col">
      <span class="badge badge-absorbent">Rank 4</span>
      <span class="mat-name">Paper Towel</span>
    </div>
    <div class="sim-col">
      <svg class="sim-svg" viewBox="0 0 200 48" aria-hidden="true">
        
        <path d="M 20,18 Q 100,26 180,18" fill="none" stroke="#60a5fa" stroke-width="4" stroke-linecap="round" />
        
        <circle cx="100" cy="28" r="2.5" fill="#0284c7" />
        <circle cx="98" cy="33" r="2.5" fill="#0284c7" />
        
        <path d="M 85,28 L 85,44 Q 85,46 88,46 L 112,46 Q 115,46 115,44 L 115,28" fill="none" stroke="#94a3b8" stroke-width="2" />
        <path d="M 87,34 L 113,34 L 113,44 Q 113,45 111,45 L 89,45 Q 87,45 87,44 Z" fill="#0284c7" opacity="0.8" />
      </svg>
    </div>
    <div class="stat-col">
      <span class="stat-main text-red">Absorbent</span>
      <span class="stat-sub">10 drops</span>
    </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">
  <title>Waterproof vs Absorbent Materials</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #0f172a;
      background: transparent;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      overflow-x: hidden;
    }

    .comparison-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 620px;
      margin: auto 0;
    }

    @media (max-width: 380px) {
      .comparison-container {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 300px;
      }
    }

    .panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 6px 4px;
    }

    .title {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 6px;
      line-height: 1.25;
    }

    .panel.waterproof .title {
      color: #0369a1;
    }

    .panel.absorbent .title {
      color: #334155;
    }

    .svg-wrap {
      width: 100%;
      max-width: 260px;
      aspect-ratio: 200 / 140;
      position: relative;
    }

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

    .tag {
      font-size: 12.5px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 9999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 8px;
      line-height: 1.2;
      transition: background-color 0.2s ease;
    }

    .tag-waterproof {
      background: #e0f2fe;
      color: #0369a1;
      border: 1px solid #7dd3fc;
    }

    .tag-absorbent {
      background: #f1f5f9;
      color: #334155;
      border: 1px solid #cbd5e1;
    }

    /* --- Smooth Animation Loops (3.4s pacing for clear educational viewing) --- */

    /* Droplet 1: Falls, beads up on solid surface, rolls off side */
    @keyframes dropRollOff {
      0% {
        transform: translate(95px, 12px) scale(0.85);
        opacity: 0;
      }
      10% {
        transform: translate(95px, 32px) scale(1);
        opacity: 1;
      }
      26% {
        /* Hits barrier and squashes */
        transform: translate(95px, 72px) scale(1.25, 0.75);
      }
      34% {
        /* Bounces up slightly and rounds out */
        transform: translate(105px, 66px) scale(0.9, 1.1);
      }
      46% {
        /* Lands and starts rolling right */
        transform: translate(122px, 73px) scale(1.05, 0.95);
      }
      62% {
        /* Rolls off edge of solid barrier */
        transform: translate(152px, 76px) scale(1, 1);
        opacity: 1;
      }
      74% {
        /* Drops down off barrier */
        transform: translate(168px, 108px) scale(0.9, 1.1);
        opacity: 0;
      }
      100% {
        transform: translate(168px, 108px) scale(0.9);
        opacity: 0;
      }
    }

    /* Droplet 2: Falls into fiber gap, gets absorbed and flattens */
    @keyframes dropAbsorb {
      0% {
        transform: translate(100px, 12px) scale(0.85);
        opacity: 0;
      }
      10% {
        transform: translate(100px, 32px) scale(1);
        opacity: 1;
      }
      26% {
        /* Touches fiber opening */
        transform: translate(100px, 70px) scale(1.15, 0.85);
        opacity: 1;
      }
      40% {
        /* Draws into the gap */
        transform: translate(100px, 78px) scale(1.4, 0.55);
        opacity: 0.85;
      }
      54% {
        /* Sinks deep into fibers */
        transform: translate(100px, 86px) scale(1.8, 0.25);
        opacity: 0.3;
      }
      65%, 100% {
        transform: translate(100px, 88px) scale(2, 0.05);
        opacity: 0;
      }
    }

    /* Fiber Wicking Effect (Capillary spreading) */
    @keyframes wickingSpread {
      0%, 24% {
        fill: #cbd5e1;
        stroke: #94a3b8;
      }
      40% {
        fill: #7dd3fc;
        stroke: #0284c7;
      }
      64% {
        fill: #38bdf8;
        stroke: #0369a1;
      }
      82% {
        fill: #93c5fd;
        stroke: #60a5fa;
      }
      100% {
        fill: #cbd5e1;
        stroke: #94a3b8;
      }
    }

    /* Water saturation wave inside the porous matrix */
    @keyframes soakZone {
      0%, 25% {
        opacity: 0;
        transform: scale(0.4);
      }
      45% {
        opacity: 0.85;
        transform: scale(0.85);
      }
      65% {
        opacity: 0.95;
        transform: scale(1.2);
      }
      82% {
        opacity: 0.35;
        transform: scale(1.3);
      }
      100% {
        opacity: 0;
        transform: scale(1.3);
      }
    }

    .anim-drop-waterproof {
      animation: dropRollOff 3.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      transform-origin: center center;
    }

    .anim-drop-absorb {
      animation: dropAbsorb 3.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      transform-origin: center center;
    }

    .anim-fiber-wick {
      animation: wickingSpread 3.4s ease infinite;
    }

    .anim-soak-wave {
      animation: soakZone 3.4s ease-out infinite;
      transform-origin: 100px 84px;
    }
  </style>
</head>
<body>

  <div class="comparison-container">
    
    <div class="panel waterproof">
      <h2 class="title">Waterproof Material</h2>
      
      <div class="svg-wrap">
        <svg viewBox="0 0 200 140" aria-label="Waterproof material demonstration showing solid smooth barrier where droplets bead up and roll off">
          <defs>
            <linearGradient id="barrierGrad" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" stop-color="#0284c7" />
              <stop offset="100%" stop-color="#0369a1" />
            </linearGradient>
            <linearGradient id="dropGrad" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stop-color="#38bdf8" />
              <stop offset="100%" stop-color="#0284c7" />
            </linearGradient>
          </defs>

          
          <rect x="18" y="76" width="164" height="34" rx="6" fill="url(#barrierGrad)" />
          
          <path d="M 18 78 L 182 78" stroke="#bae6fd" stroke-width="2.5" stroke-linecap="round" />
          
          
          <text x="100" y="98" font-size="11.5" font-weight="700" fill="#ffffff" text-anchor="middle" letter-spacing="0.3">Solid Smooth Barrier</text>
          <text x="100" y="124" font-size="9" font-weight="600" fill="#64748b" text-anchor="middle">No gaps for water to enter</text>

          
          <g transform="translate(44, 68)">
            
            <path d="M -9 8 C -11 0 -5 -8 0 -8 C 5 -8 11 0 9 8 C 5 9 -5 9 -9 8 Z" fill="url(#dropGrad)" stroke="#0284c7" stroke-width="0.8" />
            <circle cx="-3" cy="-2.5" r="2" fill="#ffffff" opacity="0.8" />
            <text x="0" y="-13" font-size="8.5" font-weight="700" fill="#0284c7" text-anchor="middle">Beads up</text>
          </g>

          
          <path d="M 104 68 Q 124 58 142 66 T 162 88" fill="none" stroke="#38bdf8" stroke-width="1.8" stroke-dasharray="3,3" opacity="0.85" />
          <polygon points="163,89 160,82 166,84" fill="#0284c7" />

          
          <g class="anim-drop-waterproof">
            <path d="M 0,-12 C -5,-6 -6,1 -6,4 A 6,6 0 0,0 6,4 C 6,1 5,-6 0,-12 Z" fill="url(#dropGrad)" stroke="#0369a1" stroke-width="0.8" />
            <circle cx="-1.8" cy="1" r="1.8" fill="#ffffff" opacity="0.85" />
          </g>
        </svg>
      </div>

      <div class="tag tag-waterproof">Water stays out</div>
    </div>

    
    <div class="panel absorbent">
      <h2 class="title">Absorbent Material</h2>
      
      <div class="svg-wrap">
        <svg viewBox="0 0 200 140" aria-label="Absorbent material demonstration showing woven fibers with pores where water soaks in and spreads">
          <defs>
            <radialGradient id="soakHalo" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stop-color="#38bdf8" stop-opacity="0.85" />
              <stop offset="60%" stop-color="#60a5fa" stop-opacity="0.45" />
              <stop offset="100%" stop-color="#93c5fd" stop-opacity="0" />
            </radialGradient>
          </defs>

          
          <rect x="18" y="74" width="164" height="38" rx="6" fill="#f8fafc" stroke="#cbd5e1" stroke-width="1" />
          
          
          <ellipse class="anim-soak-wave" cx="100" cy="88" rx="34" ry="18" fill="url(#soakHalo)" />

          
          
          <rect class="anim-fiber-wick" x="24" y="77" width="28" height="9" rx="4.5" fill="#cbd5e1" stroke="#94a3b8" stroke-width="1" />
          <rect class="anim-fiber-wick" x="58" y="77" width="30" height="9" rx="4.5" fill="#cbd5e1" stroke="#94a3b8" stroke-width="1" />
          
          
          <rect class="anim-fiber-wick" x="112" y="77" width="30" height="9" rx="4.5" fill="#cbd5e1" stroke="#94a3b8" stroke-width="1" />
          <rect class="anim-fiber-wick" x="148" y="77" width="28" height="9" rx="4.5" fill="#cbd5e1" stroke="#94a3b8" stroke-width="1" />

          
          <rect class="anim-fiber-wick" x="38" y="93" width="34" height="9" rx="4.5" fill="#cbd5e1" stroke="#94a3b8" stroke-width="1" />
          <rect class="anim-fiber-wick" x="80" y="93" width="40" height="9" rx="4.5" fill="#cbd5e1" stroke="#94a3b8" stroke-width="1" />
          <rect class="anim-fiber-wick" x="128" y="93" width="34" height="9" rx="4.5" fill="#cbd5e1" stroke="#94a3b8" stroke-width="1" />

          
          <path d="M 100 62 L 100 73" fill="none" stroke="#0284c7" stroke-width="1.8" stroke-linecap="round" />
          <polyline points="96,69 100,74 104,69" fill="none" stroke="#0284c7" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />

          <text x="100" y="58" font-size="8.5" font-weight="700" fill="#0284c7" text-anchor="middle">Tiny fiber gaps</text>
          <text x="100" y="124" font-size="9" font-weight="600" fill="#64748b" text-anchor="middle">Water wicks &amp; spreads</text>

          
          <g class="anim-drop-absorb">
            <path d="M 0,-12 C -5,-6 -6,1 -6,4 A 6,6 0 0,0 6,4 C 6,1 5,-6 0,-12 Z" fill="#0ea5e9" stroke="#0284c7" stroke-width="0.8" />
            <circle cx="-1.8" cy="1" r="1.8" fill="#ffffff" opacity="0.85" />
          </g>
        </svg>
      </div>

      <div class="tag tag-absorbent">Water soaks in</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="1:1">
  <title>Glass vs Plastic</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      padding: 8px;
      width: 100%;
    }
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
    }
    .column {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .col-header {
      font-size: 17px;
      font-weight: 800;
      text-align: center;
      padding: 6px 12px;
      border-radius: 8px;
      letter-spacing: 0.5px;
    }
    .header-glass {
      background: #e0f2fe;
      color: #0284c7;
    }
    .header-plastic {
      background: #fce7f3;
      color: #db2777;
    }
    .feature-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      border-radius: 12px;
      padding: 10px 8px 8px;
      min-height: 140px;
    }
    .glass-card {
      background: #f0f9ff;
      border: 1px solid #bae6fd;
    }
    .plastic-card {
      background: #fdf2f8;
      border: 1px solid #fbcfe8;
    }
    .svg-box {
      width: 100%;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      max-height: 90px;
    }
    .pill {
      font-size: 13px;
      font-weight: 700;
      text-align: center;
      padding: 4px 10px;
      border-radius: 20px;
      margin-top: 6px;
      line-height: 1.2;
    }
    .pill-glass {
      background: #0284c7;
      color: #ffffff;
    }
    .pill-warning {
      background: #0369a1;
      color: #ffffff;
    }
    .pill-plastic {
      background: #db2777;
      color: #ffffff;
    }
    .pill-color {
      background: #9d174d;
      color: #ffffff;
    }

    @media (max-width: 380px) {
      .col-header {
        font-size: 15px;
        padding: 4px 8px;
      }
      .pill {
        font-size: 11px;
        padding: 3px 6px;
      }
      .feature-card {
        min-height: 125px;
        padding: 6px 4px;
      }
      .svg-box {
        height: 75px;
      }
    }
  </style>
</head>
<body>

  <div class="comparison-grid">
    
    <div class="column">
      <div class="col-header header-glass">Glass</div>

      
      <div class="feature-card glass-card">
        <div class="svg-box">
          <svg viewBox="0 0 160 90" fill="none" xmlns="http://www.w3.org/2000/svg">
            
            <circle cx="24" cy="45" r="14" fill="#fbbf24" stroke="#f59e0b" stroke-width="2"/>
            
            <polygon points="38,36 148,15 148,75 38,54" fill="#fef08a" opacity="0.6"/>
            
            <rect x="74" y="14" width="12" height="62" rx="2" fill="#bae6fd" stroke="#0284c7" stroke-width="2.5" opacity="0.85"/>
            <line x1="76" y1="20" x2="80" y2="35" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>
            <line x1="76" y1="45" x2="82" y2="65" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>
            
            <path d="M42 45 L138 45" stroke="#f59e0b" stroke-width="2" stroke-dasharray="4 3"/>
            <polygon points="138,42 144,45 138,48" fill="#f59e0b"/>
          </svg>
        </div>
        <div class="pill pill-glass">See-Through</div>
      </div>

      
      <div class="feature-card glass-card">
        <div class="svg-box">
          <svg viewBox="0 0 160 90" fill="none" xmlns="http://www.w3.org/2000/svg">
            
            <g transform="translate(42, 10)">
              
              <path d="M10 68 L15 20 L38 20 L30 45 L38 68 Z" fill="#e0f2fe" stroke="#0284c7" stroke-width="2"/>
              
              <path d="M44 20 L65 20 L60 68 L44 68 L36 45 Z" fill="#e0f2fe" stroke="#0284c7" stroke-width="2"/>
              
              <path d="M38 20 L30 45 L38 68" stroke="#0369a1" stroke-width="2" stroke-linejoin="round"/>
              <path d="M30 45 L18 42" stroke="#0369a1" stroke-width="1.5"/>
              <path d="M34 55 L46 58" stroke="#0369a1" stroke-width="1.5"/>
              
              <polygon points="3,35 9,28 11,36" fill="#bae6fd" stroke="#0284c7" stroke-width="1.5"/>
              <polygon points="68,48 76,42 74,52" fill="#bae6fd" stroke="#0284c7" stroke-width="1.5"/>
              <polygon points="34,12 40,6 43,14" fill="#bae6fd" stroke="#0284c7" stroke-width="1.5"/>
              
              <path d="M68 18 L70 23 L75 25 L70 27 L68 32 L66 27 L61 25 L66 23 Z" fill="#38bdf8"/>
            </g>
          </svg>
        </div>
        <div class="pill pill-warning">Breaks easily</div>
      </div>
    </div>

    
    <div class="column">
      <div class="col-header header-plastic">Plastic</div>

      
      <div class="feature-card plastic-card">
        <div class="svg-box">
          <svg viewBox="0 0 160 90" fill="none" xmlns="http://www.w3.org/2000/svg">
            
            <g transform="translate(18, 12)">
              
              <rect x="22" y="2" width="12" height="8" rx="2" fill="#db2777"/>
              <rect x="24" y="0" width="8" height="3" fill="#be185d"/>
              
              <path d="M16 12 Q28 10 40 12 Q44 28 36 38 Q44 50 40 64 Q28 66 16 64 Q12 50 20 38 Q12 28 16 12 Z" fill="#fbcfe8" stroke="#db2777" stroke-width="2.5"/>
              
              <path d="M4 38 L14 38" stroke="#db2777" stroke-width="2.5" stroke-linecap="round"/>
              <polygon points="12,34 17,38 12,42" fill="#db2777"/>
              <path d="M52 38 L42 38" stroke="#db2777" stroke-width="2.5" stroke-linecap="round"/>
              <polygon points="44,34 39,38 44,42" fill="#db2777"/>
            </g>
            
            <g transform="translate(92, 24)">
              
              <rect x="10" y="24" width="36" height="20" rx="3" fill="#ec4899" stroke="#be185d" stroke-width="2"/>
              <circle cx="18" cy="24" r="3" fill="#f472b6" stroke="#be185d" stroke-width="1.5"/>
              <circle cx="28" cy="24" r="3" fill="#f472b6" stroke="#be185d" stroke-width="1.5"/>
              <circle cx="38" cy="24" r="3" fill="#f472b6" stroke="#be185d" stroke-width="1.5"/>
              
              <path d="M2 38 Q12 12 28 16" stroke="#db2777" stroke-width="2" stroke-dasharray="3 3" fill="none"/>
              <polygon points="26,13 32,18 26,20" fill="#db2777"/>
            </g>
          </svg>
        </div>
        <div class="pill pill-plastic">Bends &amp; bounces</div>
      </div>

      
      <div class="feature-card plastic-card">
        <div class="svg-box">
          <svg viewBox="0 0 160 90" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g transform="translate(14, 14)">
              
              <circle cx="22" cy="20" r="16" fill="#ef4444" stroke="#b91c1c" stroke-width="2"/>
              <circle cx="17" cy="18" r="2.5" fill="#fecaca"/>
              <circle cx="27" cy="18" r="2.5" fill="#fecaca"/>
              <circle cx="17" cy="24" r="2.5" fill="#fecaca"/>
              <circle cx="27" cy="24" r="2.5" fill="#fecaca"/>

              
              <polygon points="68,6 72,16 83,16 74,23 77,33 68,27 59,33 62,23 53,16 64,16" fill="#facc15" stroke="#ca8a04" stroke-width="2" stroke-linejoin="round"/>

              
              <polygon points="112,8 128,34 96,34" fill="#a855f7" stroke="#7e22ce" stroke-width="2" stroke-linejoin="round"/>

              
              <rect x="42" y="44" width="48" height="16" rx="4" fill="#06b6d4" stroke="#0e7490" stroke-width="2"/>
              <circle cx="52" cy="44" r="3" fill="#67e8f9" stroke="#0e7490" stroke-width="1.5"/>
              <circle cx="66" cy="44" r="3" fill="#67e8f9" stroke="#0e7490" stroke-width="1.5"/>
              <circle cx="80" cy="44" r="3" fill="#67e8f9" stroke="#0e7490" stroke-width="1.5"/>
            </g>
          </svg>
        </div>
        <div class="pill pill-color">Any shape &amp; colour</div>
      </div>
    </div>
  </div>

</body>
</html>

Identifying Wood, Metal, Plastic, and Glass

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Material Properties in Everyday Objects</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e293b;
      background: transparent;
      padding: 8px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }
    .header-text {
      text-align: center;
      margin-bottom: 12px;
    }
    .header-text h1 {
      font-size: 17px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.01em;
    }
    .header-text p {
      font-size: 12px;
      color: #64748b;
      margin-top: 2px;
    }
    .diagram-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 680px;
    }
    @media (max-width: 520px) {
      .diagram-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      body {
        padding: 6px;
        min-height: auto;
      }
    }
    .object-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: transparent;
      padding: 4px;
    }
    .object-title {
      font-size: 15px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 4px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .svg-stage {
      width: 100%;
      max-width: 320px;
      height: auto;
      aspect-ratio: 320 / 210;
      display: block;
      overflow: visible;
    }

    /* Glow and Line Styles */
    .glow-line-metal {
      stroke: #64748b;
      filter: drop-shadow(0 0 3px rgba(100, 116, 139, 0.5));
    }
    .glow-line-plastic {
      stroke: #0284c7;
      filter: drop-shadow(0 0 3px rgba(2, 132, 199, 0.5));
    }
    .glow-line-wood {
      stroke: #d97706;
      filter: drop-shadow(0 0 3px rgba(217, 119, 6, 0.5));
    }
    .pointer-line {
      stroke-dasharray: 4, 3;
      animation: dash 14s linear infinite;
    }
    @keyframes dash {
      to { stroke-dashoffset: -100; }
    }

    /* Interactive Material Groups */
    .material-group {
      cursor: pointer;
      transition: opacity 0.2s ease, filter 0.2s ease;
    }
    .material-group:hover {
      filter: brightness(1.08);
    }
    .material-group:focus-visible {
      outline: 2px solid #3b82f6;
      outline-offset: 2px;
    }

    /* SVG Callout Box Styles */
    .tag-rect {
      rx: 6px;
      ry: 6px;
    }
    .tag-title {
      font-family: inherit;
      font-weight: 700;
      font-size: 11.5px;
    }
    .tag-desc {
      font-family: inherit;
      font-weight: 500;
      font-size: 10px;
      fill: #475569;
    }
  </style>
</head>
<body>

  <div class="header-text">
    <h1>Material Properties in Everyday Objects</h1>
    <p>Hover or tap parts to inspect why each material was chosen</p>
  </div>

  <div class="diagram-grid">
    
    <div class="object-section">
      <div class="object-title">✂️ Scissors</div>
      <svg class="svg-stage" viewBox="0 0 320 210" aria-label="Labeled diagram of scissors">
        <defs>
          <linearGradient id="bladeGrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#f8fafc"/>
            <stop offset="45%" stop-color="#cbd5e1"/>
            <stop offset="100%" stop-color="#94a3b8"/>
          </linearGradient>
          <linearGradient id="metalTagGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#ffffff"/>
            <stop offset="100%" stop-color="#f1f5f9"/>
          </linearGradient>
          <linearGradient id="plasticTagGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#ffffff"/>
            <stop offset="100%" stop-color="#f0f9ff"/>
          </linearGradient>
          <filter id="boxShadow" x="-10%" y="-10%" width="120%" height="130%">
            <feDropShadow dx="0" dy="1.5" stdDeviation="2" flood-opacity="0.08"/>
          </filter>
        </defs>

        
        <g id="scissors-blades" class="material-group" tabindex="0" role="button" aria-label="Metal blades: Strong and sharp">
          
          <path d="M 153,98 L 160,22 L 170,98 Z" fill="url(#bladeGrad)" stroke="#64748b" stroke-width="1.5" stroke-linejoin="round"/>
          <line x1="160" y1="22" x2="157" y2="98" stroke="#ffffff" stroke-width="1" opacity="0.8"/>
          
          <path d="M 167,98 L 160,22 L 150,98 Z" fill="url(#bladeGrad)" stroke="#64748b" stroke-width="1.5" stroke-linejoin="round"/>
          
          <circle cx="160" cy="98" r="4.5" fill="#334155" stroke="#e2e8f0" stroke-width="1.5"/>
        </g>

        <g id="scissors-handles" class="material-group" tabindex="0" role="button" aria-label="Plastic handles: Comfortable grip">
          
          <path d="M 152,98 C 126,112 120,154 136,174 C 150,190 162,160 156,132 Z" fill="#0284c7" stroke="#0369a1" stroke-width="1.5"/>
          <ellipse cx="140" cy="158" rx="7" ry="14" fill="#ffffff" stroke="#0369a1" stroke-width="1.2" transform="rotate(-10 140 158)"/>
          
          
          <path d="M 168,98 C 194,112 200,154 184,174 C 170,190 158,160 164,132 Z" fill="#0ea5e9" stroke="#0284c7" stroke-width="1.5"/>
          <ellipse cx="180" cy="158" rx="7" ry="14" fill="#ffffff" stroke="#0284c7" stroke-width="1.2" transform="rotate(10 180 158)"/>
        </g>

        
        <g class="material-group" tabindex="0">
          <polyline points="163,55 195,40 215,40" fill="none" stroke-width="1.5" class="pointer-line glow-line-metal"/>
          <circle cx="163" cy="55" r="3.5" fill="#475569" stroke="#ffffff" stroke-width="1"/>
          
          <g transform="translate(205, 18)" filter="url(#boxShadow)">
            <rect class="tag-rect" width="110" height="42" fill="url(#metalTagGrad)" stroke="#cbd5e1" stroke-width="1.2"/>
            <circle cx="12" cy="15" r="4" fill="#475569"/>
            <text x="22" y="19" class="tag-title" fill="#334155">Metal</text>
            <text x="10" y="34" class="tag-desc">Strong &amp; sharp</text>
          </g>
        </g>

        
        <g class="material-group" tabindex="0">
          <polyline points="135,160 115,168 95,168" fill="none" stroke-width="1.5" class="pointer-line glow-line-plastic"/>
          <circle cx="135" cy="160" r="3.5" fill="#0284c7" stroke="#ffffff" stroke-width="1"/>

          <g transform="translate(4, 146)" filter="url(#boxShadow)">
            <rect class="tag-rect" width="102" height="42" fill="url(#plasticTagGrad)" stroke="#bae6fd" stroke-width="1.2"/>
            <circle cx="12" cy="15" r="4" fill="#0284c7"/>
            <text x="22" y="19" class="tag-title" fill="#0369a1">Plastic</text>
            <text x="10" y="34" class="tag-desc">Comfortable grip</text>
          </g>
        </g>
      </svg>
    </div>

    
    <div class="object-section">
      <div class="object-title">✏️ Pencil</div>
      <svg class="svg-stage" viewBox="0 0 320 210" aria-label="Labeled diagram of pencil">
        <defs>
          <linearGradient id="ferruleGrad" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stop-color="#cbd5e1"/>
            <stop offset="50%" stop-color="#f8fafc"/>
            <stop offset="100%" stop-color="#94a3b8"/>
          </linearGradient>
          <linearGradient id="woodTagGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#ffffff"/>
            <stop offset="100%" stop-color="#fffbeb"/>
          </linearGradient>
        </defs>

        
        <g id="pencil-illustration">
          
          <path d="M 152,22 Q 160,15 168,22 L 168,30 L 152,30 Z" fill="#f472b6" stroke="#db2777" stroke-width="1"/>
          
          
          <g class="material-group" tabindex="0" role="button" aria-label="Metal ferrule: Holds the eraser">
            <rect x="151" y="30" width="18" height="15" fill="url(#ferruleGrad)" stroke="#475569" stroke-width="1"/>
            <line x1="151" y1="34" x2="169" y2="34" stroke="#64748b" stroke-width="0.8"/>
            <line x1="151" y1="38" x2="169" y2="38" stroke="#64748b" stroke-width="0.8"/>
            <line x1="151" y1="42" x2="169" y2="42" stroke="#64748b" stroke-width="0.8"/>
          </g>

          
          <g class="material-group" tabindex="0" role="button" aria-label="Wood body: Light and easy to sharpen">
            <rect x="151" y="45" width="18" height="105" fill="#f59e0b" stroke="#d97706" stroke-width="1"/>
            
            <line x1="157" y1="45" x2="157" y2="150" stroke="#fcd34d" stroke-width="1.8"/>
            <line x1="163" y1="45" x2="163" y2="150" stroke="#b45309" stroke-width="1.5"/>

            
            <polygon points="151,150 169,150 160,185" fill="#fde68a" stroke="#d97706" stroke-width="1"/>
            
            
            <polygon points="157,173 163,173 160,185" fill="#1e293b"/>
          </g>
        </g>

        
        <g class="material-group" tabindex="0">
          <polyline points="169,37 195,28 215,28" fill="none" stroke-width="1.5" class="pointer-line glow-line-metal"/>
          <circle cx="169" cy="37" r="3.5" fill="#475569" stroke="#ffffff" stroke-width="1"/>

          <g transform="translate(205, 8)" filter="url(#boxShadow)">
            <rect class="tag-rect" width="110" height="42" fill="url(#metalTagGrad)" stroke="#cbd5e1" stroke-width="1.2"/>
            <circle cx="12" cy="15" r="4" fill="#475569"/>
            <text x="22" y="19" class="tag-title" fill="#334155">Metal</text>
            <text x="10" y="34" class="tag-desc">Holds the eraser</text>
          </g>
        </g>

        
        <g class="material-group" tabindex="0">
          <polyline points="151,98 120,98 95,98" fill="none" stroke-width="1.5" class="pointer-line glow-line-wood"/>
          <circle cx="151" cy="98" r="3.5" fill="#d97706" stroke="#ffffff" stroke-width="1"/>

          <g transform="translate(4, 76)" filter="url(#boxShadow)">
            <rect class="tag-rect" width="102" height="44" fill="url(#woodTagGrad)" stroke="#fed7aa" stroke-width="1.2"/>
            <circle cx="12" cy="15" r="4" fill="#d97706"/>
            <text x="22" y="19" class="tag-title" fill="#b45309">Wood</text>
            <text x="10" y="33" class="tag-desc">Light &amp; easy to</text>
            <text x="10" y="43" class="tag-desc">sharpen</text>
          </g>
        </g>
      </svg>
    </div>
  </div>

</body>
</html>

science.ks1.y2.t4.s1

Aligned learning resources

Related diagrams