.a_container{
  display: flex;
  justify-content: center;
  flex-direction: row;

}

.article{
  width: 60%;
  padding: 20px;
  margin: 10px;
  border-style: dashed;
  border-color: #2a2a2a;
}

.article p {
  font-size: 16px;
  line-height: 1.6; /* 行间距 */
  margin-bottom: 1.2em; /* 段间距 */
}

.article img {
  max-width: 80%;   /* 图片不会超过容器宽度 */
  height: auto;      /* 保持宽高比 */
  display: block;    /* 去掉底部空隙，常见优化 */
  margin: 1em auto;  /* 上下留白，并居中 */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}


.info{
  padding: 10px;
  /*border-color: #e5e5e5;
  border-style: dashed;*/
  display: inline-flex;
  flex-direction: column;
  width: 350px;

}

.info .textinfo{
  background-color: #2A2A2A;
  padding: 10px;
  margin-bottom: 40px;
}
.info .toc{


  padding: 10px;
  max-height: 600px;
  position: sticky;
  top: 80px;

}

.info .toc ol{
  background-color: #2A2A2A;
  list-style: none;
  overflow: auto;

}
#sumtoc{
  font-size: 20px;
}

.tgs{
  margin: 10px;
  margin-left: 0;
}

#tgs{
  background-color: rgb(96, 165, 250,0.2);
  color: #3B82F6;
  margin-right: 5px;
  border-radius: 10px;
  padding: 2px;
}
#tgs:hover{
  background-color: rgb(96, 165, 250,0.4);
}

.article table{
  width: 80%;
  border-collapse: collapse;
  color: #e0e0e0;
  background-color: #1e1e1e; /* 表格整体背景 */
  margin: 1em auto;
  display: block;
  overflow-x: auto;
  box-shadow: 0 4px 6px rgba(0,0,0,0.6), /* 下方阴影 */
              0 0 0 1px rgba(255,255,255,0.05); /* 微边框增强立体感 */
}
.article th,.article td{
  padding: 10px 15px;
  border: 1px solid #333; /* 深色边框 */
  text-align: left;
}
.article th{
  background-color: #2c2c2c; /* 表头深色 */
  color: #ffffff;
  font-weight: 600;
}
.article tr:nth-child(even) {
  background-color: #242424; /* 偶数行稍浅 */
}



/* 暗色调 code 样式 */
.article code {
  background-color: #2c2c2c; /* 背景深色 */
  color: #e0e0e0;           /* 字体浅色 */
  font-family: "Fira Code", "Consolas", "Courier New", monospace; /* 等宽字体 */
  font-size: 0.95em;        /* 略小字体 */
  padding: 2px 6px;         /* 内边距 */
  border-radius: 4px;       /* 圆角 */
  white-space: pre;         /* 保持空格和换行 */
  overflow-x: auto;         /* 超长代码水平滚动 */
  display: inline;    /* 避免块级换行 */
}


/* 代码块整体 */


figure.highlight {
  margin: 1rem 0;
  border-radius: 8px;
  overflow: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 80%;
  margin: 1em auto;  /* 上下留白，并居中 */


}

.highlight, pre {
  position: relative;
}

.highlight table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  background:#1e1e1e;

}

.highlight td.code {
  width: 100%;
  padding: 10px;
}

.highlight .gutter {
  width: 40px;
  padding: 4px;
  text-align: center;
  border-right: 1px solid #444;
  pre {
    color: #7b7b7b;
  }
}

.highlight pre {
  margin: 0;
  padding: 0;
  overflow: auto;

  font-size: 14px !important;
  line-height: 1.6 !important;
}

.highlight code {
  white-space: pre;
  word-wrap: break-word;
  font-family: "Fira Code", "JetBrains Mono", Consolas, monospace !important;
  background-color: #0f111b;
}



.article strong{
  font-weight: 700;              /* 加粗 */
  color: #f0f0f0;                /* 强调色，金黄色，适合暗色背景 */
  /*background-color: rgba(255, 255, 255, 0.15);  可选：浅色背景高亮 */
  padding: 0 2px;                /* 内边距，让文字更突出 */
  border-radius: 2px;            /* 圆角，视觉柔和 */
}


.article h2{
  margin: 2em auto;
  color: #ddd;
  padding-bottom: 5px;

  border-bottom: 1px solid #ddd;
  border-bottom-style: dashed;
  text-align: center;
  font-size: 1.5rem;

}

.article h3{
  background-color: #1e1e1e;           /* 深色背景，暗色主题 */
  color: #ddd;                      /* 文字颜色 */
  padding: 20px;                        /* 内边距 */
  border-radius: 8px;                   /* 圆角 */
  box-shadow: 0 4px 6px rgba(0,0,0,0.6), /* 下方阴影 */
              0 0 0 1px rgba(255,255,255,0.05); /* 微边框增强立体感 */
}

.article hr{
  height: 4px;              /* 控制粗细 */
  border: none;             /* 移除默认边框 */
  background-color: #444;   /* 颜色 */
  border-radius: 2px;       /* 圆角，让线条更柔和 */
}

/* 折叠样式 */

.collapsible-content {
  display: block; /* 默认展开 */
  margin-left: 1em;
}
.collapsible-title {
  cursor: pointer;
  user-select: none;
}
.collapsible-title::before {
  content: "O_o "; /* 默认展开箭头 */
  color: rgba(255, 255, 255, 0.3);
  transition: transform 0.2s;
}

.collapsible-title.collapsed::before {
  content: ">_< "; /* 折叠状态箭头 */
  color: rgba(255, 255, 255, 0.3);
}

#reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(to right, #666666, #d8d8d8);
    z-index: 9999;
    transition: width 0.1s;
}