/* ===================== 全局变量（语义化+精简+强层次） ===================== */

:root {
  /* 背景色（灰度分级，从纯黑到深灰） */
  --color-bg-primary: #000000;    /* 纯黑 - 主背景 */
  --color-bg-secondary: #030303;  /* 极深灰 - 次要背景 */
  --color-bg-tertiary: #1E1E1E;   /* 深灰 - 卡片/模块背景 */
  
  /* 主色调（调亮！浅灰为主色，更醒目） */
  --color-primary: #BFBFBF;       /* 亮中灰 - 主交互色（比原来亮50%） */
  --color-primary-rgb: 191, 191, 191;
  --color-primary-hover: #D9D9D9; /* 极浅灰 - hover状态（更亮） */
  --color-primary-dark: #999999;  /* 中灰 - active/强调状态 */
  
  /* 文本色（灰度分级，提升可读性） */
  --color-text-primary: #E0E0E0;  /* 浅灰 - 主要文本（高对比度） */
  --color-text-secondary: #CCCCCC;/* 中浅灰 - 次要文本 */
  --color-text-tertiary: #999999; /* 中灰 - 注释/辅助文本 */
  --color-text-tertiary-rgb: 153, 153, 153;
   
  /* 边框/分割色（灰度） */
  --color-border: #333333;        /* 深灰 - 常规边框 */
  --color-border-dark: #555555;   /* 中深灰 - 强调边框 */
  
  /* 辅助变量（灰度适配） */
  --translucent: rgba(15, 15, 15, 0.8); /* 半透深灰 */
  --backgroundgrid: rgba(20, 20, 25, 0.3); /* 网格背景灰 */
  --scrollbar: #444444;           /* 滚动条灰 */
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* 更深的阴影增强层次 */
}




/* 浅色模式适配（若需要） */
@media screen and (prefers-color-scheme:light) {
  :root {
    --color-bg-primary: #FDFDF3;
    --color-bg-secondary: #FAFAF0;
    --color-bg-tertiary: #FAFAF0;
    
    --color-primary: #191702;
    --color-primary-rgb:16, 12, 4;
    
    --color-text-primary: #353035;
    --color-text-secondary: #474238;
    --color-text-tertiary: #999;
    --color-text-tertiary-rgb: 153, 153, 153;
    
    --color-border: #CBCBBB;
    --color-border-dark: #494848;
    
    --translucent: rgba(245, 245, 235, 0.9);
    --backgroundgrid: rgba(237, 237, 235, 0.2);
    --scrollbar: #DDD;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
}

/* ===================== 基础样式 ===================== */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%
}

body {
  height: auto;
  min-height: 100vh;
  width: 100%;
  background-image: linear-gradient(to right, var(--backgroundgrid) 0.1rem, transparent 0.1rem), 
                    linear-gradient(to bottom, var(--backgroundgrid) 0.1rem, transparent 0.1rem);
  background-size: 0.8em 0.8em;
  background-position: center center;
  background-color: var(--color-bg-primary);
  font-family: "Spectral", "Noto Serif SC", serif !important;
  font-size: 0.95em !important;
  font-weight: 400;
  /* 微调基线，进一步消除高低错位 */
  font-variant-numeric: lining-nums;
  line-height: 1.6;
  overflow-x: hidden;
  margin: 0;
}

/* ===================== 文章标题层级 ===================== */

h1, h2, h3, h4, h5, h6 {
  margin: 1.2em 0 0.5em;
  color: var(--color-text-primary);
  font-family: "Spectral", "Noto Serif SC", serif;
  font-weight: 700;
  font-variant-numeric: lining-nums;
  line-height: 1.2;
  letter-spacing: 0.005em;
}

h1 {
  font-size: 1.6em;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.3em;
}
h2 {
  font-size: 1.3em;
}
h3 {
  font-size: 1.1em;
}
h4 {
  font-size: 1em;
}
h5, h6 {
  font-size: 0.9em;
  color: var(--color-text-secondary);
}
.post-title {
  border-bottom: none;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 10px
}
::-webkit-scrollbar-track {
  background-color: var(--color-bg-primary)
}
::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background-color: var(--scrollbar)
}
@media (max-width:767px) {
  ::-webkit-scrollbar {
    width: 3px
  }
}

/* 选中文本样式 */
::selection {
  color: #FFFFFF;
  background: var(--color-primary)
}

/* 通用链接样式 */
a:link, a:visited {
  color: var(--color-primary);
  text-decoration: none
}
a:hover {
  text-decoration: underline
}

/* ===================== 布局容器 ===================== */
/* ===================== 主体边距 原始样式（你最初发送的） ===================== */
#themain {
  margin: 1rem 3vw 0;
}
#deskmain {
  margin: 2rem 0 0;
}
@media (min-width:768px) {
  #themain {
    margin: 1rem 5vw 0;
  }
  #deskmain {
    margin-top: 1.6rem;
    margin-left: 5vw;
    margin-right: calc(5vw - 10px);
  }
}
@media (min-width:1200px) {
  #themain {
    margin: 2rem 5vw 0;
  }
  #deskmain {
    margin-top: 1.3rem;
    margin-left: 15vw;
    margin-right: calc(15vw - 10px);
  }
}
@media (min-width: 1900px) {
  #themain {
    max-width: 50vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
  }
  #title {
    max-width: 50vw !important;
    margin-left: auto;
    margin-right: auto;
  }
}











/* 占位高度 */
#height {
  height: 7rem;
}
@media (max-width: 767px) {
  #height {
    height: 7rem;
  }
}
@media (min-width: 1200px) {
  #height {
    height: 8rem;
  }
}

/* ===================== 标题栏样式 ===================== */
#title {
  background-color: var(--translucent);
  backdrop-filter: blur(10px);
  border-radius: 4px;
  color: var(--color-text-primary);
  position: fixed;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, backdrop-filter 0.3s ease;
  box-shadow: var(--shadow);
  padding: 0.5rem 1rem;
  max-width: 95%;
}

/* 滚动时标题栏动效 */
body.scroll #title {
  top: 5px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}


#title h1 {

  margin: 8px 0;
  font-size: 2em;
  padding-bottom: 0;
  border: none;
  transition: font-size 0.3s ease;
}
#title h1 a {
  text-decoration: none;
  transition: color 0.3s ease;
  color: var(--color-text-primary);
}
#title h1 a:hover {
  color: var(--color-primary);
}

.hoverlink:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.title a {
  color: var(--color-text-primary);
}
.tags a {
  color: #6a737d;
}
.ptitle p {
  color: var(--color-text-primary);
  margin: 0;
  border-radius: 2px;
}

/* 导航按钮样式 */
#title p .a {
  padding: 0.3em 1em;
  background-color: var(--translucent);
  border-radius: 4px;
  backdrop-filter: blur(10px);
  text-decoration: none;
  transition: all 0.3s ease;
  margin: 0 4px;
  position: relative;
  display: inline-block;
  color: var(--color-text-primary) !important;
  cursor: pointer;
}


















/* 全局过渡：所有交互更丝滑 */
#title p a.a {
  transition: all 0.2s ease !important;
}

/* 1. 普通导航hover（暗黑+浅色模式统一逻辑） */
#title p a.a:hover {
  background-color: var(--color-primary) !important;
  color: var(--color-bg-primary) !important;
  transform: translateY(-2px);
  /* 弱化阴影，更极简 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

/* 2. 当前页active高亮（和hover用同一主色，统一视觉） */
#title p .a.current {
  background-color: var(--color-primary) !important;
  color: var(--color-bg-primary) !important;
  /* 去掉边框，按你要求简化 */
  border: none !important;
}

/* 3. active状态下hover（仅轻微调整，弱化对比） */
#title p .a.current:hover {
  /* 仅微调透明度，不换色，避免黑白跳变 */
  background-color: rgba(var(--color-primary-rgb), 0.9) !important;
  /* 文字色保持不变，彻底统一 */
  color: var(--color-bg-primary) !important;
}

/* 补充：完善浅色模式变量，保证配色统一 */
@media screen and (prefers-color-scheme:light) {
  :root {
    /* 浅色模式主色统一（和暗黑模式逻辑对齐） */
    --color-primary: #2A2A2A; /* 替换原#191702，弱化纯黑对比 */
    --color-primary-rgb: 42, 42, 42; /* 对应上面的#2A2A2A */
    /* 无需额外hover/dark变量，全程用var(--color-primary) */
  }
}










.title .div {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

/* 下拉菜单样式 */
.dropdown {
  position: relative;
  display: inline-block;
  z-index: 9999;
  isolation: isolate;
}
.dropdown .a::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 10px;
  background-color: transparent;
  z-index: 9998;
}

/* 触屏设备不需要悬停桥 */
@media (hover: none) {
  .dropdown .a::after {
    display: none;
  }
}
.dropdown-content {
  min-width: 100%;
  width: fit-content;
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  padding: 0.2rem 0;
  display: none;
  position: absolute;
  background-color: var(--translucent);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  z-index: 10001;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  will-change: backdrop-filter;
}
.dropdown-content a {
  color: var(--color-text-primary) !important;
  text-decoration: none;
  display: block;
  width: auto;
  padding: 0.6em 1.8em !important;
  transition: background-color 0.3s ease;
  background-color: transparent;
  text-align: center;
  white-space: nowrap;
  font-size: 0.95em;
}
.dropdown-content a:first-child {
  margin-top: 0 !important;
}
.dropdown-content a:last-child {
  margin-bottom: 0 !important;
}
.dropdown-content a + a {
  margin-top: 6px !important;
}
/* 下拉菜单hover（暗金半透） */
.dropdown-content a:hover {
  background-color: rgba(var(--color-primary-rgb), 0.6) !important;
  color: #FFFFFF !important;
  transform: translateX(0);
}
.dropdown:hover .dropdown-content {
  display: block !important;
  animation: fadeIn 0.3s ease;
}
.dropdown:hover .a {
  background-color: rgba(var(--color-primary-rgb), 0.8);
}

/* 标题栏响应式 */
@media (max-width: 767px) {
  .dropbtn {
    padding: 0.5em 1em;
  }
  .dropdown .a::after {
    height: 8px;
  }
  .dropdown-content {
    transform: translateX(-50%) translateY(5px);
    min-width: 140%;
  }
  .dropdown-content a {
    padding: 0.8em 1.5em !important;
    font-size: 1em;
  }
  #titlenav {
    text-align: center;
    flex-direction: column;
    gap: 8px;
  }
  #title h1 {
    text-align: center;
  }
  #title {
    margin: 10px auto;
    width: calc(94vw);
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
  }
  .ptitle #p {
    display: none;
    margin: 5px 0;
  }
  #title p .a {
    display: inline-block;
    margin: 2px 4px;
    padding: 0.3em 0.8em;
  }
  @keyframes fadeInMobile {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(0);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateY(5px);
    }
  }
}
@media (min-width: 768px) {
  #title {
    width: 80vw;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
  }
  #titlenav {
    text-align: initial;
    flex-direction: row;
  }
  #title h1 {
    font-size: 2.5em !important;
  }
}
@media (min-width: 1200px) {
  #title {
    background-color: var(--translucent);
    width: 60vw;
    color: var(--color-text-primary);
    border: none;
    box-shadow: none;
    left: 50%;
    transform: translateX(-50%);
  }
  .ptitle p {
    margin-bottom: 0.4em;
  }
  #titlenav {
    text-align: initial;
  }
  #title h1 {
    font-size: 3em !important;
  }
  #title p .a:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  }
  .dropdown .a::after {
    height: 12px;
  }
}

/* 淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(5px);
  }
}

/* ===================== 通用组件样式 ===================== */
/* 按钮容器 */
.block {
  backdrop-filter: blur(7px);
  background: var(--translucent);
  border: 0.0625rem solid var(--color-border);
  padding: 0.8rem;
  border-radius: 2px;
  box-shadow: none;
  margin: 0.0625rem -0.0625rem;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.block:hover {
  border-color: rgba(var(--color-primary-rgb), 0.5);
  box-shadow: var(--shadow);
}

/* 页面内容区间距 */
main {
  margin-top: 1rem;
}

/* 多图排版 */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.6rem;
  margin: 0.8rem 0;
  align-items: start;
}
.image-grid .topb {
  padding: 0.2rem 0 0 0.4rem;
}
.image-grid .topb p {
  margin: 0 0 0.4rem 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.image-grid .topb p:last-child {
  margin-bottom: 0;
}
.image-grid .image-wrapper {
  border: 0.0625rem solid var(--color-border);
  border-radius: 2px;
  transition: border-color 0.25s ease;
}
.image-grid .image-wrapper:hover {
  border-color: var(--color-primary);
}
.image-grid .image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 !important;
  border: none;
  border-radius: 0;
}
.image-grid .image-wrapper:hover img {
  filter: grayscale(0%) !important;
}
.image-grid .image-wrapper figure.image-caption {
  margin: 0 !important;
}
.image-grid .image-wrapper figure.image-caption figcaption {
  padding: 0.35rem 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  text-align: center;
  line-height: 1.35;
  border-top: 0.0625rem solid var(--color-border);
}

/* 按钮样式 */
.buttonb {
  text-align: center;
  display: inline-block;
  background-color: var(--color-bg-primary);
  -webkit-transition-duration: 0.4s;
  border-radius: 2px;
  border: 0.2px solid var(--color-border-dark) !important;
  color: var(--color-text-primary) !important
}
.buttonb:hover {
  background-color: rgba(var(--color-primary-rgb), 0.8);
  color: #FFFFFF !important
}






/* 内容注释按钮 */
.button-container {
  overflow: visible; /* 保留可见，确保tooltip不被父容器裁剪 */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background-color: var(--color-bg-primary);
  margin-top: 13px;
  margin-left: 0;
  padding: 0 0rem;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
  position: relative; /* 新增：确保容器层级稳定，不影响子元素tooltip */
  z-index: 1; /* 新增：给父容器设置基础层级，避免被其他元素覆盖 */
}

.content-button {
  display: block;
  background-color: var(--color-bg-primary);
  border: 0.0625rem solid var(--color-border);
  border-radius: 2px;
  padding: 0.75rem 0.85rem;
  text-align: center;
  text-decoration: none;
  color: var(--color-text-primary) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative; /* 保留：作为tooltip的定位容器 */
  width: auto;
  flex: 1;
  min-width: 2rem;
  transform: translateY(0);
  z-index: 10; /* 提升：给按钮设置足够层级，支撑tooltip显示 */
  overflow: visible; /* 新增：确保按钮自身不裁剪tooltip */
}

/* PC端按钮样式（极浅暗金半透） */
@media (min-width: 768px) {
  .flex {
    display: flex
  }
  
  .page-next {
    display: none
  }
  
  .content-button:hover {
    border: 1px solid rgba(var(--color-primary-rgb), 0.8) !important;
    background-color: rgba(var(--color-primary-rgb), 0.2) !important;
    color: var(--color-text-primary) !important;
    transform: translateY(-3px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .content-button::after {
    content: attr(data-tooltip);
    position: absolute;
    background-color: var(--color-border-dark);
    color: #FFFFFF;
    padding: 5px 10px;
    border-radius: 2px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 同步按钮缓动曲线，更协调 */
    white-space: nowrap;
    top: calc(100% + 8px); /* 保持与按钮的间距，不重叠 */
    left: 50%;
    transform: translateX(-50%) translateY(5px); /* 初始偏移，实现淡入上浮效果 */
    z-index: 9999; /* 保持超高层级，确保覆盖其他元素 */
    pointer-events: none; /* 保留：不阻挡底层元素交互 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-weight: 100;
    font-size: 0.85em; /* 新增：微调字体大小，更精致 */
    line-height: 1.4; /* 新增：优化行高，避免文字拥挤 */
  }
  
  .content-button:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0); /* 偏移复位，实现灵动上浮效果 */
  }
}






/* 移动端按钮样式 */
@media (max-width: 767px) {
  .small-flex {
    display: flex
  }
  .page-next-2 {
    display: none
  }
  .button-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
    padding: 0 !important;
    margin: 13px auto 0;
    background: transparent !important;
  }
  .content-button {
    padding: 0.5rem 0.6rem;
    font-size: 14px;
    min-width: auto;
    width: auto;
  }
  .content-button:hover {
    text-decoration: none;
  }
  .content-button::after {
    content: attr(data-tooltip);
    display: block;
    font-size: 11px;
    margin-top: 4px;
    color: var(--color-text-tertiary);
    font-weight: normal;
    line-height: 1.2;
    transition: color 0.3s ease;
  }
}

/* ===================== 文章/内容样式 ===================== */
footer {
  color: var(--color-text-primary);
  text-align: right;
}
#footer {
  color: var(--color-text-tertiary);
}

article {
  background-color: var(--translucent);
  backdrop-filter: blur(7px);
  border-radius: 2px;
}

/* 分割线（柔和过渡） */
hr {
  border: 0;
  height: 0.0625rem;
  background: linear-gradient(to right, transparent, rgba(var(--color-text-tertiary-rgb), 0.5), transparent);
  margin: 2rem 0;
}

/* 文章图片 */

/* 图片通用样式 */
.post-content .image-caption img,
.post-content img:not(.image-caption img):not(.album-cover):not([class*="avatar"]) {
  width: 100%;
  max-width: 100%;
  border: 0.0625rem solid var(--color-text-tertiary);
  border-radius: 2px;
  margin: 0.5rem auto;
  padding: 0;
  transition: all 0.3s ease;
  filter: grayscale(40%);
  background: var(--color-bg-tertiary);
  display: block;
}
.post-content .image-caption img:hover,
.post-content img:not(.image-caption img):hover {
  filter: grayscale(0%);
  border: 0.0625rem solid var(--color-primary);
}

/* 图片描述 */
.post-content .image-caption figcaption {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  line-height: 1.3;
  margin-top: 0.1rem;
  text-align: center;
}

@media (max-width: 768px) {
  .post-content .image-caption figcaption {
    font-size: 0.7rem;
  }
}

figure {
  margin: 0 !important;
  padding: 0;
}





/* 文本样式 */
.post p {
  color: var(--color-text-primary);
  letter-spacing: 0.05em;
  line-height: 1.4em
}

/* 文章正文字体规范 */
.post-content p,
.post-content li,
.post-content blockquote {
  font-family: "Spectral", "Noto Serif SC", serif;
  font-weight: 400;
}

/* 图片容器间距 */
.image-caption {
  margin: 2rem 0;
}






.text {
  color: var(--color-text-primary);
  letter-spacing: 0.1em;
  line-height: 1em
}
.green {
  color: var(--color-text-primary) !important
}
.green:hover {
  color: var(--color-primary) !important
}

/* 列表/首页样式 */
#index1 {
  display: grid;
  grid-template-columns: repeat(1) 100%
}
.title img {
  margin: 0 17.5%;
  width: 65%;
  border-radius: 2px
}
@media (min-width: 992px) {
  .title img {
    margin: 45px 0%
  }
}

.newpost :hover {
  transition: 0.2s ease;
}













			
			/* 核心：统一边框基础样式（克制简约，无加粗轮廓） */
			.border-module {
				border: 0.0625rem solid var(--color-border); /* 细边框，无浮夸加粗 */
				border-radius: 2px;
				box-shadow: none;
				transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
				padding: 0.8rem;
				box-sizing: border-box;
				background-color: var(--translucent);
				backdrop-filter: blur(7px);
				transform: translateY(0); /* 初始无位移，hover仅轻微变化 */
			}
			
			/* 核心：统一边框hover效果（极度克制，无浮夸动画） */
			.border-module:hover {
				transform: translateY(-2px); /* 极轻微上浮，远低于原2px，更克制 */
				border-color: rgba(var(--color-primary-rgb), 0.8); /* 仅边框变色，无加粗 */
				box-shadow: var(--shadow); /* 浅淡阴影，无厚重感 */
				color: #FFFFFF !important; /* 仅文字变白，无额外花哨效果 */
			}
			
			/* 原有有效样式（保留使用到的，剔除未引用的冗余） */
			#information #newpost .newpost {
				width: 100%;
				text-decoration: none;
				display: block;
				color: var(--color-text-secondary);
				line-height: 1.6;
				z-index: 2;
				margin-bottom: 1rem;
			}
			#information .newpost p {
				margin: 0.4rem 0 0 0;
				font-size: 0.88em;
				line-height: 1.65;
				color: var(--color-text-secondary);
			}
			
			#information .newpost .span {
				display: block;
				font-weight: bold;
				font-size: 1.3em;
				color: var(--color-primary);
				transition: all 0.3s ease;
				padding: 0.15rem 0;
				border-radius: 2px;
			}
			
			#information .newpost:not(.cssgrid-collection):hover .span {
				color: #FFFFFF !important;
				background: rgba(var(--color-primary-rgb), 0.8);
				transform: translateX(3px); /* 轻微右移，比原5px克制 */
			}
			
			#information .hogwarts {
				overflow: auto;
				scrollbar-width: none;
				-ms-overflow-style: none;
				margin: 0.0625rem auto 1rem;
			}
			
			.newpost div {
				font-weight: bold;
				transition: 0.3s ease;
			}
			
			.newpost:not(.cssgrid-collection):hover div {
				color: white !important;
				background: rgba(var(--color-primary-rgb), 0.8);
			}
			
			.hogwarts p {
				color: var(--color-text-primary) !important;
			}
			
			@media (min-width:768px) {
				.hogwarts {
					
					max-height: 45vh;
				}
				
				#info #newpost {
				display: grid;
				grid-template-columns: repeat(1, 1fr) 35%;
				grid-gap: 1.2rem;
				align-items: start;
				}
			}
			
			aside {
				color: var(--color-text-primary);
				text-align: center;
				padding: 2px 0;
				border: solid var(--color-text-secondary);
				border-width: 0.0625rem 0;
				text-transform: uppercase;
				letter-spacing: 0.0625rem;
				margin: 0.4rem 0;
			}
		
			aside>div {
				display: flex;
				align-items: center;
				border: solid var(--color-primary);
				border-width: 0.0625rem 0;
			}
		
			aside>div>div {
				flex: 1;
				padding: 8px;
			}
		
			/* 首页「关于网站与我」灰化版 - 更克制的双线 */
			aside.gray {
				border-color: var(--color-border);
				margin: 0.3rem 0;
			}
			aside.gray>div {
				border-color: var(--color-border);
			}
			aside.gray>div>div {
				padding: 6px;
			}
			
			/* 按钮容器与标签样式（仅保留使用到的） */
			.fav {
				display: flex;
				flex-wrap: wrap;
				gap: 0.4rem;
			}
			
			.fav code {
				padding: 0.2rem 0.5rem;
				border: 1px solid var(--color-border);
				border-radius: 2px;
				font-size: 0.82em;
				color: var(--color-text-tertiary);
				transition: all 0.3s ease;
			}
			.fav code:hover {
				color: #FFFFFF;
				background: rgba(var(--color-primary-rgb), 0.5);
				border-color: rgba(var(--color-primary-rgb), 0.5);
			}
			
			








/* 表格样式 */
/* 表格样式 */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.2em 0;
  font-size: 0.95em;
  border: 0.0625rem solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}
table thead {
  background-color: var(--color-bg-tertiary);
}
table thead th {
  padding: 0.55rem 0.8rem;
  text-align: left;
  font-weight: bold;
  color: var(--color-text-primary);
  border-bottom: 0.125rem solid var(--color-primary);
}
table tbody tr {
  transition: background-color 0.2s ease;
}
table tbody tr:nth-child(even) {
  background-color: rgba(var(--color-primary-rgb), 0.06);
}
table tbody tr:hover {
  background-color: rgba(var(--color-primary-rgb), 0.15);
}
table tbody td {
  padding: 0.5rem 0.8rem;
  vertical-align: top;
  color: var(--color-text-primary);
  border-bottom: 0.0625rem solid var(--color-border);
}







/* 代码样式 */
pre,
code {
  background: var(--backgroundgrid);
  z-index: -1;
  font-size: 0.92em;
}
code {
  padding: 2px 4px;
  color: var(--color-primary)
}
pre {
  padding: 8px;
  overflow: auto;
  max-height: 400px
}
pre code {
  padding: 3px;
  color: var(--color-text-primary)
}

/* 引用样式 */
blockquote {
  margin: 1em 0;
  padding-left: 1.5em;
  border-left: 4px solid rgba(var(--color-primary-rgb), 0.5);
  color: var(--color-text-tertiary);
  letter-spacing: 0.2em;
  line-height: 1.4em
}

li {
  color: var(--color-text-primary);
}




/* ===================== 评论区：简洁版 ===================== */
.comments-section {
  color: var(--color-text-primary);
  line-height: 1.6;
}

.comment-list,
.comment-list li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 评论卡片 - 轻背景无边框 */
.comment-card {
  background: var(--translucent);
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.3rem;
}

/* B站风格评论布局 */
.comment-row {
  display: flex;
  gap: 0.6rem;
}
.comment-avatar img {
  width: 36px;
  height: 36px;
  border-radius: 2px;
  border: 1px solid var(--color-border);
  object-fit: cover;
  flex-shrink: 0;
}
.comment-body {
  flex: 1;
  min-width: 0;
}
.comment-body .comment-author {
  font-weight: bold;
  color: var(--color-primary);
  font-size: 0.85em;
}
.comment-body .comment-author a {
  color: var(--color-primary);
  text-decoration: none;
}
.comment-footer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.1rem;
}
.comment-date {
  font-size: 0.75em;
  color: var(--color-text-tertiary);
}
.comment-reply button {
  background: none;
  border: none;
  color: var(--color-text-tertiary);
  padding: 0;
  font-size: 0.8em;
  cursor: pointer;
  transition: color 0.2s;
}
.comment-reply button:hover {
  color: var(--color-primary);
}

.comment-content {
  color: var(--color-text-primary);
  font-size: 1em;
}
.comment-content p {
  margin: 0.4rem 0;
}
.comment-awaiting {
  color: var(--color-primary);
  font-size: 0.85em;
  margin-top: 0.4rem;
  display: inline-block;
}

/* 子评论 - 轻缩进无边框线 */
.comment-children {
  margin-left: 1rem;
  padding-left: 0.5rem;
  margin-top: 0.6rem;
}

/* 评论表单 */
.comment-form-wrap {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: 0.8rem;
  margin: 1rem 0;
  box-sizing: border-box;
}
.section-title {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.8rem;
  color: var(--color-text-primary);
}
.comment-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.input-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.input-group label {
  font-size: 0.85em;
  color: var(--color-text-tertiary);
}
.input-group input,
.textarea-group textarea {
  box-sizing: border-box;
  width: 100%;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  padding: 0.4rem 0.5rem;
  border-radius: 2px;
  font-family: inherit;
  transition: border-color 0.2s ease;
}
.input-group input:focus,
.textarea-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
.textarea-group {
  margin-bottom: 0.6rem;
}
.textarea-group textarea {
  min-height: 100px;
  resize: vertical;
}
.submit-group {
  text-align: right;
}
.comment-submit {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  padding: 0.5rem 1rem;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9em;
}
.comment-submit:hover {
  background: var(--color-primary);
  color: var(--color-bg-primary);
  border-color: var(--color-primary);
}

/* 评论表单额外字段 */
.comment-extra {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.25s ease;
  margin-top: 0;
}
.comment-form-wrap:focus-within .comment-extra {
  max-height: 500px;
  opacity: 1;
  margin-top: 0.6rem;
}

/* 取消回复 */
#cancel-comment-reply-link {
  font-size: 0.75em;
  color: var(--color-text-tertiary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  transition: color 0.2s;
}
#cancel-comment-reply-link:hover {
  color: var(--color-primary);
}

/* 分页 */
.comment-pagination {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}


.comment-closed {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: 1rem;
  text-align: center;
  color: var(--color-text-tertiary);
  box-sizing: border-box;
}

/* 手机评论缩进更小 */
@media (max-width: 767px) {
  .comment-children {
    margin-left: 0.6rem;
    padding-left: 0.3rem;
  }
  .comment-inputs {
    gap: 0.4rem;
  }
}










ol li,
figcaption p {
  color: var(--color-text-primary);
  line-height: 1.5rem;
  font-variation-settings: 'opsz' 8
}
ol li a:active,
.post a:active,
nav a:active,
header a:active,
a:active {
  transform: scale(0.98);
}

/* ===================== 展开折叠 ===================== */
.container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.container table thead {
  background-color: var(--color-text-tertiary);
  color: #FFFFFF
}
.item {
  border: 0.0625rem solid var(--color-border);
  border-radius: 2px;
  overflow: hidden;
  transition: box-shadow 0.5s ease;
}
.item:hover {
  box-shadow: 0 0 7px var(--backgroundgrid);
}
.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: repeating-linear-gradient(45deg,
              var(--backgroundgrid),
              var(--backgroundgrid) 5px,
              var(--color-bg-primary) 5px,
              var(--color-bg-primary) 10px);
  color: var(--color-text-primary);
}
.item-header p {
  margin: 0;
  color: var(--color-text-primary);
}
.arrow {
  font-size: 20px;
  transition: transform 0.3s ease;
}
.item-content {
  overflow: hidden;
  height: 0;
  transition: height 0.3s ease;
  padding: 0 15px;
}
.item.expanded .arrow {
  transform: rotate(180deg);
}

/* ===================== 文章卡片 ===================== */
.post-card-container {
  width: auto;
  padding: 5px 0;
}
.post-card-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.15rem;
  margin-right: -0.15rem;
}
.post-card-col {
  flex: 0 0 50%;
  max-width: 50%;
  box-sizing: border-box;
  display: flex;
  padding-left: 0.15rem;
  padding-right: 0.15rem;
  margin: 0.3rem 0;
}
/* 卡片外链接：填满整个卡片区域 */
.post-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  text-decoration: none !important;
  color: inherit;
}
.post-card-link:hover {
  text-decoration: none !important;
}
.post-card-link:hover .post-card-title {
  text-decoration: none !important;
}

/* 卡片hover */
.post-card-link:hover .post-card {
  transform: translateY(-5px);
  border-color: rgba(var(--color-primary-rgb), 0.8) !important;
  box-shadow: var(--shadow);
}
.post-card-link:active .post-card {
  transform: translateY(-3px) scale(0.99) !important;
  box-shadow: var(--shadow) !important;
  border-color: rgba(var(--color-primary-rgb), 0.9) !important;
  border-radius: 10px !important;
}

.post-card {
  border: 0.0625rem solid var(--color-border);
  backdrop-filter: blur(7px);
  background: var(--translucent);
  padding: 0.8rem;
  border-radius: 2px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  flex: 1;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translateY(0);
  box-sizing: border-box;
}
/* 卡片hover（暗金边框） */
.post-card:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--color-primary-rgb), 0.8) !important;
  box-shadow: var(--shadow);
}
/* 卡片active（修复异常阴影） */
.post-card:active {
  transform: translateY(-3px) scale(0.99) !important;
  box-shadow: var(--shadow) !important;
  border-color: rgba(var(--color-primary-rgb), 0.9) !important;
  border-radius: 10px !important;
}
.post-card-thumbnail {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 2px;
  margin: 0 0 10px 0;
  filter: grayscale(40%);
  transition: all 0.3s;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.1);
}
.post-card-thumbnail:hover {
  filter: grayscale(0%);
  transform: scale(1.02);
}
/* 卡片标题 */
.post-card-title {
  margin: 5px 0;
  color: var(--color-primary);
  transition: all 0.3s ease;
}
.post-card-link:hover .post-card-title {
  color: rgba(var(--color-primary-rgb), 0.9);
}
/* 卡片元信息（暗金点缀） */
.post-card-meta {
  color: var(--color-text-tertiary) !important;
  font-size: 0.85em;
  margin: 5px 0 0 0;
  transition: color 0.3s ease;
}
.post-card-meta a,
.post-card-category-link {
  color: var(--color-text-tertiary) !important;
  border-bottom: 1px dashed rgba(var(--color-text-tertiary-rgb), 0.5);
  transition: all 0.3s ease;
}
.post-card-meta a:hover,
.post-card-category-link:hover {
  color: rgba(var(--color-primary-rgb), 0.8) !important;
  border-bottom-color: rgba(var(--color-primary-rgb), 0.8);
}
.post-card:hover .post-card-meta {
  color: var(--color-text-secondary) !important;
}
.post-card-excerpt {
  color: var(--color-text-secondary);
  opacity: 0.85;
  flex-grow: 1;
  overflow: hidden;
  margin-bottom: -0.3em;
  font-size: 0.88em;
}

/* 卡片响应式 */
@media (max-width: 767px) {
  .post-card-col {
    flex: 0 0 auto;
    min-width: 100%;
  }
  .post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
  }
  .post-card-excerpt {
    margin: 12px 0 -5px 0;
  }
  .post-card-meta {
    margin: 0;
  }
}

/* ===================== 归档页样式 ===================== */
.archive-title{
  color: var(--color-text-primary);
  margin: -3px auto;
  font-weight: 800;
}
.a-dsescription{
  color: var(--color-text-primary);
  margin: -3px auto;
}

/* 归档 — 左右分栏 */
.archive-all {
  padding-bottom: 0.5rem;
}

/* 左右分栏：年份 | 文章列表 */
.archive-era {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.2rem;
}
.archive-era:last-child {
  margin-bottom: 0;
}
.archive-era-label {
  font-weight: bold;
  font-size: 1em;
  color: var(--color-primary);
  min-width: 3rem;
  text-align: right;
  flex-shrink: 0;
  padding-top: 0.1rem;
}
.archive-era-body {
  flex: 1;
  border-left: 1px solid var(--color-border);
  padding-left: 1rem;
}
.archive-entry {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.2rem 0.3rem;
  border-radius: 2px;
  transition: background 0.2s;
}
.archive-entry:hover {
  background: rgba(var(--color-primary-rgb), 0.04);
}
.archive-entry-date {
  color: var(--color-text-tertiary);
  font-size: 0.72rem;
  min-width: 2.5em;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.archive-entry-link {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.2s;
}
.archive-entry-link:hover {
  color: var(--color-primary);
}
.archive-entry-cat {
  color: var(--color-text-tertiary);
  font-size: 0.7rem;
  flex-shrink: 0;
  margin-left: auto;
  opacity: 0.65;
}
.archive-entry-cat:hover {
  opacity: 1;
}
@media (max-width: 767px) {
  .archive-era {
    flex-direction: column;
    gap: 0.3rem;
  }
  .archive-era-label {
    text-align: left;
  }
  .archive-era-body {
    border-left: none;
    padding-left: 0;
  }
}

/* 归档页网格布局（仿首页三卡片） */
.archive-grid {
  display: grid;
  grid-template-columns: 1fr 30%;
  grid-gap: 1.2rem;
  align-items: start;
}
.archive-grid-main {
  min-width: 0;
}
.archive-grid-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 4.5rem;
}
.archive-grid-side .border-module {
  padding: 0.8rem;
}
.sidebar-label {
  display: block;
  font-weight: bold;
  font-size: 1em;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}
.sidebar-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.3rem 0;
}
.sidebar-row a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.2s;
}
.sidebar-row a:hover {
  color: var(--color-primary);
}
.sidebar-row span {
  color: var(--color-text-tertiary);
  font-size: 0.72rem;
  flex-shrink: 0;
  margin-left: 0.5rem;
}
@media (max-width: 767px) {
  .archive-grid {
    grid-template-columns: 1fr;
  }
  .archive-grid-side {
    position: static;
  }
}
a:active,
.post a:active,
nav a:active,
header a:active,
ul li a:active,
#title p .a:active,
.dropdown-content a:active,
.content-button:active,
#comments .submit:active,
.indexpostli a:active,
.post-card:active {
  background-color: rgba(var(--color-primary-rgb), 0.2) !important;
  color: inherit !important;
  border-color: transparent !important;
  box-shadow: var(--shadow) !important;
  transform: scale(0.98);
  transition: all 0.1s ease-in-out;
  border-radius: 4px !important;
}


#title p .a:active {
  background-color: rgba(var(--color-primary-rgb), 0.9) !important;
  color: var(--color-bg-primary) !important;
  transform: translateY(1px) scale(0.99) !important; /* 下移1px + 轻微缩放 */
}


#title p .a.current:active {
  background-color: rgba(var(--color-primary-rgb), 0.9) !important;
  transform: translateY(1px) scale(0.99) !important; /* 和普通态active一致下移 */
}
.buttonb:active,
#comments .submit:active,
.content-button:active {
  background-color: rgba(var(--color-primary-rgb), 0.8) !important;
  color: #FFFFFF !important;
  transform: scale(0.98) !important;
  border-radius: 6px !important;
}

/* ===================== 移动端适配补充 ===================== */
#y {
  display: auto
}
@media (max-width: 767px) {
  #y {
    display: none
  }
}
#ty {
  display: auto
}
@media (min-width:768px) {
  #ty {
    display: none
  }
}
.frtitle {
  font-size: 2em;
  font-weight: bold;
  margin: 0;
  color: var(--color-border-dark)
}
.frtext {
  margin-right: 5px;
  color: var(--color-text-primary)
}
@media (max-width:767px) {
  .frtitle {
    font-size: 0.9em;
    font-weight: bold;
    margin: 0.5em;
    color: var(--color-border-dark)
  }
  .frtext {
    font-size: 0.8em;
    margin-right: 5px;
    color: var(--color-text-primary)
  }
  #popup {
    width: calc(80%);
    margin: 0.0625rem auto;
  }
}

/* ===================== 弹窗样式 ===================== */
#popup {
  color: var(--color-text-primary);
  position: fixed;
  inset: 0;
  margin: auto;
  z-index: 100;
  width: fit-content;
  height: fit-content;
  max-width: 500px;
  min-width: 280px;
  padding: 20px;
  background-color: var(--color-bg-primary);
  border: 0.0625rem solid var(--color-border);
  border-radius: 2px;
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease-in-out
}
#confirmButton {
  margin-top: 15px;
  cursor: pointer;
  padding: 10px 20px;
  background-color: var(--scrollbar);
  color: var(--color-text-primary);
  border: none;
  border-radius: 2px
}

.indexarrow {
  width: 39px;
  height: 16px;
  margin: 100px auto;
  -webkit-animation: bounce-up 1.3s linear infinite
}
.top {
  width: 100%;
  min-height: 90vh
}
.lishow {
  visibility: visible;
  top: 0;
  opacity: 1
}









/* 海龟汤组件样式 - 适配全局:root变量 */
.turtle-soup {
  position: relative;
  width: calc(100% - 2px);
  margin: 20px auto;
  border: 1px solid var(--color-border); /* 替换原--geist-black，适配全局边框色 */
  border-radius: 2px;
  cursor: pointer;
  transition: transform 0.2s;
  color: var(--color-text-primary); /* 替换原--geist-font，适配全局文字色 */
  background-color: var(--translucent); /* 继承全局半透背景，贴合档案风格 */
  backdrop-filter: blur(7px); /* 和全局卡片样式统一 */
}

.turtle-soup:hover {
  transform: scale(1.005);
  border-color: rgba(var(--color-primary-rgb), 0.8); /* hover时暗金边框，和全局交互统一 */
  box-shadow: var(--shadow); /* 继承全局阴影 */
}

.soup-title {
  padding: 15px;
  background-color: var(--backgroundgrid); /* 复用全局网格背景 */
  font-weight: bold;
  color: var(--color-text-primary);
  border-bottom: 1px dashed rgba(var(--color-text-tertiary-rgb), 0.5); /* 复古虚线分隔 */
}

.soup-content {
  padding: 15px;
  color: var(--color-text-primary);
  line-height: 1.6;
}

.soup-bottom {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  background-color: var(--color-bg-primary); /* 替换原--geist-background-color，适配全局背景 */
  border: 1px solid var(--color-border); /* 替换原--geist-gray，适配全局边框 */
  color: var(--color-text-primary); /* 替换原--geist-font */
  padding: 15px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  border-radius: 2px;
  backdrop-filter: blur(7px);
}

.soup-bottom.show {
  opacity: 1;
  pointer-events: auto;
}

/* 海龟汤内标题样式统一 */
.soup-bottom h4 {
  color: var(--color-text-primary) !important;
  margin: 0 0 10px 0;
  font-weight: normal;
}

/* 海龟汤内文本样式统一 */
.soup-bottom p {
  color: var(--color-text-primary);
  line-height: 1.6;
  margin: 0 0 8px 0;
}

/* 展开折叠组件适配（补充） */
.container .item {
  border: 0.0625rem solid var(--color-border);
  border-radius: 2px;
  overflow: hidden;
  transition: box-shadow 0.5s ease;
  background-color: var(--translucent);
  backdrop-filter: blur(7px);
  margin: 10px 0;
}

.container .item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: repeating-linear-gradient(45deg,
              var(--backgroundgrid),
              var(--backgroundgrid) 5px,
              var(--color-bg-primary) 5px,
              var(--color-bg-primary) 10px);
  color: var(--color-text-primary);
  cursor: pointer;
}

.container .item-content {
  overflow: hidden;
  height: 0;
  transition: height 0.3s ease;
  padding: 0 15px;
  color: var(--color-text-primary);
}

.container .item-content h4 {
  color: var(--color-text-primary) !important;
  margin: 10px 0;
}

.container .item-content p {
  color: var(--color-text-primary);
  line-height: 1.6;
}

.container .arrow {
  font-size: 20px;
  transition: transform 0.3s ease;
  color: var(--color-text-primary);
}

.container .item.expanded .arrow {
  transform: rotate(180deg);
}

/* 触摸设备关闭 hover 位移/阴影 */
@media (pointer: coarse) {
  *:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* 修复触摸设备上 #title 漂移 */
#title {
  transform: translateX(-50%) !important;
}

/* 修复触摸设备上下拉菜单漂移 */
.dropdown-content {
  transform: translateX(-50%) translateY(5px) !important;
}

/* ===================== View Transitions 页面切换动画 ===================== */

/* 块级入场：内容块逐个上浮 */
#content.navigating > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
#content.navigating.page-entered > * {
  opacity: 1;
  transform: translateY(0);
}
#content.navigating.page-entered > *:nth-child(1) { transition-delay: 0.04s; }
#content.navigating.page-entered > *:nth-child(2) { transition-delay: 0.12s; }
#content.navigating.page-entered > *:nth-child(3) { transition-delay: 0.20s; }
#content.navigating.page-entered > *:nth-child(4) { transition-delay: 0.28s; }
#content.navigating.page-entered > *:nth-child(5) { transition-delay: 0.36s; }
#content.navigating.page-entered > *:nth-child(6) { transition-delay: 0.44s; }
#content.navigating.page-entered > *:nth-child(7) { transition-delay: 0.52s; }
#content.navigating.page-entered > *:nth-child(8) { transition-delay: 0.60s; }
#content.navigating.page-entered > *:nth-child(9) { transition-delay: 0.68s; }
#content.navigating.page-entered > *:nth-child(10) { transition-delay: 0.76s; }
#content.navigating.page-entered > *:nth-child(11) { transition-delay: 0.84s; }
#content.navigating.page-entered > *:nth-child(12) { transition-delay: 0.92s; }

/* ===================== 滚动入场动画（Intersection Observer） ===================== */

/* 首次加载时隐藏要滚入的元素，但不影响页面结构 */
.post-card-col:not(.revealed),
.archive-entry:not(.revealed) {
  opacity: 0;
  transform: translateY(18px);
}
.post-card-col,
.archive-entry {
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 进入视口后逐个出现 */
.post-card-col.revealed,
.archive-entry.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* 卡片逐个延迟 */
.post-card-col.revealed:nth-child(1) { transition-delay: 0.04s; }
.post-card-col.revealed:nth-child(2) { transition-delay: 0.10s; }
.post-card-col.revealed:nth-child(3) { transition-delay: 0.16s; }
.post-card-col.revealed:nth-child(4) { transition-delay: 0.22s; }
.post-card-col.revealed:nth-child(5) { transition-delay: 0.28s; }
.post-card-col.revealed:nth-child(6) { transition-delay: 0.34s; }
.post-card-col.revealed:nth-child(7) { transition-delay: 0.40s; }
.post-card-col.revealed:nth-child(8) { transition-delay: 0.46s; }

/* Archive entries staggered by row index */
.archive-entry.revealed:nth-child(1) { transition-delay: 0.03s; }
.archive-entry.revealed:nth-child(2) { transition-delay: 0.06s; }
.archive-entry.revealed:nth-child(3) { transition-delay: 0.09s; }
.archive-entry.revealed:nth-child(4) { transition-delay: 0.12s; }
.archive-entry.revealed:nth-child(5) { transition-delay: 0.15s; }

/* 对不支持 Intersection Observer 的浏览器降级 */
.no-js .post-card-col,
.no-js .archive-entry {
  opacity: 1;
  transform: none;
}

/* 给 #content 命名，让 View Transitions 知道哪个元素要做动画 */
#content {
  view-transition-name: content-area;
  contain: layout;
  transform: translateZ(0);
}

/* GPU 图层隔离 + 透明轮廓防止子像素白线 */
.block,
.post-card,
.dropdown-content {
  transform: translateZ(0);
  outline: 1px solid transparent;
  backface-visibility: hidden;
}