koa3-demo/public/scss-compiler/page/index/style.css

@charset "UTF-8";
/* 首页样式 */
.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("/images/hero-bg.svg") no-repeat center center;
  background-size: cover;
  opacity: 0.1;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.feature-card {
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-card .material-symbols-light--article,
.feature-card .material-symbols-light--bookmark,
.feature-card .material-symbols-light--person {
  transition: all 0.3s ease;
}

.feature-card:hover .material-symbols-light--article,
.feature-card:hover .material-symbols-light--bookmark,
.feature-card:hover .material-symbols-light--person {
  transform: scale(1.1);
}

.stats-section {
  position: relative;
}

.stats-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("/images/stats-bg.svg") no-repeat center center;
  background-size: cover;
  opacity: 0.05;
  z-index: 0;
}

.stat-item {
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: scale(1.05);
}

.user-dashboard {
  position: relative;
}

.user-dashboard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("/images/dashboard-bg.svg") no-repeat center center;
  background-size: cover;
  opacity: 0.03;
  z-index: 0;
}

.avatar {
  transition: all 0.3s ease;
}

.avatar:hover {
  transform: scale(1.05);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-section {
    padding: 4rem 0;
  }
  .hero-content h1 {
    font-size: 2.5rem;
  }
  .features-grid {
    grid-template-columns: 1fr;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  .user-info {
    text-align: center;
    margin-bottom: 1.5rem;
  }
  .user-actions {
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 2rem;
  }
  .hero-content p {
    font-size: 1rem;
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .hero-actions {
    flex-direction: column;
    gap: 1rem;
  }
  .hero-actions a {
    width: 100%;
    text-align: center;
  }
}
/* 深色主题媒体查询 - 当用户系统偏好深色模式时应用 */
@media (prefers-color-scheme: dark) {
  .markdown-body {
    /* 告诉浏览器使用深色配色方案，影响滚动条等系统UI元素 */
    color-scheme: dark;
  }
}
/* 浅色主题媒体查询 - 当用户系统偏好浅色模式时应用 */
@media (prefers-color-scheme: light) {
  .markdown-body {
    /* 告诉浏览器使用浅色配色方案，影响滚动条等系统UI元素 */
    color-scheme: light;
    /* 定义CSS自定义属性，用于主题色彩管理 */
    --color-fg-default: #24292f;
    --color-fg-muted: #57606a;
    --color-fg-subtle: #6e7781;
    --color-canvas-default: #ffffff;
    --color-canvas-subtle: #f6f8fa;
    --color-border-default: #d0d7de;
    --color-border-muted: hsla(210, 18%, 87%, 1);
    --color-neutral-muted: rgba(175, 184, 193, 0.2);
    --color-accent-fg: #0969da;
    --color-accent-emphasis: #0969da;
    --color-attention-subtle: #fff8c5;
    --color-danger-fg: #cf222e;
    --color-mark-default: rgb(255, 255, 0);
    --color-mark-fg: rgb(255, 187, 0);
  }
}
/* Markdown内容主体样式 - 用于渲染Markdown文档的容器 */
.markdown-body {
  /* 防止iOS Safari自动调整文本大小 */
  -webkit-text-size-adjust: 100%;
  /* 防止IE自动调整文本大小 */
  -ms-text-size-adjust: 100%;
  /* 优化文本渲染质量，提升可读性 */
  text-rendering: optimizelegibility;
  /* 重置外边距为0 */
  margin: 0;
  /* 允许长单词在必要时换行，防止溢出 */
  word-wrap: break-word;
  /* 使用CSS变量设置文本颜色 */
  color: var(--color-fg-muted);
  /* 伪元素before - 用于清除浮动 */
}
.markdown-body::before {
  /* 设置为表格显示模式，用于清除浮动 */
  display: table;
  /* 空内容，仅用于布局 */
  content: "";
}
.markdown-body {
  /* 伪元素after - 用于清除浮动 */
}
.markdown-body::after {
  /* 设置为表格显示模式，用于清除浮动 */
  display: table;
  /* 清除左右浮动 */
  clear: both;
  /* 空内容，仅用于布局 */
  content: "";
}
.markdown-body {
  /* 第一个子元素 - 移除顶部外边距 */
}
.markdown-body > *:first-child {
  /* 强制移除顶部外边距，避免不必要的空白 */
  margin-top: 0 !important;
}
.markdown-body {
  /* 最后一个子元素 - 移除底部外边距 */
}
.markdown-body > *:last-child {
  /* 强制移除底部外边距，避免不必要的空白 */
  margin-bottom: 0 !important;
}
.markdown-body {
  /* 块级元素统一间距设置 - 段落、引用、列表、表格等 */
}
.markdown-body p,
.markdown-body blockquote,
.markdown-body ul,
.markdown-body ol,
.markdown-body dl,
.markdown-body table,
.markdown-body hr,
.markdown-body form,
.markdown-body pre,
.markdown-body details {
  /* 移除顶部外边距，避免重复间距 */
  margin-top: 0;
  /* 设置底部外边距为1em，保持适当间距 */
  margin-bottom: 1em;
}
.markdown-body {
  /* 引用块内部元素间距处理 */
}
.markdown-body blockquote {
  /* 引用块内第一个子元素 - 移除顶部外边距 */
}
.markdown-body blockquote > :first-child {
  margin-top: 0;
}
.markdown-body blockquote {
  /* 引用块内最后一个子元素 - 移除底部外边距 */
}
.markdown-body blockquote > :last-child {
  margin-bottom: 0;
}
.markdown-body {
  /* 统一显示成块状元素 - 确保这些元素独占一行 */
}
.markdown-body details,
.markdown-body figcaption,
.markdown-body figure {
  /* 设置为块级元素，独占一行显示 */
  display: block;
}
.markdown-body {
  /* HTML5 媒体文件跟 img 保持一致 - 内联块级元素 */
}
.markdown-body audio,
.markdown-body canvas,
.markdown-body video {
  /* 设置为内联块级元素，可以设置宽高但不会独占一行 */
  display: inline-block;
}
.markdown-body {
  /* 按钮内部间距统一 - 移除Firefox默认内边距 */
}
.markdown-body button::-moz-focus-inner,
.markdown-body input::-moz-focus-inner {
  /* 移除Firefox浏览器按钮和输入框的内部内边距 */
  padding: 0;
  /* 移除Firefox浏览器按钮和输入框的内部边框 */
  border: 0;
}
.markdown-body {
  /* 定义元素显示为斜体 - 术语定义样式 */
}
.markdown-body dfn {
  /* 设置字体为斜体，用于术语定义 */
  font-style: italic;
}
.markdown-body {
  /* 去掉各Table cell 的边距并让其边重合 - 表格样式统一 */
}
.markdown-body table {
  /* 合并表格边框，相邻单元格边框合并为一条 */
  border-collapse: collapse;
  /* 设置表格单元格间距为0 */
  border-spacing: 0;
  /* 设置为块级元素，可以设置宽高 */
  display: block;
  /* 宽度根据内容自适应 */
  width: max-content;
  /* 最大宽度不超过父容器 */
  max-width: 100%;
  /* 内容溢出时显示滚动条 */
  overflow: auto;
}
.markdown-body {
  /* 可拖动文件添加拖动手势 - 拖拽元素样式 */
}
.markdown-body [draggable] {
  /* 设置鼠标悬停时显示移动光标 */
  cursor: move;
}
.markdown-body {
  /* 加粗元素 - 粗体文本样式 */
}
.markdown-body b,
.markdown-body strong {
  /* 设置字体粗细，使用CSS变量或默认600 */
  font-weight: var(--base-text-weight-semibold, 600);
}
.markdown-body {
  /* 缩写元素样式统一 - 缩写和首字母缩写样式 */
}
.markdown-body abbr,
.markdown-body acronym {
  /* 移除底部边框 */
  border-bottom: none;
  /* 设置字体变体为正常 */
  font-variant: normal;
  /* 设置虚线下划线装饰 */
  text-decoration: underline dotted;
}
.markdown-body {
  /* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */
}
.markdown-body abbr {
  /* 设置鼠标悬停时显示帮助光标 */
  cursor: help;
}
.markdown-body {
  /* 一致的 del 样式 - 删除线文本样式 */
}
.markdown-body del {
  /* 设置文本装饰为删除线 */
  text-decoration: line-through;
}
.markdown-body {
  /* a标签去除下划线 - 链接样式处理 */
}
.markdown-body a {
  /* 默认移除下划线，保持页面简洁 */
  text-decoration: none;
  /* 没有href属性的链接样式 */
}
.markdown-body a:not([href]) {
  /* 继承父元素颜色 */
  color: inherit;
  /* 移除下划线装饰 */
  text-decoration: none;
}
.markdown-body a {
  /* 鼠标悬停时显示下划线 */
}
.markdown-body a:hover {
  text-decoration: underline;
}
.markdown-body {
  /* 默认不显示下划线，保持页面简洁 - 插入文本样式 */
}
.markdown-body ins {
  /* 移除下划线装饰，保持页面简洁 */
  text-decoration: none;
}
.markdown-body {
  /* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的，
  * 要做到更好，向后兼容的话，添加 class="typo-u" 来显示专名号
  * 关于 <u> 标签：http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element
  * 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated
  * 一篇关于 <u> 标签的很好文章：http://html5doctor.com/u-element/
  */
}
.markdown-body u,
.markdown-body .typo-u {
  /* 设置文本装饰为下划线，用于专名号显示 */
  text-decoration: underline;
}
.markdown-body {
  /* 隐藏指定元素 - 隐藏带有hidden属性的元素 */
}
.markdown-body [hidden] {
  /* 强制隐藏元素，优先级最高 */
  display: none !important;
}
.markdown-body {
  /* 伸缩框显示为列表元素 - 详情框摘要样式 */
}
.markdown-body summary {
  /* 设置为列表项显示，显示为可点击的列表项 */
  display: list-item;
}
.markdown-body {
  /* 引用元素前后内容 - 移除默认引号 */
}
.markdown-body q:before,
.markdown-body q:after {
  /* 移除引用元素前后的默认引号内容 */
  content: "";
}
.markdown-body {
  /* 表格标题和表头文本对齐 - 默认左对齐 */
}
.markdown-body caption,
.markdown-body th {
  /* 设置文本左对齐 */
  text-align: left;
}
.markdown-body {
  /* 居中对齐的表格标题和表头 */
}
.markdown-body caption[align=center],
.markdown-body th[align=center] {
  /* 设置文本居中对齐 */
  text-align: center;
}
.markdown-body {
  /* 特定元素字体粗细统一 - 地址、标题、引用等 */
}
.markdown-body address,
.markdown-body caption,
.markdown-body cite,
.markdown-body em,
.markdown-body th,
.markdown-body var {
  /* 设置字体粗细为正常（400） */
  font-weight: 400;
}
.markdown-body {
  /* 标记，类似于手写的荧光笔的作用 - 高亮标记样式 */
}
.markdown-body mark {
  /* 设置标记背景色，使用CSS变量 */
  background: var(--color-mark-default);
  /* 设置内边距，增加标记的可读性 */
  padding: 2px;
  /* 激活状态的标记样式 */
}
.markdown-body mark.active {
  /* 激活时使用强调色背景 */
  background: var(--color-mark-fg);
}
.markdown-body {
  /* 统一h1元素的间隔和字体大小 - 一级标题样式 */
}
.markdown-body h1 {
  /* 设置上下外边距为0.67em */
  margin: 0.67em 0;
  /* 设置字体粗细，使用CSS变量或默认600 */
  font-weight: var(--base-text-weight-semibold, 600);
  /* 设置字体大小为2倍基础大小 */
  font-size: 2em;
}
.markdown-body {
  /* small字体缩小 - 小字体文本样式 */
}
.markdown-body small {
  /* 设置字体大小为父元素的90% */
  font-size: 90%;
}
.markdown-body {
  /* 上下标显示 - 下标和上标文本样式 */
}
.markdown-body sub,
.markdown-body sup {
  /* 设置字体大小为75% */
  font-size: 75%;
  /* 设置行高为0，避免影响行间距 */
  line-height: 0;
  /* 设置相对定位，用于精确控制位置 */
  position: relative;
  /* 设置垂直对齐为基线 */
  vertical-align: baseline;
}
.markdown-body {
  /* 上下标内链接样式 */
}
.markdown-body sub a,
.markdown-body sup a {
  /* 设置左右内边距为0.1em */
  padding: 0 0.1em;
}
.markdown-body {
  /* 下标位置调整 */
}
.markdown-body sub {
  /* 向下偏移0.25em */
  bottom: -0.25em;
}
.markdown-body {
  /* 上标位置调整 */
}
.markdown-body sup {
  /* 向上偏移0.5em */
  top: -0.5em;
}
.markdown-body {
  /* 代码相关的字体大小统一 - 代码元素字体样式 */
}
.markdown-body code,
.markdown-body kbd,
.markdown-body pre,
.markdown-body samp,
.markdown-body pre tt {
  /* 设置字体为等宽字体，便于代码阅读 */
  font-family: monospace;
  /* 设置字体大小为1em，保持一致性 */
  font-size: 1em;
}
.markdown-body {
  /* 去除默认边框 - 移除字段集和图片的默认边框 */
}
.markdown-body fieldset,
.markdown-body img {
  /* 移除边框 */
  border: 0;
}
.markdown-body {
  /* 图片初始化样式 - 图片元素基础样式 */
}
.markdown-body img {
  /* 设置边框样式为无 */
  border-style: none;
  /* 设置最大宽度为100%，防止溢出 */
  max-width: 100%;
  /* 设置盒模型为内容盒模型 */
  box-sizing: content-box;
  /* 设置左右外边距为自动，实现居中 */
  margin: 0 auto;
  /* 设置背景色，使用CSS变量 */
  background-color: var(--color-canvas-default);
}
.markdown-body {
  /* 可附标题内容元素的间距 - 图片容器样式 */
}
.markdown-body figure {
  /* 设置上下外边距为1em，左右外边距为40px */
  margin: 1em 40px;
}
.markdown-body {
  /* 间隔线 - 水平分隔线样式 */
  /* 一致化 horizontal rule - 统一水平分隔线样式 */
}
.markdown-body hr {
  /* 设置盒模型为内容盒模型 */
  box-sizing: content-box;
  /* 隐藏溢出内容 */
  overflow: hidden;
  /* 设置背景为透明 */
  background: transparent;
  /* 设置底部边框，使用CSS变量 */
  border-bottom: 1px solid var(--color-border-muted);
  /* 设置高度为0.25em */
  height: 0.25em;
  /* 移除内边距 */
  padding: 0;
  /* 设置上下外边距为24px */
  margin: 24px 0;
  /* 设置背景色，使用CSS变量 */
  background-color: var(--color-border-default);
  /* 移除边框 */
  border: 0;
  /* 伪元素before - 用于清除浮动 */
}
.markdown-body hr::before {
  /* 设置为表格显示模式，用于清除浮动 */
  display: table;
  /* 空内容，仅用于布局 */
  content: "";
}
.markdown-body hr {
  /* 伪元素after - 用于清除浮动 */
}
.markdown-body hr::after {
  /* 设置为表格显示模式，用于清除浮动 */
  display: table;
  /* 清除左右浮动 */
  clear: both;
  /* 空内容，仅用于布局 */
  content: "";
}
.markdown-body {
  /* 表单元素并不继承父级 font 的问题 - 表单元素字体继承 */
}
.markdown-body button,
.markdown-body input,
.markdown-body select,
.markdown-body textarea {
  /* 继承父元素的字体样式 */
  font: inherit;
  /* 移除外边距 */
  margin: 0;
  /* 设置溢出为可见 */
  overflow: visible;
  /* 继承父元素的字体族 */
  font-family: inherit;
  /* 继承父元素的字体大小 */
  font-size: inherit;
  /* 继承父元素的行高 */
  line-height: inherit;
}
.markdown-body {
  /* 外观显示为按钮 - 按钮类型输入框样式 */
}
.markdown-body [type=button],
.markdown-body [type=reset],
.markdown-body [type=submit] {
  /* 设置WebKit浏览器按钮外观 */
  -webkit-appearance: button;
  /* 设置标准按钮外观，提高兼容性 */
  appearance: button;
}
.markdown-body {
  /* 这两个表单样式规则覆盖 - 复选框和单选框样式 */
}
.markdown-body [type=checkbox],
.markdown-body [type=radio] {
  /* 设置盒模型为边框盒模型 */
  box-sizing: border-box;
  /* 移除内边距 */
  padding: 0;
}
.markdown-body {
  /* 数字按钮内部高度自动 - 数字输入框按钮样式 */
}
.markdown-body [type=number]::-webkit-inner-spin-button,
.markdown-body [type=number]::-webkit-outer-spin-button {
  /* 设置高度为自动，适应内容 */
  height: auto;
}
.markdown-body {
  /* 搜索按钮内图标外观去除 - 搜索输入框样式 */
}
.markdown-body [type=search]::-webkit-search-cancel-button,
.markdown-body [type=search]::-webkit-search-decoration {
  /* 移除WebKit浏览器搜索框默认样式 */
  -webkit-appearance: none;
}
.markdown-body {
  /* 输入框的占位符样式 - WebKit浏览器占位符样式 */
}
.markdown-body ::-webkit-input-placeholder {
  /* 继承父元素颜色 */
  color: inherit;
  /* 设置透明度为0.54，创建半透明效果 */
  opacity: 0.54;
}
.markdown-body {
  /* 文件选择按钮样式统一 - 文件上传按钮样式 */
}
.markdown-body ::-webkit-file-upload-button {
  /* 设置WebKit浏览器按钮外观 */
  -webkit-appearance: button;
  /* 继承父元素字体样式 */
  font: inherit;
}
.markdown-body {
  /* 占位符显示统一 - 通用占位符样式 */
}
.markdown-body ::placeholder {
  /* 设置占位符颜色，使用CSS变量 */
  color: var(--color-fg-subtle);
  /* 设置完全不透明 */
  opacity: 1;
}
.markdown-body {
  /* table内的td,th去除留白 - 表格单元格样式 */
}
.markdown-body td,
.markdown-body th {
  /* 移除表格单元格内边距 */
  padding: 0;
}
.markdown-body {
  /* 伸缩框鼠标显示 - 详情框摘要样式 */
}
.markdown-body details summary {
  /* 设置鼠标悬停时显示手型光标 */
  cursor: pointer;
}
.markdown-body {
  /* 未展开的详情框隐藏内容 - 详情框内容显示控制 */
}
.markdown-body details:not([open]) > *:not(summary) {
  /* 强制隐藏未展开详情框内的非摘要内容 */
  display: none !important;
}
.markdown-body {
  /* 按键显示 - 键盘按键样式 */
}
.markdown-body kbd {
  /* 设置为内联块级元素，可以设置宽高但不会独占一行 */
  display: inline-block;
  /* 设置内边距为3px上下，5px左右 */
  padding: 3px 5px;
  /* 设置字体为11px等宽字体，包含多种等宽字体备选 */
  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  /* 设置行高为10px */
  line-height: 10px;
  /* 设置文本颜色，使用CSS变量 */
  color: var(--color-fg-default);
  /* 设置垂直对齐为中间 */
  vertical-align: middle;
  /* 设置背景色，使用CSS变量 */
  background-color: var(--color-canvas-subtle);
  /* 设置边框为1px实线，使用CSS变量 */
  border: solid 1px var(--color-neutral-muted);
  /* 设置底部边框颜色，使用CSS变量 */
  border-bottom-color: var(--color-neutral-muted);
  /* 设置圆角为6px */
  border-radius: 6px;
  /* 设置内阴影，创建按键凹陷效果 */
  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
}
.markdown-body {
  /* 清除浮动工具类 - 清除浮动伪元素 */
}
.markdown-body .clearfix:before,
.markdown-body .clearfix:after {
  /* 空内容，仅用于布局 */
  content: "";
  /* 设置为表格显示模式，用于清除浮动 */
  display: table;
}
.markdown-body {
  /* 清除浮动工具类 - after伪元素 */
}
.markdown-body .clearfix:after {
  /* 清除左右浮动 */
  clear: both;
}
.markdown-body {
  /* 清除浮动工具类 - 主容器 */
}
.markdown-body .clearfix {
  /* 触发IE的hasLayout属性，用于清除浮动 */
  zoom: 1;
}
.markdown-body {
  /* 强制文本换行 - 文本换行工具类 */
}
.markdown-body .textwrap,
.markdown-body .textwrap td,
.markdown-body .textwrap th {
  /* 允许长单词在必要时换行，防止溢出 */
  word-wrap: break-word;
  /* 强制在任意字符间换行，防止溢出 */
  word-break: break-all;
}
.markdown-body {
  /* 文本换行表格 - 固定表格布局 */
}
.markdown-body .textwrap-table {
  /* 设置表格布局为固定，提高渲染性能 */
  table-layout: fixed;
}
.markdown-body {
  /* 无序列表样式 - 项目符号列表 */
}
.markdown-body ul {
  /* 重置左边距为0 */
  margin-left: 0;
  /* 重置左内边距为0 */
  padding-left: 0;
  /* 设置左边距为2em，创建缩进效果 */
  margin-left: 2em;
  /* 设置列表样式为实心圆点 */
  list-style: disc;
}
.markdown-body {
  /* 有序列表样式 - 数字列表 */
}
.markdown-body ol {
  /* 重置左边距为0 */
  margin-left: 0;
  /* 重置左内边距为0 */
  padding-left: 0;
  /* 设置左边距为2em，创建缩进效果 */
  margin-left: 2em;
  /* 设置列表样式为数字 */
  list-style: decimal;
  /* 列表项样式 */
}
.markdown-body ol li {
  /* 设置左内边距为0.4em，增加数字与文本间距 */
  padding-left: 0.4em;
}
.markdown-body {
  /* 相邻列表项间距 - 列表项之间的间距 */
}
.markdown-body li + li {
  /* 设置顶部外边距为0.25em，增加列表项间距 */
  margin-top: 0.25em;
}
.markdown-body {
  /* 嵌套列表样式 - 列表项内的子列表 */
}
.markdown-body li {
  /* 无序子列表样式 */
}
.markdown-body li ul {
  /* 设置底部外边距为0.8em */
  margin-bottom: 0.8em;
  /* 设置左边距为2em，创建嵌套缩进 */
  margin-left: 2em;
  /* 设置列表样式为空心圆点 */
  list-style: circle;
  /* 三级无序列表样式 */
}
.markdown-body li ul li ul {
  /* 设置列表样式为实心方块 */
  list-style: square;
}
.markdown-body li {
  /* 有序子列表样式 */
}
.markdown-body li ol {
  /* 设置底部外边距为0.8em */
  margin-bottom: 0.8em;
  /* 设置左边距为2em，创建嵌套缩进 */
  margin-left: 2em;
}
.markdown-body {
  /* 任务列表项样式 - 待办事项列表项 */
}
.markdown-body .task-list-item {
  /* 移除列表样式，不显示项目符号 */
  list-style-type: none;
  /* 设置相对定位，用于绝对定位子元素 */
  position: relative;
  /* 第一个子输入框样式 */
}
.markdown-body .task-list-item > input {
  /* 第一个子元素右边距 */
}
.markdown-body .task-list-item > input:nth-child(1) {
  /* 设置右边距为6px */
  margin-right: 6px;
}
.markdown-body .task-list-item {
  /* 标签样式 */
}
.markdown-body .task-list-item label {
  /* 设置字体粗细为正常（400） */
  font-weight: 400;
}
.markdown-body .task-list-item {
  /* 拖拽手柄样式 */
}
.markdown-body .task-list-item .handle {
  /* 隐藏拖拽手柄 */
  display: none;
}
.markdown-body .task-list-item {
  /* 复选框样式 */
}
.markdown-body .task-list-item input[type=checkbox] {
  /* 设置宽度为0.9em */
  width: 0.9em;
  /* 设置高度为0.9em */
  height: 0.9em;
  /* 设置绝对定位 */
  position: absolute;
  /* 向左偏移1.3em */
  left: -1.3em;
  /* 向下偏移0.35em */
  top: 0.35em;
}
.markdown-body {
  /* 启用的任务列表项样式 */
}
.markdown-body .task-list-item.enabled {
  /* 标签样式 */
}
.markdown-body .task-list-item.enabled label {
  /* 设置鼠标悬停时显示手型光标 */
  cursor: pointer;
}
.markdown-body {
  /* 相邻任务列表项间距 */
}
.markdown-body .task-list-item + .task-list-item {
  /* 设置顶部外边距为3px */
  margin-top: 3px;
}
.markdown-body {
  /* 包含任务列表的容器样式 */
}
.markdown-body .contains-task-list {
  /* 从右到左文本方向样式 */
}
.markdown-body .contains-task-list:dir(rtl) .task-list-item input[type=checkbox] {
  /* 设置复选框外边距，适配RTL布局 */
  margin: 0 -1.6em 0.25em 0.2em;
}
.markdown-body {
  /* 目录样式 - 表格目录容器 */
}
.markdown-body .toc {
  /* 重置左边距为0 */
  margin-left: 0;
}
.markdown-body {
  /* 定义列表样式 - 描述列表容器 */
}
.markdown-body dl {
  /* 设置为块级元素 */
  display: block;
  /* 设置块级起始外边距为1em */
  margin-block-start: 1em;
  /* 设置块级结束外边距为1em */
  margin-block-end: 1em;
  /* 设置内联起始外边距为0px */
  margin-inline-start: 0px;
  /* 设置内联结束外边距为0px */
  margin-inline-end: 0px;
  /* 设置Unicode双向算法为隔离 */
  unicode-bidi: isolate;
  /* 定义术语样式 */
}
.markdown-body dl dt {
  /* 设置为块级元素 */
  display: block;
  /* 设置Unicode双向算法为隔离 */
  unicode-bidi: isolate;
}
.markdown-body dl {
  /* 定义描述样式 */
}
.markdown-body dl dd {
  /* 设置为块级元素 */
  display: block;
  /* 设置内联起始外边距为40px，创建缩进效果 */
  margin-inline-start: 40px;
  /* 设置Unicode双向算法为隔离 */
  unicode-bidi: isolate;
}

.markdown-body {
  --color-base: #ef4444;
  --markdown-bg: white;
  --color-bg: #ff47479c;
  --color-light: #ef44441a;
  --color-extra: rgba(239, 68, 68, 0.3);
  --color-more: rgba(239, 68, 68, 0.4);
}

.markdown-body.green {
  background-color: var(--markdown-bg);
  @apply p-3 lg:p-6;
}
.markdown-body.green strong::before {
  content: "『";
}
.markdown-body.green strong::after {
  content: "』";
}
.markdown-body.green {
  /* 块/段落引用 */
}
.markdown-body.green blockquote {
  position: relative;
  z-index: 600;
  padding: 20px 20px 15px 20px;
  line-height: 1.4 !important;
  background-color: rgba(239, 68, 68, 0.06);
  border-radius: 0.4em;
}
.markdown-body.green blockquote > * {
  position: relative;
}
.markdown-body.green blockquote > *:first-child:before {
  content: "“";
  color: var(--color-light);
  font-size: 6.5em;
  font-weight: 700;
  transform: rotate(15deg) translateX(-10px);
  opacity: 1;
  position: absolute;
  top: -0.4em;
  left: -0.2em;
  text-shadow: none;
  z-index: -10;
}
.markdown-body.green .tabs {
  margin-top: 0;
  margin-bottom: 1em;
}
.markdown-body.green {
  /* 让链接在 hover 状态下显示下划线 */
}
.markdown-body.green a {
  position: relative;
  z-index: 10;
  transition: color 0.3s linear;
  cursor: pointer;
  font-weight: bolder;
  text-decoration: none;
  color: var(--color-base);
  border-bottom: 1px solid currentColor;
  padding: 0 4px;
}
.markdown-body.green a[data-footnote-backref], .markdown-body.green a[data-footnote-ref] {
  border: none;
}
.markdown-body.green a[data-footnote-backref]:hover, .markdown-body.green a[data-footnote-ref]:hover {
  background: none;
  animation: none;
}
.markdown-body.green a:hover {
  content: "";
  border: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23ff4d20' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E") repeat-x 0 100%;
  background-size: 20px auto;
  animation: waveMove 1s infinite linear;
}
@keyframes waveMove {
  0% {
    background-position: 0 100%;
  }
  100% {
    background-position: -20px 100%;
  }
}
.markdown-body.green pre {
  background: var(--prism-background);
  font-size: var(--prism-font-size);
  display: block;
  -webkit-overflow-scrolling: touch;
}
.markdown-body.green pre,
.markdown-body.green pre code {
  font-family: var(--prism-font-family);
}
.markdown-body.green small,
.markdown-body.green figcaption {
  font-size: 0.75em;
  color: #888;
}
.markdown-body.green legend {
  color: #000;
  font-weight: inherit;
}
.markdown-body.green caption {
  color: #000;
  font-weight: inherit;
}
.markdown-body.green del {
  text-decoration: line-through var(--color-base) 2px;
}
.markdown-body.green code {
  color: rgb(45, 55, 72);
  background-color: rgba(160, 174, 192, 0.25);
  font-family: inherit;
  font-size: 1em;
  border-radius: 4px;
  padding: 1px 6px;
  margin: 0 2px;
  vertical-align: bottom;
}
.markdown-body.green pre code {
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  white-space: pre;
  background-color: transparent;
  vertical-align: baseline;
  border-radius: 0;
  margin: 0;
}
.markdown-body.green table {
  width: 100%;
  display: table;
  border: 1px solid var(--color-light);
}
.markdown-body.green table tr:hover {
  background: var(--color-light);
}
.markdown-body.green table:hover {
  border: 1px solid var(--color-extra);
}
.markdown-body.green table:hover th {
  border-right: 1px solid var(--color-extra);
  background: var(--color-extra);
  border-bottom: 1px solid var(--color-extra);
}
.markdown-body.green table:hover td {
  border-right: 1px solid var(--color-extra);
}
.markdown-body.green table:hover caption {
  border-right: 1px solid var(--color-extra);
}
.markdown-body.green table:hover thead th {
  background: var(--color-extra);
}
.markdown-body.green table th {
  border-right: 1px solid var(--color-light);
  padding: 0.5em 1em;
  background: var(--color-light);
  border-bottom: 1px solid var(--color-light);
}
.markdown-body.green table td {
  border-right: 1px solid var(--color-light);
  padding: 0.5em 1em;
}
.markdown-body.green table caption {
  border-right: 1px solid var(--color-light);
  padding: 0.5em 1em;
  border-bottom: none;
}
.markdown-body.green table thead th {
  background: var(--color-extra);
}
.markdown-body.green h1,
.markdown-body.green h2,
.markdown-body.green h3,
.markdown-body.green h4,
.markdown-body.green h5,
.markdown-body.green h6 {
  margin-top: 1.2em;
  margin-bottom: 0.6em;
  line-height: 1.35;
  position: relative;
}
.markdown-body.green h1 {
  font-size: 1.8em;
}
.markdown-body.green h2 {
  font-size: 1.6em;
}
.markdown-body.green h3 {
  font-size: 1.4em;
}
.markdown-body.green h4 {
  font-size: 1.2em;
}
.markdown-body.green h5 {
  font-size: 1em;
}
.markdown-body.green h6 {
  font-size: 1em;
}
.markdown-body.green ::-webkit-calendar-picker-indicator {
  filter: invert(50%);
}
.markdown-body.green em {
  font-weight: inherit;
  position: relative;
}
.markdown-body.green em:after {
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  color: var(--color-base);
  content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・";
}
.markdown-body.green ul.toc li {
  list-style-type: none;
}
.markdown-body.green ul.toc li a {
  text-decoration: none;
  border: 0;
  list-style-type: none;
}
.markdown-body.green.chinese {
  text-indent: 1.5em;
  font-weight: 300;
}
.markdown-body.green.chinese h1,
.markdown-body.green.chinese h2,
.markdown-body.green.chinese h3,
.markdown-body.green.chinese h4,
.markdown-body.green.chinese h5,
.markdown-body.green.chinese h6,
.markdown-body.green.chinese ol,
.markdown-body.green.chinese ul,
.markdown-body.green.chinese blockquote,
.markdown-body.green.chinese details,
.markdown-body.green.chinese summary,
.markdown-body.green.chinese pre,
.markdown-body.green.chinese .tabs {
  text-indent: 0;
}