:root { --bg:#fafaf8; --fg:#1d1d1b; --muted:#6b6b66; --line:#dcdcd6; --accent:#1f5f4a; --card:#fff; --warn:#a33; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#161615; --fg:#ececea; --muted:#9a9a94; --line:#33332f; --accent:#6fc2a5; --card:#1e1e1c; --warn:#e07a7a; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui, sans-serif; }
header { display:flex; gap:16px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
header nav { display:flex; gap:12px; flex:1; }
.brand { font-weight:600; color:var(--fg); text-decoration:none; }
main { max-width:760px; margin:0 auto; padding:16px; }
a { color:var(--accent); }
h1 { font-size:1.5rem; margin:.5rem 0; } h2 { font-size:1.05rem; margin:1.4rem 0 .3rem; }
.muted, .sub { color:var(--muted); }
.tabs { display:flex; gap:8px; flex-wrap:wrap; margin:.5rem 0; }
.tabs a { padding:4px 12px; border:1px solid var(--line); border-radius:99px; text-decoration:none; color:var(--fg); }
.tabs a.on { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.tabs.small a { font-size:.9rem; padding:2px 10px; }
.n { opacity:.7; margin-left:4px; }
.cards { list-style:none; padding:0; display:grid; gap:8px; }
.cards li { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 12px; display:grid; gap:4px; }
.cards a { text-decoration:none; color:var(--fg); display:grid; }
.cards a span { color:var(--muted); font-size:.92rem; }
.score { display:inline-block; min-width:2.2em; text-align:center; font-weight:600; background:var(--accent); color:var(--bg); border-radius:6px; padding:0 6px; }
.tag { display:inline-block; font-size:.78rem; border:1px solid var(--line); border-radius:99px; padding:0 8px; color:var(--muted); }
.tag.major { color:var(--warn); border-color:var(--warn); } .tag.done { color:var(--accent); border-color:var(--accent); }
.meta { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.stack { display:grid; gap:12px; } .narrow { max-width:340px; }
label { display:grid; gap:4px; font-size:.92rem; }
input, textarea { font:inherit; padding:8px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg); }
button { font:inherit; padding:8px 14px; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:var(--bg); cursor:pointer; }
button.secondary { background:transparent; color:var(--accent); }
button.link { background:none; border:0; color:var(--accent); padding:0; text-decoration:underline; }
.row { display:flex; gap:8px; flex-wrap:wrap; }
.error { color:var(--warn); } .ok { color:var(--accent); }
.who { display:flex; gap:8px; align-items:center; color:var(--muted); }
pre { white-space:pre-wrap; word-wrap:break-word; background:var(--card); border:1px solid var(--line); border-radius:6px; padding:12px; font:.88rem/1.45 ui-monospace, monospace; }
table { width:100%; border-collapse:collapse; font-size:.92rem; } th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); }
@media (max-width:520px) { th:nth-child(3), td:nth-child(3), th:nth-child(6), td:nth-child(6) { display:none; } }