.nodes-hero {
  padding-bottom:56px;
}

.nodes-coverage {
  display:grid;
  gap:12px;
}

.nodes-coverage__label {
  font-family:var(--font-mono);
  font-size:var(--text-sm);
  color:var(--muted);
}

.nodes-coverage__value {
  font-size:var(--text-stat);
  font-weight:var(--weight-bold);
  line-height:1.4;
  overflow-wrap:anywhere;
}

.nodes-coverage > .muted {
  font-size:var(--text-nav);
}

.nodes-document {
  padding-bottom:24px;
}

.nodes-notes {
  margin-top:28px;
  max-width:var(--reading);
}

.nodes-links {
  margin-top:28px;
  gap:16px 24px;
}

.nodes-text-link {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:var(--text-nav);
  font-weight:var(--weight-semibold);
  text-decoration:underline;
  text-underline-offset:4px;
}

.nodes-type-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}

.nodes-type {
  display:flex;
  flex-direction:column;
  gap:20px;
}

.nodes-type__code {
  align-self:flex-start;
  padding:5px 10px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--panel-2);
  font-size:var(--text-xs);
  font-weight:var(--weight-semibold);
  letter-spacing:.06em;
}

.nodes-type > p:not(.nodes-type__code),
.nodes-type li {
  font-size:var(--text-nav);
  line-height:1.85;
  color:var(--muted);
}

.nodes-type ul {
  margin:0;
  padding-left:1.2em;
}

.nodes-type li + li {
  margin-top:8px;
}

.nodes-use-list {
  display:grid;
  gap:24px;
}

.nodes-use {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:32px;
}

.nodes-use__heading {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
}

.nodes-use .prose {
  color:var(--muted);
}

.nodes-check-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}

.nodes-check-grid .prose p {
  color:var(--muted);
}

.nodes-reading {
  max-width:var(--reading);
}

.nodes-document .callout a {
  text-decoration:underline;
  text-underline-offset:4px;
}

@media (max-width:1024px) {
  .nodes-type-grid {
    grid-template-columns:minmax(0,1fr);
  }

  .nodes-type {
    gap:16px;
  }
}

@media (max-width:768px) {
  .nodes-use,
  .nodes-check-grid {
    grid-template-columns:minmax(0,1fr);
  }

  .nodes-use {
    gap:20px;
  }

  .nodes-coverage__value {
    font-size:var(--text-number);
  }
}

@media (max-width:640px) {
  .nodes-hero {
    padding-bottom:36px;
  }
}