.md-body {
  /* 颜色变量 */
  --vp-c-bg: #ffffff; /* 背景色 */
  --vp-c-bg-soft: #f9fafb; /* 柔和背景色 */
  --vp-c-border: #e5e7eb; /* 边框色 */
  --vp-c-divider: #e5e7eb; /* 分割线颜色 */
  --vp-c-text-1: #111827; /* 主要文本颜色 */
  --vp-c-text-2: #374151; /* 次要文本颜色 */
  --vp-c-text-3: #6b7280; /* 第三级文本颜色 */
  --vp-c-brand: #3b82f6; /* 品牌色 */
  --vp-c-brand-light: #60a5fa; /* 品牌色浅色 */

  /* 字体变量 */
  --vp-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; /* 基础字体 */
  --vp-font-family-mono: 'Fira Code', 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* 等宽字体 */

  /* 布局变量 */
  --vp-layout-max-width: 800px; /* 最大内容宽度 */
}

/* 基础和重置 */
.md-body *,
.md-body *::before,
.md-body *::after {
  box-sizing: border-box; /* 设置盒模型为border-box */
}

.md-body {
  font-family: var(--vp-font-family-base); /* 设置基础字体 */
  font-size: 16px; /* 设置基础字号 */
  font-weight: 400; /* 设置基础字体粗细 */
  line-height: 1.7; /* 设置行高 */
  color: var(--vp-c-text-1); /* 设置文本颜色 */
  background-color: var(--vp-c-bg); /* 设置背景色 */
  padding: 48px 32px; /* 设置内边距 */
  max-width: var(--vp-layout-max-width); /* 设置内容最大宽度 */
  margin: 0 auto; /* 水平居中 */
}

/* 响应式布局调整 */
@media (max-width: 768px) {
  .md-body {
    padding: 32px 24px; /* 在小屏幕上减小内边距 */
  }
}

/* 标题样式 */
.md-body h1,
.md-body h2,
.md-body h3,
.md-body h4,
.md-body h5,
.md-body h6 {
  margin: 1rem 0;
  font-weight: 600;
  line-height: 1.25;
  position: relative;
}

.md-body h1 {
  font-size: 2.25rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--vp-c-divider);
}

.md-body h2 {
  font-size: 1.75rem;
  margin-top: 3rem;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--vp-c-divider);
}

.md-body h3 {
  font-size: 1.375rem;
  margin-top: 2.5rem;
}

.md-body h4 {
  font-size: 1.125rem;
  margin-top: 2rem;
}

/* 段落样式 */
.md-body p {
  margin: 1rem 0;
}

/* 链接样式 */
.md-body a {
  color: var(--vp-c-brand);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.25s ease;
}

.md-body a:hover {
  color: var(--vp-c-brand-light);
  text-decoration: underline;
}

/* 列表样式 */
.md-body ul,
.md-body ol {
  padding-left: 1.75rem;
  margin: 1rem 0;
}

.md-body li {
  margin: 0.5rem 0;
}

.md-body li > ul,
.md-body li > ol {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* 引用块样式 */
.md-body blockquote {
  margin: 1.5rem 0;
  padding: 0.5rem 1rem;
  border-left: 0.25rem solid var(--vp-c-border);
  color: var(--vp-c-text-2);
  background-color: var(--vp-c-bg-soft);
}

.md-body blockquote > p {
  margin: 0;
}

/* 分割线样式 */
.md-body hr {
  border: 0;
  border-top: 1px solid var(--vp-c-divider);
  margin: 2rem 0;
}

/* 行内代码样式 */
.md-body :not(pre) > code {
  font-family: var(--vp-font-family-mono);
  background-color: var(--vp-c-bg-soft);
  color: var(--vp-c-text-2);
  padding: 0.2em 0.4em;
  border-radius: 6px;
  font-size: 0.875em;
  border: 1px solid var(--vp-c-border);
}

/* 代码块样式 */
.md-body pre {
  font-family: var(--vp-font-family-mono);
  font-size: 0.875em;
  border-radius: 8px;
  margin: 1.5rem 0;
  overflow: auto;
  line-height: 1.5;
  white-space: pre;
  border: 1px solid var(--vp-c-border);
  padding: 1rem;
}

.md-body pre > code {
  background-color: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}

/* 图片样式 */
.md-body img {
  max-width: 100%;
  display: block;
  margin: 1.5rem auto;
  border-radius: 8px;
}

/* 表格样式 */
.md-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  display: block;
  overflow-x: auto;
}

.md-body th,
.md-body td {
  border: 1px solid var(--vp-c-divider);
  padding: 0.75rem 1rem;
}

.md-body th {
  font-weight: 600;
  background-color: var(--vp-c-bg-soft);
}