.controls {
	display: grid;
	gap: .75em;
}

.controls label {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: .25em .5em;
	align-items: center;
}

.controls label span,
.controls output {
	font-size: 12px;
}

.controls input {
	grid-column: 1 / -1;
	width: 100%;
}

.legend {
	display: grid;
	gap: .5em;
}

.legend span {
	display: flex;
	align-items: center;
	gap: .5em;
	font-size: 11px;
}

.legend i,
.follower {
	display: block;
	width: 18px;
	height: 18px;
	border: 2px solid var(--c-white);
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgb(0 0 0 / 12%);
}

.legend .solid {
	background: var(--c-black);
}

.legend .ring {
	background: transparent;
	border-color: var(--c-black);
}

[data-fps="30"] {
	background: var(--c-black);
}

[data-fps="60"] {
	background: var(--c-blue);
}

[data-fps="120"] {
	background: var(--c-green);
}

.stage {
	padding: 0;
}

.field {
	position: relative;
	height: clamp(280px, 50vh, 520px);
	overflow: hidden;
	cursor: crosshair;
	touch-action: none;
	background: var(--c-white);
}

.follower {
	position: absolute;
	top: -9px;
	left: -9px;
	will-change: transform;
}

.follower[data-method="damp"] {
	z-index: 2;
	width: 26px;
	height: 26px;
	top: -13px;
	left: -13px;
	background: transparent;
	border-color: currentColor;
}

.follower[data-method="damp"][data-fps="30"] {
	color: var(--c-black);
}

.follower[data-method="damp"][data-fps="60"] {
	color: var(--c-blue);
}

.follower[data-method="damp"][data-fps="120"] {
	color: var(--c-green);
}

@media (max-width: 720px) {
	.field {
		height: 280px;
	}
}