.chart-explanation {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--paper, var(--plate));
  font-size: 13px;
  line-height: 1.5;
}
.chart-explanation__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.chart-explanation button {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 8px 10px;
  min-height: 44px;
  background: var(--paper-2, var(--fill));
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.chart-explanation button:disabled { opacity: .55; cursor: default; }
.chart-explanation button:focus-visible,
.chart-explanation input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.chart-explanation input[type="range"] { display: block; width: 100%; min-height: 44px; margin: 4px 0; accent-color: var(--ac, var(--blue)); }
.chart-explanation__position { display: block; font-weight: 600; }
.chart-explanation .chart-explanation__caption { margin: 8px 0; font-size: 13px; max-width: none; }
.chart-explanation__preference { display: block; color: var(--muted); }
.explain-target { outline: 2px solid var(--ac, var(--blue)); outline-offset: 3px; }
svg .explain-target { outline: none; stroke-width: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .explain-target { animation: explain-attention 240ms ease-out; }
  @keyframes explain-attention { from { opacity: .65; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } }