diff --git a/episode1.html b/episode1.html
new file mode 100644
index 0000000..49f4a27
--- /dev/null
+++ b/episode1.html
@@ -0,0 +1,651 @@
+<!doctype html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Буба учит цвета — Эпизод 1</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { 
+      font-family: 'Comic Sans MS', 'Arial', sans-serif; 
+      overflow: hidden;
+      background: #87CEEB;
+    }
+    
+    .scene {
+      width: 100vw;
+      height: 100vh;
+      position: relative;
+      overflow: hidden;
+    }
+    
+    /* Небо */
+    .sky {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 60%;
+      background: linear-gradient(to bottom, #87CEEB 0%, #B0E0F6 100%);
+    }
+    
+    /* Солнце */
+    .sun {
+      position: absolute;
+      top: 30px;
+      right: 80px;
+      width: 80px;
+      height: 80px;
+      background: #FFD700;
+      border-radius: 50%;
+      box-shadow: 0 0 60px #FFD700, 0 0 100px #FFA500;
+      animation: sunPulse 2s ease-in-out infinite;
+    }
+    
+    @keyframes sunPulse {
+      0%, 100% { transform: scale(1); }
+      50% { transform: scale(1.1); }
+    }
+    
+    /* Облака */
+    .cloud {
+      position: absolute;
+      background: white;
+      border-radius: 50px;
+      animation: cloudMove 20s linear infinite;
+    }
+    
+    .cloud::before, .cloud::after {
+      content: '';
+      position: absolute;
+      background: white;
+      border-radius: 50%;
+    }
+    
+    .cloud1 { width: 120px; height: 50px; top: 60px; left: -120px; }
+    .cloud1::before { width: 60px; height: 60px; top: -30px; left: 20px; }
+    .cloud1::after { width: 50px; height: 50px; top: -20px; left: 50px; }
+    
+    .cloud2 { width: 100px; height: 40px; top: 120px; left: -100px; animation-delay: 8s; }
+    .cloud2::before { width: 50px; height: 50px; top: -25px; left: 15px; }
+    .cloud2::after { width: 40px; height: 40px; top: -15px; left: 40px; }
+    
+    @keyframes cloudMove {
+      0% { left: -150px; }
+      100% { left: 100vw; }
+    }
+    
+    /* Земля */
+    .ground {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 40%;
+      background: linear-gradient(to bottom, #90EE90 0%, #228B22 100%);
+      border-radius: 50% 50% 0 0 / 20% 20% 0 0;
+    }
+    
+    /* Дерево */
+    .tree {
+      position: absolute;
+      bottom: 100px;
+      left: 100px;
+    }
+    
+    .tree-trunk {
+      width: 30px;
+      height: 80px;
+      background: #8B4513;
+      margin: 0 auto;
+      border-radius: 5px;
+    }
+    
+    .tree-top {
+      width: 100px;
+      height: 100px;
+      background: #228B22;
+      border-radius: 50%;
+      position: relative;
+      top: 10px;
+      animation: treeSway 3s ease-in-out infinite;
+    }
+    
+    @keyframes treeSway {
+      0%, 100% { transform: rotate(-5deg); }
+      50% { transform: rotate(5deg); }
+    }
+    
+    /* Река */
+    .river {
+      position: absolute;
+      bottom: 50px;
+      right: 50px;
+      width: 250px;
+      height: 80px;
+      background: linear-gradient(to right, #4169E1, #87CEEB);
+      border-radius: 50%;
+      animation: riverFlow 2s ease-in-out infinite;
+    }
+    
+    @keyframes riverFlow {
+      0%, 100% { transform: scaleX(1); }
+      50% { transform: scaleX(1.05); }
+    }
+    
+    /* Персонаж - Буба (медвежонок) */
+    .buba {
+      position: absolute;
+      bottom: 120px;
+      left: 50%;
+      transform: translateX(-50%);
+      transition: all 1s ease;
+    }
+    
+    .buba-body {
+      width: 100px;
+      height: 120px;
+      background: #8B4513;
+      border-radius: 50% 50% 45% 45%;
+      position: relative;
+      animation: bubaBounce 1s ease-in-out infinite;
+    }
+    
+    @keyframes bubaBounce {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-10px); }
+    }
+    
+    .buba-head {
+      width: 90px;
+      height: 85px;
+      background: #8B4513;
+      border-radius: 50%;
+      position: absolute;
+      top: -70px;
+      left: 5px;
+    }
+    
+    .buba-ear {
+      width: 30px;
+      height: 30px;
+      background: #8B4513;
+      border-radius: 50%;
+      position: absolute;
+      top: -15px;
+    }
+    
+    .buba-ear.left { left: 5px; }
+    .buba-ear.right { right: 5px; }
+    
+    .buba-ear-inner {
+      width: 18px;
+      height: 18px;
+      background: #DEB887;
+      border-radius: 50%;
+      position: absolute;
+      top: 6px;
+      left: 6px;
+    }
+    
+    .buba-eye {
+      width: 18px;
+      height: 22px;
+      background: white;
+      border-radius: 50%;
+      position: absolute;
+      top: 20px;
+      animation: blink 4s ease-in-out infinite;
+    }
+    
+    .buba-eye.left { left: 20px; }
+    .buba-eye.right { right: 20px; }
+    
+    @keyframes blink {
+      0%, 45%, 55%, 100% { transform: scaleY(1); }
+      50% { transform: scaleY(0.1); }
+    }
+    
+    .buba-pupil {
+      width: 10px;
+      height: 14px;
+      background: #2D2D44;
+      border-radius: 50%;
+      position: absolute;
+      top: 4px;
+      left: 4px;
+    }
+    
+    .buba-snout {
+      width: 40px;
+      height: 30px;
+      background: #DEB887;
+      border-radius: 50%;
+      position: absolute;
+      bottom: 15px;
+      left: 25px;
+    }
+    
+    .buba-nose {
+      width: 20px;
+      height: 15px;
+      background: #2D2D44;
+      border-radius: 50% 50% 40% 40%;
+      position: absolute;
+      top: 5px;
+      left: 10px;
+    }
+    
+    .buba-mouth {
+      width: 20px;
+      height: 10px;
+      border: 3px solid #2D2D44;
+      border-color: transparent transparent #2D2D44 transparent;
+      border-radius: 50%;
+      position: absolute;
+      bottom: 8px;
+      left: 10px;
+    }
+    
+    .buba-arm {
+      width: 25px;
+      height: 50px;
+      background: #8B4513;
+      border-radius: 15px;
+      position: absolute;
+      top: 30px;
+    }
+    
+    .buba-arm.left { left: -15px; transform: rotate(20deg); }
+    .buba-arm.right { right: -15px; transform: rotate(-20deg); }
+    
+    .buba-leg {
+      width: 30px;
+      height: 40px;
+      background: #8B4513;
+      border-radius: 15px;
+      position: absolute;
+      bottom: -30px;
+    }
+    
+    .buba-leg.left { left: 15px; }
+    .buba-leg.right { right: 15px; }
+    
+    /* Объекты для цветов */
+    .object {
+      position: absolute;
+      opacity: 0;
+      transform: scale(0);
+      transition: all 0.5s ease;
+    }
+    
+    .object.show {
+      opacity: 1;
+      transform: scale(1);
+    }
+    
+    /* Яблоко - красное */
+    .apple {
+      bottom: 150px;
+      left: 200px;
+      width: 60px;
+      height: 60px;
+      background: radial-gradient(circle at 30% 30%, #FF6B6B, #C41E3A);
+      border-radius: 50%;
+    }
+    
+    .apple::before {
+      content: '';
+      position: absolute;
+      top: -10px;
+      left: 25px;
+      width: 10px;
+      height: 15px;
+      background: #8B4513;
+      border-radius: 3px;
+    }
+    
+    .apple::after {
+      content: '';
+      position: absolute;
+      top: -8px;
+      left: 30px;
+      width: 25px;
+      height: 15px;
+      background: #228B22;
+      border-radius: 50% 50% 0 0;
+    }
+    
+    /* Солнце жёлтое (дополнительное) */
+    .sun-small {
+      bottom: 200px;
+      right: 350px;
+      width: 70px;
+      height: 70px;
+      background: radial-gradient(circle at 30% 30%, #FFFF99, #FFD700);
+      border-radius: 50%;
+      box-shadow: 0 0 30px #FFD700;
+    }
+    
+    /* Трава - зелёная */
+    .grass {
+      bottom: 80px;
+      left: 30%;
+      width: 200px;
+      height: 40px;
+      background: linear-gradient(to bottom, #32CD32, #228B22);
+      border-radius: 50% 50% 0 0;
+    }
+    
+    /* Река - синяя */
+    .river-blue {
+      bottom: 60px;
+      right: 100px;
+      width: 180px;
+      height: 50px;
+      background: linear-gradient(to right, #1E90FF, #4169E1, #1E90FF);
+      border-radius: 50%;
+      animation: wave 1.5s ease-in-out infinite;
+    }
+    
+    @keyframes wave {
+      0%, 100% { transform: scaleY(1); }
+      50% { transform: scaleY(1.2); }
+    }
+    
+    /* Текст песни */
+    .song-text {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0);
+      font-size: 48px;
+      font-weight: bold;
+      color: white;
+      text-shadow: 3px 3px 0 #333, -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333;
+      white-space: nowrap;
+      opacity: 0;
+      transition: all 0.5s ease;
+      z-index: 100;
+      text-align: center;
+    }
+    
+    .song-text.show {
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 1;
+    }
+    
+    /* Контролы */
+    .controls {
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      gap: 15px;
+      z-index: 200;
+    }
+    
+    .btn {
+      padding: 12px 25px;
+      font-size: 18px;
+      font-weight: bold;
+      border: none;
+      border-radius: 30px;
+      cursor: pointer;
+      background: white;
+      color: #333;
+      box-shadow: 0 5px 20px rgba(0,0,0,0.3);
+      transition: all 0.3s ease;
+    }
+    
+    .btn:hover {
+      transform: scale(1.1);
+      background: #FFD700;
+    }
+    
+    .btn-play {
+      background: #FF6B9D;
+      color: white;
+    }
+    
+    /* Прогресс бар */
+    .progress {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 8px;
+      background: rgba(0,0,0,0.3);
+    }
+    
+    .progress-bar {
+      height: 100%;
+      background: linear-gradient(to right, #FF6B9D, #FFD700, #32CD32, #4169E1);
+      width: 0%;
+      transition: width 0.3s ease;
+    }
+    
+    /* Финальная сцена */
+    .dance-mode .buba {
+      animation: dance 0.5s ease-in-out infinite;
+    }
+    
+    @keyframes dance {
+      0%, 100% { transform: translateX(-50%) rotate(-10deg); }
+      50% { transform: translateX(-50%) rotate(10deg); }
+    }
+    
+    .dance-mode .object {
+      animation: bounce 0.5s ease-in-out infinite;
+    }
+    
+    @keyframes bounce {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-20px); }
+    }
+    
+    .final-text {
+      position: absolute;
+      top: 20%;
+      left: 50%;
+      transform: translateX(-50%) scale(0);
+      font-size: 56px;
+      font-weight: bold;
+      color: #FFD700;
+      text-shadow: 3px 3px 0 #FF6B9D;
+      opacity: 0;
+      transition: all 0.5s ease;
+      z-index: 100;
+      text-align: center;
+    }
+    
+    .final-text.show {
+      transform: translateX(-50%) scale(1);
+      opacity: 1;
+    }
+  </style>
+</head>
+<body>
+  <div class="scene" id="scene">
+    <!-- Небо -->
+    <div class="sky"></div>
+    
+    <!-- Солнце -->
+    <div class="sun"></div>
+    
+    <!-- Облака -->
+    <div class="cloud cloud1"></div>
+    <div class="cloud cloud2"></div>
+    
+    <!-- Земля -->
+    <div class="ground"></div>
+    
+    <!-- Дерево -->
+    <div class="tree">
+      <div class="tree-top"></div>
+      <div class="tree-trunk"></div>
+    </div>
+    
+    <!-- Река -->
+    <div class="river"></div>
+    
+    <!-- Буба -->
+    <div class="buba" id="buba">
+      <div class="buba-body">
+        <div class="buba-head">
+          <div class="buba-ear left"><div class="buba-ear-inner"></div></div>
+          <div class="buba-ear right"><div class="buba-ear-inner"></div></div>
+          <div class="buba-eye left"><div class="buba-pupil"></div></div>
+          <div class="buba-eye right"><div class="buba-pupil"></div></div>
+          <div class="buba-snout">
+            <div class="buba-nose"></div>
+            <div class="buba-mouth"></div>
+          </div>
+        </div>
+        <div class="buba-arm left"></div>
+        <div class="buba-arm right"></div>
+        <div class="buba-leg left"></div>
+        <div class="buba-leg right"></div>
+      </div>
+    </div>
+    
+    <!-- Объекты -->
+    <div class="object apple" id="apple"></div>
+    <div class="object sun-small" id="sunSmall"></div>
+    <div class="object grass" id="grass"></div>
+    <div class="object river-blue" id="riverBlue"></div>
+    
+    <!-- Текст песни -->
+    <div class="song-text" id="songText"></div>
+    
+    <!-- Финальный текст -->
+    <div class="final-text" id="finalText">🎉 Молодцы! 🎉</div>
+    
+    <!-- Прогресс -->
+    <div class="progress">
+      <div class="progress-bar" id="progressBar"></div>
+    </div>
+    
+    <!-- Контролы -->
+    <div class="controls">
+      <button class="btn btn-play" onclick="playEpisode()">▶ Играть</button>
+      <button class="btn" onclick="resetEpisode()">↺ Заново</button>
+    </div>
+  </div>
+
+  <script>
+    let currentStep = 0;
+    let isPlaying = false;
+    
+    const steps = [
+      { 
+        object: 'apple', 
+        text: '🔴 Красный, красный — яблочко!', 
+        color: '#C41E3A' 
+      },
+      { 
+        object: 'sunSmall', 
+        text: '🟡 Жёлтый — солнышко!', 
+        color: '#FFD700' 
+      },
+      { 
+        object: 'grass', 
+        text: '🟢 Зелёный — травушка!', 
+        color: '#32CD32' 
+      },
+      { 
+        object: 'riverBlue', 
+        text: '🔵 Синий — речушка!', 
+        color: '#4169E1' 
+      }
+    ];
+    
+    function showStep(stepIndex) {
+      const step = steps[stepIndex];
+      const obj = document.getElementById(step.object);
+      const text = document.getElementById('songText');
+      
+      // Показать объект
+      obj.classList.add('show');
+      
+      // Показать текст
+      text.textContent = step.text;
+      text.style.color = step.color;
+      text.style.textShadow = `3px 3px 0 ${step.color}, -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333`;
+      text.classList.add('show');
+      
+      // Обновить прогресс
+      const progress = ((stepIndex + 1) / steps.length) * 100;
+      document.getElementById('progressBar').style.width = progress + '%';
+      
+      // Скрыть текст через 2.5 секунды
+      setTimeout(() => {
+        text.classList.remove('show');
+      }, 2500);
+    }
+    
+    function playEpisode() {
+      if (isPlaying) return;
+      isPlaying = true;
+      
+      const playBtn = document.querySelector('.btn-play');
+      playBtn.textContent = '⏸ Играет...';
+      playBtn.disabled = true;
+      
+      let step = 0;
+      
+      const interval = setInterval(() => {
+        if (step < steps.length) {
+          showStep(step);
+          step++;
+        } else {
+          clearInterval(interval);
+          finishEpisode();
+        }
+      }, 3000);
+    }
+    
+    function finishEpisode() {
+      const scene = document.getElementById('scene');
+      const finalText = document.getElementById('finalText');
+      
+      scene.classList.add('dance-mode');
+      finalText.classList.add('show');
+      
+      const playBtn = document.querySelector('.btn-play');
+      playBtn.textContent = '✅ Сыграно';
+      playBtn.disabled = false;
+    }
+    
+    function resetEpisode() {
+      currentStep = 0;
+      isPlaying = false;
+      
+      // Скрыть все объекты
+      document.querySelectorAll('.object').forEach(obj => {
+        obj.classList.remove('show');
+      });
+      
+      // Скрыть тексты
+      document.getElementById('songText').classList.remove('show');
+      document.getElementById('finalText').classList.remove('show');
+      
+      // Убрать танец
+      document.getElementById('scene').classList.remove('dance-mode');
+      
+      // Сбросить прогресс
+      document.getElementById('progressBar').style.width = '0%';
+      
+      const playBtn = document.querySelector('.btn-play');
+      playBtn.textContent = '▶ Играть';
+      playBtn.disabled = false;
+    }
+    
+    // Автовоспроизведение при загрузке
+    window.addEventListener('load', () => {
+      setTimeout(playEpisode, 1000);
+    });
+  </script>
+</body>
+</html>
