.sys{--sys-req:var(--color-status-info);--sys-ai:var(--color-status-sim);--sys-res:var(--color-status-active)}.sys-band{position:static}.sys-band-cloud{background:#f5f4ef}.sys-routes{z-index:0}.sys-cloud-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1.5rem;display:flex}.sys-boundary{--flash:0;z-index:1;background:repeating-linear-gradient(90deg, var(--color-hairline) 0 4px, transparent 4px 9px);height:1px;position:relative}.sys-boundary:after{content:"";background:repeating-linear-gradient(90deg, var(--sys-req) 0 4px, transparent 4px 9px);opacity:var(--flash);position:absolute;inset:0}.sys-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:2.5rem 1rem;display:grid}.sys-erp,.sys-extension,.sys-writeback,.sys-django,.sys-fastapi,.sys-model{grid-column:1/-1}.sys-lane-0{grid-column:1/5}.sys-lane-1{grid-column:5/9}.sys-lane-2{grid-column:9/13}@media (min-width:64rem){.sys:not([data-static]) .sys-grid{gap:2.75rem 1.25rem}.sys:not([data-static]) .sys-erp{grid-area:1/1/auto/6}.sys:not([data-static]) .sys-writeback{grid-area:1/10/auto/13}.sys:not([data-static]) .sys-extension{grid-area:2/1/auto/10}.sys:not([data-static]) .sys-lane-0{grid-area:3/1/auto/4}.sys:not([data-static]) .sys-lane-1{grid-area:3/4/auto/7}.sys:not([data-static]) .sys-lane-2{grid-area:3/7/auto/10}.sys:not([data-static]) .sys-django{grid-area:1/1/auto/6}.sys:not([data-static]) .sys-fastapi{grid-area:1/6/auto/10}.sys:not([data-static]) .sys-model{grid-area:2/2/auto/8}}.sys[data-static] .sys-grid{position:relative}.sys[data-static] .sys-grid:before{content:"";background:var(--color-hairline);width:1px;position:absolute;top:0;bottom:0;left:24px}.sys-node{--on:0;--acc:var(--sys-req);z-index:1;border-color:color-mix(in srgb, var(--acc) calc(var(--on) * 80%), var(--color-hairline));background-color:color-mix(in srgb, #fff calc(70% + var(--on) * 30%), var(--color-paper));transform:translateY(calc(var(--on) * -3px));will-change:transform;position:relative}.sys-model{--acc:var(--sys-ai)}.sys-writeback{--acc:var(--sys-res)}.sys-erp{--acc:var(--color-ink)}.sys-node:after{content:"";pointer-events:none;box-shadow:0 16px 38px -14px color-mix(in srgb, var(--acc) 48%, transparent);opacity:var(--on);position:absolute;inset:0}.sys-node-name{color:color-mix(in srgb, var(--acc) calc(var(--on) * 100%), var(--color-ink))}.sys-band-cloud .sys-node{background-color:color-mix(in srgb, #fff calc(76% + var(--on) * 24%), #f5f4ef)}.sys-lane{text-align:center;color:color-mix(in srgb, var(--acc) calc(var(--on) * 100%), var(--color-muted));border:1px solid;justify-content:center;align-items:center;padding:.6rem .5rem;display:flex}.sys-field{gap:.375rem;display:grid}.sys-line{background:var(--color-hairline);height:2px}.sys-line:first-child{width:100%}.sys-line:nth-child(2){width:76%}.sys-erp{--done:0}.sys-line-live{transform-origin:0;background:color-mix(in srgb, var(--sys-res) calc(var(--done) * 100%), color-mix(in srgb, var(--sys-req) calc(var(--on) * 90%), var(--color-hairline)));width:52%}.sys-check{--tick:0;color:color-mix(in srgb, var(--acc) calc(var(--tick) * 100%), var(--color-muted));align-items:center;gap:.5rem;display:flex}.sys-check-box{border:1px solid color-mix(in srgb, var(--acc) calc(var(--tick) * 90%), var(--color-hairline));flex:none;width:.625rem;height:.625rem;position:relative}.sys-check-box:after{content:"";background:var(--acc);transform:scale(var(--tick));position:absolute;inset:2px}.sys-work{background:var(--color-hairline);height:2px;display:block}.sys-work-fill{background:var(--acc);transform-origin:0;height:100%;display:block;transform:scaleX(0)}.sys [data-tone=req] .sys-draw,.sys [data-tone=req] .sys-packet,.sys [data-tone=req] .sys-tip{stroke:var(--sys-req)}.sys [data-tone=res] .sys-draw,.sys [data-tone=res] .sys-packet,.sys [data-tone=res] .sys-tip{stroke:var(--sys-res)}.sys .sys-packet{opacity:0}.sys .sys-tip{transform-box:fill-box;transform-origin:50%}.sys-legend{border-top:1px solid var(--color-hairline);flex-wrap:wrap;gap:.5rem 1.5rem;padding:.85rem 1.25rem;display:flex}.sys-legend-item{align-items:center;gap:.5rem;display:inline-flex}.sys-legend-swatch{background:var(--color-hairline);width:.5rem;height:.5rem}.sys-legend-item[data-tone=req] .sys-legend-swatch{background:var(--sys-req)}.sys-legend-item[data-tone=ai] .sys-legend-swatch{background:var(--sys-ai)}.sys-legend-item[data-tone=res] .sys-legend-swatch{background:var(--sys-res)}