.flow{--flow-ease:cubic-bezier(.23, 1, .32, 1);--flow-beat:.11s;--flow-exit:.16s;--flow-enter:.26s;--flow-shift:1.5rem;--flow-dir:1;--flow-hold:var(--flow-beat);--flow-enter-delay:calc(var(--flow-hold) + 90ms)}.flow[data-direction=back]{--flow-dir:-1;--flow-hold:0s}@media (max-width:639px){.flow{--flow-shift:1rem}}.flow-progress{max-width:var(--container-column);margin-bottom:1.25rem}.flow-progress-label{font-variant-numeric:tabular-nums}.flow-progress-count{display:inline-block}.flow[data-direction=forward] .flow-progress-count,.flow[data-direction=back] .flow-progress-count{animation:flow-count-in .22s var(--flow-ease) backwards}.flow-progress-track{background:var(--color-sand);height:3px;margin-top:.625rem;position:relative;overflow:hidden}.flow-progress-fill{background:var(--color-fairway);transform-origin:0;transition:transform .3s var(--flow-ease);will-change:transform;position:absolute;inset:0}@keyframes flow-count-in{0%{opacity:0;transform:translateY(calc(var(--flow-dir) * .45em))}}.flow-stage{overflow-clip-margin:1rem;display:grid;overflow-x:clip}.flow-card{grid-area:1/1;min-width:0}.flow-card-out{pointer-events:none;animation:flow-exit var(--flow-exit) var(--flow-ease) var(--flow-hold) both}.flow[data-direction=forward] .flow-card-in,.flow[data-direction=back] .flow-card-in{animation:flow-enter var(--flow-enter) var(--flow-ease) var(--flow-enter-delay) both}@keyframes flow-exit{to{opacity:0;transform:translateX(calc(var(--flow-dir) * var(--flow-shift) * -.75))}}@keyframes flow-enter{0%{opacity:0;transform:translateX(calc(var(--flow-dir) * var(--flow-shift)))}}.flow[data-direction=forward] .flow-card-in .flow-trail,.flow[data-direction=back] .flow-card-in .flow-trail{animation:flow-option-in .24s var(--flow-ease) backwards;animation-delay:calc(var(--flow-enter-delay) + var(--option-index,0) * 28ms)}@keyframes flow-option-in{0%{opacity:0;transform:translateX(calc(var(--flow-dir) * .75rem))}}.flow-heading:focus,.flow-reveal-name:focus{outline:none}.flow-option{transition:transform .15s var(--flow-ease), opacity .15s var(--flow-ease), box-shadow .15s var(--flow-ease), border-color .15s var(--flow-ease), background-color .15s var(--flow-ease)}.flow-option:active{box-shadow:var(--shadow-raised);transition-duration:90ms;transform:scale(.98)}.flow-option-key{position:relative}.flow-option-number,.flow-option-check{transition:opacity .15s var(--flow-ease), transform .15s var(--flow-ease)}.flow-option-check{opacity:0;margin:auto;position:absolute;inset:0;transform:scale(.4)}.flow-option.is-selected{border-color:var(--color-fairway);border-left-color:var(--color-fairway);background:color-mix(in srgb, var(--color-fairway) 7%, var(--color-paper-raised));box-shadow:var(--shadow-raised);transform:none}.flow-option.is-selected .flow-option-key{border-color:var(--color-fairway);background:var(--color-fairway);color:var(--color-paper)}.flow-option.is-selected .flow-option-number{opacity:0;transform:scale(.4)}.flow-option.is-selected .flow-option-check{opacity:1;transform:scale(1)}.has-selection .flow-option:not(.is-selected){opacity:.45;box-shadow:none;transform:none}.flow-reveal-mark{background:var(--color-fairway);width:2.5rem;height:2.5rem;color:var(--color-paper);border-radius:999px;flex:none;justify-content:center;align-items:center;margin-top:.125rem;display:inline-flex}.flow[data-direction=forward] .flow-reveal-mark{animation:flow-mark-in .26s var(--flow-ease) calc(var(--flow-enter-delay) + 60ms) backwards}.flow[data-direction=forward] .flow-reveal-name,.flow[data-direction=forward] .flow-reveal-note{animation:flow-rise .26s var(--flow-ease) calc(var(--flow-enter-delay) + 90ms) backwards}.flow[data-direction=forward] .flow-reveal-note{animation-delay:calc(var(--flow-enter-delay) + .15s)}@keyframes flow-mark-in{0%{opacity:0;transform:scale(.6)}}@keyframes flow-rise{0%{opacity:0;transform:translateY(.375rem)}}@media (prefers-reduced-motion:reduce){.flow{--flow-shift:0px;--flow-enter-delay:calc(var(--flow-hold) + 60ms)}.flow .flow-card-out{animation-name:flow-fade-out!important;animation-duration:.15s!important}.flow[data-direction=forward] .flow-card-in,.flow[data-direction=back] .flow-card-in{animation-name:flow-fade-in!important;animation-duration:.15s!important}.flow .flow-trail,.flow .flow-progress-count,.flow .flow-reveal-mark,.flow .flow-reveal-name,.flow .flow-reveal-note{animation:none!important}.flow-progress-fill{transition:none}.flow-option:active,.has-selection .flow-option:not(.is-selected),.flow-option-number,.flow-option-check{transform:none}@keyframes flow-fade-out{to{opacity:0}}@keyframes flow-fade-in{0%{opacity:0}}}