/* 光王个人主页 v10 — 深色编辑风：极光渐变、巨型排版、跑马灯与克制动效。
   无框架、无远程字体、无强制加载；首屏纯 CSS 进场，其余渐进增强。 */
:root {
  /* 基础层 */
  --bg: #121120;
  --bg-2: #1c1a2e;
  --ink: #f7f4ef;
  --muted: #bab4a9;
  --line: rgb(247 244 239 / 14%);
  --line-strong: rgb(247 244 239 / 30%);
  --a1: #6d7cff;
  --a2: #b06cff;
  --a3: #ff6fb5;
  --grad: linear-gradient(115deg, var(--a1), var(--a2) 48%, var(--a3));
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --size-small: 0.875rem;
  --size-body: 1.0625rem;
  --size-h2: clamp(2.125rem, 5vw, 3.5rem);
  --size-display: clamp(4.5rem, 16vw, 11rem);
  --leading-body: 1.8;
  --leading-display: 0.96;
  --tracking-wide: 0.2em;
  --nav-h: 68px;
  --gutter: var(--space-5);
  --container: 1180px;
  --duration-fast: 220ms;
  --duration-base: 420ms;
  --duration-slow: 760ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* 语义层 */
  --surface: var(--bg);
  --surface-alt: var(--bg-2);
  --surface-1: #171625;
  --surface-2: #1e1c2e;
  --text: var(--ink);
  --text-secondary: var(--muted);
  --accent: var(--a3);
  --focus: var(--a2);
  /* 组件层 */
  --font: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --font-latin: Georgia, "Times New Roman", serif;
  --font-serif: Georgia, "Times New Roman", "Songti SC", serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --target: 44px;
  --radius: 999px;
  --radius-lg: 18px;
  --edge-w: 46px;
}

/* 跨文档页间过渡：Chrome / Edge 生效，其余浏览器直接切换。 */
@view-transition { navigation: auto; }
.wordmark, .blog-head__brand { view-transition-name: brand; }
.hero__title { view-transition-name: hero-title; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 460ms; }

* { box-sizing: border-box; }
body, h1, h2, h3, p, figure, ul, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: dark; }
body {
  background-color: var(--surface);
  /* 底色洗一层固定的极光：左上靛蓝、中间紫、右下品红，滚动时始终在。
     再叠平铺网格（网格要自己带 background-size，否则会跟着极光一起被拉伸）。 */
  background-image:
    radial-gradient(90rem 60rem at 10% -12%, rgb(109 124 255 / 15%), transparent 62%),
    radial-gradient(76rem 54rem at 48% 42%, rgb(154 108 255 / 11%), transparent 66%),
    radial-gradient(84rem 58rem at 94% 110%, rgb(255 111 181 / 15%), transparent 60%),
    linear-gradient(rgb(247 244 239 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(247 244 239 / 4%) 1px, transparent 1px);
  background-size: auto, auto, auto, 68px 68px, 68px 68px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-attachment: fixed, fixed, fixed, scroll, scroll;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
a, summary { -webkit-tap-highlight-color: transparent; }
/* 正文里的行内链接：默认像正文，悬停时才亮起来。 */
.text-link {
  color: var(--text);
  text-decoration: underline;
  /* 点线下划线（samuelkraft.com 那挂的安静做法）：行内链接先退到正文里，悬停才亮。 */
  text-decoration-style: dotted;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--duration-fast) var(--ease), text-decoration-color var(--duration-fast) var(--ease);
}
.text-link:hover { color: var(--accent); text-decoration-color: currentColor; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--a2); color: #121120; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
section[id] { scroll-margin-top: var(--nav-h); }
/* 粉色强调点；在章节内会被该节的色相覆盖，见 .sec 的 --sec-a。 */
.accent { color: var(--sec-a, var(--accent)); }

/* 背景粒子：位于内容之下，仅作氛围。 */
.stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
/* 暗角：把视线收进画面中央，像一间只开了侧灯的房间。 */
.vignette {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, transparent 46%, rgb(5 4 12 / 32%) 100%),
    linear-gradient(180deg, rgb(5 4 12 / 18%), transparent 22%, transparent 78%, rgb(5 4 12 / 26%));
}
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
/* 光标辉光：跟随指针的柔和光斑，仅桌面端启用。 */
.cursor-glow {
  position: fixed; top: 0; left: 0; z-index: -1;
  width: 560px; height: 560px; margin: -280px 0 0 -280px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgb(109 124 255 / 16%), rgb(176 108 255 / 8%) 55%, transparent 75%);
  transition: opacity 500ms var(--ease);
}
.cursor-glow.is-on { opacity: 1; }

/* 自定义光标：圆点即时跟随，光环缓动追随；仅在脚本成功启用时替换系统光标。 */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 70;
  border-radius: 50%; pointer-events: none; opacity: 0;
  transform: translate3d(-100px, -100px, 0);
}
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--a3); }
.cursor-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid var(--line-strong);
  transition: width var(--duration-base) var(--ease), height var(--duration-base) var(--ease), margin var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease), background var(--duration-base) var(--ease);
}
.cursor-ring.is-hover {
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-color: var(--a2); background: rgb(176 108 255 / 12%);
}
body.has-cursor .cursor-dot, body.has-cursor .cursor-ring { opacity: 1; }
body.has-cursor, body.has-cursor a, body.has-cursor button, body.has-cursor summary { cursor: none; }

/* 噪点质感：静态平铺，不参与动画。 */
.noise {
  position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip-link {
  position: absolute; left: var(--gutter); top: var(--space-2); z-index: 60;
  padding: var(--space-3) var(--space-5);
  background: var(--ink); color: var(--bg);
  font-size: var(--size-small); transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

/* ---------- 滚动进度 ---------- */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 50; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }

/* ---------- 导航 ---------- */
.masthead {
  position: fixed; inset: 0 0 auto; z-index: 40; height: var(--nav-h);
  background: rgb(8 8 10 / 64%);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid var(--line);
  transition: height var(--duration-base) var(--ease), background var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease);
}
html.is-scrolled .masthead {
  background: rgb(8 8 10 / 82%);
  border-bottom-color: rgb(247 244 239 / 9%);
}
/* 紧凑高度只在桌面生效：移动端页头会换行，必须保持 auto 高度。 */
@media (min-width: 768px) {
  html.is-scrolled .masthead { height: 56px; }
}
.masthead__inner {
  max-width: var(--container); height: 100%; margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.wordmark { display: inline-flex; align-items: center; min-height: var(--target); font-size: 1.35rem; font-weight: 700; }
.wordmark__dot { color: var(--accent); }
.navigation { display: flex; gap: var(--space-1); }
.navigation a {
  position: relative;
  display: inline-flex; align-items: center; min-height: var(--target);
  padding-inline: var(--space-4);
  font-size: var(--size-small); color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease);
}
.navigation a::after {
  content: ""; position: absolute; left: var(--space-4); right: var(--space-4); bottom: 14px; height: 1px;
  background: var(--grad); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--duration-base) var(--ease);
}
.navigation a:hover { color: var(--text); }
.navigation a:hover::after { transform: scaleX(1); }
.navigation a[aria-current="true"] { color: var(--text); }
.navigation a[aria-current="true"]::after { transform: scaleX(1); }

/* ---------- 左侧竖向导轨（≥1280px，仅装饰） ---------- */
.edge-rail { display: none; }
@media (min-width: 1280px) {
  .edge-rail {
    position: fixed; left: 20px; top: 0; bottom: 0; z-index: 35;
    width: var(--edge-w);
    display: flex; flex-direction: column; align-items: center;
    padding: calc(var(--nav-h) + 24px) 0 var(--space-8);
    pointer-events: none;
  }
  .edge-rail__mark {
    writing-mode: vertical-rl;
    font-family: var(--font-mono); font-size: 0.625rem;
    letter-spacing: 0.32em; color: var(--text-secondary); opacity: 0.72;
  }
  .edge-rail__track {
    position: relative; flex: 1; width: 1px; margin-block: var(--space-5);
    background: var(--line); overflow: hidden;
  }
  .edge-rail__pct {
    font-family: var(--font-mono); font-size: 0.625rem;
    letter-spacing: 0.12em; color: var(--text-secondary);
    margin-bottom: var(--space-5); font-variant-numeric: tabular-nums;
  }
  .edge-rail__dots {
    display: flex; flex-direction: column; gap: var(--space-3);
    font-family: var(--font-serif); font-size: 0.75rem;
    color: var(--text-secondary); font-variant-numeric: lining-nums;
  }
  .edge-rail__dots li {
    opacity: 0.34;
    transition: opacity var(--duration-base) var(--ease), color var(--duration-base) var(--ease);
  }
  .edge-rail__dots li.is-active { opacity: 1; color: var(--a3); }
}

/* ---------- 首屏 ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + var(--space-12)) var(--gutter) var(--space-8);
  max-width: var(--container); margin-inline: auto;
  overflow: hidden;
}
.hero__bg {
  position: absolute; left: 50%; bottom: 1%; z-index: -2;
  transform: translateX(calc(-50% + var(--mx, 0px))) translate3d(0, var(--my, 0px), 0);
  font-family: var(--font-mono); font-size: clamp(4rem, 24vw, 22rem);
  font-weight: 700; letter-spacing: -0.02em; line-height: 0.78;
  white-space: nowrap; user-select: none; pointer-events: none;
  color: transparent; -webkit-text-stroke: 1px rgb(245 242 236 / 9%);
  will-change: transform;
}
.hero__glow {
  position: absolute; left: 50%; top: 36%; z-index: -1;
  width: min(105vw, 1000px); aspect-ratio: 3 / 2;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgb(109 124 255 / 30%), rgb(176 108 255 / 14%) 50%, transparent 76%);
  filter: blur(40px); pointer-events: none;
}
.hero__glow::after {
  content: ""; position: absolute; inset: 0; transform: translate(28%, 14%);
  background: radial-gradient(closest-side, rgb(255 111 181 / 22%), transparent 72%);
}
/* 首屏隐形网格 + 中心聚光，随鼠标轻微偏移。 */
.hero__grid {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgb(247 244 239 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(247 244 239 / 4%) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: calc(var(--mx, 0px) * 0.35) calc(var(--my, 0px) * 0.35);
  -webkit-mask-image: radial-gradient(70% 65% at 50% 42%, #000 0%, transparent 78%);
  mask-image: radial-gradient(70% 65% at 50% 42%, #000 0%, transparent 78%);
  opacity: 0.7;
}
.hero__inner { display: grid; gap: var(--space-8); flex: 1; align-content: center; }
.hero__copy { min-width: 0; }
.hero__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  margin-bottom: var(--space-6);
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.hero__meta-rule { width: 44px; height: 1px; background: var(--line-strong); }
#localClock { color: var(--text); }
.hero__status {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: var(--space-6);
}
.hero__status span:last-child { color: var(--accent); }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--a3); box-shadow: 0 0 0 0 rgb(255 111 181 / 50%); animation: pulse 2.6s ease-out infinite; }
/* 胶囊徽章：微软官网大标题上方那挂小胶囊，这里装的是一句真实自我介绍。 */
.hero__chip { margin: calc(-1 * var(--space-2)) 0 var(--space-5); }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 30px; padding-inline: var(--space-4);
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: rgb(247 244 239 / 4%);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em;
  color: var(--text-secondary);
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--a3); }
html[data-theme="light"] .chip { background: rgb(23 23 28 / 4%); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgb(255 111 181 / 45%); }
  70% { box-shadow: 0 0 0 10px rgb(255 111 181 / 0%); }
  100% { box-shadow: 0 0 0 0 rgb(255 111 181 / 0%); }
}
.hero__title { font-size: var(--size-display); font-weight: 800; line-height: var(--leading-display); letter-spacing: -0.04em; text-shadow: 0 0 60px rgb(109 124 255 / 25%); }
/* 署名用等宽字体：Georgia 斜体的数字 0 与小写 o 几乎无法区分。 */
[lang="en"] { font-family: var(--font-mono); font-style: normal; }

/* 首屏动效增强：署名打字机光标 + 标题逐字入场 */
.alias-caret {
  display: inline-block; width: 2px; height: 0.85em;
  margin-left: 5px; vertical-align: -0.06em;
  background: var(--a3); animation: caretBlink 1.1s step-end infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .js .hero__title .tchar {
    display: inline-block;
    opacity: 0; transform: translateY(0.45em);
    transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  }
  .js .hero__title .tchar.is-in { opacity: 1; transform: none; }
}

.hero__alias {
  font-family: var(--font-mono); font-style: normal;
  font-size: clamp(1.5rem, 4vw, 3rem); line-height: 1.2; letter-spacing: -0.01em;
  margin-top: var(--space-4); overflow-wrap: anywhere;
  background-image: linear-gradient(115deg, var(--a1), var(--a2) 34%, var(--a3) 62%, var(--a1));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: flow 9s linear infinite;
}
@keyframes flow { to { background-position: 220% 0; } }
.hero__intro { margin-top: var(--space-8); color: var(--text-secondary); }
.hero__links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--target); padding: var(--space-3) var(--space-8);
  border-radius: var(--radius); font-size: var(--size-small);
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.btn--solid { background: var(--ink); color: var(--bg); font-weight: 500; }
.btn--solid:hover { background: #fff; box-shadow: 0 12px 32px -12px rgb(245 242 236 / 45%); }
.btn--ghost { border: 1px solid var(--line-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--a2); color: #fff; box-shadow: 0 12px 32px -16px rgb(176 108 255 / 70%); }

.hero__portrait {
  position: relative; justify-self: center; align-self: center;
  display: grid; place-items: center; width: min(100%, 320px);
  translate: 0 var(--py, 0px);
}
.hero__portrait-inner { position: relative; display: grid; place-items: center; width: 100%; }
.hero__halo {
  position: absolute; inset: -15%; z-index: -1; border-radius: 50%;
  background: conic-gradient(from 200deg, var(--a1), var(--a2), var(--a3), var(--a1));
  filter: blur(34px); opacity: 0.6;
}
/* 一圈极细的虹彩轨道：比整块光晕更"贵"。 */
.hero__ring {
  position: absolute; inset: -7%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 52%, rgb(109 124 255 / 80%) 68%, rgb(255 111 181 / 80%) 84%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
  opacity: 0.85;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__ring { animation: orbit 16s linear infinite; }
}
@keyframes orbit { to { transform: rotate(360deg); } }
.hero__portrait img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line-strong), 0 0 70px -10px rgb(123 140 255 / 60%), 0 34px 90px -34px rgb(176 108 255 / 80%);
}
.hero__figcaption {
  margin-top: var(--space-5);
  font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-secondary); opacity: 0.8;
}
.hero__cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2);
  align-self: center; margin-top: var(--space-8);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease);
}
.hero__cue:hover { color: var(--text); }
.hero__cue i { display: block; width: 1px; height: 44px; background: linear-gradient(var(--line-strong), transparent); position: relative; overflow: hidden; }
.hero__cue i::after { content: ""; position: absolute; inset: -50% 0 auto; height: 50%; background: var(--a3); animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0% { top: -50%; } 60%, 100% { top: 100%; } }

.hero__foot { display: grid; gap: var(--space-6); }
.hero__foot .hero__cue { margin-top: 0; }
/* 有真实信息的跑马灯：不是填充词，是本站的事实清单。 */
.ticker {
  overflow: hidden; padding-block: var(--space-3);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__track {
  display: flex; align-items: center; width: max-content; gap: var(--space-6);
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-secondary); white-space: nowrap;
}
.ticker__track i { color: var(--a3); font-style: normal; font-size: 0.5rem; }
@media (prefers-reduced-motion: no-preference) {
  .ticker__track { animation: ticker 42s linear infinite; }
  .ticker:hover .ticker__track { animation-play-state: paused; }
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- 首页章节骨架 ----------
   刻意与作品详情页用的 .chapter 分开：作品页是"左标签 + 右正文"的固定骨架，
   首页要的是每节版式不同，所以另起一套。 */
.sec {
  /* clip 而非 hidden：同样裁掉幽灵编号的出界部分，但不会生成滚动容器——
     否则过程区的 sticky 左栏和 view() 滚动视差都会失效（v25 踩过的坑）。
     老浏览器不认识 clip 就回落到 hidden，只是少一点动效。 */
  position: relative; overflow: hidden; overflow: clip;
  padding-block: clamp(72px, 9vw, 124px);
  --sec-a: var(--a3);
  --sec-glow: rgb(255 111 181 / 15%);
}
/* 分章配色：整页是一条色相旅程，从靛蓝一路走到珊瑚。
   色落在编号、圆点、细线、悬停这类小面积上；v32 起，大块的环境光
   也吃同一套色相——每节两团、缓慢漂移，滚动像穿过一片一片的光。 */
.sec--about   { --sec-a: #6d7cff; --sec-glow: rgb(109 124 255 / 38%); padding-block: clamp(56px, 7vw, 96px); }
.sec--room    { --sec-a: #8a70ff; --sec-glow: rgb(138 112 255 / 34%); }
.sec--process { --sec-a: #9a6cff; --sec-glow: rgb(154 108 255 / 38%); padding-block: clamp(64px, 8vw, 108px); }
.sec--site    { --sec-a: #c96cff; --sec-glow: rgb(201 108 255 / 36%); padding-block: clamp(88px, 11vw, 152px); }
.sec--work    { --sec-a: #ff6fb5; --sec-glow: rgb(255 111 181 / 40%); padding-block: clamp(96px, 12.5vw, 176px); }
.sec--contact { --sec-a: #ff8f6b; --sec-glow: rgb(255 143 107 / 36%); padding-block: clamp(56px, 7vw, 96px); }

/* 章节幽灵编号：超大、只描边、压在背景里，制造版面的纵深。 */
.sec__ghost {
  position: absolute; top: 2%; right: 1%; z-index: 0;
  font-family: var(--font-serif); font-size: clamp(8rem, 24vw, 21rem);
  line-height: 0.78; letter-spacing: -0.06em; font-variant-numeric: lining-nums;
  color: transparent; -webkit-text-stroke: 1px rgb(247 244 239 / 7%);
  pointer-events: none; user-select: none;
}
.sec--about .sec__ghost, .sec--site .sec__ghost, .sec--contact .sec__ghost { right: auto; left: -1%; }
.sec--process .sec__ghost, .sec--work .sec__ghost { top: -1%; }

/* 每节两团环境光，位置交错、相位相反——滚动时像穿过一片一片的光。
   只动 transform（合成层），blur 是静态栅格，动画不吃重绘。 */
.sec::before, .sec::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  aspect-ratio: 1 / 1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--sec-glow), transparent 72%);
  filter: blur(64px);
}
.sec::before {
  width: min(92vw, 960px);
  animation: sec-drift 46s ease-in-out infinite alternate;
}
.sec::after {
  width: min(58vw, 600px); opacity: 0.8;
  background: radial-gradient(closest-side, var(--sec-glow), transparent 70%);
  filter: blur(76px);
  animation: sec-drift 64s ease-in-out infinite alternate-reverse;
}
/* 只平移不缩放：缩放会逼浏览器每帧重算 blur（软渲染下直接掉到个位数帧率），
   平移可以整帧搬纹理，光斑大小靠元素自身尺寸给足。 */
@keyframes sec-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--dx, 7%), var(--dy, -9%), 0); }
}
.sec--about::before   { --dx: 9%; --dy: -7%; top: -14%; left: -16%; }
.sec--about::after    { --dx: -12%; --dy: 10%; bottom: -18%; right: -8%; }
.sec--room::before    { --dx: -10%; --dy: 8%; top: -10%; right: -14%; left: auto; }
.sec--room::after     { --dx: 8%; --dy: -12%; bottom: -16%; left: -10%; }
.sec--process::before { --dx: -9%; --dy: 9%; top: -8%; right: -14%; left: auto; }
.sec--process::after  { --dx: 10%; --dy: -8%; bottom: -20%; left: -8%; }
.sec--site::before    { --dx: 8%; --dy: 10%; bottom: -20%; left: 2%; }
.sec--site::after     { --dx: -9%; --dy: -10%; top: -16%; right: -6%; }
.sec--work::before    { --dx: -7%; --dy: 8%; top: -12%; right: -10%; left: auto; width: min(94vw, 1040px); }
.sec--work::after     { --dx: 9%; --dy: -9%; bottom: -18%; left: -6%; }
.sec--contact::before { --dx: 8%; --dy: -9%; bottom: -22%; right: -12%; left: auto; }
.sec--contact::after  { --dx: -10%; --dy: 9%; top: -18%; left: -8%; }
/* 浅色底上大彩光容易发脏：整层按 6 折出光。 */
html[data-theme="light"] .sec::before, html[data-theme="light"] .sec::after { opacity: 0.6; }
html[data-theme="light"] .sec::after { opacity: 0.48; }
@media (prefers-reduced-motion: reduce) {
  .sec::before, .sec::after { animation: none; }
}

.sec--band { background: var(--surface-alt); border-block: 1px solid var(--line); }
.sec__inner {
  position: relative; z-index: 1;
  max-width: var(--container); margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid; gap: clamp(28px, 4.5vw, 52px);
}
/* 章节抬头：一条通栏细线，编号用该节色相，英文名推到最右；
   细线左端再接一小段同色渐隐的"光缝"，让每节的色落在线条上而不只是数字上。 */
.sec__eyebrow {
  position: relative;
  display: flex; align-items: baseline; gap: var(--space-4);
  padding-bottom: var(--space-5); border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.sec__eyebrow::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 140px; height: 1px;
  background: linear-gradient(90deg, var(--sec-a), transparent);
}
.sec__no { color: var(--sec-a); font-family: var(--font-serif); font-size: 0.875rem; letter-spacing: 0.04em; font-variant-numeric: lining-nums; }
.sec__en { margin-left: auto; color: var(--text-secondary); }
.sec__display { font-size: clamp(2.25rem, 6vw, 4.25rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; }
.sec__head2 { display: grid; gap: var(--space-5); max-width: 46rem; }
/* 大引言：整站唯一放大的正文，用来给版面制造主次。 */
.sec__lede { font-size: clamp(1.1875rem, 2.2vw, 1.75rem); line-height: 1.6; }
.sec__split { display: grid; gap: clamp(28px, 4vw, 56px); }
.sec__aside h2 + p { margin-top: var(--space-5); color: var(--text-secondary); }
.sec__aside p:not(.signature) { color: var(--text-secondary); }
.sec__aside p + p { margin-top: var(--space-4); }
.sec__aside .signature { color: var(--text); }

/* ---------- 做站过程：横向时间轴（桌面）/ 纵向（移动） ---------- */
.rail { position: relative; display: grid; gap: var(--space-8); --rail-progress: 0; }
.rail__progress { display: none; }
.rail__item { position: relative; padding-left: var(--space-8); padding-bottom: var(--space-6); border-left: 1px solid var(--line); }
.rail__item:last-child { padding-bottom: 0; }
.rail__dot {
  position: absolute; left: -4px; top: 6px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--sec-a); box-shadow: 0 0 16px 2px var(--sec-glow);
}
.rail__no { display: block; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: var(--tracking-wide); color: var(--text-secondary); }
.rail__item h3 { margin-top: var(--space-3); font-size: 1.375rem; }
.rail__item p { margin-top: var(--space-3); color: var(--text-secondary); line-height: 1.8; }

/* 插句带：两节之间的一句态度话。字随滚动逐个点亮（CSS 滚动驱动动画，
   参考 Linear / Stripe 的逐词淡入）；不支持的浏览器和关掉动效时就是普通大字。 */
/* 插句带做成苹果官网那种反色整块 tile：暗色主题里是一块亮 tile，浅色主题里反过来。
   --ink 与 --bg 在两套主题里互换，所以一行就够。 */
.statement {
  padding: clamp(72px, 14vh, 150px) var(--gutter); text-align: center;
  background: var(--ink); color: var(--bg);
}
.statement__line {
  margin: 0;
  font-size: clamp(1.75rem, 5.4vw, 4rem);
  font-weight: 700; letter-spacing: 0.06em; line-height: 1.6;
  color: inherit;
}
.statement__w { display: inline-block; padding-inline: 0.12em; }

/* ---------- 小屋：纯 CSS 的 3D 体素场景 ----------
   参考 terryhu.cn「把个人网站建成我的世界」的思路——网站是一间可以逛的屋子。
   但那里用 Three.js + WebGL，这里坚持手写零依赖：六个面拼一个立方体，
   三十来个立方体拼一间屋，拖拽旋转靠改两个 CSS 变量，昼夜靠 html[data-daypart]。
   没有脚本时场景停在默认角度，照样是一幅完整的等距画。 */
:root {
  --rm-floor: #2b2836; --rm-wall: #3a3648; --rm-wall-edge: #4a4658;
  --rm-wood: #6b5a48; --rm-wood-dark: #4a3e33;
  --rm-fab: #4a4f6a; --rm-rug: #3d3f5c; --rm-ink2: #23222b;
  --rm-board: #223c34; --rm-pot: #7a4a3a;
  --rm-leaf: #3f7a4e; --rm-leaf2: #55915f; --rm-shade: #d8cfae;
  --rm-acc1: #d1488f; --rm-acc2: #5563d6; --rm-acc3: #8a4fd0;
  --rm-sky: linear-gradient(#7ab4e8, #b8dcf4);
  --rm-lamp: 0;                      /* 灯罩亮度开关：0 关 1 开 */
}
html[data-theme="light"] {
  --rm-floor: #d8d4cc; --rm-wall: #e6e2da; --rm-wall-edge: #f2eee6;
  --rm-wood: #a8896a; --rm-wood-dark: #7d6549;
  --rm-fab: #b9bfd8; --rm-rug: #c9c4d8; --rm-ink2: #6a6a72;
  --rm-board: #2e4a40; --rm-pot: #a06a52;
  --rm-leaf: #4e8a5a; --rm-leaf2: #63a06c; --rm-shade: #efe7c8;
  --rm-acc1: #c2417f; --rm-acc2: #4c5cd6; --rm-acc3: #7a41c0;
}
/* 昼夜四段：窗里的天、灯、光池跟着换。浅色主题下天色不变——天就是天。 */
html[data-daypart="dawn"]  { --rm-sky: linear-gradient(#2b2340, #b46a8a 58%, #e8a08a); --rm-lamp: 1; }
html[data-daypart="day"]   { --rm-sky: linear-gradient(#7ab4e8, #b8dcf4); --rm-lamp: 0; }
html[data-daypart="dusk"]  { --rm-sky: linear-gradient(#241b3e, #c46a5a 62%, #e89a6a); --rm-lamp: 1; }
html[data-daypart="night"] { --rm-sky: linear-gradient(#0b0a18, #1c1a34 68%, #2a2748); --rm-lamp: 1; }

.room { position: relative; margin-top: var(--space-8); }
.room__stage {
  position: relative;
  height: clamp(360px, 44vw, 560px);
  perspective: 1500px;
  perspective-origin: 50% 34%;
  touch-action: pan-y;               /* 竖着滑仍是滚页面，横着拖才转屋子 */
  cursor: grab;
  -webkit-user-select: none; user-select: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(109 124 255 / 7%), transparent 60%),
    linear-gradient(var(--surface-2), var(--surface));
  overflow: hidden;
}
.room__stage.is-dragging { cursor: grabbing; }
/* 地面投影：让屋子"落"在舞台上，而不是飘着。 */
.room__stage::before {
  content: ""; position: absolute; left: 50%; top: 76%;
  width: min(64%, 460px); height: 90px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgb(0 0 0 / 38%), transparent 72%);
  filter: blur(10px); pointer-events: none;
}
html[data-theme="light"] .room__stage::before { background: radial-gradient(closest-side, rgb(60 50 90 / 22%), transparent 72%); }
/* 四周压暗，把视线收进屋里。 */
.room__stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(115% 95% at 50% 42%, transparent 55%, rgb(8 7 16 / 42%) 100%);
}
html[data-theme="light"] .room__stage::after { background: radial-gradient(115% 95% at 50% 42%, transparent 58%, rgb(70 60 110 / 16%) 100%); }

.room__scene {
  position: absolute; left: 50%; top: 54%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, -20deg)) rotateY(var(--ry, -40deg)) scale(var(--rs, 1.45));
}
@media (max-width: 1023px) { .room__scene { --rs: 1.15; } }
@media (max-width: 639px)  { .room__scene { --rs: 0.85; } }

/* 立方体：--x/--y/--z 定位中心点，--w/--h/--d 是尺寸，--c 是主色。
   六个面各自旋转推开半个身位；背面不画（backface-visibility），
   所以无论从哪个角度拖都只看到该看到的面。 */
.cb {
  position: absolute; left: 0; top: 0;
  width: calc(var(--w) * 1px); height: calc(var(--h) * 1px);
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--x) * 1px - 50%), calc(var(--y) * 1px - 50%), calc(var(--z) * 1px));
}
.cb__f {
  position: absolute; left: 0; top: 0;
  width: calc(var(--w) * 1px); height: calc(var(--h) * 1px);
  background: var(--c, #888);
  backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 14%);
}
.cb__f--front  { transform: translateZ(calc(var(--d) * 0.5px)); }
.cb__f--back   { transform: rotateY(180deg) translateZ(calc(var(--d) * 0.5px)); filter: brightness(0.62); }
.cb__f--right,
.cb__f--left   { width: calc(var(--d) * 1px); left: calc(50% - var(--d) * 0.5px); }
.cb__f--right  { transform: rotateY(90deg) translateZ(calc(var(--w) * 0.5px)); filter: brightness(0.74); }
.cb__f--left   { transform: rotateY(-90deg) translateZ(calc(var(--w) * 0.5px)); filter: brightness(0.86); }
.cb__f--top,
.cb__f--bottom { height: calc(var(--d) * 1px); top: calc(50% - var(--d) * 0.5px); }
.cb__f--top    { transform: rotateX(90deg) translateZ(calc(var(--h) * 0.5px)); filter: brightness(1.16); }
.cb__f--bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) * 0.5px)); filter: brightness(0.5); }

/* 窗：朝屋里那面是天，叠两道窗棂。天色由 data-daypart 决定。 */
.cb--window .cb__f--right {
  background:
    repeating-linear-gradient(90deg, transparent 0 32px, var(--rm-wall) 32px 36px),
    repeating-linear-gradient(0deg, transparent 0 22px, var(--rm-wall) 22px 25px),
    var(--rm-sky);
  box-shadow: inset 0 0 0 3px var(--rm-wall-edge);
}
/* 黑板：墨绿底 + 几道粉笔痕。 */
.cb--board .cb__f--front {
  background:
    repeating-linear-gradient(-8deg, transparent 0 14px, rgb(255 255 255 / 14%) 14px 15px, transparent 15px 34px),
    var(--rm-board);
  box-shadow: inset 0 0 0 4px var(--rm-wood);
}
/* 屏幕：常亮，夜里更亮一点；扫掠线让它像真的在显示东西。 */
.cb--screen .cb__f--front {
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 5%) 0 1px, transparent 1px 3px),
    radial-gradient(90% 120% at 30% 20%, rgb(109 124 255 / 85%), rgb(20 18 40 / 92%) 70%),
    #14122a;
  box-shadow: 0 0 18px 2px rgb(109 124 255 / 35%);
}
/* 台灯：只有正白天不点灯。dawn/dusk/night 灯罩发暖光、地上落一池光，
   与 --rm-lamp 控制的光池同一套判定（JS 里的 HUD 文案也照这条走）。 */
.cb--lamp .cb__f { transition: background 600ms var(--ease), box-shadow 600ms var(--ease); }
html[data-daypart="dawn"] .cb--lamp .cb__f,
html[data-daypart="dusk"] .cb--lamp .cb__f,
html[data-daypart="night"] .cb--lamp .cb__f {
  background: #ffd9a0;
  box-shadow: 0 0 26px 8px rgb(255 196 110 / 55%), inset 0 0 0 1px rgb(255 230 180 / 80%);
}
.cb--pool .cb__f { background: transparent; box-shadow: none; }
.cb--pool .cb__f--top {
  background: radial-gradient(closest-side, rgb(255 196 110 / 50%), transparent 74%);
  opacity: var(--rm-lamp);
  transition: opacity 600ms var(--ease);
}
/* 地毯织纹 */
.cb--rug .cb__f--top {
  background:
    repeating-linear-gradient(90deg, transparent 0 10px, rgb(255 255 255 / 7%) 10px 12px),
    var(--rm-rug);
  box-shadow: inset 0 0 0 5px rgb(255 255 255 / 8%);
}
/* 热点面：鼠标可点的"门"。悬停浮出一枚小标签，点下去跳对应章节。 */
.room__hot { cursor: pointer; }
.room__hot::after {
  content: attr(data-label);
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 10px; border-radius: 999px;
  background: rgb(12 11 24 / 82%); color: #f7f4ef;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em;
  white-space: nowrap; opacity: 0; transition: opacity 180ms var(--ease);
  pointer-events: none;
}
.room__stage:hover .room__hot::after { opacity: 0.92; }

/* 舞台上的状态条与舞台下的图例 */
.room__hud {
  position: absolute; left: var(--space-4); bottom: var(--space-4); z-index: 2;
  margin: 0; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: rgb(12 11 24 / 62%);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em;
  color: var(--text-secondary);
}
html[data-theme="light"] .room__hud { background: rgb(255 255 255 / 72%); }
.room__legend {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6);
  margin: var(--space-5) 0 0;
}
.room__legend a {
  display: inline-flex; align-items: baseline; gap: 8px; min-height: var(--target);
  font-family: var(--font-mono); font-size: var(--size-small);
  color: var(--text-secondary); transition: color var(--duration-fast) var(--ease);
}
.room__legend a:hover { color: var(--accent); }
.room__legend a::before { content: "▸"; color: var(--a3); }

/* 胶片颗粒：全站一层极淡的噪点，暗底更有电影感；纯装饰，不参与交互与阅读。 */
.grain {
  position: fixed; inset: 0; z-index: 65; pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="light"] .grain { opacity: 0.035; }
@media print { .grain { display: none; } }

/* ---------- 关于本站：便当格（v24，取代原来的规格表）
   一格一个真实数字 + 一句说明，宽格放长内容（测试范围、文件树）。
   卡片走"液态玻璃"：半透明底 + backdrop-filter + 顶部内高光；
   指针移上去时由 [data-spotlight] 那层光跟着走。 ---------- */
.bento {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bento__tile {
  position: relative; isolation: isolate;
  display: grid; gap: var(--space-3); align-content: start;
  /* 卡片有 overflow:hidden（来自 [data-spotlight]），所以长词必须能折行，
     否则浏览器把字体放大到 200% 时会被裁掉——测试会抓到。 */
  min-width: 0; overflow-wrap: anywhere;
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid var(--line); border-radius: 20px;
  background-color: rgb(247 244 239 / 4%);
  background-image: linear-gradient(158deg, rgb(255 255 255 / 6%), transparent 58%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  transition: transform var(--duration-base) var(--ease),
              border-color var(--duration-fast) var(--ease),
              box-shadow var(--duration-base) var(--ease);
}
/* 内容压在聚光层之上（[data-spotlight]::after 是 z-index:0）。 */
.bento__tile > * { position: relative; z-index: 1; }
.bento__tile:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 20px 44px -30px rgb(0 0 0 / 80%);
}
.bento__tile--w2 { grid-column: span 2; }
.bento__label {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--sec-a);
}
.bento__value {
  font-size: clamp(2.5rem, 5.6vw, 3.75rem); font-weight: 800;
  line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: lining-nums tabular-nums;
}
.bento__value--sm { font-size: clamp(1.625rem, 3.6vw, 2.375rem); letter-spacing: -0.02em; }
/* 版本号沿用 .chapter__num 的做法：拉丁衬线 + 极光渐变裁进字形。 */
.bento__value--grad {
  font-family: var(--font-latin);
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bento__unit {
  margin-left: 0.45em; font-family: var(--font); font-style: normal;
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--text-secondary);
}
.bento__desc { color: var(--text-secondary); font-size: var(--size-small); line-height: 1.75; }
/* 通栏那一格：把站内另外几页做成一排胶囊，给这一节收个尾。 */
.bento__tile--w4 { grid-column: span 2; }
.bento__pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.bento__pills a {
  display: grid; gap: 2px; align-content: center;
  min-height: var(--target); padding: var(--space-3) var(--space-5);
  border: 1px solid var(--line-strong); border-radius: 14px;
  transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.bento__pills a:hover {
  border-color: var(--sec-a); background-color: rgb(247 244 239 / 5%); transform: translateY(-2px);
}
.bento__pills span { font-size: 0.75rem; color: var(--text-secondary); }
/* 文件树进了卡片就不再自己套一层边框。（多写一层 .bento 是为了压过浅色主题的 .filetree 覆盖。） */
.bento .bento__tile--code .filetree { margin-top: 0; padding: 0; border: 0; background: none; }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
  .bento__tile--w4 { grid-column: span 4; }
}

/* ---------- 折腾：索引式列表（首项放大做主角，每项配一块手绘封面） ---------- */
.worklist { display: grid; }
.worklist__item { border-top: 1px solid var(--line); }
.worklist__item:last-child { border-bottom: 1px solid var(--line); }
.worklist__item a {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "cover body" "cover go";
  gap: var(--space-3) var(--space-5);
  align-items: center;
  padding: var(--space-6) var(--space-5);
  transition: background var(--duration-base) var(--ease), padding-inline var(--duration-base) var(--ease);
}
.worklist__item a::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--sec-a); transform: scaleY(0); transform-origin: 50% 0;
  transition: transform var(--duration-base) var(--ease);
}
.worklist__item a:hover { background: rgb(247 244 239 / 4%); padding-inline: var(--space-8) var(--space-5); }
.worklist__item a:hover::before { transform: scaleY(1); }
.worklist__body { grid-area: body; display: grid; gap: 2px; min-width: 0; }
.worklist__no { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); }
.worklist__name { min-width: 0; overflow-wrap: anywhere; font-size: clamp(1.25rem, 2.3vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; }
.worklist__desc { min-width: 0; color: var(--text-secondary); font-size: var(--size-small); line-height: 1.7; }
.worklist__tags { min-width: 0; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); opacity: 0.85; }
.worklist__go {
  grid-area: go; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary);
  transition: transform var(--duration-base) var(--ease), color var(--duration-base) var(--ease);
}
.worklist__item a:hover .worklist__go { transform: translateX(6px); color: var(--sec-a); }
.worklist__item--lead a { padding-block: clamp(28px, 4.6vw, 56px); }
.worklist__item--lead .worklist__name { font-size: clamp(1.75rem, 4vw, 2.75rem); }

/* 封面：纯 SVG 手绘图形，取该节色相，尺寸用固定 px 以免随字号放大溢出。 */
.cover {
  grid-area: cover; flex: 0 0 auto;
  width: 104px; aspect-ratio: 4 / 3;
  display: grid; place-items: center; padding: 10px;
  border: 1px solid var(--line); border-radius: 12px;
  color: var(--sec-a);
  background-color: rgb(247 244 239 / 4%);
  background-image: linear-gradient(158deg, var(--sec-glow), transparent 68%);
  transition: border-color var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.worklist__item--lead .cover { width: 132px; }
.worklist__item a:hover .cover { border-color: var(--sec-a); transform: translateY(-2px); }
/* 封面里的画再放大一点：悬停时有一层"凑近看"的感觉；减少动效时不动。 */
.cover > * { transition: transform 320ms var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .worklist__item a:hover .cover > * { transform: scale(1.12); }
}
.cover__art { width: 100%; height: 100%; display: block; }

/* 最近三条笔记：由生成脚本在 index.html 的标记之间更新，不手写。 */
.notes-latest {
  margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2) var(--space-3);
  font-family: var(--font-mono); font-size: var(--size-small); color: var(--text-secondary);
}
.notes-latest__label { letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: 0.75rem; }
.notes-latest a {
  color: var(--text); text-decoration: underline;
  text-decoration-color: var(--line-strong); text-underline-offset: 0.22em;
  transition: color var(--duration-fast) var(--ease), text-decoration-color var(--duration-fast) var(--ease);
}
.notes-latest a:hover { color: var(--sec-a); text-decoration-color: currentColor; }
.notes-latest__sep { color: var(--line-strong); }
.notes-latest__all { margin-left: auto; }
@media (max-width: 767px) {
  .notes-latest__all { margin-left: 0; }
}

/* 光标聚光：极淡的一层光跟着指针，只在支持 hover 的设备上出现。 */
[data-spotlight] { position: relative; overflow: hidden; }
[data-spotlight]::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(320px circle at var(--sx, 50%) var(--sy, 50%), rgb(255 255 255 / 7%), transparent 64%);
  opacity: 0; transition: opacity var(--duration-base) var(--ease);
}
[data-spotlight]:hover::after { opacity: 1; }

/* 作品悬浮预览：跟着光标走的一张小卡，只在桌面精细指针上出现。 */
.work-preview {
  position: fixed; top: 0; left: 0; z-index: 45;
  width: 300px; pointer-events: none; opacity: 0;
  will-change: transform;
  transition: opacity 260ms var(--ease);
}
.work-preview.is-on { opacity: 1; }
.work-preview__art {
  display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3;
  padding: 28px;
  border: 1px solid var(--line-strong); border-radius: 18px;
  background-color: rgb(18 17 32 / 86%);
  background-image: linear-gradient(158deg, rgb(109 124 255 / 18%), transparent 70%);
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / 82%), inset 0 0 0 1px rgb(247 244 239 / 5%);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.work-preview__art svg { width: 100%; height: 100%; display: block; }
.work-preview__meta {
  display: flex; justify-content: space-between; gap: var(--space-4);
  margin-top: var(--space-3);
  font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-secondary);
}
.work-preview__tags { text-align: right; opacity: 0.75; }
@media (max-width: 1023px), (prefers-reduced-motion: reduce) { .work-preview { display: none; } }

/* ---------- 本站：文件结构图（本站真实存在的四个文件） ---------- */
.filetree {
  margin-top: var(--space-8);
  display: grid; gap: 1px;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border: 1px solid var(--line); border-radius: 12px;
  background-color: rgb(247 244 239 / 4%);
  background-image: linear-gradient(158deg, var(--sec-glow), transparent 62%);
  font-family: var(--font-mono); font-size: 0.8125rem;
}
.filetree li {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 2px var(--space-4);
  padding-block: 4px; color: var(--text-secondary);
}
.filetree__root { color: var(--text); padding-bottom: var(--space-2); }
.filetree code { font-family: var(--font-mono); min-width: 0; overflow-wrap: anywhere; }
.filetree li:not(.filetree__root) code { position: relative; padding-left: 1.35em; }
.filetree li:not(.filetree__root) code::before {
  content: "├─"; position: absolute; left: 0; opacity: 0.45;
}
.filetree li:last-child code::before { content: "└─"; }
.filetree li span { font-size: 0.75rem; color: var(--text-secondary); opacity: 0.85; }

/* ---------- 章节 ---------- */
.chapter { padding-block: clamp(72px, 11vw, 132px); }
.chapter__inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: var(--space-8); }
.chapter__head { display: flex; align-items: baseline; gap: var(--space-4); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-secondary); }
.chapter__num { font-family: var(--font-latin); font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chapter__body { min-width: 0; max-width: 48em; }
h2 { font-size: var(--size-h2); font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; }
.chapter__text { margin-top: var(--space-8); }
.chapter__lead { font-size: 1.1875rem; }
.chapter__text p + p { margin-top: var(--space-4); color: var(--text-secondary); }

.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-8); }
.tags li {
  padding: var(--space-2) var(--space-5); border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary);
  transition: border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.tags li:hover { border-color: var(--a2); color: var(--text); }
.signature { margin-top: var(--space-8); font-size: 1.25rem; }
.signature span { font-family: var(--font-mono); font-style: normal; font-size: var(--size-body); color: var(--text-secondary); }

/* ---------- 展开说明 ---------- */
.details { margin-top: var(--space-8); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.details summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: var(--target); padding-block: var(--space-5);
  cursor: pointer; list-style: none; color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease);
}
.details summary::-webkit-details-marker { display: none; }
.details summary:hover { color: var(--text); }
.details__icon { position: relative; width: var(--space-4); height: var(--space-4); flex-shrink: 0; }
.details__icon::before, .details__icon::after { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1px; background: currentColor; }
.details__icon::after { transform: rotate(90deg); transition: transform var(--duration-base) var(--ease); }
.details[open] .details__icon::after { transform: rotate(0); }
.details[open] .details__icon { color: var(--a3); }
.details__body { padding-bottom: var(--space-6); color: var(--text-secondary); }
.details dl > div { display: grid; gap: var(--space-2); padding-top: var(--space-4); }
.details dt { color: var(--text); font-family: var(--font-mono); font-size: var(--size-small); }
.details dd { overflow-wrap: anywhere; }

/* ---------- 联系 ---------- */
.contacts { display: grid; gap: var(--space-3); margin-top: var(--space-8); }
.contacts__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: stretch; }
.contacts a {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  min-height: 64px; padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line); border-radius: 14px;
  background: rgb(247 244 239 / 4%);
  transition: border-color var(--duration-base) var(--ease), background var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.contacts a:hover { border-color: var(--a2); background: rgb(247 244 239 / 7%); transform: translateY(-3px); }
.copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px; min-height: var(--target); padding-inline: var(--space-4);
  border: 1px solid var(--line); border-radius: 14px;
  background: rgb(247 244 239 / 4%);
  color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em;
  transition: border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.copy-btn:hover { border-color: var(--a2); color: var(--text); background: rgb(247 244 239 / 7%); }
.copy-btn.is-done { border-color: var(--a3); color: var(--a3); }
.toast {
  position: fixed; left: 50%; bottom: var(--space-8); z-index: 60;
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: rgb(18 17 32 / 92%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--text); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em;
  opacity: 0; transform: translate(-50%, 14px); pointer-events: none;
  transition: opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.contacts__label { flex: 0 0 auto; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent); }
.contacts__value { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.contacts__arrow { color: var(--text-secondary); transition: transform var(--duration-base) var(--ease), color var(--duration-base) var(--ease); }
.contacts a:hover .contacts__arrow { transform: translate(3px, -3px); color: var(--a3); }

/* ---------- 页脚 ---------- */
.footer { padding-block: var(--space-12) var(--space-8); }
.footer__inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.footer__closing { font-size: clamp(1.875rem, 4.5vw, 3rem); font-weight: 700; letter-spacing: -0.03em; }
/* 页脚分栏（五百强官网通用的结构：几列链接 + 一段自我介绍），替代原来一排平铺的链接。 */
.footer__cols { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-8); }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.footer__col a {
  display: inline-flex; align-items: center; min-height: var(--target);
  font-family: var(--font-mono); font-size: var(--size-small); color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease);
}
.footer__col a:hover { color: var(--accent); }
.footer__col-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.14em;
  color: var(--text-secondary);
}
.footer__blurb { margin: 0; color: var(--text-secondary); font-size: var(--size-small); line-height: 1.9; }
@media (min-width: 900px) {
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); gap: var(--space-8); }
}
.footer__wordmark {
  margin-top: var(--space-8);
  font-family: var(--font-mono); font-style: normal;
  font-size: clamp(2rem, 11vw, 8.5rem); line-height: 1.1; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1px rgb(245 242 236 / 16%);
  white-space: nowrap; overflow: hidden; user-select: none;
}
.footer__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--size-small); color: var(--text-secondary);
}
.footer__meta span[lang] { font-family: var(--font-mono); font-style: normal; }
.footer__meta a { display: inline-flex; align-items: center; min-height: var(--target); transition: color var(--duration-fast) var(--ease); }
.footer__meta a:hover { color: var(--a3); }
.footer__note { color: var(--text-secondary); opacity: 0.7; }

/* 分行遮罩的行框（静态部分）：动效在下方「动效」段里，只在 .js + 允许动态时生效。 */
.line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.line > i { display: block; font-style: normal; }

/* 滚动驱动动画（CSS scroll-driven animations）：插句逐词点亮、章节幽灵编号视差。
   整块包在 @supports 里——不支持的浏览器（旧 Safari / Firefox）看到的就是静态大字，
   减少动效偏好下也整块关闭。 */
@keyframes statement-light { to { opacity: 1; } }
@keyframes ghost-drift { from { transform: translateY(6%); } to { transform: translateY(-8%); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .statement__w {
      opacity: 0.15;
      animation: statement-light linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 42%;
    }
    .js .statement__w:nth-child(2) { animation-range: entry 18% cover 50%; }
    .js .statement__w:nth-child(3) { animation-range: entry 31% cover 58%; }
    .sec__ghost {
      animation: ghost-drift linear both;
      animation-timeline: view();
      animation-range: cover 5% cover 95%;
    }
  }
}

/* ---------- 动效 ----------
   首屏用纯 CSS 动画；下方内容仅在脚本成功加上 .js 后才隐藏，
   因此关闭脚本或脚本加载失败时内容始终可见。 */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; animation: rise var(--duration-slow) var(--ease) forwards; animation-delay: var(--d, 0ms); }
  .js .reveal { opacity: 0; transform: translateY(30px); transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease); transition-delay: var(--rd, 0ms); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  /* 标题的分行遮罩进场：每行是一个 overflow:hidden 的行框，里面的 <i> 从下方推上来。
     行框留 0.14em 下内边距给句点这类字形，再用等量负外边距把留白收回去。
     只在 .js 且祖先 .reveal 已进场时生效，所以关脚本或减少动态效果时标题始终可见。 */
  .js .reveal .line > i { transform: translateY(135%); transition: transform var(--duration-slow) var(--ease); }
  .js .reveal .line:nth-child(2) > i { transition-delay: 110ms; }
  .js .reveal .line:nth-child(3) > i { transition-delay: 220ms; }
  .js .reveal.is-visible .line > i { transform: none; }
  .progress span { transition: transform 120ms linear; }
}
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* 断点用固定值：媒体查询条件不支持普通自定义属性。 */

/* ---------- 明暗主题 ---------- */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f6f8;
  --bg-2: #ffffff;
  --ink: #1c1c21;
  --muted: #5c5c63;
  --line: rgb(23 23 28 / 12%);
  --line-strong: rgb(23 23 28 / 26%);
  /* 强调色按主题各配一套：深色那套高饱和色在白底上只有 2.5～3.5:1，
     撑不住 12px 的小字。下面三个值在白底与 #f6f6f8 上都 ≥5:1。 */
  --a1: #4a58d8;
  --a2: #7a3fd0;
  --a3: #c0246e;
}
/* 章节色相同步：.sec__no / .spec dt / .accent 这些 12px 小字都吃 --sec-a。 */
html[data-theme="light"] .sec--about   { --sec-a: #4a58d8; }
html[data-theme="light"] .sec--process { --sec-a: #6f3fd0; }
html[data-theme="light"] .sec--room    { --sec-a: #6a35d0; }
html[data-theme="light"] .sec--site    { --sec-a: #9a2fd0; }
html[data-theme="light"] .sec--work    { --sec-a: #c0246e; }
html[data-theme="light"] .sec--contact { --sec-a: #c03a17; }
html[data-theme="light"] body {
  /* 浅色下网格必须更淡、更疏，否则整页像稿纸；极光换成更透的版本。 */
  background-image:
    radial-gradient(90rem 60rem at 10% -12%, rgb(109 124 255 / 18%), transparent 62%),
    radial-gradient(76rem 54rem at 48% 42%, rgb(154 108 255 / 12%), transparent 66%),
    radial-gradient(84rem 58rem at 94% 110%, rgb(255 111 181 / 16%), transparent 60%),
    linear-gradient(rgb(23 23 28 / 3%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(23 23 28 / 3%) 1px, transparent 1px);
  background-size: auto, auto, auto, 84px 84px, 84px 84px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-attachment: fixed, fixed, fixed, scroll, scroll;
}
html[data-theme="light"] ::selection { background: rgba(99, 102, 241, 0.18); color: var(--ink); }
html[data-theme="light"] .masthead { background: rgb(246 246 248 / 72%); }
html[data-theme="light"].is-scrolled .masthead { background: rgb(246 246 248 / 88%); }
html[data-theme="light"] .hero__bg { -webkit-text-stroke-color: rgb(23 23 28 / 12%); }
html[data-theme="light"] .hero__grid {
  background-image:
    linear-gradient(rgb(23 23 28 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(23 23 28 / 4%) 1px, transparent 1px);
}
html[data-theme="light"] .footer__wordmark { -webkit-text-stroke-color: rgb(23 23 28 / 18%); }
/* 首屏光晕在浅色底上要加浓，否则标题右侧是一片空白。 */
html[data-theme="light"] .hero__glow {
  background: radial-gradient(closest-side, rgb(109 124 255 / 26%), rgb(176 108 255 / 14%) 50%, transparent 76%);
}
html[data-theme="light"] .sec--band { background: var(--bg-2); }
html[data-theme="light"] .contacts a { background: #ffffff; }
html[data-theme="light"] .worklist__item a:hover { background: rgb(23 23 28 / 4%); }
html[data-theme="light"] .cover { background-color: #ffffff; border-color: rgb(23 23 28 / 14%); }
html[data-theme="light"] .filetree { background-color: #ffffff; }
/* 便当格在浅色下改成实白卡 + 一点冷色渐变：半透明白叠在白底上看不出层次。 */
html[data-theme="light"] .bento__tile {
  background-color: #ffffff;
  background-image: linear-gradient(158deg, rgb(109 124 255 / 9%), transparent 60%);
  border-color: rgb(23 23 28 / 10%);
  box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgb(23 23 28 / 5%);
}
html[data-theme="light"] .bento__tile:hover {
  border-color: rgb(23 23 28 / 20%);
  box-shadow: inset 0 1px 0 #ffffff, 0 18px 36px -26px rgb(31 30 45 / 40%);
}
html[data-theme="light"] .bento__pills a { background-color: rgb(23 23 28 / 3%); }
html[data-theme="light"] .bento__pills a:hover { background-color: rgb(23 23 28 / 6%); }
/* 白色的聚光层在白底上等于没有；浅色下换成一层极淡的靛蓝。 */
html[data-theme="light"] [data-spotlight]::after {
  background: radial-gradient(320px circle at var(--sx, 50%) var(--sy, 50%), rgb(109 124 255 / 13%), transparent 64%);
}
html[data-theme="light"] .btn--solid:hover { background: #2a2a30; box-shadow: 0 12px 32px -14px rgb(0 0 0 / 35%); }
html[data-theme="light"] .btn--ghost:hover { color: var(--ink); }
html[data-theme="light"] .noise { opacity: 0.02; }
html[data-theme="light"] .stars { filter: invert(1) hue-rotate(180deg); opacity: 0.3; }
html[data-theme="light"] .cursor-glow { opacity: 0.5; }
html[data-theme="light"] .vignette {
  background:
    radial-gradient(120% 80% at 50% -10%, transparent 50%, rgb(70 60 110 / 10%) 100%),
    linear-gradient(180deg, rgb(70 60 110 / 6%), transparent 24%, transparent 78%, rgb(70 60 110 / 8%));
}
html[data-theme="light"] .sec__ghost { -webkit-text-stroke-color: rgb(23 23 28 / 9%); }
html[data-theme="light"] .work-preview__art {
  background-color: rgb(255 255 255 / 92%);
  background-image: linear-gradient(158deg, rgb(109 124 255 / 14%), transparent 70%);
  box-shadow: 0 30px 80px -34px rgb(31 30 45 / 35%), inset 0 0 0 1px rgb(23 23 28 / 5%);
}
html[data-theme="light"] .copy-btn { background: #ffffff; }
html[data-theme="light"] .copy-btn:hover { background: rgb(23 23 28 / 4%); }
html[data-theme="light"] .toast { background: rgb(255 255 255 / 94%); }
html[data-theme="light"] .hero__ring { opacity: 0.7; }
html[data-theme="dark"] .icon-moon { display: none; }
html[data-theme="light"] .icon-sun { display: none; }

.theme-toggle {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease), transform var(--duration-base) var(--ease);
}
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle:hover { color: var(--text); transform: rotate(24deg); }

@media (min-width: 768px) {
  :root { --gutter: var(--space-12); }
  .hero__inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: var(--space-8); }
  .hero__portrait { width: min(100%, 380px); }
  .chapter__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: var(--space-12); }
  .chapter__head { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .details dl > div { grid-template-columns: 4.5em minmax(0, 1fr); gap: var(--space-6); }
  /* 首页：正文与说明做不对称双栏，避免"左窄右宽"一个模子。 */
  .sec__split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 88px); }
  /* 折腾：封面回到左侧同一行；名字与简介并排，不在中间留一大块空白。 */
  .worklist__item a { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "cover body go"; }
  .worklist__body { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-6); }
  .worklist__desc { flex: 0 1 auto; }
  /* 标签推到右端，正好把原来中段的空白填掉。 */
  .worklist__tags { margin-left: auto; }
}
@media (min-width: 1024px) {
  /* 过程区改 sticky 双栏：左边标题钉住不动，右边步骤像时间线一样滚过去
     （参考 Brittany Chiang 个人站的左栏固定结构），横向四列版就此退场。 */
  .duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 76px); align-items: start; }
  .duo__aside { position: sticky; top: calc(var(--nav-h) + var(--space-5)); }
  /* 时间轴回到纵向：步骤一条接一条，进度线竖着随滚动画下来。 */
  .rail { gap: 0; }
  .rail__item { padding-bottom: var(--space-8); }
  .rail__item:last-child { padding-bottom: 0; }
  .rail__progress {
    display: block; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px;
    background: var(--sec-a);
    transform: scaleY(var(--rail-progress, 0)); transform-origin: 50% 0;
    transition: transform 120ms linear;
    box-shadow: 0 0 12px 1px var(--sec-glow);
  }
}
@media (min-width: 1024px) {
  .hero__portrait { width: min(100%, 420px); }
}
/* 移动端降低合成开销，并收紧首屏尺寸 */
@media (max-width: 767px) {
  /* 小屏把导航放回文档流：极窄屏 + 放大字体会让它换行长高，
     此时 fixed 定位会把主题按钮挤出屏幕、并盖住正文，sticky 则既留在顶部又不遮挡内容。 */
  .masthead {
    position: sticky; inset: auto; top: 0;
    height: auto; min-height: var(--nav-h);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .masthead__inner { flex-wrap: wrap; row-gap: var(--space-1); padding-block: var(--space-2); }
  /* 主题按钮排在导航之前：字体放大到导航换行时，按钮仍留在第一行右端。 */
  .theme-toggle { order: 2; }
  .navigation { order: 3; flex-wrap: wrap; gap: 0; }
  .navigation a { padding-inline: var(--space-2); font-size: 0.8125rem; }
  .navigation a::after { left: var(--space-2); right: var(--space-2); }
  /* 署名行不跟随正文字号放大到失控 */
  .wordmark { line-height: 1.2; }
  /* 导航已占位，首屏不再需要为固定导航预留高度 */
  .hero { min-height: auto; padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .hero__portrait { width: min(100%, 240px); }
  .hero__bg { font-size: clamp(3rem, 17vw, 9rem); bottom: 1.5%; }
  .hero__glow { filter: blur(26px); }
  .hero__halo { filter: blur(24px); }
  .hero__title { text-shadow: none; }
  .hero__meta { font-size: 0.625rem; gap: var(--space-2); }
  .hero__meta-rule { width: 24px; }
  .hero__figcaption { margin-top: var(--space-3); }
  .ticker__track { font-size: 0.625rem; gap: var(--space-4); }
  .sec__ghost { font-size: clamp(6rem, 30vw, 12rem); opacity: 0.8; }
  /* 作品详情页：正文首块紧接页头，去掉为固定页头预留的那段空白 */
  main.chapter { padding-top: var(--space-8); }
  /* 折腾列表：封面收窄，避免挤压文字 */
  .cover { width: 74px; padding: 7px; }
  .worklist__item--lead .cover { width: 86px; }
  .worklist__item a { padding-inline: var(--space-4); }
  .worklist__item a:hover { padding-inline: var(--space-5) var(--space-4); }
}
@media (max-width: 390px) {
  .navigation a { padding-inline: var(--space-1); font-size: 0.78125rem; }
  .navigation a::after { left: var(--space-1); right: var(--space-1); }
  .wordmark { font-size: 1.2rem; }
}

/* ========== v29「片尾」：向六个个人站借的语言 ==========
   取景框括号与 REC 时间码学 i.ccrui.cn 的片头语言；片尾字幕行与点线小轴同出；
   现场体检数字学 147227.xyz 的"真数字 + 一行说明"；封面扫光学 lonely.land 的照片墙；
   小屋区的淡纹样学 old-i.ccrui.cn 的平铺涂鸦；导轨画线与虚线圆环学 itomdev 的纸上母题。 */

/* 取景框：把整屏当成取景器，四角各一枚括号 */
.frame { position: fixed; inset: 12px; z-index: 80; pointer-events: none; }
.frame i { position: absolute; width: 20px; height: 20px; border: 0 solid var(--line-strong); opacity: 0.75; }
.frame i:nth-child(1) { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.frame i:nth-child(2) { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.frame i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.frame i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
@media (max-width: 639px) { .frame { inset: 8px; } .frame i { width: 14px; height: 14px; } }

/* REC 时间码：本次访问的"片长"，等宽数字不跳动 */
.hero__tc {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums; color: var(--text-secondary);
}
.hero__tc b { font-weight: 500; color: var(--text); }
.hero__rec { width: 7px; height: 7px; border-radius: 50%; background: var(--a3); }
@media (prefers-reduced-motion: no-preference) {
  .hero__rec { animation: rec-blink 1.6s steps(1) infinite; }
}
@keyframes rec-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.15; } }

/* 片尾字幕行：左栏极小灰标签，右栏衬线正文，中间一条点线小轴 */
.credits { list-style: none; margin: var(--space-7) 0 0; padding: 0; }
.credits li {
  position: relative; display: grid; grid-template-columns: 3.5em 1fr;
  column-gap: var(--space-5); padding: 9px 0;
}
.credits li::before {
  content: ""; position: absolute; left: calc(3.5em + 8px); top: 17px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--a3);
}
.credits li::after {
  content: ""; position: absolute; left: calc(3.5em + 10px); top: 26px; bottom: -4px;
  border-left: 1px dotted var(--line-strong);
}
.credits li:last-child::after { display: none; }
.credits__k {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.2em; color: var(--text-secondary); padding-top: 3px;
}
.credits__v {
  font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.5;
  padding-left: var(--space-6);
}

/* 联系行也按字幕排：标签退成灰的小字，值升成衬线大字 */
.contacts__label {
  flex: 0 0 4.5em; font-size: 0.6875rem; letter-spacing: 0.2em;
  color: var(--text-secondary); padding-top: 6px;
}
.contacts__value { font-family: var(--font-serif); font-size: 1.1875rem; }

/* 现场体检：数字是浏览器当场算的，配一行说明 */
.vitals {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-4); margin: var(--space-7) 0 0;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface);
}
.vitals__item { display: inline-flex; align-items: baseline; gap: 7px; }
.vitals__item b {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.25rem); font-variant-numeric: tabular-nums;
}
.vitals__item i {
  font-style: normal; font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--text-secondary);
}
.vitals__sep { color: var(--line-strong); }
.vitals__note {
  flex-basis: 100%; font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--text-secondary);
}

/* 封面扫光：悬停时一道光斜着擦过去（lonely.land 照片墙的唯一动效） */
.cover { position: relative; overflow: hidden; }
.cover::after {
  content: ""; position: absolute; inset: -20%;
  background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / 16%) 50%, transparent 58%);
  transform: translateX(-130%);
}
@media (prefers-reduced-motion: no-preference) {
  .worklist__item a:hover .cover::after,
  .worklist__item a:focus-visible .cover::after {
    transform: translateX(130%);
    transition: transform 720ms var(--ease);
  }
}
html[data-theme="light"] .cover::after {
  background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / 55%) 50%, transparent 58%);
}

/* 小屋区垫一层极淡的平铺涂鸦：星星、星球、笑脸，水印浓度 */
.sec--room {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1.2'%3E%3Cpath d='M30 22l3.2 7.4 8 1-5.8 5.6 1.4 8-6.8-4-6.8 4 1.4-8-5.8-5.6 8-1z'/%3E%3Ccircle cx='128' cy='52' r='11'/%3E%3Cpath d='M112 56c10 5 22 5 32-2'/%3E%3Ccircle cx='62' cy='132' r='12'/%3E%3Cpath d='M57 130h.1M67 130h.1M56 137c4 3 8 3 12 0'/%3E%3Cpath d='M150 140l2.4 5.6 6 .8-4.4 4.2 1 6-5-3-5 3 1-6-4.4-4.2 6-.8z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 190px 190px;
}
html[data-theme="light"] .sec--room {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cg fill='none' stroke='%23232338' stroke-opacity='0.06' stroke-width='1.2'%3E%3Cpath d='M30 22l3.2 7.4 8 1-5.8 5.6 1.4 8-6.8-4-6.8 4 1.4-8-5.8-5.6 8-1z'/%3E%3Ccircle cx='128' cy='52' r='11'/%3E%3Cpath d='M112 56c10 5 22 5 32-2'/%3E%3Ccircle cx='62' cy='132' r='12'/%3E%3Cpath d='M57 130h.1M67 130h.1M56 137c4 3 8 3 12 0'/%3E%3Cpath d='M150 140l2.4 5.6 6 .8-4.4 4.2 1 6-5-3-5 3 1-6-4.4-4.2 6-.8z'/%3E%3C/g%3E%3C/svg%3E");
}

/* 导轨改手绘：一条折线随滚动慢慢画完，百分比套一枚转着的虚线圆环 */
.edge-rail__track { width: 12px; background: none; overflow: visible; }
.edge-rail__track::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--line);
}
.edge-rail__ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.edge-rail__ink path {
  fill: none; stroke: var(--a2); stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
}
.edge-rail__pct {
  position: relative; width: 36px; height: 36px;
  display: grid; place-items: center; margin-bottom: var(--space-5);
}
.edge-rail__pct::before {
  content: ""; position: absolute; inset: 0;
  border: 1px dashed var(--line-strong); border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .edge-rail__pct::before { animation: ring-turn 26s linear infinite; }
}
@keyframes ring-turn { to { transform: rotate(360deg); } }

/* 脚本不在场时，靠脚本才有意义的两件东西不出现：
   时间码会永远停在 00，体检数字会停在破折号——都是假的，索性不摆。 */
html:not([data-js]) .hero__tc,
html:not([data-js]) .vitals { display: none; }

/* ========== v30「招牌」：把六站最抢眼的四手搬回来 ==========
   入场幕学 itomdev（纸幕 + 墨线 + 虚线圈百分比，数完幕布上提）；
   幕间巨字学 i.ccrui.cn 的满屏衬线字标与 lonely.land 的巨字，字由失焦到对焦；
   星尘连线画布学 147227.xyz / yucihent.me 的生成式背景；
   横向钉住画廊学 lonely.land 与 itomdev 的横滚：竖着滚，横着逛。 */

/* ---- 入场幕：默认不出现，只有 html[data-boot] 才挂上来 ---- */
.boot { display: none; }
html[data-boot] .boot {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 120;
  background: var(--bg);
  pointer-events: none;  /* 幕布不吃点击：哪怕脚本没接上，页面也照样能用 */
}
.boot__ink {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 12px;
  transform: translateX(-50%); overflow: visible;
}
.boot__ink path {
  fill: none; stroke: var(--a2); stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
}
.boot__ring {
  position: relative; width: 88px; height: 88px;
  display: grid; place-items: center; align-content: center;
  font-family: var(--font-mono); color: var(--text);
}
.boot__ring::before {
  content: ""; position: absolute; inset: 0;
  border: 1px dashed var(--line-strong); border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-boot] .boot__ring::before { animation: ring-turn 9s linear infinite; }
}
.boot__ring b { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.boot__ring i { font-style: normal; font-size: 0.75rem; color: var(--text-secondary); }
.boot__word {
  position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.52em; color: var(--text-secondary); white-space: nowrap;
}
/* 数完上提；另有一道 2.6s 保险——脚本万一没跑，幕布自己消失，绝不挡路 */
@keyframes boot-lift { to { transform: translateY(-101%); } }
@keyframes boot-failsafe { to { visibility: hidden; } }
html[data-boot] .boot { animation: boot-failsafe 0s linear 2.6s forwards; }
html[data-boot] .boot.is-done {
  animation: boot-lift 640ms var(--ease) forwards, boot-failsafe 0s linear 2.6s forwards;
}

/* ---- 幕间：一整屏只说一句话 ---- */
.interlude {
  position: relative; overflow: hidden;
  min-height: 100vh;
  display: grid; place-content: center; justify-items: center;
  gap: var(--space-5); text-align: center;
  padding: calc(var(--nav-h) + var(--space-8)) var(--gutter) var(--space-8);
}
.interlude__dust { position: absolute; inset: 0; width: 100%; height: 100%; }
.interlude__kicker {
  position: relative; display: flex; gap: 10px; align-items: center;
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.42em; color: var(--text-secondary);
}
.interlude__mark {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-serif); font-size: clamp(88px, 18vw, 280px);
  letter-spacing: 0.08em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px var(--line-strong);
  opacity: 0.55; pointer-events: none; user-select: none;
}
.interlude__line {
  position: relative;
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(2.375rem, 7.2vw, 6.5rem);
  line-height: 1.18; letter-spacing: 0.01em;
}
.interlude__sub {
  position: relative; max-width: 32em;
  color: var(--text-secondary); font-size: var(--size-small); line-height: 1.9;
}
/* 对焦进来：blur 14px → 0（ccrui 的 focus-in）；.is-in 由脚本在进视口时挂 */
.interlude__line, .interlude__sub {
  filter: blur(14px); opacity: 0; transform: translateY(16px);
  transition: filter 900ms var(--ease), opacity 900ms var(--ease), transform 900ms var(--ease);
}
.interlude__sub { transition-delay: 140ms; }
.interlude.is-in .interlude__line, .interlude.is-in .interlude__sub {
  filter: blur(0); opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .interlude__line, .interlude__sub { filter: none; opacity: 1; transform: none; transition: none; }
}
/* 没有脚本时字必须直接可读 */
html:not([data-js]) .interlude__line,
html:not([data-js]) .interlude__sub { filter: none; opacity: 1; transform: none; }

/* ---- 横向钉住画廊：默认一列卡片，脚本接管后才横过来 ---- */
.gal__head { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); }
.gal__hint {
  display: flex; gap: 14px; align-items: baseline;
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.3em; color: var(--text-secondary);
}
.gal__hint span { opacity: 0.55; letter-spacing: 0.22em; }
/* 这句提示只在横滚真的会发生时才算数：窄屏、减少动效、没脚本都是竖排，
   留着「往右逛」就成了假话。 */
@media (max-width: 1023px) { .gal__hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .gal__hint { display: none; } }
html:not([data-js]) .gal__hint { display: none; }
/* min-width:0 是关键：.sec__inner 是 grid，网格项默认 min-width:auto，
   横排面板会把整节撑到两千多像素宽（v30 实测踩到）。 */
.gal { position: relative; min-width: 0; }
.gal__track { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.gal__track .worklist__item { border-top: 0; }
.gal__track .worklist__item:last-child { border-bottom: 0; }
.gal__panel {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: rgb(247 244 239 / 3%);
  transition: border-color var(--duration-base) var(--ease);
}
html[data-theme="light"] .gal__panel { background: rgb(30 28 50 / 3%); }
.gal__panel:hover { border-color: var(--line-strong); }
.gal__panel a {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "cover" "body" "go";
  align-items: start; align-content: start;
  padding: var(--space-6);
}
.gal__panel .cover { width: 100%; aspect-ratio: 16 / 10; }
.gal__panel--more { padding: var(--space-6); display: grid; gap: var(--space-5); align-content: start; }
.gal__more-k { font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; }
.gal__more { list-style: none; margin: 0; padding: 0; display: grid; }
.gal__more a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  padding: 11px 2px; border-top: 1px solid var(--line);
  font-weight: 600; color: var(--text);
}
.gal__more li:last-child a { border-bottom: 1px solid var(--line); }
.gal__more a span {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.14em; color: var(--text-secondary); white-space: nowrap;
}
.gal__more a:hover { color: var(--sec-a); }
.gal__hud { display: none; }

/* 脚本接管后（≥1024 且允许动效）：钉住一屏，竖滚推横移 */
.gal--on { height: calc(100vh + var(--gal-travel, 0px)); }
.gal--on .gal__pin {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden; display: flex; align-items: center;
  /* 钉住的画面要通到屏幕两侧：从容器里破出去，横滚的起点和终点
     才正好落在章节的左右缘上（轨道的 padding-inline 补回容器边距）。
     溢出的部分被 .sec 的 overflow:clip 裁掉，不会撑出横向滚动。 */
  width: 100vw; margin-left: calc(50% - 50vw);
}
.gal--on .gal__track {
  display: flex; gap: var(--space-6);
  padding-inline: max(var(--space-8), calc((100vw - var(--container)) / 2));
  will-change: transform;
}
.gal--on .gal__panel { flex: 0 0 min(520px, 76vw); }
.gal--on .gal__hud {
  display: flex; gap: 8px; align-items: center;
  position: absolute; right: var(--space-8); bottom: var(--space-6);
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.18em; color: var(--text-secondary);
}
.gal__hud i { font-style: normal; opacity: 0.6; }
.gal__bar { position: relative; width: 132px; height: 1px; background: var(--line); margin-left: 6px; }
.gal__bar span {
  position: absolute; left: 0; top: -1px; width: 100%; height: 3px;
  background: var(--a2); transform: scaleX(0); transform-origin: left;
}

/* ---------- v32 片尾跑马灯：描边大字、反向走，给画廊到联系区之间垫一层节奏 ---------- */
.ticker--ghost {
  padding-block: var(--space-9, 40px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgb(109 124 255 / 4%) 50%, transparent);
}
.ticker--ghost .ticker__track {
  gap: var(--space-8);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5.5vw, 4.25rem);
  letter-spacing: 0.06em; text-transform: none;
  color: transparent;
  -webkit-text-stroke: 1px rgb(247 244 239 / 24%);
}
.ticker--ghost .ticker__track i {
  color: var(--a2); font-size: 0.875rem; -webkit-text-stroke: 0;
}
html[data-theme="light"] .ticker--ghost .ticker__track { -webkit-text-stroke-color: rgb(23 23 28 / 22%); }
@media (prefers-reduced-motion: no-preference) {
  .ticker--ghost .ticker__track { animation: ticker 58s linear infinite reverse; }
}
/* v32 光场省电：滚出视口的节先歇着（JS 在场才有这门闩；没脚本时照常漂移）。 */
html[data-js] .sec.is-offscreen::before,
html[data-js] .sec.is-offscreen::after { animation-play-state: paused; }

/* ---------- v33 Ctrl+K 命令面板 ----------
   按钮、面板全部由脚本创建；没有脚本时页面上什么都不出现。 */
.cmdk-open {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 36px; padding-inline: var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: transparent; color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 0.8125rem;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.cmdk-open svg { width: 15px; height: 15px; }
.cmdk-open kbd {
  font-family: inherit; font-size: 0.6875rem; color: var(--text-secondary);
  border: 1px solid var(--line-strong); border-radius: 6px; padding: 1px 5px;
}
.cmdk-open:hover { color: var(--text); border-color: var(--line-strong); }
@media (max-width: 767px) {
  .cmdk-open kbd { display: none; }
  .cmdk-open span { display: none; }  /* 窄屏只留一枚放大镜 */
  .cmdk-open { width: 36px; justify-content: center; padding-inline: 0; }
}

.cmdk { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; }
/* hidden 属性的 UA display:none 会被上面的 display:flex 干掉，必须显式压回来 */
.cmdk[hidden] { display: none; }
.cmdk__backdrop { position: absolute; inset: 0; background: rgb(8 8 10 / 62%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
html[data-theme="light"] .cmdk__backdrop { background: rgb(246 246 248 / 55%); }
.cmdk__panel {
  position: relative; z-index: 1;
  margin-top: clamp(48px, 12vh, 120px);
  width: min(92vw, 560px); max-height: min(70vh, 560px);
  display: flex; flex-direction: column;
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  background: var(--bg-2);
  box-shadow: 0 24px 80px -24px rgb(0 0 0 / 55%);
  overflow: hidden;
}
.cmdk__bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--line);
}
.cmdk__bar svg { width: 18px; height: 18px; color: var(--text-secondary); flex: 0 0 auto; }
.cmdk__bar kbd { margin-left: auto; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-secondary); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
.cmdk__input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  color: var(--text); font-family: var(--font); font-size: 1rem;
}
.cmdk__input::placeholder { color: var(--text-secondary); }

.cmdk__list { list-style: none; margin: 0; padding: var(--space-2); overflow-y: auto; overscroll-behavior: contain; }
.cmdk__item {
  display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-3);
  align-items: baseline; width: 100%; text-align: left;
  padding: var(--space-2) var(--space-3); border: 0; border-radius: 10px;
  background: transparent; cursor: pointer;
}
.cmdk__item.is-active { background: rgb(127 127 160 / 14%); }
.cmdk__badge {
  grid-row: span 2;
  font-family: var(--font-mono); font-style: normal; font-size: 0.6875rem;
  color: var(--sec-a, var(--accent));
  border: 1px solid currentColor; border-radius: 6px;
  padding: 1px 5px; transform: translateY(-2px);
}
.cmdk__title { color: var(--text); font-size: 0.9375rem; font-weight: 600; }
.cmdk__meta {
  grid-column: 2; color: var(--text-secondary); font-size: 0.8125rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmdk__empty { padding: var(--space-6) var(--space-4); color: var(--text-secondary); font-size: 0.9375rem; }
.cmdk__hints {
  display: flex; gap: var(--space-4);
  padding: var(--space-2) var(--space-4); border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-secondary);
}
.cmdk__hints kbd { font-family: inherit; border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; margin-right: 2px; }

@media (prefers-reduced-motion: reduce) {
  .cmdk, .cmdk * { transition: none !important; animation: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
  .cmdk:not([hidden]) .cmdk__panel { animation: cmdk-in 200ms var(--ease); }
  .cmdk:not([hidden]) .cmdk__backdrop { animation: cmdk-fade 200ms var(--ease); }
}
@keyframes cmdk-in { from { opacity: 0; transform: translateY(-10px); } }
@keyframes cmdk-fade { from { opacity: 0; } }

/* ---------- v35 画廊卡片：色相环渐变描边 + 指针倾斜 ----------
   --tx/--ty 由 JS 写入（-0.5..0.5），没脚本就是 0——静态卡、描边安静亮着；
   倾斜与封面视差全是 transform（合成层），描边环是静态渐变，零重绘。 */
.gal__panel { position: relative; }
.gal__panel::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 210deg,
    transparent 0deg, var(--a1) 70deg, var(--a2) 140deg,
    var(--a3) 210deg, var(--a2) 280deg, transparent 330deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  opacity: 0.5;
  transition: opacity var(--duration-base) var(--ease);
  pointer-events: none;
}
.gal__panel:hover::before,
.gal__panel:focus-within::before { opacity: 1; }
.gal__panel a {
  position: relative; z-index: 1;
  transform: perspective(1100px)
    rotateX(calc(var(--ty, 0) * -5deg)) rotateY(calc(var(--tx, 0) * 6deg));
}
/* 封面视差：框不动，画往指针反方向挪 + 略放大（露出的边全被框裁掉）。
   hover 那条与既有的 .cover > * scale(1.12) 合并成一条，避免 transform 相互覆盖。 */
.gal__panel .cover { overflow: hidden; }
.gal__panel .cover__art {
  transform: translate3d(calc(var(--tx, 0) * -9px), calc(var(--ty, 0) * -7px), 0) scale(1.08);
}
.gal__panel a:hover .cover__art {
  transform: translate3d(calc(var(--tx, 0) * -9px), calc(var(--ty, 0) * -7px), 0) scale(1.12);
}
/* 倾斜回弹：变量变化瞬间跟手（无过渡），离开后 420ms 缓动回正 */
@media (prefers-reduced-motion: no-preference) {
  .gal__panel a, .gal__panel .cover__art { transition: transform 420ms var(--ease); }
  .gal__panel:has(a:hover) a,
  .gal__panel:has(a:hover) .cover__art { transition: none; }
}

/* ---------- v37 分享落地高亮：顺着 #锚点进来时，目标小节闪一下底色 ----------
   纯 CSS：:target 一条规则管全站的文章节锚点；动画播一次就归位。 */
@keyframes target-flash {
  0% { background-color: rgb(154 108 255 / 22%); }
  70% { background-color: rgb(154 108 255 / 12%); }
  100% { background-color: transparent; }
}
.post__body h2[id]:target {
  animation: target-flash 1.8s var(--ease) 1;
  border-radius: 6px;
}
html[data-theme="light"] .post__body h2[id]:target { animation-name: target-flash-light; }
@keyframes target-flash-light {
  0% { background-color: rgb(106 53 208 / 14%); }
  70% { background-color: rgb(106 53 208 / 8%); }
  100% { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .post__body h2[id]:target { animation: none; }
}

/* ---------- v37 页面切换过渡：MPA 渐变（Chrome 126+，其余浏览器无感跳过） ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
/* v38：笔记列表页内锚点也吃到落地高亮 */
.note[id]:target {
  animation: target-flash 1.8s var(--ease) 1;
  border-radius: 14px;
}
html[data-theme="light"] .note[id]:target { animation-name: target-flash-light; }

/* ---------- v48 标题排版：折行时不再留孤字（Chrome 114+，其余忽略） ---------- */
.hero__title, .post__title, .blog-intro__title, .log__title, .bento__desc { text-wrap: pretty; }
.sec__title, .worklist__name, .post__body h2 { text-wrap: balance; }