:root { color-scheme:light; --paper:#f7f4ec; --ink:#25352f; --muted:#667168; --line:#d9ddd2; --accent:#244e43; --panel:#fffdf7; --font-size:21px; }
* { box-sizing:border-box } body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif } a { color:inherit; text-underline-offset:4px } button,input,select { font:inherit } button,a,input,select { touch-action:manipulation } button,select { min-height:44px; border:1px solid var(--line); border-radius:6px; padding:9px 15px; background:var(--panel); color:var(--ink) } button { cursor:pointer } button:hover { border-color:var(--accent) } button:disabled { opacity:.5; cursor:default } :focus-visible { outline:3px solid #b97930; outline-offset:3px } .primary { background:var(--accent); color:#fff; border-color:var(--accent) } .masthead { max-width:1240px; margin:auto; padding:28px max(24px,env(safe-area-inset-right)) 24px max(24px,env(safe-area-inset-left)); display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line) } .brand { text-decoration:none; font:28px Georgia,serif; letter-spacing:-1px } .brand span { display:block; margin-top:8px; font:9px sans-serif; letter-spacing:2.4px } nav { display:flex; gap:20px; align-items:center } nav a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; text-decoration:none } nav a[aria-current=page] { border-bottom:2px solid var(--accent) } main { max-width:1160px; margin:auto; padding:44px 24px 64px; min-height:70vh } h1,h2,h3 { font-family:Georgia,"Times New Roman",serif; font-weight:400; line-height:1.15 } h1 { font-size:clamp(34px,5vw,58px); margin:12px 0 20px; letter-spacing:-1.3px } h2 { font-size:28px } h3 { font-size:23px; margin:0 0 10px } .eyebrow { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted) } .muted { color:var(--muted); font-size:14px } .toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; margin:28px 0 } input[type=search] { width:min(100%,360px); min-height:46px; padding:12px 14px; border:1px solid var(--line); border-radius:6px; background:var(--panel); color:var(--ink) } .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:24px } .book-card { border-top:1px solid var(--line); padding:24px 0; display:grid; grid-template-columns:92px minmax(0,1fr); gap:20px; align-content:start } .cover { width:100%; aspect-ratio:2/3; object-fit:cover; background:#dedecf; border-radius:2px 6px 6px 2px; box-shadow:3px 4px 9px #17271920 } .cover-placeholder { background:#345b50; color:#f2e6c9; padding:16px 10px; font:15px/1.4 Georgia,serif; overflow:hidden; border-left:5px solid #213e35; display:flex; align-items:center } .book-card p { margin:8px 0 } .book-card .actions { grid-column:1/-1 } .actions { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:16px } .badge { display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.6px; padding:4px 7px; border:1px solid var(--line); border-radius:3px } .downloaded { color:var(--accent); background:#dce8dc } .edition { padding:18px 0; border-bottom:1px solid var(--line) } .detail { display:grid; grid-template-columns:170px minmax(0,1fr); gap:40px; max-width:850px } .empty { padding:44px 20px; border:1px dashed var(--line); border-radius:8px } .site-footer { margin:auto; max-width:1160px; border-top:1px solid var(--line); padding:20px 24px max(24px,env(safe-area-inset-bottom)); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:12px; color:var(--muted) } #notice:not(:empty),#update:not(:empty) { padding:14px 24px; background:#e9ddbd; color:#493b24; font-size:14px } #notice button,#update button { margin-left:12px } dialog { width:min(480px,calc(100% - 32px)); border:1px solid var(--line); border-radius:10px; padding:28px; background:var(--panel); color:var(--ink) } dialog::backdrop { background:#13251e88 } .skip { position:absolute; top:-100px } .skip:focus { top:0; background:var(--panel); z-index:10 } body.reading .masthead,body.reading .site-footer { display:none } body.reading main { padding:0; max-width:none } .reader-toolbar { position:sticky; top:0; z-index:3; background:var(--paper); border-bottom:1px solid var(--line); display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:10px max(16px,env(safe-area-inset-left)); } .reader-toolbar a { min-height:44px; display:flex; align-items:center; margin-right:auto } .reader-toolbar select { max-width:min(240px,45vw) } .reader-header { padding:40px 0 24px; text-align:center } .reader-header h1 { font-size:34px; letter-spacing:-.5px } .reader { width:min(100%,740px); padding:0 28px 36px; margin:auto; font:var(--font-size)/1.85 Georgia,"Times New Roman",serif; overflow-wrap:break-word } .reader p { margin:0 0 1.3em } .reader blockquote { white-space:pre-line; border-left:2px solid var(--line); margin:1.7em 0; padding:0 1.2em; font-style:italic } .reader img { max-width:100%; height:auto; display:block; margin:1em auto } .reader hr { width:60px; margin:2em auto; border:0; border-top:2px solid var(--line) } .reader-bottom { position:sticky; bottom:0; display:flex; gap:8px; align-items:center; justify-content:space-between; padding:10px 16px max(10px,env(safe-area-inset-bottom)); background:var(--paper); border-top:1px solid var(--line); z-index:2 } .reader-bottom span { font-size:12px; text-align:center } .settings { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:16px; border-bottom:1px solid var(--line) } .settings[hidden] { display:none } .conflict { padding:16px; border:1px solid #b97930; margin:12px } .reader-tools { max-width:900px; margin:auto } [hidden] { display:none!important } body[data-theme=dark] { color-scheme:dark; --paper:#19241f; --ink:#e4e6dc; --muted:#aab5ab; --line:#435047; --accent:#578572; --panel:#223128 } body[data-theme=light] { --paper:#fff; --panel:#f8f9f6 } @media(max-width:560px) { .masthead { padding:20px 18px; gap:10px } .brand { font-size:24px } nav { gap:12px } main { padding:28px 18px 44px } .detail { grid-template-columns:80px minmax(0,1fr); gap:20px } .detail h1 { font-size:30px } .reader { padding-left:20px; padding-right:20px } .reader-toolbar { gap:5px } .reader-toolbar button { padding:9px 10px } .reader-bottom button { padding:9px 12px } } @media(prefers-reduced-motion:no-preference) { button { transition:background .15s,border-color .15s } }
#sync-conflict:not(:empty) { position:fixed; z-index:5; top:80px; left:16px; right:16px; max-width:650px; padding:16px; background:var(--panel); border:1px solid #b97930; border-radius:8px; box-shadow:0 6px 24px #0002; font-size:14px } #sync-conflict button { margin:4px 8px 4px 0 } #sync-conflict p { margin:0 0 10px }
body.reading #update:not(:empty) { position:fixed; z-index:6; bottom:80px; left:16px; right:16px; max-width:650px; margin:auto; border:1px solid #b97930; border-radius:8px; box-shadow:0 6px 24px #0002 }