/* ==========================================================================
   MATTER 设计系统 · 李烨作品集
   基于 matter-immersive 的排版与交互骨架，中文排版做了行高与字距适配
   ========================================================================== */

:root {
  --pearl: #f3f2ee;
  --ink: #0a0a0b;
  --blue: #2a5bff;
  --violet: #7b4dff;
  --muted: #7d7d84;
  --line: rgba(10, 10, 11, .16);
  --fg: var(--ink);
  --sans: "Archivo", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif: "Instrument Serif", "Noto Serif SC", "Songti SC", Georgia, serif;
  --stretch: 1;
  --mblur: 0px;
  --gutter: 4vw;
}
html.dark { --fg: var(--pearl); --muted: #8e8e96; --line: rgba(243, 242, 238, .18); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--pearl); color: var(--fg); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
html { scroll-behavior: auto; }
body { overflow-x: hidden; cursor: none; }
@media (hover: none) { body { cursor: auto; } }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: none; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
::selection { background: var(--blue); color: #fff; }

#sizer { width: 1px; pointer-events: none; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
#maskLayer { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; display: none; }
.ch { position: fixed; inset: 0; z-index: 2; pointer-events: none; visibility: hidden; }
.ch.on { visibility: visible; }
.ia { pointer-events: auto; }

.label {
  font-size: 11.5px; letter-spacing: .24em; color: var(--muted);
  display: inline-flex; gap: .9em; align-items: center;
}
.label::before { content: ''; width: 22px; height: 1px; background: currentColor; opacity: .55; }
.ch-char { display: inline-block; will-change: transform, filter, opacity; }
.ch-char.sp { width: .28em; }

/* 中文标题：行高与字距按中文重心调整 */
.big {
  font-weight: 800; letter-spacing: -.02em; line-height: 1.02;
  transform: scaleY(var(--stretch)); transform-origin: 50% 100%;
  filter: blur(var(--mblur));
}
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }

#nav {
  position: fixed; top: 16px; left: var(--gutter); right: var(--gutter); z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 9px 12px 9px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid rgba(10, 10, 11, .07);
  box-shadow: 0 8px 30px rgba(10, 10, 11, .07);
  pointer-events: auto;
}

/* 页面切换 */
#nav .topnav { display: flex; align-items: center; gap: 2px; }
#nav .topnav a {
  position: relative; padding: 8px 14px 9px; border-radius: 999px;
  font-size: 12.5px; color: #4c4c55;
  transition: color .25s ease, background .25s ease;
}
#nav .topnav a:hover { color: var(--ink); background: rgba(10, 10, 11, .05); }
#nav .topnav a.is-on { color: var(--ink); font-weight: 600; }
#nav .topnav a.is-on::after {
  content: ''; position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: #e2483c;
}

#nav .nav-right { display: flex; align-items: center; gap: 14px; }
#nav .nav-cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 17px; border-radius: 999px;
  background: var(--ink); color: var(--pearl);
  font-size: 12.5px; letter-spacing: .02em;
  transition: background .25s ease, transform .25s ease;
}
#nav .nav-cta b { font-weight: 400; opacity: .85; }
#nav .nav-cta:hover { background: var(--blue); transform: translateY(-1px); }
#nav .wordmark { pointer-events: auto; font-weight: 800; font-size: 15px; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 9px; transition: opacity .25s; }
#nav .wordmark:hover { opacity: .72; }
#nav .wordmark i { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--pearl); display: grid; place-items: center; font-size: 13px; font-weight: 700; font-style: normal; flex: none; }
#nav .wordmark small { font-size: 10px; font-weight: 500; letter-spacing: .16em; color: var(--muted); }
#nav .menu-btn { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: .2em; padding: 8px 4px; }
#nav .menu-btn b { position: relative; width: 26px; height: 10px; display: block; }
#nav .menu-btn b::before, #nav .menu-btn b::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
  transition: transform .5s cubic-bezier(.7, 0, .2, 1), top .5s cubic-bezier(.7, 0, .2, 1);
}
#nav .menu-btn b::before { top: 0; }
#nav .menu-btn b::after { top: 8px; }
html.menu #nav .menu-btn b::before { top: 4px; transform: rotate(45deg); }
html.menu #nav .menu-btn b::after { top: 4px; transform: rotate(-45deg); }
html.menu #nav {
  color: var(--pearl);
  background: rgba(9, 9, 12, .82);
  border-color: rgba(243, 242, 238, .14);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
}
html.menu #nav .wordmark i { background: var(--pearl); color: var(--ink); }
html.menu #nav .topnav a { color: rgba(243, 242, 238, .7); }
html.menu #nav .topnav a:hover { color: #fff; background: rgba(243, 242, 238, .1); }
html.menu #nav .topnav a.is-on { color: #fff; }
html.menu #nav .nav-cta { background: var(--pearl); color: var(--ink); }

#panel {
  position: fixed; inset: 0; z-index: 5; background: #0a0a0b; color: #f3f2ee;
  clip-path: circle(0px at calc(100% - var(--gutter) - 40px) 44px);
  transition: clip-path .95s cubic-bezier(.75, 0, .2, 1);
  pointer-events: none; display: grid; grid-template-columns: 1fr 1fr; align-items: end;
  padding: 0 var(--gutter) 9vh;
}
html.menu #panel { clip-path: circle(160vmax at calc(100% - var(--gutter) - 40px) 44px); pointer-events: auto; }
#panel .links { display: grid; gap: .1em; }
#panel .links a {
  font-weight: 800; font-size: clamp(38px, 7vw, 104px); letter-spacing: -.02em; line-height: 1.1;
  display: inline-block; width: max-content;
  transform: translateY(40px); opacity: 0;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .6s, color .25s;
}
#panel .links a:hover { color: #b7b0ff; }
html.menu #panel .links a { transform: none; opacity: 1; }
html.menu #panel .links a:nth-child(2) { transition-delay: .06s; }
html.menu #panel .links a:nth-child(3) { transition-delay: .12s; }
html.menu #panel .links a:nth-child(4) { transition-delay: .18s; }
html.menu #panel .links a:nth-child(5) { transition-delay: .24s; }
#panel .meta { justify-self: end; text-align: right; font-size: 13px; line-height: 1.8; color: #8e8e96; max-width: 30ch; }
#panel .meta b { color: #f3f2ee; font-weight: 500; display: block; }

#cursor, #ring {
  position: fixed; left: 0; top: 0; z-index: 10; pointer-events: none; border-radius: 50%;
  mix-blend-mode: difference; will-change: transform;
}
#cursor { width: 8px; height: 8px; background: #fff; margin: -4px 0 0 -4px; }
#ring {
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1px solid #fff;
  display: flex; align-items: center; justify-content: center;
  transition: width .35s, height .35s, margin .35s, background .35s;
  font-size: 9px; letter-spacing: .2em; color: #fff; font-weight: 600;
}
#ring span { opacity: 0; transition: opacity .25s; }
#ring.link { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
#ring.drag, #ring.view, #ring.play { width: 78px; height: 78px; margin: -39px 0 0 -39px; background: rgba(255, 255, 255, .12); }
#ring.drag span, #ring.view span, #ring.play span { opacity: 1; }
@media (hover: none) { #cursor, #ring { display: none; } }

#rail {
  position: fixed; right: calc(var(--gutter) - 6px); top: 50%; transform: translateY(-50%); z-index: 6;
  height: 32vh; width: 1px; background: var(--line);
}
#rail i { position: absolute; left: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--fg); transform: translateY(-50%); }

/* ---------------- 首屏 ---------------- */
#ch-hero .label { position: absolute; left: var(--gutter); top: 16vh; opacity: 0; color: var(--fg); }
#ch-hero h1 { position: absolute; left: var(--gutter); bottom: 12vh; font-size: clamp(52px, 11.4vw, 168px); }
#ch-hero .l1, #ch-hero .l2 { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
#ch-hero .l1 .in { display: block; transform: translateY(112%); }
#ch-hero .l2 .in { display: block; transform-origin: 0 50%; transform: scaleX(1.7); opacity: 0; }
#ch-hero .l3 { display: block; font-size: .34em; line-height: 1.25; margin-top: .12em; clip-path: inset(-10% 100% -10% 0); color: var(--fg); }
#ch-hero .l3 em { font-style: italic; color: var(--blue); }
#ch-hero .cta {
  position: absolute; right: var(--gutter); bottom: 13vh; opacity: 0;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 32px; border-radius: 999px;
  background: var(--ink); color: var(--pearl);
  font-size: 15px; font-weight: 600; letter-spacing: .04em; white-space: nowrap;
  box-shadow: 0 12px 34px rgba(10, 10, 11, .20);
  transition: transform .35s cubic-bezier(.2, .75, .2, 1), background .3s ease, box-shadow .3s ease;
}
#ch-hero .cta:hover { background: var(--blue); box-shadow: 0 16px 44px rgba(42, 91, 255, .32); }
#ch-hero .cta .arrow { display: inline-block; font-size: 17px; transition: transform .35s cubic-bezier(.2, .75, .2, 1); }
#ch-hero .cta:hover .arrow { transform: translateX(5px); }
#ch-hero .hint {
  position: absolute; left: 50%; bottom: 4.5vh; transform: translateX(-50%);
  font-size: 10.5px; letter-spacing: .28em; color: var(--muted); opacity: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
#ch-hero .hint i { width: 1px; height: 34px; background: currentColor; display: block; transform-origin: top; animation: hint 2.2s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes hint { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 46% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
#ch-hero .meta { position: absolute; right: var(--gutter); top: 16vh; text-align: right; font-size: 13px; line-height: 1.75; color: var(--muted); max-width: 26ch; opacity: 0; }
#ch-hero .meta b { color: var(--fg); font-weight: 500; }

.mag { display: inline-flex; align-items: center; gap: .55em; font-size: 12.5px; letter-spacing: .2em; font-weight: 600; }
.mag .ch-char { will-change: transform; }
.mag .arrow { display: inline-block; transform-origin: 0 50%; }
.ul { position: relative; display: inline-block; }
.ul svg { position: absolute; left: 0; right: 0; bottom: -6px; width: 100%; height: 8px; overflow: visible; }
.ul svg path { fill: none; stroke: currentColor; stroke-width: 1.2; }

/* ---------------- 宣言 ---------------- */
#ch-matter { color: var(--fg); }
#ch-matter .line {
  position: absolute; left: var(--gutter); right: var(--gutter); text-align: left; white-space: nowrap;
  font-size: clamp(40px, 9.2vw, 144px); will-change: transform; opacity: 0;
}
#ch-matter .line1 { top: 13vh; }
#ch-matter .line2 { top: 33vh; }

/* 关于我：左介绍 + 右能力/工具（参考原站 about 排版） */
#ch-matter .about-block {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 5.5vh;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  padding: 24px 28px;
  border-radius: 18px;
  border: 1px solid rgba(10, 10, 11, .10);
  background: rgba(255, 255, 255, .74);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
.about-badge { font-size: 10.5px; letter-spacing: .22em; color: #767680; }
.about-name { font-size: clamp(30px, 3.4vw, 52px); font-weight: 800; letter-spacing: -.01em; line-height: 1; margin: 6px 0 8px; }
.about-role { font-size: 12.5px; color: #55555e; margin-bottom: 10px; }
.about-contact { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 10px; }
.about-contact a { display: inline-flex; align-items: baseline; gap: 7px; font-size: 12.5px; color: #1c1c22; transition: color .25s; }
.about-contact a:hover { color: var(--blue); }
.about-contact span { font-size: 10.5px; letter-spacing: .16em; color: #767680; }
.about-desc { font-size: 12.5px; line-height: 1.75; color: #5a5a63; max-width: 42ch; }
#ch-matter .about-right { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; }
.about-col h4 { font-size: 10.5px; letter-spacing: .22em; color: #767680; font-weight: 600; margin-bottom: 10px; }
.about-col ul { display: grid; gap: 7px; }
.about-col li { display: grid; grid-template-columns: 9.6em 1fr; gap: 12px; font-size: 12px; line-height: 1.55; }
.about-col li b { color: #14141a; font-weight: 600; white-space: nowrap; }
.about-col li span { color: #5a5a63; }
.about-col--tools p { font-size: 12px; line-height: 1.8; color: #5a5a63; }
#maskLayer text { font-family: var(--sans); font-weight: 800; letter-spacing: -.02em; }

/* ---------------- 作品目录 ---------------- */
#ch-gallery .idx { position: absolute; right: var(--gutter); top: 11.4vh; display: flex; align-items: baseline; gap: 8px; font-size: 13px; letter-spacing: .12em; color: var(--muted); }

/* 作品分类标签栏 */
#ch-gallery .work-tabs {
  position: absolute; left: var(--gutter); right: calc(var(--gutter) + 92px); top: 11.4vh;
  display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; z-index: 3;
}
#ch-gallery .work-tabs button {
  position: relative; padding: 6px 0 8px;
  font-size: 12.5px; letter-spacing: .03em; color: var(--muted);
  transition: color .25s ease; white-space: nowrap;
}
#ch-gallery .work-tabs button:hover { color: var(--fg); }
#ch-gallery .work-tabs button.is-on { color: var(--fg); }
#ch-gallery .work-tabs button.is-on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--accent, var(--blue));
}
html.dark #ch-gallery .work-tabs button.is-on::after { background: #b7b0ff; }
.counter { display: inline-flex; height: 1.1em; overflow: hidden; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--fg); font-weight: 600; }
.counter .col { display: inline-block; transition: transform .7s cubic-bezier(.2, .75, .2, 1); }
.counter .col span { display: block; height: 1.1em; }
#ch-gallery .gtext {
  position: absolute; left: var(--gutter); bottom: 12vh;
  max-width: min(54vw, 800px);
  display: flex; flex-direction: column; justify-content: flex-end;
}
#ch-gallery .kind { font-size: clamp(15px, 1.8vw, 24px); color: var(--muted); margin-bottom: .28em; }
#ch-gallery .title { font-size: clamp(38px, 6.4vw, 96px); }
#ch-gallery .desc { position: absolute; right: var(--gutter); bottom: 13vh; width: min(34ch, 36vw); font-size: 14.5px; line-height: 1.8; color: var(--muted); }
#ch-gallery .desc .mag { margin-top: 20px; color: var(--fg); }
#ch-gallery .gal-nav button { pointer-events: auto; }
#ch-gallery .hint { position: absolute; left: 50%; bottom: 5.5vh; transform: translateX(-50%); font-size: 10.5px; letter-spacing: .22em; color: var(--muted); white-space: nowrap; }

/* 左右切换按钮 */
#ch-gallery .gal-nav {
  position: absolute; right: var(--gutter); bottom: 6.5vh; z-index: 4;
  display: flex; gap: 10px;
  pointer-events: auto;
}
#ch-gallery .gal-nav button {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--fg);
  display: grid; place-items: center; font-size: 15px;
  transition: background .25s ease, transform .25s ease, border-color .25s ease;
}
#ch-gallery .gal-nav button:hover { background: rgba(10, 10, 11, .07); transform: scale(1.07); }
html.dark #ch-gallery .gal-nav button { border-color: rgba(243, 242, 238, .25); }
html.dark #ch-gallery .gal-nav button:hover { background: rgba(243, 242, 238, .12); }
#ch-gallery .dragzone { position: absolute; inset: 22vh 0 24vh 0; }
#ch-gallery .glow { position: absolute; left: 50%; top: 50%; width: 120vmax; height: 120vmax; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, var(--accent, #2a5bff) 0%, transparent 42%); opacity: 0; transition: opacity 1.2s, background 1.2s; pointer-events: none; }
#ch-gallery.lit .glow { opacity: .12; }
#ch-gallery .title, #ch-gallery .kind, #ch-gallery .desc p { transition: opacity .35s, transform .5s cubic-bezier(.2, .7, .2, 1); }
#ch-gallery.swap .title, #ch-gallery.swap .kind, #ch-gallery.swap .desc p { opacity: 0; transform: translateY(14px); }

/* 作品画廊：CSS 3D 平面 */
#ch-gallery .boards {
  position: absolute; inset: 16vh 0 26vh; z-index: 1;
  perspective: 2400px; perspective-origin: 50% 50%;
  pointer-events: none;
}
/* 按住左键左右拖：禁掉原生图片拖拽与文字选中 */
#ch-gallery, #ch-gallery .boards, #ch-gallery .board, #ch-gallery .board__hit {
  -webkit-user-select: none; user-select: none;
}
#ch-gallery .board__frame img {
  -webkit-user-drag: none; user-drag: none;
  pointer-events: none;
}
/* 触摸端：纵向留给页面滚动，横向交给手势 */
#ch-gallery .dragzone, #ch-gallery .boards { touch-action: pan-y; }
#ch-gallery .board {
  position: absolute; left: 50%; top: 50%;
  width: min(25vw, 356px);
  transform: translate(-50%, -50%);
  pointer-events: auto; will-change: transform, opacity;
  transition: opacity .45s ease;
}
.board__hit { display: block; width: 100%; text-align: left; }
.board__frame {
  display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 14px; box-shadow: 0 26px 70px -28px rgba(8, 10, 24, .5);
  transition: box-shadow .4s ease;
}
.board__frame img { width: 100%; height: 100%; display: block; }
.board.is-front .board__frame { box-shadow: 0 34px 90px -30px rgba(8, 10, 24, .58); }
.board.is-hover .board__frame { box-shadow: 0 44px 110px -32px rgba(8, 10, 24, .66); }
.board__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding-top: 12px; font-size: 12.5px;
}
.board__meta b { font-weight: 600; letter-spacing: -.01em; }
.board__meta i { font-style: normal; color: var(--muted); font-size: 11.5px; letter-spacing: .06em; }
html.dark .board__frame { box-shadow: 0 30px 80px -26px rgba(0, 0, 0, .8); }

/* 详情面板的关闭遮罩：点面板外任意处关闭 */
#ch-gallery .detail-scrim {
  position: absolute; inset: 0; z-index: 7;
  background: rgba(10, 10, 11, .18);
  opacity: 0; pointer-events: none;
  transition: opacity .5s ease;
  backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px);
}
#ch-gallery.scrim .detail-scrim { opacity: 1; pointer-events: auto; }
#ch-gallery .detail-scrim span {
  position: absolute; top: 50%; left: 0; right: min(46vw, 700px);
  transform: translateY(-50%); text-align: center;
  font-size: 12px; letter-spacing: .22em; color: var(--ink);
  opacity: 0; transition: opacity .5s ease .25s;
}
#ch-gallery.scrim .detail-scrim span { opacity: .5; }
@media (max-width: 900px) {
  #ch-gallery .detail-scrim span { top: 5.5%; left: 0; right: 0; transform: none; }
}
#ch-gallery.scrim .title,
#ch-gallery.scrim .kind,
#ch-gallery.scrim .desc,
#ch-gallery.scrim .hint,
#ch-gallery.scrim .idx,
#ch-gallery.scrim .boards { opacity: .34; transition: opacity .5s ease; }

/* 详情面板：图片 + 视频 */
.detail {
  position: absolute; top: 0; right: 0; z-index: 8; height: 100%; width: min(46vw, 700px);
  background: rgba(243, 242, 238, .9); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border-left: 1px solid var(--line); padding: 12vh var(--gutter) 8vh;
  transform: translateX(104%); transition: transform .85s cubic-bezier(.75, 0, .2, 1);
  display: flex; flex-direction: column; gap: 24px; overflow-y: auto; overscroll-behavior: contain;
}
.detail.open { transform: none; }
.detail .close {
  align-self: flex-end;
  padding: 10px 14px; margin: -10px -14px 0 0;
  border-radius: 999px;
  transition: background .25s ease;
}
.detail .close:hover { background: rgba(10, 10, 11, .07); }
html.dark .detail .close:hover { background: rgba(243, 242, 238, .1); }
.detail h3 { font-size: clamp(30px, 3.6vw, 50px); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; }
.detail .lead { font-size: 14.5px; line-height: 1.85; color: var(--muted); max-width: 46ch; }
.detail .specs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; border-top: 1px solid var(--line); padding-top: 20px; font-size: 13px; }
.detail .specs b { display: block; font-weight: 600; margin-bottom: 4px; }
.detail .specs span { color: var(--muted); }
.detail .media { display: flex; flex-direction: column; gap: 20px; }
.detail .media figure { border-top: 1px solid var(--line); padding-top: 12px; }
.detail .media img { width: 100%; height: auto; display: block; background: #fff; }

/* 超长套图：保持原始像素，不整体压缩；容器内纵向滚动 */
.detail .media figure.is-tall { border-top: 1px solid var(--line); padding-top: 12px; }
.detail .media figure.is-tall img {
  width: auto; max-width: none; height: auto; display: block; margin: 0 auto;
  cursor: zoom-in; image-rendering: -webkit-optimize-contrast;
}
.detail .media .tall-scroll {
  max-height: 78vh; overflow-y: auto; overflow-x: auto;
  overscroll-behavior: contain; scrollbar-width: thin;
  border: 1px solid var(--line); background: #fff;
}
.detail .media .tall-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.detail .media .tall-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.22); border-radius: 4px; }
.detail .media .tall-hint {
  font-size: 11.5px; color: var(--muted); padding-top: 8px; letter-spacing: .04em;
}
.detail .media .tall-hint b { color: var(--fg); font-weight: 600; }

/* 全屏原图查看 */
.tall-viewer {
  position: fixed; inset: 0; z-index: 999; background: rgba(10,10,11,.94);
  display: none; overflow: auto; overscroll-behavior: contain; cursor: zoom-out;
  -webkit-overflow-scrolling: touch;
}
.tall-viewer.is-open { display: block; }
.tall-viewer img { display: block; width: auto; max-width: none; height: auto; margin: 0 auto; }
.tall-viewer__bar {
  position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between;
  gap: 16px; padding: 12px 20px; color: #fff; font-size: 12px; letter-spacing: .06em;
  background: linear-gradient(180deg, rgba(10,10,11,.92), rgba(10,10,11,0));
  pointer-events: none;
}

.detail .media video { width: 100%; height: auto; max-height: 58vh; display: block; background: #0a0a0b; }
.detail .media video.is-wide { max-height: 46vh; }
.detail .media figcaption { padding-top: 8px; font-size: 12px; color: var(--muted); }
.detail .media figcaption::before { content: '↳ '; opacity: .6; }

/* ---------------- 文字建筑 ---------------- */
#ch-typo .word {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  perspective: 900px; perspective-origin: 50% 50%; opacity: 0;
  font-weight: 800; font-size: clamp(64px, 16vw, 260px); letter-spacing: -.02em; line-height: 1;
}
#ch-typo .word .stage { transform-style: preserve-3d; display: flex; will-change: transform; }
#ch-typo .word .ch-char { transform-style: preserve-3d; }
#ch-typo .label { position: absolute; left: var(--gutter); top: 16vh; }
#ch-typo .note { position: absolute; right: var(--gutter); top: 16vh; text-align: right; font-size: 13.5px; line-height: 1.8; color: var(--muted); max-width: 28ch; }

/* ---------------- 能力与数字 ---------------- */
#ch-physics .label { position: absolute; left: var(--gutter); top: 16vh; }
#ch-physics h2 { position: absolute; left: var(--gutter); top: 22vh; font-size: clamp(38px, 5.6vw, 84px); line-height: 1.05; }
#ch-physics h2 em { font-style: italic; font-weight: 400; font-family: var(--serif); }
#ch-physics .stats { position: absolute; right: var(--gutter); bottom: 12vh; display: flex; gap: 44px; text-align: right; }
#ch-physics .stats .v { font-weight: 800; font-size: clamp(30px, 3.4vw, 50px); letter-spacing: -.02em; line-height: 1; }
#ch-physics .stats .k { margin-top: 8px; font-size: 11px; letter-spacing: .16em; color: var(--muted); }
#ch-physics .hint { position: absolute; left: var(--gutter); bottom: 12vh; font-size: 10.5px; letter-spacing: .24em; color: var(--muted); }
#ch-physics .zone { position: absolute; inset: 0; }
#ch-physics .caps { position: absolute; left: var(--gutter); bottom: 20vh; max-width: 34ch; display: grid; gap: 10px; }
#ch-physics .caps div { font-size: 13.5px; line-height: 1.7; color: var(--muted); }
#ch-physics .caps b { color: var(--fg); font-weight: 600; display: block; font-size: 13.5px; }

/* ---------------- 终屏 ---------------- */
#ch-final { color: var(--fg); }
#ch-final h2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; font-size: clamp(34px, 6.4vw, 108px); }
#ch-final h2 .serif { color: #b7b0ff; }

/* ---------------- 页脚 ---------------- */
#ch-footer { color: var(--fg); display: grid; grid-template-rows: auto 1fr auto; padding: 0 var(--gutter) 5vh; }
#ch-footer .outro { padding-top: 15vh; display: grid; grid-template-columns: 1fr; gap: 48px; opacity: 0; }
#ch-footer .outro .label { margin-bottom: 24px; }
#ch-footer .outro h2 { font-size: clamp(34px, 5.6vw, 84px); line-height: 1.06; }
#ch-footer .outro h2 .serif { color: #b7b0ff; }
#ch-footer .outro-cta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 16px 44px; text-align: left; }
#ch-footer .outro-cta p { font-size: 14px; color: #8e8e96; }
#ch-footer .outro-cta .ul { color: var(--ink); }
#ch-footer .outro-cta .mag { font-size: 15px; letter-spacing: .18em; }
#ch-footer .cols { align-self: end; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; padding-bottom: 5vh; }
#ch-footer .cols h4 { font-size: 11px; letter-spacing: .22em; color: #8e8e96; margin-bottom: 14px; font-weight: 600; }
#ch-footer .cols a, #ch-footer .cols button { display: block; font-size: 14.5px; line-height: 1.95; text-align: left; transition: color .25s; }
#ch-footer .cols a:hover, #ch-footer .cols button:hover { color: #b7b0ff; }
#ch-footer .cols p { font-size: 14.5px; line-height: 1.8; color: #8e8e96; max-width: 30ch; }
#ch-footer .legal { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: var(--muted); letter-spacing: .06em; padding-top: 18px; border-top: 1px solid var(--line); }

/* ---------------- 载入器 ---------------- */
#loader { position: fixed; inset: 0; z-index: 20; background: var(--pearl); display: flex; align-items: center; justify-content: center; transition: opacity .6s ease, visibility .6s; }
#loader.off { opacity: 0; visibility: hidden; }
#loader i { width: 44px; height: 1px; background: var(--ink); display: block; transform-origin: 0 50%; animation: load 1.1s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes load { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); } 51% { transform-origin: 100% 50%; } 100% { transform: scaleX(0); transform-origin: 100% 50%; } }

/* ---------------- 降级（无 WebGL 时按普通文档流展示） ---------------- */
html.no-module .ch { visibility: visible; position: static; padding: 9vh var(--gutter); }
html.no-module .ch .label, html.no-module .ch .meta, html.no-module .ch .cta,
html.no-module .ch .hint, html.no-module .ch .idx, html.no-module .ch .title,
html.no-module .ch .kind, html.no-module .ch .desc, html.no-module .ch .note,
html.no-module .ch .stats, html.no-module .ch .caps, html.no-module .ch h1,
html.no-module .ch h2, html.no-module .ch .word, html.no-module .ch .outro,
html.no-module .ch .cols, html.no-module .ch .legal { position: static; opacity: 1; transform: none; clip-path: none; }
html.no-module #gl, html.no-module #loader, html.no-module #cursor, html.no-module #ring, html.no-module #sizer { display: none; }
html.no-module #ch-hero h1 .in { transform: none; opacity: 1; }
html.no-module #ch-hero .l3 { clip-path: none; }
html.no-module #ch-typo .word { display: none; }
html.no-module .detail { position: static; transform: none; width: 100%; height: auto; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 900px) {
  :root { --gutter: 6vw; }
  #ch-gallery .board { width: min(76vw, 520px); }
  #ch-gallery .board__frame { aspect-ratio: 16 / 10; }
  #ch-gallery .board__meta { font-size: 11.5px; }
  #ch-gallery .boards { inset: 24vh 0 32vh; }
  #ch-gallery .gal-nav button { touch-action: manipulation; }
  #ch-gallery .work-tabs {
    left: var(--gutter); right: var(--gutter); top: 10.4vh;
    flex-wrap: nowrap; overflow-x: auto; gap: 0 18px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  #ch-gallery .work-tabs::-webkit-scrollbar { display: none; }
  #ch-gallery .idx { top: 15.5vh; right: var(--gutter); }
  #ch-hero h1 { bottom: 20vh; font-size: clamp(42px, 13vw, 96px); }
  #ch-hero .cta { right: auto; left: var(--gutter); bottom: 9vh; padding: 15px 26px; font-size: 14px; gap: 10px; }
  #ch-hero .meta { display: none; }
  #nav { top: 10px; padding: 7px 10px 7px 8px; gap: 6px; }
  #nav .wordmark small { display: none; }
  #nav .wordmark { font-size: 14px; gap: 7px; white-space: nowrap; }
  #nav .wordmark i { width: 28px; height: 28px; font-size: 12px; }
  /* 链接横向滚动，保证任何时候都能切页 */
  #nav .topnav {
    flex: 1 1 auto; min-width: 0; overflow-x: auto;
    gap: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  #nav .topnav::-webkit-scrollbar { display: none; }
  #nav .topnav a { padding: 7px 9px 8px; font-size: 12px; white-space: nowrap; }
  #nav .nav-right { gap: 4px; }
  #nav .nav-cta { display: none; }
  #nav .menu-btn { gap: 0; padding: 7px 2px; }
  #nav .menu-btn span { display: none; }
  #ch-matter .line { font-size: clamp(34px, 11.5vw, 76px); }
  #ch-matter .line1 { top: 11vh; }
  #ch-matter .line2 { top: 20vh; }
  #ch-matter .about-block { grid-template-columns: 1fr; gap: 16px; bottom: 5vh; padding-top: 16px; }
  #ch-matter .about-right { grid-template-columns: 1fr; gap: 12px; }
  #ch-matter .about-block { bottom: 3vh; padding: 14px 16px; gap: 10px; }
  .about-col--tools p { font-size: 11px; line-height: 1.6; }
  .about-col li { grid-template-columns: 1fr; gap: 2px; font-size: 11px; line-height: 1.45; }
  .about-desc { font-size: 11.5px; line-height: 1.6; }
  .about-role, .about-contact a { font-size: 11.5px; }
  .about-contact { gap: 4px 18px; margin-bottom: 8px; }
  .about-col h4 { margin-bottom: 7px; }
  .about-col ul { gap: 5px; }
  .about-desc { max-width: none; }
  .about-name { font-size: 26px; margin: 4px 0 6px; }
  #ch-hero .hint { display: none; }
  #ch-gallery .desc { right: auto; left: var(--gutter); bottom: 4vh; width: 84vw; font-size: 13.5px; }
  #ch-gallery .gtext { bottom: 22vh; max-width: 86vw; }
  #ch-gallery .hint { bottom: 1.2vh; font-size: 10px; }
  #ch-gallery .idx { top: 15.2vh; }
  #ch-gallery .gal-nav { right: auto; left: 50%; transform: translateX(-50%); bottom: 17vh; gap: 14px; }
  #ch-gallery .gal-nav button { width: 42px; height: 42px; }
  .detail {
    width: 100%; top: auto; bottom: 0; height: 82%;
    padding: 5vh var(--gutter) 4vh;
    border-left: 0; border-top: 1px solid var(--line);
    border-radius: 20px 20px 0 0;
    transform: translateY(104%);
  }
  .detail.open { transform: none; }
  #ch-physics .stats { left: var(--gutter); right: auto; bottom: 6vh; text-align: left; gap: 26px; }
  #ch-physics .caps { display: none; }
  #ch-physics .hint { bottom: 22vh; }
  #ch-typo .note { display: none; }
  #ch-footer .cols { grid-template-columns: 1fr 1fr; gap: 16px; padding-bottom: 3vh; }
  #ch-footer .cols > div:first-child { display: none; }
  #ch-footer .outro { padding-top: 12vh; gap: 28px; }
  #panel { grid-template-columns: 1fr; }
  #panel .meta { justify-self: start; text-align: left; margin-top: 28px; }
  #rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #ch-hero .hint i { animation: none; }
}

/* ---------------- 入场动效 ---------------- */
.reveal .ch-char { opacity: 0; transform: translateY(.38em) rotate(2.5deg); filter: blur(7px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1), filter .8s ease; }
.reveal.in .ch-char { opacity: 1; transform: none; filter: blur(0); }
#ch-hero h1 .ch-char { opacity: 0; transform: translateY(.18em) rotate(4deg); filter: blur(8px); transition: opacity .55s ease, transform .9s cubic-bezier(.2, .8, .2, 1), filter .75s ease; }
#ch-hero h1.go .ch-char { opacity: 1; transform: none; filter: blur(0); }
#ch-hero h1.go .l1 .in { transform: none; transition: transform 1s cubic-bezier(.2, .85, .2, 1); }
#ch-hero h1.go .l2 .in { transform: scaleX(1); opacity: 1; transition: transform 1.15s cubic-bezier(.2, .9, .2, 1) .55s, opacity .5s ease .55s; }
#ch-hero h1.go .l3 { clip-path: inset(-10% 0 -10% 0); transition: clip-path 1.25s cubic-bezier(.75, 0, .2, 1) 1.35s; }
#ch-hero.go .label, #ch-hero.go .cta, #ch-hero.go .hint, #ch-hero.go .meta { opacity: 1; transition: opacity 1s ease 2.05s; }
body[data-capture] *, body[data-capture] *::before, body[data-capture] *::after { transition: none !important; animation: none !important; }

/* 卡片下方标注隐藏：作品名/交付说明统一放在左下大字区，避免重复 */
#ch-gallery .board__meta { display: none; }

/* 能力章节整体隐藏（用户要求去掉与能力有关的界面；保留 DOM 以免脚本引用报错） */
#ch-physics { display: none !important; }

/* 封面图加载完成才淡入，避免露出底色 */
#ch-gallery .board img.cover { opacity: 0; transition: opacity .45s ease; }
#ch-gallery .board img.cover.ready { opacity: 1; }

/* 弱网兜底：图片加载中显示作品名占位，加载完成后被封面盖住 */
#ch-gallery .board__ph {
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center; padding: 12px; text-align: center;
  font-size: 12.5px; letter-spacing: .1em; color: #75757d;
}
#ch-gallery .board img.cover { position: relative; z-index: 1; }