<!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>Middle Face Features</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

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

    .diagram-stage {
      position: relative;
      width: 100%;
      max-width: 340px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .badge-bar {
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }

    .feature-badge {
      background: #22b7ff;
      color: #ffffff;
      font-weight: 700;
      font-size: 15px;
      padding: 6px 18px;
      border-radius: 20px;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.35);
      letter-spacing: 0.3px;
      transition: opacity 0.25s ease, transform 0.25s ease;
      display: inline-block;
    }

    .face-svg {
      width: 100%;
      height: auto;
      max-height: 250px;
      display: block;
      touch-action: manipulation;
    }

    /* Interactive zones */
    .feature-group {
      cursor: pointer;
      transition: filter 0.25s ease;
    }

    .hit-area {
      fill: transparent;
      stroke: transparent;
      stroke-width: 16px;
      cursor: pointer;
    }

    .glow-circle {
      fill: none;
      stroke: #22b7ff;
      stroke-width: 3px;
      opacity: 0;
      transition: opacity 0.25s ease;
      filter: drop-shadow(0 0 6px rgba(34, 183, 255, 0.8));
    }

    .feature-group:hover .glow-circle,
    .feature-group.active .glow-circle {
      opacity: 1;
    }

    .feature-group:hover path,
    .feature-group:hover ellipse,
    .feature-group:hover circle,
    .feature-group.active path,
    .feature-group.active ellipse,
    .feature-group.active circle {
      stroke: #22b7ff;
    }

    /* Quick Selector Buttons */
    .btn-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      width: 100%;
    }

    .btn-tab {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 16px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      transition: all 0.2s ease;
    }

    .btn-tab:hover {
      border-color: #22b7ff;
      color: #0284c7;
    }

    .btn-tab.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.4);
    }
  </style>
</head>
<body>

  <div class="diagram-stage">
    
    <div class="badge-bar">
      <div id="badge" class="feature-badge">Middle Face</div>
    </div>

    
    <svg class="face-svg" viewBox="0 0 320 250" aria-label="Interactive middle zone of a human face">
      
      <ellipse cx="160" cy="125" rx="85" ry="110" fill="#ffebd9" stroke="#fed7aa" stroke-width="2.5" />
      
      
      <path d="M 80,105 C 80,45 240,45 240,105 C 215,75 105,75 80,105 Z" fill="#9a3412" opacity="0.85" />
      
      
      <path d="M 142,192 Q 160,206 178,192" fill="none" stroke="#ea580c" stroke-width="2.5" stroke-linecap="round" opacity="0.65" />

      
      <g id="feat-ears" class="feature-group" data-name="Ears">
        
        <ellipse class="glow-circle" cx="68" cy="125" rx="14" ry="24" />
        <ellipse cx="68" cy="125" rx="11" ry="20" fill="#fcd9bd" stroke="#fba979" stroke-width="2" />
        <path d="M 68,115 Q 64,125 70,132" fill="none" stroke="#e07a5f" stroke-width="1.8" stroke-linecap="round" />
        
        
        <ellipse class="glow-circle" cx="252" cy="125" rx="14" ry="24" />
        <ellipse cx="252" cy="125" rx="11" ry="20" fill="#fcd9bd" stroke="#fba979" stroke-width="2" />
        <path d="M 252,115 Q 256,125 250,132" fill="none" stroke="#e07a5f" stroke-width="1.8" stroke-linecap="round" />

        
        <circle cx="68" cy="125" r="22" class="hit-area" />
        <circle cx="252" cy="125" r="22" class="hit-area" />
      </g>

      
      <g id="feat-eyes" class="feature-group" data-name="Eyes">
        
        <path d="M 112,94 Q 126,88 140,93" fill="none" stroke="#78350f" stroke-width="2.5" stroke-linecap="round" />
        <ellipse class="glow-circle" cx="126" cy="112" rx="17" ry="12" />
        <ellipse cx="126" cy="112" rx="13" ry="8.5" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.5" />
        <circle cx="126" cy="112" r="5.5" fill="#1e2945" />
        <circle cx="128" cy="110" r="1.8" fill="#ffffff" />
        
        
        <path d="M 180,93 Q 194,88 208,94" fill="none" stroke="#78350f" stroke-width="2.5" stroke-linecap="round" />
        <ellipse class="glow-circle" cx="194" cy="112" rx="17" ry="12" />
        <ellipse cx="194" cy="112" rx="13" ry="8.5" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.5" />
        <circle cx="194" cy="112" r="5.5" fill="#1e2945" />
        <circle cx="196" cy="110" r="1.8" fill="#ffffff" />

        
        <rect x="105" y="85" width="110" height="38" rx="10" class="hit-area" />
      </g>

      
      <g id="feat-nose" class="feature-group" data-name="Nose">
        <ellipse class="glow-circle" cx="160" cy="145" rx="14" ry="16" />
        <path d="M 157,126 L 154,146 Q 160,151 166,146" fill="none" stroke="#ea580c" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
        
        
        <circle cx="160" cy="144" r="20" class="hit-area" />
      </g>

      
      <g id="feat-cheeks" class="feature-group" data-name="Cheeks">
        
        <ellipse class="glow-circle" cx="112" cy="148" rx="16" ry="13" />
        <ellipse cx="112" cy="148" rx="13" ry="9" fill="#fca5a5" opacity="0.6" />
        
        
        <ellipse class="glow-circle" cx="208" cy="148" rx="16" ry="13" />
        <ellipse cx="208" cy="148" rx="13" ry="9" fill="#fca5a5" opacity="0.6" />

        
        <circle cx="112" cy="148" r="18" class="hit-area" />
        <circle cx="208" cy="148" r="18" class="hit-area" />
      </g>
    </svg>

    
    <div class="btn-row">
      <button class="btn-tab" data-target="feat-eyes">Eyes</button>
      <button class="btn-tab" data-target="feat-nose">Nose</button>
      <button class="btn-tab" data-target="feat-cheeks">Cheeks</button>
      <button class="btn-tab" data-target="feat-ears">Ears</button>
    </div>
  </div>

  <script>
    const badge = document.getElementById('badge');
    const groups = document.querySelectorAll('.feature-group');
    const buttons = document.querySelectorAll('.btn-tab');

    function selectFeature(featureId) {
      groups.forEach(g => {
        const isMatch = g.id === featureId;
        g.classList.toggle('active', isMatch);
        if (isMatch) {
          badge.textContent = g.dataset.name;
        }
      });

      buttons.forEach(btn => {
        btn.classList.toggle('active', btn.dataset.target === featureId);
      });
    }

    // Attach click and hover listeners to SVG groups
    groups.forEach(group => {
      const name = group.dataset.name;

      group.addEventListener('pointerenter', () => {
        selectFeature(group.id);
      });

      group.addEventListener('click', (e) => {
        e.stopPropagation();
        selectFeature(group.id);
      });
    });

    // Attach click listeners to selector buttons
    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        selectFeature(btn.dataset.target);
      });
    });

    // Auto-cycle gently on load to showcase all 4 features
    const featureIds = ['feat-eyes', 'feat-nose', 'feat-cheeks', 'feat-ears'];
    let autoIndex = 0;
    let autoTimer = setInterval(() => {
      autoIndex = (autoIndex + 1) % featureIds.length;
      selectFeature(featureIds[autoIndex]);
    }, 3000);

    // Stop auto-cycling on direct interaction
    window.addEventListener('pointerdown', () => {
      if (autoTimer) {
        clearInterval(autoTimer);
        autoTimer = null;
      }
    }, { once: true });

    // Initial highlight
    selectFeature('feat-eyes');
  </script>
</body>
</html>

Parts of the Human Head and Face

<!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>Parts of the Head and Face</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      width: 100%;
      height: 100%;
      background: transparent;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      user-select: none;
      -webkit-user-select: none;
    }

    .diagram {
      width: 100%;
      max-width: 420px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 6px;
    }

    .tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 6px;
      width: 100%;
      justify-content: center;
    }

    .tab-btn {
      background: #f1f5f9;
      border: 1.5px solid transparent;
      color: #475569;
      padding: 5px 12px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.25s ease;
      outline: none;
    }

    .tab-btn:hover {
      background: #e2e8f0;
      color: #1e2945;
    }

    .tab-btn.active {
      background: #e0f2fe;
      color: #0284c7;
      border-color: #38bdf8;
    }

    .svg-container {
      width: 100%;
      position: relative;
    }

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

    /* Interactive label groups */
    .part-group {
      cursor: pointer;
      transition: opacity 0.3s ease, filter 0.3s ease;
    }

    .part-group.dimmed {
      opacity: 0.2;
    }

    .part-group .badge {
      fill: #ffffff;
      stroke: #cbd5e1;
      stroke-width: 1.5px;
      transition: stroke 0.25s ease, fill 0.25s ease, filter 0.25s ease;
    }

    .part-group .badge-text {
      fill: #1e2945;
      font-size: 11.5px;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: central;
      letter-spacing: 0.2px;
    }

    .part-group .pointer-line {
      stroke: #94a3b8;
      stroke-width: 1.5;
      stroke-dasharray: none;
      transition: stroke 0.25s ease, stroke-width 0.25s ease;
    }

    .part-group .target-dot {
      fill: #0284c7;
      transition: transform 0.25s ease, fill 0.25s ease;
    }

    /* Highlighted state */
    .part-group.highlighted .badge {
      stroke: #0284c7;
      stroke-width: 2px;
      filter: drop-shadow(0 2px 4px rgba(2, 132, 199, 0.2));
    }

    .part-group.highlighted .badge-text {
      fill: #0369a1;
    }

    .part-group.highlighted .pointer-line {
      stroke: #0284c7;
      stroke-width: 2;
    }

    .part-group.highlighted .target-dot {
      fill: #0284c7;
    }
  </style>
</head>
<body>

<div class="diagram">
  <div class="tabs" role="tablist">
    <button class="tab-btn active" data-filter="all">All (9)</button>
    <button class="tab-btn" data-filter="top">Top</button>
    <button class="tab-btn" data-filter="mid">Middle</button>
    <button class="tab-btn" data-filter="bot">Bottom</button>
  </div>

  <div class="svg-container">
    <svg viewBox="0 0 360 340">
      <defs>
        
        <linearGradient id="skinGrad" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#ffe8dc" />
          <stop offset="100%" stop-color="#fed7c3" />
        </linearGradient>
      </defs>

      
      <g id="faceBase">
        
        <path d="M 158 240 L 158 280 Q 180 286 202 280 L 202 240 Z" fill="#fcd3bd" stroke="#e2a98f" stroke-width="1.5" />
        
        
        <g id="ears">
          <ellipse cx="112" cy="180" rx="9" ry="18" fill="#fcd3bd" stroke="#e2a98f" stroke-width="1.5" />
          <path d="M 112 173 Q 115 180 112 187" stroke="#d49174" stroke-width="1.5" fill="none" stroke-linecap="round" />
          <ellipse cx="248" cy="180" rx="9" ry="18" fill="#fcd3bd" stroke="#e2a98f" stroke-width="1.5" />
          <path d="M 248 173 Q 245 180 248 187" stroke="#d49174" stroke-width="1.5" fill="none" stroke-linecap="round" />
        </g>

        
        <ellipse cx="180" cy="178" rx="72" ry="92" fill="url(#skinGrad)" stroke="#e2a98f" stroke-width="1.5" />

        
        <ellipse cx="140" cy="195" rx="10" ry="6" fill="#f87171" opacity="0.22" />
        <ellipse cx="220" cy="195" rx="10" ry="6" fill="#f87171" opacity="0.22" />

        
        <path d="M 111 160 C 107 100 135 72 180 72 C 225 72 253 100 249 160 C 242 120 230 110 180 110 C 130 110 118 120 111 160 Z" fill="#3e2723" />
        <path d="M 120 120 Q 150 96 180 112 Q 220 102 245 125" stroke="#4e342e" stroke-width="2.5" fill="none" stroke-linecap="round" />

        
        <path d="M 136 146 Q 150 140 162 145" stroke="#3e2723" stroke-width="3" fill="none" stroke-linecap="round" />
        <path d="M 198 145 Q 210 140 224 146" stroke="#3e2723" stroke-width="3" fill="none" stroke-linecap="round" />

        
        <g id="eyes">
          <ellipse cx="149" cy="162" rx="8.5" ry="5.5" fill="#ffffff" stroke="#cbd5e1" stroke-width="1" />
          <circle cx="149" cy="162" r="4" fill="#2d3748" />
          <circle cx="147.5" cy="160.5" r="1.2" fill="#ffffff" />
          
          <ellipse cx="211" cy="162" rx="8.5" ry="5.5" fill="#ffffff" stroke="#cbd5e1" stroke-width="1" />
          <circle cx="211" cy="162" r="4" fill="#2d3748" />
          <circle cx="209.5" cy="160.5" r="1.2" fill="#ffffff" />
        </g>

        
        <path d="M 178 168 Q 183 186 177 189 Q 173 189 174 186" stroke="#c88367" stroke-width="2" fill="none" stroke-linecap="round" />

        
        <path d="M 166 214 Q 180 226 194 214" stroke="#e11d48" stroke-width="2.5" fill="none" stroke-linecap="round" />

        
        <path d="M 174 252 Q 180 255 186 252" stroke="#d49174" stroke-width="2" fill="none" stroke-linecap="round" />
      </g>

      

      
      
      <g class="part-group" data-region="top">
        <line class="pointer-line" x1="68" y1="42" x2="150" y2="82" />
        <circle class="target-dot" cx="150" cy="82" r="3.5" />
        <rect class="badge" x="12" y="28" width="64" height="26" rx="13" />
        <text class="badge-text" x="44" y="41">Hair</text>
      </g>

      
      <g class="part-group" data-region="top">
        <line class="pointer-line" x1="280" y1="52" x2="188" y2="126" />
        <circle class="target-dot" cx="188" cy="126" r="3.5" />
        <rect class="badge" x="272" y="38" width="76" height="26" rx="13" />
        <text class="badge-text" x="310" y="51">Forehead</text>
      </g>

      
      <g class="part-group" data-region="top">
        <line class="pointer-line" x1="72" y1="98" x2="142" y2="143" />
        <circle class="target-dot" cx="142" cy="143" r="3.5" />
        <rect class="badge" x="10" y="84" width="72" height="26" rx="13" />
        <text class="badge-text" x="46" y="97">Eyebrow</text>
      </g>

      
      
      <g class="part-group" data-region="mid">
        <line class="pointer-line" x1="284" y1="112" x2="216" y2="160" />
        <circle class="target-dot" cx="216" cy="160" r="3.5" />
        <rect class="badge" x="282" y="98" width="62" height="26" rx="13" />
        <text class="badge-text" x="313" y="111">Eye</text>
      </g>

      
      <g class="part-group" data-region="mid">
        <line class="pointer-line" x1="68" y1="154" x2="108" y2="178" />
        <circle class="target-dot" cx="108" cy="178" r="3.5" />
        <rect class="badge" x="14" y="140" width="60" height="26" rx="13" />
        <text class="badge-text" x="44" y="153">Ear</text>
      </g>

      
      <g class="part-group" data-region="mid">
        <line class="pointer-line" x1="284" y1="172" x2="184" y2="183" />
        <circle class="target-dot" cx="184" cy="183" r="3.5" />
        <rect class="badge" x="282" y="158" width="62" height="26" rx="13" />
        <text class="badge-text" x="313" y="171">Nose</text>
      </g>

      
      <g class="part-group" data-region="mid">
        <line class="pointer-line" x1="72" y1="210" x2="135" y2="198" />
        <circle class="target-dot" cx="135" cy="198" r="3.5" />
        <rect class="badge" x="12" y="196" width="66" height="26" rx="13" />
        <text class="badge-text" x="45" y="209">Cheek</text>
      </g>

      
      
      <g class="part-group" data-region="bot">
        <line class="pointer-line" x1="280" y1="230" x2="192" y2="220" />
        <circle class="target-dot" cx="192" cy="220" r="3.5" />
        <rect class="badge" x="278" y="216" width="68" height="26" rx="13" />
        <text class="badge-text" x="312" y="229">Mouth</text>
      </g>

      
      <g class="part-group" data-region="bot">
        <line class="pointer-line" x1="70" y1="268" x2="175" y2="256" />
        <circle class="target-dot" cx="175" cy="256" r="3.5" />
        <rect class="badge" x="14" y="254" width="62" height="26" rx="13" />
        <text class="badge-text" x="45" y="267">Chin</text>
      </g>
    </svg>
  </div>
</div>

<script>
  const tabs = document.querySelectorAll('.tab-btn');
  const partGroups = document.querySelectorAll('.part-group');

  function applyFilter(filter) {
    tabs.forEach(tab => {
      tab.classList.toggle('active', tab.getAttribute('data-filter') === filter);
    });

    partGroups.forEach(group => {
      const region = group.getAttribute('data-region');
      if (filter === 'all') {
        group.classList.remove('dimmed', 'highlighted');
      } else if (region === filter) {
        group.classList.remove('dimmed');
        group.classList.add('highlighted');
      } else {
        group.classList.add('dimmed');
        group.classList.remove('highlighted');
      }
    });
  }

  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      applyFilter(tab.getAttribute('data-filter'));
    });
  });

  partGroups.forEach(group => {
    group.addEventListener('click', () => {
      const region = group.getAttribute('data-region');
      applyFilter(region);
    });
  });
</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;
    }
    html, body {
      width: 100%;
      height: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      user-select: none;
    }
    .diagram-container {
      width: 100%;
      max-width: 400px;
      height: 100%;
      max-height: 400px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 8px;
    }
    svg {
      width: 100%;
      height: auto;
      max-height: 330px;
      overflow: visible;
    }
    .callout {
      cursor: pointer;
      transition: filter 0.2s ease, transform 0.2s ease;
    }
    .callout:hover {
      filter: drop-shadow(0 2px 6px rgba(34, 183, 255, 0.3));
    }
    .badge-bg {
      fill: #ffffff;
      stroke: #e2e8f0;
      stroke-width: 1.5;
      rx: 8;
      ry: 8;
      transition: stroke 0.2s ease, fill 0.2s ease;
    }
    .badge-text {
      fill: #1e2945;
      font-size: 13.5px;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: central;
      pointer-events: none;
    }
    .pointer-line {
      stroke: #94a3b8;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-dasharray: 4 3;
      fill: none;
      transition: stroke 0.2s ease, stroke-width 0.2s ease;
    }
    .target-dot {
      fill: #22b7ff;
      stroke: #ffffff;
      stroke-width: 2;
      transition: r 0.2s ease, fill 0.2s ease;
    }
    .highlight-ring {
      fill: none;
      stroke: #22b7ff;
      stroke-width: 3;
      opacity: 0;
      transition: opacity 0.25s ease;
    }
    .active .badge-bg {
      stroke: #22b7ff;
      fill: #f0f9ff;
    }
    .active .pointer-line {
      stroke: #22b7ff;
      stroke-width: 2.5;
      stroke-dasharray: none;
    }
    .active .target-dot {
      fill: #0284c7;
      r: 6;
    }
    .active .highlight-ring {
      opacity: 1;
    }
    .nav-bar {
      display: flex;
      gap: 8px;
      margin-top: 4px;
    }
    .nav-btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #64748b;
      font-size: 12px;
      font-weight: 600;
      padding: 5px 14px;
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .nav-btn:hover {
      border-color: #cbd5e1;
      color: #1e2945;
    }
    .nav-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
    }
  </style>
</head>
<body>
  <div class="diagram-container">
    <svg viewBox="0 0 380 300">
      <defs>
        
        <filter id="badgeShadow" x="-10%" y="-10%" width="120%" height="130%">
          <feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000000" flood-opacity="0.06" />
        </filter>
      </defs>

      
      <g id="headGroup">
        
        <ellipse cx="128" cy="180" rx="11" ry="18" fill="#fcd5b8" />
        <ellipse cx="252" cy="180" rx="11" ry="18" fill="#fcd5b8" />
        <ellipse cx="128" cy="180" rx="6" ry="10" fill="#f5be9b" />
        <ellipse cx="252" cy="180" rx="6" ry="10" fill="#f5be9b" />

        
        <ellipse cx="190" cy="180" rx="64" ry="76" fill="#fcd5b8" />

        
        <path d="M 124 165 C 114 100, 266 100, 256 165 C 270 120, 240 70, 190 70 C 140 70, 110 120, 124 165 Z" fill="#4a2c1b" />

        
        <g id="targetForehead">
          <ellipse class="highlight-ring" cx="190" cy="144" rx="42" ry="15" />
        </g>

        
        <g id="targetHair">
          <path d="M 126 155 C 135 112, 245 112, 254 155 C 238 128, 215 138, 190 122 C 165 138, 142 128, 126 155 Z" fill="#4a2c1b" />
          
          <path d="M 150 100 Q 190 88 230 100" stroke="#6a422a" stroke-width="4" stroke-linecap="round" fill="none" opacity="0.6"/>
          <ellipse class="highlight-ring" cx="190" cy="98" rx="56" ry="24" />
        </g>

        
        <g id="targetEyebrows">
          
          <path d="M 152 166 Q 166 156 180 165" stroke="#4a2c1b" stroke-width="4.5" stroke-linecap="round" fill="none" />
          
          <path d="M 200 165 Q 214 156 228 166" stroke="#4a2c1b" stroke-width="4.5" stroke-linecap="round" fill="none" />
          <ellipse class="highlight-ring" cx="190" cy="165" rx="46" ry="14" />
        </g>

        
        <ellipse cx="166" cy="186" rx="4.5" ry="5.5" fill="#1e2945" />
        <ellipse cx="214" cy="186" rx="4.5" ry="5.5" fill="#1e2945" />
        <circle cx="168" cy="184" r="1.5" fill="#ffffff" />
        <circle cx="216" cy="184" r="1.5" fill="#ffffff" />

        
        <circle cx="150" cy="198" r="7" fill="#f87171" opacity="0.22" />
        <circle cx="230" cy="198" r="7" fill="#f87171" opacity="0.22" />

        
        <path d="M 188 193 Q 190 197 193 194" stroke="#e09d78" stroke-width="2.5" stroke-linecap="round" fill="none" />

        
        <path d="M 180 216 Q 190 226 200 216" stroke="#d28660" stroke-width="2.5" stroke-linecap="round" fill="none" />
      </g>

      
      <g class="callout" id="calloutHair" onclick="selectPart('hair')">
        <path class="pointer-line" d="M 94 48 L 150 48 L 180 84" />
        <circle class="target-dot" cx="180" cy="84" r="4.5" />
        <g filter="url(#badgeShadow)">
          <rect class="badge-bg" x="20" y="32" width="76" height="32" />
          <text class="badge-text" x="58" y="48">Hair</text>
        </g>
      </g>

      
      <g class="callout" id="calloutForehead" onclick="selectPart('forehead')">
        <path class="pointer-line" d="M 284 130 L 236 130 L 202 144" />
        <circle class="target-dot" cx="202" cy="144" r="4.5" />
        <g filter="url(#badgeShadow)">
          <rect class="badge-bg" x="284" y="114" width="84" height="32" />
          <text class="badge-text" x="326" y="130">Forehead</text>
        </g>
      </g>

      
      <g class="callout" id="calloutEyebrows" onclick="selectPart('eyebrows')">
        <path class="pointer-line" d="M 94 186 L 132 186 L 152 168" />
        <circle class="target-dot" cx="152" cy="168" r="4.5" />
        <g filter="url(#badgeShadow)">
          <rect class="badge-bg" x="12" y="170" width="84" height="32" />
          <text class="badge-text" x="54" y="186">Eyebrows</text>
        </g>
      </g>
    </svg>

    
    <div class="nav-bar">
      <button class="nav-btn active" id="btn-all" onclick="selectPart('all')">Show All</button>
      <button class="nav-btn" id="btn-hair" onclick="selectPart('hair')">Hair</button>
      <button class="nav-btn" id="btn-forehead" onclick="selectPart('forehead')">Forehead</button>
      <button class="nav-btn" id="btn-eyebrows" onclick="selectPart('eyebrows')">Eyebrows</button>
    </div>
  </div>

  <script>
    const parts = ['hair', 'forehead', 'eyebrows'];

    function selectPart(selected) {
      // Update buttons
      document.querySelectorAll('.nav-btn').forEach(btn => {
        btn.classList.remove('active');
      });
      const targetBtn = document.getElementById('btn-' + selected);
      if (targetBtn) targetBtn.classList.add('active');

      // Update callouts and highlighted zones
      parts.forEach(part => {
        const calloutEl = document.getElementById('callout' + capitalize(part));
        const targetEl = document.getElementById('target' + capitalize(part));
        const isActive = (selected === 'all' || selected === part);

        if (isActive) {
          calloutEl.classList.add('active');
          targetEl.classList.add('active');
        } else {
          calloutEl.classList.remove('active');
          targetEl.classList.remove('active');
        }
      });
    }

    function capitalize(s) {
      return s.charAt(0).toUpperCase() + s.slice(1);
    }

    // Initialize all active
    selectPart('all');
  </script>
</body>
</html>

<!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: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: 100%;
      padding: 12px 8px;
      user-select: none;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 440px;
      justify-content: center;
      margin-bottom: 8px;
    }
    .step-btn {
      flex: 1;
      padding: 8px 6px;
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
    }
    .step-btn.active {
      background: #e0f2fe;
      border-color: #0284c7;
      color: #0369a1;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25);
    }

    /* SVG Canvas */
    .svg-wrap {
      width: 100%;
      max-width: 450px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    /* Sound Ripples Animation */
    .wave {
      stroke: #0284c7;
      fill: none;
      stroke-linecap: round;
      opacity: 0.6;
      transition: opacity 0.5s ease, stroke-width 0.5s ease;
    }
    .wave-active {
      opacity: 1;
      stroke-width: 5;
      animation: wavePulse 1.8s infinite ease-out;
    }
    .wave-2 { animation-delay: 0.3s; }
    .wave-3 { animation-delay: 0.6s; }

    @keyframes wavePulse {
      0% { opacity: 0.4; transform: translateX(-3px); }
      50% { opacity: 1; transform: translateX(0px); }
      100% { opacity: 0.6; transform: translateX(2px); }
    }

    /* Ear Canal Flow Arrow */
    .canal-flow {
      stroke: #0284c7;
      stroke-dasharray: 8 6;
      stroke-linecap: round;
      transition: opacity 0.5s ease;
      animation: flowRight 1.4s linear infinite;
    }
    @keyframes flowRight {
      to { stroke-dashoffset: -28; }
    }

    /* Callout Badges & Transitions */
    .callout-group {
      transition: opacity 0.5s ease, filter 0.5s ease;
    }
    .callout-text {
      font-size: 12px;
      font-weight: 700;
      fill: #1e2945;
    }
    .callout-box {
      rx: 6;
      transition: fill 0.5s ease, stroke 0.5s ease, stroke-width 0.5s ease;
    }

    #pinnaShape {
      transition: fill 0.5s ease, stroke 0.5s ease, stroke-width 0.5s ease;
    }
    #canalTube {
      transition: fill 0.5s ease, stroke 0.5s ease, stroke-width 0.5s ease;
    }

    /* Bottom Sound Button */
    .sound-btn {
      margin-top: 8px;
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      color: #1e2945;
      padding: 7px 16px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.5s ease, border-color 0.5s ease;
    }
    .sound-btn:active {
      background: #e2e8f0;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="step-btn active" id="btn1" onclick="setStep(1)">1. Waves</button>
    <button class="step-btn" id="btn2" onclick="setStep(2)">2. Pinna</button>
    <button class="step-btn" id="btn3" onclick="setStep(3)">3. Canal</button>
  </div>

  
  <div class="svg-wrap">
    <svg viewBox="0 0 450 250">
      <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.5 L 8 5 L 0 8.5 z" fill="#0284c7" />
        </marker>
        <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#0284c7" flood-opacity="0.25"/>
        </filter>
      </defs>

      
      <g id="wavesGroup">
        <text x="50" y="32" text-anchor="middle" font-size="12" font-weight="700" fill="#1e2945">Sound Waves</text>
        <path class="wave wave-1" d="M 28 85 A 45 45 0 0 1 28 155" stroke-width="4"/>
        <path class="wave wave-2" d="M 52 70 A 70 70 0 0 1 52 170" stroke-width="4.5"/>
        <path class="wave wave-3" d="M 76 55 A 95 95 0 0 1 76 185" stroke-width="5"/>
      </g>

      
      <g id="pinnaGroup">
        
        <path id="pinnaShape" d="M 125 58 C 92 58, 95 98, 105 120 C 112 135, 120 145, 118 160 C 114 182, 96 190, 105 208 C 115 220, 140 216, 145 198 C 150 180, 142 170, 142 152 C 142 130, 155 85, 125 58 Z" 
              fill="#fed7aa" stroke="#ea580c" stroke-width="2.5" />
        
        <path d="M 120 80 C 105 90, 110 115, 118 130 C 125 142, 130 152, 128 170" 
              fill="none" stroke="#c2410c" stroke-width="2.5" stroke-linecap="round"/>
      </g>

      
      <g id="canalGroup">
        
        <path id="canalTube" d="M 138 135 C 190 132, 230 139, 275 136 L 275 166 C 230 169, 190 162, 138 159 Z" 
              fill="#bae6fd" stroke="#0284c7" stroke-width="2.5" filter="url(#glow)"/>
        
        
        <path class="canal-flow" id="canalArrow" d="M 144 149 L 265 151" fill="none" stroke-width="3.5" marker-end="url(#arrow)"/>

        
        <ellipse cx="275" cy="151" rx="3.5" ry="15" fill="#f43f5e" stroke="#be123c" stroke-width="1.5"/>
        <text x="284" y="155" font-size="12" font-weight="700" fill="#be123c">Eardrum</text>

        
        <path d="M 285 145 Q 300 138 315 148 Q 330 158 345 144" fill="none" stroke="#94a3b8" stroke-width="2.5" stroke-dasharray="3 3"/>
      </g>

      
      <g id="calloutPinna" class="callout-group">
        <line x1="165" y1="36" x2="135" y2="60" stroke="#ea580c" stroke-width="1.5" stroke-dasharray="2 2" />
        <rect class="callout-box" x="145" y="16" width="190" height="26" fill="#ffedd5" stroke="#ea580c" stroke-width="1.5"/>
        <text class="callout-text" x="240" y="33" text-anchor="middle">1. Pinna captures vibrations</text>
      </g>

      
      <g id="calloutCanal" class="callout-group">
        <line x1="205" y1="208" x2="205" y2="168" stroke="#0284c7" stroke-width="1.5" stroke-dasharray="2 2" />
        <rect class="callout-box" x="90" y="208" width="230" height="26" fill="#e0f2fe" stroke="#0284c7" stroke-width="1.5"/>
        <text class="callout-text" x="205" y="225" text-anchor="middle">2. Ear canal channels sound inward</text>
      </g>
    </svg>
  </div>

  
  <button class="sound-btn" onclick="playTone()">
    <span aria-hidden="true">🔊</span> Test Sound Wave
  </button>

  <script>
    let currentStep = 1;
    let autoTimer = null;

    function updateView() {
      // Step Buttons
      document.getElementById('btn1').classList.toggle('active', currentStep === 1);
      document.getElementById('btn2').classList.toggle('active', currentStep === 2);
      document.getElementById('btn3').classList.toggle('active', currentStep === 3);

      // Sound waves
      const waves = document.querySelectorAll('.wave');
      waves.forEach(w => {
        if (currentStep >= 1) {
          w.classList.add('wave-active');
        } else {
          w.classList.remove('wave-active');
        }
      });

      // Pinna Callout & Highlight
      const pinnaShape = document.getElementById('pinnaShape');
      const calloutPinna = document.getElementById('calloutPinna');
      if (currentStep === 2) {
        pinnaShape.setAttribute('stroke-width', '4');
        pinnaShape.setAttribute('fill', '#ffedd5');
        calloutPinna.style.opacity = '1';
        calloutPinna.querySelector('.callout-box').setAttribute('stroke-width', '2.5');
      } else {
        pinnaShape.setAttribute('stroke-width', '2.5');
        pinnaShape.setAttribute('fill', '#fed7aa');
        calloutPinna.style.opacity = '0.75';
        calloutPinna.querySelector('.callout-box').setAttribute('stroke-width', '1.5');
      }

      // Canal Callout & Highlight
      const canalTube = document.getElementById('canalTube');
      const canalArrow = document.getElementById('canalArrow');
      const calloutCanal = document.getElementById('calloutCanal');
      if (currentStep === 3) {
        canalTube.setAttribute('fill', '#7dd3fc');
        canalTube.setAttribute('stroke-width', '3.5');
        canalArrow.style.opacity = '1';
        calloutCanal.style.opacity = '1';
        calloutCanal.querySelector('.callout-box').setAttribute('stroke-width', '2.5');
      } else {
        canalTube.setAttribute('fill', '#bae6fd');
        canalTube.setAttribute('stroke-width', '2.5');
        canalArrow.style.opacity = '0.75';
        calloutCanal.style.opacity = '0.75';
        calloutCanal.querySelector('.callout-box').setAttribute('stroke-width', '1.5');
      }
    }

    function setStep(step) {
      currentStep = step;
      updateView();
      resetTimer();
    }

    function resetTimer() {
      clearInterval(autoTimer);
      autoTimer = setInterval(() => {
        currentStep = (currentStep % 3) + 1;
        updateView();
      }, 3500);
    }

    // Audio synthesizer for interactive demonstration
    function playTone() {
      try {
        const AudioCtx = window.AudioContext || window.webkitAudioContext;
        if (!AudioCtx) return;
        const ctx = new AudioCtx();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(440, ctx.currentTime);
        osc.frequency.exponentialRampToValueAtTime(880, ctx.currentTime + 0.35);
        gain.gain.setValueAtTime(0.15, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.4);
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start();
        osc.stop(ctx.currentTime + 0.4);
      } catch (e) {}
    }

    // Initialize
    updateView();
    resetTimer();
  </script>
</body>
</html>

How the Ears Help Us Hear

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sound Waves and the Outer Ear</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background-color: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 8px;
      user-select: none;
      -webkit-user-select: none;
    }

    .diagram-area {
      width: 100%;
      max-width: 540px;
      position: relative;
    }

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

    /* Smooth, steady sound wave propagation */
    .wave {
      animation: ripple 3.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
      transform-origin: 40px 165px;
      will-change: transform, opacity;
    }
    .wave-1 { animation-delay: 0s; }
    .wave-2 { animation-delay: 0.9s; }
    .wave-3 { animation-delay: 1.8s; }
    .wave-4 { animation-delay: 2.7s; }

    @keyframes ripple {
      0% {
        opacity: 0;
        transform: scale(0.18);
      }
      20% {
        opacity: 0.85;
      }
      75% {
        opacity: 0.65;
      }
      100% {
        opacity: 0;
        transform: scale(1.65);
      }
    }

    /* Hand toggle styling */
    .hand-element {
      opacity: 0;
      transform: translateX(12px);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .cupped .hand-element {
      opacity: 1;
      transform: translateX(0);
    }

    /* Normal funnel arrows */
    .normal-arrows {
      opacity: 1;
      transition: opacity 0.35s ease;
    }
    .cupped .normal-arrows {
      opacity: 0.12;
    }

    /* Cupped enhanced funnel arrows */
    .cupped-arrows {
      opacity: 0;
      transform: scale(0.96);
      transform-origin: 415px 165px;
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .cupped .cupped-arrows {
      opacity: 1;
      transform: scale(1);
    }

    /* Controls */
    .controls {
      display: flex;
      gap: 8px;
      margin-top: 6px;
      z-index: 10;
    }

    .btn {
      background: #ffffff;
      color: #1e2945;
      border: 2px solid #e2e8f0;
      border-radius: 20px;
      padding: 7px 16px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    }

    .btn:hover {
      border-color: #22b7ff;
      background-color: #f0f9ff;
    }

    .btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
    }
  </style>
</head>
<body>

  <div class="diagram-area" id="diagram">
    <svg viewBox="0 0 540 280">
      <defs>
        
        <marker id="arrow-blue" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#22b7ff" />
        </marker>
        <marker id="arrow-gold" 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="#f59e0b" />
        </marker>

        
        <linearGradient id="wave-grad" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#22b7ff" stop-opacity="0.15" />
          <stop offset="60%" stop-color="#22b7ff" stop-opacity="0.8" />
          <stop offset="100%" stop-color="#22b7ff" stop-opacity="0.95" />
        </linearGradient>
      </defs>

      
      <g transform="translate(30, 145)">
        <text x="0" y="22" font-size="26" text-anchor="middle">🔊</text>
        <text x="0" y="40" font-size="11" font-weight="700" fill="#64748b" text-anchor="middle">Sound</text>
      </g>

      
      <g transform="translate(45, 165)">
        <path class="wave wave-1" d="M 45 -95 A 110 110 0 0 1 45 95" fill="none" stroke="url(#wave-grad)" stroke-width="3.5" stroke-linecap="round" />
        <path class="wave wave-2" d="M 45 -95 A 110 110 0 0 1 45 95" fill="none" stroke="url(#wave-grad)" stroke-width="3.5" stroke-linecap="round" />
        <path class="wave wave-3" d="M 45 -95 A 110 110 0 0 1 45 95" fill="none" stroke="url(#wave-grad)" stroke-width="3.5" stroke-linecap="round" />
        <path class="wave wave-4" d="M 45 -95 A 110 110 0 0 1 45 95" fill="none" stroke="url(#wave-grad)" stroke-width="3.5" stroke-linecap="round" />
      </g>

      
      <g class="hand-element">
        
        <path d="M 432 50 C 475 65, 485 130, 480 195 C 476 230, 452 258, 428 272 C 420 276, 412 268, 418 258 C 445 225, 455 165, 435 100 C 428 75, 418 60, 432 50 Z"
              fill="#fed7aa" stroke="#ea580c" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
        
        <path d="M 450 72 C 468 105, 468 140, 460 175" fill="none" stroke="#fb923c" stroke-width="1.8" stroke-linecap="round" />
        <path d="M 462 110 C 472 145, 470 180, 456 215" fill="none" stroke="#fb923c" stroke-width="1.8" stroke-linecap="round" />
        
        <rect x="424" y="10" width="98" height="22" rx="5" fill="#ea580c" />
        <text x="473" y="25" font-size="11" font-weight="700" fill="#ffffff" text-anchor="middle">Cupped Hand</text>
        <line x1="473" y1="32" x2="458" y2="58" stroke="#ea580c" stroke-width="1.8" stroke-dasharray="2 2" />
      </g>

      
      
      <path d="M 370 32 C 410 42, 425 90, 425 120 L 425 210 C 425 248, 400 270, 370 278" 
            fill="#f1f5f9" stroke="#cbd5e1" stroke-width="2.5" stroke-linecap="round" />

      
      <path d="M 405 158 L 472 158 C 480 158, 480 172, 472 172 L 405 172" 
            fill="#e2e8f0" stroke="#94a3b8" stroke-width="2" />
      
      <circle cx="472" cy="165" r="3.5" fill="#22b7ff" />

      
      <path d="M 388 105 
               C 425 85, 442 125, 432 165 
               C 424 200, 436 225, 412 240 
               C 392 248, 386 230, 396 215 
               C 406 200, 408 180, 398 175
               C 390 170, 386 158, 395 150
               C 410 135, 405 115, 388 105 Z" 
            fill="#ffedd5" stroke="#f97316" stroke-width="2.5" stroke-linejoin="round" />

      
      <path d="M 402 150 C 414 155, 414 175, 402 180" fill="none" stroke="#ea580c" stroke-width="2" stroke-linecap="round" />

      
      <g class="normal-arrows">
        <path d="M 315 112 Q 375 128 398 158" fill="none" stroke="#22b7ff" stroke-width="2.5" marker-end="url(#arrow-blue)" />
        <path d="M 305 165 L 398 165" fill="none" stroke="#22b7ff" stroke-width="2.5" marker-end="url(#arrow-blue)" />
        <path d="M 315 218 Q 375 202 398 172" fill="none" stroke="#22b7ff" stroke-width="2.5" marker-end="url(#arrow-blue)" />
      </g>

      
      <g class="cupped-arrows">
        <path d="M 285 55 Q 415 60 424 145 Q 422 160 402 162" fill="none" stroke="#f59e0b" stroke-width="3.5" stroke-linecap="round" marker-end="url(#arrow-gold)" />
        <path d="M 265 110 Q 365 125 398 160" fill="none" stroke="#f59e0b" stroke-width="3.5" stroke-linecap="round" marker-end="url(#arrow-gold)" />
        <path d="M 255 165 L 398 165" fill="none" stroke="#f59e0b" stroke-width="4" stroke-linecap="round" marker-end="url(#arrow-gold)" />
        <path d="M 265 220 Q 365 205 398 170" fill="none" stroke="#f59e0b" stroke-width="3.5" stroke-linecap="round" marker-end="url(#arrow-gold)" />
        <path d="M 285 272 Q 425 262 422 185 Q 418 170 402 168" fill="none" stroke="#f59e0b" stroke-width="3.5" stroke-linecap="round" marker-end="url(#arrow-gold)" />
      </g>

      
      
      <g transform="translate(365, 42)">
        <line x1="0" y1="0" x2="35" y2="52" stroke="#1e2945" stroke-width="1.2" />
        <circle cx="35" cy="52" r="2.5" fill="#1e2945" />
        <rect x="-105" y="-12" width="120" height="22" rx="5" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.2" />
        <text x="-45" y="3" font-size="11" font-weight="700" fill="#1e2945" text-anchor="middle">Outer Ear (Pinna)</text>
      </g>

      
      <g transform="translate(475, 230)">
        <line x1="0" y1="0" x2="-32" y2="-58" stroke="#1e2945" stroke-width="1.2" />
        <circle cx="-32" cy="-58" r="2.5" fill="#1e2945" />
        <rect x="-10" y="-11" width="80" height="22" rx="5" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.2" />
        <text x="30" y="4" font-size="11" font-weight="700" fill="#1e2945" text-anchor="middle">Ear Canal</text>
      </g>
    </svg>
  </div>

  
  <div class="controls">
    <button class="btn" id="cupToggle" onclick="toggleHand()">
      <span>🖐️</span> Cup Your Hand
    </button>
  </div>

  <script>
    const diagram = document.getElementById('diagram');
    const toggleBtn = document.getElementById('cupToggle');

    function toggleHand() {
      const isCupped = diagram.classList.toggle('cupped');
      if (isCupped) {
        toggleBtn.classList.add('active');
        toggleBtn.innerHTML = '<span>✓</span> Cupped Hand Active';
      } else {
        toggleBtn.classList.remove('active');
        toggleBtn.innerHTML = '<span>🖐️</span> Cup Your Hand';
      }
    }
  </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;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    body {
      width: 100%;
      min-height: 100%;
      background: #f8f9fa;
      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: 12px;
    }

    .game-board {
      position: relative;
      width: 100%;
      max-width: 360px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .header-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      font-weight: 700;
      color: #4b5563;
      padding: 0 4px;
    }

    .score-badge {
      background: #e0f2fe;
      color: #0284c7;
      padding: 3px 10px;
      border-radius: 12px;
      font-size: 13px;
    }

    .columns-container {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 36px;
      width: 100%;
    }

    #connectionsSvg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
    }

    .column {
      display: flex;
      flex-direction: column;
      gap: 10px;
      z-index: 3;
    }

    .match-btn {
      position: relative;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      background: #ffffff;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
      min-height: 48px;
    }

    .match-btn .icon {
      font-size: 18px;
      line-height: 1;
    }

    .match-btn.selected {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.3);
    }

    .match-btn.matched {
      border-color: #10b981;
      background: #ecfdf5;
      color: #065f46;
      cursor: default;
    }

    .match-btn.matched::after {
      content: '✓';
      position: absolute;
      right: 8px;
      font-size: 12px;
      font-weight: 800;
      color: #10b981;
    }

    .match-btn.shake {
      animation: shake 0.35s ease;
      border-color: #ef4444;
      background: #fef2f2;
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-4px); }
      50% { transform: translateX(4px); }
      75% { transform: translateX(-4px); }
    }

    .line-path {
      stroke: #10b981;
      stroke-width: 3.5;
      stroke-linecap: round;
      fill: none;
      stroke-dasharray: 400;
      stroke-dashoffset: 400;
      animation: drawLine 0.35s ease forwards;
    }

    @keyframes drawLine {
      to {
        stroke-dashoffset: 0;
      }
    }

    .reset-btn {
      align-self: center;
      margin-top: 4px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      background: #ffffff;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .reset-btn:active {
      background: #e5e7eb;
    }
  </style>
</head>
<body>
  <div class="game-board" id="gameBoard">
    <div class="header-bar">
      <span>Match Organ to Sense</span>
      <span class="score-badge" id="score">0 / 5</span>
    </div>

    <div class="columns-container" id="columnsContainer">
      <svg id="connectionsSvg"></svg>

      
      <div class="column" id="organsCol">
        <button class="match-btn" data-key="sight"><span class="icon">👁️</span> Eyes</button>
        <button class="match-btn" data-key="hearing"><span class="icon">👂</span> Ears</button>
        <button class="match-btn" data-key="smell"><span class="icon">👃</span> Nose</button>
        <button class="match-btn" data-key="taste"><span class="icon">👅</span> Tongue</button>
        <button class="match-btn" data-key="touch"><span class="icon">✋</span> Skin</button>
      </div>

      
      <div class="column" id="sensesCol">
        <button class="match-btn" data-key="smell">Smell</button>
        <button class="match-btn" data-key="sight">Sight</button>
        <button class="match-btn" data-key="touch">Touch</button>
        <button class="match-btn" data-key="taste">Taste</button>
        <button class="match-btn" data-key="hearing">Hearing</button>
      </div>
    </div>

    <button class="reset-btn" id="resetBtn" style="visibility: hidden;">Reset Match</button>
  </div>

  <script>
    let audioCtx = null;

    function initAudio() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
    }

    function playTone(freq, duration = 0.15, type = 'sine') {
      try {
        initAudio();
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = type;
        osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
        gain.gain.setValueAtTime(0.15, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + duration);
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start();
        osc.stop(audioCtx.currentTime + duration);
      } catch (e) {}
    }

    function playSuccess() {
      playTone(523.25, 0.12);
      setTimeout(() => playTone(659.25, 0.12), 80);
      setTimeout(() => playTone(783.99, 0.25), 160);
    }

    function playError() {
      playTone(220, 0.15, 'sawtooth');
      setTimeout(() => playTone(180, 0.2, 'sawtooth'), 80);
    }

    const container = document.getElementById('columnsContainer');
    const svg = document.getElementById('connectionsSvg');
    const scoreBadge = document.getElementById('score');
    const resetBtn = document.getElementById('resetBtn');
    const organBtns = document.querySelectorAll('#organsCol .match-btn');
    const senseBtns = document.querySelectorAll('#sensesCol .match-btn');

    let selectedOrgan = null;
    let selectedSense = null;
    let matches = new Map();

    function drawLine(el1, el2) {
      const rect1 = el1.getBoundingClientRect();
      const rect2 = el2.getBoundingClientRect();
      const cRect = container.getBoundingClientRect();

      const x1 = rect1.right - cRect.left;
      const y1 = rect1.top + rect1.height / 2 - cRect.top;
      const x2 = rect2.left - cRect.left;
      const y2 = rect2.top + rect2.height / 2 - cRect.top;

      const dx = (x2 - x1) * 0.45;
      const d = `M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}`;

      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
      path.setAttribute('d', d);
      path.setAttribute('class', 'line-path');
      svg.appendChild(path);
      return path;
    }

    function redrawAllLines() {
      svg.innerHTML = '';
      matches.forEach((senseBtn, organBtn) => {
        drawLine(organBtn, senseBtn);
      });
    }

    function checkPair() {
      if (!selectedOrgan || !selectedSense) return;

      const organKey = selectedOrgan.dataset.key;
      const senseKey = selectedSense.dataset.key;

      if (organKey === senseKey) {
        // Correct match
        playSuccess();
        selectedOrgan.classList.remove('selected');
        selectedSense.classList.remove('selected');
        selectedOrgan.classList.add('matched');
        selectedSense.classList.add('matched');

        matches.set(selectedOrgan, selectedSense);
        drawLine(selectedOrgan, selectedSense);

        selectedOrgan = null;
        selectedSense = null;

        scoreBadge.textContent = `${matches.size} / 5`;

        if (matches.size === 5) {
          resetBtn.style.visibility = 'visible';
        }
      } else {
        // Incorrect match
        playError();
        const organ = selectedOrgan;
        const sense = selectedSense;
        organ.classList.add('shake');
        sense.classList.add('shake');

        setTimeout(() => {
          organ.classList.remove('shake', 'selected');
          sense.classList.remove('shake', 'selected');
        }, 380);

        selectedOrgan = null;
        selectedSense = null;
      }
    }

    organBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        initAudio();
        if (btn.classList.contains('matched')) return;

        if (selectedOrgan === btn) {
          btn.classList.remove('selected');
          selectedOrgan = null;
          return;
        }

        if (selectedOrgan) selectedOrgan.classList.remove('selected');
        selectedOrgan = btn;
        btn.classList.add('selected');
        playTone(440, 0.06);

        if (selectedSense) checkPair();
      });
    });

    senseBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        initAudio();
        if (btn.classList.contains('matched')) return;

        if (selectedSense === btn) {
          btn.classList.remove('selected');
          selectedSense = null;
          return;
        }

        if (selectedSense) selectedSense.classList.remove('selected');
        selectedSense = btn;
        btn.classList.add('selected');
        playTone(440, 0.06);

        if (selectedOrgan) checkPair();
      });
    });

    function resetGame() {
      selectedOrgan = null;
      selectedSense = null;
      matches.clear();
      svg.innerHTML = '';
      scoreBadge.textContent = '0 / 5';
      resetBtn.style.visibility = 'hidden';

      document.querySelectorAll('.match-btn').forEach(btn => {
        btn.classList.remove('matched', 'selected', 'shake');
      });
    }

    resetBtn.addEventListener('click', resetGame);
    window.addEventListener('resize', redrawAllLines);
  </script>
</body>
</html>

Introducing the Five Human Senses

<!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>The Five Senses</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

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

    /* Top row: 3 cards spanning 2 cols each */
    .card-1 { grid-column: span 2; }
    .card-2 { grid-column: span 2; }
    .card-3 { grid-column: span 2; }

    /* Bottom row: 2 cards spanning 3 cols each */
    .card-4 { grid-column: 1 / span 3; }
    .card-5 { grid-column: 4 / span 3; }

    .sense-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      position: relative;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .sense-card:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    .sense-card.active {
      transform: translateY(-2px);
    }

    /* Card Themes */
    .theme-blue.active {
      border-color: #2563eb;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2), 0 4px 12px rgba(37, 99, 235, 0.1);
    }
    .theme-amber.active {
      border-color: #d97706;
      box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2), 0 4px 12px rgba(217, 119, 6, 0.1);
    }
    .theme-emerald.active {
      border-color: #059669;
      box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2), 0 4px 12px rgba(5, 150, 105, 0.1);
    }
    .theme-purple.active {
      border-color: #7c3aed;
      box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2), 0 4px 12px rgba(124, 58, 237, 0.1);
    }
    .theme-rose.active {
      border-color: #e11d48;
      box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.2), 0 4px 12px rgba(225, 29, 72, 0.1);
    }

    .icon-box {
      font-size: 32px;
      line-height: 1;
      margin-bottom: 6px;
    }

    .title-row {
      display: flex;
      align-items: baseline;
      gap: 4px;
      margin-bottom: 4px;
    }

    .organ-name {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
    }

    .sense-name {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }

    .tag-badge {
      font-size: 11px;
      font-weight: 600;
      border-radius: 6px;
      padding: 3px 6px;
      line-height: 1.2;
      margin-top: 4px;
    }

    .theme-blue .tag-badge { background: #eff6ff; color: #1d4ed8; }
    .theme-amber .tag-badge { background: #fffbeb; color: #b45309; }
    .theme-emerald .tag-badge { background: #ecfdf5; color: #047857; }
    .theme-purple .tag-badge { background: #f5f3ff; color: #6d28d9; }
    .theme-rose .tag-badge { background: #fff1f2; color: #be123c; }

    /* Example bubble inside card */
    .example-bubble {
      margin-top: 8px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 6px;
      padding: 4px 8px;
      background: #f1f5f9;
      color: #334155;
      width: 100%;
      opacity: 0.4;
      transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sense-card.active .example-bubble {
      opacity: 1;
    }

    .theme-blue.active .example-bubble { background: #dbeafe; color: #1e40af; }
    .theme-amber.active .example-bubble { background: #fef3c7; color: #92400e; }
    .theme-emerald.active .example-bubble { background: #d1fae5; color: #065f46; }
    .theme-purple.active .example-bubble { background: #ede9fe; color: #5b21b6; }
    .theme-rose.active .example-bubble { background: #ffe4e6; color: #9f1239; }

    @media (max-width: 460px) {
      body {
        padding: 8px;
      }
      .grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
      }
      .card-1 { grid-column: span 1; }
      .card-2 { grid-column: span 1; }
      .card-3 { grid-column: span 1; }
      .card-4 { grid-column: span 1; }
      .card-5 { grid-column: 1 / span 2; }
      
      .icon-box { font-size: 28px; }
      .organ-name { font-size: 14px; }
      .sense-name { font-size: 12px; }
      .tag-badge { font-size: 10px; }
      .example-bubble { font-size: 11px; }
    }
  </style>
</head>
<body>

  <div class="grid-container" id="grid">
    
    <div class="sense-card card-1 theme-blue active" onclick="activateCard(this)">
      <div class="icon-box">👁️</div>
      <div class="title-row">
        <span class="organ-name">Eyes</span>
        <span class="sense-name">· Sight</span>
      </div>
      <div class="tag-badge">Light &amp; Colors</div>
      <div class="example-bubble">👀 See melted cheese</div>
    </div>

    
    <div class="sense-card card-2 theme-amber" onclick="activateCard(this)">
      <div class="icon-box">👂</div>
      <div class="title-row">
        <span class="organ-name">Ears</span>
        <span class="sense-name">· Hearing</span>
      </div>
      <div class="tag-badge">Sounds &amp; Pitch</div>
      <div class="example-bubble">🔊 Hear crust crunch</div>
    </div>

    
    <div class="sense-card card-3 theme-emerald" onclick="activateCard(this)">
      <div class="icon-box">👃</div>
      <div class="title-row">
        <span class="organ-name">Nose</span>
        <span class="sense-name">· Smell</span>
      </div>
      <div class="tag-badge">Scents &amp; Odors</div>
      <div class="example-bubble">🍅 Smell tomato sauce</div>
    </div>

    
    <div class="sense-card card-4 theme-purple" onclick="activateCard(this)">
      <div class="icon-box">👅</div>
      <div class="title-row">
        <span class="organ-name">Tongue</span>
        <span class="sense-name">· Taste</span>
      </div>
      <div class="tag-badge">Flavors &amp; Savory</div>
      <div class="example-bubble">🍕 Taste toppings</div>
    </div>

    
    <div class="sense-card card-5 theme-rose" onclick="activateCard(this)">
      <div class="icon-box">✋</div>
      <div class="title-row">
        <span class="organ-name">Skin</span>
        <span class="sense-name">· Touch</span>
      </div>
      <div class="tag-badge">Heat &amp; Texture</div>
      <div class="example-bubble">🔥 Feel warm slice</div>
    </div>
  </div>

  <script>
    function activateCard(el) {
      document.querySelectorAll('.sense-card').forEach(card => {
        card.classList.remove('active');
      });
      el.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, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: 100%;
      padding: 10px 12px 14px;
      user-select: none;
    }

    .diagram-area {
      position: relative;
      width: 100%;
      max-width: 520px;
      aspect-ratio: 500 / 360;
      margin: 0 auto;
    }

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

    /* Controls bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
      width: 100%;
      max-width: 520px;
      margin-top: 6px;
    }

    .step-btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 20px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    }

    .step-btn .num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #f1f5f9;
      color: #64748b;
      font-size: 11px;
      font-weight: 800;
    }

    .step-btn.active {
      border-color: #2563eb;
      background: #eff6ff;
      color: #1d4ed8;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
    }

    .step-btn.active .num {
      background: #2563eb;
      color: #ffffff;
    }

    .play-btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 50%;
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      color: #1e2945;
      cursor: pointer;
      transition: background-color 0.2s, border-color 0.2s;
    }

    .play-btn:active {
      background: #f1f5f9;
    }

    /* Labels & Badges */
    .step-badge {
      font-family: inherit;
      font-size: 12px;
      font-weight: 800;
      fill: #ffffff;
      text-anchor: middle;
      dominant-baseline: central;
    }

    .thought-bubble {
      transition: opacity 0.3s ease, transform 0.3s ease;
      transform-origin: 360px 85px;
    }

    .sensor-cilia {
      stroke-dasharray: 2 3;
      animation: sensorPulse 2s infinite linear;
    }

    @keyframes sensorPulse {
      0% { stroke-dashoffset: 0; }
      100% { stroke-dashoffset: 10; }
    }
  </style>
</head>
<body>

  <div class="diagram-area">
    <svg viewBox="0 0 500 360" aria-label="Cross-section diagram of nose showing smell journey">
      <defs>
        
        <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
          <feGaussianBlur stdDeviation="3" result="blur" />
          <feMerge>
            <feMergeNode in="blur" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>

        
        <linearGradient id="cavityGrad" x1="0%" y1="100%" x2="0%" y2="0%">
          <stop offset="0%" stop-color="#ffe4e6" />
          <stop offset="100%" stop-color="#fed7aa" />
        </linearGradient>

        <linearGradient id="brainGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#e0e7ff" />
          <stop offset="100%" stop-color="#ddd6fe" />
        </linearGradient>

        <linearGradient id="pathGrad" x1="0%" y1="100%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#f43f5e" />
          <stop offset="50%" stop-color="#f59e0b" />
          <stop offset="100%" stop-color="#2563eb" />
        </linearGradient>
      </defs>

      
      <path d="M 120 40 
               C 85 40, 60 70, 55 110
               C 50 145, 60 180, 50 210
               L 42 245
               C 40 255, 48 268, 62 268
               C 74 268, 88 252, 98 258
               C 92 278, 82 290, 80 300
               C 78 312, 92 318, 108 314
               C 125 310, 132 292, 136 280
               C 142 295, 145 315, 140 335
               L 165 345
               C 210 350, 310 350, 370 330
               C 445 300, 465 220, 460 140
               C 455 60, 385 35, 300 35
               Z" 
            fill="#f1f5f9" stroke="#cbd5e1" stroke-width="2.5" stroke-linejoin="round" />

      
      <g id="brainGroup">
        <path d="M 235 155
                 C 220 120, 230 75, 270 55
                 C 305 40, 360 42, 395 62
                 C 430 80, 440 125, 432 165
                 C 425 200, 380 215, 340 210
                 C 305 205, 290 190, 275 190
                 C 255 190, 242 175, 235 155 Z" 
              fill="url(#brainGrad)" stroke="#a5b4fc" stroke-width="2" />
        
        
        <path d="M 285 70 C 310 85, 335 70, 360 85 C 385 100, 395 85, 410 100" fill="none" stroke="#c7d2fe" stroke-width="2" stroke-linecap="round" />
        <path d="M 260 110 C 290 115, 320 100, 350 120 C 380 140, 400 130, 418 150" fill="none" stroke="#c7d2fe" stroke-width="2" stroke-linecap="round" />
        <path d="M 280 150 C 310 160, 340 150, 370 170" fill="none" stroke="#c7d2fe" stroke-width="2" stroke-linecap="round" />
      </g>

      
      <path d="M 98 258
               C 85 240, 95 195, 125 165
               C 150 140, 185 130, 210 135
               C 218 137, 222 145, 220 155
               C 215 175, 195 200, 185 218
               C 175 235, 170 260, 168 280
               C 150 282, 138 280, 128 268
               C 120 258, 108 265, 98 258 Z" 
            fill="url(#cavityGrad)" stroke="#fca5a5" stroke-width="2" />

      
      <g id="sensorArea">
        <path d="M 160 142 C 180 133, 200 135, 215 140" fill="none" stroke="#f59e0b" stroke-width="6" stroke-linecap="round" />
        
        <path class="sensor-cilia" d="M 162 147 L 162 156 M 172 144 L 172 154 M 182 142 L 182 153 M 193 142 L 193 153 M 204 143 L 204 154 M 213 146 L 213 155" stroke="#d97706" stroke-width="2" />
        
        <ellipse cx="192" cy="126" rx="20" ry="8" fill="#fef08a" stroke="#eab308" stroke-width="1.5" />
      </g>

      
      <path id="nerveTract" d="M 210 125 C 240 122, 275 132, 310 145" fill="none" stroke="#93c5fd" stroke-width="4" stroke-linecap="round" stroke-dasharray="3 3" />

      
      <path id="mainGuidePath" d="M 30 285 Q 75 285 92 265 Q 125 210 170 165 Q 188 145 192 135 Q 230 120 310 140 Q 360 150 375 135" fill="none" stroke="none" />

      
      <path id="activeGlowPath" d="M 30 285 Q 75 285 92 265 Q 125 210 170 165 Q 188 145 192 135 Q 230 120 310 140 Q 360 150 375 135" 
            fill="none" stroke="url(#pathGrad)" stroke-width="3" stroke-linecap="round" stroke-dasharray="6 6" opacity="0.8" />

      
      <g filter="url(#glow)">
        <circle id="dot1" r="5" fill="#f43f5e" />
        <circle id="dot2" r="4.5" fill="#f59e0b" />
        <circle id="dot3" r="4" fill="#3b82f6" />
        <circle id="dot4" r="3.5" fill="#60a5fa" />
      </g>

      
      <g transform="translate(8, 268)">
        <text x="0" y="24" font-size="28">🍓</text>
        <path d="M 28 8 C 32 4, 32 -2, 28 -6" fill="none" stroke="#fb7185" stroke-width="1.5" stroke-linecap="round" />
        <path d="M 33 12 C 38 8, 38 0, 33 -4" fill="none" stroke="#fb7185" stroke-width="1.5" stroke-linecap="round" opacity="0.7" />
      </g>

      
      <g id="pin1" transform="translate(68, 230)">
        <circle cx="0" cy="0" r="11" fill="#f43f5e" filter="url(#glow)" />
        <text x="0" y="0" class="step-badge">1</text>
        <rect x="-36" y="16" width="72" height="20" rx="10" fill="#ffffff" stroke="#f43f5e" stroke-width="1.5" />
        <text x="0" y="27" font-size="11" font-weight="800" fill="#e11d48" text-anchor="middle" dominant-baseline="central">Nostril</text>
      </g>

      
      <g id="pin2" transform="translate(130, 95)">
        <line x1="20" y1="20" x2="52" y2="40" stroke="#f59e0b" stroke-width="1.5" stroke-dasharray="2 2" />
        <circle cx="0" cy="0" r="11" fill="#f59e0b" filter="url(#glow)" />
        <text x="0" y="0" class="step-badge">2</text>
        <rect x="-48" y="-28" width="96" height="20" rx="10" fill="#ffffff" stroke="#f59e0b" stroke-width="1.5" />
        <text x="0" y="-17" font-size="11" font-weight="800" fill="#d97706" text-anchor="middle" dominant-baseline="central">Smell Sensors</text>
      </g>

      
      <g id="pin3" transform="translate(365, 185)">
        <circle cx="0" cy="0" r="11" fill="#2563eb" filter="url(#glow)" />
        <text x="0" y="0" class="step-badge">3</text>
        <rect x="-30" y="16" width="60" height="20" rx="10" fill="#ffffff" stroke="#2563eb" stroke-width="1.5" />
        <text x="0" y="27" font-size="11" font-weight="800" fill="#1d4ed8" text-anchor="middle" dominant-baseline="central">Brain</text>
      </g>

      
      <g id="thought" class="thought-bubble" transform="translate(325, 45)">
        <path d="M 0 0 C 10 -8, 120 -8, 130 0 C 140 10, 140 30, 130 40 C 120 48, 40 48, 20 48 L 5 56 L 10 44 C 0 40, -10 20, 0 0 Z" 
              fill="#ffffff" stroke="#2563eb" stroke-width="2" filter="url(#glow)" />
        <text x="68" y="22" font-size="12" font-weight="800" fill="#1e2945" text-anchor="middle" dominant-baseline="central">Fresh strawberries! 🍓</text>
      </g>
    </svg>
  </div>

  
  <div class="controls">
    <button class="step-btn active" id="btn1">
      <span class="num">1</span> Nostril
    </button>
    <button class="step-btn" id="btn2">
      <span class="num">2</span> Sensors
    </button>
    <button class="step-btn" id="btn3">
      <span class="num">3</span> Brain
    </button>
    <button class="play-btn" id="playBtn" title="Play / Pause">⏸</button>
  </div>

  <script>
    (function() {
      const guidePath = document.getElementById('mainGuidePath');
      const pathLength = guidePath.getTotalLength();
      
      const dots = [
        { el: document.getElementById('dot1'), offset: 0 },
        { el: document.getElementById('dot2'), offset: -0.07 },
        { el: document.getElementById('dot3'), offset: -0.14 },
        { el: document.getElementById('dot4'), offset: -0.21 }
      ];

      const btn1 = document.getElementById('btn1');
      const btn2 = document.getElementById('btn2');
      const btn3 = document.getElementById('btn3');
      const playBtn = document.getElementById('playBtn');
      const thought = document.getElementById('thought');
      const pins = [
        document.getElementById('pin1'),
        document.getElementById('pin2'),
        document.getElementById('pin3')
      ];
      const buttons = [btn1, btn2, btn3];

      let isPlaying = true;
      let manualStep = null; // null = auto loop
      let animProgress = 0; // 0 to 1
      const LOOP_DURATION = 4000; // 4s full loop
      let lastTime = performance.now();

      function updateActiveStep(stepIndex) {
        buttons.forEach((btn, idx) => {
          btn.classList.toggle('active', idx === stepIndex);
        });

        // Highlight pin scales
        pins.forEach((pin, idx) => {
          if (idx === stepIndex) {
            pin.style.transform = pin.getAttribute('transform') + ' scale(1.1)';
            pin.style.opacity = '1';
          } else {
            pin.style.transform = pin.getAttribute('transform').replace(' scale(1.1)', '');
            pin.style.opacity = '0.85';
          }
        });

        // Show/pulse thought bubble on Step 3
        if (stepIndex === 2) {
          thought.style.opacity = '1';
          thought.style.transform = 'scale(1)';
        } else {
          thought.style.opacity = '0.35';
          thought.style.transform = 'scale(0.95)';
        }
      }

      function renderPositions(progress) {
        dots.forEach(d => {
          let p = (progress + d.offset) % 1;
          if (p < 0) p += 1;
          
          const pt = guidePath.getPointAtLength(p * pathLength);
          d.el.setAttribute('cx', pt.x);
          d.el.setAttribute('cy', pt.y);

          // Fade out near very end of path
          if (p > 0.92) {
            d.el.setAttribute('opacity', (1 - (p - 0.92) / 0.08).toString());
          } else if (p < 0.05) {
            d.el.setAttribute('opacity', (p / 0.05).toString());
          } else {
            d.el.setAttribute('opacity', '1');
          }
        });

        // Determine current step based on progress along path:
        // 0.00 -> 0.35 : Step 1 (Nostril)
        // 0.35 -> 0.70 : Step 2 (Sensors)
        // 0.70 -> 1.00 : Step 3 (Brain)
        let curStep = 0;
        if (progress >= 0.70) curStep = 2;
        else if (progress >= 0.35) curStep = 1;

        updateActiveStep(curStep);
      }

      function loop(now) {
        const dt = now - lastTime;
        lastTime = now;

        if (isPlaying && manualStep === null) {
          animProgress = (animProgress + (dt / LOOP_DURATION)) % 1;
          renderPositions(animProgress);
        }

        requestAnimationFrame(loop);
      }

      requestAnimationFrame((now) => {
        lastTime = now;
        loop(now);
      });

      // Manual interactions
      function selectStep(stepIdx) {
        manualStep = stepIdx;
        isPlaying = false;
        playBtn.textContent = '▶';
        
        // Place particles at distinct checkpoints for each step
        const checkpoints = [0.18, 0.52, 0.88];
        animProgress = checkpoints[stepIdx];
        renderPositions(animProgress);
      }

      btn1.addEventListener('click', () => selectStep(0));
      btn2.addEventListener('click', () => selectStep(1));
      btn3.addEventListener('click', () => selectStep(2));

      playBtn.addEventListener('click', () => {
        isPlaying = !isPlaying;
        manualStep = null;
        playBtn.textContent = isPlaying ? '⏸' : '▶';
      });

    })();
  </script>
</body>
</html>

How the Nose Helps Us Smell

<!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 {
      background: #f8f9fa;
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .diagram-area {
      position: relative;
      width: 100%;
      max-width: 540px;
      aspect-ratio: 4 / 3;
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e6e6e6;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    }

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

    /* Floating particles animation */
    .particle {
      animation: floatToNose 3.6s infinite linear;
      opacity: 0;
    }

    .p1 { animation-delay: 0s; }
    .p2 { animation-delay: 0.9s; }
    .p3 { animation-delay: 1.8s; }
    .p4 { animation-delay: 2.7s; }

    @keyframes floatToNose {
      0% {
        transform: translate(0, 0) scale(0.6);
        opacity: 0;
      }
      15% {
        opacity: 0.9;
      }
      75% {
        opacity: 0.9;
      }
      100% {
        transform: translate(240px, -45px) scale(1.1);
        opacity: 0;
      }
    }

    .callout-badge {
      font-size: 13px;
      font-weight: 700;
      fill: #1e2945;
    }

    .sub-badge {
      font-size: 11px;
      font-weight: 600;
      fill: #6b7280;
    }

    .controls {
      display: flex;
      gap: 8px;
      margin-top: 10px;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #d1d5db;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s, border-color 0.2s;
    }

    .btn:hover {
      background: #f3f4f6;
      border-color: #22b7ff;
    }

    .btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
    }
  </style>
</head>
<body>

  <div class="diagram-area">
    <svg viewBox="0 0 540 405">
      <defs>
        
        <radialGradient id="faceGrad" cx="50%" cy="45%" r="50%">
          <stop offset="0%" stop-color="#ffe8d6"/>
          <stop offset="100%" stop-color="#fcd5b5"/>
        </radialGradient>
        <radialGradient id="cookieGrad" cx="40%" cy="40%" r="55%">
          <stop offset="0%" stop-color="#f6ad55"/>
          <stop offset="100%" stop-color="#dd6b20"/>
        </radialGradient>
        <radialGradient id="chipGrad" cx="30%" cy="30%" r="60%">
          <stop offset="0%" stop-color="#652b19"/>
          <stop offset="100%" stop-color="#3d1308"/>
        </radialGradient>
        <radialGradient id="glowDot" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stop-color="#ff9900"/>
          <stop offset="100%" stop-color="#ff5500"/>
        </radialGradient>
      </defs>

      
      <g id="face-group">
        
        <circle cx="390" cy="210" r="135" fill="url(#faceGrad)" stroke="#f6ad7b" stroke-width="3" />
        
        
        <ellipse cx="380" cy="85" rx="90" ry="30" fill="#78350f" />
        <circle cx="310" cy="105" r="28" fill="#78350f" />
        <circle cx="450" cy="105" r="28" fill="#78350f" />

        
        <circle cx="305" cy="225" r="18" fill="#ff7a7a" opacity="0.4" />
        <circle cx="455" cy="225" r="18" fill="#ff7a7a" opacity="0.4" />

        
        <path d="M 315 175 Q 330 160 345 175" fill="none" stroke="#4a2810" stroke-width="4" stroke-linecap="round" />
        <path d="M 415 175 Q 430 160 445 175" fill="none" stroke="#4a2810" stroke-width="4" stroke-linecap="round" />

        
        <path d="M 350 265 Q 380 295 410 265" fill="#f87171" stroke="#b91c1c" stroke-width="3" stroke-linecap="round" />
        <path d="M 360 267 Q 380 280 400 267" fill="#ffffff" />

        
        <g id="nose-feature">
          
          <path d="M 380 170 Q 378 198 368 206 Q 360 214 365 220 Q 375 226 385 224 Q 395 220 393 206" fill="#fbc599" stroke="#ea9f6c" stroke-width="2.5" stroke-linecap="round" />
          
          
          <ellipse cx="370" cy="220" rx="4.5" ry="3.5" fill="#5c2d13" />
          <ellipse cx="386" cy="220" rx="4.5" ry="3.5" fill="#5c2d13" />
          
          
          <circle cx="370" cy="220" r="7" fill="#22b7ff" opacity="0.25" />
          <circle cx="386" cy="220" r="7" fill="#22b7ff" opacity="0.25" />
        </g>
      </g>

      
      <g id="cookie-group">
        
        <ellipse cx="95" cy="285" rx="65" ry="18" fill="#e2e8f0" />
        <ellipse cx="95" cy="282" rx="55" ry="14" fill="#ffffff" />

        
        <circle cx="95" cy="255" r="42" fill="url(#cookieGrad)" stroke="#c05621" stroke-width="2.5" />

        
        <circle cx="82" cy="242" r="5.5" fill="url(#chipGrad)" />
        <circle cx="108" cy="245" r="6" fill="url(#chipGrad)" />
        <circle cx="92" cy="265" r="5" fill="url(#chipGrad)" />
        <circle cx="115" cy="268" r="4.5" fill="url(#chipGrad)" />
        <circle cx="78" cy="266" r="4.5" fill="url(#chipGrad)" />
        
        
        <path d="M 85 205 Q 80 185 92 170" fill="none" stroke="#f6ad55" stroke-width="2.5" stroke-linecap="round" stroke-dasharray="3,3" opacity="0.7"/>
        <path d="M 105 205 Q 115 185 102 170" fill="none" stroke="#f6ad55" stroke-width="2.5" stroke-linecap="round" stroke-dasharray="3,3" opacity="0.7"/>

        
        <rect x="52" y="320" width="86" height="26" rx="13" fill="#fff7ed" stroke="#fdba74" stroke-width="1.5" />
        <text x="95" y="337" text-anchor="middle" class="callout-badge" fill="#c2410c">🍪 Cookie</text>
      </g>

      
      <g id="scent-particles" transform="translate(115, 235)">
        
        <g class="particle p1">
          <circle cx="0" cy="0" r="5" fill="#ff7824" />
          <circle cx="12" cy="-6" r="3.5" fill="#22b7ff" />
          <circle cx="-8" cy="-8" r="3" fill="#f59e0b" />
        </g>
        
        
        <g class="particle p2">
          <circle cx="0" cy="5" r="4.5" fill="#3b82f6" />
          <circle cx="14" cy="0" r="4" fill="#fb923c" />
          <circle cx="-10" cy="8" r="3" fill="#10b981" />
        </g>

        
        <g class="particle p3">
          <circle cx="2" cy="-4" r="5" fill="#ec4899" />
          <circle cx="15" cy="-10" r="3.5" fill="#f97316" />
          <circle cx="-6" cy="4" r="4" fill="#22b7ff" />
        </g>

        
        <g class="particle p4">
          <circle cx="0" cy="2" r="4.5" fill="#f59e0b" />
          <circle cx="10" cy="6" r="4" fill="#06b6d4" />
          <circle cx="-12" cy="-2" r="3" fill="#e11d48" />
        </g>
      </g>

      

      
      <g transform="translate(200, 150)">
        <rect x="0" y="0" width="105" height="34" rx="8" fill="#f0f9ff" stroke="#bae6fd" stroke-width="1.5" />
        <text x="52" y="16" text-anchor="middle" class="callout-badge" fill="#0369a1">Scent</text>
        <text x="52" y="28" text-anchor="middle" class="sub-badge" fill="#0284c7">floating in air</text>
        <path d="M 52 34 L 52 46" stroke="#0284c7" stroke-width="1.5" stroke-linecap="round" marker-end="url(#arrowBlue)" />
      </g>

      
      <g transform="translate(395, 45)">
        <rect x="0" y="0" width="130" height="42" rx="8" fill="#ffffff" stroke="#22b7ff" stroke-width="2" />
        <text x="65" y="19" text-anchor="middle" class="callout-badge">Nose</text>
        <text x="65" y="34" text-anchor="middle" class="sub-badge">smell organ</text>
        
        <path d="M 30 42 L 0 85 L -20 145" fill="none" stroke="#22b7ff" stroke-width="2" stroke-linecap="round" />
        <circle cx="-20" cy="145" r="4" fill="#22b7ff" />
      </g>

      
      <g transform="translate(280, 310)">
        <rect x="0" y="0" width="130" height="42" rx="8" fill="#ffffff" stroke="#ff7824" stroke-width="2" />
        <text x="65" y="19" text-anchor="middle" class="callout-badge">Nostrils</text>
        <text x="65" y="34" text-anchor="middle" class="sub-badge">2 air openings</text>
        
        <path d="M 65 0 L 80 -45 L 96 -82" fill="none" stroke="#ff7824" stroke-width="2" stroke-linecap="round" />
        <circle cx="96" cy="-82" r="4" fill="#ff7824" />
      </g>
    </svg>
  </div>

  
  <div class="controls">
    <button id="smellBtn" class="btn active" onclick="toggleFlow()">
      <span>✦</span> <span id="btnText">Smell in Action</span>
    </button>
  </div>

  <script>
    let active = true;
    function toggleFlow() {
      active = !active;
      const particles = document.querySelectorAll('.particle');
      const btn = document.getElementById('smellBtn');
      const btnText = document.getElementById('btnText');

      particles.forEach(p => {
        p.style.animationPlayState = active ? 'running' : 'paused';
      });

      if (active) {
        btn.classList.add('active');
        btnText.textContent = 'Smell in Action';
      } else {
        btn.classList.remove('active');
        btnText.textContent = 'Pause Scent';
      }
    }
  </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: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .cards-grid {
      display: flex;
      gap: 12px;
      width: 100%;
      max-width: 600px;
      justify-content: center;
    }
    .hazard-card {
      flex: 1;
      min-width: 0;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
    }
    .card-title {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 12px;
      color: #334155;
    }
    .scene-area {
      width: 100%;
      height: 110px;
      background: #f8fafc;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 6px;
      margin-bottom: 12px;
      position: relative;
    }
    .emoji-item {
      font-size: 32px;
      line-height: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }
    .item-label {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .signal-flow {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .signal-svg {
      width: 50px;
      height: 30px;
    }
    .warning-badge {
      width: 100%;
      padding: 10px 8px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.3;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .badge-amber {
      background: #fef3c7;
      color: #92400e;
      border: 1px solid #fcd34d;
    }
    .badge-red {
      background: #fee2e2;
      color: #991b1b;
      border: 1px solid #fca5a5;
    }
    .badge-action {
      font-size: 11px;
      font-weight: 600;
      opacity: 0.9;
      margin-top: 2px;
    }

    /* Calmer SVG wave animation */
    .smoke-line {
      stroke: #94a3b8;
      stroke-width: 2.5;
      stroke-linecap: round;
      fill: none;
      stroke-dasharray: 4 4;
      animation: drift 2s linear infinite;
    }
    @keyframes drift {
      0% { stroke-dashoffset: 16; }
      100% { stroke-dashoffset: 0; }
    }

    @media (max-width: 360px) {
      .cards-grid {
        flex-direction: column;
      }
      .scene-area {
        height: 95px;
      }
    }
  </style>
</head>
<body>

  <div class="cards-grid">
    
    <div class="hazard-card">
      <div class="card-title">Smell Warning</div>
      
      <div class="scene-area">
        <div class="emoji-item">
          <span>🍞💨</span>
          <span class="item-label">Toaster</span>
        </div>

        <div class="signal-flow">
          <svg class="signal-svg" viewBox="0 0 50 30">
            <path class="smoke-line" d="M 5 20 Q 15 5, 25 15 T 45 10" />
            <path class="smoke-line" d="M 5 25 Q 15 12, 25 22 T 45 17" style="animation-delay: -0.5s;" />
          </svg>
        </div>

        <div class="emoji-item">
          <span>👃</span>
          <span class="item-label">Nose</span>
        </div>
      </div>

      <div class="warning-badge badge-amber">
        <span>⚠️ Smoke Detected!</span>
        <span class="badge-action">Alert an adult!</span>
      </div>
    </div>

    
    <div class="hazard-card">
      <div class="card-title">Taste Warning</div>
      
      <div class="scene-area">
        <div class="emoji-item">
          <span>🥛⚡</span>
          <span class="item-label">Sour Milk</span>
        </div>

        <div class="signal-flow">
          <span style="font-size: 20px; line-height: 1;">⚡</span>
          <span style="font-size: 16px; color: #ef4444; font-weight: 800;">→</span>
        </div>

        <div class="emoji-item">
          <span>👅</span>
          <span class="item-label">Tongue</span>
        </div>
      </div>

      <div class="warning-badge badge-red">
        <span>⛔ Sour / Spoiled!</span>
        <span class="badge-action">Spit it out!</span>
      </div>
    </div>
  </div>

</body>
</html>

science.ks1.y1.t2.s4

Aligned learning resources

Related diagrams