diff --git a/src/legends/swatches.js b/src/legends/swatches.js
index e5876aa546..ca18749c5e 100644
--- a/src/legends/swatches.js
+++ b/src/legends/swatches.js
@@ -79,7 +79,10 @@ function legendItems(scale, options = {}, swatch) {
     swatchSize = 15,
     swatchWidth = swatchSize,
     swatchHeight = swatchSize,
-    marginLeft = 0,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
     className,
     style,
     width
@@ -153,7 +156,6 @@ function legendItems(scale, options = {}, swatch) {
         `.${className}-swatches {
   font-family: system-ui, sans-serif;
   font-size: 10px;
-  margin-bottom: 0.5em;
 }
 .${className}-swatch > svg {
   margin-right: 0.5em;
@@ -162,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 {