/* GENERATED from line-icons.css by the integration — do not hand-edit.
   The set animates on hover only. The selected nav row is never hovered, so its
   motion is mirrored here and set to repeat: that is what marks the page you are
   on. Every time value is scaled x2.9 — the same motion, played slow, because at
   full speed on a permanent loop it reads as a flicker. Reduced motion still
   switches all of it off. */
html[data-skin="studio"] .sidenav a.active .li{--li-dur:1.80s}
@media (prefers-reduced-motion: no-preference) {
html[data-skin="studio"] .sidenav a.active .li--build > svg > *{stroke-dasharray: 1;
  animation: li-draw var(--li-dur) cubic-bezier(.6,.05,.3,1) both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--build > svg > :nth-child(2){animation-delay: 0.17s}
html[data-skin="studio"] .sidenav a.active .li--build > svg > :nth-child(3){animation-delay: 0.35s}
html[data-skin="studio"] .sidenav a.active .li--build > svg > :nth-child(4){animation-delay: 0.52s}
html[data-skin="studio"] .sidenav a.active .li--build > svg > :nth-child(n+5){animation-delay: 0.70s}
html[data-skin="studio"] .sidenav a.active .li--tick > svg > :last-child{stroke-dasharray: 1;
  animation: li-draw 0.99s 0.29s cubic-bezier(.5,0,.3,1) both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--takeoff > svg{animation: li-takeoff 1.91s cubic-bezier(.4,0,.2,1) both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--drive > svg{animation: li-drive 1.74s cubic-bezier(.45,0,.25,1) both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--sail > svg{animation: li-sail 2.61s ease-in-out both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--spin > svg{animation: li-spin 2.03s cubic-bezier(.5,0,.2,1) both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--turn > svg{animation: li-turn 1.74s cubic-bezier(.4,1.4,.5,1) both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--hunt > svg{animation: li-hunt 2.32s ease-in-out both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--lid > svg > :nth-child(-n+2){animation: li-lid 1.68s cubic-bezier(.4,1.3,.5,1) both;
  transform-origin: right center;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--open > svg{animation: li-open 1.68s cubic-bezier(.4,1.2,.5,1) both;
  transform-origin: 20% 50%;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--climb > svg > *{animation: li-climb 1.59s cubic-bezier(.4,0,.2,1) both;
  transform-origin: center bottom;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--climb > svg > :nth-child(2){animation-delay: 0.20s}
html[data-skin="studio"] .sidenav a.active .li--climb > svg > :nth-child(n+3){animation-delay: 0.41s}
html[data-skin="studio"] .sidenav a.active .li--lift > svg{animation: li-lift 1.59s cubic-bezier(.4,1.3,.5,1) both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--drop > svg{animation: li-drop 1.74s cubic-bezier(.35,1.5,.5,1) both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--grow > svg{animation: li-grow 1.45s cubic-bezier(.35,1.6,.5,1) both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--twinkle > svg{animation: li-twinkle 1.80s cubic-bezier(.4,1.4,.5,1) both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--beat > svg{animation: li-beat 2.03s ease-in-out both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--toss > svg{animation: li-toss 1.97s cubic-bezier(.35,1.3,.5,1) both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--flash > svg{animation: li-flash 1.59s ease-out both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--shout > svg{animation: li-shout 1.97s ease-in-out both; transform-origin: 25% 50%;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--wave > svg{animation: li-wave 2.32s ease-in-out both; transform-origin: 20% 80%;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--alert > svg{animation: li-alert 1.74s ease-in-out both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--write > svg > :first-child{animation: li-write 1.80s cubic-bezier(.4,0,.3,1) both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--write > svg > :last-child{animation: li-write 1.80s 0.12s cubic-bezier(.4,0,.3,1) both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--draw > svg > *{stroke-dasharray: 1; animation: li-draw 1.74s cubic-bezier(.5,0,.3,1) both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--dab > svg > :nth-child(n+2){animation: li-grow 1.45s cubic-bezier(.35,1.6,.5,1) both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--dab > svg > :nth-child(3){animation-delay: 0.17s}
html[data-skin="studio"] .sidenav a.active .li--dab > svg > :nth-child(4){animation-delay: 0.35s}
html[data-skin="studio"] .sidenav a.active .li--dab > svg > :nth-child(n+5){animation-delay: 0.52s}
html[data-skin="studio"] .sidenav a.active .li--scan > svg > *{animation: li-scan 2.32s ease-in-out both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--scan > svg > :nth-child(even){animation-delay: 0.26s}
html[data-skin="studio"] .sidenav a.active .li--buzz > svg{animation: li-buzz 1.45s linear both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--tick-tock > svg > :last-child{animation: li-tick-tock 2.03s cubic-bezier(.4,1.5,.5,1) both;
  transform-origin: bottom left;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--lock > svg > *{animation: li-lock 1.74s cubic-bezier(.35,1.4,.5,1) both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--lock > svg > :nth-child(2){animation-delay: 0.17s}
html[data-skin="studio"] .sidenav a.active .li--lock > svg > :nth-child(n+3){animation-delay: 0.35s}
html[data-skin="studio"] .sidenav a.active .li--gather > svg > *{animation: li-gather 1.59s cubic-bezier(.35,1.4,.5,1) both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--gather > svg > :nth-child(2){animation-delay: 0.20s}
html[data-skin="studio"] .sidenav a.active .li--gather > svg > :nth-child(n+3){animation-delay: 0.41s}
html[data-skin="studio"] .sidenav a.active .li--stack > svg > *{animation: li-stack 1.45s cubic-bezier(.35,1.4,.5,1) both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--stack > svg > :nth-child(2){animation-delay: 0.23s}
html[data-skin="studio"] .sidenav a.active .li--stack > svg > :nth-child(n+3){animation-delay: 0.46s}
html[data-skin="studio"] .sidenav a.active .li--shake > svg{animation: li-shake 1.74s ease-in-out both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--exit > svg > :nth-child(n+2){animation: li-exit 1.68s cubic-bezier(.4,0,.25,1) both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--link > svg > :first-child{animation: li-link-a 1.68s cubic-bezier(.4,1.3,.5,1) both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--link > svg > :last-child{animation: li-link-b 1.68s cubic-bezier(.4,1.3,.5,1) both;animation-iteration-count:infinite}
}
html[data-skin="studio"] .sidenav a.active .li--talk > svg > *{animation: li-talk 1.7s cubic-bezier(.35,1.4,.5,1) both;animation-iteration-count:infinite}
html[data-skin="studio"] .sidenav a.active .li--talk > svg > :nth-child(2){animation-delay: 0.28s}