*, :before, :after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  border-color: var(--un-default-border-color, #e5e7eb);
}

html, :host {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
  font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  line-height: 1.5;
}

body {
  line-height: inherit;
  margin: 0;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

b, strong {
  font-weight: bolder;
}

code, kbd, samp, pre {
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub, sup {
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

button, input, optgroup, select, textarea {
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button, select {
  text-transform: none;
}

button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
  background-image: none;
}

:-moz-focusring {
  outline: auto;
}

:-moz-ui-invalid {
  box-shadow: none;
}

progress {
  vertical-align: baseline;
}

::-webkit-inner-spin-button {
  height: auto;
}

::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol, ul, menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

dialog {
  padding: 0;
}

textarea {
  resize: vertical;
}

input::placeholder, textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}

button, [role="button"] {
  cursor: pointer;
}

:disabled {
  cursor: default;
}

img, svg, video, canvas, audio, iframe, embed, object {
  vertical-align: middle;
  display: block;
}

img, video {
  max-width: 100%;
  height: auto;
}

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

:root {
  --color-body: #fafafa;
  --color-fg1: #2c2c2c;
  --color-fg2: #333;
  --color-fg3: #626262;
  --color-code: #f0f0f0;
  --color-bd1: #ddd;
  --color-bd2: #cfcfcf;
  --color-main: #087b17;
  --color-bg1: #ebebeb;
  --lh-tight: 1.3;
  --lh-base: 1.6;
  --lh-relaxed: 1.86;
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.5rem;
  --fs-4xl: 3rem;
  --font-mono: "Menlo", "Meslo LG", monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB,
    Microsoft Yahei, Arial, sans-serif;
}

.dark {
  --color-body: #222;
  --color-fg1: #e0e0e0;
  --color-fg2: #bbb;
  --color-fg3: #aaa;
  --color-code: #2c2c2c;
  --color-bd1: #444;
  --color-bd2: #555;
  --color-main: #0fa823;
  --color-bg1: #3c3d3c;
}

.dark img {
  filter: blur() brightness(.85) saturate(.9);
}

html {
  font-size: 17px;
  line-height: var(--lh-base);
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  scrollbar-color: var(--color-bd2) transparent;
}

@media (min-width: 768px) {
  html {
    font-size: 18px;
  }
}

body {
  font-family: var(--font-sans);
  color: var(--color-fg2);
  background-color: var(--color-body);
  font-weight: 400;
  overflow-x: hidden;
}

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
  border-color: var(--color-fg2);
}

summary {
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

.site-nav-wrap {
  z-index: 10;
  justify-content: center;
  padding: .65rem .75rem 0;
  display: flex;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

@media (min-width: 768px) {
  .site-nav-wrap {
    padding: .75rem 1rem 0;
    top: .75rem;
  }
}

.site-nav {
  --nav-highlight: #1414141a;
}

.dark .site-nav {
  --nav-highlight: #c8c8c829;
}

.site-nav {
  border-radius: 1.1rem;
  justify-content: space-between;
  align-items: flex-start;
  gap: .35rem;
  width: 100%;
  max-width: 100%;
  padding: .3rem .4rem;
  display: flex;
  position: relative;
}

@media (min-width: 768px) {
  .site-nav {
    align-items: center;
    width: -webkit-fit-content;
    width: fit-content;
    padding: .2rem .35rem;
    position: static;
  }
}

.site-nav__brand, .site-nav__toggle {
  justify-content: center;
  align-items: center;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
}

.site-nav__brand:hover, .site-nav__toggle:hover, .site-nav__link:hover, .site-nav__tool:hover, .site-nav .lang-switcher__trigger:hover {
  background: var(--nav-highlight);
  color: var(--color-fg1);
}

.site-nav__brand:focus-visible {
  background: var(--nav-highlight);
  color: var(--color-fg1);
}

.site-nav__toggle:focus-visible {
  background: var(--nav-highlight);
  color: var(--color-fg1);
}

.site-nav__link:focus-visible {
  background: var(--nav-highlight);
  color: var(--color-fg1);
}

.site-nav__tool:focus-visible {
  background: var(--nav-highlight);
  color: var(--color-fg1);
}

.site-nav .lang-switcher__trigger:focus-visible {
  background: var(--nav-highlight);
  color: var(--color-fg1);
}

.site-nav__brand {
  flex: none;
  align-self: center;
}

@media (min-width: 768px) {
  .site-nav__brand {
    align-self: auto;
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
  }
}

.site-nav__brand {
  color: var(--color-fg1);
  font-size: 1rem;
}

.site-nav__menu {
  flex-direction: column;
  order: 2;
  align-items: stretch;
  display: flex;
}

@media (min-width: 768px) {
  .site-nav__menu {
    flex-direction: row;
    order: 0;
    align-items: center;
  }
}

.site-nav__toggle {
  color: var(--color-fg2);
}

@media (min-width: 768px) {
  .site-nav__toggle {
    display: none;
  }
}

.site-nav__links, .site-nav__tools {
  align-items: center;
  display: flex;
}

.site-nav__content {
  border: 1px solid var(--color-bd1);
  background: var(--color-body);
  border-radius: 1rem;
  flex-direction: column;
  align-items: stretch;
  gap: .45rem;
  padding: .5rem;
  display: none;
  position: absolute;
  top: calc(100% + .45rem);
  left: 0;
  right: 0;
  box-shadow: 0 12px 30px #0000001f;
}

@media (min-width: 768px) {
  .site-nav__content {
    box-shadow: none;
    background: none;
    border: 0;
    border-radius: 0;
    flex-direction: row;
    align-items: center;
    padding: 0;
    display: flex;
    position: static;
    top: auto;
    left: auto;
    right: auto;
  }
}

.site-nav__menu[open] .site-nav__content {
  display: flex;
}

.site-nav__links {
  flex-direction: column;
  align-items: stretch;
  gap: .15rem;
}

@media (min-width: 768px) {
  .site-nav__links {
    flex-direction: row;
    align-items: center;
  }
}

.site-nav__link, .site-nav__tool, .site-nav .lang-switcher__trigger {
  width: 100%;
  min-width: 1.9rem;
  min-height: 2.75rem;
  color: var(--color-fg3);
  font-size: var(--fs-sm);
  white-space: nowrap;
  border: 0;
  justify-content: flex-start;
  align-items: center;
  padding: 0 .85rem;
  display: inline-flex;
}

@media (min-width: 768px) {
  .site-nav__link, .site-nav__tool, .site-nav .lang-switcher__trigger {
    width: auto;
    min-height: 1.9rem;
    font-size: var(--fs-xs);
    justify-content: center;
    padding: 0 .55rem;
  }
}

.site-nav__brand.is-current, .site-nav__link.is-current, .site-nav__menu[open] > .site-nav__toggle, .site-nav .lang-switcher[open] > .lang-switcher__trigger {
  background: var(--nav-highlight);
  color: var(--color-fg1);
}

.site-nav__link.is-current {
  font-weight: 700;
}

.site-nav__tools {
  gap: .25rem;
  margin-left: auto;
}

@media (min-width: 768px) {
  .site-nav__tools {
    border-left: 1px solid var(--color-bd1);
    gap: .1rem;
    margin-left: 0;
    padding-left: .35rem;
  }
}

.site-nav__brand, .site-nav__toggle, .site-nav__link, .site-nav__tool, .site-nav .lang-switcher__trigger {
  border-radius: 999px;
}

.site-nav__tool, .site-nav .lang-switcher__trigger {
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
}

@media (min-width: 768px) {
  .site-nav__tool, .site-nav .lang-switcher__trigger {
    width: auto;
    height: auto;
    padding: 0 .55rem;
  }
}

.site-nav__tool {
  flex: none;
}

@media (min-width: 768px) {
  .site-nav__tool {
    width: 1.9rem;
    height: 1.9rem;
  }
}

.site-nav__tool {
  cursor: pointer;
  background: none;
  -webkit-mask: none;
  mask: none;
}

.site-nav__tool:before {
  content: "";
  width: 1.18rem;
  height: 1.18rem;
  -webkit-mask: var(--svg) center/contain no-repeat;
  mask: var(--svg) center/contain no-repeat;
  background: currentColor;
  flex: none;
}

.lang-switcher {
  align-items: center;
  display: inline-flex;
  position: relative;
}

.lang-switcher__trigger {
  list-style: none;
}

.lang-switcher__panel {
  border: 1px solid var(--color-bd1);
  background-color: var(--color-body);
  z-index: 20;
  min-width: 6rem;
  font-size: var(--fs-sm);
  border-radius: .7rem;
  padding: .3rem;
  display: none;
  position: absolute;
  top: calc(100% + .35rem);
  right: 0;
  box-shadow: 0 8px 20px #00000014;
}

@media (min-width: 768px) {
  .lang-switcher__panel {
    font-size: var(--fs-xs);
  }
}

.lang-switcher[open] .lang-switcher__panel {
  display: block;
}

.lang-switcher[open] .lang-switcher__arrow {
  transform: rotate(180deg);
}

.lang-switcher__link {
  color: var(--color-fg2);
  border-radius: .45rem;
  padding: .55rem .65rem;
  display: block;
}

.lang-switcher__link:hover {
  background-color: var(--color-bg1);
  color: var(--color-fg1);
}

.lang-switcher__link.is-active {
  color: var(--color-main);
  font-weight: 600;
}

.mica {
  -webkit-backdrop-filter: blur(4px) saturate(1.3);
  backdrop-filter: blur(4px) saturate(1.3);
  background: #fff9;
  border: 1px solid #ffffffe6;
  box-shadow: 0 6px 20px #0000001a;
}

.dark .mica {
  background: #14141480;
  border-color: #64646480;
}

*, :before, :after {
  --un-rotate: 0;
  --un-rotate-x: 0;
  --un-rotate-y: 0;
  --un-rotate-z: 0;
  --un-scale-x: 1;
  --un-scale-y: 1;
  --un-scale-z: 1;
  --un-skew-x: 0;
  --un-skew-y: 0;
  --un-translate-x: 0;
  --un-translate-y: 0;
  --un-translate-z: 0;
  --un-pan-x: ;
  --un-pan-y: ;
  --un-pinch-zoom: ;
  --un-scroll-snap-strictness: proximity;
  --un-ordinal: ;
  --un-slashed-zero: ;
  --un-numeric-figure: ;
  --un-numeric-spacing: ;
  --un-numeric-fraction: ;
  --un-border-spacing-x: 0;
  --un-border-spacing-y: 0;
  --un-ring-offset-shadow: 0 0 #0000;
  --un-ring-shadow: 0 0 #0000;
  --un-shadow-inset: ;
  --un-shadow: 0 0 #0000;
  --un-ring-inset: ;
  --un-ring-offset-width: 0px;
  --un-ring-offset-color: #fff;
  --un-ring-width: 0px;
  --un-ring-color: #93c5fd80;
  --un-blur: ;
  --un-brightness: ;
  --un-contrast: ;
  --un-drop-shadow: ;
  --un-grayscale: ;
  --un-hue-rotate: ;
  --un-invert: ;
  --un-saturate: ;
  --un-sepia: ;
  --un-backdrop-blur: ;
  --un-backdrop-brightness: ;
  --un-backdrop-contrast: ;
  --un-backdrop-grayscale: ;
  --un-backdrop-hue-rotate: ;
  --un-backdrop-invert: ;
  --un-backdrop-opacity: ;
  --un-backdrop-saturate: ;
  --un-backdrop-sepia: ;
}

::backdrop {
  --un-rotate: 0;
  --un-rotate-x: 0;
  --un-rotate-y: 0;
  --un-rotate-z: 0;
  --un-scale-x: 1;
  --un-scale-y: 1;
  --un-scale-z: 1;
  --un-skew-x: 0;
  --un-skew-y: 0;
  --un-translate-x: 0;
  --un-translate-y: 0;
  --un-translate-z: 0;
  --un-pan-x: ;
  --un-pan-y: ;
  --un-pinch-zoom: ;
  --un-scroll-snap-strictness: proximity;
  --un-ordinal: ;
  --un-slashed-zero: ;
  --un-numeric-figure: ;
  --un-numeric-spacing: ;
  --un-numeric-fraction: ;
  --un-border-spacing-x: 0;
  --un-border-spacing-y: 0;
  --un-ring-offset-shadow: 0 0 #0000;
  --un-ring-shadow: 0 0 #0000;
  --un-shadow-inset: ;
  --un-shadow: 0 0 #0000;
  --un-ring-inset: ;
  --un-ring-offset-width: 0px;
  --un-ring-offset-color: #fff;
  --un-ring-width: 0px;
  --un-ring-color: #93c5fd80;
  --un-blur: ;
  --un-brightness: ;
  --un-contrast: ;
  --un-drop-shadow: ;
  --un-grayscale: ;
  --un-hue-rotate: ;
  --un-invert: ;
  --un-saturate: ;
  --un-sepia: ;
  --un-backdrop-blur: ;
  --un-backdrop-brightness: ;
  --un-backdrop-contrast: ;
  --un-backdrop-grayscale: ;
  --un-backdrop-hue-rotate: ;
  --un-backdrop-invert: ;
  --un-backdrop-opacity: ;
  --un-backdrop-saturate: ;
  --un-backdrop-sepia: ;
}

.m-0 {
  margin: 0;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mx-xs {
  margin-left: .35rem;
  margin-right: .35rem;
}

.mb-2xl {
  margin-bottom: 2.5rem;
}

.mb-lg {
  margin-bottom: 1.2rem;
}

.mb-md {
  margin-bottom: .85rem;
}

.mb-sm {
  margin-bottom: .65rem;
}

.mb-xl {
  margin-bottom: 1.8rem;
}

.mb-xs {
  margin-bottom: .35rem;
}

.ml-\[-2px\] {
  margin-left: -2px;
}

.ml-xs {
  margin-left: .35rem;
}

.mt-2xl {
  margin-top: 2.5rem;
}

.mt-3rem {
  margin-top: 3rem;
}

.mt-80px {
  margin-top: 80px;
}

.mt-md {
  margin-top: .85rem;
}

.mt-xl {
  margin-top: 1.8rem;
}

.last\:mb-0:last-child {
  margin-bottom: 0;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.max-w-768px {
  max-width: 768px;
}

.max-w-full {
  max-width: 100%;
}

.min-h-60vh {
  min-height: 60vh;
}

.min-h-screen {
  min-height: 100vh;
}

.w-full {
  width: 100%;
}

.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.list-none {
  list-style-type: none;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-stretch {
  align-items: stretch;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: .25rem;
}

.gap-md {
  gap: .85rem;
}

.gap-sm {
  gap: .65rem;
}

.gap-xs {
  gap: .35rem;
}

.overflow-hidden {
  overflow: hidden;
}

.truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.break-all {
  word-break: break-all;
}

.b-t, .border-t {
  border-top-width: 1px;
}

.border-b, .hover\:b-b:hover {
  border-bottom-width: 1px;
}

.b-bd1, .border-bd1 {
  border-color: var(--color-bd1);
}

.rounded-full {
  border-radius: 9999px;
}

.b-none, .border-none {
  border-style: none;
}

.p-0 {
  padding: 0;
}

.p-lg {
  padding: 1.2rem;
}

.p-y-xl {
  padding-top: 1.8rem;
  padding-bottom: 1.8rem;
}

.px-lg {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}

.px-xs {
  padding-left: .35rem;
  padding-right: .35rem;
}

.py-xs {
  padding-top: .35rem;
  padding-bottom: .35rem;
}

.pb-sm {
  padding-bottom: .65rem;
}

.pb-xs {
  padding-bottom: .35rem;
}

.pt-0\! {
  padding-top: 0 !important;
}

.pt-lg {
  padding-top: 1.2rem;
}

.pt-sm {
  padding-top: .65rem;
}

.pt-xl {
  padding-top: 1.8rem;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.c-fg1 {
  color: var(--color-fg1);
}

.c-fg2 {
  color: var(--color-fg2);
}

.c-fg3 {
  color: var(--color-fg3);
}

.c-main {
  color: var(--color-main);
}

.hover\:c-fg2:hover {
  color: var(--color-fg2);
}

.font-500 {
  font-weight: 500;
}

.font-600 {
  font-weight: 600;
}

.font-700 {
  font-weight: 700;
}

.lh-tight {
  line-height: var(--lh-tight);
}

.font-mono {
  font-family: Menlo, Meslo LG, monospace;
}

.underline, .hover\:underline:hover {
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
}

.underline-offset-3 {
  text-underline-offset: 3px;
}

.no-underline {
  text-decoration: none;
}

.opacity-40 {
  opacity: .4;
}

.opacity-60, .hover\:op-60:hover {
  opacity: .6;
}

.hover\:opacity-70:hover {
  opacity: .7;
}

.fs-2xl {
  font-size: var(--fs-2xl);
}

.fs-4xl {
  font-size: var(--fs-4xl);
}

.fs-base {
  font-size: var(--fs-base);
}

.fs-lg {
  font-size: var(--fs-lg);
}

.fs-sm {
  font-size: var(--fs-sm);
}

.fs-xl {
  font-size: var(--fs-xl);
}

.fs-xs {
  font-size: var(--fs-xs);
}

@media (min-width: 768px) {
  .md\:mb-sm {
    margin-bottom: .65rem;
  }

  .md\:mb-xl {
    margin-bottom: 1.8rem;
  }

  .md\:mt-3xl {
    margin-top: 4rem;
  }

  .md\:mt-lg {
    margin-top: 1.2rem;
  }

  .md\:max-w-50\% {
    max-width: 50%;
  }

  .md\:min-h-screen {
    min-height: 100vh;
  }

  .md\:min-w-100px {
    min-width: 100px;
  }

  .md\:flex-shrink-0 {
    flex-shrink: 0;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:flex-wrap {
    flex-wrap: wrap;
  }

  .md\:items-start {
    align-items: flex-start;
  }

  .md\:items-baseline {
    align-items: baseline;
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:gap-sm {
    gap: .65rem;
  }

  .md\:py-xl {
    padding-top: 1.8rem;
    padding-bottom: 1.8rem;
  }

  .md\:pb-0 {
    padding-bottom: 0;
  }

  .md\:pt-md {
    padding-top: .85rem;
  }

  .md\:text-right {
    text-align: right;
  }

  .md\:font-size-60px {
    font-size: 60px;
  }
}

article, .prose {
  word-wrap: break-word;
  font-size: var(--fs-base);
  line-height: 1.95;
}

article:lang(zh), .prose:lang(zh) {
  line-height: 2.05;
}

article h1, article h2, article h3, article h4, article h5, article h6, .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--color-fg1);
  margin-bottom: 1.2em;
  scroll-margin-top: 6.5rem;
  display: block;
  position: relative;
}

article h1, .prose h1 {
  margin-top: 0;
  font-size: 1.6rem;
}

article h2, .prose h2 {
  border-bottom: 1px solid var(--color-bd1);
  margin-top: 2.4em;
  padding-bottom: .375em;
  font-size: 1.375rem;
  position: relative;
}

article h3, .prose h3 {
  margin-top: 1.5em;
  font-size: 1.15rem;
}

article h4, .prose h4 {
  margin-top: 1.5em;
  font-size: 1.05rem;
}

article h5, article h6, .prose h5, .prose h6 {
  margin-top: 1.5em;
  font-size: 1rem;
  font-weight: 600;
}

article p, .prose p {
  line-height: inherit;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin-bottom: 1.8em;
}

article ul, article ol, .prose ul, .prose ol {
  margin-bottom: 1.8em;
  padding-left: 1.2em;
}

@media (min-width: 768px) {
  article ul, article ol, .prose ul, .prose ol {
    padding-left: 1.5em;
  }
}

article ul, .prose ul {
  list-style-type: disc;
}

article ol, .prose ol {
  list-style-type: decimal;
}

article li, .prose li {
  margin-bottom: .8em;
  padding-left: .5em;
}

article li::marker {
  color: var(--color-fg3);
}

.prose li::marker {
  color: var(--color-fg3);
}

article ul li, .prose ul li {
  padding-left: .3em;
}

article code, .prose code {
  background: var(--color-code);
  word-wrap: break-word;
  overflow-wrap: break-word;
  border-radius: 3px;
  padding: 2px 6px;
  font-family: Menlo, Meslo LG, monospace;
  font-size: .9rem;
}

article pre, .prose pre {
  background: var(--color-code);
  scrollbar-width: thin;
  scrollbar-color: var(--color-bd2) transparent;
  border-radius: 5px;
  margin-bottom: 1.2em;
  padding: 12px;
  overflow-x: auto;
}

article pre code, .prose pre code {
  background: none;
  padding: 0;
  font-size: .85em;
}

article blockquote, .prose blockquote {
  border-left: 4px solid var(--color-bd2);
  background-color: var(--color-code);
  margin: 1.5em 0;
  padding: 12px 16px;
}

article blockquote p, .prose blockquote p {
  margin: 0;
}

article details, .prose details {
  border: 1px solid var(--color-bd2);
  border-radius: 5px;
  margin: 1.5em 0;
  padding: 0 16px;
}

article details > summary, .prose details > summary {
  background: var(--color-code);
  list-style: revert;
  cursor: pointer;
  color: var(--color-fg1);
  border-radius: 4px;
  margin: 0 -16px;
  padding: 4px 16px;
}

article details > summary:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 4px;
}

.prose details > summary:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 4px;
}

article details[open], .prose details[open] {
  padding-bottom: 12px;
}

article details[open] > summary, .prose details[open] > summary {
  border-bottom: 1px solid var(--color-bd2);
  border-radius: 4px 4px 0 0;
  margin-bottom: 1em;
}

article details > :last-child:not(summary), .prose details > :last-child:not(summary) {
  margin-bottom: 0;
}

article mark, .prose mark {
  color: var(--color-main);
  background: none;
}

article ins, .prose ins {
  text-underline-offset: .2em;
  text-decoration: underline;
  -webkit-text-decoration-color: var(--color-main);
  text-decoration-color: var(--color-main);
}

article kbd, .prose kbd {
  border: 1px solid var(--color-bd2);
  background: var(--color-code);
  color: var(--color-fg1);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: .1em .4em;
  font-family: Menlo, Meslo LG, monospace;
  font-size: .85em;
}

article abbr[title], .prose abbr[title] {
  cursor: help;
  text-underline-offset: .2em;
}

article dl, .prose dl {
  margin: 1.5em 0;
}

article dl dt, .prose dl dt {
  color: var(--color-fg1);
  font-weight: 600;
}

article dl dd, .prose dl dd {
  margin: .4em 0 1em 1.5em;
}

article figure, .prose figure {
  text-align: center;
  margin: 1.5em 0;
  padding: 0;
}

article img, .prose img {
  display: inline-flex;
}

article .img, .prose .img {
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
  position: relative;
}

article .img:after, .prose .img:after {
  content: "";
  opacity: 0;
  pointer-events: none;
  background-color: var(--color-code);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48' viewBox='0 0 96 48'%3E%3Crect width='96' height='48' fill='transparent'/%3E%3Cg transform='translate(36,12)'%3E%3Cpath fill='%239fa0a0' fill-opacity='0.5' d='M22 3H2v18h20v-2h-2v-2h2v-2h-2v-2h2v-2h-2V9h2V7h-2V5h2zm-2 4v2h-2v2h2v2h-2v2h2v2h-2v2H4V5h14v2zm-6 2h-2v2h-2v2H8v2H6v2h2v-2h2v-2h2v-2h2v2h2v-2h-2zM6 7h2v2H6z'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

article .img:has([data-status="error"]):after {
  opacity: 1;
}

.prose .img:has([data-status="error"]):after {
  opacity: 1;
}

article .img img, .prose .img img {
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48' viewBox='0 0 96 48'%3E%3Crect width='96' height='48' fill='transparent'/%3E%3Cg transform='translate(36,12)'%3E%3Cpath fill='%239fa0a0' fill-opacity='0.5' d='M4 3H2v18h20V3zm16 2v14H4V5zm-6 4h-2v2h-2v2H8v2H6v2h2v-2h2v-2h2v-2h2v2h2v2h2v-2h-2v-2h-2zM8 7H6v2h2z'%3E%3Canimate attributeName='fill-opacity' values='0.2;0.8;0.2' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

article .img img.lazy-img, .prose .img img.lazy-img {
  background-color: var(--color-code);
}

article .img img[data-status="loaded"], .prose .img img[data-status="loaded"] {
  opacity: 1;
  background-color: #0000;
  animation: .8s blur-in;
}

article .img img[data-status="loading"], .prose .img img[data-status="loading"] {
  opacity: 1;
}

article .img img[data-status="error"], .prose .img img[data-status="error"] {
  opacity: 0;
}

article figcaption, .prose figcaption {
  font-size: var(--fs-sm);
  color: var(--color-fg3);
  text-align: center;
  line-height: var(--lh-relaxed);
  margin-top: .8em;
  padding: 0 12px;
}

article figcaption p, .prose figcaption p {
  margin: 0;
}

article table, .prose table {
  border-collapse: collapse;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-bd2);
  width: 100%;
  margin: 1.5em 0;
  overflow-x: auto;
}

article table th, article table td, .prose table th, .prose table td {
  text-align: left;
  border-bottom: 1px solid var(--color-bd2);
  padding: 8px 12px;
  font-size: .9rem;
}

article table th, .prose table th {
  color: var(--color-fg1);
}

article table tbody tr:last-child td, .prose table tbody tr:last-child td {
  border-bottom: none;
}

article a, .prose a {
  opacity: .9;
  border-bottom-width: 1px;
}

article a:hover, .prose a:hover {
  opacity: .5;
}

@keyframes blur-in {
  0% {
    filter: blur(5px);
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

.icon {
  vertical-align: -.18em;
  width: 1.18em;
  height: 1.18em;
  -webkit-mask: var(--svg) no-repeat;
  mask: var(--svg) no-repeat;
  color: inherit;
  background-color: currentColor;
  display: inline-block;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.i-home {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1Z'/%3E%3C/svg%3E");
}

.i-menu {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
}

.i-arrow-right {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M2 13v-2h13.586V5.586L22 12l-6.414 6.414V13z'/%3E%3C/svg%3E");
}

.i-arrow-left {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M22 13v-2H8.414V5.586L2 12l6.414 6.414V13z'/%3E%3C/svg%3E");
}

.i-arrow-down {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z'/%3E%3C/svg%3E");
}

.i-translate {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10zM10 2v2h6v2h-1.968a18.2 18.2 0 0 1-3.62 6.301a15 15 0 0 0 2.335 1.707l-.75 1.878A17 17 0 0 1 9 13.725a16.7 16.7 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18 18 0 0 1 4.767 8h2.24A16 16 0 0 0 9 10.877a16.2 16.2 0 0 0 2.91-4.876L2 6V4h6V2zm7.5 10.885L16.253 16h2.492z'/%3E%3C/svg%3E");
}

.i-sun {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12m0-2a4 4 0 1 0 0-8a4 4 0 0 0 0 8M11 1h2v3h-2zm0 19h2v3h-2zM3.515 4.929l1.414-1.414L7.05 5.636L5.636 7.05zM16.95 18.364l1.414-1.414l2.121 2.121l-1.414 1.414zm2.121-14.85l1.414 1.415l-2.121 2.121l-1.414-1.414zM5.636 16.95l1.414 1.414l-2.121 2.121l-1.414-1.414zM23 11v2h-3v-2zM4 11v2H1v-2z'/%3E%3C/svg%3E");
}

.i-moon {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2h.1A6.98 6.98 0 0 0 10 7m-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938A8 8 0 0 0 4 12'/%3E%3C/svg%3E");
}