Okey, now we see the result in the bottom of the page but still there are no clouds.

script.js

@@ -51,26 +51,25 @@ document.addEventListener('DOMContentLoaded', async function() {
         }
     });
 function createClouds() {
-        cloudContainer.innerHTML = '';
-        
-        // Calculate positions for two rows of clouds
-        const containerWidth = cloudContainer.offsetWidth;
-        const containerHeight = cloudContainer.offsetHeight;
-        
-        // First row (top)
-        for (let i = 0; i < 5; i++) {
-            const x = (i + 0.5) * (containerWidth / 5.5);
-            const y = containerHeight * 0.3;
-            createCloud(cloudData[i], x, y, 60);
-        }
+    cloudContainer.innerHTML = '';
+    
+    const containerWidth = cloudContainer.offsetWidth;
+    const containerHeight = cloudContainer.offsetHeight;
+    
+    // Create a circular layout for initial clouds
+    const centerX = containerWidth / 2;
+    const centerY = containerHeight / 2;
+    const radius = Math.min(containerWidth, containerHeight) * 0.35;
+    
+    cloudData.forEach((cloud, i) => {
+        const angle = (i / cloudData.length) * Math.PI * 2;
+        const x = centerX + Math.cos(angle) * radius;
+        const y = centerY + Math.sin(angle) * radius;
         
-        // Second row (bottom)
-        for (let i = 5; i < 10; i++) {
-            const x = (i - 4.5) * (containerWidth / 5.5);
-            const y = containerHeight * 0.7;
-            createCloud(cloudData[i], x, y, 60);
-        }
-    }
+        // Create cloud with base size
+        createCloud(cloud, x, y, 40);
+    });
+}
 function createCloud(data, x, y, baseSize) {
     const cloud = document.createElement('custom-cloud');
     cloud.setAttribute('text', data.text);
@@ -82,13 +81,17 @@ function createCloud(data, x, y, baseSize) {
     cloud.style.top = `${y}px`;
     cloud.style.transform = 'translate(-50%, -50%)';
     
-    // Scale based on percentage
-    const scale = 0.5 + (data.percentage / 100);
+    // Scale based on percentage (even if 0%)
+    const scale = 0.7 + (data.percentage / 150);
     cloud.style.transform += ` scale(${scale})`;
     
-    // Add animation delay for staggered appearance
+    // Add animation
+    cloud.style.animation = `float 3s ease-in-out infinite`;
     cloud.style.animationDelay = `${Math.random() * 0.5}s`;
     
+    // Make sure clouds are visible even at 0%
+    cloud.style.opacity = '0.9';
+    
     cloudContainer.appendChild(cloud);
     return cloud;
 }
@@ -152,8 +155,14 @@ function updateClouds() {
         const y = centerY + Math.sin(angle) * radius;
         
         // Create cloud with size based on percentage
-        const baseSize = 30 + (cloud.percentage * 0.7);
+        const baseSize = 40 + (cloud.percentage * 0.8);
         createCloud(cloud, x, y, baseSize);
+        
+        // Make sure clouds are visible even at 0%
+        if (cloud.percentage === 0) {
+            const cloudElement = cloudContainer.lastChild;
+            cloudElement.style.opacity = '0.6';
+        }
     });
 }
 function showResults(inputText, similarities) {