.immersive-staff { width: 100%; max-width: none; margin-inline: auto; }
.immersive-staff-paper { overflow: visible; position: relative; z-index: 2; background: var(--paper, #f3efe3); border: 0; border-radius: 0; }
.immersive-staff-board { display: block; width: 100%; height: clamp(208px, 32dvh, 300px); max-height: none; overflow: visible; touch-action: none; cursor: crosshair; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* The handle: hold and slide. No scrolling starts on it. */
.immersive-staff-grip { cursor: grab; touch-action: none; }
.immersive-staff-handle.is-dragging .immersive-staff-grip { cursor: grabbing; }
.immersive-staff-grip-face { transition: fill .18s ease, stroke .18s ease; }
.immersive-staff-handle .immersive-staff-row, .immersive-staff-handle .immersive-staff-lane { transition: opacity .18s ease; }
.immersive-staff-glide { transform-box: fill-box; transform-origin: center; }
.immersive-staff-board:focus-visible { outline: 2px solid #397459; outline-offset: -5px; border-radius: 8px; }
.immersive-staff-board .notehead { cursor: crosshair; }
.immersive-staff-cursor { opacity: .85; }
.immersive-staff-controls { display: flex; justify-content: center; align-items: center; gap: 18px; min-height: 44px; margin-top: 8px; }
.immersive-staff-tools { display: flex; gap: 2px; padding: 0; border: 1px solid var(--line, #a3b9aa2b); border-radius: 8px; overflow: hidden; }
.immersive-staff-tool { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted, #aabbb1); cursor: pointer; touch-action: manipulation; }
.immersive-staff-tool { border-radius: 6px; }
.immersive-staff-tool[aria-pressed="true"] { color: var(--match, #a5d8b9); background: #a5d8b91a; }
.immersive-staff-tool:hover:not(:disabled) { background: #a5d8b913; color: var(--paper, #f3efe3); }
.immersive-staff-tool:focus-visible { outline: 2px solid var(--match, #a5d8b9); outline-offset: -3px; }
.immersive-staff-accidental { display: block; width: 20px; height: 28px; flex: none; }
.immersive-staff-tool:disabled { opacity: .35; cursor: default; }
.immersive-staff[data-disabled="true"] .immersive-staff-board { cursor: default; }
.immersive-staff-accessible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-height: 620px) {
  .immersive-staff-board { height: 208px; }
}