<!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: transparent;
      color: #1e2945;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      user-select: none;
      -webkit-user-select: none;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
      max-width: 620px;
    }
    .panel {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 12px 8px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .panel:hover {
      border-color: #cbd5e1;
    }
    .panel.active {
      border-color: #22b7ff;
      box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.25);
    }
    .title {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 8px;
      line-height: 1.2;
    }
    .visual-box {
      width: 100%;
      height: 105px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
    }
    .visual-box svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .badge {
      font-size: 12px;
      font-weight: 700;
      padding: 5px 8px;
      border-radius: 20px;
      width: 100%;
      max-width: 130px;
      line-height: 1.2;
    }
    .badge-garden {
      background: #ecfdf5;
      color: #065f46;
      border: 1px solid #a7f3d0;
    }
    .badge-sand {
      background: #fefce8;
      color: #854d0e;
      border: 1px solid #fde047;
    }
    .badge-clay {
      background: #fff7ed;
      color: #9a3412;
      border: 1px solid #fed7aa;
    }
    @media (max-width: 380px) {
      .title {
        font-size: 13px;
      }
      .badge {
        font-size: 11px;
        padding: 4px 4px;
      }
      .visual-box {
        height: 90px;
      }
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="panel active" onclick="selectPanel(this)">
      <div class="title">Garden Soil</div>
      <div class="visual-box">
        <svg viewBox="0 0 120 100" fill="none" xmlns="http://www.w3.org/2000/svg">
          
          <path d="M12 82 Q 60 48 108 82 Q 60 92 12 82 Z" fill="#4a2e18"/>
          
          <circle cx="34" cy="74" r="4.5" fill="#361f0e"/>
          <circle cx="50" cy="68" r="5" fill="#5c3a21"/>
          <circle cx="70" cy="72" r="4" fill="#361f0e"/>
          <circle cx="86" cy="76" r="3.5" fill="#5c3a21"/>
          <circle cx="42" cy="78" r="3" fill="#291609"/>
          <circle cx="62" cy="80" r="4" fill="#361f0e"/>
          <circle cx="78" cy="79" r="3" fill="#291609"/>
          
          <path d="M60 65 Q 60 42 60 28" stroke="#16a34a" stroke-width="3.5" stroke-linecap="round"/>
          
          <path d="M60 42 C 45 42 40 30 40 30 C 40 30 52 28 60 42 Z" fill="#22c55e"/>
          
          <path d="M60 34 C 74 34 80 20 80 20 C 80 20 68 20 60 34 Z" fill="#4ade80"/>
        </svg>
      </div>
      <div class="badge badge-garden">Crumbly &amp; Dark</div>
    </div>

    
    <div class="panel" onclick="selectPanel(this)">
      <div class="title">Sand</div>
      <div class="visual-box">
        <svg viewBox="0 0 120 100" fill="none" xmlns="http://www.w3.org/2000/svg">
          
          <path d="M10 84 Q 55 58 100 84 Q 55 92 10 84 Z" fill="#ecd396"/>
          <path d="M22 84 Q 55 64 90 84" stroke="#dfbe74" stroke-width="2" stroke-linecap="round" fill="none"/>
          <circle cx="30" cy="80" r="1.5" fill="#c69f52"/>
          <circle cx="42" cy="74" r="1.5" fill="#c69f52"/>
          <circle cx="58" cy="73" r="1.5" fill="#c69f52"/>
          <circle cx="75" cy="78" r="1.5" fill="#c69f52"/>
          
          <g transform="translate(48, 8)">
            
            <circle cx="34" cy="34" r="24" fill="#ffffff" stroke="#0ea5e9" stroke-width="3.5"/>
            <circle cx="34" cy="34" r="21" fill="#f0f9ff" fill-opacity="0.85"/>
            
            <circle cx="26" cy="28" r="3.8" fill="#d4a359" stroke="#b88437" stroke-width="0.8"/>
            <circle cx="38" cy="25" r="4.2" fill="#e8c77e" stroke="#c99f47" stroke-width="0.8"/>
            <circle cx="32" cy="39" r="4.5" fill="#cda052" stroke="#a7792c" stroke-width="0.8"/>
            <circle cx="43" cy="37" r="3.4" fill="#dfbe74" stroke="#be9640" stroke-width="0.8"/>
            
            <path d="M18 24 A 19 19 0 0 1 34 15" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" fill="none"/>
            
            <line x1="51" y1="51" x2="66" y2="66" stroke="#0284c7" stroke-width="5" stroke-linecap="round"/>
          </g>
        </svg>
      </div>
      <div class="badge badge-sand">Gritty &amp; Tan</div>
    </div>

    
    <div class="panel" onclick="selectPanel(this)">
      <div class="title">Clay Soil</div>
      <div class="visual-box">
        <svg viewBox="0 0 120 100" fill="none" xmlns="http://www.w3.org/2000/svg">
          
          <ellipse cx="60" cy="62" rx="42" ry="24" fill="#c2410c"/>
          <path d="M26 60 C 24 45 42 34 60 34 C 78 34 96 46 94 60 C 92 76 74 84 60 84 C 44 84 28 75 26 60 Z" fill="#d95d24"/>
          
          <path d="M42 42 Q 62 48 76 40" stroke="#ea7a47" stroke-width="3.5" stroke-linecap="round" fill="none"/>
          <path d="M35 55 Q 60 63 85 54" stroke="#a43306" stroke-width="3" stroke-linecap="round" fill="none"/>
          <ellipse cx="48" cy="50" rx="14" ry="7" fill="#ea7a47" fill-opacity="0.5"/>
          
          <circle cx="86" cy="74" r="8" fill="#c2410c"/>
          <circle cx="85" cy="73" r="7.5" fill="#d95d24"/>
          <ellipse cx="83" cy="70" rx="3" ry="2" fill="#ea7a47"/>
        </svg>
      </div>
      <div class="badge badge-clay">Sticky &amp; Reddish</div>
    </div>
  </div>

  <script>
    function selectPanel(el) {
      document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
      el.classList.add('active');
    }
  </script>
</body>
</html>

Describing Rocks, Soil, and Water

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

    /* Property Badges */
    .badge-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 480px;
      margin-bottom: 4px;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      color: #0369a1;
    }

    /* Stage Area */
    .stage-wrap {
      width: 100%;
      max-width: 480px;
      position: relative;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    /* Interactive Stepper Tabs */
    .controls {
      display: flex;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 420px;
      margin-top: 4px;
    }
    .tab-btn {
      flex: 1;
      padding: 8px 4px;
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.25s ease;
    }
    .tab-btn.active {
      background: #e0f2fe;
      border-color: #38bdf8;
      color: #0284c7;
      box-shadow: 0 1px 4px rgba(56, 189, 248, 0.2);
    }
  </style>
</head>
<body>

  
  <div class="badge-row">
    <span class="badge">💧 Flows easily</span>
    <span class="badge">🔄 Takes container shape</span>
    <span class="badge">✨ Clear &amp; wet</span>
  </div>

  
  <div class="stage-wrap">
    <svg viewBox="0 0 420 220" preserveAspectRatio="xMidYMid meet">
      <defs>
        
        <linearGradient id="waterGrad" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#38bdf8" stop-opacity="0.85" />
          <stop offset="100%" stop-color="#0284c7" stop-opacity="0.95" />
        </linearGradient>

        
        
        <clipPath id="clipBowl">
          <path d="M 28,125 Q 75,210 122,125 Z" />
        </clipPath>

        
        <clipPath id="clipCylinder">
          <rect x="180" y="80" width="60" height="110" rx="4" />
        </clipPath>

        
        <clipPath id="clipTub">
          <rect x="295" y="130" width="100" height="60" rx="5" />
        </clipPath>

        
        <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur stdDeviation="1" result="blur" />
          <feComposite in="SourceGraphic" in2="blur" operator="over" />
        </filter>
      </defs>

      
      <line x1="10" y1="192" x2="410" y2="192" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round" />

      
      <g id="groupBowl" opacity="0.6" style="transition: opacity 0.3s ease; cursor: pointer;">
        
        <g clip-path="url(#clipBowl)">
          <rect id="waterBowl" x="20" y="195" width="110" height="75" fill="url(#waterGrad)" style="transition: y 0.8s cubic-bezier(0.4, 0, 0.2, 1);" />
          <ellipse id="surfBowl" cx="75" cy="195" rx="35" ry="4" fill="#7dd3fc" opacity="0.8" style="transition: cy 0.8s cubic-bezier(0.4, 0, 0.2, 1);" />
        </g>
        
        <path d="M 26,125 Q 75,212 124,125" fill="none" stroke="#64748b" stroke-width="3" stroke-linecap="round" />
        <ellipse cx="75" cy="125" rx="49" ry="6" fill="rgba(255,255,255,0.4)" stroke="#64748b" stroke-width="2.5" />
        
        <path d="M 38,145 Q 75,200 112,145" fill="none" stroke="#ffffff" stroke-width="1.5" opacity="0.6" />
      </g>

      
      <g id="groupCyl" opacity="0.6" style="transition: opacity 0.3s ease; cursor: pointer;">
        
        <g clip-path="url(#clipCylinder)">
          <rect id="waterCyl" x="175" y="192" width="70" height="115" fill="url(#waterGrad)" style="transition: y 0.8s cubic-bezier(0.4, 0, 0.2, 1);" />
          <ellipse id="surfCyl" cx="210" cy="192" rx="28" ry="4" fill="#7dd3fc" opacity="0.8" style="transition: cy 0.8s cubic-bezier(0.4, 0, 0.2, 1);" />
        </g>
        
        <rect x="180" y="80" width="60" height="110" rx="4" fill="none" stroke="#64748b" stroke-width="3" />
        <ellipse cx="210" cy="80" rx="30" ry="5" fill="rgba(255,255,255,0.4)" stroke="#64748b" stroke-width="2.5" />
        
        <line x1="187" y1="88" x2="187" y2="182" stroke="#ffffff" stroke-width="2" opacity="0.6" stroke-linecap="round" />
      </g>

      
      <g id="groupTub" opacity="0.6" style="transition: opacity 0.3s ease; cursor: pointer;">
        
        <g clip-path="url(#clipTub)">
          <rect id="waterTub" x="290" y="192" width="110" height="65" fill="url(#waterGrad)" style="transition: y 0.8s cubic-bezier(0.4, 0, 0.2, 1);" />
          <line id="surfTub" x1="295" y1="192" x2="395" y2="192" stroke="#7dd3fc" stroke-width="3" opacity="0.8" style="transition: y1 0.8s ease, y2 0.8s ease;" />
        </g>
        
        <rect x="295" y="130" width="100" height="60" rx="5" fill="none" stroke="#64748b" stroke-width="3" />
        
        <rect x="293" y="127" width="104" height="6" rx="3" fill="rgba(255,255,255,0.4)" stroke="#64748b" stroke-width="2" />
        
        <line x1="302" y1="138" x2="302" y2="182" stroke="#ffffff" stroke-width="2" opacity="0.6" stroke-linecap="round" />
      </g>

      
      <path id="pourStream" d="M 75,55 Q 73,95 75,145" fill="none" stroke="#38bdf8" stroke-width="4.5" stroke-linecap="round" opacity="0" filter="url(#glow)" style="transition: opacity 0.2s ease, d 0.4s ease;" />

      
      <g id="pitcherGroup" transform="translate(68, 15) rotate(0)" style="transform-origin: 20px 40px; transition: transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1);">
        
        <path d="M 5,12 L 35,12 L 28,45 L 8,45 Z" fill="rgba(224,242,254,0.6)" stroke="#475569" stroke-width="2.5" stroke-linejoin="round" />
        
        <path d="M 5,12 L -5,16 L 2,24 Z" fill="rgba(224,242,254,0.8)" stroke="#475569" stroke-width="2" stroke-linejoin="round" />
        
        <path d="M 33,16 C 45,18 45,38 27,42" fill="none" stroke="#475569" stroke-width="2.5" stroke-linecap="round" />
        
        <path d="M 7,22 L 32,22 L 27,43 L 9,43 Z" fill="#38bdf8" opacity="0.9" />
        
        <line x1="12" y1="18" x2="10" y2="40" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" />
      </g>
    </svg>
  </div>

  
  <div class="controls">
    <button class="tab-btn active" onclick="setStep(0)">🥣 Bowl</button>
    <button class="tab-btn" onclick="setStep(1)">🧪 Cylinder</button>
    <button class="tab-btn" onclick="setStep(2)">🧊 Tub</button>
  </div>

  <script>
    const steps = [
      {
        pitcherX: 68,
        pitcherY: 28,
        streamD: "M 66,50 Q 70,100 75,145",
        targetGroup: 'groupBowl',
        waterId: 'waterBowl',
        surfId: 'surfBowl',
        fillY: 140,
        type: 'bowl'
      },
      {
        pitcherX: 204,
        pitcherY: -15,
        streamD: "M 202,6 Q 206,55 210,100",
        targetGroup: 'groupCyl',
        waterId: 'waterCyl',
        surfId: 'surfCyl',
        fillY: 96,
        type: 'cyl'
      },
      {
        pitcherX: 338,
        pitcherY: 34,
        streamD: "M 336,55 Q 340,110 345,152",
        targetGroup: 'groupTub',
        waterId: 'waterTub',
        surfId: 'surfTub',
        fillY: 148,
        type: 'tub'
      }
    ];

    let currentStep = 0;
    let autoTimer = null;
    const pitcher = document.getElementById('pitcherGroup');
    const stream = document.getElementById('pourStream');
    const buttons = document.querySelectorAll('.tab-btn');

    function resetAllWater() {
      // Empty bowl
      document.getElementById('waterBowl').setAttribute('y', '195');
      document.getElementById('surfBowl').setAttribute('cy', '195');
      // Empty cylinder
      document.getElementById('waterCyl').setAttribute('y', '192');
      document.getElementById('surfCyl').setAttribute('cy', '192');
      // Empty tub
      document.getElementById('waterTub').setAttribute('y', '192');
      const surfTub = document.getElementById('surfTub');
      surfTub.setAttribute('y1', '192');
      surfTub.setAttribute('y2', '192');

      // Reset group opacities
      ['groupBowl', 'groupCyl', 'groupTub'].forEach(id => {
        document.getElementById(id).style.opacity = '0.45';
      });
    }

    function animateStep(index) {
      currentStep = index;
      const s = steps[index];

      // Update button styles
      buttons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === index);
      });

      // Highlight active container
      ['groupBowl', 'groupCyl', 'groupTub'].forEach(id => {
        document.getElementById(id).style.opacity = (id === s.targetGroup) ? '1' : '0.45';
      });

      // 1. Move pitcher upright to container position
      stream.style.opacity = '0';
      pitcher.style.transform = `translate(${s.pitcherX}px, ${s.pitcherY}px) rotate(0deg)`;

      // 2. Tilt pitcher and turn on water stream
      setTimeout(() => {
        pitcher.style.transform = `translate(${s.pitcherX}px, ${s.pitcherY}px) rotate(-35deg)`;
        stream.setAttribute('d', s.streamD);
        setTimeout(() => {
          stream.style.opacity = '1';

          // 3. Fill water in container
          const wEl = document.getElementById(s.waterId);
          const sEl = document.getElementById(s.surfId);
          wEl.setAttribute('y', s.fillY);
          if (s.type === 'tub') {
            sEl.setAttribute('y1', s.fillY);
            sEl.setAttribute('y2', s.fillY);
          } else {
            sEl.setAttribute('cy', s.fillY);
          }

          // 4. Stop pouring
          setTimeout(() => {
            stream.style.opacity = '0';
            pitcher.style.transform = `translate(${s.pitcherX}px, ${s.pitcherY}px) rotate(0deg)`;
          }, 900);
        }, 200);
      }, 400);
    }

    function setStep(index) {
      clearInterval(autoTimer);
      animateStep(index);
      startCycle();
    }

    // Interactive taps directly on SVG containers
    document.getElementById('groupBowl').onclick = () => setStep(0);
    document.getElementById('groupCyl').onclick = () => setStep(1);
    document.getElementById('groupTub').onclick = () => setStep(2);

    function startCycle() {
      autoTimer = setInterval(() => {
        let next = (currentStep + 1) % steps.length;
        if (next === 0) {
          // Quick reset when looping back to bowl
          resetAllWater();
        }
        animateStep(next);
      }, 3400);
    }

    // Initial run
    resetAllWater();
    animateStep(0);
    startCycle();
  </script>
</body>
</html>

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

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

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

    .column-card {
      border-radius: 14px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: box-shadow 0.2s ease, transform 0.2s ease;
      cursor: pointer;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .column-card:focus-visible,
    .column-card.active {
      box-shadow: 0 0 0 3px currentColor;
    }

    /* Rock Theme */
    .theme-rock {
      background: #f1f5f9;
      border: 2px solid #cbd5e1;
      color: #475569;
    }
    .theme-rock .badge {
      background: #e2e8f0;
      color: #334155;
    }

    /* Soil Theme */
    .theme-soil {
      background: #faf4ed;
      border: 2px solid #e7d6c4;
      color: #7c4a1e;
    }
    .theme-soil .badge {
      background: #f1e4d3;
      color: #5c3210;
    }

    /* Water Theme */
    .theme-water {
      background: #f0f9ff;
      border: 2px solid #bae6fd;
      color: #0369a1;
    }
    .theme-water .badge {
      background: #e0f2fe;
      color: #075985;
    }

    .icon-wrapper {
      font-size: 38px;
      line-height: 1;
      margin-bottom: 6px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
    }

    .col-title {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.01em;
      margin-bottom: 10px;
    }

    .feature-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
    }

    .badge {
      font-size: 12px;
      font-weight: 600;
      padding: 6px 4px;
      border-radius: 8px;
      line-height: 1.25;
    }

    @media (min-width: 480px) {
      body {
        padding: 16px;
      }
      .grid-container {
        gap: 14px;
      }
      .column-card {
        padding: 18px 14px;
      }
      .icon-wrapper {
        font-size: 46px;
        margin-bottom: 8px;
      }
      .col-title {
        font-size: 20px;
        margin-bottom: 14px;
      }
      .badge {
        font-size: 13.5px;
        padding: 8px 6px;
      }
      .feature-list {
        gap: 8px;
      }
    }
  </style>
</head>
<body>

  <div class="grid-container">
    
    <div class="column-card theme-rock" tabindex="0" role="button" aria-label="Rock: Solid, rough or smooth, holds shape">
      <div class="icon-wrapper">🪨</div>
      <div class="col-title">Rock</div>
      <div class="feature-list">
        <div class="badge">Solid & hard</div>
        <div class="badge">Rough or smooth</div>
        <div class="badge">Holds its shape</div>
      </div>
    </div>

    
    <div class="column-card theme-soil" tabindex="0" role="button" aria-label="Soil: Loose mix, crumbly or gritty, brown red or tan">
      <div class="icon-wrapper">🪴</div>
      <div class="col-title">Soil</div>
      <div class="feature-list">
        <div class="badge">Loose mix</div>
        <div class="badge">Crumbly or gritty</div>
        <div class="badge">Brown, red, or tan</div>
      </div>
    </div>

    
    <div class="column-card theme-water" tabindex="0" role="button" aria-label="Water: Liquid, clear & wet, flows and pours">
      <div class="icon-wrapper">💧</div>
      <div class="col-title">Water</div>
      <div class="feature-list">
        <div class="badge">Liquid</div>
        <div class="badge">Clear & wet</div>
        <div class="badge">Flows & pours</div>
      </div>
    </div>
  </div>

  <script>
    const cards = document.querySelectorAll('.column-card');
    cards.forEach(card => {
      card.addEventListener('click', () => {
        cards.forEach(c => c.classList.remove('active'));
        card.classList.add('active');
      });
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100%;
      user-select: none;
      -webkit-user-select: none;
    }

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

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

    .rock-card {
      border-radius: 16px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      text-align: center;
      border: 2px solid transparent;
      box-shadow: 0 2px 6px rgba(30, 41, 69, 0.05);
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    @media (max-width: 480px) {
      .rock-card {
        flex-direction: row;
        padding: 10px 14px;
        text-align: left;
        gap: 14px;
      }
    }

    .card-river {
      background-color: #eff6ff;
      border-color: #dbeafe;
    }
    .card-river.active, .card-river:active {
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    }

    .card-granite {
      background-color: #f0fdf4;
      border-color: #dcfce7;
    }
    .card-granite.active, .card-granite:active {
      border-color: #22c55e;
      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
    }

    .card-quartz {
      background-color: #fefce8;
      border-color: #fef9c3;
    }
    .card-quartz.active, .card-quartz:active {
      border-color: #eab308;
      box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.2);
    }

    .illustration {
      width: 90px;
      height: 75px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    @media (max-width: 480px) {
      .illustration {
        width: 70px;
        height: 60px;
        flex-shrink: 0;
      }
    }

    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      width: 100%;
    }

    @media (max-width: 480px) {
      .content {
        align-items: flex-start;
      }
    }

    .title {
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
    }

    .badge {
      font-size: 13px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 20px;
      display: inline-block;
      white-space: nowrap;
    }

    .card-river .badge {
      background: #dbeafe;
      color: #1d4ed8;
    }

    .card-granite .badge {
      background: #dcfce7;
      color: #15803d;
    }

    .card-quartz .badge {
      background: #fef08a;
      color: #854d0e;
    }

    /* Subtle visual animations */
    .sparkle {
      animation: pulseSparkle 2.5s infinite ease-in-out;
    }
    .sparkle-2 {
      animation: pulseSparkle 2.5s infinite ease-in-out 1.25s;
    }

    @keyframes pulseSparkle {
      0%, 100% { opacity: 0.3; transform: scale(0.8); }
      50% { opacity: 1; transform: scale(1.15); }
    }

    .ripple {
      animation: waveRipple 3s infinite ease-out;
      transform-origin: center;
    }

    @keyframes waveRipple {
      0% { opacity: 0.8; stroke-dashoffset: 0; }
      50% { opacity: 0.3; }
      100% { opacity: 0.8; }
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="rock-card card-river" onclick="highlight(this)">
      <div class="illustration">
        <svg viewBox="0 0 100 80" width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
          
          <ellipse cx="50" cy="56" rx="42" ry="14" stroke="#93c5fd" stroke-width="2.5" stroke-dasharray="6 4" class="ripple" />
          <ellipse cx="50" cy="56" rx="32" ry="9" stroke="#60a5fa" stroke-width="2" opacity="0.7" />
          
          <ellipse cx="50" cy="46" rx="30" ry="18" fill="url(#riverGrad)" stroke="#64748b" stroke-width="2" />
          
          <ellipse cx="44" cy="40" rx="16" ry="7" fill="#ffffff" opacity="0.35" transform="rotate(-10 44 40)" />
          <defs>
            <linearGradient id="riverGrad" x1="20" y1="28" x2="80" y2="64" gradientUnits="userSpaceOnUse">
              <stop stop-color="#94a3b8" />
              <stop offset="1" stop-color="#475569" />
            </linearGradient>
          </defs>
        </svg>
      </div>
      <div class="content">
        <div class="title">River Rock</div>
        <div class="badge">Smooth &amp; Gray</div>
      </div>
    </div>

    
    <div class="rock-card card-granite" onclick="highlight(this)">
      <div class="illustration">
        <svg viewBox="0 0 100 80" width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
          
          <polygon points="22,54 28,28 48,18 78,24 84,48 72,66 36,64" fill="url(#graniteGrad)" stroke="#334155" stroke-width="2.5" stroke-linejoin="round" />
          
          <polyline points="28,28 46,42 72,66" stroke="#475569" stroke-width="1.5" opacity="0.6" />
          <polyline points="48,18 46,42 84,48" stroke="#334155" stroke-width="1.5" opacity="0.5" />
          
          <circle cx="38" cy="32" r="2" fill="#0f172a" />
          <circle cx="58" cy="30" r="2.5" fill="#f8fafc" />
          <circle cx="48" cy="50" r="2.2" fill="#0f172a" />
          <circle cx="68" cy="44" r="1.8" fill="#fca5a5" />
          <circle cx="34" cy="48" r="2" fill="#f8fafc" />
          <circle cx="62" cy="56" r="2" fill="#0f172a" />
          <circle cx="52" cy="34" r="1.5" fill="#fca5a5" />
          <circle cx="42" cy="58" r="1.6" fill="#0f172a" />
          <circle cx="72" cy="34" r="2" fill="#f8fafc" />
          <defs>
            <linearGradient id="graniteGrad" x1="22" y1="18" x2="84" y2="66" gradientUnits="userSpaceOnUse">
              <stop stop-color="#cbd5e1" />
              <stop offset="1" stop-color="#94a3b8" />
            </linearGradient>
          </defs>
        </svg>
      </div>
      <div class="content">
        <div class="title">Granite</div>
        <div class="badge">Rough &amp; Speckled</div>
      </div>
    </div>

    
    <div class="rock-card card-quartz" onclick="highlight(this)">
      <div class="illustration">
        <svg viewBox="0 0 100 80" width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
          
          <polygon points="50,12 68,26 62,64 38,64 32,26" fill="#f8fafc" stroke="#60a5fa" stroke-width="2" stroke-linejoin="round" />
          <polygon points="50,12 50,64 38,64 32,26" fill="#ffffff" opacity="0.9" stroke="#60a5fa" stroke-width="2" stroke-linejoin="round" />
          <polygon points="50,12 68,26 50,64" fill="#e0f2fe" opacity="0.75" />
          <polygon points="50,12 50,64 38,64" fill="#bae6fd" opacity="0.4" />
          <polygon points="68,26 80,38 74,64 62,64" fill="#f0f9ff" stroke="#60a5fa" stroke-width="1.8" stroke-linejoin="round" />
          <polygon points="32,26 20,38 26,64 38,64" fill="#e0f2fe" stroke="#60a5fa" stroke-width="1.8" stroke-linejoin="round" />
          
          <g class="sparkle" transform-origin="78 18">
            <path d="M78 12 L80 18 L86 20 L80 22 L78 28 L76 22 L70 20 L76 18 Z" fill="#eab308" />
          </g>
          <g class="sparkle-2" transform-origin="22 22">
            <path d="M22 17 L23.5 21.5 L28 23 L23.5 24.5 L22 29 L20.5 24.5 L16 23 L20.5 21.5 Z" fill="#facc15" />
          </g>
        </svg>
      </div>
      <div class="content">
        <div class="title">Quartz</div>
        <div class="badge">Hard &amp; Shiny</div>
      </div>
    </div>
  </div>

  <script>
    function highlight(card) {
      document.querySelectorAll('.rock-card').forEach(c => c.classList.remove('active'));
      card.classList.add('active');
    }
  </script>
</body>
</html>

OGS.2.ESS.1

Aligned learning resources

Related diagrams