#mod-matrix-table.mod-matrix-table--synth { min-width: 1580px; }
.mod-matrix-curve-cell { vertical-align: top; }
.transfer-curve-button { display: flex; flex-direction: column; gap: 2px; align-items: center; width: 88px; min-width: 88px; padding: 3px; margin: 0; color: #aab8c4; background: #17232d; border: 1px solid #3a5265; border-radius: 5px; cursor: pointer; }
.transfer-curve-button svg { display: block; width: 78px; height: 32px; }
.transfer-curve-button path { fill: none; stroke: currentColor; stroke-width: 2; }
.transfer-curve-button span { font-size: 10px; }
.transfer-curve-button.is-shaped { color: #91e6c5; border-color: #568e7b; }
.transfer-curve-button:disabled { opacity: .35; cursor: default; }
.transfer-curve-button:focus-visible { outline: 2px solid #91e6c5; outline-offset: 2px; }
.modulation-curve-editor { width: min(500px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box; overflow: auto; padding: 20px; border: 1px solid #48605e; border-radius: 12px; color: #e4eeed; background: #172020; color-scheme: dark; font: 12px/1.5 system-ui, sans-serif; }
.modulation-curve-editor::backdrop { background: #080c0dbb; }
.modulation-curve-editor h2 { margin: 0 0 5px; padding: 0; border: 0; font-size: 16px; }
.modulation-curve-editor p { margin: 6px 0 12px; color: #9eb2b1; }
.modulation-curve-editor svg { display: block; width: 100%; background: #101817; touch-action: none; user-select: none; border: 1px solid #30413f; border-radius: 5px; }
.modulation-curve-editor .curve-grid { stroke: #293b38; stroke-width: 1; fill: none; }
.modulation-curve-editor .curve-diagonal { stroke: #57736c; stroke-dasharray: 3 4; fill: none; }
.modulation-curve-editor .curve-line { stroke: #8de4c1; stroke-width: 2; fill: none; }
.modulation-curve-editor .is-bypassed .curve-line { opacity: .35; }
.modulation-curve-editor circle { fill: #193d31; stroke: #8de4c1; stroke-width: 2; cursor: grab; }
.modulation-curve-editor circle[aria-pressed="true"], .modulation-curve-editor circle:focus { fill: #d3f9ea; outline: none; }
.modulation-curve-editor svg text { fill: #93aaa4; font-size: 10px; }
.curve-axis-label { text-align: center; color: #a0b4b0; font-size: 11px; margin-top: 3px; }
.curve-toolbar, .curve-point-controls, .curve-footer { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 10px 0; }
.curve-point-controls label { flex: 1; min-width: 90px; }
.modulation-curve-editor input[type="number"] { display: block; box-sizing: border-box; width: 100%; max-width: 130px; margin: 3px 0 0; }
.modulation-curve-editor button, .modulation-curve-editor select, .modulation-curve-editor input[type="number"] { padding: 6px 9px; background: #233331; border: 1px solid #405b55; border-radius: 5px; color: inherit; font: inherit; }
.modulation-curve-editor button { width: auto; margin: 0; cursor: pointer; }
.modulation-curve-editor button:disabled, .modulation-curve-editor input:disabled { opacity: .4; }
.modulation-curve-editor :is(button, select, input):focus-visible { outline: 2px solid #8de4c1; outline-offset: 2px; }
.curve-bend { display: flex; align-items: center; gap: 8px; }
.curve-bend input { flex: 1; min-width: 40px; }
.curve-bend output { width: 38px; text-align: right; }
.curve-footer { margin: 18px 0 0; }
.curve-footer span { flex: 1; color: #8ea7a0; font-size: 10px; }
#curve-done { background: #2a5849; border-color: #5aa18a; }