refined score player styles.

web/score-player.css

@@ -28,6 +28,12 @@
 
 .ls-svg {
 	background: #fff;
+	/* Verovio draws staff lines / notes with stroke|fill="currentColor", which
+	   inherits the CSS `color`. Gradio's dark theme sets a light body color (with
+	   enough specificity to beat a plain class rule), so the score would render as
+	   pale lines on the white box. Force a dark ink color with !important so it
+	   holds regardless of the active Gradio theme. */
+	color: #1a1a1a !important;
 	display: inline-block;
 	min-width: 100%;
 }
@@ -35,6 +41,12 @@
 	max-width: 100%;
 	height: auto;
 }
+/* Belt-and-suspenders: pin currentColor on the actual drawing elements too. */
+.ls-svg svg .staff path,
+.ls-svg svg .barLine path,
+.ls-svg svg .ledgerLines path {
+	stroke: #1a1a1a;
+}
 
 /* playing-note highlight on the SVG */
 .ls-hl {

web/score-player.js

@@ -119,7 +119,7 @@
 		try {
 			const { mei, measureCount, staffCount } = lylToMei(code);
 			const pageHeight = Math.max(2000, Math.ceil(measureCount / 20) * 2000) * 2 * staffCount;
-			tk.setOptions({ scale: 40, adjustPageHeight: true, pageWidth: 2100, pageHeight });
+			tk.setOptions({ scale: 40, adjustPageHeight: true, pageWidth: 2100, pageHeight: pageHeight });
 			if (!tk.loadData(mei)) { setStatus('Verovio load failed', 'err'); return false; }
 			injectSvg(tk.renderToSVG(1));
 			state.lastCode = code;
@@ -336,7 +336,7 @@
 
 		root.appendChild(wrap); root.appendChild(player);
 
-		els.root = root; els.svg = svgBox; els.status = status; els.player = player;
+		els.root = root; els.svg = svgBox; els.preview = wrap; els.status = status; els.player = player;
 		els.playBtn = player.querySelector('.ls-play');
 		els.pauseBtn = player.querySelector('.ls-pause');
 		els.stopBtn = player.querySelector('.ls-stop');