/* Generated by tools/build-method-states.mjs from method-states.config.mjs. Do not edit by hand. */
.method-stage svg [id^="g-"]{opacity:0;transition:opacity .6s ease}
.method-stage[data-state="1"] #g-grid{opacity:1}
.method-stage[data-state="1"] #g-marks{opacity:1}
.method-stage[data-state="1"] #g-corners{opacity:1}
.method-stage[data-state="1"] #g-edge{opacity:1}
.method-stage[data-state="1"] #g-cells{opacity:0.12}
.method-stage[data-state="1"] #g-ruler{opacity:1}
.method-stage[data-state="2"] #g-grid{opacity:1}
.method-stage[data-state="2"] #g-marks{opacity:1}
.method-stage[data-state="2"] #g-corners{opacity:0.8}
.method-stage[data-state="2"] #g-frame{opacity:1}
.method-stage[data-state="2"] #g-cells{opacity:0.25}
.method-stage[data-state="2"] #g-nodes{opacity:0.25}
.method-stage[data-state="2"] #g-ruler{opacity:1}
.method-stage[data-state="3"] #g-grid{opacity:1}
.method-stage[data-state="3"] #g-marks{opacity:1}
.method-stage[data-state="3"] #g-corners{opacity:0.6}
.method-stage[data-state="3"] #g-frame{opacity:1}
.method-stage[data-state="3"] #g-groups{opacity:1}
.method-stage[data-state="3"] #g-cells{opacity:1}
.method-stage[data-state="3"] #g-nodes{opacity:0.5}
.method-stage[data-state="3"] #g-ruler{opacity:1}
.method-stage[data-state="4"] #g-grid{opacity:1}
.method-stage[data-state="4"] #g-marks{opacity:1}
.method-stage[data-state="4"] #g-corners{opacity:0.6}
.method-stage[data-state="4"] #g-frame{opacity:1}
.method-stage[data-state="4"] #g-groups{opacity:0.35}
.method-stage[data-state="4"] #g-cells{opacity:0.6}
.method-stage[data-state="4"] #g-nodes{opacity:0.35}
.method-stage[data-state="4"] #g-cues{opacity:1}
.method-stage[data-state="4"] #g-ruler{opacity:1}
.method-stage[data-state="5"] #g-grid{opacity:1}
.method-stage[data-state="5"] #g-marks{opacity:1}
.method-stage[data-state="5"] #g-corners{opacity:0.5}
.method-stage[data-state="5"] #g-frame{opacity:0.55}
.method-stage[data-state="5"] #g-groups{opacity:0.2}
.method-stage[data-state="5"] #g-cells{opacity:0.5}
.method-stage[data-state="5"] #g-nodes{opacity:0.35}
.method-stage[data-state="5"] #g-cues{opacity:0.3}
.method-stage[data-state="5"] #g-ruler{opacity:1}
.method-stage[data-state="5"] #g-checkpoint{opacity:1}
.method-stage[data-state="6"] #g-grid{opacity:1}
.method-stage[data-state="6"] #g-marks{opacity:1}
.method-stage[data-state="6"] #g-corners{opacity:0.6}
.method-stage[data-state="6"] #g-frame{opacity:1}
.method-stage[data-state="6"] #g-cells{opacity:1}
.method-stage[data-state="6"] #g-nodes{opacity:0.7}
.method-stage[data-state="6"] #g-ruler{opacity:1}
.method-stage[data-state="7"] #g-grid{opacity:1}
.method-stage[data-state="7"] #g-marks{opacity:1}
.method-stage[data-state="7"] #g-corners{opacity:0.6}
.method-stage[data-state="7"] #g-frame{opacity:1}
.method-stage[data-state="7"] #g-cells{opacity:1}
.method-stage[data-state="7"] #g-nodes{opacity:0.7}
.method-stage[data-state="7"] #g-ruler{opacity:1}
.method-stage[data-state="7"] #g-risk{opacity:1}
.method-stage[data-state="7"] #g-correction{opacity:1}
.method-stage[data-state="complete"] #g-grid{opacity:1}
.method-stage[data-state="complete"] #g-marks{opacity:1}
.method-stage[data-state="complete"] #g-corners{opacity:0.6}
.method-stage[data-state="complete"] #g-frame{opacity:1}
.method-stage[data-state="complete"] #g-cells{opacity:1}
.method-stage[data-state="complete"] #g-ruler{opacity:1}
.method-stage[data-state="complete"] #g-complete{opacity:1}
/* One-time trace: edges draw once when step 1 is shown, then settle. */
.method-stage svg #g-edge path{stroke-dasharray:1;stroke-dashoffset:1}
.method-stage[data-state="1"] #g-edge path{animation:pm-trace .7s ease forwards}
.method-stage[data-state="1"] #g-edge path:nth-child(2){animation-delay:.55s}
.method-stage[data-state="1"] #g-edge path:nth-child(3){animation-delay:1.1s}
.method-stage[data-state="1"] #g-edge path:nth-child(4){animation-delay:1.65s}
.method-stage[data-state="4"] #g-cues path{stroke-dasharray:1;stroke-dashoffset:1;animation:pm-trace 1.1s ease forwards}
@keyframes pm-trace{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.method-stage svg [id^="g-"]{transition:none}.method-stage svg #g-edge path,.method-stage svg #g-cues path{animation:none;stroke-dashoffset:0}}