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

Imagine you are halfway to school and realize you left your bedroom heater and all the lights running.

Years ago, that power would waste away all day — but today, a quick tap on a smartphone can turn everything off instantly.

**Sustainability** means meeting our daily needs without using up or damaging Earth's natural resources for the future.

A **smart thermostat** learns your daily schedule and lowers the heat when you leave the house, stopping wasted electricity and gas.

<!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>Smart Thermostat Energy Savings</title>
<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    padding: 12px;
  }
  .app-container {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* State Navigation Tabs */
  .tabs {
    display: flex;
    gap: 6px;
    background: #eef2f6;
    padding: 4px;
    border-radius: 12px;
  }
  .tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
  }
  .tab-btn.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  }

  /* Main Display Grid */
  .display-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* Cards */
  .card-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    min-height: 180px;
    position: relative;
    overflow: hidden;
  }

  /* House Status */
  .house-scene {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 8px;
    transition: transform 0.3s ease;
  }
  .status-badge {
    font-size: 14px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #475569;
    transition: all 0.3s ease;
  }

  /* Thermostat Dial */
  .thermo-dial {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    position: relative;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .dial-track {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 6px solid #e2e8f0;
    transition: border-color 0.3s ease;
  }
  .temp-val {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    z-index: 1;
  }
  .mode-icon {
    font-size: 14px;
    margin-top: 4px;
    font-weight: 700;
    z-index: 1;
  }

  /* Energy Usage Bar Card */
  .meter-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  }
  .meter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
  }
  .meter-track {
    height: 14px;
    background: #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
  }
  .meter-fill {
    height: 100%;
    width: 85%;
    background: #f97316;
    border-radius: 8px;
    transition: width 0.4s ease, background-color 0.4s ease;
  }

  /* Dynamic Themes */
  .state-eco .meter-fill {
    width: 25%;
    background: #22c55e;
  }
  .state-eco .dial-track {
    border-color: #22c55e;
  }
  .state-eco .status-badge {
    background: #dcfce7;
    color: #15803d;
  }

  .state-warm .meter-fill {
    width: 85%;
    background: #f97316;
  }
  .state-warm .dial-track {
    border-color: #f97316;
  }
  .state-warm .status-badge {
    background: #ffedd5;
    color: #c2410c;
  }

  /* Play Controls */
  .controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  .ctrl-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
  }
  .ctrl-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
  }
</style>
</head>
<body>

<div class="app-container" id="app">
  
  <div class="tabs" role="tablist">
    <button class="tab-btn active" id="tab-0" onclick="setStep(0)">🌅 Morning</button>
    <button class="tab-btn" id="tab-1" onclick="setStep(1)">🚶 Away (Eco)</button>
    <button class="tab-btn" id="tab-2" onclick="setStep(2)">🌙 Evening</button>
  </div>

  
  <div class="display-grid">
    
    <div class="card-box">
      <div class="house-scene" id="houseIcon">👨‍👩‍👧 🏠</div>
      <div class="status-badge" id="presenceLabel">Home</div>
    </div>

    
    <div class="card-box">
      <div class="thermo-dial">
        <div class="dial-track"></div>
        <div class="temp-val" id="tempText">21°C</div>
        <div class="mode-icon" id="modeText">🔥 Warm</div>
      </div>
    </div>
  </div>

  
  <div class="meter-card">
    <div class="meter-header">
      <span>⚡ Power Use</span>
      <span id="savingsLabel" style="font-weight: 700;">Normal</span>
    </div>
    <div class="meter-track">
      <div class="meter-fill" id="meterFill"></div>
    </div>
  </div>

  
  <div class="controls">
    <button class="ctrl-btn" id="playBtn" onclick="togglePlay()">
      <span id="playIcon">⏸</span> Auto-cycle
    </button>
  </div>
</div>

<script>
  const states = [
    {
      tab: 0,
      house: '👨‍👩‍👧 🏠',
      presence: 'Home',
      temp: '21°C',
      mode: '🔥 Heating',
      theme: 'state-warm',
      statusColor: '#c2410c',
      savings: 'Normal'
    },
    {
      tab: 1,
      house: '🚶 🏠',
      presence: 'Empty',
      temp: '16°C',
      mode: '🌱 Eco Save',
      theme: 'state-eco',
      statusColor: '#15803d',
      savings: '⚡ Saved 45%'
    },
    {
      tab: 2,
      house: '🏡 🌙',
      presence: 'Home',
      temp: '21°C',
      mode: '🔥 Heating',
      theme: 'state-warm',
      statusColor: '#c2410c',
      savings: 'Comfort'
    }
  ];

  let currentIdx = 0;
  let isPlaying = true;
  let timer = null;

  function renderStep(idx) {
    const data = states[idx];
    const app = document.getElementById('app');

    // Update active tab
    for (let i = 0; i < 3; i++) {
      const tab = document.getElementById(`tab-${i}`);
      if (i === idx) {
        tab.classList.add('active');
      } else {
        tab.classList.remove('active');
      }
    }

    // Apply color theme
    app.classList.remove('state-warm', 'state-eco');
    app.classList.add(data.theme);

    // Update contents
    document.getElementById('houseIcon').textContent = data.house;
    document.getElementById('presenceLabel').textContent = data.presence;
    document.getElementById('tempText').textContent = data.temp;
    document.getElementById('modeText').textContent = data.mode;
    document.getElementById('savingsLabel').textContent = data.savings;
    document.getElementById('savingsLabel').style.color = data.statusColor;
  }

  function setStep(idx) {
    currentIdx = idx;
    renderStep(currentIdx);
  }

  function nextStep() {
    currentIdx = (currentIdx + 1) % states.length;
    renderStep(currentIdx);
  }

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

  function stopTimer() {
    if (timer) {
      clearInterval(timer);
      timer = null;
    }
  }

  function togglePlay() {
    isPlaying = !isPlaying;
    const playIcon = document.getElementById('playIcon');
    if (isPlaying) {
      playIcon.textContent = '⏸';
      startTimer();
    } else {
      playIcon.textContent = '▶';
      stopTimer();
    }
  }

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

Saving power at home is a huge win, but what happens to all the food and clothes we buy?

Huge amounts of perfectly good food end up in landfills every day, creating harmful greenhouse gases as they rot.

Modern **food-rescue apps** connect local bakeries and grocery stores with families to sell unsold meals at a discount before closing time.

<!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>Food Rescue Technology Flow</title>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    .flow-nav {
      display: flex;
      width: 100%;
      max-width: 540px;
      gap: 6px;
      justify-content: space-between;
    }
    .step-btn {
      flex: 1;
      padding: 8px 4px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    }
    .step-btn.active {
      background: #f0fdf4;
      color: #15803d;
      border-color: #86efac;
      box-shadow: 0 0 0 2px #22c55e;
    }
    .step-btn span.num {
      font-size: 11px;
      opacity: 0.7;
    }

    /* Pipeline Track */
    .track-container {
      width: 100%;
      max-width: 540px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
    }
    .node {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      flex: 1;
      z-index: 2;
      transition: opacity 0.3s ease;
      cursor: pointer;
    }
    .icon-bubble {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .node.active .icon-bubble {
      background: #dcfce7;
      border-color: #22c55e;
      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
    }
    .node.dim {
      opacity: 0.45;
    }
    .node-label {
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      text-align: center;
      line-height: 1.2;
    }
    .connector {
      font-size: 16px;
      color: #94a3b8;
      user-select: none;
      z-index: 1;
      margin-top: -18px;
    }
    .connector.active {
      color: #22c55e;
      font-weight: bold;
    }

    /* Stage Detail Display */
    .stage-card {
      width: 100%;
      max-width: 540px;
      height: 140px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      position: relative;
      overflow: hidden;
    }
    .stage-panel {
      position: absolute;
      inset: 0;
      padding: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .stage-panel.active {
      opacity: 1;
      pointer-events: auto;
    }
    .panel-icon {
      font-size: 42px;
      min-width: 60px;
      text-align: center;
    }
    .panel-content {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .tag {
      align-self: flex-start;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .tag.step1 { background: #fef3c7; color: #b45309; }
    .tag.step2 { background: #e0f2fe; color: #0369a1; }
    .tag.step3 { background: #f3e8ff; color: #7e22ce; }
    .tag.step4 { background: #dcfce7; color: #15803d; }
    .panel-title {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
    }
    .panel-metric {
      font-size: 14px;
      font-weight: 600;
      color: #15803d;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .ctrl-btn {
      padding: 6px 14px;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
    }
    .ctrl-btn:active {
      background: #e2e8f0;
    }
  </style>
</head>
<body>

  
  <div class="flow-nav">
    <button class="step-btn active" data-step="0">
      <span class="num">1</span>
      <span>Surplus</span>
    </button>
    <button class="step-btn" data-step="1">
      <span class="num">2</span>
      <span>App</span>
    </button>
    <button class="step-btn" data-step="2">
      <span class="num">3</span>
      <span>Pickup</span>
    </button>
    <button class="step-btn" data-step="3">
      <span class="num">4</span>
      <span>Saved</span>
    </button>
  </div>

  
  <div class="track-container">
    <div class="node active" data-step="0">
      <div class="icon-bubble">🥖</div>
      <div class="node-label">Store<br>Surplus</div>
    </div>
    <div class="connector">→</div>
    <div class="node dim" data-step="1">
      <div class="icon-bubble">📱</div>
      <div class="node-label">Rescue<br>App</div>
    </div>
    <div class="connector">→</div>
    <div class="node dim" data-step="2">
      <div class="icon-bubble">🛍️</div>
      <div class="node-label">Discount<br>Pickup</div>
    </div>
    <div class="connector">→</div>
    <div class="node dim" data-step="3">
      <div class="icon-bubble">🌱</div>
      <div class="node-label">Zero<br>Waste</div>
    </div>
  </div>

  
  <div class="stage-card">
    <div class="stage-panel active" id="stage-0">
      <div class="panel-icon">🏪</div>
      <div class="panel-content">
        <span class="tag step1">Closing Time</span>
        <div class="panel-title">Fresh Unsold Food</div>
        <div class="panel-metric" style="color:#d97706;">⚠️ Potential waste</div>
      </div>
    </div>

    <div class="stage-panel" id="stage-1">
      <div class="panel-icon">📲</div>
      <div class="panel-content">
        <span class="tag step2">Smart Match</span>
        <div class="panel-title">Listed on App</div>
        <div class="panel-metric" style="color:#0284c7;">⚡ Instant local alert</div>
      </div>
    </div>

    <div class="stage-panel" id="stage-2">
      <div class="panel-icon">👨‍👩‍👧</div>
      <div class="panel-content">
        <span class="tag step3">Family Order</span>
        <div class="panel-title">Half-Price Meals</div>
        <div class="panel-metric" style="color:#7e22ce;">💰 Money saved</div>
      </div>
    </div>

    <div class="stage-panel" id="stage-3">
      <div class="panel-icon">🌍</div>
      <div class="panel-content">
        <span class="tag step4">Eco Impact</span>
        <div class="panel-title">Zero Food Waste</div>
        <div class="panel-metric">🌱 -2.5 kg CO₂</div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="ctrl-btn" id="prevBtn">←</button>
    <button class="ctrl-btn" id="playBtn">⏸ Pause</button>
    <button class="ctrl-btn" id="nextBtn">→</button>
  </div>

  <script>
    const buttons = $$('.step-btn');
    const nodes = $$('.node');
    const connectors = $$('.connector');
    const panels = $$('.stage-panel');
    const playBtn = $('#playBtn');

    let current = 0;
    let playing = true;
    let timer = null;

    function showStep(idx) {
      current = (idx + 4) % 4;

      buttons.forEach((b, i) => b.classList.toggle('active', i === current));
      panels.forEach((p, i) => p.classList.toggle('active', i === current));

      nodes.forEach((n, i) => {
        n.classList.toggle('active', i === current);
        n.classList.toggle('dim', i !== current);
      });

      connectors.forEach((c, i) => {
        c.classList.toggle('active', i < current);
      });
    }

    function nextStep() {
      showStep(current + 1);
    }

    function prevStep() {
      showStep(current - 1);
    }

    function startAuto() {
      stopAuto();
      timer = setInterval(nextStep, 3200);
      playing = true;
      playBtn.textContent = '⏸ Pause';
    }

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

    function togglePlay() {
      if (playing) {
        stopAuto();
      } else {
        nextStep();
        startAuto();
      }
    }

    buttons.forEach((btn) => {
      onTap(btn, () => {
        stopAuto();
        showStep(parseInt(btn.dataset.step, 10));
      });
    });

    nodes.forEach((node) => {
      onTap(node, () => {
        stopAuto();
        showStep(parseInt(node.dataset.step, 10));
      });
    });

    onTap($('#prevBtn'), () => {
      stopAuto();
      prevStep();
    });

    onTap($('#nextBtn'), () => {
      stopAuto();
      nextStep();
    });

    onTap(playBtn, togglePlay);

    // Initial state
    showStep(0);
    startAuto();
  </script>
</body>
</html>

How do these tools fit together throughout an ordinary day?

Let's follow Maya as she uses technology to cut her carbon footprint from morning to night.

<!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>Maya's Day: Tech & Carbon Footprint</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      user-select: none;
    }

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

    /* Timeline buttons */
    .timeline-nav {
      display: flex;
      width: 100%;
      max-width: 480px;
      justify-content: space-between;
      gap: 6px;
      position: relative;
    }

    .time-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 10px;
      padding: 6px 2px;
      cursor: pointer;
      transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
    }

    .time-btn .time {
      font-size: 11px;
      font-weight: 600;
      color: #6b7280;
    }

    .time-btn .icon {
      font-size: 18px;
      margin-top: 2px;
    }

    .time-btn.active {
      border-color: #06b6d4;
      background: #ecfeff;
      box-shadow: 0 2px 6px rgba(6, 182, 212, 0.2);
    }

    .time-btn.active .time {
      color: #0891b2;
    }

    /* Stage display */
    .stage-container {
      width: 100%;
      max-width: 480px;
      height: 220px;
      position: relative;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 14px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .step-card {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      padding: 16px;
      gap: 12px;
    }

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

    .scene-graphic {
      width: 100%;
      height: 110px;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      position: relative;
    }

    .visual-pill {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 42%;
      height: 100%;
      border-radius: 12px;
      padding: 8px;
      border: 1.5px solid #e5e7eb;
      background: #f9fafb;
    }

    .visual-pill.standard {
      border-color: #fecaca;
      background: #fef2f2;
    }

    .visual-pill.tech {
      border-color: #a5f3fc;
      background: #ecfeff;
    }

    .pill-emoji {
      font-size: 32px;
    }

    .pill-footprint {
      font-size: 13px;
      font-weight: 700;
      margin-top: 4px;
    }

    .pill-footprint.red { color: #dc2626; }
    .pill-footprint.green { color: #0891b2; }

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

    /* Cumulative Meter */
    .footprint-summary {
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .summary-text {
      display: flex;
      flex-direction: column;
    }

    .summary-title {
      font-size: 12px;
      color: #6b7280;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .summary-val {
      font-size: 18px;
      font-weight: 800;
      color: #0891b2;
    }

    .meter-bar-bg {
      flex: 1;
      height: 12px;
      background: #e5e7eb;
      border-radius: 6px;
      overflow: hidden;
      position: relative;
    }

    .meter-bar-fill {
      height: 100%;
      width: 20%;
      background: linear-gradient(90deg, #06b6d4, #10b981);
      border-radius: 6px;
      transition: width 0.4s ease;
    }

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

    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s;
    }

    .ctrl-btn:active {
      background: #f3f4f6;
    }
  </style>
</head>
<body>

  
  <div class="timeline-nav" id="timelineNav">
    <button class="time-btn active" data-step="0">
      <span class="time">07:00</span>
      <span class="icon">🌡️</span>
    </button>
    <button class="time-btn" data-step="1">
      <span class="time">08:30</span>
      <span class="icon">🚲</span>
    </button>
    <button class="time-btn" data-step="2">
      <span class="time">13:00</span>
      <span class="icon">☁️</span>
    </button>
    <button class="time-btn" data-step="3">
      <span class="time">18:00</span>
      <span class="icon">⚡</span>
    </button>
    <button class="time-btn" data-step="4">
      <span class="time">22:00</span>
      <span class="icon">🌙</span>
    </button>
  </div>

  
  <div class="stage-container">
    
    <div class="step-card active" data-step="0">
      <div class="scene-graphic">
        <div class="visual-pill standard">
          <span class="pill-emoji">🔥</span>
          <span class="pill-footprint red">1.8 kg CO₂</span>
        </div>
        <span style="font-size: 20px; color: #9ca3af;">→</span>
        <div class="visual-pill tech">
          <span class="pill-emoji">📱🌡️</span>
          <span class="pill-footprint green">0.6 kg CO₂</span>
        </div>
      </div>
      <div class="action-label">Smart Thermostat</div>
    </div>

    
    <div class="step-card" data-step="1">
      <div class="scene-graphic">
        <div class="visual-pill standard">
          <span class="pill-emoji">🚗</span>
          <span class="pill-footprint red">3.2 kg CO₂</span>
        </div>
        <span style="font-size: 20px; color: #9ca3af;">→</span>
        <div class="visual-pill tech">
          <span class="pill-emoji">🗺️🚲</span>
          <span class="pill-footprint green">0.1 kg CO₂</span>
        </div>
      </div>
      <div class="action-label">Route & Transit App</div>
    </div>

    
    <div class="step-card" data-step="2">
      <div class="scene-graphic">
        <div class="visual-pill standard">
          <span class="pill-emoji">📄🖨️</span>
          <span class="pill-footprint red">1.2 kg CO₂</span>
        </div>
        <span style="font-size: 20px; color: #9ca3af;">→</span>
        <div class="visual-pill tech">
          <span class="pill-emoji">☁️💻</span>
          <span class="pill-footprint green">0.2 kg CO₂</span>
        </div>
      </div>
      <div class="action-label">Cloud Sharing</div>
    </div>

    
    <div class="step-card" data-step="3">
      <div class="scene-graphic">
        <div class="visual-pill standard">
          <span class="pill-emoji">🏭⚡</span>
          <span class="pill-footprint red">2.5 kg CO₂</span>
        </div>
        <span style="font-size: 20px; color: #9ca3af;">→</span>
        <div class="visual-pill tech">
          <span class="pill-emoji">☀️🧺</span>
          <span class="pill-footprint green">0.4 kg CO₂</span>
        </div>
      </div>
      <div class="action-label">Solar Timer</div>
    </div>

    
    <div class="step-card" data-step="4">
      <div class="scene-graphic">
        <div class="visual-pill standard">
          <span class="pill-emoji">📺💡</span>
          <span class="pill-footprint red">0.9 kg CO₂</span>
        </div>
        <span style="font-size: 20px; color: #9ca3af;">→</span>
        <div class="visual-pill tech">
          <span class="pill-emoji">🔌💤</span>
          <span class="pill-footprint green">0.1 kg CO₂</span>
        </div>
      </div>
      <div class="action-label">Auto Standby</div>
    </div>
  </div>

  
  <div class="footprint-summary">
    <div class="summary-text">
      <span class="summary-title">CO₂ Saved</span>
      <span class="summary-val" id="savedVal">-1.2 kg</span>
    </div>
    <div class="meter-bar-bg">
      <div class="meter-bar-fill" id="meterFill"></div>
    </div>
  </div>

  
  <div class="controls">
    <button class="ctrl-btn" id="playBtn">
      <span id="playIcon">⏸</span>
    </button>
  </div>

  <script>
    const savings = [1.2, 4.3, 5.3, 7.4, 8.2];
    const maxSaving = 8.2;
    let currentStep = 0;
    let playing = true;
    let timer = null;

    const cards = document.querySelectorAll('.step-card');
    const navBtns = document.querySelectorAll('.time-btn');
    const meterFill = document.getElementById('meterFill');
    const savedVal = document.getElementById('savedVal');
    const playBtn = document.getElementById('playBtn');
    const playIcon = document.getElementById('playIcon');

    function showStep(idx) {
      currentStep = (idx + cards.length) % cards.length;
      cards.forEach((c, i) => c.classList.toggle('active', i === currentStep));
      navBtns.forEach((b, i) => b.classList.toggle('active', i === currentStep));
      
      const val = savings[currentStep];
      savedVal.textContent = '-' + val.toFixed(1) + ' kg';
      meterFill.style.width = ((val / maxSaving) * 100) + '%';
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(() => {
        showStep(currentStep + 1);
      }, 3000);
      playing = true;
      playIcon.textContent = '⏸';
    }

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

    navBtns.forEach((btn, idx) => {
      btn.addEventListener('click', () => {
        showStep(idx);
        if (playing) startTimer();
      });
    });

    playBtn.addEventListener('click', () => {
      if (playing) {
        pauseTimer();
      } else {
        startTimer();
      }
    });

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

Does using all these screens and gadgets ever cause more harm than good?

A common mistake is thinking digital tools always increase your environmental footprint because devices consume electricity.

While making and charging devices does take energy, using them to replace car trips, prevent food waste, and automate home cooling saves far more energy overall.

Look around your home or classroom today: which everyday habit could a simple digital tool make greener?

technology

Using Technology to Support Sustainability. Learners will identify how technology can help individuals reduce their environmental impact.

Early Level / KS1: How Can We Look After Our Planet and Save Energy?

Technologies and Sustainability in Early Learning and Childcare (Early Level CfE)

Early Years & Primary 1: Energy Sparks and Eco-Tech Action Toolkit

When teaching technology and sustainability to Early Level (P1) learners, ground abstract concepts in concrete, play-based classroom routines. Conduct a 'Tech Treasure Hunt' where pupils walk around the school identifying technologies that help nature (e.g., light sensors, tap sensors, programmable radiators, tablet stations, and recycling bins). Use role-play, puppet demonstrations, and hands-on sorting games to build positive agency, ensuring learners feel empowered as planet protectors who can choose and use technology responsibly.

Using Technology to Support Sustainability

Smart Energy at Home

Waste-Fighting Apps

A Day with Green Tech