:root {
  --vz-surface: oklch(1 0 0);
  --vz-band-1: oklch(0.946 0.034 23.8);
  --vz-band-2: oklch(0.967 0.021 23.9);
  --vz-band-3: oklch(0.982 0.019 92);
  --vz-band-4: oklch(0.97 0.023 148.2);
  --vz-band-5: oklch(0.949 0.036 148.2);
  --vz-dot-1: oklch(0.564 0.181 25.1);
  --vz-dot-2: oklch(0.608 0.145 23);
  --vz-dot-3: oklch(0.78 0.16 88);
  --vz-dot-4: oklch(0.626 0.129 148.1);
  --vz-dot-5: oklch(0.546 0.146 148);
  --vz-line: oklch(0.363 0.01 293.5);
  --vz-edge: oklch(0.363 0.01 293.5 / 0.13);
  --vz-mean: oklch(0.363 0.01 293.5 / 0.3);
  --vz-axis: oklch(0.467 0.01 293.7);
  --vz-year: oklch(0.5 0.01 290);
  --vz-value: oklch(0.363 0.01 293.5);
  --vz-meta: oklch(0.467 0.01 293.7);
  --vz-scrub-fill: oklch(1 0 0);
  --vz-scrub-ring: oklch(0.363 0.01 293.5);
}

:root[data-theme="dark"] {
  --vz-surface: oklch(0.225 0.01 285);
  --vz-band-1: oklch(0.38 0.085 22);
  --vz-band-2: oklch(0.31 0.05 22);
  --vz-band-3: oklch(0.35 0.06 88);
  --vz-band-4: oklch(0.31 0.05 150);
  --vz-band-5: oklch(0.38 0.085 150);
  --vz-dot-1: oklch(0.755 0.14 25);
  --vz-dot-2: oklch(0.785 0.1 23);
  --vz-dot-3: oklch(0.86 0.15 92);
  --vz-dot-4: oklch(0.79 0.105 148);
  --vz-dot-5: oklch(0.74 0.125 148);
  --vz-line: oklch(0.96 0.005 95);
  --vz-edge: oklch(0.96 0.005 95 / 0.09);
  --vz-mean: oklch(0.96 0.005 95 / 0.3);
  --vz-axis: oklch(0.8 0.008 95);
  --vz-year: oklch(0.8 0.008 95);
  --vz-value: oklch(0.96 0.005 95);
  --vz-meta: oklch(0.8 0.008 95);
  --vz-scrub-fill: oklch(0.96 0.005 95);
  --vz-scrub-ring: oklch(0.225 0.01 285);
}

.vz-chart { position: relative; width: 100%; min-width: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none }
.vz-svg { display: block; overflow: visible; font-family: inherit; font-variant-numeric: tabular-nums }
.vz-svg:focus { outline: none }
.vz-svg:focus-visible { outline: 2px solid var(--vz-line); outline-offset: 4px; border-radius: 4px }
.vz-edge { stroke: var(--vz-edge); stroke-width: 1; pointer-events: none }
.vz-mean { stroke: var(--vz-mean); stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none }
.vz-axis { fill: var(--vz-axis); pointer-events: none }
.vz-year { fill: var(--vz-year); pointer-events: none }
.vz-line { fill: none; stroke: var(--vz-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; pointer-events: none }
.vz-today { stroke: var(--vz-surface); stroke-width: 2.5; pointer-events: none }
.vz-scrub { pointer-events: none }
.vz-scrub-rule { stroke: var(--vz-line); stroke-opacity: 0.3; stroke-width: 1 }
.vz-scrub-dot { fill: var(--vz-scrub-fill); stroke: var(--vz-scrub-ring); stroke-width: 1.75 }
.vz-hit { fill: transparent; cursor: crosshair }
.vz-readout { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums }
.vz-readout-value { font-weight: 600; color: var(--vz-value) }
.vz-readout-meta { font-size: 12px; color: var(--vz-meta) }