@layer theme,base;@layer structure{:where([data-pattern=steps]){container-type:inline-size}:where([data-pattern=steps] [data-part=list]){gap:var(--steps-gap,0);margin:0;padding:0;list-style:none;display:grid}:where([data-pattern=steps] [data-part=step]){grid-template-columns:var(--steps-marker-size,2rem) minmax(0, 1fr);column-gap:var(--steps-marker-gap,0);align-items:start;padding-block-start:var(--steps-inset-start,0px);display:grid;position:relative}:where([data-pattern=steps] [data-part=marker]){inline-size:var(--steps-marker-size,2rem);block-size:var(--steps-marker-size,2rem);z-index:1;place-items:center;display:grid;position:relative}:where([data-pattern=steps] :is([data-part=marker-icon],[data-part=marker-icon]>*)){place-items:center;block-size:100%;inline-size:100%;display:grid}:where([data-pattern=steps] [data-part=content]){min-inline-size:0}:where([data-pattern=steps] :is([data-part=title],[data-part=status],[data-part=body])),:where([data-pattern=steps] [data-part=media]){margin:0}:where([data-pattern=steps] [data-part=media] img){block-size:auto;max-inline-size:100%;display:block}:where([data-pattern=steps] [data-part=connector]){inset-inline-start:calc(var(--steps-marker-size,2rem) / 2);inset-block:calc(var(--steps-inset-start,0px) + var(--steps-marker-size,2rem)) calc(-1 * (var(--steps-gap,0px) + var(--steps-inset-start,0px)));view-timeline-name:--steps-connector;view-timeline-axis:block;position:absolute;overflow:hidden;translate:-50%}:where([data-pattern=steps] [data-part=connector-fill]){transform-origin:top;position:absolute;inset:0}:where([data-pattern=steps][data-layout=compact] [data-part=content]){flex-wrap:wrap;align-items:baseline;column-gap:.5em;display:flex}:where([data-pattern=steps][data-layout=compact] :is([data-part=body],[data-part=media])){flex-basis:100%}@container (min-width:48rem){:where([data-pattern=steps][data-layout=horizontal] [data-part=list]){grid-auto-columns:minmax(0,1fr);grid-auto-flow:column}:where([data-pattern=steps][data-layout=horizontal] [data-part=step]){row-gap:var(--steps-marker-gap,0);grid-template-columns:minmax(0,1fr)}:where([data-pattern=steps][data-layout=horizontal] [data-part=connector]){inset-inline:var(--steps-marker-size,2rem) calc(-1 * var(--steps-gap,0px));inset-block:calc(var(--steps-inset-start,0px) + var(--steps-marker-size,2rem) / 2) auto;view-timeline-axis:block;translate:0 -50%}:where([data-pattern=steps][data-layout=horizontal] [data-part=connector-fill]){transform-origin:0}:where([data-pattern=steps][data-layout=horizontal]:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) [data-part=connector-fill]){transform-origin:100%}}:where([data-pattern=steps] [data-part=step]:nth-child(2)){--step-i:1}:where([data-pattern=steps] [data-part=step]:nth-child(3)){--step-i:2}:where([data-pattern=steps] [data-part=step]:nth-child(4)){--step-i:3}:where([data-pattern=steps] [data-part=step]:nth-child(5)){--step-i:4}:where([data-pattern=steps] [data-part=step]:nth-child(6)){--step-i:5}:where([data-pattern=steps] [data-part=step]:nth-child(n+7)){--step-i:6}@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){:where([data-pattern=steps][data-motion=reveal] [data-part=step]){animation:linear both steps-reveal;animation-timeline:view();animation-range:entry 0% entry var(--steps-reveal-range,60%)}:where([data-pattern=steps][data-motion=progress] [data-part=connector-fill]){animation:linear both steps-fill-block;animation-timeline:--steps-connector;animation-range:var(--steps-progress-range,cover 25% cover 60%)}@container (min-width:48rem){:where([data-pattern=steps][data-layout=horizontal][data-motion=progress] [data-part=connector-fill]){animation-name:steps-fill-inline;animation-range:cover calc(30% + var(--step-i,0) * 8%) cover calc(42% + var(--step-i,0) * 8%)}}}}@keyframes steps-reveal{0%{opacity:var(--steps-reveal-opacity,0);translate:0 var(--steps-reveal-shift,0)}}@keyframes steps-fill-block{0%{scale:1 0}}@keyframes steps-fill-inline{0%{scale:0 1}}}@layer components,vendor-base,vendor-adapter,utilities,exceptions;
@layer theme,base,structure;@layer components{:where([data-pattern=steps]){--steps-d:1}:where([data-pattern=steps][data-density=compact]){--steps-d:.6}:where([data-pattern=steps][data-density=relaxed]){--steps-d:1.5}:where([data-pattern=steps]:is([data-recipe=rail],[data-recipe=numbered-cards],[data-recipe=timeline],[data-recipe=progress-bar],[data-recipe=chevrons],[data-recipe=ledger])){--steps-gap:calc(var(--spacing) * 8 * var(--steps-d));--steps-marker-size:calc(var(--spacing) * 9);--steps-marker-gap:calc(var(--spacing) * 4);color:var(--color-fg)}:where([data-pattern=steps] [data-tone=complete]){--steps-tone:var(--color-success-fg)}:where([data-pattern=steps] [data-tone=active]){--steps-tone:var(--color-accent-fg)}:where([data-pattern=steps] [data-tone=pending]){--steps-tone:var(--color-fg-muted)}:where([data-pattern=steps]:is([data-recipe=rail],[data-recipe=numbered-cards],[data-recipe=timeline],[data-recipe=progress-bar],[data-recipe=chevrons],[data-recipe=ledger]) [data-part=title]){font-family:var(--font-display);font-weight:var(--weight-display,600);font-size:var(--text-lg);line-height:1.3}:where([data-pattern=steps]:is([data-recipe=rail],[data-recipe=numbered-cards],[data-recipe=timeline],[data-recipe=progress-bar],[data-recipe=chevrons],[data-recipe=ledger]) [data-part=body]){color:var(--color-fg-muted);line-height:var(--leading-body,1.6);max-inline-size:var(--measure,68ch);margin-block-start:calc(var(--spacing) * 2)}:where([data-pattern=steps]:is([data-recipe=rail],[data-recipe=numbered-cards],[data-recipe=timeline],[data-recipe=progress-bar],[data-recipe=chevrons],[data-recipe=ledger]) [data-part=status]){align-items:center;gap:calc(var(--spacing) * 1.5);font-family:var(--font-label,var(--font-body));font-size:var(--text-xs);font-weight:var(--weight-label,600);letter-spacing:var(--tracking-label,0);text-transform:var(--case-label,none);color:var(--steps-tone);margin-block-start:calc(var(--spacing) * 1.5);display:inline-flex}:where([data-pattern=steps]:is([data-recipe=rail],[data-recipe=numbered-cards],[data-recipe=timeline],[data-recipe=progress-bar],[data-recipe=chevrons],[data-recipe=ledger]) [data-part=marker]){font-family:var(--font-label,var(--font-body));font-size:var(--text-sm);font-weight:var(--weight-label,600);font-variant-numeric:tabular-nums}:where([data-pattern=steps]:is([data-recipe=rail],[data-recipe=numbered-cards],[data-recipe=timeline],[data-recipe=progress-bar],[data-recipe=chevrons],[data-recipe=ledger]) [data-part=marker-icon] svg){block-size:55%;inline-size:55%}:where([data-pattern=steps]:is([data-recipe=rail],[data-recipe=numbered-cards],[data-recipe=timeline],[data-recipe=progress-bar],[data-recipe=chevrons],[data-recipe=ledger]) [data-part=marker-dot]){border-radius:var(--radius-piece,50%);background:currentColor;block-size:40%;inline-size:40%}:where([data-pattern=steps]:is([data-recipe=rail],[data-recipe=numbered-cards],[data-recipe=timeline],[data-recipe=progress-bar],[data-recipe=chevrons],[data-recipe=ledger]) [data-part=media]){margin-block-start:calc(var(--spacing) * 4)}:where([data-pattern=steps]:is([data-recipe=rail],[data-recipe=numbered-cards],[data-recipe=timeline],[data-recipe=progress-bar],[data-recipe=chevrons]) [data-part=media] img){border-radius:var(--radius-panel,var(--radius-xl))}:where([data-pattern=steps]:is([data-recipe=rail],[data-recipe=numbered-cards],[data-recipe=timeline],[data-recipe=progress-bar],[data-recipe=chevrons],[data-recipe=ledger]) [data-part=media-caption]){font-size:var(--text-sm);color:var(--color-fg-muted);margin-block-start:calc(var(--spacing) * 2)}:where([data-pattern=steps]:is([data-recipe=rail],[data-recipe=numbered-cards],[data-recipe=timeline]) [data-part=connector]){inline-size:calc(2 * var(--rule-weight,1px));background:var(--color-line)}:where([data-pattern=steps]:is([data-recipe=rail],[data-recipe=numbered-cards],[data-recipe=timeline]) [data-part=connector-fill]){background:var(--color-accent)}:where([data-pattern=steps][data-layout=compact]:is([data-recipe=rail],[data-recipe=numbered-cards],[data-recipe=timeline],[data-recipe=progress-bar],[data-recipe=chevrons],[data-recipe=ledger])){--steps-gap:calc(var(--spacing) * 3 * var(--steps-d));--steps-marker-size:calc(var(--spacing) * 7);--steps-marker-gap:calc(var(--spacing) * 3)}:where([data-pattern=steps][data-layout=compact] [data-part=title]){font-size:var(--text-base)}:where([data-pattern=steps][data-layout=compact] [data-part=status]){margin-block-start:0}@container (min-width:48rem){:where([data-pattern=steps][data-layout=horizontal]:is([data-recipe=rail],[data-recipe=numbered-cards],[data-recipe=timeline]) [data-part=connector]){inline-size:auto;block-size:calc(2 * var(--rule-weight,1px));margin-inline:calc(var(--spacing) * 2)}:where([data-pattern=steps][data-layout=horizontal]){--steps-gap:calc(var(--spacing) * 6 * var(--steps-d))}}:where([data-pattern=steps][data-recipe=rail] [data-part=marker]){border-radius:var(--radius-piece,50%);background:var(--color-canvas);color:var(--color-fg-muted);box-shadow:inset 0 0 0 calc(2 * var(--rule-weight,1px)) var(--color-line)}:where([data-pattern=steps][data-recipe=rail] [data-tone=complete]>[data-part=marker]){color:var(--color-accent-fg);box-shadow:inset 0 0 0 calc(2 * var(--rule-weight,1px)) var(--color-accent)}:where([data-pattern=steps][data-recipe=rail] [aria-current=step]>[data-part=marker]){background:var(--color-action-primary);color:var(--color-on-action);box-shadow:0 0 0 calc(var(--spacing) * 1) color-mix(in oklab, var(--color-accent) 25%, transparent)}:where([data-pattern=steps][data-recipe=rail] [data-part=status]):before{content:"";border-radius:var(--radius-piece,50%);background:currentColor;block-size:.5em;inline-size:.5em}:where([data-pattern=steps][data-recipe=numbered-cards]){--steps-marker-size:calc(var(--spacing) * 11);--steps-marker-gap:calc(var(--spacing) * 5);--steps-gap:calc(var(--spacing) * 6 * var(--steps-d));--steps-reveal-opacity:0;--steps-reveal-shift:calc(var(--spacing) * 4)}:where([data-pattern=steps][data-recipe=numbered-cards] [data-part=marker]){border-radius:var(--radius-piece,50%);background:var(--color-action-primary);color:var(--color-on-action);font-family:var(--font-display);box-shadow:0 0 0 calc(var(--spacing) * 1.5) var(--color-canvas)}:where([data-pattern=steps][data-recipe=numbered-cards] [data-tone=pending]>[data-part=marker]){background:var(--color-surface-raised);color:var(--color-fg-muted);box-shadow:inset 0 0 0 calc(2 * var(--rule-weight,1px)) var(--color-line), 0 0 0 calc(var(--spacing) * 1.5) var(--color-canvas)}:where([data-pattern=steps][data-recipe=numbered-cards] [aria-current=step]>[data-part=marker]){box-shadow:0 0 0 calc(var(--spacing) * 1.5) var(--color-canvas), 0 0 0 calc(var(--spacing) * 2.5) var(--color-accent)}:where([data-pattern=steps][data-recipe=numbered-cards] [data-part=content]){padding:calc(var(--spacing) * 5 * var(--steps-d)) calc(var(--spacing) * 6);border-radius:var(--radius-panel,var(--radius-xl));background:var(--color-surface-raised);box-shadow:var(--elev-2,var(--shadow-soft))}:where([data-pattern=steps][data-recipe=numbered-cards] [data-part=status]){padding:calc(var(--spacing) * .5) calc(var(--spacing) * 2.5);background:color-mix(in oklab, var(--steps-tone) 12%, var(--color-surface-raised));border-radius:999px}:where([data-pattern=steps][data-recipe=numbered-cards][data-layout=compact] [data-part=content]){padding:calc(var(--spacing) * 1.5) 0 0;box-shadow:none;background:0 0}@container (min-width:48rem){:where([data-pattern=steps][data-recipe=numbered-cards][data-layout=horizontal] [data-part=step]){grid-template-rows:auto 1fr}:where([data-pattern=steps][data-recipe=numbered-cards][data-layout=horizontal] [data-part=content]){align-self:stretch}}:where([data-pattern=steps][data-recipe=timeline]){--steps-marker-size:calc(var(--spacing) * 5);--steps-marker-gap:calc(var(--spacing) * 5)}:where([data-pattern=steps][data-recipe=timeline] [data-part=marker]){border-radius:var(--radius-piece,50%);background:var(--color-canvas);box-shadow:inset 0 0 0 calc(2 * var(--rule-weight,1px)) var(--steps-tone,var(--color-fg-muted));color:#0000}:where([data-pattern=steps][data-recipe=timeline] :is([data-tone=complete],[aria-current=step])>[data-part=marker]){background:var(--steps-tone)}:where([data-pattern=steps][data-recipe=timeline] [data-part=content]){flex-direction:column;display:flex}:where([data-pattern=steps][data-recipe=timeline] [data-part=status]){margin-block:0 calc(var(--spacing) * 1);letter-spacing:.06em;text-transform:uppercase;order:-1}:where([data-pattern=steps][data-recipe=timeline] [data-tone=pending] [data-part=connector]){border-inline-start:calc(2 * var(--rule-weight,1px)) dashed var(--color-line);background:0 0}:where([data-pattern=steps][data-recipe=timeline][data-layout=compact] [data-part=content]){flex-direction:row}:where([data-pattern=steps][data-recipe=timeline][data-layout=compact] [data-part=status]){order:0}:where([data-pattern=steps][data-recipe=progress-bar]){--steps-gap:calc(var(--spacing) * 5 * var(--steps-d))}:where([data-pattern=steps][data-recipe=progress-bar] [data-part=step]){row-gap:calc(var(--spacing) * 1);border-block-start:calc(var(--spacing) * 1) solid var(--color-line);grid-template-columns:minmax(0,1fr);padding-block-start:calc(var(--spacing) * 3)}:where([data-pattern=steps][data-recipe=progress-bar] [data-tone=complete]){border-block-start-color:var(--color-accent)}:where([data-pattern=steps][data-recipe=progress-bar] [aria-current=step]){border-image:linear-gradient(90deg, var(--color-accent) 50%, var(--color-line) 50%) 1}:where([data-pattern=steps][data-recipe=progress-bar] [data-part=marker]){block-size:auto;inline-size:auto;color:var(--steps-tone,var(--color-fg-muted));font-size:var(--text-xs);letter-spacing:.06em;justify-items:start}:where([data-pattern=steps][data-recipe=progress-bar] :is([data-part=marker-dot],[data-part=marker-icon])){inline-size:calc(var(--spacing) * 5);block-size:calc(var(--spacing) * 5)}:where([data-pattern=steps][data-recipe=progress-bar] [data-part=connector]){display:none}:where([data-pattern=steps][data-recipe=chevrons]){--steps-gap:calc(var(--spacing) * 1);--steps-point:calc(var(--spacing) * 4)}:where([data-pattern=steps][data-recipe=chevrons] [data-part=step]){padding:calc(var(--spacing) * 4 * var(--steps-d)) calc(var(--spacing) * 5);background:var(--color-surface);clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--steps-point)), 50% 100%, 0 calc(100% - var(--steps-point)));align-items:center;padding-block-end:calc(var(--spacing) * 4 * var(--steps-d) + var(--steps-point))}:where([data-pattern=steps][data-recipe=chevrons] [data-tone=complete]){background:color-mix(in oklab, var(--color-accent) 14%, var(--color-surface))}:where([data-pattern=steps][data-recipe=chevrons] [aria-current=step]){background:var(--color-action-primary);color:var(--color-on-action);--steps-tone:var(--color-on-action)}:where([data-pattern=steps][data-recipe=chevrons] [aria-current=step] [data-part=status]){color:var(--color-on-action)}:where([data-pattern=steps][data-recipe=chevrons] [aria-current=step] [data-part=body]){color:color-mix(in oklab, var(--color-on-action) 82%, transparent)}:where([data-pattern=steps][data-recipe=chevrons] [data-part=marker]){border-radius:var(--radius-piece,50%);box-shadow:inset 0 0 0 calc(2 * var(--rule-weight,1px)) currentColor}:where([data-pattern=steps][data-recipe=chevrons] [data-part=connector]){display:none}:where([data-pattern=steps][data-recipe=chevrons] [data-part=step]:last-child){clip-path:none;padding-block-end:calc(var(--spacing) * 4 * var(--steps-d))}@container (min-width:48rem){:where([data-pattern=steps][data-recipe=chevrons][data-layout=horizontal] [data-part=list]){column-gap:0}:where([data-pattern=steps][data-recipe=chevrons][data-layout=horizontal] [data-part=step]){padding:calc(var(--spacing) * 4 * var(--steps-d)) calc(var(--spacing) * 4 + var(--steps-point));clip-path:polygon(0 0, calc(100% - var(--steps-point)) 0, 100% 50%, calc(100% - var(--steps-point)) 100%, 0 100%, var(--steps-point) 50%);align-content:start;margin-inline-end:calc(-.5 * var(--steps-point))}:where([data-pattern=steps][data-recipe=chevrons][data-layout=horizontal] [data-part=step]:first-child){clip-path:polygon(0 0, calc(100% - var(--steps-point)) 0, 100% 50%, calc(100% - var(--steps-point)) 100%, 0 100%);padding-inline-start:calc(var(--spacing) * 5)}:where([data-pattern=steps][data-recipe=chevrons][data-layout=horizontal] [data-part=step]:last-child){clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--steps-point) 50%);margin-inline-end:0}}:where([data-pattern=steps][data-recipe=ledger]){--steps-gap:0px;--steps-marker-size:calc(var(--spacing) * 10);--steps-marker-gap:calc(var(--spacing) * 6);--steps-inset-start:calc(var(--spacing) * 5 * var(--steps-d))}:where([data-pattern=steps][data-recipe=ledger] [data-part=step]){border-block-start:var(--rule-weight,1px) solid var(--color-line);padding-block-end:calc(var(--spacing) * 7 * var(--steps-d))}:where([data-pattern=steps][data-recipe=ledger] [data-part=step]:first-child){border-block-start-color:var(--color-fg)}:where([data-pattern=steps][data-recipe=ledger] [data-part=marker]){border:var(--rule-weight,1px) solid var(--color-fg);background:var(--color-canvas);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.06em;font-weight:400}:where([data-pattern=steps][data-recipe=ledger] [aria-current=step]>[data-part=marker]){background:var(--color-fg);color:var(--color-canvas)}:where([data-pattern=steps][data-recipe=ledger] [data-tone=pending]>[data-part=marker]){color:var(--color-fg-muted);border-style:dashed}:where([data-pattern=steps][data-recipe=ledger] [data-part=marker-dot]){border-radius:0;block-size:6px;inline-size:6px}:where([data-pattern=steps][data-recipe=ledger] [data-part=connector]){inline-size:var(--rule-weight,1px);margin-block:calc(var(--spacing) * 2);background:var(--color-fg)}:where([data-pattern=steps][data-recipe=ledger] [data-part=connector-fill]){display:none}:where([data-pattern=steps][data-recipe=ledger] [data-part=title]){font-weight:var(--weight-display,500);letter-spacing:-.01em}:where([data-pattern=steps][data-recipe=ledger] [data-part=status]){padding:calc(var(--spacing) * .5) calc(var(--spacing) * 1.5);border:var(--rule-weight,1px) solid currentColor;font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;font-weight:400}:where([data-pattern=steps][data-recipe=ledger] [data-part=status]):before{content:"";background:currentColor;block-size:.6em;inline-size:.6em}:where([data-pattern=steps][data-recipe=ledger] [data-part=status][data-tone=active]):before{clip-path:polygon(0 0,100% 0,0 100%)}:where([data-pattern=steps][data-recipe=ledger] [data-part=status][data-tone=pending]){border-style:dashed}:where([data-pattern=steps][data-recipe=ledger] [data-part=status][data-tone=pending]):before{background:0 0;box-shadow:inset 0 0 0 1px}:where([data-pattern=steps][data-recipe=ledger] [data-part=media]){border:var(--rule-weight,1px) solid var(--color-line);padding:calc(var(--spacing) * 2)}:where([data-pattern=steps][data-recipe=ledger] [data-part=media-caption]){font-family:var(--font-mono);font-size:var(--text-xs)}:where([data-pattern=steps][data-recipe=ledger][data-layout=compact]){--steps-marker-size:calc(var(--spacing) * 8);--steps-marker-gap:calc(var(--spacing) * 4);--steps-inset-start:calc(var(--spacing) * 3)}:where([data-pattern=steps][data-recipe=ledger][data-layout=compact] [data-part=step]){padding-block-end:calc(var(--spacing) * 3)}:where([data-pattern=steps][data-recipe=ledger][data-layout=compact] [data-part=marker]){background:0 0;border:0;justify-items:start}:where([data-pattern=steps][data-recipe=ledger][data-layout=compact] [data-part=connector]){display:none}@container (min-width:48rem){:where([data-pattern=steps][data-recipe=ledger][data-layout=horizontal]){--steps-gap:0px}:where([data-pattern=steps][data-recipe=ledger][data-layout=horizontal] [data-part=list]){border-block-start:var(--rule-weight,1px) solid var(--color-fg)}:where([data-pattern=steps][data-recipe=ledger][data-layout=horizontal] [data-part=step]){border-block-start:0;padding-inline-end:calc(var(--spacing) * 6)}:where([data-pattern=steps][data-recipe=ledger][data-layout=horizontal] [data-part=step]+[data-part=step]){border-inline-start:var(--rule-weight,1px) solid var(--color-line);padding-inline-start:calc(var(--spacing) * 6)}:where([data-pattern=steps][data-recipe=ledger][data-layout=horizontal] [data-part=connector]){display:none}}:where([data-pattern=steps][data-marker=dot]:is([data-recipe=rail],[data-recipe=numbered-cards],[data-recipe=timeline],[data-recipe=chevrons],[data-recipe=ledger])){--steps-marker-size:calc(var(--spacing) * 5)}}@layer vendor-base,vendor-adapter,utilities,exceptions;