body { font: 16px/1.5 system-ui, sans-serif; margin: 0; color: #222; background: #fafafa; }
header { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; background: #fff; border-bottom: 1px solid #ddd; }
main { max-width: 46rem; margin: 1.5rem auto; padding: 0 1rem; }
.brand { font-weight: 700; text-decoration: none; color: inherit; }
form.inline { display: inline; }
form.new-note, form.edit-note, form.new-comment { display: grid; gap: .5rem; margin: 1rem 0; }
input, textarea, button { font: inherit; padding: .45rem; }
.notes, .comments { list-style: none; padding: 0; }
.note { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: .75rem; margin-bottom: .75rem; }
.note.pinned { border-color: #d4a200; }
.note .title { font-weight: 600; }
.meta, .excerpt, .empty { color: #666; font-size: .9em; }
.tag { margin-left: .5rem; font-size: .85em; }
.danger { color: #b00020; }