.piano-roll{--pr-key-width:70px;--pr-row:14px;min-width:0;background:var(--panel);color:var(--ink);border-block:1px solid var(--border)}
.piano-roll .pr-caption{display:flex;align-items:center;gap:13px;padding:10px 13px;font-size:11px;min-height:39px}
.piano-roll .pr-title{font-weight:650;color:var(--ink)}
.piano-roll .pr-range-label{color:var(--muted);font-size:10px}
.piano-roll .pr-feedback{margin-left:auto;font:10px var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.piano-roll .pr-viewport{height:min(390px,47dvh);max-height:47dvh;min-height:260px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) var(--surface);position:relative;scroll-behavior:auto;overflow-anchor:none;touch-action:pan-y;outline-offset:-2px}
.piano-roll .pr-content{min-width:650px;position:relative;isolation:isolate}
.piano-roll .pr-ruler{position:sticky;top:0;z-index:5;display:flex;height:var(--pr-ruler-height,48px);background:var(--surface);border-block:1px solid var(--border);font:10px var(--mono);color:var(--muted)}
.piano-roll .pr-corner{position:sticky;left:0;width:var(--pr-key-width);flex:0 0 var(--pr-key-width);z-index:2;display:flex;align-items:center;padding-left:11px;background:var(--surface);border-right:1px solid var(--line);font:9px var(--sans);letter-spacing:.03em}
.piano-roll .pr-ruler-timeline{position:relative;flex:1;min-width:0}
.piano-roll .pr-beat{position:absolute;top:20px;height:calc(var(--pr-ruler-height,48px) - 20px);min-height:0;min-width:0;margin:0;padding:0 0 0 5px;display:flex;align-items:center;justify-content:flex-start;border:0;border-left:1px solid var(--border);border-radius:0;background:transparent;color:var(--muted);font:10px var(--mono);font-variant-numeric:tabular-nums;text-align:left;overflow:visible;transform:none;transition:none}
.piano-roll .pr-bar-name{position:absolute;top:-19px;left:5px;max-width:135px;font:9px/18px var(--mono);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.piano-roll .pr-beat:hover{background:var(--hover);color:var(--ink)}
.piano-roll .pr-beat.is-current{color:var(--selection-ink);background:var(--selection-bg);box-shadow:inset 0 -2px var(--selection)}
.piano-roll .pr-beat:focus-visible{z-index:3;outline:2px solid var(--accent);outline-offset:-2px}
.piano-roll .pr-beat.is-bar{border-left-color:var(--line)}
.piano-roll .pr-body{position:relative;background:var(--canvas)}
.piano-roll .pr-keyboard{position:sticky;left:0;width:var(--pr-key-width);height:100%;z-index:3;background:var(--panel);border-right:1px solid var(--line)}
.piano-roll .pr-key{position:absolute;left:0;width:100%;height:var(--pr-row);padding:0 8px;display:flex;align-items:center;justify-content:space-between;border:0;border-bottom:1px solid #b5c0d0;border-radius:0;background:#e6ebf3;color:#34445b;font:9px/1 var(--mono);text-align:left;transition:none;transform:none}
.piano-roll .pr-key.is-black{width:78%;background:#303c50;color:#e2e9f4;border-right:1px solid var(--line);border-radius:0 2px 2px 0;box-shadow:1px 1px 0 color-mix(in srgb,var(--ink) 15%,transparent)}
.piano-roll .pr-key.is-c{color:#24334a;font-weight:700;border-bottom-color:var(--line)}
.piano-roll .pr-key small{font:8px var(--mono);opacity:.6}
.piano-roll .pr-key:hover,.piano-roll .pr-key.is-focused{background:var(--accent);color:var(--accent-ink)}
.piano-roll .pr-timeline{position:absolute;inset:0 0 0 var(--pr-key-width);overflow:hidden;cursor:crosshair;touch-action:none}
.piano-roll .pr-grid,.piano-roll .pr-notes{position:absolute;inset:0;pointer-events:none}
.piano-roll .pr-row{position:absolute;left:0;right:0;height:var(--pr-row);border-bottom:1px solid color-mix(in srgb,var(--border) 35%,transparent);background:color-mix(in srgb,var(--panel) 45%,var(--canvas))}
.piano-roll .pr-row.is-black{background:color-mix(in srgb,var(--surface) 51%,var(--canvas))}
.piano-roll .pr-row.is-c{border-bottom-color:color-mix(in srgb,var(--line) 62%,var(--border))}
.piano-roll .pr-grid-line{position:absolute;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--border) 65%,transparent)}
.piano-roll .pr-grid-line.is-bar{width:2px;background:var(--line)}
.piano-roll .pr-grid-line.is-beat{background:color-mix(in srgb,var(--line) 68%,transparent)}
.piano-roll .pr-note{position:absolute;height:calc(var(--pr-row) - 2px);min-width:9px;margin:0;padding:0 10px 0 4px;display:flex;align-items:center;justify-content:flex-start;gap:0;border:1px solid color-mix(in srgb,var(--note-color,var(--accent)) 76%,var(--ink));border-radius:3px;background:color-mix(in srgb,var(--note-color,var(--accent)) 32%,var(--panel));color:var(--ink);font:8px/1 var(--mono);text-align:left;white-space:nowrap;overflow:hidden;pointer-events:auto;cursor:grab;touch-action:none;transition:none;transform:none;user-select:none}
.piano-roll .pr-note:hover{background:color-mix(in srgb,var(--note-color,var(--accent)) 48%,var(--panel));border-color:var(--ink)}
.piano-roll .pr-note-name{overflow:hidden;text-overflow:clip;min-width:0;pointer-events:none}
.piano-roll .pr-resize{position:absolute;right:0;top:0;bottom:0;width:8px;background:color-mix(in srgb,var(--note-color,var(--accent)) 35%,var(--border));border-left:1px solid color-mix(in srgb,var(--ink) 30%,transparent);cursor:ew-resize}
.piano-roll .pr-resize::after{content:'';position:absolute;right:2px;top:2px;bottom:2px;width:1px;background:color-mix(in srgb,var(--ink) 58%,transparent)}
.piano-roll .pr-note.continues::after{content:'›';position:absolute;right:10px;top:-1px;font-size:13px;line-height:11px}
.piano-roll .pr-note.is-selected{z-index:2;background:var(--selection-fill);color:var(--selection-ink);border-color:var(--selection);box-shadow:0 0 0 1px var(--selection)}
.piano-roll .pr-note.is-selected .pr-resize{background:var(--selection-bg)}
.piano-roll[data-note-colour=pitch] .pr-note:is(.is-selected,.pr-ghost){background:color-mix(in srgb,var(--note-color) 24%,var(--canvas));color:var(--note-color)}
.piano-roll .pr-note:focus-visible{z-index:4;outline:2px solid var(--accent);outline-offset:1px}
.piano-roll .pr-note.is-drag-source{opacity:.3}
.piano-roll .pr-note.pr-ghost{z-index:4;opacity:.85;pointer-events:none;border-style:dashed;background:var(--selection-fill);color:var(--selection-ink);border-color:var(--selection);box-shadow:0 0 0 1px var(--selection)}
.piano-roll .pr-note[hidden]{display:none}
.piano-roll .pr-carry{position:absolute;height:9px;margin-top:2px;background:color-mix(in srgb,var(--note-color,var(--accent)) 23%,transparent);border-block:1px dashed color-mix(in srgb,var(--note-color,var(--accent)) 65%,var(--border));color:var(--muted);font:9px/8px var(--mono);pointer-events:none;overflow:hidden}
.piano-roll[data-note-colour=part] .pr-note,.piano-roll[data-note-colour=part] .pr-carry{--note-color:var(--track,var(--accent))!important}
.piano-roll[data-note-colour=neutral] .pr-note,.piano-roll[data-note-colour=neutral] .pr-carry{--note-color:var(--muted)!important}
.piano-roll[data-gesture=move] .pr-viewport{cursor:grabbing}
.piano-roll[data-gesture=resize] .pr-viewport{cursor:ew-resize}
.piano-roll .pr-hint{display:flex;justify-content:space-between;gap:12px;padding:9px 13px;border-top:1px solid var(--border);font-size:10px;color:var(--muted);background:color-mix(in srgb,var(--surface) 25%,var(--panel))}
.piano-roll .pr-empty{padding:25px;color:var(--muted)}
@media(max-width:720px){.piano-roll .pr-range-label{display:none}.piano-roll .pr-caption{padding-inline:10px;gap:8px}.piano-roll .pr-hint{font-size:9px;gap:7px;padding-inline:10px}.piano-roll .pr-hint>span:last-child{display:none}}

/* Safe insertion and marquee feedback share the same linear beat geometry. */
.piano-roll .pr-cursor{position:absolute;top:0;bottom:0;width:2px;background:var(--selection);opacity:.65;pointer-events:none;z-index:1}
.piano-roll .pr-selection{position:absolute;border:1px dashed var(--selection);background:color-mix(in srgb,var(--selection) 15%,transparent);pointer-events:none;z-index:6}
.piano-roll .pr-selection[hidden],.piano-roll .pr-cursor[hidden]{display:none}
.piano-roll[data-tool=select] .pr-timeline{cursor:default}
.piano-roll[data-gesture=select] .pr-timeline{cursor:crosshair}

/* Playback stays separate from the gold insertion cursor and pitch colours. */
.piano-roll .pr-playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--play);box-shadow:0 0 0 1px color-mix(in srgb,var(--canvas) 45%,transparent);pointer-events:none;z-index:5}
.piano-roll .pr-playhead-tip{position:absolute;top:2px;bottom:0;width:2px;background:var(--play);pointer-events:none;z-index:4}
.piano-roll .pr-playhead-tip::before{content:'';position:absolute;left:-4px;top:0;border-inline:5px solid transparent;border-top:6px solid var(--play)}
.piano-roll .pr-playhead[hidden],.piano-roll .pr-playhead-tip[hidden]{display:none}

@media screen {
  .piano-roll .pr-beat.is-current { color:var(--ink); }
  .piano-roll[data-note-colour=pitch] .pr-note:not(.is-selected):not(.pr-ghost) { background:var(--canvas); color:var(--note-color); border-color:var(--line); }
  .piano-roll[data-note-colour=pitch] .pr-note:is(.is-selected,.pr-ghost) { background:var(--selection-bg); color:var(--note-color); }
}