:root{--ink:#193d43;--green:#21665e;--paper:#f5f3eb;--line:#d8dfd8}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font-family:"Microsoft JhengHei","Noto Sans TC",sans-serif}button,a,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:7px;padding:9px 12px;color:var(--ink)}button:hover{background:#e9f0ea}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #d18a30;outline-offset:3px}a{color:var(--green)}header{height:92px;display:flex;align-items:center;justify-content:space-between;padding:18px 36px;background:#fffdf8;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:14px}.seal{border-radius:50%;width:48px;height:48px;display:grid;place-items:center;background:var(--green);color:#fff;font-family:serif;font-size:27px}h1{font-size:21px;letter-spacing:2px;margin:0}header p{font-size:12px;letter-spacing:1px;margin:5px 0 0;color:#647570}.head-actions{display:flex;gap:12px;align-items:center}.download{background:var(--green);color:#fff;text-decoration:none;padding:12px 17px;border-radius:7px;font-size:14px}.download span{margin-left:10px}#tocToggle{display:none}.layout{display:flex;min-height:calc(100vh - 92px)}aside{width:266px;flex:none;border-right:1px solid var(--line);padding:32px 22px;background:#eeeee4}.aside-heading{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#587264;letter-spacing:2px}#closeToc{display:none}aside h2{font-family:serif;font-size:25px;margin:12px 0}.intro{font-size:12px;line-height:1.8;color:#6b7870;margin-bottom:24px}nav{display:grid;gap:4px}nav a{display:flex;justify-content:space-between;gap:8px;padding:11px 10px;text-decoration:none;border-radius:7px;font-size:13px}nav a span{color:#7c8982;font-size:12px}nav a:hover{background:#e2e7dc}nav a[aria-current=page]{background:var(--green);color:white}nav a[aria-current=page] span{color:#d2e5df}.aside-foot{border-top:1px solid #cdd8ce;margin-top:26px;padding-top:20px;color:#657969;font-family:serif;line-height:1.9;letter-spacing:2px;font-size:14px}main{min-width:0;flex:1;padding:24px 30px}.read-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}.eyebrow{font-size:11px;letter-spacing:2px;color:#718179}.read-heading h2{margin:7px 0 0;font-size:20px}.view-tools{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.view-tools button{font-size:12px;padding:8px 10px}#viewport{overflow:auto;border-radius:8px;background:#e5e9e0;padding:22px;min-height:320px;max-height:calc(100vh - 245px);scrollbar-color:#9cae9f #e5e9e0}#book{display:flex;align-items:flex-start;justify-content:center;gap:5px;min-height:260px;margin:auto;width:max-content;min-width:100%}.page{position:relative;flex:none;background:#fff;box-shadow:0 7px 20px #20382a29;margin:0}.page img{display:block;width:100%;height:100%}.page a.hotspot{position:absolute;border:2px solid transparent}.page a.hotspot:hover,.page a.hotspot:focus-visible{border-color:#ce8c3e;background:#ffdc7c33}.page .failed{position:absolute;inset:20%;background:#fff;padding:20px;line-height:1.8}.paging{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:19px}.paging button{font-size:13px}.paging form{display:flex;align-items:center;gap:7px;font-size:13px}input{border:1px solid var(--line);border-radius:6px;padding:8px;width:64px;text-align:center;color:var(--ink)}#status{text-align:center;font-size:12px;color:#6b7c70;min-height:16px;margin:10px 0}details{max-width:900px;margin:16px auto;background:#fffdf8;border:1px solid var(--line);border-radius:8px;padding:14px 18px;font-size:14px}summary{cursor:pointer}#pageText{line-height:1.9}#pageText pre{white-space:pre-wrap;font:inherit}#pageText h3{font-size:15px;border-bottom:1px solid var(--line);padding-bottom:8px}footer{text-align:center;color:#6c7c70;font-size:12px;line-height:1.9;margin:16px 0}footer span{font-size:11px}.skip{position:fixed;top:-80px;padding:12px;background:white;z-index:50}.skip:focus{top:5px}body:fullscreen{overflow:auto} @media(max-width:1050px){aside{width:225px;padding:25px 15px}main{padding:20px 16px}.read-heading{align-items:flex-start}.view-tools{max-width:270px}}@media(max-width:760px){header{height:78px;padding:12px 15px}.seal{display:none}h1{font-size:17px;letter-spacing:1px}header p{font-size:10px}.head-actions{gap:6px}.download{font-size:12px;padding:10px}#tocToggle{display:block;font-size:12px;padding:9px}aside{display:none;position:fixed;top:0;bottom:0;left:0;width:min(85vw,320px);z-index:20;overflow:auto;box-shadow:0 0 0 100vmax #102d3b66}aside.open{display:block}#closeToc{display:block}.layout{min-height:calc(100vh - 78px)}main{padding:18px 10px}.read-heading{gap:8px;margin-bottom:14px}.read-heading h2{font-size:17px}.eyebrow{font-size:10px;letter-spacing:1px}.view-tools{max-width:195px;gap:4px}.view-tools button{padding:7px;font-size:11px}#mode{display:none}#viewport{padding:10px;max-height:calc(100dvh - 230px);min-height:260px}.paging{gap:8px}.paging>button{padding:10px}.paging>button span{display:none}.paging form{gap:5px;font-size:12px}details{font-size:14px}footer{font-size:11px}}
@media(min-width:761px){aside{height:calc(100vh - 92px);overflow:auto;position:sticky;top:0}}

/* The actual pages and their links remain underneath a temporary turning sheet. */
#book{position:relative;isolation:isolate}
.turn-layer{position:absolute;inset:0;z-index:5;perspective:1800px;pointer-events:none}
.turn-leaf{position:absolute;transform-style:preserve-3d;will-change:transform;z-index:2}
.turn-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;overflow:hidden;box-shadow:0 8px 24px #193d4338}
.turn-back{transform:rotateY(180deg)}
.turn-face::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#193d4326,transparent 16%,transparent 84%,#193d431a);pointer-events:none}
.turn-snapshot{margin:0;box-shadow:none!important;pointer-events:none}
.turn-face>.turn-snapshot{width:100%!important;height:100%!important}
.turn-fixed{position:absolute;z-index:1}
#animation[aria-pressed=true]{background:#e9f0ea;border-color:#9ab4a6}
@media(prefers-reduced-motion:reduce){.turn-layer{display:none}}

/* Keep the controls compact and give the available window space to the book. */
header{height:56px;padding:7px 18px}
.brand{gap:9px}.seal{width:34px;height:34px;font-size:21px}
h1{font-size:17px;letter-spacing:1px}header p{font-size:10px;margin-top:2px}
.head-actions{gap:7px}.download{padding:8px 12px;font-size:12px}
#tocToggle{display:block;font-size:12px;padding:7px 10px}
.layout{min-height:calc(100vh - 56px)}
aside{width:184px;padding:12px 10px}
.aside-heading{font-size:11px;letter-spacing:0;min-height:28px}
.aside-heading>span{font-size:0}.aside-heading>span::after{content:'篇章目錄';font-size:13px;font-weight:bold}
#closeToc{display:block;padding:2px 8px;font-size:17px}
aside h2,aside .intro,.aside-foot{display:none}
nav{gap:2px;margin-top:5px}nav a{font-size:12px;padding:8px 7px;gap:4px}nav a span{font-size:11px;flex:none}
main{padding:8px 12px}
.read-heading{gap:8px;align-items:center;margin-bottom:7px;min-height:32px}
.eyebrow{display:none}.read-heading h2{font-size:16px;margin:0}
.view-tools{max-width:none;gap:4px}.view-tools button{font-size:12px;padding:6px 8px}
#viewport{padding:8px;border-radius:5px;min-height:0;max-height:none}
#book{min-height:0;gap:3px}
.paging{gap:12px;margin-top:7px}.paging button{padding:6px 10px;font-size:12px}
.paging form{font-size:12px;gap:5px}input{width:58px;padding:5px}
#status{font-size:11px;min-height:14px;line-height:14px;margin:4px 0 0}
details{margin:10px auto;padding:9px 12px;font-size:13px}footer{margin:9px 0;font-size:11px}
@media(min-width:761px){
 aside{height:calc(100vh - 56px);position:sticky;top:0;overflow:auto}
 body.toc-collapsed aside{display:none}
}
@media(max-width:760px){
 header{height:52px;padding:6px 10px}.brand{gap:0}h1{font-size:15px}header p{font-size:9px}
 .download{padding:8px;font-size:11px}.download span{margin-left:3px}
 #tocToggle{padding:7px;font-size:11px}.head-actions{gap:4px}
 .layout{min-height:calc(100vh - 52px)}
 aside{width:min(82vw,280px);padding:12px;height:100dvh}
 aside nav a{font-size:14px;padding:11px 8px;min-height:42px}
 main{padding:6px}.read-heading{flex-wrap:wrap;gap:5px;min-height:32px;margin-bottom:5px}
 .read-heading h2{font-size:14px}.view-tools{gap:3px}
 .view-tools button{padding:7px 6px;font-size:11px;min-height:32px}
 #viewport{padding:5px}.paging{gap:8px;margin-top:6px}
 .paging button{min-height:36px;padding:7px 9px}
}