feat: implement rotating gradient border using @property technique

Based on https://codetv.dev/blog/animated-css-gradient-border
- Uses @property for smooth angle interpolation
- Two backgrounds: padding-box + border-box approach
- Blurred glow layer synced with border rotation
- Works in Chrome, Safari, Edge (not Firefox)

src/main.css

@@ -596,50 +596,73 @@ kbd {
 	border-radius: var(--border-radius-sm);
 }
 
-/* Success Match Animation - Gemini-style rotating gradient border */
+/* Success Match Animation - Rotating gradient border */
-.preview-wrapper.matched {
+@property --border-angle {
-	overflow: visible;
+	syntax: "<angle>";
-	isolation: isolate;
+	initial-value: 0deg;
+	inherits: false;
 }
 
-/* Rotating gradient border with glow */
+.preview-wrapper.matched {
-.preview-wrapper.matched::after {
+	--border-angle: 0deg;
+	border: 3px solid transparent;
+	background:
+		linear-gradient(var(--panel-bg), var(--panel-bg)) padding-box,
+		conic-gradient(
+			from var(--border-angle),
+			#9b59b6,
+			#e040fb,
+			#00bcd4,
+			#7c4dff,
+			#9b59b6
+		) border-box;
+	animation: spin-border 2.5s linear forwards;
+}
+
+/* Glow effect layer */
+.preview-wrapper.matched::before {
 	content: "";
 	position: absolute;
-	inset: -3px;
+	inset: -6px;
-	border-radius: calc(var(--border-radius-md) + 3px);
+	border-radius: calc(var(--border-radius-md) + 6px);
 	background: conic-gradient(
-		from 0deg,
+		from var(--border-angle),
 		#9b59b6,
 		#e040fb,
 		#00bcd4,
 		#7c4dff,
 		#9b59b6
 	);
-	z-index: 10;
+	z-index: -1;
-	-webkit-mask:
+	filter: blur(12px);
-		linear-gradient(#fff 0 0) content-box,
-		linear-gradient(#fff 0 0);
-	-webkit-mask-composite: xor;
-	mask-composite: exclude;
-	padding: 3px;
 	opacity: 0;
-	pointer-events: none;
+	animation: spin-glow 2.5s linear forwards;
-	filter: drop-shadow(0 0 8px rgba(155, 89, 182, 0.8))
-		drop-shadow(0 0 15px rgba(124, 77, 255, 0.5));
-	animation: rotate-border 2.5s linear forwards;
 }
 
-@keyframes rotate-border {
+@keyframes spin-border {
 	0% {
-		transform: rotate(0deg);
+		--border-angle: 0deg;
-		opacity: 1;
 	}
 	80% {
-		opacity: 1;
+		--border-angle: -288deg;
 	}
 	100% {
-		transform: rotate(-360deg);
+		--border-angle: -360deg;
+		border-color: transparent;
+	}
+}
+
+@keyframes spin-glow {
+	0% {
+		--border-angle: 0deg;
+		opacity: 0.6;
+	}
+	80% {
+		--border-angle: -288deg;
+		opacity: 0.4;
+	}
+	100% {
+		--border-angle: -360deg;
 		opacity: 0;
 	}
 }