refined player.

web/score-player.css

@@ -25,6 +25,18 @@
 }
 .ls-status.ls-busy { color: #2b7; }
 .ls-status.ls-err { color: #c0392b; }
+/* multi-line parse errors: preserve the caret alignment, wrap overflow. The red
+   color needs !important to beat Gradio's `.prose * { color: ... }`, which sets
+   color directly on every descendant (so `color: inherit` from .ls-err loses). */
+.ls-status.ls-err .ls-err-pre {
+	margin: 0;
+	font-family: ui-monospace, Consolas, Monaco, monospace;
+	font-size: 11px;
+	line-height: 1.35;
+	white-space: pre-wrap;
+	word-break: break-word;
+	color: #c0392b !important;
+}
 
 .ls-svg {
 	background: #fff;
@@ -81,7 +93,7 @@
 	align-items: center;
 	gap: 10px;
 	padding: 8px 12px;
-	margin-top: 8px;
+	margin-bottom: 8px;
 	background: #f3f3f5;
 	border: 1px solid #e5e5e5;
 	border-radius: 8px;

web/score-player.js

@@ -106,8 +106,19 @@
 
 	function setStatus (text, kind) {
 		if (!els.status) return;
-		els.status.textContent = text || '';
 		els.status.className = 'ls-status' + (kind ? ' ls-' + kind : '');
+		// Errors (esp. lilylet parse errors) are multi-line with a `^` caret aligned
+		// under the offending token — wrap them in <pre> so the whitespace/newlines
+		// are preserved (a plain div collapses them). textContent keeps it XSS-safe.
+		if (kind === 'err' && text) {
+			els.status.innerHTML = '';
+			const pre = document.createElement('pre');
+			pre.className = 'ls-err-pre';
+			pre.textContent = text;
+			els.status.appendChild(pre);
+		} else {
+			els.status.textContent = text || '';
+		}
 	}
 
 	// Render lyl -> SVG. Returns true on success. Does NOT touch the MIDI player
@@ -375,7 +386,7 @@
 		svgBox.appendChild(cursor);
 		wrap.appendChild(status); wrap.appendChild(svgBox);
 
-		// transport bar
+		// transport bar (above the score)
 		const player = document.createElement('div'); player.className = 'ls-player'; player.style.display = 'none';
 		player.innerHTML =
 			'<button class="ls-btn ls-play" title="Play">▶</button>' +
@@ -384,7 +395,7 @@
 			'<span class="ls-time">0:00 / 0:00</span>' +
 			'<div class="ls-progress"><div class="ls-fill"></div></div>';
 
-		root.appendChild(wrap); root.appendChild(player);
+		root.appendChild(player); root.appendChild(wrap);
 
 		els.root = root; els.svg = svgBox; els.preview = wrap; els.status = status; els.player = player; els.cursor = cursor;
 		els.playBtn = player.querySelector('.ls-play');