/* 像个产品 — 版式基线
   参考 shapeof.ai 的信息层级：白底、衬线大标题、窄正文栏、左侧 sticky 导航、单一浅色强调。 */

:root {
  --ink:        #16151a;
  --ink-mid:    #3a3843;
  --ink-soft:   #6a6774;
  --ink-faint:  #97949e;
  --rule:       #e6e4e9;
  --rule-soft:  #f0eef2;
  --paper:      #ffffff;
  --wash:       #faf9fb;

  --accent:     #6b5cd6;
  --band:       #f4f3f1;   /* 展示区底色，中性 */

  --bad:        #c8503f;
  --bad-wash:   #fdf1ef;
  --good:       #2f7a5a;
  --good-wash:  #eef7f2;

  --serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono:  "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --col:   720px;   /* 正文栏宽 */
  --page:  1640px;  /* 页面最大宽 */
  --nav-w: 160px;   /* 左侧 sticky 导航宽 */
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
  letter-spacing: 0.01em;
}

a { color: inherit; text-decoration: none; }

/* ── 顶栏 ───────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--rule-soft);
}
.topbar__inner {
  max-width: var(--page); margin: 0 auto;
  padding: 0 40px; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
}
.wordmark { display: flex; align-items: center; }
.wordmark__img { height: 22px; width: auto; display: block; }
.topnav { display: flex; gap: 28px; font-size: 15px; color: var(--ink-soft); }
.topnav a:hover { color: var(--ink); }
.topnav a[aria-current] { color: var(--ink); }

/* ── 首页 hero ──────────────────────────────────── */

.hero {
  max-width: var(--page); margin: 0 auto;
  padding: 72px 40px 56px;      /* 左右和顶栏、卡片区对齐 */
  display: grid; grid-template-columns: minmax(0, 1fr) 620px;
  gap: 48px; align-items: center;
}
.hero h1 {
  font-family: var(--serif);
  font-size: 36px; line-height: 1.5;
  font-weight: 400; letter-spacing: 0.01em;
  margin: 0 0 22px; max-width: 16em;
}
.hero__kicker {
  font-family: var(--serif);
  font-size: 19px; letter-spacing: .02em;
  color: var(--ink-soft); margin: 0 0 22px;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.hero__kicker span {
  font-family: var(--sans); font-size: 13px; color: var(--ink-faint);
  padding-left: 14px; border-left: 1px solid var(--rule);
}
.hero__lead {
  font-size: 17px; line-height: 1.9;
  color: var(--ink-mid);
  max-width: 34em; margin: 0;
}

/* ── 顶部动效：构想 → 设计 → 实现，11 秒一轮 ────── */

/* 不套外框、不铺底色，图直接落在白底上 */
.hero__art { padding: 0; }
.hero__art svg { width: 100%; height: auto; display: block; }

/* 每一组的出场时刻写死在关键帧里，组内的错落用 --d 微调（都在 1 秒内，
   收尾时的先后差看不出来，这样只要五组关键帧就够） */
.reel .st1, .reel .st2, .reel .st3, .reel .ar1, .reel .ar2, .reel .pin {
  animation-duration: 7.5s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.22, .68, .3, 1);
  animation-delay: var(--d, 0s);
  opacity: 0;
}
.reel .st1 { animation-name: reel-1; }
.reel .ar1 { animation-name: reel-a1; }
.reel .st2 { animation-name: reel-2; }
.reel .ar2 { animation-name: reel-a2; }
.reel .st3 { animation-name: reel-3; }
.reel .pin { animation-name: reel-pin; animation-timing-function: cubic-bezier(.6,0,.2,1); }

@keyframes reel-1 {
  0%, 1.5%  { opacity: 0; transform: translateY(7px); }
  7%,  90%  { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translateY(-5px); }
}
@keyframes reel-a1 {
  0%, 16%   { opacity: 0; }
  22%, 90%  { opacity: 1; }
  95%, 100% { opacity: 0; }
}
@keyframes reel-2 {
  0%, 22%   { opacity: 0; transform: translateY(7px); }
  28%, 90%  { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translateY(-5px); }
}
@keyframes reel-a2 {
  0%, 38%   { opacity: 0; }
  44%, 90%  { opacity: 1; }
  95%, 100% { opacity: 0; }
}
@keyframes reel-3 {
  0%, 44%   { opacity: 0; transform: translateY(7px); }
  50%, 90%  { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translateY(-5px); }
}
/* 进度点跟着当前阶段走 */
@keyframes reel-pin {
  0%, 3%    { opacity: 0; transform: none; }
  7%,  20%  { opacity: 1; transform: none; }
  26%, 41%  { opacity: 1; transform: translateX(175px); }
  48%, 90%  { opacity: 1; transform: translateX(350px); }
  95%, 100% { opacity: 0; transform: translateX(350px); }
}
/* 箭头上的虚线一直在流 */
.reel .flow { stroke-dasharray: 4 4; animation: reel-flow 1s linear infinite; }
@keyframes reel-flow { to { stroke-dashoffset: -16; } }

@media (prefers-reduced-motion: reduce) {
  .reel *, .reel { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ── 索引：左 sticky 分类导航 + 右卡片区 ────────── */

.index {
  max-width: var(--page); margin: 0 auto;
  padding: 0 40px 120px;
  display: grid; grid-template-columns: var(--nav-w) 1fr; gap: 0;
  border-top: 1px solid var(--rule-soft);
}
.catnav { padding-top: 40px; }
.catnav__list { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; }
.catnav a {
  font-size: 15px; color: var(--ink-faint);
  display: flex; align-items: center; gap: 10px;
  transition: color .15s;
}
/* 图标跟着文字颜色走，选中那条自然变深 */
.catnav svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.catnav a:hover { color: var(--ink-mid); }
.catnav a.is-active { color: var(--ink); font-weight: 600; }

.cats { border-left: 1px solid var(--rule-soft); }

.cat { padding: 40px 0 44px 44px; border-bottom: 1px solid var(--rule-soft); }
.cat:last-child { border-bottom: 0; }
.cat__head { margin-bottom: 26px; }
.cat__name { font-size: 19px; font-weight: 600; margin: 0 0 2px; }
.cat__desc { font-size: 15px; color: var(--ink-soft); margin: 0; }

.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

/* 卡片：外层留 8px，图块内嵌带圆角，文字在下 */
.card {
  position: relative; display: block;
  background: #fff; padding: 8px;
  border: 1px solid var(--rule); border-radius: 12px;
  transition: border-color .16s, transform .16s, box-shadow .16s;
}
.card:hover {
  border-color: #cfcdd4; transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(20,18,30,.07);
}

.card__art {
  position: relative;
  height: 300px; overflow: hidden;
  display: grid; place-items: center;
  padding: 12px 10px;
  border-radius: 9px;
  background: var(--g, linear-gradient(155deg,#f1efec 0%,#f8f7f5 48%,#fdfcfb 100%));
}

/* 图浮在渐变上，像一块真的界面 */
.card__stage {
  width: 100%; height: 100%;
  overflow: hidden; position: relative;
  display: grid; place-items: center;
}

/* 直接复用详情页那张图，等比缩到卡片里。
   下面的 .33 只是 JS 跑起来之前的兜底，实际比例由 shots.js 按内容尺寸算 */
.card__shot {
  position: absolute; top: 50%; left: 50%;
  width: 1000px;
  transform: translate(-50%, -50%) scale(.33);
  transform-origin: center center;
}
.card__shot .compare { gap: 22px; }
.card__shot .pane { box-shadow: 0 2px 6px rgba(20,18,30,.10); }
.card__shot .pane__bar { font-size: 26px; padding: 18px 24px; gap: 12px; }
.card__shot .pane__bar::before { width: 14px; height: 14px; }
.card__shot .pane__body { padding: 26px; min-height: 300px; }
.card__shot .mini { font-size: 26px; line-height: 1.6; }
.card__shot .mini__title { font-size: 28px; margin-bottom: 20px; }
.card__shot .mini__dot { width: 52px; height: 52px; border-radius: 12px; }
.card__shot .mini__line { height: 14px; margin-bottom: 12px; border-radius: 8px; }
.card__shot .mini__row { padding: 18px 0; gap: 20px; }
.card__shot .mini__btn { font-size: 25px; padding: 12px 28px; border-radius: 12px; }
.card__shot .mini__tile { font-size: 21px; padding: 16px 12px; border-radius: 10px; }
.card__shot .mini__crowd { gap: 12px; }

/* 头图铺满整块画布，宽高哪个先顶到就以哪个为准 */
.card__hero { width: 100%; height: 100%; padding: 0; }
.card__hero svg { width: 100%; height: 100%; display: block; }

.card__fig { display: block; color: rgba(22,21,26,.7); padding: 0; width: 100%; }
.card__fig svg { width: 340px; height: 218px; display: block; margin: 0 auto; }
.card__fig--cover svg { width: 100%; height: auto; max-height: 240px; }
.card:hover .card__fig { color: rgba(22,21,26,.88); }

.card__no {
  position: absolute; top: 20px; right: 24px; z-index: 2;
  font-family: var(--serif); font-size: 13.5px;
  color: rgba(22,21,26,.3);
}

.card__body { display: block; padding: 22px 22px 20px; }
.card__name { font-size: 19px; font-weight: 700; letter-spacing: .01em; margin: 0 0 10px; }
.card__desc { font-size: 16px; line-height: 1.65; color: var(--ink-mid); margin: 0; }

.card--soon { border-style: dashed; }
.card--soon .card__art { opacity: .68; }
.card--soon .card__name { color: var(--ink-mid); font-weight: 600; }
.card--soon .card__desc { color: var(--ink-soft); }
.card--soon:hover { transform: none; box-shadow: none; border-color: var(--rule); }


/* 分类内部的阶段小标题 */
.step {
  display: flex; align-items: baseline; gap: 12px;
  margin: 30px 0 14px;
}
.step:first-of-type { margin-top: 4px; }
.step__chip {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gc, #eceaea); flex: none;
}
.step__n {
  font-family: var(--serif); font-size: 14px; color: var(--ink-faint);
  min-width: 14px;
}
.step__t { font-size: 14px; font-weight: 600; color: var(--ink-mid); letter-spacing: .04em; }
.step__d { font-size: 13.5px; color: var(--ink-faint); }
.step__rule { flex: 1; height: 1px; background: var(--rule-soft); }

.card { position: relative; }
.card__no {
  position: absolute; top: 17px; right: 18px;
  font-family: var(--serif); font-size: 13px; color: var(--ink-faint);
}

/* ── 详情页 ─────────────────────────────────────── */

.crumb {
  max-width: var(--page); margin: 0 auto;
  padding: 22px 40px; font-size: 14.5px; color: var(--ink-soft);
}
.crumb a:hover { color: var(--ink); }
.crumb span { color: var(--ink-faint); margin: 0 6px; }
.crumb .crumb__here { color: var(--ink-faint); }

.stage {
  max-width: var(--page); margin: 0 auto 0;
  padding: 0 40px;
}
.stage__inner {
  background: var(--band);
  border-radius: 12px;
  padding: 44px 32px;
  display: grid; place-items: center;
  min-height: 320px;
}
.stage__cap {
  max-width: var(--page); margin: 0 auto;
  padding: 16px 40px 0;
  font-size: 14px; color: var(--ink-soft);
  text-align: center;
}

.doc {
  max-width: var(--page); margin: 56px auto 0;
  padding: 56px 40px 140px;
  position: relative;
  border-top: 1px solid var(--rule-soft);
}
.doc .secnav {
  position: absolute; left: 40px; top: 56px;
  width: var(--nav-w);
}
.secnav__list { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.secnav a { font-size: 15px; color: var(--ink-faint); transition: color .15s; }
.secnav a:hover { color: var(--ink-mid); }
.secnav a.is-active { color: var(--ink); font-weight: 600; }

.prose { max-width: var(--col); margin: 0 auto; }
.prose h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: 40px; line-height: 1.45; letter-spacing: .01em;
  margin: 0 0 28px;
}
.prose h2:last-of-type { }
.prose h2 {
  font-size: 15px; font-weight: 600; letter-spacing: .09em;
  color: var(--ink-faint); text-transform: none;
  margin: 68px 0 22px; padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-soft);
}
.prose h3 { font-size: 17px; font-weight: 600; margin: 34px 0 10px; }
.prose p { margin: 0 0 20px; color: var(--ink-mid); }
.prose > p:first-of-type { color: var(--ink); font-size: 18px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul { margin: 0 0 20px; padding-left: 20px; }
.prose li { margin-bottom: 10px; color: var(--ink-mid); }

/* 开篇：这个模式解决什么问题 */
.lede {
  font-size: 21px; line-height: 1.7; color: var(--ink);
  margin: 0 0 26px; font-weight: 500;
}
.symptoms {
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  padding: 20px 0 22px; margin: 0 0 34px;
}
.symptoms__label {
  font-size: 12.5px; letter-spacing: .1em; color: var(--ink-faint); margin-bottom: 14px;
}
.symptoms ul { list-style: none; padding: 0; margin: 0; }
.symptoms li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 15.5px; line-height: 1.65; color: var(--ink-mid); margin-bottom: 9px;
}
.symptoms li:last-child { margin-bottom: 0; }
.symptoms li::before {
  content: ""; flex: none; width: 5px; height: 5px; margin-top: 9px;
  border-radius: 50%; background: var(--ink-faint);
}

/* 正文里的说明图 */
.figure { margin: 34px 0 30px; }
.figure svg { width: 100%; height: auto; display: block; }
.figure figcaption {
  font-size: 14px; color: var(--ink-soft); line-height: 1.75;
  margin-top: 14px;
}
.figure--boxed { border: 1px solid var(--rule-soft); border-radius: 8px; padding: 26px 24px 22px; }
.figure--boxed figcaption { margin-top: 16px; }

/* 设计考量：加粗主张 + 解释 */
.considerations { list-style: none; padding: 0; margin: 0; }
.considerations li { padding: 0; margin: 0 0 30px; }
.considerations li:last-child { margin-bottom: 0; }
.considerations b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }

/* 正文里的内容表格 */
.tbl {
  width: 100%; border-collapse: collapse;
  font-size: 14.5px; line-height: 1.72;
}
.tbl th {
  text-align: left; font-weight: 600; font-size: 13px;
  color: var(--ink-soft); letter-spacing: .02em;
  padding: 11px 16px;
  background: #f7f6f9;
  border-bottom: 1px solid var(--rule);
}
.tbl th:first-child { border-radius: 6px 0 0 0; }
.tbl th:last-child { border-radius: 0 6px 0 0; }
.tbl td {
  padding: 14px 16px; vertical-align: top;
  color: var(--ink-mid);
  border-bottom: 1px solid var(--rule-soft);
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td, .tbl tr:hover td { background: #fafafb; }
.tbl td:first-child { color: var(--ink); }
.tbl .ui-tag { font-size: 12px; padding: 3px 10px; }

/* 表格独占一张图时，去掉外层多余的内边距 */
.figure--boxed:has(.tbl) { padding: 0; overflow: hidden; }
.figure--boxed:has(.tbl) figcaption { padding: 0 24px 20px; margin-top: 16px; }

/* 相关模式：链接 + 为什么相关 */
.related { display: flex; flex-direction: column; gap: 22px; }
.related__item { display: block; }
.related__name { font-weight: 600; margin-bottom: 4px; }
.related__name::after { content: " ↗"; color: var(--ink-faint); font-size: 13px; }
.related__why { font-size: 15.5px; color: var(--ink-mid); line-height: 1.7; }
.related__item:hover .related__name { color: var(--accent); }
.related__item--soon .related__name { color: var(--ink-soft); font-weight: 500; }
.related__item--soon .related__name::after { content: " 待写"; font-size: 12px; color: var(--ink-faint); }

/* 真实案例 */
.examples { display: flex; flex-direction: column; gap: 26px; }
.example__shot {
  border: 1px solid var(--rule); border-radius: 8px;
  background: var(--wash); padding: 22px; margin-bottom: 10px;
}
.example__cap { font-size: 15px; color: var(--ink-soft); line-height: 1.68; }

/* 给 AI 的话：可复制的 prompt 块 */
.spec {
  position: relative;
  border: 1px solid var(--rule); border-radius: 8px;
  background: var(--wash);
  padding: 20px 22px 22px; margin: 0 0 18px;
}
.spec__label {
  font-size: 12px; letter-spacing: .08em; color: var(--ink-faint);
  margin-bottom: 12px; font-family: var(--mono);
}
.spec pre {
  margin: 0; font-family: var(--mono); font-size: 13.5px; line-height: 1.75;
  color: var(--ink-mid); white-space: pre-wrap; word-break: break-word;
}
.spec__copy {
  position: absolute; top: 14px; right: 14px;
  border: 1px solid var(--rule); background: #fff; border-radius: 5px;
  font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft);
  padding: 4px 10px; cursor: pointer;
}
.spec__copy:hover { color: var(--ink); border-color: var(--ink-faint); }

/* ── 对照 demo（本站相对参考站的加分项）─────────── */

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: 100%; max-width: 880px; }
.pane { background: #fff; border-radius: 9px; overflow: hidden; box-shadow: 0 1px 3px rgba(20,18,30,.08), 0 8px 28px rgba(20,18,30,.07); }
.pane__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 13px; border-bottom: 1px solid var(--rule-soft);
  font-size: 12.5px; font-weight: 600;
}
.pane__bar::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pane--bad .pane__bar { color: var(--bad); background: var(--bad-wash); }
.pane--bad .pane__bar::before { background: var(--bad); }
.pane--good .pane__bar { color: var(--good); background: var(--good-wash); }
.pane--good .pane__bar::before { background: var(--good); }
.pane__body { padding: 16px; min-height: 220px; }

.demo-ctl {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 20px; justify-content: center;
}
.demo-ctl__hint { font-size: 13px; color: var(--ink-soft); margin-right: 4px; }
.demo-ctl button {
  border: 1px solid rgba(22,21,26,.14); background: rgba(255,255,255,.75);
  border-radius: 999px; padding: 5px 14px;
  font-family: var(--sans); font-size: 13px; color: var(--ink-mid); cursor: pointer;
}
.demo-ctl button:hover { background: #fff; color: var(--ink); }
.demo-ctl button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* demo 内部的迷你 UI 元件 */
.mini { font-size: 13px; line-height: 1.6; }
.mini__title { font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.mini__row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); }
.mini__row:last-child { border-bottom: 0; }
.mini__dot { width: 26px; height: 26px; border-radius: 6px; background: var(--rule-soft); flex: none; }
.mini__lines { flex: 1; }
.mini__line { height: 7px; border-radius: 4px; background: var(--rule-soft); margin-bottom: 6px; }
.mini__line:last-child { margin-bottom: 0; width: 55%; background: var(--rule); }
.mini__btn { display: inline-block; padding: 6px 14px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 12.5px; }
.mini__btn--ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--rule); }
.mini__empty { text-align: center; padding: 34px 12px; color: var(--ink-soft); }
.mini__empty h4 { margin: 0 0 6px; font-size: 14px; color: var(--ink); }
.mini__empty p { margin: 0 0 14px; font-size: 12.5px; }
.mini__err { border: 1px solid #f0d5d0; background: var(--bad-wash); border-radius: 7px; padding: 14px; color: var(--bad); }
.mini__err h4 { margin: 0 0 4px; font-size: 13.5px; }
.mini__err p { margin: 0 0 10px; font-size: 12.5px; color: #9a5449; }
.mini__skel { height: 9px; border-radius: 5px; background: linear-gradient(90deg, #eeecf1 25%, #f7f6f9 50%, #eeecf1 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; margin-bottom: 9px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.mini__spin { width: 18px; height: 18px; border: 2px solid var(--rule); border-top-color: var(--ink-faint); border-radius: 50%; margin: 40px auto; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mini__crowd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mini__tile { border: 1px solid var(--rule); border-radius: 5px; padding: 8px 6px; font-size: 10.5px; text-align: center; color: var(--ink-soft); }

/* ── 页脚 ───────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--rule-soft);
  padding: 34px 40px 60px;
  font-size: 14px; color: var(--ink-faint);
  max-width: var(--page); margin: 0 auto;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.foot a:hover { color: var(--ink-mid); }

/* ── 响应式 ─────────────────────────────────────── */

@media (max-width: 1080px) {
  .cards { grid-template-columns: 1fr; }
  .card__art { height: 250px; }
  /* 窄屏退回上下堆叠：文案居中，动效摆在下面 */
  .hero { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero h1 { max-width: none; }
  .hero__kicker { justify-content: center; }
  .hero__lead { margin: 0 auto; }
  .hero__art { max-width: 560px; margin: 0 auto; width: 100%; }
}
@media (max-width: 1180px) {
  .doc .secnav { display: none; }
}
@media (max-width: 860px) {
  body { font-size: 16px; }
  .hero h1 { max-width: none; white-space: normal; font-size: 26px; }
  .topbar__inner, .crumb, .stage, .doc, .index, .foot { padding-left: 22px; padding-right: 22px; }
  .hero { padding: 56px 22px 44px; }
  .hero h1 { font-size: 34px; }
  .index, .doc { grid-template-columns: 1fr; }
  .catnav, .secnav { display: none; }
  .cats { border-left: 0; }
  .cat { padding-left: 0; }
  .cards { grid-template-columns: 1fr; }
  .prose h1 { font-size: 32px; }
  .stage__inner { padding: 24px 16px; min-height: 0; }
  .compare { grid-template-columns: 1fr; }
}


/* 详情页头图的渐变，跟卡片同一套色 */
body[data-cat="basics"]   .stage__inner { background: linear-gradient(155deg,#f6e6b4 0%,#fdf4d9 48%,#fffdf3 100%); }
body[data-cat="faxian"]   .stage__inner { background: linear-gradient(155deg,#dbeaf0 0%,#eef6f9 48%,#fdfeff 100%); }
body[data-cat="dingyi"]   .stage__inner { background: linear-gradient(155deg,#f0e5d3 0%,#faf3e9 48%,#fffdfa 100%); }
body[data-cat="jiegou"]   .stage__inner { background: linear-gradient(155deg,#dfe6f4 0%,#eef2fa 48%,#fdfdff 100%); }
body[data-cat="jiaohu"]   .stage__inner { background: linear-gradient(155deg,#e7dff2 0%,#f3eefa 48%,#fdfcff 100%); }
body[data-cat="jiemian"]  .stage__inner { background: linear-gradient(155deg,#f4dfe2 0%,#fbeef0 48%,#fffcfd 100%); }
body[data-cat="xiezuo"]   .stage__inner { background: linear-gradient(155deg,#d8ece5 0%,#ebf6f2 48%,#fbfffd 100%); }
body[data-cat="yanzheng"] .stage__inner { background: linear-gradient(155deg,#e5ecd8 0%,#f2f6ea 48%,#fdfffa 100%); }

/* 分类配色：卡片封面和文章头图共用同一个令牌 */
:root {
  --g-basics: radial-gradient(120% 130% at 6% 0%, #f8d98a 0%, #fdedc4 38%, #fffdf6 100%);
  --g-faxian: radial-gradient(120% 130% at 6% 0%, #a9d8e6 0%, #daeef4 38%, #f7fdfe 100%);
  --g-dingyi: radial-gradient(120% 130% at 6% 0%, #f6c9a0 0%, #fbe4cf 38%, #fffaf6 100%);
  --g-jiegou: radial-gradient(120% 130% at 6% 0%, #b9c8ee 0%, #dee5f7 38%, #f8faff 100%);
  --g-jiaohu: radial-gradient(120% 130% at 6% 0%, #cdbce9 0%, #e6dcf5 38%, #fbf9ff 100%);
  --g-jiemian: radial-gradient(120% 130% at 6% 0%, #f2b8c0 0%, #fadde1 38%, #fff9fa 100%);
  --g-xiezuo: radial-gradient(120% 130% at 6% 0%, #a5d8c6 0%, #d7ede4 38%, #f7fdfb 100%);
  --g-yanzheng: radial-gradient(120% 130% at 6% 0%, #c6d9a3 0%, #e4eecd 38%, #fbfdf4 100%);
}

#basics .cards { --g: var(--g-basics); }
#faxian .cards { --g: var(--g-faxian); }
#dingyi .cards { --g: var(--g-dingyi); }
#jiegou .cards { --g: var(--g-jiegou); }
#jiaohu .cards { --g: var(--g-jiaohu); }
#jiemian .cards { --g: var(--g-jiemian); }
#xiezuo .cards { --g: var(--g-xiezuo); }
#yanzheng .cards { --g: var(--g-yanzheng); }

#basics { --gc: #f8d98a; }
#faxian { --gc: #a9d8e6; }
#dingyi { --gc: #f6c9a0; }
#jiegou { --gc: #b9c8ee; }
#jiaohu { --gc: #cdbce9; }
#jiemian { --gc: #f2b8c0; }
#xiezuo { --gc: #a5d8c6; }
#yanzheng { --gc: #c6d9a3; }

body[data-cat="basics"] .stage__inner { background: var(--g-basics); }
body[data-cat="faxian"] .stage__inner { background: var(--g-faxian); }
body[data-cat="dingyi"] .stage__inner { background: var(--g-dingyi); }
body[data-cat="jiegou"] .stage__inner { background: var(--g-jiegou); }
body[data-cat="jiaohu"] .stage__inner { background: var(--g-jiaohu); }
body[data-cat="jiemian"] .stage__inner { background: var(--g-jiemian); }
body[data-cat="xiezuo"] .stage__inner { background: var(--g-xiezuo); }
body[data-cat="yanzheng"] .stage__inner { background: var(--g-yanzheng); }