dtx-bubble-chart {
	background:
		radial-gradient(circle at center, transparent 5%, var(--background) 60%),
		/* radial-gradient(circle at center, transparent 50%, var(--background-light) calc(50% + 1px), transparent calc(50% + 2px)) 0 0 / 100% 100%, */
		linear-gradient(to right, transparent 49%, var(--background-transparent) 49%, var(--background-transparent) 51%, transparent 51%) 0 0 / 33px 33px,
		linear-gradient(to bottom, transparent 49%, var(--background-transparent) 49%, var(--background-transparent) 51%, transparent 51%) 0 0 / 33px 33px;

	circle {
		border-radius: 50%;
		outline: 2px dashed transparent;
		transition: outline-color .3s, fill-opacity .3s;
	}
	circle:hover { outline-color: var(--background-light); }
	circle.active { fill-opacity: 1; }

	circle.loading {
		outline: 2px dashed var(--accent);
		animation: circle-loading 15s linear infinite;
	}

	text { pointer-events: none; }

	.breadcrumbs {
		position: fixed;
		inset: 50% auto auto 64px;
		display: flex;
		flex-direction: column;
		gap: 24px;
		transform: translateY(-50%);

		.crumb {
			position: relative;
			width: fit-content;
			padding: 12px 20px 12px 12px;
			background: var(--background-transparent);
			border-radius: 50px;
			overflow: visible;
			cursor: pointer;

			&::before {
				content: '';
				width: 12px;
				height: 12px;
				border-radius: 50%;
				background: var(--background-light);
			}

			&:not(:last-child)::after {
				content: '';
				position: absolute;
				inset: 20px auto auto 17px;
				width: 2px;
				height: 60px;
				border-radius: 50%;
				background: var(--background-light);
			}
		}
	}

	.details {
		position: fixed;
		inset: 50% 12px auto auto;
		width: 24%;
		padding: 16px;
		border-radius: 16px 4px;
		border: none;
		translate: 0 -50% !important;
		background: var(--border);
		transition: display .3s allow-discrete, opacity .3s;

		&:empty {
			display: none;
			opacity: 0;
		}

		@starting-style { opacity: 0; }

		connector-target {
			display: block;
			width: 12px;
			height: 12px;
			margin-bottom: 8px;
			border-radius: 12px;
			background: var(--background);
			z-index: -1;
		}
	}

	connector {
		position: fixed;
		inset: var(--inset);
		width: var(--width);
		border: 1px solid var(--background);
		rotate: var(--angle);
		transform-origin: left;
		z-index: -1;
	}
}

@keyframes circle-loading {
	to { rotate: 360deg; }
}

body:is(.mono, .mint, .claude) dtx-bubble-chart {
	background:
		radial-gradient(circle at center, transparent 5%, var(--background) 60%),
		linear-gradient(to right, transparent 49%, var(--border) 49%, var(--border) 51%, transparent 51%) 0 0 / 33px 33px,
		linear-gradient(to bottom, transparent 49%, var(--border) 49%, var(--border) 51%, transparent 51%) 0 0 / 33px 33px;

	circle:hover { outline-color: var(--accent); }

	.crumb {
		background: var(--accent-light);
		&::before { background: var(--accent); }
		&:not(:last-child)::after { background: var(--accent); }
	}
}