/* 科南特 · 实验台上的案例史：深色皂石实验台，台上是哈佛深红封皮的案例小册子与一张张米色卡片。
   文字都排在纸上（--ink 系列）；直接落在台面上的字用 --on 系列。 */
.c-conant {
  --bg: #1c2120; --paper: #fbf6ea; --ink: #1d1a16; --ink-2: #4a4237; --ink-3: #6b6052; --rule: rgba(29, 26, 22, .18);
  --acc: #8c1b26; --acc-ink: #fbf6ea; --crim: #8c1b26; --crim-d: #5c0f18; --manila: #e6d4a5;
  --on: #efe6d2; --on-2: #c9bfae; --on-3: #a99f8f; --rose: #e59aa0;
  --head: "Noto Serif SC", "Songti SC", serif; --body: "Noto Serif SC", "Songti SC", serif;
  --type: "Courier Prime", "Noto Serif SC", ui-monospace, monospace; --lat: "Crimson Pro", "Noto Serif SC", serif;
  --bar-bg: rgba(20, 24, 23, .95); --bar-ink: #efe6d2; --chip-bg: #fbf6ea; --chip-ring: #fbf6ea;
  background-color: var(--bg);
  /* 皂石台面：几块不均匀的灰绿，加一层极细的划痕 */
  background-image: radial-gradient(ellipse 60% 40% at 18% 12%, rgba(130, 150, 140, .07), transparent 70%),
    radial-gradient(ellipse 50% 35% at 82% 58%, rgba(130, 150, 140, .06), transparent 70%),
    radial-gradient(ellipse 40% 30% at 35% 88%, rgba(0, 0, 0, .18), transparent 70%),
    repeating-linear-gradient(118deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 9px);
}
.c-conant .dlg { --dlg-bg: #efe8d8; --dlg-paper: #fffcf4; --dlg-me: #8c1b26; --dlg-me-ink: #fbf6ea; --dlg-acc: #8c1b26; }
.c-conant ::selection { background: rgba(140, 27, 38, .22); }
.c-conant .cn-b { display: none; }
.c-conant [aria-pressed="true"] .cn-a { display: none; }
.c-conant [aria-pressed="true"] .cn-b { display: inline; }

/* 页头与右侧索引签 */
.c-conant .c3bar { border-bottom: 3px solid var(--crim); }
.c-conant .c3bar__t a { font-weight: 900; }
.c-conant .c3bar__prog { background: var(--rose); height: 3px; bottom: -3px; }
.c-conant .c3toc { right: 0; }
.c-conant .c3toc ol { gap: 5px; }
.c-conant .c3toc a { flex-direction: row-reverse; justify-content: flex-start; gap: 0; color: var(--ink); }
.c-conant .c3toc a::after { display: none; }
.c-conant .c3toc a b { display: grid; place-items: center; width: 34px; height: 30px; border-radius: 6px 0 0 6px; background: var(--manila);
  font: 700 13px/1 var(--type); box-shadow: -3px 3px 8px rgba(0, 0, 0, .4); transition: width .25s, background .25s, color .25s; }
.c-conant .c3toc a span { height: 30px; line-height: 30px; padding: 0; background: var(--paper); font: 600 13px/30px var(--body); box-shadow: -3px 3px 8px rgba(0, 0, 0, .3); }
.c-conant .c3toc a:hover span, .c-conant .c3toc a:focus-visible span { padding: 0 12px; }
.c-conant .c3toc a[aria-current="true"] b { width: 44px; background: var(--crim); color: var(--paper); }

/* 卡片、按钮、小标签 */
.c-conant .mk { font: 700 12.5px/1.4 var(--type); letter-spacing: .06em; color: var(--crim); }
.cn-card { position: relative; background: var(--paper); color: var(--ink); padding: 14px 18px 16px; border-top: 5px solid var(--crim);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 18px 34px -16px rgba(0, 0, 0, .75); }
.c-conant .c3-btn { border-radius: 2px; font: 600 14px/1.3 var(--body); padding: 10px 16px; min-height: 44px; }
.c-conant .c3-btn--go { background: var(--crim); border-color: var(--crim); color: var(--paper); }
.c-conant .c3-btn--deep { background: transparent; border-color: var(--on-2); color: var(--on); }
.c-conant .c3-btn:hover { filter: brightness(1.12); }
.cn-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 2px solid var(--crim); border-radius: 2px;
  background: var(--crim); color: var(--paper); font: 600 14.5px/1.3 var(--body); cursor: pointer; }
.cn-btn[aria-pressed="true"] { background: transparent; color: var(--crim); }
.cn-btn:hover { box-shadow: 0 3px 0 var(--crim-d); }
.c-conant:not(.cn-js) .cn-btn { display: none; }

/* ---------- 首屏 ---------- */
.c-conant .c3hero { padding: calc(var(--bar) + 28px) clamp(16px, 4vw, 56px) 48px; color: var(--on); }
.cn-hero { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 30px 30px; align-items: start;
  grid-template-areas: "plate plate plate plate plate plate plate id id id id id"
                       "toc toc toc toc toc toc books books books books books books"
                       "feats feats feats feats facts facts facts facts links links links links"; }
.cn-plate { grid-area: plate; margin: 0; }
.cn-id { grid-area: id; min-width: 0; }
.cn-toc { grid-area: toc; } .cn-books { grid-area: books; } .cn-feats { grid-area: feats; } .cn-facts { grid-area: facts; } .cn-links { grid-area: links; }
.cn-toc, .cn-books, .cn-feats, .cn-facts, .cn-links { min-width: 0; }
.cn-plate__m { padding: 14px; background: #efe5cf; box-shadow: 0 2px 0 rgba(0, 0, 0, .3), 0 30px 60px -24px rgba(0, 0, 0, .9); transform: rotate(-.8deg); }
.cn-plate__m img { display: block; width: 100%; height: auto; }
.cn-plate figcaption { margin: 18px 6px 0; font: 400 14px/1.75 var(--body); color: var(--on-2); }
.cn-k { display: inline-flex; margin: 0 0 12px; font: 700 13px/1 var(--type); letter-spacing: .08em; }
.cn-k span { padding: 6px 10px; background: var(--manila); color: var(--ink); }
.cn-k span + span { background: var(--crim); color: var(--paper); }
.cn-name { margin: 0; font: 900 clamp(72px, 7.6vw, 112px)/1 var(--head); letter-spacing: .04em; color: var(--paper); text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.cn-en { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 8px 0 14px; font: italic 400 24px/1.3 var(--lat); color: var(--on); }
.cn-en b { font: 600 20px/1 var(--type); letter-spacing: .02em; color: var(--rose); font-style: normal; }
.cn-who { margin: 0 0 4px; font-size: 19px; font-weight: 600; line-height: 1.55; color: var(--on); }
.cn-now { margin: 0 0 16px; font-size: 14.5px; color: var(--on-3); }
.cn-rel { margin: 0 0 16px; }
.cn-rel p:last-child { margin: 0; font-size: 14.5px; line-height: 1.85; }
.cn-go { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cn-go .c3-btn { margin: 0; }
.c-conant .c3-qlist { counter-reset: none; }
.c-conant .c3-qlist li a { display: grid; grid-template-columns: 4.6em 3.4em minmax(0, 1fr); align-items: baseline; gap: 6px; padding: 7px 0; border-bottom: 1px dashed var(--rule);
  text-decoration: none; font-size: 15px; font-weight: 600; line-height: 1.5; }
.c-conant .c3-qlist li { counter-increment: cnq; }
.c-conant .c3-qlist li a::before { content: "案例 " counter(cnq); font: 700 13px/1.5 var(--type); color: var(--crim); }
.c-conant .c3-qlist li a b { font: 600 15px/1.5 var(--lat); color: var(--ink-2); }
.c-conant .c3-qlist li a:hover span { text-decoration: underline; text-decoration-color: var(--crim); text-underline-offset: 4px; }
.c-conant .c3-qlist { counter-reset: cnq; }
.c-conant .c3-books li { padding: 6px 0; border-bottom: 1px dashed var(--rule); font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.c-conant .c3-books a, .c-conant .c3-links a { color: var(--ink); text-decoration-color: var(--crim); text-underline-offset: 3px; }
.c-conant .c3-books small { font-weight: 400; font-size: 12.5px; color: var(--ink-3); }
.c-conant .c3-feats { margin: 0; padding: 0; list-style: none; counter-reset: cf; }
.c-conant .c3-feats li { counter-increment: cf; position: relative; padding: 5px 0 5px 2em; border-bottom: 1px dashed var(--rule); font-size: 14.5px; line-height: 1.6; }
.c-conant .c3-feats li::before { content: counter(cf) "."; position: absolute; left: 0; font: 700 14px/1.6 var(--type); color: var(--crim); }
.cn-facts p:last-child { margin: 0; font-size: 14.5px; line-height: 1.85; color: var(--ink-2); }
.c-conant .c3-links li { font-size: 14px; border-bottom-color: var(--rule); }

/* ---------- 每一问：一册摊开的案例小册子 ---------- */
.c-conant .c3q { display: block; padding: 34px clamp(16px, 4vw, 56px) 76px; }
.cn-spread { position: relative; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 76px;
  grid-template-areas: "rh rh" "art h" "art txt"; grid-template-rows: auto auto 1fr; align-items: start;
  padding: 22px 40px 44px; color: var(--ink); border-radius: 2px;
  background: linear-gradient(90deg, #efe6d0 0, var(--paper) 3%, var(--paper) 46%, #ece2cb 49.4%, #d6c9ac 50%, #ece2cb 50.6%, var(--paper) 54%, var(--paper) 97%, #efe6d0 100%);
  box-shadow: 0 0 0 7px var(--crim), 0 0 0 9px var(--crim-d), 0 40px 70px -26px rgba(0, 0, 0, .95); }
.cn-rh { grid-area: rh; display: grid; grid-template-columns: 1fr 1fr; column-gap: 76px; margin: 0 0 22px; padding-bottom: 8px; border-bottom: 1px solid var(--rule);
  font: 700 12.5px/1.4 var(--type); letter-spacing: .06em; color: var(--crim); }
.cn-rh span + span { text-align: right; }
.cn-h { grid-area: h; min-width: 0; }
.cn-art { grid-area: art; min-width: 0; position: sticky; top: calc(var(--bar) + 22px); }
.cn-txt { grid-area: txt; min-width: 0; }
.cn-staple::before, .cn-staple::after { content: ""; position: absolute; left: calc(50% - 2px); width: 4px; height: 44px; border-radius: 2px;
  background: linear-gradient(90deg, #8d8f8f, #e3e3df 50%, #7c7e7e); box-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.cn-staple::before { top: 18%; } .cn-staple::after { bottom: 18%; }
.c-conant .c3q__when { gap: 4px 14px; flex-wrap: wrap; align-items: baseline; color: var(--ink-2); font-size: 14px; }
.c-conant .c3q__when b { font: 600 clamp(48px, 5vw, 66px)/.9 var(--lat); color: var(--crim); letter-spacing: -.01em; }
.c-conant .c3q__when span { font-family: var(--type); font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.c-conant .c3q__q { margin: 12px 0 18px; font: 900 clamp(28px, 3vw, 40px)/1.28 var(--head); letter-spacing: .01em; }
.c-conant .c3q__lede { font-size: 16.5px; line-height: 1.95; text-align: justify; }
.c-conant .c3-quote { margin: 22px 0; padding: 14px 18px 14px 22px; border-left: 0; background: #f4ead3; position: relative; }
.c-conant .c3-quote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--crim); }
.c-conant .c3-quote blockquote p { font-size: 18px; font-weight: 600; line-height: 1.75; }
.c-conant .c3-orig { font: italic 400 15.5px/1.55 var(--lat); color: var(--ink-2); }
.c-conant .c3-quote figcaption { font-size: 12.5px; color: var(--ink-3); }
.c-conant .c3-tags li { border-radius: 2px; border: 1px solid var(--ink-3); background: var(--manila); color: var(--ink); font: 600 12.5px/1.6 var(--type); }
.c-conant .c3-works li { padding: 5px 0; border-top: 1px dashed var(--rule); font-weight: 600; }
.c-conant .c3-works a { color: var(--ink); text-decoration-color: var(--crim); text-underline-offset: 3px; }
.c-conant .c3-works small { font-weight: 400; }
.c-conant .talk { border-radius: 3px; border: 1px solid var(--ink-3); background: #fffdf6; }
.c-conant .c3-deeplink { color: var(--crim); text-underline-offset: 4px; }
.c-conant .c3-ask { border-radius: 3px; border-color: var(--ink-3); }

/* 展品通用 */
.cn-ex { margin: 0; }
.cn-ex__k { margin: 0 0 10px; font: 700 12.5px/1.4 var(--type); letter-spacing: .06em; color: var(--crim); }
.cn-ex__c { margin: 12px 0 0; font-size: 13.5px; line-height: 1.75; color: var(--ink-2); }
.cn-ex svg { display: block; width: 100%; height: auto; font-family: var(--body); }
.cn-photo { margin: 0; }
.cn-photo img, .cn-ph__img img { display: block; width: 100%; height: auto; border: 1px solid rgba(29, 26, 22, .25); box-shadow: 0 3px 10px rgba(0, 0, 0, .14); }
.cn-photo figcaption, .cn-ph__img figcaption { margin-top: 8px; font-size: 13px; line-height: 1.65; color: var(--ink-3); }
.cn-note { position: relative; margin: 16px 0 0; padding: 12px 14px; background: #fffdf4; border: 1px solid rgba(29, 26, 22, .15); box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  font-size: 13.5px; line-height: 1.75; color: var(--ink-2); }
.cn-note::before { content: ""; position: absolute; top: -9px; left: 22px; width: 54px; height: 18px; background: rgba(230, 212, 165, .8); transform: rotate(-3deg); }

/* 红皮书：座位 */
.cn-rb svg text { font: 600 15px/1 var(--body); fill: var(--ink); }
.cn-rb svg .cn-rb__h { font: 700 13px/1 var(--type); fill: var(--ink-2); }
.cn-rb__s rect { fill: rgba(29, 26, 22, .1); stroke: rgba(29, 26, 22, .25); stroke-width: 1; transition: fill .35s, stroke .35s; }
.cn-rb__s rect.is-f { fill: var(--crim); stroke: var(--crim-d); }
.cn-rb__ctl { margin-top: 10px; }
.cn-rb__ctl label { display: flex; justify-content: space-between; gap: 8px; font: 700 13px/1.4 var(--type); color: var(--ink-2); }
.cn-rb__ctl label span:first-child { margin-right: auto; margin-left: 12px; }
.cn-rb input[type="range"], .cn-cit input[type="range"] { width: 100%; height: 40px; margin: 0; accent-color: var(--crim); cursor: pointer; background: transparent; }
.cn-rb__out { margin: 4px 0 0; min-height: 3.6em; font-size: 15px; font-weight: 600; line-height: 1.75; }
.c-conant:not(.cn-js) .cn-rb__ctl { display: none; }
.c-conant:not(.cn-js) .cn-rb__s rect { fill: var(--crim); }

/* 原子弹：位置图 */
.cn-ob rect { fill: #fffdf4; stroke: var(--ink-2); stroke-width: 1.5; transition: fill .4s, stroke .4s, stroke-width .4s; }
.cn-ob text { font: 700 16px/1 var(--body); fill: var(--ink); }
.cn-ob .cn-ob__s { font: 400 12.5px/1 var(--body); fill: var(--ink-2); }
.cn-ob.is-on rect { fill: #f6e0dc; stroke: var(--crim); stroke-width: 3; }
.cn-ob.is-past rect { fill: #f3ecdc; }
.cn-ob__l path { fill: none; stroke: var(--ink-2); stroke-width: 1.6; }
.cn-ob__l + g, .cn-bomb marker path { fill: var(--ink-2); }
.cn-ob__n { font: 400 12px/1 var(--type); fill: var(--ink-3); }
.cn-dot { transform: translate(var(--x), var(--y)); transition: transform .7s cubic-bezier(.4, .1, .2, 1); }
.cn-dot circle { fill: var(--crim); stroke: var(--paper); stroke-width: 3; }
.cn-dot text { font: 900 15px/1 var(--body); fill: var(--crim); paint-order: stroke; stroke: var(--paper); stroke-width: 5px; }
.cn-st { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cn-st__b { min-width: 44px; min-height: 40px; padding: 6px 10px; border: 1.5px solid var(--ink-2); border-radius: 2px; background: #fffdf4; color: var(--ink);
  font: 700 13.5px/1.2 var(--type); cursor: pointer; }
.cn-st__b[aria-pressed="true"] { background: var(--crim); border-color: var(--crim); color: var(--paper); }
.cn-st__out { margin: 10px 0 0; min-height: 5.4em; font-size: 15px; line-height: 1.75; }
.c-conant:not(.cn-js) .cn-st, .c-conant:not(.cn-js) .cn-st__out { display: none; }
.cn-st__list { margin: 12px 0 0; padding: 0 0 0 1.2em; font-size: 14.5px; line-height: 1.7; }
.cn-st__list li { margin: 0 0 6px; }
.cn-js .cn-st__list { display: none; }
.c-conant:not(.cn-js) .cn-stamp { display: none; }

/* 波义耳：把图版抽出来 */
.cn-pull__st { position: relative; aspect-ratio: 1 / 1.14; }
.cn-pull__st figure { position: absolute; margin: 0; top: 0; transform-origin: 50% 0; transition: transform .8s cubic-bezier(.3, .8, .2, 1), z-index 0s .4s, box-shadow .8s; }
.cn-pull__st img { display: block; width: 100%; height: auto; }
.cn-pull__t { left: 0; width: 56%; z-index: 2; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); transform: rotate(-1.2deg); }
.cn-pull__p { left: 38%; width: 58%; z-index: 1; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); transform: translate(6%, 4%) rotate(3deg); }
.cn-pull.is-out .cn-pull__p { z-index: 3; transform: translate(-32%, 1%) rotate(-.6deg) scale(1.1); box-shadow: 0 24px 40px -10px rgba(0, 0, 0, .5); }
.cn-pull.is-out .cn-pull__t { transform: translate(-3%, 2%) rotate(-3deg) scale(.96); }
.cn-pull .cn-btn { margin-top: 14px; }
.c-conant:not(.cn-js) .cn-pull__st { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.c-conant:not(.cn-js) .cn-pull__st figure { position: static; width: auto; transform: none; }

/* 燃素：三种现象 */
.cn-ph__img { margin: 18px 0 0; }
.cn-ph__lab { position: relative; overflow: hidden; padding: 14px 16px 16px; background: #fffdf4; border: 1px solid rgba(29, 26, 22, .18); }
.cn-ph__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cn-ph__tabs button { min-height: 40px; padding: 6px 12px; border: 1.5px solid var(--ink-2); border-radius: 2px; background: transparent; color: var(--ink);
  font: 600 14px/1.3 var(--body); cursor: pointer; }
.cn-ph__tabs button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cn-ph__tabs button.is-seen::after { content: " ✓"; color: var(--crim); }
.cn-ph__tabs button[aria-pressed="true"].is-seen::after { color: var(--rose); }
.cn-sc { display: none; }
.cn-sc.is-on { display: inline; }
.cn-ph svg text { font: 700 16px/1 var(--body); fill: var(--ink); }
.cn-fire { fill: #d9792f; opacity: .85; }
.cn-cru { fill: #e2d6bb; stroke: var(--ink-2); stroke-width: 3; }
.cn-coal circle { fill: #2b2724; }
.cn-ore path { fill: #8c8478; stroke: #4a4237; stroke-width: 2; transition: fill 1s ease, stroke 1s; }
.cn-sc--0.is-done .cn-ore path { fill: #d9dde0; stroke: #6c7378; }
.cn-ore__t .cn-b { display: none; } .cn-sc--0.is-done .cn-ore__t .cn-a { display: none; } .cn-sc--0.is-done .cn-ore__t .cn-b { display: inline; }
.cn-flow circle, .cn-air circle, .cn-ph__key circle { fill: var(--crim); }
.cn-flow circle { opacity: 0; }
.cn-sc--0.is-run .cn-flow circle { animation: cn-flow 1.4s ease-in-out var(--d) 3 both; }
@keyframes cn-flow { 0% { opacity: 0; transform: none; } 20% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
.cn-dome { fill: rgba(200, 220, 230, .18); stroke: var(--ink-2); stroke-width: 3; }
.cn-base { stroke: var(--ink-2); stroke-width: 5; }
.cn-candle { fill: #efe6d0; stroke: var(--ink-2); stroke-width: 2; }
.cn-flame { fill: #e08a2c; transform-box: fill-box; transform-origin: 50% 100%; }
.cn-air circle { opacity: 0; }
.cn-sc.is-run .cn-air circle { animation: cn-fill .5s ease var(--d) both; }
.cn-sc.is-done .cn-air circle { opacity: .9; }
@keyframes cn-fill { from { opacity: 0; transform: translateY(14px); } to { opacity: .9; transform: none; } }
.cn-sc--1.is-run .cn-flame { animation: cn-out 2.6s ease 0s both; }
.cn-sc--1.is-done .cn-flame { transform: scale(0); }
@keyframes cn-out { 0%, 55% { transform: scale(1); } 75% { transform: scale(.6, .35); } 100% { transform: scale(0); } }
.cn-mouse path { fill: #8a7f71; stroke: var(--ink-2); stroke-width: 2; }
.cn-mouse .cn-tail { fill: none; }
.cn-mouse .cn-eye { fill: var(--ink); }
.cn-ph__key text { font: 600 14px/1 var(--body) !important; }
.cn-ph__out { margin: 8px 0 0; min-height: 3.6em; font-size: 15px; font-weight: 600; line-height: 1.75; }
.cn-stamp { position: relative; display: block; width: max-content; max-width: 100%; margin: 2px 8px 10px auto; padding: 6px 12px; border: 3px double var(--crim); color: var(--crim);
  font: 900 18px/1.2 var(--body); letter-spacing: .08em; transform: rotate(-8deg) scale(1.35); opacity: 0; pointer-events: none;
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), opacity .2s; background: rgba(255, 253, 244, .85); }
.cn-ph__lab.is-all .cn-stamp { transform: rotate(-8deg) scale(1); opacity: .95; }
.c-conant:not(.cn-js) .cn-sc { display: inline; }
.c-conant:not(.cn-js) .cn-sc--1, .c-conant:not(.cn-js) .cn-sc--2, .c-conant:not(.cn-js) .cn-ph__tabs { display: none; }

/* 学问的城堡 */
.cn-wall rect, .cn-gate rect { fill: #d8ccb0; stroke: var(--ink-2); stroke-width: 2; }
.cn-gate rect { fill: #efe6d0; }
.cn-ground { stroke: var(--ink-2); stroke-width: 3; }
.cn-gate__t { font: 700 13px/1 var(--type); fill: var(--ink-2); }
.cn-flag line { stroke: var(--ink); stroke-width: 3; }
.cn-flag__a { fill: var(--crim); transition: opacity .4s; }
.cn-flag__b { fill: #2b2724; opacity: 0; transition: opacity .4s .3s; }
.cn-bub { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .6s cubic-bezier(.5, -.2, .6, 1) var(--d), opacity .5s ease var(--d); }
.cn-bub rect, .cn-bub path { fill: #fffdf4; stroke: var(--ink-2); stroke-width: 1.6; }
.cn-bub text { font: 700 14px/1 var(--body); fill: var(--crim); }
.cn-dog { opacity: 0; transform: translateY(-16px); transition: opacity .5s ease .5s, transform .5s ease .5s; }
.cn-dog rect { fill: #2b2724; }
.cn-dog text { font: 900 22px/1 var(--body); fill: var(--paper); letter-spacing: .3em; }
.cn-cit.is-cap .cn-bub { transform: translateY(150px) rotate(var(--r)) scale(.6); opacity: 0; }
.cn-cit.is-cap .cn-dog { opacity: 1; transform: none; }
.cn-cit.is-cap .cn-flag__a { opacity: 0; }
.cn-cit.is-cap .cn-flag__b { opacity: 1; }
.cn-cit .cn-btn { margin-top: 10px; }
.cn-cit__out { margin: 10px 0 0; min-height: 3.6em; font-size: 15px; font-weight: 600; line-height: 1.75; }

/* ---------- 结尾 ---------- */
.c-conant .c3end { padding: 34px clamp(16px, 4vw, 56px) 80px; }
.cn-end { max-width: 1240px; margin: 0 auto; padding: 22px 40px 40px; background: var(--paper); color: var(--ink); border-top: 6px solid var(--crim);
  box-shadow: 0 40px 70px -26px rgba(0, 0, 0, .95); }
.cn-end .cn-rh { display: grid; }
.c-conant .c3end h2 { font: 900 clamp(30px, 3.6vw, 46px)/1.2 var(--head); margin: 0 0 20px; }
.c-conant .c3end h3 { font: 700 14px/1.4 var(--type); letter-spacing: .08em; color: var(--crim); border-top: 1px solid var(--rule); padding-top: 14px; }
.c-conant .c3-lin li { border-radius: 2px; background: #fffdf4; border: 1px solid rgba(29, 26, 22, .16); border-top: 4px solid var(--manila); }
.c-conant .c3-lin li b { font-size: 16px; }
.c-conant .c3-lin .rel { white-space: nowrap; }
.c-conant .c3-lin li > a:hover b { color: var(--crim); }

/* ---------- 窄屏 ---------- */
@media (min-width: 861px) { .c-conant .c3hero, .c-conant .c3q, .c-conant .c3end { padding-right: clamp(60px, 6.5vw, 96px); } }
@media (max-width: 1180px) {
  .cn-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "plate id" "toc id" "books feats" "facts links"; }
}
@media (max-width: 960px) {
  .cn-spread { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rh" "h" "art" "txt"; grid-template-rows: none; padding: 18px 20px 28px; background: var(--paper); }
  .cn-rh { column-gap: 12px; }
  .cn-staple { display: none; }
  .cn-art { margin: 6px 0 22px; position: static; }
}
@media (max-width: 760px) {
  .cn-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "plate" "toc" "books" "feats" "facts" "links"; }
  .cn-name { font-size: 76px; }
  .cn-plate__m { padding: 8px; }
  .c-conant .c3q { padding-left: 14px; padding-right: 14px; }
  .cn-spread { box-shadow: 0 0 0 5px var(--crim), 0 0 0 6px var(--crim-d), 0 30px 50px -20px rgba(0, 0, 0, .9); }
  .c-conant .c3q__when b { font-size: 52px; }
  .c-conant .c3q__q { font-size: 27px; }
  .c-conant .c3q__lede { text-align: left; }
  .cn-end { padding: 18px 18px 28px; }
  .c-conant .c3-qlist li a { grid-template-columns: 4.6em minmax(0, 1fr); }
  .c-conant .c3-qlist li a b { display: none; }
  .cn-ob text { font-size: 18px; } .cn-ob .cn-ob__s { font-size: 14px; }
  .cn-rb svg text { font-size: 19px; }
  .cn-ph svg text { font-size: 20px; }
  .cn-gate__t { font-size: 20px; } .cn-bub text { font-size: 19px; } .cn-ob__n { font-size: 16px; } .cn-rb svg .cn-rb__h { font-size: 18px; }
  .c-conant .cn-ph__key text { font-size: 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cn-sc .cn-air circle, .cn-flow circle { animation: none !important; }
}