.note-editor-body{padding:10px 16px 14px}.library-side:is([data-context-kind=note],[data-context-kind=event]) .context-bar small{display:block;font-size:10px;color:#7c8976;margin-top:4px}
.note-graphic{height:210px;position:relative;background:#fafbf6;border:1px solid #e0e6d9;border-radius:8px;margin-bottom:10px}.note-graphic>svg{position:absolute;inset:0;width:100%;height:210px;pointer-events:none}
.note-graphic .connection-arc{fill:none;stroke:#b9c9b0;stroke-dasharray:5 5}.note-graphic .connection-arc.active{stroke:#52764e;stroke-width:2;stroke-dasharray:none}
.note-caption{position:absolute;top:10px;transform:translateX(-50%);font-size:10px;color:#70816b;white-space:nowrap}.note-graphic .previous{left:15%}.note-graphic .current{left:50%}.note-graphic .next{left:85%}
.note-graphic button{position:absolute;transform:translate(-50%,-50%);background:#fffefa;border:1px dashed #b8c9af;color:#70816b;padding:3px;min-height:32px;border-radius:6px}
.note-graphic .graphic-note{top:110px;width:48px;height:48px;font:26px Georgia,serif;border:0;color:#446348}.note-graphic .graphic-note.current{width:60px;height:60px;font-size:40px;color:#28573f;background:#e7efdf;border:1px solid #89a27c}
.note-graphic .graphic-grace{left:38%;top:77px;width:28px;height:28px;min-height:28px;font:18px Georgia,serif;z-index:2}.graphic-grace.filled{border-style:solid;color:#28573f}
.note-graphic .graphic-link{top:70px;width:28%;height:60px;min-height:60px;padding:0;border:0;background:transparent;font-size:14px;font-weight:700}.graphic-link.incoming{left:31%}.graphic-link.outgoing{left:69%}.note-graphic .graphic-link.filled{background:transparent;border:0;color:#28573f;text-shadow:0 0 5px #fffefa}
.note-graphic .graphic-grace-link{left:45%;top:78px;width:30px;height:34px;min-height:34px;padding:0;font-size:12px;font-weight:700;z-index:2}.note-graphic .graphic-grace-link.filled{background:#e7efdf;border:1px solid #89a27c;color:#28573f}
.note-graphic .vibrato{left:50%;top:46px;font-size:24px}.note-graphic .bend{left:63%;top:43px;font-size:24px}.note-graphic .harmonic{left:62%;top:110px;font-size:23px}.note-graphic .accent{left:50%;top:159px;font-size:20px}
.note-graphic .filled{background:#e7efdf;border:1px solid #89a27c;color:#28573f}.note-graphic button:disabled{opacity:.25;cursor:default}
.note-graphic [data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);z-index:8;padding:3px 6px;border-radius:4px;background:#31483a;color:#fff;font:10px/1.3 system-ui;white-space:nowrap;opacity:0;pointer-events:none}.note-graphic [data-tip]:is(:hover,:focus-visible)::after{opacity:1}
.graphic-foot{display:flex;justify-content:center;gap:6px;position:absolute;bottom:8px;left:0;right:0}.note-graphic .graphic-foot button{position:static;transform:none;font-size:10px;min-height:26px;padding:3px 8px}
.note-palette{margin-bottom:10px}.note-palette-title{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#52705a;margin-bottom:6px}.note-palette-title button{font-size:11px;min-height:30px;padding:3px 8px}
.fret-specials{display:flex;justify-content:flex-end;gap:5px}.fret-specials button{min-width:34px;min-height:30px;padding:3px 8px;font-size:13px}.grace-specials{justify-content:flex-start;margin:0 0 6px}
.fret-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}.fret-grid button{min-height:34px;font:17px Georgia,serif;padding:4px;border:1px solid #d4dfca;border-radius:4px;background:#fffefa;color:#426147}.fret-grid button[aria-pressed=true]{background:#dcead5;border-color:#749a71;color:#28573f}
.connection-choices{display:flex;flex-wrap:wrap;gap:5px}.connection-choices button{min-height:34px;padding:4px 9px;font-size:11px}.connection-choices button:disabled{opacity:.35}
.simultaneous-notes{font-size:11px;color:#637b61;border-top:1px solid #e1e7da;padding-top:8px}.simultaneous-notes summary{cursor:pointer;min-height:26px}.same-beat-staff{padding:2px 12px}.same-beat-staff>div{display:grid;grid-template-columns:24px 1fr 30px 1fr 32px;align-items:center;height:23px;position:relative}.same-beat-staff>div>span{grid-column:2/5;grid-row:1;border-top:1px solid #d4decc}.same-beat-staff button{grid-column:3;grid-row:1;z-index:1;min-height:22px;height:22px;padding:0;background:#fffefa;border:1px solid transparent;border-radius:3px;font:14px Georgia,serif;color:#53704b}.same-beat-staff button[aria-pressed=true]{background:#dcead5;color:#28573f;border-color:#89a27c}.same-beat-staff small:last-child{grid-column:5;grid-row:1;text-align:right}.same-beat-staff button:disabled{color:#c3ccbb}
.note-editor-tip{font-size:10px;line-height:1.6;color:#7d8e74;margin:8px 0}.note-editor-footer{display:flex;gap:6px}.note-editor-footer button{flex:1;min-height:36px;font-size:12px}.note-editor-body [role=alert]{color:#a6402c;font-size:12px;line-height:1.5}

/* 同拨音以六弦横条展示，避免六条音符列与前后音抢空间。 */
.same-beat-staff{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:2px 0}
.same-beat-staff>div{height:58px;display:flex;flex-direction:column;justify-content:center;gap:2px;background:#fafbf6;border-radius:4px}.same-beat-staff>div>span{display:none}.same-beat-staff button{min-height:26px;height:26px;width:34px}.same-beat-staff small{font-size:9px}.same-beat-staff small:last-child{text-align:center}
.empty-note-selection{position:absolute;z-index:6;pointer-events:none;border:2px solid #986131;border-radius:4px;background:#c99d4330;box-shadow:0 0 0 2px #fffefa}
.library-side:is([data-context-kind=note],[data-context-kind=event]){overflow:hidden}
.library-side:is([data-context-kind=note],[data-context-kind=event]) #context-page{display:flex;flex-direction:column;height:100%;overflow:hidden}
.library-side:is([data-context-kind=note],[data-context-kind=event]) #context-page[hidden]{display:none}
.library-side:is([data-context-kind=note],[data-context-kind=event]) .context-bar{flex:none}
.library-side:is([data-context-kind=note],[data-context-kind=event]) .note-editor-body{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden}
.library-side:is([data-context-kind=note],[data-context-kind=event]) .note-editor-main{flex:1;min-height:0;overflow-y:auto}
.library-side:is([data-context-kind=note],[data-context-kind=event]) .note-graphic{flex:none}
.library-side:is([data-context-kind=note],[data-context-kind=event]) .note-palette{margin-bottom:0;padding-bottom:8px}
.library-side:is([data-context-kind=note],[data-context-kind=event]) .simultaneous-notes,.library-side:is([data-context-kind=note],[data-context-kind=event]) .note-editor-tip,.library-side:is([data-context-kind=note],[data-context-kind=event]) .note-editor-footer{flex:none}

.object-editor{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden}
.object-editor-tabs{display:flex;flex:none;gap:4px;padding:8px 16px;border-bottom:1px solid #dce4d7}
.object-editor-tabs button{flex:1;min-height:38px;font-size:12px;border:1px solid transparent;background:transparent;color:#637b61}
.object-editor-tabs button[aria-selected=true]{background:#e7efdf;border-color:#89a27c;color:#28573f}
.object-editor-panel{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden}
.object-editor-panel .event-rhythm-editor{flex:1;overflow:auto;min-height:0}
.object-editor-footer{flex:none;padding:12px 16px;border-top:1px solid #dce4d7;background:#fffefa}
.object-editor-footer button{min-height:42px}
.object-editor-error{flex:none;margin:8px 16px;color:#a6402c;font-size:12px}