.interactive-simulator {
  --comparison-0: #b66a12;
  --comparison-1: #8550bd;
  --comparison-2: #147f74;
}

.scenario-chart-frame {
  position: relative;
}

.interactive-simulator .scenario-comparison-line {
  fill: none;
  stroke: var(--comparison-color);
  pointer-events: none;
}

.interactive-simulator .scenario-comparison-line.is-selected {
  stroke-width: 4;
}

.scenario-comparison-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 22;
  pointer-events: stroke;
  cursor: pointer;
}

.scenario-comparison-hit:focus-visible {
  stroke: var(--comparison-color);
  stroke-opacity: 0.2;
}

.scenario-chart-frame .live-chart,
.scenario-chart-frame .scenario-comparison-hit {
  outline: 2px solid transparent;
}

.scenario-chart-frame :is(line, text, circle, .chart-current) {
  pointer-events: none;
}

.interactive-simulator .scenario-comparison-remove {
  position: absolute;
  z-index: 1;
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  place-items: center;
  padding: 0;
  border: 2px solid var(--comparison-color);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--comparison-color);
  font-size: 26px;
  line-height: 1;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.interactive-simulator .scenario-comparison-remove > span {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  font-size: 0;
  line-height: 0;
}

.scenario-comparison-remove > span::before,
.scenario-comparison-remove > span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  content: '';
}

.scenario-comparison-remove > span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.scenario-comparison-remove > span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.scenario-comparison-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block: 8px;
}

.interactive-simulator .scenario-comparison-key {
  display: inline-flex;
  width: auto;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 12px;
  cursor: pointer;
}

.interactive-simulator .scenario-comparison-key[aria-pressed='true'] {
  border-color: var(--comparison-color);
  box-shadow: inset 0 0 0 1px var(--comparison-color);
}

.scenario-comparison-key span {
  width: 20px;
  border-top: 3px dashed var(--comparison-color);
}

@media (prefers-color-scheme: dark) {
  .interactive-simulator {
    --comparison-0: #f5b24b;
    --comparison-1: #bf91ff;
    --comparison-2: #55cdb7;
  }
}