:root { --bg:#fbfaf7; --fg:#1d1d1b; --muted:#6b6b66; --line:#e2e0d9; --accent:#8a3b12; --hi:#fff4e5; --warn:#b3261e; --warnbg:#fde7e5; --t:#2b5f9e; --e:#2e7d4f; --te:#7a4b9d; }
@media (prefers-color-scheme: dark) { :root { --bg:#161614; --fg:#ebe8e0; --muted:#9c9a92; --line:#33322e; --accent:#f0a06a; --hi:#2a2118; --warn:#ff8a80; --warnbg:#3a1c1a; --t:#7fb0e8; --e:#7fd0a0; --te:#c39ae6; } }
html { color-scheme: light dark; }
body { margin:0; padding:1.5rem 1rem 3rem; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
main { max-width:52rem; margin:0 auto; }
h1 { font-size:1.6rem; margin:0 0 .25rem; }
h1 a { color:inherit; text-decoration:none; }
h2 { font-size:1.25rem; margin:2rem 0 .5rem; border-bottom:1px solid var(--line); padding-bottom:.25rem; }
h3 { font-size:1.05rem; margin:1.25rem 0 .5rem; color:var(--accent); }
.sub { color:var(--muted); margin:0; }
nav { display:flex; flex-wrap:wrap; gap:.25rem 1rem; margin:1rem 0; padding:.5rem 0; border-bottom:1px solid var(--line); }
nav a { color:var(--muted); text-decoration:none; font-weight:600; }
nav a.current { color:var(--accent); border-bottom:2px solid var(--accent); }
.legend { color:var(--muted); font-size:.85rem; margin:.25rem 0 0; }
.banner { background:var(--warnbg); color:var(--warn); border:1px solid var(--warn); border-radius:6px; padding:.75rem 1rem; margin:1rem 0; }
.banner code { white-space:pre-wrap; word-break:break-word; }
ol.papers { list-style:none; padding:0; margin:0; }
ol.papers > li { padding:.6rem 0; border-bottom:1px solid var(--line); }
ol.papers > li.read { background:var(--hi); margin:0 -.5rem; padding:.6rem .5rem; border-radius:4px; }
.title { font-weight:600; }
.title a { color:inherit; text-decoration:none; }
.title a:hover { text-decoration:underline; }
.meta { color:var(--muted); font-size:.9rem; }
.why { margin:.15rem 0 0; }
.score { display:inline-block; min-width:2.2em; text-align:right; font-variant-numeric:tabular-nums; color:var(--muted); margin-right:.5rem; }
li.read .score { color:var(--accent); font-weight:600; }
.kind { display:inline-block; min-width:1.6em; text-align:center; font-size:.75rem; font-weight:700; line-height:1.4; border-radius:3px; padding:0 .3em; margin-right:.5rem; color:#fff; vertical-align:middle; }
.kind-T { background:var(--t); } .kind-E { background:var(--e); } .kind-TE { background:var(--te); }
details { margin:.5rem 0; }
summary { cursor:pointer; color:var(--muted); }
details.day { border-bottom:1px solid var(--line); padding:.4rem 0; }
details.day > summary { color:var(--fg); }
ul.titles { padding-left:1.25rem; margin:.5rem 0; }
ul.titles li { margin:.2rem 0; }
.watch { color:var(--accent); margin-right:.35rem; font-size:.9em; }
.fb { margin-left:.5rem; white-space:nowrap; }
.fb a { text-decoration:none; opacity:.55; filter:grayscale(1); }
.fb a:hover { opacity:1; filter:none; }
button.zot { display:none; margin-left:.5rem; font:inherit; font-size:.75rem; line-height:1.4; padding:0 .4em; border:1px solid var(--line); border-radius:3px; background:transparent; color:var(--muted); cursor:pointer; vertical-align:middle; }
.zot-on button.zot { display:inline-block; }
button.zot:hover { color:var(--accent); border-color:var(--accent); }
button.zot.zot-done { color:var(--e); border-color:var(--e); }
button.zot.zot-done:hover { color:var(--warn); border-color:var(--warn); }
a.zot-setup { color:var(--muted); }
dialog { background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:1rem 1.25rem; max-width:26rem; width:calc(100% - 2rem); }
dialog::backdrop { background:rgba(0,0,0,.4); }
dialog h3 { margin:0 0 .5rem; }
dialog label { display:block; margin:.6rem 0; font-size:.9rem; }
dialog input { display:block; width:100%; box-sizing:border-box; margin-top:.2rem; padding:.35rem .5rem; font:inherit; color:inherit; background:transparent; border:1px solid var(--line); border-radius:4px; }
dialog menu { display:flex; gap:.5rem; justify-content:flex-end; padding:0; margin:1rem 0 0; }
dialog button { font:inherit; padding:.3rem .8rem; border:1px solid var(--line); border-radius:4px; background:transparent; color:inherit; cursor:pointer; }
dialog button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
form.connected .zot-creds, form.connected .zot-when-off, form:not(.connected) .zot-when-on { display:none; }
form.connected #zot-status { color:var(--e); }
footer { margin-top:3rem; color:var(--muted); font-size:.9rem; }
footer p a { color:inherit; }
footer ul { columns:2; padding-left:1.25rem; }