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

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

    .header {
      text-align: center;
      margin-bottom: 8px;
    }

    .header h1 {
      font-size: 17px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.01em;
    }

    .btn-bar {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      margin-bottom: 10px;
    }

    .filter-btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      padding: 5px 11px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      transition: all 0.25s ease;
    }

    .filter-btn.active {
      background: #0891b2;
      border-color: #0891b2;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(8, 145, 178, 0.35);
    }

    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 680px;
    }

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

    .prism-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px;
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .prism-title {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .svg-wrap {
      width: 100%;
      max-width: 220px;
      height: 145px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

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

    /* SVG Base Styles & Transitions */
    .face-base {
      fill: rgba(6, 182, 212, 0.45);
      stroke: #0891b2;
      stroke-width: 1.8;
      stroke-linejoin: round;
      transition: all 0.3s ease;
    }

    .face-lat {
      fill: rgba(226, 232, 240, 0.55);
      stroke: #94a3b8;
      stroke-width: 1.2;
      stroke-linejoin: round;
      transition: all 0.3s ease;
    }

    .edge-solid {
      stroke: #475569;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: all 0.3s ease;
    }

    .edge-dash {
      stroke: #94a3b8;
      stroke-width: 1.4;
      stroke-dasharray: 4, 3;
      stroke-linecap: round;
      transition: all 0.3s ease;
    }

    .vertex {
      fill: #0e7490;
      stroke: #ffffff;
      stroke-width: 1.5;
      r: 3.5;
      transition: all 0.3s ease;
    }

    .callout-line {
      stroke: #0891b2;
      stroke-width: 1.2;
      stroke-dasharray: 2, 2;
    }

    .callout-text {
      font-size: 10.5px;
      font-weight: 700;
      fill: #0e7490;
    }

    /* Interactive Filter Highlights */
    .state-bases .face-base {
      fill: rgba(6, 182, 212, 0.85);
      stroke: #0284c7;
      stroke-width: 2.6;
      filter: drop-shadow(0 0 5px rgba(6, 182, 212, 0.55));
    }
    .state-bases .face-lat {
      fill: rgba(241, 245, 249, 0.2);
      stroke: rgba(148, 163, 184, 0.3);
    }
    .state-bases .edge-solid,
    .state-bases .edge-dash {
      opacity: 0.35;
    }
    .state-bases .vertex {
      opacity: 0.25;
    }

    .state-lateral .face-lat {
      fill: rgba(245, 158, 11, 0.65);
      stroke: #d97706;
      stroke-width: 2.2;
      filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.45));
    }
    .state-lateral .face-base {
      fill: rgba(6, 182, 212, 0.15);
      stroke: rgba(8, 145, 178, 0.3);
    }
    .state-lateral .edge-solid,
    .state-lateral .edge-dash {
      opacity: 0.4;
    }
    .state-lateral .vertex {
      opacity: 0.25;
    }

    .state-vertices .vertex {
      fill: #f43f5e;
      stroke: #ffffff;
      stroke-width: 2;
      r: 5.5;
      animation: pulse 1.2s infinite ease-in-out;
    }
    .state-vertices .face-base {
      fill: rgba(6, 182, 212, 0.12);
      stroke: rgba(8, 145, 178, 0.25);
    }
    .state-vertices .face-lat {
      fill: rgba(226, 232, 240, 0.2);
      stroke: rgba(148, 163, 184, 0.25);
    }
    .state-vertices .edge-solid,
    .state-vertices .edge-dash {
      opacity: 0.35;
    }

    .state-edges .edge-solid {
      stroke: #2563eb;
      stroke-width: 2.8;
    }
    .state-edges .edge-dash {
      stroke: #3b82f6;
      stroke-width: 2.4;
      stroke-dasharray: 4, 3;
    }
    .state-edges .face-base {
      fill: rgba(6, 182, 212, 0.1);
      stroke: #2563eb;
      stroke-width: 2.8;
    }
    .state-edges .face-lat {
      fill: rgba(226, 232, 240, 0.15);
      stroke: #2563eb;
      stroke-width: 2.8;
    }
    .state-edges .vertex {
      opacity: 0.3;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.25); }
    }

    /* Data Table / Badges */
    .data-box {
      width: 100%;
      margin-top: 6px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 11.5px;
    }

    .info-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 3px 8px;
      border-radius: 6px;
      background: #f8fafc;
      border: 1px solid #edf2f7;
      transition: all 0.25s ease;
    }

    .info-label {
      color: #64748b;
      font-weight: 500;
    }

    .info-val {
      font-weight: 700;
      color: #0f172a;
    }

    .stat-pills {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 4px;
      margin-top: 2px;
      text-align: center;
    }

    .pill {
      padding: 4px 2px;
      border-radius: 6px;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      font-size: 11px;
      font-weight: 600;
      color: #334155;
      transition: all 0.25s ease;
    }

    .pill span {
      display: block;
      font-size: 13px;
      font-weight: 800;
      color: #0f172a;
    }

    /* Active Highlight States on Info Rows */
    .state-bases .row-bases {
      background: #e0f2fe;
      border-color: #bae6fd;
      color: #0369a1;
    }
    .state-bases .row-bases .info-val {
      color: #0284c7;
    }

    .state-lateral .row-lateral {
      background: #fef3c7;
      border-color: #fde68a;
      color: #92400e;
    }
    .state-lateral .row-lateral .info-val {
      color: #b45309;
    }

    .state-vertices .pill-vertices {
      background: #ffe4e6;
      border-color: #fecdd3;
      color: #be123c;
    }
    .state-vertices .pill-vertices span {
      color: #e11d48;
    }

    .state-edges .pill-edges {
      background: #dbeafe;
      border-color: #bfdbfe;
      color: #1d4ed8;
    }
    .state-edges .pill-edges span {
      color: #2563eb;
    }
  </style>
</head>
<body>

  <div class="header">
    <h1>Parts of a Prism: Named by Their Bases</h1>
  </div>

  <div class="btn-bar" id="filterBar">
    <button class="filter-btn active" onclick="setMode('overview', this)">Overview</button>
    <button class="filter-btn" onclick="setMode('bases', this)">Bases Only</button>
    <button class="filter-btn" onclick="setMode('lateral', this)">Lateral Faces</button>
    <button class="filter-btn" onclick="setMode('edges', this)">Edges</button>
    <button class="filter-btn" onclick="setMode('vertices', this)">Vertices</button>
  </div>

  <div class="grid-container state-overview" id="diagramRoot">

    
    <div class="prism-card">
      <div class="prism-title">Triangular Prism</div>
      
      <div class="svg-wrap">
        <svg viewBox="0 0 220 150">
          <defs>
            
            <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
              <feGaussianBlur stdDeviation="1.5" result="blur" />
              <feComposite in="SourceGraphic" in2="blur" operator="over" />
            </filter>
          </defs>

          
          <polygon class="face-lat" points="110,24 55,56 55,124 110,92" />
          <polygon class="face-lat" points="110,24 165,56 165,124 110,92" />

          
          <line class="edge-dash" x1="110" y1="24" x2="110" y2="92" />
          <line class="edge-dash" x1="110" y1="92" x2="55" y2="124" />
          <line class="edge-dash" x1="110" y1="92" x2="165" y2="124" />

          
          <polygon class="face-base" points="110,92 55,124 165,124" />

          
          <polygon class="face-lat" points="55,56 165,56 165,124 55,124" />

          
          <polygon class="face-base" points="110,24 55,56 165,56" />

          
          <line class="edge-solid" x1="110" y1="24" x2="55" y2="56" />
          <line class="edge-solid" x1="110" y1="24" x2="165" y2="56" />
          <line class="edge-solid" x1="55" y1="56" x2="165" y2="56" />
          <line class="edge-solid" x1="55" y1="56" x2="55" y2="124" />
          <line class="edge-solid" x1="165" y1="56" x2="165" y2="124" />
          <line class="edge-solid" x1="55" y1="124" x2="165" y2="124" />

          
          <g>
            <circle class="vertex" cx="110" cy="24" />
            <circle class="vertex" cx="55" cy="56" />
            <circle class="vertex" cx="165" cy="56" />
            <circle class="vertex" cx="110" cy="92" />
            <circle class="vertex" cx="55" cy="124" />
            <circle class="vertex" cx="165" cy="124" />
          </g>

          
          <line class="callout-line" x1="110" y1="24" x2="185" y2="16" />
          <text class="callout-text" x="146" y="12">Base 1: Triangle</text>

          <line class="callout-line" x1="165" y1="124" x2="195" y2="140" />
          <text class="callout-text" x="120" y="146">Base 2: Triangle</text>
        </svg>
      </div>

      <div class="data-box">
        <div class="info-row row-bases">
          <span class="info-label">Base Shape</span>
          <span class="info-val">2 Triangles</span>
        </div>
        <div class="info-row row-lateral">
          <span class="info-label">Lateral Faces</span>
          <span class="info-val">3 Rectangles</span>
        </div>
        <div class="stat-pills">
          <div class="pill">Faces <span>5</span></div>
          <div class="pill pill-vertices">Vertices <span>6</span></div>
          <div class="pill pill-edges">Edges <span>9</span></div>
        </div>
      </div>
    </div>

    
    <div class="prism-card">
      <div class="prism-title">Rectangular Prism</div>
      
      <div class="svg-wrap">
        <svg viewBox="0 0 220 150">
          
          <polygon class="face-lat" points="110,18 45,42 45,108 110,84" />
          <polygon class="face-lat" points="110,18 175,42 175,108 110,84" />

          
          <line class="edge-dash" x1="110" y1="18" x2="110" y2="84" />
          <line class="edge-dash" x1="110" y1="84" x2="45" y2="108" />
          <line class="edge-dash" x1="110" y1="84" x2="175" y2="108" />

          
          <polygon class="face-base" points="110,84 175,108 110,132 45,108" />

          
          <polygon class="face-lat" points="45,42 110,66 110,132 45,108" />
          <polygon class="face-lat" points="110,66 175,42 175,108 110,132" />

          
          <polygon class="face-base" points="110,18 175,42 110,66 45,42" />

          
          <line class="edge-solid" x1="110" y1="18" x2="45" y2="42" />
          <line class="edge-solid" x1="110" y1="18" x2="175" y2="42" />
          <line class="edge-solid" x1="45" y1="42" x2="110" y2="66" />
          <line class="edge-solid" x1="175" y1="42" x2="110" y2="66" />
          <line class="edge-solid" x1="45" y1="42" x2="45" y2="108" />
          <line class="edge-solid" x1="110" y1="66" x2="110" y2="132" />
          <line class="edge-solid" x1="175" y1="42" x2="175" y2="108" />
          <line class="edge-solid" x1="45" y1="108" x2="110" y2="132" />
          <line class="edge-solid" x1="175" y1="108" x2="110" y2="132" />

          
          <g>
            <circle class="vertex" cx="110" cy="18" />
            <circle class="vertex" cx="45" cy="42" />
            <circle class="vertex" cx="175" cy="42" />
            <circle class="vertex" cx="110" cy="66" />
            <circle class="vertex" cx="110" cy="84" />
            <circle class="vertex" cx="45" cy="108" />
            <circle class="vertex" cx="175" cy="108" />
            <circle class="vertex" cx="110" cy="132" />
          </g>

          
          <line class="callout-line" x1="110" y1="18" x2="185" y2="12" />
          <text class="callout-text" x="136" y="10">Base 1: Rectangle</text>

          <line class="callout-line" x1="110" y1="132" x2="185" y2="144" />
          <text class="callout-text" x="108" y="146">Base 2: Rectangle</text>
        </svg>
      </div>

      <div class="data-box">
        <div class="info-row row-bases">
          <span class="info-label">Base Shape</span>
          <span class="info-val">2 Rectangles</span>
        </div>
        <div class="info-row row-lateral">
          <span class="info-label">Lateral Faces</span>
          <span class="info-val">4 Rectangles</span>
        </div>
        <div class="stat-pills">
          <div class="pill">Faces <span>6</span></div>
          <div class="pill pill-vertices">Vertices <span>8</span></div>
          <div class="pill pill-edges">Edges <span>12</span></div>
        </div>
      </div>
    </div>

  </div>

  <script>
    function setMode(mode, btnElement) {
      // Update active button state
      const buttons = document.querySelectorAll('.filter-btn');
      buttons.forEach(btn => btn.classList.remove('active'));
      if (btnElement) {
        btnElement.classList.add('active');
      }

      // Update root state class for CSS transitions
      const root = document.getElementById('diagramRoot');
      root.className = 'grid-container state-' + mode;
    }
  </script>
</body>
</html>

Classifying Prisms, Pyramids, Cylinders, Cones, and Spheres

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

    body {
      background: transparent;
      color: #0f172a;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Top Selector */
    .toolbar {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px;
    }

    .pill-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #475569;
      font-size: 13px;
      font-weight: 600;
      padding: 5px 12px;
      border-radius: 9999px;
      cursor: pointer;
      transition: all 0.25s ease;
      user-select: none;
    }

    .pill-btn:hover {
      background: #e2e8f0;
      color: #0f172a;
    }

    .pill-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
    }

    /* Side-by-side Columns */
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

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

    .pyramid-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #f8fafc;
      border-radius: 12px;
      padding: 8px 10px 10px;
      border: 1px solid #e2e8f0;
    }

    .col-header {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 2px;
      text-align: center;
    }

    .col-sub {
      font-size: 11px;
      color: #64748b;
      margin-bottom: 4px;
    }

    .svg-wrap {
      width: 100%;
      max-width: 220px;
      height: 140px;
    }

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

    /* Property Badges */
    .badges-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px;
      width: 100%;
      margin-top: 8px;
    }

    .badge {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 4px 6px;
      font-size: 11px;
      color: #334155;
      text-align: center;
      transition: all 0.25s ease;
    }

    .badge-val {
      font-weight: 700;
      color: #0f172a;
      display: block;
      font-size: 12px;
    }

    .badge.highlight {
      background: #eff6ff;
      border-color: #38bdf8;
      box-shadow: 0 0 0 1.5px #0284c7;
      color: #0369a1;
    }
    .badge.highlight .badge-val {
      color: #0284c7;
    }

    /* SVG Interactive Elements */
    .geo-base {
      fill: #f97316;
      fill-opacity: 0.28;
      transition: all 0.3s ease;
    }

    .geo-face-l {
      fill: #38bdf8;
      fill-opacity: 0.22;
      transition: all 0.3s ease;
    }

    .geo-face-r {
      fill: #0284c7;
      fill-opacity: 0.32;
      transition: all 0.3s ease;
    }

    .geo-face-front {
      fill: #0ea5e9;
      fill-opacity: 0.18;
      transition: all 0.3s ease;
    }

    .geo-edge {
      stroke: #0f172a;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: all 0.3s ease;
    }

    .geo-edge-hidden {
      stroke: #94a3b8;
      stroke-width: 1.5;
      stroke-dasharray: 4,3;
      transition: all 0.3s ease;
    }

    .geo-apex {
      fill: #ef4444;
      stroke: #ffffff;
      stroke-width: 1.5;
      transition: all 0.3s ease;
    }

    .geo-vertex {
      fill: #0f172a;
      stroke: #ffffff;
      stroke-width: 1.5;
      opacity: 0;
      transition: all 0.3s ease;
    }

    .apex-label {
      font-size: 10px;
      font-weight: 700;
      fill: #b91c1c;
      transition: all 0.3s ease;
    }

    /* State Highlighting */
    .mode-base .geo-base {
      fill-opacity: 0.65;
      filter: drop-shadow(0 0 3px rgba(249, 115, 22, 0.5));
    }
    .mode-base .geo-face-l,
    .mode-base .geo-face-r,
    .mode-base .geo-face-front {
      fill-opacity: 0.06;
    }

    .mode-apex .geo-apex {
      r: 6;
      fill: #dc2626;
      filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.8));
    }
    .mode-apex .apex-label {
      font-size: 11px;
      fill: #ef4444;
    }

    .mode-faces .geo-face-l { fill-opacity: 0.45; }
    .mode-faces .geo-face-r { fill-opacity: 0.55; }
    .mode-faces .geo-face-front { fill-opacity: 0.35; }
    .mode-faces .geo-base { fill-opacity: 0.35; }

    .mode-edges .geo-edge {
      stroke: #0284c7;
      stroke-width: 3.2;
    }
    .mode-edges .geo-edge-hidden {
      stroke: #38bdf8;
      stroke-width: 2.2;
    }

    .mode-vertices .geo-vertex {
      opacity: 1;
      r: 4.5;
      fill: #0284c7;
    }
    .mode-vertices .geo-apex {
      r: 5.5;
      fill: #ef4444;
    }

    /* Bottom Rule Callout */
    .rule-callout {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 12px;
      color: #166534;
      text-align: center;
      font-weight: 500;
    }
    .rule-callout strong {
      color: #14532d;
      font-weight: 700;
    }
  </style>
</head>
<body>

  
  <div class="toolbar" id="toolbar">
    <button class="pill-btn active" data-mode="all">All Parts</button>
    <button class="pill-btn" data-mode="base">Base</button>
    <button class="pill-btn" data-mode="apex">Apex</button>
    <button class="pill-btn" data-mode="faces">Faces</button>
    <button class="pill-btn" data-mode="edges">Edges</button>
    <button class="pill-btn" data-mode="vertices">Vertices</button>
  </div>

  
  <div class="comparison-grid" id="modelsGrid">

    
    <div class="pyramid-col">
      <div class="col-header">Square Pyramid</div>
      <div class="col-sub">Quadrilateral Base</div>
      <div class="svg-wrap">
        <svg viewBox="0 0 200 140" id="svgSquare">
          
          <polygon class="geo-base" points="40,95 24,124 140,132 166,104" />

          
          <polygon class="geo-face-l" points="98,18 40,95 24,124" />
          <polygon class="geo-face-front" points="98,18 24,124 140,132" />
          <polygon class="geo-face-r" points="98,18 140,132 166,104" />

          
          <line class="geo-edge-hidden" x1="40" y1="95" x2="166" y2="104" />
          <line class="geo-edge-hidden" x1="40" y1="95" x2="24" y2="124" />
          <line class="geo-edge-hidden" x1="98" y1="18" x2="40" y2="95" />

          
          <line class="geo-edge" x1="24" y1="124" x2="140" y2="132" />
          <line class="geo-edge" x1="140" y1="132" x2="166" y2="104" />
          <line class="geo-edge" x1="98" y1="18" x2="24" y2="124" />
          <line class="geo-edge" x1="98" y1="18" x2="140" y2="132" />
          <line class="geo-edge" x1="98" y1="18" x2="166" y2="104" />

          
          <circle class="geo-vertex" cx="40" cy="95" r="3.5" />
          <circle class="geo-vertex" cx="24" cy="124" r="3.5" />
          <circle class="geo-vertex" cx="140" cy="132" r="3.5" />
          <circle class="geo-vertex" cx="166" cy="104" r="3.5" />

          
          <line x1="98" y1="18" x2="125" y2="14" stroke="#ef4444" stroke-width="1" stroke-dasharray="2,2" />
          <text x="128" y="17" class="apex-label">Apex</text>
          <circle class="geo-apex" cx="98" cy="18" r="4.5" />
        </svg>
      </div>

      
      <div class="badges-grid">
        <div class="badge" data-part="base">
          <span class="badge-val">1 Square</span> Base (4 sides)
        </div>
        <div class="badge" data-part="faces">
          <span class="badge-val">5 Faces</span> 1 base + 4 sides
        </div>
        <div class="badge" data-part="vertices apex">
          <span class="badge-val">5 Vertices</span> 4 base + 1 apex
        </div>
        <div class="badge" data-part="edges">
          <span class="badge-val">8 Edges</span> 4 base + 4 sides
        </div>
      </div>
    </div>

    
    <div class="pyramid-col">
      <div class="col-header">Triangular Pyramid</div>
      <div class="col-sub">Tetrahedron (3-sided base)</div>
      <div class="svg-wrap">
        <svg viewBox="0 0 200 140" id="svgTriangle">
          
          <polygon class="geo-base" points="30,124 165,124 106,94" />

          
          <polygon class="geo-face-l" points="98,18 30,124 106,94" />
          <polygon class="geo-face-r" points="98,18 106,94 165,124" />
          <polygon class="geo-face-front" points="98,18 30,124 165,124" />

          
          <line class="geo-edge-hidden" x1="98" y1="18" x2="106" y2="94" />
          <line class="geo-edge-hidden" x1="30" y1="124" x2="106" y2="94" />
          <line class="geo-edge-hidden" x1="165" y1="124" x2="106" y2="94" />

          
          <line class="geo-edge" x1="30" y1="124" x2="165" y2="124" />
          <line class="geo-edge" x1="98" y1="18" x2="30" y2="124" />
          <line class="geo-edge" x1="98" y1="18" x2="165" y2="124" />

          
          <circle class="geo-vertex" cx="30" cy="124" r="3.5" />
          <circle class="geo-vertex" cx="165" cy="124" r="3.5" />
          <circle class="geo-vertex" cx="106" cy="94" r="3.5" />

          
          <line x1="98" y1="18" x2="125" y2="14" stroke="#ef4444" stroke-width="1" stroke-dasharray="2,2" />
          <text x="128" y="17" class="apex-label">Apex</text>
          <circle class="geo-apex" cx="98" cy="18" r="4.5" />
        </svg>
      </div>

      
      <div class="badges-grid">
        <div class="badge" data-part="base">
          <span class="badge-val">1 Triangle</span> Base (3 sides)
        </div>
        <div class="badge" data-part="faces">
          <span class="badge-val">4 Faces</span> 1 base + 3 sides
        </div>
        <div class="badge" data-part="vertices apex">
          <span class="badge-val">4 Vertices</span> 3 base + 1 apex
        </div>
        <div class="badge" data-part="edges">
          <span class="badge-val">6 Edges</span> 3 base + 3 sides
        </div>
      </div>
    </div>

  </div>

  
  <div class="rule-callout">
    <strong>Pyramid Rule (<em>n</em>-sided base):</strong> Faces = <strong><em>n</em> + 1</strong> &nbsp;|&nbsp; Vertices = <strong><em>n</em> + 1</strong> &nbsp;|&nbsp; Edges = <strong>2<em>n</em></strong>
  </div>

  <script>
    const buttons = document.querySelectorAll('.pill-btn');
    const grid = document.getElementById('modelsGrid');
    const badges = document.querySelectorAll('.badge');

    function setMode(mode) {
      // Button states
      buttons.forEach(btn => {
        btn.classList.toggle('active', btn.dataset.mode === mode);
      });

      // Grid classes for SVG styling
      grid.className = 'comparison-grid';
      if (mode !== 'all') {
        grid.classList.add('mode-' + mode);
      }

      // Badge highlights
      badges.forEach(badge => {
        const parts = badge.dataset.part.split(' ');
        badge.classList.toggle('highlight', mode !== 'all' && parts.includes(mode));
      });
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => setMode(btn.dataset.mode));
    });
  </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;
      -webkit-tap-highlight-color: transparent;
    }

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

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

    .solid-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #ffffff;
      border-radius: 12px;
      padding: 10px 6px;
      border: 1px solid #e2e8f0;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .solid-col:hover {
      border-color: #cbd5e1;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    }

    .solid-title {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 6px;
    }

    .svg-wrap {
      width: 100%;
      max-width: 130px;
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    .chip-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
      width: 100%;
      margin-top: 8px;
    }

    .chip {
      font-size: 11px;
      font-weight: 600;
      line-height: 1.2;
      text-align: center;
      padding: 4px 6px;
      border-radius: 6px;
      border: 1px solid transparent;
    }

    .chip-blue {
      background: #e0f2fe;
      color: #0369a1;
      border-color: #bae6fd;
    }

    .chip-amber {
      background: #fef3c7;
      color: #b45309;
      border-color: #fde68a;
    }

    .chip-coral {
      background: #ffedd5;
      color: #c2410c;
      border-color: #fed7aa;
    }

    .chip-slate {
      background: #f1f5f9;
      color: #475569;
      border-color: #e2e8f0;
    }

    /* Key / Legend bar */
    .legend-bar {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px 16px;
      margin-top: 14px;
      padding: 8px 14px;
      background: #f8fafc;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }

    .legend-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
    }

    .swatch {
      width: 14px;
      height: 10px;
      border-radius: 2px;
      border: 1px solid rgba(0, 0, 0, 0.1);
    }

    .swatch-blue { background: #38bdf8; }
    .swatch-amber { background: #f59e0b; }
    .swatch-coral { background: #ea580c; border-radius: 50%; width: 10px; }

    @media (max-width: 440px) {
      .solid-title { font-size: 14px; }
      .chip { font-size: 10px; padding: 3px 4px; }
      .legend-item { font-size: 11px; }
      .diagram-grid { gap: 6px; }
      .solid-col { padding: 8px 4px; }
    }
  </style>
</head>
<body>

  <div class="diagram-grid">
    
    <div class="solid-col">
      <div class="solid-title">Cylinder</div>
      <div class="svg-wrap">
        <svg viewBox="0 0 120 120">
          <defs>
            <linearGradient id="cylGrad" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stop-color="#fbbf24" />
              <stop offset="50%" stop-color="#fef3c7" />
              <stop offset="100%" stop-color="#d97706" />
            </linearGradient>
            <linearGradient id="flatTop" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="#7dd3fc" />
              <stop offset="100%" stop-color="#38bdf8" />
            </linearGradient>
            <linearGradient id="flatBot" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="#38bdf8" />
              <stop offset="100%" stop-color="#0284c7" />
            </linearGradient>
          </defs>
          
          
          <ellipse cx="60" cy="92" rx="40" ry="14" fill="none" stroke="#0284c7" stroke-width="2" stroke-dasharray="3,3" opacity="0.6"/>
          
          
          <path d="M 20 28 L 20 92 A 40 14 0 0 0 100 92 L 100 28 Z" fill="url(#cylGrad)" stroke="#b45309" stroke-width="1.5" stroke-linejoin="round"/>
          
          
          <path d="M 20 92 A 40 14 0 0 0 100 92" fill="none" stroke="#0284c7" stroke-width="2.5"/>
          
          
          <ellipse cx="60" cy="28" rx="40" ry="14" fill="url(#flatTop)" stroke="#0284c7" stroke-width="2"/>
        </svg>
      </div>
      <div class="chip-list">
        <div class="chip chip-blue">2 Flat Faces</div>
        <div class="chip chip-amber">1 Curved Surface</div>
        <div class="chip chip-slate">0 Vertices / 0 Edges</div>
      </div>
    </div>

    
    <div class="solid-col">
      <div class="solid-title">Cone</div>
      <div class="svg-wrap">
        <svg viewBox="0 0 120 120">
          <defs>
            <linearGradient id="coneGrad" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stop-color="#fbbf24" />
              <stop offset="45%" stop-color="#fef3c7" />
              <stop offset="100%" stop-color="#d97706" />
            </linearGradient>
          </defs>
          
          
          <ellipse cx="60" cy="94" rx="42" ry="14" fill="none" stroke="#0284c7" stroke-width="2" stroke-dasharray="3,3" opacity="0.6"/>
          
          
          <path d="M 18 94 L 60 18 L 102 94 A 42 14 0 0 1 18 94 Z" fill="url(#coneGrad)" stroke="#b45309" stroke-width="1.5" stroke-linejoin="round"/>
          
          
          <path d="M 18 94 A 42 14 0 0 0 102 94" fill="none" stroke="#0284c7" stroke-width="2.5"/>
          
          
          <circle cx="60" cy="18" r="4.5" fill="#ea580c" stroke="#ffffff" stroke-width="1.5"/>
        </svg>
      </div>
      <div class="chip-list">
        <div class="chip chip-blue">1 Flat Base</div>
        <div class="chip chip-amber">1 Curved Surface</div>
        <div class="chip chip-coral">1 Apex Point</div>
      </div>
    </div>

    
    <div class="solid-col">
      <div class="solid-title">Sphere</div>
      <div class="svg-wrap">
        <svg viewBox="0 0 120 120">
          <defs>
            <radialGradient id="sphereGrad" cx="35%" cy="35%" r="65%">
              <stop offset="0%" stop-color="#fef3c7" />
              <stop offset="45%" stop-color="#fbbf24" />
              <stop offset="85%" stop-color="#d97706" />
              <stop offset="100%" stop-color="#92400e" />
            </radialGradient>
          </defs>
          
          
          <circle cx="60" cy="60" r="44" fill="url(#sphereGrad)" stroke="#b45309" stroke-width="1.5"/>
          
          
          <path d="M 16 60 A 44 14 0 0 1 104 60" fill="none" stroke="#78350f" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.4"/>
          
          
          <path d="M 16 60 A 44 14 0 0 0 104 60" fill="none" stroke="#78350f" stroke-width="1.5" opacity="0.5"/>
          
          
          <line x1="60" y1="60" x2="98" y2="45" stroke="#0f172a" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2,2"/>
          <circle cx="60" cy="60" r="2.5" fill="#0f172a"/>
          <circle cx="98" cy="45" r="2" fill="#0f172a"/>
          <text x="76" y="48" font-size="11" font-weight="700" fill="#0f172a" font-style="italic">r</text>
        </svg>
      </div>
      <div class="chip-list">
        <div class="chip chip-amber">1 Curved Surface</div>
        <div class="chip chip-slate">0 Flat Faces</div>
        <div class="chip chip-slate">Equal Radius (r)</div>
      </div>
    </div>
  </div>

  
  <div class="legend-bar">
    <div class="legend-item">
      <span class="swatch swatch-blue"></span>
      <span>Flat Face</span>
    </div>
    <div class="legend-item">
      <span class="swatch swatch-amber"></span>
      <span>Curved Surface</span>
    </div>
    <div class="legend-item">
      <span class="swatch swatch-coral"></span>
      <span>Apex Point</span>
    </div>
  </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }
    body {
      width: 100%;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px;
      min-height: 100%;
    }
    .nav-bar {
      display: flex;
      width: 100%;
      max-width: 340px;
      background: #f1f5f9;
      border-radius: 10px;
      padding: 3px;
      gap: 2px;
    }
    .tab-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 6px 4px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.25s ease;
      text-align: center;
      white-space: nowrap;
    }
    .tab-btn.active {
      background: #ffffff;
      color: #0f172a;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    }
    .tab-btn:focus-visible {
      outline: 2px solid #0284c7;
    }
    .svg-container {
      width: 100%;
      max-width: 340px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 4px 0;
    }
    svg {
      width: 100%;
      height: auto;
      overflow: visible;
      user-select: none;
    }
    .part {
      transition: opacity 0.3s ease;
    }
    .dimmed {
      opacity: 0.18 !important;
    }
    .stats-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 340px;
    }
    .stat-card {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 7px 4px;
      text-align: center;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .stat-card:hover {
      background: #f1f5f9;
    }
    .stat-val {
      font-size: 15px;
      font-weight: 800;
      line-height: 1.2;
    }
    .stat-name {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-top: 1px;
    }
    .stat-card.face-active {
      background: #f0f9ff;
      border-color: #0284c7;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.15);
    }
    .stat-card.edge-active {
      background: #faf5ff;
      border-color: #7c3aed;
      box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15);
    }
    .stat-card.vertex-active {
      background: #fff7ed;
      border-color: #ea580c;
      box-shadow: 0 2px 8px rgba(234, 88, 12, 0.15);
    }
  </style>
</head>
<body>

  
  <div class="nav-bar" role="tablist">
    <button id="btn-all" class="tab-btn active" onclick="setHighlight('all')">All</button>
    <button id="btn-face" class="tab-btn" onclick="setHighlight('face')">Face</button>
    <button id="btn-edge" class="tab-btn" onclick="setHighlight('edge')">Edge</button>
    <button id="btn-vertex" class="tab-btn" onclick="setHighlight('vertex')">Vertex</button>
  </div>

  
  <div class="svg-container">
    <svg viewBox="0 0 340 230" aria-label="3D Cube Anatomy Diagram">
      <defs>
        
        <marker id="arrow-blue" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
          <path d="M0,0 L6,3 L0,6 Z" fill="#0284c7" />
        </marker>
        <marker id="arrow-purple" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
          <path d="M0,0 L6,3 L0,6 Z" fill="#7c3aed" />
        </marker>
        <marker id="arrow-orange" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
          <path d="M0,0 L6,3 L0,6 Z" fill="#ea580c" />
        </marker>
      </defs>

      
      <g stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="4,4">
        <line x1="170" y1="40" x2="170" y2="125" />
        <line x1="110" y1="160" x2="170" y2="125" />
        <line x1="230" y1="160" x2="170" y2="125" />
      </g>

      
      <polygon points="110,75 170,110 170,195 110,160" fill="#f1f5f9" stroke="#94a3b8" stroke-width="1.5" stroke-linejoin="round" />
      <polygon points="170,110 230,75 230,160 170,195" fill="#e2e8f0" stroke="#94a3b8" stroke-width="1.5" stroke-linejoin="round" />

      
      <g id="grp-face" class="part" onclick="setHighlight('face')" style="cursor:pointer;">
        <polygon points="170,40 230,75 170,110 110,75" fill="#38bdf8" fill-opacity="0.38" stroke="#0284c7" stroke-width="2.5" stroke-linejoin="round" />
        
        <path d="M 64,48 L 130,48 L 155,70" fill="none" stroke="#0284c7" stroke-width="1.75" marker-end="url(#arrow-blue)" />
        <text x="60" y="44" fill="#0284c7" font-size="14" font-weight="800" text-anchor="end">Face</text>
        <text x="60" y="58" fill="#64748b" font-size="11" font-weight="600" text-anchor="end">Flat surface</text>
      </g>

      
      <g id="grp-edge" class="part" onclick="setHighlight('edge')" style="cursor:pointer;">
        <line x1="170" y1="110" x2="170" y2="195" stroke="#7c3aed" stroke-width="4.5" stroke-linecap="round" />
        
        <path d="M 68,162 L 126,162 L 165,155" fill="none" stroke="#7c3aed" stroke-width="1.75" marker-end="url(#arrow-purple)" />
        <text x="64" y="158" fill="#7c3aed" font-size="14" font-weight="800" text-anchor="end">Edge</text>
        <text x="64" y="172" fill="#64748b" font-size="11" font-weight="600" text-anchor="end">Line segment</text>
      </g>

      
      <g id="grp-vertex" class="part" onclick="setHighlight('vertex')" style="cursor:pointer;">
        <circle cx="230" cy="75" r="6.5" fill="#ea580c" stroke="#ffffff" stroke-width="2" />
        
        <path d="M 276,48 L 246,48 L 235,66" fill="none" stroke="#ea580c" stroke-width="1.75" marker-end="url(#arrow-orange)" />
        <text x="280" y="44" fill="#ea580c" font-size="14" font-weight="800" text-anchor="start">Vertex</text>
        <text x="280" y="58" fill="#64748b" font-size="11" font-weight="600" text-anchor="start">Corner point</text>
      </g>
    </svg>
  </div>

  
  <div class="stats-row">
    <div id="card-face" class="stat-card" onclick="setHighlight('face')">
      <div class="stat-val" style="color: #0284c7;">6</div>
      <div class="stat-name">Faces</div>
    </div>
    <div id="card-edge" class="stat-card" onclick="setHighlight('edge')">
      <div class="stat-val" style="color: #7c3aed;">12</div>
      <div class="stat-name">Edges</div>
    </div>
    <div id="card-vertex" class="stat-card" onclick="setHighlight('vertex')">
      <div class="stat-val" style="color: #ea580c;">8</div>
      <div class="stat-name">Vertices</div>
    </div>
  </div>

  <script>
    function setHighlight(type) {
      // Update Buttons
      const buttons = ['all', 'face', 'edge', 'vertex'];
      buttons.forEach(b => {
        const el = document.getElementById('btn-' + b);
        if (el) el.classList.toggle('active', b === type);
      });

      // Update SVG Group Opacities
      const grpFace = document.getElementById('grp-face');
      const grpEdge = document.getElementById('grp-edge');
      const grpVertex = document.getElementById('grp-vertex');

      if (type === 'all') {
        grpFace.classList.remove('dimmed');
        grpEdge.classList.remove('dimmed');
        grpVertex.classList.remove('dimmed');
      } else {
        grpFace.classList.toggle('dimmed', type !== 'face');
        grpEdge.classList.toggle('dimmed', type !== 'edge');
        grpVertex.classList.toggle('dimmed', type !== 'vertex');
      }

      // Update Stat Cards
      document.getElementById('card-face').classList.toggle('face-active', type === 'face');
      document.getElementById('card-edge').classList.toggle('edge-active', type === 'edge');
      document.getElementById('card-vertex').classList.toggle('vertex-active', type === 'vertex');
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 10px;
      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;
    }

    .column {
      display: flex;
      flex-direction: column;
      gap: 8px;
      border-radius: 12px;
      padding: 10px;
      transition: background 0.2s ease;
    }

    .col-poly {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
    }

    .col-curved {
      background: #faf5ff;
      border: 1px solid #e9d5ff;
    }

    .header {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      text-align: center;
    }

    .badge {
      display: inline-block;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      letter-spacing: 0.2px;
    }

    .badge-poly {
      background: #dcfce7;
      color: #166534;
      border: 1px solid #86efac;
    }

    .badge-curved {
      background: #f3e8ff;
      color: #6b21a8;
      border: 1px solid #d8b4fe;
    }

    .subtitle {
      font-size: 11px;
      font-weight: 600;
      opacity: 0.75;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .shapes-wrap {
      display: flex;
      flex-direction: column;
      gap: 6px;
      justify-content: center;
      flex: 1;
    }

    .shape-card {
      background: #ffffff;
      border-radius: 8px;
      padding: 6px 8px;
      display: flex;
      align-items: center;
      gap: 10px;
      border: 1px solid rgba(0,0,0,0.06);
      box-shadow: 0 1px 3px rgba(0,0,0,0.03);
      cursor: pointer;
      user-select: none;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .shape-card:active {
      transform: scale(0.98);
    }

    .shape-card.active {
      box-shadow: 0 0 0 2px #22b7ff;
    }

    .svg-box {
      width: 48px;
      height: 48px;
      flex-shrink: 0;
    }

    .shape-name {
      font-size: 12px;
      font-weight: 600;
      color: #1e2945;
      line-height: 1.2;
    }

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

    .solid-edge {
      stroke: #1e2945;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .hidden-edge {
      stroke: #1e2945;
      stroke-width: 1.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 3 2.5;
      opacity: 0.45;
    }

    .face-poly-1 { fill: #86efac; fill-opacity: 0.25; }
    .face-poly-2 { fill: #4ade80; fill-opacity: 0.45; }
    .face-poly-top { fill: #bbf7d0; fill-opacity: 0.55; }

    .face-curved-1 { fill: #d8b4fe; fill-opacity: 0.25; }
    .face-curved-2 { fill: #c084fc; fill-opacity: 0.4; }
    .face-curved-top { fill: #e9d5ff; fill-opacity: 0.6; }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="column col-poly">
      <div class="header">
        <span class="badge badge-poly">Polyhedra</span>
        <span class="subtitle">Flat Faces</span>
      </div>

      <div class="shapes-wrap">
        
        <div class="shape-card">
          <div class="svg-box">
            <svg viewBox="0 0 100 100">
              
              <line class="hidden-edge" x1="48" y1="52" x2="16" y2="68" />
              <line class="hidden-edge" x1="48" y1="52" x2="88" y2="60" />
              <line class="hidden-edge" x1="48" y1="52" x2="68" y2="16" />
              
              
              <polygon class="face-poly-top" points="36,32 68,16 88,60 56,76" />
              <polygon class="face-poly-1" points="16,68 36,32 56,76" />
              
              
              <line class="solid-edge" x1="16" y1="68" x2="36" y2="32" />
              <line class="solid-edge" x1="36" y1="32" x2="56" y2="76" />
              <line class="solid-edge" x1="56" y1="76" x2="16" y2="68" />

              <line class="solid-edge" x1="36" y1="32" x2="68" y2="16" />
              <line class="solid-edge" x1="56" y1="76" x2="88" y2="60" />
              <line class="solid-edge" x1="68" y1="16" x2="88" y2="60" />
            </svg>
          </div>
          <div class="shape-name">Triangular<br>Prism</div>
        </div>

        
        <div class="shape-card">
          <div class="svg-box">
            <svg viewBox="0 0 100 100">
              
              <line class="hidden-edge" x1="50" y1="14" x2="50" y2="46" />
              <line class="hidden-edge" x1="16" y1="64" x2="50" y2="46" />
              <line class="hidden-edge" x1="84" y1="64" x2="50" y2="46" />

              
              <polygon class="face-poly-1" points="50,14 16,64 50,82" />
              <polygon class="face-poly-2" points="50,14 50,82 84,64" />

              
              <line class="solid-edge" x1="16" y1="64" x2="50" y2="82" />
              <line class="solid-edge" x1="50" y1="82" x2="84" y2="64" />
              <line class="solid-edge" x1="50" y1="14" x2="16" y2="64" />
              <line class="solid-edge" x1="50" y1="14" x2="50" y2="82" />
              <line class="solid-edge" x1="50" y1="14" x2="84" y2="64" />
            </svg>
          </div>
          <div class="shape-name">Square<br>Pyramid</div>
        </div>
      </div>
    </div>

    
    <div class="column col-curved">
      <div class="header">
        <span class="badge badge-curved">Curved Solids</span>
        <span class="subtitle">Rounded</span>
      </div>

      <div class="shapes-wrap">
        
        <div class="shape-card">
          <div class="svg-box">
            <svg viewBox="0 0 100 100">
              
              <path class="face-curved-1" d="M 22 28 A 28 10 0 0 0 78 28 L 78 72 A 28 10 0 0 1 22 72 Z" />
              <ellipse class="face-curved-top" cx="50" cy="28" rx="28" ry="10" />

              
              <path class="hidden-edge" d="M 78 72 A 28 10 0 0 0 22 72" />
              <path class="solid-edge" d="M 22 72 A 28 10 0 0 0 78 72" fill="none" />
              <ellipse class="solid-edge" cx="50" cy="28" rx="28" ry="10" fill="none" />
              <line class="solid-edge" x1="22" y1="28" x2="22" y2="72" />
              <line class="solid-edge" x1="78" y1="28" x2="78" y2="72" />
            </svg>
          </div>
          <div class="shape-name">Cylinder</div>
        </div>

        
        <div class="shape-card">
          <div class="svg-box">
            <svg viewBox="0 0 100 100">
              
              <path class="face-curved-1" d="M 50 16 L 22 72 A 28 10 0 0 0 78 72 Z" />

              
              <path class="hidden-edge" d="M 78 72 A 28 10 0 0 0 22 72" />
              <path class="solid-edge" d="M 22 72 A 28 10 0 0 0 78 72" fill="none" />
              <line class="solid-edge" x1="50" y1="16" x2="22" y2="72" />
              <line class="solid-edge" x1="50" y1="16" x2="78" y2="72" />
            </svg>
          </div>
          <div class="shape-name">Cone</div>
        </div>

        
        <div class="shape-card">
          <div class="svg-box">
            <svg viewBox="0 0 100 100">
              <defs>
                <radialGradient id="sphereGrad" cx="38%" cy="35%" r="60%">
                  <stop offset="0%" stop-color="#f3e8ff" />
                  <stop offset="70%" stop-color="#d8b4fe" stop-opacity="0.6" />
                  <stop offset="100%" stop-color="#a855f7" stop-opacity="0.4" />
                </radialGradient>
              </defs>
              <circle cx="50" cy="50" r="32" fill="url(#sphereGrad)" />
              <path class="hidden-edge" d="M 82 50 A 32 9 0 0 0 18 50" />
              <path class="solid-edge" d="M 18 50 A 32 9 0 0 0 82 50" fill="none" opacity="0.6" />
              <circle class="solid-edge" cx="50" cy="50" r="32" fill="none" />
            </svg>
          </div>
          <div class="shape-name">Sphere</div>
        </div>
      </div>
    </div>
  </div>

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <script src="{{VENDOR_CDN}}/three.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      min-height: 100%;
      background: #f8f9fa;
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .toolbar {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      max-width: 580px;
    }

    .btn-chip {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      color: #475569;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
      user-select: none;
    }
    .btn-chip.active {
      background: #1e2945;
      border-color: #1e2945;
      color: #ffffff;
    }
    .btn-chip[data-pair="A"].active {
      background: #ea580c;
      border-color: #ea580c;
      color: #ffffff;
    }
    .btn-chip[data-pair="B"].active {
      background: #16a34a;
      border-color: #16a34a;
      color: #ffffff;
    }
    .btn-chip[data-pair="C"].active {
      background: #9333ea;
      border-color: #9333ea;
      color: #ffffff;
    }

    .main-stage {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 16px;
      width: 100%;
      max-width: 600px;
    }

    .panel-box {
      flex: 1 1 240px;
      max-width: 270px;
      height: 270px;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .panel-title {
      position: absolute;
      top: 8px;
      left: 12px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #94a3b8;
    }

    svg.net-svg {
      width: 230px;
      height: 230px;
    }

    .face-rect {
      stroke: #ffffff;
      stroke-width: 2px;
      rx: 5px;
      transition: fill 0.3s ease, opacity 0.3s ease;
    }
    .face-label {
      font-size: 14px;
      font-weight: 800;
      fill: #ffffff;
      text-anchor: middle;
      dominant-baseline: central;
      user-select: none;
      pointer-events: none;
    }

    .z-path {
      fill: none;
      stroke: #ea580c;
      stroke-width: 3.5px;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 6 5;
      animation: dash 1s linear infinite;
      transition: opacity 0.3s ease;
    }

    @keyframes dash {
      to { stroke-dashoffset: -22; }
    }

    #three-container {
      width: 100%;
      height: 100%;
      cursor: grab;
    }
    #three-container:active {
      cursor: grabbing;
    }

    .hint-drag {
      position: absolute;
      bottom: 6px;
      font-size: 11px;
      font-weight: 600;
      color: #94a3b8;
      pointer-events: none;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button class="btn-chip active" data-pair="all">All Pairs</button>
    <button class="btn-chip" data-pair="A">Pair A (Z-Rule)</button>
    <button class="btn-chip" data-pair="B">Pair B</button>
    <button class="btn-chip" data-pair="C">Pair C</button>
  </div>

  <div class="main-stage">
    
    <div class="panel-box">
      <span class="panel-title">2D Net</span>
      <svg class="net-svg" viewBox="0 0 150 200">
        
        <path id="zLine" class="z-path" d="M 30 30 L 75 30 L 75 165 L 120 165" />
        
        
        
        <rect id="net-A1" class="face-rect" x="10" y="10" width="40" height="40" fill="#ea580c" />
        <text class="face-label" x="30" y="30">A</text>

        
        <rect id="net-B1" class="face-rect" x="55" y="10" width="40" height="40" fill="#16a34a" />
        <text class="face-label" x="75" y="30">B</text>

        
        <rect id="net-C1" class="face-rect" x="55" y="55" width="40" height="40" fill="#9333ea" />
        <text class="face-label" x="75" y="75">C</text>

        
        <rect id="net-B2" class="face-rect" x="55" y="100" width="40" height="40" fill="#16a34a" />
        <text class="face-label" x="75" y="120">B</text>

        
        <rect id="net-C2" class="face-rect" x="55" y="145" width="40" height="40" fill="#9333ea" />
        <text class="face-label" x="75" y="165">C</text>

        
        <rect id="net-A2" class="face-rect" x="100" y="145" width="40" height="40" fill="#ea580c" />
        <text class="face-label" x="120" y="165">A</text>
      </svg>
    </div>

    
    <div class="panel-box">
      <span class="panel-title">Folded 3D Cube</span>
      <div id="three-container"></div>
      <span class="hint-drag">Drag to rotate ↺</span>
    </div>
  </div>

  <script>
    // Face color definitions
    const COLOR_A = 0xea580c; // Orange (Z-rule tabs)
    const COLOR_B = 0x16a34a; // Green (Spine 1 & 3)
    const COLOR_C = 0x9333ea; // Purple (Spine 2 & 4)
    const COLOR_DIM = 0xd1d5db;

    // Three.js Scene Setup
    const container = document.getElementById('three-container');
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff);

    const camera = new THREE.PerspectiveCamera(40, 1, 0.1, 1000);
    camera.position.set(2.4, 1.8, 3.2);
    camera.lookAt(0, 0, 0);

    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.setSize(240, 240);
    container.appendChild(renderer.domElement);

    // Lighting
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
    scene.add(ambientLight);
    const dirLight = new THREE.DirectionalLight(0xffffff, 0.5);
    dirLight.position.set(5, 10, 7);
    scene.add(dirLight);

    // Texture Generator for Cube Faces
    function createFaceTexture(label) {
      const canvas = document.createElement('canvas');
      canvas.width = 256;
      canvas.height = 256;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#ffffff';
      ctx.fillRect(0, 0, 256, 256);
      ctx.strokeStyle = '#ffffff';
      ctx.lineWidth = 12;
      ctx.strokeRect(6, 6, 244, 244);
      ctx.fillStyle = '#ffffff';
      ctx.font = 'bold 120px system-ui, sans-serif';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(label, 128, 128);
      return new THREE.CanvasTexture(canvas);
    }

    // Materials order in THREE.BoxGeometry:
    // 0: +X (Right: Tab A2)
    // 1: -X (Left: Tab A1)
    // 2: +Y (Top: Spine C1)
    // 3: -Y (Bottom: Spine C2)
    // 4: +Z (Front: Spine B2)
    // 5: -Z (Back: Spine B1)
    const matA_R = new THREE.MeshStandardMaterial({ color: COLOR_A, map: createFaceTexture('A'), roughness: 0.3 });
    const matA_L = new THREE.MeshStandardMaterial({ color: COLOR_A, map: createFaceTexture('A'), roughness: 0.3 });
    const matC_T = new THREE.MeshStandardMaterial({ color: COLOR_C, map: createFaceTexture('C'), roughness: 0.3 });
    const matC_B = new THREE.MeshStandardMaterial({ color: COLOR_C, map: createFaceTexture('C'), roughness: 0.3 });
    const matB_F = new THREE.MeshStandardMaterial({ color: COLOR_B, map: createFaceTexture('B'), roughness: 0.3 });
    const matB_K = new THREE.MeshStandardMaterial({ color: COLOR_B, map: createFaceTexture('B'), roughness: 0.3 });

    const materials = [matA_R, matA_L, matC_T, matC_B, matB_F, matB_K];
    const cubeGeo = new THREE.BoxGeometry(1.3, 1.3, 1.3);
    const cube = new THREE.Mesh(cubeGeo, materials);
    scene.add(cube);

    // Auto-rotation & drag interaction
    let isDragging = false;
    let prevMouse = { x: 0, y: 0 };
    let autoRotate = true;

    container.addEventListener('pointerdown', (e) => {
      isDragging = true;
      autoRotate = false;
      prevMouse = { x: e.clientX, y: e.clientY };
    });

    window.addEventListener('pointermove', (e) => {
      if (!isDragging) return;
      const dx = (e.clientX - prevMouse.x) * 0.015;
      const dy = (e.clientY - prevMouse.y) * 0.015;
      cube.rotation.y += dx;
      cube.rotation.x += dy;
      prevMouse = { x: e.clientX, y: e.clientY };
    });

    window.addEventListener('pointerup', () => { isDragging = false; });

    function animate() {
      requestAnimationFrame(animate);
      if (autoRotate) {
        cube.rotation.y += 0.01;
        cube.rotation.x = Math.sin(cube.rotation.y * 0.5) * 0.2 + 0.3;
      }
      renderer.render(scene, camera);
    }
    animate();

    // Mode Filtering & Highlighting
    const buttons = document.querySelectorAll('.btn-chip');
    const zLine = document.getElementById('zLine');

    const netA = [document.getElementById('net-A1'), document.getElementById('net-A2')];
    const netB = [document.getElementById('net-B1'), document.getElementById('net-B2')];
    const netC = [document.getElementById('net-C1'), document.getElementById('net-C2')];

    function setHighlight(pair) {
      buttons.forEach(b => b.classList.toggle('active', b.dataset.pair === pair));

      const showA = pair === 'all' || pair === 'A';
      const showB = pair === 'all' || pair === 'B';
      const showC = pair === 'all' || pair === 'C';

      // 2D Net faces
      netA.forEach(el => { el.style.opacity = showA ? '1' : '0.15'; });
      netB.forEach(el => { el.style.opacity = showB ? '1' : '0.15'; });
      netC.forEach(el => { el.style.opacity = showC ? '1' : '0.15'; });

      // Z path visibility
      zLine.style.opacity = showA ? '1' : '0';

      // 3D Cube faces
      matA_R.color.setHex(showA ? COLOR_A : COLOR_DIM);
      matA_L.color.setHex(showA ? COLOR_A : COLOR_DIM);
      matB_F.color.setHex(showB ? COLOR_B : COLOR_DIM);
      matB_K.color.setHex(showB ? COLOR_B : COLOR_DIM);
      matC_T.color.setHex(showC ? COLOR_C : COLOR_DIM);
      matC_B.color.setHex(showC ? COLOR_C : COLOR_DIM);
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        setHighlight(btn.dataset.pair);
      });
    });
  </script>
</body>
</html>

Solving Spatial Reasoning Puzzles with Nets and Opposite Faces

<!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>Cube Nets: Valid vs Invalid</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }

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

    /* Top rule pill */
    .rule-pill {
      background: #fef2f2;
      border: 1.5px solid #fca5a5;
      color: #b91c1c;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    /* Comparison Area */
    .stage {
      display: flex;
      width: 100%;
      max-width: 620px;
      gap: 12px;
      justify-content: center;
      flex: 1;
    }

    .panel {
      flex: 1;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px;
      position: relative;
      overflow: hidden;
      min-height: 230px;
    }

    .panel.invalid {
      border-color: #fecaca;
    }

    .panel.valid {
      border-color: #bbf7d0;
    }

    .panel-header {
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 800;
      font-size: 14px;
      margin-bottom: 4px;
      z-index: 2;
    }

    .invalid .panel-header { color: #dc2626; }
    .valid .panel-header { color: #16a34a; }

    /* 3D Scene Viewports */
    .viewport {
      flex: 1;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 750px;
      perspective-origin: 50% 45%;
    }

    .scene-rotator {
      transform-style: preserve-3d;
      transform: rotateX(56deg) rotateZ(-36deg);
      transition: transform 0.1s linear;
      position: relative;
      width: 42px;
      height: 42px;
    }

    /* Face primitives */
    :root {
      --fsize: 40px;
      --fold: 0deg;
    }

    .face {
      position: absolute;
      width: var(--fsize);
      height: var(--fsize);
      box-sizing: border-box;
      border: 1.5px solid rgba(15, 23, 42, 0.4);
      transform-style: preserve-3d;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      backface-visibility: visible;
      border-radius: 2px;
    }

    /* Valid 1-4-1 Net Colors */
    .valid .face {
      background: rgba(56, 189, 248, 0.85);
      border-color: #0369a1;
      color: #0c4a6e;
    }
    .valid .face.base { background: #38bdf8; }

    /* Invalid 2x2 Net Colors */
    .invalid .face {
      background: rgba(251, 146, 60, 0.85);
      border-color: #c2410c;
      color: #7c2d12;
    }
    .invalid .face.cluster {
      background: rgba(248, 113, 113, 0.88);
      border-color: #dc2626;
      color: #7f1d1d;
    }
    .invalid .face.overlap {
      background: repeating-linear-gradient(
        45deg,
        rgba(239, 68, 68, 0.9),
        rgba(239, 68, 68, 0.9) 6px,
        rgba(220, 38, 38, 0.95) 6px,
        rgba(220, 38, 38, 0.95) 12px
      );
      color: #ffffff;
      border: 2px dashed #7f1d1d;
    }

    /* 3D Hierarchy - Valid 1-4-1 (T-cross) */
    .v-base { top: 0; left: 0; }
    .v-top {
      top: calc(-1 * var(--fsize)); left: 0;
      transform-origin: bottom center;
      transform: rotateX(var(--fold));
    }
    .v-bottom {
      top: var(--fsize); left: 0;
      transform-origin: top center;
      transform: rotateX(calc(-1 * var(--fold)));
    }
    .v-left {
      top: 0; left: calc(-1 * var(--fsize));
      transform-origin: right center;
      transform: rotateY(calc(-1 * var(--fold)));
    }
    .v-right {
      top: 0; left: var(--fsize);
      transform-origin: left center;
      transform: rotateY(var(--fold));
    }
    .v-back {
      top: 0; left: var(--fsize);
      transform-origin: left center;
      transform: rotateY(var(--fold));
    }

    /* 3D Hierarchy - Invalid 2x2 block Net */
    .inv-base { top: 0; left: 0; }
    .inv-top {
      top: calc(-1 * var(--fsize)); left: 0;
      transform-origin: bottom center;
      transform: rotateX(var(--fold));
    }
    .inv-r1 {
      top: 0; left: var(--fsize);
      transform-origin: left center;
      transform: rotateY(var(--fold));
    }
    .inv-bot {
      top: var(--fsize); left: 0;
      transform-origin: top center;
      transform: rotateX(calc(-1 * var(--fold)));
    }
    .inv-r2 {
      top: 0; left: var(--fsize);
      transform-origin: left center;
      transform: rotateY(var(--fold));
    }
    .inv-tail {
      top: var(--fsize); left: 0;
      transform-origin: top center;
      transform: rotateX(calc(-1 * var(--fold)));
    }

    /* Missing face indicator */
    .hole-indicator {
      position: absolute;
      top: 0; left: 0;
      width: var(--fsize);
      height: var(--fsize);
      border: 2px dashed #ef4444;
      background: rgba(239, 68, 68, 0.12);
      transform-origin: right center;
      transform: rotateY(calc(-1 * var(--fold))) translateZ(0);
      opacity: calc((var(--raw-fold) - 40) / 50);
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 800;
      color: #b91c1c;
    }

    /* Status Badges */
    .status-badge {
      font-size: 12px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      margin-top: 4px;
      z-index: 2;
    }
    .status-invalid { background: #fee2e2; color: #b91c1c; }
    .status-valid { background: #dcfce7; color: #15803d; }

    /* Controls Bar */
    .controls {
      width: 100%;
      max-width: 620px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .play-btn {
      background: #0284c7;
      color: #ffffff;
      border: none;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
    }
    .play-btn:active { background: #0369a1; }

    .slider-track {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .slider-label {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      min-width: 32px;
    }

    input[type=range] {
      flex: 1;
      accent-color: #0284c7;
      cursor: pointer;
      height: 6px;
    }

    @media (max-width: 440px) {
      :root { --fsize: 34px; }
      body { padding: 8px; }
      .stage { gap: 8px; }
      .panel { padding: 6px 4px; min-height: 210px; }
      .rule-pill { font-size: 12px; }
    }
  </style>
</head>
<body>

  
  <div class="rule-pill">
    <span>⚠️</span>
    <span>No 2×2 blocks allowed</span>
  </div>

  
  <div class="stage">
    
    
    <div class="panel invalid">
      <div class="panel-header">
        <span>❌ Invalid</span>
      </div>

      <div class="viewport">
        <div class="scene-rotator">
          
          <div class="face inv-base cluster">
            <div class="face inv-top"></div>
            <div class="face inv-r1 cluster overlap">
              <span>Overlap</span>
            </div>
            <div class="face inv-bot cluster">
              <div class="face inv-r2 cluster overlap">
                <span>Overlap</span>
              </div>
              <div class="face inv-tail"></div>
            </div>
            
            <div class="hole-indicator">Hole</div>
          </div>
        </div>
      </div>

      <div class="status-badge status-invalid" id="invLabel">Flat 2D Net</div>
    </div>

    
    <div class="panel valid">
      <div class="panel-header">
        <span>✓ Valid (1-4-1)</span>
      </div>

      <div class="viewport">
        <div class="scene-rotator">
          
          <div class="face v-base">
            <div class="face v-top"></div>
            <div class="face v-bottom"></div>
            <div class="face v-left"></div>
            <div class="face v-right">
              <div class="face v-back"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="status-badge status-valid" id="valLabel">Flat 2D Net</div>
    </div>

  </div>

  
  <div class="controls">
    <button class="play-btn" id="playBtn" aria-label="Play/Pause">⏸</button>
    <div class="slider-track">
      <span class="slider-label">Flat</span>
      <input type="range" id="foldRange" min="0" max="90" value="0" step="1">
      <span class="slider-label" style="text-align:right;">Cube</span>
    </div>
  </div>

  <script>
    const root = document.documentElement;
    const range = document.getElementById('foldRange');
    const playBtn = document.getElementById('playBtn');
    const invLabel = document.getElementById('invLabel');
    const valLabel = document.getElementById('valLabel');

    let playing = true;
    let progress = 0; // 0 to 90
    let direction = 1;
    let holdTimer = 0;

    function updateFold(deg) {
      deg = Math.max(0, Math.min(90, deg));
      root.style.setProperty('--fold', deg + 'deg');
      root.style.setProperty('--raw-fold', deg);
      range.value = deg;

      if (deg < 15) {
        invLabel.textContent = '2×2 Cluster';
        valLabel.textContent = '1-4-1 Pattern';
      } else if (deg > 75) {
        invLabel.textContent = 'Overlaps & Hole ⚠️';
        valLabel.textContent = 'Closed Cube ✓';
      } else {
        invLabel.textContent = 'Folding...';
        valLabel.textContent = 'Folding...';
      }
    }

    function tick() {
      if (playing) {
        if (holdTimer > 0) {
          holdTimer--;
        } else {
          progress += direction * 0.75;
          if (progress >= 90) {
            progress = 90;
            direction = -1;
            holdTimer = 55; // Pause at folded cube
          } else if (progress <= 0) {
            progress = 0;
            direction = 1;
            holdTimer = 45; // Pause at flat net
          }
          updateFold(progress);
        }
      }
      requestAnimationFrame(tick);
    }

    range.addEventListener('input', (e) => {
      playing = false;
      playBtn.textContent = '▶';
      progress = parseFloat(e.target.value);
      updateFold(progress);
    });

    playBtn.addEventListener('click', () => {
      playing = !playing;
      playBtn.textContent = playing ? '⏸' : '▶';
      if (playing && progress >= 90) {
        direction = -1;
      }
    });

    // Initialize
    updateFold(0);
    requestAnimationFrame(tick);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px;
    }
    .svg-container {
      width: 100%;
      max-width: 620px;
      height: auto;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .face-rect {
      fill: #e0f2fe;
      stroke: #0284c7;
      stroke-width: 2;
    }
    .face-tri {
      fill: #fef3c7;
      stroke: #d97706;
      stroke-width: 2;
    }
    .face-tri-error {
      fill: #fee2e2;
      stroke: #dc2626;
      stroke-width: 2;
    }
    .fold-line {
      stroke: #64748b;
      stroke-width: 2;
      stroke-dasharray: 5, 4;
    }
    .arrow-fold {
      stroke: #0284c7;
      stroke-width: 1.5;
      fill: none;
      marker-end: url(#arrowhead);
    }
    .arrow-fold-err {
      stroke: #dc2626;
      stroke-width: 1.5;
      fill: none;
      marker-end: url(#arrowhead-err);
    }
    .badge-valid {
      font-size: 13px;
      font-weight: 700;
      fill: #166534;
    }
    .badge-invalid {
      font-size: 12px;
      font-weight: 700;
      fill: #991b1b;
    }
    .label {
      font-size: 12px;
      font-weight: 600;
      fill: #475569;
      text-anchor: middle;
    }
  </style>
</head>
<body>

  <div class="svg-container">
    <svg viewBox="0 0 600 370" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <marker id="arrowhead" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
          <polygon points="0 0, 6 3, 0 6" fill="#0284c7" />
        </marker>
        <marker id="arrowhead-err" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
          <polygon points="0 0, 6 3, 0 6" fill="#dc2626" />
        </marker>
        <filter id="shadow" x="-5%" y="-5%" width="110%" height="115%">
          <feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.08" />
        </filter>
      </defs>

      
      <line x1="300" y1="20" x2="300" y2="350" stroke="#e2e8f0" stroke-width="1.5" stroke-dasharray="6 6" />

      
      <g transform="translate(0, 0)">
        
        <rect x="90" y="20" width="120" height="28" rx="14" fill="#dcfce7" stroke="#86efac" stroke-width="1" filter="url(#shadow)" />
        <text x="150" y="39" text-anchor="middle" class="badge-valid">✓ Valid Net</text>

        
        <polygon points="150,75 120,125 180,125" class="face-tri" />
        
        
        <rect x="60" y="125" width="60" height="90" class="face-rect" />
        <rect x="120" y="125" width="60" height="90" class="face-rect" />
        <rect x="180" y="125" width="60" height="90" class="face-rect" />

        
        <polygon points="150,265 120,215 180,215" class="face-tri" />

        
        <line x1="120" y1="125" x2="180" y2="125" class="fold-line" />
        <line x1="120" y1="215" x2="180" y2="215" class="fold-line" />
        <line x1="120" y1="125" x2="120" y2="215" class="fold-line" />
        <line x1="180" y1="125" x2="180" y2="215" class="fold-line" />

        
        <path d="M 100,100 Q 115,108 126,118" class="arrow-fold" />
        <path d="M 100,240 Q 115,232 126,222" class="arrow-fold" />

        <text x="150" y="315" class="label">Opposite sides cap both ends</text>
      </g>

      
      <g transform="translate(300, 0)">
        
        <polygon points="120,75 90,125 150,125" class="face-tri-error" />
        
        
        <polygon points="180,75 150,125 210,125" class="face-tri-error" />

        
        <rect x="30" y="125" width="60" height="90" class="face-rect" />
        <rect x="90" y="125" width="60" height="90" class="face-rect" />
        <rect x="150" y="125" width="60" height="90" class="face-rect" />

        
        <line x1="90" y1="125" x2="150" y2="125" class="fold-line" />
        <line x1="150" y1="125" x2="210" y2="125" class="fold-line" />
        <line x1="90" y1="125" x2="90" y2="215" class="fold-line" />
        <line x1="150" y1="125" x2="150" y2="215" class="fold-line" />

        
        <path d="M 125,70 Q 150,55 175,70" class="arrow-fold-err" />
        <path d="M 175,70 Q 150,55 125,70" class="arrow-fold-err" />

        
        <rect x="25" y="295" width="250" height="34" rx="8" fill="#fee2e2" stroke="#fca5a5" stroke-width="1.5" filter="url(#shadow)" />
        <text x="150" y="316" text-anchor="middle" class="badge-invalid">⚠️ Both triangles on one side = Overlap</text>
      </g>
    </svg>
  </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Skip-One Rule Cube Net</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 10px;
      overflow-x: hidden;
    }

    .main-layout {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    /* Controls Bar */
    .controls-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .btn-group {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
    }

    .btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 11px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    }

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

    .btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 5px rgba(2, 132, 199, 0.3);
    }

    .btn.active .pair-badge {
      border-color: #ffffff;
    }

    .btn-toggle {
      background: #0f172a;
      border-color: #0f172a;
      color: #ffffff;
      box-shadow: 0 2px 4px rgba(15, 23, 42, 0.2);
    }

    .btn-toggle:hover {
      background: #1e293b;
      border-color: #1e293b;
    }

    .pair-badge {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 1.5px solid transparent;
    }

    .badge-bd { background: #10b981; }
    .badge-ce { background: #f59e0b; }
    .badge-af { background: #8b5cf6; }

    /* Visual Stage Scaler */
    .stage-outer {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: visible;
      position: relative;
    }

    .stage-viewport {
      position: relative;
      width: 540px;
      height: 295px;
      transform-origin: center center;
      flex-shrink: 0;
    }

    /* 3D Cube Net Structure */
    .cube-3d-scene {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      perspective: 900px;
      pointer-events: none;
      z-index: 2;
    }

    .net-root {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: transform 0.8s cubic-bezier(0.35, 0, 0.15, 1);
    }

    .net-root.is-3d {
      transform: rotateX(-26deg) rotateY(38deg);
    }

    :root {
      --face-size: 54px;
    }

    .face {
      position: absolute;
      width: var(--face-size);
      height: var(--face-size);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 800;
      border-radius: 6px;
      transform-style: preserve-3d;
      backface-visibility: visible;
      pointer-events: auto;
      transition: transform 0.8s cubic-bezier(0.35, 0, 0.15, 1),
                  opacity 0.25s ease,
                  filter 0.25s ease;
    }

    /* Net Positions & Creases */
    #face-c {
      left: 216px;
      top: 120px;
    }

    #face-b {
      left: calc(-1 * var(--face-size));
      top: 0;
      transform-origin: right center;
    }

    #face-a {
      left: 0;
      top: calc(-1 * var(--face-size));
      transform-origin: bottom center;
    }

    #face-d {
      left: var(--face-size);
      top: 0;
      transform-origin: left center;
    }

    #face-e {
      left: var(--face-size);
      top: 0;
      transform-origin: left center;
    }

    #face-f {
      left: 0;
      top: var(--face-size);
      transform-origin: top center;
    }

    /* Folded Rotations */
    .is-3d #face-b { transform: rotateY(90deg); }
    .is-3d #face-a { transform: rotateX(90deg); }
    .is-3d #face-d { transform: rotateY(-90deg); }
    .is-3d #face-e { transform: rotateY(-90deg); }
    .is-3d #face-f { transform: rotateX(-90deg); }

    /* Face Colors */
    .pair-bd {
      background: #ecfdf5;
      border: 2.5px solid #10b981;
      color: #065f46;
      box-shadow: 0 2px 4px rgba(16, 185, 129, 0.15);
    }

    .pair-ce {
      background: #fffbeb;
      border: 2.5px solid #f59e0b;
      color: #92400e;
      box-shadow: 0 2px 4px rgba(245, 158, 11, 0.15);
    }

    .pair-af {
      background: #f5f3ff;
      border: 2.5px solid #8b5cf6;
      color: #5b21b6;
      box-shadow: 0 2px 4px rgba(139, 92, 246, 0.15);
    }

    /* SVG Layer for Skip Arcs */
    .svg-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 540px;
      height: 295px;
      pointer-events: none;
      z-index: 5;
      transition: opacity 0.3s ease;
    }

    .arc-path {
      fill: none;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 6 5;
    }

    .arc-bd { stroke: #059669; }
    .arc-ce { stroke: #d97706; }
    .arc-af { stroke: #7c3aed; }

    .pill-bg {
      stroke-width: 1.5;
    }

    .pill-bd { fill: #ffffff; stroke: #059669; }
    .pill-ce { fill: #ffffff; stroke: #d97706; }
    .pill-af { fill: #ffffff; stroke: #7c3aed; }

    .arc-label {
      font-size: 11.5px;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: middle;
      letter-spacing: 0.2px;
    }

    .text-bd { fill: #065f46; }
    .text-ce { fill: #92400e; }
    .text-af { fill: #5b21b6; }

    .arc-group {
      transition: opacity 0.25s ease;
    }

    .dimmed {
      opacity: 0.15 !important;
      filter: grayscale(0.5);
    }

    /* Bottom Info Card */
    .info-card {
      width: 100%;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 9px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      text-align: center;
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      line-height: 1.4;
    }

    .tag-bd { color: #059669; font-weight: 800; }
    .tag-ce { color: #d97706; font-weight: 800; }
    .tag-af { color: #7c3aed; font-weight: 800; }
  </style>
</head>
<body>

  <div class="main-layout">
    
    <div class="controls-container">
      <div class="btn-group">
        <button class="btn btn-toggle" id="foldBtn" onclick="toggleFold()">
          <span id="foldIcon">⚀</span> <span id="foldLabel">Fold to 3D</span>
        </button>
        <button class="btn active" id="btn-all" onclick="setPair('all')">All Pairs</button>
        <button class="btn" id="btn-bd" onclick="setPair('bd')">
          <span class="pair-badge badge-bd"></span>B ↔ D (Skip C)
        </button>
        <button class="btn" id="btn-ce" onclick="setPair('ce')">
          <span class="pair-badge badge-ce"></span>C ↔ E (Skip D)
        </button>
        <button class="btn" id="btn-af" onclick="setPair('af')">
          <span class="pair-badge badge-af"></span>A ↔ F (Flaps)
        </button>
      </div>
    </div>

    
    <div class="stage-outer" id="stageOuter">
      <div class="stage-viewport" id="stageViewport">
        
        
        <svg class="svg-layer" id="svgArcs" viewBox="0 0 540 295">
          
          <g id="arcGroupBD" class="arc-group">
            <path class="arc-path arc-bd" d="M 189 120 C 189 15, 297 15, 297 120" />
            <g transform="translate(243, 20)">
              <rect x="-66" y="-11" width="132" height="22" rx="11" class="pill-bg pill-bd" />
              <text class="arc-label text-bd" y="1">Skip C → Opposite</text>
            </g>
          </g>

          
          <g id="arcGroupCE" class="arc-group">
            <path class="arc-path arc-ce" d="M 243 174 C 243 278, 351 278, 351 174" />
            <g transform="translate(297, 274)">
              <rect x="-66" y="-11" width="132" height="22" rx="11" class="pill-bg pill-ce" />
              <text class="arc-label text-ce" y="1">Skip D → Opposite</text>
            </g>
          </g>

          
          <g id="arcGroupAF" class="arc-group">
            <path class="arc-path arc-af" d="M 216 93 C 90 93, 90 201, 270 201" />
            <g transform="translate(90, 147)">
              <rect x="-52" y="-11" width="104" height="22" rx="11" class="pill-bg pill-af" />
              <text class="arc-label text-af" y="1">Outer Flaps</text>
            </g>
          </g>
        </svg>

        
        <div class="cube-3d-scene">
          <div class="net-root" id="netRoot">
            
            <div class="face pair-ce" id="face-c">
              C
              
              <div class="face pair-af" id="face-a">A</div>
              
              <div class="face pair-bd" id="face-b">B</div>
              
              <div class="face pair-bd" id="face-d">
                D
                
                <div class="face pair-ce" id="face-e">E</div>
                
                <div class="face pair-af" id="face-f">F</div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    
    <div class="info-card" id="infoText">
      In a straight 4-face row, skip exactly 1 face to find the opposite side.
    </div>
  </div>

  <script>
    let isFolded = false;
    let activeFilter = 'all';

    const infoMessages = {
      all: 'In a straight 4-face row, skip exactly 1 face to find the opposite side.',
      bd: 'Along straight row B-C-D-E: Face <span class="tag-bd">B</span> skips Face C to land opposite Face <span class="tag-bd">D</span>.',
      ce: 'Along straight row B-C-D-E: Face <span class="tag-ce">C</span> skips Face D to land opposite Face <span class="tag-ce">E</span>.',
      af: 'Remaining outer flaps Face <span class="tag-af">A</span> and Face <span class="tag-af">F</span> fold to form opposite top and bottom.'
    };

    function updateResponsiveScale() {
      const outer = document.getElementById('stageOuter');
      const viewport = document.getElementById('stageViewport');
      const containerWidth = outer.clientWidth || window.innerWidth - 20;
      const baseWidth = 540;
      const baseHeight = 295;

      const scale = Math.min(1, Math.max(0.55, containerWidth / baseWidth));
      viewport.style.transform = `scale(${scale})`;
      outer.style.height = `${baseHeight * scale}px`;
    }

    window.addEventListener('resize', updateResponsiveScale);
    window.addEventListener('DOMContentLoaded', updateResponsiveScale);

    function toggleFold() {
      isFolded = !isFolded;
      const netRoot = document.getElementById('netRoot');
      const svgArcs = document.getElementById('svgArcs');
      const foldLabel = document.getElementById('foldLabel');
      const foldIcon = document.getElementById('foldIcon');

      if (isFolded) {
        netRoot.classList.add('is-3d');
        svgArcs.style.opacity = '0';
        foldLabel.textContent = "Flatten Net";
        foldIcon.textContent = "⬚";
      } else {
        netRoot.classList.remove('is-3d');
        svgArcs.style.opacity = '1';
        foldLabel.textContent = "Fold to 3D";
        foldIcon.textContent = "⚀";
      }
    }

    function setPair(filter) {
      activeFilter = filter;

      // Update button styles
      ['all', 'bd', 'ce', 'af'].forEach(key => {
        const btn = document.getElementById('btn-' + key);
        if (btn) {
          if (key === filter) {
            btn.classList.add('active');
          } else {
            btn.classList.remove('active');
          }
        }
      });

      // Update Explanation Text
      document.getElementById('infoText').innerHTML = infoMessages[filter];

      // Update Faces
      const faces = {
        a: document.getElementById('face-a'),
        b: document.getElementById('face-b'),
        c: document.getElementById('face-c'),
        d: document.getElementById('face-d'),
        e: document.getElementById('face-e'),
        f: document.getElementById('face-f')
      };

      Object.values(faces).forEach(f => f.classList.remove('dimmed'));

      if (filter === 'bd') {
        faces.a.classList.add('dimmed');
        faces.c.classList.add('dimmed');
        faces.e.classList.add('dimmed');
        faces.f.classList.add('dimmed');
      } else if (filter === 'ce') {
        faces.a.classList.add('dimmed');
        faces.b.classList.add('dimmed');
        faces.d.classList.add('dimmed');
        faces.f.classList.add('dimmed');
      } else if (filter === 'af') {
        faces.b.classList.add('dimmed');
        faces.c.classList.add('dimmed');
        faces.d.classList.add('dimmed');
        faces.e.classList.add('dimmed');
      }

      // Update SVG Arcs
      const arcBD = document.getElementById('arcGroupBD');
      const arcCE = document.getElementById('arcGroupCE');
      const arcAF = document.getElementById('arcGroupAF');

      if (filter === 'all') {
        arcBD.style.opacity = '1';
        arcCE.style.opacity = '1';
        arcAF.style.opacity = '1';
      } else if (filter === 'bd') {
        arcBD.style.opacity = '1';
        arcCE.style.opacity = '0.08';
        arcAF.style.opacity = '0.08';
      } else if (filter === 'ce') {
        arcBD.style.opacity = '0.08';
        arcCE.style.opacity = '1';
        arcAF.style.opacity = '0.08';
      } else if (filter === 'af') {
        arcBD.style.opacity = '0.08';
        arcCE.style.opacity = '0.08';
        arcAF.style.opacity = '1';
      }
    }

    // Initial scale call
    updateResponsiveScale();
  </script>
</body>
</html>

Sorting and Comparing 3D Shapes by Their Geometric Properties

Identifying Prisms and Their Properties

Identifying Pyramids and Their Properties

Exploring Euler's Formula for Polyhedra

Understanding Nets of a Cube

Matching 3D Shapes to Their Nets

Drawing Nets of Cuboids and Prisms

Drawing Nets of Pyramids

Identifying Opposite Faces on Nets

Building 3D Solids from Nets and Skeletons

Reasoning About 3D Shapes and Nets

math

3D Shapes and Nets

长方体和正方体的特征：面、棱、顶点

正方体与长方体的表面展开图识别

长方体和正方体表面积公式推导与计算

表面积的实际应用：粉刷教室与无盖容器

体积与容积的意义及度量单位（m³、dm³、cm³、L、mL）

体积与容积单位之间的进率与换算

长方体和正方体体积公式推导与计算（V=abh, V=a³, V=Sh）

切割与拼截问题中的表面积与体积变化规律

排水法测量不规则物体的体积

长方体和正方体的特征、表面积与体积

认识圆柱和圆锥的特征与高

圆柱侧面展开图与侧面积公式推导

圆柱表面积计算及生活实际应用

圆柱体积公式的切拼转化推导

圆柱体积与容积的综合应用计算

等底等高倒水/倒沙实验探究圆锥体积公式

圆锥体积计算与沙堆、粮堆实际问题

圆柱与圆锥等底、等高、等体积的倍数关系辨析

旋转体问题：平面图形绕轴旋转形成立体图形

圆柱与圆锥的特征、表面积与体积

Euler's Formula for Convex Polyhedra (F + V - E = 2)

Orthographic Projections: Plans, Front, and Side Elevations

Reconstructing 3D Block Structures from Orthographic Views

Parallel Horizontal and Vertical Cross-Sections of Prisms and Cylinders

Angled and Oblique Cross-Sections of Pyramids and Cones

Spatial Visualization and Rotating 2D Shapes into 3D Solids

Three-Dimensional Solids, Cross-Sections, and Views

De lenguaje común a lenguaje algebraico

Partes de una expresión algebraica: términos, coeficientes y variables

Evaluación de expresiones algebraicas con enteros y racionales

Identificación y reducción de términos semejantes

Propiedad distributiva para expandir expresiones

Factorización por factor común monomio

Simplificación de expresiones con propiedad distributiva y términos semejantes

OGM.7.GEO.4

Aligned learning resources

Related diagrams