/* 基础令牌：浅色画廊，而非深色技术仪表盘 */
:root {
  --paper: #fcfcfa;
  --ink: #0a0a0a;
  --body: #4b5667;
  --mist: #97a4b7;
  --line: #dce5ee;
  --plate: rgba(252, 252, 250, 0.91);
  --page-gutter: clamp(20px, 4vw, 72px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color: inherit; }

/* 固定导航：低存在感的白色阅读栏 */
.site-header {
  position: fixed; z-index: 20; top: 0; left: 0; width: 100%; min-height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px var(--page-gutter);
  /* Apple 原生玻璃感：低不透明度、较高饱和度与背景模糊，让底层内容自然透出。 */
  background: rgba(252, 252, 250, 0.28); border-bottom: 1px solid rgba(255, 255, 255, 0.56);
  box-shadow: 0 1px 0 rgba(10, 10, 10, 0.035); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px);
}
.identity { display: grid; gap: 2px; text-decoration: none; line-height: 1; }
.identity strong { font-size: 12px; letter-spacing: 0.08em; }
.identity span, nav { color: var(--mist); font-size: 10px; letter-spacing: 0.08em; }
nav { display: flex; gap: clamp(12px, 2vw, 28px); }
nav a { min-height: 44px; display: inline-grid; place-items: center; text-decoration: none; transition: color 600ms var(--ease); }
nav a:hover, nav a:focus-visible { color: var(--ink); }

/* 首屏：大面积留白与弱层级标题 */
.hero { min-height: 100svh; padding: 160px var(--page-gutter) 50px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 68% 62%, rgba(220, 229, 238, 0.55), transparent 32%); }
.hero-copy { position: relative; z-index: 1; max-width: 1080px; }
.kicker { margin: 0 0 18px; color: var(--mist); font-size: 11px; font-weight: 700; letter-spacing: 0.11em; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 1000px; margin-bottom: 28px; font-size: clamp(54px, 9.5vw, 152px); font-weight: 700; line-height: 0.89; letter-spacing: -0.07em; }
h1 span { color: var(--mist); display: block; font-weight: 500; }
.hero-copy > p:last-child { max-width: 420px; margin-bottom: 0; color: var(--body); font-size: clamp(16px, 1.5vw, 21px); line-height: 1.65; }
.scroll-cue { align-self: flex-end; position: relative; z-index: 1; min-height: 44px; margin-top: 48px; color: var(--body); font-size: 13px; text-decoration: none; }
.scroll-cue span { display: inline-block; margin-left: 6px; transition: transform 600ms var(--ease); }
.scroll-cue:hover span, .scroll-cue:focus-visible span { transform: none; }

/* 分类章节：同页连续组织，不额外新增入口 */
.work-chapter { padding-top: 132px; }
.chapter-intro { max-width: 690px; padding: 0 var(--page-gutter) 88px; }
.chapter-intro h2 { margin-bottom: 22px; font-size: clamp(44px, 6.4vw, 96px); line-height: 0.93; letter-spacing: -0.065em; }
.chapter-intro > p:last-child { max-width: 48ch; margin-bottom: 0; color: var(--body); font-size: 17px; line-height: 1.7; }
.scene-list { display: grid; }

/* 视差项目场景：一张固定背景 + 一张可读的前景信息层 */
.project-scene { --art-a: #dae5ea; --art-b: #8390a1; --drift: 0px; min-height: 100svh; position: relative; display: flex; align-items: flex-end; isolation: isolate; overflow: clip; padding: clamp(20px, 4vw, 64px); }
.project-background { position: absolute; z-index: -2; inset: -26px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; filter: blur(5px) saturate(0.75); opacity: 0.46; transform: translate3d(0, var(--drift), 0); transition: opacity 700ms var(--ease), filter 700ms var(--ease), transform 150ms linear; }
.project-background::after { content: ""; position: absolute; inset: 0; background: rgba(252, 252, 250, 0.42); }
.project-scene.is-active .project-background { opacity: 0.86; filter: blur(0) saturate(1); }
.project-scene--signal .project-background { background-image: radial-gradient(circle at 17% 72%, #d3663a 0 7%, transparent 7.2%), radial-gradient(circle at 70% 25%, #e9f0ee 0 19%, transparent 19.2%), linear-gradient(125deg, #6f8292, #dfe7e2 55%, #e1a279); }
.project-scene--mountain .project-background { background-image: linear-gradient(165deg, transparent 0 45%, rgba(25, 35, 27, 0.82) 45.4% 62%, transparent 62.4%), linear-gradient(28deg, transparent 0 52%, rgba(52, 66, 51, 0.86) 52.4% 71%, transparent 71.4%), linear-gradient(122deg, #b7bbb0, #e9e7dc 48%, #85927f); }
.project-scene--desk .project-background { background-image: linear-gradient(145deg, rgba(240, 223, 190, 0.94) 0 30%, transparent 30.5%), linear-gradient(90deg, #39495a 0 27%, #b37d54 27.5% 62%, #7b9395 62.5%); }
.project-scene--orbit .project-background { background-image: radial-gradient(ellipse at 68% 42%, transparent 0 13%, #9ba8b3 13.5% 14.2%, transparent 14.8% 23%, #bec8cf 23.4% 24.1%, transparent 24.5%), linear-gradient(130deg, #eef2f4, #becad1 52%, #d7d8d3); }
.project-scene--system .project-background { background-image: linear-gradient(90deg, transparent 0 18%, rgba(82, 95, 106, 0.67) 18.5% 19.5%, transparent 20% 47%, rgba(82, 95, 106, 0.67) 47.5% 48.5%, transparent 49%), linear-gradient(0deg, transparent 0 35%, rgba(82, 95, 106, 0.67) 35.5% 36.5%, transparent 37% 63%, rgba(82, 95, 106, 0.67) 63.5% 64.5%, transparent 65%), linear-gradient(140deg, #dce5ee, #f1ede6); }
.project-plate { width: min(690px, 100%); padding: clamp(28px, 4vw, 64px); background: var(--plate); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 24px; box-shadow: 0 24px 70px rgba(10, 10, 10, 0.12); backdrop-filter: blur(12px); opacity: 0.64; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease), box-shadow 700ms var(--ease); }
.project-scene.is-active .project-plate { opacity: 1; transform: translateY(0); }
.project-meta { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: clamp(42px, 8vw, 106px); color: var(--body); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
.project-status { color: var(--body); white-space: nowrap; }
.project-plate h3 { max-width: 10ch; margin-bottom: 12px; font-size: clamp(43px, 6vw, 84px); line-height: 0.92; letter-spacing: -0.065em; }
.project-eyebrow { margin-bottom: 24px; color: var(--mist); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
/* Vibe Coding 与产品工作共用左上角元数据规范；英文统一以大写、等字距呈现。 */
.project-summary { max-width: 34ch; margin-bottom: 26px; color: var(--body); font-size: 17px; line-height: 1.65; }
.project-note { margin-bottom: 36px; color: var(--ink); font-size: 15px; line-height: 1.6; }
/* Vibe 态度句：较大的浅色斜体正文，前后引号仅作装饰而不干扰双语内容。 */
.project-note--attitude { color: var(--mist); font-size: clamp(18px, 1.45vw, 22px); font-style: italic; font-weight: 500; line-height: 1.45; letter-spacing: -0.025em; }
.project-note--attitude::before, .project-note--attitude::after { display: inline-block; color: rgba(151, 164, 183, 0.62); font-family: Georgia, 'Times New Roman', serif; font-size: 1.72em; font-style: normal; font-weight: 400; line-height: 0; vertical-align: -0.18em; }
.project-note--attitude::before { content: '“'; margin-right: 0.12em; }
.project-note--attitude::after { content: '”'; margin-left: 0.08em; position: relative; top: 0.48em; }
.project-action { min-width: 144px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; border: 1px solid var(--ink); border-radius: 999px; background: rgba(255, 255, 255, 0.35); color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; transition: background 600ms var(--ease), color 600ms var(--ease), box-shadow 600ms var(--ease); }
.project-action:hover, .project-action:focus-visible { opacity: 1; }
.project-action[aria-disabled="true"] { color: var(--body); cursor: not-allowed; border-color: var(--line); background: transparent; }
.project-action[aria-disabled="true"]:hover { color: var(--body); background: transparent; box-shadow: none; }

/* 页脚：回到近白画布，让阅读自然收束 */
.site-footer { min-height: 70svh; padding: 140px var(--page-gutter) 46px; display: flex; flex-direction: column; justify-content: flex-end; background: var(--paper); }
/* 联系标题始终保持单行；窄屏同步收紧字号，避免以换行或溢出破坏收束感。 */
.site-footer h2 { max-width:none; margin-bottom:28px; font-size:clamp(34px, 5vw, 64px); line-height:0.98; letter-spacing:-.045em; white-space:nowrap; }
/* 页脚邮箱：轻量蓝灰文字与同色线框信封，作为可访问的 mailto 入口。 */
.footer-email { width:fit-content; min-height:44px; display:inline-flex; align-items:center; gap:8px; color:var(--mist); font-size:clamp(14px, 1.25vw, 18px); text-decoration:none; }
.footer-email:hover, .footer-email:focus-visible { color:var(--body); }
.footer-email__icon { width:18px; height:18px; flex:0 0 18px; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.text-link { width:fit-content; min-height:44px; color:var(--ink); font-size:clamp(19px, 2vw, 27px); text-decoration-thickness:1px; text-underline-offset:7px; }
.footer-note { margin:108px 0 0; color:var(--mist); font-size:11px; }

/* 焦点态：键盘路径始终可见 */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }

/* 移动端：视差降级，项目场景保持自然阅读与触控尺寸 */
@media (max-width: 720px) {
  .site-header { min-height: 62px; padding-inline: var(--page-gutter); }
  .identity span { display: none; }
  nav { gap: 12px; }
  nav a { font-size: 10px; }
  .hero { padding: 130px 22px 34px; }
  h1 { font-size: clamp(52px, 17vw, 86px); }
  .chapter-intro { padding: 0 22px 58px; }
  .chapter-intro h2 { font-size: clamp(46px, 14vw, 68px); }
  .project-scene { min-height: 92svh; padding: 18px; }
  .project-background { background-attachment: scroll; transform: none !important; }
  .project-plate { border-radius: 20px; padding: 28px 24px; }
  .project-meta { margin-bottom: 55px; }
  .site-footer { min-height: 62svh; padding: 96px 22px 28px; }
}

/* 减少动态：系统偏好优先于视觉叙事 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .project-background { background-attachment: scroll; transform: none !important; }
  .project-plate { opacity: 1; transform: none; }
}

/* 双列作品流：一行两个项目；轻视差保留在卡片背景，不牺牲浏览效率。 */
/* 自然高度作品流：只固定卡间距，不拉伸同排卡片；无脚本时回退普通双列网格。 */
.masonry-grid { --project-gap: 24px; --project-columns: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--project-gap); align-items: start; padding: 0 var(--page-gutter); }
.masonry-grid.is-masonry { grid-auto-rows: 1px; row-gap: 0; }
.masonry-grid > .project-card { height: auto; min-height: 0; align-self: start; }
@media (max-width:720px) { .masonry-grid { --project-gap: 16px; --project-columns: 1; } }
.project-card { --drift: 0px; position: relative; isolation: isolate; display: flex; min-height: min(62vw, 720px); overflow: hidden; border-radius: 24px; padding: clamp(18px, 3vw, 42px); align-items: flex-end; }
.project-card .project-background { inset: -20px; }
.project-card.is-active .project-background { opacity: .82; filter: blur(0) saturate(1); }
.project-card--signal .project-background { background-image: radial-gradient(circle at 17% 72%, #d3663a 0 7%, transparent 7.2%), radial-gradient(circle at 70% 25%, #e9f0ee 0 19%, transparent 19.2%), linear-gradient(125deg, #6f8292, #dfe7e2 55%, #e1a279); }
.project-card--mountain .project-background { background-image: linear-gradient(165deg, transparent 0 45%, rgba(25,35,27,.82) 45.4% 62%, transparent 62.4%), linear-gradient(122deg, #b7bbb0, #e9e7dc 48%, #85927f); }
.project-card--desk .project-background { background-image: linear-gradient(145deg, rgba(240,223,190,.94) 0 30%, transparent 30.5%), linear-gradient(90deg, #39495a 0 27%, #b37d54 27.5% 62%, #7b9395 62.5%); }
.project-card--orbit .project-background { background-image: radial-gradient(ellipse at 68% 42%, transparent 0 13%, #9ba8b3 13.5% 14.2%, transparent 14.8% 23%, #bec8cf 23.4% 24.1%, transparent 24.5%), linear-gradient(130deg, #eef2f4, #becad1 52%, #d7d8d3); }
.project-card--system .project-background { background-image: linear-gradient(90deg, transparent 0 18%, rgba(82,95,106,.67) 18.5% 19.5%, transparent 20% 47%, rgba(82,95,106,.67) 47.5% 48.5%, transparent 49%), linear-gradient(140deg, #dce5ee, #f1ede6); }
.project-card .project-plate { width: 100%; padding: clamp(24px, 3vw, 42px); }
.project-card.is-active .project-plate { opacity: 1; transform: translateY(0); }
.project-card .project-meta { margin-bottom: clamp(32px, 6vw, 76px); }
.project-card .project-plate h3 { font-size: clamp(38px, 4.8vw, 68px); }
/* 脱敏案例页：复用首页章节的留白、字阶与正文阅读宽度；固定表头在所有产品入口中保持连续。 */
.case-page { min-height:100svh; width:100%; margin:0; padding:148px var(--page-gutter) 132px; }
/* 案例返回：固定右下的无色薄液态玻璃按钮，与正文右侧 gutter 对齐且不引入项目色。 */
.case-back { --case-return-glass-filter:none; position:fixed; z-index:20; right:max(var(--page-gutter), env(safe-area-inset-right)); bottom:max(24px, env(safe-area-inset-bottom)); min-width:94px; height:48px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 18px; overflow:hidden; isolation:isolate; border:0; border-radius:999px; background:rgba(252,252,250,.26); box-shadow:0 2px 5px rgba(28,47,76,.055), 0 -1px 3px inset rgba(20,31,46,.025), inset 0 1px 0 rgba(255,255,255,.78), inset 1px 0 0 rgba(13,24,39,.08), inset -1px 0 0 rgba(13,24,39,.08); color:var(--ink); font-size:14px; font-weight:700; letter-spacing:-.02em; text-decoration:none; backdrop-filter:var(--case-return-glass-filter) blur(.65px) contrast(1.04) brightness(1.1) saturate(1.32); -webkit-backdrop-filter:var(--case-return-glass-filter) blur(.65px) contrast(1.04) brightness(1.1) saturate(1.32); }
.case-back svg { position:relative; z-index:1; width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5; }
.case-back span { position:relative; z-index:1; }
.case-back::before { content:""; position:absolute; z-index:0; inset:0; border-radius:inherit; background:linear-gradient(to bottom, rgba(255,255,255,.48), rgba(255,255,255,0) 16%, rgba(255,255,255,0) 84%, rgba(255,255,255,.34)), linear-gradient(to right, rgba(8,18,31,.09), transparent 8%, transparent 92%, rgba(8,18,31,.09)); pointer-events:none; }
.case-back:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.case-intro { max-width:860px; }
.case-page h1 { max-width:12ch; margin-bottom:24px; font-size:clamp(44px, 6.4vw, 96px); line-height:.93; letter-spacing:-.065em; }
/* 案例标签：复用首页语义，以轻量胶囊承接系统定位。 */
.case-tags,.value-map-tags { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.case-tags li,.value-map-tags li { border:1px solid var(--line); border-radius:999px; padding:6px 10px; color:var(--mist); font-size:12px; letter-spacing:.02em; }
/* 案例正文：只保留产品定位、关键判断与代表性功能三层文字层级。 */
.case-judgments,.case-detail { max-width:1040px; }
.case-judgments { margin-top:64px; padding-top:26px; border-top:1px solid var(--line); }
.case-positioning { max-width:690px; margin:0 0 44px; color:var(--body); font-size:17px; line-height:1.65; }
.case-judgments > h2,.case-detail h2 { margin:0 0 24px; color:var(--ink); font-size:clamp(28px,3vw,40px); line-height:1.05; letter-spacing:-.045em; }
/* 产品判断与响应：桌面端为清晰的三列矩阵，移动端自然转为逐行阅读。 */
.case-value-overview { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.case-value-overview table { width:100%; border-collapse:collapse; table-layout:fixed; }
.case-value-overview th { padding:14px 18px; color:var(--mist); text-align:left; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.case-value-overview td { padding:24px 18px 28px; vertical-align:top; border-top:1px solid var(--line); color:var(--body); font-size:15px; line-height:1.65; }
.case-value-overview th + th,.case-value-overview td + td { border-left:1px solid var(--line); }
/* 代表性产品功能：唯一使用首页同款大玻璃卡片的内容区。 */
.case-design-details { --case-card-columns:2; --case-card-gap:24px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--case-card-gap); row-gap:var(--case-card-gap); align-items:start; }
.case-design-details.is-masonry { grid-auto-rows:1px; row-gap:0; }
.case-design-item { height:auto; min-height:0; align-self:start; padding:clamp(24px,3vw,42px); border:1px solid rgba(255,255,255,.9); border-radius:24px; background:var(--plate); box-shadow:0 24px 70px rgba(10,10,10,.12); backdrop-filter:blur(12px); }
.case-detail { color:var(--body); font-size:17px; line-height:1.7; }
.case-detail { margin-top:64px; padding-top:26px; border-top:1px solid var(--line); }
.case-design-item h3 { margin:0 0 10px; color:var(--ink); font-size:20px; line-height:1.15; letter-spacing:-.035em; }
.case-design-item p { margin:0; }
/* 代表性产品功能子项：使用自然无序列表，避免将具体功能误表现为标签。 */
.case-feature-list { display:grid; gap:6px; margin:20px 0 0; padding-left:18px; color:var(--body); font-size:13px; line-height:1.45; }
.case-feature-list li::marker { color:var(--mist); }
/* 脱敏注明：固定作为每个案例的页尾细节，继承首页 footer-note 的轻量表达。 */
.case-boundary-note { margin:108px 0 0; color:var(--mist); font-size:11px; line-height:1.5; }
.case-boundary-note p { margin:0; }
@media (max-width:720px) { .case-page { padding:122px 22px 80px; }.case-back { right:max(22px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom)); min-width:86px; height:44px; padding-inline:16px; font-size:13px; }.case-page h1 { font-size:clamp(42px, 12vw, 64px); }.case-judgments { margin-top:56px; }.case-value-overview { border-bottom:0; }.case-value-overview table,.case-value-overview tbody,.case-value-overview tr,.case-value-overview td { display:block; width:100%; }.case-value-overview thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }.case-value-overview tr { padding:18px 0; border-bottom:1px solid var(--line); }.case-value-overview td { padding:9px 0; border:0; font-size:15px; }.case-value-overview td::before { content:attr(data-label); display:block; margin-bottom:4px; color:var(--mist); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }.case-design-details { --case-card-columns:1; grid-template-columns:1fr; }.case-detail { font-size:16px; margin-top:56px; }.case-boundary-note { margin-top:56px; font-size:12px; } }
@media (max-width:720px) { .masonry-grid { grid-template-columns:1fr; padding-inline:18px; }.project-card { min-height:74svh; border-radius:20px; }.project-card .project-background { background-attachment:scroll; } }

/* 项目卡片：上方文字与右侧跳转入口，下方完整封面。 */
.project-card { display: block; min-height: 0; overflow: visible; background: transparent; padding: 0; }
.project-card.has-demo-circle { overflow: clip; border-radius:24px; }
/* 位移滤镜仅提供 defs，不参与页面排版或辅助技术树。 */
.liquid-circle-filter { position:fixed; width:0; height:0; overflow:hidden; pointer-events:none; }
/* 项目圆形入口：无描边的薄液态玻璃；阴影和内压缩仅贴住轮廓，不能读成厚玻璃切面。 */
.project-card .project-card-circle { --demo-accent:#C95E3E; --liquid-circle-filter:none; position:absolute; z-index:10; left:var(--demo-circle-x,50%); top:var(--demo-circle-y,50%); width:128px; height:128px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; overflow:hidden; isolation:isolate; border:0; border-radius:50%; background:var(--demo-accent); box-shadow:0 2px 5px rgba(28,47,76,.055), 0 -1px 3px inset rgba(20,31,46,.025); color:#fff; opacity:0; pointer-events:none; transform:translate(-50%,-50%); text-decoration:none; cursor:none; transition:opacity 160ms var(--ease); backdrop-filter:var(--liquid-circle-filter) blur(.65px) contrast(1.04) brightness(1.1) saturate(1.32); -webkit-backdrop-filter:var(--liquid-circle-filter) blur(.65px) contrast(1.04) brightness(1.1) saturate(1.32); }
.project-card-circle strong { position:relative; z-index:1; font-size:clamp(14px, 1.15vw, 16px); font-weight:700; white-space:nowrap; text-shadow:0 1px 12px rgba(10,10,10,.3); }
@supports (background:color-mix(in srgb, red 20%, transparent)) { .project-card .project-card-circle { background:color-mix(in srgb, var(--demo-accent) 20%, transparent); } }
/* 触控端没有连续 hover，降低圆面染色以让一次点击时的底图扭曲更容易被看见；边缘厚度不变。 */
@media (hover:none) and (pointer:coarse) { @supports (background:color-mix(in srgb, red 20%, transparent)) { .project-card .project-card-circle { background:color-mix(in srgb, var(--demo-accent) 12%, transparent); } } }
@media (prefers-reduced-motion:reduce) { .project-card .project-card-circle { transition:none; } }
/* 圆形入口：每张作品从自身封面取色，产品系统也保持彼此可辨的色彩。 */
.project-card--desk .project-card-circle { --demo-accent:#426776; }
.project-card--mountain .project-card-circle { --demo-accent:#53694A; }
.project-card--orbit .project-card-circle { --demo-accent:#7568B3; }
.project-card--system .project-card-circle { --demo-accent:#4F769B; }
.project-card--cadence .project-card-circle { --demo-accent:#B86446; }
.project-card--canvas .project-card-circle { --demo-accent:#AD5165; }
.project-card--relay .project-card-circle { --demo-accent:#3E7E83; }
.project-card.is-demo-hovered .project-card-circle, .project-card.is-demo-tapped .project-card-circle, .project-card-circle:focus-visible { opacity:1; pointer-events:auto; }
.project-card-circle:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.project-card-media { position: relative; min-height: min(32vw, 470px); overflow: hidden; border-radius: 24px; isolation: isolate; background: #edf1f4; }
/* 项目缩略图：所有媒体卡只展示项目图像，不在左右上角叠加编号或状态文字。 */
.project-thumbnail { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.project-card-media .project-background { position: absolute; z-index: -1; inset: -20px; }
.project-card-copy { padding: 22px 4px 48px; }.project-card-copy h3 { max-width: 13ch; margin: 0 0 12px; font-size: clamp(34px, 4vw, 58px); line-height: .94; letter-spacing: -.06em; }.project-card-copy .project-eyebrow { margin: 0 0 12px; }.project-card-copy .project-summary { margin:0 0 18px; }.project-card-copy .project-note { margin:0 0 24px; }
@media (max-width:720px) { .project-card { min-height:0; }.project-card-media { min-height:58vw; border-radius:20px; }.project-card-copy { padding:18px 2px 42px; } }

/* 章节分割：标题居中贯穿；说明文字占双列卡片的完整阅读宽度。 */
.chapter-intro { max-width:none; display:block; margin:0 var(--page-gutter) 72px; padding:22px 0 0; border-top:1px solid var(--ink); text-align:center; }
.chapter-intro .kicker { margin:0 0 16px; }.chapter-intro h2 { margin:0; font-size:clamp(58px, 8.3vw, 142px); letter-spacing:-.075em; }.chapter-intro > p:last-child { max-width:min(100%, 960px); margin:30px auto 0; }
@media (max-width:720px) { .chapter-intro { display:block; margin:0 var(--page-gutter) 50px; padding-top:14px; }.chapter-intro h2 { margin:12px 0 0; font-size:clamp(52px, 15vw, 82px); white-space:normal; }.chapter-intro > p:last-child { margin-top:18px; } }

/* Liquid glass 层级：外层大矩形高透明；文字信息独立置于低透明度倒角矩形。 */
.liquid-glass { position:relative; padding:12px; border:1px solid rgba(255,255,255,.9); border-radius:30px; background:linear-gradient(135deg, rgba(255,255,255,.34), rgba(225,234,241,.14)); box-shadow:0 16px 42px rgba(44,63,80,.12), inset 0 1px 0 rgba(255,255,255,.95); backdrop-filter:blur(18px) saturate(1.15); }
.liquid-glass::before { content:""; position:absolute; z-index:0; pointer-events:none; inset:10px 10px auto; height:30%; border-radius:22px 22px 45% 45%; background:linear-gradient(112deg, rgba(255,255,255,.55), rgba(255,255,255,0) 54%); mix-blend-mode:soft-light; }
/* 玻璃高光在可读内容下方：避免浅色折光遮蔽标题、说明和案例入口。 */
.liquid-glass .project-card-copy, .liquid-glass .project-card-media { position:relative; z-index:1; }
.liquid-glass .project-card-media { border:1px solid rgba(255,255,255,.72); box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
.liquid-glass .project-card-copy { margin:0 0 12px; padding:28px 26px 30px; border:1px solid rgba(255,255,255,.88); border-radius:20px; clip-path:none; background:rgba(252,252,250,.78); box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 8px 24px rgba(44,63,80,.08); backdrop-filter:blur(10px); }
/* 文字区排版：标题左、入口右，说明跨整行；保留真实 DOM 阅读顺序。 */
.project-card-copy { display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:16px; align-items:start; }
.project-card-copy > .project-eyebrow, .project-card-copy > .project-summary, .project-card-copy > .project-note { grid-column:1 / -1; }
.project-card-copy > h3 { grid-column:1; grid-row:2; overflow-wrap:anywhere; }
.project-card-copy > .project-action { grid-column:2; grid-row:2; align-self:center; justify-self:end; min-width:0; max-width:150px; text-align:center; }
@media (max-width:720px) {
  .project-card-copy { column-gap:12px; }
  .project-card-copy > .project-action { max-width:108px; padding-inline:10px; font-size:12px; }
}
/* 统一交互反馈：悬停仅恢复透明度，无位移或缩放；有效入口按下缩至 95%。 */
.liquid-glass { opacity: 1; transition: all 300ms var(--ease); }
a[href] { opacity: .92; transition: all 300ms var(--ease); }
.liquid-glass:hover, .liquid-glass:focus-within, a[href]:hover, a[href]:focus-visible { opacity: 1; }
a[href]:active, .project-card:has(a[href]):active { transform: scale(.95); }
/* 圆形案例入口按下时保留其定位平移；卡片仍沿用全局按压缩放动效。 */
.project-card.has-demo-circle .project-card-circle:active { transform:translate(-50%,-50%) !important; }
/* 触屏不依赖悬停；减少动态时取消按压缩放，保留状态反馈。 */
@media (hover: none) { .liquid-glass, a[href] { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .liquid-glass, a[href] { transition: none !important; }
  a[href]:active, .project-card:has(a[href]):active { transform: none; }
}
/* 滚动入场：卡片、文字与按钮由下方 16px 上移淡入；独立 translate 不干扰按压缩放。 */
/* 入场与操作分速：淡入/上浮 600ms，按压 transform 仍为 300ms。 */
.reveal-pending { translate: 0 0; transition: all 300ms var(--ease), opacity 600ms cubic-bezier(.22, .61, .36, 1), translate 600ms cubic-bezier(.22, .61, .36, 1); }
.reveal-pending:not(.is-revealed):not(:focus-within) { opacity: 0; translate: 0 16px; }
/* 内部文案更轻快；独立于面板节奏，图片不等待文字完成。 */
.project-card-copy > .reveal-pending { transition: all 300ms var(--ease), opacity 320ms cubic-bezier(.22, .61, .36, 1), translate 320ms cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: reduce) {
  .reveal-pending, .reveal-pending:not(.is-revealed) { opacity:1; translate:none; transition:none !important; }
}
@media (max-width:720px) {
  /* 移动端保留首入场动效；重入由脚本保持已揭示状态，避免快速上划重复重置出现闪白。 */
  .liquid-glass { padding:8px; border-radius:24px; }
  .liquid-glass .project-card-copy { margin:0 0 8px; padding:24px 20px 26px; }
}

/* 双语导航与首屏：复用既有色彩和控件语言，移动端导航独立成行。 */
.header-controls { display:flex; align-items:center; gap:24px; }
.language-switch { display:flex; align-items:center; gap:2px; color:var(--body); font-size:12px; }
.language-switch button { min-width:36px; min-height:44px; padding:0 6px; border:0; background:transparent; color:var(--body); cursor:pointer; font:inherit; opacity:.6; transition:all 300ms var(--ease); }
.language-switch button[aria-pressed="true"], .language-switch button:hover, .language-switch button:focus-visible { opacity:1; color:var(--ink); }
.language-switch button[aria-pressed="true"] { text-decoration:underline; text-underline-offset:6px; }
.language-switch button:active { transform:scale(.95); }
.hero h1 { font-size:clamp(42px, 7.3vw, 108px); line-height:1.12; letter-spacing:-.045em; }
.hero h1 .hero-title-main { color:var(--ink); font-weight:700; }
.hero-copy > p:last-child { max-width:820px; }
.hero-actions { position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:40px; }
.hero-actions .text-link { display:inline-flex; align-items:center; font-size:14px; }
.chapter-intro h2 { font-size:clamp(38px, 6vw, 88px); line-height:1.08; overflow-wrap:anywhere; }
.chapter-intro .chapter-tagline { margin:26px auto 0; font-size:clamp(20px, 2.3vw, 30px); color:var(--ink); line-height:1.5; }
.chapter-intro > p:last-child { margin-top:20px; }
/* 长标题在移动端均衡换行，避免单字挤到最后一行。 */
.project-card-copy h3 { text-wrap:balance; }
@media (max-width:720px) { html[lang="zh-CN"] #vibe-scenes .project-card-copy h3 { font-size:clamp(26px, 7vw, 32px); line-height:1.12; } }
/* 项目标签：纯信息标记，自动换行，不暗示可点击或筛选。 */
.project-card-copy > .project-tags { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.project-tags li { max-width:100%; padding:5px 10px; border:1px solid var(--line); border-radius:999px; color:var(--body); background:rgba(255,255,255,.35); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.about-section { margin:132px var(--page-gutter) 0; padding:48px 0 0; border-top:1px solid var(--line); scroll-margin-top:110px; }
.about-section h2 { font-size:clamp(38px, 5vw, 64px); letter-spacing:-.045em; }
.about-section p { color:var(--body); line-height:1.7; }
.work-chapter, #contact { scroll-margin-top:100px; }
@media (max-width:720px) {
  .site-header { display:grid; grid-template-columns:1fr auto; gap:0 12px; padding-block:8px; }
  .header-controls { display:contents; }
  .language-switch { grid-column:2; grid-row:1; }
  .site-header nav { grid-column:1 / -1; grid-row:2; justify-content:space-between; }
  .site-header nav a { font-size:11px; }
  .hero { padding-top:160px; }
  .hero h1 { font-size:clamp(38px, 10.4vw, 68px); line-height:1.15; }
  .chapter-intro h2 { font-size:clamp(34px, 10vw, 60px); }
  .hero-actions { gap:20px; }
  .site-footer .footer-email { font-size:clamp(14px, 4vw, 17px); overflow-wrap:anywhere; }
}
/* 英文长项目名保持完整词，不因右侧按钮而断成单个尾字母。 */
html[lang="en"] .project-card-copy h3 { font-size:clamp(28px, 3.3vw, 48px); overflow-wrap:normal; hyphens:auto; }
@media (max-width:720px) { html[lang="en"] .project-card-copy h3 { font-size:clamp(18px, 5.5vw, 24px); line-height:1.08; } }
@media (prefers-reduced-motion:reduce) { .language-switch button { transition:none; }.language-switch button:active { transform:none; } }