Add automatic dark mode

index.html

@@ -38,6 +38,19 @@
       animation: spin 0.8s linear infinite;
     }
     @keyframes spin { to { transform: rotate(360deg); } }
+    @media (prefers-color-scheme: dark) {
+      :root { color-scheme: dark; }
+      body { color: #f3f4f6; background: #111827; }
+      .endpoint { color: #9ca3af; background: #0f172a; border-color: #374151; }
+      code { color: #d1d5db; }
+      .assistant { background: #1f2937; }
+      .error { color: #fecaca; background: #450a0a; }
+      form { border-color: #374151; }
+      textarea, input { color: #f3f4f6; background: #1f2937; border-color: #4b5563; }
+      label, #status { color: #9ca3af; }
+      textarea:focus, input:focus, button:focus-visible { outline-color: #818cf8; }
+      #status.loading::before { border-color: #4b5563; border-top-color: #818cf8; }
+    }
     @media (max-width: 600px) {
       form { grid-template-columns: 1fr; }
       .controls { flex-direction: row; align-items: end; justify-content: space-between; }