styling changes (radio for N)

app/web/static/dataset-picker.js

@@ -236,18 +236,18 @@ async function main() {
     continueBtn.title = selectedId ? '' : 'pick a dataset first';
   }
 
-  const slider = document.getElementById('n-slider');
+  const nInputs = document.querySelectorAll('input[name="n"]');
-  const nValue = document.getElementById('n-value');
   function applyN(n) {
-    nValue.textContent = n.toLocaleString();
     hidden.numPoints.value = String(n);
     for (const s of scenes) {
       const cap = s.geometry.attributes.position.count;
       s.geometry.setDrawRange(0, Math.min(n, cap));
     }
   }
-  slider.addEventListener('input', (e) => applyN(parseInt(e.target.value, 10)));
+  nInputs.forEach(input => {
-  applyN(parseInt(slider.value, 10));
+    input.addEventListener('change', (e) => applyN(parseInt(e.target.value, 10)));
+  });
+  applyN(parseInt(document.querySelector('input[name="n"]:checked').value, 10));
 
   let jitterScale = 0;
   const jInputs = document.querySelectorAll('input[name="j"]');

app/web/static/style.css

@@ -625,40 +625,41 @@ button.submit:disabled { background: var(--faint); border-color: var(--faint); c
   text-transform: uppercase;
   color: var(--mute);
 }
-.picker-controls .ctl-value {
-  font-family: var(--mono);
-  font-size: 0.82rem;
-  color: var(--accent);
-  min-width: 3.5rem;
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-.picker-controls input[type="range"] {
-  width: 100%;
-  accent-color: var(--accent);
-  height: 4px;
-}
 .picker-controls .segmented {
   grid-column: 2 / -1;
-  display: flex;
+  /* Shared 5-column track across every segmented row. 3-option rows drop
-  justify-content: space-between;
+     their options into columns 1/3/5 so first/middle/last align with the
+     5-option row's first/middle/last. */
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
   align-items: center;
 }
+.picker-controls .segmented.count-3 > label:nth-child(1) { grid-column: 1; }
+.picker-controls .segmented.count-3 > label:nth-child(2) { grid-column: 3; }
+.picker-controls .segmented.count-3 > label:nth-child(3) { grid-column: 5; }
 .picker-controls .segmented label {
   font-family: var(--mono);
   font-size: 0.78rem;
   color: var(--mute);
   cursor: pointer;
   padding: 3px 2px 4px;
-  border-bottom: 1px solid transparent;
+  transition: color 120ms ease;
-  transition: color 120ms ease, border-color 120ms ease;
   user-select: none;
   font-variant-numeric: tabular-nums;
   position: relative;
+  text-align: center;
+}
+.picker-controls .segmented label > span {
+  display: inline-block;
+  padding: 0 2px 1px;
+  border-bottom: 1px solid transparent;
+  transition: border-color 120ms ease;
 }
 .picker-controls .segmented label:hover { color: var(--ink); }
 .picker-controls .segmented label:has(input:checked) {
   color: var(--accent);
+}
+.picker-controls .segmented label:has(input:checked) > span {
   border-bottom-color: var(--accent);
 }
 .picker-controls .segmented label:has(input:focus-visible) {

app/web/templates/index.html

@@ -49,19 +49,24 @@
     </p>
 
     <div class="picker-controls">
-      <label class="ctl-label" for="n-slider">n samples</label>
+      <span class="ctl-label">n samples</span>
-      <input type="range" id="n-slider" min="100" max="5000" step="100" value="500">
+      <div class="segmented count-5" role="radiogroup" aria-label="number of samples">
-      <span class="ctl-value" id="n-value">500</span>
+        <label><input type="radio" name="n" value="100"><span>100</span></label>
+        <label><input type="radio" name="n" value="500" checked><span>500</span></label>
+        <label><input type="radio" name="n" value="1000"><span>1,000</span></label>
+        <label><input type="radio" name="n" value="2500"><span>2,500</span></label>
+        <label><input type="radio" name="n" value="5000"><span>5,000</span></label>
+      </div>
 
       <span class="ctl-label">noise σ</span>
-      <div class="segmented" role="radiogroup" aria-label="noise σ">
+      <div class="segmented count-3" role="radiogroup" aria-label="noise σ">
         <label><input type="radio" name="j" value="0.001"><span>0.001</span></label>
         <label><input type="radio" name="j" value="0.005" checked><span>0.005</span></label>
         <label><input type="radio" name="j" value="0.01"><span>0.010</span></label>
       </div>
 
       <span class="ctl-label">timesteps</span>
-      <div class="segmented" role="radiogroup" aria-label="number of timesteps">
+      <div class="segmented count-3" role="radiogroup" aria-label="number of timesteps">
         <label><input type="radio" name="f" value="12"><span>12</span></label>
         <label><input type="radio" name="f" value="24" checked><span>24</span></label>
         <label><input type="radio" name="f" value="48"><span>48</span></label>