:root {
  color-scheme: light dark;
  --fg: #1a1a1a;
  --muted: #666;
  --bg: #fafaf7;
  --row: #fff;
  --row-hover: #f3f3ee;
  --border: #e3e3df;
  --accent: #2a6f97;
  --tag-bg: #ececea;
  --tag-fg: #444;
}
:root[data-theme="dark"] {
  --fg: #e9e9e6;
  --muted: #9a9a95;
  --bg: #15171a;
  --row: #1c1f23;
  --row-hover: #23272c;
  --border: #2c2f34;
  --accent: #6db4dc;
  --tag-bg: #2a2e34;
  --tag-fg: #c4c4bf;
}
* { box-sizing: border-box; }
body {
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
  margin: 0;
  padding: 2rem 1rem 4rem;
}
.wrap { max-width: 60rem; margin: 0 auto; }
header { margin-bottom: 1.5rem; position: relative; }
.theme-toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--row);
  color: var(--fg);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
  line-height: 1;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle .icon { font-size: .95rem; }
[data-theme="dark"] .theme-toggle .icon-sun { display: inline; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }
h1 { font-size: 1.8rem; margin: 0 0 .25rem; }
header p { color: var(--muted); margin: 0; }
nav.filters { margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: .75rem; }
.facet {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: .5rem .75rem;
  align-items: start;
}
.facet .label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding-top: .2rem;
}
.facet .pills {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
@media (max-width: 600px) {
  .facet { grid-template-columns: 1fr; gap: .35rem; }
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin: 0;
  padding: .15rem .6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .78rem;
  font-family: inherit;
  color: var(--fg);
  background: var(--row);
  cursor: pointer;
}
.pill:hover { border-color: var(--accent); color: var(--accent); }
.pill .n { color: var(--muted); font-variant-numeric: tabular-nums; }
.pill.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.pill.active .n { color: rgba(255,255,255,.75); }
.pill.zero { opacity: .35; }
.hidden { display: none !important; }
details.cat-section { margin-top: 2.2rem; }
details.cat-section > summary {
  font-size: 1.15rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg);
  border-bottom: 2px solid var(--border);
  padding: .35rem 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
details.usage-section { margin: 1.3rem 0 0 0; }
details.usage-section > summary {
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding: .35rem 0 .4rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: "▸";
  font-size: .75em;
  color: var(--muted);
  display: inline-block;
  width: 1em;
  transition: transform .12s ease;
}
details[open] > summary::before { transform: rotate(90deg); }
details > summary .section-count {
  color: var(--muted);
  font-weight: 400;
  font-size: .82em;
  font-variant-numeric: tabular-nums;
}
details > summary:hover .section-name { color: var(--accent); }
.list { display: flex; flex-direction: column; }
.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem;
  padding: .8rem .4rem;
  border-bottom: 1px solid var(--border);
}
.row .year {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
  color: var(--muted);
}
.row:hover { background: var(--row-hover); }
.row .name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row .name a { color: var(--fg); text-decoration: none; }
.row .name a:hover { color: var(--accent); }
.row .name a.wp {
  margin-left: .35rem;
  font-size: .68rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  vertical-align: .1em;
}
.row .name a.wp:hover { color: var(--accent); }
.row .name a.home-link {
  margin-left: .35rem;
  font-size: .85em;
  text-decoration: none;
  opacity: .55;
  vertical-align: .05em;
}
.row .name a.home-link:hover { opacity: 1; }
.row .desc {
  color: var(--fg);
  font-size: .92rem;
}
.row .desc > :first-child { margin-top: 0; }
.row .desc > :last-child { margin-bottom: 0; }
.row .desc p { margin: .4em 0; }
.row .desc blockquote {
  margin: .5em 0;
  padding: .1em .8em;
  border-left: 3px solid var(--border);
  color: var(--muted);
}
.row .desc ul, .row .desc ol { margin: .4em 0; padding-left: 1.4em; }
.row .desc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  background: var(--tag-bg);
  padding: .05em .3em;
  border-radius: 3px;
}
.row .desc pre {
  background: var(--tag-bg);
  padding: .5em .7em;
  border-radius: 4px;
  overflow-x: auto;
  font-size: .82rem;
  margin: .5em 0;
}
.row .desc pre code { background: transparent; padding: 0; }
.row .desc a { color: var(--accent); }
.row .author {
  margin-top: .2rem;
  font-size: .78rem;
  color: var(--muted);
}
.row .tags {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  justify-content: flex-start;
  white-space: nowrap;
}
.tag {
  display: inline-block;
  padding: .05rem .5rem;
  border-radius: 3px;
  font-size: .72rem;
  background: var(--tag-bg);
  color: var(--tag-fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.tag .k {
  opacity: .55;
  margin-right: .25rem;
  font-weight: 500;
}
.tag.enc-content { background: #d6efd6; color: #1e4d1e; }
.tag.enc-transport { background: #f1ecda; color: #5e4a14; }
.tag.enc-optional { background: #ececec; color: #555; }
.tag.enc-none { background: #f4dcdc; color: #6e2222; }
.users-icon {
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
  line-height: 1;
  margin-right: .15rem;
  cursor: help;
}
.tag.topology-p2p { background: #e6dcf3; color: #432970; }
.tag.topology-federated { background: #dcecf3; color: #1e4a63; }
.tag.topology-blockchain { background: #f3ead0; color: #5b4607; }
.tag.topology-friend-to-friend { background: #f3dce6; color: #6e1f3f; }
.tag.topology-self-sovereign { background: #d6efe7; color: #1d5747; }
.tag.topology-hybrid { background: #e9e9e9; color: #333; }
.tag.topology-centralized { background: #f7dada; color: #6a1a1a; }
.tag.topology-self-hosted { background: #e1ddf1; color: #322266; }
.tag.entity-unitary { background: #c7e2ec; color: #15445a; }
.tag.entity-federated { background: #d4ecdc; color: #1f5a32; }
.tag.entity-siloed { background: #f3dbc7; color: #5e3015; }
.tag.entity-transport { background: #e6e6e6; color: #555; }
.tag.identity-pubkey { background: #e6e6e6; color: #333; }
.tag.identity-did { background: #d6efe7; color: #1d5747; }
.tag.identity-account { background: #ecececff; color: #555; }
.tag.identity-domain { background: #ecddf5; color: #4a2670; }
.tag.identity-phone { background: #f7e0d4; color: #6a3115; }
.tag.identity-none { background: #f4dcdc; color: #6e2222; }
.tag.category-protocol { background: #dde7f7; color: #1f3a6b; }
.tag.category-library { background: #e6e1f5; color: #3a2b6e; }
.tag.category-server { background: #e8eadc; color: #4a4f1f; }
.tag.category-application { background: #f6e0d4; color: #6a3915; }
.tag.usage-social { background: #dde6f7; color: #1f3a6b; }
.tag.usage-identity { background: #e8def3; color: #4a2670; }
.tag.usage-messaging { background: #d6efe1; color: #1d5740; }
.tag.usage-collaboration { background: #d6eef0; color: #1d5759; }
.tag.usage-storage { background: #f7e6cf; color: #6a4615; }
.tag.usage-search { background: #f4dcc3; color: #6a3b14; }
.tag.usage-networking { background: #f3d8d6; color: #6a2d2a; }
.tag.usage-naming { background: #ecdef0; color: #4f2050; }
.tag.usage-coding { background: #e3ecd4; color: #3e4d1d; }
.tag.usage-hypertext { background: #ece8d6; color: #4a4226; }
.tag.usage-self-hosted { background: #e1ddf1; color: #322266; }
.tag.usage-self-hosting { background: #e1ddf1; color: #322266; }
[data-theme="dark"] .tag.enc-content { background: #1d3a1d; color: #b8e0b8; }
[data-theme="dark"] .tag.enc-transport { background: #3d3517; color: #d8c98a; }
[data-theme="dark"] .tag.enc-optional { background: #2e2e2e; color: #c0c0c0; }
[data-theme="dark"] .tag.enc-none { background: #482323; color: #e5b4b4; }
[data-theme="dark"] .tag.topology-p2p { background: #2f2548; color: #c8b8ee; }
[data-theme="dark"] .tag.topology-federated { background: #1d3947; color: #b6d6e8; }
[data-theme="dark"] .tag.topology-blockchain { background: #43370c; color: #e7d385; }
[data-theme="dark"] .tag.topology-friend-to-friend { background: #4a1f33; color: #ecbcd0; }
[data-theme="dark"] .tag.topology-self-sovereign { background: #1c3b30; color: #afd9c8; }
[data-theme="dark"] .tag.topology-hybrid { background: #2e2e2e; color: #cfcfcf; }
[data-theme="dark"] .tag.topology-centralized { background: #4a1818; color: #f1bebe; }
[data-theme="dark"] .tag.topology-self-hosted { background: #2a234e; color: #c1b8ee; }
[data-theme="dark"] .tag.entity-unitary { background: #1d3947; color: #a6d2e4; }
[data-theme="dark"] .tag.entity-federated { background: #1f3a24; color: #a8d8b6; }
[data-theme="dark"] .tag.entity-siloed { background: #4a2e18; color: #e7be95; }
[data-theme="dark"] .tag.entity-transport { background: #2e2e2e; color: #c0c0c0; }
[data-theme="dark"] .tag.identity-pubkey { background: #2c2c2c; color: #d0d0d0; }
[data-theme="dark"] .tag.identity-did { background: #1c3b30; color: #afd9c8; }
[data-theme="dark"] .tag.identity-account { background: #2e2e2e; color: #c0c0c0; }
[data-theme="dark"] .tag.identity-domain { background: #3a2050; color: #d8bee8; }
[data-theme="dark"] .tag.identity-phone { background: #4a2918; color: #f1bf9a; }
[data-theme="dark"] .tag.identity-none { background: #482323; color: #e5b4b4; }
[data-theme="dark"] .tag.category-protocol { background: #1f2a47; color: #c2d2f1; }
[data-theme="dark"] .tag.category-library { background: #2c2348; color: #cabaf2; }
[data-theme="dark"] .tag.category-server { background: #36381a; color: #d6dba0; }
[data-theme="dark"] .tag.category-application { background: #4a2918; color: #e5bf9a; }
[data-theme="dark"] .tag.usage-social { background: #1f2a47; color: #c2d2f1; }
[data-theme="dark"] .tag.usage-identity { background: #3a2050; color: #d8bee8; }
[data-theme="dark"] .tag.usage-messaging { background: #1c3b30; color: #afd9c8; }
[data-theme="dark"] .tag.usage-collaboration { background: #1c3a3c; color: #afd6d9; }
[data-theme="dark"] .tag.usage-storage { background: #4a3818; color: #e7c89a; }
[data-theme="dark"] .tag.usage-search { background: #4a2918; color: #e5bf9a; }
[data-theme="dark"] .tag.usage-networking { background: #4a1f1d; color: #e7b6b3; }
[data-theme="dark"] .tag.usage-naming { background: #3a1f3c; color: #d8bee0; }
[data-theme="dark"] .tag.usage-coding { background: #2a3618; color: #c4dba0; }
[data-theme="dark"] .tag.usage-hypertext { background: #36321a; color: #d6cda0; }
[data-theme="dark"] .tag.usage-self-hosted { background: #2a234e; color: #c1b8ee; }
[data-theme="dark"] .tag.usage-self-hosting { background: #2a234e; color: #c1b8ee; }
footer {
  margin-top: 3rem;
  color: var(--muted);
  font-size: .85rem;
  text-align: center;
}
.back-link {
  margin: 0 0 1rem;
  font-size: .85rem;
}
.back-link a { color: var(--muted); text-decoration: none; }
.back-link a:hover { color: var(--accent); }
.project-header h1 { margin: 0 0 .5rem; font-size: 1.6rem; }
.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .5rem 0 1.25rem;
}
.project-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .35rem 1rem;
  margin: 0 0 1.75rem;
  padding: .9rem 1rem;
  background: var(--row);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .9rem;
}
.project-meta dt {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .72rem;
  padding-top: .15rem;
}
.project-meta dd { margin: 0; word-break: break-word; }
.project-meta dd a { color: var(--accent); text-decoration: none; }
.project-meta dd a:hover { text-decoration: underline; }
.project-notes { margin: 0 0 2rem; line-height: 1.55; }
.project-notes > :first-child { margin-top: 0; }
.project-notes blockquote {
  margin: .8em 0;
  padding: .1em .9em;
  border-left: 3px solid var(--border);
  color: var(--muted);
}
.project-notes pre {
  background: var(--tag-bg);
  padding: .6em .8em;
  border-radius: 4px;
  overflow-x: auto;
}
.project-notes code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  background: var(--tag-bg);
  padding: .05em .3em;
  border-radius: 3px;
}
.project-notes pre code { background: transparent; padding: 0; }
.project-edges {
  margin: 0 0 1.5rem;
  padding: 0;
}
.project-edges h2 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin: 0 0 .4rem;
  font-weight: 600;
}
.project-edges ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .6rem;
}
.project-edges li {
  font-size: .9rem;
}
.project-edges a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.project-edges a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.external-marker { color: var(--muted); font-size: .85em; }
.search-bar {
  margin-top: 1.25rem;
}
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .85rem;
  gap: .75rem;
  flex-wrap: wrap;
}
.toolbar-left {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
#search-input {
  display: block;
  width: 100%;
  padding: .65rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 1rem;
  background: var(--row);
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
#search-input::placeholder { color: var(--muted); }
#search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(42,111,151,.15);
}
.collapse-toggle {
  background: var(--row);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .25rem .8rem;
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}
.collapse-toggle:hover { border-color: var(--accent); color: var(--accent); }
.view-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.view-switch button {
  background: var(--row);
  color: var(--fg);
  border: 0;
  padding: .25rem .9rem;
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
}
.view-switch button.active {
  background: var(--accent);
  color: #fff;
}
#graph-wrap {
  width: 100%;
  height: 78vh;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--row);
  margin-top: .5rem;
}
.graph-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.zoom-controls {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.zoom-controls button {
  background: var(--row);
  color: var(--fg);
  border: 0;
  padding: .25rem .7rem;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  min-width: 2.2rem;
}
.zoom-controls button + button { border-left: 1px solid var(--border); }
.zoom-controls button:hover { background: var(--row-hover); color: var(--accent); }
#timeline-axis {
  display: none;
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  color: var(--muted);
  justify-content: space-between;
}
#timeline-axis.shown { display: flex; }
.hidden-view { display: none !important; }
.graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin-top: .75rem;
  font-size: .78rem;
  color: var(--muted);
}
.graph-legend span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.graph-legend i {
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  display: inline-block;
}