.wizard-steps{gap:0;width:100%;min-width:0;max-width:100%;display:grid;container:survey-progress/inline-size}.wizard-step{--wizard-active-size:clamp(36px, 7cqw, 62px);--wizard-inactive-size:clamp(26px, 5cqw, 32px);--wizard-circle-size:var(--wizard-inactive-size);--wizard-circle-radius:calc(var(--wizard-inactive-size) * .45);--wizard-next-radius:calc(var(--wizard-inactive-size) * .45);--wizard-connector-gap:clamp(4px, 1cqw, 12px);min-width:0;position:relative}.wizard-step[data-active=true]{--wizard-circle-size:var(--wizard-active-size);--wizard-circle-radius:calc(var(--wizard-active-size) / 2)}.wizard-step[data-next-active=true]{--wizard-next-radius:calc(var(--wizard-active-size) / 2)}.wizard-step-inner{z-index:1;grid-template-rows:66px auto;place-items:center;gap:8px;display:grid;position:relative}.wizard-step-circle{width:min(100%, var(--wizard-circle-size));aspect-ratio:1}.wizard-step-label{text-align:center;overflow-wrap:anywhere;max-width:100%;font-size:clamp(10px,1.7cqw,14px)}.wizard-step-connector{top:33px;left:calc(50% + var(--wizard-circle-radius) + var(--wizard-connector-gap));right:calc(-50% + var(--wizard-next-radius) + var(--wizard-connector-gap));z-index:0;position:absolute;transform:translateY(-50%)}@container survey-progress (max-width:600px){.wizard-step-inner{grid-template-rows:44px auto}.wizard-step-connector{top:22px}}