/* 茉莉花文库 skins — GENERATED by scripts/build-wenku-skins.sh.
   Edit site-build/wenku/*.css, never this file. */

/* ==========================================================================
   茉莉花文库 — base layer (skin-independent)
   The renderer emits ONE superset DOM (see WenkuArchiveRenderer); skins
   select from it. This layer: resets, the pure-CSS category filter, and
   the switcher/radio plumbing every skin inherits.
   ========================================================================== */
.wk, .wk * { margin: 0; padding: 0; box-sizing: border-box; }
/* EMBED HARDENING: the live page nests .wk under the site's chrome, whose
   body{font-size:14px} and a:hover{underline} otherwise bleed in and shrink
   every skin ~12% vs the approved fixtures (owner-flagged 2026-08-02).
   The skins were designed against a 16px root — restore it explicitly. */
.wk { font-size: 16px; line-height: 1.75; -webkit-text-size-adjust: 100%; min-width: 0; overflow-x: clip; }
.wk a { text-decoration: none; color: inherit; }
.wk a:hover { text-decoration: none; }
.wk ol, .wk ul { list-style: none; }
.wk-radio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wk-tab { cursor: pointer; }
.wk-cattree label { cursor: pointer; }

/* pure-CSS category filter: radios precede .wk-body in the DOM.
   GENERATED from ContentClasses::WENKU_CATEGORIES + pinglun — keep it in
   sync when a category is added. 玄学 was added 2026-08-02 and this list
   was missed on the first pass: the tab rendered and selected, but with no
   matching rule it filtered nothing and simply showed every article. */
#wk-c-pinglun:checked ~ .wk-body .wk-e:not([data-cat="pinglun"]),
#wk-c-pinglun:checked ~ .wk-body .wk-card:not([data-cat="pinglun"]),
#wk-c-pinglun:checked ~ .wk-body .wk-cat:not([data-cat="pinglun"]),
#wk-c-lishi:checked ~ .wk-body .wk-e:not([data-cat="lishi"]),
#wk-c-lishi:checked ~ .wk-body .wk-card:not([data-cat="lishi"]),
#wk-c-lishi:checked ~ .wk-body .wk-cat:not([data-cat="lishi"]),
#wk-c-qinggan:checked ~ .wk-body .wk-e:not([data-cat="qinggan"]),
#wk-c-qinggan:checked ~ .wk-body .wk-card:not([data-cat="qinggan"]),
#wk-c-qinggan:checked ~ .wk-body .wk-cat:not([data-cat="qinggan"]),
#wk-c-xuanxue:checked ~ .wk-body .wk-e:not([data-cat="xuanxue"]),
#wk-c-xuanxue:checked ~ .wk-body .wk-card:not([data-cat="xuanxue"]),
#wk-c-xuanxue:checked ~ .wk-body .wk-cat:not([data-cat="xuanxue"]),
#wk-c-shendu:checked ~ .wk-body .wk-e:not([data-cat="shendu"]),
#wk-c-shendu:checked ~ .wk-body .wk-card:not([data-cat="shendu"]),
#wk-c-shendu:checked ~ .wk-body .wk-cat:not([data-cat="shendu"]) {
  display: none;
}


/* ==========================================================================
   SWITCHER POSITION AND WRAPPING (owner ruling 2026-08-02)

   The switcher used to move: 怀旧橙 and 泡网门户 put it on the left, 阅读室 and
   自由版 pushed it right with justify-content:flex-end. Switching skin also
   moved the control you had just used, which is exactly the thing a
   persistent control must not do.

   It is now pinned LEFT in every skin — where the eye starts, and where two
   of the four already had it — and it is never allowed to become two lines.
   On a narrow screen it scrolls sideways instead of wrapping, so the masthead
   below it cannot be pushed down by a control.
   ========================================================================== */
.wk .wk-skins {
	box-sizing: border-box; width: 100%; max-width: 1040px; margin: 0 auto 12px; padding: 6px 0; display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 8px; font-size: 13px; line-height: 1.6; white-space: nowrap; overflow-x: auto; scrollbar-width: none;

	/* AND NOT PAINTED WHERE THE RENDERER PUT IT (owner, 2026-08-23: "i saw
	   换皮肤 text and refined buttons that are from a very old version").
	   wenku.js lifts this bar to the top of the document, where chrome.css's
	   .mh-skins-top rules dress it; the script sits in the footer, so without
	   this the browser paints the in-page layout for one frame first. Once
	   moved the bar is no longer inside .wk and this rule stops matching.

	   The delayed keyframe above is the no-JS fallback: with scripting off the
	   bar never moves, so it fades in where it stands rather than never
	   appearing. Skin switching still works — the links are real ?skin= URLs.

	   THIS LIVED ONLY IN THE BUNDLE UNTIL 2026-08-23, and a rebuild reverted
	   it silently: tools/audit-css-drift.py compares selector SETS, so new
	   DECLARATIONS on a selector that already existed are invisible to it.
	   WenkuChromeTest::test_the_pre_move_frame_is_not_painted is what caught
	   the reversion, and it is the reason this comment is here rather than in
	   a commit message. */
	opacity: 0;
	visibility: hidden;
	animation: wk-bar-noscript 1ms linear 1.4s forwards;
}
.wk .wk-skins::-webkit-scrollbar { display: none; }
.wk .wk-skins a {
	flex: 0 0 auto; padding: 2px 10px; border: 1px solid transparent; cursor: pointer;
}

/* NO BOX ON A CLICKED TITLE (owner, 2026-08-05) — see home skin-base; the
   wenku title anchors get the same treatment: no outline, underline cue. */
.wk :where(.wk-e-t, .wk-t) a:focus,
.wk :where(.wk-e-t, .wk-t) a:focus-visible {
	outline: none;
}
.wk :where(.wk-e-t, .wk-t) a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The stream's row wrapper (2026-08-22). display:contents by default so every
   skin that predates it lays its entries out exactly as before; 阅读室 turns it
   into a real box because its preview pane needs the stream to be two columns
   and not forty-nine rows. */
.wk .wk-list { display: contents; }

/* ---------- BACK-PORTED 2026-08-23: rules that had only ever existed in the
   deployed bundle. They are shared by both skins, so they belong here: the
   站务 footer 文库 renders itself now that the page carries no site footer
   (ADR-0038), the clipped 换皮肤 label, and the default hide for the 怀旧橙
   pager — which must be a BASE rule, or 阅读室 shows six stray columns of page
   numbers (it did, and the owner sent a screenshot). ---------- */
/* ==========================================================================
   站务 — 文库's own footer (owner, 2026-08-23: no site header or footer on this
   page). The three links are constitutional (CLAUDE.md): 版权与撤稿, 隐私说明,
   联系我们 on every public template. With the site footer off this page, they
   live here. Styled in BOTH skins, since one superset DOM means an unstyled
   element shows up in the other skin looking like a mistake.
   ========================================================================== */
.wk .wk-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 22px;
  padding: 26px 22px 40px;
  font-size: 12.5px;
  letter-spacing: .04em;
}
.wk .wk-foot a { text-decoration: none; }
.wk .wk-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* The clipped label: read aloud, never painted. NOT scoped to .wk — the bar
   spends its life outside it, and chrome.css's font-size: 0 on the container is
   a different trick for a different bar. */
@keyframes wk-bar-noscript { to { opacity: 1; visibility: visible; } }

.wk-sr {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
/* OFF EVERYWHERE BY DEFAULT — unscoped, and it has to be. .wk-hpg is a NEW
   element in the shared DOM, and this file's contract is that a skin hides
   what it does not use; a new element that only ONE skin hides is therefore
   visible in all the others. Hiding it only under .wk.skin-huaijiu printed
   all SIX of 阅读室's copies (one per filter, twelve numbers each) as stray
   columns of digits down the middle of the page — owner screenshot,
   2026-08-23. The 怀旧橙 show-rules below carry an id and still win. */
.wk .wk-hpg { display: none; }

/* ==========================================================================
   茉莉花文库 — skin: huaijiu 怀旧橙 (DEFAULT)
   Blogspot-era molihua.org idiom: golden gradient canvas, orange gradient
   masthead, white content sheet (max-width 1080px, soft shadow), gray tab
   strip, Blogger entries (bold date over orange title, dashed separators),
   warm sidebar with ▸ year archive.
   SELECTS: .wk-stream + .wk-side.   HIDES: .wk-rail, .wk-cats.
   Every rule scoped under .wk.skin-huaijiu.
   ========================================================================== */

/* ---- golden canvas ---- */
.wk.skin-huaijiu {
  font-family: -apple-system, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  color: #2b2115;
  background: #f6c368 linear-gradient(180deg,
    #f2b95a 0%, #f9e0ae 220px, #fdf4e0 460px, #fbeccb 72%, #f4c97e 100%);
  /* no background-attachment:fixed — iOS Safari mangles it */
  min-height: 100vh;
  padding: 28px 16px 44px;
}

/* organisations this skin does not use */
.wk.skin-huaijiu .wk-rail,
.wk.skin-huaijiu .wk-cats { display: none; }

/* ---- the white sheet: skins + mast + tabs + body form one centered card.
       Each block carries the side shadow; clip-path trims the shadow at the
       seams so the four blocks read as a single sheet. ---- */
.wk.skin-huaijiu .wk-mast,
.wk.skin-huaijiu .wk-tabs,
.wk.skin-huaijiu .wk-body {
  width: 100%;
  /* 1040px (owner, 2026-08-04: "squeeze them just a little bit"). Was 1080. This
     is also the measure the homepage skins settled on, so a reader moving between
     the two sections keeps the same column. */
  max-width: 1040px;
  margin: 0 auto;
  box-shadow: 0 0 8px rgba(90, 50, 0, .28);
}
.wk.skin-huaijiu .wk-skins {
	background: #3a2d18; color: #cbb98e; letter-spacing: .05em;
}
.wk.skin-huaijiu .wk-mast  { clip-path: inset(0 -12px); }
.wk.skin-huaijiu .wk-tabs  { clip-path: inset(0 -12px); }
.wk.skin-huaijiu .wk-body  { clip-path: inset(0 -12px -12px); border-radius: 0 0 2px 2px; }

/* ---- skin switcher (dark bar atop the sheet) ---- */
.wk.skin-huaijiu .wk-skins {
  background: #3a2d18;
  color: #cbb98e;
  font-size: 12.5px;
  letter-spacing: .05em;
  padding: 7px 36px;
}
.wk.skin-huaijiu .wk-skins a {
	color: #f3d9a4;
}
.wk.skin-huaijiu .wk-skins a:hover { color: #fff; text-decoration: underline; }
.wk.skin-huaijiu .wk-skins a.on {
	color: #fff; font-weight: 700; box-shadow: inset 0 -1px 0 #e8a94f;
}

/* ---- orange gradient masthead ---- */
.wk.skin-huaijiu .wk-mast {
  background: linear-gradient(180deg, #ec8f3e 0%, #d96f1c 55%, #c95f10 100%);
  color: #fff;
  padding: 44px 36px 40px;
}
.wk.skin-huaijiu .wk-mast h1 {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(90, 40, 0, .35);
}
.wk.skin-huaijiu .wk-tag   { margin-top: 6px; font-size: 15px; color: #ffe7c4; letter-spacing: .12em; }
.wk.skin-huaijiu .wk-stats { margin-top: 2px; font-size: 13px; color: #ffddad; letter-spacing: .08em; }

/* ---- gray tab strip (hairline via inset shadow so the active tab's white
       background merges into the sheet below) ---- */
.wk.skin-huaijiu .wk-tabs {
  display: flex;
  align-items: stretch;
  background: linear-gradient(180deg, #f7f7f7, #ececec);
  box-shadow: 0 0 8px rgba(90, 50, 0, .28), inset 0 -1px 0 #ddd;
  font-size: 15px;
  overflow-x: auto;
  white-space: nowrap;
}
.wk.skin-huaijiu .wk-tab {
  display: flex;
  align-items: center;
  padding: 10px 22px;
  color: #555;
  border-right: 1px solid #e2e2e2;
}
.wk.skin-huaijiu .wk-tab:hover { background: #f2f2f2; color: #b1580a; }
.wk.skin-huaijiu .wk-tab .wk-n { margin-left: 5px; font-size: 11.5px; color: #6b6b6b; }
.wk.skin-huaijiu .wk-home {
  margin-left: auto;
  align-self: center;
  padding: 10px 18px;
  border-left: 1px solid #e2e2e2;
  color: #6b6b6b;
  font-size: 13.5px;
}
.wk.skin-huaijiu .wk-home:hover { color: #b1580a; text-decoration: underline; }

/* active tab from the checked radio */
.wk.skin-huaijiu #wk-c-all:checked     ~ .wk-tabs .wk-tab[data-cat="all"],
.wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-tabs .wk-tab[data-cat="pinglun"],
.wk.skin-huaijiu #wk-c-lishi:checked   ~ .wk-tabs .wk-tab[data-cat="lishi"],
.wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-tabs .wk-tab[data-cat="qinggan"],
.wk.skin-huaijiu #wk-c-shendu:checked  ~ .wk-tabs .wk-tab[data-cat="shendu"] {
  background: #fff;
  color: #b1580a;
  font-weight: 600;
}
.wk.skin-huaijiu #wk-c-all:checked     ~ .wk-tabs .wk-tab[data-cat="all"] .wk-n,
.wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-tabs .wk-tab[data-cat="pinglun"] .wk-n,
.wk.skin-huaijiu #wk-c-lishi:checked   ~ .wk-tabs .wk-tab[data-cat="lishi"] .wk-n,
.wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-tabs .wk-tab[data-cat="qinggan"] .wk-n,
.wk.skin-huaijiu #wk-c-shendu:checked  ~ .wk-tabs .wk-tab[data-cat="shendu"] .wk-n {
  color: #b1580a;
}

/* ---- two balanced columns; grid stretch keeps the warm sidebar the same
       height as the stream (no blank canvas below a short column) ---- */
.wk.skin-huaijiu .wk-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  background: #fff;
}
.wk.skin-huaijiu .wk-stream { padding: 30px 36px 40px; min-width: 0; }
.wk.skin-huaijiu .wk-side {
  padding: 30px 26px 40px;
  background: #fffdf7;
  border-left: 1px solid #eee2cd;
}

/* ---- entries (Blogger idiom: bold date over orange title) ---- */
.wk.skin-huaijiu .wk-e {
  padding: 22px 0 26px;
  border-bottom: 1px dashed #e6d5b4;
}
.wk.skin-huaijiu .wk-e:first-child { padding-top: 6px; }
.wk.skin-huaijiu .wk-e:last-child  { border-bottom: 0; }
.wk.skin-huaijiu .wk-e-d {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #6a5636;
  letter-spacing: .04em;
}
.wk.skin-huaijiu .wk-e-t {
  font-size: 24px;
  line-height: 1.45;
  font-weight: 600;
  margin: 4px 0 8px;
}
.wk.skin-huaijiu .wk-e:first-child .wk-e-t { font-size: 29px; }
.wk.skin-huaijiu .wk-e-t a { color: #c8650f; }
.wk.skin-huaijiu .wk-e-t a:hover { color: #e07b1f; text-decoration: underline; }
.wk.skin-huaijiu .wk-e-m {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  font-size: 13px;
  color: #7d6742;
  margin-bottom: 10px;
}
.wk.skin-huaijiu .wk-chip {
  display: inline-block;
  background: #fbe9cd;
  color: #8f4f0b;
  border: 1px solid #f0d3a2;
  border-radius: 2px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 20px;
}
.wk.skin-huaijiu .wk-chip-pinglun {
  background: #eef3e4;
  color: #4e6a24;
  border-color: #d7e3bc;
}
.wk.skin-huaijiu .wk-e-x {
  font-size: 15.5px;
  color: #4a3d28;
  max-width: 62ch;
}
.wk.skin-huaijiu .wk-more {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  color: #b1580a;
  border-bottom: 1px dotted #c8650f;
}
.wk.skin-huaijiu .wk-more:hover { color: #e07b1f; border-bottom-style: solid; }

/* ---- warm sidebar ---- */
.wk.skin-huaijiu .wk-blk { margin-bottom: 30px; }
.wk.skin-huaijiu .wk-blk:last-child { margin-bottom: 0; }
.wk.skin-huaijiu .wk-blk h3 {
  font-size: 13.5px;
  font-weight: 700;
  color: #3a2d18;
  letter-spacing: .18em;
  border-bottom: 2px solid #eadbb8;
  padding-bottom: 6px;
  margin-bottom: 12px;
}
.wk.skin-huaijiu .wk-blk p { font-size: 14px; color: #5a4a30; }
.wk.skin-huaijiu .wk-cattree li,
.wk.skin-huaijiu .wk-arch li { font-size: 14.5px; padding: 4px 0; }
.wk.skin-huaijiu .wk-cattree label { color: #b1580a; }
.wk.skin-huaijiu .wk-cattree label:hover { color: #e07b1f; text-decoration: underline; }
.wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-cattree label[for="wk-c-pinglun"],
.wk.skin-huaijiu #wk-c-lishi:checked   ~ .wk-body .wk-cattree label[for="wk-c-lishi"],
.wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-cattree label[for="wk-c-qinggan"],
.wk.skin-huaijiu #wk-c-shendu:checked  ~ .wk-body .wk-cattree label[for="wk-c-shendu"] {
  font-weight: 700;
}
.wk.skin-huaijiu .wk-cattree .wk-n,
.wk.skin-huaijiu .wk-arch .wk-n { font-size: 13px; color: #7d6742; }
.wk.skin-huaijiu .wk-arch li::before {
  content: "▸";
  color: #c8650f;
  margin-right: 7px;
  font-size: 12px;
}
.wk.skin-huaijiu .wk-arch .wk-y { color: #b1580a; }
.wk.skin-huaijiu .wk-note {
  background: #fdf6e3;
  border: 1px solid #f0e1bb;
  border-radius: 2px;
  padding: 12px 14px;
}
.wk.skin-huaijiu .wk-note p { font-size: 13.5px; color: #6a5636; line-height: 1.7; }

/* ---- mobile: sheet goes edge-to-edge, columns stack ---- */
@media (max-width: 860px) {
  .wk.skin-huaijiu { padding: 0; }
    .wk.skin-huaijiu .wk-mast,
  .wk.skin-huaijiu .wk-tabs,
  .wk.skin-huaijiu .wk-body {
    max-width: none;
    box-shadow: none;
    clip-path: none;
    border-radius: 0;
  }
  .wk.skin-huaijiu .wk-tabs { box-shadow: inset 0 -1px 0 #ddd; }
  .wk.skin-huaijiu .wk-skins { padding: 7px 22px; overflow-x: auto; white-space: nowrap; }
  .wk.skin-huaijiu .wk-mast { padding: 30px 22px 26px; }
  .wk.skin-huaijiu .wk-mast h1 { font-size: 32px; }
  .wk.skin-huaijiu .wk-body { grid-template-columns: minmax(0, 1fr); }
  .wk.skin-huaijiu .wk-side { border-left: 0; border-top: 1px solid #eee2cd; }
  .wk.skin-huaijiu .wk-stream,
  .wk.skin-huaijiu .wk-side { padding-left: 22px; padding-right: 22px; }
  .wk.skin-huaijiu .wk-e:first-child .wk-e-t { font-size: 25px; }
}

/* The cover joined the superset DOM on 2026-08-22 for 阅读室; this skin was
   not drawn around a picture, so it hides it exactly as it hides .wk-rail. */
.wk.skin-huaijiu .wk-e-c { display: none; }

/* The preview pane and the pager are 阅读室's (2026-08-22); this skin reads
   its stream whole and unpaged. */
.wk.skin-huaijiu .wk-pv, .wk.skin-huaijiu .wk-x, .wk.skin-huaijiu .wk-pick,
.wk.skin-huaijiu .wk-pgr, .wk.skin-huaijiu .wk-pg { display: none; }

/* ---------- BACK-PORTED 2026-08-23: 怀旧橙's own half of the same work — its
   footer colours, its pager chips, and the checked-radio page rules that show
   20 rows at a time. ---------- */
/* 怀旧橙 keeps its own colours */
.wk.skin-huaijiu .wk-foot {
  background: #fffdf7;
  border-top: 1px solid #eee2cd;
  color: #8a7f6c;
}
.wk.skin-huaijiu .wk-foot a { color: #7a6a52; }
.wk.skin-huaijiu .wk-foot a:hover { color: #c1440e; }
.wk.skin-huaijiu .wk-hpg .wk-pn {
  min-width: 34px; padding: 7px 6px; font-size: 14px; text-align: center;
  color: #7d6742; cursor: pointer; border-bottom: 2px solid transparent;
  font-variant-numeric: tabular-nums;
}
.wk.skin-huaijiu .wk-hpg .wk-pn:hover { color: #c8650f; }
/* ==========================================================================
   怀旧橙 · 分页（owner, 2026-08-23）

   "currently lists all 200-ish articles. no, please at the very end of the
   page use number of pages. each page show 20 items."

   This skin read its stream whole because the row-hiding rules were all
   scoped to 阅读室 — so every one of the 226 entries printed. It now pages at
   TWENTY, which is its own size: 阅读室 is fifteen by a separate ruling, and
   CSS cannot merge two of one into one of the other, so each row carries both
   groupings (data-pa/data-pc at fifteen, data-ha/data-hc at twenty) and each
   skin reads its own pair. The pager is a SECOND nav (.wk-hpg) emitted last in
   the stream, which is why the existing `.wk.skin-huaijiu .wk-pg { display:
   none }` can keep hiding 阅读室's without hiding this one.

   Generated to eighteen pages per filter, the same static-CSS bargain the
   十五-a-page block makes: the renderer clamps a row past the last page onto
   it rather than leaving it matched by no rule at all.
   ========================================================================== */
.wk.skin-huaijiu .wk-list .wk-e { display: none; }
.wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-1:checked ~ .wk-list .wk-e[data-ha="1"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-2:checked ~ .wk-list .wk-e[data-ha="2"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-3:checked ~ .wk-list .wk-e[data-ha="3"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-4:checked ~ .wk-list .wk-e[data-ha="4"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-5:checked ~ .wk-list .wk-e[data-ha="5"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-6:checked ~ .wk-list .wk-e[data-ha="6"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-7:checked ~ .wk-list .wk-e[data-ha="7"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-8:checked ~ .wk-list .wk-e[data-ha="8"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-9:checked ~ .wk-list .wk-e[data-ha="9"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-10:checked ~ .wk-list .wk-e[data-ha="10"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-11:checked ~ .wk-list .wk-e[data-ha="11"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-12:checked ~ .wk-list .wk-e[data-ha="12"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-13:checked ~ .wk-list .wk-e[data-ha="13"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-14:checked ~ .wk-list .wk-e[data-ha="14"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-15:checked ~ .wk-list .wk-e[data-ha="15"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-16:checked ~ .wk-list .wk-e[data-ha="16"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-17:checked ~ .wk-list .wk-e[data-ha="17"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-18:checked ~ .wk-list .wk-e[data-ha="18"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-1:checked ~ .wk-list .wk-e[data-hc="1"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-2:checked ~ .wk-list .wk-e[data-hc="2"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-3:checked ~ .wk-list .wk-e[data-hc="3"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-4:checked ~ .wk-list .wk-e[data-hc="4"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-5:checked ~ .wk-list .wk-e[data-hc="5"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-6:checked ~ .wk-list .wk-e[data-hc="6"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-7:checked ~ .wk-list .wk-e[data-hc="7"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-8:checked ~ .wk-list .wk-e[data-hc="8"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-9:checked ~ .wk-list .wk-e[data-hc="9"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-10:checked ~ .wk-list .wk-e[data-hc="10"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-11:checked ~ .wk-list .wk-e[data-hc="11"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-12:checked ~ .wk-list .wk-e[data-hc="12"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-13:checked ~ .wk-list .wk-e[data-hc="13"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-14:checked ~ .wk-list .wk-e[data-hc="14"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-15:checked ~ .wk-list .wk-e[data-hc="15"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-16:checked ~ .wk-list .wk-e[data-hc="16"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-17:checked ~ .wk-list .wk-e[data-hc="17"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-18:checked ~ .wk-list .wk-e[data-hc="18"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-1:checked ~ .wk-list .wk-e[data-hc="1"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-2:checked ~ .wk-list .wk-e[data-hc="2"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-3:checked ~ .wk-list .wk-e[data-hc="3"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-4:checked ~ .wk-list .wk-e[data-hc="4"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-5:checked ~ .wk-list .wk-e[data-hc="5"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-6:checked ~ .wk-list .wk-e[data-hc="6"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-7:checked ~ .wk-list .wk-e[data-hc="7"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-8:checked ~ .wk-list .wk-e[data-hc="8"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-9:checked ~ .wk-list .wk-e[data-hc="9"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-10:checked ~ .wk-list .wk-e[data-hc="10"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-11:checked ~ .wk-list .wk-e[data-hc="11"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-12:checked ~ .wk-list .wk-e[data-hc="12"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-13:checked ~ .wk-list .wk-e[data-hc="13"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-14:checked ~ .wk-list .wk-e[data-hc="14"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-15:checked ~ .wk-list .wk-e[data-hc="15"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-16:checked ~ .wk-list .wk-e[data-hc="16"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-17:checked ~ .wk-list .wk-e[data-hc="17"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-18:checked ~ .wk-list .wk-e[data-hc="18"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-1:checked ~ .wk-list .wk-e[data-hc="1"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-2:checked ~ .wk-list .wk-e[data-hc="2"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-3:checked ~ .wk-list .wk-e[data-hc="3"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-4:checked ~ .wk-list .wk-e[data-hc="4"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-5:checked ~ .wk-list .wk-e[data-hc="5"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-6:checked ~ .wk-list .wk-e[data-hc="6"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-7:checked ~ .wk-list .wk-e[data-hc="7"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-8:checked ~ .wk-list .wk-e[data-hc="8"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-9:checked ~ .wk-list .wk-e[data-hc="9"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-10:checked ~ .wk-list .wk-e[data-hc="10"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-11:checked ~ .wk-list .wk-e[data-hc="11"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-12:checked ~ .wk-list .wk-e[data-hc="12"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-13:checked ~ .wk-list .wk-e[data-hc="13"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-14:checked ~ .wk-list .wk-e[data-hc="14"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-15:checked ~ .wk-list .wk-e[data-hc="15"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-16:checked ~ .wk-list .wk-e[data-hc="16"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-17:checked ~ .wk-list .wk-e[data-hc="17"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-18:checked ~ .wk-list .wk-e[data-hc="18"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-1:checked ~ .wk-list .wk-e[data-hc="1"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-2:checked ~ .wk-list .wk-e[data-hc="2"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-3:checked ~ .wk-list .wk-e[data-hc="3"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-4:checked ~ .wk-list .wk-e[data-hc="4"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-5:checked ~ .wk-list .wk-e[data-hc="5"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-6:checked ~ .wk-list .wk-e[data-hc="6"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-7:checked ~ .wk-list .wk-e[data-hc="7"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-8:checked ~ .wk-list .wk-e[data-hc="8"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-9:checked ~ .wk-list .wk-e[data-hc="9"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-10:checked ~ .wk-list .wk-e[data-hc="10"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-11:checked ~ .wk-list .wk-e[data-hc="11"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-12:checked ~ .wk-list .wk-e[data-hc="12"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-13:checked ~ .wk-list .wk-e[data-hc="13"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-14:checked ~ .wk-list .wk-e[data-hc="14"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-15:checked ~ .wk-list .wk-e[data-hc="15"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-16:checked ~ .wk-list .wk-e[data-hc="16"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-17:checked ~ .wk-list .wk-e[data-hc="17"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-18:checked ~ .wk-list .wk-e[data-hc="18"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-1:checked ~ .wk-list .wk-e[data-hc="1"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-2:checked ~ .wk-list .wk-e[data-hc="2"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-3:checked ~ .wk-list .wk-e[data-hc="3"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-4:checked ~ .wk-list .wk-e[data-hc="4"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-5:checked ~ .wk-list .wk-e[data-hc="5"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-6:checked ~ .wk-list .wk-e[data-hc="6"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-7:checked ~ .wk-list .wk-e[data-hc="7"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-8:checked ~ .wk-list .wk-e[data-hc="8"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-9:checked ~ .wk-list .wk-e[data-hc="9"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-10:checked ~ .wk-list .wk-e[data-hc="10"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-11:checked ~ .wk-list .wk-e[data-hc="11"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-12:checked ~ .wk-list .wk-e[data-hc="12"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-13:checked ~ .wk-list .wk-e[data-hc="13"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-14:checked ~ .wk-list .wk-e[data-hc="14"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-15:checked ~ .wk-list .wk-e[data-hc="15"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-16:checked ~ .wk-list .wk-e[data-hc="16"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-17:checked ~ .wk-list .wk-e[data-hc="17"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-18:checked ~ .wk-list .wk-e[data-hc="18"] { display: block; }
.wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream .wk-hpg[data-for="all"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream .wk-hpg[data-for="pinglun"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream .wk-hpg[data-for="lishi"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream .wk-hpg[data-for="qinggan"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream .wk-hpg[data-for="xuanxue"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream .wk-hpg[data-for="shendu"] {
  display: flex; flex-wrap: wrap; gap: 6px 4px; justify-content: center;
  margin-top: 34px; padding-top: 22px; border-top: 1px dashed #e6d5b4;
}
.wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-1:checked ~ .wk-hpg[data-for="all"] .wk-pn[for="wk-hg-all-1"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-2:checked ~ .wk-hpg[data-for="all"] .wk-pn[for="wk-hg-all-2"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-3:checked ~ .wk-hpg[data-for="all"] .wk-pn[for="wk-hg-all-3"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-4:checked ~ .wk-hpg[data-for="all"] .wk-pn[for="wk-hg-all-4"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-5:checked ~ .wk-hpg[data-for="all"] .wk-pn[for="wk-hg-all-5"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-6:checked ~ .wk-hpg[data-for="all"] .wk-pn[for="wk-hg-all-6"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-7:checked ~ .wk-hpg[data-for="all"] .wk-pn[for="wk-hg-all-7"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-8:checked ~ .wk-hpg[data-for="all"] .wk-pn[for="wk-hg-all-8"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-9:checked ~ .wk-hpg[data-for="all"] .wk-pn[for="wk-hg-all-9"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-10:checked ~ .wk-hpg[data-for="all"] .wk-pn[for="wk-hg-all-10"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-11:checked ~ .wk-hpg[data-for="all"] .wk-pn[for="wk-hg-all-11"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-12:checked ~ .wk-hpg[data-for="all"] .wk-pn[for="wk-hg-all-12"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-13:checked ~ .wk-hpg[data-for="all"] .wk-pn[for="wk-hg-all-13"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-14:checked ~ .wk-hpg[data-for="all"] .wk-pn[for="wk-hg-all-14"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-15:checked ~ .wk-hpg[data-for="all"] .wk-pn[for="wk-hg-all-15"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-16:checked ~ .wk-hpg[data-for="all"] .wk-pn[for="wk-hg-all-16"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-17:checked ~ .wk-hpg[data-for="all"] .wk-pn[for="wk-hg-all-17"], .wk.skin-huaijiu #wk-c-all:checked ~ .wk-body .wk-stream #wk-hg-all-18:checked ~ .wk-hpg[data-for="all"] .wk-pn[for="wk-hg-all-18"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-1:checked ~ .wk-hpg[data-for="pinglun"] .wk-pn[for="wk-hg-pinglun-1"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-2:checked ~ .wk-hpg[data-for="pinglun"] .wk-pn[for="wk-hg-pinglun-2"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-3:checked ~ .wk-hpg[data-for="pinglun"] .wk-pn[for="wk-hg-pinglun-3"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-4:checked ~ .wk-hpg[data-for="pinglun"] .wk-pn[for="wk-hg-pinglun-4"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-5:checked ~ .wk-hpg[data-for="pinglun"] .wk-pn[for="wk-hg-pinglun-5"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-6:checked ~ .wk-hpg[data-for="pinglun"] .wk-pn[for="wk-hg-pinglun-6"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-7:checked ~ .wk-hpg[data-for="pinglun"] .wk-pn[for="wk-hg-pinglun-7"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-8:checked ~ .wk-hpg[data-for="pinglun"] .wk-pn[for="wk-hg-pinglun-8"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-9:checked ~ .wk-hpg[data-for="pinglun"] .wk-pn[for="wk-hg-pinglun-9"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-10:checked ~ .wk-hpg[data-for="pinglun"] .wk-pn[for="wk-hg-pinglun-10"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-11:checked ~ .wk-hpg[data-for="pinglun"] .wk-pn[for="wk-hg-pinglun-11"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-12:checked ~ .wk-hpg[data-for="pinglun"] .wk-pn[for="wk-hg-pinglun-12"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-13:checked ~ .wk-hpg[data-for="pinglun"] .wk-pn[for="wk-hg-pinglun-13"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-14:checked ~ .wk-hpg[data-for="pinglun"] .wk-pn[for="wk-hg-pinglun-14"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-15:checked ~ .wk-hpg[data-for="pinglun"] .wk-pn[for="wk-hg-pinglun-15"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-16:checked ~ .wk-hpg[data-for="pinglun"] .wk-pn[for="wk-hg-pinglun-16"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-17:checked ~ .wk-hpg[data-for="pinglun"] .wk-pn[for="wk-hg-pinglun-17"], .wk.skin-huaijiu #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-hg-pinglun-18:checked ~ .wk-hpg[data-for="pinglun"] .wk-pn[for="wk-hg-pinglun-18"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-1:checked ~ .wk-hpg[data-for="lishi"] .wk-pn[for="wk-hg-lishi-1"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-2:checked ~ .wk-hpg[data-for="lishi"] .wk-pn[for="wk-hg-lishi-2"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-3:checked ~ .wk-hpg[data-for="lishi"] .wk-pn[for="wk-hg-lishi-3"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-4:checked ~ .wk-hpg[data-for="lishi"] .wk-pn[for="wk-hg-lishi-4"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-5:checked ~ .wk-hpg[data-for="lishi"] .wk-pn[for="wk-hg-lishi-5"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-6:checked ~ .wk-hpg[data-for="lishi"] .wk-pn[for="wk-hg-lishi-6"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-7:checked ~ .wk-hpg[data-for="lishi"] .wk-pn[for="wk-hg-lishi-7"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-8:checked ~ .wk-hpg[data-for="lishi"] .wk-pn[for="wk-hg-lishi-8"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-9:checked ~ .wk-hpg[data-for="lishi"] .wk-pn[for="wk-hg-lishi-9"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-10:checked ~ .wk-hpg[data-for="lishi"] .wk-pn[for="wk-hg-lishi-10"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-11:checked ~ .wk-hpg[data-for="lishi"] .wk-pn[for="wk-hg-lishi-11"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-12:checked ~ .wk-hpg[data-for="lishi"] .wk-pn[for="wk-hg-lishi-12"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-13:checked ~ .wk-hpg[data-for="lishi"] .wk-pn[for="wk-hg-lishi-13"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-14:checked ~ .wk-hpg[data-for="lishi"] .wk-pn[for="wk-hg-lishi-14"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-15:checked ~ .wk-hpg[data-for="lishi"] .wk-pn[for="wk-hg-lishi-15"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-16:checked ~ .wk-hpg[data-for="lishi"] .wk-pn[for="wk-hg-lishi-16"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-17:checked ~ .wk-hpg[data-for="lishi"] .wk-pn[for="wk-hg-lishi-17"], .wk.skin-huaijiu #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-hg-lishi-18:checked ~ .wk-hpg[data-for="lishi"] .wk-pn[for="wk-hg-lishi-18"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-1:checked ~ .wk-hpg[data-for="qinggan"] .wk-pn[for="wk-hg-qinggan-1"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-2:checked ~ .wk-hpg[data-for="qinggan"] .wk-pn[for="wk-hg-qinggan-2"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-3:checked ~ .wk-hpg[data-for="qinggan"] .wk-pn[for="wk-hg-qinggan-3"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-4:checked ~ .wk-hpg[data-for="qinggan"] .wk-pn[for="wk-hg-qinggan-4"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-5:checked ~ .wk-hpg[data-for="qinggan"] .wk-pn[for="wk-hg-qinggan-5"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-6:checked ~ .wk-hpg[data-for="qinggan"] .wk-pn[for="wk-hg-qinggan-6"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-7:checked ~ .wk-hpg[data-for="qinggan"] .wk-pn[for="wk-hg-qinggan-7"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-8:checked ~ .wk-hpg[data-for="qinggan"] .wk-pn[for="wk-hg-qinggan-8"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-9:checked ~ .wk-hpg[data-for="qinggan"] .wk-pn[for="wk-hg-qinggan-9"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-10:checked ~ .wk-hpg[data-for="qinggan"] .wk-pn[for="wk-hg-qinggan-10"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-11:checked ~ .wk-hpg[data-for="qinggan"] .wk-pn[for="wk-hg-qinggan-11"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-12:checked ~ .wk-hpg[data-for="qinggan"] .wk-pn[for="wk-hg-qinggan-12"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-13:checked ~ .wk-hpg[data-for="qinggan"] .wk-pn[for="wk-hg-qinggan-13"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-14:checked ~ .wk-hpg[data-for="qinggan"] .wk-pn[for="wk-hg-qinggan-14"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-15:checked ~ .wk-hpg[data-for="qinggan"] .wk-pn[for="wk-hg-qinggan-15"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-16:checked ~ .wk-hpg[data-for="qinggan"] .wk-pn[for="wk-hg-qinggan-16"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-17:checked ~ .wk-hpg[data-for="qinggan"] .wk-pn[for="wk-hg-qinggan-17"], .wk.skin-huaijiu #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-hg-qinggan-18:checked ~ .wk-hpg[data-for="qinggan"] .wk-pn[for="wk-hg-qinggan-18"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-1:checked ~ .wk-hpg[data-for="xuanxue"] .wk-pn[for="wk-hg-xuanxue-1"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-2:checked ~ .wk-hpg[data-for="xuanxue"] .wk-pn[for="wk-hg-xuanxue-2"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-3:checked ~ .wk-hpg[data-for="xuanxue"] .wk-pn[for="wk-hg-xuanxue-3"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-4:checked ~ .wk-hpg[data-for="xuanxue"] .wk-pn[for="wk-hg-xuanxue-4"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-5:checked ~ .wk-hpg[data-for="xuanxue"] .wk-pn[for="wk-hg-xuanxue-5"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-6:checked ~ .wk-hpg[data-for="xuanxue"] .wk-pn[for="wk-hg-xuanxue-6"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-7:checked ~ .wk-hpg[data-for="xuanxue"] .wk-pn[for="wk-hg-xuanxue-7"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-8:checked ~ .wk-hpg[data-for="xuanxue"] .wk-pn[for="wk-hg-xuanxue-8"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-9:checked ~ .wk-hpg[data-for="xuanxue"] .wk-pn[for="wk-hg-xuanxue-9"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-10:checked ~ .wk-hpg[data-for="xuanxue"] .wk-pn[for="wk-hg-xuanxue-10"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-11:checked ~ .wk-hpg[data-for="xuanxue"] .wk-pn[for="wk-hg-xuanxue-11"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-12:checked ~ .wk-hpg[data-for="xuanxue"] .wk-pn[for="wk-hg-xuanxue-12"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-13:checked ~ .wk-hpg[data-for="xuanxue"] .wk-pn[for="wk-hg-xuanxue-13"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-14:checked ~ .wk-hpg[data-for="xuanxue"] .wk-pn[for="wk-hg-xuanxue-14"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-15:checked ~ .wk-hpg[data-for="xuanxue"] .wk-pn[for="wk-hg-xuanxue-15"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-16:checked ~ .wk-hpg[data-for="xuanxue"] .wk-pn[for="wk-hg-xuanxue-16"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-17:checked ~ .wk-hpg[data-for="xuanxue"] .wk-pn[for="wk-hg-xuanxue-17"], .wk.skin-huaijiu #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-hg-xuanxue-18:checked ~ .wk-hpg[data-for="xuanxue"] .wk-pn[for="wk-hg-xuanxue-18"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-1:checked ~ .wk-hpg[data-for="shendu"] .wk-pn[for="wk-hg-shendu-1"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-2:checked ~ .wk-hpg[data-for="shendu"] .wk-pn[for="wk-hg-shendu-2"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-3:checked ~ .wk-hpg[data-for="shendu"] .wk-pn[for="wk-hg-shendu-3"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-4:checked ~ .wk-hpg[data-for="shendu"] .wk-pn[for="wk-hg-shendu-4"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-5:checked ~ .wk-hpg[data-for="shendu"] .wk-pn[for="wk-hg-shendu-5"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-6:checked ~ .wk-hpg[data-for="shendu"] .wk-pn[for="wk-hg-shendu-6"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-7:checked ~ .wk-hpg[data-for="shendu"] .wk-pn[for="wk-hg-shendu-7"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-8:checked ~ .wk-hpg[data-for="shendu"] .wk-pn[for="wk-hg-shendu-8"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-9:checked ~ .wk-hpg[data-for="shendu"] .wk-pn[for="wk-hg-shendu-9"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-10:checked ~ .wk-hpg[data-for="shendu"] .wk-pn[for="wk-hg-shendu-10"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-11:checked ~ .wk-hpg[data-for="shendu"] .wk-pn[for="wk-hg-shendu-11"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-12:checked ~ .wk-hpg[data-for="shendu"] .wk-pn[for="wk-hg-shendu-12"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-13:checked ~ .wk-hpg[data-for="shendu"] .wk-pn[for="wk-hg-shendu-13"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-14:checked ~ .wk-hpg[data-for="shendu"] .wk-pn[for="wk-hg-shendu-14"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-15:checked ~ .wk-hpg[data-for="shendu"] .wk-pn[for="wk-hg-shendu-15"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-16:checked ~ .wk-hpg[data-for="shendu"] .wk-pn[for="wk-hg-shendu-16"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-17:checked ~ .wk-hpg[data-for="shendu"] .wk-pn[for="wk-hg-shendu-17"], .wk.skin-huaijiu #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-hg-shendu-18:checked ~ .wk-hpg[data-for="shendu"] .wk-pn[for="wk-hg-shendu-18"] {
  color: #c8650f; font-weight: 700; border-bottom-color: #c8650f;
}

/* ==========================================================================
   茉莉花文库 · skin-reading —— 阅读室
   Cream paper, CJK serif display type, hairline rules, duotone line-art.
   SELECTS from the superset DOM:
     - first matching .wk-stream entry  -> oversized featured essay (hero)
     - .wk-cats                         -> horizontal scroll-snap shelves
     - .wk-side .wk-about               -> colophon card
   HIDES: .wk-rail, remaining .wk-stream entries, other .wk-side blocks.
   Every rule is scoped under .wk.skin-reading.
   ========================================================================== */

.wk.skin-reading {
  --paper: #f7f2e7;
  --paper-deep: #efe8d8;
  --petal: #fffdf7;
  --ink: #1e2b23;
  --ink-soft: #4d5a50;
  --green: #1c5c3f;
  --green-deep: #123f2b;
  --gilt: #b08d57;         /* decorative lines/art only */
  --gilt-ink: #7d6234;     /* text-safe gilt, >=4.5:1 on cream */
  --hairline: #d9d0ba;
  --serif: "Noto Serif SC", "Songti SC", "STSong", "STZhongsong", "Source Han Serif SC", "SimSun", serif;
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, sans-serif;
  --shadow: 0 1px 2px rgba(30, 43, 35, .06), 0 10px 28px -14px rgba(18, 63, 43, .28);
  --shadow-lift: 0 2px 4px rgba(30, 43, 35, .08), 0 22px 44px -16px rgba(18, 63, 43, .38);
  --wrap: max(24px, calc((100% - 1100px) / 2));

  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.9;
  min-height: 100vh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 500px at 50% -180px, rgba(28, 92, 63, .055), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(30, 43, 35, .012) 3px 4px);
  background-color: var(--paper);
}

.wk.skin-reading a:focus-visible:not(:where(.wk-e-t, .wk-t) a) { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---------- selection: hide what this skin does not use ---------- */
.wk.skin-reading .wk-rail,
.wk.skin-reading .wk-side .wk-blk:not(.wk-about) { display: none; }

.wk.skin-reading .wk-skins {
	border-bottom: 1px solid var(--hairline); font-family: var(--sans); color: var(--ink-soft); letter-spacing: .05em;
}
.wk.skin-reading .wk-skins a {
	border-radius: 99px; transition: color .2s, border-color .2s, background .2s;
}
.wk.skin-reading .wk-skins a:hover { color: var(--green); border-color: var(--hairline); }
.wk.skin-reading .wk-skins a.on { color: var(--petal); background: var(--green); border-color: var(--green); }

/* ---------- 报头 ---------- */
.wk.skin-reading .wk-mast {
  width: min(100% - 48px, 1100px); margin-inline: auto; text-align: center;
  padding: clamp(34px, 6vw, 60px) 0 clamp(22px, 4vw, 36px);
  border-bottom: 3px double rgba(30, 43, 35, .75);
}
.wk.skin-reading .wk-mast h1 {
  font-size: clamp(40px, 8vw, 78px); font-weight: 900;
  letter-spacing: .14em; text-indent: .14em; line-height: 1.25;
}
.wk.skin-reading .wk-mast h1::before {
  content: "\273F"; display: block; font-size: clamp(26px, 3vw, 34px);
  line-height: 1; color: var(--green); margin-bottom: 10px;
  text-indent: 0; letter-spacing: 0; font-weight: 400;
}
.wk.skin-reading .wk-tag {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 10px; color: var(--ink-soft);
  font-size: clamp(13px, 1.6vw, 15px); letter-spacing: .3em;
}
.wk.skin-reading .wk-tag::before,
.wk.skin-reading .wk-tag::after { content: ""; flex: 0 0 clamp(24px, 6vw, 72px); height: 1px; background: var(--hairline); }
.wk.skin-reading .wk-stats {
  margin-top: 12px; font-family: var(--sans); font-size: 12px;
  color: var(--ink-soft); letter-spacing: .2em;
}

/* ---------- 分类页签（吸顶细导航） ---------- */
.wk.skin-reading .wk-tabs {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: baseline; gap: clamp(12px, 3vw, 30px);
  padding: 11px var(--wrap);
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 6px 18px -14px rgba(30, 43, 35, .35);
  overflow-x: auto; white-space: nowrap;
  scrollbar-width: none;
}
.wk.skin-reading .wk-tabs::-webkit-scrollbar { display: none; }
.wk.skin-reading .wk-tab {
  font-family: var(--sans); font-size: 13px; color: var(--ink-soft);
  letter-spacing: .12em; padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.wk.skin-reading .wk-tab:hover { color: var(--green); border-bottom-color: var(--green); }
.wk.skin-reading #wk-c-all:checked ~ .wk-tabs .wk-tab[data-cat="all"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-tabs .wk-tab[data-cat="pinglun"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-tabs .wk-tab[data-cat="lishi"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-tabs .wk-tab[data-cat="qinggan"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-tabs .wk-tab[data-cat="shendu"] {
  color: var(--green-deep); border-bottom-color: var(--green); font-weight: 700;
}
.wk.skin-reading .wk-tabs .wk-n {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0;
  color: var(--gilt-ink); vertical-align: super; margin-left: 3px;
}
.wk.skin-reading .wk-home {
  margin-left: auto; font-family: var(--sans); font-size: 12px;
  color: var(--gilt-ink); letter-spacing: .1em; transition: color .2s;
}
.wk.skin-reading .wk-home:hover { color: var(--green); }

.wk.skin-reading .wk-stream {
  width: min(100% - 48px, 1100px); margin-inline: auto;
  padding-block: clamp(30px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 34px) clamp(16px, 2vw, 22px);
  align-items: start;
}
.wk.skin-reading .wk-e-t a {
  background: linear-gradient(var(--green), var(--green)) 0 100% / 0 3px no-repeat;
  transition: background-size .5s ease;
}
.wk.skin-reading .wk-e-t a:hover { background-size: 100% 3px; }
.wk.skin-reading .wk-e-m {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  font-family: var(--sans); margin-bottom: clamp(14px, 2vw, 20px);
}
.wk.skin-reading .wk-chip {
  display: inline-block; font-size: 11px; letter-spacing: .18em;
  padding: 3px 10px; border-radius: 2px;
  background: var(--green); color: var(--petal);
}
.wk.skin-reading .wk-chip-lishi,
.wk.skin-reading .wk-chip-qinggan {
  background: transparent; border: 1px solid var(--gilt); color: var(--gilt-ink);
}
.wk.skin-reading .wk-src { font-size: 12.5px; color: var(--ink-soft); letter-spacing: .06em; }
.wk.skin-reading .wk-e-x {
  font-size: clamp(15px, 1.8vw, 17.5px); line-height: 2; color: var(--ink-soft); max-width: 62ch;
}
.wk.skin-reading .wk-e-x::first-letter {
  float: left; font-size: 3em; line-height: 1; font-weight: 900;
  color: var(--petal); background: var(--green);
  padding: .18em .2em; margin: .12em .45em .05em 0; border-radius: 3px;
  box-shadow: 2px 2px 0 var(--gilt);
}
.wk.skin-reading .wk-more {
  justify-self: start; align-self: start; margin-top: clamp(16px, 2.4vw, 26px);
  font-family: var(--sans); font-size: 13.5px; letter-spacing: .22em; text-indent: .22em;
  color: var(--green); border: 1px solid var(--green);
  padding: 10px 26px; border-radius: 2px;
  transition: background .25s, color .25s, box-shadow .25s;
}
.wk.skin-reading .wk-more:hover { background: var(--green); color: var(--petal); box-shadow: var(--shadow-lift); }

/* ---------- 书架（.wk-cats -> scroll-snap shelves） ---------- */
.wk.skin-reading .wk-cats {
  width: min(100% - 48px, 1100px); margin-inline: auto;
  display: grid; gap: clamp(34px, 5vw, 58px);
  padding-block: clamp(8px, 2vw, 18px) clamp(40px, 6vw, 70px);
  counter-reset: shelf;
}
.wk.skin-reading .wk-cats::before {
  /* 花隔线 */
  content: "\273F"; display: block; text-align: center;
  font-size: 22px; line-height: 1; color: var(--green);
  background:
    linear-gradient(var(--hairline), var(--hairline)) left 0 top 50% / calc(50% - 34px) 1px no-repeat,
    linear-gradient(var(--hairline), var(--hairline)) right 0 top 50% / calc(50% - 34px) 1px no-repeat;
}
.wk.skin-reading .wk-cat-h {
  display: flex; align-items: baseline; gap: clamp(12px, 2vw, 20px);
  margin-bottom: clamp(14px, 2vw, 20px);
  font-size: clamp(22px, 2.8vw, 30px); font-weight: 900; letter-spacing: .1em; white-space: nowrap;
}
.wk.skin-reading .wk-cat-h::before {
  counter-increment: shelf; content: counter(shelf, simp-chinese-formal);
  font-size: clamp(28px, 3.6vw, 42px); font-weight: 900; line-height: 1;
  letter-spacing: 0; color: var(--green); flex: 0 0 auto;
}
@supports (-webkit-text-stroke: 1px #000) {
  .wk.skin-reading .wk-cat-h::before { color: transparent; -webkit-text-stroke: 1.2px var(--green); }
}
.wk.skin-reading .wk-cat-h::after {
  content: "书架可横向翻阅 \2192"; flex: 1; min-width: 40px; align-self: center;
  overflow: hidden; text-align: right; white-space: nowrap;
  font-family: var(--sans); font-weight: 400; font-size: 12px;
  letter-spacing: .12em; color: var(--gilt-ink); line-height: 1.4;
  background: linear-gradient(var(--hairline), var(--hairline)) left 0 top 50% / calc(100% - 10em) 1px no-repeat;
}
.wk.skin-reading .wk-cat-l {
  display: flex; gap: 24px; overflow-x: auto;
  padding: 6px 2px 18px;
  scroll-snap-type: x mandatory; scroll-padding-inline: 2px;
  scrollbar-width: thin; scrollbar-color: var(--green) var(--paper-deep);
}
.wk.skin-reading .wk-cat-l::-webkit-scrollbar { height: 6px; }
.wk.skin-reading .wk-cat-l::-webkit-scrollbar-track { background: var(--paper-deep); border-radius: 99px; }
.wk.skin-reading .wk-cat-l::-webkit-scrollbar-thumb { background: var(--green); border-radius: 99px; }

/* 卡片（lifted book cards） */
.wk.skin-reading .wk-cat-l li {
  flex: 0 0 auto; width: clamp(272px, calc(50% - 12px), 560px);
  min-width: min(300px, 82vw);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--petal); border: 1px solid var(--hairline); box-shadow: var(--shadow);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s;
}
.wk.skin-reading .wk-cat-l li:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.wk.skin-reading .wk-cat-l li::before {
  /* duotone line-art band, per-category motif */
  content: ""; height: 118px; flex: 0 0 auto;
  border-bottom: 1px solid var(--hairline);
  background-color: var(--paper);
}
.wk.skin-reading .wk-cat-l li:nth-child(even)::before { transform: scaleX(-1); }
/* 评论：灯下的稿纸字行 */
.wk.skin-reading .wk-cat[data-cat="pinglun"] .wk-cat-l li::before {
  background:
    radial-gradient(circle at 22% 44%, rgba(176, 141, 87, .32) 0 15px, transparent 16px),
    linear-gradient(rgba(28, 92, 63, .5), rgba(28, 92, 63, .5)) left 22% top 58% / 2px 34% no-repeat,
    repeating-linear-gradient(0deg, rgba(30, 43, 35, .45) 0 2px, transparent 2px 13px) right 12% top 32% / 42% 50% no-repeat,
    radial-gradient(circle at 87% 20%, var(--petal) 0 5px, rgba(28, 92, 63, .85) 5px 6.5px, transparent 8px),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(30, 43, 35, .022) 7px 8px);
  background-color: var(--paper);
}
/* 历史：远山、日轮与地平线 */
.wk.skin-reading .wk-cat[data-cat="lishi"] .wk-cat-l li::before {
  background:
    radial-gradient(circle at 74% 30%, transparent 0 11px, var(--gilt) 11px 13px, transparent 14px),
    conic-gradient(from -28deg at 28% 82%, rgba(28, 92, 63, .30) 0 56deg, transparent 56deg),
    conic-gradient(from -25deg at 50% 88%, rgba(28, 92, 63, .18) 0 50deg, transparent 50deg),
    linear-gradient(rgba(30, 43, 35, .4), rgba(30, 43, 35, .4)) center bottom 18px / 72% 1.5px no-repeat,
    radial-gradient(circle at 12% 24%, var(--petal) 0 5px, rgba(28, 92, 63, .85) 5px 6.5px, transparent 8px),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(30, 43, 35, .022) 7px 8px);
  background-color: var(--paper);
}
/* 情感：对坐的两盏茶 */
.wk.skin-reading .wk-cat[data-cat="qinggan"] .wk-cat-l li::before {
  background:
    radial-gradient(circle at 38% 58%, transparent 0 13px, rgba(28, 92, 63, .55) 13px 15px, transparent 16px),
    radial-gradient(circle at 62% 58%, transparent 0 13px, var(--gilt) 13px 15px, transparent 16px),
    linear-gradient(rgba(30, 43, 35, .4), rgba(30, 43, 35, .4)) center bottom 20px / 56% 1.5px no-repeat,
    radial-gradient(circle at 50% 22%, var(--petal) 0 5px, rgba(28, 92, 63, .85) 5px 6.5px, transparent 8px),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(30, 43, 35, .022) 7px 8px);
  background-color: var(--paper);
}
/* 深度：廊柱与梁 */
.wk.skin-reading .wk-cat[data-cat="shendu"] .wk-cat-l li::before {
  background:
    repeating-linear-gradient(90deg, rgba(28, 92, 63, .45) 0 2px, transparent 2px 24px) center bottom 22px / 56% 40% no-repeat,
    linear-gradient(rgba(28, 92, 63, .55), rgba(28, 92, 63, .55)) center top 28px / 64% 2px no-repeat,
    linear-gradient(rgba(30, 43, 35, .4), rgba(30, 43, 35, .4)) center bottom 20px / 72% 1.5px no-repeat,
    radial-gradient(circle at 85% 26%, var(--petal) 0 5px, rgba(28, 92, 63, .85) 5px 6.5px, transparent 8px),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(30, 43, 35, .022) 7px 8px);
  background-color: var(--paper);
}
.wk.skin-reading .wk-cat-l li a {
  display: block; flex: 1;
  padding: 16px 20px 12px;
  font-size: clamp(18px, 2.1vw, 21px); line-height: 1.62; font-weight: 900;
  transition: color .2s;
}
.wk.skin-reading .wk-cat-l li a::before { content: "\300A"; }
.wk.skin-reading .wk-cat-l li a::after { content: "\300B"; }
.wk.skin-reading .wk-cat-l li:hover a {
  color: var(--green-deep);
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 7px; text-decoration-color: var(--gilt);
}
.wk.skin-reading .wk-cat-d {
  display: block; margin: 0 20px; padding: 10px 2px 16px;
  border-top: 1px dashed var(--hairline);
  font-family: var(--sans); font-size: 12px; letter-spacing: .1em; color: var(--gilt-ink);
}
.wk.skin-reading .wk-cat-d::before { content: "收录 \00B7 "; }

/* ---------- 贰 不明白播客 as a stream (owner, 2026-08-23) ----------
   Second ruling, verbatim: "i'm not asking you to replicate the design from
   scratch, i'm asking you to move the section (with players on the right)".
   The renderer relocates the REAL stream — same .wk-stream/.wk-list/.wk-e/
   .wk-pv markup, players and all — under the shelf heading, so every rule
   that dresses the top stream dresses this one for free. Only VISIBILITY
   lives here, because the stream's own show/hide is welded to the top tab
   and pager radio ids. Static for pages 1..9 = CAT_STREAM_PAGES; the
   renderer clamps data-p to the same bound so no row can outrun its rule. */
.wk.skin-reading .wk-catstream {
  /* The rail sections' intrinsic width (ten fixed cards, ~3200px) sets
     .wk-cats' implicit column, and every item stretches to it — harmless
     for a rail that scrolls, fatal for a grid whose fr units then resolve
     against 3200px and push the pane off-screen. Cap the BOX, not the
     column: same clamp .wk-cats itself uses. */
  max-width: min(100vw - 48px, 1100px);
  min-width: 0;
}
.wk.skin-reading .wk-catstream .wk-stream {
  /* The top stream centres itself inside .wk-body; inside the shelf the
     section is already the measure. */
  width: 100%;
  padding-block: 0 clamp(8px, 1vw, 14px);
}
.wk.skin-reading .wk-catstream .wk-cat-h::after {
  /* No rail, no 横向翻阅 hint: the divider line alone. */
  content: "";
  height: 1px;
  min-width: 40px;
  margin-top: 0;
  background: var(--hairline);
}
.wk.skin-reading .wk-catstream #wk-cs-shendu-1:checked ~ .wk-list .wk-e[data-p="1"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-2:checked ~ .wk-list .wk-e[data-p="2"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-3:checked ~ .wk-list .wk-e[data-p="3"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-4:checked ~ .wk-list .wk-e[data-p="4"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-5:checked ~ .wk-list .wk-e[data-p="5"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-6:checked ~ .wk-list .wk-e[data-p="6"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-7:checked ~ .wk-list .wk-e[data-p="7"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-8:checked ~ .wk-list .wk-e[data-p="8"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-9:checked ~ .wk-list .wk-e[data-p="9"] {
  display: grid;
}
.wk.skin-reading .wk-catstream .wk-pg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 2px;
  justify-content: center;
  margin-top: clamp(20px, 3vw, 30px);
}
.wk.skin-reading .wk-catstream #wk-cs-shendu-1:checked ~ .wk-pg .wk-pn[for="wk-cs-shendu-1"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-2:checked ~ .wk-pg .wk-pn[for="wk-cs-shendu-2"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-3:checked ~ .wk-pg .wk-pn[for="wk-cs-shendu-3"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-4:checked ~ .wk-pg .wk-pn[for="wk-cs-shendu-4"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-5:checked ~ .wk-pg .wk-pn[for="wk-cs-shendu-5"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-6:checked ~ .wk-pg .wk-pn[for="wk-cs-shendu-6"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-7:checked ~ .wk-pg .wk-pn[for="wk-cs-shendu-7"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-8:checked ~ .wk-pg .wk-pn[for="wk-cs-shendu-8"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-9:checked ~ .wk-pg .wk-pn[for="wk-cs-shendu-9"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--green);
}


/* ==========================================================================
   翻页扩容 — pages 25..36 (2026-08-23, the 不明白播客 transcript import).
   The block above was generated to twenty-four pages when the library held
   230 entries; the transcripts bring it past that. APPEND-ONLY on purpose:
   regenerating the original block risks a live selector, appending cannot.
   Raised in lockstep: WenkuArchiveRenderer::MAX_PAGES = 36,
   WenkuRepository::MAX_ENTRIES = 500. The shelf's own pager
   (wk-cs-shendu, pages 10..24 below) is bounded by CAT_STREAM_PAGES = 24.
   ========================================================================== */
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-25:checked ~ .wk-list .wk-e[data-pa="25"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-26:checked ~ .wk-list .wk-e[data-pa="26"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-27:checked ~ .wk-list .wk-e[data-pa="27"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-28:checked ~ .wk-list .wk-e[data-pa="28"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-29:checked ~ .wk-list .wk-e[data-pa="29"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-30:checked ~ .wk-list .wk-e[data-pa="30"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-31:checked ~ .wk-list .wk-e[data-pa="31"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-32:checked ~ .wk-list .wk-e[data-pa="32"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-33:checked ~ .wk-list .wk-e[data-pa="33"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-34:checked ~ .wk-list .wk-e[data-pa="34"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-35:checked ~ .wk-list .wk-e[data-pa="35"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-36:checked ~ .wk-list .wk-e[data-pa="36"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-25:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="25"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-26:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="26"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-27:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="27"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-28:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="28"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-29:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="29"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-30:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="30"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-31:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="31"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-32:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="32"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-33:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="33"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-34:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="34"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-35:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="35"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-36:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="36"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-25:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="25"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-26:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="26"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-27:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="27"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-28:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="28"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-29:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="29"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-30:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="30"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-31:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="31"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-32:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="32"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-33:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="33"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-34:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="34"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-35:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="35"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-36:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="36"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-25:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="25"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-26:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="26"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-27:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="27"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-28:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="28"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-29:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="29"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-30:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="30"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-31:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="31"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-32:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="32"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-33:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="33"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-34:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="34"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-35:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="35"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-36:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="36"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-25:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="25"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-26:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="26"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-27:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="27"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-28:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="28"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-29:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="29"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-30:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="30"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-31:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="31"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-32:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="32"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-33:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="33"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-34:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="34"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-35:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="35"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-36:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="36"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-25:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="25"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-26:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="26"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-27:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="27"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-28:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="28"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-29:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="29"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-30:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="30"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-31:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="31"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-32:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="32"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-33:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="33"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-34:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="34"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-35:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="35"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-36:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="36"] {
  display: grid;
}
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-25:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-25"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-26:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-26"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-27:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-27"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-28:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-28"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-29:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-29"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-30:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-30"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-31:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-31"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-32:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-32"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-33:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-33"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-34:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-34"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-35:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-35"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-36:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-36"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-25:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-25"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-26:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-26"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-27:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-27"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-28:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-28"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-29:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-29"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-30:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-30"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-31:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-31"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-32:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-32"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-33:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-33"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-34:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-34"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-35:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-35"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-36:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-36"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-25:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-25"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-26:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-26"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-27:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-27"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-28:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-28"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-29:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-29"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-30:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-30"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-31:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-31"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-32:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-32"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-33:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-33"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-34:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-34"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-35:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-35"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-36:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-36"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-25:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-25"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-26:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-26"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-27:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-27"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-28:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-28"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-29:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-29"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-30:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-30"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-31:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-31"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-32:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-32"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-33:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-33"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-34:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-34"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-35:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-35"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-36:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-36"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-25:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-25"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-26:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-26"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-27:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-27"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-28:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-28"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-29:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-29"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-30:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-30"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-31:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-31"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-32:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-32"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-33:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-33"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-34:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-34"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-35:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-35"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-36:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-36"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-25:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-25"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-26:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-26"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-27:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-27"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-28:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-28"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-29:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-29"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-30:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-30"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-31:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-31"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-32:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-32"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-33:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-33"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-34:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-34"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-35:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-35"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-36:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-36"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--green);
}
.wk.skin-reading .wk-catstream #wk-cs-shendu-10:checked ~ .wk-list .wk-e[data-p="10"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-11:checked ~ .wk-list .wk-e[data-p="11"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-12:checked ~ .wk-list .wk-e[data-p="12"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-13:checked ~ .wk-list .wk-e[data-p="13"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-14:checked ~ .wk-list .wk-e[data-p="14"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-15:checked ~ .wk-list .wk-e[data-p="15"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-16:checked ~ .wk-list .wk-e[data-p="16"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-17:checked ~ .wk-list .wk-e[data-p="17"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-18:checked ~ .wk-list .wk-e[data-p="18"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-19:checked ~ .wk-list .wk-e[data-p="19"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-20:checked ~ .wk-list .wk-e[data-p="20"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-21:checked ~ .wk-list .wk-e[data-p="21"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-22:checked ~ .wk-list .wk-e[data-p="22"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-23:checked ~ .wk-list .wk-e[data-p="23"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-24:checked ~ .wk-list .wk-e[data-p="24"] {
  display: grid;
}
.wk.skin-reading .wk-catstream #wk-cs-shendu-10:checked ~ .wk-pg .wk-pn[for="wk-cs-shendu-10"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-11:checked ~ .wk-pg .wk-pn[for="wk-cs-shendu-11"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-12:checked ~ .wk-pg .wk-pn[for="wk-cs-shendu-12"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-13:checked ~ .wk-pg .wk-pn[for="wk-cs-shendu-13"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-14:checked ~ .wk-pg .wk-pn[for="wk-cs-shendu-14"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-15:checked ~ .wk-pg .wk-pn[for="wk-cs-shendu-15"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-16:checked ~ .wk-pg .wk-pn[for="wk-cs-shendu-16"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-17:checked ~ .wk-pg .wk-pn[for="wk-cs-shendu-17"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-18:checked ~ .wk-pg .wk-pn[for="wk-cs-shendu-18"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-19:checked ~ .wk-pg .wk-pn[for="wk-cs-shendu-19"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-20:checked ~ .wk-pg .wk-pn[for="wk-cs-shendu-20"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-21:checked ~ .wk-pg .wk-pn[for="wk-cs-shendu-21"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-22:checked ~ .wk-pg .wk-pn[for="wk-cs-shendu-22"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-23:checked ~ .wk-pg .wk-pn[for="wk-cs-shendu-23"],
.wk.skin-reading .wk-catstream #wk-cs-shendu-24:checked ~ .wk-pg .wk-pn[for="wk-cs-shendu-24"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--green);
}

/* ---------- 视频门面 — click-to-load (owner, 2026-08-23) ----------
   "no loading of the video unless clicked." The facade is the LOCAL cover
   with a play badge; the iframe is src-set but display:none AND
   loading="lazy" — a lazy iframe in a hidden box fetches NOTHING, so
   YouTube first hears from the reader at the click. The checkbox is the
   same scriptless reveal as every control on this page. */
.wk .wk-vx { position: absolute; opacity: 0; pointer-events: none; }
.wk.skin-reading .wk-vid {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: 12px;
  background: var(--paper-deep);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
.wk.skin-reading .wk-vid-f { display: block; width: 100%; height: 100%; cursor: pointer; }
.wk.skin-reading .wk-vid-f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk.skin-reading .wk-vid-play {
  position: absolute; inset: 0; margin: auto;
  width: 64px; height: 44px;
  background: rgb(20 25 20 / 78%);
  border-radius: 10px;
}
.wk.skin-reading .wk-vid-play::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0;
  border: 12px solid transparent; border-left: 20px solid #fff;
  transform: translateX(8px);
}
.wk.skin-reading .wk-vid-f:hover .wk-vid-play { background: var(--green-deep); }
.wk.skin-reading .wk-vid-i { display: none; }
.wk.skin-reading .wk-vx:checked ~ .wk-vid-f { display: none; }
.wk.skin-reading .wk-vx:checked ~ .wk-vid-i {
  display: block; position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}

/* ---------- 关于文库（colophon） ---------- */
.wk.skin-reading .wk-side {
  width: min(100% - 48px, 1100px); margin-inline: auto;
  display: flex; justify-content: center;
  padding-bottom: clamp(46px, 7vw, 84px);
}
.wk.skin-reading .wk-about {
  width: 100%; max-width: 760px;
  background: var(--petal); border: 1px solid var(--hairline);
  outline: 1px solid var(--hairline); outline-offset: -8px;
  box-shadow: var(--shadow);
  padding: clamp(26px, 4vw, 44px) clamp(22px, 4vw, 52px);
}
.wk.skin-reading .wk-about h3 {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-size: clamp(18px, 2.2vw, 22px); font-weight: 900; letter-spacing: .3em;
  margin-bottom: 14px;
}
.wk.skin-reading .wk-about h3::before,
.wk.skin-reading .wk-about h3::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.wk.skin-reading .wk-about p {
  font-size: 15px; line-height: 2.05; color: var(--ink-soft);
  text-align: justify;
}
.wk.skin-reading .wk-about strong { color: var(--green-deep); }

/* ---------- .wk-art duotone painting (superset contract; rail hidden here,
   but any .wk-art rendered by this skin gets per-category duotone) -------- */
.wk.skin-reading .wk-art {
  display: block; aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(circle at var(--fx, 78%) var(--fy, 26%), var(--petal) 0 6px, var(--a1, rgba(28, 92, 63, .8)) 6px 7.5px, transparent 9px),
    radial-gradient(circle at calc(100% - var(--fx, 78%)) 62%, transparent 0 12px, var(--a2, rgba(176, 141, 87, .8)) 12px 14px, transparent 15px),
    repeating-linear-gradient(var(--rot, 0deg), var(--a1, rgba(28, 92, 63, .5)) 0 2px, transparent 2px 14px) center / 64% 52% no-repeat,
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(30, 43, 35, .022) 7px 8px);
  background-color: var(--paper);
}
.wk.skin-reading .wk-art-pinglun { --a1: rgba(28, 92, 63, .5);  --a2: rgba(176, 141, 87, .75); }
.wk.skin-reading .wk-art-lishi   { --a1: rgba(77, 90, 80, .55); --a2: rgba(176, 141, 87, .9); }
.wk.skin-reading .wk-art-qinggan { --a1: rgba(28, 92, 63, .35); --a2: rgba(176, 141, 87, .6); }
.wk.skin-reading .wk-art-shendu  { --a1: rgba(18, 63, 43, .6);  --a2: rgba(125, 98, 52, .8); }
.wk.skin-reading .wk-art-v1 { --rot: 0deg; }
.wk.skin-reading .wk-art-v2 { --rot: 90deg; --fx: 22%; }
.wk.skin-reading .wk-art-v3 { --rot: 45deg; --fy: 68%; }
.wk.skin-reading .wk-art-v4 { --rot: -45deg; --fx: 30%; --fy: 62%; }

/* ---------- 响应式 ---------- */

@media (prefers-reduced-motion: reduce) {
  .wk.skin-reading, .wk.skin-reading * { transition: none !important; }
}

/* Responsive tiers, max-width DESCENDING so the narrowest is last and
   therefore wins. Order is load-bearing; see tools/order-tiers.py. Nothing
   may be appended below this block. */

.wk.skin-reading .wk-u { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Responsive tiers, max-width DESCENDING so the narrowest is last and
   therefore wins. Order is load-bearing; see tools/order-tiers.py. Nothing
   may be appended below this block. */

/* ==========================================================================
   /wenku/ 目录视图 — ten titles a page (owner, 2026-08-22).

   "each page shows ten titles … each number holds ten, so currently the
   entire site has 230 ish articles, and 23 would be the max."

   1100px, the homepage's own measure. It was 1180 while a four-across card
   shelf sat above; with the shelf gone to the homepage there is nothing here
   that needs the extra eighty, and the owner asked for the two pages to line
   up: "let's still do the page width to be 1100px (same as mlh skin)".

   TWO CLICKS, DELIBERATELY DISTINCT. .wk-pick covers the row above the
   headline link, so a plain click anywhere on the line loads the preview and
   the pane's own title link is what opens the article.
   ========================================================================== */
.wk.skin-reading .wk-x,
.wk.skin-reading .wk-pgr { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.wk.skin-reading .wk-stream {
  position: relative;
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
  padding-bottom: clamp(40px, 6vw, 72px);
  display: block;
  /* The gutter the preview pane is absolutely positioned into. Reserved with
     padding rather than a grid column, because a grid column has to be as tall
     as its row and the pane is taller than any one line. */
  padding-right: 372px;
}
.wk.skin-reading .wk-list { display: block; min-width: 0; }

/* ---- the list: a contents page, one hairline between lines ---- */
.wk.skin-reading .wk-e {
  /* THE ROW IS NOT POSITIONED, and that is load-bearing. The preview pane is
     absolutely positioned into the stream's right gutter; the moment the row
     becomes a containing block the pane anchors to the ROW instead and lands
     on top of the titles — which is exactly what happened first. Everything
     the row used position:relative for is done another way below: the click
     target is a grid item that spans every column, and the active marker is an
     inset shadow rather than an absolutely positioned pseudo-element.

     FOUR TRACKS, and the fourth is the fix for the hole the owner marked in
     red. Track 2 used to be 1fr, so the title column ate all the leftover
     width and the tab chip was pinned to the far edge — a band of blank paper
     across every row whose title was short. minmax(0, max-content) lets the
     title hug when it is short and still shrink-and-ellipsis when it is long,
     and the empty 1fr at the end takes the slack the chip used to be pushed
     across. */
  display: grid;
  grid-template-columns: max-content minmax(0, max-content) max-content 1fr;
  column-gap: 14px;
  align-items: baseline;
  padding: 7px 2px;
  border-bottom: 1px solid var(--hairline);
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.wk.skin-reading .wk-e:first-of-type { border-top: 1px solid var(--hairline); }
.wk.skin-reading .wk-e-c,
.wk.skin-reading .wk-e-x,
.wk.skin-reading .wk-more,
.wk.skin-reading .wk-e-m .wk-src { display: none; }
.wk.skin-reading .wk-e-d {
  grid-column: 1; grid-row: 1;
  font-family: var(--sans); font-size: 11px;
  color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wk.skin-reading .wk-e-t {
  grid-column: 2; grid-row: 1; z-index: 1; min-width: 0;
  margin: 0; font-size: 16px; font-weight: 500; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk.skin-reading .wk-e-t a { color: inherit; text-decoration: none; }
/* THE ROW SELECTS; THE PANE READS. .wk-pick is a GRID ITEM spanning every
   column — not an absolutely positioned overlay — so it covers the whole line
   without making the row a containing block. z-index above the headline, so a
   plain click anywhere on the line loads the preview; a contents page with a
   preview you can only drive from the date column is not one. The link
   underneath stays a real <a>: it is what a crawler follows, and a keyboard
   user still tabs to it and presses Enter, which the covering label does not
   intercept. Below 900px the pane is gone and .wk-pick with it, so a touch
   reader gets the plain link back. */
.wk.skin-reading .wk-pick {
  grid-column: 1 / -1;
  grid-row: 1;
  /* align-self: stretch OR THE TARGET IS A HAIRLINE. The row sets
     align-items: baseline, which applies to every grid item — including this
     one, whose only content is a visually-hidden span. Baseline-aligned, it
     collapsed to a couple of pixels on the text baseline, so a click on a
     title fell straight through to the link underneath and the preview never
     changed. The owner reported exactly that: "if you click a title, the
     right side player does not change." */
  align-self: stretch;
  z-index: 2;
  cursor: pointer;
}
.wk.skin-reading .wk-e-t a:hover { color: var(--green); }
.wk.skin-reading .wk-e-m { grid-column: 3; grid-row: 1; margin: 0; }
.wk.skin-reading .wk-e-m .wk-chip {
  font-family: var(--sans); font-size: 10px; letter-spacing: .08em;
  color: var(--ink-soft); background: none; padding: 0; border: 0;
}
.wk.skin-reading .wk-e:hover { background: var(--petal); }

/* ---- the pane: one rule, and the only thing that loads a picture ----

   THE PANE IS A SIBLING OF ITS OWN RADIO, both inside the row. That is what
   replaced one hundred and eighty generated selectors — a pane-per-position
   rule, a row-highlight rule and a marker rule for every one of sixty slots —
   with the four below, which do not care how long the library grows. It also
   removes the reason the old markup needed a MAX_ENTRIES-shaped stylesheet.

   Absolutely positioned into .wk-stream's reserved right padding, so it is
   outside the list's flow and cannot stretch a row. With ten rows to a page
   the list is about four hundred pixels tall, which is why the pane no longer
   needs to be sticky: it is never scrolled away from. */
.wk.skin-reading .wk-pv { display: none; }
.wk.skin-reading .wk-x:checked ~ .wk-pv {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 336px;
}
/* An INSET SHADOW, not a positioned pseudo-element: the marker has to draw
   itself without turning the row into a containing block for the pane. */
.wk.skin-reading .wk-e:has(.wk-x:checked) {
  background: var(--petal);
  box-shadow: inset 2px 0 0 var(--green);
}
.wk.skin-reading .wk-pv-c {
  display: block; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 12px;
  background: var(--paper-deep); border-bottom: 1px solid var(--hairline);
}
.wk.skin-reading .wk-pv-c img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk.skin-reading .wk-pv-k {
  margin: 0 0 6px; font-family: var(--sans); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gilt);
}
.wk.skin-reading .wk-pv-t { margin: 0 0 8px; font-size: 21px; line-height: 1.38; font-weight: 500; }
.wk.skin-reading .wk-pv-t a { color: inherit; text-decoration: none; }
.wk.skin-reading .wk-pv-t a:hover { color: var(--green); }
.wk.skin-reading .wk-pv-m {
  margin: 0 0 10px; display: flex; gap: 12px; font-family: var(--sans);
  font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.wk.skin-reading .wk-pv-x {
  margin: 0 0 12px; font-size: 13.5px; line-height: 1.85; color: var(--ink-soft);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden;
}
.wk.skin-reading .wk-pv-go {
  font-family: var(--sans); font-size: 12px; color: var(--green); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}



/* ==========================================================================
   分卷目录 — the 阅读室 landing (owner ruling, 2026-08-23)

   THE PROBLEM THIS SOLVES was structural, not cosmetic. The landing used to
   open with every article in one stream, and the owner's objection names why
   that cannot be dressed into working: "many articles across different
   sections coming from different sources are not compatible in terms of the
   way of presentation". 不明白播客 is a podcast with video; 纽约占星学院 is one
   photograph per piece (26 of its 27 entries carry a cover — that is the
   source's own habit, not our luck); 茉莉花评论 is the site's own writing with
   no photograph yet and maybe one later. One row design serves none of them.

   So: 全部 becomes a TABLE OF CONTENTS, and each section keeps its own
   presentation behind its own tab. The tab radios already existed and already
   filtered the stream — this block only decides what each state LOOKS like,
   which is why the whole redesign needs no JavaScript and no new routing.

   .wk-cats (the per-category shelves, and with them cat_stream) is hidden in
   this skin from here on: the contents page says what the shelves used to say,
   and the per-tab stream shows what they used to show — with the same player
   panes, because it is the same .wk-stream markup. Two views of one library
   was the duplication; this removes it rather than styling it twice.
   ========================================================================== */

/* The contents page is part of the SUPERSET DOM, so every skin receives it and
   only this one shows it. */
.wk .wk-index { display: none; }
.wk.skin-reading .wk-cats { display: none; }

.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-index { display: block; }
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream,
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-rail { display: none; }

/* 全部 is called 目录 HERE ONLY, because here it is a contents page rather
   than a stream of everything. The renderer wraps the tab's text in .wk-tl for
   exactly this: no other skin's label changes. */
.wk.skin-reading .wk-tab[data-cat="all"] .wk-tl { display: none; }
.wk.skin-reading .wk-tab[data-cat="all"]::before { content: "目录"; }

.wk.skin-reading .wk-index {
  width: min(100% - 48px, 1100px); margin-inline: auto;
  padding-block: clamp(26px, 4vw, 44px) clamp(40px, 6vw, 68px);
}
.wk.skin-reading .wk-vols { counter-reset: vol; list-style: none; margin: 0; padding: 0; }
.wk.skin-reading .wk-vol { border-top: 1px solid color-mix(in srgb, var(--gilt) 30%, var(--hairline)); }
.wk.skin-reading .wk-vol:first-child { border-top: 3px solid var(--ink); }
.wk.skin-reading .wk-vol:last-child { border-bottom: 1px solid var(--hairline); }

/* The header is the whole click target for the section. A <label> cannot hold
   the title links below it (nested interactive), so they are siblings. */
.wk.skin-reading .wk-vol-h {
  display: grid;
  grid-template-columns: clamp(44px, 6vw, 66px) minmax(0, 1fr) max-content;
  align-items: baseline; gap: 0 clamp(12px, 2vw, 22px);
  padding: clamp(20px, 3vw, 30px) 6px clamp(12px, 1.6vw, 16px);
  cursor: pointer; transition: background-color .18s ease;
}
.wk.skin-reading .wk-vol-h:hover { background: var(--petal); }
.wk.skin-reading .wk-vol-h::before {
  counter-increment: vol;
  content: counter(vol, simp-chinese-formal);
  grid-row: 1 / 3;
  font-size: clamp(26px, 3.6vw, 40px); font-weight: 900; line-height: .95;
  color: transparent; -webkit-text-stroke: 1.2px var(--green);
}
.wk.skin-reading .wk-vol-t {
  grid-column: 2; grid-row: 1;
  font-size: clamp(19px, 2.5vw, 26px); font-weight: 900; letter-spacing: .01em;
}
.wk.skin-reading .wk-vol-h:hover .wk-vol-t { color: var(--green-deep); }
.wk.skin-reading .wk-vol-w {
  grid-column: 2; grid-row: 2;
  font-family: var(--sans); font-size: 11.5px; letter-spacing: .06em;
  color: var(--gilt); margin-top: 4px;
}
.wk.skin-reading .wk-vol-c {
  grid-column: 3; grid-row: 1;
  font-family: var(--sans); font-size: 12px; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.wk.skin-reading .wk-vol-c::after { content: " 篇"; }

/* The three newest titles, hanging in the same measure as the section name so
   the numeral column reads as a margin down the whole page. */
.wk.skin-reading .wk-vol-l {
  list-style: none; margin: 0 0 clamp(18px, 2.6vw, 26px);
  padding-left: calc(clamp(44px, 6vw, 66px) + clamp(12px, 2vw, 22px) + 6px);
}
.wk.skin-reading .wk-vol-l li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 7px 6px 7px 0;
}
.wk.skin-reading .wk-vol-l a {
  min-width: 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-soft);
  text-decoration: none; transition: color .18s ease;
}
.wk.skin-reading .wk-vol-l a:hover { color: var(--green); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--gilt); }
.wk.skin-reading .wk-vol-l time {
  margin-left: auto; flex: none;
  font-family: var(--sans); font-size: 10.5px; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ---- 評論型 · 茉莉花评论 -------------------------------------------------
   Type-led on purpose: the section has no photographs today and may have some
   later, so the PHOTO IS A PLATE ABOVE THE TITLE and its absence costs the
   layout nothing. Nothing here depends on a cover existing. */
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream { padding-right: 0; }
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-list { max-width: 70ch; }
/* NEVER SET `display` ON A ROW HERE. Row VISIBILITY is what the tab and pager
   selectors control — they set `display: grid` on exactly the rows belonging to
   the open tab's open page, and everything else stays `display: none`. A
   pattern rule that sets `display: block` on .wk-e outranks both (it carries an
   id) and un-hides the entire library: measured 482 rows on screen instead of
   ten, which is the very fault this redesign exists to remove. So a pattern
   changes the row's LAYOUT — its tracks and where its children sit — and never
   whether the row is shown. */
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-list .wk-e {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  padding: clamp(24px, 3.4vw, 38px) 0; border-bottom: 1px solid var(--hairline);
}
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-list .wk-e > * {
  grid-column: 1; grid-row: auto;
}
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-e:hover { background: none; }
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-e-c {
  display: block; aspect-ratio: 16 / 7; overflow: hidden;
  border: 1px solid var(--hairline); margin-bottom: 18px; background: var(--paper-deep);
}
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-e-c img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-e-t {
  font-size: clamp(21px, 2.7vw, 28px); font-weight: 900; line-height: 1.44;
  white-space: normal; margin: 0 0 10px;
}
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-e-x {
  display: block; font-size: 15.5px; line-height: 1.95; color: var(--ink-soft);
  margin: 0 0 12px; max-width: 62ch;
}
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-e-x::first-letter {
  float: none; font-size: inherit; background: none; color: inherit;
  padding: 0; margin: 0; font-weight: inherit;
}
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-e-d { font-size: 11px; }
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-more { display: inline-block;
  font-family: var(--sans); font-size: 12px; color: var(--green);
  border-bottom: 1px solid currentColor; text-decoration: none; }
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-pick,
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-x:checked ~ .wk-pv { display: none; }

/* ---- 圖版型 · 纽约占星学院 ------------------------------------------------
   One photograph per piece, every piece — so a fixed 4:5 plate in a three-up
   grid is safe here in a way it would not be anywhere else on the site. Title
   under the plate, nothing else: the pictures are the index. */
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream { padding-right: 0; }
/* TWO-up, not three, and a WIDE plate — both measured rather than assumed.
   All 26 covers in this section are 768x326 (ratio 2.36; median 2.35 across
   the set), because the source heads each piece with a banner graphic rather
   than a photograph. The first draft of this block used a 4:5 portrait plate
   and would have cropped a narrow vertical slice out of every one of them.
   Matching the source's own ratio means nothing is cropped, and two columns
   keep the plate large enough to read what is printed inside it. */
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 3.6vw, 40px) clamp(18px, 2.4vw, 28px);
}
/* Layout only — see the note above pinglun for why `display` is untouchable. */
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-list .wk-e {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  padding: 0; border: 0;
}
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-list .wk-e > * {
  grid-column: 1; grid-row: auto;
}
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-e:first-of-type { border-top: 0; }
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-e:hover { background: none; }
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-e-c {
  display: block; aspect-ratio: 2.35 / 1; overflow: hidden;
  border: 1px solid var(--hairline); background: var(--paper-deep);
}
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-e-c img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-e:hover .wk-e-c img { transform: scale(1.035); }
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-e-t {
  font-size: 16px; font-weight: 600; line-height: 1.62; white-space: normal;
  margin: 12px 0 4px;
}
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-e-d {
  font-size: 10.5px; color: var(--ink-faint);
}
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-e-m,
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-pick,
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-x:checked ~ .wk-pv { display: none; }

/* ---- 文献型 · 历史 -------------------------------------------------------
   Reprints from elsewhere. The one thing a reader needs that the podcast rows
   do not show is WHOSE reporting it is, so the credit comes back. */
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream { padding-right: 0; }
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-list { max-width: 74ch; }
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-e-t { white-space: normal; font-size: 17px; }
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-e-m .wk-src { display: inline; }
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-pick,
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-x:checked ~ .wk-pv { display: none; }



/* 筹备中 volumes — announced, not yet filled (owner, 2026-08-23). No label and
   no radio: there is nothing to switch to, and sending a reader to an empty
   section is worse than telling them it is coming. So the header is a plain
   div, the row does not react to the cursor, and the count column carries the
   word instead of a number. */
.wk.skin-reading .wk-vol.is-soon .wk-vol-h { cursor: default; }
.wk.skin-reading .wk-vol.is-soon .wk-vol-h:hover { background: none; }
.wk.skin-reading .wk-vol.is-soon .wk-vol-t { color: var(--ink-soft); }
.wk.skin-reading .wk-vol.is-soon .wk-vol-h::before { -webkit-text-stroke-color: var(--rule-strong); }
.wk.skin-reading .wk-vol.is-soon .wk-vol-c {
  font-size: 11px; letter-spacing: .1em; color: var(--gilt);
}
.wk.skin-reading .wk-vol.is-soon .wk-vol-c::after { content: none; }


/* 首页 as a volume row (owner, 2026-08-23). Same three columns as a 卷 so the
   contents page has one shape throughout — but no numeral: the CSS counter
   only counts what the library holds, and a door is not a 卷. The tab strip's
   own copy of this link goes, so there is exactly one way back rather than
   two in different clothes. */
.wk.skin-reading .wk-home { display: none; }
.wk.skin-reading .wk-vol.is-home .wk-vol-h { text-decoration: none; }
.wk.skin-reading .wk-vol.is-home .wk-vol-h::before { content: none; }
.wk.skin-reading .wk-vol.is-home .wk-vol-t { color: var(--green); }
.wk.skin-reading .wk-vol.is-home .wk-vol-h:hover .wk-vol-t { color: var(--green-deep); }
.wk.skin-reading .wk-vol.is-home .wk-vol-c {
  font-size: 11px; letter-spacing: .1em; color: var(--gilt);
}
.wk.skin-reading .wk-vol.is-home .wk-vol-c::after { content: " →"; }

/* ==========================================================================
   分卷目录 AS A BOUND LEAF (owner, 2026-08-23: "please design this page to look
   like a book, using css and other animation techniques that are lightweight
   and not clogging slowering down speed.")

   Supersedes the plainer 目录 rules above — those stay as the fallback shape
   this dresses, so removing this block returns the page to a plain list rather
   than to nothing.

   WHAT MAKES IT READ AS A BOOK, in order of how much work each does:
     1. dotted LEADERS from each title to its count. This is the single most
        bookish device on the page and it costs one pseudo-element.
     2. a SPINE at the left — a gradient band, no image — with the volume
        numerals hanging in its margin like printed folios.
     3. PAGE THICKNESS at the outer edge: two stacked offsets in one
        box-shadow, so the leaf sits on a small block of paper.
     4. LAID PAPER: one repeating-linear-gradient at ~2% alpha. Invisible as
        texture, present as warmth.

   THE PERFORMANCE RULES I HELD TO, since the owner asked for lightweight:
     · animation touches ONLY opacity and transform — both composited, neither
       triggers layout or paint. No animated box-shadow, filter, or width.
     · the paper texture is a gradient, not an image: no request, no decode.
     · no JavaScript, no web font, no @import. About 2KB of CSS.
     · the entrance runs once, staggered by nth-child, and is disabled wholesale
       under prefers-reduced-motion.
   ========================================================================== */

.wk.skin-reading .wk-index {
  position: relative;
  width: min(100% - 48px, 1000px);
  margin-inline: auto;
  margin-block: clamp(18px, 3vw, 34px) clamp(40px, 6vw, 72px);
  padding: clamp(30px, 4vw, 52px) clamp(24px, 4vw, 54px) clamp(38px, 5vw, 62px)
           clamp(58px, 8vw, 104px);
  /* AN OLD VOLUME, NOT A NEW ONE (owner, 2026-08-23: "looks very new; please
     use an older volume that is a little worn down").
     Four things read as age, and none of them is an image:
       · the paper is WARMER — the base is mixed toward --gilt, because new
         stock is cool and old stock has yellowed;
       · FOXING: four small radial gradients at 3–5% alpha, placed off-grid so
         they never look like a pattern;
       · HANDLED EDGES: the margins darken slightly, which is where a book is
         held and where it soils first;
       · the corners are CUT UNEVENLY — one radius per corner — since a bumped
         board has no two corners alike.
     Still one paint: every layer is a static gradient on a single element, so
     age costs nothing at runtime. */
  background:
    /* foxing — small, few, deliberately asymmetric */
    radial-gradient(ellipse 34px 22px at 18% 24%, color-mix(in srgb, var(--gilt) 26%, transparent) 0, transparent 70%),
    radial-gradient(ellipse 26px 30px at 82% 61%, color-mix(in srgb, var(--gilt) 20%, transparent) 0, transparent 72%),
    radial-gradient(ellipse 44px 18px at 61% 88%, color-mix(in srgb, var(--gilt) 16%, transparent) 0, transparent 74%),
    radial-gradient(ellipse 20px 20px at 37% 52%, color-mix(in srgb, var(--gilt) 14%, transparent) 0, transparent 70%),
    /* handled edges: soiling that creeps in from the margins */
    linear-gradient(90deg, color-mix(in srgb, var(--gilt) 20%, transparent) 0, transparent 9%),
    linear-gradient(270deg, color-mix(in srgb, var(--gilt) 22%, transparent) 0, transparent 7%),
    linear-gradient(0deg, color-mix(in srgb, var(--gilt) 18%, transparent) 0, transparent 6%),
    /* laid lines */
    repeating-linear-gradient(
      180deg,
      transparent 0 33px,
      color-mix(in srgb, var(--ink) 3%, transparent) 33px 34px
    ),
    /* the spine: shading that falls away from the fold */
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--ink) 16%, transparent) 0,
      color-mix(in srgb, var(--ink) 6%, transparent) 12px,
      transparent 38px
    ),
    /* yellowed stock */
    color-mix(in srgb, var(--paper) 86%, var(--gilt) 14%);
  border: 1px solid color-mix(in srgb, var(--gilt) 38%, var(--hairline));
  border-left: 3px solid color-mix(in srgb, var(--green) 34%, var(--gilt) 30%);
  /* no two corners alike */
  border-radius: 2px 11px 5px 14px;
  /* page thickness: leaves that have yellowed unevenly, and a softer sit */
  box-shadow:
    3px 2px 0 -1px color-mix(in srgb, var(--paper) 92%, var(--gilt) 8%),
    3px 2px 0 0 color-mix(in srgb, var(--gilt) 30%, var(--hairline)),
    7px 6px 0 -1px color-mix(in srgb, var(--paper-deep) 88%, var(--gilt) 12%),
    7px 6px 0 0 color-mix(in srgb, var(--gilt) 42%, var(--rule-strong)),
    inset 0 0 30px -14px color-mix(in srgb, var(--gilt) 46%, transparent),
    0 22px 44px -30px rgb(38 30 18 / 40%);
}

/* the printed contents heading */
.wk.skin-reading .wk-index::before {
  content: "目 录";
  display: block;
  margin-bottom: clamp(18px, 2.6vw, 30px);
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--gilt) 52%, var(--hairline));
  font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 900;
  letter-spacing: .5em;
  text-indent: .5em;
  color: color-mix(in srgb, var(--ink) 86%, var(--gilt));
}

/* a turned corner at the foot of the leaf */
.wk.skin-reading .wk-index::after {
  content: "";
  position: absolute;
  right: -1px; bottom: -1px;
  width: 22px; height: 22px;
  background: linear-gradient(315deg, color-mix(in srgb, var(--paper-deep) 82%, var(--gilt)) 0 50%, transparent 50%);
  border-right: 1px solid color-mix(in srgb, var(--gilt) 34%, var(--hairline));
  border-bottom: 1px solid color-mix(in srgb, var(--gilt) 34%, var(--hairline));
  border-bottom-right-radius: 5px;
  pointer-events: none;
}

/* ---- entries ---- */
.wk.skin-reading .wk-vol { border-top: 1px solid color-mix(in srgb, var(--gilt) 30%, var(--hairline)); }
.wk.skin-reading .wk-vol:first-child { border-top: 0; }
.wk.skin-reading .wk-vol:last-child { border-bottom: 0; }

.wk.skin-reading .wk-vol-h {
  grid-template-columns:
    clamp(30px, 4vw, 44px)      /* folio, hanging in the spine margin */
    max-content                 /* the section name */
    minmax(18px, 1fr)           /* the leader */
    max-content;                /* the count */
  align-items: baseline;
  gap: 0 12px;
  padding: clamp(15px, 2vw, 21px) 4px clamp(11px, 1.5vw, 15px);
  transition: transform .22s cubic-bezier(.2, .7, 0, 1);
}
.wk.skin-reading .wk-vol-h:hover { background: none; transform: translateX(3px); }

.wk.skin-reading .wk-vol-h::before {
  grid-column: 1; grid-row: 1;
  margin-left: calc(clamp(58px, 8vw, 104px) * -0.62);
  font-size: clamp(19px, 2.4vw, 27px);
  line-height: 1;
  -webkit-text-stroke-width: 1px;
}

.wk.skin-reading .wk-vol-t {
  grid-column: 2; grid-row: 1;
  font-size: clamp(17px, 2.1vw, 22px);
  white-space: nowrap;
}

/* THE LEADER. A dotted rule sitting on the baseline between name and count —
   the device every printed contents page uses, and the reason this reads as a
   book rather than a styled list. */
.wk.skin-reading .wk-vol-h::after {
  content: "";
  grid-column: 3; grid-row: 1;
  align-self: baseline;
  height: 0;
  margin-bottom: .34em;
  border-bottom: 1.5px dotted color-mix(in srgb, var(--gilt) 58%, var(--rule-strong));
  transition: border-bottom-color .22s ease;
}
.wk.skin-reading .wk-vol-h:hover::after { border-bottom-color: var(--green); }

.wk.skin-reading .wk-vol-c { grid-column: 4; grid-row: 1; }
.wk.skin-reading .wk-vol-w { grid-column: 2 / -1; grid-row: 2; }

/* ---- the three newest, as sub-entries with their own leaders ---- */
.wk.skin-reading .wk-vol-l {
  padding-left: calc(clamp(30px, 4vw, 44px) + 12px);
  padding-bottom: clamp(10px, 1.6vw, 16px);
}
.wk.skin-reading .wk-vol-l li {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(14px, 1fr) max-content;
  align-items: baseline;
  gap: 0 10px;
  padding: 5px 4px 5px 0;
}
.wk.skin-reading .wk-vol-l a {
  grid-column: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13.5px;
}
.wk.skin-reading .wk-vol-l li::after {
  content: "";
  grid-column: 2;
  align-self: baseline;
  height: 0;
  margin-bottom: .3em;
  border-bottom: 1px dotted color-mix(in srgb, var(--gilt) 44%, var(--hairline));
}
.wk.skin-reading .wk-vol-l time { grid-column: 3; margin-left: 0; }

/* ---- the variants keep their meaning in the new dress ---- */
.wk.skin-reading .wk-vol.is-soon .wk-vol-h { transform: none; }
.wk.skin-reading .wk-vol.is-soon .wk-vol-h::after { border-bottom-style: dotted; opacity: .55; }
.wk.skin-reading .wk-vol.is-home .wk-vol-h::before { content: none; }
.wk.skin-reading .wk-vol.is-home .wk-vol-t { grid-column: 2; }

/* ---- the leaf settles: one pass, composited properties only ---- */
@keyframes wk-leaf-in {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-index .wk-vol {
  animation: wk-leaf-in .46s cubic-bezier(.2, .7, 0, 1) both;
}
.wk.skin-reading .wk-vol:nth-child(1) { animation-delay: .04s; }
.wk.skin-reading .wk-vol:nth-child(2) { animation-delay: .10s; }
.wk.skin-reading .wk-vol:nth-child(3) { animation-delay: .16s; }
.wk.skin-reading .wk-vol:nth-child(4) { animation-delay: .22s; }
.wk.skin-reading .wk-vol:nth-child(5) { animation-delay: .28s; }
.wk.skin-reading .wk-vol:nth-child(6) { animation-delay: .34s; }
.wk.skin-reading .wk-vol:nth-child(n+7) { animation-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  .wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-index .wk-vol { animation: none; }
  .wk.skin-reading .wk-vol-h,
  .wk.skin-reading .wk-vol-h::after { transition: none; }
  .wk.skin-reading .wk-vol-h:hover { transform: none; }
}

/* ==========================================================================
   目录 AS A SHELF OF SPINES — 丙 (owner, 2026-08-23, chosen from four)

   The volumes stand up. Each 卷 becomes a bound spine with its title set
   vertically; hovering lifts one off the shelf and tilts it, the way a hand
   pulls a book out; the lifted volume's three newest titles appear on the
   shelf below it.

   OVERRIDES the leaf/contents rules above rather than replacing them — the
   aged paper is still the backdrop, and deleting this block returns the
   printed contents page.

   TWO THINGS THIS HAD TO SOLVE that the mockup did not:
     · a spine is ~54px wide and .wk-vol-l holds three long headlines. The list
       is lifted OUT of the spine with position:absolute against .wk-vols, so
       it spans the shelf instead of being crushed into the board.
     · .wk-vol-h::after is the dotted LEADER from the contents design. A shelf
       has no leaders, so it is re-tasked as the lower gilt rule on the board.

   Animation stays transform/opacity only — the lift, the tilt and the
   entrance. No shadow, width or filter is transitioned, so nothing here
   triggers layout or repaint.
   ========================================================================== */

.wk.skin-reading .wk-index { padding-bottom: clamp(30px, 4vw, 46px); }

.wk.skin-reading .wk-vols {
  /* ONE TOKEN OWNS THE SHELF REGION. The board's width, the books' room and
     the open panel's left edge are three faces of the same line; when they
     were three separate clamps they drifted — the board ended at 300px while
     the books ran to 329px and the last spine sat UNDER the open panel.
     Stated in px/vw, never %: a percentage inside this token would resolve
     against the parent for padding but against .wk-vols for the panel's
     `left`, so the same expression would mean two different widths. */
  --wk-shelf: clamp(292px, 27vw, 372px);
  /* the spine's height IS the board's depth — one token, so a shorter book
     cannot end up floating above the shelf it is supposed to stand on. */
  --wk-spine: 232px;
  --wk-spine-home: 188px;

  position: relative;                 /* the pulled-out title panel hangs here */
  display: flex;
  align-items: flex-end;
  min-height: 300px;
  margin-top: clamp(12px, 2vw, 22px);
  /* GAP ZERO, ON PURPOSE. A flex gap is dead space: crossing it, no row is
     hovered, the panel closes and the colophon starts to come back — the
     flicker a close-delay would only paper over. The same distance as each
     row's own padding keeps the cloths visually apart while the hit areas
     touch, so hovering the next book is a single uninterrupted switch. */
  gap: 0;
  /* the right padding is the panel's half of the leaf: it keeps the books
     inside the shelf region and gives them shrink pressure if a volume is
     ever added, instead of letting them walk across the open page. */
  padding: 0 clamp(4px, 1vw, 14px);
  padding-right: calc(100% - var(--wk-shelf));
}

/* the board the books stand on */
.wk.skin-reading .wk-vols::after {
  content: "";
  position: absolute;
  /* the board ends just past the last book rather than running the full leaf */
  left: 0; width: var(--wk-shelf); top: var(--wk-spine);
  height: 7px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--gilt) 62%, var(--ink)) 0,
    color-mix(in srgb, var(--gilt) 34%, var(--ink)) 100%
  );
  border-radius: 1px;
  box-shadow: 0 6px 12px -6px color-mix(in srgb, var(--ink) 55%, transparent);
}

.wk.skin-reading .wk-vol {
  flex: 0 1 auto;                     /* shrinks inside the region, never past it */
  min-width: 0;
  padding-inline: clamp(3px, .35vw, 4.5px);   /* was the shelf's flex gap */
  /* EVERY ROW IS THE FULL DEPTH OF THE SHELF, whatever its book's height. The
     shorter volumes used to shorten the ROW, which left a dead band above them:
     sweeping across the top of the shelf, the hover fell into it and the panel
     switch stuttered again. The cloth is what gets shorter now (below), not the
     row, so the hit boxes tile the shelf without a gap at any height. */
  min-height: var(--wk-spine);
  border: 0;
  align-self: flex-start;
}
.wk.skin-reading .wk-vol:first-child,
.wk.skin-reading .wk-vol:last-child { border: 0; }
/* AND THEY OVERLAP BY A PIXEL. Abutting boxes are not enough: the spine width
   is 4.4vw and the padding .35vw, so at some viewport widths the two edges
   round to a 1px hole between rows — measured at 1600px — and a cursor that
   lands in it drops the hover for a frame. A 1px overlap cannot have a hole at
   any width. It costs 4px of leftward shift across five books and nothing
   visually: the overlap is in the transparent padding, not the cloth. */
.wk.skin-reading .wk-vol + .wk-vol { margin-left: -1px; }

/* ---- the spine ---- */
.wk.skin-reading .wk-vol-h {
  position: relative;
  display: flex;
  /* CENTRED ON THE BOARD (owner, 2026-08-23: "names of each volume should be
     middle aligned. currently, the names are each on the right side of the
     book"). writing-mode is vertical-rl here, so the flex CROSS axis runs
     right-to-left: align-items: flex-start meant the RIGHT edge of the spine,
     which is exactly where the names had drifted. `center` is the width of the
     cloth, not the start of it. justify-content still centres along the main
     axis, which is vertical in this writing mode. */
  align-items: center;
  justify-content: center;
  width: clamp(46px, 4.4vw, 58px);
  height: var(--wk-spine);
  min-width: 34px;
  padding: 18px 0 14px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  border-radius: 2px 5px 5px 2px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--green-deep) 86%, #000) 0,
    var(--green) 24%,
    color-mix(in srgb, var(--green) 78%, var(--gilt)) 100%
  );
  box-shadow:
    inset -3px 0 0 color-mix(in srgb, #000 24%, transparent),
    inset 3px 0 0 color-mix(in srgb, #000 16%, transparent),
    0 3px 6px -3px color-mix(in srgb, var(--ink) 70%, transparent);
  transform-origin: bottom center;
  transition: transform .3s cubic-bezier(.2, .7, 0, 1);
}
.wk.skin-reading .wk-vol:hover .wk-vol-h,
.wk.skin-reading .wk-vol:focus-within .wk-vol-h {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--green-deep) 86%, #000) 0,
    var(--green) 24%,
    color-mix(in srgb, var(--green) 78%, var(--gilt)) 100%
  );
  transform: translateY(-18px) rotate(-2deg);
}

/* gilt rules top and bottom, the way a cloth spine is stamped */
.wk.skin-reading .wk-vol-h::before {
  content: "";                        /* the folio has no place on a spine */
  counter-increment: vol;
  position: absolute;
  inset: 9px 7px auto 7px;
  width: auto; height: 1px;
  margin: 0;
  background: color-mix(in srgb, var(--gilt) 88%, transparent);
  -webkit-text-stroke: 0;
}
.wk.skin-reading .wk-vol-h::after {
  content: "";
  position: absolute;
  inset: auto 7px 9px 7px;
  width: auto; height: 1px;
  margin: 0;
  border: 0;
  background: color-mix(in srgb, var(--gilt) 88%, transparent);
  transition: none;
}

.wk.skin-reading .wk-vol-t {
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
  color: color-mix(in srgb, var(--petal) 94%, var(--gilt));
}
.wk.skin-reading .wk-vol-w { display: none; }   /* no room on a board */
.wk.skin-reading .wk-vol-c {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  writing-mode: horizontal-tb;
  text-align: center;
  font-size: 9.5px; letter-spacing: .04em;
  color: color-mix(in srgb, var(--petal) 74%, var(--gilt));
}
.wk.skin-reading .wk-vol-c::after { content: none; }

/* 筹备中 volumes: grey boards, so the shelf reads at a glance */
/* 筹备中 boards are DARKER than the mockup's. At mockup contrast the titles
   were pale ink on pale cloth and could not be read at 14px vertical — a grey
   board only works if the stamping still shows. */
.wk.skin-reading .wk-vol.is-soon .wk-vol-h,
.wk.skin-reading .wk-vol.is-soon:hover .wk-vol-h {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ink) 78%, var(--rule-strong)) 0,
    color-mix(in srgb, var(--ink) 52%, var(--rule-strong)) 30%,
    color-mix(in srgb, var(--ink) 40%, var(--gilt)) 100%
  );
}
/* no two boards are the same board: a real shelf of unpublished volumes is
   bound in whatever cloth was to hand, and three identical slabs read as a
   placeholder rather than as books. Small shifts only — they must still say
   "not yet" beside the green one. */
.wk.skin-reading .wk-vol.is-soon:nth-of-type(even) .wk-vol-h {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ink) 82%, var(--rule-strong)) 0,
    color-mix(in srgb, var(--ink) 58%, var(--gilt)) 32%,
    color-mix(in srgb, var(--ink) 44%, var(--gilt)) 100%
  );
}
.wk.skin-reading .wk-vol.is-soon:nth-of-type(3n) .wk-vol-h { height: calc(var(--wk-spine) - 14px); }
.wk.skin-reading .wk-vol.is-soon:nth-of-type(3n) .wk-vol-h { margin-top: 14px; }
.wk.skin-reading .wk-vol.is-soon .wk-vol-t { color: color-mix(in srgb, var(--petal) 88%, var(--gilt)); }
.wk.skin-reading .wk-vol.is-soon .wk-vol-c { color: color-mix(in srgb, var(--petal) 66%, var(--gilt)); }

/* 返回 IS THE WAY OUT, so it has to read as one. Two faults, both visible only
   in a magnified screenshot: the gilt cloth was carrying pale petal text —
   every other spine is light-on-dark and this one is the exception, so it has
   to be stamped the other way round; and the contents page's " →" ::after was
   still in the line, so the centred line was 返回 plus an arrow while the ink a
   reader actually sees sat left of the cloth's middle (measured: glyphs at
   527..552 in a 520..576 box). Dropping the arrow puts 返回 itself in the
   centre. It matters more than cosmetics now that the page carries no site
   header: this stamp and 怀旧橙's link are the only ways back. */
.wk.skin-reading .wk-vol.is-home .wk-vol-c {
  /* BRIGHT, not black (owner: "返回 should not be black. maybe white or other
     bright color"). Near-white at 700 on the gilt cloth, with a one-pixel dark
     shadow underneath so it holds against the lighter top of the gradient —
     static, so it costs nothing to paint. */
  color: color-mix(in srgb, var(--petal) 92%, #fff);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 45%, transparent);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
}
.wk.skin-reading .wk-vol.is-home .wk-vol-c::after { content: none; }
.wk.skin-reading .wk-vol.is-home .wk-vol-h:hover .wk-vol-c {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* 首页 stands shorter and in cinnabar — it is the way out, not a 卷 */
/* THE MARGIN IS WHAT MAKES IT STAND — on the CLOTH, not the row. The row
   aligns to flex-start, so a shorter spine's FOOT lifts off the board instead
   of its head sinking; the book floated 44px above the shelf. Pushing it down
   by exactly the height it gives up puts its foot back on the board, and
   keeping the margin off the row leaves the row full-depth for hovering. */
.wk.skin-reading .wk-vol.is-home .wk-vol-h { margin-top: calc(var(--wk-spine) - var(--wk-spine-home)); }
.wk.skin-reading .wk-vol.is-home .wk-vol-h,
.wk.skin-reading .wk-vol.is-home:hover .wk-vol-h {
  height: var(--wk-spine-home);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--gilt) 52%, #000) 0,
    color-mix(in srgb, var(--gilt) 88%, var(--ink)) 26%,
    var(--gilt) 100%
  );
}

/* ---- the pulled-out volume's newest titles, on the shelf below ---- */
/* THE OPEN VOLUME LIES BESIDE THE SHELF, NOT UNDER IT. Five slim spines use
   about a third of the leaf, and putting the titles below left the rest of the
   shelf empty — the blank the owner has objected to before. Set to the right of
   the books, the two halves read as a shelf and an opened book, and neither
   side is idle.

   AND ONE IS ALWAYS OPEN: with nothing hovered the first volume shows, so the
   page is never half-blank waiting for a cursor. :has() does that in one rule
   — no JS, no default class for the renderer to maintain. */
.wk.skin-reading .wk-vol-l {
  position: absolute;
  /* THE BOX STARTS WHERE THE SHELF ENDS, and the indent is padding — not a
     gap in `left`. With the box inset by 20px there was 20px of nothing
     between the spine and the panel: the panel is a DOM descendant of the row,
     so hovering it keeps the row hovered, but crossing dead space to reach it
     dropped the hover and closed the panel before the cursor arrived. Padding
     keeps the same look and makes the path continuous. */
  left: var(--wk-shelf);
  right: clamp(6px, 1.5vw, 20px);
  top: 6px;
  /* writing-mode FORCED back to horizontal: the shelf sets vertical-rl on the
     spines and this panel is titles, not a spine. */
  writing-mode: horizontal-tb;
  margin: 0;
  padding: 0 0 0 clamp(24px, 3.4vw, 46px);
  border-left: 1px solid color-mix(in srgb, var(--gilt) 30%, var(--rule));
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  /* NO DELAY. A delayed close made the outgoing volume linger over the
     incoming one, which is the "lag" the owner saw moving from book to book.
     The seams the delay was covering for are handled properly below instead —
     the rows' hit areas touch, so there is no moment with nothing hovered. */
  transition: opacity .12s ease, transform .16s cubic-bezier(.2, .7, 0, 1);
}
/* Nothing is open until a book is touched — the open half holds 关于文库
   instead (see .wk-lede below). Hover or focus a volume and its own panel
   takes the slot. */
.wk.skin-reading .wk-vol:hover .wk-vol-l,
.wk.skin-reading .wk-vol:focus-within .wk-vol-l {
  opacity: 1; transform: none; pointer-events: auto;
}

/* ---- 关于文库: what the open half says while no book is touched ---- */
/* Hidden outside this skin: the catalogue is part of one superset DOM, and
   怀旧橙 renders the same words in its sidebar. Exactly one of the two is ever
   displayed, so the page never says it twice. */
.wk .wk-lede { display: none; }
.wk.skin-reading .wk-lede {
  display: block;
  position: absolute;
  left: var(--wk-shelf);
  right: clamp(6px, 1.5vw, 20px);
  top: 6px;
  margin: 0;
  padding: 2px 0 0 clamp(24px, 3.4vw, 46px);
  border-left: 1px solid color-mix(in srgb, var(--gilt) 30%, var(--rule));
  list-style: none;
  opacity: 1;
  transition: opacity .12s ease;
}
.wk.skin-reading .wk-lede h3 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--ink);
}
.wk.skin-reading .wk-lede p {
  margin: 0;
  max-width: 32em;
  font-size: 15px;
  font-weight: 450;
  line-height: 1.95;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--ink) 86%, var(--paper));
}
.wk.skin-reading .wk-lede strong {
  font-weight: 700;
  color: var(--green);
}
/* a touched book takes the slot back — and pointer-events go with it, or the
   invisible lede keeps the clicks meant for the titles underneath it (it is
   the last child, so it paints and hit-tests above them). */
.wk.skin-reading .wk-vols:has(.wk-vol:hover) .wk-lede,
.wk.skin-reading .wk-vols:has(.wk-vol:focus-within) .wk-lede {
  opacity: 0;
  pointer-events: none;
}

/* the sidebar's copy of these words stands down in this skin */
.wk.skin-reading .wk-side { display: none; }
/* ONE TYPE SCALE FOR THE WHOLE OPEN HALF (owner, 2026-08-23: 关于文库 "can be
   more visible… a little larger or font weight a little heavier… applied
   across the section — when you mouse over each volume, the text on the right
   side should also be a little visible"). The panel is the page's reading
   matter now, not a caption beside a shelf, so titles, dates, the colophon and
   the 筹备中 notes all step up together rather than one of them alone. Six rows
   at 40px is 240px in a 294px slot, so it still fits without the shelf growing. */
.wk.skin-reading .wk-vol-l li { padding: 6px 2px; }
.wk.skin-reading .wk-vol-l a {
  font-size: 14.5px;
  font-weight: 500;
  color: color-mix(in srgb, var(--ink) 88%, var(--paper));
}
.wk.skin-reading .wk-vol-l time {
  font-size: 11.5px;
  color: color-mix(in srgb, var(--ink) 60%, var(--paper));
}
.wk.skin-reading .wk-vol-l li::after {
  border-bottom-color: color-mix(in srgb, var(--gilt) 60%, var(--hairline));
}

/* ---- the note panel: what a 筹备中 or 首页 row shows in the open half ---- */
/* Same slot and same reveal as .wk-vol-l, so hovering ANY spine fills the
   right half of the leaf. Hidden outside this skin: the catalogue markup is
   one superset DOM and 怀旧橙 must not inherit a panel it has no shelf for. */
.wk .wk-vol-n { display: none; }
.wk.skin-reading .wk-vol-n {
  display: block;
  position: absolute;
  left: var(--wk-shelf);
  right: clamp(6px, 1.5vw, 20px);
  top: 6px;
  margin: 0;
  padding: 2px 0 0 clamp(24px, 3.4vw, 46px);
  border-left: 1px solid color-mix(in srgb, var(--gilt) 30%, var(--rule));
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--ink) 84%, var(--paper));
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity .12s ease, transform .16s cubic-bezier(.2, .7, 0, 1);
}
.wk.skin-reading .wk-vol-n span {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 400;
  color: color-mix(in srgb, var(--ink) 62%, var(--paper));
}
.wk.skin-reading .wk-vol:hover .wk-vol-n,
.wk.skin-reading .wk-vol:focus-within .wk-vol-n {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* the entrance: books set down one after another */
@keyframes wk-shelve {
  from { opacity: 0; transform: translateY(-14px) rotate(-3deg); }
  to   { opacity: 1; transform: none; }
}
/* THE ENTRANCE RUNS ON THE SPINE, NOT ON THE ROW — and that is a correctness
   requirement, not a preference. An animation with a fill mode leaves a
   RESOLVED transform on its element (matrix(1,0,0,1,0,0)), not the keyword
   none, and any transform but none makes that element the containing block for
   its absolutely positioned descendants. With the entrance on .wk-vol, the
   pulled-out title list resolved left/width against a 56px spine instead of
   the 842px shelf and computed 29px wide. Animating .wk-vol-h leaves .wk-vol
   untransformed, so .wk-vols stays the containing block.

   fill-mode is `backwards`, not `both`: a forwards fill would pin
   transform:none onto the spine and the hover lift could never move it. */
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-index .wk-vol { animation: none; }
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-index .wk-vol .wk-vol-h {
  animation: wk-shelve .42s cubic-bezier(.2, .7, 0, 1) backwards;
}
.wk.skin-reading .wk-vol:nth-child(1) .wk-vol-h { animation-delay: .04s; }
.wk.skin-reading .wk-vol:nth-child(2) .wk-vol-h { animation-delay: .10s; }
.wk.skin-reading .wk-vol:nth-child(3) .wk-vol-h { animation-delay: .16s; }
.wk.skin-reading .wk-vol:nth-child(4) .wk-vol-h { animation-delay: .22s; }
.wk.skin-reading .wk-vol:nth-child(5) .wk-vol-h { animation-delay: .28s; }
.wk.skin-reading .wk-vol:nth-child(n+6) .wk-vol-h { animation-delay: .34s; }

@media (prefers-reduced-motion: reduce) {
  .wk.skin-reading .wk-vol-h,
  .wk.skin-reading .wk-vol-l { transition: none; }
  .wk.skin-reading .wk-vol:hover .wk-vol-h { transform: none; }
  .wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-index .wk-vol .wk-vol-h { animation: none; }
}

/* phones: a shelf still, just a shorter one — and the open half moves BELOW
   the books, because a phone has no second column to put it in. Retuning the
   two spine tokens is all it takes: the board's depth, every spine's height
   and the shorter rows' top margins all read from them, so they cannot fall
   out of step at this width either. */





/* ==========================================================================
   翻页 — ten to a page, numbered (owner, 2026-08-22).

   EVERY FILTER HAS ITS OWN RADIO GROUP AND ITS OWN PAGER, and the reason is
   worth keeping: with one shared group, a reader on page 5 of 深度 who picks
   历史 — one page — lands on a page that does not exist, and no scriptless
   rule can put that radio back. Per-filter groups mean every tab remembers a
   page that is inside it, so no click can produce an empty list.

   The row carries BOTH page numbers: data-pa is its page under 全部, data-pc
   its page inside its own tab. One number could only ever be right for one
   tab. The selectors below pair the open tab with that tab's open page, so
   filtering and paging can never disagree.

   Generated to twenty-four pages per filter — the owner's own ceiling, "23
   would be the max, which is fine for now". Raising it means raising
   WenkuArchiveRenderer::MAX_PAGES and WenkuRepository::MAX_ENTRIES with it.
   ========================================================================== */
.wk.skin-reading .wk-list .wk-e { display: none; }

.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-1:checked ~ .wk-list .wk-e[data-pa="1"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-2:checked ~ .wk-list .wk-e[data-pa="2"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-3:checked ~ .wk-list .wk-e[data-pa="3"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-4:checked ~ .wk-list .wk-e[data-pa="4"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-5:checked ~ .wk-list .wk-e[data-pa="5"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-6:checked ~ .wk-list .wk-e[data-pa="6"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-7:checked ~ .wk-list .wk-e[data-pa="7"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-8:checked ~ .wk-list .wk-e[data-pa="8"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-9:checked ~ .wk-list .wk-e[data-pa="9"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-10:checked ~ .wk-list .wk-e[data-pa="10"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-11:checked ~ .wk-list .wk-e[data-pa="11"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-12:checked ~ .wk-list .wk-e[data-pa="12"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-13:checked ~ .wk-list .wk-e[data-pa="13"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-14:checked ~ .wk-list .wk-e[data-pa="14"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-15:checked ~ .wk-list .wk-e[data-pa="15"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-16:checked ~ .wk-list .wk-e[data-pa="16"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-17:checked ~ .wk-list .wk-e[data-pa="17"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-18:checked ~ .wk-list .wk-e[data-pa="18"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-19:checked ~ .wk-list .wk-e[data-pa="19"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-20:checked ~ .wk-list .wk-e[data-pa="20"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-21:checked ~ .wk-list .wk-e[data-pa="21"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-22:checked ~ .wk-list .wk-e[data-pa="22"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-23:checked ~ .wk-list .wk-e[data-pa="23"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-24:checked ~ .wk-list .wk-e[data-pa="24"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-1:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="1"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-2:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="2"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-3:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="3"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-4:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="4"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-5:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="5"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-6:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="6"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-7:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="7"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-8:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="8"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-9:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="9"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-10:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="10"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-11:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="11"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-12:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="12"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-13:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="13"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-14:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="14"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-15:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="15"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-16:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="16"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-17:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="17"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-18:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="18"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-19:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="19"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-20:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="20"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-21:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="21"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-22:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="22"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-23:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="23"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-24:checked ~ .wk-list .wk-e[data-cat="pinglun"][data-pc="24"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-1:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="1"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-2:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="2"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-3:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="3"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-4:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="4"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-5:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="5"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-6:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="6"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-7:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="7"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-8:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="8"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-9:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="9"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-10:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="10"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-11:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="11"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-12:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="12"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-13:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="13"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-14:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="14"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-15:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="15"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-16:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="16"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-17:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="17"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-18:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="18"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-19:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="19"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-20:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="20"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-21:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="21"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-22:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="22"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-23:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="23"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-24:checked ~ .wk-list .wk-e[data-cat="lishi"][data-pc="24"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-1:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="1"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-2:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="2"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-3:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="3"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-4:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="4"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-5:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="5"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-6:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="6"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-7:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="7"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-8:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="8"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-9:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="9"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-10:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="10"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-11:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="11"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-12:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="12"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-13:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="13"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-14:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="14"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-15:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="15"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-16:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="16"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-17:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="17"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-18:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="18"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-19:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="19"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-20:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="20"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-21:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="21"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-22:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="22"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-23:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="23"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-24:checked ~ .wk-list .wk-e[data-cat="qinggan"][data-pc="24"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-1:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="1"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-2:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="2"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-3:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="3"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-4:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="4"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-5:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="5"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-6:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="6"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-7:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="7"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-8:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="8"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-9:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="9"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-10:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="10"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-11:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="11"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-12:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="12"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-13:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="13"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-14:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="14"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-15:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="15"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-16:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="16"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-17:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="17"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-18:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="18"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-19:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="19"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-20:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="20"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-21:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="21"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-22:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="22"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-23:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="23"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-24:checked ~ .wk-list .wk-e[data-cat="xuanxue"][data-pc="24"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-1:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="1"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-2:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="2"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-3:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="3"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-4:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="4"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-5:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="5"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-6:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="6"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-7:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="7"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-8:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="8"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-9:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="9"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-10:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="10"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-11:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="11"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-12:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="12"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-13:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="13"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-14:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="14"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-15:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="15"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-16:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="16"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-17:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="17"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-18:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="18"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-19:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="19"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-20:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="20"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-21:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="21"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-22:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="22"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-23:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="23"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-24:checked ~ .wk-list .wk-e[data-cat="shendu"][data-pc="24"] { display: grid; }

.wk.skin-reading .wk-pg { display: none; }

.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream .wk-pg[data-for="all"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream .wk-pg[data-for="pinglun"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream .wk-pg[data-for="lishi"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream .wk-pg[data-for="qinggan"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream .wk-pg[data-for="xuanxue"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream .wk-pg[data-for="shendu"] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 2px;
  justify-content: center;
  margin-top: clamp(20px, 3vw, 30px);
}
.wk.skin-reading .wk-pn {
  min-width: 30px;                 /* SC 2.5.8: 24px is the floor, not the target */
  padding: 6px 4px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.wk.skin-reading .wk-pn:hover { color: var(--green); }

.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-1:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-1"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-2:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-2"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-3:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-3"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-4:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-4"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-5:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-5"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-6:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-6"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-7:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-7"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-8:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-8"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-9:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-9"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-10:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-10"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-11:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-11"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-12:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-12"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-13:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-13"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-14:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-14"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-15:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-15"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-16:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-16"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-17:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-17"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-18:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-18"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-19:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-19"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-20:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-20"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-21:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-21"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-22:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-22"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-23:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-23"],
.wk.skin-reading #wk-c-all:checked ~ .wk-body .wk-stream #wk-pg-all-24:checked ~ .wk-pg[data-for="all"] .wk-pn[for="wk-pg-all-24"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-1:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-1"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-2:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-2"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-3:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-3"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-4:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-4"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-5:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-5"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-6:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-6"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-7:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-7"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-8:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-8"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-9:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-9"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-10:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-10"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-11:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-11"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-12:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-12"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-13:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-13"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-14:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-14"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-15:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-15"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-16:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-16"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-17:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-17"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-18:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-18"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-19:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-19"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-20:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-20"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-21:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-21"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-22:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-22"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-23:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-23"],
.wk.skin-reading #wk-c-pinglun:checked ~ .wk-body .wk-stream #wk-pg-pinglun-24:checked ~ .wk-pg[data-for="pinglun"] .wk-pn[for="wk-pg-pinglun-24"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-1:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-1"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-2:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-2"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-3:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-3"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-4:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-4"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-5:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-5"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-6:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-6"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-7:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-7"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-8:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-8"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-9:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-9"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-10:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-10"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-11:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-11"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-12:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-12"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-13:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-13"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-14:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-14"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-15:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-15"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-16:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-16"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-17:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-17"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-18:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-18"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-19:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-19"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-20:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-20"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-21:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-21"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-22:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-22"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-23:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-23"],
.wk.skin-reading #wk-c-lishi:checked ~ .wk-body .wk-stream #wk-pg-lishi-24:checked ~ .wk-pg[data-for="lishi"] .wk-pn[for="wk-pg-lishi-24"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-1:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-1"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-2:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-2"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-3:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-3"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-4:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-4"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-5:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-5"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-6:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-6"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-7:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-7"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-8:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-8"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-9:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-9"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-10:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-10"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-11:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-11"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-12:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-12"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-13:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-13"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-14:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-14"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-15:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-15"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-16:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-16"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-17:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-17"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-18:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-18"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-19:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-19"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-20:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-20"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-21:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-21"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-22:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-22"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-23:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-23"],
.wk.skin-reading #wk-c-qinggan:checked ~ .wk-body .wk-stream #wk-pg-qinggan-24:checked ~ .wk-pg[data-for="qinggan"] .wk-pn[for="wk-pg-qinggan-24"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-1:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-1"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-2:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-2"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-3:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-3"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-4:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-4"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-5:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-5"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-6:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-6"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-7:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-7"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-8:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-8"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-9:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-9"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-10:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-10"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-11:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-11"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-12:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-12"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-13:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-13"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-14:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-14"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-15:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-15"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-16:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-16"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-17:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-17"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-18:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-18"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-19:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-19"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-20:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-20"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-21:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-21"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-22:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-22"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-23:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-23"],
.wk.skin-reading #wk-c-xuanxue:checked ~ .wk-body .wk-stream #wk-pg-xuanxue-24:checked ~ .wk-pg[data-for="xuanxue"] .wk-pn[for="wk-pg-xuanxue-24"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-1:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-1"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-2:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-2"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-3:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-3"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-4:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-4"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-5:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-5"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-6:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-6"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-7:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-7"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-8:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-8"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-9:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-9"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-10:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-10"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-11:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-11"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-12:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-12"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-13:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-13"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-14:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-14"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-15:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-15"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-16:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-16"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-17:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-17"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-18:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-18"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-19:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-19"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-20:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-20"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-21:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-21"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-22:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-22"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-23:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-23"],
.wk.skin-reading #wk-c-shendu:checked ~ .wk-body .wk-stream #wk-pg-shendu-24:checked ~ .wk-pg[data-for="shendu"] .wk-pn[for="wk-pg-shendu-24"] {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--green);
}

/* ---------- BACK-PORTED 2026-08-23: 阅读室's footer colours (the shared box
   lives in skin-base.css). ---------- */
/* 阅读室: a quiet line under the leaf, in the paper palette */
.wk.skin-reading .wk-foot {
  width: min(100% - 48px, 1000px);
  margin-inline: auto;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  font-family: var(--sans);
  color: var(--ink-faint);
}
.wk.skin-reading .wk-foot a { color: var(--ink-soft); }
.wk.skin-reading .wk-foot a:hover { color: var(--green); text-decoration-color: var(--gilt); }

/* Responsive tiers, max-width DESCENDING so the narrowest is last and
   therefore wins. Order is load-bearing; see tools/order-tiers.py. Nothing
   may be appended below this block. */

@media (max-width: 900px) {
  /* Below this width the pane has nowhere to live: the gutter is given back
     to the list, the titles wrap instead of truncating, and .wk-pick goes so
     a touch reader gets the plain headline link again. */
  .wk.skin-reading .wk-stream { padding-right: 0; }
  .wk.skin-reading .wk-x:checked ~ .wk-pv { display: none; }
  .wk.skin-reading .wk-pick { display: none; }
  .wk.skin-reading .wk-e { grid-template-columns: max-content minmax(0, 1fr) max-content; }
  .wk.skin-reading .wk-e-t { white-space: normal; }
}
@media (max-width: 600px) {
  .wk.skin-reading .wk-vols {
    --wk-spine: 196px;
    --wk-spine-home: 158px;
    --wk-shelf: 244px;              /* the board, sized to five 42px spines */
    min-height: 470px;              /* spines, then the panel underneath */
    gap: 0;
    padding-right: clamp(4px, 1vw, 14px);   /* no reserved panel column here */
  }
  .wk.skin-reading .wk-vol-h { width: 42px; }
  .wk.skin-reading .wk-vol-t { font-size: 13px; }
  .wk.skin-reading .wk-vol-l,
  .wk.skin-reading .wk-vol-n,
  .wk.skin-reading .wk-lede {
    left: clamp(4px, 1vw, 14px);
    right: clamp(4px, 1vw, 14px);
    top: calc(var(--wk-spine) + 30px);
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--gilt) 30%, var(--rule));
    padding-top: 14px;
  }
}
@media (max-width: 600px) {
  .wk.skin-reading .wk-cat-h { flex-wrap: wrap; row-gap: 4px; }
  .wk.skin-reading .wk-cat-h::after {
    content: ""; flex: 1 0 100%; order: 9; height: 1px; min-width: 100%;
    margin-top: 8px; background: var(--hairline);
  }
  .wk.skin-reading .wk-cat-l li { width: min(300px, 82vw); }
}