.ksld-parity {
  padding: 1.15rem;
  border: 1px solid #234765;
  border-radius: 16px;
  background: linear-gradient(145deg, #0a192a, #07131f);
}

.ksld-parity-badge {
  flex: 0 0 auto;
  padding: .42rem .68rem;
  border: 1px solid rgba(69, 224, 165, .45);
  border-radius: 999px;
  background: rgba(69, 224, 165, .08);
  color: #7cf0bd;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.ksld-parity-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
}

.ksld-parity-grid article {
  padding: .8rem;
  border: 1px solid #1c3851;
  border-radius: 11px;
  background: #071421;
}

.ksld-parity-grid strong,
.ksld-parity-grid span {
  display: block;
}

.ksld-parity-grid strong {
  margin-bottom: .35rem;
  color: #dff4ff;
}

.ksld-parity-grid span {
  color: var(--muted);
  font-size: .78rem;
}

.ksld-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0 0 1rem;
}

.ksld-filters button {
  appearance: none;
  padding: .38rem .65rem;
  border: 1px solid #28445e;
  border-radius: 999px;
  background: #071523;
  color: #a9bed2;
  font: inherit;
  font-size: .72rem;
  cursor: pointer;
}

.ksld-filters button:hover,
.ksld-filters button.active {
  border-color: #4fb8ee;
  background: #0c2b42;
  color: #e6f7ff;
}

.ksld-function {
  display: flex;
  flex-direction: column;
}

.ksld-function-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: .48rem 0 .1rem;
}

.ksld-function-meta span {
  padding: .12rem .34rem;
  border: 1px solid rgba(69, 224, 165, .24);
  border-radius: 999px;
  background: rgba(69, 224, 165, .06);
  color: #83d8b4;
  font-size: .56rem;
  letter-spacing: .04em;
}

.ksld-function-meta span:first-child {
  border-color: #2e536f;
  background: #0c2134;
  color: #9bdcff;
}

.ksld-function p {
  margin: .1rem 0 .65rem;
  color: #9eb4ca;
  font-size: .76rem;
  line-height: 1.45;
}

.ksld-function pre {
  margin-top: auto;
}

@media (max-width: 980px) {
  .ksld-parity-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ksld-parity-badge {
    align-self: flex-start;
  }
}

@media (max-width: 620px) {
  .ksld-parity {
    padding: .9rem;
  }

  .ksld-parity-grid {
    grid-template-columns: 1fr;
  }
}