:root {
	--bloom-line-1: var(--color-palette-dark-blue-line);
	--bloom-line-2: var(--color-palette-green-line);
	--bloom-line-3: var(--color-palette-red-line);
	--bloom-line-4: var(--color-palette-pink-line);
	--bloom-line-5: var(--color-palette-orange-line);
	--bloom-line-1-text: var(--color-text-data-dark-blue);
	--bloom-line-2-text: var(--color-text-data-green);
	--bloom-line-3-text: var(--color-text-data-red);
	--bloom-line-4-text: var(--color-text-data-pink);
	--bloom-line-5-text: var(--color-text-data-orange);
	--bloom-sha1-text: var(--color-text-data-yellow);
	--bloom-sha1-ring: var(--color-palette-yellow-line);
	--bloom-sha256-text: var(--color-text-data-pink);
	--bloom-sha256-ring: var(--color-palette-pink-line);
	--bloom-sha512-text: var(--color-text-data-grey);
	--bloom-sha512-ring: var(--color-palette-grey-line);
	/* Keep labels readable on the unchanged orange bit fill. */
	--bloom-bit-fill-text: oklch(0.375 0.07 76.7682);
}


/* Outer sizing belongs here, not in BloomFiltersHero's late-loading shadow styles. */
s-bloom-filters-hero {
	--bloom-hero-art-height: calc(var(--post-hero-height) * 0.85);
	display: block;
	position: relative;
	box-sizing: border-box;
	height: 100%;
}

.content table,
.content s-bloom-filter,
.content s-counting-bloom-filter,
.content s-bloom-false-positive-graph,
.content s-bloom-bits-set-graph,
.content s-bloom-optimal-bits-graph,
.content s-bloom-optimal-hashes-graph { margin-block: var(--space-2); }
s-hash-values { display: block; min-width: 0; container-type: inline-size; }
s-hash-values tfoot > tr > td { padding: var(--space-2); }
s-hash-values .hash-controls { display: flex; gap: var(--space-2); align-items: center; }
s-hash-values .hash-controls s-input { flex: 1; }
s-hash-values th, s-hash-values td { text-align: center; }
s-hash-values table tbody td { padding: var(--space-2) var(--space-1); font-size: clamp(var(--font-size-xsmall), 3.6cqw, var(--type-ui-size)); }
s-hash-values table thead th { padding: var(--space-3) var(--space-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
s-hash-values .sha1 { color: var(--bloom-sha1-text); }
s-hash-values .sha256 { color: var(--bloom-sha256-text); }
s-hash-values .sha512 { color: var(--bloom-sha512-text); }
s-hash-values table tbody .hash-name { font-weight: var(--font-weight-bold); font-size: var(--type-body-size); }
.aside { padding: var(--space-4); background: var(--color-surface-subtle); text-align: center; }