Update style.css

style.css

@@ -1,4 +1,5 @@
-```css
+/* Updated style.css with CSS-generated starfield */
+
 /* Base styles */
 body {
   margin: 0;
@@ -7,24 +8,20 @@ body {
   font-family: "Courier New", Courier, monospace;
   background: #000;
   color: #00ffcc;
+  /* Multiple radial gradients create starfield dots */
+  background-image:
+    radial-gradient(circle at 10% 20%, #fff 1px, transparent 0),
+    radial-gradient(circle at 30% 40%, #fff 1px, transparent 0),
+    radial-gradient(circle at 50% 80%, #fff 1px, transparent 0),
+    radial-gradient(circle at 70% 30%, #fff 2px, transparent 0),
+    radial-gradient(circle at 90% 60%, #fff 1px, transparent 0);
+  background-size: 100px 100px;
+  animation: starfield 60s linear infinite;
 }
 
-/* Starfield animated background */
 @keyframes starfield {
   from { background-position: 0 0; }
-  to   { background-position: -10000px 5000px; }
-}
-body::before {
-  content: '';
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIHWP4////GQAJ/wPlARZGoQAAAABJRU5ErkJggg==') repeat;
-  opacity: 0.2;
-  animation: starfield 120s linear infinite;
-  z-index: -2;
+  to   { background-position: -200px 200px; }
 }
 
 /* Header styling */
@@ -45,7 +42,7 @@ body::before {
   color: #00ffcc;
 }
 
-/* Interface layout adjustments */
+/* Interface layout */
 .interface {
   display: flex;
   flex-direction: column;
@@ -55,7 +52,7 @@ body::before {
   box-sizing: border-box;
 }
 
-/* Avatar styling */
+/* Avatar */
 #avatar {
   width: 150px;
   height: 150px;
@@ -63,7 +60,6 @@ body::before {
   border-radius: 50%;
   overflow: hidden;
   margin: 0 auto 1rem;
-  align-self: center;
 }
 #avatar img {
   width: 100%;
@@ -80,7 +76,7 @@ body::before {
   100% { box-shadow: 0 0 5px #00ffcc; transform: scale(1); }
 }
 
-/* Chatbox styling */
+/* Chatbox */
 #chatbox {
   flex: 1;
   overflow-y: auto;
@@ -93,7 +89,7 @@ body::before {
   line-height: 1.6;
 }
 
-/* Message bubbles */
+/* Bubbles */
 .bubble {
   padding: 0.75rem;
   margin: 0.5rem 0;
@@ -118,7 +114,7 @@ body::before {
   to   { opacity: 1; transform: translateY(0); }
 }
 
-/* Input form styling */
+/* Form */
 form {
   display: flex;
   gap: 1rem;
@@ -145,14 +141,13 @@ button:hover {
   background-color: #00ffaa;
 }
 
-/* Overlay for kill-phrase glitch */
+/* Overlay glitch */
 #overlay {
   position: fixed;
   top: 0; left: 0; right: 0; bottom: 0;
   background: rgba(255,0,0,0.7);
   pointer-events: none;
   opacity: 0;
-  transition: opacity 0.1s ease-in-out;
+  transition: opacity 0.1s;
   z-index: 9999;
 }
-```