:root {
	--memory-available: var(--color-palette-orange-surface-strong);
	--memory-allocated: var(--color-data-fill-orange);
	--memory-usable-border: var(--color-palette-orange-line);
	--memory-free-list-default: var(--color-data-neutral);
	--memory-metadata-size: var(--color-data-fill-blue);
	--memory-metadata-free: var(--color-data-fill-green);
	--memory-text-size: var(--color-text-data-blue);
	--memory-text-free: var(--color-text-data-green);
	--memory-text-allocated: var(--color-text-data-orange);
	--memory-text-available: var(--color-text-secondary);
	--memory-text-reserved: var(--memory-text-allocated);
	--memory-text-cursor: var(--color-text-secondary);
	--memory-text-free-list: var(--color-text-secondary);
	--memory-text-segregated-free-list: var(--gray-700);
	--memory-text-usable: var(--color-text-data-orange);
	--color-memory-thread-1: var(--color-data-fill-orange);
	--color-memory-thread-2: var(--color-data-fill-pink);
	--color-memory-thread-3: var(--color-data-fill-blue);
	--color-memory-thread-4: var(--color-data-fill-dark-blue);
	--color-memory-thread-5: var(--color-data-fill-red);
	--color-memory-annotation: var(--color-data-neutral);
}

:root[data-theme="dark"] {
	--memory-text-segregated-free-list: var(--gray-300);
}

/* Reserve the reveal below the band so takeover doesn't move the article. */
.post-hero-band:has(s-memory-hero) {
	--memory-hero-instructions-height: 44px;
	--memory-hero-instructions-gap: 0.75rem;
	--memory-hero-reveal-height: calc(var(--memory-hero-instructions-height) + var(--memory-hero-instructions-gap) + var(--memory-hero-instructions-gap));
	position: relative;
	margin-block-end: var(--memory-hero-reveal-height);
	background: none;
	border-bottom: 0;
}
.post-hero-band:has(s-memory-hero)::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 100%;
	box-sizing: border-box;
	background: var(--color-surface-band);
	border-bottom: var(--border-width-thick) solid var(--color-border-chart);
	transition: height var(--motion-duration-move) ease-out;
}
.post-hero-band:has(s-memory-hero[playing])::before {
	height: calc(100% + var(--memory-hero-reveal-height));
}
.post-hero-inner:has(s-memory-hero) {
	position: relative;
}

s-memory-hero {
	--memory-hero-cell-gap: clamp(2px, 0.5vw, 4px);
	position: relative;
	display: flex;
	flex-direction: column;
	container-type: inline-size;
	height: 100%;
	padding-block: var(--space-4);
}

@media (prefers-reduced-motion: reduce) {
	.post-hero-band:has(s-memory-hero)::before {
		transition: none;
	}
}

s-memory {
	display: block;
	margin: var(--space-4) 0 var(--space-5);
}

s-hexadecimal {
	display: block;
	margin: var(--space-4) 0 var(--space-5);
}