[data-reader-open][hidden] { display: none !important; }
body.reader-is-open { overflow: hidden; }
.book-reader { --paper:#faf2e3; --ink:#372f28; --muted:#776b5b; --line:#dacebb; --surface:#f3e8d5; --reader-size:20px; --reader-leading:1.65; --reader-font:Georgia,"Times New Roman",serif; --reader-width:800px; position:fixed; inset:0; width:100%; max-width:none; height:100%; height:100dvh; max-height:none; margin:0; padding:0; border:0; background:var(--paper); color:var(--ink); font:400 14px/1.5 system-ui,sans-serif; overflow:hidden; color-scheme:light; }
.book-reader[open] { display:flex; flex-direction:column; }
.book-reader::backdrop { background:#19171c; }
.book-reader[data-paper="white"] { --paper:#fff; --ink:#252525; --muted:#656565; --line:#e3e3e3; --surface:#f4f4f4; }
.book-reader[data-paper="night"] { --paper:#191a1d; --ink:#e4ded4; --muted:#afa99f; --line:#3c3c3e; --surface:#25262b; color-scheme:dark; }
.book-reader button,.book-reader select,.book-reader input { font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; }
.book-reader button { min-height:38px; padding:6px 12px; cursor:pointer; }
.book-reader button:hover { filter:brightness(.95); }
.book-reader button[aria-pressed="true"],.book-reader button[aria-expanded="true"] { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.book-reader button:disabled { opacity:.35; cursor:default; }
.book-reader :is(button,input,select):focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.reader-toolbar { flex:0 0 auto; padding:10px max(20px,env(safe-area-inset-right)) 10px max(20px,env(safe-area-inset-left)); border-bottom:1px solid var(--line); }
.reader-title-row { display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:1100px; margin:auto; }
.reader-title-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.reader-tools { display:flex; align-items:center; justify-content:center; gap:8px; max-width:1100px; margin:-38px auto 0; padding-inline:180px 48px; }
.reader-tools button { flex-shrink:0; }
.reader-stage { flex:1 1 auto; min-height:0; padding:28px max(24px,env(safe-area-inset-right)) 20px max(24px,env(safe-area-inset-left)); }
.reader-viewport { width:100%; max-width:var(--reader-width); height:100%; margin:auto; overflow:hidden; touch-action:pan-y; }
.reader-flow { column-fill:auto; column-gap:48px; margin:0; padding:0; font:400 var(--reader-size)/var(--reader-leading) var(--reader-font); color:var(--ink); overflow-wrap:break-word; hyphens:auto; }
.reader-flow p { margin:0 0 .95em; orphans:2; widows:2; }
.reader-flow h2,.reader-flow .letter-label { color:var(--ink); font:600 .72em/1.45 system-ui,sans-serif !important; letter-spacing:.04em !important; text-transform:uppercase; margin:0 0 1.5em; break-after:avoid; }
.reader-flow .letter { margin:0 0 2em; }
.reader-flow .signoff { font-style:italic; }
.reader-flow .void { margin:1.5em 0; padding:0; border:0; background:transparent; color:inherit; }
.reader-flow .void::before { content:"• • •"; display:block; margin:0 0 1.5em; color:var(--muted); text-align:center; }
.reader-flow .fic-illustration { margin:1.5em 0; break-inside:avoid; }
.reader-flow .fic-illustration img { width:100%; height:auto; max-height:calc(var(--reader-height) - 80px); object-fit:contain; border:0; border-radius:4px; }
.reader-flow .fic-illustration figcaption { color:var(--muted); font:400 .65em/1.5 system-ui,sans-serif; text-align:center; margin-top:10px; }
.reader-flow a { color:inherit; text-underline-offset:3px; }
.reader-footer { display:flex; flex:0 0 auto; align-items:center; justify-content:center; gap:18px; padding:10px 16px max(10px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.reader-footer form { display:flex; align-items:center; gap:8px; margin:0; }
.reader-footer input { width:66px; min-height:38px; text-align:center; padding:4px; }
.reader-footer label { color:var(--muted); }
.reader-panel { position:absolute; z-index:2; top:70px; right:18px; width:min(360px,calc(100% - 36px)); max-height:calc(100% - 150px); padding:20px; overflow-y:auto; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:16px; box-shadow:0 14px 60px #0003; }
.reader-panel[hidden] { display:none; }
.reader-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.reader-panel label { display:block; margin-bottom:18px; }
.reader-panel output { float:right; color:var(--muted); }
.reader-panel input[type="range"],.reader-panel select { display:block; width:100%; margin-top:8px; }
.reader-panel select { padding:9px; }
.reader-panel input[type="range"] { accent-color:var(--ink); }
.reader-panel fieldset { margin:0 0 18px; padding:0; border:0; }
.reader-panel legend { float:none; font:inherit; margin-bottom:8px; }
.reader-backgrounds { display:flex; flex-wrap:wrap; gap:6px; }
.reader-help { color:var(--muted); font-size:12px; line-height:1.7; }
.reader-panel ol { list-style:none; padding:0; margin:0; }
.reader-panel li { display:flex; align-items:start; gap:7px; margin-bottom:8px; }
.reader-panel li>button:first-child { flex:1; text-align:left; font-size:13px; }
.reader-panel li>button:last-child:not(:first-child) { flex:0 0 38px; padding-inline:5px; }
.reader-status { position:absolute; bottom:78px; left:50%; transform:translateX(-50%); max-width:min(520px,calc(100% - 36px)); padding:0; border-radius:10px; color:var(--ink); background:var(--surface); font-size:12px; text-align:center; pointer-events:none; }
.reader-status:not(:empty) { padding:10px 15px; border:1px solid var(--line); box-shadow:0 4px 20px #0002; }
@media(max-width:700px) {
 .reader-toolbar { padding:8px 12px; padding-top:max(8px,env(safe-area-inset-top)); }
 .reader-tools { margin:8px auto 0; padding:0; gap:6px; }
 .reader-tools button { padding-inline:10px; }
 .reader-stage { padding:20px 18px 16px; }
 .reader-panel { top:110px; max-height:calc(100% - 190px); right:12px; width:calc(100% - 24px); padding:16px; }
 .reader-footer { gap:8px; padding-inline:10px; }
 .reader-footer form { gap:6px; }
 .reader-footer label { display:none; }
 .reader-footer input { width:58px; }
}
@media(max-height:480px) {
 .reader-toolbar { padding-block:5px; }
 .reader-title-row { display:none; }
 .reader-title-row:has([data-reader-close]) { display:flex; position:absolute; top:5px; right:10px; }
 .reader-title-row strong { display:none; }
 .reader-tools { margin:0; padding-right:44px; }
 .reader-stage { padding-block:12px; }
 .reader-panel { top:54px; max-height:calc(100% - 120px); }
}