.diagram-flow { align-items: stretch; }
    .diagram-flow > [data-diagram-role="card"] { min-width: 0; }
    html body .diagram[data-diagram-system="v2"] .step-no {
      display: grid !important;
      place-items: center;
      width: 28px !important;
      height: 28px !important;
      padding: 0 !important;
      border: 1px solid color-mix(in srgb, var(--track) 36%, var(--diagram-line)) !important;
      border-radius: 999px !important;
      background: var(--diagram-accent-bg) !important;
      color: var(--track-strong, var(--track)) !important;
      font-size: 11px !important;
      font-weight: 850 !important;
      line-height: 1 !important;
    }
    .return-line {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 12px;
      color: var(--track-strong, var(--track));
      font-size: 12px;
      font-weight: 800;
      text-align: center;
    }
    .return-line::before, .return-line::after {
      content: "";
      height: 1px;
      background: var(--diagram-line);
    }
    .support-grid, .two-col, .three-col, .branch-grid {
      display: grid;
      gap: 12px;
    }
    .two-col, .branch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .support-grid, .three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .branch-root {
      display: grid;
      gap: 16px;
      padding: 16px;
      border: 1px solid var(--diagram-line);
      border-radius: 8px;
      background: var(--diagram-panel);
    }
    .branch-question {
      justify-self: center;
      padding: 10px 16px;
      border: 1px solid color-mix(in srgb, var(--track) 42%, var(--diagram-line));
      border-radius: 999px;
      background: var(--diagram-accent-bg);
      color: var(--diagram-text);
      font-weight: 850;
      text-align: center;
    }
    .branch-grid { position: relative; }
    .branch-grid::before {
      content: "";
      position: absolute;
      top: -16px;
      left: 25%;
      right: 25%;
      height: 16px;
      border-top: 1px solid var(--diagram-line);
      border-left: 1px solid var(--diagram-line);
      border-right: 1px solid var(--diagram-line);
    }
    .branch {
      display: grid;
      align-content: start;
      gap: 10px;
      padding: 16px;
      border: 1px solid var(--diagram-line);
      border-top: 3px solid color-mix(in srgb, var(--track) 68%, transparent);
      border-radius: 8px;
      background: var(--diagram-paper);
    }
    .branch h2 { font-size: 16px !important; }
    .route {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
    }
    .route-node {
      flex: 1 1 100px;
      min-width: 0;
      padding: 9px;
      border: 1px solid var(--diagram-line);
      border-radius: 7px;
      background: var(--diagram-panel);
      color: var(--diagram-text);
      font-size: 12px;
      font-weight: 750;
      text-align: center;
    }
    .route-arrow { color: var(--track-strong, var(--track)); font-weight: 850; }
    .swimlane {
      display: grid;
      overflow: hidden;
      border: 1px solid var(--diagram-line);
      border-radius: 8px;
      background: var(--diagram-paper);
    }
    .lane {
      display: grid;
      grid-template-columns: 118px minmax(0, 1fr);
      border-top: 1px solid var(--diagram-line);
    }
    .lane:first-child { border-top: 0; }
    .lane-label {
      display: grid;
      place-items: center;
      padding: 12px;
      background: var(--diagram-panel-strong);
      color: var(--diagram-text);
      font-size: 12px;
      font-weight: 850;
      text-align: center;
    }
    .lane-flow {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px;
    }
    .lane-node {
      flex: 1 1 0;
      padding: 10px;
      border: 1px solid var(--diagram-line);
      border-radius: 7px;
      background: var(--diagram-panel);
      color: var(--diagram-text);
      font-size: 12px;
      font-weight: 750;
      text-align: center;
    }
    .lane-arrow { color: var(--track-strong, var(--track)); font-weight: 850; }
    .stack {
      display: grid;
      gap: 0;
      overflow: hidden;
      border: 1px solid var(--diagram-line);
      border-radius: 8px;
      background: var(--diagram-paper);
    }
    .stack-row {
      display: grid;
      grid-template-columns: 150px minmax(0, 1fr) minmax(150px, 0.65fr);
      gap: 12px;
      align-items: center;
      padding: 12px;
      border-top: 1px solid var(--diagram-line);
    }
    .stack-row:first-child { border-top: 0; }
    .stack-row strong { color: var(--diagram-text); }
    .stack-row span, .stack-row p { color: var(--diagram-muted); font-size: 12px; }
    .matrix-table td:first-child { color: var(--diagram-text) !important; font-weight: 800; }
    @media (max-width: 720px) {
      .return-line { grid-template-columns: 1fr; }
      .return-line::before, .return-line::after { display: none; }
      .support-grid, .two-col, .three-col, .branch-grid { grid-template-columns: 1fr; }
      .branch-grid::before { display: none; }
      .route { display: grid; grid-template-columns: 1fr; }
      .route-arrow { justify-self: center; transform: rotate(90deg); }
      .lane { grid-template-columns: 1fr; }
      .lane-flow { flex-direction: column; align-items: stretch; }
      .lane-arrow { align-self: center; transform: rotate(90deg); }
      .stack-row { grid-template-columns: 1fr; gap: 5px; }
    }