.branch-order-figure p {
  margin: 12px 0;
  font-size: 17px;
  text-align: center;
}
.branch-order-figure .bo-note {
  color: var(--ae-muted, #656078);
  font-size: 16px;
  line-height: 1.45;
}
.branch-order-figure .bo-trees {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
  align-items: center;
}
.branch-order-figure .bo-tree svg {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
}
.branch-order-figure .bo-tree text {
  fill: var(--ae-text, #101034);
  text-anchor: middle;
  dominant-baseline: middle;
  font: 22px Georgia, "Times New Roman", serif;
}
.branch-order-figure .bo-tree .bo-variable {
  font-size: 26px;
  font-style: italic;
}
.branch-order-figure .bo-node {
  stroke: var(--ae-blue, #1263ae);
  stroke-width: 1.5;
}
.branch-order-figure .bo-node.bo-highlight {
  stroke: var(--ae-purple, #704bc9);
}
.branch-order-figure .bo-edge {
  fill: none;
  stroke: var(--ae-blue, #1263ae);
  stroke-width: 1.7;
}
.branch-order-figure .bo-arrowhead {
  fill: context-stroke;
}
.branch-order-figure .bo-sequence-label {
  margin: 8px 0;
  font-size: 22px;
}
.branch-order-figure .bo-equivalence {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ae-muted, #656078);
  font-size: 16px;
  gap: 2px;
}
.branch-order-figure .bo-swap {
  color: var(--ae-text, #101034);
  font-size: 36px;
}
.branch-order-figure .bo-sequences {
  margin-top: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--ae-divider, #e5e4e8);
}
.branch-order-figure .ae-heading {
  text-align: left;
  font-size: 22px;
}
.branch-order-figure .bo-sequence-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 18px 0;
}
.branch-order-figure .bo-tokens {
  display: grid;
  grid-template-columns: 1.5fr 0.7fr 1.3fr 0.7fr 0.7fr 1.3fr 0.7fr;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.branch-order-figure .bo-tokens li {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 42px;
  padding: 2px;
  border: 1.5px solid var(--ae-blue, #1263ae);
  border-radius: 4px;
  background: var(--ae-fill-a, #d9ebfa);
  font-size: 21px;
}
.branch-order-figure .bo-tokens .bo-highlight {
  border-color: var(--ae-purple, #704bc9);
  background: var(--ae-fill-b, #e9dff8);
}
@media (max-width: 650px) {
  .branch-order-figure .bo-trees {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .branch-order-figure .bo-equivalence {
    flex-direction: row;
    justify-content: center;
    gap: 12px;
  }
  .branch-order-figure .bo-swap {
    transform: rotate(90deg);
  }
  .branch-order-figure .bo-sequence-row {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
  }
  .branch-order-figure .bo-tokens {
    gap: 4px;
  }
  .branch-order-figure .bo-tokens li {
    min-height: 38px;
    font-size: 18px;
  }
}