:root { --bg:#fbfaf7; --fg:#1d1d1b; --muted:#6b6b66; --line:#e3e0d8; --accent:#2f5d8a; --side:#f2f0ea; }
@media (prefers-color-scheme: dark) { :root { --bg:#1b1c1e; --fg:#e8e6e1; --muted:#9a9892; --line:#34363a; --accent:#8ab4e0; --side:#232427; } }
* { box-sizing: border-box; }
body { margin:0; display:flex; height:100vh; font:16px/1.55 -apple-system, "Segoe UI", system-ui, sans-serif; background:var(--bg); color:var(--fg); }
#side { width:320px; flex:none; overflow:auto; background:var(--side); border-right:1px solid var(--line); padding:12px; }
#side header { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
#who { color:var(--muted); font-size:13px; }
#filter { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); margin-bottom:8px; }
#list h3 { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:14px 4px 4px; }
#list a { display:block; padding:6px 8px; border-radius:6px; color:var(--fg); text-decoration:none; }
#list a:hover { background:var(--bg); } #list a.active { background:var(--accent); color:#fff; }
#list .t { display:block; } #list .m { display:block; font-size:12px; color:var(--muted); } #list a.active .m { color:#dde8f3; }
#view { flex:1; overflow:auto; padding:24px 40px; max-width:900px; }
#view a { color:var(--accent); } #view table { border-collapse:collapse; } #view th, #view td { border:1px solid var(--line); padding:4px 8px; vertical-align:top; }
#view blockquote { border-left:3px solid var(--line); margin-left:0; padding-left:14px; color:var(--muted); }
.pdf { width:100%; height:calc(100vh - 48px); border:0; } .img { max-width:100%; } .hint { color:var(--muted); }
@media (max-width: 760px) { body { flex-direction:column; height:auto; } #side { width:auto; max-height:40vh; } #view { padding:16px; } }