.neb-exercise{max-width:980px;margin:24px auto;padding:24px;border:1px solid #dbe3ee;border-radius:22px;background:#f8fafc;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#111827;box-sizing:border-box}.neb-exercise *{box-sizing:border-box}.neb-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.neb-header-actions{display:flex;gap:10px;align-items:center}.neb-label{text-transform:uppercase;letter-spacing:.08em;color:#64748b;font-size:12px;font-weight:700}.neb-header h2{margin:4px 0 8px;font-size:30px;line-height:1.15}.neb-compact-status{display:flex;gap:9px;align-items:center;flex-wrap:wrap;color:#475569;font-size:15px}.neb-dot{color:#94a3b8}.neb-message{margin:18px 0;padding:14px 16px;background:#fff;border:1px solid #dbe3ee;border-radius:14px;font-size:18px}.neb-staff{background:white;border:1px solid #dbe3ee;border-radius:18px;padding:12px 18px;overflow:hidden;min-height:190px;display:flex;align-items:center;width:100%}.neb-vex{width:100%;max-width:100%;overflow:hidden}.neb-vex svg{width:100%!important;height:auto!important;max-width:100%;display:block;overflow:visible}.neb-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.neb-buttons:empty{display:none}.neb-buttons button,.neb-restart,.neb-midi,.neb-play-note,.neb-loop,.neb-toggle-names{border:1px solid #dbe3ee;background:#fff;border-radius:14px;padding:12px 16px;font-weight:700;cursor:pointer;font-size:16px}.neb-buttons button:hover,.neb-restart:hover,.neb-play-note:hover,.neb-loop:hover,.neb-toggle-names:hover{background:#eef2ff}.neb-midi{background:#4f46e5!important;color:white!important}.neb-play-note{background:#fff!important;color:#111827!important}.neb-midi-connected .neb-midi{background:#f8fafc!important;color:#047857!important;border-color:#bbf7d0!important}.neb-keyboard{display:flex;align-items:flex-start;gap:0;margin-top:14px;min-height:104px;overflow:hidden;padding-bottom:0;max-width:100%;flex-wrap:nowrap}.neb-keyboard:empty{display:none}.neb-key{border:1px solid #111827;background:#fff;color:#111827;display:flex;align-items:flex-end;justify-content:center;font-size:12px;font-weight:700;position:relative;cursor:pointer;transition:transform .08s ease,background-color .08s ease,box-shadow .08s ease}.neb-keyboard-full .neb-key.white{width:46px;height:96px;border-radius:0 0 8px 8px;margin-right:-1px;padding-bottom:10px}.neb-keyboard-full .neb-key.black{width:30px;height:70px;background:#111827;color:#fff;border-radius:0 0 6px 6px;margin-left:-15px;margin-right:-15px;z-index:2;padding-bottom:8px;font-size:11px}.neb-keyboard-minimal{gap:8px}.neb-keyboard-minimal .neb-key{width:52px;height:88px;border-radius:10px;padding-bottom:10px}.neb-keyboard-minimal .neb-key.black{background:#111827;color:#fff;height:74px}.neb-key.pressed{transform:translateY(2px);background:#e5e7eb;box-shadow:inset 0 3px 8px rgba(15,23,42,.18)}.neb-key.black.pressed{background:#374151}.neb-play-note:disabled{opacity:.65;cursor:not-allowed}.neb-midi-connected .neb-buttons,.neb-midi-connected .neb-keyboard{display:none!important}.neb-correct{color:#047857}.neb-wrong{color:#b91c1c}.neb-muted{color:#64748b}@media(max-width:700px){.neb-exercise{padding:18px}.neb-header{align-items:flex-start;flex-direction:column}.neb-header-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}.neb-message{font-size:16px}.neb-header h2{font-size:26px}.neb-staff{min-height:170px;padding:8px 10px}}


/* v1.5.19: align and style header action buttons like reference */
.neb-header-actions{display:flex!important;flex-direction:row!important;gap:10px!important;align-items:center!important;justify-content:flex-end!important;flex-wrap:nowrap!important;}
.neb-header-actions button,.neb-midi,.neb-play-note,.neb-loop,.neb-restart{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;background:#2271b1!important;color:#fff!important;border:1px solid #2271b1!important;border-radius:7px!important;padding:10px 14px!important;font-weight:700!important;font-size:16px!important;line-height:1.35!important;white-space:nowrap!important;box-shadow:none!important;}
.neb-header-actions button:hover,.neb-midi:hover,.neb-play-note:hover,.neb-loop:hover,.neb-restart:hover{background:#1f6aa5!important;border-color:#1f6aa5!important;filter:none!important;}
.neb-midi-connected .neb-midi{background:#2271b1!important;color:#fff!important;border-color:#2271b1!important;}
.neb-btn-icon{display:inline-flex!important;align-items:center!important;line-height:1!important;}
@media(max-width:700px){.neb-header-actions{justify-content:flex-start!important;flex-wrap:wrap!important;}}

/* v1.5.20: Loop button active state */
.neb-loop.is-looping{background:#14532d!important;border-color:#14532d!important;color:#fff!important;}

/* v1.5.21: reliable Loop On/Off playback for scale exercises */

.pet-loop.is-looping,.pet-toggle-names.is-showing-names,.neb-loop.is-looping,.neb-toggle-names.is-showing-names{background:#1d4ed8!important;color:#fff!important;border-color:#1d4ed8!important}


/* v1.6.1: cleaner header layout and staff names below by default */
.neb-header{display:block!important;}
.neb-header-actions{margin-top:16px!important;justify-content:flex-start!important;flex-wrap:wrap!important;}
.neb-header h2{max-width:none!important;}
.neb-compact-status{margin-top:8px!important;}


/* v2.2.62: allow rendered notation containers to shrink to actual SVG height. */
.pet-score,
.pet-score-container,
.pet-osmd,
.pet-osmd-container,
.pet-musicxml-score,
.pet-notation,
[data-pet-score],
#pet-live-preview,
#pet-score {
    min-height: 0 !important;
    overflow: hidden;
}


/* v2.2.62: reduce excessive top whitespace above rendered staff. */
.pet-score,
.pet-score-container,
.pet-osmd,
.pet-osmd-container,
.pet-musicxml-score,
.pet-notation,
[data-pet-score],
#pet-live-preview,
#pet-score {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.pet-score svg,
.pet-score-container svg,
.pet-osmd svg,
.pet-osmd-container svg,
.pet-musicxml-score svg,
.pet-notation svg,
[data-pet-score] svg,
#pet-live-preview svg,
#pet-score svg {
    display: block;
    margin-top: 0 !important;
}


/* v2.2.62: remove internal score padding after SVG viewBox crop. */
.pet-score,
.pet-score-container,
.pet-osmd,
.pet-osmd-container,
.pet-musicxml-score,
.pet-notation,
[data-pet-score],
#pet-live-preview,
#pet-score {
    padding-top: 0 !important;
    margin-top: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.pet-score svg,
.pet-score-container svg,
.pet-osmd svg,
.pet-osmd-container svg,
.pet-musicxml-score svg,
.pet-notation svg,
[data-pet-score] svg,
#pet-live-preview svg,
#pet-score svg {
    display: block !important;
    margin-top: 0 !important;
}


/* v2.2.62: remove extra space below notation before controls. */
.pet-score,
.pet-score-container,
.pet-osmd,
.pet-osmd-container,
.pet-musicxml-score,
.pet-notation,
[data-pet-score],
#pet-live-preview,
#pet-score {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.pet-score svg,
.pet-score-container svg,
.pet-osmd svg,
.pet-osmd-container svg,
.pet-musicxml-score svg,
.pet-notation svg,
[data-pet-score] svg,
#pet-live-preview svg,
#pet-score svg {
    display: block !important;
    margin-bottom: 0 !important;
}

/* Keep only a modest gap between the score and playback controls. */
.pet-score + *,
.pet-score-container + *,
.pet-osmd + *,
.pet-osmd-container + *,
.pet-musicxml-score + *,
.pet-notation + *,
[data-pet-score] + *,
#pet-live-preview + *,
#pet-score + * {
    margin-top: 12px !important;
}


/* v2.2.62: note highlighting must not move the SVG, staff, or clef. */
.pet-is-playing svg,
.pet-is-playing .pet-score,
.pet-is-playing .pet-score-container,
.pet-is-playing .pet-osmd,
.pet-is-playing .pet-osmd-container,
.pet-is-playing .pet-musicxml-score,
.pet-is-playing .pet-notation {
    transform: none !important;
    transition: none !important;
}

.pet-note-current,
.pet-highlight-current,
.pet-current-note {
    fill: #304cff !important;
    stroke: #304cff !important;
}


/* v2.2.62: safe MIDI feedback styling.
   This avoids clef/staff movement without changing render JavaScript. */
.pet-exercise-player svg,
.pet-exercise-player .pet-score,
.pet-exercise-player .pet-score-container,
.pet-exercise-player .pet-osmd,
.pet-exercise-player .pet-osmd-container,
.pet-exercise-player .pet-musicxml-score,
.pet-exercise-player .pet-notation {
    transform: none !important;
}

.pet-exercise-player svg * {
    transition-property: fill, stroke, color, opacity !important;
}

/* Common MIDI/current-note classes should only recolor, never move. */
.pet-midi-note-current,
.pet-midi-note-correct,
.pet-midi-note-wrong,
.pet-midi-highlight,
.pet-midi-active,
.pet-note-current,
.pet-highlight-current,
.pet-current-note {
    transform: none !important;
}


/* v2.2.62: non-mutating MIDI highlight overlay. */
.pet-midi-overlay-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.pet-midi-note-overlay {
    position: absolute;
    border: 2px solid #4f46e5;
    border-radius: 999px;
    opacity: 0.28;
    pointer-events: none;
    box-sizing: border-box;
    mix-blend-mode: multiply;
}

.pet-exercise-player svg {
    transform: none !important;
}


/* v2.2.62: locked score layout during playback/MIDI. */
.pet-score-layout-locked .pet-score,
.pet-score-layout-locked .pet-score-container,
.pet-score-layout-locked .pet-osmd,
.pet-score-layout-locked .pet-osmd-container,
.pet-score-layout-locked .pet-musicxml-score,
.pet-score-layout-locked .pet-notation,
.pet-score-layout-locked [data-pet-score],
.pet-score-layout-locked #pet-score {
    transition: none !important;
}

.pet-score-layout-locked svg {
    transition: none !important;
    transform: none !important;
}