.flow{display:flex;align-items:stretch;gap:10px}.flow>[data-diagram-role="card"]{flex:1 1 0}.arrow{display:grid;place-items:center;align-self:center;flex:0 0 28px;width:28px;height:28px;border:1px solid var(--diagram-line);border-radius:999px;background:var(--diagram-paper);color:var(--track-strong);font-size:17px;font-weight:900}
.grid{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:12px}.matrix{display:grid}.row{display:grid;grid-template-columns:var(--row-cols,minmax(120px,.55fr) minmax(0,1fr) minmax(150px,.75fr))}.row>strong{color:var(--diagram-text)}.row>span,.row>code{color:var(--diagram-muted)}
.route{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px}.branch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.peer{display:grid;grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr);gap:12px;align-items:stretch}.lane{display:grid;place-content:center;gap:9px;text-align:center;color:var(--track-strong);font-weight:800}.meter{height:8px;border-radius:999px;background:var(--diagram-line);overflow:hidden}.meter>i{display:block;height:100%;width:var(--value);background:var(--track);border-radius:inherit}.label{color:var(--track-strong)!important;font-weight:800!important}.code-line{font-family:Consolas,"Cascadia Mono",monospace;color:var(--diagram-text)!important}
@media(max-width:720px){.flow{flex-direction:column}.arrow{transform:rotate(90deg)}.grid,.branch,.route,.peer{grid-template-columns:1fr}.row{grid-template-columns:1fr}.lane{min-height:70px}.peer .lane{transform:none}}