#intro {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;; /* 指定字体 */
    line-height: 1.8; /* 设置行高 */
    letter-spacing: 1px; /* 设置字符间距 */
    word-spacing: 2px; /* 设置单词间距 */
    margin-left: 30px;
    margin-right: 30px;
}

/* 小段落之间增加间隔 */
.text_2 {
    margin-bottom: 40px;
}

#intro h2 {
	text-align: center;
    font-size: 180%;
    font-weight: bolder;
    margin-bottom: 5px;
}

#intro h3 {
	text-align: left;
    font-size: 150%;
    font-weight: bolder;
    margin-bottom: 5px;
}

#intro h4 {
	text-align: left;
    font-size: 130%;
    font-weight: bolder;
    margin-top: 10px;
    margin-bottom: 10px;
}

#intro h5 {
	text-align: left;
    font-size: 110%;
    font-weight: bolder;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
}

#intro h6 {
	text-align: left;
    font-size: 100%;
    font-weight: bolder;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
}

/* 重点区域显示 */
.custom-vip {
    background-color: #f8f9fa; /* 常见light背景色，可根据实际调整 */
    border-radius: 0.5rem; /* lg级别的圆角通常为0.5rem */
    padding: 1.25rem; /* 5对应的内边距为1.25rem（以0.25rem为基础单位） */
    margin-top: 1.5rem; /* 6对应的外边距为1.5rem */
    margin-bottom: 1.5rem;
    border-left-width: 5px;
    border-left-style: solid; /* 边框需要设置样式才能显示 */
    border-left-color: #007bff;
    font-style: italic;  /* 字体倾斜 */
  }

.custom-introduce {
    background-color: #f8f9fa; /* 常见light背景色，可根据实际调整 */
    border-radius: 0.5rem; /* lg级别的圆角通常为0.5rem */
    border-style: solid; /* 实线边框 */
    border-width: 1px; /* 边框宽度为2像素 */
    border-color: black; /* 蓝色边框 */
    padding-left: 1.25rem; /* 5对应的内边距为1.25rem（以0.25rem为基础单位） */
    margin-bottom: 1.5rem;
    margin-left: 1.5rem;
  }


  /* 重点文字显示 */
.text-vip {
    font-weight: bold; /* 加粗 */
    color: #6C0000; /* 字体颜色 */
    margin-top: 20px;
    margin-bottom: 20px;
  }

 /* 超链接显示 */
.text-link {
    font-weight: bold; /* 加粗 */
    background-color: #f1f8ff; /* 底色 */
    position: relative; /* 相对定位，为伪元素的绝对定位提供参考 */
    color: #2c3e50; /* 文本颜色为深灰色 */
    font-size: 110%; /* 字体大小为默认的110%（稍大一点） */
  }
/* 鼠标悬停时的文本样式 */
.text-link:hover {
    color: #e74c3c;
}
 /* ::before伪元素定义了一个 “隐藏的下划线”*/
.text-link::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -5px;
    left: 0;
    background: #3498db;
    visibility: hidden; /* 默认隐藏（不显示） */
    transform: scaleX(0); /* X轴方向缩放到0（视觉上不可见） */
    transition: all 0.3s ease-in-out; /* 所有属性变化时，用0.3秒平滑过渡 */
}

/* 鼠标悬停时的下划线样式 */
.text-link:hover::before {
    visibility: visible;
    transform: scaleX(1);
}

  /* 案例文字显示 */
.text-anli {
    font-size: 90%;
    font-style: italic;  /* 字体倾斜 */
    font-weight: bold; /* 加粗 */
    color: #404040; /* 字体颜色 */
  }


 /* 介绍步骤设置 */
.list_text_2 {
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 40px;
    font-size: 90%;
    list-style-type: square; /* 无序列表的小黑点*/
}

.list_text_2 li {
    margin-top: 8px;
}

.list_text_3 {
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 50px;
    font-size: 80%;
}

.list_text_3 li {
    margin-top: 6px;
}

 /* 图片区域  */
#intro img {

    margin-left: 20px;
    margin-bottom:30px;
}


 /* 视频区域  */
.video_container video {
    width: 800px;
    height: 450px;
    border-radius: 5px;  /* 四个圆角 */
    margin-top: 20px;
    margin-left: 20px;
}

 /* 代码区域  */
.code-editor {
    width: 90%;
    margin-top: 20px;         /* 上下是20，左右自动 */
    margin-bottom: 20px;
    margin-left: 20px;
    background-color: #1E1E1E;
    border-radius: 10px;  /* 四个圆角 */
}

/* 代码区域的 标题区 */
.code-editor .flex {
     background-color: #1F2937;    /* 底色 */
     color: white;        /* 字体白色 */

     font-size: 90%;
     border-top-right-radius: 10px;  /* 右上角圆角 */
}

 /* 确保代码区域 */
.code-container {
  display: flex;
  /*color: white;  /*代码行字体为白色 */
  color: rgba(255, 255, 255, 0.9); /* 白色，透明度为0.8 */
  white-space: nowrap; /* 防止容器内元素自动换行 */
}
/* 代码区左侧行 */
.code-container .line-numbers {
    width: 40px; /* 固定行号区域宽度 */
    flex-shrink: 0; /* 防止行号区域被压缩 */
    background-color: #2D2D2D;    /* 底色 */
    color: #ce9178;  /*字体颜色 */
    text-align: center;  /* 字体居中 */
    font-size: 90%;
    border-bottom-left-radius: 10px;  /* 做下角圆角 */

}

/* 右侧代码区 */
.code-container pre {
    white-space: pre;  /* 保留原本的空格 */
    font-size: 90%;
    text-align: left;  /* 字体靠左 */
    flex: 1; /* 占据剩余空间 */
    margin-left: 5px;
    overflow-x: auto; /* 内容过宽时显示水平滚动条 */
}

.code-container code .text-keyword {
    color: #6a9955;  /*注释字体 */
}

[id^="copy-toast-"] {
        margin-left: 50px;
}

/* 行号区域固定宽度 */
.line-numbers {
  width: 40px;
  flex-shrink: 0;
}