/* 库恩 · 鸭兔：1960 年代现代主义版面。黑白之外只有一种专色：革命前是蓝（鸭），革命后是橙（兔）。
   body.kh-flip = 范式已转换；body.kh-js = 脚本在（没有脚本时两种读法都并排显示）。 */
@property --kh-a { syntax: '<color>'; inherits: true; initial-value: #2440d8; }
@property --kh-av { syntax: '<color>'; inherits: true; initial-value: #2440d8; }
.c-kuhn {
  --bg: #f3f1ea; --paper: #fbfaf6; --ink: #121212; --ink-2: #3d3d3d; --ink-3: #5e5e5e; --rule: rgba(18, 18, 18, .16);
  --duck: #2440d8; --rab: #c0400b; --rab-v: #ea5a1e;
  --kh-a: #2440d8; --kh-av: #2440d8; --acc: var(--kh-a); --acc-v: var(--kh-av); --acc-ink: #fff;
  --head: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --lat: "Archivo", "Noto Sans SC", sans-serif;
  --bar-bg: rgba(243, 241, 234, .95); --chip-bg: #fbfaf6; --chip-ring: #fbfaf6;
  background: var(--bg);
  transition: --kh-a .7s ease, --kh-av .7s ease;
  font-size: 16px;
}
.c-kuhn.kh-flip { --kh-a: #c0400b; --kh-av: #ea5a1e; }
.c-kuhn .dlg { --dlg-bg: #efeee8; --dlg-paper: #fff; --dlg-me: #121212; --dlg-me-ink: #fbfaf6; --dlg-acc: #2440d8;
  --dlg-font: "Noto Sans SC", "PingFang SC", sans-serif; }
.c-kuhn.kh-flip .dlg { --dlg-acc: #b23b0a; }
.c-kuhn ::selection { background: rgba(36, 64, 216, .2); }

/* 两种读法的开关：.kh-a 只在革命前显示，.kh-b 只在革命后显示 */
.c-kuhn .kh-b { display: none; }
.c-kuhn.kh-flip .kh-a { display: none; }
.c-kuhn.kh-flip .kh-b { display: inline; }

/* 页头与目录 */
.c-kuhn .c3bar { border-bottom: 2px solid var(--ink); font-family: var(--body); }
.c-kuhn .c3bar__t a { font-weight: 900; letter-spacing: .02em; }
.c-kuhn .c3bar__prog { height: 4px; bottom: -3px; background: var(--acc-v); }
.c-kuhn .c3toc { right: 10px; }
.c-kuhn .c3toc ol { gap: 2px; }
.c-kuhn .c3toc a { gap: 8px; padding: 3px 0; font: 600 12px/1.2 var(--lat); font-stretch: 75%; color: var(--ink-3); }
.c-kuhn .c3toc a span { font-family: var(--body); font-weight: 500; font-size: 12.5px; background: var(--paper); }
.c-kuhn .c3toc a b { font-weight: 700; font-size: 13px; letter-spacing: .02em; min-width: 1.6em; text-align: right; }
.c-kuhn .c3toc a::after { width: 14px; height: 3px; border: 0; border-radius: 0; background: currentColor; transition: width .3s; }
.c-kuhn .c3toc a[aria-current="true"] { color: var(--acc); }
.c-kuhn .c3toc a[aria-current="true"] b { color: var(--ink); }
.c-kuhn .c3toc a[aria-current="true"]::after { width: 30px; background: var(--acc-v); }

/* 通用小部件 */
.c-kuhn .mk { font: 700 12px/1.4 var(--body); letter-spacing: .14em; color: var(--ink); text-transform: uppercase; }
.c-kuhn .c3-btn { border-radius: 0; border-width: 2px; font: 700 14px/1.3 var(--body); padding: 10px 16px; min-height: 44px; }
.c-kuhn .c3-btn--go { background: var(--acc); border-color: var(--acc); color: #fff; }
.c-kuhn .c3-btn--deep { background: transparent; color: var(--ink); border-color: var(--ink); }
.c-kuhn .c3-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* 翻转开关 */
.kh-fb { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 6px 5px 14px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--paper); color: var(--ink); font: 700 14px/1 var(--body); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kh-fb:hover { background: #fff; }
.kh-fb__s { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; width: 78px; height: 32px; border-radius: 999px; background: var(--ink); }
.kh-fb__s::before { content: ""; position: absolute; top: 3px; left: 3px; width: 36px; height: 26px; border-radius: 999px; background: var(--duck);
  transition: transform .45s cubic-bezier(.3, 1.35, .5, 1), background-color .45s; }
.kh-fb__s i { position: relative; z-index: 1; display: grid; place-items: center; font-style: normal; font-size: 14px; color: #fff; transition: color .3s; }
.kh-fb[aria-pressed="true"] .kh-fb__s::before { transform: translateX(36px); background: var(--rab-v); }
.kh-fb[aria-pressed="true"] .kh-fb__s i:last-child { color: var(--ink); }
.kh-fb--big { padding: 7px 8px 7px 20px; font-size: 16px; gap: 14px; }
.kh-fb--big .kh-fb__s { width: 104px; height: 42px; }
.kh-fb--big .kh-fb__s::before { width: 48px; height: 34px; top: 4px; left: 4px; }
.kh-fb--big[aria-pressed="true"] .kh-fb__s::before { transform: translateX(48px); }
.kh-fb--big .kh-fb__s i { font-size: 18px; font-weight: 900; }
.c-kuhn:not(.kh-js) .kh-fb { display: none; }
.kh-float { position: fixed; top: 2px; left: 50%; z-index: 910; transform: translateX(-50%); transition: transform .3s ease, opacity .3s; }
.kh-float.is-off { transform: translate(-50%, -60px); opacity: 0; pointer-events: none; }
.kh-float .kh-fb { min-height: 44px; padding-top: 4px; padding-bottom: 4px; background: var(--bg); }
.kh-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 两种读法 */
.kh-rd { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }
.kh-rd b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 2px; font-size: 15px; color: var(--ink); }
.kh-rd b i { font: 700 11.5px/1.7 var(--body); font-style: normal; letter-spacing: .08em; padding: 0 7px; color: #fff; background: var(--duck); }
.kh-rd--b b i { background: #b23b0a; }
.kh-rd + .kh-rd { margin-top: 10px; }
.kh-js .kh-pl__c, .kh-js .kh-dr figcaption { display: grid; }
.kh-js .kh-rd { grid-area: 1 / 1; transition: opacity .45s ease .25s, transform .45s ease .25s, visibility 0s linear .25s; }
.kh-js .kh-rd + .kh-rd { margin-top: 0; }
.kh-js .kh-rd--b, .kh-flip.kh-js .kh-rd--a { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility 0s linear .2s; }
.kh-flip.kh-js .kh-rd--b { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease .25s, transform .45s ease .25s, visibility 0s; }

/* ---------- 首屏 ---------- */
.c-kuhn .c3hero { padding: calc(var(--bar) + 24px) clamp(16px, 4.5vw, 64px) 40px; }
.kh-hero { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 28px; row-gap: 26px;
  grid-template-areas: "id id id id fig fig fig fig fig toc toc toc" "books books books books books books feats feats feats feats feats feats"
                       "facts facts facts facts facts facts links links links links links links"; align-items: start; }
.kh-id { grid-area: id; min-width: 0; }
.kh-fig { grid-area: fig; min-width: 0; }
.kh-toc { grid-area: toc; min-width: 0; }
.kh-books { grid-area: books; } .kh-feats { grid-area: feats; } .kh-facts { grid-area: facts; } .kh-links { grid-area: links; }
.kh-toc, .kh-books, .kh-feats, .kh-facts, .kh-links { min-width: 0; border-top: 6px solid var(--ink); padding-top: 10px; }
.kh-k { display: flex; gap: 0; margin: 0 0 10px; font: 700 13px/1 var(--body); letter-spacing: .14em; }
.kh-k span { padding: 6px 10px; border: 2px solid var(--ink); }
.kh-k span + span { background: var(--ink); color: var(--paper); }
.kh-name { margin: 0; font: 900 clamp(92px, 10vw, 140px)/.95 var(--head); letter-spacing: -.02em; margin-left: -.04em; }
.kh-en { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 10px 0 14px; font: 500 22px/1.2 var(--lat); letter-spacing: -.01em; }
.kh-en b { font-weight: 800; font-stretch: 70%; font-size: 27px; color: var(--acc); }
.kh-who { margin: 0 0 4px; font-size: 18px; font-weight: 700; line-height: 1.5; }
.kh-now { margin: 0 0 14px; font-size: 14px; color: var(--ink-3); }
.kh-rel { margin: 0; padding: 10px 0 0; border-top: 2px solid var(--ink); }
.kh-rel .mk { color: var(--acc); }
.kh-rel p:last-child { margin: 0; font-size: 14.5px; line-height: 1.8; }
.kh-go { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kh-go .c3-btn { margin: 0; }
.kh-facts p:last-child { margin: 0; font-size: 14.5px; line-height: 1.85; color: var(--ink-2); }
.kh-dr { margin: 0; }
.kh-dr__f { position: relative; background: var(--paper); border: 2px solid var(--ink); padding: 4% 4% 0; overflow: hidden; }
.kh-dr__f img { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
.kh-dr__ov { position: absolute; z-index: 2; left: 4%; top: 4%; width: 92%; height: auto; overflow: visible; }
.kh-ov { transition: opacity .5s ease; }
.kh-ov--b { opacity: 0; }
.kh-flip .kh-ov--a { opacity: 0; }
.kh-flip .kh-ov--b { opacity: 1; }
.kh-ov__w path { fill: none; stroke: var(--duck); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s ease; }
.kh-ov__g path { fill: none; stroke: var(--rab-v); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s ease .1s; }
.kh-flip .kh-ov__w path { stroke-dashoffset: 1; }
.kh-flip .kh-ov__g path { stroke-dashoffset: 0; }
.kh-ov__l { fill: none; stroke-width: 3; }
.kh-ov--a .kh-ov__l, .kh-ov--a .kh-ov__d { stroke: var(--duck); fill: var(--duck); }
.kh-ov--a .kh-ov__l { fill: none; }
.kh-ov--b .kh-ov__l { stroke: #b23b0a; }
.kh-ov--b .kh-ov__d { fill: #b23b0a; }
.kh-ov__t { font: 900 46px/1 var(--body); paint-order: stroke; stroke: var(--paper); stroke-width: 10px; stroke-linejoin: round; }
.kh-ov--a .kh-ov__t, .kh-ov--a .kh-ov__dir { fill: var(--duck); }
.kh-ov--b .kh-ov__t, .kh-ov--b .kh-ov__dir { fill: #b23b0a; }
.kh-ov__dir { font: 800 30px/1 var(--body); paint-order: stroke; stroke: var(--paper); stroke-width: 8px; }
.kh-dr figcaption { padding: 12px 0 0; }
.kh-dr figcaption small { display: block; grid-row: 2; margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.kh-sw { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--ink); }
.kh-sw__n { flex: 1 1 260px; margin: 0; font-size: 14px; line-height: 1.6; font-weight: 500; }
.kh-sw__n span { display: block; color: var(--ink-3); font-weight: 400; font-size: 13px; }
.c-kuhn:not(.kh-js) .kh-sw__n { font-size: 0; } .c-kuhn:not(.kh-js) .kh-sw__n span { font-size: 13px; }
.c-kuhn .c3-qlist li a { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; padding: 6px 0 7px;
  border-bottom: 1px solid var(--rule); text-decoration: none; line-height: 1.45; }
.c-kuhn .c3-qlist li a b { grid-column: 1; font: 800 15px/1.2 var(--lat); font-stretch: 70%; color: var(--acc); }
.c-kuhn .c3-qlist li a span { grid-column: 1 / -1; font-size: 15px; font-weight: 700; }
.c-kuhn .c3-qlist li a::after { content: "→"; grid-column: 2; grid-row: 1; justify-self: end; font: 700 14px/1.2 var(--lat); color: var(--ink-3); transition: transform .2s, color .2s; }
.c-kuhn .c3-qlist li a:hover::after, .c-kuhn .c3-qlist li a:focus-visible::after { transform: translateX(3px); color: var(--acc); }
.c-kuhn .c3-qlist li a:hover span { text-decoration: underline; text-decoration-color: var(--acc); text-underline-offset: 4px; }
.c-kuhn .c3-books li { padding: 5px 0; border-bottom: 1px solid var(--rule); font-size: 15px; font-weight: 700; line-height: 1.45; }
.c-kuhn .c3-books li a { text-decoration-color: var(--acc); text-underline-offset: 3px; }
.c-kuhn .c3-books small { font-size: 12px; font-weight: 400; line-height: 1.5; margin-top: 2px; }
.c-kuhn .c3-feats { margin: 0; padding: 0; list-style: none; counter-reset: f; }
.c-kuhn .c3-feats li { counter-increment: f; position: relative; padding: 4px 0 4px 2.2em; border-bottom: 1px solid var(--rule); font-size: 14.5px; line-height: 1.6; }
.c-kuhn .c3-feats li::before { content: counter(f, decimal-leading-zero); position: absolute; left: 0; top: 6px; font: 800 14px/1 var(--lat); font-stretch: 70%; color: var(--acc); }
.c-kuhn .c3-links li { font-size: 14px; border-bottom-style: solid; }
.c-kuhn .c3-links a { text-decoration-color: var(--acc); text-underline-offset: 3px; }

/* ---------- 每一问 ---------- */
.c-kuhn .c3q { display: block; padding: 30px clamp(16px, 4.5vw, 64px) 72px; }
.kh-q { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(28px, 4.2vw, 68px);
  grid-template-areas: "bar bar" "h art" "txt art"; grid-template-rows: auto auto 1fr; align-items: start; }
.c-kuhn .c3q:nth-of-type(odd) .kh-q { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "bar bar" "art h" "art txt"; }
.kh-q__bar { grid-area: bar; display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 16px; margin: 0 0 22px; padding-top: 8px;
  border-top: 8px solid var(--ink); font: 600 13px/1.3 var(--body); color: var(--ink-2); }
.kh-q__no { font: 800 30px/1 var(--lat); font-stretch: 70%; color: var(--ink); }
.kh-q__no small { font-size: 16px; color: var(--ink-3); }
.kh-q__src { text-align: center; }
.kh-q__st i { font-style: normal; font-weight: 700; color: var(--acc); }
.kh-q__h { grid-area: h; min-width: 0; }
.kh-q__art { grid-area: art; min-width: 0; position: sticky; top: calc(var(--bar) + 16px); }
.kh-q__txt { grid-area: txt; min-width: 0; }
.c-kuhn .c3q__when { flex-wrap: wrap; gap: 4px 14px; align-items: baseline; color: var(--ink-2); font-size: 14px; font-weight: 500; }
.c-kuhn .c3q__when b { font: 800 clamp(64px, 7.4vw, 112px)/.82 var(--lat); font-stretch: 66%; letter-spacing: -.01em; color: var(--acc); }
.c-kuhn .c3q__q { margin: 14px 0 18px; font: 900 clamp(30px, 3.3vw, 46px)/1.2 var(--head); letter-spacing: -.01em; }
.c-kuhn .c3q__lede { font-size: 16.5px; line-height: 1.9; color: var(--ink); }
.c-kuhn .c3-quote { margin: 20px 0; padding: 14px 0 14px 18px; border-left: 8px solid var(--acc); }
.c-kuhn .c3-quote blockquote p { font-size: 18.5px; font-weight: 700; line-height: 1.65; }
.c-kuhn .c3-quote blockquote p::before { content: "“"; } .c-kuhn .c3-quote blockquote p::after { content: "”"; }
.c-kuhn .c3-orig { font: 400 14px/1.55 var(--lat); font-style: normal; color: var(--ink-3); }
.c-kuhn .c3-quote figcaption { font-size: 12.5px; }
.c-kuhn .c3-tags li { border-radius: 0; border: 1.5px solid var(--ink); font-size: 13px; font-weight: 500; color: var(--ink); background: var(--paper); }
.c-kuhn .c3-works { margin-top: 10px; }
.c-kuhn .c3-works li { padding: 5px 0; border-top: 1px solid var(--rule); font-weight: 700; font-size: 15px; }
.c-kuhn .c3-works a { text-decoration-color: var(--acc); text-underline-offset: 3px; }
.c-kuhn .talk { border-radius: 0; border: 2px solid var(--ink); background: var(--paper); }
.c-kuhn .talk:hover { box-shadow: 6px 6px 0 var(--acc-v); transform: translate(-2px, -2px); }
.c-kuhn .c3-deeplink { color: var(--ink); text-decoration-color: var(--acc); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.c-kuhn .c3-ask { border-radius: 0; border: 1.5px solid var(--ink); background: var(--paper); }
.c-kuhn .c3-ask:hover { border-color: var(--acc); }

/* 图版 */
.kh-pl { margin: 0; }
.kh-pl__c { margin-top: 12px; padding-top: 10px; border-top: 2px solid var(--ink); }
.kh-pl__src { grid-row: 2; margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.kh-pl > .kh-fb { margin-top: 12px; }
.kh-doc { margin: 18px 0 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: end; }
.kh-doc img { display: block; width: 100%; height: auto; background: var(--paper); border: 1.5px solid var(--ink); padding: 6px; }
.kh-doc figcaption { font-size: 13px; line-height: 1.65; color: var(--ink-2); }

/* 翻转卡：没有脚本时两面上下并排；有脚本时是一张会翻面的卡 */
.kh-card { position: relative; }
.kh-card__f { background: var(--paper); border: 2px solid var(--ink); }
.kh-card__f + .kh-card__f { margin-top: 16px; }
.kh-card__f > img { display: block; width: 100%; height: auto; }
.kh-card__f > svg { display: block; width: 100%; height: auto; }
.kh-card__cap { margin: 0; padding: 6px 10px 8px; border-top: 1px solid var(--rule); font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.kh-js .kh-card { width: min(100%, calc(var(--ch, 60vh) * var(--ar))); aspect-ratio: var(--ar); margin: 0 auto; perspective: 2000px; }
.kh-js .kh-card__in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .95s cubic-bezier(.5, .05, .2, 1); }
.kh-js .kh-card__f { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.kh-js .kh-card__f--b { transform: rotateY(180deg); }
.kh-js.kh-flip .kh-card__in { transform: rotateY(180deg); }
.kh-js .kh-card__f > img { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.kh-js .kh-card__f > svg { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; }
.kh-js .kh-card--tb { --ch: 64vh; }

/* 亚里士多德：四色碎片 */
.kh-frag text { font: 700 27px/1 var(--body); }
.kh-frag .kh-frag__h { font: 900 34px/1 var(--body); fill: var(--ink); }
.kh-frag .kh-frag__s { font: 500 17px/1 var(--body); fill: var(--ink-2); }
.kh-fr { transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))) rotate(var(--r)); opacity: .15;
  transition: transform .5s ease, opacity .3s; }
.kh-flip .kh-fr, .c-kuhn:not(.kh-js) .kh-fr { transform: translate(var(--x), var(--y)); opacity: 1;
  transition: transform 1.1s cubic-bezier(.2, .9, .25, 1) calc(var(--dl) + .55s), opacity .5s ease calc(var(--dl) + .55s); }

/* 哥白尼：行星图 */
.kh-orr { position: relative; background: var(--paper); border: 2px solid var(--ink); }
.c-kuhn:not(.kh-js) .kh-orr { display: none; }
.kh-orr svg { display: block; width: 100%; height: auto; max-height: 62vh; margin: 0 auto; }
.kh-orr__rings circle { fill: none; stroke: var(--rule); stroke-width: 1.2; opacity: 0; transition: opacity .8s; }
.kh-flip .kh-orr__rings circle { opacity: 1; }
.kh-orr__tr polyline { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; opacity: .38; }
.kh-orr__tr polyline.is-m { opacity: .9; stroke-width: 2; }
.kh-orr__tr polyline.is-s { opacity: .6; stroke-dasharray: 2 5; stroke-width: 2; }
.kh-orr__tr polyline.is-e { stroke: var(--acc-v); opacity: .9; stroke-width: 1.8; }
.kh-orr__pl circle { fill: var(--ink); }
.kh-orr__pl circle.is-s { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.kh-orr__pl circle.is-e { fill: var(--acc-v); }
.kh-orr__pl text { font: 700 15px/1 var(--body); fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 5px; }
.kh-orr__lab { font: 700 15px/1 var(--body); fill: var(--acc); }

/* 范式：拼图与循环 */
.kh-pz .kh-pc__o { fill: none; stroke: rgba(18, 18, 18, .55); stroke-width: 1; }
.kh-pz .kh-pc { transition: opacity .45s ease, transform .55s cubic-bezier(.2, .9, .3, 1); transition-delay: calc(var(--k) * 65ms); }
.kh-js .kh-pz:not(.is-play) .kh-pc { opacity: 0; transform: translate(var(--jx), var(--jy)); }
.kh-pz__hole { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; }
.kh-hatch { stroke: var(--acc-v); }
.kh-pz__oddp { stroke: var(--acc); }
.kh-pz__odd { animation: kh-wob 3.4s ease-in-out infinite; transform-box: fill-box; }
@keyframes kh-wob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.kh-pz__t { font: 900 24px/1 var(--body); fill: var(--acc); }
.kh-pz__t2 { font: 500 16px/1 var(--body); fill: var(--ink-2); }
.kh-cy__a { fill: none; stroke: var(--ink); stroke-width: 3; }
.kh-cy__n rect { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.kh-cy__n text { font: 900 21px/1 var(--body); fill: var(--ink); }
.kh-cy__n:nth-of-type(4) rect { fill: var(--acc-v); stroke: var(--acc-v); }
.kh-cy__c rect { fill: var(--ink); }
.kh-cy__c text { font: 900 26px/1 var(--body); fill: var(--paper); }
.kh-cy__c .kh-cy__s { font: 500 15px/1 var(--body); }
.kh-cy__loss { font: 900 15px/1 var(--body); fill: var(--acc); }
.kh-cy__loss2 { font: 500 14px/1 var(--body); fill: var(--ink-2); }

/* 世界：翻牌标签与词表 */
.kh-lv { position: relative; background: var(--paper); border: 2px solid var(--ink); padding: 3%; }
.kh-lv img { display: block; width: 100%; height: auto; max-height: 58vh; object-fit: contain; }
.kh-lv__ov { position: absolute; left: 3%; top: 3%; width: 94%; height: 94%; }
.kh-lv__ov path { fill: none; stroke: var(--acc-v); stroke-width: 4; }
.kh-lv__ov circle { fill: var(--acc-v); }
.kh-flap { position: absolute; right: 4%; top: 6%; margin: 0; display: grid; perspective: 600px; }
.kh-flap span { grid-area: 1 / 1; padding: 10px 16px; background: var(--ink); color: #fff; font: 900 clamp(20px, 2.2vw, 30px)/1.15 var(--body); letter-spacing: .04em;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .08), 0 6px 0 var(--acc-v); text-align: center; backface-visibility: hidden;
  transform-origin: 50% 50%; transition: transform .55s cubic-bezier(.5, 0, .3, 1.4), opacity .2s; }
.kh-flap__b { transform: rotateX(-90deg); opacity: 0; }
.kh-flip .kh-flap__a { transform: rotateX(90deg); opacity: 0; }
.kh-flip .kh-flap__b { transform: none; opacity: 1; transition-delay: .25s; }
.kh-lex { width: 100%; margin: 18px 0 0; border-collapse: collapse; font-size: 15px; }
.kh-lex caption { text-align: left; padding-bottom: 6px; font-weight: 700; font-size: 13px; letter-spacing: .1em; }
.kh-lex th { text-align: left; padding: 0 10px 6px 0; border-bottom: 3px solid var(--ink); }
.kh-lex th i { font-style: normal; display: inline-block; padding: 0 8px; font-size: 12.5px; color: #fff; background: var(--duck); }
.kh-lex th + th i { background: #b23b0a; }
.kh-lex td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--rule); font-weight: 700; vertical-align: top; line-height: 1.45; transition: opacity .4s, color .4s; }
.kh-lex td small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.kh-js .kh-lex td:nth-child(2) { opacity: .4; }
.kh-js.kh-flip .kh-lex td:nth-child(1) { opacity: .4; }
.kh-js.kh-flip .kh-lex td:nth-child(2) { opacity: 1; color: var(--ink); }
.kh-lex__n { margin: 10px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }

/* 尺度：正方形与对角线 */
.kh-ms { background: var(--paper); border: 2px solid var(--ink); padding: 16px 18px 18px; }
.kh-ms__term { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 6px; }
.kh-ms__term span[lang] { font: 600 20px/1.2 var(--lat); color: var(--ink-3); }
.kh-ms__term b { font: 900 clamp(34px, 3.6vw, 48px)/1.1 var(--body); color: var(--acc); }
.c-kuhn:not(.kh-js) .kh-ms__term .kh-b { display: inline; }
.c-kuhn:not(.kh-js) .kh-ms__term .kh-b::before { content: " · "; color: var(--ink-3); }
.kh-ms svg { display: block; width: 100%; height: auto; max-height: 46vh; }
.kh-ms__sq { fill: none; stroke: var(--ink); stroke-width: 3; }
.kh-ms__dg { stroke: var(--ink); stroke-width: 3; }
.kh-ms__tk line { stroke: var(--ink); stroke-width: 2; }
.kh-ms__tk line.is-d { stroke: var(--acc); }
.kh-ms__rem { stroke: var(--acc-v); stroke-width: 9; stroke-linecap: butt; }
.kh-ms__l { font: 700 18px/1 var(--body); fill: var(--ink-2); }
.kh-ms__ctl { display: grid; gap: 6px; margin-top: 4px; }
.kh-ms__ctl label { font-size: 14.5px; font-weight: 500; }
.kh-ms__ctl output { display: inline-block; min-width: 1.6em; padding: 0 6px; font: 800 18px/1.3 var(--lat); text-align: center; color: #fff; background: var(--ink); }
.kh-ms input[type="range"] { width: 100%; height: 40px; margin: 0; accent-color: var(--acc); cursor: pointer; background: transparent; }
.kh-ms__out { margin: 6px 0 0; min-height: 3.4em; font-size: 15px; font-weight: 700; line-height: 1.7; }
.kh-ms__n { margin: 8px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.c-kuhn:not(.kh-js) .kh-ms__ctl { display: none; }

/* 教科书：一条被拉直的传统 */
.kh-tr text { font-family: var(--body); }
.kh-tr__k { font: 700 14px/1 var(--body); letter-spacing: .12em; fill: var(--ink-3); }
.kh-tr__h { font: 900 34px/1 var(--body); fill: var(--ink); }
.kh-tr__s { font: 500 17px/1 var(--body); fill: var(--acc); }
.kh-tr__line { stroke: var(--ink); stroke-width: 12; }
.kh-tr__arr { fill: var(--ink); }
.kh-tr__patch { fill: var(--acc-v); }
.kh-tr__p { font: 700 16px/1 var(--body); fill: var(--acc); }
.kh-tr circle { fill: var(--paper); stroke: var(--ink); stroke-width: 4; }
.kh-tr circle + text { font: 500 15px/1 var(--body); fill: var(--ink-2); }
.kh-tr__now { font: 900 18px/1 var(--body); fill: var(--ink); }
.kh-tr__ghost path { fill: none; stroke: var(--ink-3); stroke-width: 3; stroke-dasharray: 6 5; opacity: .55; }
.kh-tr__ghost text { font: 500 15px/1 var(--body); fill: var(--ink-3); }
.kh-tr__cut { stroke: var(--ink-3); stroke-width: 6; stroke-dasharray: 4 6; }
.kh-tr__c { font: 700 15px/1 var(--body); fill: var(--ink-2); }

/* 哲学：巨石与物种树 */
.kh-tree { display: block; width: 100%; height: auto; max-height: 60vh; background: var(--paper); border: 2px solid var(--ink); }
.kh-mono { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .8s cubic-bezier(.6, 0, .3, 1) .1s, opacity .6s ease .3s; }
.kh-mono rect { fill: var(--ink); }
.kh-mono .kh-mono__b { fill: var(--acc-v); }
.kh-mono text { font: 900 46px/1 var(--body); fill: var(--paper); }
.kh-mono .kh-mono__l { font: 700 17px/1 var(--body); fill: var(--acc); }
.kh-flip .kh-mono { transform: scaleY(.02); opacity: 0; transition: transform .7s cubic-bezier(.6, 0, .3, 1), opacity .5s ease .3s; }
.kh-tree__br path { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0;
  transition: stroke-dashoffset .5s ease, opacity 0s linear .5s; }
.kh-flip .kh-tree__br path { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset .7s ease calc(.55s + var(--lv) * .42s), opacity 0s linear calc(.55s + var(--lv) * .42s); }
.kh-tree__lab { opacity: 0; transition: opacity .3s; }
.kh-flip .kh-tree__lab { opacity: 1; transition: opacity .6s ease 2.1s; }
.kh-tree__lab text { font: 900 19px/1 var(--body); fill: var(--ink); }
.kh-fo circle { fill: var(--acc-v); }
.kh-fo path { fill: none; stroke: var(--paper); stroke-width: 1.8; }
.kh-tree__lab .kh-fo__t { font: 700 15px/1 var(--body); fill: var(--acc); }
.kh-tree__lab .kh-fo__n { font: 700 16px/1 var(--body); fill: var(--ink-2); }
.c-kuhn:not(.kh-js) .kh-mono { opacity: .12; }
.c-kuhn:not(.kh-js) .kh-tree__br path { stroke-dashoffset: 0; opacity: 1; }
.c-kuhn:not(.kh-js) .kh-tree__lab { opacity: 1; }

/* ---------- 结尾 ---------- */
.c-kuhn .c3end { padding: 30px clamp(16px, 4.5vw, 64px) 80px; }
@media (min-width: 861px) { .c-kuhn .c3hero, .c-kuhn .c3q, .c-kuhn .c3end { padding-right: clamp(64px, 7vw, 100px); } }
.kh-end { max-width: 1320px; margin: 0 auto; border-top: 8px solid var(--ink); padding-top: 10px; }
.kh-end__k { margin: 0 0 18px; font: 700 13px/1 var(--body); letter-spacing: .14em; color: var(--acc); }
.c-kuhn .c3end h2 { font: 900 clamp(34px, 4.4vw, 60px)/1.1 var(--head); letter-spacing: -.01em; margin: 0 0 22px; }
.c-kuhn .c3end h3 { font-size: 16px; font-weight: 900; letter-spacing: .1em; border-top: 2px solid var(--ink); padding-top: 10px; }
.c-kuhn .c3-lin { gap: 0; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); border-top: 2px solid var(--ink); }
.c-kuhn .c3-lin { border-left: 1px solid var(--rule); }
.c-kuhn .c3-lin li { border: 0; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); border-radius: 0; background: transparent; padding: 12px 14px 14px; }
.c-kuhn .c3-lin li b { font-size: 16px; font-weight: 900; }
.c-kuhn .c3-lin .rel { border-radius: 0; white-space: nowrap; }
.c-kuhn .c3-lin li > a:hover b { color: var(--acc); }

/* ---------- 窄屏 ---------- */
@media (max-width: 1180px) {
  .kh-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "id fig" "toc fig" "books feats" "facts links"; }
  .kh-toc { align-self: start; }
}
@media (max-width: 960px) {
  .kh-q, .c-kuhn .c3q:nth-of-type(odd) .kh-q { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "h" "art" "txt"; grid-template-rows: none; }
  .kh-q__art { position: static; margin: 4px 0 24px; }
  .kh-js .kh-card { --ch: 52vh; }
}
@media (max-width: 760px) {
  .kh-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "fig" "toc" "books" "feats" "facts" "links"; }
  .kh-name { font-size: 104px; }
  .kh-en { font-size: 20px; } .kh-en b { font-size: 24px; }
  .kh-q__src { display: none; }
  .kh-q__bar { grid-template-columns: auto auto; justify-content: space-between; }
  .c-kuhn .c3q__when b { font-size: 76px; }
  .c-kuhn .c3q__q { font-size: 28px; }
  .kh-doc { grid-template-columns: 110px minmax(0, 1fr); }
  .kh-ov__t { font-size: 58px; } .kh-ov__dir { font-size: 38px; }
  .kh-float { left: auto; right: 98px; transform: none; }
  .kh-float.is-off { transform: translateY(-60px); }
  .kh-float .kh-fb__t { display: none; }
  .kh-float .kh-fb { padding: 4px; border-width: 0; background: transparent; }
  .c-kuhn .c3-lin { grid-template-columns: minmax(0, 1fr); }
  .c-kuhn .c3-lin li { border-right: 0; }
}
/* 手机上 SVG 会缩小一半左右，里面的字要相应放大 */
@media (max-width: 600px) {
  .kh-frag text { font-size: 34px; } .kh-frag .kh-frag__h { font-size: 44px; } .kh-frag .kh-frag__s { font-size: 20px; }
  .kh-orr__pl text, .kh-orr__lab { font-size: 23px; }
  .kh-pz__t { font-size: 32px; } .kh-pz__t2 { font-size: 22px; }
  .kh-cy__n text { font-size: 26px; } .kh-cy__c text { font-size: 30px; } .kh-cy__c .kh-cy__s { font-size: 19px; }
  .kh-cy__loss { font-size: 20px; } .kh-cy__loss2 { font-size: 19px; }
  .kh-tr__h { font-size: 40px; } .kh-tr__s { font-size: 22px; } .kh-tr__k { font-size: 20px; } .kh-tr circle + text, .kh-tr__p, .kh-tr__c { font-size: 22px; }
  .kh-tr__now { font-size: 24px; } .kh-tr__ghost text { font-size: 20px; }
  .kh-tree__lab text { font-size: 26px; } .kh-mono .kh-mono__l { font-size: 26px; } .kh-tree__lab .kh-fo__t, .kh-tree__lab .kh-fo__n { font-size: 22px; }
  .kh-ms__l { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .kh-pz__odd { animation: none; }
}