Refine live snapshot cards

ui/assets/styles.css

@@ -293,7 +293,18 @@ main {
 }
 
 .hero-panel .stat-card {
+  display: grid;
+  align-content: space-between;
   min-height: 142px;
+  min-width: 0;
+  overflow: hidden;
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 247, 241, 0.84));
+}
+
+.hero-panel .stat-card-text {
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(238, 250, 247, 0.9));
 }
 
 .feature-strip {
@@ -389,6 +400,29 @@ main {
   line-height: 1;
 }
 
+.hero-panel .stat-value {
+  white-space: nowrap;
+}
+
+.hero-panel .stat-value-text {
+  font-size: clamp(1.55rem, 2.8vw, 2.35rem);
+  letter-spacing: -0.04em;
+}
+
+.stat-note {
+  display: inline-flex;
+  width: fit-content;
+  margin-top: 14px;
+  padding: 7px 10px;
+  border-radius: 999px;
+  background: rgba(19, 35, 44, 0.06);
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
 .feature-card {
   min-height: 220px;
 }

ui/index.html

@@ -48,13 +48,15 @@
               <span class="stat-label">Task Families</span>
               <strong class="stat-value" data-task-count>--</strong>
             </article>
-            <article class="stat-card">
+            <article class="stat-card stat-card-text">
               <span class="stat-label">API Mode</span>
-              <strong class="stat-value">FastAPI</strong>
+              <strong class="stat-value stat-value-text">FastAPI</strong>
+              <span class="stat-note">HTTP API</span>
             </article>
-            <article class="stat-card">
+            <article class="stat-card stat-card-text">
               <span class="stat-label">Episode Shape</span>
-              <strong class="stat-value">Single Step</strong>
+              <strong class="stat-value stat-value-text">1 Step</strong>
+              <span class="stat-note">reset -> step</span>
             </article>
           </div>
         </div>