.graphic-motion{--gm-signal:var(--brand-red);--gm-ink:var(--dark-surface-ink);--gm-surface:var(--surface-dark);--gm-rule:var(--dark-surface-line)}.gm-control .control-flow-step{border-radius:4px;transition:border-color .22s}.gm-control .control-flow-label{letter-spacing:.12em}.gm-control .control-flow-step>svg{transition:color .22s}.gm-control .control-flow-connector{min-height:24px;overflow:hidden}.gm-control .control-flow-connector:after{content:"";background:var(--gm-signal);opacity:0;pointer-events:none;width:10px;height:2px;position:absolute;top:calc(50% - 1px);left:0}.gm-control .control-flow-stop-line{background:repeating-linear-gradient(to right,var(--gm-rule) 0 4px,transparent 4px 8px);border:0;height:2px;position:relative;overflow:hidden}.gm-control .control-flow-stop-line:after{content:"";background:var(--gm-signal);transform-origin:0;position:absolute;inset:0}.gm-control .control-flow-stop{border-radius:2px}.gm-software .sw-arch{background:0 0;border:0;padding:0}.gm-software .sw-arch-chain{align-items:stretch;gap:12px}.gm-software .sw-arch-node{background:var(--gm-surface);min-height:108px;transition:border-color .22s,background .22s}.gm-software .sw-arch-node strong{overflow-wrap:normal;line-height:1.25}.gm-software .sw-arch-node span{line-height:1.5}.gm-software .tx-arrow{flex-shrink:0;min-height:24px;position:relative;overflow:hidden}.gm-software .tx-arrow:before{content:"";background:var(--gm-rule);width:1px;position:absolute;inset:0 auto 0 50%}.gm-software .tx-arrow:after{content:"";background:var(--gm-signal);opacity:0;pointer-events:none;width:2px;height:8px;position:absolute;top:0;left:calc(50% - 1px)}.gm-software .tx-arrow svg{background:var(--gm-surface);position:relative;transform:rotate(90deg)}.gm-software .sw-arch-connect{border-color:var(--gm-rule);margin-top:16px;padding-top:32px;position:relative}.gm-software .sw-arch-connect:before{content:"";background:var(--gm-signal);transform-origin:0;height:1px;position:absolute;top:-1px;left:0;right:0}.gm-software .sw-arch-plant span{letter-spacing:.12em;font-size:12px;font-weight:700}.graphic-motion :focus-visible{outline:2px solid var(--gm-signal);outline-offset:4px}@media (hover:hover){.gm-control .control-flow-step:hover{border-color:var(--gm-signal)}.gm-control .control-flow-step:hover>svg{color:var(--gm-signal)}.gm-software .sw-arch-node:hover{border-color:var(--gm-signal);background:color-mix(in oklab,var(--gm-ink) 4%,var(--gm-surface))}}@media (width>=1024px){.gm-software .tx-arrow{width:22px}.gm-software .tx-arrow svg{transform:none}.gm-software .tx-arrow:before{width:auto;height:1px;inset:50% 0 auto}.gm-software .tx-arrow:after{width:8px;height:2px;top:calc(50% - 1px);left:0}}@media (width<=767px){.gm-control .control-flow-connector{width:24px;left:calc(50% - 12px)}.gm-control .control-flow-connector:after{width:2px;height:8px;top:0;left:calc(50% - 1px)}.gm-software .sw-arch-plant{gap:10px}}@media (prefers-reduced-motion:no-preference){.graphic-motion.is-entered .control-flow-step,.graphic-motion.is-entered .sw-arch-chain>li:not(.tx-arrow){animation:.65s cubic-bezier(.22,1,.36,1) both gm-enter}.gm-control .control-flow-step:nth-child(2){animation-delay:.12s}.gm-control .control-flow-step:nth-child(3){animation-delay:.24s}.gm-software .sw-arch-chain>li:nth-child(3){animation-delay:90ms}.gm-software .sw-arch-chain>li:nth-child(5){animation-delay:.18s}.gm-software .sw-arch-chain>li:nth-child(7){animation-delay:.27s}.gm-software .sw-arch-chain>li:nth-child(9){animation-delay:.36s}.gm-software .sw-arch-chain>li:nth-child(11){animation-delay:.45s}.graphic-motion.is-entered .control-flow-step>svg{animation:.8s ease-out both gm-icon}.graphic-motion.is-entered .control-flow-connector:after{animation:1.6s ease-in-out .4s 2 both gm-horizontal}.graphic-motion.is-entered .control-flow-step:nth-child(2) .control-flow-connector:after{animation-delay:.65s}.graphic-motion.is-entered .tx-arrow:after{animation:1.6s ease-in-out .4s 2 both gm-vertical}.graphic-motion.is-entered .sw-arch-connect:before,.graphic-motion.is-entered .control-flow-stop-line:after{animation:1s cubic-bezier(.22,1,.36,1) .6s both gm-trace}.graphic-motion.is-entered .control-flow-bypass>svg{animation:.8s ease-out .5s both gm-icon}.graphic-motion:not(.is-visible) *,.graphic-motion:not(.is-visible) :before,.graphic-motion:not(.is-visible) :after{animation-play-state:paused}@media (width>=1024px){.graphic-motion.is-entered .tx-arrow:after{animation-name:gm-horizontal}}@media (width<=767px){.graphic-motion.is-entered .control-flow-connector:after{animation-name:gm-vertical}}}@keyframes gm-enter{0%{opacity:.55;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes gm-icon{0%{stroke-dasharray:60;stroke-dashoffset:60px}to{stroke-dasharray:60;stroke-dashoffset:0}}@keyframes gm-horizontal{0%{opacity:0;transform:translate(-10px)}20%,70%{opacity:1}to{opacity:0;transform:translate(48px)}}@keyframes gm-vertical{0%{opacity:0;transform:translateY(-8px)}20%,70%{opacity:1}to{opacity:0;transform:translateY(32px)}}@keyframes gm-trace{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@media (prefers-reduced-motion:reduce){.graphic-motion *,.graphic-motion :before,.graphic-motion :after{transition:none!important;animation:none!important}.graphic-motion .control-flow-step,.graphic-motion .sw-arch-chain>li{opacity:1;transform:none}.graphic-motion .control-flow-connector svg{animation:none}}