Update style.css

style.css

@@ -27,7 +27,7 @@ h1 {
   background-color: #fff;
   box-shadow: 0 8px 16px rgba(0,0,0,0.05);
   width: 100%;
-  max-width: 880px;
+  max-width: 1100px;
 }
 
 /* Controls */
@@ -62,15 +62,35 @@ button:hover {
   color: #007aff;
 }
 
-/* Grid + Stats Layout */
-.grid-and-stats {
+/* Layout */
+.main-layout {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: flex-start;
-  gap: 24px;
+  gap: 32px;
   flex-wrap: wrap;
 }
 
+/* Definitions (Left Column) */
+.definitions {
+  flex: 1;
+  min-width: 200px;
+  max-width: 260px;
+}
+
+.definitions h2 {
+  font-size: 18px;
+  margin-bottom: 6px;
+  color: #007aff;
+}
+
+.definitions p {
+  font-size: 15px;
+  line-height: 1.5;
+  margin-bottom: 18px;
+  color: #444;
+}
+
 /* Grid */
 .grid-wrapper {
   width: 400px;
@@ -95,7 +115,6 @@ button:hover {
   border-radius: 8px;
 }
 
-/* Cells */
 .cell {
   width: 100%;
   aspect-ratio: 1 / 1;
@@ -115,7 +134,7 @@ button:hover {
   box-sizing: border-box;
 }
 
-/* Stats */
+/* Stats (Right Column) */
 .stats {
   display: flex;
   flex-direction: column;