Soften color scheme and improve background pattern

- Lighter, easier-on-eyes green palette
- Replace busy background with subtle crosshatch pattern
- Cleaner hero section with trellis-inspired diagonal lines
- Reduced shadows and better contrast

app.py

@@ -11,52 +11,57 @@ from agent import topology
 VINE_CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600&display=swap');
 :root {
-  --og-green: #0f4d3f;
-  --og-mint: #38c49d;
-  --og-fern: #1c6b53;
-  --og-cream: #f5f3ec;
-  --og-shadow: 0 18px 40px rgba(10,48,38,0.18);
+  --og-green: #2d5f4f;
+  --og-mint: #5fc9a0;
+  --og-fern: #3d8169;
+  --og-cream: #fafaf8;
+  --og-shadow: 0 8px 24px rgba(45,95,79,0.12);
 }
 html, body { overflow-x: hidden; }
 body, .gradio-container {
   font-family: 'Inter', system-ui, -apple-system, sans-serif;
-  background:
-    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNDAnIGhlaWdodD0nMjQwJyB2aWV3Qm94PScwIDAgMjQwIDI0MCc+CjxwYXRoIGQ9J00xMCAyMDAgQyA2MCAxNTAsIDEyMCAxMjAsIDE0MCA3MCBDIDE1NSA0MCwgMTg1IDMwLCAyMjAgMjAnIHN0cm9rZT0nIzFjNmI1Mycgc3Ryb2tlLXdpZHRoPSc0JyBmaWxsPSdub25lJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1vcGFjaXR5PScuMTYnLz4KPHBhdGggZD0nTTUwIDIyMCBDIDkwIDE5MCwgMTMwIDE0MCwgMTcwIDEwMCcgc3Ryb2tlPScjM2NiZjlhJyBzdHJva2Utd2lkdGg9JzMnIGZpbGw9J25vbmUnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLW9wYWNpdHk9Jy4yMCcvPgo8Y2lyY2xlIGN4PSc5MCcgY3k9JzE1MCcgcj0nMTAnIGZpbGw9JyMzY2JmOWEnIGZpbGwtb3BhY2l0eT0nLjI1Jy8+CjxjaXJjbGUgY3g9JzE1MCcgY3k9JzkwJyByPSc5JyBmaWxsPScjMGY0ZDNmJyBmaWxsLW9wYWNpdHk9Jy4xOCcvPgo8Y2lyY2xlIGN4PScyMDAnIGN5PSc1MCcgcj0nNycgZmlsbD0nIzhiZDdiMScgZmlsbC1vcGFjaXR5PScuMjInLz4KPC9zdmc+") repeat,
-    radial-gradient(circle at 12% 20%, rgba(60,191,154,0.10), transparent 32%),
-    radial-gradient(circle at 82% 16%, rgba(15,77,63,0.10), transparent 30%),
-    linear-gradient(135deg, #f8f7f2 0%, #ecf2e9 100%);
-  color: #0f1b1a;
+  background: 
+    repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(95,201,160,0.03) 35px, rgba(95,201,160,0.03) 70px),
+    repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(61,129,105,0.03) 35px, rgba(61,129,105,0.03) 70px),
+    linear-gradient(to bottom, #fafaf8, #f5f7f5);
+  color: #1a2f26;
   position: relative;
+  min-height: 100vh;
 }
 
 .gradio-container > * { position: relative; z-index: 1; }
 
 .og-hero {
   background:
-    linear-gradient(120deg, rgba(15,77,63,0.32), rgba(56,196,157,0.18)),
-    linear-gradient(160deg, rgba(140,215,177,0.20), rgba(15,77,63,0.14)),
-    url("assets/trellis.jpg?v=1");
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  border: 1px solid rgba(15,77,63,0.16);
+    linear-gradient(135deg, rgba(95,201,160,0.08), rgba(61,129,105,0.12)),
+    repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(95,201,160,0.04) 20px, rgba(95,201,160,0.04) 40px),
+    repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(61,129,105,0.04) 20px, rgba(61,129,105,0.04) 40px),
+    linear-gradient(to bottom right, #f8faf9, #f0f5f2);
+  border: 1px solid rgba(95,201,160,0.2);
   box-shadow: var(--og-shadow);
-  border-radius: 18px;
-  padding: 22px;
+  border-radius: 16px;
+  padding: 28px;
   position: relative;
   overflow: hidden;
 }
-.og-hero::before,
+.og-hero::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, transparent, var(--og-mint), transparent);
+  opacity: 0.6;
+}
 .og-hero::after {
   content: "";
   position: absolute;
-  inset: -80px -20px auto auto;
-  width: 240px;
-  height: 240px;
-  background: radial-gradient(circle at 40% 40%, rgba(60,191,154,0.4), transparent 60%),
-              radial-gradient(circle at 70% 70%, rgba(15,77,63,0.45), transparent 62%);
-  filter: blur(6px);
-  opacity: 0.35;
+  inset: 0;
+  background: 
+    radial-gradient(circle at 20% 30%, rgba(95,201,160,0.08), transparent 40%),
+    radial-gradient(circle at 80% 70%, rgba(61,129,105,0.08), transparent 40%);
+  pointer-events: none;
 }
 .og-hero::after {
   inset: auto auto -120px -20px;