.iet-trainer{border:1px solid #dcdcde;border-radius:14px;padding:20px;margin:20px 0;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.06);max-width:760px}.iet-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.iet-title{margin:0}.iet-difficulty{font-size:12px;border-radius:999px;background:#f0f0f1;padding:4px 10px}.iet-instructions{margin:8px 0 16px}.iet-prompt{border:1px solid #e0e0e0;border-radius:12px;padding:18px;background:#f8fafc;text-align:center}.iet-question-count{font-size:13px;color:#646970;margin-bottom:8px}.iet-root-note{font-size:36px;font-weight:700;letter-spacing:.02em}.iet-hint{margin-top:8px;color:#50575e}.iet-keyboard{display:flex;position:relative;height:118px;margin:18px 0 12px;user-select:none}.iet-key{border:1px solid #8c8f94;display:flex;align-items:flex-end;justify-content:center;font-size:11px;box-sizing:border-box;cursor:pointer}.iet-white{height:118px;width:42px;background:#fff;border-radius:0 0 6px 6px;color:#50575e;padding-bottom:7px}.iet-black{height:72px;width:26px;background:#1d2327;color:#fff;margin-left:-13px;margin-right:-13px;z-index:2;border-radius:0 0 5px 5px;padding-bottom:5px}.iet-key.iet-active{background:#72aee6;color:#0a4b78}.iet-black.iet-active{background:#2271b1;color:#fff}.iet-answer-buttons{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.iet-answer-buttons button,.iet-controls button{border:1px solid #2271b1;background:#2271b1;color:#fff;border-radius:8px;padding:9px 12px;cursor:pointer}.iet-answer-buttons button{background:#fff;color:#2271b1}.iet-answer-buttons button:hover,.iet-controls button:hover{filter:brightness(.95)}.iet-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.iet-feedback{min-height:24px;font-weight:600;margin-top:10px}.iet-feedback.is-correct{color:#008a20}.iet-feedback.is-wrong{color:#b32d2e}.iet-progress-bar{height:8px;background:#e5e7eb;border-radius:99px;overflow:hidden;margin-top:12px}.iet-progress-fill{display:block;height:100%;width:0;background:#2271b1}.iet-error{color:#b32d2e}.post-type-interval_exercise .iet-builder label{line-height:1.5}
.iet-howto{background:#f6f7f7;border-left:4px solid #2271b1;border-radius:8px;padding:12px 14px;margin:10px 0 16px;color:#1d2327}.iet-howto ol{margin:8px 0 8px 20px}.iet-howto li{margin:3px 0}.iet-howto p{margin:8px 0 0}.iet-root-note{font-size:28px;line-height:1.25}


/* 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;
}