/*! Original site code and integration: © 2026 磨一剑 · https://moijian.com. All rights reserved for original portions. Third-party content retains its own licenses. */
/* ══════════════════════════════════════════════════════════════
   浅拍 · UX / UI 设计案例
   ─────────────────────────────────────────────────────────────
   页面的语言跟着 App 走：珍珠白底、五色渐变、气泡按钮、白卡。
   每一章不超过一屏（.slide），高度跟着内容走；顶部是分章进度条。
   ══════════════════════════════════════════════════════════════ */

:root {
  --bg: #fbfafd;
  --bg-2: #f4f2f9;
  --surface: #ffffff;
  --ink: #1d1b29;
  --ink-2: #4f4c62;
  --ink-3: #6c6980;
  --line: #ebe8f2;
  --line-2: #dcd8e6;

  --pink: #F980A9;
  --lilac: #D0ABDE;
  --blue: #8FAAED;
  --cyan: #6CCDF2;
  --grad: linear-gradient(90deg, #F980A9 0%, #FCA4C8 25%, #D0ABDE 50%, #8FAAED 75%, #6CCDF2 100%);
  /* 网页自己的按钮用深一档的渐变：白字对比度都过 4.5:1（App 复刻件保持原样） */
  --grad-deep: linear-gradient(90deg, #c83f7e 0%, #7c5bc7 55%, #2f6ad6 100%);
  --grad-soft: linear-gradient(120deg, rgba(249, 128, 169, .12), rgba(208, 171, 222, .12) 45%, rgba(108, 205, 242, .12));

  --swap: #e0508a;
  --free: #3f7be6;
  --custom: #b98a2e;

  --r: 20px;
  --shadow: 0 1px 2px rgba(40, 30, 80, .05), 0 18px 40px -22px rgba(80, 60, 140, .28);
  --shadow-lg: 0 2px 4px rgba(40, 30, 80, .05), 0 40px 80px -40px rgba(80, 60, 140, .38);

  --font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --font-en: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, var(--font);
  --ease: cubic-bezier(.22, .9, .28, 1);
  --wrap: 1200px;
  --pad: clamp(20px, 4.4vw, 64px);
  /* 顶部只有一条细进度条，不占版面；留着这个变量，改回导航栏时只动这里 */
  --nav-h: 0px;
  --slide-pad: clamp(24px, 4.6vh, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.75 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; }
code { font-family: "Cascadia Code", Consolas, monospace; font-size: .92em; background: var(--bg-2); padding: .08em .45em; border-radius: 6px; }
::selection { background: rgba(249, 128, 169, .28); }
:focus-visible { outline: 2px solid var(--free); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 99px; }
.skip:focus { left: 12px; }

/* ── 加载层 ───────────────────────────────────────────────────── */
#boot { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; justify-items: center; gap: 18px; background: var(--bg); transition: opacity .7s var(--ease), visibility .7s; }
body.is-ready #boot { opacity: 0; visibility: hidden; }
.boot__ring { width: 64px; height: 64px; border-radius: 50%; padding: 3px; background: conic-gradient(from 0deg, #F980A9, #D0ABDE, #6CCDF2, #F980A9); animation: spin 1.1s linear infinite; }
.boot__ring i { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--bg); }
.boot__t { margin: 0; font-weight: 700; letter-spacing: .2em; }
.boot__t span { font-weight: 400; color: var(--ink-3); letter-spacing: .1em; margin-left: .4em; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 版心与章节 ───────────────────────────────────────────────── */
.wrap { width: min(100% - var(--pad) * 2, var(--wrap)); margin-inline: auto; }
.sec { position: relative; }
/* 高度跟着内容走，不再撑满一屏；跳转时停在导航下方。
   手机样机的宽度跟着视口高度走：视口 − 导航 − 上下留白 − 这一章样机上方另外占的高度，
   剩下的就是整台手机的高度，按 375 × 812 加 11px 边框换算成宽度。
   写在 .slide 上而不是 :root：章节改了 --phone-reserve，--phone-w 才会跟着重算 */
.slide { --phone-reserve: 16px; --phone-w: clamp(240px, calc((100svh - var(--nav-h) - 2 * var(--slide-pad) - var(--phone-reserve) - 22px) * .4618 + 22px), 330px); padding-block: var(--slide-pad); scroll-margin-top: var(--nav-h); }
.slide + .slide { border-top: 1px solid rgba(220, 216, 230, .55); }
.slide--wide > .wrap { --wrap: 1280px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.sechead { max-width: 640px; }
.kicker { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font: 600 12px/1.4 var(--font-en); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.kicker__n { font-variant-numeric: tabular-nums; color: var(--ink); }
.act { font: 700 12px/1 var(--font); letter-spacing: .1em; color: #fff; background: var(--grad-deep); padding: 5px 10px; border-radius: 99px; text-transform: none; }
.sechead h2 { margin: 0; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.3; font-weight: 800; letter-spacing: .01em; }
.sechead h2 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sechead__bar { display: block; width: 56px; height: 4px; margin: 14px 0; border-radius: 99px; background: var(--grad); transform-origin: left; transform: scaleX(.15); transition: transform 1s var(--ease) .15s; }
.sechead.is-in .sechead__bar { transform: scaleX(1); }
.lede { margin: 0; font-size: 15px; line-height: 1.85; color: var(--ink-2); max-width: 36em; }
.lede b { color: var(--ink); font-weight: 600; }
.hint { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-3); }

html.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms); }
.rv.is-in { opacity: 1 !important; transform: none !important; }

/* 三栏：说明 | 样机 | 补充；两栏：说明 | 样机 */
.split { display: grid; gap: clamp(24px, 3.4vw, 52px); align-items: center; }
.split--3 { grid-template-columns: minmax(0, 1fr) var(--phone-w) minmax(0, 1fr); }
.split--2 { grid-template-columns: minmax(0, 540px) var(--phone-w); justify-content: center; column-gap: clamp(48px, 9vw, 150px); }
.split .sechead h2 { font-size: clamp(24px, 2.2vw, 32px); }
.split--loop { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) var(--phone-w); }
.split--spec { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: start; }
.split__text { display: grid; gap: 18px; align-content: center; min-width: 0; }
.split__phone { width: var(--phone-w); justify-self: center; }
.split__phone .phone { max-width: none; }
.split__ctl { display: grid; gap: 10px; justify-items: start; }

.pts { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pts li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.75; color: var(--ink-2); }
.pts li::before { content: ""; position: absolute; left: 0; top: .66em; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #F980A9, #8FAAED); }
.pts li b { display: block; color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.5; }

/* ── 通用控件 ─────────────────────────────────────────────────── */
.card { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); border: 1px solid rgba(255, 255, 255, .9); }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 99px; border: 0; cursor: pointer; font-weight: 600; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s; }
.btn--grad { color: #fff; background: var(--grad-deep); box-shadow: 0 10px 24px -12px rgba(150, 80, 170, .8); }
.btn--ghost { background: #fff; border: 1px solid var(--line-2); color: var(--ink); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }

.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 22px; background: var(--bg-2); border: 1px solid var(--line); }
.seg__b { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 14px; border: 0; border-radius: 99px; background: transparent; cursor: pointer; font-size: 14px; color: var(--ink-2); white-space: nowrap; transition: background .25s, color .25s, box-shadow .25s; }
.seg__b:hover { color: var(--ink); }
.seg__b.is-on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 2px 8px -2px rgba(60, 40, 120, .18); }
/* 分段里的色键：画成一小段线，和图上的折线同形 */
.seg__dot { width: 14px; height: 3px; border-radius: 2px; background: var(--c); opacity: .45; transition: opacity .25s; }
.seg__b.is-on .seg__dot { opacity: 1; }

.sld { display: grid; gap: 4px; font-size: 13px; }
.sld__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.sld__l { color: var(--ink-2); }
.sld__v { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.sld input { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; margin: 0; }
.sld input::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #d9a6dc 0, #8FAAED var(--p), var(--line) var(--p)); }
.sld input::-moz-range-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #d9a6dc 0, #8FAAED var(--p), var(--line) var(--p)); }
.sld input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2px solid #8FAAED; box-shadow: 0 2px 6px rgba(60, 40, 120, .25); }
.sld input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #8FAAED; }

.jump { display: inline-flex; align-items: center; flex: none; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; background-image: var(--grad); background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 1px; }
.jump:hover { background-size: 100% 100%; color: #fff; padding-inline: 4px; border-radius: 4px; }

.tip { position: fixed; left: 0; top: 0; z-index: 80; max-width: 300px; padding: 9px 12px; border-radius: 12px; background: rgba(29, 27, 41, .94); color: #fff; font-size: 13px; line-height: 1.6; pointer-events: none; opacity: 0; transition: opacity .15s; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .4); }
.tip.is-on { opacity: 1; }
.tip b { font-size: 15px; }
.tip .tip__k { color: rgba(255, 255, 255, .7); font-size: 12px; }
.tip .tip__key { display: inline-block; width: 12px; height: 3px; margin-right: 7px; border-radius: 2px; vertical-align: middle; }

/* 开关 */
.sw2 { position: relative; flex: none; width: 40px; height: 24px; padding: 0; border: 0; border-radius: 99px; background: #d9d6e3; cursor: pointer; transition: background .25s; }
.sw2 i { position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .3s var(--ease); }
.sw2[aria-checked="true"] { background: linear-gradient(90deg, #e0508a, #7c5bc7); }
.sw2[aria-checked="true"] i { transform: translateX(16px); }

/* ── 顶部：一条分段进度条 + 当前章节名 ─────────────────────────────
   贴着视口顶边，不占版面；每章一段，幕与幕之间空得宽一点。
   每一段的点击区比看得见的细条高，悬停时细条加粗。 */
.topnav { position: fixed; left: 0; right: 0; top: 0; z-index: 70; pointer-events: none; }
.topnav__track { display: flex; gap: 6px; pointer-events: auto; }
.topnav__act { flex: var(--n) 1 0; min-width: 0; display: flex; gap: 2px; }
.topnav__i { flex: 1 1 0; min-width: 0; display: block; height: 14px; }
.topnav__bar { display: block; height: 4px; background: rgba(205, 200, 222, .55); overflow: hidden; transition: height .2s var(--ease), background .2s; }
.topnav__bar b { display: block; height: 100%; background: var(--grad); transform-origin: left; transform: scaleX(0); }
.topnav__track:hover .topnav__bar { height: 7px; }
.topnav__i:hover .topnav__bar { background: rgba(170, 160, 200, .6); }
.topnav__i:focus-visible { outline-offset: -2px; border-radius: 2px; }
.topnav__now { position: absolute; top: 12px; right: 14px; display: inline-flex; align-items: baseline; gap: 6px; height: 24px; padding: 0 11px; border-radius: 99px; background: rgba(255, 255, 255, .86); border: 1px solid var(--line); box-shadow: 0 4px 14px -8px rgba(60, 40, 120, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 12px; line-height: 22px; font-weight: 600; color: var(--ink); white-space: nowrap; transition: opacity .3s, transform .3s var(--ease); }
.topnav__now em { font: 600 10.5px/22px var(--font-en); font-style: normal; color: var(--ink-3); }
.topnav.is-top .topnav__now { opacity: 0; transform: translateY(-6px); }
.foot { padding: 40px 0 80px; border-top: 1px solid var(--line); background: #fff; }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.foot__brand { margin: 0; font-size: 14px; color: var(--ink-2); }
.foot__brand b { color: var(--ink); }
.foot__top { border: 1px solid var(--line-2); background: #fff; border-radius: 99px; height: 36px; padding: 0 16px; cursor: pointer; }

/* ══════════════════════════════════════════════════════════════
   手机样机：device 按 375 宽写，整体 scale 到外壳宽度
   ══════════════════════════════════════════════════════════════ */
.phone { position: relative; width: 100%; max-width: 330px; margin-inline: auto; padding: 11px; border-radius: 50px; background: linear-gradient(145deg, #2b2a33, #0d0c12 40%, #26252d); box-shadow: 0 0 0 1.5px #3a3942 inset, var(--shadow-lg); }
.phone__glass { position: relative; aspect-ratio: var(--ar); border-radius: 39px; overflow: hidden; background: #fff; isolation: isolate; }
.phone__island { position: absolute; left: 50%; top: 20px; width: 30%; height: 24px; transform: translateX(-50%); border-radius: 99px; background: #0b0a10; z-index: 5; pointer-events: none; }
.dev { position: absolute; left: 0; top: 0; width: 375px; transform-origin: 0 0; overflow: hidden; font: 400 14px/1.5 var(--font); color: #333; background: #fff; }
.dev button { cursor: pointer; }
.dev * { -webkit-tap-highlight-color: transparent; }
.dev::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 99px; background: #111; z-index: 40; pointer-events: none; }
.dev.dev--darkhome::after { background: rgba(255, 255, 255, .85); }
.ico { display: inline-flex; width: 1em; height: 1em; }
.ico svg { width: 100%; height: 100%; fill: currentColor; overflow: visible; }

.sb { position: absolute; left: 0; right: 0; top: 0; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 4px 26px 0 34px; font: 600 15px/1 -apple-system, "SF Pro Text", "Segoe UI", sans-serif; color: #111; z-index: 20; pointer-events: none; }
.sb--dark { color: #fff; }
.sb__r { display: flex; align-items: center; gap: 5px; }
.sb__r .ico--signal { width: 17px; height: 11px; }
.sb__r .ico--wifi { width: 15px; height: 11px; }
.sb__r .ico--battery { width: 25px; height: 12px; }
.nb { position: absolute; left: 0; right: 0; top: 44px; height: 44px; display: grid; grid-template-columns: 90px 1fr 90px; align-items: center; z-index: 20; color: #222; }
.nb--dark { color: #fff; }
.nb__back { justify-self: start; margin-left: 12px; width: 28px; height: 28px; border: 0; background: none; padding: 5px 7px; color: inherit; }
.nb__back .ico { width: 11px; height: 18px; }
.nb__t { text-align: center; font-size: 17px; letter-spacing: .02em; }
.cap { justify-self: end; margin-right: 7px; display: flex; align-items: center; height: 32px; width: 87px; border-radius: 99px; border: .5px solid rgba(0, 0, 0, .1); background: rgba(255, 255, 255, .7); }
.cap--dark { background: rgba(0, 0, 0, .18); border-color: rgba(255, 255, 255, .25); }
.cap__dots { flex: 1; display: flex; justify-content: center; gap: 3px; }
.cap__dots b { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.cap__dots b:nth-child(2) { width: 6.5px; height: 6.5px; }
.cap__sep { width: .5px; height: 18px; background: rgba(0, 0, 0, .15); }
.cap--dark .cap__sep { background: rgba(255, 255, 255, .35); }
.cap__ring { flex: 1; display: grid; place-items: center; }
.cap__ring::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2.2px solid currentColor; background: radial-gradient(currentColor 34%, transparent 36%); }
.tb { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; display: flex; justify-content: space-around; align-items: flex-start; padding-top: 12px; background: rgba(246, 248, 255, .96); border-top: .5px solid rgba(0, 0, 0, .04); z-index: 15; }
.tb__i { border: 0; background: none; width: 64px; height: 44px; display: grid; place-items: center; color: #c9c9cf; }
.tb__i .ico { width: 34px; height: 34px; }
.tb__i.is-on { color: #e893b6; }

.abtn { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; border: 0; border-radius: 99px; background: linear-gradient(90deg, #F99BBE, #C9A9E4 55%, #86B9F0); color: #fff; font-size: 17px; font-weight: 600; letter-spacing: .04em; box-shadow: 0 6px 14px -6px rgba(200, 120, 190, .6); transition: filter .2s, transform .15s; }
.abtn:active { transform: scale(.98); }
.abtn[disabled] { background: #cfcfd4; box-shadow: none; }
.abtn--blue { background: #96bdfb; box-shadow: none; }
.toast { position: absolute; left: 50%; top: 46%; z-index: 50; max-width: 260px; padding: 12px 18px; border-radius: 12px; background: rgba(20, 20, 26, .82); color: #fff; font-size: 14px; text-align: center; transform: translate(-50%, -50%) scale(.9); opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.mask { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(20, 18, 30, 0); transition: background .25s; }
.mask.is-on { background: rgba(20, 18, 30, .5); }
.mask > * { transform: translateY(18px) scale(.96); opacity: 0; transition: transform .35s var(--ease), opacity .25s; }
.mask.is-on > * { transform: none; opacity: 1; }
.mask--bottom { place-items: end center; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }
@keyframes pageIn { from { opacity: 0; transform: translateX(14px); } }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes genIn { from { opacity: 0; transform: translateX(-16px) scale(.94); filter: blur(6px); } }

/* ══════════════════════════════════════════════════════════════
   封面
   ══════════════════════════════════════════════════════════════ */
.cover { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--nav-h) + clamp(12px, 3vh, 36px)) 0 clamp(24px, 5vh, 56px); overflow: hidden; isolation: isolate; }
.cover__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cover__bg i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.cover__bg i:nth-child(1) { width: 46vw; height: 46vw; left: -12vw; top: -16vw; background: #fbd3e3; }
.cover__bg i:nth-child(2) { width: 40vw; height: 40vw; right: -10vw; top: 6vw; background: #cfe9fb; }
.cover__bg i:nth-child(3) { width: 30vw; height: 30vw; left: 38vw; bottom: -14vw; background: #e8dcf5; }
/* 潜空间的点阵：离生成台越近越清楚 */
.cover__grid-bg { position: absolute; inset: 0; background-image: radial-gradient(rgba(124, 91, 199, .26) 1.1px, transparent 1.6px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 55% 65% at 74% 52%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse 55% 65% at 74% 52%, #000 10%, transparent 72%); }
.cover > .wrap { --wrap: 1280px; }
.cover__grid { --gen-w: clamp(340px, calc((100svh - var(--nav-h) - 2 * var(--slide-pad) - 318px) * 2.25 + 52px), 660px); display: grid; grid-template-columns: minmax(0, 1fr) var(--gen-w); gap: clamp(32px, 5vw, 80px); align-items: center; }
.logo { display: block; width: min(100%, 300px, calc((100svh - 520px) * 1.3)); min-width: 150px; height: auto; margin: 0 0 10px -6px; overflow: visible; }
.logo__guides line, .logo__guides circle { fill: none; stroke: var(--cyan); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; }
body.is-ready .logo__guides line, body.is-ready .logo__guides circle { animation: guide 1.6s var(--ease) calc(.25s + var(--i) * .09s) forwards; }
@keyframes guide { 60% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: .5; } }
.cover__h { margin: 0 0 16px; font-size: clamp(30px, 3.3vw, 48px); line-height: 1.28; font-weight: 800; }
.cover__h em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cover__lede { margin: 0 0 26px; font-size: 16px; line-height: 1.9; color: var(--ink-2); max-width: 31em; }
.cover__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.ph { display: block; width: 100%; height: 100%; }
.ph svg { display: block; width: 100%; height: 100%; }

/* 生成台 */
.gen { position: relative; margin: 0; width: var(--gen-w); max-width: 100%; justify-self: end; border-radius: 22px; background: rgba(255, 255, 255, .9); border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 1px 2px rgba(40, 30, 80, .06), 0 30px 70px -34px rgba(80, 60, 140, .45); overflow: hidden; }
.gen__bar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #fff, #faf9fd); }
.gen__dots { display: flex; gap: 5px; }
.gen__dots i { width: 9px; height: 9px; border-radius: 50%; background: #e4e1ec; }
.gen__dots i:nth-child(1) { background: #f7a8c6; }
.gen__dots i:nth-child(2) { background: #d9c3ec; }
.gen__dots i:nth-child(3) { background: #a9d8f3; }
.gen__name { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.gen__status { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gen__status i { width: 7px; height: 7px; border-radius: 50%; background: #b9b5c8; }
.gen__status[data-s="type"] i, .gen__status[data-s="run"] i { background: #7c5bc7; animation: blink 1s ease-in-out infinite; }
.gen__status[data-s="done"] i { background: #1f9d57; }
@keyframes blink { 50% { opacity: .25; } }
.gen__in { display: grid; gap: 8px; padding: 12px 16px 10px; }
.gen__row { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 30px; }
.gen__row--prompt { align-items: start; }
.gen__k { font-size: 12px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.gen__row--prompt .gen__k { padding-top: 3px; }
.gen .seg { padding: 3px; }
.gen .seg__b { min-height: 28px; padding: 0 12px; font-size: 13px; }
.gen__chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.gen__chip { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 99px; color: #fff; font-size: 12.5px; background: linear-gradient(90deg, #e0508a, #7c5bc7); opacity: 0; transform: scale(.7); transition: opacity .2s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.gen__chip.is-on { opacity: 1; transform: none; }
/* 提示词：预设的质量词是灰的，用户点的关键词亮起来 */
.gen__prompt { margin: 0; min-height: 3.2em; padding: 6px 10px; border-radius: 10px; background: #1d1b29; color: rgba(255, 255, 255, .5); font: 12px/1.6 "Cascadia Code", Consolas, "SF Mono", monospace; word-break: break-word; }
.gen__tok--user { display: inline; visibility: hidden; color: #f6c3da; }
.gen__tok--user.is-on { visibility: visible; }
.gen__caret { display: none; width: 7px; height: 1.1em; margin-left: 2px; vertical-align: -.2em; background: #f6c3da; animation: blink 1s steps(1) infinite; }
.gen__prompt.is-typing .gen__caret { display: inline-block; }
.gen__out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 2px 16px 12px; }
.gen__tile { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, #efe6f6, #e3ecf8); }
.gen__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.gen__seed { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 99px; background: rgba(20, 18, 30, .55); color: #fff; font: 10.5px/1.5 "Cascadia Code", Consolas, monospace; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); pointer-events: none; }
.gen__foot { display: flex; align-items: center; gap: 14px; padding: 10px 16px 14px; border-top: 1px solid var(--line); }
.gen__steps { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.gen__range { flex: 1; min-width: 60px; -webkit-appearance: none; appearance: none; height: 22px; margin: 0; background: transparent; cursor: pointer; }
.gen__range::-webkit-slider-runnable-track { height: 5px; border-radius: 99px; background: linear-gradient(90deg, #e0508a, #7c5bc7 var(--p, 0%), var(--line) var(--p, 0%)); }
.gen__range::-moz-range-track { height: 5px; border-radius: 99px; background: linear-gradient(90deg, #e0508a, #7c5bc7 var(--p, 0%), var(--line) var(--p, 0%)); }
.gen__range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6.5px; border-radius: 50%; background: #fff; border: 2px solid #7c5bc7; box-shadow: 0 2px 6px rgba(60, 40, 120, .25); }
.gen__range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #7c5bc7; }
.gen__sv { min-width: 4.4em; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }
.gen__go { flex: none; height: 38px; padding: 0 16px; font-size: 13.5px; }
.gen__spin { display: inline-block; font-size: 15px; }
.gen.is-running .gen__spin { animation: spin 1.2s linear infinite; }

/* ══════════════════════════════════════════════════════════════
   设计目标
   ══════════════════════════════════════════════════════════════ */
.pos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.pos__text { display: grid; gap: 18px; }
.pos__panel { padding: 18px 22px; }
.goal__k { margin: 0; font-size: 13px; color: var(--ink-3); }
.goal__t { margin: 0 0 10px; font-size: 22px; }
.goal__list { margin: 0; padding: 0; list-style: none; counter-reset: g; display: grid; gap: 8px; }
.goal__list li { counter-increment: g; display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: baseline; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.goal__list li::before { content: counter(g); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-2); font-size: 12px; font-weight: 700; color: var(--ink); }
.pos__viz { display: grid; place-items: center; }
.orbit { width: 100%; max-width: min(440px, calc(100svh - var(--nav-h) - 2 * var(--slide-pad) - 24px)); display: block; overflow: visible; }
.orbit__ring { fill: none; stroke: #b8e4f6; stroke-width: 2; }
.orbit__hi { fill: none; stroke: url(#orbGrad); stroke-width: 6; stroke-linecap: round; }
.orbit__core { fill: url(#orbGrad); }
.orbit__coret { fill: #fff; font-size: 26px; font-weight: 700; text-anchor: middle; letter-spacing: .06em; }
.orbit__n { cursor: pointer; outline: none; }
.orbit__c { fill: #fff; stroke: #9ed9f2; stroke-width: 2; transition: stroke .3s, fill .3s; }
.orbit__t { fill: #3aa9d6; font-size: 23px; font-weight: 600; text-anchor: middle; transition: fill .3s; pointer-events: none; }
.orbit__n:hover .orbit__c, .orbit__n:focus-visible .orbit__c { stroke: var(--pink); }
.orbit__n.is-on .orbit__c { fill: #fff5f9; stroke: var(--pink); stroke-width: 3; }
.orbit__n.is-on .orbit__t { fill: var(--ink); }
.orbit__sub { font-size: 15px; fill: var(--ink-3); font-weight: 600; text-anchor: middle; transition: fill .3s; }
.orbit__sub--top { text-anchor: start; }
.orbit__sub.is-on { fill: var(--ink); }

/* ══════════════════════════════════════════════════════════════
   用户旅程
   ══════════════════════════════════════════════════════════════ */
.jr { display: grid; grid-template-columns: minmax(0, 370px) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 48px); align-items: center; }
.jr__text { display: grid; gap: 18px; align-content: center; min-width: 0; }
.jr__panel { padding: 16px 20px; }
.jr__ph { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n t" "n m"; column-gap: 12px; align-items: center; margin-bottom: 12px; }
.jr__pn { grid-area: n; font: 800 32px/1 var(--font-en); background: var(--grad-deep); -webkit-background-clip: text; background-clip: text; color: transparent; }
.jr__pt { grid-area: t; margin: 0; font-size: 20px; line-height: 1.3; }
.jr__moods { grid-area: m; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.jr__moods > b { font-weight: 400; color: var(--ink-3); }
.jr__mood { display: inline-flex; align-items: center; gap: 6px; }
.jr__mood i { width: 12px; height: 3px; border-radius: 2px; }
.jr__dl { margin: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px 12px; font-size: 14px; line-height: 1.65; }
.jr__dl dt { padding-top: 2px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.jr__dl dd { margin: 0; color: var(--ink-2); }
.jr__dl dd.is-pain { color: var(--ink); font-weight: 600; }
.jr__chart { padding: 14px 18px 6px; min-width: 0; }
.jr__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
/* 「介入后」也画着介入前那条线，所以介入前的色键一直是实的 */
.jr .seg__b[data-v="before"] .seg__dot { opacity: 1; }
.jr__note { margin: 0; font-size: 12px; color: var(--ink-3); }
.jr__stage { overflow-x: auto; scrollbar-width: thin; }
.jr__svg { display: block; width: 100%; min-width: 600px; height: auto; max-height: calc(100svh - var(--nav-h) - 2 * var(--slide-pad) - 70px); overflow: visible; }
.jr__svg text { font-family: var(--font); }
.jr__grid line { stroke: var(--line); stroke-width: 1; }
.jr__grid line.is-zero { stroke: var(--line-2); }
.jr__axis { font-size: 12px; fill: var(--ink-3); }
.jr__band { fill: var(--bg-2); transition: x .35s var(--ease); }
.jr__cross { stroke: var(--ink-3); stroke-width: 1; opacity: 0; pointer-events: none; }
.jr__svg.is-hover .jr__cross { opacity: .45; }
.jr__area { fill: #7c5bc7; opacity: .1; pointer-events: none; }
.jr__line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.jr__dot { stroke: #fff; stroke-width: 2; pointer-events: none; transition: r .25s var(--ease); }
.jr__dot.is-sel { r: 6.5px; }
.jr__lift { pointer-events: none; transition: opacity .25s; }
.jr__lift line { stroke: #7c5bc7; stroke-width: 1.5; }
.jr__lift path { fill: none; stroke: #7c5bc7; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.jr__ann { font-size: 12px; font-weight: 600; fill: var(--ink-2); pointer-events: none; }
.jr__end { font-size: 12px; fill: var(--ink-2); pointer-events: none; }
.jr__x { font-size: 13px; fill: var(--ink-3); pointer-events: none; transition: fill .2s; }
.jr__x.is-sel { fill: var(--ink); font-weight: 700; }
.jr__hit { fill: transparent; cursor: pointer; outline: none; }
.jr__hit:focus-visible { stroke: var(--free); stroke-width: 2; }

/* ══════════════════════════════════════════════════════════════
   流程梳理
   ══════════════════════════════════════════════════════════════ */
.flow__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 24px; margin-bottom: 16px; }
.flow__ctl { display: grid; justify-items: end; gap: 10px; }
.flow__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-2); }
.flg { display: inline-flex; align-items: center; gap: 7px; }
.flg::before { content: ""; width: 18px; height: 12px; border-radius: 4px; border: 1.5px solid #aaa5bd; background: #fff; }
.flg--sys::before { background: #efedf5; border-color: #efedf5; }
.flg--dec::before { width: 12px; height: 12px; transform: rotate(45deg) scale(.85); border-radius: 2px; border-color: #c792b8; }
.flg--ui::before { border: 1.5px dashed #e07aa7; background: #fff5f9; border-radius: 99px; }
/* 流程图比正文宽，最多吃满视口；用 margin 外扩（.rv 会把 transform 清掉） */
.flow { position: relative; padding: 8px 6px; overflow: hidden; }
@media (min-width: 1100px) { .flow { --fw: min(100vw - 64px, 1400px); width: var(--fw); margin-left: calc((100% - var(--fw)) / 2); } }
.flow__scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.flow__stage { position: relative; min-width: 1040px; }
.flow__svg { display: block; width: 100%; height: auto; overflow: visible; }
.flow__svg text { font-family: var(--font); }
.fn { transition: opacity .35s var(--ease); }
.fn__s { fill: #fff; stroke: #b4afc6; stroke-width: 1.4; transition: stroke .25s, fill .25s, stroke-width .25s; }
.fn__t { fill: var(--ink); text-anchor: middle; font-weight: 500; pointer-events: none; }
.fn--sys .fn__s { fill: #efedf5; stroke: #efedf5; }
.fn--dec .fn__s { stroke: #c792b8; }
.fn--term .fn__s { fill: var(--ink); stroke: var(--ink); }
.fn--term .fn__t { fill: #fff; font-weight: 600; }
.fn--ui { cursor: pointer; outline: none; }
.fn--ui .fn__s { fill: #fff5f9; stroke: #e07aa7; stroke-dasharray: 5 4; }
.fn--ui .fn__t { fill: #6b2e4c; font-weight: 600; }
.fn__num { fill: #e07aa7; }
.fn__numt { fill: #fff; font-size: 11px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.fn__back { font-size: 12px; font-weight: 600; fill: #b0306a; text-anchor: middle; pointer-events: none; }
.fn--ui:hover .fn__s, .fn--ui:focus-visible .fn__s, .fn.is-hl .fn__s { stroke: #e0508a; stroke-width: 2.4; stroke-dasharray: none; }
.fe { transition: opacity .35s var(--ease); pointer-events: none; }
.fe__p { fill: none; stroke: #aaa5bd; stroke-width: 1.5; stroke-linejoin: round; }
.fe__tip { fill: #aaa5bd; }
.fe__l { font-size: 13px; font-weight: 700; fill: var(--ink-2); }
.fe--ui .fe__p { stroke: #e07aa7; stroke-dasharray: 5 4; }
.fe--ui .fe__tip { fill: #e07aa7; }
.fe.is-hl .fe__p { stroke: #e0508a; stroke-width: 2.6; stroke-dasharray: none; }
.fe.is-hl .fe__tip { fill: #e0508a; }
.flow__stage[data-mode="base"] .fn--ui, .flow__stage[data-mode="base"] .fe--ui { opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.flow__stage.is-focus .fn:not(.is-hl), .flow__stage.is-focus .fe:not(.is-hl) { opacity: .22; }
.flow__below { margin-top: 12px; min-height: 196px; }
.tp__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tp { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; text-align: left; cursor: default; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.tp:hover, .tp.is-on { border-color: #f3a9c8; box-shadow: 0 10px 22px -14px rgba(224, 80, 138, .6); transform: translateY(-2px); }
.tp__n { width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: #e07aa7; color: #fff; font-size: 12px; font-weight: 700; }
.tp__b { display: grid; gap: 1px; }
.tp__b b { font-size: 14px; line-height: 1.5; }
.tp__b span { font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.flow__base { margin: 0; padding: 18px 22px; border-radius: 16px; background: #fff; border: 1px solid var(--line); font-size: 15px; line-height: 1.95; color: var(--ink-2); max-width: 820px; }
.flow__base b { color: var(--ink); }
.flow__below[data-mode="touch"] .flow__base, .flow__below[data-mode="base"] .tp__grid { display: none; }

/* ══════════════════════════════════════════════════════════════
   流失分析（模拟系统）
   ══════════════════════════════════════════════════════════════ */
.fx { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(300px, 1fr); grid-template-areas: "head head" "stats panel" "chart panel" "foot foot"; gap: 12px 18px; }
.fx__head { grid-area: head; display: grid; gap: 6px; }
.fx__head .sechead { max-width: 760px; }
.fx__note { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.fx__stats { grid-area: stats; display: grid; grid-template-columns: 1.1fr 1fr 1.25fr; gap: 10px; }
.fx__tile { display: grid; align-content: start; gap: 2px; padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); min-width: 0; }
.fx__tile > b { font-size: 19px; line-height: 1.35; }
.fx__tile > span:last-child, .fx__nextrow > span { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.fx__tk { font-size: 12px; color: var(--ink-3); }
.fx__tile--hero { background: linear-gradient(135deg, #fff, #fdf1f7 60%, #eef4fe); }
.fx__hero { font-size: 38px !important; line-height: 1.05 !important; font-weight: 800; letter-spacing: -.02em; }
.fx__tile--next { border-color: #f3c1d7; }
.fx__nextrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fx__apply { flex: none; height: 28px; padding: 0 12px; border: 0; border-radius: 99px; background: var(--grad-deep); color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.fx__apply[hidden] { display: none; }
.fx__chart { grid-area: chart; padding: 12px 16px 10px; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.fx__stage { position: relative; flex: 1 1 auto; min-height: 220px; }
.fx__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx__svg text { font-family: var(--font); }
.fx__cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* 桌面：整个模拟器正好一屏高，图表吃掉剩下的高度 */
@media (min-width: 1101px) {
  .fx { height: calc(100svh - var(--nav-h) - 2 * var(--slide-pad)); min-height: 560px; max-height: 860px; grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .fx__panel { min-height: 0; overflow: auto; scrollbar-width: thin; }
}
.fx__grid { stroke: var(--line); stroke-width: 1; }
.fx__zone { fill: transparent; cursor: pointer; outline: none; transition: fill .2s; }
.fx__zone:hover { fill: rgba(143, 170, 237, .07); }
.fx__zone.is-sel { fill: rgba(224, 80, 138, .07); }
.fx__zone:focus-visible { stroke: var(--free); stroke-width: 2; }
.fx__col { font-size: 13px; font-weight: 600; fill: var(--ink-3); pointer-events: none; }
.fx__col.is-sel { fill: #c43a74; font-weight: 800; }
.fx__rate { font-size: 12px; fill: var(--ink-3); font-variant-numeric: tabular-nums; pointer-events: none; }
.fx__rate.is-up { fill: #0a7a3c; font-weight: 700; }
.fx__rib { fill: #9b7fd4; opacity: .16; pointer-events: none; transition: opacity .3s; }
.fx__rib.is-sel { fill: #e0508a; opacity: .2; }
.fx__drip { fill: #b9b5c8; opacity: .32; pointer-events: none; }
.fx__drip.is-worst { fill: #d64545; opacity: .38; }
.fx__bar { fill: #8f74cc; }
.fx__bar:hover { filter: brightness(1.15); }
.fx__ghost { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .5; pointer-events: none; }
.fx__lost { font-size: 12px; fill: var(--ink-3); font-variant-numeric: tabular-nums; pointer-events: none; }
.fx__lost.is-worst { fill: #b3261e; font-weight: 700; }
.fx__lostk { font-size: 12px; fill: var(--ink-3); }
.fx__end { font-size: 13px; font-weight: 700; fill: var(--ink); }
.fx__back { cursor: pointer; outline: none; }
.fx__backp { fill: none; stroke: #2f6ad6; opacity: .35; stroke-linecap: round; transition: opacity .2s; }
.fx__backtip { fill: none; stroke: #2f6ad6; stroke-width: 2; opacity: .5; }
.fx__backt { font-size: 12.5px; font-weight: 600; fill: #2f6ad6; text-anchor: middle; }
.fx__back:hover .fx__backp, .fx__back.is-sel .fx__backp { opacity: .8; }
.fx__back.is-sel .fx__backt { font-weight: 800; }
.fx__legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--ink-2); }
.fx__legend li { display: inline-flex; align-items: center; gap: 6px; }
.fx__legend i { width: 14px; height: 10px; border-radius: 3px; }
.k-keep { background: #8f74cc; }
.k-drop { background: #cfcbdb; }
.k-worst { background: #e59999; }
.k-ghost { border: 1.2px dashed var(--ink); }
.fx__panel { grid-area: panel; padding: 16px 18px; display: grid; align-content: start; gap: 10px; }
.fx__ph { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "k v" "t v"; align-items: end; }
.fx__pk { grid-area: k; margin: 0; font-size: 12px; color: var(--ink-3); }
.fx__pt { grid-area: t; margin: 0; font-size: 22px; line-height: 1.3; }
.fx__pv { grid-area: v; margin: 0; display: grid; justify-items: end; }
.fx__pv b { font-size: 30px; line-height: 1; font-weight: 800; }
.fx__pv span { font-size: 12px; color: var(--ink-3); }
.fx__sub { margin: 2px 0 0; font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .06em; }
.fx__why ul { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.fx__fixes { display: grid; gap: 6px; }
.fx__fix { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--bg-2); transition: background .25s; }
.fx__fix.is-on { background: #fdeff5; }
.fx__ft { display: grid; line-height: 1.45; min-width: 0; }
.fx__ft b { font-size: 13.5px; font-weight: 600; }
.fx__ft small { font-size: 11.5px; color: var(--ink-3); }
.fx__foot { grid-area: foot; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.fx__events { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); }
.fx__events code { font-size: 12px; }
.fx__btns { display: flex; gap: 8px; }
.fx__btn { height: 36px; padding: 0 16px; font-size: 13.5px; }

/* ══════════════════════════════════════════════════════════════
   UX 策略：痛点 → 设计方向 → 界面方案
   ══════════════════════════════════════════════════════════════ */
.st { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(24px, 3.6vw, 56px); align-items: center; }
.st__text { display: grid; gap: 16px; }
.st__board { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(34px, 5vw, 80px); }
.st__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.st__col { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr; gap: 10px; min-width: 0; }
.st__ch { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); }
.st__list { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.st__col--pain .st__list { gap: 12px; }
.st__col--strat .st__list { gap: 18px; }
.st__n { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-align: left; cursor: pointer; transition: opacity .25s, border-color .25s, box-shadow .25s; }
.st__n.is-dim { opacity: .4; }
.st__n.is-on { border-color: var(--line-2); box-shadow: 0 8px 20px -14px rgba(60, 40, 120, .45); }
.st__n--pain { min-height: 38px; padding: 6px 12px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.st__n--pain > span:first-child { flex: 1; min-width: 0; }
.st__dots { flex: none; display: inline-flex; gap: 3px; }
.st__dots i { width: 7px; height: 7px; border-radius: 50%; }
.st__n--strat { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 66px; padding: 10px 14px 10px 20px; border-radius: 14px; }
.st__n--strat::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--c); }
.st__n--strat b { font-size: 16px; line-height: 1.4; }
.st__n--strat small { font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.st__n--strat.is-pin { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 10px 24px -14px rgba(60, 40, 120, .5); }
.st__n--design { min-height: 31px; padding: 4px 10px; font-size: 13px; color: var(--ink-2); }
.st__n--design > span:nth-of-type(2) { flex: 1; min-width: 0; }
.st__n--design:hover { color: var(--ink); }
.st__go { font-style: normal; color: var(--ink-3); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.st__n--design:hover .st__go, .st__n--design:focus-visible .st__go { opacity: 1; transform: none; }
.st__l { fill: none; stroke-width: 1.5; opacity: .28; transition: opacity .25s, stroke-width .25s; }
.st__l.is-on { opacity: .9; stroke-width: 2; }
.st__l.is-dim { opacity: .06; }

/* ══════════════════════════════════════════════════════════════
   激励设计
   ══════════════════════════════════════════════════════════════ */
.cr__note { padding: 16px 20px; }
.cr__ring { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--c); }
.cr__ring i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.cr__nt { margin: 2px 0 6px; font-size: 20px; }
.cr__nx { margin: 0; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.cr__loop { display: grid; place-items: center; }
.loop { width: 100%; max-width: min(430px, calc(100svh - var(--nav-h) - 2 * var(--slide-pad) - 30px)); display: block; overflow: visible; }
.loop text { font-family: var(--font); }
.loop__base { fill: none; stroke: var(--line); stroke-width: 10; }
.loop__ap { fill: none; stroke: var(--c); stroke-width: 10; stroke-linecap: round; opacity: .3; transition: opacity .3s; }
.loop__tip { fill: none; stroke: var(--c); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .45; }
.loop__arc.is-on .loop__ap, .loop__arc.is-on .loop__tip { opacity: 1; }
.loop__rt { font-size: 15px; font-weight: 800; fill: var(--c); text-anchor: middle; letter-spacing: .1em; }
.loop__n { cursor: pointer; outline: none; }
.loop__halo { fill: var(--c); opacity: 0; transition: opacity .25s; }
.loop__c { fill: #fff; stroke: var(--c); stroke-width: 2; transition: fill .25s, stroke-width .25s; }
.loop__t { font-size: 14px; font-weight: 700; fill: var(--ink); text-anchor: middle; pointer-events: none; transition: fill .25s; }
.loop__n:hover .loop__c, .loop__n:focus-visible .loop__c { stroke-width: 3.5; }
.loop__n.is-on .loop__c { fill: var(--c); }
.loop__n.is-on .loop__t { fill: #fff; }
.loop__n.is-on .loop__halo { opacity: .16; }
.loop__token { fill: #fff; stroke: #e0508a; stroke-width: 3; }
.loop__ct { font-size: 28px; font-weight: 800; fill: var(--ink); text-anchor: middle; }
.loop__cs { font-size: 13px; fill: var(--ink-3); text-anchor: middle; }

.cr { position: absolute; inset: 0; }
.cr__scr { position: absolute; inset: 0; display: none; background: #fff; overflow: hidden; }
.cr__scr.is-on { display: block; animation: pageIn .35s var(--ease); }
.cr__giftbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(3px); transform: scale(1.05); }
.cr__scr--gift .gf { opacity: 1; }
.cr__scr--gift .gf__box { transform: none; }
.cr__pulse { animation: pulseBtn 1.8s ease-in-out infinite; }
@keyframes pulseBtn { 50% { box-shadow: 0 0 0 8px rgba(249, 128, 169, .25), 0 6px 14px -6px rgba(200, 120, 190, .6); } }
.sec:not(.is-live) .cr__pulse, .sec:not(.is-live) .tk__gift { animation-play-state: paused; }

.tk__hero { position: absolute; left: 0; right: 0; top: 0; height: 300px; overflow: hidden; background: linear-gradient(165deg, #ffd6e7 0%, #e7d6fa 55%, #cfe4fb 100%); }
.tk__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: .55; mix-blend-mode: soft-light; }
.tk__gift { position: absolute; left: 50%; top: 92px; width: 200px; transform: translateX(-50%); filter: drop-shadow(0 8px 12px rgba(150, 20, 80, .3)); animation: bob 3.2s ease-in-out infinite; }
.tk__cloud { position: absolute; left: 0; right: 0; bottom: -1px; height: 64px; background: radial-gradient(70px 56px at 12% 100%, #fff 98%, transparent 100%), radial-gradient(90px 64px at 36% 100%, #fff 98%, transparent 100%), radial-gradient(80px 52px at 66% 100%, #fff 98%, transparent 100%), radial-gradient(74px 60px at 90% 100%, #fff 98%, transparent 100%); }
@keyframes bob { 50% { transform: translate(-50%, -6px); } }
.tk__body { position: absolute; left: 0; right: 0; top: 284px; bottom: 0; padding: 4px 14px 20px; background: #fff; border-radius: 18px 18px 0 0; }
.tk__h { margin: 0 0 2px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 22px; font-weight: 800; color: #a0254f; letter-spacing: .06em; }
.tk__h i { width: 54px; height: 1.5px; background: linear-gradient(90deg, transparent, #c0806a); }
.tk__h i:last-child { transform: scaleX(-1); }
.tk__row { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; height: 62px; padding: 0 6px; border-bottom: 1px solid #f1eef4; transition: background .3s, box-shadow .3s; }
.tk__t { margin: 0; font-size: 15px; color: #333; }
.tk__plus { margin-left: 10px; color: #f5a3b7; font-size: 14px; }
.tk__sub { margin: 0; font-size: 11px; color: #9a9aa4; }
.tk__btn { width: 92px; height: 34px; border: 0; border-radius: 99px; font-size: 14px; color: #fff; transition: background .2s, box-shadow .2s, transform .15s; }
.tk__btn.is-claim { background: linear-gradient(180deg, #ff7ed2, #f25fb4); box-shadow: 0 3px 0 #d44c98; }
.tk__btn.is-go { background: linear-gradient(180deg, #ffb6d1, #f593b8); box-shadow: 0 3px 0 #e7839f; }
.tk__btn.is-done { background: #cfcfd4; box-shadow: 0 3px 0 #b9b9c0; }
.tk__btn:active { transform: translateY(2px); }
.tk__float { position: absolute; right: 36px; top: 4px; font-weight: 800; color: #f25fb4; pointer-events: none; animation: floatUp .9s ease-out forwards; }
@keyframes floatUp { to { transform: translateY(-22px); opacity: 0; } }
.cr__scr--tasks.is-back .tk__row[data-back] { background: #eef4fe; box-shadow: inset 3px 0 0 #2f6ad6; }

.me { background: #fff; }
.me__head { position: absolute; top: 0; left: 0; right: 0; height: 300px; overflow: hidden; }
.me__silk { width: 100%; height: 100%; object-fit: cover; opacity: .9; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.me__user { position: absolute; top: 186px; left: 60px; right: 60px; display: grid; justify-items: center; gap: 12px; }
.me__avatar { width: 108px; height: 108px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1.5px #777; }
.me__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.me__name { margin: 0; font-size: 20px; color: #333; font-family: -apple-system, "Segoe UI", var(--font); }
.me__wallet { display: flex; align-items: center; gap: 22px; height: 38px; padding: 0 16px 0 14px; border: 1.2px solid #ccc; border-radius: 99px; background: #fff; color: #333; font-size: 20px; transition: box-shadow .3s, border-color .3s; }
.me__wallet .ico { width: 24px; height: 20px; }
.me__wallet b { font-weight: 400; min-width: 2em; text-align: center; }
.me__arrow { color: #bbb; font-size: 16px; }
.me.is-wallet .me__wallet { border-color: #e0508a; animation: ring 1.8s ease-in-out infinite; }
@keyframes ring { 50% { box-shadow: 0 0 0 8px rgba(224, 80, 138, .18); } }
.me__menu { position: absolute; top: 400px; left: 12px; right: 12px; }
.me__row { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 58px; border: 0; border-bottom: 1px solid #eee; background: none; font-size: 15px; color: #999; padding: 0; }
.me__row .ico { width: 8px; height: 14px; color: #777; }
.me__group { position: absolute; top: 648px; left: 50px; right: 50px; display: flex; align-items: center; justify-content: space-between; }
.me__group > span:first-child { display: grid; justify-items: center; gap: 2px; }
.me__group b { font-weight: 400; font-size: 16px; color: #555; }
.me__group small { font-size: 12px; color: #888; }
.me__gi { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #c48fcf; box-shadow: 0 0 0 1.5px #d9b3e3; }
.me__gi .ico { width: 26px; height: 26px; }
.me__gi i { position: absolute; right: -4px; bottom: -2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 1.2px solid #8fb4ef; color: #8fb4ef; font: 700 12px/13px var(--font); font-style: normal; text-align: center; }
.me__out { position: absolute; left: 50%; top: 730px; width: 124px; height: 34px; margin-left: -62px; border: 1px solid #ccc; border-radius: 99px; background: #fff; font-size: 16px; color: #333; }

.fb { background: linear-gradient(170deg, #f1f7ff, #fdf4f8 60%); }
.fb__body { position: absolute; top: 100px; left: 12px; right: 12px; }
.fb__type { display: flex; align-items: center; width: 100%; height: 48px; padding: 0 6px 0 0; border: 0; border-bottom: 1px solid #e5e5ea; background: none; font-size: 15px; color: #999; text-align: left; }
.fb__type i { font-style: normal; color: #f23b3b; margin-right: 6px; }
.fb__type .ico { margin-left: auto; width: 8px; height: 14px; transform: rotate(90deg); color: #333; }
.fb__contact { width: 100%; height: 48px; border: 0; border-bottom: 1px solid #e5e5ea; background: none; font: 15px var(--font); color: #333; outline: none; padding: 0 12px; }
.fb__contact::placeholder { color: #aaa; }
.fb__area { position: relative; margin-top: 22px; height: 130px; border: 1px solid #e6e6ee; border-radius: 8px; background: rgba(255, 255, 255, .5); }
.fb__desc { width: 100%; height: 100%; padding: 12px 14px 28px; border: 0; background: none; resize: none; font: 14px/1.6 var(--font); color: #333; outline: none; }
.fb__desc::placeholder { color: #aaa; }
.fb__dc { position: absolute; right: 12px; bottom: 10px; font-size: 13px; color: #aaa; }
.fb__up { margin: 26px 0 10px 12px; font-size: 14px; color: #999; }
.fb__add { width: 100px; aspect-ratio: 1; }
.fb__reward { margin: 30px 12px 0; padding: 10px 12px; border-radius: 10px; background: rgba(143, 180, 239, .12); font-size: 12.5px; line-height: 1.7; color: #5d86d6; }
.fb__foot { position: absolute; left: 12px; right: 12px; bottom: 44px; }
.fb__submit { height: 50px; font-size: 20px; }
.fb__submit[disabled] { background: #c8d7f3; }

/* ══════════════════════════════════════════════════════════════
   关键界面：章节标题 + 分栏；样机高度要让开上面这一行
   ══════════════════════════════════════════════════════════════ */
#screens.slide { --phone-reserve: 118px; }
.sc__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; }
.sc__top .sechead__bar { display: none; }
.sc__tabs { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); }
.sc__tab { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border: 0; border-radius: 12px; background: transparent; font-size: 14.5px; color: var(--ink-2); white-space: nowrap; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.sc__tab:hover { color: var(--ink); }
.sc__tab.is-on { background: #fff; color: var(--ink); font-weight: 700; box-shadow: 0 2px 10px -3px rgba(60, 40, 120, .2); }
.sc__dot { width: 8px; height: 8px; border-radius: 50%; }
.sc__panel { animation: pageIn .4s var(--ease); }
.pnh { display: grid; gap: 8px; }
.pnh__t { margin: 0; font-size: clamp(22px, 2vw, 28px); line-height: 1.3; font-weight: 800; }
.pnh__lede { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--ink-2); }
.pnh__st { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; }
.pnh__k { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); }
.pnh__chip { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; }
.pnh__chip i { width: 8px; height: 8px; border-radius: 50%; }
.pnh__chip:hover { border-bottom-color: currentColor; }

/* ══════════════════════════════════════════════════════════════
   首次体验
   ══════════════════════════════════════════════════════════════ */
.fo { position: absolute; inset: 0; }
.fo .hm { display: none; }
.fo[data-stage="home"] .hm { display: block; }
.fo[data-stage="home"] .lg { display: none; }
.fo__aside { display: grid; align-content: center; min-width: 0; }
.fo__card { padding: 18px 22px; }
.fo__card h3 { margin: 0 0 10px; font-size: 20px; }
.fo__notes { display: grid; gap: 8px; }
.fo__note { display: grid; grid-template-columns: 24px 1fr; gap: 2px 10px; text-align: left; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; transition: border-color .25s, box-shadow .25s, transform .25s var(--ease); }
.fo__note:hover, .fo__note.is-on { border-color: #f3a9c8; box-shadow: 0 10px 24px -14px rgba(224, 80, 138, .55); transform: translateX(-4px); }
.fo__num { grid-row: span 2; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; }
.fo__nt { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.fo__nt em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink-3); background: var(--bg-2); padding: 1px 7px; border-radius: 99px; }
.fo__nt em.is-hi { color: #8a2f58; background: #fdeaf2; }
.fo__nx { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.fo__hl { position: absolute; z-index: 26; border: 3px solid #f06a9b; border-radius: 16px; box-shadow: 0 0 0 5px rgba(240, 106, 155, .22), inset 0 0 0 999px rgba(240, 106, 155, .06); opacity: 0; pointer-events: none; transition: left .3s var(--ease), top .3s var(--ease), width .3s var(--ease), height .3s var(--ease), opacity .2s; }
.fo__hl.is-on { opacity: 1; }
.fo__marks[hidden] { display: none; }
.fo__mk { position: absolute; z-index: 25; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 700 12px/1 var(--font); box-shadow: 0 0 0 2px #fff; pointer-events: none; }

.nb--plain { grid-template-columns: 90px 1fr 90px; }
.lg { position: absolute; inset: 0; background: #e8c9cf; }
.lg__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.lg__fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgba(236, 184, 196, .35) 72%, rgba(60, 40, 60, .55) 100%); }
.lg__txt { position: absolute; left: 0; right: 0; top: 540px; text-align: center; }
.lg__h { margin: 0; font-size: 34px; font-weight: 600; letter-spacing: .08em; color: #d9b690; text-shadow: 0 2px 10px rgba(120, 70, 40, .35); }
.lg__s { margin: 6px 0 0; font-size: 15px; color: #fff; letter-spacing: .06em; text-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.lg__btn { position: absolute; left: 14px; right: 14px; width: auto; top: 652px; height: 56px; font-size: 21px; font-weight: 500; }
.lg__agree { position: absolute; left: 0; right: 0; top: 730px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 11.5px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.lg__agree a { color: #9fd0ff; }
.lg__ck { width: 17px; height: 17px; margin-right: 6px; padding: 0; border: 1.2px solid rgba(255, 255, 255, .9); border-radius: 3px; background: rgba(255, 255, 255, .15); color: #3ab34a; display: grid; place-items: center; }
.lg__ck .ico { width: 12px; height: 12px; opacity: 0; transition: opacity .15s; }
.lg__ck.is-on { background: #fff; }
.lg__ck.is-on .ico { opacity: 1; }
.lg__ck.shake { animation: shake .45s; box-shadow: 0 0 0 3px rgba(255, 90, 120, .6); }

.gf { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; padding-top: 118px; background: rgba(28, 26, 34, .74); opacity: 0; transition: opacity .3s; }
.gf.is-on { opacity: 1; }
.gf__t { margin: 0; font-size: 25px; font-weight: 700; color: #fff; letter-spacing: .04em; }
.gf__x { position: absolute; right: 64px; top: 190px; width: 26px; height: 26px; padding: 0; border: 0; background: none; color: #fff; z-index: 2; }
.gf__x .ico { width: 26px; height: 26px; }
.gf__box { position: relative; width: 300px; margin-top: 44px; transform: scale(.7); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1) .1s; }
.gf.is-on .gf__box { transform: none; }
.gf__card { position: absolute; left: 31%; top: 8%; width: 38%; display: grid; justify-items: center; color: #f0587a; transform: rotate(1.5deg); }
.gf__card b { font-size: 50px; line-height: 1; font-weight: 700; }
.gf__card small { position: absolute; right: -4px; top: 30px; font-size: 11px; }
.gf__card span { margin-top: 4px; font-size: 12px; padding: 0 8px; border: 1px solid #f0587a; border-radius: 99px; }
.gf__ring { position: absolute; left: -20px; right: -20px; top: 38%; height: 70px; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 50%; transform: rotate(-12deg); pointer-events: none; }
.gf__btn { width: 150px; height: 44px; margin-top: 26px; font-size: 20px; }

.hm { position: absolute; inset: 0; background: #fff; }
.hm__scroll { position: absolute; left: 0; right: 0; top: 0; bottom: 84px; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.hm__scroll::-webkit-scrollbar { display: none; }
.hm__hero { height: 345px; overflow: hidden; background: #333; }
.hm__heroimg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.hm__top { position: absolute; left: 0; right: 0; top: 0; height: 92px; background: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)); pointer-events: none; }
.hm__top .nb__t { color: #fff; }
.hm__kk { position: relative; display: flex; gap: 10px; padding: 0 12px; margin-top: -36px; }
.hm__k { position: relative; flex: 1; height: 44px; border: 0; border-radius: 10px; color: #fff; font-size: 17px; font-weight: 600; letter-spacing: .08em; box-shadow: 0 6px 14px -6px rgba(150, 110, 190, .6), inset 0 1px 0 rgba(255, 255, 255, .35); }
.hm__k i { position: absolute; left: 14px; top: 5px; width: 22px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .6); box-shadow: 10px 0 0 rgba(255, 255, 255, .6); }
.hm__k--0 { background: linear-gradient(135deg, #fba5c4, #f58db3); }
.hm__k--1 { background: linear-gradient(135deg, #efa7cb, #bba8e6); }
.hm__k--2 { background: linear-gradient(135deg, #b1a8ec, #7dbef4); }
.hm__sec { padding: 14px 12px 10px; }
.hm__st { margin: 0 0 10px; display: flex; justify-content: space-between; align-items: center; font-size: 16px; color: #333; }
.hm__st span { display: flex; align-items: center; gap: 4px; font-size: 14px; color: #c3c3c8; }
.hm__st .ico { width: 7px; height: 12px; }
.hm__feed { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.hm__col { display: grid; gap: 10px; }
.hm__card { border-radius: 12px; background: #fff; box-shadow: 0 2px 12px rgba(40, 30, 80, .08); overflow: hidden; }
.hm__img { width: 100%; object-fit: cover; object-position: top; border-radius: 12px; }
.hm__ct { margin: 8px 10px 4px; font-size: 12px; line-height: 1.5; color: #333; }
.hm__cm { display: flex; justify-content: space-between; align-items: center; padding: 0 10px 10px; }
.hm__tag { font-size: 10px; color: #6b6b78; background: #eef0fa; padding: 2px 8px; border-radius: 4px; }
.hm__like { display: flex; align-items: center; gap: 3px; border: 0; background: none; padding: 2px; font-size: 11px; color: #9a9aa4; }
.hm__like .ico { width: 14px; height: 14px; }
.hm__like.is-on { color: #f06a9b; }
.hm__like.is-on .ico { animation: pop .35s var(--ease); }
.hm__task { position: absolute; right: 12px; top: 566px; z-index: 12; width: 60px; height: 60px; border: 0; border-radius: 50%; background: linear-gradient(140deg, #f69ac0, #92b6ef); color: #fff; font-size: 14px; line-height: 1.15; letter-spacing: .04em; box-shadow: 0 6px 14px -4px rgba(120, 100, 200, .5); }
.hm__svc { position: absolute; right: 12px; top: 638px; z-index: 12; width: 60px; height: 60px; border: 0; border-radius: 50%; background: rgba(90, 90, 98, .72); color: #fff; display: grid; place-items: center; }
.hm__svc .ico { width: 34px; height: 34px; }
.hm__tb { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; }
.hm__bal { position: absolute; left: 12px; top: 96px; z-index: 12; font-size: 12px; color: #fff; background: rgba(0, 0, 0, .32); padding: 2px 10px; border-radius: 99px; backdrop-filter: blur(4px); }
.hm__bal:empty { display: none; }

/* ══════════════════════════════════════════════════════════════
   同款换装
   ══════════════════════════════════════════════════════════════ */
.sw__note { padding: 18px 22px; }
.sw__nk { margin: 0; font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .08em; }
.sw__note h3 { margin: 2px 0 10px; font-size: 22px; }

.sw { position: absolute; inset: 0; }
.sw__page { position: absolute; inset: 0; display: none; background: linear-gradient(165deg, #f4f6ff 0%, #fdf3f8 55%, #f3f7ff 100%); }
.sw__page.is-on { display: block; animation: pageIn .35s var(--ease); }
.sw__tabs { position: absolute; top: 88px; left: 0; right: 0; height: 50px; display: flex; align-items: center; gap: 24px; padding: 0 24px; overflow-x: auto; scrollbar-width: none; }
.sw__tabs::-webkit-scrollbar { display: none; }
.sw__tab { flex: none; border: 0; background: none; padding: 4px 0; font-size: 17px; color: #c7c8d2; white-space: nowrap; }
.sw__tab.is-on { font-weight: 600; background: linear-gradient(90deg, #F980A9, #8FAAED); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sw__gridwrap { position: absolute; top: 140px; left: 0; right: 0; bottom: 0; overflow-y: auto; padding: 0 12px 120px; scrollbar-width: none; overscroll-behavior: contain; }
.sw__gridwrap::-webkit-scrollbar { display: none; }
.sw__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.sw__col { display: grid; gap: 12px; }
.sw__custom { position: relative; height: 210px; border-radius: 12px; background: linear-gradient(150deg, #eef1fb, #e7eaf6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 6px 14px -8px rgba(80, 90, 140, .25); display: grid; place-content: center; justify-items: center; gap: 6px; color: #c3c9da; font-size: 16px; font-weight: 700; }
.sw__plus .ico { width: 46px; height: 46px; color: #bdc5da; }
.sw__ex { position: absolute; top: 10px; right: 10px; border: 0; background: none; color: #86ace8; font-size: 14px; }
.sw__tpl { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #ddd; transition: box-shadow .2s, transform .2s; }
.sw__tpl img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sw__tpl:active { transform: scale(.98); }
.sw__tpl.is-on { box-shadow: 0 0 0 3px #f59ac1, 0 8px 18px -6px rgba(224, 80, 138, .5); }
.sw__zoom { position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; background: rgba(255, 255, 255, .28); color: #fff; }
.sw__zoom .ico { width: 20px; height: 20px; }
.sw__ck { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #F980A9, #8FAAED); color: #fff; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .3s var(--ease); }
.sw__ck .ico { width: 14px; height: 14px; }
.sw__tpl.is-on .sw__ck { opacity: 1; transform: none; }
.sw__foot { position: absolute; left: 12px; right: 12px; bottom: 34px; z-index: 5; }
.sw__foot--up { bottom: 20px; }
.sw__next, .sw__gen { height: 50px; font-size: 19px; }
.sw__ai { margin: 8px 0 0; font-size: 11px; color: #a9a9b3; text-align: center; }
/* 上传页顶部：模板图 / 用户图 / 生成图 三张斜切并排 */
.sw__trio { position: absolute; top: 88px; left: 0; right: 0; height: 200px; display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; overflow: hidden; }
.sw__trio figure { position: relative; margin: 0 -8px; overflow: hidden; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
.sw__trio figure:first-child { margin-left: 0; clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); }
.sw__trio figure:last-child { margin-right: 0; clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%); }
.sw__trio img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sw__trio figcaption { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 2px 10px; border-radius: 99px; background: rgba(40, 40, 50, .55); color: #fff; font-size: 11px; white-space: nowrap; }
.sw__upbody { position: absolute; top: 300px; left: 12px; right: 12px; }
.sw__gender { display: grid; grid-template-columns: 1fr 76px 76px; align-items: center; gap: 2px; height: 44px; padding: 0 4px 0 16px; border-radius: 99px; background: #eceef8; box-shadow: inset 0 1px 3px rgba(80, 90, 140, .12); font-size: 15px; color: #555; }
.sw__g { height: 36px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .55); color: #b8bac6; font-size: 16px; }
.sw__g.is-on { background: linear-gradient(90deg, #F99BBE, #86B9F0); color: #fff; }
.sw__uh { margin: 22px 0 6px; display: flex; align-items: center; font-size: 18px; font-weight: 600; color: #333; }
.sw__uh em { font-style: normal; color: #8fb4ef; }
.sw__uh .ico { width: 22px; height: 22px; margin-left: 6px; color: #9db8ea; }
.sw__cnt { margin-left: auto; font-size: 12px; font-weight: 400; color: #9a9aa6; }
.sw__uc { margin: 0 0 12px; font-size: 12.5px; line-height: 1.65; color: #a5a5b0; }
.sw__slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.sw__slot { aspect-ratio: 1; border-radius: 8px; overflow: hidden; animation: pop .3s var(--ease); }
.sw__slot img { width: 100%; height: 100%; object-fit: cover; }
.sw__add { aspect-ratio: 1; border: 0; border-radius: 10px; background: linear-gradient(150deg, #eef1fb, #e5e8f4); color: #c0c6d8; display: grid; place-items: center; box-shadow: 0 5px 12px -6px rgba(80, 90, 140, .3); }
.sw__add .ico { width: 26px; height: 26px; }
.sw__picker { width: 100%; padding: 14px 12px 32px; border-radius: 18px 18px 0 0; background: #fff; }
.sw__ph { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 16px; color: #222; }
.sw__pcnt { font-size: 13px; color: #999; }
.sw__pdone { height: 32px; padding: 0 14px; border: 0; border-radius: 6px; background: #07c160; color: #fff; font-size: 14px; }
.sw__pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.sw__pc { position: relative; aspect-ratio: 1; padding: 0; border: 0; overflow: hidden; background: #eee; }
.sw__pc img { width: 100%; height: 100%; object-fit: cover; }
.sw__pk { position: absolute; top: 5px; right: 5px; width: 21px; height: 21px; border-radius: 50%; border: 1.5px solid #fff; background: rgba(0, 0, 0, .18); display: grid; place-items: center; color: #fff; font-size: 12px; }
.sw__pc.is-on .sw__pk { background: #07c160; border-color: #07c160; }
.sw__pc.is-on .sw__pk::after { content: "✓"; font-weight: 700; }
.sw__pc.is-on img { opacity: .78; }
.sw__pc.is-bad { animation: shake .4s; }
.sw__pc.is-bad::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px #ff4d6d; }
.sw__pf { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; }
.sw__pwarn { margin: 0; min-height: 1.4em; font-size: 13px; color: #e0405e; }
.sw__fill { flex: none; height: 30px; padding: 0 12px; border: 1px solid #ddd; border-radius: 99px; background: #fff; font-size: 13px; color: #555; }
.sw__genbody { position: absolute; top: 118px; left: 26px; right: 26px; display: grid; justify-items: center; gap: 18px; }
.sw__orb { position: relative; width: 196px; height: 196px; margin-bottom: 8px; }
.sw__orb i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; border-top-color: #F980A9; animation: spin 1.4s linear infinite; }
.sw__orb i:nth-child(2) { inset: 9px; border-top-color: #D0ABDE; animation-duration: 2.1s; animation-direction: reverse; }
.sw__orb i:nth-child(3) { inset: 18px; border-top-color: #6CCDF2; animation-duration: 2.8s; }
.sw__orbimg { position: absolute; inset: 28px; width: calc(100% - 56px); height: calc(100% - 56px); border-radius: 50%; object-fit: cover; object-position: top; filter: blur(8px) saturate(1.2); }
.sw__orbimg.is-dev { animation: develop 5.2s linear forwards; }
@keyframes develop { to { filter: blur(0) saturate(1); } }
.sw__track { width: 100%; height: 8px; border-radius: 99px; background: #e8e6f1; overflow: hidden; }
.sw__pbar { display: block; height: 100%; background: linear-gradient(90deg, #F980A9, #D0ABDE, #6CCDF2); transform-origin: left; transform: scaleX(0); }
.sw__phases { margin: 0; padding: 0; list-style: none; width: 100%; display: grid; gap: 12px; }
.sw__phases li { display: flex; align-items: center; gap: 10px; font-size: 16px; color: #c1c1cb; transition: color .3s; }
.sw__phases li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #dcdae6; box-sizing: border-box; transition: all .3s; }
.sw__phases li.is-on { color: #333; }
.sw__phases li.is-on::before { border-color: #F980A9; box-shadow: 0 0 0 4px rgba(249, 128, 169, .2); }
.sw__phases li.is-done { color: #666; }
.sw__phases li.is-done::before { background: #8FAAED; border-color: #8FAAED; }
.sw__gennote { margin: 0; font-size: 13px; color: #9a9aa6; text-align: center; }
.sw__skip { height: 36px; padding: 0 16px; border: 1px solid #ddd; border-radius: 99px; background: #fff; font-size: 14px; color: #666; }
.sw__res { position: absolute; top: 100px; left: 12px; right: 12px; height: 388px; overflow: hidden; background: #eee; }
.sw__resimg { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sw__params { position: absolute; top: 512px; left: 24px; right: 24px; font-size: 21px; color: #444; }
.sw__params p { margin: 0 0 16px; }
.sw__params b { font-weight: 400; }
.sw__trash { position: absolute; right: -4px; top: -4px; width: 40px; height: 40px; border: 0; background: none; color: #a4a4ad; }
.sw__trash .ico { width: 30px; height: 30px; }
.sw__resbtns { position: absolute; left: 12px; right: 12px; bottom: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.sw__like { position: relative; height: 50px; border: 1.5px solid #9dc0f7; border-radius: 99px; background: #fff; color: #9dc0f7; font-size: 19px; }
.sw__like span { position: absolute; right: 0; top: -15px; font-size: 12px; color: #fff; background: #9dc0f7; padding: 2px 8px; border-radius: 10px 10px 10px 0; }
.sw__pub { height: 50px; font-size: 19px; }
.sw__diy { width: 100%; display: grid; gap: 16px; padding: 18px 20px 34px; border-radius: 18px 18px 0 0; background: #fff; }
.sw__diy label { display: grid; gap: 6px; }
.sw__diy label span { font-size: 15px; color: #333; }
.sw__diy label b { color: #7aa2e8; }
.sw__diy input { width: 100%; accent-color: #F980A9; }
.sw__diy small { font-size: 12px; color: #999; }
.sw__expop { width: 330px; padding: 18px 16px 20px; border-radius: 10px; background: #fff; text-align: center; }
.sw__ext { margin: 0 0 14px; font-size: 18px; font-weight: 600; color: #333; }
/* minmax(0, 1fr)：第一格的说明文字故意跨两栏，不能把第一栏撑宽 */
.sw__exgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sw__exgrid figure { margin: 0; }
.sw__exi { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #eee; }
.sw__exi .is-ok, .sw__exi .is-no { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; display: grid; place-items: center; background: rgba(245, 245, 248, .8); }
.sw__exi .ico { width: 18px; height: 18px; }
.sw__exi .is-ok { color: #69c047; }
.sw__exi .is-no { color: #e05a6a; }
.sw__exgrid figcaption { margin-top: 4px; min-height: 1.6em; font-size: 12px; color: #666; white-space: nowrap; }
.sw__exgrid figure:first-child figcaption { width: 210%; }
.sw__exok { width: 160px; height: 40px; margin: 18px auto 0; font-size: 18px; }

/* ══════════════════════════════════════════════════════════════
   自由生成
   ══════════════════════════════════════════════════════════════ */
.fg__aside { display: grid; gap: 10px; align-content: center; min-width: 0; }
.pt { padding: 20px 22px; background: #1d1b29; color: #fff; border: 0; }
.pt__t { margin: 0 0 12px; font-weight: 700; font-size: 15px; }
.pt__out { margin: 0; min-height: 6em; font: 15px/1.95 "Cascadia Code", Consolas, "SF Mono", monospace; color: rgba(255, 255, 255, .92); word-break: break-word; }
.pt__tok { padding: 1px 6px; border-radius: 5px; background: rgba(249, 128, 169, .16); border: 1px solid #f5a3c8; white-space: nowrap; animation: pop .3s var(--ease); }
.pt__tok.is-q { font-weight: 700; background: rgba(143, 170, 237, .2); border-color: #9fb8f0; }
.pt__zh { font-family: var(--font); color: #d7cdf6; }
.pt__spec { margin: 12px 0 6px; font-size: 13px; color: rgba(255, 255, 255, .7); }
.pt__steps { margin: 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; color: rgba(255, 255, 255, .7); }
.pt__steps b { color: #fff; }

.fg { position: absolute; inset: 0; }
.fg__page { position: absolute; inset: 0; background: linear-gradient(170deg, #f3f6ff, #fbf5fa 50%, #f5f8ff); }
.fg__body { position: absolute; top: 88px; bottom: 92px; left: 0; right: 0; overflow-y: auto; padding: 8px 12px 30px; scrollbar-width: none; overscroll-behavior: contain; }
.fg__body::-webkit-scrollbar { display: none; }
.fg__lab { position: relative; margin: 16px 0 10px; display: flex; align-items: center; padding-left: 12px; font-size: 16px; font-weight: 600; color: #333; }
/* 只管必填星号：「常见问题」按钮里的图标也是 <i>，不能被一起绝对定位 */
.fg__lab > i { position: absolute; left: 0; top: 2px; font-style: normal; color: #f23b3b; }
.fg__faq { margin-left: auto; display: flex; align-items: center; gap: 4px; border: 0; background: none; font-size: 13px; color: #9cbcef; }
.fg__faq .ico { width: 20px; height: 20px; }
.fg__box { position: relative; height: 150px; border-radius: 10px; background: linear-gradient(135deg, #fbeef4, #eef2fb); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8); }
.fg__ta { width: 100%; height: 100%; padding: 12px 40px 30px 14px; border: 0; background: transparent; resize: none; font: 14px/1.6 var(--font); color: #333; outline: none; }
.fg__ta::placeholder { color: #c3c3cc; }
.fg__clear { position: absolute; right: 12px; top: 58px; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: #b7b7c0; }
.fg__clear .ico { width: 22px; height: 22px; }
.fg__dice { position: absolute; left: 12px; bottom: 10px; width: 26px; height: 26px; padding: 0; border: 0; background: none; color: #b0b3c2; }
.fg__dice .ico { width: 24px; height: 24px; }
.fg__cnt { position: absolute; right: 12px; bottom: 12px; font-size: 12px; color: #b0b0ba; }
.fg__tabs { display: flex; gap: 2px; padding: 4px; border-radius: 99px; background: #f0f1f8; box-shadow: inset 0 1px 3px rgba(80, 90, 140, .1); overflow-x: auto; scrollbar-width: none; }
.fg__tab { flex: none; height: 32px; padding: 0 11px; border: 0; border-radius: 99px; background: none; font-size: 14px; color: #a8a9b6; }
.fg__tab.is-on { color: #fff; background: linear-gradient(90deg, #F99BBE, #86B9F0); }
.fg__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; min-height: 36px; }
.fg__chip { height: 30px; padding: 0 14px; border: 1.2px solid #9fc1f3; border-radius: 99px; background: rgba(255, 255, 255, .6); color: #7aa2e8; font-size: 14px; }
.fg__chip.is-on { color: #fff; border-color: transparent; background: linear-gradient(90deg, #F99BBE, #86B9F0); }
.fg__models { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.fg__model { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 7px; overflow: hidden; background: #ddd; }
.fg__model img { width: 100%; height: 100%; object-fit: cover; }
.fg__model span { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; line-height: 22px; font-size: 11px; color: #555; background: rgba(240, 240, 238, .85); }
.fg__model.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e2a9d3; }
.fg__ratios { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.fg__ratio { flex: none; width: 66px; height: 70px; display: grid; justify-items: center; align-content: center; gap: 6px; border: 1.2px solid transparent; border-radius: 6px; background: #f4f7fd; font-size: 12px; color: #555; }
.fg__rf { display: block; background: #d7e8fb; border-radius: 2px; }
.fg__ratio.is-on { border-color: #c9a6e0; background: #fff; }
.fg__seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 99px; background: #f0f1f8; box-shadow: inset 0 1px 3px rgba(80, 90, 140, .1); }
.fg__sb { height: 34px; border: 0; border-radius: 99px; background: none; font-size: 15px; color: #a8a9b6; }
.fg__sb.is-on { color: #fff; background: linear-gradient(90deg, #F99BBE, #86B9F0); }
.fg__foot { position: absolute; left: 12px; right: 12px; bottom: 30px; }
.fg__go { height: 50px; font-size: 19px; }
.fg__faqpop { width: 330px; max-height: 620px; overflow-y: auto; padding: 18px 20px 20px; border-radius: 10px; background: #fff; }
.fg__qa { margin-bottom: 12px; }
.fg__q { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: #333; }
.fg__a { margin: 0; font-size: 13px; line-height: 1.7; color: #999; }
.fg__result { width: 320px; padding: 18px; border-radius: 12px; background: #fff; text-align: center; }
.fg__frames { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; min-height: 160px; }
.fg__frame { position: relative; display: block; border-radius: 6px; background: linear-gradient(135deg, #fbd5e5, #d9cdf3 55%, #cde6fb); overflow: hidden; }
.fg__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); animation: shimmer 1.6s linear infinite; }
.fg__rn { margin: 12px 0 0; font-size: 12px; color: #999; line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════
   私人定制
   ══════════════════════════════════════════════════════════════ */
.ct__info { padding: 22px 24px; display: grid; gap: 8px; align-content: start; }
.ct__k { margin: 0; font: 600 11px/1.4 var(--font-en); letter-spacing: .18em; color: #a8864a; }
.ct__t { margin: 0; font-size: 26px; font-weight: 800; color: #5b4523; letter-spacing: .03em; }
.ct__slogan { margin: 0 0 6px; color: #8c7555; font-size: 14px; }
.ct__items { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ct__items li { padding: 10px 12px; border-radius: 12px; background: linear-gradient(180deg, #fdf8ee, #f6ecd9); border: 1.5px solid #ead7b0; font-size: 13.5px; font-weight: 600; color: #5b4523; text-align: center; }
.ct__sub { margin: 8px 0 0; font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .08em; }
.ct__flow { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; counter-reset: f; }
.ct__flow li { counter-increment: f; display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.ct__flow li::before { content: counter(f); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #b98a2e; color: #fff; font-size: 12px; }
.ct__flow li:not(:last-child)::after { content: "→"; margin-left: 2px; color: #c9b089; font-weight: 400; }
.ct { position: absolute; inset: 0; background: #f4efe7; }
.ct__long { position: absolute; top: 88px; bottom: 0; left: 0; right: 0; overflow: hidden; cursor: grab; touch-action: none; }
.ct__long.is-drag { cursor: grabbing; }
.ct__longimg { width: 100%; max-width: none; margin-top: -88px; will-change: transform; }
/* 常驻按钮压在长图自带的那颗按钮正上方（y 709–747），滚动时它留在原位 */
.ct__bottom { position: absolute; left: 12px; right: 12px; top: 705px; z-index: 5; }
.ct__cta { width: 100%; height: 46px; border: 0; border-radius: 99px; background: linear-gradient(180deg, #f0d9a8, #e2c283); color: #fff; font-size: 17px; letter-spacing: .04em; text-shadow: 0 1px 2px rgba(140, 100, 30, .45); box-shadow: 0 5px 0 #d4b06a, 0 10px 18px -6px rgba(170, 120, 40, .6); }
.ct__scroll { position: absolute; right: 3px; top: 92px; bottom: 24px; width: 4px; pointer-events: none; }
.ct__scroll i { display: block; width: 4px; height: 60px; border-radius: 99px; background: rgba(90, 70, 40, .35); }

/* ══════════════════════════════════════════════════════════════
   照片夹
   ══════════════════════════════════════════════════════════════ */
.pf { position: absolute; inset: 0; background: linear-gradient(170deg, #f1f7ff, #fdf3f8 55%, #f5f8ff); }
.pf__head { position: absolute; top: 88px; left: 0; right: 0; height: 52px; display: flex; align-items: center; padding: 0 12px; }
.pf__tabs { display: flex; gap: 18px; }
.pf__tab { border: 0; background: none; padding: 4px 0; font-size: 18px; font-weight: 600; color: #c5c6d0; }
.pf__tab.is-on { background: linear-gradient(90deg, #F980A9, #8FAAED); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pf__selbtn { margin-left: auto; height: 28px; padding: 0 12px; border: 1px solid #9cbcef; border-radius: 6px; background: #fff; font-size: 14px; color: #555; }
.pf__selbtn[hidden] { display: none; }
.pf__scroll { position: absolute; top: 140px; bottom: 84px; left: 0; right: 0; overflow-y: auto; overflow-x: hidden; padding: 0 12px 70px; scrollbar-width: none; touch-action: pan-x; overscroll-behavior: contain; }
.pf__scroll::-webkit-scrollbar { display: none; }
.pf__pull { position: absolute; top: 14px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 12px; color: #8aa9e6; opacity: 0; pointer-events: none; }
.pf__pull .ico { width: 18px; height: 18px; transition: transform .3s; }
.pf__pull.is-ready .ico { transform: rotate(180deg); }
.pf__pull.is-spin .ico { animation: spin .8s linear infinite; }
.pf__list { position: relative; }
.pf__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; align-items: start; }
.pf__col { display: grid; gap: 9px; }
.pf__it { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: #ececef; }
.pf__it img { width: 100%; height: 100%; object-fit: cover; animation: genIn .5s var(--ease); }
.pf__wait { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; }
.pf__wait b { font-weight: 400; font-size: 13px; color: #aaa; }
.pf__wait small { font-size: 10px; color: #7ea3ea; }
.pf__it.is-pending::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); animation: shimmer 1.8s linear infinite; }
.pf__ck { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #fff; background: rgba(40, 40, 50, .55); color: #fff; display: none; place-items: center; }
.pf__ck .ico { width: 12px; height: 12px; opacity: 0; }
.pf.is-selecting .pf__it:not(.is-pending) .pf__ck { display: grid; }
.pf__it.is-sel .pf__ck { background: #8fb4ef; }
.pf__it.is-sel .pf__ck .ico { opacity: 1; }
.pf__it.is-sel img { opacity: .8; }
.pf__empty { display: grid; justify-items: center; gap: 22px; padding-top: 60px; text-align: center; }
.pf__empty p { margin: 0; font-size: 16px; color: #333; line-height: 1.8; padding: 0 20px; }
.pf__go { border: 0; background: none; padding: 0 2px; font: inherit; color: #5ab7e6; border-bottom: 1.5px solid #5ab7e6; }
.pf__planet { position: relative; width: 220px; height: 220px; }
.pf__planet b { position: absolute; left: 28px; top: 40px; width: 170px; height: 170px; border-radius: 50%; background: #e6e6e6; clip-path: inset(0 0 12% 0); }
.pf__planet i { position: absolute; height: 26px; border-radius: 99px; background: #fbf7fb; transform: rotate(38deg); z-index: 1; }
.pf__planet i:nth-child(1) { width: 86px; left: 0; top: 70px; }
.pf__planet i:nth-child(2) { width: 110px; left: 110px; top: 150px; }
.pf__planet i:nth-child(3) { width: 14px; height: 14px; left: 196px; top: 176px; background: #e6e6e6; }
.pf__bar { position: absolute; left: 0; right: 0; bottom: 84px; height: 54px; display: flex; align-items: center; gap: 12px; padding: 0 12px; background: #eef0fc; transform: translateY(100%); opacity: 0; transition: transform .3s var(--ease), opacity .2s; z-index: 14; font-size: 16px; color: #333; }
.pf__bar.is-on { transform: none; opacity: 1; }
.pf__bar span { margin-right: auto; }
.pf__del, .pf__save { height: 34px; padding: 0 22px; border: 0; border-radius: 99px; background: #96bdfb; color: #fff; font-size: 15px; }
.pf__del[disabled], .pf__save[disabled] { background: #c8d7f3; }
.pf__tb { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; }

/* ══════════════════════════════════════════════════════════════
   视觉规范
   ══════════════════════════════════════════════════════════════ */
.sp__k { margin: 0; font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .08em; }
.sp__type-card { padding: 16px 20px 6px; }
.sp__trow { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sp__trow:last-child { border-bottom: 0; }
.sp__tmeta { display: grid; line-height: 1.5; }
.sp__tmeta b { font-size: 15px; }
.sp__tmeta span { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sp__tmeta small { font-size: 12px; color: var(--ink-3); }
.sp__sample { margin: 0; color: #333; }
.sp { padding: 20px 24px; display: grid; gap: 14px; align-content: start; }
.sp__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sp__copied { font-size: 12.5px; color: #0a7a3c; min-height: 1.4em; }
.sp__sw { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sp__chip { padding: 0 0 10px; border: 0; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); cursor: copy; text-align: left; transition: transform .25s var(--ease), box-shadow .25s; }
.sp__chip:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.sp__chip i { display: block; height: clamp(48px, 8vh, 76px); background: var(--c); }
.sp__chip b { display: block; padding: 8px 10px 0; font: 700 13px/1.2 "Cascadia Code", Consolas, monospace; }
.sp__bar { position: relative; height: 24px; margin: 4px 12px; border-radius: 99px; background: var(--sp-grad, var(--grad)); }
.sp__h { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--c); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); cursor: ew-resize; touch-action: none; }
.sp__h.is-fixed { cursor: default; }
.sp__demo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 14px 18px; padding: 18px; border-radius: 16px; background: linear-gradient(170deg, #f3f6ff, #fdf4f8); }
.sp__btn { height: 46px; padding: 0 26px; display: inline-grid; place-items: center; border-radius: 99px; background: var(--sp-grad, var(--grad)); color: #fff; font-size: 17px; font-weight: 600; }
.sp__tab { font-size: 22px; font-weight: 700; background: var(--sp-grad, var(--grad)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp__pill { height: 34px; padding: 0 18px; display: inline-grid; place-items: center; border-radius: 99px; background: var(--sp-grad, var(--grad)); color: #fff; }
.sp__round { width: 62px; height: 62px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--sp-grad, var(--grad)); color: #fff; font-size: 14px; line-height: 1.15; }

/* ══════════════════════════════════════════════════════════════
   线上版
   ══════════════════════════════════════════════════════════════ */
.lv { --lv-h: min(660px, calc(100svh - var(--nav-h) - 2 * var(--slide-pad) - 16px)); --lv-w: calc(var(--lv-h) * 1080 / 2412); display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.lv__side { display: grid; gap: 18px; align-content: center; }
.lv__tabs { display: grid; gap: 4px; }
.lv__tab { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; text-align: left; font-size: 15px; color: var(--ink-3); cursor: pointer; transition: background .25s, color .25s; }
.lv__tab:hover { color: var(--ink); background: var(--bg-2); }
.lv__tab.is-on { color: var(--ink); font-weight: 700; background: #fff; box-shadow: var(--shadow); }
.lv__n { font: 600 12px/1 var(--font-en); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lv__tab.is-on .lv__n { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lv__arrows { display: flex; gap: 8px; }
.lv__arrow { width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 50%; background: #fff; font-size: 18px; cursor: pointer; transition: transform .25s var(--ease), opacity .25s; }
.lv__arrow:hover:not(:disabled) { transform: translateY(-2px); }
.lv__arrow:disabled { opacity: .35; cursor: default; }
/* 中间一张最大，两侧往后退；左右用渐隐遮罩收边 */
.lv__stage { position: relative; height: var(--lv-h); overflow: hidden; outline: none; touch-action: pan-y; user-select: none; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.lv__stage:active { cursor: grabbing; }
.lv__card { position: absolute; top: 0; left: 50%; width: var(--lv-w); height: var(--lv-h); margin-left: calc(var(--lv-w) / -2); padding: 0; border: 0; border-radius: 30px; overflow: hidden; background: #eee; box-shadow: var(--shadow-lg); cursor: pointer; transform: translateX(calc(var(--d) * 64%)) scale(calc(1 - var(--a) * .13)); opacity: calc(1 - var(--a) * .3); z-index: calc(10 - var(--a)); transition: transform .6s var(--ease), opacity .45s, box-shadow .3s; }
.lv__card img { width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; }
.lv__card.is-on { cursor: default; box-shadow: 0 0 0 1px rgba(255, 255, 255, .8), var(--shadow-lg); }
.lv__card.is-far { opacity: 0; pointer-events: none; }
.lv__card:focus-visible { outline: 3px solid var(--free); outline-offset: 3px; }

/* ══════════════════════════════════════════════════════════════
   窄屏：一屏放不下时，按内容顺序往下排
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .split--3, .split--loop { grid-template-columns: minmax(0, 1fr) var(--phone-w); }
  .split--3 > :last-child:not(.split__phone), .split--loop > .split__viz { grid-column: 1 / -1; }
  .fx { grid-template-columns: 1fr; grid-template-areas: "head" "stats" "chart" "panel" "foot"; }
  .tp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cover__grid { --gen-w: min(540px, 52vw); }
  .jr, .st { grid-template-columns: 1fr; }
  .jr__text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}
@media (max-width: 860px) {
  .slide { padding-block: 48px; }
  .cover { min-height: 0; }
  .cover__grid, .pos, .split--2, .split--3, .split--loop, .split--spec { grid-template-columns: 1fr; }
  .gen { width: 100%; justify-self: stretch; }
  .jr__text { grid-template-columns: 1fr; }
  .jr__svg { max-height: none; }
  .sc__top { display: grid; justify-content: stretch; }
  .sc__tabs { overflow-x: auto; scrollbar-width: none; }
  .sc__tab { padding: 0 12px; font-size: 13.5px; }
  .st__board { column-gap: 18px; }
  .st__n--pain, .st__n--design { font-size: 12px; padding: 4px 8px; }
  .st__n--strat { padding: 8px 8px 8px 14px; min-height: 0; }
  .st__n--strat b { font-size: 13.5px; }
  .st__n--strat small, .st__dots { display: none; }
  .split__phone { width: min(320px, 86vw); }
  .split--3 > :last-child:not(.split__phone), .split--loop > .split__viz { grid-column: auto; }
  .lv { grid-template-columns: 1fr; }
  .lv__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lv__tab { justify-content: center; padding: 0 6px; font-size: 13px; }
  .lv__n { display: none; }
  .lv { --lv-h: min(560px, 120vw); }
  .fx__stats { grid-template-columns: 1fr; }
  .tp__grid { grid-template-columns: 1fr; }
  .ct__items { grid-template-columns: 1fr; }
  .flow__top, .flow__ctl { justify-items: start; }
  .sp__sw { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp__trow { grid-template-columns: 1fr; gap: 6px; }
  .fx__stage, .flow__svg { max-width: none; max-height: none; }
  .logo { width: min(100%, 240px); }
}

/* 平板和手机：模拟器不再锁一屏高，图表按原比例排 */
@media (max-width: 1100px) {
  .fx__stage { flex: none; aspect-ratio: 840 / 414; min-height: 0; }
}

/* 矮一些的屏幕（常见笔记本浏览器约 650–800px 高）：收紧标题和间距，让每章仍然一屏放下 */
@media (min-width: 861px) and (max-height: 820px) {
  .sechead h2, .split .sechead h2 { font-size: clamp(22px, 2vw, 28px); }
  .sechead__bar { margin: 9px 0; }
  .lede { font-size: 14px; line-height: 1.7; }
  .kicker { margin-bottom: 4px; }
  .split__text { gap: 12px; }
  .pts { gap: 6px; }
  .pts li { font-size: 13.5px; line-height: 1.6; }
  .pts li b { font-size: 14px; }
  .cover__h { font-size: clamp(26px, 3vw, 40px); margin-bottom: 12px; }
  .cover__lede { margin-bottom: 18px; line-height: 1.8; }
  .flow__top { margin-bottom: 10px; }
  .tp { padding: 7px 12px; }
  .tp__b b { font-size: 13.5px; }
  .tp__b span { font-size: 12px; line-height: 1.45; }
  .flow__below { min-height: 0; }
  .fx { gap: 8px 16px; }
  .fx__note { display: none; }
  .fx__tile { padding: 8px 14px; }
  .fx__tile > b { font-size: 17px; }
  .fx__hero { font-size: 30px !important; }
  .fx__panel { gap: 7px; padding: 12px 16px; }
  .fx__pt { font-size: 19px; }
  .fx__pv b { font-size: 26px; }
  .fx__why ul { font-size: 13px; line-height: 1.55; }
  .fx__fix { padding: 5px 10px; }
  .cr__note, .sw__note, .fo__card, .ct__info { padding: 14px 18px; }
  .fo__note { padding: 7px 12px; }
  .fo__nx { font-size: 12px; line-height: 1.5; }
}

/* 尊重「减少动态效果」：循环动画、过渡一律收掉，内容直接呈现 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html.js .rv { opacity: 1; transform: none; }
}

.portfolio-toolbar{position:fixed;top:max(12px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));z-index:210;display:flex;gap:6px;align-items:center;padding:3px;border:1px solid rgba(44,36,25,.18);border-radius:28px;background:rgba(251,250,253,.96);color:#252339;box-shadow:0 3px 15px rgba(44,36,25,.06)}
.portfolio-home{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;text-decoration:none}
.portfolio-home svg{width:20px;height:20px}
.portfolio-home:hover{background:#e7d8bc}
.portfolio-language{font:600 12px/1.3 var(--sans);color:inherit;background:transparent;border:0;min-width:66px;min-height:44px;padding:8px;cursor:pointer;border-radius:18px}
.portfolio-credit{padding:32px 24px 38px;text-align:center;border-top:1px solid var(--line);font-size:12px;color:#65616e}
.portfolio-credit a{font-weight:600;text-decoration:none}
.portfolio-credit p{max-width:66ch;margin:8px auto 0;font-size:11px;line-height:1.65}
.portfolio-error{padding:120px 24px;max-width:60ch;margin:auto}

.portfolio-toolbar{top:max(14px,env(safe-area-inset-top));z-index:210}.cover__grid{padding-top:100px}.sc__tabs,.seg{max-width:100%;flex-wrap:wrap}.sc__tab,.seg__b{white-space:normal;line-height:1.35}.kicker{flex-wrap:wrap;row-gap:6px}.abtn{white-space:normal;line-height:1.25;min-height:44px}.lg__agree{flex-wrap:wrap;line-height:1.5}.lg__h{line-height:1.2}.fo__notes,.card{min-width:0}html:lang(en) .cover__h,html:lang(fr) .cover__h{font-size:clamp(30px,3.3vw,48px);line-height:1.18}.gen__tools,.gen__ctrl{flex-wrap:wrap}.portfolio-home:focus-visible,.portfolio-language:focus-visible{outline:2px solid #6746ba;outline-offset:3px}@media(max-width:600px){.cover__grid{padding-top:96px}.portfolio-toolbar{top:max(12px,env(safe-area-inset-top));left:10px}.sc__tabs{gap:4px}.sc__tab{padding-inline:10px;flex:1 1 auto}}

/* Labels retain their own column in all three languages. */
.gen__row{grid-template-columns:70px minmax(0,1fr)}.gen__k{white-space:normal;overflow-wrap:normal}.gen__foot{flex-wrap:wrap}.gen__steps{flex:1 1 230px}.gen__range{width:100%;min-width:40px}.gen__go{margin-left:auto}
@media(max-width:600px){.gen__steps{flex-basis:100%}.gen__foot{gap:10px}.gen__row{grid-template-columns:64px minmax(0,1fr)}}

/* Reserve space for the portfolio controls when navigating between chapters. */
:root{--nav-h:76px}.sec{scroll-margin-top:76px}table.sr{display:block}.jr__dl{grid-template-columns:74px minmax(0,1fr);gap:10px 12px}.jr__dl dt{overflow-wrap:anywhere}.jr__moods{flex-wrap:wrap}html:not(:lang(zh)) .orbit__t{font-size:17px}html:not(:lang(zh)) .orbit__coret{font-size:21px;letter-spacing:.02em}html:not(:lang(zh)) .loop__t{font-size:12px}.lg__txt{bottom:calc(15% + 58px)}.lg__s{white-space:normal;line-height:1.4}.fn--ui .fn__t{font-size:11px}
@media(max-width:600px){.jr__dl{grid-template-columns:1fr;gap:3px}.jr__dl dd{margin-bottom:9px}}

.st__col{grid-template-columns:minmax(0,1fr)}.st__ch,.st__n{overflow-wrap:anywhere}.st__list{min-width:0}.lg__txt{top:auto;bottom:170px;padding-inline:12px}