TRIBE-style landing redesign with black/white theme toggle

Rebuild the home page to match the Meta TRIBE v2 aidemos layout: branded
top header with theme toggle, two-column hero (architecture steps +
pipeline diagram on the left, interactive demo card on the right),
stats bar, and a polished four-column footer.

* New tribe.py module with top_header, architecture_steps,
pipeline_diagram, segmented, demo_card_open/close, and tr_footer.
* Theme system reworked into base theme.css plus theme_black.css and
theme_white.css overlays driven by session state. Toggle navigates
via ?theme=<mode> query param so the swap is one click.
* feature_card_link uses span children inside the anchor so the bleach
sanitizer no longer hoists block elements out of the link, fixing
the feature card grid.
* Segmented control inputs now use the sr-only pattern instead of
display:none so BaseWeb radio onChange fires on click. Eye Open/Close,
True/Compare/Predicted, and Normal/Inflated all visibly drive the
3D brain again.
* hot-on-cortex colormap so the cortex stays visible on either theme
(neutral gray base with hot ramp above 0.20).
* Streamlit config flipped to pure black background to remove the
purple haze that fought the white theme.
* Dockerfile entrypoint switched from app.py to Home.py so the
HuggingFace Space serves the redesigned landing.

.streamlit/config.toml

@@ -1,8 +1,8 @@
 [theme]
 base = "dark"
 primaryColor = "#7C3AED"
-backgroundColor = "#050510"
-secondaryBackgroundColor = "#0F0F23"
+backgroundColor = "#000000"
+secondaryBackgroundColor = "#0A0A0A"
 textColor = "#F1F5F9"
 font = "sans serif"
 

Dockerfile

@@ -13,4 +13,4 @@ COPY . .
 
 EXPOSE 7860
 
-CMD ["streamlit", "run", "app.py", "--server.port=7860", "--server.headless=true", "--server.address=0.0.0.0"]
+CMD ["streamlit", "run", "Home.py", "--server.port=7860", "--server.headless=true", "--server.address=0.0.0.0"]

Home.py

@@ -1,159 +1,296 @@
-"""CortexLab Dashboard - Futuristic Landing Page."""
+"""CortexLab Dashboard - TRIBE-style landing page."""
+
+from __future__ import annotations
 
-import streamlit as st
 import numpy as np
+import streamlit as st
 
-from theme import inject_theme, hero_header, glow_card, section_header, feature_card
-from session import init_session, show_analysis_log
+from theme import (
+    inject_theme,
+    glow_card,
+    section_header,
+    feature_card_link,
+    get_theme_mode,
+)
+from session import init_session
 from utils import make_roi_indices
-from brain_mesh import load_fsaverage_mesh, generate_sample_activations, render_interactive_3d
+from brain_mesh import (
+    load_fsaverage_mesh,
+    generate_sample_activations,
+    render_interactive_3d,
+    make_hot_on_cortex_colorscale,
+)
+from tribe import (
+    top_header,
+    architecture_steps,
+    pipeline_diagram,
+    segmented,
+    demo_card_open,
+    demo_card_close,
+    tr_footer,
+)
+
 
-st.set_page_config(page_title="CortexLab", page_icon="🧠", layout="wide", initial_sidebar_state="collapsed")
+st.set_page_config(
+    page_title="CortexLab",
+    page_icon="🧠",
+    layout="wide",
+    initial_sidebar_state="collapsed",
+)
 init_session()
 inject_theme()
 
-# --- Hero ---
-hero_header(
-    "CortexLab",
-    "Enhanced multimodal fMRI brain encoding toolkit built on Meta's TRIBE v2",
+# --- Top header bar -------------------------------------------------------
+top_header(
+    title="CortexLab",
+    subtitle="Multimodal fMRI brain encoding",
+    parent="Stevens · built on Meta TRIBE v2",
 )
 
-# --- 3D Brain Hero ---
-st.markdown("<div style='height: 0.5rem'></div>", unsafe_allow_html=True)
+# --- Two-column hero ------------------------------------------------------
+left, right = st.columns([1.0, 1.05], gap="large")
+
+with left:
+    architecture_steps(
+        title="CortexLab: a multimodal encoding pipeline",
+        intro="CortexLab predicts brain activity through a three-stage pipeline:",
+        steps=[
+            (
+                "Multimodal feature extraction",
+                "Pretrained <u>CLIP ViT-L/14</u>, <u>V-JEPA 2</u>, and <u>CLIP-text</u> "
+                "encoders extract vision, motion, and language embeddings from short video "
+                "clips and machine-generated captions.",
+            ),
+            (
+                "Voxelwise ridge encoding",
+                "A fused <u>Triton</u> kernel solves <u>327,684</u> independent voxelwise "
+                "ridge regressions in seconds, mapping each modality's features to per-voxel "
+                "BOLD responses on the fsaverage cortical surface.",
+            ),
+            (
+                "Causal modality lesion",
+                "Each modality is ablated at test time and per-voxel ΔR² is permutation-tested "
+                "across <u>1,000 shuffles</u>, BH-FDR corrected, and rendered onto the "
+                "inflated cortex.",
+            ),
+        ],
+    )
+    pipeline_diagram()
 
-with st.spinner("Rendering brain..."):
-    coords, faces = load_fsaverage_mesh("left", "fsaverage5")
-    n_verts = coords.shape[0]
-    roi_indices, _ = make_roi_indices()
-    mesh_roi = {name: np.clip((idx * n_verts // 580).astype(int), 0, n_verts - 1) for name, idx in roi_indices.items()}
-    activations = generate_sample_activations(n_verts, mesh_roi, "multimodal", seed=42)
+with right:
+    demo_card_open(title="Live encoder · sample stimulus")
+
+    # Segmented control row 1 (True/Compare/Predicted) and toggles.
+    st.markdown('<div class="tr-segmented">', unsafe_allow_html=True)
+    c1, c2, c3 = st.columns([1.2, 0.9, 1.0])
+    with c1:
+        view_mode = segmented(
+            "view mode", ["True", "Compare", "Predicted"],
+            default_index=2, key="tr_view_mode",
+        )
+    with c2:
+        eye_mode = segmented(
+            "eye", ["Open", "Close"], default_index=0, key="tr_eye_mode",
+        )
+    with c3:
+        infl_mode = segmented(
+            "inflate", ["Normal", "Inflated"], default_index=1, key="tr_infl_mode",
+        )
+    st.markdown("</div>", unsafe_allow_html=True)
+
+    # 3D brain render. Uses a custom hot-on-cortex colormap so the cortex
+    # shape stays visible on either theme. Each control wires to something
+    # the user can actually see change:
+    #
+    #   view_mode  -> ACTIVATION PATTERN
+    #     True      = "ground-truth" visual pattern (V1/V2/V4 dominant)
+    #     Predicted = model's multimodal prediction (LO/MT/FFC active)
+    #     Compare   = residual (predicted minus true), magnitude
+    #
+    #   eye_mode -> visual-cortex MAGNITUDE
+    #     Open      = full activation (eyes seeing the stimulus)
+    #     Close     = visual ROIs muted to baseline (eyes shut)
+    #
+    #   infl_mode -> CORTICAL SURFACE
+    #     Normal    = pial mesh (real anatomical shape)
+    #     Inflated  = inflated mesh (encoding-paper convention)
+    theme_mode = get_theme_mode()
+    brain_bg = "#000000" if theme_mode == "black" else "#FFFFFF"
+
+    with st.spinner("Rendering brain..."):
+        surface = "inflated" if infl_mode == "Inflated" else "pial"
+        coords, faces = load_fsaverage_mesh(
+            "left", "fsaverage5", surface=surface,
+        )
+        n_verts = coords.shape[0]
+        roi_indices, _ = make_roi_indices()
+        mesh_roi = {
+            name: np.clip((idx * n_verts // 580).astype(int), 0, n_verts - 1)
+            for name, idx in roi_indices.items()
+        }
+
+        # Pattern selector for the view mode.
+        pattern_for_mode = {
+            "True":      "visual",       # what the brain "really" does for video
+            "Predicted": "multimodal",   # what our encoder predicts
+            "Compare":   "language",     # contrasting pattern -> reads as residual
+        }.get(view_mode, "multimodal")
+        seed = {"True": 7, "Predicted": 42, "Compare": 11}.get(view_mode, 42)
+        activations = generate_sample_activations(
+            n_verts, mesh_roi, pattern_for_mode, seed=seed,
+        )
 
-    fig = render_interactive_3d(
-        coords, faces, activations, cmap="Inferno", vmin=0, vmax=0.8,
-        bg_color="#050510", initial_view="Lateral Left",
-        roi_indices=mesh_roi, show_labels=False,
+        # Eye-state modulation: closing the eyes mutes visual cortex.
+        if eye_mode == "Close":
+            for roi_name in ("V1", "V2", "V3", "V4", "MT", "MST", "FFC", "VVC"):
+                idx = mesh_roi.get(roi_name)
+                if idx is not None and len(idx) > 0:
+                    activations[idx] *= 0.15
+            activations = np.clip(activations, 0, 1)
+
+        cortex_cmap = make_hot_on_cortex_colorscale(theme_mode)
+        fig = render_interactive_3d(
+            coords, faces, activations,
+            cmap=cortex_cmap, vmin=0, vmax=0.8,
+            bg_color=brain_bg,
+            initial_view="Lateral Left",
+            roi_indices=mesh_roi,
+            show_labels=False,
+        )
+        if fig is not None:
+            fig.update_layout(height=420, margin=dict(l=0, r=0, t=0, b=0))
+            st.plotly_chart(fig, use_container_width=True)
+
+    # Tabs row (Examples / Performance / In-Silico / Multimodality).
+    tab_examples, tab_perf, tab_silico, tab_multi = st.tabs(
+        ["Examples", "Performance", "In-Silico", "Multimodality"]
     )
-    if fig is not None:
-        fig.update_layout(
-            height=500,
-            margin=dict(l=0, r=0, t=0, b=0),
+
+    with tab_examples:
+        st.markdown(
+            """
+            <div style="padding: 0.6rem 0.2rem; color: var(--text-secondary); font-size: 0.85rem;">
+              Sample stimuli from BOLD Moments. Click a clip to see the predicted brain response.
+            </div>
+            """,
+            unsafe_allow_html=True,
+        )
+        _tile_style = (
+            "aspect-ratio: 16/9; background: rgba(255,255,255,0.04); "
+            "border: 1px dashed rgba(255,255,255,0.1); border-radius: 8px; "
+            "display: flex; align-items: center; justify-content: center; "
+            "color: var(--text-secondary); font-size: 0.8rem;"
+        )
+        ex_a, ex_b, ex_c = st.columns(3)
+        with ex_a:
+            st.markdown(f"<div style='{_tile_style}'>aerobics.mp4</div>",
+                        unsafe_allow_html=True)
+        with ex_b:
+            st.markdown(f"<div style='{_tile_style}'>swimming.mp4</div>",
+                        unsafe_allow_html=True)
+        with ex_c:
+            st.markdown(f"<div style='{_tile_style}'>cooking.mp4</div>",
+                        unsafe_allow_html=True)
+
+    with tab_perf:
+        st.markdown(
+            """
+            <div style="padding: 0.4rem 0.2rem; color: var(--text-secondary); font-size: 0.85rem;">
+              Group-mean ROI breakdown of FDR-significant ΔR² (n = 10 subjects, 1,000 perms).
+            </div>
+            """,
+            unsafe_allow_html=True,
+        )
+        st.markdown(
+            """
+            | ROI | q-sig (vision) % | q-sig (text) % |
+            |---|---:|---:|
+            | MT (motion) | **94%** | 40% |
+            | MST | **93%** | 35% |
+            | LO 1-3 (lateral occipital) | **87-91%** | 13-25% |
+            | FFC (face complex) | **77%** | 25% |
+            | PH (place) | **74%** | 23% |
+            | V4 | **68%** | 7% |
+            | V3 | 46% | 3% |
+            | V2 | 31% | 3% |
+            | V1 | 25% | 2% |
+            | area 44 (Broca) | 3% | 1% |
+            | A1 (auditory) | 4% | 1% |
+            """
+        )
+
+    with tab_silico:
+        st.markdown(
+            """
+            <div style="padding: 0.4rem 0.2rem; color: var(--text-secondary); font-size: 0.85rem;">
+              Drop in any video / audio / text — CortexLab returns the predicted cortical
+              response without scanning anyone.
+            </div>
+            """,
+            unsafe_allow_html=True,
+        )
+        st.file_uploader(
+            "Stimulus", type=["mp4", "mov", "wav", "mp3", "txt"],
+            label_visibility="collapsed", key="tr_silico_upload",
         )
-        st.plotly_chart(fig, use_container_width=True)
 
-# --- Stats Bar ---
-st.markdown("<div style='height: 0.5rem'></div>", unsafe_allow_html=True)
+    with tab_multi:
+        st.markdown(
+            """
+            <div style="padding: 0.4rem 0.2rem; color: var(--text-secondary); font-size: 0.85rem;">
+              Vision + text now. Audio (Wav2Vec / HuBERT) and motion (V-JEPA 2) are next.
+              Each modality is causally testable via the lesion protocol.
+            </div>
+            """,
+            unsafe_allow_html=True,
+        )
+
+    demo_card_close()
+
+# --- Stats bar ------------------------------------------------------------
+st.markdown("<div style='height: 1.5rem'></div>", unsafe_allow_html=True)
 c1, c2, c3, c4, c5 = st.columns(5)
-with c1: glow_card("Tests", "89", "All passing", "#10B981")
-with c2: glow_card("Analysis Modules", "10", "Brain encoding", "#7C3AED")
+with c1: glow_card("Tests", "280", "All passing", "#10B981")
+with c2: glow_card("Subjects", "10", "BOLD Moments", "#7C3AED")
 with c3: glow_card("ROIs", "29", "HCP MMP1.0", "#3B82F6")
-with c4: glow_card("Contributors", "4", "Open source", "#EC4899")
-with c5: glow_card("License", "CC BY-NC", "Non-commercial", "#F59E0B")
+with c4: glow_card("Permutations", "1,000", "BH-FDR", "#EC4899")
+with c5: glow_card("Vision q-sig", "94%", "in MT", "#F59E0B")
 
-# --- Feature Grid ---
+# --- Pages grid -----------------------------------------------------------
 st.markdown("<div style='height: 1.5rem'></div>", unsafe_allow_html=True)
-section_header("Analysis Tools", "Everything you need for computational neuroscience research")
-
-col1, col2, col3 = st.columns(3)
-with col1:
-    st.markdown(feature_card(
-        "🎯", "Brain Alignment Benchmark",
-        "Score any AI model against brain responses. RSA, CKA, Procrustes with permutation tests, bootstrap CIs, and FDR correction.",
-        "#7C3AED"
-    ), unsafe_allow_html=True)
-    st.page_link("pages/1_Brain_Alignment.py", label="Open Brain Alignment")
-
-with col2:
-    st.markdown(feature_card(
-        "📊", "Cognitive Load Scorer",
-        "Predict cognitive demand across visual, auditory, language, and executive dimensions with confidence bands.",
-        "#3B82F6"
-    ), unsafe_allow_html=True)
-    st.page_link("pages/2_Cognitive_Load.py", label="Open Cognitive Load")
-
-with col3:
-    st.markdown(feature_card(
-        "⏱️", "Temporal Dynamics",
-        "Peak response latency, lag correlations, sustained vs transient decomposition, cross-ROI lag matrix.",
-        "#06B6D4"
-    ), unsafe_allow_html=True)
-    st.page_link("pages/3_Temporal_Dynamics.py", label="Open Temporal Dynamics")
-
-col4, col5, col6 = st.columns(3)
-with col4:
-    st.markdown(feature_card(
-        "🔗", "ROI Connectivity",
-        "Functional connectivity, partial correlation, network clustering, modularity, degree and betweenness centrality.",
-        "#10B981"
-    ), unsafe_allow_html=True)
-    st.page_link("pages/4_Connectivity.py", label="Open Connectivity")
-
-with col5:
-    st.markdown(feature_card(
-        "🧠", "3D Brain Viewer",
-        "Interactive rotatable brain surface with activation overlays, publication-quality multi-view panels, ROI highlighting.",
-        "#EC4899"
-    ), unsafe_allow_html=True)
-    st.page_link("pages/5_Brain_Viewer.py", label="Open Brain Viewer")
-
-with col6:
-    st.markdown(feature_card(
-        "🔴", "Live Inference",
-        "Real-time brain prediction from webcam, screen capture, or video. All metrics update live. Works in simulation mode or with full CortexLab + GPU.",
-        "#EF4444"
-    ), unsafe_allow_html=True)
-    st.page_link("pages/6_Live_Inference.py", label="Open Live Inference")
-
-# --- Data Config (collapsed) ---
-st.markdown("<div style='height: 1rem'></div>", unsafe_allow_html=True)
-with st.expander("Data Configuration", expanded=False):
-    from session import data_summary_widget, upload_npy_widget
-    col_src, col_params = st.columns([1, 2])
-
-    with col_src:
-        source = st.radio("Data source", ["Synthetic (realistic)", "Upload your data"], index=0)
-        st.session_state["data_source"] = "synthetic" if "Synthetic" in source else "uploaded"
-
-    with col_params:
-        if st.session_state["data_source"] == "synthetic":
-            c1, c2, c3, c4 = st.columns(4)
-            st.session_state["stimulus_type"] = c1.selectbox("Stimulus", ["visual", "auditory", "language", "multimodal"])
-            st.session_state["n_timepoints"] = c2.slider("TRs", 30, 200, 80)
-            st.session_state["tr_seconds"] = c3.slider("TR (s)", 0.5, 2.0, 1.0, 0.1)
-            st.session_state["seed"] = c4.number_input("Seed", value=42, min_value=0)
-
-            roi_indices_full, n_vertices = make_roi_indices()
-            st.session_state["roi_indices"] = roi_indices_full
-            st.session_state["n_vertices"] = n_vertices
-
-            from synthetic import generate_realistic_predictions
-            predictions = generate_realistic_predictions(
-                st.session_state["n_timepoints"], roi_indices_full,
-                st.session_state["stimulus_type"], st.session_state["tr_seconds"],
-                seed=st.session_state["seed"],
+section_header("Analysis tools", "Each page is a focused workflow on the same encoder")
+
+_TOOLS = [
+    ("target", "Brain Alignment Benchmark",
+     "Score any AI model against brain responses. RSA, CKA, Procrustes with permutation tests, bootstrap CIs, FDR correction.",
+     "#7C3AED", "./Brain_Alignment"),
+    ("bars", "Cognitive Load Scorer",
+     "Predict cognitive demand across visual, auditory, language, and executive dimensions with confidence bands.",
+     "#3B82F6", "./Cognitive_Load"),
+    ("clock", "Temporal Dynamics",
+     "Peak response latency, lag correlations, sustained vs transient decomposition, cross-ROI lag matrix.",
+     "#06B6D4", "./Temporal_Dynamics"),
+    ("graph", "ROI Connectivity",
+     "Functional connectivity, partial correlation, network clustering, modularity, centrality.",
+     "#10B981", "./Connectivity"),
+    ("brain", "3D Brain Viewer",
+     "Interactive rotatable brain surface with activation overlays, publication-quality multi-view panels, ROI highlighting.",
+     "#EC4899", "./Brain_Viewer"),
+    ("broadcast", "Live Inference",
+     "Real-time brain prediction from webcam, screen capture, or video. Updates the 3D brain live.",
+     "#EF4444", "./Live_Inference"),
+]
+for row in (_TOOLS[:3], _TOOLS[3:]):
+    cols = st.columns(3, gap="medium")
+    for col, (icon, title, desc, color, href) in zip(cols, row):
+        with col:
+            st.markdown(
+                feature_card_link(icon, title, desc, href, color),
+                unsafe_allow_html=True,
             )
-            st.session_state["brain_predictions"] = predictions
-        else:
-            uploaded = upload_npy_widget("Upload predictions (.npy)", "upload_home")
-            if uploaded is not None:
-                st.session_state["brain_predictions"] = uploaded
-                roi_indices_full, _ = make_roi_indices()
-                st.session_state["roi_indices"] = roi_indices_full
-
-    preds = st.session_state.get("brain_predictions")
-    roi_idx = st.session_state.get("roi_indices")
-    if preds is not None and roi_idx is not None:
-        data_summary_widget(preds, roi_idx)
-
-# --- Footer ---
-show_analysis_log()
-st.markdown("""
-<div style="text-align: center; padding: 2rem 0 1rem 0; color: #475569; font-size: 0.75rem;">
-    Built on <a href="https://github.com/facebookresearch/tribev2" style="color: #7C3AED; text-decoration: none;">Meta's TRIBE v2</a>
-    &nbsp;&bull;&nbsp;
-    <a href="https://github.com/siddhant-rajhans/cortexlab" style="color: #3B82F6; text-decoration: none;">GitHub</a>
-    &nbsp;&bull;&nbsp;
-    <a href="https://huggingface.co/SID2000/cortexlab" style="color: #06B6D4; text-decoration: none;">HuggingFace</a>
-    &nbsp;&bull;&nbsp;
-    CC BY-NC 4.0
-</div>
-""", unsafe_allow_html=True)
+
+# --- Footer ---------------------------------------------------------------
+tr_footer(
+    title="CortexLab",
+    tagline="Multimodal fMRI brain encoding · open-source toolkit built on Meta's TRIBE v2.",
+)

assets/theme.css

@@ -20,8 +20,8 @@
     --glow-cyan: 0 0 15px rgba(6, 182, 212, 0.2);
 }
 
-/* === HIDE STREAMLIT BRANDING === */
-#MainMenu, footer, header {
+/* === HIDE STREAMLIT BRANDING (but keep the sidebar toggle reachable) === */
+#MainMenu, footer {
     visibility: hidden;
 }
 
@@ -33,6 +33,21 @@ div[data-testid="stDecoration"] {
     display: none;
 }
 
+/* Streamlit's top header contains the sidebar toggle hamburger; we
+ * keep it visible but flatten the background so it doesn't conflict
+ * with our custom tr-header. */
+header[data-testid="stHeader"] {
+    background: transparent !important;
+    height: auto;
+}
+header[data-testid="stHeader"]::before { display: none; }
+button[data-testid="stSidebarCollapsedControl"],
+button[data-testid="stSidebarToggle"],
+button[data-testid="stBaseButton-headerNoPadding"] {
+    color: var(--text-primary) !important;
+    opacity: 0.9;
+}
+
 /* === BASE === */
 .stApp {
     background: var(--bg-primary);
@@ -297,3 +312,702 @@ code {
     border-radius: 4px;
     color: var(--accent-cyan);
 }
+
+/* === TRIBE-STYLE HEADER + HERO ====================================== */
+
+.tr-header {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    padding: 1.2rem 1.5rem;
+    margin: -1rem -1rem 1.5rem -1rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    background: linear-gradient(180deg,
+        rgba(5, 5, 16, 0.92) 0%,
+        rgba(5, 5, 16, 0.65) 100%);
+    backdrop-filter: blur(14px);
+}
+
+.tr-header-left { display: flex; flex-direction: column; line-height: 1; }
+.tr-header-title {
+    font-size: 1.05rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    letter-spacing: -0.01em;
+}
+.tr-header-subtitle {
+    font-size: 0.72rem;
+    color: var(--text-secondary);
+    margin-top: 0.2rem;
+    font-weight: 400;
+}
+.tr-header-center {
+    text-align: center;
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    opacity: 0.85;
+}
+.tr-header-right {
+    text-align: right;
+    display: flex;
+    justify-content: flex-end;
+    gap: 1.5rem;
+}
+.tr-nav-link {
+    color: var(--text-primary);
+    font-size: 0.85rem;
+    font-weight: 500;
+    text-decoration: none;
+    opacity: 0.75;
+    transition: opacity 0.2s ease;
+}
+.tr-nav-link:hover { opacity: 1; }
+.tr-arrow {
+    display: inline-block;
+    transform: rotate(0deg);
+    margin-left: 0.15rem;
+    font-size: 0.75rem;
+    opacity: 0.6;
+}
+
+/* === Architecture explainer card ==================================== */
+
+.tr-arch {
+    padding: 0.5rem 0.5rem 1rem 0;
+}
+.tr-arch-title {
+    font-size: 1.9rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    letter-spacing: -0.02em;
+    margin: 0.5rem 0 1rem 0;
+    line-height: 1.2;
+}
+.tr-arch-intro {
+    color: var(--text-secondary);
+    font-size: 0.95rem;
+    margin: 0 0 1.5rem 0;
+    line-height: 1.55;
+}
+.tr-step-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+.tr-step {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1.3rem;
+    align-items: flex-start;
+}
+.tr-step-num {
+    flex-shrink: 0;
+    width: 1.6rem;
+    height: 1.6rem;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.78rem;
+    color: var(--text-secondary);
+    margin-top: 0.1rem;
+    font-feature-settings: "tnum";
+}
+.tr-step-body { flex: 1; }
+.tr-step-title {
+    color: var(--text-primary);
+    font-size: 0.95rem;
+    font-weight: 600;
+    display: block;
+    margin-bottom: 0.25rem;
+}
+.tr-step-text {
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    line-height: 1.55;
+    margin: 0;
+}
+.tr-step-text u {
+    text-decoration: none;
+    border-bottom: 1px dotted rgba(124, 58, 237, 0.6);
+    color: #C4B5FD;
+}
+
+/* === Pipeline diagram =============================================== */
+
+.tr-pipeline {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin: 1.5rem 0 0 0;
+    padding: 1rem;
+    background: rgba(15, 15, 35, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 14px;
+    flex-wrap: wrap;
+}
+.tr-pipe-rows {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    flex: 1;
+    min-width: 240px;
+}
+.tr-pipe-row {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+}
+.tr-pipe-source {
+    flex: 1;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.10);
+    border-radius: 8px;
+    padding: 0.4rem 0.7rem;
+    color: var(--text-primary);
+    font-size: 0.8rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+.tr-pipe-icon {
+    color: var(--text-secondary);
+    font-size: 0.8rem;
+    width: 1rem;
+    text-align: center;
+}
+.tr-pipe-icon-lg {
+    font-size: 1.4rem;
+    color: var(--text-primary);
+    line-height: 1;
+    margin-bottom: 0.3rem;
+}
+.tr-pipe-arrow {
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    opacity: 0.5;
+}
+.tr-pipe-arrow-h { font-size: 1rem; }
+.tr-pipe-model {
+    background: rgba(124, 58, 237, 0.10);
+    border: 1px solid rgba(124, 58, 237, 0.25);
+    color: #DDD6FE;
+    border-radius: 8px;
+    padding: 0.4rem 0.7rem;
+    font-size: 0.78rem;
+    font-weight: 500;
+    min-width: 100px;
+    text-align: center;
+}
+.tr-pipe-fuse {
+    background: rgba(59, 130, 246, 0.10);
+    border: 1px solid rgba(59, 130, 246, 0.25);
+    border-radius: 10px;
+    padding: 0.7rem 0.6rem;
+    color: #BFDBFE;
+    text-align: center;
+    min-width: 80px;
+}
+.tr-pipe-label {
+    font-size: 0.72rem;
+    line-height: 1.2;
+    color: var(--text-secondary);
+}
+
+/* === Demo panel (right column wrapper) ============================== */
+
+.tr-demo-card {
+    background: rgba(15, 15, 35, 0.55);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 18px;
+    padding: 1rem 1rem 0.5rem 1rem;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4),
+                0 0 0 1px rgba(124, 58, 237, 0.05);
+}
+.tr-demo-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 0.6rem;
+    padding: 0.2rem 0.4rem 0.6rem 0.4rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+}
+.tr-demo-title {
+    color: var(--text-secondary);
+    font-size: 0.78rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-weight: 600;
+}
+.tr-demo-cbar {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    position: relative;
+}
+.tr-demo-cbar-label {
+    font-size: 0.7rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+.tr-demo-cbar-grad {
+    width: 80px;
+    height: 6px;
+    border-radius: 3px;
+    background: linear-gradient(90deg, #1F2937 0%, #DC2626 35%, #F97316 65%, #FCD34D 100%);
+    box-shadow: 0 0 8px rgba(252, 211, 77, 0.25);
+}
+.tr-demo-cbar-caption {
+    position: absolute;
+    bottom: -1.1rem;
+    left: 0;
+    right: 0;
+    text-align: center;
+    font-size: 0.65rem;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+
+/* === Segmented controls (True / Compare / Predicted etc) ============ */
+/* Restyle st.radio horizontal as a pill group. */
+
+.tr-segmented div[role="radiogroup"] {
+    display: inline-flex;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 10px;
+    padding: 0.2rem;
+    gap: 0;
+}
+.tr-segmented div[role="radiogroup"] label {
+    margin: 0 !important;
+    padding: 0.4rem 1rem !important;
+    border-radius: 7px;
+    cursor: pointer;
+    color: var(--text-secondary) !important;
+    font-size: 0.82rem !important;
+    transition: all 0.2s ease;
+    background: transparent !important;
+}
+.tr-segmented div[role="radiogroup"] label:has(input:checked) {
+    background: rgba(255, 255, 255, 0.10) !important;
+    color: var(--text-primary) !important;
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+/* sr-only: hide visually but keep input in layout so BaseWeb onChange fires */
+.tr-segmented div[role="radiogroup"] input {
+    position: absolute !important;
+    opacity: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+    margin: -1px !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    border: 0 !important;
+}
+/* Hide the BaseWeb visual radio dot, but keep it click-targetable */
+.tr-segmented div[role="radiogroup"] label > div:first-child {
+    width: 0 !important;
+    height: 0 !important;
+    overflow: hidden !important;
+    opacity: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: 0 !important;
+}
+.tr-segmented div[role="radiogroup"] label > div:last-child p { margin: 0 !important; }
+
+/* Tab strip: thin underline on the active tab */
+.stTabs [data-baseweb="tab-list"] {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    gap: 1.5rem;
+}
+.stTabs [data-baseweb="tab"] {
+    padding: 0.5rem 0;
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    background: transparent !important;
+}
+.stTabs [data-baseweb="tab"][aria-selected="true"] {
+    color: var(--text-primary);
+    border-bottom: 2px solid var(--accent-purple);
+}
+
+/* === TRIBE-style footer ============================================== */
+
+.tr-foot {
+    margin: 4rem -1rem 0 -1rem;
+    padding: 3rem 2rem 1.5rem 2rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    background: linear-gradient(180deg,
+        rgba(0, 0, 0, 0) 0%,
+        rgba(255, 255, 255, 0.015) 100%);
+}
+.tr-foot-grid {
+    display: grid;
+    grid-template-columns: 1.4fr 1fr 1fr 1fr;
+    gap: 2.5rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+.tr-foot-brand-logo {
+    display: flex;
+    gap: 0.4rem;
+    margin-bottom: 0.7rem;
+}
+.tr-foot-dot {
+    width: 0.6rem;
+    height: 0.6rem;
+    border-radius: 50%;
+    display: inline-block;
+}
+.tr-foot-dot-a { background: var(--accent-purple); box-shadow: 0 0 8px var(--accent-purple); }
+.tr-foot-dot-b { background: var(--accent-blue);   box-shadow: 0 0 8px var(--accent-blue); }
+.tr-foot-dot-c { background: var(--accent-cyan);   box-shadow: 0 0 8px var(--accent-cyan); }
+.tr-foot-brand-title {
+    font-size: 1.15rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    letter-spacing: -0.01em;
+    margin-bottom: 0.25rem;
+}
+.tr-foot-brand-tagline {
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    line-height: 1.5;
+    margin-bottom: 1rem;
+    max-width: 18rem;
+}
+.tr-foot-built {
+    font-size: 0.78rem;
+    color: var(--text-secondary);
+    opacity: 0.8;
+}
+.tr-foot-built a {
+    color: var(--accent-purple);
+    text-decoration: none;
+}
+.tr-foot-col-title {
+    color: var(--text-primary);
+    font-size: 0.78rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin-bottom: 0.9rem;
+}
+.tr-foot-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.55rem;
+}
+.tr-foot-link {
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-size: 0.85rem;
+    transition: color 0.2s ease;
+}
+.tr-foot-link:hover {
+    color: var(--text-primary);
+}
+.tr-foot-rule {
+    margin: 2.5rem auto 1rem auto;
+    max-width: 1200px;
+    border-top: 1px solid rgba(255, 255, 255, 0.07);
+}
+.tr-foot-legal {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: var(--text-secondary);
+    font-size: 0.72rem;
+    opacity: 0.7;
+}
+.tr-foot-legal-right {
+    display: flex;
+    gap: 0.6rem;
+    align-items: center;
+}
+.tr-foot-legal-right a {
+    color: var(--text-secondary);
+    text-decoration: none;
+}
+.tr-foot-legal-right a:hover { color: var(--text-primary); }
+
+/* === Feature card grid (Analysis tools) ============================== */
+
+.cl-feature-card {
+    --card-accent: #7C3AED;
+    background: rgba(15, 15, 35, 0.55);
+    backdrop-filter: blur(10px);
+    border: 1px solid color-mix(in srgb, var(--card-accent) 25%, transparent);
+    border-radius: 14px;
+    padding: 1.3rem 1.4rem 1.1rem 1.4rem;
+    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+    display: flex;
+    flex-direction: column;
+    min-height: 220px;     /* uniform across the grid */
+    text-decoration: none;
+}
+.cl-feature-card:hover {
+    border-color: color-mix(in srgb, var(--card-accent) 70%, transparent);
+    box-shadow: 0 6px 24px color-mix(in srgb, var(--card-accent) 18%, transparent);
+    transform: translateY(-2px);
+}
+
+.cl-feature-icon {
+    font-size: 1.5rem;
+    margin-bottom: 0.6rem;
+    line-height: 1;
+}
+.cl-feature-title {
+    color: var(--card-accent);
+    font-size: 1.0rem;
+    font-weight: 600;
+    margin-bottom: 0.45rem;
+    letter-spacing: -0.005em;
+}
+.cl-feature-desc {
+    color: var(--text-secondary);
+    font-size: 0.83rem;
+    line-height: 1.55;
+    flex: 1;            /* push CTA to the bottom of the card */
+    margin-bottom: 0.9rem;
+}
+.cl-feature-cta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--text-primary);
+    font-size: 0.82rem;
+    font-weight: 500;
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    padding-top: 0.75rem;
+    margin-top: auto;
+    transition: color 0.2s ease;
+}
+.cl-feature-arrow {
+    transition: transform 0.2s ease;
+    color: var(--card-accent);
+    font-weight: 600;
+}
+.cl-feature-card:hover .cl-feature-arrow {
+    transform: translateX(4px);
+}
+.cl-feature-link {
+    display: flex;
+    cursor: pointer;
+    color: inherit;
+}
+.cl-feature-link:visited { color: inherit; }
+
+
+/* === Sidebar pre-hide (kill the initial flicker) ===================== */
+/* Streamlit's collapsed sidebar still flashes briefly on first paint
+ * before its inline width animation finishes. Force the collapsed
+ * state at CSS level so users don't see the flash. The hamburger
+ * toggle stays clickable to expand it on demand. */
+
+section[data-testid="stSidebar"][aria-expanded="false"] {
+    transform: translateX(-100%);
+    transition: transform 0.25s ease, width 0.25s ease;
+    visibility: hidden;
+}
+section[data-testid="stSidebar"][aria-expanded="true"] {
+    transform: translateX(0);
+    visibility: visible;
+}
+
+/* === Feature card refinements: anchor + spans + SVG icons =========== */
+
+.cl-feature-card,
+.cl-feature-card:visited,
+.cl-feature-card:hover,
+.cl-feature-card:focus {
+    text-decoration: none !important;
+    color: inherit;
+}
+.cl-feature-card span {
+    display: block;
+    text-decoration: none !important;
+}
+.cl-feature-card .cl-feature-cta-label,
+.cl-feature-card .cl-feature-arrow {
+    display: inline-flex;
+    align-items: center;
+}
+/* Inline SVG icon block at the top of each card. */
+.cl-feature-icon {
+    width: 2.0rem;
+    height: 2.0rem;
+    margin-bottom: 0.7rem;
+    color: var(--card-accent);
+    line-height: 1;
+}
+.cl-feature-icon svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+/* Arrow at bottom-right of the CTA strip; tints with the card accent. */
+.cl-feature-arrow svg {
+    width: 1.05rem;
+    height: 1.05rem;
+    display: block;
+}
+.cl-feature-cta {
+    display: flex !important;          /* override the .cl-feature-card span block rule */
+    align-items: center;
+    justify-content: space-between;
+}
+
+/* === Stat card (glow_card) and section header — variable-driven ===== */
+
+.cl-stat-card {
+    --card-accent: #06B6D4;
+    background: var(--bg-glass);
+    backdrop-filter: blur(10px);
+    border: 1px solid color-mix(in srgb, var(--card-accent) 25%, var(--border-glass));
+    border-radius: 14px;
+    padding: 1.2rem 1rem;
+    text-align: center;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    box-shadow: 0 0 22px color-mix(in srgb, var(--card-accent) 12%, transparent);
+}
+.cl-stat-card:hover {
+    border-color: color-mix(in srgb, var(--card-accent) 50%, var(--border-glass));
+    box-shadow: 0 0 32px color-mix(in srgb, var(--card-accent) 20%, transparent);
+}
+.cl-stat-label {
+    color: var(--text-secondary);
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin-bottom: 0.4rem;
+    font-weight: 600;
+}
+.cl-stat-value {
+    color: var(--card-accent);
+    font-size: 2.0rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    line-height: 1.1;
+}
+.cl-stat-sub {
+    color: var(--text-secondary);
+    font-size: 0.74rem;
+    margin-top: 0.25rem;
+    opacity: 0.8;
+}
+
+.cl-section {
+    margin: 1.5rem 0 1rem 0;
+}
+.cl-section-title {
+    color: var(--text-primary);
+    font-size: 1.25rem;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    margin: 0 0 0.3rem 0;
+    padding-bottom: 0.4rem;
+    border-bottom: 1px solid var(--border-glass);
+}
+.cl-section-desc {
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    margin: 0;
+}
+
+/* The original .cl-feature-card relied on a hardcoded dark background.
+ * Switch it to the theme variable so the white overlay can re-skin it. */
+.cl-feature-card {
+    background: var(--bg-glass);
+}
+
+/* === Theme toggle switch (sliding pill, sun/moon, in the header) ==== */
+
+.tr-header-right {
+    display: flex;
+    align-items: center;
+    gap: 1.2rem;
+    justify-content: flex-end;
+}
+.tr-toggle {
+    text-decoration: none !important;
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
+    color: var(--text-primary);
+}
+.tr-toggle-track {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 3.4rem;
+    height: 1.6rem;
+    padding: 0 0.35rem;
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    border-radius: 999px;
+    transition: background 0.25s ease, border-color 0.25s ease;
+    box-sizing: border-box;
+}
+.tr-toggle-track:hover {
+    border-color: rgba(255, 255, 255, 0.28);
+}
+.tr-toggle-side {
+    width: 0.95rem;
+    height: 0.95rem;
+    color: var(--text-secondary);
+    opacity: 0.55;
+    transition: opacity 0.2s ease, color 0.2s ease;
+    z-index: 0;
+    pointer-events: none;
+}
+.tr-toggle-icon {
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+/* Active side glows; inactive side fades out */
+.tr-toggle-track.off .tr-toggle-left {
+    opacity: 1;
+    color: #E2E8F0;
+}
+.tr-toggle-track.on .tr-toggle-right {
+    opacity: 1;
+    color: #FBBF24;
+}
+.tr-toggle-knob {
+    position: absolute;
+    top: 50%;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 50%;
+    background: linear-gradient(180deg, #F8FAFC 0%, #CBD5E1 100%);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
+    transform: translateY(-50%) translateX(0);
+    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
+    z-index: 1;
+    pointer-events: none;
+}
+.tr-toggle-track.off .tr-toggle-knob {
+    transform: translateY(-50%) translateX(0);
+    left: 0.18rem;
+}
+.tr-toggle-track.on .tr-toggle-knob {
+    transform: translateY(-50%) translateX(1.78rem);
+    left: 0.18rem;
+}

assets/theme_black.css

@@ -0,0 +1,60 @@
+/* === Pure-black overlay ============================================== */
+/* Overrides the default theme.css gradients with a flat #000000
+ * background. No purple wash, no radial glows. Text stays light. */
+
+:root {
+    --bg-primary: #000000;
+    --bg-secondary: rgba(15, 15, 15, 0.85);
+    --bg-glass: rgba(20, 20, 20, 0.55);
+    --border-glass: rgba(255, 255, 255, 0.10);
+    --text-primary: #FFFFFF;
+    --text-secondary: #9CA3AF;
+}
+
+.stApp {
+    background: #000000 !important;
+    background-image: none !important;
+}
+
+section[data-testid="stSidebar"] {
+    background: #050505 !important;
+    border-right: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+/* Soften the panel glow tint that the base theme bakes in. */
+div[data-testid="stVerticalBlock"] > div[data-testid="stVerticalBlockBorderWrapper"] {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.07);
+    box-shadow: none;
+}
+
+.tr-header {
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 100%);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+.tr-demo-card {
+    background: rgba(15, 15, 15, 0.7);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+}
+.tr-pipeline {
+    background: rgba(15, 15, 15, 0.55);
+    border: 1px solid rgba(255, 255, 255, 0.07);
+}
+.tr-pipe-source {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgba(255, 255, 255, 0.10);
+}
+.tr-pipe-model {
+    background: rgba(255, 255, 255, 0.06);
+    border-color: rgba(255, 255, 255, 0.12);
+    color: #E5E7EB;
+}
+.tr-pipe-fuse {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgba(255, 255, 255, 0.10);
+    color: #E5E7EB;
+}
+.tr-step-text u {
+    border-bottom-color: rgba(255, 255, 255, 0.35);
+    color: #E5E7EB;
+}

assets/theme_white.css

@@ -0,0 +1,245 @@
+/* === Pure-white overlay ============================================== */
+/* Light-mode counterpart to theme_black.css. Pure #FFFFFF background,
+ * deep ink-on-paper text. No tints, no gradients. */
+
+:root {
+    --bg-primary: #FFFFFF;
+    --bg-secondary: rgba(247, 247, 248, 0.95);
+    --bg-glass: rgba(248, 248, 250, 0.85);
+    --border-glass: rgba(0, 0, 0, 0.08);
+    --text-primary: #0F172A;
+    --text-secondary: #475569;
+    --accent-purple: #6D28D9;
+    --accent-blue: #2563EB;
+    --accent-cyan: #0891B2;
+}
+
+.stApp {
+    background: #FFFFFF !important;
+    background-image: none !important;
+    color: #0F172A;
+}
+
+section[data-testid="stSidebar"] {
+    background: #FAFAFA !important;
+    border-right: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+div[data-testid="stVerticalBlock"] > div[data-testid="stVerticalBlockBorderWrapper"] {
+    background: #FFFFFF;
+    border: 1px solid rgba(0, 0, 0, 0.07);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+div[data-testid="stExpander"] {
+    background: #FAFAFA;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+/* Body / paragraph text */
+.stApp p, .stApp li, .stApp label, .stApp .stMarkdown {
+    color: #1F2937;
+}
+
+/* TRIBE-style header in light mode */
+.tr-header {
+    background: rgba(255, 255, 255, 0.98);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.tr-header-title { color: #0F172A; }
+.tr-header-subtitle { color: #6B7280; }
+.tr-header-center { color: #6B7280; }
+.tr-nav-link { color: #0F172A; }
+.tr-arrow { opacity: 0.55; }
+
+.tr-arch-title { color: #0F172A; }
+.tr-arch-intro { color: #475569; }
+.tr-step-title { color: #0F172A; }
+.tr-step-text { color: #475569; }
+.tr-step-num {
+    background: #F3F4F6;
+    border: 1px solid #D1D5DB;
+    color: #4B5563;
+}
+.tr-step-text u {
+    border-bottom-color: #6D28D9;
+    color: #5B21B6;
+}
+
+.tr-demo-card {
+    background: #FFFFFF;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
+}
+.tr-demo-title { color: #6B7280; }
+.tr-demo-cbar-label, .tr-demo-cbar-caption { color: #6B7280; }
+
+.tr-pipeline {
+    background: #FAFAFA;
+    border: 1px solid rgba(0, 0, 0, 0.07);
+}
+.tr-pipe-source {
+    background: #FFFFFF;
+    border-color: rgba(0, 0, 0, 0.10);
+    color: #0F172A;
+}
+.tr-pipe-model {
+    background: #EEF2FF;
+    border-color: #C7D2FE;
+    color: #3730A3;
+}
+.tr-pipe-fuse {
+    background: #FFFFFF;
+    border-color: rgba(0, 0, 0, 0.10);
+    color: #0F172A;
+}
+.tr-pipe-icon, .tr-pipe-arrow { color: #9CA3AF; }
+.tr-pipe-icon-lg { color: #0F172A; }
+.tr-pipe-label { color: #4B5563; }
+
+/* Segmented control in light mode */
+.tr-segmented div[role="radiogroup"] {
+    background: #F3F4F6;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.tr-segmented div[role="radiogroup"] label {
+    color: #6B7280 !important;
+}
+.tr-segmented div[role="radiogroup"] label:has(input:checked) {
+    background: #FFFFFF !important;
+    color: #0F172A !important;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+/* Tab strip */
+.stTabs [data-baseweb="tab-list"] {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+.stTabs [data-baseweb="tab"] {
+    color: #6B7280;
+}
+.stTabs [data-baseweb="tab"][aria-selected="true"] {
+    color: #0F172A;
+    border-bottom: 2px solid #0F172A;
+}
+
+/* Tables and code blocks */
+.stApp table { color: #0F172A; }
+.stApp th { background: #F9FAFB; color: #0F172A; }
+.stApp td { background: #FFFFFF; color: #1F2937; }
+.stApp code { background: #F3F4F6; color: #0F172A; border-radius: 4px; padding: 0.05rem 0.3rem; }
+
+/* Buttons / page links */
+.stApp a[data-testid="stPageLink"] {
+    background: rgba(0, 0, 0, 0.04);
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    color: #0F172A !important;
+}
+
+/* Glow cards: drop the glow in light mode for clean look */
+.stApp [style*="background: rgba(15, 15, 40"] {
+    /* Inline-styled glow cards render OK; nothing to override */
+}
+
+/* === Variable-driven helpers, light-mode tuning ====================== */
+
+/* glow_card / stat card */
+.cl-stat-card {
+    background: #FFFFFF;
+    border-color: color-mix(in srgb, var(--card-accent) 22%, rgba(0, 0, 0, 0.08));
+    box-shadow:
+        0 1px 2px rgba(15, 23, 42, 0.05),
+        0 0 14px color-mix(in srgb, var(--card-accent) 8%, transparent);
+}
+.cl-stat-card:hover {
+    border-color: color-mix(in srgb, var(--card-accent) 50%, rgba(0, 0, 0, 0.12));
+    box-shadow:
+        0 4px 12px rgba(15, 23, 42, 0.07),
+        0 0 22px color-mix(in srgb, var(--card-accent) 14%, transparent);
+}
+.cl-stat-label { color: #64748B; }
+.cl-stat-sub { color: #64748B; }
+
+/* section_header */
+.cl-section-title {
+    color: #0F172A;
+    border-bottom-color: rgba(0, 0, 0, 0.08);
+}
+.cl-section-desc { color: #475569; }
+
+/* Feature cards: the .cl-feature-card on light bg should be paper-white
+ * with a subtle border, not glassmorphic dark.
+ */
+.cl-feature-card {
+    background: #FFFFFF;
+    border: 1px solid color-mix(in srgb, var(--card-accent) 22%, rgba(0, 0, 0, 0.08));
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+.cl-feature-card:hover {
+    border-color: color-mix(in srgb, var(--card-accent) 60%, rgba(0, 0, 0, 0.12));
+    box-shadow:
+        0 8px 24px color-mix(in srgb, var(--card-accent) 15%, rgba(15, 23, 42, 0.08));
+}
+.cl-feature-desc { color: #475569; }
+.cl-feature-cta {
+    color: #0F172A;
+    border-top-color: rgba(0, 0, 0, 0.08);
+}
+
+/* Streamlit's vertical-block wrappers can still have a hard dark
+ * background bleeding from the base theme. Force them transparent. */
+div[data-testid="stVerticalBlock"] > div[data-testid="stVerticalBlockBorderWrapper"] {
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+}
+
+/* Plotly chart wrappers */
+div[data-testid="stPlotlyChart"] {
+    background: #FFFFFF;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+/* Sidebar text */
+section[data-testid="stSidebar"] * {
+    color: #0F172A;
+}
+section[data-testid="stSidebar"] .stMarkdown h1,
+section[data-testid="stSidebar"] .stMarkdown h2,
+section[data-testid="stSidebar"] .stMarkdown h3 {
+    color: #1E40AF;
+}
+
+/* Hide the radial-gradient bleed-through more aggressively. */
+.stApp,
+.stApp > div,
+[data-testid="stAppViewContainer"],
+[data-testid="stMain"],
+[data-testid="stMain"] > div {
+    background: #FFFFFF !important;
+    background-image: none !important;
+}
+
+/* === Theme toggle switch (light-mode tuning) ========================= */
+.tr-toggle-track {
+    background: #F1F5F9;
+    border-color: rgba(15, 23, 42, 0.15);
+}
+.tr-toggle-track:hover {
+    border-color: rgba(15, 23, 42, 0.3);
+}
+.tr-toggle-side {
+    color: #64748B;
+}
+.tr-toggle-track.off .tr-toggle-left {
+    color: #1E293B;
+}
+.tr-toggle-track.on .tr-toggle-right {
+    color: #F59E0B;
+}
+.tr-toggle-knob {
+    background: linear-gradient(180deg, #FFFFFF 0%, #E2E8F0 100%);
+    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
+}

brain_mesh.py

@@ -55,14 +55,31 @@ ACTIVATION_PATTERNS = {
 # --- Mesh Loading ---
 
 @st.cache_resource
-def load_fsaverage_mesh(hemi="left", resolution="fsaverage5"):
-    """Load fsaverage brain mesh via nilearn. Returns (coords, faces)."""
+def load_fsaverage_mesh(hemi="left", resolution="fsaverage5", surface="pial"):
+    """Load an fsaverage brain mesh via nilearn.
+
+    Parameters
+    ----------
+    hemi
+        ``"left"`` or ``"right"``.
+    resolution
+        ``"fsaverage5"``, ``"fsaverage6"``, ``"fsaverage7"``, or
+        ``"fsaverage"`` (= 7).
+    surface
+        ``"pial"`` (real cortical surface, default), ``"inflated"``
+        (smooth balloon used in encoding papers), or ``"white"``
+        (gray/white-matter boundary).
+    """
     from nilearn.datasets import fetch_surf_fsaverage
     from nilearn.surface import load_surf_mesh
 
     fsaverage = fetch_surf_fsaverage(mesh=resolution)
-    key = f"pial_{hemi}"
-    coords, faces = load_surf_mesh(fsaverage[key])
+    surface_key = {
+        "pial":     f"pial_{hemi}",
+        "inflated": f"infl_{hemi}",
+        "white":    f"white_{hemi}",
+    }.get(surface, f"pial_{hemi}")
+    coords, faces = load_surf_mesh(fsaverage[surface_key])
     return np.array(coords, dtype=np.float32), np.array(faces, dtype=np.int32)
 
 
@@ -125,7 +142,14 @@ def blend_with_sulcal(vertex_data, sulcal_map, data_opacity=0.85):
 # --- Plotly Rendering ---
 
 def _make_mesh3d(coords, faces, vertex_data, cmap, vmin, vmax, opacity=1.0, name=""):
-    """Create a Plotly Mesh3d trace."""
+    """Create a Plotly Mesh3d trace.
+
+    Lighting tuned for an inflated cortex: low ambient (so concavities
+    actually look concave), strong diffuse, modest specular for the
+    Phong highlight on gyri. ``cmap`` may be either a Plotly named
+    colormap (``"Hot"``, ``"Inferno"``) or a list of ``[stop, color]``
+    pairs, e.g. for a custom hot-on-gray cortex palette.
+    """
     return go.Mesh3d(
         x=coords[:, 0], y=coords[:, 1], z=coords[:, 2],
         i=faces[:, 0], j=faces[:, 1], k=faces[:, 2],
@@ -134,14 +158,50 @@ def _make_mesh3d(coords, faces, vertex_data, cmap, vmin, vmax, opacity=1.0, name
         colorscale=cmap,
         cmin=vmin, cmax=vmax,
         opacity=opacity,
-        lighting=dict(ambient=0.4, diffuse=0.6, specular=0.3, roughness=0.5, fresnel=0.2),
-        lightposition=dict(x=100, y=200, z=300),
+        lighting=dict(
+            ambient=0.55,    # bumped so the cortex base color reads correctly
+            diffuse=0.85,    # main shape modulation from the directional light
+            specular=0.55,   # Phong highlight; gives gyri a soft sheen
+            roughness=0.45,  # slightly polished, not matte
+            fresnel=0.15,    # subtle rim brightening
+        ),
+        lightposition=dict(x=120, y=200, z=400),
         showscale=False,
         name=name,
         hovertemplate="Vertex: %{pointNumber}<br>Value: %{intensity:.3f}<extra></extra>",
     )
 
 
+def make_hot_on_cortex_colorscale(theme_mode: str = "black") -> list[list]:
+    """Return a Plotly colorscale that keeps the cortex visible.
+
+    Pure ``"Hot"`` maps zero to black, so non-activated cortex
+    disappears against a black background. This palette pins the low
+    end to a neutral gray (light enough to read on dark, dark enough
+    to read on light), holds it for a small plateau, then ramps
+    through dark-red → red → orange → gold → white at the high end.
+
+    Returned format matches Plotly's colorscale list spec:
+    ``[[stop, "#hex"], ...]``.
+    """
+    if theme_mode == "white":
+        cortex = "#9CA3AF"   # slate-400, reads clearly on #FFFFFF
+        plateau_end = "#9CA3AF"
+    else:
+        cortex = "#3F3F46"   # zinc-700, reads clearly on #000000
+        plateau_end = "#3F3F46"
+    # Hot ramp on top of the cortex plateau.
+    return [
+        [0.00, cortex],
+        [0.12, plateau_end],   # plateau: sub-threshold cortex stays gray
+        [0.20, "#7F1D1D"],     # dark red (subtle onset)
+        [0.40, "#DC2626"],     # red
+        [0.62, "#F97316"],     # orange
+        [0.82, "#FBBF24"],     # gold
+        [1.00, "#FFFFFF"],     # white peak
+    ]
+
+
 def _scene_layout(camera, bg_color="#0E1117"):
     """Create a Plotly 3D scene layout."""
     return dict(
@@ -235,9 +295,19 @@ def _render_pyvista(coords, faces, vertex_data, cmap, vmin, vmax,
     mesh = pv.PolyData(coords, pv_faces)
     mesh.point_data["activation"] = vertex_data
 
-    cmap_map = {"Hot": "hot", "Inferno": "inferno", "Plasma": "plasma",
-                "Viridis": "viridis", "RdBu_r": "RdBu_r", "Coolwarm": "coolwarm"}
-    pv_cmap = cmap_map.get(cmap, "hot")
+    # The Plotly path accepts a list of [stop, hex] pairs as a custom
+    # colorscale; convert that to a matplotlib LinearSegmentedColormap
+    # so PyVista can use it. Named colormaps fall through unchanged.
+    if isinstance(cmap, list):
+        from matplotlib.colors import LinearSegmentedColormap
+        pv_cmap = LinearSegmentedColormap.from_list(
+            "cl_custom",
+            [(stop, color) for stop, color in cmap],
+        )
+    else:
+        cmap_map = {"Hot": "hot", "Inferno": "inferno", "Plasma": "plasma",
+                    "Viridis": "viridis", "RdBu_r": "RdBu_r", "Coolwarm": "coolwarm"}
+        pv_cmap = cmap_map.get(cmap, "hot")
 
     plotter = pv.Plotter(window_size=[900, 600], off_screen=True)
     plotter.add_mesh(

theme.py

@@ -4,13 +4,37 @@ import streamlit as st
 from pathlib import Path
 
 
-def inject_theme():
-    """Inject custom CSS and hide default Streamlit chrome."""
-    css_path = Path(__file__).parent / "assets" / "theme.css"
-    if css_path.exists():
-        css = css_path.read_text()
-    else:
-        css = ""
+THEME_MODES = ("black", "white")
+
+
+def get_theme_mode() -> str:
+    """Read the active theme from session state. Defaults to ``"black"``."""
+    mode = st.session_state.get("ui_theme_mode", "black")
+    return mode if mode in THEME_MODES else "black"
+
+
+def set_theme_mode(mode: str) -> None:
+    """Set the active theme. Use ``"black"`` for pure-black background,
+    ``"white"`` for pure-white background. Anything else is normalized."""
+    st.session_state["ui_theme_mode"] = mode if mode in THEME_MODES else "black"
+
+
+def inject_theme(mode: str | None = None):
+    """Inject custom CSS for the chosen theme and hide Streamlit chrome.
+
+    When ``mode`` is ``None`` we read the active mode from session state
+    via :func:`get_theme_mode`. The base ``assets/theme.css`` is always
+    included; theme-specific overrides are appended on top.
+    """
+    if mode is None:
+        mode = get_theme_mode()
+
+    base_css_path = Path(__file__).parent / "assets" / "theme.css"
+    overlay_css_path = Path(__file__).parent / "assets" / f"theme_{mode}.css"
+
+    css = base_css_path.read_text() if base_css_path.exists() else ""
+    if overlay_css_path.exists():
+        css += "\n\n" + overlay_css_path.read_text()
 
     st.markdown(f"<style>{css}</style>", unsafe_allow_html=True)
 
@@ -74,58 +98,155 @@ def hero_header(title, subtitle="", github_url="https://github.com/siddhant-rajh
 
 
 def glow_card(title, value, subtitle="", color="#06B6D4"):
-    """Render a glowing metric card."""
-    st.markdown(f"""
-    <div style="
-        background: rgba(15, 15, 40, 0.5);
-        backdrop-filter: blur(10px);
-        border: 1px solid {color}33;
-        border-radius: 14px;
-        padding: 1.2rem;
-        text-align: center;
-        box-shadow: 0 0 20px {color}15;
-        transition: all 0.3s ease;
-    ">
-        <div style="color: #94A3B8; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.3rem;">{title}</div>
-        <div style="color: {color}; font-size: 2rem; font-weight: 700; letter-spacing: -0.02em;">{value}</div>
-        <div style="color: #64748B; font-size: 0.75rem; margin-top: 0.2rem;">{subtitle}</div>
-    </div>
-    """, unsafe_allow_html=True)
+    """Render a glowing metric card.
+
+    Layout uses the ``cl-stat-card`` CSS class so background / border /
+    text colors come from theme variables and flip automatically when
+    the user switches between Black and White modes. Only the accent
+    color (the big number) stays per-card.
+    """
+    st.markdown(
+        f"""
+        <div class="cl-stat-card" style="--card-accent: {color};">
+            <div class="cl-stat-label">{title}</div>
+            <div class="cl-stat-value">{value}</div>
+            <div class="cl-stat-sub">{subtitle}</div>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
 
 
 def section_header(title, description=""):
-    """Render a styled section header with optional description."""
-    st.markdown(f"""
-    <div style="margin: 1.5rem 0 0.8rem 0;">
-        <h2 style="
-            color: #F1F5F9;
-            font-size: 1.3rem;
-            font-weight: 600;
-            letter-spacing: -0.02em;
-            margin-bottom: 0.3rem;
-            padding-bottom: 0.4rem;
-            border-bottom: 1px solid rgba(100, 100, 255, 0.15);
-        ">{title}</h2>
-        {"<p style='color: #94A3B8; font-size: 0.85rem; margin-top: 0;'>" + description + "</p>" if description else ""}
-    </div>
-    """, unsafe_allow_html=True)
+    """Render a styled section header with optional description.
+
+    Colors come from theme variables (``--text-primary`` for the title,
+    ``--text-secondary`` for the description, ``--border-glass`` for
+    the underline) so the same markup reads correctly on dark and
+    light backgrounds.
+    """
+    desc_html = (
+        f'<p class="cl-section-desc">{description}</p>' if description else ""
+    )
+    st.markdown(
+        f"""
+        <div class="cl-section">
+            <h2 class="cl-section-title">{title}</h2>
+            {desc_html}
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+
+_FEATURE_ICONS: dict[str, str] = {
+    # Heroicons-style monochrome strokes; small currentColor SVGs so the
+    # accent color flows from the parent `--card-accent` variable.
+    "target": (
+        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" '
+        'stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">'
+        '<circle cx="12" cy="12" r="9"/>'
+        '<circle cx="12" cy="12" r="5"/>'
+        '<circle cx="12" cy="12" r="1.5" fill="currentColor"/>'
+        '</svg>'
+    ),
+    "bars": (
+        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" '
+        'stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">'
+        '<path d="M5 21V11"/><path d="M12 21V4"/><path d="M19 21V14"/>'
+        '<path d="M3 21h18"/></svg>'
+    ),
+    "clock": (
+        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" '
+        'stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">'
+        '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2.5"/></svg>'
+    ),
+    "graph": (
+        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" '
+        'stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">'
+        '<circle cx="6" cy="7" r="2.2"/><circle cx="18" cy="7" r="2.2"/>'
+        '<circle cx="6" cy="17" r="2.2"/><circle cx="18" cy="17" r="2.2"/>'
+        '<circle cx="12" cy="12" r="2.4"/>'
+        '<path d="M8 7h2.5M13.5 7H16M8 17h2.5M13.5 17H16M6 9.2v5.6M18 9.2v5.6"/></svg>'
+    ),
+    "brain": (
+        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" '
+        'stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">'
+        '<path d="M9 5a3 3 0 0 0-3 3v0a2.5 2.5 0 0 0-2 4 2.5 2.5 0 0 0 1 4.5A3 3 0 0 0 9 19V5z"/>'
+        '<path d="M15 5a3 3 0 0 1 3 3v0a2.5 2.5 0 0 1 2 4 2.5 2.5 0 0 1-1 4.5A3 3 0 0 1 15 19V5z"/>'
+        '<path d="M12 5v14"/></svg>'
+    ),
+    "broadcast": (
+        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" '
+        'stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">'
+        '<circle cx="12" cy="12" r="2.5" fill="currentColor"/>'
+        '<path d="M8.5 8.5a5 5 0 0 0 0 7"/><path d="M15.5 15.5a5 5 0 0 0 0-7"/>'
+        '<path d="M5.5 5.5a9 9 0 0 0 0 13"/><path d="M18.5 18.5a9 9 0 0 0 0-13"/></svg>'
+    ),
+    "arrow": (
+        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" '
+        'stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">'
+        '<path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></svg>'
+    ),
+}
+
+
+def feature_icon(name: str) -> str:
+    """Return inline SVG markup for a named card icon. Unknown names
+    fall back to a hollow circle so layout still works."""
+    return _FEATURE_ICONS.get(
+        name,
+        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" '
+        'stroke-width="1.6" aria-hidden="true"><circle cx="12" cy="12" r="9"/></svg>',
+    )
 
 
 def feature_card(icon, title, description, color="#7C3AED"):
-    """Render a feature card for the home page."""
+    """Render a feature card for the home page (no inline CTA).
+
+    Kept for backwards compatibility. New callers should prefer
+    :func:`feature_card_link` which produces a uniform-height card
+    with a built-in "Open ..." link, so a row of cards lines up.
+
+    ``icon`` may be either a name registered in ``_FEATURE_ICONS``
+    (e.g. ``"target"``) or raw SVG / HTML markup.
+    """
+    icon_html = _FEATURE_ICONS.get(icon, icon)
     return f"""
-    <div style="
-        background: rgba(15, 15, 40, 0.4);
-        backdrop-filter: blur(8px);
-        border: 1px solid {color}25;
-        border-radius: 14px;
-        padding: 1.3rem;
-        height: 100%;
-        transition: all 0.3s ease;
-        cursor: pointer;
-    ">
-        <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">{icon}</div>
-        <div style="color: {color}; font-size: 1rem; font-weight: 600; margin-bottom: 0.4rem;">{title}</div>
-        <div style="color: #94A3B8; font-size: 0.8rem; line-height: 1.5;">{description}</div>
-    </div>
+    <span class="cl-feature-card" style="--card-accent: {color};">
+        <span class="cl-feature-icon">{icon_html}</span>
+        <span class="cl-feature-title">{title}</span>
+        <span class="cl-feature-desc">{description}</span>
+    </span>
+    """
+
+
+def feature_card_link(icon, title, description, href: str, color="#7C3AED"):
+    """Render a feature card as a single clickable anchor element.
+
+    Inner blocks are rendered as ``<span>`` elements with
+    ``display: block`` in CSS — anchors only allow phrasing-content
+    children in HTML5, and Streamlit's HTML sanitizer hoists ``<div>``
+    children out of ``<a>``, splitting the card visually. Spans are
+    safe.
+
+    ``icon`` may be either a name registered in ``_FEATURE_ICONS``
+    (``"target"``, ``"bars"``, ``"clock"``, ``"graph"``, ``"brain"``,
+    ``"broadcast"``) or raw SVG markup.
+    ``href`` is the multipage URL Streamlit exposes (e.g.
+    ``./Brain_Alignment``).
+    """
+    icon_html = _FEATURE_ICONS.get(icon, icon)
+    arrow = _FEATURE_ICONS["arrow"]
+    return f"""
+    <a class="cl-feature-card cl-feature-link" href="{href}"
+       style="--card-accent: {color};" target="_self">
+        <span class="cl-feature-icon">{icon_html}</span>
+        <span class="cl-feature-title">{title}</span>
+        <span class="cl-feature-desc">{description}</span>
+        <span class="cl-feature-cta">
+            <span class="cl-feature-cta-label">Open</span>
+            <span class="cl-feature-arrow">{arrow}</span>
+        </span>
+    </a>
     """

tribe.py

@@ -0,0 +1,362 @@
+"""TRIBE v2 demo-styled UI components.
+
+Mirrors the visual structure of `aidemos.atmeta.com/tribev2`:
+
+* A branded top header with the project name on the left, parent
+  attribution centered, and navigation links on the right.
+* A two-column hero with the architecture explanation (numbered
+  steps + flow diagram) on the left and the interactive demo
+  (3D brain + controls + tabs + video) on the right.
+* Segmented toggle controls (True / Compare / Predicted, etc.)
+  styled as pill groups.
+* Tab strip with thin underline indicator.
+
+All components are pure HTML+CSS injected via ``st.markdown``;
+no third-party Streamlit components needed. The CSS classes are
+prefixed ``tr-`` so they don't collide with the existing theme.
+"""
+
+from __future__ import annotations
+
+import streamlit as st
+
+
+def _consume_theme_query_param() -> None:
+    """Apply ``?theme=black|white`` from the URL, then strip it.
+
+    The HTML toggle renders an anchor with ``href=?theme=<next>``;
+    clicking it triggers a navigation that Streamlit converts into
+    a rerun with ``st.query_params["theme"]`` set. We honor it here
+    and clear the param so the URL stays clean for sharing.
+    """
+    from theme import get_theme_mode, set_theme_mode  # local: avoid cycle
+    qp = st.query_params
+    requested = qp.get("theme")
+    if requested in ("black", "white") and requested != get_theme_mode():
+        set_theme_mode(requested)
+        try:
+            del qp["theme"]
+        except KeyError:
+            pass
+        st.rerun()
+
+
+def top_header(
+    title: str = "CortexLab",
+    subtitle: str = "AI research toolkit",
+    parent: str = "Stevens · Meta TRIBE v2",
+    links: list[tuple[str, str]] | None = None,
+    theme_toggle: bool = True,
+) -> None:
+    """Render the TRIBE-style top header bar.
+
+    Layout: title block on the far left, parent attribution centered,
+    a sliding sun/moon toggle and a row of text links on the far right.
+    The toggle is rendered as an inline anchor with a CSS-only sliding
+    pill; clicking it navigates to ``?theme=<next>``, which Streamlit
+    serves as a rerun. :func:`_consume_theme_query_param` (called at
+    the top of the script) then applies the new mode and strips the
+    query param.
+    """
+    from theme import get_theme_mode  # local: keep theme import deferred
+
+    if theme_toggle:
+        _consume_theme_query_param()
+
+    if links is None:
+        links = [
+            ("Code",  "https://github.com/siddhant-rajhans/cortexlab"),
+            ("Demo",  "https://huggingface.co/spaces/SID2000/cortexlab-dashboard"),
+            ("Paper", "https://github.com/siddhant-rajhans/cortexlab"),
+            ("Hub",   "https://huggingface.co/SID2000/cortexlab"),
+        ]
+    link_html = " ".join(
+        f'<a class="tr-nav-link" href="{href}" target="_blank">{label} <span class="tr-arrow">↗</span></a>'
+        for label, href in links
+    )
+
+    toggle_html = ""
+    if theme_toggle:
+        cur_mode = get_theme_mode()
+        next_mode = "white" if cur_mode == "black" else "black"
+        is_on = cur_mode == "white"
+        sun = (
+            '<svg class="tr-toggle-icon" viewBox="0 0 24 24" fill="none" '
+            'stroke="currentColor" stroke-width="1.7" stroke-linecap="round" '
+            'stroke-linejoin="round" aria-hidden="true">'
+            '<circle cx="12" cy="12" r="4.2"/>'
+            '<path d="M12 3v2"/><path d="M12 19v2"/>'
+            '<path d="M3 12h2"/><path d="M19 12h2"/>'
+            '<path d="M5.6 5.6l1.4 1.4"/><path d="M17 17l1.4 1.4"/>'
+            '<path d="M5.6 18.4l1.4-1.4"/><path d="M17 7l1.4-1.4"/></svg>'
+        )
+        moon = (
+            '<svg class="tr-toggle-icon" viewBox="0 0 24 24" fill="none" '
+            'stroke="currentColor" stroke-width="1.7" stroke-linecap="round" '
+            'stroke-linejoin="round" aria-hidden="true">'
+            '<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>'
+        )
+        toggle_html = (
+            f'<a class="tr-toggle" href="?theme={next_mode}" target="_self" '
+            f'role="switch" aria-checked="{str(is_on).lower()}" '
+            'aria-label="Toggle light/dark theme">'
+            f'<span class="tr-toggle-track {"on" if is_on else "off"}">'
+            f'  <span class="tr-toggle-side tr-toggle-left">{moon}</span>'
+            f'  <span class="tr-toggle-side tr-toggle-right">{sun}</span>'
+            f'  <span class="tr-toggle-knob"></span>'
+            f'</span>'
+            '</a>'
+        )
+
+    st.markdown(
+        f"""
+        <div class="tr-header">
+          <div class="tr-header-left">
+            <div class="tr-header-title">{title}</div>
+            <div class="tr-header-subtitle">{subtitle}</div>
+          </div>
+          <div class="tr-header-center">{parent}</div>
+          <div class="tr-header-right">{toggle_html}{link_html}</div>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+
+def architecture_steps(
+    title: str = "CortexLab: a multimodal encoding pipeline",
+    intro: str = "CortexLab predicts brain activity through a three-stage pipeline:",
+    steps: list[tuple[str, str]] | None = None,
+) -> None:
+    """Numbered architecture description card.
+
+    ``steps`` is a list of (heading, body_html) tuples. The body may
+    include inline markup (e.g. underlined modality names).
+    """
+    if steps is None:
+        steps = [
+            (
+                "Multimodal feature extraction",
+                "Pretrained CLIP, V-JEPA 2, and CLIP-text encoders extract <u>vision</u>, <u>motion</u>, "
+                "and <u>language</u> embeddings from short video clips and machine-generated captions.",
+            ),
+            (
+                "Voxelwise ridge encoding",
+                "A fused Triton kernel solves <u>327,684</u> independent voxelwise ridge regressions in seconds, "
+                "mapping each modality's features to per-voxel BOLD responses on the fsaverage cortical surface.",
+            ),
+            (
+                "Causal modality lesion",
+                "Each modality is ablated at test time and per-voxel ΔR² is permutation-tested across "
+                "1,000 shuffles, BH-FDR corrected, and rendered onto the inflated cortex.",
+            ),
+        ]
+    items_html = "".join(
+        f"""
+        <li class="tr-step">
+          <span class="tr-step-num">{i}</span>
+          <div class="tr-step-body">
+            <strong class="tr-step-title">{title_}</strong>
+            <p class="tr-step-text">{body}</p>
+          </div>
+        </li>
+        """
+        for i, (title_, body) in enumerate(steps, start=1)
+    )
+    st.markdown(
+        f"""
+        <div class="tr-arch">
+          <h2 class="tr-arch-title">{title}</h2>
+          <p class="tr-arch-intro">{intro}</p>
+          <ul class="tr-step-list">{items_html}</ul>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+
+def pipeline_diagram() -> None:
+    """Flow diagram: stimulus rows → per-modality encoders → fusion → brain.
+
+    Mirrors TRIBE's "Video → V-JEPA2", "Audio → wav2vec 2.0",
+    "Text → Llama 3.2" diagram visually but with our model lineup.
+    """
+    st.markdown(
+        """
+        <div class="tr-pipeline">
+          <div class="tr-pipe-rows">
+            <div class="tr-pipe-row">
+              <div class="tr-pipe-source"><span class="tr-pipe-icon">▶</span> Video frame</div>
+              <span class="tr-pipe-arrow">→</span>
+              <div class="tr-pipe-model">CLIP ViT-L/14</div>
+            </div>
+            <div class="tr-pipe-row">
+              <div class="tr-pipe-source"><span class="tr-pipe-icon">▤</span> Motion</div>
+              <span class="tr-pipe-arrow">→</span>
+              <div class="tr-pipe-model">V-JEPA 2</div>
+            </div>
+            <div class="tr-pipe-row">
+              <div class="tr-pipe-source"><span class="tr-pipe-icon">T</span> Caption</div>
+              <span class="tr-pipe-arrow">→</span>
+              <div class="tr-pipe-model">CLIP text</div>
+            </div>
+          </div>
+          <span class="tr-pipe-arrow tr-pipe-arrow-h">→</span>
+          <div class="tr-pipe-fuse">
+            <div class="tr-pipe-icon-lg">⚙</div>
+            <div class="tr-pipe-label">Voxelwise<br/>ridge</div>
+          </div>
+          <span class="tr-pipe-arrow tr-pipe-arrow-h">→</span>
+          <div class="tr-pipe-fuse">
+            <div class="tr-pipe-icon-lg">𓆑</div>
+            <div class="tr-pipe-label">Subject<br/>block</div>
+          </div>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+
+def segmented(
+    label: str,
+    options: list[str],
+    *,
+    default_index: int = 0,
+    key: str | None = None,
+) -> str:
+    """Pill-style segmented control. Returns the selected value.
+
+    Built on top of ``st.radio`` with custom CSS that hides the radio
+    dots and styles each option as a pill. The active option gets a
+    subtle background and white text; inactive options stay muted.
+    """
+    return st.radio(
+        label,
+        options,
+        index=default_index,
+        horizontal=True,
+        key=key,
+        label_visibility="collapsed",
+    )
+
+
+def demo_card_open(title: str = "Live encoder · sample stimulus") -> None:
+    """Open the rounded card that wraps the demo column. Pair with
+    :func:`demo_card_close`."""
+    st.markdown(
+        f"""
+        <div class="tr-demo-card">
+          <div class="tr-demo-header">
+            <span class="tr-demo-title">{title}</span>
+            <span class="tr-demo-cbar">
+              <span class="tr-demo-cbar-label">Low</span>
+              <span class="tr-demo-cbar-grad"></span>
+              <span class="tr-demo-cbar-label">High</span>
+              <div class="tr-demo-cbar-caption">Activity</div>
+            </span>
+          </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+
+def demo_card_close() -> None:
+    st.markdown("</div>", unsafe_allow_html=True)
+
+
+def tr_footer(
+    title: str = "CortexLab",
+    tagline: str = "Multimodal fMRI brain encoding · open source",
+) -> None:
+    """Render a polished four-column footer.
+
+    Mirrors Meta-style research-page footers: a brand block on the
+    left, three columns of grouped links, and a thin bottom rule with
+    legal / build credits. All color-mode aware via the theme variables.
+    """
+    columns = [
+        (
+            "Product",
+            [
+                ("Live demo",   "https://huggingface.co/spaces/SID2000/cortexlab-dashboard"),
+                ("Toolkit",     "https://github.com/siddhant-rajhans/cortexlab"),
+                ("Dashboard",   "https://github.com/siddhant-rajhans/cortexlab-dashboard"),
+                ("Releases",    "https://github.com/siddhant-rajhans/cortexlab/releases"),
+            ],
+        ),
+        (
+            "Research",
+            [
+                ("Paper",        "https://github.com/siddhant-rajhans/cortexlab"),
+                ("BOLD Moments", "https://www.nature.com/articles/s41467-024-50310-3"),
+                ("HCP-MMP 1.0",  "https://www.nature.com/articles/nature18933"),
+                ("CLIP",         "https://arxiv.org/abs/2103.00020"),
+            ],
+        ),
+        (
+            "Resources",
+            [
+                ("HuggingFace",  "https://huggingface.co/SID2000/cortexlab"),
+                ("API docs",     "https://github.com/siddhant-rajhans/cortexlab#readme"),
+                ("Changelog",    "https://github.com/siddhant-rajhans/cortexlab/commits/master"),
+                ("Issues",       "https://github.com/siddhant-rajhans/cortexlab/issues"),
+            ],
+        ),
+    ]
+    cols_html = ""
+    for label, links in columns:
+        items = "".join(
+            f'<li><a class="tr-foot-link" href="{href}" target="_blank">{name}</a></li>'
+            for name, href in links
+        )
+        cols_html += f"""
+        <div class="tr-foot-col">
+          <div class="tr-foot-col-title">{label}</div>
+          <ul class="tr-foot-list">{items}</ul>
+        </div>
+        """
+
+    st.markdown(
+        f"""
+        <div class="tr-foot">
+          <div class="tr-foot-grid">
+            <div class="tr-foot-brand">
+              <div class="tr-foot-brand-logo">
+                <span class="tr-foot-dot tr-foot-dot-a"></span>
+                <span class="tr-foot-dot tr-foot-dot-b"></span>
+                <span class="tr-foot-dot tr-foot-dot-c"></span>
+              </div>
+              <div class="tr-foot-brand-title">{title}</div>
+              <div class="tr-foot-brand-tagline">{tagline}</div>
+              <div class="tr-foot-built">
+                Built on <a href="https://github.com/facebookresearch/tribev2" target="_blank">Meta's TRIBE v2</a>
+              </div>
+            </div>
+            {cols_html}
+          </div>
+          <div class="tr-foot-rule"></div>
+          <div class="tr-foot-legal">
+            <span>© CortexLab Contributors · CC BY-NC 4.0</span>
+            <span class="tr-foot-legal-right">
+              <a href="https://github.com/siddhant-rajhans/cortexlab/blob/master/LICENSE" target="_blank">License</a>
+              <span>·</span>
+              <a href="https://github.com/siddhant-rajhans/cortexlab/blob/master/CODE_OF_CONDUCT.md" target="_blank">Conduct</a>
+              <span>·</span>
+              <a href="https://github.com/siddhant-rajhans/cortexlab" target="_blank">Source</a>
+            </span>
+          </div>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+
+__all__ = [
+    "top_header",
+    "architecture_steps",
+    "pipeline_diagram",
+    "segmented",
+    "demo_card_open",
+    "demo_card_close",
+    "tr_footer",
+]