--- a
+++ b/web/style.css.new
@@ -0,0 +1,70 @@
+/* DNA Helix Animation */
+.dna-helix {
+    position: relative;
+    width: 200px;
+    height: 400px;
+    margin: 0 auto;
+    perspective: 1200px;
+    transform-style: preserve-3d;
+}
+
+.base-pair {
+    position: absolute;
+    width: 100%;
+    height: 20px;
+    animation: rotate 8s linear infinite;
+    transform-style: preserve-3d;
+}
+
+.base {
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    color: white;
+    text-shadow: 0 0 3px rgba(0,0,0,0.5);
+    box-shadow: 0 0 15px rgba(0,0,0,0.2);
+}
+
+.left-base {
+    left: 35px;
+    background: #FF0066;
+    animation: pulse 3s ease-in-out infinite;
+    filter: brightness(1.1);
+}
+
+.right-base {
+    right: 35px;
+    background: #00B7FF;
+    animation: pulse 3s ease-in-out infinite;
+    filter: brightness(1.1);
+}
+
+.base-connector {
+    position: absolute;
+    left: 50%;
+    width: 90px;
+    height: 3px;
+    background: linear-gradient(90deg, 
+        rgba(255, 0, 102, 0.8), 
+        rgba(255, 255, 255, 0.3) 50%,
+        rgba(0, 183, 255, 0.8)
+    );
+    transform: translateX(-50%);
+    box-shadow: 0 0 8px rgba(0,0,0,0.15);
+}
+
+@keyframes rotate {
+    0% { transform: rotateY(0deg) translateZ(20px); }
+    100% { transform: rotateY(360deg) translateZ(20px); }
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); opacity: 0.9; filter: brightness(1.1); }
+    50% { transform: scale(1.15); opacity: 1; filter: brightness(1.3); }
+    100% { transform: scale(1); opacity: 0.9; filter: brightness(1.1); }
+}