Improve heading contrast

index.html

@@ -10,6 +10,7 @@
 	<body>
 		<main class="card">
 			<h1>Hello 👋</h1>
+			<div class="rule"></div>
 			<p>This is a static Space — plain HTML, CSS and JavaScript served from the Hugging Face Hub.</p>
 			<button id="greet">Say hello back</button>
 			<p id="out" class="out"></p>

style.css

@@ -24,15 +24,21 @@ body {
 
 h1 {
 	font-size: clamp(2.5rem, 9vw, 4.5rem);
-	margin: 0 0 1rem;
+	margin: 0 0 0.25rem;
+	color: #f1f5f9;
+	letter-spacing: -0.02em;
+}
+
+.rule {
+	width: 96px;
+	height: 4px;
+	margin: 0 auto 1.25rem;
+	border-radius: 999px;
 	background: linear-gradient(90deg, #7dd3fc, #a78bfa, #f472b6);
-	-webkit-background-clip: text;
-	background-clip: text;
-	color: transparent;
 }
 
 p {
-	color: #b9c2d4;
+	color: #c3cbdb;
 	font-size: 1rem;
 	line-height: 1.6;
 	margin: 0.5rem 0;