/* A 450ms, self-contained action. Parts keep their physical relationships. */
.studio-rail{--icon-cycle:450ms;--icon-ease:ease-in-out}
.navigation-icon [data-act]{transform-box:view-box;transform-origin:12px 12px}
.rail-link{--icon-surface:#e8edde}
.developer-shell .rail-link{--icon-surface:#eae5f2}
.rail-link.selected{--icon-surface:var(--paper)}
.rail-link:hover{--icon-surface:#d8e2ca}
.developer-shell .rail-link:hover{--icon-surface:var(--lilac)}
.studio-rail .rail-link.selected{--icon-surface:var(--paper)}
.rail-link [data-pocket],.rail-link [data-knob]{fill:var(--icon-surface);transition:fill var(--fast)}
.navigation-icon [data-act=deposit],.navigation-icon [data-act=surprise],.navigation-icon [data-act=run-head],.navigation-icon [data-act=run-track]{opacity:0}
.navigation-icon [data-act=packet]{transform:scale(.7)}
.navigation-icon [data-act=turn-page]{fill:var(--paper);transform-origin:12px 12px}
.rail-link[data-motion=running] [data-act]{animation-duration:var(--icon-cycle);animation-timing-function:var(--icon-ease);animation-fill-mode:both;animation-iteration-count:1}
.rail-link[data-motion=running] :is([data-act=write-one],[data-act=write-two],[data-act=develop],[data-act=verify]){stroke-dasharray:1;animation-name:nav-write}
.rail-link[data-motion=running] [data-act=write-two]{animation-name:nav-write-second}
.rail-link[data-motion=running] [data-act=expose]{animation-name:nav-expose}
.rail-link[data-motion=running] [data-act=file-in]{animation-name:nav-file-in}
.rail-link[data-motion=running] [data-act=rewind]{animation-name:nav-rewind}
.rail-link[data-motion=running] [data-act=unwrap]{animation-name:nav-unwrap}
.rail-link[data-motion=running] [data-act=surprise]{animation-name:nav-surprise}
.rail-link[data-motion=running] [data-act=deposit]{animation-name:nav-deposit}
.rail-link[data-motion=running] [data-act=packet]{animation-name:nav-packet}
.rail-link[data-motion=running] [data-act=adjust-one]{animation-name:nav-adjust-one}
.rail-link[data-motion=running] [data-act=adjust-two]{animation-name:nav-adjust-two}
.rail-link[data-motion=running] [data-act=run-track]{animation-name:nav-track}
.rail-link[data-motion=running] [data-act=run-head]{animation-name:nav-run}
.rail-link[data-motion=running] [data-act^=choose]{animation-name:nav-choose;fill:currentColor;fill-opacity:0}
.rail-link[data-motion=running] [data-act=choose-two]{animation-name:nav-choose-two}
.rail-link[data-motion=running] [data-act=choose-three]{animation-name:nav-choose-three}
.rail-link[data-motion=running] [data-act=choose-four]{animation-name:nav-choose-four}
.rail-link[data-motion=running] [data-act=turn-page]{animation-name:nav-turn}
@keyframes nav-write{0%{stroke-dashoffset:1}55%,100%{stroke-dashoffset:0}}
@keyframes nav-write-second{0%,25%{stroke-dashoffset:1}80%,100%{stroke-dashoffset:0}}
@keyframes nav-expose{0%{opacity:.15}60%,100%{opacity:1}}
@keyframes nav-file-in{0%,12%{transform:translateY(0)}55%,72%{transform:translateY(5px)}100%{transform:none}}
@keyframes nav-rewind{0%{transform:rotate(0)}100%{transform:rotate(-360deg)}}
@keyframes nav-unwrap{0%,100%{transform:none}33%,66%{transform:translateY(-3px)}}
@keyframes nav-surprise{0%,20%,100%{opacity:0;transform:none}45%,65%{opacity:1;transform:translateY(-3px)}}
@keyframes nav-deposit{0%,100%{opacity:0;transform:translateY(-2px)}20%{opacity:1;transform:translateY(-2px)}75%{opacity:1;transform:translateY(6px)}}
@keyframes nav-packet{0%,100%{opacity:1;transform:translateX(0) scale(.7)}20%{opacity:0;transform:translateX(-6px) scale(.7)}40%{opacity:1;transform:translateX(-6px) scale(.7)}75%{opacity:1;transform:translateX(6px) scale(.7)}85%{opacity:0;transform:translateX(6px) scale(.7)}}
@keyframes nav-adjust-one{0%,100%{transform:none}33%,66%{transform:translateX(5px)}}
@keyframes nav-adjust-two{0%,30%,100%{transform:none}60%,72%{transform:translateX(-5px)}}
@keyframes nav-track{0%,100%{opacity:0}20%,80%{opacity:.4}}
@keyframes nav-run{0%,100%{opacity:0;transform:none}15%{opacity:1;transform:none}85%{opacity:1;transform:translateX(16px)}}
@keyframes nav-choose{0%,35%,100%{fill-opacity:0}10%,25%{fill-opacity:.6}}
@keyframes nav-choose-two{0%,20%,55%,100%{fill-opacity:0}32%,45%{fill-opacity:.6}}
@keyframes nav-choose-three{0%,40%,75%,100%{fill-opacity:0}52%,65%{fill-opacity:.6}}
@keyframes nav-choose-four{0%,60%,100%{fill-opacity:0}72%,85%{fill-opacity:.6}}
@keyframes nav-turn{0%,100%{transform:perspective(80px) rotateY(0)}45%,65%{transform:perspective(80px) rotateY(-160deg)}}
@media(prefers-reduced-motion:reduce){.studio-rail .navigation-icon [data-act]{animation:none!important}}
.reduce-motion .studio-rail .navigation-icon [data-act]{animation:none!important}