:root{font-family:Arial,sans-serif;color:#eee8dc;background:#24221f;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid #71634b;border-radius:7px;background:#35312b;color:#fff4df;min-height:44px;padding:9px 14px}button:hover{background:#504432}button:disabled{opacity:.3;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #e3bf71;outline-offset:3px}#reader{height:100dvh;min-height:360px;display:flex;flex-direction:column;background:radial-gradient(ellipse at center,#51483a,#24221f 80%);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px;background:#22211ef5;border-bottom:1px solid #514737;z-index:2}.brand{display:flex;align-items:center;gap:12px;color:#e8d5ae;text-decoration:none;font:21px Georgia,serif}.brand img{width:48px;height:48px;object-fit:contain;background:#fbf8f1;border-radius:4px}.brand small{display:block;font:10px Arial,sans-serif;letter-spacing:2px;margin-top:6px;color:#b3a58e}.actions{display:flex;gap:8px}.stage{flex:1;min-height:0;overflow:auto;display:flex;align-items:safe center;justify-content:safe center;padding:20px;touch-action:pan-y pinch-zoom;perspective:1800px}.book{display:flex;flex:none;box-shadow:0 15px 45px #0009;position:relative;background:#fbf8f1;transform-origin:center}.book figure{margin:0;width:50%;height:100%;position:relative;flex:1;background:#fbf8f1}.book img{width:100%;height:100%;display:block;object-fit:contain}.book.spread:after{content:"";position:absolute;inset:0 auto 0 50%;width:18px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#30271930,transparent);pointer-events:none}.book.turn-next{animation:next .32s ease-out}.book.turn-previous{animation:previous .32s ease-out}@keyframes next{from{transform:rotateY(-9deg);opacity:.6}to{transform:rotateY(0);opacity:1}}@keyframes previous{from{transform:rotateY(9deg);opacity:.6}to{transform:rotateY(0);opacity:1}}.controls{display:flex;align-items:center;justify-content:center;gap:28px;padding:8px 16px}.controls form{display:flex;align-items:center;gap:8px;font-size:13px}.controls input{width:58px;height:42px;text-align:center;background:#302d28;border:1px solid #71634b;color:white;border-radius:6px}.hint{text-align:center;font-size:11px;color:#c1b6a1;margin:4px 10px 12px;min-height:14px}.zoomed .stage{align-items:flex-start;justify-content:flex-start;touch-action:pan-x pan-y pinch-zoom}.zoomed .book{margin:auto}.immersive .brand span,.immersive .hint{display:none}.immersive .toolbar{padding-top:6px;padding-bottom:6px}.immersive .brand img{width:34px;height:34px}dialog{background:#fbf8f1;color:#2f2b29;border:0;border-radius:12px;padding:24px;width:min(600px,92vw);max-height:85dvh;box-shadow:0 20px 80px #0009}dialog::backdrop{background:#0009}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.dialog-head h2{font:27px Georgia,serif;margin:0 0 16px}#chapter-list{display:grid;gap:5px}#chapter-list button{background:transparent;border:0;border-bottom:1px solid #ded5c6;border-radius:0;color:#493a24;text-align:left;display:flex;justify-content:space-between}#chapter-list button:hover{background:#eee5d7}.page-error{color:#352b20;padding:20px}.page-error button{display:block;margin-top:12px}@media(max-width:700px){.toolbar{padding:9px 12px;gap:8px;flex-wrap:wrap}.brand{font-size:16px}.brand img{width:38px;height:38px}.brand small{font-size:8px;letter-spacing:1px}.actions{width:100%;justify-content:center}.actions button{flex:1;font-size:13px}.stage{padding:10px}.controls{gap:10px;padding:8px}.controls>button{padding:9px 13px}.controls>button span{display:none}.controls form{gap:5px}.hint{font-size:10px}.immersive .toolbar{flex-wrap:nowrap}.immersive .actions{width:auto;flex:1}.immersive .brand{flex:none}}@media(prefers-reduced-motion:reduce){.book.turn-next,.book.turn-previous{animation:none}}

/* Full-page reading keeps navigation floating over the page, not taking its height. */
#reader.immersive{position:fixed;inset:0;height:100dvh;min-height:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.immersive .stage{padding:0;overflow:hidden;width:100%;height:100%}
.immersive.zoomed .stage{overflow:auto}
.immersive .toolbar{position:absolute;top:max(8px,env(safe-area-inset-top));left:54px;right:8px;border:1px solid #71634b77;border-radius:12px;padding:5px;background:#24221fe8;backdrop-filter:blur(12px);gap:0;transition:opacity .2s}
.immersive .brand{display:none}.immersive .actions{width:100%;gap:4px}.immersive .actions button{font-size:12px;min-height:40px;padding:6px 8px;flex:1}
.immersive .controls{position:absolute;bottom:max(8px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:3;border:1px solid #71634b77;border-radius:12px;background:#24221fe8;backdrop-filter:blur(12px);padding:5px;gap:8px;white-space:nowrap;transition:opacity .2s}
.immersive .controls>button span{display:none}.immersive .controls form{gap:5px}.immersive .controls label{display:none}.immersive .controls input{width:48px}
#reader-tools{position:absolute;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));width:40px;min-height:44px;padding:4px;z-index:5;background:#24221fe0;box-shadow:0 2px 12px #0003}
#reader:not(.immersive) #reader-tools{display:none}
.immersive.tools-hidden .toolbar,.immersive.tools-hidden .controls{opacity:0;pointer-events:none;visibility:hidden}
.turn-layer{position:absolute;inset:0;z-index:4;perspective:1800px;pointer-events:none}
.turn-leaf{position:absolute;inset:0;background:#fbf8f1;transform-origin:left center;backface-visibility:hidden;box-shadow:8px 0 26px #0005;will-change:transform}
.turn-leaf figure{width:100%;height:100%}.turn-leaf:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#45341e38,transparent 30%,#0002);pointer-events:none}
.turn-leaf.forward{animation:leaf-forward .65s cubic-bezier(.35,.05,.25,1) both}
.turn-leaf.backward{transform-origin:right center;animation:leaf-backward .65s cubic-bezier(.35,.05,.25,1) both}
.turn-leaf.half.forward{left:50%}.turn-leaf.half.backward{right:50%}
@keyframes leaf-forward{0%{transform:rotateY(0);opacity:1}85%{opacity:1}100%{transform:rotateY(-100deg);opacity:0}}
@keyframes leaf-backward{0%{transform:rotateY(100deg);opacity:0}15%{opacity:1}100%{transform:rotateY(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.turn-leaf{animation:none!important}.immersive .toolbar,.immersive .controls{transition:none}}

/* On phones the complete printed page occupies the entire browser viewport. */
@media(max-width:899px){
#reader.immersive{padding:0;background:#fbf8f1}
.immersive .stage{position:absolute;inset:0;align-items:flex-start;justify-content:flex-start}
.immersive .book{box-shadow:none;margin:0}
.immersive .book img{object-fit:contain}
}
#reader-tools{width:44px;height:44px;min-height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid #bda77c66;background:#24221f99;color:#fff8e7;backdrop-filter:blur(8px);box-shadow:0 2px 8px #0002}
#reader-tools .eye-slash{display:block}.tools-hidden #reader-tools .eye-slash{display:none}
.tools-hidden #reader-tools{opacity:.65}.tools-hidden #reader-tools:hover,.tools-hidden #reader-tools:focus-visible{opacity:1}
.actions .language-link{display:flex;align-items:center;justify-content:center;text-decoration:none;font:inherit;font-size:13px;color:#fff4df;background:#35312b;border:1px solid #71634b;border-radius:7px;min-height:44px;padding:9px 14px;white-space:nowrap}
.actions .language-link:hover{background:#504432}
.immersive .actions .language-link{min-height:40px;padding:6px 8px;font-size:12px;flex:0 0 auto}
@media(max-width:700px){.actions .language-link{padding:9px 10px}.immersive .actions button{min-width:0}}