update

dna-slot-machine.html

@@ -19,9 +19,10 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            justify-content: center;
+            justify-content: flex-start;
             min-height: 100vh;
             position: relative;
+            padding-top: 10px;
         }
 
         body::before {
@@ -102,7 +103,7 @@
         .machine-container {
             background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
             border-radius: 20px;
-            padding: 20px;
+            padding: 15px;
             padding-right: 100px;
             box-shadow: 0 20px 40px rgba(0,0,0,0.5), 
                         inset 0 2px 10px rgba(255,255,255,0.1);
@@ -114,8 +115,8 @@
 
         .title {
             text-align: center;
-            font-size: 2.5rem;
-            margin-bottom: 20px;
+            font-size: 2rem;
+            margin-bottom: 15px;
             background: linear-gradient(45deg, #00ff88, #00ffff, #ff00ff);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
@@ -129,7 +130,7 @@
             align-items: center;
             justify-content: center;
             gap: 20px;
-            margin-bottom: 20px;
+            margin-bottom: 15px;
         }
 
         .cell-type-label {
@@ -167,7 +168,7 @@
             background: #000;
             border: 3px solid #333;
             border-radius: 10px;
-            padding: 20px;
+            padding: 15px;
             max-width: 100%;
             position: relative;
             box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
@@ -178,7 +179,7 @@
             display: flex;
             gap: 1px;
             min-width: fit-content;
-            padding: 5px 0;
+            padding: 3px 0;
             justify-content: center;
             flex-wrap: wrap;
             max-width: 1200px;
@@ -221,8 +222,8 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            gap: 20px;
-            margin-top: 30px;
+            gap: 15px;
+            margin-top: 20px;
         }
 
         .spin-button {
@@ -322,7 +323,7 @@
             background: #0a0a0a;
             border: 2px solid #333;
             border-radius: 10px;
-            padding: 25px 30px 15px 30px;
+            padding: 20px 25px 12px 25px;
             font-family: 'Courier New', monospace;
             font-size: 0.9rem;
             letter-spacing: 1px;
@@ -330,7 +331,7 @@
             max-width: 1200px;
             text-align: left;
             word-wrap: break-word;
-            line-height: 1.5;
+            line-height: 1.4;
             position: relative;
             margin: 0 auto;
         }
@@ -351,14 +352,14 @@
 
         .info {
             text-align: center;
-            margin-top: 20px;
+            margin-top: 15px;
             color: #888;
             font-size: 0.9rem;
         }
 
         .lab-credit {
             text-align: center;
-            margin-top: 15px;
+            margin-top: 10px;
             font-size: 1.1rem;
         }