Add examples _ CSS

frontend/src/App.css

@@ -713,6 +713,7 @@
     opacity: 0;
     transform: translateY(16px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -720,10 +721,12 @@
 }
 
 @keyframes pulseLive {
+
   0%,
   100% {
     box-shadow: 0 0 0 0 rgba(196, 88, 88, 0.42);
   }
+
   60% {
     box-shadow: 0 0 0 8px rgba(196, 88, 88, 0);
   }
@@ -734,6 +737,7 @@
     opacity: 0;
     transform: translateY(10px);
   }
+
   100% {
     opacity: 1;
     transform: translateY(0);
@@ -745,6 +749,7 @@
     background-position: 0% 50%;
     filter: hue-rotate(0deg);
   }
+
   100% {
     background-position: 220% 50%;
     filter: hue-rotate(360deg);
@@ -798,6 +803,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+
   .rise,
   .live-dot {
     animation: none;
@@ -819,6 +825,68 @@
   }
 }
 
+/* ── ML Models row ── */
+.ml-models-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 0.7rem;
+  margin-bottom: 1.6rem;
+}
+
+.ml-models-label {
+  font-size: 0.82rem;
+  color: var(--text-muted);
+}
+
+.ml-model-badge {
+  border: 1px solid var(--line-soft);
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: 999px;
+  padding: 0.35rem 0.8rem;
+  font-size: 0.82rem;
+  color: var(--text-muted);
+}
+
+/* ── Example IDs row ── */
+.example-ids-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 0.7rem;
+  margin-top: 1rem;
+}
+
+.example-ids-label {
+  font-size: 0.82rem;
+  color: var(--text-muted);
+}
+
+.example-id-chip {
+  border: 1px solid var(--line-soft);
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: 999px;
+  padding: 0.35rem 0.8rem;
+  font-size: 0.82rem;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
+}
+
+.example-id-chip:hover {
+  border-color: var(--line-strong);
+  color: var(--text-strong);
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.example-id-chip.active {
+  border-color: var(--accent-primary);
+  color: var(--accent-primary);
+  background: rgba(198, 167, 105, 0.07);
+}
+
 .riot-disclaimer {
   text-align: center;
   padding: 12px 24px;