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

    /* Stepper Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      max-width: 440px;
    }
    .step-btn {
      background: #f1f5f9;
      border: 2px solid #cbd5e1;
      border-radius: 18px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    }
    .step-btn:focus-visible {
      outline: 2px solid #0284c7;
      outline-offset: 2px;
    }
    .step-btn.active {
      background: #e0f2fe;
      border-color: #0284c7;
      color: #0369a1;
    }
    .play-btn {
      background: #0284c7;
      color: #ffffff;
      border: none;
      border-radius: 18px;
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 38px;
      transition: background-color 0.2s;
    }
    .play-btn:hover {
      background: #0369a1;
    }

    /* Scene Stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 236px;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
    }

    /* Unsorted Dock Area */
    .dock-area {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 76px;
      background: #f1f5f9;
      border-bottom: 2px dashed #cbd5e1;
    }
    .dock-label {
      position: absolute;
      top: 4px;
      left: 8px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }
    .dock-slot {
      position: absolute;
      border: 1.5px dashed #cbd5e1;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.5);
    }
    .dock-slot-m {
      width: 56px;
      height: 56px;
      top: 14px;
      left: calc(20% - 28px);
    }
    .dock-slot-l {
      width: 72px;
      height: 72px;
      top: 2px;
      left: calc(50% - 36px);
    }
    .dock-slot-s {
      width: 40px;
      height: 40px;
      top: 22px;
      left: calc(80% - 20px);
    }

    /* Shelf and Slots */
    .shelf-base {
      position: absolute;
      top: 172px;
      left: 6%;
      right: 6%;
      height: 8px;
      background: #94a3b8;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
      z-index: 2;
    }
    .shelf-support {
      position: absolute;
      top: 180px;
      width: 8px;
      height: 8px;
      background: #64748b;
      border-radius: 0 0 3px 3px;
      z-index: 1;
    }
    .shelf-support.left { left: 12%; }
    .shelf-support.right { right: 12%; }

    /* Shelf Slot Outlines (sit directly on top of shelf-base) */
    .slot-outline {
      position: absolute;
      border: 2px dashed #cbd5e1;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.6);
      transition: border-color 0.3s, background-color 0.3s;
      z-index: 1;
    }
    .slot-outline-1 {
      width: 44px;
      height: 44px;
      top: 128px;
      left: calc(20% - 22px);
    }
    .slot-outline-2 {
      width: 60px;
      height: 60px;
      top: 112px;
      left: calc(50% - 30px);
    }
    .slot-outline-3 {
      width: 76px;
      height: 76px;
      top: 96px;
      left: calc(80% - 38px);
    }

    .slot-outline.active {
      border-color: #0284c7;
      background: #f0f9ff;
    }

    /* Slot Labels - positioned clearly BELOW the shelf bar */
    .slot-label {
      position: absolute;
      top: 186px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      transform: translateX(-50%);
      white-space: nowrap;
      z-index: 3;
    }
    .slot-label-1 { left: 20%; }
    .slot-label-2 { left: 50%; }
    .slot-label-3 { left: 80%; }

    .slot-badge {
      width: 18px;
      height: 18px;
      background: #475569;
      color: #ffffff;
      font-size: 11px;
      font-weight: 800;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.3s;
    }
    .slot-text {
      font-size: 12px;
      font-weight: 800;
      color: #1e293b;
      letter-spacing: -0.2px;
      transition: color 0.3s;
    }
    .slot-label.active .slot-badge {
      background: #0284c7;
    }
    .slot-label.active .slot-text {
      color: #0369a1;
    }

    /* Gift Boxes */
    .gift-box {
      position: absolute;
      border-radius: 6px;
      box-shadow: 0 3px 8px rgba(0,0,0,0.18);
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: top 0.65s cubic-bezier(0.34, 1.15, 0.64, 1), left 0.65s cubic-bezier(0.34, 1.15, 0.64, 1);
    }
    .gift-box::before {
      content: '';
      position: absolute;
      width: 20%;
      height: 100%;
      background: rgba(255, 255, 255, 0.45);
      border-radius: 1px;
    }
    .gift-box::after {
      content: '';
      position: absolute;
      height: 20%;
      width: 100%;
      background: rgba(255, 255, 255, 0.45);
      border-radius: 1px;
    }
    .bow {
      position: absolute;
      top: -8px;
      font-size: 14px;
      line-height: 1;
      z-index: 12;
      filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
    }

    /* Box Sizes and Initial Unsorted Positions (Dock) */
    .box-small {
      width: 38px;
      height: 38px;
      background: #eab308;
      top: 23px;
      left: calc(80% - 19px);
    }
    .box-medium {
      width: 54px;
      height: 54px;
      background: #f97316;
      top: 15px;
      left: calc(20% - 27px);
    }
    .box-large {
      width: 70px;
      height: 70px;
      background: #8b5cf6;
      top: 3px;
      left: calc(50% - 35px);
    }

    /* Animated Placed Positions (Resting on shelf base at y=172) */
    /* Step 1+: Small Box moved to Slot 1 (left 20%, top 172 - 38 = 134px) */
    .stage[data-step="1"] .box-small,
    .stage[data-step="2"] .box-small,
    .stage[data-step="3"] .box-small {
      top: 134px;
      left: calc(20% - 19px);
    }

    /* Step 2+: Medium Box moved to Slot 2 (left 50%, top 172 - 54 = 118px) */
    .stage[data-step="2"] .box-medium,
    .stage[data-step="3"] .box-medium {
      top: 118px;
      left: calc(50% - 27px);
    }

    /* Step 3: Large Box moved to Slot 3 (left 80%, top 172 - 70 = 102px) */
    .stage[data-step="3"] .box-large {
      top: 102px;
      left: calc(80% - 35px);
    }

    /* Result Banner */
    .banner {
      min-height: 32px;
      font-size: 13px;
      font-weight: 800;
      color: #14532d;
      background: #dcfce7;
      border: 1.5px solid #86efac;
      padding: 5px 16px;
      border-radius: 20px;
      opacity: 0;
      transform: translateY(3px);
      transition: opacity 0.35s ease, transform 0.35s ease;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .stage[data-step="3"] + .banner {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 380px) {
      .step-btn { padding: 4px 9px; font-size: 11px; }
      .slot-text { font-size: 11px; }
      .banner { font-size: 12px; }
    }
  </style>
</head>
<body>

  
  <div class="controls" role="toolbar" aria-label="Sequence controls">
    <button class="step-btn active" id="btn1" onclick="setStep(1)">1. Small</button>
    <button class="step-btn" id="btn2" onclick="setStep(2)">2. Medium</button>
    <button class="step-btn" id="btn3" onclick="setStep(3)">3. Large</button>
    <button class="play-btn" id="playToggle" onclick="togglePlay()" aria-label="Play/Pause animation">⏸</button>
  </div>

  
  <div class="stage" id="stage" data-step="1">
    
    <div class="dock-area">
      <span class="dock-label">Unsorted Boxes</span>
      <div class="dock-slot dock-slot-m"></div>
      <div class="dock-slot dock-slot-l"></div>
      <div class="dock-slot dock-slot-s"></div>
    </div>

    
    <div class="gift-box box-medium" title="Medium Box"><span class="bow">🎀</span></div>
    <div class="gift-box box-large" title="Large Box"><span class="bow">🎀</span></div>
    <div class="gift-box box-small" title="Small Box"><span class="bow">🎀</span></div>

    
    <div class="shelf-base"></div>
    <div class="shelf-support left"></div>
    <div class="shelf-support right"></div>

    
    <div class="slot-outline slot-outline-1 active" id="slotOutline1"></div>
    <div class="slot-outline slot-outline-2" id="slotOutline2"></div>
    <div class="slot-outline slot-outline-3" id="slotOutline3"></div>

    
    <div class="slot-label slot-label-1 active" id="slotLabel1">
      <span class="slot-badge">1</span>
      <span class="slot-text">Small</span>
    </div>
    <div class="slot-label slot-label-2" id="slotLabel2">
      <span class="slot-badge">2</span>
      <span class="slot-text">Medium</span>
    </div>
    <div class="slot-label slot-label-3" id="slotLabel3">
      <span class="slot-badge">3</span>
      <span class="slot-text">Large</span>
    </div>
  </div>

  
  <div class="banner" id="banner" aria-live="polite">
    <span>✓</span> Small, Medium, Large!
  </div>

  <script>
    let currentStep = 1;
    let isPlaying = true;
    let timer = null;

    function setStep(step) {
      currentStep = step;
      const stage = document.getElementById('stage');
      stage.setAttribute('data-step', step);

      // Update control buttons and slot highlights
      for (let i = 1; i <= 3; i++) {
        document.getElementById(`btn${i}`).classList.toggle('active', i === step);
        document.getElementById(`slotOutline${i}`).classList.toggle('active', i <= step);
        document.getElementById(`slotLabel${i}`).classList.toggle('active', i <= step);
      }
    }

    function nextStep() {
      const next = currentStep >= 3 ? 1 : currentStep + 1;
      setStep(next);
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 2200);
      isPlaying = true;
      document.getElementById('playToggle').textContent = '⏸';
    }

    function pauseAutoPlay() {
      if (timer) clearInterval(timer);
      isPlaying = false;
      document.getElementById('playToggle').textContent = '▶';
    }

    function togglePlay() {
      if (isPlaying) {
        pauseAutoPlay();
      } else {
        nextStep();
        startAutoPlay();
      }
    }

    // Initialize
    setStep(1);
    startAutoPlay();
  </script>
</body>
</html>

Ordering Three Objects as Small, Medium, and Large

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

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

    .diagram-container {
      width: 100%;
      max-width: 580px;
      position: relative;
    }

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

    .glow-pulse {
      animation: pulse 2.8s ease-in-out infinite;
      transform-origin: 300px 225px;
    }

    @keyframes pulse {
      0%, 100% {
        opacity: 0.7;
        transform: scale(0.97);
      }
      50% {
        opacity: 1;
        transform: scale(1.03);
      }
    }

    .apple-btn {
      cursor: pointer;
      transition: filter 0.2s ease, opacity 0.2s ease;
    }

    .apple-btn:hover {
      filter: brightness(1.06);
    }

    .text-title {
      font-size: 20px;
      font-weight: 800;
      fill: #1e2945;
      text-anchor: middle;
    }

    .text-highlight {
      fill: #0284c7;
    }

    .text-sub {
      font-size: 15px;
      font-weight: 700;
      fill: #4b5563;
      text-anchor: middle;
    }

    .callout-text {
      font-size: 13px;
      font-weight: 700;
      fill: #0369a1;
      text-anchor: middle;
    }

    .arrow-line {
      stroke: #0284c7;
      stroke-width: 2.5;
      fill: none;
      stroke-linecap: round;
    }

    .label-pill {
      fill: #f0f9ff;
      stroke: #bae6fd;
      stroke-width: 1.5;
      rx: 12px;
    }
  </style>
</head>
<body>
  <div class="diagram-container">
    <svg viewBox="0 0 600 420" aria-label="Small, Medium, and Large Apple Comparison">
      <defs>
        
        <radialGradient id="appleGrad" cx="35%" cy="30%" r="70%">
          <stop offset="0%" stop-color="#ff5e57"/>
          <stop offset="60%" stop-color="#e02020"/>
          <stop offset="100%" stop-color="#9e0c0c"/>
        </radialGradient>

        
        <linearGradient id="leafGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#4cd137"/>
          <stop offset="100%" stop-color="#218c74"/>
        </linearGradient>

        
        <radialGradient id="haloGrad" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stop-color="#38bdf8" stop-opacity="0.35"/>
          <stop offset="65%" stop-color="#38bdf8" stop-opacity="0.15"/>
          <stop offset="100%" stop-color="#38bdf8" stop-opacity="0"/>
        </radialGradient>

        
        <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>
      </defs>

      
      
      <path d="M 125 150 Q 200 95 242 165" class="arrow-line" marker-end="url(#arrow)"/>
      <rect x="110" y="88" width="135" height="26" class="label-pill"/>
      <text x="177" y="106" class="callout-text">Bigger than small</text>

      
      <path d="M 475 140 Q 400 95 358 165" class="arrow-line" marker-end="url(#arrow)"/>
      <rect x="355" y="88" width="138" height="26" class="label-pill"/>
      <text x="424" y="106" class="callout-text">Smaller than large</text>

      
      
      <polygon points="120,296 120,325 140,296" fill="#8d5c32" opacity="0.6"/>
      <polygon points="480,296 480,325 460,296" fill="#8d5c32" opacity="0.6"/>
      
      <rect x="40" y="280" width="520" height="16" rx="4" fill="#b07a4b"/>
      <rect x="40" y="292" width="520" height="4" fill="#8d5c32"/>

      
      <g class="glow-pulse">
        <circle cx="300" cy="225" r="68" fill="url(#haloGrad)"/>
        <circle cx="300" cy="225" r="54" fill="none" stroke="#38bdf8" stroke-width="2.5" stroke-dasharray="6 5" opacity="0.8"/>
      </g>

      
      <g id="appleSmall" class="apple-btn" onclick="highlight('small')">
        
        <path d="M 120 235 Q 123 218 130 216" stroke="#5c3818" stroke-width="3" fill="none" stroke-linecap="round"/>
        
        <path d="M 124 224 Q 138 220 135 228 Q 128 230 124 224 Z" fill="url(#leafGrad)"/>
        
        <circle cx="120" cy="254" r="24" fill="url(#appleGrad)"/>
        
        <ellipse cx="120" cy="233" rx="6" ry="2" fill="#7a0a0a" opacity="0.4"/>
        <ellipse cx="112" cy="245" rx="5" ry="8" fill="#ffffff" opacity="0.25" transform="rotate(-20 112 245)"/>
        
        <text x="120" y="322" class="text-sub">Small</text>
      </g>

      
      <g id="appleMedium" class="apple-btn" onclick="highlight('medium')">
        
        <path d="M 300 195 Q 305 168 316 166" stroke="#5c3818" stroke-width="4" fill="none" stroke-linecap="round"/>
        
        <path d="M 306 179 Q 328 174 324 186 Q 312 188 306 179 Z" fill="url(#leafGrad)"/>
        
        <circle cx="300" cy="228" r="42" fill="url(#appleGrad)"/>
        
        <ellipse cx="300" cy="191" rx="10" ry="3.5" fill="#7a0a0a" opacity="0.4"/>
        <ellipse cx="286" cy="214" rx="8" ry="14" fill="#ffffff" opacity="0.28" transform="rotate(-20 286 214)"/>
      </g>

      
      <g id="appleLarge" class="apple-btn" onclick="highlight('large')">
        
        <path d="M 480 155 Q 487 118 502 115" stroke="#5c3818" stroke-width="5" fill="none" stroke-linecap="round"/>
        
        <path d="M 488 132 Q 520 125 514 142 Q 498 144 488 132 Z" fill="url(#leafGrad)"/>
        
        <circle cx="480" cy="202" r="62" fill="url(#appleGrad)"/>
        
        <ellipse cx="480" cy="148" rx="15" ry="5" fill="#7a0a0a" opacity="0.4"/>
        <ellipse cx="460" cy="182" rx="12" ry="21" fill="#ffffff" opacity="0.28" transform="rotate(-20 460 182)"/>
        
        <text x="480" y="322" class="text-sub">Large</text>
      </g>

      
      <g id="centerLabel">
        <rect x="145" y="354" width="310" height="42" rx="21" fill="#e0f2fe" stroke="#38bdf8" stroke-width="2"/>
        <text x="300" y="381" class="text-title">
          Just in the middle: <tspan class="text-highlight">Medium!</tspan>
        </text>
      </g>
    </svg>
  </div>

  <script>
    function highlight(size) {
      const audioCtx = window.AudioContext || window.webkitAudioContext;
      if (audioCtx) {
        try {
          const ctx = new audioCtx();
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          const freqs = { small: 523.25, medium: 659.25, large: 783.99 };
          osc.frequency.value = freqs[size] || 659.25;
          osc.type = 'sine';
          gain.gain.setValueAtTime(0.18, ctx.currentTime);
          gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.35);
          osc.connect(gain);
          gain.connect(ctx.destination);
          osc.start();
          osc.stop(ctx.currentTime + 0.35);
        } catch (e) {}
      }
    }
  </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">
  <title>Ordering Bowls by Size</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #fdfaf6;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      height: 100%;
      overflow: hidden;
      padding: 16px 12px 0 12px;
    }

    .hint {
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      letter-spacing: 0.2px;
      text-align: center;
    }

    .scene {
      position: relative;
      width: 100%;
      max-width: 520px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    /* Wooden Table */
    .table-container {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 110px;
      background: linear-gradient(180deg, #d97736 0%, #b45309 30%, #78350f 100%);
      border-radius: 20px 20px 0 0;
      box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35);
    }

    .table-lip {
      position: absolute;
      top: 0;
      left: -4%;
      width: 108%;
      height: 22px;
      background: linear-gradient(180deg, #fbbf24 0%, #d97736 100%);
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }

    /* Bowls Layer */
    .bowls-row {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      width: 100%;
      padding-bottom: 34px;
      height: 230px;
    }

    .bowl-slot {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      cursor: pointer;
      padding: 6px;
    }

    .tag {
      font-size: 14px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 999px;
      margin-bottom: 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .tag-medium { background: #d1fae5; color: #047857; }
    .tag-small  { background: #dbeafe; color: #1d4ed8; }
    .tag-large  { background: #fee2e2; color: #b91c1c; }

    .bowl-graphic {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      transform-origin: bottom center;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.12));
      transition: filter 0.2s ease;
    }

    .bowl-slot:hover .bowl-graphic {
      filter: drop-shadow(0 6px 10px rgba(0,0,0,0.2));
    }

    .wobble {
      animation: bowlWobble 0.5s ease-in-out;
    }

    @keyframes bowlWobble {
      0%   { transform: rotate(0deg) scale(1); }
      20%  { transform: rotate(-7deg) scale(1.04); }
      40%  { transform: rotate(6deg) scale(1.04); }
      60%  { transform: rotate(-4deg) scale(1.02); }
      80%  { transform: rotate(2deg) scale(1.01); }
      100% { transform: rotate(0deg) scale(1); }
    }

    .steam {
      animation: steamFloat 2.4s ease-in-out infinite alternate;
      opacity: 0.6;
    }
    @keyframes steamFloat {
      0% { transform: translateY(0); opacity: 0.3; }
      100% { transform: translateY(-4px); opacity: 0.7; }
    }
  </style>
</head>
<body>

  <div class="hint">Tap a bowl to check its size</div>

  <div class="scene">
    <div class="table-container">
      <div class="table-lip"></div>
    </div>

    <div class="bowls-row">
      
      <div class="bowl-slot" id="slot-medium" onclick="playBowl('medium', 440)">
        <div class="tag tag-medium">Medium</div>
        <div class="bowl-graphic" id="bowl-medium">
          <svg width="100" height="85" viewBox="0 0 100 85" fill="none">
            
            <path class="steam" d="M44 14 C41 9 47 5 44 0" stroke="#a7f3d0" stroke-width="2.5" stroke-linecap="round"/>
            <path class="steam" style="animation-delay: 0.7s;" d="M54 14 C51 9 57 5 54 0" stroke="#a7f3d0" stroke-width="2.5" stroke-linecap="round"/>
            
            <path d="M10 28 Q50 94 90 28 Z" fill="#10b981"/>
            
            <ellipse cx="50" cy="28" rx="40" ry="12" fill="#059669"/>
            <ellipse cx="50" cy="27" rx="35" ry="9" fill="#fde68a"/>
            <circle cx="46" cy="26" r="3" fill="#f59e0b" opacity="0.6"/>
            
            <path d="M22 42 Q32 64 50 68" stroke="#34d399" stroke-width="3" stroke-linecap="round" fill="none" opacity="0.8"/>
            
            <rect x="42" y="70" width="16" height="3" rx="1.5" fill="#047857"/>
          </svg>
        </div>
      </div>

      
      <div class="bowl-slot" id="slot-small" onclick="playBowl('small', 587)">
        <div class="tag tag-small">Small</div>
        <div class="bowl-graphic" id="bowl-small">
          <svg width="64" height="52" viewBox="0 0 64 52" fill="none">
            
            <path class="steam" d="M32 9 C30 5 34 2 32 0" stroke="#bae6fd" stroke-width="2" stroke-linecap="round"/>
            
            <path d="M7 17 Q32 58 57 17 Z" fill="#3b82f6"/>
            
            <ellipse cx="32" cy="17" rx="25" ry="7.5" fill="#2563eb"/>
            <ellipse cx="32" cy="16" rx="21" ry="5.5" fill="#fde68a"/>
            
            <path d="M15 25 Q21 40 32 42" stroke="#93c5fd" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.8"/>
            
            <rect x="27" y="44" width="10" height="2" rx="1" fill="#1d4ed8"/>
          </svg>
        </div>
      </div>

      
      <div class="bowl-slot" id="slot-large" onclick="playBowl('large', 293)">
        <div class="tag tag-large">Large</div>
        <div class="bowl-graphic" id="bowl-large">
          <svg width="140" height="118" viewBox="0 0 140 118" fill="none">
            
            <path class="steam" d="M58 20 C54 12 63 6 58 0" stroke="#fecaca" stroke-width="3" stroke-linecap="round"/>
            <path class="steam" style="animation-delay: 0.5s;" d="M72 20 C68 12 77 6 72 0" stroke="#fecaca" stroke-width="3" stroke-linecap="round"/>
            <path class="steam" style="animation-delay: 1.1s;" d="M86 20 C82 12 91 6 86 0" stroke="#fecaca" stroke-width="3" stroke-linecap="round"/>
            
            <path d="M12 40 Q70 130 128 40 Z" fill="#ef4444"/>
            
            <ellipse cx="70" cy="40" rx="58" ry="17" fill="#dc2626"/>
            <ellipse cx="70" cy="38" rx="51" ry="13" fill="#fde68a"/>
            
            <circle cx="62" cy="38" r="4.5" fill="#e11d48"/>
            <circle cx="73" cy="39" r="4" fill="#e11d48"/>
            <circle cx="81" cy="36" r="3.5" fill="#e11d48"/>
            
            <path d="M28 60 Q44 94 70 100" stroke="#fca5a5" stroke-width="4" stroke-linecap="round" fill="none" opacity="0.8"/>
            
            <rect x="58" y="102" width="24" height="4" rx="2" fill="#991b1b"/>
          </svg>
        </div>
      </div>
    </div>
  </div>

  <script>
    let audioCtx = null;

    function playBowl(size, freq) {
      // Gentle Wobble animation
      const el = document.getElementById('bowl-' + size);
      el.classList.remove('wobble');
      void el.offsetWidth; // trigger reflow
      el.classList.add('wobble');

      // Audio feedback on tap
      try {
        if (!audioCtx) {
          audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        }
        if (audioCtx.state === 'suspended') {
          audioCtx.resume();
        }
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = 'triangle';
        osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
        gain.gain.setValueAtTime(0.18, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.35);
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start();
        osc.stop(audioCtx.currentTime + 0.35);
      } catch (e) {}
    }
  </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: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px 16px;
      user-select: none;
    }

    .header-bar {
      display: flex;
      gap: 8px;
      justify-content: center;
      width: 100%;
      max-width: 480px;
    }

    .size-btn {
      flex: 1;
      padding: 8px 6px;
      border: 2px solid transparent;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      background: #ffffff;
      color: #64748b;
      box-shadow: 0 2px 5px rgba(0,0,0,0.06);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
    }

    .size-btn:focus-visible { outline: 2px solid #22b7ff; }

    .size-btn[data-size="small"].active {
      background: #e0f2fe;
      color: #0369a1;
      border-color: #38bdf8;
      box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25);
    }
    .size-btn[data-size="medium"].active {
      background: #fef3c7;
      color: #b45309;
      border-color: #f59e0b;
      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
    }
    .size-btn[data-size="large"].active {
      background: #dcfce7;
      color: #15803d;
      border-color: #22c55e;
      box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
    }

    .scene-wrap {
      width: 100%;
      max-width: 480px;
      position: relative;
    }

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

    .bear-group {
      cursor: pointer;
      transition: opacity 0.5s ease;
    }

    .bear-group:focus-visible {
      outline: none;
    }

    .bear-group .glow-ring {
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    .bear-group.active .glow-ring {
      opacity: 1;
    }

    .bear-group.dimmed {
      opacity: 0.45;
    }

    .guide-step {
      stroke-dasharray: 6 5;
    }

    .stair-glow {
      transition: stroke-width 0.5s ease, stroke 0.5s ease;
    }
  </style>
</head>
<body>

  <div class="header-bar" role="tablist">
    <button class="size-btn" data-size="small" role="tab" aria-selected="false">
      <span>🧸</span> Small
    </button>
    <button class="size-btn" data-size="medium" role="tab" aria-selected="false">
      <span>🧸</span> Medium
    </button>
    <button class="size-btn" data-size="large" role="tab" aria-selected="false">
      <span>🧸</span> Large
    </button>
  </div>

  <div class="scene-wrap">
    <svg viewBox="0 0 480 300" aria-label="Small, Medium, and Large Teddy Bears arranged in order of height">
      <defs>
        
        <linearGradient id="bgSky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#f0f9ff"/>
          <stop offset="100%" stop-color="#e0f2fe"/>
        </linearGradient>

        <linearGradient id="bearFur" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#b45309"/>
          <stop offset="100%" stop-color="#78350f"/>
        </linearGradient>

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

        <linearGradient id="stairGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#0284c7"/>
          <stop offset="50%" stop-color="#d97706"/>
          <stop offset="100%" stop-color="#16a34a"/>
        </linearGradient>
      </defs>

      
      <rect x="0" y="8" width="480" height="242" rx="16" fill="url(#bgSky)" />

      
      <path id="stairLine" class="guide-step stair-glow"
        d="M 20 188 L 85 188 L 85 130 L 225 130 L 225 60 L 400 60 L 460 60"
        fill="none" stroke="url(#stairGrad)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />

      
      
      <line x1="85" y1="188" x2="140" y2="188" stroke="#38bdf8" stroke-width="2" stroke-dasharray="4 4" opacity="0.8"/>
      
      <line x1="225" y1="130" x2="300" y2="130" stroke="#f59e0b" stroke-width="2" stroke-dasharray="4 4" opacity="0.8"/>
      
      <line x1="400" y1="60" x2="470" y2="60" stroke="#22c55e" stroke-width="2" stroke-dasharray="4 4" opacity="0.8"/>

      
      <path d="M 85 150 L 85 135 M 81 141 L 85 133 L 89 141" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M 225 85 L 225 68 M 221 76 L 225 65 L 229 76" stroke="#d97706" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>

      
      <rect x="0" y="250" width="480" height="42" rx="10" fill="#86efac" />
      <line x1="0" y1="250" x2="480" y2="250" stroke="#22c55e" stroke-width="4" />
      
      <circle cx="40" cy="254" r="5" fill="#4ade80" />
      <circle cx="150" cy="255" r="4" fill="#4ade80" />
      <circle cx="310" cy="255" r="5" fill="#4ade80" />
      <circle cx="440" cy="254" r="6" fill="#4ade80" />

      
      <g class="bear-group" id="bearSmall" data-size="small" tabindex="0" role="button" aria-label="Small Bear">
        
        <ellipse class="glow-ring" cx="85" cy="216" rx="42" ry="46" fill="#38bdf8" fill-opacity="0.25" stroke="#0284c7" stroke-width="3" stroke-dasharray="5 4" />

        
        <ellipse cx="73" cy="246" rx="10" ry="7" fill="#92400e" />
        <ellipse cx="97" cy="246" rx="10" ry="7" fill="#92400e" />
        <ellipse cx="73" cy="246" rx="6" ry="4" fill="#fed7aa" />
        <ellipse cx="97" cy="246" rx="6" ry="4" fill="#fed7aa" />

        
        <ellipse cx="85" cy="226" rx="19" ry="20" fill="url(#bearFur)" />
        <ellipse cx="85" cy="228" rx="12" ry="13" fill="url(#bearLight)" />

        
        <ellipse cx="64" cy="224" rx="6" ry="10" transform="rotate(20 64 224)" fill="#92400e" />
        <ellipse cx="106" cy="224" rx="6" ry="10" transform="rotate(-20 106 224)" fill="#92400e" />

        
        <circle cx="72" cy="194" r="7" fill="#92400e" />
        <circle cx="72" cy="194" r="4" fill="#f472b6" />
        <circle cx="98" cy="194" r="7" fill="#92400e" />
        <circle cx="98" cy="194" r="4" fill="#f472b6" />

        
        <circle cx="85" cy="204" r="16" fill="url(#bearFur)" />
        
        <ellipse cx="85" cy="209" rx="8" ry="6" fill="#fed7aa" />
        <ellipse cx="85" cy="207" rx="3.5" ry="2.5" fill="#451a03" />
        <path d="M 82 211 Q 85 214 88 211" fill="none" stroke="#451a03" stroke-width="1.2" stroke-linecap="round" />

        
        <circle cx="79" cy="202" r="2" fill="#1e1b4b" />
        <circle cx="78.5" cy="201" r="0.7" fill="#ffffff" />
        <circle cx="91" cy="202" r="2" fill="#1e1b4b" />
        <circle cx="90.5" cy="201" r="0.7" fill="#ffffff" />
        
        <circle cx="75" cy="207" r="2" fill="#f472b6" opacity="0.6"/>
        <circle cx="95" cy="207" r="2" fill="#f472b6" opacity="0.6"/>
      </g>

      
      <g class="bear-group" id="bearMed" data-size="medium" tabindex="0" role="button" aria-label="Medium Bear">
        
        <ellipse class="glow-ring" cx="225" cy="186" rx="58" ry="68" fill="#f59e0b" fill-opacity="0.25" stroke="#d97706" stroke-width="3" stroke-dasharray="5 4" />

        
        <ellipse cx="206" cy="245" rx="15" ry="9" fill="#92400e" />
        <ellipse cx="244" cy="245" rx="15" ry="9" fill="#92400e" />
        <ellipse cx="206" cy="245" rx="9" ry="5.5" fill="#fed7aa" />
        <ellipse cx="244" cy="245" rx="9" ry="5.5" fill="#fed7aa" />

        
        <ellipse cx="225" cy="214" rx="30" ry="32" fill="url(#bearFur)" />
        <ellipse cx="225" cy="217" rx="19" ry="21" fill="url(#bearLight)" />

        
        <ellipse cx="192" cy="210" rx="9" ry="16" transform="rotate(22 192 210)" fill="#92400e" />
        <ellipse cx="258" cy="210" rx="9" ry="16" transform="rotate(-22 258 210)" fill="#92400e" />

        
        <circle cx="205" cy="142" r="11" fill="#92400e" />
        <circle cx="205" cy="142" r="6" fill="#f472b6" />
        <circle cx="245" cy="142" r="11" fill="#92400e" />
        <circle cx="245" cy="142" r="6" fill="#f472b6" />

        
        <circle cx="225" cy="158" r="25" fill="url(#bearFur)" />
        
        <ellipse cx="225" cy="165" rx="12" ry="9" fill="#fed7aa" />
        <ellipse cx="225" cy="162" rx="5" ry="3.5" fill="#451a03" />
        <path d="M 221 167 Q 225 172 229 167" fill="none" stroke="#451a03" stroke-width="1.8" stroke-linecap="round" />

        
        <circle cx="216" cy="154" r="3" fill="#1e1b4b" />
        <circle cx="215" cy="153" r="1" fill="#ffffff" />
        <circle cx="234" cy="154" r="3" fill="#1e1b4b" />
        <circle cx="233" cy="153" r="1" fill="#ffffff" />
        
        <circle cx="209" cy="162" r="3.5" fill="#f472b6" opacity="0.6"/>
        <circle cx="241" cy="162" r="3.5" fill="#f472b6" opacity="0.6"/>
      </g>

      
      <g class="bear-group" id="bearLarge" data-size="large" tabindex="0" role="button" aria-label="Large Bear">
        
        <ellipse class="glow-ring" cx="400" cy="152" rx="76" ry="102" fill="#22c55e" fill-opacity="0.25" stroke="#16a34a" stroke-width="3" stroke-dasharray="5 4" />

        
        <ellipse cx="372" cy="244" rx="22" ry="12" fill="#92400e" />
        <ellipse cx="428" cy="244" rx="22" ry="12" fill="#92400e" />
        <ellipse cx="372" cy="244" rx="13" ry="7.5" fill="#fed7aa" />
        <ellipse cx="428" cy="244" rx="13" ry="7.5" fill="#fed7aa" />

        
        <ellipse cx="400" cy="180" rx="46" ry="52" fill="url(#bearFur)" />
        <ellipse cx="400" cy="184" rx="30" ry="34" fill="url(#bearLight)" />

        
        <ellipse cx="350" cy="178" rx="14" ry="26" transform="rotate(22 350 178)" fill="#92400e" />
        <ellipse cx="450" cy="178" rx="14" ry="26" transform="rotate(-22 450 178)" fill="#92400e" />

        
        <circle cx="368" cy="76" r="16" fill="#92400e" />
        <circle cx="368" cy="76" r="9" fill="#f472b6" />
        <circle cx="432" cy="76" r="16" fill="#92400e" />
        <circle cx="432" cy="76" r="9" fill="#f472b6" />

        
        <circle cx="400" cy="106" r="38" fill="url(#bearFur)" />
        
        <ellipse cx="400" cy="118" rx="18" ry="14" fill="#fed7aa" />
        <ellipse cx="400" cy="113" rx="8" ry="5.5" fill="#451a03" />
        <path d="M 393 120 Q 400 128 407 120" fill="none" stroke="#451a03" stroke-width="2.5" stroke-linecap="round" />

        
        <circle cx="386" cy="101" r="4.5" fill="#1e1b4b" />
        <circle cx="384.5" cy="99.5" r="1.6" fill="#ffffff" />
        <circle cx="414" cy="101" r="4.5" fill="#1e1b4b" />
        <circle cx="412.5" cy="99.5" r="1.6" fill="#ffffff" />
        
        <circle cx="376" cy="113" r="5" fill="#f472b6" opacity="0.6"/>
        <circle cx="424" cy="113" r="5" fill="#f472b6" opacity="0.6"/>
      </g>

      
      <g transform="translate(85, 276)">
        <rect x="-35" y="-12" width="70" height="24" rx="12" fill="#0284c7" />
        <text x="0" y="4" text-anchor="middle" font-size="12" font-weight="800" fill="#ffffff">Small</text>
      </g>
      <g transform="translate(225, 276)">
        <rect x="-42" y="-12" width="84" height="24" rx="12" fill="#d97706" />
        <text x="0" y="4" text-anchor="middle" font-size="12" font-weight="800" fill="#ffffff">Medium</text>
      </g>
      <g transform="translate(400, 276)">
        <rect x="-35" y="-12" width="70" height="24" rx="12" fill="#16a34a" />
        <text x="0" y="4" text-anchor="middle" font-size="12" font-weight="800" fill="#ffffff">Large</text>
      </g>
    </svg>
  </div>

  <script>
    // Musical scale pitch mapping to height (Pedagogical sound aid)
    function playBearTone(pitch) {
      try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'triangle';
        osc.frequency.value = pitch;
        osc.connect(gain);
        gain.connect(ctx.destination);
        gain.gain.setValueAtTime(0.2, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.35);
        osc.start();
        osc.stop(ctx.currentTime + 0.35);
      } catch (e) {}
    }

    const pitches = { small: 261.63, medium: 329.63, large: 392.00 }; // C4, E4, G4
    const buttons = document.querySelectorAll('.size-btn');
    const bears = document.querySelectorAll('.bear-group');

    function selectSize(size) {
      let activeSize = size;
      
      // If already active, clear selection to show all
      const currentBtn = document.querySelector(`.size-btn[data-size="${size}"]`);
      if (currentBtn && currentBtn.classList.contains('active')) {
        activeSize = null;
      }

      buttons.forEach(btn => {
        const isActive = btn.dataset.size === activeSize;
        btn.classList.toggle('active', isActive);
        btn.setAttribute('aria-selected', isActive ? 'true' : 'false');
      });

      bears.forEach(bear => {
        if (!activeSize) {
          bear.classList.remove('active', 'dimmed');
        } else if (bear.dataset.size === activeSize) {
          bear.classList.add('active');
          bear.classList.remove('dimmed');
        } else {
          bear.classList.remove('active');
          bear.classList.add('dimmed');
        }
      });

      if (activeSize && pitches[activeSize]) {
        playBearTone(pitches[activeSize]);
      }
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => selectSize(btn.dataset.size));
    });

    bears.forEach(bear => {
      bear.addEventListener('click', () => selectSize(bear.dataset.size));
      bear.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          selectSize(bear.dataset.size);
        }
      });
    });
  </script>
</body>
</html>

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

    .ordering-row {
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: #f8fafc;
      border-radius: 16px;
      padding: 10px 12px;
    }

    .arrow-track {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: linear-gradient(90deg, #e0f2fe, #dbeafe);
      border-radius: 20px;
      padding: 5px 12px;
      font-size: 14px;
      font-weight: 800;
      color: #0369a1;
      letter-spacing: 0.2px;
    }

    .arrow-track.reverse {
      background: linear-gradient(90deg, #fef3c7, #fed7aa);
      color: #c2410c;
    }

    .animals-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      align-items: flex-end;
      justify-items: center;
      height: 120px;
      position: relative;
      border-bottom: 3px dashed #cbd5e1;
      padding-bottom: 4px;
    }

    .animal-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      cursor: pointer;
      transition: transform 0.2s ease;
      touch-action: manipulation;
    }

    .animal-card:active {
      transform: scale(0.95);
    }

    .size-tag {
      font-size: 13px;
      font-weight: 700;
      margin-top: 4px;
      color: #475569;
    }

    /* Animal SVGs */
    .duck-svg {
      display: block;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    }
  </style>
</head>
<body>

  
  <div class="ordering-row">
    <div class="arrow-track">
      <span>Small</span>
      <span>→</span>
      <span>Medium</span>
      <span>→</span>
      <span>Large</span>
    </div>
    <div class="animals-container">
      
      <div class="animal-card" onclick="playSound(587)">
        <svg class="duck-svg" width="46" height="46" viewBox="0 0 50 50">
          <ellipse cx="25" cy="33" rx="14" ry="12" fill="#38bdf8" />
          <circle cx="27" cy="18" r="10" fill="#38bdf8" />
          <polygon points="34,18 43,21 34,24" fill="#f97316" />
          <circle cx="30" cy="16" r="2.5" fill="#0f172a" />
          <circle cx="31" cy="15" r="0.8" fill="#ffffff" />
          <ellipse cx="20" cy="34" rx="7" ry="5" fill="#0284c7" />
          <line x1="22" y1="44" x2="22" y2="48" stroke="#f97316" stroke-width="2.5" stroke-linecap="round" />
          <line x1="28" y1="44" x2="28" y2="48" stroke="#f97316" stroke-width="2.5" stroke-linecap="round" />
        </svg>
        <span class="size-tag">Small</span>
      </div>

      
      <div class="animal-card" onclick="playSound(440)">
        <svg class="duck-svg" width="68" height="68" viewBox="0 0 70 70">
          <ellipse cx="34" cy="46" rx="20" ry="17" fill="#4ade80" />
          <circle cx="38" cy="24" r="14" fill="#4ade80" />
          <polygon points="48,24 62,28 48,32" fill="#f97316" />
          <circle cx="42" cy="22" r="3.5" fill="#0f172a" />
          <circle cx="43.5" cy="20.5" r="1.2" fill="#ffffff" />
          <ellipse cx="26" cy="47" rx="10" ry="7" fill="#22c55e" />
          <line x1="30" y1="62" x2="30" y2="67" stroke="#f97316" stroke-width="3" stroke-linecap="round" />
          <line x1="38" y1="62" x2="38" y2="67" stroke="#f97316" stroke-width="3" stroke-linecap="round" />
        </svg>
        <span class="size-tag">Medium</span>
      </div>

      
      <div class="animal-card" onclick="playSound(293)">
        <svg class="duck-svg" width="94" height="94" viewBox="0 0 95 95">
          <ellipse cx="46" cy="62" rx="28" ry="23" fill="#facc15" />
          <circle cx="52" cy="32" r="19" fill="#facc15" />
          <polygon points="65,32 84,37 65,43" fill="#ea580c" />
          <circle cx="58" cy="29" r="4.5" fill="#0f172a" />
          <circle cx="60" cy="27" r="1.6" fill="#ffffff" />
          <ellipse cx="35" cy="64" rx="14" ry="10" fill="#eab308" />
          <line x1="40" y1="83" x2="40" y2="90" stroke="#ea580c" stroke-width="4" stroke-linecap="round" />
          <line x1="52" y1="83" x2="52" y2="90" stroke="#ea580c" stroke-width="4" stroke-linecap="round" />
        </svg>
        <span class="size-tag">Large</span>
      </div>
    </div>
  </div>

  
  <div class="ordering-row">
    <div class="arrow-track reverse">
      <span>Large</span>
      <span>→</span>
      <span>Medium</span>
      <span>→</span>
      <span>Small</span>
    </div>
    <div class="animals-container">
      
      <div class="animal-card" onclick="playSound(293)">
        <svg class="duck-svg" width="94" height="94" viewBox="0 0 95 95">
          <ellipse cx="46" cy="62" rx="28" ry="23" fill="#facc15" />
          <circle cx="52" cy="32" r="19" fill="#facc15" />
          <polygon points="65,32 84,37 65,43" fill="#ea580c" />
          <circle cx="58" cy="29" r="4.5" fill="#0f172a" />
          <circle cx="60" cy="27" r="1.6" fill="#ffffff" />
          <ellipse cx="35" cy="64" rx="14" ry="10" fill="#eab308" />
          <line x1="40" y1="83" x2="40" y2="90" stroke="#ea580c" stroke-width="4" stroke-linecap="round" />
          <line x1="52" y1="83" x2="52" y2="90" stroke="#ea580c" stroke-width="4" stroke-linecap="round" />
        </svg>
        <span class="size-tag">Large</span>
      </div>

      
      <div class="animal-card" onclick="playSound(440)">
        <svg class="duck-svg" width="68" height="68" viewBox="0 0 70 70">
          <ellipse cx="34" cy="46" rx="20" ry="17" fill="#4ade80" />
          <circle cx="38" cy="24" r="14" fill="#4ade80" />
          <polygon points="48,24 62,28 48,32" fill="#f97316" />
          <circle cx="42" cy="22" r="3.5" fill="#0f172a" />
          <circle cx="43.5" cy="20.5" r="1.2" fill="#ffffff" />
          <ellipse cx="26" cy="47" rx="10" ry="7" fill="#22c55e" />
          <line x1="30" y1="62" x2="30" y2="67" stroke="#f97316" stroke-width="3" stroke-linecap="round" />
          <line x1="38" y1="62" x2="38" y2="67" stroke="#f97316" stroke-width="3" stroke-linecap="round" />
        </svg>
        <span class="size-tag">Medium</span>
      </div>

      
      <div class="animal-card" onclick="playSound(587)">
        <svg class="duck-svg" width="46" height="46" viewBox="0 0 50 50">
          <ellipse cx="25" cy="33" rx="14" ry="12" fill="#38bdf8" />
          <circle cx="27" cy="18" r="10" fill="#38bdf8" />
          <polygon points="34,18 43,21 34,24" fill="#f97316" />
          <circle cx="30" cy="16" r="2.5" fill="#0f172a" />
          <circle cx="31" cy="15" r="0.8" fill="#ffffff" />
          <ellipse cx="20" cy="34" rx="7" ry="5" fill="#0284c7" />
          <line x1="22" y1="44" x2="22" y2="48" stroke="#f97316" stroke-width="2.5" stroke-linecap="round" />
          <line x1="28" y1="44" x2="28" y2="48" stroke="#f97316" stroke-width="2.5" stroke-linecap="round" />
        </svg>
        <span class="size-tag">Small</span>
      </div>
    </div>
  </div>

  <script>
    let audioCtx = null;
    function playSound(freq) {
      try {
        if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        if (audioCtx.state === 'suspended') audioCtx.resume();
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = 'triangle';
        osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
        gain.gain.setValueAtTime(0.2, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.35);
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start();
        osc.stop(audioCtx.currentTime + 0.35);
      } catch(e) {}
    }
  </script>
</body>
</html>

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

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

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

    .comparison-grid {
      display: flex;
      flex-direction: row;
      gap: 12px;
      width: 100%;
    }

    .panel {
      flex: 1;
      min-width: 0;
      background: #f8fafc;
      border: 2px solid #cbd5e1;
      border-radius: 14px;
      padding: 10px 8px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .panel.unfair {
      border-color: #fca5a5;
      background: #fff5f5;
    }

    .panel.fair {
      border-color: #86efac;
      background: #f0fdf4;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      font-size: 13px;
      font-weight: 800;
      padding: 5px 12px;
      border-radius: 16px;
      margin-bottom: 8px;
      text-align: center;
      white-space: nowrap;
    }

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

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

    .stage {
      position: relative;
      width: 100%;
      height: 175px;
      display: flex;
      align-items: flex-end;
      justify-content: space-around;
      padding: 0 4px;
      overflow: hidden;
      border-radius: 8px;
    }

    /* Blocks & Columns */
    .block-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 2;
    }

    .block {
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 13px;
      color: #ffffff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.15);
    }

    .block-s {
      width: 38px;
      height: 44px;
      background: linear-gradient(180deg, #38bdf8, #0284c7);
    }

    .block-m {
      width: 44px;
      height: 74px;
      background: linear-gradient(180deg, #fb923c, #ea580c);
    }

    .block-l {
      width: 50px;
      height: 104px;
      background: linear-gradient(180deg, #a855f7, #7e22ce);
    }

    .block-label {
      font-size: 11px;
      font-weight: 800;
      color: #1e293b;
      margin-top: 3px;
      background: rgba(255, 255, 255, 0.95);
      padding: 2px 6px;
      border-radius: 4px;
      letter-spacing: 0.3px;
      border: 1px solid rgba(203, 213, 225, 0.7);
      white-space: nowrap;
    }

    /* Unfair ground offsets */
    .unfair-ground {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 80px;
      z-index: 1;
      pointer-events: none;
    }

    .col-unfair-1 { margin-bottom: 54px; } /* Small raised high */
    .col-unfair-2 { margin-bottom: 8px; }  /* Medium lowered in pit */
    .col-unfair-3 { margin-bottom: 24px; } /* Large block */

    /* Fair baseline setup: dedicated non-overlapping zones */
    .col-fair {
      margin-bottom: 34px;
    }

    .fair-baseline-container {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 3;
      pointer-events: none;
    }

    .baseline-line {
      width: calc(100% - 16px);
      height: 4px;
      background: #16a34a;
      border-radius: 2px;
      box-shadow: 0 0 8px rgba(22, 163, 74, 0.8), 0 0 16px rgba(34, 197, 94, 0.4);
      margin-bottom: 5px;
    }

    .baseline-text {
      font-size: 11px;
      font-weight: 800;
      color: #15803d;
      background: #dcfce7;
      border: 1.5px solid #86efac;
      padding: 2px 10px;
      border-radius: 10px;
      margin-bottom: 5px;
      letter-spacing: 0.3px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    /* Reference Height Guide Lines */
    .guide-line {
      position: absolute;
      left: 0;
      right: 0;
      border-top: 2px dashed rgba(2, 132, 199, 0.75);
      z-index: 4;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }

    .show-guides .guide-line {
      opacity: 1;
    }

    /* Guide Line Annotation */
    .guide-tag {
      position: absolute;
      right: 4px;
      top: -18px;
      font-size: 10px;
      font-weight: 800;
      background: #0284c7;
      color: #ffffff;
      padding: 1px 6px;
      border-radius: 4px;
      white-space: nowrap;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    /* Controls */
    .toggle-btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 20px;
      padding: 7px 16px;
      font-size: 12px;
      font-weight: 700;
      color: #334155;
      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.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
    }

    .toggle-btn:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }

    .toggle-btn.active {
      background: #e0f2fe;
      border-color: #0284c7;
      color: #0369a1;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
    }

    /* Responsive Adaptation for Mobile / Narrow Viewports */
    @media (max-width: 520px) {
      body {
        padding: 6px;
      }

      .comparison-grid {
        flex-direction: column;
        gap: 8px;
      }

      .panel {
        padding: 8px 6px 6px;
      }

      .badge {
        font-size: 12px;
        padding: 3px 10px;
        margin-bottom: 4px;
      }

      .stage {
        height: 145px;
      }

      .block-s {
        width: 32px;
        height: 36px;
      }

      .block-m {
        width: 38px;
        height: 62px;
      }

      .block-l {
        width: 44px;
        height: 88px;
      }

      .col-unfair-1 { margin-bottom: 44px; }
      .col-unfair-2 { margin-bottom: 4px; }
      .col-unfair-3 { margin-bottom: 18px; }
      
      .col-fair { margin-bottom: 30px; }

      .guide-line-unfair { top: 46px !important; }
      .guide-line-fair { top: 32px !important; }
    }
  </style>
</head>
<body>

  <div class="main-container">
    <div class="comparison-grid" id="grid">
      
      <div class="panel unfair">
        <div class="badge badge-red">✕ Not Fair (Uneven Ground)</div>
        
        <div class="stage">
          
          <div class="guide-line guide-line-unfair" style="top: 56px;">
            <span class="guide-tag">Small looks taller!</span>
          </div>

          
          <svg class="unfair-ground" viewBox="0 0 200 80" preserveAspectRatio="none">
            <path d="M 0,80 L 0,28 Q 33,18 66,28 Q 100,74 133,52 Q 166,35 200,48 L 200,80 Z" fill="#fecaca" opacity="0.6"/>
            <path d="M 0,80 L 0,34 Q 33,24 66,34 Q 100,80 133,58 Q 166,41 200,54 L 200,80 Z" fill="#ef4444" opacity="0.45"/>
          </svg>

          <div class="block-col col-unfair-1">
            <div class="block block-s">S</div>
            <span class="block-label">Small</span>
          </div>

          <div class="block-col col-unfair-2">
            <div class="block block-m">M</div>
            <span class="block-label">Medium</span>
          </div>

          <div class="block-col col-unfair-3">
            <div class="block block-l">L</div>
            <span class="block-label">Large</span>
          </div>
        </div>
      </div>

      
      <div class="panel fair">
        <div class="badge badge-green">✓ Fair (Baseline Alignment)</div>

        <div class="stage">
          
          <div class="guide-line guide-line-fair" style="top: 38px;">
            <span class="guide-tag">True Heights</span>
          </div>

          <div class="block-col col-fair">
            <div class="block block-s">S</div>
            <span class="block-label">Small</span>
          </div>

          <div class="block-col col-fair">
            <div class="block block-m">M</div>
            <span class="block-label">Medium</span>
          </div>

          <div class="block-col col-fair">
            <div class="block block-l">L</div>
            <span class="block-label">Large</span>
          </div>

          <div class="fair-baseline-container">
            <div class="baseline-line"></div>
            <div class="baseline-text">Flat Baseline</div>
          </div>
        </div>
      </div>
    </div>

    <button class="toggle-btn" id="guideBtn" onclick="toggleGuides()">
      📏 <span>Show Height Guide Lines</span>
    </button>
  </div>

  <script>
    let guidesOn = false;
    function toggleGuides() {
      guidesOn = !guidesOn;
      const grid = document.getElementById('grid');
      const btn = document.getElementById('guideBtn');
      grid.classList.toggle('show-guides', guidesOn);
      btn.classList.toggle('active', guidesOn);
    }
  </script>
</body>
</html>

OGM.0.MD.2

Aligned learning resources

Related diagrams