body.state-blank .styleCrawlerOuterBox {
	padding: 0; margin: 0;
}
.styleCrawlerOuterBox {
	opacity: 0; max-height: 0;
	transform: translateX(-20px);
	/* should do some tweeking for the below */
	transition:
	opacity var(--baseAnimationLength),
	max-height var(--baseAnimationLength) cubic-bezier(1,0,0,1),
	padding var(--baseAnimationLength),
	margin var(--baseAnimationLength),
	transform var(--baseAnimationLength);
	overflow: hidden;
}
body:not(.state-blank) .styleCrawlerOuterBox {
	opacity: 1; max-height: 50vh;
	transform: translateX(0px);
}

/* BEGIN GRID LAYOUT */

.styleCrawlerOuterBox { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.styleCrawlerOuterBox:has(*[data-timeout="false"]) { column-gap: var(--boxHPad); }
.styleCrawlerOuterBox > *:first-child { grid-column-start: 1; grid-column-end: 3; }

/* END GRID LAYOUT */