fix: style step 2 as a matching install bar with agent label

Author: ericallam

docs/src/app/home.css

@@ -75,14 +75,17 @@
 
 /* INSTALL */
 .hp-install-section { padding: 32px 0 64px; }
-.hp-install-steps { display: flex; flex-direction: column; gap: 12px; max-width: 520px; margin: 0 auto; }
+.hp-install-steps { display: flex; flex-direction: column; gap: 12px; max-width: 600px; margin: 0 auto; }
 .hp-install-step { display: flex; align-items: center; gap: 12px; }
 .hp-install-step-num { font-family: var(--hp-mono); font-size: 12px; color: var(--hp-accent); width: 20px; text-align: center; flex-shrink: 0; }
 .hp-install-step-text { font-family: var(--hp-mono); font-size: 14px; color: var(--hp-text-dim); padding: 14px 0; }
 .hp-install-bar { display: flex; align-items: center; background: var(--hp-bg-raised); border: 1px solid var(--hp-border-bright); border-radius: 8px; padding: 14px 20px; gap: 16px; font-family: var(--hp-mono); font-size: 15px; transition: border-color 0.15s; }
 .hp-install-bar:hover { border-color: #333; }
 .hp-prompt-sign { color: var(--hp-accent); user-select: none; }
 .hp-install-bar code { color: var(--hp-text); white-space: nowrap; background: transparent !important; padding: 0 !important; font-size: inherit; }
+.hp-install-bar-agent { font-size: 14px; }
+.hp-install-bar-agent code { white-space: normal; color: var(--hp-text-dim); }
+.hp-agent-label { color: var(--hp-accent); user-select: none; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0; }
 .hp-copy-btn { background: none; border: 1px solid var(--hp-border-bright); border-radius: 4px; color: var(--hp-text-dim); font-family: var(--hp-mono); font-size: 12px; padding: 4px 10px; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
 .hp-copy-btn:hover { color: var(--hp-text); border-color: #444; }
 

docs/src/app/page.tsx

@@ -155,7 +155,10 @@ export default function HomePage() {
             </div>
             <div className="hp-install-step">
               <div className="hp-install-step-num">2</div>
-              <div className="hp-install-step-text">Tell your agent: <span style={{ color: 'var(--hp-text)' }}>&quot;Run npx @tanstack/intent install, then run the agentcrumbs/init skill&quot;</span></div>
+              <div className="hp-install-bar hp-install-bar-agent">
+                <span className="hp-agent-label">agent</span>
+                <code>Run npx @tanstack/intent install, then run the agentcrumbs/init skill</code>
+              </div>
             </div>
           </div>
         </div>