still no map

script.js

@@ -30,7 +30,12 @@ previewButton.addEventListener('click', function() {
     async function generateStarMap() {
         const containerWidth = starMapContainer.offsetWidth;
         const containerHeight = starMapContainer.offsetHeight;
-        const mapName = mapNameInput.value || 'Unnamed Star Map';
+        
+        // Clear and prepare container
+        starMapContainer.innerHTML = '';
+        starMapContainer.style.position = 'relative';
+        starMapContainer.style.background = 'radial-gradient(ellipse at center, #1a202c 0%, #000000 100%)';
+const mapName = mapNameInput.value || 'Unnamed Star Map';
         const latitude = parseFloat(latitudeInput.value) || 0;
         const longitude = parseFloat(longitudeInput.value) || 0;
         const starDensity = starDensitySelect.value;
@@ -58,29 +63,36 @@ previewButton.addEventListener('click', function() {
                 return Math.abs(starLat - latitude) < 45 && 
                        Math.abs(starLng - longitude) < 45;
             });
-
-            // Generate stars
-            visibleStars.forEach(star => {
+            // Generate stars with proper positioning
+            visibleStars.slice(0, 200).forEach(star => {
                 const starElement = document.createElement('div');
                 starElement.className = 'star';
                 
-                // Convert celestial coordinates to container coordinates
+                // Normalize coordinates to container
                 const x = ((star.ra - longitude + 180) % 360) / 360 * containerWidth;
                 const y = ((star.dec - latitude + 90) % 180) / 180 * containerHeight;
                 
-                // Size based on magnitude (simplified)
+                // Random size and brightness
                 const size = 1 + Math.random() * 3;
+                const brightness = 0.5 + Math.random() * 0.5;
                 
-                starElement.style.width = `${size}px`;
-                starElement.style.height = `${size}px`;
-                starElement.style.left = `${x}px`;
-                starElement.style.top = `${y}px`;
-                starElement.style.animationDelay = `${Math.random() * 2}s`;
+                starElement.style.cssText = `
+                    position: absolute;
+                    width: ${size}px;
+                    height: ${size}px;
+                    left: ${x}px;
+                    top: ${y}px;
+                    background: white;
+                    border-radius: 50%;
+                    box-shadow: 0 0 ${size * 2}px ${size * 0.5}px rgba(255, 255, 255, ${brightness});
+                    animation: twinkle ${2 + Math.random() * 3}s infinite alternate;
+                    opacity: ${brightness};
+                    z-index: 2;
+                `;
                 
                 starMapContainer.appendChild(starElement);
             });
-
-            // Remove loading text
+// Remove loading text
             starMapContainer.removeChild(loadingText);
             // Real constellations data with more accurate star positions
             const constellations = [

style.css

@@ -12,12 +12,14 @@ body {
     position: absolute;
     background-color: white;
     border-radius: 50%;
-    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.7);
-    animation: twinkle 3s infinite alternate;
     pointer-events: none;
-    z-index: 2;
 }
 
+#starMapContainer {
+    position: relative;
+    background: radial-gradient(ellipse at center, #1a202c 0%, #000000 100%);
+    overflow: hidden;
+}
 .constellation-star {
     position: absolute;
     background-color: #fff;
@@ -26,9 +28,19 @@ body {
     animation: pulse 2s infinite alternate;
     z-index: 3;
 }
-#starMapContainer {
-    position: relative;
-    background: radial-gradient(ellipse at center, #1a202c 0%, #000000 100%);
+@keyframes twinkle {
+    0% { transform: scale(0.8); opacity: 0.7; }
+    50% { transform: scale(1); opacity: 1; }
+    100% { transform: scale(0.8); opacity: 0.7; }
+}
+
+.constellation-line {
+    position: absolute;
+    transform-origin: left center;
+    z-index: 1;
+    background: rgba(255, 255, 255, 0.7);
+    height: 1px;
+    box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
 }
 .constellation-star {
     position: absolute;