Add JSON import and export

styles.css

@@ -26,11 +26,11 @@ body {
     var(--bg);
 }
 
-button, input, select {
+button, input, select, textarea {
   font: inherit;
 }
 
-button, input, select {
+button, input, select, textarea {
   border: 1px solid var(--border);
   border-radius: 0.75rem;
   color: var(--text);
@@ -48,6 +48,7 @@ button {
 button:hover { filter: brightness(1.1); }
 button.secondary { background: var(--panel-2); }
 button.danger { border-color: rgba(251, 113, 133, 0.5); background: rgba(251, 113, 133, 0.16); }
+textarea { width: 100%; min-height: 9rem; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
 
 label {
   display: grid;
@@ -104,6 +105,31 @@ h3 { margin-bottom: 0; }
 }
 .controls label { min-width: 220px; }
 
+.import-export {
+  display: grid;
+  gap: 0.9rem;
+  margin-bottom: 1rem;
+}
+.import-export p { color: var(--muted); margin-bottom: 0; }
+.io-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+.file-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: 1px solid var(--border);
+  border-radius: 0.75rem;
+  color: var(--text);
+  background: var(--panel-2);
+  padding: 0.7rem 0.85rem;
+  font-weight: 700;
+}
+.file-button input { display: none; }
+
 .summary-grid, .results, .gear-grid {
   display: grid;
   gap: 1rem;