diff --git a/_site/heti.css b/_site/heti.css
index 3af5581..d92d890 100644
--- a/_site/heti.css
+++ b/_site/heti.css
@@ -111,8 +111,12 @@
   background-color: rgba(0, 0, 0, 0.054);
 }
 
+[data-darkmode="dark"] .heti blockquote {
+  background-color: rgba(255, 255, 255, 0.054);
+}
+
 @media (prefers-color-scheme: dark) {
-  .heti blockquote {
+  [data-darkmode="auto"] .heti blockquote {
     background-color: rgba(255, 255, 255, 0.054);
   }
 }
@@ -139,8 +143,12 @@
   background-color: #cccccc;
 }
 
+[data-darkmode="dark"] .heti hr {
+  background-color: #404040;
+}
+
 @media (prefers-color-scheme: dark) {
-  .heti hr {
+  [data-darkmode="auto"] .heti hr {
     background-color: #404040;
   }
 }
@@ -172,8 +180,12 @@
   background-color: rgba(0, 0, 0, 0.054);
 }
 
+[data-darkmode="dark"] .heti pre {
+  background-color: rgba(255, 255, 255, 0.054);
+}
+
 @media (prefers-color-scheme: dark) {
-  .heti pre {
+  [data-darkmode="auto"] .heti pre {
     background-color: rgba(255, 255, 255, 0.054);
   }
 }
@@ -311,8 +323,12 @@
   word-break: break-word;
 }
 
+[data-darkmode="dark"] .heti table {
+  border-color: #404040;
+}
+
 @media (prefers-color-scheme: dark) {
-  .heti table {
+  [data-darkmode="auto"] .heti table {
     border-color: #404040;
   }
 }
@@ -328,8 +344,13 @@
   border-color: #cccccc;
 }
 
+[data-darkmode="dark"] .heti th, [data-darkmode="dark"]
+.heti td {
+  border-color: #404040;
+}
+
 @media (prefers-color-scheme: dark) {
-  .heti th,
+  [data-darkmode="auto"] .heti th, [data-darkmode="auto"]
   .heti td {
     border-color: #404040;
   }
@@ -413,8 +434,12 @@
   color: inherit;
 }
 
+[data-darkmode="dark"] .heti mark {
+  background-color: rgba(77, 74, 0, 0.88);
+}
+
 @media (prefers-color-scheme: dark) {
-  .heti mark {
+  [data-darkmode="auto"] .heti mark {
     background-color: rgba(77, 74, 0, 0.88);
   }
 }
@@ -466,8 +491,13 @@
   background-color: #dbedff;
 }
 
+[data-darkmode="dark"] .heti sup:target, [data-darkmode="dark"]
+.heti sup a:target {
+  background-color: #3a6188;
+}
+
 @media (prefers-color-scheme: dark) {
-  .heti sup:target,
+  [data-darkmode="auto"] .heti sup:target, [data-darkmode="auto"]
   .heti sup a:target {
     background-color: #3a6188;
   }
@@ -491,8 +521,12 @@
   border-block-end-color: rgba(0, 0, 0, 0.54);
 }
 
+[data-darkmode="dark"] .heti u[title] {
+  border-block-end-color: rgba(255, 255, 255, 0.54);
+}
+
 @media (prefers-color-scheme: dark) {
-  .heti u[title] {
+  [data-darkmode="auto"] .heti u[title] {
     border-block-end-color: rgba(255, 255, 255, 0.54);
   }
 }
@@ -807,8 +841,12 @@
   line-height: 24px;
 }
 
+[data-darkmode="dark"] .heti .heti-fn {
+  border-block-start-color: #404040;
+}
+
 @media (prefers-color-scheme: dark) {
-  .heti .heti-fn {
+  [data-darkmode="auto"] .heti .heti-fn {
     border-block-start-color: #404040;
   }
 }
@@ -822,8 +860,12 @@
   background-color: #dbedff;
 }
 
+[data-darkmode="dark"] .heti .heti-fn li:target {
+  background-color: #3a6188;
+}
+
 @media (prefers-color-scheme: dark) {
-  .heti .heti-fn li:target {
+  [data-darkmode="auto"] .heti .heti-fn li:target {
     background-color: #3a6188;
   }
 }
diff --git a/_site/index.css b/_site/index.css
index be964ac..989abca 100644
--- a/_site/index.css
+++ b/_site/index.css
@@ -1,217 +1,930 @@
 @charset "UTF-8";
-/* Project: Heti homepage URL: https://github.com/sivan/heti Author: Sivan [sun.sivan@gmail.com] */
+/*
+ * Project: Heti homepage
+ * URL: https://github.com/sivan/heti
+ * Author: Sivan [sun.sivan@gmail.com]
+ */
 /* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-/* Document ========================================================================== */
-/** 1. Correct the line height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. */
-html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ }
+/* Document
+   ========================================================================== */
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+html {
+  line-height: 1.15;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+}
 
-/* Sections ========================================================================== */
-/** Remove the margin in all browsers. */
-body { margin: 0; }
+/* Sections
+   ========================================================================== */
+/**
+ * Remove the margin in all browsers.
+ */
+body {
+  margin: 0;
+}
 
-/** Render the `main` element consistently in IE. */
-main { display: block; }
+/**
+ * Render the `main` element consistently in IE.
+ */
+main {
+  display: block;
+}
 
-/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
-h1 { font-size: 2em; margin: 0.67em 0; }
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
 
-/* Grouping content ========================================================================== */
-/** 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 */ }
+/* Grouping content
+   ========================================================================== */
+/**
+ * 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 */
+}
 
-/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
-pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+pre {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
 
-/* Text-level semantics ========================================================================== */
-/** Remove the gray background on active links in IE 10. */
-a { background-color: transparent; }
+/* Text-level semantics
+   ========================================================================== */
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+a {
+  background-color: transparent;
+}
 
-/** 1. Remove the bottom border in Chrome 57- 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
-abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ }
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+abbr[title] {
+  border-bottom: none;
+  /* 1 */
+  text-decoration: underline;
+  /* 2 */
+  text-decoration: underline dotted;
+  /* 2 */
+}
 
-/** Add the correct font weight in Chrome, Edge, and Safari. */
-b, strong { font-weight: bolder; }
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+b,
+strong {
+  font-weight: bolder;
+}
 
-/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
-code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
 
-/** Add the correct font size in all browsers. */
-small { font-size: 80%; }
+/**
+ * Add the correct font size in all browsers.
+ */
+small {
+  font-size: 80%;
+}
 
-/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
-sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
 
-sub { bottom: -0.25em; }
+sub {
+  bottom: -0.25em;
+}
 
-sup { top: -0.5em; }
+sup {
+  top: -0.5em;
+}
 
-/* Embedded content ========================================================================== */
-/** Remove the border on images inside links in IE 10. */
-img { border-style: none; }
+/* Embedded content
+   ========================================================================== */
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+img {
+  border-style: none;
+}
 
-/* Forms ========================================================================== */
-/** 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. */
-button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ }
+/* Forms
+   ========================================================================== */
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  line-height: 1.15;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+}
 
-/** Show the overflow in IE. 1. Show the overflow in Edge. */
-button, input { /* 1 */ overflow: visible; }
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
 
-/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */
-button, select { /* 1 */ text-transform: none; }
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
 
-/** Correct the inability to style clickable types in iOS and Safari. */
-button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
+/**
+ * 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 { border-style: none; padding: 0; }
+/**
+ * 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 {
+  border-style: none;
+  padding: 0;
+}
 
-/** 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; }
+/**
+ * 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;
+}
 
-/** Correct the padding in Firefox. */
-fieldset { padding: 0.35em 0.75em 0.625em; }
+/**
+ * Correct the padding in Firefox.
+ */
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
 
-/** 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 { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }
+/**
+ * 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 {
+  box-sizing: border-box;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  display: table;
+  /* 1 */
+  max-width: 100%;
+  /* 1 */
+  padding: 0;
+  /* 3 */
+  white-space: normal;
+  /* 1 */
+}
 
-/** Add the correct vertical alignment in Chrome, Firefox, and Opera. */
-progress { vertical-align: baseline; }
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+progress {
+  vertical-align: baseline;
+}
 
-/** Remove the default vertical scrollbar in IE 10+. */
-textarea { overflow: auto; }
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+textarea {
+  overflow: auto;
+}
 
-/** 1. Add the correct box sizing in IE 10. 2. Remove the padding in IE 10. */
-[type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box;
+  /* 1 */
+  padding: 0;
+  /* 2 */
+}
 
-/** Correct the cursor style of increment and decrement buttons in Chrome. */
-[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-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 */ }
+/**
+ * 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; }
+/**
+ * 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 */ }
+/**
+ * 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 */
+}
 
-/* Interactive ========================================================================== */
-/* Add the correct display in Edge, IE 10+, and Firefox. */
-details { display: block; }
+/* Interactive
+   ========================================================================== */
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+details {
+  display: block;
+}
 
-/* Add the correct display in all browsers. */
-summary { display: list-item; }
+/*
+ * Add the correct display in all browsers.
+ */
+summary {
+  display: list-item;
+}
 
-/* Misc ========================================================================== */
-/** Add the correct display in IE 10+. */
-template { display: none; }
+/* Misc
+   ========================================================================== */
+/**
+ * Add the correct display in IE 10+.
+ */
+template {
+  display: none;
+}
 
-/** Add the correct display in IE 10. */
-[hidden] { display: none; }
+/**
+ * Add the correct display in IE 10.
+ */
+[hidden] {
+  display: none;
+}
 
 /* 简单模拟 css reset */
-* { margin: 0; padding: 0; }
+* {
+  margin: 0;
+  padding: 0;
+}
 
-ul, ol { list-style: none; }
+ul,
+ol {
+  list-style: none;
+}
 
 /* 模拟不知道哪里流传出来的垃圾代码 */
-ul, li { list-style: none; }
+ul,
+li {
+  list-style: none;
+}
 
-.container[data-bg-grid="grid-12"] { background-size: 100% 12px; background-image: linear-gradient(transparent 11px, #ededed 1px), linear-gradient(to left, transparent 12px, #ededed, transparent 13px), linear-gradient(to right, transparent 12px, #ededed, transparent 13px); }
+.container[data-bg-grid="grid-12"] {
+  background-size: 100% 12px;
+  background-image: linear-gradient(transparent 11px, #ededed 1px), linear-gradient(to left, transparent 12px, #ededed, transparent 13px), linear-gradient(to right, transparent 12px, #ededed, transparent 13px);
+}
 
-.container[data-bg-grid="grid-12"] .heti--vertical { outline: 1px solid #ededed; background-size: 12px 100%; background-image: linear-gradient(to left, transparent 11px, #ededed 1px); }
+.container[data-bg-grid="grid-12"] .heti--vertical {
+  outline: 1px solid #ededed;
+  background-size: 12px 100%;
+  background-image: linear-gradient(to left, transparent 11px, #ededed 1px);
+}
 
-.container[data-bg-grid="grid-24"] { background-size: 100% 24px; background-image: linear-gradient(transparent 23px, #ededed 1px), linear-gradient(to left, transparent 12px, #ededed, transparent 13px), linear-gradient(to right, transparent 12px, #ededed, transparent 13px); }
+.container[data-bg-grid="grid-24"] {
+  background-size: 100% 24px;
+  background-image: linear-gradient(transparent 23px, #ededed 1px), linear-gradient(to left, transparent 12px, #ededed, transparent 13px), linear-gradient(to right, transparent 12px, #ededed, transparent 13px);
+}
 
-.container[data-bg-grid="grid-24"] .heti--vertical { outline: 1px solid #ededed; background-size: 24px 100%; background-image: linear-gradient(to left, transparent 23px, #ededed 1px); }
+.container[data-bg-grid="grid-24"] .heti--vertical {
+  outline: 1px solid #ededed;
+  background-size: 24px 100%;
+  background-image: linear-gradient(to left, transparent 23px, #ededed 1px);
+}
 
-@media (prefers-color-scheme: dark) { .container[data-bg-grid="grid-12"] { background-image: linear-gradient(transparent 11px, #333333 1px), linear-gradient(to left, transparent 12px, #333333, transparent 13px), linear-gradient(to right, transparent 12px, #333333, transparent 13px); }
-  .container[data-bg-grid="grid-12"] .heti--vertical { background-size: 12px 100%; background-image: linear-gradient(to left, transparent 11px, #333333 1px); }
-  .container[data-bg-grid="grid-24"] { background-image: linear-gradient(transparent 23px, #333333 1px), linear-gradient(to left, transparent 12px, #333333, transparent 13px), linear-gradient(to right, transparent 12px, #333333, transparent 13px); }
-  .container[data-bg-grid="grid-24"] .heti--vertical { background-size: 24px 100%; background-image: linear-gradient(to left, transparent 23px, #333333 1px); } }
+[data-darkmode="dark"] .container[data-bg-grid="grid-12"] {
+  background-image: linear-gradient(transparent 11px, #333333 1px), linear-gradient(to left, transparent 12px, #333333, transparent 13px), linear-gradient(to right, transparent 12px, #333333, transparent 13px);
+}
 
-@media screen and (min-width: 640px) { .container[data-bg-grid="grid-12"] { background-image: linear-gradient(transparent 11px, #ededed 1px), linear-gradient(to left, transparent 48px, #ededed, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 0, 0, 0.4), transparent 49px); }
-  .container[data-bg-grid="grid-24"] { background-image: linear-gradient(transparent 23px, #ededed 1px), linear-gradient(to left, transparent 48px, #ededed, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 0, 0, 0.4), transparent 49px); } }
+[data-darkmode="dark"] .container[data-bg-grid="grid-12"] .heti--vertical {
+  background-size: 12px 100%;
+  background-image: linear-gradient(to left, transparent 11px, #333333 1px);
+}
 
-@media screen and (min-width: 640px) and (prefers-color-scheme: dark) { .container[data-bg-grid="grid-12"] { background-image: linear-gradient(transparent 11px, #333333 1px), linear-gradient(to left, transparent 48px, #333333, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 77, 77, 0.4), transparent 49px); }
-  .container[data-bg-grid="grid-24"] { background-image: linear-gradient(transparent 23px, #333333 1px), linear-gradient(to left, transparent 48px, #333333, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 77, 77, 0.4), transparent 49px); } }
+[data-darkmode="dark"] .container[data-bg-grid="grid-24"] {
+  background-image: linear-gradient(transparent 23px, #333333 1px), linear-gradient(to left, transparent 12px, #333333, transparent 13px), linear-gradient(to right, transparent 12px, #333333, transparent 13px);
+}
 
-.panel-list { --bg-color: hsl(240, 100%, 100%); --bg-tap-color: hsl(300, 3%, 94%); --border-color: hsla(0, 0%, 76%, 0.88); --border-inline-start-color: hsl(0, 0%, 76%); --border-inline-end-color: hsl(0, 0%, 76%); --border-block-start-color: hsl(0, 0%, 79%); --border-block-end-color: hsl(0, 0%, 65%); --text-color: hsl(60, 1%, 16%); --box-shadow-color: hsla(0, 0%, 86%, 0.54); --bg-highlight-color-start: hsl(216, 87%, 70%); --bg-highlight-color-end: hsl(215, 93%, 52%); --bg-highlight-tap-color-start: hsl(216, 92%, 65%); --bg-highlight-tap-color-end: hsl(215, 95%, 44%); --border-highlight-color: hsla(216, 90%, 57%, 0.88); --border-highlight-tap-color: hsla(216, 85%, 52%, 0.88); --border-inline-start-highlight-color: hsl(216, 90%, 57%); --border-inline-end-highlight-color: hsl(216, 90%, 57%); --border-inline-start-highlight-tap-color: hsl(216, 85%, 52%); --border-inline-end-highlight-tap-color: hsl(216, 85%, 52%); --border-block-start-highlight-color: hsl(216, 87%, 63%); --border-block-end-highlight-color: hsl(215, 99%, 49%); --border-block-start-highlight-tap-color: hsl(216, 93%, 57%); --border-block-end-highlight-tap-color: hsl(216, 100%, 42%); --text-highlight-color: hsl(0, 0%, 100%); display: inline-flex; margin: 0; padding: 0; list-style-type: none; }
+[data-darkmode="dark"] .container[data-bg-grid="grid-24"] .heti--vertical {
+  background-size: 24px 100%;
+  background-image: linear-gradient(to left, transparent 23px, #333333 1px);
+}
 
-.panel-list--gray { --bg-color: hsl(180, 100%, 100%); --bg-tap-color: hsl(0, 0%, 94%); --border-color: hsla(0, 0%, 72%, 0.88); --border-inline-start-color: hsl(0, 0%, 76%); --border-inline-end-color: hsl(0, 0%, 76%); --border-block-start-color: hsl(0, 0%, 79%); --border-block-end-color: hsl(0, 0%, 65%); --text-color: hsl(0, 0%, 16%); --box-shadow-color: hsla(0, 0%, 86%, 0.54); --bg-highlight-color-start: hsl(225, 3%, 70%); --bg-highlight-color-end: hsl(228, 2%, 58%); --bg-highlight-tap-color-start: hsl(228, 2%, 58%); --bg-highlight-tap-color-end: hsl(240, 3%, 35%); --border-highlight-color: hsla(225, 2%, 64%, 0.88); --border-highlight-tap-color: hsla(228, 2%, 47%, 0.88); --border-inline-start-highlight-color: hsl(240, 3%, 59%); --border-inline-end-highlight-color: hsl(228, 2%, 54%); --border-inline-start-highlight-tap-color: hsl(240, 3%, 39%); --border-inline-end-highlight-tap-color: hsl(228, 3%, 39%); --border-block-start-highlight-color: hsl(240, 3%, 66%); --border-block-end-highlight-color: hsl(228, 2%, 50%); --border-block-start-highlight-tap-color: hsl(228, 2%, 51%); --border-block-end-highlight-tap-color: hsl(228, 4%, 26%); --text-highlight-color: hsl(0, 0%, 92%); }
+@media (prefers-color-scheme: dark) {
+  [data-darkmode="auto"] .container[data-bg-grid="grid-12"] {
+    background-image: linear-gradient(transparent 11px, #333333 1px), linear-gradient(to left, transparent 12px, #333333, transparent 13px), linear-gradient(to right, transparent 12px, #333333, transparent 13px);
+  }
+  [data-darkmode="auto"] .container[data-bg-grid="grid-12"] .heti--vertical {
+    background-size: 12px 100%;
+    background-image: linear-gradient(to left, transparent 11px, #333333 1px);
+  }
+  [data-darkmode="auto"] .container[data-bg-grid="grid-24"] {
+    background-image: linear-gradient(transparent 23px, #333333 1px), linear-gradient(to left, transparent 12px, #333333, transparent 13px), linear-gradient(to right, transparent 12px, #333333, transparent 13px);
+  }
+  [data-darkmode="auto"] .container[data-bg-grid="grid-24"] .heti--vertical {
+    background-size: 24px 100%;
+    background-image: linear-gradient(to left, transparent 23px, #333333 1px);
+  }
+}
 
-@media (prefers-color-scheme: dark) { .panel-list { --bg-color: hsl(225, 2%, 40%); --bg-tap-color: hsl(210, 2%, 49%); --border-color: hsla(210, 2%, 33%, 0.88); --border-inline-start-color: hsl(210, 2%, 33%); --border-inline-end-color: hsl(210, 2%, 33%); --border-block-start-color: hsl(225, 2%, 45%); --border-block-end-color: hsl(210, 2%, 40%); --text-color: hsl(0, 0%, 91%); --box-shadow-color: hsla(225, 4%, 21%, 0.54); --bg-highlight-color-start: hsl(216, 77%, 49%); --bg-highlight-color-end: hsl(216, 76%, 45%); --bg-highlight-tap-color-start: hsl(214, 83%, 55%); --bg-highlight-tap-color-end: hsl(215, 74%, 51%); --border-highlight-color: hsla(215, 77%, 47%, 0.88); --border-highlight-tap-color: hsla(215, 79%, 54%, 0.88); --border-inline-start-highlight-color: hsl(215, 77%, 47%); --border-inline-end-highlight-color: hsl(215, 77%, 47%); --border-inline-start-highlight-tap-color: hsl(215, 79%, 54%); --border-inline-end-highlight-tap-color: hsl(215, 79%, 54%); --border-block-start-highlight-color: hsl(216, 76%, 55%); --border-block-end-highlight-color: hsl(216, 76%, 44%); --border-block-start-highlight-tap-color: hsl(215, 84%, 60%); --border-block-end-highlight-tap-color: hsl(215, 74%, 51%); --text-highlight-color: hsl(0, 0%, 100%); }
-  .panel-list--gray { --bg-color: hsl(0, 0%, 40%); --bg-tap-color: hsl(0, 0%, 49%); --border-color: hsla(120, 1%, 34%, 0.88); --border-inline-start-color: hsl(0, 0%, 40%); --border-inline-end-color: hsl(360, 0%, 40%); --border-block-start-color: hsl(0, 0%, 46%); --border-block-end-color: hsl(120, 0%, 40%); --text-color: hsl(0, 0%, 91%); --box-shadow-color: hsla(0, 0%, 17%, 0.54); --bg-highlight-color-start: hsl(0, 0%, 60%); --bg-highlight-color-end: hsl(0, 0%, 60%); --bg-highlight-tap-color-start: hsl(0, 0%, 69%); --bg-highlight-tap-color-end: hsl(0, 0%, 69%); --border-highlight-color: hsla(0, 0%, 60%, 0.88); --border-highlight-tap-color: hsla(0, 0%, 69%, 0.88); --border-inline-start-highlight-color: hsl(0, 0%, 60%); --border-inline-end-highlight-color: hsl(0, 0%, 60%); --border-inline-start-highlight-tap-color: hsl(0, 0%, 69%); --border-inline-end-highlight-tap-color: hsl(0, 0%, 69%); --border-block-start-highlight-color: hsl(0, 0%, 64%); --border-block-end-highlight-color: hsl(0, 0%, 60%); --border-block-start-highlight-tap-color: hsl(0, 0%, 73%); --border-block-end-highlight-tap-color: hsl(0, 0%, 69%); --text-highlight-color: hsl(0, 0%, 15%); } }
+@media screen and (min-width: 640px) {
+  .container[data-bg-grid="grid-12"] {
+    background-image: linear-gradient(transparent 11px, #ededed 1px), linear-gradient(to left, transparent 48px, #ededed, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 0, 0, 0.4), transparent 49px);
+  }
+  .container[data-bg-grid="grid-24"] {
+    background-image: linear-gradient(transparent 23px, #ededed 1px), linear-gradient(to left, transparent 48px, #ededed, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 0, 0, 0.4), transparent 49px);
+  }
+  [data-darkmode="dark"] .container[data-bg-grid="grid-12"] {
+    background-image: linear-gradient(transparent 11px, #333333 1px), linear-gradient(to left, transparent 48px, #333333, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 77, 77, 0.4), transparent 49px);
+  }
+  [data-darkmode="dark"] .container[data-bg-grid="grid-24"] {
+    background-image: linear-gradient(transparent 23px, #333333 1px), linear-gradient(to left, transparent 48px, #333333, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 77, 77, 0.4), transparent 49px);
+  }
+}
 
-.panel-list + .panel-list { margin-inline-start: 12px; }
+@media screen and (min-width: 640px) and (prefers-color-scheme: dark) {
+  [data-darkmode="auto"] .container[data-bg-grid="grid-12"] {
+    background-image: linear-gradient(transparent 11px, #333333 1px), linear-gradient(to left, transparent 48px, #333333, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 77, 77, 0.4), transparent 49px);
+  }
+  [data-darkmode="auto"] .container[data-bg-grid="grid-24"] {
+    background-image: linear-gradient(transparent 23px, #333333 1px), linear-gradient(to left, transparent 48px, #333333, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 77, 77, 0.4), transparent 49px);
+  }
+}
 
-.panel-list label { position: relative; display: block; box-sizing: border-box; height: 20px; padding: 0; padding-inline-start: 12px; padding-inline-end: 12px; border: 1px solid; font-size: 12px; line-height: 18px; text-align: center; user-select: none; background-color: var(--bg-color); border-color: var(--border-color); border-block-start-color: var(--border-block-start-color); border-block-end-color: var(--border-block-end-color); color: var(--text-color); box-shadow: 0 1px 0 var(--box-shadow-color); }
+.panel-list {
+  display: inline-flex;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  --bg-color: hsl(240, 100%, 100%);
+  --bg-tap-color: hsl(300, 3%, 94%);
+  --border-color: hsla(0, 0%, 76%, 0.88);
+  --border-inline-start-color: hsl(0, 0%, 76%);
+  --border-inline-end-color: hsl(0, 0%, 76%);
+  --border-block-start-color: hsl(0, 0%, 79%);
+  --border-block-end-color: hsl(0, 0%, 65%);
+  --text-color: hsl(60, 1%, 16%);
+  --box-shadow-color: hsla(0, 0%, 86%, 0.54);
+  --bg-highlight-color-start: hsl(216, 87%, 70%);
+  --bg-highlight-color-end: hsl(215, 93%, 52%);
+  --bg-highlight-tap-color-start: hsl(216, 92%, 65%);
+  --bg-highlight-tap-color-end: hsl(215, 95%, 44%);
+  --border-highlight-color: hsla(216, 90%, 57%, 0.88);
+  --border-highlight-tap-color: hsla(216, 85%, 52%, 0.88);
+  --border-inline-start-highlight-color: hsl(216, 90%, 57%);
+  --border-inline-end-highlight-color: hsl(216, 90%, 57%);
+  --border-inline-start-highlight-tap-color: hsl(216, 85%, 52%);
+  --border-inline-end-highlight-tap-color: hsl(216, 85%, 52%);
+  --border-block-start-highlight-color: hsl(216, 87%, 63%);
+  --border-block-end-highlight-color: hsl(215, 99%, 49%);
+  --border-block-start-highlight-tap-color: hsl(216, 93%, 57%);
+  --border-block-end-highlight-tap-color: hsl(216, 100%, 42%);
+  --text-highlight-color: hsl(0, 0%, 100%);
+}
 
-.panel-list label:active { background-color: var(--bg-tap-color); }
+.panel-list--gray {
+  --bg-color: hsl(180, 100%, 100%);
+  --bg-tap-color: hsl(0, 0%, 94%);
+  --border-color: hsla(0, 0%, 72%, 0.88);
+  --border-inline-start-color: hsl(0, 0%, 76%);
+  --border-inline-end-color: hsl(0, 0%, 76%);
+  --border-block-start-color: hsl(0, 0%, 79%);
+  --border-block-end-color: hsl(0, 0%, 65%);
+  --text-color: hsl(0, 0%, 16%);
+  --box-shadow-color: hsla(0, 0%, 86%, 0.54);
+  --bg-highlight-color-start: hsl(225, 3%, 70%);
+  --bg-highlight-color-end: hsl(228, 2%, 58%);
+  --bg-highlight-tap-color-start: hsl(228, 2%, 58%);
+  --bg-highlight-tap-color-end: hsl(240, 3%, 35%);
+  --border-highlight-color: hsla(225, 2%, 64%, 0.88);
+  --border-highlight-tap-color: hsla(228, 2%, 47%, 0.88);
+  --border-inline-start-highlight-color: hsl(240, 3%, 59%);
+  --border-inline-end-highlight-color: hsl(228, 2%, 54%);
+  --border-inline-start-highlight-tap-color: hsl(240, 3%, 39%);
+  --border-inline-end-highlight-tap-color: hsl(228, 3%, 39%);
+  --border-block-start-highlight-color: hsl(240, 3%, 66%);
+  --border-block-end-highlight-color: hsl(228, 2%, 50%);
+  --border-block-start-highlight-tap-color: hsl(228, 2%, 51%);
+  --border-block-end-highlight-tap-color: hsl(228, 4%, 26%);
+  --text-highlight-color: hsl(0, 0%, 92%);
+}
 
-.panel-list li { margin-inline-end: -1px; }
+[data-darkmode="dark"] .panel-list {
+  --bg-color: hsl(225, 2%, 40%);
+  --bg-tap-color: hsl(210, 2%, 49%);
+  --border-color: hsla(210, 2%, 33%, 0.88);
+  --border-inline-start-color: hsl(210, 2%, 33%);
+  --border-inline-end-color: hsl(210, 2%, 33%);
+  --border-block-start-color: hsl(225, 2%, 45%);
+  --border-block-end-color: hsl(210, 2%, 40%);
+  --text-color: hsl(0, 0%, 91%);
+  --box-shadow-color: hsla(225, 4%, 21%, 0.54);
+  --bg-highlight-color-start: hsl(216, 77%, 49%);
+  --bg-highlight-color-end: hsl(216, 76%, 45%);
+  --bg-highlight-tap-color-start: hsl(214, 83%, 55%);
+  --bg-highlight-tap-color-end: hsl(215, 74%, 51%);
+  --border-highlight-color: hsla(215, 77%, 47%, 0.88);
+  --border-highlight-tap-color: hsla(215, 79%, 54%, 0.88);
+  --border-inline-start-highlight-color: hsl(215, 77%, 47%);
+  --border-inline-end-highlight-color: hsl(215, 77%, 47%);
+  --border-inline-start-highlight-tap-color: hsl(215, 79%, 54%);
+  --border-inline-end-highlight-tap-color: hsl(215, 79%, 54%);
+  --border-block-start-highlight-color: hsl(216, 76%, 55%);
+  --border-block-end-highlight-color: hsl(216, 76%, 44%);
+  --border-block-start-highlight-tap-color: hsl(215, 84%, 60%);
+  --border-block-end-highlight-tap-color: hsl(215, 74%, 51%);
+  --text-highlight-color: hsl(0, 0%, 100%);
+}
 
-.panel-list li:first-child label { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-inline-start-color: var(--border-inline-start-color); }
+[data-darkmode="dark"] .panel-list--gray {
+  --bg-color: hsl(0, 0%, 40%);
+  --bg-tap-color: hsl(0, 0%, 49%);
+  --border-color: hsla(120, 1%, 34%, 0.88);
+  --border-inline-start-color: hsl(0, 0%, 40%);
+  --border-inline-end-color: hsl(360, 0%, 40%);
+  --border-block-start-color: hsl(0, 0%, 46%);
+  --border-block-end-color: hsl(120, 0%, 40%);
+  --text-color: hsl(0, 0%, 91%);
+  --box-shadow-color: hsla(0, 0%, 17%, 0.54);
+  --bg-highlight-color-start: hsl(0, 0%, 60%);
+  --bg-highlight-color-end: hsl(0, 0%, 60%);
+  --bg-highlight-tap-color-start: hsl(0, 0%, 69%);
+  --bg-highlight-tap-color-end: hsl(0, 0%, 69%);
+  --border-highlight-color: hsla(0, 0%, 60%, 0.88);
+  --border-highlight-tap-color: hsla(0, 0%, 69%, 0.88);
+  --border-inline-start-highlight-color: hsl(0, 0%, 60%);
+  --border-inline-end-highlight-color: hsl(0, 0%, 60%);
+  --border-inline-start-highlight-tap-color: hsl(0, 0%, 69%);
+  --border-inline-end-highlight-tap-color: hsl(0, 0%, 69%);
+  --border-block-start-highlight-color: hsl(0, 0%, 64%);
+  --border-block-end-highlight-color: hsl(0, 0%, 60%);
+  --border-block-start-highlight-tap-color: hsl(0, 0%, 73%);
+  --border-block-end-highlight-tap-color: hsl(0, 0%, 69%);
+  --text-highlight-color: hsl(0, 0%, 15%);
+}
 
-.panel-list li:last-child label { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-inline-end-color: var(--border-inline-end-color); }
+@media (prefers-color-scheme: dark) {
+  [data-darkmode="auto"] .panel-list {
+    --bg-color: hsl(225, 2%, 40%);
+    --bg-tap-color: hsl(210, 2%, 49%);
+    --border-color: hsla(210, 2%, 33%, 0.88);
+    --border-inline-start-color: hsl(210, 2%, 33%);
+    --border-inline-end-color: hsl(210, 2%, 33%);
+    --border-block-start-color: hsl(225, 2%, 45%);
+    --border-block-end-color: hsl(210, 2%, 40%);
+    --text-color: hsl(0, 0%, 91%);
+    --box-shadow-color: hsla(225, 4%, 21%, 0.54);
+    --bg-highlight-color-start: hsl(216, 77%, 49%);
+    --bg-highlight-color-end: hsl(216, 76%, 45%);
+    --bg-highlight-tap-color-start: hsl(214, 83%, 55%);
+    --bg-highlight-tap-color-end: hsl(215, 74%, 51%);
+    --border-highlight-color: hsla(215, 77%, 47%, 0.88);
+    --border-highlight-tap-color: hsla(215, 79%, 54%, 0.88);
+    --border-inline-start-highlight-color: hsl(215, 77%, 47%);
+    --border-inline-end-highlight-color: hsl(215, 77%, 47%);
+    --border-inline-start-highlight-tap-color: hsl(215, 79%, 54%);
+    --border-inline-end-highlight-tap-color: hsl(215, 79%, 54%);
+    --border-block-start-highlight-color: hsl(216, 76%, 55%);
+    --border-block-end-highlight-color: hsl(216, 76%, 44%);
+    --border-block-start-highlight-tap-color: hsl(215, 84%, 60%);
+    --border-block-end-highlight-tap-color: hsl(215, 74%, 51%);
+    --text-highlight-color: hsl(0, 0%, 100%);
+  }
+  [data-darkmode="auto"] .panel-list--gray {
+    --bg-color: hsl(0, 0%, 40%);
+    --bg-tap-color: hsl(0, 0%, 49%);
+    --border-color: hsla(120, 1%, 34%, 0.88);
+    --border-inline-start-color: hsl(0, 0%, 40%);
+    --border-inline-end-color: hsl(360, 0%, 40%);
+    --border-block-start-color: hsl(0, 0%, 46%);
+    --border-block-end-color: hsl(120, 0%, 40%);
+    --text-color: hsl(0, 0%, 91%);
+    --box-shadow-color: hsla(0, 0%, 17%, 0.54);
+    --bg-highlight-color-start: hsl(0, 0%, 60%);
+    --bg-highlight-color-end: hsl(0, 0%, 60%);
+    --bg-highlight-tap-color-start: hsl(0, 0%, 69%);
+    --bg-highlight-tap-color-end: hsl(0, 0%, 69%);
+    --border-highlight-color: hsla(0, 0%, 60%, 0.88);
+    --border-highlight-tap-color: hsla(0, 0%, 69%, 0.88);
+    --border-inline-start-highlight-color: hsl(0, 0%, 60%);
+    --border-inline-end-highlight-color: hsl(0, 0%, 60%);
+    --border-inline-start-highlight-tap-color: hsl(0, 0%, 69%);
+    --border-inline-end-highlight-tap-color: hsl(0, 0%, 69%);
+    --border-block-start-highlight-color: hsl(0, 0%, 64%);
+    --border-block-end-highlight-color: hsl(0, 0%, 60%);
+    --border-block-start-highlight-tap-color: hsl(0, 0%, 73%);
+    --border-block-end-highlight-tap-color: hsl(0, 0%, 69%);
+    --text-highlight-color: hsl(0, 0%, 15%);
+  }
+}
 
-.panel-list input { display: none; }
+.panel-list + .panel-list {
+  margin-inline-start: 12px;
+}
 
-.panel-list input:checked + label { z-index: 1; background-image: linear-gradient(to bottom, var(--bg-highlight-color-start), var(--bg-highlight-color-end)); border-color: var(--border-highlight-color); border-block-start-color: var(--border-block-start-highlight-color); border-block-end-color: var(--border-block-end-highlight-color); color: var(--text-highlight-color); }
+.panel-list label {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  height: 20px;
+  padding: 0;
+  padding-inline-start: 12px;
+  padding-inline-end: 12px;
+  border: 1px solid;
+  font-size: 12px;
+  line-height: 18px;
+  text-align: center;
+  user-select: none;
+  background-color: var(--bg-color);
+  border-color: var(--border-color);
+  border-block-start-color: var(--border-block-start-color);
+  border-block-end-color: var(--border-block-end-color);
+  color: var(--text-color);
+  box-shadow: 0 1px 0 var(--box-shadow-color);
+}
 
-.panel-list input:checked + label:active { background-image: linear-gradient(to bottom, var(--bg-highlight-tap-color-start), var(--bg-highlight-tap-color-end)); border-color: var(--border-highlight-tap-color); border-block-start-color: var(--border-block-start-highlight-tap-color); border-block-end-color: var(--border-block-end-highlight-tap-color); }
+.panel-list label:active {
+  background-color: var(--bg-tap-color);
+}
 
-.anchor { margin-inline-start: 0.25em; }
+.panel-list li {
+  margin-inline-end: -1px;
+}
 
-@media screen and (min-width: 640px) { .article .anchor { position: absolute; left: -1em; width: 1em; margin-inline-start: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; line-height: inherit; text-align: center; opacity: 0; transition: opacity 0.2s linear; }
-  .article .anchor:hover { text-decoration: none; border: 0; }
-  .article h1, .article h2, .article h3, .article h4, .article h5, .article h6 { position: relative; }
-  .article h1:hover .anchor, .article h2:hover .anchor, .article h3:hover .anchor, .article h4:hover .anchor, .article h5:hover .anchor, .article h6:hover .anchor { opacity: 1; } }
+.panel-list li:first-child label {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  border-inline-start-color: var(--border-inline-start-color);
+}
 
-.card { position: relative; left: -12px; width: 100%; margin-block-start: 24px; margin-block-end: 48px; padding-block-start: 12px; padding-block-end: 12px; padding-inline-start: 12px; padding-inline-end: 12px; border-radius: 2px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16); background-color: white; }
+.panel-list li:last-child label {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-inline-end-color: var(--border-inline-end-color);
+}
 
-.article .card { text-align: left; }
+.panel-list input {
+  display: none;
+}
 
-.card > figcaption { display: inline-block; margin-block-start: 16px; padding-block-start: 4px; padding-block-end: 3px; padding-inline-start: 0; padding-inline-end: 72px; line-height: 24px; border-block-start: 1px solid #ededed; }
+.panel-list input:checked + label {
+  z-index: 1;
+  background-image: linear-gradient(to bottom, var(--bg-highlight-color-start), var(--bg-highlight-color-end));
+  border-color: var(--border-highlight-color);
+  border-block-start-color: var(--border-block-start-highlight-color);
+  border-block-end-color: var(--border-block-end-highlight-color);
+  color: var(--text-highlight-color);
+}
 
-.card__vertical-container { box-sizing: border-box; width: 100%; height: 30em; border: 1px solid #ededed; overflow: auto; writing-mode: vertical-rl; }
+.panel-list input:checked + label:active {
+  background-image: linear-gradient(to bottom, var(--bg-highlight-tap-color-start), var(--bg-highlight-tap-color-end));
+  border-color: var(--border-highlight-tap-color);
+  border-block-start-color: var(--border-block-start-highlight-tap-color);
+  border-block-end-color: var(--border-block-end-highlight-tap-color);
+}
 
-@media screen and (min-width: 640px) { .card { box-sizing: border-box; left: -20%; width: 140%; padding-block-start: 24px; padding-block-end: 24px; padding-inline-start: 32px; padding-inline-end: 32px; } }
+.panel-list--icon label {
+  width: 30px;
+  padding-inline-start: 8px;
+  padding-inline-end: 8px;
+}
 
-@media (prefers-color-scheme: dark) { .card { background-color: #292929; }
-  .card > figcaption { border-block-start: 1px solid #333333; }
-  .card__vertical-container { border-color: #333333; } }
+.anchor {
+  margin-inline-start: 0.25em;
+}
+
+@media screen and (min-width: 640px) {
+  .article .anchor {
+    position: absolute;
+    left: -1em;
+    width: 1em;
+    margin-inline-start: 0;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-weight: 400;
+    line-height: inherit;
+    text-align: center;
+    opacity: 0;
+    transition: opacity 0.2s linear;
+  }
+  .article .anchor:hover {
+    text-decoration: none;
+    border: 0;
+  }
+  .article h1,
+  .article h2,
+  .article h3,
+  .article h4,
+  .article h5,
+  .article h6 {
+    position: relative;
+  }
+  .article h1:hover .anchor,
+  .article h2:hover .anchor,
+  .article h3:hover .anchor,
+  .article h4:hover .anchor,
+  .article h5:hover .anchor,
+  .article h6:hover .anchor {
+    opacity: 1;
+  }
+}
+
+.card {
+  position: relative;
+  left: -12px;
+  width: 100%;
+  margin-block-start: 24px;
+  margin-block-end: 48px;
+  padding-block-start: 12px;
+  padding-block-end: 12px;
+  padding-inline-start: 12px;
+  padding-inline-end: 12px;
+  border-radius: 2px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
+  background-color: white;
+}
+
+.article .card {
+  text-align: left;
+}
+
+.card > figcaption {
+  display: inline-block;
+  margin-block-start: 16px;
+  padding-block-start: 4px;
+  padding-block-end: 3px;
+  padding-inline-start: 0;
+  padding-inline-end: 72px;
+  line-height: 24px;
+  border-block-start: 1px solid #ededed;
+}
+
+.card__vertical-container {
+  box-sizing: border-box;
+  width: 100%;
+  height: 30em;
+  border: 1px solid #ededed;
+  overflow: auto;
+  writing-mode: vertical-rl;
+}
+
+@media screen and (min-width: 640px) {
+  .card {
+    box-sizing: border-box;
+    left: -20%;
+    width: 140%;
+    padding-block-start: 24px;
+    padding-block-end: 24px;
+    padding-inline-start: 32px;
+    padding-inline-end: 32px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .card {
+    background-color: #292929;
+  }
+  .card > figcaption {
+    border-block-start: 1px solid #333333;
+  }
+  .card__vertical-container {
+    border-color: #333333;
+  }
+}
 
 /** 基础样式 **/
-body { font-family: -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, "Heti Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; background-color: white; }
+body {
+  font-family: -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, "Heti Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  background-color: white;
+}
 
-a { color: #4387f4; text-decoration: none; }
+a {
+  color: #4387f4;
+  text-decoration: none;
+}
 
-.container { box-sizing: border-box; padding-block-start: 12px; padding-block-end: 72px; padding-inline-start: 12px; padding-inline-end: 12px; }
+.container {
+  box-sizing: border-box;
+  padding-block-start: 12px;
+  padding-block-end: 72px;
+  padding-inline-start: 12px;
+  padding-inline-end: 12px;
+}
 
 /** 首页样式 **/
-.article { margin-inline-start: auto; margin-inline-end: auto; }
+.article {
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+}
 
-.article__nav ol { margin-block-start: 24px; margin-block-end: 24px; }
+.article__nav ol {
+  margin-block-start: 24px;
+  margin-block-end: 24px;
+}
 
 /** 控制栏样式 **/
-.panel { position: fixed; z-index: 2; right: 14px; top: 14px; display: flex; text-align: right; }
+.panel {
+  position: fixed;
+  z-index: 2;
+  right: 14px;
+  top: 14px;
+  display: flex;
+  text-align: right;
+}
 
 /** 演示区块 **/
-.demo { margin-block-start: 24px; margin-block-end: 24px; }
+.demo {
+  margin-block-start: 24px;
+  margin-block-end: 24px;
+}
 
-.section { width: 100%; max-height: 85vh; margin-block-start: 12px; margin-block-end: 12px; overflow: auto; }
+.section {
+  width: 100%;
+  max-height: 85vh;
+  margin-block-start: 12px;
+  margin-block-end: 12px;
+  overflow: auto;
+}
 
-@media screen and (min-width: 640px) { body { min-width: 640px; background-color: #ededed; }
-  .container { box-sizing: border-box; width: 80%; min-width: 640px; max-width: 768px; margin-block-start: 48px; margin-block-end: 72px; margin-inline-start: auto; margin-inline-end: auto; padding-block-start: 48px; padding-block-end: 48px; padding-inline-start: 48px; padding-inline-end: 48px; border-radius: 2px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32); background-color: white; }
-  .section { max-height: none; overflow: visible; } }
+@media screen and (min-width: 640px) {
+  body {
+    min-width: 640px;
+    background-color: #ededed;
+  }
+  .container {
+    box-sizing: border-box;
+    width: 80%;
+    min-width: 640px;
+    max-width: 768px;
+    margin-block-start: 48px;
+    margin-block-end: 72px;
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+    padding-block-start: 48px;
+    padding-block-end: 48px;
+    padding-inline-start: 48px;
+    padding-inline-end: 48px;
+    border-radius: 2px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
+    background-color: white;
+  }
+  .section {
+    max-height: none;
+    overflow: visible;
+  }
+}
 
-@media screen and (min-width: 900px) { .article__nav { position: relative; z-index: 1; float: right; width: 192px; margin-block-start: -1px; margin-block-end: 12px; margin-inline-start: 32px; margin-inline-end: -16px; padding-block-start: 12px; padding-block-end: 12px; padding-inline-start: 8px; padding-inline-end: 8px; border: 1px solid #ededed; border-radius: 2px; }
-  .article__nav ol { margin-block-start: 12px; margin-block-end: 0; }
-  .article__nav ol ol { margin-block-start: 0; } }
+@media screen and (min-width: 900px) {
+  .article__nav {
+    position: relative;
+    z-index: 1;
+    float: right;
+    width: 192px;
+    margin-block-start: -1px;
+    margin-block-end: 12px;
+    margin-inline-start: 32px;
+    margin-inline-end: -16px;
+    padding-block-start: 12px;
+    padding-block-end: 12px;
+    padding-inline-start: 8px;
+    padding-inline-end: 8px;
+    border: 1px solid #ededed;
+    border-radius: 2px;
+  }
+  .article__nav ol {
+    margin-block-start: 12px;
+    margin-block-end: 0;
+  }
+  .article__nav ol ol {
+    margin-block-start: 0;
+  }
+}
 
-@media (prefers-color-scheme: dark) { body { background-color: #3d3d3d; }
-  a { color: #6b90cc; }
-  a:visited { color: #2f5189; }
-  .container { background-color: #292929; color: #a3a3a3; }
-  .article__nav { border-color: #333333; } }
+[data-darkmode="dark"] body {
+  background-color: #3d3d3d;
+}
+
+[data-darkmode="dark"] a {
+  color: #6b90cc;
+}
+
+[data-darkmode="dark"] a:visited {
+  color: #2f5189;
+}
+
+[data-darkmode="dark"] .container {
+  background-color: #292929;
+  color: #a3a3a3;
+}
+
+[data-darkmode="dark"] .article__nav {
+  border-color: #333333;
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-darkmode="auto"] body {
+    background-color: #3d3d3d;
+  }
+  [data-darkmode="auto"] a {
+    color: #6b90cc;
+  }
+  [data-darkmode="auto"] a:visited {
+    color: #2f5189;
+  }
+  [data-darkmode="auto"] .container {
+    background-color: #292929;
+    color: #a3a3a3;
+  }
+  [data-darkmode="auto"] .article__nav {
+    border-color: #333333;
+  }
+}
diff --git a/_site/index.html b/_site/index.html
index 441a2d9..4e65ebf 100644
--- a/_site/index.html
+++ b/_site/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="zh-Hans">
+<html lang="zh-Hans" data-darkmode="auto">
 <head>
   <meta charset="UTF-8">
   <title>赫蹏 - 一个简约又简单的网页中文排版增强</title>
@@ -74,14 +74,15 @@
         </li>
         <li>
           在要作用的容器元素上增加<code>class="heti"</code>的类名即可：
+
           <pre><code>&lt;article class=&quot;entry <ins>heti</ins>&quot;&gt;
   &lt;h1&gt;我的世界观&lt;/h1&gt;
   &lt;p&gt;有钱人的生活就是这么朴实无华，且枯燥&lt;/p&gt;
   ……
 &lt;/article&gt;</code></pre>
         </li>
-        <li>注意：赫蹏是正文区域的样式增强，不是<i>normalize.css</i>或<i>CSS Reset</i>的替代。因此<b>不建议</b>将它作用在根标签（如<code>&lt;body&gt;</code>或<code>&lt;div class=&quot;container&quot;&gt;</code>）上，除非像本页面一样通篇都是文章的一部分。</li>
       </ol>
+      <small>注：赫蹏是正文区域的样式增强，不是<i>normalize.css</i>或<i>CSS Reset</i>的替代。因此<b>不建议</b>将它作用在根标签（如<code>&lt;body&gt;</code>或<code>&lt;div class=&quot;container&quot;&gt;</code>）上。</small>
 
       <hr>
 
@@ -511,41 +512,6 @@
                 <blockquote style="margin-inline-start: 0; margin-inline-end: 0;">古代称用以书写的小幅绢帛。后亦以借指纸<mark>。《</mark>汉书·外戚传下·孝成赵皇后<mark>》：「</mark>武（籍武 ）发篋中，有裹药二枚，赫蹏书。」<u>颜师古</u>注：「<u>邓展</u>曰：『赫音兄弟鬩墙之鬩。』<u>应劭</u>曰：『赫蹏，薄小纸也。』」<u>宋</u><u>赵彦卫</u> 《云麓漫钞》卷七：「《赵后传》所谓『赫蹏』者，注云『薄小纸』，然其寔亦縑帛。」</blockquote>
               </td>
             </tr>
-            <!--
-            <tr>
-              <th colspan="4">标点挤压</th>
-            </tr>
-            <tr>
-              <th>默认文本</th>
-              <td>
-                <ul class="heti-skip">
-                  <li>结束。」</li>
-                  <li>结束」，</li>
-                  <li>开始。「</li>
-                  <li>连接」「</li>
-                  <li>连续「『</li>
-                  <li>连续』」</li>
-                  <li>间隔号」·</li>
-                  <li>间隔号·「</li>
-                  <li>不改「」</li>
-                </ul>
-              </td>
-              <th>脚本效果</th>
-              <td>
-                <ul>
-                  <li>结束。」</li>
-                  <li>结束」，</li>
-                  <li>开始。「</li>
-                  <li>连接」「</li>
-                  <li>连续「『</li>
-                  <li>连续』」</li>
-                  <li>间隔号」·</li>
-                  <li>间隔号·「</li>
-                  <li>不改「」</li>
-                </ul>
-              </td>
-            </tr>
-            -->
           </table>
         </section>
       </details>
@@ -583,11 +549,17 @@
       <li><input type="radio" class="J_radioGrid" value="grid-24" name="grid" id="grid-24"><label for="grid-24">大</label></li>
       <li><input type="radio" class="J_radioGrid" value="grid-12" name="grid" id="grid-12"><label for="grid-12">小</label></li>
     </ul>
+    <ul class="panel-list panel-list--gray panel-list--icon">
+      <li><input type="radio" class="J_darkMode" value="auto" name="darkmode" id="darkmode-auto" checked><label for="darkmode-auto">🌗</label></li>
+      <li><input type="radio" class="J_darkMode" value="light" name="darkmode" id="darkmode-light"><label for="darkmode-light">🌞</label></li>
+      <li><input type="radio" class="J_darkMode" value="dark" name="darkmode" id="darkmode-dark"><label for="darkmode-dark">🌙</label></li>
+    </ul>
   </aside>
 
   <script src="./heti-addon.js"></script>
   <script>
-    const $$root = document.getElementsByTagName('main')[0]
+    const $$root = document.getElementsByTagName('html')[0]
+    const $$main = document.getElementsByTagName('main')[0]
     const $$article = document.getElementsByTagName('article')[0]
 
     function addEventListeners(nodeList, event, fn) {
@@ -596,8 +568,12 @@
       }, false)
     }
 
+    addEventListeners(document.getElementsByClassName('J_darkMode'), 'change', function (e) {
+      $$root.setAttribute('data-darkmode', e.target.value)
+    })
+
     addEventListeners(document.getElementsByClassName('J_radioGrid'), 'change', function (e) {
-      $$root.setAttribute('data-bg-grid', e.target.value)
+      $$main.setAttribute('data-bg-grid', e.target.value)
     })
 
     addEventListeners(document.getElementsByClassName('J_fontStack'), 'change', function (e) {
diff --git a/_site/scss/components/_grid-container.scss b/_site/scss/components/_grid-container.scss
index 3da5601..7c883bd 100644
--- a/_site/scss/components/_grid-container.scss
+++ b/_site/scss/components/_grid-container.scss
@@ -1,6 +1,5 @@
 // Author: Sivan [sun.sivan@gmail.com]
 // Description: grid container.
-
 $grid-sizes: (
   "12": 12px,
   "24": 24px
@@ -20,6 +19,26 @@ $padding-desktop: 48px;
   background-image: linear-gradient(to left, transparent ($grid-width - 1px), $grid-color 1px);
 }
 
+@mixin darkmode-mobile {
+  @each $size, $width in $grid-sizes {
+    &[data-bg-grid="grid-#{$size}"] {
+      @include grid-image-horizontal($width, $padding-mobile, hsl(0, 0%, 20%));
+
+      .heti--vertical {
+        @include grid-image-vertical($width, hsl(0, 0%, 20%));
+      }
+    }
+  }
+}
+
+@mixin darkmode-desktop {
+  @each $size, $width in $grid-sizes {
+    &[data-bg-grid="grid-#{$size}"] {
+      @include grid-image-horizontal($width, $padding-desktop, hsl(0, 0%, 20%), hsla(360, 100%, 65%, 0.4));
+    }
+  }
+}
+
 .container {
   @each $size, $width in $grid-sizes {
     &[data-bg-grid="grid-#{$size}"] {
@@ -35,15 +54,13 @@ $padding-desktop: 48px;
     }
   }
 
-  @media (prefers-color-scheme: dark) {
-    @each $size, $width in $grid-sizes {
-      &[data-bg-grid="grid-#{$size}"] {
-        @include grid-image-horizontal($width, $padding-mobile, hsl(0, 0%, 20%));
+  [data-darkmode="dark"] & {
+    @include darkmode-mobile;
+  }
 
-        .heti--vertical {
-          @include grid-image-vertical($width, hsl(0, 0%, 20%));
-        }
-      }
+  @media (prefers-color-scheme: dark) {
+    [data-darkmode="auto"] & {
+      @include darkmode-mobile;
     }
   }
 
@@ -55,11 +72,13 @@ $padding-desktop: 48px;
       }
     }
 
+    [data-darkmode="dark"] & {
+      @include darkmode-desktop;
+    }
+
     @media (prefers-color-scheme: dark) {
-      @each $size, $width in $grid-sizes {
-        &[data-bg-grid="grid-#{$size}"] {
-          @include grid-image-horizontal($width, $padding-desktop, hsl(0, 0%, 20%), hsla(360, 100%, 65%, 0.4));
-        }
+      [data-darkmode="auto"] & {
+        @include darkmode-desktop;
       }
     }
   }
diff --git a/_site/scss/components/_panel-list.scss b/_site/scss/components/_panel-list.scss
index 849a0c5..767079c 100644
--- a/_site/scss/components/_panel-list.scss
+++ b/_site/scss/components/_panel-list.scss
@@ -1,7 +1,6 @@
 // Author: Sivan [sun.sivan@gmail.com]
 // Description: panel list.
-
-.panel-list {
+@mixin lightmode {
   --bg-color: hsl(240, 100%, 100%);
   --bg-tap-color: hsl(300, 3%, 94%);
   --border-color: hsla(0, 0%, 76%, 0.88);
@@ -53,66 +52,80 @@
     --border-block-end-highlight-tap-color: hsl(228, 4%, 26%);
     --text-highlight-color: hsl(0, 0%, 92%);
   }
+}
 
-  @media (prefers-color-scheme: dark) {
-    --bg-color: hsl(225, 2%, 40%);
-    --bg-tap-color: hsl(210, 2%, 49%);
-    --border-color: hsla(210, 2%, 33%, 0.88);
-    --border-inline-start-color: hsl(210, 2%, 33%);
-    --border-inline-end-color: hsl(210, 2%, 33%);
-    --border-block-start-color: hsl(225, 2%, 45%);
-    --border-block-end-color: hsl(210, 2%, 40%);
+@mixin darkmode {
+  --bg-color: hsl(225, 2%, 40%);
+  --bg-tap-color: hsl(210, 2%, 49%);
+  --border-color: hsla(210, 2%, 33%, 0.88);
+  --border-inline-start-color: hsl(210, 2%, 33%);
+  --border-inline-end-color: hsl(210, 2%, 33%);
+  --border-block-start-color: hsl(225, 2%, 45%);
+  --border-block-end-color: hsl(210, 2%, 40%);
+  --text-color: hsl(0, 0%, 91%);
+  --box-shadow-color: hsla(225, 4%, 21%, 0.54);
+  --bg-highlight-color-start: hsl(216, 77%, 49%);
+  --bg-highlight-color-end: hsl(216, 76%, 45%);
+  --bg-highlight-tap-color-start: hsl(214, 83%, 55%);
+  --bg-highlight-tap-color-end: hsl(215, 74%, 51%);
+  --border-highlight-color: hsla(215, 77%, 47%, 0.88);
+  --border-highlight-tap-color: hsla(215, 79%, 54%, 0.88);
+  --border-inline-start-highlight-color: hsl(215, 77%, 47%);
+  --border-inline-end-highlight-color: hsl(215, 77%, 47%);
+  --border-inline-start-highlight-tap-color: hsl(215, 79%, 54%);
+  --border-inline-end-highlight-tap-color: hsl(215, 79%, 54%);
+  --border-block-start-highlight-color: hsl(216, 76%, 55%);
+  --border-block-end-highlight-color: hsl(216, 76%, 44%);
+  --border-block-start-highlight-tap-color: hsl(215, 84%, 60%);
+  --border-block-end-highlight-tap-color: hsl(215, 74%, 51%);
+  --text-highlight-color: hsl(0, 0%, 100%);
+
+  &--gray {
+    --bg-color: hsl(0, 0%, 40%);
+    --bg-tap-color: hsl(0, 0%, 49%);
+    --border-color: hsla(120, 1%, 34%, 0.88);
+    --border-inline-start-color: hsl(0, 0%, 40%);
+    --border-inline-end-color: hsl(360, 0%, 40%);
+    --border-block-start-color: hsl(0, 0%, 46%);
+    --border-block-end-color: hsl(120, 0%, 40%);
     --text-color: hsl(0, 0%, 91%);
-    --box-shadow-color: hsla(225, 4%, 21%, 0.54);
-    --bg-highlight-color-start: hsl(216, 77%, 49%);
-    --bg-highlight-color-end: hsl(216, 76%, 45%);
-    --bg-highlight-tap-color-start: hsl(214, 83%, 55%);
-    --bg-highlight-tap-color-end: hsl(215, 74%, 51%);
-    --border-highlight-color: hsla(215, 77%, 47%, 0.88);
-    --border-highlight-tap-color: hsla(215, 79%, 54%, 0.88);
-    --border-inline-start-highlight-color: hsl(215, 77%, 47%);
-    --border-inline-end-highlight-color: hsl(215, 77%, 47%);
-    --border-inline-start-highlight-tap-color: hsl(215, 79%, 54%);
-    --border-inline-end-highlight-tap-color: hsl(215, 79%, 54%);
-    --border-block-start-highlight-color: hsl(216, 76%, 55%);
-    --border-block-end-highlight-color: hsl(216, 76%, 44%);
-    --border-block-start-highlight-tap-color: hsl(215, 84%, 60%);
-    --border-block-end-highlight-tap-color: hsl(215, 74%, 51%);
-    --text-highlight-color: hsl(0, 0%, 100%);
-
-    &--gray {
-      --bg-color: hsl(0, 0%, 40%);
-      --bg-tap-color: hsl(0, 0%, 49%);
-      --border-color: hsla(120, 1%, 34%, 0.88);
-      --border-inline-start-color: hsl(0, 0%, 40%);
-      --border-inline-end-color: hsl(360, 0%, 40%);
-      --border-block-start-color: hsl(0, 0%, 46%);
-      --border-block-end-color: hsl(120, 0%, 40%);
-      --text-color: hsl(0, 0%, 91%);
-      --box-shadow-color: hsla(0, 0%, 17%, 0.54);
-      --bg-highlight-color-start: hsl(0, 0%, 60%);
-      --bg-highlight-color-end: hsl(0, 0%, 60%);
-      --bg-highlight-tap-color-start: hsl(0, 0%, 69%);
-      --bg-highlight-tap-color-end: hsl(0, 0%, 69%);
-      --border-highlight-color: hsla(0, 0%, 60%, 0.88);
-      --border-highlight-tap-color: hsla(0, 0%, 69%, 0.88);
-      --border-inline-start-highlight-color: hsl(0, 0%, 60%);
-      --border-inline-end-highlight-color: hsl(0, 0%, 60%);
-      --border-inline-start-highlight-tap-color: hsl(0, 0%, 69%);
-      --border-inline-end-highlight-tap-color: hsl(0, 0%, 69%);
-      --border-block-start-highlight-color: hsl(0, 0%, 64%);
-      --border-block-end-highlight-color: hsl(0, 0%, 60%);
-      --border-block-start-highlight-tap-color: hsl(0, 0%, 73%);
-      --border-block-end-highlight-tap-color: hsl(0, 0%, 69%);
-      --text-highlight-color: hsl(0, 0%, 15%);
-    }
+    --box-shadow-color: hsla(0, 0%, 17%, 0.54);
+    --bg-highlight-color-start: hsl(0, 0%, 60%);
+    --bg-highlight-color-end: hsl(0, 0%, 60%);
+    --bg-highlight-tap-color-start: hsl(0, 0%, 69%);
+    --bg-highlight-tap-color-end: hsl(0, 0%, 69%);
+    --border-highlight-color: hsla(0, 0%, 60%, 0.88);
+    --border-highlight-tap-color: hsla(0, 0%, 69%, 0.88);
+    --border-inline-start-highlight-color: hsl(0, 0%, 60%);
+    --border-inline-end-highlight-color: hsl(0, 0%, 60%);
+    --border-inline-start-highlight-tap-color: hsl(0, 0%, 69%);
+    --border-inline-end-highlight-tap-color: hsl(0, 0%, 69%);
+    --border-block-start-highlight-color: hsl(0, 0%, 64%);
+    --border-block-end-highlight-color: hsl(0, 0%, 60%);
+    --border-block-start-highlight-tap-color: hsl(0, 0%, 73%);
+    --border-block-end-highlight-tap-color: hsl(0, 0%, 69%);
+    --text-highlight-color: hsl(0, 0%, 15%);
   }
+}
 
+.panel-list {
   display: inline-flex;
   margin: 0;
   padding: 0;
   list-style-type: none;
 
+  @include lightmode;
+
+  [data-darkmode="dark"] & {
+    @include darkmode;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    [data-darkmode="auto"] & {
+      @include darkmode;
+    }
+  }
+
   & + & {
     margin-inline-start: 12px;
   }
@@ -177,4 +190,12 @@
       }
     }
   }
+
+  &--icon {
+    label {
+      width: 30px;
+      padding-inline-start: 8px;
+      padding-inline-end: 8px;
+    }
+  }
 }
diff --git a/_site/scss/heti.scss b/_site/scss/heti.scss
new file mode 100644
index 0000000..68a30dc
--- /dev/null
+++ b/_site/scss/heti.scss
@@ -0,0 +1,3 @@
+$darkmode: 'manual';
+
+@import "../../lib/heti";
diff --git a/_site/scss/index.scss b/_site/scss/index.scss
index 78eb609..9e55cc3 100644
--- a/_site/scss/index.scss
+++ b/_site/scss/index.scss
@@ -127,7 +127,7 @@ a {
   }
 }
 
-@media (prefers-color-scheme: dark) {
+@mixin darkmode() {
   body {
     background-color: hsl(0, 0%, 24%);
   }
@@ -151,3 +151,14 @@ a {
     }
   }
 }
+
+// Force dark mode
+[data-darkmode="dark"] {
+  @include darkmode();
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-darkmode="auto"] {
+    @include darkmode();
+  }
+}
diff --git a/lib/_base.scss b/lib/_base.scss
index db57735..636687f 100644
--- a/lib/_base.scss
+++ b/lib/_base.scss
@@ -32,7 +32,7 @@
     //border-radius: 4px;
     background-color: hsla(0, 0%, 0%, 0.054);
 
-    @media (prefers-color-scheme: dark) {
+    @include darkmode-style {
       background-color: hsla(0, 0%, 100%, 0.054);
     }
   }
@@ -58,7 +58,7 @@
     border: 0;
     background-color: hsl(0, 0%, 80%);
 
-    @media (prefers-color-scheme: dark) {
+    @include darkmode-style {
       background-color: hsl(0, 0%, 25%);
     }
   }
@@ -89,7 +89,7 @@
     border-radius: 4px;
     background-color: hsla(0, 0%, 0%, 0.054);
 
-    @media (prefers-color-scheme: dark) {
+    @include darkmode-style {
       background-color: hsla(0, 0%, 100%, 0.054);
     }
 
diff --git a/lib/_inline.scss b/lib/_inline.scss
index 62b0164..0407266 100644
--- a/lib/_inline.scss
+++ b/lib/_inline.scss
@@ -75,7 +75,7 @@
     background-color: hsla(58, 100%, 50%, 0.88);
     color: inherit;
 
-    @media (prefers-color-scheme: dark) {
+    @include darkmode-style {
       background-color: hsla(58, 100%, 15%, 0.88);
     }
   }
@@ -132,7 +132,7 @@
     a:target {
       background-color: hsl(210, 100%, 93%);
 
-      @media (prefers-color-scheme: dark) {
+      @include darkmode-style {
         background-color: hsl(210, 40%, 38%);
       }
     }
@@ -155,7 +155,7 @@
     border-block-end-style: double;
     border-block-end-color: hsla(0, 0%, 0%, 0.54);
 
-    @media (prefers-color-scheme: dark) {
+    @include darkmode-style {
       border-block-end-color: hsla(0, 0%, 100%, 0.54);
     }
   }
diff --git a/lib/_table.scss b/lib/_table.scss
index 3a5d5ea..ef6e27e 100644
--- a/lib/_table.scss
+++ b/lib/_table.scss
@@ -16,7 +16,7 @@
     border-color: hsl(0, 0%, 80%);
     word-break: break-word;
 
-    @media (prefers-color-scheme: dark) {
+    @include darkmode-style {
       border-color: hsl(0, 0%, 25%);
     }
   }
@@ -31,7 +31,7 @@
     border-style: solid;
     border-color: hsl(0, 0%, 80%);
 
-    @media (prefers-color-scheme: dark) {
+    @include darkmode-style {
       border-color: hsl(0, 0%, 25%);
     }
   }
diff --git a/lib/_variables.scss b/lib/_variables.scss
index b5aa499..fc568df 100644
--- a/lib/_variables.scss
+++ b/lib/_variables.scss
@@ -3,6 +3,9 @@
 
 // 定义赫蹏根 class 名
 $root-selector: '.heti' !default;
+$darkmode: true !default; // true | false | 'manual'
+$manualmode-auto-selector: '[data-darkmode="auto"] &' !default;
+$manualmode-dark-selector: '[data-darkmode="dark"] &' !default;
 
 // 字体 Fonts
 // 字体栈 Font Stacks
@@ -114,6 +117,25 @@ $_css-reset-scheme: "reset";
   text-indent: 0;
 }
 
+@mixin darkmode-style($darkmode: $darkmode, $dark-selector: $manualmode-dark-selector, $auto-selector: $manualmode-auto-selector) {
+  // 'manual' darkmode should provide darkmode selector and auto-darkmode selector
+  @if $darkmode == 'manual' {
+    #{$dark-selector} {
+      @content;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      #{$auto-selector} {
+        @content;
+      }
+    }
+  } @else if $darkmode {
+    @media (prefers-color-scheme: dark) {
+      @content;
+    }
+  }
+}
+
 // 函数 Functions
 // Function: batch prefix/suffix list-item
 // batch-fix-list((2, 3), '#{$root-selector}--columns-') => (.heti--columns-2, .heti--columns-3)
diff --git a/lib/helpers/_block.scss b/lib/helpers/_block.scss
index 8cc654d..be069b7 100644
--- a/lib/helpers/_block.scss
+++ b/lib/helpers/_block.scss
@@ -76,7 +76,7 @@
     font-family: $font-family-hei;
     line-height: $line-height-size-normal;
 
-    @media (prefers-color-scheme: dark) {
+    @include darkmode-style {
       border-block-start-color: hsl(0, 0%, 25%);
     }
 
@@ -89,7 +89,7 @@
       &:target {
         background-color: hsl(210, 100%, 93%);
 
-        @media (prefers-color-scheme: dark) {
+        @include darkmode-style {
           background-color: hsl(210, 40%, 38%);
         }
       }
diff --git a/package-lock.json b/package-lock.json
index 27e3916..24028d3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "heti",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -223,15 +223,6 @@
       "integrity": "sha512-AoeIEJn8vt+d/6+PXDRPaksYhnlbMIiejioBZvvMQsOjW/JYK6k/0dKnvvP3EhK5GfMBWDPtrxRtegWdAcdq9Q==",
       "dev": true
     },
-    "@babel/runtime": {
-      "version": "7.9.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.6.tgz",
-      "integrity": "sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==",
-      "dev": true,
-      "requires": {
-        "regenerator-runtime": "^0.13.4"
-      }
-    },
     "@babel/template": {
       "version": "7.8.6",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.8.6.tgz",
@@ -477,9 +468,9 @@
       "dev": true
     },
     "arrify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
-      "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
+      "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
       "dev": true
     },
     "asn1": {
@@ -516,18 +507,18 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "9.7.6",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.6.tgz",
-      "integrity": "sha512-F7cYpbN7uVVhACZTeeIeealwdGM6wMtfWARVLTy5xmKtgVdBNJvbDRoCK3YO1orcs7gv/KwYlb3iXwu9Ug9BkQ==",
+      "version": "9.8.0",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.0.tgz",
+      "integrity": "sha512-D96ZiIHXbDmU02dBaemyAg53ez+6F5yZmapmgKcjm35yEe1uVDYI8hGW3VYoGRaG290ZFf91YxHrR518vC0u/A==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.11.1",
-        "caniuse-lite": "^1.0.30001039",
+        "browserslist": "^4.12.0",
+        "caniuse-lite": "^1.0.30001061",
         "chalk": "^2.4.2",
         "normalize-range": "^0.1.2",
         "num2fraction": "^1.2.2",
-        "postcss": "^7.0.27",
-        "postcss-value-parser": "^4.0.3"
+        "postcss": "^7.0.30",
+        "postcss-value-parser": "^4.1.0"
       },
       "dependencies": {
         "ansi-styles": {
@@ -669,9 +660,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001048",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001048.tgz",
-      "integrity": "sha512-g1iSHKVxornw0K8LG9LLdf+Fxnv7T1Z+mMsf0/YYLclQX4Cd522Ap0Lrw6NFqHgezit78dtyWxzlV2Xfc7vgRg==",
+      "version": "1.0.30001061",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001061.tgz",
+      "integrity": "sha512-SMICCeiNvMZnyXpuoO+ot7FHpMVPlrsR+HmfByj6nY4xYDHXLqMTbgH7ecEkDNXWkH1vaip+ZS0D7VTXwM1KYQ==",
       "dev": true
     },
     "caseless": {
@@ -724,14 +715,48 @@
       "dev": true
     },
     "cliui": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
-      "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+      "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
       "dev": true,
       "requires": {
-        "string-width": "^1.0.1",
-        "strip-ansi": "^3.0.1",
-        "wrap-ansi": "^2.0.0"
+        "string-width": "^3.1.0",
+        "strip-ansi": "^5.2.0",
+        "wrap-ansi": "^5.1.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        }
       }
     },
     "clone-regexp": {
@@ -956,9 +981,9 @@
           "dev": true
         },
         "entities": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz",
-          "integrity": "sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==",
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.2.tgz",
+          "integrity": "sha512-dmD3AvJQBUjKpcNkoqr+x+IF0SdRtPz9Vk0uTy4yWqga9ibB6s4v++QFWNohjiUGoMlF552ZvNyXDxz5iW0qmw==",
           "dev": true
         }
       }
@@ -999,15 +1024,15 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.3.427",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.427.tgz",
-      "integrity": "sha512-/rG5G7Opcw68/Yrb4qYkz07h3bESVRJjUl4X/FrKLXzoUJleKm6D7K7rTTz8V5LUWnd+BbTOyxJX2XprRqHD8A==",
+      "version": "1.3.441",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.441.tgz",
+      "integrity": "sha512-leBfJwLuyGs1jEei2QioI+PjVMavmUIvPYidE8dCCYWLAq0uefhN3NYgDNb8WxD3uiUNnJ3ScMXg0upSlwySzQ==",
       "dev": true
     },
     "emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
       "dev": true
     },
     "entities": {
@@ -1085,9 +1110,9 @@
       "dev": true
     },
     "fastq": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.7.0.tgz",
-      "integrity": "sha512-YOadQRnHd5q6PogvAR/x62BGituF2ufiEA6s8aavQANw5YKHERI4AREboX6KotzP8oX2klxYF2wcV/7bn1clfQ==",
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.8.0.tgz",
+      "integrity": "sha512-SMIZoZdLh/fgofivvIkmknUXyPnvxRE3DhtZ5Me3Mrsk5gyPL42F0xr51TdRXskBxHfMp+07bcYzfsYEsSQA9Q==",
       "dev": true,
       "requires": {
         "reusify": "^1.0.4"
@@ -1216,9 +1241,9 @@
       "dev": true
     },
     "get-caller-file": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
-      "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
       "dev": true
     },
     "get-stdin": {
@@ -1508,12 +1533,6 @@
       "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
       "dev": true
     },
-    "invert-kv": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
-      "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
-      "dev": true
-    },
     "is-alphabetical": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
@@ -1762,20 +1781,11 @@
       "dev": true
     },
     "known-css-properties": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.18.0.tgz",
-      "integrity": "sha512-69AgJ1rQa7VvUsd2kpvVq+VeObDuo3zrj0CzM5Slmf6yduQFAI2kXPDQJR2IE/u6MSAUOJrwSzjg5vlz8qcMiw==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.19.0.tgz",
+      "integrity": "sha512-eYboRV94Vco725nKMlpkn3nV2+96p9c3gKXRsYqAJSswSENvBhN7n5L+uDhY58xQa0UukWsDMTGELzmD8Q+wTA==",
       "dev": true
     },
-    "lcid": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
-      "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
-      "dev": true,
-      "requires": {
-        "invert-kv": "^1.0.0"
-      }
-    },
     "leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -1802,12 +1812,12 @@
       }
     },
     "locate-path": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
-      "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
       "dev": true,
       "requires": {
-        "p-locate": "^2.0.0",
+        "p-locate": "^3.0.0",
         "path-exists": "^3.0.0"
       },
       "dependencies": {
@@ -1826,41 +1836,62 @@
       "dev": true
     },
     "log-symbols": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-3.0.0.tgz",
-      "integrity": "sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.0.0.tgz",
+      "integrity": "sha512-FN8JBzLx6CzeMrB0tg6pqlGU1wCrXW+ZXGH481kfsBqer0hToTIiHdjH4Mq8xJUbvATujKCvaREGWpGUionraA==",
       "dev": true,
       "requires": {
-        "chalk": "^2.4.2"
+        "chalk": "^4.0.0"
       },
       "dependencies": {
         "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
           "dev": true,
           "requires": {
-            "color-convert": "^1.9.0"
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
           }
         },
         "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz",
+          "integrity": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==",
           "dev": true,
           "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
           }
         },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
           "dev": true,
           "requires": {
-            "has-flag": "^3.0.0"
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
           }
         }
       }
@@ -2013,15 +2044,22 @@
       "dev": true
     },
     "minimist-options": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.0.2.tgz",
-      "integrity": "sha512-seq4hpWkYSUh1y7NXxzucwAN9yVlBc3Upgdjz8vLCP97jG8kaOmzYrVH/m7tQ1NYD1wdtZbSLfdy4zFmRWuc/w==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
+      "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
       "dev": true,
       "requires": {
         "arrify": "^1.0.1",
-        "is-plain-obj": "^1.1.0"
+        "is-plain-obj": "^1.1.0",
+        "kind-of": "^6.0.3"
       },
       "dependencies": {
+        "arrify": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+          "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
+          "dev": true
+        },
         "is-plain-obj": {
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
@@ -2080,15 +2118,15 @@
       }
     },
     "node-releases": {
-      "version": "1.1.53",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.53.tgz",
-      "integrity": "sha512-wp8zyQVwef2hpZ/dJH7SfSrIPD6YoJz6BDQDpGEkcA0s3LpAQoxBIYmfIq6QAhC1DhwsyCgTaTTcONwX8qzCuQ==",
+      "version": "1.1.55",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.55.tgz",
+      "integrity": "sha512-H3R3YR/8TjT5WPin/wOoHOUPHgvj8leuU/Keta/rwelEQN9pA/S2Dx8/se4pZ2LBxSd0nAGzsNzhqwa77v7F1w==",
       "dev": true
     },
     "node-sass": {
-      "version": "4.14.0",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.0.tgz",
-      "integrity": "sha512-AxqU+DFpk0lEz95sI6jO0hU0Rwyw7BXVEv6o9OItoXLyeygPeaSpiV4rwQb10JiTghHaa0gZeD21sz+OsQluaw==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.1.tgz",
+      "integrity": "sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==",
       "dev": true,
       "requires": {
         "async-foreach": "^0.1.3",
@@ -2105,7 +2143,7 @@
         "node-gyp": "^3.8.0",
         "npmlog": "^4.0.0",
         "request": "^2.88.0",
-        "sass-graph": "^2.2.4",
+        "sass-graph": "2.2.5",
         "stdout-stream": "^1.4.0",
         "true-case-path": "^1.0.2"
       }
@@ -2194,15 +2232,6 @@
       "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
       "dev": true
     },
-    "os-locale": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
-      "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
-      "dev": true,
-      "requires": {
-        "lcid": "^1.0.0"
-      }
-    },
     "os-tmpdir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
@@ -2220,27 +2249,27 @@
       }
     },
     "p-limit": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
-      "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
       "dev": true,
       "requires": {
-        "p-try": "^1.0.0"
+        "p-try": "^2.0.0"
       }
     },
     "p-locate": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
-      "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
       "dev": true,
       "requires": {
-        "p-limit": "^1.1.0"
+        "p-limit": "^2.0.0"
       }
     },
     "p-try": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
-      "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
       "dev": true
     },
     "parent-module": {
@@ -2357,13 +2386,53 @@
           "requires": {
             "locate-path": "^2.0.0"
           }
+        },
+        "locate-path": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+          "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
+          "dev": true,
+          "requires": {
+            "p-locate": "^2.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+          "dev": true,
+          "requires": {
+            "p-try": "^1.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+          "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
+          "dev": true,
+          "requires": {
+            "p-limit": "^1.1.0"
+          }
+        },
+        "p-try": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+          "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
+          "dev": true
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+          "dev": true
         }
       }
     },
     "postcss": {
-      "version": "7.0.28",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.28.tgz",
-      "integrity": "sha512-YU6nVhyWIsVtlNlnAj1fHTsUKW5qxm3KEgzq2Jj6KTEFOTK8QWR12eIDvrlWhiSTK8WIBFTBhOJV4DY6dUuEbw==",
+      "version": "7.0.30",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.30.tgz",
+      "integrity": "sha512-nu/0m+NtIzoubO+xdAlwZl/u5S5vi/y6BCsoL8D+8IxsD3XvBS8X4YEADNIVXKVuQvduiucnRv+vPIqj56EGMQ==",
       "dev": true,
       "requires": {
         "chalk": "^2.4.2",
@@ -2521,12 +2590,12 @@
       }
     },
     "postcss-scss": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-2.0.0.tgz",
-      "integrity": "sha512-um9zdGKaDZirMm+kZFKKVsnKPF7zF7qBAtIfTSnZXD1jZ0JNZIxdB6TxQOjCnlSzLRInVl2v3YdBh/M881C4ug==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-2.1.0.tgz",
+      "integrity": "sha512-1AFpO7BcDH+F4HWyHmn/QAEbo6FsqsbwBHrIyfUcASp+m7GFWW9bbRgN4aajdD0KlU3s00oWggmJIejeoF3YqA==",
       "dev": true,
       "requires": {
-        "postcss": "^7.0.0"
+        "postcss": "^7.0.6"
       }
     },
     "postcss-selector-parser": {
@@ -2634,12 +2703,6 @@
         "strip-indent": "^1.0.1"
       }
     },
-    "regenerator-runtime": {
-      "version": "0.13.5",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
-      "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==",
-      "dev": true
-    },
     "remark": {
       "version": "12.0.0",
       "resolved": "https://registry.npmjs.org/remark/-/remark-12.0.0.tgz",
@@ -2753,9 +2816,9 @@
       "dev": true
     },
     "require-main-filename": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
-      "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
       "dev": true
     },
     "resolve": {
@@ -2848,15 +2911,15 @@
       "dev": true
     },
     "sass-graph": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
-      "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz",
+      "integrity": "sha512-VFWDAHOe6mRuT4mZRd4eKE+d8Uedrk6Xnh7Sh9b4NGufQLQjOrvf/MQoOdx+0s92L89FeyUUNfU597j/3uNpag==",
       "dev": true,
       "requires": {
         "glob": "^7.0.0",
         "lodash": "^4.0.0",
         "scss-tokenizer": "^0.2.3",
-        "yargs": "^7.0.0"
+        "yargs": "^13.3.2"
       }
     },
     "scss-tokenizer": {
@@ -2977,9 +3040,9 @@
       "dev": true
     },
     "spdx-expression-parse": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz",
-      "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
       "dev": true,
       "requires": {
         "spdx-exceptions": "^2.1.0",
@@ -3051,9 +3114,9 @@
       }
     },
     "stringify-entities": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-3.0.0.tgz",
-      "integrity": "sha512-h7NJJIssprqlyjHT2eQt2W1F+MCcNmwPGlKb0bWEdET/3N44QN3QbUF/ueKCgAssyKRZ3Br9rQ7FcXjHr0qLHw==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-3.0.1.tgz",
+      "integrity": "sha512-Lsk3ISA2++eJYqBMPKcr/8eby1I6L0gP0NlxF8Zja6c05yr/yCYyb2c9PwXjd08Ib3If1vn1rbs1H5ZtVuOfvQ==",
       "dev": true,
       "requires": {
         "character-entities-html4": "^1.0.0",
@@ -3097,9 +3160,9 @@
       "dev": true
     },
     "stylelint": {
-      "version": "13.3.3",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-13.3.3.tgz",
-      "integrity": "sha512-j8Oio2T1YNiJc6iXDaPYd74Jg4zOa1bByNm/g9/Nvnq4tDPsIjMi46jhRZyPPktGPwjJ5FwcmCqIRlH6PVP8mA==",
+      "version": "13.4.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-13.4.0.tgz",
+      "integrity": "sha512-VOAOkTil5GmUfEJH+O6LdsggoUt692QTSu+YfLhVP5sFTVCVp0+PS2oCjjG8ZdUAP9aNNNYxTP6GWVbB1tl2bg==",
       "dev": true,
       "requires": {
         "@stylelint/postcss-css-in-js": "^0.37.1",
@@ -3111,7 +3174,7 @@
         "debug": "^4.1.1",
         "execall": "^2.0.0",
         "file-entry-cache": "^5.0.1",
-        "get-stdin": "^7.0.0",
+        "get-stdin": "^8.0.0",
         "global-modules": "^2.0.0",
         "globby": "^11.0.0",
         "globjoin": "^0.1.4",
@@ -3119,15 +3182,15 @@
         "ignore": "^5.1.4",
         "import-lazy": "^4.0.0",
         "imurmurhash": "^0.1.4",
-        "known-css-properties": "^0.18.0",
+        "known-css-properties": "^0.19.0",
         "leven": "^3.1.0",
         "lodash": "^4.17.15",
-        "log-symbols": "^3.0.0",
+        "log-symbols": "^4.0.0",
         "mathml-tag-names": "^2.1.3",
-        "meow": "^6.1.0",
+        "meow": "^7.0.1",
         "micromatch": "^4.0.2",
         "normalize-selector": "^0.2.0",
-        "postcss": "^7.0.27",
+        "postcss": "^7.0.30",
         "postcss-html": "^0.36.0",
         "postcss-less": "^3.1.4",
         "postcss-media-query-parser": "^0.2.3",
@@ -3138,7 +3201,7 @@
         "postcss-scss": "^2.0.0",
         "postcss-selector-parser": "^6.0.2",
         "postcss-syntax": "^0.36.2",
-        "postcss-value-parser": "^4.0.3",
+        "postcss-value-parser": "^4.1.0",
         "resolve-from": "^5.0.0",
         "slash": "^3.0.0",
         "specificity": "^0.4.1",
@@ -3169,9 +3232,9 @@
           }
         },
         "camelcase": {
-          "version": "5.3.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.0.0.tgz",
+          "integrity": "sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==",
           "dev": true
         },
         "camelcase-keys": {
@@ -3183,6 +3246,14 @@
             "camelcase": "^5.3.1",
             "map-obj": "^4.0.0",
             "quick-lru": "^4.0.1"
+          },
+          "dependencies": {
+            "camelcase": {
+              "version": "5.3.1",
+              "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+              "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+              "dev": true
+            }
           }
         },
         "chalk": {
@@ -3210,6 +3281,12 @@
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
           "dev": true
         },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+          "dev": true
+        },
         "find-up": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -3221,9 +3298,9 @@
           }
         },
         "get-stdin": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-7.0.0.tgz",
-          "integrity": "sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ==",
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-8.0.0.tgz",
+          "integrity": "sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==",
           "dev": true
         },
         "has-flag": {
@@ -3260,12 +3337,14 @@
           "dev": true
         },
         "meow": {
-          "version": "6.1.1",
-          "resolved": "https://registry.npmjs.org/meow/-/meow-6.1.1.tgz",
-          "integrity": "sha512-3YffViIt2QWgTy6Pale5QpopX/IvU3LPL03jOTqp6pGj3VjesdO/U8CuHMKpnQr4shCNCM5fd5XFFvIIl6JBHg==",
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/meow/-/meow-7.0.1.tgz",
+          "integrity": "sha512-tBKIQqVrAHqwit0vfuFPY3LlzJYkEOFyKa3bPgxzNl6q/RtN8KQ+ALYEASYuFayzSAsjlhXj/JZ10rH85Q6TUw==",
           "dev": true,
           "requires": {
             "@types/minimist": "^1.2.0",
+            "arrify": "^2.0.1",
+            "camelcase": "^6.0.0",
             "camelcase-keys": "^6.2.2",
             "decamelize-keys": "^1.1.0",
             "hard-rejection": "^2.1.0",
@@ -3278,15 +3357,6 @@
             "yargs-parser": "^18.1.3"
           }
         },
-        "p-limit": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-          "dev": true,
-          "requires": {
-            "p-try": "^2.0.0"
-          }
-        },
         "p-locate": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
@@ -3296,12 +3366,6 @@
             "p-limit": "^2.2.0"
           }
         },
-        "p-try": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-          "dev": true
-        },
         "parse-json": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz",
@@ -3421,6 +3485,14 @@
           "requires": {
             "camelcase": "^5.0.0",
             "decamelize": "^1.2.0"
+          },
+          "dependencies": {
+            "camelcase": {
+              "version": "5.3.1",
+              "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+              "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+              "dev": true
+            }
           }
         }
       }
@@ -3450,16 +3522,16 @@
       }
     },
     "stylelint-scss": {
-      "version": "3.17.1",
-      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-3.17.1.tgz",
-      "integrity": "sha512-KywqqHfK1otZv1QJA4xJDgcPJp1/cP3jnABpbU9gmXOKqKt8cNt27Imsh9JhY133X8D4zDh/38pNq4WjVfUQWQ==",
+      "version": "3.17.2",
+      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-3.17.2.tgz",
+      "integrity": "sha512-e0dmxqsofy/HZj4urcGSJw4S6yHDJxiQdT20/1ciCsd5lomisa7YM4+Qtt1EG4hsqEG1dbEeF855tec1UyqcSA==",
       "dev": true,
       "requires": {
         "lodash": "^4.17.15",
         "postcss-media-query-parser": "^0.2.3",
         "postcss-resolve-nested-selector": "^0.1.1",
         "postcss-selector-parser": "^6.0.2",
-        "postcss-value-parser": "^4.0.3"
+        "postcss-value-parser": "^4.1.0"
       }
     },
     "sugarss": {
@@ -3501,12 +3573,6 @@
           "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
           "dev": true
         },
-        "emoji-regex": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
-          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
-          "dev": true
-        },
         "is-fullwidth-code-point": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
@@ -3786,9 +3852,9 @@
       }
     },
     "vfile": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/vfile/-/vfile-4.1.0.tgz",
-      "integrity": "sha512-BaTPalregj++64xbGK6uIlsurN3BCRNM/P2Pg8HezlGzKd1O9PrwIac6bd9Pdx2uTb0QHoioZ+rXKolbVXEgJg==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-4.1.1.tgz",
+      "integrity": "sha512-lRjkpyDGjVlBA7cDQhQ+gNcvB1BGaTHYuSOcY3S7OhDmBtnzX95FhtZZDecSTDm6aajFymyve6S5DN4ZHGezdQ==",
       "dev": true,
       "requires": {
         "@types/unist": "^2.0.0",
@@ -3824,9 +3890,9 @@
       }
     },
     "which-module": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
-      "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
       "dev": true
     },
     "wide-align": {
@@ -3839,13 +3905,57 @@
       }
     },
     "wrap-ansi": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
-      "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+      "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
       "dev": true,
       "requires": {
-        "string-width": "^1.0.1",
-        "strip-ansi": "^3.0.1"
+        "ansi-styles": "^3.2.0",
+        "string-width": "^3.0.0",
+        "strip-ansi": "^5.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        }
       }
     },
     "wrappy": {
@@ -3882,9 +3992,9 @@
       "dev": true
     },
     "y18n": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
-      "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
+      "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
       "dev": true
     },
     "yallist": {
@@ -3894,56 +4004,86 @@
       "dev": true
     },
     "yaml": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.9.2.tgz",
-      "integrity": "sha512-HPT7cGGI0DuRcsO51qC1j9O16Dh1mZ2bnXwsi0jrSpsLz0WxOLSLXfkABVl6bZO629py3CU+OMJtpNHDLB97kg==",
-      "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.9.2"
-      }
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz",
+      "integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==",
+      "dev": true
     },
     "yargs": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz",
-      "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=",
+      "version": "13.3.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+      "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
       "dev": true,
       "requires": {
-        "camelcase": "^3.0.0",
-        "cliui": "^3.2.0",
-        "decamelize": "^1.1.1",
-        "get-caller-file": "^1.0.1",
-        "os-locale": "^1.4.0",
-        "read-pkg-up": "^1.0.1",
+        "cliui": "^5.0.0",
+        "find-up": "^3.0.0",
+        "get-caller-file": "^2.0.1",
         "require-directory": "^2.1.1",
-        "require-main-filename": "^1.0.1",
+        "require-main-filename": "^2.0.0",
         "set-blocking": "^2.0.0",
-        "string-width": "^1.0.2",
-        "which-module": "^1.0.0",
-        "y18n": "^3.2.1",
-        "yargs-parser": "^5.0.0"
+        "string-width": "^3.0.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^13.1.2"
       },
       "dependencies": {
-        "camelcase": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
-          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
           "dev": true
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
         }
       }
     },
     "yargs-parser": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
-      "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
+      "version": "13.1.2",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+      "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
       "dev": true,
       "requires": {
-        "camelcase": "^3.0.0"
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
       },
       "dependencies": {
         "camelcase": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
-          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
           "dev": true
         }
       }
diff --git a/package.json b/package.json
index 6499e5d..8b1e6a0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "heti",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "赫蹏是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来，可以为网站的读者带来更好的文章阅读体验。",
   "main": "lib/heti.scss",
   "files": [
@@ -9,12 +9,12 @@
     "lib"
   ],
   "scripts": {
-    "start": "node-sass -w --output-style=expanded lib/heti.scss _site/heti.css",
+    "start": "node-sass -w  --output-style=expanded _site/scss/ -o _site/",
     "compile": "rollup -c -w",
-    "build:site": "node-sass _site/scss/index.scss _site/index.css --output-style=compact",
-    "build:style": "node-sass lib/heti.scss umd/heti.min.css --output-style=compressed",
+    "build:style": "node-sass --output-style=compressed lib/heti.scss umd/heti.min.css",
+    "build:site": "node-sass --output-style=expanded _site/scss/ -o _site/",
     "build:script": "rollup -c",
-    "build": "npm run build:style && npm run build:style && npm run build:script",
+    "build": "npm run build:style && npm run build:site && npm run build:script",
     "test": "npx stylelint --config package.json 'lib/**/*.scss'"
   },
   "repository": {
@@ -40,13 +40,13 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
-    "node-sass": "^4.14.0",
+    "node-sass": "^4.14.1",
     "rollup": "^1.32.1",
     "rollup-plugin-terser": "^5.3.0",
-    "stylelint": "^13.3.3",
+    "stylelint": "^13.4.0",
     "stylelint-config-recommended-scss": "^4.2.0",
     "stylelint-config-standard": "^19.0.0",
-    "stylelint-scss": "^3.17.1"
+    "stylelint-scss": "^3.17.2"
   },
   "stylelint": {
     "extends": [
@@ -54,14 +54,19 @@
       "stylelint-config-recommended-scss"
     ],
     "rules": {
-      "no-descending-specificity": [
-        true,
+      "no-descending-specificity": null,
+      "at-rule-empty-line-before": null,
+      "block-opening-brace-space-before": "always",
+      "block-closing-brace-newline-after": [
+        "always",
         {
-          "ignore": [
-            "selectors-within-list"
+          "ignoreAtRules": [
+            "if",
+            "else"
           ]
         }
       ],
+      "rule-empty-line-before": null,
       "selector-type-no-unknown": [
         true,
         {