Update app.py

app.py

@@ -13,64 +13,98 @@ st.set_page_config(
 # --- Custom CSS ---
 st.markdown("""
 <style>
-    /* Force Global Sans-Serif Font */
-    html, body, [class*="css"], .stMarkdown {
-        font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
+    /* --- 1. Global Font Reset --- */
+    /* Applies a clean, modern system font to the whole app */
+    html, body, [class*="css"] {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
     }
+
+    /* --- 2. Sidebar Layout & Width --- */
+    [data-testid="stSidebar"] {
+        width: 450px !important;
+        min-width: 450px !important;
+    }
+
+    /* --- 3. Sidebar Typography --- */
     
-    /* Set Global Font */
-    html, body, [class*="css"]  {
-        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    /* The Custom Question Headers */
+    .sidebar-question {
+        font-size: 1.4rem; 
+        font-weight: 700; 
+        color: #1f2937; /* Dark grey for better contrast */
+        margin-bottom: 8px;
+        line-height: 1.3;
     }
 
-    /* Target Sidebar Labels and Markdown specifically */
-    section[data-testid="stSidebar"] .stMarkdown p, 
-    section[data-testid="stSidebar"] label {
-        font-size: 1.25rem !important;
-        line-height: 1.4;
+    /* Standard Streamlit Labels (e.g., above sliders if visible) */
+    [data-testid="stSidebar"] label {
+        font-size: 1.1rem !important;
+        font-weight: 600 !important;
     }
+
+    /* Markdown Paragraphs in Sidebar (e.g., in Expanders) */
+    [data-testid="stSidebar"] .stMarkdown p {
+        font-size: 1.05rem !important;
+        line-height: 1.5;
+        color: #4b5563;
+    }
+
+    /* --- 4. Sidebar Input Styling --- */
     
-    /* Adjust Sidebar Width */
-    [data-testid="stSidebar"] {
-        width: 450px !important; /* Change this value to your preferred width */
-        min-width: 450px !important;
+    /* Number Input: The actual number text */
+    [data-testid="stSidebar"] [data-testid="stNumberInput"] input {
+        font-size: 1.4rem !important;
+        font-weight: 700 !important;
+        color: #ff4b4b; /* Matches your theme color */
+        padding-top: 5px;
+        padding-bottom: 5px;
+    }
+
+    /* Slider: Min/Max/Current Values */
+    [data-testid="stSidebar"] [data-testid="stTickBarMin"],
+    [data-testid="stSidebar"] [data-testid="stTickBarMax"] {
+        font-size: 1rem !important;
+        font-weight: 600 !important;
     }
-    /* Main Dashboard Styling */
+    
+    /* Slider: The Hover/Drag Value Popup */
+    [data-testid="stSidebar"] .stSlider [data-testid="stThumbValue"] {
+        font-size: 1.2rem !important;
+        font-weight: bold !important;
+    }
+
+    /* --- 5. Main Dashboard Components --- */
+    
     .metric-card {
-        background-color: #f0f2f6;
-        padding: 20px;
-        border-radius: 10px;
+        background-color: #ffffff;
+        padding: 30px;
+        border-radius: 12px;
         text-align: center;
-        margin-bottom: 20px;
-        border: 1px solid #e0e0e0;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        margin-bottom: 25px;
+        border: 1px solid #e5e7eb;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     }
+    
     .big-number {
-        font-size: 3em;
-        font-weight: bold;
+        font-size: 3.5rem;
+        font-weight: 800;
         color: #ff4b4b;
+        margin: 10px 0;
+        line-height: 1;
     }
+    
     .sub-text {
-        font-size: 1.2em;
-        color: #555;
+        font-size: 1.25rem;
+        font-weight: 500;
+        color: #6b7280;
     }
     
-    /* Sidebar Styling Override */
-    [data-testid="stSidebar"] {
-        font-size: 1rem;
-    }
-    [data-testid="stSidebar"] label {
-        font-size: 1rem !important;
-        font-weight: 500 !important;
-    }
-    .sidebar-question {
-        font-size: 1.6rem;
-        font-weight: bold;
-        margin-bottom: 5px;
-        color: #31333F;
-    }
+    /* Custom Spacer for Sidebar */
     .spacer {
-        margin-bottom: 2rem;
+        margin-top: 1.5rem;
+        margin-bottom: 1.5rem;
+        height: 1px;
+        background-color: #e5e7eb; /* Subtle divider line */
     }
 </style>
 """, unsafe_allow_html=True)
@@ -94,7 +128,8 @@ ai_demand_gw = st.sidebar.number_input(
     "Demand (GW)", 
     value=100, 
     step=10,
-    label_visibility="collapsed" # Hides the default label since we used a custom header
+    format="%d GW",
+    label_visibility="collapsed"
 )
 with st.sidebar.expander("More on AI Demand Forecasts"):
     st.write("According to [EpochAI](https://epoch.ai/gradient-updates/is-almost-everyone-wrong-about-americas-ai-power-problem#:~:text=Our%20best%20projections%20suggest%20that%20the%20US%20will%20need%20around%20100%20GW%20of%20power%20by%202030.) the best projections suggest that the US will need ~100 GW of power by 2030.")
@@ -106,6 +141,7 @@ st.sidebar.markdown('<p class="sidebar-question">2. What proportion of power wil
 gas_share = st.sidebar.slider(
     "Gas Share", 
     min_value=0, max_value=100, value=90, step=5,
+    format="%d%%",
     label_visibility="collapsed"
 )
 
@@ -129,6 +165,7 @@ st.sidebar.markdown('<p class="sidebar-question">3. What will the efficiency of
 turbine_eff_percent = st.sidebar.slider(
     "Efficiency", 
     min_value=35, max_value=60, value=45, step=1,
+    format="%d%%",
     label_visibility="collapsed"
 )
 
@@ -173,9 +210,8 @@ with c2:
     <div class="metric-card">
         <div class="sub-text">2030 US Emissions Increase due to AI</div>
         <div class="big-number">+{percent_increase:.2f}%</div>
-        <div class="sub-text">{ai_emissions_mmt:.1f} Million tCO2e</div>
+        <div class="sub-text">{ai_emissions_mmt:.1f} Million tCO<sub>2</sub>e</div>
         <div style="font-size: 1em; color: #888; margin-top: 10px;">
-            Based on {gas_share}% Gas Share & {turbine_eff_percent}% Efficiency
         </div>
     </div>
     """, unsafe_allow_html=True)
@@ -227,7 +263,7 @@ fig1.update_layout(
     },
     yaxis={
         'title': {
-            'text': "Emissions (Million tCO2e)",
+            'text': "Emissions (Million tCO<sub>2</sub>e)",
             'font': {'size': 20}
         },
         'tickfont': {'size': 16}