.sn{--sn-bg:#e8f1fb;--sn-fg:#0d3d7a;--sn-dim:#4a6a97;--sn-track:#bed0e5;--sn-circle:#fff;--sn-ring:#d2dfee;--sn-dot:34px;--sn-pad:16px;--sn-step:150px;background:var(--sn-bg)}.sn--sticky{position:sticky;top:var(--sn-top,0);z-index:30}.sn__list{display:flex;gap:0;margin:0;padding:0 8px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;counter-reset:sn}.sn__list::-webkit-scrollbar{display:none}.sn__list>li{flex:0 0 var(--sn-step);display:flex}.sn__link{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;inline-size:100%;padding:var(--sn-pad) 6px 16px;scroll-snap-align:center;color:var(--sn-dim) !important;text-align:center;text-decoration:none;text-transform:uppercase;font-size:12.5px;line-height:1.3;letter-spacing:.045em;transition:color .15s ease}.sn__link::before{counter-increment:sn;content:counter(sn);display:grid;place-items:center;inline-size:var(--sn-dot);block-size:var(--sn-dot);border-radius:50%;background:var(--sn-circle);box-shadow:inset 0 0 0 1px var(--sn-ring);color:var(--sn-fg);font-size:15px;font-weight:700;letter-spacing:0;font-variant-numeric:tabular-nums;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease}.sn__link::after{content:'';position:absolute;top:calc(var(--sn-pad) + var(--sn-dot) / 2 - 1px);left:calc(50% + var(--sn-dot) / 2 + 8px);inline-size:calc(100% - var(--sn-dot) - 16px);block-size:2px;border-radius:2px;background:linear-gradient(to right,var(--sn-fg) 0 calc(var(--sn-p, 0) * 100%), var(--sn-track) 0)}.sn__list>li:last-child .sn__link::after{content:none}.sn__link:hover,.sn__link:focus-visible{color:var(--sn-fg)}.sn__link.is-done{color:var(--sn-fg)}.sn__link.is-done::before{box-shadow:inset 0 0 0 2px var(--sn-fg)}.sn__link.is-active{color:var(--sn-fg);font-weight:700}.sn__link.is-active::before{background:var(--sn-fg);box-shadow:inset 0 0 0 1px var(--sn-fg);color:var(--sn-circle)}.sn__link:focus-visible{outline:2px solid var(--sn-fg);outline-offset:-2px;border-radius:4px}.sn-target:focus{outline:0}@media(prefers-reduced-motion:reduce){.sn__link,.sn__link::before{transition:none}}@media(min-width:1024px){.sn{--sn-dot:44px;--sn-pad:20px}.sn__list{overflow-x:visible;padding:0 40px}.sn__list>li{flex:1 1 0}.sn__link{font-size:14px;padding:20px 10px 22px;gap:14px}.sn__link::before{font-size:18px}.sn__link::after{left:calc(50% + var(--sn-dot) / 2 + 16px);inline-size:calc(100% - var(--sn-dot) - 32px)}}
