refined control panel

app.py

@@ -448,10 +448,13 @@ def build_ui ():
 								allow_custom_value=True)
 					prompt = gr.Textbox(label='Metadata prompt', lines=3, value='',
 						placeholder='extra metadata lines, e.g.\n[key "C major"]\n(optional)')
-					measures = gr.Number(label='Measures (0 = let model decide)', value=0, precision=0)
+					gr.Markdown('- Length')
 					with gr.Row():
-						temperature = gr.Slider(0.0, 2.0, value=1.0, step=0.05, label='temperature')
+						measures = gr.Number(label='Measures (0 = let model decide)', value=0, precision=0)
 						max_patches = gr.Number(label='max patches', value=1024, precision=0)
+					gr.Markdown('- Sampler')
+					with gr.Row():
+						temperature = gr.Slider(0.0, 2.0, value=1.0, step=0.05, label='temperature')
 						seed = gr.Slider(0, 2147483647, value=42, step=1, label='seed')
 					with gr.Row():
 						gen_btn = gr.Button('Generate', variant='primary', elem_id='gen-btn')

web/score-player.css

@@ -1,5 +1,16 @@
 /* LilyScript score player — preview + transport. Light theme to match Gradio Soft. */
 
+/* Gradio's `.gradio-container .prose * { color: var(--body-text-color) }` sets a
+   color DIRECTLY on every descendant of our mount, overriding anything we set by
+   inheritance and out-specifying a plain class. We mount under id #ls-score, so
+   prefixing our color rules with that id (specificity beats two classes) lets them
+   win WITHOUT !important. This base rule pins the default text color for the whole
+   subtree; the specific rules below override per element. (The SVG ink color is a
+   separate concern — see the `.ls-svg svg` block.) */
+#ls-score, #ls-score :where(.ls-status, .ls-btn, .ls-time, .ls-err-pre, span, div, button) {
+	color: #333;
+}
+
 .ls-score-root {
 	display: flex;
 	flex-direction: column;
@@ -17,25 +28,23 @@
 	position: relative;
 }
 
-.ls-status {
+#ls-score .ls-status {
 	font-size: 12px;
 	color: #888;
 	min-height: 16px;
 	margin-bottom: 4px;
 }
-.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 {
+#ls-score .ls-status.ls-busy { color: #2b7; }
+#ls-score .ls-status.ls-err { color: #c0392b; }
+/* multi-line parse errors: preserve the caret alignment, wrap overflow. */
+#ls-score .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;
+	color: #c0392b;
 }
 
 .ls-svg {
@@ -99,7 +108,7 @@
 	border-radius: 8px;
 }
 
-.ls-btn {
+#ls-score .ls-btn {
 	border: 1px solid #d0d0d6;
 	background: #fff;
 	color: #333;
@@ -113,10 +122,10 @@
 	align-items: center;
 	justify-content: center;
 }
-.ls-btn:hover:not(:disabled) { border-color: #8aa; background: #f0f6ff; }
-.ls-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+#ls-score .ls-btn:hover:not(:disabled) { border-color: #8aa; background: #f0f6ff; }
+#ls-score .ls-btn:disabled { opacity: 0.4; cursor: not-allowed; }
 
-.ls-time {
+#ls-score .ls-time {
 	font-family: ui-monospace, Consolas, monospace;
 	font-size: 12px;
 	color: #555;