:root{--bg:#f4f1ea;--fg:#222;--muted:#666;--card:#fff;--acc:#4a7c3a}
@media (prefers-color-scheme:dark){:root{--bg:#1c1b19;--fg:#eee;--muted:#aaa;--card:#2a2926;--acc:#7fb069}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6}
nav{display:flex;gap:20px;align-items:center;max-width:900px;margin:0 auto;padding:18px 20px}
nav b{margin-right:auto;font-size:1.1rem}
nav a{color:var(--fg);text-decoration:none;opacity:.75}nav a.on{opacity:1;border-bottom:2px solid var(--acc)}
main{max-width:900px;margin:0 auto;padding:30px 20px 60px}
h1{font-size:2.2rem;margin:0 0 8px}
.muted{color:var(--muted)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin-top:24px}
.card{background:var(--card);border-radius:14px;padding:20px;text-decoration:none;color:inherit;display:block;border:1px solid transparent}
a.card:hover{border-color:var(--acc)}
.card .ico{font-size:2.4rem}
.card.soon{opacity:.55;border:1px dashed var(--muted)}
.tag{font-size:.75rem;background:var(--acc);color:#fff;border-radius:99px;padding:2px 10px}