
    .flow, .pipeline, .sequence, .lifecycle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
    .tree, .boundary, .decision { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .relationship { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; }
    @media (max-width: 640px) { .flow, .pipeline, .sequence, .lifecycle, .tree, .boundary, .decision, .relationship { grid-template-columns: 1fr; } }
  