chore: recompile dist files

dist/dark-legacy.standalone.css

@@ -0,0 +1,374 @@
+/**
+ * Standalone dark-themed version for legacy browsers.
+ * Includes dark variables and core, compiled at build time so the final output
+ * will only include regular CSS, no variables.
+ */
+
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.4;
+
+  max-width: 800px;
+  margin: 20px auto;
+  padding: 0 10px;
+
+  color: #dbdbdb;
+  background: #202b38;
+
+  text-rendering: optimizeLegibility;
+}
+
+button {
+  transition: background-color 0.1s linear,
+              border-color 0.1s linear,
+              color 0.1s linear,
+              box-shadow 0.1s linear,
+              transform 0.1s ease;
+}
+
+input {
+  transition: background-color 0.1s linear,
+              border-color 0.1s linear,
+              color 0.1s linear,
+              box-shadow 0.1s linear,
+              transform 0.1s ease;
+}
+
+textarea {
+  transition: background-color 0.1s linear,
+              border-color 0.1s linear,
+              color 0.1s linear,
+              box-shadow 0.1s linear,
+              transform 0.1s ease;
+}
+
+h1 {
+  font-size: 2.2em;
+  margin-top: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-bottom: 12px;
+}
+
+h1 {
+  color: #ffffff;
+}
+
+h2 {
+  color: #ffffff;
+}
+
+h3 {
+  color: #ffffff;
+}
+
+h4 {
+  color: #ffffff;
+}
+
+h5 {
+  color: #ffffff;
+}
+
+h6 {
+  color: #ffffff;
+}
+
+strong {
+  color: #ffffff;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+b,
+strong,
+th {
+  font-weight: 600;
+}
+
+blockquote {
+  border-left: 4px solid #0096bfab;
+  margin: 1.5em 0em;
+  padding: 0.5em 1em;
+  font-style: italic;
+}
+
+blockquote > footer {
+  margin-top: 10px;
+  font-style: normal;
+}
+
+blockquote cite {
+  font-style: normal;
+}
+
+address {
+  font-style: normal;
+}
+
+a[href^='mailto']::before {
+  content: '📧 ';
+}
+
+a[href^='tel']::before {
+  content: '📞 ';
+}
+
+a[href^='sms']::before {
+  content: '💬 ';
+}
+
+button,
+input[type='submit'],
+input[type='button'],
+input[type='checkbox'] {
+  cursor: pointer;
+}
+
+input:not([type='checkbox']):not([type='radio']),
+select {
+  display: block;
+}
+
+input {
+  color: #ffffff;
+  background-color: #161f27;
+
+  font-family: inherit;
+  font-size: inherit;
+
+  margin-right: 6px;
+  margin-bottom: 6px;
+  padding: 10px;
+
+  border: none;
+  border-radius: 6px;
+  outline: none;
+}
+
+select {
+  color: #ffffff;
+  background-color: #161f27;
+
+  font-family: inherit;
+  font-size: inherit;
+
+  margin-right: 6px;
+  margin-bottom: 6px;
+  padding: 10px;
+
+  border: none;
+  border-radius: 6px;
+  outline: none;
+}
+
+button {
+  color: #ffffff;
+  background-color: #161f27;
+
+  font-family: inherit;
+  font-size: inherit;
+
+  margin-right: 6px;
+  margin-bottom: 6px;
+  padding: 10px;
+
+  border: none;
+  border-radius: 6px;
+  outline: none;
+}
+
+textarea {
+  color: #ffffff;
+  background-color: #161f27;
+
+  font-family: inherit;
+  font-size: inherit;
+
+  margin-right: 6px;
+  margin-bottom: 6px;
+  padding: 10px;
+
+  border: none;
+  border-radius: 6px;
+  outline: none;
+}
+
+input:not([type='checkbox']):not([type='radio']),
+select,
+button,
+textarea {
+  -webkit-appearance: none;
+}
+
+textarea {
+  margin-right: 0;
+  width: 100%;
+  box-sizing: border-box;
+  resize: vertical;
+}
+
+button,
+input[type='submit'],
+input[type='button'] {
+  padding-right: 30px;
+  padding-left: 30px;
+}
+
+button:hover {
+  background: #324759;
+}
+
+input[type='submit']:hover {
+  background: #324759;
+}
+
+input[type='button']:hover {
+  background: #324759;
+}
+
+input:focus {
+  box-shadow: 0 0 0 2px #0096bfab;
+}
+
+select:focus {
+  box-shadow: 0 0 0 2px #0096bfab;
+}
+
+button:focus {
+  box-shadow: 0 0 0 2px #0096bfab;
+}
+
+textarea:focus {
+  box-shadow: 0 0 0 2px #0096bfab;
+}
+
+input[type='checkbox']:active,
+input[type='radio']:active,
+input[type='submit']:active,
+input[type='button']:active,
+button:active {
+  transform: translateY(2px);
+}
+
+input:disabled,
+select:disabled,
+button:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+::-webkit-input-placeholder {
+  color: #a9a9a9;
+}
+
+:-ms-input-placeholder {
+  color: #a9a9a9;
+}
+
+::-ms-input-placeholder {
+  color: #a9a9a9;
+}
+
+::placeholder {
+  color: #a9a9a9;
+}
+
+a {
+  text-decoration: none;
+  color: #41adff;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+code {
+  background: #161f27;
+  color: #ffbe85;
+  padding: 2.5px 5px;
+  border-radius: 6px;
+}
+
+kbd {
+  background: #161f27;
+  color: #ffbe85;
+  padding: 2.5px 5px;
+  border-radius: 6px;
+}
+
+pre > code {
+  padding: 10px;
+  display: block;
+  overflow-x: auto;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid #dbdbdb;
+}
+
+table {
+  border-collapse: collapse;
+  margin-bottom: 10px;
+  width: 100%;
+}
+
+td,
+th {
+  padding: 6px;
+  text-align: left;
+}
+
+th {
+  border-bottom: 1px solid #dbdbdb;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #1a242f;
+}
+
+::-webkit-scrollbar {
+  height: 10px;
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: #161f27;
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #324759;
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgb(65, 92, 115);
+}
+
+::-moz-selection {
+  background-color: #161f27;
+}
+
+::selection {
+  background-color: #161f27;
+}
+
+/*# sourceMappingURL=dark-legacy.standalone.css.map */

dist/dark-legacy.standalone.min.css

@@ -0,0 +1,2 @@
+body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#dbdbdb;background:#202b38;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#fff}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid rgba(0,150,191,.67);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:#fff;background-color:#161f27;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#324759}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#a9a9a9}:-ms-input-placeholder{color:#a9a9a9}::-ms-input-placeholder{color:#a9a9a9}::placeholder{color:#a9a9a9}a{text-decoration:none;color:#41adff}a:hover{text-decoration:underline}code,kbd{background:#161f27;color:#ffbe85;padding:2.5px 5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%;height:auto}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#1a242f}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#161f27;border-radius:6px}::-webkit-scrollbar-thumb{background:#324759;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#415c73}::-moz-selection{background-color:#161f27}::selection{background-color:#161f27}
+/*# sourceMappingURL=dark-legacy.standalone.min.css.map */

dist/dark.css

@@ -8,8 +8,9 @@
  */
 
 :root {
-  --background: #202b38;
+  --background-body: #202b38;
-  --background-alt: #161f27;
+  --background: #161f27;
+  --background-alt: #1a242f;
 
   --selection: #161f27;
 
@@ -33,8 +34,9 @@
 
 @media (prefers-color-scheme: light) {
 :root {
-  --background: #ffffff;
+  --background-body: #ffffff;
-  --background-alt: #efefef;
+  --background: #efefef;
+  --background-alt: #f7f7f7;
 
   --selection: #9e9e9e;
 
@@ -66,7 +68,7 @@ body {
   padding: 0 10px;
 
   color: var(--text-main);
-  background: var(--background);
+  background: var(--background-body);
 
   text-rendering: optimizeLegibility;
 }
@@ -159,9 +161,12 @@ select {
   display: block;
 }
 
-input, select, button, textarea {
+input,
+select,
+button,
+textarea {
   color: var(--form-text);
-  background-color: var(--background-alt);
+  background-color: var(--background);
 
   font-family: inherit;
   font-size: inherit;
@@ -176,7 +181,9 @@ input, select, button, textarea {
 }
 
 input:not([type='checkbox']):not([type='radio']),
-select, button, textarea {
+select,
+button,
+textarea {
   -webkit-appearance: none;
 }
 
@@ -187,7 +194,9 @@ textarea {
   resize: vertical;
 }
 
-button, input[type='submit'], input[type='button'] {
+button,
+input[type='submit'],
+input[type='button'] {
   padding-right: 30px;
   padding-left: 30px;
 }
@@ -218,7 +227,7 @@ select:disabled,
 button:disabled,
 textarea:disabled {
   cursor: not-allowed;
-  opacity: .5;
+  opacity: 0.5;
 }
 
 ::-webkit-input-placeholder {
@@ -246,10 +255,11 @@ a:hover {
   text-decoration: underline;
 }
 
-code, kbd {
+code,
-  background: var(--background-alt);
+kbd {
+  background: var(--background);
   color: var(--code);
-  padding: 5px;
+  padding: 2.5px 5px;
   border-radius: 6px;
 }
 
@@ -275,7 +285,8 @@ table {
   width: 100%;
 }
 
-td, th {
+td,
+th {
   padding: 6px;
   text-align: left;
 }
@@ -294,7 +305,7 @@ tbody tr:nth-child(even) {
 }
 
 ::-webkit-scrollbar-track {
-  background: var(--background-alt);
+  background: var(--background);
   border-radius: 6px;
 }
 

dist/dark.min.css

@@ -1,2 +1,2 @@
-:root{--background:#202b38;--background-alt:#161f27;--selection:#161f27;--text-main:#dbdbdb;--text-bright:#fff;--links:#41adff;--focus:rgba(0,150,191,0.67);--border:#dbdbdb;--code:#ffbe85;--animation-duration:0.1s;--button-hover:#324759;--scrollbar-thumb:var(--button-hover);--scrollbar-thumb-hover:#415c73;--form-placeholder:#a9a9a9;--form-text:#fff}@media (prefers-color-scheme:light){:root{--background:#fff;--background-alt:#efefef;--selection:#9e9e9e;--text-main:#363636;--text-bright:#000;--links:#0076d1;--focus:rgba(0,150,191,0.67);--border:#dbdbdb;--code:#000;--animation-duration:0.1s;--button-hover:#ddd;--scrollbar-thumb:#2c3f4f;--scrollbar-thumb-hover:#202d38;--form-placeholder:#949494;--form-text:#000}}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:var(--text-main);background:var(--background);text-rendering:optimizeLegibility}button,input,textarea{transition:background-color var(--animation-duration) linear,border-color var(--animation-duration) linear,color var(--animation-duration) linear,box-shadow var(--animation-duration) linear,transform var(--animation-duration) ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:var(--text-bright)}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid var(--focus);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:var(--form-text);background-color:var(--background-alt);font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:var(--button-hover)}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px var(--focus)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:var(--form-placeholder)}:-ms-input-placeholder{color:var(--form-placeholder)}::-ms-input-placeholder{color:var(--form-placeholder)}::placeholder{color:var(--form-placeholder)}a{text-decoration:none;color:var(--links)}a:hover{text-decoration:underline}code,kbd{background:var(--background-alt);color:var(--code);padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%;height:auto}hr{border:none;border-top:1px solid var(--border)}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid var(--border)}tbody tr:nth-child(2n){background-color:var(--background-alt)}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:var(--background-alt);border-radius:6px}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}::-moz-selection{background-color:var(--selection)}::selection{background-color:var(--selection)}
+:root{--background-body:#202b38;--background:#161f27;--background-alt:#1a242f;--selection:#161f27;--text-main:#dbdbdb;--text-bright:#fff;--links:#41adff;--focus:rgba(0,150,191,0.67);--border:#dbdbdb;--code:#ffbe85;--animation-duration:0.1s;--button-hover:#324759;--scrollbar-thumb:var(--button-hover);--scrollbar-thumb-hover:#415c73;--form-placeholder:#a9a9a9;--form-text:#fff}@media (prefers-color-scheme:light){:root{--background-body:#fff;--background:#efefef;--background-alt:#f7f7f7;--selection:#9e9e9e;--text-main:#363636;--text-bright:#000;--links:#0076d1;--focus:rgba(0,150,191,0.67);--border:#dbdbdb;--code:#000;--animation-duration:0.1s;--button-hover:#ddd;--scrollbar-thumb:#2c3f4f;--scrollbar-thumb-hover:#202d38;--form-placeholder:#949494;--form-text:#000}}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:var(--text-main);background:var(--background-body);text-rendering:optimizeLegibility}button,input,textarea{transition:background-color var(--animation-duration) linear,border-color var(--animation-duration) linear,color var(--animation-duration) linear,box-shadow var(--animation-duration) linear,transform var(--animation-duration) ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:var(--text-bright)}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid var(--focus);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:var(--form-text);background-color:var(--background);font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:var(--button-hover)}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px var(--focus)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:var(--form-placeholder)}:-ms-input-placeholder{color:var(--form-placeholder)}::-ms-input-placeholder{color:var(--form-placeholder)}::placeholder{color:var(--form-placeholder)}a{text-decoration:none;color:var(--links)}a:hover{text-decoration:underline}code,kbd{background:var(--background);color:var(--code);padding:2.5px 5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%;height:auto}hr{border:none;border-top:1px solid var(--border)}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid var(--border)}tbody tr:nth-child(2n){background-color:var(--background-alt)}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:var(--background);border-radius:6px}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}::-moz-selection{background-color:var(--selection)}::selection{background-color:var(--selection)}
 /*# sourceMappingURL=dark.min.css.map */

dist/dark.standalone.css

@@ -1,9 +1,34 @@
 /**
  * Standalone dark-themed version.
- * Includes dark variables and core, compiled at build time so the final output
+ * Includes dark variables and core, left as CSS variables
- * will only include regular CSS, no variables.
+ * so the theming can be adjusted at runtime.
  */
 
+:root {
+  --background-body: #202b38;
+  --background: #161f27;
+  --background-alt: #1a242f;
+
+  --selection: #161f27;
+
+  --text-main: #dbdbdb;
+  --text-bright: #ffffff;
+
+  --links: #41adff;
+  --focus: #0096bfab;
+  --border: #dbdbdb;
+  --code: #ffbe85;
+
+  --animation-duration: 0.1s;
+  --button-hover: #324759;
+
+  --scrollbar-thumb: var(--button-hover);
+  --scrollbar-thumb-hover: rgb(65, 92, 115);
+
+  --form-placeholder: #a9a9a9;
+  --form-text: #ffffff;
+}
+
 body {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   line-height: 1.4;
@@ -12,34 +37,18 @@ body {
   margin: 20px auto;
   padding: 0 10px;
 
-  color: #dbdbdb;
+  color: var(--text-main);
-  background: #202b38;
+  background: var(--background-body);
 
   text-rendering: optimizeLegibility;
 }
 
-button {
+button, input, textarea {
-  transition: background-color 0.1s linear,
+  transition: background-color var(--animation-duration) linear,
-              border-color 0.1s linear,
+              border-color var(--animation-duration) linear,
-              color 0.1s linear,
+              color var(--animation-duration) linear,
-              box-shadow 0.1s linear,
+              box-shadow var(--animation-duration) linear,
-              transform 0.1s ease;
+              transform var(--animation-duration) ease;
-}
-
-input {
-  transition: background-color 0.1s linear,
-              border-color 0.1s linear,
-              color 0.1s linear,
-              box-shadow 0.1s linear,
-              transform 0.1s ease;
-}
-
-textarea {
-  transition: background-color 0.1s linear,
-              border-color 0.1s linear,
-              color 0.1s linear,
-              box-shadow 0.1s linear,
-              transform 0.1s ease;
 }
 
 h1 {
@@ -56,32 +65,14 @@ h6 {
   margin-bottom: 12px;
 }
 
-h1 {
+h1,
-  color: #ffffff;
+h2,
-}
+h3,
-
+h4,
-h2 {
+h5,
-  color: #ffffff;
+h6,
-}
-
-h3 {
-  color: #ffffff;
-}
-
-h4 {
-  color: #ffffff;
-}
-
-h5 {
-  color: #ffffff;
-}
-
-h6 {
-  color: #ffffff;
-}
-
 strong {
-  color: #ffffff;
+  color: var(--text-bright);
 }
 
 h1,
@@ -97,7 +88,7 @@ th {
 }
 
 blockquote {
-  border-left: 4px solid #0096bfab;
+  border-left: 4px solid var(--focus);
   margin: 1.5em 0em;
   padding: 0.5em 1em;
   font-style: italic;
@@ -140,57 +131,12 @@ select {
   display: block;
 }
 
-input {
+input,
-  color: #ffffff;
+select,
-  background-color: #161f27;
+button,
-
-  font-family: inherit;
-  font-size: inherit;
-
-  margin-right: 6px;
-  margin-bottom: 6px;
-  padding: 10px;
-
-  border: none;
-  border-radius: 6px;
-  outline: none;
-}
-
-select {
-  color: #ffffff;
-  background-color: #161f27;
-
-  font-family: inherit;
-  font-size: inherit;
-
-  margin-right: 6px;
-  margin-bottom: 6px;
-  padding: 10px;
-
-  border: none;
-  border-radius: 6px;
-  outline: none;
-}
-
-button {
-  color: #ffffff;
-  background-color: #161f27;
-
-  font-family: inherit;
-  font-size: inherit;
-
-  margin-right: 6px;
-  margin-bottom: 6px;
-  padding: 10px;
-
-  border: none;
-  border-radius: 6px;
-  outline: none;
-}
-
 textarea {
-  color: #ffffff;
+  color: var(--form-text);
-  background-color: #161f27;
+  background-color: var(--background);
 
   font-family: inherit;
   font-size: inherit;
@@ -205,7 +151,9 @@ textarea {
 }
 
 input:not([type='checkbox']):not([type='radio']),
-select, button, textarea {
+select,
+button,
+textarea {
   -webkit-appearance: none;
 }
 
@@ -216,37 +164,24 @@ textarea {
   resize: vertical;
 }
 
-button, input[type='submit'], input[type='button'] {
+button,
+input[type='submit'],
+input[type='button'] {
   padding-right: 30px;
   padding-left: 30px;
 }
 
-button:hover {
+button:hover,
-  background: #324759;
+input[type='submit']:hover,
-}
-
-input[type='submit']:hover {
-  background: #324759;
-}
-
 input[type='button']:hover {
-  background: #324759;
+  background: var(--button-hover);
-}
-
-input:focus {
-  box-shadow: 0 0 0 2px #0096bfab;
-}
-
-select:focus {
-  box-shadow: 0 0 0 2px #0096bfab;
-}
-
-button:focus {
-  box-shadow: 0 0 0 2px #0096bfab;
 }
 
+input:focus,
+select:focus,
+button:focus,
 textarea:focus {
-  box-shadow: 0 0 0 2px #0096bfab;
+  box-shadow: 0 0 0 2px var(--focus);
 }
 
 input[type='checkbox']:active,
@@ -262,45 +197,39 @@ select:disabled,
 button:disabled,
 textarea:disabled {
   cursor: not-allowed;
-  opacity: .5;
+  opacity: 0.5;
 }
 
 ::-webkit-input-placeholder {
-  color: #a9a9a9;
+  color: var(--form-placeholder);
 }
 
 :-ms-input-placeholder {
-  color: #a9a9a9;
+  color: var(--form-placeholder);
 }
 
 ::-ms-input-placeholder {
-  color: #a9a9a9;
+  color: var(--form-placeholder);
 }
 
 ::placeholder {
-  color: #a9a9a9;
+  color: var(--form-placeholder);
 }
 
 a {
   text-decoration: none;
-  color: #41adff;
+  color: var(--links);
 }
 
 a:hover {
   text-decoration: underline;
 }
 
-code {
+code,
-  background: #161f27;
-  color: #ffbe85;
-  padding: 5px;
-  border-radius: 6px;
-}
-
 kbd {
-  background: #161f27;
+  background: var(--background);
-  color: #ffbe85;
+  color: var(--code);
-  padding: 5px;
+  padding: 2.5px 5px;
   border-radius: 6px;
 }
 
@@ -317,7 +246,7 @@ img {
 
 hr {
   border: none;
-  border-top: 1px solid #dbdbdb;
+  border-top: 1px solid var(--border);
 }
 
 table {
@@ -326,17 +255,18 @@ table {
   width: 100%;
 }
 
-td, th {
+td,
+th {
   padding: 6px;
   text-align: left;
 }
 
 th {
-  border-bottom: 1px solid #dbdbdb;
+  border-bottom: 1px solid var(--border);
 }
 
 tbody tr:nth-child(even) {
-  background-color: #161f27;
+  background-color: var(--background-alt);
 }
 
 ::-webkit-scrollbar {
@@ -345,25 +275,25 @@ tbody tr:nth-child(even) {
 }
 
 ::-webkit-scrollbar-track {
-  background: #161f27;
+  background: var(--background);
   border-radius: 6px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #324759;
+  background: var(--scrollbar-thumb);
   border-radius: 6px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgb(65, 92, 115);
+  background: var(--scrollbar-thumb-hover);
 }
 
 ::-moz-selection {
-  background-color: #161f27;
+  background-color: var(--selection);
 }
 
 ::selection {
-  background-color: #161f27;
+  background-color: var(--selection);
 }
 
 /*# sourceMappingURL=dark.standalone.css.map */

dist/dark.standalone.min.css

@@ -1,2 +1,2 @@
-body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#dbdbdb;background:#202b38;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#fff}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid rgba(0,150,191,.67);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:#fff;background-color:#161f27;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#324759}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#a9a9a9}:-ms-input-placeholder{color:#a9a9a9}::-ms-input-placeholder{color:#a9a9a9}::placeholder{color:#a9a9a9}a{text-decoration:none;color:#41adff}a:hover{text-decoration:underline}code,kbd{background:#161f27;color:#ffbe85;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%;height:auto}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#161f27}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#161f27;border-radius:6px}::-webkit-scrollbar-thumb{background:#324759;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#415c73}::-moz-selection{background-color:#161f27}::selection{background-color:#161f27}
+:root{--background-body:#202b38;--background:#161f27;--background-alt:#1a242f;--selection:#161f27;--text-main:#dbdbdb;--text-bright:#fff;--links:#41adff;--focus:rgba(0,150,191,0.67);--border:#dbdbdb;--code:#ffbe85;--animation-duration:0.1s;--button-hover:#324759;--scrollbar-thumb:var(--button-hover);--scrollbar-thumb-hover:#415c73;--form-placeholder:#a9a9a9;--form-text:#fff}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:var(--text-main);background:var(--background-body);text-rendering:optimizeLegibility}button,input,textarea{transition:background-color var(--animation-duration) linear,border-color var(--animation-duration) linear,color var(--animation-duration) linear,box-shadow var(--animation-duration) linear,transform var(--animation-duration) ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:var(--text-bright)}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid var(--focus);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:var(--form-text);background-color:var(--background);font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:var(--button-hover)}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px var(--focus)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:var(--form-placeholder)}:-ms-input-placeholder{color:var(--form-placeholder)}::-ms-input-placeholder{color:var(--form-placeholder)}::placeholder{color:var(--form-placeholder)}a{text-decoration:none;color:var(--links)}a:hover{text-decoration:underline}code,kbd{background:var(--background);color:var(--code);padding:2.5px 5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%;height:auto}hr{border:none;border-top:1px solid var(--border)}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid var(--border)}tbody tr:nth-child(2n){background-color:var(--background-alt)}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:var(--background);border-radius:6px}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}::-moz-selection{background-color:var(--selection)}::selection{background-color:var(--selection)}
 /*# sourceMappingURL=dark.standalone.min.css.map */

dist/light-legacy.standalone.css

@@ -0,0 +1,374 @@
+/**
+ * Standalone light-themed version for legacy browsers.
+ * Includes light variables and core, compiled at build time so the final output
+ * will only include regular CSS, no variables.
+ */
+
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.4;
+
+  max-width: 800px;
+  margin: 20px auto;
+  padding: 0 10px;
+
+  color: #363636;
+  background: #ffffff;
+
+  text-rendering: optimizeLegibility;
+}
+
+button {
+  transition: background-color 0.1s linear,
+              border-color 0.1s linear,
+              color 0.1s linear,
+              box-shadow 0.1s linear,
+              transform 0.1s ease;
+}
+
+input {
+  transition: background-color 0.1s linear,
+              border-color 0.1s linear,
+              color 0.1s linear,
+              box-shadow 0.1s linear,
+              transform 0.1s ease;
+}
+
+textarea {
+  transition: background-color 0.1s linear,
+              border-color 0.1s linear,
+              color 0.1s linear,
+              box-shadow 0.1s linear,
+              transform 0.1s ease;
+}
+
+h1 {
+  font-size: 2.2em;
+  margin-top: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-bottom: 12px;
+}
+
+h1 {
+  color: #000000;
+}
+
+h2 {
+  color: #000000;
+}
+
+h3 {
+  color: #000000;
+}
+
+h4 {
+  color: #000000;
+}
+
+h5 {
+  color: #000000;
+}
+
+h6 {
+  color: #000000;
+}
+
+strong {
+  color: #000000;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+b,
+strong,
+th {
+  font-weight: 600;
+}
+
+blockquote {
+  border-left: 4px solid #0096bfab;
+  margin: 1.5em 0em;
+  padding: 0.5em 1em;
+  font-style: italic;
+}
+
+blockquote > footer {
+  margin-top: 10px;
+  font-style: normal;
+}
+
+blockquote cite {
+  font-style: normal;
+}
+
+address {
+  font-style: normal;
+}
+
+a[href^='mailto']::before {
+  content: '📧 ';
+}
+
+a[href^='tel']::before {
+  content: '📞 ';
+}
+
+a[href^='sms']::before {
+  content: '💬 ';
+}
+
+button,
+input[type='submit'],
+input[type='button'],
+input[type='checkbox'] {
+  cursor: pointer;
+}
+
+input:not([type='checkbox']):not([type='radio']),
+select {
+  display: block;
+}
+
+input {
+  color: #000000;
+  background-color: #efefef;
+
+  font-family: inherit;
+  font-size: inherit;
+
+  margin-right: 6px;
+  margin-bottom: 6px;
+  padding: 10px;
+
+  border: none;
+  border-radius: 6px;
+  outline: none;
+}
+
+select {
+  color: #000000;
+  background-color: #efefef;
+
+  font-family: inherit;
+  font-size: inherit;
+
+  margin-right: 6px;
+  margin-bottom: 6px;
+  padding: 10px;
+
+  border: none;
+  border-radius: 6px;
+  outline: none;
+}
+
+button {
+  color: #000000;
+  background-color: #efefef;
+
+  font-family: inherit;
+  font-size: inherit;
+
+  margin-right: 6px;
+  margin-bottom: 6px;
+  padding: 10px;
+
+  border: none;
+  border-radius: 6px;
+  outline: none;
+}
+
+textarea {
+  color: #000000;
+  background-color: #efefef;
+
+  font-family: inherit;
+  font-size: inherit;
+
+  margin-right: 6px;
+  margin-bottom: 6px;
+  padding: 10px;
+
+  border: none;
+  border-radius: 6px;
+  outline: none;
+}
+
+input:not([type='checkbox']):not([type='radio']),
+select,
+button,
+textarea {
+  -webkit-appearance: none;
+}
+
+textarea {
+  margin-right: 0;
+  width: 100%;
+  box-sizing: border-box;
+  resize: vertical;
+}
+
+button,
+input[type='submit'],
+input[type='button'] {
+  padding-right: 30px;
+  padding-left: 30px;
+}
+
+button:hover {
+  background: #dddddd;
+}
+
+input[type='submit']:hover {
+  background: #dddddd;
+}
+
+input[type='button']:hover {
+  background: #dddddd;
+}
+
+input:focus {
+  box-shadow: 0 0 0 2px #0096bfab;
+}
+
+select:focus {
+  box-shadow: 0 0 0 2px #0096bfab;
+}
+
+button:focus {
+  box-shadow: 0 0 0 2px #0096bfab;
+}
+
+textarea:focus {
+  box-shadow: 0 0 0 2px #0096bfab;
+}
+
+input[type='checkbox']:active,
+input[type='radio']:active,
+input[type='submit']:active,
+input[type='button']:active,
+button:active {
+  transform: translateY(2px);
+}
+
+input:disabled,
+select:disabled,
+button:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+::-webkit-input-placeholder {
+  color: #949494;
+}
+
+:-ms-input-placeholder {
+  color: #949494;
+}
+
+::-ms-input-placeholder {
+  color: #949494;
+}
+
+::placeholder {
+  color: #949494;
+}
+
+a {
+  text-decoration: none;
+  color: #0076d1;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+code {
+  background: #efefef;
+  color: #000000;
+  padding: 2.5px 5px;
+  border-radius: 6px;
+}
+
+kbd {
+  background: #efefef;
+  color: #000000;
+  padding: 2.5px 5px;
+  border-radius: 6px;
+}
+
+pre > code {
+  padding: 10px;
+  display: block;
+  overflow-x: auto;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid #dbdbdb;
+}
+
+table {
+  border-collapse: collapse;
+  margin-bottom: 10px;
+  width: 100%;
+}
+
+td,
+th {
+  padding: 6px;
+  text-align: left;
+}
+
+th {
+  border-bottom: 1px solid #dbdbdb;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #f7f7f7;
+}
+
+::-webkit-scrollbar {
+  height: 10px;
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: #efefef;
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgb(213, 213, 213);
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgb(196, 196, 196);
+}
+
+::-moz-selection {
+  background-color: #9e9e9e;
+}
+
+::selection {
+  background-color: #9e9e9e;
+}
+
+/*# sourceMappingURL=light-legacy.standalone.css.map */

dist/light-legacy.standalone.min.css

@@ -0,0 +1,2 @@
+body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#363636;background:#fff;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#000}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid rgba(0,150,191,.67);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:#000;background-color:#efefef;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#ddd}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#949494}:-ms-input-placeholder{color:#949494}::-ms-input-placeholder{color:#949494}::placeholder{color:#949494}a{text-decoration:none;color:#0076d1}a:hover{text-decoration:underline}code,kbd{background:#efefef;color:#000;padding:2.5px 5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%;height:auto}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#f7f7f7}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#efefef;border-radius:6px}::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#c4c4c4}::-moz-selection{background-color:#9e9e9e}::selection{background-color:#9e9e9e}
+/*# sourceMappingURL=light-legacy.standalone.min.css.map */

dist/light.css

@@ -8,8 +8,9 @@
  */
 
 :root {
-  --background: #ffffff;
+  --background-body: #ffffff;
-  --background-alt: #efefef;
+  --background: #efefef;
+  --background-alt: #f7f7f7;
 
   --selection: #9e9e9e;
 
@@ -33,8 +34,9 @@
 
 @media (prefers-color-scheme: dark) {
 :root {
-  --background: #202b38;
+  --background-body: #202b38;
-  --background-alt: #161f27;
+  --background: #161f27;
+  --background-alt: #1a242f;
 
   --selection: #161f27;
 
@@ -66,7 +68,7 @@ body {
   padding: 0 10px;
 
   color: var(--text-main);
-  background: var(--background);
+  background: var(--background-body);
 
   text-rendering: optimizeLegibility;
 }
@@ -159,9 +161,12 @@ select {
   display: block;
 }
 
-input, select, button, textarea {
+input,
+select,
+button,
+textarea {
   color: var(--form-text);
-  background-color: var(--background-alt);
+  background-color: var(--background);
 
   font-family: inherit;
   font-size: inherit;
@@ -176,7 +181,9 @@ input, select, button, textarea {
 }
 
 input:not([type='checkbox']):not([type='radio']),
-select, button, textarea {
+select,
+button,
+textarea {
   -webkit-appearance: none;
 }
 
@@ -187,7 +194,9 @@ textarea {
   resize: vertical;
 }
 
-button, input[type='submit'], input[type='button'] {
+button,
+input[type='submit'],
+input[type='button'] {
   padding-right: 30px;
   padding-left: 30px;
 }
@@ -218,7 +227,7 @@ select:disabled,
 button:disabled,
 textarea:disabled {
   cursor: not-allowed;
-  opacity: .5;
+  opacity: 0.5;
 }
 
 ::-webkit-input-placeholder {
@@ -246,10 +255,11 @@ a:hover {
   text-decoration: underline;
 }
 
-code, kbd {
+code,
-  background: var(--background-alt);
+kbd {
+  background: var(--background);
   color: var(--code);
-  padding: 5px;
+  padding: 2.5px 5px;
   border-radius: 6px;
 }
 
@@ -275,7 +285,8 @@ table {
   width: 100%;
 }
 
-td, th {
+td,
+th {
   padding: 6px;
   text-align: left;
 }
@@ -294,7 +305,7 @@ tbody tr:nth-child(even) {
 }
 
 ::-webkit-scrollbar-track {
-  background: var(--background-alt);
+  background: var(--background);
   border-radius: 6px;
 }
 

dist/light.min.css

@@ -1,2 +1,2 @@
-:root{--background:#fff;--background-alt:#efefef;--selection:#9e9e9e;--text-main:#363636;--text-bright:#000;--links:#0076d1;--focus:rgba(0,150,191,0.67);--border:#dbdbdb;--code:#000;--animation-duration:0.1s;--button-hover:#ddd;--scrollbar-thumb:#d5d5d5;--scrollbar-thumb-hover:#c4c4c4;--form-placeholder:#949494;--form-text:#000}@media (prefers-color-scheme:dark){:root{--background:#202b38;--background-alt:#161f27;--selection:#161f27;--text-main:#dbdbdb;--text-bright:#fff;--links:#41adff;--focus:rgba(0,150,191,0.67);--border:#dbdbdb;--code:#ffbe85;--animation-duration:0.1s;--button-hover:#324759;--scrollbar-thumb:var(--button-hover);--scrollbar-thumb-hover:#141414;--form-placeholder:#a9a9a9;--form-text:#fff}}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:var(--text-main);background:var(--background);text-rendering:optimizeLegibility}button,input,textarea{transition:background-color var(--animation-duration) linear,border-color var(--animation-duration) linear,color var(--animation-duration) linear,box-shadow var(--animation-duration) linear,transform var(--animation-duration) ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:var(--text-bright)}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid var(--focus);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:var(--form-text);background-color:var(--background-alt);font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:var(--button-hover)}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px var(--focus)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:var(--form-placeholder)}:-ms-input-placeholder{color:var(--form-placeholder)}::-ms-input-placeholder{color:var(--form-placeholder)}::placeholder{color:var(--form-placeholder)}a{text-decoration:none;color:var(--links)}a:hover{text-decoration:underline}code,kbd{background:var(--background-alt);color:var(--code);padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%;height:auto}hr{border:none;border-top:1px solid var(--border)}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid var(--border)}tbody tr:nth-child(2n){background-color:var(--background-alt)}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:var(--background-alt);border-radius:6px}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}::-moz-selection{background-color:var(--selection)}::selection{background-color:var(--selection)}
+:root{--background-body:#fff;--background:#efefef;--background-alt:#f7f7f7;--selection:#9e9e9e;--text-main:#363636;--text-bright:#000;--links:#0076d1;--focus:rgba(0,150,191,0.67);--border:#dbdbdb;--code:#000;--animation-duration:0.1s;--button-hover:#ddd;--scrollbar-thumb:#d5d5d5;--scrollbar-thumb-hover:#c4c4c4;--form-placeholder:#949494;--form-text:#000}@media (prefers-color-scheme:dark){:root{--background-body:#202b38;--background:#161f27;--background-alt:#1a242f;--selection:#161f27;--text-main:#dbdbdb;--text-bright:#fff;--links:#41adff;--focus:rgba(0,150,191,0.67);--border:#dbdbdb;--code:#ffbe85;--animation-duration:0.1s;--button-hover:#324759;--scrollbar-thumb:var(--button-hover);--scrollbar-thumb-hover:#141414;--form-placeholder:#a9a9a9;--form-text:#fff}}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:var(--text-main);background:var(--background-body);text-rendering:optimizeLegibility}button,input,textarea{transition:background-color var(--animation-duration) linear,border-color var(--animation-duration) linear,color var(--animation-duration) linear,box-shadow var(--animation-duration) linear,transform var(--animation-duration) ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:var(--text-bright)}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid var(--focus);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:var(--form-text);background-color:var(--background);font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:var(--button-hover)}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px var(--focus)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:var(--form-placeholder)}:-ms-input-placeholder{color:var(--form-placeholder)}::-ms-input-placeholder{color:var(--form-placeholder)}::placeholder{color:var(--form-placeholder)}a{text-decoration:none;color:var(--links)}a:hover{text-decoration:underline}code,kbd{background:var(--background);color:var(--code);padding:2.5px 5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%;height:auto}hr{border:none;border-top:1px solid var(--border)}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid var(--border)}tbody tr:nth-child(2n){background-color:var(--background-alt)}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:var(--background);border-radius:6px}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}::-moz-selection{background-color:var(--selection)}::selection{background-color:var(--selection)}
 /*# sourceMappingURL=light.min.css.map */

dist/light.standalone.css

@@ -1,9 +1,34 @@
 /**
  * Standalone light-themed version.
- * Includes light variables and core, compiled at build time so the final output
+ * Includes light variables and core, left as CSS variables
- * will only include regular CSS, no variables.
+ * so the theming can be adjusted at runtime.
  */
 
+:root {
+  --background-body: #ffffff;
+  --background: #efefef;
+  --background-alt: #f7f7f7;
+
+  --selection: #9e9e9e;
+
+  --text-main: #363636;
+  --text-bright: #000000;
+
+  --links: #0076d1;
+  --focus: #0096bfab;
+  --border: #dbdbdb;
+  --code: #000000;
+
+  --animation-duration: 0.1s;
+  --button-hover: #dddddd;
+
+  --scrollbar-thumb: rgb(213, 213, 213);
+  --scrollbar-thumb-hover: rgb(196, 196, 196);
+
+  --form-placeholder: #949494;
+  --form-text: #000000;
+}
+
 body {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   line-height: 1.4;
@@ -12,34 +37,18 @@ body {
   margin: 20px auto;
   padding: 0 10px;
 
-  color: #363636;
+  color: var(--text-main);
-  background: #ffffff;
+  background: var(--background-body);
 
   text-rendering: optimizeLegibility;
 }
 
-button {
+button, input, textarea {
-  transition: background-color 0.1s linear,
+  transition: background-color var(--animation-duration) linear,
-              border-color 0.1s linear,
+              border-color var(--animation-duration) linear,
-              color 0.1s linear,
+              color var(--animation-duration) linear,
-              box-shadow 0.1s linear,
+              box-shadow var(--animation-duration) linear,
-              transform 0.1s ease;
+              transform var(--animation-duration) ease;
-}
-
-input {
-  transition: background-color 0.1s linear,
-              border-color 0.1s linear,
-              color 0.1s linear,
-              box-shadow 0.1s linear,
-              transform 0.1s ease;
-}
-
-textarea {
-  transition: background-color 0.1s linear,
-              border-color 0.1s linear,
-              color 0.1s linear,
-              box-shadow 0.1s linear,
-              transform 0.1s ease;
 }
 
 h1 {
@@ -56,32 +65,14 @@ h6 {
   margin-bottom: 12px;
 }
 
-h1 {
+h1,
-  color: #000000;
+h2,
-}
+h3,
-
+h4,
-h2 {
+h5,
-  color: #000000;
+h6,
-}
-
-h3 {
-  color: #000000;
-}
-
-h4 {
-  color: #000000;
-}
-
-h5 {
-  color: #000000;
-}
-
-h6 {
-  color: #000000;
-}
-
 strong {
-  color: #000000;
+  color: var(--text-bright);
 }
 
 h1,
@@ -97,7 +88,7 @@ th {
 }
 
 blockquote {
-  border-left: 4px solid #0096bfab;
+  border-left: 4px solid var(--focus);
   margin: 1.5em 0em;
   padding: 0.5em 1em;
   font-style: italic;
@@ -140,57 +131,12 @@ select {
   display: block;
 }
 
-input {
+input,
-  color: #000000;
+select,
-  background-color: #efefef;
+button,
-
-  font-family: inherit;
-  font-size: inherit;
-
-  margin-right: 6px;
-  margin-bottom: 6px;
-  padding: 10px;
-
-  border: none;
-  border-radius: 6px;
-  outline: none;
-}
-
-select {
-  color: #000000;
-  background-color: #efefef;
-
-  font-family: inherit;
-  font-size: inherit;
-
-  margin-right: 6px;
-  margin-bottom: 6px;
-  padding: 10px;
-
-  border: none;
-  border-radius: 6px;
-  outline: none;
-}
-
-button {
-  color: #000000;
-  background-color: #efefef;
-
-  font-family: inherit;
-  font-size: inherit;
-
-  margin-right: 6px;
-  margin-bottom: 6px;
-  padding: 10px;
-
-  border: none;
-  border-radius: 6px;
-  outline: none;
-}
-
 textarea {
-  color: #000000;
+  color: var(--form-text);
-  background-color: #efefef;
+  background-color: var(--background);
 
   font-family: inherit;
   font-size: inherit;
@@ -205,7 +151,9 @@ textarea {
 }
 
 input:not([type='checkbox']):not([type='radio']),
-select, button, textarea {
+select,
+button,
+textarea {
   -webkit-appearance: none;
 }
 
@@ -216,37 +164,24 @@ textarea {
   resize: vertical;
 }
 
-button, input[type='submit'], input[type='button'] {
+button,
+input[type='submit'],
+input[type='button'] {
   padding-right: 30px;
   padding-left: 30px;
 }
 
-button:hover {
+button:hover,
-  background: #dddddd;
+input[type='submit']:hover,
-}
-
-input[type='submit']:hover {
-  background: #dddddd;
-}
-
 input[type='button']:hover {
-  background: #dddddd;
+  background: var(--button-hover);
-}
-
-input:focus {
-  box-shadow: 0 0 0 2px #0096bfab;
-}
-
-select:focus {
-  box-shadow: 0 0 0 2px #0096bfab;
-}
-
-button:focus {
-  box-shadow: 0 0 0 2px #0096bfab;
 }
 
+input:focus,
+select:focus,
+button:focus,
 textarea:focus {
-  box-shadow: 0 0 0 2px #0096bfab;
+  box-shadow: 0 0 0 2px var(--focus);
 }
 
 input[type='checkbox']:active,
@@ -262,45 +197,39 @@ select:disabled,
 button:disabled,
 textarea:disabled {
   cursor: not-allowed;
-  opacity: .5;
+  opacity: 0.5;
 }
 
 ::-webkit-input-placeholder {
-  color: #949494;
+  color: var(--form-placeholder);
 }
 
 :-ms-input-placeholder {
-  color: #949494;
+  color: var(--form-placeholder);
 }
 
 ::-ms-input-placeholder {
-  color: #949494;
+  color: var(--form-placeholder);
 }
 
 ::placeholder {
-  color: #949494;
+  color: var(--form-placeholder);
 }
 
 a {
   text-decoration: none;
-  color: #0076d1;
+  color: var(--links);
 }
 
 a:hover {
   text-decoration: underline;
 }
 
-code {
+code,
-  background: #efefef;
-  color: #000000;
-  padding: 5px;
-  border-radius: 6px;
-}
-
 kbd {
-  background: #efefef;
+  background: var(--background);
-  color: #000000;
+  color: var(--code);
-  padding: 5px;
+  padding: 2.5px 5px;
   border-radius: 6px;
 }
 
@@ -317,7 +246,7 @@ img {
 
 hr {
   border: none;
-  border-top: 1px solid #dbdbdb;
+  border-top: 1px solid var(--border);
 }
 
 table {
@@ -326,17 +255,18 @@ table {
   width: 100%;
 }
 
-td, th {
+td,
+th {
   padding: 6px;
   text-align: left;
 }
 
 th {
-  border-bottom: 1px solid #dbdbdb;
+  border-bottom: 1px solid var(--border);
 }
 
 tbody tr:nth-child(even) {
-  background-color: #efefef;
+  background-color: var(--background-alt);
 }
 
 ::-webkit-scrollbar {
@@ -345,25 +275,25 @@ tbody tr:nth-child(even) {
 }
 
 ::-webkit-scrollbar-track {
-  background: #efefef;
+  background: var(--background);
   border-radius: 6px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgb(213, 213, 213);
+  background: var(--scrollbar-thumb);
   border-radius: 6px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgb(196, 196, 196);
+  background: var(--scrollbar-thumb-hover);
 }
 
 ::-moz-selection {
-  background-color: #9e9e9e;
+  background-color: var(--selection);
 }
 
 ::selection {
-  background-color: #9e9e9e;
+  background-color: var(--selection);
 }
 
 /*# sourceMappingURL=light.standalone.css.map */

dist/light.standalone.min.css

@@ -1,2 +1,2 @@
-body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#363636;background:#fff;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#000}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid rgba(0,150,191,.67);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:#000;background-color:#efefef;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#ddd}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#949494}:-ms-input-placeholder{color:#949494}::-ms-input-placeholder{color:#949494}::placeholder{color:#949494}a{text-decoration:none;color:#0076d1}a:hover{text-decoration:underline}code,kbd{background:#efefef;color:#000;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%;height:auto}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#efefef}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#efefef;border-radius:6px}::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#c4c4c4}::-moz-selection{background-color:#9e9e9e}::selection{background-color:#9e9e9e}
+:root{--background-body:#fff;--background:#efefef;--background-alt:#f7f7f7;--selection:#9e9e9e;--text-main:#363636;--text-bright:#000;--links:#0076d1;--focus:rgba(0,150,191,0.67);--border:#dbdbdb;--code:#000;--animation-duration:0.1s;--button-hover:#ddd;--scrollbar-thumb:#d5d5d5;--scrollbar-thumb-hover:#c4c4c4;--form-placeholder:#949494;--form-text:#000}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:var(--text-main);background:var(--background-body);text-rendering:optimizeLegibility}button,input,textarea{transition:background-color var(--animation-duration) linear,border-color var(--animation-duration) linear,color var(--animation-duration) linear,box-shadow var(--animation-duration) linear,transform var(--animation-duration) ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:var(--text-bright)}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid var(--focus);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:var(--form-text);background-color:var(--background);font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:var(--button-hover)}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px var(--focus)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:var(--form-placeholder)}:-ms-input-placeholder{color:var(--form-placeholder)}::-ms-input-placeholder{color:var(--form-placeholder)}::placeholder{color:var(--form-placeholder)}a{text-decoration:none;color:var(--links)}a:hover{text-decoration:underline}code,kbd{background:var(--background);color:var(--code);padding:2.5px 5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%;height:auto}hr{border:none;border-top:1px solid var(--border)}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid var(--border)}tbody tr:nth-child(2n){background-color:var(--background-alt)}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:var(--background);border-radius:6px}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}::-moz-selection{background-color:var(--selection)}::selection{background-color:var(--selection)}
 /*# sourceMappingURL=light.standalone.min.css.map */