/* 许煜 · 道器：玄色的底子（他把山水读成“玄”的逻辑），木刻像拓片一样泛白；
   石青、石绿、赭石三种矿物色，一处悲剧的暗红。每一问题头的螺旋，第几问就绕几圈。 */
.c-yuk-hui {
  --bg: #16110f; --paper: #1e1714; --ink: #ece4d3; --ink-2: #c7bba6; --ink-3: #9d9180; --rule: rgba(236, 228, 211, .15);
  --acc: #8fbcd8; --acc-ink: #0d1a22; --jade: #93cdb4; --ochre: #c99158; --tragic: #d0574a; --silk: #e9dfca;
  --head: "Noto Serif SC", "Songti SC", serif; --body: "Noto Serif SC", "Songti SC", serif;
  --sans: "IBM Plex Sans", "Noto Sans SC", "PingFang SC", sans-serif; --greek: "GFS Didot", "Noto Serif", serif; --mono: "IBM Plex Mono", "Noto Sans SC", monospace;
  --bar-bg: rgba(22, 17, 15, .9); --bar-ink: #ece4d3; --chip-bg: rgba(236, 228, 211, .05); --chip-ring: #16110f;
  --page: 1200px; --gut: clamp(16px, 4.4vw, 64px);
  background-color: var(--bg); color: var(--ink);
}
.c-yuk-hui::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(110% 70% at 78% 0%, rgba(201, 145, 88, .08), transparent 60%), radial-gradient(90% 60% at 0% 100%, rgba(143, 188, 216, .06), transparent 60%), #16110f; }
.c-yuk-hui .dlg { --dlg-bg: #f1ebe0; --dlg-paper: #fbf8f2; --dlg-me: #1e1714; --dlg-me-ink: #ece4d3; --dlg-acc: #2f6a8c; }
.c-yuk-hui ::selection { background: rgba(143, 188, 216, .35); color: #fff; }
.c-yuk-hui a { text-decoration-color: rgba(143, 188, 216, .5); text-underline-offset: 3px; }
.c-yuk-hui a:hover { text-decoration-color: var(--acc); }
.c-yuk-hui .mk { font: 500 12px/1.4 var(--sans); letter-spacing: .14em; color: var(--ink-3); }

.c-yuk-hui .c3bar { border-bottom: 1px solid rgba(236, 228, 211, .1); }
.c-yuk-hui .c3bar__t a { font-family: var(--head); font-weight: 600; }
.c-yuk-hui .c3bar__prog { background: linear-gradient(90deg, var(--acc), var(--jade), var(--ochre)); }

/* 题头的螺旋 */
.yh-sp { flex: none; overflow: visible; }
.yh-sp path { fill: none; stroke: var(--jade); stroke-width: 1.3; stroke-linecap: round; }
.yh-sp circle { fill: var(--ochre); }

/* ---------- 首屏 ---------- */
.c-yuk-hui .c3hero { padding: calc(var(--bar) + 34px) var(--gut) 56px; }
.yh-hero { max-width: var(--page); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.yh-k { margin: 0; font: 500 13px/1.4 var(--sans); letter-spacing: .16em; color: var(--jade); }
.yh-hero__id h1 { margin: 4px 0 0 -.04em; font: 300 clamp(84px, 11vw, 164px)/1 var(--head); letter-spacing: .12em; color: var(--silk); }
.yh-en { margin: 14px 0 18px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; font: 300 26px/1.2 var(--sans); color: var(--ink); }
.yh-yr { font-size: 16px; color: var(--ink-3); letter-spacing: .08em; }
.yh-who { margin: 0 0 4px; font: 600 20px/1.6 var(--head); }
.yh-now { margin: 0 0 14px; font-size: 14.5px; color: var(--ink-2); }
.yh-works { margin: 0 0 24px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.yh-works .mk { margin: 0; color: var(--ochre); }
.yh-works ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 16px; }
.yh-works li { font-size: 15px; }
.yh-works small { margin-left: 4px; font: 400 12.5px/1 var(--sans); color: var(--ink-3); }
.yh-hero__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 26px; }
.yh-rel { padding: 2px 0 2px 16px; border-left: 2px solid var(--ochre); }
.yh-rel .mk { color: var(--ochre); }
.yh-rel p:last-child { margin: 0; font-size: 14.5px; line-height: 1.85; color: var(--ink); }
.yh-qs .mk { color: var(--jade); }
.c-yuk-hui .yh-qs .c3-qlist li a { display: grid; grid-template-columns: 3.1em minmax(0, 1fr); gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: 14.5px; line-height: 1.5; }
.c-yuk-hui .yh-qs .c3-qlist li:first-child a { border-top: 1px solid var(--rule); }
.c-yuk-hui .yh-qs .c3-qlist b { font: 500 13.5px/1.5 var(--sans); color: var(--acc); }
.c-yuk-hui .yh-qs .c3-qlist a:hover span, .c-yuk-hui .yh-qs .c3-qlist a:focus-visible span { color: #fff; text-decoration: underline; text-decoration-color: var(--acc); }
.yh-go { margin: 26px 0 0; }
.c-yuk-hui .c3-btn { border-radius: 0; font-family: var(--head); border-color: rgba(236, 228, 211, .55); }
.c-yuk-hui .c3-btn--go { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); font-weight: 600; }
.c-yuk-hui .c3-btn--deep { background: var(--silk); border-color: var(--silk); color: #16110f; font-weight: 600; }
.c-yuk-hui .c3-btn--wm { background: transparent; color: var(--ink); }

.yh-loom { margin: 0; }
.yh-loom__img { position: relative; }
.yh-loom__img img { display: block; width: 100%; height: auto; max-height: calc(100svh - var(--bar) - 150px); object-fit: contain; object-position: left top; }
.yh-op { position: absolute; left: 31%; right: 12%; top: 6.5%; height: 14%; margin: 0; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.yh-op__p { position: relative; display: grid; place-items: center; }
.yh-op__p b { font: 700 clamp(48px, 5.6vw, 86px)/1 var(--head); color: var(--ochre); opacity: .82; mix-blend-mode: screen; }
.yh-op__p i { position: absolute; font: 400 clamp(20px, 2.2vw, 34px)/1 var(--greek); font-style: normal; color: var(--acc); mix-blend-mode: screen; white-space: nowrap;
  transform: translate(7px, -5px); animation: yh-reg 7s ease-in-out infinite alternate; }
.yh-op__p:last-child i { animation-delay: -3.5s; }
@keyframes yh-reg { from { transform: translate(9px, -7px); } to { transform: translate(-3px, 3px); } }
.yh-loom figcaption, .yh-fig figcaption, .yh-scroll__cap { margin-top: 12px; font: 13px/1.75 var(--body); color: var(--ink-3); }

.yh-band { max-width: var(--page); margin: 56px auto 0; padding-top: 26px; border-top: 1px solid var(--rule); display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .9fr); gap: 36px; }
.yh-mk2 { margin-top: 20px !important; }
.yh-facts { margin: 0; font-size: 14.5px; line-height: 1.85; color: var(--ink-2); }
.c-yuk-hui .c3-feats { margin: 0; padding: 0; list-style: none; }
.c-yuk-hui .c3-feats li { position: relative; padding: 5px 0 5px 18px; font-size: 14px; line-height: 1.65; color: var(--ink); }
.c-yuk-hui .c3-feats li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 7px; height: 7px; border-radius: 50%; border: 1.3px solid var(--jade); }
.c-yuk-hui .c3-books li, .c-yuk-hui .c3-links li { border-bottom-color: var(--rule); border-bottom-style: solid; }
.c-yuk-hui .c3-books li { padding: 6px 0 7px; font-size: 15px; }
.c-yuk-hui .c3-books small, .c-yuk-hui .c3-links small, .c-yuk-hui .c3-works small { color: var(--ink-3); }
.c-yuk-hui .c3-links small { font-family: var(--sans); }

/* ---------- 每一问 ---------- */
.c-yuk-hui .c3q { display: block; padding: calc(var(--bar) + 56px) var(--gut) 76px; }
.yh-q { max-width: var(--page); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); grid-template-rows: auto 1fr;
  grid-template-areas: "art hd" "art body"; column-gap: clamp(32px, 5vw, 80px); align-items: start; }
.c-yuk-hui .c3q--2 .yh-q, .c-yuk-hui .c3q--4 .yh-q { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); grid-template-areas: "hd art" "body art"; }
.yh-hd { grid-area: hd; }
.yh-art { grid-area: art; padding-top: 8px; }
.yh-body { grid-area: body; }
.yh-q--wide { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hd" "art" "body"; }
.yh-q--wide .yh-hd, .yh-q--wide .yh-body { max-width: 760px; }
.yh-when { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 14px; color: var(--ink-3); }
.yh-when b { font: 300 40px/1 var(--sans); color: var(--acc); letter-spacing: .02em; }
.yh-when span { font-family: var(--body); }
.c-yuk-hui .c3q__q { margin: 8px 0 22px; font: 600 clamp(30px, 3.4vw, 46px)/1.25 var(--head); color: var(--silk); letter-spacing: .02em; text-wrap: balance; }
.c-yuk-hui .c3q__lede { margin: 0 0 22px; font-size: 16.5px; line-height: 1.95; text-align: justify; color: var(--ink); }
.c-yuk-hui .c3-quote { margin: 26px 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--ochre); }
.c-yuk-hui .c3-quote blockquote p { font: 600 18px/1.8 var(--head); color: var(--silk); }
.c-yuk-hui .c3-orig { font: italic 300 14.5px/1.6 var(--sans); color: var(--ink-2); }
.c-yuk-hui .c3-quote figcaption { color: var(--ink-3); }
.c-yuk-hui .c3-tags li { border-radius: 0; border-color: rgba(147, 205, 180, .35); color: var(--ink-2); font-size: 13px; }
.c-yuk-hui .c3-works .mk, .c-yuk-hui .c3-talk .mk { color: var(--ink-3); }
.c-yuk-hui .talk { border-radius: 0; background: rgba(236, 228, 211, .04); border-color: var(--rule); }
.c-yuk-hui .talk:hover { box-shadow: 0 0 0 1px var(--acc); }
.c-yuk-hui .talk__n, .c-yuk-hui .talk__av b { color: var(--ink-3); }
.c-yuk-hui .c3-deeplink { color: var(--acc); }
.c-yuk-hui .c3-ask { border-style: solid; border-color: var(--rule); border-radius: 0; }
.c-yuk-hui .c3-ask small { color: var(--ink-3); }

/* 配图 */
.yh-fig { margin: 0; }
.yh-fig img { display: block; width: 100%; height: auto; }
.yh-fig--obj img { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(236, 228, 211, .08); }
.yh-fig--wood img { max-height: 82vh; object-fit: contain; object-position: left top; }
.yh-fig--ding { max-width: 420px; margin: 0 auto 6px; }
.c-yuk-hui .c3q--7 .yh-fig--obj { max-width: 400px; }

/* 斯蒂格勒的胶片：老师的普罗米修斯 */
.yh-cosmo { position: relative; max-width: 470px; padding-right: 70px; }
.yh-cosmo__img { position: relative; }
.yh-film { position: absolute; right: -88px; bottom: 36px; width: 168px; display: block; padding: 18px 20px 14px; text-decoration: none; transform: rotate(3deg);
  background-color: #4b2d12; background-image: radial-gradient(circle, #16110f 2.4px, transparent 2.9px), radial-gradient(circle, #16110f 2.4px, transparent 2.9px);
  background-size: 9px 12px, 9px 12px; background-position: 4px 4px, calc(100% - 4px) 4px; background-repeat: repeat-y;
  box-shadow: 0 20px 34px -18px rgba(0, 0, 0, .9); }
.yh-film__f { display: block; }
.yh-film__f img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 2px #0f0d0b; }
.yh-film__t { display: block; margin-top: 9px; font: 12px/1.55 var(--body); color: #f3d39c; }
.yh-film:hover .yh-film__t, .yh-film:focus-visible .yh-film__t { text-decoration: underline; }

/* 机关的公共样式 */
.yh-mech { margin: 24px 0 8px; padding: 18px 18px 16px; background: rgba(236, 228, 211, .035); border: 1px solid var(--rule); }
.yh-mech__k { margin: 0 0 14px; font: 500 12.5px/1.4 var(--sans); letter-spacing: .12em; color: var(--jade); }
.yh-mech__out { margin: 12px 0 0; min-height: 3.4em; font-size: 14.5px; line-height: 1.8; color: var(--ink-2); }
.yh-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.yh-btn { min-height: 40px; padding: 8px 14px; border: 1px solid rgba(236, 228, 211, .45); border-radius: 0; background: transparent; color: var(--ink);
  font: 500 14px/1.2 var(--body); cursor: pointer; }
.yh-btn:hover { border-color: var(--ink); background: rgba(236, 228, 211, .06); }
.yh-btn[aria-pressed="true"] { background: var(--silk); border-color: var(--silk); color: #16110f; }
.yh-btn--acc { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); font-weight: 600; }
.yh-btn--acc:hover { background: #a9cde4; }
.yh-btn:disabled { opacity: .4; cursor: not-allowed; }
.c-yuk-hui :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* 数据长成物 */
.yh-meta__tree { position: relative; min-height: 236px; padding: 20px 16px 16px; background: rgba(0, 0, 0, .22); font: 15px/1.6 var(--mono); transition: box-shadow .5s; }
.yh-meta__tree[data-step="0"] .yh-meta__str { outline: 1px dashed rgba(236, 228, 211, .35); outline-offset: 5px; }
.yh-meta__s { margin: 0; display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; }
.yh-meta__str { color: var(--silk); }
.yh-meta__tag { color: var(--jade); opacity: 0; transition: opacity .4s; }
.yh-meta__a { list-style: none; margin: 10px 0 0 10px; padding: 0 0 0 16px; border-left: 1px solid rgba(147, 205, 180, .4); }
.yh-meta__a li { position: relative; display: none; padding: 3px 0; color: var(--ink); font-family: var(--body); font-size: 14px; }
.yh-meta__a li::before { content: ""; position: absolute; left: -16px; top: 50%; width: 12px; border-top: 1px solid rgba(147, 205, 180, .4); }
.yh-meta__a b { display: inline-block; min-width: 3.4em; margin-right: 8px; font: 500 12px/1.4 var(--mono); color: var(--jade); }
.yh-meta__ln { color: var(--acc); }
.yh-meta__ln::before { content: "→ "; color: var(--ink-3); }
.yh-meta__obj { position: absolute; right: 14px; bottom: 14px; margin: 0; width: 58px; height: 58px; font-size: 30px !important; display: grid; place-items: center; border: 1px solid var(--ochre); color: var(--ochre);
  font: 600 22px/1 var(--head); opacity: 0; transform: scale(.6); transition: opacity .5s, transform .5s; }
.yh-meta__tree[data-step="1"] .yh-meta__tag, .yh-meta__tree[data-step="2"] .yh-meta__tag, .yh-meta__tree[data-step="3"] .yh-meta__tag, .yh-meta__tree[data-step="4"] .yh-meta__tag { opacity: 1; }
.yh-meta__tree[data-step="2"] li[data-l="2"], .yh-meta__tree[data-step="3"] li[data-l="2"], .yh-meta__tree[data-step="4"] li[data-l="2"],
.yh-meta__tree[data-step="3"] li[data-l="3"], .yh-meta__tree[data-step="4"] li[data-l="3"] { display: block; animation: yh-in .45s ease-out both; }
.yh-meta__tree[data-step="4"] { box-shadow: inset 0 0 0 1px var(--ochre); }
.yh-meta__tree[data-step="4"] .yh-meta__obj { opacity: 1; transform: none; }
.yh-meta__tree[data-step="0"] .yh-meta__a, .yh-meta__tree[data-step="1"] .yh-meta__a { display: none; }
@keyframes yh-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.yh-meta__n { margin-left: auto; font: 500 13px/1 var(--mono); color: var(--ink-3); }

/* 器与道 */
.yh-qd__d { position: relative; display: grid; grid-template-rows: auto 120px auto; justify-items: center; padding: 6px 0 0; }
.yh-qd__dao, .yh-qd__qi { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.yh-qd__dao b, .yh-qd__qi b { font: 600 46px/1 var(--head); color: var(--silk); }
.yh-qd__dao small, .yh-qd__qi small { font-size: 12.5px; color: var(--ink-3); }
.yh-qd__line { position: relative; width: 2px; height: 100%; }
.yh-qd__up, .yh-qd__dn { position: absolute; left: 0; width: 2px; height: 50%; background: var(--jade); transition: transform .6s cubic-bezier(.3, 1.4, .5, 1), height .5s; }
.yh-qd__up { top: 0; transform-origin: 50% 0; } .yh-qd__dn { bottom: 0; transform-origin: 50% 100%; }
.yh-qd__knot { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid var(--jade); background: var(--bg); transition: opacity .4s, transform .4s; }
.yh-qd__lab { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: max-content; max-width: 13em; font: 13px/1.5 var(--body); color: var(--jade); }
.yh-qd__d[data-s="2"] .yh-qd__up { height: 34%; transform: rotate(-16deg); background: var(--tragic); }
.yh-qd__d[data-s="2"] .yh-qd__dn { height: 34%; transform: rotate(14deg); background: var(--tragic); }
.yh-qd__d[data-s="2"] .yh-qd__knot { opacity: 0; transform: scale(.3); }
.yh-qd__d[data-s="2"] .yh-qd__lab { color: var(--tragic); }

/* 一条跑道，还是分叉 */
.yh-run__svg { display: block; width: 100%; height: auto; font: 13px var(--body); overflow: visible; }
.yh-run__svg line, .yh-run__svg path { fill: none; stroke: var(--ink-2); stroke-width: 1.6; }
.yh-run__svg text { fill: var(--ink-2); }
.yh-run__end { fill: none; stroke: var(--tragic); stroke-width: 2; }
.yh-run__a { fill: var(--ochre); } .yh-run__b { fill: var(--acc); }
.yh-run__q { fill: var(--tragic) !important; font-size: 14px; }
.yh-run__one, .yh-run__many { transition: opacity .6s; }
.yh-run__many { opacity: 0; }
.yh-run__many path { stroke: var(--jade); stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 1.4s ease; }
.yh-run__many circle { fill: var(--jade); }
.yh-run[data-m="many"] .yh-run__one { opacity: 0; }
.yh-run[data-m="many"] .yh-run__many { opacity: 1; }
.yh-run[data-m="many"] .yh-run__many path { stroke-dashoffset: 0; }
.yh-run[data-m="many"] .yh-run__many path:nth-of-type(2) { transition-delay: .15s; }
.yh-run[data-m="many"] .yh-run__many path:nth-of-type(3) { transition-delay: .3s; }
.yh-run[data-m="many"] .yh-run__many path:nth-of-type(4) { transition-delay: .45s; }
.yh-anti { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.yh-anti p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--ink-2); }
.yh-anti b { display: block; margin-bottom: 2px; font: 600 13px/1.4 var(--sans); letter-spacing: .12em; color: var(--ochre); }

/* 循环与递归 */
.yh-rec__two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.yh-rec__p { margin: 0; padding: 8px; background: rgba(0, 0, 0, .25); }
.yh-rec__p svg { display: block; width: 100%; height: auto; overflow: visible; font: 12px var(--sans); }
.yh-rec__p figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 6px; font-size: 13px; }
.yh-rec__p figcaption b { font: 600 15px/1.3 var(--head); color: var(--silk); }
.yh-rec__p figcaption span { font: 400 12.5px/1.3 var(--sans); color: var(--ink-3); }
.yh-rec svg .ln { fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linecap: round; }
.yh-rec svg .sp { fill: none; stroke: var(--jade); stroke-width: 1.6; stroke-linecap: round; }
.yh-rec svg .nd { fill: var(--bg); stroke: var(--ink-2); stroke-width: 1.4; }
.yh-rec svg .nd--s { stroke: var(--jade); }
.yh-rec svg .tx { fill: var(--ink); font-size: 12px; text-anchor: middle; dominant-baseline: central; }
.yh-rec svg .tk { fill: var(--ochre); }
.yh-rec svg .hap { fill: var(--tragic); }
.yh-rec svg .hap--ok { fill: var(--ochre); }
.yh-rec svg .brk { stroke: var(--tragic); stroke-width: 2.4; stroke-linecap: round; }
.yh-rec__p--loop.is-broken { box-shadow: inset 0 0 0 1px rgba(208, 87, 74, .6); }

/* 山水手卷 */
.yh-scroll { position: relative; }
.yh-pair { margin: 0 0 12px; display: flex; align-items: baseline; gap: 12px; font: 600 26px/1 var(--head); }
.yh-pair__t { color: var(--tragic); }
.yh-pair i { font-style: normal; color: var(--ink-3); font-weight: 300; }
.yh-pair__s { color: var(--jade); }
.yh-scroll__v { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: rgba(236, 228, 211, .35) transparent; background: #0f0b0a;
  box-shadow: 0 30px 60px -36px #000, 0 0 0 1px rgba(236, 228, 211, .08); }
.yh-scroll__v img { display: block; width: 100%; min-width: 900px; height: auto; }
.yh-scroll__v:focus-visible { outline-offset: 4px; }
.yh-scroll__hint { display: none; margin: 8px 0 0; font: 12px/1.4 var(--sans); letter-spacing: .1em; color: var(--ink-3); text-align: center; }

/* ---------- 目录：右侧，当前一问是一个小螺旋 ---------- */
.c-yuk-hui .c3toc a { color: var(--ink-3); font-family: var(--sans); }
.c-yuk-hui .c3toc a span { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); max-width: none; width: max-content; padding: 3px 9px;
  font-family: var(--body); font-size: 13px; color: var(--ink); background: rgba(30, 23, 20, .96); box-shadow: 0 0 0 1px var(--rule); opacity: 0; pointer-events: none; transition: opacity .2s; }
.c-yuk-hui .c3toc a { position: relative; min-height: 26px; }
.c-yuk-hui .c3toc a:hover span, .c-yuk-hui .c3toc a:focus-visible span { opacity: 1; max-width: none; }
.c-yuk-hui .c3toc a::after { width: 7px; height: 7px; border: 1px solid currentColor; margin: 0 4px; }
.c-yuk-hui .c3toc a[aria-current="true"] { color: var(--jade); }
.c-yuk-hui .c3toc a[aria-current="true"]::after { width: 16px; height: 16px; margin: 0; border: 0; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 10.5c0-.8.9-1.2 1.6-.8.9.6.8 2-.1 2.6-1.4.9-3.2.1-3.7-1.4-.6-2 .8-3.9 2.8-4.3 2.6-.5 4.8 1.4 5.1 3.9.3 3.1-2.1 5.6-5.1 5.8-3.6.2-6.4-2.6-6.5-6.1' fill='none' stroke='%2393cdb4' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }

.c-yuk-hui .c3q--1 .yh-meta { position: sticky; top: calc(var(--bar) + 40px); }
.c-yuk-hui .av { box-shadow: 0 0 0 1px rgba(236, 228, 211, .28); }
.c-yuk-hui .talk__av .av { box-shadow: 0 0 0 2px var(--chip-ring), 0 0 0 3px rgba(236, 228, 211, .2); }

/* ---------- 结尾 ---------- */
.c-yuk-hui .c3end { padding: calc(var(--bar) + 56px) var(--gut) 80px; border-top: 1px solid var(--rule); }
.yh-end { max-width: var(--page); margin: 0 auto; }
.c-yuk-hui .c3end h2 { margin: 0 0 20px; font: 600 clamp(30px, 3.6vw, 44px)/1.2 var(--head); color: var(--silk); }
.c-yuk-hui .c3end h3 { font-family: var(--head); font-weight: 600; color: var(--silk); }
.c-yuk-hui .c3-lin li { border-radius: 0; border-color: var(--rule); background: rgba(236, 228, 211, .03); }
.c-yuk-hui .c3-lin li p { color: var(--ink-2); }
.c-yuk-hui .c3-lin .rel { color: var(--ink-3); }
.yh-sti b::after { content: ""; display: inline-block; width: 14px; height: 19px; margin-left: 7px; vertical-align: -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 19'%3E%3Crect width='14' height='19' rx='1' fill='%234b2d12'/%3E%3Crect x='3.5' y='4' width='7' height='11' fill='%23e9dfca'/%3E%3Cg fill='%2316110f'%3E%3Crect x='.8' y='1.5' width='1.6' height='2' rx='.4'/%3E%3Crect x='.8' y='6' width='1.6' height='2' rx='.4'/%3E%3Crect x='.8' y='10.5' width='1.6' height='2' rx='.4'/%3E%3Crect x='.8' y='15' width='1.6' height='2' rx='.4'/%3E%3Crect x='11.6' y='1.5' width='1.6' height='2' rx='.4'/%3E%3Crect x='11.6' y='6' width='1.6' height='2' rx='.4'/%3E%3Crect x='11.6' y='10.5' width='1.6' height='2' rx='.4'/%3E%3Crect x='11.6' y='15' width='1.6' height='2' rx='.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.c-yuk-hui .c3-credits, .c-yuk-hui .c3-fine { color: var(--ink-3); }
.c-yuk-hui .c3-endgo .c3-btn { color: var(--ink); }
.c-yuk-hui .c3-endgo .c3-btn--deep { color: #16110f; }
.yh-coda { margin: 56px 0 0; text-align: center; opacity: .5; }
.yh-coda .yh-sp path { stroke-width: .9; }

/* ---------- 尺寸 ---------- */
@media (max-width: 1180px) {
  .yh-hero__cols { grid-template-columns: minmax(0, 1fr); }
  .yh-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .yh-band__books { grid-column: 1 / -1; }
  .c-yuk-hui .yh-band__books .c3-books { columns: 2; column-gap: 32px; }
  .c-yuk-hui .c3-books li { break-inside: avoid; }
}
@media (min-width: 861px) and (max-width: 1400px) {
  .c-yuk-hui .c3hero, .c-yuk-hui .c3q, .c-yuk-hui .c3end { padding-right: calc(var(--gut) + 64px); }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .yh-cosmo { padding-right: 40px; }
  .yh-film { right: -40px; width: 150px; }
}
@media (max-width: 860px) {
  .yh-hero { grid-template-columns: minmax(0, 1fr); }
  .yh-loom { max-width: 420px; }
  .c-yuk-hui .yh-qs .c3-qlist li a { padding: 9px 0; }
  .yh-scroll__hint { display: block; }
  .yh-loom__img img { max-height: none; }
  .yh-band { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .c-yuk-hui .yh-band__books .c3-books { columns: 1; }
  .yh-q, .c-yuk-hui .c3q--2 .yh-q, .c-yuk-hui .c3q--4 .yh-q { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hd" "art" "body"; }
  .yh-art { padding: 0 0 18px; }
  .yh-fig--wood { max-width: 320px; }
  .yh-fig--wood img { max-height: 54vh; }
  .yh-fig--obj { max-width: 300px; }
  .yh-fig--ding { max-width: 260px; }
  .c-yuk-hui .c3q--7 .yh-fig--obj { max-width: 300px; }
  .c-yuk-hui .c3q { padding-top: calc(var(--bar) + 34px); padding-bottom: 56px; }
  .c-yuk-hui .c3q__lede { text-align: left; }
}
@media (max-width: 560px) {
  .yh-hero__id h1 { letter-spacing: .08em; }
  .yh-en { font-size: 22px; }
  .yh-cosmo { padding-right: 0; max-width: 340px; }
  .yh-film { right: -10px; bottom: -18px; width: 132px; padding: 14px 16px 10px; }
  .yh-film__t { font-size: 11px; }
  .yh-cosmo .yh-fig figcaption { margin-top: 30px; padding-right: 128px; }
  .yh-anti { grid-template-columns: minmax(0, 1fr); }
  .yh-rec__two { gap: 8px; }
  .yh-rec__p { padding: 4px; }
  .yh-rec__p figcaption { flex-direction: column; gap: 0; }
  .yh-when b { font-size: 34px; }
  .yh-qd__lab { max-width: 9em; }
}
@media (prefers-reduced-motion: reduce) {
  .yh-op__p i { animation: none; transform: translate(5px, -4px); }
}