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

Did you know that every time you eat a taco, pizza, or sushi, you are speaking words from around the world?

When tasty foods travel from one country to another, people keep their original names. These are called **borrowed words**.

<!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: #f8f9fa;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }

    .nav-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 20px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .tab-btn {
      background: #ffffff;
      border: 2px solid transparent;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
      padding: 8px 16px;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      color: #1e2945;
      transition: all 0.25s ease;
    }

    .tab-btn.active {
      background: #ffffff;
      box-shadow: 0 0 0 2px #22b7ff, 0 4px 10px rgba(34,183,255,0.25);
      color: #0284c7;
    }

    .stage-container {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border-radius: 20px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.06);
      padding: 24px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .travel-flow {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      padding: 0 4px;
    }

    .country-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      z-index: 2;
      width: 100px;
    }

    .flag-bubble {
      width: 60px;
      height: 60px;
      background: #f1f5f9;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
    }

    .node-label {
      font-size: 14px;
      font-weight: 700;
      color: #64748b;
    }

    .path-connector {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      margin: 0 8px;
    }

    .dotted-line {
      width: 100%;
      height: 3px;
      border-top: 3px dashed #cbd5e1;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
    }

    .food-traveler {
      font-size: 36px;
      z-index: 2;
      background: #ffffff;
      padding: 4px;
      border-radius: 50%;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      animation: floatTravel 2.4s ease-in-out infinite;
    }

    @keyframes floatTravel {
      0% { transform: translateX(-24px); }
      50% { transform: translateX(24px); }
      100% { transform: translateX(-24px); }
    }

    .word-bridge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      padding-top: 8px;
      border-top: 1px solid #f1f5f9;
    }

    .word-pill {
      background: #eff6ff;
      border-radius: 12px;
      padding: 10px 18px;
      font-size: 20px;
      font-weight: 800;
      color: #0284c7;
      letter-spacing: 0.5px;
    }

    .equal-sign {
      font-size: 24px;
      font-weight: 800;
      color: #10b981;
    }
  </style>
</head>
<body>

  <div class="nav-tabs" id="tabs">
    <button class="tab-btn active" data-idx="0">🍕 Pizza</button>
    <button class="tab-btn" data-idx="1">🌮 Taco</button>
    <button class="tab-btn" data-idx="2">🥐 Croissant</button>
    <button class="tab-btn" data-idx="3">🥨 Pretzel</button>
  </div>

  <div class="stage-container">
    <div class="travel-flow">
      <div class="country-node">
        <div class="flag-bubble" id="originFlag">🇮🇹</div>
        <div class="node-label" id="originName">Italy</div>
      </div>

      <div class="path-connector">
        <div class="dotted-line"></div>
        <div class="food-traveler" id="foodEmoji">🍕</div>
      </div>

      <div class="country-node">
        <div class="flag-bubble" id="destFlag">🇺🇸</div>
        <div class="node-label">English</div>
      </div>
    </div>

    <div class="word-bridge">
      <div class="word-pill" id="originWord">Pizza</div>
      <div class="equal-sign">➜</div>
      <div class="word-pill" id="destWord">Pizza</div>
    </div>
  </div>

  <script>
    const foods = [
      { food: '🍕', word: 'Pizza', origin: 'Italy', flag: '🇮🇹' },
      { food: '🌮', word: 'Taco', origin: 'Mexico', flag: '🇲🇽' },
      { food: '🥐', word: 'Croissant', origin: 'France', flag: '🇫🇷' },
      { food: '🥨', word: 'Pretzel', origin: 'Germany', flag: '🇩🇪' }
    ];

    let current = 0;
    const buttons = document.querySelectorAll('.tab-btn');
    const originFlag = document.getElementById('originFlag');
    const originName = document.getElementById('originName');
    const foodEmoji = document.getElementById('foodEmoji');
    const originWord = document.getElementById('originWord');
    const destWord = document.getElementById('destWord');

    function updateView(idx) {
      current = idx;
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });

      const item = foods[idx];
      originFlag.textContent = item.flag;
      originName.textContent = item.origin;
      foodEmoji.textContent = item.food;
      originWord.textContent = item.word;
      destWord.textContent = item.word;
    }

    buttons.forEach((btn, i) => {
      btn.addEventListener('click', () => {
        updateView(i);
        resetTimer();
      });
    });

    let autoTimer = setInterval(nextSlide, 3500);

    function nextSlide() {
      const nextIdx = (current + 1) % foods.length;
      updateView(nextIdx);
    }

    function resetTimer() {
      clearInterval(autoTimer);
      autoTimer = setInterval(nextSlide, 3500);
    }
  </script>
</body>
</html>

Where did some of your favorite cheesy foods get their names? Let's take a trip to Europe!

In Italy, people speak the Italian language and gave the world famous words like **pizza** and **pasta**.

The word **spaghetti** comes from the Italian word *spaghetto*, which means "thin string" or "little twine" because of the long noodle shape.

<!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 {
      background-color: #fffbeb;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
      user-select: none;
      -webkit-user-select: none;
    }

    .nav-bar {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .nav-btn {
      background: #ffffff;
      border: 2px solid #fde68a;
      border-radius: 999px;
      padding: 8px 16px;
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
      transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
    }

    .nav-btn.active {
      background: #15803d;
      border-color: #15803d;
      color: #ffffff;
      box-shadow: 0 4px 10px rgba(21, 128, 61, 0.25);
    }

    .stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 220px;
    }

    .food-card {
      position: absolute;
      inset: 0;
      background: #ffffff;
      border-radius: 14px;
      border: 2px solid #fef3c7;
      box-shadow: 0 4px 14px rgba(0,0,0,0.05);
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      padding: 16px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }

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

    .item-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      flex: 1;
    }

    .icon-box {
      font-size: 54px;
      line-height: 1;
      margin-bottom: 8px;
    }

    .word-title {
      font-size: 18px;
      font-weight: 800;
      color: #1e2945;
      margin-bottom: 2px;
    }

    .sub-tag {
      font-size: 13px;
      font-weight: 600;
      color: #b91c1c;
      background: #fee2e2;
      border-radius: 6px;
      padding: 2px 8px;
    }

    .arrow-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 8px;
      color: #d97706;
      font-size: 24px;
      font-weight: 800;
    }

    .origin-tag {
      font-size: 11px;
      font-weight: 700;
      color: #92400e;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 4px;
    }
  </style>
</head>
<body>

  <div class="nav-bar">
    <button class="nav-btn active" id="btn-0">🍝 Spaghetti</button>
    <button class="nav-btn" id="btn-1">🥨 Pretzel</button>
    <button class="nav-btn" id="btn-2">🫓 Tortilla</button>
  </div>

  <div class="stage">
    
    <div class="food-card active" id="card-0">
      <div class="item-col">
        <div class="icon-box">🧵</div>
        <div class="word-title">Spaghetto</div>
        <div class="sub-tag">Thin String</div>
      </div>

      <div class="arrow-box">
        <span>➔</span>
        <span class="origin-tag">Italy 🇮🇹</span>
      </div>

      <div class="item-col">
        <div class="icon-box">🍝</div>
        <div class="word-title">Spaghetti</div>
        <div class="sub-tag">Long Pasta</div>
      </div>
    </div>

    
    <div class="food-card" id="card-1">
      <div class="item-col">
        <div class="icon-box">🤲</div>
        <div class="word-title">Bracellus</div>
        <div class="sub-tag">Little Arms</div>
      </div>

      <div class="arrow-box">
        <span>➔</span>
        <span class="origin-tag">Germany 🇩🇪</span>
      </div>

      <div class="item-col">
        <div class="icon-box">🥨</div>
        <div class="word-title">Pretzel</div>
        <div class="sub-tag">Folded Snack</div>
      </div>
    </div>

    
    <div class="food-card" id="card-2">
      <div class="item-col">
        <div class="icon-box">🎂</div>
        <div class="word-title">Torta</div>
        <div class="sub-tag">Little Cake</div>
      </div>

      <div class="arrow-box">
        <span>➔</span>
        <span class="origin-tag">Spain / Mexico 🇲🇽</span>
      </div>

      <div class="item-col">
        <div class="icon-box">🫓</div>
        <div class="word-title">Tortilla</div>
        <div class="sub-tag">Flat Bread</div>
      </div>
    </div>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    let currentIndex = 0;
    const cards = [$('#card-0'), $('#card-1'), $('#card-2')];
    const btns = [$('#btn-0'), $('#btn-1'), $('#btn-2')];

    function showItem(index) {
      currentIndex = index;
      cards.forEach((card, i) => {
        if (card) card.classList.toggle('active', i === index);
      });
      btns.forEach((btn, i) => {
        if (btn) btn.classList.toggle('active', i === index);
      });
    }

    btns.forEach((btn, i) => {
      if (btn) {
        onTap(btn, () => showItem(i));
      }
    });
  </script>
</body>
</html>

What delicious words come from Spanish and Latin American cultures?

Many Spanish and **Latin American** culinary words are used worldwide, such as **taco** (a folded tortilla) and **tortilla** (a thin flatbread).

Other popular words include **salsa** (which means "sauce") and **guacamole** (a creamy avocado dip).

<!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;
      -webkit-tap-highlight-color: transparent;
    }

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

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

    .tab-btn {
      flex: 1;
      padding: 8px 4px;
      font-size: 14px;
      font-weight: 700;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      color: #64748b;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .tab-btn .tab-emoji {
      font-size: 20px;
    }

    .tab-btn.active {
      background: #ffffff;
      border-color: #16a34a;
      color: #16a34a;
      box-shadow: 0 4px 10px rgba(22, 163, 74, 0.15);
    }

    .stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 240px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .food-card {
      position: absolute;
      inset: 0;
      background: #ffffff;
      border-radius: 14px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
      border: 1px solid #f1f5f9;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      padding: 14px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }

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

    .food-header {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .food-icon {
      font-size: 42px;
      line-height: 1;
    }

    .food-title {
      font-size: 26px;
      font-weight: 800;
      color: #0f172a;
    }

    .flow-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
    }

    .origin-box {
      background: #f0fdf4;
      border: 1.5px solid #86efac;
      border-radius: 12px;
      padding: 8px 14px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .flag {
      font-size: 28px;
      line-height: 1;
    }

    .origin-text {
      display: flex;
      flex-direction: column;
      text-align: left;
    }

    .lang-name {
      font-size: 15px;
      font-weight: 800;
      color: #166534;
    }

    .country-name {
      font-size: 12px;
      font-weight: 600;
      color: #4ade80;
      color: #15803d;
    }

    .arrow {
      font-size: 20px;
      color: #16a34a;
      font-weight: 900;
    }

    .dest-box {
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      border-radius: 12px;
      padding: 8px 14px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .dest-icon {
      font-size: 24px;
    }

    .dest-text {
      font-size: 15px;
      font-weight: 800;
      color: #334155;
    }

    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
      transition: background-color 0.2s ease;
    }

    .ctrl-btn:active {
      background: #f1f5f9;
    }

    .dots {
      display: flex;
      gap: 6px;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background-color 0.2s ease, width 0.2s ease;
    }

    .dot.active {
      background: #16a34a;
      width: 20px;
      border-radius: 4px;
    }
  </style>
</head>
<body>

  <div class="nav-tabs">
    <button class="tab-btn active" onclick="setIndex(0)">
      <span class="tab-emoji">🌮</span>
      <span>Taco</span>
    </button>
    <button class="tab-btn" onclick="setIndex(1)">
      <span class="tab-emoji">🍕</span>
      <span>Pizza</span>
    </button>
    <button class="tab-btn" onclick="setIndex(2)">
      <span class="tab-emoji">🍣</span>
      <span>Sushi</span>
    </button>
    <button class="tab-btn" onclick="setIndex(3)">
      <span class="tab-emoji">🥨</span>
      <span>Pretzel</span>
    </button>
  </div>

  <div class="stage">
    
    <div class="food-card active" id="card-0">
      <div class="food-header">
        <span class="food-icon">🌮</span>
        <span class="food-title">Taco</span>
      </div>
      <div class="flow-row">
        <div class="origin-box">
          <span class="flag">🇲🇽</span>
          <div class="origin-text">
            <span class="lang-name">Spanish</span>
            <span class="country-name">Mexico</span>
          </div>
        </div>
        <span class="arrow">➔</span>
        <div class="dest-box">
          <span class="dest-icon">💬</span>
          <span class="dest-text">English</span>
        </div>
      </div>
    </div>

    
    <div class="food-card" id="card-1">
      <div class="food-header">
        <span class="food-icon">🍕</span>
        <span class="food-title">Pizza</span>
      </div>
      <div class="flow-row">
        <div class="origin-box">
          <span class="flag">🇮🇹</span>
          <div class="origin-text">
            <span class="lang-name">Italian</span>
            <span class="country-name">Italy</span>
          </div>
        </div>
        <span class="arrow">➔</span>
        <div class="dest-box">
          <span class="dest-icon">💬</span>
          <span class="dest-text">English</span>
        </div>
      </div>
    </div>

    
    <div class="food-card" id="card-2">
      <div class="food-header">
        <span class="food-icon">🍣</span>
        <span class="food-title">Sushi</span>
      </div>
      <div class="flow-row">
        <div class="origin-box">
          <span class="flag">🇯🇵</span>
          <div class="origin-text">
            <span class="lang-name">Japanese</span>
            <span class="country-name">Japan</span>
          </div>
        </div>
        <span class="arrow">➔</span>
        <div class="dest-box">
          <span class="dest-icon">💬</span>
          <span class="dest-text">English</span>
        </div>
      </div>
    </div>

    
    <div class="food-card" id="card-3">
      <div class="food-header">
        <span class="food-icon">🥨</span>
        <span class="food-title">Pretzel</span>
      </div>
      <div class="flow-row">
        <div class="origin-box">
          <span class="flag">🇩🇪</span>
          <div class="origin-text">
            <span class="lang-name">German</span>
            <span class="country-name">Germany</span>
          </div>
        </div>
        <span class="arrow">➔</span>
        <div class="dest-box">
          <span class="dest-icon">💬</span>
          <span class="dest-text">English</span>
        </div>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="ctrl-btn" onclick="togglePlay()" id="play-btn">
      <span id="play-icon">⏸</span>
      <span id="play-text">Pause</span>
    </button>
    <div class="dots">
      <span class="dot active" onclick="setIndex(0)"></span>
      <span class="dot" onclick="setIndex(1)"></span>
      <span class="dot" onclick="setIndex(2)"></span>
      <span class="dot" onclick="setIndex(3)"></span>
    </div>
  </div>

  <script>
    let currentIndex = 0;
    const totalItems = 4;
    let isPlaying = true;
    let timer = null;

    function render() {
      for (let i = 0; i < totalItems; i++) {
        const card = document.getElementById(`card-${i}`);
        const tab = document.querySelectorAll('.tab-btn')[i];
        const dot = document.querySelectorAll('.dot')[i];

        if (i === currentIndex) {
          card.classList.add('active');
          tab.classList.add('active');
          dot.classList.add('active');
        } else {
          card.classList.remove('active');
          tab.classList.remove('active');
          dot.classList.remove('active');
        }
      }
    }

    function setIndex(index) {
      currentIndex = index;
      render();
      if (isPlaying) {
        resetTimer();
      }
    }

    function nextStep() {
      currentIndex = (currentIndex + 1) % totalItems;
      render();
    }

    function resetTimer() {
      clearInterval(timer);
      timer = setInterval(nextStep, 3200);
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      const icon = document.getElementById('play-icon');
      const text = document.getElementById('play-text');

      if (isPlaying) {
        icon.textContent = '⏸';
        text.textContent = 'Pause';
        resetTimer();
      } else {
        icon.textContent = '▶';
        text.textContent = 'Play';
        clearInterval(timer);
      }
    }

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

What delicious food words can we discover when we sail across the Pacific Ocean?

In Japan, **sushi** refers to specially seasoned rice rolled with seaweed, vegetables, or fresh fish.

In China, the word **tofu** means "bean curd," which is made from healthy mashed soybeans pressed into soft white blocks.

<!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}}/classace-diagram.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      min-height: 100%;
      background: #eff6ff;
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
      gap: 16px;
    }

    .display-box {
      width: 100%;
      max-width: 420px;
      height: 190px;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(30, 41, 69, 0.08);
      position: relative;
      overflow: hidden;
    }

    .slide {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      padding: 16px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }

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

    .item-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      width: 120px;
    }

    .food-icon {
      font-size: 52px;
      line-height: 1;
    }

    .flag-icon {
      font-size: 52px;
      line-height: 1;
    }

    .label {
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
      text-align: center;
    }

    .arrow {
      font-size: 28px;
      color: #22b7ff;
      font-weight: 900;
      user-select: none;
    }

    .nav-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 420px;
    }

    .tab-btn {
      background: #ffffff;
      border: 2px solid transparent;
      border-radius: 12px;
      padding: 10px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      box-shadow: 0 2px 6px rgba(30, 41, 69, 0.05);
      transition: box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;
      user-select: none;
    }

    .tab-btn span.tab-emoji {
      font-size: 22px;
      line-height: 1;
    }

    .tab-btn.active {
      border-color: #22b7ff;
      color: #1e2945;
      box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.25);
    }
  </style>
</head>
<body>

  <div class="display-box">
    <div class="slide step active">
      <div class="item-col">
        <div class="food-icon">🧈</div>
        <div class="label">Tofu</div>
      </div>
      <div class="arrow">➔</div>
      <div class="item-col">
        <div class="flag-icon">🇨🇳</div>
        <div class="label">China</div>
      </div>
    </div>

    <div class="slide step">
      <div class="item-col">
        <div class="food-icon">🌮</div>
        <div class="label">Taco</div>
      </div>
      <div class="arrow">➔</div>
      <div class="item-col">
        <div class="flag-icon">🇲🇽</div>
        <div class="label">Mexico</div>
      </div>
    </div>

    <div class="slide step">
      <div class="item-col">
        <div class="food-icon">🍣</div>
        <div class="label">Sushi</div>
      </div>
      <div class="arrow">➔</div>
      <div class="item-col">
        <div class="flag-icon">🇯🇵</div>
        <div class="label">Japan</div>
      </div>
    </div>

    <div class="slide step">
      <div class="item-col">
        <div class="food-icon">🥨</div>
        <div class="label">Pretzel</div>
      </div>
      <div class="arrow">➔</div>
      <div class="item-col">
        <div class="flag-icon">🇩🇪</div>
        <div class="label">Germany</div>
      </div>
    </div>
  </div>

  <div class="nav-grid">
    <button class="tab-btn active" type="button">
      <span class="tab-emoji">🧈</span>
      <span>Tofu</span>
    </button>
    <button class="tab-btn" type="button">
      <span class="tab-emoji">🌮</span>
      <span>Taco</span>
    </button>
    <button class="tab-btn" type="button">
      <span class="tab-emoji">🍣</span>
      <span>Sushi</span>
    </button>
    <button class="tab-btn" type="button">
      <span class="tab-emoji">🥨</span>
      <span>Pretzel</span>
    </button>
  </div>

  <script>
    const tabs = $$('.tab-btn');
    const player = new StepPlayer('.step', {
      interval: 3500,
      onChange: (idx) => {
        tabs.forEach((tab, i) => {
          tab.classList.toggle('active', i === idx);
        });
      }
    });

    tabs.forEach((tab, idx) => {
      onTap(tab, () => {
        player.pause();
        player.goTo(idx);
      });
    });

    player.start();
  </script>
</body>
</html>

The next time you sit down for lunch or dinner, take a look at your plate and see which country's language you are speaking!

languages

Learning About Cultural Food Words. Learn food words that come from different cultures

World Cultures Collection: Cooking with Culture & Everyday Traditions

Foods Around the World: Exploring Global Flavors and Cultural Geography

KS1 Geography: People, Places, and Foods Around the World

When teaching cultural food words to 2nd-grade students, anchor the lesson in foods they may already recognize (e.g., tacos, pretzels, spaghetti) before branching out into less familiar items (e.g., roti, bao, hummus). Emphasize multisensory and inquiry-based strategies: use full-color images, listen to audio pronunciations by native speakers, and connect each dish to world maps and globes. Reiterate cultural respect and appreciation by explaining how food traditions bring families and communities together across every continent.

Learning About Cultural Food Words

Foods from Italy

Spanish and Latin American Foods