/* =========================================================
   ZEDD · 陈智德 — 工业设计师 / Portfolio
   设计语言：纯白 + 墨黑 · 编辑杂志式 · 大留白
   作品区：整屏卡片堆叠，左大图 + 右文字，即停即选
   ========================================================= */

:root {
  --bg: #ffffff;
  --ink: #0a0a0a;
  --ink-2: #595959;
  --ink-3: #a3a3a3;
  --line: #ececec;
  --line-2: #f3f3f3;
  --paper: #f7f7f7;
  --pad-x: clamp(20px, 4vw, 64px);
  --max: 1440px;
  /* 文本画板统一宽度：洞察屏标题/副标/结论、正文屏、草图屏结论块
     都按这个值对齐左右边界，避免各屏画板宽窄不一 */
  --board: 1100px;

  --font-zh: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB',
            'Microsoft YaHei', 'Source Han Sans CN',
            system-ui, -apple-system, sans-serif;


  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-zh);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; }
em { font-style: normal; font-weight: inherit; }
strong { font-weight: inherit; color: inherit; }
/* 超大展示标题：特细字重，杂志式轻盈感 */
.hero-name,
.sec-title,
.panel-title,
.pp-mag-mark {
  font-weight: 200;
}
/* 小号控件/标签字：细体易读性差，保持常规字重 */
.nav-links,
.nav-mail,
.topbar,
.mono,
.sec-eyebrow,
.hero-eyebrow,
.portrait-meta,
.tools-label,
.slider-btn,
.slider-count,
.panel-meta,
.exp-role,
.exp-date,
.cap-n,
.cap-mono,
.pp-top,
.pp-jump-top,
.pp-backbar button {
  font-weight: 400;
}

.mono {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ===== 顶部窄条 ===== */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px var(--pad-x);
  background: var(--ink);
  color: var(--bg);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.topbar a:hover { text-decoration: underline; }

/* ===== 导航 ===== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px var(--pad-x);
  /* 粘性导航 + 毛玻璃：首页内容从它下面滚过时，浏览器每一帧都要重算一次背景模糊，
     这是桌面滚动不跟手的常见大头。底色本来就接近不透明，改成近乎实心白，
     滚动开销直接归零，观感几乎无差别（触摸端早已这么处理） */
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--line);
}
.logo {
  font-size: 18px;
  letter-spacing: 0.06em;
}
.logo sup { font-size: 0.55em; color: var(--ink-3); margin-left: 2px; }
.nav-links { display: flex; gap: 36px; font-size: 13px; }
.nav-links a { position: relative; transition: opacity 0.3s; }
.nav-links a:hover { opacity: 0.55; }
.nav-links span {
  font-size: 9.5px;
  color: var(--ink-3);
  margin-left: 4px;
}
.nav-mail {
  justify-self: end;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--ink);
  transition: all 0.3s var(--ease);
}
.nav-mail:hover { background: var(--ink); color: var(--bg); }

/* ===== Section 通用 ===== */
.sec {
  padding: clamp(80px, 12vh, 160px) var(--pad-x);
  max-width: var(--max);
  margin: 0 auto;
}

.sec-head {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  margin-bottom: clamp(48px, 8vh, 100px);
  align-items: end;
}
.sec-eyebrow {
  display: block;
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.sec-eyebrow em {
  font-family: var(--font-zh);
  font-style: normal;
  color: var(--ink-3);
  margin-left: 10px;
  letter-spacing: 0.05em;
}
.sec-title {
  font-size: clamp(56px, 8vw, 112px);
  line-height: 1;
  letter-spacing: -0.01em;
}
.sec-desc {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.8;
  max-width: 380px;
}

/* ===== 01 HERO —— 左文 + 右照片 ===== */
.hero { padding-top: clamp(40px, 6vh, 100px); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(48px, 6vw, 110px);
  align-items: stretch;
}

/* 左栏 — 文字 */
.hero-info { display: flex; flex-direction: column; }
.hero-eyebrow {
  display: block;
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero-name {
  font-size: clamp(72px, 11vw, 152px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin-top: 16px;
  margin-bottom: 0;
}
.hero-name em {
  font-size: 0.32em;
  display: block;
  margin-top: 16px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.hero-bio {
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink-2);
  max-width: 520px;
  margin-top: 14px;
  margin-bottom: 0;
}

.hero-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
  margin-top: 14px;
  margin-bottom: 0;
}
.hero-contacts li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink);
}
.hero-contacts .ic {
  width: 16px;
  height: 16px;
  color: var(--ink-2);
  flex-shrink: 0;
}
.hero-contacts a:hover { text-decoration: underline; text-underline-offset: 3px; }

.hero-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.tools-label {
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#heroTools { display: flex; gap: 6px; flex-wrap: wrap; }
#heroTools span {
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink-2);
}

/* 右栏 — 大照片 */
.hero-portrait {
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
.portrait-frame {
  aspect-ratio: 4 / 5;
  background: none;
  overflow: hidden;
  position: relative;
}
.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  transition: transform 1.2s var(--ease);
}
.portrait-frame:hover img { transform: scale(1.03); }

.portrait-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 10px;
  color: var(--ink-3);
  white-space: pre;
  line-height: 1.9;
  letter-spacing: 0.1em;
  background: #ffffff;
}
.portrait-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.portrait-meta span:last-child {
  font-family: var(--font-zh);
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 11px;
}

/* ===== 02 WORKS —— 滑块：缩略导航 + 左文字右大图 + 底部滑轨 ===== */
.slider {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  user-select: none;
  -webkit-user-select: none;
}

/* ① 顶部缩略图导航 */
.slider-thumbs {
  display: grid;
  grid-template-columns: repeat(var(--cols, 10), minmax(0, 1fr));
  gap: 8px;
  padding: 20px 0 24px;
  border-bottom: 1px solid var(--line);
}
.slider-thumb {
  position: relative;
  cursor: pointer;
  background: none;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  opacity: 0.45;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.slider-thumb svg,
.slider-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.slider-thumb .th-num {
  position: absolute;
  top: 5px;
  left: 7px;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
  padding: 1px 5px;
  border-radius: 2px;
}
.slider-thumb:hover { opacity: 0.8; }
.slider-thumb.active {
  opacity: 1;
  box-shadow: 0 0 0 1px var(--ink);
  transform: translateY(-2px);
}

/* ② 主舞台：track 平移切换 */
.slider-stage {
  overflow: hidden;
}
.slider-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.work-panel {
  flex: 0 0 100%;
  min-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: center;
  padding: clamp(56px, 9vh, 110px) 0;
  min-height: min(68vh, 640px);
}

/* 左：文字 */
.panel-text { padding-left: clamp(4px, 1vw, 24px); }
.panel-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.panel-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }
.panel-title {
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 26px;
}
.panel-title em {
  font-size: 0.38em;
  display: block;
  margin-top: 12px;
  color: var(--ink-2);
  letter-spacing: 0.03em;
}
.panel-blurb {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink-2);
  max-width: 460px;
  margin-bottom: 26px;
}
.panel-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.panel-tags li {
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink-2);
  text-transform: uppercase;
}
.panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  transition: gap 0.3s var(--ease), opacity 0.3s;
}
.panel-cta:hover { gap: 14px; }

/* 右：大图（适中，不铺满） */
.panel-media {
  position: relative;
  justify-self: stretch;
  align-self: center;
}
.panel-media .media-box {
  aspect-ratio: auto; /* 跟随原图比例，不裁切 */
  background: none;
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
}
.panel-media .media-box::after {
  content: '↗';
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 15px;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.3s;
}
.panel-media:hover .media-box::after { opacity: 1; }
.panel-media .media-box svg,
.panel-media .media-box img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transition: transform 0.7s var(--ease);
}
.panel-media .media-box:hover svg,
.panel-media .media-box:hover img { transform: scale(1.03); }
.media-caption {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* 面板内元素入场（仅 active 面板） */
.panel-text > * { opacity: 0; transform: translateY(16px); }
.work-panel.active .panel-text > * { opacity: 1; transform: none; }
.work-panel .panel-text > * { transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.work-panel .panel-meta  { transition-delay: 0.03s; }
.work-panel .panel-title { transition-delay: 0.09s; }
.work-panel .panel-blurb { transition-delay: 0.15s; }
.work-panel .panel-tags  { transition-delay: 0.2s; }
.work-panel .panel-cta   { transition-delay: 0.26s; }
.panel-media { opacity: 0; transform: translateY(18px); }
.work-panel.active .panel-media { opacity: 1; transform: none; }
.panel-media { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: 0.06s; }

/* ③ 底部控制：滑轨 */
.slider-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 0 26px;
  border-top: 1px solid var(--line);
}
.slider-btn {
  font-size: 19px;
  line-height: 1;
  color: var(--ink);
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s;
  flex-shrink: 0;
}
.slider-btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.slider-btn:disabled { opacity: 0.25; cursor: default; }
.slider-btn:disabled:hover { background: transparent; color: var(--ink); border-color: var(--line); }

.slider-range {
  position: relative;
  flex: 1;
  height: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  min-width: 120px;
}
.slider-range-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--line-2);
}
.slider-range-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  background: var(--ink);
  width: calc(100% / 9);
  transition: width 0.35s var(--ease);
}
.slider-range-dot {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  background: var(--ink);
  border: 3px solid var(--bg);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--ink);
  left: calc(100% / 9 / 2);
  transform: translate(-50%, -50%);
  transition: left 0.35s var(--ease);
}
.slider-range:hover .slider-range-bar { height: 3px; }
.slider-range:hover .slider-range-fill { height: 3px; }

.slider-count {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  flex-shrink: 0;
}
.slider-name {
  font-size: 13px;
  color: var(--ink-2);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
}
.slider-name em { font-style: normal; font-weight: inherit; }

/* ===== 03 EXPERIENCE ===== */
.exp-list { display: flex; flex-direction: column; }
.exp-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  padding: 40px 0;
  border-top: 1px solid var(--line);
}
.exp-row:last-child { border-bottom: 1px solid var(--line); }
.exp-date {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  padding-top: 6px;
}
.exp-company {
  font-size: 24px;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.exp-role {
  font-size: 10.5px;
  color: var(--ink-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.exp-desc {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.8;
  max-width: 640px;
}
.exp-desc strong { font-weight: inherit; color: inherit; }

/* ===== 04 CAPABILITIES ===== */
.cap-list { display: flex; flex-direction: column; }
.cap-row {
  display: grid;
  grid-template-columns: 60px 1fr 1.4fr;
  gap: 40px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.cap-row:last-child { border-bottom: 1px solid var(--line); }
.cap-n {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  padding-top: 4px;
}
.cap-t h3 {
  font-size: 19px;
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.cap-mono {
  font-size: 10px;
  color: var(--ink-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cap-desc {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.8;
}

/* ===== FOOTER ===== */
.foot {
  padding: 80px var(--pad-x) 40px;
  max-width: var(--max);
  margin: 0 auto;
}
.foot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.foot-eyebrow {
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.foot-mail {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.foot-mail:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: clamp(40px, 7vh, 90px) auto clamp(20px, 4vh, 36px);
  color: var(--ink);
}
.foot-mark-svg {
  width: 100%;
  max-width: 1100px;
  height: auto;
  display: block;
}
.foot-mark-tick {
  width: 100%;
  max-width: 1100px;
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.foot-icp {
  margin: clamp(28px, 5vh, 56px) auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  max-width: 1100px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.foot-icp a {
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-bottom-color 0.3s var(--ease);
}
.foot-icp a:hover { color: var(--ink-2); border-bottom-color: var(--line-2); }

/* ===== PROJECT PAGE —— 整页项目详情 ===== */
html.lock, body.lock { overflow: hidden; }

.pp {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.pp[hidden] { display: none; }

/* ① 顶栏 —— 极简：品牌 + 进度 + 关闭 */
.pp-top {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 13px var(--pad-x);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.pp-top-logo {
  justify-self: start;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pp-top-left {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 18px);
  min-width: 0;
}
.pp-top-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 4px 2px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--ink-3);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.pp-top-back i { font-style: normal; font-size: 13px; line-height: 1; transition: transform 0.3s var(--ease); }
.pp-top-back:hover { color: var(--ink); }
.pp-top-back:hover i { transform: translateX(-2px); }
.pp-top-back:active { opacity: 0.6; }
.pp-top-code {
  justify-self: center;
  font-size: 10.5px;
  color: var(--ink);
  letter-spacing: 0.14em;
}
.pp-close-x {
  justify-self: end;
  width: 32px;
  height: 32px;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: opacity 0.3s;
}
.pp-close-x:hover { opacity: 0.45; }
/* 打开详情时 JS 会程序化聚焦关闭按钮（键盘 / 读屏可达），
   这类聚焦不该画出浏览器默认的蓝色外框；键盘 Tab 到达时仍保留深色焦点环 */
.pp-close-x:focus,
.pp-top-back:focus { outline: none; }
.pp-close-x:focus-visible,
.pp-top-back:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ② 滚动区 —— JS 驱动的整屏 transform 平移（不用原生 scroll-snap，过渡曲线更柔） */
.pp-scroll {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  min-height: 0;
  height: 100%;
}
.pp-pager {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.85s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.pp-art { min-height: 100%; }

/* 杂志式题头 —— 左品牌大标 + 右元信息表 + 简介 */
.pp-mag-head {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(28px, 5vh, 60px) var(--pad-x) clamp(20px, 3.4vh, 36px);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 5.4vw, 76px);
  align-items: start;
}
.pp-mag-mark {
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pp-mag-mark-en { display: block; }
.pp-mag-mark-zh {
  display: block;
  margin-top: 10px;
  font-size: 0.44em;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.pp-mag-mark-sub {
  display: block;
  margin-top: 22px;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pp-mag-meta {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 6px;
}
.pp-mag-meta-table {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.pp-mag-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.pp-mag-meta-row .k {
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.pp-mag-meta-row .v {
  font-size: 13px;
  text-align: right;
  color: var(--ink);
}
.pp-mag-blurb {
  font-size: 17px;
  line-height: 1.95;
  color: var(--ink-2);
  max-width: 540px;
}

/* 主视觉 —— 全宽满铺出血，图片原比例直接呈现，无容器底色 */
.pp-cover {
  margin: 0 calc(-1 * var(--pad-x)) 0;
  position: relative;
}
.pp-cover-media {
  line-height: 0;
  background: none;
}
.pp-cover-media svg,
.pp-cover-media img {
  width: 100%;
  height: auto;
  display: block;
}
.pp-cover-cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px var(--pad-x) clamp(40px, 6vh, 70px);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pp-cover-cap span:last-child {
  font-family: var(--font-zh);
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 11px;
}

/* 详情页主视觉滑块 —— 参照首页 02 作品目录：
   顶部缩略图导航 / 大图主舞台 / 底部箭头 + 可点击拖拽滑轨 + 计数 */
.pp-cover-slider {
  user-select: none;
  -webkit-user-select: none;
}

/* ① 顶部缩略图导航（同 slider-thumbs 视觉；列数 = 图片数，由 --cols 控制） */
.cv-thumbs {
  display: grid;
  grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr));
  list-style: none;
  margin: 0 0 clamp(16px, 2.6vh, 26px);
  gap: 8px;
  padding: clamp(18px, 3vh, 30px) var(--pad-x) clamp(16px, 2.6vh, 26px);
  border-bottom: 1px solid var(--line);
}
.cv-thumb {
  position: relative;
  cursor: pointer;
  background: none;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.cv-thumb svg,
.cv-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.cv-thumb .cv-n {
  position: absolute;
  top: 5px;
  left: 7px;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
  padding: 1px 5px;
  z-index: 1;
}
.cv-thumb:hover { opacity: 0.8; }
.cv-thumb.active {
  opacity: 1;
  box-shadow: 0 0 0 1px var(--ink);
  transform: translateY(-2px);
}

/* ② 大图主舞台（track 平移，同 slider-stage / slider-track） */
.cv-stage {
  position: relative;
  overflow: hidden;
  margin: 0;
}
.cv-track {
  display: flex;
  align-items: flex-start;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.cv-slide {
  flex: 0 0 100%;
  min-width: 0;
  line-height: 0;
}
.cv-media {
  position: relative;
  line-height: 0;
  cursor: zoom-in;
}
.cv-media img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none; /* 点击统一交给 .cv-media，避免拖拽图片 */
}
.cv-hint {
  position: absolute;
  right: max(14px, 2vw);
  bottom: 14px;
  z-index: 3;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(10, 10, 10, 0.75);
  background: rgba(250, 250, 250, 0.82);
  padding: 5px 11px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.cv-stage:hover .cv-hint { opacity: 1; }

/* ③ 底部控制：箭头 + 滑轨 + 计数（同 slider-foot / slider-range） */
.cv-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: clamp(14px, 2vw, 20px) var(--pad-x) clamp(30px, 5vh, 54px);
  border-top: 1px solid var(--line);
}
.cv-btn {
  font-size: 17px;
  line-height: 1;
  color: var(--ink);
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.cv-btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cv-btn:disabled { opacity: 0.25; cursor: default; }
.cv-btn:disabled:hover {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.cv-range {
  position: relative;
  flex: 1;
  height: 22px;
  min-width: 120px;
  cursor: pointer;
  display: flex;
  align-items: center;
  touch-action: none;
}
.cv-range-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--line-2);
}
.cv-range-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  background: var(--ink);
  transition: width 0.35s var(--ease);
}
.cv-range-dot {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  background: var(--ink);
  border: 3px solid var(--bg);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: left 0.35s var(--ease);
}
.cv-range:hover .cv-range-bar,
.cv-range:hover .cv-range-fill { height: 3px; }
.cv-count {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  flex-shrink: 0;
  min-width: 76px;
}
.cv-name {
  font-size: 13px;
  color: var(--ink-2);
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
}

@media (max-width: 560px) {
  .cv-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 5px; padding-bottom: 14px; }
  .cv-name { display: none; }
  .cv-foot { gap: 12px; }
  .cv-count { min-width: 0; }
}

/* 杂志节 —— 三栏：标签 / 描述 / 描述 */
.pp-mag-sec {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(28px, 4.6vh, 56px) var(--pad-x);
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: clamp(26px, 4.4vw, 60px);
  align-items: start;
}
.pp-mag-sec-label {
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-top: 6px;
}
.pp-mag-sec-col {
  font-size: 14.5px;
  line-height: 2;
  color: var(--ink-2);
}
.pp-mag-sec-col p {
  margin-bottom: 22px;
}
.pp-mag-sec-col p:last-child { margin-bottom: 0; }

/* 左图 + 右文（裸图，无容器底色 / 边框） */
.pp-mag-sec-split {
  grid-template-columns: 200px minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}
.pp-sec-figure {
  margin: 0;
  line-height: 0;
  background: none;
  border: none;
}
.pp-sec-figure svg,
.pp-sec-figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* 项目图集（Gallery）—— 细节图单独成行 / 配色图成组陈列，全部裸图 */
.pp-mag-gallery { grid-template-columns: 200px minmax(0, 1fr); }
.pp-gallery {
  display: flex;
  flex-direction: column;
  gap: clamp(52px, 8vh, 96px);
}
.g-fig { margin: 0; }
/* 细节图：单张独立占满内容宽度 */
.g-detail { width: 100%; }
.g-detail .g-media { width: 100%; }
.g-detail .g-media img {
  width: 100%;
  height: auto;
  display: block;
}
/* 配色图：三张一组并排陈列 */
.g-pal { width: 100%; margin: 0; }
.pal-set {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  align-items: start;
}
.pal-set .g-media img {
  width: 100%;
  height: auto;
  display: block;
}
/* 图注（底部小字，无背景色） */
.g-cap {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  font-size: 10px;
  color: var(--ink-3);
}
.g-detail .g-cap { padding-right: 0; }
.g-pal-cap {
  margin-top: 14px;
  border-top: none;
}
.g-pal-cap span:first-child::after {
  content: ' · ';
  color: var(--ink-3);
}
.g-pal-cap span:last-child { text-transform: none; }

/* 灵感来源（Inspiration）—— 中段情绪板，居中聚焦，裸图无底色 */
.pp-mag-inspire {
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: start;
}
.pp-inspire {
  margin: 0;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
.insp-media {
  line-height: 0;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.insp-media img {
  width: auto;
  max-width: 100%;
  max-height: 84vh;
  display: block;
  object-fit: contain;
}
.insp-cap {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 10px;
  color: var(--ink-3);
}

/* 项目档案 */
.pp-mag-spec { border-top: 1px solid var(--line); }
.pp-mag-spec-list {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
}
.pp-mag-spec-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.pp-mag-spec-list .k {
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.pp-mag-spec-list .v {
  font-size: 13px;
  text-align: right;
  color: var(--ink);
}

/* 上一 / 下一项目 —— 双栏跳转卡 */
.pp-jumps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
.pp-jump {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(26px, 4.2vh, 44px) var(--pad-x);
  text-align: left;
  border-right: 1px solid var(--line);
  overflow: hidden;
  transition: background 0.35s var(--ease);
}
.pp-jump + .pp-jump { border-right: none; }
.pp-jump-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pp-jump-top.right { flex-direction: row-reverse; }
.pp-jump-code { white-space: nowrap; }
.pp-jump-act { transition: opacity 0.3s; }
.pp-jump-name {
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 70%;
}
.pp-jump-name.right { margin-left: auto; text-align: right; }
.pp-jump * { transition: color 0.35s var(--ease); }
.pp-jump:not(.disabled):hover { background: var(--ink); }
.pp-jump:not(.disabled):hover .pp-jump-name,
.pp-jump:not(.disabled):hover .pp-jump-code { color: var(--bg); }
.pp-jump:not(.disabled):hover .pp-jump-act { color: rgba(255, 255, 255, 0.55); }
.pp-jump:not(.disabled):hover::after {
  content: '↗';
  position: absolute;
  right: clamp(20px, 3vw, 48px);
  bottom: 28px;
  font-size: 15px;
  color: var(--bg);
}
.pp-jump.disabled { opacity: 0.28; pointer-events: none; }

/* 返回作品区 */
.pp-backbar {
  display: flex;
  justify-content: center;
  padding: clamp(28px, 4vh, 44px) var(--pad-x) clamp(48px, 8vh, 90px);
  border-top: 1px solid var(--line);
}
.pp-backbar button {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 4px;
  border-bottom: 1px solid var(--ink);
  transition: opacity 0.3s;
}
.pp-backbar button:hover { opacity: 0.5; }

/* ===== 大图查看器 Lightbox ===== */
.lb {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(5, 5, 5, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb[hidden] { display: none; }
.lb-stage {
  position: relative;
  width: min(92vw, 1600px);
  height: 86vh;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none; /* 手指横向滑动切图，不被浏览器滚动吞掉 */
}
.lb-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  will-change: transform;
  touch-action: none;
}
.lb-arr {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  transform: translateY(-50%);
  transition: background 0.3s;
  cursor: pointer;
}
.lb-arr:hover { background: rgba(255, 255, 255, 0.18); }
.lb-prev { left: max(12px, 2.5vw); }
.lb-next { right: max(12px, 2.5vw); }
.lb-arr:disabled { opacity: 0.12; cursor: default; background: transparent; }
.lb-x {
  position: absolute;
  top: 14px;
  right: max(14px, 2vw);
  z-index: 6;
  width: 44px;
  height: 44px;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  display: grid;
  place-items: center;
  transition: opacity 0.3s;
}
.lb-x:hover { opacity: 0.5; }
.lb-hint {
  position: absolute;
  top: 22px;
  left: max(14px, 2vw);
  z-index: 5;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
}
.lb-meta {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}

/* ===== Reveal 入场 ===== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

/* ===== 响应式 ===== */
@media (max-width: 980px) {
  .nav { grid-template-columns: 1fr auto; gap: 16px; }
  .nav-links { display: none; }
  .hero-grid,
  .sec-head {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .work-panel {
    grid-template-columns: 1fr;
    gap: 40px;
    min-height: auto;
    padding: clamp(44px, 6vh, 70px) 0;
  }
  .panel-media { order: -1; justify-self: center; width: 100%; max-width: 620px; }
  .panel-text { padding-left: 0; }
  .slider-thumbs { grid-template-columns: repeat(3, 1fr); }
  .slider-name { display: none; }
  .exp-row { grid-template-columns: 1fr; gap: 16px; }
  .cap-row { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
  .cap-n { padding-top: 0; }
  .pp-mag-head,
  .pp-mag-sec,
  .pp-mag-sec-split,
  .pp-mag-gallery,
  .pp-mag-inspire {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .pp-mag-meta { padding-top: 0; }
  .pp-mag-spec-list { grid-template-columns: 1fr; gap: 0; }
  .pp-jumps { grid-template-columns: 1fr; }
  .pp-jump { border-right: none; border-bottom: 1px solid var(--line); }
  .pp-jump:last-child { border-bottom: none; }
  .pp-top { grid-template-columns: 1fr auto; }
  .pp-top-code { display: none; }
  .pp-cover { margin-left: 0; margin-right: 0; }
  .topbar { font-size: 9.5px; padding: 8px var(--pad-x); }
  .topbar span { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 560px) {
  .hero-name { font-size: 56px; }
  .sec-title { font-size: 52px; }
  .panel-title { font-size: 28px; }
  .panel-title em { font-size: 0.4em; }
  .slider-foot { gap: 12px; }
  .slider-count { font-size: 10px; }
  .lb-hint { display: none; }
  .lb-stage { width: 100vw; height: 80vh; }
  .lb-meta { font-size: 10px; white-space: normal; width: 92%; text-align: center; }
  /* 窄屏顶栏：收起品牌字，突出返回入口 */
  .pp-top-logo { display: none; }
  .pp-top-back { padding: 8px 2px; font-size: 12px; }
  .pp-top-left { gap: 0; }
}

/* =========================================================
   详情页滚动动效（Choreography）
   —— 元素进场 + 主视觉视差 + 灵感图展开
   ========================================================= */
/* 统一进场：上移淡入 */
.pp .rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.pp .rv.in { opacity: 1; transform: none; }

/* 品牌区从左滑入 / 元信息区从右滑入 */
.pp .pp-mag-brand.rv { transform: translateX(-28px); }
.pp .pp-mag-meta.rv { transform: translateX(26px); }
.pp .pp-mag-brand.rv.in,
.pp .pp-mag-meta.rv.in { transform: none; }

/* 大图元素更慢的呼吸式进场 */
.pp .pp-sec-figure.rv,
.pp .g-detail.rv,
.pp .g-pal.rv { transition-duration: 1.25s; }
.pp .g-detail.rv { transform: translateY(34px); }

/* 主视觉 —— 视差层容器（图比滚动慢、带轻微缩放） */
.pp-cover-media { overflow: hidden; position: relative; }
.pp-cover-media img,
.pp-cover-media svg {
  transform-origin: center;
  /* 不再常驻 will-change：没有 JS 视差在跑，白白占着一张整屏合成层只拖慢滚动 */
  backface-visibility: hidden;
}

/* 灵感图 —— 布帘式展开进场（视觉焦点） */
.pp-inspire { overflow: hidden; }
.pp-inspire.rv { opacity: 1; transform: none; } /* 整体位移交由布帘展开承担 */
.pp-inspire .insp-media {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.35s cubic-bezier(0.65, 0, 0.2, 1);
}
.pp-inspire.in .insp-media { clip-path: inset(0 0 0% 0); }
.pp-inspire .insp-cap {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s var(--ease) 0.45s, transform 0.7s var(--ease) 0.45s;
}
.pp-inspire.in .insp-cap { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pp .rv,
  .pp .pp-mag-brand.rv,
  .pp .pp-mag-meta.rv,
  .pp .g-detail.rv,
  .pp .insp-cap {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .pp-inspire .insp-media { clip-path: none !important; transition: none !important; }
}

/* =========================================================
   PROJECT PAGE —— 纵向整屏 · 一屏一详情（图 + 文）
   JS 驱动 transform 平移；每屏 = 独立「详情」；档案屏收尾
   （上方已有 .pp-scroll / .pp-pager 定义）
   ========================================================= */
.pp-pg {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}
.pp-pg .pg-frame {
  width: 100%;
  min-height: 100%;
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 留白全局收紧：上下由 8vh 收到 4.4vh */
  padding: clamp(24px, 4.4vh, 52px) var(--pad-x);
}

/* —— 图文对照栅格 —— */
.pg-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5.2vw, 84px);
  align-items: center;
}
/* 图文并排：图侧更宽（约 58%），文字更窄 —— 避免「一整段字 + 半幅小图」 */
.pg-body {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  gap: clamp(28px, 4.4vw, 72px);
  align-items: center;
}
.pg-body-rev > :first-child { order: 2; }
.pg-body-rev > :last-child  { order: 1; }
/* 左右翻转屏：图换到左列，仍占宽的一列 */
.pg-body-rev { grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr); }
/* 并排屏的图跟着放大：竖向留白多，图可占更高 */
.pg-body .pg-plate img { max-height: 78vh; }
/* 竖排三段（仅 bodyStack 标记的屏）：上文 / 中图铺满 / 下补充，单栏纵向、以图为主 */
.pg-body-stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 文字与图之间 40–60px */
  gap: clamp(40px, 5.2vh, 60px);
}
/* 文字容器：靠左端、不限宽（宽屏下自然排成一行），图片保持居中 */
.pg-body-stack .pg-copy,
.pg-body-stack .pg-copy .pg-para,
.pg-body-stack > .pg-para-sub {
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: left;
  text-wrap: pretty; /* 长段落避免末行孤字，不压缩行宽 */
}
.pg-body-stack > .pg-para-sub { margin-top: 0; }
/* 竖排屏底部补充说明单独放大（仅这一行，不影响其他屏） */
.pg-body-stack > .pg-para-sub { font-size: 16px; }
/* 图：居中放大、贴近满屏，图注保持在图下方 */
.pg-body-stack .pg-fig {
  /* 与纯图屏同一画板：满内容区宽，不再另收 8% */
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}
/* 不要背景：去掉图外层任何底板／底色／描边阴影，让图直接浮在页面底色上 */
.pg-body-stack .pg-plate {
  display: flex;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.pg-body-stack .pg-plate img {
  width: 100%;
  max-height: min(72vh, 820px);
  object-fit: contain;
  background: transparent;
}
/* 连进场时的投影也去掉，图直接贴在页面底色上，不像卡片浮起 */
.pp-pg.cur .pg-body-stack .pg-plate img { box-shadow: none; }
.pg-copy { min-width: 0; }

/* 小标统一落在内容区左上角（绝对定位到 frame 左上角，不占内容流）；
   内容仍在 frame 内垂直居中 —— 内容超高时依旧上下均分，不会被整块推到底部裁掉 */
.pp-pg > .pg-frame { position: relative; }
.pp-pg > .pg-frame > .pg-kicker {
  position: absolute;
  top: clamp(8px, 1.6vh, 18px); /* 与顶栏留一点呼吸，不贴边 */
  left: var(--pad-x);
  margin-bottom: 0;
}
/* 有内容容器的屏：容器撑满剩余高度、内容由容器自己居中
   （小标已脱离内容流，不参与居中，始终停在左上角） */
.pp-pg > .pg-frame > .pg-intro,
.pp-pg > .pg-frame > .pg-body,
.pp-pg > .pg-frame > .pg-arch {
  flex: 1 1 auto;
  align-content: center; /* grid 行组整体居中 */
}
.pp-pg > .pg-frame > .pg-editorial {
  flex: 1 1 auto;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* —— 文字 —— */
.pg-kicker {
  display: block;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: clamp(16px, 3vh, 26px);
}
.pg-title {
  font-size: clamp(46px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  font-weight: 200;
}
.pg-title em {
  display: block;
  font-size: 0.42em;
  margin-top: 14px;
  letter-spacing: 0.05em;
  color: var(--ink-2);
}
.pg-title-sm {
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1.1;
  font-weight: 200;
  margin-bottom: 18px;
}
.pg-title-sm em {
  display: block;
  font-size: 0.4em;
  margin-top: 10px;
  color: var(--ink-2);
}
.pg-blurb {
  font-size: 16px;
  line-height: 1.95;
  color: var(--ink-2);
  max-width: 540px;
  margin-top: clamp(18px, 3vh, 30px);
}
.pg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(18px, 3vh, 26px);
}
.pg-tags li {
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink-2);
  text-transform: uppercase;
}
.pg-para {
  font-size: 17px;
  line-height: 2.05;
  color: var(--ink-2);
  max-width: 520px;
}
/* 正文屏补充说明：次级、带标签 */
.pg-para-sub {
  margin-top: clamp(20px, 3vh, 32px);
  padding-top: clamp(14px, 2vh, 22px);
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-3);
  max-width: 520px;
}
.pg-para-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 7px;
  color: var(--ink-3);
}
/* 正文屏同栏多段（合并说明）的段间距 */
.pg-copy .pg-para + .pg-para { margin-top: clamp(14px, 2vh, 20px); }
/* 无配图的正文屏：整屏编辑体大字 */
.pg-editorial {
  max-width: var(--board);
  margin: 0 auto;
  width: 100%;
}
.pg-para-big {
  font-size: clamp(24px, 3.4vw, 44px);
  line-height: 1.6;
  font-weight: 200;
  letter-spacing: 0.005em;
  color: var(--ink);
  max-width: 980px;
}
/* 合并正文屏的补充段：比主段小一号，拉开层次 */
.pg-para-big.pg-para-big-sub {
  margin-top: clamp(18px, 3vh, 34px);
  font-size: clamp(19px, 2.3vw, 29px);
  line-height: 1.75;
  color: var(--ink-2);
}
.pg-para-big.pg-para-big-sub em { font-style: normal; color: var(--ink); }

/* —— 图版 —— */
.pg-fig { margin: 0; min-width: 0; }
.pg-fig-wide {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}
.pg-plate {
  position: relative;
  aspect-ratio: auto; /* 跟随原图比例，不裁切 */
  background: none;
  overflow: visible; /* 让图跳出悬浮于界面，不被相框裁死 */
  cursor: zoom-in;
}
.pg-plate img {
  width: 100%;
  height: auto;
  max-height: 66vh; /* 完整显示，超出屏幕就整体缩小，不裁边 */
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.pg-plate .pg-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: rgba(10, 10, 10, 0.8);
  background: rgba(255, 255, 255, 0.85);
  padding: 4px 9px;
  border-radius: 100px;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.pg-plate:hover .pg-zoom { opacity: 1; transform: none; }
.pg-stand {
  line-height: 0;
  background: none;
  overflow: visible;
}
.pg-stand svg {
  width: 100%;
  height: auto;
  display: block;
}
.pg-cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 10px;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pg-cap span:last-child {
  font-family: var(--font-zh);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 11px;
}
/* 纯图屏：图居中、更大 */
.pg-figslide { gap: clamp(14px, 2vh, 22px); }
.pg-fig-note { margin-top: 14px; font-size: 12px; letter-spacing: 0.06em; color: var(--ink-3); }
/* 动态演示屏：视频静音自动循环，完整不裁边 */
.pg-clipslide { gap: clamp(14px, 2vh, 22px); }
.pg-clip { margin: 0; width: 100%; max-width: var(--max); }
.pg-clip-video {
  width: 100%;
  height: auto;
  max-height: 82vh;
  display: block;
  object-fit: contain;
  background: none;
}
/* 前置图（草图）屏的结论块：图上推敲过哪些路 → 为什么选现在这条 */
.pf-concl { margin-top: clamp(12px, 1.6vw, 20px); max-width: var(--board); }
.pf-concl-h { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.1em; color: var(--ink-3); text-transform: uppercase; }
.pf-concl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pf-concl-list li {
  display: grid; grid-template-columns: 116px 1fr; gap: 14px; align-items: baseline;
  padding: 10px 14px; border-left: 2px solid var(--line); background: rgba(17, 17, 17, 0.02);
}
.pf-concl-list li b { font-size: 13px; letter-spacing: 0.04em; }
.pf-concl-list li span { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.pf-concl-list li.pick { border-left-color: var(--ink); background: rgba(17, 17, 17, 0.05); }
.pf-concl-list li.pick b { color: var(--ink); }
.pf-concl-list li.pick b::after { content: ' ✓ 选定'; font-size: 11px; letter-spacing: 0.06em; color: var(--ink-3); }
.pf-concl-v { margin: 12px 0 0; font-size: 13.5px; line-height: 1.8; color: var(--ink-2); }
.pf-concl-v b { color: var(--ink); }
@media (max-width: 620px) {
  .pf-concl-list li { grid-template-columns: 1fr; gap: 4px; }
}
/* 渲染画版：三张等大并排，图在各自等高框内 contain 完整显示，不裁切 */
.pg-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3.6vw, 52px); align-items: start; }
/* 渲染画版屏（rb-wide）：仅这一屏把版心放宽、左右留白收窄，三张图整体更大（排版结构不变） */
.pp-pg.rb-wide .pg-frame {
  max-width: min(1780px, 97vw);
  padding-left: clamp(16px, 2vw, 36px);
  padding-right: clamp(16px, 2vw, 36px);
}
.pg-board .pg-fig { display: flex; flex-direction: column; margin: 0; min-width: 0; }
/* 不设固定高度：框跟着图片走（三张同为 16:9 → 等大），底部不再留出页面底色的白边 */
.pg-board .pg-plate { height: auto; display: block; }
.pg-board .pg-plate img { width: 100%; height: auto; max-height: none; object-fit: contain; }
@media (max-width: 900px) {
  .pg-board { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .pg-board { grid-template-columns: 1fr; }
}
/* 大图（FIG.04）紧跟在三图下面：整体再往上一档，与并排三图贴得更近 */
.pg-board ~ .pg-fig-wide { margin-top: clamp(-26px, -2vw, -8px); }
/* 全宽灵感/大图：在完整不裁切的前提下尽量占满屏幕 */
.pg-figslide .pg-fig-wide .pg-plate img { max-height: 88vh; }

/* —— 使用场景整屏：单张实景大图，完整不裁边，点击可放大 —— */
.pg-sceneslide { gap: clamp(14px, 2vh, 22px); }
.pg-scene {
  margin: 0 auto;
  width: 100%;
  /* 与纯图屏同一画板：满内容区宽，不再单独收窄 */
  max-width: min(var(--max), 94vw);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.pg-scene-plate {
  aspect-ratio: auto;
  width: 100%;
  height: min(62vh, 660px);
  overflow: visible;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pg-scene-plate img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.pg-haloslide { gap: clamp(14px, 2vh, 22px); }
.pg-halo { margin: 0 auto; width: 100%; max-width: min(1320px, 96vw); }
.pg-halo-stage { position: relative; width: 100%; height: min(80vh, 900px); display: flex; align-items: center; justify-content: center; }
.pg-halobase { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.pg-halo-stage { isolation: isolate; }
/* 四色循环：6s 一轮，每色亮 1.5s；亮灯窗口放宽到 1.8s，相邻色重叠 0.3s，
   保证金属环始终被颜色盖住，不会在切换间隙露回银色底图 */
.pg-haloring { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; animation: pgHalo 6s linear infinite; animation-delay: calc(var(--i) * 1.5s - .2s); }
@keyframes pgHalo { 0% { opacity: 0; } 3% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } }
.pg-halometal { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 9; pointer-events: none; }
.pg-halokeys { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 11px; color: var(--ink-3); }
.pg-mech {
  margin: 0;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.6vh, 30px);
}
.pg-mech-media {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pg-mech-media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.pg-mech-cap { min-width: 0; }
.pg-mech-h {
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.5;
  font-weight: 200;
  letter-spacing: 0.01em;
  margin-bottom: clamp(8px, 1.2vh, 14px);
}
/* 卖点价值句：说明在前、加粗主张在后，主张下衬一抹细绿线收束视线 */
.pg-mech-verdict {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.45em;
  font-size: 17px; /* 与前后正文 .pg-para 一致 */
  line-height: 1.9;
  color: var(--ink-3);
  margin-bottom: clamp(12px, 1.8vh, 20px);
}
.pg-mech-verdict b {
  font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid rgba(15, 157, 88, 0.5);
  padding-bottom: 2px;
}
/* 结论两列：以 1px 中缝对齐示意图中轴（90° 红 / 0° 绿 上下贯穿） */
.pg-mech-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0;
  row-gap: clamp(8px, 1.4vh, 16px);
}
.pg-mech-rows li:first-child { padding-right: clamp(18px, 3vw, 40px); }
.pg-mech-rows li:last-child { border-left: 1px solid var(--line); padding-left: clamp(18px, 3vw, 40px); }
.pg-mech-rows li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}
.pg-mech-rows i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-3);
  margin-top: 0.7em;
}
.pg-mech-bad i { background: #e03131; }
.pg-mech-good i { background: #0f9d58; }
.pg-mech-rows span {
  min-width: 0;
  font-size: 17px; /* 与前后正文 .pg-para 一致 */
  line-height: 1.95;
  color: var(--ink-2);
}
.pg-mech-rows b {
  display: block;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 2px;
}
.pg-mech-bad b { color: #c02929; }
.pg-mech-good b { color: #0f9d58; }

/* —— 模式场景图屏：示意图整宽铺满（内联 SVG 继承页面字体） + 底部三列导读条 —— */
.pg-scheme {
  margin: 0;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vh, 28px);
}
.pg-scheme-media { width: 100%; }
/* 多张手稿并排（两张及以上）：等宽两列，图内笔迹不裁边 */
.pg-scheme-media--pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 22px);
  align-items: start;
  width: 100%;
}
.pg-scheme-media--pair .pg-fig { margin: 0; min-width: 0; }
.pg-scheme-media .pg-scheme-svg { width: 100%; }
.pg-scheme-media .pg-scheme-svg svg,
.pg-scheme-media .pg-scheme-svg img {
  display: block;
  width: 100%;
  height: auto;
}
.pg-ui {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 20px);
  margin: clamp(10px, 1.6vh, 18px) 0 0;
  align-content: center;
}
.pg-ui-shot { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.pg-ui-shot .pg-ui-imgbox {
  position: relative;
  cursor: zoom-in;
  display: flex;
  justify-content: center; /* 主图居中 */
}
.pg-ui-shot img {
  display: block;
  width: 100%;
  height: auto;            /* 跟随图片比例，不留大片空白 */
  max-height: min(64vh, 560px);
  object-fit: contain;     /* 超高时按框完整显示，不裁切 */
  object-position: center;
  border: 1px solid var(--line);
}
.pg-ui-shot .pg-ui-imgbox::after {
  content: '↗ 观大图';
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 4px 8px;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  pointer-events: none;
}
.pg-ui-shot .pg-ui-imgbox:hover::after { opacity: 1; }
/* 单屏叠图：超宽 demo 板一屏两张上下排，撑满屏高 */
.pg-ui-solo { grid-template-columns: minmax(0, 1fr); }
/* 不缩图：按满宽原始比例显示，仅在极端超高时才限高 */
.pg-ui-solo .pg-ui-shot img { max-height: min(64vh, 620px); } /* 标题占顶行后给图留位 */
.pg-ui-solo .pg-ui-desc { font-size: 14px; }
/* 内容不足一屏时整体居中，收掉底部大片空白；超一屏时 auto margin 归零、正常滚动 */
.pp-pg .pg-frame > .pg-ui-solo { margin-top: auto; margin-bottom: auto; }
.pg-ui-shot figcaption {
  flex: none;
  margin: 0 0 clamp(10px, 1.8vh, 18px);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}
.pg-ui-shot .pg-ui-desc {
  flex: none;
  margin: clamp(10px, 1.8vh, 18px) auto 0 0;
  max-width: 1080px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-2);
  text-align: left;
  white-space: nowrap;      /* 配文保持一行，不折行出孤字 */
}
@media (max-width: 900px) {
  .pg-ui-shot .pg-ui-desc { white-space: normal; }  /* 窄屏放开，避免溢出 */
}
.pg-ui-solo .pg-ui-desc { font-size: 14px; }

/* —— 交互逻辑屏：按键 / 显示 / 灯光 三栏定义 —— */
.pg-logic {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.2vh, 24px);
  margin-top: clamp(8px, 1.4vh, 16px);
}
/* 导语：中等字号；限宽用 em（ch 对中文太窄，一行只有 ~30 字，挤成一坨） */
.pg-logic-intro {
  margin: 0;
  max-width: 40em;         /* 一行约 38–40 个中文字，疏朗不散 */
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 2.15;
  letter-spacing: 0.015em;
  color: var(--ink-2);
}
.pg-logic-intro em { font-style: normal; color: var(--ink); }
.pg-logic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
}
.pg-logic-col { min-width: 0; }
.pg-logic-h {
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 clamp(10px, 1.6vh, 16px);
}
.pg-logic-list { list-style: none; margin: 0; padding: 0; }
.pg-logic-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: clamp(6px, 1vh, 10px) 0;
  border-bottom: 1px dashed var(--line);
}
.pg-logic-list li:last-child { border-bottom: 0; }
.pg-logic-list b {
  flex: none;
  width: 7.2em;            /* 容下「一级 · 选茶」这类词条，不再折行 */
  font-family: var(--font-zh);
  font-weight: 400;        /* 与档案屏元信息同款：常规字重黑体 */
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding-top: 1px;
}
.pg-logic-list span {
  min-width: 0;
  font-family: var(--font-zh);
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-2);
}
@media (max-width: 900px) {
  .pg-logic-grid { grid-template-columns: minmax(0, 1fr); }
}
.pg-scheme-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 0;
  row-gap: clamp(10px, 1.6vh, 18px);
  border-top: 1px solid var(--line);
  padding-top: clamp(12px, 1.8vh, 20px);
}
.pg-scheme-notes li {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding-right: clamp(18px, 3vw, 40px);
}
.pg-scheme-notes li + li {
  border-left: 1px solid var(--line);
  padding-left: clamp(18px, 3vw, 40px);
}
.pg-scheme-notes b {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.pg-scheme-notes span {
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-3);
}

/* —— 档案屏 —— */
.pg-arch {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 3.6vw, 48px) clamp(32px, 5.4vw, 80px);
  align-items: center;
}
.pg-arch .pg-contact {
  display: inline-block;
  width: fit-content;
  margin-top: clamp(22px, 3.5vh, 34px);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  transition: opacity 0.3s;
}
.pg-arch .pg-contact:hover { opacity: 0.55; }
.pg-spec { margin: 0; border-top: 1px solid var(--line); }
.pg-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.pg-spec-row dt {
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.pg-spec-row dd {
  font-size: 13.5px;
  text-align: right;
  color: var(--ink);
}
.pg-nav {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: end;
  border-top: 1px solid var(--line);
  margin-top: clamp(8px, 2vh, 16px);
  padding-top: clamp(24px, 4vh, 34px);
}
.pg-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  text-align: left;
  padding: 6px 0;
  transition: opacity 0.3s;
}
.pg-nav-btn.right { align-items: flex-end; text-align: right; }
.pg-nav-btn .pg-nav-k {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.pg-nav-btn .pg-nav-n { font-size: clamp(15px, 1.8vw, 20px); }
.pg-nav-btn:hover:not(.off) .pg-nav-n {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.pg-nav-btn.off { opacity: 0.35; }
.pg-nav-back {
  justify-self: center;
  align-self: end;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  padding: 10px 18px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.pg-nav-back:hover { background: var(--ink); color: var(--bg); }

/* —— 逐屏入场（滚到哪屏，哪屏内容淡入） —— */
.pp-pg .pg-kicker,
.pp-pg .pg-intro > *,
.pp-pg .pg-body > *,
.pp-pg .pg-arch > *,
.pp-pg .pg-editorial > *,
.pp-pg .pg-figslide > *,
.pp-pg .pg-clipslide > *,
.pp-pg .pg-sceneslide > *,
.pp-pg .pg-mech > *,
.pp-pg .pg-scheme > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
.pp-pg.in .pg-kicker,
.pp-pg.in .pg-intro > *,
.pp-pg.in .pg-body > *,
.pp-pg.in .pg-arch > *,
.pp-pg.in .pg-editorial > *,
.pp-pg.in .pg-figslide > *,
.pp-pg.in .pg-clipslide > *,
.pp-pg.in .pg-sceneslide > *,
.pp-pg.in .pg-mech > *,
.pp-pg.in .pg-scheme > * {
  opacity: 1;
  transform: none;
}
.pp-pg .pg-intro > *:nth-child(2),
.pp-pg .pg-body > *:nth-child(2),
.pp-pg .pg-arch > *:nth-child(2),
.pp-pg .pg-mech > *:nth-child(2),
.pp-pg .pg-scheme > *:nth-child(2) { transition-delay: 0.09s; }
.pp-pg .pg-arch > *:nth-child(3) { transition-delay: 0.18s; }

/* —— 右侧纵向滑动标：细线 + 菱形针眼 + ↑↓ + 计数 + 项目名（参照图样式，无跑道壳） —— */
/* —— 回到顶部按钮：右下角纯文字「↑ TOP」，不要跑道壳（无底、无框、无圆角）—— */
.pp-topbtn {
  position: fixed;
  right: clamp(14px, 2vw, 30px);
  bottom: calc(clamp(16px, 3vh, 30px) + env(safe-area-inset-bottom));
  z-index: 240;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* 没壳了，靠一圈浅色文字投影保证压在图上也能看清 */
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.9);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), color 0.3s var(--ease);
}
.pp-topbtn[hidden] { display: none; }
.pp-topbtn.show { opacity: 1; transform: none; }
.pp-topbtn:hover { color: var(--muted); }
.pp-topbtn:active { opacity: 0.7; }
.pp-topbtn i {
  font-style: normal;
  font-size: 11px;
  line-height: 1;
  transition: transform 0.3s var(--ease);
}
.pp-topbtn:hover i { transform: translateY(-2px); }

.pp-bar {
  position: fixed;
  right: clamp(10px, 1.6vw, 26px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 210;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.4vh, 16px);
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.pp-bar-btn {
  font-size: 14px;
  line-height: 1;
  color: var(--ink);
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  opacity: 0.55;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}
.pp-bar-btn:hover { opacity: 1; }
.pp-bar-btn:disabled { opacity: 0.18; cursor: default; }
.pp-bar-btn:disabled:hover { opacity: 0.18; }

.pp-bar-track {
  position: relative;
  width: 14px;
  height: clamp(300px, 52vh, 520px);
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.pp-bar-bar {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
  transform: translateX(-0.5px);
}
.pp-bar-fill {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 10%;
  background: var(--ink);
  transform: translateX(-0.5px);
  transition: height 0.5s cubic-bezier(.22, 1, .36, 1);
}
.pp-bar-needle {
  position: absolute;
  left: 50%;
  top: 5%;
  width: 11px;
  height: 11px;
  display: block;
  background: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: top 0.5s cubic-bezier(.22, 1, .36, 1);
}
.pp-bar-needle i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
}

.pp-bar-count {
  font-size: 9.5px;
  color: var(--ink-3);
  letter-spacing: 0.12em;
  text-align: center;
}
.pp-bar-name {
  font-size: 10.5px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
  max-width: 160px;
  line-height: 1.35;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-bar-name em {
  font-style: normal;
  font-weight: inherit;
  color: inherit;
}

@media (max-width: 560px) {
  .pp-bar { right: 6px; }
  .pp-bar-track { height: 44vh; }
  .pp-bar-name { display: none; }
  .pp-bar-count { display: none; }
}

/* —— 当前屏图面「跳出悬浮」：冲破相框，升到上层（满足用户「图片跳出悬浮于界面」） —— */
.pp-plate img,
.pg-stand svg {
  transform-origin: 50% 90%;
  position: relative;
}
/* 只给「当前这一屏」挂 will-change：一个项目十几张 2000px 大图常驻合成层，
   显存占用按百 MB 计，滚动时合成器反而搬不动 → 桌面掉帧的一大来源。
   动画期间 Chrome 会自动提升图层，视觉与手感都不受影响 */
.pp-pg.cur .pg-plate img,
.pp-pg.cur .pg-stand svg { will-change: transform; }
.pp-pg.cur .pg-plate img,
.pp-pg.cur .pg-stand svg {
  animation: pgFigPop 1.7s cubic-bezier(.18, 1, .3, 1) both;
  z-index: 5;
  box-shadow: 0 28px 50px -18px rgba(0, 0, 0, 0.35);
}
@keyframes pgFigPop {
  0%   { transform: scale(0.94) translateY(8%); }
  55%  { transform: scale(1.14) translateY(-4%); }
  100% { transform: scale(1.06) translateY(-1.5%); }
}

@media (prefers-reduced-motion: reduce) {
  .pp-pager { transition: none !important; }
  .pp-bar-fill, .pp-bar-needle { transition: none !important; }
  .pp-pg.cur .pg-plate img,
  .pp-pg.cur .pg-stand svg { animation: none !important; }
  .pp-pg .pg-kicker,
  .pp-pg .pg-intro > *,
  .pp-pg .pg-body > *,
  .pp-pg .pg-arch > *,
  .pp-pg .pg-editorial > *,
  .pp-pg .pg-figslide > *,
  .pp-pg .pg-sceneslide > *,
  .pp-pg .pg-mech > *,
  .pp-pg .pg-scheme > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* —— 响应式：窄屏单列，图在上 —— */
@media (max-width: 980px) {
  .pg-intro,
  .pg-body,
  .pg-arch,
  .pg-mech {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vh, 40px) 0;
  }
  /* 模式场景屏：底部导读条改单列，去掉中缝分隔线 */
  .pg-scheme-notes { grid-template-columns: minmax(0, 1fr); }
  .pg-scheme-media--pair { grid-template-columns: minmax(0, 1fr); }
  .pg-scheme-notes li { padding-right: 0; }
  .pg-scheme-notes li + li {
    border-left: none;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: clamp(10px, 1.6vh, 18px);
  }
  .pg-body-rev > :first-child,
  .pg-body-rev > :last-child { order: 0; }
  .pg-intro > .pg-fig,
  .pg-body > .pg-fig,
  .pg-mech-media { order: -1; }
  .pg-nav { grid-template-columns: 1fr; text-align: left; }
  .pg-nav-btn.right { align-items: flex-start; text-align: left; }
  .pg-nav-back { justify-self: start; order: -1; }
}

@media (max-width: 560px) {
  .pg-para-big { font-size: 22px; }
  .pg-blurb { font-size: 15px; }
  .pg-para { font-size: 15.5px; line-height: 1.95; }
  /* 结构屏底部说明与正文同步变小 */
  .pg-mech-rows span { font-size: 15.5px; line-height: 1.9; }
}

/* =========================================================
   移动端响应式补全（承接上方各断点，覆盖窄屏细节缺口）
   核心：≤820px 时详情页由「整屏翻页」切换为「原生纵向滚动」，
   每屏 = 独立段落，内容超高不再被裁切（配合 js 窄屏守卫）
   ========================================================= */
@media (max-width: 820px) {
  /* 详情页线性化：允许容器纵向滚动，取消 translate 翻屏 */
  .pp-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .pp-pager { transform: none !important; }
  .pp-pg {
    height: auto;
    min-height: auto;
    overflow: visible;
    flex: 0 0 auto;
    padding-bottom: clamp(36px, 8vh, 72px);
  }
  /* 首屏仍保持一屏高度作为封面感 */
  .pp-pg:first-child { min-height: 100vh; }
  .pp-pg .pg-frame {
    justify-content: flex-start;
    min-height: auto;
    padding-top: clamp(32px, 7vh, 84px);
    padding-bottom: 0;
  }
  .pp-pg:first-child .pg-frame { min-height: 100vh; }
  /* 右侧滑标整条收起（线性滚动场景无翻页语义） */
  .pp-bar { display: none; }
  /* 档案屏元信息行窄屏可读性 */
  .pg-spec-row { gap: 12px; }
  .pg-spec-row dd { font-size: 12.5px; }
}

/* —— 触摸设备线性化（iPad 横屏 1024 等）：手指滑动交给原生滚动 ——
   宽度 >820 的平板仍走「整屏 transform 翻屏」，而翻屏只由 wheel + 简易 touch
   手势驱动，iPad 上容易出现「滑不动 / 惯性滚动吞掉手势」。
   因此触摸设备一律加 html.pp-linear，改走原生纵向滚动（与窄屏同一套）。 */
html.pp-linear .pp-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  /* 不设 scroll-snap：自由连续滚动，手停在哪就停在哪（一屏一屏吸附的手感不好，已回退） */
}
html.pp-linear .pp-pager { transform: none !important; height: auto; will-change: auto; }
/* 画幅由内容决定（height:auto），屏与屏之间靠 padding-bottom 呼吸 —— 不强制撑成一屏高 */
html.pp-linear .pp-pg {
  flex: 0 0 auto;
  height: auto;
  min-height: auto;
  overflow: visible;
  padding-bottom: clamp(36px, 8vh, 72px);
}
/* 平板屏距放宽（iPad 横屏 8vh 只有 ~60px，上下屏挤在一起 → 30vh，约 180–340px，
   接近半屏的留白，滚动时「上一屏结束 / 下一屏开始」界限才清楚）。
   注意：这里不能用 @media (pointer: coarse) —— iPadOS 的 Safari 默认「请求桌面网站」，
   会把 pointer 报成 fine，媒体查询在 iPad 上直接失配。改由 JS 判定后挂 html.is-pad。 */
html.pp-linear.is-pad .pp-pg { padding-bottom: clamp(180px, 30vh, 340px); }
/* 平板每屏顶部也补一段留白：连续滚动下屏头会贴着上一屏的尾巴，
   和上面的底部留白合起来才是「一屏结束、下一屏开始」的完整间距 */
/* 屏头留白只给非首屏：首屏是封面，要保持画幅上下内衬对称、内容才算居中 */
html.pp-linear.is-pad .pp-pg:not(:first-child) .pg-frame { padding-top: clamp(40px, 8vh, 90px); }
/* 平板封面屏：同样撑满可视区、内容在画幅里垂直居中。
   原来只有桌面（pointer:fine）享受这条居中，平板上封面内容贴在顶部、
   底下空一大片，看着像没排完。首屏不再叠屏头留白，否则居中会偏下。 */
html.pp-linear.is-pad .pp-pg:first-child .pg-frame {
  min-height: calc(100dvh - 59px);
  justify-content: center;
  /* 画幅上下内衬必须同值：窄屏分支只给顶部留白、底部是 0，封面会被顶偏 */
  padding-top: clamp(28px, 4.4vh, 40px);
  padding-bottom: clamp(28px, 4.4vh, 40px);
}
/* 屏内不再撑满一屏、内容从顶部起排（桌面原本 min-height:100% + 居中，连续滚动下不需要） */
html.pp-linear .pp-pg .pg-frame {
  min-height: auto;
  justify-content: flex-start;
}
/* 桌面例外：每一屏都撑满可视区、内容在画幅里垂直居中（与翻屏时代的画幅一致）。
   只给封面撑满、其余屏按内容高排的话，内容矮的屏（单图 + 一段文案）会两三屏
   挤进同一屏，画幅就不对了 —— 这是「后面图片不是正常画幅高度」的原因。
   :not(.is-pad) 必须带：iPadOS「请求桌面网站」会把 pointer 报成 fine，
   这条媒体查询在 iPad 上会失配命中，平板版型由 JS 挂的 html.is-pad 单独管。
   屏与屏的分隔靠 .pp-pg 的 padding-bottom（clamp(36px,8vh,72px)），
   所以从一屏高度里把它扣掉，每个屏块总高 ≈ 视口高，节奏与翻屏时代一致。 */
@media (min-width: 821px) and (pointer: fine) {
  html.pp-linear:not(.is-pad) .pp-pg .pg-frame {
    min-height: calc(100dvh - 59px - clamp(36px, 8vh, 72px));
    justify-content: center;
  }
}
/* 滑动期间暂停装饰动画（光晕呼吸 pgHalo、场景闪烁 fsBlink 等），
   把合成 / 主线程让给滚动本身；停手 160ms 后由 JS 摘掉 .is-scrolling 自动恢复。
   注意这里刻意不写 `.pp-pager *`：通配后代选择器会让整棵子树（含数十个内联 SVG
   节点）每次挂摘都重算一遍样式，一顿一顿正是它造成的 —— 只点名真正带动画的元素 */
html.pp-linear.is-scrolling .pp-pager,
html.pp-linear.is-scrolling .pg-haloring,
html.pp-linear.is-scrolling .pg-flow-cap,
html.pp-linear.is-scrolling .fs-anim,
html.pp-linear.is-scrolling .pg-plate img,
html.pp-linear.is-scrolling .pg-stand svg {
  animation-play-state: paused !important;
}
/* 连续滚动下不再给每一屏放一次「图面跳出悬浮」：
   桌面改成连续滚动后，快速滑过十几屏 = 十几张 2000px 大图依次起跳 —— 每起跳一次就要
   把这张大图升成合成层、重绘一层 50px 模糊投影，滑到哪顿到哪，正是「一顿一顿」的来源。
   触摸端早就因为同样的理由关掉了它（手指连滑时图在晃），现在桌面一并关：
   连续滚动里「图稳稳地在那里」才是顺的手感。翻屏模式（非 pp-linear）不受影响。 */
html.pp-linear .pp-pg.cur .pg-plate img,
html.pp-linear .pp-pg.cur .pg-stand svg {
  animation: none !important;
  transform: none !important;
  box-shadow: none;
  will-change: auto;
}
/* 只让「当前这一屏」跑循环动画（光晕 pgHalo、冲茶流程 fsBlink），其余屏停在常态：
   十几屏的无限动画同时跑，滚动时每一帧合成器都要搬纹理 —— 桌面同样掉帧，
   所以这条不再只限触摸端（.cur 由 JS 的 markCur 维护） */
html.pp-linear .pp-pg:not(.cur) .pg-haloring { display: none; }
html.pp-linear .pp-pg:not(.cur) .fs-anim,
html.pp-linear .pp-pg:not(.cur) .pg-flow-cap { animation-play-state: paused; }
/* 顶栏毛玻璃：内容在它下面滚动时，浏览器每帧都要把底下的画面重新模糊一遍，
   连续滚动下这是掉帧的大头（不只是 Safari，桌面 Chrome 同样要付这份合成开销）。
   底色本来就有 0.9 不透明，换成近乎实心白肉眼看不出差别，滚动开销直接归零。
   原先只在窄屏 / 触摸端关，桌面保留毛玻璃 —— 桌面现在是同样的连续滚动，一视同仁。 */
html.pp-linear .pp-top {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 255, 255, 0.97);
}
/* 手机上首页导航同理：粘性导航 + 毛玻璃 = 每帧重算模糊，改用实心底 */
@media (max-width: 820px), (pointer: coarse) {
  .nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.97);
  }
}

/* 手机（短边 ≤520，横屏也算）：不进大图查看，角标与手型光标一并撤掉，
   免得点了没反应；iPad / 平板 / 桌面保留「↗ 观大图」与点击放大 */
@media (max-width: 520px), (max-height: 520px) {
  .pg-plate .pg-zoom { display: none !important; }
  .pg-plate, .pg-ui-imgbox { cursor: default; }
}
/* 触摸端（手机 / 平板）不做「图面跳出悬浮」：每进一屏图片都要放大上浮再回落并带一层投影，
   手指连续滑动时看着在晃，投影还要跟着重绘；桌面保留这个效果 */
@media (max-width: 820px), (pointer: coarse) {
  .pp-pg.cur .pg-plate img,
  .pp-pg.cur .pg-stand svg {
    animation: none !important;
    transform: none;
    box-shadow: none;
  }
}

/* 长洞察屏：线性模式下不再嵌套滚动，避免手指在表格里被内层容器吃掉 */
html.pp-linear .pp-pg.ins-scroll { overflow: visible !important; height: auto; }
/* 触摸端收起右侧滑标（手指直接滚，滑标是多余的）；
   桌面保留：连续滚动下它仍是进度指示，点一下可跳到对应屏 */
@media (max-width: 820px), (pointer: coarse) {
  html.pp-linear .pp-bar { display: none; }
}

@media (max-width: 640px) {
  .pp-pg { padding-bottom: clamp(28px, 6vh, 52px); }
  /* 顶部留白同样要让开左上角小标 */
  .pp-pg .pg-frame { padding-top: 28px; padding-bottom: 0; }
  .pp-pg .pg-frame > .pg-editorial { padding-bottom: 0; }
  /* 图与说明文之间的间距再收紧 */
  .pg-intro,
  .pg-body,
  .pg-arch,
  .pg-mech { gap: clamp(14px, 3vh, 28px) 0; }
  .pg-figslide { gap: 10px; }
  /* 使用场景整屏：竖屏占满可用宽度，画幅高度跟随视口 */
  .pg-sceneslide { gap: 10px; }
  .pg-scene { max-width: 100%; }
  .pg-scene-plate { height: min(52vh, 420px); }
  /* 结构屏：竖屏下说明单列，示意图给足主位高度 */
  .pg-mech { flex: none; }
  .pg-mech-media { min-height: clamp(220px, 46vh, 360px); }

  .pg-mech-rows { grid-template-columns: minmax(0, 1fr); }
  /* 单列时去掉两列间的中缝与内衬 */
  .pg-mech-rows li:first-child { padding-right: 0; }
  .pg-mech-rows li:last-child { border-left: none; padding-left: 0; }
  /* 竖屏下正文密度与图注换行 */
  .pg-title { line-height: 1.06; }
  .pg-blurb,
  .pg-para { line-height: 1.9; }
  .pg-cap { flex-direction: column; align-items: flex-start; gap: 4px; }
  .pg-para-big { font-size: clamp(20px, 6.2vw, 26px); line-height: 1.68; }
  /* 图注角标（zoom 提示）在触屏常显，避免 hover 不可达 */
  .pg-plate .pg-zoom { opacity: 1; transform: none; }
  /* 旧版配色图组 / 画廊：双列 + 图注列排 */
  .pal-set { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .g-cap { flex-direction: column; align-items: flex-start; gap: 4px; }
  .pp-mag-mark { font-size: 34px; }
  .pp-mag-sec-col { font-size: 13.5px; line-height: 1.9; }
  .pp-jump-name { max-width: 90%; }
  /* Lightbox：触控热区与留白 */
  .lb-x { top: max(8px, env(safe-area-inset-top)); right: 8px; width: 48px; height: 48px; }
  .lb-arr { width: 40px; height: 40px; font-size: 14px; }
  .lb-stage { width: 100vw; }
  /* 缩略图序号缩小以免遮挡 */
  .cv-thumb .cv-n { font-size: 8px; padding: 0 4px; top: 4px; left: 5px; }
}

@media (max-width: 400px) {
  .hero-name { font-size: 42px; line-height: 1.05; }
  .sec-title { font-size: 40px; }
  .panel-title { font-size: 24px; }
  .pg-para-big { font-size: 19px; }
  .pal-set { grid-template-columns: 1fr; }
  .cv-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lb-stage { height: 74vh; }
}

/* ============================================================
   洞察屏：痛点分析 / 动作不规范的代价 / 人群定位 / 定位主张
   结构与旧「交互总览」同构 —— 标题 + 三列卡片 +（人群画像）+ 优先级表；
   内容按原稿完整呈现，长于一屏时该屏页内滚动（.ins-scroll）。
   ============================================================ */
/* —— 长洞察屏：允许页内纵向滚动；滚到边界才翻屏（见 js 中 pageCanScroll） —— */
@media (min-width: 821px) {
  .pp-pg.ins-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    align-items: flex-start;
  }
  /* 长洞察屏的页框：内容多但不压字号，只把上下留白收到「够呼吸」的量级 */
  .pp-pg.ins-scroll .pg-frame {
    justify-content: flex-start;
    /* 内容多、从顶部起排：顶部留白要让开左上角小标（小标占 ~25px） */
    padding-top: clamp(34px, 4.4vh, 52px);
    padding-bottom: clamp(18px, 2.4vh, 30px);
  }
  .pp-pg.ins-scroll::-webkit-scrollbar { width: 8px; }
  .pp-pg.ins-scroll::-webkit-scrollbar-track { background: transparent; }
  .pp-pg.ins-scroll::-webkit-scrollbar-thumb {
    background: rgba(10, 10, 10, 0.16);
    border-radius: 4px;
  }
}
.pg-ins {
  margin: auto 0; /* 内容短时纵向居中；内容长于视口时贴顶并滚动 */
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}
.ins-head { max-width: var(--board); }
.ins-title .ins-nowrap { white-space: nowrap; }
@media (max-width: 1279px) {
  .ins-title .ins-nowrap { white-space: normal; }
}
.ins-title {
  font-size: clamp(24px, 2.9vw, 46px);
  line-height: 1.32;
  letter-spacing: -0.005em;
  font-weight: 200;
}
.ins-title em {
  font-style: normal;
  border-bottom: 2px solid rgba(10, 10, 10, 0.45);
}
.ins-sub {
  margin-top: clamp(10px, 1.6vh, 18px);
  font-size: clamp(14px, 1.25vw, 17.5px);
  line-height: 1.8;
  color: var(--ink-2);
  max-width: var(--board);
}
.ins-sub b { color: var(--ink); font-weight: 500; }

/* —— 三列卡片 —— */
.ins-stage {
  margin-top: clamp(14px, 2.2vh, 26px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 28px);
}
/* 「动作不规范的代价」屏：三列按内容量 1.15 / 1.1 / 1fr 分栏，
   让中间「WHY 力学链」卡不再被挤窄（对齐全站独立稿 .harm-grid 比例） */
.ins-stage.cols-harm { grid-template-columns: 1.15fr 1.1fr 1fr; }
/* 两列版：人群 / 场景只有两类时用（如 TT-01「懂不懂茶」两档），
   避免为凑满三列而硬拆出第三类 —— 三列是版式默认，不是分类结论 */
.ins-stage.cols-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ins-card {
  position: relative;
  border: 1px solid var(--line);
  background: #fff;
  padding: clamp(14px, 2vh, 24px) clamp(15px, 1.7vw, 26px);
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 1.3vh, 13px);
}
.ins-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 2px;
}
.ins-card.c1::before { background: #ee7a5f; }
.ins-card.c2::before { background: #e0a13c; }
.ins-card.c3::before { background: #5b7cfa; }
.ins-card.c4::before { background: #5b7cfa; }
.ins-card.c5::before { background: #e0a13c; }
.ins-card.c6::before { background: #ee7a5f; }
.ins-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}
.ins-name {
  font-size: clamp(23px, 2.5vw, 36px);
  line-height: 1.1;
  font-weight: 200;
}
.ins-q {
  font-size: clamp(13.5px, 1.15vw, 16px);
  line-height: 1.65;
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-top: clamp(9px, 1.4vh, 14px);
}
.ins-keys {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ins-keys li {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 2px 10px;
  background: #fff;
}
/* —— 卡片内要点列表：小标 + 注释（.steps 为带 ↓ 的因果链，用于「动作不规范的代价」屏） —— */
.ins-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1vh, 11px);
}
.ins-list li {
  position: relative;
  padding-left: 13px;
  font-size: clamp(12.5px, 1.05vw, 14.5px);
  line-height: 1.6;
  color: var(--ink-2);
}
.ins-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  background: #d94f3d;
  opacity: 0.55;
}
.ins-list b { display: block; color: var(--ink); font-weight: 500; }
.ins-list span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-3);
}
.ins-list.steps li {
  padding: 2px 0 2px 12px;
  border-left: 2px solid rgba(217, 79, 61, 0.28);
}
.ins-list.steps li::before { display: none; }
.ins-list.steps li + li { margin-top: 12px; }
.ins-list.steps li + li::after {
  content: '↓';
  position: absolute;
  left: -1px; top: -12px;
  transform: translateX(-50%);
  font-size: 11px;
  line-height: 1;
  color: #d94f3d;
  background: #fff;
}
.ins-out {
  margin-top: auto;
  font-size: clamp(12.5px, 1.02vw, 14px);
  line-height: 1.65;
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-top: clamp(9px, 1.4vh, 14px);
}
.ins-out b { font-weight: 500; border-bottom: 1px solid rgba(10, 10, 10, 0.35); }
.ins-say {
  margin-top: auto;
  font-size: clamp(13px, 1.1vw, 15.5px);
  line-height: 1.7;
  font-weight: 300;
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding-top: clamp(9px, 1.4vh, 14px);
}
.ins-say b { font-weight: 500; border-bottom: 1px solid rgba(10, 10, 10, 0.4); }
.ins-para {
  font-size: clamp(12.5px, 1.05vw, 14.5px);
  line-height: 1.75;
  color: var(--ink-2);
}
.ins-para b { color: var(--ink); font-weight: 500; }

/* —— 痛点明细：标题 + 说明 + 强度角标（完整版，不做删减） —— */
.ins-pains {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 13px);
}
.ins-pains li { position: relative; padding-right: 36px; }
.ins-p-t {
  display: inline;
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 500;
  color: var(--ink);
}
.ins-p-d {
  display: block;
  margin-top: 3px;
  font-size: clamp(11.5px, 0.95vw, 13px);
  line-height: 1.65;
  color: var(--ink-2);
}
.ins-sev {
  position: absolute;
  right: 0;
  top: 1px;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.06em;
  line-height: 1.5;
  border: 1px solid currentColor;
  border-radius: 100px;
  padding: 1px 7px;
  color: var(--ink-3);
}
.ins-sev.h { color: #d94f3d; }
.ins-sev.m { color: #b8801d; }

/* —— 区块小标：人群 / 优先级等分块标题 —— */
.ins-block-k {
  display: block;
  margin: clamp(18px, 2.8vh, 32px) 0 clamp(9px, 1.4vh, 14px);
  padding-bottom: clamp(7px, 1.1vh, 10px);
  border-bottom: 1px solid rgba(10, 10, 10, 0.16);
  color: var(--ink-3);
}
.ins-block-k b { font-weight: 400; color: var(--ink-2); }

/* —— 三类核心人群画像 —— */
.ins-personas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 28px);
}
.ins-persona {
  position: relative;
  border: 1px solid var(--line);
  background: #fff;
  padding: clamp(14px, 2vh, 24px) clamp(15px, 1.7vw, 26px);
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 1.3vh, 14px);
}
.ins-persona::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 2px;
}
.ins-persona.p-a::before { background: #5b7cfa; }
.ins-persona.p-b::before { background: #e0a13c; }
.ins-persona.p-c::before { background: #ee7a5f; }
.ins-pa-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}
.ins-pa-mode {
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 2px 9px;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.ins-persona h3 {
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.28;
  font-weight: 300;
}
.ins-pa-quote {
  font-size: clamp(12.5px, 1.05vw, 14.5px);
  line-height: 1.7;
  color: var(--ink);
  border-left: 2px solid var(--line);
  padding-left: 12px;
}
.ins-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ins-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 11px;
  color: var(--ink-2);
  background: #fff;
}
.ins-chip i { width: 5px; height: 5px; border-radius: 50%; flex: none; background: var(--ink-3); }
.ins-persona.p-a .ins-chip i { background: #5b7cfa; }
.ins-persona.p-b .ins-chip i { background: #e0a13c; }
.ins-persona.p-c .ins-chip i { background: #ee7a5f; }
.ins-pa-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 1px solid var(--line);
  padding-top: clamp(8px, 1.2vh, 11px);
}
.ins-pa-k { color: var(--ink-3); font-size: 10px; }
.ins-pa-row ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ins-pa-row li {
  position: relative;
  padding-left: 13px;
  font-size: clamp(12.5px, 1vw, 14px);
  line-height: 1.65;
  color: var(--ink-2);
}
.ins-pa-row li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.85em;
  width: 7px; height: 1px;
  background: currentColor;
  opacity: 0.45;
}
.ins-pa-row.answer li { color: var(--ink); }

/* —— 人群 · 模式 · 意图融合：卡片内的「意图头」+ 屏底「一条坡道」 —— */
.ins-pa-intent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(10px, 1.1vw, 14px);
  border-top: 1px solid var(--line);
  padding-top: clamp(9px, 1.3vh, 13px);
}
/* 竞技层「实时对战 · 联网」角标（融合自原交互总览屏） */
.ins-pa-online {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 3px 9px;
  border: 1px solid rgba(238, 122, 95, 0.55);
  border-radius: 100px;
  color: #d96a4e;
  letter-spacing: 0.06em;
  font-size: 10px;
  white-space: nowrap;
}
.ins-pa-online .ic {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ins-pa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, 3.1vw, 42px);
  height: clamp(34px, 3.1vw, 42px);
  border-radius: 12px;
  flex: none;
}
.ins-pa-icon .ic {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ins-persona.p-a .ins-pa-icon { color: #5b7cfa; background: rgba(91, 124, 250, 0.11); }
.ins-persona.p-b .ins-pa-icon { color: #e0a13c; background: rgba(224, 161, 60, 0.13); }
.ins-persona.p-c .ins-pa-icon { color: #ee7a5f; background: rgba(238, 122, 95, 0.12); }
/* 单色卡（plain / mono，TT-01 用）：洞察卡与人群卡的顶部色条、小圆点、图标底全部回到墨色 */
.ins-card.plain::before { background: var(--ink); }
.ins-persona.plain::before { background: var(--ink); }
.ins-persona.plain .ins-chip i { background: var(--ink); }
.ins-persona.plain .ins-pa-icon { color: var(--ink); background: rgba(17, 17, 17, 0.06); }
.ins-pa-ib {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ins-pa-iw {
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1;
  font-weight: 200;
  letter-spacing: -0.005em;
}
.ins-pa-iq {
  font-size: clamp(11.5px, 0.98vw, 13.5px);
  line-height: 1.6;
  color: var(--ink-3);
}

/* —— 冲茶流程屏 · 剪影动画带：机器 + 杯子剪影按九步循环，右侧大字幕同步走字 —— */
/* 循环周期 9s = 6 拍 × 1.5s（注水 → 排水 → 投茶 → 洗茶 → 注泡茶 → 出汤）；
   各元素用正 animation-delay 对齐到自己的拍子窗口，顺序播放、与字幕同步 */
.pg-flow-sil {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.2vw, 48px);
  margin-top: clamp(14px, 2.2vh, 26px);
  margin-bottom: clamp(16px, 2.6vh, 30px);
}
.pg-flow-scene {
  flex: none;
  width: clamp(180px, 22vw, 260px);
  height: auto;
  transform: scaleX(-1);              /* 水平镜像：冲泡腔与接茶杯转到右侧 */
}
.pg-flow-scene .fs-silk {             /* 镜像后把丝印文字单独翻回来，保持正读 */
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleX(-1);
}
.pg-flow-caps {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 128px;
}
.pg-flow-cap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  animation: fsBlink 9s linear infinite;   /* 与场景动画同周期：9s = 6 拍 */
}
.pg-flow-cap b {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}
.pg-flow-cap span {
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 200;
  line-height: 1.15;
  color: var(--ink);
}
.pg-flow-cap i {
  font-style: normal;
  font-size: clamp(12px, 1vw, 13.5px);
  line-height: 1.7;
  color: var(--ink-3);
}
/* SVG 场景：剪影统一用墨色；水柱 / 叶 / 蒸汽 / 水位各自按步骤窗口显隐 */
.pg-flow-scene .fs-anim {
  animation-duration: 9s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.fs-ink { fill: var(--ink); }
.fs-paper { fill: #fff; }
.fs-silk {
  fill: #fff;
  opacity: 0.78;
  font-family: var(--mono, ui-monospace, monospace);
  font-weight: 300;
  font-size: 5.2px;
  letter-spacing: 0.52em;
}
.fs-win { fill: #fff; }
.fs-steamw { stroke: #fff; }
.fs-water {
  fill: var(--ink);
  opacity: 0.88;
  transform-box: fill-box;
  transform-origin: bottom;
  animation-name: fsFill;
}
.fs-stream { fill: var(--ink); opacity: 0; animation-name: fsBlink; }
.fs-servecup { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.fs-serve {
  fill: var(--ink);
  opacity: 0.88;
  transform-box: fill-box;
  transform-origin: bottom;
  animation-name: fsServe;
}
.fs-leaf { fill: var(--ink); opacity: 0; animation-name: fsLeaf; }
.fs-drawer { animation-name: fsDrawer; }
.fs-scoop {
  fill: var(--ink);
  opacity: 0;
  animation-name: fsScoop;
  transform-box: fill-box;
  transform-origin: 100% 55%;
}
.fs-steam { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; opacity: 0; animation-name: fsSteam; }
@keyframes fsBlink {
  0% { opacity: 0; }
  2% { opacity: 1; }                      /* 每拍窗口 = 16.7% = 1.5s */
  14% { opacity: 1; }
  16.5% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes fsLeaf {                       /* 第 3 拍：茶则倾倒后茶叶落入茶仓 */
  0%, 40% { opacity: 0; transform: translateY(-26px); }
  42% { opacity: 1; }
  46% { opacity: 1; transform: translateY(6px); }
  49%, 100% { opacity: 0; transform: translateY(10px); }
}
@keyframes fsDrawer {                     /* 第 3 拍：茶仓向左拉出 → 投茶 → 推回 */
  0%, 33% { transform: translateX(0); }
  38%, 43% { transform: translateX(-26px); }
  49%, 100% { transform: translateX(0); }
}
@keyframes fsScoop {                      /* 第 3 拍：茶则出现 → 倾倒 → 收起 */
  0%, 34% { opacity: 0; transform: rotate(-16deg); }
  36% { opacity: 1; transform: rotate(-16deg); }
  40%, 43% { opacity: 1; transform: rotate(18deg); }
  47%, 100% { opacity: 0; transform: rotate(18deg); }
}
@keyframes fsSteam {
  0% { opacity: 0; transform: translateY(6px); }          /* 1 注水润杯温热 / 6 出汤热气 */
  3% { opacity: 0.7; }
  10% { opacity: 0; transform: translateY(-12px); }
  100% { opacity: 0; transform: translateY(-12px); }
}
@keyframes fsFill {
  0% { transform: scaleY(0); }
  10%, 14% { transform: scaleY(0.35); }   /* 1 注水 · 润杯位 */
  20%, 32% { transform: scaleY(0); }      /* 2 排水 · 茶仓排空 */
  52%, 55% { transform: scaleY(0.5); }    /* 4 洗茶 · 快速冲一遍 */
  62%, 66% { transform: scaleY(0); }      /* 洗茶水弃掉 */
  76%, 80% { transform: scaleY(0.92); }   /* 5 注泡茶 · 注满计时 */
  88%, 100% { transform: scaleY(0.08); }  /* 6 出汤 · 流入茶杯 */
}
@keyframes fsServe {
  0%, 82% { transform: scaleY(0); }       /* 6 出汤前空杯 */
  90%, 100% { transform: scaleY(0.85); }  /* 茶汤流入，杯内水位升起 */
}
@media (max-width: 640px) {
  .pg-flow-sil { flex-direction: column; align-items: stretch; }
  .pg-flow-scene { width: clamp(160px, 40vw, 220px); margin: 0 auto; }
  .pg-flow-caps { min-height: 112px; }
}
/* 减少动态偏好：动画停用，常显第一步字幕、静态水位 */
@media (prefers-reduced-motion: reduce) {
  .pg-flow-cap, .pg-flow-scene .fs-anim { animation: none !important; }
  .pg-flow-cap { opacity: 0; }
  .pg-flow-cap:first-child { opacity: 1; }
  .fs-stream, .fs-leaf, .fs-steam, .fs-scoop { opacity: 0 !important; }
  .fs-water, .fs-serve, .fs-drawer { transform: none !important; }
}

/* —— 冲茶流程屏：九步按 备 / 泡 分组，级间用 → 串成一条链 —— */
.pg-flow {
  margin-top: clamp(14px, 2.2vh, 26px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.2vh, 26px);
}
.pg-flow-group {
  border-left: 2px solid rgba(10, 10, 10, 0.14);
  padding-left: clamp(14px, 1.6vw, 22px);
}
.pg-flow-gk {
  display: block;
  margin-bottom: clamp(8px, 1.2vh, 12px);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}
.pg-flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(8px, 1vw, 14px);
}
.pg-flow-step {
  flex: 1 1 148px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--line);
  background: #fff;
  padding: clamp(10px, 1.4vh, 14px) clamp(12px, 1.2vw, 16px);
}
.pg-flow-no {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}
.pg-flow-step b {
  font-size: clamp(14px, 1.15vw, 16px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}
.pg-flow-step i {
  font-style: normal;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-3);
}
.pg-flow-arrow {
  flex: none;
  align-self: center;
  font-size: 14px;
  line-height: 1;
  color: var(--ink-3);
}
.pg-flow-note {
  margin-top: clamp(14px, 2vh, 22px);
  padding-top: clamp(10px, 1.5vh, 14px);
  border-top: 1px solid var(--line);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.85;
  color: var(--ink-2);
}
.pg-flow-note b { font-weight: 500; color: var(--ink); }

/* 屏底「一条坡道」：把三类人群 · 三个模式串成 学会 → 练好 → 爱上 */
.ins-ladder {
  margin-top: clamp(16px, 2.4vh, 28px);
  border: 1px solid var(--line);
  background: #fff;
  padding: clamp(14px, 2vh, 24px) clamp(15px, 1.7vw, 26px);
}
.ins-ladder-k {
  display: block;
  padding-bottom: clamp(10px, 1.5vh, 14px);
  border-bottom: 1px solid rgba(10, 10, 10, 0.16);
  color: var(--ink-3);
}
.ins-ladder-k b { font-weight: 400; color: var(--ink-2); }
.ins-ladder-steps {
  margin-top: clamp(12px, 1.8vh, 20px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(10px, 1.6vw, 24px);
  align-items: start;
}
.ins-ladder-step {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.ins-ladder-no {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}
.ins-ladder-no i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}
.ins-ladder-step.l-a .ins-ladder-no i { background: #5b7cfa; }
.ins-ladder-step.l-b .ins-ladder-no i { background: #e0a13c; }
.ins-ladder-step.l-c .ins-ladder-no i { background: #ee7a5f; }
.ins-ladder-step > b {
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1;
  font-weight: 200;
  letter-spacing: -0.005em;
}
.ins-ladder-step > i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.ins-ladder-step > span:last-child {
  font-size: clamp(11.5px, 0.98vw, 13.5px);
  line-height: 1.7;
  color: var(--ink-2);
}
/* 级间箭头：左低右高的一条坡道 */
.ins-ladder-arrow {
  margin-top: clamp(6px, 1.1vh, 12px);
  font-size: 13px;
  line-height: 1;
  color: var(--ink-3);
}
.ins-ladder-loop {
  margin-top: clamp(12px, 1.8vh, 20px);
  padding-top: clamp(10px, 1.5vh, 14px);
  border-top: 1px solid var(--line);
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.85;
  color: var(--ink-2);
}
.ins-ladder-loop b { color: var(--ink); font-weight: 500; }

/* —— 优先级表：副行说明 + 强度条 + 覆盖状态（痛点表 / 人群表共用） —— */
/* min-width:0 —— .pg-ins 是 column flex，若不收窄，flex item 会被 min-width:auto 撑到表格宽度，
   整屏跟着变宽、overflow-x 失效；收窄后表格在自己内部横向滚动。 */
.ins-tb-wrap {
  overflow-x: auto;
  min-width: 0;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.ins-tb {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(12.5px, 1.05vw, 14.5px);
}
.ins-tb th,
.ins-tb td {
  border-bottom: 1px solid var(--line);
  padding: clamp(8px, 1.2vh, 12px) 12px;
  text-align: left;
  vertical-align: top;
}
.ins-tb thead th {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  font-weight: 400;
  white-space: nowrap;
  border-bottom: 1px solid rgba(10, 10, 10, 0.16);
}
.ins-tb th:first-child,
.ins-tb td:first-child { padding-left: 0; width: 24%; min-width: 13em; }
.ins-tb th:last-child,
.ins-tb td:last-child { padding-right: 0; }
.ins-tb-k { font-weight: 500; color: var(--ink); }
.ins-tb-k em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: clamp(11px, 0.9vw, 12px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-3);
}
.ins-tb-sev { white-space: nowrap; }
/* 单元格内分条：长定义拆成短句，量产方不用在长句里找按法 */
.ins-tb-lines { list-style: none; margin: 0; padding: 0; }
.ins-tb-lines li {
  position: relative;
  padding-left: 13px;
}
.ins-tb-lines li + li { margin-top: 6px; }
.ins-tb-lines li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.32);
}
.ins-tb-lines b { font-weight: 500; color: var(--ink); }
/* 本机行：浅底色，与竞品行区分（不改线条粗细） */
.ins-tb tr.self td { background: rgba(10, 10, 10, 0.05); }
.ins-tb tr.self td:first-child { padding-left: 11px; }
.ins-tb tr.self td:last-child { padding-right: 11px; }
.ins-bar { display: inline-flex; align-items: center; gap: 8px; }
.ins-bar i {
  display: block;
  width: 46px; height: 4px;
  background: var(--line);
  position: relative;
}
.ins-bar i::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  height: 100%;
}
.ins-bar.h i::after { width: 92%; background: #d94f3d; }
.ins-bar.m i::after { width: 60%; background: #e0a13c; }
.ins-bar b { font-size: 10.5px; font-weight: 400; color: var(--ink-3); }
.ins-cover {
  font-style: normal;
  white-space: nowrap;
  font-size: 10.5px;
  border-radius: 100px;
  padding: 1px 9px;
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.ins-cover.solved { color: #2f8f63; border-color: #cfe6d8; background: #f2f7f4; }
.ins-cover.part { color: #b8801d; border-color: #f0e2c6; background: #fdf8ee; }
.ins-cover.open { color: #d94f3d; border-color: #f2d6d0; background: #fdf3f1; }
.ins-tb-ans { color: var(--ink-2); }
.ins-tb-ans b { font-weight: 500; color: var(--ink); border-bottom: 1px solid rgba(10, 10, 10, 0.35); }
.ins-tb .ins-dots { white-space: nowrap; }

/* —— 底部证据条：把「痛点 → 答案」压成可比较的两列 —— */
.ins-foot {
  margin-top: clamp(14px, 2.2vh, 26px);
  border-top: 1px solid rgba(10, 10, 10, 0.16);
  padding-top: clamp(10px, 1.6vh, 16px);
}
.ins-foot-k {
  display: block;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-3);
  margin-bottom: clamp(7px, 1.1vh, 11px);
}
.ins-foot-k b { font-weight: 400; color: var(--ink-2); }
.ins-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(6px, 1vh, 10px) clamp(18px, 3vw, 44px);
}
.ins-rows.one { grid-template-columns: 1fr; }
/* 纵向：标签 + 徽标一行，内容整宽落在下一行，条目单列堆叠 */
.ins-rows.stack { grid-template-columns: 1fr; }
.ins-rows.stack li {
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
}
.ins-rows.stack b { min-width: 0; }
.ins-rows.stack .ins-ans { flex: 1 1 100%; }
.ins-rows li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: clamp(12.5px, 1.05vw, 14.5px);
  line-height: 1.6;
  color: var(--ink-2);
  min-width: 0;
}
.ins-rows b {
  flex: none;
  min-width: 8.5em;
  color: var(--ink);
  font-weight: 500;
}
.ins-rows .ins-ans { min-width: 0; }
.ins-tag {
  flex: none;
  font-size: 10.5px;
  line-height: 1.6;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 1px 8px;
  color: var(--ink-2);
}
.ins-tag.h { color: #d94f3d; border-color: #f2d6d0; background: #fdf3f1; }
.ins-tag.m { color: #b8801d; border-color: #f0e2c6; background: #fdf8ee; }
.ins-tag.s { color: #2f8f63; border-color: #cfe6d8; background: #f2f7f4; }
.ins-dots { flex: none; letter-spacing: 0.12em; color: var(--ink); }
.ins-dots s { color: #dcdcdc; text-decoration: none; }

/* —— 主张屏：一句话 + 顺序说明 —— */
.ins-thesis {
  margin-top: clamp(16px, 2.6vh, 30px);
  border: 1px solid var(--line);
  background: var(--paper);
  padding: clamp(20px, 3vh, 38px) clamp(18px, 2vw, 34px);
}
.ins-thesis-k {
  display: block;
  color: var(--ink-3);
  margin-bottom: clamp(12px, 1.8vh, 18px);
}
.ins-thesis-big {
  font-size: clamp(19px, 2vw, 30px);
  line-height: 1.55;
  font-weight: 200;
  max-width: var(--board);
}
.ins-thesis-big b { font-weight: 500; border-bottom: 1px solid rgba(10, 10, 10, 0.4); }
.ins-thesis-note {
  margin-top: clamp(12px, 1.8vh, 18px);
  font-size: clamp(13px, 1.08vw, 15px);
  line-height: 1.8;
  color: var(--ink-2);
  max-width: var(--board);
}
.ins-thesis-note b { color: var(--ink); font-weight: 500; }

/* —— 结尾屏：正文讲完后回扣「一句话定位」，末尾加一条收束线 —— */
.pg-outro-tail {
  margin-top: clamp(14px, 2.4vh, 28px);
  padding-top: clamp(12px, 1.8vh, 20px);
  border-top: 1px solid var(--line);
  font-size: clamp(13px, 1.08vw, 15px);
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

/* —— 洞察屏窄屏线性化：内容改为自然纵向滚动 —— */
@media (max-width: 820px) {
  .ins-stage { grid-template-columns: 1fr; }
  .ins-stage.cols-harm { grid-template-columns: 1fr; }
  .ins-stage.cols-two { grid-template-columns: 1fr; }
  .ins-personas { grid-template-columns: 1fr; }
  .ins-rows { grid-template-columns: 1fr; }
  .ins-rows b { min-width: 0; }
  .ins-title { font-size: clamp(22px, 6.4vw, 32px); }
  .ins-name { font-size: clamp(22px, 6vw, 30px); }
  /* 优先级表：保持四列可比较，改为横向滚动查看 */
  .ins-tb { min-width: 620px; }
  .ins-pains li { padding-right: 0; }
  .ins-sev { position: static; display: inline-block; margin-left: 8px; }
  /* 人群 · 模式 · 意图：坡道改单列，级间箭头收掉、改用分隔线 */
  .ins-ladder-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ins-ladder-arrow { display: none; }
  .ins-ladder-step { padding: clamp(11px, 1.8vh, 16px) 0; }
  .ins-ladder-step + .ins-ladder-step { border-top: 1px solid var(--line); }
}