[data-step-part=hbar],[data-step-part=done],[data-step-part^=pointer],[data-step-part=note],[data-step-part=hover],[data-step-part=ph]{opacity:0}[data-step-part=hbar]{transform-origin:0}@media screen and (prefers-reduced-motion:no-preference){[data-steps-armed] [data-step-part=""],[data-steps-armed] [data-step-part=drop],[data-steps-armed] [data-step-part=fill]{opacity:0}[data-steps-armed] [data-step-part=ph]{opacity:1}[data-steps-armed] [data-step-part=switch]{background-color:var(--color-app-ui-line)}[data-steps-armed] [data-step-part=switch]:after{transform:translateX(calc(var(--spacing) * -4))}[data-step-play]{--wait:0s}[data-step-play=wait]{--wait:var(--duration-slow)}[data-step-play=lead]{--wait:calc(2 * var(--duration-slow))}[data-steps-armed] [data-step-card]{transition:border-color var(--duration-base) var(--ease-in-out)}[data-step-play]:not([data-step-done]){border-color:var(--color-draw-ink)}[data-step-play] [data-step-part]{animation:steps-rise var(--duration-slow) var(--ease-in-out) both;animation-delay:calc(var(--wait) + var(--at,0) * var(--duration-base))}[data-step-play] [data-step-part=drop]{animation-name:steps-drop}[data-step-play] [data-step-part=label]{animation-name:steps-label}[data-step-play] [data-step-part=hbar]{animation-name:steps-hbar;animation-duration:calc(var(--len) * var(--duration-base));animation-timing-function:linear}[data-step-play] [data-step-part=done]{animation-name:steps-done;animation-duration:var(--duration-slow)}[data-step-play] [data-step-part=ph]{animation-name:steps-out;animation-duration:var(--duration-fast)}[data-step-play] [data-step-part=fill]{animation-name:steps-in}[data-step-play] [data-step-part=hover]{animation-name:steps-hover;animation-duration:calc(var(--dur) * var(--duration-base))}[data-step-play] [data-step-part=pointer]{animation-name:steps-pointer;animation-duration:calc(3 * var(--duration-slower))}[data-step-play] [data-step-part=press]{animation-name:steps-press;animation-duration:var(--duration-base)}[data-step-play] [data-step-part=pointer2]{animation-name:steps-pointer2;animation-duration:calc(13 * var(--duration-base))}[data-step-play] [data-step-part=press2]{animation-name:steps-press2;animation-duration:calc(13 * var(--duration-base))}[data-step-play] [data-step-part=switch]{animation-name:steps-switch;animation-duration:var(--duration-fast)}[data-step-play] [data-step-part=switch]:after{animation:steps-knob var(--duration-fast) var(--ease-in-out) both;animation-delay:calc(var(--wait) + var(--at,0) * var(--duration-base))}}@keyframes steps-rise{0%{opacity:0;transform:translateY(calc(var(--spacing) * 3))}to{opacity:1;transform:none}}@keyframes steps-out{0%{opacity:1}to{opacity:0}}@keyframes steps-in{0%{opacity:0}to{opacity:1}}@keyframes steps-drop{0%{opacity:0;transform:translateY(calc(var(--spacing) * -3))}to{opacity:1;transform:none}}@keyframes steps-label{0%{color:var(--color-draw-ink-muted)}to{color:var(--color-draw-ink)}}@keyframes steps-hbar{0%{opacity:1;background-color:var(--color-brand-orange);transform:scaleX(0)}92%{opacity:1;background-color:var(--color-brand-orange);transform:scaleX(1)}to{opacity:1;background-color:var(--color-state-success);transform:scaleX(1)}}@keyframes steps-done{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.15)}to{opacity:1;transform:none}}@keyframes steps-hover{0%,to{opacity:0}15%,85%{opacity:.12}}@keyframes steps-pointer{0%{opacity:0;transform:translate(calc(var(--spacing) * 8), calc(var(--spacing) * 8))}15%{opacity:1}50%{transform:none}58%{transform:scale(.85)}66%{transform:none}85%{opacity:1}to{opacity:0;transform:none}}@keyframes steps-press{50%{transform:scale(.96)}}@keyframes steps-pointer2{0%{opacity:0;transform:translate(calc(var(--spacing) * 6), calc(var(--spacing) * 6))}11%{opacity:1;transform:none}17%,22%,43%,49%,58%{transform:none}19%,46%{transform:scale(.85)}73%,78%,84%{transform:translate(var(--dx,0px), var(--dy,0px))}81%{transform:translate(var(--dx,0px), var(--dy,0px)) scale(.85)}92%{opacity:1;transform:translate(var(--dx,0px), var(--dy,0px))}to{opacity:0;transform:translate(var(--dx,0px), var(--dy,0px))}}@keyframes steps-press2{0%,17%,22%,43%,49%,to{transform:none}19%,46%{transform:scale(.94)}}@keyframes steps-switch{0%{background-color:var(--color-app-ui-line)}to{background-color:var(--color-app-ui-blue)}}@keyframes steps-knob{0%{transform:translateX(calc(var(--spacing) * -4))}to{transform:none}}