/* 随轩 · 读书模式
   The study's lamp comes down over one book. 翻页: the book lies open on the walnut desk, two pages at a time, turned by
   key, click or wheel. 滚动: one long page under the lamp. The site steps back to a single quiet bar; pictures become
   plates that open full screen. 网页模式 (the original reader page) is one click away and stays exactly as it was.
   walnut #2A1E17 · lamplight #FFC478 · page #F5EEDD · ink #2B251D · vermilion #9A3B2A */

/* ---------- paper and ink, three ways ---------- */
.yh.rb-on {
  --rb-page: #F5EEDD; --rb-ink: #2B251D; --rb-muted: #7A6E5E; --rb-rule: rgba(43, 37, 29, .15); --rb-acc: #9A3B2A;
  --rb-desk: #2A1E17; --rb-desk2: #4A3424; --rb-lamp: rgba(255, 196, 120, .22); --rb-edge: #DDD1B8; --rb-edge2: #F1E8D4;
  --rb-on-desk: rgba(255, 236, 208, .62);
  --rb-veil: color-mix(in srgb, var(--rb-page) 52%, transparent);
  --bg: var(--rb-page); --paper: var(--rb-page); --ink: var(--rb-ink); --muted: var(--rb-muted); --line: var(--rb-rule); --acc: var(--rb-acc);
  background: linear-gradient(var(--rb-veil), var(--rb-veil)), var(--rb-page) url("../img/tex-paper.png");
  color: var(--rb-ink);
}
.yh.rb-on.rb-t-white {
  --rb-page: #FBFAF6; --rb-ink: #1F1D1A; --rb-muted: #6F6B64; --rb-rule: rgba(31, 29, 26, .13);
  --rb-desk: #34322E; --rb-desk2: #4B4842; --rb-lamp: rgba(255, 250, 240, .12); --rb-edge: #E2DFD6; --rb-edge2: #F7F6F1;
}
.yh.rb-on.rb-t-night {
  --rb-page: #1E1A15; --rb-ink: #D7CCB7; --rb-muted: #978B76; --rb-rule: rgba(215, 204, 183, .14); --rb-acc: #D9926A;
  --rb-desk: #0E0B09; --rb-desk2: #1D1610; --rb-lamp: rgba(255, 170, 90, .08); --rb-edge: #2C261F; --rb-edge2: #1A1612;
  --rb-on-desk: rgba(215, 204, 183, .55);
}
/* plain paper has no grain; on the spread the desk still shows around the book */
.yh.rb-on.rb-t-white:not(.rb-page), .yh.rb-on.rb-t-night:not(.rb-page) { background: var(--rb-page); }

/* ---------- what each way shows ---------- */
.yh.rb-on .bar, .yh.rb-on .prog, .yh.rb-on .rd__bar, .yh.rb-on .rd__pager, .yh.rb-on .rd__side, .yh.rb-on .ag > .toc-m { display: none; }
.yh:not(.rb-on) .rb-bar, .yh:not(.rb-on) .rb-spread, .yh:not(.rb-on) .rb-turns, .yh:not(.rb-on) .rb-foot,
.yh:not(.rb-on) .rb-end, .yh:not(.rb-on) .rb-orn { display: none; }
.yh:not(.rb-page) .rb-spread, .yh:not(.rb-page) .rb-turns, .yh:not(.rb-page) .rb-foot { display: none; }
.rb-sentinel { display: block; height: 0; }
.rd__mode { height: 30px; padding: 0 12px; border-radius: 15px; font-size: 13px; color: var(--acc); box-shadow: inset 0 0 0 1px currentColor; }
.rd__mode:hover { background: var(--acc); color: #FFFFFF; box-shadow: none; }

/* ---------- the one bar ---------- */
.rb-bar {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: 48px; display: flex; align-items: center; gap: 14px; padding: 0 14px 0 12px;
  background: color-mix(in srgb, var(--rb-page) 93%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rb-rule); color: var(--rb-ink); font-size: 14px;
  transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.rb-bar.is-hidden { transform: translateY(-101%); }
.rb-bar__mark { flex: none; display: block; width: 30px; height: 30px; }
.rb-bar__mark img { width: 30px; height: 30px; mix-blend-mode: multiply; }
.rb-t-night .rb-bar__mark img { mix-blend-mode: screen; filter: invert(.86) sepia(.25); }
.rb-bar__book { flex: none; font-family: var(--f-serif); font-weight: 700; text-decoration: none; white-space: nowrap; }
.rb-bar__book:hover { color: var(--rb-acc); }
.rb-bar__ch { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--f-serif); color: var(--rb-muted); }
.rb-bar__tools { flex: none; margin-left: auto; display: flex; align-items: center; gap: 4px; }
.rb-btn { height: 32px; padding: 0 12px; border-radius: 16px; font-size: 13.5px; color: var(--rb-ink); transition: background-color .2s; }
.rb-btn:hover, .rb-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--rb-ink) 8%, transparent); }
.rb-btn--web { color: var(--rb-muted); }
.rb-seg { display: inline-flex; padding: 2px; margin: 0 4px; border-radius: 17px; box-shadow: inset 0 0 0 1px var(--rb-rule); }
.rb-seg button { height: 28px; padding: 0 11px; border-radius: 14px; font-size: 13px; color: var(--rb-muted); transition: background-color .2s, color .2s; }
.rb-seg button[aria-pressed="true"] { background: var(--rb-ink); color: var(--rb-page); }
.rb-seg button:disabled { opacity: .35; cursor: not-allowed; }
.rb-bar__prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.rb-bar__prog i { display: block; width: 0; height: 100%; background: var(--rb-acc); transition: width .2s linear; }
.yh.rb-on :focus-visible { outline-color: var(--rb-acc); }

/* ---------- the chapter's first page ---------- */
.yh.rb-on .rd__head { text-align: center; color: var(--rb-ink); }
.yh.rb-on .rd__k { font-family: var(--f-serif); font-size: 15px; letter-spacing: .3em; text-indent: .3em; color: var(--rb-muted); }
.yh.rb-on .rd__k a:hover { color: var(--rb-acc); }
.yh.rb-on .rd__head h1 { margin-top: 30px; font-family: var(--f-serif); }
.yh.rb-on .rd__sep { display: none; }
.yh.rb-on .rd__lab { display: block; font-size: 19px; font-weight: 600; letter-spacing: .45em; text-indent: .45em; color: var(--rb-acc); }
.yh.rb-on .t-run { display: inline-block; }
.yh.rb-on .rd__ttl { display: block; margin-top: 14px; font-size: clamp(30px, 4vw, 46px); font-weight: 900; line-height: 1.3; letter-spacing: .04em; text-wrap: balance; }
.rb-orn { position: relative; display: block; width: 132px; height: 1px; margin: 38px auto 0; background: linear-gradient(90deg, transparent, var(--rb-acc) 28%, var(--rb-acc) 72%, transparent); opacity: .75; }
.rb-orn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: var(--rb-page); border: 1px solid var(--rb-acc); transform: translate(-50%, -50%) rotate(45deg); }

/* ---------- the text, set as a book ---------- */
.yh.rb-on .rd__text { padding: 0; background: none; box-shadow: none; color: var(--rb-ink); font-family: var(--f-serif); text-align: justify; text-justify: inter-character; hanging-punctuation: allow-end; }
.yh.rb-on .rd__text > p { margin: 0; text-indent: 2em; orphans: 2; widows: 2; }
.yh.rb-on .rd__text > p + p { margin-top: .4em; }
/* a paragraph the spread has split around a picture: the first half fills its last line, the second does not indent */
.yh.rb-on .rd__text > p.rb-cut { text-align-last: justify; }
.yh.rb-on .rd__text > p.rb-cont { text-indent: 0; }
.yh.rb-on .rd__text h2, .yh.rb-on .rd__text h3 { margin: 2.2em 0 1em; font-family: var(--f-serif); font-weight: 900; text-align: center; text-indent: 0; letter-spacing: .06em; line-height: 1.5; break-after: avoid; break-inside: avoid; }
.yh.rb-on .rd__text h2 { font-size: 1.16em; }
.yh.rb-on .rd__text h3 { font-size: 1.04em; }
.yh.rb-on .rd__text > h2:first-child, .yh.rb-on .rd__text > h3:first-child { margin-top: 0; }
.yh.rb-on .rd__text blockquote { margin: 1.2em 2em; text-indent: 0; color: var(--rb-muted); }
.yh.rb-on .rd__text a { color: inherit; text-decoration-color: color-mix(in srgb, var(--rb-acc) 60%, transparent); }
.yh.rb-on .rd__text ::selection { background: color-mix(in srgb, var(--rb-acc) 26%, transparent); }

/* ---------- pictures as plates ---------- */
.yh.rb-on .rd__text figure { margin: 2em 0; text-align: center; text-indent: 0; break-inside: avoid; }
/* a picture's size comes from its own pixels (--iw) and shape (--ar, set by the theme), so its place is kept before it loads;
   --mh is the tallest it may be in each layout, met by narrowing it rather than squeezing it */
.yh.rb-on .rd__text figure img {
  display: block; width: min(100%, var(--iw, 100%), calc(var(--mh, 100vh) * var(--ar, 10))); max-width: 100%; height: auto; margin: 0 auto;
  max-height: var(--mh); object-fit: contain; cursor: zoom-in;
}
.yh.rb-on:not(.rb-t-night) .rd__text figure img { mix-blend-mode: multiply; }
.yh.rb-on.rb-t-night .rd__text figure img { filter: brightness(.84) sepia(.08); }
.yh.rb-on .rd__text figure img[src$=".svg"] { mix-blend-mode: multiply; }
.yh.rb-on.rb-t-night .rd__text figure img[src$=".svg"] { mix-blend-mode: normal; background: #E9E0CC; padding: 8px; filter: brightness(.86); }
.yh.rb-on .rd__text figcaption { margin-top: .75em; font-size: .78em; line-height: 1.6; color: var(--rb-muted); text-align: center; text-indent: 0; }
.yh.rb-on .rb-fn, .rb-lb .rb-fn { margin-right: .7em; font-weight: 700; letter-spacing: .04em; color: var(--rb-acc); }
.rb-fn.is-solo { margin-right: 0; }
.rb-plate { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 1.4em 1.1em; align-items: end; margin: 2em 0; break-inside: avoid; }
.yh.rb-on .rd__text .rb-plate > figure { margin: 0; }
.rb-plate > figure:last-child:nth-child(odd) { grid-column: span var(--last-span, 1); }

/* ====================================================================== 滚动: one long page under the lamp */
.yh.rb-scroll .rd { padding-top: 48px; }
.yh.rb-scroll { background-image: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(80, 50, 20, .07)), linear-gradient(var(--rb-veil), var(--rb-veil)), url("../img/tex-paper.png"); background-attachment: fixed, scroll, scroll; }
.yh.rb-scroll.rb-t-white, .yh.rb-scroll.rb-t-night { background-image: none; }
.yh.rb-scroll .rd__head { width: min(42em, calc(100% - 40px)); margin: 0 auto; padding: clamp(72px, 15vh, 170px) 0 clamp(44px, 8vh, 80px); }
.yh.rb-scroll .ag {
  --rb-col: min(calc(19px * var(--rd-fs, 1) * 35.5), calc(100% - 40px));
  display: grid; grid-template-columns: minmax(0, 1fr) var(--rb-col) minmax(0, 1fr); grid-template-areas: ". text rail";
  width: 100%; margin: 0; gap: 0;
}
.yh.rb-scroll .ag > .rd__text { grid-area: text; font-size: calc(19px * var(--rd-fs, 1)); line-height: 2.05; }
.yh.rb-scroll .ag > .rail { grid-area: rail; justify-self: start; width: min(250px, calc(100% - 64px)); margin-left: 64px; }
.yh.rb-scroll .rd__text figure img { --mh: min(78vh, 920px); }
.yh.rb-scroll .rd__text h2, .yh.rb-scroll .rd__text h3, .yh.rb-scroll .rd__cmt { scroll-margin-top: 72px; }
.yh.rb-scroll .rd__text .rb-plate img { --mh: min(54vh, 560px); }
.yh.rb-scroll .rb-end { width: min(42em, calc(100% - 40px)); margin: 0 auto; padding: 88px 0 24px; text-align: center; }
.yh.rb-scroll .rd__cmt { width: min(42em, calc(100% - 40px)); margin: 56px auto 0; }

/* ====================================================================== 翻页: the book open on the desk */
html:has(.yh.rb-page) { overflow: hidden; }
.yh.rb-page {
  --vh: 100vh;
  --pw: min(620px, calc((100vw - 176px) / 2));
  --ph: min(900px, calc(var(--vh) - 124px));
  --px: clamp(36px, calc(var(--pw) * .095), 60px);
  --pt: 56px; --pb: 60px;
  --cw: calc(var(--pw) - 2 * var(--px));
  --ch: calc(var(--ph) - var(--pt) - var(--pb));
  --gap: calc(2 * var(--px));
  --sx: calc((100vw - 2 * var(--pw)) / 2);
  --sy: calc(48px + (var(--vh) - 48px - 48px - var(--ph)) / 2);
  height: var(--vh); overflow: hidden;
  background: radial-gradient(ellipse 62% 70% at 50% 47%, var(--rb-lamp), transparent 72%), radial-gradient(ellipse 90% 90% at 50% 50%, var(--rb-desk2), var(--rb-desk) 78%), var(--rb-desk);
}
@supports (height: 100dvh) { .yh.rb-page { --vh: 100dvh; } }
.yh.rb-page .main, .yh.rb-page .rd { height: var(--vh); }
.yh.rb-page .ft, .yh.rb-page .rd__cmt, .yh.rb-page .skip { display: none; }

/* the paper: two pages, a spine, the thickness of what has been read and what is left */
.rb-spread { position: fixed; z-index: 1; left: var(--sx); top: var(--sy); width: calc(2 * var(--pw)); height: var(--ph); display: flex; filter: drop-shadow(0 28px 36px rgba(0, 0, 0, .5)); }
.rb-pg { position: relative; flex: none; width: var(--pw); height: 100%; background: linear-gradient(var(--rb-veil), var(--rb-veil)), var(--rb-page) url("../img/tex-paper.png"); cursor: pointer; }
.rb-t-white .rb-pg, .rb-t-night .rb-pg { background-image: none; }
.rb-pg--l { border-radius: 5px 1px 1px 5px; box-shadow: inset -26px 0 30px -24px rgba(60, 35, 10, .38), inset -2px 0 3px -2px rgba(0, 0, 0, .25); }
.rb-pg--r { border-radius: 1px 5px 5px 1px; box-shadow: inset 26px 0 30px -24px rgba(60, 35, 10, .38), inset 2px 0 3px -2px rgba(0, 0, 0, .25); }
.rb-t-night .rb-pg--l { box-shadow: inset -26px 0 30px -24px rgba(0, 0, 0, .7); }
.rb-t-night .rb-pg--r { box-shadow: inset 26px 0 30px -24px rgba(0, 0, 0, .7); }
.rb-pg::before { content: ""; position: absolute; top: 3px; bottom: 3px; width: var(--edge, 3px); background: repeating-linear-gradient(90deg, var(--rb-edge) 0 1px, var(--rb-edge2) 1px 2px); }
.rb-pg--l::before { right: 100%; --edge: var(--ls, 3px); border-radius: 3px 0 0 3px; }
.rb-pg--r::before { left: 100%; --edge: var(--rs, 3px); border-radius: 0 3px 3px 0; }
.rb-spread.is-first .rb-pg--l .rb-run { visibility: hidden; }
.rb-run { position: absolute; top: 24px; left: var(--px); right: var(--px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--f-serif); font-size: 12.5px; letter-spacing: .22em; color: var(--rb-muted); }
.rb-pg--r .rb-run { text-align: right; }
.rb-no { position: absolute; bottom: 22px; font-family: "EB Garamond", var(--f-serif); font-size: 14.5px; color: var(--rb-muted); font-variant-numeric: lining-nums; }
.rb-pg--l .rb-no { left: var(--px); }
.rb-pg--r .rb-no { right: var(--px); }

/* the words flow through columns, one per page; turning a page moves them two columns along */
.yh.rb-page .rb-clip { position: fixed; z-index: 2; left: calc(var(--sx) + var(--px)); top: calc(var(--sy) + var(--pt)); width: calc(2 * var(--cw) + var(--gap)); height: var(--ch); overflow: clip; }
/* the words and pictures are printed onto the paper below: white grounds take the paper's colour */
.yh.rb-page:not(.rb-t-night) .rb-clip { mix-blend-mode: multiply; }
.yh.rb-page .rb-flow {
  width: calc(2 * var(--cw) + var(--gap)); height: var(--ch);
  column-width: var(--cw); column-gap: var(--gap); column-fill: auto;
  transform: translateX(calc(var(--kx, 0px) * -1));
}
.yh.rb-page .rd__head { width: auto; margin: 0; padding: calc(var(--ch) * .2) 0 calc(var(--ch) * .07); break-inside: avoid; }
.yh.rb-page .rd__k { font-size: 13.5px; }
.yh.rb-page .rd__head h1 { margin-top: 24px; }
.yh.rb-page .rd__ttl { font-size: clamp(26px, calc(var(--cw) / 13), 38px); }
.yh.rb-page .ag { display: block; width: auto; margin: 0; }
.yh.rb-page .ag > .rail { display: none; }
.yh.rb-page .rd__text { font-size: calc(18px * var(--rd-fs, 1)); line-height: 1.92; }
.yh.rb-page .rd__text figure, .yh.rb-page .rb-plate { margin: 1.1em 0 1.3em; }
.yh.rb-page .rd__text figure img { --mh: calc(var(--ch) - 5em); }
.yh.rb-page .rd__text .rb-plate img { --mh: calc((var(--ch) - 8em) / 2); }
.yh.rb-page .rd__text .rb-plate[data-rows="1"] img { --mh: calc(var(--ch) - 6em); }
.yh.rb-page .rb-end { padding-top: calc(var(--ch) * .12); text-align: center; break-inside: avoid; }

/* turning: arrows on the desk, the page margins, keys, wheel and swipe */
.rb-turn { position: fixed; z-index: 3; top: calc(var(--sy) + var(--ph) / 2 - 44px); width: 64px; height: 88px; display: grid; place-items: center; color: var(--rb-on-desk); transition: color .2s, opacity .4s; }
.rb-turn:hover { color: #FFFFFF; }
.rb-turn:disabled { opacity: 0; pointer-events: none; }
.rb-turn i { width: 15px; height: 15px; border: solid currentColor; border-width: 0 0 2px 2px; transform: translateX(3px) rotate(45deg); }
.rb-turn--next i { transform: translateX(-3px) rotate(-135deg); }
.rb-turn--prev { left: max(8px, calc(var(--sx) - 84px)); }
.rb-turn--next { right: max(8px, calc(var(--sx) - 84px)); }
.rb-foot { position: fixed; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; color: var(--rb-on-desk); font-family: "EB Garamond", var(--f-serif); font-size: 14px; white-space: nowrap; transition: opacity .4s; }
.rb-foot__bar { position: relative; width: 180px; height: 2px; background: color-mix(in srgb, var(--rb-on-desk) 30%, transparent); }
.rb-foot__bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: var(--rb-on-desk); }
.yh.rb-page.rb-idle .rb-bar { transform: translateY(-101%); }
.yh.rb-page.rb-idle .rb-turn, .yh.rb-page.rb-idle .rb-foot { opacity: 0; }

/* ---------- the end of a chapter ---------- */
.rb-end__k { margin-top: 18px; font-family: var(--f-serif); font-size: 14px; letter-spacing: .5em; text-indent: .5em; color: var(--rb-muted); }
.rb-end__next { display: inline-grid; gap: 6px; margin-top: 32px; padding: 20px 34px 22px; text-decoration: none; color: var(--rb-ink); border: 1px solid var(--rb-rule); background: color-mix(in srgb, var(--rb-page) 55%, #FFFFFF); transition: border-color .2s, transform .2s; }
.rb-t-night .rb-end__next { background: color-mix(in srgb, var(--rb-page) 80%, #FFFFFF); }
.rb-end__next:hover { border-color: var(--rb-acc); transform: translateY(-2px); }
.rb-end__next small { font-size: 13px; letter-spacing: .3em; text-indent: .3em; color: var(--rb-muted); }
.rb-end__next b { font-family: var(--f-serif); font-size: 21px; font-weight: 900; line-height: 1.45; text-wrap: balance; }
.rb-end__next .rb-end__lab { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; letter-spacing: .35em; text-indent: .35em; color: var(--rb-acc); }
.rb-end__more { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 24px; font-size: 14px; }
.rb-end__more a, .rb-end__more button { color: var(--rb-muted); text-decoration: underline; text-decoration-color: var(--rb-rule); text-underline-offset: 5px; }
.rb-end__more a:hover, .rb-end__more button:hover { color: var(--rb-ink); text-decoration-color: currentColor; }

/* ---------- contents drawer ---------- */
.rb-toc[hidden], .rb-set[hidden], .rb-lb[hidden], .rb-toast[hidden] { display: none; }
.rb-toc { position: fixed; inset: 0; z-index: 80; }
.rb-scrim { position: absolute; inset: 0; background: rgba(24, 16, 10, .42); opacity: 0; transition: opacity .3s; }
.rb-toc__panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(410px, 92vw); display: flex; flex-direction: column; outline: none;
  background: var(--rb-page, #F5EEDD) url("../img/tex-paper.png"); color: var(--rb-ink, #2B251D);
  box-shadow: 24px 0 60px -24px rgba(0, 0, 0, .5); transform: translateX(-102%); transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.rb-t-night .rb-toc__panel { background-image: none; }
.rb-toc.is-open .rb-scrim { opacity: 1; }
.yh .rb-toc__panel:focus, .yh .rb-toc__panel:focus-visible { outline: none; }
.rb-toc.is-open .rb-toc__panel { transform: none; }
.rb-toc__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 20px 14px 18px 24px; border-bottom: 1px solid var(--rb-rule); }
.bk--toc { --w: 58px; --h: 82px; --d: 9px; }
.bk--toc .bk__spine b { display: none; }
.rb-toc__id b { display: block; font-family: var(--f-serif); font-weight: 900; font-size: 19px; line-height: 1.35; }
.rb-toc__id span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--rb-muted); }
.rb-toc__id small { display: block; margin-top: 4px; font-size: 12px; color: var(--rb-muted); }
.rb-x { align-self: start; width: 38px; height: 38px; border-radius: 50%; font-size: 26px; line-height: 1; color: var(--rb-ink); }
.rb-x:hover { background: color-mix(in srgb, var(--rb-ink) 8%, transparent); }
.rb-toc__list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 0 18px; scrollbar-width: thin; }
.rb-toc__list > li > a { display: grid; grid-template-columns: 5.4em minmax(0, 1fr); column-gap: 10px; padding: 10px 22px 9px 24px; text-decoration: none; font-family: var(--f-serif); }
.rb-toc__list > li > a:hover { background: color-mix(in srgb, var(--rb-ink) 5%, transparent); }
.rb-toc__no { font-size: 13.5px; line-height: 1.75; color: var(--rb-acc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-toc__t { font-size: 15px; line-height: 1.6; }
.rb-toc__read { grid-column: 2; display: block; height: 2px; margin-top: 7px; background: var(--rb-rule); visibility: hidden; }
.rb-toc__read i { display: block; height: 100%; width: var(--r, 0%); background: var(--rb-acc); }
.rb-toc__list > li.is-read .rb-toc__read, .rb-toc__list > li.is-cur .rb-toc__read { visibility: visible; }
.rb-toc__list > li.is-cur > a { background: color-mix(in srgb, var(--rb-acc) 10%, transparent); }
.rb-toc__list > li.is-cur .rb-toc__t { font-weight: 900; }
.rb-toc__secs { padding: 2px 22px 12px calc(24px + 5.4em + 10px); }
.rb-toc__secs a { display: block; padding: 5px 0; font-size: 13.5px; line-height: 1.55; color: var(--rb-muted); text-decoration: none; }
.rb-toc__secs a:hover { color: var(--rb-ink); }
.rb-toc__foot { padding: 14px 24px 18px; border-top: 1px solid var(--rb-rule); font-size: 13.5px; }
.rb-toc__foot a { color: var(--rb-muted); }

/* ---------- text, paper, layout ---------- */
.rb-set {
  position: fixed; z-index: 70; top: 54px; right: 12px; width: 318px; padding: 14px 18px 12px;
  background: var(--rb-page, #F5EEDD) url("../img/tex-paper.png"); color: var(--rb-ink); border-radius: 12px;
  box-shadow: 0 0 0 1px var(--rb-rule), 0 26px 50px -22px rgba(0, 0, 0, .55); font-size: 14px;
}
.rb-t-night .rb-set { background-image: none; }
.rb-set__row { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.rb-set__k { flex: none; width: 3.2em; font-size: 13px; color: var(--rb-muted); }
.rb-set__fs { display: flex; align-items: center; gap: 4px; }
.rb-set__fs button { width: 44px; height: 32px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--rb-rule); font-size: 14px; }
.rb-set__fs button:hover { box-shadow: inset 0 0 0 1px var(--rb-ink); }
.rb-set__fs output { min-width: 3.6em; text-align: center; font-family: "EB Garamond", var(--f-serif); font-size: 15px; }
.rb-set__sw { display: flex; gap: 6px; }
.rb-sw { height: 32px; padding: 0 12px; border-radius: 16px; font-size: 13px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.rb-sw--paper { background: #F5EEDD url("../img/tex-paper.png"); color: #2B251D; }
.rb-sw--white { background: #FBFAF6; color: #1F1D1A; }
.rb-sw--night { background: #1E1A15; color: #D7CCB7; box-shadow: none; }
.rb-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--rb-page), 0 0 0 3.5px var(--rb-acc); }
.rb-set .rb-seg { margin: 0; }
.rb-set__web { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--rb-rule); }
.rb-set__web button { font-size: 13px; color: var(--rb-muted); text-decoration: underline; text-underline-offset: 4px; }
.rb-set__web button:hover { color: var(--rb-ink); }

/* ---------- a plate, full screen ---------- */
.rb-lb { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgba(16, 12, 9, .95); }
.rb-lb__fig { margin: 0; display: grid; justify-items: center; gap: 14px; padding: 0 72px; }
.rb-lb__fig img { display: block; max-width: calc(100vw - 160px); max-height: calc(100vh - 140px); width: auto; height: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.rb-lb__fig img[src$=".svg"] { background: #F5EEDD; padding: 12px; }
.rb-lb__fig figcaption { max-width: 46em; color: #E8DDC8; font-family: var(--f-serif); font-size: 15px; line-height: 1.7; text-align: center; }
.rb-lb__fig figcaption .rb-fn { color: #E8A27A; }
.rb-lb__x { position: absolute; top: 12px; right: 16px; width: 46px; height: 46px; border-radius: 50%; color: #FFFFFF; font-size: 32px; line-height: 1; }
.rb-lb__nav { position: absolute; top: 50%; width: 60px; height: 96px; display: grid; place-items: center; transform: translateY(-50%); color: rgba(255, 255, 255, .7); }
.rb-lb__nav:hover { color: #FFFFFF; }
.rb-lb__nav i { width: 16px; height: 16px; border: solid currentColor; border-width: 0 0 2px 2px; transform: translateX(3px) rotate(45deg); }
.rb-lb__nav--next i { transform: translateX(-3px) rotate(-135deg); }
.rb-lb__nav--prev { left: 8px; }
.rb-lb__nav--next { right: 8px; }
.rb-lb__nav:disabled { visibility: hidden; }
.rb-lb__n { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .55); font-family: "EB Garamond", var(--f-serif); font-size: 15px; }

/* ---------- "where you left off" ---------- */
.rb-toast {
  position: fixed; z-index: 60; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 18px; border-radius: 24px; background: var(--rb-ink, #2B251D); color: var(--rb-page, #F5EEDD); font-size: 14px; white-space: nowrap;
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .55);
}
.rb-toast button[data-rb-resume] { height: 32px; padding: 0 16px; border-radius: 16px; background: var(--rb-acc); color: #FFFFFF; font-size: 13.5px; }
.rb-toast .rb-x { width: 32px; height: 32px; font-size: 20px; color: inherit; }
.rb-page .rb-toast { bottom: calc(var(--vh) - var(--sy) - var(--ph) + 10px); }

/* ---------- smaller screens: always the long page ---------- */
@container yh (max-width: 1199px) {
  .yh.rb-scroll .ag > .rail { display: none; }
}
@container yh (max-width: 760px) {
  .rb-bar { gap: 8px; padding: 0 6px 0 10px; height: 46px; }
  .rb-bar__ch, .rb-bar__tools .rb-seg, .rb-btn--web { display: none; }
  .rb-bar__book { overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
  .yh.rb-scroll .rd { padding-top: 46px; }
  .yh.rb-scroll .rd__head { padding: 64px 0 40px; }
  .yh.rb-on .rd__lab { font-size: 16px; }
  .yh.rb-on .rd__ttl { font-size: 27px; }
  .yh.rb-scroll .ag { --rb-col: calc(100% - 36px); }
  .yh.rb-scroll .ag > .rd__text { font-size: calc(17.5px * var(--rd-fs, 1)); line-height: 2; }
  .yh.rb-scroll .rd__text figure img { --mh: 72vh; }
  .rb-plate { gap: 1em .8em; }
  .rb-set { top: auto; bottom: 0; left: 0; right: 0; width: auto; padding: 16px 20px calc(18px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; }
  .rb-set__lay { display: none; }
  .rb-lb__fig { padding: 0 8px; }
  .rb-lb__fig img { max-width: calc(100vw - 16px); max-height: calc(100vh - 170px); }
  .rb-lb__nav { top: auto; bottom: 0; transform: none; height: 60px; }
  .rb-toast { left: 12px; right: 12px; transform: none; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .rb-bar, .rb-toc__panel, .rb-scrim, .rb-flow, .rb-end__next { transition: none !important; }
}
@media print {
  .rb-bar, .rb-spread, .rb-turns, .rb-foot, .rb-toc, .rb-set, .rb-lb, .rb-toast { display: none !important; }
  html:has(.yh.rb-page) { overflow: visible; }
  .yh.rb-page, .yh.rb-page .main, .yh.rb-page .rd { height: auto; overflow: visible; }
  .yh.rb-page .rb-clip { position: static; width: auto; height: auto; overflow: visible; }
  .yh.rb-page .rb-flow { width: auto; height: auto; columns: auto; transform: none; }
}