html.allocator-playground-page {
	--color-browser-chrome: var(--color-surface-toolbar);
	--color-log-info: var(--color-text-data-blue);
	--color-log-warning: var(--color-text-data-orange);
	--color-log-error: var(--color-text-data-red);
	--focus-ring-color-workspace-select: var(--palette-blue);
	--color-action-inspect: var(--purple-500);
}

html.allocator-playground-page,
html.allocator-playground-page body {
	width: 100%;
	height: 100dvh;
	min-height: 0;
	overflow: hidden;
}

html.allocator-playground-page body {
	margin: 0;
	overflow: hidden;
}

.field s-select::part(select):focus-visible {
	outline: var(--focus-ring-width-strong) solid var(--focus-ring-color-workspace-select);
	outline-offset: calc(-1 * var(--focus-ring-offset-wide));
}

.workspace {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	background: var(--color-surface-workspace);
	color: var(--color-text-primary);
	font-family: var(--font-family-body);
	width: 100%;
	height: 100dvh;
	min-width: 0;
	min-height: 0;
}

#editor-panel,
#right-container {
	min-width: 0;
	min-height: 0;
	overflow: hidden;
}

#split-direction,
#share {
	flex: none;
}

#split-direction::part(option) {
	min-width: var(--control-min-height);
	padding-inline: var(--space-2);
}

.toolbar-icon {
	display: inline-flex;
	align-items: center;
}

.toolbar-icon svg {
	display: block;
	width: var(--control-icon-size);
	height: var(--control-icon-size);
	fill: currentColor;
}

#share {
	--button-min-width: var(--control-min-height);
	white-space: nowrap;
}

#share .copy-check,
#share[data-copied] .copy-link {
	display: none;
}

#share[data-copied] .copy-check {
	display: inline-flex;
}

#editor-panel {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
}

#shared-code-notice {
	min-width: 0;
	overflow-wrap: anywhere;
	padding: var(--space-2) var(--space-4);
	background: var(--color-status-warning-background);
	color: var(--color-status-warning-foreground);
	font-size: var(--font-size-small);
}

#shared-code-notice[hidden] {
	display: none;
}

#run-shared-code {
	display: inline-flex;
	max-width: 100%;
	height: var(--control-min-height);
}

#shared-code-notice p {
	margin: 0 0 var(--space-2);
}

#editor-container {
	grid-row: 2;
}

#right-container {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	background: var(--color-surface-workspace);
}

#editor-container,
#editor {
	width: 100%;
	height: 100%;
	min-height: 0;
}

.playground-toolbar {
	/* Keep the hidden legend's containing block inside the clipped panel. */
	position: relative;
	margin: 0;
	min-inline-size: 0;
	border: 0;
	display: grid;
	grid-template-areas:
		"allocator workload"
		"scores views";
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: end;
	box-sizing: border-box;
	padding: var(--space-2) max(var(--space-2), var(--safe-area-right)) var(--space-2) var(--space-2);
	border-bottom: var(--border-width-thin) solid var(--color-border-workspace);
	gap: var(--space-2);
	background: var(--color-surface-toolbar);
}

.allocator-field {
	grid-area: allocator;
}

.workload-field {
	grid-area: workload;
}

.field {
	--control-label-gap: var(--space-1);
	display: grid;
	min-width: 0;
	gap: var(--space-1);
}

.field s-select::part(label) {
	font-size: var(--font-size-xsmall);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
}

.field s-select {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--control-min-height-large);
	min-width: 0;
}

.field s-select::part(select) {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-semibold);
	text-align: left;
}

#scores {
	grid-area: scores;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	gap: var(--control-gap);
}

#scores > div {
	box-sizing: border-box;
	min-width: 0;
	min-height: var(--control-min-height-large);
	padding: var(--space-1) var(--space-2);
	border: var(--border-width-thin) solid var(--color-border-workspace);
	border-radius: var(--radius-control);
	background: var(--color-surface-workspace);
}

#scores dd {
	margin: 0;
}

.peak-measurement {
	position: relative;
}

#peak-score {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	padding: 0;
	border: var(--border-width-thin) solid transparent;
	border-radius: inherit;
	appearance: none;
	background: transparent;
	color: inherit;
}

#peak-score[aria-disabled="false"] {
	cursor: pointer;
	touch-action: manipulation;
	transform: scale(1);
	transition: border-color var(--motion-duration-state) ease, box-shadow
		var(--motion-duration-state) ease, transform var(--motion-duration-press)
		var(--motion-ease-out);
}

#peak-score[aria-disabled="false"]:active {
	transform: scale(0.98);
}

#peak-score:focus-visible {
	outline: var(--focus-ring-width) solid var(--color-action-inspect);
	outline-offset: var(--focus-ring-offset);
}

#peak-score.highlighted {
	border-color: var(--color-action-inspect);
	box-shadow: inset 0 0 0 var(--border-width-thin) var(--color-action-inspect);
}

.score-label {
	display: block;
	margin: 0;
	color: var(--color-text-ui-secondary);
	font-size: var(--font-size-xsmall);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-solid);
	text-transform: uppercase;
}

.score-value {
	display: block;
	min-width: 0;
	margin: var(--space-1) 0 0;
	overflow: hidden;
	font: var(--font-weight-bold) var(--font-size-small) / var(--line-height-solid) var(--font-family-code);
	text-overflow: ellipsis;
	white-space: nowrap;
}

#ops-per-second.loading {
	animation: speed-loading 900ms ease-in-out infinite alternate;
}

@keyframes speed-loading {
	to {
		opacity: 0.4;
	}
}

.output-body {
	position: relative;
	display: grid;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
}

#memory-container,
#logs-container {
	grid-area: 1 / 1;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
}

#memory-container[hidden],
#logs-container[hidden] {
	display: none;
}

#memory-container {
	--memory-padding: clamp(var(--space-2), 1.25vw, var(--space-4));
	--memory-padding-right: max(var(--memory-padding), var(--safe-area-right));
	--simulation-chrome-height: 6.5rem;
	container-type: size;
	display: flex;
	overflow: hidden;
	flex-direction: column;
	align-items: center;
	padding: var(--memory-padding);
	padding-top: 0;
	padding-right: var(--memory-padding-right);
	padding-bottom: max(var(--memory-padding), var(--safe-area-bottom));
}

#memory-container > .memory {
	--memory-grid-width: 100cqw;
	width: 100%;
	flex: none;
}

#logs-container {
	display: grid;
	overflow: auto;
	align-content: start;
	padding: var(--space-2) max(var(--space-4), var(--safe-area-right))
		max(var(--space-2), var(--safe-area-bottom)) var(--space-4);
	background: var(--color-surface-workspace);
	font: var(--font-size-small) / var(--line-height-normal) var(--font-family-code);
}

#logs-container:empty::before {
	padding: var(--space-4);
	color: var(--color-text-ui-muted);
	content: "Your allocator’s messages will appear here.";
	text-align: center;
}

.log-message {
	font: inherit;
}

.log-entry {
	margin: 0;
	--log-accent: var(--color-log-info);
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	align-items: start;
	padding: var(--space-2) 0;
	border-bottom: var(--border-width-thin) solid var(--color-border-workspace);
	gap: var(--space-2);
	color: var(--color-text-primary);
}

.log-entry.warn {
	--log-accent: var(--color-log-warning);
}

.log-entry.error {
	--log-accent: var(--color-log-error);
}

.log-level {
	color: var(--log-accent);
	font: var(--font-weight-bold) var(--font-size-xsmall) / var(--line-height-normal) var(--font-family-body);
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
}

.log-message {
	min-width: 0;
	overflow-wrap: anywhere;
}

.view-controls {
	grid-area: views;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--control-gap);
	isolation: isolate;
}

.view-controls::before {
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	width: calc((100% - var(--control-gap)) / 2);
	border-radius: var(--radius-control);
	background: var(--color-action-neutral-background);
	content: "";
	transform: translateX(0);
	transition: transform var(--motion-duration-move) var(--motion-ease-in-out);
}

.view-controls[data-view="logs"]::before {
	transform: translateX(calc(100% + var(--control-gap)));
}

.view-controls s-button {
	flex: 1;
	--button-height: var(--control-min-height-large);
	--button-min-width: var(--control-min-width);
}

@media (prefers-reduced-motion: reduce) {
	#peak-score[aria-disabled="false"],
	#peak-score[aria-disabled="false"]:active {
		transform: none;
	}

	.view-controls::before {
		transition: none;
	}
}

.memory-renderer {
	display: block;
	min-width: 0;
	margin: 0;
	--call-rail-font-size: var(--type-body-size);
	--call-rail-height: var(--control-min-height-large);
}

@media (max-width: 600px) {
	#share::part(button) {
		padding-inline: var(--space-2);
	}

	#share .share-label {
		display: none;
	}
}

@media (max-width: 480px) {
	.field s-select::part(select) {
		font-size: var(--type-ui-size);
	}

	.playground-toolbar {
		padding-right: max(var(--space-2), var(--safe-area-right));
		padding-left: max(var(--space-2), var(--safe-area-left));
	}
}

@media (prefers-reduced-motion: reduce) {
	#ops-per-second.loading {
		animation: none;
	}
}