/* The interactive example uses the same palette in both themes. */
.demo-section { background: var(--soft-surface); color: var(--ink); }
.demo-section .section-meta { border-color: var(--line); color: var(--muted); }
.demo-heading h2 { font-size: clamp(48px, 6.3vw, 96px); letter-spacing: -.045em; line-height: 1.06; }
.demo-heading h2 span { color: var(--accent-ink); }
.demo-dashboard, .trend-panel { background: var(--surface); color: var(--ink); border-color: var(--surface-line); }
.dashboard-heading, .dashboard-heading button, .dashboard-balance > span:first-child,
.dashboard-totals span, .donut-center span, .trend-eyebrow, .trend-key > span,
.trend-caption, .trend-switch button, .trend-points button, .chart-toolbar button { color: var(--muted); }
.dashboard-heading button:hover { color: var(--ink); }
.dashboard-totals, .trend-caption { border-color: var(--line); }
.chart-toolbar button[aria-pressed="true"] { background: var(--brand-fill); color: var(--brand-on-fill); }
.chart-toolbar button:hover { border-color: var(--accent-ink); }
.legend-category { color: var(--ink); }
.legend-category:hover, .legend-category[aria-pressed="true"] { background: var(--ice); border-color: var(--surface-line); }
.legend-bar { background: var(--line); }
.legend-bar em { transform-origin: left center; }
.donut-track { stroke: var(--line); }
.trend-grid path { stroke: var(--line); }
.trend-switch { background: var(--switch-surface); }
.trend-point { fill: var(--surface); stroke: var(--accent-ink); }
.trend-points button[aria-pressed="true"], .trend-points button:hover { background: var(--ice); color: var(--ink); border-color: var(--surface-line); }
#trend-line { stroke: var(--accent-ink); }
#trend-fill stop { stop-color: var(--accent-ink); }
.demo-section :focus-visible { outline-color: var(--accent-ink); }
.demo-bottom p span { color: var(--accent-ink); }
.demo-local-note, .demo-disclaimer, .balance-state { color: var(--muted); }
.demo-bot-message.success { border-color: var(--surface-line); }
@media (max-width:480px) { .demo-heading h2 { font-size: clamp(38px, 10.5vw, 52px); } }

.demo-section .chart-legend .legend-row, .demo-section .chart-legend .legend-row span, .demo-section .chart-legend .legend-row b { color: var(--ink); }
.demo-interface { border-color: var(--surface-line); }

/* The three chart views keep the existing pill control on narrow screens. */
@media (max-width: 540px) {
  .trend-switch { width: 100%; }
  .trend-switch button { flex: 1; min-width: 0; padding: 10px 8px; }
  .trend-key > span:last-child { max-width: 150px; text-align: right; }
}