@mixin chinese() {
  &.chinese {
    text-indent: 1.5em;
    font-weight: 300;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    ol,
    ul,
    blockquote,
    details,
    summary,
    pre,
    .tabs {
      text-indent: 0;
    }
  }
}

.markdown-body {
  --color-base: var(--color-accent-fg);
  --color-soft-bg: color-mix(in srgb, var(--color-base) 8%, transparent);
  --color-softer-bg: color-mix(in srgb, var(--color-base) 4%, transparent);
  --markdown-bg: color-mix(in srgb, var(--color-canvas-default) 92%, transparent);
  --markdown-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  --markdown-radius: 10px;
  --markdown-padding: 1.6em;
}

:where(.dark, [data-theme='dark'], [data-color-mode='dark']) .markdown-body {
  --color-fg-default: #e5e7eb;
  --color-fg-muted: #c0c7d1;
  --color-fg-subtle: #9ca3af;
  --color-canvas-default: #111827;
  --color-canvas-subtle: #1f2937;
  --color-border-default: #374151;
  --color-border-muted: #2c3646;
  --color-neutral-muted: rgba(148, 163, 184, 0.25);
  --color-accent-fg: #60a5fa;
  --markdown-bg: color-mix(in srgb, var(--color-canvas-default) 86%, transparent);
  --markdown-shadow: 0 10px 28px rgba(2, 6, 23, 0.28);
  --code-bg: #0f172a;
  --code-head-bg: #172133;
  --code-border: #334155;
  --code-shadow: rgba(2, 6, 23, 0.45);
}

.markdown-body.green {
  background-color: var(--markdown-bg);
  border-radius: var(--markdown-radius);
  padding: var(--markdown-padding);
  box-shadow: var(--markdown-shadow);
  border: 1px solid color-mix(in srgb, var(--color-border-default) 72%, transparent);
  color: var(--color-fg-default);
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: 0.01em;

  @media screen and (max-width: 768px) {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    font-size: 0.98rem;
    line-height: 1.85;
  }

  p {
    color: var(--color-fg-default);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 1.35em;
    margin-bottom: 0.65em;
    line-height: 1.35;
    color: var(--color-fg-default);
    scroll-margin-top: 5rem;
  }

  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.65em;
    padding-bottom: 0.25em;
    border-bottom: 1px solid var(--color-border-muted);
  }

  h3 {
    font-size: 1.35em;
  }

  h4 {
    font-size: 1.15em;
  }

  a {
    color: var(--color-base);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--color-base) 45%, transparent);
    text-underline-offset: 0.18em;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;

    &:hover {
      color: color-mix(in srgb, var(--color-base) 78%, var(--color-fg-default));
      text-decoration-color: currentColor;
    }
  }

  blockquote {
    margin-left: 0;
    padding: 0.95em 1.05em;
    border-left: 4px solid var(--color-base);
    border-radius: 0.55rem;
    background: var(--color-softer-bg);
    color: var(--color-fg-muted);
  }

  hr {
    height: 1px;
    margin: 1.6rem 0;
    background: var(--color-border-muted);
  }

  img {
    border-radius: 0.8rem;
    border: 1px solid var(--color-border-default);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
  }

  figure {
    margin: 1.4em auto;
  }

  figcaption {
    margin-top: 0.55rem;
    font-size: 0.82em;
    color: var(--color-fg-subtle);
    text-align: center;
  }

  :not(pre) > code {
    padding: 0.12em 0.48em;
    margin: 0 0.12em;
    border-radius: 0.4rem;
    background: var(--color-soft-bg);
    border: 1px solid color-mix(in srgb, var(--color-base) 26%, var(--color-border-default));
    color: color-mix(in srgb, var(--color-base) 72%, var(--color-fg-default));
    font-size: 0.92em;
  }

  pre,
  pre code {
    font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
  }

  .code-block-wrapper {
    margin: 1rem 0 1.25rem;
    border: 1px solid var(--color-border-default);
    border-radius: 0.8rem;
    overflow: hidden;
    background: var(--color-canvas-subtle);
    color: var(--color-fg-default);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);

    .code-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.55rem 0.85rem;
      border-bottom: 1px solid var(--color-border-default);
      background: color-mix(in srgb, var(--color-base) 7%, var(--color-canvas-subtle));

      .code-lang {
        font-size: 0.76rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        color: var(--color-fg-subtle);
        text-transform: uppercase;
      }

      .copy-btn {
        border: 1px solid var(--color-border-default);
        background: var(--color-canvas-default);
        color: var(--color-fg-muted);
        border-radius: 0.45rem;
        padding: 0.2rem 0.58rem;
        font-size: 0.74rem;
        line-height: 1.35;
        cursor: pointer;
        transition: all 0.18s ease;

        &:hover {
          border-color: var(--color-base);
          color: var(--color-base);
        }

        &.is-copied {
          border-color: #22c55e;
          color: #16a34a;
          background: color-mix(in srgb, #22c55e 12%, var(--color-canvas-default));
        }
      }
    }

    pre {
      margin: 0;
      padding: 1.05rem 1.1rem;
      overflow-x: auto;
      background: transparent;
      box-shadow: none;
    }
  }

  table {
    width: max-content;
    min-width: 0;
    display: block;
    max-width: 100%;
    overflow-x: auto;
    margin: 1.2rem 0;
    border: 1px solid color-mix(in srgb, var(--color-border-default) 88%, transparent);
    border-radius: 0.8rem;
    border-collapse: separate;
    border-spacing: 0;
    background: color-mix(in srgb, var(--color-canvas-default) 94%, transparent);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);

    caption {
      padding: 0.62em 0.95em;
      text-align: left;
      color: var(--color-fg-subtle);
      border-bottom: 1px solid color-mix(in srgb, var(--color-border-default) 84%, transparent);
      background: color-mix(in srgb, var(--color-canvas-subtle) 80%, transparent);
    }

    thead th {
      font-weight: 600;
      color: var(--color-fg-default);
      background: color-mix(in srgb, var(--color-base) 12%, var(--color-canvas-default));
      border-bottom: 1px solid color-mix(in srgb, var(--color-border-default) 86%, transparent);
    }

    th,
    td {
      padding: 0.62em 0.95em;
      white-space: nowrap;
      border-right: 1px solid color-mix(in srgb, var(--color-border-default) 82%, transparent);
      border-bottom: 1px solid color-mix(in srgb, var(--color-border-default) 82%, transparent);
    }

    th:last-child,
    td:last-child {
      border-right: 0;
    }

    tbody tr:last-child td {
      border-bottom: 0;
    }

    tbody tr:nth-child(even) td {
      background: color-mix(in srgb, var(--color-canvas-subtle) 52%, transparent);
    }

    tbody tr:hover td {
      background: color-mix(in srgb, var(--color-base) 10%, var(--color-canvas-subtle));
    }
  }

  ul.toc li {
    list-style-type: none;

    a {
      border: 0;
      text-decoration: none;
    }
  }

  @include chinese;
}

:where(.dark, [data-theme='dark'], [data-color-mode='dark']) .markdown-body.green {
  .code-block-wrapper {
    border-color: var(--code-border);
    background: var(--code-bg);
    box-shadow: 0 10px 26px var(--code-shadow);

    .code-header {
      border-bottom-color: var(--code-border);
      background: var(--code-head-bg);

      .code-lang {
        color: #bfdbfe;
      }

      .copy-btn {
        border-color: #475569;
        background: #1e293b;
        color: #cbd5e1;

        &:hover {
          border-color: #60a5fa;
          background: #0f172a;
          color: #93c5fd;
        }

        &.is-copied {
          border-color: #22c55e;
          color: #86efac;
          background: #052e16;
        }
      }
    }

    pre {
      background: transparent;
    }
  }

  table {
    border-color: color-mix(in srgb, var(--color-border-default) 92%, transparent);
    background: color-mix(in srgb, var(--color-canvas-default) 90%, transparent);
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.26);

    caption {
      background: color-mix(in srgb, var(--color-canvas-subtle) 90%, transparent);
      border-bottom-color: color-mix(in srgb, var(--color-border-default) 90%, transparent);
    }

    thead th {
      background: color-mix(in srgb, var(--color-base) 18%, var(--color-canvas-subtle));
    }

    tbody tr:nth-child(even) td {
      background: color-mix(in srgb, var(--color-canvas-subtle) 70%, transparent);
    }

    tbody tr:hover td {
      background: color-mix(in srgb, var(--color-base) 16%, var(--color-canvas-subtle));
    }
  }
}