From 2c9fa8498b23586dfb0ed8703df44af5a200e649 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 22 Mar 2026 00:48:17 +0000
Subject: [PATCH 1/4] Initial plan


From c76feb3b41be2ac9f21b812f1e89cd1d7f427cbd Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 22 Mar 2026 00:54:08 +0000
Subject: [PATCH 2/4] feat: start bunny visual revamp

Co-authored-by: DenisValeev <884686+DenisValeev@users.noreply.github.com>
Agent-Logs-Url: https://github.com/DenisValeev/denisvaleev.github.io/sessions/9345fac5-645c-446f-8479-01967e29d636
---
 apps/enchanted-bunny/index.html | 312 +++++++++++++++++++++++++++++---
 offline-manifest.json           |   8 +-
 2 files changed, 286 insertions(+), 34 deletions(-)

diff --git a/apps/enchanted-bunny/index.html b/apps/enchanted-bunny/index.html
index ec652f7..de4dc84 100644
--- a/apps/enchanted-bunny/index.html
+++ b/apps/enchanted-bunny/index.html
@@ -65,6 +65,9 @@
       --butterfly-accent: rgba(255, 139, 88, 0.2);
       --butterfly-body-top: #5b4639;
       --butterfly-body-bottom: #2c221d;
+      --beam-glow-color: rgba(126, 255, 164, 0.34);
+      --beam-core-color: rgba(226, 255, 220, 0.98);
+      --beam-spark-color: rgba(170, 255, 181, 0.52);
     }
 
     body[data-skin="moonlit"] {
@@ -216,6 +219,227 @@
       --butterfly-body-bottom: #1f4650;
     }
 
+    body[data-skin="golden"] .tree {
+      border-radius: 999px 999px 1.6rem 1.6rem;
+      transform: scaleX(0.96);
+    }
+
+    body[data-skin="golden"] .tree::before {
+      width: calc(100% * 4.3);
+      height: calc(100% * 0.56);
+      clip-path: ellipse(48% 44% at 50% 56%);
+    }
+
+    body[data-skin="golden"] .tree::after {
+      width: calc(100% * 6);
+      height: calc(100% * 0.48);
+      clip-path: ellipse(46% 40% at 50% 52%);
+    }
+
+    body[data-skin="golden"] .body {
+      border-radius: 42% 42% 44% 44% / 38% 38% 56% 56%;
+      clip-path: ellipse(49% 50% at 50% 50%);
+      transform: translateX(-50%) rotate(-1deg);
+    }
+
+    body[data-skin="golden"] .head-core {
+      border-radius: 48% 48% 45% 45% / 44% 44% 56% 56%;
+      clip-path: ellipse(46% 48% at 50% 52%);
+    }
+
+    body[data-skin="golden"] .ear {
+      clip-path: ellipse(40% 49% at 50% 50%);
+    }
+
+    body[data-skin="golden"] .tail {
+      clip-path: ellipse(49% 49% at 50% 50%);
+    }
+
+    body[data-skin="golden"] .wing {
+      clip-path: ellipse(46% 44% at 50% 50%);
+    }
+
+    body[data-skin="golden"] .tuft::before,
+    body[data-skin="golden"] .tuft::after {
+      clip-path: polygon(50% 0, 76% 18%, 100% 100%, 24% 100%);
+    }
+
+    body[data-skin="golden"] .foreground-blob::before,
+    body[data-skin="golden"] .foreground-blob::after {
+      clip-path: ellipse(46% 48% at 50% 52%);
+    }
+
+    body[data-skin="moonlit"] .tree {
+      border-radius: 34% 34% 1rem 1rem;
+      transform: scaleX(0.78);
+    }
+
+    body[data-skin="moonlit"] .tree::before {
+      width: calc(100% * 2.8);
+      height: calc(100% * 0.72);
+      clip-path: polygon(50% 0, 82% 24%, 100% 66%, 82% 100%, 18% 100%, 0 66%, 18% 24%);
+      filter: blur(4px);
+    }
+
+    body[data-skin="moonlit"] .tree::after {
+      width: calc(100% * 3.6);
+      height: calc(100% * 0.66);
+      clip-path: polygon(50% 0, 88% 30%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 12% 30%);
+      filter: blur(5px);
+    }
+
+    body[data-skin="moonlit"] .body {
+      border-radius: 34% 34% 42% 42% / 32% 32% 60% 60%;
+      clip-path: polygon(26% 0, 74% 0, 92% 18%, 100% 56%, 84% 100%, 16% 100%, 0 56%, 8% 18%);
+      transform: translateX(-50%) rotate(-3deg);
+    }
+
+    body[data-skin="moonlit"] .head-core {
+      border-radius: 34% 34% 42% 42% / 34% 34% 60% 60%;
+      clip-path: polygon(24% 6%, 76% 6%, 92% 28%, 94% 68%, 76% 100%, 24% 100%, 6% 68%, 8% 28%);
+    }
+
+    body[data-skin="moonlit"] .ear {
+      clip-path: polygon(50% 0, 86% 18%, 72% 100%, 28% 100%, 14% 18%);
+      border-radius: 24% 24% 28% 28% / 22% 22% 36% 36%;
+    }
+
+    body[data-skin="moonlit"] .tail {
+      clip-path: polygon(50% 0, 84% 22%, 100% 58%, 80% 100%, 20% 100%, 0 58%, 16% 22%);
+      border-radius: 34%;
+    }
+
+    body[data-skin="moonlit"] .wing {
+      clip-path: polygon(8% 36%, 36% 4%, 88% 14%, 100% 54%, 70% 100%, 12% 88%);
+      border-radius: 26% 18% 48% 22%;
+    }
+
+    body[data-skin="moonlit"] .tuft::before,
+    body[data-skin="moonlit"] .tuft::after {
+      clip-path: polygon(50% 0, 64% 18%, 100% 100%, 18% 100%);
+      border-radius: 22% 22% 10% 10%;
+    }
+
+    body[data-skin="moonlit"] .foreground-blob::before,
+    body[data-skin="moonlit"] .foreground-blob::after {
+      clip-path: polygon(50% 0, 70% 20%, 100% 100%, 16% 100%);
+      border-radius: 18% 18% 10% 10%;
+    }
+
+    body[data-skin="rose"] .tree {
+      border-radius: 999px 999px 1.9rem 1.9rem;
+      transform: scaleX(1.04);
+    }
+
+    body[data-skin="rose"] .tree::before {
+      width: calc(100% * 4.8);
+      height: calc(100% * 0.62);
+      clip-path: ellipse(50% 46% at 50% 54%);
+      filter: blur(5px);
+    }
+
+    body[data-skin="rose"] .tree::after {
+      width: calc(100% * 6.4);
+      height: calc(100% * 0.54);
+      clip-path: polygon(12% 64%, 26% 26%, 50% 10%, 74% 26%, 88% 64%, 74% 100%, 26% 100%);
+      filter: blur(7px);
+    }
+
+    body[data-skin="rose"] .body {
+      border-radius: 50% 50% 40% 40% / 34% 34% 66% 66%;
+      clip-path: polygon(20% 4%, 80% 4%, 98% 28%, 94% 70%, 78% 100%, 22% 100%, 6% 70%, 2% 28%);
+      transform: translateX(-50%) rotate(2deg);
+    }
+
+    body[data-skin="rose"] .head-core {
+      border-radius: 50% 50% 42% 42% / 36% 36% 64% 64%;
+      clip-path: ellipse(48% 50% at 50% 52%);
+    }
+
+    body[data-skin="rose"] .ear {
+      clip-path: polygon(50% 0, 92% 16%, 82% 100%, 18% 100%, 8% 16%);
+      border-radius: 44% 44% 28% 28% / 28% 28% 34% 34%;
+    }
+
+    body[data-skin="rose"] .tail {
+      clip-path: ellipse(54% 50% at 50% 54%);
+      transform: scale(1.06);
+    }
+
+    body[data-skin="rose"] .wing {
+      clip-path: polygon(10% 40%, 34% 8%, 74% 0, 100% 36%, 80% 100%, 26% 92%);
+      border-radius: 56% 30% 58% 28%;
+    }
+
+    body[data-skin="rose"] .tuft::before,
+    body[data-skin="rose"] .tuft::after {
+      clip-path: polygon(50% 0, 84% 22%, 100% 100%, 24% 100%);
+      border-radius: 48% 48% 18% 18%;
+    }
+
+    body[data-skin="rose"] .foreground-blob::before,
+    body[data-skin="rose"] .foreground-blob::after {
+      clip-path: ellipse(48% 52% at 50% 54%);
+      border-radius: 56% 56% 18% 18%;
+    }
+
+    body[data-skin="snowcap"] .tree {
+      border-radius: 28% 28% 0.9rem 0.9rem;
+      transform: scaleX(0.82);
+    }
+
+    body[data-skin="snowcap"] .tree::before {
+      width: calc(100% * 2.7);
+      height: calc(100% * 0.82);
+      clip-path: polygon(50% 0, 80% 28%, 100% 78%, 76% 100%, 24% 100%, 0 78%, 20% 28%);
+      filter: blur(3px);
+    }
+
+    body[data-skin="snowcap"] .tree::after {
+      width: calc(100% * 3.2);
+      height: calc(100% * 0.72);
+      clip-path: polygon(50% 0, 84% 22%, 100% 72%, 78% 100%, 22% 100%, 0 72%, 16% 22%);
+      filter: blur(4px);
+    }
+
+    body[data-skin="snowcap"] .body {
+      border-radius: 36% 36% 38% 38% / 28% 28% 66% 66%;
+      clip-path: polygon(24% 0, 76% 0, 90% 18%, 100% 62%, 80% 100%, 20% 100%, 0 62%, 10% 18%);
+      transform: translateX(-50%) rotate(-2deg);
+    }
+
+    body[data-skin="snowcap"] .head-core {
+      border-radius: 36% 36% 40% 40% / 30% 30% 64% 64%;
+      clip-path: polygon(24% 2%, 76% 2%, 90% 22%, 96% 66%, 76% 100%, 24% 100%, 4% 66%, 10% 22%);
+    }
+
+    body[data-skin="snowcap"] .ear {
+      clip-path: polygon(50% 0, 82% 14%, 74% 100%, 26% 100%, 18% 14%);
+      border-radius: 26% 26% 22% 22% / 22% 22% 30% 30%;
+    }
+
+    body[data-skin="snowcap"] .tail {
+      clip-path: polygon(50% 0, 82% 22%, 100% 56%, 82% 100%, 18% 100%, 0 56%, 18% 22%);
+      border-radius: 30%;
+    }
+
+    body[data-skin="snowcap"] .wing {
+      clip-path: polygon(10% 44%, 38% 6%, 88% 14%, 100% 52%, 66% 100%, 10% 88%);
+      border-radius: 22% 16% 44% 18%;
+    }
+
+    body[data-skin="snowcap"] .tuft::before,
+    body[data-skin="snowcap"] .tuft::after {
+      clip-path: polygon(50% 0, 68% 14%, 100% 100%, 16% 100%);
+      border-radius: 16% 16% 8% 8%;
+    }
+
+    body[data-skin="snowcap"] .foreground-blob::before,
+    body[data-skin="snowcap"] .foreground-blob::after {
+      clip-path: polygon(50% 0, 72% 18%, 100% 100%, 18% 100%);
+      border-radius: 16% 16% 8% 8%;
+    }
+
     * {
       box-sizing: border-box;
     }
@@ -290,47 +514,75 @@
       border: 0;
     }
 
-    .home-link {
+    .status-panel {
       position: absolute;
       top: 1rem;
       left: 1rem;
       z-index: 18;
-      display: inline-flex;
-      align-items: center;
-      gap: 0.5rem;
-      padding: 0.72rem 1rem;
-      border-radius: 999px;
+      display: grid;
+      gap: 0.7rem;
+      width: min(19rem, calc(100vw - 7rem));
+      padding: 0.86rem 1rem;
       border: 1px solid var(--border);
+      border-radius: 1.25rem;
       background: linear-gradient(180deg, rgba(255, 250, 242, 0.18), rgba(255, 250, 242, 0.08));
-      color: rgba(255, 248, 237, 0.96);
-      text-decoration: none;
       box-shadow: 0 16px 36px rgba(11, 16, 13, 0.24);
       backdrop-filter: blur(14px);
-      transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
     }
 
-    .home-link:hover {
-      transform: translateY(-2px);
-      border-color: rgba(255, 246, 230, 0.42);
-      background: linear-gradient(180deg, rgba(255, 250, 242, 0.22), rgba(255, 250, 242, 0.1));
+    .status-title {
+      margin: 0;
+      font-size: 0.7rem;
+      line-height: 1;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+      opacity: 0.74;
+    }
+
+    .status-grid {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 0.7rem;
+    }
+
+    .status-metric {
+      display: flex;
+      flex-direction: column;
+      gap: 0.22rem;
+      min-width: 0;
+    }
+
+    .status-label {
+      font-size: 0.63rem;
+      line-height: 1.1;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      opacity: 0.7;
+    }
+
+    .status-value {
+      font-size: 1rem;
+      line-height: 1.1;
+      font-weight: 600;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
-    .home-link:focus-visible,
+    .status-note {
+      font-size: 0.82rem;
+      line-height: 1.35;
+      opacity: 0.8;
+      max-width: 30ch;
+    }
+
+    .skin-button:focus-visible,
     .skin-button:focus-visible,
     .carrot:focus-visible {
       outline: 2px solid rgba(255, 233, 183, 0.9);
       outline-offset: 4px;
     }
 
-    .home-link::before {
-      content: "";
-      width: 0.72rem;
-      height: 0.72rem;
-      border-top: 2px solid currentColor;
-      border-left: 2px solid currentColor;
-      transform: rotate(-45deg);
-    }
-
     .skin-action {
       position: absolute;
       top: 1rem;
@@ -1326,17 +1578,17 @@
     }
 
     .beam-glow {
-      stroke: rgba(126, 255, 164, 0.34);
+      stroke: var(--beam-glow-color);
       stroke-width: 10;
     }
 
     .beam-core {
-      stroke: rgba(226, 255, 220, 0.98);
+      stroke: var(--beam-core-color);
       stroke-width: 2.8;
     }
 
     .beam-spark {
-      fill: rgba(170, 255, 181, 0.52);
+      fill: var(--beam-spark-color);
       opacity: 0;
     }
 
@@ -1814,14 +2066,15 @@
     }
 
     @media (max-width: 820px) {
-      .home-link,
+      .status-panel,
       .skin-action {
         top: 0.8rem;
       }
 
-      .home-link {
+      .status-panel {
         left: 0.8rem;
-        padding: 0.64rem 0.9rem;
+        width: min(18rem, calc(100vw - 6rem));
+        padding: 0.76rem 0.9rem;
       }
 
       .skin-action {
@@ -1923,7 +2176,6 @@
     }
 
     @media (prefers-reduced-motion: reduce) {
-      .home-link,
       .skin-button,
       .carrot,
       .butterfly {
diff --git a/offline-manifest.json b/offline-manifest.json
index d365fa8..ef620e0 100644
--- a/offline-manifest.json
+++ b/offline-manifest.json
@@ -1,6 +1,6 @@
 {
-  "version": "20260321-dc4d39739d02-165a581b6c05",
-  "generatedAt": "2026-03-21T19:41:43.639Z",
+  "version": "20260322-dc4d39739d02-2c9fa8498b23",
+  "generatedAt": "2026-03-22T00:49:39.758Z",
   "totalAssets": 78,
   "totalBytes": 6422073,
   "assets": [
@@ -318,8 +318,8 @@
     }
   ],
   "commit": {
-    "hash": "165a581b6c057b753336e4593c5ce1b13e0a479f",
-    "short": "165a581b6c05",
+    "hash": "2c9fa8498b23586dfb0ed8703df44af5a200e649",
+    "short": "2c9fa8498b23",
     "dirty": false
   }
 }

From 886efd80ac2fc1138959557a0315335209aff68e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 22 Mar 2026 01:03:47 +0000
Subject: [PATCH 3/4] feat: revamp enchanted bunny challenge

Co-authored-by: DenisValeev <884686+DenisValeev@users.noreply.github.com>
Agent-Logs-Url: https://github.com/DenisValeev/denisvaleev.github.io/sessions/9345fac5-645c-446f-8479-01967e29d636
---
 apps/enchanted-bunny/index.html | 365 ++++++++++++++++++++++++++------
 tests/enchanted-bunny.spec.js   |  63 +++++-
 tests/home-navigation.spec.js   |   1 -
 3 files changed, 357 insertions(+), 72 deletions(-)

diff --git a/apps/enchanted-bunny/index.html b/apps/enchanted-bunny/index.html
index de4dc84..c6e97b2 100644
--- a/apps/enchanted-bunny/index.html
+++ b/apps/enchanted-bunny/index.html
@@ -576,7 +576,6 @@
       max-width: 30ch;
     }
 
-    .skin-button:focus-visible,
     .skin-button:focus-visible,
     .carrot:focus-visible {
       outline: 2px solid rgba(255, 233, 183, 0.9);
@@ -2184,10 +2183,28 @@
     }
   </style>
 </head>
-<body>
+  <body>
   <main class="scene" id="scene">
     <h1 class="sr-only">Enchanted forest bunny at golden hour</h1>
-    <a class="home-link" href="../../">Home</a>
+    <section class="status-panel" aria-label="Butterfly challenge status">
+      <p class="status-title">Butterfly hunt</p>
+      <div class="status-grid">
+        <div class="status-metric">
+          <span class="status-label">Wave</span>
+          <span class="status-value" id="butterfly-wave-value">1</span>
+        </div>
+        <div class="status-metric">
+          <span class="status-label">Left</span>
+          <span class="status-value" id="butterfly-count-value">4</span>
+        </div>
+        <div class="status-metric">
+          <span class="status-label">Beam</span>
+          <span class="status-value" id="beam-color-value">Verdant</span>
+        </div>
+      </div>
+      <div class="status-note">Clear every butterfly. The swarm returns with one extra flutter and a fresh beam color.</div>
+      <span class="sr-only" id="butterfly-live" aria-live="polite"></span>
+    </section>
     <div class="skin-action">
       <button class="skin-button" id="skin-toggle" type="button" aria-describedby="skin-button-hint">
         <span class="skin-swatch" id="skin-swatch" aria-hidden="true"></span>
@@ -2371,10 +2388,29 @@ <h1 class="sr-only">Enchanted forest bunny at golden hour</h1>
       const skinButtonValue = document.getElementById("skin-button-value");
       const skinSwatch = document.getElementById("skin-swatch");
       const skinLive = document.getElementById("skin-live");
-      if (!scene || !canvas || !ctx || !skinToggle || !skinButtonValue || !skinSwatch || !skinLive) {
+      const butterflyWaveValue = document.getElementById("butterfly-wave-value");
+      const butterflyCountValue = document.getElementById("butterfly-count-value");
+      const beamColorValue = document.getElementById("beam-color-value");
+      const butterflyLive = document.getElementById("butterfly-live");
+      if (
+        !scene ||
+        !canvas ||
+        !ctx ||
+        !skinToggle ||
+        !skinButtonValue ||
+        !skinSwatch ||
+        !skinLive ||
+        !butterflyWaveValue ||
+        !butterflyCountValue ||
+        !beamColorValue ||
+        !butterflyLive
+      ) {
         return;
       }
       const clearing = scene.querySelector(".clearing");
+      const butterflyLayers = Array.from(scene.querySelectorAll(".butterflies"));
+      const farButterflyLayer = butterflyLayers.find((layer) => !layer.classList.contains("butterflies-close"));
+      const closeButterflyLayer = butterflyLayers.find((layer) => layer.classList.contains("butterflies-close"));
       if (!clearing) {
         return;
       }
@@ -2389,7 +2425,21 @@ <h1 class="sr-only">Enchanted forest bunny at golden hour</h1>
       const basketPocket = document.getElementById("basket-pocket");
       const basketFront = document.getElementById("basket-front");
       const basketRim = document.getElementById("basket-rim");
-      if (!beamSvg || !beamSpark || !bunny || !bunnyBody || !bunnyHead || !bunnyCluster || !bunnyShadow || !basket || !basketPocket || !basketFront || !basketRim) {
+      if (
+        !beamSvg ||
+        !beamSpark ||
+        !bunny ||
+        !bunnyBody ||
+        !bunnyHead ||
+        !bunnyCluster ||
+        !bunnyShadow ||
+        !basket ||
+        !basketPocket ||
+        !basketFront ||
+        !basketRim ||
+        !farButterflyLayer ||
+        !closeButterflyLayer
+      ) {
         return;
       }
       const tuftLeft = clearing.querySelector(".tuft-left");
@@ -2435,6 +2485,36 @@ <h1 class="sr-only">Enchanted forest bunny at golden hour</h1>
           swatch: ["#eefcff", "#6bc6c9"]
         }
       ];
+      const beamPalettes = [
+        {
+          id: "verdant",
+          label: "Verdant",
+          glow: "rgba(126, 255, 164, 0.34)",
+          core: "rgba(226, 255, 220, 0.98)",
+          spark: "rgba(170, 255, 181, 0.52)"
+        },
+        {
+          id: "amethyst",
+          label: "Amethyst",
+          glow: "rgba(198, 158, 255, 0.34)",
+          core: "rgba(244, 229, 255, 0.98)",
+          spark: "rgba(210, 186, 255, 0.56)"
+        },
+        {
+          id: "sunflare",
+          label: "Sunflare",
+          glow: "rgba(255, 170, 116, 0.38)",
+          core: "rgba(255, 243, 208, 0.98)",
+          spark: "rgba(255, 196, 136, 0.58)"
+        },
+        {
+          id: "aurora",
+          label: "Aurora",
+          glow: "rgba(121, 240, 255, 0.34)",
+          core: "rgba(225, 255, 252, 0.98)",
+          spark: "rgba(140, 255, 229, 0.54)"
+        }
+      ];
       let currentSkinIndex = 0;
 
       function saveSkinPreference(skinId) {
@@ -2465,12 +2545,23 @@ <h1 class="sr-only">Enchanted forest bunny at golden hour</h1>
         saveSkinPreference(skin.id);
       }
 
+      function applyBeamPalette(index) {
+        const palette = beamPalettes[((index % beamPalettes.length) + beamPalettes.length) % beamPalettes.length];
+        scene.style.setProperty("--beam-glow-color", palette.glow);
+        scene.style.setProperty("--beam-core-color", palette.core);
+        scene.style.setProperty("--beam-spark-color", palette.spark);
+        scene.dataset.beamPalette = palette.id;
+        beamColorValue.textContent = palette.label;
+        return palette;
+      }
+
       const savedSkinId = readSkinPreference();
       const savedSkinIndex = skins.findIndex((skin) => skin.id === savedSkinId);
       if (savedSkinIndex >= 0) {
         currentSkinIndex = savedSkinIndex;
       }
       applySkin(currentSkinIndex);
+      applyBeamPalette(0);
 
       skinToggle.addEventListener("click", () => {
         applySkin(currentSkinIndex + 1, true);
@@ -2488,38 +2579,92 @@ <h1 class="sr-only">Enchanted forest bunny at golden hour</h1>
       const parallaxLayers = Array.from(document.querySelectorAll("[data-depth]"));
       const initialWidth = window.innerWidth;
       const initialHeight = window.innerHeight;
-      const butterflies = Array.from(document.querySelectorAll(".butterfly")).map((element) => ({
-        element,
-        wings: Array.from(element.querySelectorAll(".wing")),
-        burst: element.querySelector(".butterfly-burst"),
-        centerX: Number(element.dataset.x),
-        centerY: Number(element.dataset.y),
-        radiusX: Number(element.dataset.rx),
-        radiusY: Number(element.dataset.ry),
-        speed: Number(element.dataset.speed),
-        scale: Number(element.dataset.scale),
-        phase: Number(element.dataset.phase),
-        baseOpacity: element.classList.contains("butterfly-close") ? 0.72 : 0.92,
-        isClose: element.classList.contains("butterfly-close"),
-        status: "idle",
-        offsetX: 0,
-        offsetY: 0,
-        currentX: initialWidth * Number(element.dataset.x),
-        currentY: initialHeight * Number(element.dataset.y),
-        currentScale: Number(element.dataset.scale),
-        rotation: 0,
-        targetStart: -100000,
-        targetDuration: 0,
-        burstStart: -100000,
-        burstDuration: 0,
+      const butterflyDescriptors = ["amber", "honey", "apricot", "golden", "violet", "glacier", "rose", "mint", "starlit", "cinder"];
+
+      function butterflyLabel(index, isClose) {
+        const descriptor = butterflyDescriptors[index % butterflyDescriptors.length];
+        return "Guide the " + (isClose ? "near " : "") + descriptor + " butterfly with the bunny's magic";
+      }
+
+      function setButterflyStatus(butterfly, status) {
+        butterfly.status = status;
+        butterfly.element.dataset.status = status;
+      }
+
+      function createButterflyState(element, index) {
+        const isClose = element.classList.contains("butterfly-close");
+        const scale = Number(element.dataset.scale || (isClose ? 1.18 : 0.9));
+        const state = {
+          element,
+          wings: Array.from(element.querySelectorAll(".wing")),
+          burst: element.querySelector(".butterfly-burst"),
+          centerX: Number(element.dataset.x || (isClose ? 0.24 : 0.48)),
+          centerY: Number(element.dataset.y || (isClose ? 0.38 : 0.24)),
+          radiusX: Number(element.dataset.rx || (isClose ? 0.1 : 0.06)),
+          radiusY: Number(element.dataset.ry || (isClose ? 0.06 : 0.04)),
+          speed: Number(element.dataset.speed || (isClose ? 0.84 : 0.96)),
+          scale,
+          phase: Number(element.dataset.phase || index * 0.7),
+          baseOpacity: isClose ? 0.72 : 0.92,
+          isClose,
+          id: index,
+          status: "idle",
+          offsetX: 0,
+          offsetY: 0,
+          currentX: initialWidth * Number(element.dataset.x || (isClose ? 0.24 : 0.48)),
+          currentY: initialHeight * Number(element.dataset.y || (isClose ? 0.38 : 0.24)),
+          currentScale: scale,
+          rotation: 0,
+          targetStart: -100000,
+          targetDuration: 0,
+          burstStart: -100000,
+          burstDuration: 0,
+          revealStart: -100000,
+          revealDuration: 0,
+          lockX: initialWidth * Number(element.dataset.x || (isClose ? 0.24 : 0.48)),
+          lockY: initialHeight * Number(element.dataset.y || (isClose ? 0.38 : 0.24)),
+          lockRotation: 0,
+          lockScale: scale
+        };
+        element.dataset.status = "idle";
+        element.style.visibility = "visible";
+        element.disabled = false;
+        element.tabIndex = 0;
+        if (!element.getAttribute("aria-label")) {
+          element.setAttribute("aria-label", butterflyLabel(index, isClose));
+        }
+        return state;
+      }
+
+      function createButterflyElement(index, isClose) {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = isClose ? "butterfly butterfly-close" : "butterfly";
+        button.setAttribute("aria-label", butterflyLabel(index, isClose));
+
+        const leftWing = document.createElement("span");
+        leftWing.className = "wing wing-left";
+        const rightWing = document.createElement("span");
+        rightWing.className = "wing wing-right";
+        const body = document.createElement("span");
+        body.className = "butterfly-body";
+        const burst = document.createElement("span");
+        burst.className = "butterfly-burst";
+
+        button.append(leftWing, rightWing, body, burst);
+        (isClose ? closeButterflyLayer : farButterflyLayer).appendChild(button);
+        return button;
+      }
+
+      const butterflies = Array.from(document.querySelectorAll(".butterfly")).map((element, index) => createButterflyState(element, index));
+      const initialButterflyCount = butterflies.length;
+      const butterflyChallenge = {
+        wave: 1,
+        clearedWaves: 0,
         respawnAt: 0,
-        revealStart: -100000,
-        revealDuration: 0,
-        lockX: initialWidth * Number(element.dataset.x),
-        lockY: initialHeight * Number(element.dataset.y),
-        lockRotation: 0,
-        lockScale: Number(element.dataset.scale)
-      }));
+        nextId: butterflies.length,
+        remaining: butterflies.length
+      };
       const carrots = Array.from(document.querySelectorAll(".carrot"));
       const carrotStates = carrots.map((element, index) => {
         const baseRotation = Number(element.dataset.rotation || 0);
@@ -3129,7 +3274,7 @@ <h1 class="sr-only">Enchanted forest bunny at golden hour</h1>
 
       function chooseButterflyPath(butterfly) {
         const templates = butterfly.isClose ? butterflySpawnTemplates.close : butterflySpawnTemplates.far;
-        const others = butterflies.filter((item) => item !== butterfly && item.status !== "respawning");
+        const others = butterflies.filter((item) => item !== butterfly && item.status !== "cleared");
 
         for (let attempt = 0; attempt < 12; attempt += 1) {
           const template = templates[Math.floor(rand(0, templates.length))];
@@ -3165,6 +3310,77 @@ <h1 class="sr-only">Enchanted forest bunny at golden hour</h1>
         butterfly.rotation = 0;
       }
 
+      function updateButterflyHud(message = "") {
+        const remaining = butterflies.filter((butterfly) => butterfly.status !== "cleared").length;
+        butterflyChallenge.remaining = remaining;
+        butterflyWaveValue.textContent = String(butterflyChallenge.wave);
+        butterflyCountValue.textContent = String(remaining);
+        scene.dataset.butterflyWave = String(butterflyChallenge.wave);
+        scene.dataset.butterfliesRemaining = String(remaining);
+        scene.dataset.butterflyCount = String(butterflies.length);
+        if (message) {
+          butterflyLive.textContent = message;
+        }
+      }
+
+      function shouldSpawnCloseButterfly(index) {
+        return index % 3 === 0;
+      }
+
+      function registerButterflyInteraction(butterfly) {
+        butterfly.element.addEventListener("click", (event) => {
+          event.preventDefault();
+
+          if (butterfly.status !== "idle" || interactionsLocked()) {
+            return;
+          }
+
+          beginButterflyTarget(butterfly, performance.now());
+        });
+      }
+
+      function ensureButterflyRoster(targetCount) {
+        while (butterflies.length < targetCount) {
+          const id = butterflyChallenge.nextId;
+          const isClose = shouldSpawnCloseButterfly(id + 1);
+          const element = createButterflyElement(id, isClose);
+          const butterfly = createButterflyState(element, id);
+          registerButterflyInteraction(butterfly);
+          butterflies.push(butterfly);
+          butterflyChallenge.nextId += 1;
+        }
+      }
+
+      function reviveButterfly(butterfly, time, delay = 0) {
+        applyButterflyPath(butterfly, chooseButterflyPath(butterfly));
+        butterfly.revealStart = time + delay;
+        butterfly.revealDuration = reducedMotion ? 220 : 420;
+        butterfly.element.disabled = true;
+        butterfly.element.tabIndex = -1;
+        butterfly.element.style.visibility = "visible";
+        butterfly.element.classList.remove("is-targeted", "is-bursting");
+        setButterflyStatus(butterfly, "revealing");
+        setButterflySparkle(butterfly, 0, 0);
+      }
+
+      function beginButterflyWave(time) {
+        butterflyChallenge.respawnAt = 0;
+        const targetCount = initialButterflyCount + butterflyChallenge.clearedWaves;
+        ensureButterflyRoster(targetCount);
+        shuffleList(butterflies).forEach((butterfly, index) => {
+          reviveButterfly(butterfly, time, index * (reducedMotion ? 18 : 44));
+        });
+        updateButterflyHud("Wave " + butterflyChallenge.wave + " blooms with " + targetCount + " butterflies.");
+      }
+
+      function finishButterflyWave(time) {
+        butterflyChallenge.clearedWaves += 1;
+        butterflyChallenge.wave = butterflyChallenge.clearedWaves + 1;
+        butterflyChallenge.respawnAt = time + (reducedMotion ? 220 : 520);
+        const palette = applyBeamPalette(butterflyChallenge.clearedWaves);
+        updateButterflyHud("Forest cleared. The beams shift to " + palette.label + " and one more butterfly joins the swarm.");
+      }
+
       function getCarrotSlot(state) {
         const layouts = {
           1: [
@@ -3331,7 +3547,7 @@ <h1 class="sr-only">Enchanted forest bunny at golden hour</h1>
       }
 
       function beginButterflyTarget(butterfly, time) {
-        butterfly.status = "targeting";
+        setButterflyStatus(butterfly, "targeting");
         butterfly.targetStart = time;
         butterfly.targetDuration = reducedMotion ? 320 : 520;
         butterfly.lockX = butterfly.currentX;
@@ -3339,6 +3555,8 @@ <h1 class="sr-only">Enchanted forest bunny at golden hour</h1>
         butterfly.lockRotation = butterfly.rotation;
         butterfly.lockScale = butterfly.currentScale || butterfly.scale;
         butterfly.element.disabled = true;
+        butterfly.element.tabIndex = -1;
+        butterfly.element.style.visibility = "visible";
         butterfly.element.classList.remove("is-bursting");
         butterfly.element.classList.add("is-targeted");
         setButterflySparkle(butterfly, 0, 0);
@@ -3357,10 +3575,9 @@ <h1 class="sr-only">Enchanted forest bunny at golden hour</h1>
       }
 
       function startButterflyBurst(butterfly, time) {
-        butterfly.status = "burst";
+        setButterflyStatus(butterfly, "burst");
         butterfly.burstStart = time;
         butterfly.burstDuration = reducedMotion ? 260 : 460;
-        butterfly.respawnAt = time + butterfly.burstDuration + (reducedMotion ? 220 : 520);
         butterfly.element.classList.remove("is-targeted");
         butterfly.element.classList.add("is-bursting");
         collection.active = butterfly;
@@ -3377,7 +3594,6 @@ <h1 class="sr-only">Enchanted forest bunny at golden hour</h1>
 
       function finishButterflyTarget(butterfly) {
         butterfly.element.classList.remove("is-targeted", "is-bursting");
-        butterfly.element.style.opacity = "0";
         setButterflySparkle(butterfly, 0, 0);
         collection.active = null;
         collection.kind = null;
@@ -3388,14 +3604,20 @@ <h1 class="sr-only">Enchanted forest bunny at golden hour</h1>
         collection.focusStrength = 0;
       }
 
-      function respawnButterfly(butterfly, time) {
-        applyButterflyPath(butterfly, chooseButterflyPath(butterfly));
-        butterfly.status = "revealing";
-        butterfly.revealStart = time;
-        butterfly.revealDuration = reducedMotion ? 220 : 420;
+      function clearButterfly(butterfly, time) {
+        finishButterflyTarget(butterfly);
         butterfly.element.disabled = true;
-        butterfly.element.classList.remove("is-targeted", "is-bursting");
-        setButterflySparkle(butterfly, 0, 0);
+        butterfly.element.tabIndex = -1;
+        butterfly.element.style.opacity = "0";
+        butterfly.element.style.visibility = "hidden";
+        setButterflyStatus(butterfly, "cleared");
+        if (document.activeElement === butterfly.element) {
+          butterfly.element.blur();
+        }
+        updateButterflyHud();
+        if (butterflies.every((item) => item.status === "cleared")) {
+          finishButterflyWave(time);
+        }
       }
 
       function updateBasketMotion(time) {
@@ -3811,15 +4033,7 @@ <h1 class="sr-only">Enchanted forest bunny at golden hour</h1>
       });
 
       butterflies.forEach((butterfly) => {
-        butterfly.element.addEventListener("click", (event) => {
-          event.preventDefault();
-
-          if (butterfly.status !== "idle" || interactionsLocked()) {
-            return;
-          }
-
-          beginButterflyTarget(butterfly, performance.now());
-        });
+        registerButterflyInteraction(butterfly);
       });
 
       basket.addEventListener("click", (event) => {
@@ -3916,8 +4130,12 @@ <h1 class="sr-only">Enchanted forest bunny at golden hour</h1>
 
       butterflies.forEach((butterfly) => {
         butterfly.element.disabled = false;
+        butterfly.element.tabIndex = 0;
+        butterfly.element.style.visibility = "visible";
+        setButterflyStatus(butterfly, "idle");
         setButterflySparkle(butterfly, 0, 0);
       });
+      updateButterflyHud("Clear the butterflies to grow the swarm and remix the beams.");
 
       setupOfflineBundle();
       updateLayout();
@@ -4015,14 +4233,11 @@ <h1 class="sr-only">Enchanted forest bunny at golden hour</h1>
           let vanish = 0;
           let burst = 0;
 
-          if (butterfly.status === "respawning") {
-            if (time >= butterfly.respawnAt) {
-              respawnButterfly(butterfly, time);
-            } else {
-              butterfly.element.style.opacity = "0";
-              butterfly.element.style.transform = "translate3d(-9999px, -9999px, 0)";
-              return;
-            }
+          if (butterfly.status === "cleared") {
+            butterfly.element.style.visibility = "hidden";
+            butterfly.element.style.opacity = "0";
+            butterfly.element.style.transform = "translate3d(-9999px, -9999px, 0)";
+            return;
           }
 
           if (butterfly.status === "targeting") {
@@ -4055,9 +4270,7 @@ <h1 class="sr-only">Enchanted forest bunny at golden hour</h1>
             collection.focusStrength = 0.26 * (1 - raw);
 
             if (raw >= 1) {
-              butterfly.status = "respawning";
-              finishButterflyTarget(butterfly);
-              butterfly.element.style.opacity = "0";
+              clearButterfly(butterfly, time);
               return;
             }
           } else if (butterfly.status !== "targeting") {
@@ -4082,13 +4295,22 @@ <h1 class="sr-only">Enchanted forest bunny at golden hour</h1>
             displayScale = butterfly.scale * (1 + bob * 0.003);
 
             if (butterfly.status === "revealing") {
+              if (time < butterfly.revealStart) {
+                butterfly.element.style.visibility = "hidden";
+                butterfly.element.style.opacity = "0";
+                butterfly.element.style.transform = "translate3d(-9999px, -9999px, 0)";
+                return;
+              }
+
               const reveal = clamp((time - butterfly.revealStart) / butterfly.revealDuration, 0, 1);
               alpha *= reveal;
               displayScale *= 0.96 + reveal * 0.04;
+              butterfly.element.style.visibility = "visible";
 
               if (reveal >= 1) {
-                butterfly.status = "idle";
+                setButterflyStatus(butterfly, "idle");
                 butterfly.element.disabled = false;
+                butterfly.element.tabIndex = 0;
               }
             }
           }
@@ -4110,6 +4332,7 @@ <h1 class="sr-only">Enchanted forest bunny at golden hour</h1>
             displayScale.toFixed(3) +
             ")";
           butterfly.element.style.opacity = alpha.toFixed(3);
+          butterfly.element.style.visibility = "visible";
 
           butterfly.wings[0].style.transform = "rotate(" + (-26 - wingTilt).toFixed(2) + "deg) scaleX(" + flap.toFixed(3) + ")";
           butterfly.wings[1].style.transform = "rotate(" + (26 + wingTilt).toFixed(2) + "deg) scaleX(" + flap.toFixed(3) + ")";
@@ -4228,6 +4451,10 @@ <h1 class="sr-only">Enchanted forest bunny at golden hour</h1>
           scheduleIdleAttention(time);
         }
 
+        if (butterflyChallenge.respawnAt && time >= butterflyChallenge.respawnAt) {
+          beginButterflyWave(time);
+        }
+
         updateCollection(time);
         carrotStates.forEach((state) => {
           if (state.phase === "release") {
diff --git a/tests/enchanted-bunny.spec.js b/tests/enchanted-bunny.spec.js
index 60a8c31..bb0b749 100644
--- a/tests/enchanted-bunny.spec.js
+++ b/tests/enchanted-bunny.spec.js
@@ -1,10 +1,10 @@
 const { test, expect } = require('@playwright/test');
 
 test.describe('Enchanted Forest Bunny app', () => {
-  test('exposes install metadata, offline registration, and reskin controls', async ({ page }) => {
+  test('exposes install metadata, offline registration, and shape-shifting reskin controls', async ({ page }) => {
     await page.goto('/apps/enchanted-bunny/');
 
-    await expect(page.locator('.home-link')).toHaveAttribute('href', '../../');
+    await expect(page.locator('.home-link')).toHaveCount(0);
     await expect(page.locator('link[rel="apple-touch-icon"]')).toHaveAttribute('href', 'apple-touch-icon.png');
     await expect(page.locator('meta[name="apple-mobile-web-app-capable"]')).toHaveAttribute('content', 'yes');
 
@@ -14,11 +14,45 @@ test.describe('Enchanted Forest Bunny app', () => {
     await expect(skinButton).toBeVisible();
     await expect(skinLabel).toHaveText('Golden Burrow');
     await expect(page.locator('body')).toHaveAttribute('data-skin', 'golden');
+    await expect(page.locator('#beam-color-value')).toHaveText('Verdant');
+
+    const goldenShapes = await page.evaluate(() => {
+      const wing = document.querySelector('.wing-left');
+      const body = document.querySelector('.body');
+      const tree = document.querySelector('.tree');
+      const tuft = document.querySelector('.tuft-left');
+
+      return {
+        wingClipPath: wing ? getComputedStyle(wing).clipPath : null,
+        bodyClipPath: body ? getComputedStyle(body).clipPath : null,
+        treeTransform: tree ? getComputedStyle(tree).transform : null,
+        tuftClipPath: tuft ? getComputedStyle(tuft, '::before').clipPath : null,
+      };
+    });
 
     await skinButton.click();
     await expect(skinLabel).toHaveText('Moonlit Hare');
     await expect(page.locator('body')).toHaveAttribute('data-skin', 'moonlit');
 
+    const moonlitShapes = await page.evaluate(() => {
+      const wing = document.querySelector('.wing-left');
+      const body = document.querySelector('.body');
+      const tree = document.querySelector('.tree');
+      const tuft = document.querySelector('.tuft-left');
+
+      return {
+        wingClipPath: wing ? getComputedStyle(wing).clipPath : null,
+        bodyClipPath: body ? getComputedStyle(body).clipPath : null,
+        treeTransform: tree ? getComputedStyle(tree).transform : null,
+        tuftClipPath: tuft ? getComputedStyle(tuft, '::before').clipPath : null,
+      };
+    });
+
+    expect(moonlitShapes.wingClipPath).not.toBe(goldenShapes.wingClipPath);
+    expect(moonlitShapes.bodyClipPath).not.toBe(goldenShapes.bodyClipPath);
+    expect(moonlitShapes.treeTransform).not.toBe(goldenShapes.treeTransform);
+    expect(moonlitShapes.tuftClipPath).not.toBe(goldenShapes.tuftClipPath);
+
     const registrationState = await page.evaluate(async () => {
       if (!('serviceWorker' in navigator)) {
         return { supported: false, registered: false };
@@ -38,4 +72,29 @@ test.describe('Enchanted Forest Bunny app', () => {
     expect(registrationState.scope).toContain('127.0.0.1:4173/');
     expect(registrationState.savedSkin).toBe('moonlit');
   });
+
+  test('clearing every butterfly respawns the swarm with one extra and remixes the beam color', async ({ page }) => {
+    await page.goto('/apps/enchanted-bunny/');
+
+    const scene = page.locator('#scene');
+    await expect(scene).toHaveAttribute('data-butterfly-wave', '1');
+    await expect(scene).toHaveAttribute('data-butterflies-remaining', '4');
+    await expect(scene).toHaveAttribute('data-butterfly-count', '4');
+    await expect(scene).toHaveAttribute('data-beam-palette', 'verdant');
+    await expect(page.locator('.butterfly')).toHaveCount(4);
+
+    for (const remaining of ['3', '2', '1']) {
+      await page.locator('.butterfly[data-status="idle"]').first().dispatchEvent('click');
+      await expect(page.locator('#butterfly-count-value')).toHaveText(remaining, { timeout: 4000 });
+    }
+
+    await page.locator('.butterfly[data-status="idle"]').first().dispatchEvent('click');
+
+    await expect(scene).toHaveAttribute('data-butterfly-wave', '2', { timeout: 5000 });
+    await expect(scene).toHaveAttribute('data-butterfly-count', '5', { timeout: 5000 });
+    await expect(scene).toHaveAttribute('data-butterflies-remaining', '5', { timeout: 5000 });
+    await expect(scene).toHaveAttribute('data-beam-palette', 'amethyst', { timeout: 5000 });
+    await expect(page.locator('#beam-color-value')).toHaveText('Amethyst');
+    await expect(page.locator('.butterfly')).toHaveCount(5);
+  });
 });
diff --git a/tests/home-navigation.spec.js b/tests/home-navigation.spec.js
index 8881f55..b76decd 100644
--- a/tests/home-navigation.spec.js
+++ b/tests/home-navigation.spec.js
@@ -9,7 +9,6 @@ const appPages = [
   { name: 'Slang', path: '/apps/slang/' },
   { name: 'Slang (All slang)', path: '/apps/slang/all-slang.html' },
   { name: 'Cosine Similarity Lab', path: '/apps/similarity-report/' },
-  { name: 'Enchanted Forest Bunny', path: '/apps/enchanted-bunny/' },
   { name: 'Value Formatter', path: '/apps/value-formatter/' },
   { name: 'Asset Observatory', path: '/apps/asset-observatory/' },
 ];

From e4c9fa09b5dce8279f479e13cf4d3ada5e01bff3 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 22 Mar 2026 01:05:43 +0000
Subject: [PATCH 4/4] chore: polish bunny challenge copy

Co-authored-by: DenisValeev <884686+DenisValeev@users.noreply.github.com>
Agent-Logs-Url: https://github.com/DenisValeev/denisvaleev.github.io/sessions/9345fac5-645c-446f-8479-01967e29d636
---
 apps/enchanted-bunny/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/enchanted-bunny/index.html b/apps/enchanted-bunny/index.html
index c6e97b2..3a76c1e 100644
--- a/apps/enchanted-bunny/index.html
+++ b/apps/enchanted-bunny/index.html
@@ -2202,7 +2202,7 @@ <h1 class="sr-only">Enchanted forest bunny at golden hour</h1>
           <span class="status-value" id="beam-color-value">Verdant</span>
         </div>
       </div>
-      <div class="status-note">Clear every butterfly. The swarm returns with one extra flutter and a fresh beam color.</div>
+      <div class="status-note">Clear every butterfly. The swarm returns with one extra butterfly and a fresh beam color.</div>
       <span class="sr-only" id="butterfly-live" aria-live="polite"></span>
     </section>
     <div class="skin-action">