Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Letters are like secret shapes hidden all around you — on street signs, cereal boxes, and your favorite storybooks!

Let us meet two letters made of tall, straight lines that look just like pointy mountains.

Upper-case **M** has two tall sides with a deep dip in the middle, looking like two mountain peaks side by side.

Upper-case **N** has two tall posts connected by one slanted slide going straight down from the left to the right.

<!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>Letters M to R</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    .diagram-root {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Letter selector tabs */
    .tabs-row {
      display: flex;
      justify-content: space-between;
      gap: 6px;
      width: 100%;
    }

    .letter-btn {
      flex: 1;
      aspect-ratio: 1;
      max-height: 52px;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #475569;
      font-size: 20px;
      font-weight: 700;
      border-radius: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .letter-btn.active {
      border-color: #2563eb;
      background: #eff6ff;
      color: #2563eb;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
    }

    /* Showcase Display */
    .stage-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    }

    .guidelines-box {
      width: 100%;
      height: 190px;
      position: relative;
      background: #f8fafc;
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px dashed #cbd5e1;
    }

    /* Writing ruled lines */
    .line-guide {
      position: absolute;
      left: 0;
      right: 0;
      height: 1px;
    }
    .line-top { top: 22%; border-top: 1.5px solid #94a3b8; }
    .line-mid { top: 50%; border-top: 1.5px dashed #cbd5e1; }
    .line-base { top: 78%; border-top: 1.5px solid #94a3b8; }

    /* SVG Letter Layer */
    .letter-svg {
      width: 150px;
      height: 150px;
      z-index: 2;
    }

    .stroke-path {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 14;
    }

    .stroke-bg {
      stroke: #e2e8f0;
    }

    .stroke-main {
      stroke: #2563eb;
      stroke-dasharray: 400;
      stroke-dashoffset: 0;
      transition: stroke-dashoffset 0.6s ease, stroke 0.3s ease;
    }

    .stroke-accent {
      stroke: #0284c7;
    }

    /* Trait badges */
    .feature-row {
      display: flex;
      gap: 8px;
      margin-top: 12px;
      width: 100%;
      justify-content: center;
    }

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

    .tag-straight {
      background: #f1f5f9;
      color: #334155;
    }

    .tag-curve {
      background: #f0fdf4;
      color: #166534;
    }

    /* Navigation control */
    .nav-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding-top: 4px;
    }

    .nav-btn {
      background: #f1f5f9;
      border: none;
      color: #334155;
      font-size: 15px;
      font-weight: 600;
      padding: 8px 16px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.15s ease;
    }

    .nav-btn:active {
      background: #e2e8f0;
    }

    .step-indicator {
      font-size: 14px;
      font-weight: 700;
      color: #64748b;
    }
  </style>
</head>
<body>

  <div class="diagram-root">
    
    <div class="tabs-row" id="tabs">
      <button class="letter-btn active" data-idx="0">M</button>
      <button class="letter-btn" data-idx="1">N</button>
      <button class="letter-btn" data-idx="2">O</button>
      <button class="letter-btn" data-idx="3">P</button>
      <button class="letter-btn" data-idx="4">Q</button>
      <button class="letter-btn" data-idx="5">R</button>
    </div>

    
    <div class="stage-card">
      <div class="guidelines-box">
        <div class="line-guide line-top"></div>
        <div class="line-guide line-mid"></div>
        <div class="line-guide line-base"></div>

        <svg class="letter-svg" viewBox="0 0 100 100" id="letterDisplay">
          
        </svg>
      </div>

      <div class="feature-row" id="badgeContainer">
        
      </div>
    </div>

    
    <div class="nav-bar">
      <button class="nav-btn" id="prevBtn">← Back</button>
      <span class="step-indicator" id="counter">M (1 / 6)</span>
      <button class="nav-btn" id="nextBtn">Next →</button>
    </div>
  </div>

  <script>
    const letters = [
      {
        char: 'M',
        desc: 'Straight Lines',
        type: 'straight',
        icon: '📏',
        paths: [
          'M 18 80 L 18 20 L 50 56 L 82 20 L 82 80'
        ]
      },
      {
        char: 'N',
        desc: 'Posts & Slide',
        type: 'straight',
        icon: '📏',
        paths: [
          'M 24 80 L 24 20 L 76 80 L 76 20'
        ]
      },
      {
        char: 'O',
        desc: 'Round Loop',
        type: 'curve',
        icon: '🔄',
        paths: [
          'M 50 20 C 72 20 82 34 82 50 C 82 66 72 80 50 80 C 28 80 18 66 18 50 C 18 34 28 20 50 20 Z'
        ]
      },
      {
        char: 'P',
        desc: 'Post + Top Loop',
        type: 'mixed',
        icon: '🔄',
        paths: [
          'M 26 80 L 26 20 L 54 20 C 72 20 76 31 76 43 C 76 55 72 58 54 58 L 26 58'
        ]
      },
      {
        char: 'Q',
        desc: 'Loop + Tail',
        type: 'mixed',
        icon: '🔄',
        paths: [
          'M 50 20 C 72 20 82 34 82 50 C 82 66 72 80 50 80 C 28 80 18 66 18 50 C 18 34 28 20 50 20 Z',
          'M 54 62 L 78 84'
        ]
      },
      {
        char: 'R',
        desc: 'Post + Loop + Leg',
        type: 'mixed',
        icon: '🔄',
        paths: [
          'M 26 80 L 26 20 L 54 20 C 72 20 76 30 76 42 C 76 54 72 56 54 56 L 26 56',
          'M 52 56 L 76 80'
        ]
      }
    ];

    let currentIndex = 0;

    const svg = document.getElementById('letterDisplay');
    const badgeContainer = document.getElementById('badgeContainer');
    const counter = document.getElementById('counter');
    const tabs = document.querySelectorAll('.letter-btn');

    function renderLetter(idx) {
      currentIndex = idx;
      const data = letters[idx];

      // Update active tab
      tabs.forEach((tab, i) => {
        tab.classList.toggle('active', i === idx);
      });

      // Update counter
      counter.textContent = `${data.char} (${idx + 1} / 6)`;

      // Render SVG paths with animated strokes
      let pathMarkup = '';
      data.paths.forEach((p, i) => {
        pathMarkup += `
          <path class="stroke-path stroke-bg" d="${p}"></path>
          <path class="stroke-path stroke-main ${i > 0 ? 'stroke-accent' : ''}" d="${p}"></path>
        `;
      });
      svg.innerHTML = pathMarkup;

      // Animate stroke draw
      const mains = svg.querySelectorAll('.stroke-main');
      mains.forEach((p) => {
        const length = p.getTotalLength();
        p.style.strokeDasharray = length;
        p.style.strokeDashoffset = length;
        p.getBoundingClientRect(); // force reflow
        p.style.strokeDashoffset = '0';
      });

      // Update descriptive tags
      badgeContainer.innerHTML = `
        <span class="tag-badge ${data.type === 'straight' ? 'tag-straight' : 'tag-curve'}">
          ${data.icon} ${data.desc}
        </span>
      `;
    }

    // Tab clicks
    tabs.forEach((tab) => {
      tab.addEventListener('click', () => {
        renderLetter(parseInt(tab.dataset.idx, 10));
      });
    });

    // Navigation buttons
    document.getElementById('prevBtn').addEventListener('click', () => {
      const prev = (currentIndex - 1 + letters.length) % letters.length;
      renderLetter(prev);
    });

    document.getElementById('nextBtn').addEventListener('click', () => {
      const next = (currentIndex + 1) % letters.length;
      renderLetter(next);
    });

    // Initial render
    renderLetter(0);
  </script>
</body>
</html>

What happens when our letters stop using sharp points and start making big, round curves?

Upper-case **O** is one smooth, closed loop that looks just like a round donut or a giant full moon.

Upper-case **P** starts with a straight standing stick and adds a round balloon curve right at the top.

<!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, sans-serif;
    }
    body {
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }
    .main-stage {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    .guideline-board {
      width: 100%;
      aspect-ratio: 16 / 10;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .line-guide {
      stroke: #e2e8f0;
      stroke-width: 2;
    }
    .line-mid {
      stroke: #94a3b8;
      stroke-width: 2;
      stroke-dasharray: 6 6;
    }
    .stroke-part {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke 0.3s ease, opacity 0.3s ease, stroke-width 0.3s ease;
    }
    .stroke-stick {
      stroke-width: 14;
      stroke: #7c3aed;
    }
    .stroke-curve {
      stroke-width: 14;
      stroke: #22b7ff;
    }
    .stroke-inactive {
      opacity: 0.12;
      stroke: #94a3b8;
    }
    .badge-label {
      font-size: 14px;
      font-weight: 700;
      fill: #ffffff;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      justify-content: center;
    }
    .btn-step {
      flex: 1;
      max-width: 120px;
      padding: 10px 8px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 12px;
      border: none;
      cursor: pointer;
      background: #f1f5f9;
      color: #64748b;
      box-shadow: 0 0 0 1px #e2e8f0;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
      text-align: center;
    }
    .btn-step.active {
      background: #7c3aed;
      color: #ffffff;
      box-shadow: 0 4px 10px rgba(124, 58, 237, 0.25);
    }
    .btn-step:focus-visible {
      outline: 2px solid #7c3aed;
    }
  </style>
</head>
<body>
  <div class="main-stage">
    <div class="guideline-board">
      <svg viewBox="0 0 320 200">
        
        <line x1="20" y1="35" x2="300" y2="35" class="line-guide" />
        <line x1="20" y1="100" x2="300" y2="100" class="line-mid" />
        <line x1="20" y1="165" x2="300" y2="165" class="line-guide" />

        
        
        <line id="stick" x1="125" y1="35" x2="125" y2="165" class="stroke-part stroke-stick" />

        
        <path id="curve" d="M 125 35 C 195 35, 195 100, 125 100" class="stroke-part stroke-curve" />

        
        <g id="badge-1" opacity="1" style="transition: opacity 0.3s ease;">
          <circle cx="102" cy="100" r="13" fill="#7c3aed" />
          <text x="102" y="100" class="badge-label">1</text>
        </g>

        <g id="badge-2" opacity="1" style="transition: opacity 0.3s ease;">
          <circle cx="188" cy="68" r="13" fill="#22b7ff" />
          <text x="188" y="68" class="badge-label">2</text>
        </g>
      </svg>
    </div>

    <div class="controls">
      <button class="btn-step" id="btn-1">1. Stick</button>
      <button class="btn-step" id="btn-2">2. Curve</button>
      <button class="btn-step active" id="btn-3">Letter P</button>
    </div>
  </div>

  <script>
    const stick = document.getElementById('stick');
    const curve = document.getElementById('curve');
    const badge1 = document.getElementById('badge-1');
    const badge2 = document.getElementById('badge-2');
    const buttons = [
      document.getElementById('btn-1'),
      document.getElementById('btn-2'),
      document.getElementById('btn-3')
    ];

    let currentStep = 2;
    let timer = null;

    function setStep(index) {
      currentStep = index;
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      if (index === 0) {
        // Step 1: Stick only
        stick.className.baseVal = 'stroke-part stroke-stick';
        curve.className.baseVal = 'stroke-part stroke-inactive';
        badge1.setAttribute('opacity', '1');
        badge2.setAttribute('opacity', '0');
      } else if (index === 1) {
        // Step 2: Curve only
        stick.className.baseVal = 'stroke-part stroke-inactive';
        curve.className.baseVal = 'stroke-part stroke-curve';
        badge1.setAttribute('opacity', '0');
        badge2.setAttribute('opacity', '1');
      } else {
        // Step 3: Complete P
        stick.className.baseVal = 'stroke-part stroke-stick';
        curve.className.baseVal = 'stroke-part stroke-curve';
        badge1.setAttribute('opacity', '1');
        badge2.setAttribute('opacity', '1');
      }
    }

    buttons.forEach((btn, i) => {
      btn.addEventListener('click', () => {
        clearInterval(timer);
        setStep(i);
        startAutoPlay();
      });
    });

    function startAutoPlay() {
      timer = setInterval(() => {
        currentStep = (currentStep + 1) % 3;
        setStep(currentStep);
      }, 3200);
    }

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

Can you guess what happens if we take a circle and a balloon shape, but give each of them a little extra kick?

Upper-case **Q** is a big round circle with a cute little diagonal line sticking out at the bottom like a kickstand.

Upper-case **R** begins just like the letter P with a top bump, but it adds a strong walking leg kicking straight out!

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

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

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

    /* Letter selector tabs */
    .tab-bar {
      display: flex;
      justify-content: space-between;
      width: 100%;
      gap: 6px;
    }

    .tab-btn {
      flex: 1;
      aspect-ratio: 1 / 1;
      max-height: 48px;
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 12px;
      font-size: 18px;
      font-weight: 700;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    }

    .tab-btn.active {
      background: #eefcf4;
      border-color: #22c55e;
      color: #15803d;
      box-shadow: 0 4px 10px rgba(34, 197, 94, 0.18);
    }

    /* Card viewport */
    .card-viewport {
      width: 100%;
      height: 230px;
      position: relative;
      background: #ffffff;
      border: 2px solid #eef0f3;
      border-radius: 20px;
      box-shadow: 0 8px 24px rgba(30, 41, 69, 0.05);
      overflow: hidden;
    }

    .letter-slide {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
      padding: 16px;
      gap: 8px;
    }

    .letter-slide.active {
      opacity: 1;
      pointer-events: auto;
    }

    .letter-display {
      font-size: 88px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -2px;
      color: #1e2945;
      position: relative;
      display: inline-block;
    }

    /* Accent color strokes / parts */
    .highlight-pink {
      color: #ec4899;
    }

    .highlight-green {
      color: #22c55e;
    }

    .visual-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      background: #f8f9fa;
      border: 1px solid #e5e7eb;
      border-radius: 20px;
      font-size: 15px;
      font-weight: 600;
      color: #4b5563;
    }

    /* Controls bar */
    .nav-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
    }

    .nav-btn {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: #1e2945;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      transition: background-color 0.2s, box-shadow 0.2s;
    }

    .nav-btn:active {
      background: #f3f4f6;
    }

    .play-btn {
      width: auto;
      padding: 0 16px;
      border-radius: 20px;
      gap: 6px;
      font-size: 14px;
      font-weight: 600;
    }
  </style>
</head>
<body>

  <div class="main-stage">
    
    <div class="tab-bar">
      <button class="tab-btn active" onclick="goTo(0)">M</button>
      <button class="tab-btn" onclick="goTo(1)">N</button>
      <button class="tab-btn" onclick="goTo(2)">O</button>
      <button class="tab-btn" onclick="goTo(3)">P</button>
      <button class="tab-btn" onclick="goTo(4)">Q</button>
      <button class="tab-btn" onclick="goTo(5)">R</button>
    </div>

    
    <div class="card-viewport">
      
      <div class="letter-slide active" id="slide-0">
        <div class="letter-display">M</div>
        <div class="visual-pill">⛰️ Two Peaks</div>
      </div>

      
      <div class="letter-slide" id="slide-1">
        <div class="letter-display">N</div>
        <div class="visual-pill">⚡ Down & Up</div>
      </div>

      
      <div class="letter-slide" id="slide-2">
        <div class="letter-display"><span class="highlight-green">O</span></div>
        <div class="visual-pill">⭕ Full Loop</div>
      </div>

      
      <div class="letter-slide" id="slide-3">
        <div class="letter-display">P</div>
        <div class="visual-pill">🎈 Top Bump</div>
      </div>

      
      <div class="letter-slide" id="slide-4">
        <div class="letter-display">Q</div>
        <div class="visual-pill">🔍 Loop + Tail</div>
      </div>

      
      <div class="letter-slide" id="slide-5">
        <div class="letter-display"><span class="highlight-pink">R</span></div>
        <div class="visual-pill">🦵 Bump + Leg</div>
      </div>
    </div>

    
    <div class="nav-bar">
      <button class="nav-btn" onclick="prevSlide()" aria-label="Previous">◀</button>
      <button class="nav-btn play-btn" id="playBtn" onclick="togglePlay()">
        <span id="playIcon">⏸</span> Auto
      </button>
      <button class="nav-btn" onclick="nextSlide()" aria-label="Next">▶</button>
    </div>
  </div>

  <script>
    let currentIndex = 0;
    const total = 6;
    let isPlaying = true;
    let timer = null;

    const tabs = document.querySelectorAll('.tab-btn');
    const slides = document.querySelectorAll('.letter-slide');
    const playIcon = document.getElementById('playIcon');

    function showSlide(idx) {
      tabs.forEach((tab, i) => tab.classList.toggle('active', i === idx));
      slides.forEach((slide, i) => slide.classList.toggle('active', i === idx));
      currentIndex = idx;
    }

    function goTo(idx) {
      pause();
      showSlide(idx);
    }

    function nextSlide() {
      pause();
      showSlide((currentIndex + 1) % total);
    }

    function prevSlide() {
      pause();
      showSlide((currentIndex - 1 + total) % total);
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(() => {
        showSlide((currentIndex + 1) % total);
      }, 3000);
    }

    function pause() {
      isPlaying = false;
      if (timer) clearInterval(timer);
      playIcon.textContent = '▶';
    }

    function play() {
      isPlaying = true;
      playIcon.textContent = '⏸';
      startTimer();
    }

    function togglePlay() {
      if (isPlaying) {
        pause();
      } else {
        play();
      }
    }

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

Now that you know all six letters, can you name them in a line from start to finish?

Say their names out loud as we read across the line: **M, N, O, P, Q, and R**!

<!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>Upper-Case Letters M to R</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    body {
      background-color: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px;
    }

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

    .tab-btn {
      flex: 1;
      min-width: 42px;
      height: 48px;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      background: #ffffff;
      font-size: 20px;
      font-weight: 800;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    }

    .tab-btn.active {
      border-color: #22b7ff;
      background: #eaf8ff;
      color: #0077cc;
      box-shadow: 0 4px 10px rgba(34, 183, 255, 0.25);
    }

    .card-stage {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 240px;
      margin: 14px 0;
    }

    .letter-card {
      position: absolute;
      inset: 0;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 20px;
      padding: 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      box-shadow: 0 6px 16px rgba(30, 41, 69, 0.05);
    }

    .letter-card.active {
      opacity: 1;
      pointer-events: auto;
    }

    .letter-display {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-right: 2px dashed #f1f5f9;
      padding-right: 12px;
    }

    .big-glyph {
      font-size: 88px;
      line-height: 1;
      font-weight: 900;
      color: #0088ff;
      letter-spacing: -2px;
    }

    .badge {
      margin-top: 6px;
      font-size: 13px;
      font-weight: 700;
      color: #0066aa;
      background: #e0f4ff;
      padding: 4px 10px;
      border-radius: 20px;
    }

    .cue-display {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding-left: 12px;
    }

    .cue-emoji {
      font-size: 58px;
      line-height: 1;
    }

    .cue-label {
      font-size: 20px;
      font-weight: 800;
      color: #1e2945;
    }

    .sound-btn {
      margin-top: 4px;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.2s, border-color 0.2s;
    }

    .sound-btn:active {
      background: #e2e8f0;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 480px;
    }

    .ctrl-btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      color: #334155;
      border-radius: 10px;
      height: 38px;
      padding: 0 14px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: border-color 0.2s, background-color 0.2s;
    }

    .ctrl-btn:hover {
      border-color: #cbd5e1;
      background: #f8fafc;
    }

    .play-btn {
      border-color: #22b7ff;
      color: #0077cc;
      background: #f0faff;
    }
  </style>
</head>
<body>

  <div class="letter-tabs" id="tabBar">
    <button class="tab-btn active" data-idx="0">M</button>
    <button class="tab-btn" data-idx="1">N</button>
    <button class="tab-btn" data-idx="2">O</button>
    <button class="tab-btn" data-idx="3">P</button>
    <button class="tab-btn" data-idx="4">Q</button>
    <button class="tab-btn" data-idx="5">R</button>
  </div>

  <div class="card-stage" id="stage">
    
    <div class="letter-card active" data-idx="0">
      <div class="letter-display">
        <div class="big-glyph">M</div>
        <span class="badge">2 Tall Peaks</span>
      </div>
      <div class="cue-display">
        <span class="cue-emoji">🌙</span>
        <span class="cue-label">Moon</span>
        <button class="sound-btn" onclick="say('M for Moon')">🔊 Hear "M"</button>
      </div>
    </div>

    
    <div class="letter-card" data-idx="1">
      <div class="letter-display">
        <div class="big-glyph">N</div>
        <span class="badge">1 Slant Line</span>
      </div>
      <div class="cue-display">
        <span class="cue-emoji">🥜</span>
        <span class="cue-label">Nut</span>
        <button class="sound-btn" onclick="say('N for Nut')">🔊 Hear "N"</button>
      </div>
    </div>

    
    <div class="letter-card" data-idx="2">
      <div class="letter-display">
        <div class="big-glyph">O</div>
        <span class="badge">1 Round Loop</span>
      </div>
      <div class="cue-display">
        <span class="cue-emoji">🦉</span>
        <span class="cue-label">Owl</span>
        <button class="sound-btn" onclick="say('O for Owl')">🔊 Hear "O"</button>
      </div>
    </div>

    
    <div class="letter-card" data-idx="3">
      <div class="letter-display">
        <div class="big-glyph">P</div>
        <span class="badge">Top Loop</span>
      </div>
      <div class="cue-display">
        <span class="cue-emoji">✏️</span>
        <span class="cue-label">Pen</span>
        <button class="sound-btn" onclick="say('P for Pen')">🔊 Hear "P"</button>
      </div>
    </div>

    
    <div class="letter-card" data-idx="4">
      <div class="letter-display">
        <div class="big-glyph">Q</div>
        <span class="badge">Circle + Tail</span>
      </div>
      <div class="cue-display">
        <span class="cue-emoji">👑</span>
        <span class="cue-label">Queen</span>
        <button class="sound-btn" onclick="say('Q for Queen')">🔊 Hear "Q"</button>
      </div>
    </div>

    
    <div class="letter-card" data-idx="5">
      <div class="letter-display">
        <div class="big-glyph">R</div>
        <span class="badge">Loop + Leg</span>
      </div>
      <div class="cue-display">
        <span class="cue-emoji">🚀</span>
        <span class="cue-label">Rocket</span>
        <button class="sound-btn" onclick="say('R for Rocket')">🔊 Hear "R"</button>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="ctrl-btn" id="prevBtn">← Prev</button>
    <button class="ctrl-btn play-btn" id="autoBtn">▶ Auto</button>
    <button class="ctrl-btn" id="nextBtn">Next →</button>
  </div>

  <script>
    let currentIndex = 0;
    const total = 6;
    let timer = null;

    const tabs = document.querySelectorAll('.tab-btn');
    const cards = document.querySelectorAll('.letter-card');
    const autoBtn = document.getElementById('autoBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    function showIndex(idx) {
      currentIndex = (idx + total) % total;
      tabs.forEach((tab, i) => {
        tab.classList.toggle('active', i === currentIndex);
      });
      cards.forEach((card, i) => {
        card.classList.toggle('active', i === currentIndex);
      });
    }

    function say(text) {
      if ('speechSynthesis' in window) {
        window.speechSynthesis.cancel();
        const u = new SpeechSynthesisUtterance(text);
        u.rate = 0.85;
        u.pitch = 1.05;
        window.speechSynthesis.speak(u);
      }
    }

    tabs.forEach((tab) => {
      tab.addEventListener('click', () => {
        stopAuto();
        showIndex(parseInt(tab.getAttribute('data-idx'), 10));
      });
    });

    prevBtn.addEventListener('click', () => {
      stopAuto();
      showIndex(currentIndex - 1);
    });

    nextBtn.addEventListener('click', () => {
      stopAuto();
      showIndex(currentIndex + 1);
    });

    function toggleAuto() {
      if (timer) {
        stopAuto();
      } else {
        autoBtn.textContent = '⏸ Pause';
        timer = setInterval(() => {
          showIndex(currentIndex + 1);
        }, 3000);
      }
    }

    function stopAuto() {
      if (timer) {
        clearInterval(timer);
        timer = null;
        autoBtn.textContent = '▶ Auto';
      }
    }

    autoBtn.addEventListener('click', toggleAuto);
  </script>
</body>
</html>

Look around your room or at the cover of a nearby book right now — which of these six letters can you spot first?

Recognising Upper-Case Letters M to R. Name and recognise the upper-case letters M, N, O, P, Q and R.

Choose the Uppercase Letter That Matches

Recognising Letters of the Alphabet: Upper and Lower Case

Alphabet Letter Recognition: Letters M through R

At the Foundation level (Australian Curriculum v9 AC9EFLY11), instruction should integrate multisensory tracing (e.g., sand trays, sky writing) with explicit visual discrimination drills. Focus on contrastive pairs (M vs N, O vs Q, P vs R) to prevent visual-spatial cognitive traps, ensuring students achieve rapid naming automaticity before moving to mixed-case matching.

Recognising Upper-Case Letters M to R

Letters M and N

Letters O and P

Letters Q and R