/* Copyright (c) 2026 Clancy. All rights reserved. */

.hero-avatar-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-weather-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  --weather-accent: var(--weather-color, var(--color-accent));
  --weather-icon-color: var(--weather-color, var(--color-accent));
}

.weather-item {
  display: inline-flex;
  align-items: center;
}

.weather-item::after {
  content: '\00B7';
  margin-left: var(--space-2);
  color: var(--weather-accent);
  opacity: 0.6;
}

.weather-item:last-child::after {
  display: none;
}

.weather-text {
  font-size: 1.1rem;
  font-weight: 700;
  font-style: italic;
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  line-height: 1.4;
  padding: 2px 4px;
  margin: -2px -4px;
  /* 默认镂空效果 */
  color: transparent;
  -webkit-text-stroke: 1.5px var(--weather-accent);
  transition: all var(--duration-normal);
}

/* 检测是否是渐变，如果是则使用背景裁剪实现 */
.weather-text[data-gradient="true"] {
  background: var(--weather-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* line-height、padding、margin 继承自基础 .weather-text */
}

.weather-text i[class^="qi-"] {
  font-size: 1.3em;
  color: var(--weather-icon-color);
  -webkit-text-stroke: 0;
  font-style: normal;
}

.weather-item:hover .weather-text {
  color: var(--weather-accent);
  -webkit-text-fill-color: var(--weather-accent);
}

@media (max-width: 768px) {
  .hero-weather-bar {
    gap: var(--space-2);
    margin-top: var(--space-3);
  }
  
  .weather-text {
    font-size: 0.85rem;
    line-height: 1.4;
    padding: 2px 3px;
    margin: -2px -3px;
  }
}

.feed-zone {
  padding: var(--space-10) 0 var(--space-12);
}

.feed-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

@media (min-width: 820px) {
  .feed-layout {
    grid-template-columns: 1fr 1fr;
  }
  
  .feed-layout-single {
    grid-template-columns: 1fr;
  }
}

.feed-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.block-label {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  position: relative;
  padding-left: var(--space-4);
}

.block-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-secondary));
  border-radius: 2px;
}

.block-more {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast);
  margin-left: auto;
}

.block-stats {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-4);
}

.block-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-left: var(--space-3);
}

.stat-item {
  font-size: 12px;
  color: var(--color-text-muted);
}

.stat-divider {
  font-size: 12px;
  color: var(--color-text-muted);
}

.block-more:hover {
  color: var(--color-accent);
  background: rgba(var(--color-accent-rgb, 245, 150, 170), 0.1);
}

/* 近期笔记 / 站点动态：与首页玻璃同一配方——rgba(20,22,34,.32) 压暗填充 +
   blur(20px) saturate(150%) + 20% 白描边 + 同一条投影，与天气卡 .hero-weather-bar、
   瞬间胶囊 .hm-trigger、瞬间卡片 .hm-card 逐值一致。两块并排，一起上玻璃才不歪。

   这块玻璃在明暗两个主题下都是深色的（首页那三处也都没有 [data-theme="light"] 覆盖），
   所以把面板内部用到的颜色令牌就地钉成暗色主题那一套：明亮主题下才不会出现深字压深底。
   钉令牌而不是逐个选择器改 color——面板里的所有内容一次性跟着走，以后加行、加字段
   不用再补覆盖。只钉在面板上，不要往上钉到 .recent-posts-block：「更多 >」在玻璃
   外面，仍然要跟着主题走。

   祖先的 transform 不影响这里：.recent-posts-block 带 data-aos，AOS 的 fade 结束后会
   永久留下 transform: translateZ(0)，但壁纸 #site-bg 是 position:fixed 的兄弟层、不在
   这个变换祖先内，backdrop-filter 的采样照常。动画期间 opacity<1 会短暂形成 backdrop
   root，那 0.4s 里玻璃是平的，落定即恢复。 */
.article-wrapper,
.stream-wrapper {
  --color-text: #f5f5f5;
  --color-text-muted: rgba(255, 255, 255, 0.4);
  --color-border: rgba(255, 255, 255, 0.08);
  --color-bg-soft: var(--gateway-bg-dark-end, #242430);
  --recent-desc-color: #D5DAE2;
  --recent-views-color: #BDC5D1;
  background: rgba(20, 22, 34, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

/* 低端设备不支持毛玻璃时用更实的底色兜底，与 .hero-weather-bar 同处理 */
@supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .article-wrapper,
  .stream-wrapper { background: rgba(20, 22, 34, 0.52); }
}

.article-wrapper {
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
  height: 420px;
}

.article-watermark {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--color-accent);
  opacity: 0.08;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.article-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  overflow-y: auto;
  padding-right: var(--space-2);
  position: relative;
  z-index: 1;
}

.article-feed::-webkit-scrollbar {
  width: 4px;
}

.article-feed::-webkit-scrollbar-track {
  background: var(--color-bg-soft);
  border-radius: 2px;
}

.article-feed::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 2px;
  opacity: 0.5;
}

.article-row {
  transition: all var(--duration-fast);
  border-bottom: 1px dashed var(--color-border);
  padding-bottom: var(--space-3);
  position: relative;
}

.article-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.article-row:hover {
  transform: translateX(4px);
}

/* 序号样式 - 镂空效果 */
.article-index {
  font-size: 1.5rem;
  font-weight: 800;
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--color-accent);
  flex-shrink: 0;
  width: 36px;
  text-align: center;
  transition: all var(--duration-normal);
  opacity: 0.5;
}

.article-row:hover .article-index {
  color: var(--color-accent);
  -webkit-text-fill-color: var(--color-accent);
  opacity: 1;
}

.article-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  overflow: hidden;
}

.article-cover {
  width: 80px;
  height: 56px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}

.article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-normal);
}

.article-row:hover .article-cover img {
  transform: scale(1.08);
}

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

.article-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--duration-fast);
}

.article-row:hover .article-name {
  color: var(--color-accent);
}

/* 置顶文章 */
.article-row-pinned {
  border-bottom-style: solid;
  border-bottom-color: rgba(var(--color-accent-rgb, 245, 150, 170), 0.15);
}

.article-pin {
  position: absolute;
  top: -2px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  z-index: 10;
  transition: all var(--duration-fast);
}

.article-pin svg {
  width: 18px;
  height: 18px;
}

.article-row:hover .article-pin {
  transform: scale(1.15) rotate(-10deg);
}

.article-desc {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.article-views {
  font-size: 12px;
  color: #888;
  font-style: italic;
  flex-shrink: 0;
  margin-left: auto;
  padding-right: 0.15em;
}

/* 近期笔记：仅调整文字颜色；默认暗色，明亮主题覆盖。 */
.recent-posts-block {
  --recent-desc-color: #D5DAE2;
  --recent-views-color: #BDC5D1;
  --recent-more-color: #E2E7EE;
}

[data-theme="light"] .recent-posts-block {
  --recent-desc-color: #3F4650;
  --recent-views-color: #4B5260;
  --recent-more-color: #343B45;
}

.recent-posts-block .article-desc {
  color: var(--recent-desc-color);
}

.recent-posts-block .article-views {
  color: var(--recent-views-color);
}

.recent-posts-block .block-more:not(:hover) {
  color: var(--recent-more-color);
}

.stream-wrapper {
  border-radius: var(--radius-lg);
  height: 420px;
  overflow: hidden;
  position: relative;
}

.stream-watermark {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--color-accent);
  opacity: 0.08;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}

.stream-feed {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-8);
  position: relative;
  z-index: 1;
}

.stream-feed::-webkit-scrollbar {
  width: 4px;
}

.stream-feed::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 2px;
}

.stream-feed::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 2px;
  opacity: 0.5;
}

.stream-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  padding-left: var(--space-4);
  min-width: 0;
}

.stream-row:not(:last-child) {
  border-bottom: 1px dashed var(--color-border);
}

.stream-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    180deg,
    var(--color-accent),
    var(--color-accent-secondary)
  );
}

.stream-row:first-child::before {
  top: 50%;
  border-radius: 1px 1px 0 0;
}

.stream-row:last-child::before {
  bottom: 50%;
  border-radius: 0 0 1px 1px;
}

.stream-marker {
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  border: 2px solid var(--color-accent);
  z-index: 1;
  transition: all var(--duration-fast);
}

.stream-row:hover .stream-marker {
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb, 245, 150, 170), 0.2);
}

.stream-body {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  font-size: 13px;
  line-height: 1.7;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.stream-time {
  font-size: 12px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  margin-left: var(--space-3);
}

.stream-verb {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.stream-object {
  color: var(--color-text);
  font-weight: 500;
  transition: color var(--duration-fast);
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.stream-object.stream-moment {
  display: inline-block;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.stream-object.stream-moment * {
  display: inline;
  margin: 0;
  padding: 0;
}

.stream-object::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform var(--duration-fast);
}

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

.stream-object:hover::after {
  transform: scaleX(1);
}

.memo-zone {
  margin-top: var(--space-10);
}

.memo-zone .block-head {
  justify-content: flex-start;
  margin-bottom: var(--space-4);
}

.memo-nav {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
  flex-shrink: 0;
}

.memo-nav-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-bg-soft);
  color: var(--color-text-secondary);
  font-size: 14px;
  transition: all var(--duration-fast);
  border: 1px solid var(--color-border);
}

.memo-nav-btn:hover {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.memo-swiper {
  overflow: hidden;
  border-radius: var(--radius-lg);
  touch-action: pan-y;
}

.memo-swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
  will-change: transform;
}

/* 弱网/脚本未就绪时，保证横向布局不塌成单列 */
.memo-swiper:not(.swiper-initialized) .swiper-wrapper {
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.memo-swiper:not(.swiper-initialized) .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.memo-swiper .swiper-slide {
  flex: 0 0 auto;
  width: auto;
}

.memo-card {
  padding: var(--space-6);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

/* 图片卡片样式 */
.memo-card.photo-card {
  padding: 0;
  height: 140px;
  width: clamp(140px, 18vw, 260px);
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  /* 仅过渡 hover 实际变化的属性，避免 all 在触控滑动时触发不必要的重绘 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.memo-card.photo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.memo-photo {
  display: block;
  height: 100%;
  width: 100%;
  max-width: none;
  min-width: 0;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
  cursor: zoom-in;
}

.memo-card.photo-card:hover .memo-photo {
  transform: scale(1.08);
}

.photo-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-4);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.memo-card.photo-card:hover .photo-overlay {
  opacity: 1;
  transform: translateY(0);
}/* 右下角分组标签 */
.photo-group-tag {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: rgba(0, 0, 0, 0.6);
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  color: #fff;
  font-weight: 500;
  transition: all 0.3s ease;
  z-index: 2;
}

.memo-card.photo-card:hover .photo-group-tag {
  background: var(--color-accent);
  transform: scale(1.05);
}

/* 右上角时间 */
.photo-time {
  position: absolute;
  right: var(--space-3);
  top: var(--space-3);
  padding: 2px var(--space-2);
  background: rgba(0, 0, 0, 0.5);
  border-radius: var(--radius-sm);
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.9);
  z-index: 2;
}

/* 底部图片名称 */
.photo-name {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  max-width: 60%;
  padding: 2px var(--space-2);
  background: rgba(0, 0, 0, 0.5);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
}


.life-zone {
  margin-top: var(--space-10);
}

.life-zone .block-head {
  margin-bottom: var(--space-4);
}

.life-swiper {
  overflow: hidden;
  touch-action: pan-y;
}

.life-swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
  will-change: transform;
}

.life-swiper:not(.swiper-initialized) .swiper-wrapper {
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.life-swiper:not(.swiper-initialized) .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.life-swiper .swiper-slide {
  flex: 0 0 auto;
  width: clamp(135px, 18vw, 260px);
  height: 140px;
}

.life-card {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  display: block;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.life-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.life-card:hover img {
  transform: scale(1.08);
}

.life-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-3);
}

.life-overlay::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
  mask-image: linear-gradient(to top, black 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
  z-index: 0;
}

.life-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
  position: relative;
  z-index: 1;
}

.life-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.life-date {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  z-index: 2;
}

/* 生活回想视频样式 */
.life-card .life-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.life-card:hover .life-video {
  transform: scale(1.08);
}

.life-card .video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  z-index: 3;
  transition: all 0.3s ease;
}

.life-card:hover .video-play-icon {
  background: rgba(0, 0, 0, 0.7);
  transform: translate(-50%, -50%) scale(1.1);
}

/* 生活回想 - 纯文字瞬间卡片（无图片/视频时的展示样式，跟随主题渐变色与明暗切换） */
.life-card-text {
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--color-accent) 85%, black 15%) 0%,
    color-mix(in srgb, var(--color-accent-secondary) 80%, black 20%) 100%);
}

.life-card-text::before {
  content: '\201C';
  position: absolute;
  top: -4px;
  left: 44px;
  font-size: 54px;
  line-height: 1;
  font-family: Georgia, 'Times New Roman', serif;
  color: rgba(255, 255, 255, 0.14);
  pointer-events: none;
  z-index: 0;
}

.life-card-text .life-overlay::before {
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, transparent 100%);
}

.life-card-text:hover {
  filter: brightness(1.08);
}

.life-desc-multi {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.5;
  text-overflow: ellipsis;
}

.hero {
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100lvh - var(--header-height));
  height: calc(100vh - var(--header-height));
  height: calc(100lvh - var(--header-height));
  max-height: calc(100vh - var(--header-height));
  max-height: calc(100lvh - var(--header-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-5);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .hero-profile {
    flex-direction: row;
    text-align: left;
    justify-content: center;
    width: 100%;
    max-width: 900px;
    gap: var(--space-8);
  }
  
  .hero-avatar {
    margin-left: 0 !important;
  }
  
  .hero-info {
    margin-right: 0 !important;
  }
}

.hero-avatar {
  position: relative;
  width: 220px;
  height: 220px;
  flex-shrink: 0;
}

.hero-avatar img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 4px solid #ffffff;
  box-shadow: 
    0 0 0 4px rgba(255, 255, 255, 0.5),
    0 20px 40px rgba(0, 0, 0, 0.3);
}

.hero-avatar::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--avatar-glow, var(--color-accent)), var(--avatar-glow, var(--color-accent-secondary)));
  opacity: 0.3;
  z-index: -1;
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.05); opacity: 0.5; }
}

.hero-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 560px;
}

@media (min-width: 768px) {
  .hero-info {
    align-items: flex-start;
  }
}

.hero-name {
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1.2;
  padding-right: 0.15em;
  white-space: normal;
  word-break: break-word;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .hero-name {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.typewriter-cursor {
  display: inline-block;
  width: 3px;
  height: 0.85em;
  margin-left: 0.15em;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-secondary));
  animation: blink 1s step-end infinite;
  position: relative;
  top: 0.05em;
  border-radius: 2px;
}

[data-theme="light"] .typewriter-cursor {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-secondary));
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.hero-tagline {
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-weight: 600;
  color: var(--color-text-secondary);
  max-width: 450px;
}

[data-theme="light"] .hero-tagline {
  color: rgba(30, 30, 30, 0.8);
}

.hero-bio {
  font-size: 15px;
  font-weight: 400;
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
  margin-top: var(--space-1);
  max-width: 480px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-theme="light"] .hero-bio {
  color: rgba(20, 20, 20, 0.85);
  text-shadow: none;
  font-weight: 500;
  text-decoration-color: rgba(0, 0, 0, 0.2);
}

/* 自定义颜色：覆盖亮色/暗色主题默认样式，颜色固定不随主题切换 */
.hero-bio-custom,
[data-theme="light"] .hero-bio-custom {
  text-shadow: none;
  text-decoration-color: transparent;
}

.hero-social {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text);
  transition: all var(--duration-fast);
}

[data-theme="light"] .social-link {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--color-text);
}

.social-link:hover {
  color: #fff;
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.social-link svg {
  width: 20px;
  height: 20px;
}

.social-link .iconify,
.social-link svg.iconify {
  width: 20px;
  height: 20px;
  color: inherit;
}

.sponsor-link {
  position: relative;
  cursor: pointer;
}

.sponsor-qrcode {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
  z-index: 100;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-secondary) 100%);
  padding: 8px;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
}

.sponsor-qrcode::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--color-accent);
}

.sponsor-link:hover .sponsor-qrcode {
  opacity: 1;
  visibility: visible;
}

.sponsor-qrcode-img {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  background: white;
  border-radius: var(--radius-md);
  padding: 4px;
}

.sponsor-qrcode-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.sponsor-qrcode-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: white;
}

.sponsor-qrcode-title {
  font-size: 14px;
  font-weight: 600;
  color: white;
  margin: 0;
}

.sponsor-qrcode-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  line-height: 1.4;
}

.compass-zone {
  padding: var(--space-12) 0;
}

.hero-compass {
  margin-top: 0;
  text-align: center;
}

.compass-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.compass-subtitle {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.compass-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  max-width: 900px;
  margin: 0 auto;
}

.compass-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  transition: all var(--duration-normal);
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 160px;
}

/* 卡片底部装饰线 */
.compass-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-secondary, var(--color-accent)));
  transition: all var(--duration-normal);
  transform: translateX(-50%);
}

.compass-item:hover {
  color: var(--color-text);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.compass-item:hover::after {
  width: 60%;
}

.compass-item svg {
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  transition: all var(--duration-normal);
}

/* 自定义 icon class 图标 */
.compass-item .nav-custom-icon {
  font-size: 20px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent);
  transition: all var(--duration-normal);
}

/* 图标悬停动效 */
.compass-item:hover svg,
.compass-item:hover .nav-custom-icon {
  transform: scale(1.15) rotate(-5deg);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-full);
  transition: all var(--duration-fast);
}

.btn-primary {
  background: var(--color-accent);
  color: #fff;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 150, 170, 0.3);
}

[data-theme="light"] .btn-primary:hover {
  box-shadow: 0 8px 20px rgba(51, 166, 184, 0.3);
}

.btn svg {
  width: 16px;
  height: 16px;
}

.hero-scroll {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: 12px;
  animation: bounce 2s ease-in-out infinite;
}

.hero-scroll .scroll-arrow {
  width: 32px;
  height: 32px;
  color: var(--color-text-muted);
}

.hero-scroll svg {
  width: 32px;
  height: 32px;
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

.hero-stats {
  position: absolute;
  left: 30px;
  bottom: 30px;
  display: flex;
  gap: var(--space-3);
  z-index: 10;
}

.stat-label {
  font-size: 13px;
  color: var(--color-text-muted);
}

.stat-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}


@media (max-width: 768px) {
  .hero {
    /* 100vh 兜底：旧机型取大视口同样铺满；iOS 15.4+ 用 lvh 防底部露白 */
    min-height: 100vh;
    min-height: 100lvh;
    height: 100vh;
    height: 100lvh;
    max-height: 100vh;
    max-height: 100lvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-4);
  }
  
  .theme-decor {
    display: none !important;
  }
  
  .hero-avatar {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--space-4);
  }
  
  .hero-profile {
    flex-direction: column;
    text-align: center;
    gap: 0;
  }
  
  .hero-info {
    align-items: center;
    margin: 0;
  }
  
  .hero-name {
    font-size: 2rem;
    margin-bottom: var(--space-2);
  }
  
  .hero-tagline {
    font-size: 1rem;
    margin-bottom: var(--space-3);
  }
  
  .hero-bio {
    font-size: 14px;
    max-width: 100%;
    text-align: center;
    line-height: 1.8;
    margin-bottom: var(--space-4);
  }
  
  .hero-social {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
  }
  
  .social-link {
    width: 40px;
    height: 40px;
  }
  
  .social-link svg {
    width: 20px;
    height: 20px;
  }
  
  .social-link .iconify,
  .social-link svg.iconify {
    width: 20px;
    height: 20px;
  }
  
  .hero-scroll {
    display: flex;
    bottom: 30px;
    /* hero 高度为 lvh，需把指示器抬到浮动工具栏之上：lvh-svh 即工具栏高度 */
    bottom: calc(100lvh - 100svh + 20px);
  }
  
  .compass-zone {
    padding: var(--space-6) 0;
  }
  
  .compass-title {
    font-size: 1.1rem;
    margin-bottom: var(--space-1);
  }
  
  .compass-subtitle {
    font-size: 11px;
    margin-bottom: var(--space-3);
  }
  
  .compass-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
  }
  
  .compass-item {
    padding: var(--space-2) var(--space-3);
    font-size: 13px;
    width: auto;
    max-width: none;
    flex: 0 0 auto;
  }
  
  .compass-item svg {
    width: 14px;
    height: 14px;
  }
  
  .compass-item .nav-custom-icon {
    font-size: 14px;
    width: 14px;
    height: 14px;
  }
  
  .feed-zone {
    padding: var(--space-6) 0;
  }
  
  .life-zone {
    margin-top: var(--space-5);
  }

  .life-swiper .swiper-slide {
    width: 180px;
    height: 100px;
  }

  .life-title {
    font-size: 11px;
  }

  .life-desc {
    font-size: 9px;
  }

  .life-date {
    font-size: 8px;
    padding: 1px 4px;
    top: 4px;
    right: 4px;
  }

  .life-overlay {
    padding: var(--space-2);
  }
  
  .feed-layout {
    grid-template-columns: 1fr !important;
    gap: var(--space-5);
  }
  
  .article-cover {
    display: none;
  }
  
  /* 序号在移动端保留，只是按小字号重新配比：桌面那套 1.5rem / 1.2px 描边压到
     12px 的标题旁边会糊成一团，这里降到 15px、描边收到 0.8px，并把宽度从 36px
     收到 22px（封面已经 display:none，横向本来就是省出来的）。
     手机没有 hover，:hover 那档提亮永远不会触发，所以静止态直接给到 0.6——
     桌面的 0.5 是「等 hover 提亮」的起点，照搬过来会偏灰。 */
  .article-index {
    font-size: 15px;
    -webkit-text-stroke: 0.8px var(--color-accent);
    width: 22px;
    margin-right: 8px;
    opacity: 0.6;
  }
  
  .article-link {
    padding-left: 0;
    gap: 0;
  }
  
  .article-detail {
    padding-left: 0;
    flex: 1;
  }
  
  .block-head {
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
  }
  
  .block-label {
    font-size: 0.95rem;
  }
  
  .block-subtitle {
    font-size: 10px;
  }
  
  .block-stats {
    font-size: 10px;
  }
  
  .block-more {
    font-size: 11px;
  }
  
  .memo-zone {
    margin-top: var(--space-5);
  }
  
  .memo-card {
    min-width: 240px;
    padding: var(--space-3);
  }
  
  .memo-card.photo-card {
    height: 100px;
    width: 180px;
    min-width: 180px;
  }

  .memo-photo {
    max-width: none;
    min-width: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .photo-time {
    font-size: 0.55rem;
    padding: 1px var(--space-1);
    right: var(--space-2);
    top: var(--space-2);
  }
  
  .photo-name {
    font-size: 0.6rem;
    left: var(--space-2);
    bottom: var(--space-2);
    padding: 1px var(--space-1);
  }
  
  .photo-group-tag {
    font-size: 0.6rem;
    right: var(--space-2);
    bottom: var(--space-2);
    padding: var(--space-1) var(--space-2);
  }

.memo-nav {
    gap: var(--space-1);
  }
  
  .memo-nav-btn {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  
  /* 首页专属留白，旧样式在 PJAX 转场暂留期间也不能影响目标页。 */
  .home-page .container {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  
  .article-wrapper,
  .stream-wrapper {
    padding: var(--space-2);
    height: 300px;
    border-radius: var(--radius-md);
  }

  .article-feed {
    gap: var(--space-1);
  }

  .article-row {
    padding: var(--space-1) 0;
    padding-bottom: var(--space-1);
  }

  .article-name {
    font-size: 12px;
    margin-bottom: 0;
  }

  .article-desc {
    font-size: 10px;
  }

  .article-views {
    font-size: 9px;
  }

  .stream-feed {
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  }

  .stream-row {
    padding: var(--space-1) 0;
    padding-left: 16px;
  }

  .stream-marker {
    width: 8px;
    height: 8px;
    left: -3px;
  }

  .stream-body {
    font-size: 11px;
  }

  .stream-verb {
    font-size: 11px;
  }

  .stream-object {
    font-size: 11px;
  }

.stream-time {
    font-size: 9px;
  }

  .article-watermark,
  .stream-watermark {
    font-size: 60px;
    opacity: 0.015;
  }
}

@media (max-width: 480px) {
  .compass-item {
    padding: var(--space-1) var(--space-2);
    font-size: 12px;
  }
  
  .hero-avatar {
    width: 100px;
    height: 100px;
  }
  
  .hero-name {
    font-size: 1.8rem;
  }
  
  .hero-tagline {
    font-size: 0.95rem;
  }
  
  .hero-bio {
    font-size: 13px;
  }
  
  .social-link {
    width: 28px;
    height: 28px;
  }
  
  .social-link svg {
    width: 14px;
    height: 14px;
  }
  
  .social-link .iconify,
  .social-link svg.iconify {
    width: 14px;
    height: 14px;
  }
  
  .memo-card {
    min-width: 160px;
    padding: var(--space-2);
  }

  .memo-card.photo-card {
    height: 85px;
    min-width: 0;
  }

.life-swiper .swiper-slide {
    width: clamp(135px, 18vw, 260px);
    height: 85px;
  }

  .life-date {
    font-size: 7px;
    padding: 1px 3px;
    top: 3px;
    right: 3px;
  }
  
  .life-title {
    font-size: 10px;
  }
  
  .life-desc {
    font-size: 8px;
  }
  
  .block-label {
    font-size: 1rem;
  }
  
  .article-name {
    font-size: 13px;
  }
  
  .article-desc {
    font-size: 11px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .theme-decor {
    right: 50px;
  }
  
  .theme-decor img {
    height: calc(100vh - 200px);
  }
  
  .hero-avatar {
    width: 180px;
    height: 180px;
  }  
  .article-cover {
    width: 80px;
    height: 60px;
  }
  
  .article-cover img {
    width: 80px;
    height: 60px;
  }
}


/* ========================================
   卡片行为角标：点之前就知道会「放大」还是「跳走」
   ======================================== */
.card-sig {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  font-style: normal;
  color: #fff;
  background: rgba(0, 0, 0, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--duration-fast), transform var(--duration-fast);
  pointer-events: none;
}

.memo-card:hover .card-sig,
.life-card:hover .card-sig,
.memo-card:focus-visible .card-sig,
.life-card:focus-visible .card-sig {
  opacity: 1;
  transform: scale(1);
}

/* 会就地放大的卡片，光标也说明这件事 */
.card-zoom { cursor: zoom-in; }

.memo-card:focus-visible,
.life-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* 近期笔记是列表行，形态本身已经说明是「跳转」，只在 hover 时补一个轻微的箭头 */
.article-link::after {
  content: '↗';
  flex-shrink: 0;
  margin-left: 8px;
  font-size: 12px;
  color: var(--color-accent);
  opacity: 0;
  transition: opacity var(--duration-fast);
}

.article-row:hover .article-link::after {
  opacity: 0.85;
}

/* ==========================================================================
   首页 Hero 重构 — 左文右像 / 天气与小标题顶对齐 / Discover 与 Latest 同构行
   仅作用于首页 .hero，不影响其它页面。
   保留：背景图滚动模糊淡出、头像渐变光环与呼吸动画、导航栏、风向标及其下四个模块
   ========================================================================== */

/* 可读性柔焦：背景图首屏完全清晰，左侧文字需要压暗。用一团【以左侧文字区为中心、
   向四周（含屏幕顶边与左边缘）均匀淡出】的径向柔光，替代原先从视口顶/左边缘起手、
   满压暗再硬切的整块横向渐变——左上角不再出现色差明显的黑色色块，文字区仍保留足够
   压暗保证白字可读（中心约 0.26，轻量柔焦），且径向渐变天然向各方向衰减，无需再叠纵向 mask。 */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(78% 68% at 20% 45%,
    rgba(0, 0, 0, 0.26) 0%,
    rgba(0, 0, 0, 0.11) 42%,
    rgba(0, 0, 0, 0.03) 62%,
    transparent 78%);
}

.hero > .container {
  position: relative;
  z-index: 1;
  width: 100%;          /* .hero 是 column flex + align-items:center，不写就会收缩成内容宽 */
}

/* ---------- 两栏骨架 ---------- */
.hero-profile {
  display: flex;
  align-items: stretch;          /* 关键：两栏共用同一条顶边，天气卡才能与小标题对齐 */
  justify-content: space-between;
  gap: var(--space-8);
  width: 100%;
  max-width: 1060px;
  margin: 0 auto var(--space-8);
  text-align: left;
}

.hero-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 auto;
  min-width: 0;
  max-width: 620px;
}

.hero-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  flex: 0 0 auto;
  width: 230px;
}

.hero-headline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.hero-random-pool { display: none !important; }

/* ---------- 小标题 ---------- */
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-accent) 55%, #ffffff);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4);
}

.hero-kicker::before {
  content: '';
  width: 24px;
  height: 1px;
  flex-shrink: 0;
  background: currentColor;
  opacity: 0.8;
}

/* ---------- 名字 / 签名 / 简介 ---------- */
.hero .hero-name {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1.05;
  margin: 0;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}

.hero .hero-tagline,
[data-theme="light"] .hero .hero-tagline {
  font-size: 16px;
  max-width: none;
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 12px rgba(0, 0, 0, 0.4);
}

.hero .hero-bio,
[data-theme="light"] .hero .hero-bio {
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.9;
  max-width: 520px;
  margin: 2px 0 0;
  color: rgba(255, 255, 255, 0.82);
  text-align: left;
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 12px rgba(0, 0, 0, 0.4);
  -webkit-line-clamp: 2;
}

/* ---------- Discover / Latest 双列 ---------- */
.hero-cols {
  display: grid;
  /* 主次分栏：Latest 是主角（内容），Discover 是次要入口 */
  grid-template-columns: 0.86fr 1.14fr;
  gap: 0 var(--space-5);
  align-items: stretch;           /* 两列等高，中间的竖分割线才能撑满 */
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.hero-col { min-width: 0; }

.hero-col-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 9.5px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* 保留主题色相，但提亮到能压在深色玻璃板上（浅色主题的 #8b5cf6 原本读不出） */
  color: color-mix(in srgb, var(--color-accent) 50%, #ffffff);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* 标签右侧的渐隐细线：不加分隔线也能看出两列的边界 */
.hero-col-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent);
}

/* 两列共用同一种行：左正文 12px + 右次要信息 10px */
.hero-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  transition: padding var(--duration-fast) var(--ease-out);
}

.hero-row-ico { grid-template-columns: auto 1fr auto; }

.hero-row:last-child { border-bottom: none; }

.hero-row:hover { padding-left: 5px; }

.hero-row b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* 不再强制 min-height:3em：短标题不再拖一块空白，行高按内容自然收缩 */
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.hero-row small {
  font-size: 10px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-top: 0.32em;
  color: rgba(255, 255, 255, 0.74);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.hero-row-ico-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-top: 0.18em;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--color-accent) 55%, #ffffff);
}

.hero-row-ico-box svg { width: 14px; height: 14px; }

.hero-row:hover b { color: #fff; }

/* Discover 首行：主题色高亮，但结构与其它行完全一致，不破坏网格 */
.hero-row-act {
  margin: 0 -10px;
  padding: 8px 10px;
  border-bottom-color: transparent;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-accent) 24%, transparent),
    transparent);
}

.hero-row-act b { color: #fff; font-weight: 700; }

/* Discover 首行「GO」标签使用主题色 + 微光晕 */
.hero-row-act small {
  color: var(--color-accent);
  text-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.45);
}

.hero-row-act:hover { padding-left: 15px; }
.hero-row-empty b { min-height: 0; opacity: 0.7; }

/* ---------- 社交 ---------- */
.hero .hero-social { justify-content: flex-start; margin-top: var(--space-3); }

/* ---------- 天气卡（右栏第一个元素，与小标题同起点） ---------- */
.hero .hero-weather-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 13px 16px;
  border-radius: var(--radius-lg);
  background: rgba(20, 22, 34, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

/* 低端设备不支持毛玻璃时，用更实的底色兜底，与 .hero-cols 同处理 */
@supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .hero .hero-weather-bar { background: rgba(20, 22, 34, 0.52); }
}

.hero .weather-current {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.hero .weather-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  text-align: center;
}

.hero .hero-weather-bar .weather-item {
  margin: 0;
  padding: 0;
  max-width: 100%;
}

.hero .hero-weather-bar .weather-item::after { content: none; }

.hero .hero-weather-bar .weather-text {
  -webkit-text-stroke: 0;
  font-style: normal;
  padding: 0;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.hero .weather-temp .weather-text {
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--weather-accent);
}

.hero .weather-temp { flex-shrink: 0; }
.hero .weather-cond { min-width: 0; }

.hero .hero-weather-bar .weather-cond {
  position: relative;
  padding-left: 8px;
}

.hero .hero-weather-bar .weather-cond .weather-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--weather-accent);
  white-space: normal;
  overflow-wrap: anywhere;
}

.hero .weather-meta .weather-text {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
  font-variant-numeric: tabular-nums;
}

.hero .weather-cond .weather-text i[class^="qi-"] {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--weather-icon-color);
  margin-right: 0;
  padding-right: 8px;
}

/* 分隔线保留原高度的 40%，在各自信息块中垂直居中。 */
.hero .hero-weather-bar .weather-cond::before,
.hero .weather-cond .weather-text i[class^="qi-"]::after {
  content: '';
  position: absolute;
  top: 30%;
  width: 1px;
  height: 40%;
  background: color-mix(in srgb, var(--weather-icon-color) 35%, transparent);
  pointer-events: none;
}
.hero .hero-weather-bar .weather-cond::before { left: 0; }
.hero .weather-cond .weather-text i[class^="qi-"]::after { right: 0; }

.hero .hero-weather-bar .weather-item:hover .weather-text {
  color: var(--weather-accent);
  -webkit-text-fill-color: var(--weather-accent);
}

/* ---------- 头像：光环 / 白边 / 呼吸动画完全沿用，只负责在剩余空间里居中 ---------- */
.hero .hero-avatar-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto 0;                 /* 天气卡关闭时头像自动重新居中，无需额外 fallback */
}

.hero .hero-avatar { width: 230px; height: 230px; }

/* --------------------------------------------------------------------------
   Discover / Latest 玻璃底板（≥820px）
   背景图首屏完全清晰，浅色照片上白字读不出来；把双列整体放到一块毛玻璃上，
   与移动端 Latest 卡片同一套语言，且换任何背景图都成立。
   -------------------------------------------------------------------------- */
@media (min-width: 820px) {
  .hero-cols {
    margin-top: var(--space-3);
    padding: 16px 18px 6px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: var(--radius-lg);
    background: rgba(20, 22, 34, 0.32);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  }

  /* 低端设备不支持毛玻璃时，用更实的底色兜底，保证仍然读得清 */
  @supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
    .hero-cols { background: rgba(20, 22, 34, 0.52); }
  }

  /* 两列逐行对齐的关键：所有行同一个固定行高，标题一律单行 */
  .hero-cols .hero-row {
    height: 34px;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
  }

  .hero-cols .hero-row small { padding-top: 0; }

  /* ---- Discover（左列）：单行紧凑，整行是一个可 hover 的圆角块 ---- */
  .hero-col:first-child .hero-row {
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
    border-bottom: none;          /* 入口列不再用分隔线，靠 hover 块表达可点 */
    border-radius: 8px;
  }

  .hero-col:first-child .hero-row:hover {
    padding-left: 12px;
    background-color: rgba(255, 255, 255, 0.07);   /* 用 background-color，别盖掉首行的渐变 */
  }

  .hero-col:first-child .hero-row b {
    display: block;               /* 入口文案本来就短，单行省略即可 */
    min-height: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero-col:first-child .hero-row-ico-box { margin-top: 0; }

  /* ---- Latest（右列）：一条竖线把主次两栏分开 ---- */
  .hero-col:last-child {
    padding-left: var(--space-5);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
  }

  /* 右列和左列同一种可点反馈：同样的圆角块 + 同样的底色 */
  .hero-col:last-child .hero-row {
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 8px;
    border-bottom-color: rgba(255, 255, 255, 0.10);
  }
  .hero-col:last-child .hero-row small { color: rgba(255, 255, 255, 0.62); }

  /* Latest 标题固定单行：行高与左列一致，两列才能逐行对齐 */
  .hero-col:last-child .hero-row b {
    display: block;
    min-height: 0;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
  }

  /* hover 时整行滚动的是这个内层 span，位移量由 JS 量出来写进 --marquee-shift */
  .hero-col:last-child .hero-row b > .hero-row-text {
    display: inline-block;
    transition: transform 0.45s ease;      /* 移开时快速归位 */
  }

  /* 移上去时按 JS 算出的时长慢慢走完，走的过程本身就是「读完标题」 */
  .hero-col:last-child .hero-row:hover b > .hero-row-text {
    transition-duration: var(--marquee-duration, 1.4s);
    transition-timing-function: ease-in-out;
  }

  /* 右端渐隐：比省略号更轻，也告诉人「后面还有」。JS 量出溢出的行才加 is-marquee */
  .hero-col:last-child .hero-row.is-marquee b {
    -webkit-mask-image: linear-gradient(to right, #000 78%, transparent 100%);
    mask-image: linear-gradient(to right, #000 78%, transparent 100%);
  }

  /* 滚动中改成左端渐隐：被推到左边的开头部分淡出，尾巴完整可读 */
  .hero-col:last-child .hero-row.is-marquee:hover b {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%);
    mask-image: linear-gradient(to right, transparent 0%, #000 7%);
  }

  .hero-col:last-child .hero-row.is-marquee:hover b > .hero-row-text {
    transform: translateX(var(--marquee-shift, 0px));
  }

  /* 右列 hover：底色与左列一致；分隔线让位给底块；padding 保持不变，
     否则行宽会变、上面量出来的滚动距离就差了这几个像素 */
  .hero-col:last-child .hero-row:hover {
    padding-left: 8px;
    background-color: rgba(255, 255, 255, 0.07);
    border-bottom-color: transparent;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-col:last-child .hero-row b > .hero-row-text { transition: none; }
  }
}

/* ==========================================================================
   平板 · 横屏（820 – 1024px）：与桌面同结构，整体降一档
   ========================================================================== */
@media (min-width: 820px) and (max-width: 1024px) {
  .hero-profile { max-width: 820px; gap: var(--space-6); }
  .hero-main { max-width: 470px; gap: var(--space-2); }
  .hero-aside { width: 180px; gap: var(--space-3); }
  .hero .hero-bio { max-width: 430px; }
  .hero .hero-avatar { width: 180px; height: 180px; }
  .hero .hero-name { font-size: clamp(2rem, 4.4vw, 2.75rem); }
  .hero .hero-tagline { font-size: 14.5px; }
  .hero .hero-bio { font-size: 12px; max-width: 352px; }
  .hero-cols { gap: 0 var(--space-4); }
  .hero-col:last-child { padding-left: var(--space-4); }
  .hero .hero-weather-bar { padding: 11px 13px; }
  .hero .weather-temp .weather-text { font-size: 21px; }
  .hero .social-link { width: 34px; height: 34px; }
}

/* ==========================================================================
   纵向骨架（竖屏平板 + 手机）：头像与名字并排 → 简介 → 天气卡 → 内容 → 社交
   .hero-main / .hero-aside 用 display:contents 拆壳，孙元素直接参与 grid 排布
   ========================================================================== */
@media (max-width: 819px) {
  .hero {
    min-height: 100vh;
    height: auto;
    max-height: none;
  }

  .hero::before {
    background: linear-gradient(170deg,
      rgba(0, 0, 0, 0.34) 0%,
      rgba(0, 0, 0, 0.20) 45%,
      rgba(0, 0, 0, 0.42) 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, 0) 100%);
  }

  .hero-profile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* 瞬间胶囊排在社交图标之前：胶囊与上面的 Latest 卡同属「站内内容」，
       社交图标是离站 / 订阅出口，出口收尾。同时宽度节奏由 卡 → 胶囊 → 圆钮
       单调递减，三个小圆钮不再夹在两个宽块中间像分隔线。
       首屏预算上也更稳：下移的只是三个 40px 的小圆钮，不是主 CTA「随机一篇」。
       注意「随机一篇」在 .hero-cols 内部（.hero-col:first-child, order:2），
       胶囊是 .hero-profile 的平级网格项，插不到 cols 内部两列之间。 */
    grid-template-areas:
      "avatar   headline"
      "bio      bio"
      "weather  weather"
      "cols     cols"
      "moments  moments"
      "social   social";
    align-items: center;
    column-gap: var(--space-4);
    row-gap: var(--space-4);
    max-width: 620px;
    text-align: left;
    transform: none;
  }

  .hero-main,
  .hero-aside { display: contents; }

  .hero-headline            { grid-area: headline; gap: var(--space-1); }
  .hero .hero-bio           { grid-area: bio; max-width: none; margin: 0; }
  .hero-cols                { grid-area: cols; }
  .hero .hero-social        { grid-area: social; justify-content: flex-start; }
  .hero .hero-weather-bar   { grid-area: weather; width: 100%; }
  .hero .hero-avatar-wrapper{ grid-area: avatar; margin: 0; }
  .hero .hero-moments       { grid-area: moments; width: 100%; margin-top: 0; }

  /* Latest 变成一张玻璃卡，Discover 只保留「随机一篇」并按钮化，顺序：Latest → 按钮 */
  .hero-cols {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .hero-col { width: 100%; }

  .hero-col:first-child { order: 2; }

  .hero-col:last-child {
    order: 1;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    background: rgba(20, 22, 34, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
  }

  .hero-col:first-child .hero-col-label { display: none; }

  /* 三个入口横排一行：随机一篇是主按钮，全部文章 / 标签与分类压成图标圆钮 */
  .hero-col:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .hero-col:first-child .hero-row:not(.hero-row-act) {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(20, 22, 34, 0.40);          /* 同样是压暗型玻璃 */
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
  }

  .hero-col:first-child .hero-row:not(.hero-row-act):hover { padding-left: 0; }

  /* 文案不显示但保留给读屏软件（配合 <a title> 用），不要换成 display:none */
  .hero-col:first-child .hero-row:not(.hero-row-act) b {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .hero-col:first-child .hero-row:not(.hero-row-act) .hero-row-ico-box {
    width: 17px;
    height: 17px;
    margin: 0;
    color: color-mix(in srgb, var(--color-accent) 60%, #ffffff);
  }

  .hero-col:first-child .hero-row:not(.hero-row-act) .hero-row-ico-box svg { width: 16px; height: 16px; }

  /* 数字挂成右上角角标 */
  .hero-col:first-child .hero-row:not(.hero-row-act) small {
    position: absolute;
    top: -5px;
    right: -7px;
    padding: 2px 5px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: var(--radius-full);
    background: rgba(20, 22, 34, 0.90);
    color: rgba(255, 255, 255, 0.88);
    font-size: 9px;
    line-height: 1;
    padding-top: 2px;
  }

  .hero-row-act {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    width: auto;
    margin: 0;
    padding: 10px 20px;
    border-radius: var(--radius-full);
    border-bottom: none;
    background: linear-gradient(120deg, var(--color-accent), var(--color-accent-secondary));
    box-shadow: 0 8px 22px rgba(var(--color-accent-rgb), 0.4);
  }

  .hero-row-act:hover { padding-left: 20px; transform: translateY(-2px); }
  .hero-row-act b { min-height: 0; -webkit-line-clamp: 1; line-clamp: 1; font-size: 12.5px; color: #fff; }
  .hero-row-act small { display: none; }
  .hero-row-act .hero-row-ico-box { margin-top: 0; color: #fff; }
}

/* ---------- 竖屏平板（768 – 819px） ---------- */
@media (min-width: 768px) and (max-width: 819px) {
  .hero { padding: calc(var(--header-height) + var(--space-6)) var(--space-5) var(--space-8); }
  .hero .hero-avatar { width: 130px; height: 130px; }
  .hero .hero-name { font-size: 3rem; }
  .hero .hero-weather-bar { max-width: 320px; }
}

/* ---------- 手机（< 768px） ---------- */
@media (max-width: 767px) {
  .hero {
    padding: calc(var(--header-height) + var(--space-5)) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
    text-align: left;
  }

  .hero-profile {
    column-gap: var(--space-3);
    row-gap: var(--space-3);
    margin-bottom: var(--space-5);
  }

  /* 头像与名字并排：比上下两行省约 70px，正好让天气卡和最新三条都进首屏 */
  .hero .hero-avatar { width: 66px; height: 66px; }
  .hero .hero-avatar img {
    border-width: 3px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 12px 26px rgba(0, 0, 0, 0.3);
  }
  .hero .hero-avatar::before { inset: -6px; }

  .hero-kicker { font-size: 9px; letter-spacing: 0.22em; }
  .hero-kicker::before { width: 16px; }

  .hero .hero-name { font-size: 1.85rem; margin: 0; }
  .hero .hero-tagline { font-size: 13px; }
  .hero .hero-bio { font-size: 12.5px; }

  .hero .hero-weather-bar { padding: 11px 13px; }
  .hero .weather-temp .weather-text { font-size: 22px; }

  .hero .hero-social { flex-wrap: wrap; gap: var(--space-2); margin-top: 0; }
  .hero .social-link { width: 34px; height: 34px; }
  .hero .social-link svg,
  .hero .social-link .iconify { width: 17px; height: 17px; }

  .hero-scroll { display: none; }
}

/* --------------------------------------------------------------------------
   主题装饰图：新 Hero 的右侧交给头像与天气卡，装饰图退到最右后方，避免遮挡
   （.theme-decor 仅出现在首页，index.css 也仅首页加载，改动不影响其它页面）
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .theme-decor {
    right: 0;
    z-index: 0;
    opacity: 0.5;
  }

  .theme-decor img {
    height: min(calc(100vh - 240px), 440px);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .theme-decor { display: none !important; }
}

/* --------------------------------------------------------------------------
   矮屏笔记本（高度不足）时的紧凑排布，避免 Hero 内容被 overflow:hidden 裁掉
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) and (max-height: 760px) {
  /* 底部内边距交给 --hero-pad-b，下面 ≥1025px 的整屏补偿会带上它一起算 */
  .hero { padding-top: var(--space-6); --hero-pad-b: var(--space-6); }
  .hero-profile { margin-bottom: var(--space-5); gap: var(--space-6); }
  .hero-main { gap: var(--space-2); }
  .hero-aside { width: 190px; }
  .hero .hero-avatar { width: 190px; height: 190px; }
  .hero .hero-name { font-size: clamp(2rem, 4vw, 2.7rem); }
  .hero .hero-bio { -webkit-line-clamp: 1; line-clamp: 1; }
  .hero .hero-weather-bar { padding: 10px 13px; }
  .hero .weather-temp .weather-text { font-size: 20px; }
}

/* PC 首页：首屏内容下移，按风向标是否存在自动衔接后续内容。
   用相对定位保留内部 fixed 遮罩的视口基准，不在玻璃层祖先上添加 transform。 */
@media (min-width: 1025px) {
  .hero {
    height: auto;
    max-height: none;
    /* 顶部导航是 position:fixed，不占文档流，首屏可用高度就是整屏。
       原先按 100lvh - --header-height 计算，Hero 会比视口矮 64px，
       下一段（近期笔记 / 风向标）的标题正好被顶进首屏底部露出一条。
       这里改回整屏高，让首屏刚好停在折线上。 */
    min-height: 100vh;
    min-height: 100lvh;
    /* 多出来的 64px 全部补到底部内边距：Hero 内容的垂直位置与改动前完全一致，
       只是把原来漏给下一段的那条空间收回首屏。 */
    padding-bottom: calc(var(--hero-pad-b, var(--space-10)) + var(--header-height));
    /* Hero 自身再吃 24px 左右内边距的话，内部 .container 在 <1248px 时会比下方
       .container 窄 24px；栏距统一交给 .container，Hero 只负责纵向留白。 */
    padding-left: 0;
    padding-right: 0;
  }

  /* 首屏变高后，向下箭头同步上抬，保持与改动前相同的视觉位置 */
  .hero .hero-scroll {
    bottom: calc(20px + var(--header-height));
  }

  .hero > .container {
    top: 20px;
  }

  /* 原来 1060px 比 .container 的内容宽（1200 - 48 = 1152）窄 92px，居中后左右各内缩
     46px，于是首屏文字和头像都比下方「近期笔记」往里挪了一截。改为跟随容器宽度，
     左边缘与「近期笔记」、右边缘与「更多 >」落在同一条竖线上。 */
  .hero-profile {
    max-width: none;
  }

  .hero + .feed-zone,
  .hero + .compass-zone {
    padding-top: 24px;
  }

  .hero + .compass-zone {
    padding-bottom: 0;
  }

  .compass-zone + .feed-zone {
    padding-top: 24px;
  }
}

/* ========================================
   生活回想：多图瞬间（一条瞬间 = 一张卡）
   —— 角标压在日期下面同一列，避免和底部标题/摘要抢位置
   ======================================== */
.life-count {
  position: absolute;
  top: 28px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  line-height: 1.4;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}

.life-count svg {
  width: 11px;
  height: 11px;
  flex: none;
}

@media (max-width: 768px) {
  .life-count {
    top: 20px;
    right: 4px;
    font-size: 8px;
    padding: 1px 4px;
    gap: 2px;
  }
  .life-count svg { width: 9px; height: 9px; }
}

@media (max-width: 480px) {
  .life-count {
    top: 19px;
    right: 3px;
    font-size: 7px;
    padding: 1px 3px;
  }
  .life-count svg { width: 8px; height: 8px; }
}

/* ==========================================================================
   Hero「最新瞬间」— 一体毛玻璃卡
   收起态：毛玻璃胶囊（与天气卡片同款玻璃：rgba(20,22,34,.32) + blur(18px) + 20% 白描边）；
   展开态：胶囊与列表融合成一整块圆角玻璃卡，列表与底部「查看更多瞬间」胶囊无缝衔接，
   桌面悬停 / 点按向上展开（底边锚定原胶囊位置），移动端点按就地向下展开（胶囊宽 80%）。
   ========================================================================== */
.hero-moments {
  position: relative;
  width: 60%;                  /* 胶囊收窄到左栏的 60%（缩短约 40%），左对齐；玻璃卡 left/right:0 自动等宽 */
  min-width: 300px;            /* 兜底：过窄时保证头像/昵称/正文仍可读 */
  min-height: 54px;            /* 玻璃卡绝对定位、底边锚定原胶囊位置，根节点需保留胶囊高度 */
  align-self: flex-start;
  margin-top: var(--space-4, 16px);
  margin-bottom: 27px;         /* 为下方三层卡片留出空间，避免贴住后续内容 */
  z-index: 10;                 /* 展开的玻璃卡需要盖住下方内容 */
}

/* 触发胶囊（玻璃壳，沿用天气卡片毛玻璃） */
.hm-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 54px;
  box-sizing: border-box;
  padding: 6px 10px 6px 6px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 999px;
  background: rgba(20, 22, 34, 0.32);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  -webkit-tap-highlight-color: transparent;
  opacity: 1;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.25s ease,
              opacity 0.22s ease, filter 0.28s ease, visibility 0s linear 0.3s;
}
@supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .hm-trigger { background: rgba(20, 22, 34, 0.6); }
}
.hm-trigger:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
}
.hm-trigger:active { transform: translateY(0); }

/* 流动微光：一道柔和高光沿胶囊表面周期性扫过，模拟玻璃反光；
   纯装饰、不拦截事件，内容（按钮/跳转钮）始终压在高光层之上 */
.hm-trigger::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.16) 50%, transparent 60%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: -100% 0;
  pointer-events: none;
  opacity: 0;
  animation: hm-sheen 6s ease-in-out infinite;
}
/* 约 2.7s 完成一次扫过（右上 → 左下），其余时间静止，克制不抢眼 */
@keyframes hm-sheen {
  0%   { background-position: -100% 0; opacity: 0; }
  8%   { opacity: 1; }
  45%  { background-position: 300% 0; opacity: 0; }
  100% { background-position: 300% 0; opacity: 0; }
}
/* 胶囊内容抬到高光层之上 */
.hm-trigger .hm-toggle,
.hm-trigger .hm-jump { position: relative; z-index: 1; }

/* 边缘流动光影：一道高亮光点拖着强调色尾迹沿胶囊描边循环游走，营造梦幻科技感。
   锥形渐变 + 遮罩只保留 1px 光环；纯装饰、不拦截事件；不支持 @property 的浏览器降级为静止光环。

   ⚠️ 两条声明顺序是这段样式的生死线，改动前请先读完：
   光环靠「整块锥形渐变 + 双层遮罩挖空中间」实现，挖空这一步由 mask-composite 承担。
   Blink 把 -webkit-mask 当作 mask 的别名，而 mask / -webkit-mask 简写会把
   mask-composite 复位成 add。所以【两条简写必须都写在两条 composite 之前】：
   一旦把 mask 简写排在 -webkit-mask-composite 后面，在支持
   -webkit-mask-composite 但还不认标准 mask-composite 的浏览器上
   （Blink < 120，以及大量停在旧内核的安卓 WebView / 国内浏览器），
   挖空就会被复位掉，整块锥形渐变直接糊在胶囊上——表现为「以胶囊为中心的一道白色
   圆周扫光」，而不是 1px 光环。新版 Chrome / Safari 因为认标准属性看不出问题，
   所以这个 bug 只在部分手机上出现。
   实测（Chromium 141，只保留 -webkit-mask-composite 模拟旧内核）：
     简写在后（旧写法）胶囊中心 (144,152,166) ← 被扫光填满
     简写在前（现写法）胶囊中心 (6,7,11)      ← 干净，只剩光环 */
@property --hm-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.hm-trigger::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  /* 兜底：默认不画锥形渐变。万一遮罩挖空没生效，宁可没有光环，也不能让整块渐变
     糊在胶囊上。真正的渐变与动画放在下面的 @supports 里，只给挖得动的浏览器。 */
  background: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--color-accent) 60%, transparent));
  pointer-events: none;
  opacity: 0.85;
}
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  .hm-trigger::after {
    background: conic-gradient(
      from var(--hm-angle, 0deg),
      transparent 0deg,
      transparent 150deg,
      color-mix(in srgb, var(--color-accent) 55%, transparent) 255deg,
      rgba(255, 255, 255, 0.95) 325deg,
      transparent 360deg
    );
    animation: hm-border-flow 5s linear infinite;
  }
}
/* 光点沿描边匀速绕行一周 */
@keyframes hm-border-flow {
  to { --hm-angle: 360deg; }
}

/* 胶囊堆叠（下探层叠）：收起态胶囊背后的三层毛玻璃轮廓，纯装饰、不拦截事件。
   上长下短居中收窄（94% / 88% / 82%），每层下探 5px，以紧凑间距露出卡片边缘，
   视觉暗示「这里有多张瞬间可交互」；悬停/聚焦/展开后随胶囊一起淡出，由玻璃卡接管。 */
.hm-stack {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* 由 54px 抬到 90px：只是给下面的遮罩留出渐隐带，堆叠层本身是 top:0 的绝对定位，
     位置不受影响；本元素纯装饰、pointer-events:none，加高没有副作用。 */
  height: 90px;
  z-index: 0;
  pointer-events: none;
  /* 遮掉胶囊覆盖的那 54px。三层堆叠胶囊原本整条垫在触发胶囊【背后】，
     只有底部 5 / 10 / 15px 露出来；但触发胶囊是半透明玻璃，backdrop-filter
     采样到的是这三层暗底（0.55 / 0.44 / 0.34）而不是壁纸，四层叠加后有效不透明度
     约 0.89，而上面的 Discover / Latest 面板只有 0.32 —— 这就是那道色差的全部来源，
     与玻璃配方无关（配方 4.3.33 已统一）。
     这里把被遮住的一段从绘制中去掉，胶囊背后重新只剩壁纸；露出的部分不受影响。
     渐隐带落在胶囊底边（53→57px），正好藏在胶囊的边框与投影下，看不出接缝。
     附带收益：hover 时三层向上抽走会自然淡入遮罩区，「被吸入胶囊」更干净——
     此前它们是从半透明胶囊背后穿过去的，会让胶囊在动画途中忽明忽暗。 */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 53px, #000 57px);
          mask-image: linear-gradient(to bottom, transparent 0, transparent 53px, #000 57px);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  transition: opacity 0.2s ease, visibility 0.2s;
}
/* 背景层不加 backdrop-filter：半透明填充即可，更克制也更省性能。
   实测加了也没用——三层在露出的那几像素里仍然互相重叠（宽度 94/88/82%、
   偏移 5/10/15px），每层的 backdrop-filter 采样的是下一层，压暗照样是乘性叠加。
   所以这里靠调低填充不透明度来对齐材质：.26 / .22 / .18 三层叠完之后，
   露出条比触发胶囊略沉一档，读作「后面还压着几张卡」的层次，而不是一道色差。
   旧值 .55 / .44 / .34 是在 4.3.34 之前定的——那时胶囊本身也被这三层垫得很暗，
   整体是一坨深色所以看不出来；胶囊改通透之后，这三条就突然扎眼了。 */
.hm-stack-layer {
  position: absolute;
  top: 0;
  left: 50%;
  right: auto;
  height: 54px;
  border: 1px solid;
  border-radius: 999px;
  pointer-events: none;
}
.hm-stack-layer--1 {
  z-index: 3;
  width: 94%;
  transform: translate(-50%, 5px);
  background: rgba(20, 22, 34, 0.26);
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.10), 0 4px 8px rgba(6, 8, 18, 0.24);
}
.hm-stack-layer--2 {
  z-index: 2;
  width: 88%;
  transform: translate(-50%, 10px);
  background: rgba(20, 22, 34, 0.22);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08), 0 5px 10px rgba(6, 8, 18, 0.20);
}
.hm-stack-layer--3 {
  z-index: 1;
  width: 82%;
  transform: translate(-50%, 15px);
  background: rgba(20, 22, 34, 0.18);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 8px 16px rgba(6, 8, 18, 0.18);
}
/* 表层胶囊压在堆叠层之上；玻璃卡保持最上层（z-index:3） */
.hm-trigger { z-index: 1; }
/* 桌面端开合动画：悬停/聚焦/展开时，三层堆叠胶囊自下而上依次抬起、淡出，
   像被「吸入」正在升起的玻璃卡；收起时类名移除，过渡反向播放——卡片回落、堆叠逐层落回。
   移动端不走这套（触屏无 hover），改由关键帧处理，见下方 819px 媒体查询。 */
@media (min-width: 820px) {
  /* 上推过程保持在景深遮罩和面板前方，避免运动尚未结束就被盖住。 */
  .hm-trigger {
    z-index: 4;
    visibility: visible;
    transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.2s ease, visibility 0s;
  }
  .hm-stack { z-index: 2; }
  .hm-stack-layer {
    transition: transform 0.56s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
  }
  /* 越底层抬得越高、越慢半拍，形成三张胶囊依次被吸起的层次感 */
  .hm-stack-layer--1 { transition-delay: 0s; }
  .hm-stack-layer--2 { transition-delay: 0.07s; }
  .hm-stack-layer--3 { transition-delay: 0.14s; }

  .hero-moments:not(.is-dismissed):hover .hm-stack-layer--1,
  .hero-moments:not(.is-dismissed).is-hovered .hm-stack-layer--1,
  .hero-moments:not(.is-dismissed):focus-within .hm-stack-layer--1,
  .hero-moments.is-open .hm-stack-layer--1 { transform: translate(-50%, -34px) scaleX(1.05); opacity: 0; }
  .hero-moments:not(.is-dismissed):hover .hm-stack-layer--2,
  .hero-moments:not(.is-dismissed).is-hovered .hm-stack-layer--2,
  .hero-moments:not(.is-dismissed):focus-within .hm-stack-layer--2,
  .hero-moments.is-open .hm-stack-layer--2 { transform: translate(-50%, -58px) scaleX(1.09); opacity: 0; }
  .hero-moments:not(.is-dismissed):hover .hm-stack-layer--3,
  .hero-moments:not(.is-dismissed).is-hovered .hm-stack-layer--3,
  .hero-moments:not(.is-dismissed):focus-within .hm-stack-layer--3,
  .hero-moments.is-open .hm-stack-layer--3 { transform: translate(-50%, -82px) scaleX(1.13); opacity: 0; }

  /* 先清晰上推近两枚胶囊高度，再淡入面板；保留横向体积以强化推开的感觉。 */
  .hero-moments:not(.is-dismissed):hover .hm-trigger,
  .hero-moments:not(.is-dismissed).is-hovered .hm-trigger,
  .hero-moments:not(.is-dismissed):focus-within .hm-trigger,
  .hero-moments.is-open .hm-trigger {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-96px) scale(0.98);
    transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.24s ease 0.16s, visibility 0s linear 0.42s;
  }
}

/* 主点按区（展开 / 收起）：重置按钮样式，铺满胶囊左侧 */
.hm-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 auto;               /* 铺满胶囊左侧，正文弹性伸缩，时间/箭头自然落到右端 */
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hm-avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(20, 22, 34, 0.5);
}
/* 触发器头像：嵌在一圈细白环里（照片嵌白框的质感） */
.hm-toggle .hm-avatar {
  width: 42px;
  height: 42px;
  padding: 1px;
  border: 1.5px solid #ffffff;
  background: #ffffff;
  background-clip: padding-box;
  /* 白环：内高光 + 柔和白色外发光 + 投影，无黑色描边 */
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.25),
    0 0 16px rgba(255, 255, 255, 0.28),
    0 5px 14px rgba(0, 0, 0, 0.26);
}
.hm-name {
  flex: 0 0 auto;
  max-width: 4.6em;
  font-weight: 600;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-toggle .hm-name {
  max-width: 6em;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.hm-text {
  flex: 1 1 auto;               /* 在胶囊里占满中间，时间/箭头被推到右端 */
  min-width: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 触发器正文：占满中间；默认超长省略，溢出时由 JS 加 .is-marquee 切换为循环滚动 */
.hm-toggle .hm-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 跑马灯：完整文本双份拼接横向滚动，两端淡出遮罩让进出更柔和；
   时长由 JS 按文本宽度设定（--hm-marquee-duration），速度恒定 */
.hm-text-roll {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
}
.hm-text-item {
  flex: 0 0 auto;
  padding-right: 2.75em;          /* 循环间隔：一份文本滚走后留一段空隙再出现 */
}
.hm-toggle .hm-text.is-marquee {
  text-overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.25em, #000 calc(100% - 1.25em), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 1.25em, #000 calc(100% - 1.25em), transparent 100%);
}
.hm-toggle .hm-text.is-marquee .hm-text-roll {
  animation: hm-text-marquee var(--hm-marquee-duration, 18s) linear infinite;
}
@keyframes hm-text-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* 内容为两份相同文本，移动半程即无缝接上 */
}
/* 桌面端悬停/聚焦/展开后胶囊隐藏，暂停滚动避免空转（移动端展开时 trigger 直接 display:none） */
.hero-moments:not(.is-dismissed):hover .hm-text-roll,
.hero-moments:not(.is-dismissed).is-hovered .hm-text-roll,
.hero-moments:not(.is-dismissed):focus-within .hm-text-roll,
.hero-moments.is-open .hm-text-roll { animation-play-state: paused; }
.hm-time {
  flex: 0 0 auto;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hm-toggle .hm-time {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.62);
  padding: 0 2px;
}
.hm-caret {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.6);
  transition: transform 0.25s ease;
}
.hero-moments:not(.is-dismissed):hover .hm-caret,
.hero-moments:not(.is-dismissed).is-hovered .hm-caret,
.hero-moments:not(.is-dismissed):focus-within .hm-caret,
.hero-moments.is-open .hm-caret { transform: rotate(180deg); }

/* 玻璃卡展开时，触发胶囊整体隐藏（由一体玻璃卡接管，卡片底边即原胶囊位置）。
   状态组与上面 caret 翻转保持一致（hover / .is-hovered 防抖 / 键盘聚焦 / 点击展开）。 */
.hero-moments:not(.is-dismissed):hover .hm-trigger,
.hero-moments:not(.is-dismissed).is-hovered .hm-trigger,
.hero-moments:not(.is-dismissed):focus-within .hm-trigger,
.hero-moments.is-open .hm-trigger { visibility: hidden; }

/* 快捷跳转按钮：直达该条瞬间在 /moments 的锚点 */
.hm-jump {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 2px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.hm-jump svg { width: 14px; height: 14px; }
.hm-jump:hover {
  color: #fff;
  border-color: color-mix(in srgb, var(--color-accent) 55%, rgba(255,255,255,0.3));
  background: color-mix(in srgb, var(--color-accent) 26%, transparent);
  transform: translateY(-1px);
}

/* 一体玻璃卡：桌面悬浮、底边锚定原胶囊位置（bottom:0），与胶囊等宽（left/right:0）；
   列表与底部胶囊同属这一块毛玻璃，无缝隙、无第二套边框阴影。
   玻璃配方与触发胶囊 / 天气卡片完全一致：rgba(20,22,34,.32) 压暗填充 + blur(18px) + 20% 白描边。 */
.hm-card {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 10px 12px 12px;
  display: flex;               /* 列表区内部滚动，底部「查看更多瞬间」胶囊钉住、始终可见 */
  flex-direction: column;
  border-radius: var(--radius-lg, 22px);
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: rgba(20, 22, 34, 0.32);
  text-align: left;            /* 避免继承 hero 标题的居中对齐 */
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  max-height: min(560px, 82vh);
  overflow: hidden;            /* 卡片本身不滚动；列表 .hm-list 内部滚动，保证底部胶囊钉住 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(28px) scale(0.9);
  transform-origin: bottom center;   /* 底边锚在胶囊位置，展开时向上生长、收回时向下缩回 */
  transition: opacity 0.32s ease, transform 0.48s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.32s;
}
@supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .hm-card { background: rgba(20, 22, 34, 0.6); }
}
.hero-moments:not(.is-dismissed):hover .hm-card,
.hero-moments:not(.is-dismissed).is-hovered .hm-card,
.hero-moments:not(.is-dismissed):focus-within .hm-card,
.hero-moments.is-open .hm-card {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* 用 translateZ(0) 而非 none：展开后仍保留独立合成层，
     避免过渡结束时丢层导致 backdrop-filter 首屏不绘制（直接打开首页时卡片透明的根因） */
  transform: translateZ(0);
}

/* 桌面：底边留在胶囊原位，壳体向上展开，文字在展开后半程出现。 */
@media (min-width: 820px) {
  .hm-card {
    transform: translateZ(0) scaleY(0.14);
    transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.2s ease, visibility 0s linear 0.48s;
  }
  .hero-moments:not(.is-dismissed):is(:hover, .is-hovered, :focus-within, .is-open) .hm-card {
    transform: translateZ(0) scaleY(1);
    transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
                opacity 0.18s ease 0.1s, visibility 0s;
  }
  .hm-card > * {
    opacity: 0;
    transition: opacity 0.12s ease;
  }
  .hero-moments:not(.is-dismissed):is(:hover, .is-hovered, :focus-within, .is-open) .hm-card > * {
    opacity: 1;
    transition: opacity 0.28s ease 0.28s;
  }
}

/* 卡片头：小标签 + 右上角圆形玻璃收起钮 */
.hm-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 6px 8px;
}
.hm-card-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
}
.hm-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.hm-close svg { width: 15px; height: 15px; }
.hm-close:hover {
  color: #fff;
  border-color: color-mix(in srgb, var(--color-accent) 55%, rgba(255, 255, 255, 0.3));
  background: color-mix(in srgb, var(--color-accent) 24%, transparent);
}

.hm-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;              /* 占满面板中部，内容超高时内部滚动 */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* 每条瞬间：头部（头像+昵称/时间，右上角跳转钮）+ 正文磨砂胶囊 */
.hm-item {
  position: relative;
  padding: 8px 12px;
  border-radius: 16px;
  transition: background 0.18s ease;
}
.hm-item:hover { background: rgba(255, 255, 255, 0.06); }
.hm-item-main {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 12px;
  row-gap: 5px;
  text-align: left;            /* 覆盖 hero 标题区的居中对齐，保证正文左对齐换行 */
  text-decoration: none;
  color: rgba(255, 255, 255, 0.95);
}
.hm-item .hm-avatar {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  width: 40px;
  height: 40px;
  /* 与触发胶囊同款细白环：边框 1.5px + 内边 1px */
  padding: 1px;
  border: 1.5px solid #ffffff;
  background: #ffffff;
  background-clip: padding-box;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 14px rgba(255, 255, 255, 0.22),
    0 4px 12px rgba(0, 0, 0, 0.22);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* 悬停 / 键盘聚焦某条瞬间：头像亮起强调色光环（与 Hero 大头像光环同色系） */
.hm-item:hover .hm-avatar,
.hm-item:focus-within .hm-avatar {
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    0 0 0 2px color-mix(in srgb, var(--color-accent) 65%, transparent),
    0 0 18px color-mix(in srgb, var(--color-accent) 55%, transparent),
    0 4px 12px rgba(0, 0, 0, 0.22);
}
.hm-head {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.hm-item .hm-name {
  max-width: none;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
.hm-item .hm-time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
/* 正文：普通文字（不做单独内嵌磨砂胶囊），缩进对齐到昵称列 */
.hm-item .hm-text {
  /* 面板只展示摘要，避免长正文挤走其余动态。完整内容通过条目链接查看。 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  max-height: 3.2em;
  overflow: hidden;
  grid-column: 2;
  grid-row: 2;
  justify-self: stretch;
  text-align: left !important;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  white-space: normal;
  word-break: break-word;
}
/* 矮屏桌面缩短摘要，优先容纳五条；极矮视口仍保留列表滚动兜底。 */
@media (min-width: 820px) and (max-height: 760px) {
  .hm-item .hm-text {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    max-height: 1.6em;
  }
}
/* 每条右上角的圆形玻璃跳转钮 */
.hm-item-jump {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  margin: 0;
}
.hm-item-jump svg { width: 16px; height: 16px; }
/* 底部通栏胶囊「+ 查看更多瞬间 →」：与玻璃卡同体，展开后位于原胶囊位置 */
.hm-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;             /* 钉在卡片底部，不随列表滚动 */
  margin: 8px 2px 0;
  padding: 13px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.14), 0 8px 20px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.hm-foot svg { width: 16px; height: 16px; }
.hm-foot .hm-foot-arrow { transition: transform 0.2s ease; }
.hm-foot:hover {
  background: color-mix(in srgb, var(--color-accent) 26%, rgba(255, 255, 255, 0.12));
  border-color: color-mix(in srgb, var(--color-accent) 60%, rgba(255, 255, 255, 0.3));
  transform: translateY(-1px);
}
.hm-foot:hover .hm-foot-arrow { transform: translateX(3px); }

/* 桌面端「水平景深」遮罩：遮罩挂在 <body> 下（由 JS 创建），不是 .hero-moments 的子元素。
   为什么必须挂在 body：WebKit/Safari 会把 backdrop-filter 的背景采样区裁到祖先的 overflow 剪裁上，
   而 .hero 是 overflow:hidden。遮罩若留在 Hero 内部，模糊会在 Hero 底边被硬生生切断，
   露出一条非常明显的横向分界线（Chrome 不做这个裁剪，所以同一份代码只有 Safari 能看到）。
   挂到 body 后遮罩没有任何裁剪祖先，两个引擎表现一致。
   层级：遮罩 z-index:1005（盖住 header 100 / 音乐胶囊 999 / 回到顶部 1000）；激活时
   .hero-moments 抬到 z-index:1010 压在遮罩之上，所以玻璃卡与胶囊永远锐利、不会被自己的遮罩模糊，
   鼠标命中也依然优先给组件。遮罩用水平线性蒙版做景深分区：左侧 + 中部（瞬间面板所在、以及与之
   抢视线的 Discover/Latest 文章卡、Hero 标题）强模糊压暗，向右平滑过渡，右侧天气卡与头像区域
   完全清晰。显隐判定仍是纯 CSS：body:has(.hero-moments 处于 hover / .is-hovered 防抖 / 聚焦 /
   .is-open 钉住)，与遮罩在组件内时的规则一一对应。移动端就地向下展开、不使用遮罩。 */
.hm-scrim { display: none; }

@media (min-width: 820px) {
  .hm-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1005;               /* 高于页面固定件，低于激活态 .hero-moments(1010)，卡片保持清晰 */
    background: rgba(12, 14, 26, 0.32);
    backdrop-filter: blur(26px) saturate(1.05);
    -webkit-backdrop-filter: blur(26px) saturate(1.05);
    /* 水平景深蒙版：0–50% 全模糊（面板 + 文章卡 + 标题），50%–86% 向右衰减到全透明=清晰
       （右侧天气卡 / 头像）。曲线用 smootherstep（6u^5-15u^4+10u^3）采样十一档：它在两端的
       一阶、二阶导都为 0，起点和终点都没有斜率突变，不会像分段直线那样在拐点处出现一条看得见
       的明暗带——旧版 52%→60% 与 60%→67% 两段斜率相差 6 倍，那个拐点就是「过渡很硬」的来源。
       过渡带同时从 26% 拉宽到 36%，中点仍落在两栏之间的空档（68%）：左栏内容照旧接近满模糊
       （53% 处仍有 0.99），右栏起始处只剩 5% 上下的极淡余量并迅速归零。 */
    -webkit-mask-image: linear-gradient(90deg,
      #000 0%, #000 50%,
      rgba(0, 0, 0, 0.991) 53.6%, rgba(0, 0, 0, 0.942) 57.2%,
      rgba(0, 0, 0, 0.837) 60.8%, rgba(0, 0, 0, 0.683) 64.4%,
      rgba(0, 0, 0, 0.5) 68%,
      rgba(0, 0, 0, 0.317) 71.6%, rgba(0, 0, 0, 0.163) 75.2%,
      rgba(0, 0, 0, 0.058) 78.8%, rgba(0, 0, 0, 0.009) 82.4%,
      transparent 86%);
    mask-image: linear-gradient(90deg,
      #000 0%, #000 50%,
      rgba(0, 0, 0, 0.991) 53.6%, rgba(0, 0, 0, 0.942) 57.2%,
      rgba(0, 0, 0, 0.837) 60.8%, rgba(0, 0, 0, 0.683) 64.4%,
      rgba(0, 0, 0, 0.5) 68%,
      rgba(0, 0, 0, 0.317) 71.6%, rgba(0, 0, 0, 0.163) 75.2%,
      rgba(0, 0, 0, 0.058) 78.8%, rgba(0, 0, 0, 0.009) 82.4%,
      transparent 86%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;        /* 纯视觉层，绝不与卡片/胶囊争抢鼠标命中（hover 抖动根因） */
    cursor: pointer;
    /* 独立合成层：与 .hm-card 同款处理。遮罩初始隐藏、hover 才淡入，若没有常驻合成层，
       冷启动首屏第一次淡入时 backdrop-filter 会丢层、模糊半径渲染偏弱（pjax 返回时合成器
       已热、模糊满强度，即「首屏糊得轻、返回后糊得重」的根因）。translateZ(0) 强制常驻图层。 */
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
  }
  /* 预热态：页面 load settled 后、用户尚未交互时，JS 短暂加 .hm-warming 让遮罩以近不可见
     （opacity:.02、可见、backdrop-filter 生效）真实渲染两帧，强制合成器构建一次 backdrop 采样层，
     把硬加载首屏偏冷的毛玻璃烘热——等价于 pjax 整页重合成的效果，避免首屏模糊偏弱。 */
  .hm-scrim.hm-warming {
    visibility: visible !important;
    opacity: 0.02 !important;
    pointer-events: none !important;
  }
  /* 激活态（hover / .is-hovered 防抖 / 聚焦 / 点击钉住）：组件整体抬到遮罩之上。
     这里不能再写 isolation:isolate——遮罩已经搬到 body 下，隔离层已无必要，而 WebKit 会把
     隔离组当作 Backdrop Root，玻璃卡的 backdrop-filter 就采不到身后的遮罩与页面，
     Safari 上会变成一块没有模糊的死板半透明底。position:relative + z-index 本身已建立层叠
     上下文，卡片(3)/堆叠(2)/胶囊的内部层级照常生效。 */
  .hero-moments:not(.is-dismissed):hover,
  .hero-moments:not(.is-dismissed).is-hovered,
  .hero-moments:not(.is-dismissed):focus-within,
  .hero-moments.is-open {
    z-index: 1010;
  }
  /* 让组件的 z-index:1010 真正抵达根层叠上下文。.hero > .container 是 position:relative + z-index:1，
     本身就是一个层叠上下文，会把组件的 1010 关在 .container（对外只值 1）内部，body 级遮罩(1005)
     于是压在面板之上，把弹出的玻璃卡糊掉、看不清。激活期间把它降回 z-index:auto（不再是层叠上下文），
     组件的 1010 即可越过遮罩；.container 里其余内容仍在正常流层，照常被遮罩模糊——这正是想要的效果。
     z-index:auto 时它与 .hero::before（暗角，z-index:0）同层，按树序 ::before 在前，暗角仍在内容之下。 */
  body:has(.hero-moments:not(.is-dismissed):hover) .hero > .container,
  body:has(.hero-moments:not(.is-dismissed).is-hovered) .hero > .container,
  body:has(.hero-moments:not(.is-dismissed):focus-within) .hero > .container,
  body:has(.hero-moments.is-open) .hero > .container {
    z-index: auto;
  }
  /* 遮罩已不在组件内部，改由 body:has() 反查组件状态——判定条件与上面的激活态逐条对应 */
  body:has(.hero-moments:not(.is-dismissed):hover) .hm-scrim,
  body:has(.hero-moments:not(.is-dismissed).is-hovered) .hm-scrim,
  body:has(.hero-moments:not(.is-dismissed):focus-within) .hm-scrim,
  body:has(.hero-moments.is-open) .hm-scrim {
    opacity: 1;
    visibility: visible;
  }
  /* 仅「点击钉住」时：遮罩才可点击（点遮罩关闭）并锁定背景滚动；hover 预览不拦截、不锁滚动 */
  body:has(.hero-moments.is-open) .hm-scrim { pointer-events: auto; }
  body.hm-modal-open { overflow: hidden; }
}

/* 移动端：容器通栏；触发胶囊宽 80%；玻璃卡就地向下展开（不悬浮、不被视口顶部裁切），
   展开时胶囊整体隐藏，卡片从胶囊位置长出，列表与底部胶囊同属一块玻璃 */
@media (max-width: 819px) {
  .hero-moments {
    width: 100%;
    min-width: 0;
    min-height: 0;
    align-self: auto;
    justify-self: stretch;
  }
  /* 触发胶囊宽 80%：比通栏更轻量的入口，又给头像/昵称/正文留足空间 */
  .hm-trigger {
    width: 80%;
    min-width: 0;
  }
  /* 窄胶囊空间有限：隐藏冗余的相对时间（展开卡片内每条都带时间），把宽度让给正文预览 */
  .hm-trigger .hm-time { display: none; }
  /* 移动端 hover 不隐藏胶囊（触屏点按会残留 hover 态，避免胶囊闪隐）；展开态由 is-open 控制 */
  .hero-moments:not(.is-dismissed):hover .hm-trigger,
  .hero-moments:not(.is-dismissed):focus-within .hm-trigger { visibility: visible; }
  .hm-card {
    position: static;
    display: none;
    width: 100%;
    margin: 0;                  /* 与胶囊同体，无缝隙 */
    max-height: none;
    overflow: visible;          /* 移动端全部展开，卡片/列表都不内部滚动 */
    box-shadow: var(--glass-shadow, 0 12px 32px rgba(0, 0, 0, 0.2));
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateZ(0);   /* 保留合成层，稳定 backdrop-filter；无视觉位移 */
  }
  .hm-list { flex: 0 0 auto; overflow: visible; }
  /* 移动端展开动画：卡片从胶囊方向向下生长展开（display 无法过渡，用关键帧） */
  .hero-moments.is-open .hm-card {
    display: flex;
    animation: hm-card-mobile-in 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* 展开瞬间：胶囊脱离流、钉在原位置，向下沉落淡出，像被生长的卡片推开 */
  .hero-moments.is-open .hm-trigger {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    pointer-events: none;
    animation: hm-trigger-mobile-out 0.32s ease forwards;
  }
  /* 堆叠层与 80% 宽触发胶囊左对齐同宽；展开时随胶囊一起沉落淡出 */
  .hm-stack { width: 80%; right: auto; }
  .hero-moments.is-open .hm-stack {
    display: block;
    animation: hm-stack-mobile-out 0.32s ease forwards;
  }
  /* 收起动画：卡片向上收回成胶囊堆叠；播完前保留在屏内，胶囊/堆叠暂不出现 */
  .hero-moments.is-closing .hm-card {
    display: flex;
    animation: hm-card-mobile-out 0.34s ease forwards;
  }
  .hero-moments.is-closing .hm-trigger,
  .hero-moments.is-closing .hm-stack { display: none; }
}

/* 移动端开合关键帧：卡片进 = 从胶囊位置向下生长；卡片出 = 向上收回；胶囊/堆叠 = 向下沉落 */
@keyframes hm-card-mobile-in {
  from { opacity: 0; transform: translateY(-26px) scale(0.9); }
  to   { opacity: 1; transform: translateZ(0); }
}
@keyframes hm-card-mobile-out {
  from { opacity: 1; transform: translateZ(0); }
  to   { opacity: 0; transform: translateY(-22px) scale(0.92); }
}
@keyframes hm-trigger-mobile-out {
  to { opacity: 0; transform: translateY(16px) scale(0.92); visibility: hidden; }
}
@keyframes hm-stack-mobile-out {
  to { opacity: 0; transform: translateY(12px); visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-trigger,
  .hm-caret,
  .hm-jump,
  .hm-card,
  .hm-foot,
  .hm-stack,
  .hm-stack-layer,
  .hm-item,
  .hm-item .hm-avatar { transition: none; }
  /* 覆盖桌面展开态的延迟过渡，减弱动态效果时立即切换到最终状态。 */
  .hero-moments .hm-trigger,
  .hero-moments .hm-card,
  .hero-moments .hm-card > *,
  .hm-scrim { transition: none !important; }
  /* 减弱动效：关闭胶囊流动微光与边缘光影 */
  .hm-trigger::before { animation: none; opacity: 0; }
  .hm-trigger::after { animation: none; opacity: 0; }
  /* 减弱动效：关闭正文跑马灯，回退省略号截断 */
  .hm-toggle .hm-text.is-marquee {
    -webkit-mask-image: none;
    mask-image: none;
    text-overflow: ellipsis;
  }
  .hm-toggle .hm-text.is-marquee .hm-text-roll { animation: none; }
  /* 减弱动效：移动端面板开合直接切换，不做生长/收回/沉落动画 */
  .hero-moments.is-open .hm-card,
  .hero-moments.is-closing .hm-card,
  .hero-moments.is-open .hm-trigger,
  .hero-moments.is-open .hm-stack { animation: none; }
}
/* 减弱动效 + 移动端：胶囊/堆叠回退为直接隐藏（动画关闭后不能常驻占位） */
@media (max-width: 819px) and (prefers-reduced-motion: reduce) {
  .hero-moments.is-open .hm-trigger,
  .hero-moments.is-open .hm-stack { display: none; }
}