diff --git a/flake.nix b/flake.nix
index 72e87fd..bcb993d 100644
--- a/flake.nix
+++ b/flake.nix
@@ -28,8 +28,10 @@
         {
           # Shell
           default = pkgs.mkShell {
-            packages = [ ]
-              ++ project-config.packages;
+            packages = [
+              pkgs.deno
+            ]
+            ++ project-config.packages;
 
             shellHook = project-config.shellHook;
           };
diff --git a/src/cli.ts b/src/cli.ts
new file mode 100644
index 0000000..ddfe1e2
--- /dev/null
+++ b/src/cli.ts
@@ -0,0 +1,38 @@
+// We need an empty export for top-level await.
+export {};
+
+// Start with the basic CSS header.
+let lines: string[] = [":root {"];
+
+// We have ten colors, with 0 being the base hue and the others being evenly
+// rotated around the color wheel.
+for (let color = 0; color < 10; color++) {
+  // Figure out the rotation.
+  const rotation = color * 36; // 1/10th of a circle
+
+  // For each hue, we have ten levels of brightness ranging from very dark
+  // to very light.
+  for (let brightness = 0; brightness < 10; brightness++) {
+    // We use a standard code (--color-cXbY) for our codes.
+    const code = `--color-c${color}b${brightness}`;
+
+    // Figure out the ramps we are using for brighteness.
+    const l = brightness * 11;
+    const s = 50 - brightness * 5;
+
+    // Write out the CSS.
+    lines.push(
+      `  ${code}: lch(${l.toFixed(1)} ${s.toFixed(
+        1,
+      )} calc(var(--color-hue) + ${rotation}));`,
+    );
+  }
+}
+
+// Finish up the lines.
+lines.push("}");
+
+// Write out the files.
+const text = new TextEncoder().encode(lines.join("\n"));
+
+await Deno.writeFile("src/colors.css", text, { mode: 0o644 });
diff --git a/src/colors.css b/src/colors.css
new file mode 100644
index 0000000..f053e54
--- /dev/null
+++ b/src/colors.css
@@ -0,0 +1,102 @@
+:root {
+  --color-c0b0: lch(0 50 calc(var(--color-hue) + 0));
+  --color-c0b1: lch(11 45 calc(var(--color-hue) + 0));
+  --color-c0b2: lch(22 40 calc(var(--color-hue) + 0));
+  --color-c0b3: lch(33 35 calc(var(--color-hue) + 0));
+  --color-c0b4: lch(44 30 calc(var(--color-hue) + 0));
+  --color-c0b5: lch(55 25 calc(var(--color-hue) + 0));
+  --color-c0b6: lch(66 20 calc(var(--color-hue) + 0));
+  --color-c0b7: lch(77 15 calc(var(--color-hue) + 0));
+  --color-c0b8: lch(88 10 calc(var(--color-hue) + 0));
+  --color-c0b9: lch(99 5 calc(var(--color-hue) + 0));
+  --color-c1b0: lch(0 50 calc(var(--color-hue) + 36));
+  --color-c1b1: lch(11 45 calc(var(--color-hue) + 36));
+  --color-c1b2: lch(22 40 calc(var(--color-hue) + 36));
+  --color-c1b3: lch(33 35 calc(var(--color-hue) + 36));
+  --color-c1b4: lch(44 30 calc(var(--color-hue) + 36));
+  --color-c1b5: lch(55 25 calc(var(--color-hue) + 36));
+  --color-c1b6: lch(66 20 calc(var(--color-hue) + 36));
+  --color-c1b7: lch(77 15 calc(var(--color-hue) + 36));
+  --color-c1b8: lch(88 10 calc(var(--color-hue) + 36));
+  --color-c1b9: lch(99 5 calc(var(--color-hue) + 36));
+  --color-c2b0: lch(0 50 calc(var(--color-hue) + 72));
+  --color-c2b1: lch(11 45 calc(var(--color-hue) + 72));
+  --color-c2b2: lch(22 40 calc(var(--color-hue) + 72));
+  --color-c2b3: lch(33 35 calc(var(--color-hue) + 72));
+  --color-c2b4: lch(44 30 calc(var(--color-hue) + 72));
+  --color-c2b5: lch(55 25 calc(var(--color-hue) + 72));
+  --color-c2b6: lch(66 20 calc(var(--color-hue) + 72));
+  --color-c2b7: lch(77 15 calc(var(--color-hue) + 72));
+  --color-c2b8: lch(88 10 calc(var(--color-hue) + 72));
+  --color-c2b9: lch(99 5 calc(var(--color-hue) + 72));
+  --color-c3b0: lch(0 50 calc(var(--color-hue) + 108));
+  --color-c3b1: lch(11 45 calc(var(--color-hue) + 108));
+  --color-c3b2: lch(22 40 calc(var(--color-hue) + 108));
+  --color-c3b3: lch(33 35 calc(var(--color-hue) + 108));
+  --color-c3b4: lch(44 30 calc(var(--color-hue) + 108));
+  --color-c3b5: lch(55 25 calc(var(--color-hue) + 108));
+  --color-c3b6: lch(66 20 calc(var(--color-hue) + 108));
+  --color-c3b7: lch(77 15 calc(var(--color-hue) + 108));
+  --color-c3b8: lch(88 10 calc(var(--color-hue) + 108));
+  --color-c3b9: lch(99 5 calc(var(--color-hue) + 108));
+  --color-c4b0: lch(0 50 calc(var(--color-hue) + 144));
+  --color-c4b1: lch(11 45 calc(var(--color-hue) + 144));
+  --color-c4b2: lch(22 40 calc(var(--color-hue) + 144));
+  --color-c4b3: lch(33 35 calc(var(--color-hue) + 144));
+  --color-c4b4: lch(44 30 calc(var(--color-hue) + 144));
+  --color-c4b5: lch(55 25 calc(var(--color-hue) + 144));
+  --color-c4b6: lch(66 20 calc(var(--color-hue) + 144));
+  --color-c4b7: lch(77 15 calc(var(--color-hue) + 144));
+  --color-c4b8: lch(88 10 calc(var(--color-hue) + 144));
+  --color-c4b9: lch(99 5 calc(var(--color-hue) + 144));
+  --color-c5b0: lch(0 50 calc(var(--color-hue) + 180));
+  --color-c5b1: lch(11 45 calc(var(--color-hue) + 180));
+  --color-c5b2: lch(22 40 calc(var(--color-hue) + 180));
+  --color-c5b3: lch(33 35 calc(var(--color-hue) + 180));
+  --color-c5b4: lch(44 30 calc(var(--color-hue) + 180));
+  --color-c5b5: lch(55 25 calc(var(--color-hue) + 180));
+  --color-c5b6: lch(66 20 calc(var(--color-hue) + 180));
+  --color-c5b7: lch(77 15 calc(var(--color-hue) + 180));
+  --color-c5b8: lch(88 10 calc(var(--color-hue) + 180));
+  --color-c5b9: lch(99 5 calc(var(--color-hue) + 180));
+  --color-c6b0: lch(0 50 calc(var(--color-hue) + 216));
+  --color-c6b1: lch(11 45 calc(var(--color-hue) + 216));
+  --color-c6b2: lch(22 40 calc(var(--color-hue) + 216));
+  --color-c6b3: lch(33 35 calc(var(--color-hue) + 216));
+  --color-c6b4: lch(44 30 calc(var(--color-hue) + 216));
+  --color-c6b5: lch(55 25 calc(var(--color-hue) + 216));
+  --color-c6b6: lch(66 20 calc(var(--color-hue) + 216));
+  --color-c6b7: lch(77 15 calc(var(--color-hue) + 216));
+  --color-c6b8: lch(88 10 calc(var(--color-hue) + 216));
+  --color-c6b9: lch(99 5 calc(var(--color-hue) + 216));
+  --color-c7b0: lch(0 50 calc(var(--color-hue) + 252));
+  --color-c7b1: lch(11 45 calc(var(--color-hue) + 252));
+  --color-c7b2: lch(22 40 calc(var(--color-hue) + 252));
+  --color-c7b3: lch(33 35 calc(var(--color-hue) + 252));
+  --color-c7b4: lch(44 30 calc(var(--color-hue) + 252));
+  --color-c7b5: lch(55 25 calc(var(--color-hue) + 252));
+  --color-c7b6: lch(66 20 calc(var(--color-hue) + 252));
+  --color-c7b7: lch(77 15 calc(var(--color-hue) + 252));
+  --color-c7b8: lch(88 10 calc(var(--color-hue) + 252));
+  --color-c7b9: lch(99 5 calc(var(--color-hue) + 252));
+  --color-c8b0: lch(0 50 calc(var(--color-hue) + 288));
+  --color-c8b1: lch(11 45 calc(var(--color-hue) + 288));
+  --color-c8b2: lch(22 40 calc(var(--color-hue) + 288));
+  --color-c8b3: lch(33 35 calc(var(--color-hue) + 288));
+  --color-c8b4: lch(44 30 calc(var(--color-hue) + 288));
+  --color-c8b5: lch(55 25 calc(var(--color-hue) + 288));
+  --color-c8b6: lch(66 20 calc(var(--color-hue) + 288));
+  --color-c8b7: lch(77 15 calc(var(--color-hue) + 288));
+  --color-c8b8: lch(88 10 calc(var(--color-hue) + 288));
+  --color-c8b9: lch(99 5 calc(var(--color-hue) + 288));
+  --color-c9b0: lch(0 50 calc(var(--color-hue) + 324));
+  --color-c9b1: lch(11 45 calc(var(--color-hue) + 324));
+  --color-c9b2: lch(22 40 calc(var(--color-hue) + 324));
+  --color-c9b3: lch(33 35 calc(var(--color-hue) + 324));
+  --color-c9b4: lch(44 30 calc(var(--color-hue) + 324));
+  --color-c9b5: lch(55 25 calc(var(--color-hue) + 324));
+  --color-c9b6: lch(66 20 calc(var(--color-hue) + 324));
+  --color-c9b7: lch(77 15 calc(var(--color-hue) + 324));
+  --color-c9b8: lch(88 10 calc(var(--color-hue) + 324));
+  --color-c9b9: lch(99 5 calc(var(--color-hue) + 324));
+}
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..180e73f
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,1152 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Ideas</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" rel="noopener" target="_blank" href="./style.css" />
+    <style>
+      :root {
+        --color-hue: 180;
+      }
+
+      /* https://www.w3schools.com/howto/howto_js_rangeslider.asp */
+      .slidecontainer {
+        width: 100%; /* Width of the outside container */
+      }
+
+      /* The slider itself */
+      .slider {
+        -webkit-appearance: none; /* Override default CSS styles */
+        appearance: none;
+        width: 100%; /* Full-width */
+        height: 25px; /* Specified height */
+        background: #d3d3d3; /* Grey background */
+        outline: none; /* Remove outline */
+        opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
+        -webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
+        transition: opacity 0.2s;
+      }
+
+      /* Mouse-over effects */
+      .slider:hover {
+        opacity: 1; /* Fully shown on mouse-over */
+      }
+
+      /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
+      .slider::-webkit-slider-thumb {
+        -webkit-appearance: none; /* Override default look */
+        appearance: none;
+        width: 25px; /* Set a specific slider handle width */
+        height: 25px; /* Slider handle height */
+        background: #04aa6d; /* Green background */
+        cursor: pointer; /* Cursor on hover */
+      }
+
+      .slider::-moz-range-thumb {
+        width: 25px; /* Set a specific slider handle width */
+        height: 25px; /* Slider handle height */
+        background: #04aa6d; /* Green background */
+        cursor: pointer; /* Cursor on hover */
+      }
+
+      #hue {
+        display: inline-block;
+        min-width: 5em;
+      }
+
+      #hue-box {
+        display: inline-block;
+        min-width: 5em;
+        min-height: 1em;
+        border: 1px solid black;
+        background-color: lch(50% 100 var(--color-hue));
+      }
+
+      td,
+      th {
+        width: 5em;
+        text-align: center;
+      }
+
+      .fg-c0b0 {
+        color: var(--color-c0b0);
+      }
+      .fg-c1b0 {
+        color: var(--color-c1b0);
+      }
+      .fg-c2b0 {
+        color: var(--color-c2b0);
+      }
+      .fg-c3b0 {
+        color: var(--color-c3b0);
+      }
+      .fg-c4b0 {
+        color: var(--color-c4b0);
+      }
+      .fg-c5b0 {
+        color: var(--color-c5b0);
+      }
+      .fg-c6b0 {
+        color: var(--color-c6b0);
+      }
+      .fg-c7b0 {
+        color: var(--color-c7b0);
+      }
+      .fg-c8b0 {
+        color: var(--color-c8b0);
+      }
+      .fg-c9b0 {
+        color: var(--color-c9b0);
+      }
+      .fg-c0b1 {
+        color: var(--color-c0b1);
+      }
+      .fg-c1b1 {
+        color: var(--color-c1b1);
+      }
+      .fg-c2b1 {
+        color: var(--color-c2b1);
+      }
+      .fg-c3b1 {
+        color: var(--color-c3b1);
+      }
+      .fg-c4b1 {
+        color: var(--color-c4b1);
+      }
+      .fg-c5b1 {
+        color: var(--color-c5b1);
+      }
+      .fg-c6b1 {
+        color: var(--color-c6b1);
+      }
+      .fg-c7b1 {
+        color: var(--color-c7b1);
+      }
+      .fg-c8b1 {
+        color: var(--color-c8b1);
+      }
+      .fg-c9b1 {
+        color: var(--color-c9b1);
+      }
+      .fg-c0b2 {
+        color: var(--color-c0b2);
+      }
+      .fg-c1b2 {
+        color: var(--color-c1b2);
+      }
+      .fg-c2b2 {
+        color: var(--color-c2b2);
+      }
+      .fg-c3b2 {
+        color: var(--color-c3b2);
+      }
+      .fg-c4b2 {
+        color: var(--color-c4b2);
+      }
+      .fg-c5b2 {
+        color: var(--color-c5b2);
+      }
+      .fg-c6b2 {
+        color: var(--color-c6b2);
+      }
+      .fg-c7b2 {
+        color: var(--color-c7b2);
+      }
+      .fg-c8b2 {
+        color: var(--color-c8b2);
+      }
+      .fg-c9b2 {
+        color: var(--color-c9b2);
+      }
+      .fg-c0b3 {
+        color: var(--color-c0b3);
+      }
+      .fg-c1b3 {
+        color: var(--color-c1b3);
+      }
+      .fg-c2b3 {
+        color: var(--color-c2b3);
+      }
+      .fg-c3b3 {
+        color: var(--color-c3b3);
+      }
+      .fg-c4b3 {
+        color: var(--color-c4b3);
+      }
+      .fg-c5b3 {
+        color: var(--color-c5b3);
+      }
+      .fg-c6b3 {
+        color: var(--color-c6b3);
+      }
+      .fg-c7b3 {
+        color: var(--color-c7b3);
+      }
+      .fg-c8b3 {
+        color: var(--color-c8b3);
+      }
+      .fg-c9b3 {
+        color: var(--color-c9b3);
+      }
+      .fg-c0b4 {
+        color: var(--color-c0b4);
+      }
+      .fg-c1b4 {
+        color: var(--color-c1b4);
+      }
+      .fg-c2b4 {
+        color: var(--color-c2b4);
+      }
+      .fg-c3b4 {
+        color: var(--color-c3b4);
+      }
+      .fg-c4b4 {
+        color: var(--color-c4b4);
+      }
+      .fg-c5b4 {
+        color: var(--color-c5b4);
+      }
+      .fg-c6b4 {
+        color: var(--color-c6b4);
+      }
+      .fg-c7b4 {
+        color: var(--color-c7b4);
+      }
+      .fg-c8b4 {
+        color: var(--color-c8b4);
+      }
+      .fg-c9b4 {
+        color: var(--color-c9b4);
+      }
+      .fg-c0b5 {
+        color: var(--color-c0b5);
+      }
+      .fg-c1b5 {
+        color: var(--color-c1b5);
+      }
+      .fg-c2b5 {
+        color: var(--color-c2b5);
+      }
+      .fg-c3b5 {
+        color: var(--color-c3b5);
+      }
+      .fg-c4b5 {
+        color: var(--color-c4b5);
+      }
+      .fg-c5b5 {
+        color: var(--color-c5b5);
+      }
+      .fg-c6b5 {
+        color: var(--color-c6b5);
+      }
+      .fg-c7b5 {
+        color: var(--color-c7b5);
+      }
+      .fg-c8b5 {
+        color: var(--color-c8b5);
+      }
+      .fg-c9b5 {
+        color: var(--color-c9b5);
+      }
+      .fg-c0b6 {
+        color: var(--color-c0b6);
+      }
+      .fg-c1b6 {
+        color: var(--color-c1b6);
+      }
+      .fg-c2b6 {
+        color: var(--color-c2b6);
+      }
+      .fg-c3b6 {
+        color: var(--color-c3b6);
+      }
+      .fg-c4b6 {
+        color: var(--color-c4b6);
+      }
+      .fg-c5b6 {
+        color: var(--color-c5b6);
+      }
+      .fg-c6b6 {
+        color: var(--color-c6b6);
+      }
+      .fg-c7b6 {
+        color: var(--color-c7b6);
+      }
+      .fg-c8b6 {
+        color: var(--color-c8b6);
+      }
+      .fg-c9b6 {
+        color: var(--color-c9b6);
+      }
+      .fg-c0b7 {
+        color: var(--color-c0b7);
+      }
+      .fg-c1b7 {
+        color: var(--color-c1b7);
+      }
+      .fg-c2b7 {
+        color: var(--color-c2b7);
+      }
+      .fg-c3b7 {
+        color: var(--color-c3b7);
+      }
+      .fg-c4b7 {
+        color: var(--color-c4b7);
+      }
+      .fg-c5b7 {
+        color: var(--color-c5b7);
+      }
+      .fg-c6b7 {
+        color: var(--color-c6b7);
+      }
+      .fg-c7b7 {
+        color: var(--color-c7b7);
+      }
+      .fg-c8b7 {
+        color: var(--color-c8b7);
+      }
+      .fg-c9b7 {
+        color: var(--color-c9b7);
+      }
+      .fg-c0b8 {
+        color: var(--color-c0b8);
+      }
+      .fg-c1b8 {
+        color: var(--color-c1b8);
+      }
+      .fg-c2b8 {
+        color: var(--color-c2b8);
+      }
+      .fg-c3b8 {
+        color: var(--color-c3b8);
+      }
+      .fg-c4b8 {
+        color: var(--color-c4b8);
+      }
+      .fg-c5b8 {
+        color: var(--color-c5b8);
+      }
+      .fg-c6b8 {
+        color: var(--color-c6b8);
+      }
+      .fg-c7b8 {
+        color: var(--color-c7b8);
+      }
+      .fg-c8b8 {
+        color: var(--color-c8b8);
+      }
+      .fg-c9b8 {
+        color: var(--color-c9b8);
+      }
+      .fg-c0b9 {
+        color: var(--color-c0b9);
+      }
+      .fg-c1b9 {
+        color: var(--color-c1b9);
+      }
+      .fg-c2b9 {
+        color: var(--color-c2b9);
+      }
+      .fg-c3b9 {
+        color: var(--color-c3b9);
+      }
+      .fg-c4b9 {
+        color: var(--color-c4b9);
+      }
+      .fg-c5b9 {
+        color: var(--color-c5b9);
+      }
+      .fg-c6b9 {
+        color: var(--color-c6b9);
+      }
+      .fg-c7b9 {
+        color: var(--color-c7b9);
+      }
+      .fg-c8b9 {
+        color: var(--color-c8b9);
+      }
+      .fg-c9b9 {
+        color: var(--color-c9b9);
+      }
+
+      .bg-c0b0 {
+        background-color: var(--color-c0b0);
+      }
+      .bg-c1b0 {
+        background-color: var(--color-c1b0);
+      }
+      .bg-c2b0 {
+        background-color: var(--color-c2b0);
+      }
+      .bg-c3b0 {
+        background-color: var(--color-c3b0);
+      }
+      .bg-c4b0 {
+        background-color: var(--color-c4b0);
+      }
+      .bg-c5b0 {
+        background-color: var(--color-c5b0);
+      }
+      .bg-c6b0 {
+        background-color: var(--color-c6b0);
+      }
+      .bg-c7b0 {
+        background-color: var(--color-c7b0);
+      }
+      .bg-c8b0 {
+        background-color: var(--color-c8b0);
+      }
+      .bg-c9b0 {
+        background-color: var(--color-c9b0);
+      }
+      .bg-c0b1 {
+        background-color: var(--color-c0b1);
+      }
+      .bg-c1b1 {
+        background-color: var(--color-c1b1);
+      }
+      .bg-c2b1 {
+        background-color: var(--color-c2b1);
+      }
+      .bg-c3b1 {
+        background-color: var(--color-c3b1);
+      }
+      .bg-c4b1 {
+        background-color: var(--color-c4b1);
+      }
+      .bg-c5b1 {
+        background-color: var(--color-c5b1);
+      }
+      .bg-c6b1 {
+        background-color: var(--color-c6b1);
+      }
+      .bg-c7b1 {
+        background-color: var(--color-c7b1);
+      }
+      .bg-c8b1 {
+        background-color: var(--color-c8b1);
+      }
+      .bg-c9b1 {
+        background-color: var(--color-c9b1);
+      }
+      .bg-c0b2 {
+        background-color: var(--color-c0b2);
+      }
+      .bg-c1b2 {
+        background-color: var(--color-c1b2);
+      }
+      .bg-c2b2 {
+        background-color: var(--color-c2b2);
+      }
+      .bg-c3b2 {
+        background-color: var(--color-c3b2);
+      }
+      .bg-c4b2 {
+        background-color: var(--color-c4b2);
+      }
+      .bg-c5b2 {
+        background-color: var(--color-c5b2);
+      }
+      .bg-c6b2 {
+        background-color: var(--color-c6b2);
+      }
+      .bg-c7b2 {
+        background-color: var(--color-c7b2);
+      }
+      .bg-c8b2 {
+        background-color: var(--color-c8b2);
+      }
+      .bg-c9b2 {
+        background-color: var(--color-c9b2);
+      }
+      .bg-c0b3 {
+        background-color: var(--color-c0b3);
+      }
+      .bg-c1b3 {
+        background-color: var(--color-c1b3);
+      }
+      .bg-c2b3 {
+        background-color: var(--color-c2b3);
+      }
+      .bg-c3b3 {
+        background-color: var(--color-c3b3);
+      }
+      .bg-c4b3 {
+        background-color: var(--color-c4b3);
+      }
+      .bg-c5b3 {
+        background-color: var(--color-c5b3);
+      }
+      .bg-c6b3 {
+        background-color: var(--color-c6b3);
+      }
+      .bg-c7b3 {
+        background-color: var(--color-c7b3);
+      }
+      .bg-c8b3 {
+        background-color: var(--color-c8b3);
+      }
+      .bg-c9b3 {
+        background-color: var(--color-c9b3);
+      }
+      .bg-c0b4 {
+        background-color: var(--color-c0b4);
+      }
+      .bg-c1b4 {
+        background-color: var(--color-c1b4);
+      }
+      .bg-c2b4 {
+        background-color: var(--color-c2b4);
+      }
+      .bg-c3b4 {
+        background-color: var(--color-c3b4);
+      }
+      .bg-c4b4 {
+        background-color: var(--color-c4b4);
+      }
+      .bg-c5b4 {
+        background-color: var(--color-c5b4);
+      }
+      .bg-c6b4 {
+        background-color: var(--color-c6b4);
+      }
+      .bg-c7b4 {
+        background-color: var(--color-c7b4);
+      }
+      .bg-c8b4 {
+        background-color: var(--color-c8b4);
+      }
+      .bg-c9b4 {
+        background-color: var(--color-c9b4);
+      }
+      .bg-c0b5 {
+        background-color: var(--color-c0b5);
+      }
+      .bg-c1b5 {
+        background-color: var(--color-c1b5);
+      }
+      .bg-c2b5 {
+        background-color: var(--color-c2b5);
+      }
+      .bg-c3b5 {
+        background-color: var(--color-c3b5);
+      }
+      .bg-c4b5 {
+        background-color: var(--color-c4b5);
+      }
+      .bg-c5b5 {
+        background-color: var(--color-c5b5);
+      }
+      .bg-c6b5 {
+        background-color: var(--color-c6b5);
+      }
+      .bg-c7b5 {
+        background-color: var(--color-c7b5);
+      }
+      .bg-c8b5 {
+        background-color: var(--color-c8b5);
+      }
+      .bg-c9b5 {
+        background-color: var(--color-c9b5);
+      }
+      .bg-c0b6 {
+        background-color: var(--color-c0b6);
+      }
+      .bg-c1b6 {
+        background-color: var(--color-c1b6);
+      }
+      .bg-c2b6 {
+        background-color: var(--color-c2b6);
+      }
+      .bg-c3b6 {
+        background-color: var(--color-c3b6);
+      }
+      .bg-c4b6 {
+        background-color: var(--color-c4b6);
+      }
+      .bg-c5b6 {
+        background-color: var(--color-c5b6);
+      }
+      .bg-c6b6 {
+        background-color: var(--color-c6b6);
+      }
+      .bg-c7b6 {
+        background-color: var(--color-c7b6);
+      }
+      .bg-c8b6 {
+        background-color: var(--color-c8b6);
+      }
+      .bg-c9b6 {
+        background-color: var(--color-c9b6);
+      }
+      .bg-c0b7 {
+        background-color: var(--color-c0b7);
+      }
+      .bg-c1b7 {
+        background-color: var(--color-c1b7);
+      }
+      .bg-c2b7 {
+        background-color: var(--color-c2b7);
+      }
+      .bg-c3b7 {
+        background-color: var(--color-c3b7);
+      }
+      .bg-c4b7 {
+        background-color: var(--color-c4b7);
+      }
+      .bg-c5b7 {
+        background-color: var(--color-c5b7);
+      }
+      .bg-c6b7 {
+        background-color: var(--color-c6b7);
+      }
+      .bg-c7b7 {
+        background-color: var(--color-c7b7);
+      }
+      .bg-c8b7 {
+        background-color: var(--color-c8b7);
+      }
+      .bg-c9b7 {
+        background-color: var(--color-c9b7);
+      }
+      .bg-c0b8 {
+        background-color: var(--color-c0b8);
+      }
+      .bg-c1b8 {
+        background-color: var(--color-c1b8);
+      }
+      .bg-c2b8 {
+        background-color: var(--color-c2b8);
+      }
+      .bg-c3b8 {
+        background-color: var(--color-c3b8);
+      }
+      .bg-c4b8 {
+        background-color: var(--color-c4b8);
+      }
+      .bg-c5b8 {
+        background-color: var(--color-c5b8);
+      }
+      .bg-c6b8 {
+        background-color: var(--color-c6b8);
+      }
+      .bg-c7b8 {
+        background-color: var(--color-c7b8);
+      }
+      .bg-c8b8 {
+        background-color: var(--color-c8b8);
+      }
+      .bg-c9b8 {
+        background-color: var(--color-c9b8);
+      }
+      .bg-c0b9 {
+        background-color: var(--color-c0b9);
+      }
+      .bg-c1b9 {
+        background-color: var(--color-c1b9);
+      }
+      .bg-c2b9 {
+        background-color: var(--color-c2b9);
+      }
+      .bg-c3b9 {
+        background-color: var(--color-c3b9);
+      }
+      .bg-c4b9 {
+        background-color: var(--color-c4b9);
+      }
+      .bg-c5b9 {
+        background-color: var(--color-c5b9);
+      }
+      .bg-c6b9 {
+        background-color: var(--color-c6b9);
+      }
+      .bg-c7b9 {
+        background-color: var(--color-c7b9);
+      }
+      .bg-c8b9 {
+        background-color: var(--color-c8b9);
+      }
+      .bg-c9b9 {
+        background-color: var(--color-c9b9);
+      }
+
+      .controls {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        grid-column-gap: 1em;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Choose Your Favorite Color</h1>
+
+    <div class="controls">
+      <div id="hue-selector-div">
+        <div class="slidecontainer">
+          <input
+            type="range"
+            min="0"
+            max="360"
+            value="180"
+            class="slider"
+            id="hue-selector"
+          />
+        </div>
+
+        <div id="output">
+          <strong>Hue: </strong>
+          <span id="hue"></span>
+          <div id="hue-box">&#160;</div>
+        </div>
+      </div>
+      <div id="color-scheme-selector">
+        <div>
+          <input
+            type="radio"
+            id="auto-color-scheme"
+            name="color-scheme"
+            value="auto"
+            checked
+          />
+          <label for="auto-color-scheme">Auto</label>
+        </div>
+        <div>
+          <input
+            type="radio"
+            id="light-color-scheme"
+            name="color-scheme"
+            value="light"
+          />
+          <label for="light-color-scheme">Light</label>
+        </div>
+        <div>
+          <input
+            type="radio"
+            id="dark-color-scheme"
+            name="color-scheme"
+            value="dark"
+          />
+          <label for="dark-color-scheme">Dark</label>
+        </div>
+      </div>
+      <div id="prefers-contrast-selector">
+        <div>
+          <input
+            type="radio"
+            id="auto-contrast-selector"
+            name="color-scheme"
+            value="auto"
+            checked
+          />
+          <label for="auto-contrast-selector">Auto</label>
+        </div>
+        <div>
+          <input
+            type="radio"
+            id="more-contrast-selector"
+            name="color-scheme"
+            value="more"
+          />
+          <label for="more-contrast-selector">More</label>
+        </div>
+        <div>
+          <input
+            type="radio"
+            id="less-contrast-selector"
+            name="color-scheme"
+            value="less"
+          />
+          <label for="less-contrast-selector">Less</label>
+        </div>
+      </div>
+    </div>
+
+    <h1>Color Grid</h1>
+
+    <table>
+      <tr>
+        <th></th>
+        <th>c0</th>
+        <th>c1</th>
+        <th>c2</th>
+        <th>c3</th>
+        <th>c4</th>
+        <th>c5</th>
+        <th>c6</th>
+        <th>c7</th>
+        <th>c8</th>
+        <th>c9</th>
+      </tr>
+      <tr>
+        <th>b0</th>
+        <td class="bg-c0b0">c0b0</td>
+        <td class="bg-c1b0">c1b0</td>
+        <td class="bg-c2b0">c2b0</td>
+        <td class="bg-c3b0">c3b0</td>
+        <td class="bg-c4b0">c4b0</td>
+        <td class="bg-c5b0">c5b0</td>
+        <td class="bg-c6b0">c6b0</td>
+        <td class="bg-c7b0">c7b0</td>
+        <td class="bg-c8b0">c8b0</td>
+        <td class="bg-c9b0">c9b0</td>
+      </tr>
+      <tr>
+        <th>b1</th>
+        <td class="bg-c0b1">c0b1</td>
+        <td class="bg-c1b1">c1b1</td>
+        <td class="bg-c2b1">c2b1</td>
+        <td class="bg-c3b1">c3b1</td>
+        <td class="bg-c4b1">c4b1</td>
+        <td class="bg-c5b1">c5b1</td>
+        <td class="bg-c6b1">c6b1</td>
+        <td class="bg-c7b1">c7b1</td>
+        <td class="bg-c8b1">c8b1</td>
+        <td class="bg-c9b1">c9b1</td>
+      </tr>
+      <tr>
+        <th>b2</th>
+        <td class="bg-c0b2">c0b2</td>
+        <td class="bg-c1b2">c1b2</td>
+        <td class="bg-c2b2">c2b2</td>
+        <td class="bg-c3b2">c3b2</td>
+        <td class="bg-c4b2">c4b2</td>
+        <td class="bg-c5b2">c5b2</td>
+        <td class="bg-c6b2">c6b2</td>
+        <td class="bg-c7b2">c7b2</td>
+        <td class="bg-c8b2">c8b2</td>
+        <td class="bg-c9b2">c9b2</td>
+      </tr>
+      <tr>
+        <th>b3</th>
+        <td class="bg-c0b3">c0b3</td>
+        <td class="bg-c1b3">c1b3</td>
+        <td class="bg-c2b3">c2b3</td>
+        <td class="bg-c3b3">c3b3</td>
+        <td class="bg-c4b3">c4b3</td>
+        <td class="bg-c5b3">c5b3</td>
+        <td class="bg-c6b3">c6b3</td>
+        <td class="bg-c7b3">c7b3</td>
+        <td class="bg-c8b3">c8b3</td>
+        <td class="bg-c9b3">c9b3</td>
+      </tr>
+      <tr>
+        <th>b4</th>
+        <td class="bg-c0b4">c0b4</td>
+        <td class="bg-c1b4">c1b4</td>
+        <td class="bg-c2b4">c2b4</td>
+        <td class="bg-c3b4">c3b4</td>
+        <td class="bg-c4b4">c4b4</td>
+        <td class="bg-c5b4">c5b4</td>
+        <td class="bg-c6b4">c6b4</td>
+        <td class="bg-c7b4">c7b4</td>
+        <td class="bg-c8b4">c8b4</td>
+        <td class="bg-c9b4">c9b4</td>
+      </tr>
+      <tr>
+        <th>b5</th>
+        <td class="bg-c0b5">c0b5</td>
+        <td class="bg-c1b5">c1b5</td>
+        <td class="bg-c2b5">c2b5</td>
+        <td class="bg-c3b5">c3b5</td>
+        <td class="bg-c4b5">c4b5</td>
+        <td class="bg-c5b5">c5b5</td>
+        <td class="bg-c6b5">c6b5</td>
+        <td class="bg-c7b5">c7b5</td>
+        <td class="bg-c8b5">c8b5</td>
+        <td class="bg-c9b5">c9b5</td>
+      </tr>
+      <tr>
+        <th>b6</th>
+        <td class="bg-c0b6">c0b6</td>
+        <td class="bg-c1b6">c1b6</td>
+        <td class="bg-c2b6">c2b6</td>
+        <td class="bg-c3b6">c3b6</td>
+        <td class="bg-c4b6">c4b6</td>
+        <td class="bg-c5b6">c5b6</td>
+        <td class="bg-c6b6">c6b6</td>
+        <td class="bg-c7b6">c7b6</td>
+        <td class="bg-c8b6">c8b6</td>
+        <td class="bg-c9b6">c9b6</td>
+      </tr>
+      <tr>
+        <th>b7</th>
+        <td class="bg-c0b7">c0b7</td>
+        <td class="bg-c1b7">c1b7</td>
+        <td class="bg-c2b7">c2b7</td>
+        <td class="bg-c3b7">c3b7</td>
+        <td class="bg-c4b7">c4b7</td>
+        <td class="bg-c5b7">c5b7</td>
+        <td class="bg-c6b7">c6b7</td>
+        <td class="bg-c7b7">c7b7</td>
+        <td class="bg-c8b7">c8b7</td>
+        <td class="bg-c9b7">c9b7</td>
+      </tr>
+      <tr>
+        <th>b8</th>
+        <td class="bg-c0b8">c0b8</td>
+        <td class="bg-c1b8">c1b8</td>
+        <td class="bg-c2b8">c2b8</td>
+        <td class="bg-c3b8">c3b8</td>
+        <td class="bg-c4b8">c4b8</td>
+        <td class="bg-c5b8">c5b8</td>
+        <td class="bg-c6b8">c6b8</td>
+        <td class="bg-c7b8">c7b8</td>
+        <td class="bg-c8b8">c8b8</td>
+        <td class="bg-c9b8">c9b8</td>
+      </tr>
+      <tr>
+        <th>b9</th>
+        <td class="bg-c0b9">c0b9</td>
+        <td class="bg-c1b9">c1b9</td>
+        <td class="bg-c2b9">c2b9</td>
+        <td class="bg-c3b9">c3b9</td>
+        <td class="bg-c4b9">c4b9</td>
+        <td class="bg-c5b9">c5b9</td>
+        <td class="bg-c6b9">c6b9</td>
+        <td class="bg-c7b9">c7b9</td>
+        <td class="bg-c8b9">c8b9</td>
+        <td class="bg-c9b9">c9b9</td>
+      </tr>
+    </table>
+
+    <h1>Contrast Grid</h1>
+
+    <table>
+      <tr>
+        <th></th>
+        <th>c0</th>
+        <th>c1</th>
+        <th>c2</th>
+        <th>c3</th>
+        <th>c4</th>
+        <th>c5</th>
+        <th>c6</th>
+        <th>c7</th>
+        <th>c8</th>
+        <th>c9</th>
+      </tr>
+      <tr>
+        <th>+5</th>
+        <td class="fg-c0b5 bg-c0b0">c0b0</td>
+        <!-- fg-c0b7 bg-c0b0 -->
+        <td class="fg-c1b5 bg-c1b0">c1b0</td>
+        <td class="fg-c2b5 bg-c2b0">c2b0</td>
+        <td class="fg-c3b5 bg-c3b0">c3b0</td>
+        <td class="fg-c4b5 bg-c4b0">c4b0</td>
+        <td class="fg-c5b5 bg-c5b0">c5b0</td>
+        <td class="fg-c6b5 bg-c6b0">c6b0</td>
+        <td class="fg-c7b5 bg-c7b0">c7b0</td>
+        <td class="fg-c8b5 bg-c8b0">c8b0</td>
+        <td class="fg-c8b5 bg-c9b0">c9b0</td>
+      </tr>
+      <tr>
+        <th>+7</th>
+        <td class="fg-c0b7 bg-c0b0">c0b0</td>
+        <!-- fg-c0b7 bg-c0b0 -->
+        <td class="fg-c1b7 bg-c1b0">c1b0</td>
+        <td class="fg-c2b7 bg-c2b0">c2b0</td>
+        <td class="fg-c3b7 bg-c3b0">c3b0</td>
+        <td class="fg-c4b7 bg-c4b0">c4b0</td>
+        <td class="fg-c5b7 bg-c5b0">c5b0</td>
+        <td class="fg-c6b7 bg-c6b0">c6b0</td>
+        <td class="fg-c7b7 bg-c7b0">c7b0</td>
+        <td class="fg-c8b7 bg-c8b0">c8b0</td>
+        <td class="fg-c8b7 bg-c9b0">c9b0</td>
+      </tr>
+      <tr>
+        <th>+9</th>
+        <td class="fg-c0b9 bg-c0b0">c0b0</td>
+        <!-- fg-c0b7 bg-c0b0 -->
+        <td class="fg-c1b9 bg-c1b0">c1b0</td>
+        <td class="fg-c2b9 bg-c2b0">c2b0</td>
+        <td class="fg-c3b9 bg-c3b0">c3b0</td>
+        <td class="fg-c4b9 bg-c4b0">c4b0</td>
+        <td class="fg-c5b9 bg-c5b0">c5b0</td>
+        <td class="fg-c6b9 bg-c6b0">c6b0</td>
+        <td class="fg-c7b9 bg-c7b0">c7b0</td>
+        <td class="fg-c8b9 bg-c8b0">c8b0</td>
+        <td class="fg-c8b9 bg-c9b0">c9b0</td>
+      </tr>
+      <tr>
+        <th>-3</th>
+        <td class="fg-c0b3 bg-c0b9">c0b0</td>
+        <!-- fg-c0b7 bg-c0b0 -->
+        <td class="fg-c1b3 bg-c1b9">c1b0</td>
+        <td class="fg-c2b3 bg-c2b9">c2b0</td>
+        <td class="fg-c3b3 bg-c3b9">c3b0</td>
+        <td class="fg-c4b3 bg-c4b9">c4b0</td>
+        <td class="fg-c5b3 bg-c5b9">c5b0</td>
+        <td class="fg-c6b3 bg-c6b9">c6b0</td>
+        <td class="fg-c7b3 bg-c7b9">c7b0</td>
+        <td class="fg-c8b3 bg-c8b9">c8b0</td>
+        <td class="fg-c8b3 bg-c9b9">c9b0</td>
+      </tr>
+      <tr>
+        <th>-7</th>
+        <td class="fg-c0b2 bg-c0b9">c0b0</td>
+        <!-- fg-c0b7 bg-c0b0 -->
+        <td class="fg-c1b2 bg-c1b9">c1b0</td>
+        <td class="fg-c2b2 bg-c2b9">c2b0</td>
+        <td class="fg-c3b2 bg-c3b9">c3b0</td>
+        <td class="fg-c4b2 bg-c4b9">c4b0</td>
+        <td class="fg-c5b2 bg-c5b9">c5b0</td>
+        <td class="fg-c6b2 bg-c6b9">c6b0</td>
+        <td class="fg-c7b2 bg-c7b9">c7b0</td>
+        <td class="fg-c8b2 bg-c8b9">c8b0</td>
+        <td class="fg-c8b2 bg-c9b9">c9b0</td>
+      </tr>
+      <tr>
+        <th>-9</th>
+        <td class="fg-c0b0 bg-c0b9">c0b0</td>
+        <!-- fg-c0b7 bg-c0b0 -->
+        <td class="fg-c1b0 bg-c1b9">c1b0</td>
+        <td class="fg-c2b0 bg-c2b9">c2b0</td>
+        <td class="fg-c3b0 bg-c3b9">c3b0</td>
+        <td class="fg-c4b0 bg-c4b9">c4b0</td>
+        <td class="fg-c5b0 bg-c5b9">c5b0</td>
+        <td class="fg-c6b0 bg-c6b9">c6b0</td>
+        <td class="fg-c7b0 bg-c7b9">c7b0</td>
+        <td class="fg-c8b0 bg-c8b9">c8b0</td>
+        <td class="fg-c8b0 bg-c9b9">c9b0</td>
+      </tr>
+      <tr>
+        <th>+5</th>
+        <td class="fg-c5b5 bg-c0b0">c0b0</td>
+        <!-- fg-c0b7 bg-c0b0 -->
+        <td class="fg-c6b5 bg-c1b0">c1b0</td>
+        <td class="fg-c7b5 bg-c2b0">c2b0</td>
+        <td class="fg-c8b5 bg-c3b0">c3b0</td>
+        <td class="fg-c9b5 bg-c4b0">c4b0</td>
+        <td class="fg-c0b5 bg-c5b0">c5b0</td>
+        <td class="fg-c1b5 bg-c6b0">c6b0</td>
+        <td class="fg-c2b5 bg-c7b0">c7b0</td>
+        <td class="fg-c3b5 bg-c8b0">c8b0</td>
+        <td class="fg-c4b5 bg-c9b0">c9b0</td>
+      </tr>
+      <tr>
+        <th>+7</th>
+        <td class="fg-c5b7 bg-c0b0">c0b0</td>
+        <!-- fg-c0b7 bg-c0b0 -->
+        <td class="fg-c6b7 bg-c1b0">c1b0</td>
+        <td class="fg-c7b7 bg-c2b0">c2b0</td>
+        <td class="fg-c8b7 bg-c3b0">c3b0</td>
+        <td class="fg-c9b7 bg-c4b0">c4b0</td>
+        <td class="fg-c0b7 bg-c5b0">c5b0</td>
+        <td class="fg-c1b7 bg-c6b0">c6b0</td>
+        <td class="fg-c2b7 bg-c7b0">c7b0</td>
+        <td class="fg-c3b7 bg-c8b0">c8b0</td>
+        <td class="fg-c4b7 bg-c9b0">c9b0</td>
+      </tr>
+      <tr>
+        <th>+9</th>
+        <td class="fg-c5b9 bg-c0b0">c0b0</td>
+        <!-- fg-c0b7 bg-c0b0 -->
+        <td class="fg-c6b9 bg-c1b0">c1b0</td>
+        <td class="fg-c7b9 bg-c2b0">c2b0</td>
+        <td class="fg-c8b9 bg-c3b0">c3b0</td>
+        <td class="fg-c9b9 bg-c4b0">c4b0</td>
+        <td class="fg-c0b9 bg-c5b0">c5b0</td>
+        <td class="fg-c1b9 bg-c6b0">c6b0</td>
+        <td class="fg-c2b9 bg-c7b0">c7b0</td>
+        <td class="fg-c3b9 bg-c8b0">c8b0</td>
+        <td class="fg-c4b9 bg-c9b0">c9b0</td>
+      </tr>
+      <tr>
+        <th>-3</th>
+        <td class="fg-c5b3 bg-c0b9">c0b0</td>
+        <!-- fg-c0b7 bg-c0b0 -->
+        <td class="fg-c6b3 bg-c1b9">c1b0</td>
+        <td class="fg-c7b3 bg-c2b9">c2b0</td>
+        <td class="fg-c8b3 bg-c3b9">c3b0</td>
+        <td class="fg-c9b3 bg-c4b9">c4b0</td>
+        <td class="fg-c0b3 bg-c5b9">c5b0</td>
+        <td class="fg-c1b3 bg-c6b9">c6b0</td>
+        <td class="fg-c2b3 bg-c7b9">c7b0</td>
+        <td class="fg-c3b3 bg-c8b9">c8b0</td>
+        <td class="fg-c4b3 bg-c9b9">c9b0</td>
+      </tr>
+      <tr>
+        <th>-7</th>
+        <td class="fg-c5b2 bg-c0b9">c0b0</td>
+        <!-- fg-c0b7 bg-c0b0 -->
+        <td class="fg-c6b2 bg-c1b9">c1b0</td>
+        <td class="fg-c7b2 bg-c2b9">c2b0</td>
+        <td class="fg-c8b2 bg-c3b9">c3b0</td>
+        <td class="fg-c9b2 bg-c4b9">c4b0</td>
+        <td class="fg-c0b2 bg-c5b9">c5b0</td>
+        <td class="fg-c1b2 bg-c6b9">c6b0</td>
+        <td class="fg-c2b2 bg-c7b9">c7b0</td>
+        <td class="fg-c3b2 bg-c8b9">c8b0</td>
+        <td class="fg-c4b2 bg-c9b9">c9b0</td>
+      </tr>
+      <tr>
+        <th>-9</th>
+        <td class="fg-c5b0 bg-c0b9">c0b0</td>
+        <!-- fg-c0b7 bg-c0b0 -->
+        <td class="fg-c6b0 bg-c1b9">c1b0</td>
+        <td class="fg-c7b0 bg-c2b9">c2b0</td>
+        <td class="fg-c8b0 bg-c3b9">c3b0</td>
+        <td class="fg-c9b0 bg-c4b9">c4b0</td>
+        <td class="fg-c0b0 bg-c5b9">c5b0</td>
+        <td class="fg-c1b0 bg-c6b9">c6b0</td>
+        <td class="fg-c2b0 bg-c7b9">c7b0</td>
+        <td class="fg-c3b0 bg-c8b9">c8b0</td>
+        <td class="fg-c4b0 bg-c9b9">c9b0</td>
+      </tr>
+    </table>
+  </body>
+  <script>
+    // Hue
+    var slider = document.getElementById("hue-selector");
+    var output = document.getElementById("hue");
+    var box = document.getElementById("hue-box");
+
+    output.innerHTML = slider.value; // Display the default slider value
+
+    // Update the current slider value (each time you drag the slider handle)
+    slider.oninput = function () {
+      document.documentElement.style.setProperty("--color-hue", this.value);
+      output.innerHTML = this.value;
+    };
+
+    // Color Theme
+    var autoColorTheme = document.getElementById("auto-color-scheme");
+    var lightColorTheme = document.getElementById("light-color-scheme");
+    var darkColorTheme = document.getElementById("dark-color-scheme");
+
+    autoColorTheme.onclick = function () {
+      document.documentElement.removeAttribute("data-prefers-color-scheme");
+    };
+
+    lightColorTheme.onclick = function () {
+      document.documentElement.setAttribute(
+        "data-prefers-color-scheme",
+        "light",
+      );
+    };
+
+    darkColorTheme.onclick = function () {
+      document.documentElement.setAttribute(
+        "data-prefers-color-scheme",
+        "dark",
+      );
+    };
+
+    // Prefers Contrast
+    var autoContrast = document.getElementById("auto-contrast-selector");
+    var moreContrast = document.getElementById("more-contrast-selector");
+    var lessContrast = document.getElementById("less-contrast-selector");
+
+    autoContrast.onclick = function () {
+      document.documentElement.removeAttribute("data-prefers-contrast");
+    };
+
+    moreContrast.onclick = function () {
+      document.documentElement.setAttribute("data-prefers-contrast", "more");
+    };
+
+    lessContrast.onclick = function () {
+      document.documentElement.setAttribute("data-prefers-contrast", "less");
+    };
+  </script>
+</html>
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..dee2322
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,2 @@
+@import url("./colors.css");
+@import url("./theme.css");
diff --git a/src/theme.css b/src/theme.css
new file mode 100644
index 0000000..03e8433
--- /dev/null
+++ b/src/theme.css
@@ -0,0 +1,48 @@
+:root {
+  background-color: var(--color-c0b9);
+  color: var(--color-c0b1);
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    background-color: var(--color-c0b9);
+    color: var(--color-c0b1);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    background-color: var(--color-c0b0);
+    color: var(--color-c0b8);
+  }
+}
+
+[data-prefers-color-scheme="light"] {
+  background-color: var(--color-c0b9);
+  color: var(--color-c0b1);
+}
+
+[data-prefers-color-scheme="light"][data-prefers-contrast="more"] {
+  background-color: var(--color-c0b9);
+  color: var(--color-c0b0);
+}
+
+[data-prefers-color-scheme="light"][data-prefers-contrast="less"] {
+  background-color: var(--color-c0b9);
+  color: var(--color-c0b2);
+}
+
+[data-prefers-color-scheme="dark"] {
+  background-color: var(--color-c0b0);
+  color: var(--color-c0b8);
+}
+
+[data-prefers-color-scheme="dark"][data-prefers-contrast="more"] {
+  background-color: var(--color-c0b0);
+  color: var(--color-c0b9);
+}
+
+[data-prefers-color-scheme="dark"][data-prefers-contrast="less"] {
+  background-color: var(--color-c0b0);
+  color: var(--color-c0b7);
+}