dialog.folio-reader {
  --folio-paper:#f7f4ec;
  --folio-ink:#242720;
  --folio-rule:#c7c4b6;
  --folio-accent:#8c4437;
  --folio-serif:"Songti SC","Source Han Serif SC","Noto Serif CJK SC",SimSun,serif;
  --folio-sans:"Microsoft YaHei","PingFang SC",sans-serif;
  width:min(1170px,94vw); max-width:none; max-height:94dvh;
  margin:auto; padding:0; border:0; overflow:hidden;
  background:var(--folio-paper); color:var(--folio-ink); font-family:var(--folio-serif);
}
dialog.folio-reader[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.folio-reader [hidden] { display:none !important; }
.folio-reader button { font:inherit; background:none; border:0; color:inherit; cursor:pointer; }
.folio-reader button:focus-visible,.folio-reader a:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.folio-toolbar,.folio-bottom {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 clamp(18px,3.3vw,46px); font:13px/1.4 var(--folio-sans);
}
.folio-toolbar { min-height:47px; border-bottom:1px solid var(--folio-rule); }
.folio-toolbar>span { font:600 15px/1.5 var(--folio-serif); letter-spacing:.035em; }
.folio-toolbar i { color:#9c998b; font-style:normal; padding:0 7px; }
.folio-toolbar>div { display:flex; align-items:center; gap:12px; }
.folio-index-toggle,.folio-close { min-height:40px; padding:0 6px; }
.folio-toolbar .folio-close { font:26px/1 Georgia,serif; min-width:36px; }
.folio-bottom { min-height:49px; border-top:1px solid var(--folio-rule); }
.folio-bottom button { min-width:80px; min-height:44px; padding:6px 0; }
.folio-bottom .folio-prev { text-align:left; }
.folio-bottom .folio-next { text-align:right; color:var(--folio-accent); }
.folio-bottom button:disabled { color:#79766e; cursor:default; }
.folio-position { color:#625f52; font:italic 15px Georgia,serif; font-variant-numeric:tabular-nums; }
.folio-scroll { overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.folio-spread {
  --folio-muted:#5c6254;
  display:grid; grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);
  min-height:500px; color:var(--folio-ink); touch-action:pan-y pinch-zoom;
}
.folio-plate { min-width:0; display:flex; flex-direction:column; }
.folio-plate figure { display:flex; flex:1; flex-direction:column; margin:0; min-width:0; }
.folio-art { position:relative; flex:1; overflow:hidden; min-height:240px; background:center/cover no-repeat; }
.folio-art[data-page="0"] { background-image:url("assets/folio-survey.webp"); background-position:55% 50%; }
.folio-art[data-page="1"] { background-image:url("assets/fa-ruozhen-winter.webp"); background-position:66% 50%; }
.folio-art[data-page="2"] { background-image:url("assets/folio-yi.webp"); background-position:54% 50%; }
.folio-art[data-page="3"] { container-type:size; }
.folio-art[data-page="3"]::before {
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:max(100cqw,150cqh); aspect-ratio:3/2; background:url("assets/education-quartet.webp") left bottom/200% 200%;
}
.folio-plate figcaption { margin:9px 0 0; color:var(--folio-muted); font:11px/1.55 var(--folio-sans); }
.folio-plate blockquote { margin:0; font:400 clamp(28px,3.1vw,47px)/1.32 var(--folio-serif); letter-spacing:-.035em; }
.folio-copy { min-width:0; padding:clamp(28px,3.9vw,56px); align-self:center; }
.folio-rubric { display:flex; align-items:center; gap:11px; font:13px/1.65 var(--folio-sans); color:var(--folio-accent); }
.folio-rubric i { width:26px; height:1px; background:currentColor; }
.folio-rubric small { color:var(--folio-muted); font:inherit; }
.folio-reader .folio-copy h2,.folio-reader .folio-contents h2 {
  margin:20px 0 23px; color:inherit; font:600 clamp(38px,4.35vw,65px)/1.16 var(--folio-serif);
  letter-spacing:-.065em; text-wrap:balance;
}
.folio-copy h2:focus { outline:none; }
.folio-prose { max-width:35em; font:17px/1.99 var(--folio-serif); text-align:justify; }
.folio-prose p { margin:0; }
.folio-prose p+p { margin-top:.8em; }
.folio-references { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 14px; margin-top:21px; border-top:1px solid var(--folio-rule); padding-top:8px; font:12px/1.7 var(--folio-sans); }
.folio-references a,.folio-references button { padding:4px 0; text-align:left; text-decoration:underline; text-underline-offset:4px; }
.folio-references button { color:var(--folio-accent); }
.folio-references a { color:var(--folio-muted); }
.folio-spread[data-topic="毛选"] .folio-plate { background:#343c32; color:#f7f4e6; padding:clamp(26px,3vw,43px); }
.folio-spread[data-topic="毛选"] figcaption { color:#d2d5c7; }
.folio-spread[data-topic="毛选"] blockquote { margin-top:28px; padding-top:13px; border-top:1px solid #7e8778; }
.folio-spread[data-topic="古籍"] { display:block; }
.folio-spread[data-topic="古籍"] .folio-plate { display:grid; grid-template-columns:auto 1fr; padding:24px clamp(25px,3.9vw,56px) 0; gap:28px; }
.folio-spread[data-topic="古籍"] blockquote {
  grid-column:1; grid-row:1; align-self:center; writing-mode:vertical-rl; color:#343b38;
  font-size:clamp(17px,1.55vw,23px); letter-spacing:.12em;
}
.folio-spread[data-topic="古籍"] figure { grid-column:2; grid-row:1; }
.folio-spread[data-topic="古籍"] .folio-art { min-height:0; flex:none; aspect-ratio:5.1; }
.folio-spread[data-topic="古籍"] figcaption { text-align:right; }
.folio-spread[data-topic="古籍"] .folio-copy { display:grid; grid-template-columns:.9fr 1.13fr; gap:0 7%; padding-block:23px 30px; }
.folio-spread[data-topic="古籍"] .folio-rubric { align-self:end; }
.folio-spread[data-topic="古籍"] h2 { grid-column:1; grid-row:2; }
.folio-spread[data-topic="古籍"] .folio-prose { grid-column:2; grid-row:1 / 4; }
.folio-spread[data-topic="古籍"] .folio-references { align-self:start; }
.folio-spread[data-topic="玄学"] {
  --folio-muted:#c6c0b1; --folio-accent:#edc58f; --folio-rule:#626055;
  background:#252621; color:#f8f1df;
}
.folio-spread[data-topic="玄学"] .folio-plate { position:relative; grid-column:2; grid-row:1; background:#171917; padding-bottom:18px; }
.folio-spread[data-topic="玄学"] .folio-copy { grid-column:1; grid-row:1; }
.folio-spread[data-topic="玄学"] figcaption { margin-inline:22px; }
.folio-spread[data-topic="玄学"] blockquote { order:-1; color:#edc58f; padding:24px 22px 17px; font-size:clamp(30px,3.3vw,51px); }
.folio-spread[data-topic="教育"] .folio-plate { padding:26px 0 22px 26px; }
.folio-spread[data-topic="教育"] .folio-art { background-color:#c8a580; }
.folio-spread[data-topic="教育"] blockquote { margin-top:22px; color:#71432d; }
.folio-contents { padding:clamp(24px,4vw,60px); min-height:400px; }
.folio-reader .folio-contents h2 { margin:0 0 28px; }
.folio-contents ol { margin:0; padding:0; list-style:none; }
.folio-contents li { border-top:1px solid var(--folio-rule); }
.folio-contents button { width:100%; display:grid; grid-template-columns:2em 3em minmax(0,1fr) auto; text-align:left; align-items:baseline; gap:12px; padding:17px 4px; }
.folio-contents button[aria-current="page"],.folio-contents button:hover { color:var(--folio-accent); }
.folio-contents small { font:italic 16px Georgia,serif; }
.folio-contents span { font:13px var(--folio-sans); }
.folio-contents strong { font-size:clamp(18px,2vw,27px); font-weight:500; }
.folio-contents i { font:16px Georgia,serif; }
@media(min-width:761px) {
  .folio-title-line { display:block; }
}
@media(max-width:760px) {
  dialog.folio-reader { width:min(100vw,590px); max-height:97dvh; }
  .folio-toolbar,.folio-bottom { padding-inline:18px; min-height:45px; }
  .folio-spread { display:flex; flex-direction:column; min-height:0; }
  .folio-copy,.folio-spread[data-topic="古籍"] .folio-copy { display:block; width:100%; padding:23px 6% 26px; }
  .folio-reader .folio-copy h2 { font-size:clamp(31px,8.3vw,45px); margin:10px 0 17px; }
  .folio-prose { font-size:16px; line-height:1.88; }
  .folio-rubric { font-size:12px; }
  .folio-art { flex:none; min-height:0; height:clamp(150px,46vw,221px); }
  .folio-plate figcaption { margin-top:6px; font-size:10px; }
  .folio-spread[data-topic="毛选"] .folio-plate,.folio-spread[data-topic="教育"] .folio-plate {
    display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px; padding:18px 6% 14px;
  }
  .folio-spread[data-topic="毛选"] blockquote,.folio-spread[data-topic="教育"] blockquote {
    margin:0 0 13px; border:0; padding:0; writing-mode:vertical-rl; font-size:clamp(17px,4.8vw,24px); letter-spacing:.07em;
  }
  .folio-spread[data-topic="古籍"] .folio-plate { padding:19px 6% 0; gap:15px; }
  .folio-spread[data-topic="古籍"] .folio-art { height:clamp(163px,46vw,210px); aspect-ratio:auto; }
  .folio-spread[data-topic="古籍"] blockquote { font-size:15px; }
  .folio-spread[data-topic="玄学"] .folio-plate { padding:0 0 12px; }
  .folio-spread[data-topic="玄学"] blockquote {
    position:absolute; top:13px; left:6%; writing-mode:vertical-rl; background:#20211e; margin:0; padding:8px 3px;
    font-size:21px; letter-spacing:.10em;
  }
  .folio-references { margin-top:17px; }
  .folio-contents { min-height:0; }
  .folio-contents button { gap:8px; }
}