ul.tree {
	font: bold 160%/1 var(--font-mono);
	--dx: 5rem;
}

ul.tree, ul.tree ul {
	margin: 0;
	padding: 0;
}

	ul.tree > li {
		margin: 0;
	}

	ul.tree li {
		position: relative;
		display: flex;
		align-items: center;
		margin: .3em 0;
		font-size: 75%;
	}

		ul.tree li li {
			margin-left: var(--dx);
		}

	ul.tree .node {
		padding: .3em .5em .15em;
		background: var(--color, var(--color-green));
		border-radius: .2em;
		text-shadow: 0 0 3px rgba(0,0,0,.4);
		text-decoration: none;
		white-space: nowrap;
	}

		ul.tree .node[href]:hover {
			text-decoration: underline;
			text-decoration-color: initial;
		}

		ul.tree li  li .node::before {
			content: "";
			position: absolute;
			top: 50%;
			right: 100%;
			width: var(--dx);
			height: .15em;
			transform: translateY(-50%) skewY(calc(var(--angle, 0) * 1deg)) scaleY(calc(1 / var(--cos-angle, 1)));
			transform-origin: right;
			margin: 0;
			border-radius: 0;
			background: inherit;
			background-image: linear-gradient(to right, var(--parent-color), transparent);
		}

		ul.tree > li li .node { /* 2+ level */
			--color: var(--color-magenta);
			--parent-color: var(--color-green);
		}

		ul.tree > li li li .node { /* 3+ level */
			--color: var(--color-aqua);
			--parent-color: var(--color-magenta);
		}

		ul.tree > li li li li .node { /* 4+ level */
			--color: var(--color-orange);
			--parent-color: var(--color-aqua);
		}

		ul.tree > li li li li li .node { /* 5+ level */
			--parent-color: var(--color-orange);
		}