/* ============================================================================
   main.67c13dcf3a42.css — notmyidea-plus 主样式表
   ============================================================================
   加载顺序：fonts.67c13dcf3a42.css（@font-face 资源声明）→ main.67c13dcf3a42.css。
   分类样式表（memos.67c13dcf3a42.css / photos-map.67c13dcf3a42.css / tools.67c13dcf3a42.css / experimental-*.css）
   由各自的模板按页引入，不要并进本文件，否则首页会白下载它们。

   目录（`grep -n '^/\* ===== ' main.67c13dcf3a42.css` 可随时重新列出）
     0. 浏览器重置                    —— Eric Meyer reset，原独立 reset.css
     1. 设计令牌（:root）             —— 颜色 / 字体 / 圆角，全站唯一来源
     2. 元素基础                      —— body、标题、链接、段落、列表、引用、表格
     3. 布局骨架                      —— .body / #banner / #content / #extras / #about / #contentinfo
     4. 文章列表与元信息
     5. 评论区（加载按钮）
     6. 代码块（Shiki 预处理输出）
     7. 首页                          —— 首图、Recent Articles 面板
     8. 文章元信息细节                 —— post-info、线性图标、更新日期、新文章绿点、提醒条
     9. 响应式                        —— 移动端总成 + 平板 / 高分屏 / 桌面文章页
    10. 翻页、分类计数与年份分组
    11. 正文列表与表格
    12. 页脚徽标
    13. 分类专属：Reading
    14. 正文行内强调、<del>、折叠块
    15. 图片、灯箱与图文布局           —— gallery / carousel / media 布局
    16. 分类专属：Series 旅行系列目录

   约定
     - 断点只用这几个：480px / 768px / 1024px。新增断点前先确认现有的不够用。
     - 颜色、圆角、字体一律取第 1 节的令牌，不要新写字面量。
     - 悬浮下划线的粗细 / 间隔 / 速度也是令牌（--underline-*）。碰任何链接规则前
       先看第 1 节那段说明：间隔挂在 padding-bottom 上、速度挂在 transition 简写里，
       随手写 `padding` 或 `transition` 都会静默改掉下划线的样子。
     - 组件与它自己的 @media 写在一起（见第 11 / 12 / 13 节），这是本文件的惯例；
       第 9 节是历史遗留的移动端总成，跨多个组件，新代码不要再往里加。
     - `!important` 全部清掉了（曾有 399 个），本文件现在只剩 2 处，都是布局护栏
       且写明了理由。新代码默认不许用，先想清楚为什么会输：
         · 输给 id 选择器 → 给那条 id 规则套 `:where()` 把特异性归零（见 #extras /
           #contentinfo），而不是给自己加 `!`。
         · 输给更具体的组件规则 → 那通常说明组件本来就该赢，让它赢即可。
         · 同特异性、输给加载在后的页面级样式表 → 这才是允许的例外，加 `!` 并
           写明原因（见第 9 节后面两条 .body 护栏）。
       为什么不能逐条摘：`!important` 之间会互相作用。摘掉高特异性那条、留下
       特异性更低的兄弟规则，胜负会直接反转（重要性优先于特异性）。所以要么
       整批摘干净并做等价校验，要么别动。
   ============================================================================ */

/* ===== 0. 浏览器重置 ===== */

/* Eric Meyer's Reset CSS v1.0 (2008-02-12) — http://meyerweb.com/eric/tools/css/reset/
   原为独立的 reset.css，因只有本文件依赖它、且必须紧接其前加载，已并入此处。 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  background: transparent;
  border: 0;
  font-size: 100%;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

:focus { outline: 0; }

ins { text-decoration: none; }
del { text-decoration: line-through; }

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

/* ===== 1. 设计令牌 ===== */
@font-face {
  font-family: 'AvaraBold';
  src: url('fonts/AvaraBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --font-sans: 'OPPO Sans 4.0', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Roboto Mono', Consolas, Monaco, 'Courier New', monospace;
  --font-ui: var(--font-sans);
  --color-accent: #C74350;
  --color-accent-soft: #e56b73;
  --color-text: #000305;        /* 结构性近黑：导航底色 / 站点标题，保持强对比 */
  --color-text-body: #222222;   /* 正文阅读文字：略微降低刺眼的纯黑对比 */
  --color-bg: #F5F4EF;
  --color-bg-content: #fff;
  --color-text-inverse: #fff;   /* 深底（导航 / 主色块 / 按钮）之上的文字 */
  --color-bg-subtle: #f8f9fa;
  --color-border: #ddd;
  --color-text-secondary: #666;
  --color-text-muted: #999;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  /* 悬浮下划线（gradient 机制）的三个维度，全站唯一来源。
     基准规则见第 2 节的 `a`，写法是把主色渐变钉在 padding box 的 left bottom。
     改动别处时留意这两个耦合陷阱——它们不会报错，只会静默改掉下划线：
       · 间隔挂在 padding-bottom 上：任何写 `padding` 简写的规则都会覆盖它。
         需要保留下划线就带上 var(--underline-gap)，确实要退出就显式写 0。
       · 速度挂在 transition 简写里：任何重写 `transition` 的规则都会掐掉动画，
         记得把 `background-size var(--underline-speed) ease` 一起写回去。
     退出下划线要同时重置 background-image 和 padding-bottom 两项，缺一不可
     （只重置前者会留下幽灵间距，只重置后者下划线照旧会画出来）。
     memos 的标签 / 阅读更多刻意用了另一套 ::after 实现，原因见 memos.67c13dcf3a42.css。 */
  --underline-thickness: 1.5px;
  --underline-gap: 2px;
  --underline-speed: 0.25s;
  --callout-info-bg: #b6ffd4;
  --callout-stale-bg: #ffe8a3;
  --callout-deprecated-bg: #ffd4d8;
  --callout-superseded-bg: #dbeafe;
  --callout-fg: #111;
}

/* ===== 2. 元素基础 ===== */

/* --- Body --- */
body {
  background: var(--color-bg);
  color: var(--color-text-body);
  font-size: 18px; /* Base font size: 14px */
  font-family: var(--font-sans);
  line-height: 1.8em;
  letter-spacing: 0.03em;
  margin: 0;
  padding: 0;
  text-align: left;
  /* 取消移动端点击时的蓝色高亮遮罩（该属性可继承） */
  -webkit-tap-highlight-color: transparent;
}

/* 划词选中：用主色的柔和淡染，替代与暖色背景脱节的系统蓝 */
::selection {
  background: rgba(199, 67, 80, 0.16);
  color: inherit;
}
::-moz-selection {
  background: rgba(199, 67, 80, 0.16);
  color: inherit;
}

code {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
  line-height: 1.5;
}

:not(pre) > code {
  background-color: #eff0f3;
  border-radius: 8px;
  padding: 2px 6px;
  color: #5086a1;
}

pre,
kbd,
samp {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}

/* --- Headings --- */
h1 {font-size: 1.8em }
h2 {font-size: 1.571em}	/* 22px */
h3 {font-size: 1.429em}	/* 20px */
h4 {font-size: 1.286em}	/* 18px */
h5 {font-size: 1.143em}	/* 16px */
h6 {font-size: 1em}		/* 14px */

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: .8em;
  font-family: var(--font-sans);
}

/* h3, h4, h5, h6 { margin-top: .8em; } */
h3, h4, h5, h6 { margin-top: 1.2em; }

hr {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Anchors - memos 风格：悬浮变红色 + 从左到右动态下划线 */
a {
  outline: 0;
  text-decoration: none;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-size: 0% var(--underline-thickness);
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-bottom: var(--underline-gap);
  transition: color 0.2s ease, background-size var(--underline-speed) ease;
}
a img { border: 0; text-decoration: none; }
a:link, a:visited {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover, a:active {
  color: var(--color-accent);
  background-size: 100% var(--underline-thickness);
  text-decoration: none;
}

/* 标题内的链接不显示下划线动效（两项都要重置，见第 1 节说明） */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  background-image: none;
  padding-bottom: 0;
}

/* --- Paragraphs --- */
div.line-block,
p { margin-top: 1em;
margin-bottom: 1em;}

strong, b {font-weight: bold;}
em, i {font-style: italic;}

/* --- Lists --- */
ul {
  list-style: outside disc;
  margin: 0em 0 0 1.5em;
}

ol {
  list-style: outside decimal;
  margin: 0em 0 0 1.5em;
}

li {
  font-size: 18px;
  margin-top: 0.5em;
  margin-bottom: 0.8em;
  list-style: none;
}

ul.archives li {
  font-size: 18px;
  margin-top: 0.4em;
  margin-bottom: 0;
  list-style: none;
}

.post-info {
  display: flex;
  font-size: 16px;
  line-height: 1em;
  padding:5px;
}

.post-info p{
  margin-top: 1px;
  margin-bottom: 1px;
}

.post-info time {
  font-family: var(--font-mono);
  font-size: 0.95em;
  letter-spacing: -0.02em;
}

.readmore { float: right }

dl {margin: 0 0 1.5em 0;}
dt {
  font-weight: bold;
}
dd {margin-left: 1.5em;}

pre:not(.shiki) {
  margin: 1rem 0 1rem 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* --- Quotes --- */
blockquote {
  position: relative;
  max-width: 90%;
  margin: 1.5rem auto 2rem;
  padding: 0.1rem 1rem 0.1rem 1.4rem;
  line-height: 1.7;
  font-size: 1em;
  color: var(--color-text-secondary);
  background: var(--color-bg-content);
  border-left: 3px solid #e0e0e0;
  border-radius: 0;
}

blockquote p:not(:last-child) {
  margin-bottom: 1em;
}

blockquote p {
  margin-top: 0;
  margin-bottom: 0;
}

div.note {
  float: right;
  margin: 5px;
  font-size: 85%;
  max-width: 300px;
}

/* --- Tables --- */
table {margin: .5em auto 1.5em auto; width: 98%;}

thead th {padding: .5em .4em; text-align: left;}
tbody td {padding: .5em .4em;}

/* --- HTML5 tags --- */
header, section, footer,
aside, nav, article, figure {
  display: block;
}

/* ===== 3. 布局骨架 ===== */
.body {
  box-sizing: border-box;
  clear: both;
  width: 100%;
  margin: 0 auto;
  max-width: 860px;
  /*padding: 20px 30px 100px;*/
}
img.right, figure.right {float: right; margin: 0 0 2em 2em;}
img.left, figure.left {float: left; margin: 0 2em 2em 0;}

/* --- Header --- */
#banner {
  margin: 0 auto;
  padding: 2.5em 0 0 0;
}

/* --- Banner --- */
#banner h1 {
  font-family: var(--font-sans);
  font-size: 2.2em;
  line-height: 0.2em;
}
#banner h1 a:link, #banner h1 a:visited {
  color: var(--color-text);
  display: block;
  /*font-weight: bold;*/
  margin: 0 0 .6em .2em;
  text-decoration: none;
  background-image: none;
}
#banner h1 a:hover, #banner h1 a:active {
  background: none;
  color: var(--color-accent);
  text-shadow: none;
}

#banner h1 strong {font-size: 0.36em; font-weight: normal;}

/* --- Main Nav --- */
#banner nav {
  background: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1.143em;
  height: auto;
  line-height: 1.4;
  margin: 0 auto 1.2em auto;
  padding: 0;
  text-align: left;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.16);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
}

#banner nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  width: 100%;
}

#banner nav li {
  list-style: none;
  float: none;
  display: inline-flex;
  align-items: center;
  margin: 0;
  height: auto;
}

#banner nav a:link, #banner nav a:visited {
  color: var(--color-text-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 42px;
  padding: 0.48rem 0.95rem;
  text-decoration: none;
  background-image: none;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  line-height: 1;
}

#banner nav a:hover, #banner nav a:active,
#banner nav .active a:link, #banner nav .active a:visited {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  text-shadow: none;
}

/* --- Body --- */
#content {
  background: var(--color-bg-content);
  margin-bottom: 2em;
  overflow: hidden;
  padding: 20px 30px 60px;
  /*max-width: 860px;*/
  border-radius: 10px;
}

#content dl {
  line-height: 1.6em;
}

#content ul {
  line-height: 1.6em;
}

img, #video {
  max-width: 800px;
}

/* Plyr 播放器在文章内容流中自适应宽度 */
.entry-content .plyr,
.memo-content-text .plyr {
  max-width: 100%;
}
.entry-content video[data-plyr],
.memo-content-text video[data-plyr] {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.entry-content .plyr--video,
.memo-content-text .plyr--video {
  max-width: 800px;
}
img.idximg {
  width: 100%;
  height: auto;
  border-radius: 6px;
}
img.link-avatar {
  vertical-align:middle;
  width: 18px;
}

/* --- Extras --- */
/* id 只作为定位钩子，用 :where() 把它的特异性归零，好让后面按 class 写的
   响应式规则（.body 等）能正常覆盖，而不必靠 !important 硬压。 */
:where(#extras) {
  margin: 0 auto 0 auto;
  overflow: hidden;
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 2em;
  text-align: right;
}

#extras ul {list-style: none; margin: 0;}
#extras li {border-bottom: 1px solid #fff;}
#extras h2 {
  color: var(--color-accent);
  font-size: 1.429em;
  margin-bottom: .25em;
  padding: 0 3px;
}

#extras a:link, #extras a:visited {
  color: var(--color-accent);
  display: block;
  text-decoration: none;
  /* 底边留 var(--underline-gap)，别用 .3em 之类的字面量——那会把下划线推低到
     和全站不一致的位置（这里原先桌面 .3em、移动端 2px，两头不一样）。 */
  padding: .3em .25em var(--underline-gap);
}

#extras a:hover, #extras a:active {
  color: var(--color-accent);
  background-size: 100% var(--underline-thickness);
}

/* --- Blogroll --- */
#extras .blogroll {
  float: left;
  width: 615px;
}

#extras .blogroll li {float: left; margin: 0 20px 0 0; width: 185px;}

/* --- Social --- */
#extras .social {
  float: right;
  width: 175px;
}

#extras div[class='social'] a {
  background-repeat: no-repeat;
  background-position: 3px 6px;
  padding-left: 25px;
}

/* --- About --- */
#about {
  background: var(--color-bg-content);
  font-style: normal;
  margin-bottom: 2em;
  overflow: hidden;
  padding: 20px;
  text-align: left;
  border-radius: 10px;
}

#about .primary {float: left; width: 165px;}
#about .primary strong {color: #C64350; display: block; font-size: 1.286em;}
#about .photo {float: left; margin: 5px 20px;}

#about .url:link, #about .url:visited {text-decoration: none;}

#about .bio {float: right; width: 500px;}

/* --- Footer --- */
/* 同 #extras：id 归零特异性，让响应式规则可以正常覆盖。 */
:where(#contentinfo) {
  background-color: white;
  border-radius: 10px;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 2em;
}

/* ===== 4. 文章列表与元信息 ===== */

/* --- Blog --- */
.entry-title {font-size: 1.4em; font-weight: 600; margin-bottom: 16px; margin-top: 16px;}
.entry-title a:link, .entry-title a:visited {text-decoration: none; color: #333;}
.entry-title a:visited {background-color: var(--color-bg-content);}

/* 日期时间使用等宽字体，紧凑美观 */
time {
  font-family: var(--font-mono);
  font-size: 0.95em;
  letter-spacing: -0.02em;
}

ul.column-4 {
  -moz-column-count: 4;
  column-count: 4;
  -webkit-columns: 4;
  columns-count: 4;
  -moz-column-rule: 1px dashed #ccc;
  -webkit-column-rule: 1px dashed #ccc;
  column-rule: 1px dashed #ccc;
}

ul.archives li time {
  color: #999999;
  font-family: var(--font-mono);
  font-size: 0.95em;
  letter-spacing: -0.02em;
}

ul.archives li a {
  margin-left: 1rem;
}

/* ===== 5. 评论区（加载按钮） ===== */

.BtnGroup,
.BtnGroup-item {
  border-radius: 0.375rem;
  display: inline-flex;
}

.BtnGroup-item {
  border-color: transparent;
  border-width: 1px;
  padding-inline-end: 0.25rem;
  padding-bottom: 0.125rem;
  padding-inline-start: 0.25rem;
  padding-top: 0.125rem;
}

.btn {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  background-color: var(--color-bg-subtle);
  color: #212529;
  font-size: 16px;
  cursor: pointer;
  transition-duration: 0.1s;
}

.btn:hover {
  background-color: var(--color-bg-subtle);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn:active {
  background-color: var(--color-bg-subtle);
  border-color: var(--color-accent);
  color: var(--color-accent);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition-property: none;
}

.BtnGroup-item .btn:hover {
  background-color: var(--color-bg-subtle);
  border-color: transparent;
}

.BtnGroup-item.BtnGroup-item--selected .btn:hover {
  background-color: inherit;
}

.BtnGroup {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

/* ===== 6. 代码块（Shiki 预处理输出） ===== */

.entry-content pre.shiki {
  margin: 1rem 0;
  padding: 1.2rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background-color: #fdf6e3;
  background-image:
    linear-gradient(to right, #fdf6e3 20%, transparent),
    linear-gradient(to left, #fdf6e3 20%, transparent),
    radial-gradient(farthest-side at left center, rgba(0,0,0,.10), transparent),
    radial-gradient(farthest-side at right center, rgba(0,0,0,.10), transparent);
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 16px 100%, 16px 100%;
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-attachment: local, local, scroll, scroll;
  overflow-x: auto;
  white-space: pre;
  word-wrap: normal;
  line-height: 1.4;
  tab-size: 4;
  -moz-tab-size: 4;
}

.entry-content pre.shiki code {
  background: transparent;
  border-radius: 0;
  padding: 0;
  line-height: inherit;
  display: block;
  /* pre 继承的 white-space:pre 会让 .line 块之间的 \n 被渲染成空行；
     改为 normal 使该层的换行符可折叠，消除多余行距 */
  white-space: normal;
}

/* 每行作为独立块，背景色（diff / highlight）覆盖完整行高，消除行间缝隙；
   white-space:pre 恢复代码内部空格/缩进的原样输出 */
.entry-content pre.shiki .line {
  display: block;
  white-space: pre;
}

/* 空行（无内联内容的 .line）高度为 0，加零宽空格使其撑起行高。
   有行号的块由行号 ::before 文字撑高，无需此规则。 */
.entry-content pre.shiki:not(.has-line-numbers) .line:empty::before {
  content: "\200B";
}

/* Shiki: line numbers
   tab 已在构建时展开为空格，无需 tab stop 补偿，::before 自然流式布局即可 */
.entry-content pre.shiki.has-line-numbers {
  counter-reset: shiki-line;
}

.entry-content pre.shiki.has-line-numbers .line {
  counter-increment: shiki-line;
}

/* 格式：「 N │  code」
   10-99 行：「 10 │  」= 7 chars
   1-9  行：「  1 │  」= 7 chars（:nth-child 再加一个前导空格）
   首位多一个空白列，确保左侧高亮指示条（3px inset box-shadow）
   落在空白区而不压住数字 */
.entry-content pre.shiki.has-line-numbers .line::before {
  content: " " counter(shiki-line) " │  ";
  color: #93a1a1;
  user-select: none;
  pointer-events: none;
}

.entry-content pre.shiki.has-line-numbers .line:nth-child(-n+9)::before {
  content: "  " counter(shiki-line) " │  ";
}

/* 有行号时 diff：「 N │ - code」/ 「 N │ + code」，颜色保持灰色 */
.entry-content pre.shiki.has-line-numbers .line.diff.remove::before {
  content: " " counter(shiki-line) " │ -";
}

.entry-content pre.shiki.has-line-numbers .line.diff.add::before {
  content: " " counter(shiki-line) " │ +";
}

.entry-content pre.shiki.has-line-numbers .line.diff.remove:nth-child(-n+9)::before {
  content: "  " counter(shiki-line) " │ -";
}

.entry-content pre.shiki.has-line-numbers .line.diff.add:nth-child(-n+9)::before {
  content: "  " counter(shiki-line) " │ +";
}

/* Shiki notation transformers */
.entry-content pre.shiki .line.highlighted {
  background: rgba(38, 139, 210, 0.16);
  box-shadow: inset 3px 0 0 #268bd2;
}

/* diff 无行号：用 padding-left 开留白，::before 用负 margin 退回留白区 */
.entry-content pre.shiki.has-diff:not(.has-line-numbers) {
  padding-left: 2rem;
}

.entry-content pre.shiki .line.diff.add {
  background: rgba(133, 153, 0, 0.14);
}

.entry-content pre.shiki .line.diff.remove {
  background: rgba(220, 50, 47, 0.14);
}

.entry-content pre.shiki.has-diff:not(.has-line-numbers) .line.diff.add::before,
.entry-content pre.shiki.has-diff:not(.has-line-numbers) .line.diff.remove::before {
  display: inline-block;
  width: 1em;
  margin-left: -1.4em;
  margin-right: 0.4em;
  font-weight: 700;
  user-select: none;
}

.entry-content pre.shiki.has-diff:not(.has-line-numbers) .line.diff.add::before {
  content: "+";
  color: #859900;
}

.entry-content pre.shiki.has-diff:not(.has-line-numbers) .line.diff.remove::before {
  content: "-";
  color: #dc322f;
}

.entry-content pre.shiki.has-focused .line {
  opacity: 0.45;
  transition: opacity 0.15s ease;
}

.entry-content pre.shiki.has-focused .line.focused {
  opacity: 1;
}

/* Shiki: error level — override highlighted color per level */
.entry-content pre.shiki .line.highlighted.error {
  background: rgba(220, 50, 47, 0.12);
  box-shadow: inset 3px 0 0 rgba(220, 50, 47, 0.75);
}

.entry-content pre.shiki .line.highlighted.warning {
  background: rgba(181, 137, 0, 0.12);
  box-shadow: inset 3px 0 0 rgba(181, 137, 0, 0.75);
}

.entry-content pre.shiki .line.highlighted.info {
  background: rgba(38, 139, 210, 0.10);
  box-shadow: inset 3px 0 0 rgba(38, 139, 210, 0.65);
}

.entry-content pre.shiki .line.decoration-error {
  text-decoration: none;
}

.entry-content pre.shiki .line.decoration-error > span {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: rgba(220, 50, 47, 0.78);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-skip-ink: auto;
  text-decoration-skip-spaces: all;
}

.entry-content pre.shiki .line.decoration-hover {
  transition: background-color 0.15s ease;
}

.entry-content pre.shiki .line.decoration-hover:hover {
  background: rgba(42, 161, 152, 0.18);
}

/* ===== 7. 首页 ===== */
/* 首页样式 */
.index-message-container {
  margin-top: 1rem;
}

.index-message {
  color: var(--color-accent);
  font-style: italic;
  font-size: 1rem;
}

/* 首页图片样式 */
.idximg {
  max-width: 100%;
  height: auto;
  aspect-ratio: var(--homepage-image-ratio, 1600 / 520);
  display: block;
  transition: all 0.4s ease;
  border-radius: 8px;
  position: relative;
  z-index: 20;
}

.idximg-skeleton {
  background: linear-gradient(
    90deg,
    rgba(230, 230, 230, 0.6) 25%,
    rgba(245, 245, 245, 0.9) 37%,
    rgba(230, 230, 230, 0.6) 63%
  );
  background-size: 400% 100%;
  animation: idx-skeleton-shimmer 1.4s ease infinite;
}

.idximg-skeleton.is-loaded {
  animation: none;
  background: transparent;
}

@keyframes idx-skeleton-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

/* --- Recent Articles Panel --- */
#recent-articles-panel {
  background-color: var(--color-bg-content);
  border-radius: var(--radius-lg);
  margin-bottom: 2em;
  overflow: hidden;
}

.recent-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
  text-align: left;
}

/* 不给标签加 hover 变色：这个按钮是满宽的，又紧贴在卡片网格正上方，
   鼠标移向任何一张卡片都会扫过它，标题就会闪一下变黑。折叠与否由
   chevron 的旋转状态表达，cursor: pointer 已经说明可点，不需要第二个信号。 */

.recent-toggle-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.recent-toggle[aria-expanded="true"] .recent-toggle-chevron {
  transform: rotate(90deg);
}

/* 近期文章：3×2 色卡。色板与 photos 卡片的无封面占位色同源（见
   photos-map.67c13dcf3a42.css 的 .photos-card__placeholder--N），保持两处观感一致。 */
.recent-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem 1.25rem;
  /* 不画分隔线：卡片自带圆角、底色和间距，分组已经够清楚，
     通栏细线只会把面板压重。标题与卡片之间靠留白分开即可。 */
  padding: 0.75rem 20px 20px;
}

/* display:grid 会盖掉浏览器默认的 [hidden]{display:none}，收起按钮就失效了。
   用带属性的选择器提高特异性，不必动用 !important。 */
.recent-grid[hidden] {
  display: none;
}

/* 结构与 /category/photos 的卡片保持一致：色块是独立的圆角矩形，文字排在
   色块外面、直接落在面板底色上。不给文字套填充框——之前那版用冷灰底
   (--color-bg-subtle 蓝分量最高，压在暖底 #F5F4EF 上显脏)，改成淡染后
   六色又淡到无法分辨。索性去掉填充，颜色只由色块承担，实色、可辨、也不重。 */
/* 对应 photos 的「无封面图」卡片 .photos-card__placeholder：整块填色、文字压在
   色块上（同样是 flex 竖排 + space-between + 内边距）。
   不套用 .photos-card__media —— 那是给真实照片留的位置，文章卡永远没有封面图，
   照搬只会得到一个空色块，看着像没加载出来的占位图。 */
/* 对应 photos 的「无封面图」卡片 .photos-card__placeholder：整块填色、文字压在
   色块上（同样是 flex 竖排 + space-between + 内边距）。
   不套用 .photos-card__media —— 那是给真实照片留的位置，文章卡永远没有封面图，
   照搬只会得到一个空色块。 */
.recent-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.9rem;
  border-radius: var(--radius-md);
  background: rgb(var(--recent-card-rgb));
  text-decoration: none;
  background-image: none;
  transition: filter 0.18s ease;
}

/* 必须带上 :link/:visited。卡片本身是 <a>，主题的 `a:link` 是 (0,1,1)，
   会盖掉裸类选择器 (0,1,0) 的 color —— 上一版就是栽在这里：设的每卡深色
   从未生效，六张卡的文字全被主题强调色接管，看上去一片红。
   这里 (0,2,1) 才压得住。 */
.recent-card,
.recent-card:link,
.recent-card:visited {
  color: var(--color-text);
}

/* 克制的悬浮反馈：整卡一起变暗，前景背景同步位移，对比度不受影响 */
.recent-card:hover {
  filter: brightness(0.96);
}

.recent-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* 字号/字重/行高/两行截断与 .photos-card__title 对齐 */
.recent-card__title {
  display: -webkit-box;
  min-height: 2.9em;
  margin: 0;
  overflow: hidden;
  color: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 独立成元素：标题带 line-clamp，写进同一个盒子时满两行会把日期一起裁掉。
   近黑 + 0.7 透明度在六种底色上是 5.94–6.36，达 AA；0.6 会掉到 4.45 不够。 */
.recent-card__date {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.4;
  color: inherit;
  opacity: 0.7;
  letter-spacing: -0.02em;
}

/* 只存底色。文字统一用近黑（--color-text）：在这六种浅色底上是 10.7–12.1，
   远超 AA；纯白只有 1.7–1.9，完全不可用。不再按卡片给文字配色。 */
.recent-card--0 { --recent-card-rgb: 217 178 170; }
.recent-card--1 { --recent-card-rgb: 184 199 176; }
.recent-card--2 { --recent-card-rgb: 184 200 216; }
.recent-card--3 { --recent-card-rgb: 216 196 159; }
.recent-card--4 { --recent-card-rgb: 200 184 214; }
.recent-card--5 { --recent-card-rgb: 212 183 191; }

/* 断点沿用 photos 网格，两处栅格行为保持一致 */
@media screen and (max-width: 760px) {
  .recent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media screen and (max-width: 520px) {
  .recent-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  /* 单列时一行放得下，不必再撑两行的等高 */
  .recent-card__title {
    min-height: 0;
  }
}

/* ===== 8. 文章元信息细节（post-info / 图标 / 提醒条） ===== */
/* 文章信息项的水平间距 - 普通网页视图 */
.post-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  background-color: #f9f9f9;
  padding: 16px 12px;
  border-radius: 6px;
}

#banner nav {
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: auto;
  margin: 0 0 1.1rem 0;
  width: 100%;
  padding: 0;
  background-color: var(--color-text);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.16);
}

#banner nav ul {
  overflow: visible;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  height: auto;
  margin: 0;
  padding: 0;
  width: 100%;
}

#banner nav li {
  overflow: visible;
  display: inline-flex;
  align-items: center;
  height: auto;
  margin: 0;
  float: none;
}

#banner nav a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  max-height: none;
  overflow: visible;
  height: auto;
  min-height: 42px;
  padding: 0.48rem 0.95rem;
  color: var(--color-text-inverse);
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  line-height: 1;
}

/* --- ≥769px 导航菜单靠左（桌面） --- */
@media screen and (min-width: 769px) {
  #banner {
    text-align: left;
  }
  
  #banner nav {
    text-align: left;
    height: auto;
    position: relative;
    width: 100%;
  }
  
  #banner nav ul {
    margin: 0;
    padding: 0;
    text-align: left;
    display: flex;
    height: auto;
    width: 100%;
  }
  
  #banner nav li {
    margin: 0;
    padding: 0;
    display: inline-flex;
    vertical-align: top;
    height: auto;
  }
  
  #banner nav li:first-child {
    margin-left: 0;
  }
  
  #banner nav a {
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    box-sizing: border-box;
  }

  #banner nav a:hover,
  #banner nav a:active,
  #banner nav .active a:link,
  #banner nav .active a:visited {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    line-height: 1;
  }

  #banner nav li:first-child a:hover,
  #banner nav li:first-child a:active,
  #banner nav li:first-child.active a,
  #banner nav li:first-child.active a:link,
  #banner nav li:first-child.active a:visited {
    border-radius: 4px 0 0 4px;
  }

  #banner nav li:last-child a:hover,
  #banner nav li:last-child a:active,
  #banner nav li:last-child.active a,
  #banner nav li:last-child.active a:link,
  #banner nav li:last-child.active a:visited {
    border-radius: 0 4px 4px 0;
  }
}

/* 统一线性图标样式 */
.lucide-icon {
  display: block;
  width: 1.5em;
  height: 1.5em;
  vector-effect: non-scaling-stroke;
}

.post-info-icon,
.page-btn-icon,
.badge-icon,
.github-corner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.post-info-icon {
  color: #6b7280;
}

/* 更新日期：hover tooltip 显示原发布日期 */
.post-info-magazine .post-info-date .updated-time {
  position: relative;
  cursor: default;
}

.post-info-magazine .post-info-date .updated-time::after {
  content: attr(data-published);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #444;
  color: var(--color-text-inverse);
  font-size: 0.75em;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}

.post-info-magazine .post-info-date .updated-time:hover::after {
  opacity: 1;
}

/* 近 30 天新文章绿点 */
.post-info-fresh {
  position: relative;
  display: block;
  margin-left: auto;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  cursor: default;
}

.post-info-fresh::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #22c55e;
  animation: fresh-pulse 2.4s ease-in-out infinite;
}

.post-info-fresh::after {
  content: attr(data-fresh);
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: #444;
  color: var(--color-text-inverse);
  font-size: 0.75em;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  animation: none;
}

.post-info-fresh:hover::after {
  opacity: 1;
}

@keyframes fresh-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* 文章提醒条（元数据 article_notice） */
.article-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 1.25rem 0 1.25rem;
  padding: 16px 20px;
  border: none;
  border-radius: 10px;
  box-shadow: none;
  color: var(--callout-fg);
  line-height: 1.45;
}

.article-callout--info {
  background: var(--callout-info-bg);
}

.article-callout--stale {
  background: var(--callout-stale-bg);
}

.article-callout--deprecated {
  background: var(--callout-deprecated-bg);
}

.article-callout--superseded {
  background: var(--callout-superseded-bg);
}

.article-callout__icon {
  flex-shrink: 0;
  display: flex;
  width: 22px;
  height: 22px;
  margin-top: 0.1em;
  color: var(--callout-fg);
}

.article-callout__icon .lucide-icon {
  width: 22px;
  height: 22px;
}

.article-callout__content {
  flex: 1;
  min-width: 0;
}

.article-callout__title {
  margin: 0;
  font-size: 1em;
  font-weight: 600;
  color: var(--callout-fg);
}

.article-callout__text {
  margin: 0.35em 0 0;
  font-size: 0.92em;
  font-weight: 400;
  color: var(--callout-fg);
}

.article-callout__link {
  margin: 0.45em 0 0;
  font-size: 0.92em;
  font-weight: 400;
}

/* 这里的下划线是常亮的（background-size 静态 100%），不走 hover 动效，
   但粗细 / 间隔仍取全站令牌，避免和动态下划线粗细不一致。 */
.article-callout__link a {
  color: var(--color-accent);
  font-weight: 500;
  text-decoration: none;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-size: 100% var(--underline-thickness);
  background-position: left bottom;
  padding-bottom: var(--underline-gap);
}

.article-callout__link a:hover {
  color: var(--color-accent-soft);
}

/* 统一 post-info 标签链接与页脚链接的下划线间距（桌面+移动） */
.post-info.post-info-magazine {
  line-height: 1.35;
}

.post-info.post-info-magazine .post-info-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.post-info.post-info-magazine a,
.post-info.post-info-magazine .tag-text {
  line-height: 1.35;
}

.post-info.post-info-magazine a {
  padding-bottom: var(--underline-gap);
}

/* 文章信息标签不换行 - 全局（防止中文标签字符被拆行，多标签保持同一行） */
.post-info-magazine .tag-list-value {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  overflow: hidden;
  gap: 0.3rem;
}

.post-info-magazine .post-info-views {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  line-height: 1;
}

#busuanzi_container_page_pv {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

#busuanzi_container_page_pv #busuanzi_value_page_pv {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: var(--color-text-secondary);
}

#busuanzi_container_page_pv .post-info-icon {
  line-height: 1;
}

.post-info-magazine .tag-list-value a,
.post-info-magazine .tag-list-value .tag-text {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* ===== 9. 响应式 ===== */
/* --- ≤768px 移动端总成 --- */
/* 历史遗留：本块跨导航、正文、图片、页脚等多个组件，靠 !important 压制桌面规则。
   新代码请写到对应组件自己的 @media 里（第 11 / 12 / 13 节是正确示范），
   不要继续往这里追加，否则 !important 只会越堆越多。 */
@media screen and (max-width: 768px) {
  /* 基础样式 */
  body {
    background-color: #f5f5f5;
    font-size: 16px;
    line-height: 1.6;
    padding: 0;
    margin: 0;
  }

  /* 确保内容区域上方有足够间距 */
  #content, .body, div.body {
    margin-top: 20px;
    padding-top: 20px;
    position: relative;
    z-index: 1;
    clear: both;
  }
  
  /* 重置导航菜单样式 */
  #banner {
    position: relative;
    padding: 0;
    overflow: visible;
    margin-bottom: 20px;
    margin-top: 0; /* 移除顶部间距 */
    clear: both;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: #f0f0f0; /* 更改为浅色背景 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-radius: 0 0 5px 5px;
    z-index: 1000; /* 确保导航栏在最上层 */
  }
  
  /* 覆盖全局CSS中可能的顶部间距 */
  body #banner {
    padding-top: 0;
    margin-top: 0;
  }
  
  /* 添加额外的空间，防止覆盖 */
  #banner::after {
    content: '';
    display: block;
    height: 10px; /* 底部额外空间 */
    clear: both;
  }
  
  /* 确保标题样式 */
  #banner h1 {
    padding: 15px 10px;
    margin: 0; /* 移除所有边距 */
    font-size: 1.8em; /* 增大字体大小 */
    font-weight: 700; /* 加粗字体 */
    text-align: center;
    background-color: transparent; 
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border); /* 浅色边框 */
    order: 1;
    width: 100%;
    box-sizing: border-box;
    z-index: 2;
    position: relative;
  }
  
  #banner nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background-color: var(--color-text);
    padding: 0;
    min-height: 68px;
    z-index: 1;
    position: relative;
    order: 2;
    margin: 0;
    box-sizing: border-box;
    border-radius: 0 0 5px 5px;
    box-shadow: none;
  }
  
  /* 删除所有可能影响对齐的额外空间 */
  #banner * {
    margin-top: 0;
    margin-bottom: 0;
  }
  
  /* 隐藏滚动条 */
  #banner nav::-webkit-scrollbar {
    display: none;
  }
  
  /* 重设列表样式，确保对齐 */
  #banner nav ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    height: auto;
    width: max-content; /* 确保宽度适应内容 */
  }
  
  #banner nav li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    float: none;
    height: 42px;
    vertical-align: middle;
  }
  
  #banner nav li:first-child {
    margin-left: 0;
  }
  
  #banner nav li:last-child {
    margin-right: 0;
  }
  
  #banner nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    margin: 0;
    font-size: 16px;
    height: 42px;
    min-height: 42px;
    line-height: 1;
    background-color: transparent;
    color: white;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    vertical-align: middle;
  }
  
  #banner nav a:hover,
  #banner nav li.active a {
    background-color: var(--color-accent);
    box-shadow: 0 2px 5px rgba(199,67,80,0.3);
    border-radius: 0;
  }

  #banner nav a:active {
    border-radius: 0;
  }

  #banner nav li:first-child a:hover,
  #banner nav li:first-child a:active,
  #banner nav li:first-child.active a {
    border-radius: 0 0 0 5px;
  }

  #banner nav li:last-child a:hover,
  #banner nav li:last-child a:active,
  #banner nav li:last-child.active a {
    border-radius: 0 0 5px 0;
  }

  #banner nav li:first-child a:hover,
  #banner nav li:first-child a:active,
  #banner nav li:first-child.active a {
    border-radius: 0 0 0 5px;
  }

  #banner nav li:last-child a:hover,
  #banner nav li:last-child a:active,
  #banner nav li:last-child.active a {
    border-radius: 0 0 5px 0;
  }
  
  /* 文章信息样式 - 杂志感轻量单行元信息 */
  .post-info.post-info-magazine {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin: 14px 0 18px;
    padding: 6px 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    min-width: 0;
  }
  
  .post-info.post-info-magazine .post-info-item {
    display: inline-flex;
    align-items: center;
    vertical-align: baseline;
    margin: 0;
    flex: 0 0 auto;
    flex-shrink: 0;
    min-width: 0;
  }

  .post-info.post-info-magazine .post-info-item + .post-info-item::before {
    content: "·";
    color: #b8b8b8;
    margin: 0 0.5rem;
  }

  .post-info.post-info-magazine time {
    font-family: var(--font-mono);
    font-size: 0.94em;
    letter-spacing: -0.01em;
    color: var(--color-text-secondary);
  }

  .post-info.post-info-magazine a {
    color: var(--color-accent);
    padding: 0 0 var(--underline-gap) 0;
    margin: 0;
    border-radius: 0;
    background-color: transparent;
    text-decoration: none;
    transition: color 0.2s ease, background-size var(--underline-speed) ease;
    white-space: nowrap;
  }

  .post-info.post-info-magazine .tag-list-value {
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 18rem;
    flex-wrap: nowrap;
    max-width: none;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .post-info.post-info-magazine .tag-list-value a {
    margin: 0 0.35rem 0 0;
    display: inline-block;
    white-space: nowrap;
    word-break: keep-all;
    line-break: auto;
    overflow-wrap: normal;
    flex: 0 0 auto;
  }

  .post-info.post-info-magazine .tag-list-value a:link,
  .post-info.post-info-magazine .tag-list-value a:visited,
  .post-info.post-info-magazine .tag-list-value a:hover,
  .post-info.post-info-magazine .tag-list-value a:active {
    display: inline-block;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .post-info.post-info-magazine .tag-list-value .tag-sep {
    display: none;
  }

  .post-info.post-info-magazine .tag-list-value .tag-text {
    display: inline-block;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .post-info.post-info-magazine .tag-list-value::-webkit-scrollbar {
    display: none;
  }

  .post-info.post-info-magazine .post-info-views {
    margin-left: auto;
    color: #9a9a9a;
    font-size: 0.88rem;
    letter-spacing: 0;
  }

  .post-info.post-info-magazine .post-info-views #busuanzi_value_page_pv {
    color: var(--color-text-secondary);
    font-weight: 400;
  }

  .post-info.post-info-magazine a:hover {
    color: var(--color-accent);
    background-color: transparent;
    background-size: 100% var(--underline-thickness);
    text-shadow: none;
    text-decoration: none;
  }

  /* 内容链接：memos 风格动态下划线 */
  #content .entry-content a:link,
  #content .entry-content a:visited,
  #contentinfo a:not(.badge-link):link,
  #contentinfo a:not(.badge-link):visited,
  #extras a:link,
  #extras a:visited,
  .memo-content-text a:link,
  .memo-content-text a:visited {
    padding: 0 0 var(--underline-gap) 0;
    margin: 0;
    border-radius: 0;
    background-color: transparent;
    color: var(--color-accent);
    text-shadow: none;
  }

  #content .entry-content a:hover,
  #content .entry-content a:active,
  #contentinfo a:not(.badge-link):hover,
  #contentinfo a:not(.badge-link):active,
  #extras a:hover,
  #extras a:active,
  .memo-content-text a:hover,
  .memo-content-text a:active {
    background-color: transparent;
    color: var(--color-accent);
    background-size: 100% var(--underline-thickness);
    text-shadow: none;
  }

  .post-info.post-info-magazine .tag-list-value {
    min-width: 10rem;
  }

  /* 内容区域样式 */
  #content {
    margin-top: 20px; /* 减小顶部边距，因为已经不是固定导航了 */
    padding: 15px;
  }

  .entry-title {
    font-size: 1.3em;
    margin: 0.8em 0;
  }

  /* 文章内容样式 */
  .entry-content {
    font-size: 16px;
    line-height: 1.6;
  }

  /* 确保p标签中的图片宽度为100% */
  .entry-content p img {
    width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
  }

  /* 普通图片样式 */
  .entry-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
  }

  .entry-content pre:not(.shiki) {
    font-size: 14px;
    padding: 10px;
    overflow-x: auto;
    background-color: #f8f8f8;
    border-radius: 4px;
  }

  .entry-content pre.shiki {
    font-size: 14px;
    padding: 1rem;
    border-radius: 6px;
    tab-size: 4;
    -moz-tab-size: 4;
  }

  /* 页脚样式 */
  #contentinfo {
    padding: 15px;
    background-color: var(--color-bg-content);
    color: #333; /* 相应地改为深色文字 */
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 0; /* 移除底部间距 */
  }

  #about {
    /* flex-direction: column !important; */
    align-items: center;
  }

  #about .bio {
    width: 100%;
    margin-top: 1em;
    text-align: center;
  }

  /* 确保这些样式会覆盖其他样式 */
  * {
    box-sizing: border-box;
  }

  /* 解决可能的底部截断问题 */
  #banner:after {
    content: "";
    display: block;
    clear: both;
    height: 15px; /* 添加额外空间 */
    visibility: hidden;
  }
  
  /* 确保导航菜单位于最高层 */
  #banner, #banner nav, #banner nav ul, #banner nav li, #banner nav a {
    z-index: 9999;
    position: relative;
  }
}

/* --- 769–1024px 平板 --- */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .body {
    /* 布局护栏，属允许的 !important 例外：页面级样式表（如
       experimental-search.67c13dcf3a42.css 的 .experimental-search { max-width: 920px }）
       与本规则同特异性且加载在后，不加 ! 就会赢，导致 769–920px 视口下
       内容宽度超出屏幕、两侧没有留白。 */
    max-width: 90% !important;
    margin: 0 auto;
  }
}

/* --- ≥1025px 宽屏 --- */
@media screen and (min-width: 1025px) {
  .body {
    /* 同上，布局护栏：正文栏宽由布局统一决定，不允许页面级样式表加宽。 */
    max-width: 860px !important;
    margin: 0 auto;
  }
}

/* --- ≥769px 桌面文章详情页 --- */
@media screen and (min-width: 769px) {
  /* 文章详情页样式 */
  #content {
    margin-bottom: 1em;
  }
  
  #extras {
    margin-bottom: 1em;
  }

  #contentinfo {
    margin-bottom: 1em;
  }

  section {
    margin-bottom: 1em;
  }
  
  article {
    margin-bottom: 1em;
  }
  
  .entry-content {
    margin-bottom: 1em;
  }
  
  /* 评论区与文章间距 */
  .comments {
    margin-top: 1em;
  }
  
  /* 文章与页脚间距 */
  article + #contentinfo,
  section + #contentinfo {
    margin-top: 1em;
  }
  
  /* 确保section之间的间距 */
  section + section {
    margin-top: 1em;
  }
}

/* ===== 10. 翻页、分类计数与年份分组 ===== */
/* 翻页样式 —— 极简文字链接，与“第 X 页”页码信息统一字号、无下划线 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin: 3.5em 0 1.6em 0;
  font-size: 0.85em;
}

/* 翻页链接与页码信息同字号同字重，仅用颜色区分主次 */
.pagination .page-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--color-text-secondary);
  background-image: none; /* 取消基础 a 的下划线生长动效 */
  padding-bottom: 0;
  transition: color 0.2s ease;
}

.pagination .page-btn:hover {
  color: var(--color-accent);
}

.pagination .page-btn-icon {
  display: inline-flex;
  align-items: center;
}

.pagination .page-btn-icon svg {
  width: 0.85em;
  height: 0.85em;
}

.pagination .page-info {
  color: var(--color-text-muted);
  font-weight: 400;
}

@media screen and (max-width: 768px) {
  .pagination {
    gap: 1.1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 2em 0 1em 0;
  }

  .pagination .page-info {
    order: 2; /* 页面信息居中换行到下方 */
    width: 100%;
    text-align: center;
    margin-top: 0.3em;
  }
}

/* 分类页面文章数量弱化样式 */
.category-info {
  font-size: 1.1rem;
  font-weight: 400;
  color: #888;
  margin-bottom: 2rem;
  padding: 0.3rem 1.1rem;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  letter-spacing: 0.5px;
  text-align: left;
}

/* 年份分组样式 */
.year-section {
  margin-bottom: 2rem;
}

.year-header {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--color-accent);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-accent);
}

.year-section .archives {
  margin-left: 1rem;
}

.year-section .archives li {
  margin-bottom: 0.8rem;
  padding-left: 0.5rem;
  border-left: 2px solid transparent;
  transition: border-color 0.3s ease;
}

.year-section .archives li:hover {
  border-left-color: var(--color-accent);
  background-color: rgba(199, 67, 80, 0.05);
}

/* ===== 11. 正文列表与表格 ===== */
/* --- 正文列表：简洁克制 --- */

#content .entry-content ul,
#content .entry-content ol {
  margin: 1.2rem 0;
  padding-left: 1.6rem;
  line-height: 1.7;
}

/* 无序列表：安静的强调色小圆点 */
#content .entry-content ul {
  list-style: none;
}

#content .entry-content ul > li {
  position: relative;
  margin: 0.5rem 0;
  padding-left: 0.2rem;
  font-size: inherit;   /* 与正文段落一致：桌面 18px / 移动 16px */
  line-height: 1.8;     /* 与 body 行高对齐 */
  list-style: none;
}

#content .entry-content ul > li::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 0.72em;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
}

/* 嵌套无序列表：更小更淡的点 */
#content .entry-content ul ul > li::before {
  width: 5px;
  height: 5px;
  background: #b8b8b8;
}

#content .entry-content ul ul ul > li::before {
  background: #d2d2d2;
}

/* 有序列表：安静的强调色序号 */
#content .entry-content ol {
  list-style: none;
  counter-reset: elegant-counter;
  padding-left: 1.9rem;
}

#content .entry-content ol > li {
  position: relative;
  margin: 0.5rem 0;
  padding-left: 0.2rem;
  font-size: inherit;   /* 与正文段落一致：桌面 18px / 移动 16px */
  line-height: 1.8;     /* 与 body 行高对齐 */
  list-style: none;
  counter-increment: elegant-counter;
}

#content .entry-content ol > li::before {
  content: counter(elegant-counter) ".";
  position: absolute;
  left: -1.9rem;
  top: 0;
  width: 1.5rem;
  text-align: right;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
}

/* 嵌套有序列表：N.M，颜色转灰弱化层级 */
#content .entry-content ol ol {
  counter-reset: elegant-subcounter;
}

#content .entry-content ol ol > li {
  counter-increment: elegant-subcounter;
}

#content .entry-content ol ol > li::before {
  content: counter(elegant-counter) "." counter(elegant-subcounter);
  color: var(--color-text-muted);
}

/* --- 正文表格：安静清晰 --- */

#content .entry-content table {
  width: 100%;
  margin: 1.8rem 0;
  border-collapse: collapse;
  background: var(--color-bg-content);
  font-size: 15px;
  line-height: 1.6;
}

/* 表头：一层柔和底色 + 细分隔线，不做渐变/大写 */
#content .entry-content table thead {
  background: var(--color-bg-subtle);
  color: #495057;
}

#content .entry-content table thead th {
  padding: 0.7rem 1rem;
  font-weight: 600;
  font-size: 14px;
  text-align: left;
  border-bottom: 2px solid var(--color-border);
  font-family: var(--font-ui);
}

/* 表体：极淡的斑马纹与 hover 提示 */
#content .entry-content table tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.015);
}

#content .entry-content table tbody tr:hover {
  background-color: rgba(199, 67, 80, 0.04);
}

#content .entry-content table td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  vertical-align: middle;
  color: #374151;
}

#content .entry-content table tbody tr:last-child td {
  border-bottom: none;
}

/* 第一列轻微强调 */
#content .entry-content table td:first-child {
  font-weight: 600;
  color: #1f2937;
}

/* --- ≤768px 表格 --- */
@media screen and (max-width: 768px) {
  #content .entry-content table {
    font-size: 14px;
    margin: 1.5rem 0;
  }
  
  #content .entry-content table thead th,
  #content .entry-content table td {
    padding: 0.8rem 0.6rem;
  }
  
  #content .entry-content table thead th {
    font-size: 12px;
  }
  
  /* 在小屏幕上保持表格可滚动 */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- ≤480px 表格转卡片 --- */
@media screen and (max-width: 480px) {
  #content .entry-content table,
  #content .entry-content table thead,
  #content .entry-content table tbody,
  #content .entry-content table th,
  #content .entry-content table td,
  #content .entry-content table tr {
    display: block;
  }
  
  #content .entry-content table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  #content .entry-content table tr {
    border: 1px solid rgba(223, 226, 229, 0.3);
    border-radius: 8px;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.9);
  }
  
  #content .entry-content table td {
    border: none;
    border-bottom: 1px solid rgba(223, 226, 229, 0.2);
    position: relative;
    padding-left: 40%;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }
  
  #content .entry-content table td:before {
    content: attr(data-label);
    position: absolute;
    left: 0.6rem;
    width: 35%;
    padding-right: 10px;
    white-space: nowrap;
    font-weight: 600;
    color: #6c757d;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  #content .entry-content table td:last-child {
    border-bottom: none;
  }
}

/* ===== 12. 页脚徽标 ===== */
/* Footer 图标和文字优化样式 */
.footer-badges {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}

.badge-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.8);
  background-image: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  text-decoration: none;
  padding: 4px;
  box-sizing: border-box;
}

.badge-link:hover {
  transform: translateY(-2px);
  border-color: #bbb;
  background-color: rgba(255, 255, 255, 0.95);
  color: inherit;
  text-shadow: none;
}

.badge-link > img,
.badge-link > svg {
  max-height: 36px;
  max-width: 36px;
  width: auto;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
}

.badge-icon {
  width: 36px;
  height: 36px;
  color: var(--color-text-secondary);
}

.badge-link[href*="rss.xml"] .badge-icon {
  color: #f97316;
}

.badge-link-cc .badge-icon {
  width: 40px;
  height: 40px;
}

.badge-link-moe .badge-icon {
  color: #6c757d;
}

/* not-by-ai 是 131×42 的长方形徽标，按 48px 方框 + max-width:36px 会被压成
   约 36×11.5px，所以单独给它双倍宽度的盒子。
   用 href 而不是 :first-child：FOOTER_NOT_BY_AI 是可关的开关，关掉之后第一个
   徽标会变成方形的 RSS 图标，:first-child 就会把它错误地拉宽。 */
.badge-link[href*="notbyai"] {
  width: 96px; /* 48px 的 2 倍 */
}

.badge-link[href*="notbyai"] > img,
.badge-link[href*="notbyai"] > svg {
  max-width: 88px; /* 96px - 8px padding */
}

.footer-text {
  color: var(--color-text-secondary);
  font-size: 0.9em;
  line-height: 1.4;
  margin-top: 8px;
}

.footer-text a {
  color: var(--color-accent);
  text-decoration: none;
  /* background-size 必须一起过渡，否则下划线会瞬间弹出而不是从左抹开 */
  transition: color 0.2s ease, background-size var(--underline-speed) ease;
}

.footer-text a:hover {
  color: var(--color-accent);
}

.github-corner {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(199, 67, 80, 0.22);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  color: var(--color-accent);
  background-image: none;
  backdrop-filter: blur(8px);
}

.github-corner-left {
  left: 14px;
  right: auto;
}

.github-corner:hover {
  transform: translateY(-1px);
  border-color: rgba(199, 67, 80, 0.4);
}

.github-corner-label {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
}

.github-corner-icon {
  font-size: 1rem;
}

/* --- ≤768px / ≤480px 页脚徽标 --- */
@media (max-width: 768px) {
  .footer-badges {
    justify-content: center;
    gap: 10px;
  }
  
  .badge-link {
    width: 44px;
    height: 44px;
  }
  
  .badge-link[href*="notbyai"] {
    width: 88px; /* 44px 的 2 倍 */
  }
  
  .badge-link > img,
  .badge-link > svg {
    max-height: 32px;
    max-width: 32px;
  }

  .badge-icon {
    width: 32px;
    height: 32px;
  }

  .badge-link[href*="notbyai"] > img,
  .badge-link[href*="notbyai"] > svg {
    max-width: 80px; /* 88px - 8px padding */
  }
  
  .footer-text {
    text-align: center;
    font-size: 0.85em;
  }

  .github-corner {
    top: 10px;
    right: 10px;
    padding: 0.5rem 0.7rem;
  }

  .github-corner-left {
    left: 10px;
    right: auto;
  }

  .github-corner-label {
    display: none;
  }
}

@media (max-width: 480px) {
  .footer-badges {
    gap: 8px;
  }
  
  .badge-link {
    width: 40px;
    height: 40px;
  }
  
  .badge-link[href*="notbyai"] {
    width: 80px; /* 40px 的 2 倍 */
  }
  
  .badge-link > img,
  .badge-link > svg {
    max-height: 28px;
    max-width: 28px;
  }

  .badge-link[href*="notbyai"] > img,
  .badge-link[href*="notbyai"] > svg {
    max-width: 72px; /* 80px - 8px padding */
  }
  
  .footer-text {
    font-size: 0.8em;
  }
}

/* ===== 13. 分类专属：Reading ===== */
/* Reading 分类提示信息样式 */
#content .reading-notice {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border: 2px dashed var(--color-accent);
  border-radius: 8px;
  background-color: transparent;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center;
  display: block;
  box-sizing: border-box;
}

#content .reading-notice a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease, background-size var(--underline-speed) ease;
  /* 保留底边间隔，`padding: 0` 会把下划线压到贴字（和全站不一致） */
  padding: 0 0 var(--underline-gap);
  background-color: transparent;
}

#content .reading-notice a:hover,
#content .reading-notice a:active {
  color: var(--color-accent);
  background-color: transparent;
  background-size: 100% var(--underline-thickness);
  text-shadow: none;
}

/* Reading 分类封面图片样式 */
.reading-articles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}

.reading-article-item {
  display: flex;
  align-items: flex-start;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-content);
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.reading-article-item:hover {
  background-color: var(--color-bg-subtle);
  border-color: var(--color-accent);
  box-shadow: 0 4px 12px rgba(199, 67, 80, 0.15);
  transform: translateY(-2px);
}

.reading-article-cover {
  flex-shrink: 0;
  margin-right: 1rem;
}

.reading-cover-thumbnail {
  width: 60px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.reading-cover-thumbnail:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.reading-article-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.reading-article-meta {
  margin-bottom: 0.25rem;
}

.reading-article-meta time {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.reading-article-title {
  flex: 1;
}

/* 标题不要下划线。这里是 <div> 而不是 h1..h6，吃不到那条标题重置，
   所以必须自己把 padding-bottom 也归零，否则会残留一段幽灵间距。 */
.reading-article-title a {
  color: #333;
  text-decoration: none;
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.2s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  background-image: none;
  padding-bottom: 0;
}

.reading-article-title a:hover {
  color: var(--color-accent);
  background-color: transparent;
  background-image: none;
  text-shadow: none;
}

/* --- ≤768px Reading 封面 --- */
@media screen and (max-width: 768px) {
  #content .reading-notice {
    margin: 1rem 0;
    padding: 0.875rem 1rem;
    font-size: 0.9rem;
  }

  .reading-articles-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .reading-article-item {
    padding: 0.75rem;
  }
  
  .reading-cover-thumbnail {
    width: 50px;
    height: 67px;
  }
  
  .reading-article-meta time {
    font-size: 0.75rem;
  }
}

/* Reading 文章页面特殊信息样式 */
.reading-info {
  margin: 1.5rem 0;
  padding: 1rem;
  background-color: var(--color-bg-subtle);
  border-left: 4px solid #007acc;
  border-radius: 4px;
}

/* Reading 文章首图宽度限制 */
.reading-article .article-cover {
  max-width: 220px;
  margin: 1rem 0;
}

.reading-article .cover-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.reading-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.reading-meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.meta-label {
  font-weight: 600;
  color: #333;
  font-size: 0.9rem;
}

.meta-value {
  color: #007acc;
  font-weight: 500;
  font-size: 0.9rem;
}

/* --- ≤768px Reading 文章首图 --- */
@media screen and (max-width: 768px) {
  .reading-meta {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .reading-meta-item {
    justify-content: flex-start;
  }
}

/* ===== 13b. 分类专属：Moments 长文阅读 ===== */

.moments-article:not(.moments-article--compact) article,
.moments-article:not(.moments-article--compact) .entry-content {
  font-family: Georgia, "Songti SC", STSong, "Noto Serif CJK SC",
    "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, serif;
}

.moments-article:not(.moments-article--compact) article > header,
.moments-article:not(.moments-article--compact) .entry-content {
  width: 100%;
  max-width: 729px;
  margin-left: auto;
  margin-right: auto;
}

.moments-article:not(.moments-article--compact) .entry-content {
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 1px;
  text-align: justify;
}

.moments-article:not(.moments-article--compact) .entry-title {
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.8;
  margin: 0 0 0.7rem;
}

.moments-article:not(.moments-article--compact) .entry-content p {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.moments-article:not(.moments-article--compact) .entry-content h2,
.moments-article:not(.moments-article--compact) .entry-content h3,
.moments-article:not(.moments-article--compact) .entry-content h4,
.moments-article:not(.moments-article--compact) .entry-content h5,
.moments-article:not(.moments-article--compact) .entry-content h6 {
  font-family: inherit;
  font-weight: 700;
  line-height: 1.8;
  margin-top: 1.8rem;
  margin-bottom: 1.5rem;
}

.moments-article:not(.moments-article--compact) .entry-content h2 {
  font-size: 1.35em;
}

.moments-article:not(.moments-article--compact) .entry-content h3 {
  font-size: 1.2em;
}

.moments-article:not(.moments-article--compact) .post-info {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  margin: 0 0 2.25rem;
  gap: 0.75rem;
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--color-text-secondary);
  text-align: left;
}

.moments-article:not(.moments-article--compact) .post-info-date {
  display: block;
  margin: 0;
}

.moments-article:not(.moments-article--compact) .post-info-date .post-info-icon,
.moments-article:not(.moments-article--compact) .post-info-tags,
.moments-article:not(.moments-article--compact) .post-info-translations,
.moments-article:not(.moments-article--compact) .post-info-views,
.moments-article:not(.moments-article--compact) .post-info-fresh {
  display: none;
}

.moments-article:not(.moments-article--compact) .post-info time {
  font-family: inherit;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
}

.moments-article:not(.moments-article--compact) .entry-content pre,
.moments-article:not(.moments-article--compact) .entry-content code,
.moments-article:not(.moments-article--compact) .entry-content table {
  text-align: left;
}

@media screen and (max-width: 768px) {
  .moments-article:not(.moments-article--compact) article > header,
  .moments-article:not(.moments-article--compact) .entry-content {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .moments-article:not(.moments-article--compact) .entry-content {
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.03em;
    text-align: left;
  }

  .moments-article:not(.moments-article--compact) .entry-content p {
    margin-bottom: 1.15rem;
  }

  .moments-article:not(.moments-article--compact) .post-info {
    margin-bottom: 1.75rem;
    font-size: 0.78rem;
  }

  .moments-article:not(.moments-article--compact) .post-info time {
    font-size: 0.78rem;
  }

  .moments-article:not(.moments-article--compact) .entry-title {
    font-size: 1.3em;
    line-height: 1.5;
    margin-bottom: 0.6rem;
  }
}

/* ===== 14. 正文行内强调、<del>、折叠块 ===== */
/* Inline emphasis helpers for article body */
.entry-content .u-line,
.memo-content-text .u-line {
  --u-line-rgb: 225, 88, 88;
  --u-line-alpha: 0.9;
  text-decoration-line: underline;
  text-decoration-thickness: 0.12em;
  text-decoration-color: rgba(var(--u-line-rgb), var(--u-line-alpha));
  text-underline-offset: 0.22em;
  text-decoration-skip-ink: auto;
}

.entry-content .u-line-blue,
.memo-content-text .u-line-blue {
  --u-line-rgb: 67, 97, 238;
  --u-line-alpha: 0.9;
}

.entry-content .u-line-violet,
.memo-content-text .u-line-violet {
  --u-line-rgb: 131, 56, 236;
  --u-line-alpha: 0.9;
}

.entry-content .hl,
.memo-content-text .hl {
  --hl-rgb: 255, 230, 109;
  --hl-alpha: 0.45;
  padding: 0 0.12em;
  border-radius: 0.2em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-color: rgba(var(--hl-rgb), var(--hl-alpha));
}

.entry-content .hl-yellow,
.memo-content-text .hl-yellow {
  --hl-rgb: 255, 230, 109;
  --hl-alpha: 0.45;
}

.entry-content .hl-green,
.memo-content-text .hl-green {
  --hl-rgb: 129, 230, 154;
  --hl-alpha: 0.42;
}

.entry-content .hl-pink,
.memo-content-text .hl-pink {
  --hl-rgb: 244, 162, 200;
  --hl-alpha: 0.38;
}

.entry-content .hl-blue,
.memo-content-text .hl-blue {
  --hl-rgb: 167, 214, 255;
  --hl-alpha: 0.42;
}

.entry-content .hl-lavender,
.memo-content-text .hl-lavender {
  --hl-rgb: 196, 181, 253;
  --hl-alpha: 0.4;
}

.entry-content .hl-peach,
.memo-content-text .hl-peach {
  --hl-rgb: 255, 204, 188;
  --hl-alpha: 0.42;
}

.entry-content .hl-mint,
.memo-content-text .hl-mint {
  --hl-rgb: 178, 245, 234;
  --hl-alpha: 0.4;
}

.entry-content .hl-coral,
.memo-content-text .hl-coral {
  --hl-rgb: 255, 183, 178;
  --hl-alpha: 0.4;
}

.entry-content .hl-lemon,
.memo-content-text .hl-lemon {
  --hl-rgb: 255, 245, 157;
  --hl-alpha: 0.45;
}

/* Unified <del> effect for article/page/memos content */
#content del {
  filter: blur(4px);
  background-color: var(--color-border);
  color: transparent;
  text-decoration: none;
  padding: 0 2px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.4s ease;
  user-select: none;
}

#content del:hover {
  filter: blur(0);
  background-color: transparent;
  color: inherit;
}

/* Marker pen effect with soft edges */
.entry-content .hl-marker,
.memo-content-text .hl-marker {
  background-color: transparent;
  background-image: linear-gradient(
    to bottom,
    transparent 22%,
    rgba(var(--hl-rgb), 0.16) 22%,
    rgba(var(--hl-rgb), 0.58) 78%,
    transparent 78%
  );
}

/* 通用折叠块（<details> + <summary>） */
.entry-content details,
.memo-content-text details {
  margin: 0.8rem 0;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
}

.entry-content details summary,
.memo-content-text details summary {
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5em 0.9em;
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
  list-style: none;
  background: #f9f9f9;
  transition: background 0.15s ease, color 0.15s ease;
}

.entry-content details summary::-webkit-details-marker,
.memo-content-text details summary::-webkit-details-marker {
  display: none;
}

.entry-content details summary::before,
.memo-content-text details summary::before {
  content: "▶";
  font-size: 0.65em;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.entry-content details[open] summary::before,
.memo-content-text details[open] summary::before {
  transform: rotate(90deg);
}

.entry-content details summary:hover,
.memo-content-text details summary:hover {
  background: #f3f3f3;
}

.entry-content details[open] > :not(summary),
.memo-content-text details[open] > :not(summary) {
  border-top: 1px solid var(--color-border);
}

.entry-content details pre,
.memo-content-text details pre {
  margin: 0;
  border-radius: 0;
  border: none;
}

.entry-content details pre.shiki,
.memo-content-text details pre.shiki {
  margin: 0;
  border-radius: 0;
  border: none;
}

.entry-content details.details-rich,
.memo-content-text details.details-rich {
  background: #fcfcfc;
}

.entry-content details.details-rich[open],
.memo-content-text details.details-rich[open] {
  padding-bottom: 0.95rem;
}

.entry-content details.details-rich[open] > :not(summary),
.memo-content-text details.details-rich[open] > :not(summary) {
  border-top: none;
  margin-left: 1rem;
  margin-right: 1rem;
}

.entry-content details.details-rich[open] > :not(summary):first-child,
.memo-content-text details.details-rich[open] > :not(summary):first-child {
  margin-top: 0.95rem;
}

.entry-content details.details-rich[open] > :not(summary) + :not(summary),
.memo-content-text details.details-rich[open] > :not(summary) + :not(summary) {
  margin-top: 0.85rem;
}

.entry-content details.details-rich p,
.entry-content details.details-rich ul,
.entry-content details.details-rich ol,
.memo-content-text details.details-rich p,
.memo-content-text details.details-rich ul,
.memo-content-text details.details-rich ol {
  line-height: 1.7;
}

.entry-content details.details-rich pre,
.entry-content details.details-rich pre.shiki,
.memo-content-text details.details-rich pre,
.memo-content-text details.details-rich pre.shiki {
  margin: 0.2rem 1rem 0;
  border: 1px solid #ececec;
  border-radius: 8px;
}

/* ===== 15. 图片、灯箱与图文布局 ===== */
/* 图片灯箱不展示底部描述白底区域 */
.glightbox-container .gslide-description {
  display: none;
}

/* media-gallery：Cover Flow 画廊（主图居中，邻图从两侧探出） */
[data-media-layouts="true"].entry-content .media-gallery-wrap,
[data-media-layouts="true"].memo-content-text .media-gallery-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9; /* JS 会在首图加载后覆盖为实际比例 */
  background: transparent;
  border-radius: 8px;
  margin: 1rem 0;
}

/* 消除 <a> 的链接 hover 样式 */
[data-media-layouts="true"].entry-content .mg-item a,
[data-media-layouts="true"].entry-content .mg-item a:hover,
[data-media-layouts="true"].entry-content .mg-item a:focus,
[data-media-layouts="true"].memo-content-text .mg-item a,
[data-media-layouts="true"].memo-content-text .mg-item a:hover,
[data-media-layouts="true"].memo-content-text .mg-item a:focus {
  text-decoration: none;
  color: inherit;
  background: none;
  background-image: none;
  box-shadow: none;
  border-bottom: none;
}

/* 每张图片绝对定位，宽度为容器的 70%，水平居中 */
[data-media-layouts="true"].entry-content .mg-item,
[data-media-layouts="true"].memo-content-text .mg-item {
  position: absolute;
  width: 70%;
  left: 15%;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.42s ease;
  opacity: 0;
  cursor: pointer;
}

[data-media-layouts="true"].entry-content .mg-item img,
[data-media-layouts="true"].memo-content-text .mg-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0;
  border-radius: 0;
}

/* 激活：居中，正常大小，最高层 */
[data-media-layouts="true"].entry-content .mg-item.mg-center,
[data-media-layouts="true"].memo-content-text .mg-item.mg-center {
  transform: translateX(0) scale(1);
  z-index: 2;
  opacity: 1;
  cursor: pointer;
}

/* 左侧邻图：向左偏移，缩小，从左侧探出 */
[data-media-layouts="true"].entry-content .mg-item.mg-left,
[data-media-layouts="true"].memo-content-text .mg-item.mg-left {
  transform: translateX(-58%) scale(0.78);
  z-index: 1;
  opacity: 0.72;
}

/* 右侧邻图：向右偏移，缩小，从右侧探出 */
[data-media-layouts="true"].entry-content .mg-item.mg-right,
[data-media-layouts="true"].memo-content-text .mg-item.mg-right {
  transform: translateX(58%) scale(0.78);
  z-index: 1;
  opacity: 0.72;
}

/* < > 导航按钮 */
[data-media-layouts="true"].entry-content .media-gallery-wrap .mg-btn,
[data-media-layouts="true"].memo-content-text .media-gallery-wrap .mg-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  background: rgba(0, 0, 0, 0.45);
  color: var(--color-text-inverse);
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.18s ease;
}

[data-media-layouts="true"].entry-content .media-gallery-wrap .mg-btn .lucide-icon,
[data-media-layouts="true"].memo-content-text .media-gallery-wrap .mg-btn .lucide-icon,
[data-media-layouts="true"].entry-content .media-carousel-btn .lucide-icon,
[data-media-layouts="true"].memo-content-text .media-carousel-btn .lucide-icon,
[data-media-layouts="true"].entry-content .media-pair-btn .lucide-icon,
[data-media-layouts="true"].memo-content-text .media-pair-btn .lucide-icon {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 18px;
}

[data-media-layouts="true"].entry-content .media-gallery-wrap .mg-btn:hover,
[data-media-layouts="true"].memo-content-text .media-gallery-wrap .mg-btn:hover {
  background: rgba(0, 0, 0, 0.72);
}

[data-media-layouts="true"].entry-content .media-gallery-wrap .mg-btn.prev,
[data-media-layouts="true"].memo-content-text .media-gallery-wrap .mg-btn.prev { left: 8px; }
[data-media-layouts="true"].entry-content .media-gallery-wrap .mg-btn.next,
[data-media-layouts="true"].memo-content-text .media-gallery-wrap .mg-btn.next { right: 8px; }

/* media-carousel：单张轮播 + 点击灯箱 */
[data-media-layouts="true"].entry-content .media-carousel,
[data-media-layouts="true"].memo-content-text .media-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  margin: 1rem 0;
  background: #000;
}

[data-media-layouts="true"].entry-content .media-carousel-track,
[data-media-layouts="true"].memo-content-text .media-carousel-track {
  display: flex;
  transition: transform 0.32s ease;
  will-change: transform;
}

[data-media-layouts="true"].entry-content .media-carousel-track a,
[data-media-layouts="true"].memo-content-text .media-carousel-track a {
  flex: 0 0 100%;
  display: block;
  background: transparent;
  background-image: none;
  text-shadow: none;
  padding: 0;
}

[data-media-layouts="true"].entry-content .media-carousel-track img,
[data-media-layouts="true"].memo-content-text .media-carousel-track img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border-radius: 0;
  cursor: pointer;
}

[data-media-layouts="true"].entry-content .media-carousel-btn,
[data-media-layouts="true"].memo-content-text .media-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.38);
  color: var(--color-text-inverse);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: background 0.18s ease;
  padding: 0;
}

[data-media-layouts="true"].entry-content .media-carousel-btn:hover,
[data-media-layouts="true"].memo-content-text .media-carousel-btn:hover {
  background: rgba(0, 0, 0, 0.6);
}

[data-media-layouts="true"].entry-content .media-carousel-btn.prev,
[data-media-layouts="true"].memo-content-text .media-carousel-btn.prev { left: 10px; }
[data-media-layouts="true"].entry-content .media-carousel-btn.next,
[data-media-layouts="true"].memo-content-text .media-carousel-btn.next { right: 10px; }

[data-media-layouts="true"].entry-content .media-carousel-dots,
[data-media-layouts="true"].memo-content-text .media-carousel-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}

[data-media-layouts="true"].entry-content .media-carousel-dot,
[data-media-layouts="true"].memo-content-text .media-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.18s ease;
  border: none;
  padding: 0;
}

[data-media-layouts="true"].entry-content .media-carousel-dot.active,
[data-media-layouts="true"].memo-content-text .media-carousel-dot.active {
  background: var(--color-bg-content);
}

/* Memo / Article 通用图文布局（最小可复用） */
[data-media-layouts="true"].entry-content .media-grid,
[data-media-layouts="true"].memo-content-text .media-grid {
  -webkit-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 12px;
  column-gap: 12px;
  column-fill: auto;
  margin: 1rem 0;
}

[data-media-layouts="true"].entry-content .media-grid.cols-1,
[data-media-layouts="true"].memo-content-text .media-grid.cols-1 {
  -webkit-column-count: 1;
  column-count: 1;
}

[data-media-layouts="true"].entry-content .media-grid.cols-2,
[data-media-layouts="true"].memo-content-text .media-grid.cols-2 {
  -webkit-column-count: 2;
  column-count: 2;
}

[data-media-layouts="true"].entry-content .media-grid.cols-3,
[data-media-layouts="true"].memo-content-text .media-grid.cols-3 {
  -webkit-column-count: 3;
  column-count: 3;
}

[data-media-layouts="true"].entry-content .media-grid.cols-4,
[data-media-layouts="true"].memo-content-text .media-grid.cols-4 {
  -webkit-column-count: 4;
  column-count: 4;
}

[data-media-layouts="true"].entry-content .media-grid.masonry-js,
[data-media-layouts="true"].memo-content-text .media-grid.masonry-js {
  -webkit-column-count: 1;
  column-count: 1;
  background-image: none;
}

[data-media-layouts="true"].entry-content .media-grid.masonry-js .media-grid-masonry-columns,
[data-media-layouts="true"].memo-content-text .media-grid.masonry-js .media-grid-masonry-columns {
  display: grid;
  grid-template-columns: repeat(var(--media-js-columns, 2), minmax(0, 1fr));
  gap: 12px;
}

[data-media-layouts="true"].entry-content .media-grid.masonry-js .media-grid-masonry-column,
[data-media-layouts="true"].memo-content-text .media-grid.masonry-js .media-grid-masonry-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

[data-media-layouts="true"].entry-content .media-grid.masonry-js .media-grid-masonry-column img,
[data-media-layouts="true"].memo-content-text .media-grid.masonry-js .media-grid-masonry-column img {
  margin-bottom: 0;
}

[data-media-layouts="true"].entry-content .media-grid.debug-columns,
[data-media-layouts="true"].memo-content-text .media-grid.debug-columns {
  outline: 1px dashed rgba(40, 120, 200, 0.45);
  outline-offset: 4px;
}

[data-media-layouts="true"].entry-content .media-grid.debug-columns img,
[data-media-layouts="true"].memo-content-text .media-grid.debug-columns img {
  outline: 1px dashed rgba(200, 70, 70, 0.55);
  outline-offset: -2px;
}

[data-media-layouts="true"].entry-content .media-grid.cols-2.debug-columns,
[data-media-layouts="true"].memo-content-text .media-grid.cols-2.debug-columns {
  background-image: linear-gradient(
    to right,
    transparent calc(50% - 1px),
    rgba(40, 120, 200, 0.35) calc(50% - 1px),
    rgba(40, 120, 200, 0.35) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

[data-media-layouts="true"].entry-content .media-grid.cols-3.debug-columns,
[data-media-layouts="true"].memo-content-text .media-grid.cols-3.debug-columns {
  background-image: linear-gradient(
    to right,
    transparent calc(33.333% - 1px),
    rgba(40, 120, 200, 0.35) calc(33.333% - 1px),
    rgba(40, 120, 200, 0.35) calc(33.333% + 1px),
    transparent calc(33.333% + 1px),
    transparent calc(66.666% - 1px),
    rgba(40, 120, 200, 0.35) calc(66.666% - 1px),
    rgba(40, 120, 200, 0.35) calc(66.666% + 1px),
    transparent calc(66.666% + 1px)
  );
}

[data-media-layouts="true"].entry-content .media-grid.cols-4.debug-columns,
[data-media-layouts="true"].memo-content-text .media-grid.cols-4.debug-columns {
  background-image: linear-gradient(
    to right,
    transparent calc(25% - 1px),
    rgba(40, 120, 200, 0.35) calc(25% - 1px),
    rgba(40, 120, 200, 0.35) calc(25% + 1px),
    transparent calc(25% + 1px),
    transparent calc(50% - 1px),
    rgba(40, 120, 200, 0.35) calc(50% - 1px),
    rgba(40, 120, 200, 0.35) calc(50% + 1px),
    transparent calc(50% + 1px),
    transparent calc(75% - 1px),
    rgba(40, 120, 200, 0.35) calc(75% - 1px),
    rgba(40, 120, 200, 0.35) calc(75% + 1px),
    transparent calc(75% + 1px)
  );
}

[data-media-layouts="true"].entry-content .media-grid img,
[data-media-layouts="true"].memo-content-text .media-grid img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  margin-bottom: 12px;
  border-radius: 8px;
  object-fit: cover;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

[data-media-layouts="true"].entry-content a.glightbox,
[data-media-layouts="true"].memo-content-text a.glightbox,
.entry-content a.glightbox,
.memo-content-text a.glightbox {
  cursor: pointer;
}

[data-media-layouts="true"].entry-content .media-grid a.glightbox,
[data-media-layouts="true"].entry-content .media-pair a.glightbox,
[data-media-layouts="true"].entry-content .media-split a.glightbox,
[data-media-layouts="true"].memo-content-text .media-grid a.glightbox,
[data-media-layouts="true"].memo-content-text .media-pair a.glightbox,
[data-media-layouts="true"].memo-content-text .media-split a.glightbox {
  display: block;
  cursor: pointer;
}

[data-media-layouts="true"].entry-content .media-grid a.glightbox:hover,
[data-media-layouts="true"].entry-content .media-grid a.glightbox:focus,
[data-media-layouts="true"].entry-content .media-pair a.glightbox:hover,
[data-media-layouts="true"].entry-content .media-pair a.glightbox:focus,
[data-media-layouts="true"].entry-content .media-single a.glightbox:hover,
[data-media-layouts="true"].entry-content .media-single a.glightbox:focus,
[data-media-layouts="true"].entry-content .media-split a.glightbox:hover,
[data-media-layouts="true"].entry-content .media-split a.glightbox:focus,
[data-media-layouts="true"].memo-content-text .media-grid a.glightbox:hover,
[data-media-layouts="true"].memo-content-text .media-grid a.glightbox:focus,
[data-media-layouts="true"].memo-content-text .media-pair a.glightbox:hover,
[data-media-layouts="true"].memo-content-text .media-pair a.glightbox:focus,
[data-media-layouts="true"].memo-content-text .media-single a.glightbox:hover,
[data-media-layouts="true"].memo-content-text .media-single a.glightbox:focus,
[data-media-layouts="true"].memo-content-text .media-split a.glightbox:hover,
[data-media-layouts="true"].memo-content-text .media-split a.glightbox:focus,
.entry-content a.glightbox:hover,
.entry-content a.glightbox:focus,
.memo-content-text a.glightbox:hover,
.memo-content-text a.glightbox:focus {
  text-decoration: none;
  color: inherit;
  background: none;
  background-image: none;
  box-shadow: none;
  border-bottom: none;
}

[data-media-layouts="true"].entry-content .media-grid a.glightbox img,
[data-media-layouts="true"].entry-content .media-pair a.glightbox img,
[data-media-layouts="true"].entry-content .media-single a.glightbox img,
[data-media-layouts="true"].entry-content .media-split a.glightbox img,
[data-media-layouts="true"].memo-content-text .media-grid a.glightbox img,
[data-media-layouts="true"].memo-content-text .media-pair a.glightbox img,
[data-media-layouts="true"].memo-content-text .media-single a.glightbox img,
[data-media-layouts="true"].memo-content-text .media-split a.glightbox img,
.entry-content a.glightbox img,
.memo-content-text a.glightbox img {
  cursor: pointer;
}

[data-media-layouts="true"].entry-content .media-pair,
[data-media-layouts="true"].memo-content-text .media-pair {
  --media-pair-gap: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--media-pair-gap);
  margin: 1rem 0;
  position: relative;
}

[data-media-layouts="true"].entry-content .media-pair img,
[data-media-layouts="true"].memo-content-text .media-pair img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border-radius: 8px;
  object-fit: cover;
}

[data-media-layouts="true"].entry-content .media-portrait-row,
[data-media-layouts="true"].memo-content-text .media-portrait-row {
  --media-portrait-height: 220px;
  --media-portrait-gap: 12px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: var(--media-portrait-gap);
  margin: 1rem 0;
  overflow-x: auto;
}

[data-media-layouts="true"].entry-content .media-portrait-h-220,
[data-media-layouts="true"].memo-content-text .media-portrait-h-220 { --media-portrait-height: 220px; }
[data-media-layouts="true"].entry-content .media-portrait-h-240,
[data-media-layouts="true"].memo-content-text .media-portrait-h-240 { --media-portrait-height: 240px; }
[data-media-layouts="true"].entry-content .media-portrait-h-280,
[data-media-layouts="true"].memo-content-text .media-portrait-h-280 { --media-portrait-height: 280px; }
[data-media-layouts="true"].entry-content .media-portrait-h-360,
[data-media-layouts="true"].memo-content-text .media-portrait-h-360 { --media-portrait-height: 360px; }
[data-media-layouts="true"].entry-content .media-portrait-h-480,
[data-media-layouts="true"].memo-content-text .media-portrait-h-480 { --media-portrait-height: 480px; }

[data-media-layouts="true"].entry-content .media-portrait-row > img,
[data-media-layouts="true"].entry-content .media-portrait-row > a.glightbox,
[data-media-layouts="true"].memo-content-text .media-portrait-row > img,
[data-media-layouts="true"].memo-content-text .media-portrait-row > a.glightbox {
  flex: 0 0 auto;
}

[data-media-layouts="true"].entry-content .media-portrait-row > a.glightbox,
[data-media-layouts="true"].memo-content-text .media-portrait-row > a.glightbox {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

[data-media-layouts="true"].entry-content .media-portrait-row img,
[data-media-layouts="true"].memo-content-text .media-portrait-row img {
  width: auto;
  height: var(--media-portrait-height);
  max-width: none;
  display: block;
  margin: 0;
  border-radius: 8px;
  object-fit: contain;
}

[data-media-layouts="true"].entry-content .media-single,
[data-media-layouts="true"].memo-content-text .media-single {
  --media-single-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem 0;
}

[data-media-layouts="true"].entry-content .media-single > img,
[data-media-layouts="true"].entry-content .media-single > a.glightbox,
[data-media-layouts="true"].memo-content-text .media-single > img,
[data-media-layouts="true"].memo-content-text .media-single > a.glightbox {
  width: min(100%, var(--media-single-width));
}

[data-media-layouts="true"].entry-content .media-single > a.glightbox,
[data-media-layouts="true"].memo-content-text .media-single > a.glightbox {
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-media-layouts="true"].entry-content .media-single img,
[data-media-layouts="true"].memo-content-text .media-single img {
  height: auto;
  display: block;
  margin: 0;
  border-radius: 8px;
}

[data-media-layouts="true"].entry-content .media-single > a.glightbox img,
[data-media-layouts="true"].memo-content-text .media-single > a.glightbox img {
  width: 100%;
}

[data-media-layouts="true"].entry-content .media-w-100,
[data-media-layouts="true"].memo-content-text .media-w-100 { --media-single-width: 100%; }
[data-media-layouts="true"].entry-content .media-w-95,
[data-media-layouts="true"].memo-content-text .media-w-95 { --media-single-width: 95%; }
[data-media-layouts="true"].entry-content .media-w-90,
[data-media-layouts="true"].memo-content-text .media-w-90 { --media-single-width: 90%; }
[data-media-layouts="true"].entry-content .media-w-85,
[data-media-layouts="true"].memo-content-text .media-w-85 { --media-single-width: 85%; }
[data-media-layouts="true"].entry-content .media-w-80,
[data-media-layouts="true"].memo-content-text .media-w-80 { --media-single-width: 80%; }
[data-media-layouts="true"].entry-content .media-w-75,
[data-media-layouts="true"].memo-content-text .media-w-75 { --media-single-width: 75%; }
[data-media-layouts="true"].entry-content .media-w-70,
[data-media-layouts="true"].memo-content-text .media-w-70 { --media-single-width: 70%; }
[data-media-layouts="true"].entry-content .media-w-65,
[data-media-layouts="true"].memo-content-text .media-w-65 { --media-single-width: 65%; }
[data-media-layouts="true"].entry-content .media-w-60,
[data-media-layouts="true"].memo-content-text .media-w-60 { --media-single-width: 60%; }
[data-media-layouts="true"].entry-content .media-w-55,
[data-media-layouts="true"].memo-content-text .media-w-55 { --media-single-width: 55%; }
[data-media-layouts="true"].entry-content .media-w-50,
[data-media-layouts="true"].memo-content-text .media-w-50 { --media-single-width: 50%; }
[data-media-layouts="true"].entry-content .media-w-45,
[data-media-layouts="true"].memo-content-text .media-w-45 { --media-single-width: 45%; }
[data-media-layouts="true"].entry-content .media-w-40,
[data-media-layouts="true"].memo-content-text .media-w-40 { --media-single-width: 40%; }
[data-media-layouts="true"].entry-content .media-w-35,
[data-media-layouts="true"].memo-content-text .media-w-35 { --media-single-width: 35%; }
[data-media-layouts="true"].entry-content .media-w-30,
[data-media-layouts="true"].memo-content-text .media-w-30 { --media-single-width: 30%; }
[data-media-layouts="true"].entry-content .media-w-25,
[data-media-layouts="true"].memo-content-text .media-w-25 { --media-single-width: 25%; }
[data-media-layouts="true"].entry-content .media-w-20,
[data-media-layouts="true"].memo-content-text .media-w-20 { --media-single-width: 20%; }
[data-media-layouts="true"].entry-content .media-w-15,
[data-media-layouts="true"].memo-content-text .media-w-15 { --media-single-width: 15%; }
[data-media-layouts="true"].entry-content .media-w-10,
[data-media-layouts="true"].memo-content-text .media-w-10 { --media-single-width: 10%; }
[data-media-layouts="true"].entry-content .media-w-5,
[data-media-layouts="true"].memo-content-text .media-w-5 { --media-single-width: 5%; }

[data-media-layouts="true"].entry-content .media-pair.is-carousel,
[data-media-layouts="true"].memo-content-text .media-pair.is-carousel {
  display: block;
}

[data-media-layouts="true"].entry-content .media-pair-viewport,
[data-media-layouts="true"].memo-content-text .media-pair-viewport {
  overflow: hidden;
}

[data-media-layouts="true"].entry-content .media-pair-track,
[data-media-layouts="true"].memo-content-text .media-pair-track {
  display: flex;
  gap: var(--media-pair-gap);
  transition: transform 0.28s ease;
  will-change: transform;
}

[data-media-layouts="true"].entry-content .media-pair-item,
[data-media-layouts="true"].memo-content-text .media-pair-item {
  flex: 0 0 calc((100% - var(--media-pair-gap)) / 2);
  min-width: 0;
}

[data-media-layouts="true"].entry-content .media-pair-item > a.glightbox,
[data-media-layouts="true"].entry-content .media-pair-item > img,
[data-media-layouts="true"].memo-content-text .media-pair-item > a.glightbox,
[data-media-layouts="true"].memo-content-text .media-pair-item > img {
  display: block;
}

[data-media-layouts="true"].entry-content .media-pair-btn,
[data-media-layouts="true"].memo-content-text .media-pair-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 38px;
  height: 38px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.62);
  color: var(--color-text-inverse);
  font-size: 28px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease;
}

[data-media-layouts="true"].entry-content .media-pair-btn:hover,
[data-media-layouts="true"].memo-content-text .media-pair-btn:hover {
  background: rgba(20, 20, 20, 0.78);
}

[data-media-layouts="true"].entry-content .media-pair-btn.prev,
[data-media-layouts="true"].memo-content-text .media-pair-btn.prev { left: 10px; }

[data-media-layouts="true"].entry-content .media-pair-btn.next,
[data-media-layouts="true"].memo-content-text .media-pair-btn.next { right: 10px; }

[data-media-layouts="true"].entry-content .media-pair-btn.is-hidden,
[data-media-layouts="true"].memo-content-text .media-pair-btn.is-hidden {
  opacity: 0;
  pointer-events: none;
}

[data-media-layouts="true"].entry-content .media-split,
[data-media-layouts="true"].memo-content-text .media-split {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin: 1rem 0;
}

[data-media-layouts="true"].entry-content .media-split.reverse,
[data-media-layouts="true"].memo-content-text .media-split.reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
}

[data-media-layouts="true"].entry-content .media-split.reverse > img,
[data-media-layouts="true"].memo-content-text .media-split.reverse > img {
  order: 2;
}

[data-media-layouts="true"].entry-content .media-split.reverse > a.glightbox,
[data-media-layouts="true"].memo-content-text .media-split.reverse > a.glightbox {
  order: 2;
}

[data-media-layouts="true"].entry-content .media-split.reverse > div,
[data-media-layouts="true"].memo-content-text .media-split.reverse > div {
  order: 1;
}

[data-media-layouts="true"].entry-content .media-split > a.glightbox,
[data-media-layouts="true"].memo-content-text .media-split > a.glightbox {
  display: block;
}

[data-media-layouts="true"].entry-content .media-split img,
[data-media-layouts="true"].memo-content-text .media-split img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border-radius: 8px;
}

@media screen and (max-width: 768px) {
  [data-media-layouts="true"].entry-content .media-grid,
  [data-media-layouts="true"].memo-content-text .media-grid {
    -webkit-column-count: 1;
    column-count: 1;
  }

  [data-media-layouts="true"].entry-content .media-pair,
  [data-media-layouts="true"].memo-content-text .media-pair {
    grid-template-columns: 1fr;
  }

  [data-media-layouts="true"].entry-content .media-single,
  [data-media-layouts="true"].memo-content-text .media-single {
    --media-single-width: 100%;
  }

  [data-media-layouts="true"].entry-content .media-pair.is-carousel,
  [data-media-layouts="true"].memo-content-text .media-pair.is-carousel {
    display: grid;
  }

  [data-media-layouts="true"].entry-content .media-pair.is-carousel .media-pair-viewport,
  [data-media-layouts="true"].memo-content-text .media-pair.is-carousel .media-pair-viewport {
    overflow: visible;
  }

  [data-media-layouts="true"].entry-content .media-pair.is-carousel .media-pair-track,
  [data-media-layouts="true"].memo-content-text .media-pair.is-carousel .media-pair-track {
    display: grid;
    gap: var(--media-pair-gap);
    transform: none;
  }

  [data-media-layouts="true"].entry-content .media-pair.is-carousel .media-pair-item,
  [data-media-layouts="true"].memo-content-text .media-pair.is-carousel .media-pair-item {
    flex: none;
  }

  [data-media-layouts="true"].entry-content .media-pair-btn,
  [data-media-layouts="true"].memo-content-text .media-pair-btn {
    display: none;
  }

  [data-media-layouts="true"].entry-content .media-split,
  [data-media-layouts="true"].entry-content .media-split.reverse,
  [data-media-layouts="true"].memo-content-text .media-split,
  [data-media-layouts="true"].memo-content-text .media-split.reverse {
    grid-template-columns: 1fr;
  }

  [data-media-layouts="true"].entry-content .media-split.reverse > img,
  [data-media-layouts="true"].entry-content .media-split.reverse > a.glightbox,
  [data-media-layouts="true"].entry-content .media-split.reverse > div,
  [data-media-layouts="true"].memo-content-text .media-split.reverse > img,
  [data-media-layouts="true"].memo-content-text .media-split.reverse > a.glightbox,
  [data-media-layouts="true"].memo-content-text .media-split.reverse > div {
    order: initial;
  }
}

/* ===== 16. 分类专属：Series 旅行系列目录 ===== */
#content .entry-content .series-dir {
  margin: 1.2rem 0 1.6rem 0;
  padding: 0.95rem 1.05rem;
  border-radius: 10px;
  border: 1px solid rgba(199, 67, 80, 0.16);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: none;
  backdrop-filter: none;
}

#content .entry-content .series-dir__heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.9rem 0;
  font-weight: 600;
  color: #4a4038;
  letter-spacing: 0.01em;
}

#content .entry-content .series-dir__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(199, 67, 80, 0.9);
  box-shadow: none;
  flex: 0 0 auto;
}

#content .entry-content .series-dir__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

#content .entry-content .series-dir__item {
  /* reset theme's generic ol/li styling */
  counter-increment: none;
  margin: 0;
  padding: 0.58rem 0.75rem;
  list-style: none;
  position: relative;
  border-radius: 9px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transition: background 0.18s ease;
}

#content .entry-content .series-dir__item::before,
#content .entry-content .series-dir__item::after {
  content: none;
}

#content .entry-content .series-dir__item.is-active {
  background: rgba(199, 67, 80, 0.08);
}

#content .entry-content .series-dir__link {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: #3d352d;
  font-weight: 600;
  line-height: 1.45;
}

#content .entry-content .series-dir__link:link,
#content .entry-content .series-dir__link:visited,
#content .entry-content .series-dir__link:hover,
#content .entry-content .series-dir__link:active {
  padding: 0;
  margin: 0;
  background: transparent;
  background-image: none;
  text-decoration: none;
  text-shadow: none;
}

#content .entry-content .series-dir__item:hover {
  background: rgba(199, 67, 80, 0.05);
}

#content .entry-content .series-dir__item:hover .series-dir__link {
  color: var(--color-accent);
}

#content .entry-content .series-dir__item.is-active .series-dir__link {
  color: var(--color-accent);
}

#content .entry-content .series-dir__link--pending,
#content .entry-content .series-dir__link--pending:link,
#content .entry-content .series-dir__link--pending:visited,
#content .entry-content .series-dir__link--pending:hover,
#content .entry-content .series-dir__link--pending:active {
  color: #8d857d;
  font-weight: 500;
}

#content .entry-content .series-dir__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  flex: 0 0 auto;
  text-align: center;
  font-size: 1.04rem;
  margin-top: 0.08rem;
  line-height: 1;
  color: var(--color-accent);
}

#content .entry-content .series-dir__item.is-active .series-dir__icon {
  color: rgba(199, 67, 80, 0.95);
}

#content .entry-content .series-dir__link--pending .series-dir__icon {
  color: #b8b1aa;
}

#content .entry-content .series-dir__link--pending {
  cursor: default;
  pointer-events: none;
}

#content .entry-content .series-dir__item.is-pending .series-dir__link:not(.series-dir__link--pending):hover {
  color: var(--color-accent);
}

@media screen and (max-width: 768px) {
  #content .entry-content .series-dir {
    margin: 1rem 0 1.2rem 0;
    padding: 0.85rem 0.95rem;
  }

  #content .entry-content .series-dir__heading {
    gap: 0.5rem;
    margin-bottom: 0.8rem;
  }

  #content .entry-content .series-dir__item {
    padding: 0.55rem 0.7rem;
  }

  #content .entry-content .series-dir__icon {
    font-size: 1rem;
  }
}