Update app.py

app.py

@@ -72,14 +72,14 @@ CSS = """
 :root {
     --bg: #0a0a0f;
     --surface: #12121a;
-    --surface2: #1a1a26;
-    --border: #2a2a3d;
-    --accent: #7c6aff;
-    --accent2: #ff6a9e;
+    --surface2: #1e1e2e;
+    --border: #3a3a5c;
+    --accent: #a89fff;
+    --accent2: #ff8ec4;
     --accent3: #6affb8;
     --text: #e8e8f0;
-    --text-muted: #8888aa;
-    --glow: 0 0 30px rgba(124, 106, 255, 0.15);
+    --text-muted: #aaaacc;
+    --glow: 0 0 30px rgba(168, 159, 255, 0.2);
 }
 
 * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -211,13 +211,18 @@ button.primary:hover {
 
 .section ul, .section ol {
     padding-left: 1.4rem;
-    color: var(--text);
+    color: #e8e8f0;
     line-height: 1.8;
     font-size: 0.93rem;
 }
 
+.section li {
+    color: #e8e8f0 !important;
+    margin-bottom: 0.3rem;
+}
+
 .section p {
-    color: var(--text);
+    color: #e8e8f0;
     line-height: 1.7;
     font-size: 0.93rem;
 }
@@ -285,16 +290,17 @@ def explain_code(code):
         return f"""
         <style>
         :root {{
-            --bg:#0a0a0f;--surface:#12121a;--surface2:#1a1a26;
-            --border:#2a2a3d;--accent:#7c6aff;--accent2:#ff6a9e;
-            --accent3:#6affb8;--text:#e8e8f0;--text-muted:#8888aa;
+            --bg:#0a0a0f;--surface:#12121a;--surface2:#1e1e2e;
+            --border:#3a3a5c;--accent:#a89fff;--accent2:#ff8ec4;
+            --accent3:#6affb8;--text:#e8e8f0;--text-muted:#aaaacc;
         }}
         @import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&family=DM+Mono&family=DM+Sans:wght@300;400&display=swap');
         .section{{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:1.4rem 1.6rem;margin-bottom:1rem;}}
         .section:hover{{border-color:var(--accent);}}
-        .section h2{{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;color:var(--accent);margin-bottom:0.8rem;}}
-        .section ul,.section ol{{padding-left:1.4rem;color:var(--text);line-height:1.8;font-size:0.93rem;}}
-        .section p{{color:var(--text);line-height:1.7;font-size:0.93rem;}}
+        .section h2{{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;color:#a89fff;margin-bottom:0.8rem;}}
+        .section ul,.section ol{{padding-left:1.4rem;color:#e8e8f0;line-height:1.8;font-size:0.93rem;}}
+        .section li{{color:#e8e8f0 !important;margin-bottom:0.3rem;}}
+        .section p{{color:#e8e8f0;line-height:1.7;font-size:0.93rem;}}
         .output-box{{background:#0d0d15;border:1px solid var(--border);border-left:3px solid var(--accent3);border-radius:8px;padding:0.8rem 1rem;font-family:'DM Mono',monospace;font-size:0.88rem;color:var(--accent3);white-space:pre-wrap;}}
         #analogy h2,#output h2{{color:var(--accent3)!important;}}
         #summary h2{{color:var(--accent2)!important;}}