.chart-graph-demo {
  --cg-blue: #075de8;
  --cg-cyan: #2cb4bf;
  --cg-coral: #f16c5b;
  --cg-purple: #8057d5;
  --cg-ink: var(--text, #10233c);
  --cg-muted: var(--text-muted, #68778b);
  --cg-line: var(--border, #d8e1ec);
  --cg-soft: var(--surface-subtle, #f4f7fb);
  --cg-surface: var(--surface, #fff);
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 7px;
  color: var(--cg-ink);
  font-size: 9px;
}

.chart-graph-demo * { box-sizing: border-box; }

.cg-toolbar {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cg-toolbar span {
  width: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--cg-muted);
  font-weight: 800;
  letter-spacing: .06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.cg-toolbar button {
  flex: none;
  border: 1px solid var(--cg-line);
  border-radius: 999px;
  background: var(--cg-surface);
  color: var(--cg-blue);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 4px 8px;
}

.cg-toolbar button:hover,
.cg-toolbar button[aria-pressed="true"] {
  border-color: var(--cg-blue);
  background: color-mix(in srgb, var(--cg-blue) 9%, var(--cg-surface));
}

.cg-toolbar button:focus-visible {
  outline: 2px solid var(--cg-blue);
  outline-offset: 2px;
}

.chart-graph-demo svg {
  display: block;
  width: 100%;
  min-height: 138px;
  overflow: visible;
  border: 1px solid var(--cg-line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--cg-blue) 7%, transparent), transparent 33%),
    var(--cg-surface);
}

.chart-graph-demo > small {
  color: var(--cg-muted);
  font-size: 8px;
}

.cg-grid path,
.cg-row {
  fill: none;
  stroke: var(--cg-line);
  stroke-width: 1;
}

.cg-grid .cg-axis,
.cg-axis {
  fill: none;
  stroke: color-mix(in srgb, var(--cg-ink) 58%, transparent);
  stroke-width: 1.4;
}

.cg-primary { fill: var(--cg-blue); }
.cg-secondary { fill: var(--cg-cyan); }
.cg-accent { fill: var(--cg-purple); }
.cg-negative { fill: var(--cg-coral); }
.cg-mid { fill: color-mix(in srgb, var(--cg-blue) 48%, white); }
.cg-pale { fill: color-mix(in srgb, var(--cg-blue) 12%, var(--cg-surface)); }
.cg-primary-stroke { stroke: var(--cg-blue); }
.cg-secondary-stroke { stroke: var(--cg-cyan); }
.cg-accent-stroke { stroke: var(--cg-purple); }
.cg-pale-stroke { stroke: color-mix(in srgb, var(--cg-blue) 15%, var(--cg-line)); }

.cg-line,
.cg-stem,
.cg-connector,
.cg-whisker,
.cg-target,
.cg-trend,
.cg-link,
.cg-arc,
.cg-map-line,
.cg-needle,
.cg-limit,
.cg-center-line,
.cg-links path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cg-line { stroke-width: 3; }
.cg-stem { stroke: var(--cg-blue); stroke-width: 3; }
.cg-connector { stroke: color-mix(in srgb, var(--cg-ink) 38%, transparent); stroke-width: 3; }
.cg-whisker { stroke: var(--cg-ink); stroke-width: 2; }
.cg-target { stroke: var(--cg-ink); stroke-width: 3; }
.cg-trend { stroke: var(--cg-coral); stroke-dasharray: 5 4; stroke-width: 2; }
.cg-area { opacity: .36; }
.cg-band { fill: color-mix(in srgb, var(--cg-blue) 18%, transparent); }
.cg-ring { fill: none; stroke-width: 16; }
.cg-gauge { fill: none; stroke-width: 16; stroke-linecap: round; }
.cg-needle { stroke: var(--cg-ink); stroke-width: 3; }
.cg-outline { fill: none; stroke: var(--cg-line); stroke-width: 2; }
.cg-median { stroke: var(--cg-ink); stroke-width: 3; }
.cg-radar-grid { fill: none; stroke: var(--cg-line); }
.cg-radar { opacity: .28; stroke-width: 3; }
.cg-panel { fill: var(--cg-soft); stroke: var(--cg-line); }
.cg-links path { stroke: color-mix(in srgb, var(--cg-ink) 34%, transparent); stroke-width: 2; }
.cg-flow { fill: none; opacity: .35; stroke-width: 15; }
.cg-chord { fill: none; opacity: .42; stroke-width: 7; }
.cg-arc { fill: none; opacity: .55; stroke-width: 3; }
.cg-map { stroke: var(--cg-surface); stroke-width: 2; }
.cg-map-line { stroke: color-mix(in srgb, var(--cg-surface) 72%, var(--cg-ink)); stroke-width: 1.5; }
.cg-link { fill: none; stroke: var(--cg-muted); stroke-width: 1.5; }
.cg-milestone { fill: var(--cg-coral); }
.cg-limit { stroke: var(--cg-coral); stroke-dasharray: 5 4; stroke-width: 1.5; }
.cg-center-line { stroke: var(--cg-muted); stroke-dasharray: 3 3; stroke-width: 1.5; }
.cg-alert { fill: none; stroke: var(--cg-coral); stroke-width: 2; }

.cg-big-number {
  fill: var(--cg-ink);
  font: 800 24px "DM Sans", sans-serif;
}

.cg-center {
  fill: var(--cg-ink);
  font: 800 17px "DM Sans", sans-serif;
  text-anchor: middle;
}

.cg-label {
  fill: var(--cg-muted);
  font: 700 8px "DM Sans", sans-serif;
  text-anchor: middle;
}

.chart-graph-sparkline .cg-label,
.chart-graph-proportional-meter .cg-label { text-anchor: start; }

.cg-cell-label {
  fill: var(--cg-ink);
  font: 800 8px "DM Sans", sans-serif;
  pointer-events: none;
  text-anchor: middle;
}

.cg-heat-0 { fill: color-mix(in srgb, var(--cg-blue) 10%, var(--cg-surface)); }
.cg-heat-1 { fill: color-mix(in srgb, var(--cg-blue) 28%, var(--cg-surface)); }
.cg-heat-2 { fill: color-mix(in srgb, var(--cg-blue) 47%, var(--cg-surface)); }
.cg-heat-3 { fill: color-mix(in srgb, var(--cg-blue) 69%, var(--cg-surface)); }
.cg-heat-4 { fill: var(--cg-blue); }

.cg-mark,
.cg-line,
.cg-area,
.cg-flow,
.cg-chord,
.cg-arc {
  transition: fill .22s ease, opacity .22s ease, stroke .22s ease, transform .22s ease;
}

.chart-graph-demo svg:hover .cg-mark { opacity: .74; }
.chart-graph-demo svg:hover .cg-mark:hover { opacity: 1; }

.chart-graph-demo.is-compared .cg-primary { fill: var(--cg-purple); }
.chart-graph-demo.is-compared .cg-primary-stroke { stroke: var(--cg-purple); }
.chart-graph-demo.is-compared .cg-secondary { fill: var(--cg-coral); }
.chart-graph-demo.is-compared .cg-secondary-stroke { stroke: var(--cg-coral); }
.chart-graph-demo.is-compared .cg-series { transform: translateY(4px) scaleY(.9); transform-origin: center; }
.chart-graph-demo.is-compared svg { background-color: color-mix(in srgb, var(--cg-purple) 4%, var(--cg-surface)); }

.concept-card-preview .chart-graph-demo { font-size: 8px; }
.concept-card-preview .chart-graph-demo svg { min-height: 108px; }
.concept-card-preview .cg-toolbar button { padding: 3px 6px; }

[data-theme="dark"] .chart-graph-demo {
  --cg-cyan: #50d2dc;
  --cg-coral: #ff8171;
  --cg-purple: #aa8aff;
}

@media (max-width: 480px) {
  .chart-graph-demo { font-size: 10px; }
  .chart-graph-demo svg { min-height: 150px; }
  .concept-card-preview .chart-graph-demo svg { min-height: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  .chart-graph-demo * { transition: none !important; }
}

@media (forced-colors: active) {
  .chart-graph-demo svg,
  .cg-toolbar button { border: 1px solid CanvasText; }
  .cg-primary,
  .cg-secondary,
  .cg-accent,
  .cg-negative,
  .cg-mid,
  .cg-pale,
  .cg-heat-0,
  .cg-heat-1,
  .cg-heat-2,
  .cg-heat-3,
  .cg-heat-4 { fill: Highlight; }
  .cg-primary-stroke,
  .cg-secondary-stroke,
  .cg-accent-stroke,
  .cg-line,
  .cg-stem,
  .cg-whisker,
  .cg-connector,
  .cg-links path { stroke: CanvasText; }
}