.matrix-network-context {
  box-sizing: border-box;
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 8px 0;
  color: inherit;
  font: 700 11px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .02em;
}

.matrix-network-context > span {
  max-width: min(40ch, 100%);
  overflow: hidden;
  color: currentColor;
  opacity: .68;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.matrix-network-context a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  opacity: .8;
  text-decoration: none;
  white-space: nowrap;
}

.matrix-network-context a:hover,
.matrix-network-context a:focus-visible {
  opacity: 1;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* The same supplied identity marks the return to the current website. */
.matrix-network-context a:first-of-type{padding-left:43px;min-height:38px;background:#061322 url('/brand/y-theory-compass.png') no-repeat 6px center;background-size:30px 30px;border-color:#b9925066;color:#f2cc80;opacity:1}

@media (max-width: 720px) {
  .matrix-network-context {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: thin;
  }

  .matrix-network-context > span { flex: 0 0 auto; max-width: 22ch; }
}
.matrix-formation-guide { display: block; margin: 12px 0; padding: 12px 16px; border: 1px solid #819d89; border-radius: 10px; background: #f0f5ec; color: #162f21; font: 14px/1.7 system-ui, sans-serif; text-align: left; white-space: normal; }
.matrix-formation-guide summary { cursor: pointer; font-weight: 600; }
.matrix-formation-guide a { color: #20492c !important; text-decoration: underline; }
.matrix-formation-guide p { max-width: 900px; color: #162f21 !important; }
.matrix-formation-guide ol { display: flex; flex-wrap: wrap; gap: 10px 26px; padding-left: 24px; }