.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, .branch-grid {
      display: grid;
      gap: 12px;
    }
    .support-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .two-col, .branch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .formula-grid {
      display: grid;
      grid-template-columns: repeat(7, auto);
      align-items: stretch;
      justify-content: center;
      gap: 10px;
      padding: 16px;
      border: 1px solid var(--diagram-line);
      border-radius: 8px;
      background: var(--diagram-panel);
    }
    .formula-grid.compact { grid-template-columns: repeat(5, auto); }
    .value-block {
      display: grid;
      align-content: center;
      gap: 3px;
      min-width: 128px;
      padding: 12px;
      border: 1px solid var(--diagram-line);
      border-radius: 8px;
      background: var(--diagram-paper);
      text-align: center;
    }
    .value-block small { color: var(--diagram-muted); font-size: 11px; }
    .value-block strong { color: var(--diagram-text); font-size: 16px; }
    .value-block[data-focus="true"] strong { color: var(--track-strong, var(--track)); }
    .formula-op {
      display: grid;
      place-items: center;
      color: var(--track-strong, var(--track));
      font-size: 18px;
      font-weight: 850;
    }
    .axis {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 12px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--diagram-accent-bg), var(--diagram-panel));
      color: var(--diagram-muted);
      font-size: 11px;
      font-weight: 750;
    }
    .branch-root {
      display: grid;
      gap: 12px;
      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: -12px;
      left: 25%;
      right: 25%;
      height: 12px;
      border-top: 1px solid var(--diagram-line);
      border-left: 1px solid var(--diagram-line);
      border-right: 1px solid var(--diagram-line);
    }
    .branch {
      display: grid;
      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 112px;
      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: 112px 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; }
    .budget-map {
      display: grid;
      gap: 8px;
      padding: 16px;
      border: 1px solid var(--diagram-line);
      border-radius: 8px;
      background: var(--diagram-panel);
    }
    .budget-row {
      display: grid;
      grid-template-columns: 112px minmax(100px, 1fr) minmax(180px, 1.25fr);
      align-items: center;
      gap: 12px;
    }
    .budget-row strong { color: var(--diagram-text); font-size: 12px; }
    .budget-bar {
      height: 10px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--track), color-mix(in srgb, var(--track) 24%, var(--diagram-panel)));
    }
    .budget-row p { font-size: 12px !important; }
    .priority-list {
      display: grid;
      gap: 8px;
      padding: 8px 0;
    }
    .priority-row {
      display: grid;
      grid-template-columns: 34px minmax(140px, 0.55fr) minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border: 1px solid var(--diagram-line);
      border-left: 4px solid color-mix(in srgb, var(--track) var(--strength), var(--diagram-line));
      border-radius: 8px;
      background: var(--diagram-paper);
    }
    .priority-row b { color: var(--track-strong, var(--track)); text-align: center; }
    .priority-row strong { color: var(--diagram-text); font-size: 13px; }
    .priority-row span { 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, .branch-grid { grid-template-columns: 1fr; }
      .formula-grid, .formula-grid.compact { grid-template-columns: 1fr; }
      .formula-op { transform: rotate(90deg); }
      .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); }
      .budget-row { grid-template-columns: 84px minmax(0, 1fr); }
      .budget-row p { grid-column: 1 / -1; }
      .priority-row { grid-template-columns: 30px minmax(0, 1fr); }
      .priority-row span { grid-column: 1 / -1; }
    }