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

    /* Controls header */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }
    .btn-step {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .btn-step.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }
    .btn-play {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 13px;
      color: #1e2945;
    }

    /* Main Diagram Area */
    .diagram-area {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 380px;
      height: 200px;
    }

    /* Matrix layout */
    .matrix-wrapper {
      position: relative;
      display: inline-flex;
      align-items: center;
      padding: 6px 12px;
    }

    /* Mathematical brackets */
    .bracket {
      width: 12px;
      height: 100px;
      border: 3px solid #1e2945;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    .bracket.left {
      left: 0;
      border-right: none;
      border-radius: 6px 0 0 6px;
    }
    .bracket.right {
      right: 0;
      border-left: none;
      border-radius: 0 6px 6px 0;
    }

    .matrix-name {
      font-size: 22px;
      font-weight: 700;
      margin-right: 12px;
      color: #1e2945;
    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 44px);
      grid-template-rows: repeat(2, 44px);
      gap: 8px;
      padding: 4px 6px;
      position: relative;
    }

    .cell {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 700;
      color: #1e2945;
      border-radius: 8px;
      background: #f8fafc;
      transition: all 0.3s ease;
      z-index: 2;
    }

    /* Row / Column visual indicators */
    .row-band {
      position: absolute;
      left: 0;
      right: 0;
      height: 44px;
      border-radius: 8px;
      pointer-events: none;
      border: 2px dashed #ef4444;
      background: rgba(239, 68, 68, 0.12);
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 1;
    }
    .row-band.r1 { top: 4px; }
    .row-band.r2 { top: 56px; }

    .col-band {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 44px;
      border-radius: 8px;
      pointer-events: none;
      border: 2px dashed #3b82f6;
      background: rgba(59, 130, 246, 0.12);
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 1;
    }
    .col-band.c1 { left: 6px; }
    .col-band.c2 { left: 58px; }
    .col-band.c3 { left: 110px; }

    /* Left row count indicator */
    .left-indicator {
      position: absolute;
      left: -90px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      gap: 6px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .left-indicator .tag {
      background: #ef4444;
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 6px;
      white-space: nowrap;
    }
    .left-bracket-svg {
      width: 14px;
      height: 96px;
    }

    /* Top column count indicator */
    .top-indicator {
      position: absolute;
      top: -46px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .top-indicator .tag {
      background: #3b82f6;
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      white-space: nowrap;
    }
    .top-bracket-svg {
      width: 148px;
      height: 12px;
    }

    /* States */
    .state-rows .row-band { opacity: 1; }
    .state-rows .left-indicator { opacity: 1; }
    .state-rows .cell { color: #ef4444; }

    .state-cols .col-band { opacity: 1; }
    .state-cols .top-indicator { opacity: 1; }
    .state-cols .cell { color: #3b82f6; }

    .state-dim .row-band { opacity: 0.6; }
    .state-dim .col-band { opacity: 0.6; }
    .state-dim .left-indicator { opacity: 1; }
    .state-dim .top-indicator { opacity: 1; }

    /* Summary Card */
    .summary-box {
      width: 100%;
      max-width: 320px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    .dim-title {
      font-size: 18px;
      font-weight: 800;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .coral { color: #ef4444; }
    .blue { color: #3b82f6; }
    .read-as {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #e2e8f0;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 700;
      color: #334155;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn-play" id="playBtn" title="Play/Pause">⏸</button>
    <button class="btn-step active" id="step0">1. Rows</button>
    <button class="btn-step" id="step1">2. Columns</button>
    <button class="btn-step" id="step2">3. Dimension</button>
  </div>

  
  <div class="diagram-area" id="diagramContainer">
    <div class="matrix-name">A =</div>

    <div class="matrix-wrapper" id="matrixWrapper">
      
      <div class="left-indicator">
        <span class="tag">2 Rows</span>
        <svg class="left-bracket-svg" viewBox="0 0 14 96" fill="none">
          <path d="M12 2 H6 C2 2 2 10 2 16 V42 C2 46 0 48 0 48 C0 48 2 50 2 54 V80 C2 86 2 94 6 94 H12" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" fill="none"/>
        </svg>
      </div>

      
      <div class="top-indicator">
        <span class="tag">3 Columns</span>
        <svg class="top-bracket-svg" viewBox="0 0 148 12" fill="none">
          <path d="M2 10 V5 C2 2 8 2 14 2 H68 C72 2 74 0 74 0 C74 0 76 2 80 2 H134 C140 2 146 2 146 5 V10" stroke="#3b82f6" stroke-width="2.5" stroke-linecap="round" fill="none"/>
        </svg>
      </div>

      <div class="bracket left"></div>
      
      <div class="grid-container">
        
        <div class="row-band r1"></div>
        <div class="row-band r2"></div>
        <div class="col-band c1"></div>
        <div class="col-band c2"></div>
        <div class="col-band c3"></div>

        
        <div class="cell">5</div>
        <div class="cell">2</div>
        <div class="cell">9</div>
        <div class="cell">1</div>
        <div class="cell">7</div>
        <div class="cell">4</div>
      </div>

      <div class="bracket right"></div>
    </div>
  </div>

  
  <div class="summary-box">
    <div class="dim-title">
      Dimension: <span class="coral">2</span> × <span class="blue">3</span>
      <span class="read-as">(“2 by 3”)</span>
    </div>
    <div class="badge">
      ✦ <span class="coral">R</span> × <span class="blue">C</span> (Row × Column)
    </div>
  </div>

  <script>
    const wrapper = document.getElementById('matrixWrapper');
    const stepBtns = [
      document.getElementById('step0'),
      document.getElementById('step1'),
      document.getElementById('step2')
    ];
    const playBtn = document.getElementById('playBtn');

    const states = ['state-rows', 'state-cols', 'state-dim'];
    let currentStep = 0;
    let playing = true;
    let timer = null;

    function applyStep(index) {
      currentStep = index;
      wrapper.className = 'matrix-wrapper ' + states[currentStep];
      stepBtns.forEach((btn, i) => {
        btn.classList.toggle('active', i === currentStep);
      });
    }

    function nextStep() {
      applyStep((currentStep + 1) % 3);
    }

    function startAutoPlay() {
      stopAutoPlay();
      timer = setInterval(nextStep, 3200);
      playing = true;
      playBtn.textContent = '⏸';
    }

    function stopAutoPlay() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
      playing = false;
      playBtn.textContent = '▶';
    }

    stepBtns.forEach((btn, index) => {
      btn.addEventListener('click', () => {
        stopAutoPlay();
        applyStep(index);
      });
    });

    playBtn.addEventListener('click', () => {
      if (playing) {
        stopAutoPlay();
      } else {
        nextStep();
        startAutoPlay();
      }
    });

    // Initialize
    applyStep(0);
    startAutoPlay();
  </script>
</body>
</html>

What Is a Matrix? Rows, Columns, and Dimensions

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

    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 16px;
      user-select: none;
      -webkit-user-select: none;
    }

    .matrix-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 24px;
    }

    .matrix-name {
      font-size: 26px;
      font-weight: 700;
      font-style: italic;
      color: #1e2945;
    }

    .matrix-equals {
      font-size: 24px;
      font-weight: 600;
      color: #64748b;
    }

    .bracket-wrap {
      position: relative;
      display: inline-flex;
      padding: 6px 14px;
    }

    /* Outer brackets */
    .bracket-wrap::before,
    .bracket-wrap::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 10px;
      border: 3px solid #1e2945;
      pointer-events: none;
    }
    .bracket-wrap::before {
      left: 0;
      border-right: none;
      border-radius: 6px 0 0 6px;
    }
    .bracket-wrap::after {
      right: 0;
      border-left: none;
      border-radius: 0 6px 6px 0;
    }

    .grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, 56px);
      grid-template-rows: repeat(3, 56px);
      gap: 8px;
    }

    /* Laser highlights */
    .laser-row {
      position: absolute;
      left: -6px;
      right: -6px;
      height: 56px;
      background: rgba(99, 102, 241, 0.16);
      border-top: 2px solid #6366f1;
      border-bottom: 2px solid #6366f1;
      border-radius: 8px;
      pointer-events: none;
      transition: top 0.25s ease;
      z-index: 1;
      box-shadow: 0 0 12px rgba(99, 102, 241, 0.25);
    }

    .laser-col {
      position: absolute;
      top: -6px;
      bottom: -6px;
      width: 56px;
      background: rgba(14, 165, 233, 0.16);
      border-left: 2px solid #0ea5e9;
      border-right: 2px solid #0ea5e9;
      border-radius: 8px;
      pointer-events: none;
      transition: left 0.25s ease;
      z-index: 1;
      box-shadow: 0 0 12px rgba(14, 165, 233, 0.25);
    }

    .cell {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 600;
      color: #334155;
      background: transparent;
      border-radius: 8px;
      cursor: pointer;
      transition: color 0.2s ease, font-weight 0.2s ease;
    }

    .cell.intersect {
      color: #0f172a;
      font-weight: 800;
      font-size: 22px;
      background: rgba(245, 158, 11, 0.2);
      box-shadow: 0 0 0 2.5px #f59e0b, 0 0 16px rgba(245, 158, 11, 0.45);
    }

    /* Notation Breakdown */
    .breakdown-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      width: 100%;
      max-width: 320px;
    }

    .equation {
      display: flex;
      align-items: baseline;
      font-size: 28px;
      font-weight: 700;
      color: #1e2945;
    }

    .var-m {
      font-style: italic;
      font-size: 32px;
    }

    .subscripts {
      font-size: 20px;
      font-weight: 700;
      margin-right: 8px;
      position: relative;
      top: 6px;
    }

    .sub-row {
      color: #6366f1;
      padding: 1px 4px;
      border-radius: 4px;
      background: rgba(99, 102, 241, 0.12);
    }

    .sub-col {
      color: #0284c7;
      padding: 1px 4px;
      border-radius: 4px;
      background: rgba(14, 165, 233, 0.12);
    }

    .eq-val {
      color: #d97706;
      font-size: 32px;
      font-weight: 800;
    }

    /* Callout Badges */
    .callouts {
      display: flex;
      gap: 12px;
      width: 100%;
      justify-content: center;
    }

    .tag {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 20px;
    }

    .tag-row {
      background: #eef2ff;
      color: #4f46e5;
      border: 1px solid #c7d2fe;
    }

    .tag-col {
      background: #f0f9ff;
      color: #0284c7;
      border: 1px solid #bae6fd;
    }

    .tag-val {
      font-weight: 800;
      font-size: 15px;
    }
  </style>
</head>
<body>

  <div class="matrix-container">
    <div class="matrix-name">M</div>
    <div class="matrix-equals">=</div>
    <div class="bracket-wrap">
      <div class="grid" id="grid">
        <div class="laser-row" id="laserRow"></div>
        <div class="laser-col" id="laserCol"></div>

        
        <div class="cell" data-r="1" data-c="1">4</div>
        <div class="cell" data-r="1" data-c="2">9</div>
        <div class="cell" data-r="1" data-c="3">12</div>

        
        <div class="cell" data-r="2" data-c="1">3</div>
        <div class="cell" data-r="2" data-c="2">8</div>
        <div class="cell intersect" data-r="2" data-c="3">15</div>

        
        <div class="cell" data-r="3" data-c="1">7</div>
        <div class="cell" data-r="3" data-c="2">0</div>
        <div class="cell" data-r="3" data-c="3">2</div>
      </div>
    </div>
  </div>

  <div class="breakdown-card">
    <div class="equation">
      <span class="var-m">m</span>
      <span class="subscripts"><span class="sub-row" id="subRow">2</span>,<span class="sub-col" id="subCol">3</span></span>
      <span style="color:#64748b; margin-right:8px;">=</span>
      <span class="eq-val" id="targetVal">15</span>
    </div>

    <div class="callouts">
      <div class="tag tag-row">
        <span class="tag-val" id="tagRowVal">2</span> = Row index
      </div>
      <div class="tag tag-col">
        <span class="tag-val" id="tagColVal">3</span> = Column index
      </div>
    </div>
  </div>

  <script>
    const cells = document.querySelectorAll('.cell');
    const laserRow = document.getElementById('laserRow');
    const laserCol = document.getElementById('laserCol');
    const subRow = document.getElementById('subRow');
    const subCol = document.getElementById('subCol');
    const tagRowVal = document.getElementById('tagRowVal');
    const tagColVal = document.getElementById('tagColVal');
    const targetVal = document.getElementById('targetVal');

    const CELL_SIZE = 56;
    const GAP = 8;

    function selectCell(r, c) {
      // Reposition laser row and column
      laserRow.style.top = `${(r - 1) * (CELL_SIZE + GAP)}px`;
      laserCol.style.left = `${(c - 1) * (CELL_SIZE + GAP)}px`;

      let selectedVal = '';
      cells.forEach(cell => {
        const cr = parseInt(cell.dataset.r);
        const cc = parseInt(cell.dataset.c);
        if (cr === r && cc === c) {
          cell.classList.add('intersect');
          selectedVal = cell.textContent.trim();
        } else {
          cell.classList.remove('intersect');
        }
      });

      // Update notation breakdown
      subRow.textContent = r;
      subCol.textContent = c;
      tagRowVal.textContent = r;
      tagColVal.textContent = c;
      targetVal.textContent = selectedVal;
    }

    // Set initial position (Row 2, Column 3)
    selectCell(2, 3);

    // Interactive selection on tap/click
    cells.forEach(cell => {
      cell.addEventListener('click', () => {
        const r = parseInt(cell.dataset.r);
        const c = parseInt(cell.dataset.c);
        selectCell(r, c);
      });
    });
  </script>
</body>
</html>

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

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

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

    .btn-step {
      flex: 1;
      padding: 8px 10px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.25s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

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

    .btn-play {
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      border-radius: 8px;
      cursor: pointer;
    }

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

    .matrix-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.4s ease;
    }

    /* Matrix Brackets */
    .bracket {
      width: 14px;
      height: 154px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      opacity: 0;
      transition: opacity 0.4s ease, transform 0.4s ease;
      pointer-events: none;
    }

    .bracket-left {
      left: -14px;
      border-left: 3.5px solid #0284c7;
      border-top: 3.5px solid #0284c7;
      border-bottom: 3.5px solid #0284c7;
      border-radius: 5px 0 0 5px;
    }

    .bracket-right {
      right: -14px;
      border-right: 3.5px solid #0284c7;
      border-top: 3.5px solid #0284c7;
      border-bottom: 3.5px solid #0284c7;
      border-radius: 0 5px 5px 0;
    }

    /* Grid Layout */
    .grid-table {
      display: grid;
      grid-template-columns: 74px repeat(4, 52px);
      grid-template-rows: 32px repeat(3, 40px);
      gap: 6px 8px;
      align-items: center;
      justify-items: center;
      transition: all 0.4s ease;
    }

    /* Row / Col Headers */
    .header-col {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: opacity 0.4s ease, transform 0.4s ease;
      line-height: 1.1;
    }

    .header-col span {
      font-size: 14px;
      margin-bottom: 2px;
    }

    .header-row {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      justify-self: end;
      padding-right: 6px;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: opacity 0.4s ease, transform 0.4s ease;
      white-space: nowrap;
    }

    .corner-empty {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
    }

    /* Number Cells */
    .cell {
      width: 48px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      transition: all 0.4s ease;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    /* Step States */
    /* Step 2: Fading headers */
    body[data-step="1"] .header-col,
    body[data-step="1"] .header-row {
      opacity: 0.25;
      transform: scale(0.92);
    }

    body[data-step="1"] .cell {
      border-color: #93c5fd;
      color: #0369a1;
      background: #f0f9ff;
    }

    /* Step 3: Pure Matrix */
    body[data-step="2"] .header-col {
      opacity: 0;
      transform: translateY(-8px);
      pointer-events: none;
    }

    body[data-step="2"] .header-row {
      opacity: 0;
      transform: translateX(-8px);
      pointer-events: none;
    }

    body[data-step="2"] .grid-table {
      grid-template-columns: 0px repeat(4, 52px);
      grid-template-rows: 0px repeat(3, 40px);
      gap: 8px 12px;
      transform: translateX(4px);
    }

    body[data-step="2"] .cell {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      font-size: 18px;
      color: #0f172a;
    }

    body[data-step="2"] .bracket {
      opacity: 1;
    }

    /* Bottom Dimension Badge */
    .dim-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      background: #e0f2fe;
      color: #0369a1;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      opacity: 0;
      transform: translateY(6px);
      transition: all 0.3s ease;
    }

    body[data-step="2"] .dim-badge {
      opacity: 1;
      transform: translateY(0);
    }

    .dim-detail {
      font-weight: 500;
      color: #0284c7;
      font-size: 12px;
    }
  </style>
</head>
<body data-step="0">

  
  <div class="controls">
    <button class="btn-step active" id="step0">1. Data Table</button>
    <button class="btn-step" id="step1">2. Keep Values</button>
    <button class="btn-step" id="step2">3. Matrix [3 × 4]</button>
    <button class="btn-play" id="playToggle" title="Auto play">⏸</button>
  </div>

  
  <div class="stage">
    <div class="matrix-wrapper">
      <div class="bracket bracket-left"></div>

      <div class="grid-table">
        
        <div class="corner-empty"></div>

        
        <div class="header-col" style="grid-column: 2; grid-row: 1;"><span>🏎️</span>Race</div>
        <div class="header-col" style="grid-column: 3; grid-row: 1;"><span>🧩</span>Puzzle</div>
        <div class="header-col" style="grid-column: 4; grid-row: 1;"><span>⚔️</span>Action</div>
        <div class="header-col" style="grid-column: 5; grid-row: 1;"><span>⚽</span>Sport</div>

        
        <div class="header-row" style="grid-column: 1; grid-row: 2;">Alex</div>
        <div class="cell" style="grid-column: 2; grid-row: 2;">85</div>
        <div class="cell" style="grid-column: 3; grid-row: 2;">92</div>
        <div class="cell" style="grid-column: 4; grid-row: 2;">78</div>
        <div class="cell" style="grid-column: 5; grid-row: 2;">90</div>

        
        <div class="header-row" style="grid-column: 1; grid-row: 3;">Jordan</div>
        <div class="cell" style="grid-column: 2; grid-row: 3;">94</div>
        <div class="cell" style="grid-column: 3; grid-row: 3;">88</div>
        <div class="cell" style="grid-column: 4; grid-row: 3;">82</div>
        <div class="cell" style="grid-column: 5; grid-row: 3;">95</div>

        
        <div class="header-row" style="grid-column: 1; grid-row: 4;">Taylor</div>
        <div class="cell" style="grid-column: 2; grid-row: 4;">76</div>
        <div class="cell" style="grid-column: 3; grid-row: 4;">95</div>
        <div class="cell" style="grid-column: 4; grid-row: 4;">89</div>
        <div class="cell" style="grid-column: 5; grid-row: 4;">84</div>
      </div>

      <div class="bracket bracket-right"></div>
    </div>
  </div>

  
  <div class="dim-badge">
    <span>3 × 4 Matrix</span>
    <span class="dim-detail">(3 Rows × 4 Columns)</span>
  </div>

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

    const stepButtons = [
      document.getElementById('step0'),
      document.getElementById('step1'),
      document.getElementById('step2')
    ];
    const playToggle = document.getElementById('playToggle');

    function setStep(index) {
      currentStep = index;
      document.body.setAttribute('data-step', currentStep);
      stepButtons.forEach((btn, i) => {
        btn.classList.toggle('active', i === currentStep);
      });
    }

    stepButtons.forEach((btn, index) => {
      btn.addEventListener('click', () => {
        setStep(index);
        pauseLoop();
      });
    });

    function nextStep() {
      setStep((currentStep + 1) % 3);
    }

    function startLoop() {
      isPlaying = true;
      playToggle.textContent = '⏸';
      clearInterval(timer);
      timer = setInterval(nextStep, 3200);
    }

    function pauseLoop() {
      isPlaying = false;
      playToggle.textContent = '▶';
      clearInterval(timer);
    }

    playToggle.addEventListener('click', () => {
      if (isPlaying) {
        pauseLoop();
      } else {
        nextStep();
        startLoop();
      }
    });

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

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

    /* Top Mode Selector */
    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
    }
    .btn {
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 20px;
      border: 1.5px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .btn.active-row {
      background: #fff7ed;
      color: #ea580c;
      border-color: #f97316;
      box-shadow: 0 2px 6px rgba(249, 115, 22, 0.15);
    }
    .btn.active-col {
      background: #ecfeff;
      color: #0891b2;
      border-color: #06b6d4;
      box-shadow: 0 2px 6px rgba(6, 182, 212, 0.15);
    }
    .btn.active-all {
      background: #f1f5f9;
      color: #1e2945;
      border-color: #94a3b8;
    }

    /* Diagram Stage */
    .stage {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      width: 100%;
      max-width: 480px;
    }

    /* Matrix Display */
    .matrix-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      padding: 10px 4px;
    }

    /* Matrix Brackets */
    .bracket {
      width: 12px;
      height: 156px;
      border: 3px solid #334155;
      flex-shrink: 0;
    }
    .bracket.left {
      border-right: none;
      border-radius: 8px 0 0 8px;
    }
    .bracket.right {
      border-left: none;
      border-radius: 0 8px 8px 0;
    }

    /* 3x3 Grid */
    .matrix-grid {
      display: grid;
      grid-template-columns: repeat(3, 48px);
      grid-template-rows: repeat(3, 44px);
      gap: 6px;
      padding: 0 6px;
      position: relative;
    }

    .cell {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 19px;
      font-weight: 700;
      color: #334155;
      border-radius: 8px;
      z-index: 2;
      transition: color 0.3s ease;
    }

    /* Highlights */
    .row-highlight {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 44px;
      background: rgba(249, 115, 22, 0.18);
      border: 2px solid #f97316;
      border-radius: 8px;
      z-index: 1;
      pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .col-highlight {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 54px;
      width: 48px;
      background: rgba(6, 182, 212, 0.18);
      border: 2px solid #06b6d4;
      border-radius: 8px;
      z-index: 1;
      pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    /* Intersection Blend */
    .highlight-intersect {
      position: absolute;
      top: 0;
      left: 54px;
      width: 48px;
      height: 44px;
      background: rgba(168, 85, 247, 0.22);
      border-radius: 8px;
      z-index: 1;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    /* Labels & Mnemonics */
    .mnemonics {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .mnemonic-card {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1.5px solid transparent;
      transition: all 0.3s ease;
    }

    .mnemonic-card.row-card {
      background: #fff7ed;
      border-color: #fed7aa;
    }
    .mnemonic-card.col-card {
      background: #ecfeff;
      border-color: #a5f3fc;
    }

    .icon-box {
      font-size: 24px;
      line-height: 1;
    }

    .label-group {
      display: flex;
      flex-direction: column;
    }

    .label-title {
      font-size: 15px;
      font-weight: 700;
    }
    .row-card .label-title { color: #c2410c; }
    .col-card .label-title { color: #0e7490; }

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

    /* Dimmed / Inactive States */
    .dimmed {
      opacity: 0.25;
    }
    .hidden {
      opacity: 0;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn active-all" id="btn-all" onclick="setMode('all')">Both</button>
    <button class="btn" id="btn-row" onclick="setMode('row')">Row →</button>
    <button class="btn" id="btn-col" onclick="setMode('col')">Column ↓</button>
  </div>

  
  <div class="stage">
    
    <div class="matrix-wrapper">
      <div class="bracket left"></div>
      
      <div class="matrix-grid">
        
        <div class="row-highlight" id="rowHigh"></div>
        <div class="col-highlight" id="colHigh"></div>
        <div class="highlight-intersect" id="intersectHigh"></div>

        
        <div class="cell">5</div>
        <div class="cell">8</div>
        <div class="cell">2</div>

        
        <div class="cell">9</div>
        <div class="cell">4</div>
        <div class="cell">1</div>

        
        <div class="cell">3</div>
        <div class="cell">7</div>
        <div class="cell">6</div>
      </div>

      <div class="bracket right"></div>
    </div>

    
    <div class="mnemonics">
      
      <div class="mnemonic-card row-card" id="card-row">
        <div class="icon-box">🎟️</div>
        <div class="label-group">
          <span class="label-title">Row</span>
          <span class="label-sub">Horizontal →</span>
        </div>
      </div>

      
      <div class="mnemonic-card col-card" id="card-col">
        <div class="icon-box">🏛️</div>
        <div class="label-group">
          <span class="label-title">Column</span>
          <span class="label-sub">Vertical ↓</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    let currentMode = 'all';
    let autoTimer = null;
    const modes = ['all', 'row', 'col'];
    let stepIndex = 0;

    function setMode(mode, manual = true) {
      if (manual && autoTimer) {
        clearInterval(autoTimer);
        autoTimer = null;
      }
      currentMode = mode;

      const btnAll = document.getElementById('btn-all');
      const btnRow = document.getElementById('btn-row');
      const btnCol = document.getElementById('btn-col');

      const rowHigh = document.getElementById('rowHigh');
      const colHigh = document.getElementById('colHigh');
      const intersectHigh = document.getElementById('intersectHigh');

      const cardRow = document.getElementById('card-row');
      const cardCol = document.getElementById('card-col');

      // Reset buttons
      btnAll.className = 'btn';
      btnRow.className = 'btn';
      btnCol.className = 'btn';

      if (mode === 'all') {
        btnAll.classList.add('active-all');
        rowHigh.className = 'row-highlight';
        colHigh.className = 'col-highlight';
        intersectHigh.className = 'highlight-intersect';
        cardRow.className = 'mnemonic-card row-card';
        cardCol.className = 'mnemonic-card col-card';
      } else if (mode === 'row') {
        btnRow.classList.add('active-row');
        rowHigh.className = 'row-highlight';
        colHigh.className = 'col-highlight hidden';
        intersectHigh.className = 'highlight-intersect hidden';
        cardRow.className = 'mnemonic-card row-card';
        cardCol.className = 'mnemonic-card col-card dimmed';
      } else if (mode === 'col') {
        btnCol.classList.add('active-col');
        rowHigh.className = 'row-highlight hidden';
        colHigh.className = 'col-highlight';
        intersectHigh.className = 'highlight-intersect hidden';
        cardRow.className = 'mnemonic-card row-card dimmed';
        cardCol.className = 'mnemonic-card col-card';
      }
    }

    // Gentle auto-cycle through modes every 3.5s
    autoTimer = setInterval(() => {
      stepIndex = (stepIndex + 1) % modes.length;
      setMode(modes[stepIndex], false);
    }, 3500);
  </script>
</body>
</html>

HSN.VM.C.6

Aligned learning resources

Related diagrams