.sys{grid-template:"a ab b"". .bc"40px"d cd c"/minmax(0,1fr) 64px minmax(0,1fr);display:grid}@media (max-width:639px){.sys{grid-template:"a""ab"30px"b""bc"30px"c""cd"30px"d"/minmax(0,1fr)}}.sys3{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr) 48px minmax(0,1fr);grid-template-areas:"a ab b bc c";display:grid}.sys3 .node{min-height:8.5rem}@media (max-width:639px){.sys3{grid-template:"a""ab"30px"b""bc"30px"c"/minmax(0,1fr)}.sys3 .node{min-height:6.5rem}}.node{border-radius:var(--radius-media);min-height:8.75rem;display:grid;position:relative}.node>.node-layer{border-radius:inherit;transition:opacity .5s var(--ease-out-quart), transform .6s var(--ease-out-expo);grid-area:1/1}.node-drawn{border:1px dashed color-mix(in srgb, var(--draw) 55%, transparent);background:color-mix(in srgb, var(--bg) 70%, transparent)}.node-built{opacity:0;background:var(--surface);box-shadow:0 0 0 1px var(--line), 0 22px 40px -28px var(--shadow-tint);transform:translateY(6px)scale(.985)}.node[data-built=true] .node-built{opacity:1;transform:none}.node[data-built=true] .node-drawn{opacity:0}.node[data-active=true] .node-built{box-shadow:0 0 0 1px var(--draw), 0 22px 40px -24px var(--shadow-tint)}.node-drawn i{background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--draw) 45%, transparent) 0 5px, transparent 5px 9px);height:1px;margin-top:14px;display:block}.sys-wrap[data-drawn=false] .node-drawn{opacity:0;transform:scale(.97)}.sys-wrap[data-drawn=false] .node-label{opacity:0}.node-label{transition:opacity .5s var(--ease-out-quart) .5s}.conn{position:relative}.conn-line{background:repeating-linear-gradient(90deg, var(--draw) 0 4px, transparent 4px 8px);transition:transform .7s var(--ease-in-out-quart), opacity .4s;transition-delay:var(--d,0s);position:absolute}.conn[data-done=true] .conn-line{background:var(--draw)}.conn-head{border-top:1px solid var(--draw);border-right:1px solid var(--draw);width:7px;height:7px;transition:opacity .3s .55s;position:absolute}.conn-tok{opacity:0;pointer-events:none;position:absolute;inset:0}.conn-tok:after{content:"";background:var(--accent);width:9px;height:9px;box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);border-radius:50%;position:absolute}.conn[data-active=true] .conn-tok{opacity:1;animation:var(--tok-anim) var(--tok-dur,.6s) var(--ease-in-out-quart) forwards}.conn-r .conn-line{transform-origin:0;height:1px;top:50%;left:8px;right:8px}.conn-r .conn-head{top:calc(50% - 3.5px);right:9px;transform:rotate(45deg)}.conn-r .conn-tok{--tok-anim:tok-r}.conn-r .conn-tok:after{top:50%;right:8px;translate:50% -50%}.conn-l .conn-line{transform-origin:100%;height:1px;top:50%;left:8px;right:8px}.conn-l .conn-head{top:calc(50% - 3.5px);left:9px;transform:rotate(-135deg)}.conn-l .conn-tok{--tok-anim:tok-l}.conn-l .conn-tok:after{top:50%;left:8px;translate:-50% -50%}.conn-d .conn-line{transform-origin:top;background:repeating-linear-gradient(180deg, var(--draw) 0 4px, transparent 4px 8px);width:1px;top:6px;bottom:6px;left:50%}.conn-d[data-done=true] .conn-line{background:var(--draw)}.conn-d .conn-head{bottom:7px;left:calc(50% - 3.5px);transform:rotate(135deg)}.conn-d .conn-tok{--tok-anim:tok-d}.conn-d .conn-tok:after{bottom:6px;left:50%;translate:-50% 50%}@media (max-width:639px){.conn-r .conn-line,.conn-l .conn-line{transform-origin:top;background:repeating-linear-gradient(180deg, var(--draw) 0 4px, transparent 4px 8px);width:1px;height:auto;inset:6px auto 6px 50%}.conn-r[data-done=true] .conn-line,.conn-l[data-done=true] .conn-line{background:var(--draw)}.conn-r .conn-head,.conn-l .conn-head{inset:auto auto 7px calc(50% - 3.5px);transform:rotate(135deg)}.conn-r .conn-tok,.conn-l .conn-tok{--tok-anim:tok-d}.conn-r .conn-tok:after,.conn-l .conn-tok:after{inset:auto auto 6px 50%;translate:-50% 50%}}.sys-wrap[data-drawn=false] .conn-r .conn-line,.sys-wrap[data-drawn=false] .conn-l .conn-line{transform:scaleX(0)}.sys-wrap[data-drawn=false] .conn-d .conn-line{transform:scaleY(0)}@media (max-width:639px){.sys-wrap[data-drawn=false] .conn-r .conn-line,.sys-wrap[data-drawn=false] .conn-l .conn-line{transform:scaleY(0)}}.sys-wrap[data-drawn=false] .conn-head{opacity:0;transition-delay:0s}@keyframes tok-r{0%{transform:translate(calc(16px - 100%))}to{transform:none}}@keyframes tok-l{0%{transform:translate(calc(100% - 16px))}to{transform:none}}@keyframes tok-d{0%{transform:translateY(calc(12px - 100%))}to{transform:none}}.sys-hero .node-label{transition:none}.sys-hero .conn-r .conn-line,.sys-hero .conn-l .conn-line{animation:line-x .6s var(--ease-in-out-quart) both;animation-delay:calc(.15s + var(--d,0s))}.sys-hero .conn-d .conn-line{animation:line-y .6s var(--ease-in-out-quart) both;animation-delay:calc(.15s + var(--d,0s))}@media (max-width:639px){.sys-hero .conn-r .conn-line,.sys-hero .conn-l .conn-line{animation-name:line-y}}.dim.dim-hero:before{animation:line-x .9s var(--ease-in-out-quart) both;animation-delay:1.1s;transform:none}.dim.dim-hero>b,.dim.dim-hero>i{opacity:1;animation:.3s 1.1s both node-in}.dim.dim-hero>i{animation-delay:1.9s}.dim.dim-hero>span{opacity:1;transition:none;transform:none}@keyframes node-in{0%{opacity:0;transform:translateY(6px)scale(.985)}}@keyframes node-out{to{opacity:0}}@keyframes line-x{0%{transform:scaleX(0)}}@keyframes line-y{0%{transform:scaleY(0)}}@media (prefers-reduced-motion:reduce){.sys-hero .conn-line,.dim.dim-hero:before,.dim.dim-hero>*{animation:none}}html[data-a11y~=motion] .sys-hero .conn-line{animation:none}@media (min-width:1024px){.sys.sys-row{grid-template:"a ab b bc c cd d"/minmax(0,1fr) 56px minmax(0,1fr) 56px minmax(0,1fr) 56px minmax(0,1fr)}.sys-row .conn .conn-line{transform-origin:0;background:repeating-linear-gradient(90deg, var(--draw) 0 4px, transparent 4px 8px);width:auto;height:1px;inset:50% 8px auto}.sys-row .conn[data-done=true] .conn-line{background:var(--draw)}.sys-row .conn .conn-head{inset:calc(50% - 3.5px) 9px auto auto;transform:rotate(45deg)}.sys-row .conn .conn-tok{--tok-anim:tok-r}.sys-row .conn .conn-tok:after{inset:50% 8px auto auto;translate:50% -50%}.sys-hero .sys-row .conn .conn-line{animation-name:line-x}}.waiting-dot{background:var(--draw);border-radius:50%;width:6px;height:6px;animation:1.4s ease-in-out infinite waiting}@keyframes waiting{50%{opacity:.25}}@media (prefers-reduced-motion:reduce){.waiting-dot{animation:none}}.dim{justify-content:center;align-items:center;height:2.25rem;display:flex;position:relative}.dim:before{content:"";inset-inline:0;background:var(--draw);transform-origin:0;height:1px;transition:transform .9s var(--ease-in-out-quart);position:absolute;top:50%;transform:scaleX(0)}.dim>b,.dim>i{background:var(--draw);opacity:0;width:1px;height:12px;transition:opacity .3s;position:absolute;top:calc(50% - 6px)}.dim>b{left:0}.dim>i{transition-delay:.8s;right:0}.dim>span{background:var(--bg);opacity:0;transition:opacity .5s .5s, transform .6s .5s var(--ease-out-expo);padding-inline:.75rem;position:relative;transform:translateY(4px)}.dim[data-on=true]:before{transform:none}.dim[data-on=true]>b,.dim[data-on=true]>i,.dim[data-on=true]>span{opacity:1;transform:none}.runlog li{opacity:0;transition:opacity .4s var(--ease-out-quart), transform .5s var(--ease-out-expo);transform:translateY(6px)}.runlog li[data-on=true]{opacity:1;transform:none}.bubble{border-radius:12px;max-width:88%;padding:.5rem .7rem;font-size:.8125rem;line-height:1.4}.typing i{background:var(--fg-subtle);border-radius:50%;width:5px;height:5px;margin-inline:1.5px;animation:1s infinite typing;display:inline-block}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}@keyframes typing{0%,60%,to{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-2px)}}.caret:after{content:"";vertical-align:-.15em;background:var(--accent);width:1px;height:1em;margin-inline-start:1px;animation:.9s step-end infinite caret;display:inline-block}@keyframes caret{50%{opacity:0}}@media (prefers-reduced-motion:reduce){.node>.node-layer,.conn-line,.conn-head,.dim:before,.dim>*,.runlog li{transition:none}.typing i,.caret:after{animation:none}}