:root{
  --paper:#FAF9F6; --ink:#121212; --muted:#5B5B5B; --rule:#E4E1DA;
  --brand:#FFCC00; --shell:#141414; --shadow:rgba(0,0,0,.35);
  --fs:16px; --lh:1.78;
}
[data-theme="sepia"]{ --paper:#F6EFE2; --ink:#2A2118; --muted:#6B5B49; --rule:#E2D6C2; --shell:#2B2115;}
[data-theme="dark"]{ --paper:#1B1B1B; --ink:#EDEBE6; --muted:#A5A19A; --rule:#333; --shell:#0C0C0C; --shadow:rgba(0,0,0,.6);}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--shell);color:var(--ink);font-family:"IBM Plex Sans Thai Looped","Sarabun",system-ui,sans-serif;
  display:flex;flex-direction:column;overflow:hidden;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}

/* ---------- top bar ---------- */
.bar{display:flex;align-items:center;gap:10px;padding:10px 14px;color:#EDEBE6;background:var(--shell);
  border-bottom:1px solid rgba(255,255,255,.08);flex:0 0 auto}
.bar .brand{font-weight:700;font-size:14px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .brand span{color:var(--brand)}
.bar .spacer{flex:1}
.btn{appearance:none;border:1px solid rgba(255,255,255,.18);background:transparent;color:#EDEBE6;
  font:inherit;font-size:13px;padding:6px 11px;border-radius:999px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--brand);color:var(--brand)}
.btn.active{background:var(--brand);color:#121212;border-color:var(--brand)}

/* ---------- stage ---------- */
.stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:22px 16px;min-height:0}
.book{position:relative;display:flex;gap:0;perspective:2600px;max-width:100%;max-height:100%}
.page{position:relative;z-index:1;background:var(--paper);overflow:hidden;box-shadow:0 18px 50px var(--shadow)}
.page.left{border-radius:6px 0 0 6px}
.page.right{border-radius:0 6px 6px 0}
.single .page.left{display:none}
.single .page.right{border-radius:6px}
.page::after{content:"";position:absolute;top:0;bottom:0;width:26px;pointer-events:none}
.page.left::after{right:0;background:linear-gradient(to right,transparent,rgba(0,0,0,.10))}
.page.right::after{left:0;background:linear-gradient(to left,transparent,rgba(0,0,0,.10))}
.single .page::after{display:none}
.clip{position:absolute;inset:0;overflow:hidden;contain:paint}
.flow{position:absolute;top:0;left:0;will-change:transform}

/* ---------- turning page ---------- */
/* ตอนไม่ได้ใช้ ซ่อนด้วย opacity แบบที่ยังเก็บการคำนวณตำแหน่งไว้ ไม่ใช่ display:none
   และไม่ใช้ visibility เพราะมันตกทอดถึงลูกทุกตัว (ดู buildTurn ใน reader.js) */
/* กระดาษที่ใช้ตอนพลิก (ดู buildTurn ใน reader.js)
   ซ่อน/แสดงที่กล่องครอบชั้นนอกเท่านั้น ห้ามแตะ .turn
   เพราะ opacity บนตัวที่มี transform-style:preserve-3d จะทำให้มุมมองสามมิติถูกยุบทิ้ง */
/* ตอนไม่ได้ใช้ จอดไว้หลังหน้าหนังสือด้วย z-index ติดลบ ไม่ซ่อนด้วยวิธีอื่น
   หน้าหนังสือทึบแสงอยู่แล้วจึงบังมิด และการสลับ z-index เป็นงานของชั้นประกอบภาพล้วน
   ไม่ต้องคำนวณตำแหน่งใหม่ (ต่างจาก display:none และ content-visibility)
   และไม่ต้องวาดชั้นภาพใหม่ (ต่างจาก opacity)
   ห้ามใส่ opacity หรือ filter ที่ .turn เพราะจะทำให้มุมมองสามมิติถูกยุบ กระดาษจะกลายเป็นภาพกลับด้าน */
.turn-wrap{position:absolute;top:0;z-index:5;pointer-events:none;transform-style:preserve-3d}
.turn-wrap.off{z-index:-1}
.turn{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.4,.02,.2,1)}
/* contain:paint บอกเบราว์เซอร์ว่าไม่มีอะไรวาดเกินกรอบนี้
   มันจึงข้ามการไล่เนื้อหาทั้งเล่มที่อยู่นอกกรอบไปได้ ลดงานตอนวาดชั้นกระดาษครั้งแรก */
.turn .face{position:absolute;inset:0;backface-visibility:hidden;background:var(--paper);overflow:hidden;contain:paint;box-shadow:0 18px 50px var(--shadow)}
.turn .back{transform:rotateY(180deg)}
@media (prefers-reduced-motion: reduce){.turn{transition:none}}

/* ---------- typography inside pages ---------- */
.flow{font-family:"Sarabun","Noto Sans Thai",sans-serif;font-size:var(--fs);line-height:var(--lh);color:var(--ink);text-align:justify;text-justify:inter-character;hyphens:none}
/* ทุกบทและทุกภาคต้องเริ่มหน้าใหม่เหมือนหนังสือจริง
   สั่งที่ระดับ section ไม่ใช่ที่ h1 เพราะ h1 เป็นลูกตัวแรกของ section เสมอ
   กฎ h1:first-child เดิมจึงยกเลิกการขึ้นหน้าใหม่ไปทั้งหมด */
.flow > section{break-before:column}
/* กล่องที่มัดหัวข้อไว้กับเนื้อหาแรก ห้ามถูกแบ่งกลาง (ดู keepHeadingsWithBody ใน reader.js) */
.flow .keep{break-inside:avoid}
/* หัวข้อที่วัดแล้วยังค้างท้ายหน้า สั่งให้ขึ้นหน้าใหม่ไปเลย (ดู fixOrphanHeadings) */
.flow .push-col{break-before:column}
/* li ที่ถูกดันต้องสั่งที่ตัวมันเอง ไม่ใช่ที่ ul ทั้งก้อน */
.flow li.push-col{break-before:column}
.flow > section:first-child{break-before:auto}
.flow h1{font-family:"IBM Plex Sans Thai Looped","Sarabun",sans-serif;text-align:left;font-size:1.82em;
  line-height:1.35;margin:0 0 .25em;break-after:avoid;letter-spacing:-.01em}
/* ระยะเหนือหัวข้อต้องมากกว่าระยะใต้หัวข้ออย่างชัดเจน หนังสือจริงเว้นแบบนี้
   เพื่อให้หัวข้อเกาะกับเนื้อหาของตัวเอง ไม่ใช่ลอยอยู่กลางระหว่างสองเรื่อง
   ค่า em ที่นี่อิงขนาดตัวอักษรของหัวข้อเอง จึงตั้งให้ผลลัพธ์เทียบเท่ากันทุกระดับ */
.flow h2{font-family:"IBM Plex Sans Thai Looped","Sarabun",sans-serif;text-align:left;font-size:1.24em;line-height:1.45;margin:1.75em 0 .55em;break-after:avoid;color:var(--ink)}
.flow h3{font-family:"IBM Plex Sans Thai Looped","Sarabun",sans-serif;text-align:left;font-size:1.06em;line-height:1.5;margin:1.95em 0 .5em;break-after:avoid}
.flow h4{font-family:"IBM Plex Sans Thai Looped","Sarabun",sans-serif;text-align:left;font-size:1em;line-height:1.55;margin:1.9em 0 .5em;break-after:avoid;font-weight:700}
/* ย่อหน้าตัวหนาล้วนที่ต้นฉบับใช้แทนหัวข้อย่อย (คลาสใส่จาก reader.js) ต้องเว้นเท่าหัวข้อจริง */
.flow p.subhead{margin:1.9em 0 .55em;line-height:1.55}
/* จัดแบบหนังสือจริง: ขึ้นย่อหน้าใหม่ด้วยการย่อบรรทัดแรก ไม่ใช่เว้นบรรทัดว่างแบบเว็บ
   ย่อหน้าแรกของแต่ละหัวข้อ/รูป/ลิสต์ ไม่ย่อ เป็นธรรมเนียมการจัดหน้าหนังสือ
   เพราะมันขึ้นต้นก้อนใหม่อยู่แล้ว ไม่ต้องมีอะไรมาบอกซ้ำ */
.flow p{margin:0 0 .12em; text-indent:1.6em; orphans:2; widows:2}
/* รายการที่ไม่ย่อบรรทัดแรก ตรงตามตัวจัดหน้าของเล่มจริง
   (print_template.py: p.first, p.nofirst, p.caption, p.note, p.num, .keep p, .partpage p) */
.flow p.subhead, .flow p.cap, .flow p.note, .flow p.numline{text-indent:0}
.flow .keep p, .flow blockquote p, .flow li p{text-indent:0}
/* หน้าเปิดภาค มีแต่ชื่อภาคกับรายชื่อบท ไม่ใช่เนื้อเรื่อง ทั้งหน้าไม่ย่อ */
.flow section[data-kind="part"] p{text-indent:0}
.flow > section > p:first-child,
.flow h1 + p, .flow h2 + p, .flow h3 + p, .flow h4 + p,
.flow p.subhead + p, .flow p.numline + p,
.flow figure + p, .flow ul + p, .flow ol + p,
.flow pre + p, .flow blockquote + p, .flow .table-wrap + p, .flow table + p{text-indent:0}
/* บรรทัดที่ขึ้นต้นด้วยตัวเลขลำดับ จัดเป็นรายการ ไม่ใช่ย่อหน้าเล่าเรื่อง */
.flow p.numline{margin:0 0 .45em;padding-inline-start:1.1em}
/* ขึ้นต้นภาคหรือขึ้นต้นกล่องที่มัดหัวข้อไว้ ไม่ต้องเว้นบน ไม่งั้นหัวหน้าจะมีช่องว่างลอย */
.flow > section > *:first-child,
.flow > section > *:first-child > *:first-child{margin-top:0}
.flow ul{margin:0 0 1em;padding-inline-start:1.15em;text-align:left}
.flow li{margin:0 0 .45em}
.flow blockquote{font-family:"IBM Plex Sans Thai Looped","Sarabun",sans-serif;text-align:left;margin:0 0 .9em;break-inside:avoid;padding:.85em 1em;border-inline-start:3px solid var(--brand);
  background:color-mix(in srgb,var(--brand) 10%,transparent);font-size:.95em}
.flow code{font-family:"IBM Plex Mono",monospace;font-size:.86em;background:color-mix(in srgb,var(--ink) 7%,transparent);padding:.1em .35em;border-radius:3px}
/* ห้ามใส่ overflow ให้บล็อกโค้ด เพราะกล่องที่เลื่อนได้จะผ่าข้ามหน้าไม่ได้
   บล็อกยาว ๆ เลยกระโดดไปทั้งก้อนแล้วทิ้งหัวข้อค้างไว้ท้ายหน้า
   อีกอย่างหนังสือเล่มนี้พลิกทีละหน้า แถบเลื่อนแนวนอนในหน้าก็ใช้ไม่ได้อยู่แล้ว */
.flow pre{background:color-mix(in srgb,var(--ink) 6%,transparent);padding:.9em 1em;border-radius:6px;font-size:.82em;line-height:1.6;
  white-space:pre-wrap;overflow-wrap:break-word}
.flow pre code{background:none;padding:0}
.flow figure{margin:1.1em 0;text-align:center;break-inside:avoid}
/* คำบรรยายภาพถูกย้ายเข้ามาไว้ใน figure โดย attachFigureCaptions */
.flow figure .cap{margin:.55em 0 0;text-align:center}
.flow em{color:var(--muted);font-style:normal;font-size:.9em}
.flow strong{font-weight:600}
.flow .table-wrap{overflow-x:auto;margin:0 0 1.1em;break-inside:avoid}
.flow table{border-collapse:collapse;width:100%;font-size:.88em}
.flow th,.flow td{border-bottom:1px solid var(--rule);padding:.5em .6em;text-align:start;vertical-align:top}
.flow th{font-weight:600}
.flow hr{border:0;border-top:1px solid var(--rule);margin:1.4em 0}

.folio{position:absolute;bottom:14px;font-size:11px;color:var(--muted);letter-spacing:.06em}
.page.left .folio{left:22px}
.page.right .folio{right:22px}

/* ---------- cover ---------- */
.cover{position:absolute;inset:0;z-index:40;background:var(--shell);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;padding:24px}
.cover img{max-height:64vh;border-radius:8px;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.cover .cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* โครงร่างระหว่างรอ ต้องมีรูปร่างเท่าของจริงทุกชิ้น ทั้งปกและปุ่ม
   เพื่อให้ตอนของจริงมาถึงไม่มีอะไรขยับ และระหว่างรอก็ไม่มีชิ้นไหนโผล่มาเดี่ยว ๆ
   ขนาดปกอิงจาก .cover img (สูง 64vh) และปุ่มอิงจาก .cover .cta .btn */
.cover .skel{height:64vh;aspect-ratio:1/1.414;max-width:62vw;border-radius:8px;
  box-shadow:0 30px 70px rgba(0,0,0,.55)}
.cover .skel-btn{width:132px;height:36px;border-radius:999px}
/* ข้อความสำหรับโปรแกรมอ่านหน้าจอเท่านั้น ไม่ให้เห็นบนจอ */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.cover .skel,.cover .skel-btn{
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(100deg,rgba(255,255,255,.035) 30%,rgba(255,255,255,.09) 50%,rgba(255,255,255,.035) 70%);
  background-size:220% 100%;animation:skel 1.6s ease-in-out infinite}
@keyframes skel{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.cover .skel,.cover .skel-btn{animation:none}}

/* ---------- nav zones ---------- */
.zone{position:absolute;top:0;bottom:0;width:15%;z-index:4;cursor:pointer;border:0;background:transparent}
.zone.prev{left:0}.zone.next{right:0}
.nav{display:flex;align-items:center;gap:12px;padding:8px 14px 12px;color:#C9C6BF;flex:0 0 auto}
/* ปุ่มพลิกหน้าใต้เล่ม ขนาดแตะได้สะดวกบนมือถือ */
.pager{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid #4A4742;
  background:transparent;color:#E8E5DE;font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.pager:hover{background:#26231F;border-color:#6B665E}
.pager:disabled{opacity:.3;cursor:default;background:transparent;border-color:#3A3733}
.track{flex:1;height:4px;border-radius:999px;background:rgba(255,255,255,.14);position:relative;cursor:pointer}
.track .fill{position:absolute;inset:0;width:0;background:var(--brand);border-radius:999px}
.count{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- toc ---------- */
.toc{position:absolute;inset:0;z-index:50;background:rgba(10,10,10,.72);backdrop-filter:blur(3px);display:flex}
.toc .panel{width:min(460px,86vw);background:var(--paper);color:var(--ink);padding:22px;overflow:auto}
.toc h3{margin:0 0 14px;font-size:18px}
.toc button.item{display:flex;width:100%;gap:12px;align-items:baseline;text-align:start;border:0;background:none;
  font:inherit;color:inherit;padding:9px 6px;border-bottom:1px solid var(--rule);cursor:pointer}
.toc button.item:hover{background:color-mix(in srgb,var(--brand) 16%,transparent)}
.toc .item .pg{margin-inline-start:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.toc .item.part{font-weight:700}
.toc .rest{flex:1}
@media (max-width:820px){ .bar .hide-sm{display:none} }

/* ── คืนค่าพื้นฐานของแท็กเนื้อหา ─────────────────────────────────
   ตัวอ่านเดิมเป็นหน้า HTML เปล่า ๆ จึงพึ่งค่าเริ่มต้นของเบราว์เซอร์ได้
   แต่ในเว็บนี้มี Tailwind preflight ที่รีเซ็ตหัวข้อเป็น font-weight: inherit
   และรีเซ็ตรายการเป็น list-style: none เนื้อหาหนังสือเลยเพี้ยน
   ค่าด้านล่างคือค่าที่วัดจากตัวอ่านต้นฉบับโดยตรง ไม่ได้ตั้งขึ้นเอง */
.flow h1, .flow h2, .flow h3, .flow h4, .flow h5, .flow h6 { font-weight: 600; }

/* ปุ่มบนแถบและบนหน้าปก Tailwind preflight รีเซ็ต font-weight ของ button เป็น
   inherit ตัวอักษรเลยบางกว่าที่ควร ปุ่มหลักอย่าง "เริ่มอ่าน" ต้องอ่านง่ายชัดเจน */
/* ── สารบัญ จัดใหม่ให้อ่านสบายขึ้น ─────────────────────────────
   ของเดิมใช้ตัวอักษร 16px เท่าเนื้อหา พอรายการยาวสองบรรทัดและมีหลายสิบรายการ
   จะดูแน่นจนหาบทที่ต้องการยาก ปรับให้ชื่อบทเล็กลงเล็กน้อย เพิ่มระยะหายใจของแถว
   และแยก "ภาค" ออกมาเป็นหัวกลุ่มแทนที่จะเป็นรายการหนาเหมือนกันหมด */
.toc .panel { padding: 22px 20px 30px; }
.toc h3 {
  margin: 0 0 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.toc button.item {
  font-size: 13.5px; line-height: 1.55; padding: 11px 4px; gap: 12px;
  align-items: start; color: var(--ink);
}
.toc button.item > span:first-child { flex: 1; }
.toc .item .pg { font-size: 11.5px; padding-top: 2px; }
/* ภาค เป็นหัวข้อกลุ่ม ไม่ใช่รายการที่กดไปอ่าน จึงทำให้เบาลงและเว้นด้านบน */
.toc .item.part {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-top: 18px; padding-bottom: 6px; border-bottom-color: transparent;
}
.toc .item.part:first-child { margin-top: 0; }
@media (max-width: 560px) {
  .toc .panel { width: 100%; padding: 18px 16px 26px; }
  .toc button.item { font-size: 13px; padding: 10px 2px; }
}

/* รูปประกอบกว้างเต็มคอลัมน์พอดีจะไปชนขอบและดูเหมือนทับเส้นแบ่งหน้า
   เว้นช่องไฟด้านข้างไว้ และเพิ่มระยะห่างจากข้อความบนล่างให้อ่านสบาย */
.flow figure { margin: 1.5em 0; padding-inline: 10px; }
.flow figure img { display: block; margin: 0 auto; max-width: calc(100% - 12px); height: auto; }
.flow figure figcaption { margin-top: .6em; font-size: .82em; color: var(--muted); text-align: center; line-height: 1.5; }
.flow > section > img, .flow p > img { display: block; margin: 1.5em auto; max-width: calc(100% - 12px); height: auto; }

.btn { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.btn svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* จอแคบเหลือเฉพาะไอคอน ปุ่มยังกดได้ครบทุกอัน ดีกว่าซ่อนปุ่มทิ้งแบบเดิมที่ทำให้
   ปรับขนาดตัวอักษรกับเปลี่ยนธีมบนมือถือไม่ได้เลย */
@media (max-width: 720px) {
  .bar { gap: 6px; padding: 9px 10px; }
  .bar .brand { font-size: 13px; }
  .btn { padding: 7px 10px; }
  .btn .label { display: none; }
  .bar .hide-sm { display: inline-flex; }
}
@media (max-width: 430px) {
  .bar .brand span { display: none; }
  .nav { gap: 8px; padding: 6px 10px 10px; }
  .pager { width: 36px; height: 36px; font-size: 19px; }
  .count { font-size: 11px; }
  .stage { padding: 12px 8px; }
}
.cover .cta .btn { font-weight: 700; font-size: 14px; padding: 9px 18px; }
.flow ul { list-style: disc; }
.flow ol { list-style: decimal; }
.flow li { display: list-item; }
.toc .panel h3 { font-weight: 600; }