feat(treewide): Migrate to zola

3 files changed, 2043 insertions, 0 deletions

diff --git a/src/themes/serene/sass/giscus_dark.scss b/src/themes/serene/sass/giscus_dark.scss
new file mode 100644
index 0000000..ea0572f
--- /dev/null
+++ b/src/themes/serene/sass/giscus_dark.scss
@@ -0,0 +1,100 @@
+main {
+  --primary-default: 88, 113, 162;
+  --bg-default: 22, 22, 24;
+  --color-prettylights-syntax-comment: #8b949e;
+  --color-prettylights-syntax-constant: #79c0ff;
+  --color-prettylights-syntax-entity: #d2a8ff;
+  --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
+  --color-prettylights-syntax-entity-tag: #7ee787;
+  --color-prettylights-syntax-keyword: #ff7b72;
+  --color-prettylights-syntax-string: #a5d6ff;
+  --color-prettylights-syntax-variable: #ffa657;
+  --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
+  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
+  --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
+  --color-prettylights-syntax-carriage-return-text: #f0f6fc;
+  --color-prettylights-syntax-carriage-return-bg: #b62324;
+  --color-prettylights-syntax-string-regexp: #7ee787;
+  --color-prettylights-syntax-markup-list: #f2cc60;
+  --color-prettylights-syntax-markup-heading: #1f6feb;
+  --color-prettylights-syntax-markup-italic: #c9d1d9;
+  --color-prettylights-syntax-markup-bold: #c9d1d9;
+  --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
+  --color-prettylights-syntax-markup-deleted-bg: #67060c;
+  --color-prettylights-syntax-markup-inserted-text: #aff5b4;
+  --color-prettylights-syntax-markup-inserted-bg: #033a16;
+  --color-prettylights-syntax-markup-changed-text: #ffdfb6;
+  --color-prettylights-syntax-markup-changed-bg: #5a1e02;
+  --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
+  --color-prettylights-syntax-markup-ignored-bg: #1158c7;
+  --color-prettylights-syntax-meta-diff-range: #d2a8ff;
+  --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
+  --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
+  --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
+  --color-btn-text: rgb(235 235 245 / 86%);
+  --color-btn-bg: rgba(var(--bg-default), 1);
+  --color-btn-border: rgba(var(--bg-default), 1);
+  --color-btn-shadow: 0 1px 0 rgba(var(--bg-default), 1);
+  --color-btn-inset-shadow: inset 0 1px 0 rgba(var(--bg-default), 1);
+  --color-btn-hover-bg: rgba(var(--bg-default), 0.5);
+  --color-btn-hover-border: rgba(var(--bg-default), 0.5);
+  --color-btn-active-bg: rgba(var(--primary-default), 0.2);
+  --color-btn-active-border: rgba(var(--primary-default), 1);
+  --color-btn-selected-bg: rgba(var(--primary-default), 0.15);
+  --color-btn-primary-text: rgb(255 255 255 / 100%);
+  --color-btn-primary-bg: rgba(var(--primary-default), 0.45);
+  --color-btn-primary-border: rgba(var(--primary-default), 0.5);
+  --color-btn-primary-shadow: 0 1px 0 rgb(27 31 36 / 10%);
+  --color-btn-primary-inset-shadow: inset 0 1px 0 hsl(0deg 0% 100% / 3%);
+  --color-btn-primary-hover-bg: rgba(var(--primary-default), 0.53);
+  --color-btn-primary-hover-border: rgba(var(--primary-default), 0.75);
+  --color-btn-primary-selected-bg: rgba(var(--primary-default), 0.45);
+  --color-btn-primary-selected-shadow: inset 0 1px 0 rgb(0 45 17 / 20%);
+  --color-btn-primary-disabled-text: rgb(255 255 255 / 80%);
+  --color-btn-primary-disabled-bg: rgba(var(--primary-default), 0.5);
+  --color-btn-primary-disabled-border: rgba(var(--primary-default), 0.5);
+  --color-action-list-item-default-hover-bg: rgb(177 186 196 / 12%);
+  --color-segmented-control-bg: rgb(110 118 129 / 10%);
+  --color-segmented-control-button-bg: #0d1117;
+  --color-segmented-control-button-selected-border: rgba(var(--bg-default), 0.85);
+  --color-fg-default: rgb(235 235 245 / 86%);
+  --color-fg-muted: rgb(235 235 245 / 60%);
+  --color-fg-subtle: rgb(235 235 245 / 50%);
+  --color-canvas-default: rgb(30 30 32 / 100%);
+  --color-canvas-overlay: rgb(30 30 32 / 100%);
+  --color-canvas-inset: rgba(var(--bg-default), 0.85);
+  --color-canvas-subtle: rgba(var(--bg-default), 1);
+  --color-border-default: rgba(var(--bg-default), 0.85);
+  --color-border-muted: rgb(175 184 193 / 20%);
+  --color-neutral-muted: rgb(175 184 193 / 20%);
+  --color-accent-fg: rgba(var(--primary-default), 0.85);
+  --color-accent-emphasis: rgba(var(--primary-default), 0.95);
+  --color-accent-muted: rgba(var(--primary-default), 0.4);
+  --color-accent-subtle: rgba(var(--primary-default), 0.1);
+  --color-success-fg: #3fb950;
+  --color-attention-fg: #d29922;
+  --color-attention-muted: rgb(187 128 9 / 40%);
+  --color-attention-subtle: rgb(187 128 9 / 15%);
+  --color-danger-fg: #f85149;
+  --color-danger-muted: rgb(248 81 73 / 40%);
+  --color-danger-subtle: rgb(248 81 73 / 10%);
+  --color-primer-shadow-inset: 0 1px 0 rgba(var(--bg-default), 1), inset 0 1px 0 rgba(var(--bg-default), 1);
+  --color-scale-gray-7: rgb(22 22 24 / 100%);
+  --color-scale-blue-8: rgb(16 185 129 / 15%);
+
+  /*! Extensions from @primer/css/alerts/flash.scss */
+  --color-social-reaction-bg-hover: var(--color-scale-gray-7);
+  --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
+}
+
+main .pagination-loader-container {
+  background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg");
+}
+
+main .gsc-loading-image {
+  background-image: url("https://github.githubassets.com/images/mona-loading-dark.gif");
+}
+
+.gsc-comment-box-buttons a {
+  border-radius: 0.25rem !important;
+}
diff --git a/src/themes/serene/sass/giscus_light.scss b/src/themes/serene/sass/giscus_light.scss
new file mode 100644
index 0000000..9433d60
--- /dev/null
+++ b/src/themes/serene/sass/giscus_light.scss
@@ -0,0 +1,104 @@
+main {
+  --primary-default: 88, 113, 162;
+  --bg-default: 246, 246, 247;
+  --color-prettylights-syntax-comment: #6e7781;
+  --color-prettylights-syntax-constant: #0550ae;
+  --color-prettylights-syntax-entity: #8250df;
+  --color-prettylights-syntax-storage-modifier-import: #24292f;
+  --color-prettylights-syntax-entity-tag: #116329;
+  --color-prettylights-syntax-keyword: #cf222e;
+  --color-prettylights-syntax-string: #0a3069;
+  --color-prettylights-syntax-variable: #953800;
+  --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
+  --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
+  --color-prettylights-syntax-invalid-illegal-bg: #82071e;
+  --color-prettylights-syntax-carriage-return-text: #f6f8fa;
+  --color-prettylights-syntax-carriage-return-bg: #cf222e;
+  --color-prettylights-syntax-string-regexp: #116329;
+  --color-prettylights-syntax-markup-list: #3b2300;
+  --color-prettylights-syntax-markup-heading: #0550ae;
+  --color-prettylights-syntax-markup-italic: #24292f;
+  --color-prettylights-syntax-markup-bold: #24292f;
+  --color-prettylights-syntax-markup-deleted-text: #82071e;
+  --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
+  --color-prettylights-syntax-markup-inserted-text: #116329;
+  --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
+  --color-prettylights-syntax-markup-changed-text: #953800;
+  --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
+  --color-prettylights-syntax-markup-ignored-text: #eaeef2;
+  --color-prettylights-syntax-markup-ignored-bg: #0550ae;
+  --color-prettylights-syntax-meta-diff-range: #8250df;
+  --color-prettylights-syntax-brackethighlighter-angle: #57606a;
+  --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
+  --color-prettylights-syntax-constant-other-reference-link: #0a3069;
+  --color-btn-text: #24292f;
+  --color-btn-bg: rgba(var(--bg-default), 1);
+  --color-btn-border: rgba(var(--bg-default), 1);
+  --color-btn-shadow: 0 1px 0 rgba(var(--bg-default), 1);
+  --color-btn-inset-shadow: inset 0 1px 0 rgba(var(--bg-default), 1);
+  --color-btn-hover-bg: rgba(var(--bg-default), 0.5);
+  --color-btn-hover-border: rgba(var(--bg-default), 0.5);
+  --color-btn-active-bg: rgba(var(--primary-default), 0.2);
+  --color-btn-active-border: rgba(var(--primary-default), 1);
+  --color-btn-selected-bg: rgba(var(--primary-default), 0.15);
+  --color-btn-primary-text: rgb(255 255 255 / 100%);
+  --color-btn-primary-bg: rgba(var(--primary-default), 1);
+  --color-btn-primary-border: rgba(var(--primary-default), 1);
+  --color-btn-primary-shadow: 0 1px 0 rgb(31 35 40 / 10%);
+  --color-btn-primary-inset-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
+  --color-btn-primary-hover-bg: rgba(var(--primary-default), 0.9);
+  --color-btn-primary-hover-border: rgba(var(--primary-default), 0.75);
+  --color-btn-primary-selected-bg: rgba(var(--primary-default), 1);
+  --color-btn-primary-selected-shadow: inset 0 1px 0 rgb(0 45 17 / 20%);
+  --color-btn-primary-disabled-text: rgb(255 255 255 / 80%);
+  --color-btn-primary-disabled-bg: rgba(var(--primary-default), 0.5);
+  --color-btn-primary-disabled-border: rgba(var(--primary-default), 0.5);
+  --color-action-list-item-default-hover-bg: rgb(208 215 222 / 32%);
+  --color-segmented-control-bg: #eaeef2;
+  --color-segmented-control-button-bg: #fff;
+  --color-segmented-control-button-selected-border: rgba(var(--bg-default), 0.85);
+  --color-fg-default: rgb(60 60 67);
+  --color-fg-muted: rgb(60 60 67 / 75%);
+  --color-fg-subtle: rgb(60 60 67 / 33%);
+  --color-canvas-default: rgb(255 255 255);
+  --color-canvas-overlay: rgb(255 255 255);
+  --color-canvas-inset: rgba(var(--bg-default), 0.85);
+  --color-canvas-subtle: rgba(var(--bg-default), 1);
+  --color-border-default: rgba(var(--bg-default), 0.85);
+  --color-border-muted: rgb(175 184 193 / 20%);
+  --color-neutral-muted: rgb(175 184 193 / 20%);
+  --color-accent-fg: rgba(var(--primary-default), 0.85);
+  --color-accent-emphasis: rgba(var(--primary-default), 0.95);
+  --color-accent-muted: rgba(var(--primary-default), 0.4);
+  --color-accent-subtle: rgba(var(--primary-default), 0.1);
+  --color-success-fg: #1a7f37;
+  --color-attention-fg: #9a6700;
+  --color-attention-muted: rgb(212 167 44 / 40%);
+  --color-attention-subtle: #fff8c5;
+  --color-danger-fg: #d1242f;
+  --color-danger-muted: rgb(255 129 130 / 40%);
+  --color-danger-subtle: #ffebe9;
+  --color-primer-shadow-inset: 0 1px 0 rgba(var(--bg-default), 1), inset 0 1px 0 rgba(var(--bg-default), 1);
+  --color-scale-gray-1: rgb(234 238 242 / 100%);
+  --color-scale-blue-1: rgb(16 185 129 / 15%);
+
+  /*! Extensions from @primer/css/alerts/flash.scss */
+  --color-social-reaction-bg-hover: var(--color-scale-gray-1);
+  --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-1);
+}
+
+main .pagination-loader-container {
+  background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line.svg");
+}
+
+main .gsc-loading-image {
+  background-image: url("https://github.githubassets.com/images/mona-loading-default.gif");
+}
+
+.gsc-comment:not(.gsc-reply-box) .gsc-replies {
+  border-radius: unset;
+}
+
+.gsc-comment-box-buttons a {
+  border-radius: 0.25rem !important;
+}
diff --git a/src/themes/serene/sass/main.scss b/src/themes/serene/sass/main.scss
new file mode 100644
index 0000000..f5628a2
--- /dev/null
+++ b/src/themes/serene/sass/main.scss
@@ -0,0 +1,1839 @@
+/* base
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--main-font);
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  overflow-y: scroll;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+button:focus-visible,
+a:focus-visible {
+  outline: var(--primary-color) solid 3px;
+}
+
+::selection {
+  background-color: var(--primary-color);
+  color: var(--bg-color);
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: transparent;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--text-decoration-color);
+  background-clip: padding-box;
+  border-radius: 4px;
+  border: 2px solid transparent;
+}
+@supports not selector(::-webkit-scrollbar) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--text-decoration-color) transparent;
+  }
+  body {
+    overflow-y: auto;
+  }
+}
+
+/* prose
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+.prose {
+  h1 {
+    font-size: 1.15em;
+    font-weight: bolder;
+    margin: 1.5em 0 0.75em;
+  }
+
+  h2 {
+    font-size: 1.1em;
+    margin: 3em 0 1.5em;
+  }
+
+  h3, h4, h5, h6 {
+    font-size: 1em;
+    margin: 2.5em 0 1.5em;
+  }
+
+  .zola-anchor {
+    visibility: hidden;
+    margin-left: 0.75em;
+    border: none;
+
+    &::after {
+      content: '#';
+    }
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    width: fit-content;
+    &:hover a.zola-anchor {
+      visibility: visible !important;
+    }
+  }
+
+  p {
+    font-size: 1em;
+    line-height: inherit;
+    word-wrap: break-word;
+    margin: 1.5em 0;
+  }
+
+  a {
+    border-bottom: 1.5px solid var(--primary-color);
+    color: var(--primary-color);
+    text-decoration: none;
+    overflow-wrap: anywhere;
+
+    @media (hover: hover) {
+      &:hover {
+        opacity: 0.9;
+      }
+    }
+  }
+
+  img {
+    max-width: 100%;
+    display: block;
+    margin: 0 auto;
+    border-radius: var(--img-border-radius);
+  }
+
+  figure {
+    margin: 0 auto;
+  }
+
+  figcaption {
+    width: 100%;
+    text-align: center;
+    margin: 1em auto 2em;
+    color: var(--text-pale-color);
+    font-size: 0.9em;
+  }
+
+  blockquote {
+    border-left: 1.5px var(--text-decoration-color) solid;
+    padding-left: 16px;
+    margin: 1em 0;
+    color: var(--text-pale-color);
+
+    p {
+      margin: 1em 0;
+    }
+  }
+
+  ol,
+  ul {
+    padding-left: 1.5em;
+  }
+
+  li {
+    margin: 1em 0;
+    p {
+      margin: 1em 0;
+    }
+  }
+
+  li::marker {
+    color: var(--primary-color);
+  }
+
+  hr {
+    border: none;
+    background-color: var(--text-decoration-color);
+    opacity: 0.25;
+    height: 2px;
+    margin: 3em 0;
+  }
+
+  table {
+    width: 100%;
+    border-spacing: 0;
+    border-collapse: collapse;
+    margin: 1.5em 0;
+  }
+
+  th,
+  td {
+    line-height: 2;
+    text-align: center;
+    border: 1px solid var(--primary-color);
+    padding: 1px 10px;
+  }
+
+  :not(pre) > code {
+    font-family: var(--code-font);
+    font-size: 0.85em;
+    padding: 1px 6px;
+    color: var(--primary-color);
+    background-color: var(--inline-code-bg-color);
+    border-radius: var(--inline-code-border-radius);
+    word-wrap: break-word;
+  }
+
+  pre {
+    font-size: 0.8em;
+    margin: 1.25em 0;
+    padding: 12px 48px 12px 16px;
+    line-height: 1.5;
+    border: 1.5px solid var(--primary-color);
+    border-color: var(--block-code-border-color);
+    border-radius: var(--block-code-border-radius);
+    overflow: auto;
+
+    code {
+      font-family: var(--code-font);
+    }
+
+    &[data-linenos] {
+      padding-left: 0px;
+    }
+
+    table {
+      width: 100%;
+      margin: 0;
+      border-collapse: collapse;
+      border: none;
+      th, td {
+        line-height: 1.5;
+      }
+    }
+
+
+    table tr td:first-of-type {
+      color: var(--text-decoration-color);
+    }
+
+    table td {
+      padding: 0;
+      padding-right: 48px;
+      text-align: initial;
+      border: initial;
+    }
+
+    table td:nth-of-type(1) {
+      text-align: right;
+      user-select: none;
+      padding-right: 1em;
+      mark::before {
+        left: -8px;
+        width: calc(100% + 1em + 8px);
+      }
+    }
+
+    mark {
+      display: block;
+      color: inherit;
+      background-color: transparent;
+      position: relative;
+      overflow: visible;
+
+      &::before {
+        pointer-events: none;
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: calc(100% + 48px + 48px);
+        background-color: var(--highlight-mark-color);
+      }
+    }
+
+    &.mermaid {
+      padding-right: 16px;
+      border: none;
+      svg {
+        display: block;
+        margin: 0 auto;
+      }
+    }
+  }
+
+  pre > code > mark::before {
+    width: calc(100% + 48px + 16px);
+    left: -16px;
+  }
+
+  .codeblock {
+    margin: 1.5em 0;
+    position: relative;
+    overflow: auto;
+
+    pre {
+      margin: 0;
+    }
+    pre[data-name] {
+      padding-top: calc(36px + 1em * var(--line-height));
+      &::before {
+        content: attr(data-name);
+        display: block;
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        padding: 12px 16px;
+        color: var(--text-pale-color);
+        width: 100%;
+        border-bottom: 1px solid var(--primary-pale-color);
+      }
+    }
+
+    .copy {
+      display: none;
+      z-index: 9;
+      position: absolute;
+      right: 0.6em;
+      top: 0.75em;
+      width: 24px;
+      height: 24px;
+      padding: 2px;
+      cursor: pointer;
+      background: transparent;
+      border: none;
+      color: var(--text-pale-color);
+
+      &.copied, &:hover {
+        display: block;
+        color: var(--primary-color);
+      }
+    }
+
+    @media (hover: hover) {
+      &:hover .copy {
+        display: block;
+      }
+    }
+  }
+
+  .footnote-definition {
+    position: relative;
+    padding-left: 1.5em;
+    font-size: 0.9em;
+    margin: 3em 0 1em;
+    + .footnote-definition {
+      margin: 1em 0;
+    }
+
+    .footnote-definition-label {
+      position: absolute;
+      top: 0;
+      left: 0;
+      font-size: 1em;
+      line-height: inherit;
+      vertical-align: auto;
+      &::after {
+        content: ".";
+      }
+    }
+
+    p {
+      margin: 1em 0;
+    }
+
+    button.backlink {
+      border: none;
+      background: none;
+      color: var(--primary-color);
+      line-height: inherit;
+      &:hover {
+        cursor: pointer;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .callout {
+    margin: 1.5em 0;
+
+    .icon {
+      height: 1.75em;
+      display: flex;
+      align-items: center;
+    }
+
+    p {
+      margin: 0;
+      + p {
+        margin: 1em 0;
+      }
+    }
+
+    &.has-title {
+      padding-left: 1em;
+      .title {
+        display: flex;
+        align-items: center;
+        gap: 0.5em;
+        margin-bottom: 0.5em;
+      }
+    }
+
+    &.no-title {
+      padding-left: 0;
+      border: none;
+      display: flex;
+      align-items: start;
+      gap: 0.75em;
+      .content {
+        max-width: calc(100% - 30px);
+      }
+    }
+
+    &.note {
+      color: var(--callout-note-color);
+      border-color: var(--callout-note-color);
+    }
+
+    &.tip {
+      color: var(--callout-tip-color);
+      border-color: var(--callout-tip-color);
+    }
+
+    &.important {
+      color: var(--callout-important-color);
+      border-color: var(--callout-important-color);
+    }
+
+    &.warning {
+      color: var(--callout-warning-color);
+      border-color: var(--callout-warning-color);
+    }
+
+    &.caution {
+      color: var(--callout-caution-color);
+      border-color: var(--callout-caution-color);
+    }
+  }
+
+  .quote {
+    border: none;
+    position: relative;
+    margin: 2em 0;
+    padding: 1.5em 0 0 1.25em;
+    color: var(--text-pale-color);
+
+    .icon {
+      color: var(--text-decoration-color);
+      display: block !important;
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+
+    .content > p:first-of-type {
+      margin-top: 0;
+    }
+    .content > p:last-of-type {
+      margin-bottom: 0;
+    }
+
+    .from {
+      display: flex;
+      justify-content: end;
+      align-items: center;
+      gap: 0.5em;
+      p {
+        margin: 0;
+      }
+    }
+  }
+
+  details {
+    border: 1.5px solid var(--detail-border-color);
+    border-radius: var(--detail-border-radius);
+    margin: 1em 0;
+    padding: 0.5em 1em;
+    -webkit-tap-highlight-color: transparent;
+
+    summary span {
+      margin-left: 0.25em;
+    }
+  }
+
+  .mermaid {
+    background: #fff;
+  }
+}
+
+body.dark .prose {
+  img {
+    filter: brightness(var(--dark-mode-img-brightness));
+  }
+  .mermaid {
+    filter: brightness(var(--dark-mode-chart-brightness));
+  }
+}
+
+/* prose pages
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+body.prose-page {
+  main {
+    min-height: 100vh;
+    min-height: 100dvh;
+    margin: 0 auto;
+    max-width: var(--main-max-width);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  article {
+    padding: 0 15px;
+  }
+
+  .giscus {
+    padding: 0 15px;
+  }
+}
+
+/* collections
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+.prose {
+  .collection-wrapper {
+    margin: 1.5em 0;
+  }
+
+  .collection {
+    border: none;
+    margin: 0;
+    padding: 0;
+    color: var(--text-color);
+    img {
+      margin: 0;
+    }
+    a, button {
+      -webkit-tap-highlight-color: transparent;
+    }
+  }
+
+  .collection.card {
+    margin: 3em 0;
+    position: relative;
+
+    &.featured::before {
+      content: '*';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      transform: translateX(-200%);
+      line-height: 2;
+      color: var(--primary-color);
+    }
+    @media (max-width: 768px) {
+      &.featured::before {
+        transform: translateX(-150%);
+      }
+    }
+
+    .meta {
+      display: flex;
+      gap: 0.5em;
+      .icon-wrapper {
+        height: calc(1em * var(--line-height));
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+      }
+      .icon {
+        height: 16px;
+        width: 16px;
+      }
+      .title {
+        color: var(--primary-color);
+      }
+      a.title {
+        text-decoration: none;
+        border-bottom: 1.5px solid transparent;
+        &:hover {
+          opacity: unset;
+          border-color: var(--primary-color);
+        }
+      }
+      .date {
+        margin-left: auto;
+        flex-shrink: 0;
+        font-size: 0.9em;
+        color: var(--text-pale-color);
+      }
+    }
+
+    .subtitle {
+      font-size: 0.9em;
+      color: var(--text-pale-color);
+      margin: 0.75em 0;
+    }
+
+    .content {
+      font-size: 1em;
+      p {
+        margin: 0.75em 0;
+      }
+    }
+
+    .tags {
+      font-size: 0.9em;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 0.75em 1em;
+      color: var(--text-pale-color);
+
+      div {
+        span {
+          font-size: 0.9em;
+          margin-right: 4px;
+        }
+      }
+    }
+  }
+
+  .collection.card-simple {
+    margin: 0.5em 0;
+    position: relative;
+
+    &.featured::before {
+      content: '*';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      transform: translateX(-200%);
+      line-height: 2;
+      color: var(--primary-color);
+    }
+    @media (max-width: 768px) {
+      &.featured::before {
+        transform: translateX(-150%);
+      }
+    }
+
+    .meta {
+      display: flex;
+      align-items: start;
+      gap: 0.5em;
+    }
+
+    .icon-wrapper {
+      height: calc(1em * var(--line-height));
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+    .icon {
+      height: 16px;
+      width: 16px;
+    }
+    .title {
+      flex-shrink: 0;
+      max-width: 100%;
+      color: var(--primary-color);
+      margin-right: 0.5em;
+    }
+    a.title {
+      text-decoration: none;
+      border-bottom: 1.5px solid transparent;
+      &:hover {
+        opacity: unset;
+        border-color: var(--primary-color);
+      }
+    }
+    .content,
+    .content-narrow {
+      p {
+        margin: 0;
+        + p {
+          margin-top: 0.5em;
+        }
+      }
+    }
+    .content-narrow {
+      display: none;
+      margin: 0.25em 0 2em;
+    }
+    @media (max-width: 425px) {
+      .content {
+        display: none;
+      }
+      .content-narrow {
+        display: block;
+      }
+    }
+    .date {
+      margin-left: auto;
+      flex-shrink: 0;
+      font-size: 0.9em;
+      line-height: calc(var(--line-height) * 1.111);
+      color: var(--text-pale-color);
+    }
+
+  }
+
+  .collection.entry {
+    display: inline-flex;
+    width: fit-content;
+    gap: 0.5em;
+    padding: 4px 0;
+    margin: 0.25em 1.5em 0.25em 0;
+
+    .icon-wrapper {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      height: calc(1em * var(--line-height));
+    }
+    .icon {
+      width: 16px;
+      height: 16px;
+    }
+
+    .text div {
+      display: inline;
+    }
+    .title:has(+.subtitle) {
+      margin-right: 0.5em;
+    }
+    .subtitle {
+      font-size: 0.9em;
+      color: var(--text-pale-color);
+    }
+  }
+  a.collection.entry {
+    -webkit-tap-highlight-color: transparent;
+    color: var(--text-color);
+    border-bottom: 1.5px solid transparent;
+    &:hover {
+      border-color: var(--primary-color);
+      opacity: unset;
+      cursor: pointer;
+    }
+  }
+
+  .collection.box {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: 1px solid var(--primary-color);
+    overflow: hidden;
+
+    img {
+      width: 48px;
+      height: 48px;
+      &.rotate {
+        transition: transform 0.15s;
+        transform: rotate(-20deg) translate(-2px, 12px);
+      }
+    }
+    .placehold {
+      height: 48px;
+    }
+
+    .text {
+      min-height: 48px;
+      line-height: 1.5;
+      padding: 0 1em;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      overflow: hidden;
+
+      .title {
+        font-size: 0.9em;
+        color: var(--text-color);
+      }
+
+      .subtitle {
+        font-size: 0.8em;
+        color: var(--text-pale-color);
+        overflow: hidden;
+        text-wrap: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+
+    @media (hover: hover) {
+      &:hover {
+        opacity: unset;
+        img.rotate {
+          transform: rotate(0deg) translate(0px, 0px);
+        }
+      }
+    }
+  }
+  a.collection.box {
+    -webkit-tap-highlight-color: transparent;
+  }
+  .collection-box-wrapper {
+    max-width: 100%;
+    width: fit-content;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    border: 0.5px solid transparent;
+    overflow: hidden;
+    margin-right: 0.5em;
+    margin-bottom: 0.8em;
+    @media (hover: hover) {
+      &:has(a):hover {
+        border-color: var(--primary-color);
+      }
+    }
+    @media (max-width: 425px) {
+      & {
+        display: flex;
+        width: 100%;
+      }
+    }
+  }
+
+  .collection.art {
+    --art-h: 160px;
+    --art-w: 115px;
+
+    margin: 2em 0;
+    display: flex;
+    gap: 1.5em;
+
+    .img-wrapper {
+      flex-shrink: 0;
+      width: var(--art-w);
+      height: var(--art-h);
+      img {
+        height: 100%;
+        width: 100%;
+        object-fit: contain;
+      }
+    }
+    .text {
+      height: var(--art-h);
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+    }
+    .title {
+      color: var(--primary-color);
+    }
+    a.title {
+      width: fit-content;
+      border-color: transparent;
+      &:hover {
+        opacity: unset;
+        border-color: var(--primary-color);
+      }
+    }
+    .subtitle,
+    .footer {
+      font-size: 0.8em;
+      color: var(--text-pale-color);
+    }
+    .content {
+      font-size: 0.9em;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+    }
+    .footer {
+      margin-top: auto;
+    }
+
+    @media (max-width: 425px) {
+      & {
+        --art-h: 120px;
+        --art-w: 85px;
+        gap: 0.75em;
+        .text {
+          gap: 2px;
+        }
+        .subtitle,
+        .footer {
+          font-size: 0.7em;
+        }
+        .content {
+          font-size: 0.8em;
+          -webkit-line-clamp: 2;
+        }
+      }
+    }
+
+  }
+
+
+  .collection.art-simple {
+      --art-h: 160px;
+      --art-w: 115px;
+
+      max-width: calc(50vw - 30px);
+      margin: 1.5em 0.75em;
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1em;
+
+      .img-wrapper {
+        flex-shrink: 0;
+        width: var(--art-w);
+        height: var(--art-h);
+        img {
+          height: 100%;
+          width: 100%;
+          object-fit: contain;
+        }
+      }
+      .text {
+        max-width: calc(var(--art-w) * 1.5);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 3px;
+      }
+      .title {
+        font-size: 0.9em;
+        color: var(--primary-color);
+      }
+      a.title {
+        width: fit-content;
+        border-color: transparent;
+        &:hover {
+          opacity: unset;
+          border-color: var(--primary-color);
+        }
+      }
+      .subtitle {
+        font-size: 0.8em;
+        color: var(--text-pale-color);
+      }
+
+      @media (max-width: 425px) {
+        & {
+          --art-h: 120px;
+          --art-w: 85px;
+          width: calc(50vw - 50px);
+        }
+      }
+
+    }
+}
+
+/* layout post list ( home / blog / tag )
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+.layout-list {
+  .category {
+    font-size: 0.9em;
+    margin: 1em 15px;
+    font-weight: 400;
+  }
+
+  .post-list {
+    padding: 0 15px;
+
+    &.categorized {
+      margin: 1em 0 3em 0;
+    }
+  }
+
+  .post {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    gap: 0.5em;
+    padding: 4px 0px;
+    margin: 6px 0;
+    line-height: 1.2;
+    text-decoration: none;
+    color: var(--primary-color);
+
+    border-bottom: 1.5px solid transparent;
+    @media (hover: hover) {
+      &:hover {
+        border-bottom-color: var(--primary-color);
+      }
+    }
+
+    .date {
+      white-space: nowrap;
+    }
+
+    position: relative;
+    &.featured::before {
+      content: '*';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      transform: translateX(-200%);
+      line-height: 2;
+      height: 100%;
+    }
+    @media (max-width: 768px) {
+      &.featured::before {
+        transform: translateX(-150%);
+      }
+    }
+  }
+
+  .read-more {
+    display: flex;
+    justify-content: end;
+    margin: 1.5em 15px 0px;
+
+    a {
+      color: var(--primary-color);
+      text-decoration: none;
+      border-bottom: 1.5px solid var(--primary-color);
+    }
+  }
+}
+
+/* theme toggle
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+#theme-toggle {
+  .sun-icon {
+    display: none;
+  }
+}
+
+body.dark #theme-toggle {
+  .sun-icon {
+    display: initial;
+  }
+  .moon-icon {
+    display: none;
+  }
+}
+
+/* homepage
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+body.homepage {
+  #wrapper {
+    min-height: 100vh;
+    min-height: 100dvh;
+    max-width: var(--homepage-max-width);
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  main {
+    width: 100%;
+    min-height: 75vh;
+    min-height: 75dvh;
+    padding: 4em 0;
+    @media (max-width: 425px) {
+      & {
+        padding: 2em 0;
+      }
+    }
+  }
+
+  #info {
+    padding: 0 15px;
+    display: flex;
+    align-items: center;
+    gap: 1em;
+
+    img {
+      height: var(--avatar-size);
+      width: var(--avatar-size);
+      border-radius: 50%;
+    }
+
+    #text {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      line-height: 1.5;
+      gap: 1em;
+    }
+
+    #id {
+      margin-left: 0.75em;
+      color: var(--primary-color);
+    }
+
+    #bio {
+      color: var(--text-pale-color);
+    }
+  }
+
+  #links {
+    padding: 0 15px;
+    margin: 2em 0 2.5em;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1em;
+
+    a,
+    button {
+      -webkit-tap-highlight-color: transparent;
+      text-decoration: none;
+      line-height: 0;
+      color: var(--text-color);
+
+      &:hover {
+        color: var(--primary-color);
+      }
+    }
+
+    #left {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1em;
+
+      a {
+        border-bottom: 1.5px solid var(--primary-color);
+        line-height: 1.5;
+      }
+    }
+
+    #right {
+      display: flex;
+      gap: 0.7em;
+
+      button {
+        padding: 0;
+        border: none;
+        background-color: transparent;
+        cursor: pointer;
+      }
+    }
+
+    @media (max-width: 425px) {
+      #left {
+        gap: 0.75em;
+      }
+      #right {
+        gap: 0.5em;
+      }
+    }
+  }
+
+  #brief {
+    padding: 0 15px;
+  }
+}
+
+/* header
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+header {
+  font-size: 0.8em;
+  padding: 0 15px;
+  a {
+    -webkit-tap-highlight-color: transparent;
+    display: inline-block;
+    margin-top: 1em;
+    padding: 1em 1em 1em 0;
+    color: var(--text-pale-color);
+    text-decoration: none;
+    &:hover {
+      color: var(--primary-color);
+    }
+  }
+}
+
+.section-title {
+  padding: 0 15px;
+  h1 {
+    font-size: 1.15em;
+    margin: 1.5em 0 0.75em;
+  }
+  p {
+    margin: 0;
+    margin-bottom: 1em;
+    font-size: 0.9em;
+    color: var(--text-pale-color);
+  }
+}
+
+/* rss mask
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+dialog#rss-mask {
+  margin: 0 auto;
+  padding: 0px;
+  border: none;
+  overflow: visible;
+  background: transparent;
+
+  &::backdrop {
+    background-color: initial;
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+  }
+
+  div {
+    pointer-events: none;
+    height: 100vh;
+    height: 100dvh;
+    padding: 2em 0;
+    width: fit-content;
+    display: flex;
+    justify-content: center;
+    align-items: end;
+    flex-wrap: wrap;
+    gap: 1em;
+    font-size: 0.9em;
+  }
+
+  a {
+    pointer-events: auto;
+    border-bottom: 1.5px solid var(--primary-color);
+    color: var(--primary-color);
+    text-decoration: none;
+    line-height: 1.5;
+    line-break: anywhere;
+  }
+
+  button {
+    pointer-events: auto;
+    background: transparent;
+    border: none;
+    color: var(--text-pale-color);
+    padding: 0;
+    cursor: pointer;
+    &.copied, &:hover {
+      color: var(--primary-color);
+    }
+  }
+}
+
+/* footer
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+footer {
+  font-size: 0.8em;
+  line-height: 18px;
+  margin-top: auto;
+  padding: 15px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0 0.5em;
+  color: var(--text-pale-color);
+
+  .left {
+    margin: 15px 0;
+    margin-right: auto;
+    display: flex;
+    align-items: center;
+    span {
+      padding: 0 0.5em;
+    }
+    a {
+      color: var(--text-pale-color);
+      text-decoration: none;
+      text-underline-offset: 4px;
+      &:hover {
+        color: var(--text-pale-color);
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .right {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin: 11px 0;
+
+    #rss-btn,
+    #theme-toggle {
+      -webkit-tap-highlight-color: transparent;
+      border: none;
+      background-color: transparent;
+      text-decoration: none;
+      cursor: pointer;
+      color: var(--text-pale-color);
+      &:hover {
+        color: var(--primary-color);
+      }
+    }
+
+    #rss-btn {
+      padding: 4px 0;
+      font-size: 0.85em;
+      line-height: 18px;
+    }
+    #theme-toggle {
+      padding: 4px;
+      transform: translateX(6px);
+      svg {
+        scale: 0.7;
+      }
+      line-height: 0;
+    }
+  }
+}
+
+/* blog page
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+body.blog {
+  #wrapper {
+    margin: 0 auto;
+    max-width: var(--main-max-width);
+    min-height: 100vh;
+    min-height: 100dvh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  main {
+    margin: 1em 0;
+  }
+}
+
+/* post page
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+body.post {
+  #wrapper {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  #blank {
+    order: 1;
+    position: sticky;
+    width: calc((100% - var(--main-max-width)) / 2);
+  }
+
+  main {
+    order: 2;
+    width: 100%;
+    margin: 0 auto;
+    max-width: var(--main-max-width);
+    min-height: 100vh;
+    min-height: 100dvh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  article {
+    padding: 0 15px 2em;
+
+    #post-info {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      margin-bottom: 1.5em;
+      font-size: 0.9em;
+    }
+
+    #date {
+      color: var(--text-pale-color);
+      margin-bottom: 1em;
+
+      #publish,
+      #updated {
+        margin-right: 1em;
+      }
+    }
+
+    #tags {
+      margin-bottom: 1em;
+      display: flex;
+      gap: 1em;
+      flex-wrap: wrap;
+
+      a {
+        color: var(--primary-color);
+        text-decoration: none;
+        line-height: 1.25;
+        span {
+          font-size: 0.95em;
+          margin-right: 2px;
+        }
+
+        border-bottom: 1.5px solid transparent;
+        &:hover {
+          opacity: 1;
+          border-bottom-color: var(--primary-color);
+        }
+      }
+    }
+
+    #outdate_alert {
+      font-style: italic;
+      &.hidden {
+        display: none;
+      }
+    }
+  }
+
+  .mermaid {
+    background: #fff;
+  }
+
+  .giscus {
+    padding: 0 15px;
+  }
+
+  aside {
+    order: 3;
+    width: calc((100% - var(--main-max-width)) / 2);
+    position: sticky;
+    margin-top: 13em;
+    top: 0;
+    height: min-content;
+    font-size: 0.9em;
+
+    nav {
+      padding: 10px 1em 10px 2em;
+      min-width: 60%;
+      overflow-y: auto;
+      max-height: calc(100vh - 6em);
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+    }
+
+    ul {
+      list-style-type: none;
+      padding: 0;
+      line-height: 2;
+      margin: 0;
+    }
+
+    a {
+      text-decoration: none;
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: var(--text-pale-color);
+      position: relative;
+      padding: 0 1em;
+
+      &.h3 {
+        padding-left: 2em;
+      }
+
+      &::before {
+        display: block;
+        content: "";
+        width: 1.5px;
+        position: absolute;
+        top: 0.7em;
+        bottom: 0.7em;
+        left: 0em;
+        background: transparent;
+      }
+
+      &:hover {
+        color: var(--primary-color);
+      }
+
+      &:hover::before {
+        background-color: var(--primary-color);
+      }
+    }
+
+    #back-to-top {
+      line-height: 0;
+      z-index: 99;
+      position: fixed;
+      bottom: 15px;
+      margin-left: 1.5em;
+      color: var(--text-pale-color);
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      padding: 15px;
+      transform: translateY(-5px) scale(0);
+      transition: transform 0.15s;
+
+      svg {
+        scale: 0.8;
+      }
+
+      &.shown {
+        transform: translateY(0px) scale(1);
+      }
+
+      &:hover {
+        color: var(--primary-color);
+      }
+    }
+  }
+
+  @media (max-width: 1024px) {
+    aside, #blank {
+      display: none;
+    }
+  }
+}
+
+/* tag list page
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+body.tag-list {
+  #wrapper {
+    margin: 0 auto;
+    max-width: var(--main-max-width);
+    min-height: 100vh;
+    min-height: 100dvh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  main {
+    margin: 0 15px;
+  }
+
+  .title {
+    font-size: 1.15em;
+    margin: 1.5em 0 0.75em;
+  }
+
+  .tags {
+    margin: 2em 0;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1em 2em;
+
+    a {
+      color: var(--primary-color);
+      text-decoration: none;
+      line-height: 1.25;
+
+      border-bottom: 1.5px solid transparent;
+      &:hover {
+        border-bottom-color: var(--primary-color);
+      }
+    }
+  }
+
+}
+
+/* tag single page
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+body.tag-single {
+  #wrapper {
+    margin: 0 auto;
+    max-width: var(--main-max-width);
+    min-height: 100vh;
+    min-height: 100dvh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  main {
+    width: 100%;
+    margin: 1em 0;
+  }
+
+  .title {
+    font-size: 1.1em;
+    margin: 0.5em 15px 2em;
+  }
+}
+
+/* 404 page
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+body.not-found {
+  height: 100vh;
+  height: 100dvh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2em;
+    margin-bottom: 6em;
+  }
+
+  .error {
+    margin: 0;
+    color: var(--text-pale-color);
+  }
+
+  a {
+    color: var(--primary-color);
+    text-decoration: none;
+    border-bottom: 1.5px solid transparent;
+    &:hover {
+      border-color: var(--primary-color);
+    }
+  }
+}
+
+/* reaction
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+.reaction {
+  font-size: 0.8em;
+  padding: 15px 15px 30px;
+  min-height: 75px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+
+  &.left {
+    justify-content: start;
+  }
+
+  &.right {
+    justify-content: end;
+  }
+
+  &.center {
+    justify-content: center;
+  }
+
+  &.error {
+    button {
+      color: var(--callout-caution-color) !important;
+    }
+  }
+
+  button {
+    line-height: 1;
+    padding: 0.5em;
+    color: var(--text-pale-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: none;
+    gap: 4px;
+    background: transparent;
+    user-select: none;
+    cursor: pointer;
+
+    span {
+      min-width: 16px;
+    }
+
+    &:hover {
+      color: var(--primary-color);
+    }
+
+    &.reacted {
+      color: var(--primary-color);
+    }
+  }
+}
+
+
+/* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+html {
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+main {
+  display: block;
+}
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+pre {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+a {
+  background-color: transparent;
+}
+
+abbr[title] {
+  border-bottom: none;
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+img {
+  border-style: none;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+  appearance: button;
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+legend {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+textarea {
+  overflow: auto;
+}
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  appearance: textfield;
+  outline-offset: -2px;
+}
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+details {
+  display: block;
+}
+
+summary {
+  display: list-item;
+}
+
+template {
+  display: none;
+}
+
+[hidden] {
+  display: none;
+}