/* ===== 基础层 ===== */
/* LcXyz 公开站点的样式入口，按层组织：
   - 基础层：色彩令牌、字体、reset 与跨页面公共规则
   - 布局层：外壳、侧栏、页头等骨架
   - 列表层：首页索引、归档、说说等列表
   - 页面私有样式：首页 / 关于页 / 文章页 / 说说页 / 小记页
   断点只覆盖共享层变量。 */

@font-face {
  font-family: "Noto Serif SC";
  src: url("fonts/noto-serif-sc-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+3000-303F, U+FF00-FFEF;
}

@font-face {
  font-family: "Noto Serif SC";
  src: url("fonts/noto-serif-sc-400-cjk-common.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+4E00-9FFF;
}

@font-face {
  font-family: "Noto Serif SC";
  src: url("fonts/noto-serif-sc-400-cjk-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3400-4DBF, U+20000-2A6DF;
}

@font-face {
  font-family: "Noto Serif SC";
  src: url("fonts/noto-serif-sc-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+3000-303F, U+FF00-FFEF;
}

@font-face {
  font-family: "Noto Serif SC";
  src: url("fonts/noto-serif-sc-600-cjk-common.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+4E00-9FFF;
}

@font-face {
  font-family: "Noto Serif SC";
  src: url("fonts/noto-serif-sc-600-cjk-ext.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3400-4DBF, U+20000-2A6DF;
}

/* ===============================
   主题变量
================================ */
:root {
  color-scheme: light;
  /* 配色原语：换一套皮肤只改这 9 行 */
  --u-page: #e9ddc2;
  --u-sunken: #dccdad;
  --u-card: #f2e8d3;
  --u-raised: #f8f1e2;
  --u-text: #3a2f22;
  --u-muted: #675742;
  --u-accent: #9a4c18;
  --u-border-pct: 18%;
  --u-grid-pct: 9%;
  --overlay-20: rgba(0, 0, 0, 0.2);
  --overlay-35: rgba(0, 0, 0, 0.35);
  --overlay-45: rgba(0, 0, 0, 0.45);
  --overlay-60: rgba(0, 0, 0, 0.6);
  --overlay-70: rgba(0, 0, 0, 0.7);
  --overlay-85: rgba(0, 0, 0, 0.85);
  --overlay-90: rgba(0, 0, 0, 0.9);
  --lightbox-text: #ffffff;
  --lightbox-border: rgba(255, 255, 255, 0.2);
  --lightbox-dot-muted: rgba(255, 255, 255, 0.35);
  /* 页面底纹图。后台「背景」里传过自定义图时，页面头部会把它改成绝对地址 */
  --bg-image: url("images/bg.webp");
  --blur-md: 8px;
  --blur-lg: 12px;
  --font-readable: "Noto Serif SC", ui-serif, Georgia, "Times New Roman", "Songti SC", serif;
  --font-reading: "LXGW WenKai Screen", "Noto Serif SC", "Kaiti SC", "STKaiti", serif;
  --font-copy: var(--font-reading);
  --font-mono: "Sarasa Mono SC", "Noto Sans Mono CJK SC", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-brand: Georgia, serif;
  --max: 980px;
  --sidebar: 220px;
  --layout-shell-max-inline-size: 1180px;
  --public-sidebar-inline-size: 220px;
  --public-content-padding-inline: 48px;
  --tap-min-h: 44px;
  --pad-x: var(--public-content-padding-inline);
  --quote-pad: 1rem;
  --header-gap: 12px;
  /* 账本骨架：一条竖栏切出日期位，横向用实线分格 */
  --ledger-rail: 96px;
  --ledger-gap: 22px;
  --ledger-rule: var(--grid-line);
  /* 书口：页头标题竖排占的那一列 */
  --book-edge: 34px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --u-page: #211b13;
  --u-sunken: #181309;
  --u-card: #2c2418;
  --u-raised: #3a3022;
  --u-text: #eadfca;
  --u-muted: #ad9c82;
  --u-accent: #e09a4e;
  --u-border-pct: 28%;
  --u-grid-pct: 6.5%;
}

/* 原语接到各处正在使用的令牌上。:root[data-theme] 同时命中明暗两态，
   所以上面两个模式块里不再重复声明派生值。 */
:root[data-theme] {
  --bg: var(--u-page);
  --content-bg: var(--u-card);
  --panel: var(--u-sunken);
  --surface-soft: var(--u-sunken);
  --code-header-bg: var(--u-sunken);
  --code-content-bg: var(--u-card);
  --code-bg: var(--u-card);
  --code-action-hover-bg: var(--u-raised);
  --code-border: var(--border);
  --code-text: var(--text);

  --text: var(--u-text);
  --muted: var(--u-muted);
  --faint: color-mix(in srgb, var(--u-muted) 90%, var(--u-page));
  --accent: var(--u-accent);

  --border: color-mix(in srgb, var(--u-text) var(--u-border-pct), var(--u-page));
  --border-strong: color-mix(in srgb, var(--u-text) 22%, var(--u-page));
  --grid-line: color-mix(in srgb, var(--u-text) var(--u-grid-pct), var(--u-page));
  /* 坐在卡面上的块：往卡面混一档 sunken。混 --bg 会连页面底一起拉进来，
     页面底比卡面暗，于是每块都糊成灰棕。 */
  --surface-card: color-mix(in srgb, var(--u-sunken) 30%, var(--content-bg));
  --surface-card-strong: color-mix(in srgb, var(--u-sunken) 52%, var(--content-bg));

  --scrollbar-thumb: color-mix(in srgb, var(--u-text) 20%, transparent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--u-text) 34%, transparent);

  --radius-xs: 2px;
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 3px;
  --radius-pill: 2px;

  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 19px;
  --text-2xl: 24px;
}

/* ===============================
   基础元素
================================ */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  /* 页面底纹：一层 94% 底色薄雾 + 水墨图，雾与图以 luminosity 融合；图固定居中、按视口裁切。
     图来自 --bg-image：默认是主题自带那张，后台「背景」传过自定义图时由页面头部改写。 */
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--bg) 94%, transparent),
      color-mix(in srgb, var(--bg) 94%, transparent)
    ),
    var(--bg-image);
  background-position: center, center;
  background-size: 100% 100%, cover;
  background-repeat: no-repeat;
  background-attachment: fixed, fixed;
  background-blend-mode: normal, luminosity;
  color: var(--text);
  font-family: var(--font-readable);
  line-height: 1.75;
  font-size: var(--text-md);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

time,
.archive-date,
.memo-meta,
.meta-line {
  font-family: var(--font-copy);
}

.page-subtitle,
.intro,
.prose blockquote,
.prose blockquote p,
cite,
q {
  font-family: var(--font-copy);
}

pre,
code,
kbd,
samp {
  font-family: var(--font-mono);
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--text);
  text-decoration: none;
}

/* 仅将无类名链接视为默认文本链接；组件化链接自行定义 hover/focus 表现。 */
a:where(:not([class])) {
  border-bottom: 1px solid transparent;
}

a:where(:not([class])):hover {
  border-bottom-color: currentColor;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-bottom-color: transparent;
}

/* 正文区域链接：默认虚线，悬停实线 */
.content__inner :where(p, li, blockquote, figcaption) a:where(:not([class])) {
  border-bottom: 1px dashed currentColor;
}

.content__inner :where(p, li, blockquote, figcaption) a:where(:not([class])):hover {
  border-bottom-style: solid;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 28px 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  z-index: 10;
}

.skip-link:focus {
  left: 8px;
}

.intro {
  margin: 28px 0 32px;
  color: var(--text);
  font-size: var(--text-md);
  letter-spacing: 0.02em;
}

/* ===============================
   滚动条
================================ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

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

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* ===============================
   响应式
================================ */
/* 公开站点窄屏变量。 */
@media (max-width: 900px) {
  body {
    color-scheme: light;
    --sidebar: 1fr;
    --tap-min-h: 44px;
    --pad-x: 20px;
    --quote-pad: 0.85rem;
    --header-gap: 4px;
  }

  body .intro {
    margin: 16px 0 22px;
  }

}

@media (min-width: 641px) and (max-width: 900px) {
  body {
    --pad-x: 28px;
  }

}

@media (max-width: 640px) {
  body {
    --pad-x: 18px;
  }

  body .intro {
    margin: 12px 0 18px;
  }
}

/* ===== 布局层 ===== */
/* 负责壳/导航/内容区/页面头与侧栏按钮；禁止放内容块（prose/code-block/figure）、
   页面卡片样式或页面私有调优。
*/

/* ===============================
   布局结构
================================ */
.shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  max-width: var(--layout-shell-max-inline-size);
  margin: 0 auto;
}

@media (min-width: 901px) {
  .shell {
    padding: 50px 30px;
    gap: 44px;
  }
}

/* ===============================
   侧边栏与导航
================================ */
.sidebar {
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  height: 100vh;
  padding: 50px 0;
  display: flex;
  position: sticky;
  top: 0;
}

/* S1 品牌：logo 在上、站名在下，整组右对齐 */
.sidebar__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.sidebar__logo {
  display: block;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: var(--radius-xs);
  flex: 0 0 auto;
  object-fit: cover;
  filter: saturate(.9);
}

:root[data-theme="dark"] .sidebar__logo {
  filter: invert(1) saturate(.9);
}

.sidebar__title {
  font-family: var(--font-brand);
  font-size: 22px;
  letter-spacing: 0.5px;
}

.sidebar__title-text {
  display: inline;
}

.sidebar__quote {
  width: 100%;
  text-align: right;
  font-family: var(--font-brand);
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

/* S1 导航：整列右对齐，当前页在标签下一条短横杠 */
.nav {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.nav li {
  padding: 7px 0;
}

.nav a {
  display: inline-block;
  position: relative;
  font-size: var(--text-md);
}

.nav a[aria-current="page"] {
  color: var(--accent);
}

.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -3px;
  width: 18px;
  height: 2px;
  background: var(--accent);
}

/* ===============================
   内容区域
================================ */
.content {
  padding: 34px 40px 30px;
  min-height: calc(100vh - 100px);
  display: flex;
  min-width: 0;
  width: 100%;
  background: var(--content-bg);
  border: 0;
  border-radius: 0;
  /* 书脊：内容卡左边内嵌一条强调色竖条，不再画整圈边框 */
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
}

.content__inner {
  max-width: var(--max);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  width: 100%;
}

.site-footer {
  margin-top: 22px;
  padding: 22px 0 4px;
  border-top: 1px solid var(--ledger-rule);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--muted);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  flex-wrap: wrap;
}

.site-footer__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.site-footer__copy {
  font-family: var(--font-copy);
}

.site-footer__links {
  display: inline-flex;
  align-items: center;
  gap: 20px;
}

.site-footer__link {
  color: inherit;
  font-family: var(--font-copy);
  transition: color 0.2s ease;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--accent);
}

.site-footer__beian {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-family: var(--font-copy);
}

.site-footer__beian-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  transition: color 0.2s ease;
}

.site-footer__beian-icon {
  display: block;
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.site-footer__beian-icon--logo {
  width: 16px;
  height: 16px;
}

.site-footer__beian-link:hover,
.site-footer__beian-link:focus-visible {
  color: var(--accent);
}

/* ===============================
   页面头部
================================ */
.page-title {
  font-size: var(--text-2xl);
  margin: 0;
}

.page-header {
  display: grid;
  grid-template-columns: var(--book-edge) minmax(0, 1fr) auto;
  column-gap: 20px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ledger-rule);
}

/* 标题栏摊平成页头的网格项，好让竖排标题单独占住书口那一列 */
.page-header .page-heading {
  display: contents;
}

.page-header .page-title {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  writing-mode: vertical-rl;
  padding: 2px 0 2px 10px;
  border-left: 2px solid var(--accent);
  font-size: var(--text-lg);
  letter-spacing: 0.32em;
  line-height: 1.2;
}

.page-header .page-actions {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: start;
}

.page-header .icon-link {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted);
  border-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, background 0.2s ease;
}

.page-header .icon-link:hover {
  color: var(--text);
  background: var(--panel);
  border-bottom: 0;
}

.page-header .icon-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.page-header .icon-link .icon {
  width: 16px;
  height: 16px;
  display: block;
}

.page-header.page-header--memos {
  margin-bottom: 18px;
}

.page-header .page-subtitle {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-md);
  font-weight: normal;
}

/* 页面头部右侧的条目数 */
.page-header .page-header__count {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: normal;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.page-subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* 文章上下篇导航 */
.prev-next {
  margin-top: 20px;
  display: flex;
  gap: 18px;
  flex-wrap: nowrap;
}

.prev-next__item {
  flex: 1 1 0;
  min-width: 0;
}

.prev-next__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text);
  transition: color 0.2s ease;
}

.prev-next__link:hover {
  color: var(--accent);
}

.prev-next__link--next {
  text-align: right;
  align-items: flex-end;
}

.prev-next__label {
  font-size: var(--text-xs);
  color: var(--faint);
}

.prev-next__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
  overflow: hidden;
  font-size: var(--text-base);
  color: var(--text);
  line-height: 1.5;
}

.prev-next__empty {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--faint);
  font-size: var(--text-base);
  line-height: 1.5;
}

.prev-next__empty--next {
  align-items: flex-end;
  text-align: right;
}

/* 公开站点窄屏壳层。 */
@media (max-width: 900px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    padding: calc(32px + env(safe-area-inset-top)) calc(var(--pad-x) + env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) calc(var(--pad-x) + env(safe-area-inset-left));
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 10px;
    column-gap: 12px;
  }

  .sidebar__brand {
    display: contents;
  }

  .sidebar__title {
    transform-origin: left center;
    order: 1;
    flex: 1 1 auto;
    font-size: 24px;
  }

  .sidebar__quote {
    display: none;
  }

  .nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
    margin-top: 2px;
    order: 4;
    width: 100%;
  }

  .nav li {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  .nav li::after {
    display: none;
  }

  .nav a {
    display: inline-flex;
    justify-content: center;
    padding: 6px 8px;
    min-height: var(--tap-min-h);
    border-radius: var(--radius-pill);
    transform-origin: left center;
  }

  .icon-button {
    min-width: var(--tap-min-h);
    min-height: var(--tap-min-h);
  }

  .sidebar-actions {
    order: 2;
    margin-top: 0;
    align-self: center;
  }

  .sidebar-actions .icon-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  .sidebar-actions .icon-button .icon {
    width: 18px;
    height: 18px;
  }

  .sidebar {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .content {
    margin: 0 10px 20px;
    width: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding: calc(16px + env(safe-area-inset-top)) calc(var(--pad-x) + env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) calc(var(--pad-x) + env(safe-area-inset-left));
  }

  /* 窄屏放不下竖排书口，标题回到横排 */
  .page-header {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 4px;
    padding-bottom: 14px;
  }

  .page-header .page-title {
    grid-column: 1;
    grid-row: 1;
    writing-mode: horizontal-tb;
    padding: 0;
    border-left: 0;
    font-size: var(--text-2xl);
    letter-spacing: 0.02em;
  }

  .page-header .page-subtitle {
    grid-column: 1;
    grid-row: 2;
    font-size: var(--text-base);
  }

  .page-header .page-header__count {
    grid-column: 2;
    grid-row: 1;
  }

  .page-header .page-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .page-header .entry-tag-current__pill {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
  }

  .page-header .entry-tag-current__clear {
    grid-column: 1;
    grid-row: 3;
    justify-self: end;
  }

  .page-header.page-header--memos {
    margin-bottom: 12px;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .sidebar {
    padding: calc(28px + env(safe-area-inset-top)) calc(var(--pad-x) + env(safe-area-inset-right)) calc(36px + env(safe-area-inset-bottom)) calc(var(--pad-x) + env(safe-area-inset-left));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }

  .content {
    padding: calc(20px + env(safe-area-inset-top)) calc(var(--pad-x) + env(safe-area-inset-right)) calc(56px + env(safe-area-inset-bottom)) calc(var(--pad-x) + env(safe-area-inset-left));
  }

  .nav a {
    padding: 8px 12px;
  }
}

@media (max-width: 640px) {
  .sidebar {
    padding: calc(18px + env(safe-area-inset-top)) calc(var(--pad-x) + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(var(--pad-x) + env(safe-area-inset-left));
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  .nav {
    gap: 8px 10px;
  }

  .nav a {
    padding: 6px 8px;
    font-size: 15px;
  }

  .page-title {
    font-size: 24px;
  }

  .page-subtitle {
    font-size: var(--text-xs);
  }

  .content {
    padding: calc(16px + env(safe-area-inset-top)) calc(var(--pad-x) + env(safe-area-inset-right)) calc(36px + env(safe-area-inset-bottom)) calc(var(--pad-x) + env(safe-area-inset-left));
  }

}

/* 侧栏底部按钮组 */
.sidebar-actions {
  align-self: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
}

@media (max-width: 900px) {
  .sidebar-actions {
    margin-left: auto;
    gap: 4px;
  }
}

/* 图标按钮基础样式 */
.icon-button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: color 0.2s ease;
}

.icon-button[aria-disabled="true"],
.icon-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.icon-button[aria-disabled="true"] .icon,
.icon-button:disabled .icon {
  transform: none;
}

/* 图标悬停提示 */
.sidebar-actions .icon-button[data-tooltip] {
  position: relative;
}

.sidebar-actions .icon-button[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translate(-50%, 4px);
  padding: 6px 10px;
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  font-family: var(--font-copy);
  font-size: var(--text-xs);
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 5;
}

.sidebar-actions .icon-button[data-tooltip]::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, 2px);
  border: 6px solid transparent;
  border-top-color: var(--panel);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 4;
}

.sidebar-actions .icon-button[data-tooltip]:hover::after,
.sidebar-actions .icon-button[data-tooltip]:focus-visible::after,
.sidebar-actions .icon-button[data-tooltip]:hover::before,
.sidebar-actions .icon-button[data-tooltip]:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 窄屏侧栏变成顶部横排，提示框不换行且绝对定位，靠右时会把页面撑出横向滚动 */
@media (max-width: 900px) {
  .sidebar-actions .icon-button[data-tooltip]::before,
  .sidebar-actions .icon-button[data-tooltip]::after {
    display: none;
  }
}

.icon-button:hover {
  color: var(--text);
}

.icon-button:hover .icon {
  transform: scale(1.06);
}

/* 主题切换按钮 */
.theme-toggle {
  align-self: center;
}

.theme-toggle:hover .icon {
  transform: rotate(20deg);
}

.theme-toggle:active .icon {
  transform: rotate(90deg);
}

.icon-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.icon-button .icon {
  width: 18px;
  height: 18px;
  display: block;
  transition: transform 0.25s ease;
}

.theme-toggle .icon-moon,
.theme-toggle .icon-system {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: none;
}

:root[data-theme-mode="system"] .theme-toggle .icon-system {
  display: block;
}

:root[data-theme-mode="system"] .theme-toggle .icon-moon,
:root[data-theme-mode="system"] .theme-toggle .icon-sun {
  display: none;
}

/* 阅读模式按钮（侧栏） */
.reader-toggle .icon-book-closed {
  display: none;
}

body[data-reading="immersive"] .reader-toggle .icon-book-closed {
  display: block;
}

body[data-reading="immersive"] .reader-toggle .icon-book-open {
  display: none;
}

@media (hover: none) {
  .icon-button:hover {
    color: var(--muted);
    transform: none;
  }

  .sidebar-actions .icon-button[data-tooltip]::before,
  .sidebar-actions .icon-button[data-tooltip]::after {
    display: none;
  }
}

/* 阅读模式退出按钮（正文） */
.reader-exit-anchor {
  position: relative;
}

.reader-exit-anchor[data-reader-exit-inline] {
  padding-right: 44px;
}

.reader-exit {
  position: absolute;
  right: 0;
  top: 2px;
  width: 38px;
  height: 38px;
  opacity: 0;
  pointer-events: none;
}

.reader-exit[data-visible="true"] {
  opacity: 1;
  pointer-events: auto;
}

.reader-exit .icon {
  width: 20px;
  height: 20px;
}

/* 浮动动作按钮（回到顶部 / 阅读模式浮层） */
.float-action {
  --float-bottom: calc(16px + env(safe-area-inset-bottom));
  --float-gap: 10px;
  position: fixed;
  right: calc(var(--pad-x) + env(safe-area-inset-right));
  bottom: var(--float-bottom);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 0;
  background: transparent;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
  z-index: 6;
}

.float-action::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--panel);
  pointer-events: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.float-action[data-visible="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.float-action .icon {
  width: 18px;
  height: 18px;
  position: relative;
  z-index: 1;
}

.scroll-top[data-stack="true"] {
  bottom: calc(var(--float-bottom) + var(--float-gap) + 44px);
}

/* 阅读模式：隐藏侧栏/导航/页脚，增强正文可读性 */
body.immersive-page[data-reading="immersive"] .sidebar,
body.immersive-page[data-reading="immersive"] .site-footer {
  display: none;
}

body.immersive-page[data-reading="immersive"] .shell {
  grid-template-columns: 1fr;
  max-width: 960px;
}

body.immersive-page[data-reading="immersive"] .content {
  padding: 64px 40px;
}

body.immersive-page[data-reading="immersive"] .content__inner {
  max-width: 860px;
  margin: 0 auto;
}

body.immersive-page[data-reading="immersive"] .prose {
  font-size: 17px;
  line-height: 1.9;
}

body.immersive-page[data-reading="immersive"] .prose p {
  margin: 16px 0;
}

body.immersive-page[data-reading="immersive"] .toc-rail {
  display: none;
}

/* ===== 列表层 ===== */
/* 负责通用列表与归档布局；禁止放页面专属卡片或页面私有间距调优。
*/

.page-header.page-header--with-search .page-actions {
  transform: none;
}

.page-header.page-header--divided {
  padding-bottom: 10px;
}

.entry-search {
  --entry-search-shift-y: 2px;
  --entry-search-input-h: 26px;
  --entry-search-feedback-gap: 6px;
  --entry-search-feedback-h: 18px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 34px;
}

.entry-search-toggle {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-bottom: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  align-self: center;
  position: relative;
}

.entry-search-toggle:hover {
  color: var(--text);
}

.entry-search.is-open .entry-search-toggle {
  color: var(--text);
}

.entry-search-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.entry-search-toggle .icon {
  width: 20px;
  height: 20px;
  display: block;
  transform: translateY(4px);
  transition: transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .entry-search-toggle:hover .icon {
    transform: translate(-1px, 4px) scale(1.12);
  }
}

.entry-search-panel {
  position: absolute;
  right: calc(100% + 8px);
  top: calc(50% + var(--entry-search-shift-y) - (var(--entry-search-input-h) / 2));
  width: min(196px, 32vw);
  display: flex;
  flex-direction: column;
  gap: var(--entry-search-feedback-gap);
  visibility: hidden;
  transform: translate(8px, 0);
  pointer-events: none;
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
  z-index: 2;
}

.entry-search-bridge {
  position: absolute;
  top: calc(50% + var(--entry-search-shift-y) - (var(--entry-search-input-h) / 2));
  right: 100%;
  width: 12px;
  height: calc(var(--entry-search-input-h) + var(--entry-search-feedback-gap) + var(--entry-search-feedback-h));
  pointer-events: none;
}

.entry-search.is-open .entry-search-bridge {
  pointer-events: auto;
}

.entry-search.is-open .entry-search-panel {
  visibility: visible;
  transform: translate(0, 0);
  pointer-events: auto;
  transition-delay: 0s;
}

.entry-search-panel input {
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--content-bg);
  color: var(--text);
  font-size: var(--text-sm);
  line-height: 1.3;
  padding: 4px 6px;
  outline: none;
}

.entry-search-panel input::placeholder {
  color: var(--faint);
}

.entry-search-panel input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.entry-search-feedback {
  margin: 0;
  min-height: var(--entry-search-feedback-h);
  font-size: var(--text-xs);
  line-height: 1.45;
  font-family: var(--font-copy);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entry-search-feedback[hidden] {
  display: block;
  visibility: hidden;
}

[data-entry-item][hidden],
[data-entry-section][hidden] {
  display: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--muted);
  background: var(--surface-soft);
  position: relative;
  top: 1px;
}

/* 归档页统计行：从标题行挪出来，排在热力图上方 */
.page-subtitle--archive-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--text-sm);
}

.archive-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.archive-stat__icon {
  flex: none;
  color: var(--faint);
}

/* 归档页目录：分类 + 标签 */
.archive-directory {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 26px;
}

.archive-directory__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
}

.archive-directory__title {
  margin: 0;
  font-size: var(--text-xs);
  font-family: var(--font-copy);
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--muted);
}

.archive-directory__meta {
  font-size: var(--text-xs);
  color: var(--faint);
  font-family: var(--font-copy);
  font-variant-numeric: tabular-nums;
}

.archive-cards {
  display: block;
}

.archive-cards--cat {
  gap: 0;
}

/* 标签云：行内顺排，计数做成小上标，不画线 */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 24px;
  padding: 2px 0 4px;
}

.tag-cloud__item {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.tag-cloud__item:hover {
  color: var(--accent);
}

.tag-cloud__name {
  font-size: var(--text-sm);
  font-family: var(--font-readable);
}

.tag-cloud__count {
  font-size: var(--text-2xs);
  color: var(--faint);
  font-family: var(--font-copy);
  font-variant-numeric: tabular-nums;
}

.tag-cloud__item.is-active,
.tag-cloud__item.is-active .tag-cloud__count {
  color: var(--accent);
}

/* 分类卡里名称与篇数之间的实线引线 */
.archive-card__leader {
  flex: 1 1 auto;
  min-width: 12px;
  align-self: baseline;
  height: 0;
  border-bottom: 1px solid var(--ledger-rule);
}

.archive-card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  text-decoration: none;
  font-size: var(--text-md);
  transition: color 0.2s ease;
}

.archive-card:hover {
  color: var(--accent);
}

.archive-card__name {
  font-size: 15px;
  font-family: var(--font-readable);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-card__count {
  font-size: var(--text-xs);
  color: var(--faint);
  font-family: var(--font-copy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.archive-contrib {
  margin-top: 24px;
}

/* 归档页年份手风琴 */
.archive-year {
  margin-top: 22px;
  border-top: 1px solid var(--ledger-rule);
}

.archive-year[hidden] {
  display: none;
}

.archive-year__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 10px 0;
  font-size: var(--text-md);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
}

.archive-year__summary::-webkit-details-marker {
  display: none;
}

.archive-year__summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.archive-year[open] .archive-year__summary {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ledger-rule);
}

.archive-year__count {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--faint);
  font-family: var(--font-copy);
  font-variant-numeric: tabular-nums;
}

.archive-year__toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  transition: transform 0.2s ease;
}

.archive-year__toggle .icon {
  display: block;
  width: 18px;
  height: 18px;
}

.archive-year[open] .archive-year__toggle {
  transform: rotate(180deg);
}

.archive-list {
  display: flex;
  flex-direction: column;
  padding: 2px 0 8px;
}

.archive-row {
  display: grid;
  grid-template-columns: var(--ledger-rail) minmax(0, 1fr) auto;
  column-gap: var(--ledger-gap);
  align-items: baseline;
  font-size: var(--text-md);
  padding: 9px 0;
  border-bottom: 1px solid var(--ledger-rule);
}

.archive-row:last-child {
  border-bottom: 0;
}

.archive-title a {
  transition: color 0.2s ease;
}

.archive-title a:hover,
.archive-title a:focus-visible {
  color: var(--accent);
}

.archive-title {
  grid-column: 2;
  grid-row: 1;
}

.archive-meta {
  display: contents;
}

.archive-date {
  grid-column: 1;
  grid-row: 1;
  padding-right: 12px;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.archive-tag {
  grid-column: 3;
  grid-row: 1;
  color: var(--faint);
  font-size: var(--text-sm);
  font-family: var(--font-copy);
}

.archive-date-full {
  display: none;
}

@media (max-width: 900px) {
  .entry-search.is-open .entry-search-panel {
    width: min(196px, 54vw);
  }

  .archive-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .archive-title {
    grid-column: auto;
  }

  .archive-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--faint);
    font-size: var(--text-xs);
  }

  .archive-date {
    grid-column: auto;
  }

  .archive-date-md {
    display: none;
  }

  .archive-date-full {
    display: inline;
  }

  .archive-tag {
    grid-column: auto;
    font-size: var(--text-xs);
  }

  .archive-tag::before {
    content: " - ";
    color: var(--faint);
  }
}

.meta-line {
  margin-top: 10px;
  margin-bottom: 12px;
  font-size: var(--text-sm);
  color: var(--muted);
}

.meta-line--items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.meta-line__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.meta-line__icon {
  flex: none;
  color: var(--faint);
}

/* 文章页头部：章节题居中，元信息收进上下两条细线之间 */
.article-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  padding: 6px 0 26px;
  border-bottom: 1px solid var(--ledger-rule);
  text-align: center;
}

.article-header .page-title {
  max-width: 22em;
  margin: 0;
  font-size: 32px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.article-header .meta-line {
  order: -1;
  justify-content: center;
  gap: 22px;
  width: min(100%, 30em);
  margin: 0;
  padding: 8px 0;
  border-top: 1px solid var(--ledger-rule);
  border-bottom: 1px solid var(--ledger-rule);
  font-family: var(--font-readable);
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  color: var(--muted);
}

.article-header .meta-line__item {
  display: inline-flex;
  align-items: baseline;
}

.article-header .meta-line__icon {
  display: none;
}

@media (max-width: 640px) {
  .article-header {
    gap: 12px;
    padding: 4px 0 18px;
  }

  .article-header .page-title {
    font-size: 24px;
    line-height: 1.45;
  }

  .article-header .meta-line {
    width: 100%;
    gap: 6px 12px;
    flex-wrap: wrap;
    letter-spacing: .08em;
  }
}

/* AI 摘要 */
.ai-summary {
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
}

.ai-summary__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--accent);
  font-family: var(--font-readable);
  font-size: var(--text-2xs);
  letter-spacing: 0.14em;
}

.ai-summary__icon {
  flex: none;
}

.ai-summary__text {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-copy);
  font-size: var(--text-sm);
  line-height: 1.8;
}

@media (max-width: 640px) {
  .ai-summary {
    margin-bottom: 18px;
    padding: 12px 13px;
  }
}

/* 文章页底部：版权声明 + 标签 */
.article-notice {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
  padding: 0 0 6px;
  overflow: hidden;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font-copy);
  font-size: var(--text-xs);
  line-height: 1.9;
}

.article-notice__lines {
  min-width: 0;
}

.article-notice__title {
  margin: 0;
  color: var(--text);
}

.article-notice__line {
  margin: 0;
  overflow-wrap: anywhere;
}

.article-notice a {
  color: var(--accent);
}

.article-notice__mark {
  flex: 0 0 auto;
  margin-left: auto;
  color: color-mix(in srgb, var(--text) 12%, transparent);
  line-height: 0;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1em;
  margin: 0 0 0 auto;
  font-family: var(--font-copy);
  font-size: var(--text-sm);
}

.article-tags .tag {
  color: var(--accent);
}

.article-tags .tag:hover,
.article-tags .tag:focus-visible {
  color: var(--text);
}

@media (max-width: 640px) {
  .article-notice__mark {
    display: none;
  }

  .article-tail__row .article-tags {
    margin-left: 0;
  }
}

/* Pagination */
.pagination {
  margin-top: 22px;
}

.pagination__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  letter-spacing: 0.08em;
}

.pagination__link {
  color: var(--text);
  font-family: var(--font-copy);
  font-size: var(--text-xs);
  line-height: 1.6;
  border-bottom: 1px solid currentColor;
  transition: color 0.2s ease;
}

.pagination__link:hover {
  color: var(--accent);
}

.pagination__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-bottom-color: currentColor;
}

.pagination__link.is-disabled {
  color: var(--faint);
  border-bottom-color: transparent;
  cursor: default;
}

.pagination__counter {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

@media (max-width: 640px) {
  .meta-line__item--desktop-meta {
    display: none;
  }

  .entry-search-panel {
    width: min(156px, 58vw);
  }

  .entry-search-panel input {
    font-size: var(--text-md);
  }
}

/* ===== 标签入口 ===== */
/* 归档页标签入口、当前筛选状态与标签选择器。 */

/* 标题行摊平：竖排标题与筛选标记各自落到页头网格的对应格子里 */
.page-title-row {
  display: contents;
}

.page-header .entry-tag-current__pill {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
}

.page-header .entry-tag-current__clear {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
}

.entry-tag-current__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  color: var(--text);
  font-size: var(--text-xs);
  line-height: 1;
}

.entry-tag-current__pill--inline {
  min-height: 1.4em;
  color: var(--muted);
}

/* 标题行里跟在当前标签后面的「清除筛选」 */
.entry-tag-current__clear {
  color: var(--muted);
  font-family: var(--font-copy);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.entry-tag-current__clear:hover,
.entry-tag-current__clear:focus-visible {
  color: var(--text);
}

.entry-tag-current__icon {
  color: var(--muted);
  flex: none;
}

.entry-tag-current__label {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  font-family: var(--font-copy);
}

@media (max-width: 640px) {
  .entry-tag-current__pill {
    gap: 5px;
  }

  .entry-tag-current__label {
    font-size: var(--text-base);
  }
}

/* ===== 首页 ===== */
/* 首页私有规则。 */

.hero-slider {
  position: relative;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.hero-slider__viewport {
  position: relative;
  width: 100%;
  height: 260px;
}

.hero-slider__slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.hero-slider__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.hero-slider__slide img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.hero-slider__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 30px 14px 12px;
  padding-right: calc(14px + var(--lcxyz-dots-space, 0px));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  color: #fff;
}

.hero-slider__title {
  font-size: 15px;
  line-height: 1.4;
  color: #fff;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hero-slider__meta {
  font-size: var(--text-xs);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.hero-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--content-bg);
  color: var(--text);
  opacity: 0.85;
  cursor: pointer;
}

.hero-slider__nav--prev {
  left: 10px;
}

.hero-slider__nav--next {
  right: 10px;
}

.hero-slider__nav:hover {
  opacity: 1;
}

.hero-slider__dots {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-slider__dot {
  width: 14px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.hero-slider__dot.is-active {
  background: #fff;
}

/* 首页贡献热力图：色阶由主色推导，换皮肤时自动跟上 */
.home-contrib {
  --lcxyz-contrib-cell: 9px;
  --lcxyz-contrib-gap: 2px;
  --lcxyz-contrib-pitch: calc(var(--lcxyz-contrib-cell) + var(--lcxyz-contrib-gap));
  --lcxyz-contrib-l0: var(--u-sunken);
  --lcxyz-contrib-l1: color-mix(in srgb, var(--u-accent) 46%, var(--u-page));
  --lcxyz-contrib-l2: color-mix(in srgb, var(--u-accent) 64%, var(--u-page));
  --lcxyz-contrib-l3: color-mix(in srgb, var(--u-accent) 82%, var(--u-page));
  --lcxyz-contrib-l4: color-mix(in srgb, var(--u-accent) 100%, var(--u-page));
  --lcxyz-contrib-memos: color-mix(in srgb, var(--u-accent) 52%, var(--u-page));
  --lcxyz-contrib-posts: var(--u-accent);
  --lcxyz-contrib-label-bg: var(--u-card);
  --lcxyz-contrib-label-text: var(--faint);
  margin-top: 22px;
}

/* 浅色的强调色比卡面深，低档位要抬高才分得出来；深色沿用原来的四档 */
:root[data-theme="dark"] .home-contrib {
  --lcxyz-contrib-l1: color-mix(in srgb, var(--u-accent) 24%, var(--u-page));
  --lcxyz-contrib-l2: color-mix(in srgb, var(--u-accent) 46%, var(--u-page));
  --lcxyz-contrib-l3: color-mix(in srgb, var(--u-accent) 68%, var(--u-page));
  --lcxyz-contrib-l4: color-mix(in srgb, var(--u-accent) 92%, var(--u-page));
}

.home-contrib__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.home-contrib__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
}

.home-contrib__months {
  position: relative;
  width: calc(var(--lcxyz-contrib-weeks) * var(--lcxyz-contrib-pitch) - var(--lcxyz-contrib-gap));
  height: 14px;
  margin-left: 20px;
}

.home-contrib__month {
  position: absolute;
  top: 0;
  left: calc(var(--lcxyz-contrib-col) * var(--lcxyz-contrib-pitch));
  font-size: 10px;
  line-height: 1.2;
  color: var(--lcxyz-contrib-label-text);
  font-family: var(--font-copy);
  white-space: nowrap;
}

.home-contrib__body {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.home-contrib__weekdays {
  display: grid;
  grid-template-rows: repeat(7, var(--lcxyz-contrib-cell));
  gap: var(--lcxyz-contrib-gap);
  width: 14px;
  flex: none;
}

.home-contrib__weekday {
  display: block;
  width: 14px;
  height: var(--lcxyz-contrib-cell);
  border-radius: 2px;
  background: var(--lcxyz-contrib-label-bg);
  color: var(--lcxyz-contrib-label-text);
  font-size: 9px;
  line-height: var(--lcxyz-contrib-cell);
  text-align: center;
  font-family: var(--font-copy);
}

.home-contrib__grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, var(--lcxyz-contrib-cell));
  grid-auto-columns: var(--lcxyz-contrib-cell);
  gap: var(--lcxyz-contrib-gap);
}

.home-contrib__cell {
  display: block;
  width: var(--lcxyz-contrib-cell);
  height: var(--lcxyz-contrib-cell);
  border-radius: 2px;
  background: var(--lcxyz-contrib-l0);
}

.home-contrib__cell[data-level="1"] {
  background: var(--lcxyz-contrib-l1);
}

.home-contrib__cell[data-level="2"] {
  background: var(--lcxyz-contrib-l2);
}

.home-contrib__cell[data-level="3"] {
  background: var(--lcxyz-contrib-l3);
}

.home-contrib__cell[data-level="4"] {
  background: var(--lcxyz-contrib-l4);
}

.home-contrib:has(.home-contrib__toggle--memos:checked) .home-contrib__cell,
.home-contrib:has(.home-contrib__toggle--posts:checked) .home-contrib__cell {
  background: var(--lcxyz-contrib-l0);
}

.home-contrib:has(.home-contrib__toggle--posts:checked) .home-contrib__cell[data-posts="1"] {
  background: var(--lcxyz-contrib-posts);
}

.home-contrib:has(.home-contrib__toggle--memos:checked) .home-contrib__cell[data-memos="1"] {
  background: var(--lcxyz-contrib-memos);
}

.home-contrib__legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
  font-size: var(--text-2xs);
  line-height: 1;
  color: var(--lcxyz-contrib-label-text);
  font-family: var(--font-copy);
}

.home-contrib__legend-text {
  margin-right: 2px;
}

.home-contrib__swatch {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--lcxyz-contrib-l0);
}

.home-contrib__swatch[data-level="1"] {
  background: var(--lcxyz-contrib-l1);
}

.home-contrib__swatch[data-level="2"] {
  background: var(--lcxyz-contrib-l2);
}

.home-contrib__swatch[data-level="3"] {
  background: var(--lcxyz-contrib-l3);
}

.home-contrib__swatch[data-level="4"] {
  background: var(--lcxyz-contrib-l4);
}

.home-contrib__swatch--memos {
  background: var(--lcxyz-contrib-memos);
}

.home-contrib__swatch--posts {
  background: var(--lcxyz-contrib-posts);
}

.home-contrib__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 12px;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
}

.home-contrib__toggle--memos:checked ~ .home-contrib__legend .home-contrib__chip--memos,
.home-contrib__toggle--posts:checked ~ .home-contrib__legend .home-contrib__chip--posts {
  color: var(--text);
}

.home-contrib__toggle--memos:focus-visible ~ .home-contrib__legend .home-contrib__chip--memos,
.home-contrib__toggle--posts:focus-visible ~ .home-contrib__legend .home-contrib__chip--posts {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .home-contrib__cell:hover {
    outline: 1px solid color-mix(in srgb, var(--text) 35%, transparent);
    outline-offset: 0;
  }
}

/* 首页索引列表 */
.home-index {
  margin-top: 22px;
}

.home-index--archive {
  margin-top: 0;
}

.home-index__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ledger-rule);
}

.home-index__title {
  margin: 0;
  font-size: var(--text-xs);
  font-family: var(--font-copy);
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--muted);
}

.home-index__meta {
  font-size: var(--text-sm);
  color: var(--faint);
  font-family: var(--font-copy);
  font-variant-numeric: tabular-nums;
}

/* 账本竖栏：一条通栏线切出左侧日期位 */
.home-index__list,
.comment-list {
  background-image: linear-gradient(var(--ledger-rule), var(--ledger-rule));
  background-repeat: no-repeat;
  background-size: 1px 100%;
  background-position: var(--ledger-rail) 0;
}

/* 归档列表的竖栏只在放得下它的宽屏画：窄屏的归档行是单栏顺排，竖栏会落在空白处成一条悬空的线。
   这里用 min-width 直接限死，不再靠「移除规则写在竖栏定义之后」——同优先级下那种写法一旦被重排就会重新画出来。 */
@media (min-width: 901px) {
  .archive-list {
    background-image: linear-gradient(var(--ledger-rule), var(--ledger-rule));
    background-repeat: no-repeat;
    background-size: 1px 100%;
    background-position: var(--ledger-rail) 0;
  }
}

.home-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-index__item {
  border-bottom: 1px solid var(--ledger-rule);
}

.home-index__link {
  display: block;
  padding: 14px 0 13px;
  color: inherit;
  text-decoration: none;
}

.home-index__main {
  display: grid;
  grid-template-columns: var(--ledger-rail) minmax(0, 1fr);
  column-gap: var(--ledger-gap);
  align-items: start;
}

.home-index__heading {
  grid-column: 2;
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.5;
  font-family: var(--font-readable);
}

.home-index__title-text {
  transition: color 0.2s ease;
}

.home-index__cate {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--faint);
  font-family: var(--font-copy);
  white-space: nowrap;
}

.home-index__excerpt {
  grid-column: 2;
  margin: 3px 0 0;
  color: var(--muted);
  font-size: var(--text-base);
  line-height: 1.7;
  font-family: var(--font-copy);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}

.home-index__foot {
  grid-column: 1;
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0;
  padding-right: 12px;
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--faint);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.home-index__stats {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0;
  min-width: 0;
}

.home-index__stat {
  display: inline-flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}

.home-index__stat + .home-index__stat::before {
  display: none;
}

.home-index__link:hover .home-index__title-text,
.home-index__link:focus-visible .home-index__title-text {
  color: var(--accent);
}

.home--no-hero .home-index {
  margin-top: 8px;
}

@media (max-width: 900px) {
  .home-index {
    margin-top: 18px;
  }

  .home--no-hero .home-index {
    margin-top: 4px;
  }

  .home--no-hero .content {
    padding-top: calc(16px + env(safe-area-inset-top));
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .home--no-hero .content {
    padding-top: calc(18px + env(safe-area-inset-top));
  }
}

@media (max-width: 640px) {
  .home-index {
    margin-top: 16px;
  }

  .home--no-hero .home-index {
    margin-top: 2px;
  }

  .home-index__link {
    padding: 15px 0;
  }

  /* 窄屏放不下账本竖栏，改成单栏顺排 */
  .home-index__list {
    background-image: none;
  }

  .home-index__main {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
  }

  .home-index__heading,
  .home-index__excerpt,
  .home-index__foot {
    grid-column: 1;
  }

  .home-index__foot {
    grid-row: auto;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding-right: 0;
  }

  .home-index__heading {
    font-size: 17px;
  }

  .home-index__excerpt {
    font-size: var(--text-base);
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .home-index__cate {
    display: block;
    margin-left: 0;
    margin-top: 2px;
  }
}

@media (max-width: 640px) {
  .hero-slider__viewport {
    height: 150px;
  }

  .hero-slider__slide img {
    height: 150px;
  }

  .hero-slider__caption {
    padding-right: 14px;
  }

  .hero-slider__dots {
    top: 10px;
    bottom: auto;
  }

  .home--no-hero .content {
    padding-top: calc(16px + env(safe-area-inset-top));
  }

  .hero-slider {
    margin: 0 0 8px;
  }
}

/* ===== 关于页 ===== */
/* 关于页私有规则。 */

.page-header.page-header--about .page-actions {
  gap: 6px;
  transform: none;
}

.page-header.page-header--about .icon-link .icon {
  width: 18px;
  height: 18px;
}

.about-body {
  margin: 30px 0 0;
  font-family: var(--font-copy);
  font-size: var(--text-md);
  line-height: 1.7;
}

.about-body > :first-child {
  margin-top: 0;
}

.about-body > :last-child {
  margin-bottom: 0;
}

.about-body p,
.about-body ul,
.about-body ol {
  margin: 12px 0;
}

.about-body .code-block pre {
  font-size: 15px;
}

.about-body .code-block pre code {
  font-size: 0.92em;
}

.about-body h2,
.about-body h3 {
  margin: 38px 0 10px;
  font-family: var(--font-readable);
}

.about-body h2 {
  font-size: var(--text-lg);
}

.about-body h3 {
  font-size: var(--text-md);
}

@media (max-width: 900px) {
  .friend-list {
    grid-template-columns: 1fr;
  }
}

/* ===== 文章页 ===== */
/* 正文页专用样式，文章页与小记页共用。 */

/* 文章页目录：≥1200px 收成贴在正文左侧的阅读轨道，窄屏退回右上角浮层面板 */
.toc-rail {
  --toc-mode: panel;
  color: var(--muted);
  font-family: var(--font-copy);
}

.toc-rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 7px;
  border-bottom: 1px dashed var(--border);
}

.toc-rail__title {
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  color: var(--muted);
}

.toc-rail__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--faint);
  cursor: pointer;
  transition: color 0.2s ease;
}

.toc-rail__close:hover,
.toc-rail__close:focus-visible {
  color: var(--text);
}

.toc-rail__close .icon {
  display: block;
  width: 14px;
  height: 14px;
}

.toc-rail__body {
  max-height: min(54vh, 430px);
  overflow-y: auto;
}

/* 轨道线与进度填充只在宽屏出现 */
.toc-rail__line,
.toc-rail__fill {
  display: none;
}

.toc-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--border);
}

.toc-rail__item {
  margin-left: -1px;
  border-left: 2px solid transparent;
}

.toc-rail__item--end {
  display: none;
}

.toc-rail__link {
  display: block;
  padding: 7px 14px 7px 12px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
  border-bottom: 0;
  transition: color 0.2s ease;
}

.toc-rail__item--h3 .toc-rail__link {
  padding-left: 24px;
  font-size: var(--text-xs);
}

.toc-rail__item--h4 .toc-rail__link {
  padding-left: 36px;
  font-size: var(--text-xs);
}

.toc-rail__link:hover,
.toc-rail__link:focus-visible {
  color: var(--text);
}

.toc-rail__item.is-active {
  border-left-color: var(--accent);
}

.toc-rail__item.is-active .toc-rail__link {
  color: var(--accent);
  font-weight: 600;
}

.toc-toggle[aria-expanded="true"] {
  color: var(--accent);
}

@keyframes toc-rail-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1199px) {
  .toc-rail {
    position: fixed;
    top: 88px;
    right: 24px;
    z-index: 50;
    width: 264px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--content-bg);
    box-shadow: 0 14px 34px rgba(41, 37, 36, 0.16);
    overflow: hidden;
    animation: toc-rail-in 0.18s ease;
  }

  :root[data-theme="dark"] .toc-rail {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  }

  .toc-rail:not([data-open="true"]) {
    display: none;
  }

  .toc-rail__head {
    padding: 12px 10px 10px 16px;
    border-bottom: 0;
  }

  .toc-rail__close {
    width: 26px;
    height: 26px;
  }

  .toc-rail__close .icon {
    width: 16px;
    height: 16px;
  }

  .toc-rail__body {
    padding: 0 0 6px;
  }
}

@media (max-width: 640px) {
  .toc-rail {
    top: 64px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

@media (min-width: 1200px) {
  /* 轨道落在侧栏与正文卡片之间那道空隙的正中 */
  .toc-rail {
    --toc-mode: track;
    position: fixed;
    top: 50%;
    left: calc(50% - var(--layout-shell-max-inline-size) / 2 + 30px + var(--sidebar) + 13px);
    z-index: 24;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 18px;
    transform: translateY(-50%);
  }

  .toc-rail[data-open="false"] {
    display: none;
  }

  .toc-rail__head {
    display: none;
  }

  .toc-rail__body {
    position: relative;
    width: 18px;
    height: min(46vh, 340px);
    max-height: none;
    padding: 0;
    overflow: visible;
  }

  .toc-rail__line,
  .toc-rail__fill {
    display: block;
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 8px;
    width: 1px;
    border-radius: 2px;
  }

  .toc-rail__line {
    background: var(--border);
  }

  .toc-rail__fill {
    height: auto;
    background: var(--accent);
    transform: scaleY(var(--toc-progress, 0));
    transform-origin: top center;
  }

  .toc-rail__list {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    border-left: 0;
    overflow: visible;
  }

  .toc-rail__item {
    position: relative;
    display: flex;
    min-height: 8px;
    align-items: center;
    margin-left: 0;
    border-left: 0;
  }

  .toc-rail__item--end {
    display: flex;
  }

  .toc-rail__link {
    position: relative;
    left: 9px;
    width: 7px;
    height: 7px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--content-bg);
    transform: translateX(-50%);
    transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  }

  /* 圆点只有几像素，靠这层透明热区把手感撑到 30px */
  .toc-rail__link::before {
    content: "";
    position: absolute;
    inset: -11px -15px;
  }

  .toc-rail__item--h3 .toc-rail__link,
  .toc-rail__item--h4 .toc-rail__link {
    width: 5px;
    height: 5px;
    padding-left: 0;
  }

  .toc-rail__item.is-passed .toc-rail__link {
    width: 9px;
    height: 9px;
    border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
    background: color-mix(in srgb, var(--accent) 55%, var(--content-bg));
  }

  .toc-rail__item.is-active .toc-rail__link,
  .toc-rail__item--end.is-reached .toc-rail__link {
    width: 13px;
    height: 13px;
    border-color: var(--accent);
    background: var(--accent);
  }

  .toc-rail__link:hover,
  .toc-rail__link:focus-visible {
    width: 11px;
    height: 11px;
    border-color: var(--accent);
    background: var(--accent);
  }

  .toc-rail__label {
    position: absolute;
    top: 50%;
    left: calc(50% + 14px);
    width: max-content;
    max-width: 230px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--content-bg);
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(5px, -50%);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  }

  .toc-rail__item:hover .toc-rail__label,
  .toc-rail__item:focus-within .toc-rail__label {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
  }

  /* 轨道一直在，宽屏不再需要侧栏工具栏里的「文章目录」按钮 */
  .toc-toggle {
    display: none;
  }
}

@media print {

  .sidebar,
  .skip-link,
  .toc-rail,
  .float-action,
  .site-footer,
  .prev-next,
  .comments {
    display: none !important;
  }

  html,
  body {
    background: #fff;
  }

  .shell {
    display: block;
  }

  .content {
    padding: 0;
    min-height: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ===== 正文排版 ===== */
/* Markdown 渲染结果的排版规则。 */
.prose {
  font-family: var(--font-reading);
  font-size: var(--text-md);
  letter-spacing: .015em;
  line-height: 1.7;
  color: var(--text);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 正文栏：定宽成阅读轨道，首字下沉起头 */
.article .prose {
  max-width: 40em;
  margin-inline: auto;
  padding-top: 22px;
  font-size: 17px;
}

/* 正文常以封面图开头，首字下沉要落到第一段真正的文字上 */
.article .prose > p:not(:has(img)):first-of-type::first-letter,
.article .prose > p:has(img):first-of-type + p:not(:has(img))::first-letter {
  float: left;
  padding: 0.06em 0.12em 0 0;
  color: var(--accent);
  font-family: var(--font-readable);
  font-size: 3.1em;
  line-height: 0.92;
}

.prose > :first-child {
  margin-top: 0;
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose img {
  max-width: 75%;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .prose img {
    max-width: 92%;
  }
}

@media (max-width: 640px) {
  .prose img {
    max-width: 100%;
  }
}

.prose h1 {
  font-size: var(--text-2xl);
  margin: 0 0 14px;
}

.prose h2 {
  font-size: var(--text-xl);
  margin: 40px 0 14px;
}

.prose h3 {
  font-size: var(--text-lg);
  margin: 30px 0 10px;
}

.prose h4,
.prose h5,
.prose h6 {
  font-size: var(--text-md);
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  font-family: var(--font-readable);
}

.prose h1,
.prose h2,
.prose h3 {
  letter-spacing: 0.01em;
}

.prose p {
  margin: 14px 0;
}

.prose blockquote {
  margin: 1.2rem 0;
  padding: 0.75rem var(--quote-pad);

  & p {
    margin: 0;
  }

  background-color: var(--code-content-bg);
  border-left: 3px solid var(--border);
  color: var(--muted);
  font-size: 0.95em;

}

@media (max-width: 900px) {
  .prose blockquote {
    padding: 0.65rem var(--quote-pad);
  }
}

.prose code {
  font-size: 0.9em;
  background: var(--code-content-bg);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--code-border);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.prose pre {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--code-content-bg);
  max-width: 100%;
}

.prose pre code {
  font-size: 0.92em;
  background: transparent;
  padding: 0;
  border: none;
}

.prose ul,
.prose ol {
  padding-left: 22px;
}

.prose li {
  margin: 6px 0;
}

.prose a {
  border-bottom-color: currentColor;
}

.prose table {
  display: table;
  width: 100%;
  margin: 1.35rem 0;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--code-content-bg);
  table-layout: auto;
}

.prose thead th {
  font-weight: 600;
  color: var(--text);
  background: var(--panel);
  white-space: nowrap;
}

/* 宽表格在容器内横向滑动，避免整页被撑出横向滚动 */
.prose .table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  display: flex;
}

/* 右边一条渐变，提示表格还能往右滑；滑到头就没有了 */
.prose .table-scroll::after {
  content: "";
  position: sticky;
  right: 0;
  flex: 0 0 44px;
  width: 44px;
  margin-left: -44px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    to left,
    var(--content-bg),
    rgb(from var(--content-bg) r g b / 0)
  );
}

.prose th,
.prose td {
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  text-align: left;
  line-height: 1.65;
  /* anywhere 会把单元格的最小宽压到一个字符，列因此被挤成竖条 */
  overflow-wrap: break-word;
}

.prose th code,
.prose td code {
  /* 格子里换行时，带边框的小方块会被切成几截；表格里只留等宽字 */
  padding: 0;
  border: 0;
  background: transparent;
}

.prose th:not(:last-child),
.prose td:not(:last-child) {
  border-right: 1px solid var(--border);
}

.prose tbody tr:last-child td {
  border-bottom: 0;
}

.prose th[align='center'],
.prose td[align='center'] {
  text-align: center;
}

.prose th[align='right'],
.prose td[align='right'] {
  text-align: right;
}

@supports (background: color-mix(in oklab, black, white)) {
  .prose table {
    box-shadow: 0 1px 2px color-mix(in oklab, var(--border) 82%, transparent);
  }

  .prose thead th {
    background: color-mix(in oklab, var(--panel) 78%, var(--code-content-bg));
  }

  .prose tbody tr:nth-child(even) td {
    background: color-mix(in oklab, var(--panel) 32%, var(--code-content-bg));
  }
}

@media (max-width: 640px) {
  .prose th,
  .prose td {
    padding: 0.6rem 0.8rem;
  }
}

/* ===== 插图 ===== */
.prose figure {
  --figure-media-max-width: 100%;
  --figure-media-margin-left: auto;
  --figure-media-margin-right: auto;
  --figure-caption-max-width: min(100%, 32rem);
  --figure-caption-text-align: center;

  margin: 18px 0;
}

.prose figure > :is(img, picture) {
  display: block;
  max-width: min(100%, var(--figure-media-max-width));
  height: auto;
  margin-left: var(--figure-media-margin-left);
  margin-right: var(--figure-media-margin-right);
}

.prose figure > picture > img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .prose figure {
    --figure-media-margin-left: auto;
    --figure-media-margin-right: auto;
    --figure-caption-text-align: center;
  }

  .prose figure > :is(img, picture) {
    max-width: min(92%, var(--figure-media-max-width));
  }

  .prose figure > picture > img {
    max-width: 100%;
  }
}

.prose figure > figcaption {
  margin-top: 6px;
  text-align: var(--figure-caption-text-align);
  font-size: 0.9em;
  max-width: var(--figure-caption-max-width);
  margin-left: var(--figure-media-margin-left);
  margin-right: var(--figure-media-margin-right);
  font-family: var(--font-copy);
  color: var(--muted);
}

@media (max-width: 900px) {
  .prose figure > figcaption {
    font-size: 0.85em;
  }
}

/* ===== 灯箱 ===== */
.lightbox {
  display: none;
  width: 100vw;
  height: 100vh;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--lightbox-text);
  padding: 0;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  --lb-backdrop: var(--overlay-85);
  overflow: hidden;
}

.lightbox[open] {
  display: flex;
}

.lightbox::backdrop {
  background: var(--lb-backdrop);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lightbox::backdrop {
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));
  }
}

.lightbox-close {
  position: fixed;
  top: 28px;
  right: 28px;
  border: 1px solid var(--lightbox-border);
  background: var(--overlay-35);
  color: var(--lightbox-text);
  border-radius: var(--radius-md);
  width: 36px;
  height: 36px;
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.lightbox-close:focus-visible,
.lightbox-nav:focus-visible {
  outline: 2px solid var(--lightbox-text);
  outline-offset: 2px;
}

.lightbox-navs {
  position: fixed;
  top: 50%;
  left: 24px;
  right: 24px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  padding: 0;
  background: transparent;
  z-index: 2;
}

.lightbox-nav {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  border: 1px solid var(--lightbox-border);
  background: var(--overlay-45);
  color: var(--lightbox-text);
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.15s ease, transform 0.15s ease;
}

.lightbox-nav[disabled] {
  opacity: 0.2;
  cursor: default;
}

.lightbox-nav[disabled]:hover,
.lightbox-nav[disabled]:focus-visible {
  background: var(--overlay-45);
}

.lightbox-nav:hover:not([disabled]),
.lightbox-nav:focus-visible:not([disabled]) {
  background: var(--overlay-60);
  transform: scale(1.04);
}

.lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.lightbox-figure img {
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 0;
  border: 0;
  background: transparent;
}

.lightbox[data-enable-zoom="true"] [data-lightbox-image] {
  touch-action: none;
}

.lightbox[data-enable-zoom="false"] [data-lightbox-image] {
  touch-action: pan-y;
}

.lightbox-meta {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  color: var(--lightbox-text);
  text-align: center;
  display: grid;
  gap: 6px;
  justify-items: center;
  font-family: var(--font-copy);
}

.lightbox-caption {
  max-width: min(72vw, 720px);
  color: var(--lightbox-text);
  letter-spacing: 0.02em;
}

.lightbox-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.lightbox-dots {
  display: none;
  gap: 6px;
  align-items: center;
}

.lightbox-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--lightbox-dot-muted);
}

.lightbox-dot.is-active {
  background: var(--lightbox-text);
}

.prose img[data-lightbox] {
  cursor: zoom-in;
  transition: opacity 0.18s ease;
}

.prose [data-lightbox-trigger="true"] {
  cursor: zoom-in;
}

.prose a[data-lightbox-trigger="true"] {
  display: inline-block;
}

.prose img[data-lightbox]:hover {
  opacity: 0.92;
}

.prose [data-lightbox-trigger="true"]:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
}

.prose [data-lightbox-trigger="true"]:focus-visible img {
  opacity: 0.92;
}

@media (max-width: 640px) {
  .lightbox::backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .lightbox[data-mobile-nav="hidden"] .lightbox-navs {
    display: none;
  }

  .lightbox[data-mobile-nav="bottom"] .lightbox-navs {
    top: auto;
    left: 0;
    right: 0;
    bottom: 64px;
    transform: none;
    justify-content: center;
    gap: 16px;
  }

  .lightbox[data-mobile-nav="bottom"] .lightbox-nav {
    width: 38px;
    height: 38px;
  }

  .lightbox {
    width: 100vw;
    height: 100vh;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    --lb-backdrop: var(--overlay-85);
  }

  .lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--overlay-35);
    border-color: var(--lightbox-border);
    color: var(--lightbox-text);
  }

  .lightbox-figure {
    margin: 0;
    height: 100%;
    align-items: center;
    justify-content: center;
  }

  .lightbox-figure img {
    width: 100vw;
    height: auto;
    max-height: 100vh;
    object-fit: contain;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .lightbox-meta {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    color: var(--lightbox-text);
    justify-items: center;
  }

  .lightbox[data-mobile-count="hidden"] .lightbox-count {
    display: none;
  }

  .lightbox[data-mobile-count="hidden"] .lightbox-dots {
    display: inline-flex;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .lightbox {
    --lb-backdrop: var(--overlay-90);
  }

  .lightbox::backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ===== 代码块 ===== */
/* ===============================
   代码块
   - 结构由 functions.php 的 lcxyz_code_block_html() 生成：
     <pre class="lcxyz-code"><code><span class="line">…</span></code></pre>
   - 覆盖行内背景，深色模式兜底文字色
================================ */

/* 覆盖正文代码块的行内背景 */
.prose pre.lcxyz-code {
  background-color: var(--code-content-bg) !important;
}

/* 可选：移除 token 背景，避免条纹感 */
.prose pre.lcxyz-code span {
  background-color: transparent !important;
}

/* 暗色模式兜底：纯文本代码块可能无 token span，需强制基础文字色 */
:root[data-theme="dark"] .prose pre.lcxyz-code {
  color: var(--text) !important;
}

/* 代码块容器 */
.prose .code-block {
  position: relative;
  margin: 1.5em 0;
  border: 1px solid var(--code-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--code-content-bg);
}

.prose .code-block pre {
  margin: 0;
  border: none;
  border-radius: 0;
  background: var(--code-content-bg);
}

/* 行号（仅正文 .prose，默认开启，可通过 body[data-code-line-numbers="off"] 关闭） */
.prose pre.lcxyz-code {
  counter-reset: line;
  --ln-width: 2.5ch;
  --ln-gap: 3ch;
  --code-pad-x: 16px;
}

.prose pre.lcxyz-code:has(.line) {
  padding-left: 0;
}

.prose pre.lcxyz-code .line {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  position: relative;
  padding-left: var(--code-pad-x);
}

.prose pre.lcxyz-code .line::before {
  counter-increment: line;
  content: counter(line);
  position: static;
  display: inline-block;
  width: var(--ln-width);
  min-width: var(--ln-width);
  text-align: right;
  margin-right: var(--ln-gap);
  box-sizing: border-box;
  line-height: inherit;
  color: var(--muted);
  opacity: 0.7;
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  user-select: none;
  pointer-events: none;
}

body[data-code-line-numbers="off"] .prose pre.lcxyz-code .line::before {
  content: none;
}

body[data-code-line-numbers="off"] .prose pre.lcxyz-code .line {
  padding-left: 0;
}

@supports (color: color-mix(in oklab, black, white)) {
  .prose pre.lcxyz-code .line::before {
    color: color-mix(in oklab, var(--muted) 70%, var(--code-content-bg));
    opacity: 1;
  }
}

/* 代码块工具栏（仅正文 .prose，构建时注入） */
.prose .code-block .code-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 38px;
  background: var(--code-header-bg);
  border-bottom: 1px solid var(--code-border);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--muted);
}

.prose .code-block .code-lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--code-text);
}

.prose .code-block .code-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 代码块头是凹色底，弱化色在这上面只有 3.6:1，单独压深 */
.prose .code-block .code-info {
  color: color-mix(in srgb, var(--text) 78%, var(--bg));
}

.prose .code-block .code-separator {
  color: color-mix(in srgb, var(--text) 78%, var(--bg));
  user-select: none;
}

.prose .code-block .code-copy {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.prose .code-block .code-copy:disabled {
  cursor: default;
  opacity: 0.6;
}

.prose .code-block .code-copy:hover:not(:disabled) {
  color: var(--text);
  background: var(--code-action-hover-bg);
}

.prose .code-block .code-copy:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.prose .code-block .code-copy svg {
  width: 14px;
  height: 14px;
  display: block;
}

.prose .code-block .code-copy .icon-check {
  display: none;
}

.prose .code-block .code-copy[data-state="copied"] .icon-copy {
  display: none;
}

.prose .code-block .code-copy[data-state="copied"] .icon-check {
  display: block;
}

/* 语言图标基础样式 */
.prose .code-block .code-lang-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  display: inline-block;
  color: var(--muted);
  opacity: 0.8;
  transition: color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

/* hover 触发范围：仅 toolbar（避免滑过长代码块时频繁变色） */
.prose .code-block .code-toolbar:hover .code-lang-icon {
  color: var(--code-text);
  opacity: 1;
}

@media (max-width: 640px) {
  .prose .code-block .code-toolbar {
    height: auto;
    padding: 8px 12px;
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .prose .code-block .code-lang {
    font-size: var(--text-xs);
  }

  .prose .code-block .code-meta {
    margin-left: auto;
  }

  .prose .code-block .code-info,
  .prose .code-block .code-separator {
    display: none;
  }
}

/* ===== 说说页 ===== */
/* /memos/ 页面专用样式，避免泄漏到其他公开页。 */

/* ===== 说说组件 ===== */
/* 说说页相关样式。 */

/* Memos（说说） */

.memos-toolbar {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ledger-rule);
}

.memos-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding-right: env(safe-area-inset-right);
  --memos-control-h: 36px;
  --memos-year-filter-h: 34px;
}

.memos-year-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  min-height: var(--memos-year-filter-h);
  width: fit-content;
  max-width: 100%;
  flex: 0 0 auto;
  overflow: visible;
  isolation: isolate;
}

.memos-year-filter__cursor {
  position: absolute;
  top: 3px;
  left: 0;
  width: 0;
  height: calc(100% - 6px);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--code-content-bg) 92%, var(--panel));
  box-shadow:
    0 1px 1px rgba(17, 17, 17, 0.04),
    0 6px 18px rgba(17, 17, 17, 0.06);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
    width 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.24s ease;
}

.memos-year-filter[data-ready="true"] .memos-year-filter__cursor {
  opacity: 1;
}

.memos-year-filter__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-width: fit-content;
  height: calc(var(--memos-year-filter-h) - 6px);
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.24s ease,
    color 0.24s ease;
}

.memos-year-filter__item:hover,
.memos-year-filter__item:focus-visible {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.memos-year-filter__item.is-active {
  color: var(--text);
  font-weight: 600;
}

.memos-year-filter__item.is-active:hover,
.memos-year-filter__item.is-active:focus-visible {
  background: transparent;
}

.memos-year-filter__item--all.is-active {
  font-weight: 400;
}

.memos-year-filter__item[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.memos-year-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  z-index: 3;
}

.memos-year-filter__item--more {
  gap: 8px;
  padding-right: 12px;
}

.memos-year-filter__item--more.is-open,
.memos-year-filter__item--more.is-active {
  color: var(--text);
}

.memos-year-filter__caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.72;
  transition:
    transform 0.22s ease,
    opacity 0.22s ease;
}

.memos-year-more[data-open="true"] .memos-year-filter__caret {
  transform: rotate(180deg);
  opacity: 1;
}

.memos-year-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: max-content;
  min-width: 136px;
  max-width: min(180px, calc(100vw - 32px));
  padding: 6px;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--bg) 92%, var(--panel));
  box-shadow:
    0 18px 40px rgba(17, 17, 17, 0.12),
    0 2px 10px rgba(17, 17, 17, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.memos-year-menu[hidden] {
  display: none;
}

.memos-year-menu__list {
  display: grid;
  gap: 4px;
  max-height: min(280px, 48vh);
  overflow-y: auto;
}

.memos-year-menu__list::-webkit-scrollbar {
  width: 6px;
}

.memos-year-menu__list::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
  background: var(--scrollbar-thumb);
}

.memos-year-menu__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.memos-year-menu__item:hover,
.memos-year-menu__item:focus-visible,
.memos-year-menu__item.is-active {
  background: color-mix(in srgb, var(--text) 72%, var(--panel));
  color: var(--bg);
  outline: none;
}

.memos-year-menu__item.is-active {
  font-weight: 600;
}

.memos-year-menu__item:hover .memos-year-menu__item-count,
.memos-year-menu__item:focus-visible .memos-year-menu__item-count,
.memos-year-menu__item.is-active .memos-year-menu__item-count {
  color: color-mix(in srgb, var(--bg) 78%, transparent);
}

.memos-year-menu__item-label,
.memos-year-menu__item-count {
  white-space: nowrap;
}

.memos-year-menu__item-count {
  font-size: var(--text-2xs);
  color: var(--faint);
}

.memos-controls__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
}

.memos-controls__search-cluster {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: min(100%, 300px);
}

.memos-search {
  display: flex;
  align-items: center;
  flex: 1 1 208px;
  min-width: 180px;
  max-width: 336px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  height: var(--memos-control-h);
}

.memos-search:focus-within {
  outline: none;
  border-color: var(--border);
}

.memos-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 10px;
  border: 0;
  background: transparent;
  font-size: 15px;
  outline: none;
  line-height: 1;
}

.memos-search input::placeholder {
  font-size: var(--text-base);
  font-family: var(--font-copy);
  color: var(--muted);
  opacity: 1;
}

.memos-search-btn {
  flex: 0 0 auto;
  width: 42px;
  height: 100%;
  margin: 0;
  padding: 0;
  min-width: 42px;
  border-radius: 0 6px 6px 0;
  border: 0;
  border-left: 1px solid var(--border);
  background: var(--surface-card-strong);
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.memos-year-select-wrap {
  display: none;
  position: relative;
  flex: 0 0 auto;
  height: var(--memos-control-h);
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: var(--surface-card);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 1px 2px rgba(17, 17, 17, 0.04);
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
  overflow: hidden;
}

.memos-year-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 11px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--muted);
  pointer-events: none;
}

.memos-year-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  padding: 0 28px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.memos-year-select option {
  text-align: center;
}

.memos-year-select-wrap[data-empty="true"] .memos-year-select {
  color: var(--muted);
}

.memos-year-select-wrap[data-active="true"] {
  background: color-mix(in srgb, var(--code-content-bg) 92%, var(--panel));
  border-color: color-mix(in srgb, var(--border) 74%, transparent);
  box-shadow:
    0 1px 1px rgba(17, 17, 17, 0.04),
    0 6px 18px rgba(17, 17, 17, 0.06);
}

.memos-year-select-wrap[data-active="true"] .memos-year-select {
  color: var(--text);
  font-weight: 600;
}

.memos-year-select-wrap[data-disabled="true"] {
  opacity: 0.55;
}

.memos-year-select-wrap:focus-within {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent),
    0 6px 18px rgba(17, 17, 17, 0.08);
}

.memos-year-select:focus-visible {
  outline: none;
}

@media (hover: hover) and (pointer: fine) {
  .memos-year-select-wrap:not([data-disabled="true"]):hover {
    border-color: color-mix(in srgb, var(--border) 76%, transparent);
    background: var(--surface-card-strong);
  }
}

.memos-controls__actions > button {
  flex: 0 0 auto;
  height: var(--memos-control-h);
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--code-content-bg);
  font-size: var(--text-base);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.memos-controls__actions > button.new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--text);
  background: var(--text);
  color: var(--bg);
}

.new-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.memos-status {
  min-height: 4px;
  font-size: var(--text-xs);
  color: var(--muted);
}

.memos-status:empty {
  min-height: 0;
}

.memos-noscript-note {
  margin: 10px 0 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.memos-search-results {
  margin-top: 18px;
}

.memos-search-results__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-inline-start: 16px;
  margin-bottom: 10px;
}

.memos-search-results__summary {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.memos-search-results__clear {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: var(--text-xs);
  cursor: pointer;
}

.memos-search-results__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.memos-search-results__empty {
  margin: 18px 0 0;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  line-height: 1.6;
  font-family: var(--font-copy);
  color: var(--muted);
  background: var(--surface-card);
}

#memos-list {
  margin-top: 0px;
  background-image: linear-gradient(var(--ledger-rule), var(--ledger-rule));
  background-repeat: no-repeat;
  background-size: 1px 100%;
  background-position: var(--ledger-rail) 0;
}

.memos-controls__actions > button.new[data-loading="true"] {
  opacity: 0.92;
  cursor: progress;
}

.memos-controls__actions > button.new[data-loading="true"] .new-icon {
  animation: memos-new-pulse 1s ease-in-out infinite;
}

@keyframes memos-new-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}

.memo-search-result__layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.memo-search-result__layout--media {
  display: grid;
  grid-template-columns: minmax(0, 104px) minmax(0, 1fr);
  align-items: stretch;
}

.memo-search-result__layout--media .memo-search-result__content {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.memo-search-result__layout--media .memo-search-result__footer {
  margin-top: auto;
  padding-top: 12px;
}

.memo-search-result__content {
  min-width: 0;
}

.memo-search-result__link {
  display: block;
  padding: 18px;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-md);
}

.memo-search-result__link:hover,
.memo-search-result__link:focus-visible {
  background: var(--surface-card);
  outline: none;
}

.memo-search-result__thumb {
  width: 104px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-card);
  aspect-ratio: 1 / 1;
}

.memo-search-result__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.memo-search-result__excerpt {
  margin: 6px 0 0;
  color: var(--text);
  font-size: var(--text-base);
  line-height: 1.85;
  font-weight: 400;
}

.memo-search-result__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.memo-search-result__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
}

.memo-search-result__footer > :first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.memo-search-result__meta-line {
  flex: 0 0 auto;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0;
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--faint);
}

.memo-search-result__meta-line > * {
  white-space: nowrap;
}

.memo-search-result__sep {
  padding: 0 0.45em;
  color: var(--faint);
}

.memo-search-result__date,
.memo-search-result__page {
  color: inherit;
}

.memo-search-result__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-family: var(--font-copy);
  color: var(--muted);
  background: var(--surface-card);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}

.memo-search-result__tag--place {
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
}

.memo-search-result__mark {
  padding: 0 0.12em;
  border-radius: 0.25em;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: inherit;
  font-weight: inherit;
}

@media (max-width: 520px) {
  .memo-search-result__layout--media {
    grid-template-columns: 1fr;
  }

  .memo-search-result__thumb {
    width: min(100%, 180px);
  }

  .memo-search-result__footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .memo-search-result__meta-line {
    align-self: flex-start;
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .memos-toolbar {
    align-items: flex-start;
    padding-bottom: 2px;
  }

  .memos-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    --memos-control-h: 38px;
  }

  .memos-status {
    min-height: 2px;
  }

  .memos-year-filter {
    width: fit-content;
    max-width: 100%;
  }

  .memos-search {
    flex: 1 1 auto;
    max-width: none;
  }

  .memos-controls__actions {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }

  .memos-controls__actions > button {
    min-height: var(--memos-control-h);
  }

  .memo-media {
    max-width: 320px;
  }

  .memo-meta {
    gap: 6px;
    flex-wrap: nowrap;
  }

  .memo-meta .memo-tags {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

}

@media (min-width: 641px) and (max-width: 900px) {
  .memos-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }

  .memos-year-filter {
    flex: 0 1 auto;
    width: fit-content;
    max-width: 100%;
    justify-self: start;
  }

  .memos-controls__actions {
    width: auto;
    flex: 0 0 auto;
    min-width: 0;
    margin-left: auto;
    justify-self: end;
  }

  .memos-controls__search-cluster {
    min-width: 0;
  }

  .memos-search {
    flex: 0 0 clamp(220px, 27vw, 244px);
    width: clamp(220px, 27vw, 244px);
    min-width: 220px;
    max-width: 244px;
  }

  .memos-search-btn {
    width: 42px;
    padding: 0;
    min-width: 42px;
  }

  .memo-body picture,
  .memo-body img {
    display: block;
    max-width: 360px;
    width: 100%;
    height: auto;
  }

  .memo-media--grid {
    max-width: 100%;
    width: 100%;
    overflow: hidden;
  }
}

@media (max-width: 640px) {
  .memos-controls {
    --memos-control-h: 36px;
    --memos-year-filter-h: 34px;
    --memos-mobile-action-w: 68px;
    --memos-mobile-frame: rgba(127, 127, 127, 0.28);
    --memos-mobile-divider: rgba(127, 127, 127, 0.24);
  }

  .memos-year-filter {
    display: none;
  }

  .memos-year-filter__item {
    padding: 0 12px;
    font-size: var(--text-sm);
  }

  .memos-controls__actions {
    gap: 6px;
    justify-content: flex-start;
    align-items: stretch;
  }

  .memos-controls__search-cluster {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--memos-mobile-frame);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    box-shadow:
      0 1px 2px rgba(17, 17, 17, 0.04),
      0 8px 18px rgba(17, 17, 17, 0.04);
    overflow: hidden;
    transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease,
      background-color 0.2s ease;
  }

  .memos-year-select-wrap {
    display: block;
    width: var(--memos-mobile-action-w);
    min-width: var(--memos-mobile-action-w);
    max-width: var(--memos-mobile-action-w);
    border: 0;
    border-left: 1px solid var(--memos-mobile-divider);
    border-radius: 0;
    background: var(--surface-card-strong);
    box-shadow: none;
  }

  .memos-year-select {
    width: 100%;
    font-size: var(--text-sm);
    padding: 0 20px 0 10px;
    text-align: left;
    text-align-last: left;
  }

  .memos-search {
    flex: 1 1 160px;
    min-width: 0;
    max-width: none;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .memos-search input {
    font-size: var(--text-md);
  }

  .memos-search input::placeholder {
    font-size: var(--text-sm);
  }

  .memos-search-btn {
    width: var(--memos-mobile-action-w);
    min-width: var(--memos-mobile-action-w);
    padding: 0 10px;
    border-left: 1px solid var(--memos-mobile-divider);
    border-radius: 0;
    background: var(--surface-card-strong);
  }

  .memos-search-btn:focus-visible {
    outline: none;
  }

  .memos-year-select option {
    text-align: left;
  }

  .memos-year-select-wrap::after {
    right: 8px;
  }

  .memos-year-select-wrap[data-active="true"] {
    background: var(--content-bg);
    box-shadow: none;
  }

  .memos-year-select-wrap[data-empty="true"] .memos-year-select {
    color: var(--muted);
  }

  .memos-year-select-wrap[data-active="true"] .memos-year-select {
    color: var(--text);
    font-weight: 600;
  }

  .memos-year-select-wrap:focus-within {
    border-color: transparent;
    border-left-color: var(--memos-mobile-divider);
    box-shadow: none;
  }

  .memos-controls__actions > button.new {
    display: none;
  }
}

/* Memos Draft Dialog */
.memos-draft-dialog {
  width: min(560px, 92vw);
  max-height: 92vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-copy);
  --memos-focus: var(--muted);
  padding: 0;
}

.memos-draft-dialog::backdrop {
  background: transparent;
}

@supports (background: color-mix(in srgb, var(--text) 50%, var(--bg) 50%)) {
  .memos-draft-dialog::backdrop {
    background: color-mix(in srgb, var(--text) 28%, transparent);
  }
}

.memos-draft-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
}

.memos-draft-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.memos-draft-head h2 {
  margin: 0;
  font-size: var(--text-lg);
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.memos-draft-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
}

.memos-draft-title-icon svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.memos-draft-close {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius-md);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}

.memos-draft-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.memos-draft-field[hidden] {
  display: none;
}

.memos-draft-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.memos-draft-field-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.memos-draft-image-head .memos-draft-help {
  text-align: right;
}

.memos-draft-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.memos-draft-tool {
  position: relative;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.memos-draft-tool svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.memos-draft-tool.is-active {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg);
}

.memos-draft-tool::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, -2px);
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--text-2xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 2;
}

.memos-draft-tool:hover::after,
.memos-draft-tool:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.memos-draft-field label {
  font-size: var(--text-sm);
  color: var(--muted);
}

.memos-draft-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.memos-draft-label-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: var(--text-xs);
  line-height: 1;
  color: var(--faint);
}

.memos-draft-label-icon svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.memos-draft-field input,
.memos-draft-field textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  padding: 8px 12px;
  font-size: var(--text-sm);
  line-height: 1.4;
}

.memos-draft-field textarea {
  resize: vertical;
  min-height: 120px;
}

#memos-draft-content {
  font-family: var(--font-readable);
  min-height: 160px;
}

.memos-draft-help {
  font-size: var(--text-xs);
  color: var(--faint);
}

.memos-draft-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

.memos-draft-images {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.memos-draft-image-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 72px;
  gap: 8px;
  align-items: center;
}

.memos-draft-image-row .memos-draft-image-dim {
  display: block;
}

.memos-draft-image-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.memos-draft-image-add,
.memos-draft-image-upload {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius-sm);
  height: 24px;
  padding: 0 8px;
  font-size: var(--text-xs);
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.memos-draft-image-add {
  border-style: dashed;
}

.memos-draft-image-add:hover,
.memos-draft-image-upload:hover {
  border-color: var(--text);
}

.memos-draft-image-upload {
  border-color: var(--accent);
  color: var(--accent);
}

.memos-draft-image-upload[disabled] {
  opacity: 0.5;
  cursor: default;
}

.memos-draft-image-file {
  display: none;
}

.memos-draft-image-limit {
  color: var(--faint);
  font-size: var(--text-xs);
}

.memos-draft-image-src-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  width: 100%;
}

.memos-draft-image-src-wrap .memos-draft-image-src {
  width: 100%;
  padding-right: 32px;
}

.memos-draft-image-src-wrap.has-thumb .memos-draft-image-src {
  padding-left: 36px;
}

.memos-draft-image-thumb {
  position: absolute;
  left: 6px;
  top: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  transform: translateY(-50%);
}

.memos-draft-image-thumb[hidden] {
  display: none;
}

.memos-draft-image-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memos-draft-image-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--faint);
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
}

.memos-draft-image-clear svg {
  width: 12px;
  height: 12px;
  flex: none;
  fill: currentColor;
}

.memos-draft-image-row.has-image .memos-draft-image-clear {
  opacity: 1;
  pointer-events: auto;
}

.memos-draft-images.has-multiple .memos-draft-image-clear {
  opacity: 1;
  pointer-events: auto;
}

.memos-draft-image-dim::-webkit-outer-spin-button,
.memos-draft-image-dim::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.memos-draft-image-dim {
  appearance: textfield;
  -moz-appearance: textfield;
}

.memos-draft-half {
  flex: 1 1 0;
}

.memos-draft-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--text);
}

.memos-draft-check-help {
  font-size: var(--text-xs);
  color: var(--faint);
}

.memos-draft-status {
  min-height: 16px;
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: 12px;
}

.memos-draft-status[data-tone="error"] {
  color: var(--accent);
}

.memos-draft-status[data-tone="success"] {
  color: var(--text);
}

.memos-draft-link-row {
  margin-top: 0;
}

.memos-draft-link {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-xs);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.memos-draft-link svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.memos-draft-link.is-open .memos-draft-link-caret {
  transform: rotate(180deg);
}

.memos-draft-link-caret {
  transition: transform 0.15s ease;
}

.memos-draft-link-caret svg {
  width: 12px;
  height: 12px;
}

.memos-draft-link[hidden] {
  display: none;
}

.memos-draft-link:hover {
  text-decoration: underline;
}

.memos-draft-manual {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
}

.memos-draft-manual[hidden] {
  display: none;
}

.memos-draft-manual-title {
  font-size: var(--text-sm);
  color: var(--text);
  letter-spacing: 0.2px;
}

.memos-draft-manual-textarea {
  min-height: 140px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  font-size: var(--text-xs);
  line-height: 1.4;
  resize: vertical;
}

.memos-draft-manual-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.memos-draft-manual-note {
  font-size: var(--text-xs);
  color: var(--muted);
}

.memos-draft-manual .memos-draft-secondary {
  flex: 0 0 auto;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font-size: var(--text-xs);
  cursor: pointer;
}

.memos-draft-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.memos-draft-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.memos-draft-actions button {
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: var(--text-sm);
  cursor: pointer;
}

.memos-draft-actions .memos-draft-primary {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg);
}

.memos-draft-field input:focus-visible,
.memos-draft-field textarea:focus-visible,
.memos-year-filter__item:focus-visible,
.memos-draft-manual-textarea:focus-visible,
.memos-draft-actions button:focus-visible,
.memos-draft-manual .memos-draft-secondary:focus-visible,
.memos-draft-image-add:focus-visible,
.memos-draft-image-upload:focus-visible,
.memos-draft-image-clear:focus-visible,
.memos-draft-tool:focus-visible,
.memos-draft-link:focus-visible,
.memos-draft-close:focus-visible {
  outline: 2px solid var(--memos-focus, var(--muted));
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .memos-draft-field-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .memos-draft-field-title {
    width: 100%;
  }

  .memos-draft-image-head .memos-draft-help {
    width: 100%;
    text-align: left;
  }

  .memos-draft-row {
    flex-direction: column;
  }

  .memos-draft-image-row {
    grid-template-columns: 1fr 1fr;
    min-width: 0;
  }

  .memos-draft-image-src-wrap {
    grid-column: 1 / -1;
  }

  .memos-draft-image-dim {
    min-width: 0;
    width: 100%;
  }

  .memos-draft-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .memos-draft-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ===== 小记卡片 ===== */
/* 说说页公开卡片与后台预览共用的卡片样式。
*/

.memo-card {
  /* 账本竖栏：头像与昵称占左侧一列，正文、图片、标签都落在右边的文字列上 */
  --memo-gutter: 0;
  display: grid;
  grid-template-columns: var(--ledger-rail) minmax(0, 1fr);
  column-gap: var(--ledger-gap);
  align-items: start;
  padding: 16px 0 15px;
  margin: 0;
  border-top: 1px solid var(--ledger-rule);
  border-radius: 0;
  background: none;
  scroll-margin-top: 24px;
  font-family: var(--font-readable);
  line-height: 1.75;
}

.memo-card > :not(.memo-author) {
  grid-column: 2;
}

/* 搜索结果是同一套卡片骨架，但没有头像栏，所以不留竖栏那一列 */
.memo-card.memo-card--search-result {
  padding: 0;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
}

.memo-card.memo-card--search-result > :not(.memo-author) {
  grid-column: 1;
}

.memo-card:first-of-type {
  border-top: 0;
}

.memo-card:target {
  outline: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: 6px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
  animation: memo-card-target-highlight 2.3s ease-out forwards;
}

@keyframes memo-card-target-highlight {
  0%,
  86.96% {
    outline-color: color-mix(in srgb, var(--accent) 42%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
  }

  100% {
    outline-color: transparent;
    box-shadow: 0 0 0 0 transparent;
  }
}

/* 头像 / 昵称 / 时间各自一行：与文章页评论行同一套排版 */
.memo-author {
  grid-column: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 4px;
  margin: 0;
  min-width: 0;
  font-family: var(--font-copy);
}

.memo-card .avatar {
  grid-column: 1;
  grid-row: 1;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs);
  box-sizing: border-box;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xs);
  position: relative;
}

.memo-card .avatar--image {
  background: transparent;
}

.memo-card .avatar-fallback {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--text);
  color: var(--bg);
  opacity: 0;
}

.memo-card .avatar.is-fallback .avatar-fallback {
  opacity: 1;
}

.memo-card .avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memo-author .name {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  padding-right: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--text);
}

.memo-author__date {
  grid-column: 1;
  grid-row: 3;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  white-space: normal;
}

.memo-body {
  margin-top: 8px;
  color: var(--text);
  font-size: var(--text-md);
  line-height: 1.85;
  word-break: break-word;
}

.memo-body p {
  margin: 8px 0;
}
.memo-body p:first-child {
  margin-top: 0;
}
.memo-body p:last-child {
  margin-bottom: 0;
}

.memo-media {
  margin: 12px 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 0;
  max-width: 320px;
}

.memo-media img {
  display: block;
  width: 100%;
  height: auto;
}

.memo-media--grid {
  max-width: 100%;
  width: 100%;
  border-radius: 0;
  overflow: visible;
}

.memo-media--single {
  overflow: visible;
}

/* 配图按张数自动布局：2 张两列、3 张三列、4 张 2×2、5 张以上三列并跨列补齐末行 */
.memo-media-grid {
  display: grid;
  gap: 8px;
  width: auto;
}

.memo-media-grid--2 {
  grid-template-columns: repeat(2, 92px);
}

.memo-media-grid--3 {
  grid-template-columns: repeat(3, 92px);
}

.memo-media-grid .memo-media-item--span2 {
  grid-column: span 2;
  width: auto;
  height: 92px;
  aspect-ratio: auto;
}

.memo-media-grid .memo-media-item--span3 {
  grid-column: span 3;
  width: auto;
  height: 92px;
  aspect-ratio: auto;
}

.memo-media-item {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 0;
  background: transparent;
  padding: 0;
  width: 92px;
  height: 92px;
  flex: 0 0 auto;
  display: block;
  text-align: left;
  cursor: pointer;
  appearance: none;
}

.memo-media-item--single {
  aspect-ratio: auto;
}

.memo-media-item--single > img {
  width: 100%;
  height: auto;
}

.memo-media--grid .memo-media-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 说说配图窄屏：单图铺满，网格收紧间距 */
@media (max-width: 640px) {
  /* 窄屏放不下账本竖栏，昵称回到正文上方 */
  .memo-card {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
  }

  .memo-card > :not(.memo-author) {
    grid-column: 1;
  }

  .memo-author {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    margin: 0;
  }

  .memo-author .avatar {
    flex: 0 0 auto;
  }

  .memo-author .name {
    flex: 1 1 0;
    padding-right: 0;
  }

  .memo-author__date {
    flex: 0 0 100%;
    width: 100%;
  }

  #memos-list {
    background-image: none;
  }

  .memo-media {
    max-width: 100%;
  }

  .memo-media-item {
    border-radius: var(--radius-sm);
  }
}

/* 多出来的图收进最后一格：整格压一层深色，正中一个 +N */
.memo-media-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-copy);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #fff;
  background: var(--overlay-60);
  transition: background 0.15s ease;
}

.memo-media-item--more:hover .memo-media-more,
.memo-media-item--more:focus-visible .memo-media-more {
  background: var(--overlay-70);
}

.memo-media-item:focus-visible {
  outline: 2px solid var(--muted);
  outline-offset: 3px;
}

.memo-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 10px;
  font-size: var(--text-xs);
  color: var(--faint);
}

.memo-tags {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.memo-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
  white-space: nowrap;
}

.memo-tag-list {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.memo-tag-token {
  display: inline-block;
}

.memo-tag--normal {
  color: var(--accent);
}

.memo-tag--place {
  color: var(--muted);
}

/* ===== 小记页 ===== */
/* 小记页私有规则。 */

.memo-page {
  --memo-intro-mb: 32px;
  --memo-toc-mt: 18px;
  --memo-toc-mb: 46px;
  --memo-section-heading-mt: 56px;
}

.memo-page .intro {
  margin-bottom: var(--memo-intro-mb);
}

.memo-page .intro > :first-child {
  margin-top: 0;
}

.memo-page .intro > :last-child {
  margin-bottom: 0;
}

.memo-toc {
  margin: 18px 0 46px;
  padding-left: var(--ledger-gap);
  border-left: 1px solid var(--ledger-rule);
}

.memo-page .memo-toc {
  margin: var(--memo-toc-mt) 0 var(--memo-toc-mb);
}

.memo-toc details {
  margin: 20px 0;
}

.memo-toc summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 15px;
}

.memo-toc summary::-webkit-details-marker {
  display: none;
}

.memo-toc summary::after {
  content: "▶";
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.2s ease;
  margin-left: 4px;
}

.memo-toc details[open] summary::after {
  transform: rotate(90deg);
}

.memo-toc summary::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--text);
  opacity: 0.55;
}

.memo-toc .toc-items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  padding: 12px 0 0 18px;
  margin: 0;
  list-style: none;
}

.memo-toc .toc-items a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: var(--text-sm);
  border-bottom: none;
}

.toc-num {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.memo-content h2 {
  text-align: center;
  font-size: var(--text-md);
  font-weight: 600;
  margin: var(--memo-section-heading-mt, 56px) 0 18px;
  color: var(--muted);
}

.memo-content h2::before,
.memo-content h2::after {
  content: "-";
  margin: 0 10px;
  color: var(--border);
}

.memo-content h3 {
  margin: 28px 0 10px;
  font-size: var(--text-md);
  position: relative;
  padding-left: 34px;
}

.memo-content h3::before {
  content: attr(data-num);
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  line-height: 1;
  transform: translateY(-50%);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

body.memo-page[data-reading="immersive"] .prose {
  font-size: var(--text-md);
  line-height: 1.85;
}

body.memo-page[data-reading="immersive"] .prose p {
  margin: 14px 0;
}

@media (min-width: 901px) {
  .memo-page {
    --memo-intro-mb: 10px;
    --memo-toc-mt: 8px;
    --memo-toc-mb: 23px;
  }
}

@media (max-width: 900px) {
  .memo-page {
    --memo-intro-mb: 12px;
    --memo-toc-mt: 8px;
    --memo-toc-mb: 24px;
  }

  .memo-page .memo-content > h2:first-child {
    margin-top: 12px;
  }
}

@media (max-width: 640px) {
  .memo-toc .toc-items {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===============================
   页面私有样式（友链 / 标签 / 404 / 评论）
================================ */

/* 友链 */
.friends-intro {
  margin: 2px 0 18px;
  color: var(--muted);
  font-family: var(--font-copy);
  font-size: 15px;
  line-height: 1.7;
}

.friend-group {
  margin-top: 28px;
}

.friend-group:first-of-type {
  margin-top: 20px;
}

.friend-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ledger-rule);
}

.friend-group__title {
  margin: 0;
  color: var(--text);
  font-family: var(--font-readable);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.friend-group__count {
  flex: none;
  color: var(--faint);
  font-family: var(--font-copy);
  font-size: var(--text-2xs);
}

.friend-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.friend-item {
  position: relative;
  min-width: 0;
}

.friend-item.is-offline {
  opacity: 0.62;
}

.friend-card {
  height: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.friend-card:hover {
  border-color: var(--accent);
  background: var(--panel);
  transform: translateY(-1px);
}

.friend-card--static {
  cursor: default;
}

.friend-card--rss {
  padding-right: 40px;
}

.friend-card--static:hover {
  border-color: var(--border);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  transform: none;
}

.friend-card__avatar {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--panel);
  color: var(--muted);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--font-copy);
}

.friend-card__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.friend-card__avatar--image .friend-card__avatar-text {
  display: none;
}

.friend-card__avatar-text {
  font-size: 15px;
  line-height: 1;
  font-family: var(--font-copy);
}

.friend-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.friend-card__name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: var(--text-md);
  line-height: 1.4;
  font-weight: 600;
  font-family: var(--font-readable);
}

.friend-card__name-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.friend-card__description {
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.55;
  font-family: var(--font-copy);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.friend-card__badge {
  flex: none;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--faint);
  font-family: var(--font-copy);
  font-size: var(--text-2xs);
  font-weight: 400;
  line-height: 1.6;
}

.friend-card__rss {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--faint);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.friend-card__rss:hover,
.friend-card__rss:focus-visible {
  color: var(--accent);
  background: var(--panel);
}

@media (max-width: 640px) {
  .friend-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .friend-card {
    padding: 11px 12px;
  }
}

/* 404 */
.not-found {
  margin-top: 18px;
}

.not-found__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0;
}

.not-found__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--code-content-bg);
  color: var(--text);
  font-size: var(--text-sm);
  font-family: var(--font-copy);
  text-decoration: none;
  transition: background 0.2s ease;
}

.not-found__link:hover {
  background: var(--code-header-bg);
}

/* 评论 */
.comments {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--ledger-rule);
  font-family: var(--font-copy);
}

/* 写评论：不再是卡片，一段下划线输入区 + 工具栏 + 可展开的身份行 */
.respond {
  border: 0;
  border-bottom: 1px solid var(--ledger-rule);
  border-radius: 0;
  background: none;
}

.respond__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 8px;
  color: var(--muted);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  line-height: 1.5;
}

.respond__head-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.respond__logout,
.cancel-comment-reply a {
  color: var(--muted);
  font-size: var(--text-xs);
  text-decoration: none;
  transition: color 0.2s ease;
}

.respond__logout:hover,
.cancel-comment-reply a:hover {
  color: var(--accent);
}

.cancel-comment-reply:empty {
  display: none;
}

.respond__replyto {
  margin: 0;
  padding: 0 0 10px;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.6;
}

.respond__replyto[hidden] {
  display: none;
}

.comment-form {
  margin: 0;
}

.comment-form__message {
  position: relative;
  margin: 0;
}

.respond__editor {
  position: relative;
}

.comment-form textarea.textarea {
  display: block;
  width: 100%;
  min-height: 92px;
  margin: 0;
  padding: 6px 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-copy);
  font-size: var(--text-base);
  line-height: 1.8;
  resize: none;
  outline: none;
  box-shadow: none;
}

.comment-form textarea.textarea::placeholder {
  color: var(--faint);
}

/* JS 起来后正文框换成可插图片的编辑区，真正的 textarea 铺在同一格子里收值 */
.comment-form textarea.textarea.is-mirror {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  min-height: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.respond__rich {
  min-height: 92px;
  max-height: 42vh;
  padding: 6px 0 12px;
  border-radius: 0;
  overflow-y: auto;
  color: var(--text);
  font-family: var(--font-copy);
  font-size: var(--text-base);
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  outline: none;
  cursor: text;
}

.respond__rich.is-empty::before {
  content: attr(data-placeholder);
  color: var(--faint);
  pointer-events: none;
}

.respond__rich img {
  width: 22px;
  height: 22px;
  margin: 0 2px;
  vertical-align: -4px;
  object-fit: contain;
}

.respond__bar {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border-top: 1px solid var(--ledger-rule);
}

.respond__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s ease;
}

.respond__icon:hover,
.respond__icon[aria-expanded="true"] {
  color: var(--accent);
}

.respond__icon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.respond__tools {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.respond__send {
  color: var(--accent);
  transition: opacity 0.2s ease;
}

.respond__send:hover {
  opacity: 0.78;
}

/* 表情盘展开时替掉正文框那一段，工具栏留在下面照常点得着 */
.respond__emoji-panel {
  display: none;
  grid-template-rows: auto minmax(0, 1fr);
  height: 178px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-card);
}

.respond__editor.is-emoji-open .respond__emoji-panel {
  display: grid;
}

.respond__editor.is-emoji-open .comment-form__message {
  display: none;
}

.respond__emoji-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 0 12px;
  border-bottom: 1px dashed var(--border);
}

.respond__emoji-tabs {
  display: flex;
  flex: 1;
  gap: 14px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.respond__emoji-tabs::-webkit-scrollbar {
  display: none;
}

.respond__emoji-tab {
  padding: 0 0 5px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--muted);
  font-family: var(--font-copy);
  font-size: var(--text-sm);
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
}

.respond__emoji-tab.is-active {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

/* 关闭按钮：元素上还带 .respond__icon，这里只把它的 30px 收成 26px，跟分组标签那行等高 */
.respond__emoji-close {
  flex: none;
  width: 26px;
  height: 26px;
  margin-left: auto;
}

.respond__emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 8px;
  min-height: 0;
  padding: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.respond__emoji-grid button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  opacity: 0.78;
  cursor: pointer;
}

.respond__emoji-grid button:hover {
  opacity: 1;
}

.respond__emoji-grid img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* 游客身份：点小人图标把工具栏换成昵称 / 邮箱 / 网站 / 保存一行，正文框照常露着；
   保存或点空白收回。 */
.respond__editor.is-identity-open .respond__bar {
  display: none;
}

.respond__identity {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--ledger-rule);
}

.respond__identity[hidden] {
  display: none;
}

.respond__identity input {
  min-width: 0;
  height: 30px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: none;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  box-shadow: none;
}

.respond__identity input::placeholder {
  color: var(--faint);
}

.respond__identity input:focus {
  border-color: var(--accent);
  outline: none;
}

.respond__save {
  flex: none;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font-copy);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.respond__save:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.comment-emoji {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.35em;
  object-fit: contain;
}

/* 评论区在 .content__inner 里，正文那条「无类名链接虚线」会漏进来，这里统一去掉 */
.comments a {
  border-bottom: 0;
}

/* 评论列表：头像占左边一栏，名字与时间、正文、操作依次往下排 */
.comments__head {
  margin: 36px 0 0;
}

.comments__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-family: var(--font-copy);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
}

.comments__title .icon {
  color: var(--faint);
}

.comments__sep {
  color: var(--faint);
  font-weight: 400;
}

.comments__count {
  color: var(--faint);
  font-weight: 400;
}

.comments__closed {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-base);
}

.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-body {
  display: grid;
  grid-template-columns: var(--ledger-rail) minmax(0, 1fr);
  column-gap: var(--ledger-gap);
  padding: 18px 0 0;
}

.comment-author {
  display: grid;
  grid-template-columns: 1fr;
  grid-column: 1;
  grid-row: 1;
  align-content: start;
  gap: 4px;
  padding-right: 12px;
}

.comment-author [itemprop="image"] {
  line-height: 0;
}

.comment-author img {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 2px;
  background: var(--panel);
  object-fit: cover;
}

.comment-author .fn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  color: var(--text);
  font-family: var(--font-copy);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.comment-author .fn a {
  color: inherit;
  text-decoration: none;
}

.comment-author .fn a:hover {
  color: var(--accent);
}

.comment-target {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-left: 4px;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: 400;
}

.comment-target .icon {
  color: var(--faint);
}

.comment-meta {
  grid-column: 1;
  grid-row: 2;
  color: var(--faint);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}

.comment-meta a {
  color: inherit;
  text-decoration: none;
}

.comment-awaiting-moderation {
  margin-left: 6px;
  padding: 0 5px;
  border-radius: var(--radius-xs);
  background: var(--surface-card-strong);
  color: var(--muted);
  font-size: var(--text-2xs);
  font-style: normal;
  line-height: 1.7;
}

.comment-content {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  margin: 0;
  color: var(--text);
  font-size: var(--text-md);
  line-height: 1.8;
  word-break: break-word;
}

.comment-content p {
  margin: 8px 0;
}

.comment-content p:first-child {
  margin-top: 0;
}

.comment-content p:last-child {
  margin-bottom: 0;
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  grid-column: 2;
  grid-row: 3;
  margin-top: 8px;
  color: var(--faint);
  font-size: var(--text-2xs);
  line-height: 1.6;
}

.comment-like {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: color 0.2s ease;
}

.comment-like:hover,
.comment-like.is-liked {
  color: var(--accent);
}

.comment-like:disabled {
  cursor: default;
}

.comment-reply {
  font-size: inherit;
}

.comment-reply a {
  color: var(--faint);
  text-decoration: none;
  transition: color 0.2s ease;
}

.comment-reply a:hover {
  color: var(--accent);
}

.comment-children {
  grid-column: 1 / -1;
  grid-row: 4;
  padding-left: calc(var(--ledger-rail) + var(--ledger-gap));
}

.comment-children > .comment-list {
  padding-left: 0;
  background-image: none;
}

.comment-body > .respond {
  grid-column: 1 / -1;
  margin-top: 20px;
}

@media (max-width: 640px) {
  .respond__identity {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 6px;
  }

  .comment-list {
    background-image: none;
  }

  .comment-body {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }

  .comment-author {
    display: flex;
    align-items: center;
    gap: 8px;
    grid-column: 1;
    grid-row: 1;
    padding-right: 0;
  }

  .comment-meta {
    grid-column: 1;
    grid-row: 2;
  }

  .comment-content {
    grid-column: 1;
    grid-row: 3;
  }

  .comment-actions {
    grid-column: 1;
    grid-row: 4;
  }

  .comment-children {
    grid-row: 5;
    padding-left: 14px;
  }
}

/* 音乐播放器浮层 */
.music-dock {
  position: fixed;
  left: max(calc(30px + env(safe-area-inset-left)), calc(50% - (var(--layout-shell-max-inline-size) / 2) + 30px));
  bottom: calc(150px + env(safe-area-inset-bottom));
  z-index: 7;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: min(220px, calc(100vw - 24px));
  padding: 12px 14px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--content-bg);
  color: var(--text);
  font-family: var(--font-copy);
  font-size: var(--text-sm);
  box-shadow: 0 12px 32px var(--overlay-20);
}

.music-dock[hidden] {
  display: none;
}

.music-dock__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.music-dock__cover {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.music-dock__cover[hidden] {
  display: none;
}

.music-dock__now {
  flex: 1;
  min-width: 0;
}

.music-dock__title {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.music-dock__artist {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.music-dock__close,
.music-dock__list-toggle,
.music-dock__btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.music-dock__close,
.music-dock__list-toggle {
  width: 28px;
  height: 28px;
}

.music-dock__close .icon,
.music-dock__list-toggle .icon {
  width: 15px;
  height: 15px;
}

.music-dock__close:hover,
.music-dock__list-toggle:hover,
.music-dock__list-toggle[aria-expanded="true"],
.music-dock__btn:hover {
  color: var(--text);
}

.music-dock__close:focus-visible,
.music-dock__list-toggle:focus-visible,
.music-dock__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.music-dock__seek {
  display: flex;
  align-items: center;
  gap: 8px;
}

.music-dock__range {
  flex: 1;
  min-width: 0;
  height: 16px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.music-dock__range::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 2px;
  background: var(--border);
}

.music-dock__range::-webkit-slider-thumb {
  width: 7px;
  height: 7px;
  margin-top: -2.5px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  -webkit-appearance: none;
}

.music-dock__range::-moz-range-track {
  height: 2px;
  border-radius: 2px;
  background: var(--border);
}

.music-dock__range::-moz-range-thumb {
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
}

.music-dock__range:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.music-dock__time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.music-dock__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.music-dock__btn {
  width: 22px;
  height: 22px;
}

.music-dock__btn .icon {
  width: 16px;
  height: 16px;
}

.music-dock__btn--play {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  color: var(--text);
}

.music-dock__btn--play .icon {
  width: 18px;
  height: 18px;
}

.music-dock__btn--play.is-playing {
  border-color: var(--accent);
  color: var(--accent);
}

.music-dock__glyph[hidden] {
  display: none;
}

.music-dock__list[hidden] {
  display: none;
}

.music-dock__list {
  max-height: 210px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  border-top: 1px dashed var(--border);
  list-style: none;
}

.music-dock__list li {
  margin: 0;
}

.music-dock__track {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 7px 2px;
  border: 0;
  border-bottom: 1px dashed var(--border);
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s ease;
}

.music-dock__list li:last-child .music-dock__track {
  border-bottom: 0;
}

.music-dock__track:hover,
.music-dock__track.is-active {
  color: var(--accent);
}

.music-dock__track:focus-visible {
  outline: 1px dashed var(--accent);
  outline-offset: -1px;
}

.music-dock__track-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.music-dock__track-artist {
  flex: 0 0 auto;
  max-width: 40%;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.music-link.is-playing {
  color: var(--accent);
}

@media (max-width: 900px) {
  .music-dock {
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: calc(12px + env(safe-area-inset-left));
    width: auto;
    max-height: calc(100vh - 24px);
  }

  .music-dock__list {
    max-height: min(34vh, 220px);
  }
}

/* 轻提示 */
.lcxyz-toast {
  position: fixed;
  top: calc(18px + env(safe-area-inset-top));
  right: calc(18px + env(safe-area-inset-right));
  z-index: 120;
  max-width: calc(100vw - 40px);
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--content-bg);
  color: var(--text);
  font-family: var(--font-copy);
  font-size: var(--text-sm);
  box-shadow: 0 8px 22px var(--overlay-20);
  opacity: 0;
  pointer-events: none;
  transform: translate(0, -8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.lcxyz-toast.is-show {
  opacity: 1;
  transform: translate(0, 0);
}

/* 文章尾部：正文后一条线，点赞与标签并一行，版权与上下篇不再画线 */
.article-tail {
  margin-top: 28px;
  padding-top: 12px;
  border-top: 1px solid var(--ledger-rule);
}

.article-tail__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
}

/* 文章页操作条 */
.article-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.article-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font-copy);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color 0.2s ease;
}

.article-action:hover,
.article-action.is-liked {
  color: var(--accent);
}

.article-action:disabled {
  opacity: 0.6;
  cursor: default;
}

.article-action__count {
  margin-left: 1px;
  color: var(--faint);
  font-size: var(--text-2xs);
  transform: translateY(-0.4em);
}

.article-action.is-liked .article-action__count {
  color: var(--accent);
}

.article-action__icon--fill,
.memo-like__icon--fill,
.comment-like__icon--fill {
  display: none;
}

.article-action.is-liked .article-action__icon--line,
.memo-like.is-liked .memo-like__icon--line,
.comment-like.is-liked .comment-like__icon--line {
  display: none;
}

.article-action.is-liked .article-action__icon--fill,
.memo-like.is-liked .memo-like__icon--fill,
.comment-like.is-liked .comment-like__icon--fill {
  display: inline-flex;
}

/* 说说点赞 */
.memo-actions {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
}

.memo-like {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--faint);
  font-family: var(--font-copy);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color 0.2s ease;
}

.memo-like:hover,
.memo-like.is-liked {
  color: var(--accent);
}

.memo-like:disabled {
  opacity: 0.6;
  cursor: default;
}

/* 分享海报 */
.poster {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--content-bg);
  color: var(--text);
  font-family: var(--font-copy);
}

.poster::backdrop {
  background: var(--overlay-70);
}

.poster__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px dashed var(--border);
}

.poster__heading {
  font-size: var(--text-sm);
  color: var(--muted);
}

.poster__stage {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 14px;
}

.poster__canvas {
  display: block;
  width: 100%;
  max-width: 330px;
  height: auto;
  border: 1px solid var(--border);
}

.poster__hint {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.poster__bar {
  display: flex;
  justify-content: flex-end;
  padding: 10px 12px;
  border-top: 1px dashed var(--border);
}

.poster__download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--accent);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.poster__download[hidden] {
  display: none;
}

.poster__download:hover {
  border-color: var(--accent);
}

/* 放在末尾，才能压过后文才出现的动画声明 */
@media (prefers-reduced-motion: reduce) {
  .float-action {
    transition: none;
    transform: none;
  }

  .prose .code-block .code-lang-icon {
    transition: none;
  }

  .toc-rail,
  .memos-controls__actions > button.new[data-loading="true"] .new-icon,
  .memo-card:target {
    animation: none;
  }
}