.appGrid .timeline .keyframes .frame .keyframeWrapper {
	--keyframe-color: var(--gruble);
	color: var(--keyframe-color);
	line-height: 0;
	width: 24px;
	height: 24px;

	background-color: rgba(255, 0, 255, var(--debug-hitbox-opacity));
	pointer-events: initial;
}

.appGrid .timeline .keyframes .frame.current .keyframeWrapper { color: var(--piss); }
.appGrid .timeline .keyframes .frame.current .keyframeWrapper .loop .connector { background-color: var(--piss); }

.appGrid .timeline .keyframes .frame .keyframeWrapper,
.appGrid .timeline .keyframes .frame .keyframeWrapper .loop .connector {
	transition-property: color, background-color;
	transition-duration: .2s;
}

.timeline .keyframes .frame .keyframeWrapper { cursor: grab; }
.timeline .keyframes .frame .keyframeWrapper:active { cursor: grabbing; }

.loop .connector {
	height: 16px;
	background-color: var(--keyframe-color);
	opacity: .25;
	inset: 4px 13px;
	position: absolute;
}

.loop {
	position: absolute;
	width: calc((var(--frame) - var(--begin)) * var(--zoom) * 1px + 24px);
	height: 24px;
	right: 0;
}

.loop .start,
.loop .end {
	z-index: 1;
}

.keyframe {
	line-height: 0;
	fill: currentColor;
}

.keyframe .background,
.keyframe .outline {
	opacity: 1;
	transition-property: opacity;
	transition-duration: 200ms;
}

.keyframe.ghost .background { opacity: .2; }
.keyframe.ghost .outline { opacity: .7; }

#ghost {
	background-color: rgba(255, 128, 0, var(--debug-hitbox-opacity));
	--negative-offset-weight: calc(1 - var(--offset-weight));
	--offset-x: calc(0.5 * var(--zoom) * var(--negative-offset-weight) * 1px - 12px * var(--negative-offset-weight) + -16px * var(--offset-weight));
	transform: translateX(var(--offset-x)) translateY(-16px);

	top: calc(var(--y) * 1px);
	left: calc(var(--zoom) * var(--frame) * 1px);

	pointer-events: none;
	line-height: 0;
	color: var(--gruble);
	transition-property: opacity;
	transition-duration: 150ms;
	opacity: 0;
}
#ghost.loop.placed {
	--offset-x: -16px;
}
.timeline:hover #ghost {
	opacity: 1;
}

#ghost .keyframeWrapper .loop.ghost {
	width: calc((var(--frame-end) - var(--frame)) * var(--zoom) * 1px + 24px);

	transition-property: transform;
	transition-duration: 100ms;
	transform: translateX(100%);
}
#ghost.placed .keyframeWrapper .loop.ghost {
	transform: translateX(100%) translateX(10px);
}

.keyframeWrapper .loop.ghost .connector {
	height: 14px;
	margin: 0 5px;
	border-top: 1px dashed var(--gruble);
	border-bottom: 1px dashed var(--gruble);
	opacity: .7;
}