body[data-page="knowledge"] {
  --knowledge-bg: #0b1015;
  --knowledge-star: 255 227 163;
  --knowledge-text: #f3efe6;
  --knowledge-muted: rgba(232, 229, 221, 0.52);
  --knowledge-line: rgba(255, 225, 170, 0.095);
  --knowledge-line-cross: rgba(145, 174, 194, 0.12);
  --knowledge-line-active: rgba(255, 235, 194, 0.54);
  --knowledge-practice: 109 157 204;
  min-height: 100svh;
  background:
    radial-gradient(circle at 50% 45%, rgba(65, 93, 122, 0.095), transparent 31%),
    radial-gradient(circle at 16% 16%, rgba(67, 88, 108, 0.065), transparent 24%),
    var(--knowledge-bg);
  color: var(--knowledge-text);
}

html[data-theme="light"] body[data-page="knowledge"] {
  --knowledge-bg: #eef2f5;
  --knowledge-star: 154 101 22;
  --knowledge-text: #22262b;
  --knowledge-muted: rgba(42, 48, 55, 0.48);
  --knowledge-line: rgba(126, 91, 35, 0.10);
  --knowledge-line-cross: rgba(76, 112, 149, 0.10);
  --knowledge-line-active: rgba(126, 91, 35, 0.44);
  --knowledge-practice: 76 112 149;
  background:
    radial-gradient(circle at 50% 45%, rgba(141, 164, 188, 0.105), transparent 33%),
    radial-gradient(circle at 15% 14%, rgba(166, 180, 193, 0.09), transparent 25%),
    var(--knowledge-bg);
}

body[data-page="knowledge"] .site-header {
  background: color-mix(in srgb, var(--knowledge-bg) 86%, transparent);
}

.knowledge-main {
  min-height: calc(100svh - 66px);
}

.knowledge-stage {
  position: relative;
  width: 100%;
  min-height: calc(100svh - 66px);
  overflow: hidden;
  isolation: isolate;
}

.knowledge-stage::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  opacity: 0.41;
  background-image:
    radial-gradient(circle at 12% 24%, rgba(255,255,255,.25) 0 1px, transparent 1.35px),
    radial-gradient(circle at 78% 17%, rgba(255,255,255,.17) 0 1px, transparent 1.35px),
    radial-gradient(circle at 61% 77%, rgba(255,255,255,.13) 0 1px, transparent 1.25px),
    radial-gradient(circle at 29% 68%, rgba(255,255,255,.15) 0 1px, transparent 1.35px),
    radial-gradient(circle at 92% 68%, rgba(255,255,255,.15) 0 1px, transparent 1.2px);
  background-size: 310px 250px, 390px 285px, 440px 350px, 550px 390px, 660px 450px;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

html[data-theme="light"] .knowledge-stage::before {
  opacity: 0.17;
  filter: invert(1);
}

.knowledge-heading {
  position: absolute;
  top: clamp(24px, 4.2vh, 44px);
  left: max(28px, calc((100vw - 1180px) / 2));
  z-index: 6;
  pointer-events: none;
}

.knowledge-heading p {
  margin: 0;
  color: var(--knowledge-muted);
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.knowledge-heading h1 {
  margin: 5px 0 0;
  color: color-mix(in srgb, var(--knowledge-text) 82%, transparent);
  font-size: clamp(1.02rem, 1.65vw, 1.28rem);
  font-weight: 610;
  letter-spacing: -0.035em;
}

.knowledge-graph-shell {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.knowledge-plane {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(1080px, calc(100vw - 104px));
  height: min(620px, calc(100svh - 138px));
  min-height: 520px;
  transform: translate(-50%, -50%) translate3d(var(--graph-x, 0), var(--graph-y, 0), 0);
  transition: transform 520ms cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}

.knowledge-galaxies,
.knowledge-edges,
.knowledge-nodes {
  position: absolute;
  inset: 0;
}

.knowledge-galaxies {
  z-index: 0;
  pointer-events: none;
}

.knowledge-galaxy {
  --galaxy-rgb: 145 158 170;
  position: absolute;
  left: var(--gx);
  top: var(--gy);
  width: var(--gw);
  height: var(--gh);
  border: 1px solid rgb(var(--galaxy-rgb) / calc(.075 + var(--galaxy-strength) * .085));
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at 50% 50%,
      rgb(var(--galaxy-rgb) / calc(.026 + var(--galaxy-strength) * .038)) 0%,
      rgb(var(--galaxy-rgb) / calc(.016 + var(--galaxy-strength) * .022)) 38%,
      transparent 72%
    );
  box-shadow:
    inset 0 0 34px rgb(var(--galaxy-rgb) / calc(.012 + var(--galaxy-strength) * .018)),
    0 0 28px rgb(var(--galaxy-rgb) / calc(.010 + var(--galaxy-strength) * .016));
  opacity: calc(.72 + var(--galaxy-strength) * .18);
  transform: translate(-50%, -50%);
  transition: opacity 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.knowledge-galaxy::before,
.knowledge-galaxy::after {
  position: absolute;
  border-radius: inherit;
  content: "";
}

.knowledge-galaxy::before {
  inset: -10%;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgb(var(--galaxy-rgb) / calc(.022 + var(--galaxy-strength) * .033)) 0%,
    rgb(var(--galaxy-rgb) / calc(.010 + var(--galaxy-strength) * .018)) 42%,
    transparent 74%
  );
  filter: blur(19px);
  opacity: .92;
}

.knowledge-galaxy::after {
  inset: 5%;
  background-image:
    radial-gradient(circle at 16% 28%, rgb(var(--galaxy-rgb) / .32) 0 0.7px, transparent 1.2px),
    radial-gradient(circle at 72% 18%, rgb(var(--galaxy-rgb) / .24) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 38% 68%, rgb(var(--galaxy-rgb) / .22) 0 0.65px, transparent 1.15px),
    radial-gradient(circle at 84% 63%, rgb(var(--galaxy-rgb) / .22) 0 0.7px, transparent 1.2px),
    radial-gradient(circle at 55% 44%, rgb(var(--galaxy-rgb) / .18) 0 0.55px, transparent 1.05px);
  background-size: 86px 64px, 112px 78px, 124px 92px, 148px 106px, 172px 118px;
  mask-image: radial-gradient(ellipse, #000 10%, #000 48%, transparent 79%);
  opacity: calc(.07 + var(--galaxy-strength) * .11);
}

html[data-theme="light"] .knowledge-galaxy {
  border-color: rgb(var(--galaxy-rgb) / calc(.095 + var(--galaxy-strength) * .09));
  background:
    radial-gradient(
      ellipse at 50% 50%,
      rgb(var(--galaxy-rgb) / calc(.030 + var(--galaxy-strength) * .035)) 0%,
      rgb(var(--galaxy-rgb) / calc(.014 + var(--galaxy-strength) * .018)) 40%,
      transparent 73%
    );
}

html[data-theme="light"] .knowledge-galaxy::after {
  opacity: calc(.05 + var(--galaxy-strength) * .075);
}

.knowledge-galaxy-label {
  position: absolute;
  left: 50%;
  top: 7%;
  z-index: 2;
  color: rgb(var(--galaxy-rgb) / .66);
  font-size: 0.57rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: calc(.50 + var(--galaxy-strength) * .27);
  text-shadow: 0 0 12px rgb(var(--galaxy-rgb) / .16);
  transform: translateX(-50%);
  white-space: nowrap;
  transition: opacity 160ms ease, color 160ms ease, text-shadow 160ms ease;
}

html[data-theme="light"] .knowledge-galaxy-label {
  color: rgb(var(--galaxy-rgb) / .76);
  text-shadow: none;
}

.knowledge-galaxy.is-active {
  border-color: rgb(var(--galaxy-rgb) / .30);
  box-shadow:
    inset 0 0 42px rgb(var(--galaxy-rgb) / .070),
    0 0 36px rgb(var(--galaxy-rgb) / .070);
  filter: brightness(1.10);
  opacity: 1;
}

.knowledge-galaxy.is-active .knowledge-galaxy-label {
  color: rgb(var(--galaxy-rgb) / .96);
  opacity: 1;
  text-shadow: 0 0 15px rgb(var(--galaxy-rgb) / .24);
}

.knowledge-galaxy.is-connected {
  border-color: rgb(var(--galaxy-rgb) / .20);
  box-shadow: 0 0 30px rgb(var(--galaxy-rgb) / .045);
  opacity: .90;
}

.knowledge-galaxy.is-connected .knowledge-galaxy-label {
  opacity: .88;
}

.knowledge-galaxy.is-subdued {
  opacity: 0.47;
}

.knowledge-edges {
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.knowledge-edge {
  stroke: var(--knowledge-line);
  stroke-width: 0.92;
  vector-effect: non-scaling-stroke;
  transition: stroke 150ms ease, opacity 150ms ease, stroke-dasharray 150ms ease;
}

.knowledge-edge.is-cross-galaxy {
  stroke: var(--knowledge-line-cross);
  stroke-dasharray: 2 7;
}

.knowledge-edge.is-cross-primary {
  opacity: 0.29;
}

.knowledge-edge.is-cross-secondary {
  opacity: 0.025;
}

.knowledge-edge.is-related {
  stroke: var(--knowledge-line-active);
  stroke-dasharray: none;
  opacity: 1;
}

.knowledge-edge.is-context {
  opacity: 0.64;
}

.knowledge-edge.is-soft-dim {
  opacity: 0.08;
}

.knowledge-nodes {
  z-index: 2;
}

.knowledge-node {
  --node-size: 10px;
  --mastery: .35;
  --practice: 0;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 82px;
  height: 46px;
  margin: -23px 0 0 -41px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: default;
  transform: translateZ(0);
  transition: opacity 150ms ease, transform 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.knowledge-node::before {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--node-size) + 11px);
  height: calc(var(--node-size) + 11px);
  border: 1px solid rgb(var(--knowledge-practice) / calc(var(--practice) * .40));
  border-radius: 50%;
  box-shadow: 0 0 9px rgb(var(--knowledge-practice) / calc(var(--practice) * .075));
  content: "";
  opacity: clamp(0, calc((var(--practice) - .22) * 1.45), .86);
  transform: translate(-50%, -50%);
}

.knowledge-node-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--node-size);
  height: var(--node-size);
  border-radius: 50%;
  background: rgb(var(--knowledge-star) / calc(.20 + var(--mastery) * .80));
  box-shadow:
    0 0 calc(2px + var(--mastery) * 4px) rgb(var(--knowledge-star) / calc(.10 + var(--mastery) * .36)),
    0 0 calc(5px + var(--mastery) * 12px) rgb(var(--knowledge-star) / calc(.035 + var(--mastery) * .13));
  transform: translate(-50%, -50%);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.knowledge-node[data-tier="core"] .knowledge-node-core {
  box-shadow:
    0 0 calc(3px + var(--mastery) * 5px) rgb(var(--knowledge-star) / calc(.15 + var(--mastery) * .42)),
    0 0 calc(8px + var(--mastery) * 16px) rgb(var(--knowledge-star) / calc(.05 + var(--mastery) * .16));
}

.knowledge-node-label {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--node-size) * .5 + 7px);
  color: rgb(var(--knowledge-star) / .72);
  font-size: 0.66rem;
  font-weight: 550;
  letter-spacing: -0.012em;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: color 150ms ease, opacity 150ms ease, transform 150ms ease;
}

.knowledge-node[data-tier="core"] .knowledge-node-label {
  color: rgb(var(--knowledge-star) / .94);
  font-size: 0.78rem;
  font-weight: 630;
  opacity: 1;
}

.knowledge-node[data-tier="major"] .knowledge-node-label {
  opacity: 0.74;
}

.knowledge-node[data-tier="satellite"] .knowledge-node-label {
  font-size: 0.61rem;
  opacity: 0.44;
}

.knowledge-node:hover,
.knowledge-node:focus-visible,
.knowledge-node.is-active {
  z-index: 8;
  outline: none;
  transform: scale(1.07);
}

.knowledge-node:hover .knowledge-node-core,
.knowledge-node:focus-visible .knowledge-node-core,
.knowledge-node.is-active .knowledge-node-core {
  transform: translate(-50%, -50%) scale(1.22);
  box-shadow:
    0 0 6px rgb(var(--knowledge-star) / .54),
    0 0 18px rgb(var(--knowledge-star) / .22);
}

.knowledge-node:hover .knowledge-node-label,
.knowledge-node:focus-visible .knowledge-node-label,
.knowledge-node.is-active .knowledge-node-label,
.knowledge-node.is-related .knowledge-node-label {
  color: var(--knowledge-text);
  opacity: 1;
}

.knowledge-node.is-related .knowledge-node-core {
  box-shadow:
    0 0 4px rgb(var(--knowledge-star) / .40),
    0 0 12px rgb(var(--knowledge-star) / .14);
}

.knowledge-node.is-same-galaxy {
  opacity: 0.82;
}

.knowledge-node.is-soft-dim {
  opacity: 0.50;
}

.knowledge-caption {
  position: absolute;
  right: max(28px, calc((100vw - 1180px) / 2));
  bottom: 24px;
  z-index: 6;
  margin: 0;
  color: var(--knowledge-muted);
  font-size: 0.64rem;
  letter-spacing: 0.055em;
}

.knowledge-caption a {
  border-bottom: 1px solid color-mix(in srgb, currentColor 34%, transparent);
}

@media (max-width: 820px) {
  .knowledge-stage {
    min-height: max(700px, calc(100svh - 66px));
  }

  .knowledge-heading {
    left: 22px;
  }

  .knowledge-plane {
    width: 760px;
    height: 590px;
    min-height: 0;
  }

  .knowledge-caption {
    right: 22px;
  }
}

@media (max-width: 560px) {
  .knowledge-plane {
    left: 50%;
    top: 51%;
    width: 690px;
    height: 570px;
  }

  .knowledge-galaxy-label {
    font-size: 0.54rem;
  }

  .knowledge-node {
    width: 76px;
    margin-left: -38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .knowledge-plane,
  .knowledge-galaxy,
  .knowledge-galaxy-label,
  .knowledge-edge,
  .knowledge-node,
  .knowledge-node-core,
  .knowledge-node-label {
    transition: none !important;
  }
}