.representation-explorer .ar-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr;
}
.representation-explorer .ar-panel {
  min-width: 0;
  padding: 0 8px;
}
.representation-explorer .ar-panel + .ar-panel {
  border-left: 1px solid var(--ae-divider, #e5e4e8);
}
.representation-explorer .ae-heading {
  min-height: 2.4em;
  margin-bottom: 16px;
  font-size: 22px;
}
.representation-explorer .ar-diagram {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.representation-explorer .ar-diagram text {
  fill: var(--ae-text, #101034);
  text-anchor: middle;
  dominant-baseline: middle;
  font: 22px Georgia, "Times New Roman", serif;
  pointer-events: none;
}
.representation-explorer .ar-operation,
.representation-explorer .ar-token {
  --ar-stroke: var(--ae-blue, #1263ae);
}
.representation-explorer .ar-operation:is(.is-active, .is-context),
.representation-explorer .ar-token:is(.is-active, .is-paired, .is-context) {
  --ar-stroke: var(--ae-purple, #704bc9);
}
.representation-explorer [data-select] {
  cursor: pointer;
  touch-action: manipulation;
}
.representation-explorer .ar-box {
  /* Shape-local fill attributes let color extensions distinguish backgrounds from text. */
  stroke: var(--ar-stroke);
  stroke-width: 1.5;
}
.representation-explorer .ar-merge {
  fill: url("#ar-merge-normal");
  stroke: var(--ar-stroke);
  stroke-width: 1.8;
}
.representation-explorer .ar-operation:is(.is-active, .is-context) .ar-merge {
  fill: url("#ar-merge-highlight");
}
.representation-explorer .ar-diagram .ar-plus {
  font-size: 30px;
}
.representation-explorer .ar-edge {
  fill: none;
  stroke: var(--ae-blue, #1263ae);
  stroke-width: 1.7;
}
.representation-explorer .ar-arrowhead {
  fill: context-stroke;
}
.representation-explorer .ar-scope,
.representation-explorer .ar-boundary-mark {
  fill: none;
  stroke: var(--ae-border, #c8c7ce);
  stroke-width: 1.5;
}
.representation-explorer .ar-scope {
  pointer-events: none;
}
.representation-explorer .ar-boundary-mark {
  stroke-width: 2;
}
.representation-explorer .ar-hit {
  fill: none;
  stroke: none;
  pointer-events: all;
}
.representation-explorer .ar-output {
  fill: none;
  stroke: var(--ae-border, #c8c7ce);
  stroke-width: 1.5;
}
.representation-explorer .ar-diagram .ar-output-label {
  fill: var(--ae-muted, #656078);
  font-size: 20px;
}
.representation-explorer .ar-tokens {
  position: relative;
  display: grid;
  row-gap: 7px;
  counter-reset: ar-token;
  list-style: none;
  margin: 0;
  padding: 0;
}
.representation-explorer .ar-tokens.has-scope::after {
  content: "";
  position: absolute;
  grid-column: 1;
  grid-row: var(--ar-scope-start) / var(--ar-scope-end);
  inset-block: 0;
  inset-inline-start: 0;
  border-left: 2px solid var(--ae-muted, #929292);
  pointer-events: none;
}
.representation-explorer .ar-tokens li {
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin: 0;
  padding-left: 6px;
}
.representation-explorer .ar-tokens li::before {
  counter-increment: ar-token;
  content: counter(ar-token);
  color: var(--ae-muted, #656078);
  text-align: center;
  font-size: 16px;
}
.representation-explorer .ar-token {
  display: block;
  width: 100%;
  min-height: 35px;
  padding: 5px 10px;
  border: 1.5px solid var(--ar-stroke);
  border-radius: 4px;
  background: var(--ae-fill-a, #d9ebfa);
  color: var(--ae-text, #101034);
  text-align: left;
  font: 17px/1.3 Georgia, "Times New Roman", serif;
}
.representation-explorer .ar-token:is(.is-active, .is-paired, .is-context) {
  background: var(--ae-fill-b, #e9dff8);
}
.representation-explorer .is-context .ar-edge,
.representation-explorer .ar-edge.is-context {
  stroke: var(--ae-purple, #704bc9);
}
.representation-explorer .ar-scope.is-context {
  stroke: var(--ae-muted, #656078);
  stroke-width: 2;
}
.representation-explorer .is-paired .ar-boundary-mark {
  stroke: var(--ae-muted, #656078);
  stroke-width: 2.5;
  stroke-dasharray: 4 3;
}
.representation-explorer .is-active .ar-boundary-mark {
  stroke: var(--ae-text, #101034);
  stroke-width: 3.5;
}
.representation-explorer [data-select]:focus-visible,
.representation-explorer .ar-clear:focus-visible {
  outline: 2px solid var(--ae-focus, #514db1);
  outline-offset: 5px;
}
.representation-explorer .ar-help {
  margin: 20px 0 8px;
  color: var(--ae-muted, #656078);
  text-align: center;
  font: 14px/1.5 Georgia, "Times New Roman", serif;
}
.representation-explorer .ar-feedback {
  display: flex;
  align-items: center;
  gap: 16px;
}
.representation-explorer .ar-status {
  flex: 1;
  min-height: 4.5em;
  margin: 0;
  color: var(--ae-text, #101034);
  font: 15px/1.5 Georgia, "Times New Roman", serif;
}
.representation-explorer .ar-clear {
  flex: none;
  padding: 7px 10px;
  border: 1px solid var(--ae-border, #c8c7ce);
  border-radius: 4px;
  background: var(--ae-surface, #fff);
  color: var(--ae-text, #101034);
  font: 14px Georgia, "Times New Roman", serif;
  cursor: pointer;
}
.representation-explorer .ar-clear:disabled {
  cursor: default;
}
@media (max-width: 720px) {
  .representation-explorer {
    padding: 22px 8px 16px;
  }
  .representation-explorer .ar-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .representation-explorer .ar-panel + .ar-panel {
    border-left: 0;
    border-top: 1px solid var(--ae-divider, #e5e4e8);
    padding-top: 24px;
  }
  .representation-explorer .ae-heading {
    min-height: 0;
    font-size: 22px;
  }
  .representation-explorer .ar-diagram {
    max-width: 340px;
    margin: 0 auto;
  }
  .representation-explorer .ar-tokens {
    max-width: 280px;
    margin: 0 auto;
  }
  .representation-explorer .ar-token {
    min-height: 44px;
    font-size: 18px;
  }
  .representation-explorer .ar-feedback {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .representation-explorer .ar-status {
    min-height: 6em;
  }
  .representation-explorer .ar-clear {
    align-self: center;
    min-height: 44px;
  }
}