diff --git a/heti-addon.js b/heti-addon.js
index dc7d84c..03d53bf 100644
--- a/heti-addon.js
+++ b/heti-addon.js
@@ -767,13 +767,15 @@
 	  }
 
 	  autoSpacing () {
-	    document.addEventListener('DOMContentLoaded', () => {
+	    const callback = () => {
 	      const $$rootList = document.querySelectorAll(this.rootSelector);
 
 	      for (let $$root of $$rootList) {
 	        this.spacingElement($$root);
 	      }
-	    });
+	    };
+	    if (document.readyState === 'complete') setTimeout(callback);
+	    else document.addEventListener('DOMContentLoaded', callback);
 	  }
 	}
 
diff --git a/heti.css b/heti.css
index d8727b8..78d93bc 100644
--- a/heti.css
+++ b/heti.css
@@ -8,193 +8,160 @@
   font-family: "Heti Hei";
   src: "Heti Hei SC", "Heti Hei TC", "Heti Hei JP", "Heti Hei KR";
 }
-
 @font-face {
   font-family: "Heti Hei SC";
   src: local("PingFang SC Regular"), local("Heiti SC Regular"), local("Microsoft YaHei"), local("Source Han Sans CN Regular"), local("Noto Sans CJK SC Regular"), local("WenQuanYi Micro Hei"), local("Droid Sans Fallback");
 }
-
 @font-face {
   font-family: "Heti Hei TC";
   src: local("PingFang TC Regular"), local("Heiti TC Regular"), local("Microsoft Jhenghei"), local("Source Han Sans HK Regular"), local("Source Han Sans TW Regular"), local("Noto Sans CJK TC Regular"), local("WenQuanYi Micro Hei"), local("Droid Sans Fallback");
 }
-
 @font-face {
   font-family: "Heti Hei JP";
   src: local("Hiragino Sans GB W3"), local("Source Han Sans JP Regular"), local("Noto Sans CJK JP Regular"), local("Droid Sans Fallback");
 }
-
 @font-face {
   font-family: "Heti Hei KR";
   src: local("Source Han Sans KR Regular"), local("Noto Sans CJK KR Regular"), local("Droid Sans Fallback");
 }
-
 @font-face {
   font-family: "Heti Hei";
   font-weight: 200;
   src: "Heti Hei SC Light", "Heti Hei TC Light", "Heti Hei JP Light", "Heti Hei KR Light";
 }
-
 @font-face {
   font-family: "Heti Hei SC Light";
   font-weight: 200;
   src: local("PingFang SC Light"), local("Heiti SC Light"), "Heti Hei SC Light Fallback", local("Source Han Sans CN Light"), local("Noto Sans CJK SC Light");
 }
-
 @font-face {
   font-family: "Heti Hei TC Light";
   font-weight: 200;
   src: local("PingFang TC Light"), local("Heiti TC Light"), local("Microsoft Jhenghei Light"), local("Source Han Sans HK Light"), local("Source Han Sans TW Light"), local("Noto Sans CJK TC Light");
 }
-
 @font-face {
   font-family: "Heti Hei JP Light";
   font-weight: 200;
   src: local("Source Han Sans JP Light"), local("Noto Sans CJK JP Light");
 }
-
 @font-face {
   font-family: "Heti Hei KR Light";
   font-weight: 200;
   src: local("Source Han Sans KR Light"), local("Noto Sans CJK KR Light");
 }
-
 @font-face {
   font-family: "Heti Hei SC Light Fallback";
   font-weight: 200;
   src: local("Microsoft YaHei"), local("Droid Sans Fallback");
 }
-
 @font-face {
   font-family: "Heti Hei";
   font-weight: 600;
   src: "Heti Hei SC Bold", "Heti Hei TC Bold", "Heti Hei JP Bold", "Heti Hei KR Bold";
 }
-
 @font-face {
   font-family: "Heti Hei SC Bold";
   font-weight: 600;
   src: local("PingFang SC Medium"), local("Heiti SC Medium"), "Heti Hei SC Bold Fallback", local("Source Han Sans CN Bold"), local("Noto Sans CJK SC Bold");
 }
-
 @font-face {
   font-family: "Heti Hei TC Bold";
   font-weight: 600;
   src: local("PingFang TC Medium"), local("Heiti TC Medium"), local("Microsoft Jhenghei Bold"), local("Source Han Sans HK Bold"), local("Source Han Sans TW Bold"), local("Noto Sans CJK TC Bold");
 }
-
 @font-face {
   font-family: "Heti Hei JP Bold";
   font-weight: 600;
   src: local("Hiragino Sans GB W6"), local("Source Han Sans JP Bold"), local("Noto Sans CJK JP Bold");
 }
-
 @font-face {
   font-family: "Heti Hei KR Bold";
   font-weight: 600;
   src: local("Source Han Sans KR Bold"), local("Noto Sans CJK KR Bold");
 }
-
 @font-face {
   font-family: "Heti Hei SC Bold Fallback";
   font-weight: 600;
   src: local("Microsoft YaHei"), local("Droid Sans Fallback");
 }
-
 @font-face {
   font-family: "Heti Hei Black";
   font-weight: 800;
   src: "Heti Hei SC Black", "Heti Hei TC Black", "Heti Hei JP Black", "Heti Hei KR Black";
 }
-
 @font-face {
   font-family: "Heti Hei SC Black";
   font-weight: 800;
   src: local("Lantinghei SC Heavy"), local("PingFang SC Semibold"), local("Heiti SC Medium"), "Heti Hei SC Black Fallback", local("Source Han Sans CN Heavy"), local("Noto Sans CJK SC Heavy");
 }
-
 @font-face {
   font-family: "Heti Hei TC Black";
   font-weight: 800;
   src: local("Lantinghei TC Heavy"), local("PingFang TC Semibold"), local("Heiti TC Medium"), local("Microsoft Jhenghei Bold"), local("Source Han Sans HK Heavy"), local("Source Han Sans TW Heavy"), local("Noto Sans CJK TC Heavy");
 }
-
 @font-face {
   font-family: "Heti Hei JP Black";
   font-weight: 800;
   src: local("Hiragino Sans GB W6"), local("Source Han Sans JP Heavy"), local("Noto Sans CJK JP Heavy");
 }
-
 @font-face {
   font-family: "Heti Hei KR Black";
   font-weight: 800;
   src: local("Source Han Sans KR Heavy"), local("Noto Sans CJK KR Heavy");
 }
-
-font-face {
+@font-face {
   font-family: "Heti Hei SC Black Fallback";
   font-weight: 800;
   src: local("Microsoft YaHei"), local("Droid Sans Fallback");
 }
-
 @font-face {
   font-family: "Heti Song";
   src: local("Songti SC Regular"), local("Songti TC Regular"), local("SimSun");
 }
-
 @font-face {
   font-family: "Heti Song";
   font-weight: 200;
   src: local("Songti SC Light"), local("Songti TC Light"), "Heti Song Light Fallback";
 }
-
 @font-face {
   font-family: "Heti Song Light Fallback";
   font-weight: 200;
   src: local("SimSun");
 }
-
 @font-face {
   font-family: "Heti Song";
   font-weight: 600;
   src: local("Songti SC Bold"), local("Songti TC Bold"), "Heti Song Bold Fallback";
 }
-
 @font-face {
   font-family: "Heti Song Bold Fallback";
   font-weight: 600;
   src: local("SimSun");
 }
-
 @font-face {
   font-family: "Heti Song Black";
   font-weight: 800;
   src: local("Songti SC Black"), local("SimSun");
 }
-
 @font-face {
   font-family: "Heti Kai";
   src: local("Kaiti SC Regular"), local("Kaiti TC Regular"), local("STKaiti"), local("Kaiti"), local("BiauKai");
 }
-
 @font-face {
   font-family: "Heti Kai";
   font-weight: 600;
   src: local("Kaiti SC Bold"), local("Kaiti TC Bold");
 }
-
 @font-face {
   font-family: "Heti Kai Bold Fallback";
   font-weight: 600;
   src: local("STKaiti"), local("Kaiti") local("BiauKai");
 }
-
 @font-face {
   font-family: "Heti Kai Black";
   font-weight: 800;
   src: local("Kaiti SC Black"), local("Kaiti TC Black"), local("STKaiti"), local("Kaiti");
 }
-
 .heti {
   max-width: 42em;
   font-size: 16px;
@@ -204,29 +171,25 @@ font-face {
   overflow-wrap: break-word;
   word-wrap: break-word;
   hyphens: auto;
+  letter-spacing: 0.02em;
 }
-
 .heti::before, .heti::after {
   content: "";
   display: table;
 }
-
 .heti::after {
   clear: both;
 }
-
 .heti > *:first-child,
 .heti section > *:first-child,
 .heti td > *:first-child {
   margin-block-start: 0 !important;
 }
-
 .heti > *:last-child,
 .heti section > *:last-child,
 .heti td > *:last-child {
   margin-block-end: 0 !important;
 }
-
 .heti blockquote {
   margin-block-start: 12px;
   margin-block-end: 24px;
@@ -236,30 +199,25 @@ font-face {
   padding-block-end: 12px;
   padding-inline-start: 16px;
   padding-inline-end: 16px;
-  background-color: rgba(0, 0, 0, 0.054);
+  background-color: hsla(0deg, 0%, 0%, 0.054);
 }
-
-[data-darkmode="dark"] .heti blockquote {
-  background-color: rgba(255, 255, 255, 0.054);
+[data-darkmode=dark] .heti blockquote {
+  background-color: hsla(0deg, 0%, 100%, 0.054);
 }
-
 @media (prefers-color-scheme: dark) {
-  [data-darkmode="auto"] .heti blockquote {
-    background-color: rgba(255, 255, 255, 0.054);
+  [data-darkmode=auto] .heti blockquote {
+    background-color: hsla(0deg, 0%, 100%, 0.054);
   }
 }
-
 .heti figure {
   display: block;
   text-align: center;
 }
-
 .heti figure > img {
   display: block;
   margin-inline-start: auto;
   margin-inline-end: auto;
 }
-
 .heti hr {
   width: 30%;
   height: 1px;
@@ -268,29 +226,24 @@ font-face {
   margin-inline-start: auto;
   margin-inline-end: auto;
   border: 0;
-  background-color: #cccccc;
+  background-color: hsl(0deg, 0%, 80%);
 }
-
-[data-darkmode="dark"] .heti hr {
-  background-color: #404040;
+[data-darkmode=dark] .heti hr {
+  background-color: hsl(0deg, 0%, 25%);
 }
-
 @media (prefers-color-scheme: dark) {
-  [data-darkmode="auto"] .heti hr {
-    background-color: #404040;
+  [data-darkmode=auto] .heti hr {
+    background-color: hsl(0deg, 0%, 25%);
   }
 }
-
 .heti p {
   margin-block-start: 12px;
   margin-block-end: 24px;
   text-align: justify;
 }
-
 .heti p:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti p:not(:lang(zh)) {
   text-align: start;
 }
-
 .heti pre {
   margin-block-start: 12px;
   margin-block-end: 12px;
@@ -305,19 +258,16 @@ font-face {
   white-space: pre;
   word-wrap: normal;
   border-radius: 4px;
-  background-color: rgba(0, 0, 0, 0.054);
+  background-color: hsla(0deg, 0%, 0%, 0.054);
 }
-
-[data-darkmode="dark"] .heti pre {
-  background-color: rgba(255, 255, 255, 0.054);
+[data-darkmode=dark] .heti pre {
+  background-color: hsla(0deg, 0%, 100%, 0.054);
 }
-
 @media (prefers-color-scheme: dark) {
-  [data-darkmode="auto"] .heti pre {
-    background-color: rgba(255, 255, 255, 0.054);
+  [data-darkmode=auto] .heti pre {
+    background-color: hsla(0deg, 0%, 100%, 0.054);
   }
 }
-
 .heti pre code {
   margin: 0;
   padding: 0;
@@ -326,7 +276,16 @@ font-face {
   background-color: transparent;
   color: inherit;
 }
-
+.heti:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti:not(:lang(zh)) {
+  letter-spacing: 0;
+}
+.heti a,
+.heti abbr,
+.heti code,
+.heti heti-spacing,
+.heti [lang=en-US] {
+  letter-spacing: normal;
+}
 .heti h1,
 .heti h2,
 .heti h3,
@@ -339,44 +298,36 @@ font-face {
   margin-block-end: 12px;
   font-weight: 600;
 }
-
 .heti h1 {
   margin-block-end: 24px;
   font-size: 32px;
   line-height: 48px;
 }
-
 .heti h2 {
   font-size: 24px;
   line-height: 36px;
 }
-
 .heti h3 {
   font-size: 20px;
   line-height: 36px;
 }
-
 .heti h4 {
   font-size: 18px;
   line-height: 24px;
 }
-
 .heti h5 {
   font-size: 16px;
   line-height: 24px;
 }
-
 .heti h6 {
   font-size: 14px;
   line-height: 24px;
 }
-
 .heti h1,
 .heti h2,
 .heti h3 {
   letter-spacing: 0.05em;
 }
-
 .heti h1:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti h1:not(:lang(zh)),
 .heti h2:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
 .heti h2:not(:lang(zh)),
@@ -384,7 +335,6 @@ font-face {
 .heti h3:not(:lang(zh)) {
   letter-spacing: 0;
 }
-
 .heti h1 + h2,
 .heti h2 + h3,
 .heti h3 + h4,
@@ -392,19 +342,16 @@ font-face {
 .heti h5 + h6 {
   margin-block-start: 12px;
 }
-
 .heti ul,
 .heti ol,
 .heti dl {
   margin-block-start: 12px;
   margin-block-end: 24px;
 }
-
 .heti ul,
 .heti ol {
   padding-inline-start: 32px;
 }
-
 .heti ul ul,
 .heti ul ol,
 .heti ol ul,
@@ -412,31 +359,25 @@ font-face {
   margin-block-start: 0;
   margin-block-end: 0;
 }
-
 .heti ul {
   list-style-type: disc;
 }
-
 .heti ol {
   list-style-type: decimal;
 }
-
 .heti ul ul,
 .heti ol ul {
   list-style-type: circle;
 }
-
 .heti ul ul ul,
 .heti ul ol ul,
 .heti ol ul ul,
 .heti ol ol ul {
   list-style-type: square;
 }
-
 .heti li {
   list-style-type: unset;
 }
-
 .heti table {
   box-sizing: border-box;
   table-layout: fixed;
@@ -447,20 +388,17 @@ font-face {
   border-collapse: collapse;
   border-width: 1px;
   border-style: solid;
-  border-color: #cccccc;
+  border-color: hsl(0deg, 0%, 80%);
   word-break: break-word;
 }
-
-[data-darkmode="dark"] .heti table {
-  border-color: #404040;
+[data-darkmode=dark] .heti table {
+  border-color: hsl(0deg, 0%, 25%);
 }
-
 @media (prefers-color-scheme: dark) {
-  [data-darkmode="auto"] .heti table {
-    border-color: #404040;
+  [data-darkmode=auto] .heti table {
+    border-color: hsl(0deg, 0%, 25%);
   }
 }
-
 .heti th,
 .heti td {
   padding-block-start: 6px;
@@ -469,21 +407,18 @@ font-face {
   padding-inline-end: 8px;
   border-width: 1px;
   border-style: solid;
-  border-color: #cccccc;
+  border-color: hsl(0deg, 0%, 80%);
 }
-
-[data-darkmode="dark"] .heti th, [data-darkmode="dark"]
-.heti td {
-  border-color: #404040;
+[data-darkmode=dark] .heti th,
+[data-darkmode=dark] .heti td {
+  border-color: hsl(0deg, 0%, 25%);
 }
-
 @media (prefers-color-scheme: dark) {
-  [data-darkmode="auto"] .heti th, [data-darkmode="auto"]
-  .heti td {
-    border-color: #404040;
+  [data-darkmode=auto] .heti th,
+  [data-darkmode=auto] .heti td {
+    border-color: hsl(0deg, 0%, 25%);
   }
 }
-
 .heti caption {
   caption-side: bottom;
   margin-block-start: 2px;
@@ -491,66 +426,54 @@ font-face {
   font-size: 14px;
   line-height: 24px;
 }
-
 .heti a {
   text-decoration: none;
 }
-
 .heti a:hover {
   padding-block-end: 1px;
   border-block-end: 1px solid currentColor;
   text-decoration: none;
 }
-
 .heti abbr[title] {
   padding-block-end: 1px;
   border-block-end: 1px dotted;
   text-decoration: none;
   cursor: help;
 }
-
 .heti b,
 .heti strong {
   font-weight: 600;
 }
-
 .heti code {
   margin-inline-start: 0.25em;
   margin-inline-end: 0.25em;
   font-family: "SFMono-Regular", consolas, "Liberation Mono", menlo, courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 0.875em;
 }
-
 .heti dfn {
   font-weight: 600;
 }
-
 .heti dfn:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti dfn:not(:lang(zh)) {
   font-weight: 400;
 }
-
 .heti em {
   font-weight: 600;
 }
-
 .heti figcaption {
   display: inline-block;
   vertical-align: top;
   font-size: 14px;
   text-align: start;
 }
-
 .heti i {
   font-style: italic;
 }
-
 .heti ins,
 .heti u {
   padding-block-end: 1px;
   border-block-end: 1px solid;
   text-decoration: none;
 }
-
 .heti mark {
   padding-block-start: 2px;
   padding-block-end: 2px;
@@ -558,42 +481,34 @@ font-face {
   padding-inline-end: 1px;
   margin-inline-start: 1px;
   margin-inline-end: 1px;
-  background-color: rgba(255, 247, 0, 0.88);
+  background-color: hsla(58deg, 100%, 50%, 0.88);
   color: inherit;
 }
-
-[data-darkmode="dark"] .heti mark {
-  background-color: rgba(77, 74, 0, 0.88);
+[data-darkmode=dark] .heti mark {
+  background-color: hsla(58deg, 100%, 15%, 0.88);
 }
-
 @media (prefers-color-scheme: dark) {
-  [data-darkmode="auto"] .heti mark {
-    background-color: rgba(77, 74, 0, 0.88);
+  [data-darkmode=auto] .heti mark {
+    background-color: hsla(58deg, 100%, 15%, 0.88);
   }
 }
-
 .heti q {
   quotes: "「" "」" "『" "』";
 }
-
 .heti q:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti q:not(:lang(zh)) {
   quotes: initial;
   quotes: auto;
 }
-
 .heti rt {
   font-size: 0.875em;
   font-weight: 400;
 }
-
 .heti small {
   font-size: 0.875em;
 }
-
 .heti strong {
   font-weight: 600;
 }
-
 .heti sub,
 .heti sup {
   position: relative;
@@ -605,60 +520,49 @@ font-face {
   line-height: 1;
   vertical-align: baseline;
 }
-
 .heti sub {
   bottom: -0.25em;
 }
-
 .heti sup {
   top: -0.5em;
 }
-
 .heti sup:target,
 .heti sup a:target {
-  background-color: #dbedff;
+  background-color: hsl(210deg, 100%, 93%);
 }
-
-[data-darkmode="dark"] .heti sup:target, [data-darkmode="dark"]
-.heti sup a:target {
-  background-color: #3a6188;
+[data-darkmode=dark] .heti sup:target,
+[data-darkmode=dark] .heti sup a:target {
+  background-color: hsl(210deg, 40%, 38%);
 }
-
 @media (prefers-color-scheme: dark) {
-  [data-darkmode="auto"] .heti sup:target, [data-darkmode="auto"]
-  .heti sup a:target {
-    background-color: #3a6188;
+  [data-darkmode=auto] .heti sup:target,
+  [data-darkmode=auto] .heti sup a:target {
+    background-color: hsl(210deg, 40%, 38%);
   }
 }
-
 .heti summary {
   padding-inline-start: 1em;
   outline: 0;
   cursor: pointer;
 }
-
 .heti summary::-webkit-details-marker {
   width: 0.6em;
   margin-inline-end: 0.4em;
 }
-
 .heti u[title] {
   cursor: help;
   border-block-end-width: 3px;
   border-block-end-style: double;
-  border-block-end-color: rgba(0, 0, 0, 0.54);
+  border-block-end-color: hsla(0deg, 0%, 0%, 0.54);
 }
-
-[data-darkmode="dark"] .heti u[title] {
-  border-block-end-color: rgba(255, 255, 255, 0.54);
+[data-darkmode=dark] .heti u[title] {
+  border-block-end-color: hsla(0deg, 0%, 100%, 0.54);
 }
-
 @media (prefers-color-scheme: dark) {
-  [data-darkmode="auto"] .heti u[title] {
-    border-block-end-color: rgba(255, 255, 255, 0.54);
+  [data-darkmode=auto] .heti u[title] {
+    border-block-end-color: hsla(0deg, 0%, 100%, 0.54);
   }
 }
-
 .heti address,
 .heti cite,
 .heti dfn,
@@ -666,7 +570,6 @@ font-face {
 .heti em {
   font-style: normal;
 }
-
 .heti address:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti address:not(:lang(zh)),
 .heti cite:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
 .heti cite:not(:lang(zh)),
@@ -678,7 +581,6 @@ font-face {
 .heti em:not(:lang(zh)) {
   font-style: italic;
 }
-
 .heti abbr[title],
 .heti del,
 .heti ins,
@@ -687,19 +589,15 @@ font-face {
   margin-inline-start: 1px;
   margin-inline-end: 1px;
 }
-
 .heti, .heti--sans {
   font-family: "Helvetica Neue", helvetica, arial, "Heti Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
-
 .heti--serif {
   font-family: "Times New Roman", times, "Heti Song", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
-
 .heti--classic {
   font-family: "Times New Roman", times, "Heti Song", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
-
 .heti--classic h1,
 .heti--classic h2,
 .heti--classic h3,
@@ -709,101 +607,79 @@ font-face {
   font-family: "Times New Roman", times, "Heti Kai Black", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 800;
 }
-
 .heti--classic blockquote,
 .heti--classic cite,
 .heti--classic q {
   font-family: "Times New Roman", times, "Heti Kai", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
-
 .heti--classic figcaption,
 .heti--classic caption,
 .heti--classic th {
   font-family: "Helvetica Neue", helvetica, arial, "Heti Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
-
 .heti--hei {
   font-family: "Helvetica Neue", helvetica, arial, "Heti Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
-
 .heti--song {
   font-family: "Times New Roman", times, "Heti Song", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
-
 .heti--kai {
   font-family: "Times New Roman", times, "Heti Kai", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
-
 .heti--columns-1, .heti--columns-2, .heti--columns-3, .heti--columns-4, .heti--columns-16em, .heti--columns-20em, .heti--columns-24em, .heti--columns-28em, .heti--columns-32em, .heti--columns-36em, .heti--columns-40em, .heti--columns-44em, .heti--columns-48em, .heti comma {
   max-width: none;
   column-gap: 2em;
 }
-
 .heti--columns-1 p, .heti--columns-2 p, .heti--columns-3 p, .heti--columns-4 p, .heti--columns-16em p, .heti--columns-20em p, .heti--columns-24em p, .heti--columns-28em p, .heti--columns-32em p, .heti--columns-36em p, .heti--columns-40em p, .heti--columns-44em p, .heti--columns-48em p, .heti comma p {
   margin-block-start: 6px;
   margin-block-end: 12px;
   text-indent: 2em;
 }
-
 .heti--columns-1 {
   column-count: 1;
 }
-
 .heti--columns-2 {
   column-count: 2;
 }
-
 .heti--columns-3 {
   column-count: 3;
 }
-
 .heti--columns-4 {
   column-count: 4;
 }
-
 .heti--columns-16em {
   column-width: 16em;
 }
-
 .heti--columns-20em {
   column-width: 20em;
 }
-
 .heti--columns-24em {
   column-width: 24em;
 }
-
 .heti--columns-28em {
   column-width: 28em;
 }
-
 .heti--columns-32em {
   column-width: 32em;
 }
-
 .heti--columns-36em {
   column-width: 36em;
 }
-
 .heti--columns-40em {
   column-width: 40em;
 }
-
 .heti--columns-44em {
   column-width: 44em;
 }
-
 .heti--columns-48em {
   column-width: 48em;
 }
-
 .heti--vertical {
   max-width: none;
   max-height: 42em;
   writing-mode: vertical-rl;
   letter-spacing: 0.125em;
 }
-
 .heti--vertical h1,
 .heti--vertical h2,
 .heti--vertical h3,
@@ -812,15 +688,12 @@ font-face {
 .heti--vertical h6 {
   text-align: start;
 }
-
 .heti--vertical q {
   quotes: "「" "」" "『" "』";
 }
-
 .heti--ancient, .heti--poetry {
   font-family: "Times New Roman", times, "Heti Song", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
-
 .heti--ancient h1,
 .heti--ancient h2,
 .heti--ancient h3,
@@ -836,7 +709,6 @@ font-face {
   font-weight: 800;
   text-align: center;
 }
-
 .heti--ancient h1 .heti-meta,
 .heti--ancient h2 .heti-meta,
 .heti--ancient h3 .heti-meta,
@@ -850,7 +722,6 @@ font-face {
 .heti--poetry h6 .heti-meta {
   font-weight: 400;
 }
-
 @media screen and (min-width: 640px) {
   .heti--ancient h1 .heti-meta,
   .heti--ancient h2 .heti-meta,
@@ -871,29 +742,24 @@ font-face {
     margin-inline-start: 8px;
   }
 }
-
 .heti--ancient .heti-meta, .heti--poetry .heti-meta {
   line-height: 24px;
   text-align: center;
   text-indent: 0;
 }
-
 .heti--ancient p {
   text-indent: 2em;
 }
-
 .heti--poetry p {
   text-align: center;
   text-indent: 0;
 }
-
 .heti--annotation p {
   margin-block-start: 0;
   margin-block-end: 0;
   line-height: 2.25;
   text-indent: 2em;
 }
-
 .heti--annotation em {
   -webkit-text-emphasis: filled circle;
   -webkit-text-emphasis-position: under;
@@ -901,166 +767,132 @@ font-face {
   text-emphasis-position: under right;
   font-weight: 400;
 }
-
 .heti--annotation em:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti--annotation em:not(:lang(zh)) {
   -webkit-text-emphasis: none;
   text-emphasis: none;
 }
-
 .heti--annotation .heti-meta {
   margin-block-start: 12px;
   margin-block-end: 24px;
 }
-
 .heti .heti-meta {
   display: block;
   text-indent: 0;
 }
-
 .heti .heti-verse {
   text-align: center;
   text-indent: 0;
 }
-
 .heti .heti-large {
   font-size: 18px;
   line-height: 24px;
 }
-
 .heti .heti-x-large {
   font-size: 20px;
   line-height: 30px;
   letter-spacing: 0.05em;
 }
-
 .heti .heti-small {
   font-size: 14px;
   line-height: 24px;
 }
-
 .heti .heti-x-small {
   font-size: 12px;
   line-height: 18px;
 }
-
 .heti .heti-list-latin {
   list-style-type: upper-latin;
 }
-
 .heti .heti-list-latin ol {
   list-style-type: lower-roman;
 }
-
 .heti .heti-list-latin ol ol {
   list-style-type: lower-latin;
 }
-
 .heti .heti-list-han {
   list-style-type: cjk-ideographic;
 }
-
 .heti .heti-list-han ol {
   list-style-type: decimal;
 }
-
 .heti .heti-list-han ol ol {
   list-style-type: decimal-leading-zero;
 }
-
 .heti .heti-fn {
   margin-block-start: 59px;
   border-block-start: 1px solid;
-  border-block-start-color: #cccccc;
+  border-block-start-color: hsl(0deg, 0%, 80%);
   font-size: 14px;
   font-family: "Helvetica Neue", helvetica, arial, "Heti Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   line-height: 24px;
 }
-
-[data-darkmode="dark"] .heti .heti-fn {
-  border-block-start-color: #404040;
+[data-darkmode=dark] .heti .heti-fn {
+  border-block-start-color: hsl(0deg, 0%, 25%);
 }
-
 @media (prefers-color-scheme: dark) {
-  [data-darkmode="auto"] .heti .heti-fn {
-    border-block-start-color: #404040;
+  [data-darkmode=auto] .heti .heti-fn {
+    border-block-start-color: hsl(0deg, 0%, 25%);
   }
 }
-
 .heti .heti-fn ol {
   margin-block-start: 12px;
   margin-block-end: 0;
 }
-
 .heti .heti-fn li:target {
-  background-color: #dbedff;
+  background-color: hsl(210deg, 100%, 93%);
 }
-
-[data-darkmode="dark"] .heti .heti-fn li:target {
-  background-color: #3a6188;
+[data-darkmode=dark] .heti .heti-fn li:target {
+  background-color: hsl(210deg, 40%, 38%);
 }
-
 @media (prefers-color-scheme: dark) {
-  [data-darkmode="auto"] .heti .heti-fn li:target {
-    background-color: #3a6188;
+  [data-darkmode=auto] .heti .heti-fn li:target {
+    background-color: hsl(210deg, 40%, 38%);
   }
 }
-
 .heti .heti-hang {
   position: absolute;
   line-height: inherit;
   text-indent: 0;
 }
-
 .heti .heti-em {
   -webkit-text-emphasis: filled circle;
   -webkit-text-emphasis-position: under;
   text-emphasis: filled circle;
   text-emphasis-position: under right;
 }
-
 .heti .heti-em:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti .heti-em:not(:lang(zh)) {
   -webkit-text-emphasis: none;
   text-emphasis: none;
 }
-
 .heti .heti-ruby--inline {
   display: inline-flex;
   flex-direction: column-reverse;
   height: 1.5em;
 }
-
 .heti .heti-ruby--inline rt {
   display: inline;
   margin-bottom: -0.25em;
   line-height: 1;
   text-align: center;
 }
-
 .heti heti-spacing {
   display: inline;
 }
-
-.heti heti-spacing + sup,
-.heti heti-spacing + sub {
+.heti heti-spacing + sup, .heti heti-spacing + sub {
   margin-inline-start: 0;
 }
-
 .heti .heti-spacing-start {
   margin-inline-end: 0.25em;
 }
-
 .heti .heti-spacing-end {
   margin-inline-start: 0.25em;
 }
-
 .heti heti-adjacent {
   display: inline;
 }
-
 .heti .heti-adjacent-half {
   margin-inline-end: -0.5em;
 }
-
 .heti .heti-adjacent-quarter {
   margin-inline-end: -0.25em;
 }
diff --git a/index.css b/index.css
index 1c7c7c2..568ff08 100644
--- a/index.css
+++ b/index.css
@@ -12,10 +12,8 @@
  * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
 html {
-  line-height: 1.15;
-  /* 1 */
-  -webkit-text-size-adjust: 100%;
-  /* 2 */
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
 }
 
 /* Sections
@@ -50,12 +48,9 @@ h1 {
  * 2. Show the overflow in Edge and IE.
  */
 hr {
-  box-sizing: content-box;
-  /* 1 */
-  height: 0;
-  /* 1 */
-  overflow: visible;
-  /* 2 */
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
 }
 
 /**
@@ -63,10 +58,8 @@ hr {
  * 2. Correct the odd `em` font sizing in all browsers.
  */
 pre {
-  font-family: monospace, monospace;
-  /* 1 */
-  font-size: 1em;
-  /* 2 */
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
 }
 
 /* Text-level semantics
@@ -83,12 +76,9 @@ a {
  * 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 */
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
 }
 
 /**
@@ -106,10 +96,8 @@ strong {
 code,
 kbd,
 samp {
-  font-family: monospace, monospace;
-  /* 1 */
-  font-size: 1em;
-  /* 2 */
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
 }
 
 /**
@@ -159,14 +147,10 @@ input,
 optgroup,
 select,
 textarea {
-  font-family: inherit;
-  /* 1 */
-  font-size: 100%;
-  /* 1 */
-  line-height: 1.15;
-  /* 1 */
-  margin: 0;
-  /* 2 */
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
 }
 
 /**
@@ -174,8 +158,7 @@ textarea {
  * 1. Show the overflow in Edge.
  */
 button,
-input {
-  /* 1 */
+input { /* 1 */
   overflow: visible;
 }
 
@@ -184,8 +167,7 @@ input {
  * 1. Remove the inheritance of text transform in Firefox.
  */
 button,
-select {
-  /* 1 */
+select { /* 1 */
   text-transform: none;
 }
 
@@ -193,9 +175,9 @@ select {
  * Correct the inability to style clickable types in iOS and Safari.
  */
 button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
+[type=button],
+[type=reset],
+[type=submit] {
   -webkit-appearance: button;
 }
 
@@ -203,9 +185,9 @@ 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 {
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
@@ -214,9 +196,9 @@ button::-moz-focus-inner,
  * Restore the focus styles unset by the previous rule.
  */
 button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
+[type=button]:-moz-focusring,
+[type=reset]:-moz-focusring,
+[type=submit]:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
@@ -234,18 +216,12 @@ fieldset {
  *    `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 */
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
 }
 
 /**
@@ -266,19 +242,17 @@ textarea {
  * 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 */
+[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 {
+[type=number]::-webkit-inner-spin-button,
+[type=number]::-webkit-outer-spin-button {
   height: auto;
 }
 
@@ -286,17 +260,15 @@ textarea {
  * 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 */
+[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 {
+[type=search]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
@@ -305,10 +277,8 @@ textarea {
  * 2. Change font properties to `inherit` in Safari.
  */
 ::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  /* 1 */
-  font: inherit;
-  /* 2 */
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
 }
 
 /* Interactive
@@ -360,84 +330,74 @@ li {
   list-style: none;
 }
 
-.container[data-bg-grid="grid-12"] {
+.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);
+  background-image: linear-gradient(transparent 11px, hsl(0deg, 0%, 93%) 1px), linear-gradient(to left, transparent 12px, hsl(0deg, 0%, 93%), transparent 13px), linear-gradient(to right, transparent 12px, hsl(0deg, 0%, 93%), transparent 13px);
 }
-
-.container[data-bg-grid="grid-12"] .heti--vertical {
-  outline: 1px solid #ededed;
+.container[data-bg-grid=grid-12] .heti--vertical {
+  outline: 1px solid hsl(0deg, 0%, 93%);
   background-size: 12px 100%;
-  background-image: linear-gradient(to left, transparent 11px, #ededed 1px);
+  background-image: linear-gradient(to left, transparent 11px, hsl(0deg, 0%, 93%) 1px);
 }
-
-.container[data-bg-grid="grid-24"] {
+.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);
+  background-image: linear-gradient(transparent 23px, hsl(0deg, 0%, 93%) 1px), linear-gradient(to left, transparent 12px, hsl(0deg, 0%, 93%), transparent 13px), linear-gradient(to right, transparent 12px, hsl(0deg, 0%, 93%), transparent 13px);
 }
-
-.container[data-bg-grid="grid-24"] .heti--vertical {
-  outline: 1px solid #ededed;
+.container[data-bg-grid=grid-24] .heti--vertical {
+  outline: 1px solid hsl(0deg, 0%, 93%);
   background-size: 24px 100%;
-  background-image: linear-gradient(to left, transparent 23px, #ededed 1px);
+  background-image: linear-gradient(to left, transparent 23px, hsl(0deg, 0%, 93%) 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);
+[data-darkmode=dark] .container[data-bg-grid=grid-12] {
+  background-image: linear-gradient(transparent 11px, hsl(0deg, 0%, 20%) 1px), linear-gradient(to left, transparent 12px, hsl(0deg, 0%, 20%), transparent 13px), linear-gradient(to right, transparent 12px, hsl(0deg, 0%, 20%), transparent 13px);
 }
-
-[data-darkmode="dark"] .container[data-bg-grid="grid-12"] .heti--vertical {
+[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);
+  background-image: linear-gradient(to left, transparent 11px, hsl(0deg, 0%, 20%) 1px);
 }
-
-[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);
+[data-darkmode=dark] .container[data-bg-grid=grid-24] {
+  background-image: linear-gradient(transparent 23px, hsl(0deg, 0%, 20%) 1px), linear-gradient(to left, transparent 12px, hsl(0deg, 0%, 20%), transparent 13px), linear-gradient(to right, transparent 12px, hsl(0deg, 0%, 20%), transparent 13px);
 }
-
-[data-darkmode="dark"] .container[data-bg-grid="grid-24"] .heti--vertical {
+[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);
+  background-image: linear-gradient(to left, transparent 23px, hsl(0deg, 0%, 20%) 1px);
 }
-
 @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] {
+    background-image: linear-gradient(transparent 11px, hsl(0deg, 0%, 20%) 1px), linear-gradient(to left, transparent 12px, hsl(0deg, 0%, 20%), transparent 13px), linear-gradient(to right, transparent 12px, hsl(0deg, 0%, 20%), transparent 13px);
   }
-  [data-darkmode="auto"] .container[data-bg-grid="grid-12"] .heti--vertical {
+  [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);
+    background-image: linear-gradient(to left, transparent 11px, hsl(0deg, 0%, 20%) 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] {
+    background-image: linear-gradient(transparent 23px, hsl(0deg, 0%, 20%) 1px), linear-gradient(to left, transparent 12px, hsl(0deg, 0%, 20%), transparent 13px), linear-gradient(to right, transparent 12px, hsl(0deg, 0%, 20%), transparent 13px);
   }
-  [data-darkmode="auto"] .container[data-bg-grid="grid-24"] .heti--vertical {
+  [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);
+    background-image: linear-gradient(to left, transparent 23px, hsl(0deg, 0%, 20%) 1px);
   }
 }
-
 @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-12] {
+    background-image: linear-gradient(transparent 11px, hsl(0deg, 0%, 93%) 1px), linear-gradient(to left, transparent 48px, hsl(0deg, 0%, 93%), transparent 49px), linear-gradient(to right, transparent 48px, hsla(0deg, 100%, 50%, 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);
+  .container[data-bg-grid=grid-24] {
+    background-image: linear-gradient(transparent 23px, hsl(0deg, 0%, 93%) 1px), linear-gradient(to left, transparent 48px, hsl(0deg, 0%, 93%), transparent 49px), linear-gradient(to right, transparent 48px, hsla(0deg, 100%, 50%, 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-12] {
+    background-image: linear-gradient(transparent 11px, hsl(0deg, 0%, 20%) 1px), linear-gradient(to left, transparent 48px, hsl(0deg, 0%, 20%), transparent 49px), linear-gradient(to right, transparent 48px, hsla(0deg, 100%, 65%, 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);
+  [data-darkmode=dark] .container[data-bg-grid=grid-24] {
+    background-image: linear-gradient(transparent 23px, hsl(0deg, 0%, 20%) 1px), linear-gradient(to left, transparent 48px, hsl(0deg, 0%, 20%), transparent 49px), linear-gradient(to right, transparent 48px, hsla(0deg, 100%, 65%, 0.4), transparent 49px);
   }
 }
-
 @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-12] {
+    background-image: linear-gradient(transparent 11px, hsl(0deg, 0%, 20%) 1px), linear-gradient(to left, transparent 48px, hsl(0deg, 0%, 20%), transparent 49px), linear-gradient(to right, transparent 48px, hsla(0deg, 100%, 65%, 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);
+  [data-darkmode=auto] .container[data-bg-grid=grid-24] {
+    background-image: linear-gradient(transparent 23px, hsl(0deg, 0%, 20%) 1px), linear-gradient(to left, transparent 48px, hsl(0deg, 0%, 20%), transparent 49px), linear-gradient(to right, transparent 48px, hsla(0deg, 100%, 65%, 0.4), transparent 49px);
   }
 }
 
@@ -471,7 +431,6 @@ li {
   --border-block-end-highlight-tap-color: hsl(216, 100%, 42%);
   --text-highlight-color: hsl(0, 0%, 100%);
 }
-
 .panel-list--gray {
   --bg-color: hsl(180, 100%, 100%);
   --bg-tap-color: hsl(0, 0%, 94%);
@@ -498,8 +457,7 @@ li {
   --border-block-end-highlight-tap-color: hsl(228, 4%, 26%);
   --text-highlight-color: hsl(0, 0%, 92%);
 }
-
-[data-darkmode="dark"] .panel-list {
+[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);
@@ -525,8 +483,7 @@ li {
   --border-block-end-highlight-tap-color: hsl(215, 74%, 51%);
   --text-highlight-color: hsl(0, 0%, 100%);
 }
-
-[data-darkmode="dark"] .panel-list--gray {
+[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);
@@ -552,9 +509,8 @@ li {
   --border-block-end-highlight-tap-color: hsl(0, 0%, 69%);
   --text-highlight-color: hsl(0, 0%, 15%);
 }
-
 @media (prefers-color-scheme: dark) {
-  [data-darkmode="auto"] .panel-list {
+  [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);
@@ -580,7 +536,7 @@ li {
     --border-block-end-highlight-tap-color: hsl(215, 74%, 51%);
     --text-highlight-color: hsl(0, 0%, 100%);
   }
-  [data-darkmode="auto"] .panel-list--gray {
+  [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);
@@ -607,11 +563,9 @@ li {
     --text-highlight-color: hsl(0, 0%, 15%);
   }
 }
-
 .panel-list + .panel-list {
   margin-inline-start: 12px;
 }
-
 .panel-list label {
   position: relative;
   display: block;
@@ -632,31 +586,25 @@ li {
   color: var(--text-color);
   box-shadow: 0 1px 0 var(--box-shadow-color);
 }
-
 .panel-list label:active {
   background-color: var(--bg-tap-color);
 }
-
 .panel-list li {
   margin-inline-end: -1px;
 }
-
 .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);
 }
-
 .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);
 }
-
 .panel-list input {
   display: none;
 }
-
 .panel-list input:checked + label {
   z-index: 1;
   background-image: linear-gradient(to bottom, var(--bg-highlight-color-start), var(--bg-highlight-color-end));
@@ -665,14 +613,12 @@ li {
   border-block-end-color: var(--border-block-end-highlight-color);
   color: var(--text-highlight-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--icon label {
   width: 30px;
   padding-inline-start: 8px;
@@ -717,7 +663,6 @@ li {
     opacity: 1;
   }
 }
-
 .card {
   position: relative;
   left: -12px;
@@ -729,14 +674,12 @@ li {
   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;
+  box-shadow: 0 4px 16px hsla(0deg, 0%, 0%, 0.16);
+  background-color: hsl(0deg, 0%, 100%);
 }
-
 .article .card {
   text-align: left;
 }
-
 .card > figcaption {
   display: inline-block;
   margin-block-start: 16px;
@@ -745,14 +688,14 @@ li {
   padding-inline-start: 0;
   padding-inline-end: 72px;
   line-height: 24px;
-  border-block-start: 1px solid #ededed;
+  border-block-start: 1px solid hsl(0deg, 0%, 93%);
 }
 
 .card__vertical-container {
   box-sizing: border-box;
   width: 100%;
   height: 30em;
-  border: 1px solid #ededed;
+  border: 1px solid hsl(0deg, 0%, 93%);
   overflow: auto;
   writing-mode: vertical-rl;
 }
@@ -768,39 +711,35 @@ li {
     padding-inline-end: 32px;
   }
 }
-
-[data-darkmode="dark"] .card {
-  background-color: #292929;
+[data-darkmode=dark] .card {
+  background-color: hsl(0deg, 0%, 16%);
 }
-
-[data-darkmode="dark"] .card > figcaption {
-  border-block-start: 1px solid #333333;
+[data-darkmode=dark] .card > figcaption {
+  border-block-start: 1px solid hsl(0deg, 0%, 20%);
 }
-
-[data-darkmode="dark"] .card .card__vertical-container {
-  border-color: #333333;
+[data-darkmode=dark] .card .card__vertical-container {
+  border-color: hsl(0deg, 0%, 20%);
 }
-
 @media (prefers-color-scheme: dark) {
-  [data-darkmode="auto"] .card {
-    background-color: #292929;
+  [data-darkmode=auto] .card {
+    background-color: hsl(0deg, 0%, 16%);
   }
-  [data-darkmode="auto"] .card > figcaption {
-    border-block-start: 1px solid #333333;
+  [data-darkmode=auto] .card > figcaption {
+    border-block-start: 1px solid hsl(0deg, 0%, 20%);
   }
-  [data-darkmode="auto"] .card .card__vertical-container {
-    border-color: #333333;
+  [data-darkmode=auto] .card .card__vertical-container {
+    border-color: hsl(0deg, 0%, 20%);
   }
 }
 
 /** 基础样式 **/
 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;
+  background-color: hsl(0deg, 0%, 100%);
 }
 
 a {
-  color: #4387f4;
+  color: hsl(217deg, 89%, 61%);
   text-decoration: none;
 }
 
@@ -817,7 +756,6 @@ a {
   margin-inline-start: auto;
   margin-inline-end: auto;
 }
-
 .article__nav ol {
   margin-block-start: 24px;
   margin-block-end: 24px;
@@ -850,7 +788,7 @@ a {
 @media screen and (min-width: 640px) {
   body {
     min-width: 640px;
-    background-color: #ededed;
+    background-color: hsl(0deg, 0%, 93%);
   }
   .container {
     box-sizing: border-box;
@@ -866,15 +804,14 @@ a {
     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;
+    box-shadow: 0 8px 32px hsla(0deg, 0%, 0%, 0.32);
+    background-color: hsl(0deg, 0%, 100%);
   }
   .section {
     max-height: none;
     overflow: visible;
   }
 }
-
 @media screen and (min-width: 900px) {
   .article__nav {
     position: relative;
@@ -889,7 +826,7 @@ a {
     padding-block-end: 12px;
     padding-inline-start: 8px;
     padding-inline-end: 8px;
-    border: 1px solid #ededed;
+    border: 1px solid hsl(0deg, 0%, 93%);
     border-radius: 2px;
   }
   .article__nav ol {
@@ -900,43 +837,38 @@ a {
     margin-block-start: 0;
   }
 }
-
-[data-darkmode="dark"] body {
-  background-color: #3d3d3d;
+[data-darkmode=dark] body {
+  background-color: hsl(0deg, 0%, 24%);
 }
-
-[data-darkmode="dark"] a {
-  color: #6b90cc;
+[data-darkmode=dark] a {
+  color: hsl(217deg, 49%, 61%);
 }
-
-[data-darkmode="dark"] a:visited {
-  color: #2f5189;
+[data-darkmode=dark] a:visited {
+  color: hsl(217deg, 49%, 36%);
 }
-
-[data-darkmode="dark"] .container {
-  background-color: #292929;
-  color: #a3a3a3;
+[data-darkmode=dark] .container {
+  background-color: hsl(0deg, 0%, 16%);
+  color: hsl(0deg, 0%, 64%);
 }
-
-[data-darkmode="dark"] .article__nav {
-  border-color: #333333;
+[data-darkmode=dark] .article__nav {
+  border-color: hsl(0deg, 0%, 20%);
 }
 
 @media (prefers-color-scheme: dark) {
-  [data-darkmode="auto"] body {
-    background-color: #3d3d3d;
+  [data-darkmode=auto] body {
+    background-color: hsl(0deg, 0%, 24%);
   }
-  [data-darkmode="auto"] a {
-    color: #6b90cc;
+  [data-darkmode=auto] a {
+    color: hsl(217deg, 49%, 61%);
   }
-  [data-darkmode="auto"] a:visited {
-    color: #2f5189;
+  [data-darkmode=auto] a:visited {
+    color: hsl(217deg, 49%, 36%);
   }
-  [data-darkmode="auto"] .container {
-    background-color: #292929;
-    color: #a3a3a3;
+  [data-darkmode=auto] .container {
+    background-color: hsl(0deg, 0%, 16%);
+    color: hsl(0deg, 0%, 64%);
   }
-  [data-darkmode="auto"] .article__nav {
-    border-color: #333333;
+  [data-darkmode=auto] .article__nav {
+    border-color: hsl(0deg, 0%, 20%);
   }
 }