/* 上域下域多布局原型（A/B/C）：60vh 深色上域 + 浅色下域直接衔接。 */

.ulp-page {
  /* 吸顶头部高度：顶栏移出 60vh 上域后，上域高度相应扣减，页面总视觉不变 */
  --ulp-top-h: 56px;
  /* 上域最小宽度：窗口比它窄时首屏三栏不再继续变形（页面出现横向滚动，保护构图）。
     1240 =「标题（4.4vw 字号 → ≈405px 宽）+ 头像卡 320 + 摇杆 136 + 呼吸」刚好排得下的宽度。
     关键：比它宽的视口**不会**因此多出页面横向滚动条 —— 2560×1440 的模拟器若按 DPR2 折算成
     ~1280 CSS px，也仍然在 1240 之上（作者 2026-09-14 反馈：页面横向滚动条不该出现，
     上域内容应该只靠摇杆就能看完）。 */
  --lc-min-w: 1240px;
  /* 首屏定位用的「有效视宽」：跟着窗口走，但被最小宽度托底（拖动窗口时是连续变化，不是跳变） */
  --lc-stage-vw: max(var(--lc-min-w), 100vw);
  /* 标题字号：1920 以上顶到 5rem（作者验收过的观感）；窄视口按 4.4vw 收敛，
     这样「标题 + 卡片 + 摇杆」在 1240 附近还能并排摆下（5vw 会略挤）。 */
  --lc-title-f: clamp(2.25rem, calc(var(--lc-stage-vw) * 0.044), 5rem);
  /* 自我介绍 / 头像卡宽度：宽屏维持 380 / 320（作者验收过的尺寸），窄视口按比例收一点，
     否则「自我介绍 + 卡片 + 摇杆」在 1240~1400 挤不下（会互相压）。 */
  --lc-bio-w: min(380px, calc(var(--lc-stage-vw) * 0.26));
  --lc-card-w: min(320px, calc(var(--lc-stage-vw) * 0.23));
  /* 自我介绍右缘：卡片左边距的下界用它来算（不许压到自我介绍） */
  --lc-bio-right: calc(
    var(--space-10) + var(--space-6) + 50px + var(--lc-extra-vw) * 0.08 + var(--lc-bio-w)
  );
  /* 比 1920 更宽出来的那部分：大屏上标题/自我介绍要再散开一点
     （作者反馈：2560×1440 下自我介绍太靠下、太靠左） */
  --lc-extra-vw: max(0px, calc(var(--lc-stage-vw) - 1920px));
  min-height: 100vh;
  background: var(--bg-lower);
  color: var(--text-primary);
}

.ulp-upper {
  position: relative;
  box-sizing: border-box;
  /* 上域自己托最小宽度（不给整页设，标题栏与下域仍跟着窗口走） */
  min-width: var(--lc-min-w);
  /* 高度下限 600px：标题（≈194）与自我介绍（≈155）现在都是绝对定位，上域太矮时两者会上下压在一起；
     抬高下限保证「标题 + 自我介绍 + 呼吸」首屏一定放得下（作者两台屏的 60vh 都在下限之上，观感不变）。 */
  height: calc(clamp(600px, 60vh, 680px) - var(--ulp-top-h));
  display: flex;
  flex-direction: column;
  background-color: var(--bg-upper);
  /* 上域冷微渐变（深色叠 HUD 渐变，浅色为 none 保持纯色） */
  background-image: var(--bg-upper-gradient, none);
  color: var(--text-upper);
}

/* 吸顶头部：整页滚动时始终贴在视口顶；半透明背景 + 毛玻璃保证压住下方内容仍可读 */
.ulp-top {
  position: sticky;
  top: 0;
  z-index: 200;
  box-sizing: border-box;
  width: 100%;
  height: var(--ulp-top-h);
  padding-inline: max(var(--space-8), calc((100vw - 1280px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: color-mix(in srgb, var(--bg-upper) 84%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--border-upper) 50%, transparent);
}

.ulp-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
}

.ulp-brand i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-upper);
  box-shadow: 0 0 0 4px var(--accent-upper-soft);
}

/* 顶栏右侧：导航入口 + 主题切换 */
.ulp-top-right {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.ulp-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.ulp-nav button {
  padding: var(--space-1) 2px;
  border: none;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--text-upper-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: color 0.25s var(--ease-standard), border-color 0.25s var(--ease-standard);
}

.ulp-nav button:hover {
  color: var(--accent-upper);
}

.ulp-nav button.is-active {
  color: var(--accent-upper);
  border-bottom-color: var(--accent-upper);
}

.ulp-top .theme-toggle {
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: 52px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-upper);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-upper-soft) 72%, transparent);
  cursor: pointer;
}

.ulp-top .theme-toggle:hover {
  border-color: var(--accent-upper);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-upper) 18%, transparent);
}

.ulp-top .theme-toggle-track {
  position: absolute;
  inset: 0;
}

.ulp-top .theme-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-upper-soft);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  color: var(--accent-upper);
  transition: transform 0.3s var(--ease-standard);
}

.ulp-top .theme-toggle.is-dark .theme-toggle-thumb {
  transform: translateX(24px);
}

/* 横向滚动轨道：滚动条隐藏 */
.ulp-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.ulp-scroll::-webkit-scrollbar {
  display: none;
}

.ulp-rail {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: max-content;
  height: 100%;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-10) var(--space-4);
}

.ulp-label {
  margin: 0 0 var(--space-3);
  color: var(--accent-upper);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
}

/* 面板基类：有设计感的错落卡片，不平均分割 */
.ulp-intro,
.ulp-skills,
.ulp-moments,
.ulp-album,
.ulp-user {
  position: relative;
  box-sizing: border-box;
  max-height: 100%;
  padding: var(--space-6);
  border: 1px solid var(--border-upper);
  border-radius: 22px;
  background:
    radial-gradient(140% 90% at 8% 0%, var(--accent-upper-soft), transparent 60%),
    color-mix(in srgb, var(--bg-upper-soft) 72%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--text-upper-tertiary) transparent;
}

.ulp-intro h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: var(--leading-tight);
}

.ulp-intro p {
  margin: 0;
  color: var(--text-upper-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.ulp-intro footer {
  margin-top: var(--space-5);
  color: var(--accent-upper);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.ulp-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ulp-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.ulp-avatar > span {
  display: grid;
  place-items: center;
  width: 180px;
  height: 180px;
  border: 1px solid var(--border-upper);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, var(--accent-upper-soft), transparent 60%),
    var(--bg-upper-soft);
  color: var(--accent-upper);
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  box-shadow: 0 0 0 12px var(--accent-upper-soft);
}

.ulp-avatar em {
  color: var(--text-upper-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-style: normal;
}

/* 站点资料里的头像：填满头像位并**沿用容器的圆角**（首页是 22px 圆角矩形、别处是圆），
   之前写成 50% 会把设计里的圆角矩形裁成圆（2026-09-13 修） */
.ulp-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.ulp-user h1 {
  margin: var(--space-5) 0 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.8rem);
  line-height: 1;
  letter-spacing: -0.04em;
}

.ulp-role {
  margin: var(--space-3) 0 0;
  color: var(--accent-upper);
  font-size: var(--text-sm);
}

.ulp-user-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.ulp-user-meta li {
  padding: 3px var(--space-3);
  border: 1px solid var(--border-upper);
  border-radius: var(--radius-pill);
  color: var(--text-upper-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.ulp-skill > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.ulp-skill b {
  font-size: var(--text-sm);
  font-weight: 500;
}

.ulp-skill span {
  color: var(--text-upper-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.ulp-skill > i {
  display: block;
  height: 4px;
  margin-bottom: var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--bg-upper);
}

.ulp-skill em {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-upper), var(--accent-upper-soft));
}

.ulp-moments blockquote {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-4);
  border-left: 2px solid var(--accent-upper);
}

.ulp-moments blockquote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.ulp-moments blockquote footer {
  margin-top: var(--space-2);
  color: var(--text-upper-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.ulp-album-cover {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: var(--space-3);
}

.ulp-album-cover > button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-upper);
  border-radius: 50%;
  background: var(--bg-upper);
  color: var(--text-upper);
  cursor: pointer;
}

.ulp-album-cover > div {
  min-height: 190px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-5);
  border-radius: 18px;
  background:
    radial-gradient(120% 100% at 15% 0%, var(--accent-upper-soft), transparent 70%),
    linear-gradient(150deg, var(--bg-upper-soft), var(--bg-upper));
  animation: ulp-album-in 0.4s var(--ease-standard) both;
}

@keyframes ulp-album-in {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.ulp-album-cover h4 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
}

.ulp-album-cover p {
  margin: 0;
  color: var(--text-upper-secondary);
  font-size: var(--text-sm);
}

.ulp-album-cover footer {
  margin-top: var(--space-2);
  color: var(--accent-upper);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* 摇杆 */
.ulp-stick {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-3);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border-upper);
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg-upper-soft) 88%, transparent);
  backdrop-filter: blur(10px);
}

.ulp-stick button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-upper);
  border-radius: 50%;
  background: transparent;
  color: var(--text-upper-secondary);
  font: inherit;
  cursor: pointer;
}

.ulp-stick button:hover {
  border-color: var(--accent-upper);
  color: var(--accent-upper);
}

.ulp-stick .ulp-home {
  border-color: var(--accent-upper);
  color: var(--accent-upper);
}

.ulp-stick .ulp-down {
  margin-left: var(--space-1);
}

/* ---------- Layout A 错落 ---------- */
.la .ulp-rail {
  align-items: center;
}

.la-intro {
  width: 350px;
  align-self: stretch;
  margin: var(--space-6) 0;
}

.la-title {
  width: 250px;
  align-self: flex-start;
  margin-top: var(--space-10);
}

.la-title p {
  margin: 0 0 var(--space-2);
  color: var(--accent-upper);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
}

.la-title h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
  font-weight: 500;
  letter-spacing: 0.04em;
}

.la-user {
  width: 440px;
  align-self: center;
  margin-top: var(--space-8);
}

.la-skills {
  width: 340px;
  align-self: flex-end;
  margin-bottom: var(--space-8);
}

.la-moments {
  width: 330px;
  align-self: flex-start;
  margin-top: var(--space-12);
}

.la-album {
  width: 440px;
  align-self: center;
  margin-top: var(--space-8);
}

/* ---------- Layout B 左右对照 ---------- */
.lb-left {
  width: 360px;
  align-self: center;
}

.lb-left > .ulp-label {
  margin-top: 0;
}

.lb-left h2 {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  font-weight: 500;
  letter-spacing: 0.02em;
}

.lb-left .ulp-intro {
  border-radius: 26px;
}

.lb-user {
  width: 420px;
  align-self: center;
  margin-top: var(--space-10);
}

.lb-skills {
  width: 320px;
  align-self: flex-end;
  margin-bottom: var(--space-10);
}

.lb-moments {
  width: 320px;
  align-self: flex-start;
  margin-top: var(--space-12);
}

.lb-album {
  width: 440px;
  align-self: center;
  margin-top: var(--space-6);
}

/* ---------- Layout C（参考 afnizarnur.com）：通栏舞台 + 摇杆 + 里程标尺 ---------- */
/* 舞台外壳：摇杆锚定层（不随内容滚动）+ 悬停光斑事件层 */
.lc-stage-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
}

/* 舞台：内容溢出整屏宽度，无可见滚动条，靠摇杆/滚轮平移 */
.lc-stage {
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.lc-stage::-webkit-scrollbar {
  display: none;
}

.lc-rail {
  position: relative;
  display: flex;
  align-items: stretch;
  /* 子项间距 48 → 72px（作者 2026-09-14：信息卡片右边那一串太密集；先 64 再放宽到 72） */
  gap: 72px;
  width: max-content;
  height: 100%;
  box-sizing: border-box;
  /* 左右留白：首尾内容不贴屏幕边 */
  padding: var(--space-3) var(--space-16) var(--space-6) var(--space-10);
}

/* 轨道子项入场：逐个浮入 */
.lc-rail > * {
  animation: lc-in 0.55s var(--ease-standard) backwards;
}

.lc-rail > *:nth-child(2) { animation-delay: 0.05s; }
.lc-rail > *:nth-child(3) { animation-delay: 0.1s; }
.lc-rail > *:nth-child(4) { animation-delay: 0.15s; }
.lc-rail > *:nth-child(5) { animation-delay: 0.2s; }
.lc-rail > *:nth-child(6) { animation-delay: 0.25s; }
.lc-rail > *:nth-child(7) { animation-delay: 0.3s; }
.lc-rail > *:nth-child(8) { animation-delay: 0.35s; }
.lc-rail > *:nth-child(9) { animation-delay: 0.4s; }
.lc-rail > *:nth-child(10) { animation-delay: 0.45s; }
.lc-rail > *:nth-child(11) { animation-delay: 0.5s; }
.lc-rail > *:nth-child(12) { animation-delay: 0.55s; }
.lc-rail > *:nth-child(13) { animation-delay: 0.6s; }
.lc-rail > *:nth-child(14) { animation-delay: 0.65s; }
.lc-rail > *:nth-child(15) { animation-delay: 0.7s; }

@keyframes lc-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 里程分割：内容里正对标尺刻度位置的斜纹柱，纯装饰不标数字 */
.lc-rail > :not(.lc-mile) {
  position: relative;
  z-index: 1;
}

.lc-mile {
  position: absolute;
  top: var(--space-5);
  bottom: var(--space-5);
  z-index: 0;
  width: 10px;
  background: repeating-linear-gradient(
    115deg,
    var(--border-upper) 0,
    var(--border-upper) 1px,
    transparent 1px,
    transparent 7px
  );
  pointer-events: none;
}

/* 有盒模块通用：悬停轻微上浮 + 边框点亮 */
.lc-card {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.35s var(--ease-standard),
    border-color 0.35s var(--ease-standard),
    box-shadow 0.35s var(--ease-standard);
}

.lc-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* 机械网格底纹：压在所有内容底部（z-index 0 < 内容 1），向下渐显 */
.lc-stage-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(color-mix(in srgb, var(--accent-upper) 22%, var(--border-upper)) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent-upper) 22%, var(--border-upper)) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.18;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35), #000 70%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35), #000 70%);
}

/* 光标扩散的方格辉光：同样压在内容底部，网格线只在鼠标周围一个圆盘内点亮 */
.lc-grid-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(color-mix(in srgb, var(--accent-upper) 45%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent-upper) 45%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(
    circle 250px at var(--mx, -800px) var(--my, -800px),
    #000 0%,
    rgba(0, 0, 0, 0.45) 45%,
    transparent 72%
  );
  mask-image: radial-gradient(
    circle 250px at var(--mx, -800px) var(--my, -800px),
    #000 0%,
    rgba(0, 0, 0, 0.45) 45%,
    transparent 72%
  );
  transition: opacity 0.4s var(--ease-standard);
}

.lc-stage-wrap:hover .lc-grid-glow {
  animation: lc-grid-pulse 2.6s var(--ease-standard) infinite;
}

.lc-stage-wrap:not(:hover) .lc-grid-glow {
  opacity: 0;
}

/* 代码浏览窗：随机位置多行代码小窗，窗内内容持续向上滚动查看代码；
   上下端遮罩让新行淡入、旧行淡出 */
.lc-code {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.lc-code-window {
  position: absolute;
  box-sizing: border-box;
  max-width: 84%;
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--border-upper) 72%, transparent);
  border-radius: var(--radius-md);
  /* 背景压低：代码块只做氛围层，不能盖过正文 */
  background: color-mix(in srgb, var(--bg-upper-soft) 42%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  opacity: 0;
  /* 生命周期：淡入 → 展示停留 → 淡出，结束后由 React 换成新随机窗口 */
  animation: lc-window-life var(--life, 10s) ease-in-out var(--delay, 0s) both;
  will-change: transform, opacity;
}

.lc-code-file {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 26px;
  padding: 0 var(--space-3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-bottom: 1px solid color-mix(in srgb, var(--border-upper) 55%, transparent);
  background: color-mix(in srgb, var(--bg-upper) 16%, transparent);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-upper-secondary);
}

.lc-code-file i {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-upper);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-upper) 60%, transparent);
}

.lc-code-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

.lc-code-scroll code {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  /* 上下 padding 等值：保证内容两段副本滚动 -50% 时无缝衔接 */
  padding: var(--space-3);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 18px;
  color: var(--text-upper-secondary);
  white-space: pre;
  opacity: 0.72;
  animation: lc-code-up var(--code-dur, 12s) linear var(--code-delay, 0s) infinite;
  will-change: transform;
}

.lc-code-line {
  display: block;
  min-height: 18px;
  white-space: pre;
}

/* 语法高亮：整体用主题色系调和，保证明暗两套主题都可读 */
.lc-code-line .lc-tok-k,
.lc-code-line .lc-tok-a {
  color: var(--accent-upper);
  font-weight: 600;
}

.lc-code-line .lc-tok-s {
  color: color-mix(in srgb, var(--accent-upper) 58%, var(--text-upper));
}

.lc-code-line .lc-tok-n {
  color: var(--text-upper);
}

.lc-code-line .lc-tok-c {
  color: var(--text-upper-tertiary);
  font-style: italic;
}

.lc-code-line .lc-tok-p {
  color: var(--text-upper-secondary);
}

@keyframes lc-window-life {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
 7%,
  80% {
    /* 氛围层：最高只到 0.5（作者定 2026-09-14），随后淡出，别跟正文抢注意力 */
    opacity: 0.5;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

@keyframes lc-code-up {
  from {
    transform: translateY(0);
  }
  to {
    /* 内容为两段相同副本，滚动 50% 即无缝回到开头 */
    transform: translateY(-50%);
  }
}

@keyframes lc-grid-pulse {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.3;
  }
}

/* 悬停光斑：跟随鼠标的大范围径向光，铺满整个上域 */
.lc-stage-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  background: radial-gradient(
    460px circle at var(--mx, -800px) var(--my, -800px),
    color-mix(in srgb, var(--accent-upper) 15%, transparent),
    transparent 72%
  );
  opacity: 0;
  transition: opacity 0.4s var(--ease-standard);
}

.lc-stage-wrap:hover::after {
  opacity: 1;
}

.lc-card-label {
  margin: 0 0 var(--space-3);
  color: var(--accent-upper);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
}

/* 左上角标题 + slogan：保持朴素，不进盒子；悬停变品牌色 */
.lc-hero {
  flex: none;
  width: max-content;
  align-self: flex-start;
  /* 标题单独右移：在轨道左留白基础上再让出一点，避免贴边 */
  margin-left: var(--space-6);
  padding-top: var(--space-8);
}

.lc-hero h2 {
  margin: 0;
  font-family: var(--font-display);
  /* 字号跟着「有效视宽」走（见 --lc-title-f）；窄屏（≤760px）另有规则 */
  font-size: var(--lc-title-f);
  font-weight: 500;
  /* 行高放宽 + 底部留白：避免 g 等下伸部被 background-clip: text 裁掉 */
  line-height: 1.15;
  padding-bottom: 0.1em;
  letter-spacing: -0.03em;
  white-space: nowrap;
  cursor: default;
  background: linear-gradient(100deg, var(--text-upper) 35%, var(--accent-upper) 80%);
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 170% 100%;
  background-position: 0% 0%;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transition: background-position 0.6s var(--ease-standard);
}

.lc-hero:hover h2 {
  background-position: 95% 0%;
}

.lc-hero:hover .ulp-label {
  animation: lc-label-blink 1.1s steps(2, start) infinite;
}

@keyframes lc-label-blink {
  50% {
    opacity: 0.35;
  }
}

.lc-sub {
  margin: var(--space-4) 0 0;
  color: var(--text-upper-secondary);
  font-size: var(--text-sm);
}

/* 自我介绍：大字直接铺在背景上，无盒子；下沉到舞台下部平衡布局 */
.lc-bio {
  flex: none;
  width: 380px;
  align-self: flex-end;
  box-sizing: border-box;
  margin-bottom: var(--space-10);
}

.lc-bio h3 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: var(--leading-tight);
}

.lc-bio p {
  margin: 0;
  color: var(--text-upper-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.lc-bio footer {
  margin-top: var(--space-4);
  color: var(--text-upper-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* 头像：拍立得照片卡（放大版，唯一的"照片"位，圆角矩形而非圆环） */
.lc-portrait {
  flex: none;
  align-self: center;
  width: 320px;
  box-sizing: border-box;
  /*
   * 2026-09-18 作者反馈「卡片有点矮」：上下各留 50px（原来 24px），左右不留（内容都是居中的，
   * 照片/姓名/标签行自己会占好位；左右留白由卡片自身的 320px 宽度给）。实测 338 -> 390px。
   */
  padding: 50px 0;
  border: 1px solid var(--border-upper);
  border-radius: 22px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--text-upper) 12%, var(--bg-upper-soft)), var(--bg-upper));
  box-shadow: var(--shadow-md);
  text-align: center;
}

.lc-portrait .ulp-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.lc-portrait .ulp-avatar > span {
  width: 150px;
  height: 150px;
  border: none;
  border-radius: 22px;
  box-shadow: none;
  font-size: var(--text-4xl);
  transition: transform 0.35s var(--ease-standard);
}

.lc-portrait:hover .ulp-avatar > span {
  transform: scale(1.04) rotate(-1.5deg);
}

.lc-portrait .ulp-avatar em {
  font-size: var(--text-xs);
}

.lc-portrait h3 {
  margin: var(--space-4) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
}

.lc-portrait-role {
  margin: var(--space-2) 0 0;
  color: var(--text-upper-secondary);
  font-size: var(--text-xs);
}

.lc-portrait-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.lc-portrait-meta li {
  padding: 3px var(--space-3);
  border: 1px solid var(--border-upper);
  border-radius: var(--radius-pill);
  color: var(--text-upper-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  transition: color 0.3s var(--ease-standard), border-color 0.3s var(--ease-standard);
}

.lc-portrait-meta li:hover {
  border-color: var(--accent-upper);
  color: var(--accent-upper);
}

/* 近况：强调色高亮卡（对应参考站 CURRENT WORK） */
.lc-now {
  flex: none;
  width: 320px;
  align-self: flex-start;
  box-sizing: border-box;
  margin-top: var(--space-12);
  padding: var(--space-6);
  border-radius: 18px;
  background: linear-gradient(150deg, var(--accent-upper), color-mix(in srgb, var(--accent-upper) 68%, var(--bg-upper)));
  color: var(--bg-upper);
  box-shadow: var(--shadow-md);
}

.lc-now .lc-card-label {
  color: color-mix(in srgb, var(--bg-upper) 82%, transparent);
}

.lc-now-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.lc-now footer {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  opacity: 0.75;
}

/* 技能：深色清单卡（对应参考站 TODO LIST），点线分隔；上移避开右下摇杆 */
.lc-skills {
  flex: none;
  width: 300px;
  align-self: flex-start;
  box-sizing: border-box;
  margin-top: var(--space-16);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border-upper);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-upper-soft) 76%, transparent);
}

.lc-skills ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lc-skills li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px dotted var(--border-upper);
  font-size: var(--text-sm);
}

.lc-skills li:last-child {
  border-bottom: none;
}

.lc-skills b {
  font-weight: 500;
}

.lc-skills span {
  color: var(--text-upper-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* 相册：错落照片墙，无外盒 */
.lc-albums {
  flex: none;
  align-self: center;
}

.lc-shelf {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.lc-shelf figure {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  overflow: hidden;
  width: 200px;
  height: 260px;
  margin: 0;
  padding: var(--space-5);
  border-radius: 14px;
  background:
    radial-gradient(120% 90% at 20% 8%, var(--accent-upper-soft), transparent 68%),
    linear-gradient(155deg, color-mix(in srgb, var(--text-upper) 18%, var(--bg-upper-soft)), var(--bg-upper));
  transform: rotate(-2.5deg);
  box-shadow: var(--shadow-md);
  transition: transform 0.35s var(--ease-standard);
}

.lc-shelf figure:hover {
  transform: rotate(0deg) translateY(-6px);
}

.lc-shelf figure:nth-of-type(2) {
  transform: rotate(2.5deg) translateY(14px);
}

.lc-shelf i {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  color: var(--accent-upper);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-style: normal;
}

/* 相册封面：铺满卡片、cover 居中；卡片自带的渐变底继续当「没照片」时的兜底 */
.lc-shelf figure img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

/* 轮播：卡片里放两层图做交叉淡入，只有 .is-front 那层可见并压在上层（2026-09-13 作者定） */
.lc-shelf figure img.lc-shelf-img {
  opacity: 0;
  transition: opacity 0.7s var(--ease-standard);
}

.lc-shelf figure img.lc-shelf-img.is-front {
  z-index: 1;
  opacity: 1;
}

.lc-shelf figcaption,
.lc-shelf figcaption b,
.lc-shelf figcaption span,
.lc-shelf figcaption em {
  transition: opacity 0.4s var(--ease-standard);
}

/* 有照片时：底部压一层深色渐变，文字改用图上色，保证可读 */
.lc-shelf figure.has-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 34%, rgba(0, 0, 0, 0.62) 100%);
}

.lc-shelf figure.has-photo i {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.42);
  color: var(--text-on-image);
}

.lc-shelf figure.has-photo figcaption b {
  color: var(--text-on-image);
}

.lc-shelf figure.has-photo figcaption span,
.lc-shelf figure.has-photo figcaption em {
  color: color-mix(in srgb, var(--text-on-image) 74%, transparent);
}

.lc-shelf figcaption {
  position: relative;
  z-index: 2;
}

.lc-shelf figcaption b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
}

.lc-shelf figcaption span {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-upper-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
}

.lc-shelf figcaption em {
  display: block;
  margin-top: var(--space-2);
  color: var(--text-upper-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-style: normal;
}

/* 作品列表：章节式清单，行悬停高亮 */
.lc-works-list {
  flex: none;
  width: 420px;
  align-self: center;
  box-sizing: border-box;
  padding: var(--space-6);
  border: 1px solid var(--border-upper);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-upper-soft) 76%, transparent);
}

.lc-works-list article {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: 1px dotted var(--border-upper);
}

.lc-works-list article:last-of-type {
  border-bottom: none;
}

.lc-works-list article > span {
  color: transparent;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  -webkit-text-stroke: 1px var(--text-upper-tertiary);
  transition: color 0.3s var(--ease-standard), -webkit-text-stroke-color 0.3s var(--ease-standard);
}

.lc-works-list article:hover > span {
  color: var(--accent-upper);
  -webkit-text-stroke-color: var(--accent-upper);
}

.lc-works-list h4 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: var(--leading-tight);
  transition: color 0.3s var(--ease-standard);
}

.lc-works-list article:hover h4 {
  color: var(--accent-upper);
}

.lc-works-list article p {
  margin: 0;
  color: var(--text-upper-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* 部分作品：收尾清单卡（对应参考站 LATEST WRITING），按钮直达下域 */
.lc-works {
  flex: none;
  width: 340px;
  align-self: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--border-upper);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-upper-soft) 76%, transparent);
}

.lc-works article h4 {
  margin: var(--space-1) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: var(--leading-tight);
}

/* 正文摘要是 120 字，在这张 340px 宽的卡里（12px 字号）就是五行，太高了
   —— 作者 2026-10-01 反馈：两行 + 省略号即可。meta 行不参与截断（它自己一条规则）。 */
.lc-works article p:not(.lc-works-meta) {
  margin: 0;
  color: var(--text-upper-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.lc-works article .lc-works-meta {
  margin: 0;
  color: var(--text-upper-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* 两枚收尾按钮：`.lc-works` 那枚「进下域」，`.lc-works-list`（作品卡）那枚「进作品页」——同一套观感 */
.lc-works button,
.lc-works-list button {
  padding: var(--space-3);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--text-upper);
  color: var(--bg-upper);
  font: inherit;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  cursor: pointer;
}

.lc-works-list button {
  /* 作品卡不是 flex 列，按钮要自己占满一行（不然只有文字那么宽） */
  width: 100%;
  margin-top: var(--space-4);
}

.lc-works button:hover,
.lc-works-list button:hover {
  background: var(--accent-upper);
}

/* 作品卡里的行：整行可点（跳该作品所在分类），给个手型 */
.lc-works-list article.lc-card-link {
  cursor: pointer;
}

/* 卡内空态（作品还没加、文章还没有） */
.lc-card-empty {
  margin: var(--space-3) 0 0;
  color: var(--text-upper-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* 摇杆：参考 afnizarnur.com —— SVG 扇形按钮（上下左右四枚，自带圆角与缝隙）
   + 居中圆球；球默认停在圆盘正中，按住左右拖动滚动、松手回中 */
.lc-dpad {
  --joystick-container-bg: color-mix(in srgb, var(--bg-upper) 40%, var(--bg-upper-soft));
  --joystick-btn: color-mix(in srgb, var(--text-upper) 13%, var(--bg-upper-soft));
  --joystick-btn-hover: color-mix(in srgb, var(--accent-upper) 32%, var(--bg-upper-soft));
  --joystick-knob-bg: color-mix(in srgb, var(--bg-upper) 30%, var(--bg-upper-soft));
  --joystick-knob-border: var(--border-upper);
  --joystick-knob-center-a: color-mix(in srgb, var(--text-upper) 30%, var(--bg-upper-soft));
  --joystick-knob-center-b: var(--bg-upper-soft);
  position: absolute;
  left: calc(100% * 2 / 3);
  bottom: var(--space-6);
  z-index: 40;
  box-sizing: border-box;
  width: 136px;
  height: 136px;
  padding: 8px;
  border: 1px solid var(--border-upper);
  border-radius: 50%;
  background: var(--joystick-container-bg);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%);
  /* 只做透明度入场：不改 transform，避免覆盖 translateX(-50%) 造成抖动 */
  animation: lc-fade 0.55s var(--ease-standard) 0.4s backwards;
}

@keyframes lc-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.lc-dpad-inner {
  position: relative;
  width: 120px;
  height: 120px;
}

/* SVG 扇形按钮：形状与圆角内建在 path 里，位置沿用参考实现的几何 */
.lc-arc {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.lc-arc svg {
  width: 100%;
  height: 100%;
}

.lc-arc svg path {
  fill: var(--joystick-btn);
  transition: fill 0.25s var(--ease-standard);
}

.lc-arc:hover svg path,
.lc-arc:focus-visible svg path {
  fill: var(--joystick-btn-hover);
}

.lc-arc.is-top {
  left: 22px;
  top: 0;
  width: 76px;
  height: 31px;
}

.lc-arc.is-left {
  left: 0;
  top: 23.5px;
  width: 30px;
  height: 73px;
}

.lc-arc.is-right {
  right: 0;
  top: 22.5px;
  width: 31px;
  height: 75px;
}

.lc-arc.is-bottom {
  bottom: 0;
  left: 23.5px;
  width: 73px;
  height: 30px;
}

/* 滑块球：默认停在圆盘正中（内框 120px - 球 68px = 两侧各留 26px），
   按住拖动时 translateX 跟手偏移（±26px）滚动，松手平滑回中 */
.lc-ball {
  position: absolute;
  left: 26px;
  top: 26px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.24),
    inset 0 -3px 8px rgba(0, 0, 0, 0.12);
}

.lc-ball:active {
  cursor: grabbing;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.32),
    0 0 18px color-mix(in srgb, var(--accent-upper) 22%, transparent);
}

.lc-ball:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-upper);
}

.lc-ball-base {
  fill: var(--joystick-knob-bg);
}

.lc-ball-ring {
  fill: none;
  stroke: var(--joystick-knob-border);
}

.lc-ball-core {
  fill: url(#lc-knob-core);
}

/* 进度轴：不画独立的线，直接用上域（深）与下域（浅）两个色块的交接当轴线；
   游标骑在交接线上，刻度小竖线与坐标标识都在线下方 */
.lc-ruler {
  position: relative;
  box-sizing: border-box;
  background: var(--bg-lower);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
}

.lc-ruler-dot {
  position: absolute;
  top: 0;
  z-index: 5;
  width: 11px;
  height: 11px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--accent-upper);
  box-shadow:
    0 0 10px var(--accent-upper),
    0 0 24px var(--accent-upper-soft);
}

.lc-ruler-labels {
  position: relative;
  padding: var(--space-2) 0 var(--space-3);
}

/* 50m/100m/150m 定位在内缩区间的 1/3、2/3、右端，与游标及内容里程柱同一公式对齐 */
.lc-ruler-labels span:first-child {
  margin-left: var(--space-6);
}

.lc-ruler-labels span:nth-child(2) {
  position: absolute;
  top: var(--space-2);
  left: calc(var(--space-6) + (100% - var(--space-12)) / 3);
}

.lc-ruler-labels span:nth-child(3) {
  position: absolute;
  top: var(--space-2);
  left: calc(var(--space-6) + (100% - var(--space-12)) * 2 / 3);
}

.lc-ruler-labels span:nth-child(4) {
  position: absolute;
  top: var(--space-2);
  right: var(--space-6);
}

.lc-ruler-labels span {
  position: relative;
}

/* 每个分割位的小竖线刻度，从交接线向下伸到标识旁 */
.lc-ruler-labels span::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--space-2));
  left: 0;
  width: 1px;
  height: var(--space-2);
  background: var(--border-strong);
}

/* 150m 的刻度贴右端 */
.lc-ruler-labels span:nth-child(4)::before {
  left: auto;
  right: 0;
}

/* ---------- 下域通用 ---------- */
.ulp-lower {
  box-sizing: border-box;
  width: 100%;
  background: var(--bg-lower);
  color: var(--text-primary);
  /* 顶部吸顶头占位：跳转下域时不要被遮住 */
  scroll-margin-top: var(--ulp-top-h);
}

.ulp-lower-inner {
  box-sizing: border-box;
  width: min(100% - var(--space-8), 1160px);
  margin-inline: auto;
  padding: var(--space-3) 0 var(--space-10);
}

.ulp-marks {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) 0 var(--space-2);
  border-bottom: 1px dashed var(--border-default);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.ulp-list-label {
  margin: var(--space-8) 0 var(--space-5);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
}

.ulp-list article {
  position: relative;
  cursor: pointer;
}

.ulp-list article:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

.ulp-no {
  color: transparent;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  -webkit-text-stroke: 1px var(--border-strong);
}

.ulp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.ulp-tags i {
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-style: normal;
}

/* 转载标（2026-09-18）：首页「最新文章」卡里与文章页角标、/posts 列表同一语义，用实底强调色区分于标签 */
.ulp-tags i.ulp-tag-repost {
  background: var(--accent);
  color: var(--on-accent);
  letter-spacing: 0.14em;
}

.ulp-foot {
  padding: var(--space-6) var(--space-4) var(--space-10);
  color: var(--text-tertiary);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* 下域 A：编号时间线 */
.ulp-list-a article {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border-subtle);
}

.ulp-list-a h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
}

.ulp-post-date {
  margin: 0 0 var(--space-2);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.ulp-post-body p {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* 下域 B：重点文章 + 卡片网格 */
.ulp-feature {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) 1.2fr;
  gap: var(--space-8);
  padding: var(--space-8);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  background: var(--bg-lower-elevated);
  box-shadow: var(--shadow-md);
}

.ulp-feature-cover {
  display: grid;
  place-items: center;
  min-height: 260px;
  border-radius: 18px;
  background:
    radial-gradient(100% 100% at 20% 0%, var(--accent-soft), transparent 65%),
    var(--bg-inset);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--text-4xl);
}

.ulp-feature h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: var(--leading-tight);
}

.ulp-feature p {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.ulp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.ulp-grid article {
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  background: var(--bg-lower-elevated);
}

.ulp-grid h3 {
  margin: var(--space-3) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
}

.ulp-grid p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* 下域 C：章节式行（封面靠右加大尺寸，标题始终左对齐） */
.ulp-list-c article {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 240px;
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border-subtle);
}

/* 封面位：真封面（上传件/图床）由模板给 background-image 铺缩略图；老关键字封面走下面的变体类 */
.ulp-cover {
  grid-column: 3;
  grid-row: 1 / span 3;
  justify-self: end;
  width: 240px;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--bg-inset);
  /* 写在 shorthand 之后：上面那行会把 size/position 重置，这里再盖回来（真图才是 cover） */
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.35s var(--ease-standard),
    box-shadow 0.35s var(--ease-standard);
}

.ulp-list-c article:hover .ulp-cover {
  transform: scale(1.03) rotate(-0.6deg);
  box-shadow: var(--shadow-md);
}

/* 无封面文章：宽版布局，文字占满编号右侧 */
.ulp-list-c article.is-no-cover {
  grid-template-columns: 86px minmax(0, 1fr);
}

.ulp-list-c article.is-no-cover h3,
.ulp-list-c article.is-no-cover > p,
.ulp-list-c article.is-no-cover .ulp-row-meta {
  grid-column: 2;
}

/* 封面占位变体：电路网格 / 极光 / 暮色 */
.ulp-cover.is-circuit {
  background:
    linear-gradient(color-mix(in srgb, var(--accent) 45%, transparent) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent) 1px, transparent 1px) 0 0 / 14px 14px,
    radial-gradient(120% 130% at 18% 8%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%),
    color-mix(in srgb, var(--text-primary) 86%, var(--bg-inset));
}

.ulp-cover.is-aurora {
  background:
    radial-gradient(90% 120% at 78% 12%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 60%),
    radial-gradient(80% 100% at 18% 88%, var(--accent-soft), transparent 58%),
    color-mix(in srgb, var(--text-primary) 82%, var(--bg-inset));
}

.ulp-cover.is-mesh {
  background:
    linear-gradient(color-mix(in srgb, var(--accent) 26%, transparent) 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 26%, transparent) 1px, transparent 1px) 0 0 / 8px 8px,
    var(--bg-inset);
}

.ulp-cover.is-dusk {
  background:
    radial-gradient(100% 90% at 80% 100%, var(--accent-soft), transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 34%, var(--bg-inset)), color-mix(in srgb, var(--text-primary) 72%, var(--bg-inset)));
}

.ulp-cover.is-mono {
  background:
    repeating-linear-gradient(45deg, var(--border-default) 0, var(--border-default) 1px, transparent 1px, transparent 10px),
    var(--bg-inset);
}

.ulp-list-c h3 {
  grid-column: 2;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.ulp-list-c article:hover h3 {
  color: var(--accent);
}

.ulp-list-c .ulp-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4);
  grid-column: 2;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* 标签与时间/阅读分钟同处 meta 行，取消全局标签的上边距避免错位 */
.ulp-list-c .ulp-row-meta .ulp-tags {
  margin-top: 0;
}

.ulp-list-c article > p {
  grid-column: 2;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* 布局切换条 */
.ulp-switcher {
  position: fixed;
  left: 50%;
  bottom: var(--space-4);
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.ulp-switcher button {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--text-primary);
  cursor: pointer;
}

@media (max-width: 760px) {
  .ulp-rail {
    padding-inline: var(--space-5);
    gap: var(--space-5);
  }

  .ulp-avatar > span {
    width: 130px;
    height: 130px;
  }

  .ulp-upper {
    height: calc(60vh - var(--ulp-top-h));
  }

  .la-intro,
  .la-skills,
  .la-moments,
  .la-album,
  .la-user,
  .lb-left,
  .lb-skills,
  .lb-moments,
  .lb-album,
  .lb-user {
    width: min(80vw, 400px);
    align-self: auto;
    margin: var(--space-2);
  }

  /* Layout C 小屏：卡片收窄，标题允许缩小，摇杆保持在 100m 上方 */
  .lc-rail {
    gap: var(--space-8);
    padding-inline: var(--space-5);
  }

  .lc-hero h2 {
    font-size: clamp(2.2rem, 9vw, 3rem);
  }

  .lc-hero,
  .lc-bio,
  .lc-now,
  .lc-works-list,
  .lc-works {
    width: min(78vw, 380px);
  }

  .lc-bio {
    margin-bottom: var(--space-4);
  }

  .lc-portrait {
    width: min(64vw, 300px);
  }

  .lc-skills {
    width: min(70vw, 300px);
  }

  .lc-dpad {
    transform: translateX(-50%) scale(0.85);
  }

  .ulp-feature {
    grid-template-columns: 1fr;
    padding: var(--space-5);
  }

  .ulp-grid {
    grid-template-columns: 1fr;
  }

  /* 小屏：导航收起（仅保留主题切换），列表封面通栏 */
  .ulp-nav {
    display: none;
  }

  .ulp-list-c article {
    grid-template-columns: 1fr;
  }

  .ulp-list-c h3,
  .ulp-list-c article > p,
  .ulp-list-c .ulp-row-meta {
    grid-column: 1;
  }

  .ulp-list-c .ulp-cover {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }
}

/* ---------- 首屏三栏：标题（左上）/ 自我介绍（左下）/ 头像卡（跟着有效视宽连续走） ----------
   2026-09-14 作者反馈：办公室 1920×1080 下头像卡被左边的标题 + 自我介绍挤到 2/3 视宽处，
   正好被摇杆（`.lc-dpad` 定位在 66.7vw）压住一角；家里 2560×1440 看着正常，只是因为
   轨道是定宽 max-content、卡中心（≈1276px）恰好落在更大的视口中间。
   处理（作者建议：自我介绍绝对定位往左挪）：把标题、自我介绍移出轨道占位，左上 / 左下各一块，
   头像卡改由「上域有效视宽」定位。

   **为什么不用媒体查询**：早先写成 `@media (min-width: 1500px)` 切换两套布局，窗口跨过 1500px
   时卡片位置会整体跳一下（作者：拖动窗口直接变位置挺丑的）。现在：
   ① 三栏布局对所有宽度都生效（窄屏/手机在文件末尾的 `@media (max-width: 760px)` 里退回顺排）；
   ② 卡片的左边距是 `--lc-stage-vw` 的线性函数（两个线性项取 min → 连续，拖动窗口是平滑移动）；
   ③ `--lc-stage-vw = max(--lc-min-w, 100vw)` 提供最小宽度兜底：窗口窄于 `--lc-min-w` 后位置不再变化，
   上域出现横向滚动（它本来就是横向舞台），页面其余部分不受影响。 */
.lc-rail > .lc-hero,
.lc-rail > .lc-bio {
  /* 轨道子项通用规则 `.lc-rail > :not(.lc-mile)` 写死了 position: relative，
     这里用同等特异度 + 更靠后的顺序覆盖成 absolute */
  position: absolute;
  z-index: 1;
}

/* 标题：左上角（= 轨道上留白 12px + 左留白 40px + 原来的 24px 缩进） */
.lc-rail > .lc-hero {
  top: var(--space-3);
  left: calc(var(--space-10) + var(--space-6));
  margin-left: 0;
}

/* 自我介绍：左下角；作者定「比标题再往右 50px、往下 20px」——和标题错开一点，不做左对齐。
   比 1920 更宽的屏再往上、往右让一点（每多 100px 宽度 → 再往右 8px、再往上 10px）：
   大屏更空旷，贴死左下角会显得又靠左又靠下（作者 2026-09-14 第三轮反馈）。 */
.lc-rail > .lc-bio {
  width: var(--lc-bio-w);
  bottom: calc(var(--space-6) + var(--space-10) - 20px + var(--lc-extra-vw) * 0.1);
  left: calc(var(--space-10) + var(--space-6) + 50px + var(--lc-extra-vw) * 0.08);
  margin-bottom: 0;
}

/* 头像卡：**不追视口中线**，固定落位（作者第四轮：大屏上标题/自我介绍离卡片太远、中间发空；
   第五轮：1920 下离左边标题仍偏远 → 再往左 92px）。
   620px 边距 = 卡片左缘 660px：与自我介绍右缘（494）留 166px、与标题右缘（563）留 97px；
   620 + 40（轨道左留白）+ 160（卡宽一半）这一串是绑定的，改卡宽/卡位要一起看。
   max() 里的第一项是**下界**：卡片左缘不许压到标题（标题宽度 ≈ 6.24 个字号宽，字号见 --lc-title-f）——
   没有它时，窄视口上「让开摇杆」那一项会把卡片推到标题身上；
   第二项 min() 是固定落位与「让开 2/3 处摇杆」安全边（摇杆左缘 ≈ 66.667% × 有效视宽 − 68）取小。 */
.lc-portrait {
  width: var(--lc-card-w);
  margin-left: max(
    calc(40px + 6.24 * var(--lc-title-f)),
    calc(var(--lc-bio-right) + 16px - var(--space-10)),
    min(620px, calc(var(--lc-stage-vw) * 0.66667 - 128px - var(--lc-card-w)))
  );
}

/* ---------- 手机（≤760px）：首屏三栏退回顺排 ----------
   必须在文件末尾：上面的三栏规则与这里的规则特异度相同，靠「后者胜出」覆盖；
   同时把被覆盖掉的移动端样式（标题字号、自我介绍下边距）重新声明回来。 */
@media (max-width: 760px) {
  /* 上域取消最小宽度，跟着手机屏走 */
  .ulp-upper {
    min-width: 0;
  }

  /* 标题、自我介绍回到轨道里排队 */
  .lc-rail > .lc-hero,
  .lc-rail > .lc-bio {
    position: relative;
    top: auto;
    left: auto;
  }

  .lc-rail > .lc-hero {
    margin-left: var(--space-6);
  }

  .lc-hero h2 {
    font-size: clamp(2.2rem, 9vw, 3rem);
  }

  .lc-rail > .lc-bio {
    width: min(78vw, 380px);
    bottom: auto;
    margin-bottom: var(--space-4);
  }

  .lc-portrait {
    width: min(64vw, 300px);
    margin-left: 0;
  }
}