multiplication-hash {
	display: grid;
	grid-template-columns: auto 1fr 1fr;
	grid-template-areas:
		"icon . . restart"
		"icon . . restart";
	column-gap: 1em;
	width: fit-content;
	margin-block: 2em;
	padding: 1ch;
	background-color: var(--soft);
	border: 2px solid var(--edge);
	border-radius: 999px;
	box-shadow: var(--shadow);
}

.pow-num {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 1ch;
}

.pow-icon {
	grid-area: icon;
	display: grid;
	place-content: center;
	aspect-ratio: 1;
	font-size: 2rem;
	color: var(--mute);
	background-color: var(--gray-03);
	border-radius: 999px;
}

.pow-num_label {
	color: var(--mute);
}

.pow-num_value {
	white-space: pre;
	text-align: end;
}

.pow-restart {
	grid-area: restart;
	display: grid;
	place-content: center;
	aspect-ratio: 1;
	font-size: 2rem;
	color: var(--mute);
	background-color: var(--gray-03);
	border: 1px solid var(--edge);
	border-radius: 999px;

	&:hover,
	&:focus {
		color: var(--text);
		background-color: var(--back);
		border-color: var(--text);
	}
}

.pow-success,
.pow-failure {
	.pow-answer,
	.pow-target {
		font-weight: 700;
	}

	.pow-restart {
		border-color: var(--text);
	}
}

.pow-success {
	--soft: var(--green-02);
	--mute: var(--sage-11);
	--text: var(--green-12);

	border-color: var(--green-09);

	.pow-answer,
	.pow-target {
		color: var(--green-11);
	}

	.pow-icon {
		color: var(--green-02);
		background-color: var(--green-09);
	}
}

.pow-failure {
	--soft: var(--red-02);
	--mute: var(--mauve-11);
	--text: var(--red-12);

	border-color: var(--red-09);

	.pow-answer,
	.pow-product {
		color: var(--red-11);
	}

	.pow-icon {
		color: var(--red-02);
		background-color: var(--red-09);
	}
}

.flex {
	display: flex;
	align-items: center;
	gap: 1ch;
	padding: 1em;
	background-color: var(--soft);
	border: 1px solid var(--edge);
}
.flex-1 {
	flex: 1 1 0%;
	margin: 0;
}

.animate-spin {
	animation: spin 1s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}