:root{--bg:#fff;--fg:#000;--mut:#666;--fs:18px}
[data-theme=dark]{--bg:#000;--fg:#fff;--mut:#999}
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{display:flex;flex-direction:column;background:var(--bg);color:var(--fg);font:14px/1.4 system-ui,sans-serif}
button,textarea{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--fg);border-radius:0;padding:4px 10px}
button{cursor:pointer}
button:hover,button:focus-visible{background:var(--fg);color:var(--bg);outline:0}
header,footer{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 12px}
header{border-bottom:1px solid var(--fg)}
footer{border-top:1px solid var(--fg);justify-content:space-between}
#title{flex:1;min-width:6em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;color:var(--mut)}
#status{cursor:pointer;color:var(--mut)}
#view{flex:1;overflow:auto;position:relative;outline:0}
#book{position:relative;max-width:42em;margin:0 auto;padding:32px 20px 80px;font:var(--fs)/1.65 Georgia,'Times New Roman',serif}
[data-font=sans] #book{font-family:system-ui,sans-serif;line-height:1.6}
[data-font=custom] #book{font-family:ReaderCustom,Georgia,serif}
#book p{margin:0 0 .8em}
#book h1,#book h2,#book h3{line-height:1.25;margin:1.6em 0 .6em}
#book img{max-width:100%;height:auto;display:block;margin:1em auto}
#book blockquote{margin:1em 0 1em 1.2em;padding-left:1em;border-left:1px solid var(--mut)}
#book pre{white-space:pre-wrap}
#book a{color:inherit}
.hint{text-align:center;color:var(--mut);margin-top:25vh!important;font-family:system-ui,sans-serif;font-size:15px}
.noted{border-left:2px solid var(--fg);padding-left:10px;margin-left:-12px}
.flash{background:var(--fg);color:var(--bg)}
.pdf #book{max-width:none;padding:12px 0 40px}
.page{margin:0 auto 12px;background:var(--bg);border:1px solid var(--fg)}
.page canvas{display:block}
[data-theme=dark] .page canvas{filter:invert(1)}
#panel{position:fixed;top:0;right:0;bottom:0;width:min(380px,100%);background:var(--bg);border-left:1px solid var(--fg);overflow:auto;padding:12px;z-index:5}
.bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.item{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--mut)}
textarea{width:100%;height:90px;margin:8px 0;resize:vertical}
#quote{color:var(--mut);font-size:13px}
.note{border-bottom:1px solid var(--fg);padding:10px 0;white-space:pre-wrap}
.meta{color:var(--mut);font-size:12px}
.note blockquote{margin:6px 0;padding-left:8px;border-left:2px solid var(--fg);color:var(--mut)}
.row{display:flex;gap:6px;margin-top:8px}
#book a[data-to]{cursor:pointer;text-decoration:underline}
#fn{position:fixed;max-width:min(30em,calc(100vw - 16px));max-height:45vh;overflow:auto;background:var(--bg);color:var(--fg);border:1px solid var(--fg);padding:10px 12px;font:15px/1.5 Georgia,serif;z-index:6}
#fn p{margin:0 0 .5em}#fn p:last-child{margin:0}#fn li{list-style:none}#fn h2{font-size:1em;display:inline;margin:0 .4em 0 0}#fn img{max-width:100%}
.page:empty::before{content:'Page ' attr(data-n);display:block;padding-top:40px;text-align:center;color:var(--mut)}
#infoBox p{margin:0 0 .9em}#infoBox a{color:inherit}.small{color:var(--mut);font-size:12px}
#font{max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}