.midi-editor { margin-bottom: 3rem; }

.me-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem 1.25rem;
    padding: 1rem 0;
    border-top: 1px solid var(--rule);
}
.me-toolbar label, .me-field { min-width: 9rem; }
.me-field > span { display: block; margin-bottom: .28rem; color: var(--ink-soft); font-size: .84rem; }
.me-toolbar input[type="number"] { width: 6rem; }
.me-bars { display: flex; align-items: center; gap: .4rem; }
.me-bars output { min-width: 2rem; text-align: center; font: 1.05rem var(--mono); }
.me-buttons { display: flex; gap: .5rem; margin-left: auto; }

.midi-editor button.me-step { padding: .3rem .75rem; }
.midi-editor button.me-secondary { background: transparent; color: var(--ink); }
.midi-editor button.me-secondary:hover { background: #27334f; color: var(--sheet); }
.midi-editor button:disabled { opacity: .4; cursor: not-allowed; }

.me-palette {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    padding: .75rem .9rem;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: var(--sheet);
}
.me-palette-group { display: flex; align-items: center; gap: .3rem; }
.me-palette-title { margin-right: .3rem; color: var(--ink-soft); font-size: .84rem; font-style: italic; }
.midi-editor .me-tool {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 3.1rem;
    padding: 0;
    border: 1px solid var(--rule);
    background: var(--paper);
    color: var(--ink);
    cursor: grab;
    touch-action: none;
}
.midi-editor .me-tool:hover { background: #e2e6ea; color: var(--ink); }
.midi-editor .me-tool[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--sheet); }

.me-status { min-height: 1.6rem; margin: .7rem 0 .3rem; color: var(--ink-soft); font-size: .9rem; }

.me-staff-scroll {
    overflow-x: auto;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: var(--sheet);
}
.me-staff { display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
.me-staff:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.has-tool .me-staff { cursor: copy; }
.is-dragging, .is-dragging * { cursor: grabbing !important; }

.me-staff .me-line, .me-staff .me-ledger { stroke: var(--ink); stroke-width: 1; }
.me-staff .me-barline { stroke: var(--ink); stroke-width: 1.2; }
.me-staff .me-final { stroke-width: 3; }
.me-staff .me-clef { fill: var(--ink); stroke: var(--ink); }
.me-staff .me-meter { fill: var(--ink); font: 700 20px var(--ui-font); text-anchor: middle; }
.me-staff .me-bar-number { fill: var(--ink-soft); font: italic 11px var(--ui-font); }
.midi-editor .me-head { fill: var(--ink); stroke: var(--ink); stroke-width: 1; }
.midi-editor .me-head.is-hollow { fill: var(--sheet); stroke-width: 1.8; }
.midi-editor .me-stem { stroke: var(--ink); stroke-width: 1.3; }
.midi-editor .me-flag { fill: var(--ink); }
.midi-editor .me-accidental { fill: var(--ink); font: 18px var(--ui-font); }
.midi-editor .me-rest { fill: var(--ink); stroke: var(--ink); }
.me-staff .me-gap { fill: #b9c0ca; stroke: #b9c0ca; }
.me-staff .me-hit { fill: transparent; cursor: grab; }
.me-staff .me-event:hover .me-hit { fill: rgba(23, 33, 57, .05); }
.me-staff .is-selected .me-head, .me-staff .is-selected .me-flag, .me-staff .is-selected .me-accidental, .me-staff .is-selected .me-rest { fill: var(--accent); stroke: var(--accent); }
.me-staff .is-selected .me-stem, .me-staff .is-selected .me-ledger { stroke: var(--accent); }
.me-staff .is-selected .me-head.is-hollow { fill: var(--sheet); }
.me-staff .is-dragging { opacity: .25; }
.me-staff .is-target .me-hit { fill: rgba(164, 49, 43, .12); }
.me-staff .me-preview { opacity: .65; }
.me-staff .me-preview .me-span { fill: rgba(23, 33, 57, .06); }
.me-staff .me-preview.is-invalid .me-span { fill: rgba(164, 49, 43, .14); }
.me-staff .me-playhead { stroke: var(--accent); stroke-width: 2; }

.me-ghost {
    position: fixed;
    z-index: 10;
    pointer-events: none;
    transform: translate(-50%, -70%);
    opacity: .8;
}
.me-ghost .me-head, .me-ghost .me-flag, .me-ghost .me-rest, .me-ghost .me-accidental { fill: var(--accent); stroke: var(--accent); }
.me-ghost .me-stem { stroke: var(--accent); }

.me-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; margin: 1.2rem 0; }
.me-actions-label { color: var(--ink-soft); font-size: .9rem; }
.me-theme-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.me-theme-link {
    padding: .45rem .85rem;
    border: 1px solid var(--ink);
    border-radius: 3px;
    text-decoration: none;
    font-size: .92rem;
}
.me-theme-link:hover { background: #27334f; color: var(--sheet); }
.me-theme-link.is-disabled { border-color: var(--rule); color: var(--ink-soft); }

.me-help { color: var(--ink-soft); font-size: .9rem; }
.me-help summary { cursor: pointer; color: var(--ink); }
.me-help ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.me-sound { min-width: auto; padding-top: 0; min-height: 2.55rem; }

.me-library { margin: 1.6rem 0 1.4rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.me-library h3 { margin: 0 0 .7rem; font-weight: 400; font-size: 1.2rem; }
.me-save { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem 1rem; }
.me-save label { flex: 1 1 16rem; }
.me-save input[type="text"] {
    width: 100%; min-height: 2.55rem; padding: .48rem .58rem; border: 1px solid var(--rule);
    border-radius: 3px; background: var(--sheet); color: var(--ink); font: .95rem var(--ui-font);
}
.me-save .me-buttons { margin-left: 0; flex-wrap: wrap; }
.me-current { margin: .6rem 0; color: var(--ink-soft); font-size: .9rem; font-style: italic; }
.me-library-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #e4e7eb; }
.me-melody {
    display: grid; grid-template-columns: minmax(8rem, 1fr) auto auto; align-items: center;
    gap: .3rem 1rem; padding: .55rem .2rem; border-bottom: 1px solid #e4e7eb;
}
.me-melody.is-current { background: var(--sheet); box-shadow: inset 3px 0 0 var(--accent); padding-left: .6rem; }
.me-melody-name { color: var(--ink); }
.me-melody-meta { color: var(--ink-soft); font-size: .84rem; }
.me-melody-actions { display: flex; gap: .4rem; align-items: center; }
.midi-editor .me-melody-actions button { padding: .3rem .7rem; font-size: .88rem; }
.me-melody-actions .me-link { padding: .3rem .7rem; border: 1px solid var(--ink); border-radius: 3px; font-size: .88rem; text-decoration: none; }
.me-melody-actions .me-link:hover { background: #27334f; color: var(--sheet); }
.midi-editor button.me-danger { border-color: var(--accent); color: var(--accent); }
.midi-editor button.me-danger:hover { background: var(--accent); color: var(--sheet); }
.me-library-empty { color: var(--ink-soft); font-size: .9rem; }

@media (max-width: 42rem) {
    .me-melody { grid-template-columns: 1fr; }
}

.me-staff .me-bar-insert { cursor: pointer; }
.me-staff .me-bar-insert-hit { fill: transparent; stroke: transparent; }
.me-staff .me-bar-insert-plus { fill: var(--ink-soft); font: 700 17px var(--ui-font); pointer-events: none; }
.me-staff .me-bar-insert:hover .me-bar-insert-hit,
.me-staff .me-bar-insert:focus .me-bar-insert-hit { fill: rgba(31, 110, 74, .10); stroke: var(--ink-soft); }
.me-staff .me-bar-insert.is-disabled { cursor: not-allowed; opacity: .35; pointer-events: none; }
.me-staff .me-bar-insert:focus { outline: none; }
.me-staff .me-bar-delete { cursor: pointer; }
.me-staff .me-bar-delete-hit { fill: transparent; stroke: transparent; }
.me-staff .me-bar-delete-cross { fill: var(--accent); font: 700 17px var(--ui-font); pointer-events: none; }
.me-staff .me-bar-delete:hover .me-bar-delete-hit,
.me-staff .me-bar-delete:focus .me-bar-delete-hit { fill: rgba(164, 49, 43, .10); stroke: var(--accent); }
.me-staff .me-bar-delete:focus { outline: none; }

.me-staff .me-bar-append { cursor: pointer; }
.me-staff .me-bar-append-hit { fill: var(--sheet); stroke: var(--ink-soft); }
.me-staff .me-bar-append-plus { fill: var(--ink); font: 700 18px var(--ui-font); pointer-events: none; }
.me-staff .me-bar-append:hover .me-bar-append-hit,
.me-staff .me-bar-append:focus .me-bar-append-hit { fill: rgba(31, 110, 74, .10); stroke: var(--ink); }
.me-staff .me-bar-append.is-disabled { cursor: not-allowed; opacity: .35; pointer-events: none; }
.me-staff .me-bar-append:focus { outline: none; }