:root{--bg:#fafaf9;--fg:#1c1917;--muted:#78716c;--border:#e7e5e4;--panel:#fff;--accent:#e11d48;--go:#15803d;--go-hover:#166534;--on-go:#fff;color:var(--fg);background:var(--bg);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font-family:ui-sans-serif,system-ui,-apple-system,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#0c0a09;--fg:#f5f5f4;--muted:#a8a29e;--border:#292524;--panel:#1c1917;--accent:#fb7185;--go:#22c55e;--go-hover:#4ade80;--on-go:#052e16}}*{box-sizing:border-box}body{background:var(--bg);margin:0}main{max-width:1200px;margin:0 auto;padding:24px 16px}.status{color:var(--muted);padding:48px}h1{margin:0 0 8px;font-size:1.6rem}.page-header p{color:var(--muted);max-width:70ch;margin:0 0 12px}.legend{gap:12px;margin:0;padding:0;font-size:.85rem;list-style:none;display:flex}.swatch{vertical-align:baseline;border-radius:2px;width:10px;height:10px;display:inline-block}.toolbar{flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0;font-size:.85rem;display:flex}.toolbar button{font:inherit;border:1px solid var(--border);background:var(--panel);color:var(--fg);cursor:pointer;border-radius:6px;padding:4px 12px}.toolbar button:hover:not(:disabled){border-color:var(--accent)}.toolbar button:disabled{opacity:.4;cursor:not-allowed}.toolbar button.start{background:var(--go);border-color:var(--go);color:var(--on-go)}.play-labels{justify-items:center;display:inline-grid}.play-labels>span{grid-area:1/1}.play-labels>span:first-child{font-weight:600}.play-labels>.hidden{visibility:hidden}.toolbar button.start:hover{background:var(--go-hover);border-color:var(--go-hover)}.toolbar-break{flex-basis:100%;height:0;margin-bottom:-8px}.readout{color:var(--muted);font-variant-numeric:tabular-nums;flex-basis:100%;order:1}.segmented{border:1px solid var(--border);border-radius:6px;display:inline-flex;overflow:hidden}.toolbar .segmented button{border:0;border-radius:0}.toolbar .segmented button+button{border-left:1px solid var(--border)}.toolbar .segmented button.on{background:var(--fg);color:var(--bg)}.rate{color:var(--muted);font-variant-numeric:tabular-nums;align-items:center;gap:6px;min-width:190px;display:inline-flex}.smooth,.spin{color:var(--muted);align-items:center;gap:4px;display:inline-flex}.stage{align-items:stretch;gap:16px;display:flex}.scatter{border:1px solid var(--border);border-radius:8px;flex:1;min-width:0;height:min(75vh,900px);position:relative;overflow:hidden}.scatter-overlay{pointer-events:none;justify-content:center;display:flex;position:absolute;top:8px;left:8px;right:8px}.scatter-overlay .legend{background:color-mix(in srgb, var(--bg) 85%, transparent);border-radius:6px;flex-wrap:wrap;justify-content:center;gap:4px 12px;padding:3px 10px}.forces{flex-direction:column;gap:8px;font-size:.8rem;display:flex}.force-ends{color:var(--muted);justify-content:space-between;font-size:.7rem;display:flex}.force-sliders{flex:1;gap:12px;display:flex}.force{flex-direction:column;align-items:center;gap:4px;display:flex}.force-label{font-weight:600}.force-value{font-variant-numeric:tabular-nums;white-space:nowrap;flex-direction:column;align-items:center;min-height:1.2em;display:flex}.force-value .force-percent{font-size:.7rem}.force-percent{color:var(--muted)}.force-track{width:28px;min-height:240px;margin-right:var(--marks-width);border:1px solid var(--border);background:var(--panel);cursor:ns-resize;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:6px;flex:1;position:relative}.force-track:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.force-deadzone{background:var(--border);position:absolute;left:0;right:0}.force-fill{opacity:.35;border-radius:3px;position:absolute;left:3px;right:3px}.force{--marks-width:46px}.force.on-fader{--marks-width:76px}.force-marks{width:var(--marks-width);pointer-events:none;color:var(--muted);font-variant-numeric:tabular-nums;font-size:.65rem;line-height:1;position:absolute;top:0;bottom:0;left:100%}.force-marks svg{position:absolute;top:0;left:0;overflow:visible}.force-marks path{fill:none;stroke:var(--muted);stroke-width:1px}.force-mark{white-space:nowrap;grid-template-columns:5ch;display:grid;position:absolute;left:12px;transform:translateY(-50%)}.force-marks.with-percent .force-mark{grid-template-columns:5ch 4ch;column-gap:.6ch}.force-mark-weight{text-align:right}.force-mark .force-percent{text-align:right;opacity:.8}.force-thumb{border-top:3px solid;height:0;position:absolute;left:-4px;right:-4px;transform:translateY(-1.5px)}.force-options{color:var(--muted);flex-direction:column;gap:2px;display:flex}.force-options label{align-items:center;gap:3px;display:flex}.force-sign{font:inherit;padding:1px 6px;font-size:.7rem}.force-sign.hidden{visibility:hidden}.force-range{color:var(--muted);flex-direction:column;gap:2px;display:flex}.force-range label{justify-content:space-between;align-items:center;gap:4px;display:flex}.force-range input{width:56px;font:inherit}.scatter canvas{cursor:grab;touch-action:none;display:block}.scatter canvas:active{cursor:grabbing}.scatter-reset{font:inherit;border:1px solid var(--border);background:var(--panel);color:var(--fg);cursor:pointer;border-radius:6px;padding:3px 10px;font-size:.75rem;position:absolute;bottom:8px;right:8px}.scatter-reset:hover{border-color:var(--accent)}.schedule{border:1px solid var(--border);border-radius:8px;margin-top:12px;padding:6px 8px 8px;overflow:hidden}.schedule svg{font-size:10px;display:block}.sg-deadzone{fill:var(--border);opacity:.6}.sg-grid line{stroke:var(--border)}.sg-grid text,.sg-axis text{fill:var(--muted);font-variant-numeric:tabular-nums}.sg-axis line{stroke:var(--muted)}.sg-axis .sg-phase{stroke:var(--border);stroke-dasharray:2 3}.sg-reference{fill:none;stroke-width:1.5px;stroke-dasharray:5 4;opacity:.8}.sg-played{fill:none;stroke-width:2.5px}.sg-playhead{stroke:var(--fg);opacity:.4}.sg-legend{margin-top:4px;font-size:.75rem}.optimiser{border:1px solid var(--border);border-radius:8px;flex-direction:column;gap:8px;margin-top:12px;padding:10px 12px;font-size:.8rem;display:flex}.opt-row{flex-wrap:wrap;align-items:center;gap:8px 20px;display:flex}.opt-field{align-items:center;gap:6px;display:inline-flex}.opt-field>span:first-child{color:var(--muted)}.opt-field select{font:inherit}.opt-knobs input[type=range]{width:120px}.opt-knobs>.opt-field:first-child>span:first-child{min-width:6.5em}.opt-value{font-variant-numeric:tabular-nums;min-width:3.5em}.opt-help{min-width:240px;color:var(--muted);flex:1;margin:0}.midi{border:1px solid var(--border);border-radius:8px;flex-direction:column;gap:8px;margin-top:12px;padding:10px 12px;font-size:.8rem;display:flex}.midi>button{align-self:flex-start}.midi-row{flex-wrap:wrap;align-items:center;gap:8px 20px;display:flex}.midi-last{font-variant-numeric:tabular-nums}.midi-binding{align-items:center;gap:6px;display:inline-flex}.midi-target{font-weight:600}.midi-bound{color:var(--muted);font-variant-numeric:tabular-nums;min-width:8.5em}.midi button{font:inherit;border:1px solid var(--border);background:var(--panel);color:var(--fg);cursor:pointer;border-radius:6px;padding:2px 8px}.midi button:hover:not(:disabled){border-color:var(--accent)}.midi button.on{background:var(--fg);color:var(--bg)}.midi-phone summary{cursor:pointer;color:var(--accent)}.midi-phone ol{max-width:75ch;margin:8px 0;padding-left:20px;line-height:1.5}.midi-phone p{max-width:75ch;margin:0;line-height:1.5}.midi-phone a{color:inherit}.midi-forces{flex-direction:column;gap:6px;display:flex}.midi-force{flex-wrap:wrap;align-items:center;gap:6px 20px;display:flex}.surf-setups{flex-wrap:wrap;gap:12px;margin:4px 0 12px;display:flex}.surf-setup{border:1px solid var(--border);border-radius:8px;flex:300px;gap:10px;max-width:420px;margin:0;padding:8px;display:flex}.surf-setup.active{border-color:var(--accent)}.surf-setup img{width:120px;height:120px;image-rendering:pixelated;background:#fff;border-radius:4px;display:block}.surf-setup figcaption{flex-direction:column;align-items:flex-start;gap:4px;line-height:1.4;display:flex}.surf-links{color:var(--muted)}@media (width<=720px){.stage{flex-direction:column}.scatter{flex:none;height:60vh}.forces{align-items:center}}