:root {
  color-scheme: light;
  --vd-color-primary: #1533ff;
  --vd-color-surface: #ffffff;
  --vd-color-bg: #f4f4f2;
  --vd-color-on-surface: #303039;
  /* Ink for marks without an authored color encoding. */
  --vd-color-mark-default: #000000;
  --vd-color-muted: #696971;
  --vd-color-border: #d8d8d4;
  --vd-color-outline: #76767d;
  --vd-color-outline-variant: #e7e7e3;
  --vd-color-series-1: #4269d0;
  --vd-color-series-2: #efb118;
  --vd-color-series-3: #ff725c;
  --vd-color-series-4: #6cc5b0;
  --vd-color-series-5: #3ca951;
  --vd-color-series-6: #ff8ab7;
  --vd-color-series-7: #a463f2;
  --vd-color-series-8: #97bbf5;
  --vd-color-series-9: #9c6b4e;
  --vd-color-series-10: #9498a0;
  --vd-rounded-sm: 4;
  --vd-rounded-md: 7;
  --vd-rounded-lg: 12;
  --vd-type-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --vd-type-label-size: 10px;
  --vd-type-label-weight: 400;
  --vd-type-body-size: 14px;
  --vd-space-xs: 4px;
  --vd-space-sm: 8px;
  --vd-space-md: 16px;
  --vd-space-lg: 32px;
  --vd-space-xl: 48px;

  /* Legacy vd-* tokens remain stable while the package identity becomes VisDelta. */
  --vd-bg: var(--vd-color-bg);
  --vd-surface: var(--vd-color-surface);
  --vd-fg: var(--vd-color-on-surface);
  --vd-muted: var(--vd-color-muted);
  --vd-border: var(--vd-color-border);
  --vd-accent: var(--vd-color-primary);
  --vd-grid: var(--vd-color-outline-variant);
  --vd-axis: var(--vd-color-outline);
  --vd-axis-text: var(--vd-color-muted);
  --vd-axis-title: var(--vd-color-on-surface);
  --vd-legend-text: var(--vd-color-muted);
  --vd-font-family: var(--vd-type-family);
  --vd-shadow: none;
  --vd-series-1: var(--vd-color-series-1);
  --vd-series-2: var(--vd-color-series-2);
  --vd-series-3: var(--vd-color-series-3);
  --vd-series-4: var(--vd-color-series-4);
  --vd-series-5: var(--vd-color-series-5);
  --vd-series-6: var(--vd-color-series-6);
  --vd-series-7: var(--vd-color-series-7);
  --vd-series-8: var(--vd-color-series-8);
  --vd-series-9: var(--vd-color-series-9);
  --vd-series-10: var(--vd-color-series-10);
  --vd-line-width: 2;
  --vd-mark-stroke: var(--vd-color-surface);
  --vd-point-stroke-width: 1.5;
  --vd-point-connector: var(--vd-color-on-surface-variant);
  --vd-point-connector-width: 2px;
  --vd-unit-stroke-width: 0.75;
  --vd-line-point-size: 3.5;
  --vd-dim-opacity: 0.22;
  --vd-axis-font-size: var(--vd-type-label-size);
  --vd-axis-title-font-size: 11px;
  --vd-axis-label-offset: 40;
  --vd-tick-count: 6;
  --vd-grid-width: 1px;
  --vd-legend-swatch-size: 9;
  --vd-legend-swatch-radius: 2;
  --vd-legend-font-size: var(--vd-type-label-size);
  --vd-figure-bg: var(--vd-color-surface);
  --vd-figure-blur: 0px;
  --vd-figure-radius: 12px;
  --vd-figure-border: 1px solid var(--vd-color-border);
  --vd-figure-shadow: var(--vd-shadow);
}

.vd-transition-root,
.vd-chart-root {
  width: 100%;
  color: var(--vd-fg);
  font-family: var(--vd-font-family);
}

.vd-chart-root .vd-chart-figure {
  margin: 0;
}

.vd-figure {
  background: var(--vd-figure-bg);
  backdrop-filter: blur(var(--vd-figure-blur));
  border: var(--vd-figure-border);
  box-shadow: var(--vd-figure-shadow);
  border-radius: var(--vd-figure-radius);
  overflow: hidden;
}

/* Title and subtitle sit above the canvas, outside the SVG. The header is
   hidden until a state declares one. */
.vd-figure-header {
  box-sizing: border-box;
}

.vd-figure-heading {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--vd-border);
}

.vd-figure-header[hidden],
.vd-figure-title[hidden],
.vd-figure-subtitle[hidden] {
  display: none;
}

/* The outgoing and incoming text share one cell, so the line is as tall as the
   taller of the two and never moves the canvas while it changes. */
.vd-figure-title,
.vd-figure-subtitle {
  margin: 0;
  display: grid;
}

.vd-figure-title > span,
.vd-figure-subtitle > span {
  grid-area: 1 / 1;
}

.vd-figure-title {
  color: var(--vd-fg);
  font-size: clamp(1.12rem, 1.8vw, 1.42rem);
  line-height: 1.12;
  font-weight: 740;
}

.vd-figure-subtitle {
  margin-top: 4px;
  color: var(--vd-muted);
  font-size: 0.875rem;
  line-height: 1.3;
}

.vd-view {
  width: 100%;
  min-height: 420px;
}

/* A legend above the canvas is a second SVG after the canvas in the document, so
   code that takes the view's first SVG still gets the canvas; it is shown first. */
.vd-view[data-legend='outside'] {
  display: flex;
  flex-direction: column;
}

.vd-view[data-legend='outside'] > svg {
  flex: none;
}

.vd-view[data-legend='outside'] > .vd-legend-svg {
  order: -1;
}

.vd-view svg {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
}

.vd-axis path,
.vd-axis line {
  stroke: var(--vd-axis);
  shape-rendering: crispEdges;
}

.vd-axis text {
  fill: var(--vd-axis-text);
  font-size: var(--vd-axis-font-size);
  font-weight: var(--vd-type-label-weight);
}

.vd-axis-label {
  fill: var(--vd-axis-title);
  font-size: var(--vd-axis-title-font-size);
  font-weight: 600;
}

.vd-grid line {
  stroke: var(--vd-grid);
  stroke-width: var(--vd-grid-width);
  shape-rendering: crispEdges;
}

.vd-grid path {
  display: none;
}

/* Bar marks are fill-only by default. Structural seams, when a split or merge
   needs one, are separate transition-only paths rather than mark borders. */
.vd-bar {
  stroke: none;
}

.vd-bar-seam,
.vd-area-divider {
  fill: none;
  stroke: #fff;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  shape-rendering: crispEdges;
  mix-blend-mode: difference;
  pointer-events: none;
}

.vd-line-reference {
  fill: none;
  stroke: var(--vd-grid);
  stroke-width: 1px;
  stroke-dasharray: 3px 3px;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.vd-line-tooltip-layer {
  pointer-events: none;
}

.vd-line-tooltip-hitbox {
  fill: transparent;
  pointer-events: all;
}

.vd-line-tooltip-rule,
.vd-line-tooltip-dot {
  display: none;
}

.vd-line-tooltip-layer.is-active .vd-line-tooltip-rule,
.vd-line-tooltip-layer.is-active .vd-line-tooltip-dot {
  display: initial;
}

.vd-line-tooltip-rule,
.vd-area-tooltip-rule {
  stroke: var(--vd-color-outline);
  stroke-width: 1px;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}

.vd-line-tooltip-dot {
  stroke: var(--vd-surface);
  stroke-width: 2px;
  r: 4px;
  vector-effect: non-scaling-stroke;
}


/* Area keeps the Line inspector's visual language. Two dots distinguish its
   lower and upper boundaries without turning the band into a bar. */
.vd-area-observation {
  opacity: 0;
  pointer-events: none;
}

/* Adjacent Area cells are separate paths for identity and transitions. A
   same-fill hairline overlaps their independently antialiased edges without
   introducing a visible or semantic border. */
.vd-area-cell,
.vd-area-highlight {
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Opacity belongs to a complete Area layer or transition cohort. Force SVG to
   composite its opaque cells first, then apply alpha once to the result. */
.vd-area-cells,
.vd-area-highlights,
.vd-area-entering-cells,
.vd-area-exiting-cells {
  isolation: isolate;
}

.vd-area-tooltip-layer {
  pointer-events: none;
}

.vd-area-tooltip-hitbox {
  fill: transparent;
  pointer-events: all;
}

.vd-area-tooltip-rule,
.vd-area-tooltip-dot {
  display: none;
}

.vd-area-tooltip-layer.is-active .vd-area-tooltip-rule,
.vd-area-tooltip-layer.is-active .vd-area-tooltip-dot {
  display: initial;
}

.vd-area-tooltip-dot {
  stroke: var(--vd-surface);
  stroke-width: 2px;
  r: 4px;
  vector-effect: non-scaling-stroke;
}


.vd-point-connector {
  vector-effect: non-scaling-stroke;
}

.vd-bar,
.vd-point,
.vd-line,
.vd-line-point,
.vd-unit {
  shape-rendering: geometricPrecision;
}

.vd-tooltip {
  position: fixed;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  max-width: 260px;
  padding: 10px 12px;
  color: #fff;
  background: rgba(31, 35, 40, 0.94);
  border-radius: 6px;
  font-size: 0.82rem;
  line-height: 1.4;
  transition: opacity 120ms ease;
}

.vd-legend {
  fill: var(--vd-legend-text);
  font-size: var(--vd-legend-font-size);
  font-weight: var(--vd-type-label-weight);
}

.vd-empty {
  display: grid;
  min-height: 420px;
  place-items: center;
  color: var(--vd-muted);
  font-size: 0.95rem;
}

/* Built-in chart-style presets. The runtime scopes one of these classes to
   each transition root, so presets can coexist without changing the page. */
.vd-style-paper {
  color-scheme: light;
  --vd-color-primary: #8b2f20;
  --vd-color-surface: #fffdf7;
  --vd-color-bg: #f4eee2;
  --vd-color-on-surface: #21180f;
  --vd-color-muted: #746653;
  --vd-color-border: #cbbda5;
  --vd-color-outline: #a4957d;
  --vd-color-outline-variant: #e4d9c7;
  --vd-color-series-1: #8b2f20;
  --vd-color-series-2: #315b45;
  --vd-color-series-3: #294b78;
  --vd-color-series-4: #7a5a22;
  --vd-color-series-5: #6d4969;
  --vd-color-series-6: #3c6d70;
  --vd-color-series-7: #a36146;
  --vd-color-series-8: #596c35;
  --vd-color-series-9: #77533a;
  --vd-color-series-10: #55514a;
  --vd-type-family: Iowan Old Style, Baskerville, Georgia, ui-serif, serif;
  --vd-font-family: Iowan Old Style, Baskerville, Georgia, ui-serif, serif;
  --vd-series-1: #8b2f20;
  --vd-series-2: #315b45;
  --vd-series-3: #294b78;
  --vd-series-4: #7a5a22;
  --vd-series-5: #6d4969;
  --vd-series-6: #3c6d70;
  --vd-series-7: #a36146;
  --vd-series-8: #596c35;
  --vd-series-9: #77533a;
  --vd-series-10: #55514a;
  --vd-accent: #8b2f20;
  --vd-type-label-size: 11px;
  --vd-axis-font-size: 11px;
  --vd-axis-title-font-size: 12px;
  --vd-axis-title: #21180f;
  --vd-axis-text: #746653;
  --vd-axis: #a4957d;
  --vd-grid: #e4d9c7;
  --vd-legend-text: #5f513f;
  --vd-mark-stroke: #fffdf7;
  --vd-point-stroke-width: 1;
  --vd-line-width: 1.75;
  --vd-legend-swatch-radius: 0;
  --vd-figure-bg: #fffdf7;
  --vd-figure-border: 1px solid #cbbda5;
  --vd-figure-radius: 0;
  --vd-figure-shadow: none;
}

.vd-style-dark {
  color-scheme: dark;
  --vd-color-primary: #67b7e5;
  --vd-color-surface: #11161c;
  --vd-color-bg: #0b1015;
  --vd-color-on-surface: #dbe7ef;
  --vd-color-mark-default: #ffffff;
  --vd-color-muted: #91a0ac;
  --vd-color-border: #2b3741;
  --vd-color-outline: #536472;
  --vd-color-outline-variant: #243039;
  --vd-color-series-1: #67b7e5;
  --vd-color-series-2: #3f8fbd;
  --vd-color-series-3: #94d2f2;
  --vd-color-series-4: #28688f;
  --vd-color-series-5: #b7e2f7;
  --vd-color-series-6: #54a3cf;
  --vd-color-series-7: #d4eefb;
  --vd-color-series-8: #356f8b;
  --vd-color-series-9: #78c4e8;
  --vd-color-series-10: #a9cfdf;
  --vd-type-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --vd-font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --vd-series-1: #67b7e5;
  --vd-series-2: #3f8fbd;
  --vd-series-3: #94d2f2;
  --vd-series-4: #28688f;
  --vd-series-5: #b7e2f7;
  --vd-series-6: #54a3cf;
  --vd-series-7: #d4eefb;
  --vd-series-8: #356f8b;
  --vd-series-9: #78c4e8;
  --vd-series-10: #a9cfdf;
  --vd-accent: #67b7e5;
  --vd-type-label-size: 10px;
  --vd-type-label-weight: 400;
  --vd-axis-font-size: 10px;
  --vd-axis-title-font-size: 11px;
  --vd-axis-title: #dbe7ef;
  --vd-axis-text: #91a0ac;
  --vd-axis: #536472;
  --vd-grid: #243039;
  --vd-legend-text: #aab6bf;
  --vd-mark-stroke: #11161c;
  --vd-point-stroke-width: 1.25;
  --vd-line-width: 1.5;
  --vd-legend-swatch-radius: 0;
  --vd-figure-bg: #11161c;
  --vd-figure-border: 1px solid #2b3741;
  --vd-figure-radius: 0;
  --vd-figure-shadow: none;
}

/* Editorial: ink on paper. It keeps VisDelta's categorical palette (the logo
   colours) and changes only surface, neutral ink, line weight and type. */
.vd-style-editorial {
  color-scheme: light;
  --vd-color-surface: #fbfaf7;
  --vd-color-bg: #f3f2ee;
  --vd-color-on-surface: #22221f;
  --vd-color-on-surface-variant: #9a9891;
  --vd-color-mark-default: #1f1e1b;
  --vd-color-muted: #6d6c66;
  --vd-color-border: #dedcd5;
  --vd-color-outline: #a7a59e;
  --vd-color-outline-variant: #e4e2db;
  --vd-axis-title: #22221f;
  --vd-axis-text: #6d6c66;
  --vd-axis: #a7a59e;
  --vd-grid: #e4e2db;
  --vd-grid-width: 0.75px;
  --vd-legend-text: #6d6c66;
  --vd-type-label-weight: 500;
  --vd-mark-stroke: #fbfaf7;
  --vd-point-connector: #9a9891;
  --vd-point-connector-width: 1px;
  --vd-line-width: 1.5;
  --vd-figure-bg: #fbfaf7;
  --vd-figure-border: none;
  --vd-figure-radius: 0;
  --vd-figure-shadow: none;
}

.vd-style-editorial .vd-axis text {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Sub-pixel hairlines must antialias; crisp edges would round them away. */
.vd-style-editorial .vd-grid line {
  shape-rendering: auto;
}

/* Fit mode gives the main canvas priority over the legend, including side legends. */
.vd-transition-root[data-hide-legend='true'] .vd-legend,
.vd-transition-root[data-hide-legend='true'] .vd-legend-svg {
  display: none;
}

.vd-figure-header { flex-shrink: 0; }