.flow, .pipeline, .sequence, .timeline, .lifecycle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
    .tree, .topology, .boundary, .decision { 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 { grid-template-columns: 1fr; }
    }
    [data-diagram-role="group"] {
      margin-top: 22px;
      padding: 22px;
      border: 1px solid var(--diagram-line);
      border-radius: 18px;
      background: var(--diagram-panel);
    }
    [data-diagram-role="group"] > [data-diagram-role="card"] {
      display: grid;
      min-height: 112px;
      align-content: center;
      gap: 8px;
      padding: 18px;
      background: var(--diagram-paper);
      box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    }
    [data-diagram-role="group"] > [data-diagram-role="card"] > strong {
      font-size: 16px;
      line-height: 1.35;
    }
    [data-diagram-role="group"] > [data-diagram-role="card"] > p {
      margin: 0;
      font-size: 13px;
      line-height: 1.55;
    }
    [data-visual-sequence] > [data-diagram-role="card"]:first-child {
      box-shadow: inset 4px 0 0 var(--track-strong), 0 10px 24px rgba(15, 23, 42, .06);
    }
    [data-visual-sequence] > [data-diagram-role="card"]:last-child {
      background: var(--diagram-success-bg);
      box-shadow: inset -4px 0 0 var(--diagram-success), 0 10px 24px rgba(15, 23, 42, .06);
    }
    [data-visual-relation] > [data-diagram-role="card"] {
      min-height: 120px;
    }
    [data-visual-comparison] > [data-diagram-role="card"] {
      min-height: 128px;
    }
    @media (max-width: 640px) {
      [data-diagram-role="group"] {
        margin-top: 16px;
        padding: 14px;
      }
      [data-diagram-role="group"] > [data-diagram-role="card"] {
        min-height: 86px;
        padding: 14px;
      }
    }

    .diagram[data-diagram-system="v2"] [data-diagram-role="group"] {
      padding: 24px !important;
    }
    .diagram[data-diagram-system="v2"] [data-diagram-role="group"] > [data-diagram-role="card"] {
      display: grid !important;
      min-height: 132px !important;
      align-content: center !important;
      gap: 10px !important;
      padding: 20px !important;
      background: var(--diagram-paper) !important;
    }
    .diagram[data-diagram-system="v2"] [data-visual-comparison] > [data-diagram-role="card"] {
      min-height: 148px !important;
    }
    .diagram[data-diagram-system="v2"] .diagram-relation {
      gap: 36px !important;
    }
    .diagram[data-diagram-system="v2"] .diagram-relation__root,
    .diagram[data-diagram-system="v2"] .diagram-relation__branch {
      min-height: 120px !important;
      padding: 18px !important;
    }
    .diagram[data-diagram-system="v2"] [data-visual-sequence] > *:not(:last-child)::after {
      font-size: 24px !important;
      right: -20px !important;
    }
    @media (max-width: 640px) {
      .diagram[data-diagram-system="v2"] [data-diagram-role="group"] {
        padding: 14px !important;
      }
      .diagram[data-diagram-system="v2"] [data-diagram-role="group"] > [data-diagram-role="card"],
      .diagram[data-diagram-system="v2"] .diagram-relation__root,
      .diagram[data-diagram-system="v2"] .diagram-relation__branch {
        min-height: 92px !important;
        padding: 15px !important;
      }
      .diagram[data-diagram-system="v2"] [data-visual-sequence] > *:not(:last-child)::after {
        right: auto !important;
      }
    }

    .diagram[data-diagram-system="v2"] [data-diagram-role="group"][data-diagram-layout][data-visual-sequence] {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    @media (max-width: 640px) {
      .diagram[data-diagram-system="v2"] [data-diagram-role="group"][data-diagram-layout][data-visual-sequence] {
        grid-template-columns: 1fr !important;
      }
    }