:root {
  --color-primary: #d946ef;
  --color-primary-hover: #a21caf;
  --color-border: #d946ef;
  --color-border-dark: #50fa7b;
  --post-cjk-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --post-cjk-heading-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --post-mono-font: "Roboto Mono", "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  --syntax-bg: #ffffff;
  --syntax-fg: #24292f;
  --syntax-comment: #6e7781;
  --syntax-keyword: #cf222e;
  --syntax-constant: #0550ae;
  --syntax-string: #0a3069;
  --syntax-function: #8250df;
  --syntax-variable: #953800;
  --syntax-operator: #cf222e;
  --syntax-error: #82071e;
}

html[data-theme="dark"] {
  --syntax-bg: var(--color-background-pre-dark, #272822);
  --syntax-fg: #f8f8f2;
  --syntax-comment: #9da5b4;
  --syntax-keyword: #ff79c6;
  --syntax-constant: #bd93f9;
  --syntax-string: #f1fa8c;
  --syntax-function: #8be9fd;
  --syntax-variable: #ffb86c;
  --syntax-operator: #ff79c6;
  --syntax-error: #ff5555;
}

.highlight,
.highlight pre,
.highlight code,
.chroma {
  background-color: var(--syntax-bg);
  color: var(--syntax-fg);
}

.highlight {
  position: relative;
  overflow: hidden;
}

.highlight pre {
  overflow-x: auto;
  padding-block-start: 2rem;
}

.highlight pre code[class*="language-"]::before {
  z-index: 2;
  display: inline-block;
  min-inline-size: max-content;
  pointer-events: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.chroma .c,
.chroma .ch,
.chroma .cm,
.chroma .c1,
.chroma .cs,
.chroma .cp,
.chroma .cpf {
  color: var(--syntax-comment);
}

.chroma .k,
.chroma .kc,
.chroma .kd,
.chroma .kn,
.chroma .kp,
.chroma .kr,
.chroma .kt,
.chroma .nt {
  color: var(--syntax-keyword);
}

.chroma .m,
.chroma .mb,
.chroma .mf,
.chroma .mh,
.chroma .mi,
.chroma .il,
.chroma .mo,
.chroma .no,
.chroma .bp {
  color: var(--syntax-constant);
}

.chroma .s,
.chroma .sa,
.chroma .sb,
.chroma .sc,
.chroma .dl,
.chroma .sd,
.chroma .s2,
.chroma .se,
.chroma .sh,
.chroma .si,
.chroma .sx,
.chroma .sr,
.chroma .s1,
.chroma .ss {
  color: var(--syntax-string);
}

.chroma .na,
.chroma .nb,
.chroma .nc,
.chroma .nf,
.chroma .fm,
.chroma .nx {
  color: var(--syntax-function);
}

.chroma .nv,
.chroma .vc,
.chroma .vg,
.chroma .vi,
.chroma .vm {
  color: var(--syntax-variable);
}

.chroma .o,
.chroma .ow {
  color: var(--syntax-operator);
}

.chroma .gd,
.chroma .gr,
.chroma .gt,
.chroma .err {
  color: var(--syntax-error);
}

.chroma .gi {
  color: #116329;
}

.highlight pre code[class*="language-nginx"]::before {
  content: "nginx";
  background: #009639;
  color: #ffffff;
}

.highlight[data-code-label]::before {
  z-index: 2;
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 1rem;
  display: inline-block;
  min-inline-size: max-content;
  padding: 0.1rem 0.5rem;
  border-radius: 0 0 0.25rem 0.25rem;
  background: #000000;
  color: #ffffff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
  content: attr(data-code-label);
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.025rem;
  line-height: 1.4;
  pointer-events: none;
  text-align: right;
  text-transform: uppercase;
}

.highlight[data-code-label] pre code[class*="language-"]::before {
  content: none;
  display: none;
}

.highlight[data-code-lang="js"]::before {
  background: #f7df1e;
  color: #000000;
}

.highlight[data-code-lang="ts"]::before {
  background: #3178c6;
  color: #ffffff;
}

.highlight[data-code-lang="python"]::before {
  background: #3776ab;
  color: #ffffff;
}

.highlight[data-code-lang="go"]::before {
  background: #00add8;
  color: #ffffff;
}

.highlight[data-code-lang="css"]::before {
  background: #1572b6;
  color: #ffffff;
}

.highlight[data-code-lang="html"]::before {
  background: #e34f26;
  color: #ffffff;
}

.highlight[data-code-lang="json"]::before {
  background: #000000;
  color: #ffffff;
}

.highlight[data-code-lang="yaml"]::before {
  background: #cc1018;
  color: #ffffff;
}

.highlight[data-code-lang="shell"]::before {
  background: #4eaa25;
  color: #ffffff;
}

.highlight[data-code-lang="markdown"]::before {
  background: #083fa1;
  color: #ffffff;
}

.highlight[data-code-lang="nginx"]::before {
  background: #009639;
  color: #ffffff;
}

h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before,
ul > li::before,
figure h4::before,
.search-status-error,
.search-results > li::before,
.search-tag-list > li::before {
  color: var(--color-primary);
}

html[data-theme="dark"] h1::before,
html[data-theme="dark"] h2::before,
html[data-theme="dark"] h3::before,
html[data-theme="dark"] h4::before,
html[data-theme="dark"] h5::before,
html[data-theme="dark"] h6::before,
html[data-theme="dark"] ul > li::before,
html[data-theme="dark"] figure h4::before,
html[data-theme="dark"] .search-status-error,
html[data-theme="dark"] .search-results > li::before,
html[data-theme="dark"] .search-tag-list > li::before {
  color: var(--color-primary-dark);
}

article .title h1 {
  font-family: var(--post-cjk-heading-font);
  font-weight: 650;
  line-height: 1.45;
}

main.list .list-item .title {
  line-height: 1.55;
  margin-block-end: 0.75rem;
}

main.list .list-item .title a {
  border-bottom: 0;
  border-block-end: 0;
  display: inline;
  padding-block: 0;
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.28em;
  text-decoration-skip-ink: none;
}

html[data-theme="dark"] main.list .list-item .title a {
  text-decoration-color: var(--color-primary-dark);
}

article .meta {
  font-family: var(--post-mono-font);
  letter-spacing: 0;
}

article .body {
  font-family: var(--post-cjk-font);
  font-kerning: normal;
  font-synthesis-weight: none;
  line-height: 1.82;
  line-break: loose;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  word-break: normal;
}

article .body p,
article .body li,
article .body blockquote {
  font-family: inherit;
}

article .body p {
  margin-block: 0.85em;
  text-align: justify;
  text-align-last: start;
  text-justify: inter-character;
}

article .body h1,
article .body h2,
article .body h3,
article .body h4,
article .body h5,
article .body h6 {
  font-family: var(--post-cjk-font);
  font-weight: 650;
  line-height: 1.5;
  margin-block-start: 2em;
  margin-block-end: 0.65em;
}

article .body strong,
article .body b {
  font-weight: 650;
}

article .body em,
article .body i {
  font-style: italic;
}

article .body h2 {
  font-size: 1.22rem;
}

article .body h3 {
  font-size: 1.08rem;
}

article .body ul {
  padding-inline-start: 0;
  margin-block: 0.9em;
}

article .body ul li {
  position: relative;
  padding-inline-start: 1.35rem;
  text-indent: 0;
}

article .body ul > li::before {
  content: "*";
  position: absolute;
  inset-inline-start: 0;
}

article .body li {
  line-height: 1.78;
  margin-block: 0.45em;
}

article .body ol {
  padding-inline-start: 1.6rem;
  margin-block: 0.9em;
}

article .body blockquote {
  line-height: 1.8;
  margin-block: 1.1em;
}

article .body pre,
article .body code {
  font-family: var(--post-mono-font);
}

article .body pre {
  line-height: 1.5;
  margin-block: 1.15rem;
}

article .body img {
  display: block;
  margin-block: 1.25rem;
}

.toc-mobile {
  display: none;
}

.toc {
  font-size: 1rem;
  line-height: 1.6;
}

.toc ul {
  padding-inline-start: 0;
}

.toc ul ul {
  padding-inline-start: 1rem;
}

.toc li {
  margin-block: 0.35rem;
  text-indent: 0;
}

.toc ul > li::before {
  content: none;
}

.toc a {
  overflow-wrap: anywhere;
}

@media screen and (min-width: 48em) {
  .post-container {
    flex-wrap: nowrap;
  }

  @supports (display: grid) {
    .post-container {
      grid-template-columns: minmax(0, 1fr) auto;
    }
  }

  .toc-desktop {
    grid-column: 2;
    margin-bottom: 0;
    margin-block-end: 0;
    max-width: 18.75rem;
    max-inline-size: 18.75rem;
    order: initial;
    position: sticky;
    inset-block-start: 1.25rem;
    top: 1.25rem;
  }
}

@media screen and (max-width: 47.99em) {
  article .body {
    line-height: 1.8;
  }

  .toc {
    order: initial;
  }

  .toc-mobile {
    display: block;
    margin-block: 1.1rem 1.4rem;
    max-inline-size: none;
  }

  .toc-desktop {
    display: none;
  }
}

.protected-post {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-background-pre);
  padding: 1rem;
}

.protected-post strong {
  display: block;
  margin-block-end: 0.75rem;
}

.protected-post-message {
  margin-block-end: 0;
}

.protected-post-form {
  display: flex;
  gap: 0.75rem;
  margin-block: 0.75rem;
}

.protected-post-input,
.protected-post-button {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  font: inherit;
}

.protected-post-input {
  min-width: 0;
  flex: 1;
  background: var(--color-background);
  color: var(--color-text);
  padding: 0.55rem 0.7rem;
  caret-color: var(--color-primary);
}

.protected-post-input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.protected-post-button {
  background: var(--color-primary);
  color: #ffffff;
  cursor: pointer;
  padding: 0.55rem 0.85rem;
}

.protected-post-button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.posts {
  padding-inline-start: 2ch;
}

.posts .post {
  margin-block: 0.65rem;
  line-height: 1.6;
}

.comments {
  margin-block-start: 2rem;
  padding-block-start: 2rem;
  border-block-start: 1px solid var(--color-border);
}

.comments-toggle {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-background);
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
  padding: 0.55rem 0.85rem;
}

.comments-toggle:hover,
.comments-toggle:focus,
.comments-toggle[aria-expanded="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #ffffff;
}

.comments-toggle:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.comments-toggle:disabled {
  cursor: wait;
  opacity: 0.7;
}

.comments-toggle + #waline {
  margin-block-start: 0.85rem;
}

.comments-error {
  color: var(--color-text-muted);
  margin-block: 0;
}

#waline .wl-title,
#waline .wl-count {
  display: none;
}

#waline {
  --waline-theme-color: var(--color-primary);
  --waline-active-color: var(--color-primary-hover);
  --waline-color: var(--color-text);
  --waline-bg-color: var(--color-background);
  --waline-bg-color-light: #fdf4ff;
  --waline-bg-color-hover: #fae8ff;
  --waline-border-color: var(--color-border);
  --waline-info-bg-color: #fdf4ff;
  --waline-info-color: var(--color-text-muted);
  --waline-bq-color: #fae8ff;
  --waline-box-shadow: none;
}

#waline .wl-panel,
#waline .wl-emoji-popup,
#waline .wl-gif-popup {
  border-radius: var(--border-radius);
}

#waline .wl-panel {
  margin-inline: 0;
  border-color: var(--color-border);
  background: var(--color-background);
  max-height: 42rem;
  opacity: 1;
  overflow: hidden;
  transform: translateY(0);
  transition:
    max-height 220ms ease,
    opacity 180ms ease,
    transform 180ms ease,
    margin-block 220ms ease;
}

#waline[data-editor-collapsed="true"] .wl-panel {
  max-height: 0;
  margin-block: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.25rem);
}

@media (prefers-reduced-motion: reduce) {
  #waline .wl-panel {
    transition: none;
  }
}

#waline .wl-header {
  border-bottom-color: var(--color-border);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

#waline .wl-header-item:not(:last-child) {
  border-color: var(--color-border);
}

#waline .wl-editor,
#waline .wl-input {
  color: var(--color-text);
  caret-color: var(--color-primary);
}

#waline .wl-editor:focus,
#waline .wl-input:focus {
  background: #fdf4ff;
}

#waline .wl-btn {
  border-radius: var(--border-radius);
}

#waline .wl-btn:hover,
#waline .wl-btn:active,
#waline .wl-action:hover,
#waline .wl-sort li.active {
  color: var(--color-primary);
}

#waline .wl-btn.primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

#waline .wl-btn.primary:hover,
#waline .wl-btn.primary:active {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
  color: #ffffff;
}

#waline .wl-actions > a.wl-action[title="Markdown Guide"],
#waline .wl-actions > button.wl-action[title="GIF"],
#waline .wl-sort,
#waline .wl-meta-foot .wl-rss,
#waline .wl-power {
  display: none;
}

img {
  border: 0;
}

footer {
  border-block-start-color: var(--color-primary);
  border-top-color: var(--color-primary);
}

.border {
  border-color: var(--color-primary);
}

html[data-theme="dark"] .protected-post {
  border-color: var(--color-border-dark);
  background: var(--color-background-pre-dark);
  color: var(--color-text-dark);
}

html[data-theme="dark"] .protected-post-input,
html[data-theme="dark"] .protected-post-button {
  border-color: var(--color-border-dark);
}

html[data-theme="dark"] .protected-post-input {
  background: var(--color-background-dark);
  color: var(--color-text-dark);
  caret-color: var(--color-primary-dark);
}

html[data-theme="dark"] .protected-post-input:focus {
  outline-color: var(--color-primary-dark);
}

html[data-theme="dark"] .protected-post-button {
  background: var(--color-primary-dark);
  color: #000000;
}

html[data-theme="dark"] .comments {
  border-block-start-color: var(--color-border-dark);
}

html[data-theme="dark"] .comments-toggle {
  border-color: var(--color-border-dark);
  background: var(--color-background-dark);
  color: var(--color-text-dark);
}

html[data-theme="dark"] .comments-toggle:hover,
html[data-theme="dark"] .comments-toggle:focus,
html[data-theme="dark"] .comments-toggle[aria-expanded="true"] {
  border-color: var(--color-primary-dark);
  background: var(--color-primary-dark);
  color: #000000;
}

html[data-theme="dark"] .comments-toggle:focus {
  outline-color: var(--color-primary-dark);
}

html[data-theme="dark"] .comments-error {
  color: var(--color-text-muted-dark);
}

html[data-theme="dark"] #waline {
  --waline-theme-color: var(--color-primary-dark);
  --waline-active-color: var(--color-primary-hover-dark);
  --waline-color: var(--color-text-dark);
  --waline-bg-color: var(--color-background-dark);
  --waline-bg-color-light: var(--color-background-pre-dark);
  --waline-bg-color-hover: var(--color-background-code-dark);
  --waline-border-color: var(--color-border-dark);
  --waline-info-bg-color: var(--color-background-pre-dark);
  --waline-info-color: var(--color-text-muted-dark);
  --waline-bq-color: var(--color-background-code-dark);
  --waline-disable-bg-color: var(--color-background-pre-dark);
  --waline-disable-color: var(--color-text-muted-dark);
}

html[data-theme="dark"] #waline .wl-panel {
  border-color: var(--color-border-dark);
  background: var(--color-background-dark);
}

html[data-theme="dark"] #waline .wl-header,
html[data-theme="dark"] #waline .wl-header-item:not(:last-child) {
  border-color: var(--color-border-dark);
}

html[data-theme="dark"] #waline .wl-editor,
html[data-theme="dark"] #waline .wl-input {
  color: var(--color-text-dark);
  caret-color: var(--color-primary-dark);
}

html[data-theme="dark"] #waline .wl-editor:focus,
html[data-theme="dark"] #waline .wl-input:focus {
  background: var(--color-background-pre-dark);
}

html[data-theme="dark"] #waline .wl-btn:hover,
html[data-theme="dark"] #waline .wl-btn:active,
html[data-theme="dark"] #waline .wl-action:hover,
html[data-theme="dark"] #waline .wl-sort li.active {
  color: var(--color-primary-dark);
}

html[data-theme="dark"] #waline .wl-btn.primary {
  border-color: var(--color-primary-dark);
  background: var(--color-primary-dark);
  color: #000000;
}

html[data-theme="dark"] #waline .wl-btn.primary:hover,
html[data-theme="dark"] #waline .wl-btn.primary:active {
  border-color: var(--color-primary-hover-dark);
  background: var(--color-primary-hover-dark);
  color: #000000;
}

html[data-theme="dark"] footer {
  border-block-start-color: var(--color-primary-dark);
  border-top-color: var(--color-primary-dark);
}

html[data-theme="dark"] .border {
  border-color: var(--color-primary-dark);
}