From 16c75963192de485f8a941ff90dd63652695f672 Mon Sep 17 00:00:00 2001
From: Lucas <lucas@larroche.com>
Date: Wed, 27 Nov 2019 15:31:49 +0700
Subject: [PATCH] =?UTF-8?q?Initial=20commit=20=F0=9F=9A=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                       |    2 +
 css/pico.classless.css           | 1290 ++++++++++++++++++++++++++
 css/pico.classless.min.css       |    4 +
 css/pico.css                     | 1442 ++++++++++++++++++++++++++++++
 css/pico.fluid.classless.css     | 1286 ++++++++++++++++++++++++++
 css/pico.fluid.classless.min.css |    4 +
 css/pico.min.css                 |    4 +
 scss/_colors.scss                |   37 +
 scss/_variables.scss             |  136 +++
 scss/components/_accordion.scss  |   62 ++
 scss/components/_card.scss       |   56 ++
 scss/components/_nav.scss        |   71 ++
 scss/components/_tooltip.scss    |   59 ++
 scss/content/_button.scss        |  172 ++++
 scss/content/_code.scss          |  113 +++
 scss/content/_form.scss          |  322 +++++++
 scss/content/_miscs.scss         |   29 +
 scss/content/_table.scss         |   45 +
 scss/content/_typography.scss    |  289 ++++++
 scss/layout/_container.scss      |   44 +
 scss/layout/_document.scss       |   68 ++
 scss/layout/_grid.scss           |   30 +
 scss/layout/_scroller.scss       |   29 +
 scss/layout/_section.scss        |   44 +
 scss/layout/_sectioning.scss     |  113 +++
 scss/pico.classless.scss         |    5 +
 scss/pico.fluid.classless.scss   |    6 +
 scss/pico.scss                   |   34 +
 scss/themes/_dark.scss           |  137 +++
 scss/themes/_light.scss          |   63 ++
 30 files changed, 5996 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 css/pico.classless.css
 create mode 100644 css/pico.classless.min.css
 create mode 100644 css/pico.css
 create mode 100644 css/pico.fluid.classless.css
 create mode 100644 css/pico.fluid.classless.min.css
 create mode 100644 css/pico.min.css
 create mode 100644 scss/_colors.scss
 create mode 100644 scss/_variables.scss
 create mode 100644 scss/components/_accordion.scss
 create mode 100644 scss/components/_card.scss
 create mode 100644 scss/components/_nav.scss
 create mode 100644 scss/components/_tooltip.scss
 create mode 100644 scss/content/_button.scss
 create mode 100644 scss/content/_code.scss
 create mode 100644 scss/content/_form.scss
 create mode 100644 scss/content/_miscs.scss
 create mode 100644 scss/content/_table.scss
 create mode 100644 scss/content/_typography.scss
 create mode 100644 scss/layout/_container.scss
 create mode 100644 scss/layout/_document.scss
 create mode 100644 scss/layout/_grid.scss
 create mode 100644 scss/layout/_scroller.scss
 create mode 100644 scss/layout/_section.scss
 create mode 100644 scss/layout/_sectioning.scss
 create mode 100644 scss/pico.classless.scss
 create mode 100644 scss/pico.fluid.classless.scss
 create mode 100644 scss/pico.scss
 create mode 100644 scss/themes/_dark.scss
 create mode 100644 scss/themes/_light.scss

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..a9c08669
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+*.DS_Store
+prepros-6.config
diff --git a/css/pico.classless.css b/css/pico.classless.css
new file mode 100644
index 00000000..2bbdc42f
--- /dev/null
+++ b/css/pico.classless.css
@@ -0,0 +1,1290 @@
+/*!
+ * Pico.css v0.1.0 (https://picocss.com)
+ * Copyright 2019 - Licensed under MIT
+ */
+/**
+ * Light theme (Default)
+ * Can be forced with data-theme="light"
+ */
+[data-theme="light"],
+:root:not([data-theme="dark"]) {
+  --background:        #FFF;
+  --text:              #415762;
+  --h1:                #1b2a32;
+  --h2:                #2c4049;
+  --h3:                #415762;
+  --h4:                #596e78;
+  --h5:                #73848c;
+  --h6:                #8a9ba3;
+  --mark:              rgba(255, 223, 128, 0.5);
+  --primary:            #1086c1;
+  --primary-hover:      #086a9b;
+  --primary-focus:      rgba(16, 134, 193, 0.125);
+  --primary-inverse:    #FFF;
+  --secondary:         #374b56;
+  --secondary-hover:   #23353e;
+  --secondary-focus:   rgba(55, 75, 86, 0.125);
+  --secondary-inverse: #FFF;
+  --input-background:  #FFF;
+  --input-border:      #c8d2d8;
+  --valid:             #288a6a;
+  --invalid:           #b94646;
+  --muted-text:        #7e8f98;
+  --muted-background:  #edf1f3;
+  --muted-border:      #edf1f3;
+  --card-background:   #FFF;
+  --card-shadow:       0 0.125rem 1rem rgba(27, 42, 50, 0.04), 0 0.125rem 2rem rgba(27, 42, 50, 0.08), 0 0 0 0.0625rem rgba(27, 42, 50, 0.024);
+  --code-background:   #f3f5f7;
+  --code-border:       #d5dde2;
+  --code-inlined:      #edf1f3;
+  --code-color-1:      #9f6060;
+  --code-color-2:      #2f7ca2;
+  --badge-background:  #73848c;
+  --badge-text:        #FFF;
+  --table-background:  #FFF;
+  --table-border:      rgba(237, 241, 243, 0.75);
+}
+
+/**
+ * Dark theme (Auto)
+ * Automatically enabled if user has Dark mode enabled
+ */
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --background:        #10191e;
+    --text:              #a2b1b9;
+    --h1:                #edf1f3;
+    --h2:                #d5dde2;
+    --h3:                #bbc7ce;
+    --h4:                #a2b1b9;
+    --h5:                #8a9ba3;
+    --h6:                #73848c;
+    --mark:              rgba(255, 223, 128, 0.25);
+    --primary:            #1086c1;
+    --primary-hover:      #1aa2e6;
+    --primary-focus:      rgba(16, 134, 193, 0.25);
+    --primary-inverse:    #FFF;
+    --secondary:         #bbc7ce;
+    --secondary-hover:   #edf1f3;
+    --secondary-focus:   rgba(187, 199, 206, 0.25);
+    --secondary-inverse: #1b2a32;
+    --input-background:  #10191e;
+    --input-border:      #374b56;
+    --valid:             #1f7a5c;
+    --invalid:           #943838;
+    --valid:             #1f7a5c;
+    --invalid:           #943838;
+    --muted-text:        #73848c;
+    --muted-background:  #10191e;
+    --muted-border:      #23353e;
+    --card-background:   #17242b;
+    --card-shadow:       0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);
+    --code-background:   #141f24;
+    --code-border:       #23353e;
+    --code-inlined:      rgba(65, 87, 98, 0.25);
+    --code-color-1:      #ac5353;
+    --code-color-2:      #4d91b3;
+    --badge-background:  #2c4049;
+    --badge-text:        #a2b1b9;
+    --table-background:  #141f24;
+    --table-border:      #10191e;
+  }
+}
+
+/**
+ * Dark theme (Forced)
+ * Enabled if forced with data-theme="dark"
+ */
+[data-theme="dark"] {
+  --background:        #10191e;
+  --text:              #a2b1b9;
+  --h1:                #edf1f3;
+  --h2:                #d5dde2;
+  --h3:                #bbc7ce;
+  --h4:                #a2b1b9;
+  --h5:                #8a9ba3;
+  --h6:                #73848c;
+  --mark:              rgba(255, 223, 128, 0.25);
+  --primary:            #1086c1;
+  --primary-hover:      #1aa2e6;
+  --primary-focus:      rgba(16, 134, 193, 0.25);
+  --primary-inverse:    #FFF;
+  --secondary:         #bbc7ce;
+  --secondary-hover:   #edf1f3;
+  --secondary-focus:   rgba(187, 199, 206, 0.25);
+  --secondary-inverse: #1b2a32;
+  --input-background:  #10191e;
+  --input-border:      #374b56;
+  --valid:             #1f7a5c;
+  --invalid:           #943838;
+  --valid:             #1f7a5c;
+  --invalid:           #943838;
+  --muted-text:        #73848c;
+  --muted-background:  #10191e;
+  --muted-border:      #23353e;
+  --card-background:   #17242b;
+  --card-shadow:       0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);
+  --code-background:   #141f24;
+  --code-border:       #23353e;
+  --code-inlined:      rgba(65, 87, 98, 0.25);
+  --code-color-1:      #ac5353;
+  --code-color-2:      #4d91b3;
+  --badge-background:  #2c4049;
+  --badge-text:        #a2b1b9;
+  --table-background:  #141f24;
+  --table-border:      #10191e;
+}
+
+/**
+ * Document
+ * Content-box & Responsive typography
+ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  background: var(--background);
+  color: var(--text);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  text-rendering: optimizeLegibility;
+}
+
+@media (min-width: 576px) {
+  html {
+    font-size: 17px;
+  }
+}
+
+@media (min-width: 768px) {
+  html {
+    font-size: 18px;
+  }
+}
+
+@media (min-width: 992px) {
+  html {
+    font-size: 19px;
+  }
+}
+
+@media (min-width: 1200px) {
+  html {
+    font-size: 20px;
+  }
+}
+
+/**
+ * Sectioning
+ * Container and responsive spacings for header, main, footer
+ */
+main {
+  display: block;
+}
+
+body {
+  width: 100%;
+  margin: 0;
+}
+
+body > header,
+body > main,
+body > footer {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 2rem 1rem;
+}
+
+@media (min-width: 576px) {
+  body > header,
+  body > main,
+  body > footer {
+    max-width: 510px;
+    padding: 2.5rem 0;
+  }
+}
+
+@media (min-width: 768px) {
+  body > header,
+  body > main,
+  body > footer {
+    max-width: 700px;
+    padding: 3rem 0;
+  }
+}
+
+@media (min-width: 992px) {
+  body > header,
+  body > main,
+  body > footer {
+    max-width: 920px;
+    padding: 3.5rem 0;
+  }
+}
+
+@media (min-width: 1200px) {
+  body > header,
+  body > main,
+  body > footer {
+    max-width: 1130px;
+    padding: 4rem 0;
+  }
+}
+
+/**
+ * Section
+ * Responsive spacings for section
+ */
+section {
+  margin-bottom: 4rem;
+}
+
+@media (min-width: 576px) {
+  section {
+    margin-bottom: 5rem;
+  }
+}
+
+@media (min-width: 768px) {
+  section {
+    margin-bottom: 6rem;
+  }
+}
+
+@media (min-width: 992px) {
+  section {
+    margin-bottom: 7rem;
+  }
+}
+
+@media (min-width: 1200px) {
+  section {
+    margin-bottom: 8rem;
+  }
+}
+
+/**
+ * Horizontal scroller (<figure>)
+ */
+figure {
+  display: block;
+  margin-right: -1rem;
+  margin-left: -1rem;
+  padding: 0;
+  overflow-x: auto;
+}
+
+figure figcaption {
+  color: var(--muted-text);
+  font-size: 87.5%;
+  padding: 0 1rem;
+}
+
+@media (min-width: 576px) {
+  figure {
+    margin-right: 0;
+    margin-left: 0;
+  }
+  figure figcaption {
+    padding: 0;
+  }
+}
+
+/**
+ * Typography
+ */
+b,
+strong {
+  font-weight: border;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: .75rem;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25rem;
+}
+
+sup {
+  top: -0.5rem;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  border-style: none;
+}
+
+svg,
+img {
+  vertical-align: text-bottom;
+}
+
+address,
+blockquote,
+dl,
+figure,
+form,
+ol,
+p,
+pre,
+table,
+ul {
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+  color: var(--text);
+  font-size: 1rem;
+  font-style: normal;
+}
+
+a {
+  background-color: transparent;
+  color: var(--primary);
+  text-decoration: none;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+a:hover, a:active, a:focus {
+  color: var(--primary-hover);
+  text-decoration: underline;
+}
+
+a:focus {
+  outline: none;
+  background-color: var(--primary-focus);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+  font-weight: 700;
+}
+
+h1 {
+  margin-bottom: 3rem;
+  color: var(--h1);
+  font-size: 2rem;
+}
+
+h2 {
+  margin-bottom: 2.625rem;
+  color: var(--h2);
+  font-size: 1.75rem;
+}
+
+h3 {
+  margin-bottom: 2.25rem;
+  color: var(--h3);
+  font-size: 1.5rem;
+}
+
+h4 {
+  margin-bottom: 1.875rem;
+  color: var(--h4);
+  font-size: 1.25rem;
+}
+
+h5 {
+  margin-bottom: 1.6875rem;
+  color: var(--h5);
+  font-size: 1.125rem;
+}
+
+h6 {
+  color: var(--h6);
+  font-size: 1rem;
+}
+
+header h1 {
+  font-size: 3rem;
+}
+
+header h2 {
+  font-size: 2.625rem;
+}
+
+header h3 {
+  font-size: 2.25rem;
+}
+
+header h4 {
+  font-size: 1.875rem;
+}
+
+header h5 {
+  font-size: 1.6875rem;
+}
+
+header h6 {
+  font-size: 1.5rem;
+}
+
+hgroup {
+  margin-bottom: 1.5rem;
+}
+
+hgroup h1,
+hgroup h2,
+hgroup h3,
+hgroup h4,
+hgroup h5,
+hgroup h6,
+hgroup p {
+  margin-bottom: 0;
+}
+
+p {
+  margin-bottom: 0.75rem;
+}
+
+small {
+  font-size: 85%;
+}
+
+@media (min-width: 576px) {
+  small {
+    font-size: 83%;
+  }
+}
+
+@media (min-width: 768px) {
+  small {
+    font-size: 81%;
+  }
+}
+
+@media (min-width: 992px) {
+  small {
+    font-size: 79%;
+  }
+}
+
+@media (min-width: 1200px) {
+  small {
+    font-size: 77%;
+  }
+}
+
+ul,
+ol {
+  padding-left: 1.5rem;
+}
+
+ul li,
+ol li {
+  margin-bottom: 0.75rem;
+}
+
+ul li {
+  list-style: square;
+}
+
+mark {
+  padding: .125rem .25rem;
+  background: var(--mark);
+  color: var(--text);
+  vertical-align: middle;
+}
+
+blockquote {
+  display: block;
+  margin: 3rem 0;
+  margin-right: -1rem;
+  margin-left: -1rem;
+  padding: 1rem;
+  border-left: 0.25rem solid var(--muted-border);
+}
+
+@media (min-width: 576px) {
+  blockquote {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
+blockquote footer {
+  margin-top: 0.75rem;
+  color: var(--muted-text);
+}
+
+abbr[title] {
+  border-bottom: 1px dotted;
+  text-decoration: none;
+  cursor: help;
+}
+
+ins {
+  color: var(--valid);
+  text-decoration: none;
+}
+
+del {
+  color: var(--invalid);
+}
+
+/**
+ * Form elements
+ */
+input,
+optgroup,
+select,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+input {
+  overflow: visible;
+}
+
+select {
+  text-transform: none;
+}
+
+legend {
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  color: inherit;
+  white-space: normal;
+}
+
+textarea {
+  overflow: auto;
+}
+
+[type="checkbox"],
+[type="radio"] {
+  padding: 0;
+}
+
+[type="number"]::-webkit-inner-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+fieldset {
+  margin: 0;
+  margin-bottom: 1.5rem;
+  padding: 0;
+  border: 0;
+}
+
+input:not([type="checkbox"]):not([type="radio"]),
+select,
+textarea,
+form small {
+  display: block;
+  width: 100%;
+}
+
+label,
+fieldset legend {
+  display: block;
+  margin-bottom: 0.125rem;
+  vertical-align: middle;
+}
+
+input,
+select,
+textarea {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: 1px solid var(--input-border);
+  border-radius: 0.25rem;
+  outline: none;
+  background-color: var(--input-background);
+  color: var(--text);
+  font-weight: normal;
+  vertical-align: middle;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+input::placeholder,
+select::placeholder,
+textarea::placeholder {
+  color: var(--muted-text);
+  opacity: 1;
+}
+
+input:active, input:focus,
+select:active,
+select:focus,
+textarea:active,
+textarea:focus {
+  border-color: var(--primary);
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  box-shadow: 0 0 0 0.2rem var(--primary-focus);
+}
+
+input[readonly], input[disabled],
+select[readonly],
+select[disabled],
+textarea[readonly],
+textarea[disabled] {
+  border-color: var(--muted-border);
+  box-shadow: none;
+}
+
+input[readonly] ~ label, input[disabled] ~ label,
+select[readonly] ~ label,
+select[disabled] ~ label,
+textarea[readonly] ~ label,
+textarea[disabled] ~ label {
+  color: var(--muted-text);
+}
+
+input[disabled],
+select[disabled],
+textarea[disabled] {
+  background-color: var(--muted-background);
+  opacity: .5;
+}
+
+input:focus:-moz-focusring,
+select:focus:-moz-focusring,
+textarea:focus:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 #000;
+}
+
+input:not([type="checkbox"]):not([type="radio"]),
+select,
+textarea {
+  margin-bottom: 1.5rem;
+  padding: 0.75rem 1rem;
+}
+
+input:not([type="checkbox"]):not([type="radio"])[invalid]:not(:focus), input:not([type="checkbox"]):not([type="radio"])[valid]:not(:focus),
+select[invalid]:not(:focus),
+select[valid]:not(:focus),
+textarea[invalid]:not(:focus),
+textarea[valid]:not(:focus) {
+  padding-right: 2rem;
+  background-position: center right .75rem;
+  background-repeat: no-repeat;
+  background-size: 1rem auto;
+}
+
+input:not([type="checkbox"]):not([type="radio"])[invalid]:not(:focus),
+select[invalid]:not(:focus),
+textarea[invalid]:not(:focus) {
+  border-bottom: 1px solid var(--invalid);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b94646' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+}
+
+input:not([type="checkbox"]):not([type="radio"])[valid]:not(:focus),
+select[valid]:not(:focus),
+textarea[valid]:not(:focus) {
+  border-bottom: 1px solid var(--valid);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+}
+
+select::-ms-expand {
+  border: 0;
+  background-color: transparent;
+}
+
+select:not([multiple]) {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-position: center right .75rem;
+  background-repeat: no-repeat;
+  background-size: 1rem auto;
+}
+
+[type="checkbox"],
+[type="radio"] {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  margin-right: .375rem;
+  margin-bottom: 0.125rem;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+[type="checkbox"]::-ms-check,
+[type="radio"]::-ms-check {
+  display: none;
+}
+
+[type="checkbox"]:checked,
+[type="radio"]:checked {
+  border-color: var(--primary);
+  background-color: var(--primary);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: .66rem auto;
+}
+
+[type="checkbox"] ~ label,
+[type="radio"] ~ label {
+  display: inline-block;
+  margin-right: .375rem;
+  margin-bottom: 0;
+  cursor: pointer;
+}
+
+[type="radio"] {
+  border-radius: 50%;
+}
+
+[type="radio"]:checked {
+  border-width: .33rem;
+  border-color: var(--primary);
+  background-color: var(--primary-inverse);
+  background-image: none;
+}
+
+[type="checkbox"][role="switch"] {
+  width: 1.85rem;
+  height: 1rem;
+  border: 2px solid var(--input-border);
+  border-radius: 1rem;
+  background-color: var(--input-border);
+  line-height: 1rem;
+}
+
+[type="checkbox"][role="switch"]:before {
+  display: block;
+  width: calc(1rem - 4px);
+  height: 100%;
+  border-radius: 50%;
+  background-color: var(--primary-inverse);
+  content: '';
+  transition: margin 0.1s ease-in-out;
+}
+
+[type="checkbox"][role="switch"]:checked {
+  border-color: var(--primary);
+  background-color: var(--primary);
+  background-image: none;
+}
+
+[type="checkbox"][role="switch"]:checked::before {
+  margin-right: 0;
+  margin-left: calc(0.925rem - 2px);
+}
+
+form small {
+  color: var(--muted-text);
+}
+
+input + small {
+  margin-top: -1rem;
+  margin-bottom: 1.5rem;
+}
+
+label > input:not([type="checkbox"]):not([type="radio"]),
+label > select,
+label > textarea {
+  margin-top: 0.125rem;
+}
+
+/**
+ * Button
+ */
+button {
+  margin: 0;
+  overflow: visible;
+  font-family: inherit;
+  text-transform: none;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+button {
+  display: block;
+  width: 100%;
+  margin-bottom: 1.5rem;
+}
+
+a[role="button"] {
+  display: inline-block;
+  text-decoration: none;
+}
+
+button,
+input[type="submit"],
+a[role="button"] {
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--primary);
+  border-radius: 0.25rem;
+  outline: none;
+  background-color: var(--primary);
+  color: var(--primary-inverse);
+  font-size: 1rem;
+  font-weight: normal;
+  line-height: 1.5;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+button:hover, button:active, button:focus,
+input[type="submit"]:hover,
+input[type="submit"]:active,
+input[type="submit"]:focus,
+a[role="button"]:hover,
+a[role="button"]:active,
+a[role="button"]:focus {
+  border: 1px solid var(--primary-hover);
+  background-color: var(--primary-hover);
+}
+
+button:focus,
+input[type="submit"]:focus,
+a[role="button"]:focus {
+  box-shadow: 0 0 0 0.2rem var(--primary-focus);
+}
+
+input[type="reset"] {
+  cursor: pointer;
+}
+
+button[disabled],
+input[type="submit"][disabled],
+input[type="reset"][disabled],
+a[role="button"][disabled] {
+  opacity: .5;
+  pointer-events: none;
+}
+
+/**
+ * Table
+ */
+table {
+  width: 100%;
+  border-spacing: 0;
+  background: var(--table-background);
+}
+
+th,
+td {
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid var(--table-border);
+  color: var(--muted-text);
+  font-weight: 400;
+  text-align: left;
+  font-size: 0.875rem;
+}
+
+th,
+thead td {
+  color: var(--text);
+  font-weight: bolder;
+  font-size: 1rem;
+}
+
+thead th,
+thead td {
+  border-bottom: 3px solid var(--table-border);
+}
+
+tbody tr:nth-child(odd) {
+  background-color: rgba(237, 241, 243, 0.02);
+}
+
+thead tr,
+tbody tr:nth-child(even) {
+  background-color: rgba(27, 42, 50, 0.02);
+}
+
+/**
+ * Code
+ */
+pre,
+code,
+kbd,
+samp {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 1rem;
+}
+
+pre,
+code,
+kbd {
+  background: var(--code-inlined);
+  color: var(--muted-text);
+  font-size: 85%;
+  font-weight: 400;
+  line-height: 1;
+}
+
+@media (min-width: 576px) {
+  pre,
+  code,
+  kbd {
+    font-size: 83%;
+  }
+}
+
+@media (min-width: 768px) {
+  pre,
+  code,
+  kbd {
+    font-size: 81%;
+  }
+}
+
+@media (min-width: 992px) {
+  pre,
+  code,
+  kbd {
+    font-size: 79%;
+  }
+}
+
+@media (min-width: 1200px) {
+  pre,
+  code,
+  kbd {
+    font-size: 77%;
+  }
+}
+
+code,
+kbd {
+  display: inline-block;
+  padding: .375rem .5rem;
+  border-radius: 0.25rem;
+}
+
+pre {
+  display: block;
+  margin-right: -1rem;
+  margin-left: -1rem;
+  padding: 2rem 1rem;
+  overflow-x: auto;
+  border-left: 0.25rem solid var(--code-border);
+  background: var(--code-background);
+}
+
+@media (min-width: 576px) {
+  pre {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
+pre > code {
+  display: block;
+  padding: 0;
+  background: transparent;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+code b {
+  color: var(--code-color-1);
+  font-weight: normal;
+}
+
+code i {
+  color: var(--code-color-2);
+  font-style: normal;
+}
+
+code u {
+  color: var(--text);
+  text-decoration: none;
+}
+
+kbd {
+  background-color: var(--secondary);
+  color: var(--secondary-inverse);
+  font-weight: bolder;
+}
+
+/**
+ * Miscs
+ */
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+  border: none;
+  border-top: 1px solid var(--muted-border);
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[hidden],
+template {
+  display: none;
+}
+
+/**
+ * Accordion (<details>)
+ * Inspiration: https://codepen.io/koca/pen/RyeLLV
+ */
+details {
+  display: block;
+  margin-bottom: 1.5rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--muted-border);
+}
+
+details summary {
+  list-style-type: none;
+  cursor: pointer;
+  line-height: 1rem;
+}
+
+details summary::-webkit-details-marker {
+  display: none;
+}
+
+details summary::marker {
+  display: none;
+}
+
+details summary::-moz-list-bullet {
+  list-style-type: none;
+}
+
+details summary::after {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  float: right;
+  transform: rotate(-90deg);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 1rem auto;
+  content: '';
+  transition: transform 0.2s ease-in-out;
+}
+
+details summary:focus {
+  outline: none;
+}
+
+details[open] summary {
+  margin-bottom: 0.375rem;
+  color: var(--muted-text);
+}
+
+details[open] summary::after {
+  transform: rotate(0);
+}
+
+/**
+ * Card (<article>)
+ */
+article {
+  margin: 2rem;
+  margin-right: -1rem;
+  margin-left: -1rem;
+  padding: 2rem 1rem;
+  background: var(--card-background);
+  box-shadow: var(--card-shadow);
+}
+
+@media (min-width: 576px) {
+  article {
+    margin: 2.5rem 0;
+    padding: 2.5rem;
+    border-radius: 0.25rem;
+  }
+}
+
+@media (min-width: 768px) {
+  article {
+    margin: 3rem 0;
+    padding: 3rem;
+  }
+}
+
+@media (min-width: 992px) {
+  article {
+    margin: 3.5rem 0;
+    padding: 3.5rem;
+  }
+}
+
+@media (min-width: 1200px) {
+  article {
+    margin: 4rem 0;
+    padding: 4rem;
+  }
+}
+
+/**
+ * Nav
+ */
+nav,
+nav ul {
+  display: flex;
+}
+
+nav {
+  justify-content: space-between;
+}
+
+nav ul {
+  align-items: center;
+  margin-bottom: 0;
+  padding: 0;
+  list-style: none;
+}
+
+nav ul:first-of-type {
+  margin-left: -0.5rem;
+}
+
+nav ul:last-of-type {
+  margin-right: -0.5rem;
+}
+
+nav li {
+  display: inline-block;
+  margin: 0;
+  padding: 1rem 0.5rem;
+}
+
+nav li > *,
+nav li > input:not([type="checkbox"]):not([type="radio"]) {
+  margin-bottom: 0;
+}
+
+nav a {
+  display: block;
+  margin: -1rem -0.5rem;
+  padding: 1rem 0.5rem;
+  border-radius: 0.25rem;
+}
+
+nav a:hover, nav a:active, nav a:focus {
+  text-decoration: none;
+}
+
+aside nav,
+aside ul,
+aside li {
+  display: block;
+}
+
+aside li {
+  padding: 0.5rem;
+}
+
+aside li a {
+  margin: -0.5rem;
+  padding: 0.5rem;
+}
+
+/**
+ * Tooltip ([data-tooltip])
+ */
+[data-tooltip] {
+  position: relative;
+}
+
+[data-tooltip]:not(a):not(button):not(input) {
+  border-bottom: 1px dotted;
+  text-decoration: none;
+  cursor: help;
+}
+
+[data-tooltip]::before, [data-tooltip]::after {
+  display: block;
+  z-index: 99;
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  padding: .25rem .5rem;
+  overflow: hidden;
+  transform: translate(-50%, -0.25rem);
+  border-radius: 0.25rem;
+  background: var(--secondary);
+  color: var(--secondary-inverse);
+  font-size: .85rem;
+  font-style: normal;
+  font-weight: normal;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  content: attr(data-tooltip);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease-in-out;
+}
+
+[data-tooltip]::after {
+  padding: 0;
+  transform: translate(-50%, 0rem);
+  border-top: .3rem solid;
+  border-right: .3rem solid transparent;
+  border-left: .3rem solid transparent;
+  border-radius: 0;
+  background-color: transparent;
+  color: var(--secondary);
+  content: '';
+}
+
+[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
+  opacity: 1;
+}
diff --git a/css/pico.classless.min.css b/css/pico.classless.min.css
new file mode 100644
index 00000000..2584cab6
--- /dev/null
+++ b/css/pico.classless.min.css
@@ -0,0 +1,4 @@
+/*!
+ * Pico.css v0.1.0 (https://picocss.com)
+ * Copyright 2019 - Licensed under MIT
+ */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415762;--h1:#1b2a32;--h2:#2c4049;--h3:#415762;--h4:#596e78;--h5:#73848c;--h6:#8a9ba3;--mark:rgba(255, 223, 128, 0.5);--action:#1086c1;--action-hover:#086a9b;--action-focus:rgba(16, 134, 193, 0.125);--action-inverse:#FFF;--secondary:#374b56;--secondary-hover:#23353e;--secondary-focus:rgba(55, 75, 86, 0.125);--secondary-inverse:#FFF;--input-background:#FFF;--input-border:#c8d2d8;--valid:#288a6a;--invalid:#b94646;--muted-text:#7e8f98;--muted-background:#edf1f3;--muted-border:#edf1f3;--card-background:#FFF;--card-shadow:0 0.125rem 1rem rgba(27, 42, 50, 0.04), 0 0.125rem 2rem rgba(27, 42, 50, 0.08), 0 0 0 0.0625rem rgba(27, 42, 50, 0.024);--code-background:#f3f5f7;--code-border:#d5dde2;--code-inlined:#edf1f3;--code-color-1:#9f6060;--code-color-2:#2f7ca2;--badge-background:#73848c;--badge-text:#FFF;--table-background:#FFF;--table-border:rgba(237, 241, 243, 0.75)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10191e;--text:#a2b1b9;--h1:#edf1f3;--h2:#d5dde2;--h3:#bbc7ce;--h4:#a2b1b9;--h5:#8a9ba3;--h6:#73848c;--mark:rgba(255, 223, 128, 0.25);--primary:#1086c1;--primary-hover:#1aa2e6;--primary-focus:rgba(16, 134, 193, 0.25);--primary-inverse:#FFF;--secondary:#bbc7ce;--secondary-hover:#edf1f3;--secondary-focus:rgba(187, 199, 206, 0.25);--secondary-inverse:#1b2a32;--input-background:#10191e;--input-border:#374b56;--valid:#1f7a5c;--invalid:#943838;--valid:#1f7a5c;--invalid:#943838;--muted-text:#73848c;--muted-background:#10191e;--muted-border:#23353e;--card-background:#17242b;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141f24;--code-border:#23353e;--code-inlined:rgba(65, 87, 98, 0.25);--code-color-1:#ac5353;--code-color-2:#4d91b3;--badge-background:#2c4049;--badge-text:#a2b1b9;--table-background:#141f24;--table-border:#10191e}}[data-theme=dark]{--background:#10191e;--text:#a2b1b9;--h1:#edf1f3;--h2:#d5dde2;--h3:#bbc7ce;--h4:#a2b1b9;--h5:#8a9ba3;--h6:#73848c;--mark:rgba(255, 223, 128, 0.25);--primary:#1086c1;--primary-hover:#1aa2e6;--primary-focus:rgba(16, 134, 193, 0.25);--primary-inverse:#FFF;--secondary:#bbc7ce;--secondary-hover:#edf1f3;--secondary-focus:rgba(187, 199, 206, 0.25);--secondary-inverse:#1b2a32;--input-background:#10191e;--input-border:#374b56;--valid:#1f7a5c;--invalid:#943838;--valid:#1f7a5c;--invalid:#943838;--muted-text:#73848c;--muted-background:#10191e;--muted-border:#23353e;--card-background:#17242b;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141f24;--code-border:#23353e;--code-inlined:rgba(65, 87, 98, 0.25);--code-color-1:#ac5353;--code-color-2:#4d91b3;--badge-background:#2c4049;--badge-text:#a2b1b9;--table-background:#141f24;--table-border:#10191e}*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);background:var(--background);color:var(--text);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 1rem}@media (min-width:576px){body>footer,body>header,body>main{max-width:510px;padding:2.5rem 0}}@media (min-width:768px){body>footer,body>header,body>main{max-width:700px;padding:3rem 0}}@media (min-width:992px){body>footer,body>header,body>main{max-width:920px;padding:3.5rem 0}}@media (min-width:1200px){body>footer,body>header,body>main{max-width:1130px;padding:4rem 0}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}figure{display:block;margin-right:-1rem;margin-left:-1rem;padding:0;overflow-x:auto}figure figcaption{color:var(--muted-text);font-size:87.5%;padding:0 1rem}@media (min-width:576px){figure{margin-right:0;margin-left:0}figure figcaption{padding:0}}b,strong{font-weight:border}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}img{max-width:100%;height:auto;border-style:none}img,svg{vertical-align:text-bottom}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}header h1{font-size:3rem}header h2{font-size:2.625rem}header h3{font-size:2.25rem}header h4{font-size:1.875rem}header h5{font-size:1.6875rem}header h6{font-size:1.5rem}hgroup{margin-bottom:1.5rem}hgroup h1,hgroup h2,hgroup h3,hgroup h4,hgroup h5,hgroup h6,hgroup p{margin-bottom:0}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.75rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--text);vertical-align:middle}blockquote{display:block;margin:3rem 0;margin-right:-1rem;margin-left:-1rem;padding:1rem;border-left:0.25rem solid var(--muted-border)}@media (min-width:576px){blockquote{margin-right:0;margin-left:0}}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}fieldset legend,label{display:block;margin-bottom:0.125rem;vertical-align:middle}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;vertical-align:middle;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::placeholder,select::placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled],select[disabled],textarea[disabled]{background-color:var(--muted-background);opacity:.5}input:focus:-moz-focusring,select:focus:-moz-focusring,textarea:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:1.5rem;padding:0.75rem 1rem}input:not([type=checkbox]):not([type=radio])[invalid]:not(:focus),input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[invalid]:not(:focus),select[valid]:not(:focus),textarea[invalid]:not(:focus),textarea[valid]:not(:focus){padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input:not([type=checkbox]):not([type=radio])[invalid]:not(:focus),select[invalid]:not(:focus),textarea[invalid]:not(:focus){border-bottom:1px solid var(--invalid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b94646' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[valid]:not(:focus),textarea[valid]:not(:focus){border-bottom:1px solid var(--valid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=checkbox],[type=radio]{display:inline-block;width:1rem;height:1rem;margin-right:.375rem;margin-bottom:0.125rem;vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--primary);background-color:var(--primary-inverse);background-image:none}[type=checkbox][role=switch]{width:1.85rem;height:1rem;border:2px solid var(--input-border);border-radius:1rem;background-color:var(--input-border);line-height:1rem}[type=checkbox][role=switch]:before{display:block;width:calc(1rem - 4px);height:100%;border-radius:50%;background-color:var(--primary-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--primary);background-color:var(--primary);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(0.925rem - 2px)}form small{color:var(--muted-text)}input+small{margin-top:-1rem;margin-bottom:1.5rem}label>input:not([type=checkbox]):not([type=radio]),label>select,label>textarea{margin-top:0.125rem}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=submit]{padding:0.75rem 1rem;border:1px solid var(--primary);border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{border:1px solid var(--primary-hover);background-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}table{width:100%;border-spacing:0;background:var(--table-background)}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-weight:400;text-align:left;font-size:0.875rem}th,thead td{color:var(--text);font-weight:bolder;font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:rgba(237, 241, 243, 0.02)}tbody tr:nth-child(2n),thead tr{background-color:rgba(27, 42, 50, 0.02)}code,kbd,pre,samp{font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:1rem}code,kbd,pre{background:var(--code-inlined);color:var(--muted-text);font-size:85%;font-weight:400;line-height:1}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;overflow-x:auto;border-left:0.25rem solid var(--code-border);background:var(--code-background)}@media (min-width:576px){pre{margin-right:0;margin-left:0}}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-1);font-weight:normal}code i{color:var(--code-color-2);font-style:normal}code u{color:var(--text);text-decoration:none}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{vertical-align:baseline}[hidden],template{display:none}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{list-style-type:none;cursor:pointer;line-height:1rem}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform 0.2s ease-in-out}details summary:focus{outline:none}details[open] summary{margin-bottom:0.375rem;color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:2rem;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem;border-radius:0.25rem}}@media (min-width:768px){article{margin:3rem 0;padding:3rem}}@media (min-width:992px){article{margin:3.5rem 0;padding:3.5rem}}@media (min-width:1200px){article{margin:4rem 0;padding:4rem}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ul:first-of-type{margin-left:-0.5rem}nav ul:last-of-type{margin-right:-0.5rem}nav li{display:inline-block;margin:0;padding:1rem 0.5rem}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:-1rem -0.5rem;padding:1rem 0.5rem;border-radius:0.25rem}nav a:active,nav a:focus,nav a:hover{text-decoration:none}aside li,aside nav,aside ul{display:block}aside li{padding:0.5rem}aside li a{margin:-0.5rem;padding:0.5rem}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:0.25rem;background:var(--secondary);color:var(--secondary-inverse);font-size:.85rem;font-style:normal;font-weight:normal;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none;transition:opacity 0.2s ease-in-out}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--secondary);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1}
\ No newline at end of file
diff --git a/css/pico.css b/css/pico.css
new file mode 100644
index 00000000..6885d985
--- /dev/null
+++ b/css/pico.css
@@ -0,0 +1,1442 @@
+/*!
+ * Pico.css v0.1.0 (https://picocss.com)
+ * Copyright 2019 - Licensed under MIT
+ */
+/**
+ * Light theme (Default)
+ * Can be forced with data-theme="light"
+ */
+[data-theme="light"],
+:root:not([data-theme="dark"]) {
+  --background:        #FFF;
+  --text:              #415762;
+  --h1:                #1b2a32;
+  --h2:                #2c4049;
+  --h3:                #415762;
+  --h4:                #596e78;
+  --h5:                #73848c;
+  --h6:                #8a9ba3;
+  --mark:              rgba(255, 223, 128, 0.5);
+  --primary:            #1086c1;
+  --primary-hover:      #086a9b;
+  --primary-focus:      rgba(16, 134, 193, 0.125);
+  --primary-inverse:    #FFF;
+  --secondary:         #374b56;
+  --secondary-hover:   #23353e;
+  --secondary-focus:   rgba(55, 75, 86, 0.125);
+  --secondary-inverse: #FFF;
+  --input-background:  #FFF;
+  --input-border:      #c8d2d8;
+  --valid:             #288a6a;
+  --invalid:           #b94646;
+  --muted-text:        #7e8f98;
+  --muted-background:  #edf1f3;
+  --muted-border:      #edf1f3;
+  --card-background:   #FFF;
+  --card-shadow:       0 0.125rem 1rem rgba(27, 42, 50, 0.04), 0 0.125rem 2rem rgba(27, 42, 50, 0.08), 0 0 0 0.0625rem rgba(27, 42, 50, 0.024);
+  --code-background:   #f3f5f7;
+  --code-border:       #d5dde2;
+  --code-inlined:      #edf1f3;
+  --code-color-1:      #9f6060;
+  --code-color-2:      #2f7ca2;
+  --badge-background:  #73848c;
+  --badge-text:        #FFF;
+  --table-background:  #FFF;
+  --table-border:      rgba(237, 241, 243, 0.75);
+}
+
+/**
+ * Dark theme (Auto)
+ * Automatically enabled if user has Dark mode enabled
+ */
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --background:        #10191e;
+    --text:              #a2b1b9;
+    --h1:                #edf1f3;
+    --h2:                #d5dde2;
+    --h3:                #bbc7ce;
+    --h4:                #a2b1b9;
+    --h5:                #8a9ba3;
+    --h6:                #73848c;
+    --mark:              rgba(255, 223, 128, 0.25);
+    --primary:            #1086c1;
+    --primary-hover:      #1aa2e6;
+    --primary-focus:      rgba(16, 134, 193, 0.25);
+    --primary-inverse:    #FFF;
+    --secondary:         #bbc7ce;
+    --secondary-hover:   #edf1f3;
+    --secondary-focus:   rgba(187, 199, 206, 0.25);
+    --secondary-inverse: #1b2a32;
+    --input-background:  #10191e;
+    --input-border:      #374b56;
+    --valid:             #1f7a5c;
+    --invalid:           #943838;
+    --valid:             #1f7a5c;
+    --invalid:           #943838;
+    --muted-text:        #73848c;
+    --muted-background:  #10191e;
+    --muted-border:      #23353e;
+    --card-background:   #17242b;
+    --card-shadow:       0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);
+    --code-background:   #141f24;
+    --code-border:       #23353e;
+    --code-inlined:      rgba(65, 87, 98, 0.25);
+    --code-color-1:      #ac5353;
+    --code-color-2:      #4d91b3;
+    --badge-background:  #2c4049;
+    --badge-text:        #a2b1b9;
+    --table-background:  #141f24;
+    --table-border:      #10191e;
+  }
+}
+
+/**
+ * Dark theme (Forced)
+ * Enabled if forced with data-theme="dark"
+ */
+[data-theme="dark"] {
+  --background:        #10191e;
+  --text:              #a2b1b9;
+  --h1:                #edf1f3;
+  --h2:                #d5dde2;
+  --h3:                #bbc7ce;
+  --h4:                #a2b1b9;
+  --h5:                #8a9ba3;
+  --h6:                #73848c;
+  --mark:              rgba(255, 223, 128, 0.25);
+  --primary:            #1086c1;
+  --primary-hover:      #1aa2e6;
+  --primary-focus:      rgba(16, 134, 193, 0.25);
+  --primary-inverse:    #FFF;
+  --secondary:         #bbc7ce;
+  --secondary-hover:   #edf1f3;
+  --secondary-focus:   rgba(187, 199, 206, 0.25);
+  --secondary-inverse: #1b2a32;
+  --input-background:  #10191e;
+  --input-border:      #374b56;
+  --valid:             #1f7a5c;
+  --invalid:           #943838;
+  --valid:             #1f7a5c;
+  --invalid:           #943838;
+  --muted-text:        #73848c;
+  --muted-background:  #10191e;
+  --muted-border:      #23353e;
+  --card-background:   #17242b;
+  --card-shadow:       0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);
+  --code-background:   #141f24;
+  --code-border:       #23353e;
+  --code-inlined:      rgba(65, 87, 98, 0.25);
+  --code-color-1:      #ac5353;
+  --code-color-2:      #4d91b3;
+  --badge-background:  #2c4049;
+  --badge-text:        #a2b1b9;
+  --table-background:  #141f24;
+  --table-border:      #10191e;
+}
+
+/**
+ * Document
+ * Content-box & Responsive typography
+ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  background: var(--background);
+  color: var(--text);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  text-rendering: optimizeLegibility;
+}
+
+@media (min-width: 576px) {
+  html {
+    font-size: 17px;
+  }
+}
+
+@media (min-width: 768px) {
+  html {
+    font-size: 18px;
+  }
+}
+
+@media (min-width: 992px) {
+  html {
+    font-size: 19px;
+  }
+}
+
+@media (min-width: 1200px) {
+  html {
+    font-size: 20px;
+  }
+}
+
+/**
+ * Sectioning
+ * Container and responsive spacings for header, main, footer
+ */
+main {
+  display: block;
+}
+
+body {
+  width: 100%;
+  margin: 0;
+}
+
+body > header,
+body > main,
+body > footer {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 2rem 0;
+}
+
+@media (min-width: 576px) {
+  body > header,
+  body > main,
+  body > footer {
+    padding: 2.5rem 0;
+  }
+}
+
+@media (min-width: 768px) {
+  body > header,
+  body > main,
+  body > footer {
+    padding: 3rem 0;
+  }
+}
+
+@media (min-width: 992px) {
+  body > header,
+  body > main,
+  body > footer {
+    padding: 3.5rem 0;
+  }
+}
+
+@media (min-width: 1200px) {
+  body > header,
+  body > main,
+  body > footer {
+    padding: 4rem 0;
+  }
+}
+
+/**
+ * Container
+ */
+.container,
+.container-fluid {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 1rem;
+  padding-left: 1rem;
+}
+
+@media (min-width: 576px) {
+  .container {
+    padding-right: 0;
+    padding-left: 0;
+    max-width: 510px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 700px;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    max-width: 920px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1130px;
+  }
+}
+
+/**
+ * Section
+ * Responsive spacings for section
+ */
+section {
+  margin-bottom: 4rem;
+}
+
+@media (min-width: 576px) {
+  section {
+    margin-bottom: 5rem;
+  }
+}
+
+@media (min-width: 768px) {
+  section {
+    margin-bottom: 6rem;
+  }
+}
+
+@media (min-width: 992px) {
+  section {
+    margin-bottom: 7rem;
+  }
+}
+
+@media (min-width: 1200px) {
+  section {
+    margin-bottom: 8rem;
+  }
+}
+
+/**
+ * Grid
+ * Minimal grid system with auto-layout columns
+ */
+.grid {
+  margin: 0;
+}
+
+@media (min-width: 992px) {
+  .grid {
+    grid-column-gap: 1rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
+  }
+}
+
+.grid > * {
+  min-width: 0;
+  margin-bottom: 1rem;
+}
+
+@media (min-width: 992px) {
+  .grid > * {
+    margin-bottom: 0;
+  }
+}
+
+/**
+ * Horizontal scroller (<figure>)
+ */
+figure {
+  display: block;
+  margin-right: -1rem;
+  margin-left: -1rem;
+  padding: 0;
+  overflow-x: auto;
+}
+
+figure figcaption {
+  color: var(--muted-text);
+  font-size: 87.5%;
+  padding: 0 1rem;
+}
+
+@media (min-width: 576px) {
+  figure {
+    margin-right: 0;
+    margin-left: 0;
+  }
+  figure figcaption {
+    padding: 0;
+  }
+}
+
+/**
+ * Typography
+ */
+b,
+strong {
+  font-weight: border;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: .75rem;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25rem;
+}
+
+sup {
+  top: -0.5rem;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  border-style: none;
+}
+
+svg,
+img {
+  vertical-align: text-bottom;
+}
+
+address,
+blockquote,
+dl,
+figure,
+form,
+ol,
+p,
+pre,
+table,
+ul {
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+  color: var(--text);
+  font-size: 1rem;
+  font-style: normal;
+}
+
+a {
+  background-color: transparent;
+  color: var(--primary);
+  text-decoration: none;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+a:hover, a:active, a:focus {
+  color: var(--primary-hover);
+  text-decoration: underline;
+}
+
+a:focus {
+  outline: none;
+  background-color: var(--primary-focus);
+}
+
+a.secondary {
+  color: var(--secondary);
+}
+
+a.secondary:hover, a.secondary:active, a.secondary:focus {
+  color: var(--secondary-hover);
+}
+
+a.secondary:focus {
+  background-color: var(--secondary-focus);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+  font-weight: 700;
+}
+
+h1 {
+  margin-bottom: 3rem;
+  color: var(--h1);
+  font-size: 2rem;
+}
+
+h2 {
+  margin-bottom: 2.625rem;
+  color: var(--h2);
+  font-size: 1.75rem;
+}
+
+h3 {
+  margin-bottom: 2.25rem;
+  color: var(--h3);
+  font-size: 1.5rem;
+}
+
+h4 {
+  margin-bottom: 1.875rem;
+  color: var(--h4);
+  font-size: 1.25rem;
+}
+
+h5 {
+  margin-bottom: 1.6875rem;
+  color: var(--h5);
+  font-size: 1.125rem;
+}
+
+h6 {
+  color: var(--h6);
+  font-size: 1rem;
+}
+
+header h1 {
+  font-size: 3rem;
+}
+
+header h2 {
+  font-size: 2.625rem;
+}
+
+header h3 {
+  font-size: 2.25rem;
+}
+
+header h4 {
+  font-size: 1.875rem;
+}
+
+header h5 {
+  font-size: 1.6875rem;
+}
+
+header h6 {
+  font-size: 1.5rem;
+}
+
+hgroup {
+  margin-bottom: 1.5rem;
+}
+
+hgroup h1,
+hgroup h2,
+hgroup h3,
+hgroup h4,
+hgroup h5,
+hgroup h6,
+hgroup p {
+  margin-bottom: 0;
+}
+
+p {
+  margin-bottom: 0.75rem;
+}
+
+small {
+  font-size: 85%;
+}
+
+@media (min-width: 576px) {
+  small {
+    font-size: 83%;
+  }
+}
+
+@media (min-width: 768px) {
+  small {
+    font-size: 81%;
+  }
+}
+
+@media (min-width: 992px) {
+  small {
+    font-size: 79%;
+  }
+}
+
+@media (min-width: 1200px) {
+  small {
+    font-size: 77%;
+  }
+}
+
+ul,
+ol {
+  padding-left: 1.5rem;
+}
+
+ul li,
+ol li {
+  margin-bottom: 0.75rem;
+}
+
+ul li {
+  list-style: square;
+}
+
+mark {
+  padding: .125rem .25rem;
+  background: var(--mark);
+  color: var(--text);
+  vertical-align: middle;
+}
+
+blockquote {
+  display: block;
+  margin: 3rem 0;
+  margin-right: -1rem;
+  margin-left: -1rem;
+  padding: 1rem;
+  border-left: 0.25rem solid var(--muted-border);
+}
+
+@media (min-width: 576px) {
+  blockquote {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
+blockquote footer {
+  margin-top: 0.75rem;
+  color: var(--muted-text);
+}
+
+abbr[title] {
+  border-bottom: 1px dotted;
+  text-decoration: none;
+  cursor: help;
+}
+
+ins {
+  color: var(--valid);
+  text-decoration: none;
+}
+
+del {
+  color: var(--invalid);
+}
+
+/**
+ * Form elements
+ */
+input,
+optgroup,
+select,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+input {
+  overflow: visible;
+}
+
+select {
+  text-transform: none;
+}
+
+legend {
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  color: inherit;
+  white-space: normal;
+}
+
+textarea {
+  overflow: auto;
+}
+
+[type="checkbox"],
+[type="radio"] {
+  padding: 0;
+}
+
+[type="number"]::-webkit-inner-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+fieldset {
+  margin: 0;
+  margin-bottom: 1.5rem;
+  padding: 0;
+  border: 0;
+}
+
+input:not([type="checkbox"]):not([type="radio"]),
+select,
+textarea,
+form small {
+  display: block;
+  width: 100%;
+}
+
+label,
+fieldset legend {
+  display: block;
+  margin-bottom: 0.125rem;
+  vertical-align: middle;
+}
+
+input,
+select,
+textarea {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: 1px solid var(--input-border);
+  border-radius: 0.25rem;
+  outline: none;
+  background-color: var(--input-background);
+  color: var(--text);
+  font-weight: normal;
+  vertical-align: middle;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+input::placeholder,
+select::placeholder,
+textarea::placeholder {
+  color: var(--muted-text);
+  opacity: 1;
+}
+
+input:active, input:focus,
+select:active,
+select:focus,
+textarea:active,
+textarea:focus {
+  border-color: var(--primary);
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  box-shadow: 0 0 0 0.2rem var(--primary-focus);
+}
+
+input[readonly], input[disabled],
+select[readonly],
+select[disabled],
+textarea[readonly],
+textarea[disabled] {
+  border-color: var(--muted-border);
+  box-shadow: none;
+}
+
+input[readonly] ~ label, input[disabled] ~ label,
+select[readonly] ~ label,
+select[disabled] ~ label,
+textarea[readonly] ~ label,
+textarea[disabled] ~ label {
+  color: var(--muted-text);
+}
+
+input[disabled],
+select[disabled],
+textarea[disabled] {
+  background-color: var(--muted-background);
+  opacity: .5;
+}
+
+input:focus:-moz-focusring,
+select:focus:-moz-focusring,
+textarea:focus:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 #000;
+}
+
+input:not([type="checkbox"]):not([type="radio"]),
+select,
+textarea {
+  margin-bottom: 1.5rem;
+  padding: 0.75rem 1rem;
+}
+
+input:not([type="checkbox"]):not([type="radio"])[invalid]:not(:focus), input:not([type="checkbox"]):not([type="radio"])[valid]:not(:focus),
+select[invalid]:not(:focus),
+select[valid]:not(:focus),
+textarea[invalid]:not(:focus),
+textarea[valid]:not(:focus) {
+  padding-right: 2rem;
+  background-position: center right .75rem;
+  background-repeat: no-repeat;
+  background-size: 1rem auto;
+}
+
+input:not([type="checkbox"]):not([type="radio"])[invalid]:not(:focus),
+select[invalid]:not(:focus),
+textarea[invalid]:not(:focus) {
+  border-bottom: 1px solid var(--invalid);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b94646' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+}
+
+input:not([type="checkbox"]):not([type="radio"])[valid]:not(:focus),
+select[valid]:not(:focus),
+textarea[valid]:not(:focus) {
+  border-bottom: 1px solid var(--valid);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+}
+
+select::-ms-expand {
+  border: 0;
+  background-color: transparent;
+}
+
+select:not([multiple]) {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-position: center right .75rem;
+  background-repeat: no-repeat;
+  background-size: 1rem auto;
+}
+
+[type="checkbox"],
+[type="radio"] {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  margin-right: .375rem;
+  margin-bottom: 0.125rem;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+[type="checkbox"]::-ms-check,
+[type="radio"]::-ms-check {
+  display: none;
+}
+
+[type="checkbox"]:checked,
+[type="radio"]:checked {
+  border-color: var(--primary);
+  background-color: var(--primary);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: .66rem auto;
+}
+
+[type="checkbox"] ~ label,
+[type="radio"] ~ label {
+  display: inline-block;
+  margin-right: .375rem;
+  margin-bottom: 0;
+  cursor: pointer;
+}
+
+[type="radio"] {
+  border-radius: 50%;
+}
+
+[type="radio"]:checked {
+  border-width: .33rem;
+  border-color: var(--primary);
+  background-color: var(--primary-inverse);
+  background-image: none;
+}
+
+[type="checkbox"][role="switch"] {
+  width: 1.85rem;
+  height: 1rem;
+  border: 2px solid var(--input-border);
+  border-radius: 1rem;
+  background-color: var(--input-border);
+  line-height: 1rem;
+}
+
+[type="checkbox"][role="switch"]:before {
+  display: block;
+  width: calc(1rem - 4px);
+  height: 100%;
+  border-radius: 50%;
+  background-color: var(--primary-inverse);
+  content: '';
+  transition: margin 0.1s ease-in-out;
+}
+
+[type="checkbox"][role="switch"]:checked {
+  border-color: var(--primary);
+  background-color: var(--primary);
+  background-image: none;
+}
+
+[type="checkbox"][role="switch"]:checked::before {
+  margin-right: 0;
+  margin-left: calc(0.925rem - 2px);
+}
+
+form small {
+  color: var(--muted-text);
+}
+
+input + small {
+  margin-top: -1rem;
+  margin-bottom: 1.5rem;
+}
+
+label > input:not([type="checkbox"]):not([type="radio"]),
+label > select,
+label > textarea {
+  margin-top: 0.125rem;
+}
+
+/**
+ * Button
+ */
+button {
+  margin: 0;
+  overflow: visible;
+  font-family: inherit;
+  text-transform: none;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+button {
+  display: block;
+  width: 100%;
+  margin-bottom: 1.5rem;
+}
+
+a[role="button"] {
+  display: inline-block;
+  text-decoration: none;
+}
+
+button,
+input[type="submit"],
+a[role="button"] {
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--primary);
+  border-radius: 0.25rem;
+  outline: none;
+  background-color: var(--primary);
+  color: var(--primary-inverse);
+  font-size: 1rem;
+  font-weight: normal;
+  line-height: 1.5;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+button:hover, button:active, button:focus,
+input[type="submit"]:hover,
+input[type="submit"]:active,
+input[type="submit"]:focus,
+a[role="button"]:hover,
+a[role="button"]:active,
+a[role="button"]:focus {
+  border: 1px solid var(--primary-hover);
+  background-color: var(--primary-hover);
+}
+
+button:focus,
+input[type="submit"]:focus,
+a[role="button"]:focus {
+  box-shadow: 0 0 0 0.2rem var(--primary-focus);
+}
+
+input[type="reset"] {
+  cursor: pointer;
+}
+
+button.secondary,
+input.secondary[type="submit"],
+input[type="reset"],
+a.secondary[role="button"] {
+  border: 1px solid var(--secondary);
+  background-color: var(--secondary);
+  color: var(--secondary-inverse);
+}
+
+button.secondary:hover, button.secondary:active, button.secondary:focus,
+input.secondary[type="submit"]:hover,
+input.secondary[type="submit"]:active,
+input.secondary[type="submit"]:focus,
+input[type="reset"]:hover,
+input[type="reset"]:active,
+input[type="reset"]:focus,
+a.secondary[role="button"]:hover,
+a.secondary[role="button"]:active,
+a.secondary[role="button"]:focus {
+  border: 1px solid var(--secondary-hover);
+  background-color: var(--secondary-hover);
+}
+
+button.secondary:focus,
+input.secondary[type="submit"]:focus,
+input[type="reset"]:focus,
+a.secondary[role="button"]:focus {
+  box-shadow: 0 0 0 0.2rem var(--secondary-focus);
+}
+
+button.outline,
+input.outline[type="submit"],
+a.outline[role="button"] {
+  border: 1px solid var(--primary);
+  background-color: transparent;
+  color: var(--primary);
+}
+
+button.outline:hover, button.outline:active, button.outline:focus,
+input.outline[type="submit"]:hover,
+input.outline[type="submit"]:active,
+input.outline[type="submit"]:focus,
+a.outline[role="button"]:hover,
+a.outline[role="button"]:active,
+a.outline[role="button"]:focus {
+  border: 1px solid var(--primary-hover);
+  color: var(--primary-hover);
+}
+
+button.outline.secondary,
+input.outline.secondary[type="submit"],
+input.outline[type="reset"],
+a.outline.secondary[role="button"] {
+  border: 1px solid var(--secondary);
+  background-color: transparent;
+  color: var(--secondary);
+}
+
+button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus,
+input.outline.secondary[type="submit"]:hover,
+input.outline.secondary[type="submit"]:active,
+input.outline.secondary[type="submit"]:focus,
+input.outline[type="reset"]:hover,
+input.outline[type="reset"]:active,
+input.outline[type="reset"]:focus,
+a.outline.secondary[role="button"]:hover,
+a.outline.secondary[role="button"]:active,
+a.outline.secondary[role="button"]:focus {
+  border: 1px solid var(--secondary-hover);
+  color: var(--secondary-hover);
+}
+
+button.outline.secondary:focus,
+input.outline.secondary[type="submit"]:focus,
+input.outline[type="reset"]:focus,
+a.outline.secondary[role="button"]:focus {
+  box-shadow: 0 0 0 0.2rem var(--secondary-focus);
+}
+
+button[disabled],
+input[type="submit"][disabled],
+input[type="reset"][disabled],
+a[role="button"][disabled] {
+  opacity: .5;
+  pointer-events: none;
+}
+
+/**
+ * Table
+ */
+table {
+  width: 100%;
+  border-spacing: 0;
+  background: var(--table-background);
+}
+
+th,
+td {
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid var(--table-border);
+  color: var(--muted-text);
+  font-weight: 400;
+  text-align: left;
+  font-size: 0.875rem;
+}
+
+th,
+thead td {
+  color: var(--text);
+  font-weight: bolder;
+  font-size: 1rem;
+}
+
+thead th,
+thead td {
+  border-bottom: 3px solid var(--table-border);
+}
+
+tbody tr:nth-child(odd) {
+  background-color: rgba(237, 241, 243, 0.02);
+}
+
+thead tr,
+tbody tr:nth-child(even) {
+  background-color: rgba(27, 42, 50, 0.02);
+}
+
+/**
+ * Code
+ */
+pre,
+code,
+kbd,
+samp {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 1rem;
+}
+
+pre,
+code,
+kbd {
+  background: var(--code-inlined);
+  color: var(--muted-text);
+  font-size: 85%;
+  font-weight: 400;
+  line-height: 1;
+}
+
+@media (min-width: 576px) {
+  pre,
+  code,
+  kbd {
+    font-size: 83%;
+  }
+}
+
+@media (min-width: 768px) {
+  pre,
+  code,
+  kbd {
+    font-size: 81%;
+  }
+}
+
+@media (min-width: 992px) {
+  pre,
+  code,
+  kbd {
+    font-size: 79%;
+  }
+}
+
+@media (min-width: 1200px) {
+  pre,
+  code,
+  kbd {
+    font-size: 77%;
+  }
+}
+
+code,
+kbd {
+  display: inline-block;
+  padding: .375rem .5rem;
+  border-radius: 0.25rem;
+}
+
+pre {
+  display: block;
+  margin-right: -1rem;
+  margin-left: -1rem;
+  padding: 2rem 1rem;
+  overflow-x: auto;
+  border-left: 0.25rem solid var(--code-border);
+  background: var(--code-background);
+}
+
+@media (min-width: 576px) {
+  pre {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
+pre > code {
+  display: block;
+  padding: 0;
+  background: transparent;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+code b {
+  color: var(--code-color-1);
+  font-weight: normal;
+}
+
+code i {
+  color: var(--code-color-2);
+  font-style: normal;
+}
+
+code u {
+  color: var(--text);
+  text-decoration: none;
+}
+
+kbd {
+  background-color: var(--secondary);
+  color: var(--secondary-inverse);
+  font-weight: bolder;
+}
+
+/**
+ * Miscs
+ */
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+  border: none;
+  border-top: 1px solid var(--muted-border);
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[hidden],
+template {
+  display: none;
+}
+
+/**
+ * Accordion (<details>)
+ * Inspiration: https://codepen.io/koca/pen/RyeLLV
+ */
+details {
+  display: block;
+  margin-bottom: 1.5rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--muted-border);
+}
+
+details summary {
+  list-style-type: none;
+  cursor: pointer;
+  line-height: 1rem;
+}
+
+details summary::-webkit-details-marker {
+  display: none;
+}
+
+details summary::marker {
+  display: none;
+}
+
+details summary::-moz-list-bullet {
+  list-style-type: none;
+}
+
+details summary::after {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  float: right;
+  transform: rotate(-90deg);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 1rem auto;
+  content: '';
+  transition: transform 0.2s ease-in-out;
+}
+
+details summary:focus {
+  outline: none;
+}
+
+details[open] summary {
+  margin-bottom: 0.375rem;
+  color: var(--muted-text);
+}
+
+details[open] summary::after {
+  transform: rotate(0);
+}
+
+/**
+ * Card (<article>)
+ */
+article {
+  margin: 2rem;
+  margin-right: -1rem;
+  margin-left: -1rem;
+  padding: 2rem 1rem;
+  background: var(--card-background);
+  box-shadow: var(--card-shadow);
+}
+
+@media (min-width: 576px) {
+  article {
+    margin: 2.5rem 0;
+    padding: 2.5rem;
+    border-radius: 0.25rem;
+  }
+}
+
+@media (min-width: 768px) {
+  article {
+    margin: 3rem 0;
+    padding: 3rem;
+  }
+}
+
+@media (min-width: 992px) {
+  article {
+    margin: 3.5rem 0;
+    padding: 3.5rem;
+  }
+}
+
+@media (min-width: 1200px) {
+  article {
+    margin: 4rem 0;
+    padding: 4rem;
+  }
+}
+
+/**
+ * Nav
+ */
+nav,
+nav ul {
+  display: flex;
+}
+
+nav {
+  justify-content: space-between;
+}
+
+nav ul {
+  align-items: center;
+  margin-bottom: 0;
+  padding: 0;
+  list-style: none;
+}
+
+nav ul:first-of-type {
+  margin-left: -0.5rem;
+}
+
+nav ul:last-of-type {
+  margin-right: -0.5rem;
+}
+
+nav li {
+  display: inline-block;
+  margin: 0;
+  padding: 1rem 0.5rem;
+}
+
+nav li > *,
+nav li > input:not([type="checkbox"]):not([type="radio"]) {
+  margin-bottom: 0;
+}
+
+nav a {
+  display: block;
+  margin: -1rem -0.5rem;
+  padding: 1rem 0.5rem;
+  border-radius: 0.25rem;
+}
+
+nav a:hover, nav a:active, nav a:focus {
+  text-decoration: none;
+}
+
+aside nav,
+aside ul,
+aside li {
+  display: block;
+}
+
+aside li {
+  padding: 0.5rem;
+}
+
+aside li a {
+  margin: -0.5rem;
+  padding: 0.5rem;
+}
+
+/**
+ * Tooltip ([data-tooltip])
+ */
+[data-tooltip] {
+  position: relative;
+}
+
+[data-tooltip]:not(a):not(button):not(input) {
+  border-bottom: 1px dotted;
+  text-decoration: none;
+  cursor: help;
+}
+
+[data-tooltip]::before, [data-tooltip]::after {
+  display: block;
+  z-index: 99;
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  padding: .25rem .5rem;
+  overflow: hidden;
+  transform: translate(-50%, -0.25rem);
+  border-radius: 0.25rem;
+  background: var(--secondary);
+  color: var(--secondary-inverse);
+  font-size: .85rem;
+  font-style: normal;
+  font-weight: normal;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  content: attr(data-tooltip);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease-in-out;
+}
+
+[data-tooltip]::after {
+  padding: 0;
+  transform: translate(-50%, 0rem);
+  border-top: .3rem solid;
+  border-right: .3rem solid transparent;
+  border-left: .3rem solid transparent;
+  border-radius: 0;
+  background-color: transparent;
+  color: var(--secondary);
+  content: '';
+}
+
+[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
+  opacity: 1;
+}
diff --git a/css/pico.fluid.classless.css b/css/pico.fluid.classless.css
new file mode 100644
index 00000000..c7a399cd
--- /dev/null
+++ b/css/pico.fluid.classless.css
@@ -0,0 +1,1286 @@
+/*!
+ * Pico.css v0.1.0 (https://picocss.com)
+ * Copyright 2019 - Licensed under MIT
+ */
+/**
+ * Light theme (Default)
+ * Can be forced with data-theme="light"
+ */
+[data-theme="light"],
+:root:not([data-theme="dark"]) {
+  --background:        #FFF;
+  --text:              #415762;
+  --h1:                #1b2a32;
+  --h2:                #2c4049;
+  --h3:                #415762;
+  --h4:                #596e78;
+  --h5:                #73848c;
+  --h6:                #8a9ba3;
+  --mark:              rgba(255, 223, 128, 0.5);
+  --primary:            #1086c1;
+  --primary-hover:      #086a9b;
+  --primary-focus:      rgba(16, 134, 193, 0.125);
+  --primary-inverse:    #FFF;
+  --secondary:         #374b56;
+  --secondary-hover:   #23353e;
+  --secondary-focus:   rgba(55, 75, 86, 0.125);
+  --secondary-inverse: #FFF;
+  --input-background:  #FFF;
+  --input-border:      #c8d2d8;
+  --valid:             #288a6a;
+  --invalid:           #b94646;
+  --muted-text:        #7e8f98;
+  --muted-background:  #edf1f3;
+  --muted-border:      #edf1f3;
+  --card-background:   #FFF;
+  --card-shadow:       0 0.125rem 1rem rgba(27, 42, 50, 0.04), 0 0.125rem 2rem rgba(27, 42, 50, 0.08), 0 0 0 0.0625rem rgba(27, 42, 50, 0.024);
+  --code-background:   #f3f5f7;
+  --code-border:       #d5dde2;
+  --code-inlined:      #edf1f3;
+  --code-color-1:      #9f6060;
+  --code-color-2:      #2f7ca2;
+  --badge-background:  #73848c;
+  --badge-text:        #FFF;
+  --table-background:  #FFF;
+  --table-border:      rgba(237, 241, 243, 0.75);
+}
+
+/**
+ * Dark theme (Auto)
+ * Automatically enabled if user has Dark mode enabled
+ */
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --background:        #10191e;
+    --text:              #a2b1b9;
+    --h1:                #edf1f3;
+    --h2:                #d5dde2;
+    --h3:                #bbc7ce;
+    --h4:                #a2b1b9;
+    --h5:                #8a9ba3;
+    --h6:                #73848c;
+    --mark:              rgba(255, 223, 128, 0.25);
+    --primary:            #1086c1;
+    --primary-hover:      #1aa2e6;
+    --primary-focus:      rgba(16, 134, 193, 0.25);
+    --primary-inverse:    #FFF;
+    --secondary:         #bbc7ce;
+    --secondary-hover:   #edf1f3;
+    --secondary-focus:   rgba(187, 199, 206, 0.25);
+    --secondary-inverse: #1b2a32;
+    --input-background:  #10191e;
+    --input-border:      #374b56;
+    --valid:             #1f7a5c;
+    --invalid:           #943838;
+    --valid:             #1f7a5c;
+    --invalid:           #943838;
+    --muted-text:        #73848c;
+    --muted-background:  #10191e;
+    --muted-border:      #23353e;
+    --card-background:   #17242b;
+    --card-shadow:       0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);
+    --code-background:   #141f24;
+    --code-border:       #23353e;
+    --code-inlined:      rgba(65, 87, 98, 0.25);
+    --code-color-1:      #ac5353;
+    --code-color-2:      #4d91b3;
+    --badge-background:  #2c4049;
+    --badge-text:        #a2b1b9;
+    --table-background:  #141f24;
+    --table-border:      #10191e;
+  }
+}
+
+/**
+ * Dark theme (Forced)
+ * Enabled if forced with data-theme="dark"
+ */
+[data-theme="dark"] {
+  --background:        #10191e;
+  --text:              #a2b1b9;
+  --h1:                #edf1f3;
+  --h2:                #d5dde2;
+  --h3:                #bbc7ce;
+  --h4:                #a2b1b9;
+  --h5:                #8a9ba3;
+  --h6:                #73848c;
+  --mark:              rgba(255, 223, 128, 0.25);
+  --primary:            #1086c1;
+  --primary-hover:      #1aa2e6;
+  --primary-focus:      rgba(16, 134, 193, 0.25);
+  --primary-inverse:    #FFF;
+  --secondary:         #bbc7ce;
+  --secondary-hover:   #edf1f3;
+  --secondary-focus:   rgba(187, 199, 206, 0.25);
+  --secondary-inverse: #1b2a32;
+  --input-background:  #10191e;
+  --input-border:      #374b56;
+  --valid:             #1f7a5c;
+  --invalid:           #943838;
+  --valid:             #1f7a5c;
+  --invalid:           #943838;
+  --muted-text:        #73848c;
+  --muted-background:  #10191e;
+  --muted-border:      #23353e;
+  --card-background:   #17242b;
+  --card-shadow:       0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);
+  --code-background:   #141f24;
+  --code-border:       #23353e;
+  --code-inlined:      rgba(65, 87, 98, 0.25);
+  --code-color-1:      #ac5353;
+  --code-color-2:      #4d91b3;
+  --badge-background:  #2c4049;
+  --badge-text:        #a2b1b9;
+  --table-background:  #141f24;
+  --table-border:      #10191e;
+}
+
+/**
+ * Document
+ * Content-box & Responsive typography
+ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  background: var(--background);
+  color: var(--text);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  text-rendering: optimizeLegibility;
+}
+
+@media (min-width: 576px) {
+  html {
+    font-size: 17px;
+  }
+}
+
+@media (min-width: 768px) {
+  html {
+    font-size: 18px;
+  }
+}
+
+@media (min-width: 992px) {
+  html {
+    font-size: 19px;
+  }
+}
+
+@media (min-width: 1200px) {
+  html {
+    font-size: 20px;
+  }
+}
+
+/**
+ * Sectioning
+ * Container and responsive spacings for header, main, footer
+ */
+main {
+  display: block;
+}
+
+body {
+  width: 100%;
+  margin: 0;
+}
+
+body > header,
+body > main,
+body > footer {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 2rem 1rem;
+}
+
+@media (min-width: 576px) {
+  body > header,
+  body > main,
+  body > footer {
+    padding: 2.5rem 1rem;
+  }
+}
+
+@media (min-width: 768px) {
+  body > header,
+  body > main,
+  body > footer {
+    padding: 3rem 1rem;
+  }
+}
+
+@media (min-width: 992px) {
+  body > header,
+  body > main,
+  body > footer {
+    padding: 3.5rem 1rem;
+  }
+}
+
+@media (min-width: 1200px) {
+  body > header,
+  body > main,
+  body > footer {
+    padding: 4rem 1rem;
+  }
+}
+
+/**
+ * Section
+ * Responsive spacings for section
+ */
+section {
+  margin-bottom: 4rem;
+}
+
+@media (min-width: 576px) {
+  section {
+    margin-bottom: 5rem;
+  }
+}
+
+@media (min-width: 768px) {
+  section {
+    margin-bottom: 6rem;
+  }
+}
+
+@media (min-width: 992px) {
+  section {
+    margin-bottom: 7rem;
+  }
+}
+
+@media (min-width: 1200px) {
+  section {
+    margin-bottom: 8rem;
+  }
+}
+
+/**
+ * Horizontal scroller (<figure>)
+ */
+figure {
+  display: block;
+  margin-right: -1rem;
+  margin-left: -1rem;
+  padding: 0;
+  overflow-x: auto;
+}
+
+figure figcaption {
+  color: var(--muted-text);
+  font-size: 87.5%;
+  padding: 0 1rem;
+}
+
+@media (min-width: 576px) {
+  figure {
+    margin-right: 0;
+    margin-left: 0;
+  }
+  figure figcaption {
+    padding: 0;
+  }
+}
+
+/**
+ * Typography
+ */
+b,
+strong {
+  font-weight: border;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: .75rem;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25rem;
+}
+
+sup {
+  top: -0.5rem;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  border-style: none;
+}
+
+svg,
+img {
+  vertical-align: text-bottom;
+}
+
+address,
+blockquote,
+dl,
+figure,
+form,
+ol,
+p,
+pre,
+table,
+ul {
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+  color: var(--text);
+  font-size: 1rem;
+  font-style: normal;
+}
+
+a {
+  background-color: transparent;
+  color: var(--primary);
+  text-decoration: none;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+a:hover, a:active, a:focus {
+  color: var(--primary-hover);
+  text-decoration: underline;
+}
+
+a:focus {
+  outline: none;
+  background-color: var(--primary-focus);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+  font-weight: 700;
+}
+
+h1 {
+  margin-bottom: 3rem;
+  color: var(--h1);
+  font-size: 2rem;
+}
+
+h2 {
+  margin-bottom: 2.625rem;
+  color: var(--h2);
+  font-size: 1.75rem;
+}
+
+h3 {
+  margin-bottom: 2.25rem;
+  color: var(--h3);
+  font-size: 1.5rem;
+}
+
+h4 {
+  margin-bottom: 1.875rem;
+  color: var(--h4);
+  font-size: 1.25rem;
+}
+
+h5 {
+  margin-bottom: 1.6875rem;
+  color: var(--h5);
+  font-size: 1.125rem;
+}
+
+h6 {
+  color: var(--h6);
+  font-size: 1rem;
+}
+
+header h1 {
+  font-size: 3rem;
+}
+
+header h2 {
+  font-size: 2.625rem;
+}
+
+header h3 {
+  font-size: 2.25rem;
+}
+
+header h4 {
+  font-size: 1.875rem;
+}
+
+header h5 {
+  font-size: 1.6875rem;
+}
+
+header h6 {
+  font-size: 1.5rem;
+}
+
+hgroup {
+  margin-bottom: 1.5rem;
+}
+
+hgroup h1,
+hgroup h2,
+hgroup h3,
+hgroup h4,
+hgroup h5,
+hgroup h6,
+hgroup p {
+  margin-bottom: 0;
+}
+
+p {
+  margin-bottom: 0.75rem;
+}
+
+small {
+  font-size: 85%;
+}
+
+@media (min-width: 576px) {
+  small {
+    font-size: 83%;
+  }
+}
+
+@media (min-width: 768px) {
+  small {
+    font-size: 81%;
+  }
+}
+
+@media (min-width: 992px) {
+  small {
+    font-size: 79%;
+  }
+}
+
+@media (min-width: 1200px) {
+  small {
+    font-size: 77%;
+  }
+}
+
+ul,
+ol {
+  padding-left: 1.5rem;
+}
+
+ul li,
+ol li {
+  margin-bottom: 0.75rem;
+}
+
+ul li {
+  list-style: square;
+}
+
+mark {
+  padding: .125rem .25rem;
+  background: var(--mark);
+  color: var(--text);
+  vertical-align: middle;
+}
+
+blockquote {
+  display: block;
+  margin: 3rem 0;
+  margin-right: -1rem;
+  margin-left: -1rem;
+  padding: 1rem;
+  border-left: 0.25rem solid var(--muted-border);
+}
+
+@media (min-width: 576px) {
+  blockquote {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
+blockquote footer {
+  margin-top: 0.75rem;
+  color: var(--muted-text);
+}
+
+abbr[title] {
+  border-bottom: 1px dotted;
+  text-decoration: none;
+  cursor: help;
+}
+
+ins {
+  color: var(--valid);
+  text-decoration: none;
+}
+
+del {
+  color: var(--invalid);
+}
+
+/**
+ * Form elements
+ */
+input,
+optgroup,
+select,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+input {
+  overflow: visible;
+}
+
+select {
+  text-transform: none;
+}
+
+legend {
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  color: inherit;
+  white-space: normal;
+}
+
+textarea {
+  overflow: auto;
+}
+
+[type="checkbox"],
+[type="radio"] {
+  padding: 0;
+}
+
+[type="number"]::-webkit-inner-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+fieldset {
+  margin: 0;
+  margin-bottom: 1.5rem;
+  padding: 0;
+  border: 0;
+}
+
+input:not([type="checkbox"]):not([type="radio"]),
+select,
+textarea,
+form small {
+  display: block;
+  width: 100%;
+}
+
+label,
+fieldset legend {
+  display: block;
+  margin-bottom: 0.125rem;
+  vertical-align: middle;
+}
+
+input,
+select,
+textarea {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: 1px solid var(--input-border);
+  border-radius: 0.25rem;
+  outline: none;
+  background-color: var(--input-background);
+  color: var(--text);
+  font-weight: normal;
+  vertical-align: middle;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+input::placeholder,
+select::placeholder,
+textarea::placeholder {
+  color: var(--muted-text);
+  opacity: 1;
+}
+
+input:active, input:focus,
+select:active,
+select:focus,
+textarea:active,
+textarea:focus {
+  border-color: var(--primary);
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  box-shadow: 0 0 0 0.2rem var(--primary-focus);
+}
+
+input[readonly], input[disabled],
+select[readonly],
+select[disabled],
+textarea[readonly],
+textarea[disabled] {
+  border-color: var(--muted-border);
+  box-shadow: none;
+}
+
+input[readonly] ~ label, input[disabled] ~ label,
+select[readonly] ~ label,
+select[disabled] ~ label,
+textarea[readonly] ~ label,
+textarea[disabled] ~ label {
+  color: var(--muted-text);
+}
+
+input[disabled],
+select[disabled],
+textarea[disabled] {
+  background-color: var(--muted-background);
+  opacity: .5;
+}
+
+input:focus:-moz-focusring,
+select:focus:-moz-focusring,
+textarea:focus:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 #000;
+}
+
+input:not([type="checkbox"]):not([type="radio"]),
+select,
+textarea {
+  margin-bottom: 1.5rem;
+  padding: 0.75rem 1rem;
+}
+
+input:not([type="checkbox"]):not([type="radio"])[invalid]:not(:focus), input:not([type="checkbox"]):not([type="radio"])[valid]:not(:focus),
+select[invalid]:not(:focus),
+select[valid]:not(:focus),
+textarea[invalid]:not(:focus),
+textarea[valid]:not(:focus) {
+  padding-right: 2rem;
+  background-position: center right .75rem;
+  background-repeat: no-repeat;
+  background-size: 1rem auto;
+}
+
+input:not([type="checkbox"]):not([type="radio"])[invalid]:not(:focus),
+select[invalid]:not(:focus),
+textarea[invalid]:not(:focus) {
+  border-bottom: 1px solid var(--invalid);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b94646' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+}
+
+input:not([type="checkbox"]):not([type="radio"])[valid]:not(:focus),
+select[valid]:not(:focus),
+textarea[valid]:not(:focus) {
+  border-bottom: 1px solid var(--valid);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+}
+
+select::-ms-expand {
+  border: 0;
+  background-color: transparent;
+}
+
+select:not([multiple]) {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-position: center right .75rem;
+  background-repeat: no-repeat;
+  background-size: 1rem auto;
+}
+
+[type="checkbox"],
+[type="radio"] {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  margin-right: .375rem;
+  margin-bottom: 0.125rem;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+[type="checkbox"]::-ms-check,
+[type="radio"]::-ms-check {
+  display: none;
+}
+
+[type="checkbox"]:checked,
+[type="radio"]:checked {
+  border-color: var(--primary);
+  background-color: var(--primary);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: .66rem auto;
+}
+
+[type="checkbox"] ~ label,
+[type="radio"] ~ label {
+  display: inline-block;
+  margin-right: .375rem;
+  margin-bottom: 0;
+  cursor: pointer;
+}
+
+[type="radio"] {
+  border-radius: 50%;
+}
+
+[type="radio"]:checked {
+  border-width: .33rem;
+  border-color: var(--primary);
+  background-color: var(--primary-inverse);
+  background-image: none;
+}
+
+[type="checkbox"][role="switch"] {
+  width: 1.85rem;
+  height: 1rem;
+  border: 2px solid var(--input-border);
+  border-radius: 1rem;
+  background-color: var(--input-border);
+  line-height: 1rem;
+}
+
+[type="checkbox"][role="switch"]:before {
+  display: block;
+  width: calc(1rem - 4px);
+  height: 100%;
+  border-radius: 50%;
+  background-color: var(--primary-inverse);
+  content: '';
+  transition: margin 0.1s ease-in-out;
+}
+
+[type="checkbox"][role="switch"]:checked {
+  border-color: var(--primary);
+  background-color: var(--primary);
+  background-image: none;
+}
+
+[type="checkbox"][role="switch"]:checked::before {
+  margin-right: 0;
+  margin-left: calc(0.925rem - 2px);
+}
+
+form small {
+  color: var(--muted-text);
+}
+
+input + small {
+  margin-top: -1rem;
+  margin-bottom: 1.5rem;
+}
+
+label > input:not([type="checkbox"]):not([type="radio"]),
+label > select,
+label > textarea {
+  margin-top: 0.125rem;
+}
+
+/**
+ * Button
+ */
+button {
+  margin: 0;
+  overflow: visible;
+  font-family: inherit;
+  text-transform: none;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+button {
+  display: block;
+  width: 100%;
+  margin-bottom: 1.5rem;
+}
+
+a[role="button"] {
+  display: inline-block;
+  text-decoration: none;
+}
+
+button,
+input[type="submit"],
+a[role="button"] {
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--primary);
+  border-radius: 0.25rem;
+  outline: none;
+  background-color: var(--primary);
+  color: var(--primary-inverse);
+  font-size: 1rem;
+  font-weight: normal;
+  line-height: 1.5;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+button:hover, button:active, button:focus,
+input[type="submit"]:hover,
+input[type="submit"]:active,
+input[type="submit"]:focus,
+a[role="button"]:hover,
+a[role="button"]:active,
+a[role="button"]:focus {
+  border: 1px solid var(--primary-hover);
+  background-color: var(--primary-hover);
+}
+
+button:focus,
+input[type="submit"]:focus,
+a[role="button"]:focus {
+  box-shadow: 0 0 0 0.2rem var(--primary-focus);
+}
+
+input[type="reset"] {
+  cursor: pointer;
+}
+
+button[disabled],
+input[type="submit"][disabled],
+input[type="reset"][disabled],
+a[role="button"][disabled] {
+  opacity: .5;
+  pointer-events: none;
+}
+
+/**
+ * Table
+ */
+table {
+  width: 100%;
+  border-spacing: 0;
+  background: var(--table-background);
+}
+
+th,
+td {
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid var(--table-border);
+  color: var(--muted-text);
+  font-weight: 400;
+  text-align: left;
+  font-size: 0.875rem;
+}
+
+th,
+thead td {
+  color: var(--text);
+  font-weight: bolder;
+  font-size: 1rem;
+}
+
+thead th,
+thead td {
+  border-bottom: 3px solid var(--table-border);
+}
+
+tbody tr:nth-child(odd) {
+  background-color: rgba(237, 241, 243, 0.02);
+}
+
+thead tr,
+tbody tr:nth-child(even) {
+  background-color: rgba(27, 42, 50, 0.02);
+}
+
+/**
+ * Code
+ */
+pre,
+code,
+kbd,
+samp {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 1rem;
+}
+
+pre,
+code,
+kbd {
+  background: var(--code-inlined);
+  color: var(--muted-text);
+  font-size: 85%;
+  font-weight: 400;
+  line-height: 1;
+}
+
+@media (min-width: 576px) {
+  pre,
+  code,
+  kbd {
+    font-size: 83%;
+  }
+}
+
+@media (min-width: 768px) {
+  pre,
+  code,
+  kbd {
+    font-size: 81%;
+  }
+}
+
+@media (min-width: 992px) {
+  pre,
+  code,
+  kbd {
+    font-size: 79%;
+  }
+}
+
+@media (min-width: 1200px) {
+  pre,
+  code,
+  kbd {
+    font-size: 77%;
+  }
+}
+
+code,
+kbd {
+  display: inline-block;
+  padding: .375rem .5rem;
+  border-radius: 0.25rem;
+}
+
+pre {
+  display: block;
+  margin-right: -1rem;
+  margin-left: -1rem;
+  padding: 2rem 1rem;
+  overflow-x: auto;
+  border-left: 0.25rem solid var(--code-border);
+  background: var(--code-background);
+}
+
+@media (min-width: 576px) {
+  pre {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
+pre > code {
+  display: block;
+  padding: 0;
+  background: transparent;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+code b {
+  color: var(--code-color-1);
+  font-weight: normal;
+}
+
+code i {
+  color: var(--code-color-2);
+  font-style: normal;
+}
+
+code u {
+  color: var(--text);
+  text-decoration: none;
+}
+
+kbd {
+  background-color: var(--secondary);
+  color: var(--secondary-inverse);
+  font-weight: bolder;
+}
+
+/**
+ * Miscs
+ */
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+  border: none;
+  border-top: 1px solid var(--muted-border);
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[hidden],
+template {
+  display: none;
+}
+
+/**
+ * Accordion (<details>)
+ * Inspiration: https://codepen.io/koca/pen/RyeLLV
+ */
+details {
+  display: block;
+  margin-bottom: 1.5rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--muted-border);
+}
+
+details summary {
+  list-style-type: none;
+  cursor: pointer;
+  line-height: 1rem;
+}
+
+details summary::-webkit-details-marker {
+  display: none;
+}
+
+details summary::marker {
+  display: none;
+}
+
+details summary::-moz-list-bullet {
+  list-style-type: none;
+}
+
+details summary::after {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  float: right;
+  transform: rotate(-90deg);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 1rem auto;
+  content: '';
+  transition: transform 0.2s ease-in-out;
+}
+
+details summary:focus {
+  outline: none;
+}
+
+details[open] summary {
+  margin-bottom: 0.375rem;
+  color: var(--muted-text);
+}
+
+details[open] summary::after {
+  transform: rotate(0);
+}
+
+/**
+ * Card (<article>)
+ */
+article {
+  margin: 2rem;
+  margin-right: -1rem;
+  margin-left: -1rem;
+  padding: 2rem 1rem;
+  background: var(--card-background);
+  box-shadow: var(--card-shadow);
+}
+
+@media (min-width: 576px) {
+  article {
+    margin: 2.5rem 0;
+    padding: 2.5rem;
+    border-radius: 0.25rem;
+  }
+}
+
+@media (min-width: 768px) {
+  article {
+    margin: 3rem 0;
+    padding: 3rem;
+  }
+}
+
+@media (min-width: 992px) {
+  article {
+    margin: 3.5rem 0;
+    padding: 3.5rem;
+  }
+}
+
+@media (min-width: 1200px) {
+  article {
+    margin: 4rem 0;
+    padding: 4rem;
+  }
+}
+
+/**
+ * Nav
+ */
+nav,
+nav ul {
+  display: flex;
+}
+
+nav {
+  justify-content: space-between;
+}
+
+nav ul {
+  align-items: center;
+  margin-bottom: 0;
+  padding: 0;
+  list-style: none;
+}
+
+nav ul:first-of-type {
+  margin-left: -0.5rem;
+}
+
+nav ul:last-of-type {
+  margin-right: -0.5rem;
+}
+
+nav li {
+  display: inline-block;
+  margin: 0;
+  padding: 1rem 0.5rem;
+}
+
+nav li > *,
+nav li > input:not([type="checkbox"]):not([type="radio"]) {
+  margin-bottom: 0;
+}
+
+nav a {
+  display: block;
+  margin: -1rem -0.5rem;
+  padding: 1rem 0.5rem;
+  border-radius: 0.25rem;
+}
+
+nav a:hover, nav a:active, nav a:focus {
+  text-decoration: none;
+}
+
+aside nav,
+aside ul,
+aside li {
+  display: block;
+}
+
+aside li {
+  padding: 0.5rem;
+}
+
+aside li a {
+  margin: -0.5rem;
+  padding: 0.5rem;
+}
+
+/**
+ * Tooltip ([data-tooltip])
+ */
+[data-tooltip] {
+  position: relative;
+}
+
+[data-tooltip]:not(a):not(button):not(input) {
+  border-bottom: 1px dotted;
+  text-decoration: none;
+  cursor: help;
+}
+
+[data-tooltip]::before, [data-tooltip]::after {
+  display: block;
+  z-index: 99;
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  padding: .25rem .5rem;
+  overflow: hidden;
+  transform: translate(-50%, -0.25rem);
+  border-radius: 0.25rem;
+  background: var(--secondary);
+  color: var(--secondary-inverse);
+  font-size: .85rem;
+  font-style: normal;
+  font-weight: normal;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  content: attr(data-tooltip);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease-in-out;
+}
+
+[data-tooltip]::after {
+  padding: 0;
+  transform: translate(-50%, 0rem);
+  border-top: .3rem solid;
+  border-right: .3rem solid transparent;
+  border-left: .3rem solid transparent;
+  border-radius: 0;
+  background-color: transparent;
+  color: var(--secondary);
+  content: '';
+}
+
+[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
+  opacity: 1;
+}
diff --git a/css/pico.fluid.classless.min.css b/css/pico.fluid.classless.min.css
new file mode 100644
index 00000000..02ba28e6
--- /dev/null
+++ b/css/pico.fluid.classless.min.css
@@ -0,0 +1,4 @@
+/*!
+ * Pico.css v0.1.0 (https://picocss.com)
+ * Copyright 2019 - Licensed under MIT
+ */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415762;--h1:#1b2a32;--h2:#2c4049;--h3:#415762;--h4:#596e78;--h5:#73848c;--h6:#8a9ba3;--mark:rgba(255, 223, 128, 0.5);--action:#1086c1;--action-hover:#086a9b;--action-focus:rgba(16, 134, 193, 0.125);--action-inverse:#FFF;--secondary:#374b56;--secondary-hover:#23353e;--secondary-focus:rgba(55, 75, 86, 0.125);--secondary-inverse:#FFF;--input-background:#FFF;--input-border:#c8d2d8;--valid:#288a6a;--invalid:#b94646;--muted-text:#7e8f98;--muted-background:#edf1f3;--muted-border:#edf1f3;--card-background:#FFF;--card-shadow:0 0.125rem 1rem rgba(27, 42, 50, 0.04), 0 0.125rem 2rem rgba(27, 42, 50, 0.08), 0 0 0 0.0625rem rgba(27, 42, 50, 0.024);--code-background:#f3f5f7;--code-border:#d5dde2;--code-inlined:#edf1f3;--code-color-1:#9f6060;--code-color-2:#2f7ca2;--badge-background:#73848c;--badge-text:#FFF;--table-background:#FFF;--table-border:rgba(237, 241, 243, 0.75)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10191e;--text:#a2b1b9;--h1:#edf1f3;--h2:#d5dde2;--h3:#bbc7ce;--h4:#a2b1b9;--h5:#8a9ba3;--h6:#73848c;--mark:rgba(255, 223, 128, 0.25);--primary:#1086c1;--primary-hover:#1aa2e6;--primary-focus:rgba(16, 134, 193, 0.25);--primary-inverse:#FFF;--secondary:#bbc7ce;--secondary-hover:#edf1f3;--secondary-focus:rgba(187, 199, 206, 0.25);--secondary-inverse:#1b2a32;--input-background:#10191e;--input-border:#374b56;--valid:#1f7a5c;--invalid:#943838;--valid:#1f7a5c;--invalid:#943838;--muted-text:#73848c;--muted-background:#10191e;--muted-border:#23353e;--card-background:#17242b;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141f24;--code-border:#23353e;--code-inlined:rgba(65, 87, 98, 0.25);--code-color-1:#ac5353;--code-color-2:#4d91b3;--badge-background:#2c4049;--badge-text:#a2b1b9;--table-background:#141f24;--table-border:#10191e}}[data-theme=dark]{--background:#10191e;--text:#a2b1b9;--h1:#edf1f3;--h2:#d5dde2;--h3:#bbc7ce;--h4:#a2b1b9;--h5:#8a9ba3;--h6:#73848c;--mark:rgba(255, 223, 128, 0.25);--primary:#1086c1;--primary-hover:#1aa2e6;--primary-focus:rgba(16, 134, 193, 0.25);--primary-inverse:#FFF;--secondary:#bbc7ce;--secondary-hover:#edf1f3;--secondary-focus:rgba(187, 199, 206, 0.25);--secondary-inverse:#1b2a32;--input-background:#10191e;--input-border:#374b56;--valid:#1f7a5c;--invalid:#943838;--valid:#1f7a5c;--invalid:#943838;--muted-text:#73848c;--muted-background:#10191e;--muted-border:#23353e;--card-background:#17242b;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141f24;--code-border:#23353e;--code-inlined:rgba(65, 87, 98, 0.25);--code-color-1:#ac5353;--code-color-2:#4d91b3;--badge-background:#2c4049;--badge-text:#a2b1b9;--table-background:#141f24;--table-border:#10191e}*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);background:var(--background);color:var(--text);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 1rem}@media (min-width:576px){body>footer,body>header,body>main{padding:2.5rem 1rem}}@media (min-width:768px){body>footer,body>header,body>main{padding:3rem 1rem}}@media (min-width:992px){body>footer,body>header,body>main{padding:3.5rem 1rem}}@media (min-width:1200px){body>footer,body>header,body>main{padding:4rem 1rem}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}figure{display:block;margin-right:-1rem;margin-left:-1rem;padding:0;overflow-x:auto}figure figcaption{color:var(--muted-text);font-size:87.5%;padding:0 1rem}@media (min-width:576px){figure{margin-right:0;margin-left:0}figure figcaption{padding:0}}b,strong{font-weight:border}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}img{max-width:100%;height:auto;border-style:none}img,svg{vertical-align:text-bottom}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}header h1{font-size:3rem}header h2{font-size:2.625rem}header h3{font-size:2.25rem}header h4{font-size:1.875rem}header h5{font-size:1.6875rem}header h6{font-size:1.5rem}hgroup{margin-bottom:1.5rem}hgroup h1,hgroup h2,hgroup h3,hgroup h4,hgroup h5,hgroup h6,hgroup p{margin-bottom:0}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.75rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--text);vertical-align:middle}blockquote{display:block;margin:3rem 0;margin-right:-1rem;margin-left:-1rem;padding:1rem;border-left:0.25rem solid var(--muted-border)}@media (min-width:576px){blockquote{margin-right:0;margin-left:0}}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}fieldset legend,label{display:block;margin-bottom:0.125rem;vertical-align:middle}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;vertical-align:middle;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::placeholder,select::placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled],select[disabled],textarea[disabled]{background-color:var(--muted-background);opacity:.5}input:focus:-moz-focusring,select:focus:-moz-focusring,textarea:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:1.5rem;padding:0.75rem 1rem}input:not([type=checkbox]):not([type=radio])[invalid]:not(:focus),input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[invalid]:not(:focus),select[valid]:not(:focus),textarea[invalid]:not(:focus),textarea[valid]:not(:focus){padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input:not([type=checkbox]):not([type=radio])[invalid]:not(:focus),select[invalid]:not(:focus),textarea[invalid]:not(:focus){border-bottom:1px solid var(--invalid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b94646' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[valid]:not(:focus),textarea[valid]:not(:focus){border-bottom:1px solid var(--valid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=checkbox],[type=radio]{display:inline-block;width:1rem;height:1rem;margin-right:.375rem;margin-bottom:0.125rem;vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--primary);background-color:var(--primary-inverse);background-image:none}[type=checkbox][role=switch]{width:1.85rem;height:1rem;border:2px solid var(--input-border);border-radius:1rem;background-color:var(--input-border);line-height:1rem}[type=checkbox][role=switch]:before{display:block;width:calc(1rem - 4px);height:100%;border-radius:50%;background-color:var(--primary-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--primary);background-color:var(--primary);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(0.925rem - 2px)}form small{color:var(--muted-text)}input+small{margin-top:-1rem;margin-bottom:1.5rem}label>input:not([type=checkbox]):not([type=radio]),label>select,label>textarea{margin-top:0.125rem}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=submit]{padding:0.75rem 1rem;border:1px solid var(--primary);border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{border:1px solid var(--primary-hover);background-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}table{width:100%;border-spacing:0;background:var(--table-background)}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-weight:400;text-align:left;font-size:0.875rem}th,thead td{color:var(--text);font-weight:bolder;font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:rgba(237, 241, 243, 0.02)}tbody tr:nth-child(2n),thead tr{background-color:rgba(27, 42, 50, 0.02)}code,kbd,pre,samp{font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:1rem}code,kbd,pre{background:var(--code-inlined);color:var(--muted-text);font-size:85%;font-weight:400;line-height:1}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;overflow-x:auto;border-left:0.25rem solid var(--code-border);background:var(--code-background)}@media (min-width:576px){pre{margin-right:0;margin-left:0}}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-1);font-weight:normal}code i{color:var(--code-color-2);font-style:normal}code u{color:var(--text);text-decoration:none}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{vertical-align:baseline}[hidden],template{display:none}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{list-style-type:none;cursor:pointer;line-height:1rem}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform 0.2s ease-in-out}details summary:focus{outline:none}details[open] summary{margin-bottom:0.375rem;color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:2rem;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem;border-radius:0.25rem}}@media (min-width:768px){article{margin:3rem 0;padding:3rem}}@media (min-width:992px){article{margin:3.5rem 0;padding:3.5rem}}@media (min-width:1200px){article{margin:4rem 0;padding:4rem}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ul:first-of-type{margin-left:-0.5rem}nav ul:last-of-type{margin-right:-0.5rem}nav li{display:inline-block;margin:0;padding:1rem 0.5rem}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:-1rem -0.5rem;padding:1rem 0.5rem;border-radius:0.25rem}nav a:active,nav a:focus,nav a:hover{text-decoration:none}aside li,aside nav,aside ul{display:block}aside li{padding:0.5rem}aside li a{margin:-0.5rem;padding:0.5rem}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:0.25rem;background:var(--secondary);color:var(--secondary-inverse);font-size:.85rem;font-style:normal;font-weight:normal;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none;transition:opacity 0.2s ease-in-out}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--secondary);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1}
\ No newline at end of file
diff --git a/css/pico.min.css b/css/pico.min.css
new file mode 100644
index 00000000..eaf7ed25
--- /dev/null
+++ b/css/pico.min.css
@@ -0,0 +1,4 @@
+/*!
+ * Pico.css v0.1.0 (https://picocss.com)
+ * Copyright 2019 - Licensed under MIT
+ */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415762;--h1:#1b2a32;--h2:#2c4049;--h3:#415762;--h4:#596e78;--h5:#73848c;--h6:#8a9ba3;--mark:rgba(255, 223, 128, 0.5);--primary:#1086c1;--primary-hover:#086a9b;--primary-focus:rgba(16, 134, 193, 0.125);--primary-inverse:#FFF;--secondary:#374b56;--secondary-hover:#23353e;--secondary-focus:rgba(55, 75, 86, 0.125);--secondary-inverse:#FFF;--input-background:#FFF;--input-border:#c8d2d8;--valid:#288a6a;--invalid:#b94646;--muted-text:#7e8f98;--muted-background:#edf1f3;--muted-border:#edf1f3;--card-background:#FFF;--card-shadow:0 0.125rem 1rem rgba(27, 42, 50, 0.04), 0 0.125rem 2rem rgba(27, 42, 50, 0.08), 0 0 0 0.0625rem rgba(27, 42, 50, 0.024);--code-background:#f3f5f7;--code-border:#d5dde2;--code-inlined:#edf1f3;--code-color-1:#9f6060;--code-color-2:#2f7ca2;--badge-background:#73848c;--badge-text:#FFF;--table-background:#FFF;--table-border:rgba(237, 241, 243, 0.75)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10191e;--text:#a2b1b9;--h1:#edf1f3;--h2:#d5dde2;--h3:#bbc7ce;--h4:#a2b1b9;--h5:#8a9ba3;--h6:#73848c;--mark:rgba(255, 223, 128, 0.25);--primary:#1086c1;--primary-hover:#1aa2e6;--primary-focus:rgba(16, 134, 193, 0.25);--primary-inverse:#FFF;--secondary:#bbc7ce;--secondary-hover:#edf1f3;--secondary-focus:rgba(187, 199, 206, 0.25);--secondary-inverse:#1b2a32;--input-background:#10191e;--input-border:#374b56;--valid:#1f7a5c;--invalid:#943838;--valid:#1f7a5c;--invalid:#943838;--muted-text:#73848c;--muted-background:#10191e;--muted-border:#23353e;--card-background:#17242b;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141f24;--code-border:#23353e;--code-inlined:rgba(65, 87, 98, 0.25);--code-color-1:#ac5353;--code-color-2:#4d91b3;--badge-background:#2c4049;--badge-text:#a2b1b9;--table-background:#141f24;--table-border:#10191e}}[data-theme=dark]{--background:#10191e;--text:#a2b1b9;--h1:#edf1f3;--h2:#d5dde2;--h3:#bbc7ce;--h4:#a2b1b9;--h5:#8a9ba3;--h6:#73848c;--mark:rgba(255, 223, 128, 0.25);--primary:#1086c1;--primary-hover:#1aa2e6;--primary-focus:rgba(16, 134, 193, 0.25);--primary-inverse:#FFF;--secondary:#bbc7ce;--secondary-hover:#edf1f3;--secondary-focus:rgba(187, 199, 206, 0.25);--secondary-inverse:#1b2a32;--input-background:#10191e;--input-border:#374b56;--valid:#1f7a5c;--invalid:#943838;--valid:#1f7a5c;--invalid:#943838;--muted-text:#73848c;--muted-background:#10191e;--muted-border:#23353e;--card-background:#17242b;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141f24;--code-border:#23353e;--code-inlined:rgba(65, 87, 98, 0.25);--code-color-1:#ac5353;--code-color-2:#4d91b3;--badge-background:#2c4049;--badge-text:#a2b1b9;--table-background:#141f24;--table-border:#10191e}*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);background:var(--background);color:var(--text);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 0}@media (min-width:576px){body>footer,body>header,body>main{padding:2.5rem 0}}@media (min-width:768px){body>footer,body>header,body>main{padding:3rem 0}}@media (min-width:992px){body>footer,body>header,body>main{padding:3.5rem 0}}@media (min-width:1200px){body>footer,body>header,body>main{padding:4rem 0}}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem}@media (min-width:576px){.container{padding-right:0;padding-left:0;max-width:510px}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:992px){.container{max-width:920px}}@media (min-width:1200px){.container{max-width:1130px}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}.grid{margin:0}@media (min-width:992px){.grid{grid-column-gap:1rem;display:grid;grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))}}.grid>*{min-width:0;margin-bottom:1rem}@media (min-width:992px){.grid>*{margin-bottom:0}}figure{display:block;margin-right:-1rem;margin-left:-1rem;padding:0;overflow-x:auto}figure figcaption{color:var(--muted-text);font-size:87.5%;padding:0 1rem}@media (min-width:576px){figure{margin-right:0;margin-left:0}figure figcaption{padding:0}}b,strong{font-weight:border}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}img{max-width:100%;height:auto;border-style:none}img,svg{vertical-align:text-bottom}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}a.secondary{color:var(--secondary)}a.secondary:active,a.secondary:focus,a.secondary:hover{color:var(--secondary-hover)}a.secondary:focus{background-color:var(--secondary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}header h1{font-size:3rem}header h2{font-size:2.625rem}header h3{font-size:2.25rem}header h4{font-size:1.875rem}header h5{font-size:1.6875rem}header h6{font-size:1.5rem}hgroup{margin-bottom:1.5rem}hgroup h1,hgroup h2,hgroup h3,hgroup h4,hgroup h5,hgroup h6,hgroup p{margin-bottom:0}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.75rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--text);vertical-align:middle}blockquote{display:block;margin:3rem 0;margin-right:-1rem;margin-left:-1rem;padding:1rem;border-left:0.25rem solid var(--muted-border)}@media (min-width:576px){blockquote{margin-right:0;margin-left:0}}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}fieldset legend,label{display:block;margin-bottom:0.125rem;vertical-align:middle}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;vertical-align:middle;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::placeholder,select::placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled],select[disabled],textarea[disabled]{background-color:var(--muted-background);opacity:.5}input:focus:-moz-focusring,select:focus:-moz-focusring,textarea:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:1.5rem;padding:0.75rem 1rem}input:not([type=checkbox]):not([type=radio])[invalid]:not(:focus),input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[invalid]:not(:focus),select[valid]:not(:focus),textarea[invalid]:not(:focus),textarea[valid]:not(:focus){padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input:not([type=checkbox]):not([type=radio])[invalid]:not(:focus),select[invalid]:not(:focus),textarea[invalid]:not(:focus){border-bottom:1px solid var(--invalid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b94646' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[valid]:not(:focus),textarea[valid]:not(:focus){border-bottom:1px solid var(--valid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=checkbox],[type=radio]{display:inline-block;width:1rem;height:1rem;margin-right:.375rem;margin-bottom:0.125rem;vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--primary);background-color:var(--primary-inverse);background-image:none}[type=checkbox][role=switch]{width:1.85rem;height:1rem;border:2px solid var(--input-border);border-radius:1rem;background-color:var(--input-border);line-height:1rem}[type=checkbox][role=switch]:before{display:block;width:calc(1rem - 4px);height:100%;border-radius:50%;background-color:var(--primary-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--primary);background-color:var(--primary);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(0.925rem - 2px)}form small{color:var(--muted-text)}input+small{margin-top:-1rem;margin-bottom:1.5rem}label>input:not([type=checkbox]):not([type=radio]),label>select,label>textarea{margin-top:0.125rem}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=submit]{padding:0.75rem 1rem;border:1px solid var(--primary);border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{border:1px solid var(--primary-hover);background-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a.secondary[role=button],button.secondary,input.secondary[type=submit],input[type=reset]{border:1px solid var(--secondary);background-color:var(--secondary);color:var(--secondary-inverse)}a.secondary[role=button]:active,a.secondary[role=button]:focus,a.secondary[role=button]:hover,button.secondary:active,button.secondary:focus,button.secondary:hover,input.secondary[type=submit]:active,input.secondary[type=submit]:focus,input.secondary[type=submit]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{border:1px solid var(--secondary-hover);background-color:var(--secondary-hover)}a.secondary[role=button]:focus,button.secondary:focus,input.secondary[type=submit]:focus,input[type=reset]:focus{box-shadow:0 0 0 0.2rem var(--secondary-focus)}a.outline[role=button],button.outline,input.outline[type=submit]{border:1px solid var(--primary);background-color:transparent;color:var(--primary)}a.outline[role=button]:active,a.outline[role=button]:focus,a.outline[role=button]:hover,button.outline:active,button.outline:focus,button.outline:hover,input.outline[type=submit]:active,input.outline[type=submit]:focus,input.outline[type=submit]:hover{border:1px solid var(--primary-hover);color:var(--primary-hover)}a.outline.secondary[role=button],button.outline.secondary,input.outline.secondary[type=submit],input.outline[type=reset]{border:1px solid var(--secondary);background-color:transparent;color:var(--secondary)}a.outline.secondary[role=button]:active,a.outline.secondary[role=button]:focus,a.outline.secondary[role=button]:hover,button.outline.secondary:active,button.outline.secondary:focus,button.outline.secondary:hover,input.outline.secondary[type=submit]:active,input.outline.secondary[type=submit]:focus,input.outline.secondary[type=submit]:hover,input.outline[type=reset]:active,input.outline[type=reset]:focus,input.outline[type=reset]:hover{border:1px solid var(--secondary-hover);color:var(--secondary-hover)}a.outline.secondary[role=button]:focus,button.outline.secondary:focus,input.outline.secondary[type=submit]:focus,input.outline[type=reset]:focus{box-shadow:0 0 0 0.2rem var(--secondary-focus)}a[role=button][disabled],button[disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}table{width:100%;border-spacing:0;background:var(--table-background)}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-weight:400;text-align:left;font-size:0.875rem}th,thead td{color:var(--text);font-weight:bolder;font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:rgba(237, 241, 243, 0.02)}tbody tr:nth-child(2n),thead tr{background-color:rgba(27, 42, 50, 0.02)}code,kbd,pre,samp{font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:1rem}code,kbd,pre{background:var(--code-inlined);color:var(--muted-text);font-size:85%;font-weight:400;line-height:1}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;overflow-x:auto;border-left:0.25rem solid var(--code-border);background:var(--code-background)}@media (min-width:576px){pre{margin-right:0;margin-left:0}}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-1);font-weight:normal}code i{color:var(--code-color-2);font-style:normal}code u{color:var(--text);text-decoration:none}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{vertical-align:baseline}[hidden],template{display:none}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{list-style-type:none;cursor:pointer;line-height:1rem}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform 0.2s ease-in-out}details summary:focus{outline:none}details[open] summary{margin-bottom:0.375rem;color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:2rem;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem;border-radius:0.25rem}}@media (min-width:768px){article{margin:3rem 0;padding:3rem}}@media (min-width:992px){article{margin:3.5rem 0;padding:3.5rem}}@media (min-width:1200px){article{margin:4rem 0;padding:4rem}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ul:first-of-type{margin-left:-0.5rem}nav ul:last-of-type{margin-right:-0.5rem}nav li{display:inline-block;margin:0;padding:1rem 0.5rem}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:-1rem -0.5rem;padding:1rem 0.5rem;border-radius:0.25rem}nav a:active,nav a:focus,nav a:hover{text-decoration:none}aside li,aside nav,aside ul{display:block}aside li{padding:0.5rem}aside li a{margin:-0.5rem;padding:0.5rem}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:0.25rem;background:var(--secondary);color:var(--secondary-inverse);font-size:.85rem;font-style:normal;font-weight:normal;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none;transition:opacity 0.2s ease-in-out}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--secondary);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1}
\ No newline at end of file
diff --git a/scss/_colors.scss b/scss/_colors.scss
new file mode 100644
index 00000000..f5406bb9
--- /dev/null
+++ b/scss/_colors.scss
@@ -0,0 +1,37 @@
+// Navy-Grey
+$grey-hue: 200 !default;
+$grey-50:  hsl($grey-hue, 20%, 94%) !default;
+$grey-100: hsl($grey-hue, 18%, 86%) !default;
+$grey-200: hsl($grey-hue, 16%, 77%) !default;
+$grey-300: hsl($grey-hue, 14%, 68%) !default;
+$grey-400: hsl($grey-hue, 12%, 59%) !default;
+$grey-500: hsl($grey-hue, 10%, 50%) !default;
+$grey-600: hsl($grey-hue, 15%, 41%) !default;
+$grey-700: hsl($grey-hue, 20%, 32%) !default;
+$grey-800: hsl($grey-hue, 25%, 23%) !default;
+$grey-900: hsl($grey-hue, 30%, 15%) !default;
+
+// Light Blue
+$primary-hue: 200;
+$primary-50:  hsl($primary-hue, 90%,  94%) !default;
+$primary-100: hsl($primary-hue, 88%,  86%) !default;
+$primary-200: hsl($primary-hue, 86%,  77%) !default;
+$primary-300: hsl($primary-hue, 84%,  68%) !default;
+$primary-400: hsl($primary-hue, 82%,  59%) !default;
+$primary-500: hsl($primary-hue, 80%,  50%) !default;
+$primary-600: hsl($primary-hue, 85%,  41%) !default;
+$primary-700: hsl($primary-hue, 90%,  32%) !default;
+$primary-800: hsl($primary-hue, 95%,  23%) !default;
+$primary-900: hsl($primary-hue, 100%, 15%) !default;
+
+// Black & White
+$black: #000 !default;
+$white: #FFF !default;
+
+// Miscs
+$amber-200: hsl(45,  100%, 75%) !default;
+$green-500: hsl(160, 50%,  40%) !default;
+$green-600: hsl(160, 55%,  35%) !default;
+$green-700: hsl(160, 60%,  30%) !default;
+$red-700:   hsl(0,   45%,  50%) !default;
+$red-900:   hsl(0,   45%,  40%) !default;
diff --git a/scss/_variables.scss b/scss/_variables.scss
new file mode 100644
index 00000000..616a0220
--- /dev/null
+++ b/scss/_variables.scss
@@ -0,0 +1,136 @@
+// Config
+// ––––––––––––––––––––
+
+// Enable <header>, <main>, <footer> inside <body> as a container
+$enable-semantic-container: false !default;
+
+// Enable ".container" as a container
+$enable-class-container: true !default;
+
+// Enable a centered viewport
+// Fluid layout if disabled
+$enable-viewport: true !default;
+
+// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
+// Fixed spacings if disabled
+$enable-responsive-spacings: true !default;
+
+// Enable responsive typography
+// Fixed base font if disabled
+$enable-responsive-typography: true !default;
+
+// Enable .classes
+// .classless version if disabled
+$enable-classes: true !default;
+
+
+// Spacings
+// ––––––––––––––––––––
+
+// Gutters and horizontals margins
+// For <body>, '.row' (grids), <nav>, <table>
+$spacing-gutter:       1rem !default;
+
+// Blocks verticals margins and paddings
+// For <header>, <main>, <footer>, <section>, <article>
+// This value is proportionally multiplied according breakpoints for great responsive spacings
+$spacing-block:        2rem !default;
+
+// Vertical margins for Typography and Form elements
+// This value is proportionally multiplied according breakpoints for great responsive spacings
+$spacing-typography:   1.5rem !default;
+
+// Padding for <input> and <button>
+// (Vertical Horizontal)
+$spacing-input-button: .75rem 1rem !default;
+
+
+// Typography
+// ––––––––––––––––––––
+
+// Sans serif native font stack
+$sans-serif:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+                 "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+                 "Apple Color Emoji", "Segoe UI Emoji",
+                 "Segoe UI Symbol", "Noto Color Emoji" !default;
+
+// Monospace native font stack
+$monospace:      SFMono-Regular, Menlo, Monaco, Consolas,
+                 "Liberation Mono", "Courier New", monospace !default;
+
+$line-height:    1.5 !default;
+$text-weight:    400 !default;
+$heading-weight: 700 !default;
+
+
+// Blocks
+// ––––––––––––––––––––
+
+// For <form> elements, <button>, card (<article>), inlined code, badge (<u>)
+$round: .25rem !default;
+
+
+// Transitions
+// ––––––––––––––––––––
+
+// For <a>, <form> elements and <button>
+$transition: .2s ease-in-out !default;
+
+
+// Responsive
+// ––––––––––––––––––––
+
+$enable-responsive-typography: false !default;
+$enable-responsive-spacings:  false !default;
+
+// xs: Extra small (portrait phones)
+// sm: Small(landscape phones)
+// md: Medium(tablets)
+// lg: Large(desktops)
+// xl: Extra large (large desktops)
+
+// NOTE:
+// To provide an easy and fine styling on each breakpoint
+// we didn't use @each, @mixin or @include.
+// That means you need to edit each CSS selector file to add a breakpoint
+// You can disable any viewports, base-font and spacing-factor with 'null'
+
+// Breakpoints
+// 'null' disable the breakpoint
+$breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+) !default;
+
+// Viewports
+$viewports: (
+// 'null' disable the viewport (max-width) on a breakpoint
+  sm: 510px,
+  md: 700px,
+  lg: 920px,
+  xl: 1130px
+) !default;
+
+// Base font for .rem
+// 'null' disable the base font on a breakpoint
+// 'xs' should not be 'null'
+$base-font: (
+  xs: 16px,
+  sm: 17px,
+  md: 18px,
+  lg: 19px,
+  xl: 20px
+) !default;
+
+// Multiplication factor for spacings
+// 'null' disable spacing factor on a breakpoint
+$spacing-factor: (
+  xs: 1,
+  sm: 1.25,
+  md: 1.5,
+  lg: 1.75,
+  xl: 2
+) !default;
diff --git a/scss/components/_accordion.scss b/scss/components/_accordion.scss
new file mode 100644
index 00000000..650214ce
--- /dev/null
+++ b/scss/components/_accordion.scss
@@ -0,0 +1,62 @@
+/**
+ * Accordion (<details>)
+ * Inspiration: https://codepen.io/koca/pen/RyeLLV
+ */
+
+details {
+  display: block;
+  margin-bottom: $spacing-typography;
+  padding-bottom: $spacing-typography/2;
+  border-bottom: 1px solid var(--muted-border);
+
+  summary {
+    list-style-type: none;
+    cursor: pointer;
+    line-height: 1rem;
+
+    // Reset marker
+    &::-webkit-details-marker {
+      display: none;
+    }
+    &::marker {
+      display: none;
+    }
+    &::-moz-list-bullet {
+      list-style-type: none;
+    }
+
+    // Marker
+    &::after {
+      $caret-icon-color: "808080"; // Without '#' !important
+      display: inline-block;
+      width: 1rem;
+      height: 1rem;
+      float: right;
+      transform: rotate(-90deg);
+      // Source: https://feathericons.com/
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $caret-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 1rem auto;
+      content: '';
+      transition: transform $transition;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  // Open
+  &[open] {
+
+    summary {
+      margin-bottom: $spacing-typography/4;
+      color: var(--muted-text);
+
+      &::after {
+        transform: rotate(0);
+      }
+    }
+  }
+}
diff --git a/scss/components/_card.scss b/scss/components/_card.scss
new file mode 100644
index 00000000..60af158e
--- /dev/null
+++ b/scss/components/_card.scss
@@ -0,0 +1,56 @@
+/**
+ * Card (<article>)
+ */
+
+article {
+  margin: $spacing-block;
+  margin-right: -$spacing-gutter;
+  margin-left: -$spacing-gutter;
+  padding: $spacing-block $spacing-gutter;
+  background: var(--card-background);
+  box-shadow: var(--card-shadow);
+
+  @if map-get($breakpoints, "sm") {
+    @media (min-width: map-get($breakpoints, "sm")) {
+      @if map-get($spacing-factor, "sm") and $enable-responsive-spacings {
+        margin: ($spacing-block*map-get($spacing-factor, "sm")) 0;
+        padding: $spacing-block*map-get($spacing-factor, "sm");
+      }
+      @else {
+        margin: $spacing-block 0;
+        padding: $spacing-block;
+      }
+      border-radius: $round;
+    }
+  }
+
+  @if map-get($breakpoints, "md") and
+    map-get($spacing-factor, "md") and
+    $enable-responsive-spacings {
+
+    @media (min-width: map-get($breakpoints, "md")) {
+      margin: ($spacing-block*map-get($spacing-factor, "md")) 0;
+      padding: $spacing-block*map-get($spacing-factor, "md");
+    }
+  }
+
+  @if map-get($breakpoints, "lg") and
+    map-get($spacing-factor, "lg") and
+    $enable-responsive-spacings {
+
+    @media (min-width: map-get($breakpoints, "lg")) {
+      margin: ($spacing-block*map-get($spacing-factor, "lg")) 0;
+      padding: $spacing-block*map-get($spacing-factor, "lg");
+    }
+  }
+
+  @if map-get($breakpoints, "xl") and
+    map-get($spacing-factor, "xl") and
+    $enable-responsive-spacings {
+
+    @media (min-width: map-get($breakpoints, "xl")) {
+      margin: ($spacing-block*map-get($spacing-factor, "xl")) 0;
+      padding: $spacing-block*map-get($spacing-factor, "xl");
+    }
+  }
+}
diff --git a/scss/components/_nav.scss b/scss/components/_nav.scss
new file mode 100644
index 00000000..ff9ca8e6
--- /dev/null
+++ b/scss/components/_nav.scss
@@ -0,0 +1,71 @@
+/**
+ * Nav
+ */
+
+// Inline
+nav,
+nav ul {
+  display: flex;
+}
+
+nav {
+  justify-content: space-between;
+
+  ul {
+    align-items: center;
+    margin-bottom: 0;
+    padding: 0;
+    list-style: none;
+
+    &:first-of-type {
+      margin-left: -$spacing-gutter/2;
+    }
+    &:last-of-type {
+      margin-right: -$spacing-gutter/2;
+    }
+  }
+
+  li {
+    display: inline-block;
+    margin: 0;
+    padding: $spacing-gutter $spacing-gutter/2;
+
+    // HACK: Input & Button inside Nav
+    > *,
+    > input:not([type="checkbox"]):not([type="radio"]) {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    display: block;
+    margin: -$spacing-gutter (-$spacing-gutter/2);
+    padding: $spacing-gutter $spacing-gutter/2;
+    border-radius: $round;
+
+    &:hover,
+    &:active,
+    &:focus {
+      text-decoration: none;
+    }
+  }
+}
+
+// Vertical Nav
+aside {
+
+  nav,
+  ul,
+  li {
+    display: block;
+  }
+
+  li {
+    padding: $spacing-gutter/2;
+
+    a {
+      margin: -$spacing-gutter/2;
+      padding: $spacing-gutter/2;
+    }
+  }
+}
diff --git a/scss/components/_tooltip.scss b/scss/components/_tooltip.scss
new file mode 100644
index 00000000..fcef3c4d
--- /dev/null
+++ b/scss/components/_tooltip.scss
@@ -0,0 +1,59 @@
+/**
+ * Tooltip ([data-tooltip])
+ */
+
+ [data-tooltip] {
+   position: relative;
+
+   &:not(a):not(button):not(input) {
+     border-bottom: 1px dotted;
+     text-decoration: none;
+     cursor: help;
+   }
+
+   &::before,
+   &::after {
+     display: block;
+     z-index: 99;
+     position: absolute;
+     bottom: 100%;
+     left: 50%;
+     padding: .25rem .5rem;
+     overflow: hidden;
+     transform: translate(-50%, -.25rem);
+     border-radius: $round;
+     background: var(--secondary);
+     color: var(--secondary-inverse);
+     font-size: .85rem;
+     font-style: normal;
+     font-weight: normal;
+     text-decoration: none;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+     content: attr(data-tooltip);
+     opacity: 0;
+     pointer-events: none;
+     transition: opacity $transition;
+   }
+
+   &::after {
+     padding: 0;
+     transform: translate(-50%, 0rem);
+     border-top: .3rem solid;
+     border-right: .3rem solid transparent;
+     border-left: .3rem solid transparent;
+     border-radius: 0;
+     background-color: transparent;
+     color: var(--secondary);
+     content: '';
+   }
+
+   &:focus,
+   &:hover {
+     &::before,
+     &::after {
+       opacity: 1;
+     }
+
+   }
+ }
diff --git a/scss/content/_button.scss b/scss/content/_button.scss
new file mode 100644
index 00000000..79c27143
--- /dev/null
+++ b/scss/content/_button.scss
@@ -0,0 +1,172 @@
+/**
+ * Button
+ */
+
+
+// Reboot
+// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// ––––––––––––––––––––
+
+// 1. Change the font styles in all browsers.
+// 2. Remove the margin in Firefox and Safari
+// 3. Show the overflow in Edge
+button {
+  margin: 0; // 2
+  overflow: visible; // 3
+  font-family: inherit; // 1
+  text-transform: none; // 1
+}
+
+// Correct the inability to style clickable types in iOS and Safari.
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+// Remove the inner border and padding in Firefox.
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+   padding: 0;
+   border-style: none;
+}
+
+// Restore the focus styles unset by the previous rule.
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+
+// Pico
+// ––––––––––––––––––––
+
+button {
+  display: block;
+  width: 100%;
+  margin-bottom: $spacing-typography;
+}
+
+a[role="button"] {
+  display: inline-block;
+  text-decoration: none;
+}
+
+button,
+input[type="submit"],
+a[role="button"] {
+  padding: $spacing-input-button;
+  border: 1px solid var(--primary);
+  border-radius: $round;
+  outline: none;
+  background-color: var(--primary);
+  color: var(--primary-inverse);
+  font-size: 1rem;
+  font-weight: normal;
+  line-height: $line-height;
+  text-align: center;
+  cursor: pointer;
+  transition:
+    background-color $transition,
+    border-color $transition,
+    color $transition,
+    box-shadow $transition;
+
+  &:hover,
+  &:active,
+  &:focus {
+    border: 1px solid var(--primary-hover);
+    background-color: var(--primary-hover);
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 0.2rem var(--primary-focus);
+  }
+}
+
+// Input [type="reset"]
+input[type="reset"] {
+  cursor: pointer;
+}
+
+
+// Button .secondary
+@if $enable-classes {
+  button.secondary,
+  input.secondary[type="submit"],
+  input[type="reset"],
+  a.secondary[role="button"] {
+    border: 1px solid var(--secondary);
+    background-color: var(--secondary);
+    color: var(--secondary-inverse);
+
+    &:hover,
+    &:active,
+    &:focus {
+      border: 1px solid var(--secondary-hover);
+      background-color: var(--secondary-hover);
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 0.2rem var(--secondary-focus);
+    }
+  }
+}
+
+// Button .outline
+@if $enable-classes {
+  button.outline,
+  input.outline[type="submit"],
+  a.outline[role="button"] {
+    border: 1px solid var(--primary);
+    background-color: transparent;
+    color: var(--primary);
+
+    &:hover,
+    &:active,
+    &:focus {
+      border: 1px solid var(--primary-hover);
+      color: var(--primary-hover);
+    }
+  }
+}
+
+// Button .outline.secondary
+@if $enable-classes {
+  button.outline.secondary,
+  input.outline.secondary[type="submit"],
+  input.outline[type="reset"],
+  a.outline.secondary[role="button"] {
+    border: 1px solid var(--secondary);
+    background-color: transparent;
+    color: var(--secondary);
+
+    &:hover,
+    &:active,
+    &:focus {
+      border: 1px solid var(--secondary-hover);
+      color: var(--secondary-hover);
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 0.2rem var(--secondary-focus);
+    }
+  }
+}
+
+// Button [disabled]
+button,
+input[type="submit"],
+input[type="reset"],
+a[role="button"] {
+
+  &[disabled] {
+    opacity: .5;
+    pointer-events: none;
+  }
+}
diff --git a/scss/content/_code.scss b/scss/content/_code.scss
new file mode 100644
index 00000000..c79c07de
--- /dev/null
+++ b/scss/content/_code.scss
@@ -0,0 +1,113 @@
+/**
+ * Code
+ */
+
+
+// Reboot
+// ––––––––––––––––––––
+
+// 1. Correct the inheritance and scaling of font size in all browsers.
+// 2. Correct the odd `em` font sizing in all browsers.
+pre,
+code,
+kbd,
+samp {
+  font-family: $monospace; // 1
+  font-size: 1rem; // 2
+}
+
+
+// Pico
+// ––––––––––––––––––––
+
+pre,
+code,
+kbd {
+  background: var(--code-inlined);
+  color: var(--muted-text);
+  font-size: 85%;
+  font-weight: 400;
+  line-height: 1;
+
+  @if map-get($breakpoints, "sm") and $enable-responsive-typography {
+    @media (min-width: map-get($breakpoints, "sm")) {
+      font-size: 83%;
+    }
+  }
+
+  @if map-get($breakpoints, "md") and $enable-responsive-typography {
+    @media (min-width: map-get($breakpoints, "md")) {
+      font-size: 81%;
+    }
+  }
+
+  @if map-get($breakpoints, "lg") and $enable-responsive-typography {
+    @media (min-width: map-get($breakpoints, "lg")) {
+      font-size: 79%;
+    }
+  }
+  @if map-get($breakpoints, "lg") and $enable-responsive-typography {
+    @media (min-width: map-get($breakpoints, "xl")) {
+      font-size: 77%;
+    }
+  }
+}
+
+code,
+kbd {
+  display: inline-block;
+  padding: .375rem .5rem;
+  border-radius: $round;
+}
+
+pre {
+  display: block;
+  margin-right: -$spacing-gutter;
+  margin-left: -$spacing-gutter;
+  padding: $spacing-block $spacing-gutter;
+  overflow-x: auto;
+  border-left: .25rem solid var(--code-border);
+  background: var(--code-background);
+
+  @media (min-width: map-get($breakpoints, "sm")) {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  > code {
+    display: block;
+    padding: 0;
+    background: transparent;
+    font-size: 14px;
+    line-height: $line-height;
+  }
+}
+
+// Code syntax
+code {
+
+  // Tags
+  b {
+    color: var(--code-color-1);
+    font-weight: normal;
+  }
+
+  // Properties
+  i {
+    color: var(--code-color-2);
+    font-style: normal;
+  }
+
+  // Values
+  u {
+    color: var(--text);
+    text-decoration: none;
+  }
+}
+
+// kbd
+kbd {
+  background-color: var(--secondary);
+  color: var(--secondary-inverse);
+  font-weight: bolder;
+}
diff --git a/scss/content/_form.scss b/scss/content/_form.scss
new file mode 100644
index 00000000..66c59225
--- /dev/null
+++ b/scss/content/_form.scss
@@ -0,0 +1,322 @@
+/**
+ * Form elements
+ */
+
+
+// Reboot
+// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// ––––––––––––––––––––
+
+// 1. Change the font styles in all browsers.
+// 2. Remove the margin in Firefox and Safari.
+input,
+optgroup,
+select,
+textarea {
+  margin: 0; // 2
+  font-family: inherit; // 1
+  font-size: 1rem; // 1
+  line-height: $line-height; // 1
+}
+
+// Show the overflow in IE.
+input {
+  overflow: visible;
+}
+
+// Remove the inheritance of text transform in Edge, Firefox, and IE.
+select {
+  text-transform: none;
+}
+
+// 1. Correct the text wrapping in Edge and IE.
+// 2. Correct the color inheritance from `fieldset` elements in IE.
+// 3. Remove the padding so developers are not caught out when they zero out
+// `fieldset` elements in all browsers.
+legend {
+  display: table; // 1
+  max-width: 100%; // 1
+  padding: 0; // 3
+  color: inherit; // 2
+  white-space: normal; // 1
+}
+
+// Remove the default vertical scrollbar in IE 10+.
+textarea {
+  overflow: auto;
+}
+
+// Remove the padding in IE 10.
+[type="checkbox"],
+[type="radio"] {
+  padding: 0;
+}
+
+// Correct the cursor style of increment and decrement buttons in Chrome.
+[type="number"]::-webkit-inner-spin-button {
+  height: auto;
+}
+
+// 1. Correct the odd appearance in Chrome and Safari.
+// 2. Correct the outline style in Safari.
+[type="search"] {
+  -webkit-appearance: textfield; // 1
+  outline-offset: -2px; // 2
+}
+
+// Remove the inner padding in Chrome and Safari on macOS.
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+// 1. Correct the inability to style clickable types in iOS and Safari.
+// 2. Change font properties to `inherit` in Safari.
+::-webkit-file-upload-button {
+  -webkit-appearance: button; // 1
+  font: inherit; // 2
+}
+
+
+// Pico
+// ––––––––––––––––––––
+
+// Fieldset
+fieldset {
+  margin: 0;
+  margin-bottom: $spacing-typography;
+  padding: 0;
+  border: 0;
+}
+
+// Layout
+input:not([type="checkbox"]):not([type="radio"]),
+select,
+textarea,
+form small {
+  display: block;
+  width: 100%;
+}
+
+// Spacing beteen label and input
+$spacing-label-input: $spacing-typography/12;
+
+// Label & legend
+label,
+fieldset legend {
+  display: block;
+  margin-bottom: $spacing-label-input;
+  vertical-align: middle;
+}
+
+// Inputs (Commons styles)
+input,
+select,
+textarea {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: 1px solid var(--input-border);
+  border-radius: $round;
+  outline: none;
+  background-color: var(--input-background);
+  color: var(--text);
+  font-weight: normal;
+  vertical-align: middle;
+  transition:
+    background-color $transition,
+    border-color $transition,
+    color $transition,
+    border-color $transition,
+    box-shadow $transition;
+
+  &::placeholder {
+    color: var(--muted-text);
+    opacity: 1;
+  }
+
+  &:active,
+  &:focus {
+    border-color: var(--primary);
+  }
+
+  &:focus  {
+    box-shadow: 0 0 0 0.2rem var(--primary-focus);
+  }
+
+  &[readonly],
+  &[disabled] {
+    border-color: var(--muted-border);
+    box-shadow: none;
+
+    & ~ label {
+      color: var(--muted-text);
+    }
+  }
+
+  &[disabled] {
+    background-color: var(--muted-background);
+    opacity: .5;
+  }
+
+  // Undo the Firefox inner focus ring
+  &:focus:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 #000;
+  }
+}
+
+// Text, Select & Textarea
+input:not([type="checkbox"]):not([type="radio"]),
+select,
+textarea {
+  margin-bottom: $spacing-typography;
+  padding: $spacing-input-button;
+
+  // Validation states
+  &[invalid]:not(:focus),
+  &[valid]:not(:focus) {
+    padding-right: 2rem;
+    background-position: center right .75rem;
+    background-repeat: no-repeat;
+    background-size: 1rem auto;
+  }
+
+  &[invalid]:not(:focus) {
+    // Source: https://feathericons.com/
+    $invalid-icon-color: "b94646"; // Without '#' !important
+    border-bottom: 1px solid var(--invalid);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $invalid-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+  }
+
+  &[valid]:not(:focus) {
+    // Source: https://feathericons.com/
+    $valid-icon-color: "288a6a"; // Without '#' !important
+    border-bottom: 1px solid var(--valid);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $valid-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  }
+}
+
+// Select
+select {
+  // Unstyle the caret on `<select>`s in IE10+.
+  &::-ms-expand {
+    border: 0;
+    background-color: transparent;
+  }
+  &:not([multiple]) {
+    // Source: https://feathericons.com/
+    $caret-icon-color: "808080"; // Without '#' !important
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $caret-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    background-position: center right .75rem;
+    background-repeat: no-repeat;
+    background-size: 1rem auto;
+  }
+}
+
+// Checkboxes & Radios
+[type="checkbox"],
+[type="radio"] {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  margin-right: .375rem;
+  margin-bottom: $spacing-label-input;
+  vertical-align: middle;
+  cursor: pointer;
+
+  &::-ms-check {
+    display: none; // unstyle IE checkboxes
+  }
+
+  &:checked {
+    border-color: var(--primary);
+    background-color: var(--primary);
+    // Source: https://feathericons.com/
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: .66rem auto;
+  }
+
+  & ~ label {
+    display: inline-block;
+    margin-right: .375rem;
+    margin-bottom: 0;
+    cursor: pointer;
+  }
+}
+
+// Radios
+[type="radio"] {
+  border-radius: 50%;
+
+  &:checked {
+    border-width: .33rem;
+    border-color: var(--primary);
+    background-color: var(--primary-inverse);
+    background-image: none;
+  }
+}
+
+// Switchs
+[type="checkbox"][role="switch"] {
+
+  // Config
+  $switch-height:      1rem;
+  $switch-width:       1.85rem;
+  $switch-border:      2px;
+  $switch-transition:  .1s ease-in-out;
+
+  // Styles
+  width: $switch-width;
+  height: $switch-height;
+  border: $switch-border solid var(--input-border);
+  border-radius: $switch-height;
+  background-color: var(--input-border);
+  line-height: $switch-height;
+
+  &:before {
+    display: block;
+    width: calc(#{$switch-height} - #{$switch-border*2});
+    height: 100%;
+    border-radius: 50%;
+    background-color: var(--primary-inverse);
+    content: '';
+    transition: margin $switch-transition;
+  }
+
+  &:checked {
+    border-color: var(--primary);
+    background-color: var(--primary);
+    // Disable if check box icon is needed
+    background-image: none;
+    // Enable if check box icon is needed
+    // background-position: center left $switch-width/6;
+    // background-size: $switch-width/5 auto;
+
+    &::before {
+      margin-right: 0;
+      margin-left: calc(#{$switch-width/2} - #{$switch-border});
+    }
+  }
+}
+
+// Helper
+form small {
+  color: var(--muted-text);
+}
+
+input + small {
+  margin-top: -$spacing-typography/1.5;
+  margin-bottom: $spacing-typography;
+}
+
+// Styles for Input inside a label
+label {
+
+  & > input:not([type="checkbox"]):not([type="radio"]),
+  & > select,
+  & > textarea {
+    margin-top: $spacing-label-input;
+  }
+}
diff --git a/scss/content/_miscs.scss b/scss/content/_miscs.scss
new file mode 100644
index 00000000..50793ecb
--- /dev/null
+++ b/scss/content/_miscs.scss
@@ -0,0 +1,29 @@
+/**
+ * Miscs
+ */
+
+
+// Reboot
+// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// ––––––––––––––––––––
+
+// 1. Add the correct box sizing in Firefox.
+// 2. Show the overflow in Edge and IE.
+hr {
+  box-sizing: content-box; // 1
+  height: 0; // 1
+  overflow: visible; // 2
+  border: none;
+  border-top: 1px solid var(--muted-border);
+}
+
+// Add the correct vertical alignment in Chrome, Firefox, and Opera.
+progress {
+  vertical-align: baseline;
+}
+
+// Add the correct display in IE 10+.
+[hidden],
+template {
+  display: none;
+}
diff --git a/scss/content/_table.scss b/scss/content/_table.scss
new file mode 100644
index 00000000..ea9c0c7a
--- /dev/null
+++ b/scss/content/_table.scss
@@ -0,0 +1,45 @@
+/**
+ * Table
+ */
+
+table {
+  width: 100%;
+  border-spacing: 0;
+  background: var(--table-background);
+}
+
+// Cells
+th,
+td {
+  padding: ($spacing-gutter/2) $spacing-gutter;
+  border-bottom: 1px solid var(--table-border);
+  color: var(--muted-text);
+  font-weight: $text-weight;
+  text-align: left;
+  font-size: 0.875rem;
+}
+
+// Titles
+th,
+thead td {
+  color: var(--text);
+  font-weight: bolder;
+  font-size: 1rem;
+}
+
+// First row
+thead {
+  th,
+  td {
+    border-bottom: 3px solid var(--table-border);
+  }
+}
+
+// Fine striping
+tbody tr:nth-child(odd) {
+  background-color: rgba($grey-50,.02);
+}
+thead tr,
+tbody tr:nth-child(even) {
+  background-color: rgba($grey-900,.02);
+}
diff --git a/scss/content/_typography.scss b/scss/content/_typography.scss
new file mode 100644
index 00000000..baf7f9bc
--- /dev/null
+++ b/scss/content/_typography.scss
@@ -0,0 +1,289 @@
+/**
+ * Typography
+ */
+
+
+// Reboot
+// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// ––––––––––––––––––––
+
+// Add the correct font weight in Chrome, Edge, and Safari.
+b,
+strong {
+  font-weight: border;
+}
+
+// Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+sub,
+sup {
+  position: relative;
+  font-size: .75rem;
+  line-height: 0;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -0.25rem;
+}
+sup {
+  top: -0.5rem;
+}
+
+// 1. Remove the border on images inside links in IE 10.
+// 2. Responsive by default
+img {
+  max-width: 100%; // 2
+  height: auto; // 2
+  border-style: none; // 1
+}
+svg,
+img {
+  vertical-align: text-bottom;
+}
+
+
+// Pico
+// ––––––––––––––––––––
+
+address,
+blockquote,
+dl,
+figure,
+form,
+ol,
+p,
+pre,
+table,
+ul {
+  margin-top: 0;
+  margin-bottom: $spacing-typography;
+  color: var(--text);
+  font-size: 1rem;
+  font-style: normal;
+}
+
+// Links
+// 1. Remove the gray background on active links in IE 10.
+a {
+  background-color: transparent; // 1
+  color: var(--primary);
+  text-decoration: none;
+  transition:
+    background-color $transition,
+    color $transition,
+    text-decoration $transition,
+    box-shadow $transition;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: var(--primary-hover);
+    text-decoration: underline;
+  }
+
+  &:focus {
+    outline: none;
+    background-color: var(--primary-focus);
+  }
+}
+
+// Link .secondary
+@if $enable-classes {
+  a.secondary {
+    color: var(--secondary);
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: var(--secondary-hover);
+    }
+
+    &:focus {
+      background-color: var(--secondary-focus);
+    }
+  }
+}
+
+// Headings
+// Because vertical margins can collapse, we avoid `margin-top`
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: $spacing-typography;
+  font-weight: $heading-weight;
+}
+
+h1 {
+  margin-bottom: $spacing-typography*2;
+  color: var(--h1);
+  font-size: 2rem;
+}
+
+h2 {
+  margin-bottom: $spacing-typography*1.75;
+  color: var(--h2);
+  font-size: 1.75rem;
+}
+
+h3 {
+  margin-bottom: $spacing-typography*1.5;
+  color: var(--h3);
+  font-size: 1.5rem;
+}
+
+h4 {
+  margin-bottom: $spacing-typography*1.25;
+  color: var(--h4);
+  font-size: 1.25rem;
+}
+
+h5 {
+  margin-bottom: $spacing-typography*1.125;
+  color: var(--h5);
+  font-size: 1.125rem;
+}
+
+h6 {
+  color: var(--h6);
+  font-size: 1rem;
+}
+
+// Increase headings font size inside <header>
+header {
+
+  h1 {
+    font-size: 2rem*1.5;
+  }
+
+  h2 {
+    font-size: 1.75rem*1.5;
+  }
+
+  h3 {
+    font-size: 1.5rem*1.5;
+  }
+
+  h4 {
+    font-size: 1.25rem*1.5;
+  }
+
+  h5 {
+    font-size: 1.125rem*1.5;
+  }
+
+  h6 {
+    font-size: 1rem*1.5;
+  }
+}
+
+// Multi-level heading
+hgroup {
+  margin-bottom: $spacing-typography;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    margin-bottom: 0;
+  }
+}
+
+// Paragraphs
+p {
+  margin-bottom: $spacing-typography/2;
+}
+
+// Small
+small {
+  font-size: 85%;
+
+  @if map-get($breakpoints, "sm") and $enable-responsive-typography {
+    @media (min-width: map-get($breakpoints, "sm")) {
+      font-size: 83%;
+    }
+  }
+
+  @if map-get($breakpoints, "md") and $enable-responsive-typography {
+    @media (min-width: map-get($breakpoints, "md")) {
+      font-size: 81%;
+    }
+  }
+
+  @if map-get($breakpoints, "lg") and $enable-responsive-typography {
+    @media (min-width: map-get($breakpoints, "lg")) {
+      font-size: 79%;
+    }
+  }
+  @if map-get($breakpoints, "lg") and $enable-responsive-typography {
+    @media (min-width: map-get($breakpoints, "xl")) {
+      font-size: 77%;
+    }
+  }
+}
+
+// Lists
+ul,
+ol {
+  padding-left: $spacing-typography;
+
+  li {
+    margin-bottom: $spacing-typography/2;
+  }
+}
+ul li {
+  list-style: square;
+}
+
+// Marked text
+mark {
+  padding: .125rem .25rem;
+  background: var(--mark);
+  color: var(--text);
+  vertical-align: middle;
+}
+
+// Blockquote
+blockquote {
+  display: block;
+  margin: ($spacing-typography*2) 0;
+  margin-right: -$spacing-gutter;
+  margin-left: -$spacing-gutter;
+  padding: $spacing-gutter;
+  border-left: .25rem solid var(--muted-border);
+
+  @if map-get($breakpoints, "sm") {
+    @media (min-width: map-get($breakpoints, "sm")) {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
+
+  footer {
+    margin-top: $spacing-typography/2;
+    color: var(--muted-text);
+  }
+}
+
+// Abbreviations
+// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari.
+abbr[title] {
+  border-bottom: 1px dotted;
+  text-decoration: none; // 1
+  cursor: help;
+}
+
+// Ins
+ins {
+  color: var(--valid);
+  text-decoration: none;
+}
+// del
+del {
+  color: var(--invalid);
+}
diff --git a/scss/layout/_container.scss b/scss/layout/_container.scss
new file mode 100644
index 00000000..08ba2dba
--- /dev/null
+++ b/scss/layout/_container.scss
@@ -0,0 +1,44 @@
+@if ($enable-class-container and $enable-classes) {
+
+/**
+ * Container
+ */
+
+  .container,
+  .container-fluid {
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    padding-right: $spacing-gutter;
+    padding-left: $spacing-gutter;
+  }
+
+  .container {
+
+    @if map-get($breakpoints, "sm") and $enable-viewport {
+      @media (min-width: map-get($breakpoints, "sm")) {
+        padding-right: 0;
+        padding-left: 0;
+        max-width: map-get($viewports, "sm");
+      }
+    }
+
+    @if map-get($breakpoints, "md") and $enable-viewport {
+      @media (min-width: map-get($breakpoints, "md")) {
+        max-width: map-get($viewports, "md");
+      }
+    }
+
+    @if map-get($breakpoints, "lg") and $enable-viewport {
+      @media (min-width: map-get($breakpoints, "lg")) {
+        max-width: map-get($viewports, "lg");
+      }
+    }
+
+    @if map-get($breakpoints, "xl") and $enable-viewport {
+      @media (min-width: map-get($breakpoints, "xl")) {
+        max-width: map-get($viewports, "xl");
+      }
+    }
+  }
+}
diff --git a/scss/layout/_document.scss b/scss/layout/_document.scss
new file mode 100644
index 00000000..3a34408e
--- /dev/null
+++ b/scss/layout/_document.scss
@@ -0,0 +1,68 @@
+/**
+ * Document
+ * Content-box & Responsive typography
+ */
+
+
+// Reboot
+// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// ––––––––––––––––––––
+
+// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
+*,
+*::before,
+*::after {
+  box-sizing: border-box; // 1
+}
+
+// 1. Correct the line height in all browsers.
+// 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
+// 3. Change the default tap highlight to be completely transparent in iOS.
+html {
+  -webkit-text-size-adjust: 100%; // 2
+  -webkit-tap-highlight-color: rgba(0,0,0,0); // 3
+  background: var(--background);
+  color: var(--text);
+  font-family: $sans-serif;
+  font-size: map-get($base-font, "xs");
+  font-weight: $text-weight;
+  line-height: $line-height; // 1
+  text-rendering: optimizeLegibility;
+
+  @if map-get($breakpoints, "sm") and
+    map-get($base-font, "sm") and
+    $enable-responsive-typography {
+
+    @media (min-width: map-get($breakpoints, "sm")) {
+      font-size: map-get($base-font, "sm");
+    }
+  }
+
+  @if map-get($breakpoints, "md") and
+    map-get($base-font, "md") and
+    $enable-responsive-typography {
+
+    @media (min-width: map-get($breakpoints, "md")) {
+      font-size: map-get($base-font, "md");
+    }
+  }
+
+  @if map-get($breakpoints, "lg") and
+    map-get($base-font, "lg") and
+    $enable-responsive-typography {
+
+    @media (min-width: map-get($breakpoints, "lg")) {
+      font-size: map-get($base-font, "lg");
+    }
+  }
+
+  @if map-get($breakpoints, "xl") and
+    map-get($base-font, "xl") and
+    $enable-responsive-typography {
+
+    @media (min-width: map-get($breakpoints, "xl")) {
+      font-size: map-get($base-font, "xl");
+    }
+  }
+
+}
diff --git a/scss/layout/_grid.scss b/scss/layout/_grid.scss
new file mode 100644
index 00000000..7b8d9cd2
--- /dev/null
+++ b/scss/layout/_grid.scss
@@ -0,0 +1,30 @@
+@if $enable-classes {
+
+/**
+ * Grid
+ * Minimal grid system with auto-layout columns
+ */
+
+  .grid {
+    margin: 0;
+
+    @if map-get($breakpoints, "lg") {
+      @media (min-width: map-get($breakpoints, "lg")) {
+        grid-column-gap: $spacing-gutter;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
+      }
+    }
+
+    & > * {
+      min-width: 0; // HACK for childs in overflow
+      margin-bottom: $spacing-gutter;
+
+      @if map-get($breakpoints, "md") {
+        @media (min-width: map-get($breakpoints, "lg")) {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
diff --git a/scss/layout/_scroller.scss b/scss/layout/_scroller.scss
new file mode 100644
index 00000000..e2d68e8d
--- /dev/null
+++ b/scss/layout/_scroller.scss
@@ -0,0 +1,29 @@
+/**
+ * Horizontal scroller (<figure>)
+ */
+
+// Wrapper to make any content responsive across all viewports
+figure {
+  display: block;
+  margin-right: -$spacing-gutter;
+  margin-left: -$spacing-gutter;
+  padding: 0;
+  overflow-x: auto;
+
+  figcaption {
+    color: var(--muted-text);
+    font-size: 87.5%;
+    padding: 0 $spacing-gutter ;
+  }
+
+  @if map-get($breakpoints, "sm") {
+    @media (min-width: map-get($breakpoints, "sm")) {
+      margin-right: 0;
+      margin-left: 0;
+
+      figcaption {
+        padding: 0;
+      }
+    }
+  }
+}
diff --git a/scss/layout/_section.scss b/scss/layout/_section.scss
new file mode 100644
index 00000000..fa3cef64
--- /dev/null
+++ b/scss/layout/_section.scss
@@ -0,0 +1,44 @@
+/**
+ * Section
+ * Responsive spacings for section
+ */
+
+section {
+  margin-bottom: $spacing-block*map-get($spacing-factor, "xs")*2;
+
+  @if map-get($breakpoints, "sm") and
+    map-get($spacing-factor, "sm") and
+    $enable-responsive-spacings {
+
+    @media (min-width: map-get($breakpoints, "sm")) {
+      margin-bottom: $spacing-block*map-get($spacing-factor, "sm")*2;
+    }
+  }
+
+  @if map-get($breakpoints, "md") and
+    map-get($spacing-factor, "md") and
+    $enable-responsive-spacings {
+
+    @media (min-width: map-get($breakpoints, "md")) {
+      margin-bottom: $spacing-block*map-get($spacing-factor, "md")*2;
+    }
+  }
+
+  @if map-get($breakpoints, "lg") and
+    map-get($spacing-factor, "lg") and
+    $enable-responsive-spacings {
+
+    @media (min-width: map-get($breakpoints, "lg")) {
+      margin-bottom: $spacing-block*map-get($spacing-factor, "lg")*2;
+    }
+  }
+
+  @if map-get($breakpoints, "xl") and
+    map-get($spacing-factor, "xl") and
+    $enable-responsive-spacings {
+
+    @media (min-width: map-get($breakpoints, "xl")) {
+      margin-bottom: $spacing-block*map-get($spacing-factor, "xl")*2;
+    }
+  }
+}
diff --git a/scss/layout/_sectioning.scss b/scss/layout/_sectioning.scss
new file mode 100644
index 00000000..42b0854c
--- /dev/null
+++ b/scss/layout/_sectioning.scss
@@ -0,0 +1,113 @@
+/**
+ * Sectioning
+ * Container and responsive spacings for header, main, footer
+ */
+
+
+// Reboot
+// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// ––––––––––––––––––––
+
+// Render the `main` element consistently in IE.
+main {
+  display: block;
+}
+
+
+// Pico
+// ––––––––––––––––––––
+
+body {
+  width: 100%;
+  margin: 0;
+
+  > header,
+  > main,
+  > footer {
+
+    $padding-horizontal: $spacing-gutter !default;
+    $spacing-vertical: $spacing-block !default;
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+
+    // xs
+    @if $enable-semantic-container == false {
+      $padding-horizontal: 0;
+    }
+    padding: $spacing-vertical $padding-horizontal;
+
+    // sm
+    @if map-get($breakpoints, "sm")
+      and ($enable-responsive-spacings or $enable-semantic-container) {
+
+      @media (min-width: map-get($breakpoints, "sm")) {
+        @if $enable-viewport and $enable-semantic-container {
+          max-width: map-get($viewports, "sm");
+        }
+        @if $enable-responsive-spacings or $enable-viewport {
+          @if $enable-viewport or $enable-semantic-container == false {
+            $padding-horizontal: 0;
+          }
+          @else {
+            $padding-horizontal: $spacing-gutter;
+          }
+          @if $enable-responsive-spacings and map-get($spacing-factor, "sm") {
+            $spacing-vertical: $spacing-block*map-get($spacing-factor, "sm");
+          }
+          @else {
+            $spacing-vertical: $spacing-block;
+          }
+          padding: $spacing-vertical $padding-horizontal;
+        }
+      }
+    }
+
+    // md
+    @if map-get($breakpoints, "md")
+      and ($enable-responsive-spacings or $enable-semantic-container) {
+
+      @media (min-width: map-get($breakpoints, "md")) {
+        @if $enable-viewport and $enable-semantic-container {
+          max-width: map-get($viewports, "md");
+        }
+        @if $enable-responsive-spacings and map-get($spacing-factor, "md")  {
+          $spacing-vertical: $spacing-block*map-get($spacing-factor, "md");
+          padding: $spacing-vertical $padding-horizontal;
+        }
+      }
+    }
+
+    // lg
+    @if map-get($breakpoints, "lg")
+      and ($enable-responsive-spacings or $enable-semantic-container) {
+
+      @media (min-width: map-get($breakpoints, "lg")) {
+        @if $enable-viewport and $enable-semantic-container {
+          max-width: map-get($viewports, "lg");
+        }
+        @if $enable-responsive-spacings and map-get($spacing-factor, "lg")  {
+          $spacing-vertical: $spacing-block*map-get($spacing-factor, "lg");
+          padding: $spacing-vertical $padding-horizontal;
+        }
+      }
+    }
+
+    // xl
+    @if map-get($breakpoints, "xl")
+      and ($enable-responsive-spacings or $enable-semantic-container) {
+
+      @media (min-width: map-get($breakpoints, "xl")) {
+        @if $enable-viewport and $enable-semantic-container {
+          max-width: map-get($viewports, "xl");
+        }
+        @if $enable-responsive-spacings and map-get($spacing-factor, "xl")  {
+          $spacing-vertical: $spacing-block*map-get($spacing-factor, "xl");
+          padding: $spacing-vertical $padding-horizontal;
+        }
+      }
+    }
+
+
+  }
+}
diff --git a/scss/pico.classless.scss b/scss/pico.classless.scss
new file mode 100644
index 00000000..34c34390
--- /dev/null
+++ b/scss/pico.classless.scss
@@ -0,0 +1,5 @@
+// Classless version
+
+$enable-semantic-container: true;
+$enable-classes: false;
+@import "pico";
diff --git a/scss/pico.fluid.classless.scss b/scss/pico.fluid.classless.scss
new file mode 100644
index 00000000..833d87f9
--- /dev/null
+++ b/scss/pico.fluid.classless.scss
@@ -0,0 +1,6 @@
+// Fluid version
+
+$enable-semantic-container: true;
+$enable-viewport: false;
+$enable-classes: false;
+@import "pico";
diff --git a/scss/pico.scss b/scss/pico.scss
new file mode 100644
index 00000000..f89fa3e0
--- /dev/null
+++ b/scss/pico.scss
@@ -0,0 +1,34 @@
+/*!
+ * Pico.css v0.1.0 (https://picocss.com)
+ * Copyright 2019 - Licensed under MIT
+ */
+
+// Config
+@import "colors";
+@import "variables";
+
+// Theming
+@import "themes/light";
+@import "themes/dark";
+
+// Layout
+@import "layout/document";        // html
+@import "layout/sectioning";      // body, header, main, footer
+@import "layout/container";       // .container
+@import "layout/section";         // main > section
+@import "layout/grid";            // .grid
+@import "layout/scroller";        // figure
+
+// Content
+@import "content/typography";     // a, headings, p, ul ...
+@import "content/form";           // label, input, select, ...
+@import "content/button";         // button, a[role=button]
+@import "content/table";          // table, tr, td, ...
+@import "content/code";           // pre, code, ...
+@import "content/miscs";          // hr, progress, template, [hidden]
+
+// Components
+@import "components/accordion";   // details, summary
+@import "components/card";        // article
+@import "components/nav";         // nav
+@import "components/tooltip";     // data-tooltip
diff --git a/scss/themes/_dark.scss b/scss/themes/_dark.scss
new file mode 100644
index 00000000..2d2894de
--- /dev/null
+++ b/scss/themes/_dark.scss
@@ -0,0 +1,137 @@
+/**
+ * Dark theme (Auto)
+ * Automatically enabled if user has Dark mode enabled
+ */
+
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+
+    // Document
+    --background:        #{darken($grey-900, 6%)};
+
+    // Typography
+    --text:              #{$grey-300};
+    --h1:                #{$grey-50};
+    --h2:                #{$grey-100};
+    --h3:                #{$grey-200};
+    --h4:                #{$grey-300};
+    --h5:                #{$grey-400};
+    --h6:                #{$grey-500};
+    --mark:              #{rgba($amber-200, .25)};
+
+    // Call-to-Action
+    --primary:            #{$primary-600};
+    --primary-hover:      #{$primary-500};
+    --primary-focus:      #{rgba($primary-600, .25)};
+    --primary-inverse:    #{$white};
+
+    // Secondary Call-to-Action
+    --secondary:         #{$grey-200};
+    --secondary-hover:   #{$grey-50};
+    --secondary-focus:   #{rgba($grey-200, .25)};
+    --secondary-inverse: #{$grey-900};
+
+    // Form elements
+    --input-background:  #{darken($grey-900, 6%)};
+    --input-border:      #{mix($grey-800, $grey-700)};
+
+    // Utilities states
+    --valid:             #{$green-700};
+    --invalid:           #{$red-900};
+
+    // Utilities states
+    --valid:             #{$green-700};
+    --invalid:           #{$red-900};
+    --muted-text:        #{$grey-500)};
+    --muted-background:  #{darken($grey-900, 6%)};
+    --muted-border:      #{mix($grey-800, $grey-900)};
+
+    // Card
+    --card-background:   #{darken($grey-900, 2%)};
+    --card-shadow:       0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.09)};
+
+    // Code
+    --code-background:   #{darken($grey-900, 4%)};
+    --code-border:       #{mix($grey-800, $grey-900)};
+    --code-inlined:      #{rgba($grey-700, .25)};
+    --code-color-1:      #{desaturate($red-700, 10%)};
+    --code-color-2:      #{desaturate($primary-500, 40%)};
+
+    // Badge
+    --badge-background:  #{$grey-800};
+    --badge-text:        #{$grey-300};
+
+    // Table
+    --table-background:  #{darken($grey-900, 4%)};
+    --table-border:      #{darken($grey-900, 6%)};
+  }
+}
+
+
+
+/**
+ * Dark theme (Forced)
+ * Enabled if forced with data-theme="dark"
+ */
+
+[data-theme="dark"] {
+
+  // Document
+  --background:        #{darken($grey-900, 6%)};
+
+  // Typography
+  --text:              #{$grey-300};
+  --h1:                #{$grey-50};
+  --h2:                #{$grey-100};
+  --h3:                #{$grey-200};
+  --h4:                #{$grey-300};
+  --h5:                #{$grey-400};
+  --h6:                #{$grey-500};
+  --mark:              #{rgba($amber-200, .25)};
+
+  // Call-to-Action
+  --primary:            #{$primary-600};
+  --primary-hover:      #{$primary-500};
+  --primary-focus:      #{rgba($primary-600, .25)};
+  --primary-inverse:    #{$white};
+
+  // Secondary Call-to-Action
+  --secondary:         #{$grey-200};
+  --secondary-hover:   #{$grey-50};
+  --secondary-focus:   #{rgba($grey-200, .25)};
+  --secondary-inverse: #{$grey-900};
+
+  // Form elements
+  --input-background:  #{darken($grey-900, 6%)};
+  --input-border:      #{mix($grey-800, $grey-700)};
+
+  // Utilities states
+  --valid:             #{$green-700};
+  --invalid:           #{$red-900};
+
+  // Utilities states
+  --valid:             #{$green-700};
+  --invalid:           #{$red-900};
+  --muted-text:        #{$grey-500)};
+  --muted-background:  #{darken($grey-900, 6%)};
+  --muted-border:      #{mix($grey-800, $grey-900)};
+
+  // Card
+  --card-background:   #{darken($grey-900, 2%)};
+  --card-shadow:       0 0.125rem 1rem #{rgba($black, 0.06)}, 0 0.125rem 2rem #{rgba($black, 0.12)}, 0 0 0 0.0625rem #{rgba($black, 0.09)};
+
+  // Code
+  --code-background:   #{darken($grey-900, 4%)};
+  --code-border:       #{mix($grey-800, $grey-900)};
+  --code-inlined:      #{rgba($grey-700, .25)};
+  --code-color-1:      #{desaturate($red-700, 10%)};
+  --code-color-2:      #{desaturate($primary-500, 40%)};
+
+  // Badge
+  --badge-background:  #{$grey-800};
+  --badge-text:        #{$grey-300};
+
+  // Table
+  --table-background:  #{darken($grey-900, 4%)};
+  --table-border:      #{darken($grey-900, 6%)};
+}
diff --git a/scss/themes/_light.scss b/scss/themes/_light.scss
new file mode 100644
index 00000000..25e1ff9c
--- /dev/null
+++ b/scss/themes/_light.scss
@@ -0,0 +1,63 @@
+/**
+ * Light theme (Default)
+ * Can be forced with data-theme="light"
+ */
+
+[data-theme="light"],
+:root:not([data-theme="dark"]) {
+
+  // Document
+  --background:        #{$white};
+
+  // Typography
+  --text:              #{$grey-700};
+  --h1:                #{$grey-900};
+  --h2:                #{$grey-800};
+  --h3:                #{$grey-700};
+  --h4:                #{$grey-600};
+  --h5:                #{$grey-500};
+  --h6:                #{$grey-400};
+  --mark:              #{rgba($amber-200, .5)};
+
+  // Primary Call-to-Action
+  --primary:            #{$primary-600};
+  --primary-hover:      #{$primary-700};
+  --primary-focus:      #{rgba($primary-600, .125)};
+  --primary-inverse:    #{$white};
+
+  // Secondary Call-to-Action
+  --secondary:         #{mix($grey-700, $grey-800)};
+  --secondary-hover:   #{mix($grey-800, $grey-900)};
+  --secondary-focus:   #{rgba(mix($grey-700, $grey-800), .125)};
+  --secondary-inverse: #{$white};
+
+  // Form elements
+  --input-background:  #{$white};
+  --input-border:      #{mix($grey-100, $grey-200)};
+
+  // Utilities states
+  --valid:             #{$green-600};
+  --invalid:           #{$red-700};
+  --muted-text:        #{mix($grey-400, $grey-500)};
+  --muted-background:  #{$grey-50};
+  --muted-border:      #{$grey-50};
+
+  // Card
+  --card-background:   #{$white};
+  --card-shadow:       0 0.125rem 1rem #{rgba($grey-900, 0.04)}, 0 0.125rem 2rem #{rgba($grey-900, 0.08)}, 0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
+
+  // Code
+  --code-background:   #{lighten($grey-50, 2%)};
+  --code-border:       #{$grey-100};
+  --code-inlined:      #{$grey-50};
+  --code-color-1:      #{desaturate($red-700, 20%)};
+  --code-color-2:      #{desaturate($primary-600, 30%)};
+
+  // Badge
+  --badge-background:  #{$grey-500};
+  --badge-text:        #{$white};
+
+  // Table
+  --table-background:  #{$white};
+  --table-border:      #{rgba($grey-50, .75)};
+}