:root {
	--k5-heartbeat-shadow: 0 2px 10px rgba(0, 0, 0, 1);
}

html[data-bs-theme="light"] {
	--k5-heartbeat-shadow: 0 2px 10px rgb(255, 255, 255);
}

.k5-hb {
	position: relative;
	width: 100%;
	overflow: hidden;

	--k5-hb-font-size: 44px;
	--k5-hb-value-x: 0px;
	--k5-hb-value-y: 0px;

	--k5-grid-small: 18px;
	--k5-grid-large: 90px;
	--k5-grid-a1: 0.10;
	--k5-grid-a2: 0.18;

	--k5-scanline-a: 0.08;
}

/* Grid */
.k5-hb::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.6;
}

/* Scanlines + vignette */
.k5-hb::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	mix-blend-mode: overlay;
	opacity: 0.35;
}

.k5-hb svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 3;
}

/* Value overlay */
.k5-hb .k5-hb-value {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) translate(var(--k5-hb-value-x), var(--k5-hb-value-y));
	z-index: 5;
	pointer-events: none;
	user-select: none;

	font-weight: 900;
	letter-spacing: 0.5px;
	font-size: var(--k5-hb-font-size);
	line-height: 1;
	color: rgba(255, 255, 255, 0.92);
	text-shadow: var(--k5-heartbeat-shadow);
}

/* Stroke defaults */
.k5-hb .hb-glow {
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.45;
}

.k5-hb .hb-core {
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.95;
}

.k5-hb .hb-cursor {
	opacity: 0.70;
}