/* Shared palette for the post's embedded charts. */
:root {
  color-scheme: light;
  --bg: #fff1e5; --fg: #33302e; --text: #33302e;
  --muted: #62594f; --line: #d9ccbf; --grid: #e2d6ca;
  --subtle: #7a6e62; --threshold: #443b33; --legend: #62594f;
  --panel: #fff8f0; --selected: #eedfce; --selected-text: #443b33;
  --accent: #426cab; --focus: #426cab;
  --failure: #b86920; --clean: #187f91;
  --jev: #7759c1; --perplexity: #157e91; --liquid: #a17413;
  --liquid_ultra: #bd591d; --clef_flash: #b24470; --openai: #28804b;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141619; --fg: #f1f2f4; --text: #f1f2f4;
  --muted: #bec5ce; --line: #343a43; --grid: #30353d;
  --subtle: #969eaa; --threshold: #f3f5f9; --legend: #d6dbe2;
  --panel: #242a33; --selected: #263d60; --selected-text: #fff;
  --accent: #a2bfff; --focus: #a2bfff;
  --failure: #f4b16c; --clean: #65c4d2;
  --jev: #a99bff; --perplexity: #6cc9d9; --liquid: #edc66b;
  --liquid_ultra: #f09b65; --clef_flash: #e894b1; --openai: #87c99b;
}
html, body { background: var(--bg); color: var(--fg); }
button[aria-pressed="true"] { background: var(--selected); color: var(--selected-text); }
.key button[aria-pressed="true"] { background: var(--selected); color: var(--selected-text); }
button:hover { border-color: var(--accent); }
button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 600px) { button, .key button, .buttons button { min-height: 44px; } }