/* Builder walkthrough: shared launch system, compact route sections. DESIGN.md. */
:root { --how-title-size: clamp(32px, 3.5vw, 48px); --how-shot-height: 440px; --how-item-size: 19px; --how-step-gap: var(--space-page); }
.launch-route .section.launch-wrap { max-width: none; margin-block: 0; }
.launch-route .how-overview, .launch-route .how-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--how-step-gap); align-items: start; }
.launch-route .how-copy h2, .launch-route .how-overview h2 { font-size: var(--how-title-size); }
.launch-route .how-copy .launch-lead { font-size: var(--launch-reading-size); }
.launch-route .how-jump { display: flex; flex-wrap: wrap; gap: var(--space-xl) var(--space-3xl); border-top: 1px solid var(--border); padding-top: var(--space-xl); }
.launch-route .how-jump a { display: inline-flex; align-items: center; min-height: var(--space-touch-target); font-size: var(--launch-menu-size); color: var(--accent); text-decoration: none; }
.launch-route .how-list, .launch-route .how-facts { padding: 0; margin: var(--space-3xl) 0; list-style: none; }
.launch-route .how-list { counter-reset: how; }
.launch-route .how-list li, .launch-route .how-facts li { padding-block: var(--space-2xl); border-top: 1px solid var(--border); font-size: var(--launch-detail-size); line-height: 1.5; }
.launch-route .how-list li { position: relative; padding-left: var(--space-section); counter-increment: how; }
.launch-route .how-list li::before { content: counter(how, decimal-leading-zero); position: absolute; left: 0; top: var(--space-2xl); color: var(--accent); font: 400 11px/1.6 var(--font-mono); }
.launch-route .how-list p, .launch-route .how-facts p { margin: var(--space-lg) 0 0; color: var(--on-surface-muted); }
.launch-route .how-install { min-width: 0; }
.launch-route .install-window { min-width: 0; }
.launch-route .how-shot { min-width: 0; margin: 0; padding: var(--space-xl); border: 1px solid var(--border); border-radius: var(--rounded-lg); background: var(--surface-2); box-shadow: var(--shadow-raised); }
.launch-route .how-shot figcaption { padding: var(--space-xl) var(--space-sm) var(--space-sm); font: 400 12px/1.5 var(--font-ui); color: var(--on-surface-muted); }
.launch-route .how-shot img { width: 100%; height: auto; display: block; border-radius: var(--rounded-xs); }
.launch-route .how-portrait img { width: auto; max-width: 100%; margin-inline: auto; max-height: var(--how-shot-height); object-fit: contain; }
.launch-route .how-agent { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3xl); }
.launch-route .how-terminal { min-width: 0; padding: var(--space-3xl); border: 1px solid var(--accent-border); border-radius: var(--rounded-md); background: var(--surface); }
.launch-route .how-terminal p, .launch-route .how-terminal a { font-size: var(--launch-detail-size); color: var(--on-surface-muted); line-height: 1.5; }
.launch-route .how-terminal pre { margin-block: var(--space-3xl); font: 400 var(--launch-detail-size)/1.8 var(--font-mono); color: var(--on-surface); background: none; padding: 0; overflow: auto; }
.launch-route .how-terminal a { display: inline-flex; align-items: center; min-height: var(--space-touch-target); color: var(--accent); }
@media (max-width: 820px) { .launch-route .how-overview, .launch-route .how-step { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xl); } }
.launch-route .how-list h3, .launch-route .how-facts h3 { font-size: var(--how-item-size); margin: 0; }
.launch-route .how-overview { border-top: 0; }
.launch-route .install-foot a { min-height: var(--space-touch-target); display: inline-flex; align-items: center; }