*,:before,:after{box-sizing:border-box}*{margin:0}html,body{height:100%}body{-webkit-font-smoothing:antialiased;line-height:1.5}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}:root{--v1:13;--v2:120;--v3:190;--v4:60}body{font-family:Roboto,sans-serif}hr{height:100px}.steps-group{min-height:calc(100vh - 100px);max-height:2000px;flex-wrap:wrap;align-items:stretch;display:flex}.steps-box{min-height:250px;min-width:400px;flex:50%;justify-content:center;align-items:center;display:flex}.steps-controller-box{width:100%;height:100px;z-index:100;background-color:#f7f7f7;justify-content:center;align-items:center;gap:20px;display:flex;position:fixed;bottom:0;left:0;box-shadow:0 -14px 28px #d1d1d140,0 -10px 10px #d6d6d638}.steps-controller-box button{width:120px;height:50%;color:#474747;background-color:#d4d4d4;border:none;border-radius:10px;font-size:1.2rem;font-weight:700}.v1{--c:var(--v1);background-color:hsl(var(--c),100%,97%)}.v1>.steps{gap:15px;display:flex}.v1>.steps div{width:50px;height:8px;background-color:hsl(var(--c),100%,83%);border-radius:1000px}.v2{--c:var(--v2);background-color:hsl(var(--c),100%,97%)}.v2>.steps{width:250px;height:8px;background-color:hsl(var(--c),100%,83%);border-radius:1000px}.v2>.steps .progress{height:100%;width:var(--p);border-radius:inherit;background-color:hsl(var(--c),100%,30%);transition:width .2s cubic-bezier(.25,.75,.5,1.25);position:relative}.v2>.steps .progress:after{content:attr(data-p);width:25px;height:25px;background-color:hsl(var(--c),100%,20%);color:hsl(var(--c),100%,97%);opacity:0;pointer-events:none;border-radius:1000px;justify-content:center;align-items:center;font-size:1.2ch;font-weight:700;display:flex;position:absolute;bottom:-4px;right:0;transform:translate(50%)}.v2>.steps:hover .progress:after{opacity:1;transition:all .2s cubic-bezier(.25,.75,.5,1.25);bottom:14px}.v3{--c:var(--v3);background-color:hsl(var(--c),100%,97%)}.v3>.steps{width:250px;justify-content:space-between;display:flex;position:relative}.v3>.steps .line{width:250px;height:4px;background-color:hsl(var(--c),100%,83%);z-index:0;border-radius:1000px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.v3>.steps .progress{width:var(--p);height:100%;border-radius:inherit;background-color:hsl(var(--c),100%,30%)}.v3>.steps .step{width:25px;aspect-ratio:1;background-color:hsl(var(--c),40%,70%);z-index:5;color:hsl(var(--c),100%,97%);border-radius:1000px;justify-content:center;align-items:center;font-size:1.4ch;font-weight:700;display:flex}.v4{--c:var(--v4);background-color:hsl(var(--c),100%,97%)}.v4>.steps{width:130px;aspect-ratio:1;background-color:#0000;background-color:hsl(var(--c),100%,75%);border-radius:50%;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.v4>.steps .block{width:55%;aspect-ratio:1;opacity:0;z-index:1;background-color:hsl(var(--c),100%,40%);transform-origin:0 0;position:absolute;top:50%;left:50%}.v4>.steps .block:nth-of-type(1){transform:rotate(90deg)}.v4>.steps .block:nth-of-type(2){transform:rotate(180deg)}.v4>.steps .block:nth-of-type(3){transform:rotate(270deg)}.v4>.steps .circle{width:calc(100% - 20px);aspect-ratio:1;background-color:hsl(var(--c),100%,97%);z-index:2;border-radius:50%}.h-active{color:#fff!important;background-color:#5564ff!important}.h-v1-completed,.h-v3-completed{background-color:hsl(var(--c),100%,40%)!important}.h-v3-current{background-color:hsl(var(--c),100%,20%)!important}.h-v4-visible{opacity:1!important}