/* generated by tools/build_demo_css.py */
@keyframes vp-win{0%,0.00%{opacity:0;transform:translateY(10px) scale(.99)}3.75%,91.25%{opacity:1;transform:none}95.62%,100%{opacity:0;transform:translateY(10px) scale(.99)}}
@keyframes vp-type{0%,2.50%{width:0}10.00%,91.25%{width:var(--cmd-w)}95.62%,100%{width:0}}
@keyframes vp-bar{0%,10.62%{transform:scaleX(0)}51.25%,91.25%{transform:scaleX(1)}95.62%,100%{transform:scaleX(0)}}
@keyframes vp-sum{0%,53.75%{opacity:0;transform:translateY(6px)}56.56%,91.25%{opacity:1;transform:none}95.62%,100%{opacity:0;transform:translateY(6px)}}
@keyframes vp-row0{0%,11.88%{opacity:0;transform:translateY(6px)}14.06%,91.25%{opacity:1;transform:none}95.62%,100%{opacity:0;transform:translateY(6px)}}
@keyframes vp-scan0{0%,12.50%{transform:translateX(-100%);opacity:0}12.81%{opacity:1}15.94%{transform:translateX(100%);opacity:1}16.25%,100%{transform:translateX(100%);opacity:0}}
@keyframes vp-mark0{0%,15.31%{background-size:0% 100%}16.88%,91.25%{background-size:100% 100%}95.62%,100%{background-size:0% 100%}}
@keyframes vp-tag0{0%,16.25%{opacity:0;transform:scale(.6)}17.81%,91.25%{opacity:1;transform:none}95.62%,100%{opacity:0;transform:scale(.6)}}
@keyframes vp-meth0{0%,17.81%{opacity:0;transform:translateX(-6px)}19.69%,91.25%{opacity:1;transform:none}95.62%,100%{opacity:0;transform:translateX(-6px)}}
.demo .r0{animation:vp-row0 16.0s infinite}.demo .r0 .scan{animation:vp-scan0 16.0s infinite linear}.demo .r0 mark{animation:vp-mark0 16.0s infinite}.demo .r0 .tag{animation:vp-tag0 16.0s infinite}.demo .r0 .meth{animation:vp-meth0 16.0s infinite}
@keyframes vp-row1{0%,18.44%{opacity:0;transform:translateY(6px)}20.62%,91.25%{opacity:1;transform:none}95.62%,100%{opacity:0;transform:translateY(6px)}}
@keyframes vp-scan1{0%,19.06%{transform:translateX(-100%);opacity:0}19.38%{opacity:1}22.50%{transform:translateX(100%);opacity:1}22.81%,100%{transform:translateX(100%);opacity:0}}
@keyframes vp-mark1{0%,21.88%{background-size:0% 100%}23.44%,91.25%{background-size:100% 100%}95.62%,100%{background-size:0% 100%}}
@keyframes vp-tag1{0%,22.81%{opacity:0;transform:scale(.6)}24.38%,91.25%{opacity:1;transform:none}95.62%,100%{opacity:0;transform:scale(.6)}}
@keyframes vp-meth1{0%,24.38%{opacity:0;transform:translateX(-6px)}26.25%,91.25%{opacity:1;transform:none}95.62%,100%{opacity:0;transform:translateX(-6px)}}
.demo .r1{animation:vp-row1 16.0s infinite}.demo .r1 .scan{animation:vp-scan1 16.0s infinite linear}.demo .r1 mark{animation:vp-mark1 16.0s infinite}.demo .r1 .tag{animation:vp-tag1 16.0s infinite}.demo .r1 .meth{animation:vp-meth1 16.0s infinite}
@keyframes vp-row2{0%,25.00%{opacity:0;transform:translateY(6px)}27.19%,91.25%{opacity:1;transform:none}95.62%,100%{opacity:0;transform:translateY(6px)}}
@keyframes vp-scan2{0%,25.62%{transform:translateX(-100%);opacity:0}25.94%{opacity:1}29.06%{transform:translateX(100%);opacity:1}29.38%,100%{transform:translateX(100%);opacity:0}}
@keyframes vp-mark2{0%,28.44%{background-size:0% 100%}30.00%,91.25%{background-size:100% 100%}95.62%,100%{background-size:0% 100%}}
@keyframes vp-tag2{0%,29.38%{opacity:0;transform:scale(.6)}30.94%,91.25%{opacity:1;transform:none}95.62%,100%{opacity:0;transform:scale(.6)}}
@keyframes vp-meth2{0%,30.94%{opacity:0;transform:translateX(-6px)}32.81%,91.25%{opacity:1;transform:none}95.62%,100%{opacity:0;transform:translateX(-6px)}}
.demo .r2{animation:vp-row2 16.0s infinite}.demo .r2 .scan{animation:vp-scan2 16.0s infinite linear}.demo .r2 mark{animation:vp-mark2 16.0s infinite}.demo .r2 .tag{animation:vp-tag2 16.0s infinite}.demo .r2 .meth{animation:vp-meth2 16.0s infinite}
@keyframes vp-row3{0%,31.56%{opacity:0;transform:translateY(6px)}33.75%,91.25%{opacity:1;transform:none}95.62%,100%{opacity:0;transform:translateY(6px)}}
@keyframes vp-scan3{0%,32.19%{transform:translateX(-100%);opacity:0}32.50%{opacity:1}35.63%{transform:translateX(100%);opacity:1}35.94%,100%{transform:translateX(100%);opacity:0}}
@keyframes vp-mark3{0%,35.00%{background-size:0% 100%}36.56%,91.25%{background-size:100% 100%}95.62%,100%{background-size:0% 100%}}
@keyframes vp-tag3{0%,35.94%{opacity:0;transform:scale(.6)}37.50%,91.25%{opacity:1;transform:none}95.62%,100%{opacity:0;transform:scale(.6)}}
@keyframes vp-meth3{0%,37.50%{opacity:0;transform:translateX(-6px)}39.38%,91.25%{opacity:1;transform:none}95.62%,100%{opacity:0;transform:translateX(-6px)}}
.demo .r3{animation:vp-row3 16.0s infinite}.demo .r3 .scan{animation:vp-scan3 16.0s infinite linear}.demo .r3 mark{animation:vp-mark3 16.0s infinite}.demo .r3 .tag{animation:vp-tag3 16.0s infinite}.demo .r3 .meth{animation:vp-meth3 16.0s infinite}
@keyframes vp-row4{0%,38.12%{opacity:0;transform:translateY(6px)}40.31%,91.25%{opacity:1;transform:none}95.62%,100%{opacity:0;transform:translateY(6px)}}
@keyframes vp-scan4{0%,38.75%{transform:translateX(-100%);opacity:0}39.06%{opacity:1}42.19%{transform:translateX(100%);opacity:1}42.50%,100%{transform:translateX(100%);opacity:0}}
@keyframes vp-mark4{0%,41.56%{background-size:0% 100%}43.12%,91.25%{background-size:100% 100%}95.62%,100%{background-size:0% 100%}}
@keyframes vp-tag4{0%,42.50%{opacity:0;transform:scale(.6)}44.06%,91.25%{opacity:1;transform:none}95.62%,100%{opacity:0;transform:scale(.6)}}
@keyframes vp-meth4{0%,44.06%{opacity:0;transform:translateX(-6px)}45.94%,91.25%{opacity:1;transform:none}95.62%,100%{opacity:0;transform:translateX(-6px)}}
.demo .r4{animation:vp-row4 16.0s infinite}.demo .r4 .scan{animation:vp-scan4 16.0s infinite linear}.demo .r4 mark{animation:vp-mark4 16.0s infinite}.demo .r4 .tag{animation:vp-tag4 16.0s infinite}.demo .r4 .meth{animation:vp-meth4 16.0s infinite}
@keyframes vp-row5{0%,44.69%{opacity:0;transform:translateY(6px)}46.88%,91.25%{opacity:1;transform:none}95.62%,100%{opacity:0;transform:translateY(6px)}}
@keyframes vp-scan5{0%,45.31%{transform:translateX(-100%);opacity:0}45.63%{opacity:1}48.75%{transform:translateX(100%);opacity:1}49.06%,100%{transform:translateX(100%);opacity:0}}
@keyframes vp-mark5{0%,48.12%{background-size:0% 100%}49.69%,91.25%{background-size:100% 100%}95.62%,100%{background-size:0% 100%}}
@keyframes vp-tag5{0%,49.06%{opacity:0;transform:scale(.6)}50.63%,91.25%{opacity:1;transform:none}95.62%,100%{opacity:0;transform:scale(.6)}}
@keyframes vp-meth5{0%,50.62%{opacity:0;transform:translateX(-6px)}52.50%,91.25%{opacity:1;transform:none}95.62%,100%{opacity:0;transform:translateX(-6px)}}
.demo .r5{animation:vp-row5 16.0s infinite}.demo .r5 .scan{animation:vp-scan5 16.0s infinite linear}.demo .r5 mark{animation:vp-mark5 16.0s infinite}.demo .r5 .tag{animation:vp-tag5 16.0s infinite}.demo .r5 .meth{animation:vp-meth5 16.0s infinite}
.demo{animation:vp-win 16.0s infinite}.demo .cmd-text{animation:vp-type 16.0s infinite steps(32)}.demo .progress i{animation:vp-bar 16.0s infinite linear}.demo .sum{animation:vp-sum 16.0s infinite}
@media (prefers-reduced-motion: reduce){.demo,.demo *{animation:none!important}.demo mark{background-size:100% 100%}.demo .cmd-text{width:var(--cmd-w)}.demo .progress i{transform:none}}