/* The score stays pale; the editing surface reads like a dedicated MIDI editor. */
dialog:has(.piano-roll) { width: min(1180px, calc(100vw - 24px)); }
.piano-roll { --pr-grid: #30383e; --pr-black: #293137; --pr-note: #86b5d2; --pr-selected: #edc773; border: 1px solid #53636d; border-radius: 5px; background: #e1e7eb; overflow: hidden; min-width: 0; margin: 10px 0; }
.pr-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; padding: 10px; }
.pr-toolbar label { font-size: 11px; gap: 3px; }
.pr-toolbar select { padding: 6px; font-size: 12px; }
.pr-toolbar button { font-size: 11px; padding: 8px 10px; }
.pr-tools { display: flex; align-self: end; gap: 2px; }
.pr-tools button[aria-pressed=true] { background: #355c78; color: white; border-color: #355c78; }
.pr-help { font-size: 11px; color: #4c606e; padding: 0 11px 8px; }
.pr-scroll { overflow: auto; height: 388px; max-height: 48vh; overscroll-behavior: contain; background: var(--pr-grid); scrollbar-color: #8398a6 #293137; }
.pr-content { position: relative; }
.pr-ruler { display: flex; height: 27px; position: sticky; top: 0; z-index: 5; background: #46545e; color: #e8eef2; }
.pr-corner { width: 62px; flex-shrink: 0; position: sticky; left: 0; z-index: 6; background: #53626b; font-size: 11px; padding: 6px 8px; }
.pr-ticks { position: relative; }
.pr-ticks span { position: absolute; top: 5px; bottom: 0; border-left: 1px solid #90a1aa; padding-left: 5px; font-size: 11px; }
.pr-ticks .pr-end-marker { transform: translateX(-100%); padding: 0 5px; border-left: 0; border-right: 1px solid #e8c875; font-size: 10px; }
.pr-body { display: flex; }
.pr-keys { position: sticky; left: 0; z-index: 4; width: 62px; flex-shrink: 0; background: #e4e8e9; }
.pr-key { height: 20px; border-bottom: 1px solid #aeb8bf; padding: 2px 7px 2px 0; font-size: 10px; text-align: right; color: #283b48; }
.pr-key.black { background: #202a31; color: #bccbd5; margin-right: 15px; border-bottom-color: #101a23; border-radius: 0 2px 2px 0; }
.pr-grid { position: relative; height: 2560px; flex-shrink: 0; background-color: var(--pr-grid); user-select: none; }
.pr-grid::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(to right, #c4d5e23d 0 1px, transparent 1px var(--bar-width)), repeating-linear-gradient(to right, #c4d5e21c 0 1px, transparent 1px var(--beat-width)), repeating-linear-gradient(to right, #c4d5e209 0 1px, transparent 1px var(--snap-width)); }
.pr-grid.drawing { cursor: crosshair; }
.pr-outside { position: absolute; top: 0; right: 0; bottom: 0; background: #11191f66; border-left: 1px solid #dec67c80; pointer-events: none; }
.pr-pitch-row { height: 20px; border-bottom: 1px solid #48515880; }
.pr-pitch-row.black { background: var(--pr-black); }
.pr-pitch-row.octave { border-bottom-color: #728998; }
.pr-notes { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.pr-note { position: absolute; height: 18px; min-width: 0; padding: 0 7px 0 4px; line-height: 15px; border: 1px solid #adcee2; border-radius: 2px; background: var(--pr-note); color: #102d40; text-align: left; font-size: 10px; font-weight: 600; cursor: grab; pointer-events: auto; touch-action: none; opacity: var(--strength, 1); }
.pr-note:hover { background: #a1c9e1; }
.pr-note.selected { background: var(--pr-selected); border-color: #fff0b9; color: #372900; z-index: 2; opacity: 1; }
.pr-note > span:first-child { display: block; overflow: hidden; white-space: nowrap; pointer-events: none; }
.pr-resize { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; border-right: 2px solid #344e5b80; cursor: ew-resize; touch-action: none; }
.pr-velocity-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); border-top: 1px solid #798b97; background: #293137; }
.pr-velocity-label { color: #c1cdd5; font-size: 10px; padding: 8px 5px; background: #36434d; }
.pr-velocity-scroll { overflow: hidden; height: 72px; }
.pr-velocity { position: relative; height: 72px; background: repeating-linear-gradient(to top, transparent 0 17px, #849aa516 17px 18px); }
.pr-velocity-bar { position: absolute; bottom: 0; width: 7px; min-width: 0; padding: 0; background: #91b893; border: 0; border-top: 3px solid #c7e7c9; border-radius: 0; cursor: ns-resize; touch-action: none; }
.pr-velocity-bar.selected { background: #d6ae59; border-top-color: #fff0b9; z-index: 1; }
.pr-inspector { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; padding: 12px 10px 5px; }
.pr-inspector > strong { font-size: 12px; align-self: center; margin-right: 8px; }
.pr-inspector label { flex: 1; min-width: 95px; font-size: 11px; }
.pr-inspector input { width: 100%; font-size: 12px; padding: 7px; }
.pr-status { font-size: 11px; color: #355c78; padding: 3px 10px 8px; min-height: 24px; }
.drum-roll .pr-keys, .drum-roll .pr-corner { width: 90px; }
.drum-roll .pr-grid { height: 220px; }
.drum-roll .pr-scroll { height: 248px; }
.drum-roll .pr-key.black { margin-right: 0; border-radius: 0; }
.drum-roll .pr-velocity-row { grid-template-columns: 90px minmax(0, 1fr); }
.drum-roll .pr-note { padding: 0; border-radius: 50%; width: 10px; }
.drum-roll .pr-note > span { display: none; }
.pr-readonly .pr-note, .pr-readonly .pr-velocity-bar { cursor: default; }
.pr-readonly .pr-inspector, .pr-readonly .pr-status { display: none; }
@media(max-width: 760px) { .pr-scroll { height: 320px; } .pr-inspector > strong { flex-basis: 100%; } .pr-toolbar { gap: 6px; } dialog:has(.piano-roll) { padding: 12px; } }