/* 作品展示页 · 设计语言沿用 IP 配色：黑、米白、铁锈红、藏青、金 */
:root {
  --ink: #1A1A1A;
  --paper: #F3EDE4;
  --paper-2: #EAE2D6;
  --rust: #B5502F;
  --navy: #2C3550;
  --gold: #C9A25A;
  --dark: #111216;
  --line: rgba(26, 26, 26, .14);
  --serif: "Noto Serif SC", "Songti SC", serif;
  --latin: "Instrument Serif", "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --sans: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --card-w: clamp(240px, 30vw, 440px);   /* v1.29：缩小后右边的小人接不到，恢复原大小 */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: none; }
button { font: inherit; color: inherit; }
a { color: inherit; }

/* 小人层：盖在所有内容上面，但不挡点击（点击由脚本判断是否点中小人） */
.dollfall {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 40;
}

/* ---------- 顶部导航 ---------- */
.nav {
  /* 头部在页面最上面，跟着页面一起滚走，不固定 */
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--gutter);
}
.brand { display: flex; align-items: center; text-decoration: none; }
.brand { gap: 14px; margin: 8px 0 0 -12px; }   /* 往左、往下挪一点，视觉中心对下面那行字 */
/* 品薇给的新头图（10-15 第二版）：头像一张整图（含 Hi 和挥手符号，不拆）+ 文字一张。
   每隔 7 秒头像整体轻轻晃两下，像挥手；字不弹 */
.brand img { width: auto; display: block; }
.brand-avatar { height: 64px; transform-origin: 50% 100%; animation: brandWave 7s ease-in-out infinite; }
.brand-text { height: 44px; }
@keyframes brandWave { 0%, 9% { transform: rotate(0); } 2% { transform: rotate(-4deg); } 4.5% { transform: rotate(3deg); } 7% { transform: rotate(-2deg); } }
.brand em { font-family: var(--latin); font-style: italic; font-weight: 400; font-size: 19px; opacity: .6; }
.brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rust); box-shadow: 14px 0 0 -2px var(--gold); margin-right: 12px; }
.nav-links { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(26, 26, 26, .06); }
.nav-links a { text-decoration: none; font-size: 14px; padding: 7px 14px; border-radius: 999px; transition: background .2s; }
.nav-links a b { font-family: var(--mono); font-weight: 400; font-size: 11px; opacity: .45; margin-right: 6px; }
.nav-links a:hover { background: var(--paper); }
.nav-cta { text-decoration: none; font-size: 14px; padding: 9px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); }

/* ---------- 回到顶部 ---------- */
.to-top {
  position: fixed; right: var(--gutter); bottom: 28px; z-index: 45;
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center; gap: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; line-height: 1;
  box-shadow: 0 10px 24px -10px rgba(26, 26, 26, .6);
  opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .3s, transform .3s, background .2s;
}
.to-top.on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--rust); }
.to-top b { font-size: 16px; font-weight: 400; margin-bottom: -6px; }

/* ---------- 首屏 ---------- */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  padding: 0 var(--gutter);
  display: flex; flex-direction: column; justify-content: flex-start;
}
.hero-copy { max-width: 50vw; padding-top: 200px;   /* 文字块顶到小标签下方 */ position: relative; z-index: 2; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: rgba(26, 26, 26, .62);
  margin: 0 0 28px;
}
/* 首屏的小标签放到顶部，和右上角 PENNY DREAM ARCHIVE 对齐 */
.hero > .eyebrow { position: absolute; left: var(--gutter); top: 110px; margin: 0; line-height: 1.6; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--rust); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(181, 80, 47, 0); } 0% { box-shadow: 0 0 0 0 rgba(181, 80, 47, .45); } }
.hero h1 {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(36px, 5vw, 80px);
  line-height: 1.12; letter-spacing: -.02em;
  margin: 0;
}
/* 小字一行、大字一行交错：「关心 / 它看起来怎么样，/ 也关心 / 它为什么存在。」 */
.h-small {
  display: block; width: max-content;
  font-size: .32em; font-weight: 600; letter-spacing: .14em;
  color: rgba(26, 26, 26, .6);
  margin: 0 0 .12em .06em;
}
.h-big + .h-small { margin-top: .95em; }   /* 「也关心它」和上一行拉开一点 */
.h-big { display: block; white-space: nowrap; }

.hero h1 .hl { position: relative; color: var(--rust); }
.hero h1 .hl::after {
  content: ""; position: absolute; left: 2%; right: 2%; bottom: .06em; height: .12em;
  background: var(--gold); opacity: .35; border-radius: 4px; z-index: -1;
}
.lede { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.85; color: rgba(26, 26, 26, .72); max-width: 34em; margin: 30px 0 40px; }
.beliefs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 640px; border-top: 1px solid var(--line); }
.beliefs li { padding: 16px 18px 0 0; display: grid; gap: 4px; }
.beliefs li + li { padding-left: 18px; border-left: 1px solid var(--line); }
.beliefs b { font-family: var(--mono); font-weight: 400; font-size: 11px; color: var(--rust); }
.beliefs strong { font-family: var(--serif); font-size: 20px; }
.beliefs span { font-size: 13px; color: rgba(26, 26, 26, .6); line-height: 1.6; }

/* 货架线：桌面端由脚本对齐到「三条产品观」上方那条线，往右延伸；线本身隐形，小人站在上面 */
.shelf {
  position: absolute; left: 50%; right: var(--gutter); top: 80%;
  height: 1px; background: transparent;   /* 隐形：小人照样落在这条线上，但看不见 */
}
.hero-tag {
  position: absolute; right: var(--gutter); top: 110px;
  display: grid; justify-items: end; gap: 6px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: rgba(26, 26, 26, .5);
}
.hero-tag span:first-child { color: var(--navy); font-weight: 500; }
.pour {
  position: absolute; right: var(--gutter); top: 166px; z-index: 41;
  border: 1px solid var(--line); background: var(--paper); border-radius: 999px;
  padding: 8px 16px; font-size: 13px; cursor: pointer; transition: background .2s, color .2s;
}
.pour:hover { background: var(--ink); color: var(--paper); }
.scroll-cue {
  position: absolute; left: var(--gutter); bottom: 28px; margin: 0;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12px; color: rgba(26, 26, 26, .5);
}
.scroll-cue i { width: 48px; height: 1px; background: currentColor; position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--rust); transform: translateX(-100%); animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 60%, 100% { transform: translateX(100%); } }

/* 首屏到 01 的间隔减半（10-15 品薇）：01 往上提，提多少随屏高走；首屏本身仍是一屏高，小人的货架线不受影响 */
.sec.fun { margin-top: calc(-100vh + 842px); }   /* v1.22：编号行；v1.24 再下移 36px，让「有趣」大字上沿顶到她的红线 */   /* 10-15 再提：01 的编号那行贴到品薇画的红线 */
/* 01 右侧说明顶到大标题上沿那根线（10-15 品薇）：编号一行、大字一行，说明和大字同一行、顶对齐 */
.fun .sec-head { align-items: start; }
.fun .sec-mark { display: contents; }
.fun .sec-index { grid-row: 1; grid-column: 1; }
.fun .sec-word { grid-row: 2; grid-column: 1; }
.fun .sec-desc { grid-row: 2; grid-column: 2; align-self: start; padding-bottom: 0; }

/* ---------- 通用板块标题：编号 + 两个字的大标题 + 右侧说明 ---------- */
/* 板块之间的间距统一 200px（10-15 品薇：下面所有间距和首屏到 01 的一致）：上 120 + 下 80 */
.sec { padding: 120px 0 80px; position: relative; }
.sec-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end;
  padding: 0 var(--gutter); margin-bottom: clamp(40px, 6vh, 72px);
}
/* v1.23（10-15 品薇）：五个板块左上角的编号小字统一成首屏「个人作品展示 · Selected Works」的样子（等宽 13px、灰），和大字的间距都按 02 有根的来（8px） */
.sec-index { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; margin: 0 0 8px; color: rgba(26, 26, 26, .62); }
.sec-index b { font-weight: 400; color: var(--rust); }   /* v1.24：编号数字保持红色 */
.sec-index i { font-style: normal; color: var(--rust); opacity: .4; }
.sec-index em { font-family: var(--mono); font-style: normal; font-size: 13px; letter-spacing: .04em; color: inherit; opacity: 1; }
.sec-word {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(96px, 15vw, 220px); line-height: .9; letter-spacing: .02em;
  margin: 0;
}
.sec-desc { max-width: 520px; justify-self: end; padding-bottom: 12px; }
.sec-desc h3 { font-family: var(--serif); font-weight: 700; font-size: clamp(22px, 2vw, 30px); line-height: 1.4; margin: 0 0 14px; }
.sec-desc p { font-size: 16px; line-height: 1.85; color: rgba(26, 26, 26, .7); margin: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px !important; }
.tags span { font-family: var(--mono); font-size: 12px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; }

/* ---------- 01 有趣 · 画廊 ---------- */
.strip { overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; padding: 8px 0 6px; }
.strip.dragging { cursor: grabbing; }
.track { display: flex; gap: clamp(16px, 2vw, 32px); padding: 0 var(--gutter); width: max-content; will-change: transform; }
.card { width: var(--card-w); flex: none; }
.card[data-fx="moto"] { width: calc(var(--card-w) * .889); }   /* 海报 2:3，收窄到和别的卡一样高 */
.stage {
  position: relative; aspect-ratio: 3 / 4; border-radius: clamp(18px, 2vw, 30px); overflow: hidden;
  background: #241a3a; isolation: isolate;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 24px 50px -30px rgba(44, 53, 80, .55);
  transform: translateZ(0);
}
.layer { position: absolute; pointer-events: none; }
.layer.bg { inset: 0; width: 100%; height: 100%; }
canvas.layer { inset: 0; width: 100%; height: 100%; }
.label { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; padding: 16px 4px 0; }
.label strong { font-family: var(--latin); font-weight: 400; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: .01em; }
.label span { font-family: var(--serif); font-size: 14px; color: rgba(26, 26, 26, .62); grid-row: 2; }
.label em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--rust); grid-row: 1 / span 2; grid-column: 2; align-self: center; white-space: nowrap; }

/* 各张卡的主体位置（按原海报站位对齐） */
.moon-penny { width: 62%; left: 20%; bottom: 0%; transform-origin: 50% 90%; }
.moon-pet { width: 17%; left: 8%; top: 52%; }
.ocean-mermaid { inset: 0; width: 100%; height: 100%; transform-origin: 55% 55%; }
.ocean-jelly { width: 16%; left: 70%; top: 30%; opacity: .9; }
.moto-bg { object-position: 50% 40%; }
.moto-rider { width: 98%; left: 1%; top: 33%; transform-origin: 50% 80%; }
.moto-pet { width: 18%; left: 76%; top: 64%; }
.romance-penny { width: 108%; left: -10%; top: 15%; transform-origin: 50% 85%; }

/* 探险镜头 */
.lens {
  position: absolute; left: 0; top: 0; width: 40%; aspect-ratio: 1; border-radius: 50%;
  pointer-events: none; background-repeat: no-repeat;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 9px rgba(124, 92, 255, .35), 0 18px 40px rgba(20, 10, 50, .5);
  will-change: transform;
}
.lens i, .lens::before, .lens::after { content: ""; position: absolute; background: rgba(255, 255, 255, .75); }
.lens::before { left: 50%; top: 8%; bottom: 8%; width: 1px; }
.lens::after { top: 50%; left: 8%; right: 8%; height: 1px; }
.lens i { inset: 38%; border-radius: 50%; background: none; border: 1px dashed rgba(255, 255, 255, .8); }

/* 盒子：小人画在背景和盒子前板之间，才像装进去了 */
.card-box .stage { box-shadow: 0 0 0 2px var(--gold), 0 24px 60px -24px rgba(90, 50, 200, .6); }
.box-front { position: absolute; left: 10.69%; top: 75.31%; width: 79.26%; height: 20.69%; pointer-events: none; }
.card-box { position: relative; }
/* 静止时盖在动态画面上的成品海报；移进卡片就淡出 */
.rest-poster { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 20; pointer-events: none; transition: opacity .45s ease; }
.rest-poster.off { opacity: 0; }
/* 收藏盒上方的提示气泡：贴纸感，轻轻弹跳，箭头左右晃 */
.catch-tip {
  position: relative; width: max-content; margin-top: 20px;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 6px 14px 6px 6px; border-radius: 999px;
  background: #FFF8EC; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-size: 13px; font-weight: 700; color: var(--ink);
  animation: tipBob 1.6s ease-in-out infinite;
  transition: opacity .4s, transform .4s; pointer-events: none;
}
.catch-tip::after {
  content: ""; position: absolute; left: 34px; top: 100%; width: 12px; height: 12px; margin-top: -5px;
  background: #FFF8EC; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg);
}
.catch-tip img { width: 30px; height: 30px; border-radius: 50%; background: #E9DDFF; }
.catch-tip span { display: grid; line-height: 1.35; }
.catch-tip b { display: block; font-weight: 700; }
.catch-tip small { font-size: 11px; font-weight: 500; color: rgba(26, 26, 26, .62); }
.catch-tip i { font-style: normal; color: var(--rust); display: inline-block; animation: nudgeL 1s ease-in-out infinite; }
.catch-tip i:last-child { animation-name: nudgeR; }
.catch-tip.gone { opacity: 0; animation: none; transform: translateY(6px); }
@keyframes tipBob { 50% { translate: 0 -4px; } }
@keyframes nudgeL { 50% { transform: translateX(-4px); } }
@keyframes nudgeR { 50% { transform: translateX(4px); } }
.box-hint {
  position: absolute; left: 0; right: 0; top: 55%; margin: 0; text-align: center;
  font-family: var(--mono); font-size: 13px; line-height: 1.7; color: #fff; letter-spacing: .04em;
  text-shadow: 0 2px 12px rgba(30, 10, 80, .8);
  transition: opacity .4s;
}
.box-hint.done { color: var(--gold); }

.strip-foot { display: flex; align-items: center; gap: 20px; padding: 24px var(--gutter) 0; flex-wrap: wrap; }   /* v1.25：箭头 + 收藏图鉴这一行整体下移 20px，离上面的卡片文字松一点 */
.arrows { display: flex; gap: 8px; }
.arrows button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 18px; transition: background .2s, color .2s; }
.arrows button:hover { background: var(--ink); color: var(--paper); }
.dex-label { font-family: var(--mono); font-size: 12px; color: rgba(26, 26, 26, .5); margin: 0 0 0 auto; }
.dex { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.dex li { width: 30px; height: 30px; border-radius: 50%; background: var(--paper-2); display: grid; place-items: center; overflow: hidden; transition: background .3s; }
.dex li img { width: 30px; height: 30px; filter: grayscale(1) brightness(.6) opacity(.25); transition: filter .4s, transform .4s; }
.dex li.got { background: #fff; }
.dex li.got img { filter: none; transform: scale(1.12); }

/* ---------- 02 有根 · 整块深色区 ---------- */
.root { padding-left: var(--gutter); padding-right: var(--gutter); }
.dark {
  background: var(--dark); color: #F3EDE4;
  border-radius: clamp(24px, 3.4vw, 52px);
  padding: clamp(48px, 7vw, 96px) 0 clamp(24px, 3vw, 44px);
}
.dark .sec-head { padding: 0 clamp(20px, 3.4vw, 48px); }
.dark .sec-index { color: rgba(243, 237, 228, .62); }
.dark .sec-word { color: #F3EDE4; }
.dark .sec-desc p { color: rgba(243, 237, 228, .66); }
.seg {
  display: flex; width: max-content; max-width: calc(100% - 32px); margin: 0 auto 28px;
  padding: 6px; border-radius: 16px; background: #1D1F25; gap: 4px;
}
.seg button {
  border: 0; background: transparent; color: rgba(243, 237, 228, .6); cursor: pointer;
  padding: 12px clamp(16px, 2.4vw, 32px); border-radius: 11px; font-size: clamp(14px, 1.3vw, 18px);
  transition: background .25s, color .25s;
}
.seg button[aria-selected="true"] { background: #050506; color: #F3EDE4; }
.panel {
  margin: 0 clamp(12px, 2.4vw, 36px);
  background: #191A1F; border-radius: clamp(18px, 2.4vw, 32px);
  display: grid; grid-template-columns: minmax(260px, 4fr) 7fr; gap: clamp(20px, 3vw, 48px); align-items: end;
  padding: clamp(18px, 2.6vw, 40px);
}
.panel-copy { padding: 0 0 8px clamp(4px, 1.6vw, 24px); }
.panel-copy h4 { font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 2.6vw, 40px); margin: 0 0 16px; }
.panel-copy p { font-size: 16px; line-height: 1.85; color: rgba(243, 237, 228, .66); margin: 0 0 24px; }
.panel-meta { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 10px; font-size: 14px; }
.panel-meta li { display: flex; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(243, 237, 228, .1); }
.panel-meta span { font-family: var(--mono); font-size: 12px; color: var(--gold); width: 3.5em; flex: none; padding-top: 2px; }
.btn {
  display: inline-flex; gap: 10px; align-items: center; text-decoration: none;
  background: #F3EDE4; color: var(--ink); padding: 14px 26px; border-radius: 12px; font-size: 16px; font-weight: 600;
  transition: transform .2s, background .2s;
}
.btn:hover { transform: translateY(-2px); background: #fff; }
.window { border-radius: 14px; overflow: hidden; background: #0B0C0F; box-shadow: 0 0 0 1px rgba(243, 237, 228, .1), 0 30px 60px -30px #000; }
.window-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #1E2026; font-family: var(--mono); font-size: 12px; color: rgba(243, 237, 228, .5); }
.window-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3A3D45; }
.window-bar .url { margin-left: 10px; }
.window-bar .live { margin-left: auto; color: #7BE0A8; display: flex; align-items: center; gap: 6px; }
.window-bar .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.window-body { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.window-body iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; border: 0; transform-origin: 0 0; background: #111216; }

/* ---------- 03 有用 · 案例：左边是痛点（大字），右边是怎么做的 ---------- */
.cases { padding: 0 var(--gutter); display: grid; }
.case { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 72px); padding: clamp(36px, 5vw, 64px) 0; border-top: 1px solid rgba(26, 26, 26, .55); }
.case:last-child { border-bottom: 1px solid rgba(26, 26, 26, .55); }
.case-tag { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--rust); margin: 0 0 18px; }
.case-tag b { font-weight: 500; color: var(--ink); margin-right: 14px; }
.case h4 { font-family: var(--serif); font-weight: 900; font-size: clamp(28px, 3.2vw, 48px); line-height: 1.3; margin: 0 0 22px; letter-spacing: -.01em; }
.case-name { font-family: var(--serif); font-size: 20px; margin: 0; color: rgba(26, 26, 26, .55); }
.case-name::before { content: "— "; }
.case-body ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 20px; }
.case-body li { font-size: 15px; line-height: 1.85; color: rgba(26, 26, 26, .7); }
.case-body li strong { display: block; font-family: var(--serif); font-size: 18px; color: var(--ink); margin-bottom: 4px; }
.case-status { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; color: rgba(26, 26, 26, .6); margin: 0; }
.case-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; }
.case-status a { color: var(--rust); text-decoration: none; }

/* ---------- 03 有用 · 占位 ---------- */
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 0 var(--gutter); }
.slot { aspect-ratio: 4 / 3; border: 1.5px dashed rgba(26, 26, 26, .2); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.slot span { font-family: var(--mono); font-size: 12px; color: rgba(26, 26, 26, .45); }
.slot strong { font-family: var(--serif); font-size: clamp(20px, 2vw, 28px); }

.end { padding: 80px var(--gutter) 160px; text-align: center; }
.sign { font-family: var(--serif); font-size: clamp(18px, 2vw, 26px); margin: 0 0 10px; }
.small { font-family: var(--mono); font-size: 12px; color: rgba(26, 26, 26, .5); margin: 0; }


/* ---------- 居中标题（04、05 用） ---------- */
.center-head { text-align: center; padding: 0 var(--gutter); position: relative; z-index: 2; }
.center-head .sec-index { margin-bottom: 8px; }
.center-title { font-family: var(--serif); font-weight: 900; font-size: clamp(48px, 7vw, 104px); line-height: 1.05; letter-spacing: .02em; margin: 0; }
.center-sub { font-size: clamp(15px, 1.3vw, 19px); line-height: 1.8; color: rgba(26, 26, 26, .62); margin: 20px auto 30px; max-width: 32em; }
.chips { display: inline-flex; gap: 4px; padding: 5px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .5); }
.chips button { border: 0; background: transparent; padding: 9px 18px; border-radius: 10px; cursor: pointer; font-size: 14px; color: rgba(26, 26, 26, .6); transition: background .2s, color .2s; }
.chips button[aria-selected="true"] { background: var(--ink); color: var(--paper); }

/* ---------- 04 探索好奇 ---------- */
.xgrid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px);
  padding: clamp(48px, 7vh, 80px) var(--gutter) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.xt {
  grid-column: var(--c); grid-row: var(--r);
  position: relative; aspect-ratio: 3 / 2; border-radius: 18px; overflow: hidden;
  background: #FBF8F3; box-shadow: 0 0 0 1px rgba(26, 26, 26, .06);
  animation: bob 6s ease-in-out infinite; animation-delay: calc(var(--r) * -1.3s);
  transition: opacity .4s, filter .4s, transform .3s;
}
.xt:nth-child(even) { animation-duration: 7s; }
.xt.dim { opacity: .18; filter: grayscale(1); }
@keyframes bob { 50% { translate: 0 -8px; } }
.xt footer {
  position: absolute; left: 12px; right: 12px; bottom: 10px;
  display: flex; align-items: baseline; gap: 8px;
  opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
}
.xt:hover footer, .xt:focus-within footer { opacity: 1; transform: none; }
.xt footer strong { font-family: var(--serif); font-size: 15px; }
.xt footer span { font-size: 12px; color: rgba(26, 26, 26, .55); }
.demo { position: absolute; inset: 0; }

/* 拾片：三张图飞进收纳盒 */
.d-pick { background: #EFE7DB; }
.d-pick i { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 8px; top: 18%; animation: pick 3.6s ease-in-out infinite; box-shadow: 0 6px 14px rgba(0,0,0,.12); }
.d-pick i:nth-child(1) { left: 14%; background: linear-gradient(135deg, #C9A25A, #B5502F); }
.d-pick i:nth-child(2) { left: 39%; background: linear-gradient(135deg, #2C3550, #6F7BA8); animation-delay: .25s; }
.d-pick i:nth-child(3) { left: 64%; background: linear-gradient(135deg, #8A5A3C, #E1B98F); animation-delay: .5s; }
.d-pick b { position: absolute; left: 30%; right: 30%; bottom: 14%; height: 18%; border-radius: 0 0 10px 10px; background: var(--ink); }
@keyframes pick { 0%, 15% { transform: none; opacity: 1; } 55% { transform: translate(var(--tx, 40%), 150%) scale(.35); opacity: 1; } 60%, 100% { transform: translate(var(--tx, 40%), 170%) scale(.3); opacity: 0; } }
.d-pick i:nth-child(1) { --tx: 120%; } .d-pick i:nth-child(3) { --tx: -120%; } .d-pick i:nth-child(2) { --tx: 0; }

/* 公众号排版：乱的文字行变整齐 */
.d-type { background: #fff; display: grid; place-items: center; }
.d-type p { width: 56%; margin: 0; display: grid; gap: 9px; }
.d-type i { display: block; height: 7px; border-radius: 4px; background: #D9D2C6; animation: tidy 3.2s ease-in-out infinite alternate; }
.d-type i:nth-child(1) { height: 12px; background: var(--rust); width: 60%; --w0: 30%; --x0: 40%; }
.d-type i:nth-child(2) { --w0: 70%; --x0: 20%; } .d-type i:nth-child(3) { --w0: 40%; --x0: -10%; }
.d-type i:nth-child(4) { --w0: 90%; --x0: 12%; } .d-type i:nth-child(5) { width: 70%; --w0: 30%; --x0: 50%; }
@keyframes tidy { 0%, 20% { width: var(--w0); transform: translateX(var(--x0)) rotate(-2deg); } 80%, 100% { transform: none; } }

/* 轻排：选中文章并复制 → 落进模板 → 点样式2 → 点「复制到公众号」（循环 5s） */
.d-qp { background: #fff; inset: 0 0 27% 0; container-type: inline-size; --t: 5s; }
.d-qp > * { position: absolute; }
.d-qp s, .d-qp u, .d-qp i { text-decoration: none; display: block; }
.qd-doc { left: 5%; top: 12%; width: 29%; height: 70%; border-radius: 6px; background: #F4F0E8; padding: 6% 5%; display: grid; align-content: start; gap: 11%; }
.qd-doc s { height: 5px; width: 50%; border-radius: 3px; background: #8C8478; }
.qd-doc u { height: 4px; border-radius: 2px; background: #CFC6B8; } .qd-doc u:nth-of-type(2) { width: 80%; } .qd-doc u:nth-of-type(4) { width: 60%; }
.qd-sel { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: rgba(181, 80, 47, .22); animation: qSel var(--t) infinite; }
.qd-doc kbd { right: -2%; bottom: -7%; position: absolute; font: 600 2.3cqw var(--mono); color: #fff; background: var(--ink); border-radius: 5px; padding: .6cqw 1.4cqw; opacity: 0; animation: qKey var(--t) infinite; }
.qd-arrow { left: 35%; top: 36%; font-size: 4.5cqw; color: var(--rust); opacity: 0; animation: qArrow var(--t) infinite; }
.qd-win { left: 41%; top: 8%; width: 55%; height: 84%; border-radius: 7px; background: #EFE9DE; box-shadow: 0 10px 22px rgba(0,0,0,.10); overflow: hidden; opacity: 0; transform-origin: 20% 50%; animation: qWin var(--t) infinite; }
.qw-bar { height: 17%; background: #E4DBCB; display: flex; align-items: center; gap: 3px; padding: 0 3%; }
.qw-bar > i { width: 4px; height: 4px; border-radius: 50%; background: #C9BFAD; }
.qw-copy { position: relative; margin-left: auto; height: 74%; min-width: 31%; border-radius: 4px; background: var(--ink); color: #fff; font-size: 2.3cqw; display: grid; place-items: center; white-space: nowrap; padding: 0 2%; animation: qBtn var(--t) infinite; }
.qw-copy em, .qw-copy strong { font-style: normal; font-weight: 500; grid-area: 1 / 1; }
.qw-copy strong { opacity: 0; animation: qOk var(--t) infinite; } .qw-copy em { animation: qOkOut var(--t) infinite; }
.qw-body { height: 83%; display: grid; grid-template-columns: 1fr 34%; gap: 4%; padding: 4%; }
.qw-paper { border-radius: 5px; background: #fff; padding: 8% 9%; display: grid; align-content: start; gap: 9%; animation: qPaper var(--t) infinite; }
.qw-paper > * { opacity: 0; animation: qIn var(--t) infinite; animation-delay: calc(var(--k, 0) * .07s); }
.qw-paper s { height: 5px; width: 65%; border-radius: 3px; background: var(--rust); animation-name: qIn, qTitle; animation-duration: var(--t); animation-iteration-count: infinite; }
.qw-paper i { height: 3px; border-radius: 2px; background: #D9D2C6; } .qw-paper i:nth-of-type(1) { --k: 1; } .qw-paper i:nth-of-type(2) { --k: 2; width: 80%; } .qw-paper i:nth-of-type(3) { --k: 4; } .qw-paper em { --k: 3; height: 24%; border-radius: 3px; background: linear-gradient(135deg, #C9A25A, #B5502F); animation-name: qIn, qPic; animation-duration: var(--t); animation-iteration-count: infinite; }
.qw-opts { display: grid; align-content: start; gap: 8%; }
.qw-opts b { font-weight: 500; font-size: 2.1cqw; text-align: center; padding: 6% 0; border-radius: 4px; background: #E4DBCB; color: #6b655b; animation: qChip var(--t) infinite; }
.qw-opts b:nth-child(1) { animation-name: qChip1; } .qw-opts b:nth-child(2) { animation-name: qChip2; }
.qd-cursor { left: 0; top: 0; width: 3.4cqw; height: 4.6cqw; background: var(--ink); clip-path: polygon(0 0, 0 100%, 28% 74%, 50% 100%, 66% 92%, 46% 66%, 90% 66%); filter: drop-shadow(0 0 0 #fff); animation: qCur var(--t) infinite; }
.xt-cta { margin-left: auto; align-self: center; font-style: normal; font-size: 12px; color: var(--rust); background: rgba(181, 80, 47, .12); border-radius: 99px; padding: 3px 11px; }
@keyframes qSel { 0%, 3% { width: 0; } 15%, 90% { width: 100%; } 97%, 100% { width: 0; } }
@keyframes qKey { 0%, 14% { opacity: 0; } 17%, 26% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes qArrow { 0%, 20% { opacity: 0; translate: -4px 0; } 26%, 34% { opacity: 1; translate: 0 0; } 40%, 100% { opacity: 0; } }
@keyframes qWin { 0%, 22% { opacity: 0; transform: scale(.9); } 30%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes qIn { 0%, 34% { opacity: 0; transform: translateY(4px); } 42%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes qTitle { 0%, 52% { background: var(--rust); } 56%, 100% { background: var(--navy); } }
@keyframes qPic { 0%, 52% { background: linear-gradient(135deg, #C9A25A, #B5502F); } 56%, 100% { background: linear-gradient(135deg, #2C3550, #8FA3D6); } }
@keyframes qPaper { 0%, 52% { background: #fff; } 56%, 100% { background: #EEF1F8; } }
@keyframes qChip1 { 0%, 30% { background: #E4DBCB; color: #6b655b; } 34%, 53% { background: var(--rust); color: #fff; } 56%, 100% { background: #E4DBCB; color: #6b655b; } }
@keyframes qChip2 { 0%, 53% { background: #E4DBCB; color: #6b655b; } 56%, 100% { background: var(--rust); color: #fff; } }
@keyframes qBtn { 0%, 72% { background: var(--ink); transform: none; } 74% { transform: scale(.9); } 77%, 100% { background: #07C160; transform: none; } }
@keyframes qOk { 0%, 74% { opacity: 0; } 78%, 100% { opacity: 1; } }
@keyframes qOkOut { 0%, 74% { opacity: 1; } 78%, 100% { opacity: 0; } }
/* 鼠标：选文章 → 复制 → 点样式2 → 点复制到公众号（位置按 .d-qp 百分比） */
@keyframes qCur {
  0% { left: 8%; top: 20%; opacity: 0; } 3% { left: 8%; top: 20%; opacity: 1; } 14% { left: 28%; top: 62%; }
  26% { left: 28%; top: 62%; } 40% { left: 83%; top: 34%; } 50% { left: 83%; top: 45%; }
  54% { left: 83%; top: 45%; transform: scale(.85); } 56% { transform: none; } 70% { left: 83%; top: 14%; }
  73% { left: 83%; top: 14%; transform: scale(.85); } 76% { transform: none; } 92% { left: 83%; top: 14%; opacity: 1; } 97%, 100% { left: 83%; top: 14%; opacity: 0; }
}

/* 拾片：粘贴链接 → 获取 → 选片段 → 一键转 GIF（循环 6s） */
.d-pk { background: #F4F5F4; inset: 0 0 27% 0; container-type: inline-size; --t: 6s; }
.d-pk > * { position: absolute; }
.pk-bar { left: 6%; right: 6%; top: 6%; height: 14%; display: flex; gap: 2.4%; }
.pk-in { flex: 1; border-radius: 5px; background: #fff; padding: 0 3%; display: flex; align-items: center; }
.pk-in u { display: block; height: 3px; width: 0; border-radius: 2px; background: #858B88; animation: pkUrl var(--t) infinite; }
.pk-go { width: 17%; border-radius: 5px; background: #171B19; color: #fff; font-size: 2.4cqw; display: grid; place-items: center; animation: pkGo var(--t) infinite; }
.pk-stage { left: 6%; right: 6%; top: 25%; height: 44%; border-radius: 6px; background: #E9EBEA; overflow: hidden; }
.pk-stage > * { position: absolute; }
.pk-load { left: 50%; top: 50%; width: 5cqw; height: 5cqw; margin: -2.5cqw 0 0 -2.5cqw; border-radius: 50%; border: 2px solid #D5D9D7; border-top-color: #171B19; opacity: 0; animation: pkLoad var(--t) infinite, pkSpin .6s linear infinite; }
.pk-video { inset: 0; background: linear-gradient(120deg, #2C3550, #B5502F 70%, #C9A25A); opacity: 0; animation: pkVid var(--t) infinite; }
.pk-video em { left: 50%; top: 46%; width: 7cqw; height: 7cqw; margin: -3.5cqw 0 0 -3.5cqw; position: absolute; border-radius: 50%; background: rgba(255,255,255,.88); clip-path: none; display: grid; }
.pk-video em::after { content: ""; position: absolute; left: 41%; top: 28%; border-left: 2.2cqw solid #171B19; border-top: 1.7cqw solid transparent; border-bottom: 1.7cqw solid transparent; }
.pk-video s { position: absolute; left: 4%; right: 4%; bottom: 8%; height: 3px; border-radius: 2px; background: rgba(255,255,255,.4); text-decoration: none; }
.pk-gif { right: 5%; top: 14%; width: 30%; aspect-ratio: 1; border-radius: 8px; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.2); opacity: 0; transform: scale(.6); animation: pkGif var(--t) infinite; overflow: hidden; }
.pk-gif i { position: absolute; inset: 0; background: linear-gradient(120deg, #B5502F, #C9A25A); animation: pkFrames .5s steps(1) infinite; }
.pk-gif b { position: absolute; left: 6%; top: 6%; z-index: 1; font: 700 2.2cqw var(--mono); background: #C5F53A; color: #171B19; border-radius: 3px; padding: .3cqw 1.2cqw; }
.pk-track { left: 6%; width: 58%; top: 75%; height: 8%; border-radius: 4px; background: #E1E4E2; opacity: 0; animation: pkTrack var(--t) infinite; }
.pk-range { position: absolute; top: -25%; bottom: -25%; left: 12%; width: 0; border-radius: 4px; background: rgba(197, 245, 58, .75); animation: pkRange var(--t) infinite; }
.pk-range i { position: absolute; top: 0; bottom: 0; width: 3px; background: #171B19; } .pk-range i:first-child { left: 0; } .pk-range i:last-child { right: 0; }
.pk-btn { right: 6%; top: 74%; height: 11%; width: 24%; border-radius: 5px; background: #C5F53A; color: #171B19; font-size: 2.3cqw; font-weight: 600; display: grid; place-items: center; opacity: 0; animation: pkBtn var(--t) infinite; }
.pk-btn em, .pk-btn strong { grid-area: 1 / 1; font-style: normal; font-weight: 600; white-space: nowrap; }
.pk-btn strong { opacity: 0; animation: pkOk var(--t) infinite; } .pk-btn em { animation: pkOkOut var(--t) infinite; }
@keyframes pkSpin { to { rotate: 1turn; } }
@keyframes pkFrames { 0% { background: linear-gradient(120deg, #B5502F, #C9A25A); } 33% { background: linear-gradient(120deg, #2C3550, #8FA3D6); } 66% { background: linear-gradient(120deg, #C9A25A, #F2E3B8); } }
@keyframes pkUrl { 0%, 3% { width: 0; } 12%, 94% { width: 78%; } 99%, 100% { width: 0; } }
@keyframes pkGo { 0%, 15% { background: #171B19; transform: none; } 17% { transform: scale(.9); background: #C5F53A; color: #171B19; } 21%, 100% { background: #171B19; color: #fff; transform: none; } }
@keyframes pkLoad { 0%, 17% { opacity: 0; } 20%, 31% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes pkVid { 0%, 31% { opacity: 0; } 36%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes pkTrack { 0%, 36% { opacity: 0; } 40%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes pkRange { 0%, 42% { width: 0; opacity: 1; } 62%, 94% { width: 52%; opacity: 1; } 99%, 100% { width: 0; opacity: 0; } }
@keyframes pkBtn { 0%, 52% { opacity: 0; transform: translateY(4px); } 58%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
@keyframes pkOk { 0%, 74% { opacity: 0; } 78%, 100% { opacity: 1; } }
@keyframes pkOkOut { 0%, 74% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes pkGif { 0%, 74% { opacity: 0; transform: scale(.6); } 80%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }
.pk-cursor { animation-name: pkCur; animation-duration: 6s; }
@keyframes pkCur {
  0% { left: 55%; top: 40%; opacity: 0; } 4% { left: 55%; top: 40%; opacity: 1; } 12% { left: 55%; top: 40%; } 15% { left: 80%; top: 15%; }
  16% { left: 80%; top: 15%; transform: scale(.85); } 18% { transform: none; } 40% { left: 80%; top: 15%; } 48% { left: 12%; top: 80%; }
  62% { left: 40%; top: 80%; } 70% { left: 40%; top: 80%; } 74% { left: 80%; top: 80%; transform: none; } 76% { left: 80%; top: 80%; transform: scale(.85); }
  78% { transform: none; } 94% { left: 80%; top: 80%; opacity: 1; } 99%, 100% { left: 80%; top: 80%; opacity: 0; }
}
.xt[data-tool] footer .xt-cta { position: absolute; }
/* 演示弹窗（没有真实可嵌入的工具时，把卡片里的演示放大） */
.tool-stage { flex: 1; display: grid; place-items: center; align-content: center; gap: 14px; background: #F4F5F4; padding: 24px; }
.tool-stage[hidden] { display: none; }
#toolClone { width: min(760px, 100%); aspect-ratio: 3 / 2.2; border-radius: 12px; overflow: hidden; position: relative; box-shadow: 0 0 0 1px rgba(26,26,26,.08); }
#toolClone .demo { inset: 0 !important; }
#toolNote { margin: 0; font-size: 13px; color: rgba(26,26,26,.55); }
 
/* 吐龙珠：宣传片封面 + 播放键 */
.d-vid { inset: 0 0 27% 0; background: #1B2230; overflow: hidden; }
.d-vid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.xt:hover .d-vid img { transform: scale(1.04); }
.vid-play { position: absolute; left: 50%; top: 50%; width: 15%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: rgba(255,255,255,.9); }
.vid-play::after { content: ""; position: absolute; left: 40%; top: 28%; border-left: 12px solid #171B19; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
#toolClone video { width: 100%; height: 100%; display: block; background: #000; object-fit: contain; }
#toolClone.is-video { aspect-ratio: 16 / 9; width: min(960px, 100%); background: #000; }

/* 可点开的小窗：悬停放大一点 */
.xt[data-tool] { cursor: pointer; }
.xt[data-tool] footer { opacity: 1; transform: none; left: 0; right: 0; bottom: 0; height: 27%; padding: 0 14px; background: #fff; flex-wrap: wrap; align-content: center; row-gap: 1px; }
.xt[data-tool] footer strong { font-size: 16px; }
.xt[data-tool] footer span { flex-basis: 100%; order: 3; font-size: 12px; }
.xt[data-tool] footer .xt-cta { position: absolute; right: 12px; top: 50%; translate: 0 -50%; margin: 0; }
.xt[data-tool]:hover { scale: 1.05; box-shadow: 0 18px 40px rgba(26,26,26,.16); z-index: 2; }
.xt[data-tool] { transition: opacity .4s, filter .4s, transform .3s, scale .3s, box-shadow .3s; }

/* 工具弹窗 */
.tool-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(17, 18, 22, .55); backdrop-filter: blur(6px); }
.tool-modal[hidden] { display: none; }
.tool-win { width: min(1240px, 94vw); height: min(840px, 88vh); border-radius: 16px; overflow: hidden; background: #fff; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,.4); animation: toolIn .28s cubic-bezier(.2,.8,.2,1); }
@keyframes toolIn { from { opacity: 0; transform: scale(.94) translateY(12px); } }
.tool-bar { flex: none; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: #F3EDE4; border-bottom: 1px solid var(--line); }
.tool-bar i { width: 11px; height: 11px; border-radius: 50%; background: #D9D2C6; }
.tool-bar strong { margin-left: 8px; font-family: var(--serif); font-size: 15px; }
.tool-bar span { font-size: 12px; color: rgba(26, 26, 26, .5); }
.tool-bar button { margin-left: auto; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); }
.tool-bar button:hover { background: rgba(26,26,26,.08); }
.tool-win iframe { flex: 1; width: 100%; border: 0; }

/* 电商物料：一格一格生成出来 */
.d-gen { background: #1E1A2E; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14% 16%; }
.d-gen i { border-radius: 6px; background: linear-gradient(110deg, #3A3355 30%, #5B4E86 50%, #3A3355 70%); background-size: 250% 100%; animation: gen 3.6s infinite; }
.d-gen i:nth-child(2) { animation-delay: .3s; } .d-gen i:nth-child(3) { animation-delay: .6s; }
.d-gen i:nth-child(4) { animation-delay: .9s; } .d-gen i:nth-child(5) { animation-delay: 1.2s; } .d-gen i:nth-child(6) { animation-delay: 1.5s; }
@keyframes gen { 0% { background-position: 100% 0; } 40% { background-position: 0 0; background-image: linear-gradient(110deg, #3A3355 30%, #5B4E86 50%, #3A3355 70%); } 45%, 90% { background: linear-gradient(135deg, #C9A25A, #B5502F); } 100% { background-position: 100% 0; } }

/* Skill 技能库：敲命令，出结果 */
.d-skill { background: #14151A; padding: 16% 12%; display: grid; align-content: start; gap: 10px; }
.d-skill code { font-family: var(--mono); font-size: 13px; color: #7BE0A8; white-space: nowrap; overflow: hidden; width: 0; border-right: 2px solid #7BE0A8; animation: typing 4s steps(14) infinite; }
.d-skill i { display: block; height: 6px; border-radius: 3px; background: #3A3D45; transform-origin: left; animation: lineIn 4s infinite; }
.d-skill i:nth-of-type(1) { width: 90%; } .d-skill i:nth-of-type(2) { width: 70%; animation-delay: .15s; } .d-skill i:nth-of-type(3) { width: 80%; animation-delay: .3s; }
@keyframes typing { 0% { width: 0; } 35%, 100% { width: 15ch; } }
@keyframes lineIn { 0%, 40% { transform: scaleX(0); } 55%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* 数字人口播：头像 + 声波 */
.d-wave { background: linear-gradient(160deg, #F3D9C9, #E8B8A4); display: flex; align-items: center; justify-content: center; gap: 18px; }
.d-wave b { width: 22%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8A5A3C 0 30%, #2C2320 31%); box-shadow: 0 0 0 6px rgba(255,255,255,.5); }
.d-wave p { display: flex; align-items: center; gap: 4px; height: 40%; margin: 0; }
.d-wave i { width: 5px; border-radius: 3px; background: var(--rust); height: 30%; animation: wave 1s ease-in-out infinite alternate; }
.d-wave i:nth-child(2n) { animation-delay: -.3s; } .d-wave i:nth-child(3n) { animation-delay: -.6s; } .d-wave i:nth-child(4n) { animation-delay: -.15s; }
@keyframes wave { to { height: 100%; } }

/* 爆款视频拆解：胶片走动 */
.d-film { background: #111216; display: grid; align-items: center; overflow: hidden; }
.d-film p { display: flex; gap: 8px; margin: 0; width: max-content; animation: film 8s linear infinite; }
.d-film i { width: 80px; aspect-ratio: 9 / 13; border-radius: 6px; background: linear-gradient(160deg, #2C3550, #B5502F); border: 3px solid #1E2026; }
.d-film i:nth-child(odd) { background: linear-gradient(160deg, #C9A25A, #8A5A3C); }
@keyframes film { to { transform: translateX(-50%); } }

/* 教学管理：日历上的课程块挪来挪去 */
.d-cal { background: #fff; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 6px; padding: 12%; position: relative; }
.d-cal i { border-radius: 4px; background: #F1ECE4; }
.d-cal b { position: absolute; width: calc((76% - 18px) / 4); height: calc((76% - 12px) / 3); border-radius: 4px; background: var(--navy); left: 12%; top: 12%; animation: slot 5s ease-in-out infinite; }
.d-cal b + b { background: var(--gold); animation-delay: -2.5s; }
@keyframes slot { 0%, 20% { transform: translate(0, 0); } 30%, 50% { transform: translate(206%, 106%); } 60%, 80% { transform: translate(103%, 212%); } 90%, 100% { transform: translate(0, 0); } }

/* 灵感卡片：翻牌 */
.d-flip { background: #EAE2D6; display: grid; place-items: center; perspective: 600px; }
.d-flip b { width: 30%; aspect-ratio: 2 / 3; border-radius: 10px; background: var(--rust); animation: flip 4s ease-in-out infinite; transform-style: preserve-3d; display: grid; place-items: center; box-shadow: 0 10px 20px rgba(0,0,0,.15); }
.d-flip b i { width: 40%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--paper); }
@keyframes flip { 0%, 30% { transform: rotateY(0); } 50%, 80% { transform: rotateY(180deg); background: var(--navy); } 100% { transform: rotateY(360deg); } }

.center-cta { display: flex; justify-content: center; margin-top: -28px; position: relative; z-index: 3; }
.btn-ink { display: inline-flex; gap: 10px; text-decoration: none; background: var(--ink); color: var(--paper); padding: 15px 28px; border-radius: 12px; font-size: 16px; transition: transform .2s; }
.btn-ink:hover { transform: translateY(-2px); }

/* ---------- 05 我在用的应用 ---------- */
.apps { min-height: min(820px, 92vh); display: grid; place-items: end center; overflow: hidden; padding-bottom: clamp(60px, 9vh, 110px); }
.apps-head { max-width: 640px; }
.btn-rust { display: inline-flex; gap: 10px; text-decoration: none; background: var(--rust); color: #fff; padding: 15px 30px; border-radius: 12px; font-size: 16px; font-weight: 600; transition: transform .2s, background .2s; }
.btn-rust:hover { transform: translateY(-2px); background: #9E4426; }
.float-field { position: absolute; inset: 0; }
.app {
  position: absolute; left: var(--x); top: var(--y);
  display: grid; justify-items: center; gap: 8px;
  translate: -50% -50%;
  animation: drift var(--d, 7s) ease-in-out infinite; animation-delay: var(--dl, 0s);
  transition: margin .5s cubic-bezier(.2,.8,.2,1);
}
.app img { width: var(--s, 64px); height: auto; max-height: var(--s, 64px); object-fit: contain; display: block; transition: transform .3s; }
.app span { font-size: 12px; color: rgba(26, 26, 26, .6); opacity: 0; transition: opacity .25s; white-space: nowrap; }
.app:hover img { transform: scale(1.12) rotate(-3deg); }
.app:hover span { opacity: 1; }
@keyframes drift { 33% { transform: translate(6px, -10px) rotate(2deg); } 66% { transform: translate(-6px, 6px) rotate(-2deg); } }

/* ---------- 窄屏 ---------- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .hero { justify-content: flex-start; }
  .hero-copy { max-width: 100%; padding-top: 120px; }
  .hero > .eyebrow { top: 76px; }
  .hero h1 { font-size: clamp(28px, 9.6vw, 48px); }
  .shelf { left: var(--gutter); top: 90%; }
  .hero-tag { display: none; }
  .pour { top: 84px; right: var(--gutter); }
  .beliefs { grid-template-columns: 1fr; }
  .beliefs li, .beliefs li + li { padding: 12px 0; border-left: 0; border-bottom: 1px solid var(--line); grid-template-columns: 28px 64px 1fr; align-items: baseline; }
  .sec-head { grid-template-columns: 1fr; gap: 20px; }
  .fun .sec-desc { grid-column: 1; grid-row: 3; }
  .brand-avatar { height: 44px; }
  .brand-text { height: 30px; }
  .sec-desc { justify-self: start; }
  .panel { grid-template-columns: 1fr; }
  .panel-copy { order: 2; padding: 0; }
  .slots { grid-template-columns: 1fr; }
  .case { grid-template-columns: 1fr; }
  .xgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); -webkit-mask-image: none; mask-image: none; }
  .xt { grid-column: auto; grid-row: auto; }
  .xt footer { opacity: 1; transform: none; left: 8px; right: auto; bottom: 8px; background: rgba(255, 255, 255, .92); padding: 4px 10px; border-radius: 8px; }
  .xt footer strong { font-size: 13px; }
  .xt footer span { display: none; }
  .center-cta { margin-top: 28px; }
  .apps { min-height: 760px; }
  .app img { width: calc(var(--s) * .55); max-height: calc(var(--s) * .55); }
  .dex-label { margin-left: 0; width: 100%; }
  .dex { flex-wrap: wrap; }
  :root { --card-w: min(72vw, 340px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pulse, .scroll-cue i::after, .xt, .app, .demo *, .demo, .brand-avatar { animation: none !important; }
}

/* 10-15 v1.17：首屏小字、三条产品观折行均衡，避免末行只剩一两个字 */
/* 10-15 v1.18：01/02/03 横线左上角的小标签，字号颜色同 01 02 03 */
.beliefs-kicker { margin: -16px 0 10px; font-family: var(--mono); font-size: 11px; color: var(--rust); max-width: 640px; }
.lede { max-width: 35em; }   /* 小字排到红线的最长位置，排满再换行 */


/* v1.22：画廊整条上提 39px 到她画的横线；v1.23：01 的编号行和大字之间不再留 40px 行距，和 02 一样贴近 */
.fun .sec-head { margin-bottom: calc(clamp(40px, 6vh, 72px) - 39px); row-gap: 0; }

/* v1.26（10-15 品薇）：01 说明改成 Penny 开口说话 + 「你和海报互动了吗」；收藏图鉴挪到说明区、两排；去掉画廊下方的箭头 */
.sec-desc .say { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.say-face { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #E9DDFF; display: grid; place-items: center; font-size: 18px; }
.sec-desc .say-bubble { position: relative; margin: 0; padding: 1px 12px; line-height: 1.5; font-size: 15px; color: var(--ink); background: #FFF8EC; border: 1.5px solid var(--ink); border-radius: 12px; }
.say-bubble::before { content: ""; position: absolute; left: -6px; top: 50%; width: 9px; height: 9px; margin-top: -5px; background: #FFF8EC; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); }
.sec-desc p + p { margin-top: 10px; }
.ask { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; font-size: 15px; color: var(--ink); }
.ask button { font: inherit; font-size: 14px; padding: 1px 16px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; transition: background .2s, color .2s; }
.ask button:hover { background: var(--ink); color: var(--paper); }
.ask-a { cursor: pointer; font-weight: 700; }
.ask.answered .ask-q, .ask.answered button { display: none; }
.catch-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.dex { display: grid; grid-template-columns: repeat(9, 30px); gap: 2px; margin-top: 20px; }

/* v1.28（10-15 品薇）：01 说明去掉对话框、表情、没有按钮；文字块左移到她画的红线（宽 560）不再分行；「有」做成圆形线框按钮，悬停反白，点后变灰圈 */
.fun .sec-desc { max-width: calc(41.4vw - var(--gutter)); }   /* v1.30：左边缘顶到她画的红线（屏宽 58.6% 处），右边靠齐 */
.sec-desc .yes-dot { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 8px; padding: 0; vertical-align: middle; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: rgba(26, 26, 26, .7); font-family: var(--mono); font-size: 12px; cursor: pointer; transition: background .2s, color .2s; }
.sec-desc .yes-dot:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sec-desc .yes-dot.done { background: rgba(26, 26, 26, .16); border-color: transparent; color: rgba(26, 26, 26, .35); cursor: default; pointer-events: none; }

/* v1.30：收藏图鉴小人缩到 23px，两排高度和左边「左右拖一拖」气泡差不多 */
.dex { grid-template-columns: repeat(9, 23px); }
.dex li, .dex li img { width: 23px; height: 23px; }

/* v1.32（10-16 品薇）：①图鉴回到两排 9+9、小人 22px，在气泡右边；②02 有根改成左右两栏：左边「有根」+ 说明（左对齐，字号行距同 01）+ 按钮，右边直接放「关于我」页的树（带背后的土层、标尺、大字、说明卡），没人碰就自己一段段转，转到 AI 段变绿；整块只占一屏 */
.dex { grid-template-columns: repeat(9, 22px); }
.dex li, .dex li img { width: 22px; height: 22px; }
.seg, .panel-copy, .window-bar { display: none; }
.root .dark { position: relative; padding: 48px 0 40px; height: calc(100vh - 96px); min-height: 780px; overflow: hidden; }
.root .sec-head { position: static; z-index: 2; display: block; width: 48.6%; margin: 0; pointer-events: none; }   /* 右边界 = 她画的竖线；文字压在树页上面，点击穿透到树 */
.root .sec-head .btn { pointer-events: auto; }
.root .sec-mark { display: block; position: relative; z-index: 2; }
.root .sec-desc { max-width: none; justify-self: auto; position: absolute; z-index: 2; left: clamp(20px, 3.4vw, 48px); bottom: 46px; width: calc(48.6% - clamp(20px, 3.4vw, 48px)); margin-top: 0; pointer-events: none; }   /* 标题顶挪到她画的横线下面；v1.34 整块再下移 69px，到她画的红框 */
.root .sec-desc h3 { margin: 0 0 14px; }
.root .sec-desc p + p { margin-top: 30px; }   /* 段与段之间空一行 */
.root .sec-desc .btn { margin-top: 22px; }
.root .panel { position: absolute; inset: 0; margin: 0; padding: 0; background: none; border-radius: inherit; overflow: hidden; display: block; z-index: 0; }
.root .window { position: absolute; inset: 0; width: auto; border-radius: inherit; overflow: hidden; box-shadow: none; background: none; }
.root .window-body { position: absolute; inset: 0; aspect-ratio: auto; border-radius: inherit; overflow: hidden; }
@media (max-width: 900px) {
  .root .dark { height: auto; padding-bottom: 0; }
  .root .sec-head { width: auto; padding: 0 20px; }
  .root .panel { position: relative; width: auto; height: 420px; margin-top: 24px; }
  .root .window { border-radius: 0 0 clamp(24px, 3.4vw, 52px) clamp(24px, 3.4vw, 52px); }
}

.root .dark { clip-path: inset(0 round clamp(24px, 3.4vw, 52px)); }   /* 嵌入的树页在圆角处也被裁掉 */


/* 02 树右侧的操作提示 */
.tree-hint { position: absolute; z-index: 3; right: 4%; top: 65.7%; transform: translateY(-140%); margin: 0; pointer-events: none; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--rust); white-space: nowrap; }
.tree-hint i { font-style: normal; color: var(--rust); display: inline-block; animation: nudgeL 1s ease-in-out infinite; }
.tree-hint i:last-child { animation-name: nudgeR; }
@media (max-width: 900px) { .tree-hint { top: auto; bottom: 20px; right: 20px; } }

/* 03 有用：右侧引言块和 01 一样，左边缘到屏宽 58.6% 处，右边靠齐（10-16 品薇：间距太大） */
.use .sec-desc { max-width: calc(41.4vw - var(--gutter)); justify-self: end; }
/* 10-16 品薇：引言最后一行字的底，对齐「有用」大字的字底（大字字底比它的行框低 0.074 个字号，小字字底比段落框高约 6px） */
@media (min-width: 901px) { .use .sec-desc { padding-bottom: 0; margin-bottom: calc(-6px - 0.074 * clamp(96px, 15vw, 220px)); } }

/* 有用图卡 v3：本体与出框区分别约束，所有图片等比缩放 */
.project-carousel { --project-width: 40vw; --project-body-height: calc(var(--project-width) / 1.48); --project-crown-height: calc(var(--project-width) * .15); margin: 0 var(--gutter) clamp(64px, 5vw, 96px); background:#fff; border-radius:clamp(24px, 3.4vw, 52px); overflow:hidden; }
.project-cards { display:flex; gap:clamp(14px, 1.3vw, 24px); margin:0; background:transparent; border-radius:0; padding: 24px clamp(24px, 2.4vw, 48px) 28px; overflow-x:auto; scrollbar-width:none; cursor:grab; touch-action:pan-x pan-y; overscroll-behavior-x:contain; scroll-snap-type:none; scroll-padding-left:clamp(24px, 2.4vw, 48px); }
.project-cards::-webkit-scrollbar { display:none; }
.project-card { display:block; position:relative; flex:0 0 var(--project-width); width:var(--project-width); height:calc(var(--project-body-height) + var(--project-crown-height) + 100px); scroll-snap-align:start; user-select:none; }
.project-body { position:absolute; left:0; right:0; top:var(--project-crown-height); height:var(--project-body-height); border-radius:clamp(14px,1.6vw,28px); overflow:hidden; }
.project-card img { display:block; position:absolute; height:auto; max-width:none; user-select:none; -webkit-user-drag:none; }
/* 从各自原图量取本体边界，按等比缩放覆盖统一画框，溢出裁切 */
.project-card--muse { --source-width:108.7%; --source-left:-4.35%; --source-top:-18.4%; }
.project-card--yixu { --source-width:101.2%; --source-left:-.6%; --source-top:-10%; }
.project-card--rrh { --source-width:102.6%; --source-left:-1.3%; --source-top:-7.7%; }
.project-body img { width:var(--source-width); left:var(--source-left); top:var(--source-top); }
.project-crown { position:absolute; inset:0 0 auto; height:var(--project-crown-height); overflow:hidden; pointer-events:none; }
.project-crown img { width:var(--source-width); left:var(--source-left); top:calc(var(--project-crown-height) + var(--project-body-height) * var(--source-offset)); }
.project-card--muse { --source-offset: -.184; }
.project-card--yixu { --source-offset: -.10; }
.project-card--rrh { --source-offset: -.077; }
.project-card[href] { cursor:pointer; }
.project-cards.is-dragging, .project-cards.is-dragging .project-card { cursor:grabbing; scroll-snap-type:none; }
.project-cards:focus-visible,.project-card:focus-visible { outline:2px solid var(--rust); outline-offset:-2px; }
.project-controls { display:flex; gap:10px; padding:16px var(--gutter) 0; }
.project-controls button { border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink); width:40px; height:40px; font-size:20px; cursor:pointer; }
@media(max-width:600px) { .project-carousel { --project-width:86vw; } }

/* v5：白底与有根等宽，内部裁切；沿用有趣画廊的字体与阴影 */
.project-dots { display:flex; gap:9px; padding:28px clamp(24px,2.4vw,48px) 0; }
.project-dots button { width:8px; height:8px; padding:0; border:0; border-radius:50%; background:#d5d2ce; cursor:pointer; }
.project-dots button[aria-current="true"] { background:var(--rust); }
.project-body { box-shadow:0 24px 50px -30px rgba(44,53,80,.55); }
.project-caption { position:absolute; top:calc(var(--project-crown-height) + var(--project-body-height)); left:4px; right:4px; padding-top:20px; display:grid; grid-template-columns:1fr auto; gap:7px 12px; align-items:baseline; }
.project-caption strong { font-family:var(--latin),var(--serif); font-weight:400; font-size:clamp(20px,1.8vw,26px); letter-spacing:.01em; }
.project-caption > span { font-family:var(--serif); font-size:14px; color:rgba(26,26,26,.62); grid-row:2; }
.project-caption em { font-style:normal; font-family:var(--mono); font-size:12px; color:var(--rust); grid-column:2; grid-row:1 / span 2; align-self:center; white-space:nowrap; }
.project-controls { padding:0 clamp(24px,2.4vw,48px) 24px; }
@media(max-width:600px) { .project-caption { grid-template-columns:1fr; } .project-caption em { grid-column:1; grid-row:3; } .project-card { height:calc(var(--project-body-height) + var(--project-crown-height) + 120px); } }

/* 拾片真实截图：沿用工具弹窗，完整显示原图 */
#toolClone.is-image { width: 100%; aspect-ratio: auto; box-shadow: none; border-radius: 0; display: flex; justify-content: center; }
#toolClone.is-image img { display: block; max-width: 100%; max-height: calc(88vh - 160px); width: auto; height: auto; object-fit: contain; }

/* 毛茸茸伙伴：收拢到文案周围，交互沿用 .app。 */
.apps .float-field { inset: 0 max(0px, calc((100% - 1320px) / 2)) 0; }
@media (max-width: 900px) {
  .apps .float-field { inset: 0; }
  .apps .app img { width: calc(var(--s) * .68); max-height: calc(var(--s) * .68); }
}

/* Three tool entries share one size; each card retains its own colors. */
.xt[data-tool] footer .xt-cta.xt-cta--detail{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:48px;height:28px;padding:0;font:12px/1 var(--serif);white-space:nowrap}

/* 2026-10-20：伙伴图标聚拢成扁椭圆，素材与交互复用。 */
.apps { min-height: 560px; padding-top: 100px; padding-bottom: 52px; place-items: center; }
.apps-head { max-width: min(52%, 620px); position: relative; z-index: 2; margin-top: 82px; }
.apps .center-title { font-size: clamp(48px, 5.3vw, 84px); }
.apps .center-sub { max-width: 29em; margin-inline: auto; }
#curious .center-sub { max-width: 58em; margin-inline: auto; }
@media(max-width:900px) {
 .apps { min-height: 570px; padding-top: 70px; }
 .apps-head { max-width: 70%; margin-top: 65px; }
 .apps .center-title { font-size: clamp(32px, 6vw, 54px); }
}

.apps .center-title > span { display: block; }

/* 2026-10-20：有根树提示微调；有用卡片压缩上下留白。 */
.root .tree-hint { right: 1.5%; top: 69%; font-size: 12px; }
.project-carousel { position: relative; margin-bottom: 0; }
.project-dots { position: absolute; top: clamp(44px, 4vw, 72px); left: clamp(24px, 2.4vw, 48px); z-index: 3; padding: 0; }
.project-cards { padding-top: 0; padding-bottom: 8px; }
.project-card { height: calc(var(--project-body-height) + var(--project-crown-height) + 80px); }
.project-caption { padding-top: 16px; }
.project-caption strong { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 10px; }
.project-caption strong small { font: 400 clamp(13px, 1.1vw, 16px)/1.4 var(--serif); color: var(--ink); }
/* 同一间距：有用标题到白块 = 白块到探索标题；原上边距不变。 */
.use { padding-bottom: 0; }
.curious { padding-top: clamp(40px, 6vh, 72px); }
@media(max-width:600px) {
 .project-card { height:calc(var(--project-body-height) + var(--project-crown-height) + 120px); }
 .project-dots { top:18px; }
 .root .tree-hint { top:auto; bottom:12px; right:12px; }
}
@media(max-width:900px) {
 .use .sec-desc { max-width: none; width: auto; justify-self: start; }
}