diff --git a/build.js b/build.js
index fa54ead..578c2cc 100644
--- a/build.js
+++ b/build.js
@@ -44,6 +44,7 @@ function buildCSS() {
   return postcss()
     .use(require("postcss-inline-svg"))
     .use(require("postcss-css-variables")({ preserve: "computed" }))
+    .use(require("postcss-calc"))
     .process(fs.readFileSync("style.css"), {
       from: "style.css",
       to: "build/98.css",
diff --git a/build/98.css b/build/98.css
index aa0cb5a..ad89172 100644
--- a/build/98.css
+++ b/build/98.css
@@ -19,20 +19,16 @@
 
   /* Some detailed computations for radio buttons and checkboxes */
   --radio-total-width-precalc: 12px + 6px;
-  --radio-total-width: calc(12px + 6px);
-  --radio-left: calc(-1 * 12px + 6px);
+  --radio-total-width: 18px;
+  --radio-left: -6px;
   --radio-dot-width: 4px;
-  --radio-dot-top: calc(12px / 2 - 4px / 2);
-  --radio-dot-left: calc(
-    -1 * (12px + 6px) + 12px / 2 - 4px / 2
-  );
+  --radio-dot-top: 4px;
+  --radio-dot-left: -14px;
 
   --checkbox-total-width-precalc: 13px +
     6px;
-  --checkbox-total-width: calc(13px +
-    6px);
-  --checkbox-left: calc(-1 * 13px +
-    6px);
+  --checkbox-total-width: 19px;
+  --checkbox-left: -7px;
   --checkmark-width: 7px;
   --checkmark-top: 3px;
   --checkmark-left: 3px;
@@ -193,7 +189,7 @@ fieldset {
   box-shadow: inset -1px -1px #ffffff,
     inset 1px 1px #0a0a0a, inset -2px -2px #808080,
     inset 2px 2px #dfdfdf;
-  padding: calc(2 * 1px + 8px);
+  padding: 10px;
   padding-block-start: 8px;
   margin: 0;
 }
@@ -241,13 +237,13 @@ input[type="checkbox"] {
 
 input[type="radio"] + label {
   position: relative;
-  margin-left: calc(12px + 6px);
+  margin-left: 18px;
 }
 
 input[type="radio"] + label::before {
   content: "";
   position: absolute;
-  left: calc(-1 * (12px + 6px));
+  left: -18px;
   display: inline-block;
   width: 12px;
   height: 12px;
@@ -260,10 +256,8 @@ input[type="radio"]:checked + label::after {
   display: block;
   width: 4px;
   height: 4px;
-  top: calc(12px / 2 - 4px / 2);
-  left: calc(
-    -1 * (12px + 6px) + 12px / 2 - 4px / 2
-  );
+  top: 4px;
+  left: -14px;
   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");
 }
@@ -283,15 +277,13 @@ input[type="radio"][disabled]:checked + label::after {
 
 input[type="checkbox"] + label {
   position: relative;
-  margin-left: calc(13px +
-    6px);
+  margin-left: 19px;
 }
 
 input[type="checkbox"] + label::before {
   content: "";
   position: absolute;
-  left: calc(-1 * (13px +
-    6px));
+  left: -19px;
   display: inline-block;
   width: 13px;
   height: 13px;
@@ -309,10 +301,7 @@ input[type="checkbox"]:checked + label::after {
   height: 7px;
   position: absolute;
   top: 3px;
-  left: calc(
-    -1 * (13px +
-    6px) + 3px
-  );
+  left: -16px;
   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");
 }
 
diff --git a/docs/98.css b/docs/98.css
index aa0cb5a..ad89172 100644
--- a/docs/98.css
+++ b/docs/98.css
@@ -19,20 +19,16 @@
 
   /* Some detailed computations for radio buttons and checkboxes */
   --radio-total-width-precalc: 12px + 6px;
-  --radio-total-width: calc(12px + 6px);
-  --radio-left: calc(-1 * 12px + 6px);
+  --radio-total-width: 18px;
+  --radio-left: -6px;
   --radio-dot-width: 4px;
-  --radio-dot-top: calc(12px / 2 - 4px / 2);
-  --radio-dot-left: calc(
-    -1 * (12px + 6px) + 12px / 2 - 4px / 2
-  );
+  --radio-dot-top: 4px;
+  --radio-dot-left: -14px;
 
   --checkbox-total-width-precalc: 13px +
     6px;
-  --checkbox-total-width: calc(13px +
-    6px);
-  --checkbox-left: calc(-1 * 13px +
-    6px);
+  --checkbox-total-width: 19px;
+  --checkbox-left: -7px;
   --checkmark-width: 7px;
   --checkmark-top: 3px;
   --checkmark-left: 3px;
@@ -193,7 +189,7 @@ fieldset {
   box-shadow: inset -1px -1px #ffffff,
     inset 1px 1px #0a0a0a, inset -2px -2px #808080,
     inset 2px 2px #dfdfdf;
-  padding: calc(2 * 1px + 8px);
+  padding: 10px;
   padding-block-start: 8px;
   margin: 0;
 }
@@ -241,13 +237,13 @@ input[type="checkbox"] {
 
 input[type="radio"] + label {
   position: relative;
-  margin-left: calc(12px + 6px);
+  margin-left: 18px;
 }
 
 input[type="radio"] + label::before {
   content: "";
   position: absolute;
-  left: calc(-1 * (12px + 6px));
+  left: -18px;
   display: inline-block;
   width: 12px;
   height: 12px;
@@ -260,10 +256,8 @@ input[type="radio"]:checked + label::after {
   display: block;
   width: 4px;
   height: 4px;
-  top: calc(12px / 2 - 4px / 2);
-  left: calc(
-    -1 * (12px + 6px) + 12px / 2 - 4px / 2
-  );
+  top: 4px;
+  left: -14px;
   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");
 }
@@ -283,15 +277,13 @@ input[type="radio"][disabled]:checked + label::after {
 
 input[type="checkbox"] + label {
   position: relative;
-  margin-left: calc(13px +
-    6px);
+  margin-left: 19px;
 }
 
 input[type="checkbox"] + label::before {
   content: "";
   position: absolute;
-  left: calc(-1 * (13px +
-    6px));
+  left: -19px;
   display: inline-block;
   width: 13px;
   height: 13px;
@@ -309,10 +301,7 @@ input[type="checkbox"]:checked + label::after {
   height: 7px;
   position: absolute;
   top: 3px;
-  left: calc(
-    -1 * (13px +
-    6px) + 3px
-  );
+  left: -16px;
   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");
 }
 
diff --git a/package-lock.json b/package-lock.json
index a24d6af..8386d3a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -86,6 +86,12 @@
       "integrity": "sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==",
       "dev": true
     },
+    "cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true
+    },
     "dedent": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
@@ -186,6 +192,12 @@
         "readable-stream": "^3.1.1"
       }
     },
+    "indexes-of": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
+      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
+      "dev": true
+    },
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -230,6 +242,17 @@
         "supports-color": "^6.1.0"
       }
     },
+    "postcss-calc": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.2.tgz",
+      "integrity": "sha512-rofZFHUg6ZIrvRwPeFktv06GdbDYLcGqh9EwiMutZg+a0oePCCw1zHOEiji6LCpyRcjTREtPASuUqeAvYlEVvQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.27",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "postcss-css-variables": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/postcss-css-variables/-/postcss-css-variables-0.14.0.tgz",
@@ -349,6 +372,17 @@
         "postcss-value-parser": "^4.0.0"
       }
     },
+    "postcss-selector-parser": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
+      "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
+      "dev": true,
+      "requires": {
+        "cssesc": "^3.0.0",
+        "indexes-of": "^1.0.1",
+        "uniq": "^1.0.1"
+      }
+    },
     "postcss-value-parser": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.3.tgz",
@@ -405,6 +439,12 @@
         "has-flag": "^3.0.0"
       }
     },
+    "uniq": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
+      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
+      "dev": true
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index 6668690..6b62de9 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "ejs": "^3.0.2",
     "highlight.js": "^9.18.1",
     "mkdirp": "^1.0.4",
+    "postcss-calc": "^7.0.2",
     "postcss-css-variables": "^0.14.0",
     "postcss-inline": "^1.2.0",
     "postcss-inline-svg": "^4.1.0"