/*
  花火 Sparkle - 博客园主题样式
  粘贴位置：博客园后台 -> 设置 -> 页面定制 CSS 代码。

  主题目标：
  - 二次元氛围：柔和花火色、轻量渐变、清晰层级。
  - 阅读优先：正文宽度、行高、代码块、表格和移动端都优先保证可读。
  - 功能克制：不包含播放器、打赏、鼠标特效、看板娘等干扰阅读的模块。
  - 图片留空：默认用 CSS 背景；需要图片时在 foot.html 的 imageSlots 中填写。
*/

:root {
  --sparkle-bg: #fff7fb;
  --sparkle-surface: rgba(255, 255, 255, 0.24);
  --sparkle-surface-solid: #ffffff;
  --sparkle-text: #243043;
  --sparkle-muted: #697386;
  --sparkle-soft: #f7ecff;
  --sparkle-line: rgba(112, 82, 126, 0.14);
  --sparkle-primary: #ff6f9f;
  --sparkle-primary-dark: #cf3f74;
  --sparkle-cyan: #57c7d4;
  --sparkle-gold: #f5b84b;
  --sparkle-green: #7cc7a2;
  --sparkle-shadow: 0 22px 60px rgba(94, 61, 84, 0.14);
  --sparkle-shadow-soft: 0 12px 36px rgba(94, 61, 84, 0.1);
  --sparkle-radius: 8px;

  /*
    TODO 图片位：页面底纹。
    默认 none 表示不使用图片，只显示 CSS 渐变背景。
    如果你想使用背景图，也可以在这里手动改为 url("图片地址")。
  */
  --sparkle-page-image: none;

  /*
    TODO 图片位：头图。
    推荐优先在 foot.html -> imageSlots.heroHome / heroPost 填写，由脚本自动写入。
  */
  --sparkle-hero-image: none;

  /*
    以下图片变量均由 foot.html -> imageSlots 自动配置。
    保持 none 即可使用每个区域原有的 CSS 渐变，不会触发无效图片请求。
  */
  --sparkle-list-card-image: none;
  --sparkle-article-image: none;
  --sparkle-sidebar-cover-image: none;
  --sparkle-sidebar-drawer-image: none;
  --sparkle-comment-image: none;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 0 !important;
  margin: 0;
  color: var(--sparkle-text);
  background:
    /* 全局背景保留足够可见度；正文卡片再用局部玻璃层保证阅读。 */
    linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.38)),
    var(--sparkle-page-image),
    radial-gradient(circle at 12% 8%, rgba(255, 202, 219, 0.72), transparent 28rem),
    radial-gradient(circle at 88% 12%, rgba(124, 216, 219, 0.36), transparent 24rem),
    radial-gradient(circle at 50% 100%, rgba(245, 184, 75, 0.22), transparent 26rem),
    linear-gradient(135deg, #fff9fb 0%, #f7fbff 48%, #fff8ed 100%);
  background-attachment: fixed;
  /* 自定义全站背景始终作为一张居中大图显示，不向四周重复平铺。 */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  font-family: "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
  font-size: 16px;
  line-height: 1.72;
}

body::before {
  /*
    轻量花火纹理：纯 CSS 生成，不需要图片资源。
    如果后续加入真实背景图，这层仍可作为柔和遮罩。
  */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.58;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 111, 159, 0.2) 0 0.22rem, transparent 0.24rem),
    radial-gradient(circle at 72% 18%, rgba(87, 199, 212, 0.18) 0 0.18rem, transparent 0.2rem),
    radial-gradient(circle at 82% 72%, rgba(245, 184, 75, 0.18) 0 0.2rem, transparent 0.22rem);
  background-size: 8rem 8rem, 10rem 10rem, 12rem 12rem;
}

a {
  color: var(--sparkle-primary-dark);
  text-decoration: none;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

a:hover {
  color: #a82962;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(87, 199, 212, 0.42);
  outline-offset: 3px;
}

img {
  max-width: 100%;
}

/* 博客园默认容器重置 */
#home {
  position: relative;
  width: 100%;
  min-width: 0 !important;
  max-width: none;
  margin: 0;
}

#header {
  /* 导航叠加在同一张标题头图上，不再单独显示全站页面背景。 */
  position: absolute;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 28px;
  width: 100%;
  min-height: 96px;
  padding: 0 24px;
  border: 0;
  /* 不再叠加导航专属底色，让标题头图从页面顶部连续延展。 */
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
}

#blogTitle {
  float: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 0 1 380px;
  min-width: 0;
  min-height: 96px;
  margin: 0;
  padding: 0;
}

#blogTitle h1,
#blogTitle h2 {
  margin: 0;
  padding: 0;
}

#blogTitle h1 {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
}

#blogTitle h1 a {
  color: #fff;
  font-weight: 800;
  text-shadow: 0 2px 14px rgba(16, 20, 38, 0.72);
}

#blogTitle h2 {
  max-width: 360px;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 个人信息入口位于站点名称与标语之后，打开左侧滑出模块。 */
.sparkle-profile-trigger {
  min-height: 30px;
  margin: 0 0 0 10px;
  flex: 0 0 auto;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 6px;
  background: rgba(16, 20, 38, 0.2);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.sparkle-profile-trigger:hover,
.sparkle-profile-trigger[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, 0.68);
  background: rgba(255, 111, 159, 0.3);
}

#navigator {
  float: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  margin: 0 0 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
}

#navList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 48px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 博客园的随笔、文章、评论、阅读统计统一贴到头部最右侧。 */
#blog_stats,
.blogStats {
  width: 100%;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
  white-space: nowrap;
}

#blog_stats a,
.blogStats a {
  color: inherit;
}

#navList li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 会话操作不是博客导航，脚本会为“退出/注销”项添加本类。 */
#navList .sparkle-account-link,
#navList a[href*="logout"],
#navList a[href*="Logout"] {
  display: none !important;
}

#navList a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(16, 20, 38, 0.16);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

#navList a:hover {
  background: rgba(255, 111, 159, 0.32);
  color: #fff;
}

/*
  独立标题头：heroHome / heroPost / articleTitle 只在这一整块区域显示。
  标题文字没有图片底板，因此不会把头图切成中间的小卡片。
*/
.sparkle-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 500px;
  /* 为叠加在头图顶端的导航预留空间，标题仍位于同一个大图区域内。 */
  padding: 186px 24px 84px;
  overflow: hidden;
  isolation: isolate;
  background-image:
    /* 深色透明遮罩只为提升白色标题对比度，图片仍以整张大图为主体。 */
    linear-gradient(rgba(20, 24, 45, 0.14), rgba(20, 24, 45, 0.52)),
    var(--sparkle-hero-image),
    radial-gradient(circle at 18% 28%, rgba(255, 111, 159, 0.58), transparent 22rem),
    radial-gradient(circle at 82% 20%, rgba(87, 199, 212, 0.52), transparent 22rem),
    radial-gradient(circle at 52% 82%, rgba(245, 184, 75, 0.34), transparent 20rem),
    linear-gradient(135deg, #fff1f7, #effcff 54%, #fff6df);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.sparkle-hero--post {
  min-height: 420px;
}

/*
  文章标题不再使用中间图片卡。articleTitle 已由脚本作为 .sparkle-hero 的完整背景图处理，
  未配置时自动回退到 heroPost。文字仅通过阴影保证对比度。
*/
.sparkle-hero--post .sparkle-hero__content {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.sparkle-hero__shade {
  display: none;
}

.sparkle-hero__content {
  width: min(900px, 100%);
  text-align: center;
}

.sparkle-hero__kicker {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 0 0 14px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 999px;
  background: rgba(20, 24, 45, 0.26);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.sparkle-hero__title {
  margin: 0;
  color: #fff;
  font-size: 58px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 0;
  text-shadow: 0 5px 24px rgba(16, 20, 38, 0.72);
}

.sparkle-hero__subtitle {
  max-width: 720px;
  margin: 18px auto 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: 17px;
  font-weight: 600;
  text-shadow: 0 3px 16px rgba(16, 20, 38, 0.68);
}

.sparkle-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.sparkle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 116px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: var(--sparkle-shadow-soft);
}

.sparkle-button--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--sparkle-primary), #ff9b72);
}

.sparkle-button--primary:hover {
  color: #fff;
  transform: translateY(-1px);
}

.sparkle-button--ghost {
  border: 1px solid rgba(255, 255, 255, 0.56);
  color: #fff;
  background: rgba(20, 24, 45, 0.22);
}

.sparkle-button--ghost:hover {
  color: #fff;
  transform: translateY(-1px);
}

/* 主体布局 */
#main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  width: min(1060px, calc(100% - 32px));
  min-width: 0 !important;
  margin: 24px auto 48px;
  padding: 0;
}

/* 文章目录脱离个人信息抽屉，在宽屏文章页作为独立阅读导轨。 */
body.sparkle-post-page.sparkle-has-toc #main {
  display: block;
  width: min(1320px, calc(100% - 48px));
}

.sparkle-reading-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 252px;
  align-items: start;
  gap: 28px;
  min-width: 0;
}

.sparkle-reading-layout--left {
  grid-template-columns: 252px minmax(0, 1fr);
}

#mainContent,
#sideBar {
  min-width: 0;
}

#mainContent {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
}

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

#sideBar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 120;
  width: min(360px, calc(100vw - 36px));
  height: 100dvh;
  margin: 0;
  padding: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.74);
  background-color: transparent;
  background-image:
    /* 抽屉与页面主体一样使用轻透明玻璃层，保留背景的整体连续感。 */
    linear-gradient(rgba(255, 249, 252, 0.22), rgba(246, 251, 255, 0.38)),
    var(--sparkle-sidebar-drawer-image),
    radial-gradient(circle at 18% 14%, rgba(255, 111, 159, 0.2), transparent 18rem),
    radial-gradient(circle at 90% 80%, rgba(87, 199, 212, 0.18), transparent 18rem);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 18px 0 48px rgba(53, 42, 65, 0.18);
  transform: translateX(calc(-100% - 20px));
  transition: transform 0.24s ease;
  will-change: transform;
}

body.sparkle-sidebar-open {
  overflow: hidden;
}

body.sparkle-sidebar-open #sideBar {
  transform: translateX(0);
}

.sparkle-sidebar-scrim {
  position: fixed;
  inset: 0;
  z-index: 110;
  visibility: hidden;
  opacity: 0;
  background: rgba(28, 31, 48, 0.32);
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

body.sparkle-sidebar-open .sparkle-sidebar-scrim {
  visibility: visible;
  opacity: 1;
}

/* 标头滚出视口后显示的侧栏入口；打开抽屉时自动隐藏，避免遮住遮罩层。 */
.sparkle-drawer-float-trigger {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 105;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 111, 159, 0.3);
  border-radius: 6px;
  /* 与文章卡片一致，只保留轻透明底色，不遮住页面背景。 */
  background: rgba(255, 255, 255, 0.22);
  box-shadow: var(--sparkle-shadow-soft);
  color: var(--sparkle-primary-dark);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  backdrop-filter: blur(14px);
}

.sparkle-drawer-float-trigger.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.sparkle-drawer-float-trigger__glyph {
  position: relative;
  display: block;
  width: 17px;
  height: 13px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.sparkle-drawer-float-trigger__glyph::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 0;
  left: 0;
  border-top: 2px solid currentColor;
}

.sparkle-drawer__head {
  position: sticky;
  top: -18px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  margin: -18px -18px 16px;
  padding: 0 18px;
  border-bottom: 1px solid var(--sparkle-line);
  background: rgba(255, 250, 252, 0.24);
  backdrop-filter: blur(16px);
}

.sparkle-drawer__title {
  margin: 0;
  color: var(--sparkle-text);
  font-size: 15px;
  font-weight: 900;
}

.sparkle-drawer__close {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 111, 159, 0.24);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.28);
  color: var(--sparkle-primary-dark);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.sparkle-drawer__close:hover {
  background: rgba(255, 111, 159, 0.1);
}

#sideBarMain {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sparkle-notice {
  grid-column: 1 / -1;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 111, 159, 0.18);
  border-radius: var(--sparkle-radius);
  background: rgba(255, 255, 255, 0.24);
  color: #60445a;
  font-weight: 700;
  box-shadow: var(--sparkle-shadow-soft);
  backdrop-filter: blur(14px);
}

/* 文章页公告与“目录 + 正文”阅读区分成两个节奏明确的区域。 */
body.sparkle-post-page .sparkle-notice {
  margin-bottom: 32px;
}

/* 首页/列表卡片 */
.day,
.entrylistItem,
.post {
  margin: 0 0 18px;
  padding: 24px;
  border: 1px solid var(--sparkle-line);
  border-radius: var(--sparkle-radius);
  background-color: transparent;
  /* TODO 图片位：首页文章卡片底图，配置在 foot.html -> imageSlots.listCard。 */
  background-image:
    /* 只保留轻量玻璃层，背景图可从文章摘要区域自然透出。 */
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.3)),
    var(--sparkle-list-card-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: var(--sparkle-shadow-soft);
  backdrop-filter: blur(16px);
}

.dayTitle,
.entrylistTitle,
.PostListTitle {
  margin: 0 0 14px;
  color: var(--sparkle-muted);
  font-size: 13px;
  font-weight: 800;
}

/* 首页布局若同时存在日期/列表容器与 .post，只保留外层一张透明卡片。 */
.day .post,
.entrylistItem .post {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  background-image: none;
  box-shadow: none;
  backdrop-filter: none;
}

.postTitle,
.entrylistPosttitle,
.postTitle2,
#topics .postTitle {
  margin: 0 0 12px;
  border: 0;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.35;
}

.postTitle a,
.entrylistPosttitle a,
.postTitle2 a,
#topics .postTitle a {
  color: var(--sparkle-text);
}

.postTitle a:hover,
.entrylistPosttitle a:hover,
.postTitle2 a:hover,
#topics .postTitle a:hover {
  color: var(--sparkle-primary-dark);
}

.postCon,
.c_b_p_desc,
.entrylistItemPostDesc {
  color: #475569;
  font-size: 15px;
}

.postDesc,
.entrylistItemPostDesc,
.postDesc2 {
  margin-top: 16px;
  color: var(--sparkle-muted);
  font-size: 13px;
}

.c_b_p_desc_readmore {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-left: 6px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(87, 199, 212, 0.12);
  color: #197184;
  font-weight: 800;
}

/* 文章页 */
#topics,
.postBody,
#post_detail {
  overflow: visible;
}

#topics {
  padding: 28px;
  border: 1px solid var(--sparkle-line);
  border-radius: var(--sparkle-radius);
  background-color: transparent;
  /* TODO 图片位：文章正文底图，配置在 foot.html -> imageSlots.articleSurface。 */
  background-image:
    /* 正文只保留一层低透明度遮罩，避免与内部 .post 再次叠加。 */
    linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.36)),
    var(--sparkle-article-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: var(--sparkle-shadow);
  backdrop-filter: blur(16px);
}

#topics .postTitle {
  display: none;
}

/*
  博客园文章页通常以 #topics 包住 .post。前者已承担唯一的阅读玻璃层，
  因此内层必须完全透明，避免出现两层白色卡片和两次边框。
*/
body.sparkle-post-page #topics .post,
body.sparkle-post-page #post_detail .post {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  background-image: none;
  box-shadow: none;
  backdrop-filter: none;
}

#cnblogs_post_body {
  color: var(--sparkle-text);
  font-size: 17px;
  line-height: 1.88;
  word-break: break-word;
}

#cnblogs_post_body p {
  margin: 1em 0;
}

#cnblogs_post_body h2,
#cnblogs_post_body h3,
#cnblogs_post_body h4 {
  position: relative;
  margin: 2.1em 0 0.8em;
  color: #20283a;
  font-weight: 900;
  line-height: 1.35;
  scroll-margin-top: 92px;
}

#cnblogs_post_body h2 {
  padding-left: 14px;
  border-left: 5px solid var(--sparkle-primary);
  font-size: 28px;
}

#cnblogs_post_body h3 {
  font-size: 23px;
}

#cnblogs_post_body h4 {
  color: #344054;
  font-size: 19px;
}

#cnblogs_post_body blockquote {
  margin: 1.4em 0;
  padding: 14px 18px;
  border-left: 5px solid var(--sparkle-cyan);
  border-radius: 0 var(--sparkle-radius) var(--sparkle-radius) 0;
  background: rgba(87, 199, 212, 0.1);
  color: #355160;
}

#cnblogs_post_body code {
  padding: 0.15em 0.42em;
  border: 1px solid rgba(207, 63, 116, 0.14);
  border-radius: 6px;
  background: rgba(255, 111, 159, 0.1);
  color: #9d2859;
  font-family: "Cascadia Code", Consolas, "SFMono-Regular", Menlo, monospace;
  font-size: 0.92em;
}

#cnblogs_post_body pre,
.cnblogs-markdown pre {
  margin: 1.5em 0;
  padding: 18px;
  overflow: auto;
  border: 1px solid rgba(36, 48, 67, 0.1);
  border-radius: var(--sparkle-radius);
  background: #172032 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#cnblogs_post_body pre code,
.cnblogs-markdown pre code,
.cnblogs-markdown .hljs {
  padding: 0 !important;
  border: 0;
  background: transparent !important;
  color: #e8edf7 !important;
}

.sparkle-table-wrap {
  width: 100%;
  margin: 1.4em 0;
  overflow-x: auto;
  border: 1px solid var(--sparkle-line);
  border-radius: var(--sparkle-radius);
  background: #fff;
}

#cnblogs_post_body table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  margin: 0;
}

#cnblogs_post_body th,
#cnblogs_post_body td {
  padding: 10px 12px;
  border: 1px solid rgba(36, 48, 67, 0.1);
}

#cnblogs_post_body th {
  background: rgba(255, 111, 159, 0.1);
  color: #392c40;
  font-weight: 900;
}

#cnblogs_post_body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.4em auto;
  border-radius: var(--sparkle-radius);
  box-shadow: var(--sparkle-shadow-soft);
}

#cnblogs_post_body hr {
  height: 1px;
  margin: 2em 0;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(207, 63, 116, 0.32), transparent);
}

/* 侧边栏：背景图只属于个人信息卡，普通模块始终不读取图片。 */
.sparkle-sidecard {
  border: 1px solid var(--sparkle-line);
  border-radius: var(--sparkle-radius);
  background-color: transparent;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.44)),
    var(--sparkle-sidebar-cover-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: var(--sparkle-shadow-soft);
  backdrop-filter: blur(16px);
}

.sparkle-sidecard {
  overflow: hidden;
  padding: 0 20px 20px;
  text-align: center;
}

/*
  sidebar.showProfileCardSurfaceHome / Post 为 false 时启用：
  个人信息只作为内容层显示，让抽屉内只保留一张整体背景图。
*/
body.sparkle-profile-card-plain .sparkle-sidecard {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/* 有内容的普通模块只保留文字分组，不展示底图、边框或玻璃填充层。 */
#sideBar .sparkle-sidebar-module {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/*
  博客园默认会为“侧边栏公告”生成 .newsItem 外框。
  该类由 foot.html 自动添加，只在其中存在花火个人卡时扁平化默认外框。
*/
.sparkle-sidebar-announcement {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* 个人信息卡永远保留在抽屉中，不参与空模块隐藏。 */
#sideBar .sparkle-sidebar-announcement,
#sideBar .sparkle-sidecard {
  display: block !important;
}

.sparkle-sidebar-announcement>h3 {
  display: none;
}

.sparkle-sidebar-empty {
  display: none !important;
}

/*
  只有脚本确认有内容的模块才带 .sparkle-sidebar-module。
  其余分组容器保持无边框透明状态，覆盖博客园旧皮肤可能遗留的多层白底。
*/
#sideBar [id^="sidebar_"]:not(.sparkle-sidebar-module):not(.sparkle-sidebar-announcement),
#sideBar .catList:not(.sparkle-sidebar-module),
#sideBar .newsItem:not(.sparkle-sidebar-module):not(.sparkle-sidebar-announcement) {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/*
  博客园部分皮肤会在顶层模块里再嵌一层 .catList。
  只让顶层模块拥有卡片外观，避免“随笔档案”之后出现无内容的多层边框。
*/
#sideBar [id^="sidebar_"] .catList,
#sideBar .catList .catList,
#sideBar .catList .newsItem {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/*
  个人信息卡使用整张 sidebarCoverHome / sidebarCoverPost 作为背景，不再额外绘制顶部封面块。
  保留该节点但隐藏它，兼容博客园侧栏 HTML 与脚本生成的个人卡结构。
*/
.sparkle-sidecard__cover {
  display: none;
}

.sparkle-sidecard__profile {
  position: relative;
  z-index: 1;
  margin-top: 22px;
}

.sparkle-sidecard__body {
  padding: 0 6px;
}

.sparkle-sidecard__avatar {
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  border: 4px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.86) 0 18px, transparent 19px),
    linear-gradient(135deg, rgba(255, 111, 159, 0.72), rgba(87, 199, 212, 0.68));
  background-size: cover;
  background-position: center;
  box-shadow: 0 12px 30px rgba(207, 63, 116, 0.2);
}

.sparkle-sidecard__avatar.has-image {
  background-size: cover;
  background-position: center;
}

.sparkle-sidecard__eyebrow {
  margin: 0 0 4px;
  color: var(--sparkle-primary-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.sparkle-sidecard__name {
  margin: 0;
  color: var(--sparkle-text);
  font-size: 22px;
  line-height: 1.25;
}

.sparkle-sidecard__text,
.sparkle-sidecard__note {
  margin: 10px 0 0;
  color: var(--sparkle-muted);
  font-size: 14px;
}

.sparkle-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  width: 100%;
  gap: 8px;
  margin-top: 16px;
}

.sparkle-link-grid a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  margin: 0 !important;
  padding: 0 10px;
  border: 1px solid rgba(87, 199, 212, 0.22);
  border-radius: 6px;
  background: rgba(87, 199, 212, 0.1);
  color: #176a7c;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sparkle-link-grid a:hover {
  background: rgba(87, 199, 212, 0.18);
}

.sparkle-link-grid a.is-disabled {
  cursor: default;
  opacity: 0.52;
}

/*
  博客园搜索组件的 DOM 会随皮肤变化：常见结构为 .div_my_zzk / .input_my_zzk / .btn_my_zzk。
  以下选择器同时兼容新版侧栏搜索框，保持输入框和按钮同高、同边框、同玻璃层风格。
*/
#sideBar #sidebar_search,
#sideBar #sb_widget_my_zzk,
#sideBar #sb-sidebarSearchBox,
#sideBar .mySearch {
  display: block !important;
}

#sideBar .div_my_zzk,
#sideBar #sb_widget_my_zzk,
#sideBar #sb-sidebarSearchBox,
#sideBar .mySearch form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0;
}

/*
  不依赖 foot.html 的 DOM 调整：旧皮肤若仍将“找找看”留在下一行，
  直接以其原生搜索容器为定位上下文，把按钮覆盖到输入框右端。
*/
#sideBar .div_my_zzk,
#sideBar #sb_widget_my_zzk,
#sideBar #sb-sidebarSearchBox,
#sideBar .mySearch {
  position: relative;
}

#sideBar .div_my_zzk input[type="text"],
#sideBar #sb_widget_my_zzk input[type="text"],
#sideBar #sb-sidebarSearchBox input[type="text"],
#sideBar .mySearch input[type="text"],
#sideBar .div_my_zzk input[type="search"],
#sideBar #sb_widget_my_zzk input[type="search"] {
  width: 100% !important;
  padding-right: 50px !important;
}

/* foot.html 会把原生输入框和搜索图标归入这一行；图标固定嵌在输入框右侧。 */
#sideBar .sparkle-search-row {
  position: relative;
  display: block !important;
  width: 100%;
  min-height: 40px;
  min-width: 0;
}

#sideBar .sparkle-search-row .input_my_zzk,
#sideBar .sparkle-search-row #q,
#sideBar .sparkle-search-row input[type="search"],
#sideBar .sparkle-search-row input[type="text"] {
  display: block;
  width: 100% !important;
  padding-right: 50px;
}

#sideBar .sparkle-search-row .btn_my_zzk,
#sideBar .sparkle-search-row #btnZzk,
#sideBar .sparkle-search-row input[type="submit"],
#sideBar .sparkle-search-row input[type="button"],
#sideBar .sparkle-search-row button {
  position: absolute !important;
  top: 1px;
  right: 1px;
  width: 40px !important;
  min-width: 40px;
  height: 38px !important;
  min-height: 38px;
  padding: 0;
}

#sideBar .input_my_zzk,
#sideBar #q,
#sideBar input[type="search"],
#sideBar #sidebar_search input[type="text"],
#sideBar #sb_widget_my_zzk input[type="text"] {
  width: 100% !important;
  min-width: 0;
  min-height: 40px;
  margin: 0 !important;
  padding: 0 12px;
  border: 1px solid rgba(87, 199, 212, 0.3);
  border-radius: 6px;
  outline: 0;
  background: transparent;
  color: var(--sparkle-text);
  font: inherit;
  font-size: 14px;
  backdrop-filter: none;
}

#sideBar .input_my_zzk:focus,
#sideBar #q:focus,
#sideBar input[type="search"]:focus,
#sideBar #sidebar_search input[type="text"]:focus,
#sideBar #sb_widget_my_zzk input[type="text"]:focus {
  border-color: rgba(255, 111, 159, 0.58);
  background: transparent;
  box-shadow: none;
}

#sideBar .btn_my_zzk,
#sideBar #btnZzk,
#sideBar .mySearch input[type="submit"],
#sideBar .mySearch button {
  position: absolute !important;
  top: 1px;
  right: 1px;
  z-index: 2;
  width: 40px !important;
  height: 38px !important;
  min-width: 40px;
  min-height: 38px;
  margin: 0 !important;
  padding: 0;
  /* 原生未被包装为 .sparkle-search-row 时，按钮作为输入框内的单一分隔线，不重复描边。 */
  border: 0;
  border-left: 1px solid rgba(255, 111, 159, 0.36);
  border-radius: 0 5px 5px 0;
  background-color: transparent;
  color: transparent !important;
  font: inherit;
  font-size: 0 !important;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: none;
  /* 使用内嵌矢量放大镜，兼容 <input> 与 <button> 两种博客园搜索按钮。 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cf3f74' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m20 20-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(50% - 2px) 50%;
  background-size: 18px 18px;
}

#sideBar .sparkle-search-icon-button {
  font-family: "Segoe UI Symbol", "Microsoft YaHei", sans-serif;
  font-size: 20px;
  line-height: 1;
  text-align: center;
}

#sideBar .btn_my_zzk:hover,
#sideBar #btnZzk:hover,
#sideBar .mySearch input[type="submit"]:hover,
#sideBar .mySearch button:hover {
  border-color: rgba(255, 111, 159, 0.72);
  background-color: transparent;
}

/* 脚本整理后的按钮同样采用输入框内嵌布局，避免与外侧边框产生交叉。 */
#sideBar .sparkle-search-row .btn_my_zzk,
#sideBar .sparkle-search-row #btnZzk,
#sideBar .sparkle-search-row input[type="submit"],
#sideBar .sparkle-search-row input[type="button"],
#sideBar .sparkle-search-row button {
  position: absolute !important;
  top: 1px;
  right: 1px;
  width: 40px !important;
  min-width: 40px;
  height: 38px !important;
  min-height: 38px;
  border: 0;
  border-left: 1px solid rgba(255, 111, 159, 0.36);
  border-radius: 0 5px 5px 0;
  /* 放大镜的手柄偏右，向左微调使视觉重心位于按钮中心。 */
  background-position: calc(50% - 2px) 50%;
}

/* 日历在抽屉中占用空间大且与阅读无关，默认不显示。 */
.Cal,
#blog-calendar,
#sidebar_calendar {
  display: none !important;
}

#sideBar .sparkle-sidebar-module {
  padding: 16px;
}

.catListTitle,
.newsItem h3,
.catList h3,
#sidebar_categories h3,
#sidebar_toptags h3 {
  margin: 0 0 12px;
  color: var(--sparkle-text);
  font-size: 16px;
  font-weight: 900;
}

#sideBar ul {
  padding-left: 18px;
}

#sideBar li {
  margin: 6px 0;
}

/* 文章目录 */
.sparkle-toc {
  /* 目录与正文保持相同透明底板，仅通过更深的文字色保障可读性。 */
  position: sticky;
  top: 24px;
  align-self: start;
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--sparkle-line);
  border-radius: var(--sparkle-radius);
  background: var(--sparkle-surface);
  box-shadow: var(--sparkle-shadow-soft);
  backdrop-filter: blur(16px);
}

.sparkle-reading-layout--right .sparkle-toc {
  grid-column: 2;
}

.sparkle-reading-layout--left .sparkle-toc {
  grid-column: 1;
}

.sparkle-toc__title {
  margin: 0 0 10px;
  color: #172235;
  font-size: 15px;
  font-weight: 900;
}

.sparkle-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sparkle-toc__item {
  margin: 2px 0;
}

.sparkle-toc__item--h3 {
  padding-left: 12px;
}

.sparkle-toc__item--h4 {
  padding-left: 24px;
}

.sparkle-toc a {
  display: block;
  padding: 6px 8px;
  border-radius: 6px;
  color: #2d3a4e;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}

.sparkle-toc a:hover,
.sparkle-toc a.is-active {
  background: rgba(255, 111, 159, 0.2);
  color: #8b1d4d;
}

/* 文章签名：只保留版权与来源，不做打赏 */
.sparkle-signature {
  margin-top: 24px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 111, 159, 0.18);
  border-radius: var(--sparkle-radius);
  background: rgba(255, 255, 255, 0.24);
  color: #60445a;
  font-size: 14px;
}

/*
  评论区：参考文艺主题的“完整讨论区”节奏重新排版。
  这里不用小字号压缩评论，而是保留清晰的作者行、正文区和操作区，
  让长评论、代码片段和移动端输入都有足够的呼吸空间。
*/
#blog-comments-placeholder,
#comment_form,
#comment_form_container,
.commentform,
#commentbox_main,
#comment_nav {
  min-width: 0;
}

#blog-comments-placeholder {
  margin-top: 32px;
}

.feedback_area_title,
#commentform_title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--sparkle-line);
  color: var(--sparkle-text);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.35;
}

.feedback_area_title::after,
#commentform_title::after {
  content: "";
  display: block;
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 111, 159, 0.48), transparent);
}

/* TODO 图片位：评论发表区底图，配置在 foot.html -> imageSlots.commentBackground。 */
#comment_form {
  margin: 26px 0 0;
  padding: 28px;
  border: 1px solid var(--sparkle-line);
  border-radius: var(--sparkle-radius);
  background-color: transparent;
  background-image:
    /* 评论表单保持中等透明度，优先保证长文本输入和提示信息可见。 */
    linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.44)),
    var(--sparkle-comment-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: var(--sparkle-shadow);
}

#comment_form_container {
  width: auto !important;
  margin: 0;
}

#comment_form_container p {
  margin: 0 0 14px;
  color: var(--sparkle-muted);
  font-size: 14px;
}

#comment_form_container .author {
  width: min(360px, 100%);
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--sparkle-line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.3);
  color: var(--sparkle-text);
}

.commentbox_title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  margin: 0 0 10px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--sparkle-line);
}

.commentbox_title_left,
.commentbox_title_right {
  color: var(--sparkle-muted);
  font-size: 14px;
}

#tbCommentBody,
#comment_form_container .comment_textarea {
  display: block;
  width: 100% !important;
  height: 220px !important;
  min-height: 220px !important;
  padding: 16px 18px;
  border: 1px solid var(--sparkle-line);
  border-radius: var(--sparkle-radius);
  background: rgba(255, 255, 255, 0.32);
  color: var(--sparkle-text);
  font: inherit;
  font-size: 16px;
  line-height: 1.75;
  resize: vertical;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

#tbCommentBody:hover,
#tbCommentBody:focus,
#comment_form_container .comment_textarea:hover,
#comment_form_container .comment_textarea:focus {
  outline: 0;
  border-color: rgba(255, 111, 159, 0.56);
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 0 0 4px rgba(255, 111, 159, 0.1);
}

#commentbox_opt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 14px;
  color: var(--sparkle-muted);
}

#commentbox_opt a {
  color: #197184;
}

#btn_comment_submit {
  min-width: 116px;
  min-height: 44px;
  margin-top: 16px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--sparkle-primary), #ff9b72);
  box-shadow: 0 10px 22px rgba(207, 63, 116, 0.2);
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}

#btn_comment_submit:hover {
  transform: translateY(-1px);
}

.feedbackItem {
  position: relative;
  margin: 0 0 18px;
  padding: 22px 24px;
  border: 1px solid var(--sparkle-line);
  border-radius: var(--sparkle-radius);
  background-color: transparent;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.38)),
    var(--sparkle-comment-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: var(--sparkle-shadow-soft);
}

.feedbackListSubtitle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  color: var(--sparkle-muted);
  font-size: 14px;
  line-height: 1.6;
}

.feedbackListSubtitle a {
  font-weight: 800;
}

.feedbackCon {
  margin-top: 14px;
  color: var(--sparkle-text);
  font-size: 16px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

/*
  博客园评论正文通常位于 .feedbackCon .blog_comment_body。
  只给内层正文加底板，避免外层和内层同时产生边框与内边距。
*/
.feedbackCon .blog_comment_body {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid rgba(87, 199, 212, 0.18);
  border-radius: 6px;
  background: rgba(87, 199, 212, 0.14);
  color: var(--sparkle-text);
  font-size: 16px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.feedbackCon .blog_comment_body> :first-child,
.blog_comment_body> :first-child {
  margin-top: 0;
}

.feedbackCon .blog_comment_body> :last-child,
.blog_comment_body> :last-child {
  margin-bottom: 0;
}

/* 兼容旧版评论 DOM：没有 .blog_comment_body 时才由 .feedbackCon 自身承担正文底板。 */
.feedbackCon:not(:has(.blog_comment_body)) {
  padding: 16px 18px;
  border: 1px solid rgba(87, 199, 212, 0.18);
  border-radius: 6px;
  background: rgba(87, 199, 212, 0.14);
}

.feedbackCon pre,
.blog_comment_body pre {
  max-width: 100%;
  overflow: auto;
}

.feedbackCon img,
.blog_comment_body img {
  max-width: 100%;
  height: auto;
}

#tbCommentBodyPreview {
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(87, 199, 212, 0.18);
  border-radius: 6px;
  background: rgba(87, 199, 212, 0.14);
  color: var(--sparkle-text);
  overflow-wrap: anywhere;
}

.comment_vote,
.feedbackManage,
.comment_date,
.feedbackItem .louzhu {
  margin-top: 12px;
  color: var(--sparkle-muted);
  font-size: 13px;
}

.feedbackItem .louzhu {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0 4px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 111, 159, 0.12);
  color: var(--sparkle-primary-dark);
  font-weight: 900;
}

.comment_quote {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--sparkle-gold);
  background: rgba(245, 184, 75, 0.1);
  color: #66533a;
}

#comment_nav,
#comments_pager_bottom {
  margin: 20px 0 0;
  text-align: center;
}

/* 进度条与返回顶部 */
.sparkle-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--sparkle-primary), var(--sparkle-cyan), var(--sparkle-gold));
}

.sparkle-top-button {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 80;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 111, 159, 0.22);
  border-radius: 50%;
  color: var(--sparkle-primary-dark);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--sparkle-shadow-soft);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  backdrop-filter: blur(14px);
}

.sparkle-top-button.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* 移除与主题目标无关或干扰阅读的博客园默认区域 */
#ad_t2,
#ad_c1,
#ad_c2,
#under_post_news,
#under_post_kb,
.c_ad_block,
#cnblogs_c1,
#cnblogs_c2,
#green_channel .reward,
#div_digg .reward {
  display: none !important;
}

/* 页脚 */
#footer {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto 36px;
  padding: 18px;
  border: 1px solid var(--sparkle-line);
  border-radius: var(--sparkle-radius);
  background: rgba(255, 255, 255, 0.24);
  color: var(--sparkle-muted);
  text-align: center;
  box-shadow: var(--sparkle-shadow-soft);
  backdrop-filter: blur(14px);
}

/* 移动端：保留阅读流，不强行隐藏内容 */
@media (max-width: 980px) {
  #main {
    grid-template-columns: 1fr;
  }

  .sparkle-reading-layout,
  .sparkle-reading-layout--left {
    grid-template-columns: 1fr;
  }

  .sparkle-reading-layout .sparkle-toc {
    grid-column: auto;
  }

  .sparkle-toc {
    position: static;
    max-height: none;
  }
}

@media (max-width: 720px) {
  #header {
    position: absolute;
    inset: 0 0 auto;
    display: block;
    padding: 14px 16px;
  }

  #blogTitle {
    float: none;
    align-items: center;
    flex: none;
    min-height: 0;
    text-align: center;
  }

  #blogTitle h1 {
    justify-content: center;
  }

  #blogTitle h2 {
    max-width: none;
    white-space: normal;
  }

  #navigator {
    min-height: 0;
    margin-left: 0;
    align-items: center;
  }

  #blog_stats,
  .blogStats {
    text-align: center;
  }

  #navList {
    justify-content: center;
    min-height: 0;
    margin-top: 12px;
  }

  #navList a {
    min-height: 34px;
    padding: 0 11px;
    font-size: 13px;
  }

  .sparkle-hero {
    min-height: 420px;
    padding: 204px 18px 58px;
  }

  .sparkle-hero__title {
    font-size: 36px;
  }

  .sparkle-hero__subtitle {
    font-size: 15px;
  }

  #main {
    width: min(100% - 20px, 1180px);
    margin-top: 14px;
  }

  .day,
  .entrylistItem,
  .post,
  #topics {
    padding: 18px;
  }

  .sparkle-hero--post .sparkle-hero__content {
    padding: 0;
  }

  #comment_form {
    padding: 20px 16px;
  }

  .feedbackItem {
    padding: 18px;
  }

  .feedbackCon .blog_comment_body,
  .feedbackCon:not(:has(.blog_comment_body)) {
    padding: 14px;
    font-size: 15px;
  }

  #cnblogs_post_body {
    font-size: 16px;
    line-height: 1.82;
  }

  #cnblogs_post_body h2 {
    font-size: 24px;
  }

  #cnblogs_post_body h3 {
    font-size: 20px;
  }

  .sparkle-top-button {
    right: 14px;
    bottom: 14px;
  }
}