:root {
  --bg:#0a0a0b; --bg-elev:#111114; --bg-card:#141418;
  --border:#1f1f25; --border-strong:#2a2a32;
  --text:#e8e8ec; --text-dim:#a0a0aa; --text-faint:#6a6a74;
  --cyan:#22d3ee; --amber:#fbbf24; --violet:#a78bfa; --green:#10b981; --rose:#fb7185;
  --evidential:#22d3ee; --structural:#a78bfa; --interrogative:#fbbf24; --associative:#6a6a74;
}
* { box-sizing: border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
header.top { border-bottom: 1px solid var(--border); background: rgba(10,10,11,0.8); backdrop-filter: blur(12px); position:sticky; top:0; z-index:10; }
.top-row { display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.brand { display:flex; align-items:center; gap:12px; color:inherit; }
.brand:hover { text-decoration: none; }
.logo { width:36px; height:36px; background:linear-gradient(135deg,var(--cyan),var(--violet)); border-radius:10px; display:grid; place-items:center; font-weight:700; color:#0a0a0b; }
.brand-text h1 { margin:0; font-size:16px; font-weight:600; letter-spacing:-0.01em; }
.brand-text p { margin:0; font-size:11px; color:var(--text-faint); letter-spacing:0.08em; text-transform:uppercase; }
.top-nav { display:flex; gap:18px; font-size:13px; }
.top-nav a { color: var(--text-dim); }
.top-nav a:hover { color: var(--text); text-decoration:none; }
main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; padding: 32px 24px 80px; max-width:1200px; margin:0 auto; }
.note { min-width: 0; }
.note-meta { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px; font-size:11px; font-family: ui-monospace, monospace; }
.note-meta > span { padding:2px 8px; border-radius:999px; background:var(--bg-card); border:1px solid var(--border); color:var(--text-dim); letter-spacing:0.04em; }
.zettel-type.zt-permanent { color: var(--cyan); border-color: rgba(34,211,238,0.3); }
.zettel-type.zt-literature { color: var(--amber); border-color: rgba(251,191,36,0.3); }
.zettel-type.zt-fleeting { color: var(--text-faint); }
.zettel-type.zt-hub { color: var(--violet); border-color: rgba(167,139,250,0.3); }
.zettel-type.zt-source { color: var(--rose); border-color: rgba(251,113,133,0.3); }
.status.st-evergreen { color: var(--green); border-color: rgba(16,185,129,0.3); }
.status.st-growing { color: var(--amber); border-color: rgba(251,191,36,0.3); }
.status.st-seedling { color: var(--text-faint); }
.note-title { font-size:34px; font-weight:600; letter-spacing:-0.02em; margin:8px 0 4px; line-height:1.15; }
.note-id { font-family: ui-monospace, monospace; font-size:12px; color:var(--text-faint); margin-bottom:14px; }
.note-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:24px; }
.tag { font-size:10px; padding:3px 8px; border-radius:999px; background:var(--bg-elev); border:1px solid var(--border); color:var(--text-dim); letter-spacing:0.04em; text-transform:uppercase; font-family: ui-monospace, monospace; }
.note-body { font-size:16px; line-height:1.7; color:var(--text); }
.note-body h1, .note-body h2, .note-body h3 { letter-spacing:-0.01em; margin-top:1.4em; }
.note-body h1 { font-size:24px; }
.note-body h2 { font-size:20px; }
.note-body h3 { font-size:17px; }
.note-body pre { background:var(--bg-card); border:1px solid var(--border); padding:14px; border-radius:8px; overflow-x:auto; font-size:13px; }
.note-body code { background:var(--bg-card); padding:2px 6px; border-radius:4px; font-size:0.9em; }
.note-body pre code { background:none; padding:0; }
.note-body blockquote { border-left: 3px solid var(--border-strong); margin: 1em 0; padding: 0 16px; color: var(--text-dim); }
.note-body table { border-collapse: collapse; margin: 1em 0; }
.note-body th, .note-body td { border:1px solid var(--border); padding:6px 10px; }
.note-body th { background: var(--bg-card); }
.wikilink { color: var(--cyan); border-bottom: 1px dashed currentColor; }
.wikilink:hover { text-decoration: none; border-bottom-style: solid; }
.wikilink-references, .wikilink-supports, .wikilink-contradicts, .wikilink-example_of { color: var(--evidential); }
.wikilink-elaborates, .wikilink-defines, .wikilink-derived_from { color: var(--structural); }
.wikilink-questions { color: var(--interrogative); }
.wikilink-related { color: var(--text-dim); }
.wikilink-broken { color: var(--rose); border-bottom: 1px dotted currentColor; }
.note-side { font-size: 13px; }
.note-side h2 { font-size:11px; color:var(--text-faint); letter-spacing:0.12em; text-transform:uppercase; margin: 0 0 12px; font-weight: 500; }
.note-side h2:not(:first-child) { margin-top: 32px; }
.link-group { margin-bottom: 16px; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; }
.link-group h3 { margin:0 0 8px; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color: var(--text-dim); font-weight:500; font-family: ui-monospace, monospace; }
.link-group ul { margin:0; padding:0 0 0 14px; }
.link-group li { margin:2px 0; }
.link-references h3, .link-supports h3, .link-contradicts h3, .link-example_of h3 { color: var(--evidential); }
.link-elaborates h3, .link-defines h3, .link-derived_from h3 { color: var(--structural); }
.link-questions h3 { color: var(--interrogative); }
.empty { color: var(--text-faint); font-style: italic; font-size: 12px; margin: 0; }
@media (max-width: 900px) {
  main { grid-template-columns: 1fr; }
}