<!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>Magnification Diagram</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }
    .callout {
      background: #ffffff;
      border: 2px solid #22b7ff;
      border-radius: 12px;
      padding: 10px 16px;
      font-size: 15px;
      font-weight: 700;
      text-align: center;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.12);
      width: 100%;
      max-width: 460px;
      margin-bottom: 12px;
    }
    .callout .highlight {
      color: #0088cc;
    }
    .callout .res {
      background: #e0f2fe;
      color: #0284c7;
      padding: 2px 8px;
      border-radius: 6px;
      display: inline-block;
      margin-top: 2px;
    }
    .stage {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 520px;
      margin: auto 0;
    }
    .box {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      height: 190px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      flex: 1;
    }
    .box-left {
      max-width: 140px;
    }
    .box-right {
      max-width: 190px;
    }
    .label {
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      text-align: center;
      line-height: 1.2;
    }
    .bug-area {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      position: relative;
    }
    .bug-tiny {
      font-size: 28px;
      line-height: 1;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
      transition: transform 0.3s ease;
    }
    .bug-large {
      font-size: 80px;
      line-height: 1;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
      transition: font-size 0.3s ease;
    }
    .ruler {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      background: #f1f5f9;
      border-radius: 6px;
      padding: 3px 8px;
      width: 90%;
    }
    .ruler-bar {
      height: 3px;
      background: #94a3b8;
      border-radius: 2px;
      flex: 1;
      position: relative;
    }
    .ruler-bar::before, .ruler-bar::after {
      content: '';
      position: absolute;
      top: -3px;
      width: 2px;
      height: 9px;
      background: #94a3b8;
    }
    .ruler-bar::before { left: 0; }
    .ruler-bar::after { right: 0; }

    .lens-center {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 0 4px;
    }
    .lens-circle {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #ffffff, #dbeafe 70%, #93c5fd);
      border: 3px solid #2563eb;
      box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      position: relative;
    }
    .lens-arrow {
      font-size: 18px;
      color: #2563eb;
      font-weight: 900;
      margin-top: 2px;
    }
    .lens-tag {
      font-size: 12px;
      font-weight: 800;
      color: #2563eb;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 12px;
      padding: 2px 8px;
      white-space: nowrap;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 12px;
      width: 100%;
    }
    .ctrl-btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      color: #334155;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: all 0.2s ease;
    }
    .ctrl-btn.active {
      background: #22b7ff;
      border-color: #009be5;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
    }
  </style>
</head>
<body>

  
  <div class="callout" id="formulaBox">
    Magnification = <span class="highlight">Image</span> / <span class="highlight">Actual</span> = 
    <span class="res" id="ratioText">3 cm / 1 cm = 3× bigger!</span>
  </div>

  
  <div class="stage">
    
    <div class="box box-left">
      <div class="label">Actual Size<br><span style="color:#64748b; font-weight:600;">(1 cm)</span></div>
      <div class="bug-area">
        <div class="bug-tiny">🐞</div>
      </div>
      <div class="ruler">
        <div class="ruler-bar"></div>
        <span>1 cm</span>
      </div>
    </div>

    
    <div class="lens-center">
      <div class="lens-circle">🔍</div>
      <div class="lens-arrow">➔</div>
      <div class="lens-tag" id="lensTag">3× Zoom</div>
    </div>

    
    <div class="box box-right">
      <div class="label">Image Size<br><span id="imgSizeSub" style="color:#0284c7; font-weight:700;">(3 cm)</span></div>
      <div class="bug-area">
        <div class="bug-large" id="bigBug">🐞</div>
      </div>
      <div class="ruler">
        <div class="ruler-bar"></div>
        <span id="rulerText">3 cm</span>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button type="button" class="ctrl-btn" onclick="setZoom(2)">2× Zoom</button>
    <button type="button" class="ctrl-btn active" onclick="setZoom(3)">3× Zoom</button>
    <button type="button" class="ctrl-btn" onclick="setZoom(4)">4× Zoom</button>
  </div>

  <script>
    function setZoom(factor) {
      // Update buttons
      const buttons = document.querySelectorAll('.ctrl-btn');
      buttons.forEach(btn => {
        if (btn.textContent.includes(factor + '×')) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });

      // Update Ladybug font size
      const bigBug = document.getElementById('bigBug');
      const sizeMap = { 2: 56, 3: 82, 4: 104 };
      bigBug.style.fontSize = sizeMap[factor] + 'px';

      // Update Text Values
      document.getElementById('ratioText').textContent = factor + ' cm / 1 cm = ' + factor + '× bigger!';
      document.getElementById('lensTag').textContent = factor + '× Zoom';
      document.getElementById('imgSizeSub').textContent = '(' + factor + ' cm)';
      document.getElementById('rulerText').textContent = factor + ' cm';
    }
  </script>
</body>
</html>

The World Under a Magnifying Glass

<!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 {
      width: 100%;
      height: 100%;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px;
    }
    .diagram-grid {
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 12px;
      width: 100%;
      max-width: 600px;
      align-items: center;
    }
    @media (max-width: 480px) {
      .diagram-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
    }
    .view-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }
    .view-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-bottom: 6px;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .callout-label {
      font-size: 11px;
      font-weight: 700;
      fill: #1e2945;
    }
    .badge {
      position: absolute;
      top: 8px;
      right: 8px;
      background: #22b7ff;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="diagram-grid">
    
    <div class="view-card">
      <div class="view-title">Normal View</div>
      <svg viewBox="0 0 200 220" aria-label="Human hand in normal view">
        
        <path d="M 85 210 L 85 175 C 70 170 55 155 55 130 L 55 100 C 55 92 65 92 65 100 L 65 80 C 65 72 77 72 77 80 L 77 65 C 77 57 89 57 89 65 L 89 80 C 89 74 101 74 101 82 L 101 125 C 101 135 115 135 125 125 L 135 115 C 141 109 149 117 143 123 L 125 145 C 115 160 115 180 115 210 Z" 
              fill="#fcd7b6" stroke="#d49b6a" stroke-width="2.5" stroke-linejoin="round" />
        
        
        <path d="M 75 130 Q 90 135 105 125" fill="none" stroke="#d49b6a" stroke-width="1.5" stroke-linecap="round" />
        <path d="M 70 112 Q 85 118 95 110" fill="none" stroke="#d49b6a" stroke-width="1.5" stroke-linecap="round" />

        
        <circle cx="83" cy="65" r="14" fill="#22b7ff" fill-opacity="0.2" stroke="#009be5" stroke-width="2" stroke-dasharray="3 3" />
        
        
        <path d="M 97 65 C 130 65 150 85 185 85" fill="none" stroke="#009be5" stroke-width="2" stroke-dasharray="4 3" marker-end="url(#arrow)" />
        <defs>
          <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 0 1 L 8 5 L 0 9 z" fill="#009be5" />
          </marker>
        </defs>
      </svg>
    </div>

    
    <div class="view-card">
      <span class="badge">10× Zoom</span>
      <div class="view-title">Magnified View</div>
      <svg viewBox="0 0 250 220" aria-label="Magnified fingertip skin showing ridges, pores, and fine hair">
        
        <rect x="180" y="165" width="55" height="14" rx="7" transform="rotate(38 180 165)" fill="#475569" stroke="#334155" stroke-width="2"/>
        <rect x="172" y="157" width="16" height="10" rx="3" transform="rotate(38 172 157)" fill="#94a3b8"/>

        
        <circle cx="110" cy="105" r="82" fill="#cbd5e1" stroke="#475569" stroke-width="4" />
        <circle cx="110" cy="105" r="76" fill="#fbd5b5" />

        
        <defs>
          <clipPath id="lens-clip">
            <circle cx="110" cy="105" r="75" />
          </clipPath>
        </defs>

        
        <g clip-path="url(#lens-clip)">
          
          <rect x="30" y="25" width="160" height="160" fill="#fbd5b5" />

          
          <g fill="none" stroke="#d98c55" stroke-width="4" stroke-linecap="round">
            
            <path d="M 110 95 C 100 95 92 105 92 118 C 92 135 110 145 125 135 C 135 128 135 110 125 102 C 118 96 102 98 98 108" />
            
            
            <path d="M 110 83 C 92 83 80 98 80 118 C 80 146 110 160 135 146 C 150 137 150 108 135 94 C 122 84 98 86 88 102" />
            <path d="M 110 71 C 84 71 68 91 68 118 C 68 156 110 174 146 156 C 164 144 164 102 144 84 C 128 72 94 74 78 98" />
            <path d="M 110 59 C 76 59 56 84 56 118 C 56 166 110 188 156 166 C 178 152 178 96 154 74" />
            <path d="M 110 47 C 68 47 44 77 44 118 C 44 176 110 202 166 176" />
          </g>

          
          <g fill="#9a4e18">
            <circle cx="86" cy="115" r="2.2" />
            <circle cx="98" cy="132" r="2.2" />
            <circle cx="122" cy="133" r="2.2" />
            <circle cx="132" cy="118" r="2.2" />
            <circle cx="120" cy="104" r="2.2" />
            <circle cx="74" cy="118" r="2.2" />
            <circle cx="88" cy="148" r="2.2" />
            <circle cx="144" cy="136" r="2.2" />
            <circle cx="140" cy="98" r="2.2" />
            <circle cx="106" cy="74" r="2.2" />
            <circle cx="62" cy="118" r="2.2" />
            <circle cx="156" cy="118" r="2.2" />
          </g>

          
          
          <ellipse cx="78" cy="100" rx="3.5" ry="2" fill="#884414" opacity="0.6" />
          
          <path d="M 78 100 Q 60 70 42 52" fill="none" stroke="#5c3110" stroke-width="2.5" stroke-linecap="round" />
          
          <path d="M 43 53 Q 36 44 30 38" fill="none" stroke="#78421a" stroke-width="1.5" stroke-linecap="round" />

          
          <path d="M 60 55 A 70 70 0 0 1 150 45" fill="none" stroke="#ffffff" stroke-width="4" stroke-linecap="round" opacity="0.45" />
        </g>

        
        <circle cx="110" cy="105" r="76" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.4" />

        
        
        <g>
          <line x1="40" y1="46" x2="16" y2="30" stroke="#0f172a" stroke-width="1.2" />
          <circle cx="40" cy="46" r="2.5" fill="#0f172a" />
          <text x="16" y="24" class="callout-label" text-anchor="start">Tiny Hairs</text>
        </g>

        
        <g>
          <line x1="86" y1="115" x2="28" y2="155" stroke="#0f172a" stroke-width="1.2" />
          <circle cx="86" cy="115" r="2.5" fill="#0f172a" />
          <text x="28" y="170" class="callout-label" text-anchor="start">Pores</text>
        </g>

        
        <g>
          <line x1="126" y1="98" x2="182" y2="40" stroke="#0f172a" stroke-width="1.2" />
          <circle cx="126" cy="98" r="2.5" fill="#0f172a" />
          <text x="182" y="34" class="callout-label" text-anchor="middle">Swirl Ridges</text>
        </g>
      </svg>
    </div>
  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
    }
    .diagram-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 580px;
      align-items: stretch;
    }
    .view-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      text-align: center;
      position: relative;
    }
    .view-label {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      margin-top: 10px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .badge {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 3px 8px;
      border-radius: 20px;
      background: #e2e8f0;
      color: #475569;
      margin-bottom: 8px;
    }
    .badge-zoom {
      background: #dbeafe;
      color: #1d4ed8;
    }
    .graphic-container {
      width: 100%;
      aspect-ratio: 1 / 1;
      max-width: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    @media (max-width: 420px) {
      .diagram-grid {
        gap: 8px;
      }
      .view-card {
        padding: 8px;
      }
      .view-label {
        font-size: 13px;
        margin-top: 6px;
      }
      .badge {
        font-size: 10px;
        padding: 2px 6px;
      }
    }
  </style>
</head>
<body>

  <div class="diagram-grid">
    
    <div class="view-card">
      <span class="badge">Naked Eye</span>
      <div class="graphic-container">
        <svg viewBox="0 0 200 200">
          <defs>
            <linearGradient id="shirtGrad" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stop-color="#3b82f6" />
              <stop offset="100%" stop-color="#1d4ed8" />
            </linearGradient>
            <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
              <feDropShadow dx="0" dy="4" stdDeviation="4" flood-opacity="0.12" />
            </filter>
          </defs>

          
          <path d="M 65 35 
                   C 80 48, 120 48, 135 35 
                   L 175 52 
                   L 155 88 
                   L 138 80 
                   L 138 165 
                   L 62 165 
                   L 62 80 
                   L 45 88 
                   L 25 52 Z" 
                fill="url(#shirtGrad)" 
                filter="url(#shadow)" 
                stroke="#1e40af" 
                stroke-width="1.5" />

          
          <path d="M 65 35 C 80 50, 120 50, 135 35" fill="none" stroke="#60a5fa" stroke-width="2.5" stroke-linecap="round" />
          
          
          <rect x="75" y="90" width="50" height="40" rx="4" fill="rgba(255,255,255,0.08)" />

          
          <circle cx="100" cy="110" r="22" fill="none" stroke="#f59e0b" stroke-width="2.5" stroke-dasharray="4 3" />
          <circle cx="100" cy="110" r="3" fill="#f59e0b" />
          
          
          <path d="M 122 110 L 195 110" stroke="#f59e0b" stroke-width="2" stroke-dasharray="3 3" />
          <polygon points="192,106 199,110 192,114" fill="#f59e0b" />
        </svg>
      </div>
      <div class="view-label">Solid Shirt</div>
    </div>

    
    <div class="view-card">
      <span class="badge badge-zoom">Magnified 100×</span>
      <div class="graphic-container">
        <svg viewBox="0 0 200 200">
          <defs>
            
            <clipPath id="lensClip">
              <circle cx="100" cy="100" r="82" />
            </clipPath>

            
            <linearGradient id="blueThread" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="#1e40af" />
              <stop offset="30%" stop-color="#3b82f6" />
              <stop offset="70%" stop-color="#60a5fa" />
              <stop offset="100%" stop-color="#1e3a8a" />
            </linearGradient>

            <linearGradient id="whiteThread" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stop-color="#94a3b8" />
              <stop offset="35%" stop-color="#f8fafc" />
              <stop offset="70%" stop-color="#e2e8f0" />
              <stop offset="100%" stop-color="#64748b" />
            </linearGradient>

            <filter id="threadShadow" x="-20%" y="-20%" width="140%" height="140%">
              <feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#0f172a" flood-opacity="0.35" />
            </filter>
          </defs>

          
          <circle cx="100" cy="100" r="88" fill="#e2e8f0" stroke="#cbd5e1" stroke-width="3" />
          <circle cx="100" cy="100" r="84" fill="#0f172a" />

          
          <g clip-path="url(#lensClip)">
            
            <rect x="0" y="0" width="200" height="200" fill="#091322" />

            
            <rect x="10" y="24" width="180" height="20" rx="8" fill="url(#blueThread)" />

            
            <rect x="10" y="68" width="180" height="20" rx="8" fill="url(#blueThread)" />

            
            <rect x="10" y="112" width="180" height="20" rx="8" fill="url(#blueThread)" />

            
            <rect x="10" y="156" width="180" height="20" rx="8" fill="url(#blueThread)" />

            
            <g filter="url(#threadShadow)">
              
              <rect x="24" y="10" width="20" height="180" rx="8" fill="url(#whiteThread)" />
              
              
              <rect x="68" y="10" width="20" height="180" rx="8" fill="url(#whiteThread)" />

              
              <rect x="112" y="10" width="20" height="180" rx="8" fill="url(#whiteThread)" />

              
              <rect x="156" y="10" width="20" height="180" rx="8" fill="url(#whiteThread)" />
            </g>

            
            
            <g filter="url(#threadShadow)">
              
              <rect x="65" y="24" width="26" height="20" rx="6" fill="url(#blueThread)" />
              <rect x="153" y="24" width="26" height="20" rx="6" fill="url(#blueThread)" />

              
              <rect x="21" y="68" width="26" height="20" rx="6" fill="url(#blueThread)" />
              <rect x="109" y="68" width="26" height="20" rx="6" fill="url(#blueThread)" />

              
              <rect x="65" y="112" width="26" height="20" rx="6" fill="url(#blueThread)" />
              <rect x="153" y="112" width="26" height="20" rx="6" fill="url(#blueThread)" />

              
              <rect x="21" y="156" width="26" height="20" rx="6" fill="url(#blueThread)" />
              <rect x="109" y="156" width="26" height="20" rx="6" fill="url(#blueThread)" />
            </g>

            
            <path d="M 45 30 Q 48 22 52 26" stroke="#93c5fd" stroke-width="1" fill="none" opacity="0.8" />
            <path d="M 130 72 Q 134 64 138 67" stroke="#93c5fd" stroke-width="1" fill="none" opacity="0.8" />
            <path d="M 90 120 Q 86 112 82 116" stroke="#e2e8f0" stroke-width="1" fill="none" opacity="0.8" />
            <path d="M 175 160 Q 180 152 184 157" stroke="#93c5fd" stroke-width="1" fill="none" opacity="0.8" />
            <path d="M 75 168 Q 72 176 68 172" stroke="#e2e8f0" stroke-width="1" fill="none" opacity="0.8" />

            
            <path d="M 35 45 A 75 75 0 0 1 155 45" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="6" stroke-linecap="round" />
          </g>

          
          <circle cx="100" cy="100" r="82" fill="none" stroke="#38bdf8" stroke-width="3" opacity="0.8" />
        </svg>
      </div>
      <div class="view-label">Woven Threads</div>
    </div>
  </div>

</body>
</html>

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

    .diagram-grid {
      width: 100%;
      max-width: 620px;
      display: grid;
      grid-template-columns: 1fr 1.2fr 1fr;
      gap: 8px;
      align-items: center;
      position: relative;
    }

    .panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 220px;
      position: relative;
    }

    .tag {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      padding: 4px 10px;
      border-radius: 20px;
      margin-bottom: 8px;
    }

    .tag-tiny {
      background: #e2e8f0;
      color: #475569;
    }

    .tag-lens {
      background: #e0f2fe;
      color: #0284c7;
    }

    .tag-zoom {
      background: #22b7ff;
      color: #ffffff;
    }

    /* Left Panel: Tiny Scene */
    .tiny-stage {
      position: relative;
      width: 90px;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .leaf-small {
      font-size: 48px;
      transform: rotate(-15deg);
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06));
    }

    .bug-tiny {
      position: absolute;
      font-size: 16px;
      top: 36px;
      left: 36px;
      transition: transform 0.3s ease;
    }

    .eye-view {
      font-size: 28px;
      margin-top: 6px;
    }

    /* Middle Panel: Lens & Light Rays */
    .lens-panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 220px;
      position: relative;
      overflow: hidden;
    }

    .ray-svg {
      width: 100%;
      height: 140px;
    }

    .ray-line {
      stroke: #22b7ff;
      stroke-width: 2.5;
      stroke-linecap: round;
      fill: none;
      stroke-dasharray: 6 3;
      animation: dashMove 1.5s linear infinite;
    }

    .ray-bend {
      stroke: #0284c7;
      stroke-width: 3;
      stroke-linecap: round;
      fill: none;
    }

    @keyframes dashMove {
      to {
        stroke-dashoffset: -18;
      }
    }

    /* Right Panel: Zoomed View */
    .zoom-stage {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      background: radial-gradient(circle, #f0f9ff 0%, #e0f2fe 100%);
      border: 3px solid #22b7ff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .zoomed-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .bug-large {
      font-size: 58px;
      line-height: 1;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12));
    }

    .grid-lines {
      position: absolute;
      inset: 0;
      background-image: 
        radial-gradient(circle, rgba(34, 183, 255, 0.15) 1px, transparent 1px);
      background-size: 14px 14px;
      pointer-events: none;
    }

    /* Interactive Controls */
    .controls {
      display: flex;
      gap: 8px;
      margin-top: 14px;
      width: 100%;
      max-width: 420px;
      justify-content: center;
    }

    .btn {
      flex: 1;
      padding: 9px 14px;
      font-size: 14px;
      font-weight: 700;
      border-radius: 12px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .btn.active {
      background: #22b7ff;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
    }

    @media (max-width: 460px) {
      .diagram-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .panel, .lens-panel {
        min-height: 140px;
        flex-direction: row;
        justify-content: space-around;
      }
      .ray-svg {
        height: 90px;
      }
    }
  </style>
</head>
<body>

  <div class="diagram-grid">
    
    <div class="panel">
      <span class="tag tag-tiny">Tiny</span>
      <div class="tiny-stage">
        <div class="leaf-small">🍃</div>
        <div class="bug-tiny" id="tinyBug">🐞</div>
      </div>
      <div class="eye-view" title="Human Eye">👁️</div>
    </div>

    
    <div class="lens-panel">
      <span class="tag tag-lens">Bends Light 🔍</span>
      <svg class="ray-svg" viewBox="0 0 160 120">
        
        <path d="M 75 10 Q 90 60 75 110 Q 60 60 75 10 Z" fill="rgba(34, 183, 255, 0.2)" stroke="#22b7ff" stroke-width="2"/>
        
        <rect x="71" y="108" width="8" height="10" rx="2" fill="#94a3b8" />
        
        
        
        <path class="ray-line" d="M 10 40 L 70 45" />
        <path id="rayTop" class="ray-bend" d="M 75 45 Q 110 52 150 20" />
        
        
        <path class="ray-line" d="M 10 60 L 75 60" />
        <path class="ray-bend" d="M 75 60 L 150 60" />
        
        
        <path class="ray-line" d="M 10 80 L 70 75" />
        <path id="rayBottom" class="ray-bend" d="M 75 75 Q 110 68 150 100" />
        
        
        <circle cx="75" cy="60" r="3" fill="#0284c7" />
      </svg>
    </div>

    
    <div class="panel">
      <span class="tag tag-zoom">Zoomed In!</span>
      <div class="zoom-stage">
        <div class="grid-lines"></div>
        <div class="zoomed-content" id="zoomBug">
          <div class="bug-large">🐞</div>
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn active" id="btn2x" onclick="setZoom(1)">2× Zoom</button>
    <button class="btn" id="btn4x" onclick="setZoom(2)">4× Zoom</button>
  </div>

  <script>
    function setZoom(level) {
      const btn2x = document.getElementById('btn2x');
      const btn4x = document.getElementById('btn4x');
      const zoomBug = document.getElementById('zoomBug');
      const rayTop = document.getElementById('rayTop');
      const rayBottom = document.getElementById('rayBottom');

      if (level === 1) {
        btn2x.classList.add('active');
        btn4x.classList.remove('active');
        zoomBug.style.transform = 'scale(1)';
        rayTop.setAttribute('d', 'M 75 45 Q 110 52 150 25');
        rayBottom.setAttribute('d', 'M 75 75 Q 110 68 150 95');
      } else {
        btn4x.classList.add('active');
        btn2x.classList.remove('active');
        zoomBug.style.transform = 'scale(1.4)';
        rayTop.setAttribute('d', 'M 75 45 Q 110 55 150 12');
        rayBottom.setAttribute('d', 'M 75 75 Q 110 65 150 108');
      }
    }
  </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 {
      width: 100%;
      min-height: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: transparent;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #1e2945;
      padding: 16px 12px;
      overflow-x: hidden;
    }

    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      width: 100%;
      max-width: 580px;
      align-items: center;
      justify-items: center;
    }

    @media (max-width: 440px) {
      .comparison-grid {
        grid-template-columns: 1fr;
        gap: 18px;
      }
    }

    .view-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      background: transparent;
      padding: 4px;
    }

    .label {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: -0.2px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      text-align: center;
    }

    .label-left { color: #2d6a4f; }
    .label-right { color: #0284c7; }

    .viewport {
      width: 100%;
      aspect-ratio: 1 / 1;
      max-width: 220px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

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

    /* Gentle, smooth water flow animation in veins */
    .water-flow {
      stroke-dasharray: 8 16;
      animation: flow 7s linear infinite;
    }

    @keyframes flow {
      from { stroke-dashoffset: 48; }
      to { stroke-dashoffset: 0; }
    }

    /* Soft pulse for magnified lens view */
    .lens-glow {
      animation: pulse-glow 5s ease-in-out infinite alternate;
    }

    @keyframes pulse-glow {
      0% { filter: drop-shadow(0 2px 6px rgba(2, 132, 199, 0.15)); }
      100% { filter: drop-shadow(0 4px 12px rgba(2, 132, 199, 0.35)); }
    }
  </style>
</head>
<body>

  <div class="comparison-grid">
    
    <div class="view-card">
      <div class="label label-left">
        <span aria-hidden="true">👁️</span> With Your Eyes
      </div>
      <div class="viewport">
        <svg viewBox="0 0 200 200" aria-label="Smooth green leaf seen from normal distance">
          
          <circle cx="100" cy="100" r="90" fill="#ecfdf5" opacity="0.8" />
          
          
          <path d="M 100 25 C 150 55 165 125 100 175 C 35 125 50 55 100 25 Z" 
                fill="#52b788" />
          
          
          <path d="M 100 35 Q 100 110 100 185" 
                stroke="#2d6a4f" 
                stroke-width="3" 
                stroke-linecap="round" 
                fill="none" />
          
          
          <path d="M 96 38 C 72 65 65 110 92 148 C 82 118 84 75 96 38 Z" 
                fill="#74c69d" 
                opacity="0.6" />
        </svg>
      </div>
    </div>

    
    <div class="view-card">
      <div class="label label-right">
        <span aria-hidden="true">🔍</span> Under the Lens
      </div>
      <div class="viewport">
        <svg viewBox="0 0 200 200" class="lens-glow" aria-label="Magnified microscopic leaf cells and branching veins carrying water">
          <defs>
            
            <clipPath id="lensClip">
              <circle cx="95" cy="95" r="76" />
            </clipPath>

            
            <pattern id="plantCells" width="18" height="18" patternUnits="userSpaceOnUse" patternTransform="rotate(20)">
              <rect width="18" height="18" fill="#38a169" />
              <polygon points="9,2 16,6 16,13 9,17 2,13 2,6" fill="#2f855a" stroke="#22543d" stroke-width="1.2" />
              <circle cx="9" cy="9.5" r="2.2" fill="#48bb78" />
              <circle cx="9" cy="9.5" r="1" fill="#68d391" />
            </pattern>
          </defs>

          
          <path d="M 150 150 L 186 186" stroke="#64748b" stroke-width="14" stroke-linecap="round" />
          <path d="M 152 152 L 184 184" stroke="#94a3b8" stroke-width="8" stroke-linecap="round" />

          
          <g clip-path="url(#lensClip)">
            
            <rect x="0" y="0" width="200" height="200" fill="url(#plantCells)" />

            
            <path d="M 25 165 Q 90 95 165 35" stroke="#ecc94b" stroke-width="16" fill="none" stroke-linecap="round" opacity="0.4" />
            <path d="M 25 165 Q 90 95 165 35" stroke="#d69e2e" stroke-width="10" fill="none" stroke-linecap="round" />
            <path d="M 25 165 Q 90 95 165 35" stroke="#fef08a" stroke-width="6" fill="none" stroke-linecap="round" />

            
            <path d="M 80 115 Q 60 70 30 55" stroke="#d69e2e" stroke-width="6" fill="none" stroke-linecap="round" />
            <path d="M 80 115 Q 60 70 30 55" stroke="#fef08a" stroke-width="3" fill="none" stroke-linecap="round" />

            <path d="M 120 78 Q 145 95 170 120" stroke="#d69e2e" stroke-width="5" fill="none" stroke-linecap="round" />
            <path d="M 120 78 Q 145 95 170 120" stroke="#fef08a" stroke-width="2.5" fill="none" stroke-linecap="round" />

            <path d="M 52 140 Q 30 135 15 130" stroke="#d69e2e" stroke-width="4" fill="none" stroke-linecap="round" />
            <path d="M 140 60 Q 145 35 135 15" stroke="#d69e2e" stroke-width="4" fill="none" stroke-linecap="round" />

            
            <path class="water-flow" d="M 25 165 Q 90 95 165 35" stroke="#38bdf8" stroke-width="3.5" fill="none" stroke-linecap="round" />
            <path class="water-flow" d="M 80 115 Q 60 70 30 55" stroke="#38bdf8" stroke-width="2" fill="none" stroke-linecap="round" />
            <path class="water-flow" d="M 120 78 Q 145 95 170 120" stroke="#38bdf8" stroke-width="2" fill="none" stroke-linecap="round" />

            
            <path d="M 40 45 A 65 65 0 0 1 145 45" stroke="#ffffff" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.45" />
          </g>

          
          <circle cx="95" cy="95" r="77" stroke="#0284c7" stroke-width="7" fill="none" />
          <circle cx="95" cy="95" r="80.5" stroke="#bae6fd" stroke-width="1.5" fill="none" />
        </svg>
      </div>
    </div>
  </div>

</body>
</html>

OGS.1.LS.6

Aligned learning resources

Related diagrams