.flow, .pipeline, .sequence, .timeline, .lifecycle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
    .tree, .topology, .boundary, .decision, .branch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .layers { display: grid; grid-template-columns: 1fr; gap: 18px; }
    @media (max-width: 640px) {
      .flow, .pipeline, .sequence, .timeline, .lifecycle, .tree, .topology, .boundary, .decision, .branch { grid-template-columns: 1fr; }
    }