From da3a3e648e38c1c5e4eebb22af0bfea8b2da17c0 Mon Sep 17 00:00:00 2001
From: David Gwyer <d.v.gwyer@gmail.com>
Date: Tue, 11 Oct 2022 08:30:45 +0100
Subject: [PATCH 01/10] Add support for margin to ordinal color legend.

---
 src/legends/swatches.js | 43 ++++++++++++++++++++++++-----------------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/legends/swatches.js b/src/legends/swatches.js
index ac093651b1..2d221b5647 100644
--- a/src/legends/swatches.js
+++ b/src/legends/swatches.js
@@ -1,10 +1,10 @@
-import {path} from "d3";
-import {inferFontVariant} from "../axes.js";
-import {maybeAutoTickFormat} from "../axis.js";
-import {Context, create} from "../context.js";
-import {isNoneish, maybeColorChannel, maybeNumberChannel} from "../options.js";
-import {isOrdinalScale, isThresholdScale} from "../scales.js";
-import {applyInlineStyles, impliedString, maybeClassName} from "../style.js";
+import { path } from "d3";
+import { inferFontVariant } from "../axes.js";
+import { maybeAutoTickFormat } from "../axis.js";
+import { Context, create } from "../context.js";
+import { isNoneish, maybeColorChannel, maybeNumberChannel } from "../options.js";
+import { isOrdinalScale, isThresholdScale } from "../scales.js";
+import { applyInlineStyles, impliedString, maybeClassName } from "../style.js";
 
 function maybeScale(scale, key) {
   if (key == null) return key;
@@ -88,6 +88,9 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
     swatchSize = 15,
     swatchWidth = swatchSize,
     swatchHeight = swatchSize,
+    marginTop = 0,
+    marginRight = 0,
+    marginBottom = 0,
     marginLeft = 0,
     className,
     style,
@@ -170,18 +173,22 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
       div.insert("style", "*").text(`
         .${className} {
           font-family: system-ui, sans-serif;
-          font-size: 10px;
-          margin-bottom: 0.5em;${
-            marginLeft === undefined
-              ? ""
-              : `
-          margin-left: ${+marginLeft}px;`
-          }${
-        width === undefined
+          font-size: 10px;${marginTop === undefined
           ? ""
-          : `
-          width: ${width}px;`
-      }
+          : `margin-top: ${+marginTop}px;`
+        }${marginRight === undefined
+          ? ""
+          : `margin-right: ${+marginRight}px;`
+        }${marginBottom === undefined
+          ? `margin-bottom: 0.5em;`
+          : `margin-bottom: ${+marginBottom}px;`
+        }${marginLeft === undefined
+          ? ""
+          : `margin-left: ${+marginLeft}px;`
+        }${width === undefined
+          ? ""
+          : `width: ${width}px;`
+        }
         }
         ${swatchStyle(className)}
         ${extraStyle}

From 97bc43c5788c9cc3b52eb591d3b8c04b8efb9b3e Mon Sep 17 00:00:00 2001
From: David Gwyer <d.v.gwyer@gmail.com>
Date: Wed, 12 Oct 2022 09:11:45 +0100
Subject: [PATCH 02/10] added pixel default for margin bottom

---
 package.json            |  4 +++-
 src/legends/swatches.js | 37 +++++++++++++------------------------
 2 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/package.json b/package.json
index c144d7a6a5..ebf3efea2e 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,9 @@
     "readme:update": "tsx scripts/jsdoc-to-readme.ts",
     "prepublishOnly": "rm -rf dist && rollup -c && tsc",
     "postpublish": "git push && git push --tags",
-    "dev": "vite"
+    "dev": "vite",
+    "prettier": "prettier . --check",
+    "prettier-fix": "prettier . --write"
   },
   "_moduleAliases": {
     "@observablehq/plot": "./src/index.js"
diff --git a/src/legends/swatches.js b/src/legends/swatches.js
index 2d221b5647..897b3ede65 100644
--- a/src/legends/swatches.js
+++ b/src/legends/swatches.js
@@ -1,10 +1,10 @@
-import { path } from "d3";
-import { inferFontVariant } from "../axes.js";
-import { maybeAutoTickFormat } from "../axis.js";
-import { Context, create } from "../context.js";
-import { isNoneish, maybeColorChannel, maybeNumberChannel } from "../options.js";
-import { isOrdinalScale, isThresholdScale } from "../scales.js";
-import { applyInlineStyles, impliedString, maybeClassName } from "../style.js";
+import {path} from "d3";
+import {inferFontVariant} from "../axes.js";
+import {maybeAutoTickFormat} from "../axis.js";
+import {Context, create} from "../context.js";
+import {isNoneish, maybeColorChannel, maybeNumberChannel} from "../options.js";
+import {isOrdinalScale, isThresholdScale} from "../scales.js";
+import {applyInlineStyles, impliedString, maybeClassName} from "../style.js";
 
 function maybeScale(scale, key) {
   if (key == null) return key;
@@ -90,7 +90,7 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
     swatchHeight = swatchSize,
     marginTop = 0,
     marginRight = 0,
-    marginBottom = 0,
+    marginBottom = 8,
     marginLeft = 0,
     className,
     style,
@@ -173,22 +173,11 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
       div.insert("style", "*").text(`
         .${className} {
           font-family: system-ui, sans-serif;
-          font-size: 10px;${marginTop === undefined
-          ? ""
-          : `margin-top: ${+marginTop}px;`
-        }${marginRight === undefined
-          ? ""
-          : `margin-right: ${+marginRight}px;`
-        }${marginBottom === undefined
-          ? `margin-bottom: 0.5em;`
-          : `margin-bottom: ${+marginBottom}px;`
-        }${marginLeft === undefined
-          ? ""
-          : `margin-left: ${+marginLeft}px;`
-        }${width === undefined
-          ? ""
-          : `width: ${width}px;`
-        }
+          font-size: 10px;${marginTop === undefined ? "" : `margin-top: ${+marginTop}px;`}${
+        marginRight === undefined ? "" : `margin-right: ${+marginRight}px;`
+      }${`margin-bottom: ${+marginBottom}px;`}${
+        marginLeft === undefined ? "" : `margin-left: ${+marginLeft}px;`
+      }${width === undefined ? "" : `width: ${+width}px;`}
         }
         ${swatchStyle(className)}
         ${extraStyle}

From 0ddd696b4934e8291a4dc7a05f6e2b3b5ff24f82 Mon Sep 17 00:00:00 2001
From: David Gwyer <d.v.gwyer@gmail.com>
Date: Wed, 12 Oct 2022 17:57:04 +0100
Subject: [PATCH 03/10] removed prettier script in package.json

---
 package.json | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/package.json b/package.json
index ebf3efea2e..c144d7a6a5 100644
--- a/package.json
+++ b/package.json
@@ -36,9 +36,7 @@
     "readme:update": "tsx scripts/jsdoc-to-readme.ts",
     "prepublishOnly": "rm -rf dist && rollup -c && tsc",
     "postpublish": "git push && git push --tags",
-    "dev": "vite",
-    "prettier": "prettier . --check",
-    "prettier-fix": "prettier . --write"
+    "dev": "vite"
   },
   "_moduleAliases": {
     "@observablehq/plot": "./src/index.js"

From 32e26eddd458f9eed3a08b6ec6f7b925144c80fe Mon Sep 17 00:00:00 2001
From: David Gwyer <d.v.gwyer@gmail.com>
Date: Thu, 13 Oct 2022 08:30:27 +0100
Subject: [PATCH 04/10] fixed prettier linting issue

---
 src/legends/swatches.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/legends/swatches.js b/src/legends/swatches.js
index 897b3ede65..0ebabf447b 100644
--- a/src/legends/swatches.js
+++ b/src/legends/swatches.js
@@ -175,9 +175,9 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
           font-family: system-ui, sans-serif;
           font-size: 10px;${marginTop === undefined ? "" : `margin-top: ${+marginTop}px;`}${
         marginRight === undefined ? "" : `margin-right: ${+marginRight}px;`
-      }${`margin-bottom: ${+marginBottom}px;`}${
-        marginLeft === undefined ? "" : `margin-left: ${+marginLeft}px;`
-      }${width === undefined ? "" : `width: ${+width}px;`}
+      }${`margin-bottom: ${+marginBottom}px;`}${marginLeft === undefined ? "" : `margin-left: ${+marginLeft}px;`}${
+        width === undefined ? "" : `width: ${+width}px;`
+      }
         }
         ${swatchStyle(className)}
         ${extraStyle}

From b7ffeb3f8eace9bb0b721020792b9150938bfd92 Mon Sep 17 00:00:00 2001
From: David Gwyer <d.v.gwyer@gmail.com>
Date: Fri, 14 Oct 2022 09:05:19 +0100
Subject: [PATCH 05/10] update branch to push changes

---
 src/legends/swatches.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/legends/swatches.js b/src/legends/swatches.js
index 0ebabf447b..53b4eeb498 100644
--- a/src/legends/swatches.js
+++ b/src/legends/swatches.js
@@ -173,9 +173,11 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
       div.insert("style", "*").text(`
         .${className} {
           font-family: system-ui, sans-serif;
-          font-size: 10px;${marginTop === undefined ? "" : `margin-top: ${+marginTop}px;`}${
-        marginRight === undefined ? "" : `margin-right: ${+marginRight}px;`
-      }${`margin-bottom: ${+marginBottom}px;`}${marginLeft === undefined ? "" : `margin-left: ${+marginLeft}px;`}${
+          font-size: 10px;${`margin-bottom: ${+marginBottom}px;`}${
+        marginTop === undefined ? "" : `margin-top: ${+marginTop}px;`
+      }${marginRight === undefined ? "" : `margin-right: ${+marginRight}px;`}${
+        marginTop === undefined ? "" : `margin-top: ${+marginTop}px;`
+      }${marginLeft === undefined ? "" : `margin-left: ${+marginLeft}px;`}${
         width === undefined ? "" : `width: ${+width}px;`
       }
         }

From 9a19a48b19ffba53c8f2c834d84c00018601bedd Mon Sep 17 00:00:00 2001
From: David Gwyer <d.v.gwyer@gmail.com>
Date: Fri, 14 Oct 2022 09:13:40 +0100
Subject: [PATCH 06/10] reverting changes

---
 src/legends/swatches.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/legends/swatches.js b/src/legends/swatches.js
index 53b4eeb498..d4dc84573c 100644
--- a/src/legends/swatches.js
+++ b/src/legends/swatches.js
@@ -173,11 +173,9 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
       div.insert("style", "*").text(`
         .${className} {
           font-family: system-ui, sans-serif;
-          font-size: 10px;${`margin-bottom: ${+marginBottom}px;`}${
-        marginTop === undefined ? "" : `margin-top: ${+marginTop}px;`
-      }${marginRight === undefined ? "" : `margin-right: ${+marginRight}px;`}${
-        marginTop === undefined ? "" : `margin-top: ${+marginTop}px;`
-      }${marginLeft === undefined ? "" : `margin-left: ${+marginLeft}px;`}${
+          font-size: 10px;${marginTop === undefined ? "" : `margin-top: ${+marginTop}px;`}${
+        marginRight === undefined ? "" : `margin-right: ${+marginRight}px;`
+        }${marginTop === undefined ? "" : `margin-top: ${+marginTop}px;`}${`margin-bottom: ${+marginBottom}px;`}${marginLeft === undefined ? "" : `margin-left: ${+marginLeft}px;`}${
         width === undefined ? "" : `width: ${+width}px;`
       }
         }

From 4d6a7c2004ec4abf52e4f2b68a12ea3f870b99cd Mon Sep 17 00:00:00 2001
From: David Gwyer <d.v.gwyer@gmail.com>
Date: Fri, 14 Oct 2022 09:15:15 +0100
Subject: [PATCH 07/10] update prettier changes

---
 src/legends/swatches.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/legends/swatches.js b/src/legends/swatches.js
index d4dc84573c..c70e9e20b6 100644
--- a/src/legends/swatches.js
+++ b/src/legends/swatches.js
@@ -175,9 +175,9 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
           font-family: system-ui, sans-serif;
           font-size: 10px;${marginTop === undefined ? "" : `margin-top: ${+marginTop}px;`}${
         marginRight === undefined ? "" : `margin-right: ${+marginRight}px;`
-        }${marginTop === undefined ? "" : `margin-top: ${+marginTop}px;`}${`margin-bottom: ${+marginBottom}px;`}${marginLeft === undefined ? "" : `margin-left: ${+marginLeft}px;`}${
-        width === undefined ? "" : `width: ${+width}px;`
-      }
+      }${marginTop === undefined ? "" : `margin-top: ${+marginTop}px;`}${`margin-bottom: ${+marginBottom}px;`}${
+        marginLeft === undefined ? "" : `margin-left: ${+marginLeft}px;`
+      }${width === undefined ? "" : `width: ${+width}px;`}
         }
         ${swatchStyle(className)}
         ${extraStyle}

From 40ba5c58aea58f1e24ea97b4dbe6bc7f997be8b3 Mon Sep 17 00:00:00 2001
From: David Gwyer <d.v.gwyer@gmail.com>
Date: Mon, 17 Oct 2022 09:36:06 +0100
Subject: [PATCH 08/10] updated default bottom margin

---
 src/legends/swatches.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/legends/swatches.js b/src/legends/swatches.js
index c70e9e20b6..438e099a92 100644
--- a/src/legends/swatches.js
+++ b/src/legends/swatches.js
@@ -90,7 +90,7 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
     swatchHeight = swatchSize,
     marginTop = 0,
     marginRight = 0,
-    marginBottom = 8,
+    marginBottom = 5,
     marginLeft = 0,
     className,
     style,

From e9503e0dd5a796acc523f52e5e7f0daf8ac731ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= <fil@rezo.net>
Date: Mon, 17 Oct 2022 14:11:47 -0700
Subject: [PATCH 09/10] minimize churn by keeping the same defaults we might
 want to revisit at a later time and support both numbers (as pixels) and
 lengths (as strings).

---
 src/legends/swatches.js | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/legends/swatches.js b/src/legends/swatches.js
index 438e099a92..b761b2cc79 100644
--- a/src/legends/swatches.js
+++ b/src/legends/swatches.js
@@ -88,10 +88,10 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
     swatchSize = 15,
     swatchWidth = swatchSize,
     swatchHeight = swatchSize,
-    marginTop = 0,
-    marginRight = 0,
-    marginBottom = 5,
-    marginLeft = 0,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
     className,
     style,
     width
@@ -173,11 +173,16 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
       div.insert("style", "*").text(`
         .${className} {
           font-family: system-ui, sans-serif;
-          font-size: 10px;${marginTop === undefined ? "" : `margin-top: ${+marginTop}px;`}${
-        marginRight === undefined ? "" : `margin-right: ${+marginRight}px;`
-      }${marginTop === undefined ? "" : `margin-top: ${+marginTop}px;`}${`margin-bottom: ${+marginBottom}px;`}${
-        marginLeft === undefined ? "" : `margin-left: ${+marginLeft}px;`
-      }${width === undefined ? "" : `width: ${+width}px;`}
+          font-size: 10px;
+          ${[
+            marginTop === undefined ? null : `margin-top: ${+marginTop}px;`,
+            marginBottom === undefined ? `margin-bottom: 0.5em;` : `margin-bottom: ${+marginBottom}px;`,
+            `margin-left: ${marginLeft === undefined ? 0 : +marginLeft}px;`,
+            marginRight === undefined ? null : `margin-right: ${+marginRight}px;`,
+            width === undefined ? null : `width: ${+width}px;`
+          ]
+            .filter((d) => d)
+            .join("\n          ")}
         }
         ${swatchStyle(className)}
         ${extraStyle}

From f9c47164dfb58fad720a94438e71ba87f1db19e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= <fil@rezo.net>
Date: Fri, 29 Sep 2023 12:43:02 +0200
Subject: [PATCH 10/10] inline style

---
 src/legends/swatches.js                       |  12 +-
 test/output/athletesSortNationality.html      |   3 +-
 test/output/athletesSortNullLimit.html        |   3 +-
 test/output/binFillFirstEmpty.html            |   3 +-
 test/output/caltrain.html                     |   3 +-
 test/output/colorLegendCategorical.html       |   3 +-
 .../output/colorLegendCategoricalColumns.html |   3 +-
 .../output/colorLegendCategoricalReverse.html |   3 +-
 test/output/colorLegendCategoricalScheme.html |   3 +-
 test/output/colorLegendOpacity.html           |   3 +-
 test/output/colorLegendOrdinal.html           |   3 +-
 test/output/colorLegendOrdinalScheme.html     |   3 +-
 test/output/colorLegendOrdinalTickFormat.html |   3 +-
 .../colorLegendOrdinalTickFormatFunction.html |   3 +-
 test/output/colorLegendQuantileSwatches.html  |   3 +-
 test/output/colorSchemesOrdinal.html          | 750 ++++++------------
 test/output/decathlon.html                    |   3 +-
 test/output/energyProduction.html             |   3 +-
 test/output/frameFillCategorical.html         |   3 +-
 test/output/hexbinSymbol.html                 |   3 +-
 test/output/hexbinZ.html                      |   3 +-
 test/output/integerIntervalArea.html          |   3 +-
 test/output/integerIntervalAreaZ.html         |   3 +-
 test/output/liborProjectionsFacet.html        |   3 +-
 test/output/likertSurvey.html                 |   3 +-
 test/output/penguinDensityZ.html              |   3 +-
 test/output/penguinFacetDodgeIsland.html      |   3 +-
 test/output/penguinFacetDodgeSymbol.html      |   3 +-
 test/output/penguinSizeSymbols.html           |   3 +-
 test/output/penguinSpeciesCheysson.html       |   3 +-
 test/output/symbolLegendBasic.html            |   3 +-
 test/output/symbolLegendColorFill.html        |   3 +-
 test/output/symbolLegendColorStroke.html      |   3 +-
 test/output/symbolLegendDifferentColor.html   |   3 +-
 test/output/symbolLegendExplicitColor.html    |   3 +-
 test/output/symbolLegendFill.html             |   3 +-
 test/output/symbolLegendImplicitRange.html    |   3 +-
 test/output/symbolLegendOpacityColor.html     |   3 +-
 test/output/symbolLegendOpacityFill.html      |   3 +-
 test/output/symbolLegendOpacityStroke.html    |   3 +-
 test/output/symbolLegendStroke.html           |   3 +-
 test/output/symbolSetFillColor.html           |   3 +-
 test/output/symbolSetStrokeColor.html         |   3 +-
 test/output/title.html                        |   3 +-
 test/output/trafficHorizon.html               |   3 +-
 45 files changed, 296 insertions(+), 595 deletions(-)

diff --git a/src/legends/swatches.js b/src/legends/swatches.js
index d90e7c57c7..ca18749c5e 100644
--- a/src/legends/swatches.js
+++ b/src/legends/swatches.js
@@ -156,15 +156,6 @@ function legendItems(scale, options = {}, swatch) {
         `.${className}-swatches {
   font-family: system-ui, sans-serif;
   font-size: 10px;
-  ${[
-    marginTop === undefined ? null : `margin-top: ${+marginTop}px;`,
-    marginBottom === undefined ? `margin-bottom: 0.5em;` : `margin-bottom: ${+marginBottom}px;`,
-    `margin-left: ${marginLeft === undefined ? 0 : +marginLeft}px;`,
-    marginRight === undefined ? null : `margin-right: ${+marginRight}px;`,
-    width === undefined ? null : `width: ${+width}px;`
-  ]
-    .filter((d) => d)
-    .join("\n          ")}
 }
 .${className}-swatch > svg {
   margin-right: 0.5em;
@@ -173,6 +164,9 @@ function legendItems(scale, options = {}, swatch) {
 ${extraStyle}`
       )
     )
+    .style("margin-top", marginTop ? `${+marginTop}px` : null)
+    .style("margin-right", marginRight ? `${+marginRight}px` : null)
+    .style("margin-bottom", `${marginBottom === undefined ? "0.5em" : `${+marginBottom}px`}`)
     .style("margin-left", marginLeft ? `${+marginLeft}px` : null)
     .style("width", width === undefined ? null : `${+width}px`)
     .style("font-variant", impliedString(fontVariant, "normal"))
diff --git a/test/output/athletesSortNationality.html b/test/output/athletesSortNationality.html
index 15732dce20..846ce7d477 100644
--- a/test/output/athletesSortNationality.html
+++ b/test/output/athletesSortNationality.html
@@ -1,10 +1,9 @@
 <figure class="plot-d6a7b5-figure" style="max-width: initial;">
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
diff --git a/test/output/athletesSortNullLimit.html b/test/output/athletesSortNullLimit.html
index e025977756..f379ab60f6 100644
--- a/test/output/athletesSortNullLimit.html
+++ b/test/output/athletesSortNullLimit.html
@@ -1,10 +1,9 @@
 <figure class="plot-d6a7b5-figure" style="max-width: initial;">
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
diff --git a/test/output/binFillFirstEmpty.html b/test/output/binFillFirstEmpty.html
index 754c41ec5a..846c80ae21 100644
--- a/test/output/binFillFirstEmpty.html
+++ b/test/output/binFillFirstEmpty.html
@@ -1,10 +1,9 @@
 <figure class="plot-d6a7b5-figure" style="max-width: initial;">
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
diff --git a/test/output/caltrain.html b/test/output/caltrain.html
index c1774cbe73..a189018e3e 100644
--- a/test/output/caltrain.html
+++ b/test/output/caltrain.html
@@ -1,10 +1,9 @@
 <figure class="plot-d6a7b5-figure" style="max-width: initial;">
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
diff --git a/test/output/colorLegendCategorical.html b/test/output/colorLegendCategorical.html
index 0f8bac3db6..2a4f774f6a 100644
--- a/test/output/colorLegendCategorical.html
+++ b/test/output/colorLegendCategorical.html
@@ -1,9 +1,8 @@
-<div class="plot-swatches plot-swatches-wrap">
+<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
   <style>
     .plot-swatches {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      margin-bottom: 0.5em;
     }
 
     .plot-swatch>svg {
diff --git a/test/output/colorLegendCategoricalColumns.html b/test/output/colorLegendCategoricalColumns.html
index 09021a270a..1ff8561193 100644
--- a/test/output/colorLegendCategoricalColumns.html
+++ b/test/output/colorLegendCategoricalColumns.html
@@ -1,9 +1,8 @@
-<div class="plot-swatches plot-swatches-columns" style="columns: 180px;">
+<div class="plot-swatches plot-swatches-columns" style="columns: 180px; margin-bottom: 0.5em;">
   <style>
     .plot-swatches {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      margin-bottom: 0.5em;
     }
 
     .plot-swatch>svg {
diff --git a/test/output/colorLegendCategoricalReverse.html b/test/output/colorLegendCategoricalReverse.html
index 2b4dbe0e01..11c0cabbd9 100644
--- a/test/output/colorLegendCategoricalReverse.html
+++ b/test/output/colorLegendCategoricalReverse.html
@@ -1,9 +1,8 @@
-<div class="plot-swatches plot-swatches-wrap">
+<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
   <style>
     .plot-swatches {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      margin-bottom: 0.5em;
     }
 
     .plot-swatch>svg {
diff --git a/test/output/colorLegendCategoricalScheme.html b/test/output/colorLegendCategoricalScheme.html
index 418c90975a..152e76ea44 100644
--- a/test/output/colorLegendCategoricalScheme.html
+++ b/test/output/colorLegendCategoricalScheme.html
@@ -1,9 +1,8 @@
-<div class="plot-swatches plot-swatches-wrap">
+<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
   <style>
     .plot-swatches {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      margin-bottom: 0.5em;
     }
 
     .plot-swatch>svg {
diff --git a/test/output/colorLegendOpacity.html b/test/output/colorLegendOpacity.html
index f9ad026403..d1f4d1d8a4 100644
--- a/test/output/colorLegendOpacity.html
+++ b/test/output/colorLegendOpacity.html
@@ -1,9 +1,8 @@
-<div class="plot-swatches plot-swatches-wrap">
+<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
   <style>
     .plot-swatches {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      margin-bottom: 0.5em;
     }
 
     .plot-swatch>svg {
diff --git a/test/output/colorLegendOrdinal.html b/test/output/colorLegendOrdinal.html
index 16b576fe16..d3dffc72df 100644
--- a/test/output/colorLegendOrdinal.html
+++ b/test/output/colorLegendOrdinal.html
@@ -1,9 +1,8 @@
-<div class="plot-swatches plot-swatches-wrap">
+<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
   <style>
     .plot-swatches {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      margin-bottom: 0.5em;
     }
 
     .plot-swatch>svg {
diff --git a/test/output/colorLegendOrdinalScheme.html b/test/output/colorLegendOrdinalScheme.html
index 8596015ddb..ed0999e940 100644
--- a/test/output/colorLegendOrdinalScheme.html
+++ b/test/output/colorLegendOrdinalScheme.html
@@ -1,9 +1,8 @@
-<div class="plot-swatches plot-swatches-wrap">
+<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
   <style>
     .plot-swatches {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      margin-bottom: 0.5em;
     }
 
     .plot-swatch>svg {
diff --git a/test/output/colorLegendOrdinalTickFormat.html b/test/output/colorLegendOrdinalTickFormat.html
index cd251430e8..44e3d8e586 100644
--- a/test/output/colorLegendOrdinalTickFormat.html
+++ b/test/output/colorLegendOrdinalTickFormat.html
@@ -1,9 +1,8 @@
-<div class="plot-swatches plot-swatches-wrap">
+<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
   <style>
     .plot-swatches {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      margin-bottom: 0.5em;
     }
 
     .plot-swatch>svg {
diff --git a/test/output/colorLegendOrdinalTickFormatFunction.html b/test/output/colorLegendOrdinalTickFormatFunction.html
index cd251430e8..44e3d8e586 100644
--- a/test/output/colorLegendOrdinalTickFormatFunction.html
+++ b/test/output/colorLegendOrdinalTickFormatFunction.html
@@ -1,9 +1,8 @@
-<div class="plot-swatches plot-swatches-wrap">
+<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
   <style>
     .plot-swatches {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      margin-bottom: 0.5em;
     }
 
     .plot-swatch>svg {
diff --git a/test/output/colorLegendQuantileSwatches.html b/test/output/colorLegendQuantileSwatches.html
index 5d0b0b8b61..3eb491327d 100644
--- a/test/output/colorLegendQuantileSwatches.html
+++ b/test/output/colorLegendQuantileSwatches.html
@@ -1,9 +1,8 @@
-<div class="plot-swatches plot-swatches-wrap" style="font-variant: tabular-nums;">
+<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em; font-variant: tabular-nums;">
   <style>
     .plot-swatches {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      margin-bottom: 0.5em;
     }
 
     .plot-swatch>svg {
diff --git a/test/output/colorSchemesOrdinal.html b/test/output/colorSchemesOrdinal.html
index e82039a2a6..854cd167d4 100644
--- a/test/output/colorSchemesOrdinal.html
+++ b/test/output/colorSchemesOrdinal.html
@@ -1,10 +1,9 @@
 <div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -28,12 +27,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>accent</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -59,12 +57,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -94,12 +91,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -139,12 +135,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -196,12 +191,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -225,12 +219,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>category10</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -256,12 +249,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -291,12 +283,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -336,12 +327,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -393,12 +383,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -422,12 +411,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>dark2</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -453,12 +441,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -488,12 +475,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -533,12 +519,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -590,12 +575,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -619,12 +603,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>paired</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -650,12 +633,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -685,12 +667,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -730,12 +711,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -787,12 +767,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -816,12 +795,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>pastel1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -847,12 +825,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -882,12 +859,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -927,12 +903,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -984,12 +959,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1013,12 +987,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>pastel2</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1044,12 +1017,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1079,12 +1051,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1124,12 +1095,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1181,12 +1151,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1210,12 +1179,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>set1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1241,12 +1209,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1276,12 +1243,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1321,12 +1287,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1378,12 +1343,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1407,12 +1371,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>set2</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1438,12 +1401,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1473,12 +1435,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1518,12 +1479,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1575,12 +1535,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1604,12 +1563,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>set3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1635,12 +1593,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1670,12 +1627,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1715,12 +1671,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1772,12 +1727,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1801,12 +1755,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>tableau10</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1832,12 +1785,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1867,12 +1819,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1912,12 +1863,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1969,12 +1919,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -1998,12 +1947,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>brbg</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2029,12 +1977,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2064,12 +2011,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2109,12 +2055,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2166,12 +2111,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2195,12 +2139,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>prgn</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2226,12 +2169,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2261,12 +2203,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2306,12 +2247,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2363,12 +2303,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2392,12 +2331,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>piyg</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2423,12 +2361,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2458,12 +2395,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2503,12 +2439,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2560,12 +2495,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2589,12 +2523,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>puor</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2620,12 +2553,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2655,12 +2587,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2700,12 +2631,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2757,12 +2687,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2786,12 +2715,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>rdbu</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2817,12 +2745,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2852,12 +2779,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2897,12 +2823,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2954,12 +2879,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -2983,12 +2907,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>rdgy</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3014,12 +2937,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3049,12 +2971,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3094,12 +3015,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3151,12 +3071,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3180,12 +3099,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>rdylbu</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3211,12 +3129,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3246,12 +3163,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3291,12 +3207,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3348,12 +3263,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3377,12 +3291,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>rdylgn</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3408,12 +3321,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3443,12 +3355,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3488,12 +3399,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3545,12 +3455,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3574,12 +3483,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>spectral</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3605,12 +3513,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3640,12 +3547,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3685,12 +3591,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3742,12 +3647,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3771,12 +3675,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>burd</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3802,12 +3705,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3837,12 +3739,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3882,12 +3783,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3939,12 +3839,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3968,12 +3867,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>buylrd</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -3999,12 +3897,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4034,12 +3931,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4079,12 +3975,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4136,12 +4031,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4165,12 +4059,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>blues</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4196,12 +4089,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4231,12 +4123,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4276,12 +4167,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4333,12 +4223,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4362,12 +4251,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>greens</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4393,12 +4281,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4428,12 +4315,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4473,12 +4359,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4530,12 +4415,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4559,12 +4443,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>greys</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4590,12 +4473,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4625,12 +4507,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4670,12 +4551,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4727,12 +4607,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4756,12 +4635,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>oranges</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4787,12 +4665,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4822,12 +4699,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4867,12 +4743,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4924,12 +4799,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4953,12 +4827,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>purples</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -4984,12 +4857,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5019,12 +4891,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5064,12 +4935,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5121,12 +4991,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5150,12 +5019,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>reds</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5181,12 +5049,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5216,12 +5083,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5261,12 +5127,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5318,12 +5183,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5347,12 +5211,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>turbo</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5378,12 +5241,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5413,12 +5275,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5458,12 +5319,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5515,12 +5375,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5544,12 +5403,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>viridis</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5575,12 +5433,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5610,12 +5467,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5655,12 +5511,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5712,12 +5567,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5741,12 +5595,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>magma</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5772,12 +5625,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5807,12 +5659,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5852,12 +5703,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5909,12 +5759,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5938,12 +5787,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>inferno</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -5969,12 +5817,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6004,12 +5851,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6049,12 +5895,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6106,12 +5951,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6135,12 +5979,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>plasma</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6166,12 +6009,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6201,12 +6043,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6246,12 +6087,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6303,12 +6143,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6332,12 +6171,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>cividis</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6363,12 +6201,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6398,12 +6235,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6443,12 +6279,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6500,12 +6335,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6529,12 +6363,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>cubehelix</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6560,12 +6393,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6595,12 +6427,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6640,12 +6471,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6697,12 +6527,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6726,12 +6555,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>warm</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6757,12 +6585,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6792,12 +6619,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6837,12 +6663,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6894,12 +6719,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6923,12 +6747,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>cool</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6954,12 +6777,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -6989,12 +6811,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7034,12 +6855,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7091,12 +6911,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7120,12 +6939,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>bugn</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7151,12 +6969,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7186,12 +7003,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7231,12 +7047,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7288,12 +7103,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7317,12 +7131,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>bupu</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7348,12 +7161,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7383,12 +7195,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7428,12 +7239,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7485,12 +7295,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7514,12 +7323,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>gnbu</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7545,12 +7353,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7580,12 +7387,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7625,12 +7431,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7682,12 +7487,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7711,12 +7515,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>orrd</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7742,12 +7545,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7777,12 +7579,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7822,12 +7623,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7879,12 +7679,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7908,12 +7707,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>pubu</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7939,12 +7737,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -7974,12 +7771,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8019,12 +7815,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8076,12 +7871,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8105,12 +7899,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>pubugn</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8136,12 +7929,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8171,12 +7963,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8216,12 +8007,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8273,12 +8063,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8302,12 +8091,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>purd</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8333,12 +8121,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8368,12 +8155,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8413,12 +8199,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8470,12 +8255,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8499,12 +8283,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>rdpu</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8530,12 +8313,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8565,12 +8347,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8610,12 +8391,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8667,12 +8447,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8696,12 +8475,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>ylgn</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8727,12 +8505,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8762,12 +8539,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8807,12 +8583,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8864,12 +8639,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8893,12 +8667,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>ylgnbu</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8924,12 +8697,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -8959,12 +8731,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -9004,12 +8775,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -9061,12 +8831,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -9090,12 +8859,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>ylorbr</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -9121,12 +8889,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -9156,12 +8923,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -9201,12 +8967,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -9258,12 +9023,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -9287,12 +9051,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>ylorrd</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -9318,12 +9081,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -9353,12 +9115,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -9398,12 +9159,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -9455,12 +9215,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -9484,12 +9243,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>rainbow</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -9515,12 +9273,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -9550,12 +9307,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -9595,12 +9351,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -9652,12 +9407,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -9681,12 +9435,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>sinebow</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -9712,12 +9465,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -9747,12 +9499,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
@@ -9792,12 +9543,11 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
diff --git a/test/output/decathlon.html b/test/output/decathlon.html
index e9f22f828f..72a157dcfb 100644
--- a/test/output/decathlon.html
+++ b/test/output/decathlon.html
@@ -1,10 +1,9 @@
 <figure class="plot-d6a7b5-figure" style="max-width: initial;">
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
diff --git a/test/output/energyProduction.html b/test/output/energyProduction.html
index e27c8311c8..0d453d2af2 100644
--- a/test/output/energyProduction.html
+++ b/test/output/energyProduction.html
@@ -1,10 +1,9 @@
 <figure class="plot-d6a7b5-figure" style="max-width: initial;">
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
diff --git a/test/output/frameFillCategorical.html b/test/output/frameFillCategorical.html
index 5880ec9571..9617d6085d 100644
--- a/test/output/frameFillCategorical.html
+++ b/test/output/frameFillCategorical.html
@@ -1,10 +1,9 @@
 <figure class="plot-d6a7b5-figure" style="max-width: initial;">
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
diff --git a/test/output/hexbinSymbol.html b/test/output/hexbinSymbol.html
index 4310c9fb62..12b2be3c66 100644
--- a/test/output/hexbinSymbol.html
+++ b/test/output/hexbinSymbol.html
@@ -1,10 +1,9 @@
 <figure class="plot-d6a7b5-figure" style="max-width: initial;">
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
diff --git a/test/output/hexbinZ.html b/test/output/hexbinZ.html
index f4f35918ad..d2239e5292 100644
--- a/test/output/hexbinZ.html
+++ b/test/output/hexbinZ.html
@@ -1,10 +1,9 @@
 <figure class="plot-d6a7b5-figure" style="max-width: initial;">
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
diff --git a/test/output/integerIntervalArea.html b/test/output/integerIntervalArea.html
index 45b07a8896..a99834e5c5 100644
--- a/test/output/integerIntervalArea.html
+++ b/test/output/integerIntervalArea.html
@@ -1,10 +1,9 @@
 <figure class="plot-d6a7b5-figure" style="max-width: initial;">
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
diff --git a/test/output/integerIntervalAreaZ.html b/test/output/integerIntervalAreaZ.html
index 773955f37c..3fd2edfd32 100644
--- a/test/output/integerIntervalAreaZ.html
+++ b/test/output/integerIntervalAreaZ.html
@@ -1,10 +1,9 @@
 <figure class="plot-d6a7b5-figure" style="max-width: initial;">
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
diff --git a/test/output/liborProjectionsFacet.html b/test/output/liborProjectionsFacet.html
index 1469444943..b9d5d47c24 100644
--- a/test/output/liborProjectionsFacet.html
+++ b/test/output/liborProjectionsFacet.html
@@ -1,10 +1,9 @@
 <figure class="plot-d6a7b5-figure" style="max-width: initial;">
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
diff --git a/test/output/likertSurvey.html b/test/output/likertSurvey.html
index 69e3096bba..9689ace735 100644
--- a/test/output/likertSurvey.html
+++ b/test/output/likertSurvey.html
@@ -1,10 +1,9 @@
 <figure class="plot-d6a7b5-figure" style="max-width: initial;">
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
diff --git a/test/output/penguinDensityZ.html b/test/output/penguinDensityZ.html
index 5c2ec9c3b5..746d33f9a4 100644
--- a/test/output/penguinDensityZ.html
+++ b/test/output/penguinDensityZ.html
@@ -1,10 +1,9 @@
 <figure class="plot-d6a7b5-figure" style="max-width: initial;">
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
diff --git a/test/output/penguinFacetDodgeIsland.html b/test/output/penguinFacetDodgeIsland.html
index 6b6205c6d3..50f5478f26 100644
--- a/test/output/penguinFacetDodgeIsland.html
+++ b/test/output/penguinFacetDodgeIsland.html
@@ -1,10 +1,9 @@
 <figure class="plot-d6a7b5-figure" style="max-width: initial;">
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
diff --git a/test/output/penguinFacetDodgeSymbol.html b/test/output/penguinFacetDodgeSymbol.html
index 27cdd74c96..cc7842b280 100644
--- a/test/output/penguinFacetDodgeSymbol.html
+++ b/test/output/penguinFacetDodgeSymbol.html
@@ -1,10 +1,9 @@
 <figure class="plot-d6a7b5-figure" style="max-width: initial;">
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
diff --git a/test/output/penguinSizeSymbols.html b/test/output/penguinSizeSymbols.html
index 3698db8498..77aaa747ff 100644
--- a/test/output/penguinSizeSymbols.html
+++ b/test/output/penguinSizeSymbols.html
@@ -1,10 +1,9 @@
 <figure class="plot-d6a7b5-figure" style="max-width: initial;">
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
diff --git a/test/output/penguinSpeciesCheysson.html b/test/output/penguinSpeciesCheysson.html
index e7a08a67c5..d353fa25e5 100644
--- a/test/output/penguinSpeciesCheysson.html
+++ b/test/output/penguinSpeciesCheysson.html
@@ -1,10 +1,9 @@
 <figure class="plot-d6a7b5-figure" style="max-width: initial;">
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
diff --git a/test/output/symbolLegendBasic.html b/test/output/symbolLegendBasic.html
index 0027f02e6e..b4c6bab6c0 100644
--- a/test/output/symbolLegendBasic.html
+++ b/test/output/symbolLegendBasic.html
@@ -1,9 +1,8 @@
-<div class="plot-swatches plot-swatches-wrap">
+<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
   <style>
     .plot-swatches {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      margin-bottom: 0.5em;
     }
 
     .plot-swatch>svg {
diff --git a/test/output/symbolLegendColorFill.html b/test/output/symbolLegendColorFill.html
index a148c89022..c121657aff 100644
--- a/test/output/symbolLegendColorFill.html
+++ b/test/output/symbolLegendColorFill.html
@@ -1,9 +1,8 @@
-<div class="plot-swatches plot-swatches-wrap">
+<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
   <style>
     .plot-swatches {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      margin-bottom: 0.5em;
     }
 
     .plot-swatch>svg {
diff --git a/test/output/symbolLegendColorStroke.html b/test/output/symbolLegendColorStroke.html
index 8ecaebdd92..d0ab036ed7 100644
--- a/test/output/symbolLegendColorStroke.html
+++ b/test/output/symbolLegendColorStroke.html
@@ -1,9 +1,8 @@
-<div class="plot-swatches plot-swatches-wrap">
+<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
   <style>
     .plot-swatches {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      margin-bottom: 0.5em;
     }
 
     .plot-swatch>svg {
diff --git a/test/output/symbolLegendDifferentColor.html b/test/output/symbolLegendDifferentColor.html
index 13ff64b6a2..a8d8cfc46e 100644
--- a/test/output/symbolLegendDifferentColor.html
+++ b/test/output/symbolLegendDifferentColor.html
@@ -1,9 +1,8 @@
-<div class="plot-swatches plot-swatches-wrap">
+<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
   <style>
     .plot-swatches {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      margin-bottom: 0.5em;
     }
 
     .plot-swatch>svg {
diff --git a/test/output/symbolLegendExplicitColor.html b/test/output/symbolLegendExplicitColor.html
index a148c89022..c121657aff 100644
--- a/test/output/symbolLegendExplicitColor.html
+++ b/test/output/symbolLegendExplicitColor.html
@@ -1,9 +1,8 @@
-<div class="plot-swatches plot-swatches-wrap">
+<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
   <style>
     .plot-swatches {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      margin-bottom: 0.5em;
     }
 
     .plot-swatch>svg {
diff --git a/test/output/symbolLegendFill.html b/test/output/symbolLegendFill.html
index 791085a67e..da9d306178 100644
--- a/test/output/symbolLegendFill.html
+++ b/test/output/symbolLegendFill.html
@@ -1,9 +1,8 @@
-<div class="plot-swatches plot-swatches-wrap">
+<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
   <style>
     .plot-swatches {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      margin-bottom: 0.5em;
     }
 
     .plot-swatch>svg {
diff --git a/test/output/symbolLegendImplicitRange.html b/test/output/symbolLegendImplicitRange.html
index a148c89022..c121657aff 100644
--- a/test/output/symbolLegendImplicitRange.html
+++ b/test/output/symbolLegendImplicitRange.html
@@ -1,9 +1,8 @@
-<div class="plot-swatches plot-swatches-wrap">
+<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
   <style>
     .plot-swatches {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      margin-bottom: 0.5em;
     }
 
     .plot-swatch>svg {
diff --git a/test/output/symbolLegendOpacityColor.html b/test/output/symbolLegendOpacityColor.html
index 7792fa1f4b..8b38db4387 100644
--- a/test/output/symbolLegendOpacityColor.html
+++ b/test/output/symbolLegendOpacityColor.html
@@ -1,9 +1,8 @@
-<div class="plot-swatches plot-swatches-wrap">
+<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
   <style>
     .plot-swatches {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      margin-bottom: 0.5em;
     }
 
     .plot-swatch>svg {
diff --git a/test/output/symbolLegendOpacityFill.html b/test/output/symbolLegendOpacityFill.html
index b3df277a12..24232dd8b6 100644
--- a/test/output/symbolLegendOpacityFill.html
+++ b/test/output/symbolLegendOpacityFill.html
@@ -1,9 +1,8 @@
-<div class="plot-swatches plot-swatches-wrap">
+<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
   <style>
     .plot-swatches {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      margin-bottom: 0.5em;
     }
 
     .plot-swatch>svg {
diff --git a/test/output/symbolLegendOpacityStroke.html b/test/output/symbolLegendOpacityStroke.html
index 30c2fa9b2a..d4664bfe84 100644
--- a/test/output/symbolLegendOpacityStroke.html
+++ b/test/output/symbolLegendOpacityStroke.html
@@ -1,9 +1,8 @@
-<div class="plot-swatches plot-swatches-wrap">
+<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
   <style>
     .plot-swatches {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      margin-bottom: 0.5em;
     }
 
     .plot-swatch>svg {
diff --git a/test/output/symbolLegendStroke.html b/test/output/symbolLegendStroke.html
index 17446257e6..d5d3d2c5ad 100644
--- a/test/output/symbolLegendStroke.html
+++ b/test/output/symbolLegendStroke.html
@@ -1,9 +1,8 @@
-<div class="plot-swatches plot-swatches-wrap">
+<div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
   <style>
     .plot-swatches {
       font-family: system-ui, sans-serif;
       font-size: 10px;
-      margin-bottom: 0.5em;
     }
 
     .plot-swatch>svg {
diff --git a/test/output/symbolSetFillColor.html b/test/output/symbolSetFillColor.html
index 972bee3f07..b20027ab95 100644
--- a/test/output/symbolSetFillColor.html
+++ b/test/output/symbolSetFillColor.html
@@ -1,10 +1,9 @@
 <figure class="plot-d6a7b5-figure" style="max-width: initial;">
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
diff --git a/test/output/symbolSetStrokeColor.html b/test/output/symbolSetStrokeColor.html
index 27c0f78d40..5405dd93e9 100644
--- a/test/output/symbolSetStrokeColor.html
+++ b/test/output/symbolSetStrokeColor.html
@@ -1,10 +1,9 @@
 <figure class="plot-d6a7b5-figure" style="max-width: initial;">
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
diff --git a/test/output/title.html b/test/output/title.html
index 42281deb04..86fb9a7451 100644
--- a/test/output/title.html
+++ b/test/output/title.html
@@ -1,12 +1,11 @@
 <figure class="plot-d6a7b5-figure" style="max-width: initial;">
   <h2>A title about penguins</h2>
   <h3>A subtitle about body_mass_g</h3>
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {
diff --git a/test/output/trafficHorizon.html b/test/output/trafficHorizon.html
index 14013e3bb2..fe044d8d59 100644
--- a/test/output/trafficHorizon.html
+++ b/test/output/trafficHorizon.html
@@ -1,10 +1,9 @@
 <figure class="plot-d6a7b5-figure" style="max-width: initial;">
-  <div class="plot-swatches plot-swatches-wrap">
+  <div class="plot-swatches plot-swatches-wrap" style="margin-bottom: 0.5em;">
     <style>
       .plot-swatches {
         font-family: system-ui, sans-serif;
         font-size: 10px;
-        margin-bottom: 0.5em;
       }
 
       .plot-swatch>svg {