diff --git a/build.js b/build.js
index 2577b70..bf5e415 100644
--- a/build.js
+++ b/build.js
@@ -32,11 +32,11 @@ function example(code) {
 }
 
 function buildDocs() {
-  const template = fs.readFileSync("./docs/index.html.ejs", "utf-8");
+  const template = fs.readFileSync("docs/index.html.ejs", "utf-8");
 
-  fs.copyFileSync("./build/style.css", "./docs/style.css");
+  fs.copyFileSync("build/98.css", "docs/98.css");
   fs.writeFileSync(
-    "./docs/index.html",
+    "docs/index.html",
     ejs.render(template, { getNewId, getCurrentId, example })
   );
 }
@@ -44,13 +44,14 @@ function buildDocs() {
 function buildCSS() {
   return postcss()
     .use(require("postcss-inline-svg"))
-    .process(fs.readFileSync("./style.css"), {
+    .use(require("postcss-css-variables")({ preserve: "computed" }))
+    .process(fs.readFileSync("style.css"), {
       from: "style.css",
-      to: "./build/style.css",
+      to: "build/98.css",
     })
     .then((result) => {
-      mkdirp.sync("./build");
-      fs.writeFileSync("./build/style.css", result.css);
+      mkdirp.sync("build");
+      fs.writeFileSync("build/98.css", result.css);
     });
 }
 
diff --git a/build/style.css b/build/98.css
similarity index 74%
rename from build/style.css
rename to build/98.css
index e80fcee..d04e53c 100644
--- a/build/style.css
+++ b/build/98.css
@@ -18,30 +18,32 @@
   --radio-label-spacing: 6px;
 
   /* Some detailed computations for radio buttons and checkboxes */
-  --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
-  --radio-total-width: calc(var(--radio-total-width-precalc));
-  --radio-left: calc(-1 * var(--radio-total-width-precalc));
+  --radio-total-width-precalc: 12px + 6px;
+  --radio-total-width: calc(12px + 6px);
+  --radio-left: calc(-1 * 12px + 6px);
 
-  --checkbox-total-width-precalc: var(--checkbox-width) +
-    var(--radio-label-spacing);
-  --checkbox-total-width: calc(var(--checkbox-total-width-precalc));
-  --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
+  --checkbox-total-width-precalc: 13px +
+    6px;
+  --checkbox-total-width: calc(13px +
+    6px);
+  --checkbox-left: calc(-1 * 13px +
+    6px);
 
   /* Borders */
   --border-width: 1px;
-  --border-raised-outer: inset -1px -1px var(--window-frame),
-    inset 1px 1px var(--button-highlight);
-  --border-raised-inner: inset -2px -2px var(--button-shadow),
-    inset 2px 2px var(--button-face);
-  --border-sunken-outer: inset -1px -1px var(--button-highlight),
-    inset 1px 1px var(--window-frame);
-  --border-sunken-inner: inset -2px -2px var(--button-face),
-    inset 2px 2px var(--button-shadow);
+  --border-raised-outer: inset -1px -1px #0a0a0a,
+    inset 1px 1px #ffffff;
+  --border-raised-inner: inset -2px -2px #808080,
+    inset 2px 2px #dfdfdf;
+  --border-sunken-outer: inset -1px -1px #ffffff,
+    inset 1px 1px #0a0a0a;
+  --border-sunken-inner: inset -2px -2px #dfdfdf,
+    inset 2px 2px #808080;
 
   /* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
-  --border-field: inset -1px -1px var(--button-highlight),
-    inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
-    inset 2px 2px var(--window-frame);
+  --border-field: inset -1px -1px #ffffff,
+    inset 1px 1px #808080, inset -2px -2px #dfdfdf,
+    inset 2px 2px #0a0a0a;
 }
 
 * {
@@ -72,8 +74,10 @@ u {
 button {
   box-sizing: border-box;
   border: none;
-  background: var(--surface);
-  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
+  background: #c0c0c0;
+  box-shadow: inset -1px -1px #0a0a0a,
+    inset 1px 1px #ffffff, inset -2px -2px #808080,
+    inset 2px 2px #dfdfdf;
 
   min-width: 75px;
   min-height: 23px;
@@ -81,7 +85,9 @@ button {
 }
 
 button:active {
-  box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
+  box-shadow: inset -1px -1px #ffffff,
+    inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf,
+    inset 2px 2px #808080;
 }
 
 button:focus {
@@ -89,23 +95,29 @@ button:focus {
   outline-offset: -4px;
 }
 
-:disabled,
+:disabled {
+  color: #808080;
+  text-shadow: 1px 1px 0 #ffffff;
+}
+
 :disabled + label {
-  color: var(--button-shadow);
-  text-shadow: 1px 1px 0 var(--button-highlight);
+  color: #808080;
+  text-shadow: 1px 1px 0 #ffffff;
 }
 
 .dialog {
-  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
-  background: var(--surface);
+  box-shadow: inset -1px -1px #0a0a0a,
+    inset 1px 1px #ffffff, inset -2px -2px #808080,
+    inset 2px 2px #dfdfdf;
+  background: #c0c0c0;
   padding: 3px;
 }
 
 .menubar {
   background: linear-gradient(
     90deg,
-    var(--dialog-blue),
-    var(--dialog-blue-light)
+    #000080,
+    #1084d0
   );
   padding: 2px;
   display: flex;
@@ -157,11 +169,11 @@ button:focus {
 }
 
 .dialog-body {
-  margin: var(--element-spacing);
+  margin: 8px;
 }
 
 .dialog-body > * + * {
-  margin-top: var(--element-spacing);
+  margin-top: 8px;
 }
 
 .align-right {
@@ -170,14 +182,16 @@ button:focus {
 
 fieldset {
   border: none;
-  box-shadow: var(--border-sunken-outer), var(--border-raised-inner);
-  padding: calc(2 * var(--border-width) + var(--element-spacing));
-  padding-block-start: var(--element-spacing);
+  box-shadow: inset -1px -1px #ffffff,
+    inset 1px 1px #0a0a0a, inset -2px -2px #808080,
+    inset 2px 2px #dfdfdf;
+  padding: calc(2 * 1px + 8px);
+  padding-block-start: 8px;
   margin: 0;
 }
 
 legend {
-  background: var(--surface);
+  background: #c0c0c0;
 }
 
 .field-row {
@@ -186,11 +200,11 @@ legend {
 }
 
 [class^="field-row"] + [class^="field-row"] {
-  margin-top: var(--grouped-element-spacing);
+  margin-top: 6px;
 }
 
 .field-row * + * {
-  margin-left: var(--grouped-element-spacing);
+  margin-left: 6px;
 }
 
 .field-row-stacked {
@@ -199,7 +213,7 @@ legend {
 }
 
 .field-row-stacked * + * {
-  margin-top: var(--grouped-element-spacing);
+  margin-top: 6px;
 }
 
 label {
@@ -219,39 +233,55 @@ input[type="checkbox"] {
 
 input[type="radio"] + label {
   position: relative;
-  margin-left: var(--radio-total-width);
+  margin-left: calc(12px + 6px);
 }
 
 input[type="radio"] + label::before {
   content: "";
   position: absolute;
-  left: calc(-1 * var(--radio-total-width));
+  left: calc(-1 * (12px + 6px));
   display: inline-block;
-  width: var(--radio-width);
-  height: var(--radio-width);
-  margin-right: var(--radio-label-spacing);
+  width: 12px;
+  height: 12px;
+  margin-right: 6px;
   background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z' fill='%23808080'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3H10V4H9V3ZM10 8V4H11V8H10ZM8 10V9H9V8H10V9V10H8ZM4 10V11H8V10H4ZM4 10V9H2V10H4Z' fill='%23DFDFDF'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z' fill='white'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z' fill='white'/%3E %3C/svg%3E");
 }
 
 input[type="radio"]:checked + label::after {
   --radio-dot-width: 4px;
-  --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
-  --radio-dot-left: calc(
-    -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(
-        --radio-dot-width
-      ) / 2
-  );
+  --radio-dot-top: undefined;
+  --radio-dot-left: undefined;
 
   content: "";
   display: block;
-  width: var(--radio-dot-width);
-  height: var(--radio-dot-width);
-  top: var(--radio-dot-top);
-  left: var(--radio-dot-left);
+  width: undefined;
+  height: undefined;
+  top: undefined;
+  left: undefined;
   position: absolute;
   background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' viewBox='0 0 4 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z' fill='black'/%3E %3C/svg%3E");
 }
 
+input[type="radio"]:checked + label::after::after {
+  left: undefined;
+}
+
+input[type="radio"]:checked + label::after::after {
+  top: undefined;
+}
+
+input[type="radio"]:checked + label::after::after {
+  top: undefined;
+}
+
+input[type="radio"]:checked + label::after::after {
+  height: 4px;
+}
+
+input[type="radio"]:checked + label::after::after {
+  width: 4px;
+}
+
 input[type="radio"]:focus + label,
 input[type="checkbox"]:focus + label {
   outline: 1px dotted #000000;
@@ -267,19 +297,23 @@ input[type="radio"][disabled]:checked + label::after {
 
 input[type="checkbox"] + label {
   position: relative;
-  margin-left: var(--checkbox-total-width);
+  margin-left: calc(13px +
+    6px);
 }
 
 input[type="checkbox"] + label::before {
   content: "";
   position: absolute;
-  left: calc(-1 * var(--checkbox-total-width));
+  left: calc(-1 * (13px +
+    6px));
   display: inline-block;
-  width: var(--checkbox-width);
-  height: var(--checkbox-width);
-  background: var(--button-highlight);
-  box-shadow: var(--border-field);
-  margin-right: var(--radio-label-spacing);
+  width: 13px;
+  height: 13px;
+  background: #ffffff;
+  box-shadow: inset -1px -1px #ffffff,
+    inset 1px 1px #808080, inset -2px -2px #dfdfdf,
+    inset 2px 2px #0a0a0a;
+  margin-right: 6px;
 }
 
 input[type="checkbox"]:checked + label::after {
@@ -289,31 +323,75 @@ input[type="checkbox"]:checked + label::after {
 
   content: "";
   display: block;
-  width: var(--checkmark-width);
-  height: var(--checkmark-width);
+  width: undefined;
+  height: undefined;
   position: absolute;
-  top: var(--checkmark-top);
-  left: calc(
-    -1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left)
-  );
+  top: undefined;
+  left: undefined;
   background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' viewBox='0 0 7 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z' fill='black'/%3E %3C/svg%3E");
 }
 
+input[type="checkbox"]:checked + label::after::after {
+  left: calc(
+    -1 * (13px +
+    6px) + 3px
+  );
+}
+
+input[type="checkbox"]:checked + label::after::after {
+  left: calc(
+    -1 * (13px +
+    6px) + 3px
+  );
+}
+
+input[type="checkbox"]:checked + label::after::after {
+  top: 3px;
+}
+
+input[type="checkbox"]:checked + label::after::after {
+  height: 7px;
+}
+
+input[type="checkbox"]:checked + label::after::after {
+  width: 7px;
+}
+
 input[type="checkbox"][disabled] + label::before {
-  background: var(--surface);
+  background: #c0c0c0;
 }
 
 input[type="checkbox"][disabled]:checked + label::after {
   background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' viewBox='0 0 7 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z' fill='%23808080'/%3E %3C/svg%3E");
 }
 
-input[type="text"],
-select,
+input[type="text"] {
+  padding: 3px 4px;
+  border: none;
+  box-shadow: inset -1px -1px #ffffff,
+    inset 1px 1px #808080, inset -2px -2px #dfdfdf,
+    inset 2px 2px #0a0a0a;
+  background-color: #ffffff;
+  box-sizing: border-box;
+}
+
+select {
+  padding: 3px 4px;
+  border: none;
+  box-shadow: inset -1px -1px #ffffff,
+    inset 1px 1px #808080, inset -2px -2px #dfdfdf,
+    inset 2px 2px #0a0a0a;
+  background-color: #ffffff;
+  box-sizing: border-box;
+}
+
 textarea {
   padding: 3px 4px;
   border: none;
-  box-shadow: var(--border-field);
-  background-color: var(--button-highlight);
+  box-shadow: inset -1px -1px #ffffff,
+    inset 1px 1px #808080, inset -2px -2px #dfdfdf,
+    inset 2px 2px #0a0a0a;
+  background-color: #ffffff;
   box-sizing: border-box;
 }
 
@@ -344,8 +422,8 @@ textarea:focus {
 }
 
 select:focus {
-  color: var(--button-highlight);
-  background-color: var(--dialog-blue);
+  color: #ffffff;
+  background-color: #000080;
 }
 select:focus option {
   color: #000;
@@ -357,17 +435,19 @@ select:active {
 }
 
 a {
-  color: var(--link-blue);
+  color: #0000ff;
 }
 
 a:focus {
-  outline: 1px dotted var(--link-blue);
+  outline: 1px dotted #0000ff;
 }
 
 ul.treeview {
   display: block;
-  background: var(--button-highlight);
-  box-shadow: var(--border-field);
+  background: #ffffff;
+  box-shadow: inset -1px -1px #ffffff,
+    inset 1px 1px #808080, inset -2px -2px #dfdfdf,
+    inset 2px 2px #0a0a0a;
   padding: 6px;
   margin: 0;
 }
@@ -382,8 +462,8 @@ ul.treeview a {
 }
 
 ul.treeview a:focus {
-  background-color: var(--dialog-blue);
-  color: var(--button-highlight);
+  background-color: #000080;
+  color: #ffffff;
 }
 
 ul.treeview ul,
@@ -420,13 +500,15 @@ ul.treeview ul > li:last-child::after {
   top: 7px;
   bottom: 0px;
   width: 8px;
-  background: var(--button-highlight);
+  background: #ffffff;
 }
 
 pre {
   display: block;
-  background: var(--button-highlight);
-  box-shadow: var(--border-field);
+  background: #ffffff;
+  box-shadow: inset -1px -1px #ffffff,
+    inset 1px 1px #808080, inset -2px -2px #dfdfdf,
+    inset 2px 2px #0a0a0a;
   padding: 12px 8px;
   margin: 0;
   font-family: monospace;
@@ -448,7 +530,7 @@ summary:focus {
 }
 
 ::-webkit-scrollbar-corner {
-  background: var(--button-face);
+  background: #dfdfdf;
 }
 
 ::-webkit-scrollbar-track {
@@ -456,8 +538,10 @@ summary:focus {
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: var(--button-face);
-  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
+  background-color: #dfdfdf;
+  box-shadow: inset -1px -1px #0a0a0a,
+    inset 1px 1px #ffffff, inset -2px -2px #808080,
+    inset 2px 2px #dfdfdf;
 }
 
 ::-webkit-scrollbar-button:vertical:start {
diff --git a/docs/style.css b/docs/98.css
similarity index 74%
rename from docs/style.css
rename to docs/98.css
index e80fcee..d04e53c 100644
--- a/docs/style.css
+++ b/docs/98.css
@@ -18,30 +18,32 @@
   --radio-label-spacing: 6px;
 
   /* Some detailed computations for radio buttons and checkboxes */
-  --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
-  --radio-total-width: calc(var(--radio-total-width-precalc));
-  --radio-left: calc(-1 * var(--radio-total-width-precalc));
+  --radio-total-width-precalc: 12px + 6px;
+  --radio-total-width: calc(12px + 6px);
+  --radio-left: calc(-1 * 12px + 6px);
 
-  --checkbox-total-width-precalc: var(--checkbox-width) +
-    var(--radio-label-spacing);
-  --checkbox-total-width: calc(var(--checkbox-total-width-precalc));
-  --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
+  --checkbox-total-width-precalc: 13px +
+    6px;
+  --checkbox-total-width: calc(13px +
+    6px);
+  --checkbox-left: calc(-1 * 13px +
+    6px);
 
   /* Borders */
   --border-width: 1px;
-  --border-raised-outer: inset -1px -1px var(--window-frame),
-    inset 1px 1px var(--button-highlight);
-  --border-raised-inner: inset -2px -2px var(--button-shadow),
-    inset 2px 2px var(--button-face);
-  --border-sunken-outer: inset -1px -1px var(--button-highlight),
-    inset 1px 1px var(--window-frame);
-  --border-sunken-inner: inset -2px -2px var(--button-face),
-    inset 2px 2px var(--button-shadow);
+  --border-raised-outer: inset -1px -1px #0a0a0a,
+    inset 1px 1px #ffffff;
+  --border-raised-inner: inset -2px -2px #808080,
+    inset 2px 2px #dfdfdf;
+  --border-sunken-outer: inset -1px -1px #ffffff,
+    inset 1px 1px #0a0a0a;
+  --border-sunken-inner: inset -2px -2px #dfdfdf,
+    inset 2px 2px #808080;
 
   /* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
-  --border-field: inset -1px -1px var(--button-highlight),
-    inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
-    inset 2px 2px var(--window-frame);
+  --border-field: inset -1px -1px #ffffff,
+    inset 1px 1px #808080, inset -2px -2px #dfdfdf,
+    inset 2px 2px #0a0a0a;
 }
 
 * {
@@ -72,8 +74,10 @@ u {
 button {
   box-sizing: border-box;
   border: none;
-  background: var(--surface);
-  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
+  background: #c0c0c0;
+  box-shadow: inset -1px -1px #0a0a0a,
+    inset 1px 1px #ffffff, inset -2px -2px #808080,
+    inset 2px 2px #dfdfdf;
 
   min-width: 75px;
   min-height: 23px;
@@ -81,7 +85,9 @@ button {
 }
 
 button:active {
-  box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
+  box-shadow: inset -1px -1px #ffffff,
+    inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf,
+    inset 2px 2px #808080;
 }
 
 button:focus {
@@ -89,23 +95,29 @@ button:focus {
   outline-offset: -4px;
 }
 
-:disabled,
+:disabled {
+  color: #808080;
+  text-shadow: 1px 1px 0 #ffffff;
+}
+
 :disabled + label {
-  color: var(--button-shadow);
-  text-shadow: 1px 1px 0 var(--button-highlight);
+  color: #808080;
+  text-shadow: 1px 1px 0 #ffffff;
 }
 
 .dialog {
-  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
-  background: var(--surface);
+  box-shadow: inset -1px -1px #0a0a0a,
+    inset 1px 1px #ffffff, inset -2px -2px #808080,
+    inset 2px 2px #dfdfdf;
+  background: #c0c0c0;
   padding: 3px;
 }
 
 .menubar {
   background: linear-gradient(
     90deg,
-    var(--dialog-blue),
-    var(--dialog-blue-light)
+    #000080,
+    #1084d0
   );
   padding: 2px;
   display: flex;
@@ -157,11 +169,11 @@ button:focus {
 }
 
 .dialog-body {
-  margin: var(--element-spacing);
+  margin: 8px;
 }
 
 .dialog-body > * + * {
-  margin-top: var(--element-spacing);
+  margin-top: 8px;
 }
 
 .align-right {
@@ -170,14 +182,16 @@ button:focus {
 
 fieldset {
   border: none;
-  box-shadow: var(--border-sunken-outer), var(--border-raised-inner);
-  padding: calc(2 * var(--border-width) + var(--element-spacing));
-  padding-block-start: var(--element-spacing);
+  box-shadow: inset -1px -1px #ffffff,
+    inset 1px 1px #0a0a0a, inset -2px -2px #808080,
+    inset 2px 2px #dfdfdf;
+  padding: calc(2 * 1px + 8px);
+  padding-block-start: 8px;
   margin: 0;
 }
 
 legend {
-  background: var(--surface);
+  background: #c0c0c0;
 }
 
 .field-row {
@@ -186,11 +200,11 @@ legend {
 }
 
 [class^="field-row"] + [class^="field-row"] {
-  margin-top: var(--grouped-element-spacing);
+  margin-top: 6px;
 }
 
 .field-row * + * {
-  margin-left: var(--grouped-element-spacing);
+  margin-left: 6px;
 }
 
 .field-row-stacked {
@@ -199,7 +213,7 @@ legend {
 }
 
 .field-row-stacked * + * {
-  margin-top: var(--grouped-element-spacing);
+  margin-top: 6px;
 }
 
 label {
@@ -219,39 +233,55 @@ input[type="checkbox"] {
 
 input[type="radio"] + label {
   position: relative;
-  margin-left: var(--radio-total-width);
+  margin-left: calc(12px + 6px);
 }
 
 input[type="radio"] + label::before {
   content: "";
   position: absolute;
-  left: calc(-1 * var(--radio-total-width));
+  left: calc(-1 * (12px + 6px));
   display: inline-block;
-  width: var(--radio-width);
-  height: var(--radio-width);
-  margin-right: var(--radio-label-spacing);
+  width: 12px;
+  height: 12px;
+  margin-right: 6px;
   background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 0H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z' fill='%23808080'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 1H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 3H10V4H9V3ZM10 8V4H11V8H10ZM8 10V9H9V8H10V9V10H8ZM4 10V11H8V10H4ZM4 10V9H2V10H4Z' fill='%23DFDFDF'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 2H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z' fill='white'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 2H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z' fill='white'/%3E %3C/svg%3E");
 }
 
 input[type="radio"]:checked + label::after {
   --radio-dot-width: 4px;
-  --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
-  --radio-dot-left: calc(
-    -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(
-        --radio-dot-width
-      ) / 2
-  );
+  --radio-dot-top: undefined;
+  --radio-dot-left: undefined;
 
   content: "";
   display: block;
-  width: var(--radio-dot-width);
-  height: var(--radio-dot-width);
-  top: var(--radio-dot-top);
-  left: var(--radio-dot-left);
+  width: undefined;
+  height: undefined;
+  top: undefined;
+  left: undefined;
   position: absolute;
   background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='4' viewBox='0 0 4 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z' fill='black'/%3E %3C/svg%3E");
 }
 
+input[type="radio"]:checked + label::after::after {
+  left: undefined;
+}
+
+input[type="radio"]:checked + label::after::after {
+  top: undefined;
+}
+
+input[type="radio"]:checked + label::after::after {
+  top: undefined;
+}
+
+input[type="radio"]:checked + label::after::after {
+  height: 4px;
+}
+
+input[type="radio"]:checked + label::after::after {
+  width: 4px;
+}
+
 input[type="radio"]:focus + label,
 input[type="checkbox"]:focus + label {
   outline: 1px dotted #000000;
@@ -267,19 +297,23 @@ input[type="radio"][disabled]:checked + label::after {
 
 input[type="checkbox"] + label {
   position: relative;
-  margin-left: var(--checkbox-total-width);
+  margin-left: calc(13px +
+    6px);
 }
 
 input[type="checkbox"] + label::before {
   content: "";
   position: absolute;
-  left: calc(-1 * var(--checkbox-total-width));
+  left: calc(-1 * (13px +
+    6px));
   display: inline-block;
-  width: var(--checkbox-width);
-  height: var(--checkbox-width);
-  background: var(--button-highlight);
-  box-shadow: var(--border-field);
-  margin-right: var(--radio-label-spacing);
+  width: 13px;
+  height: 13px;
+  background: #ffffff;
+  box-shadow: inset -1px -1px #ffffff,
+    inset 1px 1px #808080, inset -2px -2px #dfdfdf,
+    inset 2px 2px #0a0a0a;
+  margin-right: 6px;
 }
 
 input[type="checkbox"]:checked + label::after {
@@ -289,31 +323,75 @@ input[type="checkbox"]:checked + label::after {
 
   content: "";
   display: block;
-  width: var(--checkmark-width);
-  height: var(--checkmark-width);
+  width: undefined;
+  height: undefined;
   position: absolute;
-  top: var(--checkmark-top);
-  left: calc(
-    -1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left)
-  );
+  top: undefined;
+  left: undefined;
   background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' viewBox='0 0 7 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z' fill='black'/%3E %3C/svg%3E");
 }
 
+input[type="checkbox"]:checked + label::after::after {
+  left: calc(
+    -1 * (13px +
+    6px) + 3px
+  );
+}
+
+input[type="checkbox"]:checked + label::after::after {
+  left: calc(
+    -1 * (13px +
+    6px) + 3px
+  );
+}
+
+input[type="checkbox"]:checked + label::after::after {
+  top: 3px;
+}
+
+input[type="checkbox"]:checked + label::after::after {
+  height: 7px;
+}
+
+input[type="checkbox"]:checked + label::after::after {
+  width: 7px;
+}
+
 input[type="checkbox"][disabled] + label::before {
-  background: var(--surface);
+  background: #c0c0c0;
 }
 
 input[type="checkbox"][disabled]:checked + label::after {
   background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' viewBox='0 0 7 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z' fill='%23808080'/%3E %3C/svg%3E");
 }
 
-input[type="text"],
-select,
+input[type="text"] {
+  padding: 3px 4px;
+  border: none;
+  box-shadow: inset -1px -1px #ffffff,
+    inset 1px 1px #808080, inset -2px -2px #dfdfdf,
+    inset 2px 2px #0a0a0a;
+  background-color: #ffffff;
+  box-sizing: border-box;
+}
+
+select {
+  padding: 3px 4px;
+  border: none;
+  box-shadow: inset -1px -1px #ffffff,
+    inset 1px 1px #808080, inset -2px -2px #dfdfdf,
+    inset 2px 2px #0a0a0a;
+  background-color: #ffffff;
+  box-sizing: border-box;
+}
+
 textarea {
   padding: 3px 4px;
   border: none;
-  box-shadow: var(--border-field);
-  background-color: var(--button-highlight);
+  box-shadow: inset -1px -1px #ffffff,
+    inset 1px 1px #808080, inset -2px -2px #dfdfdf,
+    inset 2px 2px #0a0a0a;
+  background-color: #ffffff;
   box-sizing: border-box;
 }
 
@@ -344,8 +422,8 @@ textarea:focus {
 }
 
 select:focus {
-  color: var(--button-highlight);
-  background-color: var(--dialog-blue);
+  color: #ffffff;
+  background-color: #000080;
 }
 select:focus option {
   color: #000;
@@ -357,17 +435,19 @@ select:active {
 }
 
 a {
-  color: var(--link-blue);
+  color: #0000ff;
 }
 
 a:focus {
-  outline: 1px dotted var(--link-blue);
+  outline: 1px dotted #0000ff;
 }
 
 ul.treeview {
   display: block;
-  background: var(--button-highlight);
-  box-shadow: var(--border-field);
+  background: #ffffff;
+  box-shadow: inset -1px -1px #ffffff,
+    inset 1px 1px #808080, inset -2px -2px #dfdfdf,
+    inset 2px 2px #0a0a0a;
   padding: 6px;
   margin: 0;
 }
@@ -382,8 +462,8 @@ ul.treeview a {
 }
 
 ul.treeview a:focus {
-  background-color: var(--dialog-blue);
-  color: var(--button-highlight);
+  background-color: #000080;
+  color: #ffffff;
 }
 
 ul.treeview ul,
@@ -420,13 +500,15 @@ ul.treeview ul > li:last-child::after {
   top: 7px;
   bottom: 0px;
   width: 8px;
-  background: var(--button-highlight);
+  background: #ffffff;
 }
 
 pre {
   display: block;
-  background: var(--button-highlight);
-  box-shadow: var(--border-field);
+  background: #ffffff;
+  box-shadow: inset -1px -1px #ffffff,
+    inset 1px 1px #808080, inset -2px -2px #dfdfdf,
+    inset 2px 2px #0a0a0a;
   padding: 12px 8px;
   margin: 0;
   font-family: monospace;
@@ -448,7 +530,7 @@ summary:focus {
 }
 
 ::-webkit-scrollbar-corner {
-  background: var(--button-face);
+  background: #dfdfdf;
 }
 
 ::-webkit-scrollbar-track {
@@ -456,8 +538,10 @@ summary:focus {
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: var(--button-face);
-  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
+  background-color: #dfdfdf;
+  box-shadow: inset -1px -1px #0a0a0a,
+    inset 1px 1px #ffffff, inset -2px -2px #808080,
+    inset 2px 2px #dfdfdf;
 }
 
 ::-webkit-scrollbar-button:vertical:start {
diff --git a/docs/index.html b/docs/index.html
index c7e8d23..2860978 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
 <head>
-  <link rel="stylesheet" href="style.css"></style>
+  <link rel="stylesheet" href="98.css"></style>
   <link rel="stylesheet" href="docs.css"></style>
 </head>
 <body>
diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index 7ca1ef1..9b8a0bf 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
 <head>
-  <link rel="stylesheet" href="style.css"></style>
+  <link rel="stylesheet" href="98.css"></style>
   <link rel="stylesheet" href="docs.css"></style>
 </head>
 <body>
diff --git a/package-lock.json b/package-lock.json
index a2080df..84460d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,12 @@
         "color-convert": "^1.9.0"
       }
     },
+    "balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+      "dev": true
+    },
     "boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -139,6 +145,12 @@
       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
       "dev": true
     },
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "dev": true
+    },
     "has-ansi": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
@@ -212,6 +224,40 @@
         "supports-color": "^6.1.0"
       }
     },
+    "postcss-css-variables": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/postcss-css-variables/-/postcss-css-variables-0.14.0.tgz",
+      "integrity": "sha512-fEdksFdcvn/vvTddy4KoPDojZt9hQZx3oXHAIgoYJHsnk97ZTP08unM2UAqksiqdytv93415kBwP+c3/jcopyg==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "escape-string-regexp": "^1.0.3",
+        "extend": "^3.0.1",
+        "postcss": "^6.0.8"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.4.0"
+          }
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "postcss-inline": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/postcss-inline/-/postcss-inline-1.2.0.tgz",
diff --git a/package.json b/package.json
index 17871bf..aa4e3a3 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,9 @@
     "dedent": "^0.7.0",
     "ejs": "^3.0.2",
     "mkdirp": "^1.0.4",
+    "postcss-css-variables": "^0.14.0",
     "postcss-inline": "^1.2.0",
     "postcss-inline-svg": "^4.1.0"
-  }
+  },
+  "dependencies": {}
 }
diff --git a/style.css b/style.css
index c124cfa..0ed194e 100644
--- a/style.css
+++ b/style.css
@@ -225,7 +225,7 @@ input[type="radio"] + label {
 input[type="radio"] + label::before {
   content: "";
   position: absolute;
-  left: calc(-1 * var(--radio-total-width));
+  left: calc(-1 * (var(--radio-total-width-precalc)));
   display: inline-block;
   width: var(--radio-width);
   height: var(--radio-width);
@@ -273,7 +273,7 @@ input[type="checkbox"] + label {
 input[type="checkbox"] + label::before {
   content: "";
   position: absolute;
-  left: calc(-1 * var(--checkbox-total-width));
+  left: calc(-1 * (var(--checkbox-total-width-precalc)));
   display: inline-block;
   width: var(--checkbox-width);
   height: var(--checkbox-width);