Explain each tutorial mode before the simulator details take over (#214)

The How-it-works page now opens with a mode guide, progress framing, and teaching cues so the product story is readable before the viewer starts parsing the fake terminal panels. The underlying simulator flow stays intact; this only changes how the demo is taught.\n\nConstraint: keep the existing walkthrough flow and mode switching behavior intact\nRejected: add a separate docs page for the tutorial narrative | breaks the product-demo feel of the existing page\nConfidence: medium\nScope-risk: narrow\nDirective: keep future tutorial polish inside the existing walkthrough shell unless the whole onboarding story is being redesigned\nTested: git diff --check\nNot-tested: frontend runtime build or visual QA

Co-authored-by: NagyVikt <nagy.viktordp@gmail.com>

Author: NagyVikt

frontend/app/globals.css

@@ -503,10 +503,192 @@ button {
   min-height: 0;
 }
 
+.tutorial-brief {
+  margin: 58px 18px 0;
+  padding: 18px;
+  border-radius: 22px;
+  border: 1px solid rgba(148, 172, 208, 0.14);
+  background:
+    radial-gradient(circle at top right, rgba(122, 162, 255, 0.12), transparent 28%),
+    linear-gradient(180deg, rgba(18, 27, 40, 0.98), rgba(12, 18, 28, 0.96));
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.04),
+    0 24px 42px rgba(0, 0, 0, 0.22);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  flex-shrink: 0;
+}
+
+.tutorial-brief-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.tutorial-copy {
+  min-width: 0;
+}
+
+.tutorial-kicker {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  color: rgba(165, 177, 197, 0.78);
+  margin-bottom: 8px;
+}
+
+.tutorial-title {
+  margin: 0;
+  font-size: 28px;
+  line-height: 1.05;
+  letter-spacing: -0.035em;
+  max-width: 16ch;
+}
+
+.tutorial-mode-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 12px;
+  border-radius: 999px;
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  border: 1px solid rgba(148, 172, 208, 0.14);
+  background: rgba(11, 17, 25, 0.76);
+  color: var(--text);
+  white-space: nowrap;
+}
+
+.tutorial-mode-pill.execute {
+  border-color: rgba(61, 220, 151, 0.34);
+  background: rgba(61, 220, 151, 0.12);
+  color: #98efbe;
+}
+
+.tutorial-mode-pill.plan {
+  border-color: rgba(200, 130, 255, 0.34);
+  background: rgba(200, 130, 255, 0.12);
+  color: #e1b4ff;
+}
+
+.tutorial-mode-pill.merge {
+  border-color: rgba(245, 181, 68, 0.36);
+  background: rgba(245, 181, 68, 0.12);
+  color: #ffd991;
+}
+
+.tutorial-mode-pill.installation {
+  border-color: rgba(122, 162, 255, 0.34);
+  background: rgba(122, 162, 255, 0.12);
+  color: #c6d9ff;
+}
+
+.tutorial-summary {
+  margin: 0;
+  color: var(--text-dim);
+  font-size: 12.25px;
+  line-height: 1.65;
+  max-width: 68ch;
+}
+
+.tutorial-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.tutorial-progress-copy {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.tutorial-progress-track,
+.ctrl-progress-track {
+  position: relative;
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.07);
+}
+
+.tutorial-progress-track {
+  height: 7px;
+}
+
+.tutorial-progress-track span,
+.ctrl-progress-track span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #3DDC97 0%, #83F0BD 55%, #7AA2FF 100%);
+}
+
+.tutorial-meta-grid,
+.tutorial-highlights,
+.ctrl-guide-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 10px;
+}
+
+.tutorial-stat,
+.tutorial-highlight,
+.guide-card {
+  border-radius: 16px;
+  border: 1px solid rgba(148, 172, 208, 0.12);
+  background: rgba(11, 17, 25, 0.56);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+.tutorial-stat {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.tutorial-stat-label,
+.guide-eyebrow {
+  font-family: var(--font-mono);
+  font-size: 9.75px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.tutorial-stat-value {
+  font-size: 18px;
+  line-height: 1;
+  letter-spacing: -0.03em;
+}
+
+.tutorial-stat-meta {
+  color: var(--text-dim);
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.tutorial-highlight {
+  padding: 12px;
+  color: var(--text);
+  font-size: 11.5px;
+  line-height: 1.55;
+}
+
 .chat-scroll {
   flex: 1;
   overflow-y: auto;
-  padding: 58px 28px 22px;
+  padding: 18px 28px 22px;
   display: flex;
   flex-direction: column;
   gap: 16px;
@@ -759,18 +941,27 @@ button {
     linear-gradient(180deg, rgba(13, 18, 27, 0.96), rgba(9, 14, 21, 0.98));
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 14px;
   flex-shrink: 0;
   backdrop-filter: blur(16px);
 }
 
 .ctrl-top {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
+  gap: 14px;
   font-size: 12px;
 }
 
+.ctrl-stage {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
 .ctrl-step-label {
   font-weight: 600;
   color: var(--text);
@@ -782,9 +973,31 @@ button {
   margin-right: 8px;
 }
 
+.ctrl-progress {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.ctrl-progress-copy {
+  font-family: var(--font-mono);
+  font-size: 9.75px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.ctrl-progress-track {
+  flex: 1;
+  min-width: 120px;
+  height: 6px;
+}
+
 .dots {
   display: flex;
   gap: 5px;
+  padding-top: 4px;
 }
 
 .dots .d {
@@ -811,10 +1024,48 @@ button {
   font-size: 12px;
   color: var(--text-dim);
   line-height: 1.5;
-  min-height: 36px;
+  min-height: 0;
   max-width: 68ch;
 }
 
+.guide-card {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.guide-card-watch {
+  background:
+    linear-gradient(180deg, rgba(18, 27, 40, 0.92), rgba(11, 17, 25, 0.84));
+}
+
+.guide-card p {
+  margin: 0;
+  color: var(--text-dim);
+  font-size: 11.5px;
+  line-height: 1.55;
+}
+
+.guide-token-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.guide-token {
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  border: 1px solid rgba(148, 172, 208, 0.14);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text);
+  font-size: 11px;
+  line-height: 1.45;
+}
+
 .ctrl-btns {
   display: flex;
   gap: 8px;
@@ -1600,6 +1851,10 @@ button {
   .pane.right {
     border-right: 1px solid var(--border);
   }
+
+  .tutorial-title {
+    max-width: none;
+  }
 }
 
 @media (max-width: 760px) {
@@ -1638,14 +1893,38 @@ button {
     grid-template-columns: 40px 220px 1fr;
   }
 
+  .tutorial-brief {
+    margin: 52px 12px 0;
+    padding: 14px;
+  }
+
+  .tutorial-brief-head {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .tutorial-title {
+    font-size: 22px;
+  }
+
   .chat-scroll {
-    padding: 48px 14px 14px;
+    padding: 14px;
   }
 
   .controls {
     padding: 14px;
   }
 
+  .ctrl-top,
+  .ctrl-progress {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .ctrl-progress-copy {
+    white-space: normal;
+  }
+
   .ctrl-btns {
     flex-direction: column;
   }