.instance { padding-top: 4rem; padding-bottom: 2rem; }
.instance-head { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 1rem; }
.instance-logo { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
.instance-section { padding: 2.5rem 0 0; border-top: none; }

.instance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.instance-card {
  display: flex; flex-direction: column; gap: .6rem;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.25rem;
}
.instance-card h3 { font-weight: 400; font-size: 1rem; }
.instance-card p { font-size: .85rem; color: var(--muted-foreground); line-height: 1.6; }
.instance-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.instance-url {
  font-family: var(--font-mono); font-size: .75rem;
  color: color-mix(in oklch, var(--foreground) 75%, transparent);
  overflow-wrap: anywhere;
}
.instance-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: auto; }
.instance-links a {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
}
.instance-links a:hover { color: var(--foreground); }
.instance-link { transition: border-color .2s, background .2s; }
.instance-link:hover { border-color: color-mix(in oklch, var(--main) 55%, transparent); background: color-mix(in oklch, var(--foreground) 3%, var(--card)); }
.instance-empty { color: var(--muted-foreground); font-size: .9rem; }

@media (max-width: 480px) {
  .instance { padding-top: 2.5rem; }
  .instance-head { flex-direction: column; gap: 1rem; }
}