:root{--hue:223;--primary:hsl(var(--hue),90%,50%);--primary-light:hsl(var(--hue),90%,70%);--gray-light:hsl(var(--hue),10%,80%);--gray-dark:hsl(var(--hue),10%,40%);--text-light:hsl(var(--hue),10%,50%);--text-dark:hsl(var(--hue),10%,10%);--bg-light:#fff;--bg-dark:hsl(var(--hue),10%,20%);--trans-dur:.3s;--trans-timing:cubic-bezier(.65,0,.35,1)}.steps-container{width:100%;max-width:900px;margin:2.5rem auto 0;padding:0 1rem}.steps{transition:background-color var(--trans-dur)var(--trans-timing);border-radius:1rem;justify-content:space-between;align-items:center;padding:1.5rem 2rem;display:flex}.step{z-index:2;cursor:default;flex-direction:column;align-items:center;display:flex;position:relative}.step-number{background-color:var(--gray-light);color:#fff;text-align:center;width:2.2em;height:2.2em;transition:all var(--trans-dur)var(--trans-timing);border-radius:50%;line-height:2.2em;box-shadow:0 2px 4px #0000001a}.step-name{color:var(--text-light);white-space:nowrap;transition:all var(--trans-dur)var(--trans-timing);text-transform:uppercase;letter-spacing:.5px;margin-top:.6em;font-size:.8em}.step--current .step-number{background-color:var(--primary);box-shadow:0 0 0 4px hsla(var(--hue),90%,50%,.2);transform:scale(1.05)}.step--current .step-name{color:var(--text-dark);font-weight:700}.step--done .step-number{background-color:var(--primary)}.step--done .step-name{color:var(--text-dark);font-weight:600}.connector{background-color:var(--gray-light);height:3px;transition:background-color var(--trans-dur)var(--trans-timing);z-index:1;border-radius:2px;flex:1;margin:0 .5rem;position:relative}.connector:before{content:"";background-color:var(--primary);transform-origin:0;width:100%;height:100%;transition:transform var(--trans-dur)var(--trans-timing);border-radius:2px;position:absolute;top:0;left:0;transform:scaleX(0)}.connector--active:before{transform:scaleX(1)}@media (prefers-color-scheme:dark){:root{--primary:hsl(var(--hue),90%,65%);--gray-light:hsl(var(--hue),10%,40%);--text-light:hsl(var(--hue),10%,60%);--text-dark:hsl(var(--hue),10%,90%);--bg-light:hsl(var(--hue),10%,15%)}.step-number{box-shadow:0 2px 4px #0003}.step--current .step-number{box-shadow:0 0 0 4px hsla(var(--hue),90%,65%,.3)}}@media (max-width:640px){.steps{padding:1rem}.step-name{white-space:normal;text-align:center;font-size:.7em;line-height:1.2}.step-number{width:2em;height:2em;font-size:.9em;line-height:2em}}@keyframes pulse{0%,to{box-shadow:0 0 0 0 hsla(var(--hue),90%,50%,.4)}50%{box-shadow:0 0 0 6px hsla(var(--hue),90%,50%,.1)}}.step--current .step-number{animation:2s infinite pulse}