.build-shell{--build-flow-width:300px;--build-panel-bg:color-mix(in srgb, var(--ui-surface) 86%, transparent);--build-accent-fill:color-mix(in srgb, var(--accent-yellow) 8%, var(--ui-surface));--build-accent-border:color-mix(in srgb, var(--accent-yellow) 55%, transparent);--build-card-outline:0 0 0 1px color-mix(in srgb, var(--accent-yellow) 35%, transparent);--build-card-shadow:0 6px 22px color-mix(in srgb, var(--accent-yellow) 18%, transparent);--build-card-inset:inset 0 0 12px color-mix(in srgb, var(--accent-yellow) 6%, transparent);min-height:calc(100vh - 170px);padding:0 var(--page-edge-padding) 2.5rem;place-items:start center;display:grid}.build-shell .build-wrap{width:min(1080px,100%)}.build-shell .build-layout{grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"detail flow";align-items:start;gap:3rem;width:100%;display:grid}.build-shell .detail-col{grid-area:detail;align-self:start}.build-shell .flow-board{width:var(--build-flow-width);flex-direction:column;flex-shrink:0;grid-area:flow;align-self:start;display:flex}.build-shell .flow-item{flex-direction:column;display:flex}.build-shell .step-card{border:1.5px solid var(--ui-border);background:var(--build-panel-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;text-align:left;border-radius:0;grid-template-columns:2.6rem 1fr auto;align-items:center;gap:.75rem;padding:.85rem 1rem;font-family:JetBrains Mono,monospace;transition:border-color .28s,background .28s,box-shadow .28s;display:grid}.build-shell .step-card:hover{border-color:color-mix(in srgb, var(--accent-yellow) 55%, var(--ui-border))}.build-shell .step-card:focus-visible{outline:2px solid var(--accent-yellow);outline-offset:3px;z-index:2}.build-shell .step-card.active{border:2px solid var(--accent-yellow);background:var(--build-accent-fill);box-shadow:var(--build-card-outline), var(--build-card-shadow), var(--build-card-inset)}.build-shell .card-num{color:var(--text-secondary);align-self:start;padding-top:.1rem;font-family:Space Grotesk,sans-serif;font-size:1.45rem;font-weight:700;line-height:1;transition:color .28s}.build-shell .step-card.active .card-num{color:var(--accent-yellow)}.build-shell .card-body{flex-direction:column;min-width:0;display:flex}.build-shell .card-title{color:var(--text-primary);font-family:Space Grotesk,sans-serif;font-size:.78rem;font-weight:600;line-height:1.35;transition:color .28s}.build-shell .step-card.active .card-title{color:var(--text-primary)}.build-shell .card-icon{color:color-mix(in srgb, var(--text-primary) 40%, transparent);flex-shrink:0;justify-content:center;align-items:center;transition:color .28s;display:flex}.build-shell .step-card.active .card-icon{color:var(--accent-yellow)}.build-shell .flow-connector{justify-content:center;height:20px;display:flex;position:relative}.build-shell .connector-line{background:color-mix(in srgb, var(--accent-yellow) 28%, var(--ui-border));width:1px;height:100%;transition:background .4s}.build-shell .connector-line.lit{background:color-mix(in srgb, var(--accent-yellow) 70%, transparent);box-shadow:0 0 4px color-mix(in srgb, var(--accent-yellow) 50%, transparent)}.build-shell .detail-col{position:relative}.build-shell .page-title{font-family:var(--page-title-font);font-size:var(--page-title-size);font-weight:var(--page-title-weight);line-height:var(--page-title-line-height);letter-spacing:var(--page-title-letter-spacing);color:var(--text-primary);text-align:left;margin:0 0 1rem}.build-shell .page-intro{max-width:62ch;color:var(--text-secondary);margin:0 0 1.6rem;font-size:.9rem;line-height:1.72}.build-shell .detail-card{border:1.5px solid var(--ui-border);background:var(--build-panel-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:1.9rem 1.75rem;position:relative}.build-shell .detail-card:before{content:"";background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-yellow) 65%, transparent) 30%, color-mix(in srgb, var(--accent-yellow) 65%, transparent) 70%, transparent);height:2px;position:absolute;top:0;left:0;right:0}.build-shell .detail-content{transition:opacity .16s}.build-shell .detail-content.fading{opacity:0}.build-shell .dh{justify-content:space-between;align-items:flex-start;gap:.8rem;margin-bottom:.85rem;display:flex}.build-shell .dh-num{color:var(--accent-yellow);font-family:Space Grotesk,sans-serif;font-size:2.1rem;font-weight:700;line-height:1}.build-shell .dh-badge{letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--build-accent-border);color:var(--accent-yellow);padding:.25rem .55rem;font-size:.62rem;font-weight:700}.build-shell .dh-icon{color:color-mix(in srgb, var(--text-primary) 55%, transparent);margin-left:auto;display:flex}.build-shell .dt{letter-spacing:-.01em;color:var(--text-primary);margin:0 0 .72rem;font-family:Space Grotesk,sans-serif;font-size:clamp(1.05rem,2.2vw,1.3rem);font-weight:700;line-height:1.25}.build-shell .db{color:var(--text-secondary);margin:0 0 1.4rem;font-size:clamp(.78rem,1.5vw,.86rem);line-height:1.74}.build-shell .dots{margin-top:.2rem}.build-shell .dots-track{align-items:center;gap:.4rem;display:flex;position:relative}.build-shell .dot{z-index:2;background:var(--ui-muted);cursor:pointer;border:none;flex-shrink:0;width:18px;height:3px;padding:0;position:relative}.build-shell .dot:focus-visible{outline:2px solid var(--accent-yellow);outline-offset:4px}.build-shell .dot-pill{background:var(--accent-yellow);width:18px;height:3px;transform:translateY(-50%) translateX(calc(var(--idx) * (18px + .4rem)));pointer-events:none;z-index:3;transition:transform .35s cubic-bezier(.4,0,.2,1);position:absolute;top:50%;left:0}@media (width<=768px){.build-shell .build-wrap{width:100%}.build-shell .build-layout{grid-template-columns:1fr;grid-template-areas:"detail""flow";justify-items:center;gap:2rem;width:100%}.build-shell .flow-board,.build-shell .detail-col{width:100%}}@media (prefers-reduced-motion:reduce){.build-shell .step-card,.build-shell .detail-content,.build-shell .dot-pill,.build-shell .connector-line{transition:none}}
