.alignment-figure {
  --aa-cost-0: #eef7fd;
  --aa-cost-1: #d9ebfa;
  --aa-cost-2: #a8d0ec;
  --aa-cost-3: #6fadda;
  --aa-cost-4: #347fb9;
  --aa-cost-5: #12578b;
}
.alignment-figure [hidden] {
  display: none;
}
.alignment-figure .aa-top {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(160px, 1fr);
  gap: 24px;
}
.alignment-figure .aa-top > section {
  min-width: 0;
}
.alignment-figure .ae-heading {
  text-align: left;
  font-size: 22px;
}
.alignment-figure .aa-matrix {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
}
.alignment-figure svg text {
  fill: var(--ae-text, #101034);
  text-anchor: middle;
  dominant-baseline: middle;
  font: 14px Georgia, "Times New Roman", serif;
  pointer-events: none;
}
.alignment-figure .aa-axis-title {
  font-size: 17px;
}
.alignment-figure .aa-column-label {
  text-anchor: start;
  dominant-baseline: auto;
}
.alignment-figure .aa-row-label {
  text-anchor: end;
}
.alignment-figure .aa-cell {
  cursor: help;
  touch-action: manipulation;
  outline: none;
}
.alignment-figure .aa-cell rect {
  stroke: var(--ae-surface, #fff);
  stroke-width: 0.8;
}
.alignment-figure .aa-cell.is-inspected rect {
  stroke: var(--ae-text, #101034);
  stroke-width: 1.5;
}
.alignment-figure .aa-cell:focus-visible rect {
  stroke: var(--ae-focus, #514db1);
  stroke-width: 2.5;
}
.alignment-figure .aa-overlay {
  pointer-events: none;
}
.alignment-figure .aa-grid-border {
  fill: none;
  stroke: var(--ae-border, #c8c7ce);
}
.alignment-figure .aa-path,
.alignment-figure .aa-step {
  fill: none;
  stroke: var(--ae-text, #101034);
  stroke-width: 2.5;
}
.alignment-figure .aa-path-dots,
.alignment-figure .aa-edit-mark circle {
  fill: var(--ae-text, #101034);
}
.alignment-figure .aa-edit-mark.is-selected .aa-step {
  stroke: var(--ae-purple, #704bc9);
  marker-end: url("#aa-move-arrow");
}
.alignment-figure .aa-edit-mark.is-selected circle {
  fill: var(--ae-purple, #704bc9);
}
.alignment-figure .aa-arrowhead {
  fill: context-stroke;
}
.alignment-figure .aa-incoming path {
  fill: none;
  stroke: var(--ae-muted, #656078);
  stroke-width: 1.4;
  stroke-dasharray: 3 3;
  marker-end: url("#aa-move-arrow");
}
.alignment-figure .aa-incoming circle {
  stroke: var(--ae-muted, #656078);
  stroke-width: 1.2;
}
.alignment-figure .aa-selected-cell {
  fill: none;
  stroke: var(--ae-purple, #704bc9);
  stroke-width: 2;
}
.alignment-figure .aa-cost-tooltip rect {
  stroke: var(--ae-border, #c8c7ce);
}
.alignment-figure .aa-cost-tooltip text {
  font-size: 15px;
}
.alignment-figure .aa-selection {
  border-left: 1px solid var(--ae-divider, #e5e4e8);
  padding-left: 20px;
}
.alignment-figure .aa-selection .ae-heading {
  padding-bottom: 15px;
  border-bottom: 1px solid var(--ae-divider, #e5e4e8);
}
.alignment-figure .aa-edits {
  display: grid;
  gap: 12px;
  margin-top: 25px;
}
.alignment-figure .aa-edit {
  display: block;
  width: 100%;
  padding: 13px 10px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--ae-text, #101034);
  text-align: left;
  font: 21px/1.3 Georgia, "Times New Roman", serif;
  cursor: pointer;
  touch-action: manipulation;
}
.alignment-figure .aa-edit:disabled {
  opacity: 1;
  cursor: default;
}
.alignment-figure .aa-edit:not(:disabled):not([aria-pressed="true"]):hover {
  background: var(--ae-fill-a, #d9ebfa);
}
.alignment-figure .aa-edit[aria-pressed="true"] {
  background: var(--ae-fill-b, #e9dff8);
  color: var(--ae-purple, #704bc9);
}
.alignment-figure .aa-retained {
  display: block;
  visibility: hidden;
  margin-top: 5px;
  font-size: 14px;
}
.alignment-figure .aa-edit[aria-pressed="true"] .aa-retained {
  visibility: visible;
}
.alignment-figure .aa-parents {
  margin-top: 22px;
  padding-top: 12px;
  border-top: 1px solid var(--ae-divider, #e5e4e8);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.alignment-figure .aa-parents svg {
  display: block;
  width: 100%;
  min-width: 620px;
  height: auto;
}
.alignment-figure .aa-parents:focus-visible {
  outline: 2px solid var(--ae-focus, #514db1);
  outline-offset: 3px;
}
.alignment-figure .aa-parents text {
  font-size: 15px;
}
.alignment-figure .aa-parents .aa-parent-label {
  font-size: 23px;
  font-style: italic;
}
.alignment-figure .aa-node {
  stroke: var(--ae-blue, #1263ae);
  stroke-width: 1.5;
}
.alignment-figure .is-selected .aa-node {
  stroke: var(--ae-purple, #704bc9);
}
.alignment-figure .aa-network-edges path {
  fill: none;
  stroke: var(--ae-blue, #1263ae);
  stroke-width: 1.7;
  marker-end: url("#aa-network-arrow");
}
.alignment-figure .aa-endpoints {
  fill: var(--ae-muted, #929292);
}
.alignment-figure .aa-endpoint-labels text,
.alignment-figure .aa-gap text {
  fill: var(--ae-muted, #656078);
  font-size: 14px;
}
.alignment-figure .aa-gap path {
  stroke: var(--ae-purple, #704bc9);
  stroke-width: 2.5;
}
.alignment-figure .aa-gap text {
  fill: var(--ae-purple, #704bc9);
}
.alignment-figure .aa-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 650px) {
  .alignment-figure .aa-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .alignment-figure .aa-selection {
    border-left: 0;
    padding-left: 0;
  }
  .alignment-figure .aa-edits {
    gap: 4px;
    margin-top: 0;
  }
  .alignment-figure .aa-edit {
    padding: 10px 12px;
  }
}
@media (prefers-color-scheme: dark) {
  .alignment-figure {
    --aa-cost-0: #1c2530;
    --aa-cost-1: #20364a;
    --aa-cost-2: #254c68;
    --aa-cost-3: #2b6388;
    --aa-cost-4: #357fb0;
    --aa-cost-5: #4a9acc;
  }
}