diff --git a/README.md b/README.md
index ffa4a902a4..f6e7910af4 100644
--- a/README.md
+++ b/README.md
@@ -648,7 +648,8 @@ If there is no scale with the given *scaleName* on the given *plot*, then *plot*
 
 Categorical and ordinal color legends are rendered as swatches, unless *options*.**legend** is set to *ramp*. The swatches can be configured with the following options:
 
-* *options*.**tickFormat** - a format function for the labels
+* *options*.**label** - the scale’s label
+* *options*.**tickFormat** - a format function for the domain values
 * *options*.**swatchSize** - the size of the swatch (if square)
 * *options*.**swatchWidth** - the swatches’ width
 * *options*.**swatchHeight** - the swatches’ height
diff --git a/src/legends.js b/src/legends.js
index 1fab8f28f0..8bd962eefe 100644
--- a/src/legends.js
+++ b/src/legends.js
@@ -39,8 +39,8 @@ export function exposeLegends(scales, context, defaults = {}) {
   };
 }
 
-function legendOptions(context, {label, ticks, tickFormat} = {}, options) {
-  return inherit(options, context, {label, ticks, tickFormat});
+function legendOptions(context, {label, ticks, tickFormat} = {}, options = {}) {
+  return inherit(options, context, {label, ticks, tickFormat, ...options});
 }
 
 function legendColor(color, {legend = true, ...options}) {
diff --git a/src/legends/swatches.js b/src/legends/swatches.js
index c6cff68d86..8fcddcca96 100644
--- a/src/legends/swatches.js
+++ b/src/legends/swatches.js
@@ -89,7 +89,7 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
     columns,
     tickFormat,
     fontVariant = inferFontVariant(scale),
-    // TODO label,
+    label = scale.label,
     swatchSize = 15,
     swatchWidth = swatchSize,
     swatchHeight = swatchSize,
@@ -112,10 +112,23 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
       `
     );
 
-  let extraStyle;
+  const hasTitle = label != null && label !== "";
+  const palette = hasTitle
+    ? swatches.call((div) => div.append("div").attr("class", `${className}-title`).text(label)).append("div")
+    : swatches;
+  palette.classed(`${className}-palette`, true);
+
+  let extraStyle = hasTitle
+    ? `
+      .${className}-title {
+        font-weight: bold;
+        display: block;
+        margin-bottom: 0.4em;
+      }`
+    : "";
 
   if (columns != null) {
-    extraStyle = `
+    extraStyle += `
       .${className}-swatch {
         display: flex;
         align-items: center;
@@ -132,7 +145,7 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
       }
     `;
 
-    swatches
+    palette
       .style("columns", columns)
       .selectAll()
       .data(scale.domain)
@@ -144,10 +157,10 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
         item.append("div").attr("class", `${className}-label`).attr("title", tickFormat).text(tickFormat)
       );
   } else {
-    extraStyle = `
-      .${className} {
+    extraStyle += `
+      .${className}-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -158,7 +171,7 @@ function legendItems(scale, options = {}, swatch, swatchStyle) {
       }
     `;
 
-    swatches
+    palette
       .selectAll()
       .data(scale.domain)
       .enter()
diff --git a/test/output/athletesSortNationality.html b/test/output/athletesSortNationality.html
index 0793f1c6a1..142ea8bc49 100644
--- a/test/output/athletesSortNationality.html
+++ b/test/output/athletesSortNationality.html
@@ -17,9 +17,15 @@
         margin-right: 0.5em;
       }
 
-      .plot {
+      .plot-title {
+        font-weight: bold;
+        display: block;
+        margin-bottom: 0.4em;
+      }
+
+      .plot-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -29,27 +35,29 @@
         align-items: center;
         margin-right: 1em;
       }
-    </style><span class="plot-swatch"><svg fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>ESP</span><span class="plot-swatch"><svg fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>KOR</span><span class="plot-swatch"><svg fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>CAN</span><span class="plot-swatch"><svg fill="#76b7b2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>MDA</span><span class="plot-swatch"><svg fill="#59a14f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>NZL</span><span class="plot-swatch"><svg fill="#edc949" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>AUS</span><span class="plot-swatch"><svg fill="#af7aa1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>USA</span><span class="plot-swatch"><svg fill="#ff9da7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>ETH</span><span class="plot-swatch"><svg fill="#9c755f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>BRN</span><span class="plot-swatch"><svg fill="#bab0ab" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>IOA</span>
+    </style>
+    <div class="plot-title">nationality</div>
+    <div class="plot-palette"><span class="plot-swatch"><svg fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>ESP</span><span class="plot-swatch"><svg fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>KOR</span><span class="plot-swatch"><svg fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>CAN</span><span class="plot-swatch"><svg fill="#76b7b2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>MDA</span><span class="plot-swatch"><svg fill="#59a14f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>NZL</span><span class="plot-swatch"><svg fill="#edc949" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>AUS</span><span class="plot-swatch"><svg fill="#af7aa1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>USA</span><span class="plot-swatch"><svg fill="#ff9da7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>ETH</span><span class="plot-swatch"><svg fill="#9c755f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>BRN</span><span class="plot-swatch"><svg fill="#bab0ab" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>IOA</span></div>
   </div><svg class="plot-2" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <style>
       .plot-2 {
diff --git a/test/output/athletesSortNullLimit.html b/test/output/athletesSortNullLimit.html
index 7068f1b8f0..c0f2f58940 100644
--- a/test/output/athletesSortNullLimit.html
+++ b/test/output/athletesSortNullLimit.html
@@ -17,9 +17,15 @@
         margin-right: 0.5em;
       }
 
-      .plot {
+      .plot-title {
+        font-weight: bold;
+        display: block;
+        margin-bottom: 0.4em;
+      }
+
+      .plot-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -29,27 +35,29 @@
         align-items: center;
         margin-right: 1em;
       }
-    </style><span class="plot-swatch"><svg fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>ESP</span><span class="plot-swatch"><svg fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>KOR</span><span class="plot-swatch"><svg fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>CAN</span><span class="plot-swatch"><svg fill="#76b7b2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>MDA</span><span class="plot-swatch"><svg fill="#59a14f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>NZL</span><span class="plot-swatch"><svg fill="#edc949" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>AUS</span><span class="plot-swatch"><svg fill="#af7aa1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>USA</span><span class="plot-swatch"><svg fill="#ff9da7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>ETH</span><span class="plot-swatch"><svg fill="#9c755f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>BRN</span><span class="plot-swatch"><svg fill="#bab0ab" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>IOA</span>
+    </style>
+    <div class="plot-title">nationality</div>
+    <div class="plot-palette"><span class="plot-swatch"><svg fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>ESP</span><span class="plot-swatch"><svg fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>KOR</span><span class="plot-swatch"><svg fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>CAN</span><span class="plot-swatch"><svg fill="#76b7b2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>MDA</span><span class="plot-swatch"><svg fill="#59a14f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>NZL</span><span class="plot-swatch"><svg fill="#edc949" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>AUS</span><span class="plot-swatch"><svg fill="#af7aa1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>USA</span><span class="plot-swatch"><svg fill="#ff9da7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>ETH</span><span class="plot-swatch"><svg fill="#9c755f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>BRN</span><span class="plot-swatch"><svg fill="#bab0ab" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>IOA</span></div>
   </div><svg class="plot-2" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <style>
       .plot-2 {
diff --git a/test/output/caltrain.html b/test/output/caltrain.html
index 3305eae204..0805e334d8 100644
--- a/test/output/caltrain.html
+++ b/test/output/caltrain.html
@@ -1,5 +1,5 @@
 <figure style="max-width: initial;">
-  <div class="plot" style="
+  <div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -17,9 +17,9 @@
         margin-right: 0.5em;
       }
 
-      .plot {
+      .plot-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
diff --git a/test/output/colorLegendCategorical.html b/test/output/colorLegendCategorical.html
index 9c6254aa84..057e097cc7 100644
--- a/test/output/colorLegendCategorical.html
+++ b/test/output/colorLegendCategorical.html
@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -16,9 +16,9 @@
       margin-right: 0.5em;
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }
diff --git a/test/output/colorLegendCategoricalColumns.html b/test/output/colorLegendCategoricalColumns.html
index 0faa6e6f7f..563dd8b2ae 100644
--- a/test/output/colorLegendCategoricalColumns.html
+++ b/test/output/colorLegendCategoricalColumns.html
@@ -1,4 +1,7 @@
-<div class="plot" style="--swatchWidth: 15px; --swatchHeight: 15px; columns: 180px;">
+<div class="plot" style="
+        --swatchWidth: 15px;
+        --swatchHeight: 15px;
+      ">
   <style>
     .plot {
       font-family: system-ui, sans-serif;
@@ -13,6 +16,12 @@
       margin-right: 0.5em;
     }
 
+    .plot-title {
+      font-weight: bold;
+      display: block;
+      margin-bottom: 0.4em;
+    }
+
     .plot-swatch {
       display: flex;
       align-items: center;
@@ -30,54 +39,57 @@
       text-overflow: ellipsis;
     }
   </style>
-  <div class="plot-swatch"><svg fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>
-    <div class="plot-label" title="Wholesale and Retail Trade">Wholesale and Retail Trade</div>
-  </div>
-  <div class="plot-swatch"><svg fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>
-    <div class="plot-label" title="Manufacturing">Manufacturing</div>
-  </div>
-  <div class="plot-swatch"><svg fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>
-    <div class="plot-label" title="Leisure and hospitality">Leisure and hospitality</div>
-  </div>
-  <div class="plot-swatch"><svg fill="#76b7b2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>
-    <div class="plot-label" title="Business services">Business services</div>
-  </div>
-  <div class="plot-swatch"><svg fill="#59a14f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>
-    <div class="plot-label" title="Construction">Construction</div>
-  </div>
-  <div class="plot-swatch"><svg fill="#edc949" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>
-    <div class="plot-label" title="Education and Health">Education and Health</div>
-  </div>
-  <div class="plot-swatch"><svg fill="#af7aa1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>
-    <div class="plot-label" title="Government">Government</div>
-  </div>
-  <div class="plot-swatch"><svg fill="#ff9da7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>
-    <div class="plot-label" title="Finance">Finance</div>
-  </div>
-  <div class="plot-swatch"><svg fill="#9c755f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>
-    <div class="plot-label" title="Self-employed">Self-employed</div>
-  </div>
-  <div class="plot-swatch"><svg fill="#bab0ab" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>
-    <div class="plot-label" title="Other">Other</div>
+  <div class="plot-title">Industry</div>
+  <div class="plot-palette" style="columns: 180px;">
+    <div class="plot-swatch"><svg fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>
+      <div class="plot-label" title="Wholesale and Retail Trade">Wholesale and Retail Trade</div>
+    </div>
+    <div class="plot-swatch"><svg fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>
+      <div class="plot-label" title="Manufacturing">Manufacturing</div>
+    </div>
+    <div class="plot-swatch"><svg fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>
+      <div class="plot-label" title="Leisure and hospitality">Leisure and hospitality</div>
+    </div>
+    <div class="plot-swatch"><svg fill="#76b7b2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>
+      <div class="plot-label" title="Business services">Business services</div>
+    </div>
+    <div class="plot-swatch"><svg fill="#59a14f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>
+      <div class="plot-label" title="Construction">Construction</div>
+    </div>
+    <div class="plot-swatch"><svg fill="#edc949" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>
+      <div class="plot-label" title="Education and Health">Education and Health</div>
+    </div>
+    <div class="plot-swatch"><svg fill="#af7aa1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>
+      <div class="plot-label" title="Government">Government</div>
+    </div>
+    <div class="plot-swatch"><svg fill="#ff9da7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>
+      <div class="plot-label" title="Finance">Finance</div>
+    </div>
+    <div class="plot-swatch"><svg fill="#9c755f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>
+      <div class="plot-label" title="Self-employed">Self-employed</div>
+    </div>
+    <div class="plot-swatch"><svg fill="#bab0ab" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>
+      <div class="plot-label" title="Other">Other</div>
+    </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/test/output/colorLegendCategoricalReverse.html b/test/output/colorLegendCategoricalReverse.html
index 7e7635fbd5..22a3e3a986 100644
--- a/test/output/colorLegendCategoricalReverse.html
+++ b/test/output/colorLegendCategoricalReverse.html
@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -16,9 +16,9 @@
       margin-right: 0.5em;
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }
diff --git a/test/output/colorLegendCategoricalScheme.html b/test/output/colorLegendCategoricalScheme.html
index 80ec28b50b..27d45787b2 100644
--- a/test/output/colorLegendCategoricalScheme.html
+++ b/test/output/colorLegendCategoricalScheme.html
@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -16,9 +16,9 @@
       margin-right: 0.5em;
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }
diff --git a/test/output/colorLegendOpacity.html b/test/output/colorLegendOpacity.html
index f60bf34df7..2881e9d331 100644
--- a/test/output/colorLegendOpacity.html
+++ b/test/output/colorLegendOpacity.html
@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -16,9 +16,9 @@
       margin-right: 0.5em;
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }
diff --git a/test/output/colorLegendOrdinal.html b/test/output/colorLegendOrdinal.html
index 0cb8ddd325..b76e589f28 100644
--- a/test/output/colorLegendOrdinal.html
+++ b/test/output/colorLegendOrdinal.html
@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -16,9 +16,9 @@
       margin-right: 0.5em;
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }
diff --git a/test/output/colorLegendOrdinalScheme.html b/test/output/colorLegendOrdinalScheme.html
index 15a49aa686..f16da92672 100644
--- a/test/output/colorLegendOrdinalScheme.html
+++ b/test/output/colorLegendOrdinalScheme.html
@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -16,9 +16,9 @@
       margin-right: 0.5em;
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }
diff --git a/test/output/colorLegendOrdinalTickFormat.html b/test/output/colorLegendOrdinalTickFormat.html
index c6a8e34007..054792bcbb 100644
--- a/test/output/colorLegendOrdinalTickFormat.html
+++ b/test/output/colorLegendOrdinalTickFormat.html
@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -16,9 +16,9 @@
       margin-right: 0.5em;
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }
diff --git a/test/output/colorLegendOrdinalTickFormatFunction.html b/test/output/colorLegendOrdinalTickFormatFunction.html
index c6a8e34007..054792bcbb 100644
--- a/test/output/colorLegendOrdinalTickFormatFunction.html
+++ b/test/output/colorLegendOrdinalTickFormatFunction.html
@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -16,9 +16,9 @@
       margin-right: 0.5em;
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }
diff --git a/test/output/colorLegendQuantileSwatches.html b/test/output/colorLegendQuantileSwatches.html
index c3d5f31d4c..dab70d768e 100644
--- a/test/output/colorLegendQuantileSwatches.html
+++ b/test/output/colorLegendQuantileSwatches.html
@@ -13,9 +13,15 @@
       margin-right: 0.5em;
     }
 
-    .plot {
+    .plot-title {
+      font-weight: bold;
+      display: block;
+      margin-bottom: 0.4em;
+    }
+
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }
@@ -25,17 +31,19 @@
       align-items: center;
       margin-right: 1em;
     }
-  </style><span class="plot-swatch"><svg fill="#320a5e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>200</span><span class="plot-swatch"><svg fill="#781c6d" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>800</span><span class="plot-swatch"><svg fill="#bc3754" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>1,800</span><span class="plot-swatch"><svg fill="#ed6925" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>3,201</span><span class="plot-swatch"><svg fill="#fbb61a" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>5,001</span><span class="plot-swatch"><svg fill="#fcffa4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <rect width="100%" height="100%"></rect>
-    </svg>7,201</span>
+  </style>
+  <div class="plot-title">Inferno</div>
+  <div class="plot-palette"><span class="plot-swatch"><svg fill="#320a5e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>200</span><span class="plot-swatch"><svg fill="#781c6d" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>800</span><span class="plot-swatch"><svg fill="#bc3754" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>1,800</span><span class="plot-swatch"><svg fill="#ed6925" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>3,201</span><span class="plot-swatch"><svg fill="#fbb61a" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>5,001</span><span class="plot-swatch"><svg fill="#fcffa4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <rect width="100%" height="100%"></rect>
+      </svg>7,201</span></div>
 </div>
\ No newline at end of file
diff --git a/test/output/colorSchemesOrdinal.html b/test/output/colorSchemesOrdinal.html
index a54b4b4c1f..b7a1d08788 100644
--- a/test/output/colorSchemesOrdinal.html
+++ b/test/output/colorSchemesOrdinal.html
@@ -1,5 +1,5 @@
 <div>
-  <div class="plot" style="
+  <div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -17,9 +17,9 @@
         margin-right: 0.5em;
       }
 
-      .plot {
+      .plot-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -33,7 +33,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>accent</span>
   </div>
-  <div class="plot-2" style="
+  <div class="plot-2 plot-2-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -51,9 +51,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-2 {
+      .plot-2-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -69,7 +69,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-3" style="
+  <div class="plot-3 plot-3-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -87,9 +87,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-3 {
+      .plot-3-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -109,7 +109,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-4" style="
+  <div class="plot-4 plot-4-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -127,9 +127,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-4 {
+      .plot-4-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -159,7 +159,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-5" style="
+  <div class="plot-5 plot-5-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -177,9 +177,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-5 {
+      .plot-5-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -221,7 +221,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-6" style="
+  <div class="plot-6 plot-6-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -239,9 +239,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-6 {
+      .plot-6-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -255,7 +255,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>category10</span>
   </div>
-  <div class="plot-7" style="
+  <div class="plot-7 plot-7-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -273,9 +273,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-7 {
+      .plot-7-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -291,7 +291,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-8" style="
+  <div class="plot-8 plot-8-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -309,9 +309,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-8 {
+      .plot-8-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -331,7 +331,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-9" style="
+  <div class="plot-9 plot-9-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -349,9 +349,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-9 {
+      .plot-9-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -381,7 +381,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-10" style="
+  <div class="plot-10 plot-10-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -399,9 +399,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-10 {
+      .plot-10-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -443,7 +443,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-11" style="
+  <div class="plot-11 plot-11-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -461,9 +461,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-11 {
+      .plot-11-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -477,7 +477,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>dark2</span>
   </div>
-  <div class="plot-12" style="
+  <div class="plot-12 plot-12-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -495,9 +495,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-12 {
+      .plot-12-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -513,7 +513,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-13" style="
+  <div class="plot-13 plot-13-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -531,9 +531,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-13 {
+      .plot-13-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -553,7 +553,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-14" style="
+  <div class="plot-14 plot-14-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -571,9 +571,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-14 {
+      .plot-14-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -603,7 +603,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-15" style="
+  <div class="plot-15 plot-15-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -621,9 +621,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-15 {
+      .plot-15-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -665,7 +665,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-16" style="
+  <div class="plot-16 plot-16-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -683,9 +683,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-16 {
+      .plot-16-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -699,7 +699,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>paired</span>
   </div>
-  <div class="plot-17" style="
+  <div class="plot-17 plot-17-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -717,9 +717,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-17 {
+      .plot-17-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -735,7 +735,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-18" style="
+  <div class="plot-18 plot-18-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -753,9 +753,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-18 {
+      .plot-18-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -775,7 +775,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-19" style="
+  <div class="plot-19 plot-19-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -793,9 +793,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-19 {
+      .plot-19-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -825,7 +825,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-20" style="
+  <div class="plot-20 plot-20-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -843,9 +843,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-20 {
+      .plot-20-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -887,7 +887,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-21" style="
+  <div class="plot-21 plot-21-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -905,9 +905,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-21 {
+      .plot-21-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -921,7 +921,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>pastel1</span>
   </div>
-  <div class="plot-22" style="
+  <div class="plot-22 plot-22-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -939,9 +939,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-22 {
+      .plot-22-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -957,7 +957,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-23" style="
+  <div class="plot-23 plot-23-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -975,9 +975,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-23 {
+      .plot-23-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -997,7 +997,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-24" style="
+  <div class="plot-24 plot-24-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -1015,9 +1015,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-24 {
+      .plot-24-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -1047,7 +1047,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-25" style="
+  <div class="plot-25 plot-25-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -1065,9 +1065,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-25 {
+      .plot-25-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -1109,7 +1109,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-26" style="
+  <div class="plot-26 plot-26-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -1127,9 +1127,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-26 {
+      .plot-26-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -1143,7 +1143,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>pastel2</span>
   </div>
-  <div class="plot-27" style="
+  <div class="plot-27 plot-27-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -1161,9 +1161,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-27 {
+      .plot-27-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -1179,7 +1179,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-28" style="
+  <div class="plot-28 plot-28-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -1197,9 +1197,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-28 {
+      .plot-28-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -1219,7 +1219,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-29" style="
+  <div class="plot-29 plot-29-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -1237,9 +1237,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-29 {
+      .plot-29-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -1269,7 +1269,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-30" style="
+  <div class="plot-30 plot-30-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -1287,9 +1287,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-30 {
+      .plot-30-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -1331,7 +1331,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-31" style="
+  <div class="plot-31 plot-31-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -1349,9 +1349,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-31 {
+      .plot-31-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -1365,7 +1365,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>set1</span>
   </div>
-  <div class="plot-32" style="
+  <div class="plot-32 plot-32-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -1383,9 +1383,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-32 {
+      .plot-32-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -1401,7 +1401,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-33" style="
+  <div class="plot-33 plot-33-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -1419,9 +1419,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-33 {
+      .plot-33-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -1441,7 +1441,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-34" style="
+  <div class="plot-34 plot-34-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -1459,9 +1459,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-34 {
+      .plot-34-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -1491,7 +1491,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-35" style="
+  <div class="plot-35 plot-35-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -1509,9 +1509,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-35 {
+      .plot-35-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -1553,7 +1553,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-36" style="
+  <div class="plot-36 plot-36-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -1571,9 +1571,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-36 {
+      .plot-36-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -1587,7 +1587,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>set2</span>
   </div>
-  <div class="plot-37" style="
+  <div class="plot-37 plot-37-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -1605,9 +1605,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-37 {
+      .plot-37-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -1623,7 +1623,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-38" style="
+  <div class="plot-38 plot-38-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -1641,9 +1641,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-38 {
+      .plot-38-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -1663,7 +1663,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-39" style="
+  <div class="plot-39 plot-39-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -1681,9 +1681,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-39 {
+      .plot-39-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -1713,7 +1713,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-40" style="
+  <div class="plot-40 plot-40-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -1731,9 +1731,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-40 {
+      .plot-40-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -1775,7 +1775,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-41" style="
+  <div class="plot-41 plot-41-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -1793,9 +1793,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-41 {
+      .plot-41-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -1809,7 +1809,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>set3</span>
   </div>
-  <div class="plot-42" style="
+  <div class="plot-42 plot-42-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -1827,9 +1827,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-42 {
+      .plot-42-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -1845,7 +1845,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-43" style="
+  <div class="plot-43 plot-43-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -1863,9 +1863,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-43 {
+      .plot-43-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -1885,7 +1885,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-44" style="
+  <div class="plot-44 plot-44-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -1903,9 +1903,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-44 {
+      .plot-44-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -1935,7 +1935,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-45" style="
+  <div class="plot-45 plot-45-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -1953,9 +1953,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-45 {
+      .plot-45-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -1997,7 +1997,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-46" style="
+  <div class="plot-46 plot-46-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -2015,9 +2015,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-46 {
+      .plot-46-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -2031,7 +2031,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>tableau10</span>
   </div>
-  <div class="plot-47" style="
+  <div class="plot-47 plot-47-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -2049,9 +2049,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-47 {
+      .plot-47-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -2067,7 +2067,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-48" style="
+  <div class="plot-48 plot-48-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -2085,9 +2085,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-48 {
+      .plot-48-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -2107,7 +2107,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-49" style="
+  <div class="plot-49 plot-49-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -2125,9 +2125,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-49 {
+      .plot-49-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -2157,7 +2157,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-50" style="
+  <div class="plot-50 plot-50-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -2175,9 +2175,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-50 {
+      .plot-50-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -2219,7 +2219,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-51" style="
+  <div class="plot-51 plot-51-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -2237,9 +2237,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-51 {
+      .plot-51-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -2253,7 +2253,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>brbg</span>
   </div>
-  <div class="plot-52" style="
+  <div class="plot-52 plot-52-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -2271,9 +2271,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-52 {
+      .plot-52-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -2289,7 +2289,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-53" style="
+  <div class="plot-53 plot-53-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -2307,9 +2307,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-53 {
+      .plot-53-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -2329,7 +2329,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-54" style="
+  <div class="plot-54 plot-54-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -2347,9 +2347,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-54 {
+      .plot-54-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -2379,7 +2379,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-55" style="
+  <div class="plot-55 plot-55-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -2397,9 +2397,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-55 {
+      .plot-55-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -2441,7 +2441,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-56" style="
+  <div class="plot-56 plot-56-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -2459,9 +2459,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-56 {
+      .plot-56-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -2475,7 +2475,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>prgn</span>
   </div>
-  <div class="plot-57" style="
+  <div class="plot-57 plot-57-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -2493,9 +2493,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-57 {
+      .plot-57-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -2511,7 +2511,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-58" style="
+  <div class="plot-58 plot-58-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -2529,9 +2529,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-58 {
+      .plot-58-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -2551,7 +2551,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-59" style="
+  <div class="plot-59 plot-59-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -2569,9 +2569,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-59 {
+      .plot-59-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -2601,7 +2601,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-60" style="
+  <div class="plot-60 plot-60-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -2619,9 +2619,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-60 {
+      .plot-60-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -2663,7 +2663,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-61" style="
+  <div class="plot-61 plot-61-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -2681,9 +2681,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-61 {
+      .plot-61-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -2697,7 +2697,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>piyg</span>
   </div>
-  <div class="plot-62" style="
+  <div class="plot-62 plot-62-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -2715,9 +2715,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-62 {
+      .plot-62-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -2733,7 +2733,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-63" style="
+  <div class="plot-63 plot-63-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -2751,9 +2751,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-63 {
+      .plot-63-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -2773,7 +2773,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-64" style="
+  <div class="plot-64 plot-64-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -2791,9 +2791,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-64 {
+      .plot-64-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -2823,7 +2823,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-65" style="
+  <div class="plot-65 plot-65-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -2841,9 +2841,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-65 {
+      .plot-65-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -2885,7 +2885,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-66" style="
+  <div class="plot-66 plot-66-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -2903,9 +2903,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-66 {
+      .plot-66-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -2919,7 +2919,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>puor</span>
   </div>
-  <div class="plot-67" style="
+  <div class="plot-67 plot-67-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -2937,9 +2937,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-67 {
+      .plot-67-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -2955,7 +2955,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-68" style="
+  <div class="plot-68 plot-68-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -2973,9 +2973,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-68 {
+      .plot-68-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -2995,7 +2995,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-69" style="
+  <div class="plot-69 plot-69-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -3013,9 +3013,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-69 {
+      .plot-69-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -3045,7 +3045,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-70" style="
+  <div class="plot-70 plot-70-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -3063,9 +3063,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-70 {
+      .plot-70-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -3107,7 +3107,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-71" style="
+  <div class="plot-71 plot-71-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -3125,9 +3125,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-71 {
+      .plot-71-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -3141,7 +3141,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>rdbu</span>
   </div>
-  <div class="plot-72" style="
+  <div class="plot-72 plot-72-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -3159,9 +3159,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-72 {
+      .plot-72-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -3177,7 +3177,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-73" style="
+  <div class="plot-73 plot-73-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -3195,9 +3195,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-73 {
+      .plot-73-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -3217,7 +3217,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-74" style="
+  <div class="plot-74 plot-74-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -3235,9 +3235,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-74 {
+      .plot-74-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -3267,7 +3267,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-75" style="
+  <div class="plot-75 plot-75-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -3285,9 +3285,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-75 {
+      .plot-75-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -3329,7 +3329,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-76" style="
+  <div class="plot-76 plot-76-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -3347,9 +3347,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-76 {
+      .plot-76-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -3363,7 +3363,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>rdgy</span>
   </div>
-  <div class="plot-77" style="
+  <div class="plot-77 plot-77-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -3381,9 +3381,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-77 {
+      .plot-77-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -3399,7 +3399,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-78" style="
+  <div class="plot-78 plot-78-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -3417,9 +3417,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-78 {
+      .plot-78-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -3439,7 +3439,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-79" style="
+  <div class="plot-79 plot-79-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -3457,9 +3457,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-79 {
+      .plot-79-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -3489,7 +3489,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-80" style="
+  <div class="plot-80 plot-80-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -3507,9 +3507,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-80 {
+      .plot-80-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -3551,7 +3551,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-81" style="
+  <div class="plot-81 plot-81-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -3569,9 +3569,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-81 {
+      .plot-81-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -3585,7 +3585,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>rdylbu</span>
   </div>
-  <div class="plot-82" style="
+  <div class="plot-82 plot-82-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -3603,9 +3603,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-82 {
+      .plot-82-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -3621,7 +3621,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-83" style="
+  <div class="plot-83 plot-83-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -3639,9 +3639,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-83 {
+      .plot-83-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -3661,7 +3661,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-84" style="
+  <div class="plot-84 plot-84-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -3679,9 +3679,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-84 {
+      .plot-84-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -3711,7 +3711,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-85" style="
+  <div class="plot-85 plot-85-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -3729,9 +3729,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-85 {
+      .plot-85-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -3773,7 +3773,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-86" style="
+  <div class="plot-86 plot-86-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -3791,9 +3791,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-86 {
+      .plot-86-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -3807,7 +3807,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>rdylgn</span>
   </div>
-  <div class="plot-87" style="
+  <div class="plot-87 plot-87-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -3825,9 +3825,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-87 {
+      .plot-87-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -3843,7 +3843,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-88" style="
+  <div class="plot-88 plot-88-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -3861,9 +3861,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-88 {
+      .plot-88-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -3883,7 +3883,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-89" style="
+  <div class="plot-89 plot-89-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -3901,9 +3901,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-89 {
+      .plot-89-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -3933,7 +3933,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-90" style="
+  <div class="plot-90 plot-90-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -3951,9 +3951,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-90 {
+      .plot-90-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -3995,7 +3995,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-91" style="
+  <div class="plot-91 plot-91-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -4013,9 +4013,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-91 {
+      .plot-91-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -4029,7 +4029,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>spectral</span>
   </div>
-  <div class="plot-92" style="
+  <div class="plot-92 plot-92-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -4047,9 +4047,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-92 {
+      .plot-92-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -4065,7 +4065,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-93" style="
+  <div class="plot-93 plot-93-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -4083,9 +4083,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-93 {
+      .plot-93-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -4105,7 +4105,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-94" style="
+  <div class="plot-94 plot-94-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -4123,9 +4123,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-94 {
+      .plot-94-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -4155,7 +4155,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-95" style="
+  <div class="plot-95 plot-95-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -4173,9 +4173,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-95 {
+      .plot-95-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -4217,7 +4217,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-96" style="
+  <div class="plot-96 plot-96-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -4235,9 +4235,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-96 {
+      .plot-96-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -4251,7 +4251,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>burd</span>
   </div>
-  <div class="plot-97" style="
+  <div class="plot-97 plot-97-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -4269,9 +4269,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-97 {
+      .plot-97-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -4287,7 +4287,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-98" style="
+  <div class="plot-98 plot-98-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -4305,9 +4305,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-98 {
+      .plot-98-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -4327,7 +4327,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-99" style="
+  <div class="plot-99 plot-99-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -4345,9 +4345,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-99 {
+      .plot-99-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -4377,7 +4377,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-100" style="
+  <div class="plot-100 plot-100-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -4395,9 +4395,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-100 {
+      .plot-100-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -4439,7 +4439,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-101" style="
+  <div class="plot-101 plot-101-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -4457,9 +4457,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-101 {
+      .plot-101-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -4473,7 +4473,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>buylrd</span>
   </div>
-  <div class="plot-102" style="
+  <div class="plot-102 plot-102-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -4491,9 +4491,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-102 {
+      .plot-102-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -4509,7 +4509,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-103" style="
+  <div class="plot-103 plot-103-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -4527,9 +4527,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-103 {
+      .plot-103-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -4549,7 +4549,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-104" style="
+  <div class="plot-104 plot-104-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -4567,9 +4567,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-104 {
+      .plot-104-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -4599,7 +4599,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-105" style="
+  <div class="plot-105 plot-105-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -4617,9 +4617,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-105 {
+      .plot-105-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -4661,7 +4661,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-106" style="
+  <div class="plot-106 plot-106-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -4679,9 +4679,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-106 {
+      .plot-106-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -4695,7 +4695,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>blues</span>
   </div>
-  <div class="plot-107" style="
+  <div class="plot-107 plot-107-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -4713,9 +4713,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-107 {
+      .plot-107-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -4731,7 +4731,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-108" style="
+  <div class="plot-108 plot-108-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -4749,9 +4749,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-108 {
+      .plot-108-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -4771,7 +4771,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-109" style="
+  <div class="plot-109 plot-109-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -4789,9 +4789,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-109 {
+      .plot-109-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -4821,7 +4821,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-110" style="
+  <div class="plot-110 plot-110-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -4839,9 +4839,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-110 {
+      .plot-110-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -4883,7 +4883,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-111" style="
+  <div class="plot-111 plot-111-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -4901,9 +4901,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-111 {
+      .plot-111-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -4917,7 +4917,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>greens</span>
   </div>
-  <div class="plot-112" style="
+  <div class="plot-112 plot-112-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -4935,9 +4935,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-112 {
+      .plot-112-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -4953,7 +4953,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-113" style="
+  <div class="plot-113 plot-113-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -4971,9 +4971,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-113 {
+      .plot-113-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -4993,7 +4993,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-114" style="
+  <div class="plot-114 plot-114-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -5011,9 +5011,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-114 {
+      .plot-114-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -5043,7 +5043,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-115" style="
+  <div class="plot-115 plot-115-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -5061,9 +5061,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-115 {
+      .plot-115-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -5105,7 +5105,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-116" style="
+  <div class="plot-116 plot-116-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -5123,9 +5123,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-116 {
+      .plot-116-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -5139,7 +5139,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>greys</span>
   </div>
-  <div class="plot-117" style="
+  <div class="plot-117 plot-117-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -5157,9 +5157,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-117 {
+      .plot-117-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -5175,7 +5175,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-118" style="
+  <div class="plot-118 plot-118-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -5193,9 +5193,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-118 {
+      .plot-118-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -5215,7 +5215,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-119" style="
+  <div class="plot-119 plot-119-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -5233,9 +5233,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-119 {
+      .plot-119-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -5265,7 +5265,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-120" style="
+  <div class="plot-120 plot-120-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -5283,9 +5283,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-120 {
+      .plot-120-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -5327,7 +5327,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-121" style="
+  <div class="plot-121 plot-121-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -5345,9 +5345,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-121 {
+      .plot-121-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -5361,7 +5361,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>oranges</span>
   </div>
-  <div class="plot-122" style="
+  <div class="plot-122 plot-122-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -5379,9 +5379,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-122 {
+      .plot-122-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -5397,7 +5397,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-123" style="
+  <div class="plot-123 plot-123-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -5415,9 +5415,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-123 {
+      .plot-123-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -5437,7 +5437,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-124" style="
+  <div class="plot-124 plot-124-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -5455,9 +5455,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-124 {
+      .plot-124-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -5487,7 +5487,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-125" style="
+  <div class="plot-125 plot-125-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -5505,9 +5505,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-125 {
+      .plot-125-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -5549,7 +5549,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-126" style="
+  <div class="plot-126 plot-126-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -5567,9 +5567,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-126 {
+      .plot-126-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -5583,7 +5583,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>purples</span>
   </div>
-  <div class="plot-127" style="
+  <div class="plot-127 plot-127-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -5601,9 +5601,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-127 {
+      .plot-127-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -5619,7 +5619,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-128" style="
+  <div class="plot-128 plot-128-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -5637,9 +5637,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-128 {
+      .plot-128-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -5659,7 +5659,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-129" style="
+  <div class="plot-129 plot-129-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -5677,9 +5677,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-129 {
+      .plot-129-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -5709,7 +5709,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-130" style="
+  <div class="plot-130 plot-130-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -5727,9 +5727,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-130 {
+      .plot-130-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -5771,7 +5771,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-131" style="
+  <div class="plot-131 plot-131-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -5789,9 +5789,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-131 {
+      .plot-131-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -5805,7 +5805,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>reds</span>
   </div>
-  <div class="plot-132" style="
+  <div class="plot-132 plot-132-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -5823,9 +5823,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-132 {
+      .plot-132-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -5841,7 +5841,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-133" style="
+  <div class="plot-133 plot-133-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -5859,9 +5859,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-133 {
+      .plot-133-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -5881,7 +5881,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-134" style="
+  <div class="plot-134 plot-134-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -5899,9 +5899,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-134 {
+      .plot-134-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -5931,7 +5931,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-135" style="
+  <div class="plot-135 plot-135-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -5949,9 +5949,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-135 {
+      .plot-135-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -5993,7 +5993,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-136" style="
+  <div class="plot-136 plot-136-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -6011,9 +6011,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-136 {
+      .plot-136-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -6027,7 +6027,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>turbo</span>
   </div>
-  <div class="plot-137" style="
+  <div class="plot-137 plot-137-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -6045,9 +6045,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-137 {
+      .plot-137-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -6063,7 +6063,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-138" style="
+  <div class="plot-138 plot-138-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -6081,9 +6081,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-138 {
+      .plot-138-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -6103,7 +6103,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-139" style="
+  <div class="plot-139 plot-139-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -6121,9 +6121,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-139 {
+      .plot-139-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -6153,7 +6153,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-140" style="
+  <div class="plot-140 plot-140-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -6171,9 +6171,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-140 {
+      .plot-140-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -6215,7 +6215,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-141" style="
+  <div class="plot-141 plot-141-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -6233,9 +6233,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-141 {
+      .plot-141-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -6249,7 +6249,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>viridis</span>
   </div>
-  <div class="plot-142" style="
+  <div class="plot-142 plot-142-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -6267,9 +6267,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-142 {
+      .plot-142-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -6285,7 +6285,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-143" style="
+  <div class="plot-143 plot-143-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -6303,9 +6303,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-143 {
+      .plot-143-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -6325,7 +6325,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-144" style="
+  <div class="plot-144 plot-144-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -6343,9 +6343,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-144 {
+      .plot-144-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -6375,7 +6375,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-145" style="
+  <div class="plot-145 plot-145-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -6393,9 +6393,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-145 {
+      .plot-145-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -6437,7 +6437,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-146" style="
+  <div class="plot-146 plot-146-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -6455,9 +6455,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-146 {
+      .plot-146-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -6471,7 +6471,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>magma</span>
   </div>
-  <div class="plot-147" style="
+  <div class="plot-147 plot-147-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -6489,9 +6489,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-147 {
+      .plot-147-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -6507,7 +6507,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-148" style="
+  <div class="plot-148 plot-148-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -6525,9 +6525,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-148 {
+      .plot-148-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -6547,7 +6547,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-149" style="
+  <div class="plot-149 plot-149-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -6565,9 +6565,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-149 {
+      .plot-149-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -6597,7 +6597,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-150" style="
+  <div class="plot-150 plot-150-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -6615,9 +6615,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-150 {
+      .plot-150-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -6659,7 +6659,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-151" style="
+  <div class="plot-151 plot-151-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -6677,9 +6677,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-151 {
+      .plot-151-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -6693,7 +6693,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>inferno</span>
   </div>
-  <div class="plot-152" style="
+  <div class="plot-152 plot-152-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -6711,9 +6711,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-152 {
+      .plot-152-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -6729,7 +6729,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-153" style="
+  <div class="plot-153 plot-153-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -6747,9 +6747,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-153 {
+      .plot-153-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -6769,7 +6769,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-154" style="
+  <div class="plot-154 plot-154-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -6787,9 +6787,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-154 {
+      .plot-154-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -6819,7 +6819,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-155" style="
+  <div class="plot-155 plot-155-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -6837,9 +6837,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-155 {
+      .plot-155-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -6881,7 +6881,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-156" style="
+  <div class="plot-156 plot-156-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -6899,9 +6899,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-156 {
+      .plot-156-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -6915,7 +6915,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>plasma</span>
   </div>
-  <div class="plot-157" style="
+  <div class="plot-157 plot-157-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -6933,9 +6933,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-157 {
+      .plot-157-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -6951,7 +6951,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-158" style="
+  <div class="plot-158 plot-158-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -6969,9 +6969,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-158 {
+      .plot-158-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -6991,7 +6991,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-159" style="
+  <div class="plot-159 plot-159-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -7009,9 +7009,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-159 {
+      .plot-159-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -7041,7 +7041,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-160" style="
+  <div class="plot-160 plot-160-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -7059,9 +7059,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-160 {
+      .plot-160-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -7103,7 +7103,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-161" style="
+  <div class="plot-161 plot-161-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -7121,9 +7121,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-161 {
+      .plot-161-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -7137,7 +7137,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>cividis</span>
   </div>
-  <div class="plot-162" style="
+  <div class="plot-162 plot-162-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -7155,9 +7155,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-162 {
+      .plot-162-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -7173,7 +7173,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-163" style="
+  <div class="plot-163 plot-163-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -7191,9 +7191,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-163 {
+      .plot-163-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -7213,7 +7213,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-164" style="
+  <div class="plot-164 plot-164-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -7231,9 +7231,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-164 {
+      .plot-164-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -7263,7 +7263,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-165" style="
+  <div class="plot-165 plot-165-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -7281,9 +7281,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-165 {
+      .plot-165-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -7325,7 +7325,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-166" style="
+  <div class="plot-166 plot-166-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -7343,9 +7343,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-166 {
+      .plot-166-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -7359,7 +7359,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>cubehelix</span>
   </div>
-  <div class="plot-167" style="
+  <div class="plot-167 plot-167-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -7377,9 +7377,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-167 {
+      .plot-167-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -7395,7 +7395,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-168" style="
+  <div class="plot-168 plot-168-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -7413,9 +7413,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-168 {
+      .plot-168-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -7435,7 +7435,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-169" style="
+  <div class="plot-169 plot-169-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -7453,9 +7453,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-169 {
+      .plot-169-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -7485,7 +7485,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-170" style="
+  <div class="plot-170 plot-170-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -7503,9 +7503,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-170 {
+      .plot-170-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -7547,7 +7547,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-171" style="
+  <div class="plot-171 plot-171-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -7565,9 +7565,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-171 {
+      .plot-171-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -7581,7 +7581,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>warm</span>
   </div>
-  <div class="plot-172" style="
+  <div class="plot-172 plot-172-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -7599,9 +7599,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-172 {
+      .plot-172-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -7617,7 +7617,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-173" style="
+  <div class="plot-173 plot-173-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -7635,9 +7635,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-173 {
+      .plot-173-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -7657,7 +7657,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-174" style="
+  <div class="plot-174 plot-174-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -7675,9 +7675,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-174 {
+      .plot-174-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -7707,7 +7707,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-175" style="
+  <div class="plot-175 plot-175-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -7725,9 +7725,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-175 {
+      .plot-175-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -7769,7 +7769,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-176" style="
+  <div class="plot-176 plot-176-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -7787,9 +7787,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-176 {
+      .plot-176-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -7803,7 +7803,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>cool</span>
   </div>
-  <div class="plot-177" style="
+  <div class="plot-177 plot-177-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -7821,9 +7821,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-177 {
+      .plot-177-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -7839,7 +7839,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-178" style="
+  <div class="plot-178 plot-178-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -7857,9 +7857,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-178 {
+      .plot-178-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -7879,7 +7879,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-179" style="
+  <div class="plot-179 plot-179-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -7897,9 +7897,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-179 {
+      .plot-179-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -7929,7 +7929,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-180" style="
+  <div class="plot-180 plot-180-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -7947,9 +7947,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-180 {
+      .plot-180-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -7991,7 +7991,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-181" style="
+  <div class="plot-181 plot-181-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -8009,9 +8009,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-181 {
+      .plot-181-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -8025,7 +8025,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>bugn</span>
   </div>
-  <div class="plot-182" style="
+  <div class="plot-182 plot-182-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -8043,9 +8043,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-182 {
+      .plot-182-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -8061,7 +8061,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-183" style="
+  <div class="plot-183 plot-183-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -8079,9 +8079,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-183 {
+      .plot-183-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -8101,7 +8101,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-184" style="
+  <div class="plot-184 plot-184-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -8119,9 +8119,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-184 {
+      .plot-184-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -8151,7 +8151,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-185" style="
+  <div class="plot-185 plot-185-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -8169,9 +8169,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-185 {
+      .plot-185-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -8213,7 +8213,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-186" style="
+  <div class="plot-186 plot-186-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -8231,9 +8231,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-186 {
+      .plot-186-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -8247,7 +8247,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>bupu</span>
   </div>
-  <div class="plot-187" style="
+  <div class="plot-187 plot-187-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -8265,9 +8265,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-187 {
+      .plot-187-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -8283,7 +8283,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-188" style="
+  <div class="plot-188 plot-188-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -8301,9 +8301,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-188 {
+      .plot-188-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -8323,7 +8323,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-189" style="
+  <div class="plot-189 plot-189-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -8341,9 +8341,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-189 {
+      .plot-189-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -8373,7 +8373,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-190" style="
+  <div class="plot-190 plot-190-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -8391,9 +8391,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-190 {
+      .plot-190-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -8435,7 +8435,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-191" style="
+  <div class="plot-191 plot-191-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -8453,9 +8453,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-191 {
+      .plot-191-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -8469,7 +8469,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>gnbu</span>
   </div>
-  <div class="plot-192" style="
+  <div class="plot-192 plot-192-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -8487,9 +8487,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-192 {
+      .plot-192-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -8505,7 +8505,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-193" style="
+  <div class="plot-193 plot-193-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -8523,9 +8523,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-193 {
+      .plot-193-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -8545,7 +8545,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-194" style="
+  <div class="plot-194 plot-194-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -8563,9 +8563,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-194 {
+      .plot-194-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -8595,7 +8595,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-195" style="
+  <div class="plot-195 plot-195-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -8613,9 +8613,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-195 {
+      .plot-195-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -8657,7 +8657,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-196" style="
+  <div class="plot-196 plot-196-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -8675,9 +8675,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-196 {
+      .plot-196-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -8691,7 +8691,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>orrd</span>
   </div>
-  <div class="plot-197" style="
+  <div class="plot-197 plot-197-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -8709,9 +8709,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-197 {
+      .plot-197-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -8727,7 +8727,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-198" style="
+  <div class="plot-198 plot-198-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -8745,9 +8745,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-198 {
+      .plot-198-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -8767,7 +8767,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-199" style="
+  <div class="plot-199 plot-199-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -8785,9 +8785,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-199 {
+      .plot-199-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -8817,7 +8817,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-200" style="
+  <div class="plot-200 plot-200-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -8835,9 +8835,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-200 {
+      .plot-200-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -8879,7 +8879,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-201" style="
+  <div class="plot-201 plot-201-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -8897,9 +8897,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-201 {
+      .plot-201-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -8913,7 +8913,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>pubu</span>
   </div>
-  <div class="plot-202" style="
+  <div class="plot-202 plot-202-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -8931,9 +8931,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-202 {
+      .plot-202-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -8949,7 +8949,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-203" style="
+  <div class="plot-203 plot-203-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -8967,9 +8967,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-203 {
+      .plot-203-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -8989,7 +8989,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-204" style="
+  <div class="plot-204 plot-204-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -9007,9 +9007,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-204 {
+      .plot-204-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -9039,7 +9039,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-205" style="
+  <div class="plot-205 plot-205-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -9057,9 +9057,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-205 {
+      .plot-205-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -9101,7 +9101,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-206" style="
+  <div class="plot-206 plot-206-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -9119,9 +9119,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-206 {
+      .plot-206-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -9135,7 +9135,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>pubugn</span>
   </div>
-  <div class="plot-207" style="
+  <div class="plot-207 plot-207-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -9153,9 +9153,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-207 {
+      .plot-207-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -9171,7 +9171,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-208" style="
+  <div class="plot-208 plot-208-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -9189,9 +9189,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-208 {
+      .plot-208-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -9211,7 +9211,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-209" style="
+  <div class="plot-209 plot-209-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -9229,9 +9229,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-209 {
+      .plot-209-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -9261,7 +9261,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-210" style="
+  <div class="plot-210 plot-210-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -9279,9 +9279,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-210 {
+      .plot-210-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -9323,7 +9323,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-211" style="
+  <div class="plot-211 plot-211-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -9341,9 +9341,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-211 {
+      .plot-211-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -9357,7 +9357,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>purd</span>
   </div>
-  <div class="plot-212" style="
+  <div class="plot-212 plot-212-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -9375,9 +9375,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-212 {
+      .plot-212-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -9393,7 +9393,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-213" style="
+  <div class="plot-213 plot-213-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -9411,9 +9411,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-213 {
+      .plot-213-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -9433,7 +9433,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-214" style="
+  <div class="plot-214 plot-214-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -9451,9 +9451,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-214 {
+      .plot-214-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -9483,7 +9483,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-215" style="
+  <div class="plot-215 plot-215-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -9501,9 +9501,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-215 {
+      .plot-215-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -9545,7 +9545,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-216" style="
+  <div class="plot-216 plot-216-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -9563,9 +9563,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-216 {
+      .plot-216-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -9579,7 +9579,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>rdpu</span>
   </div>
-  <div class="plot-217" style="
+  <div class="plot-217 plot-217-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -9597,9 +9597,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-217 {
+      .plot-217-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -9615,7 +9615,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-218" style="
+  <div class="plot-218 plot-218-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -9633,9 +9633,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-218 {
+      .plot-218-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -9655,7 +9655,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-219" style="
+  <div class="plot-219 plot-219-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -9673,9 +9673,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-219 {
+      .plot-219-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -9705,7 +9705,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-220" style="
+  <div class="plot-220 plot-220-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -9723,9 +9723,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-220 {
+      .plot-220-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -9767,7 +9767,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-221" style="
+  <div class="plot-221 plot-221-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -9785,9 +9785,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-221 {
+      .plot-221-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -9801,7 +9801,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>ylgn</span>
   </div>
-  <div class="plot-222" style="
+  <div class="plot-222 plot-222-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -9819,9 +9819,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-222 {
+      .plot-222-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -9837,7 +9837,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-223" style="
+  <div class="plot-223 plot-223-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -9855,9 +9855,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-223 {
+      .plot-223-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -9877,7 +9877,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-224" style="
+  <div class="plot-224 plot-224-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -9895,9 +9895,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-224 {
+      .plot-224-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -9927,7 +9927,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-225" style="
+  <div class="plot-225 plot-225-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -9945,9 +9945,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-225 {
+      .plot-225-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -9989,7 +9989,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-226" style="
+  <div class="plot-226 plot-226-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -10007,9 +10007,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-226 {
+      .plot-226-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -10023,7 +10023,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>ylgnbu</span>
   </div>
-  <div class="plot-227" style="
+  <div class="plot-227 plot-227-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -10041,9 +10041,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-227 {
+      .plot-227-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -10059,7 +10059,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-228" style="
+  <div class="plot-228 plot-228-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -10077,9 +10077,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-228 {
+      .plot-228-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -10099,7 +10099,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-229" style="
+  <div class="plot-229 plot-229-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -10117,9 +10117,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-229 {
+      .plot-229-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -10149,7 +10149,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-230" style="
+  <div class="plot-230 plot-230-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -10167,9 +10167,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-230 {
+      .plot-230-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -10211,7 +10211,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-231" style="
+  <div class="plot-231 plot-231-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -10229,9 +10229,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-231 {
+      .plot-231-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -10245,7 +10245,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>ylorbr</span>
   </div>
-  <div class="plot-232" style="
+  <div class="plot-232 plot-232-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -10263,9 +10263,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-232 {
+      .plot-232-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -10281,7 +10281,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-233" style="
+  <div class="plot-233 plot-233-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -10299,9 +10299,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-233 {
+      .plot-233-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -10321,7 +10321,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-234" style="
+  <div class="plot-234 plot-234-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -10339,9 +10339,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-234 {
+      .plot-234-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -10371,7 +10371,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-235" style="
+  <div class="plot-235 plot-235-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -10389,9 +10389,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-235 {
+      .plot-235-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -10433,7 +10433,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-236" style="
+  <div class="plot-236 plot-236-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -10451,9 +10451,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-236 {
+      .plot-236-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -10467,7 +10467,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>ylorrd</span>
   </div>
-  <div class="plot-237" style="
+  <div class="plot-237 plot-237-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -10485,9 +10485,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-237 {
+      .plot-237-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -10503,7 +10503,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-238" style="
+  <div class="plot-238 plot-238-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -10521,9 +10521,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-238 {
+      .plot-238-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -10543,7 +10543,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-239" style="
+  <div class="plot-239 plot-239-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -10561,9 +10561,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-239 {
+      .plot-239-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -10593,7 +10593,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-240" style="
+  <div class="plot-240 plot-240-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -10611,9 +10611,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-240 {
+      .plot-240-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -10655,7 +10655,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-241" style="
+  <div class="plot-241 plot-241-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -10673,9 +10673,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-241 {
+      .plot-241-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -10689,7 +10689,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>rainbow</span>
   </div>
-  <div class="plot-242" style="
+  <div class="plot-242 plot-242-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -10707,9 +10707,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-242 {
+      .plot-242-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -10725,7 +10725,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-243" style="
+  <div class="plot-243 plot-243-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -10743,9 +10743,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-243 {
+      .plot-243-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -10765,7 +10765,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-244" style="
+  <div class="plot-244 plot-244-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -10783,9 +10783,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-244 {
+      .plot-244-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -10815,7 +10815,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-245" style="
+  <div class="plot-245 plot-245-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -10833,9 +10833,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-245 {
+      .plot-245-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -10877,7 +10877,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>D</span>
   </div>
-  <div class="plot-246" style="
+  <div class="plot-246 plot-246-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -10895,9 +10895,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-246 {
+      .plot-246-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -10911,7 +10911,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>sinebow</span>
   </div>
-  <div class="plot-247" style="
+  <div class="plot-247 plot-247-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -10929,9 +10929,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-247 {
+      .plot-247-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -10947,7 +10947,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>1</span>
   </div>
-  <div class="plot-248" style="
+  <div class="plot-248 plot-248-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -10965,9 +10965,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-248 {
+      .plot-248-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -10987,7 +10987,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>3</span>
   </div>
-  <div class="plot-249" style="
+  <div class="plot-249 plot-249-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -11005,9 +11005,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-249 {
+      .plot-249-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -11037,7 +11037,7 @@
         <rect width="100%" height="100%"></rect>
       </svg>8</span>
   </div>
-  <div class="plot-250" style="
+  <div class="plot-250 plot-250-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -11055,9 +11055,9 @@
         margin-right: 0.5em;
       }
 
-      .plot-250 {
+      .plot-250-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
diff --git a/test/output/decathlon.html b/test/output/decathlon.html
index 6568116ab6..5b03179dd4 100644
--- a/test/output/decathlon.html
+++ b/test/output/decathlon.html
@@ -23,9 +23,15 @@
         stroke-opacity: 1;
       }
 
-      .plot {
+      .plot-title {
+        font-weight: bold;
+        display: block;
+        margin-bottom: 0.4em;
+      }
+
+      .plot-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -35,21 +41,23 @@
         align-items: center;
         margin-right: 1em;
       }
-    </style><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <path d="M4.5,0A4.5,4.5,0,1,1,-4.5,0A4.5,4.5,0,1,1,4.5,0"></path>
-      </svg>BLS</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <path d="M-6.873,0L6.873,0M0,6.873L0,-6.873"></path>
-      </svg>DDR</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <path d="M-4.87,-4.87L4.87,4.87M-4.87,4.87L4.87,-4.87"></path>
-      </svg>FRG</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#76b7b2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <path d="M0,-5.443L4.714,2.721L-4.714,2.721Z"></path>
-      </svg>GBR</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#59a14f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <path d="M0,4.769L0,-4.769M-4.13,-2.384L4.13,2.384M-4.13,2.384L4.13,-2.384"></path>
-      </svg>SOV</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#edc949" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <path d="M3.534,3.534L3.534,-3.534L-3.534,-3.534L-3.534,3.534Z"></path>
-      </svg>TCH</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#af7aa1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <path d="M0,-4.995L4.995,0L0,4.995L-4.995,0Z"></path>
-      </svg>USA</span>
+    </style>
+    <div class="plot-title">Country</div>
+    <div class="plot-palette"><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <path d="M4.5,0A4.5,4.5,0,1,1,-4.5,0A4.5,4.5,0,1,1,4.5,0"></path>
+        </svg>BLS</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <path d="M-6.873,0L6.873,0M0,6.873L0,-6.873"></path>
+        </svg>DDR</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <path d="M-4.87,-4.87L4.87,4.87M-4.87,4.87L4.87,-4.87"></path>
+        </svg>FRG</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#76b7b2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <path d="M0,-5.443L4.714,2.721L-4.714,2.721Z"></path>
+        </svg>GBR</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#59a14f" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <path d="M0,4.769L0,-4.769M-4.13,-2.384L4.13,2.384M-4.13,2.384L4.13,-2.384"></path>
+        </svg>SOV</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#edc949" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <path d="M3.534,3.534L3.534,-3.534L-3.534,-3.534L-3.534,3.534Z"></path>
+        </svg>TCH</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#af7aa1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <path d="M0,-4.995L4.995,0L0,4.995L-4.995,0Z"></path>
+        </svg>USA</span></div>
   </div><svg class="plot-2" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <style>
       .plot-2 {
diff --git a/test/output/energyProduction.html b/test/output/energyProduction.html
index 219f9e0855..e53bdb4e74 100644
--- a/test/output/energyProduction.html
+++ b/test/output/energyProduction.html
@@ -1,5 +1,5 @@
 <figure style="max-width: initial;">
-  <div class="plot" style="
+  <div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -17,9 +17,9 @@
         margin-right: 0.5em;
       }
 
-      .plot {
+      .plot-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
diff --git a/test/output/hexbinSymbol.html b/test/output/hexbinSymbol.html
index d597be2509..95228faf48 100644
--- a/test/output/hexbinSymbol.html
+++ b/test/output/hexbinSymbol.html
@@ -1,5 +1,5 @@
 <figure style="max-width: initial;">
-  <div class="plot" style="
+  <div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -23,9 +23,9 @@
         stroke-opacity: 1;
       }
 
-      .plot {
+      .plot-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
diff --git a/test/output/hexbinZ.html b/test/output/hexbinZ.html
index b3bd33ea2d..68af1d07cf 100644
--- a/test/output/hexbinZ.html
+++ b/test/output/hexbinZ.html
@@ -1,5 +1,5 @@
 <figure style="max-width: initial;">
-  <div class="plot" style="
+  <div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -17,9 +17,9 @@
         margin-right: 0.5em;
       }
 
-      .plot {
+      .plot-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
diff --git a/test/output/likertSurvey.html b/test/output/likertSurvey.html
index 1044b89969..fd78db0636 100644
--- a/test/output/likertSurvey.html
+++ b/test/output/likertSurvey.html
@@ -17,9 +17,15 @@
         margin-right: 0.5em;
       }
 
-      .plot {
+      .plot-title {
+        font-weight: bold;
+        display: block;
+        margin-bottom: 0.4em;
+      }
+
+      .plot-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -29,17 +35,19 @@
         align-items: center;
         margin-right: 1em;
       }
-    </style><span class="plot-swatch"><svg fill="#ca0020" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>Strongly Disagree</span><span class="plot-swatch"><svg fill="#f4a582" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>Disagree</span><span class="plot-swatch"><svg fill="#f7f7f7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>Neutral</span><span class="plot-swatch"><svg fill="#92c5de" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>Agree</span><span class="plot-swatch"><svg fill="#0571b0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>Strongly Agree</span>
+    </style>
+    <div class="plot-title">Response</div>
+    <div class="plot-palette"><span class="plot-swatch"><svg fill="#ca0020" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>Strongly Disagree</span><span class="plot-swatch"><svg fill="#f4a582" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>Disagree</span><span class="plot-swatch"><svg fill="#f7f7f7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>Neutral</span><span class="plot-swatch"><svg fill="#92c5de" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>Agree</span><span class="plot-swatch"><svg fill="#0571b0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>Strongly Agree</span></div>
   </div><svg class="plot-2" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="160" viewBox="0 0 640 160" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <style>
       .plot-2 {
diff --git a/test/output/penguinDensityZ.html b/test/output/penguinDensityZ.html
index 61dbf13852..590adc84d5 100644
--- a/test/output/penguinDensityZ.html
+++ b/test/output/penguinDensityZ.html
@@ -17,9 +17,15 @@
         margin-right: 0.5em;
       }
 
-      .plot {
+      .plot-title {
+        font-weight: bold;
+        display: block;
+        margin-bottom: 0.4em;
+      }
+
+      .plot-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -29,13 +35,15 @@
         align-items: center;
         margin-right: 1em;
       }
-    </style><span class="plot-swatch"><svg fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>Adelie</span><span class="plot-swatch"><svg fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>Chinstrap</span><span class="plot-swatch"><svg fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>Gentoo</span>
+    </style>
+    <div class="plot-title">species</div>
+    <div class="plot-palette"><span class="plot-swatch"><svg fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>Adelie</span><span class="plot-swatch"><svg fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>Chinstrap</span><span class="plot-swatch"><svg fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>Gentoo</span></div>
   </div><svg class="plot-2" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="960" height="360" viewBox="0 0 960 360" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <style>
       .plot-2 {
diff --git a/test/output/penguinFacetDodgeIsland.html b/test/output/penguinFacetDodgeIsland.html
index ff5a9bf015..2e28cac056 100644
--- a/test/output/penguinFacetDodgeIsland.html
+++ b/test/output/penguinFacetDodgeIsland.html
@@ -17,9 +17,15 @@
         margin-right: 0.5em;
       }
 
-      .plot {
+      .plot-title {
+        font-weight: bold;
+        display: block;
+        margin-bottom: 0.4em;
+      }
+
+      .plot-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -29,13 +35,15 @@
         align-items: center;
         margin-right: 1em;
       }
-    </style><span class="plot-swatch"><svg fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>Biscoe</span><span class="plot-swatch"><svg fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>Dream</span><span class="plot-swatch"><svg fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>Torgersen</span>
+    </style>
+    <div class="plot-title">island</div>
+    <div class="plot-palette"><span class="plot-swatch"><svg fill="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>Biscoe</span><span class="plot-swatch"><svg fill="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>Dream</span><span class="plot-swatch"><svg fill="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>Torgersen</span></div>
   </div><svg class="plot-2" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="300" viewBox="0 0 640 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <style>
       .plot-2 {
diff --git a/test/output/penguinFacetDodgeSymbol.html b/test/output/penguinFacetDodgeSymbol.html
index 5331a9403c..751c51d4e9 100644
--- a/test/output/penguinFacetDodgeSymbol.html
+++ b/test/output/penguinFacetDodgeSymbol.html
@@ -23,9 +23,15 @@
         stroke-opacity: 1;
       }
 
-      .plot {
+      .plot-title {
+        font-weight: bold;
+        display: block;
+        margin-bottom: 0.4em;
+      }
+
+      .plot-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -35,13 +41,15 @@
         align-items: center;
         margin-right: 1em;
       }
-    </style><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <path d="M4.5,0A4.5,4.5,0,1,1,-4.5,0A4.5,4.5,0,1,1,4.5,0"></path>
-      </svg>Adelie</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <path d="M-6.873,0L6.873,0M0,6.873L0,-6.873"></path>
-      </svg>Chinstrap</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <path d="M-4.87,-4.87L4.87,4.87M-4.87,4.87L4.87,-4.87"></path>
-      </svg>Gentoo</span>
+    </style>
+    <div class="plot-title">species</div>
+    <div class="plot-palette"><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <path d="M4.5,0A4.5,4.5,0,1,1,-4.5,0A4.5,4.5,0,1,1,4.5,0"></path>
+        </svg>Adelie</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <path d="M-6.873,0L6.873,0M0,6.873L0,-6.873"></path>
+        </svg>Chinstrap</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <path d="M-4.87,-4.87L4.87,4.87M-4.87,4.87L4.87,-4.87"></path>
+        </svg>Gentoo</span></div>
   </div><svg class="plot-2" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <style>
       .plot-2 {
diff --git a/test/output/penguinSizeSymbols.html b/test/output/penguinSizeSymbols.html
index 601091321b..b267fb883b 100644
--- a/test/output/penguinSizeSymbols.html
+++ b/test/output/penguinSizeSymbols.html
@@ -23,9 +23,15 @@
         stroke-opacity: 1;
       }
 
-      .plot {
+      .plot-title {
+        font-weight: bold;
+        display: block;
+        margin-bottom: 0.4em;
+      }
+
+      .plot-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -35,13 +41,15 @@
         align-items: center;
         margin-right: 1em;
       }
-    </style><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <path d="M4.5,0A4.5,4.5,0,1,1,-4.5,0A4.5,4.5,0,1,1,4.5,0"></path>
-      </svg>Adelie</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <path d="M-6.873,0L6.873,0M0,6.873L0,-6.873"></path>
-      </svg>Chinstrap</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <path d="M-4.87,-4.87L4.87,4.87M-4.87,4.87L4.87,-4.87"></path>
-      </svg>Gentoo</span>
+    </style>
+    <div class="plot-title">species</div>
+    <div class="plot-palette"><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#4e79a7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <path d="M4.5,0A4.5,4.5,0,1,1,-4.5,0A4.5,4.5,0,1,1,4.5,0"></path>
+        </svg>Adelie</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#f28e2c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <path d="M-6.873,0L6.873,0M0,6.873L0,-6.873"></path>
+        </svg>Chinstrap</span><span class="plot-swatch"><svg viewBox="-8 -8 16 16" stroke="#e15759" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <path d="M-4.87,-4.87L4.87,4.87M-4.87,4.87L4.87,-4.87"></path>
+        </svg>Gentoo</span></div>
   </div><svg class="plot-2" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <style>
       .plot-2 {
diff --git a/test/output/penguinSpeciesCheysson.html b/test/output/penguinSpeciesCheysson.html
index 0f448e99b5..47ea2a782c 100644
--- a/test/output/penguinSpeciesCheysson.html
+++ b/test/output/penguinSpeciesCheysson.html
@@ -17,9 +17,15 @@
         margin-right: 0.5em;
       }
 
-      .plot {
+      .plot-title {
+        font-weight: bold;
+        display: block;
+        margin-bottom: 0.4em;
+      }
+
+      .plot-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -29,13 +35,15 @@
         align-items: center;
         margin-right: 1em;
       }
-    </style><span class="plot-swatch"><svg fill="url(#grouped-12512014-1)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>Adelie</span><span class="plot-swatch"><svg fill="url(#grouped-12512014-2)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>Chinstrap</span><span class="plot-swatch"><svg fill="url(#grouped-12512014-3)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>Gentoo</span>
+    </style>
+    <div class="plot-title">species</div>
+    <div class="plot-palette"><span class="plot-swatch"><svg fill="url(#grouped-12512014-1)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>Adelie</span><span class="plot-swatch"><svg fill="url(#grouped-12512014-2)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>Chinstrap</span><span class="plot-swatch"><svg fill="url(#grouped-12512014-3)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>Gentoo</span></div>
   </div><svg class="plot-2" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="640" height="400" viewBox="0 0 640 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <style>
       .plot-2 {
diff --git a/test/output/symbolLegendBasic.html b/test/output/symbolLegendBasic.html
index 572fbb6869..d6a411143a 100644
--- a/test/output/symbolLegendBasic.html
+++ b/test/output/symbolLegendBasic.html
@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -22,9 +22,9 @@
       stroke-opacity: 1;
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }
diff --git a/test/output/symbolLegendColorFill.html b/test/output/symbolLegendColorFill.html
index ade85a9a48..93c57dc068 100644
--- a/test/output/symbolLegendColorFill.html
+++ b/test/output/symbolLegendColorFill.html
@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -22,9 +22,9 @@
       stroke-opacity: 1;
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }
diff --git a/test/output/symbolLegendColorStroke.html b/test/output/symbolLegendColorStroke.html
index 241161ca12..69bde85e50 100644
--- a/test/output/symbolLegendColorStroke.html
+++ b/test/output/symbolLegendColorStroke.html
@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -22,9 +22,9 @@
       stroke-opacity: 1;
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }
diff --git a/test/output/symbolLegendDifferentColor.html b/test/output/symbolLegendDifferentColor.html
index 761aa8e0f9..a8be39087d 100644
--- a/test/output/symbolLegendDifferentColor.html
+++ b/test/output/symbolLegendDifferentColor.html
@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -22,9 +22,9 @@
       stroke-opacity: 1;
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }
diff --git a/test/output/symbolLegendExplicitColor.html b/test/output/symbolLegendExplicitColor.html
index ade85a9a48..93c57dc068 100644
--- a/test/output/symbolLegendExplicitColor.html
+++ b/test/output/symbolLegendExplicitColor.html
@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -22,9 +22,9 @@
       stroke-opacity: 1;
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }
diff --git a/test/output/symbolLegendFill.html b/test/output/symbolLegendFill.html
index 1032b0f31b..53cf8cc42a 100644
--- a/test/output/symbolLegendFill.html
+++ b/test/output/symbolLegendFill.html
@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -22,9 +22,9 @@
       stroke-opacity: 1;
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }
diff --git a/test/output/symbolLegendImplicitRange.html b/test/output/symbolLegendImplicitRange.html
index ade85a9a48..93c57dc068 100644
--- a/test/output/symbolLegendImplicitRange.html
+++ b/test/output/symbolLegendImplicitRange.html
@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -22,9 +22,9 @@
       stroke-opacity: 1;
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }
diff --git a/test/output/symbolLegendOpacityColor.html b/test/output/symbolLegendOpacityColor.html
index de64d0927e..f49c0c0386 100644
--- a/test/output/symbolLegendOpacityColor.html
+++ b/test/output/symbolLegendOpacityColor.html
@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -22,9 +22,9 @@
       stroke-opacity: 0.5;
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }
diff --git a/test/output/symbolLegendOpacityFill.html b/test/output/symbolLegendOpacityFill.html
index 009e056007..3363ed4f15 100644
--- a/test/output/symbolLegendOpacityFill.html
+++ b/test/output/symbolLegendOpacityFill.html
@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -22,9 +22,9 @@
       stroke-opacity: 1;
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }
diff --git a/test/output/symbolLegendOpacityStroke.html b/test/output/symbolLegendOpacityStroke.html
index a4366afbd3..a600864b65 100644
--- a/test/output/symbolLegendOpacityStroke.html
+++ b/test/output/symbolLegendOpacityStroke.html
@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -22,9 +22,9 @@
       stroke-opacity: 0.5;
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }
diff --git a/test/output/symbolLegendStroke.html b/test/output/symbolLegendStroke.html
index 4e48e1157c..2d0662e745 100644
--- a/test/output/symbolLegendStroke.html
+++ b/test/output/symbolLegendStroke.html
@@ -1,4 +1,4 @@
-<div class="plot" style="
+<div class="plot plot-palette" style="
         --swatchWidth: 15px;
         --swatchHeight: 15px;
       ">
@@ -22,9 +22,9 @@
       stroke-opacity: 1;
     }
 
-    .plot {
+    .plot-palette {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       min-height: 33px;
       flex-wrap: wrap;
     }
diff --git a/test/output/trafficHorizon.html b/test/output/trafficHorizon.html
index d4f3b1eb65..c019160792 100644
--- a/test/output/trafficHorizon.html
+++ b/test/output/trafficHorizon.html
@@ -17,9 +17,15 @@
         margin-right: 0.5em;
       }
 
-      .plot {
+      .plot-title {
+        font-weight: bold;
+        display: block;
+        margin-bottom: 0.4em;
+      }
+
+      .plot-palette {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         min-height: 33px;
         flex-wrap: wrap;
       }
@@ -29,17 +35,19 @@
         align-items: center;
         margin-right: 1em;
       }
-    </style><span class="plot-swatch"><svg fill="#eff3ff" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>≥0</span><span class="plot-swatch"><svg fill="#bdd7e7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>≥2,000</span><span class="plot-swatch"><svg fill="#6baed6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>≥4,000</span><span class="plot-swatch"><svg fill="#3182bd" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>≥6,000</span><span class="plot-swatch"><svg fill="#08519c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-        <rect width="100%" height="100%"></rect>
-      </svg>≥8,000</span>
+    </style>
+    <div class="plot-title">Traffic (vehicles/hour)</div>
+    <div class="plot-palette"><span class="plot-swatch"><svg fill="#eff3ff" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>≥0</span><span class="plot-swatch"><svg fill="#bdd7e7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>≥2,000</span><span class="plot-swatch"><svg fill="#6baed6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>≥4,000</span><span class="plot-swatch"><svg fill="#3182bd" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>≥6,000</span><span class="plot-swatch"><svg fill="#08519c" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <rect width="100%" height="100%"></rect>
+        </svg>≥8,000</span></div>
   </div><svg class="plot-2" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="960" height="1100" viewBox="0 0 960 1100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <style>
       .plot-2 {
diff --git a/test/plot.js b/test/plot.js
index 2a4fa678f1..486898db86 100644
--- a/test/plot.js
+++ b/test/plot.js
@@ -69,7 +69,7 @@ function reindexStyle(root) {
   for (const style of root.querySelectorAll("style")) {
     const name = `plot${index++ ? `-${index}` : ""}`;
     const parent = style.parentNode;
-    const uid = parent.getAttribute("class");
+    const uid = parent.getAttribute("class").split(" ")[0];
     for (const child of [parent, ...parent.querySelectorAll("[class]")]) {
       child.setAttribute("class", child.getAttribute("class").replace(new RegExp(`\\b${uid}\\b`, "g"), name));
     }
diff --git a/test/plots/caltrain.ts b/test/plots/caltrain.ts
index e53b76aa6e..c128546bf9 100644
--- a/test/plots/caltrain.ts
+++ b/test/plots/caltrain.ts
@@ -12,7 +12,8 @@ export async function caltrain() {
     color: {
       domain: "NLB",
       range: ["currentColor", "peru", "brown"],
-      legend: true
+      legend: true,
+      label: null
     },
     marks: [
       Plot.text([[1, "3"]], {
diff --git a/test/plots/energy-production.ts b/test/plots/energy-production.ts
index 4eaf7ca8cb..aac9ed0252 100644
--- a/test/plots/energy-production.ts
+++ b/test/plots/energy-production.ts
@@ -40,7 +40,8 @@ export async function energyProduction() {
     },
     color: {
       tickFormat: (t) => types.get(t),
-      legend: true
+      legend: true,
+      label: null
     },
     marks: [
       Plot.rectY(energy, {x: "Year", interval: 1, y: "Value", fill: "Description", sort: {color: "height"}}),
diff --git a/test/plots/hexbin-symbol.ts b/test/plots/hexbin-symbol.ts
index 637d6af56e..a3e06555cc 100644
--- a/test/plots/hexbin-symbol.ts
+++ b/test/plots/hexbin-symbol.ts
@@ -6,7 +6,8 @@ export async function hexbinSymbol() {
   return Plot.plot({
     grid: true,
     symbol: {
-      legend: true
+      legend: true,
+      label: null
     },
     marks: [Plot.dot(penguins, Plot.hexbin({r: "count"}, {symbol: "sex", x: "culmen_depth_mm", y: "culmen_length_mm"}))]
   });
diff --git a/test/plots/hexbin-z.ts b/test/plots/hexbin-z.ts
index fb62b02d63..261b7aa2da 100644
--- a/test/plots/hexbin-z.ts
+++ b/test/plots/hexbin-z.ts
@@ -6,7 +6,8 @@ export async function hexbinZ() {
   return Plot.plot({
     inset: 10,
     color: {
-      legend: true
+      legend: true,
+      label: null
     },
     marks: [
       Plot.hexgrid(),
diff --git a/test/plots/legend-color.ts b/test/plots/legend-color.ts
index 744e850f4f..740146b36a 100644
--- a/test/plots/legend-color.ts
+++ b/test/plots/legend-color.ts
@@ -19,9 +19,9 @@ export function colorLegendCategoricalColumns() {
         "Finance",
         "Self-employed",
         "Other"
-      ]
+      ],
+      label: "Industry"
     },
-    label: "Hello",
     columns: "180px"
   });
 }
diff --git a/test/plots/traffic-horizon.ts b/test/plots/traffic-horizon.ts
index 8ba723987a..7d88d3659a 100644
--- a/test/plots/traffic-horizon.ts
+++ b/test/plots/traffic-horizon.ts
@@ -24,7 +24,8 @@ export async function trafficHorizon() {
         (f) => (t) =>
           `≥${f(t)}`
       )(d3.format(",")),
-      legend: true
+      legend: true,
+      label: "Traffic (vehicles/hour)"
     },
     fy: {
       axis: null,