.challenge-tool-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: -1px 0 8px;
  color: #708394;
  font: 800 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em;
}

.challenge-tool-legend span {
  padding: 3px 6px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
}

.challenge-tool-legend .is-called {
  color: #72e7ff;
  border-color: rgba(91,225,255,.34);
}

.challenge-tool-legend .is-locked {
  color: #ffd27c;
  border-color: rgba(255,205,106,.34);
}

.challenge-tool-legend .is-refused {
  color: #ff9cab;
  border-color: rgba(255,106,130,.34);
}

.semantic-tool-chip {
  position: relative;
}

.semantic-tool-chip.is-called,
.semantic-tool-chip.is-resolved {
  border-color: rgba(91,225,255,.56);
  color: #e9fbff;
  background: rgba(24,120,148,.18);
  box-shadow: inset 0 0 0 1px rgba(91,225,255,.08);
}

.semantic-tool-chip.is-locked {
  border-color: rgba(255,205,106,.48);
  color: #ffe3a9;
  background: rgba(126,83,16,.16);
}

.semantic-tool-chip.is-refused,
.semantic-tool-chip.is-error {
  border-color: rgba(255,106,130,.52);
  color: #ffc2cb;
  background: rgba(133,24,45,.18);
}

.semantic-tool-chip.is-live {
  outline: 2px solid rgba(255,255,255,.88);
  outline-offset: 2px;
}

.challenge-tool-state {
  display: block;
  margin-top: 3px;
  color: currentColor;
  opacity: .72;
  font: 800 7px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
}

.semantic-tool-group.is-dialogue {
  border-color: rgba(178,122,255,.22);
  background: rgba(54,31,88,.13);
}

.semantic-tool-group.is-dialogue h4 {
  color: #cdb1ff;
}