#demo1{--demo1-cycles:8;--demo1-dash-length:8;--demo1-path-length:300;--demo1-anim-length:308;--demo1-anim-time:8s}#demo3{--demo3-box-height:10em;--demo3-anim-time:1s}#demo5{--demo5-path-length:4000;--demo5-anim-time:13s}div>button{width:9em}#demo1 svg{height:3em;width:100%}#demo1-dash,#demo1-path{fill:transparent;stroke:var(--primary)}#demo1-path{display:inherit;opacity:.2}#demo1-dash{stroke:var(--primary);stroke-dasharray:var(--demo1-dash-length)var(--demo1-path-length);transition:calc(var(--demo1-anim-time)/var(--demo1-cycles))stroke-dasharray ease;animation:demo1 var(--demo1-anim-time)linear 0s infinite}#demo1-path.js-hide{display:none}#demo1-dash.js-shrink{stroke-dasharray:3 8}@keyframes demo1{from{stroke-dashoffset:var(--demo1-anim-length)}to{stroke-dashoffset:0}}#demo2-nav{display:flex;flex-wrap:wrap}#demo2-nav a{background:var(--dark-bg);display:block;flex:1 0 auto;line-height:initial;margin:0 .5px;padding:.5em 1em}#demo2-nav a:hover,#demo2-nav a:focus-visible,#demo2-nav a:active{background:var(--dark-bg-hl);cursor:pointer;text-decoration:none}#demo2-nav.js,#demo2-nav.js a{width:10em}#demo3>div{display:flex}#demo3-height,#demo3-xform,#demo3-slide{flex:1;font-size:.5em;height:var(--demo3-box-height);line-height:1.25em;margin:0 .1em;overflow:hidden;padding:.25em .5em;text-align:justify;border:1px solid var(--primary)}#demo3-height{transition:max-height var(--demo3-anim-time)linear;max-height:var(--demo3-box-height)}#demo3-xform{transition:transform var(--demo3-anim-time)linear;transform-origin:top}#demo3-slide{transition:top var(--demo3-anim-time)linear;position:relative;top:0}#demo3-height.js-hide{max-height:0}#demo3-xform.js-hide{transform:scaleY(0)}#demo3-slide.js-hide{top:calc(-1 * var(--demo3-box-height))}#demo5 svg{display:block;height:4em;width:100%}#demo5 path{fill:none;stroke:var(--bgcolor);stroke-width:.6%}#demo5 path:first-child{stroke:var(--green);stroke-width:.3%;stroke-dashoffset:0;stroke-dasharray:var(--demo5-path-length)var(--demo5-path-length);transition:stroke-dashoffset var(--demo5-anim-time)cubic-bezier(1,1,.75,.99)}#demo5.js-hide path:first-child{stroke-dashoffset:var(--demo5-path-length);transition:initial}@media print{#demo1,#demo2,#demo3,#demo4,#demo5{display:none}}