#flow-stepper{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:1rem 2rem;background:var(--paper, #f5e6c8);border-bottom:1px solid var(--paper-dark, #ebd9b5);font-family:DM Sans,-apple-system,sans-serif;max-width:520px;margin:0 auto}.step-item{display:flex;flex-direction:column;align-items:center;gap:.35rem;position:relative;z-index:1;flex-shrink:0}.step-circle{width:28px;height:28px;border-radius:50%;border:2px solid #c4b89a;background:var(--paper, #f5e6c8);color:#999;font-size:.75rem;font-weight:500;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.step-label{font-size:.7rem;color:#999;letter-spacing:.03em;transition:color .3s ease;white-space:nowrap}.step-connector{flex:1;height:2px;background:#ddd3be;min-width:32px;margin:0 .25rem 1.2rem;border-radius:1px;overflow:hidden}.connector-fill{height:100%;width:0%;background:#3a3632;transition:width .4s ease;border-radius:1px}.step-item.active .step-circle{border-color:#3a3632;background:#3a3632;color:#f5e6c8}.step-item.active .step-label{color:#3a3632;font-weight:500}.step-item.completed .step-circle{border-color:#3a3632;background:#3a3632;color:#f5e6c8}.step-item.completed .step-label{color:#3a3632}.step-item.completed{cursor:pointer}.step-item.completed:hover .step-circle{opacity:.8}.step-item.completed:hover .step-label{text-decoration:underline}.step-connector.completed .connector-fill{width:100%}@media(max-width:600px){#flow-stepper{padding:.75rem 1rem;max-width:100%}.step-circle{width:24px;height:24px;font-size:.65rem}.step-label{font-size:.6rem}.step-connector{min-width:20px}}