.bshc-cosmos {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	isolation: isolate;
	contain: strict;
	pointer-events: none;
}

.bshc-cosmos::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 8% 16%, rgb(239 240 238 / 74%) 0 1px, transparent 1.5px),
		radial-gradient(circle at 22% 72%, rgb(239 240 238 / 58%) 0 1px, transparent 1.5px),
		radial-gradient(circle at 42% 28%, rgb(239 240 238 / 68%) 0 1.2px, transparent 1.8px),
		radial-gradient(circle at 63% 84%, rgb(239 240 238 / 52%) 0 1px, transparent 1.5px),
		radial-gradient(circle at 78% 38%, rgb(239 240 238 / 72%) 0 1px, transparent 1.6px),
		radial-gradient(circle at 94% 66%, rgb(239 240 238 / 62%) 0 1.2px, transparent 1.8px);
	background-size: 211px 197px, 293px 271px, 347px 319px, 401px 367px, 463px 419px, 521px 487px;
	opacity: 0.48;
	transition: opacity 240ms ease;
}

.bshc-cosmos.is-ready::before {
	opacity: 0.08;
}

.bshc-cosmos__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	contain: strict;
}

[data-bshc-cosmos-background].is-comet-hover {
	cursor: pointer;
}

.bshc-cosmos-popover {
	position: absolute;
	left: 20px;
	top: 20px;
	z-index: 5;
	width: min(330px, calc(100% - 40px));
	padding: 22px 46px 22px 22px;
	border: 1px solid rgb(247 244 239 / 24%);
	border-radius: 12px;
	background: rgb(19 19 22 / 94%);
	box-shadow: 0 20px 55px rgb(0 0 0 / 36%);
	color: #f7f4ef;
	font-size: 16px;
	line-height: 1.45;
	opacity: 0;
	transform: translate3d(0, 8px, 0) scale(0.98);
	transition:
		opacity 220ms ease,
		transform 280ms var(--bshc-ease-out, ease);
}

.bshc-cosmos-popover[hidden] {
	display: none;
}

.bshc-cosmos-popover.is-open {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

.bshc-cosmos-popover p {
	margin: 0;
}

.bshc-cosmos-popover__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: rgb(247 244 239 / 72%);
	font-size: 25px;
	line-height: 1;
	cursor: pointer;
}

.bshc-cosmos-popover__close:hover,
.bshc-cosmos-popover__close:focus-visible {
	background: rgb(247 244 239 / 10%);
	color: #fff;
}

.bshc-theme .bshc-cosmos-popover__close:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 2px rgb(247 244 239 / 72%);
}

@media (prefers-reduced-motion: reduce) {
	.bshc-cosmos::before,
	.bshc-cosmos.is-ready::before {
		opacity: 0.58;
	}

	.bshc-cosmos__canvas {
		display: none;
	}

	.bshc-cosmos-popover {
		transition-duration: 0.01ms;
	}
}