@layer components{:where(.mk-process-step,.mk-process-step *){box-sizing:border-box}.mk-process-steps{flex-direction:column;width:100%;margin:0;padding:0;list-style:none;display:flex;container:mk-process-steps/inline-size}.mk-process-step{grid-template-columns:auto minmax(0,1fr);align-content:start;gap:1.25rem;padding-block-end:2rem;display:grid;position:relative;&:not(:last-child):before{content:"";inset-inline-start:1.25rem;background:var(--border);width:2px;position:absolute;top:2.75rem;bottom:.25rem;translate:-50%}&:last-child{padding-block-end:0}}.mk-process-step-number{border:2px solid var(--border);background:var(--background);width:2.5rem;height:2.5rem;font-family:var(--font-mono);border-radius:50%;place-items:center;font-size:.8125rem;font-weight:600;display:grid}.mk-process-step[aria-current] .mk-process-step-number{border-color:var(--primary);background:var(--primary);color:var(--primary-foreground)}.mk-process-step-body{gap:.25rem;padding-block-start:.375rem;display:grid}.mk-process-step-title{margin:0;font-size:1.0625rem;font-weight:600}.mk-process-step-desc{color:var(--muted-foreground);text-wrap:pretty;margin:0;font-size:.9375rem;line-height:1.6}.mk-process-steps[data-variant=horizontal]{flex-flow:wrap}.mk-process-steps[data-variant=horizontal]>.mk-process-step{flex:100%}@container mk-process-steps (width>=40rem){.mk-process-steps[data-variant=horizontal]>.mk-process-step{flex:1 1 0;grid-template-columns:minmax(0,1fr);gap:1rem;padding:0 1.5rem 0 0;&:not(:last-child):before{inset-inline:3.25rem .5rem;width:auto;height:2px;top:1.25rem;bottom:auto;translate:0 -50%}}}@media (forced-colors:active){.mk-process-step:not(:last-child):before{background:canvastext}.mk-process-step[aria-current] .mk-process-step-number{color:highlighttext;background:highlight;border-color:highlight}}}