/* Piano roll */
.piano-roll {
  --roll-key-width:65px;
  --roll-note:#8cb9a8;
  --roll-selected:#c3d991;
}
.roll-panel-heading {
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:15px 20px;
  border-bottom:1px solid #363b33;
}
.roll-icon {background:#3b4541;color:#9fd0bf}
.roll-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  background:#1a1d19;
  padding:4px;
  border:1px solid #393f36;
  border-radius:5px;
}
.roll-tabs button {
  padding:7px 10px;
  border:0;
  border-radius:3px;
  background:transparent;
  color:#969e90;
  font-size:10px;
  font-weight:700;
}
.roll-tabs button.selected,
.roll-actions button[aria-pressed="true"] {
  background:#454f3b;
  color:#d7e9b7;
}
.roll-toolbar {
  padding:10px 20px 5px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:9px 12px;
}
.roll-help {
  margin:0;
  padding:3px 20px 11px;
  color:#a3ad9f;
  font-size:11px;
  line-height:1.5;
}
.roll-actions {display:flex;flex-wrap:wrap;gap:5px}
.roll-actions button,
.roll-octave button,
.roll-options select {
  border:1px solid #424a3e;
  border-radius:4px;
  background:#2b302a;
  color:#c0cbb8;
}
.roll-actions button {
  padding:6px 9px;
  font-size:11px;
  font-weight:700;
}
.roll-actions button:hover:not(:disabled) {border-color:#8d9d7e}
.roll-actions button:disabled,
.roll-octave button:disabled {opacity:.42;cursor:default}
.roll-options {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 15px;
  color:#a3ad9f;
  font-size:9px;
  font-weight:700;
  letter-spacing:.6px;
}
.roll-options label {white-space:nowrap}
.roll-options select {
  margin-left:5px;
  padding:5px;
  font-size:11px;
  letter-spacing:0;
}
.roll-octave {display:flex;align-items:center;gap:7px;white-space:nowrap}
.roll-octave button {width:23px;height:23px;padding:0;font-size:13px}
.roll-octave b {font:600 11px 'Space Grotesk';color:#dce2d6}
.roll-scroll {overflow:auto;isolation:isolate}
.roll-grid {
  position:relative;
  min-width:calc(var(--roll-key-width) + var(--roll-steps) * 31.5px);
}
.roll-ruler,.roll-row {
  display:grid;
  grid-template-columns:var(--roll-key-width) minmax(0,1fr);
}
.roll-ruler {
  height:25px;
  background:#1b1e1a;
  color:#828b7d;
  font-size:9px;
  font-weight:700;
}
.roll-ruler-label,.roll-key {
  position:sticky;
  left:0;
  z-index:3;
}
.roll-ruler-label {
  background:#1b1e1a;
  padding:7px 10px;
  border-right:1px solid #394036;
  font-size:8px;
  letter-spacing:1px;
}
.roll-ruler-steps,.roll-cells {
  display:grid;
  grid-template-columns:repeat(var(--roll-steps),minmax(0,1fr));
}
.roll-cells {position:relative}
.roll-note-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.roll-note-block{position:absolute;top:1px;bottom:1px;min-width:3px;padding:0;border:1px solid #bddcc4;border-radius:3px;background:var(--roll-note);color:#243c32;pointer-events:auto;touch-action:none;cursor:grab;z-index:1}
.roll-note-block.note-selected{background:var(--roll-selected);border-color:#eef7cf;z-index:2}
.roll-note-block:focus-visible{outline:2px solid #e4f6a5;outline-offset:-1px;z-index:3}
.roll-note-line{position:absolute;bottom:2px;left:2px;height:3px;width:calc((100% - 4px) * var(--roll-velocity,1));background:#243c32;opacity:.7;pointer-events:none;border-radius:2px}
.roll-note-block .roll-resize{width:min(8px,35%)}
.roll-performance .roll-timing-controls input{width:85px}
.roll-ruler-steps span {
  padding:6px;
  border-left:1px solid #30362f;
  cursor:pointer;
  user-select:none;
}
.roll-ruler-steps span.roll-beat-start {color:#b3beaa}
.roll-ruler-steps span.roll-bar-start {color:#d9e8c7;background:#31392e}
.roll-ruler-steps span:hover {background:#39443a}
.roll-ruler-steps span.is-playing {background:#46533b;color:#e1efb9}
.roll-row {height:24px;border-top:1px solid #30362f}
.roll-key {
  padding:0 10px;
  text-align:left;
  border:0;
  border-right:1px solid #424a3e;
  background:#d4d8c8;
  color:#333c30;
  font-size:9px;
  font-weight:700;
}
.roll-key.black-key {background:#3c433b;color:#aab4a5}
.roll-key:hover {filter:brightness(1.15)}
.roll-cell {
  position:relative;
  min-width:0;
  border:0;
  border-left:1px solid #31382f;
  background:#252a24;
  padding:0;
  cursor:crosshair;
  user-select:none;
}
.roll-cell.roll-beat-start {border-left-color:#4b5447}
.roll-cell.roll-bar-start {border-left:2px solid #6b7663}
.black-row .roll-cell {background:#20251f}
.roll-cell.is-playing {box-shadow:inset 0 0 0 999px #d2e88412}
.roll-cell:hover {box-shadow:inset 0 0 0 999px #d2e88425}
.piano-roll .roll-cell.has-note {
  background:var(--roll-note);
  border-left-color:var(--roll-note);
  cursor:grab;
  touch-action:none;
}
.piano-roll .roll-cell.has-note.is-playing {background:#b7d6a2}
.piano-roll .roll-cell.note-selected {
  background:var(--roll-selected);
  border-left-color:var(--roll-selected);
}
.piano-roll .roll-cell.note-selected.is-playing {background:#d9eeaf}
.piano-roll .roll-cell.note-start {
  border-radius:4px 0 0 4px;
  border-left:3px solid #bddcc4;
}
.piano-roll .roll-cell.note-selected.note-start {border-left-color:#eef7cf}
.roll-cell.note-end {border-radius:0 4px 4px 0}
.roll-cell.note-start.note-end {border-radius:4px}
.roll-resize {
  position:absolute;
  inset:0 0 0 auto;
  width:min(12px,42%);
  cursor:ew-resize;
  touch-action:none;
}
.roll-resize::after {
  content:'';
  position:absolute;
  right:4px;
  top:6px;
  bottom:6px;
  width:3px;
  border-inline:1px solid #344d40;
  opacity:.66;
}
.roll-resize:hover {background:#263e3b26}
.roll-selecting .roll-cell {touch-action:none}
[data-roll-gesture="move"] .roll-cell {cursor:grabbing}
[data-roll-gesture="resize"] .roll-cell {cursor:ew-resize}
.roll-marquee,.roll-paste-marker {
  position:absolute;
  pointer-events:none;
  z-index:2;
}
.roll-marquee {border:1px solid #d7e9b7;background:#d7e9b724}
.roll-paste-marker {
  left:calc(var(--roll-key-width) + (100% - var(--roll-key-width)) / var(--roll-steps) * var(--roll-paste-step));
  top:0;
  bottom:0;
  width:2px;
  background:#f6d788;
}
.roll-cell:focus-visible,
.roll-key:focus-visible,
.roll-tabs button:focus-visible,
.roll-actions button:focus-visible {
  outline:2px solid #e4f6a5;
  outline-offset:-2px;
}
.roll-cell:focus-visible {z-index:1}
.roll-footer {
  min-height:35px;
  padding:7px 20px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:4px 12px;
  color:#a3ad9f;
  font-size:9px;
  font-weight:700;
  letter-spacing:.6px;
}
.roll-status {
  color:#d3ddca;
  font-size:11px;
  font-weight:400;
  letter-spacing:normal;
}
@media(max-width:700px) {
  .roll-panel-heading {align-items:flex-start;flex-direction:column}
  .roll-toolbar {align-items:flex-start}
  .roll-panel-heading,.roll-toolbar,.roll-help,.roll-footer {padding-inline:12px}
}
.roll-row.scale-row .roll-key{box-shadow:inset 3px 0 #9bc5bd}.roll-row.scale-row .roll-cell:not(.has-note){background-image:linear-gradient(#9bc5bd09,#9bc5bd09)}

.roll-pagination{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 18px;color:#a9b59d;font-size:10px}.roll-pagination button,.roll-pagination input{background:#293126;border:1px solid #46503e;border-radius:4px;color:#d9e5cf;padding:5px 8px}.roll-pagination input{width:65px}.roll-pagination button:disabled{opacity:.4}

/* Phrase controls operate on the selection without changing its grid position. */
.roll-performance{display:flex;flex-wrap:wrap;align-items:center;gap:7px 18px;padding:8px 20px;border-bottom:1px solid #363b33;background:#1c231e;flex:0 0 auto}
.roll-performance-controls{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.roll-performance label{display:flex;align-items:center;gap:5px;color:#a8b7a4;font-size:10px;white-space:nowrap}
.roll-performance input{width:58px;min-width:0;border:1px solid #46533f;border-radius:3px;padding:4px 5px;background:#273023;color:#e1ead9;font:inherit;font-size:11px}
.roll-performance button{border:1px solid #46533f;border-radius:3px;padding:5px 7px;background:#2d3828;color:#d3e2c8;font:inherit;font-size:10px;white-space:nowrap}
.roll-performance button:hover:not(:disabled){border-color:#9ab386}
.roll-performance :disabled{opacity:.4;cursor:default}
.roll-performance :focus-visible{outline:2px solid #b9d69f;outline-offset:2px}
.roll-ramp-label{color:#8da382;font-size:9px;text-transform:uppercase;letter-spacing:.06em}
.roll-performance-hint{flex-basis:100%;margin:0;color:#91a28c;font-size:9px;line-height:1.4}
.piano-roll .roll-cell.note-start::after{content:'';position:absolute;bottom:3px;left:2px;height:3px;width:calc((100% - 5px) * var(--roll-velocity,1));background:#243c32;opacity:.7;pointer-events:none;border-radius:2px}
body.studio-desktop .roll-performance{padding:7px 10px;background:#1d2733;border-color:#34404e;gap:7px 12px}
body.studio-desktop .roll-performance label{color:#a8bbd0}
body.studio-desktop .roll-performance input,body.studio-desktop .roll-performance button{background:#2a3645;border-color:#45556a;color:#d5dfeb;min-height:25px}
body.studio-desktop .roll-performance-hint,body.studio-desktop .roll-ramp-label{color:#93a9bf}
@media(max-width:700px){.roll-performance{padding-inline:12px}.roll-performance-controls{gap:5px}}

/* Sample-playing techniques retain their own compact, collapsible inspector. */
.roll-techniques{flex:0 0 auto;border-bottom:1px solid #3b4636;background:#1d261d;padding:0 20px}
.roll-techniques summary{cursor:pointer;padding:8px 0;font-size:11px;font-weight:600;color:#cbdcc2}
.roll-techniques summary span{font-size:9px;font-weight:400;color:#91a38a;margin-left:9px}
.roll-technique-body{display:flex;flex-direction:column;gap:7px;padding-bottom:9px}
.roll-technique-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px 14px}
.roll-technique-row label{display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:10px;color:#b0bea8}
.roll-technique-row label>span{font-size:9px;color:#91a38a}
.roll-technique-row input,.roll-technique-row select,.roll-technique-row button{font:inherit;font-size:10px;min-height:25px;border:1px solid #4a5941;border-radius:3px;background:#2a3425;color:#e0ead9;padding:4px 6px}
.roll-technique-row input{width:63px;min-width:0}
.roll-technique-row button{cursor:pointer}
.roll-technique-row :disabled{opacity:.45;cursor:default}
.roll-techniques :focus-visible{outline:2px solid #b9d69f;outline-offset:2px}
.roll-technique-target-hint,.roll-technique-help{margin:0;font-size:9px;line-height:1.45;color:#9bac94}
.roll-technique-target-hint{color:#c3d5b9}
body.studio-desktop .roll-techniques{padding:0 10px;background:#202b37;border-color:#34404e}
body.studio-desktop .roll-techniques summary{color:#c9decc}
body.studio-desktop .roll-technique-row label{color:#a8bbd0}
body.studio-desktop .roll-technique-row input,body.studio-desktop .roll-technique-row select,body.studio-desktop .roll-technique-row button{background:#2a3645;border-color:#45556a;color:#d5dfeb}
body.studio-desktop .roll-techniques summary span,body.studio-desktop .roll-technique-row label>span,body.studio-desktop .roll-technique-help{color:#93a9bf}
body.studio-desktop .roll-technique-target-hint{color:#b9cebb}
@media(max-width:700px){.roll-techniques{padding-inline:12px}.roll-technique-row{gap:6px 10px}.roll-technique-row input{width:58px}.roll-technique-row label{gap:4px}}

/* Recorded controller curves stay attached to a single note, in musical time. */
.roll-controllers{flex:0 0 auto;padding:0 20px;border-block:1px solid #3b4636;background:#1d261d}
.roll-controllers summary{padding:8px 0;cursor:pointer;font-size:11px;font-weight:600;color:#cbdcc2}
.roll-controllers summary>span{margin-left:9px;color:#91a38a;font-size:9px;font-weight:400}
.roll-controller-body{padding:0 0 9px;display:flex;flex-direction:column;gap:7px}
.roll-controller-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.roll-controller-toolbar label{display:flex;align-items:center;gap:5px;font-size:10px;color:#b0bea8;white-space:nowrap}
.roll-controller-toolbar input,.roll-controller-toolbar select,.roll-controller-toolbar button{min-height:25px;padding:4px 6px;border:1px solid #4a5941;border-radius:3px;background:#2a3425;color:#e0ead9;font:inherit;font-size:10px}
.roll-controller-toolbar input{width:76px;min-width:0}
.roll-controller-toolbar select{max-width:170px}
.roll-controller-toolbar button{cursor:pointer}
.roll-controllers :disabled{opacity:.45;cursor:default}
.roll-controllers :focus-visible{outline:2px solid #b9d69f;outline-offset:2px}
.roll-controller-note{margin-right:auto;color:#b9cebb;font-size:10px}
.roll-controller-help{margin:0;color:#9bac94;font-size:9px;line-height:1.45}
.roll-controller-canvas{height:142px;min-height:142px;background:#151d18;border:1px solid #3b4b3e;border-radius:4px;touch-action:none;cursor:crosshair;overflow:hidden}
.roll-controller-canvas[aria-disabled="true"]{display:flex;align-items:center;justify-content:center;cursor:default;height:72px;min-height:72px}
.roll-controller-empty{padding:10px;text-align:center;color:#879d8c;font-size:10px}
.roll-controller-canvas svg{display:block;width:100%;height:100%;overflow:visible}
.roll-controller-grid line{stroke:#334239;stroke-width:1;vector-effect:non-scaling-stroke}
.roll-controller-grid text{fill:#8fa697;font:10px sans-serif}
.roll-controller-line{fill:none;stroke:#a3d8c2;stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:none}
.roll-controller-line.is-default{stroke-dasharray:5 4;opacity:.6}
.roll-controller-points circle{fill:#608b7e;stroke:#c1e2cd;stroke-width:1.5;vector-effect:non-scaling-stroke;cursor:grab}
.roll-controller-points circle.selected{fill:#e0eeb9;stroke:#f4fadd}
.roll-controller-points circle:hover{fill:#fff}
body.studio-desktop .roll-controllers{padding:0 10px;background:#202b37;border-color:#34404e}
body.studio-desktop .roll-controllers summary{color:#c9decc}
body.studio-desktop .roll-controller-toolbar label{color:#a8bbd0}
body.studio-desktop .roll-controller-toolbar input,body.studio-desktop .roll-controller-toolbar select,body.studio-desktop .roll-controller-toolbar button{background:#2a3645;border-color:#45556a;color:#d5dfeb}
body.studio-desktop .roll-controllers summary>span,body.studio-desktop .roll-controller-help{color:#93a9bf}
body.studio-desktop .roll-controller-canvas{background:#17212c;border-color:#3c4e61}
body.studio-desktop .roll-controller-grid line{stroke:#314254}
body.studio-desktop .roll-controller-grid text{fill:#91a9bf}
@media(max-width:700px){.roll-controllers{padding-inline:12px}.roll-controller-toolbar{gap:6px 8px}.roll-controller-toolbar input{width:68px}}

/* Optional timing correction keeps its unsaved preview inside the piano roll. */
.roll-quantize{flex:0 0 auto;padding:0 20px;border-bottom:1px solid #3b4636;background:#1d261d}
.roll-quantize summary{padding:8px 0;cursor:pointer;font-size:11px;font-weight:600;color:#cbdcc2}
.roll-quantize summary>span{margin-left:9px;font-size:9px;font-weight:400;color:#91a38a}
.roll-quantize-body{display:flex;flex-direction:column;gap:6px;padding-bottom:9px}
.roll-quantize-controls,.roll-quantize-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.roll-quantize-actions{gap:5px}
.roll-quantize-controls label{display:flex;align-items:center;gap:6px;font-size:10px;white-space:nowrap;color:#b0bea8}
.roll-quantize select,.roll-quantize button{min-height:25px;padding:4px 6px;border:1px solid #4a5941;border-radius:3px;background:#2a3425;color:#e0ead9;font:inherit;font-size:10px}
.roll-quantize button{cursor:pointer}
.roll-quantize input[type="range"]{width:90px;min-width:50px;margin:0;accent-color:#b9d69f}
.roll-quantize output{min-width:30px;text-align:right;font-variant-numeric:tabular-nums;color:#d7e5cd}
.roll-quantize :disabled{opacity:.45;cursor:default}
.roll-quantize :focus-visible{outline:2px solid #b9d69f;outline-offset:2px}
.roll-quantize-scope,.roll-quantize-help,.roll-quantize-status{margin:0;font-size:9px;line-height:1.45;color:#9bac94}
.roll-quantize-scope{color:#c3d5b9}
.roll-quantize-status{color:#e3d9a6;min-height:0}
.roll-quantize-status:empty{display:none}
.roll-quantize-preview .roll-grid{box-shadow:inset 0 0 0 2px #d4bc7d}
.roll-quantize-preview .roll-actions,.roll-quantize-preview .roll-performance,.roll-quantize-preview .roll-techniques,.roll-quantize-preview .roll-controllers{opacity:.55}
body.studio-desktop .roll-quantize{padding:0 10px;background:#202b37;border-color:#34404e}
body.studio-desktop .roll-quantize summary{color:#c9decc}
body.studio-desktop .roll-quantize-controls label{color:#a8bbd0}
body.studio-desktop .roll-quantize select,body.studio-desktop .roll-quantize button{background:#2a3645;border-color:#45556a;color:#d5dfeb}
body.studio-desktop .roll-quantize summary>span,body.studio-desktop .roll-quantize-help{color:#93a9bf}
body.studio-desktop .roll-quantize-scope{color:#b9cebb}
@media(max-width:700px){.roll-quantize{padding-inline:12px}.roll-quantize-controls{gap:7px 10px}.roll-quantize input[type="range"]{width:75px}}

.roll-transform{padding:10px 16px;border-top:1px solid var(--border,#34364a);color:var(--text-muted,#aaaabb);font-size:12px}.roll-transform summary{cursor:pointer}.roll-transform-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0}.roll-transform-controls label{display:flex;align-items:center;gap:5px}.roll-transform-controls input{width:65px}.roll-transform-controls select,.roll-transform-controls input{color:var(--text,#eee);background:var(--panel,#242536);border:1px solid var(--border,#45465a);border-radius:4px;padding:5px}.roll-transform p{line-height:1.5}