:root {
  --base: var(--background); --surface: var(--card); --surface-alt: var(--muted);
  --overlay: var(--border); --subtext: var(--muted-foreground); --text: var(--foreground);
  --text-dim: var(--muted-foreground);
  --skill: #c2618a; --hook: #8a5fb0; --agent: #4a7fb5;
  --plugin: #5f63b0; --mcp: #2f9a8a;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font-mono); background:var(--base); color:var(--text); min-height:100vh; display:flex; flex-direction:column; align-items:center; }
.header { width:100%; height:45px; border-bottom:1px solid var(--overlay); background:var(--surface); display:flex; align-items:center; padding:0 16px; }
.header h1 { font-size:14px; font-weight:600; }
.pg-content { max-width:800px; width:100%; padding:48px 24px; }
.title { font-size:24px; font-weight:700; margin-bottom:8px; }
.subtitle { font-size:14px; color:var(--subtext); margin-bottom:32px; line-height:1.6; }
.cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pg-card { background:var(--surface); border:1px solid var(--overlay); border-radius:0; padding:16px; text-decoration:none; color:var(--text); transition:all .15s; border-left:4px solid; }
.pg-card:hover { border-color:var(--primary); background:var(--surface-alt); transform:translateY(-1px); }
.pg-card-title { font-size:15px; font-weight:600; margin-bottom:4px; }
.pg-card-desc { font-size:12px; color:var(--subtext); line-height:1.5; }
.card-tag { display:inline-block; margin-top:8px; font-size:10px; padding:2px 8px; border-radius:0; background:var(--surface-alt); color:var(--text-dim); font-family:var(--font-mono); }
@media (max-width:600px) { .cards { grid-template-columns:1fr; } }

.pg-card--accent { border-left-color: var(--primary); }
.pg-card--skill { border-left-color: var(--skill); }
.pg-card--mcp { border-left-color: var(--mcp); }
.pg-card--plugin { border-left-color: var(--plugin); }