Update app.py

app.py

@@ -306,8 +306,64 @@ body {
 }
 """
 
-# Concatenate user‑defined, base and intro CSS (order = priority)
-final_css = f"{custom_css}\n{base_css}\n{intro_css}"
+markdown_css = """
+/* ===============================
+   About  Tab – Markdown Typography
+   =============================== */
+.markdown-text, .markdown-text p {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 1.25rem;      
+    line-height: 1.75;       
+    color: #344054;
+    margin-bottom: 0.9rem;
+}
+
+
+.markdown-text h1,
+.markdown-text h2,
+.markdown-text h3 {
+    color: #212529;
+    font-weight: 600;
+    line-height: 1.3;
+    margin: 1.4rem 0 0.8rem 0;
+}
+.markdown-text h1 { font-size: 2.0rem; }   /* ≈32 px */
+.markdown-text h2 { font-size: 1.6rem; }   /* ≈26 px */
+.markdown-text h3 { font-size: 1.4rem; }   /* ≈23 px */
+
+
+.markdown-text ul,
+.markdown-text ol {
+    padding-left: 1.6rem;   
+    margin-bottom: 1.1rem;
+}
+
+
+.markdown-text pre, .markdown-text code {
+    font-family: "Source Code Pro", "Menlo", monospace;
+    background-color: #f1f3f5;
+    border-radius: 0.4rem;
+}
+.markdown-text pre {
+    padding: 1rem 1.2rem;
+    overflow-x: auto;
+}
+.markdown-text code {
+    padding: 0.15rem 0.4rem;
+    font-size: 0.95rem;
+}
+
+
+@media (max-width: 768px) {
+    .markdown-text, .markdown-text p {
+        font-size: 1.15rem;   /* ≈18 px */
+    }
+    .markdown-text h1 { font-size: 1.6rem; }
+    .markdown-text h2 { font-size: 1.4rem; }
+    .markdown-text h3 { font-size: 1.25rem; }
+}
+"""
+final_css = f"{custom_css}\n{base_css}\n{intro_css}\n{markdown_css}"
 
 # ---------------------------------------------------------------------------
 # Build the Gradio UI