/* Generated by build.js (stageCss). States of the journey illustration. */
.stage .sg { transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { .stage .sg { transition: none; } }
.stage.st-1 .ev-0 { opacity: 1; transform: translate(0px,24px); }
.stage.st-1 .ev-1 { opacity: 1; transform: translate(0px,24px); }
.stage.st-1 .ev-2 { opacity: 1; transform: translate(0px,24px); }
.stage.st-1 .ev-3 { opacity: 1; transform: translate(0px,24px); }
.stage.st-1 .ev-4 { opacity: 1; transform: translate(0px,24px); }
.stage.st-1 .ev-5 { opacity: 1; transform: translate(0px,24px); }
.stage.st-1 .q-0 { opacity: 0; transform: translate(-14px,0px); }
.stage.st-1 .q-1 { opacity: 0; transform: translate(-14px,0px); }
.stage.st-1 .q-2 { opacity: 0; transform: translate(-14px,0px); }
.stage.st-1 .gate { opacity: 0; transform: translate(0px,-8px); }
.stage.st-1 .lane { opacity: 0; transform: translate(0px,0px); }
.stage.st-1 .card { opacity: 0; transform: translate(0px,-70px); }
.stage.st-1 .rank { opacity: 0; transform: translate(0px,0px); }
.stage.st-1 .grade { opacity: 0; transform: translate(8px,0px); }
.stage.st-1 .desk { opacity: 0; transform: translate(18px,0px); }
.stage.st-1 .handoff { opacity: 0; transform: translate(0px,0px); }
.stage.st-1 .note-1 { opacity: 1; transform: translate(0px,0px); }
.stage.st-1 .note-2 { opacity: 0; transform: translate(10px,0px); }
.stage.st-1 .note-3 { opacity: 0; transform: translate(10px,0px); }
.stage.st-1 .note-4 { opacity: 0; transform: translate(10px,0px); }
.stage.st-1 .sv-card { stroke: var(--tool); fill: var(--surface); }
.stage.st-1 .sv-badge { stroke: var(--tool); }
.stage.st-2 .ev-0 { opacity: 0.9; transform: translate(0px,104px); }
.stage.st-2 .ev-1 { opacity: 0.77; transform: translate(0px,96px); }
.stage.st-2 .ev-2 { opacity: 0.64; transform: translate(0px,88px); }
.stage.st-2 .ev-3 { opacity: 0.51; transform: translate(0px,80px); }
.stage.st-2 .ev-4 { opacity: 0.38; transform: translate(0px,72px); }
.stage.st-2 .ev-5 { opacity: 0.25; transform: translate(0px,64px); }
.stage.st-2 .q-0 { opacity: 0; transform: translate(-14px,0px); }
.stage.st-2 .q-1 { opacity: 0; transform: translate(-14px,0px); }
.stage.st-2 .q-2 { opacity: 0; transform: translate(-14px,0px); }
.stage.st-2 .gate { opacity: 0; transform: translate(0px,-8px); }
.stage.st-2 .lane { opacity: 0; transform: translate(0px,0px); }
.stage.st-2 .card { opacity: 1; transform: translate(0px,-80px); }
.stage.st-2 .rank { opacity: 0; transform: translate(0px,0px); }
.stage.st-2 .grade { opacity: 0; transform: translate(8px,0px); }
.stage.st-2 .desk { opacity: 0; transform: translate(18px,0px); }
.stage.st-2 .handoff { opacity: 0; transform: translate(0px,0px); }
.stage.st-2 .note-1 { opacity: 0; transform: translate(10px,0px); }
.stage.st-2 .note-2 { opacity: 1; transform: translate(0px,0px); }
.stage.st-2 .note-3 { opacity: 0; transform: translate(10px,0px); }
.stage.st-2 .note-4 { opacity: 0; transform: translate(10px,0px); }
.stage.st-2 .sv-card { stroke: var(--tool); fill: var(--surface); }
.stage.st-2 .sv-badge { stroke: var(--tool); }
.stage.st-3 .ev-0 { opacity: 0; transform: translate(0px,123px); }
.stage.st-3 .ev-1 { opacity: 0; transform: translate(0px,83px); }
.stage.st-3 .ev-2 { opacity: 0; transform: translate(0px,43px); }
.stage.st-3 .ev-3 { opacity: 0; transform: translate(0px,3px); }
.stage.st-3 .ev-4 { opacity: 0; transform: translate(0px,-37px); }
.stage.st-3 .ev-5 { opacity: 0; transform: translate(0px,-77px); }
.stage.st-3 .q-0 { opacity: 0; transform: translate(-14px,0px); }
.stage.st-3 .q-1 { opacity: 0; transform: translate(-14px,0px); }
.stage.st-3 .q-2 { opacity: 0; transform: translate(-14px,0px); }
.stage.st-3 .gate { opacity: 0; transform: translate(0px,-8px); }
.stage.st-3 .lane { opacity: 0; transform: translate(0px,0px); }
.stage.st-3 .card { opacity: 1; transform: translate(0px,-80px); }
.stage.st-3 .rank { opacity: 0; transform: translate(0px,0px); }
.stage.st-3 .grade { opacity: 1; transform: translate(0px,0px); }
.stage.st-3 .desk { opacity: 0; transform: translate(18px,0px); }
.stage.st-3 .handoff { opacity: 0; transform: translate(0px,0px); }
.stage.st-3 .note-1 { opacity: 0; transform: translate(10px,0px); }
.stage.st-3 .note-2 { opacity: 0; transform: translate(10px,0px); }
.stage.st-3 .note-3 { opacity: 1; transform: translate(0px,0px); }
.stage.st-3 .note-4 { opacity: 0; transform: translate(10px,0px); }
.stage.st-3 .sv-card { stroke: var(--tool); fill: var(--surface); }
.stage.st-3 .sv-badge { stroke: var(--tool); }
.stage.st-4 .ev-0 { opacity: 0; transform: translate(0px,123px); }
.stage.st-4 .ev-1 { opacity: 0; transform: translate(0px,83px); }
.stage.st-4 .ev-2 { opacity: 0; transform: translate(0px,43px); }
.stage.st-4 .ev-3 { opacity: 0; transform: translate(0px,3px); }
.stage.st-4 .ev-4 { opacity: 0; transform: translate(0px,-37px); }
.stage.st-4 .ev-5 { opacity: 0; transform: translate(0px,-77px); }
.stage.st-4 .q-0 { opacity: 1; transform: translate(0px,0px); }
.stage.st-4 .q-1 { opacity: 1; transform: translate(0px,0px); }
.stage.st-4 .q-2 { opacity: 1; transform: translate(0px,0px); }
.stage.st-4 .gate { opacity: 0; transform: translate(0px,-8px); }
.stage.st-4 .lane { opacity: 0; transform: translate(0px,0px); }
.stage.st-4 .card { opacity: 1; transform: translate(0px,98px); }
.stage.st-4 .rank { opacity: 1; transform: translate(0px,0px); }
.stage.st-4 .grade { opacity: 1; transform: translate(0px,0px); }
.stage.st-4 .desk { opacity: 0; transform: translate(18px,0px); }
.stage.st-4 .handoff { opacity: 0; transform: translate(0px,0px); }
.stage.st-4 .note-1 { opacity: 0; transform: translate(10px,0px); }
.stage.st-4 .note-2 { opacity: 0; transform: translate(10px,0px); }
.stage.st-4 .note-3 { opacity: 0; transform: translate(10px,0px); }
.stage.st-4 .note-4 { opacity: 1; transform: translate(0px,0px); }
.stage.st-4 .sv-card { stroke: var(--tool); fill: var(--surface); }
.stage.st-4 .sv-badge { stroke: var(--tool); }
.stage.st-5 .ev-0 { opacity: 0; transform: translate(0px,123px); }
.stage.st-5 .ev-1 { opacity: 0; transform: translate(0px,83px); }
.stage.st-5 .ev-2 { opacity: 0; transform: translate(0px,43px); }
.stage.st-5 .ev-3 { opacity: 0; transform: translate(0px,3px); }
.stage.st-5 .ev-4 { opacity: 0; transform: translate(0px,-37px); }
.stage.st-5 .ev-5 { opacity: 0; transform: translate(0px,-77px); }
.stage.st-5 .q-0 { opacity: 1; transform: translate(0px,0px); }
.stage.st-5 .q-1 { opacity: 1; transform: translate(0px,0px); }
.stage.st-5 .q-2 { opacity: 1; transform: translate(0px,0px); }
.stage.st-5 .gate { opacity: 1; transform: translate(0px,0px); }
.stage.st-5 .lane { opacity: 1; transform: translate(0px,0px); }
.stage.st-5 .card { opacity: 1; transform: translate(0px,128px); }
.stage.st-5 .rank { opacity: 0; transform: translate(0px,0px); }
.stage.st-5 .grade { opacity: 1; transform: translate(0px,0px); }
.stage.st-5 .desk { opacity: 0; transform: translate(18px,0px); }
.stage.st-5 .handoff { opacity: 0; transform: translate(0px,0px); }
.stage.st-5 .note-1 { opacity: 0; transform: translate(10px,0px); }
.stage.st-5 .note-2 { opacity: 0; transform: translate(10px,0px); }
.stage.st-5 .note-3 { opacity: 0; transform: translate(10px,0px); }
.stage.st-5 .note-4 { opacity: 0; transform: translate(10px,0px); }
.stage.st-5 .sv-card { stroke: var(--correct); fill: var(--correct-tint); }
.stage.st-5 .sv-badge { stroke: var(--correct); }
.stage.st-6 .ev-0 { opacity: 0; transform: translate(0px,123px); }
.stage.st-6 .ev-1 { opacity: 0; transform: translate(0px,83px); }
.stage.st-6 .ev-2 { opacity: 0; transform: translate(0px,43px); }
.stage.st-6 .ev-3 { opacity: 0; transform: translate(0px,3px); }
.stage.st-6 .ev-4 { opacity: 0; transform: translate(0px,-37px); }
.stage.st-6 .ev-5 { opacity: 0; transform: translate(0px,-77px); }
.stage.st-6 .q-0 { opacity: 0.45; transform: translate(0px,0px); }
.stage.st-6 .q-1 { opacity: 0.45; transform: translate(0px,0px); }
.stage.st-6 .q-2 { opacity: 0.45; transform: translate(0px,0px); }
.stage.st-6 .gate { opacity: 0.55; transform: translate(0px,0px); }
.stage.st-6 .lane { opacity: 1; transform: translate(0px,0px); }
.stage.st-6 .card { opacity: 1; transform: translate(0px,128px); }
.stage.st-6 .rank { opacity: 0; transform: translate(0px,0px); }
.stage.st-6 .grade { opacity: 1; transform: translate(0px,0px); }
.stage.st-6 .desk { opacity: 1; transform: translate(0px,0px); }
.stage.st-6 .handoff { opacity: 1; transform: translate(0px,0px); }
.stage.st-6 .note-1 { opacity: 0; transform: translate(10px,0px); }
.stage.st-6 .note-2 { opacity: 0; transform: translate(10px,0px); }
.stage.st-6 .note-3 { opacity: 0; transform: translate(10px,0px); }
.stage.st-6 .note-4 { opacity: 0; transform: translate(10px,0px); }
.stage.st-6 .sv-card { stroke: var(--correct); fill: var(--correct-tint); }
.stage.st-6 .sv-badge { stroke: var(--correct); }