form {
  --circular-range-w: 320px;
  font-family: 'JetBrains Mono', monospace;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat( auto-fit, minmax(320px, 1fr) );
  margin-inline: auto;
  max-width: 1024px;
}

label {
	display: grid;
  font-weight: 700;
	place-content: center;
	width: 100%;
}

.bottom-arc {
	--circular-range-output-as: start;
	--circular-range-output-gr: 4;
	clip-path: inset(40% 0 0 0);
	margin-top: -140px;
}

.top-arc {
	clip-path: inset(0 0 40% 0);
	margin-bottom: -120px;
}

.full-circle,
.left-arc {
	--circular-range-output-as: center;
	--circular-range-output-gr: 3;
}

#total-output {
  justify-items: center;
  font-family: 'JetBrains Mono', monospace;
  display: flex;
  font-size: 6rem;
  width: 100%;
}

#total-div {
  background: #7730b1;
  border: 4px solid #fff;
  display: grid;
  place-content: center;
}