now we work in ✨style ✨

src/physcom_web/app.py

@@ -117,8 +117,19 @@ def create_app() -> Flask:
 
     @app.route("/")
     def index():
-        from flask import redirect, url_for
-        return redirect(url_for("entities.entity_list"))
+        from flask import render_template
+        repo = get_repo()
+        entities = repo.list_entities()
+        dims = {e.dimension for e in entities}
+        domains = repo.list_domains()
+        status_counts = repo.count_combinations_by_status()
+        stats = {
+            "entities": len(entities),
+            "dimensions": len(dims),
+            "domains": len(domains),
+            "combinations": sum(status_counts.values()),
+        }
+        return render_template("home.html", stats=stats)
 
     return app
 

src/physcom_web/static/logo.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
+  <!-- Outer ring — orbit/combination space -->
+  <circle cx="20" cy="20" r="17" fill="none" stroke="#7c9aad" stroke-width="1.2" opacity="0.5"/>
+  <circle cx="20" cy="20" r="12" fill="none" stroke="#7c9aad" stroke-width="0.6" opacity="0.3"/>
+
+  <!-- Three nodes — entities in combination -->
+  <circle cx="20" cy="8" r="3" fill="#c9a84c"/>
+  <circle cx="10" cy="27" r="3" fill="#6b9fbd"/>
+  <circle cx="30" cy="27" r="3" fill="#8fb89a"/>
+
+  <!-- Connecting edges — combinatorial links -->
+  <line x1="20" y1="8" x2="10" y2="27" stroke="#c9a84c" stroke-width="0.8" opacity="0.6"/>
+  <line x1="20" y1="8" x2="30" y2="27" stroke="#c9a84c" stroke-width="0.8" opacity="0.6"/>
+  <line x1="10" y1="27" x2="30" y2="27" stroke="#6b9fbd" stroke-width="0.8" opacity="0.6"/>
+
+  <!-- Center node — composite -->
+  <circle cx="20" cy="20.5" r="2" fill="#e0d5c1" opacity="0.7"/>
+</svg>

src/physcom_web/static/style.css

@@ -1,32 +1,123 @@
-/* ── Reset & Base ─────────────────────────────────────────── */
+/* ══════════════════════════════════════════════════════════
+   PhysCom — Dark Mathematical Serenity Theme
+   ══════════════════════════════════════════════════════════ */
+
+/* ── Custom Properties ──────────────────────────────────── */
+:root {
+  --bg-deep:       #0d1117;
+  --bg-surface:    #161b22;
+  --bg-card:       #1c2128;
+  --bg-elevated:   #252c35;
+  --border:        #2a3140;
+  --border-subtle: #222833;
+
+  --text-primary:  #d4dae3;
+  --text-secondary:#8b95a5;
+  --text-muted:    #5c6575;
+  --text-faint:    #3d4555;
+
+  --accent-gold:   #c9a84c;
+  --accent-blue:   #6b9fbd;
+  --accent-teal:   #6ba3a0;
+  --accent-green:  #7aab8a;
+  --accent-red:    #b85c5c;
+  --accent-amber:  #b8935c;
+  --accent-violet: #9b8ec4;
+
+  --font-body:     'Inter', system-ui, -apple-system, sans-serif;
+  --font-mono:     'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+  --font-display:  'Cormorant Garamond', 'Garamond', 'Georgia', serif;
+
+  --radius:        6px;
+  --radius-lg:     10px;
+}
+
+/* ── Reset & Base ───────────────────────────────────────── */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
 body {
-  font-family: system-ui, -apple-system, sans-serif;
-  line-height: 1.5;
-  color: #1a1a2e;
-  background: #f5f5f7;
+  font-family: var(--font-body);
+  line-height: 1.6;
+  color: var(--text-primary);
+  background: var(--bg-deep);
+  min-height: 100vh;
 }
 
-a { color: #2563eb; text-decoration: none; }
-a:hover { text-decoration: underline; }
+/* Subtle grid texture on body */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background-image:
+    linear-gradient(var(--border-subtle) 1px, transparent 1px),
+    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
+  background-size: 60px 60px;
+  opacity: 0.25;
+  pointer-events: none;
+  z-index: 0;
+}
+
+body > * { position: relative; z-index: 1; }
+
+a { color: var(--accent-blue); text-decoration: none; transition: color 0.2s; }
+a:hover { color: #8dbdd6; text-decoration: none; }
+
+::selection {
+  background: rgba(107, 159, 189, 0.3);
+  color: var(--text-primary);
+}
 
 /* ── Nav ─────────────────────────────────────────────────── */
 nav {
-  background: #1a1a2e;
-  color: #fff;
+  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
-  padding: 0.5rem 1.5rem;
+  padding: 0 1.5rem;
   gap: 2rem;
+  height: 52px;
+}
+
+.nav-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  color: var(--text-primary) !important;
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 1.2rem;
+  letter-spacing: 0.04em;
+  text-decoration: none !important;
+}
+.nav-brand img {
+  width: 28px;
+  height: 28px;
+  opacity: 0.9;
+}
+.nav-brand:hover { color: var(--accent-gold) !important; }
+.nav-brand:hover img { opacity: 1; }
+
+nav ul { list-style: none; display: flex; gap: 0.25rem; }
+nav a {
+  color: var(--text-secondary);
+  padding: 0.4rem 0.75rem;
+  border-radius: var(--radius);
+  font-size: 0.88rem;
+  font-weight: 500;
+  transition: color 0.2s, background 0.2s;
+}
+nav a:hover {
+  color: var(--text-primary);
+  background: var(--bg-elevated);
+  text-decoration: none;
 }
-nav .nav-brand { color: #fff; font-weight: 700; font-size: 1.1rem; }
-nav ul { list-style: none; display: flex; gap: 1.25rem; }
-nav a { color: #c4c4d4; }
-nav a:hover { color: #fff; text-decoration: none; }
 
 /* ── Main ────────────────────────────────────────────────── */
-main { max-width: 1100px; margin: 1.5rem auto; padding: 0 1rem; }
+main {
+  max-width: 1100px;
+  margin: 1.5rem auto;
+  padding: 0 1.25rem;
+}
 
 /* ── Page header ─────────────────────────────────────────── */
 .page-header {
@@ -36,18 +127,34 @@ main { max-width: 1100px; margin: 1.5rem auto; padding: 0 1rem; }
   margin-bottom: 1rem;
 }
 
-h1 { font-size: 1.5rem; margin-bottom: 0.75rem; }
-h2 { font-size: 1.2rem; margin: 1rem 0 0.5rem; }
-h3 { font-size: 1rem; margin-bottom: 0.25rem; }
-.subtitle { font-weight: 400; color: #666; font-size: 0.9rem; }
+h1 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 0.75rem;
+}
+h2 {
+  font-size: 1.15rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 1.25rem 0 0.5rem;
+}
+h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+  color: var(--text-primary);
+}
+.subtitle { font-weight: 400; color: var(--text-secondary); font-size: 0.9rem; }
 
 /* ── Cards ───────────────────────────────────────────────── */
 .card {
-  background: #fff;
-  border: 1px solid #e2e2e8;
-  border-radius: 8px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
   padding: 1rem 1.25rem;
   margin-bottom: 1rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 }
 .card-grid {
   display: grid;
@@ -57,75 +164,180 @@ h3 { font-size: 1rem; margin-bottom: 0.25rem; }
 .card-grid > * { min-width: 0; overflow-x: auto; }
 
 /* ── Tables ──────────────────────────────────────────────── */
-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
-th, td { padding: 0.4rem 0.6rem; text-align: left; border-bottom: 1px solid #eee; }
-th { font-weight: 600; color: #555; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
-table.compact th, table.compact td { padding: 0.25rem 0.4rem; font-size: 0.85rem; }
+table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
+th, td {
+  padding: 0.5rem 0.6rem;
+  text-align: left;
+  border-bottom: 1px solid var(--border-subtle);
+}
+th {
+  font-weight: 600;
+  color: var(--text-muted);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+tr:hover td { background: rgba(107, 159, 189, 0.04); }
+table.compact th, table.compact td { padding: 0.25rem 0.4rem; font-size: 0.83rem; }
 
 /* ── Score cells ─────────────────────────────────────────── */
-.score-cell { font-family: monospace; font-weight: 600; }
+.score-cell {
+  font-family: var(--font-mono);
+  font-weight: 500;
+  font-size: 0.85rem;
+  color: var(--accent-gold);
+}
 
 /* ── Badges ──────────────────────────────────────────────── */
 .badge {
   display: inline-block;
-  padding: 0.15rem 0.5rem;
+  padding: 0.15rem 0.55rem;
   border-radius: 4px;
-  font-size: 0.75rem;
+  font-size: 0.72rem;
   font-weight: 600;
-  background: #e2e2e8;
-  color: #333;
+  letter-spacing: 0.03em;
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
 }
-.badge-requires { background: #dbeafe; color: #1e40af; }
-.badge-provides { background: #dcfce7; color: #166534; }
-.badge-range_min, .badge-range_max { background: #fef3c7; color: #92400e; }
-.badge-excludes { background: #fee2e2; color: #991b1b; }
-.badge-valid { background: #dcfce7; color: #166534; }
-.badge-p1_fail { background: #fee2e2; color: #991b1b; }
-.badge-p2_fail { background: #fee2e2; color: #991b1b; }
-.badge-p3_fail { background: #fee2e2; color: #991b1b; }
-.badge-p4_fail { background: #fee2e2; color: #991b1b; }
-.badge-scored { background: #dbeafe; color: #1e40af; }
-.badge-llm_reviewed { background: #e0f2fe; color: #0369a1; }
-.badge-reviewed { background: #f3e8ff; color: #6b21a8; }
-.badge-pending { background: #fef3c7; color: #92400e; }
+.badge-requires  { background: rgba(107,159,189,0.12); color: var(--accent-blue);   border-color: rgba(107,159,189,0.25); }
+.badge-provides  { background: rgba(122,171,138,0.12); color: var(--accent-green);  border-color: rgba(122,171,138,0.25); }
+.badge-range_min,
+.badge-range_max { background: rgba(184,147,92,0.12);  color: var(--accent-amber);  border-color: rgba(184,147,92,0.25); }
+.badge-excludes  { background: rgba(184,92,92,0.12);   color: var(--accent-red);    border-color: rgba(184,92,92,0.25); }
+.badge-valid     { background: rgba(122,171,138,0.12); color: var(--accent-green);  border-color: rgba(122,171,138,0.25); }
+.badge-p1_fail,
+.badge-p2_fail,
+.badge-p3_fail,
+.badge-p4_fail   { background: rgba(184,92,92,0.12);   color: var(--accent-red);    border-color: rgba(184,92,92,0.25); }
+.badge-scored    { background: rgba(107,159,189,0.12); color: var(--accent-blue);   border-color: rgba(107,159,189,0.25); }
+.badge-llm_reviewed { background: rgba(107,163,160,0.12); color: var(--accent-teal); border-color: rgba(107,163,160,0.25); }
+.badge-reviewed  { background: rgba(155,142,196,0.12); color: var(--accent-violet); border-color: rgba(155,142,196,0.25); }
+.badge-pending   { background: rgba(184,147,92,0.12);  color: var(--accent-amber);  border-color: rgba(184,147,92,0.25); }
 
 /* ── Buttons ─────────────────────────────────────────────── */
 .btn {
   display: inline-block;
   padding: 0.4rem 0.85rem;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-  background: #fff;
-  color: #374151;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-elevated);
+  color: var(--text-primary);
   font-size: 0.85rem;
   cursor: pointer;
   text-decoration: none;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
 }
-.btn:hover { background: #f3f4f6; text-decoration: none; }
-.btn-primary { background: #2563eb; color: #fff; border-color: #2563eb; }
-.btn-primary:hover { background: #1d4ed8; }
-.btn-danger { background: #dc2626; color: #fff; border-color: #dc2626; }
-.btn-danger:hover { background: #b91c1c; }
-.btn-sm { padding: 0.2rem 0.5rem; font-size: 0.8rem; }
+.btn:hover {
+  background: var(--bg-card);
+  border-color: var(--text-muted);
+  text-decoration: none;
+}
+.btn-primary {
+  background: rgba(107,159,189,0.15);
+  color: var(--accent-blue);
+  border-color: rgba(107,159,189,0.35);
+}
+.btn-primary:hover {
+  background: rgba(107,159,189,0.25);
+  border-color: rgba(107,159,189,0.5);
+}
+.btn-danger {
+  background: rgba(184,92,92,0.12);
+  color: var(--accent-red);
+  border-color: rgba(184,92,92,0.3);
+}
+.btn-danger:hover {
+  background: rgba(184,92,92,0.22);
+  border-color: rgba(184,92,92,0.5);
+}
+.btn-sm { padding: 0.2rem 0.55rem; font-size: 0.8rem; }
 
 /* ── Forms ───────────────────────────────────────────────── */
 .form-group { margin-bottom: 0.75rem; }
-.form-group label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.25rem; }
-.form-group input, .form-group select, .form-group textarea {
+.form-group label {
+  display: block;
+  font-weight: 600;
+  font-size: 0.85rem;
+  margin-bottom: 0.25rem;
+  color: var(--text-primary);
+}
+.form-group input,
+.form-group select,
+.form-group textarea {
   width: 100%;
-  padding: 0.4rem 0.6rem;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
+  padding: 0.45rem 0.65rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
   font-size: 0.9rem;
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  transition: border-color 0.2s;
+}
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--accent-blue);
+  box-shadow: 0 0 0 2px rgba(107,159,189,0.15);
 }
 .form-actions { margin-top: 1rem; display: flex; gap: 0.5rem; }
 .form-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
 .form-row input, .form-row select { width: auto; flex: 1; min-width: 80px; }
 
-fieldset { border: 1px solid #e2e2e8; border-radius: 6px; padding: 0.75rem; margin-bottom: 0.75rem; }
-legend { font-weight: 600; font-size: 0.85rem; padding: 0 0.3rem; }
+fieldset {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+legend {
+  font-weight: 600;
+  font-size: 0.85rem;
+  padding: 0 0.3rem;
+  color: var(--text-primary);
+}
 .checkbox-row { display: flex; gap: 1rem; flex-wrap: wrap; }
-.checkbox-row label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.9rem; }
+.checkbox-row label {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 0.9rem;
+  color: var(--text-primary);
+}
+
+/* Custom checkbox styling */
+input[type="checkbox"] {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--text-muted);
+  border-radius: 3px;
+  background: var(--bg-surface);
+  cursor: pointer;
+  flex-shrink: 0;
+  position: relative;
+  transition: background 0.15s, border-color 0.15s;
+}
+input[type="checkbox"]:checked {
+  background: var(--accent-blue);
+  border-color: var(--accent-blue);
+}
+input[type="checkbox"]:checked::after {
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  width: 5px;
+  height: 9px;
+  border: solid var(--bg-deep);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+input[type="checkbox"]:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(107,159,189,0.2);
+}
 
 /* ── Inline form (for delete buttons) ────────────────────── */
 .inline-form { display: inline; }
@@ -134,25 +346,31 @@ legend { font-weight: 600; font-size: 0.85rem; padding: 0 0.3rem; }
 .flash-container { margin-bottom: 1rem; }
 .flash {
   padding: 0.6rem 1rem;
-  border-radius: 6px;
+  border-radius: var(--radius);
   margin-bottom: 0.5rem;
   font-size: 0.9rem;
+  border: 1px solid;
 }
-.flash-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
-.flash-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
-.flash-info { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
+.flash-success { background: rgba(122,171,138,0.1); color: var(--accent-green); border-color: rgba(122,171,138,0.25); }
+.flash-error   { background: rgba(184,92,92,0.1);   color: var(--accent-red);   border-color: rgba(184,92,92,0.25); }
+.flash-info    { background: rgba(107,159,189,0.1); color: var(--accent-blue);  border-color: rgba(107,159,189,0.25); }
 
 /* ── Filter row ──────────────────────────────────────────── */
 .filter-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
-.filter-row span { font-weight: 600; font-size: 0.85rem; color: #555; }
+.filter-row span { font-weight: 600; font-size: 0.85rem; color: var(--text-muted); }
 
 /* ── DL styling ──────────────────────────────────────────── */
-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; }
-dt { font-weight: 600; font-size: 0.85rem; color: #555; }
-dd { font-size: 0.9rem; }
+dl { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; }
+dt { font-weight: 600; font-size: 0.83rem; color: var(--text-muted); }
+dd { font-size: 0.9rem; color: var(--text-primary); }
 
 /* ── Empty state ─────────────────────────────────────────── */
-.empty { color: #666; padding: 2rem 0; text-align: center; }
+.empty {
+  color: var(--text-muted);
+  padding: 2.5rem 0;
+  text-align: center;
+  font-style: italic;
+}
 
 /* ── Actions column ──────────────────────────────────────── */
 .actions { white-space: nowrap; display: flex; gap: 0.25rem; }
@@ -161,38 +379,45 @@ dd { font-size: 0.9rem; }
 .dep-add-form { margin-top: 0.75rem; }
 
 /* ── Form hints ──────────────────────────────────────────── */
-.form-hint { color: #666; font-size: 0.8rem; margin-bottom: 0.25rem; font-weight: 400; }
+.form-hint { color: var(--text-muted); font-size: 0.8rem; margin-bottom: 0.25rem; font-weight: 400; }
 
 /* ── Vertical checkbox list ──────────────────────────────── */
-.checkbox-col { display: flex; flex-direction: column; gap: 0.5rem; }
-.checkbox-col label { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.9rem; }
+.checkbox-col { display: flex; flex-direction: column; gap: 0.6rem; }
+.checkbox-col label {
+  display: flex;
+  align-items: baseline;
+  gap: 0.4rem;
+  font-size: 0.9rem;
+  color: var(--text-primary);
+}
 .checkbox-col label .form-hint { display: block; margin-left: 1.3rem; }
 
 /* ── Summary DL (pipeline) ───────────────────────────────── */
 .summary-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 1rem; }
 
-/* ── Pipeline run status ────────────────────────────────── */
-.badge-running { background: #dbeafe; color: #1e40af; }
-.badge-completed { background: #dcfce7; color: #166534; }
-.badge-failed { background: #fee2e2; color: #991b1b; }
-.badge-cancelled { background: #fef3c7; color: #92400e; }
-.badge-rate_limited { background: #ffedd5; color: #9a3412; }
+/* ── Pipeline run status ──────────────────────────────────── */
+.badge-running      { background: rgba(107,159,189,0.12); color: var(--accent-blue);   border-color: rgba(107,159,189,0.25); }
+.badge-completed    { background: rgba(122,171,138,0.12); color: var(--accent-green);  border-color: rgba(122,171,138,0.25); }
+.badge-failed       { background: rgba(184,92,92,0.12);   color: var(--accent-red);    border-color: rgba(184,92,92,0.25); }
+.badge-cancelled    { background: rgba(184,147,92,0.12);  color: var(--accent-amber);  border-color: rgba(184,147,92,0.25); }
+.badge-rate_limited { background: rgba(184,147,92,0.12);  color: var(--accent-amber);  border-color: rgba(184,147,92,0.25); }
 
 .run-status { padding: 0.25rem 0; }
 .run-status-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
-.run-status-label { font-weight: 600; font-size: 0.9rem; }
+.run-status-label { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
 
 .progress-bar-container {
-  background: #e5e7eb;
+  background: var(--bg-elevated);
   border-radius: 4px;
   height: 8px;
   overflow: hidden;
   margin-bottom: 0.35rem;
+  border: 1px solid var(--border-subtle);
 }
 .progress-bar {
-  background: #2563eb;
+  background: linear-gradient(90deg, var(--accent-blue), var(--accent-teal));
   height: 100%;
-  border-radius: 4px;
+  border-radius: 3px;
   transition: width 0.3s ease;
 }
 
@@ -200,7 +425,7 @@ dd { font-size: 0.9rem; }
   display: flex;
   gap: 1rem;
   font-size: 0.8rem;
-  color: #555;
+  color: var(--text-muted);
   margin-bottom: 0.35rem;
 }
 
@@ -209,7 +434,7 @@ dd { font-size: 0.9rem; }
 /* ── Block reason ───────────────────────────────────────── */
 .block-reason-cell {
   font-size: 0.8rem;
-  color: #666;
+  color: var(--text-muted);
   max-width: 350px;
   word-break: break-word;
 }
@@ -219,18 +444,208 @@ dd { font-size: 0.9rem; }
   display: inline-block;
   width: 60px;
   height: 6px;
-  background: #e5e7eb;
+  background: var(--bg-elevated);
   border-radius: 3px;
   overflow: hidden;
   vertical-align: middle;
+  border: 1px solid var(--border-subtle);
 }
 .metric-bar {
   height: 100%;
-  background: #2563eb;
-  border-radius: 3px;
+  background: linear-gradient(90deg, var(--accent-blue), var(--accent-gold));
+  border-radius: 2px;
 }
 .metric-bar-label {
   font-size: 0.75rem;
-  color: #666;
+  color: var(--text-muted);
   margin-left: 0.3rem;
 }
+
+/* ── Select dropdown dark styling ────────────────────────── */
+select option {
+  background: var(--bg-surface);
+  color: var(--text-primary);
+}
+
+/* ── Scrollbar (WebKit) ──────────────────────────────────── */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: var(--bg-deep); }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+
+/* ══════════════════════════════════════════════════════════
+   Homepage
+   ══════════════════════════════════════════════════════════ */
+
+/* ── Hero ────────────────────────────────────────────────── */
+.hero {
+  text-align: center;
+  padding: 3rem 1rem 2.5rem;
+}
+.hero-logo img {
+  width: 72px;
+  height: 72px;
+  margin-bottom: 1rem;
+  opacity: 0.85;
+}
+.hero-title {
+  font-family: var(--font-display);
+  font-size: 2rem;
+  font-weight: 500;
+  letter-spacing: 0.03em;
+  color: var(--text-primary);
+  margin-bottom: 0.6rem;
+}
+.hero-subtitle {
+  max-width: 600px;
+  margin: 0 auto 1.5rem;
+  font-size: 0.95rem;
+  line-height: 1.7;
+  color: var(--text-secondary);
+}
+.hero-actions {
+  display: flex;
+  justify-content: center;
+  gap: 0.75rem;
+}
+
+/* ── Section headings ────────────────────────────────────── */
+.section-heading {
+  font-size: 1.15rem;
+  font-weight: 600;
+  margin: 2rem 0 0.35rem;
+  color: var(--text-primary);
+  padding-bottom: 0.35rem;
+  border-bottom: 1px solid var(--border);
+}
+.section-desc {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  margin-bottom: 1.25rem;
+  max-width: 700px;
+}
+
+/* ── Pipeline steps ──────────────────────────────────────── */
+.pipeline-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin-bottom: 1.5rem;
+}
+.step-card {
+  display: flex;
+  gap: 1rem;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 1rem 1.25rem;
+}
+.step-number {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  font-weight: 600;
+  background: rgba(107,159,189,0.12);
+  color: var(--accent-blue);
+  border: 1px solid rgba(107,159,189,0.25);
+}
+.step-body h3 {
+  font-size: 0.95rem;
+  margin-bottom: 0.3rem;
+}
+.step-body p {
+  font-size: 0.87rem;
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+.step-example {
+  margin-top: 0.5rem;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  padding: 0.4rem 0.65rem;
+  background: var(--bg-surface);
+  border-radius: var(--radius);
+  border-left: 2px solid var(--border);
+}
+.step-example code {
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  color: var(--accent-gold);
+}
+.step-connector {
+  width: 1px;
+  height: 16px;
+  background: var(--border);
+  margin-left: 39px;
+}
+
+/* ── Concepts grid ───────────────────────────────────────── */
+.concepts-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+.concept-card p {
+  font-size: 0.87rem;
+  color: var(--text-secondary);
+  line-height: 1.6;
+  margin-bottom: 0.6rem;
+}
+.concept-card em { color: var(--text-primary); font-style: normal; font-weight: 500; }
+.concept-card code {
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  color: var(--accent-gold);
+  background: var(--bg-surface);
+  padding: 0.1rem 0.35rem;
+  border-radius: 3px;
+}
+.concept-examples {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  margin-bottom: 0.6rem;
+}
+.concept-link {
+  font-size: 0.83rem;
+  color: var(--accent-blue);
+}
+
+/* ── Stats row ───────────────────────────────────────────── */
+.stats-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+.stat-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 1rem;
+  text-align: center;
+}
+.stat-value {
+  font-family: var(--font-mono);
+  font-size: 1.6rem;
+  font-weight: 500;
+  color: var(--accent-gold);
+  line-height: 1.2;
+}
+.stat-label {
+  font-size: 0.78rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-top: 0.25rem;
+}
+
+/* ── Google Fonts import ─────────────────────────────────── */
+@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

src/physcom_web/templates/base.html

@@ -4,12 +4,16 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{% block title %}PhysCom{% endblock %}</title>
+  <link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='logo.svg') }}">
   <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
   <script src="https://unpkg.com/htmx.org@2.0.4"></script>
 </head>
 <body>
   <nav>
-    <a href="{{ url_for('entities.entity_list') }}" class="nav-brand">PhysCom</a>
+    <a href="{{ url_for('index') }}" class="nav-brand">
+      <img src="{{ url_for('static', filename='logo.svg') }}" alt="">
+      PhysCom
+    </a>
     <ul>
       <li><a href="{{ url_for('entities.entity_list') }}">Entities</a></li>
       <li><a href="{{ url_for('domains.domain_list') }}">Domains</a></li>

src/physcom_web/templates/home.html

@@ -0,0 +1,202 @@
+{% extends "base.html" %}
+{% block title %}PhysCom — Physical Combinatorics{% endblock %}
+
+{% block content %}
+<!-- Hero -->
+<div class="hero">
+  <div class="hero-logo">
+    <img src="{{ url_for('static', filename='logo.svg') }}" alt="">
+  </div>
+  <h1 class="hero-title">Physical Combinatorics</h1>
+  <p class="hero-subtitle">
+    An innovation discovery engine that explores the combinatorial space of
+    physical systems &mdash; generating, constraining, scoring, and ranking
+    entity combinations against real-world physics.
+  </p>
+  <div class="hero-actions">
+    <a href="{{ url_for('pipeline.pipeline_form') }}" class="btn btn-primary">Run Pipeline</a>
+    <a href="{{ url_for('results.results_index') }}" class="btn">View Results</a>
+  </div>
+</div>
+
+<!-- How It Works -->
+<h2 class="section-heading">How It Works</h2>
+<p class="section-desc">
+  PhysCom takes entities from different dimensions, forms their Cartesian product,
+  then filters and scores every combination through a 5-pass pipeline.
+</p>
+
+<div class="pipeline-steps">
+  <div class="step-card">
+    <div class="step-number">1</div>
+    <div class="step-body">
+      <h3>Constraint Resolution</h3>
+      <p>
+        Each entity declares physical dependencies &mdash; what it
+        <em>requires</em>, <em>provides</em>, or <em>excludes</em>.
+        Incompatible combinations are blocked before any estimation begins.
+      </p>
+      <div class="step-example">
+        Spaceship requires <code>vacuum_or_thin</code> atmosphere &mdash;
+        Human Pedalling requires <code>none</code> fuel infrastructure
+      </div>
+    </div>
+  </div>
+
+  <div class="step-connector"></div>
+
+  <div class="step-card">
+    <div class="step-number">2</div>
+    <div class="step-body">
+      <h3>Physics Estimation</h3>
+      <p>
+        Surviving combinations get raw metric estimates &mdash; speed, cost,
+        safety, range &mdash; via heuristic stubs or an LLM provider that
+        reasons about the physical properties of each pairing.
+      </p>
+      <div class="step-example">
+        Bicycle + Human Pedalling &rarr; speed: 20 km/h, cost: $0.01/km
+      </div>
+    </div>
+  </div>
+
+  <div class="step-connector"></div>
+
+  <div class="step-card">
+    <div class="step-number">3</div>
+    <div class="step-body">
+      <h3>Scoring &amp; Ranking</h3>
+      <p>
+        Raw estimates are log-normalized against domain-specific bounds,
+        then combined into a single composite score via weighted geometric mean.
+        Combinations are ranked within their domain.
+      </p>
+      <div class="step-example">
+        Domain <code>urban_commuting</code> weights: speed 25%, cost 25%,
+        safety 25%, availability 15%, range 10%
+      </div>
+    </div>
+  </div>
+
+  <div class="step-connector"></div>
+
+  <div class="step-card">
+    <div class="step-number">4</div>
+    <div class="step-body">
+      <h3>LLM Review</h3>
+      <p>
+        Top-scoring combinations are sent to a language model for plausibility
+        and novelty assessment &mdash; catching physically valid but practically
+        absurd pairings.
+      </p>
+      <div class="step-example">
+        "Train + Solar Sail: structurally valid constraints, but solar radiation
+        pressure cannot overcome rail friction at ground level."
+      </div>
+    </div>
+  </div>
+
+  <div class="step-connector"></div>
+
+  <div class="step-card">
+    <div class="step-number">5</div>
+    <div class="step-body">
+      <h3>Human Review</h3>
+      <p>
+        The final pass surfaces results for expert evaluation. Reviewers can
+        approve, flag, or annotate each combination with domain knowledge that
+        no model captures.
+      </p>
+    </div>
+  </div>
+</div>
+
+<!-- Concepts -->
+<h2 class="section-heading">Core Concepts</h2>
+<div class="concepts-grid">
+  <div class="card concept-card">
+    <h3>Entities</h3>
+    <p>
+      The building blocks. Each entity belongs to a <em>dimension</em>
+      (e.g. platform, power_source) and carries typed dependencies
+      that define its physical properties and constraints.
+    </p>
+    <div class="concept-examples">
+      <span class="badge badge-provides">Car</span>
+      <span class="badge badge-requires">Lithium Ion Battery</span>
+      <span class="badge badge-excludes">Solar Sail</span>
+      <span class="badge badge-provides">Teleporter</span>
+    </div>
+    <a href="{{ url_for('entities.entity_list') }}" class="concept-link">Browse entities &rarr;</a>
+  </div>
+
+  <div class="card concept-card">
+    <h3>Domains</h3>
+    <p>
+      The evaluation lens. A domain defines which metrics matter
+      and their normalization bounds &mdash; the same combination scores
+      differently under "urban commuting" vs "interplanetary travel."
+    </p>
+    <div class="concept-examples">
+      <span class="badge badge-scored">urban_commuting</span>
+      <span class="badge badge-llm_reviewed">interplanetary_travel</span>
+    </div>
+    <a href="{{ url_for('domains.domain_list') }}" class="concept-link">Browse domains &rarr;</a>
+  </div>
+
+  <div class="card concept-card">
+    <h3>Dependencies</h3>
+    <p>
+      The physics layer. Typed key-value constraints
+      (<code>requires</code>, <code>provides</code>, <code>excludes</code>,
+      <code>range_min</code>, <code>range_max</code>) that gate which
+      combinations are physically possible.
+    </p>
+    <div class="concept-examples">
+      <span class="badge badge-requires">requires</span>
+      <span class="badge badge-provides">provides</span>
+      <span class="badge badge-excludes">excludes</span>
+      <span class="badge badge-range_min">range</span>
+    </div>
+  </div>
+
+  <div class="card concept-card">
+    <h3>Metrics</h3>
+    <p>
+      Quantitative axes like speed, cost, safety, and range. Each metric
+      has a domain-specific weight and normalization range. Some are
+      inverted &mdash; lower cost is better.
+    </p>
+    <div class="concept-examples">
+      <span class="badge">speed</span>
+      <span class="badge">cost_efficiency</span>
+      <span class="badge">safety</span>
+      <span class="badge">range_fuel</span>
+    </div>
+  </div>
+</div>
+
+<!-- Quick Stats -->
+{% if stats %}
+<h2 class="section-heading">Current Data</h2>
+<div class="stats-row">
+  <div class="stat-card">
+    <div class="stat-value">{{ stats.entities }}</div>
+    <div class="stat-label">Entities</div>
+  </div>
+  <div class="stat-card">
+    <div class="stat-value">{{ stats.dimensions }}</div>
+    <div class="stat-label">Dimensions</div>
+  </div>
+  <div class="stat-card">
+    <div class="stat-value">{{ stats.domains }}</div>
+    <div class="stat-label">Domains</div>
+  </div>
+  <div class="stat-card">
+    <div class="stat-value">{{ stats.combinations }}</div>
+    <div class="stat-label">Combinations</div>
+  </div>
+</div>
+{% endif %}
+
+{% endblock %}