.elixir-plot {
  --plot-bg: #101522;
  --plot-text: #f0f3ff;
  --plot-muted: #b4bfd3;
  --plot-grid: #39455e;
  --plot-mint: #82e6c1;
  --plot-accent: #ae9bff;
  margin: 20px 0;
  padding: 20px;
  background: var(--plot-bg);
  color: var(--plot-text);
  border: 1px solid var(--plot-grid);
  border-radius: 16px;
}
.elixir-plot figcaption { font: 600 17px/1.4 system-ui, sans-serif; }
.elixir-plot > svg { display: block; width: 100%; height: auto; margin: 12px 0; overflow: visible; }
.elixir-plot text { fill: var(--plot-muted); font: 14px system-ui, sans-serif; }
.elixir-plot__grid { stroke: var(--plot-grid); stroke-width: 1; }
.elixir-plot__axis { stroke: var(--plot-muted); stroke-width: 1; }
.elixir-plot__bar { fill: var(--plot-mint); }
.elixir-plot__line { fill: none; stroke: var(--plot-mint); stroke-width: 3; stroke-linejoin: round; }
.elixir-plot__guide { stroke: var(--plot-accent); stroke-dasharray: 4 6; }
.elixir-plot__dot { fill: var(--plot-accent); stroke: var(--plot-bg); stroke-width: 2; }
.elixir-plot__controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font: 15px/1.5 system-ui, sans-serif; }
.elixir-plot label { flex: 1 1 180px; }
.elixir-plot input { display: block; width: 100%; accent-color: var(--plot-accent); }
.elixir-plot output { color: var(--plot-mint); font-variant-numeric: tabular-nums; }
.elixir-plot button { color: var(--plot-text); border: 1px solid var(--plot-grid); background: var(--plot-bg); }
.elixir-plot :focus-visible { outline: 2px solid var(--plot-accent); outline-offset: 3px; }
.code-run--plot .code-run__stream { max-height: 180px; overflow-y: auto; }
@media (max-width: 700px) { .elixir-plot { padding: 12px; } }