/* 江晓原 · 式盘：天玄而地黄。页面是黄色的地盘，转动的天盘是玄色漆盘，唯一的亮色是朱。
   类名前缀 jx-；所有规则挂在 .c-jiang-xiaoyuan 或 jx- 类上。 */
.c-jiang-xiaoyuan {
  --bg: #ecd9a6; --paper: #f7ecd2; --ink: #231914; --ink-2: #47362a; --ink-3: #6a5440; --rule: rgba(35, 25, 20, .22);
  --acc: #a8321b; --acc-ink: #fbf1dc; --sky: #231914; --gold: #d9b25c; --plate: #d5ab55;
  --head: "Noto Serif SC", "Songti SC", serif; --body: "Noto Serif SC", "Songti SC", serif; --cao: "Liu Jian Mao Cao", "Noto Serif SC", serif;
  --bar-bg: rgba(236, 217, 166, .94); --chip-bg: rgba(247, 236, 210, .9); --chip-ring: #f7ecd2;
  background-color: var(--bg);
  background-image: radial-gradient(ellipse at 50% -10%, rgba(255, 246, 214, .55), transparent 60%),
    repeating-linear-gradient(97deg, rgba(120, 82, 30, .025) 0 2px, transparent 2px 9px);
}
.c-jiang-xiaoyuan .dlg { --dlg-bg: #efe2bd; --dlg-paper: #fbf4e1; --dlg-ink: #231914; --dlg-ink-2: #4a3828; --dlg-ink-3: #6f5a43;
  --dlg-me: #231914; --dlg-me-ink: #f7ecd2; --dlg-acc: #a8321b; --dlg-rule: rgba(35, 25, 20, .16); }
.c-jiang-xiaoyuan .c3bar { border-bottom: 1px solid var(--ink); box-shadow: 0 3px 0 -2px rgba(35, 25, 20, .5); }
.c-jiang-xiaoyuan .c3bar__prog { background: var(--acc); }
.c-jiang-xiaoyuan .mk { color: var(--acc); letter-spacing: .14em; font-weight: 600; }

/* ---------- 右侧的小式盘（目录） ---------- */
.c-jiang-xiaoyuan .c3toc { right: 18px; }
.jx-nav { position: relative; width: 104px; height: 104px; }
.jx-nav__b { position: absolute; inset: 0; width: 100%; height: 100%; }
.jx-nav__b rect { fill: rgba(213, 171, 85, .92); stroke: var(--ink); stroke-width: 1.4; }
.jx-nav__disc { transform-origin: 50px 50px; transform: rotate(180deg); transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
.jx-nav__disc circle { fill: var(--sky); }
.jx-nav__disc line { stroke: var(--gold); stroke-width: 1.6; }
.jx-nav__disc .p { fill: var(--acc); stroke: var(--gold); stroke-width: .8; }
.c-jiang-xiaoyuan .c3toc ol { position: absolute; inset: 0; display: block; }
.c-jiang-xiaoyuan .c3toc li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.c-jiang-xiaoyuan .c3toc a { position: relative; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; justify-content: center; }
.c-jiang-xiaoyuan .c3toc a::after { width: 8px; height: 8px; border: 1.4px solid var(--ink); background: var(--bg); }
.c-jiang-xiaoyuan .c3toc li:first-child a::after { border-color: var(--gold); background: transparent; }
.c-jiang-xiaoyuan .c3toc a[aria-current="true"]::after { background: var(--acc); border-color: var(--acc); box-shadow: 0 0 0 3px rgba(168, 50, 27, .25); }
.c-jiang-xiaoyuan .c3toc a span { position: absolute; right: calc(100% + 6px); top: 50%; transform: translateY(-50%); max-width: none; padding: 3px 9px;
  background: var(--paper); border: 1px solid var(--ink); color: var(--ink); font-size: 12.5px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.c-jiang-xiaoyuan .c3toc li:nth-child(n+6) a span { right: auto; left: calc(100% + 6px); }
.c-jiang-xiaoyuan .c3toc a:hover span, .c-jiang-xiaoyuan .c3toc a:focus-visible span { opacity: 1; }
body.c-jiang-xiaoyuan[data-cur="tension"] .jx-nav__disc { transform: rotate(225deg); }
body.c-jiang-xiaoyuan[data-cur="dating"] .jx-nav__disc { transform: rotate(270deg); }
body.c-jiang-xiaoyuan[data-cur="needham"] .jx-nav__disc { transform: rotate(315deg); }
body.c-jiang-xiaoyuan[data-cur="altar"] .jx-nav__disc { transform: rotate(360deg); }
body.c-jiang-xiaoyuan[data-cur="nature"] .jx-nav__disc { transform: rotate(405deg); }
body.c-jiang-xiaoyuan[data-cur="noodles"] .jx-nav__disc { transform: rotate(450deg); }
body.c-jiang-xiaoyuan[data-cur="end"] .jx-nav__disc { transform: rotate(495deg); }
@media (max-width: 1199px) { .c-jiang-xiaoyuan .c3toc { display: none; } }
/* 小式盘露出来时，给它在右边留出地方 */
@media (min-width: 1200px) {
  .c-jiang-xiaoyuan .c3hero, .c-jiang-xiaoyuan .c3q, .c-jiang-xiaoyuan .c3end { padding-right: max(146px, calc((100vw - 1180px) / 2)); padding-left: max(56px, calc((100vw - 1180px) / 2 - 40px)); }
}

/* ---------- 首屏 ---------- */
.c-jiang-xiaoyuan .c3hero { padding-top: calc(var(--bar) + 26px); padding-bottom: 40px; }
.jx-hero { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: center; max-width: 1240px; margin: 0 auto; }
.jx-k { margin: 0; font-size: 14px; letter-spacing: .2em; color: var(--acc); font-weight: 600; }
.jx-title h1 { position: relative; margin: 6px 0 0; font-family: var(--head); font-weight: 900; font-size: clamp(64px, 8.4vw, 120px); line-height: 1; letter-spacing: .06em; }
.jx-en { margin: 10px 0 16px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 18px; color: var(--ink-2); letter-spacing: .04em; }
.jx-who { margin: 0 0 4px; font-size: 19px; font-weight: 700; line-height: 1.6; }
.jx-now { margin: 0 0 14px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.jx-rel { margin: 0 0 14px; padding: 10px 14px 12px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 4px 4px 0 rgba(35, 25, 20, .14); }
.jx-rel p { margin: 0; font-size: 14.5px; line-height: 1.75; }
.jx-rel .mk { margin-bottom: 2px; }
.jx-shelf { margin: 0 0 12px; }
.jx-shelf ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 14px; line-height: 1.7; }
.jx-shelf small { margin-left: 3px; font-size: 12px; color: var(--ink-3); }
.c-jiang-xiaoyuan .c3-btn { border-radius: 2px; min-height: 40px; }
.c-jiang-xiaoyuan .c3-btn--go { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.c-jiang-xiaoyuan .c3-btn--deep { background: transparent; color: var(--ink); border-color: var(--ink); }
.jx-go { margin: 0; }

/* 式盘 */
.jx-pan { margin: 0; }
.jx-board { position: relative; width: min(100%, 680px, calc(100svh - 236px)); min-width: 280px; aspect-ratio: 1; margin: 0 auto; touch-action: pan-y;
  filter: drop-shadow(0 16px 22px rgba(70, 40, 10, .3)); }
.jx-earth { position: absolute; inset: 0; width: 100%; height: 100%; }
.jx-earth text { fill: var(--ink); font-family: var(--head); }
.jx-shan text { font-size: 13px; font-weight: 600; opacity: .7; }
.jx-shan text.is-main { fill: #6e1a0c; opacity: 1; font-weight: 900; }
.jx-xiu text { opacity: .55; }
.jx-men { opacity: .7; letter-spacing: .1em; }
.jx-heaven { position: absolute; left: 14.333%; top: 14.333%; width: 71.333%; height: 71.333%; border-radius: 50%; cursor: grab;
  transform: rotate(var(--rot, 180deg)); transition: transform .9s cubic-bezier(.3, .7, .2, 1); touch-action: pan-y; }
.jx-heaven.is-drag { cursor: grabbing; transition: none; }
.jx-heaven:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; }
.jx-sky { display: block; width: 100%; height: 100%; overflow: visible; }
.jx-sky text { fill: var(--gold); font-family: var(--head); }
.jx-sky__xiu text { opacity: .9; }
.jx-sky__mon text { opacity: .7; }
.jx-sky__ray { stroke: var(--acc); stroke-width: 1.4; stroke-dasharray: 3 4; opacity: .9; }
.jx-sky__ptr { fill: var(--acc); stroke: var(--gold); stroke-width: 1; }
.jx-dip path { stroke: var(--gold); stroke-width: 1.4; opacity: .85; }
.jx-dip circle { fill: var(--gold); }
.jx-dip circle.is-on { fill: var(--acc); }
.jx-dirs { list-style: none; margin: 0; padding: 0; }
.jx-d { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 2; }
.jx-d a { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 7px; border-radius: 2px; color: var(--ink); text-decoration: none; white-space: nowrap;
  font-size: 13.5px; line-height: 1.35; font-weight: 600; transition: background .2s, color .2s; }
.jx-d a i { font-style: normal; font-weight: 900; color: #6e1a0c; }
.jx-d a b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); font-size: 12.5px; }
.jx-d a:hover, .jx-d a:focus-visible, .jx-d.is-sel a { background: var(--sky); color: #f3e3b6; }
.jx-d a:hover b, .jx-d a:focus-visible b, .jx-d.is-sel a b { color: var(--gold); }
.jx-d a:hover i, .jx-d a:focus-visible i, .jx-d.is-sel a i { color: #f0a58f; }
.jx-d--e a, .jx-d--w a { writing-mode: vertical-rl; padding: 7px 3px; }
.jx-d--c a { display: block; width: 8.6em; white-space: normal; text-align: left; padding: 4px 7px; }
.jx-d--c a span { display: block; margin-top: 1px; }
.jx-d--c a i { margin-right: 5px; }
.jx-ctl { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px auto 0; max-width: 680px; }
.jx-turn { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1.4px solid var(--ink); background: var(--sky); color: var(--gold); font-size: 15px; cursor: pointer; }
.jx-turn:hover { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
.jx-ctl__out { flex: 1 1 auto; min-width: 0; margin: 0; text-align: center; font-size: 15px; font-weight: 600; line-height: 1.5; }
.jx-ctl__go { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; background: var(--acc); color: var(--acc-ink) !important; text-decoration: none; font-size: 14px; border-radius: 2px; }
.jx-ctl__go::after { content: " ▸"; margin-left: 4px; }
.jx-pan:not(.is-live) .jx-turn { display: none; }
.jx-pan figcaption { max-width: 680px; margin: 8px auto 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); text-align: center; }

.jx-band { max-width: 1240px; margin: 40px auto 0; padding-top: 20px; border-top: 1px solid var(--ink); box-shadow: inset 0 3px 0 -2px rgba(35, 25, 20, .45);
  display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 32px; }
.jx-band .mk { font-size: 13px; }
.jx-mk2 { margin-top: 16px !important; }
.jx-qlist { list-style: none; margin: 0; padding: 0; }
.jx-qlist a { display: grid; grid-template-columns: 2.6em 3em 1fr; gap: 6px; padding: 4px 0; border-bottom: 1px dotted var(--rule); text-decoration: none; font-size: 14.5px; line-height: 1.5; }
.jx-qlist a i { font-style: normal; font-weight: 900; color: var(--acc); }
.jx-qlist a b { font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.jx-qlist a:hover span { text-decoration: underline; }
.c-jiang-xiaoyuan .c3-feats { margin: 0; padding: 0; list-style: none; counter-reset: f; }
.c-jiang-xiaoyuan .c3-feats li { counter-increment: f; position: relative; padding: 4px 0 4px 26px; font-size: 14px; line-height: 1.65; border-bottom: 1px dotted var(--rule); }
.c-jiang-xiaoyuan .c3-feats li::before { content: counter(f, cjk-ideographic); position: absolute; left: 0; top: 4px; font-weight: 900; color: var(--acc); }
.jx-facts { margin: 0; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.c-jiang-xiaoyuan .c3-links li, .c-jiang-xiaoyuan .c3-books li { font-size: 14px; border-bottom-color: var(--rule); }

/* ---------- 每一问 ---------- */
.c-jiang-xiaoyuan .c3q, .c-jiang-xiaoyuan .c3end { display: block; position: relative; overflow: hidden; padding-top: calc(var(--bar) + 22px); padding-bottom: 72px; }
.c-jiang-xiaoyuan .c3q + .c3q, .c-jiang-xiaoyuan .c3end { border-top: 1px solid rgba(35, 25, 20, .28); }
.jx-big { position: absolute; z-index: 0; top: 70px; right: 0; font-family: var(--cao); font-style: normal; font-size: min(46vw, 600px); line-height: .9; color: rgba(35, 25, 20, .055); pointer-events: none; user-select: none; }
.c-jiang-xiaoyuan .c3q:nth-of-type(odd) .jx-big { right: auto; left: 0; }
.jx-q, .jx-end { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; }
.jx-rh { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); font-size: 14px; color: var(--ink-2); }
.jx-rh .d { font-weight: 700; color: var(--ink); letter-spacing: .08em; }
.jx-rh .d small { margin-left: 6px; font-size: 13px; color: var(--acc); font-weight: 900; }
.jx-rh .s { display: inline-flex; align-items: center; gap: 8px; }
.jx-rh .y { margin-left: auto; font-variant-numeric: tabular-nums; letter-spacing: .1em; }
.jx-mini rect { fill: var(--plate); stroke: var(--ink); stroke-width: 1.4; }
.jx-mini .d { fill: var(--sky); }
.jx-mini line { stroke: var(--gold); stroke-width: 1.6; }
.jx-mini .p { fill: var(--acc); }
.jx-dipi path { fill: none; stroke: var(--ink-3); stroke-width: 4; opacity: .7; }
.jx-dipi circle { fill: var(--bg); stroke: var(--ink-2); stroke-width: 4; }
.jx-dipi circle.lit { fill: var(--ink-2); }
.jx-dipi circle.on { fill: var(--acc); stroke: var(--acc); }

.jx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-rows: auto 1fr; grid-template-areas: "head art" "body art"; column-gap: clamp(28px, 4.4vw, 68px); row-gap: 6px; align-items: start; }
.c-jiang-xiaoyuan .c3q:nth-of-type(odd) .jx-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-areas: "art head" "art body"; }
.jx-head { grid-area: head; }
.jx-art { grid-area: art; position: relative; }
.jx-body { grid-area: body; }
.c-jiang-xiaoyuan .c3q__when b { font-size: 30px; font-weight: 900; color: var(--acc); letter-spacing: .02em; }
.c-jiang-xiaoyuan .c3q__when span { color: var(--ink-2); }
.c-jiang-xiaoyuan .c3q__q { margin: 6px 0 4px; font-size: clamp(30px, 3.5vw, 46px); line-height: 1.22; letter-spacing: .02em; text-wrap: pretty; }
.jx-nw { display: inline-block; }
.c-jiang-xiaoyuan .c3q__lede { margin-top: 8px; font-size: 16.5px; line-height: 1.95; text-align: justify; }
.c-jiang-xiaoyuan .c3-quote { position: relative; margin: 20px 0; padding: 14px 16px 12px 18px; border-left: 0; background: var(--paper); border: 1px solid var(--ink); box-shadow: 4px 4px 0 rgba(35, 25, 20, .13); }
.c-jiang-xiaoyuan .c3-quote::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 5px; background: var(--acc); }
.c-jiang-xiaoyuan .c3-quote blockquote p { font-size: 18px; font-weight: 700; line-height: 1.75; }
.c-jiang-xiaoyuan .c3-quote figcaption { color: var(--ink-3); }
.c-jiang-xiaoyuan .c3-tags li { border-radius: 2px; border-color: var(--ink); background: rgba(247, 236, 210, .6); color: var(--ink); }
.c-jiang-xiaoyuan .c3-works .mk, .c-jiang-xiaoyuan .c3-talk .mk { margin-top: 4px; }
.c-jiang-xiaoyuan .c3-works li { font-size: 15px; }
.c-jiang-xiaoyuan .talk { border-radius: 4px; border-color: var(--ink); background: var(--paper); }
.c-jiang-xiaoyuan .c3-ask { border-color: var(--ink-3); border-radius: 2px; background: rgba(247, 236, 210, .5); min-height: 40px; }
.c-jiang-xiaoyuan .c3-deeplink { color: var(--acc); }

/* 图 */
.jx-fig { margin: 0; }
.jx-fig img { display: block; width: 100%; height: auto; }
.jx-fig figcaption, .jx-cap { margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.jx-fig--wide img { border: 1px solid var(--ink); box-shadow: 5px 5px 0 rgba(35, 25, 20, .14); }

/* 小机关通用 */
.jx-wid { margin-top: 18px; padding: 14px 16px 16px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 5px 5px 0 rgba(35, 25, 20, .14); }
.jx-art > .jx-wid:first-child { margin-top: 0; }
.jx-wk { margin: 0 0 10px; font-size: 13px; letter-spacing: .14em; font-weight: 700; color: var(--acc); }
.jx-wk span { display: inline-block; padding: 2px 8px 1px; border: 1.4px solid var(--acc); }
.jx-wid svg { display: block; width: 100%; height: auto; }
.jx-seg { display: inline-flex; flex-wrap: wrap; margin-top: 10px; border: 1.4px solid var(--ink); }
.jx-seg button { min-height: 40px; padding: 6px 14px; border: 0; border-left: 1px solid var(--ink); background: transparent; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.jx-seg button:first-child { border-left: 0; }
.jx-seg button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.jx-seg button:not([aria-checked="true"]):hover { background: rgba(35, 25, 20, .08); }
.jx-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border: 1.4px solid var(--acc); background: var(--acc); color: var(--acc-ink); font: inherit; font-size: 14px; cursor: pointer; border-radius: 2px; }
.jx-btn:hover { filter: brightness(1.08); }
.jx-btn--q { background: transparent; color: var(--ink); border-color: var(--ink); }
.jx-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.jx-out { margin-top: 10px; font-size: 14.5px; line-height: 1.8; color: var(--ink-2); }
.jx-out p { margin: 0 0 6px; }
.jx-out b { color: var(--ink); }
.is-live .jx-st:not(.on) { display: none; }
.jx-note { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); }

/* 第一问：寿星与 57 次天象 */
.jx-tx { display: grid; grid-template-columns: minmax(120px, .62fr) minmax(0, 1fr); gap: 22px; align-items: end; }
.jx-fig--sx img { max-height: 70vh; width: auto; max-width: 100%; margin: 0 auto; filter: drop-shadow(0 18px 18px rgba(60, 35, 10, .35)); }
.jx-fig--sx figcaption { text-align: center; }
.jx-tally { padding: 14px 16px; background: var(--sky); color: #efdcae; border: 1px solid var(--ink); box-shadow: 5px 5px 0 rgba(35, 25, 20, .16); }
.jx-tally .jx-wk { color: #f0a58f; }
.jx-tally .jx-wk span { border-color: #f0a58f; }
.jx-tally__big { margin: 0 0 8px; display: flex; align-items: baseline; gap: 10px; }
.jx-tally__big b { font-size: 54px; line-height: 1; font-weight: 900; color: var(--gold); }
.jx-tally__big span { font-size: 15px; }
.jx-dots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(19, 1fr); gap: 5px; max-width: 360px; }
.jx-dots li { aspect-ratio: 1; border-radius: 50%; border: 1.3px solid rgba(217, 178, 92, .7); }
.jx-dots li.on { background: #d4492b; border-color: #e7735a; }
.is-live .jx-dots li.on { background: transparent; transition: background .3s, border-color .3s; }
.is-live.is-lit .jx-dots li.on { background: #d4492b; border-color: #e7735a; transition-delay: calc(var(--i) * 45ms); }
.jx-tally__key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 8px; font-size: 13.5px; }
.jx-tally__key i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; border: 1.3px solid rgba(217, 178, 92, .8); vertical-align: 0; }
.jx-tally__key i.on { background: #d4492b; border-color: #e7735a; }
.jx-tally__n { margin: 0; font-size: 13.5px; line-height: 1.8; color: #e3cf9e; }

/* 第二问：性张力的绳子 */
.jx-rope__ground { stroke: var(--ink); stroke-width: 1.2; }
.jx-rope__post { fill: var(--plate); stroke: var(--ink); stroke-width: 1.6; transition: y .9s cubic-bezier(.3, .7, .2, 1), height .9s cubic-bezier(.3, .7, .2, 1); }
.jx-rope__line { fill: none; stroke: var(--acc); stroke-width: 4; stroke-linecap: round; transition: d .9s cubic-bezier(.3, .7, .2, 1); }
.jx-rope.is-taut .jx-rope__line { animation: jx-hum .14s linear infinite alternate; }
@keyframes jx-hum { from { transform: translateY(-.8px); } to { transform: translateY(.8px); } }
.jx-rope__meter { transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
.jx-rope__meter .hook { stroke: var(--ink); stroke-width: 1.6; }
.jx-rope__meter .face { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }
.jx-rope__meter .arc { fill: none; stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 2 3; }
.jx-rope__meter .z { font-size: 10px; fill: var(--ink-2); font-family: var(--body); }
.jx-rope__meter .needle { stroke: var(--acc); stroke-width: 2.2; stroke-linecap: round; transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
.jx-rope__meter .hub { fill: var(--ink); }
.jx-rope__lab { font-size: 17px; font-weight: 900; fill: var(--ink); font-family: var(--head); }

/* 第三问：日食与干支轮 */
.jx-date .jx-fig--wide { margin-bottom: 4px; }
.jx-cyc__in { display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr); gap: 18px; align-items: center; }
.jx-cyc svg { overflow: visible; }
.jx-cyc .r1, .jx-cyc .r2, .jx-cyc .r3 { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.jx-cyc .r1 { fill: var(--plate); }
.jx-cyc .r2 { fill: var(--sky); }
.jx-cyc .r3 { fill: var(--paper); }
.jx-cyc__b text { font-size: 15px; font-weight: 900; fill: var(--ink); text-anchor: middle; dominant-baseline: central; font-family: var(--head); }
.jx-cyc__s text { font-size: 14px; font-weight: 700; fill: var(--gold); text-anchor: middle; dominant-baseline: central; font-family: var(--head); }
.jx-cyc__b, .jx-cyc__s { transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
.jx-cyc.is-counting .jx-cyc__b, .jx-cyc.is-counting .jx-cyc__s { transition: transform .05s linear; }
.jx-cyc__tk line { stroke: var(--ink); stroke-width: .8; opacity: .55; }
.jx-cyc__ptr { fill: var(--acc); stroke: var(--ink); stroke-width: 1; }
.jx-cyc .sun { fill: #e0a93a; stroke: var(--acc); stroke-width: 1.5; }
.jx-cyc .moon { fill: var(--sky); }
.jx-cyc__sun { transition: opacity .4s; }
.jx-cyc__born { font-size: 13px; font-weight: 900; fill: var(--acc); text-anchor: middle; dominant-baseline: central; font-family: var(--head); opacity: 0; transition: opacity .4s; }
.jx-cyc.is-born .jx-cyc__born { opacity: 1; }
.jx-cyc.is-born .jx-cyc__sun, .jx-cyc.is-counting .jx-cyc__sun { opacity: 0; }
.jx-cyc__read .gz { margin: 0; font-size: 46px; line-height: 1.1; font-weight: 900; color: var(--acc); letter-spacing: .08em; }
.jx-cyc__read .dt { margin: 4px 0 0; font-size: 16px; font-weight: 700; }
.jx-cyc__read .n { margin: 2px 0 10px; font-size: 14px; color: var(--ink-3); }
.jx-cyc__btns, .jx-if__btns, .jx-altar__btns, .jx-bowls__btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.jx-if__s { margin: 4px 0 0; font-size: 18px; line-height: 1.8; font-weight: 700; }
.jx-if__w { display: inline-block; color: var(--acc); position: relative; transition: color .4s, opacity .4s; }
.jx-if__w::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2.5px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .5s; }
.jx-if.is-dropped .jx-if__w { color: var(--ink-3); opacity: .55; }
.jx-if.is-dropped .jx-if__w::after { transform: scaleX(1); }

/* 第四问：两条路 */
.jx-ndm .jx-fig--wide { margin-bottom: 4px; }
.jx-road svg .rd { fill: none; stroke: var(--ink); stroke-width: 15; stroke-linecap: round; opacity: .16; }
.jx-road svg .who circle { fill: var(--acc); stroke: var(--ink); stroke-width: 1.4; }
.jx-road svg .who.w circle { fill: var(--sky); }
.jx-road svg .who text { fill: #fbf1dc; font-size: 15px; font-weight: 900; text-anchor: middle; dominant-baseline: central; font-family: var(--head); }
.jx-road svg .arr { fill: none; stroke: var(--acc); stroke-width: 1.6; stroke-dasharray: 4 4; }
.jx-road svg .cap { fill: var(--ink); font-size: 15px; font-weight: 700; text-anchor: middle; font-family: var(--head); }
.jx-road svg .bridge path { fill: none; stroke: var(--ink); stroke-width: 2; }
.jx-road svg .bridge .planks { stroke-width: 3.5; stroke: var(--acc); }
.jx-road svg g[data-v] { opacity: 0; transition: opacity .6s; }
.jx-road svg g[data-v="0"] { opacity: 1; }
.jx-road[data-view="1"] svg g[data-v="0"], .jx-road[data-view="2"] svg g[data-v="0"] { opacity: 0; }
.jx-road[data-view="1"] svg g[data-v="1"], .jx-road[data-view="2"] svg g[data-v="2"] { opacity: 1; }

/* 第五问：请下神坛 */
.jx-altar svg { max-width: 560px; }
.jx-altar .roof { fill: var(--sky); stroke: var(--ink); stroke-width: 2; }
.jx-altar .frame { fill: #3a2a20; stroke: var(--ink); stroke-width: 2; }
.jx-altar .halo circle { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 2 5; transition: opacity .8s; }
.jx-altar .plaques rect { fill: var(--acc); stroke: var(--ink); stroke-width: 1.2; transition: fill .8s, opacity .8s; }
.jx-altar .plaques text { fill: #fbe9c0; font-size: 16px; font-weight: 700; text-anchor: middle; font-family: var(--head); transition: opacity .8s; }
.jx-altar .incense path { fill: none; stroke: var(--ink-3); stroke-width: 2; }
.jx-altar .incense .smoke { stroke: var(--ink-3); stroke-width: 1.2; opacity: .6; animation: jx-smoke 3s ease-in-out infinite; transition: opacity .8s; }
@keyframes jx-smoke { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(-4px); opacity: .25; } }
.jx-altar .block { fill: #b98a4a; stroke: var(--ink); stroke-width: 1.6; }
.jx-altar .top { fill: #d9b071; stroke: var(--ink); stroke-width: 1.6; }
.jx-altar .veg circle { fill: var(--acc); stroke: var(--ink); stroke-width: 1.2; }
.jx-altar .veg path { fill: #6c7a3a; stroke: var(--ink); stroke-width: 1.2; }
.jx-altar__knife { transform: translate(98px, 104px); transition: transform 1.3s cubic-bezier(.5, -.1, .2, 1.1); }
.jx-altar__knife .blade { fill: #c9c4b4; stroke: var(--ink); stroke-width: 2; }
.jx-altar__knife .handle { fill: var(--sky); stroke: var(--ink); stroke-width: 1.6; }
.jx-altar__knife .hole { fill: #3a2a20; }
.jx-altar.is-down .jx-altar__knife { transform: translate(368px, 172px) rotate(-14deg); }
.jx-altar.is-down .halo circle, .jx-altar.is-down .incense .smoke { opacity: 0; }
.jx-altar.is-down .plaques rect { fill: #8f7a63; opacity: .45; }
.jx-altar.is-down .plaques text { opacity: .55; }

/* 第六问：《自然》创刊号的一页 */
.jx-nat__page { position: relative; border: 1px solid var(--ink); box-shadow: 6px 6px 0 rgba(35, 25, 20, .14); background: #f7efd9; }
.jx-nat__page img { display: block; width: 100%; height: auto; }
.jx-hot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 40px; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.jx-hot span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--acc); color: var(--acc-ink); font: 700 14px/1 var(--body);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--acc); transition: transform .2s; }
.jx-hot::before { content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--acc); animation: jx-ping 2.4s ease-out infinite; }
@keyframes jx-ping { 0% { transform: scale(1); opacity: .8; } 80%, 100% { transform: scale(1.9); opacity: 0; } }
.jx-hot[aria-pressed="true"] span { background: var(--sky); box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px var(--sky); transform: scale(1.15); }
.jx-hot[aria-pressed="true"]::before { animation: none; opacity: 0; }
.jx-nat__note { min-height: 9.5em; }
.jx-st--hint { font-style: normal; color: var(--ink-3); }

/* 第七问：两碗面条 */
.jx-bowls__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jx-bowl .soup { fill: #c98f3a; }
.jx-bowl .rim { fill: none; stroke: var(--gold); stroke-width: 2.5; }
.jx-bowl .noo path { fill: none; stroke: #f4dc9c; stroke-linecap: round; }
.jx-bowl .noo--up path { stroke: #f4dc9c; }
.jx-bowl { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px 12px; border: 1.4px dashed var(--ink-3); background: transparent; color: var(--ink); font: inherit; cursor: pointer; border-radius: 4px; transition: background .25s, border-color .25s, transform .25s; }
.jx-bowl svg { width: 132px; max-width: 100%; height: auto; }
.jx-bowl .bowl { fill: var(--sky); stroke: var(--ink); stroke-width: 2; }
.jx-bowl .foot { fill: none; stroke: var(--ink); stroke-width: 2; }
.jx-bowl .chop { stroke: #8a5a2b; stroke-width: 3; stroke-linecap: round; }
.jx-bowl b { font-size: 17px; font-weight: 900; }
.jx-bowl span { font-size: 13px; color: var(--ink-2); text-align: center; }
.jx-bowl[aria-pressed="true"] { border-style: solid; border-color: var(--acc); background: rgba(168, 50, 27, .07); transform: translateY(-3px); }
.jx-bowl[aria-pressed="true"] b::before { content: "已买 · "; color: var(--acc); font-size: 13px; }

/* 南腔北调：□ 江晓原，■ 刘兵（与刘兵名片呼应） */
.jx-nq { margin-top: 18px; padding: 12px 16px 12px; background: #fbf6e8; color: #1f1a16; border: 1px solid var(--ink); border-top: 4px double var(--ink);
  font-family: "Noto Serif SC", serif; box-shadow: 5px 5px 0 rgba(35, 25, 20, .14); }
.jx-nq__h { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding-bottom: 6px; border-bottom: 1px solid rgba(31, 26, 22, .3); }
.jx-nq__h b { font-size: 19px; font-weight: 900; letter-spacing: .3em; }
.jx-nq__h span { font-size: 12.5px; color: #5a5048; }
.jx-nq__l { margin: 0 0 6px; font-size: 14.5px; line-height: 1.8; }
.jx-nq__l i { font-style: normal; margin-right: 4px; font-size: 15px; }
.jx-nq__l b { margin-right: 4px; }
.jx-nq__l b::after { content: "："; }
.jx-nq__l--me { background: rgba(168, 50, 27, .08); box-shadow: -6px 0 0 rgba(168, 50, 27, .08); }
.jx-nq__k { margin: 8px 0 0; font-size: 12.5px; color: #5a5048; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.jx-nq__k a { color: var(--acc); font-weight: 700; }

/* ---------- 结尾 ---------- */
.jx-end__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 280px); gap: 28px; align-items: center; margin-bottom: 22px; }
.c-jiang-xiaoyuan .c3end h2 { margin: 0 0 10px; font-weight: 900; font-size: clamp(30px, 4vw, 46px); }
.jx-end__lead { margin: 0; font-size: 16px; line-height: 1.9; color: var(--ink-2); max-width: 40em; }
.jx-fig--mirror img { filter: drop-shadow(0 12px 16px rgba(50, 30, 10, .35)); }
.jx-fig--mirror figcaption { text-align: center; }
.c-jiang-xiaoyuan .c3-lin li { border-radius: 2px; border-color: var(--ink); background: var(--paper); }
.c-jiang-xiaoyuan .c3end h3 { font-weight: 900; }
.c-jiang-xiaoyuan .c3-credits, .c-jiang-xiaoyuan .c3-fine { color: var(--ink-3); }

/* 触屏：链接与按钮的点按区域不小于 40px */
@media (pointer: coarse) {
  .jx-d a { min-height: 40px; min-width: 40px; justify-content: center; align-items: center; }
  .jx-d--e a, .jx-d--w a { min-height: 40px; min-width: 40px; }
  .jx-qlist a { min-height: 40px; align-items: center; }
  .c-jiang-xiaoyuan .c3-books a, .c-jiang-xiaoyuan .c3-links a, .c-jiang-xiaoyuan .c3-works a { display: inline-block; padding: 8px 0; }
  .c-jiang-xiaoyuan .c3-deeplink { display: inline-flex; align-items: center; min-height: 40px; }
  .jx-nq__k a { display: inline-flex; align-items: center; min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .jx-hot::before, .jx-altar .incense .smoke, .jx-rope.is-taut .jx-rope__line { animation: none; }
}
@media (max-width: 1100px) {
  .jx-band { grid-template-columns: 1fr 1fr; }
  .jx-band__b { grid-column: 1 / -1; }
  .jx-band__b .c3-books { columns: 2; column-gap: 28px; }
  .jx-band__b .c3-books li { break-inside: avoid; }
}
@media (max-width: 960px) {
  .jx-hero { grid-template-columns: minmax(0, 1fr); }
  .jx-board { width: min(100%, 560px); }
  .jx-grid, .c-jiang-xiaoyuan .c3q:nth-of-type(odd) .jx-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "art" "body"; row-gap: 14px; }
  .jx-big { font-size: 72vw; top: 120px; }
}
@media (max-width: 640px) {
  .c-jiang-xiaoyuan .c3hero { padding-top: calc(var(--bar) + 16px); }
  .jx-title h1 { font-size: 64px; }
  .jx-d a span { display: none; }
  .jx-d a { font-size: 12px; padding: 2px 4px; gap: 3px; }
  .jx-d a b { font-size: 11px; }
  .jx-d--c a { width: auto; }
  .jx-ctl { flex-wrap: wrap; }
  .jx-ctl__out { order: -1; flex-basis: 100%; }
  .jx-band { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .jx-band__q { order: -1; }
  .jx-rh { gap: 10px; font-size: 13px; }
  .jx-rh .s { display: none; }
  .jx-tx { grid-template-columns: minmax(0, 1fr); }
  .jx-fig--sx img { max-height: 46vh; }
  .jx-cyc__in { grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
  .jx-cyc__read .gz { font-size: 34px; }
  .jx-end__top { grid-template-columns: minmax(0, 1fr); }
  .jx-fig--mirror { max-width: 220px; margin: 0 auto; }
  .jx-seg button { padding: 6px 11px; }
}