/* GENERATED by scripts/gen_demo_css.py - do not edit by hand. Hero demo timeline, 14 s loop.
   Only opacity and transform change (plus left/top on two tiny elements). */
.demo{--T:14s}
.demo .stage,.demo .crumbs span,.demo .sb-item::before,.demo .frow,.demo .stt em,.demo .frow .pbar b,.demo .dz,
.demo .drag,.demo .cur,.demo .paper::after,.demo .skel,.demo .thead,.demo .tr1,.demo .tr2,.demo .tr3,.demo .tr4,
.demo .bx,.demo .chk,.demo .exp,.demo .exp .btn-x,.demo .toast{animation-duration:var(--T);animation-timing-function:linear;
  animation-iteration-count:infinite;animation-fill-mode:both}
.demo.paused *,.demo.paused *::before,.demo.paused *::after{animation-play-state:paused}
@keyframes s1{0%,0.357%{opacity:0;transform:translateY(6px)}2.857%,28.571%{opacity:1;transform:none}31.429%,100%{opacity:0;transform:translateY(6px)}}
@keyframes s2{0%,30.0%{opacity:0;transform:translateY(0px)}32.5%,94.286%{opacity:1;transform:none}97.143%,100%{opacity:0;transform:translateY(0px)}}
@keyframes c1{0%,0.357%{opacity:0;transform:translateY(0px)}2.857%,30.0%{opacity:1;transform:none}32.857%,100%{opacity:0;transform:translateY(0px)}}
@keyframes c2{0%,30.0%{opacity:0;transform:translateY(0px)}32.5%,97.143%{opacity:1;transform:none}100.0%,100%{opacity:0;transform:translateY(0px)}}
@keyframes n1{0%,0.357%{opacity:0;transform:translateY(0px)}2.857%,30.0%{opacity:1;transform:none}32.857%,100%{opacity:0;transform:translateY(0px)}}
@keyframes n2{0%,30.0%{opacity:0;transform:translateY(0px)}32.5%,97.143%{opacity:1;transform:none}100.0%,100%{opacity:0;transform:translateY(0px)}}
@keyframes frow{0%,13.571%{opacity:0;transform:translateY(6px)}16.071%,28.571%{opacity:1;transform:none}31.429%,100%{opacity:0;transform:translateY(6px)}}
@keyframes t1{0%,13.571%{opacity:0;transform:translateY(0px)}16.071%,24.286%{opacity:1;transform:none}27.143%,100%{opacity:0;transform:translateY(0px)}}
@keyframes t2{0%,24.286%{opacity:0;transform:translateY(0px)}26.786%,28.571%{opacity:1;transform:none}31.429%,100%{opacity:0;transform:translateY(0px)}}
@keyframes barfill{0%,13.571%{transform:scaleX(0)}23.571%,100%{transform:scaleX(1)}}
@keyframes dzflash{0%,11.429%{border-color:var(--bd2);background:var(--soft);color:var(--muted)}12.857%{border-color:var(--acc);background:#cfe3f9;color:var(--acc)}17.857%,100%{border-color:var(--bd2);background:var(--soft);color:var(--muted)}}
@keyframes dragmove{0%,3.571%{left:90%;top:6%;opacity:0;transform:scale(1)}5.714%{opacity:1}12.143%{left:46%;top:44%;opacity:1;transform:scale(1)}13.214%{left:46%;top:44%;opacity:0;transform:scale(.85)}100%{opacity:0}}
@keyframes curmove{0%,3.571%{left:88%;top:3%;opacity:0;transform:scale(1)}5.714%{opacity:1}12.143%{left:44%;top:41%;opacity:1}14.286%{left:44%;top:41%;opacity:0}80.0%{left:74%;top:58%;opacity:0;transform:scale(1)}81.786%{left:74%;top:58%;opacity:1}85.714%{left:56%;top:84%;opacity:1;transform:scale(1)}86.571%{left:56%;top:84%;transform:scale(.8)}87.857%{left:56%;top:84%;transform:scale(1)}90.714%,100%{left:56%;top:84%;opacity:0}}
@keyframes scan{0%,30.714%{transform:translateY(0);opacity:0}31.786%{opacity:1}42.143%{transform:translateY(290px);opacity:1}43.214%,100%{transform:translateY(290px);opacity:0}}
@keyframes skel{0%,31.429%{opacity:0;transform:translateY(0px)}33.929%,42.143%{opacity:1;transform:none}45.0%,100%{opacity:0;transform:translateY(0px)}}
@keyframes thead{0%,42.143%{opacity:0;transform:translateY(0px)}44.643%,97.143%{opacity:1;transform:none}100.0%,100%{opacity:0;transform:translateY(0px)}}
@keyframes tr1{0%,42.857%{opacity:0;transform:translateY(0px)}45.357%,97.143%{opacity:1;transform:none}100.0%,100%{opacity:0;transform:translateY(0px)}}
@keyframes bx1{0%,42.857%{opacity:0;transform:translateY(0px)}45.357%,76.429%{opacity:1;transform:none}79.286%,100%{opacity:0;transform:translateY(0px)}}
@keyframes tr2{0%,47.857%{opacity:0;transform:translateY(0px)}50.357%,97.143%{opacity:1;transform:none}100.0%,100%{opacity:0;transform:translateY(0px)}}
@keyframes bx2{0%,47.857%{opacity:0;transform:translateY(0px)}50.357%,76.429%{opacity:1;transform:none}79.286%,100%{opacity:0;transform:translateY(0px)}}
@keyframes tr3{0%,52.857%{opacity:0;transform:translateY(0px)}55.357%,97.143%{opacity:1;transform:none}100.0%,100%{opacity:0;transform:translateY(0px)}}
@keyframes bx3{0%,52.857%{opacity:0;transform:translateY(0px)}55.357%,76.429%{opacity:1;transform:none}79.286%,100%{opacity:0;transform:translateY(0px)}}
@keyframes tr4{0%,57.857%{opacity:0;transform:translateY(0px)}60.357%,97.143%{opacity:1;transform:none}100.0%,100%{opacity:0;transform:translateY(0px)}}
@keyframes bx4{0%,57.857%{opacity:0;transform:translateY(0px)}60.357%,76.429%{opacity:1;transform:none}79.286%,100%{opacity:0;transform:translateY(0px)}}
@keyframes chk1{0%,63.571%{opacity:0;transform:translateY(6px)}66.071%,97.143%{opacity:1;transform:none}100.0%,100%{opacity:0;transform:translateY(6px)}}
@keyframes chk2{0%,67.857%{opacity:0;transform:translateY(6px)}70.357%,97.143%{opacity:1;transform:none}100.0%,100%{opacity:0;transform:translateY(6px)}}
@keyframes chk3{0%,72.143%{opacity:0;transform:translateY(6px)}74.643%,97.143%{opacity:1;transform:none}100.0%,100%{opacity:0;transform:translateY(6px)}}
@keyframes warnflash{0%,72.143%{background:transparent}73.929%{background:var(--warnsoft)}78.571%,100%{background:transparent}}
@keyframes bxw{0%,72.143%{opacity:0;transform:translateY(0px)}74.643%,88.571%{opacity:1;transform:none}91.429%,100%{opacity:0;transform:translateY(0px)}}
@keyframes exp{0%,78.571%{opacity:0;transform:translateY(6px)}81.071%,97.143%{opacity:1;transform:none}100.0%,100%{opacity:0;transform:translateY(6px)}}
@keyframes press{0%,85.714%{transform:none;background:var(--btn)}86.571%{transform:scale(.93);background:var(--btn-press)}87.857%,100%{transform:none;background:var(--btn)}}
@keyframes toast{0%,87.5%{opacity:0;transform:translateY(10px)}90.0%,95.0%{opacity:1;transform:none}97.857%,100%{opacity:0;transform:translateY(10px)}}
.demo .stage.s1{animation-name:s1}
.demo .stage.s2{animation-name:s2}
.demo .crumbs .c1{animation-name:c1}
.demo .crumbs .c2{animation-name:c2}
.demo .sb-item.n1::before{animation-name:n1}
.demo .sb-item.n2::before{animation-name:n2}
.demo .frow{animation-name:frow}
.demo .stt .t1{animation-name:t1}
.demo .stt .t2{animation-name:t2}
.demo .frow .pbar b{animation-name:barfill}
.demo .dz{animation-name:dzflash}
.demo .drag{animation-name:dragmove}
.demo .cur{animation-name:curmove}
.demo .paper::after{animation-name:scan}
.demo .skel{animation-name:skel}
.demo .thead{animation-name:thead}
.demo .tr1{animation-name:tr1}
.demo .bx1{animation-name:bx1}
.demo .tr2{animation-name:tr2}
.demo .bx2{animation-name:bx2}
.demo .tr3{animation-name:tr3}
.demo .bx3{animation-name:bx3}
.demo .tr4{animation-name:tr4}
.demo .bx4{animation-name:bx4}
.demo .chk1{animation-name:chk1}
.demo .chk2{animation-name:chk2}
.demo .chk3{animation-name:chk3}
.demo .chk3{animation-name:chk3,warnflash}
.demo .bxw{animation-name:bxw}
.demo .exp{animation-name:exp}
.demo .exp .btn-x{animation-name:press}
.demo .toast{animation-name:toast}