Refine clip editor flow

frontend/src/styles.css

@@ -174,28 +174,29 @@ select {
   padding: 1.25rem;
 }
 
-.walkup-stepper {
-  display: flex;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
-.walkup-step {
-  padding: 0.4rem 0.7rem;
-  border-radius: 999px;
-  background: rgba(19, 34, 56, 0.08);
+.walkup-step-breadcrumb {
+  --bs-breadcrumb-divider: "›";
+  align-items: center;
   color: var(--muted);
-  font-size: 0.85rem;
+  margin-bottom: 0;
 }
 
-.walkup-step.is-active {
+.walkup-step-breadcrumb .breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.walkup-step-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
+  color: var(--muted);
+}
+
+.walkup-step-breadcrumb .breadcrumb-item.active {
+  padding: 0.32rem 0.65rem;
+  border-radius: 999px;
   background: var(--accent-soft);
   color: var(--ink);
-}
-
-.walkup-step.is-complete {
-  background: rgba(47, 158, 68, 0.14);
-  color: #25643b;
+  font-weight: 600;
 }
 
 .walkup-modal-actions {