body[data-page="knowledge"] {
  --knowledge-blue: #39749f;
  --knowledge-blue-deep: #244f70;
  --knowledge-blue-medium: #79a2bf;
  --knowledge-blue-soft: #edf4f8;
  --knowledge-border: #ccd9e2;
  --knowledge-muted: #62717d;
  --knowledge-surface: #ffffff;
  --navigation-surface: #f9fcfe;
  --navigation-border: #cbd8e2;
  --navigation-hover-background: #5687aa;
  --navigation-current-background: #40779f;
  --navigation-hover-shadow: rgba(54, 107, 146, 0.18);
  --navigation-current-shadow: rgba(54, 107, 146, 0.14);
  --navigation-focus: #39749f;
  --appearance-control-surface: rgba(249, 252, 254, 0.94);
  --appearance-control-foreground: #477a9e;
  --appearance-control-border: rgba(79, 128, 161, 0.28);
  --appearance-control-glow:
    0 0.35rem 1rem rgba(41, 73, 94, 0.11),
    0 0 0.8rem rgba(91, 145, 181, 0.16);
  --appearance-control-hover-surface: #eef5f9;
  --appearance-control-hover-foreground: #2f6d98;
  --appearance-control-hover-border: rgba(67, 123, 160, 0.48);
  --appearance-control-hover-glow:
    0 0.4rem 1rem rgba(41, 73, 94, 0.14),
    0 0 1.1rem rgba(91, 145, 181, 0.28);
  --appearance-control-focus: #39749f;
  --appearance-control-sun: #d99a38;

  background: #f4f7f9;
  color: #1f2c36;
}

html:has(body[data-page="knowledge"]) {
  scrollbar-gutter: stable;
}

body[data-page="knowledge"] .page-shell {
  grid-template-rows: auto auto minmax(0, 1fr);
  background: #f4f7f9;
}

body[data-page="knowledge"] .page-shell__header {
  background: #f9fcfe;
}

.knowledge-page {
  inline-size: min(100%, 76rem);
  margin-inline: auto;
  padding-block: clamp(1.75rem, 3vw, 2.75rem) clamp(5rem, 10vw, 9rem);
}

.knowledge-page__title {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.knowledge-index {
  display: grid;
  grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.knowledge-index__categories {
  position: sticky;
  inset-block-start: 2rem;
  padding: 1.15rem;
  border: 1px solid var(--knowledge-border);
  border-block-start: 0.2rem solid var(--knowledge-blue-medium);
  border-radius: 0.2rem;
  background: var(--knowledge-surface);
}

.knowledge-index__categories > p {
  margin: 0 0 0.75rem;
  color: var(--knowledge-blue-deep);
  font-size: 0.78rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.12em;
}

.knowledge-index__categories ol,
.knowledge-entry-list,
.knowledge-entry__related ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.knowledge-index__categories li + li {
  margin-block-start: 0.35rem;
}

.knowledge-index__categories a,
.knowledge-entry__breadcrumb a,
.knowledge-entry__references a,
.knowledge-entry__related a {
  color: var(--knowledge-blue);
  text-decoration-color: color-mix(in srgb, var(--knowledge-blue) 35%, transparent);
  text-underline-offset: 0.2em;
}

.knowledge-index__categories a {
  display: block;
  padding: 0.5rem 0.65rem;
  border-radius: 0.18rem;
  text-decoration: none;
}

.knowledge-index__categories a:hover,
.knowledge-entry__breadcrumb a:hover,
.knowledge-entry__references a:hover,
.knowledge-entry__related a:hover {
  color: var(--knowledge-blue-deep);
}

.knowledge-index__categories a:hover,
.knowledge-index__categories a:focus-visible {
  background: var(--navigation-hover-background);
  color: #ffffff;
}

.knowledge-index__entries {
  min-inline-size: 0;
}

.knowledge-category {
  scroll-margin-block-start: 2rem;
  overflow: hidden;
  border: 1px solid var(--knowledge-border);
  border-radius: 0.25rem;
  background: var(--knowledge-surface);
}

.knowledge-category + .knowledge-category {
  margin-block-start: clamp(3rem, 7vw, 5.5rem);
}

.knowledge-category__header {
  padding: clamp(1.25rem, 3vw, 1.8rem);
  border-block-end: 1px solid var(--knowledge-border);
  background: #edf4f9;
}

.knowledge-category__header h2,
.knowledge-entry__footer h2 {
  margin: 0;
  color: var(--knowledge-blue-deep);
  font-family: var(--font-family-reading);
  font-size: 1.55rem;
  font-weight: var(--font-weight-medium);
}

.knowledge-category__header p {
  margin-block-start: 0.45rem;
  color: var(--knowledge-muted);
}

.knowledge-entry-list li {
  padding: 0 clamp(0.85rem, 2.5vw, 1.35rem);
}

.knowledge-entry-list li + li {
  border-block-start: 1px solid var(--knowledge-border);
}

.knowledge-entry-list a {
  display: grid;
  grid-template-columns: minmax(10rem, 0.8fr) minmax(14rem, 1.5fr) auto;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: baseline;
  margin-block: 0.8rem;
  padding: 1.15rem 1rem;
  border: 1px solid #d7e2ea;
  border-radius: 0.18rem;
  background: #ffffff;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease;
}

.knowledge-entry-list a:hover,
.knowledge-entry-list a:focus-visible {
  border-color: var(--knowledge-blue-medium);
  background: var(--knowledge-blue-soft);
}

.knowledge-entry-list__title {
  color: var(--knowledge-blue-deep);
  font-family: var(--font-family-reading);
  font-size: 1.1rem;
  font-weight: var(--font-weight-medium);
}

.knowledge-entry-list__summary {
  color: #3d4b56;
}

.knowledge-entry-list__meta {
  display: grid;
  gap: 0.2rem;
  color: var(--knowledge-muted);
  font-size: 0.78rem;
  text-align: end;
  white-space: nowrap;
}

.knowledge-page__empty {
  padding-block: 2rem;
  border-block: 1px solid var(--knowledge-border);
  color: var(--knowledge-muted);
}

.knowledge-page--entry {
  inline-size: min(100%, 68rem);
  padding-block-start: clamp(1.5rem, 3vw, 2.5rem);
}

.knowledge-entry {
  inline-size: min(100%, 54rem);
  margin-inline: auto;
}

.knowledge-entry__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-block-end: clamp(1.25rem, 3vw, 2rem);
  color: var(--knowledge-muted);
  font-size: 0.88rem;
}

.knowledge-entry__header {
  padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(1.75rem, 4vw, 2.75rem);
  border-block: 1px solid var(--knowledge-border);
  background: transparent;
}

.knowledge-entry__header h1 {
  max-inline-size: 45rem;
  margin: 0;
  color: var(--knowledge-blue-deep);
  font-family: var(--font-family-reading);
  font-size: clamp(2.05rem, 4.5vw, 3.2rem);
  font-weight: var(--font-weight-medium);
  line-height: 1.18;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
  text-wrap: wrap;
}

.knowledge-entry__summary {
  max-inline-size: 44rem;
  margin-block-start: 1.4rem;
  color: #3d4b56;
  font-size: clamp(1.05rem, 2.2vw, 1.22rem);
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.knowledge-entry__metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.4rem;
  margin-block-start: 1.8rem;
  color: var(--knowledge-muted);
  font-size: 0.82rem;
}

.knowledge-entry__metadata > span {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.knowledge-entry__body {
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  font-family: var(--font-family-reading);
  font-size: clamp(1rem, 1.6vw, 1.08rem);
  line-height: 1.9;
  overflow-wrap: anywhere;
}

.knowledge-entry__body :where(h2, h3) {
  color: var(--knowledge-blue-deep);
  font-weight: var(--font-weight-medium);
  line-height: 1.35;
  scroll-margin-block-start: 2rem;
}

.knowledge-entry__body h2 {
  margin: 3rem 0 1rem;
  padding-block: 0 0.55rem;
  border-block-end: 1px solid var(--knowledge-border);
  font-size: clamp(1.45rem, 3vw, 1.8rem);
}

.knowledge-entry__body h2:first-child {
  margin-block-start: 0;
}

.knowledge-entry__body h3 {
  margin: 2.3rem 0 0.8rem;
  font-size: 1.25rem;
}

.knowledge-entry__body :where(p, ul, ol, blockquote, pre) {
  max-inline-size: 46rem;
}

.knowledge-entry__body p {
  margin-block: 1rem 0;
}

.knowledge-entry__body :where(ul, ol) {
  padding-inline-start: 1.45rem;
}

.knowledge-entry__body li + li {
  margin-block-start: 0.45rem;
}

.knowledge-entry__body code {
  padding: 0.12em 0.35em;
  border: 1px solid #d9e2e9;
  background: #f1f5f8;
  color: #194f79;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.9em;
}

.knowledge-entry__body pre {
  overflow-x: auto;
  padding: 1rem;
  border: 1px solid var(--knowledge-border);
  border-block-start: 3px solid var(--knowledge-blue-medium);
  background: #f1f5f7;
}

.knowledge-entry__body pre code {
  padding: 0;
  border: 0;
  background: transparent;
}

.knowledge-entry__body img {
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  margin-block: 2rem;
  border-radius: 2px;
}

.knowledge-entry__footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1.25rem;
  padding-block-start: 2rem;
  border-block-start: 1px solid var(--knowledge-blue-medium);
}

.knowledge-entry__references,
.knowledge-entry__related {
  padding: 1.35rem;
  border: 1px solid var(--knowledge-border);
  border-radius: 0.2rem;
  background: #f8fafb;
}

.knowledge-entry__footer h2 {
  font-size: 1.35rem;
}

.knowledge-entry__references ol {
  margin: 1rem 0 0;
  padding-inline-start: 1.35rem;
}

.knowledge-entry__references li + li,
.knowledge-entry__related li + li {
  margin-block-start: 0.65rem;
}

.knowledge-entry__references p {
  margin-block-start: 0.25rem;
  color: var(--knowledge-muted);
}

.knowledge-entry__related ul {
  margin-block-start: 1rem;
}

@media (max-width: 760px) {
  .knowledge-page {
    padding-block-start: 1.5rem;
  }

  .knowledge-index {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .knowledge-index__categories {
    position: static;
  }

  .knowledge-index__categories ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1.1rem;
  }

  .knowledge-entry-list a {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
  }

  .knowledge-entry-list__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    text-align: start;
    white-space: normal;
  }

  .knowledge-entry__summary {
    line-height: 1.65;
  }
}

html[data-appearance="dark"] body[data-page="knowledge"] {
  --knowledge-blue: #83b7da;
  --knowledge-blue-deep: #b3d2e8;
  --knowledge-blue-medium: #5f8eae;
  --knowledge-blue-soft: #243946;
  --knowledge-border: #304855;
  --knowledge-muted: #9cabb5;
  --knowledge-surface: #19262e;
  --navigation-surface: #15222a;
  --navigation-border: #304754;
  --navigation-hover-background: #315b77;
  --navigation-current-background: #3d6e8e;
  --navigation-hover-shadow: rgba(66, 126, 165, 0.18);
  --navigation-current-shadow: rgba(66, 126, 165, 0.14);
  --navigation-focus: #83b7da;
  --appearance-control-surface: #16242c;
  --appearance-control-foreground: #cce5f5;
  --appearance-control-border: rgba(102, 159, 195, 0.34);
  --appearance-control-glow:
    0 0.4rem 1rem rgba(0, 8, 13, 0.3),
    0 0 0.9rem rgba(70, 128, 164, 0.2);
  --appearance-control-hover-surface: #1c303b;
  --appearance-control-hover-foreground: #edf8ff;
  --appearance-control-hover-border: rgba(129, 186, 220, 0.54);
  --appearance-control-hover-glow:
    0 0.4rem 1rem rgba(0, 8, 13, 0.34),
    0 0 1.15rem rgba(75, 144, 186, 0.34);
  --appearance-control-focus: #8fc5e4;
  --appearance-control-moon: #cce9fa;
  background: #0f181f;
  color: #d8e0e5;
}

html[data-appearance="dark"] body[data-page="knowledge"] .page-shell,
html[data-appearance="dark"] body[data-page="knowledge"] .page-shell__header {
  background: #0f181f;
}

html[data-appearance="dark"] body[data-page="knowledge"] .navigation {
  background: #15222a;
}

html[data-appearance="dark"] .knowledge-index__categories {
  background: #17242c;
}

html[data-appearance="dark"] .knowledge-category__header {
  background: #20333e;
}

html[data-appearance="dark"] .knowledge-entry-list a {
  border-color: #304a59;
  background: #1a2932;
}

html[data-appearance="dark"] .knowledge-entry-list a:hover,
html[data-appearance="dark"] .knowledge-entry-list a:focus-visible {
  border-color: #5f8eae;
  background: #243946;
}

html[data-appearance="dark"] .knowledge-entry-list__summary,
html[data-appearance="dark"] .knowledge-entry__summary {
  color: #c3cfd7;
}

html[data-appearance="dark"] .knowledge-entry__body code {
  border-color: #3a5262;
  background: #22323d;
  color: #a8d1eb;
}

html[data-appearance="dark"] .knowledge-entry__body pre {
  background: #17252d;
}

html[data-appearance="dark"] .knowledge-entry__references,
html[data-appearance="dark"] .knowledge-entry__related {
  background: #16232b;
}

html[data-appearance="dark"] .knowledge-page--entry {
  background: #131f27;
}

html[data-appearance="dark"] .knowledge-entry__header {
  border-block-color: #304855;
}

html[data-appearance="dark"] .knowledge-entry__body img {
  background: #17252d;
  border: 1px solid #304855;
}

@media (max-width: 480px) {
  .knowledge-entry__header h1 {
    font-size: 2rem;
    line-height: 1.22;
  }

  .knowledge-entry__metadata {
    gap: 0.45rem 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .knowledge-page {
    scroll-behavior: auto;
  }

  .knowledge-entry-list a {
    transition: none;
  }
}
