:root {
  --d3-axis-text-color: rgb(0, 255, 220);
  --d3-axis-label-text-color: rgb(255, 0, 149);
  --d3-axis-line-color: rgb(0, 255, 220);
  --d3-axis-font-family: 'Montserrat', Helvetica, sans-serif;
  --d3-axis-font-weight: 900;
  --d3-axis-font-size: 20px;
  --d3-axis-label-font-size: 25px;
  --d3-axis-label-font-weight: 900;
  --d3-title-color: #9efcff;
  --d3-title-font-size: 24px;
  --d3-title-font-weight: 800;
  --d3-subtitle-color: #ffd166;
  --d3-subtitle-font-size: 18px;
  --d3-subtitle-font-weight: 600;
  --d3-legend-text-color: #ffffff;
  --d3-legend-font-size: 13px;
  --d3-legend-font-weight: 700;
  --d3-body-text-color: #9efcff;
  --d3-body-font-size: 14px;
  --d3-body-font-weight: 600;

  /* MachineLearning slide palette (used in inline D3 figures) */
  --ml-panel-bg: rgba(15,23,42,0.85);
  --ml-panel-border: #2d3a66;
  --ml-text: #ffffff;
  --ml-muted: #9efcffcc;
  --ml-accent-cyan: #00ffff;
  --ml-accent-magenta: #ff05ff;
  --ml-accent-green: #00ff94;
  --ml-accent-orange: #ff6b35;
  --ml-gray-soft: rgba(255,255,255,0.15);

  /* Translucent fills tuned for dark neon panels */
  --ml-surface: rgba(0,0,0,0.12);
  --ml-surface-2: rgba(0,0,0,0.16);
  --ml-grid: rgba(255,255,255,0.04);
  --ml-stroke-muted: rgba(255,255,255,0.35);

  --ml-accent-cyan-soft: rgba(0,255,255,0.10);
  --ml-accent-cyan-soft-2: rgba(0,255,255,0.18);
  --ml-accent-magenta-soft: rgba(255,5,255,0.10);
  --ml-accent-magenta-soft-2: rgba(255,5,255,0.18);
  --ml-accent-green-soft: rgba(0,255,148,0.16);
  --ml-accent-green-soft-2: rgba(0,255,148,0.20);
  --ml-accent-orange-soft: rgba(255,107,53,0.12);
  --ml-accent-orange-soft-2: rgba(255,107,53,0.18);

  /* Common callouts/legend styling inside SVG */
  --ml-legend-bg: rgba(0,0,0,0.55);
  --ml-stroke-soft: rgba(255,255,255,0.25);
  --ml-accent-cyan-stroke-muted: rgba(0,255,255,0.35);
  --ml-accent-magenta-stroke-muted: rgba(255,5,255,0.50);
}

.d3-axis text {
  fill: var(--d3-axis-text-color);
  font-family: var(--d3-axis-font-family);
  font-weight: var(--d3-axis-font-weight);
  font-size: var(--d3-axis-font-size);
  letter-spacing: 0.015em;
}

.d3-axis line,
.d3-axis path {
  stroke: var(--d3-axis-line-color);
  stroke-width: 1.3;
  shape-rendering: crispEdges;
}

.d3-axis-label {
  fill: var(--d3-axis-label-text-color);
  font-family: var(--d3-axis-font-family);
  font-weight: var(--d3-axis-label-font-weight);
  font-size: var(--d3-axis-label-font-size);
  letter-spacing: 0.02em;
}

.d3-axis-label--small {
  font-size: calc(var(--d3-axis-label-font-size) * 0.85);
}

.d3-axis-label--large {
  font-size: calc(var(--d3-axis-label-font-size) * 1.2);
}

.d3-chart-title {
  fill: var(--d3-title-color);
  font-family: var(--d3-axis-font-family);
  font-weight: var(--d3-title-font-weight);
  font-size: var(--d3-title-font-size);
  letter-spacing: 0.02em;
}

.d3-chart-title--small {
  font-size: calc(var(--d3-title-font-size) * 0.75);
}

.d3-chart-title--large {
  font-size: calc(var(--d3-title-font-size) * 1.3);
}

.d3-chart-subtitle {
  fill: var(--d3-subtitle-color);
  font-family: var(--d3-axis-font-family);
  font-weight: var(--d3-subtitle-font-weight);
  font-size: var(--d3-subtitle-font-size);
  letter-spacing: 0.015em;
}

.d3-chart-subtitle--small {
  font-size: calc(var(--d3-subtitle-font-size) * 0.85);
}

.d3-chart-subtitle--large {
  font-size: calc(var(--d3-subtitle-font-size) * 1.2);
}

.d3-legend-text {
  fill: var(--d3-legend-text-color);
  font-family: var(--d3-axis-font-family);
  font-weight: var(--d3-legend-font-weight);
  font-size: var(--d3-legend-font-size);
  letter-spacing: 0.01em;
}

.d3-chart-body-text {
  fill: var(--d3-body-text-color);
  font-family: var(--d3-axis-font-family);
  font-weight: var(--d3-body-font-weight);
  font-size: var(--d3-body-font-size);
  letter-spacing: 0.01em;
}