@layer properties,theme,base;@layer structure{:where([data-pattern=steps]){--steps-d:1;--steps-tone:var(--color-fg-muted);--steps-gap:0px;--steps-marker-size:2rem;--steps-marker-gap:0px;--steps-inset-start:0px;--steps-reveal-range:60%;--steps-progress-range:cover 25% cover 60%;--step-i:0;--steps-reveal-opacity:0;--steps-reveal-shift:0px;container-type:inline-size}:where([data-pattern=steps] [data-part=list]){gap:var(--steps-gap);margin:0;padding:0;list-style:none;display:grid}:where([data-pattern=steps] [data-part=step]){grid-template-columns:var(--steps-marker-size) minmax(0, 1fr);column-gap:var(--steps-marker-gap);align-items:start;padding-block-start:var(--steps-inset-start);display:grid;position:relative}:where([data-pattern=steps] [data-part=marker]){inline-size:var(--steps-marker-size);block-size:var(--steps-marker-size);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) / 2);inset-block:calc(var(--steps-inset-start) + var(--steps-marker-size)) calc(-1 * (var(--steps-gap) + var(--steps-inset-start)));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]){align-items:baseline;column-gap:calc(var(--space-md) * .5);flex-wrap:wrap;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);grid-template-columns:minmax(0,1fr)}:where([data-pattern=steps][data-layout=horizontal] [data-part=connector]){inset-inline:var(--steps-marker-size) calc(-1 * var(--steps-gap));inset-block:calc(var(--steps-inset-start) + var(--steps-marker-size) / 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:steps-reveal var(--clock-scrub) both;animation-timeline:view();animation-range:entry 0% entry var(--steps-reveal-range)}:where([data-pattern=steps][data-motion=progress] [data-part=connector-fill]){animation:steps-fill-block var(--clock-scrub) both;animation-timeline:--steps-connector;animation-range:var(--steps-progress-range)}@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) * 8%) cover calc(42% + var(--step-i) * 8%)}}}}@keyframes steps-reveal{0%{opacity:var(--steps-reveal-opacity);translate:0 var(--steps-reveal-shift)}}@keyframes steps-fill-block{0%{scale:1 0}}@keyframes steps-fill-inline{0%{scale:0 1}}}@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);font-size:var(--text-lede);line-height:calc(var(--leading-body) * .83871)}: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);max-inline-size:var(--measure);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);font-size:var(--text-ui-sm);font-weight:var(--weight-label);letter-spacing:var(--tracking-label);text-transform:var(--case-label);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);font-size:var(--text-small);font-weight:var(--weight-label);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);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)}: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-small);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));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-body)}: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));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);background:var(--color-canvas);color:var(--color-fg-muted);box-shadow:var(--elev-soft)}:where([data-pattern=steps][data-recipe=rail] [data-tone=complete]>[data-part=marker]){color:var(--color-accent-fg);box-shadow:var(--elev-soft)}: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:var(--elev-soft)}:where([data-pattern=steps][data-recipe=rail] [data-part=status]):before{content:"";border-radius:var(--radius-piece);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);background:var(--color-action-primary);color:var(--color-on-action);font-family:var(--font-display);box-shadow:var(--elev-soft)}: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:var(--elev-soft)}:where([data-pattern=steps][data-recipe=numbered-cards] [aria-current=step]>[data-part=marker]){box-shadow:var(--elev-soft)}: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);background:var(--color-surface-raised);box-shadow:var(--elev-2)}:where([data-pattern=steps][data-recipe=numbered-cards] [data-part=status]){padding:calc(var(--spacing) * .5) calc(var(--spacing) * 2.5);border-radius:var(--radius-pill);background:var(--steps-tone)}@supports (color:color-mix(in lab, red, red)){:where([data-pattern=steps][data-recipe=numbered-cards] [data-part=status]){background:color-mix(in oklab, var(--steps-tone) 12%, var(--color-surface-raised))}}: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);background:var(--color-canvas);box-shadow:var(--elev-soft);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:calc(var(--tracking-tight) * -2.4);text-transform:var(--case-upper);order:-1}:where([data-pattern=steps][data-recipe=timeline] [data-tone=pending] [data-part=connector]){border-inline-start:calc(2 * var(--rule-weight)) 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);font-size:var(--text-ui-sm);letter-spacing:calc(var(--tracking-tight) * -2.4);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:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){: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:var(--color-on-action)}@supports (color:color-mix(in lab, red, red)){: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);box-shadow:var(--elev-soft)}: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) 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) solid var(--color-fg);background:var(--color-canvas);font-family:var(--font-mono);font-size:var(--text-ui-sm);font-weight:var(--weight-normal);letter-spacing:calc(var(--tracking-tight) * -2.4)}: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);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);letter-spacing:calc(var(--tracking-tight) * .4)}:where([data-pattern=steps][data-recipe=ledger] [data-part=status]){padding:calc(var(--spacing) * .5) calc(var(--spacing) * 1.5);border:var(--rule-weight) solid currentColor;font-family:var(--font-mono);font-weight:var(--weight-normal);letter-spacing:calc(var(--tracking-tight) * -3.2);text-transform:var(--case-upper)}: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{box-shadow:var(--elev-soft);background:0 0}:where([data-pattern=steps][data-recipe=ledger] [data-part=media]){border:var(--rule-weight) 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-ui-sm)}: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) 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) 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 brand,vendor-base,vendor-adapter,utilities,exceptions;
