Create style.css

style.css

@@ -0,0 +1,39 @@
+:root {
+  --zen-accent-h: 220;   /* Change for color theme */
+  --zen-accent-s: 95%;
+  --zen-accent-l: 55%;
+  --zen-font: "Inter", "Segoe UI", Arial, sans-serif;
+}
+
+html, body, * {
+  font-family: var(--zen-font);
+  font-size: 1.08em;
+}
+
+.gr-button-primary {
+  background: hsl(var(--zen-accent-h) var(--zen-accent-s) var(--zen-accent-l));
+  color: white;
+  border: none;
+}
+.gr-button-primary:hover { filter: brightness(1.1); }
+
+.gr-chatbot .message.user {
+  background: hsla(var(--zen-accent-h) var(--zen-accent-s) calc(var(--zen-accent-l) + 25%), .18);
+}
+.gr-chatbot .message.bot  {
+  background: hsla(var(--zen-accent-h) var(--zen-accent-s) calc(var(--zen-accent-l) + 15%), .13);
+}
+
+.gr-image, .gr-plot {
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0,0,0,.07);
+  margin-top: 6px;
+}
+
+.gr-textbox, .gr-chatbot {
+  border-radius: 8px;
+}
+
+body {
+  background: #f7fafe;
+}