彩色的代码编辑器js插件

/**
 *                                         ,s555SB@@&                          
 *                                      :9H####@@@@@Xi                        
 *                                     1@@@@@@@@@@@@@@8                       
 *                                   ,8@@@@@@@@@B@@@@@@8                      
 *                                  :B@@@@X3hi8Bs;B@@@@@Ah,                   
 *             ,8i                  r@@@B:     1S ,M@@@@@@#8;                 
 *            1AB35.i:               X@@8 .   SGhr ,A@@@@@@@@S                
 *            1@h31MX8                18Hhh3i .i3r ,A@@@@@@@@@5               
 *            ;@&i,58r5                 rGSS:     :B@@@@@@@@@@A               
 *             1#i  . 9i                 hX.  .: .5@@@@@@@@@@@1               
 *              sG1,  ,G53s.              9#Xi;hS5 3B@@@@@@@B1                
 *               .h8h.,A@@@MXSs,           #@H1:    3ssSSX@1                  
 *               s ,@@@@@@@@@@@@Xhi,       r#@@X1s9M8    .GA981               
 *               ,. rS8H#@@@@@@@@@@#HG51;.  .h31i;9@r    .8@@@@BS;i;          
 *                .19AXXXAB@@@@@@@@@@@@@@#MHXG893hrX#XGGXM@@@@@@@@@@MS        
 *                s@@MM@@@hsX#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&,      
 *              :GB@#3G@@Brs ,1GM@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@B,     
 *            .hM@@@#@@#MX 51  r;iSGAM@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@8     
 *          :3B@@@@@@@@@@@&9@h :Gs   .;sSXH@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@:    
 *      s&HA#@@@@@@@@@@@@@@M89A;.8S.       ,r3@@@@@@@@@@@@@@@@@@@@@@@@@@@r    
 *   ,13B@@@@@@@@@@@@@@@@@@@5 5B3 ;.         ;@@@@@@@@@@@@@@@@@@@@@@@@@@@i    
 *  5#@@#&@@@@@@@@@@@@@@@@@@9  .39:          ;@@@@@@@@@@@@@@@@@@@@@@@@@@@;    
 *  9@@@X:MM@@@@@@@@@@@@@@@#;    ;31.         H@@@@@@@@@@@@@@@@@@@@@@@@@@:    
 *   SH#@B9.rM@@@@@@@@@@@@@B       :.         3@@@@@@@@@@@@@@@@@@@@@@@@@@5    
 *     ,:.   9@@@@@@@@@@@#HB5                 .M@@@@@@@@@@@@@@@@@@@@@@@@@B    
 *           ,ssirhSM@&1;i19911i,.             s@@@@@@@@@@@@@@@@@@@@@@@@@@S   
 *              ,,,rHAri1h1rh&@#353Sh:          8@@@@@@@@@@@@@@@@@@@@@@@@@#:  
 *            .A3hH@#5S553&@@#h   i:i9S          #@@@@@@@@@@@@@@@@@@@@@@@@@A.
 *
 *
 *    又看源码，看你妹妹呀！
 */

/* 默认用户牌子样式 */
.default-badge {
  position: relative; /* 设置徽章相对定位 */
  display: inline-block; /* 将徽章显示为内联块元素 */
  padding: 2px 10px; /* 设置内边距，上下2像素，左右10像素 */
  background-color:  #006eff; /* 设置背景颜色为蓝色 */
  color:  #ffffff; /* 设置文字颜色为白色 */
  border-radius: 4px; /* 设置圆角半径为4像素 */
  margin-left: 1px; /* 可以调整徽章与作者名之间的间距 */
  font-size: 10px; /* 添加这行以更改字体大小 */
  /* left: -79px; */
  /* top: 60px; 将徽章下移 30px */
}

/* 认证用户牌子样式 */
.authentication-badge {
  position: relative; /* 设置徽章相对定位 */
  display: inline-block; /* 将徽章显示为内联块元素 */
  padding: 2px 10px; /* 设置内边距，上下2像素，左右10像素 */
  background-color: black; /* 设置背景颜色为黑色 */
  color: gold; /* 设置文字颜色为金色 */
  border-radius: 4px; /* 设置圆角半径为4像素 */
  margin-left: 1px; /* 可以调整徽章与作者名之间的间距 */
  font-size: 10px; /* 添加这行以更改字体大小 */
  /* left: -79px; */
  /* top: 60px; 将徽章下移 30px */
}

/* 认证用户牌子样式的闪光效果 */
.authentication-badge::before {
  content: ""; /* 创建一个空的伪元素 */
  position: absolute; /* 设置伪元素绝对定位 */
  top: 0; /* 距离顶部的位置为0 */
  left: -100%; /* 左边偏移-100%，使其隐藏在左侧 */
  right: -100%; /* 右边偏移-100%，使其隐藏在右侧 */
  bottom: 0; /* 距离底部的位置为0 */
  background: linear-gradient(90deg, transparent, white, transparent); /* 创建一个线性渐变背景 */
  opacity: 0; /* 设置初始透明度为0 */
  animation: shine 2s linear infinite; /* 添加闪光效果的动画 */
}

/* 闪光效果的关键帧动画 */
@keyframes shine {
  0% {
      left: -100%; /* 初始状态，完全隐藏在左侧 */
      right: 100%; /* 初始状态，完全隐藏在右侧 */
      opacity: 0; /* 初始状态，透明度为0 */
  }
  40%, 60% {
      left: 50%; /* 中间状态，左偏移50%显示 */
      right: -10%; /* 中间状态，右偏移-10%显示 */
      opacity: 1; /* 中间状态，透明度为1，显示 */
  }
  100% {
      left: 100%; /* 最终状态，完全显示在右侧 */
      right: -10%; /* 最终状态，右偏移-10%显示 */
      opacity: 0; /* 最终状态，透明度为0，隐藏 */
  }
}

/* 祝福版文字框 */
.comment-text-box {
  background-color: #f7f7f7; /* 设置背景颜色为浅灰色 */
  border: 1px solid #ddd; /* 添加1像素灰色边框 */
  padding: 10px; /* 添加内边距，上下左右各为10像素 */
  margin-bottom: 10px; /* 设置下外边距，以与评论内容分隔开 */
  opacity: 0.8; /* 设置透明度为0.8，稍微降低元素的不透明度 */
}

/* 评论文本样式 */
.comment-text {
  font-size: 16px; /* 设置文字大小为16像素 */
  line-height: 0.5; /* 设置行高为文字大小的0.5倍 */
  color: #333; /* 设置文字颜色为深灰色 */
  padding: 10px; /* 添加内边距，上下左右各为10像素 */
  border-radius: 5px; /* 设置圆角半径为5像素 */
  background-color: #d283fa0d; /* 设置文字背景颜色为淡紫色，带透明度 */
}
/* 评论容器样式 */
.comment {
  border: 1px solid #ccc; /* 添加1像素灰色边框 */
  padding: 10px; /* 添加内边距，上下左右各为10像素 */
  margin: 10px 0; /* 设置外边距，上下为10像素，左右为0 */
  background-color: #ffffff38; /* 设置评论容器背景颜色为浅灰色，带透明度 */
}
/* 评论头部样式 */
.comment-header {
  display: flex; /* 使用弹性盒子布局 */
  align-items: center; /* 垂直居中对齐 */
  margin-bottom: 10px; /* 设置下外边距为10像素 */
}
/* 评论头像样式 */
.comment-avatar img {
  width: 80%; /* 设置头像宽度为容器的80% */
  height: auto; /* 自动调整头像高度，保持比例 */
}
/* 评论元信息样式 */
.comment-meta {
  flex-grow: 1; /* 弹性盒子项扩展以填充可用空间 */
}
/* 评论用户代理信息样式 */
.comment-ua {
  font-style: italic; /* 设置字体样式为斜体 */
  color: #777; /* 设置文字颜色为深灰色 */
}
/* 评论作者样式 */
.comment-author {
  font-weight: bold; /* 设置字体粗细为粗体 */
}
/* 评论内容样式 */
.comment-content {
  font-size: 16px; /* 设置文字大小为16像素 */
  line-height: 1.4; /* 设置行高为文字大小的1.4倍 */
}
/* 评论页脚样式 */
.comment-footer {
  margin-top: 10px; /* 设置上外边距为10像素 */
}

/**                                                                    
*            .,,       .,:;;iiiiiiiii;;:,,.     .,,                   
*          rGB##HS,.;iirrrrriiiiiiiiiirrrrri;,s&##MAS,                
*         r5s;:r3AH5iiiii;;;;;;;;;;;;;;;;iiirXHGSsiih1,               
*            .;i;;s91;;;;;;::::::::::::;;;;iS5;;;ii:                  
*          :rsriii;;r::::::::::::::::::::::;;,;;iiirsi,               
*       .,iri;;::::;;;;;;::,,,,,,,,,,,,,..,,;;;;;;;;iiri,,.           
*    ,9BM&,            .,:;;:,,,,,,,,,,,hXA8:            ..,,,.       
*   ,;&@@#r:;;;;;::::,,.   ,r,,,,,,,,,,iA@@@s,,:::;;;::,,.   .;.      
*    :ih1iii;;;;;::::;;;;;;;:,,,,,,,,,,;i55r;;;;;;;;;iiirrrr,..       
*   .ir;;iiiiiiiiii;;;;::::::,,,,,,,:::::,,:;;;iiiiiiiiiiiiri         
*   iriiiiiiiiiiiiiiii;;;::::::::::::::::;;;iiiiiiiiiiiiiiiir;        
*  ,riii;;;;;;;;;;;;;:::::::::::::::::::::::;;;;;;;;;;;;;;iiir.       
*  iri;;;::::,,,,,,,,,,:::::::::::::::::::::::::,::,,::::;;iir:       
* .rii;;::::,,,,,,,,,,,,:::::::::::::::::,,,,,,,,,,,,,::::;;iri       
* ,rii;;;::,,,,,,,,,,,,,:::::::::::,:::::,,,,,,,,,,,,,:::;;;iir.      
* ,rii;;i::,,,,,,,,,,,,,:::::::::::::::::,,,,,,,,,,,,,,::i;;iir.      
* ,rii;;r::,,,,,,,,,,,,,:,:::::,:,:::::::,,,,,,,,,,,,,::;r;;iir.      
* .rii;;rr,:,,,,,,,,,,,,,,:::::::::::::::,,,,,,,,,,,,,:,si;;iri       
*  ;rii;:1i,,,,,,,,,,,,,,,,,,:::::::::,,,,,,,,,,,,,,,:,ss:;iir:       
*  .rii;;;5r,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,sh:;;iri        
*   ;rii;:;51,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,.:hh:;;iir,        
*    irii;::hSr,.,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,.,sSs:;;iir:         
*     irii;;:iSSs:.,,,,,,,,,,,,,,,,,,,,,,,,,,,..:135;:;;iir:          
*      ;rii;;:,r535r:...,,,,,,,,,,,,,,,,,,..,;sS35i,;;iirr:           
*       :rrii;;:,;1S3Shs;:,............,:is533Ss:,;;;iiri,            
*        .;rrii;;;:,;rhS393S55hh11hh5S3393Shr:,:;;;iirr:              
*          .;rriii;;;::,:;is1h555555h1si;:,::;;;iirri:.               
*            .:irrrii;;;;;:::,,,,,,,,:::;;;;iiirrr;,                  
*               .:irrrriiiiii;;;;;;;;iiiiiirrrr;,.                    
*                  .,:;iirrrrrrrrrrrrrrrrri;:.                        
*                        ..,:::;;;;:::,,.                             
*/
/* 本文章框架样式开始 */
.code-container {
  resize: both; /* 允许在水平和垂直方向上调整容器大小 */
  overflow: hidden; /* 溢出内容隐藏 */
  margin: auto; /* 居中对齐 */
  width: 100vw; /* 宽度占据视口宽度 */
  height: 100vh; /* 高度占据视口高度 */
  min-width: 100%; /* 最小宽度100% */
  min-height: 100%; /* 最小高度100% */
  position: relative; /* 相对定位 */
  --glow-margin: 70px; /* 自定义变量，用于设置辉光边距 */
  filter: drop-shadow(0 0 75px rgb(128 0 255 / 0.25)); /* 添加投影效果 */
}

/* 主容器的伪元素，用于显示内容 */
.code-container::before {
  content: attr(content); /* 设置内容为属性值 */
  position: absolute; /* 绝对定位 */
  bottom: 90px; /* 距离底部的位置 */
  right: 90px; /* 距离右侧的位置 */
  z-index: 999; /* 设置堆叠顺序 */
  color: rgb(255 200 255 / 0.5); /* 文字颜色 */
  text-shadow: 0 0 12px rebeccapurple; /* 添加文字阴影效果 */
  letter-spacing: 0.1em; /* 字母间距 */
}

/* 主容器的伪元素，用于创建辉光效果 */
.code-container::after {
  content: ""; /* 创建一个空的伪元素 */
  background: linear-gradient(
    to right,
    transparent,
    transparent
  ); /* 创建线性渐变背景 */
  position: absolute; /* 绝对定位 */
  top: 125px; /* 距离顶部的位置 */
  left: var(--glow-margin); /* 自定义变量，左侧辉光边距 */
  right: var(--glow-margin); /* 自定义变量，右侧辉光边距 */
  height: 4px; /* 高度为4像素 */
  display: block; /* 显示为块级元素 */
  z-index: 90; /* 设置堆叠顺序 */
  opacity: 0.5; /* 不透明度 */
}

/* 辉光容器样式 */
.glow-container {
  position: absolute; /* 绝对定位 */
  inset: 0; /* 占据整个容器 */
  display: grid; /* 使用网格布局 */
  z-index: 2; /* 设置堆叠顺序 */
  pointer-events: none; /* 不响应鼠标事件 */
  --glow: drop-shadow(0 0 1px violet); /* 自定义辉光效果 */
  filter: var(--glow) brightness(1.5) drop-shadow(0 0 10px violet); /* 添加滤镜效果 */
}

/* 辉光容器的子元素 */
.glow-container .augs {
  --aug-border: initial; /* 自定义变量 */
  --aug-border-all: 2px; /* 自定义变量 */
  --aug-border-bg: linear-gradient(to bottom left, rebeccapurple, orange); /* 自定义变量 */
}

/* Augmented UI 样式 */
section.augs {
  position: absolute; /* 绝对定位 */
  inset: 0; /* 占据整个容器 */
  margin: auto; /* 居中对齐 */
  --aug-inlay: initial; /* 自定义变量 */
  --aug-inlay-all: 2px; /* 自定义变量 */
  --aug-inlay-bg: url(http://augmented-ui.com/img/propjockey.png) center 70% / auto 70% no-repeat; /* 自定义变量 */
  --aug-inlay-opacity: 0.25; /* 自定义变量 */
}

/* Augmented UI 伪元素样式 */
section.augs::before {
  filter: brightness(0.2) blur(10px); /* 添加滤镜效果 */
}

/* 小圆点样式 */
.dots {
  position: absolute; /* 绝对定位 */
  top: 2px; /* 距离顶部的位置 */
  left: 2px; /* 距离左侧的位置 */
  width: 110px; /* 宽度 */
  height: 50px; /* 高度 */
  --close: radial-gradient(circle, red, red 7px, transparent 8px); /* 自定义变量 */
  --min: radial-gradient(circle, yellow, yellow 7px, transparent 8px); /* 自定义变量 */
  --max: radial-gradient(circle, lime, lime 7px, transparent 8px); /* 自定义变量 */
  background: var(--close) -28px no-repeat, var(--min) -2px no-repeat, var(--max) 24px no-repeat; /* 设置多个背景图像 */
  filter: hue-rotate(-20deg) brightness(1.3); /* 添加滤镜效果 */
  opacity: 0.5; /* 不透明度 */
  cursor: pointer; /* 鼠标指针样式 */
  border: none; /* 去掉边框 */
}

/* 输入框样式 */
input {
  position: absolute; /* 绝对定位 */
  top: 17px; /* 距离顶部的位置 */
  left: 120px; /* 距离左侧的位置 */
  border-left-width: 300px; /* 左边框宽度 */
  background: transparent; /* 背景透明 */
  color: rgba(201, 12, 201, 0.5); /* 文字颜色 */
  text-shadow: 0 0 12px rebeccapurple; /* 添加文字阴影效果 */
  border: none; /* 去掉边框 */
  text-align: center; /* 文字居中对齐 */
  letter-spacing: 0.1em; /* 字母间距 */
}

/* 代码样式 */
.code {
  position: absolute; /* 绝对定位 */
  inset: 80px 10px 10px 10px; /* 定位边距 */
  font-size: 20px; /* 字体大小 */
  color: white; /* 文字颜色 */
  filter: brightness(1.2); /* 亮度 */
}

/* 代码样式中的文本 */
.code * {
  font-size: 18px; /* 字体大小 */
  font-weight: normal; /* 字体粗细 */
  color: #676767; /* 文字颜色 */
  font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /* 字体系列 */
}

/* 全局样式 */
body {
  display: grid; /* 使用网格布局 */
  min-height: 100vh; /* 最小高度为视口高度 */
  width: 100vw; /* 宽度为视口宽度 */
  background: var(--bgb), var(--bg), black; /* 背景颜色 */
}

/* 通用样式 */
* {
  font: normal 1em sans-serif; /* 字体样式 */
  box-sizing: border-box; /* 盒模型 */
  padding: 0; /* 内边距 */
  margin: 0; /* 外边距 */
}

/* 背景样式 */
.bg {
  background: repeating-linear-gradient(
    to top,
    rgba(255, 255, 255, 0.03) 0px 2px,
    transparent 2px 4px
  ), linear-gradient(to bottom, #200933 75%, #3d0b43);
}

/* 背景伪元素样式 */
.bg::after {
  content: ''; /* 创建一个空的伪元素 */
  height: 50%; /* 高度为50% */
  width: 100%; /* 宽度为100% */
  display: block; /* 显示为块级元素 */
  background-image: linear-gradient(90deg, rgba(252, 25, 154, 0.1) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(0deg, rgba(252, 25, 154, 0.1) 1px, rgba(0, 0, 0, 0) 1px); /* 背景图像 */
  background-position: bottom; /* 背景位置 */
  background-repeat: repeat; /* 背景重复 */
  background-size: 20px 20px; /* 背景大小 */
  left: -25px; /* 距离左侧的位置 */
  position: absolute; /* 绝对定位 */
  pointer-events: none; /* 不响应鼠标事件 */
  bottom: 0; /* 距离底部的位置 */
  transform: perspective(100px) rotateX(60deg); /* 3D旋转效果 */
  z-index: 0; /* 设置堆叠顺序 */
}

/* 代码镜像行号样式 */
.CodeMirror-gutters {
  background: transparent; /* 背景透明 */
  border: none; /* 去掉边框 */
  margin-right: 15px; /* 右外边距 */
}

/* 代码编辑器样式 */
.CodeMirror {
  height: 100%; /* 高度占据父容器 */
  background: transparent; /* 背景透明 */
}

/* 代码编辑器行号样式 */
.CodeMirror-linenumber {
  padding-right: 1em; /* 右内边距 */
}

/* 代码编辑器滚动条样式 */
.CodeMirror-overlayscroll-horizontal div,
.CodeMirror-overlayscroll-vertical div {
  background: rgba(153, 99, 255, 0.5); /* 滚动条背景颜色 */
}

/* 隐藏滚动条 */
.CodeMirror-scrollbar-filler {
  display: none !important; /* 隐藏滚动条 */
}

/* 代码高亮样式 */
/* 以下为来自 SynthWave '84 主题的代码高亮样式，覆盖原始样式 */

/* 强调标题样式 */
.highcontrast-dark .cm-header {
  font-weight: bold;
}

/* 强调粗体文本样式 */
.highcontrast-dark .cm-strong {
  font-weight: bold;
}

/* 强调斜体文本样式 */
.highcontrast-dark .cm-em {
  font-style: italic;
}

/* 光标样式 */
.highcontrast-dark .CodeMirror-cursor {
  border-left-color: white !important;
}

/* 选中文本样式 */
.highcontrast-dark .CodeMirror-selected {
  background: rgba(255, 255, 255, 0.05);
}

/* 聚焦时选中文本样式 */
.highcontrast-dark .CodeMirror-focused .CodeMirror-selected {
  background: rgba(255, 255, 255, 0.1);
}

/* 匹配括号样式 */
.highcontrast-dark .CodeMirror-matchingbracket {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

/* 匹配标签样式 */
.highcontrast-dark .CodeMirror-matchingtag {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* 项目警告样式 */
.highcontrast-dark .powers {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* 搜索框样式 */
.highcontrast-dark .cm-searching {
  background: black;
  outline: 2px solid rgba(255, 255, 255, 0.25);
}

/* 提示框样式 */
.highcontrast-dark .CodeMirror-hints,
.highcontrast-dark .emmet-abbreviation-preview {
  border: 1px solid #5a5f73;
  background: #1e1f26;
}

/* 提示文本样式 */
.highcontrast-dark .CodeMirror-hint {
  color: white;
}

/* 激活提示框样式 */
.highcontrast-dark li.CodeMirror-hint-active {
  background: #c7c9d3;
  color: black;
}

/**
* _ooOoo_
* o8888888o
* 88" . "88
* (| -_- |)
*  O\ = /O
* ___/`---'\____
* .   ' \\| |// `.
* / \\||| : |||// \
* / _||||| -:- |||||- \
* | | \\\ - /// | |
* | \_| ''\---/'' | |
* \ .-\__ `-` ___/-. /
* ___`. .' /--.--\ `. . __
* ."" '< `.___\_<|>_/___.' >'"".
* | | : `- \`.;`\ _ /`;.`/ - ` : | |
* \ \ `-. \_ __\ /__ _/ .-` / /
* ======`-.____`-.___\_____/___.-`____.-'======
* `=---='
*          .............................................
*           佛曰：bug泛滥，我已瘫痪！
*/

/* 项目编辑器警告样式 */
.highcontrast-dark .project-editor-warning {
  background: rgba(255, 255, 255, 0.1);
}

/* 原子文本样式 */
.highcontrast-dark .cm-atom {
  color: #9963ff;
}

/* HTML 原子文本样式 */
.highcontrast-dark .box-html .cm-atom {
  color: #ff3c41;
}

/* 函数和变量样式 */
.highcontrast-dark .cm-def,
.highcontrast-dark .cm-variable-2,
.highcontrast-dark .cm-variable,
.highcontrast-dark .box-js .cm-variable + .cm-property {
  color: #61e2ff;
  text-shadow: 0 0 2px #001716, 0 0 5px #03edf933, 0 0 10px #ffff6633;
}

/* 标题样式 */
.highcontrast-dark .cm-header {
  color: #ff3c41;
}

/* 内置函数样式 */
.highcontrast-dark .cm-builtin {
  color: #ae63e4;
}

/* 数字样式 */
.highcontrast-dark .cm-number {
  color: #9963ff;
}

/* 操作符、属性、关键字、限定符样式 */
.highcontrast-dark .cm-operator,
.highcontrast-dark .cm-variable-3,
.highcontrast-dark .cm-attribute,
.highcontrast-dark .cm-property,
.highcontrast-dark .cm-keyword,
.highcontrast-dark .presentation > .cm-def,
.highcontrast-dark .cm-qualifier {
  color: #fc199a;
  text-shadow: 0 0 2px #393a33, 0 0 35px #ffffff44, 0 0 10px #fc199a, 0 0 2px #fc199a;
}

/* 操作符、属性样式 */
.highcontrast-dark .cm-operator,
.highcontrast-dark .cm-variable-3,
.highcontrast-dark .cm-attribute,
.highcontrast-dark .cm-property {
  font-style: italic;
}

/* 元信息、字符串样式 */
.highcontrast-dark .cm-meta,
.highcontrast-dark .cm-meta + .cm-property,
.highcontrast-dark .cm-string,
.highcontrast-dark .cm-string-2 {
  color: #9963ff;
  text-shadow: none;
}

/* 标签样式 */
.highcontrast-dark .cm-tag,
.highcontrast-dark .cm-callee,
.highcontrast-dark .box-css .cm-tag,
.highcontrast-dark .cm-tag.cm-bracket,
.highcontrast-dark .box-js .cm-property  {
  color: #ffcc00;
  text-shadow: 0 0 2px #100c0f, 0 0 3px #ffaa0099, 0 0 5px #ffaa0099, 0 0 10px #ffaa0099;
  font-style: italic;
}

/* 注释样式 */
.highcontrast-dark .cm-comment {
  font-style: italic;
  color: #9963ff99;
  text-shadow: 0 0 2px #001716, 0 0 5px #03edf933, 0 0 10px #ffff6633;
}

/* 编辑器背景样式 */
body.editor.highcontrast-dark {
  background: #241b2f;
}

/* 容器样式 */
.highcontrast-dark .box.box.box,
.editor.highcontrast-dark .top-boxes,
.highcontrast-dark .CodeMirror-gutter-wrapper,
body.project.highcontrast-dark .editor-pane,
body.project.highcontrast-dark .editor {
  background: none;
}

/* 代码样式 */
.editor.highcontrast-dark .top-boxes {
  --swxfm__c: rgba(153, 99, 255);
  background: repeating-linear-gradient(
    to top,
    rgba(255, 255, 255, 0.03) 0px 2px,
    transparent 2px 4px
  ), linear-gradient(to bottom, #200933 75%, #3d0b43);
}

/* 代码镜像行号样式 */
.editor.highcontrast-dark .top-boxes:after {
  content: '';
  height: 300px;
  width: 100%;
  display: block;
  background-image: linear-gradient(90deg, rgba(252, 25, 154, 0.1) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(0deg, rgba(252, 25, 154, 0.1) 1px, rgba(0, 0, 0, 0) 1px);
  background-position: bottom;
  background-repeat: repeat;
  background-size: 20px 20px;
  left: -25px;
  position: absolute;
  pointer-events: none;
  bottom: 0;
  transform: perspective(100px) rotateX(60deg);
  z-index: 0;
}

/* 代码文本样式 */
.highcontrast-dark .box.box.box pre,
.editor.highcontrast-dark .top-boxes pre,
.highcontrast-dark .CodeMirror-gutter-wrapper pre,
body.project.highcontrast-dark .editor-pane pre,
body.project.highcontrast-dark .editor pre {
  color: #b5b5b5;
}

/* 代码编辑器滚动条样式 */
.CodeMirror-scrollbar-filler {
  display: none !important;
}

/* 背景样式 */
.editor.highcontrast-dark .top-boxes {
  --swxfm__c: rgba(153, 99, 255);
  background: repeating-linear-gradient(
    to top,
    rgba(255, 255, 255, 0.03) 0px 2px,
    transparent 2px 4px
  ), linear-gradient(to bottom, #200933 75%, #3d0b43);
}

/* 背景伪元素样式 */
.editor.highcontrast-dark .top-boxes:after {
  content: '';
  height: 300px;
  width: 100%;
  display: block;
  background-image: linear-gradient(90deg, rgba(252, 25, 154, 0.1) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(0deg, rgba(252, 25, 154, 0.1) 1px, rgba(0, 0, 0, 0) 1px);
  background-position: bottom;
  background-repeat: repeat;
  background-size: 20px 20px;
  left: -25px;
  position: absolute;
  pointer-events: none;
  bottom: 0;
  transform: perspective(100px) rotateX(60deg);
  z-index: 0;
}

/* 滚动条样式 */
.CodeMirror-scrollbar-filler {
  display: none !important;
}

/* 光标样式 */
.editor.highcontrast-dark .CodeMirror-cursor {
  border-left-color: white !important;
}

/* 选中文本样式 */
.editor.highcontrast-dark .CodeMirror-selected {
  background: rgba(255, 255, 255, 0.05);
}

/* 聚焦时选中文本样式 */
.editor.highcontrast-dark .CodeMirror-focused .CodeMirror-selected {
  background: rgba(255, 255, 255, 0.1);
}

/* 匹配括号样式 */
.editor.highcontrast-dark .CodeMirror-matchingbracket {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

/* 匹配标签样式 */
.editor.highcontrast-dark .CodeMirror-matchingtag {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* 项目警告样式 */
.editor.highcontrast-dark .powers {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* 搜索框样式 */
.editor.highcontrast-dark .cm-searching {
  background: black;
  outline: 2px solid rgba(255, 255, 255, 0.25);
}

/* 提示框样式 */
.editor.highcontrast-dark .CodeMirror-hints,
.editor.highcontrast-dark .emmet-abbreviation-preview {
  border: 1px solid #5a5f73;
  background: #1e1f26;
}

/* 提示文本样式 */
.editor.highcontrast-dark .CodeMirror-hint {
  color: white;
}

/* 激活提示框样式 */
.editor.highcontrast-dark li.CodeMirror-hint-active {
  background: #c7c9d3;
  color: black;
}

/* 项目编辑器警告样式 */
.editor.highcontrast-dark .project-editor-warning {
  background: rgba(255, 255, 255, 0.1);
}

/* 原子文本样式 */
.editor.highcontrast-dark .cm-atom {
  color: #9963ff;
}

/* HTML 原子文本样式 */
.editor.highcontrast-dark .box-html .cm-atom {
  color: #ff3c41;
}

/* 函数和变量样式 */
.editor.highcontrast-dark .cm-def,
.editor.highcontrast-dark .cm-variable-2,
.editor.highcontrast-dark .cm-variable,
.editor.highcontrast-dark .box-js .cm-variable + .cm-property {
  color: #61e2ff;
  text-shadow: 0 0 2px #001716, 0 0 5px #03edf933, 0 0 10px #ffff6633;
}

/* 标题样式 */
.editor.highcontrast-dark .cm-header {
  color: #ff3c41;
}

/* 内置函数样式 */
.editor.highcontrast-dark .cm-builtin {
  color: #ae63e4;
}

/* 数字样式 */
.editor.highcontrast-dark .cm-number {
  color: #9963ff;
}

/* 操作符、属性、关键字、限定符样式 */
.editor.highcontrast-dark .cm-operator,
.editor.highcontrast-dark .cm-variable-3,
.editor.highcontrast-dark .cm-attribute,
.editor.highcontrast-dark .cm-property,
.editor.highcontrast-dark .cm-keyword,
.editor.highcontrast-dark .presentation > .cm-def,
.editor.highcontrast-dark .cm-qualifier {
  color: #fc199a;
  text-shadow: 0 0 2px #393a33, 0 0 35px #ffffff44, 0 0 10px #fc199a, 0 0 2px #fc199a;
}

/* 操作符、属性样式 */
.editor.highcontrast-dark .cm-operator,
.editor.highcontrast-dark .cm-variable-3,
.editor.highcontrast-dark .cm-attribute,
.editor.highcontrast-dark .cm-property {
  font-style: italic;
}

/* 元信息、字符串样式 */
.editor.highcontrast-dark .cm-meta,
.editor.highcontrast-dark .cm-meta + .cm-property,
.editor.highcontrast-dark .cm-string,
.editor.highcontrast-dark .cm-string-2 {
  color: #9963ff;
  text-shadow: none;
}

/* 标签样式 */
.editor.highcontrast-dark .cm-tag,
.editor.highcontrast-dark .cm-callee,
.editor.highcontrast-dark .box-css .cm-tag,
.editor.highcontrast-dark .cm-tag.cm-bracket,
.editor.highcontrast-dark .box-js .cm-property  {
  color: #ffcc00;
  text-shadow: 0 0 2px #100c0f, 0 0 3px #ffaa0099, 0 0 5px #ffaa0099, 0 0 10px #ffaa0099;
  font-style: italic;
}

/* 注释样式 */
.editor.highcontrast-dark .cm-comment {
  font-style: italic;
  color: #9963ff99;
  text-shadow: 0 0 2px #001716, 0 0 5px #03edf933, 0 0 10px #ffff6633;
}
/* 本文章框架样式结束 */

/**
*                    .::::.
*                  .::::::::.
*                 :::::::::::  FUCK YOU
*             ..:::::::::::'
*           '::::::::::::'
*             .::::::::::
*        '::::::::::::::..
*             ..::::::::::::.
*           ``::::::::::::::::
*            ::::``:::::::::'        .:::.
*           ::::'   ':::::'       .::::::::.
*         .::::'      ::::     .:::::::'::::.
*        .:::'       :::::  .:::::::::' ':::::.
*       .::'        :::::.:::::::::'      ':::::.
*      .::'         ::::::::::::::'         ``::::.
*  ...:::           ::::::::::::'              ``::.
* ```` ':.          ':::::::::'                  ::::..
*                    '.:::::'                    ':'````..
*/
/* 抖音文字样式开始 */
.tiktok {
	text-shadow: -2px 0 rgba(0, 255, 255, 0.5), 2px 0 rgba(255, 0, 0, 0.5);
	animation: shake-it 0.5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* 定义抖音文字抖动动画 */
@keyframes shake-it {
  0% {
      text-shadow: 0 0 rgba(0, 255, 255, 0.5), 0 0 rgba(255, 0, 0, 0.5);
  }
  25% {
      text-shadow: -2px 0 rgba(0, 255, 255, 0.5), 2px 0 rgba(255, 0, 0, 0.5);
  }
  50% {
      text-shadow: -5px 0 rgba(0, 255, 255, 0.5), 3px 0 rgba(255, 0, 0, 0.5);
  }
  100% {
      text-shadow: 3px 0 rgba(0, 255, 255, 0.5), 5px 0 rgba(255, 0, 0, 0.5);
  }
}
/* 抖音文字样式结束 */

/* 文章样式部分开始 */
/* 全局声明 */
#article {
  font-family: 'FangzhengYZ'; /* 使用自定义字体FangzhengYZ */
  font-size: 16px; /* 字体大小为16像素 */
  color: #7F7F7F; /* 文字颜色为深灰色 */
  line-height: 1.8rem; /* 行高为1.8倍文字大小 */
  letter-spacing: .3px; /* 字母间距为0.3像素 */
}

/* 字体引入 */
/* 方正悠哉字体 */
@font-face {
  font-family: 'FangzhengYZ';
  font-style: normal;
  font-weight: normal;
  src: url("https://keeleycenc.com/Brave-main/Typecho/usr/themes/Brave-main/ttf/FangzhengYZ.ttf") format('truetype'); /* 引入自定义字体文件 */
}

/* 方正卡通简体字体 */
@font-face {
  font-family: 'FangzhengKT';
  font-style: normal;
  font-weight: bold;
  src: url("https://keeleycenc.com/Brave-main/Typecho/usr/themes/Brave-main/ttf/FangzhengKT.ttf") format('truetype'); /* 引入自定义字体文件 */
}

/* 方正初恋体字体 */
@font-face {
  font-family: 'FangzhengCL';
  font-style: normal;
  font-weight: bold;
  src: url("https://keeleycenc.com/Brave-main/Typecho/usr/themes/Brave-main/ttf/FangzhengCL.TTF") format('truetype'); /* 引入自定义字体文件 */
}

/* 标题 */
#article h1, #article h2, #article h3, #article h4, #article h5, #article h6 {
  font-family: 'FangzhengKT'; /* 使用自定义字体FangzhengKT */
  font-weight: bold !important; /* 设置标题文字为粗体 */
  color: #666; /* 标题文字颜色为深灰色 */
}

#article h1:before {
  display: block;
  content: "";
  margin-top: 30px; /* 设置标题上方的外边距为30像素 */
}

#article h1:nth-of-type(1)::before {
  display: block;
  margin-top: 10px; /* 设置第一个标题上方的外边距为10像素 */
}

#article h1 {
  font-size: 30px !important; /* 设置标题1字体大小为30像素 */
  line-height: 1.4; /* 标题1行高为1.4倍文字大小 */
  margin: 2.2rem auto 1.8rem !important; /* 设置标题1的外边距 */
  background: linear-gradient(to bottom, transparent 65%, rgba(255, 238, 225, .7) 0) no-repeat; /* 添加标题1背景渐变 */
  width: auto;
  display: inline;
}

#article h1:after {
  display: block;
  content: "";
  margin-bottom: 10px; /* 设置标题下方的外边距为10像素 */
}

#article h2 {
  font-size: 25px !important; /* 设置标题2字体大小为25像素 */
  margin: 2rem auto 1.6rem !important; /* 设置标题2的外边距 */
  border-left: 5px solid #fcb076; /* 添加标题2的左边框 */
  padding: .1rem .3rem;
}

#article h3 {
  margin: 1.8rem auto 1.4rem !important; /* 设置标题3的外边距 */
  font-size: 22px !important; /* 设置标题3字体大小为22像素 */
  padding-bottom: 3px;
  border-bottom: 1px solid #fedcc2; /* 添加标题3的底部边框 */
}

#article h4 {
  color: #666; /* 设置标题4文字颜色为深灰色 */
  margin: 1.4rem auto 1.4rem !important; /* 设置标题4的外边距 */
  font-size: 20px !important; /* 设置标题4字体大小为20像素 */
}

#article h5 {
  margin: 1.2rem auto 1.2rem !important; /* 设置标题5的外边距 */
  font-size: 18px; /* 设置标题5字体大小为18像素 */
  color: #fcb076; /* 设置标题5文字颜色为橙色 */
}

#article h6 {
  color: #666; /* 设置标题6文字颜色为深灰色 */
  margin: 1.2rem auto 1.2rem !important; /* 设置标题6的外边距 */
  font-size: 18px; /* 设置标题6字体大小为18像素 */
}

/* 段落 */
#article p {
  font-size: 16px; /* 设置段落字体大小为16像素 */
}

/* 引用 */
#article blockquote {
  font-family: 'FangzhengYZ', "HelveticaNeue", Arial, "kaiti", "pingfangSC light", "microsoft yahei" !important; /* 使用自定义字体FangzhengYZ */
  margin: 1.6rem auto 1.2rem !important; /* 设置引用的外边距 */
  padding: 15px 10px 1px 15px;
  line-height: 27px;
  background-color: #fff6edcc; /* 设置引用的背景颜色 */
  border-left: 3px solid #fcb076; /* 设置引用的左边框 */
  color: #808080; /* 引用文字颜色为灰色 */
  display: block;
}

/* 行内代码 */
#article li code, p code {
  color: #fa8c37 !important; /* 设置行内代码文字颜色为橙色 */
  background-color: rgba(255, 246, 237, 0.4); /* 设置行内代码背景颜色 */
  font-family: "LM Mono 10", "Times New Roman", Arial, simsun, "pingfangSC light", "microsoft yahei", sans-serif; /* 设置行内代码字体 */
  font-size: 0.8rem; /* 设置行内代码字体大小为0.8rem */
  box-sizing: border-box;
  margin: 0 4px;
  padding: 2px 2px;
  border-radius: 2px;
  box-shadow: 0 0 .8px .8px rgba(251, 157, 85, .5); /* 设置行内代码阴影效果 */
}

#article a {
  color: #fb9d55; /* 设置链接文字颜色为橙色 */
  border-bottom: 1px dashed #fb9d55; /* 设置链接下划线为虚线橙色 */
}

#article a:hover {
  text-decoration: none;
  color: #fb9d55; /* 鼠标悬停时链接文字颜色为橙色 */
  border-bottom: 1px solid #fb9d55; /* 鼠标悬停时链接下划线为实线橙色 */
}

/* 列表 */
#article ol, #article ul {
  padding-left: 25px; /* 设置有序列表和无序列表的左内边距 */
  margin: .5rem 0; /* 设置列表的外边距 */
}

#article ol>li, #article ul>li {
  color: #7F7F7F; /* 设置列表项文字颜色为深灰色 */
}

#article li::marker {
  color: #f36e06; /* 设置列表标记的颜色为橙色 */
}

#article ol {
  margin: 1.2rem auto 1rem !important; /* 设置有序列表的外边距 */
  padding-left: 25px !important; /* 设置有序列表的左内边距 */
  list-style-type: decimal !important; /* 设置有序列表的标记类型为数字 */
}

#article ul {
  list-style-type: circle; /* 设置无序列表的标记类型为圆圈 */
}

#article ul ul, #article ol ul {
  list-style-type: disc; /* 设置嵌套列表的标记类型为实心圆 */
}

#article ul ul ul, #article ol ul ul, #article ol ol ul, #article ul ol ul {
  list-style-type: square; /* 设置更深层次的嵌套列表标记类型为实心方块 */
}

/* 表格 */
#article table {
  margin: 1.6rem auto !important; /* 设置表格的外边距 */
  width: 100%; /* 设置表格宽度为100% */
  overflow: auto;
  display: table;
  font-size: 14px; /* 设置表格内文字大小为14像素 */
  border-spacing: 0;
  border-collapse: collapse;
  word-break: normal;
  word-wrap: normal;
  border-radius: 3px;
  box-shadow: 2px 2px 5px 1px #8c8c8c61; /* 设置表格阴影效果 */
}

#article table td, table th {
  border-radius: 3px;
  padding: 6px 13px;
  word-break: keep-all;
}

#article table th {
  font-weight: 700; /* 设置表格标题文字粗体 */
  color: #fb9d55; /* 设置表格标题文字颜色为橙色 */
  background-color: #f8f8f8; /* 设置表格标题背景颜色 */
}

#article table tr:nth-child(2n) {
  background-color: #f8f8f8; /* 设置表格隔行背景颜色 */
}

/* 分割线 */
#article hr {
  margin: 2rem 0 !important; /* 设置分割线的外边距 */
  height: .8px; /* 设置分割线高度 */
  padding: 0;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #fcb076, rgba(255, 255, 255, 0)); /* 设置分割线背景渐变效果 */
  border: none;
  text-align: center;
}

#article pre {
  margin: 1.2rem auto 1.6rem !important; /* 设置预格式化文本的外边距 */
  padding: 10px 15px;
  background-color: #F2F2F2 !important; /* 设置预格式化文本的背景颜色 */
  border-radius: 5px; /* 设置预格式化文本的圆角边框 */
}

/* 图片 */
#article img {
  margin: 1rem auto;
  border: 10px solid #ffffff!important; /* 设置图片的外边框 */
  outline: 1px solid #F2F2F2;
}

/* 文字加粗 */
#article strong {
  font-family: 'FangzhengKT'; /* 使用自定义字体FangzhengKT */
  color: #fa8c37; /* 设置加粗文字颜色为橙色 */
  font-weight: bold; /* 设置文字加粗 */
}

#article strong::before {
  content: '「'; /* 在加粗文字前面添加左括号 */
}

#article strong::after {
  content: '」'; /* 在加粗文字后面添加右括号 */
}

/**
*                    _ooOoo_
*                   o8888888o
*                   88" . "88
*                   (| -_- |)
*                    O\ = /O
*                ____/`---'\____
*              .   ' \\| |// `.
*               / \\||| : |||// \
*             / _||||| -:- |||||- \
*               | | \\\ - /// | |
*             | \_| ''\---/'' | |
*              \ .-\__ `-` ___/-. /
*           ___`. .' /--.--\ `. . __
*        ."" '< `.___\_<|>_/___.' >'"".
*       | | : `- \`.;`\ _ /`;.`/ - ` : | |
*         \ \ `-. \_ __\ /__ _/ .-` / /
* ======`-.____`-.___\_____/___.-`____.-'======
*                    `=---='
*
* .............................................
*          佛祖保佑             永无BUG
*/

/* 动态彩虹字 */
#article em {
  font-style: normal;
  background-image: linear-gradient(to left, orangered, orange, gold, lightgreen, cyan, dodgerblue, mediumpurple, hotpink, orangered); /* 设置文字背景为彩虹渐变 */
  background-size: 110vw;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-animation: rainbow 60s linear infinite;
  animation: rainbow 60s linear infinite;
}

@keyframes rainbow {
  100% {
      background-position: -2000vw;
  }
}

/* 输入框样式 */
input, optgroup, select, textarea {
  margin: 1rem 0 1rem -15px !important; /* 设置输入框和下拉框的外边距 */
}

/* 删除线 */
del {
  padding: 1px 2px;
  text-decoration: line-through #F87466; /* 设置删除线样式 */
  color: #808080; /* 设置删除线文字颜色为灰色 */
}

/* 文章最后加上THE STORY CONTINUES... */
#article:after {
  content: 'THE STORY CONTINUES...'; /* 在文章末尾添加内容 */
  font-size: 16px; /* 设置字体大小为16像素 */
  display: block;
  text-align: center;
  margin-top: 50px; /* 设置外边距 */
  color: #999; /* 文字颜色为灰色 */
  border-bottom: 1px solid #eee; /* 添加底部边框 */
}
/* 文章样式结束 */

/* 动态彩虹字体 */
.rainbow-text {
  background-image: linear-gradient(to left, orangered, orange, gold, lightgreen, cyan, dodgerblue, mediumpurple, hotpink, orangered); /* 创建渐变背景图，形成彩虹效果 */
  background-size: 110vw; /* 设置背景图大小，超出视窗宽度以实现动画效果 */
  -webkit-background-clip: text; /* 将背景图裁剪成文字形状 */
  background-clip: text; /* 将背景图裁剪成文字形状 */
  color: transparent; /* 文字颜色透明，以显示背景图 */
  -webkit-animation: rainbow 60s linear infinite; /* 应用彩虹动画 */
  animation: rainbow 60s linear infinite; /* 应用彩虹动画 */
}

/* 彩虹动画关键帧 */
@keyframes rainbow {
	100% {
    background-position: -2000vw; /* 背景图位置动画 */
}
}

/* 主要卡片样式 */
.home-card{
  border-radius: 8px !important; /* 设置边框半径，使卡片具有圆角 */
  box-shadow: 1px 4px 15px rgb(125 147 178 / 30%); /* 添加卡片阴影效果 */
  border:1px solid rgba(208,206,206,.4)!important; /* 设置卡片边框样式 */
  margin:10px; /* 设置卡片的外边距 */
}

/* 高亮文字样式 */
.highlight{
  border-radius:2px; /* 设置边框半径 */
  background-color: #FDCD87; /* 设置背景颜色 */
  padding: 2px 4px; /* 设置内边距 */
  margin: 0 2px; /* 设置外边距 */
}

/* 彩虹动画关键帧（Webkit浏览器兼容） */
@-webkit-keyframes rainbow {
  to {
      background-position: -2000vw; /* 背景图位置动画 */
  }
}

/* 心形容器样式 */
.lover-container {
	max-width: 500px !important; /* 设置最大宽度 */
	width: 500px; /* 设置宽度 */
	height: 50vh; /* 设置高度为视窗高度的一半 */
}

/* 爱人背景图片 */
.lover-background {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: -1;
	object-fit: cover; /* 图片充满容器 */
	background-position-x: center;
	background-position-y: center;
	background-size: cover;
}

/* 爱人背景图片前置层 */
.lover-background:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVQImU3IMREAIAgAwJfNkQCEsH8cijjpMf6vnXlQaIiJFx+omEBfmqIEZLe2jzcAAAAASUVORK5CYII=);
}

/* 主要英雄部分样式 */
.main-hero-header, .main-hero-waves-area {
	width: 100%;
	position: absolute;
	left: 0;
	z-index: 0;
}

/* 主要英雄波浪区域样式 */
.main-hero-waves-area {
	bottom: -5px;
}

/* 波浪图案样式 */
.waves-area .waves-svg {
	width: 100%;
	height: 5rem; /* 设置波浪高度 */
}

/* 波浪图案动画 */
.waves-area .parallax>use {
	-webkit-animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
	animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

/* 波浪图案动画关键帧 */
.waves-area .parallax>use:first-child {
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
	-webkit-animation-duration: 7s;
	animation-duration: 7s;
	fill: hsla(0, 0%, 100%, .7); /* 设置填充颜色 */
}

.waves-area .parallax>use:nth-child(2) {
	-webkit-animation-delay: -3s;
	animation-delay: -3s;
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
	fill: hsla(0, 0%, 100%, .5); /* 设置填充颜色 */
}

.waves-area .parallax>use:nth-child(3) {
	-webkit-animation-delay: -4s;
	animation-delay: -4s;
	-webkit-animation-duration: 13s;
	animation-duration: 13s;
	fill: hsla(0, 0%, 100%, .3); /* 设置填充颜色 */
}

.waves-area .parallax>use:nth-child(4) {
	-webkit-animation-delay: -5s;
	animation-delay: -5s;
	-webkit-animation-duration: 20s;
	animation-duration: 20s;
	fill: #fff; /* 设置填充颜色 */
}

/* 彩虹背景动画关键帧 */
@-webkit-keyframes move-forever {
	0% {
		-webkit-transform: translate3d(-90px, 0, 0);
		transform: translate3d(-90px, 0, 0);
	}
	to {
		-webkit-transform: translate3d(85px, 0, 0);
		transform: translate3d(85px, 0, 0);
	}
}

@keyframes move-forever {
	0% {
		-webkit-transform: translate3d(-90px, 0, 0);
		transform: translate3d(-90px, 0, 0);
	}
	to {
		-webkit-transform: translate3d(85px, 0, 0);
		transform: translate3d(85px, 0, 0);
	}
}

/* 彩虹文字标题样式 */
.lover-card-title {
	background: -webkit-linear-gradient(left, red, #00f);
	background: -o-linear-gradient(right, red, #00f);
	background: -moz-linear-gradient(right, red, #00f);
	background: linear-gradient(to right, red, #00f);
	-webkit-background-clip: text; /* 使用文字作为背景裁剪区域 */
	background-clip: text; /* 使用文字作为背景裁剪区域 */
	-webkit-text-fill-color: transparent; /* 文字颜色透明，以显示背景图 */
}

.avatar-md img{
	width: 65px;
	height: 65px;
}

#loveList,.list-content{
	max-width: 650px;
	width: 100%;
}

#loveList section{
	display: block;
	padding-top: 85%;
	background-position: 50% 50%;
	background-color: #fff;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}

.statusIcon{
	width: 18px;
	height: 18px;
	margin-right: .8rem;
}
.newIcon{
	width: 18px;
	height: 18px;
	margin-right: .8rem;
}
.indexPlate a:hover{
	color: initial;
	text-decoration: none;
}
.indexPlate a{
	color: inherit;
}

/* 爱情列表标题样式 */
.loveList-title {
	background: -webkit-linear-gradient(left, red, orange);
	background: -o-linear-gradient(right, red, orange);
	background: -moz-linear-gradient(right, red, orange);
	background: linear-gradient(to right, red, orange);
	-webkit-background-clip: text; /* 使用文字作为背景裁剪区域 */
	background-clip: text; /* 使用文字作为背景裁剪区域 */
	-webkit-text-fill-color: transparent; /* 文字颜色透明，以显示背景图 */
}

.commentlist {
	clear: both;
}

/* 评论人名字样式 */
.name {
  font-size: 14px;
  color: #fb984b; /* 设置文字颜色 */
  font-weight: 500; /* 设置字体粗细 */
  line-height: 1;
  border-right: 1px solid #d8d8d8; /* 设置右边框 */
  margin-right: 10px; /* 设置右边距 */
  padding-right: 10px; /* 设置右内边距 */
}

.name a{
  color: #fb984b; /* 设置链接文字颜色 */
}

.name a:hover{
  color: #d05e05; /* 设置鼠标悬停链接文字颜色 */
}

/* 评论列表中的单个评论样式 */
.commentlist .comment {
	clear: both;
	margin: 25px 0;
	margin-left: 76px;
	position: relative;
	margin-bottom: 20px;
	padding: 8px 15px 2px 15px;
  border-radius: 5px; /* 设置边框圆角 */
  border: 1px solid #fedcc2; /* 设置边框样式 */
	box-shadow: 1px 1px 2px 1px #fff5ee; /* 添加阴影效果 */
}

/* 评论列表中的评论人头像样式 */
.commentlist .comment .comment-avatar {
	position: absolute;
	left: -65px; /* 调整位置到评论左侧 */
}

.commentlist .comment .comment-avatar .avatar {
	border-radius: 25px; /* 设置头像圆角 */
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	width: 50px; /* 设置头像宽度 */
	height: 50px; /* 设置头像高度 */
	box-shadow: 1px 1px 2px 1px gray; /* 添加头像阴影效果 */
}

/* 按钮边框颜色为红色，文字颜色也为红色 */
.btn-outline-danger {
  color: #fa862b !important;
  border-color: #fa862b !important;
}

/* 鼠标悬停时按钮背景颜色变为橙色，文字颜色变为白色 */
.btn-outline-danger:hover{
	background-color:#fb984b !important;
	color:#fff!important;
}

/* 评论列表中的评论作者位置相对 */
.commentlist .comment .comment_author {
	position: relative;
}

/* 评论文本样式，设置内边距和颜色 */
.commentlist .comment .comment-text {
	padding: 10px 0;
	color: #282828;
}

/* 评论回复链接样式 */
.commentlist .comment .comment_reply {
	display: block;
	text-align: right;
	margin: 0;
	font-size: 12px;
	color: #757e91;
}

/* 评论中的强调文本样式 */
.commentlist em {
  margin-left:-3px;
  color: #fcac6e;
  font-size: 12px;
  font-style: normal;
}

/* 段落文本样式 */
.commentlist p {
  color: #757e91;
  font-size: 14px;
  line-height: 1.6;
	margin-bottom: 0;
}

/* 列表文本样式，设置行高和居中对齐 */
.list-text{
	line-height: 2.2;
	text-align: center;
}

/* 大号数字文本样式 */
.bigfontNum{
	font-size: 2rem;
}

/* 首页板块卡片样式，设置底部外边距 */
.indexPlate .card{
	margin-bottom: 1rem;
}

/**
 *               ii.                                         ;9ABH,          
 *              SA391,                                    .r9GG35&G          
 *              &#ii13Gh;                               i3X31i;:,rB1         
 *              iMs,:,i5895,                         .5G91:,:;:s1:8A         
 *               33::::,,;5G5,                     ,58Si,,:::,sHX;iH1        
 *                Sr.,:;rs13BBX35hh11511h5Shhh5S3GAXS:.,,::,,1AG3i,GG        
 *                .G51S511sr;;iiiishS8G89Shsrrsh59S;.,,,,,..5A85Si,h8        
 *               :SB9s:,............................,,,.,,,SASh53h,1G.       
 *            .r18S;..,,,,,,,,,,,,,,,,,,,,,,,,,,,,,....,,.1H315199,rX,       
 *          ;S89s,..,,,,,,,,,,,,,,,,,,,,,,,....,,.......,,,;r1ShS8,;Xi       
 *        i55s:.........,,,,,,,,,,,,,,,,.,,,......,.....,,....r9&5.:X1       
 *       59;.....,.     .,,,,,,,,,,,...        .............,..:1;.:&s       
 *      s8,..;53S5S3s.   .,,,,,,,.,..      i15S5h1:.........,,,..,,:99       
 *      93.:39s:rSGB@A;  ..,,,,.....    .SG3hhh9G&BGi..,,,,,,,,,,,,.,83      
 *      G5.G8  9#@@@@@X. .,,,,,,.....  iA9,.S&B###@@Mr...,,,,,,,,..,.;Xh     
 *      Gs.X8 S@@@@@@@B:..,,,,,,,,,,. rA1 ,A@@@@@@@@@H:........,,,,,,.iX:    
 *     ;9. ,8A#@@@@@@#5,.,,,,,,,,,... 9A. 8@@@@@@@@@@M;    ....,,,,,,,,S8    
 *     X3    iS8XAHH8s.,,,,,,,,,,...,..58hH@@@@@@@@@Hs       ...,,,,,,,:Gs   
 *    r8,        ,,,...,,,,,,,,,,.....  ,h8XABMMHX3r.          .,,,,,,,.rX:  
 *   :9, .    .:,..,:;;;::,.,,,,,..          .,,.               ..,,,,,,.59  
 *  .Si      ,:.i8HBMMMMMB&5,....                    .            .,,,,,.sMr
 *  SS       :: h@@@@@@@@@@#; .                     ...  .         ..,,,,iM5
 *  91  .    ;:.,1&@@@@@@MXs.                            .          .,,:,:&S
 *  hS ....  .:;,,,i3MMS1;..,..... .  .     ...                     ..,:,.99
 *  ,8; ..... .,:,..,8Ms:;,,,...                                     .,::.83
 *   s&: ....  .sS553B@@HX3s;,.    .,;13h.                            .:::&1
 *    SXr  .  ...;s3G99XA&X88Shss11155hi.                             ,;:h&,
 *     iH8:  . ..   ,;iiii;,::,,,,,.                                 .;irHA  
 *      ,8X5;   .     .......                                       ,;iihS8Gi
 *         1831,                                                 .,;irrrrrs&@
 *           ;5A8r.                                            .:;iiiiirrss1H
 *             :X@H3s.......                                .,:;iii;iiiiirsrh
 *              r#h:;,...,,.. .,,:;;;;;:::,...              .:;;;;;;iiiirrss1
 *             ,M8 ..,....,.....,,::::::,,...         .     .,;;;iiiiiirss11h
 *             8B;.,,,,,,,.,.....          .           ..   .:;;;;iirrsss111h
 *            i@5,:::,,,,,,,,.... .                   . .:::;;;;;irrrss111111
 *            9Bi,:,,,,......                        ..r91;;;;;iirrsss1ss1111
 */

/* 响应式设计，根据屏幕宽度调整元素样式 */
@media screen and (max-width: 600px){
	/* 调整头像图片样式 */
	.avatar-img {
		height: 64px;
		width: 64px;
		object-fit: cover;
		border: rgba(255, 255, 255, .4) 2px solid;
	}
	/* 调整爱人容器样式 */
	.lover-container {
		max-width: 500px !important;
		width: 500px;
		height: 35vh;
	}
	/* 调整波浪图案高度 */
	.waves-area .waves-svg {
		width: 100%;
		height: 3rem;
	}
	/* 调整大号数字文本大小 */
	.bigfontNum{
		font-size: 1.5rem;
	}
	/* 调整列表内容样式 */
	.list-content {
		max-width: 650px;
		width: 90%;
	}
}

/* 文章中的图片样式，确保图片宽度不超过容器 */
#article img{
	max-width: 100%;
}

/* 进度条样式，使点击事件穿透 */
#nprogress {
	pointer-events: none;
}

/* 进度条背景样式 */
#nprogress .bar {
	background: #29d;
	position: fixed;
	z-index: 1031;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
}

/* 进度条旋转效果 */
#nprogress .peg {
	display: block;
	position: absolute;
	right: 0px;
	width: 100px;
	height: 100%;
	box-shadow: 0 0 10px #29d, 0 0 5px #29d;
	opacity: 1.0;
	-webkit-transform: rotate(3deg) translate(0px, -4px);
		-ms-transform: rotate(3deg) translate(0px, -4px);
			transform: rotate(3deg) translate(0px, -4px);
}

/* 移除加载进度图标 */
#nprogress .spinner {
	display: block;
	position: fixed;
	z-index: 1031;
	top: 15px;
	right: 15px;
}

/* 加载进度图标样式 */
#nprogress .spinner-icon {
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	border: solid 2px transparent;
	border-top-color: #29d;
	border-left-color: #29d;
	border-radius: 50%;
	-webkit-animation: nprogress-spinner 400ms linear infinite;
			animation: nprogress-spinner 400ms linear infinite;
}

/* 自定义进度条父元素样式 */
.nprogress-custom-parent {
	overflow: hidden;
	position: relative;
}

/* 自定义进度条样式 */
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
	position: absolute;
}

/* 进度条旋转动画关键帧（Webkit浏览器兼容） */
@-webkit-keyframes nprogress-spinner {
	0%   { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}

/* 进度条旋转动画关键帧 */
@keyframes nprogress-spinner {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* 视频容器样式 */
.iframe_video {
  position: relative;
  width: 100%;
}

/* 响应式设计，根据屏幕宽度调整视频容器高度 */
@media only screen and (max-width: 767px) {
  .iframe_video {
      height: 15em;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .iframe_video {
      height: 20em;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .iframe_video {
      height: 30em;
  }
}

@media only screen and (min-width: 1200px) {
  .iframe_video {
      height: 40em;
  }
}

/* 翻页导航样式 */
.page-navigator {
  display: inline-block;
  padding-left: 25px;
  margin-bottom: 30px;
  border-radius: 4px;
}

/* 翻页导航项样式 */
.page-navigator>li {
  display: inline;
	margin:0 10px;
}

.page-navigator>li a{
	position:relative;
	float:left;
	font-size: 12px;
	padding:7px 15px;
	margin-left:6px;
	margin-top:10px;
	line-height:1.4;
	color:#973444;
	text-decoration:none;
	border-radius:4px;
	background-color:#fff;
	border:1px solid #EBB3BC;
	box-shadow:1px 1px 2px 1px rgb(112 12 122 /10%);
	font-weight:500;
}

/* 当前翻页导航项样式 */
.page-navigator>.current>a,
.page-navigator>.current>a:focus,
.page-navigator>.current>a:hover,
.page-navigator>.current>span,
.page-navigator>.current>span:focus,
.page-navigator>.current>span:hover{
	z-index:3;
	color:#973444;
	margin-top:10px;
	box-shadow: inset 1px 1px 3px 1px rgba(112,12,122,.2);
	border-radius:4px;
	cursor:default;
	background-color:#fff;
}

/* 表情图片样式 */
img.biaoqing.quyin {
    margin-bottom: -.3125rem;
    min-height: 3.25rem;
    height: 1em;
}

/* 指定时光机图片大小 */
.emotion-quyin {
    width: 66px;
}

/* 评论文本中的图片大小 */
.comment-text img{
    width:150px;
}

/* 高亮JS代码 */
var toR;
// 创建一个CSS元素以包含所有颜色样式
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `.pink{
	color: #FF237A;
	display: inline-block;
}
.purple{
	color: #AE60F6;
	display: inline-block;
}
.blueItal{
	color: #6DC5FB;
	display: inline-block;
	font-style: italic;
}
.blue{
	color: #6DC5FB;
	display: inline-block;
}
.green{
	color: #A6E06C;
	display: inline-block;
}
.yellow{
	color: #F3E688;
	display: inline-block;
}
.grey{
	color: #B0B0B0;
	display: inline-block;
}
.code{
	font-size: 14px;
	color: white;
	background: #363838;
}

/* 不要更改这些内容 */
div{
	margin: 0;
}
.code{
	padding: 5px;
	display: block;
}
`;
/**
 * 
 *           _.._        ,------------.
 *        ,'      `.    ( We want you! )
 *       /  __) __` \    `-,----------'
 *      (  (`-`(-')  ) _.-'
 *      /)  \  = /  (
 *     /'    |--' .  \
 *    (  ,---|  `-.)__`
 *     )(  `-.,--'   _`-.
 *    '/,'          (  Uu",
 *     (_       ,    `/,-' )
 *     `.__,  : `-'/  /`--'
 *       |     `--'  |
 *       `   `-._   /
 *        \        (
 *        /\ .      \.  freebuf
 *       / |` \     ,-\
 *      /  \| .)   /   \
 *     ( ,'|\    ,'     :
 *     | \,`.`--"/      }
 *     `,'    \  |,'    /
 *    / "-._   `-/      |
 *    "-.   "-.,'|     ;
 *   /        _/["---'""]
 *  :        /  |"-     '
 *  '           |      /
 *              `      |
 */