.mf-depth-chord { margin: 1rem 0; padding: .75rem; border: 2px solid #283b4b; border-radius: .5rem; background: #fff8e9; color: #283b4b; }
.mf-depth-chord summary { min-height: 44px; display: flex; align-items: center; font-weight: 800; cursor: pointer; }
.mf-depth-chord-body { display: grid; gap: .75rem; }
.mf-depth-chord-body p { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.mf-depth-chord-controls { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr)); gap: .5rem; }
.mf-depth-chord-controls label { display: grid; gap: .35rem; font-weight: 700; }
.mf-depth-chord-controls select, .mf-depth-chord-controls button { min-width: 0; min-height: 44px; width: 100%; padding: .6rem; border: 2px solid #283b4b; border-radius: .35rem; font: inherit; background: #fffdf7; color: #283b4b; white-space: normal; }
.mf-depth-chord-controls button { font-weight: 700; cursor: pointer; }
.mf-depth-chord :disabled { opacity: .55; cursor: default; }
.mf-depth-chord :focus-visible { outline: 3px solid #a22332; outline-offset: 2px; }
.mf-depth-chord-note { font-size: .875rem; }
.mf-depth-chord output { min-height: 1.5em; line-height: 1.5; }