diff --git a/web/src/app.css b/web/src/app.css
index f5c89d689..f7bd0b2e0 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -281,6 +281,48 @@
 	}
 }
 
+/* debug only. */
+@utility debug-border {
+	--debug-hue: 0;
+	--debug-depth: 0;
+	--debug-width: 1px;
+	outline: var(--debug-width) solid hsl(calc(var(--debug-hue) + var(--debug-depth)) 100% 50%);
+	/* an outline is drawn outward from the outline edge, so the offset has to cancel the
+	   whole width — otherwise a thick one bleeds past the box it is marking */
+	outline-offset: calc(-1 * var(--debug-width));
+
+	&:nth-child(6n + 2) {
+		--debug-hue: 60;
+	}
+	&:nth-child(6n + 3) {
+		--debug-hue: 120;
+	}
+	&:nth-child(6n + 4) {
+		--debug-hue: 180;
+	}
+	&:nth-child(6n + 5) {
+		--debug-hue: 240;
+	}
+	&:nth-child(6n) {
+		--debug-hue: 300;
+	}
+}
+
+@layer utilities {
+	.debug-border .debug-border {
+		--debug-depth: 25;
+		--debug-width: 2px;
+	}
+	.debug-border .debug-border .debug-border {
+		--debug-depth: 50;
+		--debug-width: 3px;
+	}
+	.debug-border .debug-border .debug-border .debug-border {
+		--debug-depth: 75;
+		--debug-width: 4px;
+	}
+}
+
 @layer base {
 	@font-face {
 		font-family: "InterVariable";