:root{color-scheme:dark;--paper:#f1eee7;--muted:#8a8985;--red:#ff3020}*{box-sizing:border-box}body{margin:0;background:#0c0c0c;color:var(--paper);font:13px Arial,Helvetica,sans-serif;min-height:100svh;display:flex;flex-direction:column}a{color:inherit;text-decoration:none}button{color:inherit;font:inherit;cursor:pointer;border:0;background:none}button:disabled{opacity:.18;cursor:default}button:focus-visible,a:focus-visible,.book:focus-visible{outline:2px solid var(--red);outline-offset:4px}.topbar{height:98px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #282828;margin:0 4vw}.wordmark{font-weight:900;letter-spacing:-2px;font-size:31px;display:flex;align-items:center;gap:25px}.wordmark span{font-weight:400;letter-spacing:1.5px;font-size:10px;color:var(--muted)}nav{display:flex;gap:24px;align-items:center}nav button{padding:12px 0}.menu-icon{font-size:14px;margin-right:5px}.download{border:1px solid #454540;padding:12px 17px;font-size:12px}.download span{padding-left:18px}nav a:hover,nav button:hover{color:#fff;border-color:#aaa}main{width:100%;max-width:1640px;margin:auto;flex:1;padding:30px 4vw 18px;display:flex;flex-direction:column;justify-content:center}.edition{display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:2px;color:var(--muted);padding:0 38px 12px}.edition i{font-style:normal;color:var(--red);font-size:18px;margin-left:15px;vertical-align:middle}.reader{position:relative;padding:0 34px}.viewport{overflow:auto;scrollbar-width:thin;scrollbar-color:#555 transparent;max-height:calc(100svh - 230px)}.book{position:relative;width:100%;aspect-ratio:16/9;perspective:2200px;touch-action:pan-y;isolation:isolate;outline:0}.current-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;display:block}.side{position:absolute;top:46%;font-size:24px;padding:12px 2px;transition:color .2s}.side:hover:not(:disabled){color:var(--red)}.previous{left:0}.next{right:0}.reading-bar{display:flex;align-items:center;gap:25px;margin:13px 38px 0;border-top:1px solid #282828;padding-top:15px}.reading-bar #section-name{text-align:left;min-width:185px;padding:0;font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:1px}.reading-bar #section-name span{color:#aaa;margin-left:12px;letter-spacing:0}.progress{display:flex;gap:4px;flex:1}.progress button{height:20px;position:relative;flex:1;padding:0}.progress button:before{content:'';position:absolute;left:0;right:0;top:9px;height:2px;background:#333}.progress button.visited:before{background:#777}.progress button.active:before{background:var(--red);height:3px}.view-tools{display:flex;align-items:center;gap:20px}.view-tools button{font-size:11px;color:#bbb;padding:3px}.view-tools #fullscreen{font-size:22px}.reader-hint{display:flex;justify-content:space-between;margin:22px 38px 0;font-size:9px;letter-spacing:1.3px;color:#71716c}.reader-hint #hint{letter-spacing:0;font-size:10px}footer{margin:0 4vw;border-top:1px solid #282828;display:flex;justify-content:space-between;padding:18px 0;color:#757570;font-size:9px;letter-spacing:1.4px}footer a:hover{color:var(--paper)}footer a span{margin-left:10px}.hotspots{position:absolute;inset:0;z-index:2}.hotspot{position:absolute;display:block;border-radius:2px;cursor:pointer;padding:0}.hotspot:hover,.hotspot:focus-visible{background:#fff1;box-shadow:inset 0 0 0 1px #ffffff60;outline-offset:0}.turn-layer{position:absolute;inset:0;z-index:4;display:none;perspective:2200px;pointer-events:none;transform-style:preserve-3d}.book.turning .hotspots{visibility:hidden}.book.turning .turn-layer{display:block}.half,.face{background-size:200% 100%;background-repeat:no-repeat}.half{position:absolute;top:0;bottom:0;width:50%}.half.left{left:0;background-position:left center}.half.right{right:0;background-position:right center}.leaf{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;will-change:transform;z-index:3}.leaf .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}.face:after{content:'';position:absolute;inset:0;opacity:0;background:linear-gradient(90deg,#0008,transparent 80%)}.leaf .back{transform:rotateY(180deg)}.forward .leaf{left:50%;transform-origin:left center}.forward .front{background-position:right center}.forward .back{background-position:left center}.backward .leaf{left:0;transform-origin:right center}.backward .front{background-position:left center}.backward .back{background-position:right center}.forward.animate .leaf{animation:forward 480ms linear both}.backward.animate .leaf{animation:backward 480ms linear both}.animate .face:after{animation:shade 480ms ease-in-out both}@keyframes forward{0%{transform:rotateY(0deg)}100%{transform:rotateY(-180deg)}}@keyframes backward{0%{transform:rotateY(0deg)}100%{transform:rotateY(180deg)}}@keyframes shade{0%,100%{opacity:0}50%{opacity:.75}}.viewport.zoomed .book{width:170%;touch-action:pan-x pan-y}.viewport.zoomed{max-height:65svh}dialog{border:1px solid #393935;background:#141413;color:var(--paper);padding:24px 32px 22px;width:min(550px,90vw);max-height:90svh;box-shadow:0 30px 100px #000b}dialog::backdrop{background:#000b;backdrop-filter:blur(8px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px;letter-spacing:1.5px}.dialog-head button{font-size:20px;padding:5px}dialog h1{font-size:60px;letter-spacing:-4px;margin:20px 0 14px}#index-list{display:grid}#index-list button{display:flex;gap:24px;border-top:1px solid #353530;text-align:left;padding:11px 0;font-size:13px}#index-list button span{color:var(--muted);font-size:11px;min-width:38px}#index-list button:hover{color:var(--red)}#index-list button[aria-current=page]{color:var(--red)}dialog p{color:var(--muted);font-size:10px;margin:20px 0 0}#toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,20px);padding:14px 22px;background:var(--paper);color:#111;opacity:0;pointer-events:none;z-index:20;transition:.2s;white-space:nowrap}#toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1500px){main{max-width:1500px}}@media(max-width:700px){.topbar{height:78px;margin:0 20px}.wordmark{font-size:26px;gap:0}.wordmark span{display:none}nav{gap:16px}.download{padding:10px;font-size:10px}.download span{padding-left:4px}main{padding:25px 8px}.edition{padding:0 26px 12px;font-size:7px;letter-spacing:1px}.edition i{margin-left:5px}.reader{padding:0 18px}.side{font-size:20px;padding:4px 0;top:43%}.reading-bar{margin:20px 22px 0;gap:16px;flex-wrap:wrap}.reading-bar #section-name{min-width:0;flex:1}.view-tools{gap:12px}.progress{order:3;flex-basis:100%;margin-top:0}.reader-hint{margin:20px 22px 0;flex-direction:column;gap:10px;line-height:1.6}.reader-hint #hint{max-width:270px}footer{margin:0 24px;font-size:8px;letter-spacing:.7px}.viewport{max-height:70svh}.viewport.zoomed .book{width:260%}.viewport.zoomed{max-height:65svh}dialog{padding:20px 25px}dialog h1{font-size:46px;margin:13px 0}#index-list button{padding:10px 0;font-size:12px}}@media(max-height:550px) and (orientation:landscape){.topbar{height:55px}.wordmark{font-size:23px}main{padding:8px 6vw}.edition,.reader-hint,footer{display:none}.viewport{max-height:calc(100svh - 113px)}.book{max-width:calc((100svh - 113px)*16/9);margin:auto}.reading-bar{margin-top:7px;padding-top:7px}.progress button{height:12px}.progress button:before{top:5px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;transition-duration:1ms!important}}

/* Let the artwork set the pace: full-size spread with compact chrome. */
.topbar{height:78px;flex-shrink:0}
main{max-width:none;padding:12px 12px 10px;min-height:0}
.reader{width:100%;padding:0 22px}
.viewport{max-height:none;overflow:hidden}
.book{width:min(100%,calc((100svh - 192px)*16/9));margin-inline:auto}
.reading-bar{width:min(calc(100% - 44px),calc((100svh - 192px)*16/9));margin:8px auto 0;padding-top:9px;gap:20px}
.reader-hint{width:min(calc(100% - 44px),calc((100svh - 192px)*16/9));margin:12px auto 0;justify-content:flex-end}
footer{padding:14px 0;flex-shrink:0}
.viewport.zoomed{overflow:auto;max-height:calc(100svh - 192px)}
.viewport.zoomed .book{width:170%;max-width:none;margin:0}
@media(max-width:700px){
 .topbar{height:68px;margin:0 16px}
 main{padding:10px 0}
 .reader{padding:0 14px}
 .book{width:100%}
 .side{font-size:18px}
 .reading-bar,.reader-hint{width:calc(100% - 36px)}
 .reading-bar{gap:10px;margin-top:12px}
 .reader-hint{margin-top:10px;align-items:flex-end}
 .reader-hint #hint{max-width:none;font-size:9px}
 .viewport.zoomed{max-height:65svh}
 .viewport.zoomed .book{width:260%}
}
@media(max-height:550px) and (orientation:landscape){
 .topbar{height:48px;margin:0 24px}
 main{padding:5px 8px}
 .book{width:min(100%,calc((100svh - 98px)*16/9));max-width:none}
 .viewport{max-height:none}
 .reading-bar{width:min(calc(100% - 44px),calc((100svh - 98px)*16/9));margin-top:5px;padding-top:5px}
 .viewport.zoomed{max-height:calc(100svh - 98px)}
}
:root:fullscreen .topbar,:root:fullscreen footer,:root:fullscreen .reader-hint{display:none}
:root:fullscreen main{padding:8px}
:root:fullscreen .book{width:min(100%,calc((100svh - 70px)*16/9))}
:root:fullscreen .reading-bar{width:min(calc(100% - 44px),calc((100svh - 70px)*16/9))}
:root:fullscreen .viewport.zoomed{max-height:calc(100svh - 70px)}
:root:fullscreen .viewport.zoomed .book{width:170%}

body.immersive .topbar,body.immersive footer,body.immersive .reader-hint{display:none}
body.immersive main{padding:8px}
body.immersive .book{width:min(100%,calc((100svh - 70px)*16/9))}
body.immersive .reading-bar{width:min(calc(100% - 44px),calc((100svh - 70px)*16/9))}
body.immersive .viewport.zoomed{max-height:calc(100svh - 70px)}
body.immersive .viewport.zoomed .book{width:170%}
@media(max-width:700px){body.immersive .viewport.zoomed .book{width:260%}}