Update app.py

app.py

@@ -327,16 +327,19 @@ INSERTS = {
 # ---------------------------
 
 CSS = """
-:root {
-  color-scheme: dark;
-  --body-background-fill: #ffffff;
-  --body-text-color: #1f2937;      /* darker gray for better contrast */
-  --heading-text-color: #111827;   /* near black for headings */
-  --link-text-color: #2563eb;      /* stronger blue */
-  --border-color: #d1d5db;         /* slightly darker border */
+/* Force light palette + high contrast */
+:root,
+.gradio-container {
+  color-scheme: light !important;
+  --body-background-fill: #ffffff !important;
+  --body-text-color: #0b0f19 !important;              /* main text */
+  --body-text-color-subdued: #0b0f19 !important;      /* kill the grey tint */
+  --heading-text-color: #0b0f19 !important;
+  --link-text-color: #1d4ed8 !important;
+  --border-color: #e5e7eb !important;
 }
 
-/* Load Inter; if Google Fonts is blocked, the @font-face fallback is used */
+/* Font (slightly heavier by default to avoid “spindly” Inter on Linux) */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 @font-face {
   font-family: 'Inter var';
@@ -345,63 +348,51 @@ CSS = """
   font-display: swap;
   src: url('https://rsms.me/inter/font-files/Inter.var.woff2?v=3.19') format('woff2');
 }
-
 html, body, .gradio-container { background: #fff !important; }
-.gradio-container { font-family: 'Inter', 'Inter var', system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important; }
+.gradio-container { font-family: 'Inter','Inter var',system-ui,-apple-system,Segoe UI,Roboto,sans-serif !important; }
 
-/* Layout (don’t clamp all nested divs) */
+/* Layout */
 #layout { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; }
 #toc { position: sticky; top: 1rem; height: calc(100vh - 2rem); overflow: auto; padding-right: 1rem; }
-#toc a { display: block; padding: .5rem 0; color: #4b5563; font-size: .875rem; text-decoration: none; font-weight: 500; }
+#toc a { display: block; padding: .5rem 0; color: #334155; font-size: .9rem; text-decoration: none; font-weight: 500; }
 #toc a:hover { color: var(--link-text-color); }
 
-/* Scope ALL article typography to .article to beat Gradio’s prose opacity */
-.article,
-.article :where(p, li, code, pre, blockquote, h1, h2, h3, h4, h5, h6, a, strong, em) {
-  color: var(--body-text-color) !important;
+/* HARD override: make sure no parent opacity dulls the article */
+.gradio-container .gr-html,
+.gradio-container .gr-html * {
   opacity: 1 !important;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  color: var(--body-text-color) !important;
 }
 
-/* Article width and centering */
+/* Scope article typography */
 .article { max-width: 72ch; margin: 0 auto; }
+.article p, .article li { font-size: 1.04rem; line-height: 1.85rem; font-weight: 500; }
+.article h1, .article h2, .article h3, .article h4 { color: var(--heading-text-color) !important; }
+.article h1 { font-weight: 700; font-size: 2.25rem; line-height: 2.6rem; margin: 2rem 0 1.25rem; }
+.article h2 { font-weight: 650; font-size: 1.85rem; line-height: 2.25rem; margin: 2rem 0 1rem; }
+.article h3 { font-weight: 600; font-size: 1.5rem; line-height: 2rem; margin: 1.5rem 0 .75rem; }
 
-/* Headings */
-.article h1 { font-weight: 700; font-size: 2.25rem; line-height: 2.6rem; color: var(--heading-text-color) !important; margin: 2rem 0 1.25rem; }
-.article h2 { font-weight: 600; font-size: 1.875rem; line-height: 2.25rem; color: var(--heading-text-color) !important; margin: 2rem 0 1rem; }
-.article h3 { font-weight: 600; font-size: 1.5rem; line-height: 2rem; color: var(--heading-text-color) !important; margin: 1.5rem 0 .75rem; }
-
-/* Body text and lists */
-.article p, .article li { font-size: 1.02rem; line-height: 1.8rem; }
-.article ul, .article ol { padding-left: 1.5rem; margin: 1rem 0; }
 .article a { color: var(--link-text-color) !important; text-decoration: underline; }
 .article a:hover { text-decoration: none; }
 
-/* Code blocks and inline code */
+/* Code */
 .article pre {
   background: #f8fafc; border: 1px solid var(--border-color); border-radius: 8px;
   padding: 1rem; margin: 1.25rem 0; overflow-x: auto;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-  font-size: .92rem; line-height: 1.6rem;
-  color: #1f2937 !important;
+  font-size: .95rem; line-height: 1.6rem; color: #0b0f19 !important;
 }
 .article code {
-  background: #e2e8f0; color: #1e293b !important; padding: .15rem .35rem; border-radius: .25rem;
-  font-weight: 500;
+  background: #e2e8f0; color: #0b0f19 !important; padding: .15rem .35rem; border-radius: .25rem; font-weight: 600;
 }
 
-/* Blockquotes */
-.article blockquote { border-left: 4px solid var(--link-text-color); padding-left: 1rem; margin: 1.25rem 0; color: #475569 !important; font-style: italic; }
-
-/* Images inside article */
+/* Blockquotes, images, rules */
+.article blockquote { border-left: 4px solid var(--link-text-color); padding-left: 1rem; margin: 1.25rem 0; color: #334155 !important; font-style: italic; }
 .article img { display: block; max-width: 100%; height: auto; margin: 1.25rem auto; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.08); }
-
-/* Horizontal rule and anchor offset */
 hr { border: 0; border-top: 1px solid var(--border-color); margin: 2rem 0; }
 .section { scroll-margin-top: 80px; }
 
-/* Keep widgets full width; don’t inherit article max-width */
+/* Keep widgets full width */
 .gr-form, .gr-panel, .gr-block { max-width: none; }
 
 """