tweaks

src/App.svelte

@@ -562,22 +562,29 @@
   }
 
   .content-grid {
-    display: flex;
-    flex-direction: row;
+    display: grid;
+    grid-template-columns: 650px 350px;
     gap: 2rem;
     margin-bottom: 2rem;
+    justify-content: center;
   }
-  
-
 
   @media (max-width: 768px) {
     .content-grid {
-      flex-direction: column;
+      grid-template-columns: 1fr;
+      grid-template-rows: auto auto;
+      max-width: 100%;
     }
-    .app-main {
-      padding: 1rem;
+
+  .input-card, .controls-card, .results-card {
+      width: 100%;
+    }
+
+    .control-group {
+      padding: 0;
     }
   }
+  
 
   /* Card styles */
   .input-card, .controls-card, .results-card {
@@ -589,6 +596,7 @@
   }
 
   .controls-card {
+    width: 350px;
     height: min-content;
   }
 
@@ -613,7 +621,6 @@
   /* Upload area */
   .upload-area {
     padding: 1.5rem;
-    width: 50vw;
   }
 
   .file-input {
@@ -672,25 +679,30 @@
   }
 
   /* Textareas */
+
   .data-textarea, .instructions-textarea {
-    width: calc(100% - 3rem);
     padding: 1rem;
     border: 1px solid #e2e8f0;
     border-radius: 8px;
     font-size: 0.875rem;
     resize: vertical;
     transition: border-color 0.2s ease;
-  }
-
-  .instructions-textarea {
-    width: 100%;
+    box-sizing: border-box;
+    line-height: 1.5;
+    min-height: 120px;
   }
 
   .data-textarea {
     margin: 1.5rem;
+    width: calc(100% - 3rem);
     font-family: 'JetBrains Mono', 'Fira Code', monospace;
   }
 
+  .instructions-textarea {
+    width: 100%;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+  }
+
   .data-textarea:focus, .instructions-textarea:focus {
     outline: none;
     border-color: #667eea;

src/app.css

@@ -47,7 +47,6 @@ button {
   padding: 0.6em 1.2em;
   font-size: 1em;
   font-weight: 500;
-  font-family: inherit;
   background-color: #1a1a1a;
   cursor: pointer;
   transition: border-color 0.25s;