.step-bar.svelte-1o51cnr{display:flex;align-items:center;gap:0;padding:16px 20px;background:var(--dd-bg-surface);border-bottom:1px solid var(--dd-border-default);overflow-x:auto}[data-theme=dark] .step-bar.svelte-1o51cnr{background:var(--dd-bg-surface-alt)}.step.svelte-1o51cnr{display:flex;align-items:center;gap:8px;opacity:.4;transition:opacity .2s ease}.step.active.svelte-1o51cnr,.step.done.svelte-1o51cnr{opacity:1}.step-num.svelte-1o51cnr{width:24px;height:24px;border-radius:50%;background:var(--dd-border-default);color:var(--dd-text-tertiary);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s ease}.step.active.svelte-1o51cnr .step-num:where(.svelte-1o51cnr){background:var(--dd-blue);color:var(--dd-text-on-accent)}.step.done.svelte-1o51cnr .step-num:where(.svelte-1o51cnr){background:#22c55e;color:#fff}.step-text.svelte-1o51cnr{font-size:13px;font-weight:500;color:var(--dd-text-secondary);white-space:nowrap}.step.active.svelte-1o51cnr .step-text:where(.svelte-1o51cnr){color:var(--dd-text-primary)}.step-divider.svelte-1o51cnr{flex:1;height:1px;background:var(--dd-border-default);margin:0 12px;min-width:16px}.hint.svelte-1o51cnr{padding:12px 20px;font-size:13px;color:var(--dd-text-secondary);background:#3b82f60d;border-bottom:1px solid var(--dd-border-default)}.hint.success.svelte-1o51cnr{background:#22c55e14;color:#16a34a}[data-theme=dark] .hint.success.svelte-1o51cnr{color:#4ade80}.hint.svelte-1o51cnr code{font-size:12px;background:#0000000f;padding:2px 6px;border-radius:4px}[data-theme=dark] .hint.svelte-1o51cnr code{background:#ffffff14}.tutorial-dimmed{opacity:.4;pointer-events:none;transition:opacity .3s ease}.tutorial-pulse{animation:svelte-1o51cnr-pulse-glow 1s ease-in-out infinite;border-color:#3b82f6;background:#3b82f626}.tutorial-pulse:focus{animation:none;border-color:var(--dd-blue);background:var(--dd-bg-surface);box-shadow:0 0 0 2px #3b82f61a}@keyframes svelte-1o51cnr-pulse-glow{0%,to{box-shadow:0 0 #3b82f699}50%{box-shadow:0 0 12px 10px #3b82f600}}.demo-wrapper:has(input:focus,select:focus,textarea:focus) .hint.svelte-1o51cnr{animation:svelte-1o51cnr-hint-flash 1.5s ease-in-out infinite}@keyframes svelte-1o51cnr-hint-flash{0%,to{background:#3b82f60d}50%{background:#3b82f626}}