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

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

    /* Controls Header */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      max-width: 440px;
      margin-bottom: 6px;
    }

    .btn {
      background: #f1f5f9;
      border: 2px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 16px;
      font-size: 14px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .btn:hover {
      background: #e2e8f0;
      color: #1e293b;
    }

    .btn.active {
      background: #eff6ff;
      border-color: #0284c7;
      color: #0284c7;
    }

    .btn-icon {
      width: 34px;
      height: 34px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: 13px;
    }

    /* Main Stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 460px;
      height: 255px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    /* Rotatable Square */
    .square-group {
      transform-origin: 125px 130px;
      transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Rotation Arrow Indicator */
    .turn-arrow {
      transition: opacity 0.35s ease;
      opacity: 0;
      pointer-events: none;
    }

    .turn-arrow.show {
      opacity: 1;
    }

    /* Magnifier Callout */
    .magnifier-group {
      transition: opacity 0.3s ease;
    }

    /* Bottom Label Banner */
    .label-card {
      width: 100%;
      max-width: 440px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 16px;
      text-align: center;
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 4px;
    }

    .tag-highlight {
      color: #e11d48;
    }

    @media (max-width: 380px) {
      .label-card {
        font-size: 13.5px;
        padding: 8px 12px;
      }
      .btn {
        padding: 5px 12px;
        font-size: 13px;
      }
      .stage {
        height: 230px;
      }
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button id="btnFlat" class="btn active" onclick="setStep(0)">Flat</button>
    <button id="btnTilted" class="btn" onclick="setStep(1)">Tilted (45°)</button>
    <button id="btnPlay" class="btn btn-icon" title="Auto Play/Pause" onclick="togglePlay()">⏸</button>
  </div>

  
  <div class="stage">
    <svg viewBox="0 0 410 240">
      <defs>
        
        <marker id="arrowHead" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
          <path d="M 1 1 L 7 4 L 1 7 Z" fill="#0284c7" />
        </marker>
        
        <clipPath id="lensClip">
          <circle cx="315" cy="95" r="35" />
        </clipPath>
      </defs>

      
      <line x1="20" y1="202" x2="390" y2="202" stroke="#cbd5e1" stroke-width="2.5" stroke-dasharray="6 5" stroke-linecap="round" />

      
      <g id="turnIndicator" class="turn-arrow">
        <path d="M 125 46 A 74 74 0 0 1 178 74" fill="none" stroke="#0284c7" stroke-width="2.5" stroke-dasharray="4 4" marker-end="url(#arrowHead)" />
        <rect x="92" y="24" width="66" height="20" rx="6" fill="#f0f9ff" stroke="#bae6fd" stroke-width="1" />
        <text x="125" y="38" text-anchor="middle" font-size="11.5" font-weight="700" fill="#0284c7">Turn 45°</text>
      </g>

      
      <g id="squareGroup" class="square-group">
        
        <rect x="75" y="80" width="100" height="100" rx="3" fill="#fb7185" fill-opacity="0.22" stroke="#e11d48" stroke-width="3.5" />

        
        <path d="M 75 92 L 87 92 L 87 80" fill="none" stroke="#e11d48" stroke-width="2" />
        <path d="M 163 80 L 163 92 L 175 92" fill="none" stroke="#e11d48" stroke-width="2" />
        <path d="M 175 168 L 163 168 L 163 180" fill="none" stroke="#e11d48" stroke-width="2" />
        <path d="M 87 180 L 87 168 L 75 168" fill="none" stroke="#e11d48" stroke-width="2" />

        
        
        <line x1="125" y1="74" x2="125" y2="86" stroke="#e11d48" stroke-width="2.5" stroke-linecap="round" />
        
        <line x1="125" y1="174" x2="125" y2="186" stroke="#e11d48" stroke-width="2.5" stroke-linecap="round" />
        
        <line x1="69" y1="130" x2="81" y2="130" stroke="#e11d48" stroke-width="2.5" stroke-linecap="round" />
        
        <line x1="169" y1="130" x2="181" y2="130" stroke="#e11d48" stroke-width="2.5" stroke-linecap="round" />
      </g>

      
      <g id="magnifier" class="magnifier-group">
        
        <line id="calloutLine" x1="178" y1="120" x2="276" y2="95" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3" />
        
        
        <line x1="340" y1="120" x2="368" y2="148" stroke="#475569" stroke-width="6" stroke-linecap="round" />
        
        
        <circle cx="315" cy="95" r="37" fill="#ffffff" stroke="#0284c7" stroke-width="3" />

        
        <g clip-path="url(#lensClip)">
          
          <path d="M 293 130 L 293 80 L 343 80" fill="none" stroke="#e11d48" stroke-width="4.5" stroke-linecap="round" />
          
          <path d="M 293 98 L 311 98 L 311 80" fill="none" stroke="#e11d48" stroke-width="2" />
          
          <line x1="327" y1="73" x2="327" y2="87" stroke="#e11d48" stroke-width="3" stroke-linecap="round" />
          <line x1="286" y1="114" x2="300" y2="114" stroke="#e11d48" stroke-width="3" stroke-linecap="round" />
          
          <text x="318" y="112" font-size="12" font-weight="800" fill="#0284c7">90°</text>
        </g>

        
        <text x="315" y="152" text-anchor="middle" font-size="12" font-weight="700" fill="#1e293b">Equal sides &amp; corners</text>
        <text x="315" y="168" text-anchor="middle" font-size="11" font-weight="600" fill="#0284c7">Still a square!</text>
      </g>
    </svg>
  </div>

  
  <div id="labelCard" class="label-card">
    <span>Flat square = <span class="tag-highlight">4 equal sides</span></span>
  </div>

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

    const square = document.getElementById('squareGroup');
    const turnIndicator = document.getElementById('turnIndicator');
    const calloutLine = document.getElementById('calloutLine');
    const btnFlat = document.getElementById('btnFlat');
    const btnTilted = document.getElementById('btnTilted');
    const btnPlay = document.getElementById('btnPlay');
    const labelCard = document.getElementById('labelCard');

    function setStep(step) {
      currentStep = step;
      if (step === 0) {
        square.style.transform = 'rotate(0deg)';
        turnIndicator.classList.remove('show');
        calloutLine.setAttribute('x1', '178');
        calloutLine.setAttribute('y1', '120');
        btnFlat.classList.add('active');
        btnTilted.classList.remove('active');
        labelCard.innerHTML = '<span>Flat square = <span class="tag-highlight">4 equal sides</span></span>';
      } else {
        square.style.transform = 'rotate(45deg)';
        turnIndicator.classList.add('show');
        calloutLine.setAttribute('x1', '198');
        calloutLine.setAttribute('y1', '130');
        btnFlat.classList.remove('active');
        btnTilted.classList.add('active');
        labelCard.innerHTML = '<span>Tilted square = <span class="tag-highlight">still 4 equal sides!</span></span>';
      }
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      btnPlay.textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        startLoop();
      } else {
        clearInterval(timer);
      }
    }

    function startLoop() {
      clearInterval(timer);
      timer = setInterval(() => {
        setStep(currentStep === 0 ? 1 : 0);
      }, 3200);
    }

    // Initialize auto loop
    startLoop();
  </script>
</body>
</html>

Naming Shapes No Matter How They're Turned

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 600px;
    }
    @media (max-width: 440px) {
      .grid {
        grid-template-columns: 1fr;
      }
      body {
        padding: 8px;
      }
    }
    .panel-card {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .panel-card.orange {
      background: #fffaf5;
      border-color: #ffedd5;
    }
    .panel-card.purple {
      background: #faf5ff;
      border-color: #f3e8ff;
    }
    .title {
      font-size: 16px;
      font-weight: 800;
      margin-bottom: 2px;
    }
    .title.orange { color: #c2410c; }
    .title.purple { color: #6b21a8; }
    .subtitle {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      margin-bottom: 12px;
    }
    .shapes-row {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      width: 100%;
      height: 110px;
      margin-bottom: 10px;
    }
    .shape-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 90px;
      height: 90px;
    }
    .shape-svg {
      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.08));
    }
    .turn-btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      user-select: none;
    }
    .turn-btn:active {
      transform: translateY(1px);
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="panel-card orange">
      <div class="title orange">Rectangle</div>
      <div class="subtitle">4 sides (2 long, 2 short)</div>
      
      <div class="shapes-row">
        
        <div class="shape-box">
          <svg class="shape-svg rect-shape" width="86" height="86" viewBox="0 0 86 86">
            <rect x="7" y="27" width="72" height="32" rx="6" fill="#fb923c" stroke="#ea580c" stroke-width="3"/>
          </svg>
        </div>
        
        <div class="shape-box">
          <svg class="shape-svg rect-shape" width="86" height="86" viewBox="0 0 86 86">
            <rect x="27" y="7" width="32" height="72" rx="6" fill="#fb923c" stroke="#ea580c" stroke-width="3"/>
          </svg>
        </div>
      </div>

      <button class="turn-btn" id="turnRectBtn">Turn ↻</button>
    </div>

    
    <div class="panel-card purple">
      <div class="title purple">Hexagon</div>
      <div class="subtitle">Always 6 sides</div>
      
      <div class="shapes-row">
        
        <div class="shape-box">
          <svg class="shape-svg hex-shape" width="86" height="86" viewBox="0 0 86 86">
            <polygon points="76,43 59.5,71.6 26.5,71.6 10,43 26.5,14.4 59.5,14.4" fill="#c084fc" stroke="#7e22ce" stroke-width="3" stroke-linejoin="round"/>
          </svg>
        </div>
        
        <div class="shape-box">
          <svg class="shape-svg hex-shape" width="86" height="86" viewBox="0 0 86 86">
            <polygon points="43,76 14.4,59.5 14.4,26.5 43,10 71.6,26.5 71.6,59.5" fill="#c084fc" stroke="#7e22ce" stroke-width="3" stroke-linejoin="round"/>
          </svg>
        </div>
      </div>

      <button class="turn-btn" id="turnHexBtn">Turn ↻</button>
    </div>
  </div>

  <script>
    let rectAngle = 0;
    let hexAngle = 0;

    const rectShapes = document.querySelectorAll('.rect-shape');
    const hexShapes = document.querySelectorAll('.hex-shape');

    document.getElementById('turnRectBtn').addEventListener('click', () => {
      rectAngle += 90;
      rectShapes.forEach(el => {
        el.style.transform = `rotate(${rectAngle}deg)`;
      });
    });

    document.getElementById('turnHexBtn').addEventListener('click', () => {
      hexAngle += 30;
      hexShapes.forEach(el => {
        el.style.transform = `rotate(${hexAngle}deg)`;
      });
    });
  </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;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      width: 100%;
      min-height: 100%;
      background: transparent;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px 8px;
      gap: 12px;
    }

    /* Top Pill Badge */
    .top-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #e0f2fe;
      border: 1.5px solid #bae6fd;
      border-radius: 999px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 700;
      color: #0369a1;
      text-align: center;
    }

    /* Main Row */
    .sequence-row {
      width: 100%;
      max-width: 640px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      position: relative;
    }

    /* Triangle Card Tile */
    .stage-tile {
      flex: 1;
      max-width: 175px;
      min-width: 100px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 10px 6px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 3px 8px rgba(0,0,0,0.04);
      transition: border-color 0.25s ease, transform 0.25s ease;
      cursor: pointer;
    }
    .stage-tile:hover {
      border-color: #38bdf8;
      transform: translateY(-2px);
    }
    .stage-tile.active {
      border-color: #0284c7;
      box-shadow: 0 0 0 3px rgba(56,189,248,0.3);
    }

    .svg-container {
      width: 100%;
      height: 110px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .svg-container svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Labels below triangle */
    .label-box {
      margin-top: 6px;
      text-align: center;
    }
    .orientation-name {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
    }
    .subtitle-badge {
      display: inline-block;
      margin-top: 3px;
      font-size: 11px;
      font-weight: 800;
      color: #0369a1;
      background: #f0f9ff;
      border-radius: 6px;
      padding: 2px 6px;
      border: 1px solid #bae6fd;
    }

    /* Turn Connector Arrows */
    .turn-arrow {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 28px;
      flex-shrink: 0;
      color: #0284c7;
    }
    .turn-arrow svg {
      width: 24px;
      height: 24px;
      animation: spinPulse 2.8s ease-in-out infinite;
    }
    .turn-arrow span {
      font-size: 10px;
      font-weight: 700;
      color: #0284c7;
      margin-top: 2px;
    }

    @keyframes spinPulse {
      0%, 100% { transform: rotate(0deg) scale(1); }
      50% { transform: rotate(45deg) scale(1.15); }
    }

    /* Bottom Summary Ribbon */
    .summary-ribbon {
      width: 100%;
      max-width: 640px;
      background: #f0fdf4;
      border: 2px dashed #86efac;
      border-radius: 12px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      color: #166534;
    }

    .legend-row {
      display: flex;
      gap: 14px;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .legend-dot {
      width: 14px;
      height: 14px;
      background: #f97316;
      border-radius: 50%;
      color: #fff;
      font-size: 9px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .legend-tag {
      padding: 1px 6px;
      background: #22c55e;
      color: #fff;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 800;
    }

    @media (max-width: 420px) {
      .sequence-row {
        gap: 3px;
      }
      .stage-tile {
        padding: 6px 3px 6px;
      }
      .svg-container {
        height: 90px;
      }
      .orientation-name {
        font-size: 11px;
      }
      .subtitle-badge {
        font-size: 10px;
        padding: 1px 4px;
      }
      .turn-arrow {
        width: 18px;
      }
      .turn-arrow svg {
        width: 18px;
        height: 18px;
      }
      .top-badge {
        font-size: 12px;
        padding: 5px 10px;
      }
      .summary-ribbon {
        font-size: 11px;
      }
    }
  </style>
</head>
<body>

  
  <div class="top-badge">
    <span>⭐</span>
    <span>Turn it or spin it — it's still a triangle!</span>
  </div>

  
  <div class="legend-row">
    <div class="legend-item">
      <span class="legend-dot">●</span>
      <span>3 Corners</span>
    </div>
    <div class="legend-item">
      <span class="legend-tag">Side</span>
      <span>3 Straight Sides</span>
    </div>
  </div>

  
  <div class="sequence-row">
    
    
    <div class="stage-tile" onclick="highlightStage(0)">
      <div class="svg-container">
        <svg viewBox="0 0 140 120">
          <g transform="rotate(0, 70, 60)">
            
            
            <polygon points="70,20 118,98 22,98" fill="#38bdf8" stroke="#0284c7" stroke-width="4" stroke-linejoin="round" />
            
            
            
            <circle cx="60" cy="62" r="3.2" fill="#0f172a" />
            
            <circle cx="80" cy="62" r="3.2" fill="#0f172a" />
            
            <path d="M 61 71 Q 70 78 79 71" fill="none" stroke="#0f172a" stroke-width="2.5" stroke-linecap="round" />
            
            <circle cx="54" cy="68" r="2.5" fill="#fb7185" opacity="0.8" />
            <circle cx="86" cy="68" r="2.5" fill="#fb7185" opacity="0.8" />

            
            <g transform="translate(100, 52) rotate(60)">
              <rect x="-14" y="-7" width="28" height="14" rx="4" fill="#22c55e" />
              <text x="0" y="3.5" font-size="9" font-weight="800" fill="#fff" text-anchor="middle">side</text>
            </g>
            <g transform="translate(40, 52) rotate(-60)">
              <rect x="-14" y="-7" width="28" height="14" rx="4" fill="#22c55e" />
              <text x="0" y="3.5" font-size="9" font-weight="800" fill="#fff" text-anchor="middle">side</text>
            </g>
            <g transform="translate(70, 108)">
              <rect x="-14" y="-7" width="28" height="14" rx="4" fill="#22c55e" />
              <text x="0" y="3.5" font-size="9" font-weight="800" fill="#fff" text-anchor="middle">side</text>
            </g>

            
            <g transform="translate(70, 18)">
              <circle cx="0" cy="0" r="9.5" fill="#f97316" stroke="#fff" stroke-width="2" />
              <text x="0" y="3.5" font-size="10" font-weight="800" fill="#fff" text-anchor="middle">1</text>
            </g>
            <g transform="translate(118, 98)">
              <circle cx="0" cy="0" r="9.5" fill="#f97316" stroke="#fff" stroke-width="2" />
              <text x="0" y="3.5" font-size="10" font-weight="800" fill="#fff" text-anchor="middle">2</text>
            </g>
            <g transform="translate(22, 98)">
              <circle cx="0" cy="0" r="9.5" fill="#f97316" stroke="#fff" stroke-width="2" />
              <text x="0" y="3.5" font-size="10" font-weight="800" fill="#fff" text-anchor="middle">3</text>
            </g>
          </g>
        </svg>
      </div>
      <div class="label-box">
        <div class="orientation-name">Pointing Up</div>
        <div class="subtitle-badge">3 sides • 3 corners</div>
      </div>
    </div>

    
    <div class="turn-arrow">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
        <path d="M21.5 2v6h-6M21.34 15.57a9 9 0 1 1-.57-8.38l5.67-1.19" stroke-dasharray="2 2" />
      </svg>
      <span>spin</span>
    </div>

    
    <div class="stage-tile" onclick="highlightStage(1)">
      <div class="svg-container">
        <svg viewBox="0 0 140 120">
          <g transform="rotate(75, 70, 60)">
            <polygon points="70,20 118,98 22,98" fill="#38bdf8" stroke="#0284c7" stroke-width="4" stroke-linejoin="round" />
            
            
            <circle cx="60" cy="62" r="3.2" fill="#0f172a" />
            <circle cx="80" cy="62" r="3.2" fill="#0f172a" />
            <path d="M 61 71 Q 70 78 79 71" fill="none" stroke="#0f172a" stroke-width="2.5" stroke-linecap="round" />
            <circle cx="54" cy="68" r="2.5" fill="#fb7185" opacity="0.8" />
            <circle cx="86" cy="68" r="2.5" fill="#fb7185" opacity="0.8" />

            
            <g transform="translate(100, 52) rotate(60)">
              <rect x="-14" y="-7" width="28" height="14" rx="4" fill="#22c55e" />
              <text x="0" y="3.5" font-size="9" font-weight="800" fill="#fff" text-anchor="middle">side</text>
            </g>
            <g transform="translate(40, 52) rotate(-60)">
              <rect x="-14" y="-7" width="28" height="14" rx="4" fill="#22c55e" />
              <text x="0" y="3.5" font-size="9" font-weight="800" fill="#fff" text-anchor="middle">side</text>
            </g>
            <g transform="translate(70, 108)">
              <rect x="-14" y="-7" width="28" height="14" rx="4" fill="#22c55e" />
              <text x="0" y="3.5" font-size="9" font-weight="800" fill="#fff" text-anchor="middle">side</text>
            </g>

            
            <g transform="translate(70, 18)">
              <circle cx="0" cy="0" r="9.5" fill="#f97316" stroke="#fff" stroke-width="2" />
              <text x="0" y="3.5" font-size="10" font-weight="800" fill="#fff" text-anchor="middle" transform="rotate(-75)">1</text>
            </g>
            <g transform="translate(118, 98)">
              <circle cx="0" cy="0" r="9.5" fill="#f97316" stroke="#fff" stroke-width="2" />
              <text x="0" y="3.5" font-size="10" font-weight="800" fill="#fff" text-anchor="middle" transform="rotate(-75)">2</text>
            </g>
            <g transform="translate(22, 98)">
              <circle cx="0" cy="0" r="9.5" fill="#f97316" stroke="#fff" stroke-width="2" />
              <text x="0" y="3.5" font-size="10" font-weight="800" fill="#fff" text-anchor="middle" transform="rotate(-75)">3</text>
            </g>
          </g>
        </svg>
      </div>
      <div class="label-box">
        <div class="orientation-name">Tilted Sideways</div>
        <div class="subtitle-badge">3 sides • 3 corners</div>
      </div>
    </div>

    
    <div class="turn-arrow">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
        <path d="M21.5 2v6h-6M21.34 15.57a9 9 0 1 1-.57-8.38l5.67-1.19" stroke-dasharray="2 2" />
      </svg>
      <span>spin</span>
    </div>

    
    <div class="stage-tile" onclick="highlightStage(2)">
      <div class="svg-container">
        <svg viewBox="0 0 140 120">
          <g transform="rotate(180, 70, 60)">
            <polygon points="70,20 118,98 22,98" fill="#38bdf8" stroke="#0284c7" stroke-width="4" stroke-linejoin="round" />
            
            
            <circle cx="60" cy="62" r="3.2" fill="#0f172a" />
            <circle cx="80" cy="62" r="3.2" fill="#0f172a" />
            <path d="M 61 71 Q 70 78 79 71" fill="none" stroke="#0f172a" stroke-width="2.5" stroke-linecap="round" />
            <circle cx="54" cy="68" r="2.5" fill="#fb7185" opacity="0.8" />
            <circle cx="86" cy="68" r="2.5" fill="#fb7185" opacity="0.8" />

            
            <g transform="translate(100, 52) rotate(60)">
              <rect x="-14" y="-7" width="28" height="14" rx="4" fill="#22c55e" />
              <text x="0" y="3.5" font-size="9" font-weight="800" fill="#fff" text-anchor="middle">side</text>
            </g>
            <g transform="translate(40, 52) rotate(-60)">
              <rect x="-14" y="-7" width="28" height="14" rx="4" fill="#22c55e" />
              <text x="0" y="3.5" font-size="9" font-weight="800" fill="#fff" text-anchor="middle">side</text>
            </g>
            <g transform="translate(70, 108)">
              <rect x="-14" y="-7" width="28" height="14" rx="4" fill="#22c55e" />
              <text x="0" y="3.5" font-size="9" font-weight="800" fill="#fff" text-anchor="middle">side</text>
            </g>

            
            <g transform="translate(70, 18)">
              <circle cx="0" cy="0" r="9.5" fill="#f97316" stroke="#fff" stroke-width="2" />
              <text x="0" y="3.5" font-size="10" font-weight="800" fill="#fff" text-anchor="middle" transform="rotate(-180)">1</text>
            </g>
            <g transform="translate(118, 98)">
              <circle cx="0" cy="0" r="9.5" fill="#f97316" stroke="#fff" stroke-width="2" />
              <text x="0" y="3.5" font-size="10" font-weight="800" fill="#fff" text-anchor="middle" transform="rotate(-180)">2</text>
            </g>
            <g transform="translate(22, 98)">
              <circle cx="0" cy="0" r="9.5" fill="#f97316" stroke="#fff" stroke-width="2" />
              <text x="0" y="3.5" font-size="10" font-weight="800" fill="#fff" text-anchor="middle" transform="rotate(-180)">3</text>
            </g>
          </g>
        </svg>
      </div>
      <div class="label-box">
        <div class="orientation-name">Pointing Down</div>
        <div class="subtitle-badge">3 sides • 3 corners</div>
      </div>
    </div>

  </div>

  
  <div class="summary-ribbon">
    <span>✨</span>
    <span>No matter which way it faces, it always has <strong>3 sides</strong> and <strong>3 corners</strong>!</span>
  </div>

  <script>
    function highlightStage(index) {
      const tiles = document.querySelectorAll('.stage-tile');
      tiles.forEach((t, i) => {
        if (i === index) {
          t.classList.add('active');
        } else {
          t.classList.remove('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="1:1">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      gap: 12px;
    }

    .cards-row {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 10px;
      width: 100%;
      max-width: 520px;
    }

    .shape-card {
      flex: 1;
      min-width: 0;
      background: #f0fdfa;
      border: 2px solid #ccfbf1;
      border-radius: 16px;
      padding: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      box-shadow: 0 4px 12px rgba(6, 182, 212, 0.08);
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .shape-card.highlight {
      border-color: #06b6d4;
      box-shadow: 0 6px 16px rgba(6, 182, 212, 0.2);
    }

    svg {
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
      display: block;
      overflow: visible;
    }

    .triangle-path {
      fill: #fef08a;
      stroke: #0891b2;
      stroke-width: 6;
      stroke-linejoin: round;
      stroke-linecap: round;
      transition: fill 0.3s ease, stroke 0.3s ease;
    }

    /* Badges & Dots */
    .badge-bg {
      fill: #06b6d4;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .badge-txt {
      fill: #ffffff;
      font-size: 13px;
      font-weight: 800;
      text-anchor: middle;
      dominant-baseline: central;
      user-select: none;
    }

    .corner-dot {
      fill: #f59e0b;
      stroke: #ffffff;
      stroke-width: 2.5;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .side-el, .corner-el {
      opacity: 0;
      transform-origin: center;
      transition: opacity 0.3s ease;
    }

    .visible {
      opacity: 1;
    }

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

    .step-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      user-select: none;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    .step-btn.active {
      background: #0891b2;
      border-color: #0891b2;
      color: #ffffff;
    }

    .play-btn {
      background: #fef08a;
      border: 1px solid #facc15;
      color: #854d0e;
      border-radius: 20px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      user-select: none;
    }

    /* Bottom banner */
    .banner {
      width: 100%;
      max-width: 520px;
      background: #ecfeff;
      border: 2px dashed #06b6d4;
      border-radius: 12px;
      padding: 10px;
      text-align: center;
      font-size: 16px;
      font-weight: 800;
      color: #0e7490;
      letter-spacing: 0.2px;
    }
  </style>
</head>
<body>

  
  <div class="cards-row">
    
    <div class="shape-card highlight">
      <svg viewBox="0 0 140 140">
        <polygon class="triangle-path" points="70,22 22,118 118,118" />
        
        <circle id="c1-1" class="corner-dot corner-el" cx="70" cy="22" r="7" />
        <circle id="c1-2" class="corner-dot corner-el" cx="22" cy="118" r="7" />
        <circle id="c1-3" class="corner-dot corner-el" cx="118" cy="118" r="7" />
        
        <g id="s1-1" class="side-el">
          <circle class="badge-bg" cx="42" cy="70" r="10" />
          <text class="badge-txt" x="42" y="70">1</text>
        </g>
        <g id="s1-2" class="side-el">
          <circle class="badge-bg" cx="98" cy="70" r="10" />
          <text class="badge-txt" x="98" y="70">2</text>
        </g>
        <g id="s1-3" class="side-el">
          <circle class="badge-bg" cx="70" cy="122" r="10" />
          <text class="badge-txt" x="70" y="122">3</text>
        </g>
      </svg>
    </div>

    
    <div class="shape-card highlight">
      <svg viewBox="0 0 140 140">
        <polygon class="triangle-path" points="22,22 118,22 70,118" />
        
        <circle id="c2-1" class="corner-dot corner-el" cx="22" cy="22" r="7" />
        <circle id="c2-2" class="corner-dot corner-el" cx="118" cy="22" r="7" />
        <circle id="c2-3" class="corner-dot corner-el" cx="70" cy="118" r="7" />
        
        <g id="s2-1" class="side-el">
          <circle class="badge-bg" cx="70" cy="18" r="10" />
          <text class="badge-txt" x="70" y="18">1</text>
        </g>
        <g id="s2-2" class="side-el">
          <circle class="badge-bg" cx="98" cy="70" r="10" />
          <text class="badge-txt" x="98" y="70">2</text>
        </g>
        <g id="s2-3" class="side-el">
          <circle class="badge-bg" cx="42" cy="70" r="10" />
          <text class="badge-txt" x="42" y="70">3</text>
        </g>
      </svg>
    </div>

    
    <div class="shape-card highlight">
      <svg viewBox="0 0 140 140">
        <polygon class="triangle-path" points="118,32 108,122 22,82" />
        
        <circle id="c3-1" class="corner-dot corner-el" cx="118" cy="32" r="7" />
        <circle id="c3-2" class="corner-dot corner-el" cx="108" cy="122" r="7" />
        <circle id="c3-3" class="corner-dot corner-el" cx="22" cy="82" r="7" />
        
        <g id="s3-1" class="side-el">
          <circle class="badge-bg" cx="116" cy="77" r="10" />
          <text class="badge-txt" x="116" y="77">1</text>
        </g>
        <g id="s3-2" class="side-el">
          <circle class="badge-bg" cx="64" cy="106" r="10" />
          <text class="badge-txt" x="64" y="106">2</text>
        </g>
        <g id="s3-3" class="side-el">
          <circle class="badge-bg" cx="68" cy="53" r="10" />
          <text class="badge-txt" x="68" y="53">3</text>
        </g>
      </svg>
    </div>
  </div>

  
  <div class="controls">
    <button class="step-btn" id="btn-0" onclick="goToStep(0)">1. Side 1</button>
    <button class="step-btn" id="btn-1" onclick="goToStep(1)">2. Side 2</button>
    <button class="step-btn" id="btn-2" onclick="goToStep(2)">3. Side 3</button>
    <button class="step-btn" id="btn-3" onclick="goToStep(3)">4. 3 Corners</button>
    <button class="play-btn" id="play-toggle" onclick="toggleAutoPlay()">⏸ Pause</button>
  </div>

  
  <div class="banner">
    All 3 are triangles!
  </div>

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

    const side1 = [document.getElementById('s1-1'), document.getElementById('s2-1'), document.getElementById('s3-1')];
    const side2 = [document.getElementById('s1-2'), document.getElementById('s2-2'), document.getElementById('s3-2')];
    const side3 = [document.getElementById('s1-3'), document.getElementById('s2-3'), document.getElementById('s3-3')];
    const corners = Array.from(document.querySelectorAll('.corner-el'));

    function renderStep(step) {
      currentStep = step;

      // Update button highlights
      for (let i = 0; i < 4; i++) {
        const btn = document.getElementById('btn-' + i);
        if (btn) {
          if (i === step) {
            btn.classList.add('active');
          } else {
            btn.classList.remove('active');
          }
        }
      }

      // Reset all
      side1.forEach(el => el.classList.remove('visible'));
      side2.forEach(el => el.classList.remove('visible'));
      side3.forEach(el => el.classList.remove('visible'));
      corners.forEach(el => el.classList.remove('visible'));

      // Apply based on step
      if (step >= 0) {
        side1.forEach(el => el.classList.add('visible'));
      }
      if (step >= 1) {
        side2.forEach(el => el.classList.add('visible'));
      }
      if (step >= 2) {
        side3.forEach(el => el.classList.add('visible'));
      }
      if (step >= 3) {
        corners.forEach(el => el.classList.add('visible'));
      }
    }

    function goToStep(step) {
      renderStep(step);
    }

    function nextStep() {
      const next = (currentStep + 1) % 4;
      renderStep(next);
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 2400);
    }

    function toggleAutoPlay() {
      isPlaying = !isPlaying;
      const toggleBtn = document.getElementById('play-toggle');
      if (isPlaying) {
        toggleBtn.textContent = '⏸ Pause';
        startTimer();
      } else {
        toggleBtn.textContent = '▶ Play';
        clearInterval(timer);
      }
    }

    // Initialize
    renderStep(0);
    startTimer();
  </script>
</body>
</html>

K.G.A.2

Aligned learning resources