
:root{--bg:#faf8f4;--fg:#1d1b18;--muted:#6b665d;--line:#e2ddd3;--card:#fff;--accent:#8a3b12;
--mark:#ffe08a;--box:rgba(138,59,18,.55);--boxfill:rgba(138,59,18,.06);--sel:rgba(30,110,200,.9)}
@media (prefers-color-scheme:dark){:root{--bg:#171614;--fg:#ece8e1;--muted:#a39d92;--line:#33302b;
--card:#211f1c;--accent:#e08a5a;--mark:#7a5d00;--box:rgba(224,138,90,.6);--boxfill:rgba(224,138,90,.08)}}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,sans-serif}
a{color:var(--accent)}main{padding:16px 24px 48px;max-width:1500px;margin:0 auto}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:600}
h1{font-size:1.9rem;margin:.4em 0}.meta,.count,.issue-meta{color:var(--muted)}
.top{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:10px 24px;
border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
.crumbs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.crumbs .home{font-weight:600}
.sep{color:var(--muted);margin:0 2px}.searchbox input{width:min(40vw,320px)}
input,select,button{font:inherit;padding:6px 10px;border:1px solid var(--line);border-radius:6px;
background:var(--card);color:var(--fg)}button{cursor:pointer}
.grid{display:grid;gap:16px}.titles{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.issues,.pages{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.card{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);
border-radius:8px;padding:10px;color:inherit;text-decoration:none}.card:hover{border-color:var(--accent)}
.title-card{flex-direction:row}.title-card .thumb{width:120px}.title-card h2{margin:0 0 4px}
.issue-card span,.page-card span{display:block;font-size:.9rem}
.thumb{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;background:var(--line);border-radius:4px}
.years a{margin-right:10px}.note{background:var(--card);border-left:3px solid var(--accent);padding:8px 12px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px}.filters input[type=search]{flex:1 1 280px}
.hits li{margin:0 0 18px}.snippet{margin:4px 0 0;color:var(--muted)}mark{background:var(--mark);color:inherit}
.more a{margin-right:16px}
.toc{list-style:none;padding:0;columns:2 380px;column-gap:32px}.toc li{break-inside:avoid;margin:0 0 8px}
.toc .by{font-style:italic}.small{font-size:.85rem}details{margin:8px 0}
.reader{display:grid;grid-template-columns:minmax(0,3fr) minmax(320px,2fr);gap:16px;height:calc(100vh - 90px)}
.viewer{display:flex;flex-direction:column;min-height:0}
.tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding-bottom:8px}
.pager{margin-left:auto;display:flex;gap:12px}
.scroller{flex:1;overflow:auto;border:1px solid var(--line);background:#777;border-radius:6px}
.canvas{position:relative;width:100%;margin:0 auto}.canvas img{display:block;width:100%;height:auto}
.canvas svg{position:absolute;inset:0;width:100%;height:100%}
rect.r{fill:transparent;stroke:var(--box);stroke-width:3;vector-effect:non-scaling-stroke;cursor:pointer}
rect.r:hover{fill:var(--boxfill)}rect.r.hit{fill:rgba(255,200,0,.18)}
rect.r.sel{stroke:var(--sel);stroke-width:3;fill:rgba(30,110,200,.12)}
.noboxes rect.r:not(.sel){stroke:transparent}
.textpane{position:relative;overflow:auto;padding:0 8px 24px;font-family:Georgia,serif;font-size:1.02rem;line-height:1.55}
.textpane .cite{font-family:system-ui,sans-serif;font-size:.9rem;color:var(--muted)}
.textpane .copy{font-size:.8rem;padding:2px 8px;margin-left:6px}
.textpane p.r,.textpane h3.r{padding:4px 8px;margin:0 0 10px;border-left:3px solid transparent;cursor:pointer}
.textpane h3.r{font-size:1.1rem}.textpane .r.sel{border-left-color:var(--sel);background:var(--card)}
.textpane .lab-abandon,.textpane .lab-figure,.textpane .lab-figure_caption{color:var(--muted);font-size:.92rem}
.flag{font:.75rem system-ui;color:#fff;background:#a33;border-radius:3px;padding:0 4px;margin-left:6px}
@media (max-width:820px){main{padding:12px 16px}.reader{grid-template-columns:1fr;height:auto}
.scroller{height:70vh}.textpane{overflow:visible}.top{flex-wrap:wrap}.searchbox input{width:100%}}
