From 2f0ff0f30c2ad68ce93f191e1649e230d35655a1 Mon Sep 17 00:00:00 2001
From: LimePotato <nelle@limepot.xyz>
Date: Thu, 21 Mar 2024 18:25:56 -0600
Subject: [PATCH] 202403211825

---
 dist/dl/microbin.css   | 2685 ++++++++++++++++++++--------------------
 public/dl/microbin.css |    6 +-
 2 files changed, 1341 insertions(+), 1350 deletions(-)

diff --git a/dist/dl/microbin.css b/dist/dl/microbin.css
index cb05fe3..0c1d91f 100644
--- a/dist/dl/microbin.css
+++ b/dist/dl/microbin.css
@@ -1,1401 +1,1392 @@
-
 :root {
-    --background-body: #1e1e2e;
-    --background: #181825;
-    --background-alt: #11111b;
-    --selection: #9e9e9e;
-    --text-main: #cdd6f4;
-    --text-bright: #a6adc8;
-    --text-muted: #bac2de;
-    --links: #f9e2af;
-    --focus: #f9e2af;
-    --border: #dbdbdb;
-    --code: #000;
+  --background-body: #fff;
+  --background: #efefef;
+  --background-alt: #f7f7f7;
+  --selection: #9e9e9e;
+  --text-main: #363636;
+  --text-bright: #000;
+  --text-muted: #70777f;
+  --links: #2975D2;
+  --focus: #2975D2;
+  --border: #dbdbdb;
+  --code: #000;
+  --animation-duration: 0.1s;
+  --button-base: #d0cfcf;
+  --button-hover: #9b9b9b;
+  --scrollbar-thumb: #aaa;
+  --scrollbar-thumb-hover: var(--button-hover);
+  --form-placeholder: #949494;
+  --form-text: #1d1d1d;
+  --variable: #39a33c;
+  --highlight: #ff0;
+  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23161f27'%3E%3Cpath d='M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E")
+}
+
+@media (prefers-color-scheme:dark) {
+  :root {
+    --background-body: #141b23;
+    --background: #222f3a;
+    --background-alt: #1a242f;
+    --selection: #1c76c5;
+    --text-main: #dbdbdb;
+    --text-bright: #fff;
+    --text-muted: #a9b1ba;
+    --links: #2975D2;
+    --focus: #2975D2;
+    --border: #526980;
+    --code: #ffbe85;
     --animation-duration: 0.1s;
-    --button-base: #d0cfcf;
-    --button-hover: #9b9b9b;
-    --scrollbar-thumb: #aaa;
-    --scrollbar-thumb-hover: var(--button-hover);
-    --form-placeholder: #949494;
-    --form-text: #f9e2af;
-    --variable: #39a33c;
-    --highlight: #ff0;
-    --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23161f27'%3E%3Cpath d='M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E")
+    --button-base: #0c151c;
+    --button-hover: #040a0f;
+    --scrollbar-thumb: var(--button-hover);
+    --scrollbar-thumb-hover: #000;
+    --form-placeholder: #a9a9a9;
+    --form-text: #fff;
+    --variable: #d941e2;
+    --highlight: #efdb43;
+    --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23efefef'%3E%3Cpath d='M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E")
   }
-  
-  @media (prefers-color-scheme:dark) {
-    :root {
-      --background-body: #141b23;
-      --background: #222f3a;
-      --background-alt: #1a242f;
-      --selection: #f9e2af;
-      --text-main: #dbdbdb;
-      --text-bright: #1e1e2e;
-      --text-muted: #a9b1ba;
-      --links: #f9e2af;
-      --focus: #f9e2af;
-      --border: #526980;
-      --code: #ffbe85;
-      --animation-duration: 0.1s;
-      --button-base: #0c151c;
-      --button-hover: #040a0f;
-      --scrollbar-thumb: var(--button-hover);
-      --scrollbar-thumb-hover: #000;
-      --form-placeholder: #a9a9a9;
-      --form-text: #1e1e2e;
-      --variable: #d941e2;
-      --highlight: #efdb43;
-      --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23efefef'%3E%3Cpath d='M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E")
-    }
-  }
-  
+}
+
+html {
+  scrollbar-color: #aaa #fff;
+  scrollbar-color: var(--scrollbar-thumb) var(--background-body);
+  scrollbar-width: thin
+}
+
+@media (prefers-color-scheme:dark) {
   html {
-    scrollbar-color: #aaa #1e1e2e;
-    scrollbar-color: var(--scrollbar-thumb) var(--background-body);
-    scrollbar-width: thin
+    scrollbar-color: #040a0f #202b38;
+    scrollbar-color: var(--scrollbar-thumb) var(--background-body)
   }
-  
-  @media (prefers-color-scheme:dark) {
-    html {
-      scrollbar-color: #040a0f #202b38;
-      scrollbar-color: var(--scrollbar-thumb) var(--background-body)
-    }
-  }
-  
+}
+
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Segoe UI Emoji, Apple Color Emoji, Noto Color Emoji, sans-serif;
+  line-height: 1.4;
+  max-width: 800px;
+  margin: 20px auto;
+  padding: 0 10px;
+  word-wrap: break-word;
+  color: #363636;
+  color: var(--text-main);
+  background: #fff;
+  background: var(--background-body);
+  text-rendering: optimizeLegibility
+}
+
+@media (prefers-color-scheme:dark) {
   body {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Segoe UI Emoji, Apple Color Emoji, Noto Color Emoji, sans-serif;
-    line-height: 1.4;
-    max-width: 800px;
-    margin: 20px auto;
-    padding: 0 10px;
-    word-wrap: break-word;
-    color: #363636;
-    color: var(--text-main);
-    background: #1e1e2e;
+    background: #202b38;
     background: var(--background-body);
-    text-rendering: optimizeLegibility
+    color: #dbdbdb;
+    color: var(--text-main)
   }
-  
-  @media (prefers-color-scheme:dark) {
-    body {
-      background: #202b38;
-      background: var(--background-body);
-      color: #dbdbdb;
-      color: var(--text-main)
-    }
-  }
-  
+}
+
+button {
+  transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
+  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
+}
+
+@media (prefers-color-scheme:dark) {
   button {
     transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
     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
   }
-  
-  @media (prefers-color-scheme:dark) {
-    button {
-      transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
-      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
-    }
-  }
-  
+}
+
+input {
+  transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
+  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
+}
+
+@media (prefers-color-scheme:dark) {
   input {
     transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
     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
   }
-
-  input::file-selector-button {
-    width: 140px;
-    float: right;
-    background-color:#fab387;
-    color: white;
 }
-  
-  @media (prefers-color-scheme:dark) {
-    input {
-      transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
-      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
-    }
-  }
-  
+
+textarea {
+  transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
+  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
+}
+
+@media (prefers-color-scheme:dark) {
   textarea {
     transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
     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
   }
-  
-  @media (prefers-color-scheme:dark) {
-    textarea {
-      transition: background-color .1s linear, border-color .1s linear, color .1s linear, box-shadow .1s linear, transform .1s ease;
-      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;
+  margin-top: 24px
+}
+
+h1 {
+  color: #000;
+  color: var(--text-bright)
+}
+
+@media (prefers-color-scheme:dark) {
   h1 {
-    font-size: 2.2em;
-    margin-top: 0
-  }
-  
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-bottom: 12px;
-    margin-top: 24px
-  }
-  
-  h1 {
-    color: #000;
+    color: #fff;
     color: var(--text-bright)
   }
-  
-  @media (prefers-color-scheme:dark) {
-    h1 {
-      color: #1e1e2e;
-      color: var(--text-bright)
-    }
-  }
-  
+}
+
+h2 {
+  color: #000;
+  color: var(--text-bright)
+}
+
+@media (prefers-color-scheme:dark) {
   h2 {
-    color: #000;
+    color: #fff;
     color: var(--text-bright)
   }
-  
-  @media (prefers-color-scheme:dark) {
-    h2 {
-      color: #1e1e2e;
-      color: var(--text-bright)
-    }
-  }
-  
+}
+
+h3 {
+  color: #000;
+  color: var(--text-bright)
+}
+
+@media (prefers-color-scheme:dark) {
   h3 {
-    color: #000;
+    color: #fff;
     color: var(--text-bright)
   }
-  
-  @media (prefers-color-scheme:dark) {
-    h3 {
-      color: #1e1e2e;
-      color: var(--text-bright)
-    }
-  }
-  
+}
+
+h4 {
+  color: #000;
+  color: var(--text-bright)
+}
+
+@media (prefers-color-scheme:dark) {
   h4 {
-    color: #000;
+    color: #fff;
     color: var(--text-bright)
   }
-  
-  @media (prefers-color-scheme:dark) {
-    h4 {
-      color: #1e1e2e;
-      color: var(--text-bright)
-    }
-  }
-  
+}
+
+h5 {
+  color: #000;
+  color: var(--text-bright)
+}
+
+@media (prefers-color-scheme:dark) {
   h5 {
-    color: #000;
+    color: #fff;
     color: var(--text-bright)
   }
-  
-  @media (prefers-color-scheme:dark) {
-    h5 {
-      color: #1e1e2e;
-      color: var(--text-bright)
-    }
-  }
-  
+}
+
+h6 {
+  color: #000;
+  color: var(--text-bright)
+}
+
+@media (prefers-color-scheme:dark) {
   h6 {
-    color: #000;
+    color: #fff;
     color: var(--text-bright)
   }
-  
-  @media (prefers-color-scheme:dark) {
-    h6 {
-      color: #1e1e2e;
-      color: var(--text-bright)
-    }
-  }
-  
+}
+
+strong {
+  color: #000;
+  color: var(--text-bright)
+}
+
+@media (prefers-color-scheme:dark) {
   strong {
-    color: #000;
+    color: #fff;
     color: var(--text-bright)
   }
-  
-  @media (prefers-color-scheme:dark) {
-    strong {
-      color: #1e1e2e;
-      color: var(--text-bright)
-    }
+}
+
+b,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+strong,
+th {
+  font-weight: 600
+}
+
+q:after,
+q:before {
+  content: none
+}
+
+blockquote {
+  border-left: 4px solid #418ed1;
+  border-left: 4px solid var(--focus);
+  margin: 1.5em 0;
+  padding: .5em 1em;
+  font-style: italic
+}
+
+@media (prefers-color-scheme:dark) {
+  blockquote {
+    border-left: 4px solid #418ed1;
+    border-left: 4px solid var(--focus)
   }
-  
-  b,
+}
+
+q {
+  border-left: 4px solid #418ed1;
+  border-left: 4px solid var(--focus);
+  margin: 1.5em 0;
+  padding: .5em 1em;
+  font-style: italic
+}
+
+@media (prefers-color-scheme:dark) {
+  q {
+    border-left: 4px solid #418ed1;
+    border-left: 4px solid var(--focus)
+  }
+}
+
+blockquote>footer {
+  font-style: normal;
+  border: 0
+}
+
+address,
+blockquote cite {
+  font-style: normal
+}
+
+a[href^=mailto\:]:before {
+  content: "📧 "
+}
+
+a[href^=tel\:]:before {
+  content: "📞 "
+}
+
+a[href^=sms\:]:before {
+  content: "💬 "
+}
+
+mark {
+  background-color: #ff0;
+  background-color: var(--highlight);
+  border-radius: 2px;
+  padding: 0 2px;
+  color: #000
+}
+
+@media (prefers-color-scheme:dark) {
+  mark {
+    background-color: #efdb43;
+    background-color: var(--highlight)
+  }
+}
+
+a>code,
+a>strong {
+  color: inherit
+}
+
+button,
+input[type=button],
+input[type=checkbox],
+input[type=radio],
+input[type=range],
+input[type=reset],
+input[type=submit],
+select {
+  cursor: pointer
+}
+
+input,
+select {
+  display: block
+}
+
+[type=checkbox],
+[type=radio] {
+  display: initial
+}
+
+input {
+  color: #1d1d1d;
+  color: var(--form-text);
+  background-color: #efefef;
+  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
+}
+
+@media (prefers-color-scheme:dark) {
+  input {
+    background-color: #161f27;
+    background-color: var(--background);
+    color: #fff;
+    color: var(--form-text)
+  }
+}
+
+button {
+  color: #1d1d1d;
+  color: var(--form-text);
+  background-color: #efefef;
+  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
+}
+
+@media (prefers-color-scheme:dark) {
+  button {
+    background-color: #161f27;
+    background-color: var(--background);
+    color: #fff;
+    color: var(--form-text)
+  }
+}
+
+textarea {
+  color: #1d1d1d;
+  color: var(--form-text);
+  background-color: #efefef;
+  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
+}
+
+@media (prefers-color-scheme:dark) {
+  textarea {
+    background-color: #161f27;
+    background-color: var(--background);
+    color: #fff;
+    color: var(--form-text)
+  }
+}
+
+select {
+  color: #1d1d1d;
+  color: var(--form-text);
+  background-color: #efefef;
+  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
+}
+
+@media (prefers-color-scheme:dark) {
+  select {
+    background-color: #161f27;
+    background-color: var(--background);
+    color: #fff;
+    color: var(--form-text)
+  }
+}
+
+button {
+  background-color: #d0cfcf;
+  background-color: var(--button-base);
+  padding-right: 30px;
+  padding-left: 30px
+}
+
+@media (prefers-color-scheme:dark) {
+  button {
+    background-color: #0c151c;
+    background-color: var(--button-base)
+  }
+}
+
+input[type=submit] {
+  background-color: #d0cfcf;
+  background-color: var(--button-base);
+  padding-right: 30px;
+  padding-left: 30px
+}
+
+@media (prefers-color-scheme:dark) {
+  input[type=submit] {
+    background-color: #0c151c;
+    background-color: var(--button-base)
+  }
+}
+
+input[type=reset] {
+  background-color: #d0cfcf;
+  background-color: var(--button-base);
+  padding-right: 30px;
+  padding-left: 30px
+}
+
+@media (prefers-color-scheme:dark) {
+  input[type=reset] {
+    background-color: #0c151c;
+    background-color: var(--button-base)
+  }
+}
+
+input[type=button] {
+  background-color: #d0cfcf;
+  background-color: var(--button-base);
+  padding-right: 30px;
+  padding-left: 30px
+}
+
+@media (prefers-color-scheme:dark) {
+  input[type=button] {
+    background-color: #0c151c;
+    background-color: var(--button-base)
+  }
+}
+
+button:hover {
+  background: #9b9b9b;
+  background: var(--button-hover)
+}
+
+@media (prefers-color-scheme:dark) {
+  button:hover {
+    background: #040a0f;
+    background: var(--button-hover)
+  }
+}
+
+input[type=submit]:hover {
+  background: #9b9b9b;
+  background: var(--button-hover)
+}
+
+@media (prefers-color-scheme:dark) {
+  input[type=submit]:hover {
+    background: #040a0f;
+    background: var(--button-hover)
+  }
+}
+
+input[type=reset]:hover {
+  background: #9b9b9b;
+  background: var(--button-hover)
+}
+
+@media (prefers-color-scheme:dark) {
+  input[type=reset]:hover {
+    background: #040a0f;
+    background: var(--button-hover)
+  }
+}
+
+input[type=button]:hover {
+  background: #9b9b9b;
+  background: var(--button-hover)
+}
+
+@media (prefers-color-scheme:dark) {
+  input[type=button]:hover {
+    background: #040a0f;
+    background: var(--button-hover)
+  }
+}
+
+input[type=color] {
+  min-height: 2rem;
+  padding: 8px;
+  cursor: pointer
+}
+
+input[type=checkbox],
+input[type=radio] {
+  height: 1em;
+  width: 1em
+}
+
+input[type=radio] {
+  border-radius: 100%
+}
+
+input {
+  vertical-align: top
+}
+
+label {
+  vertical-align: middle;
+  margin-bottom: 4px;
+  display: inline-block
+}
+
+button,
+input:not([type=checkbox]):not([type=radio]),
+input[type=range],
+select,
+textarea {
+  -webkit-appearance: none
+}
+
+textarea {
+  display: block;
+  margin-right: 0;
+  box-sizing: border-box;
+  resize: vertical
+}
+
+textarea:not([cols]) {
+  width: 100%
+}
+
+textarea:not([rows]) {
+  min-height: 40px;
+  height: 140px
+}
+
+select {
+  background: #efefef url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23161f27'%3E%3Cpath d='M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E") calc(100% - 12px) 50%/12px no-repeat;
+  background: var(--background) var(--select-arrow) calc(100% - 12px) 50%/12px no-repeat;
+  padding-right: 35px
+}
+
+@media (prefers-color-scheme:dark) {
+  select {
+    background: #161f27 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23efefef'%3E%3Cpath d='M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E") calc(100% - 12px) 50%/12px no-repeat;
+    background: var(--background) var(--select-arrow) calc(100% - 12px) 50%/12px no-repeat
+  }
+}
+
+select::-ms-expand {
+  display: none
+}
+
+select[multiple] {
+  padding-right: 10px;
+  background-image: none;
+  overflow-y: auto
+}
+
+input:focus {
+  box-shadow: 0 0 0 2px #418ed1;
+  box-shadow: 0 0 0 2px var(--focus)
+}
+
+@media (prefers-color-scheme:dark) {
+  input:focus {
+    box-shadow: 0 0 0 2px #418ed1;
+    box-shadow: 0 0 0 2px var(--focus)
+  }
+}
+
+select:focus {
+  box-shadow: 0 0 0 2px #418ed1;
+  box-shadow: 0 0 0 2px var(--focus)
+}
+
+@media (prefers-color-scheme:dark) {
+  select:focus {
+    box-shadow: 0 0 0 2px #418ed1;
+    box-shadow: 0 0 0 2px var(--focus)
+  }
+}
+
+button:focus {
+  box-shadow: 0 0 0 2px #418ed1;
+  box-shadow: 0 0 0 2px var(--focus)
+}
+
+@media (prefers-color-scheme:dark) {
+  button:focus {
+    box-shadow: 0 0 0 2px #418ed1;
+    box-shadow: 0 0 0 2px var(--focus)
+  }
+}
+
+textarea:focus {
+  box-shadow: 0 0 0 2px #418ed1;
+  box-shadow: 0 0 0 2px var(--focus)
+}
+
+@media (prefers-color-scheme:dark) {
+  textarea:focus {
+    box-shadow: 0 0 0 2px #418ed1;
+    box-shadow: 0 0 0 2px var(--focus)
+  }
+}
+
+button:active,
+input[type=button]:active,
+input[type=checkbox]:active,
+input[type=radio]:active,
+input[type=range]:active,
+input[type=reset]:active,
+input[type=submit]:active {
+  transform: translateY(2px)
+}
+
+button:disabled,
+input:disabled,
+select:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+  opacity: .5
+}
+
+::-moz-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)
+}
+
+@media (prefers-color-scheme:dark) {
+  ::-moz-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)
+  }
+}
+
+fieldset {
+  border: 1px solid #418ed1;
+  border: 1px solid var(--focus);
+  border-radius: 6px;
+  margin: 0 0 12px;
+  padding: 10px
+}
+
+@media (prefers-color-scheme:dark) {
+  fieldset {
+    border: 1px solid #418ed1;
+    border: 1px solid var(--focus)
+  }
+}
+
+legend {
+  font-size: .9em;
+  font-weight: 600
+}
+
+input[type=range] {
+  margin: 10px 0;
+  padding: 10px 0;
+  background: transparent
+}
+
+input[type=range]:focus {
+  outline: none
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 9.5px;
+  -webkit-transition: .2s;
+  transition: .2s;
+  background: #efefef;
+  background: var(--background);
+  border-radius: 3px
+}
+
+@media (prefers-color-scheme:dark) {
+  input[type=range]::-webkit-slider-runnable-track {
+    background: #161f27;
+    background: var(--background)
+  }
+}
+
+input[type=range]::-webkit-slider-thumb {
+  box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #dbdbdb;
+  background: var(--border);
+  -webkit-appearance: none;
+  margin-top: -7px
+}
+
+@media (prefers-color-scheme:dark) {
+  input[type=range]::-webkit-slider-thumb {
+    background: #526980;
+    background: var(--border)
+  }
+}
+
+input[type=range]:focus::-webkit-slider-runnable-track {
+  background: #efefef;
+  background: var(--background)
+}
+
+@media (prefers-color-scheme:dark) {
+  input[type=range]:focus::-webkit-slider-runnable-track {
+    background: #161f27;
+    background: var(--background)
+  }
+}
+
+input[type=range]::-moz-range-track {
+  width: 100%;
+  height: 9.5px;
+  -moz-transition: .2s;
+  transition: .2s;
+  background: #efefef;
+  background: var(--background);
+  border-radius: 3px
+}
+
+@media (prefers-color-scheme:dark) {
+  input[type=range]::-moz-range-track {
+    background: #161f27;
+    background: var(--background)
+  }
+}
+
+input[type=range]::-moz-range-thumb {
+  box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #dbdbdb;
+  background: var(--border)
+}
+
+@media (prefers-color-scheme:dark) {
+  input[type=range]::-moz-range-thumb {
+    background: #526980;
+    background: var(--border)
+  }
+}
+
+input[type=range]::-ms-track {
+  width: 100%;
+  height: 9.5px;
+  background: transparent;
+  border-color: transparent;
+  border-width: 16px 0;
+  color: transparent
+}
+
+input[type=range]::-ms-fill-lower {
+  background: #efefef;
+  background: var(--background);
+  border: .2px solid #010101;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d
+}
+
+@media (prefers-color-scheme:dark) {
+  input[type=range]::-ms-fill-lower {
+    background: #161f27;
+    background: var(--background)
+  }
+}
+
+input[type=range]::-ms-fill-upper {
+  background: #efefef;
+  background: var(--background);
+  border: .2px solid #010101;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d
+}
+
+@media (prefers-color-scheme:dark) {
+  input[type=range]::-ms-fill-upper {
+    background: #161f27;
+    background: var(--background)
+  }
+}
+
+input[type=range]::-ms-thumb {
+  box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+  border: 1px solid #000;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #dbdbdb;
+  background: var(--border)
+}
+
+@media (prefers-color-scheme:dark) {
+  input[type=range]::-ms-thumb {
+    background: #526980;
+    background: var(--border)
+  }
+}
+
+input[type=range]:focus::-ms-fill-lower {
+  background: #efefef;
+  background: var(--background)
+}
+
+@media (prefers-color-scheme:dark) {
+  input[type=range]:focus::-ms-fill-lower {
+    background: #161f27;
+    background: var(--background)
+  }
+}
+
+input[type=range]:focus::-ms-fill-upper {
+  background: #efefef;
+  background: var(--background)
+}
+
+@media (prefers-color-scheme:dark) {
+  input[type=range]:focus::-ms-fill-upper {
+    background: #161f27;
+    background: var(--background)
+  }
+}
+
+a {
+  text-decoration: none;
+  color: #0076d1;
+  color: var(--links)
+}
+
+@media (prefers-color-scheme:dark) {
+  a {
+    color: #41adff;
+    color: var(--links)
+  }
+}
+
+a:hover {
+  text-decoration: underline
+}
+
+code {
+  background: #efefef;
+  background: var(--background);
+  color: #000;
+  color: var(--code);
+  padding: 2.5px 5px;
+  border-radius: 6px;
+  font-size: 1em
+}
+
+@media (prefers-color-scheme:dark) {
+  code {
+    color: #ffbe85;
+    color: var(--code);
+    background: #161f27;
+    background: var(--background)
+  }
+}
+
+samp {
+  background: #efefef;
+  background: var(--background);
+  color: #000;
+  color: var(--code);
+  padding: 2.5px 5px;
+  border-radius: 6px;
+  font-size: 1em
+}
+
+@media (prefers-color-scheme:dark) {
+  samp {
+    color: #ffbe85;
+    color: var(--code);
+    background: #161f27;
+    background: var(--background)
+  }
+}
+
+time {
+  background: #efefef;
+  background: var(--background);
+  color: #000;
+  color: var(--code);
+  padding: 2.5px 5px;
+  border-radius: 6px;
+  font-size: 1em
+}
+
+@media (prefers-color-scheme:dark) {
+  time {
+    color: #ffbe85;
+    color: var(--code);
+    background: #161f27;
+    background: var(--background)
+  }
+}
+
+pre>code {
+  padding: 10px;
+  display: block;
+  overflow-x: auto
+}
+
+var {
+  color: #39a33c;
+  color: var(--variable);
+  font-style: normal;
+  font-family: monospace
+}
+
+@media (prefers-color-scheme:dark) {
+  var {
+    color: #d941e2;
+    color: var(--variable)
+  }
+}
+
+kbd {
+  background: #efefef;
+  background: var(--background);
+  border: 1px solid #dbdbdb;
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  color: #363636;
+  color: var(--text-main);
+  padding: 2px 4px
+}
+
+@media (prefers-color-scheme:dark) {
+  kbd {
+    color: #dbdbdb;
+    color: var(--text-main);
+    border: 1px solid #526980;
+    border: 1px solid var(--border);
+    background: #161f27;
+    background: var(--background)
+  }
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto
+}
+
+hr {
+  border: none;
+  border-top: 1px solid #dbdbdb;
+  border-top: 1px solid var(--border)
+}
+
+@media (prefers-color-scheme:dark) {
+  hr {
+    border-top: 1px solid #526980;
+    border-top: 1px solid var(--border)
+  }
+}
+
+table {
+  border-collapse: collapse;
+  margin-bottom: 10px;
+  width: 100%;
+  table-layout: fixed
+}
+
+table caption,
+td,
+th {
+  text-align: left
+}
+
+td,
+th {
+  padding: 6px;
+  vertical-align: top;
+  word-wrap: break-word
+}
+
+thead {
+  border-bottom: 1px solid #dbdbdb;
+  border-bottom: 1px solid var(--border)
+}
+
+@media (prefers-color-scheme:dark) {
+  thead {
+    border-bottom: 1px solid #526980;
+    border-bottom: 1px solid var(--border)
+  }
+}
+
+tfoot {
+  border-top: 1px solid #dbdbdb;
+  border-top: 1px solid var(--border)
+}
+
+@media (prefers-color-scheme:dark) {
+  tfoot {
+    border-top: 1px solid #526980;
+    border-top: 1px solid var(--border)
+  }
+}
+
+tbody tr:nth-child(2n) {
+  background-color: #efefef;
+  background-color: var(--background)
+}
+
+@media (prefers-color-scheme:dark) {
+  tbody tr:nth-child(2n) {
+    background-color: #161f27;
+    background-color: var(--background)
+  }
+}
+
+tbody tr:nth-child(2n) button {
+  background-color: #f7f7f7;
+  background-color: var(--background-alt)
+}
+
+@media (prefers-color-scheme:dark) {
+  tbody tr:nth-child(2n) button {
+    background-color: #1a242f;
+    background-color: var(--background-alt)
+  }
+}
+
+tbody tr:nth-child(2n) button:hover {
+  background-color: #fff;
+  background-color: var(--background-body)
+}
+
+@media (prefers-color-scheme:dark) {
+  tbody tr:nth-child(2n) button:hover {
+    background-color: #202b38;
+    background-color: var(--background-body)
+  }
+}
+
+::-webkit-scrollbar {
+  height: 10px;
+  width: 10px
+}
+
+::-webkit-scrollbar-track {
+  background: #efefef;
+  background: var(--background);
+  border-radius: 6px
+}
+
+@media (prefers-color-scheme:dark) {
+  ::-webkit-scrollbar-track {
+    background: #161f27;
+    background: var(--background)
+  }
+}
+
+::-webkit-scrollbar-thumb {
+  background: #aaa;
+  background: var(--scrollbar-thumb);
+  border-radius: 6px
+}
+
+@media (prefers-color-scheme:dark) {
+  ::-webkit-scrollbar-thumb {
+    background: #040a0f;
+    background: var(--scrollbar-thumb)
+  }
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #9b9b9b;
+  background: var(--scrollbar-thumb-hover)
+}
+
+@media (prefers-color-scheme:dark) {
+  ::-webkit-scrollbar-thumb:hover {
+    background: #000;
+    background: var(--scrollbar-thumb-hover)
+  }
+}
+
+::-moz-selection {
+  background-color: #9e9e9e;
+  background-color: var(--selection);
+  color: #000;
+  color: var(--text-bright)
+}
+
+::selection {
+  background-color: #9e9e9e;
+  background-color: var(--selection);
+  color: #000;
+  color: var(--text-bright)
+}
+
+@media (prefers-color-scheme:dark) {
+  ::-moz-selection {
+    color: #fff;
+    color: var(--text-bright)
+  }
+
+  ::selection {
+    color: #fff;
+    color: var(--text-bright)
+  }
+}
+
+@media (prefers-color-scheme:dark) {
+  ::-moz-selection {
+    background-color: #1c76c5;
+    background-color: var(--selection)
+  }
+
+  ::selection {
+    background-color: #1c76c5;
+    background-color: var(--selection)
+  }
+}
+
+details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: #f7f7f7;
+  background-color: var(--background-alt);
+  padding: 10px 10px 0;
+  margin: 1em 0;
+  border-radius: 6px;
+  overflow: hidden
+}
+
+@media (prefers-color-scheme:dark) {
+  details {
+    background-color: #1a242f;
+    background-color: var(--background-alt)
+  }
+}
+
+details[open] {
+  padding: 10px
+}
+
+details>:last-child {
+  margin-bottom: 0
+}
+
+details[open] summary {
+  margin-bottom: 10px
+}
+
+summary {
+  display: list-item;
+  background-color: #efefef;
+  background-color: var(--background);
+  padding: 10px;
+  margin: -10px -10px 0;
+  cursor: pointer;
+  outline: none
+}
+
+@media (prefers-color-scheme:dark) {
+  summary {
+    background-color: #161f27;
+    background-color: var(--background)
+  }
+}
+
+summary:focus,
+summary:hover {
+  text-decoration: underline
+}
+
+details>:not(summary) {
+  margin-top: 0
+}
+
+summary::-webkit-details-marker {
+  color: #363636;
+  color: var(--text-main)
+}
+
+@media (prefers-color-scheme:dark) {
+  summary::-webkit-details-marker {
+    color: #dbdbdb;
+    color: var(--text-main)
+  }
+}
+
+dialog {
+  background-color: #f7f7f7;
+  background-color: var(--background-alt);
+  color: #363636;
+  color: var(--text-main);
+  border-radius: 6px;
+  border: #dbdbdb;
+  border-color: var(--border);
+  padding: 10px 30px
+}
+
+@media (prefers-color-scheme:dark) {
+  dialog {
+    border-color: #526980;
+    border-color: var(--border);
+    color: #dbdbdb;
+    color: var(--text-main);
+    background-color: #1a242f;
+    background-color: var(--background-alt)
+  }
+}
+
+dialog>header:first-child {
+  background-color: #efefef;
+  background-color: var(--background);
+  border-radius: 6px 6px 0 0;
+  margin: -10px -30px 10px;
+  padding: 10px;
+  text-align: center
+}
+
+@media (prefers-color-scheme:dark) {
+  dialog>header:first-child {
+    background-color: #161f27;
+    background-color: var(--background)
+  }
+}
+
+dialog::-webkit-backdrop {
+  background: rgba(0, 0, 0, .61);
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px)
+}
+
+dialog::backdrop {
+  background: rgba(0, 0, 0, .61);
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px)
+}
+
+footer {
+  border-top: 1px solid #dbdbdb;
+  border-top: 1px solid var(--border);
+  padding-top: 10px;
+  color: #70777f;
+  color: var(--text-muted)
+}
+
+@media (prefers-color-scheme:dark) {
+  footer {
+    color: #a9b1ba;
+    color: var(--text-muted);
+    border-top: 1px solid #526980;
+    border-top: 1px solid var(--border)
+  }
+}
+
+body>footer {
+  margin-top: 40px
+}
+
+@media print {
+
+  body,
+  button,
+  code,
+  details,
+  input,
+  pre,
+  summary,
+  textarea {
+    background-color: #fff
+  }
+
+  button,
+  input,
+  textarea {
+    border: 1px solid #000
+  }
+
+  body,
+  button,
+  code,
+  footer,
   h1,
   h2,
   h3,
   h4,
   h5,
   h6,
+  input,
+  pre,
   strong,
-  th {
-    font-weight: 600
-  }
-  
-  q:after,
-  q:before {
-    content: none
-  }
-  
-  blockquote {
-    border-left: 4px solid #418ed1;
-    border-left: 4px solid var(--focus);
-    margin: 1.5em 0;
-    padding: .5em 1em;
-    font-style: italic
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    blockquote {
-      border-left: 4px solid #418ed1;
-      border-left: 4px solid var(--focus)
-    }
-  }
-  
-  q {
-    border-left: 4px solid #418ed1;
-    border-left: 4px solid var(--focus);
-    margin: 1.5em 0;
-    padding: .5em 1em;
-    font-style: italic
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    q {
-      border-left: 4px solid #418ed1;
-      border-left: 4px solid var(--focus)
-    }
-  }
-  
-  blockquote>footer {
-    font-style: normal;
-    border: 0
-  }
-  
-  address,
-  blockquote cite {
-    font-style: normal
-  }
-  
-  a[href^=mailto\:]:before {
-    content: "📧 "
-  }
-  
-  a[href^=tel\:]:before {
-    content: "📞 "
-  }
-  
-  a[href^=sms\:]:before {
-    content: "💬 "
-  }
-  
-  mark {
-    background-color: #ff0;
-    background-color: var(--highlight);
-    border-radius: 2px;
-    padding: 0 2px;
+  summary,
+  textarea {
     color: #000
   }
-  
-  @media (prefers-color-scheme:dark) {
-    mark {
-      background-color: #efdb43;
-      background-color: var(--highlight)
-    }
-  }
-  
-  a>code,
-  a>strong {
-    color: inherit
-  }
-  
-  button,
-  input[type=button],
-  input[type=checkbox],
-  input[type=radio],
-  input[type=range],
-  input[type=reset],
-  input[type=submit],
-  select {
-    cursor: pointer
-  }
-  
-  input,
-  select {
-    display: block
-  }
-  
-  [type=checkbox],
-  [type=radio] {
-    display: initial
-  }
-  
-  input {
-    color: #1d1d1d;
-    color: var(--form-text);
-    background-color: #efefef;
-    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
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    input {
-      background-color: #161f27;
-      background-color: var(--background);
-      color: #1e1e2e;
-      color: var(--form-text)
-    }
-  }
-  
-  button {
-    color: #1d1d1d;
-    color: var(--form-text);
-    background-color: #efefef;
-    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
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    button {
-      background-color: #161f27;
-      background-color: var(--background);
-      color: #1e1e2e;
-      color: var(--form-text)
-    }
-  }
-  
-  textarea {
-    color: #1d1d1d;
-    color: var(--form-text);
-    background-color: #efefef;
-    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
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    textarea {
-      background-color: #161f27;
-      background-color: var(--background);
-      color: #1e1e2e;
-      color: var(--form-text)
-    }
-  }
-  
-  select {
-    color: #1d1d1d;
-    color: var(--form-text);
-    background-color: #efefef;
-    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
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    select {
-      background-color: #161f27;
-      background-color: var(--background);
-      color: #1e1e2e;
-      color: var(--form-text)
-    }
-  }
-  
-  button {
-    background-color: #d0cfcf;
-    background-color: var(--button-base);
-    padding-right: 30px;
-    padding-left: 30px
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    button {
-      background-color: #0c151c;
-      background-color: var(--button-base)
-    }
-  }
-  
-  input[type=submit] {
-    background-color: #d0cfcf;
-    background-color: var(--button-base);
-    padding-right: 30px;
-    padding-left: 30px
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    input[type=submit] {
-      background-color: #0c151c;
-      background-color: var(--button-base)
-    }
-  }
-  
-  input[type=reset] {
-    background-color: #d0cfcf;
-    background-color: var(--button-base);
-    padding-right: 30px;
-    padding-left: 30px
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    input[type=reset] {
-      background-color: #0c151c;
-      background-color: var(--button-base)
-    }
-  }
-  
-  input[type=button] {
-    background-color: #d0cfcf;
-    background-color: var(--button-base);
-    padding-right: 30px;
-    padding-left: 30px
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    input[type=button] {
-      background-color: #0c151c;
-      background-color: var(--button-base)
-    }
-  }
-  
-  button:hover {
-    background: #9b9b9b;
-    background: var(--button-hover)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    button:hover {
-      background: #040a0f;
-      background: var(--button-hover)
-    }
-  }
-  
-  input[type=submit]:hover {
-    background: #9b9b9b;
-    background: var(--button-hover)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    input[type=submit]:hover {
-      background: #040a0f;
-      background: var(--button-hover)
-    }
-  }
-  
-  input[type=reset]:hover {
-    background: #9b9b9b;
-    background: var(--button-hover)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    input[type=reset]:hover {
-      background: #040a0f;
-      background: var(--button-hover)
-    }
-  }
-  
-  input[type=button]:hover {
-    background: #9b9b9b;
-    background: var(--button-hover)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    input[type=button]:hover {
-      background: #040a0f;
-      background: var(--button-hover)
-    }
-  }
-  
-  input[type=color] {
-    min-height: 2rem;
-    padding: 8px;
-    cursor: pointer
-  }
-  
-  input[type=checkbox],
-  input[type=radio] {
-    height: 1em;
-    width: 1em
-  }
-  
-  input[type=radio] {
-    border-radius: 100%
-  }
-  
-  input {
-    vertical-align: top
-  }
-  
-  label {
-    vertical-align: middle;
-    margin-bottom: 4px;
-    display: inline-block
-  }
-  
-  button,
-  input:not([type=checkbox]):not([type=radio]),
-  input[type=range],
-  select,
-  textarea {
-    -webkit-appearance: none
-  }
-  
-  textarea {
-    display: block;
-    margin-right: 0;
-    box-sizing: border-box;
-    resize: vertical
-  }
-  
-  textarea:not([cols]) {
-    width: 100%
-  }
-  
-  textarea:not([rows]) {
-    min-height: 40px;
-    height: 140px
-  }
-  
-  select {
-    background: #efefef url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23161f27'%3E%3Cpath d='M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E") calc(100% - 12px) 50%/12px no-repeat;
-    background: var(--background) var(--select-arrow) calc(100% - 12px) 50%/12px no-repeat;
-    padding-right: 35px
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    select {
-      background: #161f27 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='63' width='117' fill='%23efefef'%3E%3Cpath d='M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z'/%3E%3C/svg%3E") calc(100% - 12px) 50%/12px no-repeat;
-      background: var(--background) var(--select-arrow) calc(100% - 12px) 50%/12px no-repeat
-    }
-  }
-  
-  select::-ms-expand {
-    display: none
-  }
-  
-  select[multiple] {
-    padding-right: 10px;
-    background-image: none;
-    overflow-y: auto
-  }
-  
-  input:focus {
-    box-shadow: 0 0 0 2px #418ed1;
-    box-shadow: 0 0 0 2px var(--focus)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    input:focus {
-      box-shadow: 0 0 0 2px #418ed1;
-      box-shadow: 0 0 0 2px var(--focus)
-    }
-  }
-  
-  select:focus {
-    box-shadow: 0 0 0 2px #418ed1;
-    box-shadow: 0 0 0 2px var(--focus)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    select:focus {
-      box-shadow: 0 0 0 2px #418ed1;
-      box-shadow: 0 0 0 2px var(--focus)
-    }
-  }
-  
-  button:focus {
-    box-shadow: 0 0 0 2px #418ed1;
-    box-shadow: 0 0 0 2px var(--focus)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    button:focus {
-      box-shadow: 0 0 0 2px #418ed1;
-      box-shadow: 0 0 0 2px var(--focus)
-    }
-  }
-  
-  textarea:focus {
-    box-shadow: 0 0 0 2px #418ed1;
-    box-shadow: 0 0 0 2px var(--focus)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    textarea:focus {
-      box-shadow: 0 0 0 2px #418ed1;
-      box-shadow: 0 0 0 2px var(--focus)
-    }
-  }
-  
-  button:active,
-  input[type=button]:active,
-  input[type=checkbox]:active,
-  input[type=radio]:active,
-  input[type=range]:active,
-  input[type=reset]:active,
-  input[type=submit]:active {
-    transform: translateY(2px)
-  }
-  
-  button:disabled,
-  input:disabled,
-  select:disabled,
-  textarea:disabled {
-    cursor: not-allowed;
-    opacity: .5
-  }
-  
-  ::-moz-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)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    ::-moz-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)
-    }
-  }
-  
-  fieldset {
-    border: 1px solid #418ed1;
-    border: 1px solid var(--focus);
-    border-radius: 6px;
-    margin: 0 0 12px;
-    padding: 10px
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    fieldset {
-      border: 1px solid #418ed1;
-      border: 1px solid var(--focus)
-    }
-  }
-  
-  legend {
-    font-size: .9em;
-    font-weight: 600
-  }
-  
-  input[type=range] {
-    margin: 10px 0;
-    padding: 10px 0;
-    background: transparent
-  }
-  
-  input[type=range]:focus {
-    outline: none
-  }
-  
-  input[type=range]::-webkit-slider-runnable-track {
-    width: 100%;
-    height: 9.5px;
-    -webkit-transition: .2s;
-    transition: .2s;
-    background: #efefef;
-    background: var(--background);
-    border-radius: 3px
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    input[type=range]::-webkit-slider-runnable-track {
-      background: #161f27;
-      background: var(--background)
-    }
-  }
-  
-  input[type=range]::-webkit-slider-thumb {
-    box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d;
-    height: 20px;
-    width: 20px;
-    border-radius: 50%;
-    background: #dbdbdb;
-    background: var(--border);
-    -webkit-appearance: none;
-    margin-top: -7px
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    input[type=range]::-webkit-slider-thumb {
-      background: #526980;
-      background: var(--border)
-    }
-  }
-  
-  input[type=range]:focus::-webkit-slider-runnable-track {
-    background: #efefef;
-    background: var(--background)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    input[type=range]:focus::-webkit-slider-runnable-track {
-      background: #161f27;
-      background: var(--background)
-    }
-  }
-  
-  input[type=range]::-moz-range-track {
-    width: 100%;
-    height: 9.5px;
-    -moz-transition: .2s;
-    transition: .2s;
-    background: #efefef;
-    background: var(--background);
-    border-radius: 3px
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    input[type=range]::-moz-range-track {
-      background: #161f27;
-      background: var(--background)
-    }
-  }
-  
-  input[type=range]::-moz-range-thumb {
-    box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
-    height: 20px;
-    width: 20px;
-    border-radius: 50%;
-    background: #dbdbdb;
-    background: var(--border)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    input[type=range]::-moz-range-thumb {
-      background: #526980;
-      background: var(--border)
-    }
-  }
-  
-  input[type=range]::-ms-track {
-    width: 100%;
-    height: 9.5px;
-    background: transparent;
-    border-color: transparent;
-    border-width: 16px 0;
-    color: transparent
-  }
-  
-  input[type=range]::-ms-fill-lower {
-    background: #efefef;
-    background: var(--background);
-    border: .2px solid #010101;
-    border-radius: 3px;
-    box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    input[type=range]::-ms-fill-lower {
-      background: #161f27;
-      background: var(--background)
-    }
-  }
-  
-  input[type=range]::-ms-fill-upper {
-    background: #efefef;
-    background: var(--background);
-    border: .2px solid #010101;
-    border-radius: 3px;
-    box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    input[type=range]::-ms-fill-upper {
-      background: #161f27;
-      background: var(--background)
-    }
-  }
-  
-  input[type=range]::-ms-thumb {
-    box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
-    border: 1px solid #000;
-    height: 20px;
-    width: 20px;
-    border-radius: 50%;
-    background: #dbdbdb;
-    background: var(--border)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    input[type=range]::-ms-thumb {
-      background: #526980;
-      background: var(--border)
-    }
-  }
-  
-  input[type=range]:focus::-ms-fill-lower {
-    background: #efefef;
-    background: var(--background)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    input[type=range]:focus::-ms-fill-lower {
-      background: #161f27;
-      background: var(--background)
-    }
-  }
-  
-  input[type=range]:focus::-ms-fill-upper {
-    background: #efefef;
-    background: var(--background)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    input[type=range]:focus::-ms-fill-upper {
-      background: #161f27;
-      background: var(--background)
-    }
-  }
-  
-  a {
-    text-decoration: none;
-    color: #0076d1;
-    color: var(--links)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    a {
-      color: #41adff;
-      color: var(--links)
-    }
-  }
-  
-  a:hover {
-    text-decoration: underline
-  }
-  
-  code {
-    background: #efefef;
-    background: var(--background);
-    color: #000;
-    color: var(--code);
-    padding: 2.5px 5px;
-    border-radius: 6px;
-    font-size: 1em
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    code {
-      color: #ffbe85;
-      color: var(--code);
-      background: #161f27;
-      background: var(--background)
-    }
-  }
-  
-  samp {
-    background: #efefef;
-    background: var(--background);
-    color: #000;
-    color: var(--code);
-    padding: 2.5px 5px;
-    border-radius: 6px;
-    font-size: 1em
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    samp {
-      color: #ffbe85;
-      color: var(--code);
-      background: #161f27;
-      background: var(--background)
-    }
-  }
-  
-  time {
-    background: #efefef;
-    background: var(--background);
-    color: #000;
-    color: var(--code);
-    padding: 2.5px 5px;
-    border-radius: 6px;
-    font-size: 1em
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    time {
-      color: #ffbe85;
-      color: var(--code);
-      background: #161f27;
-      background: var(--background)
-    }
-  }
-  
-  pre>code {
-    padding: 10px;
-    display: block;
-    overflow-x: auto
-  }
-  
-  var {
-    color: #39a33c;
-    color: var(--variable);
-    font-style: normal;
-    font-family: monospace
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    var {
-      color: #d941e2;
-      color: var(--variable)
-    }
-  }
-  
-  kbd {
-    background: #efefef;
-    background: var(--background);
-    border: 1px solid #dbdbdb;
-    border: 1px solid var(--border);
-    border-radius: 2px;
-    color: #363636;
-    color: var(--text-main);
-    padding: 2px 4px
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    kbd {
-      color: #dbdbdb;
-      color: var(--text-main);
-      border: 1px solid #526980;
-      border: 1px solid var(--border);
-      background: #161f27;
-      background: var(--background)
-    }
-  }
-  
-  img,
-  video {
-    max-width: 100%;
-    height: auto
-  }
-  
-  hr {
-    border: none;
-    border-top: 1px solid #dbdbdb;
-    border-top: 1px solid var(--border)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    hr {
-      border-top: 1px solid #526980;
-      border-top: 1px solid var(--border)
-    }
-  }
-  
-  table {
-    border-collapse: collapse;
-    margin-bottom: 10px;
-    width: 100%;
-    table-layout: fixed
-  }
-  
-  table caption,
-  td,
-  th {
-    text-align: left
-  }
-  
-  td,
-  th {
-    padding: 6px;
-    vertical-align: top;
-    word-wrap: break-word
-  }
-  
-  thead {
-    border-bottom: 1px solid #dbdbdb;
-    border-bottom: 1px solid var(--border)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    thead {
-      border-bottom: 1px solid #526980;
-      border-bottom: 1px solid var(--border)
-    }
-  }
-  
-  tfoot {
-    border-top: 1px solid #dbdbdb;
-    border-top: 1px solid var(--border)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    tfoot {
-      border-top: 1px solid #526980;
-      border-top: 1px solid var(--border)
-    }
-  }
-  
-  tbody tr:nth-child(2n) {
-    background-color: #efefef;
-    background-color: var(--background)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    tbody tr:nth-child(2n) {
-      background-color: #161f27;
-      background-color: var(--background)
-    }
-  }
-  
-  tbody tr:nth-child(2n) button {
-    background-color: #f7f7f7;
-    background-color: var(--background-alt)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    tbody tr:nth-child(2n) button {
-      background-color: #1a242f;
-      background-color: var(--background-alt)
-    }
-  }
-  
-  tbody tr:nth-child(2n) button:hover {
-    background-color: #1e1e2e;
-    background-color: var(--background-body)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    tbody tr:nth-child(2n) button:hover {
-      background-color: #202b38;
-      background-color: var(--background-body)
-    }
-  }
-  
-  ::-webkit-scrollbar {
-    height: 10px;
-    width: 10px
-  }
-  
-  ::-webkit-scrollbar-track {
-    background: #efefef;
-    background: var(--background);
-    border-radius: 6px
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    ::-webkit-scrollbar-track {
-      background: #161f27;
-      background: var(--background)
-    }
-  }
-  
-  ::-webkit-scrollbar-thumb {
-    background: #aaa;
-    background: var(--scrollbar-thumb);
-    border-radius: 6px
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    ::-webkit-scrollbar-thumb {
-      background: #040a0f;
-      background: var(--scrollbar-thumb)
-    }
-  }
-  
-  ::-webkit-scrollbar-thumb:hover {
-    background: #9b9b9b;
-    background: var(--scrollbar-thumb-hover)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    ::-webkit-scrollbar-thumb:hover {
-      background: #000;
-      background: var(--scrollbar-thumb-hover)
-    }
-  }
-  
-  ::-moz-selection {
-    background-color: #9e9e9e;
-    background-color: var(--selection);
-    color: #000;
-    color: var(--text-bright)
-  }
-  
-  ::selection {
-    background-color: #9e9e9e;
-    background-color: var(--selection);
-    color: #000;
-    color: var(--text-bright)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    ::-moz-selection {
-      color: #1e1e2e;
-      color: var(--text-bright)
-    }
-  
-    ::selection {
-      color: #1e1e2e;
-      color: var(--text-bright)
-    }
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    ::-moz-selection {
-      background-color: #f9e2af;
-      background-color: var(--selection)
-    }
-  
-    ::selection {
-      background-color: #f9e2af;
-      background-color: var(--selection)
-    }
-  }
-  
-  details {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    background-color: #f7f7f7;
-    background-color: var(--background-alt);
-    padding: 10px 10px 0;
-    margin: 1em 0;
-    border-radius: 6px;
-    overflow: hidden
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    details {
-      background-color: #1a242f;
-      background-color: var(--background-alt)
-    }
-  }
-  
-  details[open] {
-    padding: 10px
-  }
-  
-  details>:last-child {
-    margin-bottom: 0
-  }
-  
-  details[open] summary {
-    margin-bottom: 10px
-  }
-  
-  summary {
-    display: list-item;
-    background-color: #efefef;
-    background-color: var(--background);
-    padding: 10px;
-    margin: -10px -10px 0;
-    cursor: pointer;
-    outline: none
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    summary {
-      background-color: #161f27;
-      background-color: var(--background)
-    }
-  }
-  
-  summary:focus,
-  summary:hover {
-    text-decoration: underline
-  }
-  
-  details>:not(summary) {
-    margin-top: 0
-  }
-  
-  summary::-webkit-details-marker {
-    color: #363636;
-    color: var(--text-main)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    summary::-webkit-details-marker {
-      color: #dbdbdb;
-      color: var(--text-main)
-    }
-  }
-  
-  dialog {
-    background-color: #f7f7f7;
-    background-color: var(--background-alt);
-    color: #363636;
-    color: var(--text-main);
-    border-radius: 6px;
-    border: #dbdbdb;
-    border-color: var(--border);
-    padding: 10px 30px
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    dialog {
-      border-color: #526980;
-      border-color: var(--border);
-      color: #dbdbdb;
-      color: var(--text-main);
-      background-color: #1a242f;
-      background-color: var(--background-alt)
-    }
-  }
-  
-  dialog>header:first-child {
-    background-color: #efefef;
-    background-color: var(--background);
-    border-radius: 6px 6px 0 0;
-    margin: -10px -30px 10px;
-    padding: 10px;
-    text-align: center
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    dialog>header:first-child {
-      background-color: #161f27;
-      background-color: var(--background)
-    }
-  }
-  
-  dialog::-webkit-backdrop {
-    background: rgba(0, 0, 0, .61);
-    -webkit-backdrop-filter: blur(4px);
-    backdrop-filter: blur(4px)
-  }
-  
-  dialog::backdrop {
-    background: rgba(0, 0, 0, .61);
-    -webkit-backdrop-filter: blur(4px);
-    backdrop-filter: blur(4px)
-  }
-  
-  footer {
-    border-top: 1px solid #dbdbdb;
-    border-top: 1px solid var(--border);
-    padding-top: 10px;
-    color: #70777f;
-    color: var(--text-muted)
-  }
-  
-  @media (prefers-color-scheme:dark) {
-    footer {
-      color: #a9b1ba;
-      color: var(--text-muted);
-      border-top: 1px solid #526980;
-      border-top: 1px solid var(--border)
-    }
-  }
-  
-  body>footer {
-    margin-top: 40px
-  }
-  
-  @media print {
-  
-    body,
-    button,
-    code,
-    details,
-    input,
-    pre,
-    summary,
-    textarea {
-      background-color: #1e1e2e
-    }
-  
-    button,
-    input,
-    textarea {
-      border: 1px solid #000
-    }
-  
-    body,
-    button,
-    code,
-    footer,
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6,
-    input,
-    pre,
-    strong,
-    summary,
-    textarea {
-      color: #000
-    }
-  
-    summary::marker {
-      color: #000
-    }
-  
-    summary::-webkit-details-marker {
-      color: #000
-    }
-  
-    tbody tr:nth-child(2n) {
-      background-color: #f2f2f2
-    }
-  
-    a {
-      color: #00f;
-      text-decoration: underline
-    }
+
+  summary::marker {
+    color: #000
   }
 
+  summary::-webkit-details-marker {
+    color: #000
+  }
+
+  tbody tr:nth-child(2n) {
+    background-color: #f2f2f2
+  }
+
+  a {
+    color: #00f;
+    text-decoration: underline
+  }
+}
\ No newline at end of file
diff --git a/public/dl/microbin.css b/public/dl/microbin.css
index 096b2f1..ff4513e 100644
--- a/public/dl/microbin.css
+++ b/public/dl/microbin.css
@@ -934,9 +934,9 @@
   }
   
   code {
-    background: #efefef;
+    background: #7f849c;
     background: var(--background);
-    color: #000;
+    color: #7f849c;
     color: var(--code);
     padding: 2.5px 5px;
     border-radius: 6px;
@@ -947,7 +947,7 @@
     code {
       color: #ffbe85;
       color: var(--code);
-      background: #161f27;
+      background: #7f849c;
       background: var(--background)
     }
   }