/* ===== 注释阅读说明 =====
   这份 CSS 的注释采用“维护型”写法，重点不是逐行翻译属性，
   而是帮你快速理解下面三件事：

   1. 这一段样式控制的是页面哪个区域
   2. 如果以后想改观感，优先应该改哪些属性
   3. 改动后大致会影响什么视觉结果

   建议的阅读方式：
   - 想改整体气质：优先看“全局基础样式”“页面骨架与顶部导航”
   - 想改阅读体验：优先看“文章正文与首屏视觉区”“代码块、文章信息条与增强功能”
   - 想改移动端：直接搜索 `@media only screen`
   - 想排查最近修过的问题：搜索 `art-dialog`、`dayNightSwitch`、`#cnblogs_post_body img`

   说明边界：
   - 大部分注释是“为什么这样写、后续从哪里下手改”
   - 不会把每一个 CSS 属性都重复解释一遍
   - 个别历史规则较多的区域，注释会更偏“先告诉你应该改哪”，方便维护 */
/* ===== 全局基础样式 =====
   负责全站通用的排版基线、颜色、按钮、链接、滚动条和选中文本效果。
   这一段相当于整个主题的“底座”，很多后续模块都会继承这里的设置。
*/
.article-info-tag,button {
  text-transform:uppercase
}

.day,.postMeta,.postSticky {
  position:relative
}

.postTitle a:link,html {
  -webkit-tap-highlight-color:transparent
}

#blog-calendar,.code-copay-btn,.code-hljs-len,.hidden {
  visibility:hidden
}

#EntryTag,#blogTitle h1 {
  margin-top:20px
}

#EntryTag a,.postSticky {
  background:#6fa3ef
}

#blogTitle h1 a:hover,.dayTitle a,a,a:active,a:link,a:visited {
  color:#5c8ec6
}

#calendar table a:hover,#navList a:hover,.postDesc a:hover,a:active,a:hover,a:link,a:visited,button {
  text-decoration:none
}

#mainContent,#sideBar,#topics {
  -o-text-overflow:ellipsis;
  text-overflow:ellipsis;
  overflow:hidden
}

*,.Cal {
  padding:0
}

::-moz-selection {
  color:#FFF;
  background:#807dd4
}

::selection {
  background:#807dd4;
  color:#FFF
}

::-webkit-selection {
  background:#807dd4;
  color:#FFF
}

::-webkit-scrollbar {
  width:3px;
  height:3px
}

::-webkit-scrollbar-track {
  width:3px;
  background-color:#f9f9f9
}

::-webkit-scrollbar-thumb {
  background-color:#999;
  background-clip:padding-box;
  min-height:100px
}

::-webkit-scrollbar-thumb:hover {
  background-color:#555
}

#BlogPostCategory a {
  background:#E8A258
}

#BlogPostCategory a span,#EntryTag a span {
  margin-right:3px
}

.topicListFooter {
  text-align:right;
  margin-right:10px;
  margin-top:10px
}

#navList a,.dayTitle,button {
  text-align:center
}

#home,.inner {
  margin:0 auto
}

#divRefreshComments {
  margin-right:10px;
  font-size:9pt
}

* {
  margin:0
}

/* html:
   设置根字号为 62.5%，这样 1rem 约等于 10px，后面用 rem 更容易心算。
   如果你想整体放大或缩小主题字号，可以优先改这里。
*/
html {
  height:100%;
  font-size:62.5%
}

/* body:
   定义整站默认背景色、正文字号、字体栈和默认文字颜色。
   `overflow:hidden` 会隐藏页面级滚动条，通常配合主题自己的滚动容器使用。
   如果页面出现无法滚动的问题，这里是首要排查点。
*/
body {
  background-color:#fff;
  font-size:12px;
  font-family:Merriweather,"Open Sans","Microsoft Jhenghei","Microsoft Yahei",sans-serif;
  color:#3A4145;
  -moz-font-feature-settings:'kern' 1;
  -o-font-feature-settings:'kern' 1;
  overflow:hidden
}

table {
  border-collapse:collapse;
  border-spacing:0
}

fieldset,img {
  border:0
}

li {
  list-style:none
}

img {
  max-width:none
}

a {
  outline:0
}

/* 全站链接悬停颜色：
   鼠标放上去后统一改成橙色，作为主交互反馈色。
   如果想让主题更克制，可以把这里改成与正文更接近的颜色。
*/
a:hover {
  color:#f60
}

.clear {
  clear:both
}

/* button:
   这是全站按钮的通用外观定义，很多提交按钮、功能按钮都会继承这里。
   常改项：
   1. `background` 控制按钮主色
   2. `border-radius` 控制圆角
   3. `padding` 控制按钮尺寸
*/
button {
  width:auto;
  display:inline-block;
  padding:.1rem 1.5rem;
  cursor:pointer;
  outline:0;
  color:#fff;
  font-family:'Open Sans',sans-serif;
  font-size:11px;
  line-height:13px;
  font-weight:300;
  letter-spacing:1px;
  text-shadow:none;
  border-radius:.3rem;
  border:.1em solid rgba(0,0,0,.05);
  background:#5ba4e5
}

#topics .postTitle a:link,.page-title,.sb-title {
  text-shadow:0 3px 6px rgba(0,0,0,.3)
}

b {
  font-weight:400
}

/* ===== 页面骨架与顶部导航 =====
   控制博客主体宽度、页头、博客标题、导航栏、主内容区等整体布局结构。
*/
/* #home:
   博客主体内容容器，相当于整个页面的主卡片。
   `width` 和 `max-width` 控制版心宽度；
   `background-color` 和 `box-shadow` 决定卡片感是否明显。
*/
#home {
  width:70%;
  max-width:900px;
  background-color:rgba(255,255,255,.9);
  padding:0 20px 30px;
  box-shadow:0 0 20px 10px rgba(220,220,220,.3)
}

/* #header:
   页头容器，主要负责给博客标题区预留上下留白。
   如果你觉得标题区太挤或太松，可以先改这里的外边距/内边距。
*/
#header {
  padding-bottom:5px;
  margin-top:10px
}

/* #blogTitle:
   页头中的博客标题区域，包含博客名、副标题和 Logo。
   如果你想让标题区更高、更有呼吸感，可以从这里开始改高度和间距。
*/
#blogTitle {
  height:60px;
  clear:both
}

/* `#blogTitle h1`:
   博客主标题字号和粗细。
   这里适合改博客名的“存在感”，数值越大越像品牌抬头。
*/
#blogTitle h1 {
  font-size:26px;
  font-weight:700;
  line-height:1.5em
}

#blogTitle h1 a {
  color:#515151
}

/* `#blogTitle h2`:
   博客副标题/简介。
   颜色和字号都刻意更弱，用来衬托主标题而不是抢焦点。
*/
#blogTitle h2 {
  font-weight:400;
  font-size:13px;
  line-height:1.846153846;
  color:#757575;
  float:left
}

#blogLogo {
  float:right
}

/* #navigator:
   顶部导航栏容器，负责“首页 / 联系 / 归档”等导航入口的横向排布。
   `height` 决定导航条厚度，边框用于和正文区做视觉分隔。
*/
#navigator {
  font-size:13px;
  border-bottom:1px solid #ededed;
  border-top:1px solid #ededed;
  height:50px;
  clear:both;
  margin-top:25px
}

#bannerbar {
  display:none
}

#blog-calendar td,#blog-calendar th,.Cal,.btn_my_zzk,.dayTitle {
  font-size:12px
}

/* #navList:
   实际承载导航链接的列表容器。
   这里配合 `li` 和 `a` 的浮动设置，实现经典横向导航菜单。
*/
#navList {
  min-height:30px;
  float:left
}

/* `#navList li`:
   单个导航项的外层列表项。
   主要通过右边距控制导航项之间的间隔。
*/
#navList li {
  float:left;
  margin:0 40px 0 0
}

/* `#navList a`:
   单个导航链接的点击区域。
   `width` 和 `height` 决定可点击面积，`padding-top` 决定文字垂直位置。
*/
#navList a {
  display:block;
  width:5em;
  height:22px;
  float:left;
  padding-top:19px
}

#navList a:active,#navList a:link,#navList a:visited {
  color:#6a6a6a;
  font-weight:700
}

#navList a:hover {
  color:#000
}

/* `.blogStats`:
   顶部右侧博客统计信息，例如随笔数、评论数、阅读量。
   当前设计成弱化的灰色信息，避免压过导航本身。
*/
.blogStats {
  float:right;
  color:#757575;
  margin-top:19px;
  margin-right:2px;
  text-align:right
}

/* #main:
   页面主内容区的最外层容器。
   `margin-top` 控制导航和正文之间的垂直距离。
*/
#main {
  margin-top:30px;
  width:100%;
  text-align:left
}

#mainContent .forFlow {
  float:none;
  width:auto
}

/* `#mainContent`:
   主页正文流区域。
   当你想调整正文和侧边栏的整体呼吸感时，这里是关键控制点之一。
*/
#mainContent {
  min-height:200px;
  padding:0 0 10px;
  float:none;
  margin:auto;
  width:100%
}

.day,.entrylistItem:not(:last-of-type) {
  min-height:10px;
  border-bottom:#e9e9e9 1px solid
}

.day:after,.entrylistItem:not(:last-of-type):after {
  content:"";
  width:7px;
  height:7px;
  bottom:-5px;
  left:50%
}

/* .day:
   博客园首页单篇文章卡片的容器。
   下边框和伪元素圆点一起组成时间轴式的文章列表视觉。
*/
.day {
  margin:3.5rem auto;
  padding-bottom:3.3rem;
  word-wrap:break-word
}

.btn_my_zzk,.c_b_p_desc_img,.day:after,.dayTitle {
  position:absolute
}

/* `.c_b_p_desc_readmore`:
   摘要卡片里的“阅读全文”按钮样式。
   它用下边线代替传统按钮边框，风格会更轻一点。
*/
.c_b_p_desc_readmore {
  display:block;
  background:0 0;
  border:0;
  border-bottom:2px solid #666;
  font-size:16px;
  padding:0;
  transition-property:border;
  font-weight:600;
  width:85px;
  text-align:center;
  color:#555!important;
  margin-top:20px
}

.day:after {
  display:block;
  border:1px solid #e9e9e9;
  margin-left:-5px;
  background:#FFF;
  border-radius:100%;
  box-shadow:rgba(255,255,255,.7) 0 0 0 5px
}

/* `.dayTitle`:
   时间轴风格列表中原本可显示日期的小圆标。
   当前 `display:none` 已隐藏；如果你想恢复时间轴日期感，可以从这里重新启用。
*/
.dayTitle {
  display:none;
  border:1px solid #5c8ec6;
  background:azure;
  border-radius:50%;
  height:65px;
  line-height:1.5;
  margin:15px 15px 15px -100px;
  width:63px;
  clear:both;
  top:-15px
}

.dayTitle a {
  display:inline-block;
  margin-top:15px;
  width:60px
}

.desc_img {
  display:none
}

/* `.c_b_p_desc_img`:
   列表摘要右侧配图容器。
   通过绝对定位贴在文章摘要右边，适合做图文混排卡片。
*/
.c_b_p_desc_img {
  width:calc(39% - 20px);
  height:100%;
  opacity:.9;
  top:-5px;
  border-left:1px dashed #e9e9e9;
  right:0;
  padding-left:13px;
  overflow:hidden
}

.c_b_p_desc_img div {
  border-radius:4px;
  width:100%;
  height:100%;
  margin:0;
  opacity:.95
}

.postCon,.postDesc,.postSeparator,.postTitle {
  width:100%;
  clear:both
}

/* .postTitle:
   文章标题本体，控制单篇文章标题的字号、宽度和浮动方式。
   标题链接具体字体和交互色在 `.postTitle a:*` 里定义。
*/
.postTitle {
  font-size:20px;
  float:right
}

.postTitle a:active,.postTitle a:visited {
  color:#4A4A4A;
  transition:color .3s ease
}

.postTitle a:link {
  background-color:rgba(0,0,0,0);
  color:#4a4a4a;
  font-family:"Open Sans","Microsoft Jhenghei","Microsoft Yahei",sans-serif;
  font-size:3.1rem;
  font-weight:700;
  letter-spacing:-1px;
  transition-delay:0s;
  transition-duration:.3s;
  transition-property:color;
  transition-timing-function:ease;
  word-wrap:break-word
}

.postTitle a:hover {
  color:#000
}

/* `.entrylistPostSummary, .postCon`:
   文章摘要与正文区的基础文字排版。
   这里统一控制段落行高、字体、字色和对齐方式，是阅读体验核心设置之一。
*/
.entrylistPostSummary,.postCon {
  font-feature-settings:'liga' 1,'onum' 1,'kern' 1;
  line-height:1.7em;
  word-wrap:break-word;
  padding:25px 0 10px;
  color:#3a4145;
  font-family:Noto Sans SC,serif;
  margin:0;
  text-align:justify;
  font-size:1.45em;
  display:block;
  position:relative;
  -webkit-margin-before:0;
  -webkit-margin-after:0;
  -webkit-margin-start:0;
  -webkit-margin-end:0
}

/* `.postMeta`:
   文章元信息，如日期、阅读数、评论数。
   通常作为标题下方的次级信息，所以颜色和字号都更低调。
*/
.postMeta {
  font-size:14px;
  color:#888;
  top:10px;
  display:inline-block
}

.postDesc,p.article-info-text>.postMeta br {
  display:none
}

.postMeta>i {
  font-size:15px;
  margin:0 5px
}

.postMeta>i:not(:first-child) {
  margin-left:10px
}

/* `.postDesc`:
   文章描述/辅助说明区域。
   常用于承载发布时间、分类信息等简短元数据。
*/
.postDesc {
  float:left;
  text-align:left;
  padding-right:5px;
  margin:0;
  font-family:"Open Sans",sans-serif;
  font-size:1.4rem;
  line-height:2.2rem;
  color:#9EABB3
}

#blog-calendar td,#sb_widget_my_zzk,.CalTitle {
  text-align:center
}

#cnblogs_post_body h1:hover::after,#cnblogs_post_body h2:hover::after,#cnblogs_post_body h3:hover::after,#cnblogs_post_body h4:hover::after,#cnblogs_post_body h5:hover::after {
  content:"#";
  color:rgba(13,110,253,.5);
  margin-left:5px;
  transition:color .15s ease-in-out
}

p.article-info-text>.postMeta {
  font-size:16px;
  font-weight:700;
  color:rgba(255,255,255,.9);
  font-family:Noto Sans SC,serif;
  text-shadow:0 3px 6px rgba(0,0,0,.5)
}

#blog-calendar td,#calendar td {
  font-family:"Comic Sans MS"
}

p.article-info-text>.postMeta i {
  font-size:16px
}

.postDesc a:active,.postDesc a:link,.postDesc a:visited {
  color:#666
}

.postDesc a:hover {
  color:#5c8ec6
}

/* `.postSticky`:
   置顶标识小标签。
   背景色和小圆角让它像一枚状态徽章，适合强调“置顶/推荐”等状态。
*/
.postSticky {
  display:inline-block;
  font-size:14px;
  color:#fff;
  padding:1px 3px;
  border-radius:3px;
  top:-6px
}

.postSeparator {
  height:1px;
  float:right;
  margin:0 auto 15px
}

/* ===== 侧边栏与日历模块 =====
   负责右侧边栏、小部件容器、搜索框和日历组件的展示与交互反馈。
*/
/* #sideBar:
   右侧边栏主容器，承载公告、日历、分类、标签、搜索等模块。
   `width` 决定侧边栏宽度，改它时通常要一起检查主内容区是否拥挤。
*/
#sideBar {
  margin-top:-15px;
  width:230px;
  padding:0 0 0 5px;
  float:right
}

#sideBar a {
  color:#757575
}

#sideBar a:hover {
  color:#5c8ec6;
  text-decoration:underline
}

/* `#sb_widget_my_zzk`:
   侧边栏搜索组件容器。
   如果你想单独给搜索块加边框、背景或留白，这里很适合下手。
*/
#sb_widget_my_zzk {
  width:100%
}

/* `.btn_my_zzk`:
   侧边栏搜索按钮。
   目前把文字隐藏掉了，更偏向图标式按钮。
*/
.btn_my_zzk {
  width:25px;
  height:25px;
  color:transparent;
  border:0;
  cursor:pointer;
  top:1px;
  right:-35px
}

.input_my_zzk:focus,.input_my_zzk:hover {
  border:1px solid #666
}

.input_my_zzk:hover {
  transition:all .4s linear 0s
}

/* 这一组 `.catList* / .newsItem / .mySearch`:
   代表侧边栏里的各种小部件卡片，例如分类、标签、归档、新闻、搜索等。
   统一设置背景和底部间距，能让侧边栏视觉更整齐。
*/
.catList,.catListArticleArchive,.catListArticleCategory,.catListBlogRank,.catListComment,.catListEssay,.catListFeedback,.catListImageCategory,.catListLink,.catListNoteBook,.catListPostArchive,.catListPostCategory,.catListTag,.catListView,.mySearch,.newsItem {
  background:#fff;
  margin-bottom:35px;
  word-wrap:break-word
}

#blog-calendar {
  margin:10px 5px 5px 10px
}

/* #calendar:
   侧边栏日历外层盒子。
   `border` 和 `box-shadow` 决定是否像一张独立小卡片；
   如果你不想显示日历，可以直接将相关块隐藏。
*/
#calendar {
  width:228px;
  padding-bottom:5px;
  margin-bottom:35px;
  border:1px solid #EDEDED;
  box-shadow:0 1px 3px #ccc
}

.calendar {
  border:0 solid #000
}

/* `#calendar .Cal`:
   日历表格本体。
   行高越大，整个日历看起来越舒展；越小则更紧凑。
*/
#calendar .Cal {
  width:100%;
  line-height:1.5em
}

#calendar td {
  background:#FFF;
  padding-top:2px
}

.Cal {
  border:none;
  color:#666;
  width:100%;
  font-family:arial
}

.CalOtherMonthDay,.CalWeekendDay {
  padding-top:4px;
  padding-bottom:4px
}

#calendar table a:active,#calendar table a:link,#calendar table a:visited {
  font-weight:700
}

#calendar table a:hover {
  color:#fff
}

/* `.CalTodayDay`:
   日历中“今天”的高亮样式。
   这是定位当前日期最直观的视觉提示，改这里可以改变强调强度。
*/
.CalTodayDay {
  color:#b8b8b8;
  font-weight:700;
  background:#2d2d2b
}

.CalDayHeader,.CalWeekendDay {
  background:#111
}

.CalOtherMonthDay {
  color:#3c3c3c
}

#calendar .CalNextPrev a:active,#calendar .CalNextPrev a:link,#calendar .CalNextPrev a:visited {
  font-weight:700;
  padding-left:10px;
  padding-right:15px
}

.CalDayHeader {
  font-weight:700;
  padding-bottom:5px;
  padding-top:5px
}

/* `.CalTitle`:
   日历顶部标题栏，通常显示年月。
   是日历模块最像“卡片标题”的一层。
*/
.CalTitle {
  background:#6293bb;
  width:100%;
  height:30px;
  font-size:14px;
  font-weight:700;
  padding:5px 0
}

.CalTitle td {
  background:#000;
  font-family:verdana;
  font-size:12px;
  font-weight:700
}

.Cal td {
  height:20px;
  font-size:10px
}

.Cal a:active,.Cal a:link,.Cal a:visited {
  color:#ff9;
  text-decoration:underline
}

.Cal a:hover {
  text-decoration:none
}

.CalSelector {
  background:#efefef
}

/* `.catListTitle`:
   侧边栏各模块标题，例如“分类”“标签”“随笔档案”。
   如果你想让侧边栏更有层级感，优先调整这里。
*/
.catListTitle {
  font-weight:700;
  line-height:1.2;
  font-size:110%;
  margin-top:15px;
  margin-bottom:10px;
  text-align:left
}

#sideBarMain ul,.catListComment,.page-description,.pfl_feedback_area_title {
  line-height:1.5em
}

/* `.divRecentComment`:
   最近评论预览文本。
   使用首行缩进模拟“摘录”感，让评论内容更像摘要。
*/
.divRecentComment {
  text-indent:2em;
  color:#494949;
  margin-bottom:20px
}

#sideBarMain li {
  line-height:1.8
}

/* #topics:
   文章详情页正文区域外层容器。
   和首页的 `.day` 不同，这里主要服务于“单篇文章页”的版式。
*/
#topics {
  width:100%;
  min-height:200px;
  padding:0 0 10px;
  margin:15px auto 4rem;
  font-family:-apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif
}

/* `#topics .postTitle`:
   单篇文章页中的标题样式。
   与首页列表标题相比，这里更偏正文标题，不需要右浮动布局。
*/
#topics .postTitle {
  border:0;
  font-size:130%;
  font-weight:700;
  line-height:1.5;
  width:100%;
  padding-left:5px
}

#BlogPostCategory,#BlogPostCategory a:active,#BlogPostCategory a:link,#BlogPostCategory a:visited,#EntryTag,#EntryTag a:active,#EntryTag a:link,#EntryTag a:visited {
  color:#666
}

/* `#BlogPostCategory a, #EntryTag a`:
   正文页分类和标签的胶囊按钮。
   通过统一高度和圆角让标签视觉保持一致。
*/
#BlogPostCategory a,#EntryTag a {
  height:20px;
  line-height:20px;
  color:#fff!important;
  padding:3px 5px;
  border-radius:3px;
  margin:2px 5px 0;
  text-decoration:none;
  font-size:14px
}

#BlogPostCategory a:hover,#EntryTag a:hover {
  transition:all .3s linear 0s;
  opacity:.8
}

#topics .postDesc {
  padding-left:0;
  width:100%;
  text-align:left;
  color:#666;
  margin-top:5px;
  background:0 0
}

/* ===== 列表信息、评论区与表单 =====
   这一段主要覆盖文章列表的附加信息、评论时间线、评论输入框和提交按钮。
*/
.feedbackListSubtitle-louzhu:after,.feedbackListSubtitle:after,.feedbackListSubtitle:before {
  top:11px;
  right:100%;
  left:-16px;
  width:0;
  height:0;
  content:" ";
  border-style:solid solid outset;
  position:absolute;
  display:block;
  pointer-events:none
}

/* .feedback_area_title:
   评论区标题，例如“评论列表”“发表评论”这一类标题样式。
   如果你想统一标题风格，评论区、归档页和列表页标题都可以参考这里。
*/
.feedback_area_title {
  font:normal normal 16px/35px "Microsoft YaHei";
  margin:10px 0 30px
}

.louzhu {
  margin:0 2px
}

.feedbackListSubtitle a:active,.feedbackListSubtitle a:link,.feedbackListSubtitle a:visited {
  color:#777;
  font-weight:700
}

.feedbackListSubtitle a:hover {
  color:#5c8ec6;
  text-decoration:underline
}

.feedbackListSubtitle b {
  color:#5c8ec6
}

/* `.feedbackListSubtitle:before / :after`:
   评论标题气泡左侧的小三角箭头。
   这是用边框拼出来的“对话框尖角”效果。
*/
.feedbackListSubtitle:before {
  border-color:transparent #d1d5da transparent transparent;
  border-width:8px
}

.feedbackListSubtitle-louzhu:after,.feedbackListSubtitle:after {
  border-color:transparent;
  margin-top:1px;
  margin-left:2px;
  border-width:7px
}

.feedbackListSubtitle:after {
  border-right-color:#f6f8fa
}

.feedbackListSubtitle-louzhu:after {
  border-right-color:#f1f8ff!important
}

.feedbackManage {
  width:200px;
  text-align:right;
  float:right
}

/* `.feedbackCon`:
   单条评论正文盒子。
   它和上面的标题条一起组成完整的评论卡片/气泡。
*/
.feedbackCon {
  padding:10px 20px;
  min-height:35px;
  line-height:1.5;
  border:1px solid #e9e9e9;
  border-top:0;
  border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
  background:#fff;
  position:relative
}

.feedbackListSubtitle-louzhu {
  background-color:#f1f8ff!important;
  border-bottom-color:#c0d3eb!important
}

/* `.feedbackItem`:
   单条评论的外层容器。
   左侧头像 + 中间竖线 + 右侧评论内容，构成时间线式评论布局。
*/
.feedbackItem {
  position:relative;
  padding:15px 0 15px 60px;
  margin:0;
  font-size:13px
}

/* `.feedbackItem:before`:
   评论时间线的竖线。
   删除这条线后，评论区会从“时间线风格”变成普通列表风格。
*/
.feedbackItem:before {
  position:absolute;
  top:0;
  bottom:0;
  left:90px;
  display:block;
  z-index:0;
  width:2px;
  content:"";
  background-color:#e1e4e8
}

.feedbackAvatar {
  position:absolute;
  left:1px
}

.feedbackAvatar img {
  width:40px;
  height:40px;
  border:1px solid #d1d5da;
  padding:2px;
  border-radius:3px
}

div#tbCommentBodyPreview {
  border:0
}

#divRefreshComments {
  text-align:right;
  margin-bottom:10px
}

.commenttb {
  padding:8px;
  margin-bottom:10px;
  color:#555;
  border:1px solid #ddd;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  width:320px
}

.commentTextBox:hover,.commenttb:hover {
  color:#333;
  border-color:rgba(82,168,236,.8);
  transition:all .4s linear 0s
}

.commenttb:hover {
  outline:0;
  -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,.075),0 0 4px rgba(82,168,236,.6);
  -moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,.075),0 0 4px rgba(82,168,236,.6);
  box-shadow:inset 1px 1px 1px rgba(0,0,0,.075),0 0 4px rgba(82,168,236,.6)
}

#Profile1_panelAdd input[type=text]:hover,#Profile1_txtContent:hover,.commentTextBox:hover {
  -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,.075),0 0 4px rgba(82,168,236,.6);
  -moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,.075),0 0 4px rgba(82,168,236,.6);
  outline:0;
  box-shadow:inset 1px 1px 1px rgba(0,0,0,.075),0 0 4px rgba(82,168,236,.6)
}

.commentTextBox {
  width:410px!important;
  margin-top:10px;
  margin-bottom:10px
}

/* `#AjaxHolder_PostComment_btnSubmit`:
   评论提交按钮。
   这里的背景色、hover 色和 transition 是评论区最直接的交互反馈来源。
*/
#AjaxHolder_PostComment_btnSubmit {
  padding:8px 20px;
  text-align:center;
  font-size:14px;
  color:#fff;
  border:none;
  background:#5c8ec6;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  -webkit-transition:all .4s ease;
  -moz-transition:all .4s ease;
  -o-transition:all .4s ease;
  -ms-transition:all .4s ease;
  transition:all .4s ease;
  cursor:pointer;
  display:inline-block;
  vertical-align:middle;
  outline:0;
  text-decoration:none
}

#AjaxHolder_PostComment_btnSubmit:hover {
  background:#333
}

#AjaxHolder_PostComment_divCommnentArea tr {
  margin-top:10px;
  margin-bottom:10px
}

/* `.comment_vote`:
   评论区点赞/反对等投票操作入口。
   通过右内边距和颜色变化，和正文内容拉开层次。
*/
.comment_vote {
  padding-right:10px
}

.comment_vote a {
  color:#999
}

.comment_vote a:hover {
  color:#5c8ec6
}

/* #commentform_title:
   评论输入区顶部标题。
   与 `.feedback_area_title` 类似，但更偏向输入表单区域。
*/
#commentform_title {
  font:normal normal 16px/35px "Microsoft YaHei";
  margin:0;
  background-image:none;
  padding:0
}

/* `#comment_form_container .author`:
   评论表单中的昵称/作者输入框。
   如果你想让输入框更显眼，可以增加高度、圆角或边框对比度。
*/
#comment_form_container .author {
  padding-left:10px;
  color:#555;
  border:1px solid #ddd;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  width:320px;
  height:20px;
  background-image:none
}

#comment_form_container p {
  font-size:14px;
  margin-bottom:20px
}

.commentbox_title_left {
  font-size:14px
}

/* `#comment_form_container .comment_textarea`:
   评论正文输入框。
   `min-height` 控制初始可见高度，适合根据你的评论习惯增减。
*/
#comment_form_container .comment_textarea {
  font-size:13px;
  padding:8px;
  margin-bottom:10px;
  color:#555;
  border:1px solid #ddd;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  min-height:250px;
  width:100%;
  height:100%
}

#comment_form_container .comment_textarea:hover {
  border-color:#5c8ec6;
  outline:0;
  transition:all .4s linear 0s
}

#comment_form_container .comment_textarea:focus {
  outline:0
}

.commentbox_tab.active,.commentbox_tab:hover {
  border-bottom:0;
  color:#5c8ec6
}

.comment_btn {
  border:none;
  background-color:#5c8ec6
}

.comment_btn:hover {
  background:#71ace5
}

.PostListTitle,.entrylistTitle,.thumbTitle {
  height:38px;
  line-height:38px;
  font:normal normal 16px/35px "Microsoft YaHei";
  margin:10px 0 30px;
  background-image:none;
  padding:0
}

.dev__developer,.entrylistPosttitle a:active,.entrylistPosttitle a:link,.entrylistPosttitle a:visited {
  font-family:"Open Sans","Microsoft Jhenghei","Microsoft Yahei",sans-serif
}

.entrylistDescription {
  color:#666;
  text-align:right;
  padding-top:5px;
  padding-bottom:5px;
  padding-right:10px;
  margin-bottom:10px
}

/* .entrylistItem:
   摘要页/列表页中的单篇文章项。
   和 `.day` 类似，负责文章列表的纵向排布与卡片间距。
*/
.entrylistItem {
  position:relative;
  margin:3.5rem auto;
  padding-bottom:3.3rem;
  word-wrap:break-word
}

.entrylistItem:after {
  display:block;
  border:1px solid #E7EEF2;
  position:absolute;
  margin-left:-5px;
  background:#FFF;
  border-radius:100%;
  box-shadow:#FFF 0 0 0 5px
}

/* `.entrylistPosttitle`:
   列表页文章标题容器。
   标题本身的视觉重点主要由这里和下面的链接样式共同决定。
*/
.entrylistPosttitle {
  font-size:20px;
  width:100%
}

.entrylistPosttitle a:active,.entrylistPosttitle a:link,.entrylistPosttitle a:visited {
  transition:all .4s linear 0s;
  background-color:rgba(0,0,0,0);
  color:#4a4a4a;
  font-size:3.2rem;
  font-weight:700;
  letter-spacing:-1px;
  transition-delay:0s;
  transition-duration:.3s;
  transition-property:color;
  transition-timing-function:ease;
  word-wrap:break-word;
  -webkit-tap-highlight-color:transparent
}

.entrylistPosttitle a:hover {
  color:#000
}

.entrylistItemPostDesc,.sb-title {
  font-family:"Open Sans",sans-serif
}

/* `.entrylistItemPostDesc`:
   列表页的文章元信息区，例如日期、评论数、阅读数。
   当前被 `display:none` 隐藏，说明主题更强调标题和摘要本身。
*/
.entrylistItemPostDesc {
  float:left;
  width:100%;
  clear:both;
  text-align:left;
  padding-right:5px;
  margin:0;
  font-size:1.4rem;
  line-height:2.2rem;
  color:#9EABB3;
  display:none
}

.entrylistItemPostDesc a:active,.entrylistItemPostDesc a:link,.entrylistItemPostDesc a:visited {
  color:#666
}

.entrylistItemPostDesc a:hover {
  color:#5c8ec6
}

.entrylist .postSeparator {
  clear:both;
  width:100%;
  font-size:0;
  line-height:0;
  margin:0;
  padding:0;
  height:0;
  border:none
}

#footer,.pager {
  font-size:12px
}

.divPhoto,.pager {
  margin-right:10px
}

.divRecentCommentAticle a {
  color:#000
}

/* `.pager`:
   列表页分页区域。
   默认靠右对齐，和正文主体形成明显的功能区分。
*/
.pager {
  text-align:right;
  color:#9EABB3
}

/* `#nav_next_page a, .pager a`:
   分页按钮的统一外观。
   边框 + 圆角 + hover 变色组成比较经典的分页交互样式。
*/
#nav_next_page a,.pager a {
  display:inline-block;
  min-width:18px;
  text-align:center;
  border:1px solid #bfc8cd;
  text-decoration:none;
  border-radius:4px;
  color:#9EABB3!important;
  transition:all .2s ease
}

#nav_next_page a:active,#nav_next_page a:link,#nav_next_page a:visited,.pager a:active,.pager a:link,.pager a:visited {
  color:#9EABB3!important
}

.pager a {
  padding:0 5px
}

#nav_next_page a {
  padding:3px 5px
}

#nav_next_page a:hover,.pager a:hover {
  background:#fff;
  color:#889093;
  border-color:#98a0a4
}

/* `.PostList`:
   旧版文章列表项样式。
   用虚线下边框把相邻文章分开，适合偏传统博客列表布局。
*/
.PostList {
  border-bottom:1px dashed #e9e9e9;
  clear:both;
  min-height:1.5em;
  padding-top:20px;
  margin-bottom:20px;
  padding-bottom:20px
}

/* `.postTitl2 / .postDesc2 / .postText2`:
   这是另一套较旧的文章列表标题、描述和正文摘要样式。
   保留下来通常是为了兼容某些博客园历史页面结构。
*/
.postTitl2 {
  float:left;
  padding-top:10px;
  padding-bottom:10px;
  font-size:14px
}

.postDesc2 {
  color:#666;
  float:right
}

.postText2 {
  clear:both;
  color:#757575
}

/* `.pfl_feedback_*`:
   这组规则服务于另一套反馈/留言区域样式。
   如果页面里有资料卡、留言板或侧栏交互表单，它们通常会落到这里。
*/
.pfl_feedback_area_title {
  text-align:right;
  font-weight:700;
  margin-bottom:10px
}

.pfl_feedbackItem {
  border:1px dashed #ccc;
  padding:10px;
  border-radius:3px;
  margin-bottom:20px
}

.pfl_feedbacksubtitle {
  width:100%;
  height:1.5em
}

.pfl_feedbackname {
  float:left
}

.commentbox_title_right,.pfl_feedbackManage {
  float:right
}

.pfl_feedbackname a {
  color:#5c8ec6;
  font-weight:700
}

.pfl_feedbackCon {
  color:#000;
  padding-top:5px;
  padding-bottom:5px
}

.pfl_feedbackAnswer {
  color:#F40;
  text-indent:2em
}

.tdSentMessage {
  text-align:right
}

.errorMessage {
  width:300px;
  float:left
}

/* `#Profile1_panelAdd` / `#Profile1_txtContent`:
   用户资料或留言表单输入框。
   样式风格与评论区输入框保持一致，保证整站交互控件统一。
*/
#Profile1_panelAdd input[type=text],#Profile1_txtContent {
  padding:8px;
  margin-bottom:10px;
  color:#555;
  border:1px solid #ddd;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px
}

#Profile1_panelAdd input[type=text]:hover,#Profile1_txtContent:hover {
  color:#333;
  border-color:rgba(82,168,236,.8);
  transition:all .4s linear 0s
}

#Profile1_panelAdd input[type=text]:focus,#Profile1_txtContent:focus {
  outline:0;
  border-color:rgba(82,168,236,.8)
}

/* `#Profile1_panelAdd input[type=submit]`:
   资料/留言表单提交按钮。
   基本沿用了评论提交按钮的视觉语言。
*/
#Profile1_panelAdd input[type=submit] {
  padding:8px 20px;
  text-align:center;
  font-size:14px;
  color:#fff;
  border:none;
  background:#5c8ec6;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  -webkit-transition:all .4s ease;
  -moz-transition:all .4s ease;
  -o-transition:all .4s ease;
  -ms-transition:all .4s ease;
  transition:all .4s ease;
  cursor:pointer;
  display:inline-block;
  vertical-align:middle;
  outline:0;
  text-decoration:none
}

#Profile1_panelAdd input[type=submit]:hover {
  background:#333
}

/* `.feedbackListSubtitle`:
   评论头部信息条。
   用户名、时间、楼层等信息通常都放在这条浅灰色条带里。
*/
.feedbackListSubtitle {
  clear:both;
  align-items:center;
  color:#586069;
  flex-direction:row-reverse;
  background-color:#f6f8fa;
  border:1px solid #e9e9e9;
  border-bottom:1px solid #e9e9e9;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  padding:10px 20px;
  position:relative;
  white-space:nowrap;
  text-overflow:ellipsis
}

#footer,.main-header,.scroll-down {
  position:absolute
}

.divPhoto {
  border:1px solid #ccc;
  padding:2px
}

.thumbDescription {
  color:#757575;
  text-align:right;
  padding-top:5px;
  padding-bottom:5px;
  padding-right:10px;
  margin-bottom:30px
}

/* `#footer`:
   实际页脚主体定位。
   这里的 `position:absolute` 说明主题可能通过整体布局计算来把页脚压到页面底部。
*/
#footer {
  min-height:100px;
  margin:20vh 0 0;
  left:0;
  right:0;
  padding:15px 0;
  color:#888;
  line-height:1.5
}

/* `.my-face`:
   一个轻微摇头/抖动的小装饰动画类。
   常用于页脚图标、表情或昵称旁的小元素，增加一点拟人感。
*/
.my-face {
  animation:my-face 5s infinite ease-in-out;
  display:inline-block;
  margin:0 5px
}

/* `my-face` 关键帧：
   通过非常小的位移和旋转做轻微晃动。
   同时保留 `-moz/-webkit/-o` 前缀版本，是为了兼容旧浏览器。
*/
@-moz-keyframes my-face {
  2%,24%,80% {
    -webkit-transform:translate(0,1.5px) rotate(1.5deg);
    -moz-transform:translate(0,1.5px) rotate(1.5deg);
    -ms-transform:translate(0,1.5px) rotate(1.5deg);
    -o-transform:translate(0,1.5px) rotate(1.5deg);
    transform:translate(0,1.5px) rotate(1.5deg)
  }

  4%,68%,98% {
    -webkit-transform:translate(0,-1.5px) rotate(-.5deg);
    -moz-transform:translate(0,-1.5px) rotate(-.5deg);
    -ms-transform:translate(0,-1.5px) rotate(-.5deg);
    -o-transform:translate(0,-1.5px) rotate(-.5deg);
    transform:translate(0,-1.5px) rotate(-.5deg)
  }

  38%,6% {
    -webkit-transform:translate(0,1.5px) rotate(-1.5deg);
    -moz-transform:translate(0,1.5px) rotate(-1.5deg);
    -ms-transform:translate(0,1.5px) rotate(-1.5deg);
    -o-transform:translate(0,1.5px) rotate(-1.5deg);
    transform:translate(0,1.5px) rotate(-1.5deg)
  }

  8%,86% {
    -webkit-transform:translate(0,-1.5px) rotate(-1.5deg);
    -moz-transform:translate(0,-1.5px) rotate(-1.5deg);
    -ms-transform:translate(0,-1.5px) rotate(-1.5deg);
    -o-transform:translate(0,-1.5px) rotate(-1.5deg);
    transform:translate(0,-1.5px) rotate(-1.5deg)
  }

  10%,72% {
    -webkit-transform:translate(0,2.5px) rotate(1.5deg);
    -moz-transform:translate(0,2.5px) rotate(1.5deg);
    -ms-transform:translate(0,2.5px) rotate(1.5deg);
    -o-transform:translate(0,2.5px) rotate(1.5deg);
    transform:translate(0,2.5px) rotate(1.5deg)
  }

  12%,64%,78%,96% {
    -webkit-transform:translate(0,-.5px) rotate(1.5deg);
    -moz-transform:translate(0,-.5px) rotate(1.5deg);
    -ms-transform:translate(0,-.5px) rotate(1.5deg);
    -o-transform:translate(0,-.5px) rotate(1.5deg);
    transform:translate(0,-.5px) rotate(1.5deg)
  }

  14%,54% {
    -webkit-transform:translate(0,-1.5px) rotate(1.5deg);
    -moz-transform:translate(0,-1.5px) rotate(1.5deg);
    -ms-transform:translate(0,-1.5px) rotate(1.5deg);
    -o-transform:translate(0,-1.5px) rotate(1.5deg);
    transform:translate(0,-1.5px) rotate(1.5deg)
  }

  16% {
    -webkit-transform:translate(0,-.5px) rotate(-1.5deg);
    -moz-transform:translate(0,-.5px) rotate(-1.5deg);
    -ms-transform:translate(0,-.5px) rotate(-1.5deg);
    -o-transform:translate(0,-.5px) rotate(-1.5deg);
    transform:translate(0,-.5px) rotate(-1.5deg)
  }

  18%,22% {
    -webkit-transform:translate(0,.5px) rotate(-1.5deg);
    -moz-transform:translate(0,.5px) rotate(-1.5deg);
    -ms-transform:translate(0,.5px) rotate(-1.5deg);
    -o-transform:translate(0,.5px) rotate(-1.5deg);
    transform:translate(0,.5px) rotate(-1.5deg)
  }

  20%,36%,46% {
    -webkit-transform:translate(0,-1.5px) rotate(2.5deg);
    -moz-transform:translate(0,-1.5px) rotate(2.5deg);
    -ms-transform:translate(0,-1.5px) rotate(2.5deg);
    -o-transform:translate(0,-1.5px) rotate(2.5deg);
    transform:translate(0,-1.5px) rotate(2.5deg)
  }

  26%,50% {
    -webkit-transform:translate(0,.5px) rotate(.5deg);
    -moz-transform:translate(0,.5px) rotate(.5deg);
    -ms-transform:translate(0,.5px) rotate(.5deg);
    -o-transform:translate(0,.5px) rotate(.5deg);
    transform:translate(0,.5px) rotate(.5deg)
  }

  28% {
    -webkit-transform:translate(0,.5px) rotate(1.5deg);
    -moz-transform:translate(0,.5px) rotate(1.5deg);
    -ms-transform:translate(0,.5px) rotate(1.5deg);
    -o-transform:translate(0,.5px) rotate(1.5deg);
    transform:translate(0,.5px) rotate(1.5deg)
  }

  30%,40%,62%,76%,88% {
    -webkit-transform:translate(0,-.5px) rotate(2.5deg);
    -moz-transform:translate(0,-.5px) rotate(2.5deg);
    -ms-transform:translate(0,-.5px) rotate(2.5deg);
    -o-transform:translate(0,-.5px) rotate(2.5deg);
    transform:translate(0,-.5px) rotate(2.5deg)
  }

  32%,34%,66% {
    -webkit-transform:translate(0,1.5px) rotate(-.5deg);
    -moz-transform:translate(0,1.5px) rotate(-.5deg);
    -ms-transform:translate(0,1.5px) rotate(-.5deg);
    -o-transform:translate(0,1.5px) rotate(-.5deg);
    transform:translate(0,1.5px) rotate(-.5deg)
  }

  42% {
    -webkit-transform:translate(0,2.5px) rotate(-1.5deg);
    -moz-transform:translate(0,2.5px) rotate(-1.5deg);
    -ms-transform:translate(0,2.5px) rotate(-1.5deg);
    -o-transform:translate(0,2.5px) rotate(-1.5deg);
    transform:translate(0,2.5px) rotate(-1.5deg)
  }

  44%,70% {
    -webkit-transform:translate(0,1.5px) rotate(.5deg);
    -moz-transform:translate(0,1.5px) rotate(.5deg);
    -ms-transform:translate(0,1.5px) rotate(.5deg);
    -o-transform:translate(0,1.5px) rotate(.5deg);
    transform:translate(0,1.5px) rotate(.5deg)
  }

  48%,74%,82% {
    -webkit-transform:translate(0,-.5px) rotate(.5deg);
    -moz-transform:translate(0,-.5px) rotate(.5deg);
    -ms-transform:translate(0,-.5px) rotate(.5deg);
    -o-transform:translate(0,-.5px) rotate(.5deg);
    transform:translate(0,-.5px) rotate(.5deg)
  }

  52%,56%,60% {
    -webkit-transform:translate(0,2.5px) rotate(2.5deg);
    -moz-transform:translate(0,2.5px) rotate(2.5deg);
    -ms-transform:translate(0,2.5px) rotate(2.5deg);
    -o-transform:translate(0,2.5px) rotate(2.5deg);
    transform:translate(0,2.5px) rotate(2.5deg)
  }

  58% {
    -webkit-transform:translate(0,.5px) rotate(2.5deg);
    -moz-transform:translate(0,.5px) rotate(2.5deg);
    -ms-transform:translate(0,.5px) rotate(2.5deg);
    -o-transform:translate(0,.5px) rotate(2.5deg);
    transform:translate(0,.5px) rotate(2.5deg)
  }

  84% {
    -webkit-transform:translate(0,1.5px) rotate(2.5deg);
    -moz-transform:translate(0,1.5px) rotate(2.5deg);
    -ms-transform:translate(0,1.5px) rotate(2.5deg);
    -o-transform:translate(0,1.5px) rotate(2.5deg);
    transform:translate(0,1.5px) rotate(2.5deg)
  }

  90% {
    -webkit-transform:translate(0,2.5px) rotate(-.5deg);
    -moz-transform:translate(0,2.5px) rotate(-.5deg);
    -ms-transform:translate(0,2.5px) rotate(-.5deg);
    -o-transform:translate(0,2.5px) rotate(-.5deg);
    transform:translate(0,2.5px) rotate(-.5deg)
  }

  92% {
    -webkit-transform:translate(0,.5px) rotate(-.5deg);
    -moz-transform:translate(0,.5px) rotate(-.5deg);
    -ms-transform:translate(0,.5px) rotate(-.5deg);
    -o-transform:translate(0,.5px) rotate(-.5deg);
    transform:translate(0,.5px) rotate(-.5deg)
  }

  94% {
    -webkit-transform:translate(0,2.5px) rotate(.5deg);
    -moz-transform:translate(0,2.5px) rotate(.5deg);
    -ms-transform:translate(0,2.5px) rotate(.5deg);
    -o-transform:translate(0,2.5px) rotate(.5deg);
    transform:translate(0,2.5px) rotate(.5deg)
  }

  0%,100% {
    -webkit-transform:translate(0,0) rotate(0);
    -moz-transform:translate(0,0) rotate(0);
    -ms-transform:translate(0,0) rotate(0);
    -o-transform:translate(0,0) rotate(0);
    transform:translate(0,0) rotate(0)
  }
}

/* WebKit 兼容版本的 `my-face` 动画。 */
@-webkit-keyframes my-face {
  2%,24%,80% {
    -webkit-transform:translate(0,1.5px) rotate(1.5deg);
    -moz-transform:translate(0,1.5px) rotate(1.5deg);
    -ms-transform:translate(0,1.5px) rotate(1.5deg);
    -o-transform:translate(0,1.5px) rotate(1.5deg);
    transform:translate(0,1.5px) rotate(1.5deg)
  }

  4%,68%,98% {
    -webkit-transform:translate(0,-1.5px) rotate(-.5deg);
    -moz-transform:translate(0,-1.5px) rotate(-.5deg);
    -ms-transform:translate(0,-1.5px) rotate(-.5deg);
    -o-transform:translate(0,-1.5px) rotate(-.5deg);
    transform:translate(0,-1.5px) rotate(-.5deg)
  }

  38%,6% {
    -webkit-transform:translate(0,1.5px) rotate(-1.5deg);
    -moz-transform:translate(0,1.5px) rotate(-1.5deg);
    -ms-transform:translate(0,1.5px) rotate(-1.5deg);
    -o-transform:translate(0,1.5px) rotate(-1.5deg);
    transform:translate(0,1.5px) rotate(-1.5deg)
  }

  8%,86% {
    -webkit-transform:translate(0,-1.5px) rotate(-1.5deg);
    -moz-transform:translate(0,-1.5px) rotate(-1.5deg);
    -ms-transform:translate(0,-1.5px) rotate(-1.5deg);
    -o-transform:translate(0,-1.5px) rotate(-1.5deg);
    transform:translate(0,-1.5px) rotate(-1.5deg)
  }

  10%,72% {
    -webkit-transform:translate(0,2.5px) rotate(1.5deg);
    -moz-transform:translate(0,2.5px) rotate(1.5deg);
    -ms-transform:translate(0,2.5px) rotate(1.5deg);
    -o-transform:translate(0,2.5px) rotate(1.5deg);
    transform:translate(0,2.5px) rotate(1.5deg)
  }

  12%,64%,78%,96% {
    -webkit-transform:translate(0,-.5px) rotate(1.5deg);
    -moz-transform:translate(0,-.5px) rotate(1.5deg);
    -ms-transform:translate(0,-.5px) rotate(1.5deg);
    -o-transform:translate(0,-.5px) rotate(1.5deg);
    transform:translate(0,-.5px) rotate(1.5deg)
  }

  14%,54% {
    -webkit-transform:translate(0,-1.5px) rotate(1.5deg);
    -moz-transform:translate(0,-1.5px) rotate(1.5deg);
    -ms-transform:translate(0,-1.5px) rotate(1.5deg);
    -o-transform:translate(0,-1.5px) rotate(1.5deg);
    transform:translate(0,-1.5px) rotate(1.5deg)
  }

  16% {
    -webkit-transform:translate(0,-.5px) rotate(-1.5deg);
    -moz-transform:translate(0,-.5px) rotate(-1.5deg);
    -ms-transform:translate(0,-.5px) rotate(-1.5deg);
    -o-transform:translate(0,-.5px) rotate(-1.5deg);
    transform:translate(0,-.5px) rotate(-1.5deg)
  }

  18%,22% {
    -webkit-transform:translate(0,.5px) rotate(-1.5deg);
    -moz-transform:translate(0,.5px) rotate(-1.5deg);
    -ms-transform:translate(0,.5px) rotate(-1.5deg);
    -o-transform:translate(0,.5px) rotate(-1.5deg);
    transform:translate(0,.5px) rotate(-1.5deg)
  }

  20%,36%,46% {
    -webkit-transform:translate(0,-1.5px) rotate(2.5deg);
    -moz-transform:translate(0,-1.5px) rotate(2.5deg);
    -ms-transform:translate(0,-1.5px) rotate(2.5deg);
    -o-transform:translate(0,-1.5px) rotate(2.5deg);
    transform:translate(0,-1.5px) rotate(2.5deg)
  }

  26%,50% {
    -webkit-transform:translate(0,.5px) rotate(.5deg);
    -moz-transform:translate(0,.5px) rotate(.5deg);
    -ms-transform:translate(0,.5px) rotate(.5deg);
    -o-transform:translate(0,.5px) rotate(.5deg);
    transform:translate(0,.5px) rotate(.5deg)
  }

  28% {
    -webkit-transform:translate(0,.5px) rotate(1.5deg);
    -moz-transform:translate(0,.5px) rotate(1.5deg);
    -ms-transform:translate(0,.5px) rotate(1.5deg);
    -o-transform:translate(0,.5px) rotate(1.5deg);
    transform:translate(0,.5px) rotate(1.5deg)
  }

  30%,40%,62%,76%,88% {
    -webkit-transform:translate(0,-.5px) rotate(2.5deg);
    -moz-transform:translate(0,-.5px) rotate(2.5deg);
    -ms-transform:translate(0,-.5px) rotate(2.5deg);
    -o-transform:translate(0,-.5px) rotate(2.5deg);
    transform:translate(0,-.5px) rotate(2.5deg)
  }

  32%,34%,66% {
    -webkit-transform:translate(0,1.5px) rotate(-.5deg);
    -moz-transform:translate(0,1.5px) rotate(-.5deg);
    -ms-transform:translate(0,1.5px) rotate(-.5deg);
    -o-transform:translate(0,1.5px) rotate(-.5deg);
    transform:translate(0,1.5px) rotate(-.5deg)
  }

  42% {
    -webkit-transform:translate(0,2.5px) rotate(-1.5deg);
    -moz-transform:translate(0,2.5px) rotate(-1.5deg);
    -ms-transform:translate(0,2.5px) rotate(-1.5deg);
    -o-transform:translate(0,2.5px) rotate(-1.5deg);
    transform:translate(0,2.5px) rotate(-1.5deg)
  }

  44%,70% {
    -webkit-transform:translate(0,1.5px) rotate(.5deg);
    -moz-transform:translate(0,1.5px) rotate(.5deg);
    -ms-transform:translate(0,1.5px) rotate(.5deg);
    -o-transform:translate(0,1.5px) rotate(.5deg);
    transform:translate(0,1.5px) rotate(.5deg)
  }

  48%,74%,82% {
    -webkit-transform:translate(0,-.5px) rotate(.5deg);
    -moz-transform:translate(0,-.5px) rotate(.5deg);
    -ms-transform:translate(0,-.5px) rotate(.5deg);
    -o-transform:translate(0,-.5px) rotate(.5deg);
    transform:translate(0,-.5px) rotate(.5deg)
  }

  52%,56%,60% {
    -webkit-transform:translate(0,2.5px) rotate(2.5deg);
    -moz-transform:translate(0,2.5px) rotate(2.5deg);
    -ms-transform:translate(0,2.5px) rotate(2.5deg);
    -o-transform:translate(0,2.5px) rotate(2.5deg);
    transform:translate(0,2.5px) rotate(2.5deg)
  }

  58% {
    -webkit-transform:translate(0,.5px) rotate(2.5deg);
    -moz-transform:translate(0,.5px) rotate(2.5deg);
    -ms-transform:translate(0,.5px) rotate(2.5deg);
    -o-transform:translate(0,.5px) rotate(2.5deg);
    transform:translate(0,.5px) rotate(2.5deg)
  }

  84% {
    -webkit-transform:translate(0,1.5px) rotate(2.5deg);
    -moz-transform:translate(0,1.5px) rotate(2.5deg);
    -ms-transform:translate(0,1.5px) rotate(2.5deg);
    -o-transform:translate(0,1.5px) rotate(2.5deg);
    transform:translate(0,1.5px) rotate(2.5deg)
  }

  90% {
    -webkit-transform:translate(0,2.5px) rotate(-.5deg);
    -moz-transform:translate(0,2.5px) rotate(-.5deg);
    -ms-transform:translate(0,2.5px) rotate(-.5deg);
    -o-transform:translate(0,2.5px) rotate(-.5deg);
    transform:translate(0,2.5px) rotate(-.5deg)
  }

  92% {
    -webkit-transform:translate(0,.5px) rotate(-.5deg);
    -moz-transform:translate(0,.5px) rotate(-.5deg);
    -ms-transform:translate(0,.5px) rotate(-.5deg);
    -o-transform:translate(0,.5px) rotate(-.5deg);
    transform:translate(0,.5px) rotate(-.5deg)
  }

  94% {
    -webkit-transform:translate(0,2.5px) rotate(.5deg);
    -moz-transform:translate(0,2.5px) rotate(.5deg);
    -ms-transform:translate(0,2.5px) rotate(.5deg);
    -o-transform:translate(0,2.5px) rotate(.5deg);
    transform:translate(0,2.5px) rotate(.5deg)
  }

  0%,100% {
    -webkit-transform:translate(0,0) rotate(0);
    -moz-transform:translate(0,0) rotate(0);
    -ms-transform:translate(0,0) rotate(0);
    -o-transform:translate(0,0) rotate(0);
    transform:translate(0,0) rotate(0)
  }
}

/* Opera 旧前缀版本的 `my-face` 动画。 */
@-o-keyframes my-face {
  2%,24%,80% {
    -webkit-transform:translate(0,1.5px) rotate(1.5deg);
    -moz-transform:translate(0,1.5px) rotate(1.5deg);
    -ms-transform:translate(0,1.5px) rotate(1.5deg);
    -o-transform:translate(0,1.5px) rotate(1.5deg);
    transform:translate(0,1.5px) rotate(1.5deg)
  }

  4%,68%,98% {
    -webkit-transform:translate(0,-1.5px) rotate(-.5deg);
    -moz-transform:translate(0,-1.5px) rotate(-.5deg);
    -ms-transform:translate(0,-1.5px) rotate(-.5deg);
    -o-transform:translate(0,-1.5px) rotate(-.5deg);
    transform:translate(0,-1.5px) rotate(-.5deg)
  }

  38%,6% {
    -webkit-transform:translate(0,1.5px) rotate(-1.5deg);
    -moz-transform:translate(0,1.5px) rotate(-1.5deg);
    -ms-transform:translate(0,1.5px) rotate(-1.5deg);
    -o-transform:translate(0,1.5px) rotate(-1.5deg);
    transform:translate(0,1.5px) rotate(-1.5deg)
  }

  8%,86% {
    -webkit-transform:translate(0,-1.5px) rotate(-1.5deg);
    -moz-transform:translate(0,-1.5px) rotate(-1.5deg);
    -ms-transform:translate(0,-1.5px) rotate(-1.5deg);
    -o-transform:translate(0,-1.5px) rotate(-1.5deg);
    transform:translate(0,-1.5px) rotate(-1.5deg)
  }

  10%,72% {
    -webkit-transform:translate(0,2.5px) rotate(1.5deg);
    -moz-transform:translate(0,2.5px) rotate(1.5deg);
    -ms-transform:translate(0,2.5px) rotate(1.5deg);
    -o-transform:translate(0,2.5px) rotate(1.5deg);
    transform:translate(0,2.5px) rotate(1.5deg)
  }

  12%,64%,78%,96% {
    -webkit-transform:translate(0,-.5px) rotate(1.5deg);
    -moz-transform:translate(0,-.5px) rotate(1.5deg);
    -ms-transform:translate(0,-.5px) rotate(1.5deg);
    -o-transform:translate(0,-.5px) rotate(1.5deg);
    transform:translate(0,-.5px) rotate(1.5deg)
  }

  14%,54% {
    -webkit-transform:translate(0,-1.5px) rotate(1.5deg);
    -moz-transform:translate(0,-1.5px) rotate(1.5deg);
    -ms-transform:translate(0,-1.5px) rotate(1.5deg);
    -o-transform:translate(0,-1.5px) rotate(1.5deg);
    transform:translate(0,-1.5px) rotate(1.5deg)
  }

  16% {
    -webkit-transform:translate(0,-.5px) rotate(-1.5deg);
    -moz-transform:translate(0,-.5px) rotate(-1.5deg);
    -ms-transform:translate(0,-.5px) rotate(-1.5deg);
    -o-transform:translate(0,-.5px) rotate(-1.5deg);
    transform:translate(0,-.5px) rotate(-1.5deg)
  }

  18%,22% {
    -webkit-transform:translate(0,.5px) rotate(-1.5deg);
    -moz-transform:translate(0,.5px) rotate(-1.5deg);
    -ms-transform:translate(0,.5px) rotate(-1.5deg);
    -o-transform:translate(0,.5px) rotate(-1.5deg);
    transform:translate(0,.5px) rotate(-1.5deg)
  }

  20%,36%,46% {
    -webkit-transform:translate(0,-1.5px) rotate(2.5deg);
    -moz-transform:translate(0,-1.5px) rotate(2.5deg);
    -ms-transform:translate(0,-1.5px) rotate(2.5deg);
    -o-transform:translate(0,-1.5px) rotate(2.5deg);
    transform:translate(0,-1.5px) rotate(2.5deg)
  }

  26%,50% {
    -webkit-transform:translate(0,.5px) rotate(.5deg);
    -moz-transform:translate(0,.5px) rotate(.5deg);
    -ms-transform:translate(0,.5px) rotate(.5deg);
    -o-transform:translate(0,.5px) rotate(.5deg);
    transform:translate(0,.5px) rotate(.5deg)
  }

  28% {
    -webkit-transform:translate(0,.5px) rotate(1.5deg);
    -moz-transform:translate(0,.5px) rotate(1.5deg);
    -ms-transform:translate(0,.5px) rotate(1.5deg);
    -o-transform:translate(0,.5px) rotate(1.5deg);
    transform:translate(0,.5px) rotate(1.5deg)
  }

  30%,40%,62%,76%,88% {
    -webkit-transform:translate(0,-.5px) rotate(2.5deg);
    -moz-transform:translate(0,-.5px) rotate(2.5deg);
    -ms-transform:translate(0,-.5px) rotate(2.5deg);
    -o-transform:translate(0,-.5px) rotate(2.5deg);
    transform:translate(0,-.5px) rotate(2.5deg)
  }

  32%,34%,66% {
    -webkit-transform:translate(0,1.5px) rotate(-.5deg);
    -moz-transform:translate(0,1.5px) rotate(-.5deg);
    -ms-transform:translate(0,1.5px) rotate(-.5deg);
    -o-transform:translate(0,1.5px) rotate(-.5deg);
    transform:translate(0,1.5px) rotate(-.5deg)
  }

  42% {
    -webkit-transform:translate(0,2.5px) rotate(-1.5deg);
    -moz-transform:translate(0,2.5px) rotate(-1.5deg);
    -ms-transform:translate(0,2.5px) rotate(-1.5deg);
    -o-transform:translate(0,2.5px) rotate(-1.5deg);
    transform:translate(0,2.5px) rotate(-1.5deg)
  }

  44%,70% {
    -webkit-transform:translate(0,1.5px) rotate(.5deg);
    -moz-transform:translate(0,1.5px) rotate(.5deg);
    -ms-transform:translate(0,1.5px) rotate(.5deg);
    -o-transform:translate(0,1.5px) rotate(.5deg);
    transform:translate(0,1.5px) rotate(.5deg)
  }

  48%,74%,82% {
    -webkit-transform:translate(0,-.5px) rotate(.5deg);
    -moz-transform:translate(0,-.5px) rotate(.5deg);
    -ms-transform:translate(0,-.5px) rotate(.5deg);
    -o-transform:translate(0,-.5px) rotate(.5deg);
    transform:translate(0,-.5px) rotate(.5deg)
  }

  52%,56%,60% {
    -webkit-transform:translate(0,2.5px) rotate(2.5deg);
    -moz-transform:translate(0,2.5px) rotate(2.5deg);
    -ms-transform:translate(0,2.5px) rotate(2.5deg);
    -o-transform:translate(0,2.5px) rotate(2.5deg);
    transform:translate(0,2.5px) rotate(2.5deg)
  }

  58% {
    -webkit-transform:translate(0,.5px) rotate(2.5deg);
    -moz-transform:translate(0,.5px) rotate(2.5deg);
    -ms-transform:translate(0,.5px) rotate(2.5deg);
    -o-transform:translate(0,.5px) rotate(2.5deg);
    transform:translate(0,.5px) rotate(2.5deg)
  }

  84% {
    -webkit-transform:translate(0,1.5px) rotate(2.5deg);
    -moz-transform:translate(0,1.5px) rotate(2.5deg);
    -ms-transform:translate(0,1.5px) rotate(2.5deg);
    -o-transform:translate(0,1.5px) rotate(2.5deg);
    transform:translate(0,1.5px) rotate(2.5deg)
  }

  90% {
    -webkit-transform:translate(0,2.5px) rotate(-.5deg);
    -moz-transform:translate(0,2.5px) rotate(-.5deg);
    -ms-transform:translate(0,2.5px) rotate(-.5deg);
    -o-transform:translate(0,2.5px) rotate(-.5deg);
    transform:translate(0,2.5px) rotate(-.5deg)
  }

  92% {
    -webkit-transform:translate(0,.5px) rotate(-.5deg);
    -moz-transform:translate(0,.5px) rotate(-.5deg);
    -ms-transform:translate(0,.5px) rotate(-.5deg);
    -o-transform:translate(0,.5px) rotate(-.5deg);
    transform:translate(0,.5px) rotate(-.5deg)
  }

  94% {
    -webkit-transform:translate(0,2.5px) rotate(.5deg);
    -moz-transform:translate(0,2.5px) rotate(.5deg);
    -ms-transform:translate(0,2.5px) rotate(.5deg);
    -o-transform:translate(0,2.5px) rotate(.5deg);
    transform:translate(0,2.5px) rotate(.5deg)
  }

  0%,100% {
    -webkit-transform:translate(0,0) rotate(0);
    -moz-transform:translate(0,0) rotate(0);
    -ms-transform:translate(0,0) rotate(0);
    -o-transform:translate(0,0) rotate(0);
    transform:translate(0,0) rotate(0)
  }
}

/* 标准版 `my-face` 动画。 */
@keyframes my-face {
  2%,24%,80% {
    -webkit-transform:translate(0,1.5px) rotate(1.5deg);
    -moz-transform:translate(0,1.5px) rotate(1.5deg);
    -ms-transform:translate(0,1.5px) rotate(1.5deg);
    -o-transform:translate(0,1.5px) rotate(1.5deg);
    transform:translate(0,1.5px) rotate(1.5deg)
  }

  4%,68%,98% {
    -webkit-transform:translate(0,-1.5px) rotate(-.5deg);
    -moz-transform:translate(0,-1.5px) rotate(-.5deg);
    -ms-transform:translate(0,-1.5px) rotate(-.5deg);
    -o-transform:translate(0,-1.5px) rotate(-.5deg);
    transform:translate(0,-1.5px) rotate(-.5deg)
  }

  38%,6% {
    -webkit-transform:translate(0,1.5px) rotate(-1.5deg);
    -moz-transform:translate(0,1.5px) rotate(-1.5deg);
    -ms-transform:translate(0,1.5px) rotate(-1.5deg);
    -o-transform:translate(0,1.5px) rotate(-1.5deg);
    transform:translate(0,1.5px) rotate(-1.5deg)
  }

  8%,86% {
    -webkit-transform:translate(0,-1.5px) rotate(-1.5deg);
    -moz-transform:translate(0,-1.5px) rotate(-1.5deg);
    -ms-transform:translate(0,-1.5px) rotate(-1.5deg);
    -o-transform:translate(0,-1.5px) rotate(-1.5deg);
    transform:translate(0,-1.5px) rotate(-1.5deg)
  }

  10%,72% {
    -webkit-transform:translate(0,2.5px) rotate(1.5deg);
    -moz-transform:translate(0,2.5px) rotate(1.5deg);
    -ms-transform:translate(0,2.5px) rotate(1.5deg);
    -o-transform:translate(0,2.5px) rotate(1.5deg);
    transform:translate(0,2.5px) rotate(1.5deg)
  }

  12%,64%,78%,96% {
    -webkit-transform:translate(0,-.5px) rotate(1.5deg);
    -moz-transform:translate(0,-.5px) rotate(1.5deg);
    -ms-transform:translate(0,-.5px) rotate(1.5deg);
    -o-transform:translate(0,-.5px) rotate(1.5deg);
    transform:translate(0,-.5px) rotate(1.5deg)
  }

  14%,54% {
    -webkit-transform:translate(0,-1.5px) rotate(1.5deg);
    -moz-transform:translate(0,-1.5px) rotate(1.5deg);
    -ms-transform:translate(0,-1.5px) rotate(1.5deg);
    -o-transform:translate(0,-1.5px) rotate(1.5deg);
    transform:translate(0,-1.5px) rotate(1.5deg)
  }

  16% {
    -webkit-transform:translate(0,-.5px) rotate(-1.5deg);
    -moz-transform:translate(0,-.5px) rotate(-1.5deg);
    -ms-transform:translate(0,-.5px) rotate(-1.5deg);
    -o-transform:translate(0,-.5px) rotate(-1.5deg);
    transform:translate(0,-.5px) rotate(-1.5deg)
  }

  18%,22% {
    -webkit-transform:translate(0,.5px) rotate(-1.5deg);
    -moz-transform:translate(0,.5px) rotate(-1.5deg);
    -ms-transform:translate(0,.5px) rotate(-1.5deg);
    -o-transform:translate(0,.5px) rotate(-1.5deg);
    transform:translate(0,.5px) rotate(-1.5deg)
  }

  20%,36%,46% {
    -webkit-transform:translate(0,-1.5px) rotate(2.5deg);
    -moz-transform:translate(0,-1.5px) rotate(2.5deg);
    -ms-transform:translate(0,-1.5px) rotate(2.5deg);
    -o-transform:translate(0,-1.5px) rotate(2.5deg);
    transform:translate(0,-1.5px) rotate(2.5deg)
  }

  26%,50% {
    -webkit-transform:translate(0,.5px) rotate(.5deg);
    -moz-transform:translate(0,.5px) rotate(.5deg);
    -ms-transform:translate(0,.5px) rotate(.5deg);
    -o-transform:translate(0,.5px) rotate(.5deg);
    transform:translate(0,.5px) rotate(.5deg)
  }

  28% {
    -webkit-transform:translate(0,.5px) rotate(1.5deg);
    -moz-transform:translate(0,.5px) rotate(1.5deg);
    -ms-transform:translate(0,.5px) rotate(1.5deg);
    -o-transform:translate(0,.5px) rotate(1.5deg);
    transform:translate(0,.5px) rotate(1.5deg)
  }

  30%,40%,62%,76%,88% {
    -webkit-transform:translate(0,-.5px) rotate(2.5deg);
    -moz-transform:translate(0,-.5px) rotate(2.5deg);
    -ms-transform:translate(0,-.5px) rotate(2.5deg);
    -o-transform:translate(0,-.5px) rotate(2.5deg);
    transform:translate(0,-.5px) rotate(2.5deg)
  }

  32%,34%,66% {
    -webkit-transform:translate(0,1.5px) rotate(-.5deg);
    -moz-transform:translate(0,1.5px) rotate(-.5deg);
    -ms-transform:translate(0,1.5px) rotate(-.5deg);
    -o-transform:translate(0,1.5px) rotate(-.5deg);
    transform:translate(0,1.5px) rotate(-.5deg)
  }

  42% {
    -webkit-transform:translate(0,2.5px) rotate(-1.5deg);
    -moz-transform:translate(0,2.5px) rotate(-1.5deg);
    -ms-transform:translate(0,2.5px) rotate(-1.5deg);
    -o-transform:translate(0,2.5px) rotate(-1.5deg);
    transform:translate(0,2.5px) rotate(-1.5deg)
  }

  44%,70% {
    -webkit-transform:translate(0,1.5px) rotate(.5deg);
    -moz-transform:translate(0,1.5px) rotate(.5deg);
    -ms-transform:translate(0,1.5px) rotate(.5deg);
    -o-transform:translate(0,1.5px) rotate(.5deg);
    transform:translate(0,1.5px) rotate(.5deg)
  }

  48%,74%,82% {
    -webkit-transform:translate(0,-.5px) rotate(.5deg);
    -moz-transform:translate(0,-.5px) rotate(.5deg);
    -ms-transform:translate(0,-.5px) rotate(.5deg);
    -o-transform:translate(0,-.5px) rotate(.5deg);
    transform:translate(0,-.5px) rotate(.5deg)
  }

  52%,56%,60% {
    -webkit-transform:translate(0,2.5px) rotate(2.5deg);
    -moz-transform:translate(0,2.5px) rotate(2.5deg);
    -ms-transform:translate(0,2.5px) rotate(2.5deg);
    -o-transform:translate(0,2.5px) rotate(2.5deg);
    transform:translate(0,2.5px) rotate(2.5deg)
  }

  58% {
    -webkit-transform:translate(0,.5px) rotate(2.5deg);
    -moz-transform:translate(0,.5px) rotate(2.5deg);
    -ms-transform:translate(0,.5px) rotate(2.5deg);
    -o-transform:translate(0,.5px) rotate(2.5deg);
    transform:translate(0,.5px) rotate(2.5deg)
  }

  84% {
    -webkit-transform:translate(0,1.5px) rotate(2.5deg);
    -moz-transform:translate(0,1.5px) rotate(2.5deg);
    -ms-transform:translate(0,1.5px) rotate(2.5deg);
    -o-transform:translate(0,1.5px) rotate(2.5deg);
    transform:translate(0,1.5px) rotate(2.5deg)
  }

  90% {
    -webkit-transform:translate(0,2.5px) rotate(-.5deg);
    -moz-transform:translate(0,2.5px) rotate(-.5deg);
    -ms-transform:translate(0,2.5px) rotate(-.5deg);
    -o-transform:translate(0,2.5px) rotate(-.5deg);
    transform:translate(0,2.5px) rotate(-.5deg)
  }

  92% {
    -webkit-transform:translate(0,.5px) rotate(-.5deg);
    -moz-transform:translate(0,.5px) rotate(-.5deg);
    -ms-transform:translate(0,.5px) rotate(-.5deg);
    -o-transform:translate(0,.5px) rotate(-.5deg);
    transform:translate(0,.5px) rotate(-.5deg)
  }

  94% {
    -webkit-transform:translate(0,2.5px) rotate(.5deg);
    -moz-transform:translate(0,2.5px) rotate(.5deg);
    -ms-transform:translate(0,2.5px) rotate(.5deg);
    -o-transform:translate(0,2.5px) rotate(.5deg);
    transform:translate(0,2.5px) rotate(.5deg)
  }

  0%,100% {
    -webkit-transform:translate(0,0) rotate(0);
    -moz-transform:translate(0,0) rotate(0);
    -ms-transform:translate(0,0) rotate(0);
    -o-transform:translate(0,0) rotate(0);
    transform:translate(0,0) rotate(0)
  }
}

/* ===== 文章正文与首屏视觉区 =====
   包括文章页正文、首页顶部大图、标题动画、作者信息和下滑提示等内容。
*/
.personInfo {
  margin-bottom:20px
}

.pages {
  text-align:right
}

/* .postBody:
   文章正文核心排版区域。
   正文字号、行高、基础文字色都会直接影响阅读舒适度。
   想要更“书籍化”的阅读体验，优先调整这里。
*/
.postBody {
  color:#23263b;
  font-size:1.55rem;
  line-height:1.6
}

/* 段落间距：
   统一正文和摘要中的段落下边距，让大段文字阅读起来不拥挤。
*/
.postBody p,.postCon p {
  margin:0 auto 1em
}

.postCon a:active,.postCon a:link,.postCon a:visited {
  color:#9EABB3
}

.postCon a:hover {
  color:#98a0a4
}

/* 列表缩进：
   给正文中的无序列表留出左边距，避免列表层级和正文混在一起。
*/
.postBody ul,.postCon ul {
  margin-left:2em
}

.myposts_title {
  font-weight:700;
  text-align:center
}

#sideBar {
  font-size:12px
}

#sideBar h3 {
  font-size:14px
}

/* `#cnblogs_post_body img`:
   正文图片基础样式。
   这里不再强制把图片固定成某一种对齐方式，而是尽量尊重作者在编辑器里设置的
   左对齐 / 居中 / 右对齐结果。
   当前策略：
   1. 用 `max-width:100%` 和 `height:auto` 适配不同屏幕
   2. 只保留上下边距，不写死左右居中或左右贴边
   3. 默认保持 `inline-block`，这样父容器的 `text-align` 仍然可以生效
   4. 兼容桌面端、平板端和手机端，避免图片在小屏上溢出
*/
/* 正文图片对齐策略说明：
   这一段是正文图片排版里很关键的“约束层”。

   目标不是把所有图片强行居中，而是尽量尊重作者在编辑器里的原始对齐意图。
   也就是说，这里优先解决的是：
   1. 图片不要在小屏上溢出
   2. 居中 / 左对齐 / 右对齐尽量保留
   3. 默认规则不要过度覆盖编辑器输出

   维护时建议：
   - 如果你只是想让图片更大或更小，优先改 `max-width`
   - 如果你只是想调图片上下呼吸感，优先改 `margin-top / margin-bottom`
   - 如果你想统一所有图片强制居中，才去动 `display` 和 `margin`

   不建议轻易把这里改成全局 `display:block; margin:auto;`，
   否则旧文章里手动设置过的左/右对齐很容易全部失效。 */
#cnblogs_post_body img {
  display:inline-block;
  max-width:100%;
  height:auto;
  margin-top:10px;
  margin-bottom:10px
}

/* 编辑器里如果通过段落或容器设置了对齐方式，这里负责把对齐意图落到图片上。
   这样作者在写文章时选择“居中 / 靠右 / 靠左”，发布后仍能尽量保持一致。 */
#cnblogs_post_body p[align="left"],
#cnblogs_post_body div[align="left"] {
  text-align:left
}

#cnblogs_post_body p[align="center"],
#cnblogs_post_body div[align="center"] {
  text-align:center
}

#cnblogs_post_body p[align="right"],
#cnblogs_post_body div[align="right"] {
  text-align:right
}

/* 兼容部分旧内容直接把对齐方式写在 img 标签上的情况。 */
#cnblogs_post_body img[align="center"] {
  display:block;
  margin:10px auto
}

#cnblogs_post_body img[align="left"] {
  display:block;
  margin:10px auto 10px 0
}

#cnblogs_post_body img[align="right"] {
  display:block;
  margin:10px 0 10px auto
}

/* .main-header:
   首页或文章页顶部的大图首屏区域。
   它负责沉浸式封面效果，通常包含背景图、标题、副标题和滚动提示。
   `height:100vh` 代表首屏高度占满整个视口。
*/
.main-header {
  display:flex;
  width:100%;
  height:100vh;
  max-height:100vh;
  text-align:center;
  overflow:hidden;
  top:0;
  left:0;
  z-index:3;
  box-shadow:0 1px 2px rgba(150,150,150,.7);
  background:#333
}

/* `.main-header .part`:
   首屏被切分后的左右/多列区域。
   `flex:1` 表示各分块按等比例分配宽度。
*/
.main-header .part {
  flex:1
}

.main-header .part .section {
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden
}

/* `.main-header .part .section img`:
   首屏背景图。
   `object-fit:cover` 保证图片始终铺满区域但不变形。
*/
.main-header .part .section img {
  width:100vw;
  height:100%;
  object-fit:cover;
  position:absolute;
  left:var(--x);
  pointer-events:none
}

#homeTopCanvas {
  z-index:-1
}

.inner {
  position:relative;
  width:80%;
  max-width:800px;
  padding:10px
}

.page-title,.sb-title {
  letter-spacing:-1px;
  font-weight:700;
  color:#fff
}

.sb-title {
  -webkit-animation:fade-in-down 1s;
  animation:fade-in-down 1s both
}

/* .page-title:
   首屏大标题样式。
   当前使用较强的展示型字体和阴影，更偏视觉海报风格。
   如果想更稳重，可以改字体、减小字号或弱化 text-shadow。
*/
.page-title {
  animation:fade-in-down 1s both;
  -webkit-animation:fade-in-down 1s both;
  mix-blend-mode:screen;
  font-size:5rem;
  font-family:Playball,cursive
}

.page-title span:hover {
  animation:pageTitleText 2s infinite;
  -webkit-animation:pageTitleText 1s infinite
}

@keyframes pageTitleText {
  0% {
    text-shadow:2px 0 0 tomato
  }

  10% {
    text-shadow:-2px -2px 0 gold
  }

  100%,20% {
    text-shadow:2px 0 0 #0f0
  }

  30%,70% {
    text-shadow:2px 0 0 #40e0d0
  }

  40% {
    text-shadow:2px 2px 0 tomato
  }

  50% {
    text-shadow:0 -2px 0 gold
  }

  60% {
    text-shadow:0 2px 0 #0f0
  }

  80% {
    text-shadow:2px -4px 0 tomato
  }

  90% {
    text-shadow:2px 2px 0 gold
  }
}

#footer .footer-text,.page-description {
  font-family:'Long Cang',cursive
}

.sb-title {
  font-size:3.55rem
}

/* `.vertical`:
   首屏中央文本区的纵向居中容器。
   用 flex 把标题、副标题、作者信息垂直居中到封面中间。
*/
.vertical {
  display:flex;
  width:100%;
  height:100%;
  position:absolute;
  z-index:2;
  align-items:center
}

.page-author,.page-description {
  margin:0;
  letter-spacing:.01rem;
  color:rgba(255,255,255,.8);
  text-shadow:0 3px 6px rgba(0,0,0,.5);
  display:none;
  font-weight:400
}

/* `.page-description`:
   首屏副标题/简介文本。
   这里通过多行裁切控制文字长度，避免封面区被长文案撑坏。
*/
.page-description {
  font-size:2.2rem;
  -webkit-animation:fade-in-down .9s;
  animation:fade-in-down .9s both;
  -webkit-animation-delay:.1s;
  animation-delay:.3s;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:10;
  overflow:hidden
}

.page-author {
  font-size:1.5rem!important;
  line-height:1.3em;
  font-family:'Ubuntu Mono',monospace;
  -webkit-animation:fade-in-down .9s;
  animation:fade-in-down .9s both;
  -webkit-animation-delay:.1s;
  animation-delay:.3s
}

/* .scroll-down:
   首屏底部的“向下滚动”提示按钮。
   用旋转和 bounce 动画告诉用户页面下面还有内容。
*/
.scroll-down {
  display:block;
  z-index:100;
  bottom:45px;
  left:50%;
  margin-left:-16px;
  width:34px;
  height:34px;
  font-size:34px;
  text-align:center;
  -webkit-transform:rotate(-90deg);
  -ms-transform:rotate(-90deg);
  transform:rotate(-90deg);
  -webkit-animation:bounce 4s 2s infinite;
  animation:bounce 4s 2s infinite;
  text-decoration:none!important
}

.hidden,.m-list-title,.post-del-title {
  display:none
}

/* `.scroll-down-icon`:
   滚动提示按钮中的图标本体。
   单独控制它能让按钮和图标的视觉节奏更细。
*/
.scroll-down-icon {
  color:rgba(255,255,255,.6);
  font-size:34px!important;
  position:relative;
  bottom:7px
}

.scroll-down:hover {
  color:#fff;
  -webkit-animation:none;
  animation:none
}

.hidden {
  text-indent:-9999px
}

/* `bounce`:
   向下滚动提示的上下弹跳动画。
   振幅不大，目的是提醒而不是制造强干扰。
*/
@-webkit-keyframes bounce {
  0%,10%,25%,40%,50% {
    -webkit-transform:translateY(0) rotate(-90deg);
    transform:translateY(0) rotate(-90deg)
  }

  20% {
    -webkit-transform:translateY(-10px) rotate(-90deg);
    transform:translateY(-10px) rotate(-90deg)
  }

  30% {
    -webkit-transform:translateY(-5px) rotate(-90deg);
    transform:translateY(-5px) rotate(-90deg)
  }
}

@keyframes bounce {
  0%,10%,25%,40%,50% {
    -webkit-transform:translateY(0) rotate(-90deg);
    transform:translateY(0) rotate(-90deg)
  }

  20% {
    -webkit-transform:translateY(-10px) rotate(-90deg);
    transform:translateY(-10px) rotate(-90deg)
  }

  30% {
    -webkit-transform:translateY(-5px) rotate(-90deg);
    transform:translateY(-5px) rotate(-90deg)
  }
}

@-webkit-keyframes fade-in-down {
  0% {
    opacity:0;
    -webkit-transform:translateY(-10px);
    transform:translateY(-10px)
  }

  100% {
    opacity:1;
    -webkit-transform:translateY(0);
    transform:translateY(0)
  }
}

@keyframes fade-in-down {
  0% {
    opacity:0;
    -webkit-transform:translateY(-10px);
    transform:translateY(-10px)
  }

  100% {
    opacity:1;
    -webkit-transform:translateY(0);
    transform:translateY(0)
  }
}

/* `.menu-button-scroll`:
   移动端或窄屏状态下的目录/菜单浮动按钮。
   渐变背景和阴影让它像一个悬浮控制器，方便用户随时展开目录。
*/
.menu-button-scroll {
  left:-17px!important;
  width:35px!important;
  color:#777aaf!important;
  border:0!important;
  background-image:linear-gradient(180deg,#fff,#f5f5fa)!important;
  -webkit-box-shadow:0 4px 11px -2px rgb(37 44 97 / 15%),0 1px 3px 0 rgb(93 100 148 / 20%);
  box-shadow:0 4px 11px -2px rgb(37 44 97 / 15%),0 1px 3px 0 rgb(93 100 148 / 20%)
}

.menu-button-scroll:before {
  background:linear-gradient(#777aaf 20%,transparent 0,transparent 40%,#777aaf 0,#777aaf 60%,transparent 0,transparent 80%,#777aaf 0)!important
}

/* `.m-list-title`:
   移动端目录标题区域。
   这类标题通常配合目录折叠逻辑使用，用来给目录面板分组或命名。
*/
.m-list-title {
  position:relative;
  border-bottom:#3B3B3B 1px solid;
  word-wrap:break-word;
  margin:24px 0;
  font-family:Merriweather,"Open Sans","Microsoft Jhenghei","Microsoft Yahei",sans-serif
}

#author_profile,#div_digg {
  margin-top:5px
}

/* `.m-list-title-select`:
   目录标题右侧的切换/选择图标。
   颜色变化用于提示它可点击。
*/
.m-list-title-select {
  color:#888;
  font-size:22px!important;
  position:absolute;
  right:-7px;
  top:1px
}

#introduce div,#rightMenu {
  right:10px;
  text-align:center
}

.m-list-title-select:hover {
  color:#B8B8B8;
  cursor:pointer
}

.m-list-title>span {
  display:block;
  width:74px;
  text-align:center;
  position:absolute;
  bottom:-9px;
  left:35%;
  margin-left:-5px;
  background:#000;
  box-shadow:#000 0 0 0 6px;
  color:#B8B8B8;
  line-height:20px
}

/* `#cnblogs_post_body h6, blockquote`:
   这里把 H6 和引用块都处理成“提示卡片”风格。
   左侧高亮边线 + 浅色背景 + 阴影，让弱层级内容更像信息提示框。
*/
#cnblogs_post_body h6,blockquote {
  border-left:3px solid rgba(84,104,255,.8)!important;
  border-right:none!important;
  border-top:none!important;
  border-bottom:none!important;
  padding:15px!important;
  background-color:#f7f7f7!important;
  background-image:linear-gradient(180deg ,#fff,#f5f5fa)!important;
  --text-opacity:1!important;
  color:#484c7a!important;
  box-shadow:0 4px 11px 0 rgb(37 44 97 / 9%),0 1px 3px 0 rgb(93 100 148 / 6%)!important;
  margin:10px 5px 10px 0!important;
  font-size:14px;
  font-weight:400
}

/* `blockquote p`:
   清掉引用块内部段落的额外边距和缩进，避免卡片内部排版错位。
*/
blockquote p {
  margin:0!important;
  padding:0;
  text-indent:0!important
}

.titleIcon {
  position:relative;
  font-size:34px!important;
  color:#5d69a5;
  line-height:50px
}

/* `#cnblogs_post_body ul`:
   正文中的无序列表外边距。
   它和后面的 `li` 样式一起决定列表的层级感和可读性。
*/
#cnblogs_post_body ul {
  margin-left:20px;
  margin-top:5px;
  padding-left:0
}

/* `.postBody li, .postCon li`:
   正文和摘要列表项。
   当前使用实心圆点 `disc`，并给每项留出底部间距，防止列表挤在一起。
*/
.postBody li,.postCon li {
  list-style-type:disc;
  margin-bottom:.5em
}

#commentform_title,.entrylistTitle,.feedback_area_title {
  border-bottom:none
}

/* 标题装饰线：
   给评论区标题、列表标题等补一条虚线分隔，提升章节切换感。
*/
#commentform_title:after,.entrylistTitle:after,.feedback_area_title:after {
  content:'';
  display:block;
  width:100%;
  text-align:center;
  position:relative;
  bottom:16px;
  border-bottom:1px dashed #e9e9e9
}

.entrylistTitle:after {
  left:200px
}

#commentform_title:after,.feedback_area_title:after {
  left:80px
}

#tbCommentBody {
  width:100%!important
}

/* `#rightMenu`:
   页面右下角悬浮工具栏容器。
   常见入口包括回到顶部、目录、首页、赞赏、公众号等。
*/
/* 右下角工具区维护说明：
   这里包含了页面右下角那组悬浮入口，以及与之配套的提示气泡、二维码卡片等。

   这块最容易出现的问题不是“样式不好看”，而是：
   1. 手机上挡住正文
   2. 提示气泡位置不对
   3. 二维码弹层和别的固定定位元素打架

   维护时建议：
   - 想整体改这一组按钮的视觉，优先看 `#rightMenu`、`.rightMenuItem`
   - 想改单个按钮大小，优先看 `div#rightMenu .rightMenuItem`
   - 想改提示层位置，优先看 `.rightMenuSpan` 和对应的 `*Span` 微调类
   - 想改二维码卡片，优先看 `.ds-*`

   如果以后发现手机端遮挡问题，
   优先先去 `@media only screen` 里看是否需要单独给这一区域补适配。 */
#rightMenu {
  position:fixed;
  bottom:10px;
  min-width:24px;
  z-index:2;
  width:40px
}

/* `div#rightMenu .rightMenuItem`:
   工具栏里的单个圆形按钮。
   圆角、阴影和尺寸都在这里统一，保证整组按钮风格一致。
*/
div#rightMenu .rightMenuItem {
  width:28px;
  height:28px;
  padding:4px;
  font-size:15px;
  cursor:pointer;
  text-align:center;
  line-height:28px;
  margin-bottom:4px;
  border-radius:50%;
  position:relative;
  display:block;
  -webkit-box-shadow:0 4px 11px -2px rgb(37 44 97 / 15%),0 1px 3px 0 rgb(93 100 148 / 20%);
  box-shadow:0 4px 11px -2px rgb(37 44 97 / 15%),0 1px 3px 0 rgb(93 100 148 / 20%)
}

/* `#div_digg`:
   文章底部的顶/踩区域。
   与 `#green_channel` 不同，这里更偏内容投票，而不是社交操作。
*/
#div_digg {
  float:right;
  margin-bottom:10px;
  margin-right:20px;
  font-size:12px;
  width:140px;
  text-align:center
}

/* `#div_digg .diggit / .buryit`:
   赞同和反对两个投票按钮。
   使用不同边框和背景色区分正向/中性反馈。
*/
#div_digg .buryit,#div_digg .diggit {
  text-align:center;
  cursor:pointer;
  padding-top:0;
  width:58px;
  height:58px;
  border-radius:6px;
  margin:0
}

#div_digg .diggit {
  float:left;
  border:1px solid #a7f3d0;
  background:#ecfdf5;
  color:#10b981
}

#div_digg .buryit {
  float:right;
  border:1px solid #e5e7eb;
  background:#f6f8fa;
  color:#6b7280
}

#div_digg .buryit i,#div_digg .diggit i {
  display:block;
  font-size:18px;
  font-weight:700;
  margin-top:4px
}

#div_digg .diggit .diggnum {
  color:#10b981;
  font-size:16px
}

#div_digg .buryit .burynum {
  color:#6b7280;
  font-size:16px
}

#rightMenu i {
  font-weight:500;
  font-size:16px;
  display:block
}

#rightMenu .hideRightMenu {
  display:none
}

#rightGzh i {
  font-size:18px
}

#rightDashang i {
  font-size:32px;
  position:relative;
  left:-1px
}

/* `.rightMenuItem`:
   悬浮工具按钮的通用视觉风格。
   如果你要统一改整组悬浮按钮的颜色或背景，优先动这里。
*/
.rightMenuItem {
  cursor:pointer;
  color:#777aaf;
  filter:Alpha(opacity=50);
  -webkit-transition:all .5s ease-out;
  transition:all .5s ease-out;
  position:relative;
  background-image:linear-gradient(180deg,#fff,#f5f5fa)
}

#attention i,#rightBuryit i,#rightDiggit i,#rightMenuHome i,#rtaDirectory i,#toUpDownI i {
  font-weight:600
}

#rightDashang .rightMenuSpan,#rightGzh .rightMenuSpan {
  position:absolute;
  left:-156px;
  font-size:14px;
  font-weight:700;
  width:140px;
  color:#777;
  text-align:right;
  display:none
}

#rightGzh .rightMenuSpan {
  top:-25px
}

/* 右侧工具栏提示气泡：
   鼠标悬停按钮时会显示左侧黑色说明浮层，告诉用户按钮用途。
*/
#attention .rightMenuSpan,#rightBuryit .rightMenuSpan,#rightDiggit .rightMenuSpan,#rightMenuHome .rightMenuSpan,#rightMenuSite .rightMenuSpan,#rtaDirectory .rightMenuSpan,#toUpDown .rightMenuSpan {
  position:absolute;
  left:-95px;
  font-size:14px;
  width:83px;
  background:#1b1c1d!important;
  color:#fff;
  opacity:.9;
  white-space:nowrap;
  max-width:unset;
  border:0;
  -webkit-box-shadow:0 0 6px -1px rgba(140,146,163,.5);
  box-shadow:0 0 6px -1px rgba(140,146,163,.5);
  font-weight:400;
  font-style:normal;
  border-radius:3px;
  text-align:center;
  display:none
}

#attention .rightMenuSpan::before,#rightBuryit .rightMenuSpan::before,#rightDiggit .rightMenuSpan::before,#rightMenuHome .rightMenuSpan::before,#rightMenuSite .rightMenuSpan::before,#rtaDirectory .rightMenuSpan::before,#toUpDown .rightMenuSpan::before {
  background-attachment:scroll;
  background-clip:border-box;
  background-color:#1b1c1d;
  box-shadow:rgba(179,179,179,.2) 1px -1px 0 0;
  box-sizing:border-box;
  color:#fff;
  content:"";
  display:block;
  height:8.98px;
  margin-top:-3.9px;
  opacity:.9;
  position:absolute;
  transform:matrix(.707107,.707107,-.707107,.707107,0,0);
  white-space:nowrap;
  width:8.98px;
  top:50%;
  right:-.325em;
  bottom:auto;
  left:auto
}

.rightDanshanSpan {
  bottom:-134px
}

.ds-pay {
  width:100%;
  height:100%;
  text-align:center
}

/* `.ds-*`:
   打赏/公众号二维码卡片。
   固定宽高、白底和阴影让二维码弹出时像一张独立信息卡。
*/
.ds-alipay,.ds-gzh,.ds-wecat {
  cursor:pointer;
  text-align:center;
  width:140px;
  height:140px;
  box-shadow:rgba(0,0,0,.3) 0 2px 7px;
  border-radius:0 6px 6px;
  transition:all 1s ease-in-out 0s;
  margin:3px 0;
  position:relative;
  padding:5px;
  background:#fff
}

/* 二维码图片本体：
   填满卡片区域并保持圆角，避免图片边缘和卡片外框打架。
*/
.ds-alipay img,.ds-gzh img,.ds-wecat img {
  width:100%;
  height:100%;
  border-radius:6px
}

/* 二维码卡片侧边标题：
   旋转 90 度后贴在卡片侧边，用来标识“支付宝 / 微信 / 公众号”等类型。
*/
.ds-alipay span,.ds-gzh span,.ds-wecat span {
  position:absolute;
  font-family:'Ubuntu Mono',monospace;
  left:-32px;
  top:14px;
  height:18px;
  line-height:18px;
  background:#fff;
  color:#777;
  padding:0 6px 2px;
  box-shadow:rgba(0,0,0,.1) 0 4px 7px;
  border-radius:0 0 6px 6px;
  font-size:.85em;
  transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  -o-transform:rotate(90deg)
}

/* 正文和评论中的表格单元格：
   统一单元格高度、垂直居中和省略处理，让表格更像文档组件而不是默认 HTML 表格。
*/
#cnblogs_post_body table td,#cnblogs_post_body table th,.feedbackCon table td,.feedbackCon table th {
  height:40px;
  box-sizing:border-box;
  background-clip:padding-box;
  display:table-cell;
  position:relative;
  border:0;
  text-overflow:ellipsis;
  vertical-align:middle
}

/* 这些 `*Span` 微调类：
   主要用于修正右侧悬浮菜单提示气泡的垂直位置，让不同按钮的提示文字对齐更自然。
*/
.attentionSpan {
  top:2px
}

.cnblogs-markdown .cnblogs_code_copy a,.rightBuryitSpan {
  top:0
}

.rightDiggitSpan {
  top:7px
}

.toUpDownSpan {
  top:3px
}

/* `#cnblogs_post_body table, .feedbackCon table`:
   正文区与评论区表格的整体外观。
   边框、背景、字号和 `border-collapse` 一起控制表格的“卡片化”程度。
*/
#cnblogs_post_body table,.feedbackCon table {
  position:relative;
  overflow:hidden!important;
  box-sizing:border-box;
  width:100%!important;
  background-color:#fff;
  border:1px solid #dfe3ec;
  font-size:14px;
  color:#222;
  margin:0 0 10px;
  padding:0;
  border-right:0;
  border-bottom:0;
  display:table!important;
  border-collapse:initial!important
}

.feedbackCon table {
  margin:10px 0
}

#cnblogs_post_body table tr,.feedbackCon table tr {
  border:0
}

/* 表头单元格：
   用浅灰底强调列标题，与正文单元格形成视觉区分。
*/
#cnblogs_post_body table th,.feedbackCon table th {
  border-bottom:1px solid #dfe3ec;
  border-right:1px solid #dfe3ec;
  background-color:#eef0f6;
  text-align:left;
  overflow:hidden;
  padding:0 18px;
  min-width:100px
}

/* 表格内容单元格：
   保持白底和清晰边界，避免表格内容显得过重。
*/
#cnblogs_post_body table td,.feedbackCon table td {
  border-bottom:1px solid #dfe6ec;
  border-right:1px solid #dfe3ec;
  min-width:0;
  background-color:#fff;
  padding:0 20px
}

/* `#cnblogs_post_body > p`:
   正文最常见的普通段落。
   这套字体栈偏系统字体，目标是提升中英文混排时的清晰度与稳定性。
*/
#cnblogs_post_body>p {
  margin:13px auto;
  padding:0;
  font-family:-apple-system,BlinkMacSystemFont,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px;
  letter-spacing:.015em;
  font-feature-settings:"tnum";
  font-variant:tabular-nums;
  font-weight:400;
  line-height:1.8;
  word-break:break-word
}

#cnblogs_post_body ul li {
  margin-left:18px
}

/* 代码字体尺寸：
   给代码块和 `<pre>` 统一字号，避免不同代码来源出现视觉大小不一致。
*/
.cnblogs_code,pre {
  font-size:14px!important
}

/* 代码字体族：
   统一为等宽字体，保证缩进、对齐和符号间距更稳定。
*/
.cnblogs_code,.cnblogs_code pre,.cnblogs_code span,pre {
  font-family:"Source Code Pro",Consolas,Menlo,Monaco,"Courier New",monospace!important;
  font-weight:400
}

/* `.header__span .dev__developer` 及后续 `.dev__*`:
   这是头部“开发者”装饰动画的一部分。
   通过位移、缩放和过渡时间，做出标题或身份标识的开合动效。
*/
.header__span .dev__developer {
  top:12px;
  left:90px;
  min-height:34px
}

.dev__developer,.dev__fe,.dev__fe i,.dev__slash,.dev__ux,.dev__ux i {
  transition:all .6s cubic-bezier(.555,-.375,0,1.615)
}

.header__dev--open .dev__fe i {
  text-indent:5px!important
}

.header__dev--open .dev__ux i {
  text-indent:11px!important
}

.header__dev--open .dev__developer {
  -webkit-transform:translateX(15px);
  transform:translateX(15px);
  opacity:.6
}

.header__dev--open .dev__slash {
  -webkit-transform:scale(.9) rotateZ(0);
  transform:scale(.9) rotateZ(0)
}

.header__dev--slow .dev__developer,.header__dev--slow .dev__fe,.header__dev--slow .dev__fe i,.header__dev--slow .dev__slash,.header__dev--slow .dev__ux,.header__dev--slow .dev__ux i {
  transition:all 1.2s cubic-bezier(.555,-.375,0,1.615)
}

/* `#m-nav-list li`:
   移动端导航列表项。
   `overflow:hidden` 常用于配合滑动、背景动画或点击态裁切效果。
*/
#m-nav-list li {
  position:relative;
  overflow:hidden
}

/* `#m-nav-list li a i`:
   移动端导航项前的小图标。
   通过轻微位移和弱化色，让图标成为辅助而不是主视觉。
*/
#m-nav-list li a i {
  margin-right:3px;
  font-size:16px;
  position:relative;
  top:1px;
  left:-2px;
  color:#888
}

/* 这一组 `display:none!important`:
   代表主题主动屏蔽博客园默认模块。
   目的是去掉系统原生导航/资料块/重复标题，只保留自定义布局。
*/
#comment_nav,#header,#leftcontentcontainer,#profile_block,#top_nav,.catListTitle {
  display:none!important
}

/* 这组隐藏规则主要清理广告位和默认底部推荐块：
   让页面视觉更纯净，也避免与你的自定义模块冲突。
*/
#ad_c1,#ad_c2,#ad_t1,#ad_t2,#cnblogs_c1,#cnblogs_c2,#commentform_title a,#under_post_kb,#under_post_news {
  display:none
}

/* `#progressBar`:
   阅读进度条容器。
   固定在顶部，通常由脚本动态控制宽度，反映当前页面滚动进度。
*/
#progressBar {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:998
}

/* 行内代码：
   用粉底+深粉文字高亮正文中的内联代码，方便与普通文本区分。
*/
#home code:not([class]),span.cnblogs_code {
  border:0;
  padding:2px 4px;
  color:#D83B64;
  display:inline;
  background-color:#f9f2f4;
  border-radius:3px;
  position:relative;
  bottom:1px;
  font-weight:700
}

/* `.cnblogs_code`:
   代码块最外层容器。
   清除默认背景和边框，为后续自定义代码工具栏、行号和复制按钮留空间。
*/
.cnblogs_code {
  line-height:20px;
  margin:0 auto;
  background-color:transparent;
  position:relative;
  overflow:hidden;
  border:0;
  padding:0
}

/* `pre`:
   预格式化代码区域。
   `word-break:break-all` 让超长代码在窄屏也能换行，但有时会牺牲可读性，可按需调整。
*/
pre {
  padding:10px;
  white-space:pre;
  margin:0;
  border-radius:0 0 4px 4px!important;
  border:0!important;
  word-break:break-all;
  word-wrap:break-word;
  counter-reset:itemcounter
}

.postBody pre:not(.hljs) {
  color:#23263b
}

/* `pre .line-numbers-rows`:
   代码块左侧行号列。
   通常由高亮插件生成，这里只负责定位和颜色。
*/
pre .line-numbers-rows {
  counter-increment:itemcounter;
  position:absolute;
  left:1px;
  width:34px;
  text-align:center;
  color:#999
}

.code-pre-line,code-box {
  position:relative;
  display:block
}

/* `code-box`:
   自定义代码框外层组件。
   阴影和圆角让代码块像一个单独的桌面应用窗口。
*/
code-box {
  margin:5px;
  border-radius:4px;
  -webkit-box-shadow:0 4px 11px -2px rgb(37 44 97 / 15%),0 1px 3px 0 rgb(93 100 148 / 6%);
  box-shadow:0 4px 11px -2px rgb(37 44 97 / 15%),0 1px 3px 0 rgb(93 100 148 / 6%)
}

/* `.code-hljs-len`:
   代码块顶部的长度/行数提示小标签。
   位置固定在左上区域，作为辅助信息展示。
*/
.code-hljs-len {
  display:inline-block;
  position:absolute;
  top:6px;
  left:73px;
  height:22px;
  line-height:22px;
  padding:0 6px;
  border-radius:2px;
  color:#999;
  font-size:12px;
  background-color:hsla(0,0%,90.2%,.1)
}

/* `code-box .code-tools`:
   自定义代码块顶部工具栏。
   类似 macOS 窗口标题条，用来放语言名、复制按钮等功能。
*/
code-box .code-tools {
  position:relative;
  display:flex;
  -webkit-box-align:center;
  -moz-box-align:center;
  -o-box-align:center;
  -ms-flex-align:center;
  -webkit-align-items:center;
  align-items:center;
  overflow:hidden;
  min-height:1.2rem;
  color:rgba(238,255,255,.8);
  font-size:14px;
  border-radius:4px 4px 0 0;
  height:16px;
  padding:6px
}

/* `code-box .code-tools:after`:
   顶部工具栏左侧的三色圆点装饰，模拟 macOS 窗口控制按钮。
*/
code-box .code-tools:after {
  position:absolute;
  left:12px;
  top:11px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fc625d;
  -webkit-box-shadow:20px 0 #fdbc40,40px 0 #35cd4b;
  box-shadow:20px 0 #fdbc40,40px 0 #35cd4b;
  content:' '
}

/* 行号数字输出：
   利用 CSS counter 把每一行的序号渲染出来，而不是手写数字。
*/
pre .line-numbers-rows:before {
  content:counter(itemcounter)
}

/* `.code-pre-line`:
   给代码正文整体左移腾出空间，防止代码内容压住左侧行号。
*/
.code-pre-line {
  padding-left:44px!important
}

/* `.code-copay-btn`:
   代码复制按钮。
   默认 `opacity:0` 隐藏，通常会在 hover 或脚本控制下显示出来。
*/
.code-copay-btn {
  position:absolute;
  top:6px;
  right:8px;
  justify-content:center;
  align-items:center;
  width:26px;
  height:24px;
  display:flex;
  cursor:pointer;
  text-align:center;
  font-size:14px;
  padding:1px 0 0 2px;
  border:none;
  border-radius:6px;
  color:#999;
  opacity:0;
  background-color:hsla(0,0%,90.2%,.2);
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  transition:opacity .2s ease-in-out,visibility .2s ease-in-out;
  z-index:1
}

/* 清理代码块内部 div 默认背景：
   避免高亮插件自带背景色与主题代码容器样式冲突。
*/
.cnblogs_code div {
  background-color:transparent
}

/* `.cnblogs_code_collapse`:
   代码折叠/展开按钮。
   颜色偏暖，目的是把它从冷色代码区中适度提出来。
*/
.cnblogs_code_collapse {
  border:0;
  background-color:#fff;
  cursor:pointer;
  color:#d08770;
  top:1px;
  font-weight:700;
  position:relative;
  font-family:Merriweather,"Open Sans","Microsoft Jhenghei","Microsoft Yahei",sans-serif!important;
  display:inline
}

/* 代码增强区维护说明：
   从这里开始，样式不再只是“排版”，而是和脚本行为有明显协作关系。

   这块主要分成三层：
   1. 代码块的视觉层：阴影、圆角、字体、工具栏样式
   2. 代码块的交互层：复制按钮、折叠按钮、语言信息
   3. 和图片预览脚本的隔离层：避免旧工具栏图标被误识别成正文图片

   维护时建议按目的改：
   - 想改代码块看起来像不像“编辑器窗口”：优先看 `code-box`、`.code-tools`
   - 想改复制按钮体验：优先看 `.code-copay-btn`
   - 想排查“代码块图标被图片预览误抓”：优先看 `#sideToolbar,.cnblogs_code_copy img...`

   这一段最好不要只改 CSS 不看页脚脚本，
   因为图片预览隔离的完整逻辑有一部分在 `页脚.html` 里。 */
/* ===== 代码块、文章信息条与增强功能 =====
   负责代码复制按钮、行内代码、文章目录、标签信息、加载层和推荐按钮区样式。
*/
/* 旧版代码工具条里的图片图标容易被图片预览脚本误识别。
   这里保留原有工具条结构，只隐藏旧图片节点本身；
   更完整的预览隔离逻辑由页脚脚本在 DOM 层处理。 */
#sideToolbar,.cnblogs_code_copy img,.list .out .icontd {
  display:none
}

/* .cnblogs_code_toolbar:
   代码块工具栏容器。
   当前高度被压成 0，说明主题有意弱化默认工具栏视觉，只保留必要功能。
*/
.cnblogs_code_toolbar {
  height:0
}

.cnblogs_code_copy a {
  background-repeat:no-repeat;
  display:inline-block;
  padding:0;
  margin:0;
  width:16px;
  height:16px;
  position:absolute
}

.code_img_closed,.code_img_opened {
  cursor:pointer
}

.cnblogs_code_toolbar a:active,.cnblogs_code_toolbar a:hover,.cnblogs_code_toolbar a:link,.cnblogs_code_toolbar a:link img,.cnblogs_code_toolbar a:visited,.cnblogs_code_toolbar a:visited img {
  background-color:transparent!important;
  border:none!important
}

.cnblogs-markdown code,.cnblogs-post-body code {
  background-color:unset!important;
  border:0!important
}

.postBody .cnblogs-markdown code:not(.language-env),.postBody .cnblogs-post-body code:not(.language-env) {
  padding:2px 4px!important;
  color:#d83b64;
  background-color:#f9f2f4!important;
  border-radius:3px!important;
  border:0!important;
  text-indent:0!important;
  position:relative;
  bottom:1px;
  font-size:13px!important;
  font-weight:600;
  font-family:"Ubuntu Mono",monospace!important
}

#cnblogs_post_body>pre .cnblogs_code_copy a {
  right:5px
}

#cnblogs_post_body>pre {
  margin:10px 15px!important
}

/* #pageAnimationOffOn:
   页面动画开关入口，通常用于让用户手动关闭较重的装饰动效。
   如果页面动效太多影响性能，这个入口非常有用。
*/
#pageAnimationOffOn {
  z-index:999;
  position:absolute;
  top:15px;
  right:20px;
  color:rgba(255,255,255,.6);
  cursor:pointer
}

#pageAnimationOffOnIcon {
  display:inline-block;
  font-weight:700;
  font-size:20px
}

/* .toc:
   文章目录区域。
   当前只设置了底部外边距，说明真正的目录结构样式可能由博客园或其他脚本生成。
*/
.toc {
  margin-bottom:30px
}

/* `.article-info`:
   首屏文章信息区，通常承载发布日期、阅读量、分类、标签等信息。
   采用浅色文字是为了压在大图背景上仍能保持可读性。
*/
.article-info {
  color:#fff;
  margin-top:0
}

.article-info-text {
  margin-bottom:18px
}

/* `.article-info-tag`:
   分类/标签胶囊。
   最常调整的是背景色、字距、左右内边距和圆角大小。
*/
.article-info-tag {
  text-decoration:none;
  display:inline-block;
  font-size:12px;
  font-weight:500;
  letter-spacing:2px;
  border-radius:3px;
  position:relative;
  background-image:none;
  box-shadow:none;
  margin:0 0 0 10px;
  padding:0 5px;
  height:22px;
  line-height:22px;
  color:#fff;
  width:fit-content;
  width:-webkit-fit-content;
  width:-moz-fit-content
}

.article-tag-class-color {
  background-color:#E8A258
}

.article-tag-color {
  background-color:#6fa3ef
}

a[name=top],div#loading {
  background-color:#f0f0f0;
  z-index:1099;
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh
}

#evanyou {
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:-1
}

/* #green_channel:
   文章底部推荐操作区，常见按钮包括“推荐 / 收藏 / 关注 / 微博 / 微信”。
   这里不仅控制排版，还定义了按钮大小、颜色和按压动画。
*/
/* 文章底部操作区说明：
   `#green_channel` 和 `#div_digg` 都属于文章底部交互区，但分工不同：

   - `#green_channel`
     更偏“推荐 / 收藏 / 关注 / 分享”这类外显操作
   - `#div_digg`
     更偏“顶 / 踩”这类内容反馈

   维护时建议：
   - 想整体改按钮区氛围：优先看 `#green_channel`
   - 想统一按钮风格：优先看 `a#green_channel_*` 那组通用规则
   - 想调整单个按钮品牌色：看每个独立按钮自己的规则

   这一块是页面里最像“CTA 区”的地方，
   所以改颜色时要注意别和正文主色完全撞在一起，否则会显得过度吵闹。 */
#green_channel {
  padding:10px 0;
  margin-bottom:10px;
  margin-top:10px;
  border:0;
  border-top:#eee 1px dashed;
  border-bottom:#eee 1px dashed;
  font-size:12px;
  width:100%!important;
  text-align:center;
  display:inline-block;
  vertical-align:middle
}

#blog_post_info #green_channel a {
  display:none
}

/* 推荐区按钮通用样式：
   先统一按钮尺寸、字重、字距、圆角和动效，再分别为每个按钮分配品牌色。
*/
#btn_comment_submit,a#green_channel_digg,a#green_channel_favorite,a#green_channel_follow,a#green_channel_wechat,a#green_channel_weibo {
  text-decoration:none;
  color:#fff;
  margin:10px auto auto;
  width:80px;
  height:30px;
  display:inline-block;
  line-height:30px;
  font-size:12px;
  font-weight:500;
  letter-spacing:2px;
  border-radius:3px;
  text-transform:uppercase;
  transition:all .4s;
  -webkit-transition:all .4s;
  -moz-transition:all .4s;
  -ms-transition:all .4s;
  -o-transition:all .4s;
  position:relative;
  background-image:none
}

a#green_channel_digg:hover,a#green_channel_favorite:hover,a#green_channel_follow:hover,a#green_channel_wechat:hover,a#green_channel_weibo:hover {
  transform:scale(1.02,1.02)
}

a#green_channel_digg:active,a#green_channel_favorite:active,a#green_channel_follow:active,a#green_channel_wechat:active,a#green_channel_weibo:active {
  transform:scale(.95,.95);
  transition:all .4s -125ms
}

/* 下面几项是推荐区按钮的独立配色：
   通过不同颜色快速区分“推荐 / 关注 / 收藏 / 微博 / 微信”。
*/
a#green_channel_digg {
  background-color:#5c8ec6;
  box-shadow:0 15px 18px -6px rgba(95,193,206,.65)
}

a#green_channel_follow {
  background-color:#e33100!important;
  box-shadow:0 15px 18px -6px rgba(227,49,0,.65);
  margin-left:10px
}

a#green_channel_favorite {
  background-color:#ffb515;
  box-shadow:0 15px 18px -6px rgba(255,198,75,.65);
  margin-left:10px
}

a#green_channel_weibo {
  background-color:#ff464b!important;
  box-shadow:0 15px 18px -6px rgba(255,70,75,.65)!important;
  margin-left:10px;
  width:45px
}

a#green_channel_wechat {
  background-color:#3cb034!important;
  box-shadow:0 15px 18px -6px rgba(60,176,52,.65)!important;
  margin-left:10px;
  width:45px
}

/* `#author_profile_info img.author_avatar`:
   作者头像样式。
   圆形 + 外描边 + 阴影可以让头像从页面里更立体地浮出来。
*/
#author_profile_info img.author_avatar {
  border-radius:100%;
  box-shadow:inset 1px 1px 3px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.4);
  border:3px solid #f7f7f7;
  padding:0;
  margin-left:3px;
  margin-right:7px
}

div#green_channel img {
  height:20px;
  width:20px
}

/* `beating`:
   心跳式缩放动画，适合用在爱心、提示图标或强调性小图标上。
*/
@keyframes beating {
  0%,100%,30%,70% {
    transform:scale(1)
  }

  20%,50% {
    transform:scale(1.6)
  }
}

/* ===== 页脚区域与底部装饰 =====
   这里定义页脚主容器、底部文字、图标动画和背景装饰层的展示方式。
*/
/* .footer-t1:
   页脚外层容器。
   `margin:250px 0 0` 表示页脚与正文之间故意拉开较大距离，形成“落地”效果。
*/
.footer-t1 {
  min-height:130px!important;
  margin:250px 0 0!important;
  background:#232323
}

/* `.footer-image`:
   页脚上方的大型装饰图层。
   放在负顶部位置，作用是让页脚和正文之间形成过渡。
*/
.footer-image {
  height:368px;
  z-index:1;
  position:absolute;
  width:100%;
  top:-293px;
  pointer-events:none
}

/* `#footer .footer-box`:
   页脚内容版心，作用类似正文区的 `#home`，用于限制底部内容宽度。
*/
#footer .footer-box {
  width:70%;
  max-width:900px;
  text-align:center;
  margin:0 auto
}

/* `#footer .footer-text`:
   页脚文案主体，比如版权说明、备案信息、站点描述等。
*/
#footer .footer-text {
  font-size:16px;
  padding-bottom:5px;
  border-bottom:1px dashed #333;
  margin:0 auto 5px
}

#footer .footer-text .footer-text-icon {
  display:inline-block;
  margin:0 7px;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  animation:iconAnimate 1.33s ease-in-out infinite
}

/* `footer footer-background` 系列：
   这是页脚的多层背景系统，通常用来做远景/近景/云层叠加的视差感。
   三层背景通过不同尺寸与位置制造景深。
*/
footer footer-background {
  bottom:7.25rem;
  left:0;
  height:18rem;
  position:absolute;
  width:100%;
  z-index:-1;
  transform:translate3d(0,0,0)
}

footer footer-background figure {
  bottom:0;
  left:0;
  height:15rem;
  margin:0;
  position:absolute;
  width:100%
}

footer footer-background .background,footer footer-background .clouds,footer footer-background .foreground {
  right:0;
  bottom:0;
  left:0;
  position:absolute;
  background-repeat:repeat-x!important
}

footer footer-background .foreground {
  background-size:225em 15em!important;
  top:1rem!important
}

footer footer-background .background {
  background-size:225em 21.313em!important;
  top:-1em!important
}

footer footer-background .clouds {
  background-size:225em 15em!important;
  top:-2em!important
}

table#blogCalendar>tbody>tr>td>a {
  color:#bbb
}

/* `.art-dialog` 系列：
   这是弹窗组件的暗色皮肤覆盖样式。
   当页面调用对话框时，这一组规则会统一弹窗背景、按钮和关闭图标风格。
*/
/* 图片预览 / 弹窗基础皮肤说明：
   下面这组 `.art-dialog` 规则主要负责“基础外观统一”，不是主修复逻辑。

   这组样式的职责：
   1. 统一弹窗暗色背景、边框和文字对比度
   2. 统一按钮、关闭图标、状态栏链接的视觉风格
   3. 给移动端安全区修复提供一个稳定的基础样式底座

   为什么这里不直接承担“彻底修复顶部被挡”：
   - 因为图片预览层很多时候是运行时插入的
   - 静态 CSS 只能覆盖一部分已知结构
   - 真正更稳的顶部避让，已经转移到页脚里的运行时脚本处理

   所以可以把这里理解为：
   - 负责把弹窗“长得一致”
   - 不负责单独把所有移动端预览问题彻底修完 */
.art-dialog {
  background-color:rgba(0,0,0,.7)!important;
  border:unset!important;
  color:#f9f9f9!important
}

.art-dialog-header {
  border-bottom:1px solid #444!important
}

.art-dialog-footer {
  padding:0 20px 10px!important
}

.art-dialog-button button {
  padding:2px 6px!important;
  color:#f9f9f9!important;
  border:unset!important;
  font-size:12px!important
}

.art-dialog-button button[i-id=cancel] {
  background-color:#d98d6f!important
}

.art-dialog-statusbar {
  padding:0 0 0 16px!important
}

.art-dialog-button button[i-id=cancel]:hover {
  background-color:#ca8966!important
}

.art-dialog-statusbar a {
  color:#ff9128
}

.art-dialog-content a {
  color:#85d6d9
}

.art-dialog-close {
  color:#fff!important;
  text-shadow:unset!important
}

.art-dialog-button button[i-id="注"] {
  background-color:#5fcc7d!important
}

/* 移动端图片预览弹窗安全区适配：
   部分手机浏览器会把图片预览工具栏顶到屏幕最上方，
   导致返回、关闭、保存等操作被状态栏或刘海区域遮住。
   这里除了给 `.art-dialog` 整体留安全区，也把头部、关闭按钮和顶部状态条一起下压，
   避免只移动外层却没有把实际操作按钮带下来。 */
/* 移动端顶部安全区 CSS 兜底说明：
   这一段现在是“静态兜底层”，优先级低于页脚里的运行时修正脚本。

   分工是这样的：
   1. CSS 先给 `.art-dialog` 留出一个基础安全区，避免弹层刚出现时完全贴顶
   2. 页脚脚本再在运行时识别真实预览节点，并按当前视口偏移做更精准的下压

   为什么只保留这一小段，而不再大面积通配 `.viewer / .pswp / .fancybox`：
   - 大面积通配虽然短期见效，但更容易误伤别的 fixed 组件
   - 现在已经有了运行时脚本，CSS 只需要承担“先别完全贴顶”的职责

   下面每一项分别负责：
   - `.art-dialog`: 整体容器先往下让开
   - `.art-dialog-header`: 头部区域增加上内边距和最小高度
   - `.art-dialog-content`: 内容区与头部之间留出更自然的距离
   - `.art-dialog-close / button / statusbar`: 这些最容易被状态栏压住，单独再推一层
   - `.art-dialog-title`: 用相对定位轻微下移，让标题和按钮保持同一视觉基线 */
@media only screen and (max-width:720px) {
  /* 最小兜底：
     真正的顶部避让现在主要交给页脚里的运行时脚本处理；
     这里仅保留 `.art-dialog` 的基础安全区，避免脚本尚未执行前完全贴顶。 */
  .art-dialog {
    top: max(48px, calc(env(safe-area-inset-top) + 16px)) !important;
  }

  .art-dialog-header {
    padding-top: max(16px, calc(env(safe-area-inset-top) + 14px)) !important;
    min-height: 52px !important;
  }

  .art-dialog-content {
    padding-top: 12px !important;
  }

  .art-dialog-close,
  .art-dialog-header button,
  .art-dialog-statusbar {
    top: max(12px, calc(env(safe-area-inset-top) + 12px)) !important;
  }

  .art-dialog-title {
    position: relative;
    top: max(6px, calc(env(safe-area-inset-top) + 6px)) !important;
  }
}

/* `iconAnimate`:
   页脚或功能图标的轻微呼吸动画。
   多个前缀版本是为了兼容旧浏览器动画实现。
*/
@-moz-keyframes iconAnimate {
  0%,100% {
    transform:scale(1)
  }

  10%,30% {
    transform:scale(.9)
  }

  20%,40%,50%,60%,70%,80% {
    transform:scale(1.1)
  }
}

@-webkit-keyframes iconAnimate {
  0%,100% {
    transform:scale(1)
  }

  10%,30% {
    transform:scale(.9)
  }

  20%,40%,50%,60%,70%,80% {
    transform:scale(1.1)
  }
}

@-o-keyframes iconAnimate {
  0%,100% {
    transform:scale(1)
  }

  10%,30% {
    transform:scale(.9)
  }

  20%,40%,50%,60%,70%,80% {
    transform:scale(1.1)
  }
}

@keyframes iconAnimate {
  0%,100% {
    transform:scale(1)
  }

  10%,30% {
    transform:scale(.9)
  }

  20%,40%,50%,60%,70%,80% {
    transform:scale(1.1)
  }
}

/* ===== 昼夜切换开关 =====
   使用纯 CSS 画出开关、太阳/月亮、云朵和星星，并通过动画体现切换状态。
*/
/* #dayNightSwitch:
   昼夜切换按钮最外层容器。
   整个开关由纯 CSS 组成，内部通过 `.sunMoon`、`.cloud`、`.star` 等元素模拟天体变化。
   如果你只想保留功能不要动画，可以把内部 animation 逐步去掉。
*/
#dayNightSwitch {
  display:inline-block;
  position:absolute;
  z-index:4;
  right:20px;
  top:25px;
  opacity:.65;
  cursor:pointer
}

/* `#dayNightSwitch .onOff`:
   开关轨道本体。
   宽高、边框、阴影一起决定它像不像一个真实的拨动开关。
*/
#dayNightSwitch .onOff {
  background:#324164;
  width:65px;
  height:25px;
  border-radius:25px;
  box-shadow:0 15px 10px -10px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.1);
  border:2px solid #1e2d50;
  overflow:hidden;
  position:relative
}

#dayNightSwitch .onOff * {
  transition:all .4s ease
}

#dayNightSwitch .onOff.daySwitch {
  border:2px solid #52a6bf
}

#dayNightSwitch .onOff.daySwitch .sky {
  width:65px;
  height:25px;
  border-radius:25px;
  position:absolute;
  left:0;
  top:0;
  transform:translate(0,0);
  animation:none!important
}

#dayNightSwitch .onOff.daySwitch .sunMoon {
  background:#ffdf61;
  border:2px solid #d9b31c;
  left:calc(100% - 23px)
}

#dayNightSwitch .onOff.daySwitch .sunMoon .crater {
  transform:scale(0)!important
}

#dayNightSwitch .onOff.daySwitch .sunMoon .cloud {
  opacity:1;
  transform:translatex(0);
  transition-delay:.2s;
  animation:cloudAnim 2.5s linear infinite
}

/* `#dayNightSwitch .onOff .sunMoon`:
   太阳/月亮滑块。
   通过颜色、边框和位置变化，在白天/夜晚两种状态之间切换。
*/
#dayNightSwitch .onOff .sunMoon {
  background:#f0e1a5;
  height:16px;
  width:16px;
  border-radius:100%;
  border:2px solid #ccc091;
  position:absolute;
  left:3px;
  top:2.5px
}

#dayNightSwitch .onOff .sunMoon .crater {
  background:#ccc091;
  width:5px;
  height:5px;
  border-radius:13px;
  position:absolute;
  left:50%;
  top:20%
}

#dayNightSwitch .onOff .sunMoon .crater.crater1 {
  left:30%;
  top:45%;
  transform:scale(.5)
}

#dayNightSwitch .onOff .sunMoon .crater.crater2 {
  left:55%;
  top:60%;
  transform:scale(.7)
}

/* `#dayNightSwitch .onOff .sunMoon .cloud*`:
   滑块上的云朵装饰，主要在白天模式中更明显。
   通过多个小块组合，模拟简化的云形。
*/
#dayNightSwitch .onOff .sunMoon .cloud {
  background:#fff;
  border-radius:3px;
  position:absolute;
  opacity:0;
  transform:translatex(-20px);
  transition-delay:0s
}

#dayNightSwitch .onOff .sunMoon .cloud.part1 {
  width:20px;
  height:2px;
  left:-12px;
  top:calc(50% - 1.5px)
}

#dayNightSwitch .onOff .sunMoon .cloud.part1:before {
  content:"";
  background:#fff;
  border-radius:3px;
  position:absolute;
  width:3px;
  height:3px;
  left:40%;
  top:-100%
}

#dayNightSwitch .onOff .sunMoon .cloud.part1:after {
  content:"";
  background:#fff;
  border-radius:3px;
  position:absolute;
  width:15px;
  height:2px;
  left:20%;
  top:-200%
}

#dayNightSwitch .onOff .sunMoon .cloud.part2 {
  width:3px;
  height:3px;
  left:-1px;
  top:calc(50% + .3px)
}

#dayNightSwitch .onOff .sunMoon .cloud.part2:before {
  content:"";
  background:#fff;
  border-radius:3px;
  position:absolute;
  width:18px;
  height:2px;
  left:-8px;
  top:100%
}

/* `#dayNightSwitch .onOff .star`:
   夜空中的星星装饰点。
   多个 star 元素搭配不同关键帧，营造动态夜空效果。
*/
#dayNightSwitch .onOff .star {
  background:#5ebedb;
  width:5px;
  height:5px;
  border-radius:5px;
  position:absolute;
  left:50%;
  top:10%;
  transform:translate(20px,5px)
}

#dayNightSwitch .onOff .star.star1 {
  transform:translate(10px,15px) scale(.3);
  animation:starAnim1 3s -2.4s linear infinite
}

#dayNightSwitch .onOff .star.star2 {
  transform:translate(15px,-7px) scale(.6);
  animation:starAnim2 3s -1.1s linear infinite
}

#dayNightSwitch .onOff .star.star3 {
  transform:translate(35px,-12px) scale(.9);
  animation:starAnim3 3s -1.5s linear infinite
}

#dayNightSwitch .onOff .star.star4 {
  transform:translate(30px,12px) scale(.4);
  animation:starAnim4 3s -1.9s linear infinite
}

#dayNightSwitch .onOff .star.star5 {
  transform:translate(0,0) scale(.6);
  animation:starAnim5 3s -2.8s linear infinite
}

#dayNightSwitch .onOff .star.sky {
  animation:skyAnim 3s -.4s linear infinite
}

/* `starAnim1 ~ starAnim5`:
   这些关键帧分别控制不同星星的运行轨迹。
   轨迹不一样，能避免所有星星同频运动造成“机械感”。
*/
@keyframes starAnim1 {
  0% {
    transform:translate(5px,30px) scale(.3)
  }

  20% {
    transform:translate(8px,17px) scale(.3)
  }

  50% {
    transform:translate(10px,0) scale(.3)
  }

  80% {
    transform:translate(8px,-17px) scale(.3)
  }

  100% {
    transform:translate(5px,-30px) scale(.3)
  }
}

@keyframes starAnim2 {
  0% {
    transform:translate(10px,30px) scale(.6)
  }

  20% {
    transform:translate(13px,17px) scale(.6)
  }

  50% {
    transform:translate(15px,0) scale(.6)
  }

  80% {
    transform:translate(13px,-17px) scale(.6)
  }

  100% {
    transform:translate(10px,-30px) scale(.6)
  }
}

@keyframes starAnim3 {
  0% {
    transform:translate(30px,30px) scale(.9)
  }

  20% {
    transform:translate(33px,17px) scale(.9)
  }

  50% {
    transform:translate(35px,0) scale(.9)
  }

  80% {
    transform:translate(33px,-17px) scale(.9)
  }

  100% {
    transform:translate(30px,-30px) scale(.9)
  }
}

@keyframes starAnim4 {
  0% {
    transform:translate(25px,30px) scale(.4)
  }

  20% {
    transform:translate(28px,17px) scale(.4)
  }

  50% {
    transform:translate(30px,0) scale(.4)
  }

  80% {
    transform:translate(28px,-17px) scale(.4)
  }

  100% {
    transform:translate(25px,-30px) scale(.4)
  }
}

@keyframes starAnim5 {
  0% {
    transform:translate(0,30px) scale(.6)
  }

  20% {
    transform:translate(3px,17px) scale(.6)
  }

  50% {
    transform:translate(5px,0) scale(.6)
  }

  80% {
    transform:translate(3px,-17px) scale(.6)
  }

  100% {
    transform:translate(0,-30px) scale(.6)
  }
}

/* `skyAnim`:
   控制背景天空装饰点的整体运动轨迹，让夜空更有流动感。
*/
@keyframes skyAnim {
  0% {
    transform:translate(15px,30px) scale(1)
  }

  20% {
    transform:translate(18px,17px) scale(1)
  }

  50% {
    transform:translate(20px,0) scale(1)
  }

  80% {
    transform:translate(18px,-17px) scale(1)
  }

  100% {
    transform:translate(15px,-30px) scale(1)
  }
}

/* `cloudAnim`:
   白天模式云朵的小范围横向漂移动画。
   幅度很小，目的只是让开关显得“活着”。
*/
@keyframes cloudAnim {
  0%,100% {
    transform:translatex(0)
  }

  14% {
    transform:translatex(5px)
  }

  56% {
    transform:translatex(-10px)
  }
}

/* 响应式适配总说明：
   这一整段不是“把桌面样式简单缩小”，而是按屏幕阶段逐步做取舍。

   三个断点的大致职责：
   - 1200px 以下：开始收敛首屏和大标题，隐藏部分装饰性元素
   - 960px 以下：开始明显压缩布局，优先保证正文和摘要可读
   - 720px 以下：进入手机端思路，重点是点击区域、信息密度和可读性

   维护时建议：
   - 如果某个元素在手机端表现不对，先看它有没有在 720px 区块被单独覆盖
   - 如果桌面正常、平板挤压，重点看 960px 这层
   - 如果只是想整体“缩一档”，不要直接在基础样式乱改，优先看对应断点里的覆盖

   最容易出问题的地方通常有三类：
   1. 首屏高度和封面文字
   2. 正文图片 / 摘要图文混排
   3. 固定定位元素，例如开关、工具栏、动画入口 */
/* ===== 响应式适配 =====
   针对 1200 / 960 / 720 像素以下的屏幕分级调整字号、间距和可见元素。
*/
/* 1200px 以下：
   主要针对小屏笔记本和平板横屏，适度缩小首屏和标题字号，隐藏部分装饰性组件。
*/
@media only screen and (max-width:1200px) {
  /* 大屏但不够宽的设备：
     首屏从 100vh 缩到 60vh，减少视觉占用，让内容更早进入视口。 */
  .main-header {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    min-height:240px;
    height:60vh;
    max-height:60vh
  }

  /* 主卡片放宽到 85%：
     避免在中等屏宽下正文显得过窄。 */
  #home {
    width:85%;
    max-width:100vw
  }

  /* 标题链接略微缩小：
     保持大屏气质的同时，降低换行概率。 */
  .entrylistPosttitle a:link,.postTitle a:link {
    font-size:2.8rem
  }

  /* 元信息同步缩小：
     保持标题、摘要、辅助信息之间的比例协调。 */
  .entrylistItemPostDesc,.postDesc {
    font-size:1.3rem
  }

  /* 首页和首屏大标题同步缩小一档：
     防止在 1200px 左右窗口下显得太“顶满”。 */
  .entrylistPosttitle,.page-title {
    font-size:4rem;
    letter-spacing:-1px
  }

  /* 副标题同步收敛：
     让标题组在中等屏宽下仍然有清晰层级。 */
  .sb-title {
    font-size:3.3rem;
    letter-spacing:-1px
  }

  /* 首屏元信息微调：
     避免信息行在较窄宽度下挤压到标题。 */
  p.article-info-text>.postMeta,p.article-info-text>.postMeta i {
    font-size:15px
  }

  /* 副标题缩为最多 4 行：
     中等屏宽下保留说明文字，但不让它抢走太多首屏高度。 */
  .page-description {
    font-size:2rem;
    line-height:2rem;
    -webkit-line-clamp:4
  }

  /* 作者信息同步缩小：
     保持与标题、副标题的视觉配比。 */
  .page-author {
    font-size:1.3rem!important;
    line-height:1.3em
  }

  /* 中等屏幕先隐藏高开销或弱必要模块：
     包括音乐播放器、背景动画、滚动提示等，以提升清爽度和性能。 */
  #aplayer,#evanyou,#music-box,#nhBannerAnimation,.scroll-down,body>meting-js {
    display:none!important
  }

  /* “阅读全文”按钮稍微缩小：
     与整体收缩后的文字比例保持一致。 */
  .c_b_p_desc_readmore {
    font-size:14px;
    width:75px
  }
}

/* 960px 以下：
   进入平板或较窄窗口阶段，开始收缩首屏高度，并隐藏更重的背景动画和装饰图层。
*/
@media only screen and (max-width:960px) {
  /* 缩短首屏高度：
     在窄屏设备上，50vh 比 100vh 更能让用户尽快看到正文内容。 */
  .main-header {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    min-height:240px;
    height:50vh;
    max-height:50vh
  }

  /* 版心改为自动宽度：
     避免固定 70% 宽度在小屏幕上留下过多无效留白。 */
  #home {
    width:auto
  }

  /* 隐藏动画开关：
     小屏下优先简化交互层，减少不必要控制项。 */
  #pageAnimationOffOn {
    display:none
  }

  /* 隐藏重装饰元素：
     包括背景画布、封面辅助图层、摘要右图，优先保内容可读性和性能。 */
  #articleSuffix .articleSuffix-left,#bgCanvas,#homeTopCanvas,.c_b_p_desc_img {
    display:none!important
  }

  /* 右侧正文补齐宽度：
     左装饰隐藏后，让正文右区自动扩展回收空间。 */
  #articleSuffix .articleSuffix-right {
    width:calc(100% - 12px)!important
  }

  /* 列表摘要改为满宽：
     图片隐藏后，文字内容不再需要为右侧图片区预留空间。 */
  .c_b_p_desc,.entrylistPostSummary {
    width:100%!important
  }

  /* 取消正文最小高度：
     避免窄屏下出现多余空白。 */
  .postCon {
    min-height:unset!important
  }
}

/* 720px 以下：
   手机端主要适配区。
   这里会进一步缩小字号、压缩边距，并隐藏大量非必要装饰，优先保证可读性和点击区域。
*/
@media only screen and (max-width:720px) {
  /* 手机端段落横向留白：
     给正文两侧留出少量呼吸空间，防止文字贴边。 */
  #cnblogs_post_body>p {
    padding:0 10px;
    font-size:1em;
    line-height:1.8em
  }

  /* 手机端首屏进一步压缩到 40vh：
     让用户更快进入正文区域。 */
  .main-header {
    margin-bottom:15px;
    height:40vh;
    max-height:40vh
  }

  /* 手机端主卡片去阴影并缩小内边距：
     避免卡片感过重，也为小屏幕释放更多内容空间。 */
  #home {
    padding-left:5px;
    padding-right:5px;
    box-shadow:unset
  }

  /* 手机端标题字号缩小：
     避免超长标题在窄屏上产生过多换行。 */
  .entrylistPosttitle a:link,.postTitle a:link {
    font-size:2.3rem
  }

  /* 手机端正文和摘要文字缩小：
     让整体信息密度更适合手持设备。 */
  .entrylistItemPostDesc,.entrylistPostSummary,.login_tips,.postCon,.postDesc {
    font-size:12px
  }

  .commentform,.menu-button {
    border:none!important;
    margin:0!important
  }

  /* 中央内容容器改为自动宽度：
     防止封面文字区在手机端被固定宽度挤压。 */
  .inner {
    width:auto;
    margin:2rem auto
  }

  .entrylistPosttitle,.page-title {
    font-size:2.6rem
  }

  .sb-title {
    font-size:2.8rem
  }

  /* 副标题行数压到 2 行：
     手机端优先让首屏保持干净。 */
  .page-description {
    font-size:1.6rem;
    -webkit-line-clamp:2
  }

  .page-author {
    font-size:1rem!important
  }

  .menu-button-scroll {
    left:-5px!important;
    width:33px!important
  }

  /* 手机端集中隐藏非核心模块：
     音乐播放器、背景动画、滚动提示、部分评论信息等都被收起。 */
  #aplayer,#articleSuffix,#bgCanvas,#canvas,#evanyou,#homeTopCanvas,#music-box,#pageAnimationOffOn,.comment_date,.scroll-down,body>meting-js {
    display:none!important
  }

  .postMeta {
    font-size:12px
  }

  .postMeta>i,p.article-info-text>.postMeta,p.article-info-text>.postMeta i {
    font-size:13px
  }

  p.article-info-text>.postMeta br {
    display:inline
  }

  /* 手机端标签胶囊缩窄：
     给狭窄屏幕腾出更多横向空间。 */
  .article-info-tag {
    padding:0 3px
  }

  .c_b_p_desc_readmore {
    font-size:13px;
    width:68px;
    border-bottom:1px solid #666
  }

  .postSticky {
    font-size:12px;
    top:-4px
  }

  /* 页脚版心接近满宽：
     保证底部文字在手机端不会显得过于局促。 */
  #footer .footer-box {
    width:95%
  }

  /* 缩小昼夜开关整体尺寸：
     保持移动端顶部控件不抢空间。 */
  #dayNightSwitch .onOff,#dayNightSwitch .onOff.daySwitch .sky {
    width:50px;
    height:18px;
    border-radius:18px
  }

  #dayNightSwitch .onOff .sunMoon {
    height:12px;
    width:12px;
    top:1px
  }

  #dayNightSwitch .onOff.daySwitch .sunMoon {
    left:calc(100% - 19px)
  }

  #dayNightSwitch {
    right:12px;
    top:15px
  }

  #dayNightSwitch .onOff .star {
    top:-50%
  }

  #dayNightSwitch .onOff .sunMoon .crater {
    width:3px;
    height:3px
  }

  #dayNightSwitch .onOff .sunMoon .cloud.part1 {
    width:17px
  }

  #dayNightSwitch .onOff .sunMoon .cloud.part1:after {
    width:12px
  }

  #dayNightSwitch .onOff .sunMoon .cloud.part2:before {
    width:15px
  }
}

/* ===== 自定义鼠标指针 =====
   为默认状态和链接悬停状态替换鼠标样式，强化主题个性化体验。
*/
/* 这里再次定义 body:
   这不是重复设置主题背景，而是单独覆盖鼠标指针资源。
   使用外部 `.cur` 文件让页面拥有定制光标。
*/
body {
  cursor: url(https://cdn.jsdelivr.net/gh/witheredead/cnblog@main/default.cur), default;
}

/* 链接悬停时切换成手型主题光标：
   提示用户当前元素可点击，同时保持整体主题一致性。
*/
a:hover {
  cursor:url(https://cdn.jsdelivr.net/gh/witheredead/cnblog@main/pointer.cur) 15 15, pointer;
}